From 02261f264abd36bb9d3ca78c1eec7f79e8d06e43 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 25 Oct 2021 01:29:50 -0300
Subject: [PATCH] First parsed ABI UI prototype

---
 src/address/ContractABI.tsx     | 26 ++++++++++++---
 src/address/DecodedABI.tsx      | 20 ++++++++++++
 src/address/DecodedFragment.tsx | 57 +++++++++++++++++++++++++++++++++
 3 files changed, 98 insertions(+), 5 deletions(-)
 create mode 100644 src/address/DecodedABI.tsx
 create mode 100644 src/address/DecodedFragment.tsx

diff --git a/src/address/ContractABI.tsx b/src/address/ContractABI.tsx
index 2f079de..086d92c 100644
--- a/src/address/ContractABI.tsx
+++ b/src/address/ContractABI.tsx
@@ -1,5 +1,8 @@
 import React from "react";
+import { Tab } from "@headlessui/react";
+import ModeTab from "../components/ModeTab";
 import Copy from "../components/Copy";
+import DecodedABI from "./DecodedABI";
 import RawABI from "./RawABI";
 
 type ContractABIProps = {
@@ -8,11 +11,24 @@ type ContractABIProps = {
 
 const ContractABI: React.FC<ContractABIProps> = ({ abi }) => (
   <div className="mb-3">
-    <div className="flex space-x-2 text-sm border-l border-r border-t rounded-t px-2 py-1">
-      <span>ABI</span>
-      <Copy value={JSON.stringify(abi)} />
-    </div>
-    <RawABI abi={abi} />
+    <Tab.Group>
+      <Tab.List className="flex space-x-1 mb-1">
+        <ModeTab>Decoded</ModeTab>
+        <ModeTab>Raw</ModeTab>
+      </Tab.List>
+      <Tab.Panels>
+        <Tab.Panel>
+          <DecodedABI abi={abi} />
+        </Tab.Panel>
+        <Tab.Panel>
+          <div className="flex space-x-2 text-sm border-l border-r border-t rounded-t px-2 py-1">
+            <span>ABI</span>
+            <Copy value={JSON.stringify(abi)} />
+          </div>
+          <RawABI abi={abi} />
+        </Tab.Panel>
+      </Tab.Panels>
+    </Tab.Group>
   </div>
 );
 
diff --git a/src/address/DecodedABI.tsx b/src/address/DecodedABI.tsx
new file mode 100644
index 0000000..1de994d
--- /dev/null
+++ b/src/address/DecodedABI.tsx
@@ -0,0 +1,20 @@
+import { Interface } from "@ethersproject/abi";
+import React from "react";
+import DecodedFragment from "./DecodedFragment";
+
+type DecodedABIProps = {
+  abi: any[];
+};
+
+const DecodedABI: React.FC<DecodedABIProps> = ({ abi }) => {
+  const intf = new Interface(abi);
+  return (
+    <div className="mt-3 space-y-2">
+      {intf.fragments.map((f, i) => (
+        <DecodedFragment key={i} intf={intf} fragment={f} />
+      ))}
+    </div>
+  );
+};
+
+export default React.memo(DecodedABI);
diff --git a/src/address/DecodedFragment.tsx b/src/address/DecodedFragment.tsx
new file mode 100644
index 0000000..33e694c
--- /dev/null
+++ b/src/address/DecodedFragment.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import {
+  ConstructorFragment,
+  EventFragment,
+  Fragment,
+  FunctionFragment,
+  Interface,
+} from "@ethersproject/abi";
+
+type DecodedFragmentProps = {
+  intf: Interface;
+  fragment: Fragment;
+};
+
+const DecodedFragment: React.FC<DecodedFragmentProps> = ({
+  intf,
+  fragment,
+}) => {
+  let sig: string | undefined;
+  let letter: string | undefined;
+  let letterBg: string | undefined;
+
+  if (FunctionFragment.isFunctionFragment(fragment)) {
+    sig = intf.getSighash(fragment);
+    letter = "F";
+    letterBg = "bg-purple-500";
+  } else if (EventFragment.isEventFragment(fragment)) {
+    sig = intf.getEventTopic(fragment);
+    letter = "E";
+    letterBg = "bg-green-300";
+  } else if (ConstructorFragment.isConstructorFragment(fragment)) {
+    letter = "C";
+    letterBg = "bg-blue-500";
+  }
+
+  return (
+    <div className="flex items-baseline space-x-1">
+      {letter && (
+        <span
+          className={`flex-shrink-0 text-xs font-code border border-gray-300 rounded-full w-5 h-5 self-center flex items-center justify-center text-white font-bold ${letterBg}`}
+        >
+          {letter}
+        </span>
+      )}
+      <span className="text-sm font-code whitespace-nowrap">
+        {fragment.format("full")}
+      </span>
+      {sig && (
+        <span className="text-xs border rounded-xl px-2 pt-1 font-code">
+          {sig}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default React.memo(DecodedFragment);