Merge pull request #2 from janndriessen/feat/payment-ui

feat: payment ui
janndriessen · Jan 13, 2024 · f5a5315 · f5a5315
2 parents 28da0f6 + c0896a3
commit f5a5315
Show file tree

Hide file tree

Showing 15 changed files with 4,973 additions and 389 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,20 @@
 # GHOPAY
 
 Submission for [LFGHO](https://ethglobal.com/events/lfgho) - ETHGlobal 2024
+
+## Setup
+
+### /shop
+
+The shop application included the payment online shop and merchant dashboard flow.
+
+```
+nvm current
+v20.11.0 // make sure to use the latest node.js version
+
+cp .env.default .env.local
+
+npm install
+
+npm run dev
+```
diff --git a/shop/.env.default b/shop/.env.default
@@ -0,0 +1,2 @@
+ALCHEMY_ID=
+WALLETCONNECT_PROJECT_ID=
diff --git a/shop/package-lock.json b/shop/package-lock.json
diff --git a/shop/package.json b/shop/package.json
@@ -9,14 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "connectkit": "^1.6.0",
+    "framer-motion": "^10.18.0",
     "lucide-react": "^0.309.0",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",
     "tailwind-merge": "^2.2.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "viem": "^1.21.4",
+    "wagmi": "^1.4.13"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/shop/public/assets/icon-black.svg b/shop/public/assets/icon-black.svg
diff --git a/shop/public/assets/icon-light.svg b/shop/public/assets/icon-light.svg
diff --git a/shop/public/assets/qr-code-temp.png b/shop/public/assets/qr-code-temp.png
diff --git a/shop/src/app/globals.css b/shop/src/app/globals.css
@@ -1,76 +1,78 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --foreground: 245.29 16.5% 40.39%;
 
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
+
+    /* GHO colors */
+    --primary: 258.62 47.54% 88.04%;
+    --primary-foreground: 245.29 16.5% 40.39%;
+
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
- 
+
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
+
+    /* GHO colors */
+    --accent: 258.62 47.54% 88.04%;
+    --accent-foreground: 245.29 16.5% 40.39%;
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
- 
+
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
- 
+
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
- 
+
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
- 
+
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
- 
+
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
- 
+
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
   }
-}
+}
diff --git a/shop/src/app/layout.tsx b/shop/src/app/layout.tsx
@@ -1,5 +1,8 @@
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
+
+import { Providers } from './providers'
+
 import './globals.css'
 
 const inter = Inter({ subsets: ['latin'] })
@@ -16,7 +19,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Providers>{children}</Providers>
+      </body>
     </html>
   )
 }
