feat: Token Network Filter UI [Extension]

app/scripts/controllers/preferences-controller.test.ts

@@ -750,6 +750,7 @@ describe('preferences controller', () => {
           order: 'dsc',
           sortCallback: 'stringNumeric',
         },
+        tokenNetworkFilter: {},
       });
     });
 
@@ -779,6 +780,7 @@ describe('preferences controller', () => {
           order: 'dsc',
           sortCallback: 'stringNumeric',
         },
+        tokenNetworkFilter: {},
       });
     });
   });

app/scripts/controllers/preferences-controller.ts

@@ -120,6 +120,7 @@ export type Preferences = {
     order: string;
     sortCallback: string;
   };
+  tokenNetworkFilter: Record<string, boolean>;
   shouldShowAggregatedBalancePopover: boolean;
 };
 
@@ -222,6 +223,7 @@ export const getDefaultPreferencesControllerState =
         order: 'dsc',
         sortCallback: 'stringNumeric',
       },
+      tokenNetworkFilter: {},
     },
     // ENS decentralized website resolution
     ipfsGateway: IPFS_DEFAULT_GATEWAY_URL,

builds.yml

@@ -273,6 +273,8 @@ env:
   - BARAD_DUR: ''
   # Determines if feature flagged Chain permissions
   - CHAIN_PERMISSIONS: ''
+  # Determines if feature flagged Filter toggle
+  - FILTER_TOKENS_TOGGLE: ''
   # Enables use of test gas fee flow to debug gas fee estimation
   - TEST_GAS_FEE_FLOWS: false
   # Temporary mechanism to enable security alerts API prior to release

ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx

