fix: asset picker bug

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);
+      },
+    );
+  });
+});

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}

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
     />
   );
 }

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;
       });
 

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

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 {

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"

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,
 };

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} />,

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"