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, selectGroupIfAvailable?: boolean) => Promise<void>	Function to select a specific wallet to connect with. If the key is also a group key (e.g. ‘metamask’, ‘phantom’, etc), it will go to the chain selection view if the selected wallet supports multiple chains. If you want to skip the chain selection view, you can pass in false as the second parameter and it will try to connect with the wallet that has the specified key, without showing the chain selection view.
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
  metadata: WalletMetadata
}

Examples

Example 1: Harcoded options with chain selection view

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

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

  const wallets = [
    { key: 'metamask', name: 'MetaMask' },
    { key: 'phantom', name: 'Phantom' },
  ]

  return (
    <div>
      {wallets.map((wallet) => (
        // calling selectWalletOption will show the chain selection view if the wallets support
        // more than one of the chains you have enabled
        <button key={wallet.key} onClick={() => selectWalletOption(wallet.key)}>
          {wallet.name}
        </button>
      ))}
    </div>
  )
}

Example 2: Harcoded options without chain selection view

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

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

  const wallets = [
    { key: 'metamask', name: 'MetaMask EVM' },
    { key: 'metamasksol', name: 'MetaMask SOL' },
    { key: 'phantomevm', name: 'Phantom EVM' },
    { key: 'phantom', name: 'Phantom SOL' },
  ]

  return (
    <div>
      {wallets.map((wallet) => (
        // calling selectWalletOption(wallet.key, false) will skip the chain selection view
        // and will try to connect with the wallet that has the specified key
        <button key={wallet.key} onClick={() => selectWalletOption(wallet.key, false)}>
          {wallet.name}
        </button>
      ))}
    </div>
  )
}

Example 3: Dynamically populated options with icons

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

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

  return (
    <div>
      {walletOptions.map((option) => (
        <button key={option.key} onClick={() => selectWalletOption(option.key)}>
          <WalletIcon walletKey={option.key} icon={option.metadata.icon} />
          {option.name}
        </button>
      ))}
    </div>
  )
}

Example 4: 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 5: 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 walletKey argument, which is the key of the wallet to connect with, and an optional selectGroupIfAvailable argument, which is a boolean that defaults to true.

If the walletKey is also a group key (e.g. ‘metamask’, ‘phantom’, etc), it will go to the chain selection view if the selected wallet supports more than one of the chains that you have enabled for your app. If you want to skip the chain selection view, you can pass selectGroupIfAvailable = false as the second parameter and it will try to connect with the wallet that has the specified key, without showing the chain selection view.

You can dynamically find the available wallet keys in walletOptions.