fix: asset picker bug (#25601)

## **Description** the goal of this PR is to fix some v12.1 bugs related to balance display and asset picker modal: - The symbols no longer show for each list item - Blocked token symbols (e.g., BNB on Ethereum Mainnet) are no longer greyed out in the UI despite still being inert - Token names are not truncated - Token symbol is USD instead of ETH on the asset picker modal  [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25601?quickstart=1) ## **Related issues** Fixes: #25575 ## **Manual testing steps** 1. Go to the wallet view and check crypto and fiat value for native token 2. Select Ethereum Mainnet 3. Go to Send page 4. Click on destination asset picker 5. Observe that symbols are not present and names are not truncated 6. Search for "CHZ" 7. Observe that it is not styled as a disabled button ## **Screenshots/Recordings**  ### **Before**  ### **After**  ## **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.
MetaMask · Jul 3, 2024 · 92ea1c9 · 92ea1c9
1 parent b372e83
commit 92ea1c9
Show file tree

Hide file tree

Showing 10 changed files with 161 additions and 52 deletions.
diff --git a/test/e2e/tests/multichain/asset-picker-send.spec.ts b/test/e2e/tests/multichain/asset-picker-send.spec.ts
@@ -0,0 +1,92 @@
+import { strict as assert } from 'assert';
+import { Context } from 'mocha';
+import { CHAIN_IDS } from '../../../../shared/constants/network';
+import FixtureBuilder from '../../fixture-builder';
+import {
+  defaultGanacheOptions,
+  openActionMenuAndStartSendFlow,
+  unlockWallet,
+  withFixtures,
+} from '../../helpers';
+import { Driver } from '../../webdriver/driver';
+import { RECIPIENT_ADDRESS_MOCK } from '../simulation-details/types';
+
+describe('AssetPickerSendFlow', function () {
+  const chainId = CHAIN_IDS.MAINNET;
+
+  const fixtures = {
+    fixtures: new FixtureBuilder({ inputChainId: chainId }).build(),
+    ganacheOptions: {
+      ...defaultGanacheOptions,
+      chainId: parseInt(chainId, 16),
+    },
+  };
+
+  it('should send token using asset picker modal', async function () {
+    const ethConversionInUsd = 10000;
+
+    await withFixtures(
+      {
+        ...fixtures,
+        title: (this as Context).test?.fullTitle(),
+        ethConversionInUsd,
+      },
+      async ({ driver }: { driver: Driver }) => {
+        await unlockWallet(driver);
+
+        // Open the send flow
+        openActionMenuAndStartSendFlow(driver);
+
+        await driver.fill('[data-testid="ens-input"]', RECIPIENT_ADDRESS_MOCK);
+        await driver.fill('.unit-input__input', '2');
+
+        const isDest = 'dest';
+        const buttons = await driver.findElements(
+          '[data-testid="asset-picker-button"]',
+        );
+        const indexOfButtonToClick = isDest ? 1 : 0;
+        await buttons[indexOfButtonToClick].click();
+
+        // check that the name , crypto amount and fiat amount are correctly displayed
+        const tokenListName = await (
+          await driver.findElement(
+            '[data-testid="multichain-token-list-item-token-name"]',
+          )
+        ).getText();
+
+        assert.equal(tokenListName, 'Ethereum');
+
+        const tokenListValue = await (
+          await driver.findElement(
+            '[data-testid="multichain-token-list-item-value"]',
+          )
+        ).getText();
+
+        assert.equal(tokenListValue, '25 ETH');
+
+        const tokenListSecondaryValue = await (
+          await driver.findElement(
+            '[data-testid="multichain-token-list-item-secondary-value"]',
+          )
+        ).getText();
+
+        assert.equal(tokenListSecondaryValue, '$250,000.00');
+
+        // Search for BNB
+        const searchInputField = await driver.waitForSelector(
+          '[data-testid="asset-picker-modal-search-input"]',
+        );
+        await searchInputField.sendKeys('CHZ');
+
+        // check that BNB is disabled
+        const [, tkn] = await driver.findElements(
+          '[data-testid="multichain-token-list-button"]',
+        );
+
+        await tkn.click();
+        const isSelected = await tkn.isSelected();
+        assert.equal(isSelected, false);
+      },
+    );
+  });
+});
diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js
@@ -168,6 +168,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }) => {
         isOriginalTokenSymbol={isOriginalNativeSymbol}
         isNativeCurrency
         isStakeable={isStakeable}
+        showPercentage
       />
       <TokenList
         tokens={tokensWithBalances}

diff --git a/ui/components/app/token-cell/token-cell.js b/ui/components/app/token-cell/token-cell.js
@@ -35,6 +35,7 @@ export default function TokenCell({ address, image, symbol, string, onClick }) {
       title={title}
       isOriginalTokenSymbol={isOriginalTokenSymbol}
       address={address}
+      showPercentage
     />
   );
 }

diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.test.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.test.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { useSelector } from 'react-redux';
-import { getSelectedAccountCachedBalance } from '../../../../selectors';
+import {
+  getPreferences,
+  getSelectedAccountCachedBalance,
+} from '../../../../selectors';
 import { getNativeCurrency } from '../../../../ducks/metamask/metamask';
 import { useUserPreferencedCurrency } from '../../../../hooks/useUserPreferencedCurrency';
 import { useCurrencyDisplay } from '../../../../hooks/useCurrencyDisplay';
@@ -78,6 +81,9 @@ describe('AssetList', () => {
       if (selector === getSelectedAccountCachedBalance) {
         return balanceValue;
       }
+      if (selector === getPreferences) {
+        return true;
+      }
       return undefined;
     });
 
@@ -136,6 +142,9 @@ describe('AssetList', () => {
         if (selector === getSelectedAccountCachedBalance) {
           return balanceValue;
         }
+        if (selector === getPreferences) {
+          return true;
+        }
         return undefined;
       });
 

diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import classnames from 'classnames';
-import { getSelectedAccountCachedBalance } from '../../../../selectors';
+import {
+  getPreferences,
+  getSelectedAccountCachedBalance,
+} from '../../../../selectors';
 import { getNativeCurrency } from '../../../../ducks/metamask/metamask';
 import { useUserPreferencedCurrency } from '../../../../hooks/useUserPreferencedCurrency';
 import { PRIMARY, SECONDARY } from '../../../../helpers/constants/common';
