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

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

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

Вы можете затем передать свои соединители в Wagmi createConfig.

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

Безопасный кошелек

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

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

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

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

1inch Wallet

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

Backpack

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

Базовый аккаунт (ранее Coinbase Wallet)

Этот коннектор для кошелька поддерживает Базовый аккаунт, который является развитием Coinbase Smart Wallet. Он обеспечивает беспрепятственную аутентификацию и улучшенные функции, такие как подаккаунты и разрешения на расходы.

Настройки конфигурации соответствуют ссылочному руководству SDK Базового аккаунта.

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

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

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

Wallet Bloom

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

Brave кошелек

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

Bybit кошелек

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

Coin98 кошелек

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

Compass кошелек

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

Основа

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

Кошелек CTRL

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

Заря кошелек

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

Энкрипт кошелек

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

FoxWallet

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

Frame кошелек

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

Граница кошелек

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

Кошелек ворот

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

Кошелек Gemini

Этот умный коннектор кошелька позволяет безупречно аутентифицироваться через ключи на keys.gemini.com — без загрузок, расширений или API ключей. Просто работает из коробки.

Параметр appName необходим для идентификации вашего dApp, а appIcon является необязательным для брендинга опыта подключения.

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 кошелек

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

Кая кошелек

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

Kaikas

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

Kraken кошелек

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

Kresus кошелек

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

Ledger Live

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

Magic Eden кошелек

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 кошелек

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

OKX кошелек

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

Порту

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

Rabby кошелек

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

Rainbow

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

Ramper кошелек

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

Готово

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

Вигвам

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

Примеры

Заказ

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

Покажите 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 и аккаунт Base вместе с общими резервными кошельками.

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

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

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

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

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

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

Обзор

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

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