I am making a decentralized exchange in which I am trying to implement a search functionality where users put either token address, name, or symbol. But the challenge I am facing is that when users search for tokens like BUSD the token present in the user wallet will come on top.
for example:-
suppose I have these tokens in my wallet and I am getting this response from web3
[
{
"token_address":"0x0e262..........",
"name":"Busy DAO",
"symbol":"BUSY",
"logo":null,
"thumbnail":null,
"decimals":"18",
"balance":"685485000000000000000000"
},{
"token_address":"0x1f762..........",
"name":"BUSD Token",
"symbol":"BUSD",
"logo":null,
"thumbnail":null,
"decimals":"18",
"balance":"32491651588824863"
}
]
Now if users searched BUS in their search box and they get a list of more than 20 or 30 tokens so I want to filter that array and want to match the symbol of searched token response and token present in my wallet and then shows the token present in a wallet on the top and show rest of the tokens according to their name or symbol (Alphabetic order) in the search list.
I tried to search this on the web but I didn't get anything regarding this.
Here is my code:
// wallet assets
const getWalletAssets = useMoralisWeb3ApiCall(moralisWeb3Api.account.getTokenBalances, {
chain: 'bsc',
address: connectedWallet
})
// Token Search filter (getting tokens)
const searchTokenName = coins.filter((c) => c.name.toLowerCase().includes(search.toLowerCase()))
// Sorting them according to their symbols (alphabetic order)
const searchToken = tokenData.sort((a, b) => a.symbol.localeCompare(b.symbol))
Perhaps this approach would be helpful. First filter the results that are in and out of the wallet, and then combine them into one array.
const searchResults = ['BNB','BNT','BORA','BSV','BTC','BTCB','BTCST','BTG','BTT','BUSD','DASH','DCR','DENT','DGB','DOGE','ELON','ENJ','EOS','ETC','ETH','EWT','FEI','FET','FIL'];
const walletCoins = ['BTC','DOGE','ETH', '1INCH'];
const resultInWallet = searchResults.filter((coin) => walletCoins.includes(coin));
const resultNotInWallet = searchResults.filter((coin) => !walletCoins.includes(coin));
const result = [...resultInWallet, ...resultNotInWallet];
console.log(result).as-console-wrapper{min-height: 100%!important; top: 0}--- updated ---
const searchResults = [{symbol:'BNB'},{symbol:'BNT'},{symbol:'BTC'},{symbol:'BTCB'},{symbol:'BTCST'},{symbol:'BTG'},{symbol:'BTT'},{symbol:'BUSD'},{symbol:'DOGE'},{symbol:'ELON'},{symbol:'ETC'},{symbol:'ETH'},{symbol:'EWT'},{symbol:'FEI'}];
const walletCoins = [{symbol:'BTC'},{symbol:'DOGE'},{symbol:'ETH'},{symbol:'1INCH'}];
const resultObj = searchResults.reduce((acc, targetCoin) => {
if (walletCoins.some((walletCoin) => walletCoin.symbol === targetCoin.symbol)) {
acc.inWallet = [...acc.inWallet, targetCoin];
} else {
acc.notInWallet = [...acc.notInWallet, targetCoin];
}
return acc;
}, { inWallet: [], notInWallet:[] });
const result = [...resultObj.inWallet, ...resultObj.notInWallet];
console.log(result);.as-console-wrapper{min-height: 100%!important; top: 0}