Integrate Extension Wallet

Wallet Supported

Currently Tomo Connect SDK supports the following BTC wallet:

  • OKX Bitcoin

  • Unisat

  • Tomo Bitcoin

  • OneKey Bitcoin

  • Bitget Bitcoin

  • Keystone Bitcoin

  • Cactus Link

  • imToken Mobile Wallet (Mobile)

  • Binance Web3 Wallet (Mobile)

And supports the following Cosmos wallet:

  • Keplr

  • Okx Cosmos

  • Cosmostation

  • Leap

  • OneKey Cosmos

  • Station

It is very easy to sort the wallets supported, and you can sort the wallet list, enable or disable it by the following config, customized wallet could be added to the list as well:

<TomoContextProvider
  indexWallets={[
    "bitcoin_tomo_auto", // injectable bitcoin mobile wallet
    "cosmos_tomo_auto", // injectable cosmos mobile wallet
    "bitcoin_okx",
    "bitcoin_unisat",
    "bitcoin_tomo",
    "bitcoin_onekey",
    "bitcoin_bitget",
    "bitcoin_cactuslink",
    "bitcoin_imtoken", // injectable imtoken mobile wallet
    "bitcoin_binance", // injectable binance mobile wallet
    "bitcoin_keystone"
    "cosmos_keplr",
    "cosmos_okx",
    "cosmos_cosmostation",
    "cosmos_leap",
    "cosmos_onekey",
    "cosmos_station",
    'xyz',
    'abc'
  ]}
  // You can also customize wallets that don't include in the default list
  additionalWallets={[
    {
      id: 'xyz',
      name: 'XYZ BTC Wallet',
      chainType: 'bitcoin',
      connectProvider: XYZWallet, // XYZWallet should extends BTCProvider
      type: 'extension',
      img: 'https://your wallet logo.svg'
    }, {
      id: 'abc',
      name: 'ABC Cosmos Wallet',
      chainType: 'cosmos',
      connectProvider: ABCWallet, // ABCWallet should extends CosmosProvider
      type: 'extension',
      img: 'https://your wallet logo.svg'
    },
  ]}
  >
</TomoContextProvider>

When wallet is selected, connection hints will pop up, and the content of the hints could be customized by option 'connectionHints', it could be used as below:

<TomoContextProvider
  connectionHints={[
    {
      text: 'Subject to Developer’s compliance with the terms and conditions of this Agreement',
      logo: (
        <img className={'tm-size-5'} src={'https://tomo.inc/favicon.ico'} />
      )
    },
    {
      text: 'I certify that there are no Bitcoin inscriptions tokens in my wallet.'
    },
    {
      isRequired: true,
      text: (
        <span>
          I certify that I have read and accept the updated{' '}
          <a className={'tm-text-primary'}>Terms of Use</a> and{' '}
          <a className={'tm-text-primary'}>Privacy Policy</a>.
        </span>
      )
    }
  ]}
>
  {children}
</TomoContextProvider>

Customize Chain RPC

Customize chain's RPC is possible and it could be done as below:

import { tomoBitcoin } from "@tomo-inc/wallet-connect-sdk";

<TomoContextProvider
  chainTypes={['cosmos', 'bitcoin']}
  cosmosChains={[
    {
      id: 2,
      name: 'Cosmos',
      type: 'cosmos',
      network: 'cosmoshub-4',
      modularData: any, // Optional, if current wallet doesn't support this cosmos chain, the sdk will ask the wallet to add support for it.
      backendUrls: {
        rpcUrl: 'https://dark-palpable-bird.cosmos-mainnet.quiknode.pro/xxxxapi_key'
      }
    }
  ]}
  bitcoinChains={[
    {
      ...tomoBitcoin,
      backendUrls: {
        mempoolUrl: 'https://your.mempool.space/api',
        inscriptionUrl: 'https://your.inscription.service/api' // used by inscription feature
      }
    }
  ]}
  ...
>
  <ChildComponent />
</TomoContextProvider>

For the above mempool API request and response format, please refer to https://mempool.space/docs/api/rest

If you want to support your own Bitcoin wallet into the wallet list, there are two ways described as above.

Last updated