Liste de portefeuilles personnalisée

Personnalisation de la liste des portefeuilles

Vous pouvez importer des portefeuilles individuels depuis '@rainbow-me/rainbowkit/wallets' avec la fonction connectorsForWallets pour construire votre propre liste de portefeuilles avec leurs connecteurs nécessaires. De cette façon, vous avez un contrôle total sur quels portefeuilles afficher, et dans quel ordre.

Par exemple, vous pouvez choisir de n'afficher que Rainbow avec des portefeuilles de repli génériques.

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import {
  rainbowWallet,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [rainbowWallet, walletConnectWallet],
    },
  ],
  {
    appName: 'My RainbowKit App',
    projectId: 'YOUR_PROJECT_ID',
  }
);

Vous pouvez ensuite passer vos connecteurs à la fonction createConfig de Wagmi.

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import { createConfig } from 'wagmi';

const connectors = connectorsForWallets(/* ... */);

const config = createConfig({
  connectors,
  {/* Wagmi config */}
});

const queryClient = new QueryClient();

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

Portefeuilles intégrés

Les portefeuilles suivants sont fournis via l'objet wallet.

Portefeuilles génériques

Les portefeuilles suivants sont liés à des méthodes de connexion génériques plutôt qu'à des applications spécifiques. En conséquence, il est recommandé que ces portefeuilles soient toujours inclus.

WalletConnect

Il s'agit d'une option de portefeuille de secours conçue pour les portefeuilles basés sur WalletConnect qui n'ont pas été fournis par un autre portefeuille de la liste.

Il est recommandé d'inclure toujours ce portefeuille dans la liste pour assurer la prise en charge de tous les portefeuilles basés sur WalletConnect.

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

Portefeuille Injecté

Il s'agit d'une option de portefeuille de secours conçue pour les scénarios où window.ethereum existe mais n'a pas été fourni par un autre portefeuille dans la liste. Ce portefeuille se cachera automatiquement de la liste lorsque le recours n'est pas nécessaire ou s'il n'y a pas de portefeuille injecté disponible.

Il est recommandé d'inclure toujours ce portefeuille dans la liste pour assurer la prise en charge de tous les portefeuilles injectés.

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

Portefeuille Safe

Pour les dApps qui prennent en charge les Safe Apps pour permettre aux utilisateurs de se connecter facilement à leur coffre-fort Safe ou multi-signature, incluez l'option safeWallet pour des connexions automatiques. L'option Safe n'apparaîtra que dans l'environnement du navigateur Safe Wallet.

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

Portefeuilles spécifiques

Les wallets suivants sont fournis via l'objet wallet (par ordre alphabétique).

Portefeuille 1inch

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

Argent

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

Portefeuille Binance Web3

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

Bitget

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

Portefeuille Bifrost

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

Bitski

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

Bitverse

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

Portefeuille Bloom

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

Portefeuille Brave

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

Portefeuille Bybit

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

Coinbase

Ce connecteur de portefeuille prend en charge à la fois l'application et l'extension Coinbase Wallet, ainsi que Coinbase Smart Wallet sur le Web.

Un argument preference est disponible pour contrôler si Smart Wallet est activé et disponible pour les utilisateurs. Le comportement basé sur les préférences est documenté ici.

Smart Wallet sera activé par défaut avec all début juin, sans mise à jour supplémentaire.

Les développeurs peuvent tester Smart Wallet avec les chaînes sepolia et baseSepolia dès aujourd'hui en définissant smartWalletOnly et en incluant coinbaseWallet dans leur liste de portefeuilles comme suit :

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

// Enable Coinbase Smart Wallet for testing
coinbaseWallet.preference = 'smartWalletOnly';

Portefeuille Coin98

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

Portefeuille Compass

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

Core

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

Portefeuille Dawn

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

Portefeuille Enkrypt

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

FoxWallet

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

Portefeuille Frame

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

Portefeuille Frontier

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

Portefeuille Gate

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

imToken

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

Portefeuille ioPay

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

Portefeuille Kaia

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

Kaikas

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

Portefeuille Kraken

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

Portefeuille Kresus

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

Ledger Live

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

Portefeuille Magic Eden

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

Portefeuille MEW

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

MetaMask

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

Portefeuille OKX

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

Omni

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

OneKey

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

Phantom

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

Portefeuille Rabby

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

Rainbow

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

Portefeuille Ramper

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

Portefeuille Ronin

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

Safeheron

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

Taho

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

Portefeuille Talisman

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

Tokenary

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

TokenPocket

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

Portefeuille Trust

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

Portefeuille Uniswap

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

Portefeuille XDEFI

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

Zerion

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

Exemples

Commande

Voici quelques exemples d'affichage de différents portefeuilles, dans un ordre différent.

Affichez MetaMask avec des portefeuilles génériques de secours.

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import {
  metaMaskWallet,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [metaMaskWallet, walletConnectWallet],
    },
  ],
  { appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' },
);

Affichez Rainbow, MetaMask et Coinbase ainsi que les portefeuilles génériques de secours.

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import {
  rainbowWallet,
  metaMaskWallet,
  coinbaseWallet,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Suggested',
      wallets: [
        rainbowWallet,
        metaMaskWallet,
        coinbaseWallet,
        walletConnectWallet,
      ],
    },
  ],
  { appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' },
);

Rappel : L'ordre du tableau wallets définit l'ordre dans lequel les portefeuilles seront affichés dans l'UI.

Groupes multiples

Vous pouvez utiliser la clé groupName pour nommer différents groupes de portefeuilles. Cela est utile si vous souhaitez communiquer à vos utilisateurs quels portefeuilles vous recommandez, ainsi que d'autres portefeuilles possibles.

Recommandez Rainbow et MetaMask, mais proposez aussi Coinbase ainsi que des portefeuilles génériques de secours.

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import {
  rainbowWallet,
  metaMaskWallet,
  coinbaseWallet,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [rainbowWallet, metaMaskWallet],
    },
    {
      groupName: 'Others',
      wallets: [coinbaseWallet, walletConnectWallet],
    },
  ],
  { appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' },
);

Aperçu

Prise en main

Avancé