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

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

Bạn có thể nhập từng ví từ '@rainbow-me/rainbowkit/wallets' cùng với hàm connectorsForWallets để xây dựng 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 ví nào được hiển thị và theo thứ tự nào.

Ví dụ, bạn có thể chọn chỉ 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ể chuyển các đầu nối của mình tới Wagmi's 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>
);

Ví tích hợp sẵn

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

Ví Chung

Các ví sau đây được xác định theo phương thức kết nối chung hơn là ứng dụng cụ thể. Do đó, khuyến nghị rằng các ví này luôn được bao gồm.

WalletConnect

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

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

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

Ví đã được tiêm

Đây là tùy chọn ví dự phòng được thiết kế cho các tình huống khi window.ethereum tồn tại nhưng chưa đượ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 sự trợ giúp dự phòng không cần thiết hoặc nếu không có ví nào được tiêm có sẵn.

Nên bao gồm ví này trong danh sách để đảm bảo tất cả các ví đã được tiêm đều được hỗ trợ.

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

Ví An Toàn

Đối với dApps hỗ trợ Safe Apps để cho phép người dùng dễ dàng kết nối với Safe vault hoặc multi-sig của họ, bao gồm tùy chọn safeWallet để kết nối tự động. Tùy chọn An Toàn sẽ chỉ xuất hiện trong môi trường trình duyệt Ví An Toàn.

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

Ví Cụ thể

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

Ví 1inch

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

Backpack

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

Tài khoản Cơ sở (trước đây là Ví Coinbase)

Bộ kết nối ví này hỗ trợ Tài khoản Cơ sở, sự phát triển của Ví thông minh Coinbase. Nó cung cấp xác thực liền mạch và các tính năng nâng cao như tài khoản phụ và quyền chi tiêu.

Các tùy chọn cấu hình phù hợp với tài liệu tham khảo Tài khoản Cơ sở 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';

Best Wallet

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

Ví Bifrost

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

Ví Coin98

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

Ví Compass

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

Core

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

Ví CTRL

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

Ví Dawn

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

Ví Enkrypt

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

FoxWallet

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

Ví Frame

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

Ví Frontier

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

Gate Wallet

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

Ví Gemini

Trình kết nối ví thông minh này cho phép xác thực liền mạch qua khóa tại keys.gemini.com - không cần tải xuống, tiện ích mở rộng hay khóa API. Chỉ cần hoạt động ngay khi mở hộp.

Tham số appName là bắt buộc để xác định dApp của bạn, và appIcon là tùy chọn để định danh thương hiệu trải nghiệm kết nối của bạn.

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

Ví ioPay

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

Ví Kaia

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

Kaikas

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

Ví Kraken

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

Ví Kresus

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

Ledger Live

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

Ví Magic Eden

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

MetaMask

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

Ví MEW

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

Ví Nova

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

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

Porto

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

Ví Rabby

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

Rainbow

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

Ví Ramper

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

Sẵn sàng

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

Ví Ronin

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

Ví Trust

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

Ví Uniswap

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

Ví dụ

Sắp xếp

Đây là một vài ví dụ về việc hiển thị các ví khác nhau, trong các 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à Tài khoản Cơ bản cùng với các ví khác.

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

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

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 rất hữu ích nếu bạn muốn truyền đạt cho người dùng của bạn biết những ví bạn đề xuất, cũng như các ví khác có thể.

Khuyến nghị Rainbow và MetaMask, nhưng cũng cung cấp Tài khoản Cơ bản cùng với các ví dự phòng.

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

Tổng quan

Bắt đầu

Nâng cao