useWalletOptions

Summary

The useWalletOptions hook allows you to start the process of connecting to a specific wallet. It provides a function to select a wallet by wallet key.

Once this function is called, the connection process begins with the caveat that:

• If you pass in a walletKey that supports multiple chains, such as magiceden, a user will first be asked to select which chain they want to connect with. Once a chain is selected, then the user will be prompted to connect.
• If you pass in a walletKey that includes a chain, such as magicedenbtc, then the user will skip to the connection step.
• If a wallet does not support multiple chains, such as xverse, then the user will simply go to the connection step.

Usage

Available props

Prop	Type	Description
selectWalletOption	(walletKey: string) => Promise<void>	Function to select a specific wallet to connect with
walletOptions	Array<WalletItem>	List of available wallet options with their keys, names and group (if defined)
getFilteredWalletOptions	(filter: (options: WalletOption[]) => WalletOption[]) => Array<WalletItem>	Allows filtering through the wallet options that will generate the wallet items. It can be used the same way as walletsFilter — see here

Where WalletItem here is:

type WalletItem = {
  chain: string
  group?: string
  groupName?: string
  isInstalledOnBrowser: boolean
  isWalletConnect: boolean
  key: string
  name: string
}

Examples

Example 1: Harcoded options

import { useWalletOptions } from '@dynamic-labs/sdk-react-core'

const WalletList = () => {
  const { selectWalletOption } = useWalletOptions()

  const wallets = [
    { key: 'metamask', name: 'MetaMask' },
    { key: 'magiceden', name: 'Magic Eden' },
  ]

  return (
    <div>
      {wallets.map((wallet) => (
        <button key={wallet.key} onClick={() => selectWalletOption(wallet.key)}>
          {wallet.name}
        </button>
      ))}
    </div>
  )
}

Example 2: Dynamically populated options with filter

import { useWalletOptions, FilterChain } from '@dynamic-labs/sdk-react-core'

const WalletList = () => {
  const { selectWalletOption, getFilteredWalletOptions } = useWalletOptions()

  const groupedWallets = getFilteredWalletOptions(FilterChain('EVM')).reduce(
    (options, wallet) => {
      const key = wallet.group || wallet.key
      const name = wallet.groupName || wallet.name

      if (!options[key]) {
        options[key] = name
      }

      return options
    },
    {}
  )

  return (
    <div>
      {Object.entries(groupedWallets).map(([key, name]) => (
        <button key={key} onClick={() => selectWalletOption(key)}>
          {name}
        </button>
      ))}
    </div>
  )
}

Example 3: Checking if a wallet is instaled in browser

import { useWalletOptions } from '@dynamic-labs/sdk-react-core'

const Main = () => {
  const { walletOptions } = useWalletOptions()

  const isMagciEdenInstalled = walletOptions.find(
    (wallet) => wallet.key === 'magiceden'
  )?.isInstalledOnBrowser

  return (
    <div>
      {isMagciEdenInstalled
        ? 'Magic Eden is installed'
        : 'Magic Eden is not installed'}
    </div>
  )
}

Hook Details

Function: selectWalletOption

The selectWalletOption function select a wallet to connect with. It takes a single argument, walletKey, which is the key of the wallet to connect with.

You can dynamically find the available wallet keys in walletOptions or all the supported wallet keys either from wallet-book (object keys in groups or wallets) or in the chains pages in the dashboard.