fix: add loader to other wallets

vechain · Jan 11, 2024 · 2656873 · 2656873
1 parent 72f30b1
commit 2656873
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 33 deletions.
diff --git a/packages/dapp-kit-ui/src/components/modals/address-modal.ts b/packages/dapp-kit-ui/src/components/modals/address-modal.ts
@@ -1,7 +1,7 @@
 import type { TemplateResult } from 'lit';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type { I18n, SourceInfo } from '../../constants';
+import type { I18n } from '../../constants';
 import { defaultI18n, Font } from '../../constants';
 import { buttonStyle, iconButtonStyle } from '../../assets/styles';
 import type { ThemeMode } from '../../constants/theme';
@@ -112,9 +112,6 @@ export class AddressModal extends LitElement {
     @property({ type: String })
     address = '';
 
-    @property({ type: Function })
-    onSourceClick?: (source?: SourceInfo) => void = undefined;
-
     @property({ type: Function })
     onDisconnectClick?: () => void = undefined;
 

diff --git a/packages/dapp-kit-ui/src/components/modals/connect-modal/connect-modal.ts b/packages/dapp-kit-ui/src/components/modals/connect-modal/connect-modal.ts
@@ -1,7 +1,7 @@
 import type { TemplateResult } from 'lit';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type { WalletManager } from '@vechain/dapp-kit';
+import { DAppKitLogger, type WalletManager } from '@vechain/dapp-kit';
 import {
     type I18n,
     type SourceInfo,
@@ -97,14 +97,22 @@ export class ConnectModal extends LitElement {
     @property({ type: Function })
     onSourceClick = (source?: SourceInfo): void => {
         if (source) {
+            if (source.id !== 'wallet-connect') {
+                this.setWaitingForTheSignature(true);
+                this.requestForConnectionCertificate = true;
+            }
             this.wallet.setSource(source.id);
             this.wallet
                 .connect()
                 .then(() => {
                     this.requestUpdate();
                 })
-                .finally(() => {
-                    DAppKitUI.modal.close();
+                .catch((err): void => {
+                    DAppKitLogger.error(
+                        'Connection Attempt',
+                        'error trying to connect',
+                        err,
+                    );
                 });
         }
     };
@@ -133,12 +141,21 @@ export class ConnectModal extends LitElement {
     @property()
     requestForConnectionCertificate = false;
 
+    @property()
+    waitingForTheSignature = false;
+
+    private setWaitingForTheSignature = (value: boolean): void => {
+        this.waitingForTheSignature = value;
+    };
+
     private renderContent(): TemplateResult | TemplateResult[] {
         if (this.requestForConnectionCertificate) {
             return html`<vdk-sign-connection-certificate
                 .mode=${this.mode}
                 .i18n=${this.i18n}
                 .language=${this.language}
+                .waitingForTheSignature=${this.waitingForTheSignature}
+                .setWaitingForTheSignature=${this.setWaitingForTheSignature}
             ></vdk-sign-connection-certificate>`;
         }
         if (this.walletConnectQRcode) {
@@ -202,18 +219,21 @@ export class ConnectModal extends LitElement {
     };
 
     private handleClose = (): void => {
-        if (this.requestForConnectionCertificate) {
-            DAppKitUI.modal.closeConnectionCertificateRequest();
-            this.wallet.disconnect();
-        }
+        DAppKitUI.modal.close();
         if (this.walletConnectQRcode) {
             // this timeout is to avoid flickering on close modal animation when the user is in the wallet connect modal
             setTimeout(() => {
                 this.handleBack();
                 this.wallet.disconnect();
             }, 500);
         }
-        DAppKitUI.modal.close();
+        if (this.requestForConnectionCertificate) {
+            // this timeout is to avoid flickering on close modal animation when the user is in the wallet connect modal
+            setTimeout(() => {
+                DAppKitUI.modal.closeConnectionCertificateRequest();
+                this.wallet.disconnect();
+            }, 500);
+        }
         this.onClose();
     };
 }

diff --git a/packages/dapp-kit-ui/src/components/modals/connect-modal/sign-connection-certificate.ts b/packages/dapp-kit-ui/src/components/modals/connect-modal/sign-connection-certificate.ts
@@ -49,6 +49,7 @@ export class SignConnectionCertificate extends LitElement {
 
     constructor() {
         super();
+        this.setSubmitButtonWidth();
         addEventListener('resize', this.setSubmitButtonWidth);
     }
 
@@ -61,6 +62,9 @@ export class SignConnectionCertificate extends LitElement {
     @property()
     waitingForTheSignature = false;
     @property()
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setWaitingForTheSignature: (v: boolean) => void = () => {};
+    @property()
     submitButtonWidth = 0;
 
     private svgLoaderTemplate(): TemplateResult {
@@ -119,17 +123,16 @@ export class SignConnectionCertificate extends LitElement {
     }
 
     private setSubmitButtonWidth = (): void => {
-        this.submitButtonWidth =
+        const modalWidth =
             document
                 .querySelector('vdk-modal')
                 ?.shadowRoot?.querySelector('vdk-connect-modal')
-                ?.shadowRoot?.querySelector('vdk-sign-connection-certificate')
-                ?.shadowRoot?.querySelector('button')?.clientWidth ?? 0;
+                ?.shadowRoot?.querySelector('div')?.clientWidth ?? 0;
+        this.submitButtonWidth = modalWidth ? modalWidth - 40 : 0;
     };
 
     private handleSignCertificate = async (): Promise<void> => {
-        this.setSubmitButtonWidth();
-        this.waitingForTheSignature = true;
+        this.setWaitingForTheSignature(true);
         await DAppKitUI.wallet.signConnectionCertificate();
     };
 }

diff --git a/packages/dapp-kit-ui/src/components/modals/modal.ts b/packages/dapp-kit-ui/src/components/modals/modal.ts
@@ -1,6 +1,6 @@
-import { html, LitElement, type TemplateResult } from 'lit';
+import { html, LitElement, type TemplateResult, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { DAppKitLogger, type WalletManager } from '@vechain/dapp-kit';
+import { type WalletManager } from '@vechain/dapp-kit';
 import { subscribeKey } from 'valtio/vanilla/utils';
 import { DAppKitUI } from '../../client';
 import {
@@ -37,18 +37,7 @@ export class Modal extends LitElement {
     }
 
     @property({ type: Function })
-    onSourceClick = (source?: SourceInfo): void => {
-        if (source) {
-            this.wallet.setSource(source.id);
-            this.wallet.connect().catch((err): void => {
-                DAppKitLogger.error(
-                    'Source Clicked',
-                    'error trying to connect',
-                    err,
-                );
-            });
-        }
-    };
+    onSourceClick?: (source?: SourceInfo) => void;
 
     @property({ type: Function })
     onDisconnectClick = (): void => {
@@ -70,7 +59,7 @@ export class Modal extends LitElement {
                           .mode=${this.mode}
                           .i18n=${this.i18n}
                           .language=${this.language}
-                          .onSourceClick=${this.onSourceClick}
+                          .onSourceClick=${this.onSourceClick || nothing}
                       ></vdk-connect-modal>`}
             </div>
         `;

diff --git a/packages/dapp-kit-ui/src/constants/i18n.ts b/packages/dapp-kit-ui/src/constants/i18n.ts
@@ -11,7 +11,7 @@ export const defaultI18n: I18n = {
         'sign-connection-certificate-button': 'Sign Certificate',
         'sign-connection-certificate-description':
             'Proof address is required, please sign a certificate to continue',
-        'waiting-signature': 'Waiting signature...',
+        'waiting-signature': 'Waiting for signature...',
     },
     it: {
         'connect-wallet': 'Connetti il Wallet',