Instalasi

Instalasi

Mulai dan jalankan dengan RainbowKit

Anda dapat membuat kerangka baru RainbowKit + wagmi + Next.js app dengan salah satu dari perintah berikut, menggunakan manager 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 Anda untuk nama proyek, menghasilkan direktori baru berisi proyek template, dan menginstal semua dependensi yang dibutuhkan.

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

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

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

Catatan: RainbowKit adalah pustaka 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 chain yang Anda inginkan dan hasilkan konektor yang dibutuhkan. Anda juga perlu menyetel 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 benar-benar gratis dan hanya membutuhkan 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 pembangunan akan memerlukan pengaturan tambahan.

Saat menggunakan Remix, Anda harus mem-polyfill modul buffer, events dan http. Rujuk 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 chain untuk mengambil saldo, menyelesaikan nama ENS, dan lainnya. Ini sering dapat menyebabkan masalah keandalan bagi pengguna Anda karena node publik dibatasi kecepatannya. Sebagai gantinya, Anda harus membeli akses ke penyedia RPC melalui layanan seperti Alchemy atau QuickNode, dan menentukan Transports Anda sendiri di Wagmi. Ini dapat dicapai dengan menambahkan parameter transports dalam getDefaultConfig atau langsung melalui createConfig Wagmi.

Transport 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 detail lebih lanjut, lihat dokumentasi wagmi transport.

Sekarang bahwa pengguna Anda dapat menghubungkan dompet mereka, Anda dapat mulai membangun sisa aplikasi Anda menggunakan wagmi.

Kirim transaksi, berinteraksi dengan kontrak, menyelesaikan detail ENS dan banyak lagi dengan rangkaian lengkap React Hooks dari wagmi.

Untuk detail lebih lanjut, lihat dokumentasi wagmi.

Untuk melihat beberapa contoh berjalan dari RainbowKit, atau bahkan menggunakannya untuk secara otomatis mencangkul proyek baru, periksa contoh resmi.

Untuk mencoba RainbowKit langsung di peramban Anda, periksa tautan CodeSandbox di bawah:

• dengan Membuat Aplikasi React
• dengan Next.js
• dengan Next.js Aplikasi Router
• dengan Remix
• dengan Vite