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

# Sort and Filter Wallets

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

### Summary

There are a few helper methods you can leverage to sort, filter, remove, or filter and sort wallets. You can call the methods from within the `walletsFilter` prop.

The helper methods are:

1. FilterWallets
2. RemoveWallets
3. SortWallets
4. FilterAndSortWallets
5. BYOF (Bring your own function)

### Wallet Type

You can see the fields of the wallet that you'll be able to access when building your filter function in the [WalletOption](/react/reference/objects/wallet-option) object.

Note that if you need to check if the wallet is installed on the browser, you can use the `isInstalledOnBrowser` field, while if you want to check if it's the most recently used wallet, you should check if a value for the key `dynamic_last_used_wallet` is present in local storage, and then match against the key field of the wallets.

### Setup

#### walletsFilter (optional)

To filter and sort wallets, you'll want to use the `walletsFilter` prop under settings. You will then use either the one of the helper methods or BYOF to organize your wallet list.

```TypeScript theme={"system"}
import { DynamicContextProvider, DynamicWidget, FilterWallets } from '@dynamic-labs/sdk-react-core';
....
 <DynamicContextProvider
  settings={{
    ...
    walletsFilter: //select the function you want to use to filter and/or sort.
  }}
>
```

### Usage

For all examples we mention here, make sure you have the chains enabled in [the dashboard](https://app.dynamic.xyz/dashboard/chains-and-networks) and that you have used [the appropriate walletConnectors](/react/reference/providers/providers-introduction) in the DynamicContextProvider.

#### FilterWallets

If you would like to filter out all wallets except for a predefined list, then call the FilterWallets method and include the wallets that you want your users to use:

```TypeScript theme={"system"}
import { DynamicContextProvider, DynamicWidget, FilterWallets } from '@dynamic-labs/sdk-react-core';

 <DynamicContextProvider
  settings={{
    ...
    walletsFilter: FilterWallets(['wallet1', 'wallet2', 'wallet3', 'wallet4']);
  }}
>
```

#### SortWallets

The Dynamic SDK has a predefined sorted list of wallets. If you want to change the wallet list to a different ordered list, add a sorted array of the wallets that you want to appear first.
The rest of the wallets will keep their current order.

```jsx theme={"system"}
import { DynamicContextProvider, DynamicWidget, SortWallets } from '@dynamic-labs/sdk-react-core';

 <DynamicContextProvider
  settings={{
    ...
    walletsFilter: SortWallets(['wallet1', 'wallet2', 'wallet3', 'wallet4'])
  }}
>
```

#### FilterAndSortWallets

If you would like to combine the previous two options, then you can use the FilterAndSortWallets method to define the wallets that you want to appear in a specific order.

```jsx theme={"system"}
import { DynamicContextProvider, DynamicWidget, FilterAndSortWallets } from '@dynamic-labs/sdk-react-core';
....
 <DynamicContextProvider
  settings={{
    ...
    walletsFilter: FilterAndSortWallets(['wallet1', 'wallet2', 'wallet3', 'wallet4']);
  }}
>
```

#### RemoveWallets

If you want to remove specific wallets from the available list of wallets, you can call the RemoveWallets and specify which wallets you don't want your users to use:

```jsx theme={"system"}
import { DynamicContextProvider, DynamicWidget, RemoveWallets } from '@dynamic-labs/sdk-react-core';
....
 <DynamicContextProvider
  settings={{
    ...
    walletsFilter: RemoveWallets(['wallet1', 'wallet2', 'wallet3', 'wallet4']);
  }}
>
```

#### FilterChain

If you want to filter out wallets based on whether they support a chain, then you can call FilterChain and specify the chain you want the wallets to support.

```TypeScript theme={"system"}
import { DynamicContextProvider, FilterChain } from '@dynamic-labs/sdk-react-core';

 <DynamicContextProvider
  settings={{
    ...
    walletsFilter: FilterChain('EVM'), // Will only display EVM compatible wallets
  }}
>
```

#### BYOF (Bring Your Own Function)

If the above helper methods are not sufficient, you can design your own function and pass it to walletFilter.

```jsx theme={"system"}
<DynamicContextProvider
  settings={{
    ...
    walletsFilter: (wallets) =>  {
      return wallets.filter((wallet) => {
        return ['wallet1', 'wallet2'].includes(wallet.key)
      });
    },
  }}
>
```

#### Combine multiple filters

You can use the `pipe` function to combine multiple operations to create your wallets filter.

For example, filters by chain, remove wallets and sort.

```TypeScript theme={"system"}
import { DynamicContextProvider, FilterChain } from '@dynamic-labs/sdk-react-core';
import { pipe } from '@dynamic-labs/utils';

 <DynamicContextProvider
  settings={{
    ...
    walletsFilter: pipe(FilterChain('EVM'))
      .pipe(RemoveWallets(['wallet1']))
      .pipe(SortWallets(['wallet2', 'wallet3'])),
  }}
>
```

#### Fetch standardized wallet options keys

To find the key of all the wallets options you can output all the keys using the following syntax:

```jsx theme={"system"}
import { useWalletOptions } from '@dynamic-labs/sdk-react-core';

const { walletOptions } = useWalletOptions();
console.log(walletOptions.map((wallet) => wallet.key));
```

#### Wallet list tabs

To configure multiple wallet filters, you can use the [wallet list tabs feature](/react/reference/objects/views#wallet-list) to define different tabs for users to select.