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 asmagiceden
, 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 asmagicedenbtc
, 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<{isInstalledOnBrowser: boolean; 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>
);
};
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.
Was this page helpful?