Show an explanation in UI for There are external inputs on device w…

…arning
secretkeylabs · Jun 30, 2023 · de33746 · de33746
1 parent 588de4a
commit de33746
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git a/src/app/components/ledger/connectLedgerView/index.tsx b/src/app/components/ledger/connectLedgerView/index.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import LedgerConnectDoneSVG from '@assets/img/ledger/ledger_import_connect_done.svg';
 import LedgerConnectFailSVG from '@assets/img/ledger/ledger_import_connect_fail.svg';
 
-const ConnectLedgerContainer = styled.div`
+export const ConnectLedgerContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -16,11 +16,11 @@ const ConnectLedgerContainer = styled.div`
   }
 `;
 
-const ConnectLedgerTitle = styled.h1((props) => ({
+export const ConnectLedgerTitle = styled.h1((props) => ({
   ...props.theme.headline_s,
 }));
 
-const ConnectLedgerText = styled.p((props) => ({
+export const ConnectLedgerText = styled.p((props) => ({
   ...props.theme.body_m,
   color: props.theme.colors.white[200],
   textAlign: 'center',

diff --git a/src/app/screens/ledger/confirmLedgerTransaction/index.tsx b/src/app/screens/ledger/confirmLedgerTransaction/index.tsx
@@ -14,7 +14,7 @@ import {
 import BigNumber from 'bignumber.js';
 import useWalletSelector from '@hooks/useWalletSelector';
 import { Recipient } from '@secretkeylabs/xverse-core/transactions/btc';
-import LedgerConnectionView from '@components/ledger/connectLedgerView';
+import LedgerConnectionView, { ConnectLedgerContainer, ConnectLedgerText, ConnectLedgerTitle } from '@components/ledger/connectLedgerView';
 import { ledgerDelay } from '@common/utils/ledger';
 import { getBtcTxStatusUrl, getStxTxStatusUrl } from '@utils/helper';
 import FullScreenHeader from '@components/ledger/fullScreenHeader';
@@ -23,6 +23,7 @@ import useNetworkSelector from '@hooks/useNetwork';
 import { StacksTransaction } from '@stacks/transactions';
 import LedgerConnectDefaultSVG from '@assets/img/ledger/ledger_connect_default.svg';
 import CheckCircleSVG from '@assets/img/ledger/check_circle.svg';
+import InfoIcon from '@assets/img/info.svg';
 
 export type LedgerTransactionType = 'BTC' | 'STX' | 'ORDINALS';
 
@@ -75,6 +76,11 @@ const TxConfirmedDescription = styled.p((props) => ({
   color: props.theme.colors.white[200],
 }));
 
+const InfoImage = styled.img`
+  width: 64px;
+  height: 64px;
+`;
+
 function ConfirmLedgerTransaction(): JSX.Element {
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
   const [txId, setTxId] = useState<string | undefined>(undefined);
@@ -197,7 +203,7 @@ function ConfirmLedgerTransaction(): JSX.Element {
 
     setIsConnectSuccess(true);
     await ledgerDelay(1500);
-    setCurrentStepIndex(1);
+    setCurrentStepIndex(0.5);
 
     switch (type) {
       case 'BTC':
@@ -215,6 +221,10 @@ function ConfirmLedgerTransaction(): JSX.Element {
     await transport.close();
   };
 
+  const goToConfirmationStep = () => {
+    setCurrentStepIndex(1);
+  }
+
   const handleRetry = async () => {
     setIsTxRejected(false);
     setIsConnectSuccess(false);
@@ -266,6 +276,17 @@ function ConfirmLedgerTransaction(): JSX.Element {
                   isConnectFailed={isConnectFailed}
                 />
               </div>
+            ) : currentStepIndex === 0.5 ? (
+              <div>
+                <ConnectLedgerContainer>
+                  <InfoImage
+                    src={InfoIcon}
+                    alt="external inputs warning"
+                  />
+                  <ConnectLedgerTitle>External inputs</ConnectLedgerTitle>
+                  <ConnectLedgerText>You should see a warning on your device saying "There are external inputs”. This is normal as you'll be using simultaneously two different addresses for this transaction.</ConnectLedgerText>
+                </ConnectLedgerContainer>
+              </div>
             ) : currentStepIndex === 1 ? (
               <div>
                 <LedgerConnectionView
@@ -286,7 +307,14 @@ function ConfirmLedgerTransaction(): JSX.Element {
               </TxConfirmedContainer>
             ) : null}
           </OnBoardingContentContainer>
-          {currentStepIndex !== 2 ? (
+          {currentStepIndex === 0.5 ? (
+            <SuccessActionsContainer>
+              <ActionButton
+                onPress={goToConfirmationStep}
+                text={t('CONTINUE_BUTTON')}
+              />
+            </SuccessActionsContainer>
+          ) : currentStepIndex !== 2 ? (
             <SuccessActionsContainer>
               <ActionButton
                 onPress={isTxRejected || isConnectFailed ? handleRetry : handleConnectAndConfirm}

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -99,6 +99,7 @@
     },
     "CONFIRM_BUTTON": "Confirm",
     "CONNECT_BUTTON": "Connect",
+    "CONTINUE_BUTTON": "Continue",
     "CLOSE_BUTTON": "Close",
     "CANCEL_BUTTON": "Cancel",
     "SEE_TRANSACTION_BUTTON": "See transaction",