التثبيت

ابدأ العمل مع 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 والتبعيات المصاحبة له، 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

عند استخدام Remix، يجب تعبئة polyfills لوحدات 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، وتحديد وسائل النقل الخاصة بك في Wagmi. يمكن تحقيق ذلك عن طريق إضافة معامل transports في getDefaultConfig أو عبر createConfig في Wagmi مباشرة.

الوسيلة هي الطبقة الوسطى الشبكية التي تتعامل مع إرسال طلبات JSON-RPC إلى موفر عقدة Ethereum (مثل Alchemy، Infura، إلخ).

مثال مع وسيلة نقل 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 للنقل.

أضف وظيفتك الخاصة

الآن أن مستخدميك يمكنهم الاتصال بمحافظهم، يمكنك البدء في بناء بقية التطبيق الخاص بك باستخدام wagmi.

إرسال المعاملات، التفاعل مع العقود، حل تفاصيل ENS وأكثر بكثير مع مجموعة wagmi الشاملة من خطاطيف React.

للمزيد من التفاصيل، عرض وثائق wagmi.

مزيد من الأمثلة

لرؤية بعض الأمثلة الجارية من RainbowKit، أو حتى استخدامها لبناء مشروع جديد تلقائيا، تحقق من الأمثلة الرسمية.

لتجربة RainbowKit مباشرة في المتصفح الخاص بك، تحقق من روابط CodeSandbox أدناه:

نظرة عامة

بدء الاستخدام

متقدم