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

# onWalletTabSelected

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

### Summary

This callback will be called when a wallet tab is selected by the user.
See here how to enable wallet tabs: [here](https://docs.dynamic.xyz/docs/react/using-our-ui/design-customizations/views.md#configuring-wallet-list-tabs).

### Usage

As an event prop:

```TypeScript theme={"system"}
<DynamicContextProvider
  settings={{
    events: {
      onWalletTabSelected: (args) => {
        console.log('onWalletTabSelected was called', args);
      }
    }
  }}
>
 {/* ... rest of your app ... */}
</DynamicContextProvider>
```

As a hook:

```TypeScript theme={"system"}
useDynamicEvent('walletTabSelected', (args) => {
  console.log('walletTabSelected was called', args);
});
```

### Callback Argument Value

```TypeScript theme={"system"}
{
  index: number;
  tab: {
    label: {
      text?: string;
      icon?: string | ReactElement;
      key?: string;
    };
    walletsFilter?: WalletsFilter;
    recommendedWallets?: RecommendedWallet[];
  }
}
```

> [!NOTE]
>
> The `tab` object contains exact properties that were provided in `tabs.items`
> — see [here](https://docs.dynamic.xyz/docs/react/using-our-ui/design-customizations/views.md#configuring-wallet-list-tabs). Use
> the `key` property to identify each tab in this event.


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