Instalasi

Instalasi

Mulai dan jalankan dengan RainbowKit

Anda dapat memulai aplikasi RainbowKit + wagmi + Next.js baru dengan salah satu perintah berikut, menggunakan pengelola paket pilihan Anda:

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

Ini akan meminta nama proyek, membuat direktori baru yang berisi proyek template, dan menginstal semua dependensi yang diperlukan.

Sebagai alternatif, Anda dapat mengintegrasikan RainbowKit secara manual ke dalam proyek yang ada.

Instal RainbowKit dan dependensi sejenisnya, wagmi, viem, dan @tanstack/react-query.

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

Catatan: RainbowKit adalah perpustakaan React.

Impor 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 buat konektor yang diperlukan. Anda juga perlu mengatur konfigurasi wagmi. Jika dApp Anda menggunakan server side rendering (SSR), pastikan untuk mengatur ssr ke true.

Catatan: Setiap dApp yang bergantung pada WalletConnect sekarang perlu mendapatkan projectId dari WalletConnect Cloud. Ini gratis dan hanya memakan waktu beberapa menit.

...
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, impor dan render komponen ConnectButton.

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

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

RainbowKit sekarang akan menangani pemilihan dompet pengguna Anda, menampilkan informasi dompet/transaksi, dan menangani pergantian jaringan/dompet.

Beberapa alat bangun memerlukan pengaturan tambahan.

Saat menggunakan Remix, Anda harus mengisi modul buffer, events, dan http. Rujuk ke konfigurasi Remix di bawah, atau proyek contoh Remix kami.

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

Secara default, dApp Anda menggunakan penyedia RPC publik untuk setiap rantai untuk mengambil saldo, menyelesaikan nama ENS, dan lainnya. Ini bisa sering menyebabkan masalah keandalan bagi pengguna Anda karena node publik memiliki batasan laju. Sebaiknya Anda membeli akses ke penyedia RPC melalui layanan seperti Alchemy atau QuickNode, dan mendefinisikan Transportasi Anda sendiri di Wagmi. Ini dapat dicapai dengan menambahkan parameter transports di getDefaultConfig atau langsung melalui createConfig Wagmi.

Transportasi adalah lapisan tengah jaringan yang menangani pengiriman permintaan JSON-RPC ke Penyedia Node Ethereum (seperti Alchemy, Infura, dll).

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 lebih jelasnya, lihat dokumen transport wagmi.

Sekarang pengguna Anda dapat menghubungkan dompet mereka, Anda dapat mulai membangun bagian lain dari aplikasi Anda menggunakan wagmi.

Kirim transaksi, berinteraksi dengan kontrak, selesaikan rincian ENS, dan banyak lagi dengan rangkaian lengkap React Hook wagmi.

Untuk informasi lebih lanjut, lihat dokumentasi wagmi.

Untuk melihat beberapa contoh yang berjalan dari RainbowKit, atau bahkan menggunakannya untuk secara otomatis memulai proyek baru, lihat contoh resmi.

Untuk mencoba RainbowKit langsung di browser Anda, lihat tautan CodeSandbox berikut:

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