Installation

Installation

Démarrez facilement avec RainbowKit

Vous pouvez générer 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 modèle et installera toutes les dépendances requises.

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

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

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

Note : 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 les chaînes souhaitées et générez les connecteurs nécessaires. Vous devrez également configurer une configuration wagmi. Si votre dApp utilise le rendu côté serveur (SSR), assurez-vous de définir ssr sur true.

Note : Chaque dApp qui se base sur WalletConnect doit désormais obtenir un projectId de WalletConnect Cloud. Ceci est complètement 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)
});

Enveloppez 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 gérera maintenant la sélection du portefeuille de votre utilisateur, affichera les informations du portefeuille/transaction et gérera le changement de réseau/portefeuille.

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

Lorsque vous utilisez Remix, vous devez remplir les modules buffer, events et http. Référez-vous à la configuration Remix ci-dessous, ou à notre projet exemple 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 encore. Cela peut souvent causer des problèmes de fiabilité pour vos utilisateurs car les nœuds publics sont limités par leur taux. Vous devriez plutôt acheter un 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 createConfig de Wagmi.

Un transport est la couche réseau intermédiaire qui gère l'envoi des requêtes JSON-RPC au fournisseur de nœuds 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 transport de wagmi.

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

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

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

Pour voir quelques exemples en cours d'exécution de RainbowKit, ou même les utiliser pour générer automatiquement 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
• avec React Router