在您的 dApp 中採用 Rainbow 按鈕

RainbowButton 組件是將 Rainbow Wallet 支援添加到使用 wagmi 的 dApps 中的最簡單方式，並且可以提供比 RainbowKit 更自定義的連接器體驗。

1. 安裝 @rainbow-me/rainbow-button 及其對等依賴項

該套件與 Next.js、React 和 Vite 兼容。請確保遵循對等依賴項警告。

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

2. 與 Wagmi 一起配置並安裝 RainbowButton

將 rainbowConnector 的實例傳遞給 Wagmi 的 createConfig，並使用 projectId 和 appName，將您的應用包裹在 RainbowButtonProvider 中。然後插入 RainbowButton 組件。

import '@rainbow-me/rainbow-button/styles.css';
import {
  RainbowButtonProvider,
  RainbowButton,
  rainbowConnector,
} from '@rainbow-me/rainbow-button';
import { WagmiProvider, createConfig, http } from 'wagmi';
import { mainnet } from 'viem/chains';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";

const config = createConfig({
  connectors: [
    rainbowConnector({
      appName: 'RainbowKit demo',
      projectId: 'YOUR_PROJECT_ID',
    }),
  ],
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  },
  ssr: true,
});

const queryClient = new QueryClient();

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowButtonProvider>
          <RainbowButton />
        </RainbowButtonProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

您還可以使用 RainbowButton.Custom 組件進行自定義實現和樣式。

<RainbowButton.Custom>
  {({ ready, connect }) => {
    return (
      <button
        type="button"
        disabled={!ready}
        onClick={connect}
      >
        Connect Rainbow
      </button>
    );
  }}
</RainbowButton.Custom>

3. 就這樣！

現在，您的用户可以享受 Rainbow 的無縫連接體驗——無需維護或煩惱。

如果您想支持額外的錢包，RainbowKit 中還提供了 WalletButton 組件。