From 3c4327a4b39246317b544e2f5bffbf4eff73a8f6 Mon Sep 17 00:00:00 2001 From: Davide Carpini Date: Mon, 29 Jan 2024 15:01:01 +0100 Subject: [PATCH] fix: rendering button options issue --- examples/sample-next-app/src/app/layout.tsx | 41 +++++++++++- .../src/app/pages/homepage.tsx | 28 +-------- packages/dapp-kit-react/package.json | 2 +- packages/dapp-kit-ui/package.json | 2 +- packages/dapp-kit-ui/src/client.ts | 14 ++--- .../src/components/buttons/button.ts | 19 ++++-- packages/dapp-kit-ui/src/utils/ui-config.ts | 63 ++++++++++++++----- packages/dapp-kit/package.json | 2 +- 8 files changed, 111 insertions(+), 60 deletions(-) diff --git a/examples/sample-next-app/src/app/layout.tsx b/examples/sample-next-app/src/app/layout.tsx index 6cc0dfb2..ad6c9b06 100644 --- a/examples/sample-next-app/src/app/layout.tsx +++ b/examples/sample-next-app/src/app/layout.tsx @@ -3,9 +3,37 @@ import { Inter } from 'next/font/google'; import './globals.css'; +import type { WalletConnectOptions } from '@vechain/dapp-kit'; +import dynamic from 'next/dynamic'; + +const DAppKitProvider = dynamic( + async () => { + const { DAppKitProvider: _DAppKitProvider } = await import( + '@vechain/dapp-kit-react' + ); + return _DAppKitProvider; + }, + { + ssr: false, + }, +); const inter = Inter({ subsets: ['latin'] }); +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 import/no-default-export export default function RootLayout({ children, @@ -17,7 +45,18 @@ export default function RootLayout({ Next JS - {children} + + + {children} + + ); } diff --git a/examples/sample-next-app/src/app/pages/homepage.tsx b/examples/sample-next-app/src/app/pages/homepage.tsx index 894c7776..53678130 100644 --- a/examples/sample-next-app/src/app/pages/homepage.tsx +++ b/examples/sample-next-app/src/app/pages/homepage.tsx @@ -1,13 +1,12 @@ // eslint-disable-next-line eslint-comments/disable-enable-pair /* eslint-disable react/function-component-definition */ +'use client'; // This is a client component import { type ReactElement, useEffect, useState } from 'react'; import { WalletButton, - DAppKitProvider, useWalletModal, useWallet, } from '@vechain/dapp-kit-react'; -import type { WalletConnectOptions } from '@vechain/dapp-kit'; const Button = (): ReactElement => { const { account } = useWallet(); @@ -45,31 +44,8 @@ const Button = (): ReactElement => { ); }; -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 HomePage = (): ReactElement => { - return ( - -