Update ledger communication

src/core/providers/helpers/ledger/components/LedgerModalComponent/LedgerModalComponent.ts → src/core/providers/helpers/ledger/components/LedgerConnectModal/LedgerModalComponent.ts

@@ -1,49 +1,24 @@
 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: {}
   };
 
   @property({ type: Number }) private selectedIndex = 0;
-  @property({ type: Number }) private selectedAddress = '';
+  @property({ type: String }) private selectedAddress = '';
 
   static styles = ledgerStyles;
 
@@ -99,25 +74,33 @@ export class LedgerModalComponent extends LitElement {
       });
     }
 
-    // TODO: test simple ledger connection without token
     if (confirmScreenData) {
       return renderInModal({
         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>
@@ -148,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
@@ -165,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 ||
@@ -185,19 +169,17 @@ 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');
+  close(props = { isUserClick: true }) {
+    if (props.isUserClick) {
+      this.eventBus.publish(LedgerConnectEventsEnum.CLOSE);
+    }
     // allow a final update before close
     setTimeout(() => {
       if (this.parentNode) {
@@ -206,21 +188,27 @@ export class LedgerModalComponent extends LitElement {
     });
   }
 
-  private dataUpdate(payload: ILedgerModalData) {
+  private dataUpdate(payload: ILedgerConnectModalData) {
     if (payload.shouldClose) {
-      return this.close();
+      return this.close({ isUserClick: false });
     }
     this.data = payload;
     this.requestUpdate();
   }
 
   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)
+    );
   }
 }

src/core/providers/helpers/ledger/components/LedgerModalComponent/components/renderInModal.ts → src/core/providers/helpers/ledger/components/LedgerConnectModal/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>

src/core/providers/helpers/ledger/components/LedgerModalComponent/ldegerModalComponent.styles.ts → src/core/providers/helpers/ledger/components/LedgerConnectModal/ledgerConnectModal.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;
+  }
 `;

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'
+}

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);
 }