Merge branch 'main' into feat/enable-stx-migration

MetaMask · Dec 19, 2024 · 067fc9b · 067fc9b
2 parents 9fd62b6 + c8a3c58
commit 067fc9b
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 2 deletions.
diff --git a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
@@ -262,6 +262,30 @@ exports[`AssetPage should render a native asset 1`] = `
           <div
             class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
           >
+            <div
+              class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
+            >
+              <p
+                class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
+              >
+                Network:
+              </p>
+              <p
+                class="mm-box mm-text mm-text--body-md mm-box--display-flex mm-box--gap-1 mm-box--align-items-center mm-box--color-text-default"
+                data-testid="asset-network"
+              >
+                <div
+                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm 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-md mm-box--border-color-background-default mm-box--border-width-1 box--border-style-solid"
+                >
+                  <img
+                    alt="static-logo"
+                    class="mm-avatar-network__network-image"
+                    src="./images/eth_logo.svg"
+                  />
+                </div>
+                Ethereum Mainnet
+              </p>
+            </div>
             <div
               class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
             >
@@ -581,6 +605,30 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
           <div
             class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
           >
+            <div
+              class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
+            >
+              <p
+                class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
+              >
+                Network:
+              </p>
+              <p
+                class="mm-box mm-text mm-text--body-md mm-box--display-flex mm-box--gap-1 mm-box--align-items-center mm-box--color-text-default"
+                data-testid="asset-network"
+              >
+                <div
+                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm 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-md mm-box--border-color-background-default mm-box--border-width-1 box--border-style-solid"
+                >
+                  <img
+                    alt="static-logo"
+                    class="mm-avatar-network__network-image"
+                    src="./images/eth_logo.svg"
+                  />
+                </div>
+                Ethereum Mainnet
+              </p>
+            </div>
             <div
               class="mm-box"
             >
@@ -1086,6 +1134,30 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
           <div
             class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
           >
+            <div
+              class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
+            >
+              <p
+                class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
+              >
+                Network:
+              </p>
+              <p
+                class="mm-box mm-text mm-text--body-md mm-box--display-flex mm-box--gap-1 mm-box--align-items-center mm-box--color-text-default"
+                data-testid="asset-network"
+              >
+                <div
+                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm 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-md mm-box--border-color-background-default mm-box--border-width-1 box--border-style-solid"
+                >
+                  <img
+                    alt="static-logo"
+                    class="mm-avatar-network__network-image"
+                    src="./images/eth_logo.svg"
+                  />
+                </div>
+                Ethereum Mainnet
+              </p>
+            </div>
             <div
               class="mm-box"
             >

diff --git a/ui/pages/asset/components/asset-page.test.tsx b/ui/pages/asset/components/asset-page.test.tsx
@@ -4,7 +4,10 @@ import thunk from 'redux-thunk';
 import { fireEvent, waitFor } from '@testing-library/react';
 import { EthAccountType } from '@metamask/keyring-api';
 import nock from 'nock';
-import { CHAIN_IDS } from '../../../../shared/constants/network';
+import {
+  CHAIN_IDS,
+  MAINNET_DISPLAY_NAME,
+} from '../../../../shared/constants/network';
 import { renderWithProvider } from '../../../../test/jest/rendering';
 import { KeyringType } from '../../../../shared/constants/keyring';
 import { AssetType } from '../../../../shared/constants/transaction';
@@ -327,6 +330,18 @@ describe('AssetPage', () => {
     expect(mmiPortfolioButton).toBeInTheDocument();
   });
 
+  it('should render the network name', async () => {
+    const mockedStore = configureMockStore([thunk])(mockStore);
+
+    const { queryByTestId } = renderWithProvider(
+      <AssetPage asset={token} optionsButton={null} />,
+      mockedStore,
+    );
+    const networkNode = queryByTestId('asset-network');
+    expect(networkNode).toBeInTheDocument();
+    expect(networkNode?.textContent).toBe(MAINNET_DISPLAY_NAME);
+  });
+
   it('should render a native asset', () => {
     const { container } = renderWithProvider(
       <AssetPage asset={native} optionsButton={null} />,

diff --git a/ui/pages/asset/components/asset-page.tsx b/ui/pages/asset/components/asset-page.tsx
@@ -21,6 +21,7 @@ import {
   getShowFiatInTestnets,
 } from '../../../selectors';
 import {
+  AlignItems,
   Display,
   FlexDirection,
   IconColor,
@@ -29,6 +30,8 @@ import {
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import {
+  AvatarNetwork,
+  AvatarNetworkSize,
   Box,
   ButtonIcon,
   ButtonIconSize,
@@ -54,7 +57,11 @@ import { getIsNativeTokenBuyable } from '../../../ducks/ramps';
 import { calculateTokenBalance } from '../../../components/app/assets/util/calculateTokenBalance';
 import { useTokenBalances } from '../../../hooks/useTokenBalances';
 import { useMultichainSelector } from '../../../hooks/useMultichainSelector';
-import { getMultichainShouldShowFiat } from '../../../selectors/multichain';
+import {
+  getImageForChainId,
+  getMultichainShouldShowFiat,
+} from '../../../selectors/multichain';
+import { getNetworkConfigurationsByChainId } from '../../../../shared/modules/selectors/networks';
 import { getPortfolioUrl } from '../../../helpers/utils/portfolio';
 import { hexToDecimal } from '../../../../shared/modules/conversion.utils';
 import AssetChart from './chart/asset-chart';
@@ -214,6 +221,12 @@ const AssetPage = ({
     [account.address, isMarketingEnabled, isMetaMetricsEnabled, metaMetricsId],
   );
 
+  const networkConfigurationsByChainId = useSelector(
+    getNetworkConfigurationsByChainId,
+  );
+  const networkName = networkConfigurationsByChainId[chainId]?.name;
+  const tokenChainImage = getImageForChainId(chainId);
+
   return (
     <Box
       marginLeft="auto"
@@ -310,6 +323,22 @@ const AssetPage = ({
                 flexDirection={FlexDirection.Column}
                 gap={2}
               >
+                {renderRow(
+                  t('network'),
+                  <Text
+                    display={Display.Flex}
+                    alignItems={AlignItems.center}
+                    gap={1}
+                    data-testid="asset-network"
+                  >
+                    <AvatarNetwork
+                      src={tokenChainImage}
+                      name={networkName}
+                      size={AvatarNetworkSize.Sm}
+                    />
+                    {networkName}
+                  </Text>,
+                )}
                 {type === AssetType.token && (
                   <Box>
                     {renderRow(