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";