นำปุ่ม Rainbow มาใช้ใน dApp ของคุณ

คอมโพเน้นต์ RainbowButton เป็นวิธีที่ง่ายที่สุดในการเพิ่มการสนับสนุนสำหรับ Rainbow Wallet กับ dApps ที่ใช้ wagmi และต้องการประสบการณ์การเชื่อมต่อที่กำหนดเองมากกว่า RainbowKit.

1. ติดตั้ง @rainbow-me/rainbow-button และ peer dependencies ของมัน

แพ็กเกจที่เข้ากันได้กับ Next.js, React, และ Vite ตรวจสอบคำเตือนเกี่ยวกับ peer dependency ตรวจสอบคำเตือนเกี่ยวกับ peer dependency ตรวจสอบคำเตือนเกี่ยวกับ peer dependency ตรวจสอบคำเตือนเกี่ยวกับ peer dependency.

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

2. กำหนดค่ากับ wagmi และติดตั้ง RainbowButton

ส่งอินสแตนซ์ของ rainbowConnector ไปยัง createConfig ของ Wagmi พร้อมกับ 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 — โดยไม่ต้องดูแลหรือมีปัญหาใดๆ.

อีกอย่าง WalletButton แทนที่อยู่ใน RainbowKit ถ้าคุณต้องการใช้งานร่วมกับกระเป๋าเสริมเพิ่มเติม.