diff --git a/packages/dapp-kit-ui/src/components/modals/address-modal.ts b/packages/dapp-kit-ui/src/components/modals/address-modal.ts index afa3dc22..3bde7d03 100644 --- 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 index 6f3a0f32..846eab5e 100644 --- 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``; } if (this.walletConnectQRcode) { @@ -202,10 +219,7 @@ 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(() => { @@ -213,7 +227,13 @@ export class ConnectModal extends LitElement { 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 index d4f8a7e2..a5ae77b4 100644 --- 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 => { - 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 index 678aa926..6f1dd0f5 100644 --- 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} >`} `; diff --git a/packages/dapp-kit-ui/src/constants/i18n.ts b/packages/dapp-kit-ui/src/constants/i18n.ts index c1bba6bc..f177999b 100644 --- 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',