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',