feat: bump assets-controllers to v54 and add PV to NFT tab (#30903)

## **Description**

PR to add network filter to NFT tab.
This core PR MetaMask/core#5448 should be
released before updating this one.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/30903?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Choose Ethereum mainnet
2. Click on NFTs tab
3. You should see network filter + your detected NFTs on Ethereum
mainnet and linea (if you have any)
4. Switch between networks and try importing manually your NFTs on
networks that are not (Ethereum/linea)
5. Make sure you see your NFTs correctly

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->


https://github.com/user-attachments/assets/81b99e68-3d25-40ca-9c0f-f103b5904fa6



## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: MetaMask Bot <[email protected]>

Author: sahar-fehri

.yarn/patches/@metamask-assets-controllers-npm-53.1.1-644979f986.patch renamed to .yarn/patches/@metamask-assets-controllers-npm-54.0.0-1b1fcfcc45.patch

@@ -1,5 +1,5 @@
 diff --git a/dist/assetsUtil.cjs b/dist/assetsUtil.cjs
-index 017fb94055b64f99c75f8d54b763a501bdd03e97..34396ba143e3ebcb04fa2c80f7a35d1abd06710e 100644
+index 0eb212b5eb9a9ef2f61c44b9e5f04b14d5571865..f4f097a86a0feba2d20f84199536fdd097360777 100644
 --- a/dist/assetsUtil.cjs
 +++ b/dist/assetsUtil.cjs
 @@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -10,7 +10,7 @@ index 017fb94055b64f99c75f8d54b763a501bdd03e97..34396ba143e3ebcb04fa2c80f7a35d1a
  exports.getKeyByValue = exports.fetchTokenContractExchangeRates = exports.reduceInBatchesSerially = exports.divideIntoBatches = exports.ethersBigNumberToBN = exports.addUrlProtocolPrefix = exports.getFormattedIpfsUrl = exports.getIpfsCIDv1AndPath = exports.removeIpfsProtocolPrefix = exports.isTokenListSupportedForNetwork = exports.isTokenDetectionSupportedForNetwork = exports.SupportedStakedBalanceNetworks = exports.SupportedTokenDetectionNetworks = exports.formatIconUrlWithProxy = exports.formatAggregatorNames = exports.hasNewCollectionFields = exports.compareNftMetadata = exports.TOKEN_PRICES_BATCH_SIZE = void 0;
  const controller_utils_1 = require("@metamask/controller-utils");
  const utils_1 = require("@metamask/utils");
-@@ -233,7 +234,7 @@ async function getIpfsCIDv1AndPath(ipfsUrl) {
+@@ -234,7 +235,7 @@ async function getIpfsCIDv1AndPath(ipfsUrl) {
      const index = url.indexOf('/');
      const cid = index !== -1 ? url.substring(0, index) : url;
      const path = index !== -1 ? url.substring(index) : undefined;

.yarn/patches/@metamask-assets-controllers-patch-3424767802.patch

@@ -263,7 +263,7 @@
     "@metamask/address-book-controller": "^6.0.3",
     "@metamask/announcement-controller": "^7.0.3",
     "@metamask/approval-controller": "^7.0.0",
-    "@metamask/assets-controllers": "patch:@metamask/assets-controllers@npm%3A53.1.1#~/.yarn/patches/@metamask-assets-controllers-npm-53.1.1-644979f986.patch",
+    "@metamask/assets-controllers": "patch:@metamask/assets-controllers@npm%3A54.0.0#~/.yarn/patches/@metamask-assets-controllers-npm-54.0.0-1b1fcfcc45.patch",
     "@metamask/base-controller": "^8.0.0",
     "@metamask/bitcoin-wallet-snap": "^0.9.0",
     "@metamask/browser-passworder": "^4.3.0",

package.json

@@ -394,6 +394,7 @@ class FixtureBuilder {
               image:
                 'ipfs://bafkreifvhjdf6ve4jfv6qytqtux5nd4nwnelioeiqx5x2ez5yrgrzk7ypi',
               standard: 'ERC1155',
+              chainId: 1337,
             },
           ],
         },
@@ -428,6 +429,7 @@ class FixtureBuilder {
               name: 'Test Dapp NFTs #1',
               standard: 'ERC721',
               tokenId: '1',
+              chainId: 1337,
             },
           ],
         },

