Merge branch 'main' of github.com:Yoii-Inc/ethtokyo-2024-hackathon

README.md

@@ -1,9 +1,6 @@
+# OpenBooking
 
-![tw-banner](https://github.com/thirdweb-example/next-starter/assets/57885104/20c8ce3b-4e55-4f10-ae03-2fe4743a5ee8)
-
-# thirdweb-next-starter
-
-Starter template to build an onchain react native app with [thirdweb](https://thirdweb.com/) and [next](https://nextjs.org/).
+## Overview
 
 ## Installation
 
@@ -19,7 +16,7 @@ To run this project, you will need to add the following environment variables to
 
 `CLIENT_ID`
 
-To learn how to create a client ID, refer to the [client documentation](https://portal.thirdweb.com/typescript/v5/client). 
+To learn how to create a client ID, refer to the [client documentation](https://portal.thirdweb.com/typescript/v5/client).
 
 ## Run locally
 

src/app/customer/checkin/page.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useSearchParams, useRouter } from "next/navigation";
+import { Suspense, useEffect, useState } from "react";
+import {
+    ConnectButton,
+    TransactionButton,
+    useActiveAccount,
+} from "thirdweb/react";
+import { client, contract } from "../../client";
+import { prepareContractCall } from "thirdweb";
+
+function CheckInInnerPage() {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const [reservationId, setReservationId] = useState<string | null>(null);
+    const address = useActiveAccount();
+
+    useEffect(() => {
+        const id = searchParams.get("id");
+        if (id) {
+            setReservationId(id);
+            console.log(id);
+        }
+    }, [searchParams]);
+
+    const handleFinalizePayment = async () => {
+        if (!reservationId) throw new Error("Reservation ID is not found.");
+
+        return prepareContractCall({
+            contract,
+            method: "finalizePayment",
+            params: [BigInt(reservationId)],
+        });
+    };
+
+    if (!reservationId) {
+        return <div>Now Loading...</div>;
+    }
+
+    return (
+        <main className="p-4 container mx-auto">
+            <h1 className="text-2xl font-bold mb-4">Service Confirmation</h1>
+            <p className="mb-4">Reservation ID: {reservationId}</p>
+            <div className="flex flex-col items-center space-y-4">
+                <ConnectButton
+                    client={client}
+                    appMetadata={{
+                        name: "Example App",
+                        url: "https://example.com",
+                    }}
+                />
+                {address && (
+                    <TransactionButton
+                        transaction={handleFinalizePayment}
+                        onTransactionSent={(result) => {
+                            console.log("Sent Transaction:", result.transactionHash);
+                        }}
+                        onTransactionConfirmed={(receipt) => {
+                            console.log("Confirmed Transaction:", receipt.transactionHash);
+                            router.push("/customer");
+                        }}
+                        onError={(error) => {
+                            console.error("Transaction Error has occured:", error);
+                        }}
+                    >
+                        Confirm the Service
+                    </TransactionButton>
+                )}
+            </div>
+        </main>
+    );
+}
+
+export default function CheckInPage() {
+    return (
+        <Suspense>
+            <CheckInInnerPage />
+        </Suspense>
+    );
+}

src/app/customer/page.tsx

@@ -21,15 +21,20 @@ export default function CustomerPage() {
   }
 
   return (
-    <main className="p-4 container mx-auto ">
+    <main className="p-4 container mx-auto relative">
+      <div className="absolute top-4 right-4">
+        <ConnectButton
+          client={client}
+          appMetadata={{
+            name: "OpenBooking",
+            url: "https://openbooking.vercel.app",
+          }}
+        />
+      </div>
+
       <h1 className="text-2xl font-bold mb-4">Customer Page</h1>
-      <ConnectButton
-        client={client}
-        appMetadata={{
-          name: "Example App",
-          url: "https://example.com",
-        }}
-      />
+      <h2 className="text-xl font-semibold mb-6">Select a store</h2>
+
       <StoreSelector
         onSelectStore={(storeId: number) => setSelectedStore(storeId)}
       />
@@ -85,98 +90,4 @@ export default function CustomerPage() {
       </div>
     </main>
   );
-}
-
-// export default function Home() {
-//   return (
-//     <main className="p-4 pb-10 min-h-[100vh] flex items-center justify-center container max-w-screen-lg mx-auto">
-//       <div className="py-20">
-//         <Header />
-
-//         <div className="flex justify-center mb-20">
-//           <ConnectButton
-//             client={client}
-//             appMetadata={{
-//               name: "Example App",
-//               url: "https://example.com",
-//             }}
-//           />
-//         </div>
-
-//         <ThirdwebResources />
-//       </div>
-//     </main>
-//   );
-// }
-
-function Header() {
-  return (
-    <header className="flex flex-col items-center mb-20 md:mb-20">
-      <Image
-        src={thirdwebIcon}
-        alt=""
-        className="size-[150px] md:size-[150px]"
-        style={{
-          filter: "drop-shadow(0px 0px 24px #a726a9a8)",
-        }}
-      />
-
-      <h1 className="text-2xl md:text-6xl font-semibold md:font-bold tracking-tighter mb-6 text-zinc-100">
-        thirdweb SDK
-        <span className="text-zinc-300 inline-block mx-1"> + </span>
-        <span className="inline-block -skew-x-6 text-blue-500"> Next.js </span>
-      </h1>
-
-      <p className="text-zinc-300 text-base">
-        Read the{" "}
-        <code className="bg-zinc-800 text-zinc-300 px-2 rounded py-1 text-sm mx-1">
-          README.md
-        </code>{" "}
-        file to get started.
-      </p>
-    </header>
-  );
-}
-
-function ThirdwebResources() {
-  return (
-    <div className="grid gap-4 lg:grid-cols-3 justify-center">
-      <ArticleCard
-        title="thirdweb SDK Docs"
-        href="https://portal.thirdweb.com/typescript/v5"
-        description="thirdweb TypeScript SDK documentation"
-      />
-
-      <ArticleCard
-        title="Components and Hooks"
-        href="https://portal.thirdweb.com/typescript/v5/react"
-        description="Learn about the thirdweb React components and hooks in thirdweb SDK"
-      />
-
-      <ArticleCard
-        title="thirdweb Dashboard"
-        href="https://thirdweb.com/dashboard"
-        description="Deploy, configure, and manage your smart contracts from the dashboard."
-      />
-    </div>
-  );
-}
-
-function ArticleCard(props: {
-  title: string;
-  href: string;
-  description: string;
-}) {
-  return (
-    <a
-      href={props.href + "?utm_source=next-template"}
-      target="_blank"
-      className="flex flex-col border border-zinc-800 p-4 rounded-lg hover:bg-zinc-900 transition-colors hover:border-zinc-700"
-    >
-      <article>
-        <h2 className="text-lg font-semibold mb-2">{props.title}</h2>
-        <p className="text-sm text-zinc-400">{props.description}</p>
-      </article>
-    </a>
-  );
-}
+}

src/app/page.tsx

@@ -2,29 +2,29 @@ import Link from 'next/link';
 import Image from 'next/image';
 
 export default function Home() {
-  return (
-    <main className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
-      <div className="bg-white p-8 rounded-xl shadow-2xl max-w-2xl w-full">
-        <h1 className="text-4xl font-bold mb-6 text-center text-gray-800">Reservation System</h1>
-        <div className="flex flex-col space-y-6">
-          <Link href="/customer" className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-4 px-6 rounded-lg text-center transition duration-300 ease-in-out transform hover:scale-105">
-            Customer Page
-          </Link>
-          <Link href="/store" className="bg-purple-500 hover:bg-purple-600 text-white font-bold py-4 px-6 rounded-lg text-center transition duration-300 ease-in-out transform hover:scale-105">
-            Store Management Page
-          </Link>
-        </div>
-        <div className="mt-12 text-center">
-          <Image
-            src="/thirdweb.svg"
-            alt="Thirdweb Logo"
-            width={100}
-            height={100}
-            className="mx-auto mb-4"
-          />
-          <p className="text-gray-600">Powered by Thirdweb</p>
-        </div>
-      </div>
-    </main>
-  );
+    return (
+        <main className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
+            <div className="bg-white p-8 rounded-xl shadow-2xl max-w-2xl w-full">
+                <h1 className="text-4xl font-bold mb-6 text-center text-gray-800">OpenBooking</h1>
+                <div className="flex flex-col space-y-6">
+                    <Link href="/customer" className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-4 px-6 rounded-lg text-center transition duration-300 ease-in-out transform hover:scale-105">
+                        Customer Page
+                    </Link>
+                    <Link href="/store" className="bg-purple-500 hover:bg-purple-600 text-white font-bold py-4 px-6 rounded-lg text-center transition duration-300 ease-in-out transform hover:scale-105">
+                        Store Management Page
+                    </Link>
+                </div>
+                <div className="mt-12 text-center">
+                    <Image
+                        src="/thirdweb.svg"
+                        alt="Thirdweb Logo"
+                        width={100}
+                        height={100}
+                        className="mx-auto mb-4"
+                    />
+                    <p className="text-gray-600">Powered by Thirdweb</p>
+                </div>
+            </div>
+        </main>
+    );
 }