Benutzerdefinierte Wallet-Liste

Anpassen der Wallet-Liste

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

Sie können beispielsweise 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 Connektoren an Wagmies 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>
);

Integrierte Wallets

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

Generische Wallets

Die folgenden Wallets sind eher auf generische Verbindungsmethoden als auf spezifische Apps ausgerichtet. Daher wird empfohlen, diese Wallets immer einzuschließen.

WalletConnect

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

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

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

Eingebettete 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 entfernen, wenn kein Fallback erforderlich ist oder wenn keine eingebaute Wallet verfügbar ist.

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

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

Sicheres Wallet

Für dApps, die Safe Apps unterstützen, um Nutzern zu ermöglichen, sich einfach mit ihrem Safe-Vault oder Multi-Sig zu verbinden, fügen Sie die Option safeWallet für automatische Verbindungen hinzu. 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';

Backpack

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

Basis Konto (ehemals Coinbase Wallet)

Dieser Wallet-Connector unterstützt das Basis Konto, die Weiterentwicklung des Coinbase Smart Wallet. Es bietet nahtlose Authentifizierung und erweiterte Funktionen wie Unterkonten und Ausgabeberechtigungen.

Konfigurationsoptionen entsprechen der Basis Konto SDK-Referenz.

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

Beste Wallet

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

Bifrost Wallet

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

Binance Web3 Wallet

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

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

Coin98 Wallet

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

Kompass Wallet

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

Core

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

CTRL Wallet

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

Dämmerung 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';

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

Gemini Geldbörse

Dieser intelligente Wallet-Connector ermöglicht nahtlose Authentifizierung über Passwörter auf keys.gemini.com - keine Downloads, Erweiterungen oder API-Schlüssel erforderlich. Es funktioniert direkt ohne Anpassung.

Der appName Parameter ist erforderlich, um Ihre dApp zu identifizieren, während appIcon optional für die Markenanpassung Ihrer Verbindungserfahrung ist.

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

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

MetaMask

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

MEW Wallet

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

Nova Wallet

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

Porto

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

Bereit

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

Beispiele

Bestellung

Hier sind einige Beispiele für die Anzeige verschiedener Wallets in unterschiedlicher Reihenfolge.

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

Zeigen Sie Rainbow, MetaMask und das Basis-Konto zusammen mit generischen Fallback-Wallets an.

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

Erinnerung: Die Reihenfolge des wallets-Arrays definiert die Reihenfolge, in der die 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 Benutzern mitteilen möchten, welche Wallets Sie empfehlen sowie andere mögliche Wallets.

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

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

Übersicht

Erste Schritte

Erweitert