การติดตั้ง

การติดตั้ง

เริ่มต้นใช้งานกับ RainbowKit

คุณสามารถสร้างโครงสำหรับแอปใหม่ด้วย RainbowKit + wagmi + Next.js ด้วยคำสั่งต่อไปนี้ โดยใช้ตัวจัดการแพคเกจที่คุณเลือก:

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

ระบบจะสอบถามชื่อโปรเจค สร้างไดเรคทอรีใหม่ที่มีโครงการต้นแบบ และติดตั้งไลบรารีที่จำเป็นทั้งหมด

หรือคุณสามารถรวม RainbowKit ด้วยวิธีการแบบแมนนวลลงในโครงการที่คุณมีอยู่แล้ว

ติดตั้ง RainbowKit และไลบรารี peer dependencies อย่าง wagmi, viem, และ @tanstack/react-query.

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

หมายเหตุ: RainbowKit เป็นไลบรารี React.

นำเข้า RainbowKit, Wagmi และ 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";

ตั้งค่าเครือข่ายที่คุณต้องการและสร้างตัวเชื่อมต่อที่จำเป็น คุณยังต้องตั้งค่ากำหนด wagmi configuration หากแอปของคุณใช้การเรนเดอร์เซิร์ฟเวอร์เซอร์ (SSR) ตรวจสอบให้แน่ใจว่าได้ตั้งค่า ssr ให้เป็น true.

หมายเหตุ: ทุก dApp ที่พึ่งพา WalletConnect ตอนนี้ต้องขอรับ projectId จาก WalletConnect Cloud. มันไม่มีค่าใช้จ่ายและใช้เวลาเพียงไม่กี่นาทีเท่านั้น

...
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)
});

หุ้มแอปพลิเคชันของคุณด้วย RainbowKitProvider, WagmiProvider, และ QueryClientProvider.

const queryClient = new QueryClient();

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

จากนั้น ในแอปของคุณ, นำเข้าและเรนเดอร์องค์ประกอบ ConnectButton.

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

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

ตอนนี้ RainbowKit จะจัดการการเลือกกระเป๋าเงินของผู้ใช้ แสดงข้อมูลกระเป๋าเงิน/ข้อมูลการทำธุรกรรม และจัดการการสลับเครือข่าย/กระเป๋าเงิน.

เครื่องมือบางอย่างอาจต้องการการตั้งค่าเพิ่มเติม

เมื่อใช้ Remix, คุณต้องเติมเต็ม buffer, events และโมดูล http อ้างอิงการตั้งค่า Remix ด้านล่าง หรือ โครงการตัวอย่าง Remix ของเรา.

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

โดยค่าเริ่มต้น, dApp ของคุณใช้ตัวให้บริการ RPC สาธารณะสำหรับแต่ละเครือข่ายเพื่อดึงข้อมูลยอดคงเหลือ, การแก้ไขชื่อ ENS และอื่น ๆ สิ่งนี้มักทำให้เกิดปัญหาความเชื่อถือสำหรับผู้ใช้ของคุณเนื่องจากโหนดย่อยสาธารณะมีข้อจำกัดของจำนวนครั้ง คุณควรจะซื้อตัวให้บริการ RPC ผ่านบริการเช่น Alchemy หรือ QuickNode, และกำหนด Transports ของคุณใน Wagmi สิ่งนี้สามารถทำได้โดยการเพิ่มพารามิเตอร์ transports ใน getDefaultConfig หรือผ่านการสร้าง createConfig ของ Wagmi ตรง ๆ

Transport เป็นกลางการสื่อสารในระดับโครงข่ายที่จัดการส่งคำขอ JSON-RPC ไปยัง Ethereum Node Provider (เช่น Alchemy, Infura, ฯลฯ)

ตัวอย่างกับ 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/...'),
  },
});

สำหรับข้อมูลเพิ่มเติม, ดู เอกสาร wagmi transport.

ตอนนี้ผู้ใช้ของคุณสามารถเชื่อมต่อกระเป๋าเงิน, คุณสามารถเริ่มสร้างส่วนที่เหลือของแอปพลิเคชันของคุณโดยใช้ wagmi.

ส่งทรานแซคชัน, โต้ตอบกับสัญญา, แก้ไขรายละเอียด ENS และอื่น ๆ อีกมากมายด้วยชุด React Hooks ที่ครอบคลุมของ wagmi

สำหรับรายละเอียดเพิ่มเติม, ดู เอกสาร wagmi.

เพื่อดูตัวอย่างของ RainbowKit ที่ใช้งานได้ หรือแม้กระทั่งใช้เพื่อสร้างโปรเจ็กต์ใหม่อัตโนมัติ, ตรวจสอบ ตัวอย่างอย่างเป็นทางการ.

เพื่อลอง RainbowKit ในเบราว์เซอร์ของคุณโดยตรง, ตรวจสอบ CodeSandbox ลิงก์ด้านล่าง:

• กับ Create React App
• กับ Next.js
• กับ Next.js App Router
• กับ Remix
• กับ Vite
• กับ React Router