diff --git a/.changeset/many-pens-retire.md b/.changeset/many-pens-retire.md
new file mode 100644
index 000000000..c5ebb10bf
--- /dev/null
+++ b/.changeset/many-pens-retire.md
@@ -0,0 +1,5 @@
+---
+"create-eth": patch
+---
+
+foundry: fix verification script failing in latest foundry version
diff --git a/.changeset/silver-lizards-begin.md b/.changeset/silver-lizards-begin.md
new file mode 100644
index 000000000..1990e30f7
--- /dev/null
+++ b/.changeset/silver-lizards-begin.md
@@ -0,0 +1,8 @@
+---
+"create-eth": patch
+---
+
+- Better transaction result formatting in debug page (#853)
+- fix: address components copy icon on small screens (#864)
+- lock typescript and abitype version (#871)
+- rewrite useScaffoldEventHistory hook (#869)
diff --git a/templates/base/packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx b/templates/base/packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx
index 9ccc37fed..a0d097a53 100644
--- a/templates/base/packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx
+++ b/templates/base/packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx
@@ -76,17 +76,17 @@ export const ReadOnlyFunctionForm = ({
         <InheritanceTooltip inheritedFrom={inheritedFrom} />
       </p>
       {inputElements}
-      <div className="flex justify-between gap-2 flex-wrap">
-        <div className="flex-grow w-4/5">
+      <div className="flex flex-col md:flex-row justify-between gap-2 flex-wrap">
+        <div className="flex-grow w-full md:max-w-[80%]">
           {result !== null && result !== undefined && (
-            <div className="bg-secondary rounded-3xl text-sm px-4 py-1.5 break-words">
+            <div className="bg-secondary rounded-3xl text-sm px-4 py-1.5 break-words overflow-auto">
               <p className="font-bold m-0 mb-1">Result:</p>
-              <pre className="whitespace-pre-wrap break-words">{displayTxResult(result)}</pre>
+              <pre className="whitespace-pre-wrap break-words">{displayTxResult(result, "sm")}</pre>
             </div>
           )}
         </div>
         <button
-          className="btn btn-secondary btn-sm"
+          className="btn btn-secondary btn-sm self-end md:self-start"
           onClick={async () => {
             const { data } = await refetch();
             setResult(data);
diff --git a/templates/base/packages/nextjs/app/debug/_components/contract/TxReceipt.tsx b/templates/base/packages/nextjs/app/debug/_components/contract/TxReceipt.tsx
index 87e74f5b5..764faeb6c 100644
--- a/templates/base/packages/nextjs/app/debug/_components/contract/TxReceipt.tsx
+++ b/templates/base/packages/nextjs/app/debug/_components/contract/TxReceipt.tsx
@@ -2,11 +2,10 @@ import { useState } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { TransactionReceipt } from "viem";
 import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
-import { displayTxResult } from "~~/app/debug/_components/contract";
+import { ObjectFieldDisplay } from "~~/app/debug/_components/contract";
+import { replacer } from "~~/utils/scaffold-eth/common";
 
-export const TxReceipt = (
-  txResult: string | number | bigint | Record<string, any> | TransactionReceipt | undefined,
-) => {
+export const TxReceipt = ({ txResult }: { txResult: TransactionReceipt }) => {
   const [txResultCopied, setTxResultCopied] = useState(false);
 
   return (
@@ -19,7 +18,7 @@ export const TxReceipt = (
           />
         ) : (
           <CopyToClipboard
-            text={displayTxResult(txResult) as string}
+            text={JSON.stringify(txResult, replacer, 2)}
             onCopy={() => {
               setTxResultCopied(true);
               setTimeout(() => {
@@ -39,8 +38,12 @@ export const TxReceipt = (
         <div className="collapse-title text-sm min-h-0 py-1.5 pl-1">
           <strong>Transaction Receipt</strong>
         </div>
-        <div className="collapse-content overflow-auto bg-secondary rounded-t-none rounded-3xl">
-          <pre className="text-xs pt-4">{displayTxResult(txResult)}</pre>
+        <div className="collapse-content overflow-auto bg-secondary rounded-t-none rounded-3xl !pl-0">
+          <pre className="text-xs">
+            {Object.entries(txResult).map(([k, v]) => (
+              <ObjectFieldDisplay name={k} value={v} size="xs" leftPad={false} key={k} />
+            ))}
+          </pre>
         </div>
       </div>
     </div>
diff --git a/templates/base/packages/nextjs/app/debug/_components/contract/utilsDisplay.tsx b/templates/base/packages/nextjs/app/debug/_components/contract/utilsDisplay.tsx
index f5d212993..3148affdf 100644
--- a/templates/base/packages/nextjs/app/debug/_components/contract/utilsDisplay.tsx
+++ b/templates/base/packages/nextjs/app/debug/_components/contract/utilsDisplay.tsx
@@ -1,5 +1,6 @@
-import { ReactElement } from "react";
-import { TransactionBase, TransactionReceipt, formatEther, isAddress } from "viem";
+import { ReactElement, useState } from "react";
+import { TransactionBase, TransactionReceipt, formatEther, isAddress, isHex } from "viem";
+import { ArrowsRightLeftIcon } from "@heroicons/react/24/solid";
 import { Address } from "~~/components/scaffold-eth";
 import { replacer } from "~~/utils/scaffold-eth/common";
 
@@ -13,44 +14,101 @@ type DisplayContent =
   | undefined
   | unknown;
 
+type ResultFontSize = "sm" | "base" | "xs" | "lg" | "xl" | "2xl" | "3xl";
+
 export const displayTxResult = (
   displayContent: DisplayContent | DisplayContent[],
-  asText = false,
+  fontSize: ResultFontSize = "base",
 ): string | ReactElement | number => {
   if (displayContent == null) {
     return "";
   }
 
   if (typeof displayContent === "bigint") {
-    try {
-      const asNumber = Number(displayContent);
-      if (asNumber <= Number.MAX_SAFE_INTEGER && asNumber >= Number.MIN_SAFE_INTEGER) {
-        return asNumber;
-      } else {
-        return "Ξ" + formatEther(displayContent);
-      }
-    } catch (e) {
-      return "Ξ" + formatEther(displayContent);
-    }
+    return <NumberDisplay value={displayContent} />;
   }
 
-  if (typeof displayContent === "string" && isAddress(displayContent)) {
-    return asText ? displayContent : <Address address={displayContent} />;
+  if (typeof displayContent === "string") {
+    if (isAddress(displayContent)) {
+      return <Address address={displayContent} size={fontSize} />;
+    }
+
+    if (isHex(displayContent)) {
+      return displayContent; // don't add quotes
+    }
   }
 
   if (Array.isArray(displayContent)) {
-    const mostReadable = (v: DisplayContent) =>
-      ["number", "boolean"].includes(typeof v) ? v : displayTxResultAsText(v);
-    const displayable = JSON.stringify(displayContent.map(mostReadable), replacer);
-
-    return asText ? (
-      displayable
-    ) : (
-      <span style={{ overflowWrap: "break-word", width: "100%" }}>{displayable.replaceAll(",", ",\n")}</span>
-    );
+    return <ArrayDisplay values={displayContent} size={fontSize} />;
+  }
+
+  if (typeof displayContent === "object") {
+    return <StructDisplay struct={displayContent} size={fontSize} />;
   }
 
   return JSON.stringify(displayContent, replacer, 2);
 };
 
-const displayTxResultAsText = (displayContent: DisplayContent) => displayTxResult(displayContent, true);
+const NumberDisplay = ({ value }: { value: bigint }) => {
+  const [isEther, setIsEther] = useState(false);
+
+  const asNumber = Number(value);
+  if (asNumber <= Number.MAX_SAFE_INTEGER && asNumber >= Number.MIN_SAFE_INTEGER) {
+    return String(value);
+  }
+
+  return (
+    <div className="flex items-baseline">
+      {isEther ? "Ξ" + formatEther(value) : String(value)}
+      <span
+        className="tooltip tooltip-secondary font-sans ml-2"
+        data-tip={isEther ? "Multiply by 1e18" : "Divide by 1e18"}
+      >
+        <button className="btn btn-ghost btn-circle btn-xs" onClick={() => setIsEther(!isEther)}>
+          <ArrowsRightLeftIcon className="h-3 w-3 opacity-65" />
+        </button>
+      </span>
+    </div>
+  );
+};
+
+export const ObjectFieldDisplay = ({
+  name,
+  value,
+  size,
+  leftPad = true,
+}: {
+  name: string;
+  value: DisplayContent;
+  size: ResultFontSize;
+  leftPad?: boolean;
+}) => {
+  return (
+    <div className={`flex flex-row items-baseline ${leftPad ? "ml-4" : ""}`}>
+      <span className="text-gray-500 dark:text-gray-400 mr-2">{name}:</span>
+      <span className="text-base-content">{displayTxResult(value, size)}</span>
+    </div>
+  );
+};
+
+const ArrayDisplay = ({ values, size }: { values: DisplayContent[]; size: ResultFontSize }) => {
+  return (
+    <div className="flex flex-col gap-y-1">
+      {values.length ? "array" : "[]"}
+      {values.map((v, i) => (
+        <ObjectFieldDisplay key={i} name={`[${i}]`} value={v} size={size} />
+      ))}
+    </div>
+  );
+};
+
+const StructDisplay = ({ struct, size }: { struct: Record<string, any>; size: ResultFontSize }) => {
+  return (
+    <div className="flex flex-col gap-y-1">
+      struct
+      {Object.entries(struct).map(([k, v]) => (
+        <ObjectFieldDisplay key={k} name={k} value={v} size={size} />
+      ))}
+    </div>
+  );
+};
diff --git a/templates/base/packages/nextjs/app/page.tsx b/templates/base/packages/nextjs/app/page.tsx
index fcca994c5..b91c22fe8 100644
--- a/templates/base/packages/nextjs/app/page.tsx
+++ b/templates/base/packages/nextjs/app/page.tsx
@@ -17,7 +17,7 @@ const Home: NextPage = () => {
             <span className="block text-2xl mb-2">Welcome to</span>
             <span className="block text-4xl font-bold">Scaffold-ETH 2</span>
           </h1>
-          <div className="flex justify-center items-center space-x-2">
+          <div className="flex justify-center items-center space-x-2 flex-col sm:flex-row">
             <p className="my-2 font-medium">Connected Address:</p>
             <Address address={connectedAddress} />
           </div>
diff --git a/templates/base/packages/nextjs/components/scaffold-eth/Address.tsx b/templates/base/packages/nextjs/components/scaffold-eth/Address.tsx
index 2241edc89..f24b4597a 100644
--- a/templates/base/packages/nextjs/components/scaffold-eth/Address.tsx
+++ b/templates/base/packages/nextjs/components/scaffold-eth/Address.tsx
@@ -91,7 +91,7 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
   }
 
   return (
-    <div className="flex items-center">
+    <div className="flex items-center flex-shrink-0">
       <div className="flex-shrink-0">
         <BlockieAvatar
           address={checkSumAddress}
@@ -117,7 +117,7 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
       )}
       {addressCopied ? (
         <CheckCircleIcon
-          className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer"
+          className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer flex-shrink-0"
           aria-hidden="true"
         />
       ) : (
@@ -131,7 +131,7 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
           }}
         >
           <DocumentDuplicateIcon
-            className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer"
+            className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer flex-shrink-0"
             aria-hidden="true"
           />
         </CopyToClipboard>
diff --git a/templates/base/packages/nextjs/components/scaffold-eth/Input/IntegerInput.tsx b/templates/base/packages/nextjs/components/scaffold-eth/Input/IntegerInput.tsx
index f9b436124..4fde183e0 100644
--- a/templates/base/packages/nextjs/components/scaffold-eth/Input/IntegerInput.tsx
+++ b/templates/base/packages/nextjs/components/scaffold-eth/Input/IntegerInput.tsx
@@ -47,7 +47,7 @@ export const IntegerInput = ({
         !disableMultiplyBy1e18 && (
           <div
             className="space-x-4 flex tooltip tooltip-top tooltip-secondary before:content-[attr(data-tip)] before:right-[-10px] before:left-auto before:transform-none"
-            data-tip="Multiply by 10^18 (wei)"
+            data-tip="Multiply by 1e18 (wei)"
           >
             <button
               className={`${disabled ? "cursor-not-allowed" : "cursor-pointer"} font-semibold px-4 text-accent`}
diff --git a/templates/base/packages/nextjs/hooks/scaffold-eth/useScaffoldEventHistory.ts b/templates/base/packages/nextjs/hooks/scaffold-eth/useScaffoldEventHistory.ts
index 869bb5c11..48f8ed671 100644
--- a/templates/base/packages/nextjs/hooks/scaffold-eth/useScaffoldEventHistory.ts
+++ b/templates/base/packages/nextjs/hooks/scaffold-eth/useScaffoldEventHistory.ts
@@ -1,13 +1,10 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTargetNetwork } from "./useTargetNetwork";
+import { useInfiniteQuery } from "@tanstack/react-query";
 import { Abi, AbiEvent, ExtractAbiEventNames } from "abitype";
-import { useInterval } from "usehooks-ts";
-import { Hash } from "viem";
-import * as chains from "viem/chains";
-import { usePublicClient } from "wagmi";
+import { BlockNumber, GetLogsParameters } from "viem";
+import { Config, UsePublicClientReturnType, useBlockNumber, usePublicClient } from "wagmi";
 import { useDeployedContractInfo } from "~~/hooks/scaffold-eth";
-import scaffoldConfig from "~~/scaffold.config";
-import { replacer } from "~~/utils/scaffold-eth/common";
 import {
   ContractAbi,
   ContractName,
@@ -15,6 +12,44 @@ import {
   UseScaffoldEventHistoryData,
 } from "~~/utils/scaffold-eth/contract";
 
+const getEvents = async (
+  getLogsParams: GetLogsParameters<AbiEvent | undefined, AbiEvent[] | undefined, boolean, BlockNumber, BlockNumber>,
+  publicClient?: UsePublicClientReturnType<Config, number>,
+  Options?: {
+    blockData?: boolean;
+    transactionData?: boolean;
+    receiptData?: boolean;
+  },
+) => {
+  const logs = await publicClient?.getLogs({
+    address: getLogsParams.address,
+    fromBlock: getLogsParams.fromBlock,
+    args: getLogsParams.args,
+    event: getLogsParams.event,
+  });
+  if (!logs) return undefined;
+
+  const finalEvents = await Promise.all(
+    logs.map(async log => {
+      return {
+        ...log,
+        blockData:
+          Options?.blockData && log.blockHash ? await publicClient?.getBlock({ blockHash: log.blockHash }) : null,
+        transactionData:
+          Options?.transactionData && log.transactionHash
+            ? await publicClient?.getTransaction({ hash: log.transactionHash })
+            : null,
+        receiptData:
+          Options?.receiptData && log.transactionHash
+            ? await publicClient?.getTransactionReceipt({ hash: log.transactionHash })
+            : null,
+      };
+    }),
+  );
+
+  return finalEvents;
+};
+
 /**
  * Reads events from a deployed contract
  * @param config - The config settings
@@ -45,135 +80,84 @@ export const useScaffoldEventHistory = <
   watch,
   enabled = true,
 }: UseScaffoldEventHistoryConfig<TContractName, TEventName, TBlockData, TTransactionData, TReceiptData>) => {
-  const [events, setEvents] = useState<any[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string>();
-  const [fromBlockUpdated, setFromBlockUpdated] = useState<bigint>(fromBlock);
-
-  const { data: deployedContractData, isLoading: deployedContractLoading } = useDeployedContractInfo(contractName);
   const { targetNetwork } = useTargetNetwork();
   const publicClient = usePublicClient({
     chainId: targetNetwork.id,
   });
+  const [isFirstRender, setIsFirstRender] = useState(true);
 
-  const readEvents = useCallback(
-    async () => {
-      setIsLoading(true);
-      try {
-        if (!deployedContractData) {
-          throw new Error("Contract not found");
-        }
-
-        if (!enabled) {
-          throw new Error("Hook disabled");
-        }
+  const { data: blockNumber } = useBlockNumber({ watch: watch, chainId: targetNetwork.id });
 
-        if (!publicClient) {
-          throw new Error("Public client not found");
-        }
+  const { data: deployedContractData } = useDeployedContractInfo(contractName);
 
-        const event = (deployedContractData.abi as Abi).find(
-          part => part.type === "event" && part.name === eventName,
-        ) as AbiEvent;
+  const event =
+    deployedContractData &&
+    ((deployedContractData.abi as Abi).find(part => part.type === "event" && part.name === eventName) as AbiEvent);
 
-        const blockNumber = await publicClient.getBlockNumber({ cacheTime: 0 });
+  const isContractAddressAndClientReady = Boolean(deployedContractData?.address) && Boolean(publicClient);
 
-        if (blockNumber >= fromBlockUpdated) {
-          const logs = await publicClient.getLogs({
-            address: deployedContractData?.address,
-            event,
-            args: filters as any,
-            fromBlock: fromBlockUpdated,
-            toBlock: blockNumber,
-          });
-          setFromBlockUpdated(blockNumber + 1n);
-
-          const newEvents = [];
-          for (let i = logs.length - 1; i >= 0; i--) {
-            newEvents.push({
-              log: logs[i],
-              args: logs[i].args,
-              block:
-                blockData && logs[i].blockHash === null
-                  ? null
-                  : await publicClient.getBlock({ blockHash: logs[i].blockHash as Hash }),
-              transaction:
-                transactionData && logs[i].transactionHash !== null
-                  ? await publicClient.getTransaction({ hash: logs[i].transactionHash as Hash })
-                  : null,
-              receipt:
-                receiptData && logs[i].transactionHash !== null
-                  ? await publicClient.getTransactionReceipt({ hash: logs[i].transactionHash as Hash })
-                  : null,
-            });
-          }
-          setEvents([...newEvents, ...events]);
-          setError(undefined);
-        }
-      } catch (e: any) {
-        if (events.length > 0) {
-          setEvents([]);
-        }
-        setError(e);
-        console.error(e);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      blockData,
-      deployedContractData,
-      enabled,
-      eventName,
-      events,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      JSON.stringify(filters, replacer),
-      fromBlockUpdated,
-      publicClient,
-      receiptData,
-      transactionData,
+  const query = useInfiniteQuery({
+    queryKey: [
+      "eventHistory",
+      {
+        contractName,
+        address: deployedContractData?.address,
+        eventName,
+        fromBlock: fromBlock.toString(),
+        chainId: targetNetwork.id,
+      },
     ],
-  );
-
-  useEffect(() => {
-    if (!deployedContractLoading) {
-      readEvents();
-    }
-  }, [readEvents, deployedContractLoading]);
-
-  useEffect(() => {
-    // Reset the internal state when target network or fromBlock changed
-    setEvents([]);
-    setFromBlockUpdated(fromBlock);
-    setError(undefined);
-  }, [fromBlock, targetNetwork.id]);
-
-  useInterval(
-    async () => {
-      if (!deployedContractLoading) {
-        readEvents();
-      }
+    queryFn: async ({ pageParam }) => {
+      if (!isContractAddressAndClientReady) return undefined;
+      const data = await getEvents(
+        { address: deployedContractData?.address, event, fromBlock: pageParam, args: filters },
+        publicClient,
+        { blockData, transactionData, receiptData },
+      );
+
+      return data;
     },
-    watch && enabled ? (targetNetwork.id !== chains.hardhat.id ? scaffoldConfig.pollingInterval : 4_000) : null,
-  );
-
-  const eventHistoryData = useMemo(
-    () =>
-      events?.map(addIndexedArgsToEvent) as UseScaffoldEventHistoryData<
+    enabled: enabled && isContractAddressAndClientReady,
+    initialPageParam: fromBlock,
+    getNextPageParam: () => {
+      return blockNumber;
+    },
+    select: data => {
+      const events = data.pages.flat();
+      const eventHistoryData = events?.map(addIndexedArgsToEvent) as UseScaffoldEventHistoryData<
         TContractName,
         TEventName,
         TBlockData,
         TTransactionData,
         TReceiptData
-      >,
-    [events],
-  );
+      >;
+      return {
+        pages: eventHistoryData?.reverse(),
+        pageParams: data.pageParams,
+      };
+    },
+  });
+
+  useEffect(() => {
+    const shouldSkipEffect = !blockNumber || !watch || isFirstRender;
+    if (shouldSkipEffect) {
+      // skipping on first render, since on first render we should call queryFn with
+      // fromBlock value, not blockNumber
+      if (isFirstRender) setIsFirstRender(false);
+      return;
+    }
+
+    query.fetchNextPage();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [blockNumber, watch]);
 
   return {
-    data: eventHistoryData,
-    isLoading: isLoading,
-    error: error,
+    data: query.data?.pages,
+    status: query.status,
+    error: query.error,
+    isLoading: query.isLoading,
+    isFetchingNewEvent: query.isFetchingNextPage,
+    refetch: query.refetch,
   };
 };
 
diff --git a/templates/base/packages/nextjs/package.json b/templates/base/packages/nextjs/package.json
index c72e745f4..b23d940b0 100644
--- a/templates/base/packages/nextjs/package.json
+++ b/templates/base/packages/nextjs/package.json
@@ -53,7 +53,7 @@
     "prettier": "~2.8.4",
     "tailwindcss": "~3.4.3",
     "type-fest": "~4.6.0",
-    "typescript": "~5.1.6",
+    "typescript": "5.1.6",
     "vercel": "~32.4.1"
   }
 }