اعتماد زر Rainbow في تطبيقك اللامركزي (dApp)

مكون RainbowButton هو الطريقة الأبسط لإضافة دعم لمحفظة Rainbow لتطبيقات dApps التي تستخدم wagmi وتفضل تجربة موصل أكثر تخصيصًا من 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 إلى 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. وهذا كل شيء!

الآن يمكن لمستخدميك الاستمتاع بتجربة اتصال سلسة لرينبو — دون أي صيانة أو مشاكل.

هناك مكون WalletButton أيضًا متاح في RainbowKit إذا كنت ترغب في اعتماد دعم لمحافظ إضافية.