Add transaction History Page

packages/nextjs/app/assets/constants.ts

@@ -41,6 +41,33 @@ export const FLIPS = [
   },
 ];
 
+
+export const TRANSACTIONS = [
+  {
+    message: "flipped 0.01 and doubled",
+    time: "5",
+    txnHash: "0x02394u4iun4bjnfeeofnek399ri43494b4jj888888fj4i",
+  },
+  {
+    message: "withdrew 50 STRK to 0x023030w3450430933303345",
+    time: "8",
+    txnHash: "0x02394u4iun4bjnfeeofnek399ri43494b4jj888888fj4i",
+  },
+  {
+    message: "flipped 0.01 and got rugged",
+    time: "20",
+    txnHash: "0x02394u4iun4bjnfeeofnek399ri43494b4jj888888fj4i",
+  },
+  {
+    message: "used 0.1 STRK, won 5 STRK",
+    time: "30",
+    txnHash: "0x02394u4iun4bjnfeeofnek399ri43494b4jj888888fj4i",
+  },
+];
+
+
+
+
 export const LEADERBOARD = [
   {
     imageSrc: "/starkcade.png",

packages/nextjs/app/coinflip/_components/ConflipPlayPage.tsx

@@ -11,7 +11,7 @@ export const ConflipPlayPage = () => {
   return (
     <div className="relative flex justify-center items-center min-h-screen text-white overflow-hidden">
       {isProcessing ? (
-       <> <div className="flex flex-col gap-[1em] justify-center items-center min-h-screen">
+        <div className="flex flex-col gap-[1em] justify-center items-center min-h-screen">
           <img
             src="/coin-removebg.png"
             alt="Web3 Arcade Coin"
@@ -26,11 +26,7 @@ export const ConflipPlayPage = () => {
             </div>
           </div>
         </div>
-        </div>
-        </div>
-       </>
       ) : (
-       <>
         <div className="relative text-center p-4 space-y-6 -z-5">
           <div className="flex justify-center">
             <img
@@ -120,8 +116,7 @@ export const ConflipPlayPage = () => {
             </button>
           </div>
         </div>
-        </>
       )}
     </div>
-  )
-  }
+  );
+};

packages/nextjs/app/history/_components/TransactionConnectPage.tsx

@@ -0,0 +1,27 @@
+import ConnectModal from '~~/components/scaffold-stark/CustomConnectButton/ConnectModal';
+import { useAccountConnection } from '~~/hooks/starkcade/useAccountConnection';
+
+type Props = {}
+
+const TransactionConnectPage = (props: Props) => {
+      const { status } = useAccountConnection();
+
+      const handleConnect = () => {
+        console.log(status);
+      };
+  return (
+    <div className='relative flex flex-col justify-center items-center pb-20'>
+      <div className="flex flex-col text-center gap-8 items-center py-20 justify-center mt-6">
+        <h2 className='text-4xl'>To view all your transactions</h2>
+        <button
+          className="w-64 py-3 bg-yellow-500 text-black font-bold rounded-lg hover:bg-yellow-400 transition"
+          onClick={handleConnect}
+        >
+          Connect Wallet
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default TransactionConnectPage

packages/nextjs/app/history/_components/TransactionHistory.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import { TRANSACTIONS } from "../../assets/constants";
+export default function TransactionHistory({ address }: { address: `0x${string}` | undefined }) {
+    const router = useRouter();
+    const [name, setName] = useState("");
+
+  const handleSave = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    console.log("Saving name:", name);
+  };
+  const handleButtonClick = () => {
+    router.back();
+  };
+
+  return (
+    <div className="relative flex flex-col justify-center items-center min-h-screen overflow-hidden">
+      <div className="relative text-center p-4 space-y-6 -z-5 w-full flex flex-col justify-center items-center gap-4">
+        <div className='flex justify-center h-4 text-4xl'>
+          {name || "User Profile"}
+        </div>
+        <Image
+          src="/coin-removebg.png"
+          alt="Web3 Arcade Coin"
+          width={256}
+          height={256}
+          className="w-24 h-24 md:w-64 md:h-64 flex justify-center"
+        />
+         <div className='flex justify-center h-4 text-4xl'>
+          {name || "Coinflip Expert"}
+        </div>
+        <hr className="border-t-2 max-w-xl border-gray-300 flex justify-center w-1/2" />
+      </div>
+        { address && <p className="my-5 dark:text-white text-yellow-500">Wallet {address}</p>}
+      <div className="recentflip w-[40%] max-w-[560px] min-w-[280px] h-auto">
+        <h2 className="text-2xl w-full text-gray-800">Transaction History</h2>
+        <div className="space-y-1">
+          {TRANSACTIONS.map((transaction, index) => (
+            <div
+              key={index}
+              className={`flex items-center justify-between pb-1 last-of-type:border-0 border-b border-gray-400`}
+            >
+              <div className="flex items-center gap-4">
+                <p className="text-gray-800">
+                    <span className="mr-1">You</span>
+                  <span className="">
+                    {transaction.message.split(" ")[0]}
+                  </span>{" "}
+                  {transaction.message.split(" ").slice(1).join(" ")}
+                </p>
+              </div>
+              <p className="text-[#333] text-xs">{transaction.time} minutes ago</p>
+            </div>
+          ))}
+        </div>
+      </div>
+        <div className="mt-5 mb-5 w-full max-w-xl">
+          <button
+            className="w-full py-3 bg-yellow-500 text-black font-bold rounded-lg hover:bg-yellow-400 transition"
+            onClick={handleButtonClick}
+          >
+            GO BACK
+          </button>
+        </div>
+    </div>
+  );
+}

packages/nextjs/app/history/page.tsx

@@ -0,0 +1,17 @@
+"use client"
+import { useAccountConnection } from "~~/hooks/starkcade/useAccountConnection";
+import TransactionHistory from "./_components/TransactionHistory";
+import type { NextPage } from "next";
+import TransactionConnectPage from "./_components/TransactionConnectPage";
+
+const Debug: NextPage = () => {
+  const { accountAddress, status } = useAccountConnection();
+  return (
+    <>
+      { status === "connected" ? <TransactionHistory address={accountAddress} /> : <TransactionConnectPage /> }
+    </>   
+  );
+};
+
+export default Debug;
+

packages/nextjs/components/Header.tsx

@@ -3,7 +3,7 @@
 import React, { useCallback, useRef, useState, useEffect } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { Bars3Icon, CircleStackIcon, ChartBarIcon, UserIcon } from "@heroicons/react/24/outline";
+import { Bars3Icon, CircleStackIcon, ChartBarIcon, UserIcon, QueueListIcon } from "@heroicons/react/24/outline";
 import { useOutsideClick } from "~~/hooks/scaffold-stark";
 import { CustomConnectButton } from "~~/components/scaffold-stark/CustomConnectButton";
 import { usePathname } from "next/navigation";
@@ -36,6 +36,11 @@ export const menuLinks: HeaderMenuLink[] = [
     href: "/leaderboard",
     icon: <ChartBarIcon className="h-4 w-4" />,
   },
+  {
+    label: "Transaction History",
+    href: "/history",
+    icon: <QueueListIcon className="h-4 w-4" />,
+  },
   {
     label: "Profile",
     href: "/profile",