fix: display network icon (#21205)

## **Description** This PR fixes one part of the bug shown in this github issue: #20106 When you try to send a token on polygon network and you are on the confirmation page; it shows the value of matic without a unit not an icon to indicate the network. If you are on ethereum network and you try to send an ERC20, it shows ethereum icon. In this PR i am using the AvatarNetwork component that is used on the main tokens page to indicate the network of tokens. ## **Manual testing steps** _1. Switch to polygon _2. Choose an ERC20 token and click send. _3. Add amount in amount input and click confirm and notice there is no unit/network icon displayed ## **Screenshots/Recordings** _If applicable, add screenshots and/or recordings to visualize the before and after of your change._ ### **Before** Ethereum: ![image](https://github.com/MetaMask/metamask-extension/assets/10994169/a7ab2281-9661-4661-9d1a-2d58c91e3026) Polygon ![image](https://github.com/MetaMask/metamask-extension/assets/10994169/1b2d6565-34c6-4381-a228-88f6af57d2b4) BNB ![image](https://github.com/MetaMask/metamask-extension/assets/10994169/6a1f1285-1837-4201-ba8c-185ec1dc5f2d) ### **After** Ethereum: ![image](https://github.com/MetaMask/metamask-extension/assets/10994169/faadf071-8ae4-4f04-8647-36cedf11d633) Polygon: ![image](https://github.com/MetaMask/metamask-extension/assets/10994169/2cd289c5-4e60-4021-a29d-482c94ca096d) BNB: ![image](https://github.com/MetaMask/metamask-extension/assets/10994169/a9094246-7afa-4368-aa70-03c6af9a4d67) ## **Related issues** [_Fixes #MMASSETS-26](https://consensyssoftware.atlassian.net/browse/MMASSETS-26) ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've clearly explained: - [x] What problem this PR is solving. - [x] How this problem was solved. - [x] How reviewers can test my changes. - [x] I’ve indicated what issue this PR is linked to: Fixes #??? - [x] I’ve included tests if applicable. - [x] I’ve documented any added code. - [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)). - [x] I’ve properly set the pull request status: - [ ] In case it's not yet "ready for review", I've set it to "draft". - [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **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 · Oct 11, 2023 · b9f23fe · b9f23fe
1 parent 936c26b
commit b9f23fe
Show file tree

Hide file tree

Showing 15 changed files with 212 additions and 63 deletions.
diff --git a/...page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap b/...page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
@@ -13,17 +13,9 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
     >
       <div
         class="mm-box currency-display-component confirm-detail-row__primary mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
+        ethlogoheight="18"
         title="0"
       >
-        <div
-          class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
-          variant="inherit"
-        >
-          <i
-            class="fab fa-ethereum"
-            style="font-size: 18px;"
-          />
-        </div>
         <span
           class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
         >
@@ -34,15 +26,6 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
         class="mm-box currency-display-component confirm-detail-row__secondary mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
         title="0"
       >
-        <div
-          class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
-          variant="inherit"
-        >
-          <i
-            class="fab fa-ethereum"
-            style="font-size: 14px;"
-          />
-        </div>
         <span
           class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
         >

diff --git a/...onents/app/confirm-page-container/confirm-detail-row/confirm-detail-row.component.test.js b/...onents/app/confirm-page-container/confirm-detail-row/confirm-detail-row.component.test.js
@@ -1,17 +1,22 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
-
 import { NetworkStatus } from '@metamask/network-controller';
 import { NetworkType } from '@metamask/controller-utils';
 import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import {
+  CHAIN_IDS,
+  GOERLI_DISPLAY_NAME,
+  NETWORK_TYPES,
+} from '../../../../../shared/constants/network';
 import ConfirmDetailRow from '.';
 
 describe('Confirm Detail Row Component', () => {
   const mockState = {
     metamask: {
       providerConfig: {
-        type: 'rpc',
-        chainId: '0x5',
+        chainId: CHAIN_IDS.GOERLI,
+        nickname: GOERLI_DISPLAY_NAME,
+        type: NETWORK_TYPES.GOERLI,
       },
       preferences: {
         useNativeCurrencyAsPrimaryCurrency: true,

diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.test.js b/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.test.js
@@ -6,7 +6,11 @@ import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import { ETH } from '../../../helpers/constants/common';
 import configureStore from '../../../store/store';
 import { GasFeeContextProvider } from '../../../contexts/gasFee';
-
+import {
+  NETWORK_TYPES,
+  CHAIN_IDS,
+  GOERLI_DISPLAY_NAME,
+} from '../../../../shared/constants/network';
 import EditGasFeePopover from './edit-gas-fee-popover';
 
 jest.mock('../../../store/actions', () => ({
@@ -53,7 +57,11 @@ const render = ({ txProps, contextProps } = {}) => {
   const store = configureStore({
     metamask: {
       nativeCurrency: ETH,
-      providerConfig: {},
+      providerConfig: {
+        chainId: CHAIN_IDS.GOERLI,
+        nickname: GOERLI_DISPLAY_NAME,
+        type: NETWORK_TYPES.GOERLI,
+      },
       cachedBalances: {},
       accounts: {
         '0xAddress': {

diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.test.js b/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.test.js
@@ -10,7 +10,11 @@ import { ETH } from '../../../../helpers/constants/common';
 import configureStore from '../../../../store/store';
 import { GasFeeContextProvider } from '../../../../contexts/gasFee';
 
-import { CHAIN_IDS } from '../../../../../shared/constants/network';
+import {
+  CHAIN_IDS,
+  GOERLI_DISPLAY_NAME,
+  NETWORK_TYPES,
+} from '../../../../../shared/constants/network';
 import EditGasItem from './edit-gas-item';
 
 jest.mock('../../../../store/actions', () => ({
@@ -62,6 +66,8 @@ const renderComponent = ({
       nativeCurrency: ETH,
       providerConfig: {
         chainId: CHAIN_IDS.GOERLI,
+        nickname: GOERLI_DISPLAY_NAME,
+        type: NETWORK_TYPES.GOERLI,
       },
       cachedBalances: {},
       accounts: {

diff --git a/...ancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.test.js b/...ancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.test.js
@@ -1,13 +1,20 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import { renderWithProvider } from '../../../../../../test/lib/render-helpers';
+import {
+  CHAIN_IDS,
+  GOERLI_DISPLAY_NAME,
+  NETWORK_TYPES,
+} from '../../../../../../shared/constants/network';
 import CancelTransactionGasFee from './cancel-transaction-gas-fee.component';
 
 describe('CancelTransactionGasFee Component', () => {
   const mockState = {
     metamask: {
       providerConfig: {
-        chainId: '0x4',
+        chainId: CHAIN_IDS.GOERLI,
+        nickname: GOERLI_DISPLAY_NAME,
+        type: NETWORK_TYPES.GOERLI,
       },
       preferences: {
         useNativeCurrencyAsPrimaryCurrency: false,

diff --git a/ui/components/app/transaction-breakdown/transaction-breakdown.test.js b/ui/components/app/transaction-breakdown/transaction-breakdown.test.js
@@ -2,6 +2,11 @@ import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import { within } from '@testing-library/react';
 import { renderWithProvider } from '../../../../test/jest/rendering';
+import {
+  MAINNET_DISPLAY_NAME,
+  NETWORK_TYPES,
+  CHAIN_IDS,
+} from '../../../../shared/constants/network';
 import TransactionBreakdown from '.';
 
 function getActualDataFrom(transactionBreakdownRows) {
@@ -22,7 +27,9 @@ describe('TransactionBreakdown', () => {
       nativeCurrency: null,
       preferences: {},
       providerConfig: {
-        chainId: null,
+        chainId: CHAIN_IDS.MAINNET,
+        nickname: MAINNET_DISPLAY_NAME,
+        type: NETWORK_TYPES.MAINNET,
       },
     },
   });

diff --git a/...ents/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js b/...ents/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js
@@ -1,13 +1,15 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
 import CurrencyDisplay from '../../ui/currency-display';
 import { useUserPreferencedCurrency } from '../../../hooks/useUserPreferencedCurrency';
-import { EtherDenomination } from '../../../../shared/constants/common';
+import { AvatarNetwork, AvatarNetworkSize } from '../../component-library';
+import { getCurrentNetwork } from '../../../selectors';
+import { getNativeCurrency } from '../../../ducks/metamask/metamask';
 
 export default function UserPreferencedCurrencyDisplay({
   'data-testid': dataTestId,
-  ethLogoHeight = 14,
   ethNumberOfDecimals,
   fiatNumberOfDecimals,
   numberOfDecimals: propsNumberOfDecimals,
@@ -17,6 +19,8 @@ export default function UserPreferencedCurrencyDisplay({
   showCurrencySuffix,
   ...restProps
 }) {
+  const currentNetwork = useSelector(getCurrentNetwork);
+  const nativeCurrency = useSelector(getNativeCurrency);
   const { currency, numberOfDecimals } = useUserPreferencedCurrency(type, {
     ethNumberOfDecimals,
     fiatNumberOfDecimals,
@@ -25,19 +29,22 @@ export default function UserPreferencedCurrencyDisplay({
   });
   const prefixComponent = useMemo(() => {
     return (
-      currency === EtherDenomination.ETH &&
-      showEthLogo && (
-        <i
-          className="fab fa-ethereum"
-          style={{
-            color: 'var(--color-icon-default)',
-            fontSize: ethLogoHeight,
-          }}
+      showEthLogo &&
+      currency === nativeCurrency && (
+        <AvatarNetwork
+          size={AvatarNetworkSize.Xs}
+          name={currentNetwork?.nickname}
+          src={currentNetwork?.rpcPrefs?.imageUrl}
         />
       )
     );
-  }, [currency, showEthLogo, ethLogoHeight]);
-
+  }, [
+    currency,
+    showEthLogo,
+    nativeCurrency,
+    currentNetwork.nickname,
+    currentNetwork?.rpcPrefs?.imageUrl,
+  ]);
   return (
     <CurrencyDisplay
       {...restProps}
@@ -49,7 +56,6 @@ export default function UserPreferencedCurrencyDisplay({
     />
   );
 }
-
 UserPreferencedCurrencyDisplay.propTypes = {
   className: PropTypes.string,
   'data-testid': PropTypes.string,

diff --git a/...omponents/app/user-preferenced-currency-display/user-preferenced-currency-display.test.js b/...omponents/app/user-preferenced-currency-display/user-preferenced-currency-display.test.js
@@ -1,28 +1,33 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import {
+  MAINNET_DISPLAY_NAME,
+  NETWORK_TYPES,
+  CHAIN_IDS,
+} from '../../../../shared/constants/network';
 import UserPreferencedCurrencyDisplay from '.';
 
 describe('UserPreferencedCurrencyDisplay Component', () => {
   describe('rendering', () => {
     const mockState = {
       metamask: {
         providerConfig: {
-          chainId: '0x99',
+          chainId: CHAIN_IDS.MAINNET,
+          nickname: MAINNET_DISPLAY_NAME,
+          type: NETWORK_TYPES.MAINNET,
         },
         preferences: {
           useNativeCurrencyAsPrimaryCurrency: true,
         },
       },
     };
     const mockStore = configureMockStore()(mockState);
-
     it('should match snapshot', () => {
       const { container } = renderWithProvider(
         <UserPreferencedCurrencyDisplay />,
         mockStore,
       );
-
       expect(container).toMatchSnapshot();
     });
   });

diff --git a/ui/components/app/wallet-overview/eth-overview.test.js b/ui/components/app/wallet-overview/eth-overview.test.js
@@ -2,7 +2,11 @@ import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { fireEvent, waitFor } from '@testing-library/react';
-import { CHAIN_IDS } from '../../../../shared/constants/network';
+import {
+  CHAIN_IDS,
+  MAINNET_DISPLAY_NAME,
+  NETWORK_TYPES,
+} from '../../../../shared/constants/network';
 import { renderWithProvider } from '../../../../test/jest/rendering';
 import { KeyringType } from '../../../../shared/constants/keyring';
 import EthOverview from './eth-overview';
@@ -29,8 +33,9 @@ describe('EthOverview', () => {
   const mockStore = {
     metamask: {
       providerConfig: {
-        type: 'test',
         chainId: CHAIN_IDS.MAINNET,
+        nickname: MAINNET_DISPLAY_NAME,
+        type: NETWORK_TYPES.MAINNET,
       },
       cachedBalances: {
         '0x1': {

diff --git a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
@@ -288,16 +288,18 @@ exports[`ConfirmSendEther should render correct information for for confirm send
           >
             <div
               class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
+              ethlogoheight="24"
               title="0"
             >
               <div
                 class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
                 variant="inherit"
               >
-                <i
-                  class="fab fa-ethereum"
-                  style="font-size: 24px;"
-                />
+                <div
+                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                >
+                  C
+                </div>
               </div>
               <span
                 class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"

diff --git a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
@@ -258,17 +258,9 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
           >
             <div
               class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
+              ethlogoheight="24"
               title="0.0001"
             >
-              <div
-                class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
-                variant="inherit"
-              >
-                <i
-                  class="fab fa-ethereum"
-                  style="font-size: 24px;"
-                />
-              </div>
               <span
                 class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >

diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.test.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.test.js
@@ -10,7 +10,11 @@ import { setBackgroundConnection } from '../../../test/jest';
 import { INITIAL_SEND_STATE_FOR_EXISTING_DRAFT } from '../../../test/jest/mocks';
 import { GasEstimateTypes } from '../../../shared/constants/gas';
 import { KeyringType } from '../../../shared/constants/keyring';
-import { CHAIN_IDS } from '../../../shared/constants/network';
+import {
+  CHAIN_IDS,
+  GOERLI_DISPLAY_NAME,
+  NETWORK_TYPES,
+} from '../../../shared/constants/network';
 import {
   TransactionStatus,
   TransactionType,
@@ -102,6 +106,8 @@ const baseStore = {
     currentCurrency: 'USD',
     providerConfig: {
       chainId: CHAIN_IDS.GOERLI,
+      nickname: GOERLI_DISPLAY_NAME,
+      type: NETWORK_TYPES.GOERLI,
     },
     nativeCurrency: 'ETH',
     featureFlags: {

diff --git a/ui/pages/routes/routes.component.test.js b/ui/pages/routes/routes.component.test.js
@@ -5,6 +5,11 @@ import { fireEvent } from '@testing-library/react';
 import { SEND_STAGES } from '../../ducks/send';
 import { renderWithProvider } from '../../../test/jest';
 import mockSendState from '../../../test/data/mock-send-state.json';
+import {
+  CHAIN_IDS,
+  GOERLI_DISPLAY_NAME,
+  NETWORK_TYPES,
+} from '../../../shared/constants/network';
 import Routes from '.';
 
 const mockShowNetworkDropdown = jest.fn();
@@ -75,6 +80,14 @@ describe('Routes Component', () => {
     it('should render with network change disabled while user is in send page', () => {
       const store = configureMockStore()({
         ...mockSendState,
+        metamask: {
+          ...mockSendState.metamask,
+          providerConfig: {
+            chainId: CHAIN_IDS.GOERLI,
+            nickname: GOERLI_DISPLAY_NAME,
+            type: NETWORK_TYPES.GOERLI,
+          },
+        },
       });
       const { getByTestId } = renderWithProvider(<Routes />, store, ['/send']);
 
@@ -89,6 +102,14 @@ describe('Routes Component', () => {
           ...mockSendState.send,
           stage: SEND_STAGES.EDIT,
         },
+        metamask: {
+          ...mockSendState.metamask,
+          providerConfig: {
+            chainId: CHAIN_IDS.GOERLI,
+            nickname: GOERLI_DISPLAY_NAME,
+            type: NETWORK_TYPES.GOERLI,
+          },
+        },
       });
       const { getByTestId } = renderWithProvider(<Routes />, store, ['/send']);