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.