fix: fix button configuration in next

vechain · Jan 23, 2024 · 44e9d86 · 44e9d86
1 parent dd5be26
commit 44e9d86
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
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/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);
-    }
-};