fix: MMASSETS-475 - Add network name to asset details page (#29211)

## **Description**

Adds the network name to the assets details page so the user can be sure
to know what network a given asset lives on.

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

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/MMASSETS-475

## **Manual testing steps**

1. Click any number of asset items in the asset list
2. Ensure that the network name that displays matches the asset network
and images

## **Screenshots/Recordings**

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

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<img width="748" alt="SCR-20241213-osij"
src="https://github.com/user-attachments/assets/4811d56f-b856-4cef-af0f-e7ac696a4c60"
/>



## **Pre-merge author checklist**

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

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"
             >

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

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(