examples/next: No need to wait for client side render within page

0xsequence · May 23, 2024 · 093049e · 093049e
1 parent 86a4f9e
commit 093049e
Showing 1 changed file with 23 additions and 33 deletions.
diff --git a/examples/next/src/app/page.tsx b/examples/next/src/app/page.tsx
@@ -2,50 +2,40 @@
 
 import { Box, Image, Button } from '@0xsequence/design-system'
 import { useOpenConnectModal } from '@0xsequence/kit'
-import { useEffect, useState } from 'react'
 import { useAccount } from 'wagmi'
 
 import { Connected } from './components/Connected'
 import { Footer } from './components/Footer'
 
 export default function Home() {
-  const [isClient, setIsClient] = useState(false)
   const { isConnected } = useAccount()
   const { setOpenConnectModal } = useOpenConnectModal()
 
-  useEffect(() => {
-    setIsClient(true)
-  }, [])
-
   return (
     <main>
-      {isClient ? (
-        <>
-          {!isConnected ? (
-            <Box flexDirection="column" alignItems="center" justifyContent="center" gap="5" height="vh">
-              <Box background="white" padding="2" borderRadius="sm">
-                <Image alt="Next" src="next.svg" height="3" />
-              </Box>
-              <Box flexDirection="row" alignItems="center" justifyContent="center" gap="3">
-                <Image alt="Sequence Kit Logo" style={{ width: '48px' }} src="kit-logo.svg" />
-                <Image
-                  alt="Sequence Kit Text Logo"
-                  style={{
-                    width: '32px'
-                    // filter: theme === 'dark' ? 'invert(0)' : 'invert(1)'
-                  }}
-                  src="kit-logo-text.svg"
-                />
-              </Box>
-              <Box gap="2" flexDirection="row" alignItems="center">
-                <Button onClick={() => setOpenConnectModal(true)} variant="feature" label="Connect" />
-              </Box>
-            </Box>
-          ) : (
-            <Connected />
-          )}
-        </>
-      ) : null}
+      {!isConnected ? (
+        <Box flexDirection="column" alignItems="center" justifyContent="center" gap="5" height="vh">
+          <Box background="white" padding="2" borderRadius="sm">
+            <Image alt="Next" src="next.svg" height="3" />
+          </Box>
+          <Box flexDirection="row" alignItems="center" justifyContent="center" gap="3">
+            <Image alt="Sequence Kit Logo" style={{ width: '48px' }} src="kit-logo.svg" />
+            <Image
+              alt="Sequence Kit Text Logo"
+              style={{
+                width: '32px'
+                // filter: theme === 'dark' ? 'invert(0)' : 'invert(1)'
+              }}
+              src="kit-logo-text.svg"
+            />
+          </Box>
+          <Box gap="2" flexDirection="row" alignItems="center">
+            <Button onClick={() => setOpenConnectModal(true)} variant="feature" label="Connect" />
+          </Box>
+        </Box>
+      ) : (
+        <Connected />
+      )}
 
       <Footer />
     </main>