From 1af16b6ca4d167713a16f11fca2b5868f7f73299 Mon Sep 17 00:00:00 2001
From: Tudor Morar <tudor.morar@multiversx.com>
Date: Tue, 26 Nov 2024 11:27:34 +0200
Subject: [PATCH 1/6] Ledger refactoring

---
 .../LedgerModalComponent.ts                   | 25 +++++---
 .../components/renderInModal.ts               |  2 +-
 .../ldegerModalComponent.styles.ts            | 64 +++++++++++++++++++
 3 files changed, 82 insertions(+), 9 deletions(-)

diff --git a/src/core/providers/helpers/ledger/components/LedgerModalComponent/LedgerModalComponent.ts b/src/core/providers/helpers/ledger/components/LedgerModalComponent/LedgerModalComponent.ts
index 6953a10..aa4d6a2 100644
--- a/src/core/providers/helpers/ledger/components/LedgerModalComponent/LedgerModalComponent.ts
+++ b/src/core/providers/helpers/ledger/components/LedgerModalComponent/LedgerModalComponent.ts
@@ -43,7 +43,7 @@ export class LedgerModalComponent extends LitElement {
   };
 
   @property({ type: Number }) private selectedIndex = 0;
-  @property({ type: Number }) private selectedAddress = '';
+  @property({ type: String }) private selectedAddress = '';
 
   static styles = ledgerStyles;
 
