Fix displaying of custom solidity errors

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}

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}

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}

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

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

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

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