Merge pull request #635 from scaffold-eth/cli-backmerge

Weekly CLI backmerge
scaffold-eth · Dec 3, 2023 · fccc54e · fccc54e
2 parents cdfb30d + 58bf26c
commit fccc54e
Show file tree

Hide file tree

Showing 54 changed files with 638 additions and 436 deletions.
diff --git a/.changeset/modern-dolls-tickle.md b/.changeset/modern-dolls-tickle.md
@@ -0,0 +1,10 @@
+---
+"create-eth": patch
+---
+
+- Feat/multi chain (#615)
+- Add links to the docs for components and hooks (#620)
+- Fix useScaffoldEventHistory hook new events order (#622)
+- Add requiredFilters param to useScaffoldEventHistory hook (#621)
+- update wagmi, viem and rainbowkit versions (#626)
+- Refactor: types/interfaces (#627)
diff --git a/README.md b/README.md
@@ -13,6 +13,8 @@
 ⚙️ Built using NextJS, RainbowKit, Hardhat, Foundry, Wagmi, and Typescript.
 
 - ✅ **Contract Hot Reload**: Your frontend auto-adapts to your smart contract as you edit it.
+- 🪝 **[Custom hooks](https://docs.scaffoldeth.io/hooks/)**: Collection of React hooks wrapper around [wagmi](https://wagmi.sh/) to simplify interactions with smart contracts with typescript autocompletion.
+- 🧱 [**Components**](https://docs.scaffoldeth.io/components/): Collection of common web3 components to quickly build your frontend.
 - 🔥 **Burner Wallet & Local Faucet**: Quickly test your application with a burner wallet and local faucet.
 - 🔐 **Integration with Wallet Providers**: Connect to different wallet providers and interact with the Ethereum network.
 

diff --git a/templates/base/packages/nextjs/components/Footer.tsx b/templates/base/packages/nextjs/components/Footer.tsx
@@ -6,15 +6,16 @@ import { HeartIcon } from "@heroicons/react/24/outline";
 import { SwitchTheme } from "~~/components/SwitchTheme";
 import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
 import { Faucet } from "~~/components/scaffold-eth";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { useGlobalState } from "~~/services/store/store";
-import { getTargetNetwork } from "~~/utils/scaffold-eth";
 
 /**
  * Site footer
  */
 export const Footer = () => {
   const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrencyPrice);
-  const isLocalNetwork = getTargetNetwork().id === hardhat.id;
+  const { targetNetwork } = useTargetNetwork();
+  const isLocalNetwork = targetNetwork.id === hardhat.id;
 
   return (
     <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">

diff --git a/templates/base/packages/nextjs/components/Header.tsx b/templates/base/packages/nextjs/components/Header.tsx
@@ -6,11 +6,11 @@ import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
 
-interface HeaderMenuLink {
+type HeaderMenuLink = {
   label: string;
   href: string;
   icon?: React.ReactNode;
-}
+};
 
 export const menuLinks: HeaderMenuLink[] = [
   {

diff --git a/templates/base/packages/nextjs/components/blockexplorer/PaginationButton.tsx b/templates/base/packages/nextjs/components/blockexplorer/PaginationButton.tsx
@@ -1,10 +1,10 @@
 import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/24/outline";
 
-interface PaginationButtonProps {
+type PaginationButtonProps = {
   currentPage: number;
   totalItems: number;
   setCurrentPage: (page: number) => void;
-}
+};
 
 const ITEMS_PER_PAGE = 20;
 

diff --git a/templates/base/packages/nextjs/components/blockexplorer/TransactionsTable.tsx b/templates/base/packages/nextjs/components/blockexplorer/TransactionsTable.tsx
@@ -1,11 +1,12 @@
 import { formatEther } from "viem";
 import { TransactionHash } from "~~/components/blockexplorer/TransactionHash";
 import { Address } from "~~/components/scaffold-eth";
-import { TransactionWithFunction, getTargetNetwork } from "~~/utils/scaffold-eth";
+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 = getTargetNetwork();
+  const { targetNetwork } = useTargetNetwork();
 
   return (
     <div className="flex justify-center px-4 md:px-0">

diff --git a/templates/base/packages/nextjs/components/scaffold-eth/Address.tsx b/templates/base/packages/nextjs/components/scaffold-eth/Address.tsx
@@ -6,9 +6,10 @@ import { hardhat } from "viem/chains";
 import { useEnsAvatar, useEnsName } from "wagmi";
 import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 import { BlockieAvatar } from "~~/components/scaffold-eth";
-import { getBlockExplorerAddressLink, getTargetNetwork } from "~~/utils/scaffold-eth";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";
 
-type TAddressProps = {
+type AddressProps = {
   address?: string;
   disableAddressLink?: boolean;
   format?: "short" | "long";
@@ -28,11 +29,13 @@ const blockieSizeMap = {
 /**
  * Displays an address (or ENS) with a Blockie image and option to copy address.
  */
-export const Address = ({ address, disableAddressLink, format, size = "base" }: TAddressProps) => {
+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 { targetNetwork } = useTargetNetwork();
+
   const { data: fetchedEns } = useEnsName({ address, enabled: isAddress(address ?? ""), chainId: 1 });
   const { data: fetchedEnsAvatar } = useEnsAvatar({
     name: fetchedEns,
@@ -66,7 +69,7 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
     return <span className="text-error">Wrong address</span>;
   }
 
-  const blockExplorerAddressLink = getBlockExplorerAddressLink(getTargetNetwork(), address);
+  const blockExplorerAddressLink = getBlockExplorerAddressLink(targetNetwork, address);
   let displayAddress = address?.slice(0, 5) + "..." + address?.slice(-4);
 
   if (ens) {
@@ -86,7 +89,7 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
       </div>
       {disableAddressLink ? (
         <span className={`ml-1.5 text-${size} font-normal`}>{displayAddress}</span>
-      ) : getTargetNetwork().id === hardhat.id ? (
+      ) : targetNetwork.id === hardhat.id ? (
         <span className={`ml-1.5 text-${size} font-normal`}>
           <Link href={blockExplorerAddressLink}>{displayAddress}</Link>
         </span>

diff --git a/templates/base/packages/nextjs/components/scaffold-eth/Balance.tsx b/templates/base/packages/nextjs/components/scaffold-eth/Balance.tsx
@@ -1,16 +1,16 @@
 import { useAccountBalance } from "~~/hooks/scaffold-eth";
-import { getTargetNetwork } from "~~/utils/scaffold-eth";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 
-type TBalanceProps = {
+type BalanceProps = {
   address?: string;
   className?: string;
 };
 
 /**
  * Display (ETH & USD) balance of an ETH address.
  */
-export const Balance = ({ address, className = "" }: TBalanceProps) => {
-  const configuredNetwork = getTargetNetwork();
+export const Balance = ({ address, className = "" }: BalanceProps) => {
+  const { targetNetwork } = useTargetNetwork();
   const { balance, price, isError, isLoading, onToggleBalance, isEthBalance } = useAccountBalance(address);
 
   if (!address || isLoading || balance === null) {
@@ -41,7 +41,7 @@ export const Balance = ({ address, className = "" }: TBalanceProps) => {
         {isEthBalance ? (
           <>
             <span>{balance?.toFixed(4)}</span>
-            <span className="text-[0.8em] font-bold ml-1">{configuredNetwork.nativeCurrency.symbol}</span>
+            <span className="text-[0.8em] font-bold ml-1">{targetNetwork.nativeCurrency.symbol}</span>
           </>
         ) : (
           <>

diff --git a/templates/base/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx b/templates/base/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx
@@ -5,7 +5,7 @@ import { ContractWriteMethods } from "./ContractWriteMethods";
 import { Spinner } from "~~/components/assets/Spinner";
 import { Address, Balance } from "~~/components/scaffold-eth";
 import { useDeployedContractInfo, useNetworkColor } from "~~/hooks/scaffold-eth";
-import { getTargetNetwork } from "~~/utils/scaffold-eth";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { ContractName } from "~~/utils/scaffold-eth/contract";
 
 type ContractUIProps = {
@@ -18,8 +18,7 @@ type ContractUIProps = {
  **/
 export const ContractUI = ({ contractName, className = "" }: ContractUIProps) => {
   const [refreshDisplayVariables, triggerRefreshDisplayVariables] = useReducer(value => !value, false);
-  const configuredNetwork = getTargetNetwork();
-
+  const { targetNetwork } = useTargetNetwork();
   const { data: deployedContractData, isLoading: deployedContractLoading } = useDeployedContractInfo(contractName);
   const networkColor = useNetworkColor();
 
@@ -34,7 +33,7 @@ export const ContractUI = ({ contractName, className = "" }: ContractUIProps) =>
   if (!deployedContractData) {
     return (
       <p className="text-3xl mt-14">
-        {`No contract found by the name of "${contractName}" on chain "${configuredNetwork.name}"!`}
+        {`No contract found by the name of "${contractName}" on chain "${targetNetwork.name}"!`}
       </p>
     );
   }
@@ -54,10 +53,10 @@ export const ContractUI = ({ contractName, className = "" }: ContractUIProps) =>
                 </div>
               </div>
             </div>
-            {configuredNetwork && (
+            {targetNetwork && (
               <p className="my-0 text-sm">
                 <span className="font-bold">Network</span>:{" "}
-                <span style={{ color: networkColor }}>{configuredNetwork.name}</span>
+                <span style={{ color: networkColor }}>{targetNetwork.name}</span>
               </p>
             )}
           </div>

diff --git a/templates/base/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx b/templates/base/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx
@@ -12,13 +12,13 @@ import {
 } from "~~/components/scaffold-eth";
 import { notification } from "~~/utils/scaffold-eth";
 
-type TReadOnlyFunctionFormProps = {
+type ReadOnlyFunctionFormProps = {
   contractAddress: Address;
   abiFunction: AbiFunction;
   inheritedFrom?: string;
 };
 
-export const ReadOnlyFunctionForm = ({ contractAddress, abiFunction, inheritedFrom }: TReadOnlyFunctionFormProps) => {
+export const ReadOnlyFunctionForm = ({ contractAddress, abiFunction, inheritedFrom }: ReadOnlyFunctionFormProps) => {
   const [form, setForm] = useState<Record<string, any>>(() => getInitialFormState(abiFunction));
   const [result, setResult] = useState<unknown>();
 

diff --git a/templates/base/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx b/templates/base/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx
@@ -13,7 +13,8 @@ import {
   getParsedError,
 } from "~~/components/scaffold-eth";
 import { useTransactor } from "~~/hooks/scaffold-eth";
-import { getTargetNetwork, notification } from "~~/utils/scaffold-eth";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { notification } from "~~/utils/scaffold-eth";
 
 type WriteOnlyFunctionFormProps = {
   abiFunction: AbiFunction;
@@ -32,7 +33,8 @@ export const WriteOnlyFunctionForm = ({
   const [txValue, setTxValue] = useState<string | bigint>("");
   const { chain } = useNetwork();
   const writeTxn = useTransactor();
-  const writeDisabled = !chain || chain?.id !== getTargetNetwork().id;
+  const { targetNetwork } = useTargetNetwork();
+  const writeDisabled = !chain || chain?.id !== targetNetwork.id;
 
   const {
     data: result,

diff --git a/templates/base/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx b/templates/base/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx
@@ -2,9 +2,9 @@ import { AbiFunction, AbiParameter } from "abitype";
 import { BaseError as BaseViemError } from "viem";
 
 /**
- * @dev utility function to generate key corresponding to function metaData
- * @param {AbiFunction} functionName
- * @param {utils.ParamType} input - object containing function name and input type corresponding to index
+ * Generates a key based on function metadata
+ * @param {string} functionName
+ * @param {AbiParameter} input - object containing function name and input type corresponding to index
  * @param {number} inputIndex
  * @returns {string} key
  */
@@ -14,7 +14,7 @@ const getFunctionInputKey = (functionName: string, input: AbiParameter, inputInd
 };
 
 /**
- * @dev utility function to parse error
+ * Parses an error to get a displayable string
  * @param e - error object
  * @returns {string} parsed error string
  */
@@ -38,8 +38,9 @@ const getParsedError = (e: any | BaseViemError): string => {
 
 // This regex is used to identify array types in the form of `type[size]`
 const ARRAY_TYPE_REGEX = /\[.*\]$/;
+
 /**
- * @dev Parse form input with array support
+ * Parses form input with array support
  * @param {Record<string,any>} form - form object containing key value pairs
  * @returns  parsed error string
  */

diff --git a/templates/base/packages/nextjs/components/scaffold-eth/FaucetButton.tsx b/templates/base/packages/nextjs/components/scaffold-eth/FaucetButton.tsx
@@ -52,8 +52,8 @@ export const FaucetButton = () => {
     <div
       className={
         balance
-          ? ""
-          : "tooltip tooltip-bottom tooltip-secondary tooltip-open font-bold before:left-auto before:transform-none before:content-[attr(data-tip)] before:right-0"
+          ? "ml-1"
+          : "ml-1 tooltip tooltip-bottom tooltip-secondary tooltip-open font-bold before:left-auto before:transform-none before:content-[attr(data-tip)] before:right-0"
       }
       data-tip="Grab funds from faucet"
     >

diff --git a/templates/base/packages/nextjs/components/scaffold-eth/Input/utils.ts b/templates/base/packages/nextjs/components/scaffold-eth/Input/utils.ts
@@ -1,10 +1,10 @@
-export interface CommonInputProps<T = string> {
+export type CommonInputProps<T = string> = {
   value: T;
   onChange: (newValue: T) => void;
   name?: string;
   placeholder?: string;
   disabled?: boolean;
-}
+};
 
 export enum IntegerVariant {
   UINT8 = "uint8",