Adding usage instructions for Ledger Live users to confirmation screen (#12020)

* Adding usage instructions for Ledger Live users to confirmation screen

* Using design system components

* Hiding first step on Firefox

app/_locales/en/messages.json

@@ -1179,6 +1179,18 @@
   "ledgerLiveApp": {
     "message": "Ledger Live App"
   },
+  "ledgerLiveDialogHeader": {
+    "message": "Prior to clicking confirm:"
+  },
+  "ledgerLiveDialogStepOne": {
+    "message": "Enable Use Ledger Live under Settings > Advanced"
+  },
+  "ledgerLiveDialogStepThree": {
+    "message": "Plug in your Ledger device and select the Ethereum app"
+  },
+  "ledgerLiveDialogStepTwo": {
+    "message": "Open and unlock Ledger Live App"
+  },
   "ledgerLocked": {
     "message": "Cannot connect to Ledger device. Please make sure your device is unlocked and Ethereum app is opened."
   },

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

@@ -35,10 +35,12 @@ import TransactionDetailItem from '../../components/app/transaction-detail-item/
 import InfoTooltip from '../../components/ui/info-tooltip/info-tooltip';
 import LoadingHeartBeat from '../../components/ui/loading-heartbeat';
 import GasTiming from '../../components/app/gas-timing/gas-timing.component';
+import Dialog from '../../components/ui/dialog';
 
 import {
   COLORS,
   FONT_STYLE,
+  FONT_WEIGHT,
   TYPOGRAPHY,
 } from '../../helpers/constants/design-system';
 import {
@@ -124,6 +126,8 @@ export default class ConfirmTransactionBase extends Component {
     baseFeePerGas: PropTypes.string,
     isMainnet: PropTypes.bool,
     gasFeeIsCustom: PropTypes.bool,
+    isLedgerAccount: PropTypes.bool.isRequired,
+    isFirefox: PropTypes.bool.isRequired,
   };
 
   state = {
@@ -303,6 +307,8 @@ export default class ConfirmTransactionBase extends Component {
       maxFeePerGas,
       maxPriorityFeePerGas,
       isMainnet,
+      isLedgerAccount,
+      isFirefox,
     } = this.props;
     const { t } = this.context;
 
@@ -396,6 +402,51 @@ 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 && (
+                <Typography
+                  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>
+      </div>
+    ) : null;
+
     return (
       <div className="confirm-page-container-content__details">
         <TransactionDetail
@@ -523,6 +574,7 @@ export default class ConfirmTransactionBase extends Component {
           ]}
         />
         {nonceField}
+        {ledgerInstructionField}
       </div>
     );
   }

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

@@ -29,12 +29,16 @@ import {
   getShouldShowFiat,
   checkNetworkAndAccountSupports1559,
   getPreferences,
+  getAccountType,
 } from '../../selectors';
 import { getMostRecentOverviewPage } from '../../ducks/history/history';
 import {
   transactionMatchesNetwork,
   txParamsAreDappSuggested,
 } from '../../../shared/modules/transaction.utils';
+import { KEYRING_TYPES } from '../../../shared/constants/hardware-wallets';
+import { getPlatform } from '../../../app/scripts/lib/util';
+import { PLATFORM_FIREFOX } from '../../../shared/constants/app';
 import { toChecksumHexAddress } from '../../../shared/modules/hexstring-utils';
 import {
   updateTransactionGasFees,
@@ -161,6 +165,8 @@ const mapStateToProps = (state, ownProps) => {
   const gasFeeIsCustom =
     fullTxData.userFeeLevel === 'custom' ||
     txParamsAreDappSuggested(fullTxData);
+  const isLedgerAccount = getAccountType(state) === KEYRING_TYPES.LEDGER;
+  const isFirefox = getPlatform() === PLATFORM_FIREFOX;
 
   return {
     balance,
@@ -208,6 +214,8 @@ const mapStateToProps = (state, ownProps) => {
     maxPriorityFeePerGas: gasEstimationObject.maxPriorityFeePerGas,
     baseFeePerGas: gasEstimationObject.baseFeePerGas,
     gasFeeIsCustom,
+    isLedgerAccount,
+    isFirefox,
   };
 };