From d3f42083b82cccdcf012579378b0c47947039da9 Mon Sep 17 00:00:00 2001
From: Davide Carpini <carpini.davide@gmail.com>
Date: Tue, 23 Jan 2024 16:57:27 +0100
Subject: [PATCH] fix: fix button configuration in next (#182)

Co-authored-by: Davide Carpini <davide.carpini@ext.illimity.com>
---
 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);
-    }
-};