Merge branch 'main' into fix-modal

vechain · Jan 23, 2024 · 4f21bdc · 4f21bdc
2 parents b497367 + d3f4208
commit 4f21bdc
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 38 deletions.
diff --git a/packages/dapp-kit-ui/src/client.ts b/packages/dapp-kit-ui/src/client.ts
@@ -5,12 +5,12 @@ import { CustomWalletConnectModal, ConnectModalManager } from './classes';
 import {
     type CustomizedStyle,
     dispatchCustomEvent,
-    configureUI,
+    initModalsAndButtons,
 } from './utils';
 import type { SourceInfo, I18n, ThemeMode } from './constants';
-import { proxy } from 'valtio';
 
 let dappKit: DAppKit | null = null;
+let dappKitOptions: DAppKitUIOptions | null = null;
 let initialized = false;
 
 export type DAppKitUIOptions = DAppKitOptions & {
@@ -22,10 +22,7 @@ export type DAppKitUIOptions = DAppKitOptions & {
     onSourceClick?: (source?: SourceInfo) => void;
 };
 
-const dappKitOptions = proxy<Partial<DAppKitUIOptions>>({});
-
 export const DAppKitUI = {
-    options: dappKitOptions,
     configure(options: DAppKitUIOptions): DAppKit {
         if (
             options.walletConnectOptions &&
@@ -34,12 +31,7 @@ export const DAppKitUI = {
             options.walletConnectOptions.modal =
                 CustomWalletConnectModal.getInstance();
         }
-
-        for (const key in options) {
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
-            (dappKitOptions as any)[key] = (options as any)[key];
-        }
-
+        dappKitOptions = options;
         dappKit = new DAppKit(options);
 
         // init modal so that on the first opening it doesn't have to create it
@@ -48,15 +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;
     },
@@ -75,7 +72,7 @@ export const DAppKitUI = {
 
     get modal(): ConnectModalManager {
         return ConnectModalManager.getInstance(this.wallet, {
-            modalParent: dappKitOptions.modalParent,
+            modalParent: dappKitOptions?.modalParent,
         });
     },
 

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';
@@ -11,29 +10,25 @@ export class Button extends LitElement {
     constructor() {
         super();
         if (DAppKitUI.initialized) {
-            this.init();
+            this.address = DAppKitUI.wallet.state.address ?? '';
+            this.initAddressListener();
+            setTimeout(() => {
+                DAppKitUI.configureButtonsAndModals();
+                this.requestUpdate();
+            }, 0);
         } else {
             subscribeToCustomEvent('vdk-dapp-kit-configured', () => {
-                this.init();
+                this.address = DAppKitUI.wallet.state.address ?? '';
+                this.initAddressListener();
             });
         }
     }
 
-    private init(): void {
-        this.address = DAppKitUI.wallet.state.address ?? '';
-
+    private initAddressListener(): void {
         subscribeKey(DAppKitUI.wallet.state, 'address', (v) => {
             this.address = v ?? '';
             this.requestUpdate();
         });
-
-        subscribeKey(DAppKitUI.options, 'themeMode', (v) => {
-            this.mode = v ?? 'LIGHT';
-        });
-    }
-
-    private get wallet(): WalletManager {
-        return DAppKitUI.wallet;
     }
 
     @property()

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);
-    }
-};