Fixing ledger steps display (Confirm TX) (#12163)

* Fixing ledger steps display (Confirm TX)

* Hiding step two on Firefox

ui/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -123,7 +123,7 @@ export default class ConfirmTransactionBase extends Component {
     maxPriorityFeePerGas: PropTypes.string,
     baseFeePerGas: PropTypes.string,
     gasFeeIsCustom: PropTypes.bool,
-    isLedgerAccount: PropTypes.bool.isRequired,
+    showLedgerSteps: PropTypes.bool.isRequired,
     isFirefox: PropTypes.bool.isRequired,
   };
 
@@ -303,7 +303,7 @@ export default class ConfirmTransactionBase extends Component {
       primaryTotalTextOverrideMaxAmount,
       maxFeePerGas,
       maxPriorityFeePerGas,
-      isLedgerAccount,
+      showLedgerSteps,
       isFirefox,
     } = this.props;
     const { t } = this.context;
@@ -418,7 +418,7 @@ export default class ConfirmTransactionBase extends Component {
       );
     };
 
-    const ledgerInstructionField = isLedgerAccount ? (
+    const ledgerInstructionField = showLedgerSteps ? (
       <div>
         <div className="confirm-detail-row">
           <Dialog type="message">
@@ -428,7 +428,10 @@ export default class ConfirmTransactionBase extends Component {
                 `- ${t('ledgerLiveDialogStepOne')}`,
                 !isFirefox,
               )}
-              {renderLedgerLiveStep(`- ${t('ledgerLiveDialogStepTwo')}`)}
+              {renderLedgerLiveStep(
+                `- ${t('ledgerLiveDialogStepTwo')}`,
+                !isFirefox,
+              )}
               {renderLedgerLiveStep(`- ${t('ledgerLiveDialogStepThree')}`)}
               {renderLedgerLiveStep(
                 `- ${t('ledgerLiveDialogStepFour')}`,

ui/pages/confirm-transaction-base/confirm-transaction-base.container.js

@@ -29,7 +29,7 @@ import {
   getShouldShowFiat,
   checkNetworkAndAccountSupports1559,
   getPreferences,
-  getAccountType,
+  getHardwareWalletType,
 } from '../../selectors';
 import { getMostRecentOverviewPage } from '../../ducks/history/history';
 import {
@@ -165,7 +165,7 @@ const mapStateToProps = (state, ownProps) => {
   const gasFeeIsCustom =
     fullTxData.userFeeLevel === 'custom' ||
     txParamsAreDappSuggested(fullTxData);
-  const isLedgerAccount = getAccountType(state) === KEYRING_TYPES.LEDGER;
+  const showLedgerSteps = getHardwareWalletType(state) === KEYRING_TYPES.LEDGER;
   const isFirefox = getPlatform() === PLATFORM_FIREFOX;
 
   return {
@@ -214,7 +214,7 @@ const mapStateToProps = (state, ownProps) => {
     maxPriorityFeePerGas: gasEstimationObject.maxPriorityFeePerGas,
     baseFeePerGas: gasEstimationObject.baseFeePerGas,
     gasFeeIsCustom,
-    isLedgerAccount,
+    showLedgerSteps,
     isFirefox,
   };
 };