From 56e92f87a310cfb5729072195c72280c7dcc876a Mon Sep 17 00:00:00 2001 From: Pedro Figueiredo Date: Tue, 5 Nov 2024 14:35:04 +0000 Subject: [PATCH] fix: Hide fiat values on test networks (#28219) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** Hides fiat values by default unless "Show conversion on test networks" is toggled on in the settings. Includes changes to the gas fees components, and the send heading components for native and erc20 tokens. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28219?quickstart=1) ## **Related issues** Fixes: https://github.com/MetaMask/metamask-extension/issues/27814 ## **Manual testing steps** 1. Toggle off "Show conversion on test networks" in the settings 2. Initiate a SepoliaETH or any erc20 token transfer from the wallet on Sepolia network 3. Check the gas fees components and the heading component. ## **Screenshots/Recordings** ### **Before** ### **After** ## **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. --- .../transactions/contract-deployment.test.tsx | 4 --- .../contract-interaction.test.tsx | 4 --- .../native-transfer.test.tsx.snap | 5 --- .../edit-gas-fees-row/edit-gas-fees-row.tsx | 31 +++++++++++++------ .../gas-fees-row/gas-fees-row.stories.tsx | 15 +++++---- .../shared/gas-fees-row/gas-fees-row.test.tsx | 4 +-- .../info/shared/gas-fees-row/gas-fees-row.tsx | 18 ++++++++++- .../native-send-heading.tsx | 23 ++++++++++---- .../info/shared/send-heading/send-heading.tsx | 19 +++++++++--- 9 files changed, 80 insertions(+), 43 deletions(-) diff --git a/test/integration/confirmations/transactions/contract-deployment.test.tsx b/test/integration/confirmations/transactions/contract-deployment.test.tsx index c2625e06e3e7..67862e6b9550 100644 --- a/test/integration/confirmations/transactions/contract-deployment.test.tsx +++ b/test/integration/confirmations/transactions/contract-deployment.test.tsx @@ -284,9 +284,6 @@ describe('Contract Deployment Confirmation', () => { const firstGasField = within(editGasFeesRow).getByTestId('first-gas-field'); expect(firstGasField).toHaveTextContent('0.0001 SepoliaETH'); - const editGasFeeNativeCurrency = - within(editGasFeesRow).getByTestId('native-currency'); - expect(editGasFeeNativeCurrency).toHaveTextContent('$0.47'); expect(editGasFeesRow).toContainElement( screen.getByTestId('edit-gas-fee-icon'), ); @@ -372,7 +369,6 @@ describe('Contract Deployment Confirmation', () => { expect(gasFeesSection).toContainElement(maxFee); expect(maxFee).toHaveTextContent(tEn('maxFee') as string); expect(maxFee).toHaveTextContent('0.0023 SepoliaETH'); - expect(maxFee).toHaveTextContent('$7.72'); const nonceSection = screen.getByTestId('advanced-details-nonce-section'); expect(nonceSection).toBeInTheDocument(); diff --git a/test/integration/confirmations/transactions/contract-interaction.test.tsx b/test/integration/confirmations/transactions/contract-interaction.test.tsx index b77e48f1d660..9a955e1a45fb 100644 --- a/test/integration/confirmations/transactions/contract-interaction.test.tsx +++ b/test/integration/confirmations/transactions/contract-interaction.test.tsx @@ -302,9 +302,6 @@ describe('Contract Interaction Confirmation', () => { const firstGasField = within(editGasFeesRow).getByTestId('first-gas-field'); expect(firstGasField).toHaveTextContent('0.0001 SepoliaETH'); - const editGasFeeNativeCurrency = - within(editGasFeesRow).getByTestId('native-currency'); - expect(editGasFeeNativeCurrency).toHaveTextContent('$0.47'); expect(editGasFeesRow).toContainElement( screen.getByTestId('edit-gas-fee-icon'), ); @@ -403,7 +400,6 @@ describe('Contract Interaction Confirmation', () => { expect(gasFeesSection).toContainElement(maxFee); expect(maxFee).toHaveTextContent(tEn('maxFee') as string); expect(maxFee).toHaveTextContent('0.0023 SepoliaETH'); - expect(maxFee).toHaveTextContent('$7.72'); const nonceSection = screen.getByTestId('advanced-details-nonce-section'); expect(nonceSection).toBeInTheDocument(); diff --git a/ui/pages/confirmations/components/confirm/info/native-transfer/__snapshots__/native-transfer.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/native-transfer/__snapshots__/native-transfer.test.tsx.snap index 234c0b704d5c..843002b76884 100644 --- a/ui/pages/confirmations/components/confirm/info/native-transfer/__snapshots__/native-transfer.test.tsx.snap +++ b/ui/pages/confirmations/components/confirm/info/native-transfer/__snapshots__/native-transfer.test.tsx.snap @@ -15,11 +15,6 @@ exports[`NativeTransferInfo renders correctly 1`] = ` > 0 ETH -

- 0 -

(); + type TestNetChainId = (typeof TEST_CHAINS)[number]; + const isTestnet = TEST_CHAINS.includes( + transactionMeta.chainId as TestNetChainId, + ); + const { showFiatInTestnets } = useSelector(getPreferences); + return ( {nativeFee} - - {fiatFee} - + {(!isTestnet || showFiatInTestnets) && ( + + {fiatFee} + + )} ( - + + + ); DefaultStory.storyName = 'Default'; diff --git a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-row/gas-fees-row.test.tsx b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-row/gas-fees-row.test.tsx index 12b857acc1b2..e5433c38fa5d 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-row/gas-fees-row.test.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-row/gas-fees-row.test.tsx @@ -2,8 +2,8 @@ import React from 'react'; import configureMockStore from 'redux-mock-store'; import thunk from 'redux-thunk'; -import { renderWithProvider } from '../../../../../../../../test/lib/render-helpers'; import mockState from '../../../../../../../../test/data/mock-state.json'; +import { renderWithConfirmContextProvider } from '../../../../../../../../test/lib/confirmations/render-helpers'; import { GasFeesRow } from './gas-fees-row'; describe('', () => { @@ -12,7 +12,7 @@ describe('', () => { it('renders component', () => { const state = mockState; const mockStore = configureMockStore(middleware)(state); - const { container } = renderWithProvider( + const { container } = renderWithConfirmContextProvider( { + const { currentConfirmation: transactionMeta } = + useConfirmContext(); + + type TestNetChainId = (typeof TEST_CHAINS)[number]; + const isTestnet = TEST_CHAINS.includes( + transactionMeta?.chainId as TestNetChainId, + ); + const { showFiatInTestnets } = useSelector(getPreferences); + return ( {nativeFee} - {fiatFee} + {(!isTestnet || showFiatInTestnets) && ( + {fiatFee} + )} ); diff --git a/ui/pages/confirmations/components/confirm/info/shared/native-send-heading/native-send-heading.tsx b/ui/pages/confirmations/components/confirm/info/shared/native-send-heading/native-send-heading.tsx index a3c2b91c9f8e..bd5c7ba8b4f2 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/native-send-heading/native-send-heading.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/native-send-heading/native-send-heading.tsx @@ -2,7 +2,10 @@ import { TransactionMeta } from '@metamask/transaction-controller'; import { BigNumber } from 'bignumber.js'; import React from 'react'; import { useSelector } from 'react-redux'; -import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../../../../../shared/constants/network'; +import { + CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP, + TEST_CHAINS, +} from '../../../../../../../../shared/constants/network'; import { AvatarToken, AvatarTokenSize, @@ -22,6 +25,7 @@ import { } from '../../../../../../../helpers/constants/design-system'; import { MIN_AMOUNT } from '../../../../../../../hooks/useCurrencyDisplay'; import { useFiatFormatter } from '../../../../../../../hooks/useFiatFormatter'; +import { getPreferences } from '../../../../../../../selectors'; import { getMultichainNetwork } from '../../../../../../../selectors/multichain'; import { useConfirmContext } from '../../../../../context/confirm'; import { @@ -59,6 +63,12 @@ const NativeSendHeading = () => { nativeAssetTransferValue.toNumber(), ); + type TestNetChainId = (typeof TEST_CHAINS)[number]; + const isTestnet = TEST_CHAINS.includes( + transactionMeta.chainId as TestNetChainId, + ); + const { showFiatInTestnets } = useSelector(getPreferences); + const NetworkImage = ( { ); - const NativeAssetFiatConversion = ( - - {fiatDisplayValue} - - ); + const NativeAssetFiatConversion = Boolean(fiatDisplayValue) && + (!isTestnet || showFiatInTestnets) && ( + + {fiatDisplayValue} + + ); return ( { pending, } = useTokenValues(transactionMeta); + type TestNetChainId = (typeof TEST_CHAINS)[number]; + const isTestnet = TEST_CHAINS.includes( + transactionMeta.chainId as TestNetChainId, + ); + const { showFiatInTestnets } = useSelector(getPreferences); + const TokenImage = ( { >{`${displayTransferValue} ${tokenSymbol}`} ); - const TokenFiatValue = fiatDisplayValue && ( - - {fiatDisplayValue} - - ); + const TokenFiatValue = Boolean(fiatDisplayValue) && + (!isTestnet || showFiatInTestnets) && ( + + {fiatDisplayValue} + + ); if (pending) { return ;