RainbowKit

npm init @rainbow-me/rainbowkit@latest
# 或
pnpm create @rainbow-me/rainbowkit@latest
# 或
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'
 
//为没有安装bitget钱包的用户
let customWallets = [rainbowWallet, walletConnectWallet]
if (!window.bitkeep) {
  customWallets.unshift(bitgetWallet)
}
const connectors = connectorsForWallets(
  [
    {
      groupName: '推荐',
      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, // 如果您的DApp使用服务器端渲染（SSR）
})
 
const queryClient = new QueryClient()
 
export default function RainbowDemo() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <ConnectButton />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}