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 Konnektoren zu erstellen. Auf diese Weise haben Sie die volle Kontrolle darüber, welche Wallets angezeigt werden und in welcher Reihenfolge.

Sie können zum Beispiel wählen, 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 Konnektoren an die createConfig von Wagmi ü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 von spezifischen Apps. Daher wird empfohlen, diese Wallets immer einzubeziehen.

WalletConnect

Dies ist eine Fallback-Wallet-Option für Wallets auf WalletConnect-Basis, die nicht von einem anderen Wallet in der Liste bereitgestellt wurden.

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

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

Wallet für Einträge

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

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

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

Safe Wallet

Für dApps, die Safe Apps unterstützen, um es Nutzern zu ermöglichen, sich einfach mit ihrem Safe-Tresor oder Multi-Sig zu verbinden, schließen Sie die safeWallet-Option für automatische Verbindungen ein. Die Safe-Option wird nur in der Safe Wallet-Browserumgebung angezeigt.

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

Backpack

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

BeraSig

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

Best 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 die Coinbase Smart Wallet im Web.

Ein preference-Argument ist verfügbar, um zu steuern, ob die Smart Wallet aktiviert und für die Nutzer verfügbar ist. Das Verhalten basierend auf den Präferenzen wird hier dokumentiert.

Die Smart Wallet wird standardmäßig mit all im frühen Juni aktiviert, ohne ein weiteres Upgrade.

Entwickler können die Smart Wallet heute mit den Ketten sepolia und baseSepolia testen, indem sie smartWalletOnly einstellen und coinbaseWallet in ihre Wallet-Liste so einfügen:

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

Core

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

Rainbow

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

xPortal

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

Zerion

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

ZilPay

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

Wigwam

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

Beispiele

Reihenfolge

Hier sind einige Beispiele dafür, wie unterschiedliche Wallets in unterschiedlicher Reihenfolge angezeigt werden können.

Zeigen Sie MetaMask zusammen mit generischen Fallback-Wallets an.

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

Zeigen Sie Rainbow, MetaMask und 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: 'Suggested',
      wallets: [
        rainbowWallet,
        metaMaskWallet,
        coinbaseWallet,
        walletConnectWallet,
      ],
    },
  ],
  { appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' },
);

Erinnerung: Die Reihenfolge des wallets-Arrays bestimmt die Reihenfolge, in der Wallets in der Benutzeroberfläche angezeigt werden.

Mehrere Gruppen

Sie können den groupName Schlüssel verwenden, um verschiedene Wallet-Gruppen zu benennen. Dies ist nützlich, wenn Sie Ihren Nutzern mitteilen möchten, welche Wallets Sie empfehlen sowie andere mögliche Wallets.

Empfehlen Sie Rainbow und MetaMask, aber bieten Sie 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