Installation

Installation

Mettez-vous en route avec RainbowKit

Vous pouvez échafauder une nouvelle application RainbowKit + wagmi + Next.js avec l'une des commandes suivantes, en utilisant le gestionnaire de packages de votre choix :

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

Cela vous demandera un nom de projet, générera un nouveau répertoire contenant un projet de base, et installera toutes les dépendances nécessaires.

Alternativement, vous pouvez intégrer manuellement RainbowKit dans votre projet existant.

Installez RainbowKit et ses dépendances associées, wagmi, viem, et @tanstack/react-query.

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

Remarque : RainbowKit est une bibliothèque React.

Importez RainbowKit, Wagmi et 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";

Configurez vos chaînes souhaitées et générer les connecteurs requis. Vous aurez également besoin d'établir une configuration wagmi. Si votre dApp utilise le rendu côté serveur (SSR), assurez-vous de régler ssr sur true.

Remarque : Chaque dApp qui dépend de WalletConnect doit maintenant obtenir un projectId de WalletConnect Cloud. C'est absolument gratuit et ne prend que quelques minutes.

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

Encapsulez votre application avec RainbowKitProvider, WagmiProvider, et QueryClientProvider.

const queryClient = new QueryClient();

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

Ensuite, dans votre application, importez et affichez le composant ConnectButton.

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

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

RainbowKit va désormais gérer la sélection du portefeuille de votre utilisateur, afficher les informations sur le portefeuille/transaction et gérer le changement de réseau/portefeuille.

Certains outils de construction nécessiteront une configuration supplémentaire.

Lors de l'utilisation de Remix, vous devez polyfill les modules buffer, events et http. Référez-vous à la configuration Remix ci-dessous, ou à notre exemple de projet Remix.

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

Par défaut, votre dApp utilise des fournisseurs RPC publics pour chaque chaîne afin de récupérer les soldes, résoudre les noms ENS, et plus. Cela peut souvent causer des problèmes de fiabilité pour vos utilisateurs car les nœuds publics sont limités en termes de taux. Vous devriez plutôt acheter l'accès à un fournisseur RPC via des services comme Alchemy ou QuickNode, et définir vos propres Transports dans Wagmi. Cela peut être réalisé en ajoutant le paramètre transports dans getDefaultConfig ou directement via la fonction createConfig de Wagmi.

Un Transport est la couche intermédiaire de mise en réseau qui gère l'envoi des requêtes JSON-RPC au fournisseur de nœud Ethereum (comme Alchemy, Infura, etc.).

Exemple avec un 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/...'),
  },
});

Pour plus de détails, consultez la documentation wagmi.

Maintenant que vos utilisateurs peuvent connecter leurs portefeuilles, vous pouvez commencer à construire le reste de votre application en utilisant wagmi

Envoyez des transactions, interagissez avec des contrats, résolvez les détails ENS et bien plus encore avec la suite complète de React Hooks de wagmi.

Pour plus de détails, consultez la documentation wagmi

Pour voir quelques exemples d'exécution de RainbowKit, ou même les utiliser pour automatiser la création d'un nouveau projet, consultez les exemples officiels.

Pour essayer RainbowKit directement dans votre navigateur, consultez les liens CodeSandbox ci-dessous :

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