Draft: Network filter asset list integration

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

@@ -1,6 +1,10 @@
-import React, { useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { getCurrentNetwork, getPreferences } from '../../../../../selectors';
+import React, { useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  getCurrentNetwork,
+  getNetworkConfigurationsByChainId,
+  getPreferences,
+} from '../../../../../selectors';
 import {
   Box,
   ButtonBase,
@@ -12,11 +16,10 @@ import {
 import SortControl from '../sort-control';
 import {
   BackgroundColor,
-  BorderColor,
-  BorderStyle,
   Display,
   JustifyContent,
   TextColor,
+  TextVariant,
 } from '../../../../../helpers/constants/design-system';
 import ImportControl from '../import-control';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
@@ -28,21 +31,40 @@ import {
   ENVIRONMENT_TYPE_POPUP,
 } from '../../../../../../shared/constants/app';
 import NetworkFilter from '../network-filter';
+import { setTokenNetworkFilter } from '../../../../../store/actions';
+import Tooltip from '../../../../ui/tooltip';
 
 type AssetListControlBarProps = {
   showTokensLinks?: boolean;
 };
 
 const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
   const t = useI18nContext();
+  const dispatch = useDispatch();
   const popoverRef = useRef<HTMLDivElement>(null);
   const currentNetwork = useSelector(getCurrentNetwork);
+  const allNetworks = useSelector(getNetworkConfigurationsByChainId);
   const { tokenNetworkFilter } = useSelector(getPreferences);
   const [isTokenSortPopoverOpen, setIsTokenSortPopoverOpen] = useState(false);
   const [isNetworkFilterPopoverOpen, setIsNetworkFilterPopoverOpen] =
     useState(false);
 
-  const allNetworksFilterShown = Object.keys(tokenNetworkFilter ?? {}).length;
+  const allOpts: Record<string, boolean> = {};
+  Object.keys(allNetworks).forEach((chainId) => {
+    allOpts[chainId] = true;
+  });
+
+  const allNetworksFilterShown =
+    Object.keys(tokenNetworkFilter).length !== Object.keys(allOpts).length;
+
+  // TODO: This useEffect should be a migration
+  // We need to set the default filter for all users to be all included networks, rather than defaulting to empty object
+  // This effect is to unblock and derisk in the short-term
+  useEffect(() => {
+    if (Object.keys(tokenNetworkFilter).length === 0) {
+      dispatch(setTokenNetworkFilter(allOpts));
+    }
+  }, []);
 
   const windowType = getEnvironmentType();
   const isFullScreen =
@@ -67,21 +89,16 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
   return (
     <Box
       className="asset-list-control-bar"
-      marginLeft={4}
-      marginRight={4}
-      paddingTop={4}
+      marginLeft={2}
+      marginRight={2}
       ref={popoverRef}
     >
-      <Box
-        display={Display.Flex}
-        justifyContent={
-          isFullScreen ? JustifyContent.flexStart : JustifyContent.spaceBetween
-        }
-      >
+      <Box display={Display.Flex} justifyContent={JustifyContent.spaceBetween}>
         {process.env.FILTER_TOKENS_TOGGLE && (
           <ButtonBase
             data-testid="sort-by-popover-toggle"
-            className="asset-list-control-bar__button"
+            variant={TextVariant.bodyMdMedium}
+            className="asset-list-control-bar__button asset-list-control-bar__network_control"
             onClick={toggleNetworkFilterPopover}
             size={ButtonBaseSize.Sm}
             endIconName={IconName.ArrowDown}
@@ -90,8 +107,6 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
                 ? BackgroundColor.backgroundPressed
                 : BackgroundColor.backgroundDefault
             }
-            borderColor={BorderColor.borderMuted}
-            borderStyle={BorderStyle.solid}
             color={TextColor.textDefault}
             marginRight={isFullScreen ? 2 : null}
             ellipsis
@@ -102,26 +117,32 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
           </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}
+        <Box
+          className="asset-list-control-bar__buttons"
+          display={Display.Flex}
+          justifyContent={JustifyContent.flexEnd}
         >
-          {t('sortBy')}
-        </ButtonBase>
+          <Tooltip title={t('sortBy')} position="bottom" distance={20}>
+            <ButtonBase
+              data-testid="sort-by-popover-toggle"
+              className="asset-list-control-bar__button"
+              onClick={toggleTokenSortPopover}
+              size={ButtonBaseSize.Sm}
+              endIconName={IconName.SwapVertical}
+              backgroundColor={
+                isTokenSortPopoverOpen
+                  ? BackgroundColor.backgroundPressed
+                  : BackgroundColor.backgroundDefault
+              }
+              color={TextColor.textDefault}
+              marginRight={isFullScreen ? 2 : null}
+            />
+          </Tooltip>
 
-        <ImportControl showTokensLinks={showTokensLinks} />
+          <Tooltip title={t('importTokens')} position="bottom" distance={20}>
+            <ImportControl showTokensLinks={showTokensLinks} />
+          </Tooltip>
+        </Box>
       </Box>
 
       <Popover
@@ -143,7 +164,7 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
       <Popover
         onClickOutside={closePopover}
         isOpen={isTokenSortPopoverOpen}
-        position={PopoverPosition.BottomStart}
+        position={PopoverPosition.BottomEnd}
         referenceElement={popoverRef.current}
         matchWidth={!isFullScreen}
         style={{

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

@@ -1,12 +1,37 @@
 .asset-list-control-bar {
-  padding-top: 8px;
-  padding-bottom: 8px;
+  padding-top: 4px;
+  padding-bottom: 4px;
 
   &__button {
-    // using percentage here to allow for full network name to show when full screen, but ellipsize on extension view
     max-width: 35%;
   }
 
+  &__network_control {
+    justify-content: space-between;
+    min-width: 185px;
+    border-radius: 8px;
+    padding: 0px 8px !important;
+    gap: 5px;
+    text-transform: lowercase;
+
+    span::first-letter {
+      text-transform: uppercase;
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    justify-content: flex-end;
+
+    & .asset-list-control-bar__button {
+      width: 32px;
+      min-width: 32px;
+      margin: 0;
+      border-radius: 8px;
+      padding: 0;
+    }
+  }
+
   &__button:hover {
     background-color: var(--color-background-hover);
   }

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

@@ -38,7 +38,6 @@ import {
 import { getIsNativeTokenBuyable } from '../../../../ducks/ramps';
 ///: END:ONLY_INCLUDE_IF
 import AssetListControlBar from './asset-list-control-bar';
-import NativeToken from './native-token';
 
 export type TokenWithBalance = {
   address: string;
@@ -51,7 +50,7 @@ export type TokenWithBalance = {
 };
 
 export type AssetListProps = {
-  onClickAsset: (arg: string) => void;
+  onClickAsset: (chainId: string, address: string) => void;
   showTokensLinks?: boolean;
 };
 
@@ -115,9 +114,8 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
         )}
       <AssetListControlBar showTokensLinks={showTokensLinks} />
       <TokenList
-        nativeToken={<NativeToken onClickAsset={onClickAsset} />}
-        onTokenClick={(tokenAddress: string) => {
-          onClickAsset(tokenAddress);
+        onTokenClick={(chainId: string, tokenAddress: string) => {
+          onClickAsset(chainId, tokenAddress);
           trackEvent({
             event: MetaMetricsEventName.TokenScreenOpened,
             category: MetaMetricsEventCategory.Navigation,

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

@@ -7,8 +7,6 @@ import {
 } from '../../../../component-library';
 import {
   BackgroundColor,
-  BorderColor,
-  BorderStyle,
   TextColor,
 } from '../../../../../helpers/constants/design-system';
 import { showImportTokensModal } from '../../../../../store/actions';
@@ -18,7 +16,6 @@ import {
   MetaMetricsEventName,
 } from '../../../../../../shared/constants/metametrics';
 import { getMultichainIsEvm } from '../../../../../selectors/multichain';
-import { useI18nContext } from '../../../../../hooks/useI18nContext';
 
 type AssetListControlBarProps = {
   showTokensLinks?: boolean;
@@ -27,7 +24,6 @@ type AssetListControlBarProps = {
 const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
   const dispatch = useDispatch();
   const trackEvent = useContext(MetaMetricsContext);
-  const t = useI18nContext();
   const isEvm = useSelector(getMultichainIsEvm);
   // NOTE: Since we can parametrize it now, we keep the original behavior
   // for EVM assets
@@ -41,8 +37,6 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
       size={ButtonBaseSize.Sm}
       startIconName={IconName.Add}
       backgroundColor={BackgroundColor.backgroundDefault}
-      borderColor={BorderColor.borderMuted}
-      borderStyle={BorderStyle.solid}
       color={TextColor.textDefault}
       onClick={() => {
         dispatch(showImportTokensModal());
@@ -54,9 +48,7 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
           },
         });
       }}
-    >
-      {t('import')}
-    </ButtonBase>
+    />
   );
 };