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)
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']);
}}
>
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)
});
},
}}
>
Fetch standardized wallet keys
To find the key of all the wallets you can output all the keys using the following syntax:
import { useDynamicContext } from β@dynamic-labs/sdk-react-coreβ;
const { wallets } = useDynamicContext();
console.log(wallets.map((wallet) => wallet.key));
Was this page helpful?