From 1d7afef66f7c944256a04ea53180852002bcfaad Mon Sep 17 00:00:00 2001 From: Shiv Bhonde Date: Sat, 2 Dec 2023 23:07:08 +0530 Subject: [PATCH 1/7] pass full abi to debug page functions --- .../scaffold-eth/Contract/ContractReadMethods.tsx | 1 + .../scaffold-eth/Contract/ContractVariables.tsx | 1 + .../scaffold-eth/Contract/ContractWriteMethods.tsx | 1 + .../scaffold-eth/Contract/DisplayVariable.tsx | 4 +++- .../scaffold-eth/Contract/ReadOnlyFunctionForm.tsx | 14 +++++++++++--- .../Contract/WriteOnlyFunctionForm.tsx | 4 +++- 6 files changed, 20 insertions(+), 5 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 }) => ( {functionsToDisplay.map(({ fn, inheritedFrom }) => ( {functionsToDisplay.map(({ fn, inheritedFrom }, idx) => ( { const { @@ -28,7 +30,7 @@ export const DisplayVariable = ({ } = useContractRead({ address: contractAddress, functionName: abiFunction.name, - abi: [abiFunction] as 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..78f68fe7d 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>(() => getInitialFormState(abiFunction)); const [result, setResult] = useState(); const { isFetching, refetch } = useContractRead({ address: contractAddress, functionName: abiFunction.name, - abi: [abiFunction] as 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), }); From 175a715d21b7ffa52347d0320df171e6659b2487 Mon Sep 17 00:00:00 2001 From: Shiv Bhonde Date: Sun, 3 Dec 2023 00:08:40 +0530 Subject: [PATCH 2/7] update getParsedError function to parse custom errors --- .../scaffold-eth/Contract/utilsContract.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx b/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx index e31941ef3..15e51302b 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,22 @@ 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 (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})`; + console.log("The cause full data", cause.data); + console.log("The message is:", message); + } } else if (e.message) { message = e.message; } else if (e.name) { From 39fd27c024c8db17fc5f7301416923c4d4a1ee54 Mon Sep 17 00:00:00 2001 From: Shiv Bhonde Date: Sun, 3 Dec 2023 00:33:13 +0530 Subject: [PATCH 3/7] consistency and remove console.logs --- .../nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx | 2 +- .../components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx | 2 +- .../nextjs/components/scaffold-eth/Contract/utilsContract.tsx | 2 -- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx b/packages/nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx index d51537dba..9e4096c7f 100644 --- a/packages/nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx +++ b/packages/nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx @@ -30,7 +30,7 @@ export const DisplayVariable = ({ } = useContractRead({ address: contractAddress, functionName: abiFunction.name, - 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 78f68fe7d..69fab37a1 100644 --- a/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx +++ b/packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx @@ -32,7 +32,7 @@ export const ReadOnlyFunctionForm = ({ const { isFetching, refetch } = useContractRead({ address: contractAddress, functionName: abiFunction.name, - abi, + abi: abi, args: getParsedContractFunctionArgs(form), enabled: false, onError: (error: any) => { diff --git a/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx b/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx index 15e51302b..136facaf4 100644 --- a/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx +++ b/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx @@ -31,8 +31,6 @@ const getParsedError = (e: any): string => { message = `${message.replace(/reverted\.$/, "reverted with following reason:")}\n${ cause.data.errorName }(${customErrorArgs})`; - console.log("The cause full data", cause.data); - console.log("The message is:", message); } } else if (e.message) { message = e.message; From bff0c5b58e4554f2e29de670368922ab750e6dd2 Mon Sep 17 00:00:00 2001 From: Shiv Bhonde Date: Sun, 3 Dec 2023 00:41:03 +0530 Subject: [PATCH 4/7] add comment for parsing of custom error --- .../nextjs/components/scaffold-eth/Contract/utilsContract.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx b/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx index 136facaf4..4e0bf3921 100644 --- a/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx +++ b/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx @@ -26,6 +26,7 @@ const getParsedError = (e: any): string => { } 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${ From fb2d4408ace04e92fdc343f01e2015eaf47579ee Mon Sep 17 00:00:00 2001 From: Shiv Bhonde Date: Thu, 7 Dec 2023 09:36:04 +0530 Subject: [PATCH 5/7] remove break-all className from notifications --- packages/nextjs/utils/scaffold-eth/notification.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nextjs/utils/scaffold-eth/notification.tsx b/packages/nextjs/utils/scaffold-eth/notification.tsx index 3024c35cf..9c27750ab 100644 --- a/packages/nextjs/utils/scaffold-eth/notification.tsx +++ b/packages/nextjs/utils/scaffold-eth/notification.tsx @@ -55,7 +55,7 @@ const Notification = ({ }`} >
{icon ? icon : ENUM_STATUSES[status]}
-
{content}
+
{content}
toast.dismiss(t.id)}> toast.remove(t.id)} /> From 4d0dbb4d719b3153ecd98b134fe53f1d4c8ac1b1 Mon Sep 17 00:00:00 2001 From: Shiv Bhonde Date: Thu, 7 Dec 2023 19:39:55 +0530 Subject: [PATCH 6/7] remove as casting --- .../nextjs/components/scaffold-eth/Contract/utilsContract.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx b/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx index 4e0bf3921..0c7d662ad 100644 --- a/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx +++ b/packages/nextjs/components/scaffold-eth/Contract/utilsContract.tsx @@ -25,7 +25,7 @@ const getParsedError = (e: any): string => { message = e.details; } else if (e.shortMessage) { message = e.shortMessage; - const cause = e.cause as any as { data?: DecodeErrorResultReturnType }; + 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() ?? ""; From f7e960a2eb4751d9600ef2f9c55ea410beeb8c44 Mon Sep 17 00:00:00 2001 From: Shiv Bhonde Date: Thu, 7 Dec 2023 19:49:18 +0530 Subject: [PATCH 7/7] add overflow-x-hidden break-workds classNames to content's div --- packages/nextjs/utils/scaffold-eth/notification.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nextjs/utils/scaffold-eth/notification.tsx b/packages/nextjs/utils/scaffold-eth/notification.tsx index 9c27750ab..a0204c78f 100644 --- a/packages/nextjs/utils/scaffold-eth/notification.tsx +++ b/packages/nextjs/utils/scaffold-eth/notification.tsx @@ -55,7 +55,7 @@ const Notification = ({ }`} >
{icon ? icon : ENUM_STATUSES[status]}
-
{content}
+
{content}
toast.dismiss(t.id)}> toast.remove(t.id)} />