From de26ce1171f847878c9ba1e0a6d79d8b136360e5 Mon Sep 17 00:00:00 2001 From: Davide Carpini Date: Sat, 24 Feb 2024 19:42:36 +0100 Subject: [PATCH 1/3] fix: version 1.0.11 with all event listeners --- packages/dapp-kit-react/package.json | 2 +- packages/dapp-kit-ui/package.json | 2 +- .../src/components/buttons/button.ts | 29 ++++-- .../src/components/modals/address-modal.ts | 26 ++++-- .../modals/connect-modal/connect-modal.ts | 92 +++++++++++++------ .../src/components/modals/modal.ts | 16 +++- packages/dapp-kit/package.json | 2 +- 7 files changed, 119 insertions(+), 50 deletions(-) diff --git a/packages/dapp-kit-react/package.json b/packages/dapp-kit-react/package.json index 19a6e582..3726373b 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", diff --git a/packages/dapp-kit-ui/package.json b/packages/dapp-kit-ui/package.json index 8e35e200..f79c0399 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": [ 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..80a040d3 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", From c7df4072c1528199be9aa0ec3303b348b0b11faf Mon Sep 17 00:00:00 2001 From: Davide Carpini Date: Sat, 24 Feb 2024 20:04:47 +0100 Subject: [PATCH 2/3] fix: versions --- packages/dapp-kit-react/package.json | 4 ++-- packages/dapp-kit-ui/package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/dapp-kit-react/package.json b/packages/dapp-kit-react/package.json index 3726373b..344ddd5a 100644 --- a/packages/dapp-kit-react/package.json +++ b/packages/dapp-kit-react/package.json @@ -27,8 +27,8 @@ "@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", + "@vechain/dapp-kit": "*", + "@vechain/dapp-kit-ui": "*", "thor-devkit": "^2.0.9", "valtio": "1.11.2" }, diff --git a/packages/dapp-kit-ui/package.json b/packages/dapp-kit-ui/package.json index f79c0399..fb251099 100644 --- a/packages/dapp-kit-ui/package.json +++ b/packages/dapp-kit-ui/package.json @@ -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", From 0c6fd67221bdb4dd78f34a7adb5564f4c3d9d972 Mon Sep 17 00:00:00 2001 From: Davide Carpini Date: Sat, 24 Feb 2024 20:32:34 +0100 Subject: [PATCH 3/3] fix: thor-devkit version --- packages/dapp-kit-react/package.json | 2 +- packages/dapp-kit/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/dapp-kit-react/package.json b/packages/dapp-kit-react/package.json index 344ddd5a..fce0374e 100644 --- a/packages/dapp-kit-react/package.json +++ b/packages/dapp-kit-react/package.json @@ -29,7 +29,7 @@ "@vechain/connex-framework": "2.1.0", "@vechain/dapp-kit": "*", "@vechain/dapp-kit-ui": "*", - "thor-devkit": "^2.0.9", + "thor-devkit": "2.0.5", "valtio": "1.11.2" }, "devDependencies": { diff --git a/packages/dapp-kit/package.json b/packages/dapp-kit/package.json index 80a040d3..2d04a606 100644 --- a/packages/dapp-kit/package.json +++ b/packages/dapp-kit/package.json @@ -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": {