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

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

Вы можете импортировать отдельные кошельки из '@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';

Инъекционный кошелек

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

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

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

Safe Wallet

Для децентрализованных приложений, которые поддерживают Safe Apps, чтобы позволить пользователям легко подключаться к своему сейф-кошельку или multi-sig, включите опцию 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';

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

Этот коннектор для кошелька поддерживает как Coinbase Wallet app так и расширение, а также 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';

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

Примеры

Заказ

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

Показать 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' },
);

Обзор

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

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