Áp dụng Nút Cầu Vồng trong dApp của bạn

Thành phần RainbowButton là cách đơn giản nhất để thêm hỗ trợ cho Rainbow Wallet vào dApps sử dụng wagmi và ưa thích trải nghiệm kết nối tùy chỉnh hơn so với RainbowKit.

1. Cài đặt @rainbow-me/rainbow-button và các phụ thuộc đồng cấp của nó

Gói này tương thích với Next.js, React và Vite. Đảm bảo rằng bạn tuân thủ các cảnh báo phụ thuộc đồng cấp.

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

2. Cấu hình với Wagmi và cài đặt RainbowButton

Truyền một instance của rainbowConnector đến createConfig của Wagmi với projectId và appName, và bọc ứng dụng của bạn trong RainbowButtonProvider. Sau đó, thả thành phần 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>
  );
}

Bạn cũng có thể sử dụng thành phần RainbowButton.Custom cho các triển khai và tạo kiểu tùy chỉnh.

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

3. Và thế là xong!

Bây giờ người dùng của bạn có thể tận hưởng trải nghiệm kết nối liền mạch cho Rainbow — mà không cần bảo trì hoặc gặp rắc rối gì.

Một thành phần WalletButton cũng có sẵn trong RainbowKit nếu bạn muốn hỗ trợ thêm cho các ví khác.