From fd24f2b55eafa71f3fdcd2c69fcb03ba5179b669 Mon Sep 17 00:00:00 2001
From: Samuel Van Erps <sverps@gmail.com>
Date: Sat, 2 Dec 2023 23:44:41 +0100
Subject: [PATCH 1/8] fix(address type): allows user to set his preference in
 scaffold config (#630)

Fixes #514
---
 .../components/blockexplorer/AddressStorageTab.tsx       | 4 ++--
 packages/nextjs/components/scaffold-eth/Address.tsx      | 4 ++--
 packages/nextjs/components/scaffold-eth/Balance.tsx      | 3 ++-
 .../components/scaffold-eth/Contract/utilsDisplay.tsx    | 4 ++--
 packages/nextjs/components/scaffold-eth/Faucet.tsx       | 2 +-
 .../components/scaffold-eth/Input/AddressInput.tsx       | 4 ++--
 .../AddressInfoDropdown.tsx                              | 4 ++--
 .../RainbowKitCustomConnectButton/AddressQRCodeModal.tsx | 9 +++++----
 .../scaffold-eth/RainbowKitCustomConnectButton/index.tsx | 7 ++++---
 packages/nextjs/hooks/scaffold-eth/useAccountBalance.ts  | 3 ++-
 .../nextjs/pages/blockexplorer/address/[address].tsx     | 4 ++--
 .../nextjs/pages/blockexplorer/transaction/[txHash].tsx  | 4 ++--
 packages/nextjs/scaffold.config.ts                       | 7 +++++++
 packages/nextjs/types/abitype/abi.d.ts                   | 7 +++++--
 .../nextjs/utils/scaffold-eth/fetchPriceFromUniswap.ts   | 4 ++--
 15 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/packages/nextjs/components/blockexplorer/AddressStorageTab.tsx b/packages/nextjs/components/blockexplorer/AddressStorageTab.tsx
index f9f4d4fe3..acc669123 100644
--- a/packages/nextjs/components/blockexplorer/AddressStorageTab.tsx
+++ b/packages/nextjs/components/blockexplorer/AddressStorageTab.tsx
@@ -1,5 +1,5 @@
 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({
@@ -7,7 +7,7 @@ const publicClient = createPublicClient({
   transport: http(),
 });
 
-export const AddressStorageTab = ({ address }: { address: string }) => {
+export const AddressStorageTab = ({ address }: { address: Address }) => {
   const [storage, setStorage] = useState<string[]>([]);
 
   useEffect(() => {
diff --git a/packages/nextjs/components/scaffold-eth/Address.tsx b/packages/nextjs/components/scaffold-eth/Address.tsx
index 057d706bc..08c8453d3 100644
--- a/packages/nextjs/components/scaffold-eth/Address.tsx
+++ b/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";
diff --git a/packages/nextjs/components/scaffold-eth/Balance.tsx b/packages/nextjs/components/scaffold-eth/Balance.tsx
index 66bc172e7..784603a88 100644
--- a/packages/nextjs/components/scaffold-eth/Balance.tsx
+++ b/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;
 };
 
diff --git a/packages/nextjs/components/scaffold-eth/Contract/utilsDisplay.tsx b/packages/nextjs/components/scaffold-eth/Contract/utilsDisplay.tsx
index 5fcf3103a..f5d212993 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/utilsDisplay.tsx
+++ b/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} />;
   }
 
diff --git a/packages/nextjs/components/scaffold-eth/Faucet.tsx b/packages/nextjs/components/scaffold-eth/Faucet.tsx
index a21c9fa2e..3b070326a 100644
--- a/packages/nextjs/components/scaffold-eth/Faucet.tsx
+++ b/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}>
diff --git a/packages/nextjs/components/scaffold-eth/Input/AddressInput.tsx b/packages/nextjs/components/scaffold-eth/Input/AddressInput.tsx
index 7bfcd1680..4f057015a 100644
--- a/packages/nextjs/components/scaffold-eth/Input/AddressInput.tsx
+++ b/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={
diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx
index 101c60b6f..9112d93e3 100644
--- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx
+++ b/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;
diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx
index c6e00b719..98cb1661a 100644
--- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx
+++ b/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>
diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx
index 02efcc803..6b7dbc2c5 100644
--- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx
+++ b/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" />
                 </>
               );
             })()}
