From 2c7372a1d0198a0b1503ef477f9a58c87c54c38a Mon Sep 17 00:00:00 2001
From: Darren Kelly <darren.kelly@vechain.org>
Date: Tue, 23 Jan 2024 15:33:43 +0000
Subject: [PATCH 1/3] fix: modal not updating

---
 .../src/components/modals/modal.ts            | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

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`
             <div>
                 ${this.address

From b49736773c4430418627340294d0cff5fb7e3bb8 Mon Sep 17 00:00:00 2001
From: Darren Kelly <darren.kelly@vechain.org>
Date: Tue, 23 Jan 2024 15:53:41 +0000
Subject: [PATCH 2/3] chore: add code coverage

---
 .../src/app/pages/homepage.tsx                | 12 +++++++++++
 packages/dapp-kit-ui/src/client.ts            | 15 ++++++++++---
 .../src/components/buttons/button.ts          | 14 ++++++++-----
 .../classes/connect-modal-manager.test.ts     | 21 +++++++++++++++++++
 4 files changed, 54 insertions(+), 8 deletions(-)
 create mode 100644 packages/dapp-kit-ui/test/classes/connect-modal-manager.test.ts

diff --git a/examples/sample-next-app/src/app/pages/homepage.tsx b/examples/sample-next-app/src/app/pages/homepage.tsx
index 894c7776..634786b9 100644
--- a/examples/sample-next-app/src/app/pages/homepage.tsx
+++ b/examples/sample-next-app/src/app/pages/homepage.tsx
@@ -60,13 +60,25 @@ const walletConnectOptions: WalletConnectOptions = {
 };
 
 const HomePage = (): ReactElement => {
+    const [theme, setTheme] = useState<'DARK' | 'LIGHT'>('DARK');
+
+    const toggleTheme = () => {
+        if (theme === 'DARK') {
+            setTheme('LIGHT');
+        } else {
+            setTheme('DARK');
+        }
+    };
+
     return (
         <DAppKitProvider
             genesis="test"
             nodeUrl="https://testnet.vechain.org/"
+            themeMode={theme}
             usePersistence
             walletConnectOptions={walletConnectOptions}
         >
+            <button onClick={toggleTheme}>Toggle Theme</button>
             <Button />
         </DAppKitProvider>
     );
diff --git a/packages/dapp-kit-ui/src/client.ts b/packages/dapp-kit-ui/src/client.ts
index fa673c01..533f3499 100644
--- a/packages/dapp-kit-ui/src/client.ts
+++ b/packages/dapp-kit-ui/src/client.ts
@@ -8,9 +8,9 @@ import {
     configureUI,
 } 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,7 +22,10 @@ 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 &&
@@ -31,7 +34,12 @@ export const DAppKitUI = {
             options.walletConnectOptions.modal =
                 CustomWalletConnectModal.getInstance();
         }
-        dappKitOptions = options;
+
+        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];
+        }
+
         dappKit = new DAppKit(options);
 
         // init modal so that on the first opening it doesn't have to create it
@@ -41,6 +49,7 @@ export const DAppKitUI = {
 
         // configure bottons and modals options
         configureUI(options);
+
         dispatchCustomEvent('vdk-dapp-kit-configured');
 
         initialized = true;
@@ -66,7 +75,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
index 1f78fd2e..a7d48430 100644
--- a/packages/dapp-kit-ui/src/components/buttons/button.ts
+++ b/packages/dapp-kit-ui/src/components/buttons/button.ts
@@ -11,21 +11,25 @@ export class Button extends LitElement {
     constructor() {
         super();
         if (DAppKitUI.initialized) {
-            this.address = DAppKitUI.wallet.state.address ?? '';
-            this.initAddressListener();
+            this.init();
         } else {
             subscribeToCustomEvent('vdk-dapp-kit-configured', () => {
-                this.address = DAppKitUI.wallet.state.address ?? '';
-                this.initAddressListener();
+                this.init();
             });
         }
     }
 
-    private initAddressListener(): void {
+    private init(): void {
+        this.address = DAppKitUI.wallet.state.address ?? '';
+
         subscribeKey(DAppKitUI.wallet.state, 'address', (v) => {
             this.address = v ?? '';
             this.requestUpdate();
         });
+
+        subscribeKey(DAppKitUI.options, 'themeMode', (v) => {
+            this.mode = v ?? 'LIGHT';
+        });
     }
 
     private get wallet(): WalletManager {
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 e56e7c5c905dd0d47059245a54b0d2bf8c81a33f Mon Sep 17 00:00:00 2001
From: Darren Kelly <darren.kelly@vechain.org>
Date: Tue, 23 Jan 2024 16:03:40 +0000
Subject: [PATCH 3/3] chore: remove toggle

---
 examples/sample-next-app/src/app/pages/homepage.tsx | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/examples/sample-next-app/src/app/pages/homepage.tsx b/examples/sample-next-app/src/app/pages/homepage.tsx
index 634786b9..894c7776 100644
--- a/examples/sample-next-app/src/app/pages/homepage.tsx
+++ b/examples/sample-next-app/src/app/pages/homepage.tsx
@@ -60,25 +60,13 @@ const walletConnectOptions: WalletConnectOptions = {
 };
 
 const HomePage = (): ReactElement => {
-    const [theme, setTheme] = useState<'DARK' | 'LIGHT'>('DARK');
-
-    const toggleTheme = () => {
-        if (theme === 'DARK') {
-            setTheme('LIGHT');
-        } else {
-            setTheme('DARK');
-        }
-    };
-
     return (
         <DAppKitProvider
             genesis="test"
             nodeUrl="https://testnet.vechain.org/"
-            themeMode={theme}
             usePersistence
             walletConnectOptions={walletConnectOptions}
         >
-            <button onClick={toggleTheme}>Toggle Theme</button>
             <Button />
         </DAppKitProvider>
     );