diff --git a/ui/pages/asset/components/asset-page.test.tsx b/ui/pages/asset/components/asset-page.test.tsx
index 71ca5483b50c..3918003f64b5 100644
--- 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(
+
,
+ 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(
,
diff --git a/ui/pages/asset/components/asset-page.tsx b/ui/pages/asset/components/asset-page.tsx
index c26f2d025f70..ad3f54761798 100644
--- 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 (
+ {renderRow(
+ t('network'),
+
+
+ {networkName}
+ ,
+ )}
{type === AssetType.token && (
{renderRow(