Benutzerdefinierte Wallet-Liste

Anpassen der Wallet-Liste

Sie können einzelne Wallets aus '@rainbow-me/rainbowkit/wallets' zusammen mit der Funktion connectorsForWallets importieren, um Ihre eigene Liste von Wallets mit den notwendigen Verbindern zu erstellen. Auf diese Weise haben Sie die volle Kontrolle darüber, welche Wallets angezeigt werden und in welcher Reihenfolge.

Zum Beispiel können Sie sich entscheiden, nur Rainbow zusammen mit generischen Fallback-Wallets anzuzeigen.

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',
  }
);

Sie können dann Ihre Verbinder an Wagmis createConfig übergeben.

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

Eingebaute Wallets

Die folgenden Wallets werden über das wallet-Objekt bereitgestellt.

Generische Wallets

Die folgenden Wallets beziehen sich auf generische Verbindungsmethoden anstelle spezifischer Apps. Daher wird empfohlen, dass diese Wallets immer eingeschlossen werden.

WalletConnect

Dies ist eine Fallback-Wallet-Option, die für WalletConnect-basierte Wallets ausgelegt ist, die nicht von einer anderen Wallet in der Liste bereitgestellt wurden.

Es wird empfohlen, diese Wallet immer in der Liste zu halten, um sicherzustellen, dass alle WalletConnect-basierten Wallets unterstützt werden.

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

Eingespritzte Wallet

Dies ist eine Fallback-Wallet-Option für Szenarien, in denen window.ethereum existiert, aber nicht von einer anderen Wallet in der Liste bereitgestellt wurde. Diese Wallet wird sich automatisch aus der Liste verbergen, wenn das Fallback nicht notwendig ist oder keine eingespritzte Wallet verfügbar ist.

Es wird empfohlen, diese Wallet immer in die Liste aufzunehmen, um sicherzustellen, dass alle eingespritzten Wallets unterstützt werden.

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

Sichere Wallet

Für dApps, die Safe Apps unterstützen, um es Benutzern zu erleichtern, sich mit ihrem Safe-Tresor oder Multi-Sig zu verbinden, fügen Sie die Option safeWallet für automatische Verbindungen hinzu. Die Safe-Option erscheint nur in der Browserumgebung der Safe-Wallet.

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

Spezifische Wallets

Die folgenden Wallets werden über das wallet-Objekt bereitgestellt (in alphabetischer Reihenfolge).

1inch Wallet

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

Argent

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

BeraSig

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

Bestes Wallet

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

Binance Web3 Wallet

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

Bitget

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

Bifrost Wallet

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

Bitski

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

Bitverse

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

Bloom Wallet

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

Brave Wallet

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

Bybit Wallet

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

Coinbase

Dieser Wallet-Connector unterstützt sowohl die Coinbase Wallet-App als auch die Erweiterung sowie Coinbase Smart Wallet im Web.

Ein Argument preference ist verfügbar, um zu steuern, ob Smart Wallet für Benutzer aktiviert und verfügbar ist. Das verhaltensbasierte Verhalten der Präferenz ist hier dokumentiert.

Smart Wallet wird ab Anfang Juni standardmäßig mit all aktiviert, ohne ein weiteres Upgrade.

Entwickler können Smart Wallet bereits heute mit sepolia und baseSepolia-Chains testen, indem sie smartWalletOnly setzen und coinbaseWallet in ihre Wallet-Liste wie folgt aufnehmen:

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

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

Coin98 Wallet

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

Compass Wallet

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

Kern

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

Dawn Wallet

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

Enkrypt Wallet

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

FoxWallet

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

Frame Wallet

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

Frontier Wallet

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

Gate Wallet

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

imToken

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

ioPay Wallet

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

Kaia Wallet

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

Kaikas

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

Kraken Wallet

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

Kresus Wallet

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

Ledger Live

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

Magic Eden Wallet

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

MEW Wallet

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

MetaMask

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

OKX Wallet

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

Rabby Wallet

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

Regenbogen

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

Ramper Wallet

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

XDEFI Wallet

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

Zerion

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

Wigwam

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

Beispiele

Sortierung

Hier sind ein paar Beispiele, wie verschiedene Wallets in unterschiedlicher Reihenfolge angezeigt werden können.

Zeige MetaMask zusammen mit generischen Fallback-Wallets.

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' },
);

Zeige Rainbow, MetaMask und Coinbase zusammen mit generischen Fallback-Wallets.

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' },
);

Erinnerung: Die Reihenfolge des wallets-Arrays definiert die Reihenfolge, in der die Wallets im UI angezeigt werden.

Mehrere Gruppen

Sie können den Schlüssel groupName verwenden, um verschiedenen Wallet-Gruppen Namen zu geben. Dies ist nützlich, wenn Sie Ihren Benutzern mitteilen möchten, welche Wallets Sie empfehlen und welche anderen Wallets möglich sind.

Empfehlen Sie Rainbow und MetaMask, bieten Sie aber auch Coinbase zusammen mit generischen Fallback-Wallets an.

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' },
);

Übersicht

Erste Schritte

Erweitert