Rainbow Button 🌈
Rainbow Button is a react component that renders an opinionated button built on top of WalletConnect v1 which allows you to connect to Rainbow on mobile (via Mobile Deeplinking) and desktop (via QR codes).
Demo Dapp
Demo Link
Install
yarn add @rainbow-me/rainbow-button
How to use
import React from 'react';
import ReactDOM from 'react-dom';
import { RainbowButton } from '@rainbow-me/rainbow-button';
ReactDOM.render(
<RainbowButton
chainId={1}
connectorOptions={{ bridge: 'https://bridge.walletconnect.org' }}
onConnectorInitialized={(connector) => console.log(connector)}
/>,
document.getElementById('rainbowButton')
);
Rainbow button without styling or custom button
ReactDOM.render(
<RainbowButton
chainId={1}
connectorOptions={{ bridge: 'https://bridge.walletconnect.org' }}
onConnectorInitialized={(connector) => console.log(connector)}
render={() => <button>Custom Rainbow button</button>}
/>,
document.getElementById('rainbowButton')
);
RainbowButton Props
params | value | default value | description |
---|
chainId | number | REQUIRED | Rainbow supported chainId |
connectorOptions | object | REQUIRED | Wallet Connect connector options. bridge param is required |
onConnectorInitialized | function | REQUIRED | Will be called when the button is instantiated, will return the connector object |
render | function | - | Render prop to use a custom element |
animate | boolean | true | Whether or not animate the button |
onConnectorInitialized callback
This callback will return a WalletConnect
connector object, you should store it and use it as a normal WalletConnect
client object.
Initiate connection and listen to events
const onConnectorInitialized = useCallback(
(connector) => {
setConnector(connector);
},
[setConnector]
);
const subscribeToEvents = useCallback(() => {
connector.on('connect', (error, payload) => {
if (error) {
throw error;
}
const { accounts, chainId } = payload.params[0];
});
connector.on('session_update', (error, payload) => {
if (error) {
throw error;
}
const { accounts, chainId } = payload.params[0];
});
connector.on('disconnect', (error, payload) => {
if (error) {
throw error;
}
setConnector(null);
});
}, [connector]);
More details can be found in the Wallet Connect docs:
Exported assets
import { assets } from '@rainbow-me/rainbow-button';
ReactDOM.render(
<div>
<img src={assets.rainbow} tag="rainbow" />
<img src={assets.rainbow_icon} tag="rainbow icon" />
</div>,
document.getElementById('assets')
);
Exported utils
import { utils } from '@rainbow-me/rainbow-button';
utils.goToRainbow();
Exported constants
import { constants } from '@rainbow-me/rainbow-button';
console.log('Rainbow supported chain ids', constants.SUPPORTED_MAIN_CHAIN_IDS);
console.log(
'Rainbow supported test chain ids',
constants.SUPPORTED_TEST_CHAIN_IDS
);
Dev Server
yarn start
To run and try the example dapp locally open other terminal and run
cd example
yarn start
Default dev server runs at localhost:1234 in browser.
Production Bundle
yarn bundle