Ensure approve button can be enabled when using ledger webhid (#12685)

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

@@ -46,7 +46,7 @@ export default class ConfirmApproveContent extends Component {
     showCustomizeNonceModal: PropTypes.func,
     warning: PropTypes.string,
     txData: PropTypes.object,
-    ledgerWalletRequiredHidConnection: PropTypes.bool,
+    fromAddressIsLedger: PropTypes.bool,
   };
 
   state = {
@@ -242,7 +242,7 @@ export default class ConfirmApproveContent extends Component {
       useNonceField,
       warning,
       txData,
-      ledgerWalletRequiredHidConnection,
+      fromAddressIsLedger,
     } = this.props;
     const { showFullTxDetails } = this.state;
 
@@ -351,7 +351,7 @@ export default class ConfirmApproveContent extends Component {
             })}
         </div>
 
-        {ledgerWalletRequiredHidConnection ? (
+        {fromAddressIsLedger ? (
           <div className="confirm-approve-content__ledger-instruction-wrapper">
             <LedgerInstructionField
               showDataInstruction={Boolean(txData.txParams?.data)}

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

@@ -15,7 +15,11 @@ import {
   getTokenValueParam,
 } from '../../helpers/utils/token-util';
 import { useTokenTracker } from '../../hooks/useTokenTracker';
-import { getTokens, getNativeCurrency } from '../../ducks/metamask/metamask';
+import {
+  getTokens,
+  getNativeCurrency,
+  isAddressLedger,
+} from '../../ducks/metamask/metamask';
 import {
   transactionFeeSelector,
   txDataSelector,
@@ -24,7 +28,6 @@ import {
   getUseNonceField,
   getCustomNonceValue,
   getNextSuggestedNonce,
-  doesAddressRequireLedgerHidConnection,
 } from '../../selectors';
 
 import { useApproveTransaction } from '../../hooks/useApproveTransaction';
@@ -36,10 +39,8 @@ import { isEqualCaseInsensitive } from '../../helpers/utils/util';
 import { getCustomTxParamsData } from './confirm-approve.util';
 import ConfirmApproveContent from './confirm-approve-content';
 
-const doesAddressRequireLedgerHidConnectionByFromAddress = (address) => (
+const isAddressLedgerByFromAddress = (address) => (state) => {
-  state,
+  return isAddressLedger(state, address);
-) => {
-  return doesAddressRequireLedgerHidConnection(state, address);
 };
 
 export default function ConfirmApprove() {
@@ -59,9 +60,7 @@ export default function ConfirmApprove() {
   const nextNonce = useSelector(getNextSuggestedNonce);
   const customNonceValue = useSelector(getCustomNonceValue);
 
-  const ledgerWalletRequiredHidConnection = useSelector(
+  const fromAddressIsLedger = useSelector(isAddressLedgerByFromAddress(from));
-    doesAddressRequireLedgerHidConnectionByFromAddress(from),
-  );
 
   const transaction =
     currentNetworkTxList.find(
@@ -219,9 +218,7 @@ export default function ConfirmApprove() {
             }
             warning={submitWarning}
             txData={transaction}
-            ledgerWalletRequiredHidConnection={
+            fromAddressIsLedger={fromAddressIsLedger}
-              ledgerWalletRequiredHidConnection
-            }
           />
           {showCustomizeGasPopover && (
             <EditGasPopover