From 792f9efa5662f5799eb6aa8d81c479944fdd5d02 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Thu, 16 Sep 2021 09:52:42 -0700
Subject: [PATCH] Adding "Enable smart contract data" step to Ledger
 Instructions (Confirmation Screen) (#12115)

---
 app/_locales/en/messages.json                 |  3 +
 .../confirm-transaction-base.component.js     | 58 ++++++++-----------
 2 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index df8fd5139..ffa4609d0 100644
--- a/app/_locales/en/messages.json
+++ b/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"
   },
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
index d40c8a24f..f555e1923 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/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
-                boxProps={{ margin: 0 }}
-                color={COLORS.PRIMARY3}
-                fontWeight={FONT_WEIGHT.BOLD}
-                variant={TYPOGRAPHY.H7}
-              >
-                {t('ledgerLiveDialogHeader')}
-              </Typography>
-              {!isFirefox && (
-                <Typography
-                  boxProps={{ margin: 0 }}
-                  color={COLORS.PRIMARY3}
-                  fontWeight={FONT_WEIGHT.BOLD}
-                  variant={TYPOGRAPHY.H7}
-                >
-                  {`- ${t('ledgerLiveDialogStepOne')}`}
-                </Typography>
+              {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>