fix: button and modal listeners (#212)

* fix: button and modal listeners * fix: yarn lock * fix: yarn lock
vechain · Mar 7, 2024 · 2934e76 · 2934e76
1 parent d818890
commit 2934e76
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 38 deletions.
diff --git 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
@@ -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 {