Fetch & Display Wallets

This guide is for Using Your UI, as Dynamic UI components already display the wallets for you.

When browsing wallets in the Dynamic Widget, you might see labels beside them like “Last Used”, “Multichain” or “Recommended”.

Last used comes from the “dynamic_last_used_wallet” value in localstorage. “Multichain” comes from the chainGroup node in each wallet (Remember to also add the WalletConnectors for each chain). “Recommended” from the Recommended Wallets feature.

React

You can find the list of available wallets in the walletOptions prop returned by the useWalletOptions hook.

Use the @dynamic-labs/wallet-book library to display a wallet icon using the exported WalletIcon component. This component takes a walletKey prop, which is the key of the wallet you want to display.

React

import { WalletIcon } from '@dynamic-labs/wallet-book'

const WalletIconComponent = () => {
  return <WalletIcon walletKey="metamask" />
}

React Native

Coming soon.

JavaScript SDK

Use the client helpers to list available wallet providers and trigger connect/verify flows with your own UI.

import {
  connectAndVerifyWithWalletProvider,
  getAvailableWalletProvidersData,
} from '@dynamic-labs-sdk/client';

const providers = getAvailableWalletProvidersData();

export function WalletButtons() {
  return providers.map((provider) => (
    <button
      key={provider.id}
      onClick={() =>
        connectAndVerifyWithWalletProvider({
          walletProviderKey: provider.key,
        })
      }
    >
      {provider.metadata.displayName}
    </button>
  ));
}

Providers are grouped per chain and wallet app (for example metamaskevm and metamasksol). Use the groupKey or chain fields if you want to filter or group the list before rendering.

Swift

Coming soon.

Flutter

Coming soon.