diff --git a/packages/nextjs/hooks/scaffold-eth/useAccountBalance.ts b/packages/nextjs/hooks/scaffold-eth/useAccountBalance.ts
index 61946f606..b52fb2190 100644
--- a/packages/nextjs/hooks/scaffold-eth/useAccountBalance.ts
+++ b/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);
diff --git a/packages/nextjs/pages/blockexplorer/address/[address].tsx b/packages/nextjs/pages/blockexplorer/address/[address].tsx
index aea9bf08e..de33cca59 100644
--- a/packages/nextjs/pages/blockexplorer/address/[address].tsx
+++ b/packages/nextjs/pages/blockexplorer/address/[address].tsx
@@ -3,7 +3,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 { hardhat } from "viem/chains";
 import {
   AddressCodeTab,
@@ -23,7 +23,7 @@ type AddressCodeTabProps = {
 };
 
 type PageProps = {
-  address: string;
+  address: AddressType;
   contractData: AddressCodeTabProps | null;
 };
 
diff --git a/packages/nextjs/pages/blockexplorer/transaction/[txHash].tsx b/packages/nextjs/pages/blockexplorer/transaction/[txHash].tsx
index 5a03c2c59..ab3bde78b 100644
--- a/packages/nextjs/pages/blockexplorer/transaction/[txHash].tsx
+++ b/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>();
diff --git a/packages/nextjs/scaffold.config.ts b/packages/nextjs/scaffold.config.ts
index f5ead0322..ddffa55ba 100644
--- a/packages/nextjs/scaffold.config.ts
+++ b/packages/nextjs/scaffold.config.ts
@@ -7,6 +7,7 @@ export type ScaffoldConfig = {
   walletConnectProjectId: string;
   onlyLocalBurnerWallet: boolean;
   walletAutoConnect: boolean;
+  useStrictAddressType?: boolean;
 };
 
 const scaffoldConfig = {
@@ -38,6 +39,12 @@ const scaffoldConfig = {
    * 2. If user is not connected to any wallet:  On reload, connect to burner wallet if burnerWallet.enabled is true && burnerWallet.onlyLocal is false
    */
   walletAutoConnect: true,
+
+  /**
+   * Strict address types makes viem/wagmi use `0x${string}` instead of plain string for addresses
+   * Leave this undefined or set to the default value if you're new to TypeScript
+   */
+  useStrictAddressType: false,
 } as const satisfies ScaffoldConfig;
 
 export default scaffoldConfig;
diff --git a/packages/nextjs/types/abitype/abi.d.ts b/packages/nextjs/types/abitype/abi.d.ts
index 992260266..4a6b04377 100644
--- a/packages/nextjs/types/abitype/abi.d.ts
+++ b/packages/nextjs/types/abitype/abi.d.ts
@@ -1,13 +1,16 @@
 import "abitype";
+import scaffoldConfig from "~~/scaffold.config";
+
+type AddressType = typeof scaffoldConfig extends { useStrictAddressType: true } ? `0x${string}` : string;
 
 declare module "viem/node_modules/abitype" {
   export interface Config {
-    AddressType: string;
+    AddressType: AddressType;
   }
 }
 
 declare module "abitype" {
   export interface Config {
-    AddressType: string;
+    AddressType: AddressType;
   }
 }
diff --git a/packages/nextjs/utils/scaffold-eth/fetchPriceFromUniswap.ts b/packages/nextjs/utils/scaffold-eth/fetchPriceFromUniswap.ts
index 3b560ec55..5a94ebd3a 100644
--- a/packages/nextjs/utils/scaffold-eth/fetchPriceFromUniswap.ts
+++ b/packages/nextjs/utils/scaffold-eth/fetchPriceFromUniswap.ts
@@ -1,6 +1,6 @@
 import { CurrencyAmount, Token } from "@uniswap/sdk-core";
 import { Pair, Route } from "@uniswap/v2-sdk";
-import { createPublicClient, http, parseAbi } from "viem";
+import { Address, createPublicClient, http, parseAbi } from "viem";
 import { mainnet } from "wagmi";
 import scaffoldConfig from "~~/scaffold.config";
 import { ChainWithAttributes } from "~~/utils/scaffold-eth";
@@ -31,7 +31,7 @@ export const fetchPriceFromUniswap = async (targetNetwork: ChainWithAttributes):
       targetNetwork.nativeCurrencyTokenAddress || "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2",
       18,
     );
-    const pairAddress = Pair.getAddress(TOKEN, DAI);
+    const pairAddress = Pair.getAddress(TOKEN, DAI) as Address;
 
     const wagmiConfig = {
       address: pairAddress,

From e5ed62279dca102107f54584d57e2ed3553c837c Mon Sep 17 00:00:00 2001
From: "Shiv Bhonde | shivbhonde.eth" <shivbhonde04@gmail.com>
Date: Mon, 4 Dec 2023 03:07:33 +0530
Subject: [PATCH 2/8] patch scaffoldConfig type error (#641)

* remove import of scaffold.config from abi.d.ts

* remove useStrictAddressType option from scaffol.config for now
---
 packages/nextjs/scaffold.config.ts     | 7 -------
 packages/nextjs/types/abitype/abi.d.ts | 3 +--
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/nextjs/scaffold.config.ts b/packages/nextjs/scaffold.config.ts
index ddffa55ba..f5ead0322 100644
--- a/packages/nextjs/scaffold.config.ts
+++ b/packages/nextjs/scaffold.config.ts
@@ -7,7 +7,6 @@ export type ScaffoldConfig = {
   walletConnectProjectId: string;
   onlyLocalBurnerWallet: boolean;
   walletAutoConnect: boolean;
-  useStrictAddressType?: boolean;
 };
 
 const scaffoldConfig = {
@@ -39,12 +38,6 @@ const scaffoldConfig = {
    * 2. If user is not connected to any wallet:  On reload, connect to burner wallet if burnerWallet.enabled is true && burnerWallet.onlyLocal is false
    */
   walletAutoConnect: true,
-
-  /**
-   * Strict address types makes viem/wagmi use `0x${string}` instead of plain string for addresses
-   * Leave this undefined or set to the default value if you're new to TypeScript
-   */
-  useStrictAddressType: false,
 } as const satisfies ScaffoldConfig;
 
 export default scaffoldConfig;
diff --git a/packages/nextjs/types/abitype/abi.d.ts b/packages/nextjs/types/abitype/abi.d.ts
index 4a6b04377..8b1301a76 100644
--- a/packages/nextjs/types/abitype/abi.d.ts
+++ b/packages/nextjs/types/abitype/abi.d.ts
@@ -1,7 +1,6 @@
 import "abitype";
-import scaffoldConfig from "~~/scaffold.config";
 
-type AddressType = typeof scaffoldConfig extends { useStrictAddressType: true } ? `0x${string}` : string;
+type AddressType = string;
 
 declare module "viem/node_modules/abitype" {
   export interface Config {

From 53e2082ea8a20445382b1dfa4a228887536890a6 Mon Sep 17 00:00:00 2001
From: Corantin <corantin.noll@gmail.com>
Date: Mon, 4 Dec 2023 13:15:00 -0500
Subject: [PATCH 3/8] Check for exact path segment for inheritedFunctions
 sources (#643)

---
 packages/hardhat/deploy/99_generateTsAbis.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/hardhat/deploy/99_generateTsAbis.ts b/packages/hardhat/deploy/99_generateTsAbis.ts
index 9bae1eb89..765e6a930 100644
--- a/packages/hardhat/deploy/99_generateTsAbis.ts
+++ b/packages/hardhat/deploy/99_generateTsAbis.ts
@@ -60,7 +60,7 @@ function getInheritedFunctions(sources: Record<string, any>, contractName: strin
   const inheritedFunctions = {} as Record<string, any>;
 
   for (const sourceContractName of actualSources) {
-    const sourcePath = Object.keys(sources).find(key => key.includes(sourceContractName));
+    const sourcePath = Object.keys(sources).find(key => key.includes(`/${sourceContractName}`));
     if (sourcePath) {
       const sourceName = sourcePath?.split("/").pop()?.split(".sol")[0];
       const { abi } = JSON.parse(fs.readFileSync(`${ARTIFACTS_DIR}/${sourcePath}/${sourceName}.json`).toString());

From fe7024aa640b66f0151f9828694b225fe4c77c3c Mon Sep 17 00:00:00 2001
From: "Shiv Bhonde | shivbhonde.eth" <shivbhonde04@gmail.com>
Date: Thu, 7 Dec 2023 20:07:30 +0530
Subject: [PATCH 4/8] Fix displaying of custom solidity errors (#638)

---
 .../scaffold-eth/Contract/ContractReadMethods.tsx |  1 +
 .../scaffold-eth/Contract/ContractVariables.tsx   |  1 +
 .../Contract/ContractWriteMethods.tsx             |  1 +
 .../scaffold-eth/Contract/DisplayVariable.tsx     |  4 +++-
 .../Contract/ReadOnlyFunctionForm.tsx             | 14 +++++++++++---
 .../Contract/WriteOnlyFunctionForm.tsx            |  4 +++-
 .../scaffold-eth/Contract/utilsContract.tsx       | 15 +++++++++++----
 .../nextjs/utils/scaffold-eth/notification.tsx    |  2 +-
 8 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx
index 13eae1c36..451a65846 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx
+++ b/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}
diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractVariables.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractVariables.tsx
index 0e625cc0c..9d2578297 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ContractVariables.tsx
+++ b/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}
diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx
index e42baf373..47308d252 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx
+++ b/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}
diff --git a/packages/nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx b/packages/nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx
index 0604a9de4..9e4096c7f 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx
+++ b/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);
     },
diff --git a/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx b/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx
index 2965b6e9f..69fab37a1 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx
@@ -9,6 +9,7 @@ import {
   getFunctionInputKey,
   getInitialFormState,
   getParsedContractFunctionArgs,
+  getParsedError,
 } from "~~/components/scaffold-eth";
 import { notification } from "~~/utils/scaffold-eth";
 
@@ -16,20 +17,27 @@ 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);
     },
   });
 
diff --git a/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx b/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx
index b86ce0f98..b3b09aff0 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx
@@ -17,6 +17,7 @@ import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { notification } from "~~/utils/scaffold-eth";
 
 type WriteOnlyFunctionFormProps = {
+  abi: Abi;
   abiFunction: AbiFunction;
   onChange: () => void;
   contractAddress: Address;
@@ -24,6 +25,7 @@ type WriteOnlyFunctionFormProps = {
 };
 
 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),
   });
 
