From 022ff359755e9e98af16a2d7434826617602fa98 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Tue, 10 Aug 2021 16:26:00 -0300
Subject: [PATCH] Add decode to utf-8 input option

---
 src/transaction/Details.tsx | 44 ++++++++++++++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 6a1f4d6..500d45e 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useMemo, useState } from "react";
 import { formatEther } from "@ethersproject/units";
+import { toUtf8String } from "@ethersproject/strings";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
 import { faCube } from "@fortawesome/free-solid-svg-icons/faCube";
@@ -40,6 +41,17 @@ const Details: React.FC<DetailsProps> = ({
   const hasEIP1559 =
     txData.blockBaseFeePerGas !== undefined &&
     txData.blockBaseFeePerGas !== null;
+  const [inputMode, setInputMode] = useState<number>(0);
+
+  const utfInput = useMemo(() => {
+    try {
+      return txData && toUtf8String(txData.data);
+    } catch (err) {
+      console.error("Error while converting input data to string");
+      console.error(err);
+      return "<can't decode>";
+    }
+  }, [txData]);
 
   return (
     <ContentFrame tabs>
@@ -252,11 +264,31 @@ const Details: React.FC<DetailsProps> = ({
       </InfoRow>
       <InfoRow title="Ether Price">N/A</InfoRow>
       <InfoRow title="Input Data">
-        <textarea
-          className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
-          value={txData.data}
-          readOnly
-        />
+        <div className="space-y-1">
+          <div className="flex space-x-1">
+            <button
+              className={`border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
+                inputMode === 0 ? "border-blue-300" : ""
+              }`}
+              onClick={() => setInputMode(0)}
+            >
+              Raw
+            </button>
+            <button
+              className={`border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
+                inputMode === 1 ? "border-blue-300" : ""
+              }`}
+              onClick={() => setInputMode(1)}
+            >
+              UTF-8
+            </button>
+          </div>
+          <textarea
+            className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
+            value={inputMode === 0 ? txData.data : utfInput}
+            readOnly
+          />
+        </div>
       </InfoRow>
     </ContentFrame>
   );