Weekly CLI backmerge

.changeset/fifty-doors-do.md

@@ -0,0 +1,8 @@
+---
+"create-eth": patch
+---
+
+- Allow user to set his preference for AddressType in `abi.d.ts` (#630 & #641)
+- Check for exact path segment for inheritedFunctions sources (#643)
+- Fix displaying of custom solidity errors (#638)
+- Check cause?.data on getParsedError (#649)

contributors/DEVELOPER-GUIDE.md

@@ -64,10 +64,10 @@ For example, `generated.txt` would have a sibling `generated.txt.dev` file with
 5. Add changeset by doing `yarn changeset add` follow prompt and commit changes, learn more about changeset [here](https://github.com/scaffold-eth/scaffold-eth-2/blob/cli/CONTRIBUTING.md#changeset)
 6. Push the branch and create a PR against `cli` branch
 
+> NOTE: The `cli-backmerge` branch should be merged with "Create a merge commit" option instead of "Squash and merge" option into `cli` branch to preserve the commit history and not needing to create an extra commit directly into `cli` to merge `main` to resolve conflicts.
+
 ### Publishing to NPM
 
 Once the previous PR containing `changeset` is merged to `cli` branch, github bot will automatically create a new PR against `cli` branch containing version increment in `package.json` based on `changeset` and will also update `CHANGELOG.md` with respective `changesets` present.
 
 After this GH bot PR is merged to `cli`. It will auto publish a new release to NPM.
-
-> NOTE: Even after resolving conflicts and merging `cli-backmerge` to `cli` branch, you see will conflicts not being resolved in `cli` as compared to `main` branch and for that you need to directly push an extra commit to `cli` branch merging main into cli.

templates/base/packages/nextjs/components/blockexplorer/AddressStorageTab.tsx

@@ -1,13 +1,13 @@
 import { useEffect, useState } from "react";
-import { createPublicClient, http, toHex } from "viem";
+import { Address, createPublicClient, http, toHex } from "viem";
 import { hardhat } from "viem/chains";
 
 const publicClient = createPublicClient({
   chain: hardhat,
   transport: http(),
 });
 
-export const AddressStorageTab = ({ address }: { address: string }) => {
+export const AddressStorageTab = ({ address }: { address: Address }) => {
   const [storage, setStorage] = useState<string[]>([]);
 
   useEffect(() => {

templates/base/packages/nextjs/components/scaffold-eth/Address.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import { CopyToClipboard } from "react-copy-to-clipboard";
-import { isAddress } from "viem";
+import { Address as AddressType, isAddress } from "viem";
 import { hardhat } from "viem/chains";
 import { useEnsAvatar, useEnsName } from "wagmi";
 import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
@@ -10,7 +10,7 @@ import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";
 
 type AddressProps = {
-  address?: string;
+  address?: AddressType;
   disableAddressLink?: boolean;
   format?: "short" | "long";
   size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";

templates/base/packages/nextjs/components/scaffold-eth/Balance.tsx

@@ -1,8 +1,9 @@
+import { Address } from "viem";
 import { useAccountBalance } from "~~/hooks/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 
 type BalanceProps = {
-  address?: string;
+  address?: Address;
   className?: string;
 };
 

templates/base/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx

@@ -31,6 +31,7 @@ export const ContractReadMethods = ({ deployedContractData }: { deployedContract
     <>
       {functionsToDisplay.map(({ fn, inheritedFrom }) => (
         <ReadOnlyFunctionForm
+          abi={deployedContractData.abi as Abi}
           contractAddress={deployedContractData.address}
           abiFunction={fn}
           key={fn.name}

templates/base/packages/nextjs/components/scaffold-eth/Contract/ContractVariables.tsx

@@ -37,6 +37,7 @@ export const ContractVariables = ({
     <>
       {functionsToDisplay.map(({ fn, inheritedFrom }) => (
         <DisplayVariable
+          abi={deployedContractData.abi as Abi}
           abiFunction={fn}
           contractAddress={deployedContractData.address}
           key={fn.name}

templates/base/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx

@@ -36,6 +36,7 @@ export const ContractWriteMethods = ({
     <>
       {functionsToDisplay.map(({ fn, inheritedFrom }, idx) => (
         <WriteOnlyFunctionForm
+          abi={deployedContractData.abi as Abi}
           key={`${fn.name}-${idx}}`}
           abiFunction={fn}
           onChange={onChange}

templates/base/packages/nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx

@@ -13,12 +13,14 @@ type DisplayVariableProps = {
   abiFunction: AbiFunction;
   refreshDisplayVariables: boolean;
   inheritedFrom?: string;
+  abi: Abi;
 };
 
 export const DisplayVariable = ({
   contractAddress,
   abiFunction,
   refreshDisplayVariables,
+  abi,
   inheritedFrom,
 }: DisplayVariableProps) => {
   const {
@@ -28,7 +30,7 @@ export const DisplayVariable = ({
   } = useContractRead({
     address: contractAddress,
     functionName: abiFunction.name,
-    abi: [abiFunction] as Abi,
+    abi: abi,
     onError: error => {
       notification.error(error.message);
     },

templates/base/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx

@@ -9,27 +9,35 @@ import {
   getFunctionInputKey,
   getInitialFormState,
   getParsedContractFunctionArgs,
+  getParsedError,
 } from "~~/components/scaffold-eth";
 import { notification } from "~~/utils/scaffold-eth";
 
 type ReadOnlyFunctionFormProps = {
   contractAddress: Address;
   abiFunction: AbiFunction;
   inheritedFrom?: string;
+  abi: Abi;
 };
 
-export const ReadOnlyFunctionForm = ({ contractAddress, abiFunction, inheritedFrom }: ReadOnlyFunctionFormProps) => {
+export const ReadOnlyFunctionForm = ({
+  contractAddress,
+  abiFunction,
+  inheritedFrom,
+  abi,
+}: ReadOnlyFunctionFormProps) => {
   const [form, setForm] = useState<Record<string, any>>(() => getInitialFormState(abiFunction));
   const [result, setResult] = useState<unknown>();
 
   const { isFetching, refetch } = useContractRead({
     address: contractAddress,
     functionName: abiFunction.name,
-    abi: [abiFunction] as Abi,
+    abi: abi,
     args: getParsedContractFunctionArgs(form),
     enabled: false,
     onError: (error: any) => {
-      notification.error(error.message);
+      const parsedErrror = getParsedError(error);
+      notification.error(parsedErrror);
     },
   });
 

templates/base/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx

@@ -17,13 +17,15 @@ import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { notification } from "~~/utils/scaffold-eth";
 
 type WriteOnlyFunctionFormProps = {
+  abi: Abi;
   abiFunction: AbiFunction;
   onChange: () => void;
   contractAddress: Address;
   inheritedFrom?: string;
 };
 
 export const WriteOnlyFunctionForm = ({
+  abi,
   abiFunction,
   onChange,
   contractAddress,
@@ -43,7 +45,7 @@ export const WriteOnlyFunctionForm = ({
   } = useContractWrite({
     address: contractAddress,
     functionName: abiFunction.name,
-    abi: [abiFunction] as Abi,
+    abi: abi,
     args: getParsedContractFunctionArgs(form),
   });
 

templates/base/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx

@@ -1,5 +1,5 @@
 import { AbiFunction, AbiParameter } from "abitype";
-import { BaseError as BaseViemError } from "viem";
+import { BaseError as BaseViemError, DecodeErrorResultReturnType } from "viem";
 
 /**
  * Generates a key based on function metadata
@@ -18,14 +18,21 @@ const getFunctionInputKey = (functionName: string, input: AbiParameter, inputInd
  * @param e - error object
  * @returns {string} parsed error string
  */
-const getParsedError = (e: any | BaseViemError): string => {
-  let message = e.message ?? "An unknown error occurred";
-
+const getParsedError = (e: any): string => {
+  let message: string = e.message ?? "An unknown error occurred";
   if (e instanceof BaseViemError) {
     if (e.details) {
       message = e.details;
     } else if (e.shortMessage) {
       message = e.shortMessage;
+      const cause = e.cause as { data?: DecodeErrorResultReturnType } | undefined;
+      // if its not generic error, append custom error name and its args to message
+      if (cause?.data && cause.data?.abiItem?.name !== "Error") {
+        const customErrorArgs = cause.data.args?.toString() ?? "";
+        message = `${message.replace(/reverted\.$/, "reverted with following reason:")}\n${
+          cause.data.errorName
+        }(${customErrorArgs})`;
+      }
     } else if (e.message) {
       message = e.message;
     } else if (e.name) {

templates/base/packages/nextjs/components/scaffold-eth/Contract/utilsDisplay.tsx

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { TransactionBase, TransactionReceipt, formatEther } from "viem";
+import { TransactionBase, TransactionReceipt, formatEther, isAddress } from "viem";
 import { Address } from "~~/components/scaffold-eth";
 import { replacer } from "~~/utils/scaffold-eth/common";
 
@@ -34,7 +34,7 @@ export const displayTxResult = (
     }
   }
 
-  if (typeof displayContent === "string" && displayContent.indexOf("0x") === 0 && displayContent.length === 42) {
+  if (typeof displayContent === "string" && isAddress(displayContent)) {
     return asText ? displayContent : <Address address={displayContent} />;
   }
 

templates/base/packages/nextjs/components/scaffold-eth/Faucet.tsx

@@ -110,7 +110,7 @@ export const Faucet = () => {
               <AddressInput
                 placeholder="Destination Address"
                 value={inputAddress ?? ""}
-                onChange={value => setInputAddress(value)}
+                onChange={value => setInputAddress(value as AddressType)}
               />
               <EtherInput placeholder="Amount to send" value={sendValue} onChange={value => setSendValue(value)} />
               <button className="h-10 btn btn-primary btn-sm px-2 rounded-full" onClick={sendETH} disabled={loading}>

templates/base/packages/nextjs/components/scaffold-eth/Input/AddressInput.tsx

@@ -27,7 +27,7 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
 
   const [enteredEnsName, setEnteredEnsName] = useState<string>();
   const { data: ensName, isLoading: isEnsNameLoading } = useEnsName({
-    address: settledValue,
+    address: settledValue as Address,
     enabled: isAddress(debouncedValue),
     chainId: 1,
     cacheTime: 30_000,
@@ -62,7 +62,7 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
       name={name}
       placeholder={placeholder}
       error={ensAddress === null}
-      value={value}
+      value={value as Address}
       onChange={handleChange}
       disabled={isEnsAddressLoading || isEnsNameLoading || disabled}
       prefix={

templates/base/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx

@@ -1,7 +1,7 @@
 import { useRef, useState } from "react";
 import { NetworkOptions } from "./NetworkOptions";
 import CopyToClipboard from "react-copy-to-clipboard";
-import { useDisconnect } from "wagmi";
+import { Address, useDisconnect } from "wagmi";
 import {
   ArrowLeftOnRectangleIcon,
   ArrowTopRightOnSquareIcon,
@@ -18,7 +18,7 @@ import { getTargetNetworks } from "~~/utils/scaffold-eth";
 const allowedNetworks = getTargetNetworks();
 
 type AddressInfoDropdownProps = {
-  address: string;
+  address: Address;
   blockExplorerAddressLink: string | undefined;
   displayName: string;
   ensAvatar?: string;

templates/base/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx

@@ -1,12 +1,13 @@
 import { QRCodeSVG } from "qrcode.react";
+import { Address as AddressType } from "viem";
 import { Address } from "~~/components/scaffold-eth";
 
-interface IAddressQRCodeModal {
-  address: string;
+type AddressQRCodeModalProps = {
+  address: AddressType;
   modalId: string;
-}
+};
 
-export const AddressQRCodeModal: React.FC<IAddressQRCodeModal> = ({ address, modalId }) => {
+export const AddressQRCodeModal = ({ address, modalId }: AddressQRCodeModalProps) => {
   return (
     <>
       <div>

templates/base/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx

@@ -3,6 +3,7 @@ import { AddressInfoDropdown } from "./AddressInfoDropdown";
 import { AddressQRCodeModal } from "./AddressQRCodeModal";
 import { WrongNetworkDropdown } from "./WrongNetworkDropdown";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
+import { Address } from "viem";
 import { useAutoConnect, useNetworkColor } from "~~/hooks/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";
@@ -41,18 +42,18 @@ export const RainbowKitCustomConnectButton = () => {
               return (
                 <>
                   <div className="flex flex-col items-center mr-1">
-                    <Balance address={account.address} className="min-h-0 h-auto" />
+                    <Balance address={account.address as Address} className="min-h-0 h-auto" />
                     <span className="text-xs" style={{ color: networkColor }}>
                       {chain.name}
                     </span>
                   </div>
                   <AddressInfoDropdown
-                    address={account.address}
+                    address={account.address as Address}
                     displayName={account.displayName}
                     ensAvatar={account.ensAvatar}
                     blockExplorerAddressLink={blockExplorerAddressLink}
                   />
-                  <AddressQRCodeModal address={account.address} modalId="qrcode-modal" />
+                  <AddressQRCodeModal address={account.address as Address} modalId="qrcode-modal" />
                 </>
               );
             })()}

templates/base/packages/nextjs/hooks/scaffold-eth/useAccountBalance.ts

@@ -1,9 +1,10 @@
 import { useCallback, useEffect, useState } from "react";
 import { useTargetNetwork } from "./useTargetNetwork";
+import { Address } from "viem";
 import { useBalance } from "wagmi";
 import { useGlobalState } from "~~/services/store/store";
 
-export function useAccountBalance(address?: string) {
+export function useAccountBalance(address?: Address) {
   const [isEthBalance, setIsEthBalance] = useState(true);
   const [balance, setBalance] = useState<number | null>(null);
   const price = useGlobalState(state => state.nativeCurrencyPrice);

templates/base/packages/nextjs/pages/blockexplorer/address/[address].tsx.template.mjs

@@ -6,7 +6,7 @@ import { useRouter } from "next/router";
 import fs from "fs";
 import { GetServerSideProps } from "next";
 import path from "path";
-import { createPublicClient, http } from "viem";
+import { Address as AddressType, createPublicClient, http } from "viem";
 import { ${chainName[0]} } from "viem/chains";
 import {
   AddressCodeTab,
@@ -26,7 +26,7 @@ type AddressCodeTabProps = {
 };
 
 type PageProps = {
-  address: string;
+  address: AddressType;
   contractData: AddressCodeTabProps | null;
 };
 

templates/base/packages/nextjs/pages/blockexplorer/transaction/[txHash].tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import type { NextPage } from "next";
-import { Transaction, TransactionReceipt, formatEther, formatUnits } from "viem";
+import { Hash, Transaction, TransactionReceipt, formatEther, formatUnits } from "viem";
 import { hardhat } from "viem/chains";
 import { usePublicClient } from "wagmi";
 import { Address } from "~~/components/scaffold-eth";
@@ -13,7 +13,7 @@ const TransactionPage: NextPage = () => {
   const client = usePublicClient({ chainId: hardhat.id });
 
   const router = useRouter();
-  const { txHash } = router.query as { txHash?: `0x${string}` };
+  const { txHash } = router.query as { txHash?: Hash };
   const [transaction, setTransaction] = useState<Transaction>();
   const [receipt, setReceipt] = useState<TransactionReceipt>();
   const [functionCalled, setFunctionCalled] = useState<string>();

templates/base/packages/nextjs/types/abitype/abi.d.ts

@@ -1,13 +1,15 @@
 import "abitype";
 
+type AddressType = string;
+
 declare module "viem/node_modules/abitype" {
   export interface Config {
-    AddressType: string;
+    AddressType: AddressType;
   }
 }
 
 declare module "abitype" {
   export interface Config {
-    AddressType: string;
+    AddressType: AddressType;
   }
 }