@@ -105,19 +105,28 @@ export class LedgerModalComponent extends LitElement {
         onClose: () => this.close(),
         title: html`Confirm`,
         subtitle: html`Confirm Ledger Address`,
-        body: html`<div data-testid="ledgerConfirmAddress">
-          <div>
+        body: html`<div
+          data-testid="ledgerConfirmAddress"
+          class="ledger-confirm-address-section"
+        >
+          <div class="ledger-confirm-address-section">
             <div>${confirmScreenData.confirmAddressText}</div>
             <div>${confirmScreenData.selectedAddress}</div>
           </div>
 
-          <div>
-            <div>${confirmScreenData?.authText}</div>
-            <div>${confirmScreenData?.data}</div>
-            <div>${confirmScreenData?.areShownText}</div>
+          <div class="ledger-confirm-address-section">
+            <div class="ledger-confirm-address-description">
+              ${confirmScreenData?.authText}
+            </div>
+            <div class="ledger-confirm-address-data">
+              ${confirmScreenData?.data}
+            </div>
+            <div class="ledger-confirm-address-description">
+              ${confirmScreenData?.areShownText}
+            </div>
           </div>
 
-          <div>
+          <div class="ledger-confirm-address-footer">
             <div>Select Approve on your device to confirm.</div>
 
             <div>
diff --git a/src/core/providers/helpers/ledger/components/LedgerModalComponent/components/renderInModal.ts b/src/core/providers/helpers/ledger/components/LedgerModalComponent/components/renderInModal.ts
index a06081d..4cbe2eb 100644
--- a/src/core/providers/helpers/ledger/components/LedgerModalComponent/components/renderInModal.ts
+++ b/src/core/providers/helpers/ledger/components/LedgerModalComponent/components/renderInModal.ts
@@ -17,7 +17,7 @@ export function renderInModal<T extends TemplateResult>({
         <div class="modal-header">
           <span class="close" @click=${onClose}>✕</span>
           <h2>${title}</h2>
-          <p>${subtitle}</p>
+          <h4>${subtitle}</h4>
         </div>
         ${body}
       </div>
diff --git a/src/core/providers/helpers/ledger/components/LedgerModalComponent/ldegerModalComponent.styles.ts b/src/core/providers/helpers/ledger/components/LedgerModalComponent/ldegerModalComponent.styles.ts
index 347fed7..29e09dd 100644
--- a/src/core/providers/helpers/ledger/components/LedgerModalComponent/ldegerModalComponent.styles.ts
+++ b/src/core/providers/helpers/ledger/components/LedgerModalComponent/ldegerModalComponent.styles.ts
@@ -103,4 +103,68 @@ export const ledgerStyles = css`
       transform: rotate(360deg);
     }
   }
+
+  .ledger-confirm-address {
+    text-align: center;
+    padding: 48px 16px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  @media (min-width: 768px) {
+    .ledger-confirm-address {
+      padding: 48px 40px;
+    }
+  }
+
+  .ledger-confirm-address-heading {
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 1;
+    margin-bottom: 12px;
+  }
+
+  .ledger-confirm-address-section {
+    line-height: 1.5;
+    margin-top: 40px;
+    font-size: 16px;
+  }
+
+  .ledger-confirm-address-section .ledger-confirm-address-description {
+    color: variables.$gray-700;
+  }
+
+  .ledger-confirm-address-section .ledger-confirm-address-data {
+    color: variables.$black;
+    margin: 8px 0;
+    word-break: break-word;
+    background-color: variables.$gray-500;
+    padding: 12px;
+    border-radius: 8px;
+  }
+
+  .ledger-confirm-address-footer {
+    font-size: 14px;
+    color: variables.$gray-700;
+    line-height: 1.5;
+    position: relative;
+    margin-top: 40px;
+    padding-top: 40px;
+  }
+
+  .ledger-confirm-address-footer::before {
+    height: 1px;
+    content: '';
+    left: 0;
+    bottom: 100%;
+    right: 0;
+    position: absolute;
+    background-color: variables.$gray-700;
+  }
+
+  .ledger-confirm-address-footer a {
+    color: variables.$primary;
+  }
 `;

From e37239b70f3474f5cd8d7f4ac7963a52e87f5e41 Mon Sep 17 00:00:00 2001
From: Tudor Morar <tudor.morar@multiversx.com>
Date: Tue, 26 Nov 2024 13:02:49 +0200
Subject: [PATCH 2/6] Major refactor

---
 .../LedgerModalComponent.ts                   |  67 +++----
 .../components/renderAccounts.ts              |   0
 .../components/renderInModal.ts               |   0
 .../helpers/getAuthTokenText.ts               |   0
 .../helpers/getLedgerVersionOptions.ts        |   0
 .../helpers/secondsToTimeString.ts            |   0
 .../tests/getLedgerVersionOptions.test.ts     |   0
 .../helpers/tests/secondsToTimeString.test.ts |   0
 .../ledgerConnectModal.styles.ts}             |   0
 .../ledgerConnectModal.types.ts               |  44 +++++
 .../ledger/components/initiateLedgerLogin.ts  |   6 +-
 .../helpers/ledger/createLedgerProvider.ts    | 165 ++++++++++++------
 .../providers/helpers/ledger/ledger.types.ts  |  39 +++++
 13 files changed, 220 insertions(+), 101 deletions(-)
 rename src/core/providers/helpers/ledger/components/{LedgerModalComponent => LedgerConnectModal}/LedgerModalComponent.ts (79%)
 rename src/core/providers/helpers/ledger/components/{LedgerModalComponent => LedgerConnectModal}/components/renderAccounts.ts (100%)
 rename src/core/providers/helpers/ledger/components/{LedgerModalComponent => LedgerConnectModal}/components/renderInModal.ts (100%)
 rename src/core/providers/helpers/ledger/components/{LedgerModalComponent => LedgerConnectModal}/helpers/getAuthTokenText.ts (100%)
 rename src/core/providers/helpers/ledger/components/{LedgerModalComponent => LedgerConnectModal}/helpers/getLedgerVersionOptions.ts (100%)
 rename src/core/providers/helpers/ledger/components/{LedgerModalComponent => LedgerConnectModal}/helpers/secondsToTimeString.ts (100%)
 rename src/core/providers/helpers/ledger/components/{LedgerModalComponent => LedgerConnectModal}/helpers/tests/getLedgerVersionOptions.test.ts (100%)
 rename src/core/providers/helpers/ledger/components/{LedgerModalComponent => LedgerConnectModal}/helpers/tests/secondsToTimeString.test.ts (100%)
 rename src/core/providers/helpers/ledger/components/{LedgerModalComponent/ldegerModalComponent.styles.ts => LedgerConnectModal/ledgerConnectModal.styles.ts} (100%)
 create mode 100644 src/core/providers/helpers/ledger/components/LedgerConnectModal/ledgerConnectModal.types.ts

diff --git a/src/core/providers/helpers/ledger/components/LedgerModalComponent/LedgerModalComponent.ts b/src/core/providers/helpers/ledger/components/LedgerConnectModal/LedgerModalComponent.ts
similarity index 79%
rename from src/core/providers/helpers/ledger/components/LedgerModalComponent/LedgerModalComponent.ts
rename to src/core/providers/helpers/ledger/components/LedgerConnectModal/LedgerModalComponent.ts
index aa4d6a2..194548d 100644
--- a/src/core/providers/helpers/ledger/components/LedgerModalComponent/LedgerModalComponent.ts
+++ b/src/core/providers/helpers/ledger/components/LedgerConnectModal/LedgerModalComponent.ts
@@ -1,42 +1,17 @@
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { ledgerStyles } from './ldegerModalComponent.styles';
-import { ILedgerAccount } from '../../ledger.types';
+import { ledgerStyles } from './ledgerConnectModal.styles';
 import { EventBus } from '../EventBus';
 import { renderAccounts } from './components/renderAccounts';
 import { renderInModal } from './components/renderInModal';
-
-export interface IConnectScreenData {
-  customContentMarkup?: string;
-  disabled?: boolean;
-  error?: string;
-}
-
-export interface IAccountScreenData {
-  accounts: ILedgerAccount[];
-  startIndex: number;
-  addressesPerPage: number;
-  isLoading: boolean;
-}
-
-export interface IConfirmScreenData {
-  data?: string;
-  selectedAddress: string;
-  confirmAddressText?: string;
-  authText?: string;
-  areShownText?: string | null;
-}
-
-export interface ILedgerModalData {
-  connectScreenData: IConnectScreenData | null;
-  accountScreenData: IAccountScreenData | null;
-  shouldClose?: true;
-  confirmScreenData: IConfirmScreenData | null;
-}
+import {
+  ILedgerConnectModalData,
+  LedgerConnectEventsEnum
+} from './ledgerConnectModal.types';
 
 @customElement('ledger-connect-modal')
-export class LedgerModalComponent extends LitElement {
-  @property({ type: Object }) public data: ILedgerModalData = {
+export class LedgerConnectModal extends LitElement {
+  @property({ type: Object }) public data: ILedgerConnectModalData = {
     accountScreenData: null,
     confirmScreenData: null,
     connectScreenData: {}
@@ -99,7 +74,6 @@ export class LedgerModalComponent extends LitElement {
       });
     }
 
-    // TODO: test simple ledger connection without token
     if (confirmScreenData) {
       return renderInModal({
         onClose: () => this.close(),
@@ -157,7 +131,8 @@ export class LedgerModalComponent extends LitElement {
 
         <button
           class="access-button"
-          @click=${() => this.eventBus.publish('CONNECT_DEVICE')}
+          @click=${() =>
+            this.eventBus.publish(LedgerConnectEventsEnum.CONNECT_DEVICE)}
           ?disabled=${connectScreenData?.disabled}
         >
           Connect Ledger
@@ -174,7 +149,7 @@ export class LedgerModalComponent extends LitElement {
   };
 
   private accessWallet() {
-    this.eventBus.publish('ACCESS_WALLET', {
+    this.eventBus.publish(LedgerConnectEventsEnum.ACCESS_WALLET, {
       addressIndex: this.selectedIndex,
       selectedAddress:
         this.selectedAddress ||
@@ -194,19 +169,15 @@ export class LedgerModalComponent extends LitElement {
   }
 
   async nextPage() {
-    this.eventBus.publish('PAGE_CHANGED', {
-      action: 'next'
-    });
+    this.eventBus.publish(LedgerConnectEventsEnum.NEXT_PAGE);
   }
 
   async prevPage() {
-    this.eventBus.publish('PAGE_CHANGED', {
-      action: 'prev'
-    });
+    this.eventBus.publish(LedgerConnectEventsEnum.PREV_PAGE);
   }
 
   close() {
-    this.eventBus.publish('CLOSE');
+    this.eventBus.publish(LedgerConnectEventsEnum.CLOSE);
     // allow a final update before close
     setTimeout(() => {
       if (this.parentNode) {
@@ -215,7 +186,7 @@ export class LedgerModalComponent extends LitElement {
     });
   }
 
-  private dataUpdate(payload: ILedgerModalData) {
+  private dataUpdate(payload: ILedgerConnectModalData) {
     if (payload.shouldClose) {
       return this.close();
     }
@@ -225,11 +196,17 @@ export class LedgerModalComponent extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.eventBus.subscribe('DATA_UPDATE', this.dataUpdate.bind(this));
+    this.eventBus.subscribe(
+      LedgerConnectEventsEnum.DATA_UPDATE,
+      this.dataUpdate.bind(this)
+    );
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.eventBus.unsubscribe('DATA_UPDATE', this.dataUpdate.bind(this));
+    this.eventBus.unsubscribe(
+      LedgerConnectEventsEnum.DATA_UPDATE,
+      this.dataUpdate.bind(this)
+    );
   }
 }
diff --git a/src/core/providers/helpers/ledger/components/LedgerModalComponent/components/renderAccounts.ts b/src/core/providers/helpers/ledger/components/LedgerConnectModal/components/renderAccounts.ts
similarity index 100%
rename from src/core/providers/helpers/ledger/components/LedgerModalComponent/components/renderAccounts.ts
rename to src/core/providers/helpers/ledger/components/LedgerConnectModal/components/renderAccounts.ts
diff --git a/src/core/providers/helpers/ledger/components/LedgerModalComponent/components/renderInModal.ts b/src/core/providers/helpers/ledger/components/LedgerConnectModal/components/renderInModal.ts
similarity index 100%
rename from src/core/providers/helpers/ledger/components/LedgerModalComponent/components/renderInModal.ts
rename to src/core/providers/helpers/ledger/components/LedgerConnectModal/components/renderInModal.ts
diff --git a/src/core/providers/helpers/ledger/components/LedgerModalComponent/helpers/getAuthTokenText.ts b/src/core/providers/helpers/ledger/components/LedgerConnectModal/helpers/getAuthTokenText.ts
similarity index 100%
rename from src/core/providers/helpers/ledger/components/LedgerModalComponent/helpers/getAuthTokenText.ts
rename to src/core/providers/helpers/ledger/components/LedgerConnectModal/helpers/getAuthTokenText.ts
diff --git a/src/core/providers/helpers/ledger/components/LedgerModalComponent/helpers/getLedgerVersionOptions.ts b/src/core/providers/helpers/ledger/components/LedgerConnectModal/helpers/getLedgerVersionOptions.ts
similarity index 100%
rename from src/core/providers/helpers/ledger/components/LedgerModalComponent/helpers/getLedgerVersionOptions.ts
rename to src/core/providers/helpers/ledger/components/LedgerConnectModal/helpers/getLedgerVersionOptions.ts
diff --git a/src/core/providers/helpers/ledger/components/LedgerModalComponent/helpers/secondsToTimeString.ts b/src/core/providers/helpers/ledger/components/LedgerConnectModal/helpers/secondsToTimeString.ts
similarity index 100%
rename from src/core/providers/helpers/ledger/components/LedgerModalComponent/helpers/secondsToTimeString.ts
rename to src/core/providers/helpers/ledger/components/LedgerConnectModal/helpers/secondsToTimeString.ts
diff --git a/src/core/providers/helpers/ledger/components/LedgerModalComponent/helpers/tests/getLedgerVersionOptions.test.ts b/src/core/providers/helpers/ledger/components/LedgerConnectModal/helpers/tests/getLedgerVersionOptions.test.ts
similarity index 100%
rename from src/core/providers/helpers/ledger/components/LedgerModalComponent/helpers/tests/getLedgerVersionOptions.test.ts
rename to src/core/providers/helpers/ledger/components/LedgerConnectModal/helpers/tests/getLedgerVersionOptions.test.ts
diff --git a/src/core/providers/helpers/ledger/components/LedgerModalComponent/helpers/tests/secondsToTimeString.test.ts b/src/core/providers/helpers/ledger/components/LedgerConnectModal/helpers/tests/secondsToTimeString.test.ts
similarity index 100%
rename from src/core/providers/helpers/ledger/components/LedgerModalComponent/helpers/tests/secondsToTimeString.test.ts
rename to src/core/providers/helpers/ledger/components/LedgerConnectModal/helpers/tests/secondsToTimeString.test.ts
diff --git a/src/core/providers/helpers/ledger/components/LedgerModalComponent/ldegerModalComponent.styles.ts b/src/core/providers/helpers/ledger/components/LedgerConnectModal/ledgerConnectModal.styles.ts
similarity index 100%
rename from src/core/providers/helpers/ledger/components/LedgerModalComponent/ldegerModalComponent.styles.ts
rename to src/core/providers/helpers/ledger/components/LedgerConnectModal/ledgerConnectModal.styles.ts
diff --git a/src/core/providers/helpers/ledger/components/LedgerConnectModal/ledgerConnectModal.types.ts b/src/core/providers/helpers/ledger/components/LedgerConnectModal/ledgerConnectModal.types.ts
new file mode 100644
index 0000000..81c3568
--- /dev/null
+++ b/src/core/providers/helpers/ledger/components/LedgerConnectModal/ledgerConnectModal.types.ts
@@ -0,0 +1,44 @@
+// types here need to be synced with the types in sdk-dapp-core ledger.types.ts
+
+export interface IConnectScreenData {
+  customContentMarkup?: string;
+  disabled?: boolean;
+  error?: string;
+}
+
+export interface IAccountScreenData {
+  accounts: ILedgerAccount[];
+  startIndex: number;
+  addressesPerPage: number;
+  isLoading: boolean;
+}
+
+export interface IConfirmScreenData {
+  data?: string;
+  selectedAddress: string;
+  confirmAddressText?: string;
+  authText?: string;
+  areShownText?: string | null;
+}
+
+export interface ILedgerConnectModalData {
+  connectScreenData: IConnectScreenData | null;
+  accountScreenData: IAccountScreenData | null;
+  shouldClose?: true;
+  confirmScreenData: IConfirmScreenData | null;
+}
+
+export interface ILedgerAccount {
+  address: string;
+  balance: string;
+  index: number;
+}
+
+export enum LedgerConnectEventsEnum {
+  'CONNECT_DEVICE' = 'CONNECT_DEVICE',
+  'ACCESS_WALLET' = 'ACCESS_WALLET',
+  'NEXT_PAGE' = 'NEXT_PAGE',
+  'PREV_PAGE' = 'PREV_PAGE',
+  'CLOSE' = 'CLOSE',
+  'DATA_UPDATE' = 'DATA_UPDATE'
+}
diff --git a/src/core/providers/helpers/ledger/components/initiateLedgerLogin.ts b/src/core/providers/helpers/ledger/components/initiateLedgerLogin.ts
index ab3b292..8de0edd 100644
--- a/src/core/providers/helpers/ledger/components/initiateLedgerLogin.ts
+++ b/src/core/providers/helpers/ledger/components/initiateLedgerLogin.ts
@@ -1,13 +1,13 @@
-import { LedgerModalComponent } from './LedgerModalComponent/LedgerModalComponent';
+import { LedgerConnectModal } from './LedgerConnectModal/LedgerModalComponent';
 
 export async function initiateLedgerLogin() {
   if (!customElements.get('ledger-connect-modal')) {
-    customElements.define('ledger-connect-modal', LedgerModalComponent);
+    customElements.define('ledger-connect-modal', LedgerConnectModal);
   }
 
   const modalElement = document.createElement(
     'ledger-connect-modal'
-  ) as LedgerModalComponent;
+  ) as LedgerConnectModal;
 
   document.body.appendChild(modalElement);
 }
diff --git a/src/core/providers/helpers/ledger/createLedgerProvider.ts b/src/core/providers/helpers/ledger/createLedgerProvider.ts
index ee4aa27..fe26b17 100644
--- a/src/core/providers/helpers/ledger/createLedgerProvider.ts
+++ b/src/core/providers/helpers/ledger/createLedgerProvider.ts
@@ -9,42 +9,56 @@ import { setLedgerLogin } from 'store/actions/loginInfo/loginInfoActions';
 import { fetchAccount } from 'utils/account/fetchAccount';
 import { EventBus } from './components/EventBus';
 import { initiateLedgerLogin } from './components/initiateLedgerLogin';
-import { getAuthTokenText } from './components/LedgerModalComponent/helpers/getAuthTokenText';
+import { getAuthTokenText } from './components/LedgerConnectModal/helpers/getAuthTokenText';
+import { getLedgerErrorCodes } from './getLedgerErrorCodes';
+import { getLedgerProvider } from './getLedgerProvider';
 import {
   IAccountScreenData,
   IConfirmScreenData,
   IConnectScreenData,
-  ILedgerModalData
-} from './components/LedgerModalComponent/LedgerModalComponent';
-import { getLedgerErrorCodes } from './getLedgerErrorCodes';
-import { getLedgerProvider } from './getLedgerProvider';
+  ILedgerConnectModalData,
+  LedgerConnectEventsEnum
+} from './ledger.types';
 import { ILedgerAccount } from './ledger.types';
 
 const failInitializeErrorText = 'Check if the MultiversX App is open on Ledger';
 const addressesPerPage = 10;
 let allAccounts: ILedgerAccount[] = [];
 
-let accountScreenData: IAccountScreenData = {
+const initialAcccountScreenData: IAccountScreenData = {
   accounts: allAccounts,
   startIndex: 0,
   addressesPerPage,
   isLoading: true
 };
 
-let confirmScreenData: IConfirmScreenData = {
+let accountScreenData = initialAcccountScreenData;
+
+const initialConfirmScreenData: IConfirmScreenData = {
   selectedAddress: ''
 };
 
-let connectScreenData: IConnectScreenData = {};
+let confirmScreenData = initialConfirmScreenData;
+
+const initialConnectScreenData: IConnectScreenData = {};
 
-const initialData: ILedgerModalData = {
-  connectScreenData: {},
+let connectScreenData = initialConnectScreenData;
+
+const initialData: ILedgerConnectModalData = {
+  connectScreenData: initialConnectScreenData,
   accountScreenData: null,
   confirmScreenData: null
 };
 
 let data = initialData;
 
+function resetData() {
+  accountScreenData = initialAcccountScreenData;
+  confirmScreenData = initialConfirmScreenData;
+  connectScreenData = initialConnectScreenData;
+  data = initialData;
+}
+
 export async function createLedgerProvider(): Promise<IProvider | null> {
   const shouldInitiateLogin = !getIsLoggedIn();
   const eventBus = EventBus.getInstance();
@@ -60,7 +74,18 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
     };
     data.confirmScreenData = null;
     data.accountScreenData = null;
-    eventBus.publish('DATA_UPDATE', data);
+    eventBus.publish(LedgerConnectEventsEnum.DATA_UPDATE, data);
+  };
+
+  const updateAccountScreen = (members: Partial<IAccountScreenData>) => {
+    accountScreenData = {
+      ...accountScreenData,
+      ...members
+    };
+    data.confirmScreenData = null;
+    data.accountScreenData = accountScreenData;
+
+    eventBus.publish(LedgerConnectEventsEnum.DATA_UPDATE, data);
   };
 
   const { ledgerProvider: provider, ledgerConfig } = await new Promise<
@@ -70,9 +95,15 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
     const onCancel = () => reject('User cancelled login');
 
     try {
+      updateAccountScreen({
+        isLoading: true
+      });
+
       const data = await getLedgerProvider();
-      eventBus.unsubscribe('CONNECT_DEVICE', onRetry);
-      eventBus.unsubscribe('CLOSE', onCancel);
+
+      eventBus.unsubscribe(LedgerConnectEventsEnum.CONNECT_DEVICE, onRetry);
+
+      eventBus.unsubscribe(LedgerConnectEventsEnum.CLOSE, onCancel);
       resolve(data);
     } catch (err) {
       if (!shouldInitiateLogin) {
@@ -85,9 +116,11 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
         error: errorMessage ?? defaultErrorMessage ?? failInitializeErrorText
       });
 
-      eventBus.publish('DATA_UPDATE', data);
-      eventBus.subscribe('CONNECT_DEVICE', onRetry);
-      eventBus.subscribe('CLOSE', onCancel);
+      eventBus.publish(LedgerConnectEventsEnum.DATA_UPDATE, data);
+
+      eventBus.subscribe(LedgerConnectEventsEnum.CONNECT_DEVICE, onRetry);
+
+      eventBus.subscribe(LedgerConnectEventsEnum.CLOSE, onCancel);
       // if user rejected on ledger search for error and reject
     }
   });
@@ -116,18 +149,6 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
       version: ledgerConfig.version
     });
 
-    const eventBus = EventBus.getInstance();
-
-    const updateAccountScreen = (members: Partial<IAccountScreenData>) => {
-      accountScreenData = {
-        ...accountScreenData,
-        ...members
-      };
-      data.confirmScreenData = null;
-      data.accountScreenData = accountScreenData;
-      eventBus.publish('DATA_UPDATE', data);
-    };
-
     const updateConfirmScreen = (members: Partial<IConfirmScreenData>) => {
       confirmScreenData = {
         ...authData,
@@ -136,7 +157,8 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
       };
       data.accountScreenData = null;
       data.confirmScreenData = confirmScreenData;
-      eventBus.publish('DATA_UPDATE', data);
+
+      eventBus.publish(LedgerConnectEventsEnum.DATA_UPDATE, data);
     };
 
     const updateAccounts = async () => {
@@ -229,42 +251,76 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
     }>(async (resolve, reject) => {
       const closeComponent = () => {
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        eventBus.unsubscribe('CLOSE', onCancel);
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        eventBus.unsubscribe('PAGE_CHANGED', onPageChanged);
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        eventBus.unsubscribe('ACCESS_WALLET', onAccessWallet);
-        data = {
-          ...initialData,
+        eventBus.unsubscribe(LedgerConnectEventsEnum.CLOSE, onCancel);
+
+        eventBus.unsubscribe(
+          LedgerConnectEventsEnum.NEXT_PAGE,
+          // eslint-disable-next-line @typescript-eslint/no-use-before-define
+          onNextPageChanged
+        );
+
+        eventBus.unsubscribe(
+          LedgerConnectEventsEnum.PREV_PAGE,
+          // eslint-disable-next-line @typescript-eslint/no-use-before-define
+          onPrevPageChanged
+        );
+
+        eventBus.unsubscribe(
+          LedgerConnectEventsEnum.ACCESS_WALLET,
+          // eslint-disable-next-line @typescript-eslint/no-use-before-define
+          onAccessWallet
+        );
+
+        resetData();
+
+        eventBus.publish(LedgerConnectEventsEnum.DATA_UPDATE, {
+          ...data,
           shouldClose: true
-        };
-        eventBus.publish('DATA_UPDATE', data);
+        });
       };
 
       const onCancel = async () => {
         await updateAccounts();
-        eventBus.unsubscribe('CLOSE', onCancel);
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        eventBus.unsubscribe('PAGE_CHANGED', onPageChanged);
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        eventBus.unsubscribe('ACCESS_WALLET', onAccessWallet);
+
+        eventBus.unsubscribe(LedgerConnectEventsEnum.CLOSE, onCancel);
+
+        eventBus.unsubscribe(
+          LedgerConnectEventsEnum.NEXT_PAGE,
+          // eslint-disable-next-line @typescript-eslint/no-use-before-define
+          onNextPageChanged
+        );
+
+        eventBus.unsubscribe(
+          LedgerConnectEventsEnum.PREV_PAGE,
+          // eslint-disable-next-line @typescript-eslint/no-use-before-define
+          onPrevPageChanged
+        );
+
+        eventBus.unsubscribe(
+          LedgerConnectEventsEnum.ACCESS_WALLET,
+          // eslint-disable-next-line @typescript-eslint/no-use-before-define
+          onAccessWallet
+        );
         reject('User cancelled login');
       };
 
-      const onPageChanged = async (payload: { action: 'next' | 'prev' }) => {
+      const onNextPageChanged = async () => {
         const { startIndex } = accountScreenData;
+        accountScreenData.startIndex = startIndex + addressesPerPage;
+        await updateAccounts();
+      };
 
-        if (payload.action === 'next') {
-          accountScreenData.startIndex = startIndex + addressesPerPage;
-        }
-        if (payload.action === 'prev' && startIndex > 0) {
+      const onPrevPageChanged = async () => {
+        const { startIndex } = accountScreenData;
+
+        if (startIndex > 0) {
           accountScreenData.startIndex = Math.max(
             0,
             startIndex - addressesPerPage
           );
-        }
 
-        await updateAccounts();
+          await updateAccounts();
+        }
       };
 
       const onAccessWallet = async function tryAccessWallet(payload: {
@@ -307,9 +363,12 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
         }
       };
 
-      eventBus.subscribe('CLOSE', onCancel);
-      eventBus.subscribe('PAGE_CHANGED', onPageChanged);
-      eventBus.subscribe('ACCESS_WALLET', onAccessWallet);
+      eventBus.subscribe(LedgerConnectEventsEnum.CLOSE, onCancel);
+
+      eventBus.subscribe(LedgerConnectEventsEnum.NEXT_PAGE, onNextPageChanged);
+      eventBus.subscribe(LedgerConnectEventsEnum.PREV_PAGE, onPrevPageChanged);
+
+      eventBus.subscribe(LedgerConnectEventsEnum.ACCESS_WALLET, onAccessWallet);
     });
 
     const { version, dataEnabled } = ledgerConfig;
diff --git a/src/core/providers/helpers/ledger/ledger.types.ts b/src/core/providers/helpers/ledger/ledger.types.ts
index 7283fd0..5e69850 100644
--- a/src/core/providers/helpers/ledger/ledger.types.ts
+++ b/src/core/providers/helpers/ledger/ledger.types.ts
@@ -1,5 +1,44 @@
+// types here need to be synced with the types in sdk-dapp-core-ui
+
+export interface IConnectScreenData {
+  customContentMarkup?: string;
+  disabled?: boolean;
+  error?: string;
+}
+
+export interface IAccountScreenData {
+  accounts: ILedgerAccount[];
+  startIndex: number;
+  addressesPerPage: number;
+  isLoading: boolean;
+}
+
+export interface IConfirmScreenData {
+  data?: string;
+  selectedAddress: string;
+  confirmAddressText?: string;
+  authText?: string;
+  areShownText?: string | null;
+}
+
+export interface ILedgerConnectModalData {
+  connectScreenData: IConnectScreenData | null;
+  accountScreenData: IAccountScreenData | null;
+  shouldClose?: true;
+  confirmScreenData: IConfirmScreenData | null;
+}
+
 export interface ILedgerAccount {
   address: string;
   balance: string;
   index: number;
 }
+
+export enum LedgerConnectEventsEnum {
+  'CONNECT_DEVICE' = 'CONNECT_DEVICE',
+  'ACCESS_WALLET' = 'ACCESS_WALLET',
+  'NEXT_PAGE' = 'NEXT_PAGE',
+  'PREV_PAGE' = 'PREV_PAGE',
+  'CLOSE' = 'CLOSE',
+  'DATA_UPDATE' = 'DATA_UPDATE'
+}

From 9d7cb760b84d75299853e274fbee03833c37ea03 Mon Sep 17 00:00:00 2001
From: Tudor Morar <tudor.morar@multiversx.com>
Date: Tue, 26 Nov 2024 15:37:04 +0200
Subject: [PATCH 3/6] Partially working

---
 .../helpers/ledger/createLedgerProvider.ts    | 181 ++++--------------
 .../helpers/LedgerConnectStateManager.ts      | 148 ++++++++++++++
 2 files changed, 190 insertions(+), 139 deletions(-)
 create mode 100644 src/core/providers/helpers/ledger/helpers/LedgerConnectStateManager.ts

diff --git a/src/core/providers/helpers/ledger/createLedgerProvider.ts b/src/core/providers/helpers/ledger/createLedgerProvider.ts
index fe26b17..8899080 100644
--- a/src/core/providers/helpers/ledger/createLedgerProvider.ts
+++ b/src/core/providers/helpers/ledger/createLedgerProvider.ts
@@ -12,82 +12,21 @@ import { initiateLedgerLogin } from './components/initiateLedgerLogin';
 import { getAuthTokenText } from './components/LedgerConnectModal/helpers/getAuthTokenText';
 import { getLedgerErrorCodes } from './getLedgerErrorCodes';
 import { getLedgerProvider } from './getLedgerProvider';
-import {
-  IAccountScreenData,
-  IConfirmScreenData,
-  IConnectScreenData,
-  ILedgerConnectModalData,
-  LedgerConnectEventsEnum
-} from './ledger.types';
+import { LedgerConnectStateManager } from './helpers/LedgerConnectStateManager';
+import { LedgerConnectEventsEnum } from './ledger.types';
 import { ILedgerAccount } from './ledger.types';
 
 const failInitializeErrorText = 'Check if the MultiversX App is open on Ledger';
-const addressesPerPage = 10;
-let allAccounts: ILedgerAccount[] = [];
-
-const initialAcccountScreenData: IAccountScreenData = {
-  accounts: allAccounts,
-  startIndex: 0,
-  addressesPerPage,
-  isLoading: true
-};
-
-let accountScreenData = initialAcccountScreenData;
-
-const initialConfirmScreenData: IConfirmScreenData = {
-  selectedAddress: ''
-};
-
-let confirmScreenData = initialConfirmScreenData;
-
-const initialConnectScreenData: IConnectScreenData = {};
-
-let connectScreenData = initialConnectScreenData;
-
-const initialData: ILedgerConnectModalData = {
-  connectScreenData: initialConnectScreenData,
-  accountScreenData: null,
-  confirmScreenData: null
-};
-
-let data = initialData;
-
-function resetData() {
-  accountScreenData = initialAcccountScreenData;
-  confirmScreenData = initialConfirmScreenData;
-  connectScreenData = initialConnectScreenData;
-  data = initialData;
-}
 
 export async function createLedgerProvider(): Promise<IProvider | null> {
   const shouldInitiateLogin = !getIsLoggedIn();
   const eventBus = EventBus.getInstance();
+  const manager = LedgerConnectStateManager.getInstance(eventBus);
 
   if (shouldInitiateLogin) {
     initiateLedgerLogin();
   }
 
-  const updateConnectScreen = (members: Partial<IConnectScreenData>) => {
-    connectScreenData = {
-      ...connectScreenData,
-      ...members
-    };
-    data.confirmScreenData = null;
-    data.accountScreenData = null;
-    eventBus.publish(LedgerConnectEventsEnum.DATA_UPDATE, data);
-  };
-
-  const updateAccountScreen = (members: Partial<IAccountScreenData>) => {
-    accountScreenData = {
-      ...accountScreenData,
-      ...members
-    };
-    data.confirmScreenData = null;
-    data.accountScreenData = accountScreenData;
-
-    eventBus.publish(LedgerConnectEventsEnum.DATA_UPDATE, data);
-  };
-
   const { ledgerProvider: provider, ledgerConfig } = await new Promise<
     Awaited<ReturnType<typeof getLedgerProvider>>
   >(async function buildLedgerProvider(resolve, reject) {
@@ -95,14 +34,13 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
     const onCancel = () => reject('User cancelled login');
 
     try {
-      updateAccountScreen({
+      manager.updateAccountScreen({
         isLoading: true
       });
 
       const data = await getLedgerProvider();
 
       eventBus.unsubscribe(LedgerConnectEventsEnum.CONNECT_DEVICE, onRetry);
-
       eventBus.unsubscribe(LedgerConnectEventsEnum.CLOSE, onCancel);
       resolve(data);
     } catch (err) {
@@ -111,17 +49,13 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
       }
 
       const { errorMessage, defaultErrorMessage } = getLedgerErrorCodes(err);
-
-      updateConnectScreen({
+      manager.updateConnectScreen({
         error: errorMessage ?? defaultErrorMessage ?? failInitializeErrorText
       });
 
-      eventBus.publish(LedgerConnectEventsEnum.DATA_UPDATE, data);
-
+      // eventBus.publish(LedgerConnectEventsEnum.DATA_UPDATE, data);
       eventBus.subscribe(LedgerConnectEventsEnum.CONNECT_DEVICE, onRetry);
-
       eventBus.subscribe(LedgerConnectEventsEnum.CLOSE, onCancel);
-      // if user rejected on ledger search for error and reject
     }
   });
 
@@ -149,20 +83,9 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
       version: ledgerConfig.version
     });
 
-    const updateConfirmScreen = (members: Partial<IConfirmScreenData>) => {
-      confirmScreenData = {
-        ...authData,
-        ...confirmScreenData,
-        ...members
-      };
-      data.accountScreenData = null;
-      data.confirmScreenData = confirmScreenData;
-
-      eventBus.publish(LedgerConnectEventsEnum.DATA_UPDATE, data);
-    };
-
     const updateAccounts = async () => {
-      const { startIndex } = accountScreenData;
+      const { startIndex } = manager.getAccountScreenData();
+      const allAccounts = manager.getAllAccounts();
 
       const hasData = allAccounts.some(
         ({ index, balance }) =>
@@ -171,18 +94,18 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
 
       const slicedAccounts = allAccounts.slice(
         startIndex,
-        startIndex + addressesPerPage
+        startIndex + manager.addressesPerPage
       );
 
       if (hasData) {
-        return updateAccountScreen({
+        return manager.updateAccountScreen({
           accounts: slicedAccounts,
           isLoading: false
         });
       }
 
       if (slicedAccounts.length === 0) {
-        updateAccountScreen({
+        manager.updateAccountScreen({
           isLoading: true
         });
       }
@@ -190,7 +113,7 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
       try {
         const accountsArray = await provider.getAccounts(
           startIndex,
-          addressesPerPage
+          manager.addressesPerPage
         );
 
         const accountsWithBalance: ILedgerAccount[] = accountsArray.map(
@@ -203,12 +126,14 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
           }
         );
 
-        allAccounts = [...allAccounts, ...accountsWithBalance];
+        const newAllAccounts = [...allAccounts, ...accountsWithBalance];
 
-        updateAccountScreen({
-          accounts: allAccounts.slice(
+        manager.updateAllAccounts(newAllAccounts);
+
+        manager.updateAccountScreen({
+          accounts: newAllAccounts.slice(
             startIndex,
-            startIndex + addressesPerPage
+            startIndex + manager.addressesPerPage
           ),
           isLoading: false
         });
@@ -224,17 +149,22 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
             return;
           }
           const accountArrayIndex = index + startIndex;
-          allAccounts[accountArrayIndex].balance = account.balance;
+          newAllAccounts[accountArrayIndex].balance = account.balance;
         });
 
-        updateAccountScreen({
-          accounts: allAccounts.slice(startIndex, startIndex + addressesPerPage)
+        manager.updateAllAccounts(newAllAccounts);
+
+        manager.updateAccountScreen({
+          accounts: newAllAccounts.slice(
+            startIndex,
+            startIndex + manager.addressesPerPage
+          )
         });
       } catch (error) {
-        updateAccountScreen({
+        manager.updateAccountScreen({
           accounts: allAccounts.slice(
             startIndex,
-            startIndex + addressesPerPage
+            startIndex + manager.addressesPerPage
           ),
           isLoading: false
         });
@@ -249,74 +179,48 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
       signature: string;
       addressIndex: number;
     }>(async (resolve, reject) => {
-      const closeComponent = () => {
+      const unsubscribeFromEvents = () => {
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
         eventBus.unsubscribe(LedgerConnectEventsEnum.CLOSE, onCancel);
-
         eventBus.unsubscribe(
           LedgerConnectEventsEnum.NEXT_PAGE,
           // eslint-disable-next-line @typescript-eslint/no-use-before-define
           onNextPageChanged
         );
-
         eventBus.unsubscribe(
           LedgerConnectEventsEnum.PREV_PAGE,
           // eslint-disable-next-line @typescript-eslint/no-use-before-define
           onPrevPageChanged
         );
-
         eventBus.unsubscribe(
           LedgerConnectEventsEnum.ACCESS_WALLET,
           // eslint-disable-next-line @typescript-eslint/no-use-before-define
           onAccessWallet
         );
+      };
 
-        resetData();
-
-        eventBus.publish(LedgerConnectEventsEnum.DATA_UPDATE, {
-          ...data,
-          shouldClose: true
-        });
+      const closeComponent = () => {
+        manager.closeAndReset();
       };
 
       const onCancel = async () => {
         await updateAccounts();
-
-        eventBus.unsubscribe(LedgerConnectEventsEnum.CLOSE, onCancel);
-
-        eventBus.unsubscribe(
-          LedgerConnectEventsEnum.NEXT_PAGE,
-          // eslint-disable-next-line @typescript-eslint/no-use-before-define
-          onNextPageChanged
-        );
-
-        eventBus.unsubscribe(
-          LedgerConnectEventsEnum.PREV_PAGE,
-          // eslint-disable-next-line @typescript-eslint/no-use-before-define
-          onPrevPageChanged
-        );
-
-        eventBus.unsubscribe(
-          LedgerConnectEventsEnum.ACCESS_WALLET,
-          // eslint-disable-next-line @typescript-eslint/no-use-before-define
-          onAccessWallet
-        );
+        unsubscribeFromEvents();
         reject('User cancelled login');
       };
 
       const onNextPageChanged = async () => {
-        const { startIndex } = accountScreenData;
-        accountScreenData.startIndex = startIndex + addressesPerPage;
+        const { startIndex } = manager.getAccountScreenData();
+        manager.updateStartIndex(startIndex + manager.addressesPerPage);
         await updateAccounts();
       };
 
       const onPrevPageChanged = async () => {
-        const { startIndex } = accountScreenData;
+        const { startIndex } = manager.getAccountScreenData();
 
         if (startIndex > 0) {
-          accountScreenData.startIndex = Math.max(
-            0,
-            startIndex - addressesPerPage
+          manager.updateStartIndex(
+            Math.max(0, startIndex - manager.addressesPerPage)
           );
 
           await updateAccounts();
@@ -327,7 +231,8 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
         addressIndex: number;
         selectedAddress: string;
       }) {
-        updateConfirmScreen({
+        manager.updateConfirmScreen({
+          ...authData,
           selectedAddress: payload.selectedAddress
         });
 
@@ -352,11 +257,11 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
           });
         } catch (err) {
           console.error('User rejected login:', err);
-          const shouldGoBack = Boolean(confirmScreenData);
+          const shouldGoBack = Boolean(manager.getConfirmScreenData());
           if (shouldGoBack) {
             await updateAccounts();
           }
-          const shouldClose = Boolean(accountScreenData);
+          const shouldClose = Boolean(manager.getAccountScreenData());
           if (shouldClose) {
             closeComponent();
           }
@@ -364,10 +269,8 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
       };
 
       eventBus.subscribe(LedgerConnectEventsEnum.CLOSE, onCancel);
-
       eventBus.subscribe(LedgerConnectEventsEnum.NEXT_PAGE, onNextPageChanged);
       eventBus.subscribe(LedgerConnectEventsEnum.PREV_PAGE, onPrevPageChanged);
-
       eventBus.subscribe(LedgerConnectEventsEnum.ACCESS_WALLET, onAccessWallet);
     });
 
diff --git a/src/core/providers/helpers/ledger/helpers/LedgerConnectStateManager.ts b/src/core/providers/helpers/ledger/helpers/LedgerConnectStateManager.ts
new file mode 100644
index 0000000..1a33ecd
--- /dev/null
+++ b/src/core/providers/helpers/ledger/helpers/LedgerConnectStateManager.ts
@@ -0,0 +1,148 @@
+import {
+  IAccountScreenData,
+  IConfirmScreenData,
+  IConnectScreenData,
+  ILedgerAccount,
+  ILedgerConnectModalData,
+  LedgerConnectEventsEnum
+} from '../ledger.types';
+
+export interface IEventBus {
+  publish(event: string, data: any): void;
+}
+
+export class LedgerConnectStateManager<T extends IEventBus = IEventBus> {
+  private static instance: LedgerConnectStateManager<IEventBus> | null = null;
+  public readonly addressesPerPage = 10;
+
+  private eventBus: T;
+  private allAccounts: ILedgerAccount[] = [];
+
+  private initialAccountScreenData: IAccountScreenData = {
+    accounts: this.allAccounts,
+    startIndex: 0,
+    addressesPerPage: this.addressesPerPage,
+    isLoading: true
+  };
+
+  private initialConfirmScreenData: IConfirmScreenData = {
+    selectedAddress: ''
+  };
+
+  private initialConnectScreenData: IConnectScreenData = {};
+
+  private initialData: ILedgerConnectModalData = {
+    connectScreenData: this.initialConnectScreenData,
+    accountScreenData: null,
+    confirmScreenData: null
+  };
+
+  private accountScreenData: IAccountScreenData = {
+    ...this.initialAccountScreenData
+  };
+  private confirmScreenData: IConfirmScreenData = {
+    ...this.initialConfirmScreenData
+  };
+  private connectScreenData: IConnectScreenData = {
+    ...this.initialConnectScreenData
+  };
+  private data: ILedgerConnectModalData = { ...this.initialData };
+
+  private constructor(eventBus: T) {
+    this.eventBus = eventBus;
+    this.resetData();
+  }
+
+  public static getInstance<U extends IEventBus>(
+    eventBus: U
+  ): LedgerConnectStateManager<U> {
+    if (!LedgerConnectStateManager.instance) {
+      LedgerConnectStateManager.instance = new LedgerConnectStateManager(
+        eventBus
+      );
+    }
+    return LedgerConnectStateManager.instance as LedgerConnectStateManager<U>;
+  }
+
+  public updateAllAccounts(accounts: ILedgerAccount[]): void {
+    this.allAccounts = accounts;
+    this.accountScreenData.accounts = accounts;
+  }
+
+  public updateStartIndex(startIndex: number): void {
+    this.accountScreenData.startIndex = startIndex;
+  }
+
+  private resetData(): void {
+    this.accountScreenData = { ...this.initialAccountScreenData };
+    this.confirmScreenData = { ...this.initialConfirmScreenData };
+    this.connectScreenData = { ...this.initialConnectScreenData };
+    this.data = { ...this.initialData };
+  }
+
+  public closeAndReset(): void {
+    this.resetData();
+    this.eventBus.publish(LedgerConnectEventsEnum.CLOSE, {
+      ...this.data,
+      shouldClose: true
+    });
+  }
+
+  public updateConnectScreen(members: Partial<IConnectScreenData>): void {
+    this.connectScreenData = {
+      ...this.connectScreenData,
+      ...members
+    };
+    this.data.confirmScreenData = null;
+    this.data.accountScreenData = null;
+    this.notifyDataUpdate();
+  }
+
+  public updateAccountScreen(members: Partial<IAccountScreenData>): void {
+    this.accountScreenData = {
+      ...this.accountScreenData,
+      ...members
+    };
+    this.data.confirmScreenData = null;
+    this.data.accountScreenData = this.accountScreenData;
+    this.notifyDataUpdate();
+  }
+
+  public updateConfirmScreen(members: Partial<IConfirmScreenData>): void {
+    this.confirmScreenData = {
+      ...this.confirmScreenData,
+      ...members
+    };
+    this.data.accountScreenData = null;
+    this.data.confirmScreenData = this.confirmScreenData;
+    this.notifyDataUpdate();
+  }
+
+  private notifyDataUpdate(): void {
+    this.eventBus.publish(LedgerConnectEventsEnum.DATA_UPDATE, this.data);
+  }
+
+  public getAccountScreenData(): IAccountScreenData {
+    return this.accountScreenData ?? this.initialAccountScreenData;
+  }
+
+  public getConfirmScreenData(): IConfirmScreenData {
+    return this.confirmScreenData ?? this.initialConfirmScreenData;
+  }
+
+  public getConnectScreenData(): IConnectScreenData {
+    return this.connectScreenData ?? this.initialConnectScreenData;
+  }
+
+  public getAllAccounts(): ILedgerAccount[] {
+    return this.allAccounts;
+  }
+
+  public static hasInstance(): boolean {
+    return this.instance !== null;
+  }
+
+  public static resetInstance(): void {
+    this.instance = null;
+  }
+}

From 1655ba24a40c0fe23870be15455aa2ecc6435d6d Mon Sep 17 00:00:00 2001
From: Tudor Morar <tudor.morar@multiversx.com>
Date: Tue, 26 Nov 2024 16:23:07 +0200
Subject: [PATCH 4/6] Minor updates

---
 .../helpers/LedgerConnectStateManager.ts      | 38 ++++++++-----------
 1 file changed, 15 insertions(+), 23 deletions(-)

diff --git a/src/core/providers/helpers/ledger/helpers/LedgerConnectStateManager.ts b/src/core/providers/helpers/ledger/helpers/LedgerConnectStateManager.ts
index 1a33ecd..df36443 100644
--- a/src/core/providers/helpers/ledger/helpers/LedgerConnectStateManager.ts
+++ b/src/core/providers/helpers/ledger/helpers/LedgerConnectStateManager.ts
@@ -18,34 +18,38 @@ export class LedgerConnectStateManager<T extends IEventBus = IEventBus> {
   private eventBus: T;
   private allAccounts: ILedgerAccount[] = [];
 
+  // first screen data
+  private initialConnectScreenData: IConnectScreenData = {};
+  private connectScreenData: IConnectScreenData = {
+    ...this.initialConnectScreenData
+  };
+
+  // second screen data
   private initialAccountScreenData: IAccountScreenData = {
     accounts: this.allAccounts,
     startIndex: 0,
     addressesPerPage: this.addressesPerPage,
     isLoading: true
   };
+  private accountScreenData: IAccountScreenData = {
+    ...this.initialAccountScreenData
+  };
 
+  // third screen data
   private initialConfirmScreenData: IConfirmScreenData = {
     selectedAddress: ''
   };
+  private confirmScreenData: IConfirmScreenData = {
+    ...this.initialConfirmScreenData
+  };
 
-  private initialConnectScreenData: IConnectScreenData = {};
-
+  // whole data to be sent on update events
   private initialData: ILedgerConnectModalData = {
     connectScreenData: this.initialConnectScreenData,
     accountScreenData: null,
     confirmScreenData: null
   };
 
-  private accountScreenData: IAccountScreenData = {
-    ...this.initialAccountScreenData
-  };
-  private confirmScreenData: IConfirmScreenData = {
-    ...this.initialConfirmScreenData
-  };
-  private connectScreenData: IConnectScreenData = {
-    ...this.initialConnectScreenData
-  };
   private data: ILedgerConnectModalData = { ...this.initialData };
 
   private constructor(eventBus: T) {
@@ -130,19 +134,7 @@ export class LedgerConnectStateManager<T extends IEventBus = IEventBus> {
     return this.confirmScreenData ?? this.initialConfirmScreenData;
   }
 
-  public getConnectScreenData(): IConnectScreenData {
-    return this.connectScreenData ?? this.initialConnectScreenData;
-  }
-
   public getAllAccounts(): ILedgerAccount[] {
     return this.allAccounts;
   }
-
-  public static hasInstance(): boolean {
-    return this.instance !== null;
-  }
-
-  public static resetInstance(): void {
-    this.instance = null;
-  }
 }

From 549a48b375e43d6bc83ca11b5e2ffec1333ea857 Mon Sep 17 00:00:00 2001
From: Tudor Morar <tudor.morar@multiversx.com>
Date: Wed, 27 Nov 2024 12:48:03 +0200
Subject: [PATCH 5/6] Fixed close modal

---
 .../LedgerModalComponent.ts                   |  8 +++++---
 .../helpers/ledger/createLedgerProvider.ts    | 19 ++++++++++---------
 .../helpers/LedgerConnectStateManager.ts      | 15 +++++++--------
 3 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/core/providers/helpers/ledger/components/LedgerConnectModal/LedgerModalComponent.ts b/src/core/providers/helpers/ledger/components/LedgerConnectModal/LedgerModalComponent.ts
index 194548d..e51164f 100644
--- a/src/core/providers/helpers/ledger/components/LedgerConnectModal/LedgerModalComponent.ts
+++ b/src/core/providers/helpers/ledger/components/LedgerConnectModal/LedgerModalComponent.ts
@@ -176,8 +176,10 @@ export class LedgerConnectModal extends LitElement {
     this.eventBus.publish(LedgerConnectEventsEnum.PREV_PAGE);
   }
 
-  close() {
-    this.eventBus.publish(LedgerConnectEventsEnum.CLOSE);
+  close(props = { isUserClick: true }) {
+    if (props.isUserClick) {
+      this.eventBus.publish(LedgerConnectEventsEnum.CLOSE);
+    }
     // allow a final update before close
     setTimeout(() => {
       if (this.parentNode) {
@@ -188,7 +190,7 @@ export class LedgerConnectModal extends LitElement {
 
   private dataUpdate(payload: ILedgerConnectModalData) {
     if (payload.shouldClose) {
-      return this.close();
+      return this.close({ isUserClick: false });
     }
     this.data = payload;
     this.requestUpdate();
diff --git a/src/core/providers/helpers/ledger/createLedgerProvider.ts b/src/core/providers/helpers/ledger/createLedgerProvider.ts
index 8899080..e77b293 100644
--- a/src/core/providers/helpers/ledger/createLedgerProvider.ts
+++ b/src/core/providers/helpers/ledger/createLedgerProvider.ts
@@ -31,7 +31,7 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
     Awaited<ReturnType<typeof getLedgerProvider>>
   >(async function buildLedgerProvider(resolve, reject) {
     const onRetry = () => buildLedgerProvider(resolve, reject);
-    const onCancel = () => reject('User cancelled login');
+    const onCancel = () => reject('Device unavailable');
 
     try {
       manager.updateAccountScreen({
@@ -53,7 +53,6 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
         error: errorMessage ?? defaultErrorMessage ?? failInitializeErrorText
       });
 
-      // eventBus.publish(LedgerConnectEventsEnum.DATA_UPDATE, data);
       eventBus.subscribe(LedgerConnectEventsEnum.CONNECT_DEVICE, onRetry);
       eventBus.subscribe(LedgerConnectEventsEnum.CLOSE, onCancel);
     }
@@ -84,7 +83,7 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
     });
 
     const updateAccounts = async () => {
-      const { startIndex } = manager.getAccountScreenData();
+      const startIndex = manager.getAccountScreenData()?.startIndex || 0;
       const allAccounts = manager.getAllAccounts();
 
       const hasData = allAccounts.some(
@@ -205,18 +204,20 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
 
       const onCancel = async () => {
         await updateAccounts();
+        console.log('\x1b[42m%s\x1b[0m', 'User cancelled login unsubscribe');
+
         unsubscribeFromEvents();
         reject('User cancelled login');
       };
 
       const onNextPageChanged = async () => {
-        const { startIndex } = manager.getAccountScreenData();
+        const startIndex = manager.getAccountScreenData()?.startIndex || 0;
         manager.updateStartIndex(startIndex + manager.addressesPerPage);
         await updateAccounts();
       };
 
       const onPrevPageChanged = async () => {
-        const { startIndex } = manager.getAccountScreenData();
+        const startIndex = manager.getAccountScreenData()?.startIndex || 0;
 
         if (startIndex > 0) {
           manager.updateStartIndex(
@@ -257,14 +258,14 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
           });
         } catch (err) {
           console.error('User rejected login:', err);
+          const shouldClose = Boolean(manager.getAccountScreenData());
+          if (shouldClose) {
+            return closeComponent();
+          }
           const shouldGoBack = Boolean(manager.getConfirmScreenData());
           if (shouldGoBack) {
             await updateAccounts();
           }
-          const shouldClose = Boolean(manager.getAccountScreenData());
-          if (shouldClose) {
-            closeComponent();
-          }
         }
       };
 
diff --git a/src/core/providers/helpers/ledger/helpers/LedgerConnectStateManager.ts b/src/core/providers/helpers/ledger/helpers/LedgerConnectStateManager.ts
index df36443..b854a52 100644
--- a/src/core/providers/helpers/ledger/helpers/LedgerConnectStateManager.ts
+++ b/src/core/providers/helpers/ledger/helpers/LedgerConnectStateManager.ts
@@ -85,11 +85,10 @@ export class LedgerConnectStateManager<T extends IEventBus = IEventBus> {
   }
 
   public closeAndReset(): void {
+    console.log('Closing and resetting');
+    this.data.shouldClose = true;
+    this.notifyDataUpdate();
     this.resetData();
-    this.eventBus.publish(LedgerConnectEventsEnum.CLOSE, {
-      ...this.data,
-      shouldClose: true
-    });
   }
 
   public updateConnectScreen(members: Partial<IConnectScreenData>): void {
@@ -126,12 +125,12 @@ export class LedgerConnectStateManager<T extends IEventBus = IEventBus> {
     this.eventBus.publish(LedgerConnectEventsEnum.DATA_UPDATE, this.data);
   }
 
-  public getAccountScreenData(): IAccountScreenData {
-    return this.accountScreenData ?? this.initialAccountScreenData;
+  public getAccountScreenData(): IAccountScreenData | null {
+    return this.data.accountScreenData;
   }
 
-  public getConfirmScreenData(): IConfirmScreenData {
-    return this.confirmScreenData ?? this.initialConfirmScreenData;
+  public getConfirmScreenData(): IConfirmScreenData | null {
+    return this.data.confirmScreenData;
   }
 
   public getAllAccounts(): ILedgerAccount[] {

From 7a221620c0b39dcae3277d330459ea53f871284b Mon Sep 17 00:00:00 2001
From: Tudor Morar <tudor.morar@multiversx.com>
Date: Wed, 27 Nov 2024 12:58:13 +0200
Subject: [PATCH 6/6] Remove logs

---
 src/core/providers/helpers/ledger/createLedgerProvider.ts       | 2 --
 .../helpers/ledger/helpers/LedgerConnectStateManager.ts         | 1 -
 2 files changed, 3 deletions(-)

diff --git a/src/core/providers/helpers/ledger/createLedgerProvider.ts b/src/core/providers/helpers/ledger/createLedgerProvider.ts
index e77b293..87ed5d2 100644
--- a/src/core/providers/helpers/ledger/createLedgerProvider.ts
+++ b/src/core/providers/helpers/ledger/createLedgerProvider.ts
@@ -204,8 +204,6 @@ export async function createLedgerProvider(): Promise<IProvider | null> {
 
       const onCancel = async () => {
         await updateAccounts();
-        console.log('\x1b[42m%s\x1b[0m', 'User cancelled login unsubscribe');
-
         unsubscribeFromEvents();
         reject('User cancelled login');
       };
diff --git a/src/core/providers/helpers/ledger/helpers/LedgerConnectStateManager.ts b/src/core/providers/helpers/ledger/helpers/LedgerConnectStateManager.ts
index b854a52..a60ed36 100644
--- a/src/core/providers/helpers/ledger/helpers/LedgerConnectStateManager.ts
+++ b/src/core/providers/helpers/ledger/helpers/LedgerConnectStateManager.ts
@@ -85,7 +85,6 @@ export class LedgerConnectStateManager<T extends IEventBus = IEventBus> {
   }
 
   public closeAndReset(): void {
-    console.log('Closing and resetting');
     this.data.shouldClose = true;
     this.notifyDataUpdate();
     this.resetData();