사용자 지정 지갑 목록

지갑 목록 사용자 정의하기

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

Injected Wallet

이것은 window.ethereum이 존재하지만 목록의 다른 지갑에서 제공되지 않은 경우를 위한 페일오버 지갑 옵션입니다. 이 지갑은 페일오버가 필요하지 않거나 주입된 지갑이 없으면 목록에서 자동으로 숨겨집니다.

모든 Injected 지갑이 지원되도록 이 지갑을 항상 목록에 포함하는 것이 권장됩니다.

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

Safe Wallet

dApp이 사용자의 Safe 볼트나 멀티시그와 쉽게 연결을 지원하도록 Safe Apps를 지원하는 경우, 자동 연결을 위해 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 앱 및 확장, 그리고 Web의 Coinbase Smart Wallet을 모두 지원합니다.

preference 인수는 Smart Wallet의 활성화 및 사용 가능성을 제어할 수 있습니다. 환경설정 기반 동작은 여기에서 문서화되어 있습니다.

Smart Wallet은 6월 초에 all로 기본적으로 활성화되며 추가 업그레이드 없이 제공됩니다.

개발자는 오늘 sepolia 및 baseSepolia 체인을 설정하고 smartWalletOnly을 설정하며 coinbaseWallet을 지갑 목록에 포함시켜 Smart Wallet 테스트를 수행할 수 있습니다.

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

참고: 지갑 배열의 순서는 UI에서 지갑이 표시되는 순서를 정의합니다.

다수의 그룹

그룹이름 키를 사용하여 다른 지갑 그룹을 이름 지을 수 있습니다. 여러분이 사용자들에게 권장하는 지갑과 다른 가능한 지갑을 알리고 싶을 때 유용합니다.

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

개요

시작하기

고급