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:
- FilterWallets
- RemoveWallets
- SortWallets
- FilterAndSortWallets
- 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 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.
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 { 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 to define different tabs for users to select.
Was this page helpful?