diff --git a/packages/dapp-kit-ui/src/components/buttons/button.ts b/packages/dapp-kit-ui/src/components/buttons/button.ts index 71cdd2bd..31273008 100644 --- a/packages/dapp-kit-ui/src/components/buttons/button.ts +++ b/packages/dapp-kit-ui/src/components/buttons/button.ts @@ -10,29 +10,23 @@ let dappKitConfiguredListener: () => void; export class Button extends LitElement { constructor() { super(); - if (DAppKitUI.initialized) { - this.setAddressFromState(); this.configureButtonUI(); - this.initAddressListener(); + } + } - // this subscribeToCustomEvent need to be done if the DappKitUI button is reconfigured and so recreated after the initial configuration - dappKitConfiguredListener = subscribeToCustomEvent( - 'vdk-dapp-kit-configured', - () => { - this.setAddressFromState(); - this.initAddressListener(); - }, - ); - } else { - dappKitConfiguredListener = subscribeToCustomEvent( - 'vdk-dapp-kit-configured', - () => { - this.setAddressFromState(); - this.initAddressListener(); - }, - ); + connectedCallback(): void { + super.connectedCallback(); + if (DAppKitUI.initialized) { + this.initAddressListener(); } + dappKitConfiguredListener = subscribeToCustomEvent( + 'vdk-dapp-kit-configured', + () => { + this.setAddressFromState(); + this.initAddressListener(); + }, + ); } disconnectedCallback(): void { @@ -49,6 +43,7 @@ export class Button extends LitElement { this.mode = DAppKitUI.configuration?.themeMode ?? 'LIGHT'; this.i18n = DAppKitUI.configuration?.i18n ?? defaultI18n; this.language = DAppKitUI.configuration?.language ?? 'en'; + this.address = DAppKitUI.wallet.state.address ?? ''; this.requestUpdate(); } diff --git a/packages/dapp-kit-ui/src/components/modals/modal.ts b/packages/dapp-kit-ui/src/components/modals/modal.ts index e33c84e2..8ca3983e 100644 --- a/packages/dapp-kit-ui/src/components/modals/modal.ts +++ b/packages/dapp-kit-ui/src/components/modals/modal.ts @@ -1,6 +1,5 @@ import { html, LitElement, type TemplateResult, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import { type WalletManager } from '@vechain/dapp-kit'; import { DAppKitUI } from '../../client'; import { defaultI18n, @@ -17,28 +16,42 @@ export class Modal extends LitElement { constructor() { super(); if (DAppKitUI.initialized) { - this.init(); - } else { - dappKitConfiguredListener = subscribeToCustomEvent( - 'vdk-dapp-kit-configured', - () => { - this.init(); - }, - ); + this.setAddressFromState(); } } + connectedCallback(): void { + super.connectedCallback(); + if (DAppKitUI.initialized) { + this.initAddressListener(); + } + dappKitConfiguredListener = subscribeToCustomEvent( + 'vdk-dapp-kit-configured', + () => { + this.setAddressFromState(); + this.initAddressListener(); + }, + ); + } + disconnectedCallback(): void { super.disconnectedCallback(); dappKitConfiguredListener?.(); } - private init(): void { + private setAddressFromState(): void { this.address = DAppKitUI.wallet.state.address ?? ''; - this.wallet.subscribeToKey('address', (addr) => { - this.address = addr ?? ''; - this.requestUpdate(); - }); + this.requestUpdate(); + } + + private initAddressListener(): void { + DAppKitUI.wallet.subscribeToKey( + 'address', + (_address: string | null) => { + this.address = _address ?? ''; + this.requestUpdate(); + }, + ); } @property() @@ -53,16 +66,12 @@ export class Modal extends LitElement { @property() language = 'en'; - private get wallet(): WalletManager { - return DAppKitUI.wallet; - } - @property({ type: Function }) onSourceClick?: (source?: SourceInfo) => void; @property({ type: Function }) onDisconnectClick = (): void => { - this.wallet.disconnect(); + DAppKitUI.wallet.disconnect(); }; override render(): TemplateResult {