Mengadopsi Butang Pelangi dalam dApp anda

Komponen RainbowButton ialah cara termudah untuk menambah sokongan untuk Wallet Rainbow ke dalam dApp yang menggunakan wagmi dan lebih suka pengalaman penyambungan yang lebih disesuaikan berbanding RainbowKit.

1. Pasang @rainbow-me/rainbow-button dan kebergantungan rakan sebayanya

Pakej ini serasi dengan Next.js, React, dan Vite. Pastikan anda mengikuti amaran kebergantungan rakan sebaya.

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

2. Konfigurasikan dengan Wagmi dan pasang RainbowButton

Serahkan instansi rainbowConnector kepada createConfig Wagmi dengan projectId dan appName, dan sampul aplikasi anda dalam RainbowButtonProvider. Kemudian benamkan 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 boleh menggunakan komponen RainbowButton.Custom untuk pelaksanaan dan penataan khusus.

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

3. Dan itu sahaja!

Kini pengguna anda boleh menikmati pengalaman sambungan lancar untuk Rainbow — tanpa penyelenggaraan atau masalah.

Komponen WalletButton juga boleh didapati dalam RainbowKit jika anda ingin menyokong dompet tambahan.