From 974a13c465ca0e0bce0fc7b0872c1cdcf04c5fb8 Mon Sep 17 00:00:00 2001
From: Dmytro Vynnyk <simbiatoff@gmail.com>
Date: Sat, 18 May 2024 00:25:15 +0300
Subject: [PATCH] Fix small issues

---
 .../connected-ledger.tsx                      |  1 -
 .../import-account-from-ledger/index.tsx      |  1 +
 src/background/redux/ledger/selectors.ts      |  2 +-
 src/hooks/use-ledger.ts                       |  3 +-
 src/libs/services/ledger/errors.ts            |  2 +-
 src/libs/services/ledger/ledger.ts            |  9 ++--
 .../components/account-list/account-list.tsx  | 12 +++--
 .../ledger-connection-view.tsx                | 11 ++++-
 .../ledger-event-view/ledger-event-view.tsx   | 10 +++-
 .../ledger-disconnected-footer.tsx            |  6 +--
 .../no-connected-ledger.tsx                   | 46 ++++++++++---------
 11 files changed, 59 insertions(+), 44 deletions(-)

diff --git a/src/apps/popup/pages/import-account-from-ledger/connected-ledger.tsx b/src/apps/popup/pages/import-account-from-ledger/connected-ledger.tsx
index 33d480a39..59e979464 100644
--- a/src/apps/popup/pages/import-account-from-ledger/connected-ledger.tsx
+++ b/src/apps/popup/pages/import-account-from-ledger/connected-ledger.tsx
@@ -157,7 +157,6 @@ export const ConnectedLedger: React.FC<IConnectedLedgerProps> = ({
       });
       setMaxItemsToRender(prevState => prevState + 5);
     } catch (e) {
-      console.log('-------- e', JSON.stringify(e, null, ' '));
       setIsLoadingMore(false);
     }
   };
diff --git a/src/apps/popup/pages/import-account-from-ledger/index.tsx b/src/apps/popup/pages/import-account-from-ledger/index.tsx
index 3d6cd8964..1b4c301c5 100644
--- a/src/apps/popup/pages/import-account-from-ledger/index.tsx
+++ b/src/apps/popup/pages/import-account-from-ledger/index.tsx
@@ -39,6 +39,7 @@ export const ImportAccountFromLedgerPage = () => {
     <ConnectedLedger onClose={closeNewLedgerWindowsAndClearState} />
   ) : (
     <LedgerConnectionView
+      isAccountSelection
       event={ledgerEventStatusToRender}
       onConnect={makeSubmitLedgerAction}
       closeNewLedgerWindowsAndClearState={closeNewLedgerWindowsAndClearState}
diff --git a/src/background/redux/ledger/selectors.ts b/src/background/redux/ledger/selectors.ts
index 0d994fb45..127871f14 100644
--- a/src/background/redux/ledger/selectors.ts
+++ b/src/background/redux/ledger/selectors.ts
@@ -8,4 +8,4 @@ export const selectLedgerDeploy = (state: RootState): string | null =>
 
 export const selectLedgerRecipientToSaveOnSuccess = (
   state: RootState
-): string | null => state.ledger.deploy;
+): string | null => state.ledger.recipientToSaveOnSuccess;
diff --git a/src/hooks/use-ledger.ts b/src/hooks/use-ledger.ts
index 8897724e2..7a86bed71 100644
--- a/src/hooks/use-ledger.ts
+++ b/src/hooks/use-ledger.ts
@@ -120,7 +120,6 @@ export const useLedger = ({
           });
         }
       } catch (e) {
-        console.log('-------- e', e);
         setIsLedgerConnected(false);
       }
     }
@@ -157,7 +156,7 @@ export const useLedger = ({
       }
 
       isFirstEventRef.current = false;
-      console.log('-------- event', JSON.stringify(event, null, ' '));
+      console.log('-------- event', JSON.stringify(event.status, null, ' '));
     });
 
     return () => sub.unsubscribe();
