Adding "Enable smart contract data" step to Ledger Instructions (Confirmation Screen) (#12115)

app/_locales/en/messages.json

@@ -1213,6 +1213,9 @@
   "ledgerLiveDialogHeader": {
     "message": "Prior to clicking confirm:"
   },
+  "ledgerLiveDialogStepFour": {
+    "message": "Enable smart contract data on your Ledger device"
+  },
   "ledgerLiveDialogStepOne": {
     "message": "Enable Use Ledger Live under Settings > Advanced"
   },

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

@@ -402,45 +402,37 @@ export default class ConfirmTransactionBase extends Component {
       </div>
     ) : null;
 
+    const renderLedgerLiveStep = (text, show = true) => {
+      return (
+        show && (
+          <Typography
+            boxProps={{ margin: 0 }}
+            color={COLORS.PRIMARY3}
+            fontWeight={FONT_WEIGHT.BOLD}
+            variant={TYPOGRAPHY.H7}
+          >
+            {text}
+          </Typography>
+        )
+      );
+    };
+
     const ledgerInstructionField = isLedgerAccount ? (
       <div>
         <div className="confirm-detail-row">
           <Dialog type="message">
             <div className="ledger-live-dialog">
-              <Typography
+              {renderLedgerLiveStep(t('ledgerLiveDialogHeader'))}
-                boxProps={{ margin: 0 }}
+              {renderLedgerLiveStep(
-                color={COLORS.PRIMARY3}
+                `- ${t('ledgerLiveDialogStepOne')}`,
-                fontWeight={FONT_WEIGHT.BOLD}
+                !isFirefox,
-                variant={TYPOGRAPHY.H7}
+              )}
-              >
+              {renderLedgerLiveStep(`- ${t('ledgerLiveDialogStepTwo')}`)}
-                {t('ledgerLiveDialogHeader')}
+              {renderLedgerLiveStep(`- ${t('ledgerLiveDialogStepThree')}`)}
-              </Typography>
+              {renderLedgerLiveStep(
-              {!isFirefox && (
+                `- ${t('ledgerLiveDialogStepFour')}`,
-                <Typography
+                Boolean(txData.txParams?.data),
-                  boxProps={{ margin: 0 }}
-                  color={COLORS.PRIMARY3}
-                  fontWeight={FONT_WEIGHT.BOLD}
-                  variant={TYPOGRAPHY.H7}
-                >
-                  {`- ${t('ledgerLiveDialogStepOne')}`}
-                </Typography>
               )}
-              <Typography
-                boxProps={{ margin: 0 }}
-                color={COLORS.PRIMARY3}
-                fontWeight={FONT_WEIGHT.BOLD}
-                variant={TYPOGRAPHY.H7}
-              >
-                {`- ${t('ledgerLiveDialogStepTwo')}`}
-              </Typography>
-              <Typography
-                boxProps={{ margin: 0 }}
-                color={COLORS.PRIMARY3}
-                fontWeight={FONT_WEIGHT.BOLD}
-                variant={TYPOGRAPHY.H7}
-              >
-                {`- ${t('ledgerLiveDialogStepThree')}`}
-              </Typography>
             </div>
           </Dialog>
         </div>