@@ -1,4 +1,6 @@
 import React, { useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { getCurrentNetwork, getPreferences } from '../../../../../selectors';
 import {
   Box,
   ButtonBase,
@@ -25,62 +27,124 @@ import {
   ENVIRONMENT_TYPE_NOTIFICATION,
   ENVIRONMENT_TYPE_POPUP,
 } from '../../../../../../shared/constants/app';
+import NetworkFilter from '../network-filter';
 
 type AssetListControlBarProps = {
   showTokensLinks?: boolean;
 };
 
 const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
   const t = useI18nContext();
-  const controlBarRef = useRef<HTMLDivElement>(null); // Create a ref
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const currentNetwork = useSelector(getCurrentNetwork);
+  const { tokenNetworkFilter } = useSelector(getPreferences);
+  const [isTokenSortPopoverOpen, setIsTokenSortPopoverOpen] = useState(false);
+  const [isNetworkFilterPopoverOpen, setIsNetworkFilterPopoverOpen] =
+    useState(false);
+
+  const allNetworksFilterShown = Object.keys(tokenNetworkFilter ?? {}).length;
 
   const windowType = getEnvironmentType();
   const isFullScreen =
     windowType !== ENVIRONMENT_TYPE_NOTIFICATION &&
     windowType !== ENVIRONMENT_TYPE_POPUP;
 
-  const handleOpenPopover = () => {
-    setIsPopoverOpen(!isPopoverOpen);
+  const toggleTokenSortPopover = () => {
+    setIsNetworkFilterPopoverOpen(false);
+    setIsTokenSortPopoverOpen(!isTokenSortPopoverOpen);
+  };
+
+  const toggleNetworkFilterPopover = () => {
+    setIsTokenSortPopoverOpen(false);
+    setIsNetworkFilterPopoverOpen(!isNetworkFilterPopoverOpen);
   };
 
   const closePopover = () => {
-    setIsPopoverOpen(false);
+    setIsTokenSortPopoverOpen(false);
+    setIsNetworkFilterPopoverOpen(false);
   };
 
   return (
     <Box
       className="asset-list-control-bar"
-      ref={controlBarRef}
-      display={Display.Flex}
-      justifyContent={JustifyContent.spaceBetween}
       marginLeft={4}
       marginRight={4}
       paddingTop={4}
+      ref={popoverRef}
     >
-      <ButtonBase
-        data-testid="sort-by-popover-toggle"
-        className="asset-list-control-bar__button"
-        onClick={handleOpenPopover}
-        size={ButtonBaseSize.Sm}
-        endIconName={IconName.ArrowDown}
-        backgroundColor={
-          isPopoverOpen
-            ? BackgroundColor.backgroundPressed
-            : BackgroundColor.backgroundDefault
+      <Box
+        display={Display.Flex}
+        justifyContent={
+          isFullScreen ? JustifyContent.flexStart : JustifyContent.spaceBetween
         }
-        borderColor={BorderColor.borderMuted}
-        borderStyle={BorderStyle.solid}
-        color={TextColor.textDefault}
       >
-        {t('sortBy')}
-      </ButtonBase>
-      <ImportControl showTokensLinks={showTokensLinks} />
+        {process.env.FILTER_TOKENS_TOGGLE && (
+          <ButtonBase
+            data-testid="sort-by-popover-toggle"
+            className="asset-list-control-bar__button"
+            onClick={toggleNetworkFilterPopover}
+            size={ButtonBaseSize.Sm}
+            endIconName={IconName.ArrowDown}
+            backgroundColor={
+              isNetworkFilterPopoverOpen
+                ? BackgroundColor.backgroundPressed
+                : BackgroundColor.backgroundDefault
+            }
+            borderColor={BorderColor.borderMuted}
+            borderStyle={BorderStyle.solid}
+            color={TextColor.textDefault}
+            marginRight={isFullScreen ? 2 : null}
+            ellipsis
+          >
+            {allNetworksFilterShown
+              ? currentNetwork?.nickname ?? t('currentNetwork')
+              : t('allNetworks')}
+          </ButtonBase>
+        )}
+
+        <ButtonBase
+          data-testid="sort-by-popover-toggle"
+          className="asset-list-control-bar__button"
+          onClick={toggleTokenSortPopover}
+          size={ButtonBaseSize.Sm}
+          endIconName={IconName.ArrowDown}
+          backgroundColor={
+            isTokenSortPopoverOpen
+              ? BackgroundColor.backgroundPressed
+              : BackgroundColor.backgroundDefault
+          }
+          borderColor={BorderColor.borderMuted}
+          borderStyle={BorderStyle.solid}
+          color={TextColor.textDefault}
+          marginRight={isFullScreen ? 2 : null}
+        >
+          {t('sortBy')}
+        </ButtonBase>
+
+        <ImportControl showTokensLinks={showTokensLinks} />
+      </Box>
+
+      <Popover
+        onClickOutside={closePopover}
+        isOpen={isNetworkFilterPopoverOpen}
+        position={PopoverPosition.BottomStart}
+        referenceElement={popoverRef.current}
+        matchWidth={!isFullScreen}
+        style={{
+          zIndex: 10,
+          display: 'flex',
+          flexDirection: 'column',
+          padding: 0,
+          minWidth: isFullScreen ? '325px' : '',
+        }}
+      >
+        <NetworkFilter handleClose={closePopover} />
+      </Popover>
       <Popover
         onClickOutside={closePopover}
-        isOpen={isPopoverOpen}
+        isOpen={isTokenSortPopoverOpen}
         position={PopoverPosition.BottomStart}
-        referenceElement={controlBarRef.current}
+        referenceElement={popoverRef.current}
         matchWidth={!isFullScreen}
         style={{
           zIndex: 10,

ui/components/app/assets/asset-list/asset-list-control-bar/index.scss

@@ -2,6 +2,11 @@
   padding-top: 8px;
   padding-bottom: 8px;
 
+  &__button {
+    // using percentage here to allow for full network name to show when full screen, but ellipsize on extension view
+    max-width: 35%;
+  }
+
   &__button:hover {
     background-color: var(--color-background-hover);
   }

ui/components/app/assets/asset-list/network-filter/index.scss

@@ -0,0 +1,27 @@
+.selectable-list-item-wrapper {
+  position: relative;
+}
+
+.selectable-list-item {
+  cursor: pointer;
+  padding: 16px;
+
+  &--selected {
+    background: var(--color-primary-muted);
+  }
+
+  &:not(.selectable-list-item--selected) {
+    &:hover,
+    &:focus-within {
+      background: var(--color-background-default-hover);
+    }
+  }
+
+  &__selected-indicator {
+    width: 4px;
+    height: calc(100% - 8px);
+    position: absolute;
+    top: 4px;
+    left: 4px;
+  }
+}

ui/components/app/assets/asset-list/network-filter/index.ts

@@ -0,0 +1 @@
+export { default } from './network-filter';