Recommend Wallets at Signup

Recommended: JavaScript SDK with React Hooks

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) to get started.

This guide is currently React only.

There are two different kinds of wallet recommentdations that you can configure. The first is for a user who might already have a wallet, but you want to recommend a specific wallet to them, to learn about this, continue to the General Wallet List section. The second is for a user who is new to Web3 and doesn’t have a wallet at all, to learn about this you can skip to the New to Web3 section.

General Wallet List

You can now specify recommended wallets that stick to the top of the wallet list, whether or not they are installed. To do so, we added a new prop recommendedWallet to the DynamicContext settings which is an array of:

{
   "walletKey": "phantomevm",
   // label: freeform string input for the tag label. If not specified, defaults to "Recommended"
   "label": "Popular"
}

You can find the valid wallet keys in the chain configuration section of the dashoard. For example, here is the EVM section that lists all the wallets and their keys.

<DynamicContextProvider
   settings={{
      ...,
      recommendedWallets: [
         { walletKey: "phantomevm", label: "Popular" },
         { walletKey: "okxwallet" }
      ],
   }}>
   <HomePage />
</DynamicContextProvider>

If you would like to customize the background and text color for the recommended tag, please refer to the CSS variable guide:

--dynamic-badge-primary-background: #4779FF;
--dynamic-badge-primary-color: #fff;

New To Web3 Section

In our New to Web3 help section in our SDK, we show a common wallet for users to get started for each chain. For now, if you have enabled more than 1 chain, then we will show only 1 chain and 1 wallet. To change the default wallet shown in this this section, you can pass a prop newToWeb3WallChainMap to specify the primary chain (this is to support multi-chain) and then specify the wallet with the corresponding chain.

<DynamicContextProvider
   settings={{
      ...,
      newToWeb3WalletChainMap: {
         primary_chain: 'flow', // <-- Here you specify the primary chain which will select the wallet to show
         wallets: { // <-- With "wallets" you specify the wallets you want to show for each chain
           flow: 'blocto',
           solana: 'glow'
         },
      },
   }}>
   <HomePage />
</DynamicContextProvider>

For customers supporting multiple chains, you can also specify which chain you prefer to be primary which will then recommend the wallet aligned with that chain. You don’t need to specify a wallet unless you want to override the current default wallet for that chain.

<DynamicContextProvider
   settings={{
     ...,
     newToWeb3WalletChainMap: {
          primary_chain: 'flow',
          wallets: {}
       },
     },
   }}>
   <HomePage />
</DynamicContextProvider>

Implementation Guides

SDK Reference

Recommend Wallets at Signup

Recommended: JavaScript SDK with React Hooks

General Wallet List

New To Web3 Section

Recommended: JavaScript SDK with React Hooks

​General Wallet List

​New To Web3 Section

General Wallet List

New To Web3 Section