Fixed hardware wallet info popup on token allowance screen (#17881)

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

@@ -35,6 +35,7 @@ import {
   getUnapprovedTxCount,
   getUnapprovedTransactions,
   getUseCurrencyRateCheck,
+  isHardwareWallet,
 } from '../../selectors';
 import { NETWORK_TO_NAME_MAP } from '../../../shared/constants/network';
 import {
@@ -62,6 +63,7 @@ import { ConfirmPageContainerNavigation } from '../../components/app/confirm-pag
 import { useSimulationFailureWarning } from '../../hooks/useSimulationFailureWarning';
 import SimulationErrorMessage from '../../components/ui/simulation-error-message';
 import { Icon, ICON_NAMES } from '../../components/component-library';
+import LedgerInstructionField from '../../components/app/ledger-instruction-field/ledger-instruction-field';
 
 export default function TokenAllowance({
   origin,
@@ -111,6 +113,7 @@ export default function TokenAllowance({
   const unapprovedTxCount = useSelector(getUnapprovedTxCount);
   const unapprovedTxs = useSelector(getUnapprovedTransactions);
   const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck);
+  const isHardwareWalletConnected = useSelector(isHardwareWallet);
 
   const replaceCommaToDot = (inputValue) => {
     return inputValue.replace(/,/gu, '.');
@@ -491,6 +494,11 @@ export default function TokenAllowance({
           </Box>
         </Box>
       ) : null}
+      {!isFirstPage && isHardwareWalletConnected && (
+        <Box paddingLeft={2} paddingRight={2}>
+          <LedgerInstructionField showDataInstruction />
+        </Box>
+      )}
       <PageContainerFooter
         cancelText={t('reject')}
         submitText={isFirstPage ? t('next') : t('approveButtonText')}

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

@@ -2,6 +2,7 @@ import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import { fireEvent } from '@testing-library/react';
 import { renderWithProvider } from '../../../test/lib/render-helpers';
+import { HardwareKeyringTypes } from '../../../shared/constants/hardware-wallets';
 import TokenAllowance from './token-allowance';
 
 const testTokenAddress = '0xC011a73ee8576Fb46F5E1c5751cA3B9Fe0af2a6F';
@@ -11,17 +12,17 @@ const state = {
   },
   metamask: {
     accounts: {
-      '0xAddress': {
-        address: '0xAddress',
-        balance: '0x1F4',
+      '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': {
+        address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+        balance: '0x0',
       },
     },
     gasEstimateType: 'none',
-    selectedAddress: '0xAddress',
+    selectedAddress: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
     identities: {
-      '0xAddress': {
+      '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': {
+        address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
         name: 'Account 1',
-        address: '0xAddress',
       },
     },
     cachedBalances: {},
@@ -64,6 +65,13 @@ const state = {
       },
     ],
     unapprovedTxs: {},
+    keyringTypes: [HardwareKeyringTypes.ledger],
+    keyrings: [
+      {
+        type: HardwareKeyringTypes.ledger,
+        accounts: ['0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'],
+      },
+    ],
   },
   history: {
     mostRecentOverviewPage: '/',
@@ -244,4 +252,30 @@ describe('TokenAllowancePage', () => {
     fireEvent.click(gotIt);
     expect(gotIt).not.toBeInTheDocument();
   });
+
+  it('should show hardware wallet info text', () => {
+    const { queryByText, getByText, getByTestId } = renderWithProvider(
+      <TokenAllowance {...props} />,
+      store,
+    );
+
+    const textField = getByTestId('custom-spending-cap-input');
+    fireEvent.change(textField, { target: { value: '1' } });
+
+    expect(queryByText('Prior to clicking confirm:')).toBeNull();
+
+    const nextButton = getByText('Next');
+    fireEvent.click(nextButton);
+
+    expect(queryByText('Prior to clicking confirm:')).toBeInTheDocument();
+  });
+
+  it('should not show hardware wallet info text', () => {
+    const { queryByText } = renderWithProvider(
+      <TokenAllowance {...props} />,
+      store,
+    );
+
+    expect(queryByText('Prior to clicking confirm:')).toBeNull();
+  });
 });