Initial commit with 🏗️ create-eth @ 2.0.4

2026-01-21 11:18:02 +07:00
commit 2acc4d2eae
145 changed files with 27715 additions and 0 deletions
--- a/packages/nextjs/app/blockexplorer/_components/AddressCodeTab.tsx
+++ b/packages/nextjs/app/blockexplorer/_components/AddressCodeTab.tsx
@@ -0,0 +1,27 @@
+type AddressCodeTabProps = {
+  bytecode: string;
+  assembly: string;
+};
+
+export const AddressCodeTab = ({ bytecode, assembly }: AddressCodeTabProps) => {
+  const formattedAssembly = Array.from(assembly.matchAll(/\w+( 0x[a-fA-F0-9]+)?/g))
+    .map(it => it[0])
+    .join("\n");
+
+  return (
+    <div className="flex flex-col gap-3 p-4">
+      Bytecode
+      <div className="mockup-code -indent-5 overflow-y-auto max-h-[500px]">
+        <pre className="px-5">
+          <code className="whitespace-pre-wrap overflow-auto break-words">{bytecode}</code>
+        </pre>
+      </div>
+      Opcodes
+      <div className="mockup-code -indent-5 overflow-y-auto max-h-[500px]">
+        <pre className="px-5">
+          <code>{formattedAssembly}</code>
+        </pre>
+      </div>
+    </div>
+  );
+};
--- a/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx
+++ b/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { BackButton } from "./BackButton";
+import { ContractTabs } from "./ContractTabs";
+import { Address, Balance } from "@scaffold-ui/components";
+import { Address as AddressType } from "viem";
+import { hardhat } from "viem/chains";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth";
+
+export const AddressComponent = ({
+  address,
+  contractData,
+}: {
+  address: AddressType;
+  contractData: { bytecode: string; assembly: string } | null;
+}) => {
+  const { targetNetwork } = useTargetNetwork();
+  return (
+    <div className="m-10 mb-20">
+      <div className="flex justify-start mb-5">
+        <BackButton />
+      </div>
+      <div className="col-span-5 grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-10">
+        <div className="col-span-1 flex flex-col">
+          <div className="bg-base-100 border-base-300 border shadow-md shadow-secondary rounded-3xl px-6 lg:px-8 mb-6 space-y-1 py-4 overflow-x-auto">
+            <div className="flex">
+              <div className="flex flex-col gap-1">
+                <Address
+                  address={address}
+                  format="long"
+                  onlyEnsOrAddress
+                  blockExplorerAddressLink={
+                    targetNetwork.id === hardhat.id ? `/blockexplorer/address/${address}` : undefined
+                  }
+                />
+                <div className="flex gap-1 items-center">
+                  <span className="font-bold text-sm">Balance:</span>
+                  <Balance address={address} />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <ContractTabs address={address} contractData={contractData} />
+    </div>
+  );
+};
--- a/packages/nextjs/app/blockexplorer/_components/AddressLogsTab.tsx
+++ b/packages/nextjs/app/blockexplorer/_components/AddressLogsTab.tsx
@@ -0,0 +1,21 @@
+import { Address } from "viem";
+import { useContractLogs } from "~~/hooks/scaffold-eth";
+import { replacer } from "~~/utils/scaffold-eth/common";
+
+export const AddressLogsTab = ({ address }: { address: Address }) => {
+  const contractLogs = useContractLogs(address);
+
+  return (
+    <div className="flex flex-col gap-3 p-4">
+      <div className="mockup-code overflow-auto max-h-[500px]">
+        <pre className="px-5 whitespace-pre-wrap break-words">
+          {contractLogs.map((log, i) => (
+            <div key={i}>
+              <strong>Log:</strong> {JSON.stringify(log, replacer, 2)}
+            </div>
+          ))}
+        </pre>
+      </div>
+    </div>
+  );
+};
--- a/packages/nextjs/app/blockexplorer/_components/AddressStorageTab.tsx
+++ b/packages/nextjs/app/blockexplorer/_components/AddressStorageTab.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Address, createPublicClient, http, toHex } from "viem";
+import { hardhat } from "viem/chains";
+
+const publicClient = createPublicClient({
+  chain: hardhat,
+  transport: http(),
+});
+
+export const AddressStorageTab = ({ address }: { address: Address }) => {
+  const [storage, setStorage] = useState<string[]>([]);
+
+  useEffect(() => {
+    const fetchStorage = async () => {
+      try {
+        const storageData = [];
+        let idx = 0;
+
+        while (true) {
+          const storageAtPosition = await publicClient.getStorageAt({
+            address: address,
+            slot: toHex(idx),
+          });
+
+          if (storageAtPosition === "0x" + "0".repeat(64)) break;
+
+          if (storageAtPosition) {
+            storageData.push(storageAtPosition);
+          }
+
+          idx++;
+        }
+        setStorage(storageData);
+      } catch (error) {
+        console.error("Failed to fetch storage:", error);
+      }
+    };
+
+    fetchStorage();
+  }, [address]);
+
+  return (
+    <div className="flex flex-col gap-3 p-4">
+      {storage.length > 0 ? (
+        <div className="mockup-code overflow-auto max-h-[500px]">
+          <pre className="px-5 whitespace-pre-wrap break-words">
+            {storage.map((data, i) => (
+              <div key={i}>
+                <strong>Storage Slot {i}:</strong> {data}
+              </div>
+            ))}
+          </pre>
+        </div>
+      ) : (
+        <div className="text-lg">This contract does not have any variables.</div>
+      )}
+    </div>
+  );
+};
--- a/packages/nextjs/app/blockexplorer/_components/BackButton.tsx
+++ b/packages/nextjs/app/blockexplorer/_components/BackButton.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+export const BackButton = () => {
+  const router = useRouter();
+  return (
+    <button className="btn btn-sm btn-primary" onClick={() => router.back()}>
+      Back
+    </button>
+  );
+};
--- a/packages/nextjs/app/blockexplorer/_components/ContractTabs.tsx
+++ b/packages/nextjs/app/blockexplorer/_components/ContractTabs.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { AddressCodeTab } from "./AddressCodeTab";
+import { AddressLogsTab } from "./AddressLogsTab";
+import { AddressStorageTab } from "./AddressStorageTab";
+import { PaginationButton } from "./PaginationButton";
+import { TransactionsTable } from "./TransactionsTable";
+import { Address, createPublicClient, http } from "viem";
+import { hardhat } from "viem/chains";
+import { useFetchBlocks } from "~~/hooks/scaffold-eth";
+
+type AddressCodeTabProps = {
+  bytecode: string;
+  assembly: string;
+};
+
+type PageProps = {
+  address: Address;
+  contractData: AddressCodeTabProps | null;
+};
+
+const publicClient = createPublicClient({
+  chain: hardhat,
+  transport: http(),
+});
+
+export const ContractTabs = ({ address, contractData }: PageProps) => {
+  const { blocks, transactionReceipts, currentPage, totalBlocks, setCurrentPage } = useFetchBlocks();
+  const [activeTab, setActiveTab] = useState("transactions");
+  const [isContract, setIsContract] = useState(false);
+
+  useEffect(() => {
+    const checkIsContract = async () => {
+      const contractCode = await publicClient.getBytecode({ address: address });
+      setIsContract(contractCode !== undefined && contractCode !== "0x");
+    };
+
+    checkIsContract();
+  }, [address]);
+
+  const filteredBlocks = blocks.filter(block =>
+    block.transactions.some(tx => {
+      if (typeof tx === "string") {
+        return false;
+      }
+      return tx.from.toLowerCase() === address.toLowerCase() || tx.to?.toLowerCase() === address.toLowerCase();
+    }),
+  );
+
+  return (
+    <>
+      {isContract && (
+        <div role="tablist" className="tabs tabs-lift">
+          <button
+            role="tab"
+            className={`tab ${activeTab === "transactions" ? "tab-active" : ""}`}
+            onClick={() => setActiveTab("transactions")}
+          >
+            Transactions
+          </button>
+          <button
+            role="tab"
+            className={`tab ${activeTab === "code" ? "tab-active" : ""}`}
+            onClick={() => setActiveTab("code")}
+          >
+            Code
+          </button>
+          <button
+            role="tab"
+            className={`tab  ${activeTab === "storage" ? "tab-active" : ""}`}
+            onClick={() => setActiveTab("storage")}
+          >
+            Storage
+          </button>
+          <button
+            role="tab"
+            className={`tab  ${activeTab === "logs" ? "tab-active" : ""}`}
+            onClick={() => setActiveTab("logs")}
+          >
+            Logs
+          </button>
+        </div>
+      )}
+      {activeTab === "transactions" && (
+        <div className="pt-4">
+          <TransactionsTable blocks={filteredBlocks} transactionReceipts={transactionReceipts} />
+          <PaginationButton
+            currentPage={currentPage}
+            totalItems={Number(totalBlocks)}
+            setCurrentPage={setCurrentPage}
+          />
+        </div>
+      )}
+      {activeTab === "code" && contractData && (
+        <AddressCodeTab bytecode={contractData.bytecode} assembly={contractData.assembly} />
+      )}
+      {activeTab === "storage" && <AddressStorageTab address={address} />}
+      {activeTab === "logs" && <AddressLogsTab address={address} />}
+    </>
+  );
+};
--- a/packages/nextjs/app/blockexplorer/_components/PaginationButton.tsx
+++ b/packages/nextjs/app/blockexplorer/_components/PaginationButton.tsx
@@ -0,0 +1,39 @@
+import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/24/outline";
+
+type PaginationButtonProps = {
+  currentPage: number;
+  totalItems: number;
+  setCurrentPage: (page: number) => void;
+};
+
+const ITEMS_PER_PAGE = 20;
+
+export const PaginationButton = ({ currentPage, totalItems, setCurrentPage }: PaginationButtonProps) => {
+  const isPrevButtonDisabled = currentPage === 0;
+  const isNextButtonDisabled = currentPage + 1 >= Math.ceil(totalItems / ITEMS_PER_PAGE);
+
+  const prevButtonClass = isPrevButtonDisabled ? "btn-disabled cursor-default" : "btn-primary";
+  const nextButtonClass = isNextButtonDisabled ? "btn-disabled cursor-default" : "btn-primary";
+
+  if (isNextButtonDisabled && isPrevButtonDisabled) return null;
+
+  return (
+    <div className="mt-5 justify-end flex gap-3 mx-5">
+      <button
+        className={`btn btn-sm ${prevButtonClass}`}
+        disabled={isPrevButtonDisabled}
+        onClick={() => setCurrentPage(currentPage - 1)}
+      >
+        <ArrowLeftIcon className="h-4 w-4" />
+      </button>
+      <span className="self-center text-primary-content font-medium">Page {currentPage + 1}</span>
+      <button
+        className={`btn btn-sm ${nextButtonClass}`}
+        disabled={isNextButtonDisabled}
+        onClick={() => setCurrentPage(currentPage + 1)}
+      >
+        <ArrowRightIcon className="h-4 w-4" />
+      </button>
+    </div>
+  );
+};
--- a/packages/nextjs/app/blockexplorer/_components/SearchBar.tsx
+++ b/packages/nextjs/app/blockexplorer/_components/SearchBar.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { isAddress, isHex } from "viem";
+import { hardhat } from "viem/chains";
+import { usePublicClient } from "wagmi";
+
+export const SearchBar = () => {
+  const [searchInput, setSearchInput] = useState("");
+  const router = useRouter();
+
+  const client = usePublicClient({ chainId: hardhat.id });
+
+  const handleSearch = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (isHex(searchInput)) {
+      try {
+        const tx = await client?.getTransaction({ hash: searchInput });
+        if (tx) {
+          router.push(`/blockexplorer/transaction/${searchInput}`);
+          return;
+        }
+      } catch (error) {
+        console.error("Failed to fetch transaction:", error);
+      }
+    }
+
+    if (isAddress(searchInput)) {
+      router.push(`/blockexplorer/address/${searchInput}`);
+      return;
+    }
+  };
+
+  return (
+    <form onSubmit={handleSearch} className="flex items-center justify-end mb-5 space-x-3 mx-5">
+      <input
+        className="border-primary bg-base-100 text-base-content placeholder:text-base-content/50 p-2 mr-2 w-full md:w-1/2 lg:w-1/3 rounded-md shadow-md focus:outline-hidden focus:ring-2 focus:ring-accent"
+        type="text"
+        value={searchInput}
+        placeholder="Search by hash or address"
+        onChange={e => setSearchInput(e.target.value)}
+      />
+      <button className="btn btn-sm btn-primary" type="submit">
+        Search
+      </button>
+    </form>
+  );
+};
--- a/packages/nextjs/app/blockexplorer/_components/TransactionHash.tsx
+++ b/packages/nextjs/app/blockexplorer/_components/TransactionHash.tsx
@@ -0,0 +1,28 @@
+import Link from "next/link";
+import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
+import { useCopyToClipboard } from "~~/hooks/scaffold-eth/useCopyToClipboard";
+
+export const TransactionHash = ({ hash }: { hash: string }) => {
+  const { copyToClipboard: copyAddressToClipboard, isCopiedToClipboard: isAddressCopiedToClipboard } =
+    useCopyToClipboard();
+
+  return (
+    <div className="flex items-center">
+      <Link href={`/blockexplorer/transaction/${hash}`}>
+        {hash?.substring(0, 6)}...{hash?.substring(hash.length - 4)}
+      </Link>
+      {isAddressCopiedToClipboard ? (
+        <CheckCircleIcon
+          className="ml-1.5 text-xl font-normal text-base-content h-5 w-5 cursor-pointer"
+          aria-hidden="true"
+        />
+      ) : (
+        <DocumentDuplicateIcon
+          className="ml-1.5 text-xl font-normal h-5 w-5 cursor-pointer"
+          aria-hidden="true"
+          onClick={() => copyAddressToClipboard(hash)}
+        />
+      )}
+    </div>
+  );
+};
--- a/packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx
+++ b/packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx
@@ -0,0 +1,97 @@
+import { TransactionHash } from "./TransactionHash";
+import { Address } from "@scaffold-ui/components";
+import { formatEther } from "viem";
+import { hardhat } from "viem/chains";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { TransactionWithFunction } from "~~/utils/scaffold-eth";
+import { TransactionsTableProps } from "~~/utils/scaffold-eth/";
+
+export const TransactionsTable = ({ blocks, transactionReceipts }: TransactionsTableProps) => {
+  const { targetNetwork } = useTargetNetwork();
+
+  return (
+    <div className="flex justify-center px-4 md:px-0">
+      <div className="overflow-x-auto w-full shadow-2xl rounded-xl">
+        <table className="table text-xl bg-base-100 table-zebra w-full md:table-md table-sm">
+          <thead>
+            <tr className="rounded-xl text-sm text-base-content">
+              <th className="bg-primary">Transaction Hash</th>
+              <th className="bg-primary">Function Called</th>
+              <th className="bg-primary">Block Number</th>
+              <th className="bg-primary">Time Mined</th>
+              <th className="bg-primary">From</th>
+              <th className="bg-primary">To</th>
+              <th className="bg-primary text-end">Value ({targetNetwork.nativeCurrency.symbol})</th>
+            </tr>
+          </thead>
+          <tbody>
+            {blocks.map(block =>
+              (block.transactions as TransactionWithFunction[]).map(tx => {
+                const receipt = transactionReceipts[tx.hash];
+                const timeMined = new Date(Number(block.timestamp) * 1000).toLocaleString();
+                const functionCalled = tx.input.substring(0, 10);
+
+                return (
+                  <tr key={tx.hash} className="hover text-sm">
+                    <td className="w-1/12 md:py-4">
+                      <TransactionHash hash={tx.hash} />
+                    </td>
+                    <td className="w-2/12 md:py-4">
+                      {tx.functionName === "0x" ? "" : <span className="mr-1">{tx.functionName}</span>}
+                      {functionCalled !== "0x" && (
+                        <span className="badge badge-primary font-bold text-xs">{functionCalled}</span>
+                      )}
+                    </td>
+                    <td className="w-1/12 md:py-4">{block.number?.toString()}</td>
+                    <td className="w-2/12 md:py-4">{timeMined}</td>
+                    <td className="w-2/12 md:py-4">
+                      <Address
+                        address={tx.from}
+                        size="sm"
+                        onlyEnsOrAddress
+                        blockExplorerAddressLink={
+                          targetNetwork.id === hardhat.id ? `/blockexplorer/address/${tx.from}` : undefined
+                        }
+                      />
+                    </td>
+                    <td className="w-2/12 md:py-4">
+                      {!receipt?.contractAddress ? (
+                        tx.to && (
+                          <Address
+                            address={tx.to}
+                            size="sm"
+                            onlyEnsOrAddress
+                            blockExplorerAddressLink={
+                              targetNetwork.id === hardhat.id ? `/blockexplorer/address/${tx.to}` : undefined
+                            }
+                          />
+                        )
+                      ) : (
+                        <div className="relative">
+                          <Address
+                            address={receipt.contractAddress}
+                            size="sm"
+                            onlyEnsOrAddress
+                            blockExplorerAddressLink={
+                              targetNetwork.id === hardhat.id
+                                ? `/blockexplorer/address/${receipt.contractAddress}`
+                                : undefined
+                            }
+                          />
+                          <small className="absolute top-4 left-4">(Contract Creation)</small>
+                        </div>
+                      )}
+                    </td>
+                    <td className="text-right md:py-4">
+                      {formatEther(tx.value)} {targetNetwork.nativeCurrency.symbol}
+                    </td>
+                  </tr>
+                );
+              }),
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
--- a/packages/nextjs/app/blockexplorer/_components/index.tsx
+++ b/packages/nextjs/app/blockexplorer/_components/index.tsx
@@ -0,0 +1,7 @@
+export * from "./SearchBar";
+export * from "./BackButton";
+export * from "./AddressCodeTab";
+export * from "./TransactionHash";
+export * from "./ContractTabs";
+export * from "./PaginationButton";
+export * from "./TransactionsTable";
--- a/packages/nextjs/app/blockexplorer/address/[address]/page.tsx
+++ b/packages/nextjs/app/blockexplorer/address/[address]/page.tsx
@@ -0,0 +1,101 @@
+import fs from "fs";
+import path from "path";
+import { Address } from "viem";
+import { hardhat } from "viem/chains";
+import { AddressComponent } from "~~/app/blockexplorer/_components/AddressComponent";
+import deployedContracts from "~~/contracts/deployedContracts";
+import { isZeroAddress } from "~~/utils/scaffold-eth/common";
+import { GenericContractsDeclaration } from "~~/utils/scaffold-eth/contract";
+
+type PageProps = {
+  params: Promise<{ address: Address }>;
+};
+
+async function fetchByteCodeAndAssembly(buildInfoDirectory: string, contractPath: string) {
+  const buildInfoFiles = fs.readdirSync(buildInfoDirectory);
+  let bytecode = "";
+  let assembly = "";
+
+  for (let i = 0; i < buildInfoFiles.length; i++) {
+    const filePath = path.join(buildInfoDirectory, buildInfoFiles[i]);
+
+    const buildInfo = JSON.parse(fs.readFileSync(filePath, "utf8"));
+
+    if (buildInfo.output.contracts[contractPath]) {
+      for (const contract in buildInfo.output.contracts[contractPath]) {
+        bytecode = buildInfo.output.contracts[contractPath][contract].evm.bytecode.object;
+        assembly = buildInfo.output.contracts[contractPath][contract].evm.bytecode.opcodes;
+        break;
+      }
+    }
+
+    if (bytecode && assembly) {
+      break;
+    }
+  }
+
+  return { bytecode, assembly };
+}
+
+const getContractData = async (address: Address) => {
+  const contracts = deployedContracts as GenericContractsDeclaration | null;
+  const chainId = hardhat.id;
+
+  if (!contracts || !contracts[chainId] || Object.keys(contracts[chainId]).length === 0) {
+    return null;
+  }
+
+  let contractPath = "";
+
+  const buildInfoDirectory = path.join(
+    __dirname,
+    "..",
+    "..",
+    "..",
+    "..",
+    "..",
+    "..",
+    "..",
+    "hardhat",
+    "artifacts",
+    "build-info",
+  );
+
+  if (!fs.existsSync(buildInfoDirectory)) {
+    throw new Error(`Directory ${buildInfoDirectory} not found.`);
+  }
+
+  const deployedContractsOnChain = contracts[chainId];
+  for (const [contractName, contractInfo] of Object.entries(deployedContractsOnChain)) {
+    if (contractInfo.address.toLowerCase() === address.toLowerCase()) {
+      contractPath = `contracts/${contractName}.sol`;
+      break;
+    }
+  }
+
+  if (!contractPath) {
+    // No contract found at this address
+    return null;
+  }
+
+  const { bytecode, assembly } = await fetchByteCodeAndAssembly(buildInfoDirectory, contractPath);
+
+  return { bytecode, assembly };
+};
+
+export function generateStaticParams() {
+  // An workaround to enable static exports in Next.js, generating single dummy page.
+  return [{ address: "0x0000000000000000000000000000000000000000" }];
+}
+
+const AddressPage = async (props: PageProps) => {
+  const params = await props.params;
+  const address = params?.address as Address;
+
+  if (isZeroAddress(address)) return null;
+
+  const contractData: { bytecode: string; assembly: string } | null = await getContractData(address);
+  return <AddressComponent address={address} contractData={contractData} />;
+};
+
+export default AddressPage;
--- a/packages/nextjs/app/blockexplorer/layout.tsx
+++ b/packages/nextjs/app/blockexplorer/layout.tsx
@@ -0,0 +1,12 @@
+import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
+
+export const metadata = getMetadata({
+  title: "Block Explorer",
+  description: "Block Explorer created with 🏗 Scaffold-ETH 2",
+});
+
+const BlockExplorerLayout = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+export default BlockExplorerLayout;
--- a/packages/nextjs/app/blockexplorer/page.tsx
+++ b/packages/nextjs/app/blockexplorer/page.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { PaginationButton, SearchBar, TransactionsTable } from "./_components";
+import type { NextPage } from "next";
+import { hardhat } from "viem/chains";
+import { useFetchBlocks } from "~~/hooks/scaffold-eth";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { notification } from "~~/utils/scaffold-eth";
+
+const BlockExplorer: NextPage = () => {
+  const { blocks, transactionReceipts, currentPage, totalBlocks, setCurrentPage, error } = useFetchBlocks();
+  const { targetNetwork } = useTargetNetwork();
+  const [isLocalNetwork, setIsLocalNetwork] = useState(true);
+  const [hasError, setHasError] = useState(false);
+
+  useEffect(() => {
+    if (targetNetwork.id !== hardhat.id) {
+      setIsLocalNetwork(false);
+    }
+  }, [targetNetwork.id]);
+
+  useEffect(() => {
+    if (targetNetwork.id === hardhat.id && error) {
+      setHasError(true);
+    }
+  }, [targetNetwork.id, error]);
+
+  useEffect(() => {
+    if (!isLocalNetwork) {
+      notification.error(
+        <>
+          <p className="font-bold mt-0 mb-1">
+            <code className="italic bg-base-300 text-base font-bold"> targetNetwork </code> is not localhost
+          </p>
+          <p className="m-0">
+            - You are on <code className="italic bg-base-300 text-base font-bold">{targetNetwork.name}</code> .This
+            block explorer is only for <code className="italic bg-base-300 text-base font-bold">localhost</code>.
+          </p>
+          <p className="mt-1 break-normal">
+            - You can use{" "}
+            <a className="text-accent" href={targetNetwork.blockExplorers?.default.url}>
+              {targetNetwork.blockExplorers?.default.name}
+            </a>{" "}
+            instead
+          </p>
+        </>,
+      );
+    }
+  }, [
+    isLocalNetwork,
+    targetNetwork.blockExplorers?.default.name,
+    targetNetwork.blockExplorers?.default.url,
+    targetNetwork.name,
+  ]);
+
+  useEffect(() => {
+    if (hasError) {
+      notification.error(
+        <>
+          <p className="font-bold mt-0 mb-1">Cannot connect to local provider</p>
+          <p className="m-0">
+            - Did you forget to run <code className="italic bg-base-300 text-base font-bold">yarn chain</code> ?
+          </p>
+          <p className="mt-1 break-normal">
+            - Or you can change <code className="italic bg-base-300 text-base font-bold">targetNetwork</code> in{" "}
+            <code className="italic bg-base-300 text-base font-bold">scaffold.config.ts</code>
+          </p>
+        </>,
+      );
+    }
+  }, [hasError]);
+
+  return (
+    <div className="container mx-auto my-10">
+      <SearchBar />
+      <TransactionsTable blocks={blocks} transactionReceipts={transactionReceipts} />
+      <PaginationButton currentPage={currentPage} totalItems={Number(totalBlocks)} setCurrentPage={setCurrentPage} />
+    </div>
+  );
+};
+
+export default BlockExplorer;
--- a/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx
+++ b/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx
@@ -0,0 +1,23 @@
+import TransactionComp from "../_components/TransactionComp";
+import type { NextPage } from "next";
+import { Hash } from "viem";
+import { isZeroAddress } from "~~/utils/scaffold-eth/common";
+
+type PageProps = {
+  params: Promise<{ txHash?: Hash }>;
+};
+
+export function generateStaticParams() {
+  // An workaround to enable static exports in Next.js, generating single dummy page.
+  return [{ txHash: "0x0000000000000000000000000000000000000000" }];
+}
+const TransactionPage: NextPage<PageProps> = async (props: PageProps) => {
+  const params = await props.params;
+  const txHash = params?.txHash as Hash;
+
+  if (isZeroAddress(txHash)) return null;
+
+  return <TransactionComp txHash={txHash} />;
+};
+
+export default TransactionPage;
--- a/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx
+++ b/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Address } from "@scaffold-ui/components";
+import { Hash, Transaction, TransactionReceipt, formatEther, formatUnits } from "viem";
+import { hardhat } from "viem/chains";
+import { usePublicClient } from "wagmi";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { decodeTransactionData, getFunctionDetails } from "~~/utils/scaffold-eth";
+import { replacer } from "~~/utils/scaffold-eth/common";
+
+const TransactionComp = ({ txHash }: { txHash: Hash }) => {
+  const client = usePublicClient({ chainId: hardhat.id });
+  const router = useRouter();
+  const [transaction, setTransaction] = useState<Transaction>();
+  const [receipt, setReceipt] = useState<TransactionReceipt>();
+  const [functionCalled, setFunctionCalled] = useState<string>();
+
+  const { targetNetwork } = useTargetNetwork();
+
+  useEffect(() => {
+    if (txHash && client) {
+      const fetchTransaction = async () => {
+        const tx = await client.getTransaction({ hash: txHash });
+        const receipt = await client.getTransactionReceipt({ hash: txHash });
+
+        const transactionWithDecodedData = decodeTransactionData(tx);
+        setTransaction(transactionWithDecodedData);
+        setReceipt(receipt);
+
+        const functionCalled = transactionWithDecodedData.input.substring(0, 10);
+        setFunctionCalled(functionCalled);
+      };
+
+      fetchTransaction();
+    }
+  }, [client, txHash]);
+
+  return (
+    <div className="container mx-auto mt-10 mb-20 px-10 md:px-0">
+      <button className="btn btn-sm btn-primary" onClick={() => router.back()}>
+        Back
+      </button>
+      {transaction ? (
+        <div className="overflow-x-auto">
+          <h2 className="text-3xl font-bold mb-4 text-center text-primary-content">Transaction Details</h2>{" "}
+          <table className="table rounded-lg bg-base-100 w-full shadow-lg md:table-lg table-md">
+            <tbody>
+              <tr>
+                <td>
+                  <strong>Transaction Hash:</strong>
+                </td>
+                <td>{transaction.hash}</td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>Block Number:</strong>
+                </td>
+                <td>{Number(transaction.blockNumber)}</td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>From:</strong>
+                </td>
+                <td>
+                  <Address
+                    address={transaction.from}
+                    format="long"
+                    onlyEnsOrAddress
+                    blockExplorerAddressLink={
+                      targetNetwork.id === hardhat.id ? `/blockexplorer/address/${transaction.from}` : undefined
+                    }
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>To:</strong>
+                </td>
+                <td>
+                  {!receipt?.contractAddress ? (
+                    transaction.to && (
+                      <Address
+                        address={transaction.to}
+                        format="long"
+                        onlyEnsOrAddress
+                        blockExplorerAddressLink={
+                          targetNetwork.id === hardhat.id ? `/blockexplorer/address/${transaction.to}` : undefined
+                        }
+                      />
+                    )
+                  ) : (
+                    <span>
+                      Contract Creation:
+                      <Address
+                        address={receipt.contractAddress}
+                        format="long"
+                        onlyEnsOrAddress
+                        blockExplorerAddressLink={
+                          targetNetwork.id === hardhat.id
+                            ? `/blockexplorer/address/${receipt.contractAddress}`
+                            : undefined
+                        }
+                      />
+                    </span>
+                  )}
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>Value:</strong>
+                </td>
+                <td>
+                  {formatEther(transaction.value)} {targetNetwork.nativeCurrency.symbol}
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>Function called:</strong>
+                </td>
+                <td>
+                  <div className="w-full md:max-w-[600px] lg:max-w-[800px] overflow-x-auto whitespace-nowrap">
+                    {functionCalled === "0x" ? (
+                      "This transaction did not call any function."
+                    ) : (
+                      <>
+                        <span className="mr-2">{getFunctionDetails(transaction)}</span>
+                        <span className="badge badge-primary font-bold">{functionCalled}</span>
+                      </>
+                    )}
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>Gas Price:</strong>
+                </td>
+                <td>{formatUnits(transaction.gasPrice || 0n, 9)} Gwei</td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>Data:</strong>
+                </td>
+                <td className="form-control">
+                  <textarea
+                    readOnly
+                    value={transaction.input}
+                    className="p-0 w-full textarea-primary bg-inherit h-[150px]"
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>Logs:</strong>
+                </td>
+                <td>
+                  <ul>
+                    {receipt?.logs?.map((log, i) => (
+                      <li key={i}>
+                        <strong>Log {i} topics:</strong> {JSON.stringify(log.topics, replacer, 2)}
+                      </li>
+                    ))}
+                  </ul>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <p className="text-2xl text-base-content">Loading...</p>
+      )}
+    </div>
+  );
+};
+
+export default TransactionComp;
--- a/packages/nextjs/app/debug/_components/ContractUI.tsx
+++ b/packages/nextjs/app/debug/_components/ContractUI.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+// @refresh reset
+import { Contract } from "@scaffold-ui/debug-contracts";
+import { useDeployedContractInfo } from "~~/hooks/scaffold-eth";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { ContractName } from "~~/utils/scaffold-eth/contract";
+
+type ContractUIProps = {
+  contractName: ContractName;
+  className?: string;
+};
+
+/**
+ * UI component to interface with deployed contracts.
+ **/
+export const ContractUI = ({ contractName }: ContractUIProps) => {
+  const { targetNetwork } = useTargetNetwork();
+  const { data: deployedContractData, isLoading: deployedContractLoading } = useDeployedContractInfo({ contractName });
+
+  if (deployedContractLoading) {
+    return (
+      <div className="mt-14">
+        <span className="loading loading-spinner loading-lg"></span>
+      </div>
+    );
+  }
+
+  if (!deployedContractData) {
+    return (
+      <p className="text-3xl mt-14">
+        No contract found by the name of {contractName} on chain {targetNetwork.name}!
+      </p>
+    );
+  }
+
+  return <Contract contractName={contractName as string} contract={deployedContractData} chainId={targetNetwork.id} />;
+};
--- a/packages/nextjs/app/debug/_components/DebugContracts.tsx
+++ b/packages/nextjs/app/debug/_components/DebugContracts.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { useEffect, useMemo } from "react";
+import { ContractUI } from "./ContractUI";
+import "@scaffold-ui/debug-contracts/styles.css";
+import { useSessionStorage } from "usehooks-ts";
+import { BarsArrowUpIcon } from "@heroicons/react/20/solid";
+import { ContractName, GenericContract } from "~~/utils/scaffold-eth/contract";
+import { useAllContracts } from "~~/utils/scaffold-eth/contractsData";
+
+const selectedContractStorageKey = "scaffoldEth2.selectedContract";
+
+export function DebugContracts() {
+  const contractsData = useAllContracts();
+  const contractNames = useMemo(
+    () =>
+      Object.keys(contractsData).sort((a, b) => {
+        return a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" });
+      }) as ContractName[],
+    [contractsData],
+  );
+
+  const [selectedContract, setSelectedContract] = useSessionStorage<ContractName>(
+    selectedContractStorageKey,
+    contractNames[0],
+    { initializeWithValue: false },
+  );
+
+  useEffect(() => {
+    if (!contractNames.includes(selectedContract)) {
+      setSelectedContract(contractNames[0]);
+    }
+  }, [contractNames, selectedContract, setSelectedContract]);
+
+  return (
+    <div className="flex flex-col gap-y-6 lg:gap-y-8 py-8 lg:py-12 justify-center items-center">
+      {contractNames.length === 0 ? (
+        <p className="text-3xl mt-14">No contracts found!</p>
+      ) : (
+        <>
+          {contractNames.length > 1 && (
+            <div className="flex flex-row gap-2 w-full max-w-7xl pb-1 px-6 lg:px-10 flex-wrap">
+              {contractNames.map(contractName => (
+                <button
+                  className={`btn btn-secondary btn-sm font-light hover:border-transparent ${
+                    contractName === selectedContract
+                      ? "bg-base-300 hover:bg-base-300 no-animation"
+                      : "bg-base-100 hover:bg-secondary"
+                  }`}
+                  key={contractName}
+                  onClick={() => setSelectedContract(contractName)}
+                >
+                  {contractName}
+                  {(contractsData[contractName] as GenericContract)?.external && (
+                    <span className="tooltip tooltip-top tooltip-accent" data-tip="External contract">
+                      <BarsArrowUpIcon className="h-4 w-4 cursor-pointer" />
+                    </span>
+                  )}
+                </button>
+              ))}
+            </div>
+          )}
+          {contractNames.map(
+            contractName =>
+              contractName === selectedContract && <ContractUI key={contractName} contractName={contractName} />,
+          )}
+        </>
+      )}
+    </div>
+  );
+}
--- a/packages/nextjs/app/debug/page.tsx
+++ b/packages/nextjs/app/debug/page.tsx
@@ -0,0 +1,28 @@
+import { DebugContracts } from "./_components/DebugContracts";
+import type { NextPage } from "next";
+import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
+
+export const metadata = getMetadata({
+  title: "Debug Contracts",
+  description: "Debug your deployed 🏗 Scaffold-ETH 2 contracts in an easy way",
+});
+
+const Debug: NextPage = () => {
+  return (
+    <>
+      <DebugContracts />
+      <div className="text-center mt-8 bg-secondary p-10">
+        <h1 className="text-4xl my-0">Debug Contracts</h1>
+        <p className="text-neutral">
+          You can debug & interact with your deployed contracts here.
+          <br /> Check{" "}
+          <code className="italic bg-base-300 text-base font-bold [word-spacing:-0.5rem] px-1">
+            packages / nextjs / app / debug / page.tsx
+          </code>{" "}
+        </p>
+      </div>
+    </>
+  );
+};
+
+export default Debug;
--- a/packages/nextjs/app/dice/_components/Amount.tsx
+++ b/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>
+  );
+};
--- a/packages/nextjs/app/dice/_components/RollEvents.tsx
+++ b/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>
+  );
+};
--- a/packages/nextjs/app/dice/_components/WinnerEvents.tsx
+++ b/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>
+  );
+};
--- a/packages/nextjs/app/dice/_components/index.ts
+++ b/packages/nextjs/app/dice/_components/index.ts
@@ -0,0 +1,3 @@
+export * from "./Amount";
+export * from "./RollEvents";
+export * from "./WinnerEvents";
--- a/packages/nextjs/app/dice/page.tsx
+++ b/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;
--- a/packages/nextjs/app/layout.tsx
+++ b/packages/nextjs/app/layout.tsx
@@ -0,0 +1,31 @@
+import { Space_Grotesk } from "next/font/google";
+import "@rainbow-me/rainbowkit/styles.css";
+import "@scaffold-ui/components/styles.css";
+import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders";
+import { ThemeProvider } from "~~/components/ThemeProvider";
+import "~~/styles/globals.css";
+import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
+
+const spaceGrotesk = Space_Grotesk({
+  subsets: ["latin"],
+  variable: "--font-space-grotesk",
+});
+
+export const metadata = getMetadata({
+  title: "Dice Game | Speedrun Ethereum",
+  description: "Built with 🏗 Scaffold-ETH 2",
+});
+
+const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <html suppressHydrationWarning className={`${spaceGrotesk.variable} font-space-grotesk`}>
+      <body>
+        <ThemeProvider enableSystem>
+          <ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+};
+
+export default ScaffoldEthApp;
--- a/packages/nextjs/app/not-found.tsx
+++ b/packages/nextjs/app/not-found.tsx
@@ -0,0 +1,16 @@
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <div className="flex items-center h-full flex-1 justify-center bg-base-200">
+      <div className="text-center">
+        <h1 className="text-6xl font-bold m-0 mb-1">404</h1>
+        <h2 className="text-2xl font-semibold m-0">Page Not Found</h2>
+        <p className="text-base-content/70 m-0 mb-4">The page you&apos;re looking for doesn&apos;t exist.</p>
+        <Link href="/" className="btn btn-primary">
+          Go Home
+        </Link>
+      </div>
+    </div>
+  );
+}
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { Address } from "@scaffold-ui/components";
+import type { NextPage } from "next";
+import { hardhat } from "viem/chains";
+import { useAccount } from "wagmi";
+import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth";
+
+const Home: NextPage = () => {
+  const { address: connectedAddress } = useAccount();
+  const { targetNetwork } = useTargetNetwork();
+
+  return (
+    <>
+      <div className="flex items-center flex-col grow pt-10">
+        <div className="px-5">
+          <h1 className="text-center">
+            <span className="block text-2xl mb-2">Welcome to</span>
+            <span className="block text-4xl font-bold">Scaffold-ETH 2</span>
+            <span className="block text-xl font-bold">(Speedrun Ethereum Challenge: Dice game extension)</span>
+          </h1>
+          <div className="flex justify-center items-center space-x-2 flex-col">
+            <p className="my-2 font-medium">Connected Address:</p>
+            <Address
+              address={connectedAddress}
+              chain={targetNetwork}
+              blockExplorerAddressLink={
+                targetNetwork.id === hardhat.id ? `/blockexplorer/address/${connectedAddress}` : undefined
+              }
+            />
+          </div>
+
+          <div className="flex items-center flex-col flex-grow pt-10">
+            <div className="px-5">
+              <h1 className="text-center mb-6">
+                <span className="block text-2xl mb-2">Speedrun Ethereum</span>
+                <span className="block text-4xl font-bold">Challenge: 🎲 Dice Game</span>
+              </h1>
+              <div className="flex flex-col items-center justify-center">
+                <Image
+                  src="/hero.png"
+                  width="727"
+                  height="231"
+                  alt="challenge banner"
+                  className="rounded-xl border-4 border-primary"
+                />
+                <div className="max-w-3xl">
+                  <p className="text-lg mt-10">
+                    🎰 Randomness is tricky on a public deterministic blockchain. The block hash is an easy to use, but
+                    very weak form of randomness. This challenge will give you an example of a contract using the block
+                    hash to create random numbers. This randomness is exploitable. Other, stronger forms of randomness
+                    include commit/reveal schemes, oracles, or VRF from Chainlink.
+                  </p>
+                  <p className="text-lg mt-2">
+                    🧤 Every time a player rolls the dice, they are required to send .002 Eth. 40 percent of this value
+                    is added to the current prize amount while the other 60 percent stays in the contract to fund future
+                    prizes. Once a prize is won, the new prize amount is set to 10% of the total balance of the DiceGame
+                    contract.
+                  </p>
+                  <p className="text-lg mt-2">
+                    🧨 Your job is to attack the Dice Game contract! You will create a new contract that will predict
+                    the randomness ahead of time and only roll the dice when you′re guaranteed to be a winner!
+                  </p>
+                  <p className="text-lg mt-2">
+                    💬 Meet other builders working on this challenge and get help in the{" "}
+                    <a href="https://t.me/+3StA0aBSArFjNjUx" target="_blank" rel="noreferrer" className="underline">
+                      Telegram Group
+                    </a>
+                  </p>
+                  <p className="text-center text-lg">
+                    <a href="https://speedrunethereum.com/" target="_blank" rel="noreferrer" className="underline">
+                      SpeedrunEthereum.com
+                    </a>
+                    !
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="grow bg-base-300 w-full mt-16 px-8 py-12">
+          <div className="flex justify-center items-center gap-12 flex-col md:flex-row">
+            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
+              <BugAntIcon className="h-8 w-8 fill-secondary" />
+              <p>
+                Tinker with your smart contract using the{" "}
+                <Link href="/debug" passHref className="link">
+                  Debug Contracts
+                </Link>{" "}
+                tab.
+              </p>
+            </div>
+            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
+              <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
+              <p>
+                Explore your local transactions with the{" "}
+                <Link href="/blockexplorer" passHref className="link">
+                  Block Explorer
+                </Link>{" "}
+                tab.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Home;