Recommend Wallets at Signup

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

<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>