134 feat check react component wrapping

apps/sample-react-app/src/App.tsx

@@ -1,7 +1,7 @@
 import reactLogo from './assets/react.svg';
 import viteLogo from '/vite.svg';
 import './App.css';
-import { ConnectWalletButtonWithModal } from '@vechainfoundation/dapp-kit-react';
+import { VechainDappConnectKit } from '@vechainfoundation/dapp-kit-react';
 
 function App() {
     return (
@@ -20,7 +20,7 @@ function App() {
             </div>
             <h1>Vite + React</h1>
             <div className="card">
-                <ConnectWalletButtonWithModal />
+                <VechainDappConnectKit />
             </div>
             <p className="read-the-docs">
                 Click on the Vite and React logos to learn more

packages/dapp-kit-react/src/Components/VechainDappConnectKit/VechainDappConnectKit.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import GlobalFonts from '../../../assets/fonts/fonts';
+import { ThemeProvider } from '../../provider/ThemeProvider';
+import { VechainDappConnectKitWithTheme } from './Wrapped/VechainDappConnectKitWrapped';
+
+export const VechainDappConnectKit: React.FC = (): React.ReactElement => {
+    return (
+        <ThemeProvider>
+            <GlobalFonts />
+            <VechainDappConnectKitWithTheme />
+        </ThemeProvider>
+    );
+};

packages/dapp-kit-react/src/Components/VechainDappConnectKit/Wrapped/VechainDappConnectKitWrapped.tsx

@@ -0,0 +1,22 @@
+import React, { useMemo } from 'react';
+import { createComponent } from '@lit/react';
+import { VechainDappConnectKit as VechainDappConnectKitVanilla } from '@vechainfoundation/dapp-kit-ui';
+import { useThemeSelector } from '../../../provider/ThemeProvider';
+
+const VechainDappConnectKitWrapped = () =>
+    createComponent({
+        tagName: 'vwk-vechain-dapp-connect-kit',
+        elementClass: VechainDappConnectKitVanilla,
+        react: React,
+    });
+
+export const VechainDappConnectKitWithTheme: React.FC = () => {
+    const { theme } = useThemeSelector();
+
+    const VechainDappConnectKit = useMemo(
+        () => VechainDappConnectKitWrapped(),
+        [],
+    );
+
+    return <VechainDappConnectKit mode={theme.mode} />;
+};

packages/dapp-kit-react/src/Components/VechainDappConnectKit/index.ts

@@ -0,0 +1 @@
+export * from './VechainDappConnectKit';

packages/dapp-kit-react/src/Components/index.ts

@@ -1,3 +1,4 @@
 export * from './ConnectWalletButtonWithModal';
 export * from './ConnectWalletModal';
 export * from './SelectWalletModal';
+export * from './VechainDappConnectKit';

packages/dapp-kit-react/test/helpers/react-test-helpers.tsx

@@ -1,15 +1,17 @@
 import {
-    ConnectWalletButtonWithModal,
     ConnectWalletModal,
     DAppKitProvider,
     SelectWalletModal,
+    VechainDappConnectKit,
+    ConnectWalletButtonWithModal,
 } from '../../src';
 import { ThemeProvider } from '../../src/provider/ThemeProvider';
 
 export const wrapper = ({ children }: { children?: React.ReactNode }) => (
     <DAppKitProvider nodeUrl="https://testnet.vechain.org">
         <ThemeProvider>
             {children}
+            <VechainDappConnectKit />
             <ConnectWalletButtonWithModal />
             <SelectWalletModal isOpen={false} />
             <ConnectWalletModal isOpen={false} />