Daftar Dompet Kustom

Menyesuaikan daftar dompet

Anda dapat mengimpor dompet individual dari '@rainbow-me/rainbowkit/wallets' bersamaan dengan fungsi connectorsForWallets untuk membuat sendiri daftar dompet Anda dengan konektor yang diperlukan. Dengan cara ini, Anda memiliki kendali penuh atas dompet mana yang ingin ditampilkan, dan dalam urutan yang diinginkan.

Sebagai contoh, Anda dapat memilih untuk hanya menampilkan Rainbow bersama dengan dompet fallback umum.

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

Kemudian Anda dapat meneruskan konektor Anda ke 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>
);

Dompet Bawaan

Dompet berikut disediakan melalui objek wallet.

Dompet Umum

Dompet berikut disesuaikan dengan metode koneksi umum daripada aplikasi tertentu. Oleh karena itu, disarankan agar dompet-dompet ini selalu disertakan.

WalletConnect

Ini adalah pilihan dompet cadangan yang dirancang untuk dompet berbasis WalletConnect yang belum disediakan oleh dompet lain dalam daftar.

Disarankan agar Anda selalu menyertakan dompet ini dalam daftar untuk memastikan semua dompet berbasis WalletConnect didukung.

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

Dompet Tersuntik

Ini adalah pilihan dompet cadangan yang dirancang untuk skenario di mana window.ethereum ada tetapi belum disediakan oleh dompet lain dalam daftar. Dompet ini akan otomatis tersembunyi dari daftar ketika cadangan tidak diperlukan atau jika tidak ada dompet tersuntik yang tersedia.

Disarankan agar Anda selalu menyertakan dompet ini dalam daftar untuk memastikan semua dompet tersuntik didukung.

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

Dompet Aman

Untuk dApps yang mendukung Safe Apps memungkinkan pengguna untuk dengan mudah terhubung dengan brankas Safe atau multi-sig mereka, sertakan opsi safeWallet untuk koneksi otomatis. Pilihan Safe hanya akan muncul di lingkungan peramban Dompet Aman.

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

Dompet Khusus

Dompet berikut disediakan melalui objek wallet (urutkan berdasarkan abjad).

Dompet 1inch

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

Backpack

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

Akun Dasar (sebelumnya Coinbase Wallet)

Konektor dompet ini mendukung Akun Dasar, perkembangan dari Dompet Cerdas Coinbase. Ini menyediakan otentikasi yang mulus dan fitur-fitur yang ditingkatkan seperti sub-akun dan izin pengeluaran.

Opsi konfigurasi selaras dengan referensi SDK Akun Dasar.

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

Dompet Terbaik

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

Bifrost Wallet

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

Dompet Binance Web3

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

Dompet Bloom

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

Dompet Brave

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

Dompet Bybit

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

Dompet Coin98

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

Dompet Kompas

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

Inti

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

Dompet CTRL

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

Dompet Fajar

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

Dompet Enkrypt

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

FoxWallet

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

Dompet Frame

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

Dompet Frontier

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

Dompet Gate

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

Gemini Wallet

Konektor dompet pintar ini memungkinkan autentikasi tanpa batas melalui kunci di keys.gemini.com - tidak perlu unduhan, ekstensi, atau API keys. Ini bekerja langsung tanpa konfigurasi tambahan.

Parameter appName diperlukan untuk mengidentifikasi dApp Anda, dan appIcon opsional untuk menghubungkan pengalaman brand Anda.

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

Dompet ioPay

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

Dompet Kaia

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

Kaikas

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

Dompet Kraken

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

Dompet Kresus

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

Ledger Live

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

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

Dompet Nova

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

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

Dompet Rabby

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

Rainbow

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

Dompet Ramper

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

Siap

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

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

Contoh

Pengurutan

Berikut adalah beberapa contoh menampilkan berbagai dompet, dalam urutan yang berbeda.

Tampilkan MetaMask bersama dengan dompet fallback umum.

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

Tampilkan Rainbow, MetaMask, dan Base Account bersama dengan dompet cadangan generik.

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

Pengingat: Urutan array dompet menentukan urutan dompet yang akan ditampilkan dalam UI.

Beberapa kelompok

Anda dapat menggunakan kunci groupName untuk menamai kelompok dompet yang berbeda. Ini berguna jika Anda ingin memberi tahu pengguna dompet mana yang Anda rekomendasikan, serta dompet lain yang mungkin.

Rekomendasikan Rainbow dan MetaMask, tetapi juga tawarkan Base Account bersama dengan dompet cadangan generik.

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

Ikhtisar

Memulai

Lanjutan