Пользовательский список кошельков

Настройка списка кошельков

Вы можете импортировать отдельные кошельки из '@rainbow-me/rainbowkit/wallets' вместе с функцией connectorsForWallets для построения собственного списка кошельков с необходимыми коннекторами. Таким образом, у вас есть полный контроль над тем, какие кошельки отображать и в каком порядке.

Например, вы можете выбрать, чтобы показывать только Rainbow вместе с общими резервными кошельками.

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

Затем вы можете передать свои коннекторы в createConfig 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>
);

Встроенные кошельки

Следующие кошельки предоставляются через объект wallet.

Общие кошельки

Следующие кошельки относятся к общим методам подключения, а не конкретным приложениям. В результате рекомендуется всегда включать эти кошельки.

WalletConnect

Это резервный вариант кошелька, предназначенный для кошельков, основанных на WalletConnect, которые не были предоставлены другим кошельком из списка.

Рекомендуется всегда включать этот кошелек в список, чтобы обеспечить поддержку всех кошельков основанных на WalletConnect.

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

Injected Wallet

Это резервный вариант кошелька, предназначенный для сценариев, когда window.ethereum существует, но не был предоставлен другим кошельком из списка. Этот кошелек автоматически скрывается из списка, когда резервное использование не требуется или если отсутствует внедренный кошелек.

Рекомендуется всегда включать этот кошелек в список, чтобы обеспечить поддержку всех внедренных кошельков.

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

Safe Wallet

Для dApps, которые поддерживают Safe Apps, чтобы позволить пользователям легко подключаться к своему сейфу или мультиподписи, включите опцию safeWallet для автоматических подключений. Опция Safe будет отображаться только в среде браузера Safe Wallet.

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

Конкретные кошельки

Следующие кошельки предоставляются через объект wallet (в алфавитном порядке).

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

Лучший кошелек

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

Этот коннектор кошелька поддерживает как приложение Coinbase Wallet, так и расширение, а также Coinbase Smart Wallet в вебе.

Доступен аргумент preference для управления тем, включен ли Smart Wallet и доступен ли для пользователей. Поведение на основе предпочтений задокументировано здесь.

Smart Wallet будет включен по умолчанию с all в начале июня, без дальнейшего обновления.

Разработчики могут протестировать Smart Wallet с цепочками sepolia и baseSepolia уже сегодня, установив smartWalletOnly и включив coinbaseWallet в свой список кошельков следующим образом:

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

Валора

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

XDEFI Wallet

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

Zerion

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

Вигвам

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

Примеры

Заказ

Вот несколько примеров отображения разных кошельков в разном порядке.

Показать MetaMask наряду с общими кошельками резервного хранения.

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

Показать Rainbow, MetaMask и Coinbase вместе с общими резервными кошельками.

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

Напоминание: Порядок кошельков в массиве wallets определяет порядок, в котором кошельки будут отображаться в пользовательском интерфейсе.

Несколько групп

Вы можете использовать ключ groupName для назначения разных групп кошельков. Это полезно, если вы хотите сообщить своим пользователям, какие кошельки вы рекомендуете, а также о других возможных кошельках.

Рекомендовать Rainbow и MetaMask, но также предлагать Coinbase вместе с общими резервными кошельками.

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

Обзор

Начало работы

Продвинутый уровень