Installation
Get up and running with RainbowKit
Install
Install RainbowKit and its peer dependencies, wagmi and ethers.
npm install @rainbow-me/rainbowkit wagmi ethers
Import
Import RainbowKit, wagmi, and ethers.
import '@rainbow-me/rainbowkit/styles.css';
import {
RainbowKitProvider,
Chain,
getDefaultWallets,
} from '@rainbow-me/rainbowkit';
import { createClient, WagmiProvider, chain } from 'wagmi';
import { providers } from 'ethers';
Configure
Configure your wallets and desired chains, and create the wagmi client.
...
import { providers } from 'ethers';
const infuraId = process.env.INFURA_ID;
const provider = ({ chainId }) =>
new providers.InfuraProvider(chainId, infuraId);
const chains: Chain[] = [
chain.mainnet,
chain.polygon,
chain.optimism,
chain.arbitrumOne,
];
const { connectors } = getDefaultWallets({
chains,
infuraId,
appName: 'My RainbowKit App',
jsonRpcUrl: ({ chainId }) => {
const rpcUrls = (chains.find(x => x.id === chainId) || chain.mainnet)
.rpcUrls;
return typeof rpcUrls.default === 'string'
? rpcUrls.default
: rpcUrls.default[0];
},
});
const wagmiClient = createClient({
autoConnect: true,
connectors,
provider,
});
We recommend using custom providers such as InfuraProvider
and AlchemyProvider
. For help generating provider ID's, see the Infura docs and the Alchemy docs.
Wrap providers
Wrap your application with RainbowKitProvider
and WagmiProvider
.
const App = () => {
return (
<WagmiProvider client={wagmiClient}>
<RainbowKitProvider chains={chains}>
<YourApp />
</RainbowKitProvider>
</WagmiProvider>
);
};
Use it
Then, in your app, import and render the ConnectButton
component.
import { ConnectButton } from '@rainbow-me/rainbowkit';
export const YourApp = () => {
return <ConnectButton />;
};
You're done! RainbowKit will now handle your user's wallet selection, display wallet/transaction information and handle network/wallet switching.
Note if you're using Remix remember to add RainbowKit to its server dependencies.