fix: create component dynamically (#105)

vechain · Nov 27, 2023 · 92a0f00 · 92a0f00
1 parent 24db862
commit 92a0f00
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 15 deletions.
diff --git a/...t-react/src/Components/ConnectWalletButtonWithModal/Components/ConnectButtonWithModal.tsx b/...t-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/...ponents/ConnectWalletButtonWithModal/Components/Wrapped/ConnectModalWithButtonWrapped.tsx b/...ponents/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,
+    });