diff --git a/.changeset/gentle-cougars-provide.md b/.changeset/gentle-cougars-provide.md
new file mode 100644
index 000000000..76f781304
--- /dev/null
+++ b/.changeset/gentle-cougars-provide.md
@@ -0,0 +1,12 @@
+---
+"create-eth": patch
+---
+
+- Up next react sept 24 (https://github.com/scaffold-eth/scaffold-eth-2/pull/933)
+- remove unused type (https://github.com/scaffold-eth/scaffold-eth-2/pull/941)
+- Remove nprogress + use next-nprogress-bar (https://github.com/scaffold-eth/scaffold-eth-2/pull/943)
+- address component showBoth prop (https://github.com/scaffold-eth/scaffold-eth-2/pull/924)
+- Fix rounding issue when converting to wei (https://github.com/scaffold-eth/scaffold-eth-2/pull/940)
+- Update hardhat related deps (https://github.com/scaffold-eth/scaffold-eth-2/pull/946)
+- make solidity complier as arrays (https://github.com/scaffold-eth/scaffold-eth-2/pull/938)
+- chore: up required node to 18.18 (https://github.com/scaffold-eth/scaffold-eth-2/pull/952)
diff --git a/README.md b/README.md
index 3fdc601cf..a4018273f 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ This is an alternative method of installing Scaffold-ETH. Instead of directly [c
 
 Before you begin, you need to install the following tools:
 
-- [Node (>= v18.17)](https://nodejs.org/en/download/)
+- [Node (>= v18.18)](https://nodejs.org/en/download/)
 - Yarn ([v1](https://classic.yarnpkg.com/en/docs/install/) or [v2+](https://yarnpkg.com/getting-started/install))
 - [Git](https://git-scm.com/downloads)
 
diff --git a/templates/base/README.md.template.mjs b/templates/base/README.md.template.mjs
index e0d977fb2..a3b73701d 100644
--- a/templates/base/README.md.template.mjs
+++ b/templates/base/README.md.template.mjs
@@ -92,7 +92,7 @@ ${
 
 Before you begin, you need to install the following tools:
 
-- [Node (>= v18.17)](https://nodejs.org/en/download/)
+- [Node (>= v18.18)](https://nodejs.org/en/download/)
 - Yarn ([v1](https://classic.yarnpkg.com/en/docs/install/) or [v2+](https://yarnpkg.com/getting-started/install))
 - [Git](https://git-scm.com/downloads)
 
diff --git a/templates/base/package.json b/templates/base/package.json
index ad58199d4..d5fe966d4 100644
--- a/templates/base/package.json
+++ b/templates/base/package.json
@@ -26,6 +26,6 @@
     "lint-staged": "~13.2.2"
   },
   "engines": {
-    "node": ">=18.17.0"
+    "node": ">=18.18.0"
   }
 }
diff --git a/templates/base/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx b/templates/base/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx
index c0c14d60e..2c42eea97 100644
--- a/templates/base/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx
+++ b/templates/base/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx
@@ -19,7 +19,7 @@ export const AddressComponent = ({
           <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" />
+                <Address address={address} format="long" onlyEnsOrAddress />
                 <div className="flex gap-1 items-center">
                   <span className="font-bold text-sm">Balance:</span>
                   <Balance address={address} className="text" />
diff --git a/templates/base/packages/nextjs/app/blockexplorer/_components/TransactionHash.tsx b/templates/base/packages/nextjs/app/blockexplorer/_components/TransactionHash.tsx
index d4fd92955..eae13d132 100644
--- a/templates/base/packages/nextjs/app/blockexplorer/_components/TransactionHash.tsx
+++ b/templates/base/packages/nextjs/app/blockexplorer/_components/TransactionHash.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import Link from "next/link";
-import { CopyToClipboard } from "react-copy-to-clipboard";
+import CopyToClipboard from "react-copy-to-clipboard";
 import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 
 export const TransactionHash = ({ hash }: { hash: string }) => {
diff --git a/templates/base/packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx b/templates/base/packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx
index b91892cb8..118d912d6 100644
--- a/templates/base/packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx
+++ b/templates/base/packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx
@@ -44,14 +44,14 @@ export const TransactionsTable = ({ blocks, transactionReceipts }: TransactionsT
                     <td className="w-1/12 md:py-4">{block.number?.toString()}</td>
                     <td className="w-2/1 md:py-4">{timeMined}</td>
                     <td className="w-2/12 md:py-4">
-                      <Address address={tx.from} size="sm" />
+                      <Address address={tx.from} size="sm" onlyEnsOrAddress />
                     </td>
                     <td className="w-2/12 md:py-4">
                       {!receipt?.contractAddress ? (
-                        tx.to && <Address address={tx.to} size="sm" />
+                        tx.to && <Address address={tx.to} size="sm" onlyEnsOrAddress />
                       ) : (
                         <div className="relative">
-                          <Address address={receipt.contractAddress} size="sm" />
+                          <Address address={receipt.contractAddress} size="sm" onlyEnsOrAddress />
                           <small className="absolute top-4 left-4">(Contract Creation)</small>
                         </div>
                       )}
diff --git a/templates/base/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx b/templates/base/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx
index 848f2e99f..ed9b7ee78 100644
--- a/templates/base/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx
+++ b/templates/base/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx
@@ -64,7 +64,7 @@ const TransactionComp = ({ txHash }: { txHash: Hash }) => {
                   <strong>From:</strong>
                 </td>
                 <td>
-                  <Address address={transaction.from} format="long" />
+                  <Address address={transaction.from} format="long" onlyEnsOrAddress />
                 </td>
               </tr>
               <tr>
@@ -73,11 +73,11 @@ const TransactionComp = ({ txHash }: { txHash: Hash }) => {
                 </td>
                 <td>
                   {!receipt?.contractAddress ? (
-                    transaction.to && <Address address={transaction.to} format="long" />
+                    transaction.to && <Address address={transaction.to} format="long" onlyEnsOrAddress />
                   ) : (
                     <span>
                       Contract Creation:
-                      <Address address={receipt.contractAddress} format="long" />
+                      <Address address={receipt.contractAddress} format="long" onlyEnsOrAddress />
                     </span>
                   )}
                 </td>
diff --git a/templates/base/packages/nextjs/app/debug/_components/contract/ContractUI.tsx b/templates/base/packages/nextjs/app/debug/_components/contract/ContractUI.tsx
index 31fcc7faa..8fcec9d38 100644
--- a/templates/base/packages/nextjs/app/debug/_components/contract/ContractUI.tsx
+++ b/templates/base/packages/nextjs/app/debug/_components/contract/ContractUI.tsx
@@ -48,7 +48,7 @@ export const ContractUI = ({ contractName, className = "" }: ContractUIProps) =>
             <div className="flex">
               <div className="flex flex-col gap-1">
                 <span className="font-bold">{contractName}</span>
-                <Address address={deployedContractData.address} />
+                <Address address={deployedContractData.address} onlyEnsOrAddress />
                 <div className="flex gap-1 items-center">
                   <span className="font-bold text-sm">Balance:</span>
                   <Balance address={deployedContractData.address} className="px-0 h-1.5 min-h-[0.375rem]" />
diff --git a/templates/base/packages/nextjs/app/debug/_components/contract/Tuple.tsx b/templates/base/packages/nextjs/app/debug/_components/contract/Tuple.tsx
index 7ec7e7ec0..d8312fca3 100644
--- a/templates/base/packages/nextjs/app/debug/_components/contract/Tuple.tsx
+++ b/templates/base/packages/nextjs/app/debug/_components/contract/Tuple.tsx
@@ -29,7 +29,7 @@ export const Tuple = ({ abiTupleParameter, setParentForm, parentStateObjectKey }
     <div>
       <div className="collapse collapse-arrow bg-base-200 pl-4 py-1.5 border-2 border-secondary">
         <input type="checkbox" className="min-h-fit peer" />
-        <div className="collapse-title p-0 min-h-fit peer-checked:mb-2 text-primary-content/50">
+        <div className="collapse-title after:!top-3.5 p-0 min-h-fit peer-checked:mb-2 text-primary-content/50">
           <p className="m-0 p-0 text-[1rem]">{abiTupleParameter.internalType}</p>
         </div>
         <div className="ml-3 flex-col space-y-4 border-secondary/80 border-l-2 pl-4 collapse-content">
diff --git a/templates/base/packages/nextjs/app/debug/_components/contract/TupleArray.tsx b/templates/base/packages/nextjs/app/debug/_components/contract/TupleArray.tsx
index b5992116b..713431eb2 100644
--- a/templates/base/packages/nextjs/app/debug/_components/contract/TupleArray.tsx
+++ b/templates/base/packages/nextjs/app/debug/_components/contract/TupleArray.tsx
@@ -99,7 +99,7 @@ export const TupleArray = ({ abiTupleParameter, setParentForm, parentStateObject
     <div>
       <div className="collapse collapse-arrow bg-base-200 pl-4 py-1.5 border-2 border-secondary">
         <input type="checkbox" className="min-h-fit peer" />
-        <div className="collapse-title p-0 min-h-fit peer-checked:mb-1 text-primary-content/50">
+        <div className="collapse-title after:!top-3.5 p-0 min-h-fit peer-checked:mb-1 text-primary-content/50">
           <p className="m-0 text-[1rem]">{abiTupleParameter.internalType}</p>
         </div>
         <div className="ml-3 flex-col space-y-2 border-secondary/70 border-l-2 pl-4 collapse-content">
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 764faeb6c..824eb8f7b 100644
--- a/templates/base/packages/nextjs/app/debug/_components/contract/TxReceipt.tsx
+++ b/templates/base/packages/nextjs/app/debug/_components/contract/TxReceipt.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { CopyToClipboard } from "react-copy-to-clipboard";
+import CopyToClipboard from "react-copy-to-clipboard";
 import { TransactionReceipt } from "viem";
 import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 import { ObjectFieldDisplay } from "~~/app/debug/_components/contract";
@@ -35,7 +35,7 @@ export const TxReceipt = ({ txResult }: { txResult: TransactionReceipt }) => {
       </div>
       <div className="flex-wrap collapse collapse-arrow">
         <input type="checkbox" className="min-h-0 peer" />
-        <div className="collapse-title text-sm min-h-0 py-1.5 pl-1">
+        <div className="collapse-title text-sm min-h-0 py-1.5 pl-1 after:!top-4">
           <strong>Transaction Receipt</strong>
         </div>
         <div className="collapse-content overflow-auto bg-secondary rounded-t-none rounded-3xl !pl-0">
diff --git a/templates/base/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx b/templates/base/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx
index b8e8f8490..c7b0e6740 100644
--- a/templates/base/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx
+++ b/templates/base/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx
@@ -33,7 +33,7 @@ export const WriteOnlyFunctionForm = ({
   inheritedFrom,
 }: WriteOnlyFunctionFormProps) => {
   const [form, setForm] = useState<Record<string, any>>(() => getInitialFormState(abiFunction));
-  const [txValue, setTxValue] = useState<string | bigint>("");
+  const [txValue, setTxValue] = useState<string>("");
   const { chain } = useAccount();
   const writeTxn = useTransactor();
   const { targetNetwork } = useTargetNetwork();
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 3148affdf..4c5ab2007 100644
--- a/templates/base/packages/nextjs/app/debug/_components/contract/utilsDisplay.tsx
+++ b/templates/base/packages/nextjs/app/debug/_components/contract/utilsDisplay.tsx
@@ -30,7 +30,7 @@ export const displayTxResult = (
 
   if (typeof displayContent === "string") {
     if (isAddress(displayContent)) {
-      return <Address address={displayContent} size={fontSize} />;
+      return <Address address={displayContent} size={fontSize} onlyEnsOrAddress />;
     }
 
     if (isHex(displayContent)) {
diff --git a/templates/base/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx.template.mjs b/templates/base/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx.template.mjs
index 8a562d577..ae951562e 100644
--- a/templates/base/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx.template.mjs
+++ b/templates/base/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx.template.mjs
@@ -11,13 +11,13 @@ const contents = ({ providerNames, providerSetups, providerImports, providerProp
 import { useEffect, useState } from "react";
 import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowkit";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AppProgressBar as ProgressBar } from "next-nprogress-bar";
 import { useTheme } from "next-themes";
 import { Toaster } from "react-hot-toast";
 import { WagmiProvider } from "wagmi";
 import { Footer } from "~~/components/Footer";
 import { Header } from "~~/components/Header";
 import { BlockieAvatar } from "~~/components/scaffold-eth";
-import { ProgressBar } from "~~/components/scaffold-eth/ProgressBar";
 import { useInitializeNativeCurrencyPrice } from "~~/hooks/scaffold-eth";
 import { wagmiConfig } from "~~/services/web3/wagmiConfig";
 ${providerImports.filter(Boolean).join("\n")}
@@ -59,7 +59,7 @@ export const ScaffoldEthAppWithProviders = ({ children }: { children: React.Reac
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-        <ProgressBar />
+        <ProgressBar height="3px" color="#2299dd" />
         <RainbowKitProvider
           avatar={BlockieAvatar}
           theme={mounted ? (isDarkMode ? darkTheme() : lightTheme()) : lightTheme()}
diff --git a/templates/base/packages/nextjs/components/scaffold-eth/Address.tsx b/templates/base/packages/nextjs/components/scaffold-eth/Address.tsx
deleted file mode 100644
index f24b4597a..000000000
--- a/templates/base/packages/nextjs/components/scaffold-eth/Address.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import { CopyToClipboard } from "react-copy-to-clipboard";
-import { Address as AddressType, getAddress, isAddress } from "viem";
-import { hardhat } from "viem/chains";
-import { normalize } from "viem/ens";
-import { useEnsAvatar, useEnsName } from "wagmi";
-import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
-import { BlockieAvatar } from "~~/components/scaffold-eth";
-import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
-import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";
-
-type AddressProps = {
-  address?: AddressType;
-  disableAddressLink?: boolean;
-  format?: "short" | "long";
-  size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
-};
-
-const blockieSizeMap = {
-  xs: 6,
-  sm: 7,
-  base: 8,
-  lg: 9,
-  xl: 10,
-  "2xl": 12,
-  "3xl": 15,
-};
-
-/**
- * Displays an address (or ENS) with a Blockie image and option to copy address.
- */
-export const Address = ({ address, disableAddressLink, format, size = "base" }: AddressProps) => {
-  const [ens, setEns] = useState<string | null>();
-  const [ensAvatar, setEnsAvatar] = useState<string | null>();
-  const [addressCopied, setAddressCopied] = useState(false);
-  const checkSumAddress = address ? getAddress(address) : undefined;
-
-  const { targetNetwork } = useTargetNetwork();
-
-  const { data: fetchedEns } = useEnsName({
-    address: checkSumAddress,
-    chainId: 1,
-    query: {
-      enabled: isAddress(checkSumAddress ?? ""),
-    },
-  });
-  const { data: fetchedEnsAvatar } = useEnsAvatar({
-    name: fetchedEns ? normalize(fetchedEns) : undefined,
-    chainId: 1,
-    query: {
-      enabled: Boolean(fetchedEns),
-      gcTime: 30_000,
-    },
-  });
-
-  // We need to apply this pattern to avoid Hydration errors.
-  useEffect(() => {
-    setEns(fetchedEns);
-  }, [fetchedEns]);
-
-  useEffect(() => {
-    setEnsAvatar(fetchedEnsAvatar);
-  }, [fetchedEnsAvatar]);
-
-  // Skeleton UI
-  if (!checkSumAddress) {
-    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>
-    );
-  }
-
-  if (!isAddress(checkSumAddress)) {
-    return <span className="text-error">Wrong address</span>;
-  }
-
-  const blockExplorerAddressLink = getBlockExplorerAddressLink(targetNetwork, checkSumAddress);
-  let displayAddress = checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4);
-
-  if (ens) {
-    displayAddress = ens;
-  } else if (format === "long") {
-    displayAddress = checkSumAddress;
-  }
-
-  return (
-    <div className="flex items-center flex-shrink-0">
-      <div className="flex-shrink-0">
-        <BlockieAvatar
-          address={checkSumAddress}
-          ensImage={ensAvatar}
-          size={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
-        />
-      </div>
-      {disableAddressLink ? (
-        <span className={`ml-1.5 text-${size} font-normal`}>{displayAddress}</span>
-      ) : targetNetwork.id === hardhat.id ? (
-        <span className={`ml-1.5 text-${size} font-normal`}>
-          <Link href={blockExplorerAddressLink}>{displayAddress}</Link>
-        </span>
-      ) : (
-        <a
-          className={`ml-1.5 text-${size} font-normal`}
-          target="_blank"
-          href={blockExplorerAddressLink}
-          rel="noopener noreferrer"
-        >
-          {displayAddress}
-        </a>
-      )}
-      {addressCopied ? (
-        <CheckCircleIcon
-          className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer flex-shrink-0"
-          aria-hidden="true"
-        />
-      ) : (
-        <CopyToClipboard
-          text={checkSumAddress}
-          onCopy={() => {
-            setAddressCopied(true);
-            setTimeout(() => {
-              setAddressCopied(false);
-            }, 800);
-          }}
-        >
-          <DocumentDuplicateIcon
-            className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer flex-shrink-0"
-            aria-hidden="true"
-          />
-        </CopyToClipboard>
-      )}
-    </div>
-  );
-};
diff --git a/templates/base/packages/nextjs/components/scaffold-eth/Address/Address.tsx b/templates/base/packages/nextjs/components/scaffold-eth/Address/Address.tsx
new file mode 100644
index 000000000..28011d51b
--- /dev/null
+++ b/templates/base/packages/nextjs/components/scaffold-eth/Address/Address.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import { AddressCopyIcon } from "./AddressCopyIcon";
+import { AddressLinkWrapper } from "./AddressLinkWrapper";
+import { Address as AddressType, getAddress, isAddress } from "viem";
+import { normalize } from "viem/ens";
+import { useEnsAvatar, useEnsName } from "wagmi";
+import { BlockieAvatar } from "~~/components/scaffold-eth";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";
+
+const textSizeMap = {
+  "3xs": "text-[10px]",
+  "2xs": "text-[11px]",
+  xs: "text-xs",
+  sm: "text-sm",
+  base: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  "2xl": "text-2xl",
+  "3xl": "text-3xl",
+  "4xl": "text-4xl",
+} as const;
+
+const blockieSizeMap = {
+  "3xs": 4,
+  "2xs": 5,
+  xs: 6,
+  sm: 7,
+  base: 8,
+  lg: 9,
+  xl: 10,
+  "2xl": 12,
+  "3xl": 15,
+  "4xl": 17,
+  "5xl": 19,
+  "6xl": 21,
+  "7xl": 23,
+} as const;
+
+const copyIconSizeMap = {
+  "3xs": "h-2.5 w-2.5",
+  "2xs": "h-3 w-3",
+  xs: "h-3.5 w-3.5",
+  sm: "h-4 w-4",
+  base: "h-[18px] w-[18px]",
+  lg: "h-5 w-5",
+  xl: "h-[22px] w-[22px]",
+  "2xl": "h-6 w-6",
+  "3xl": "h-[26px] w-[26px]",
+  "4xl": "h-7 w-7",
+} as const;
+
+type SizeMap = typeof textSizeMap | typeof blockieSizeMap;
+
+const getNextSize = <T extends SizeMap>(sizeMap: T, currentSize: keyof T, step = 1): keyof T => {
+  const sizes = Object.keys(sizeMap) as Array<keyof T>;
+  const currentIndex = sizes.indexOf(currentSize);
+  const nextIndex = Math.min(currentIndex + step, sizes.length - 1);
+  return sizes[nextIndex];
+};
+
+const getPrevSize = <T extends SizeMap>(sizeMap: T, currentSize: keyof T, step = 1): keyof T => {
+  const sizes = Object.keys(sizeMap) as Array<keyof T>;
+  const currentIndex = sizes.indexOf(currentSize);
+  const prevIndex = Math.max(currentIndex - step, 0);
+  return sizes[prevIndex];
+};
+
+type AddressProps = {
+  address?: AddressType;
+  disableAddressLink?: boolean;
+  format?: "short" | "long";
+  size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
+  onlyEnsOrAddress?: boolean;
+};
+
+export const Address = ({
+  address,
+  disableAddressLink,
+  format,
+  size = "base",
+  onlyEnsOrAddress = false,
+}: AddressProps) => {
+  const checkSumAddress = address ? getAddress(address) : undefined;
+
+  const { targetNetwork } = useTargetNetwork();
+
+  const { data: ens, isLoading: isEnsNameLoading } = useEnsName({
+    address: checkSumAddress,
+    chainId: 1,
+    query: {
+      enabled: isAddress(checkSumAddress ?? ""),
+    },
+  });
+  const { data: ensAvatar } = useEnsAvatar({
+    name: ens ? normalize(ens) : undefined,
+    chainId: 1,
+    query: {
+      enabled: Boolean(ens),
+      gcTime: 30_000,
+    },
+  });
+
+  const shortAddress = checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4);
+  const displayAddress = format === "long" ? checkSumAddress : shortAddress;
+  const displayEnsOrAddress = ens || displayAddress;
+
+  const showSkeleton = !checkSumAddress || (!onlyEnsOrAddress && (ens || isEnsNameLoading));
+
+  const addressSize = showSkeleton && !onlyEnsOrAddress ? getPrevSize(textSizeMap, size, 2) : size;
+  const ensSize = getNextSize(textSizeMap, addressSize);
+  const blockieSize = showSkeleton && !onlyEnsOrAddress ? getNextSize(blockieSizeMap, addressSize, 4) : addressSize;
+
+  if (!checkSumAddress) {
+    return (
+      <div className="flex items-center">
+        <div
+          className="flex-shrink-0 skeleton rounded-full"
+          style={{
+            width: (blockieSizeMap[blockieSize] * 24) / blockieSizeMap["base"],
+            height: (blockieSizeMap[blockieSize] * 24) / blockieSizeMap["base"],
+          }}
+        ></div>
+        <div className="flex flex-col space-y-1">
+          {!onlyEnsOrAddress && (
+            <div className={`ml-1.5 skeleton rounded-lg font-bold ${textSizeMap[ensSize]}`}>
+              <span className="invisible">0x1234...56789</span>
+            </div>
+          )}
+          <div className={`ml-1.5 skeleton rounded-lg ${textSizeMap[addressSize]}`}>
+            <span className="invisible">0x1234...56789</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isAddress(checkSumAddress)) {
+    return <span className="text-error">Wrong address</span>;
+  }
+
+  const blockExplorerAddressLink = getBlockExplorerAddressLink(targetNetwork, checkSumAddress);
+
+  return (
+    <div className="flex items-center flex-shrink-0">
+      <div className="flex-shrink-0">
+        <BlockieAvatar
+          address={checkSumAddress}
+          ensImage={ensAvatar}
+          size={(blockieSizeMap[blockieSize] * 24) / blockieSizeMap["base"]}
+        />
+      </div>
+      <div className="flex flex-col">
+        {showSkeleton &&
+          (isEnsNameLoading ? (
+            <div className={`ml-1.5 skeleton rounded-lg font-bold ${textSizeMap[ensSize]}`}>
+              <span className="invisible">{shortAddress}</span>
+            </div>
+          ) : (
+            <span className={`ml-1.5 ${textSizeMap[ensSize]} font-bold`}>
+              <AddressLinkWrapper
+                disableAddressLink={disableAddressLink}
+                blockExplorerAddressLink={blockExplorerAddressLink}
+              >
+                {ens}
+              </AddressLinkWrapper>
+            </span>
+          ))}
+        <div className="flex">
+          <span className={`ml-1.5 ${textSizeMap[addressSize]} font-normal`}>
+            <AddressLinkWrapper
+              disableAddressLink={disableAddressLink}
+              blockExplorerAddressLink={blockExplorerAddressLink}
+            >
+              {onlyEnsOrAddress ? displayEnsOrAddress : displayAddress}
+            </AddressLinkWrapper>
+          </span>
+          <AddressCopyIcon
+            className={`ml-1 text-sky-600 ${copyIconSizeMap[addressSize]} cursor-pointer`}
+            address={checkSumAddress}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/templates/base/packages/nextjs/components/scaffold-eth/Address/AddressCopyIcon.tsx b/templates/base/packages/nextjs/components/scaffold-eth/Address/AddressCopyIcon.tsx
new file mode 100644
index 000000000..48fbe1f0b
--- /dev/null
+++ b/templates/base/packages/nextjs/components/scaffold-eth/Address/AddressCopyIcon.tsx
@@ -0,0 +1,26 @@
+import { useState } from "react";
+import CopyToClipboard from "react-copy-to-clipboard";
+import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
+
+export const AddressCopyIcon = ({ className, address }: { className?: string; address: string }) => {
+  const [addressCopied, setAddressCopied] = useState(false);
+  return (
+    <CopyToClipboard
+      text={address}
+      onCopy={() => {
+        setAddressCopied(true);
+        setTimeout(() => {
+          setAddressCopied(false);
+        }, 800);
+      }}
+    >
+      <button onClick={e => e.stopPropagation()}>
+        {addressCopied ? (
+          <CheckCircleIcon className={className} aria-hidden="true" />
+        ) : (
+          <DocumentDuplicateIcon className={className} aria-hidden="true" />
+        )}
+      </button>
+    </CopyToClipboard>
+  );
+};
diff --git a/templates/base/packages/nextjs/components/scaffold-eth/Address/AddressLinkWrapper.tsx b/templates/base/packages/nextjs/components/scaffold-eth/Address/AddressLinkWrapper.tsx
new file mode 100644
index 000000000..50e2ec0bb
--- /dev/null
+++ b/templates/base/packages/nextjs/components/scaffold-eth/Address/AddressLinkWrapper.tsx
@@ -0,0 +1,29 @@
+import Link from "next/link";
+import { hardhat } from "viem/chains";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth";
+
+type AddressLinkWrapperProps = {
+  children: React.ReactNode;
+  disableAddressLink?: boolean;
+  blockExplorerAddressLink: string;
+};
+
+export const AddressLinkWrapper = ({
+  children,
+  disableAddressLink,
+  blockExplorerAddressLink,
+}: AddressLinkWrapperProps) => {
+  const { targetNetwork } = useTargetNetwork();
+
+  return disableAddressLink ? (
+    <>{children}</>
+  ) : (
+    <Link
+      href={blockExplorerAddressLink}
+      target={targetNetwork.id === hardhat.id ? undefined : "_blank"}
+      rel={targetNetwork.id === hardhat.id ? undefined : "noopener noreferrer"}
+    >
+      {children}
+    </Link>
+  );
+};
diff --git a/templates/base/packages/nextjs/components/scaffold-eth/Faucet.tsx b/templates/base/packages/nextjs/components/scaffold-eth/Faucet.tsx
index a55e7fb1f..569a923f1 100644
--- a/templates/base/packages/nextjs/components/scaffold-eth/Faucet.tsx
+++ b/templates/base/packages/nextjs/components/scaffold-eth/Faucet.tsx
@@ -98,7 +98,7 @@ export const Faucet = () => {
             <div className="flex space-x-4">
               <div>
                 <span className="text-sm font-bold">From:</span>
-                <Address address={faucetAddress} />
+                <Address address={faucetAddress} onlyEnsOrAddress />
               </div>
               <div>
                 <span className="text-sm font-bold pl-3">Available:</span>
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 4fde183e0..bccc94fac 100644
--- a/templates/base/packages/nextjs/components/scaffold-eth/Input/IntegerInput.tsx
+++ b/templates/base/packages/nextjs/components/scaffold-eth/Input/IntegerInput.tsx
@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useState } from "react";
+import { parseEther } from "viem";
 import { CommonInputProps, InputBase, IntegerVariant, isValidInteger } from "~~/components/scaffold-eth";
 
-type IntegerInputProps = CommonInputProps<string | bigint> & {
+type IntegerInputProps = CommonInputProps<string> & {
   variant?: IntegerVariant;
   disableMultiplyBy1e18?: boolean;
 };
@@ -20,14 +21,11 @@ export const IntegerInput = ({
     if (!value) {
       return;
     }
-    if (typeof value === "bigint") {
-      return onChange(value * 10n ** 18n);
-    }
-    return onChange(BigInt(Math.round(Number(value) * 10 ** 18)));
+    return onChange(parseEther(value).toString());
   }, [onChange, value]);
 
   useEffect(() => {
-    if (isValidInteger(variant, value, false)) {
+    if (isValidInteger(variant, value)) {
       setInputError(false);
     } else {
       setInputError(true);
diff --git a/templates/base/packages/nextjs/components/scaffold-eth/Input/utils.ts b/templates/base/packages/nextjs/components/scaffold-eth/Input/utils.ts
index 481b5d165..cc49f9a9a 100644
--- a/templates/base/packages/nextjs/components/scaffold-eth/Input/utils.ts
+++ b/templates/base/packages/nextjs/components/scaffold-eth/Input/utils.ts
@@ -76,7 +76,7 @@ export enum IntegerVariant {
 export const SIGNED_NUMBER_REGEX = /^-?\d+\.?\d*$/;
 export const UNSIGNED_NUMBER_REGEX = /^\.?\d+\.?\d*$/;
 
-export const isValidInteger = (dataType: IntegerVariant, value: bigint | string, strict = true) => {
+export const isValidInteger = (dataType: IntegerVariant, value: string) => {
   const isSigned = dataType.startsWith("i");
   const bitcount = Number(dataType.substring(isSigned ? 3 : 4));
 
@@ -85,9 +85,6 @@ export const isValidInteger = (dataType: IntegerVariant, value: bigint | string,
     valueAsBigInt = BigInt(value);
   } catch (e) {}
   if (typeof valueAsBigInt !== "bigint") {
-    if (strict) {
-      return false;
-    }
     if (!value || typeof value !== "string") {
       return true;
     }
diff --git a/templates/base/packages/nextjs/components/scaffold-eth/ProgressBar.tsx b/templates/base/packages/nextjs/components/scaffold-eth/ProgressBar.tsx
deleted file mode 100644
index 001f787a3..000000000
--- a/templates/base/packages/nextjs/components/scaffold-eth/ProgressBar.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import NProgress from "nprogress";
-
-type PushStateInput = [data: any, unused: string, url?: string | URL | null | undefined];
-
-export function ProgressBar() {
-  const height = "3px";
-  const color = "#2299dd";
-
-  const styles = (
-    <style>
-      {`
-        #nprogress {
-          pointer-events: none;
-        }
-        #nprogress .bar {
-          background: ${color};
-          position: fixed;
-          z-index: 99999;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: ${typeof height === `string` ? height : `${height}px`};
-        }
-        /* Fancy blur effect */
-        #nprogress .peg {
-          display: block;
-          position: absolute;
-          right: 0px;
-          width: 100px;
-          height: 100%;
-          box-shadow: 0 0 10px ${color}, 0 0 5px ${color};
-          opacity: 1.0;
-          -webkit-transform: rotate(3deg) translate(0px, -4px);
-              -ms-transform: rotate(3deg) translate(0px, -4px);
-                  transform: rotate(3deg) translate(0px, -4px);
-        }
-    `}
-    </style>
-  );
-
-  useEffect(() => {
-    NProgress.configure({ showSpinner: false });
-
-    const handleAnchorClick = (event: MouseEvent) => {
-      const anchor = event.currentTarget as HTMLAnchorElement;
-      const targetUrl = anchor.href;
-      const currentUrl = location.href;
-      const isTargetBlank = anchor?.target === "_blank";
-      if (targetUrl === currentUrl || isTargetBlank) return;
-      NProgress.start();
-    };
-
-    const handleMutation: MutationCallback = () => {
-      const anchorElements = document.querySelectorAll("a");
-      anchorElements.forEach(anchor => anchor.addEventListener("click", handleAnchorClick));
-    };
-
-    const mutationObserver = new MutationObserver(handleMutation);
-    mutationObserver.observe(document, { childList: true, subtree: true });
-
-    window.history.pushState = new Proxy(window.history.pushState, {
-      apply: (target, thisArg, argArray: PushStateInput) => {
-        NProgress.done();
-        return target.apply(thisArg, argArray);
-      },
-    });
-  });
-
-  return styles;
-}
diff --git a/templates/base/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx b/templates/base/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx
index b5bb2efb8..a46356b10 100644
--- a/templates/base/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx
+++ b/templates/base/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx
@@ -22,7 +22,7 @@ export const AddressQRCodeModal = ({ address, modalId }: AddressQRCodeModalProps
             <div className="space-y-3 py-6">
               <div className="flex flex-col items-center gap-6">
                 <QRCodeSVG value={address} size={256} />
-                <Address address={address} format="long" disableAddressLink />
+                <Address address={address} format="long" disableAddressLink onlyEnsOrAddress />
               </div>
             </div>
           </label>
diff --git a/templates/base/packages/nextjs/components/scaffold-eth/index.tsx b/templates/base/packages/nextjs/components/scaffold-eth/index.tsx
index bf1e8a749..333cdf74b 100644
--- a/templates/base/packages/nextjs/components/scaffold-eth/index.tsx
+++ b/templates/base/packages/nextjs/components/scaffold-eth/index.tsx
@@ -1,4 +1,4 @@
-export * from "./Address";
+export * from "./Address/Address";
 export * from "./Balance";
 export * from "./BlockieAvatar";
 export * from "./Faucet";
diff --git a/templates/base/packages/nextjs/next-env.d.ts b/templates/base/packages/nextjs/next-env.d.ts
index 4f11a03dc..40c3d6809 100644
--- a/templates/base/packages/nextjs/next-env.d.ts
+++ b/templates/base/packages/nextjs/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/templates/base/packages/nextjs/package.json b/templates/base/packages/nextjs/package.json
index 49abbf4ad..46d1f762d 100644
--- a/templates/base/packages/nextjs/package.json
+++ b/templates/base/packages/nextjs/package.json
@@ -14,46 +14,44 @@
     "vercel:yolo": "vercel --build-env NEXT_PUBLIC_IGNORE_BUILD_ERROR=true"
   },
   "dependencies": {
-    "@heroicons/react": "~2.0.11",
-    "@rainbow-me/rainbowkit": "2.1.5",
+    "@heroicons/react": "~2.1.5",
+    "@rainbow-me/rainbowkit": "2.1.6",
     "@tanstack/react-query": "~5.28.6",
     "@uniswap/sdk-core": "~4.0.1",
     "@uniswap/v2-sdk": "~3.0.1",
     "blo": "~1.0.1",
     "burner-connector": "~0.0.8",
-    "daisyui": "4.5.0",
-    "next": "~14.0.4",
-    "next-themes": "~0.2.1",
-    "nprogress": "~0.2.0",
+    "daisyui": "4.12.10",
+    "next": "~14.2.11",
+    "next-nprogress-bar": "~2.3.13",
+    "next-themes": "~0.3.0",
     "qrcode.react": "~3.1.0",
-    "react": "~18.2.0",
+    "react": "~18.3.1",
     "react-copy-to-clipboard": "~5.1.0",
-    "react-dom": "~18.2.0",
+    "react-dom": "~18.3.1",
     "react-hot-toast": "~2.4.0",
     "use-debounce": "~8.0.4",
     "usehooks-ts": "2.13.0",
-    "viem": "2.21.2",
-    "wagmi": "2.12.8",
+    "viem": "2.21.7",
+    "wagmi": "2.12.11",
     "zustand": "~4.1.2"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "~4.1.1",
-    "@types/node": "^17.0.45",
-    "@types/nprogress": "^0",
-    "@types/react": "^18.0.21",
-    "@types/react-copy-to-clipboard": "^5.0.4",
+    "@types/node": "~18.19.50",
+    "@types/react": "~18.3.5",
     "@typescript-eslint/eslint-plugin": "~5.40.0",
     "abitype": "1.0.6",
-    "autoprefixer": "~10.4.12",
+    "autoprefixer": "~10.4.20",
     "eslint": "~8.24.0",
     "eslint-config-next": "~14.0.4",
     "eslint-config-prettier": "~8.5.0",
     "eslint-plugin-prettier": "~4.2.1",
-    "postcss": "~8.4.16",
+    "postcss": "~8.4.45",
     "prettier": "~2.8.4",
-    "tailwindcss": "~3.4.3",
+    "tailwindcss": "~3.4.11",
     "type-fest": "~4.6.0",
     "typescript": "5.5.3",
-    "vercel": "~32.4.1"
+    "vercel": "~37.4.2"
   }
 }
diff --git a/templates/base/packages/nextjs/types/react-copy-to-clipboard/react-copy-to-clipboard.d.ts b/templates/base/packages/nextjs/types/react-copy-to-clipboard/react-copy-to-clipboard.d.ts
new file mode 100644
index 000000000..9e5439ce1
--- /dev/null
+++ b/templates/base/packages/nextjs/types/react-copy-to-clipboard/react-copy-to-clipboard.d.ts
@@ -0,0 +1,18 @@
+// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/25414#issuecomment-1180518151
+declare module "react-copy-to-clipboard" {
+  import React from "react";
+
+  interface Options {
+    debug: boolean;
+    message: string;
+  }
+
+  interface Props {
+    text: string;
+    onCopy?(a: string, b: boolean): void;
+    options?: Options;
+  }
+
+  class CopyToClipboard extends React.Component<PropsWithChildren<Props>, unknown> {}
+  export default CopyToClipboard;
+}
diff --git a/templates/base/packages/nextjs/types/utils.ts b/templates/base/packages/nextjs/types/utils.ts
deleted file mode 100644
index 8bb3bd343..000000000
--- a/templates/base/packages/nextjs/types/utils.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type Tuple<T, MaxLength extends number = 10, Current extends T[] = []> = Current["length"] extends MaxLength
-  ? Current
-  : Current | Tuple<T, MaxLength, [T, ...Current]>;
diff --git a/templates/solidity-frameworks/hardhat/packages/hardhat/hardhat.config.ts.template.mjs b/templates/solidity-frameworks/hardhat/packages/hardhat/hardhat.config.ts.template.mjs
index 0aea05d11..eeeafb019 100644
--- a/templates/solidity-frameworks/hardhat/packages/hardhat/hardhat.config.ts.template.mjs
+++ b/templates/solidity-frameworks/hardhat/packages/hardhat/hardhat.config.ts.template.mjs
@@ -24,14 +24,18 @@ const etherscanApiKey = process.env.ETHERSCAN_API_KEY || "DNXJA8RX2Q3VZ4URQIWP7Z
 
 const config: HardhatUserConfig = {
   solidity: {
-    version: "${solidityVersion[0]}",
-    settings: {
-      optimizer: {
-        enabled: true,
-        // https://docs.soliditylang.org/en/latest/using-the-compiler.html#optimizer-options
-        runs: 200,
+    compilers: [
+      {
+        version: "${solidityVersion[0]}",
+        settings: {
+          optimizer: {
+            enabled: true,
+            // https://docs.soliditylang.org/en/latest/using-the-compiler.html#optimizer-options
+            runs: 200,
+          },
+        },
       },
-    },
+    ],
   },
   defaultNetwork: "localhost",
   namedAccounts: {
@@ -144,4 +148,4 @@ export default withDefaults(contents, {
   imports: "",
   solidityVersion: "0.8.17",
   networks: "",
-});
+});
\ No newline at end of file
diff --git a/templates/solidity-frameworks/hardhat/packages/hardhat/package.json b/templates/solidity-frameworks/hardhat/packages/hardhat/package.json
index 8b1e89d4a..48b9f9999 100644
--- a/templates/solidity-frameworks/hardhat/packages/hardhat/package.json
+++ b/templates/solidity-frameworks/hardhat/packages/hardhat/package.json
@@ -18,36 +18,36 @@
   },
   "devDependencies": {
     "@ethersproject/abi": "~5.7.0",
-    "@ethersproject/providers": "~5.7.1",
-    "@nomicfoundation/hardhat-chai-matchers": "~2.0.3",
-    "@nomicfoundation/hardhat-ethers": "~3.0.5",
-    "@nomicfoundation/hardhat-network-helpers": "~1.0.6",
-    "@nomicfoundation/hardhat-verify": "~2.0.3",
-    "@typechain/ethers-v5": "~10.1.0",
+    "@ethersproject/providers": "~5.7.2",
+    "@nomicfoundation/hardhat-chai-matchers": "~2.0.7",
+    "@nomicfoundation/hardhat-ethers": "~3.0.8",
+    "@nomicfoundation/hardhat-network-helpers": "~1.0.11",
+    "@nomicfoundation/hardhat-verify": "~2.0.10",
+    "@typechain/ethers-v5": "~11.1.2",
     "@typechain/hardhat": "~9.1.0",
     "@types/eslint": "~8",
-    "@types/mocha": "~9.1.1",
+    "@types/mocha": "~10.0.8",
     "@types/prettier": "~2",
     "@types/qrcode": "~1",
     "@typescript-eslint/eslint-plugin": "~6.7.3",
     "@typescript-eslint/parser": "~6.7.3",
-    "chai": "~4.3.6",
+    "chai": "~4.5.0",
     "eslint": "~8.26.0",
     "eslint-config-prettier": "~8.5.0",
     "eslint-plugin-prettier": "~4.2.1",
-    "ethers": "~6.10.0",
-    "hardhat": "~2.19.4",
-    "hardhat-deploy": "~0.11.45",
-    "hardhat-deploy-ethers": "~0.4.1",
-    "hardhat-gas-reporter": "~1.0.9",
+    "ethers": "~6.13.2",
+    "hardhat": "~2.22.10",
+    "hardhat-deploy": "~0.12.4",
+    "hardhat-deploy-ethers": "~0.4.2",
+    "hardhat-gas-reporter": "~2.2.1",
     "prettier": "~2.8.4",
-    "solidity-coverage": "~0.8.5",
+    "solidity-coverage": "~0.8.13",
     "ts-node": "~10.9.1",
     "typechain": "~8.1.0",
     "typescript": "~5.1.6"
   },
   "dependencies": {
-    "@openzeppelin/contracts": "~4.8.1",
+    "@openzeppelin/contracts": "~5.0.2",
     "@typechain/ethers-v6": "~0.5.1",
     "dotenv": "~16.0.3",
     "envfile": "~6.18.0",