This guide is for Using Your UI, as Dynamic UI components already display the wallets for you.
Wallet keys (when you need them)
Some flows require a stable identifier for a wallet option/provider (for example passing a key into a “connect/link this wallet” call, or rendering a wallet icon). Depending on your SDK, you can get these keys in a few ways:
1) From wallet options/providers returned by the SDK
React
React Native
JavaScript SDK
Use useWalletOptions and read walletOptions[].key. Use walletOptions from your client/hook and read walletOptions[].key.
Use getAvailableWalletProvidersData() and read providers[].key.
https://dynamic-static-assets.com/wallet-book/v1/latest/wallet-book.json.
Each wallet entry includes its key, name, and branding metadata (useful when rendering icons):
"argentx": {
"brand": {
"alt": "ArgentX",
"primaryColor": "#FF875B",
"spriteId": "argentx"
},
"key": "argentx",
"name": "ArgentX"
},
3) From the dashboard chain pages
Each chain page in the dashboard lists supported wallets and their keys (for example EVM or Solana).
React
React Native
JavaScript SDK
Swift
Flutter
You can find the list of available wallets in the walletOptions prop returned by the useWalletOptions hook.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. @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.import { WalletIcon } from '@dynamic-labs/wallet-book'
const WalletIconComponent = () => {
return <WalletIcon walletKey="metamask" />
}
Coming soon.
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>
));
}
metamaskevm and metamasksol). Use the groupKey or chain fields if you want to filter or group the list before rendering. Coming soon.
Coming soon.
