स्थापना

स्थापना

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 कॉन्फ़िगरेशन सेटअप भी करना होगा। अगर आपका dApp सर्वर साइड रेंडरिंग (SSR) का उपयोग करता है तो सुनिश्चित करें कि ssr को true पर सेट करें।

नोट: हर dApp जो WalletConnect पर निर्भर करता है, अब WalletConnect Cloud से projectId प्राप्त करने की जरूरत है। यह बिल्कुल मुफ्त है और केवल कुछ मिनट लगते हैं।

...
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 प्रत्येक चेन के लिए बैलेंस्स को प्राप्त करने, ENS नामों को हल करने, और अधिक के लिए सार्वजनिक RPC प्रदाता का उपयोग करता है। यह अक्सर आपके उपयोगकर्ताओं के लिए विश्वसनीयता समस्याएं पैदा कर सकता है क्योंकि सार्वजनिक नोड्स दर-सीमित होते हैं। इसके बजाय आपको Alchemy या QuickNode जैसी सेवाओं के माध्यम से RPC प्रदाता की पहुंच खरीदनी चाहिए, और Wagmi में अपनी खुद की ट्रांसपोर्ट्स परिभाषित करनी चाहिए। यह getDefaultConfig में transports पैरामीटर जोड़कर या सीधे Wagmi के createConfig के माध्यम से प्राप्त किया जा सकता है।

एक ट्रांसपोर्ट वह नेटवर्किंग मध्य परत है जो Ethereum Node Provider को JSON-RPC अनुरोध भेजने को संभालता है (जैसे 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 Hooks का उपयोग करें।

अधिक विवरण के लिए, wagmi दस्तावेज़ीकरण देखें।

RainbowKit के कुछ चलते हुए उदाहरण देखने के लिए, या उनका उपयोग नई परियोजना को स्वचालित रूप से खाका बनाने के लिए करें, औपचारिक उदाहरण देखें।

RainbowKit को सीधे अपने ब्राउज़र में आज़माने के लिए, नीचे दिए गए CodeSandbox लिंक्स देखें:

• [Create React App] के साथ(https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-create-react-app)
• [Next.js] के साथ (https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-next)
• [Next.js App Router] के साथ(https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-next-app)
• [Remix] के साथ (https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-remix)
• [Vite] के साथ (https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-vite)
• [React Router] के साथ(https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-react-router)