fix(ui-ux): fixed read proxy method values bug (#383)

* fix(ui-ux): fixed read proxy method values bug

* updated types

* removed unused code

* lint fix

* formatting

* css fix

* code optimisation

apps/web/src/api/types.ts

@@ -297,7 +297,7 @@ export interface SmartContractInputOutput {
 
 export interface SmartContractOutputWithValue {
   type: string;
-  value: string;
+  value: any;
 }
 
 export interface SmartContractMethod {

apps/web/src/pages/address/_components/contract/ContractMethod.tsx

@@ -85,7 +85,9 @@ export default function ContractMethod({
             />
           )}
           {method.error && (
-            <div className="text-red-700 italic mt-4">{method.error}</div>
+            <div className="text-red-700 italic mt-4 break-all">
+              {method.error}
+            </div>
           )}
         </div>
       )}

apps/web/src/pages/address/_components/contract/ContractMethodForm.tsx

@@ -37,6 +37,7 @@ export default function ContractMethodForm({
   const contractId = router.query.aid as string;
   const { isConnected } = useAccount();
 
+  // eslint-disable-next-line @typescript-eslint/no-use-before-define
   const defaultInputValues = getDefaultValues(method.inputs ?? []);
   const [userInput, setUserInput] = useState<KeyValue>(defaultInputValues);
   const [dfiValue, setDfiValue] = useState("");
@@ -143,9 +144,9 @@ export default function ContractMethodForm({
         )}
       </div>
       {/* Read result */}
-      {type === ContractMethodType.Read && readResult?.length > 0 && (
-        <ContractMethodResult outputs={readResult} />
-      )}
+      {(type === ContractMethodType.Read ||
+        type === ContractMethodType.ReadProxy) &&
+        readResult?.length > 0 && <ContractMethodResult outputs={readResult} />}
       {error && <div className="text-red-700 italic -mt-4">{error}</div>}
     </div>
   );

apps/web/src/pages/address/_components/contract/ContractMethodResult.tsx

@@ -1,9 +1,50 @@
 import { SmartContractOutputWithValue } from "@api/types";
-import { toUtf8String } from "ethers";
+
+const parseNestedValue = (value: any): any => {
+  if (Array.isArray(value) || (typeof value === "object" && value !== null)) {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    return parseTuple({ type: "tuple", value });
+  }
+  // eslint-disable-next-line @typescript-eslint/no-use-before-define
+  return formatOutputValue({ type: typeof value, value });
+};
+
+const parseTuple = (output: SmartContractOutputWithValue): string => {
+  const tupleData = output.value;
+  let parsedTuple = "";
+  let tupleStructure: any;
+
+  if (Array.isArray(tupleData)) {
+    tupleStructure = [];
+
+    for (let i = 0; i < tupleData.length; i += 1) {
+      const value = tupleData[i];
+      tupleStructure.push(parseNestedValue(value));
+    }
+  } else if (typeof tupleData === "object" && tupleData !== null) {
+    tupleStructure = {};
+    const tupleKeys = Object.keys(tupleData);
+
+    for (let i = 0; i < tupleKeys.length; i += 1) {
+      const key = tupleKeys[i];
+
+      if (Object.prototype.hasOwnProperty.call(tupleData, key)) {
+        const value = tupleData[key];
+        tupleStructure[key] = parseNestedValue(value);
+      }
+    }
+  }
+
+  parsedTuple = JSON.stringify(tupleStructure);
+  return parsedTuple;
+};
 
 const formatOutputValue = (output: SmartContractOutputWithValue): string => {
-  if (output.type === "bytes32") {
-    return toUtf8String(output.value);
+  // if (output.type === "bytes32") {
+  //   return toUtf8String(output.value);
+  // }
+  if (output.type === "tuple") {
+    return parseTuple(output);
   }
   if (typeof output.value === "bigint") {
     return BigInt(output.value).toString();