From 6a394a24db1811e0e184af99daf7118ddc56f48a Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 25 Oct 2024 14:06:06 -0700
Subject: [PATCH] chore: Integrate filtering logic, to be improved

---
 .../network-filter/network-filter.tsx           | 17 ++++++++++++++---
 .../app/assets/token-list/token-list.tsx        | 14 +++++++++++---
 2 files changed, 25 insertions(+), 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
index cc2d0f38210e..faa289d4c11f 100644
--- 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
index eed6be982545..1b7247db88b1 100644
--- 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,