feat: add network picker to AssetPicker (#26559)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
Changes included in this PR:
* Add a network picker to the AssetPicker modal component so that it can
be reused within the cross-chain swaps experience
* Update AssetPicker components to enable displaying network and asset
data when the selected network is not the same as the wallet's active
network. Example usecase: destination asset for cross-chain swaps.
Specifically:
  - when selected `network` is not the same as wallet's network, display
    - selected network's icons in asset list
    - selected network's native token icons
- add `customTokenListGenerator` prop to AssetPicker that allows
upstream components to override the default displayed token list

Figma design:
https://www.figma.com/design/bC6RgeriyERMtMlZE8xwkm/Cross-Chain-Swaps?node-id=1490-18690&t=pnpoVVaJTqh15I0a-0



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

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/METABRIDGE-866

## **Manual testing steps**

1. Swap+Send asset selection experience should not change
2. Storybook should show an AssetPicker variation that has a network
picker

## **Screenshots/Recordings**

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

### **Before**

<!-- [screenshots/recordings] -->
<img width="409" alt="Screenshot 2024-08-21 at 2 10 06 PM"
src="https://github.com/user-attachments/assets/4a5999ae-711c-4d33-80b6-5422b5756f6c">


### **After**

<!-- [screenshots/recordings] -->
![Screenshot 2024-10-02 at 4 09
51 PM](https://github.com/user-attachments/assets/ff3f2854-7120-4f3d-9e55-88a325a5b3db)<img
width="409" alt="Screenshot 2024-08-21 at 2 09 04 PM"
src="https://github.com/user-attachments/assets/206367fb-3551-491c-a223-06553583c40d">


## **Pre-merge author checklist**

- [X] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.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.

test/e2e/tests/multichain/asset-picker-send.spec.ts

@@ -71,15 +71,15 @@ describe('AssetPickerSendFlow @no-mmi', function () {
           )
         ).getText();
 
-        assert.equal(tokenListValue, '25 ETH');
+        assert.equal(tokenListValue, '$250,000.00');
 
         const tokenListSecondaryValue = await (
           await driver.findElement(
             '[data-testid="multichain-token-list-item-secondary-value"]',
           )
         ).getText();
 
-        assert.equal(tokenListSecondaryValue, '$250,000.00');
+        assert.equal(tokenListSecondaryValue, '25 ETH');
 
         // Search for CHZ
         const searchInputField = await driver.waitForSelector(

ui/components/multichain/asset-picker-amount/asset-picker-modal/Asset.test.tsx

@@ -77,10 +77,11 @@ describe('Asset', () => {
       expect.objectContaining({
         tokenSymbol: 'WETH',
         tokenImage: 'token-icon-url',
-        primary: '10',
-        secondary: '$10.10',
+        primary: '$10.10',
+        secondary: '10 WETH',
         title: 'Token',
         tooltipText: 'tooltip',
+        isPrimaryTokenSymbolHidden: true,
       }),
       {},
     );

ui/components/multichain/asset-picker-amount/asset-picker-modal/Asset.tsx

@@ -40,18 +40,22 @@ export default function Asset({
     {},
     true,
   );
+  const formattedAmount = decimalTokenAmount
+    ? `${formatAmount(
+        locale,
+        new BigNumber(decimalTokenAmount || '0', 10),
+      )} ${symbol}`
+    : undefined;
 
   return (
     <TokenListItem
       tokenSymbol={symbol}
       tokenImage={tokenImage}
-      primary={formatAmount(
-        locale,
-        new BigNumber(decimalTokenAmount || '0', 10),
-      )}
-      secondary={formattedFiat}
+      secondary={formattedAmount}
+      primary={formattedFiat}
       title={title}
       tooltipText={tooltipText}
+      isPrimaryTokenSymbolHidden
     />
   );
 }

ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import classnames from 'classnames';
-import { getSelectedAccountCachedBalance } from '../../../../selectors';
+import {
+  getCurrentCurrency,
+  getSelectedAccountCachedBalance,
+} from '../../../../selectors';
 import { getNativeCurrency } from '../../../../ducks/metamask/metamask';
-import { useUserPreferencedCurrency } from '../../../../hooks/useUserPreferencedCurrency';
-import { PRIMARY, SECONDARY } from '../../../../helpers/constants/common';
 import { useCurrencyDisplay } from '../../../../hooks/useCurrencyDisplay';
 import { AssetType } from '../../../../../shared/constants/transaction';
 import { Box } from '../../../component-library';
@@ -43,35 +44,24 @@ export default function AssetList({
 
   const nativeCurrency = useSelector(getNativeCurrency);
   const balanceValue = useSelector(getSelectedAccountCachedBalance);
+  const currentCurrency = useSelector(getCurrentCurrency);
 
-  const {
-    currency: primaryCurrency,
-    numberOfDecimals: primaryNumberOfDecimals,
-  } = useUserPreferencedCurrency(PRIMARY, { ethNumberOfDecimals: 4 });
-
-  const {
-    currency: secondaryCurrency,
-    numberOfDecimals: secondaryNumberOfDecimals,
-  } = useUserPreferencedCurrency(SECONDARY, { ethNumberOfDecimals: 4 });
-
-  const [, primaryCurrencyProperties] = useCurrencyDisplay(balanceValue, {
-    numberOfDecimals: primaryNumberOfDecimals,
-    currency: primaryCurrency,
+  const [primaryCurrencyValue] = useCurrencyDisplay(balanceValue, {
+    currency: currentCurrency,
+    hideLabel: true,
   });
 
-  const [secondaryCurrencyDisplay, secondaryCurrencyProperties] =
-    useCurrencyDisplay(balanceValue, {
-      numberOfDecimals: secondaryNumberOfDecimals,
-      currency: secondaryCurrency,
-      hideLabel: true,
-    });
+  const [secondaryCurrencyValue] = useCurrencyDisplay(balanceValue, {
+    currency: nativeCurrency,
+  });
 
   return (
     <Box className="tokens-main-view-modal">
       {tokenList.map((token) => {
         const tokenAddress = token.address?.toLowerCase();
         const isSelected = tokenAddress === selectedToken?.toLowerCase();
         const isDisabled = isTokenDisabled?.(token) ?? false;
+
         return (
           <Box
             padding={0}
@@ -112,15 +102,13 @@ export default function AssetList({
               <Box marginInlineStart={2}>
                 {token.type === AssetType.native ? (
                   <TokenListItem
-                    title={nativeCurrency}
-                    primary={
-                      primaryCurrencyProperties.value ??
-                      secondaryCurrencyProperties.value
-                    }
-                    tokenSymbol={primaryCurrency}
-                    secondary={secondaryCurrencyDisplay}
+                    title={token.symbol}
+                    primary={primaryCurrencyValue}
+                    tokenSymbol={token.symbol}
+                    secondary={secondaryCurrencyValue}
                     tokenImage={token.image}
-                    isOriginalTokenSymbol
+                    isOriginalTokenSymbol={token.symbol === nativeCurrency}
+                    isPrimaryTokenSymbolHidden
                   />
                 ) : (
                   <AssetComponent