diff --git a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap index 6a55226a42cb..e4bc078a8c2b 100644 --- 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`] = `
+
+

+ Network: +

+

+

+ static-logo +
+ Ethereum Mainnet +

+
@@ -581,6 +605,30 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
+
+

+ Network: +

+

+

+ static-logo +
+ Ethereum Mainnet +

+
@@ -1086,6 +1134,30 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
+
+

+ Network: +

+

+

+ static-logo +
+ Ethereum Mainnet +

+
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(