Implementing demo app design

reown-com · Dec 19, 2024 · 439288e · 439288e
1 parent 63f129d
commit 439288e
Show file tree

Hide file tree

Showing 44 changed files with 1,775 additions and 432 deletions.
diff --git a/advanced/dapps/chain-abstraction-demo/app/globals.css b/advanced/dapps/chain-abstraction-demo/app/globals.css
@@ -31,15 +31,15 @@
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
     --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
+    --primary-foreground: 0 0% 15%;
     --secondary: 240 4.8% 95.9%;
     --secondary-foreground: 240 5.9% 10%;
     --muted: 240 4.8% 95.9%;
     --muted-foreground: 240 3.8% 46.1%;
     --accent: 240 4.8% 95.9%;
     --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
+    --destructive-foreground: 0 0% 15%;
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 10% 3.9%;
@@ -51,25 +51,27 @@
     --radius: 0.5rem;
   }
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
+    --background: 0 0% 13%;
+    --foreground: 0 0% 15%;
+    --invert: 0 0% 13%;
     --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
+    --card-foreground: 0 0% 15%;
     --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
+    --popover-foreground: 0 0% 15%;
+    --primary: 0 0% 100%;
+    --primary-foreground: 0 0% 15%;
+    --secondary: 0 0% 60%;
+    --secondary-foreground: 0 0% 15%;
+    --tertiary-foreground: rgba(54, 54, 54, 1);
     --muted: 240 3.7% 15.9%;
     --muted-foreground: 240 5% 64.9%;
     --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
+    --accent-foreground: 0 0% 15%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
+    --destructive-foreground: 0 0% 15%;
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
+    --ring: 207, 93%, 49%, 0.2;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;

diff --git a/advanced/dapps/chain-abstraction-demo/app/layout.tsx b/advanced/dapps/chain-abstraction-demo/app/layout.tsx
@@ -1,17 +1,15 @@
 import type { Metadata } from "next";
-import { Inter as FontSans } from "next/font/google";
+import { Inter } from "next/font/google";
 import "./globals.css";
-import { cookieToInitialState } from "wagmi";
-import { config } from "@/config";
 import AppKitProvider from "@/context";
 import { Toaster } from "@/components/ui/toaster";
 import { headers } from "next/headers";
 import { cn } from "@/lib/utils";
 import { ThemeProvider } from "@/components/theme-provider";
 
-const fontSans = FontSans({
+const inter = Inter({
   subsets: ["latin"],
-  variable: "--font-sans",
+  display: "swap",
 });
 
 export const metadata: Metadata = {
@@ -24,14 +22,14 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const cookies = headers().get('cookie')
+  const cookies = headers().get("cookie");
   return (
     <html lang="en" suppressHydrationWarning>
       <head />
       <body
         className={cn(
-          "min-h-screen bg-background font-sans antialiased pt-12 pb-24 mt-12 overflow-y-auto",
-          fontSans.variable
+          "min-h-screen bg-background font-sans antialiased overflow-y-auto",
+          inter.className,
         )}
       >
         <AppKitProvider cookies={cookies}>
@@ -40,9 +38,7 @@ export default function RootLayout({
             defaultTheme="dark"
             disableTransitionOnChange
           >
-            <div className="flex items-center justify-center min-h-screen">
-              {children}
-            </div>
+            <div className="flex justify-center min-h-screen">{children}</div>
           </ThemeProvider>
         </AppKitProvider>
         <Toaster />

diff --git a/advanced/dapps/chain-abstraction-demo/app/page.tsx b/advanced/dapps/chain-abstraction-demo/app/page.tsx
@@ -1,20 +1,53 @@
-'use client'
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import Transfer from "./transfer";
+"use client";
+
+import * as React from "react";
+import Image from "next/image";
+import { ConnectWalletButton } from "@/components/ConnectWalletButton";
+import { useAppKitAccount } from "@reown/appkit/react";
+import Navbar from "@/components/Navbar";
+import { GiftDonutModalTrigger } from "@/components/GiftDonutModalTrigger";
 
 export default function Home() {
+  const { status, address } = useAppKitAccount();
+
   return (
-    <main>
-      <div>
-        <Card >
-          <CardHeader>
-            <w3m-button />
-          </CardHeader>
-          <CardContent>
-            <Transfer/>
-          </CardContent>
-        </Card>
+    <div className="sm:w-1/2 flex flex-col sm:mx-10">
+      <Navbar />
+      <div className="flex flex-col justify-center gap-4 mt-8">
+        <div className="flex items-center justify-center h-64 relative ">
+          <Image
+            src="/donut-cover.png"
+            alt="Gift Donut"
+            className="object-cover"
+            fill={true}
+          />
+        </div>
+        <div className="flex flex-col gap-5">
+          <div className="flex flex-col text-left">
+            <p className=" font-bold text-primary">Donut #1</p>
+            <p className=" text-secondary">Lorem ipsum dolor sit...</p>
+          </div>
+          <div className="flex justify-between items-center w-full">
+            <div className="flex flex-col text-left">
+              <p className=" text-secondary">Price</p>
+              <p className=" font-bold text-primary">$10.00</p>
+            </div>
+            {status === "connected" || address ? (
+              <div>
+                <GiftDonutModalTrigger
+                  triggerText="Gift Donut"
+                  initialView="Checkout1"
+                  className="bg-blue-500 hover:bg-blue-700 text-invert"
+                />
+              </div>
+            ) : (
+              <div>
+                <ConnectWalletButton />
+              </div>
+            )}
+          </div>
+        </div>
       </div>
-    </main>
+    </div>
   );
 }
diff --git a/advanced/dapps/chain-abstraction-demo/app/transfer.tsx b/advanced/dapps/chain-abstraction-demo/app/transfer.tsx
diff --git a/advanced/dapps/chain-abstraction-demo/components.json b/advanced/dapps/chain-abstraction-demo/components.json
@@ -17,4 +17,4 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   }
-}
+}
diff --git a/advanced/dapps/chain-abstraction-demo/components/ConnectWalletButton.tsx b/advanced/dapps/chain-abstraction-demo/components/ConnectWalletButton.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { useAppKit } from "@reown/appkit/react";
+import { Button } from "./ui/button";
+
+export function ConnectWalletButton() {
+  const { open } = useAppKit();
+
+  return (
+    <Button
+      type="button"
+      className="w-full bg-gray-700 hover:bg-gray-600 text-white"
+      size="lg"
+      onClick={() => open({ view: "Connect" })}
+    >
+      Connect Wallet
+    </Button>
+  );
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,4 +17,4 @@ @@
         "lib": "@/lib",
         "hooks": "@/hooks"
       }
-    }
+    }