Adding Header and Footer

0xsequence · Apr 26, 2024 · b3392a7 · b3392a7
1 parent 6cfb93f
commit b3392a7
Show file tree

Hide file tree

Showing 10 changed files with 292 additions and 59 deletions.
diff --git a/examples/next/public/discord.svg b/examples/next/public/discord.svg
diff --git a/examples/next/public/github.svg b/examples/next/public/github.svg
diff --git a/examples/next/public/twitter.svg b/examples/next/public/twitter.svg
diff --git a/examples/next/public/youtube.svg b/examples/next/public/youtube.svg
diff --git a/examples/next/src/app/components/Footer.tsx b/examples/next/src/app/components/Footer.tsx
@@ -0,0 +1,142 @@
+import React from 'react'
+import { Box, Button, Image, Text, useMediaQuery, useTheme } from '@0xsequence/design-system'
+
+interface BottomPageLink {
+  label: string
+  url: string
+}
+
+export const bottomPageLinks: BottomPageLink[] = [
+  {
+    label: 'Terms',
+    url: 'https://sequence.xyz/terms'
+  },
+  {
+    label: 'About',
+    url: 'https://github.com/0xsequence/kit'
+  },
+  {
+    label: 'Blog',
+    url: 'https://sequence.xyz/blog'
+  },
+  {
+    label: 'Builder',
+    url: 'https://sequence.build'
+  },
+  {
+    label: 'Docs',
+    url: 'https://docs.sequence.xyz/wallet/connectors/kit/kit/overview'
+  }
+]
+
+interface SocialLinks {
+  id: string
+  url: string
+  icon: string
+}
+
+export const socialLinks: SocialLinks[] = [
+  {
+    id: 'discord',
+    url: 'https://discord.gg/sequence',
+    icon: 'discord.svg'
+  },
+  {
+    id: 'twitter',
+    url: 'https://www.twitter.com/0xsequence',
+    icon: 'twitter.svg'
+  },
+  {
+    id: 'youtube',
+    url: 'https://www.youtube.com/channel/UC1zHgUyV-doddTcnFNqt62Q',
+    icon: 'youtube.svg'
+  },
+  {
+    id: 'github',
+    url: 'https://github.com/0xsequence',
+    icon: 'github.svg'
+  }
+]
+
+export const Footer = () => {
+  const { theme } = useTheme()
+  const isMobile = useMediaQuery('isMobile')
+
+  const onClickLinkUrl = (url: string) => {
+    if (typeof window !== 'undefined') {
+      window.open(url)
+    }
+  }
+
+  const Links = () => {
+    return (
+      <Box flexDirection="row" gap="4">
+        {bottomPageLinks.map((link, index) => (
+          <Button
+            variant="text"
+            onClick={() => onClickLinkUrl(link.url)}
+            key={index}
+            gap="4"
+            label={<Text variant="small">{link.label}</Text>}
+          />
+        ))}
+      </Box>
+    )
+  }
+
+  const Socials = () => {
+    return (
+      <Box gap="4" justifyContent="center" alignItems="center">
+        {socialLinks.map((socialLink, index) => {
+          return (
+            <Box
+              key={index}
+              cursor="pointer"
+              opacity={{ hover: '80' }}
+              onClick={() => {
+                if (typeof window !== 'undefined') {
+                  window.open(socialLink.url)
+                }
+              }}
+            >
+              <Image
+                height="3"
+                src={socialLink.icon}
+                alt={socialLink.id}
+                style={{
+                  filter: theme === 'dark' ? 'invert(0)' : 'invert(1)'
+                }}
+              />
+            </Box>
+          )
+        })}
+      </Box>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Box
+        flexDirection="column"
+        padding="5"
+        gap="2"
+        style={{ height: '60px' }}
+        position="fixed"
+        bottom="0"
+        width="full"
+        justifyContent="center"
+        alignItems="center"
+      >
+        <Links />
+        <Socials />
+      </Box>
+    )
+  }
+
+  return (
+    <Box padding="5" style={{ height: '60px' }} position="fixed" bottom="0" width="full" justifyContent="space-between">
+      <Links />
+      <Socials />
+    </Box>
+  )
+}
diff --git a/examples/next/src/app/components/Header.tsx b/examples/next/src/app/components/Header.tsx
@@ -0,0 +1,38 @@
+import { truncateAddress } from '@/utils'
+import { Box, Image, Text, GradientAvatar } from '@0xsequence/design-system'
+import { useAccount } from 'wagmi'
+
+export const Header = () => {
+  const { address, connector } = useAccount()
+
+  return (
+    <Box padding="5" justifyContent="space-between">
+      <Box flexDirection="row" alignItems="center" justifyContent="center" gap="3">
+        <Image style={{ width: '36px' }} src="kit-logo.svg" alt="Sequence kit" />
+        <Image
+          style={{
+            width: '24px'
+            // filter: theme === 'dark' ? 'invert(0)' : 'invert(1)'
+          }}
+          src="kit-logo-text.svg"
+          alt="Sequence Kit Text Logo"
+        />
+      </Box>
+      <Box>
+        <Box flexDirection="column">
+          <Box flexDirection="row" gap="2" justifyContent="flex-end" alignItems="center">
+            <GradientAvatar address={String(address)} />
+            <Text fontWeight="medium" fontSize="normal" color="text100">
+              {truncateAddress(String(address), 8)}
+            </Text>
+          </Box>
+          <Box alignItems="center" justifyContent="flex-end" flexDirection="row">
+            <Text fontWeight="medium" fontSize="normal" color="text50">
+              {connector?.name}
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
diff --git a/examples/next/src/app/config.ts b/examples/next/src/app/config.ts
@@ -7,7 +7,7 @@ import { Transport, zeroAddress } from 'viem'
 
 export type ConnectionMode = 'waas' | 'universal'
 
-const connectionMode: ConnectionMode = 'universal'
+const connectionMode = 'universal' as ConnectionMode
 const isDebugMode = false
 
 const projectAccessKey = 'AQAAAAAAAEGvyZiWA9FMslYeG_yayXaHnSI'
@@ -81,7 +81,7 @@ const getUniversalConnectors = () => {
 export const wagmiConfig = createConfig({
   transports,
   chains,
-  connectors: (connectionMode as ConnectionMode) === 'waas' ? getWaasConnectors() : getUniversalConnectors()
+  connectors: connectionMode === 'waas' ? getWaasConnectors() : getUniversalConnectors()
 })
 
 export const kitConfig: KitConfig = {

diff --git a/examples/next/src/app/globals.css b/examples/next/src/app/globals.css
@@ -5,29 +5,7 @@
 }
 
 body {
-  background-color: black;
-}
-
-main {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
-.centered {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  min-width: 100vh;
-}
-
-.card {
-  border-radius: 8px;
-  border: 2px solid #eaeaea;
-  box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
-  padding: 20px;
-  margin: 20px;
-  width: 100%;
-  max-width: 50%;
+  background-color: var(--seq-colors-background-primary);
+  margin: 0;
+  padding: 0;
 }
diff --git a/examples/next/src/app/page.tsx b/examples/next/src/app/page.tsx
@@ -1,9 +1,13 @@
 'use client'
 
-import { Box, Image, Button } from '@0xsequence/design-system'
+import { truncateAddress } from '@/utils'
+import { Box, Image, Button, Text, GradientAvatar } from '@0xsequence/design-system'
 import { useOpenConnectModal } from '@0xsequence/kit'
+
 import { useEffect, useState } from 'react'
 import { useAccount, useDisconnect } from 'wagmi'
+import { Header } from './components/Header'
+import { Footer } from './components/Footer'
 
 export default function Home() {
   const [isClient, setIsClient] = useState(false)
@@ -16,33 +20,31 @@ export default function Home() {
 
   return isClient ? (
     <main>
-      <h1>Next + SequenceKit</h1>
-
-      <div className="centered">
-        {!isConnected ? (
-          <Box flexDirection="column" alignItems="center" justifyContent="center" gap="5">
-            <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>
+      {!isConnected ? (
+        <Box flexDirection="column" alignItems="center" justifyContent="center" gap="5">
+          <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>
-        ) : (
-          <Connected />
-        )}
-      </div>
+          <Box gap="2" flexDirection="row" alignItems="center">
+            <Button onClick={() => setOpenConnectModal(true)} variant="feature" label="Connect" />
+          </Box>
+        </Box>
+      ) : (
+        <Connected />
+      )}
+
+      <Footer />
     </main>
   ) : null
 }
@@ -52,10 +54,8 @@ const Connected = () => {
   const { disconnect } = useDisconnect()
 
   return (
-    <div className="card">
-      <h2>Connected</h2>
-      <p>Address: {address}</p>
-      <button onClick={() => disconnect()}>Disconnect</button>
-    </div>
+    <>
+      <Header />
+    </>
   )
 }