From 92a0f00f5ecf9cddd44de2e0ea35da8a977025d7 Mon Sep 17 00:00:00 2001
From: Darren Kelly <107671032+darrenvechain@users.noreply.github.com>
Date: Mon, 27 Nov 2023 20:44:14 +0000
Subject: [PATCH] fix: create component dynamically (#105)

---
 .../Components/ConnectButtonWithModal.tsx         | 15 +++++----------
 .../Wrapped/ConnectModalWithButtonWrapped.tsx     | 11 ++++++-----
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/packages/dapp-kit-react/src/Components/ConnectWalletButtonWithModal/Components/ConnectButtonWithModal.tsx b/packages/dapp-kit-react/src/Components/ConnectWalletButtonWithModal/Components/ConnectButtonWithModal.tsx
index 78a7ae43..98504feb 100644
--- a/packages/dapp-kit-react/src/Components/ConnectWalletButtonWithModal/Components/ConnectButtonWithModal.tsx
+++ b/packages/dapp-kit-react/src/Components/ConnectWalletButtonWithModal/Components/ConnectButtonWithModal.tsx
@@ -1,13 +1,15 @@
-import { useCallback, useContext } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 import type { WalletSource } from '@vechainfoundation/dapp-kit';
 import type { SourceInfo } from '@vechainfoundation/dapp-kit-ui';
 import { ThemeContext } from '../../../provider/ThemeProvider';
 import { useWallet } from '../../../ConnexProvider';
-import { ConnectModalWithButtonWrapped } from './Wrapped/ConnectModalWithButtonWrapped';
+import { createButtonWithModal } from './Wrapped/ConnectModalWithButtonWrapped';
 
 export const ConnectButtonWithModal = () => {
     const { theme } = useContext(ThemeContext);
 
+    const ModalWithButton = useMemo(() => createButtonWithModal(), []);
+
     const { setSource, connect, setAccount } = useWallet();
 
     const connectHandler = useCallback(
@@ -32,12 +34,5 @@ export const ConnectButtonWithModal = () => {
         [connectHandler],
     );
 
-    return (
-        <>
-            <ConnectModalWithButtonWrapped
-                mode={theme.mode}
-                onSourceClick={_connect}
-            />
-        </>
-    );
+    return <ModalWithButton mode={theme.mode} onSourceClick={_connect} />;
 };
diff --git a/packages/dapp-kit-react/src/Components/ConnectWalletButtonWithModal/Components/Wrapped/ConnectModalWithButtonWrapped.tsx b/packages/dapp-kit-react/src/Components/ConnectWalletButtonWithModal/Components/Wrapped/ConnectModalWithButtonWrapped.tsx
index ca9cad6a..249702bf 100644
--- a/packages/dapp-kit-react/src/Components/ConnectWalletButtonWithModal/Components/Wrapped/ConnectModalWithButtonWrapped.tsx
+++ b/packages/dapp-kit-react/src/Components/ConnectWalletButtonWithModal/Components/Wrapped/ConnectModalWithButtonWrapped.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import { createComponent } from '@lit/react';
 import { ConnectButtonWithModal } from '@vechainfoundation/dapp-kit-ui';
 
-export const ConnectModalWithButtonWrapped = createComponent({
-    tagName: 'vwk-connect-button-with-modal',
-    elementClass: ConnectButtonWithModal,
-    react: React,
-});
+export const createButtonWithModal = () =>
+    createComponent({
+        tagName: 'vwk-connect-button-with-modal',
+        elementClass: ConnectButtonWithModal,
+        react: React,
+    });