@@ -39,6 +42,7 @@ export default function AssetList({
 
   const nativeCurrency = useSelector(getNativeCurrency);
   const balanceValue = useSelector(getSelectedAccountCachedBalance);
+  const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
 
   const {
     currency: primaryCurrency,
@@ -107,7 +111,6 @@ export default function AssetList({
               display={Display.Block}
               flexWrap={FlexWrap.NoWrap}
               alignItems={AlignItems.center}
-              style={{ cursor: 'pointer' }}
             >
               <Box marginInlineStart={2}>
                 {token.type === AssetType.native ? (
@@ -117,9 +120,14 @@ export default function AssetList({
                       primaryCurrencyProperties.value ??
                       secondaryCurrencyProperties.value
                     }
-                    tokenSymbol={primaryCurrencyProperties.suffix}
+                    tokenSymbol={
+                      useNativeCurrencyAsPrimaryCurrency
+                        ? primaryCurrency
+                        : secondaryCurrency
+                    }
                     secondary={secondaryCurrencyDisplay}
                     tokenImage={token.image}
+                    isOriginalTokenSymbol
                   />
                 ) : (
                   <AssetComponent

diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/index.scss b/ui/components/multichain/asset-picker-amount/asset-picker-modal/index.scss
@@ -37,10 +37,10 @@
       }
     }
 
-    &--disabled {
-      @include disabled-token {
-        opacity: 0.4;
-      }
+    &--disabled,
+    &:disabled {
+      opacity: var(--opacity-disabled);
+      cursor: not-allowed;
     }
 
     &__selected-indicator {

diff --git a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
@@ -46,14 +46,10 @@ exports[`TokenListItem should render correctly 1`] = `
             <span
               class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
             />
-            <div
-              class="mm-box mm-box--display-flex"
-            >
-              <p
-                class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-text-default"
-                data-testid="token-increase-decrease-percentage-null"
-              />
-            </div>
+            <p
+              class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-alternative"
+              data-testid="multichain-token-list-item-token-name"
+            />
           </div>
           <div
             class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-flex-end mm-box--width-2/3"

diff --git a/ui/components/multichain/token-list-item/token-list-item.js b/ui/components/multichain/token-list-item/token-list-item.js
@@ -37,7 +37,6 @@ import { ModalContent } from '../../component-library/modal-content/deprecated';
 import { ModalHeader } from '../../component-library/modal-header/deprecated';
 import {
   getMetaMetricsId,
-  getPreferences,
   getTestNetworkBackgroundColor,
   getTokensMarketData,
 } from '../../../selectors';
@@ -77,6 +76,7 @@ export const TokenListItem = ({
   isNativeCurrency = false,
   isStakeable = false,
   address = null,
+  showPercentage = false,
 }) => {
   const t = useI18nContext();
   const isEvm = useSelector(getMultichainIsEvm);
@@ -86,13 +86,13 @@ export const TokenListItem = ({
   const chainId = useSelector(getMultichainCurrentChainId);
 
   // Scam warning
-  const showScamWarning = isNativeCurrency && !isOriginalTokenSymbol;
+  const showScamWarning =
+    isNativeCurrency && !isOriginalTokenSymbol && showPercentage;
 
   const dispatch = useDispatch();
   const [showScamWarningModal, setShowScamWarningModal] = useState(false);
   const environmentType = getEnvironmentType();
   const providerConfig = useSelector(getProviderConfig);
-  const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
   const isFullScreen = environmentType === ENVIRONMENT_TYPE_FULLSCREEN;
   const history = useHistory();
 
@@ -117,6 +117,8 @@ export const TokenListItem = ({
     tokensMarketData?.[address]?.pricePercentChange1d;
 
   const tokenTitle = getTokenTitle();
+  const tokenMainTitleToDisplay = showPercentage ? tokenTitle : tokenSymbol;
+
   const stakeableTitle = (
     <Box
       as="button"
@@ -257,10 +259,10 @@ export const TokenListItem = ({
                   >
                     {isStakeable ? (
                       <>
-                        {tokenTitle} {stakeableTitle}
+                        {tokenMainTitleToDisplay} {stakeableTitle}
                       </>
                     ) : (
-                      tokenTitle
+                      tokenMainTitleToDisplay
                     )}
                   </Text>
                 </Tooltip>
@@ -273,15 +275,25 @@ export const TokenListItem = ({
                 >
                   {isStakeable ? (
                     <Box display={Display.InlineBlock}>
-                      {tokenTitle} {stakeableTitle}
+                      {tokenMainTitleToDisplay}
+                      {stakeableTitle}
                     </Box>
                   ) : (
-                    tokenTitle
+                    tokenMainTitleToDisplay
                   )}
                 </Text>
               )}
 
-              {isEvm && (
+              {isEvm && !showPercentage ? (
+                <Text
+                  variant={TextVariant.bodyMd}
+                  color={TextColor.textAlternative}
+                  data-testid="multichain-token-list-item-token-name"
+                  ellipsis
+                >
+                  {tokenTitle}
+                </Text>
+              ) : (
                 <PercentageChange
                   value={
                     isNativeCurrency
@@ -313,27 +325,14 @@ export const TokenListItem = ({
                   data-testid="scam-warning"
                 />
 
-                {useNativeCurrencyAsPrimaryCurrency ? (
-                  <Text
-                    fontWeight={FontWeight.Medium}
-                    variant={TextVariant.bodyMd}
-                    width={isStakeable ? BlockSize.Half : BlockSize.TwoThirds}
-                    textAlign={TextAlign.End}
-                    data-testid="multichain-token-list-item-secondary-value"
-                    ellipsis={isStakeable}
-                  >
-                    {secondary}
-                  </Text>
-                ) : (
-                  <Text
-                    data-testid="multichain-token-list-item-value"
-                    color={TextColor.textAlternative}
-                    variant={TextVariant.bodyMd}
-                    textAlign={TextAlign.End}
-                  >
-                    {primary} {isNativeCurrency ? '' : tokenSymbol}
-                  </Text>
-                )}
+                <Text
+                  data-testid="multichain-token-list-item-value"
+                  color={TextColor.textAlternative}
+                  variant={TextVariant.bodyMd}
+                  textAlign={TextAlign.End}
+                >
+                  {primary} {isNativeCurrency ? '' : tokenSymbol}
+                </Text>
               </Box>
             ) : (
               <Box
@@ -454,4 +453,8 @@ TokenListItem.propTypes = {
    * address represents the token address
    */
   address: PropTypes.string,
+  /**
+   * showPercentage represents if the increase decrease percentage will be hidden
+   */
+  showPercentage: PropTypes.bool,
 };
diff --git a/ui/components/multichain/token-list-item/token-list-item.test.js b/ui/components/multichain/token-list-item/token-list-item.test.js
@@ -102,6 +102,7 @@ describe('TokenListItem', () => {
       primary: '11.9751 ETH',
       isNativeCurrency: true,
       isOriginalTokenSymbol: false,
+      showPercentage: true,
     };
     const { getByTestId, getByText } = renderWithProvider(
       <TokenListItem {...propsToUse} />,

diff --git a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
@@ -214,14 +214,12 @@ exports[`AssetPage should render a native asset 1`] = `
                 >
                   TEST
                 </span>
-                <div
-                  class="mm-box mm-box--display-flex"
+                <p
+                  class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-alternative"
+                  data-testid="multichain-token-list-item-token-name"
                 >
-                  <p
-                    class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-text-default"
-                    data-testid="token-increase-decrease-percentage-0x0000000000000000000000000000000000000000"
-                  />
-                </div>
+                  TEST
+                </p>
               </div>
               <div
                 class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-flex-end mm-box--width-2/3"