> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# useWalletOptions

<Card title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](/javascript/reference/react-quickstart) to get started.
</Card>

### 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](/react/wallets/external-wallets/sort-and-filter-wallets#usage)                                                                                                                                                                                                                      |

Where WalletItem here is:

```typescript theme={"system"}
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

```tsx theme={"system"}
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

```tsx theme={"system"}
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

```tsx theme={"system"}
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

```tsx theme={"system"}
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

```tsx theme={"system"}
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`.