diff --git a/apps/sample-next-app/src/app/layout.tsx b/apps/sample-next-app/src/app/layout.tsx index 5eaaaaa2..b41cacdb 100644 --- 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 = { - 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 ( - - - {children} - - + {children} ); } diff --git a/apps/sample-next-app/src/app/page.tsx b/apps/sample-next-app/src/app/page.tsx index 3e232d78..de684f70 100644 --- 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 (
- +
); } diff --git a/apps/sample-next-app/src/app/pages/homepage.tsx b/apps/sample-next-app/src/app/pages/homepage.tsx new file mode 100644 index 00000000..dd12f319 --- /dev/null +++ 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 = { + 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 ; +} + +// eslint-disable-next-line func-style +function HomePage() { + return ( + + + + ); +} + +// 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 new file mode 100644 index 00000000..3382da16 --- /dev/null +++ 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 ; +}; diff --git a/packages/dapp-kit-react/src/Components/ConnectWalletModal/index.ts b/packages/dapp-kit-react/src/Components/ConnectWalletModal/index.ts new file mode 100644 index 00000000..423a5eae --- /dev/null +++ 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 index 590adc22..2c610c67 100644 --- 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';