Feat: Add ch-2

Author: gianalarcon

packages/nextjs/.env

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+yarn.lock

packages/nextjs/.gitignore

@@ -24,7 +24,7 @@ export function DebugContracts() {
   }, [selectedContract, setSelectedContract]);
 
   return (
-    <div className="flex flex-col gap-y-6 lg:gap-y-8 py-8 lg:py-12 justify-center items-center">
+    <div className="flex flex-col gap-y-6 lg:gap-y-8 py-8 lg:py-12 justify-center items-center  text-primary">
       {contractNames.length === 0 ? (
         <p className="text-3xl mt-14">No contracts found!</p>
       ) : (

packages/nextjs/app/debug/_components/DebugContracts.tsx

@@ -58,11 +58,11 @@ export const ContractInput = ({
     <div className="flex flex-col gap-1.5 w-full">
       <div className="flex items-center ml-2">
         {paramType.name && (
-          <span className="text-xs font-medium mr-2 leading-none">
+          <span className="text-xs font-medium mr-2 leading-none text-neutral">
             {paramType.name}
           </span>
         )}
-        <span className="block text-xs font-extralight leading-none">
+        <span className="block text-xs font-extralight leading-none text-neutral">
           {displayType(paramType.type)}
         </span>
       </div>

packages/nextjs/app/debug/_components/contract/ContractInput.tsx

@@ -29,7 +29,7 @@ export const ContractReadMethods = ({
       };
     });
   if (!functionsToDisplay.length) {
-    return <>No read methods</>;
+    return <span className="text-neutral">No read methods</span>;
   }
   return (
     <>

packages/nextjs/app/debug/_components/contract/ContractReadMethods.tsx

@@ -41,7 +41,7 @@ export const ContractUI = ({
 
   if (!deployedContractData) {
     return (
-      <p className="text-3xl mt-14">
+      <p className="text-3xl mt-14 text-neutral">
         {`No contract found by the name of "${contractName}" on chain "${targetNetwork.name}"!`}
       </p>
     );
@@ -59,7 +59,9 @@ export const ContractUI = ({
                 <span className="font-bold text-neutral">{contractName}</span>
                 <Address address={deployedContractData.address} />
                 <div className="flex gap-1 items-center">
-                  <span className="font-bold text-sm">Balance:</span>
+                  <span className="font-bold text-sm text-neutral">
+                    Balance:
+                  </span>
                   <Balance
                     address={deployedContractData.address}
                     className="px-0 h-1.5 min-h-[0.375rem] text-network"
@@ -69,7 +71,7 @@ export const ContractUI = ({
             </div>
             {targetNetwork && (
               <p className="my-0 text-sm">
-                <span className="font-bold">Network</span>:{" "}
+                <span className="font-bold text-neutral">Network</span>:{" "}
                 <span className="text-network">{targetNetwork.name}</span>
               </p>
             )}
@@ -86,7 +88,7 @@ export const ContractUI = ({
             <div className="rounded-[5px] border border-[#8A45FC] flex flex-col mt-10 relative bg-component">
               <div className="bg-function w-[140px] h-[32.5px] absolute self-start -top-[43px] -left-[1px] -z-10 py-[0.55rem] clip-corner">
                 <div className="flex items-center justify-center space-x-2">
-                  <p className="my-0 text-sm text-center">Read</p>
+                  <p className="my-0 text-sm text-center text-neutral">Read</p>
                 </div>
               </div>
               <div className="p-5 divide-y divide-secondary">
@@ -100,7 +102,7 @@ export const ContractUI = ({
             <div className="rounded-[5px] border border-[#8A45FC] flex flex-col mt-10 relative bg-component">
               <div className="w-[140px] h-[32.5px] absolute self-start -top-[43px] -left-[1px] -z-10 py-[0.55rem]  bg-function clip-corner">
                 <div className="flex items-center justify-center space-x-2">
-                  <p className="my-0 text-sm">Write</p>
+                  <p className="my-0 text-sm text-neutral">Write</p>
                 </div>
               </div>
               <div className="p-5 divide-y divide-secondary">

packages/nextjs/app/debug/_components/contract/ContractUI.tsx

@@ -31,7 +31,7 @@ export const ContractVariables = ({
       };
     });
   if (!functionsToDisplay.length) {
-    return <>No contract variables</>;
+    return <span className="text-neutral">No contract variables</span>;
   }
 
   return (

packages/nextjs/app/debug/_components/contract/ContractVariables.tsx

@@ -55,7 +55,7 @@ export const DisplayVariable = ({
           {abiFunction.name}
         </h3>
         <button
-          className="btn btn-ghost btn-xs"
+          className="btn btn-ghost btn-xs text-neutral"
           onClick={async () => await refetch()}
         >
           {!isLoading && isFetching ? (

packages/nextjs/app/debug/_components/contract/DisplayVariable.tsx

@@ -116,7 +116,7 @@ export const WriteOnlyFunctionForm = ({
         {inputs}
         <div className="flex justify-between gap-2">
           {!zeroInputs && (
-            <div className="flex-grow basis-0">
+            <div className="flex-grow basis-0 text-neutral-content">
               {displayedTxResult ? (
                 <TxReceipt txResult={displayedTxResult} />
               ) : null}

packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx

@@ -1,16 +1,55 @@
 "use client";
-
+import Image from "next/image";
 import type { NextPage } from "next";
 import { useAccount } from "@starknet-react/core";
 
 const Home: NextPage = () => {
   const connectedAddress = useAccount();
   return (
-    <>
-      <div className="flex items-center flex-col flex-grow pt-10">
-        <div className="px-5 w-[90%] md:w-[75%]"></div>
+    <div className="flex items-center flex-col flex-grow pt-10 bg-">
+      <div className="px-5 w-[90%] md:w-[75%]">
+        <h1 className="text-center mb-6 text-neutral">
+          <span className="block text-2xl mb-2 text-neutral">
+            SpeedRunStark
+          </span>
+          <span className="block text-4xl font-bold text-neutral">
+            Challenge #1: 🔏 Decentralized Staking App
+          </span>
+        </h1>
+        <div className="flex flex-col items-center justify-center">
+          <Image
+            src="/banner-home.svg"
+            width="727"
+            height="231"
+            alt="challenge banner"
+            className="rounded-xl border-4 border-primary"
+          />
+          <div className="max-w-3xl ">
+            <p className="text-center text-lg mt-8 text-neutral">
+              🦸 A superpower of Starknet is allowing you, the builder, to
+              create a simple set of rules that an adversarial group of players
+              can use to work together. In this challenge, you create a
+              decentralized application where users can coordinate a group
+              funding effort. The users only have to trust the code.
+            </p>
+            <p className="text-center text-lg text-neutral">
+              🌟 The final deliverable is deploying a Dapp that lets users send
+              ether to a contract and stake if the conditions are met, then
+              deploy your app to a public webserver. Submit the url on{" "}
+              <a
+                href="https://speedrunstark.com/"
+                target="_blank"
+                rel="noreferrer"
+                className="underline text-neutral font-bold"
+              >
+                SpeedRunStark.com
+              </a>
+              !
+            </p>
+          </div>
+        </div>
       </div>
-    </>
+    </div>
   );
 };
 

packages/nextjs/app/exampleView1/page.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import type { NextPage } from "next";
+import { StakeContractInteraction } from "~~/components/stake/StakeContractInteraction";
+import { useDeployedContractInfo } from "~~/hooks/scaffold-stark";
+
+const StakerUI: NextPage = () => {
+  const { data: StakerContract } = useDeployedContractInfo("Staker");
+
+  return (
+    <StakeContractInteraction
+      key={StakerContract?.address}
+      address={StakerContract?.address}
+    />
+  );
+};
+
+export default StakerUI;

packages/nextjs/app/page.tsx

@@ -0,0 +1,76 @@
+"use client";
+import React from "react";
+import { NextPage } from "next";
+import { useScaffoldEventHistory } from "~~/hooks/scaffold-stark/useScaffoldEventHistory";
+import { Address } from "~~/components/scaffold-stark";
+import { formatEther } from "ethers";
+
+interface StakeEvent {
+  args: {
+    sender: string;
+    amount: bigint;
+  };
+}
+const Staking: NextPage = () => {
+  // @ts-ignore
+  const { data: stakeEvents, isLoading } = useScaffoldEventHistory<StakeEvent>({
+    contractName: "Staker",
+    eventName: "contracts::Staker::Staker::Stake",
+    watch: true,
+    fromBlock: 0n,
+  });
+  console.log(stakeEvents);
+
+  if (isLoading)
+    return (
+      <div className="flex justify-center items-center mt-10">
+        <span className="loading loading-spinner loading-lg"></span>
+      </div>
+    );
+
+  return (
+    <div className="flex items-center flex-col flex-grow pt-10 text-neutral">
+      <div className="px-5">
+        <h1 className="text-center mb-3">
+          <span className="block text-2xl font-bold">All Staking Events</span>
+        </h1>
+      </div>
+      <div className="overflow-x-auto border border-secondary">
+        <table className="table table-zebra w-full">
+          <thead>
+            <tr>
+              <th className="bg-secondary text-white">From</th>
+              <th className="bg-secondary text-white">Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            {!stakeEvents || stakeEvents.length === 0 ? (
+              <tr>
+                <td colSpan={3} className="text-center">
+                  No events found
+                </td>
+              </tr>
+            ) : (
+              stakeEvents?.map((event: StakeEvent, index) => {
+                return (
+                  <tr key={index}>
+                    <td>
+                      <Address address={`0x${event.args.sender}`} />
+                    </td>
+                    <td>
+                      {event.args.amount &&
+                        formatEther(BigInt(event.args.amount))}{" "}
+                      ETH
+                    </td>
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default Staking;

packages/nextjs/app/stake-ui/page.tsx

@@ -13,7 +13,7 @@ const Button: React.FC<ButtonProps> = ({
 }) => {
   return (
     <button
-      className={`py-[10px] px-[20px] sm:px-[10px] sm:py-[5px] bg-base-300 text-base-100  rounded-[8px] sm:text-[12px]  ${isDisable ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`}
+      className={`py-[5px] px-[10px] sm:px-[20px] sm:py-[10px] bg-base-300 text-base-100  rounded-[8px] sm:text-[14px] text-[12px] ${isDisable ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`}
       onClick={onClick}
       type="button"
       disabled={isDisable || children === "Coming Soon"}

packages/nextjs/app/stakings/page.tsx

@@ -4,13 +4,19 @@ import React, { useCallback, useRef, useState, useEffect } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Bars3Icon, BugAntIcon, PhotoIcon } from "@heroicons/react/24/outline";
+import {
+  Bars3Icon,
+  BugAntIcon,
+  CircleStackIcon,
+  InboxStackIcon,
+} from "@heroicons/react/24/outline";
 import { useOutsideClick } from "~~/hooks/scaffold-stark";
 import { CustomConnectButton } from "~~/components/scaffold-stark/CustomConnectButton";
 import { useTheme } from "next-themes";
 import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
 import { devnet } from "@starknet-react/chains";
 import { SwitchTheme } from "./SwitchTheme";
+import { useAccount, useProvider } from "@starknet-react/core";
 
 export type HeaderMenuLink = {
   label: string;
@@ -20,9 +26,18 @@ export type HeaderMenuLink = {
 
 export const menuLinks: HeaderMenuLink[] = [
   {
-    label: "Example View 1",
-    href: "/exampleView1",
-    icon: <PhotoIcon className="h-4 w-4" />,
+    label: "Home",
+    href: "/",
+  },
+  {
+    label: "Staker UI",
+    href: "/stake-ui",
+    icon: <CircleStackIcon className="h-4 w-4" />,
+  },
+  {
+    label: "Stake Events",
+    href: "/stakings",
+    icon: <InboxStackIcon className="h-4 w-4" />,
   },
   {
     label: "Debug Contracts",
@@ -39,6 +54,7 @@ export const HeaderMenuLinks = () => {
   useEffect(() => {
     setIsDark(theme === "dark");
   }, [theme]);
+
   return (
     <>
       {menuLinks.map(({ label, href, icon }) => {
@@ -77,6 +93,23 @@ export const Header = () => {
   );
   const { targetNetwork } = useTargetNetwork();
   const isLocalNetwork = targetNetwork.id === devnet.id;
+  const { provider } = useProvider();
+  const { address, status } = useAccount();
+  const [isDeployed, setIsDeployed] = useState(true);
+
+  useEffect(() => {
+    if (status === "connected" && address) {
+      provider
+        .getContractVersion(address)
+        .then((v) => {
+          if (v) setIsDeployed(true);
+        })
+        .catch((e) => {
+          console.log(e);
+          setIsDeployed(false);
+        });
+    }
+  }, [status, address, provider]);
 
   return (
     <div className="sticky lg:static top-0 navbar min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2">
@@ -128,8 +161,12 @@ export const Header = () => {
         </ul>
       </div>
       <div className="navbar-end flex-grow mr-4 gap-4">
+        {status === "connected" && !isDeployed ? (
+          <span className="bg-[#8a45fc] text-[9px] p-1 text-white">
+            Wallet Not Deployed
+          </span>
+        ) : null}
         <CustomConnectButton />
-        {/* <FaucetButton /> */}
         <SwitchTheme
           className={`pointer-events-auto ${
             isLocalNetwork ? "self-end md:self-auto" : ""