diff --git a/ui/components/app/approve-content-card/approve-content-card.js b/ui/components/app/approve-content-card/approve-content-card.js index b02fc0db9..1b613f37c 100644 --- a/ui/components/app/approve-content-card/approve-content-card.js +++ b/ui/components/app/approve-content-card/approve-content-card.js @@ -45,6 +45,7 @@ export default function ApproveContentCard({ data, userAcknowledgedGasMissing, renderSimulationFailureWarning, + useCurrencyRateCheck, }) { const t = useContext(I18nContext); @@ -163,15 +164,20 @@ export default function ApproveContentCard({ alignItems={AlignItems.flexEnd} textAlign={TEXT_ALIGN.RIGHT} > - - - {formatCurrency(fiatTransactionTotal, currentCurrency)} - - + {useCurrencyRateCheck && ( + + + {formatCurrency( + fiatTransactionTotal, + currentCurrency, + )} + + + )}
- {formatCurrency(fiatTransactionTotal, currentCurrency)} + {useCurrencyRateCheck && + formatCurrency(fiatTransactionTotal, currentCurrency)}
{`${ethTransactionTotal} ${nativeCurrency}`} diff --git a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js index 647ec2b50..952a38af6 100644 --- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js +++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js @@ -21,7 +21,7 @@ const props = { showCustomizeGasModal: jest.fn(), data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170', toAddress: '0x9bc5baf874d2da8d216ae9f137804184ee5afef4', - currentCurrency: 'TST', + currentCurrency: 'usd', nativeCurrency: 'ETH', ethTransactionTotal: '20', fiatTransactionTotal: '10', @@ -36,6 +36,7 @@ const props = { chainId: '1337', rpcPrefs: {}, isContract: true, + useCurrencyRateCheck: true, }; describe('ConfirmApproveContent Component', () => { @@ -69,6 +70,7 @@ describe('ConfirmApproveContent Component', () => { queryByText('A fee is associated with this request.'), ).toBeInTheDocument(); expect(queryByText(`${props.ethTransactionTotal} ETH`)).toBeInTheDocument(); + expect(queryByText(`$10.00`)).toBeInTheDocument(); fireEvent.click(editButtons[0]); expect(props.showCustomizeGasModal).toHaveBeenCalledTimes(1); @@ -98,10 +100,12 @@ describe('ConfirmApproveContent Component', () => { }); it('should render Confirm approve page correctly and simulation error message without I want to procced anyway link', () => { - props.userAcknowledgedGasMissing = true; - props.renderSimulationFailureWarning = true; const { queryByText, getByText, getAllByText, getByTestId } = - renderComponent(props); + renderComponent({ + ...props, + userAcknowledgedGasMissing: true, + renderSimulationFailureWarning: true, + }); expect( queryByText('https://metamask.github.io/test-dapp/'), ).toBeInTheDocument(); @@ -158,10 +162,12 @@ describe('ConfirmApproveContent Component', () => { }); it('should render Confirm approve page correctly and simulation error message with I want to procced anyway link', () => { - props.userAcknowledgedGasMissing = false; - props.renderSimulationFailureWarning = true; const { queryByText, getByText, getAllByText, getByTestId } = - renderComponent(props); + renderComponent({ + ...props, + userAcknowledgedGasMissing: false, + renderSimulationFailureWarning: true, + }); expect( queryByText('https://metamask.github.io/test-dapp/'), ).toBeInTheDocument(); @@ -216,4 +222,63 @@ describe('ConfirmApproveContent Component', () => { ), ).toBeInTheDocument(); }); + + it('should render Confirm approve page correctly when the fiat conversion is OFF', () => { + const { queryByText, getByText, getAllByText, getByTestId } = + renderComponent({ ...props, useCurrencyRateCheck: false }); + expect( + queryByText('https://metamask.github.io/test-dapp/'), + ).toBeInTheDocument(); + expect(getByTestId('confirm-approve-title').textContent).toStrictEqual( + ' Allow access to and transfer of your TestDappCollectibles (#1)? ', + ); + expect( + queryByText( + 'This allows a third party to access and transfer the following NFTs without further notice until you revoke its access.', + ), + ).toBeInTheDocument(); + expect(queryByText('Verify contract details')).toBeInTheDocument(); + expect( + queryByText( + 'We were not able to estimate gas. There might be an error in the contract and this transaction may fail.', + ), + ).not.toBeInTheDocument(); + expect(queryByText('I want to proceed anyway')).not.toBeInTheDocument(); + expect(queryByText('View full transaction details')).toBeInTheDocument(); + + const editButtons = getAllByText('Edit'); + + expect(queryByText('Transaction fee')).toBeInTheDocument(); + expect( + queryByText('A fee is associated with this request.'), + ).toBeInTheDocument(); + expect(queryByText(`${props.ethTransactionTotal} ETH`)).toBeInTheDocument(); + expect(queryByText(`$10.00`)).not.toBeInTheDocument(); + fireEvent.click(editButtons[0]); + expect(props.showCustomizeGasModal).toHaveBeenCalledTimes(4); + + expect(queryByText('Nonce')).toBeInTheDocument(); + expect(queryByText('2')).toBeInTheDocument(); + fireEvent.click(editButtons[1]); + expect(props.showCustomizeNonceModal).toHaveBeenCalledTimes(4); + + const showViewTxDetails = getByText('View full transaction details'); + expect(queryByText('Permission request')).not.toBeInTheDocument(); + expect(queryByText('Approved asset:')).not.toBeInTheDocument(); + expect(queryByText('Granted to:')).not.toBeInTheDocument(); + expect(queryByText('Data')).not.toBeInTheDocument(); + fireEvent.click(showViewTxDetails); + expect(getByText('Hide full transaction details')).toBeInTheDocument(); + expect(getByText('Permission request')).toBeInTheDocument(); + expect(getByText('Approved asset:')).toBeInTheDocument(); + expect(getByText('Granted to:')).toBeInTheDocument(); + expect(getByText('Contract (0x9bc5baF8...fEF4)')).toBeInTheDocument(); + expect(getByText('Data')).toBeInTheDocument(); + expect(getByText('Function: Approve')).toBeInTheDocument(); + expect( + getByText( + '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170', + ), + ).toBeInTheDocument(); + }); }); diff --git a/ui/pages/confirm-approve/confirm-approve.js b/ui/pages/confirm-approve/confirm-approve.js index 493deef9f..6980d4862 100644 --- a/ui/pages/confirm-approve/confirm-approve.js +++ b/ui/pages/confirm-approve/confirm-approve.js @@ -27,6 +27,7 @@ import { getRpcPrefsForCurrentProvider, getIsMultiLayerFeeNetwork, checkNetworkAndAccountSupports1559, + getUseCurrencyRateCheck, } from '../../selectors'; import { useApproveTransaction } from '../../hooks/useApproveTransaction'; import { useSimulationFailureWarning } from '../../hooks/useSimulationFailureWarning'; @@ -81,6 +82,7 @@ export default function ConfirmApprove({ const fromAddressIsLedger = useSelector( isAddressLedgerByFromAddress(userAddress), ); + const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck); const [customPermissionAmount, setCustomPermissionAmount] = useState(''); const [submitWarning, setSubmitWarning] = useState(''); const [isContract, setIsContract] = useState(false); @@ -287,6 +289,7 @@ export default function ConfirmApprove({ isContract={isContract} isMultiLayerFeeNetwork={isMultiLayerFeeNetwork} supportsEIP1559={supportsEIP1559} + useCurrencyRateCheck={useCurrencyRateCheck} /> {showCustomizeGasPopover && !supportsEIP1559 && ( { return inputValue.replace(/,/gu, '.'); @@ -436,6 +438,7 @@ export default function TokenAllowance({ hexTransactionTotal={hexTransactionTotal} fiatTransactionTotal={fiatTransactionTotal} currentCurrency={currentCurrency} + useCurrencyRateCheck={useCurrencyRateCheck} /> )} @@ -483,6 +486,7 @@ export default function TokenAllowance({ renderSimulationFailureWarning={renderSimulationFailureWarning} isApprovalOrRejection={isApprovalOrRejection} data={customTxParamsData || data} + useCurrencyRateCheck={useCurrencyRateCheck} />