From 08cc205443af87abe258849a92cd7b2959eec9f9 Mon Sep 17 00:00:00 2001 From: sahar-fehri Date: Thu, 21 Nov 2024 20:09:07 +0100 Subject: [PATCH] fix: fix test networks display for portfolio view (#28601) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** This PR fixes the display in the asset page and in the main token list when the price checker setting is off [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28601?quickstart=1) ## **Related issues** Fixes: https://github.com/MetaMask/metamask-extension/issues/28594 ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings** ### **Before** ### **After** https://github.com/user-attachments/assets/a1213b6a-3f23-49f5-be15-a0b369b9016e ## **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/develop/.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/develop/.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. --- .../app/assets/token-cell/token-cell.tsx | 17 +++++++---------- .../app/assets/token-list/token-list.tsx | 18 +++++++++++++++++- ui/pages/asset/components/asset-page.tsx | 17 ++++++++++++++++- 3 files changed, 40 insertions(+), 12 deletions(-) diff --git a/ui/components/app/assets/token-cell/token-cell.tsx b/ui/components/app/assets/token-cell/token-cell.tsx index 56d6555258bd..d470ef3dc21a 100644 --- a/ui/components/app/assets/token-cell/token-cell.tsx +++ b/ui/components/app/assets/token-cell/token-cell.tsx @@ -84,17 +84,14 @@ export default function TokenCell({ image; const secondaryThreshold = 0.01; - // Format for fiat balance with currency style - const secondary = formatWithThreshold( - tokenFiatAmount, - secondaryThreshold, - locale, - { - style: 'currency', - currency: currentCurrency.toUpperCase(), - }, - ); + const secondary = + tokenFiatAmount === null + ? undefined + : formatWithThreshold(tokenFiatAmount, secondaryThreshold, locale, { + style: 'currency', + currency: currentCurrency.toUpperCase(), + }); const primary = formatAmount( locale, diff --git a/ui/components/app/assets/token-list/token-list.tsx b/ui/components/app/assets/token-list/token-list.tsx index 08b5675dfe94..3f094634743e 100644 --- a/ui/components/app/assets/token-list/token-list.tsx +++ b/ui/components/app/assets/token-list/token-list.tsx @@ -7,6 +7,7 @@ import { sortAssets } from '../util/sort'; import { getCurrencyRates, getCurrentNetwork, + getIsTestnet, getMarketData, getNetworkConfigurationIdByChainId, getNewTokensImported, @@ -14,6 +15,7 @@ import { getSelectedAccount, getSelectedAccountNativeTokenCachedBalanceByChainId, getSelectedAccountTokensAcrossChains, + getShowFiatInTestnets, getTokenExchangeRates, } from '../../../../selectors'; import { getConversionRate } from '../../../../ducks/metamask/metamask'; @@ -24,6 +26,8 @@ import { endTrace, TraceName } from '../../../../../shared/lib/trace'; import { useTokenBalances } from '../../../../hooks/useTokenBalances'; import { setTokenNetworkFilter } from '../../../../store/actions'; import { useI18nContext } from '../../../../hooks/useI18nContext'; +import { useMultichainSelector } from '../../../../hooks/useMultichainSelector'; +import { getMultichainShouldShowFiat } from '../../../../selectors/multichain'; type TokenListProps = { onTokenClick: (chainId: string, address: string) => void; @@ -212,6 +216,18 @@ export default function TokenList({ console.log(t('loadingTokens')); } + // Check if testnet + const isTestnet = useSelector(getIsTestnet); + const shouldShowFiat = useMultichainSelector( + getMultichainShouldShowFiat, + selectedAccount, + ); + const isMainnet = !isTestnet; + // Check if show conversion is enabled + const showFiatInTestnets = useSelector(getShowFiatInTestnets); + const showFiat = + shouldShowFiat && (isMainnet || (isTestnet && showFiatInTestnets)); + return (
{sortedFilteredTokens.map((tokenData) => ( @@ -220,7 +236,7 @@ export default function TokenList({ chainId={tokenData.chainId} address={tokenData.address} symbol={tokenData.symbol} - tokenFiatAmount={tokenData.tokenFiatAmount} + tokenFiatAmount={showFiat ? tokenData.tokenFiatAmount : null} image={tokenData?.image} isNative={tokenData.isNative} string={tokenData.string} diff --git a/ui/pages/asset/components/asset-page.tsx b/ui/pages/asset/components/asset-page.tsx index d7ad8e568f4e..19ce592f0071 100644 --- a/ui/pages/asset/components/asset-page.tsx +++ b/ui/pages/asset/components/asset-page.tsx @@ -18,6 +18,8 @@ import { getCurrencyRates, getSelectedAccountNativeTokenCachedBalanceByChainId, getSelectedAccount, + getIsTestnet, + getShowFiatInTestnets, } from '../../../selectors'; import { Display, @@ -49,6 +51,8 @@ import CoinButtons from '../../../components/app/wallet-overview/coin-buttons'; 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 { getPortfolioUrl } from '../../../helpers/utils/portfolio'; import AssetChart from './chart/asset-chart'; import TokenButtons from './token-buttons'; @@ -109,6 +113,17 @@ const AssetPage = ({ const marketData = useSelector(getMarketData); const currencyRates = useSelector(getCurrencyRates); + const isTestnet = useSelector(getIsTestnet); + const shouldShowFiat = useMultichainSelector( + getMultichainShouldShowFiat, + selectedAccount, + ); + const isMainnet = !isTestnet; + // Check if show conversion is enabled + const showFiatInTestnets = useSelector(getShowFiatInTestnets); + const showFiat = + shouldShowFiat && (isMainnet || (isTestnet && showFiatInTestnets)); + const nativeBalances: Record = useSelector( getSelectedAccountNativeTokenCachedBalanceByChainId, ) as Record; @@ -254,7 +269,7 @@ const AssetPage = ({ chainId={chainId} symbol={symbol} image={image} - tokenFiatAmount={tokenFiatAmount} + tokenFiatAmount={showFiat ? tokenFiatAmount : null} string={balance?.toString()} />