Danh sách Ví Tùy chỉnh

Tùy chỉnh danh sách ví

Bạn có thể nhập các ví riêng lẻ từ '@rainbow-me/rainbowkit/wallets' cùng với hàm connectorsForWallets để tạo danh sách ví của riêng bạn với các đầu nối cần thiết của chúng. Bằng cách này, bạn có toàn quyền kiểm soát để hiển thị ví nào và theo thứ tự nào.

Ví dụ, bạn có thể chỉ chọn hiển thị Rainbow cùng với các ví dự phòng chung.

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

Sau đó, bạn có thể truyền các đầu nối của mình vào tính năng createConfig của 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>
);

Ví tích hợp sẵn

Các ví sau đây được cung cấp qua đối tượng wallet.

Ví chung

Các ví sau đây hiện hữu qua các phương thức kết nối chung thay vì các ứng dụng cụ thể. Kết quả là, nên luôn bao gồm các ví này.

WalletConnect

Đây là một tùy chọn ví dự phòng được thiết kế sẵn cho các ví dựa trên WalletConnect mà chưa được cung cấp bởi ví khác trong danh sách.

Nó được khuyên dùng rằng bạn luôn bao gồm ví này trong danh sách để đảm bảo tất cả các ví dựa trên WalletConnect đều được hỗ trợ.

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

Ví Injected

Đây là một tùy chọn ví dự phòng được thiết kế cho những trường hợp mà window.ethereum tồn tại nhưng không được cung cấp bởi ví khác trong danh sách. Ví này sẽ tự động ẩn mình khỏi danh sách khi không cần thiết hoặc nếu không có ví injected có sẵn.

Nó được khuyên dùng rằng bạn luôn bao gồm ví này trong danh sách để đảm bảo tất cả các ví injected đều được hỗ trợ.

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

Safe Wallet

Đối với dApps hỗ trợ Safe Apps cho phép người dùng dễ dàng kết nối với kho an toàn hoặc ví nhiều chữ ký của họ, bao gồm tùy chọn safeWallet cho các kết nối tự động. Tùy chọn Safe sẽ chỉ xuất hiện trong môi trường trình duyệt Safe Wallet.

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

Các ví cụ thể

Các ví sau đây được cung cấp qua đối tượng wallet (theo thứ tự bảng chữ cái).

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

Kết nối ví này hỗ trợ cả ứng dụng và tiện ích mở rộng Coinbase Wallet, cũng như Coinbase Smart Wallet trên Web.

Một đối số preference được cung cấp để kiểm soát xem Smart Wallet có được kích hoạt và khả dụng cho người dùng hay không. Hành vi dựa trên sở thích được ghi lại tại đây.

Smart Wallet sẽ được kích hoạt mặc định với all vào đầu tháng Sáu, mà không cần nâng cấp thêm.

Các nhà phát triển có thể thử nghiệm Smart Wallet với các chuỗi sepolia và baseSepolia ngay hôm nay bằng cách đặt smartWalletOnly và bao gồm coinbaseWallet trong danh sách ví của họ như sau:

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

Ví dụ

Đặt hàng

Dưới đây là vài ví dụ về cách hiển thị các ví khác nhau, theo thứ tự khác nhau.

Hiển thị MetaMask cùng với các ví dự phòng chung.

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

Hiển thị Rainbow, MetaMask và Coinbase cùng với các ví dự phòng chung.

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

Nhắc nhở: Thứ tự của mảng wallets xác định thứ tự mà ví sẽ được hiển thị trong UI.

Nhiều nhóm

Bạn có thể sử dụng khóa groupName để đặt tên cho các nhóm ví khác nhau. Điều này hữu ích nếu bạn muốn giao tiếp với người dùng ví mà bạn khuyến nghị, cũng như các ví khả thể khác.

Khuyến nghị Rainbow và MetaMask, nhưng cũng cung cấp Coinbase cùng với các ví dự phòng chung.

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

Tổng quan

Bắt đầu

Nâng cao