​
Enable Branded Wallet Signup/Login

1

Enable Chains & Add Connectors

The first step is to enable the appropriate chains that you’d like to support and add the appropriate connectors to your app. The following chains and networks configuration guide will show you how to do both.We support Ethereum, all EVM-compatible networks, Solana, Eclipse, Flow, Bitcoin, Algorand, Starknet, Cosmos Hub, Axelar, Noble, Osmosis, Sei and Sui.
2

Configure RPC

You can use the default RPC URLs that we provide for each chain/network, but if you’d like to configure your own, please follow this RPC guide.
3

Enable Web3 Wallet Signup

In the Log in & User Profile section of the dashboard, toggle on Wallet Log in under “Branded Wallets” and you’re good to go!

​
Multi-Wallet

In the dashboard, under Branded Wallets, you can toggle on Multi-Wallet. This option, when toggled on, allows your end users to have more than one connected wallet to their account and change between them. In this way users don’t have to sign out and back in again if they want to use a different wallet, they simply switch between them. You can learn more about Multi-Wallet on the overview page.

​
Using our UI

​
Basic Configuration

In the same section of the dashboard where you enabled Branded Wallets, you can also configure the following:
  • Hide Network: This is used in conjunction with the UI components. By default, the user profile shows the network the user is currently connected to and allows them to switch to another. If you want to hide this, simply toggle this option on.
  • WalletConnect: Configuration for https://walletconnect.com/

​
Using your UI

​
Fetch available wallets

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.

​
Implementation

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

const WalletList = () => {
  const { walletOptions } = useWalletOptions();
  
  return (
    <div>
      {walletOptions.map((wallet) => (
        <div key={wallet.key}>
          <span>{wallet.name}</span>
          <span>{wallet.description}</span>
        </div>
      ))}
    </div>
  );
};

​
Display a wallet icon

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" />
}

​
Connect to a wallet

useWalletOptions allows you to prompt the user to connect using a specific wallet (by passing in the key).You can see how to find the available wallet keys in Find a Wallet Key.
import { useWalletOptions } from "@dynamic-labs/sdk-react-core";

// component setup etc.

const { selectWalletOption } = useWalletOptions();

const connectWithWallet = async (walletKey) => {
  return await selectWalletOption(walletKey)
}

​
Further Configuration

When you enabled Branded Wallets, by default you will be in what’s called “connect-and-sign” mode. It’s worth reading about the implications of this in the overview of authentication modes to decide what’s right for your use case. There’s a bunch of further customizations you can do for the Branded Wallet experience including things like sorting and filtering wallets, so it’s worth reviewing the advanced wallets section of the docs in depth when you’re ready.