diff --git a/shop/src/app/payment/components/gho-button.tsx b/shop/src/app/payment/components/gho-button.tsx
@@ -0,0 +1,26 @@
+import { motion } from 'framer-motion'
+import Image from 'next/image'
+
+import { PrimaryButton } from '@/components/ui/button'
+
+type GhoButtonProps = {
+  onClick: () => void
+}
+
+export function GhoButton({ onClick }: GhoButtonProps) {
+  return (
+    <motion.button whileHover={{ scale: 1.06 }} whileTap={{ scale: 0.96 }}>
+      <PrimaryButton size={'lg'} onClick={onClick}>
+        <div className="flex items-center gap-2">
+          <Image
+            src="/assets/icon-light.svg"
+            width={36}
+            height={36}
+            alt="GHO icon"
+          />
+          <p>Pay with GHO</p>
+        </div>
+      </PrimaryButton>
+    </motion.button>
+  )
+}
diff --git a/shop/src/app/payment/components/payment-popup.tsx b/shop/src/app/payment/components/payment-popup.tsx
@@ -0,0 +1,103 @@
+import { ConnectKitButton } from 'connectkit'
+import { motion } from 'framer-motion'
+
+import './styles.css'
+
+const sidebar = {
+  open: () => ({
+    right: 0,
+    transition: {
+      type: 'spring',
+      damping: 20,
+      stiffness: 100,
+      restDelta: 2,
+    },
+  }),
+  closed: {
+    right: '-400px',
+    transition: {
+      delay: 0.5,
+      type: 'spring',
+      stiffness: 400,
+      damping: 40,
+    },
+  },
+}
+
+const variants = {
+  open: {
+    transition: { staggerChildren: 0.07, delayChildren: 0.2 },
+  },
+  closed: {
+    transition: { staggerChildren: 0.05, staggerDirection: -1 },
+  },
+}
+
+const variantsItems = {
+  open: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      y: { stiffness: 1000, velocity: -100 },
+    },
+  },
+  closed: {
+    y: 50,
+    opacity: 0,
+    transition: {
+      y: { stiffness: 1000 },
+    },
+  },
+}
+
+export const PaymentPopup = () => (
+  <motion.div className="background shadow-xl p-8" variants={sidebar}>
+    <motion.ul variants={variants}>
+      <PayHeadline label="Pay 129.159 GHO" key={0} />
+      <QRCode code={'0x0'} key={1} />
+      <div className="mt-6">
+        <Text label="To pay, scan the code inside the app" key={2} />
+      </div>
+      <div className="mt-16">
+        <Text label="or..." key={3} />
+      </div>
+      <div className="flex flex-col items-center mt-8 w-full">
+        <motion.li variants={variantsItems}>
+          <ConnectKitButton />
+        </motion.li>
+      </div>
+    </motion.ul>
+  </motion.div>
+)
+
+export const PayHeadline = ({ label }: { label: string }) => {
+  return (
+    <motion.li variants={variantsItems}>
+      <h2 className="font-bold text-4xl text-center mt-8">{label}</h2>
+    </motion.li>
+  )
+}
+
+/* eslint-disable @next/next/no-img-element */
+export const QRCode = ({ code }: { code: string }) => {
+  return (
+    <motion.li variants={variantsItems}>
+      <div className="bg-white rounded-xl p-8 mt-8">
+        <img
+          src="/assets/qr-code-temp.png"
+          width={300}
+          height={300}
+          alt="GHO QR code"
+        />
+      </div>
+    </motion.li>
+  )
+}
+
+export const Text = ({ label }: { label: string }) => {
+  return (
+    <motion.li variants={variantsItems}>
+      <p className="font-semibold text-3xl text-center">{label}</p>
+    </motion.li>
+  )
+}
diff --git a/shop/src/app/payment/components/styles.css b/shop/src/app/payment/components/styles.css
@@ -0,0 +1,8 @@
+.background {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 400px;
+  background: linear-gradient(to bottom, #dbd2ef, #f0ebf9 60%);
+}
diff --git a/shop/src/app/payment/page.tsx b/shop/src/app/payment/page.tsx
@@ -1,3 +1,25 @@
+'use client'
+
+import { useEffect, useState, useRef, MutableRefObject } from 'react'
+import { motion, useCycle } from 'framer-motion'
+
+import { GhoButton } from './components/gho-button'
+import { PaymentPopup } from './components/payment-popup'
+
 export default function Payment() {
-  return <h1>Payment</h1>
+  const [isOpen, toggleOpen] = useCycle(false, true)
+
+  const onClickPay = () => {
+    console.log('open payment')
+    toggleOpen()
+  }
+
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <motion.nav initial={false} animate={isOpen ? 'open' : 'closed'}>
+        <PaymentPopup />
+        <GhoButton onClick={onClickPay} />
+      </motion.nav>
+    </div>
+  )
 }
diff --git a/shop/src/app/providers.tsx b/shop/src/app/providers.tsx
@@ -0,0 +1,36 @@
+'use client'
+
+import { WagmiConfig, createConfig } from 'wagmi'
+import { sepolia } from 'wagmi/chains'
+import {
+  ConnectKitProvider,
+  ConnectKitButton,
+  getDefaultConfig,
+} from 'connectkit'
+
+const config = createConfig(
+  getDefaultConfig({
+    alchemyId: process.env.ALCHEMY_ID!,
+    walletConnectProjectId: process.env.WALLETCONNECT_PROJECT_ID!,
+
+    // Required
+    appName: 'GHOPAY',
+
+    // Optional
+    appDescription: 'G(H)O PAY!',
+    appUrl: 'https://gho.xyz',
+    appIcon: 'https://family.co/logo.png', // your app's icon, no bigger than 1024x1024px (max. 1MB)
+    chains: [sepolia],
+  }),
+)
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <WagmiConfig config={config}>
+      <ConnectKitProvider theme={'soft'} mode={'light'}>
+        {children}
+        <ConnectKitButton />
+      </ConnectKitProvider>
+    </WagmiConfig>
+  )
+}