Installation

Installation

In wenigen Schritten mit RainbowKit loslegen

Sie können eine neue RainbowKit + wagmi + Next.js App mit einem der folgenden Befehle und einem Paketmanager Ihrer Wahl einrichten:

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

Dies wird Sie nach einem Projektnamen fragen, ein neues Verzeichnis mit einem Boilerplate-Projekt erstellen und alle erforderlichen Abhängigkeiten installieren.

Alternativ können Sie RainbowKit manuell in Ihr bestehendes Projekt integrieren.

Installieren Sie RainbowKit und seine Peer-Abhängigkeiten, wagmi, viem, und @tanstack/react-query.

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

Hinweis: RainbowKit ist eine React Bibliothek.

Importieren Sie RainbowKit, Wagmi und 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";

Konfigurieren Sie Ihre gewünschten Chains und generieren Sie die erforderlichen Konnektoren. Sie müssen auch eine wagmi Konfiguration einrichten. Falls Ihr dApp Server Side Rendering (SSR) verwendet, stellen Sie sicher, dass ssr auf true eingestellt ist.

Hinweis: Jedes dApp, das sich auf WalletConnect verlässt, muss nun eine projectId von WalletConnect Cloud erhalten. Dies ist absolut kostenlos und dauert nur wenige Minuten.

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

Wickeln Sie Ihre Anwendung mit RainbowKitProvider, WagmiProvider, und QueryClientProvider ein.

const queryClient = new QueryClient();

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

Importieren und rendern Sie dann in Ihrer App die ConnectButton Komponente.

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

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

RainbowKit übernimmt nun die Wallet-Auswahl Ihrer Benutzer, zeigt Wallet-/Transaktionsinformationen an und verwaltet Netzwerk-/Wallet-Wechsel.

Einige Build-Tools benötigen zusätzliche Einrichtung.

Wenn Sie Remix verwenden, müssen Sie die Module buffer, events und http polyfillen. Verwenden Sie die Remix-Konfiguration unten oder unser Beispiel-Remix-Projekt.

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

Standardmäßig verwendet Ihre dApp öffentliche RPC-Provider für jede Kette, um Salden abzurufen, ENS-Namen aufzulösen, und mehr. Dies kann oft Zuverlässigkeitsprobleme für Ihre Benutzer verursachen, da öffentliche Knoten rate-limitiert sind. Stattdessen sollten Sie den Zugriff auf einen RPC-Provider über Dienste wie Alchemy oder QuickNode erwerben und Ihre eigenen Transports in Wagmi definieren. Dies kann durch Hinzufügen des transports-Parameter in getDefaultConfig oder direkt über Wagmis createConfig erreicht werden.

Ein Transport ist die Netzwerkschicht, die das Senden von JSON-RPC-Anfragen an den Ethereum Node Provider (wie Alchemy, Infura, etc.) abwickelt.

Beispiel mit einem 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/...'),
  },
});

Für mehr Details, sehen Sie sich die wagmi Transport-Dokumentation an.

Da Ihre Benutzer jetzt ihre Wallets verbinden können, können Sie den Rest Ihrer App mit wagmi. weiterentwickeln.

Senden Sie Transaktionen, interagieren Sie mit Verträgen, lösen Sie ENS-Details auf und vieles mehr mit wagmis umfassendem Angebot an React Hooks.

Für weitere Details, sehen Sie sich die wagmi-Dokumentation. an.

Um einige laufende Beispiele von RainbowKit zu sehen oder um diese zu nutzen, um automatisch ein neues Projekt zu scaffolding, schauen Sie sich die offiziellen Beispiele an.

Um RainbowKit direkt in Ihrem Browser auszuprobieren, besuchen Sie die untenstehenden CodeSandbox-Links:

• mit Create React App
• mit Next.js
• mit Next.js App Router
• mit Remix
• mit Vite
• mit React Router