custom-wallets.mdx

import CustomWagmiWalletsIntroPartial from '../../_partials/customisation/customWagmiWalletsIntro.mdx' import CustomExplorerWalletsPartial from '../../_partials/customisation/customExplorerWallets.mdx' import CustomManualWalletsPartial from '../../_partials/customisation/customManualWallets.mdx' import CustomWagmiConnectorsPartial from '../../_partials/customisation/customWagmiConnectors.mdx' import CustomWalletImagesPartial from '../../_partials/customisation/customWalletImages.mdx'

Custom Wallets

:::caution This documentation is for Web3Modal v2. You can find Web3Modal v3 docs here :::

Custom explorer wallets

<Web3Modal
  explorerRecommendedWalletIds={[
    'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96',
    '1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369',
    '4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0'
  ]}
/>

Now, these wallets will show up first in specified order. If you want to exclude some or all other wallets, you can combine above with explorerExcludedWalletIds option:

<Web3Modal
  explorerRecommendedWalletIds={[
    'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96',
    '1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369',
    '4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0'
  ]}
  explorerExcludedWalletIds="ALL"
/>

Custom wagmi connectors

import { createConfig } from 'wagmi'
import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'
import { w3mConnectors } from '@web3modal/ethereum'

const wagmiConfig = createConfig({
  connectors: [
    ...w3mConnectors({
      /* ... */
    }),
    new CoinbaseWalletConnector({
      /* ... */
    })
  ]
})

Custom manual wallets

<Web3Modal
  mobileWallets={[
    {
      id: 'customMobileWallet',
      name: 'Custom Mobile Wallet',
      links: {
        native: 'customMobileWallet://',
        universal: 'https://customMobileWallet.com'
      }
    }
  ]}
  desktopWallets={[
    {
      id: 'customDesktopWallet',
      name: 'Custom Desktop Wallet',
      links: {
        native: 'customDesktopWallet://',
        universal: 'https://web.customDesktopWallet.com'
      }
    }
  ]}
/>

Custom wallet images

<Web3Modal
  walletImages={{
    // Override explorer wallet image
    c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96:
      'https://example.com/metamask.png',

    // Override wagmi connector image (refer to wagmi to find id)
    coinbaseWallet: 'https://example.com/coinbaseWallet.png',

    // Override manual wallet image
    customMobileWallet: 'https://example.com/customMobileWallet.png'
  }}
/>