feat(v3): migration into v3 dependencies (#234)

packages/nextjs/app/debug/_components/contract/DisplayVariable.tsx

@@ -31,6 +31,7 @@ export const DisplayVariable = ({
     isLoading,
     isFetching,
     refetch,
+    error,
   } = useReadContract({
     address: contractAddress,
     functionName: abiFunction.name,
@@ -42,6 +43,14 @@ export const DisplayVariable = ({
   const { resolvedTheme } = useTheme();
   const isDarkMode = resolvedTheme === "dark";
 
+  // error logging
+  useEffect(() => {
+    if (error) {
+      console.error(error?.message);
+      console.error(error.stack);
+    }
+  }, [error]);
+
   useEffect(() => {
     refetch();
   }, [refetch, refreshDisplayVariables]);

packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx

@@ -33,15 +33,22 @@ export const ReadOnlyFunctionForm = ({
   const [formErrorMessage, setFormErrorMessage] = useState<string | null>(null);
   const lastForm = useRef(form);
 
-  const { isFetching, data, refetch } = useReadContract({
+  const { isFetching, data, refetch, error } = useReadContract({
     address: contractAddress,
     functionName: abiFunction.name,
     abi: [...abi],
-    args: inputValue ? inputValue.flat(Infinity) : [],
+    args: inputValue || [],
     enabled: false,
     blockIdentifier: "pending" as BlockNumber,
   });
 
+  useEffect(() => {
+    if (error) {
+      console.error(error?.message);
+      console.error(error.stack);
+    }
+  }, [error]);
+
   const transformedFunction = transformAbiFunction(abiFunction);
   const inputElements = transformedFunction.inputs.map((input, inputIndex) => {
     const key = getFunctionInputKey(abiFunction.name, input, inputIndex);
@@ -59,7 +66,8 @@ export const ReadOnlyFunctionForm = ({
   });
 
   const handleRead = () => {
-    const newInputValue = getParsedContractFunctionArgs(form, false);
+    const newInputValue = getParsedContractFunctionArgs(form, false, true);
+
     if (JSON.stringify(form) !== JSON.stringify(lastForm.current)) {
       setInputValue(newInputValue);
       lastForm.current = form;

packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx

@@ -41,8 +41,7 @@ export const WriteOnlyFunctionForm = ({
   abiFunction,
   onChange,
   contractAddress,
-}: //   inheritedFrom,
-WriteOnlyFunctionFormProps) => {
+}: WriteOnlyFunctionFormProps) => {
   const [form, setForm] = useState<Record<string, any>>(() =>
     getInitialFormState(abiFunction),
   );
@@ -67,19 +66,28 @@ WriteOnlyFunctionFormProps) => {
     data: result,
     isPending: isLoading,
     sendAsync,
-    send,
+    error,
   } = useSendTransaction({
     calls: [
       {
         contractAddress,
         entrypoint: abiFunction.name,
 
         // use infinity to completely flatten array from n dimensions to 1 dimension
+        // writing in starknet next still needs rawArgs parsing, use v2 parsing
         calldata: getParsedContractFunctionArgs(form, false).flat(Infinity),
       },
     ],
   });
 
+  // side effect for error logging
+  useEffect(() => {
+    if (error) {
+      console.error(error?.message);
+      console.error(error.stack);
+    }
+  }, [error]);
+
   const handleWrite = async () => {
     if (sendAsync) {
       try {

packages/nextjs/app/debug/_components/contract/utilsContract.tsx

@@ -3,6 +3,7 @@ import {
   AbiFunction,
   AbiParameter,
   AbiStruct,
+  deepParseValues,
   parseParamWithType,
 } from "~~/utils/scaffold-stark/contract";
 /**
@@ -17,15 +18,6 @@ const getFunctionInputKey = (
   return functionName + "_" + name + "_" + input.type;
 };
 
-const isJsonString = (str: string) => {
-  try {
-    JSON.parse(str);
-    return true;
-  } catch (e) {
-    return false;
-  }
-};
-
 const getInitialTupleFormState = (abiParameter: AbiStruct | AbiEnum) => {
   const initialForm: Record<string, any> = {};
 
@@ -53,64 +45,17 @@ const getInitialFormState = (abiFunction: AbiFunction) => {
   return initialForm;
 };
 
-const deepParseValues = (
-  value: any,
-  isRead: boolean,
-  keyAndType?: any,
-): any => {
-  if (keyAndType) {
-    return parseParamWithType(keyAndType, value, isRead);
-  }
-  if (typeof value === "string") {
-    if (isJsonString(value)) {
-      const parsed = JSON.parse(value);
-      return deepParseValues(parsed, isRead);
-    } else {
-      // It's a string but not a JSON string, return as is
-      return value;
-    }
-  } else if (Array.isArray(value)) {
-    // If it's an array, recursively parse each element
-    return value.map((element) => deepParseValues(element, isRead));
-  } else if (typeof value === "object" && value !== null) {
-    // If it's an object, recursively parse each value
-    return Object.entries(value).reduce((acc: any, [key, val]) => {
-      acc[key] = deepParseValues(val, isRead);
-      return acc;
-    }, {});
-  }
-
-  // Handle boolean values represented as strings
-  if (
-    value === "true" ||
-    value === "1" ||
-    value === "0x1" ||
-    value === "0x01" ||
-    value === "0x0001"
-  ) {
-    return true;
-  } else if (
-    value === "false" ||
-    value === "0" ||
-    value === "0x0" ||
-    value === "0x00" ||
-    value === "0x0000"
-  ) {
-    return false;
-  }
-
-  return value;
-};
 /**
  * parses form input with array support
  */
 const getParsedContractFunctionArgs = (
   form: Record<string, any>,
   isRead: boolean,
+  isReadArgsParsing?: boolean,
 ) => {
   return Object.keys(form).map((key) => {
     const valueOfArg = form[key];
-    return deepParseValues(valueOfArg, isRead, key);
+    return deepParseValues(valueOfArg, isRead, key, isReadArgsParsing);
   });
 };
 
@@ -131,7 +76,6 @@ const transformAbiFunction = (abiFunction: AbiFunction): AbiFunction => {
 
 export {
   getFunctionInputKey,
-  isJsonString,
   getInitialFormState,
   getInitialTupleFormState,
   getParsedContractFunctionArgs,

packages/nextjs/app/debug/_components/contract/utilsDisplay.tsx

@@ -7,6 +7,7 @@ import {
   parseParamWithType,
 } from "~~/utils/scaffold-stark/contract";
 import {
+  isCairoByteArray,
   isCairoContractAddress,
   isCairoTuple,
   parseGenericType,
@@ -76,6 +77,11 @@ export const displayTxResult = (
       return parsedParam;
     }
 
+    // use quotation for byte arrays to prevent confusion
+    if (isCairoByteArray(type)) {
+      return `"${parsedParam.toString()}"`;
+    }
+
     return isCairoContractAddress(type) &&
       validateChecksumAddress(parsedParam) &&
       !asText ? (

packages/nextjs/hooks/scaffold-stark/useScaffoldMultiWriteContract.ts

@@ -53,8 +53,14 @@ export const useScaffoldMultiWriteContract = <
           contractAddress: contract?.address,
           entrypoint: functionName,
           calldata:
-            abiFunction && unParsedArgs
-              ? parseFunctionParams(abiFunction, unParsedArgs, false).flat()
+            abiFunction && unParsedArgs && contract
+              ? parseFunctionParams({
+                  abiFunction,
+                  isRead: false,
+                  inputs: unParsedArgs as any[],
+                  isReadArgsParsing: false,
+                  abi: contract.abi,
+                }).flat()
               : [],
         };
       });

packages/nextjs/hooks/scaffold-stark/useScaffoldReadContract.ts

@@ -34,11 +34,7 @@ export const useScaffoldReadContract = <
       args && (!Array.isArray(args) || !args.some((arg) => arg === undefined)),
     blockIdentifier: "pending" as BlockNumber,
     ...(readConfig as any),
-  }) as Omit<ReturnType<typeof useReadContract>, "data" | "refetch"> & {
+  }) as Omit<ReturnType<typeof useReadContract>, "data"> & {
     data: AbiFunctionOutputs<ContractAbi, TFunctionName> | undefined;
-    // refetch: (options?: {
-    //   throwOnError: boolean;
-    //   cancelRefetch: boolean;
-    // }) => Promise<AbiFunctionOutputs<ContractAbi, TFunctionName>>;
   };
 };

packages/nextjs/hooks/scaffold-stark/useScaffoldWriteContract.ts

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { useTargetNetwork } from "./useTargetNetwork";
 import {
   useDeployedContractInfo,
@@ -46,11 +46,18 @@ export const useScaffoldWriteContract = <
   );
 
   const parsedParams = useMemo(() => {
-    if (args && abiFunction) {
-      return parseFunctionParams(abiFunction, args as any[], false).flat();
+    if (args && abiFunction && deployedContractData) {
+      const parsed = parseFunctionParams({
+        abiFunction,
+        abi: deployedContractData.abi,
+        inputs: args as any[],
+        isRead: false,
+        isReadArgsParsing: false,
+      }).flat(Infinity);
+      return parsed;
     }
     return [];
-  }, [args, abiFunction]);
+  }, [args, abiFunction, deployedContractData]);
 
   const wagmiContractWrite = useSendTransaction({
     calls: deployedContractData
@@ -85,8 +92,14 @@ export const useScaffoldWriteContract = <
     }
 
     let newParsedParams =
-      newArgs && abiFunction
-        ? parseFunctionParams(abiFunction, newArgs as any[], false).flat()
+      newArgs && abiFunction && deployedContractData
+        ? parseFunctionParams({
+            abiFunction,
+            abi: deployedContractData.abi,
+            inputs: args as any[],
+            isRead: false,
+            isReadArgsParsing: false,
+          }).flat(Infinity)
         : parsedParams;
     const newCalls = [
       {

packages/nextjs/utils/scaffold-stark/common.ts

@@ -25,3 +25,12 @@ export function isAddress(address: string): address is Address {
 export function feltToHex(feltBigInt: bigint) {
   return `0x${feltBigInt.toString(16)}`;
 }
+
+export function isJsonString(str: string) {
+  try {
+    JSON.parse(str);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}