Web3Modal Demo (#2028)

Co-authored-by: tomiir <rocchitomas@gmail.com>
reown-com · Mar 26, 2024 · 832cc6f · 832cc6f
1 parent 9887e9f
commit 832cc6f
Show file tree

Hide file tree

Showing 28 changed files with 2,139 additions and 30 deletions.
diff --git a/apps/demo/.eslintrc.json b/apps/demo/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["../../.eslintrc.json"]
+}
diff --git a/apps/demo/.gitignore b/apps/demo/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/apps/demo/app/favicon.ico b/apps/demo/app/favicon.ico
diff --git a/apps/demo/app/layout.tsx b/apps/demo/app/layout.tsx
@@ -0,0 +1,42 @@
+import type { Metadata } from 'next'
+import localFont from 'next/font/local'
+import '@/styles/globals.css'
+import Web3ModalProvider from '@/context/Web3Modal'
+
+const abcDiatype = localFont({
+  src: [
+    {
+      path: '../public/fonts/ABCDiatype-Regular.woff2',
+      weight: '400'
+    },
+    {
+      path: '../public/fonts/ABCDiatype-Bold.woff2',
+      weight: '700'
+    }
+  ],
+  variable: '--font-abcDiatype'
+})
+
+export const metadata: Metadata = {
+  title: 'Web3Modal | Demo',
+  description:
+    'Web3Modal is an elegantly simple yet powerful library that helps you manage your multi-chain wallet connection flows, all in one place.',
+  openGraph: {
+    description:
+      'Your on-ramp to web3 multichain. Web3Modal is a versatile library that makes it super easy to connect users with your Dapp and start interacting with the blockchain.'
+  }
+}
+
+export default function RootLayout({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body className={abcDiatype.className}>
+        <Web3ModalProvider>{children}</Web3ModalProvider>
+      </body>
+    </html>
+  )
+}
diff --git a/apps/demo/app/page.tsx b/apps/demo/app/page.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import Gradient from '@/components/Gradient'
+import ConfigSection from '@/components/ConfigSection'
+import ViewSection from '@/components/ViewSection'
+import NavSection from '@/components/NavSection'
+import { motion } from 'framer-motion'
+import { VARIANTS } from '@/utils/constants'
+
+export default function Home() {
+  // Web3Modal Demo
+  return (
+    <motion.main
+      variants={VARIANTS}
+      initial="initial"
+      animate="animate"
+      transition={{
+        delayChildren: 0.2,
+        staggerChildren: 0.4
+      }}
+      className="h-d-screen relative overflow-hidden"
+    >
+      <NavSection />
+      <div className="grid grid-cols-3 h-full pt-20">
+        <div className="col-span-1 bg-white border-r border-slate-100 relative">
+          <ConfigSection />
+        </div>
+        <div className="col-span-2 shadow-[inset_0_-2px_24px_rgba(0,0,0,0.05)] px-12 py-8 grid place-items-center relative">
+          <ViewSection />
+        </div>
+      </div>
+      <Gradient />
+    </motion.main>
+  )
+}
diff --git a/apps/demo/assets/images/w3m-logo.png b/apps/demo/assets/images/w3m-logo.png
diff --git a/apps/demo/components/ConfigSection.tsx b/apps/demo/components/ConfigSection.tsx
@@ -0,0 +1,80 @@
+'use client'
+
+import React from 'react'
+import Button from './ui/button'
+import { motion } from 'framer-motion'
+import { VARIANTS } from '@/utils/constants'
+import { useConfig } from '@/store/ConfigStore'
+import Switch from './ui/switch'
+
+function CopyIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className="w-4 h-4 ml-1"
+    >
+      <title> Copy Icon</title>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+      />
+    </svg>
+  )
+}
+
+export default function ConfigSection() {
+  const {
+    enableEmail,
+    enableInjected,
+    enableEIP6963,
+    enableCoinbase,
+    setEnableEmail,
+    setEnableInjected,
+    setEnableEIP6963,
+    setEnableCoinbase
+  } = useConfig()
+
+  return (
+    <motion.div variants={VARIANTS} className="h-full">
+      <motion.div
+        variants={VARIANTS}
+        initial="initial"
+        animate="animate"
+        transition={{
+          delayChildren: 0.8,
+          staggerChildren: 0.2
+        }}
+        className="flex flex-col h-full"
+      >
+        <div className="flex-grow px-12 py-8">
+          <motion.h1 variants={VARIANTS} className="text-xl font-bold">
+            Build Your Own Web3Modal
+          </motion.h1>
+          <motion.p variants={VARIANTS} className="text-[var(--navy-400)] text-sm mt-1 mb-6">
+            Modify the configuration to suit your needs. You can copy the config and use it in your
+            project.
+          </motion.p>
+          <motion.div variants={VARIANTS} className="space-y-4">
+            <Switch label="Email" checked={enableEmail} onCheckedChange={setEnableEmail} />
+            <Switch label="Injected" checked={enableInjected} onCheckedChange={setEnableInjected} />
+            <Switch label="EIP-6963" checked={enableEIP6963} onCheckedChange={setEnableEIP6963} />
+            <Switch label="Coinbase" checked={enableCoinbase} onCheckedChange={setEnableCoinbase} />
+          </motion.div>
+        </div>
+        <div className="px-10 py-8 bg-white border-t border-slate-100 w-full flex items-center justify-between">
+          <Button
+            variant="link"
+            value="Documentation"
+            href="https://docs.walletconnect.com/web3modal/about?utm_source=docs&utm_medium=docs&utm_campaign=demo&utm_content=w3m"
+          />
+          <Button value="Copy Config" icon={<CopyIcon />} className="" />
+        </div>
+      </motion.div>
+    </motion.div>
+  )
+}
diff --git a/apps/demo/components/Gradient.tsx b/apps/demo/components/Gradient.tsx
@@ -0,0 +1,25 @@
+export default function Gradient() {
+  return (
+    <div className="h-d-screen absolute top-0 left-0 h-full w-full -z-10">
+      <div
+        className="absolute w-full h-full -z-10 opacity-30"
+        style={{
+          background: 'radial-gradient(circle at 40% 100%, #5BFF6C, transparent 40%)'
+        }}
+      />
+      <div
+        className="absolute w-full h-full -z-10 opacity-30"
+        style={{
+          background:
+            'radial-gradient(circle at 61.0647% 52.5025%, rgb(154, 170, 255), transparent 60%)'
+        }}
+      />
+      <div
+        className="absolute w-full h-full -z-20 opacity-30"
+        style={{
+          background: 'rgb(240,240,240)'
+        }}
+      />
+    </div>
+  )
+}
diff --git a/apps/demo/components/NavSection.tsx b/apps/demo/components/NavSection.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import Image from 'next/image'
+import W3mLogo from '@/assets/images/w3m-logo.png'
+import { motion } from 'framer-motion'
+import { VARIANTS } from '@/utils/constants'
+
+export default function NavSection() {
+  return (
+    <nav className="fixed top-0 left-0 h-20 w-full px-10 text-2xl flex items-center font-bold gap-2 bg-white border-b border-slate-100">
+      <motion.a variants={VARIANTS} href="/" className="flex gap-2 items-center leading-none">
+        <Image
+          src={W3mLogo}
+          placeholder="blur"
+          alt="Web3Modal Logo"
+          width={40}
+          height={40}
+          className="rounded-lg"
+        />
+        <span className="pt-0.5">Web3Modal</span>
+      </motion.a>
+    </nav>
+  )
+}
diff --git a/apps/demo/components/ViewSection.tsx b/apps/demo/components/ViewSection.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import { VARIANTS } from '@/utils/constants'
+import React from 'react'
+import { motion } from 'framer-motion'
+import { useConfig } from '@/store/ConfigStore'
+
+export default function ViewSection() {
+  const { enableEmail, enableEIP6963, enableInjected, enableCoinbase } = useConfig()
+
+  return (
+    <motion.div
+      variants={VARIANTS}
+      className="bg-white relative h-[36rem] w-96 grid place-items-center rounded-3xl text-xl shadow-slate-900/5 shadow-lg border-slate-200 border text-center p-8"
+    >
+      <p className="absolute top-0 ml-auto py-8 opacity-50 text-sm">Hopefully Web3Modal here lol</p>
+      <div className="w-full">
+        <p className="flex justify-between">
+          Email:
+          <span>{enableEmail ? '🟢' : '🔴'}</span>
+        </p>
+        <p className="flex justify-between">
+          EIP-6963:
+          <span>{enableEIP6963 ? '🟢' : '🔴'}</span>
+        </p>
+        <p className="flex justify-between">
+          Injected:
+          <span>{enableInjected ? '🟢' : '🔴'}</span>
+        </p>
+        <p className="flex justify-between">
+          Coinbase:
+          <span>{enableCoinbase ? '🟢' : '🔴'}</span>
+        </p>
+      </div>
+    </motion.div>
+  )
+}
diff --git a/apps/demo/components/ui/button.tsx b/apps/demo/components/ui/button.tsx
@@ -0,0 +1,59 @@
+import { cn } from '@/utils/functions'
+import React from 'react'
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string
+  icon?: React.ReactNode
+  variant?: 'button' | 'link'
+  href?: string
+}
+
+export default function Button(props: ButtonProps) {
+  const { icon, value, className, variant, ...rest } = props
+
+  if (variant === 'link') {
+    return (
+      <a
+        href={props.href}
+        target="_blank"
+        rel="noreferrer"
+        className="text-[var(--navy-400)] gap-1 flex items-center hover:text-[var(--navy-300)] transition-colors hover:underline group"
+      >
+        {value}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          className="w-4 h-4 group-hover:text-[var(--navy-300)] transition-colors"
+        >
+          <path
+            fillRule="evenodd"
+            d="M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Z"
+            clipRule="evenodd"
+          />
+          <path
+            className="transition-transform group-hover:translate-x-px group-hover:-translate-y-px"
+            fillRule="evenodd"
+            d="M6.194 12.753a.75.75 0 0 0 1.06.053L16.5 4.44v2.81a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.553l-9.056 8.194a.75.75 0 0 0-.053 1.06Z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </a>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        'group gap-1 whitespace-nowrap cursor-pointer relative inline-flex items-center pl-[18px] pr-[12px] pt-[10px] py-[10px] rounded-xl text-[var(--white)] bg-[var(--blueberry)]',
+        className && className
+      )}
+      {...rest}
+    >
+      {value}
+      {icon && icon}
+      <div className="absolute top-0 left-0 h-full w-full bg-black opacity-0 rounded-[inherit] transition-opacity group-hover:opacity-5" />
+    </button>
+  )
+}
diff --git a/apps/demo/components/ui/switch.tsx b/apps/demo/components/ui/switch.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import * as SwitchBase from '@radix-ui/react-switch'
+
+interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+  label: string
+}
+
+export default function Switch(props: SwitchProps) {
+  return (
+    <div className="flex w-full items-center justify-between">
+      <span className="font-bold text-lg text-[var(--navy-200)]">{props.label}</span>
+      <SwitchBase.Root
+        checked={props.checked}
+        onCheckedChange={props.onCheckedChange}
+        className="w-10 h-6 p-[2px] rounded-full relative border bg-[var(--blueberry-litest)] border-slate-300 data-[state=checked]:bg-[var(--blueberry)] outline-none cursor-pointer"
+      >
+        <SwitchBase.Thumb className="block h-full aspect-square bg-white rounded-full border border-slate-300 transition-transform duration-100 translate-x-0 will-change-transform data-[state=checked]:translate-x-[calc(100%_-_2px)] shadow" />
+      </SwitchBase.Root>
+    </div>
+  )
+}
diff --git a/apps/demo/context/Web3Modal.tsx b/apps/demo/context/Web3Modal.tsx
@@ -0,0 +1,7 @@
+'use client'
+
+import React from 'react'
+
+export default function Web3ModalProvider({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}