RainbowKit

        

         
          
          
        
npm init @rainbow-me/rainbowkit@latest
# or
pnpm create @rainbow-me/rainbowkit@latest
# or
yarn create @rainbow-me/rainbowkit

        

         
          
          
        
npm install @rainbow-me/rainbowkit wagmi [email protected] @tanstack/react-query

        

         
          
          
        
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 {
  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,
  }
);

        

         
          
          
        
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>
  );
};