Speed Run Ethereum, #2: Token Vendor, Debug Contracts page

DebugContracts.tsx

"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { BarsArrowUpIcon } from "@heroicons/react/20/solid";
import { ContractUI } from "~~/app/debug/_components/contract";
import { ContractName } from "~~/utils/scaffold-eth/contract";
import { getAllContracts } from "~~/utils/scaffold-eth/contractsData";

const selectedContractStorageKey = "scaffoldEth2.selectedContract";
const contractsData = getAllContracts();

export function DebugContracts() {
  const contractNames = useMemo(() => Object.keys(contractsData) as ContractName[], []);

  const [selectedContract, setSelectedContract] = useState<ContractName>(() => {
    if (typeof window !== "undefined") {
      const storedValue = localStorage.getItem(selectedContractStorageKey);
      return (storedValue as ContractName) || contractNames[0];
    }
    return contractNames[0];
  });

  const handleSetSelectedContract = useCallback((contractName: ContractName) => {
    setSelectedContract(contractName);
    if (typeof window !== "undefined") {
      localStorage.setItem(selectedContractStorageKey, contractName);
    }
  }, []);

  useEffect(() => {
    if (!contractNames.includes(selectedContract)) {
      handleSetSelectedContract(contractNames[0]);
    }
  }, [selectedContract, handleSetSelectedContract, contractNames]);

  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={() => handleSetSelectedContract(contractName)}
                >
                  {contractName}
                  {contractsData[contractName].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 => (
            <ContractUI
              key={contractName}
              contractName={contractName}
              className={contractName === selectedContract ? "" : "hidden"}
            />
          ))}
        </>
      )}
    </div>
  );
}