Liste de Portefeuilles Personnalisée

Personnalisation de la liste de 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 manière, vous avez un contrôle total sur les portefeuilles à afficher et dans quel ordre.

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

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 limités à des méthodes de connexion génériques plutôt qu'à des applications spécifiques. Il est donc recommandé d'inclure toujours ces portefeuilles.

WalletConnect

Ceci est 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 garantir le support de tous les portefeuilles basés sur WalletConnect.

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

Portefeuille Injecté

Ceci est 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 de la liste. Ce portefeuille se cachera automatiquement de la liste lorsque le secours n'est pas nécessaire ou s'il n'y a aucun portefeuille injecté disponible.

Il est recommandé d'inclure toujours ce portefeuille dans la liste pour garantir le support de tous les portefeuilles injectés.

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

Portefeuille Sûr

Pour les dApps qui prennent en charge les Safe Apps permettant aux utilisateurs de se connecter facilement à leur coffre-fort Safe ou multi-sig, 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 portefeuilles suivants sont fournis via l'objet wallet (par ordre alphabétique).

Portefeuille 1inch

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

Backpack

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

Compte Base (anciennement portefeuille Coinbase)

Ce connecteur de portefeuille prend en charge le Compte Base, l'évolution du Smart Wallet de Coinbase. Il offre une authentification transparente et des fonctionnalités améliorées telles que des sous-comptes et des permissions de dépenses.

Les options de configuration sont conformes à la référence SDK Base Account.

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

// Configure attribution (choose one approach)
baseAccount.preference = {
  attribution: { auto: true }, // Smart Wallet generates origin-based identifier
};

// Or use custom attribution
baseAccount.preference = {
  attribution: { dataSuffix: '0x1234567890abcdef' }, // 16-byte hex identifier
};

// Configure sub-accounts
baseAccount.subAccounts = {
  creation: 'on-connect', // or 'manual'
  defaultAccount: 'sub', // or 'universal'
  funding: 'spend-permissions', // or 'manual'
};

// Configure paymaster URLs for gasless transactions
baseAccount.paymasterUrls = {
  [base.id]: 'https://api.developer.coinbase.com/rpc/v1/base/...',
};

BeraSig

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

Meilleur Portefeuille

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

Portefeuille Bifrost

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

Portefeuille Binance Web3

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

Bitget

import { bitgetWallet } 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';

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 CTRL

import { ctrlWallet } 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';

Portefeuille Gemini

Ce connecteur de portefeuille intelligent permet une authentification transparente via des passes à keys.gemini.com - pas de téléchargements, d’extensions ou de clés API requis. Cela fonctionne immédiatement.

Le paramètre appName est requis pour identifier votre dApp, et appIcon est facultatif pour personnaliser votre expérience de connexion.

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

const gemini = geminiWallet({
  appName: 'My App',
  appIcon: 'https://my-app.com/logo.png', // Optional
});

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';

MetaMask

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

MEW Wallet

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

Portefeuille Nova

import { novaWallet } 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';

ParaSwap

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

Phantom

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

Porto

import { portoWallet } 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';

Prêt

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

Ronin Wallet

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

Safeheron

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

Taho

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

Talisman

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

Tokenary

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

TokenPocket

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

Trust Wallet

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

Uniswap Wallet

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

Valora

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

Wigwam

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

xPortal

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

Zerion

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

ZilPay

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

Exemples

Ordonnance

Voici quelques exemples d'affichage de différents portefeuilles, dans différents ordres.

Afficher MetaMask ainsi que les 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 Base Account ainsi que les portefeuilles génériques de secours.

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

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Suggested',
      wallets: [
        rainbowWallet,
        metaMaskWallet,
        baseAccount,
        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'interface utilisateur.

Multiples groupes

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

Recommandez Rainbow et MetaMask, mais proposez également Base Account ainsi que des portefeuilles génériques de secours.

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

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

Aperçu

Prise en main

Avancé