From 706fb425f5d965095a9bf98374d5da8ad71eeeaa Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 15 Sep 2021 15:58:37 -0300
Subject: [PATCH] Initial styling

---
 src/transaction/DecodedInput.tsx | 34 ++++++++++++++++++++++++++++++++
 src/transaction/Details.tsx      | 24 ++--------------------
 2 files changed, 36 insertions(+), 22 deletions(-)
 create mode 100644 src/transaction/DecodedInput.tsx

diff --git a/src/transaction/DecodedInput.tsx b/src/transaction/DecodedInput.tsx
new file mode 100644
index 0000000..f41406b
--- /dev/null
+++ b/src/transaction/DecodedInput.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { TransactionDescription } from "@ethersproject/abi";
+
+type DecodedInputProps = {
+  txDesc: TransactionDescription;
+};
+
+const DecodedInput: React.FC<DecodedInputProps> = ({ txDesc }) => (
+  <table className="border rounded">
+    <thead className="grid grid-cols-12 text-left gap-x-1 py-2 bg-gray-100">
+      <th className="col-span-3 pl-1">
+        param <span className="text-gray-400 text-xs">(index)</span>
+      </th>
+      <th className="col-span-1">type</th>
+      <th className="col-span-8 pr-1">value</th>
+    </thead>
+    <tbody className="divide-y">
+      {txDesc.args.map((r, i) => (
+        <tr key={i} className="grid grid-cols-12 gap-x-1 py-2">
+          <td className="col-span-3 pl-1">
+            {txDesc.functionFragment.inputs[i].name}{" "}
+            <span className="text-gray-400 text-xs">({i})</span>
+          </td>
+          <td className="col-span-1">
+            {txDesc.functionFragment.inputs[i].type}
+          </td>
+          <td className="col-span-8 pr-1 font-code break-all">{r}</td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+);
+
+export default React.memo(DecodedInput);
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index cca0ea1..f2cebce 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -30,6 +30,7 @@ import PercentageBar from "../components/PercentageBar";
 import ExternalLink from "../components/ExternalLink";
 import RelativePosition from "../components/RelativePosition";
 import PercentagePosition from "../components/PercentagePosition";
+import DecodedInput from "./DecodedInput";
 
 type DetailsProps = {
   txData: TransactionData;
@@ -343,28 +344,7 @@ const Details: React.FC<DetailsProps> = ({
             </Tab>
           </Tab.List>
           <Tab.Panels>
-            <Tab.Panel>
-              {txDesc && (
-                <table>
-                  <thead>
-                    <th>#</th>
-                    <th>name</th>
-                    <th>type</th>
-                    <th>value</th>
-                  </thead>
-                  <tbody>
-                    {txDesc.args.map((r, i) => (
-                      <tr key={i}>
-                        <td>{i}</td>
-                        <td>{txDesc.functionFragment.inputs[i].name}</td>
-                        <td>{txDesc.functionFragment.inputs[i].type}</td>
-                        <td>{r}</td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              )}
-            </Tab.Panel>
+            <Tab.Panel>{txDesc && <DecodedInput txDesc={txDesc} />}</Tab.Panel>
             <Tab.Panel>
               <textarea
                 className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"