From 13f40478fc2f74e27b8cef1a067963ecc2a0a64e Mon Sep 17 00:00:00 2001
From: Lyka Labrada <lykalabrada@gmail.com>
Date: Mon, 14 Aug 2023 15:00:31 +0800
Subject: [PATCH] fix(ui-ux): display decoded bytes32 for contract output

---
 .../contract/ContractMethodResult.tsx          | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/pages/address/_components/contract/ContractMethodResult.tsx b/src/pages/address/_components/contract/ContractMethodResult.tsx
index 76aca211..09748782 100644
--- 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>