RainbowKit
Supported Versions: >=1.1.0
Support Date: 2023.10.15
Chain and Standard
- ETH
- Wallet Standard Supported: EIP-1193、EIP-6963
Installation
Rainbow only supports React. Rainbow depends on viem and wagmi. Install RainbowKit and its peer dependencies
js
npm init @rainbow-me/rainbowkit@latest
# or
pnpm create @rainbow-me/rainbowkit@latest
# or
yarn create @rainbow-me/rainbowkit
npm init @rainbow-me/rainbowkit@latest
# or
pnpm create @rainbow-me/rainbowkit@latest
# or
yarn create @rainbow-me/rainbowkit
Install RainbowKit and its peer dependencies
js
npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query
npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query
Development Configuration
js
import '@rainbow-me/rainbowkit/styles.css';
import {
getDefaultConfig,
RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import {
mainnet,
polygon,
optimism,
arbitrum,
base,
zora,
} from 'wagmi/chains';
import {
QueryClientProvider,
QueryClient,
} from "@tanstack/react-query";
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import '@rainbow-me/rainbowkit/styles.css';
import {
getDefaultConfig,
RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import {
mainnet,
polygon,
optimism,
arbitrum,
base,
zora,
} from 'wagmi/chains';
import {
QueryClientProvider,
QueryClient,
} from "@tanstack/react-query";
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { connectorsForWallets } from '@rainbow-me/rainbowkit';
Wallet Options Configuration
js
import {
rainbowWallet,
bitgetWallet,
walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';
//for users without bitget wallet
let customWallets = [rainbowWallet, walletConnectWallet];
if(!window.bitkeep){
customWallets.unshift(bitgetWallet);
}
const connectors = connectorsForWallets(
[
{
groupName: 'Recommended',
wallets: customWallets,
},
],
{
appName: 'My RainbowKit App',
projectId: projectId,
}
);
import {
rainbowWallet,
bitgetWallet,
walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';
//for users without bitget wallet
let customWallets = [rainbowWallet, walletConnectWallet];
if(!window.bitkeep){
customWallets.unshift(bitgetWallet);
}
const connectors = connectorsForWallets(
[
{
groupName: 'Recommended',
wallets: customWallets,
},
],
{
appName: 'My RainbowKit App',
projectId: projectId,
}
);
initialization
js
const config = getDefaultConfig({
connectors,
appName: 'My RainbowKit App',
projectId: projectId,
chains: [mainnet, polygon, optimism, arbitrum, base, zora],
ssr: false, // If your dApp uses server side rendering (SSR)
});
const queryClient = new QueryClient();
export default function RainbowDemo() {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider>
<ConnectButton />
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
);
};
const config = getDefaultConfig({
connectors,
appName: 'My RainbowKit App',
projectId: projectId,
chains: [mainnet, polygon, optimism, arbitrum, base, zora],
ssr: false, // If your dApp uses server side rendering (SSR)
});
const queryClient = new QueryClient();
export default function RainbowDemo() {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider>
<ConnectButton />
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
);
};