diff --git a/packages/dapp-kit-react/package.json b/packages/dapp-kit-react/package.json index 19a6e582..fce0374e 100644 --- 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 index 8e35e200..fb251099 100644 --- 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 index 8bb1777a..71cdd2bd 100644 --- 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 index 3bde7d03..770afc6c 100644 --- 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 index 5cd47363..4ac3d2a6 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 @@ -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,37 +58,52 @@ 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; @@ -89,6 +111,16 @@ export class ConnectModal extends LitElement { ); } + 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 index b56fe73c..e33c84e2 100644 --- a/packages/dapp-kit-ui/src/components/modals/modal.ts +++ b/packages/dapp-kit-ui/src/components/modals/modal.ts @@ -10,6 +10,8 @@ import { } from '../../constants'; import { subscribeToCustomEvent } from '../../utils'; +let dappKitConfiguredListener: () => void; + @customElement('vdk-modal') export class Modal extends LitElement { constructor() { @@ -17,12 +19,20 @@ export class Modal extends LitElement { 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 index bbfa7121..2d04a606 100644 --- 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": {