chore: Integrate filtering logic, to be improved

MetaMask · Oct 25, 2024 · 6a394a2 · 6a394a2
1 parent c923dfe
commit 6a394a2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/ui/components/app/assets/asset-list/network-filter/network-filter.tsx b/ui/components/app/assets/asset-list/network-filter/network-filter.tsx
@@ -56,11 +56,19 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => {
     handleClose();
   };
 
+  const allOpts: Record<string, boolean> = {};
+  Object.keys(allNetworks).forEach((chainId) => {
+    allOpts[chainId] = true;
+  });
+
   return (
     <>
       <SelectableListItem
-        isSelected={!Object.keys(tokenNetworkFilter).length}
-        onClick={() => handleFilter({})}
+        isSelected={
+          Object.keys(tokenNetworkFilter).length ===
+          Object.keys(allNetworks).length
+        }
+        onClick={() => handleFilter(allOpts)}
       >
         <Box
           display={Display.Flex}
@@ -106,7 +114,10 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => {
         </Box>
       </SelectableListItem>
       <SelectableListItem
-        isSelected={tokenNetworkFilter[chainId]}
+        isSelected={
+          tokenNetworkFilter[chainId] &&
+          Object.keys(tokenNetworkFilter).length === 1
+        }
         onClick={() => handleFilter({ [chainId]: true })}
       >
         <Box

diff --git a/ui/components/app/assets/token-list/token-list.tsx b/ui/components/app/assets/token-list/token-list.tsx
@@ -21,6 +21,7 @@ import {
 } from '../../../../selectors';
 import { getConversionRate } from '../../../../ducks/metamask/metamask';
 import { useNativeTokenBalance } from '../asset-list/native-token/use-native-token-balance';
+import { filterAssets } from '../util/filter';
 
 type TokenListProps = {
   onTokenClick: (arg: string) => void;
@@ -92,9 +93,16 @@ export default function TokenList({
   };
 
   const sortedTokens = useMemo(() => {
-    const consolidatedTokensWithBalances = consolidatedBalances(); // TODO include nativeTokens in this list
-    // .filter() // TODO filter assets by networkTokenFilter before sorting
-    return sortAssets(consolidatedTokensWithBalances, tokenSortConfig);
+    const consolidatedTokensWithBalances = consolidatedBalances();
+    const filteredAssets = filterAssets(consolidatedTokensWithBalances, [
+      {
+        key: 'chainId',
+        opts: tokenNetworkFilter,
+        filterCallback: 'inclusive',
+      },
+    ]);
+    const filteredSortedAssets = sortAssets(filteredAssets, tokenSortConfig);
+    return filteredSortedAssets;
   }, [
     tokenSortConfig,
     tokenNetworkFilter,