Sort and Filter Wallets

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)

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.

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 and that you have used the appropriate walletConnectors 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:

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.

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.

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:

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.

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.

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

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:

import { useDynamicContext } from ‘@dynamic-labs/sdk-react-core’;

const { walletConnectorOptions } = useDynamicContext();
console.log(walletConnectorOptions.map((wallet) => wallet.key));

Wallet list tabs

To configure multiple wallet filters, you can use the wallet list tabs feature to define different tabs for users to select.