Lista Personalizada de Carteiras

Personalizando a lista de carteiras

Você pode importar carteiras individuais de '@rainbow-me/rainbowkit/wallets' juntamente com a função connectorsForWallets para criar sua própria lista de carteiras com os conectores necessários. Dessa forma, você tem total controle sobre quais carteiras exibir e em qual ordem.

Por exemplo, você pode optar por mostrar apenas a Rainbow junto com carteiras genéricas de fallback.

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

Você pode então passar seus conectores para a função createConfig do 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>
);

Carteiras Integradas

As seguintes carteiras são fornecidas através do objeto wallet.

Carteiras Genéricas

As seguintes carteiras são destinadas a métodos de conexão genéricos em vez de aplicativos específicos. Como resultado, é recomendado que essas carteiras sejam sempre incluídas.

WalletConnect

Esta é uma opção de carteira fallback projetada para carteiras baseadas no WalletConnect que não foram fornecidas por outra carteira na lista.

Recomenda-se que você sempre inclua esta carteira na lista para garantir que todas as carteiras baseadas no WalletConnect sejam suportadas.

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

Carteira Injetada

Esta é uma opção de carteira fallback projetada para cenários onde window.ethereum existe, mas não foi fornecida por outra carteira na lista. Esta carteira se ocultará automaticamente da lista quando o fallback não for necessário ou se não houver uma carteira injetada disponível.

Recomenda-se que você sempre inclua esta carteira na lista para garantir que todas as carteiras injetadas sejam suportadas.

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

Carteira Safe

Para dApps que suportam Safe Apps, permitindo que os usuários conectem facilmente com seu cofre Safe ou multi-sig, inclua a opção safeWallet para conexões automáticas. A opção Safe só aparecerá no ambiente do navegador Safe Wallet.

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

Carteiras Específicas

As seguintes carteiras são fornecidas através do objeto wallet (em ordem alfabética).

Carteira 1inch

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

Backpack

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

Conta Base (antes conhecida como Coinbase Wallet)

Este conector de carteira suporta Conta Base, a evolução da Coinbase Smart Wallet. Ele fornece autenticação contínua e recursos aprimorados como subcontas e permissões de gasto.

As opções de configuração estão alinhadas com a referência do SDK da Conta Base.

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

Melhor Carteira

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

Carteira Bifrost

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

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

Carteira Bloom

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

Carteira Brave

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

Carteira Bybit

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

Carteira Coin98

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

Carteira Compass

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

Core

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

Carteira CTRL

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

Carteira Dawn

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

Carteira Enkrypt

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

FoxWallet

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

Carteira Frame

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

Carteira Frontier

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

Carteira Gate

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

Carteira Gemini

Este conector de carteira inteligente permite autenticação perfeita através de passkeys em keys.gemini.com - sem downloads, extensões ou chaves API necessárias. Funciona direto de fábrica.

O parâmetro appName é obrigatório para identificar seu dApp, e appIcon é opcional para a personalização da experiência de conexão.

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

Carteira ioPay

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

Carteira Kaia

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

Kaikas

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

Carteira Kraken

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

Carteira Kresus

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

Ledger Live

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

Carteira Magic Eden

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

MetaMask

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

Carteira MEW

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

Carteira Nova

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

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

Carteira Rabby

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

Rainbow

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

Carteira Ramper

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

Pronto

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

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

Trust Wallet

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

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

Exemplos

Ordenação

Aqui estão alguns exemplos de como exibir diferentes carteiras, em diferentes ordens.

Mostre MetaMask junto com carteiras genéricas de fallback.

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

Mostrar Rainbow, MetaMask e Conta Base juntamente com carteiras genéricas de fallback.

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

Lembrete: A ordem do array wallets define a ordem em que as carteiras serão exibidas na UI.

Múltiplos grupos

Você pode usar a chave groupName para nomear diferentes grupos de carteiras. Isso é útil se você quiser comunicar aos seus usuários quais carteiras você recomenda, bem como outras possíveis carteiras.

Recomende Rainbow e MetaMask, mas também ofereça Conta Base juntamente com carteiras genéricas de fallback.

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

Visão Geral

Introdução

Avançado