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<{key: string; name: string; group?: string}>	List of avaiable wallet options with their keys, names and group (if defined)

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

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

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

  const groupedWallets = walletOptions.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>
  );
};

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.