134 feat check react component wrapping (#135)

* feat: wrap vechain dapp connect kit in react * revert: create button with modal wrapped * test: wrapped vechain dapp connect kit --------- Co-authored-by: Darren Kelly <[email protected]>
vechain · Dec 5, 2023 · 0f8d406 · 0f8d406
1 parent 375c218
commit 0f8d406
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 6 deletions.
diff --git a/apps/sample-react-app/src/App.tsx b/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 '@vechain/dapp-kit-react';
+import { VechainDappConnectKit } from '@vechain/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

diff --git a/packages/dapp-kit-react/src/Components/VechainDappConnectKit/VechainDappConnectKit.tsx b/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>
+    );
+};
diff --git a/...p-kit-react/src/Components/VechainDappConnectKit/Wrapped/VechainDappConnectKitWrapped.tsx b/...p-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 '@vechain/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} />;
+};
diff --git a/packages/dapp-kit-react/src/Components/VechainDappConnectKit/index.ts b/packages/dapp-kit-react/src/Components/VechainDappConnectKit/index.ts
@@ -0,0 +1 @@
+export * from './VechainDappConnectKit';
diff --git a/packages/dapp-kit-react/src/Components/index.ts b/packages/dapp-kit-react/src/Components/index.ts
@@ -1,3 +1,4 @@
 export * from './ConnectWalletButtonWithModal';
 export * from './ConnectWalletModal';
 export * from './SelectWalletModal';
+export * from './VechainDappConnectKit';
diff --git a/packages/dapp-kit-react/test/helpers/react-test-helpers.tsx b/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} />

diff --git a/packages/dapp-kit-ui/src/modal.ts b/packages/dapp-kit-ui/src/modal.ts
@@ -85,8 +85,9 @@ export class DAppKitModal {
     open(): void {
         DAppKitLogger.debug('DAppKitModal', 'opening the modal');
 
-        const existingElement =
-            window.document.querySelector('vwk-connect-modal');
+        const existingElement = window.document.querySelector(
+            'vwk-vechain-dapp-connect-kit',
+        );
 
         if (!existingElement) {
             DAppKitLogger.debug(
@@ -95,7 +96,9 @@ export class DAppKitModal {
                 'creating a new element',
             );
 
-            const element = window.document.createElement('vwk-connect-modal');
+            const element = window.document.createElement(
+                'vwk-vechain-dapp-connect-kit',
+            );
 
             window.document.body.appendChild(element);
         }