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

app/_locales/en/messages.json

@@ -1183,6 +1183,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

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