Disable fiat conversion in Approve Screen when Show balance and token price checker is OFF (#17443)

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}
                   >
-                    <Box>
+                    {useCurrencyRateCheck && (
-                      <Typography
+                      <Box>
-                        variant={TypographyVariant.H4}
+                        <Typography
-                        fontWeight={FONT_WEIGHT.BOLD}
+                          variant={TypographyVariant.H4}
-                        color={TextColor.textDefault}
+                          fontWeight={FONT_WEIGHT.BOLD}
-                      >
+                          color={TextColor.TEXT_DEFAULT}
-                        {formatCurrency(fiatTransactionTotal, currentCurrency)}
+                        >
-                      </Typography>
+                          {formatCurrency(
-                    </Box>
+                            fiatTransactionTotal,
+                            currentCurrency,
+                          )}
+                        </Typography>
+                      </Box>
+                    )}
                     <Box>
                       <Typography
                         variant={TypographyVariant.H6}
@@ -320,4 +326,8 @@ ApproveContentCard.propTypes = {
    * Render simulation failure warning
    */
   renderSimulationFailureWarning: PropTypes.bool,
+  /**
+   * Fiat conversion control
+   */
+  useCurrencyRateCheck: PropTypes.bool,
 };

ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js

@@ -74,6 +74,7 @@ export default class ConfirmApproveContent extends Component {
     userAcknowledgedGasMissing: PropTypes.bool,
     setUserAcknowledgedGasMissing: PropTypes.func,
     renderSimulationFailureWarning: PropTypes.bool,
+    useCurrencyRateCheck: PropTypes.bool,
   };
 
   state = {
@@ -159,6 +160,7 @@ export default class ConfirmApproveContent extends Component {
       supportsEIP1559,
       userAcknowledgedGasMissing,
       renderSimulationFailureWarning,
+      useCurrencyRateCheck,
     } = this.props;
     if (
       !isMultiLayerFeeNetwork &&
@@ -193,7 +195,8 @@ export default class ConfirmApproveContent extends Component {
             </div>
             <div className="confirm-approve-content__transaction-details-content__fee">
               <div className="confirm-approve-content__transaction-details-content__primary-fee">
-                {formatCurrency(fiatTransactionTotal, currentCurrency)}
+                {useCurrencyRateCheck &&
+                  formatCurrency(fiatTransactionTotal, currentCurrency)}
               </div>
               <div className="confirm-approve-content__transaction-details-content__secondary-fee">
                 {`${ethTransactionTotal} ${nativeCurrency}`}

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();
+  });
 });

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 && (
               <EditGasPopover

ui/pages/token-allowance/token-allowance.js

@@ -34,6 +34,7 @@ import {
   getCustomTokenAmount,
   getUnapprovedTxCount,
   getUnapprovedTransactions,
+  getUseCurrencyRateCheck,
 } from '../../selectors';
 import { NETWORK_TO_NAME_MAP } from '../../../shared/constants/network';
 import {
@@ -109,6 +110,7 @@ export default function TokenAllowance({
   const customTokenAmount = useSelector(getCustomTokenAmount);
   const unapprovedTxCount = useSelector(getUnapprovedTxCount);
   const unapprovedTxs = useSelector(getUnapprovedTransactions);
+  const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck);
 
   const replaceCommaToDot = (inputValue) => {
     return inputValue.replace(/,/gu, '.');
@@ -436,6 +438,7 @@ export default function TokenAllowance({
             hexTransactionTotal={hexTransactionTotal}
             fiatTransactionTotal={fiatTransactionTotal}
             currentCurrency={currentCurrency}
+            useCurrencyRateCheck={useCurrencyRateCheck}
           />
         </Box>
       )}
@@ -483,6 +486,7 @@ export default function TokenAllowance({
               renderSimulationFailureWarning={renderSimulationFailureWarning}
               isApprovalOrRejection={isApprovalOrRejection}
               data={customTxParamsData || data}
+              useCurrencyRateCheck={useCurrencyRateCheck}
             />
           </Box>
         </Box>