Mengadopsi Tombol Rainbow di dApp Anda

Komponen RainbowButton adalah cara termudah untuk menambahkan dukungan Rainbow Wallet ke dApp yang menggunakan wagmi dan lebih memilih pengalaman konektor kustom daripada RainbowKit.

1. Install @rainbow-me/rainbow-button dan dependensi sejajarnya

Paket ini kompatibel dengan Next.js, React, dan Vite. Pastikan Anda mengikuti peringatan dependensi sejajar.

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

2. Konfigurasikan dengan Wagmi dan pasang RainbowButton

Berikan instance rainbowConnector ke createConfig Wagmi dengan projectId dan appName, kemudian bungkus aplikasi Anda dalam RainbowButtonProvider. Kemudian, tambahkan komponen 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>
  );
}

Anda juga dapat menggunakan komponen RainbowButton.Custom untuk implementasi dan tampilan kustom.

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

3. Dan itu saja!

Sekarang pengguna Anda dapat menikmati pengalaman koneksi yang mulus untuk Rainbow — tanpa perawatan atau masalah apapun.

Sebuah komponen WalletButton juga tersedia di RainbowKit jika Anda ingin mendukung dompet tambahan.