Initial commit with 🏗️ create-eth @ 2.0.4

packages/nextjs/app/dice/_components/Amount.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+import { useFetchNativeCurrencyPrice } from "@scaffold-ui/hooks";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+
+type TAmountProps = {
+  amount?: number;
+  className?: string;
+  isLoading?: boolean;
+  showUsdPrice?: boolean;
+  disableToggle?: boolean;
+};
+
+/**
+ * Display (ETH & USD) balance of an ETH address.
+ */
+export const Amount = ({
+  isLoading,
+  showUsdPrice = false,
+  amount = 0,
+  className = "",
+  disableToggle = false,
+}: TAmountProps) => {
+  const { targetNetwork: configuredNetwork } = useTargetNetwork();
+  const { price } = useFetchNativeCurrencyPrice();
+  const [isEthBalance, setEthBalance] = useState<boolean>(!showUsdPrice);
+
+  useEffect(() => {
+    setEthBalance(!showUsdPrice);
+  }, [showUsdPrice]);
+
+  if (isLoading) {
+    return (
+      <div className="animate-pulse flex space-x-4">
+        <div className="rounded-md bg-slate-300 h-6 w-6"></div>
+        <div className="flex items-center space-y-6">
+          <div className="h-2 w-28 bg-slate-300 rounded"></div>
+        </div>
+      </div>
+    );
+  }
+
+  const onToggleBalance = () => {
+    if (!disableToggle) {
+      setEthBalance(!isEthBalance);
+    }
+  };
+
+  return (
+    <button
+      className={`btn btn-sm px-0 btn-ghost flex flex-col font-normal items-center hover:bg-transparent ${className}`}
+      onClick={onToggleBalance}
+    >
+      <div className="w-full flex items-center justify-center">
+        {isEthBalance ? (
+          <>
+            <span>{amount?.toFixed(4)}</span>
+            <span className="font-bold ml-1">{configuredNetwork.nativeCurrency.symbol}</span>
+          </>
+        ) : (
+          <>
+            <span className="font-bold mr-1">$</span>
+            <span>{(amount * price).toFixed(2)}</span>
+          </>
+        )}
+      </div>
+    </button>
+  );
+};

