Pemasangan

Pemasangan

Mula menggunakan RainbowKit

Anda boleh membina projek baru RainbowKit + wagmi + Next.js dengan salah satu perintah berikut, menggunakan pengurus pakej pilihan anda:

npm init @rainbow-me/rainbowkit@latest
# or
pnpm create @rainbow-me/rainbowkit@latest
# or
yarn create @rainbow-me/rainbowkit

Ini akan meminta anda untuk nama projek, menjana direktori baru yang mengandungi projek templat, dan memasang semua kebergantungan yang diperlukan.

Sebagai alternatif, anda boleh mengintegrasikan RainbowKit secara manual ke dalam projek sedia ada anda.

Pasang RainbowKit dan kebergantungan setara, wagmi, viem, dan @tanstack/react-query.

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

Nota: RainbowKit adalah perpustakaan React.

Import RainbowKit, Wagmi dan TanStack Query.

import '@rainbow-me/rainbowkit/styles.css';

import {
  getDefaultConfig,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import {
  mainnet,
  polygon,
  optimism,
  arbitrum,
  base,
} from 'wagmi/chains';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";

Konfigurasikan rantai yang anda inginkan dan jana penyambung yang diperlukan. Anda juga perlu menyiapkan konfigurasi wagmi. Jika dApp anda menggunakan rendering sisi pelayan (SSR), pastikan meletakkan ssr kepada true.

Nota: Setiap dApp yang bergantung pada WalletConnect kini perlu mendapatkan projectId dari WalletConnect Cloud. Ini adalah percuma sepenuhnya dan hanya mengambil masa beberapa minit.

...
import { getDefaultConfig } from '@rainbow-me/rainbowkit';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, polygon, optimism, arbitrum, base],
  ssr: true, // If your dApp uses server side rendering (SSR)
});

Bungkus aplikasi anda dengan RainbowKitProvider, WagmiProvider, dan QueryClientProvider.

const queryClient = new QueryClient();

const App = () => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          {/* Your App */}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

Kemudian, dalam aplikasi anda, import dan paparkan komponen ConnectButton.

import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};

RainbowKit kini akan menguruskan pemilihan dompet pengguna anda, memaparkan maklumat dompet/transaksi dan menangani penukaran rangkaian/dompet.

Beberapa alat pembinaan memerlukan persediaan tambahan.

Apabila menggunakan Remix, anda mesti mengisi modul buffer, events, dan http. Rujuk konfigurasi Remix di bawah, atau projek contoh Remix kami.

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/.*"],
  browserNodeBuiltinsPolyfill: {
    modules: { buffer: true, events: true, http: true },
  },
};

Secara lalai, dApp anda menggunakan penyedia RPC awam untuk setiap rantai untuk mendapatkan baki, menyelesaikan nama ENS, dan banyak lagi. Ini boleh menyebabkan masalah kebolehpercayaan untuk pengguna anda kerana nod awam dikenakan had kadar. Sebaiknya anda membeli akses ke penyedia RPC melalui perkhidmatan seperti Alchemy atau QuickNode, dan mentakrifkan Transports anda sendiri dalam Wagmi. Ini dapat dicapai dengan menambah parameter transports di getDefaultConfig atau melalui createConfig Wagmi secara langsung.

Transport adalah lapisan tengah jaringan yang mengurus penghantaran permintaan JSON-RPC ke Penyedia Node Ethereum (seperti Alchemy, Infura, dll).

Contoh dengan http transport

import { getDefaultConfig } from '@rainbow-me/rainbowkit';
import { http } from 'wagmi';
import { mainnet, sepolia } from 'wagmi/chains';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/...'),
    [sepolia.id]: http('https://eth-sepolia.g.alchemy.com/v2/...'),
  },
});

Untuk keterangan lanjut, lihat dokumen transport wagmi.

Sekarang pengguna anda dapat menyambungkan dompet mereka, anda boleh mula membina selebihnya aplikasi anda menggunakan wagmi.

Hantar transaksi, berinteraksi dengan kontrak, selesaikan perincian ENS dan banyak lagi dengan rangkaian lengkap wagmi’s React Hooks.

Untuk maklumat lebih lanjut, rujuk dokumentasi wagmi.

Untuk melihat beberapa contoh berjalan RainbowKit, atau malah menggunakan mereka untuk secara automatik mencipta projek baru, lihat contoh rasmi.

Untuk mencuba RainbowKit terus dalam penyemak imbas anda, lihat pautan CodeSandbox di bawah:

• dengan Create React App
• dengan Next.js
• dengan Next.js App Router
• dengan Remix
• dengan Vite
• dengan React Router