การติดตั้ง

การติดตั้ง

เริ่มต้นและทำงานได้ด้วย 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. หากแอปพลิเคชันของคุณใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์ (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 คุณต้อง polyfill โมดูล buffer, events และ http. อ้างอิงการตั้งค่า Remix ด้านล่าง หรือ โปรเจ็กต์ Remix ตัวอย่างของเรา.

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

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

Transport เป็นชั้นกลางการเครือข่ายที่จัดการส่งคำขอ JSON-RPC ไปยังผู้ให้บริการโหนด Ethereum (เช่น Alchemy, Infura เป็นต้น)

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

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

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

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

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

เพื่อดูตัวอย่างการทำงานของ RainbowKit หรือใช้พวกเขาเพื่อสร้างโครงงานใหม่โดยอัตโนมัติ ดูที่ ตัวอย่างการทำงานของทางการ.

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

• ร่วมกับ Create React App
• ร่วมกับ Next.js
• ร่วมกับ Next.js App Router
• ร่วมกับ Remix
• ร่วมกับ Vite