packages/nextjs/app/dice/_components/RollEvents.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Address } from "@scaffold-ui/components";
+import { Address as AddressType } from "viem";
+
+export type Roll = {
+  address: AddressType;
+  amount: number;
+  roll: string;
+};
+
+export type RollEventsProps = {
+  rolls: Roll[];
+};
+
+export const RollEvents = ({ rolls }: RollEventsProps) => {
+  return (
+    <div className="mx-10">
+      <div className="flex w-auto justify-center h-10">
+        <p className="flex justify-center text-lg font-bold">Roll Events</p>
+      </div>
+
+      <table className="mt-4 p-2 bg-base-100 table table-zebra shadow-lg w-full overflow-hidden">
+        <thead className="text-accent text-lg">
+          <tr>
+            <th className="bg-primary text-lg" colSpan={3}>
+              <span>Address</span>
+            </th>
+            <th className="bg-primary text-lg">
+              <span>Roll</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {rolls.map(({ address, roll }, i) => (
+            <tr key={i}>
+              <td colSpan={3} className="py-3.5">
+                <Address address={address} size="lg" />
+              </td>
+              <td className="col-span-1 text-lg">
+                <span> {roll} </span>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};

packages/nextjs/app/dice/_components/WinnerEvents.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import { Amount } from "./Amount";
+import { Address } from "@scaffold-ui/components";
+import { Address as AddressType, formatEther } from "viem";
+
+export type Winner = {
+  address: AddressType;
+  amount: bigint;
+};
+
+export type WinnerEventsProps = {
+  winners: Winner[];
+};
+
+export const WinnerEvents = ({ winners }: WinnerEventsProps) => {
+  const [showUsdPrice, setShowUsdPrice] = useState(true);
+  return (
+    <div className="mx-10">
+      <div className="flex w-auto justify-center h-10">
+        <p className="flex justify-center text-lg font-bold">Winner Events</p>
+      </div>
+
+      <table className="mt-4 p-2 bg-base-100 table table-zebra shadow-lg w-full overflow-hidden">
+        <thead className="text-accent text-lg">
+          <tr>
+            <th className="bg-primary" colSpan={3}>
+              Address
+            </th>
+            <th
+              className="bg-primary"
+              colSpan={2}
+              onClick={() => {
+                setShowUsdPrice(!showUsdPrice);
+              }}
+            >
+              Won
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {winners.map(({ address, amount }, i) => (
+            <tr key={i}>
+              <td colSpan={3}>
+                <Address address={address} size="lg" />
+              </td>
+              <td
+                colSpan={2}
+                onClick={() => {
+                  setShowUsdPrice(!showUsdPrice);
+                }}
+              >
+                <Amount
+                  showUsdPrice={showUsdPrice}
+                  amount={Number(formatEther(amount))}
+                  disableToggle
+                  className="text-lg"
+                />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};

packages/nextjs/app/dice/_components/index.ts

@@ -0,0 +1,3 @@
+export * from "./Amount";
+export * from "./RollEvents";
+export * from "./WinnerEvents";

packages/nextjs/app/dice/page.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Address } from "@scaffold-ui/components";
+import { useWatchBalance } from "@scaffold-ui/hooks";
+import type { NextPage } from "next";
+import { Address as AddressType, formatEther, parseEther } from "viem";
+import { Amount, Roll, RollEvents, Winner, WinnerEvents } from "~~/app/dice/_components";
+import {
+  useScaffoldContract,
+  useScaffoldEventHistory,
+  useScaffoldReadContract,
+  useScaffoldWriteContract,
+} from "~~/hooks/scaffold-eth";
+
+const ROLL_ETH_VALUE = "0.002";
+const MAX_TABLE_ROWS = 10;
+
+const DiceGame: NextPage = () => {
+  const [rolls, setRolls] = useState<Roll[]>([]);
+  const [winners, setWinners] = useState<Winner[]>([]);
+
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  const [rolled, setRolled] = useState(false);
+  const [isRolling, setIsRolling] = useState(false);
+
+  const { data: riggedRollContract } = useScaffoldContract({ contractName: "RiggedRoll" });
+  const { data: riggedRollBalance } = useWatchBalance({
+    address: riggedRollContract?.address,
+  });
+  const { data: prize } = useScaffoldReadContract({ contractName: "DiceGame", functionName: "prize" });
+
+  const { data: rollsHistoryData, isLoading: rollsHistoryLoading } = useScaffoldEventHistory({
+    contractName: "DiceGame",
+    eventName: "Roll",
+    watch: true,
+  });
+
+  useEffect(() => {
+    if (
+      !rollsHistoryLoading &&
+      Boolean(rollsHistoryData?.length) &&
+      (rollsHistoryData?.length as number) > rolls.length
+    ) {
+      setIsRolling(false);
+
+      setRolls(
+        rollsHistoryData?.map(({ args }) => ({
+          address: args.player as AddressType,
+          amount: Number(args.amount),
+          roll: (args.roll as bigint).toString(16).toUpperCase(),
+        })) || [],
+      );
+    }
+  }, [rolls, rollsHistoryData, rollsHistoryLoading]);
+
+  const { data: winnerHistoryData, isLoading: winnerHistoryLoading } = useScaffoldEventHistory({
+    contractName: "DiceGame",
+    eventName: "Winner",
+    watch: true,
+  });
+
+  useEffect(() => {
+    if (
+      !winnerHistoryLoading &&
+      Boolean(winnerHistoryData?.length) &&
+      (winnerHistoryData?.length as number) > winners.length
+    ) {
+      setIsRolling(false);
+
+      setWinners(
+        winnerHistoryData?.map(({ args }) => ({
+          address: args.winner as AddressType,
+          amount: args.amount as bigint,
+        })) || [],
+      );
+    }
+  }, [winnerHistoryData, winnerHistoryLoading, winners.length]);
+
+  const { writeContractAsync: writeDiceGameAsync, isError: rollTheDiceError } = useScaffoldWriteContract({
+    contractName: "DiceGame",
+  });
+
+  const { writeContractAsync: writeRiggedRollAsync, isError: riggedRollError } = useScaffoldWriteContract({
+    contractName: "RiggedRoll",
+  });
+
+  const immediateStopRolling = useCallback(() => {
+    setIsRolling(false);
+    setRolled(false);
+  }, []);
+
+  useEffect(() => {
+    if (rollTheDiceError || riggedRollError) {
+      immediateStopRolling();
+    }
+  }, [immediateStopRolling, riggedRollError, rollTheDiceError]);
+
+  useEffect(() => {
+    if (videoRef.current && !isRolling) {
+      // show last frame
+      videoRef.current.currentTime = 9999;
+    }
+  }, [isRolling]);
+
+  return (
+    <div className="py-10 px-10">
+      <div className="grid grid-cols-3 max-lg:grid-cols-1">
+        <div className="max-lg:row-start-2">
+          <RollEvents rolls={rolls.slice(0, MAX_TABLE_ROWS)} />
+        </div>
+
+        <div className="flex flex-col items-center pt-4 max-lg:row-start-1">
+          <div className="flex w-full justify-center">
+            <span className="text-xl"> Roll a 0, 1, 2, 3, 4 or 5 to win the prize! </span>
+          </div>
+
+          <div className="flex items-center mt-1">
+            <span className="text-lg mr-2">Prize:</span>
+            <Amount amount={prize ? Number(formatEther(prize)) : 0} showUsdPrice className="text-lg" />
+          </div>
+
+          <button
+            onClick={async () => {
+              if (!rolled) {
+                setRolled(true);
+              }
+              setIsRolling(true);
+              try {
+                await writeDiceGameAsync({ functionName: "rollTheDice", value: parseEther(ROLL_ETH_VALUE) });
+              } catch (err) {
+                console.error("Error calling rollTheDice function", err);
+                immediateStopRolling();
+              }
+            }}
+            disabled={isRolling}
+            className="mt-2 btn btn-secondary btn-xl normal-case font-xl text-lg"
+          >
+            Roll the dice!
+          </button>
+          <div className="mt-4 pt-2 flex flex-col items-center w-full justify-center border-t-4 border-primary">
+            <span className="text-2xl">Rigged Roll</span>
+            <div className="flex mt-2 items-center">
+              <span className="mr-2 text-lg">Address:</span>{" "}
+              <Address size="lg" address={riggedRollContract?.address} />{" "}
+            </div>
+            <div className="flex mt-1 items-center">
+              <span className="text-lg mr-2">Balance:</span>
+              <Amount amount={Number(riggedRollBalance?.formatted || 0)} showUsdPrice className="text-lg" />
+            </div>
+          </div>
+          {/* <button
+            onClick={async () => {
+              if (!rolled) {
+                setRolled(true);
+              }
+              setIsRolling(true);
+              try {
+                await writeRiggedRollAsync({ functionName: "riggedRoll" });
+              } catch (err) {
+                console.error("Error calling riggedRoll function", err);
+                immediateStopRolling();
+              }
+            }}
+            disabled={isRolling}
+            className="mt-2 btn btn-secondary btn-xl normal-case font-xl text-lg"
+          >
+            Rigged Roll!
+          </button> */}
+
+          <div className="flex mt-8">
+            {rolled ? (
+              isRolling ? (
+                <video key="rolling" width={300} height={300} loop src="/rolls/Spin.webm" autoPlay />
+              ) : (
+                <video key="rolled" width={300} height={300} src={`/rolls/${rolls[0]?.roll || "0"}.webm`} autoPlay />
+              )
+            ) : (
+              <video ref={videoRef} key="last" width={300} height={300} src={`/rolls/${rolls[0]?.roll || "0"}.webm`} />
+            )}
+          </div>
+        </div>
+
+        <div className="max-lg:row-start-3">
+          <WinnerEvents winners={winners.slice(0, MAX_TABLE_ROWS)} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DiceGame;