fix: extension wasn't working unless running without ssr (#108)

* fix: extension wasn't working unless running without ssr * feat: add modal only component
vechain · Nov 28, 2023 · 6da3695 · 6da3695
1 parent b8e0a6b
commit 6da3695
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 46 deletions.
diff --git a/apps/sample-next-app/src/app/layout.tsx b/apps/sample-next-app/src/app/layout.tsx
@@ -3,28 +3,6 @@
 
 import { Inter } from 'next/font/google';
 import './globals.css';
-import type { Options } from '@vechain/connex';
-import { ConnexProvider } from '@vechainfoundation/dapp-kit-react';
-import type { WalletConnectOptions } from '@vechainfoundation/dapp-kit';
-
-const nodeOptions: Omit<Options, 'signer'> = {
-    node: 'https://testnet.vechain.org/',
-    network: 'test',
-};
-
-const walletConnectOptions: WalletConnectOptions = {
-    projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
-    metadata: {
-        name: 'Sample VeChain dApp',
-        description: 'A sample VeChain dApp',
-        url: typeof window !== 'undefined' ? window.location.origin : '',
-        icons: [
-            typeof window !== 'undefined'
-                ? `${window.location.origin}/images/logo/my-dapp.png`
-                : '',
-        ],
-    },
-};
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -36,16 +14,7 @@ export default function RootLayout({
 }): React.ReactElement {
     return (
         <html lang="en">
-            <body className={inter.className}>
-                <ConnexProvider
-                    key="connex"
-                    nodeOptions={nodeOptions}
-                    persistState
-                    walletConnectOptions={walletConnectOptions}
-                >
-                    {children}
-                </ConnexProvider>
-            </body>
+            <body className={inter.className}>{children}</body>
         </html>
     );
 }
diff --git a/apps/sample-next-app/src/app/page.tsx b/apps/sample-next-app/src/app/page.tsx
@@ -1,23 +1,17 @@
 'use client'; // This is a client component
 
-import {
-    ConnectWalletButtonWithModal,
-    useWallet,
-} from '@vechainfoundation/dapp-kit-react';
-import React, { useEffect } from 'react';
+import React from 'react';
+import dynamic from 'next/dynamic';
 
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type, import/no-default-export
-export default function Home() {
-    const { account } = useWallet();
-
-    useEffect(() => {
-        // eslint-disable-next-line no-console
-        console.log('account', account);
-    }, [account]);
+const ConnectWalletButton = dynamic(() => import('./pages/homepage'), {
+    ssr: false,
+});
 
+// eslint-disable-next-line import/no-default-export
+export default function Page() {
     return (
         <main>
-            <ConnectWalletButtonWithModal />
+            <ConnectWalletButton />
         </main>
     );
 }
diff --git a/apps/sample-next-app/src/app/pages/homepage.tsx b/apps/sample-next-app/src/app/pages/homepage.tsx
@@ -0,0 +1,58 @@
+import {
+    ConnectWalletButtonWithModal,
+    ConnexProvider,
+    useWallet,
+} from '@vechainfoundation/dapp-kit-react';
+import type { Options } from '@vechain/connex';
+import type { WalletConnectOptions } from '@vechainfoundation/dapp-kit';
+import { useEffect } from 'react';
+
+const nodeOptions: Omit<Options, 'signer'> = {
+    node: 'https://testnet.vechain.org/',
+    network: 'test',
+};
+
+const walletConnectOptions: WalletConnectOptions = {
+    projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
+    metadata: {
+        name: 'Sample VeChain dApp',
+        description: 'A sample VeChain dApp',
+        url: typeof window !== 'undefined' ? window.location.origin : '',
+        icons: [
+            typeof window !== 'undefined'
+                ? `${window.location.origin}/images/logo/my-dapp.png`
+                : '',
+        ],
+    },
+};
+
+// eslint-disable-next-line func-style
+function ConnectWallet() {
+    const { account } = useWallet();
+
+    useEffect(() => {
+        if (account) {
+            // eslint-disable-next-line no-console
+            console.log('account', account);
+        }
+    }, [account]);
+
+    return <ConnectWalletButtonWithModal />;
+}
+
+// eslint-disable-next-line func-style
+function HomePage() {
+    return (
+        <ConnexProvider
+            key="connex"
+            nodeOptions={nodeOptions}
+            persistState
+            walletConnectOptions={walletConnectOptions}
+        >
+            <ConnectWallet />
+        </ConnexProvider>
+    );
+}
+
+// eslint-disable-next-line import/no-default-export
+export default HomePage;
diff --git a/packages/dapp-kit-react/src/Components/ConnectWalletModal/ConnectWalletModal.tsx b/packages/dapp-kit-react/src/Components/ConnectWalletModal/ConnectWalletModal.tsx
@@ -0,0 +1,16 @@
+import React, { useMemo } from 'react';
+import { createComponent } from '@lit/react';
+import { ConnectModal } from '@vechainfoundation/dapp-kit-ui';
+
+export const createButtonWithModal = () =>
+    createComponent({
+        tagName: 'vwk-connect-modal',
+        elementClass: ConnectModal,
+        react: React,
+    });
+
+export const ConnectWalletModal: React.FC = () => {
+    const Modal = useMemo(() => createButtonWithModal(), []);
+
+    return <Modal />;
+};
diff --git a/packages/dapp-kit-react/src/Components/ConnectWalletModal/index.ts b/packages/dapp-kit-react/src/Components/ConnectWalletModal/index.ts
@@ -0,0 +1 @@
+export * from './ConnectWalletModal';
diff --git a/packages/dapp-kit-react/src/Components/index.ts b/packages/dapp-kit-react/src/Components/index.ts
@@ -1 +1,2 @@
 export * from './ConnectWalletButtonWithModal';
+export * from './ConnectWalletModal';
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './ConnectWalletButtonWithModal';
		export * from './ConnectWalletModal';