Merge branch 'main' into dependabot/npm_and_yarn/vite-4.5.2

vechain · Jan 29, 2024 · b3de9ac · b3de9ac
2 parents 7d91366 + abd2bb3
commit b3de9ac
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 20 deletions.
diff --git 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/'

diff --git 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,14 +40,20 @@ export const DAppKitUI = {
         });
 
         // configure bottons and modals options
-        configureUI(options);
+        initModalsAndButtons(options);
         dispatchCustomEvent('vdk-dapp-kit-configured');
 
         initialized = true;
 
         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
@@ -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/components/modals/modal.ts b/packages/dapp-kit-ui/src/components/modals/modal.ts
@@ -1,21 +1,32 @@
 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,
     type I18n,
     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`
             <div>
                 ${this.address

diff --git 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);
-    }
-};
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
@@ -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();
+    });
+});