Pemasangan

Pemasangan

Bangunkan dan jalankan dengan RainbowKit

Anda boleh mengasaskan aplikasi RainbowKit + wagmi + Next.js baharu dengan salah satu arahan 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 asas, dan memasang semua kebergantungan yang diperlukan.

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

Pasang RainbowKit dan kebergantungan peer-nya, 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 hasilkan penyambung yang diperlukan. Anda juga perlu menyiapkan konfigurasi wagmi. Jika dApp anda menggunakan rendering sisi pelayan (SSR) pastikan untuk menetapkan ssr kepada true.

Nota: Setiap dApp yang bergantung kepada WalletConnect kini perlu mendapatkan projectId daripada WalletConnect Cloud. Ini adalah percuma sepenuhnya dan hanya memerlukan 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 menguruskan pertukaran rangkaian/dompet.

Beberapa alat binaan memerlukan persediaan tambahan.

Apabila menggunakan Remix, anda perlu 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 rantaian untuk mendapatkan baki, menyelesaikan nama ENS, dan banyak lagi. Ini sering kali menyebabkan masalah kebolehpercayaan bagi pengguna anda kerana nod awam adalah terhad kadar. Anda seharusnya membeli akses kepada penyedia RPC melalui perkhidmatan seperti Alchemy atau QuickNode, dan tentukan Transports anda sendiri dalam Wagmi. Ini boleh dicapai dengan menambah parameter transports dalam getDefaultConfig atau melalui Wagmi's createConfig secara langsung.

Transport adalah lapisan tengah rangkaian yang mengurus penghantaran permintaan JSON-RPC kepada Penyedia Nod Ethereum (seperti Alchemy, Infura, dsb.).

Contoh dengan transport http

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 maklumat lanjut, lihat dokumentasi transport wagmi.

Sekarang pengguna anda boleh menghubungkan dompet mereka, anda boleh mula membina seluruh aplikasi anda menggunakan wagmi.

Hantar transaksi, berinteraksi dengan kontrak, selesaikan butiran ENS dan banyak lagi dengan set lengkap React Hooks dari wagmi.

Untuk maklumat lanjut, lihat dokumentasi wagmi.

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

Untuk mencuba RainbowKit secara langsung dalam pelayar anda, lihat pautan CodeSandbox di bawah:

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