test/e2e/fixture-builder.js

@@ -370,7 +370,7 @@ function setupAutoDetectMocking(
     .withQuery({
       limit: 50,
       includeTopBid: true,
-      chainIds: '1',
+      chainIds: ['1', '59144'],
       continuation: '',
     })
     .thenCallback(() => {

test/e2e/tests/tokens/nft/mocks.js

@@ -55,9 +55,13 @@ import { getMultichainNetwork } from '../../../../../selectors/multichain';
 
 type AssetListControlBarProps = {
   showTokensLinks?: boolean;
+  showTokenFiatBalance?: boolean;
 };
 
-const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
+const AssetListControlBar = ({
+  showTokensLinks,
+  showTokenFiatBalance,
+}: AssetListControlBarProps) => {
   const t = useI18nContext();
   const dispatch = useDispatch();
   const trackEvent = useContext(MetaMetricsContext);
@@ -113,6 +117,8 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
   useEffect(() => {
     if (Object.keys(tokenNetworkFilter).length === 1) {
       dispatch(setTokenNetworkFilter({ [currentNetwork.chainId]: true }));
+    } else {
+      dispatch(setTokenNetworkFilter(allOpts));
     }
   }, [Object.keys(allNetworks).length]);
 
@@ -253,7 +259,10 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
           minWidth: isFullScreen ? '250px' : '',
         }}
       >
-        <NetworkFilter handleClose={closePopover} />
+        <NetworkFilter
+          handleClose={closePopover}
+          showTokenFiatBalance={showTokenFiatBalance}
+        />
       </Popover>
       <Popover
         onClickOutside={closePopover}

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

@@ -40,9 +40,13 @@ import InfoTooltip from '../../../../ui/info-tooltip';
 
 type SortControlProps = {
   handleClose: () => void;
+  showTokenFiatBalance?: boolean;
 };
 
-const NetworkFilter = ({ handleClose }: SortControlProps) => {
+const NetworkFilter = ({
+  handleClose,
+  showTokenFiatBalance = true,
+}: SortControlProps) => {
   const t = useI18nContext();
   const dispatch = useDispatch();
   const chainId = useSelector(getCurrentChainId);
@@ -121,20 +125,22 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => {
             >
               {t('popularNetworks')}
             </Text>
-            <Text
-              variant={TextVariant.bodySmMedium}
-              color={TextColor.textAlternative}
-              data-testid="network-filter-all__total"
-            >
-              <UserPreferencedCurrencyDisplay
-                value={selectedAccountBalanceForAllNetworks}
-                type="PRIMARY"
-                ethNumberOfDecimals={4}
-                hideTitle
-                showFiat
-                isAggregatedFiatOverviewBalance
-              />
-            </Text>
+            {showTokenFiatBalance && (
+              <Text
+                variant={TextVariant.bodySmMedium}
+                color={TextColor.textAlternative}
+                data-testid="network-filter-all__total"
+              >
+                <UserPreferencedCurrencyDisplay
+                  value={selectedAccountBalanceForAllNetworks}
+                  type="PRIMARY"
+                  ethNumberOfDecimals={4}
+                  hideTitle
+                  showFiat
+                  isAggregatedFiatOverviewBalance
+                />
+              </Text>
+            )}
           </Box>
           <Box display={Display.Flex} alignItems={AlignItems.center}>
             <InfoTooltip
@@ -191,14 +197,16 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => {
               variant={TextVariant.bodySmMedium}
               color={TextColor.textAlternative}
             >
-              <UserPreferencedCurrencyDisplay
-                value={selectedAccountBalance}
-                type="PRIMARY"
-                ethNumberOfDecimals={4}
-                hideTitle
-                showFiat
-                isAggregatedFiatOverviewBalance
-              />
+              {showTokenFiatBalance && (
+                <UserPreferencedCurrencyDisplay
+                  value={selectedAccountBalance}
+                  type="PRIMARY"
+                  ethNumberOfDecimals={4}
+                  hideTitle
+                  showFiat
+                  isAggregatedFiatOverviewBalance
+                />
+              )}
             </Text>
           </Box>
           <AvatarNetwork

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { Hex } from '@metamask/utils';
+import { toHex } from '@metamask/controller-utils';
 import {
   AlignItems,
   Display,
@@ -12,26 +12,20 @@ import { getNftImageAlt } from '../../../../../helpers/utils/nfts';
 import { NftItem } from '../../../../multichain/nft-item';
 import { NFT } from '../../../../multichain/asset-picker-amount/asset-picker-modal/types';
 import {
-  getCurrentNetwork,
   getIpfsGateway,
   getNftIsStillFetchingIndication,
 } from '../../../../../selectors';
 import useGetAssetImageUrl from '../../../../../hooks/useGetAssetImageUrl';
+import { getImageForChainId } from '../../../../../selectors/multichain';
+import { getNetworkConfigurationsByChainId } from '../../../../../../shared/modules/selectors/networks';
 import NFTGridItemErrorBoundary from './nft-grid-item-error-boundary';
 
 const NFTGridItem = (props: {
   nft: NFT;
   onClick: () => void;
   privacyMode?: boolean;
-  currentChain: {
-    chainId: Hex;
-    nickname: string;
-    rpcPrefs?: {
-      imageUrl: string;
-    };
-  };
 }) => {
-  const { nft, onClick, privacyMode, currentChain } = props;
+  const { nft, onClick, privacyMode } = props;
 
   const { image, imageOriginal } = nft;
 
@@ -40,6 +34,7 @@ const NFTGridItem = (props: {
     imageOriginal ?? image ?? undefined,
     ipfsGateway,
   );
+  const allNetworks = useSelector(getNetworkConfigurationsByChainId);
 
   const isImageHosted =
     image?.startsWith('https:') || image?.startsWith('http:');
@@ -55,8 +50,8 @@ const NFTGridItem = (props: {
       nft={nft}
       alt={nftImageAlt}
       src={nftItemSrc}
-      networkName={currentChain.nickname}
-      networkSrc={currentChain.rpcPrefs?.imageUrl}
+      networkName={allNetworks?.[toHex(nft.chainId)]?.name}
+      networkSrc={getImageForChainId(toHex(nft.chainId)) || undefined}
       onClick={onClick}
       isIpfsURL={isIpfsURL}
       privacyMode={privacyMode}
@@ -74,11 +69,6 @@ export default function NftGrid({
   handleNftClick: (nft: NFT) => void;
   privacyMode?: boolean;
 }) {
-  const currentChain = useSelector(getCurrentNetwork) as {
-    chainId: Hex;
-    nickname: string;
-    rpcPrefs?: { imageUrl: string };
-  };
   const nftsStillFetchingIndication = useSelector(
     getNftIsStillFetchingIndication,
   );
@@ -96,7 +86,6 @@ export default function NftGrid({
                 className="nft-items__image-wrapper"
               >
                 <NFTGridItem
-                  currentChain={currentChain}
                   nft={nft}
                   onClick={() => handleNftClick(nft)}
                   privacyMode={privacyMode}

ui/components/app/assets/nfts/nft-grid/nft-grid.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
-import { getOpenSeaEnabled } from '../../../../../selectors';
+import {
+  getAllChainsToPoll,
+  getOpenSeaEnabled,
+} from '../../../../../selectors';
 import {
   detectNfts,
   setOpenSeaEnabled,
@@ -14,6 +17,7 @@ export default function NFTsDetectionNoticeNFTsTab() {
   const t = useI18nContext();
   const dispatch = useDispatch();
   const isDisplayNFTMediaToggleEnabled = useSelector(getOpenSeaEnabled);
+  const allChainIds = useSelector(getAllChainsToPoll);
 
   return (
     <BannerAlert
@@ -28,7 +32,7 @@ export default function NFTsDetectionNoticeNFTsTab() {
         // Show toast
         dispatch(setShowNftDetectionEnablementToast(true));
         // dispatch action to detect nfts
-        dispatch(detectNfts());
+        dispatch(detectNfts(allChainIds));
       }}
     >
       {

ui/components/app/assets/nfts/nfts-detection-notice-nfts-tab/nfts-detection-notice-nfts-tab.tsx

@@ -36,6 +36,7 @@ const NFTS = [
     image:
       'https://lh3.googleusercontent.com/BdxvLseXcfl57BiuQcQYdJ64v-aI8din7WPk0Pgo3qQFhAUH-B6i-dCqqc_mCkRIzULmwzwecnohLhrcH8A9mpWIZqA7ygc52Sr81hE',
     standard: 'ERC1155',
+    chainId: '1',
   },
   {
     address: '0x495f947276749Ce646f68AC8c248420045cb7b5e',
@@ -54,6 +55,7 @@ const NFTS = [
     image:
       'https://lh3.googleusercontent.com/H7VrxaalZv4PF1B8U7ADuc8AfuqTVyzmMEDQ5OXKlx0Tqu5XiwsKYj4j_pAF6wUJjLMQbSN_0n3fuj84lNyRhFW9hyrxqDfY1IiQEQ',
     standard: 'ERC1155',
+    chainId: '1',
   },
   {
     address: '0x495f947276749Ce646f68AC8c248420045cb7b5e',
@@ -72,6 +74,7 @@ const NFTS = [
     image:
       'https://lh3.googleusercontent.com/CHNTSlKB_Gob-iwTq8jcag6XwBkTqBMLt_vEKeBv18Q4AoPFAEPceqK6mRzkad2s5djx6CT5zbGQwDy81WwtNzViK5dQbG60uAWv',
     standard: 'ERC1155',
+    chainId: '1',
   },
   {
     address: '0x495f947276749Ce646f68AC8c248420045cb7b5e',
@@ -89,6 +92,7 @@ const NFTS = [
     image:
       'https://lh3.googleusercontent.com/4jfPi-nQNWCUXD5qVNVWX7LX2UufU_elEJcvICFlsTdcBXv70asnDEOlI8oKECZxlXq1wseeIXMwmP5tLyOUxMKk',
     standard: 'ERC1155',
+    chainId: '1',
   },
   {
     address: '0x495f947276749Ce646f68AC8c248420045cb7b5e',
@@ -106,6 +110,7 @@ const NFTS = [
     image:
       'https://lh3.googleusercontent.com/BdxvLseXcfl57BiuQcQYdJ64v-aI8din7WPk0Pgo3qQFhAUH-B6i-dCqqc_mCkRIzULmwzwecnohLhrcH8A9mpWIZqA7ygc52Sr81hE',
     standard: 'ERC1155',
+    chainId: '1',
   },
   {
     address: '0xDc7382Eb0Bc9C352A4CbA23c909bDA01e0206414',
@@ -114,6 +119,7 @@ const NFTS = [
     description: null,
     image: 'ipfs://QmTSZUNt8AKyDabkyXXXP4oHWDnaVXgNdXoJGEyaYzLbeL',
     standard: 'ERC721',
+    chainId: '1',
   },
   {
     address: '0xDc7382Eb0Bc9C352A4CbA23c909bDA01e0206414',
@@ -122,6 +128,7 @@ const NFTS = [
     description: null,
     image: 'ipfs://QmTSZUNt8AKyDabkyXXXP4oHWDnaVXgNdXoJGEyaYzLbeL',
     standard: 'ERC721',
+    chainId: '1',
   },
   {
     address: '0xDc7382Eb0Bc9C352A4CbA23c909bDA01e0206414',
@@ -130,6 +137,7 @@ const NFTS = [
     description: null,
     image: 'ipfs://QmTSZUNt8AKyDabkyXXXP4oHWDnaVXgNdXoJGEyaYzLbeL',
     standard: 'ERC721',
+    chainId: '1',
   },
 ];
 
@@ -142,7 +150,7 @@ const ACCOUNT_1 = '0x123';
 const ACCOUNT_2 = '0x456';
 const setUseNftDetectionStub = jest.fn();
 const setDisplayNftMediaStub = jest.fn();
-
+const setPreferenceStub = jest.fn();
 const render = ({
   nftContracts = [],
   nfts = [],
@@ -219,6 +227,7 @@ describe('NFT Items', () => {
     updateNftDropDownState: updateNftDropDownStateStub,
     setUseNftDetection: setUseNftDetectionStub,
     setOpenSeaEnabled: setDisplayNftMediaStub,
+    setPreference: setPreferenceStub,
   });
   const historyPushMock = jest.fn();