diff --git a/examples/next/public/discord.svg b/examples/next/public/discord.svg
new file mode 100644
index 00000000..b4ca26f4
--- /dev/null
+++ b/examples/next/public/discord.svg
@@ -0,0 +1,18 @@
+
+
diff --git a/examples/next/public/github.svg b/examples/next/public/github.svg
new file mode 100644
index 00000000..5a9a1f46
--- /dev/null
+++ b/examples/next/public/github.svg
@@ -0,0 +1,21 @@
+
+
diff --git a/examples/next/public/twitter.svg b/examples/next/public/twitter.svg
new file mode 100644
index 00000000..46a33e5f
--- /dev/null
+++ b/examples/next/public/twitter.svg
@@ -0,0 +1,18 @@
+
+
diff --git a/examples/next/public/youtube.svg b/examples/next/public/youtube.svg
new file mode 100644
index 00000000..4f8014f9
--- /dev/null
+++ b/examples/next/public/youtube.svg
@@ -0,0 +1,11 @@
+
\ No newline at end of file
diff --git a/examples/next/src/app/components/Footer.tsx b/examples/next/src/app/components/Footer.tsx
new file mode 100644
index 00000000..41fa9f50
--- /dev/null
+++ 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 (
+
+ {bottomPageLinks.map((link, index) => (
+
+ )
+ }
+
+ const Socials = () => {
+ return (
+
+ {socialLinks.map((socialLink, index) => {
+ return (
+ {
+ if (typeof window !== 'undefined') {
+ window.open(socialLink.url)
+ }
+ }}
+ >
+
+
+ )
+ })}
+
+ )
+ }
+
+ if (isMobile) {
+ return (
+
+
+
+
+ )
+ }
+
+ return (
+
+
+
+
+ )
+}
diff --git a/examples/next/src/app/components/Header.tsx b/examples/next/src/app/components/Header.tsx
new file mode 100644
index 00000000..8378059e
--- /dev/null
+++ 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 (
+
+
+
+
+
+
+
+
+
+
+ {truncateAddress(String(address), 8)}
+
+
+
+
+ {connector?.name}
+
+
+
+
+
+ )
+}
diff --git a/examples/next/src/app/config.ts b/examples/next/src/app/config.ts
index 5899aa8a..5f9572a6 100644
--- 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
index 1eb643e5..3e021fe5 100644
--- 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
index 1418f98a..549413ec 100644
--- 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 ? (
- Next + SequenceKit
-
-
- {!isConnected ? (
-
-
-
-
-
-
-
-
-
-
+ {!isConnected ? (
+
+
+
+
+
+
+
- ) : (
-
- )}
-
+
+
+
+ ) : (
+
+ )}
+
+
) : null
}
@@ -52,10 +54,8 @@ const Connected = () => {
const { disconnect } = useDisconnect()
return (
-
-
Connected
-
Address: {address}
-
-