Merge pull request #126 from scaffold-eth/backmerge-2-10-24-new

backmerge 2-10-24

.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)

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)
 

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)
 

templates/base/package.json

@@ -26,6 +26,6 @@
     "lint-staged": "~13.2.2"
   },
   "engines": {
-    "node": ">=18.17.0"
+    "node": ">=18.18.0"
   }
 }

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

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 }) => {

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>
                       )}

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>

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]" />

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

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

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

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();

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)) {

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()}