diff --git a/src/libs/services/ledger/errors.ts b/src/libs/services/ledger/errors.ts
index 4a02b7cab..1d6dc8ede 100644
--- a/src/libs/services/ledger/errors.ts
+++ b/src/libs/services/ledger/errors.ts
@@ -47,7 +47,7 @@ export const ledgerErrorsData: Record<LedgerEventStatus, ILedgerErrorData> = {
   [LedgerEventStatus.CasperAppNotLoaded]: {
     title: 'Casper app isn’t open on Ledger',
     description:
-      'Please make sure to open Casper app on your ledger and try connecting again.'
+      'Please make sure to open Casper app on your Ledger and try connecting again.'
   },
   [LedgerEventStatus.DeviceLocked]: {
     title: 'The Ledger device is locked',
diff --git a/src/libs/services/ledger/ledger.ts b/src/libs/services/ledger/ledger.ts
index 1cb045d47..da3c9e5c5 100644
--- a/src/libs/services/ledger/ledger.ts
+++ b/src/libs/services/ledger/ledger.ts
@@ -88,7 +88,6 @@ export class Ledger {
 
       try {
         this.#transport = await transportCreator();
-        console.log('-------- this.#transport', this.#transport);
         this.#transport?.on('disconnect', this.#onDisconnect);
         this.#ledgerApp = new LedgerCasperApp(this.#transport);
       } catch (e) {
@@ -132,7 +131,7 @@ export class Ledger {
   async checkAppInfo(): Promise<LedgerEventStatus | null> {
     if (this.#ledgerConnected && this.#ledgerApp) {
       const appInfo = await this.#ledgerApp?.getAppInfo();
-      console.log('-------- appInfo', appInfo);
+
       await this.#processDelayAfterAction();
 
       if (appInfo.returnCode === 65535) {
@@ -174,7 +173,6 @@ export class Ledger {
             status: LedgerEventStatus.CasperAppNotLoaded
           });
         } else {
-          console.log('-------- get acc response', response);
           this.#processError({ status: LedgerEventStatus.AccountListFailed });
         }
       }
@@ -491,7 +489,7 @@ export class Ledger {
         try {
           const appInfo = await this.#ledgerApp.getAppInfo();
           await this.#processDelayAfterAction();
-          console.log('-------- appInfo', JSON.stringify(appInfo, null, ' '));
+
           if (appInfo.returnCode === 0xffff || appInfo.returnCode === 21781) {
             subscriber.next({ status: LedgerEventStatus.DeviceLocked });
 
@@ -504,7 +502,6 @@ export class Ledger {
           }
 
           if (appInfo.appName !== 'Casper') {
-            console.debug('Ledger device app info:' + appInfo.appName, appInfo);
             subscriber.next({ status: LedgerEventStatus.CasperAppNotLoaded });
 
             return false;
@@ -515,7 +512,7 @@ export class Ledger {
 
           return true;
         } catch (err) {
-          console.debug('-------- err', err);
+          console.error('-------- err', err);
         }
 
         return false;
diff --git a/src/libs/ui/components/account-list/account-list.tsx b/src/libs/ui/components/account-list/account-list.tsx
index 36bf46b75..f38f213b9 100644
--- a/src/libs/ui/components/account-list/account-list.tsx
+++ b/src/libs/ui/components/account-list/account-list.tsx
@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { isLedgerAvailable } from '@src/utils';
 
 import { useAccountManager } from '@popup/hooks/use-account-actions-with-events';
-import { RouterPath, useTypedNavigate } from '@popup/router';
+import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router';
 
 import { WindowApp } from '@background/create-open-window';
 import {
@@ -34,8 +34,8 @@ interface AccountListProps {
 }
 
 export const AccountList = ({ closeModal }: AccountListProps) => {
+  const { pathname } = useTypedLocation();
   const [accountListRows, setAccountListRows] = useState<AccountListRows[]>([]);
-
   const { changeActiveAccountWithEvent: changeActiveAccount } =
     useAccountManager();
   const { t } = useTranslation();
@@ -111,8 +111,12 @@ export const AccountList = ({ closeModal }: AccountListProps) => {
           {isLedgerAvailable && (
             <Button
               color="secondaryBlue"
-              onClick={() => {
-                navigate(RouterPath.ImportAccountFromLedger);
+              onClick={evt => {
+                if (pathname === RouterPath.ImportAccountFromLedger) {
+                  closeModal(evt);
+                } else {
+                  navigate(RouterPath.ImportAccountFromLedger);
+                }
               }}
             >
               <Trans t={t}>Connect Ledger</Trans>
diff --git a/src/libs/ui/components/ledger-connection-view/ledger-connection-view.tsx b/src/libs/ui/components/ledger-connection-view/ledger-connection-view.tsx
index a23cc7b76..ff3dbf61f 100644
--- a/src/libs/ui/components/ledger-connection-view/ledger-connection-view.tsx
+++ b/src/libs/ui/components/ledger-connection-view/ledger-connection-view.tsx
@@ -14,12 +14,14 @@ interface INotConnectedLedgerProps {
   event: ILedgerEvent;
   onConnect: (tr?: LedgerTransport) => () => Promise<void>;
   closeNewLedgerWindowsAndClearState: () => void;
+  isAccountSelection?: boolean;
 }
 
 export const LedgerConnectionView: React.FC<INotConnectedLedgerProps> = ({
   event,
   onConnect,
-  closeNewLedgerWindowsAndClearState
+  closeNewLedgerWindowsAndClearState,
+  isAccountSelection = false
 }) => {
   const navigate = useTypedNavigate();
 
@@ -43,7 +45,12 @@ export const LedgerConnectionView: React.FC<INotConnectedLedgerProps> = ({
           )}
         />
       )}
-      renderContent={() => <LedgerEventView event={event} />}
+      renderContent={() => (
+        <LedgerEventView
+          event={event}
+          isAccountSelection={isAccountSelection}
+        />
+      )}
       renderFooter={renderLedgerFooter({
         event,
         onConnect,
diff --git a/src/libs/ui/components/ledger-event-view/ledger-event-view.tsx b/src/libs/ui/components/ledger-event-view/ledger-event-view.tsx
index b23f9a1d4..052f35897 100644
--- a/src/libs/ui/components/ledger-event-view/ledger-event-view.tsx
+++ b/src/libs/ui/components/ledger-event-view/ledger-event-view.tsx
@@ -14,9 +14,13 @@ import {
 
 interface ILedgerEventViewProps {
   event: ILedgerEvent;
+  isAccountSelection?: boolean;
 }
 
-export const LedgerEventView: React.FC<ILedgerEventViewProps> = ({ event }) => {
+export const LedgerEventView: React.FC<ILedgerEventViewProps> = ({
+  event,
+  isAccountSelection = false
+}) => {
   const [available, setAvailable] = useState(true);
 
   useEffect(() => {
@@ -47,5 +51,7 @@ export const LedgerEventView: React.FC<ILedgerEventViewProps> = ({ event }) => {
     return <LedgerErrorView event={event} />;
   }
 
-  return <NoConnectedLedger event={event} />;
+  return (
+    <NoConnectedLedger event={event} isAccountSelection={isAccountSelection} />
+  );
 };
diff --git a/src/libs/ui/components/ledger-footer/ledger-disconnected-footer.tsx b/src/libs/ui/components/ledger-footer/ledger-disconnected-footer.tsx
index 05e90f998..e5db4c210 100644
--- a/src/libs/ui/components/ledger-footer/ledger-disconnected-footer.tsx
+++ b/src/libs/ui/components/ledger-footer/ledger-disconnected-footer.tsx
@@ -76,7 +76,7 @@ export const LedgerDisconnectedFooter: React.FC<
                 }}
               >
                 <Trans t={t}>
-                  {ledgerTransport ? 'Continue with USB' : 'Connect via USB'}
+                  {ledgerTransport ? 'Continue' : 'Connect via USB'}
                 </Trans>
               </Button>
             )}
@@ -100,9 +100,7 @@ export const LedgerDisconnectedFooter: React.FC<
                 }}
               >
                 <Trans t={t}>
-                  {ledgerTransport
-                    ? 'Continue with Bluetooth'
-                    : 'Connect via Bluetooth'}
+                  {ledgerTransport ? 'Continue' : 'Connect via Bluetooth'}
                 </Trans>
               </Button>
             )}
diff --git a/src/libs/ui/components/no-connected-ledger/no-connected-ledger.tsx b/src/libs/ui/components/no-connected-ledger/no-connected-ledger.tsx
index e37bdef63..c7a857ef2 100644
--- a/src/libs/ui/components/no-connected-ledger/no-connected-ledger.tsx
+++ b/src/libs/ui/components/no-connected-ledger/no-connected-ledger.tsx
@@ -1,5 +1,5 @@
 import { Player } from '@lottiefiles/react-lottie-player';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
@@ -24,31 +24,38 @@ const ItemContainer = styled(AlignedFlexRow)`
   padding: 16px;
 `;
 
-const steps = [
-  {
-    id: 1,
-    text: 'Plug in your Ledger to the device'
-  },
-  {
-    id: 2,
-    text: 'Open Casper app on your Ledger'
-  },
-  {
-    id: 3,
-    text: 'Get back here to see txn details'
-  }
-];
-
 interface INoConnectedLedgerProps {
   event?: ILedgerEvent;
+  isAccountSelection: boolean;
 }
 
 export const NoConnectedLedger: React.FC<INoConnectedLedgerProps> = ({
-  event
+  event,
+  isAccountSelection
 }) => {
   const { t } = useTranslation();
   const isDarkMode = useIsDarkMode();
 
+  const steps = useMemo(
+    () => [
+      {
+        id: 1,
+        text: 'Connect Ledger to your device'
+      },
+      {
+        id: 2,
+        text: 'Open Casper app on your Ledger'
+      },
+      {
+        id: 3,
+        text: isAccountSelection
+          ? 'Get back here to see list of accounts'
+          : 'Get back here to see Txn hash'
+      }
+    ],
+    [isAccountSelection]
+  );
+
   useEffect(() => {
     const container = document.querySelector('#ms-container');
 
@@ -91,9 +98,7 @@ export const NoConnectedLedger: React.FC<INoConnectedLedgerProps> = ({
             <Trans t={t}>Open the Casper app on your Ledger device</Trans>
           )}
           {event.status === LedgerEventStatus.LedgerAskPermission && (
-            <Trans t={t}>
-              Now please provide permission to connect Ledger device
-            </Trans>
+            <Trans t={t}>Next, approve access to your Ledger device</Trans>
           )}
         </Typography>
       </ParagraphContainer>
@@ -108,7 +113,6 @@ export const NoConnectedLedger: React.FC<INoConnectedLedgerProps> = ({
         )}
         {event.status === LedgerEventStatus.Disconnected && (
           <Typography type="body" color="contentSecondary">
-            <Trans t={t}>to connect with Casper Wallet.</Trans>{' '}
             <Link
               color="contentAction"
               target="_blank"