diff --git a/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx b/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx
index e31941ef3..0c7d662ad 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx
+++ b/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 };
+      // 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) {
diff --git a/packages/nextjs/utils/scaffold-eth/notification.tsx b/packages/nextjs/utils/scaffold-eth/notification.tsx
index 3024c35cf..a0204c78f 100644
--- a/packages/nextjs/utils/scaffold-eth/notification.tsx
+++ b/packages/nextjs/utils/scaffold-eth/notification.tsx
@@ -55,7 +55,7 @@ const Notification = ({
         }`}
       >
         <div className="text-2xl self-start">{icon ? icon : ENUM_STATUSES[status]}</div>
-        <div className={`break-all whitespace-pre-line ${icon ? "mt-1" : ""}`}>{content}</div>
+        <div className={`overflow-x-hidden break-words whitespace-pre-line ${icon ? "mt-1" : ""}`}>{content}</div>
 
         <div className={`cursor-pointer text-lg ${icon ? "mt-1" : ""}`} onClick={() => toast.dismiss(t.id)}>
           <XMarkIcon className="w-6 cursor-pointer" onClick={() => toast.remove(t.id)} />

From a9d873d0fd7472235cf9afa5dd1e29af0120df34 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Thu, 7 Dec 2023 20:19:33 +0530
Subject: [PATCH 5/8] add changeset

---
 .changeset/fifty-doors-do.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/fifty-doors-do.md

diff --git a/.changeset/fifty-doors-do.md b/.changeset/fifty-doors-do.md
new file mode 100644
index 000000000..ce82a718a
--- /dev/null
+++ b/.changeset/fifty-doors-do.md
@@ -0,0 +1,7 @@
+---
+"create-eth": patch
+---
+
+- fix(address type): allows user to set his preference in `abi.d.ts` (#630 & #641)
+- Check for exact path segment for inheritedFunctions sources (#643)
+- Fix displaying of custom solidity errors (#638)

From 4a403eef75ee7ea0b5c21b1ae1bdac4988843645 Mon Sep 17 00:00:00 2001
From: "Shiv Bhonde | shivbhonde.eth" <shivbhonde04@gmail.com>
Date: Thu, 7 Dec 2023 21:40:18 +0530
Subject: [PATCH 6/8] Check cause?.data on getParsedError (#649)

---
 .../nextjs/components/scaffold-eth/Contract/utilsContract.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx b/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx
index 0c7d662ad..9da4b1edd 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx
@@ -25,9 +25,9 @@ const getParsedError = (e: any): string => {
       message = e.details;
     } else if (e.shortMessage) {
       message = e.shortMessage;
-      const cause = e.cause as { data?: DecodeErrorResultReturnType };
+      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") {
+      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

From 764f2e70d78c10323635e07212100badb31377f8 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Thu, 7 Dec 2023 22:58:58 +0530
Subject: [PATCH 7/8] update changeset

---
 .changeset/fifty-doors-do.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.changeset/fifty-doors-do.md b/.changeset/fifty-doors-do.md
index ce82a718a..f8cc9d3bb 100644
--- a/.changeset/fifty-doors-do.md
+++ b/.changeset/fifty-doors-do.md
@@ -2,6 +2,7 @@
 "create-eth": patch
 ---
 
-- fix(address type): allows user to set his preference in `abi.d.ts` (#630 & #641)
+- 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)

From 2aeb5eef48c35a07a888c01d1ccce9afd4a028e0 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Thu, 7 Dec 2023 23:20:53 +0530
Subject: [PATCH 8/8] add note about merging cli-backmerge with Creat a merge
 commit option instead of squash & merge

---
 contributors/DEVELOPER-GUIDE.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/contributors/DEVELOPER-GUIDE.md b/contributors/DEVELOPER-GUIDE.md
index 0322e953c..287995231 100644
--- a/contributors/DEVELOPER-GUIDE.md
+++ b/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.