fix(ui-ux): display decoded bytes32 for contract output

BirthdayResearch · Aug 14, 2023 · 13f4047 · 13f4047
1 parent 54ad9d8
commit 13f4047
Showing 1 changed file with 13 additions and 5 deletions.
diff --git a/src/pages/address/_components/contract/ContractMethodResult.tsx b/src/pages/address/_components/contract/ContractMethodResult.tsx
@@ -1,4 +1,16 @@
 import { SmartContractOutputWithValue } from "@api/types";
+import { utils } from "ethers";
+
+const formatOutputValue = (output: SmartContractOutputWithValue): string => {
+  if (output.type === "bytes32") {
+    return utils.toUtf8String(output.value);
+  }
+  if (typeof output.value === "bigint") {
+    return BigInt(output.value).toString();
+  }
+
+  return output.value;
+};
 
 export default function ContractMethodResult({
   outputs,
@@ -12,11 +24,7 @@ export default function ContractMethodResult({
           key={`${output.type}${index}`} // eslint-disable-line react/no-array-index-key
           className="text-white-300 break-all"
         >
-          <span>
-            {typeof output.value === "bigint"
-              ? BigInt(output.value).toString()
-              : output.value}
-          </span>
+          <span>{formatOutputValue(output)}</span>
           <span className="italic text-sm text-white-900 ml-2">
             {output.type}
           </span>