Merge pull request #41 from Quantum3-Labs/cairo-types

Cairo types
Scaffold-Stark · Apr 11, 2024 · 956ab1c · 956ab1c
2 parents 2990532 + cce588f
commit 956ab1c
Show file tree

Hide file tree

Showing 15 changed files with 1,277 additions and 93 deletions.
diff --git a/packages/nextjs/app/debug/_components/contract/ContractInput.tsx b/packages/nextjs/app/debug/_components/contract/ContractInput.tsx
@@ -14,6 +14,7 @@ import {
 } from "~~/components/scaffold-stark";
 // import { AbiParameterTuple } from "~~/utils/scaffold-eth/contract";
 import { AbiParameter } from "~~/utils/scaffold-stark/contract";
+import { displayType } from "./utilsDisplay";
 
 type ContractInputProps = {
   setForm: Dispatch<SetStateAction<Record<string, any>>>;
@@ -35,8 +36,8 @@ export const ContractInput = ({
     name: stateObjectKey,
     value: form?.[stateObjectKey],
     placeholder: paramType.name
-      ? `${paramType.type} ${paramType.name}`
-      : paramType.type,
+      ? `${displayType(paramType.type)} ${paramType.name}`
+      : displayType(paramType.type),
     onChange: (value: any) => {
       setForm((form) => ({ ...form, [stateObjectKey]: value }));
     },
@@ -95,7 +96,7 @@ export const ContractInput = ({
           </span>
         )}
         <span className="block text-xs font-extralight leading-none">
-          {paramType.type}
+          {displayType(paramType.type)}
         </span>
       </div>
       {renderInput()}

diff --git a/packages/nextjs/app/debug/_components/contract/DisplayVariable.tsx b/packages/nextjs/app/debug/_components/contract/DisplayVariable.tsx
@@ -70,7 +70,7 @@ export const DisplayVariable = ({
               showAnimation ? "bg-warning rounded-sm animate-pulse-fast" : ""
             }`}
           >
-            {displayTxResult(result)}
+            {displayTxResult(result, false, abiFunction?.outputs)}
           </div>
         </div>
       </div>

diff --git a/packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx b/packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx
@@ -74,7 +74,7 @@ export const ReadOnlyFunctionForm = ({
             <div className="bg-secondary rounded-3xl text-sm px-4 py-1.5 break-words">
               <p className="font-bold m-0 mb-1">Result:</p>
               <pre className="whitespace-pre-wrap break-words">
-                {displayTxResult(result)}
+                {displayTxResult(result, false, abiFunction?.outputs)}
               </pre>
             </div>
           )}
@@ -83,7 +83,6 @@ export const ReadOnlyFunctionForm = ({
           className="btn btn-secondary btn-sm"
           onClick={async () => {
             const { data } = await refetch();
-            console.log(data);
             setResult(data);
           }}
           disabled={isFetching}

diff --git a/packages/nextjs/app/debug/_components/contract/TxReceipt.tsx b/packages/nextjs/app/debug/_components/contract/TxReceipt.tsx
@@ -28,7 +28,7 @@ export const TxReceipt = (
           />
         ) : (
           <CopyToClipboard
-            text={displayTxResult(txResult) as string}
+            text={displayTxResult(txResult, false) as string}
             onCopy={() => {
               setTxResultCopied(true);
               setTimeout(() => {
@@ -49,7 +49,7 @@ export const TxReceipt = (
           <strong>Transaction Receipt</strong>
         </div>
         <div className="collapse-content overflow-auto bg-secondary rounded-t-none rounded-3xl">
-          <pre className="text-xs pt-4">{displayTxResult(txResult)}</pre>
+          <pre className="text-xs pt-4">{displayTxResult(txResult, false)}</pre>
         </div>
       </div>
     </div>

diff --git a/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx b/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx
@@ -50,22 +50,6 @@ WriteOnlyFunctionFormProps) => {
   const writeTxn = useTransactor();
   const { targetNetwork } = useTargetNetwork();
   const writeDisabled = !chain || chain?.network !== targetNetwork.network;
-  //   const { contract } = useContract({
-  //     address: contractAddress,
-  //     abi: [...abi],
-  //   });
-
-  //   const calls = useMemo(() => {
-  //     if (!contract) return [];
-  //     if (form) {
-  //       const args = getParsedContractFunctionArgs(form);
-  //       return contract.populateTransaction[abiFunction.name](
-  //         1 //  TODO Fix this type
-  //       );
-  //     } else {
-  //       return contract.populateTransaction[abiFunction.name]();
-  //     }
-  //   }, [contract, form, abiFunction]);
 
   const {
     data: result,

diff --git a/packages/nextjs/app/debug/_components/contract/utilsContract.tsx b/packages/nextjs/app/debug/_components/contract/utilsContract.tsx
@@ -1,5 +1,5 @@
 import { AbiFunction, AbiParameter } from "~~/utils/scaffold-stark/contract";
-
+import { uint256 } from "starknet";
 /**
  * Generates a key based on function metadata
  */
@@ -32,7 +32,12 @@ const getInitialFormState = (abiFunction: AbiFunction) => {
 };
 
 // Recursive function to deeply parse JSON strings, correctly handling nested arrays and encoded JSON strings
-const deepParseValues = (value: any): any => {
+const deepParseValues = (value: any, keyAndType?: any): any => {
+  if (keyAndType) {
+    if (keyAndType.includes("core::integer::u256")) {
+      return uint256.bnToUint256(value);
+    }
+  }
   if (typeof value === "string") {
     if (isJsonString(value)) {
       const parsed = JSON.parse(value);
@@ -79,9 +84,7 @@ const deepParseValues = (value: any): any => {
 const getParsedContractFunctionArgs = (form: Record<string, any>) => {
   return Object.keys(form).map((key) => {
     const valueOfArg = form[key];
-
-    // Attempt to deeply parse JSON strings
-    return deepParseValues(valueOfArg);
+    return deepParseValues(valueOfArg, key);
   });
 };
 

diff --git a/packages/nextjs/app/debug/_components/contract/utilsDisplay.tsx b/packages/nextjs/app/debug/_components/contract/utilsDisplay.tsx
@@ -1,28 +1,42 @@
 import { ReactElement } from "react";
+import { ByteArray, byteArray } from "starknet-dev";
 import {
   Uint256,
   validateAndParseAddress,
   validateChecksumAddress,
 } from "starknet";
 import { Address } from "~~/components/scaffold-stark";
 import { replacer } from "~~/utils/scaffold-stark/common";
+import { AbiOutput } from "~~/utils/scaffold-stark/contract";
 
 type DisplayContent =
   | Uint256
   | string
   | bigint
   | boolean
-  | `0x${string}`
+  | Object
   | DisplayContent[]
   | unknown;
 
 export const displayTxResult = (
   displayContent: DisplayContent | DisplayContent[],
-  asText = false
+  asText: boolean,
+  functionOutputs: readonly AbiOutput[] = []
 ): string | ReactElement | number => {
   if (displayContent == null) {
     return "";
   }
+  if (functionOutputs != null && functionOutputs.length != 0) {
+    if (
+      functionOutputs[0].type ===
+      "core::starknet::contract_address::ContractAddress"
+    ) {
+      const address = validateAndParseAddress(displayContent as string);
+      return asText ? address : <Address address={address as `0x${string}`} />;
+    } else if (functionOutputs[0].type === "core::byte_array::ByteArray") {
+      return byteArray.stringFromByteArray(displayContent as ByteArray);
+    }
+  }
 
   if (typeof displayContent === "bigint") {
     try {
@@ -72,5 +86,11 @@ export const displayTxResult = (
   return JSON.stringify(displayContent, replacer, 2);
 };
 
+export const displayType = (type: string) => {
+  if (!type.includes("::")) {
+    return type;
+  }
+  return type.split("::").pop();
+};
 const displayTxResultAsText = (displayContent: DisplayContent) =>
   displayTxResult(displayContent, true);