> ## 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 title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  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)](/javascript/reference/react-quickstart) to get started.
</Card>

<Note>This guide is currently React only.</Note>

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](/react/wallets/external-wallets/recommend-wallets#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](/react/wallets/external-wallets/recommend-wallets#new-to-web3-section).

## General Wallet List

<Frame>
  <img src="https://mintcdn.com/dynamic-docs/S0I4gBjjMnJYbuz8/images/widget/widget-recommended-tags.png?fit=max&auto=format&n=S0I4gBjjMnJYbuz8&q=85&s=6abf875cf48144475b888e2740fcef9f" alt="" width="1166" height="1172" data-path="images/widget/widget-recommended-tags.png" />
</Frame>

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://app.dynamic.xyz/dashboard/chains-and-networks#evm) is the EVM
  section that lists all the wallets and their keys.
</Tip>

```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](/react/using-our-ui/design-customizations/css/css-variables):

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

***

## New To Web3 Section

<Frame>
  <img src="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" width="880" height="1062" data-path="images/widget/widget-new-to-web3-sdk-view.png" />
</Frame>

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