From d3f42083b82cccdcf012579378b0c47947039da9 Mon Sep 17 00:00:00 2001 From: Davide Carpini Date: Tue, 23 Jan 2024 16:57:27 +0100 Subject: [PATCH 1/3] fix: fix button configuration in next (#182) Co-authored-by: Davide Carpini --- packages/dapp-kit-ui/src/client.ts | 10 ++++++++-- .../dapp-kit-ui/src/components/buttons/button.ts | 9 ++++----- packages/dapp-kit-ui/src/utils/ui-config.ts | 15 +++++---------- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/dapp-kit-ui/src/client.ts b/packages/dapp-kit-ui/src/client.ts index fa673c01..c8fe5aa5 100644 --- a/packages/dapp-kit-ui/src/client.ts +++ b/packages/dapp-kit-ui/src/client.ts @@ -5,7 +5,7 @@ import { CustomWalletConnectModal, ConnectModalManager } from './classes'; import { type CustomizedStyle, dispatchCustomEvent, - configureUI, + initModalsAndButtons, } from './utils'; import type { SourceInfo, I18n, ThemeMode } from './constants'; @@ -40,7 +40,7 @@ export const DAppKitUI = { }); // configure bottons and modals options - configureUI(options); + initModalsAndButtons(options); dispatchCustomEvent('vdk-dapp-kit-configured'); initialized = true; @@ -48,6 +48,12 @@ export const DAppKitUI = { return dappKit; }, + configureButtonsAndModals(): void { + if (dappKitOptions) { + initModalsAndButtons(dappKitOptions); + } + }, + get initialized(): boolean { return initialized; }, diff --git a/packages/dapp-kit-ui/src/components/buttons/button.ts b/packages/dapp-kit-ui/src/components/buttons/button.ts index 1f78fd2e..b4c0b76c 100644 --- a/packages/dapp-kit-ui/src/components/buttons/button.ts +++ b/packages/dapp-kit-ui/src/components/buttons/button.ts @@ -1,6 +1,5 @@ import { html, LitElement, type TemplateResult } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import { type WalletManager } from '@vechain/dapp-kit'; import { subscribeKey } from 'valtio/vanilla/utils'; import { DAppKitUI } from '../../client'; import { defaultI18n, type I18n, type ThemeMode } from '../../constants'; @@ -13,6 +12,10 @@ export class Button extends LitElement { if (DAppKitUI.initialized) { this.address = DAppKitUI.wallet.state.address ?? ''; this.initAddressListener(); + setTimeout(() => { + DAppKitUI.configureButtonsAndModals(); + this.requestUpdate(); + }, 0); } else { subscribeToCustomEvent('vdk-dapp-kit-configured', () => { this.address = DAppKitUI.wallet.state.address ?? ''; @@ -28,10 +31,6 @@ export class Button extends LitElement { }); } - private get wallet(): WalletManager { - return DAppKitUI.wallet; - } - @property() mode: ThemeMode = 'LIGHT'; diff --git a/packages/dapp-kit-ui/src/utils/ui-config.ts b/packages/dapp-kit-ui/src/utils/ui-config.ts index fe1e4d05..5cbdcb1c 100644 --- a/packages/dapp-kit-ui/src/utils/ui-config.ts +++ b/packages/dapp-kit-ui/src/utils/ui-config.ts @@ -63,6 +63,11 @@ export const initStyles = (customizedStyle: CustomizedStyle): void => { }; export const initModalsAndButtons = (options: DAppKitUIOptions): void => { + // configure theme variables + if (options.themeVariables) { + initStyles(options.themeVariables); + } + const button = document.querySelector('vdk-button'); const modal = document.querySelector('vdk-modal'); @@ -86,13 +91,3 @@ export const initModalsAndButtons = (options: DAppKitUIOptions): void => { modal.onSourceClick = options.onSourceClick; } }; - -export const configureUI = (options: DAppKitUIOptions): void => { - // init buttons and modals - initModalsAndButtons(options); - - // configure theme variables - if (options.themeVariables) { - initStyles(options.themeVariables); - } -}; From 251e8d57fdbd0602460a0314cb7c98b5e3a22e7b Mon Sep 17 00:00:00 2001 From: Darren Kelly <107671032+darrenvechain@users.noreply.github.com> Date: Tue, 23 Jan 2024 16:07:17 +0000 Subject: [PATCH 2/3] fix: modal not updating (#181) * fix: modal not updating * chore: add code coverage --- .../src/components/modals/modal.ts | 21 ++++++++++++++++--- .../classes/connect-modal-manager.test.ts | 21 +++++++++++++++++++ 2 files changed, 39 insertions(+), 3 deletions(-) create mode 100644 packages/dapp-kit-ui/test/classes/connect-modal-manager.test.ts diff --git a/packages/dapp-kit-ui/src/components/modals/modal.ts b/packages/dapp-kit-ui/src/components/modals/modal.ts index 6f1dd0f5..b56fe73c 100644 --- a/packages/dapp-kit-ui/src/components/modals/modal.ts +++ b/packages/dapp-kit-ui/src/components/modals/modal.ts @@ -1,7 +1,6 @@ import { html, LitElement, type TemplateResult, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { type WalletManager } from '@vechain/dapp-kit'; -import { subscribeKey } from 'valtio/vanilla/utils'; import { DAppKitUI } from '../../client'; import { defaultI18n, @@ -9,13 +8,25 @@ import { type SourceInfo, type ThemeMode, } from '../../constants'; +import { subscribeToCustomEvent } from '../../utils'; @customElement('vdk-modal') export class Modal extends LitElement { constructor() { super(); - subscribeKey(DAppKitUI.wallet.state, 'address', (v) => { - this.address = v ?? ''; + if (DAppKitUI.initialized) { + this.init(); + } else { + subscribeToCustomEvent('vdk-dapp-kit-configured', () => { + this.init(); + }); + } + } + + private init(): void { + this.address = DAppKitUI.wallet.state.address ?? ''; + this.wallet.subscribeToKey('address', (addr) => { + this.address = addr ?? ''; this.requestUpdate(); }); } @@ -45,6 +56,10 @@ export class Modal extends LitElement { }; override render(): TemplateResult { + if (!DAppKitUI.initialized) { + return html``; + } + return html`
${this.address diff --git a/packages/dapp-kit-ui/test/classes/connect-modal-manager.test.ts b/packages/dapp-kit-ui/test/classes/connect-modal-manager.test.ts new file mode 100644 index 00000000..c566a102 --- /dev/null +++ b/packages/dapp-kit-ui/test/classes/connect-modal-manager.test.ts @@ -0,0 +1,21 @@ +import { ConnectModalManager, DAppKitUI } from '../../src'; + +DAppKitUI.configure({ + nodeUrl: 'https://mainnet.vechain.org/', +}); + +describe('ConnectModalManager', () => { + it('should be a singleton', () => { + const instance1 = ConnectModalManager.getInstance(DAppKitUI.wallet); + const instance2 = ConnectModalManager.getInstance(DAppKitUI.wallet); + expect(instance1).toBe(instance2); + }); + + it('should not throw', () => { + const instance = ConnectModalManager.getInstance(DAppKitUI.wallet); + instance.open(); + instance.close(); + instance.closeWalletConnect(); + instance.closeConnectionCertificateRequest(); + }); +}); From abd2bb3ee673703921aaa624a409178ee366f070 Mon Sep 17 00:00:00 2001 From: Darren Kelly <107671032+darrenvechain@users.noreply.github.com> Date: Tue, 23 Jan 2024 16:35:54 +0000 Subject: [PATCH 3/3] fix: react dist not working (#183) --- examples/sample-react-app/vite.config.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/examples/sample-react-app/vite.config.ts b/examples/sample-react-app/vite.config.ts index bcd3b212..5702ea65 100644 --- a/examples/sample-react-app/vite.config.ts +++ b/examples/sample-react-app/vite.config.ts @@ -4,6 +4,11 @@ import { nodePolyfills } from 'vite-plugin-node-polyfills'; export default defineConfig({ plugins: [nodePolyfills(), react()], + build: { + commonjsOptions: { + transformMixedEsModules: true, + }, + }, base: process.env.NODE_ENV === 'production' ? '/vechain-dapp-kit/react/'