> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Recommend Wallets at Signup

> [card] 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)](https://docs.dynamic.xyz/docs/javascript/reference/react-quickstart.md) to get started.

> [!NOTE]
>
> 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](https://docs.dynamic.xyz/docs/react/wallets/external-wallets/recommend-wallets.md#general-wallet-list). 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](https://docs.dynamic.xyz/docs/react/wallets/external-wallets/recommend-wallets.md#new-to-web3-section).

## General Wallet List

![](https://mintcdn.com/dynamic-docs/S0I4gBjjMnJYbuz8/images/widget/widget-recommended-tags.png?fit=max\&auto=format\&n=S0I4gBjjMnJYbuz8\&q=85\&s=6abf875cf48144475b888e2740fcef9f)

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:

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

> [!TIP]
>
> You can find the valid wallet keys in the chain configuration section of the
> dashoard. For example,
> [here](https://console.dynamic.xyz/dashboard/chains-and-networks#evm) is the EVM
> section that lists all the wallets and their keys.

```Typescript theme={"system"}
<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](https://docs.dynamic.xyz/docs/react/using-our-ui/design-customizations/css/css-variables.md):

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

***

## New To Web3 Section

![](https://mintcdn.com/dynamic-docs/S0I4gBjjMnJYbuz8/images/widget/widget-new-to-web3-sdk-view.png?fit=max\&auto=format\&n=S0I4gBjjMnJYbuz8\&q=85\&s=eef9d31624fb084be7cc6c591f5bac32)

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.

```Typescript theme={"system"}
<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.

```TypeScript theme={"system"}
<DynamicContextProvider
   settings={{
     ...,
     newToWeb3WalletChainMap: {
          primary_chain: 'flow',
          wallets: {}
       },
     },
   }}>
   <HomePage />
</DynamicContextProvider>
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.