fix: version 1.0.11 with all event listeners (#202)

* fix: version 1.0.11 with all event listeners * fix: versions * fix: thor-devkit version
vechain · Feb 24, 2024 · cf36ef3 · cf36ef3
1 parent 4d85d2b
commit cf36ef3
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 55 deletions.
diff --git a/packages/dapp-kit-react/package.json b/packages/dapp-kit-react/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@vechain/dapp-kit-react",
-    "version": "1.0.8",
+    "version": "1.0.11",
     "private": false,
     "homepage": "https://github.com/vechainfoundation/vechain-dapp-kit",
     "repository": "github:vechain/vechain-dapp-kit",
@@ -27,9 +27,9 @@
         "@lit/react": "^1.0.1",
         "@vechain/connex": "2.1.0",
         "@vechain/connex-framework": "2.1.0",
-        "@vechain/dapp-kit": "1.0.8",
-        "@vechain/dapp-kit-ui": "1.0.8",
-        "thor-devkit": "^2.0.9",
+        "@vechain/dapp-kit": "*",
+        "@vechain/dapp-kit-ui": "*",
+        "thor-devkit": "2.0.5",
         "valtio": "1.11.2"
     },
     "devDependencies": {

diff --git a/packages/dapp-kit-ui/package.json b/packages/dapp-kit-ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@vechain/dapp-kit-ui",
-    "version": "1.0.8",
+    "version": "1.0.11",
     "private": false,
     "description": "Vanilla JS DAppKit",
     "keywords": [
@@ -35,7 +35,7 @@
     },
     "dependencies": {
         "@vechain/connex": "2.1.0",
-        "@vechain/dapp-kit": "1.0.8",
+        "@vechain/dapp-kit": "*",
         "@vechain/picasso": "2.1.1",
         "@wagmi/core": "^1.4.5",
         "@web3modal/ethereum": "^2.7.1",

diff --git a/packages/dapp-kit-ui/src/components/buttons/button.ts b/packages/dapp-kit-ui/src/components/buttons/button.ts
@@ -4,6 +4,8 @@ import { DAppKitUI } from '../../client';
 import { defaultI18n, type I18n, type ThemeMode } from '../../constants';
 import { subscribeToCustomEvent } from '../../utils';
 
+let dappKitConfiguredListener: () => void;
+
 @customElement('vdk-button')
 export class Button extends LitElement {
     constructor() {
@@ -15,18 +17,29 @@ export class Button extends LitElement {
             this.initAddressListener();
 
             // this subscribeToCustomEvent need to be done if the DappKitUI button is reconfigured and so recreated after the initial configuration
-            subscribeToCustomEvent('vdk-dapp-kit-configured', () => {
-                this.setAddressFromState();
-                this.initAddressListener();
-            });
+            dappKitConfiguredListener = subscribeToCustomEvent(
+                'vdk-dapp-kit-configured',
+                () => {
+                    this.setAddressFromState();
+                    this.initAddressListener();
+                },
+            );
         } else {
-            subscribeToCustomEvent('vdk-dapp-kit-configured', () => {
-                this.setAddressFromState();
-                this.initAddressListener();
-            });
+            dappKitConfiguredListener = subscribeToCustomEvent(
+                'vdk-dapp-kit-configured',
+                () => {
+                    this.setAddressFromState();
+                    this.initAddressListener();
+                },
+            );
         }
     }
 
+    disconnectedCallback(): void {
+        super.disconnectedCallback();
+        dappKitConfiguredListener?.();
+    }
+
     private setAddressFromState(): void {
         this.address = DAppKitUI.wallet.state.address ?? '';
         this.requestUpdate();

diff --git a/packages/dapp-kit-ui/src/components/modals/address-modal.ts b/packages/dapp-kit-ui/src/components/modals/address-modal.ts
@@ -22,6 +22,8 @@ import {
 } from '../../assets/icons';
 import { DAppKitUI } from '../../client';
 
+let openWalletModalListener: () => void;
+let closeWalletModalListener: () => void;
 @customElement('vdk-address-modal')
 export class AddressModal extends LitElement {
     static override styles = [
@@ -133,13 +135,25 @@ export class AddressModal extends LitElement {
     constructor() {
         super();
 
-        subscribeToCustomEvent('vdk-open-wallet-modal', () => {
-            this.open = true;
-        });
+        openWalletModalListener = subscribeToCustomEvent(
+            'vdk-open-wallet-modal',
+            () => {
+                this.open = true;
+            },
+        );
+
+        closeWalletModalListener = subscribeToCustomEvent(
+            'vdk-close-wallet-modal',
+            () => {
+                this.open = false;
+            },
+        );
+    }
 
-        subscribeToCustomEvent('vdk-close-wallet-modal', () => {
-            this.open = false;
-        });
+    disconnectedCallback(): void {
+        super.disconnectedCallback();
+        openWalletModalListener?.();
+        closeWalletModalListener?.();
     }
 
     @property({ type: Function })

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
@@ -21,6 +21,13 @@ import { isMobile, subscribeToCustomEvent, useTranslate } from '../../../utils';
 import { DAppKitUI } from '../../../client';
 import { iconButtonStyle } from '../../../assets/styles';
 
+let openWcQrcodeListener: () => void;
+let closeWcQrcodeListener: () => void;
+let openWalletModalListener: () => void;
+let closeWalletModalListener: () => void;
+let requestConnectionCertificateListener: () => void;
+let closeConnectionCertificateRequestListener: () => void;
+
 @customElement('vdk-connect-modal')
 export class ConnectModal extends LitElement {
     static override styles = [
@@ -51,44 +58,69 @@ export class ConnectModal extends LitElement {
     constructor() {
         super();
 
-        subscribeToCustomEvent('vdk-open-wc-qrcode', (options) => {
-            if (isMobile()) {
-                this.openingVeWorld = true;
-                window.open(
-                    `veworld://app.veworld?uri=${encodeURIComponent(
-                        options.uri,
-                    )}`,
-                    '_self',
-                );
-            }
-            this.open = true;
-            this.walletConnectQRcode = options.uri;
-        });
-        subscribeToCustomEvent('vdk-close-wc-qrcode', () => {
-            this.walletConnectQRcode = undefined;
-            this.openingVeWorld = false;
-        });
-        subscribeToCustomEvent('vdk-open-wallet-modal', () => {
-            if (window.vechain?.isInAppBrowser) {
-                this.onSourceClick(WalletSources.veworld);
-            } else {
+        openWcQrcodeListener = subscribeToCustomEvent(
+            'vdk-open-wc-qrcode',
+            (options) => {
+                if (isMobile()) {
+                    this.openingVeWorld = true;
+                    window.open(
+                        `veworld://app.veworld?uri=${encodeURIComponent(
+                            options.uri,
+                        )}`,
+                        '_self',
+                    );
+                }
                 this.open = true;
-            }
-        });
-        subscribeToCustomEvent('vdk-close-wallet-modal', () => {
-            this.open = false;
-        });
-        subscribeToCustomEvent('vdk-request-connection-certificate', () => {
-            this.requestForConnectionCertificate = true;
-        });
-        subscribeToCustomEvent(
+                this.walletConnectQRcode = options.uri;
+            },
+        );
+        closeWcQrcodeListener = subscribeToCustomEvent(
+            'vdk-close-wc-qrcode',
+            () => {
+                this.walletConnectQRcode = undefined;
+                this.openingVeWorld = false;
+            },
+        );
+        openWalletModalListener = subscribeToCustomEvent(
+            'vdk-open-wallet-modal',
+            () => {
+                if (window.vechain?.isInAppBrowser) {
+                    this.onSourceClick(WalletSources.veworld);
+                } else {
+                    this.open = true;
+                }
+            },
+        );
+        closeWalletModalListener = subscribeToCustomEvent(
+            'vdk-close-wallet-modal',
+            () => {
+                this.open = false;
+            },
+        );
+        requestConnectionCertificateListener = subscribeToCustomEvent(
+            'vdk-request-connection-certificate',
+            () => {
+                this.requestForConnectionCertificate = true;
+            },
+        );
+        closeConnectionCertificateRequestListener = subscribeToCustomEvent(
             'vdk-close-connection-certificate-request',
             () => {
                 this.requestForConnectionCertificate = false;
             },
         );
     }
 
+    disconnectedCallback(): void {
+        super.disconnectedCallback();
+        openWcQrcodeListener?.();
+        closeWcQrcodeListener?.();
+        openWalletModalListener?.();
+        closeWalletModalListener?.();
+        requestConnectionCertificateListener?.();
+        closeConnectionCertificateRequestListener?.();
+    }
+
     private get availableSources(): SourceInfo[] {
         return DAppKitUI.wallet.state.availableSources.map(
             (source) => WalletSources[source],

diff --git a/packages/dapp-kit-ui/src/components/modals/modal.ts b/packages/dapp-kit-ui/src/components/modals/modal.ts
@@ -10,19 +10,29 @@ import {
 } from '../../constants';
 import { subscribeToCustomEvent } from '../../utils';
 
+let dappKitConfiguredListener: () => void;
+
 @customElement('vdk-modal')
 export class Modal extends LitElement {
     constructor() {
         super();
         if (DAppKitUI.initialized) {
             this.init();
         } else {
-            subscribeToCustomEvent('vdk-dapp-kit-configured', () => {
-                this.init();
-            });
+            dappKitConfiguredListener = subscribeToCustomEvent(
+                'vdk-dapp-kit-configured',
+                () => {
+                    this.init();
+                },
+            );
         }
     }
 
+    disconnectedCallback(): void {
+        super.disconnectedCallback();
+        dappKitConfiguredListener?.();
+    }
+
     private init(): void {
         this.address = DAppKitUI.wallet.state.address ?? '';
         this.wallet.subscribeToKey('address', (addr) => {

diff --git a/packages/dapp-kit/package.json b/packages/dapp-kit/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@vechain/dapp-kit",
-    "version": "1.0.8",
+    "version": "1.0.11",
     "private": false,
     "homepage": "https://github.com/vechainfoundation/vechain-dapp-kit",
     "repository": "github:vechain/vechain-dapp-kit",
@@ -30,7 +30,7 @@
         "@walletconnect/sign-client": "2.10.2",
         "@walletconnect/utils": "2.10.2",
         "events": "^3.3.0",
-        "thor-devkit": "^2.0.9",
+        "thor-devkit": "2.0.5",
         "valtio": "1.11.2"
     },
     "devDependencies": {