First parsed ABI UI prototype

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">
+    <Tab.Group>
-      <span>ABI</span>
+      <Tab.List className="flex space-x-1 mb-1">
-      <Copy value={JSON.stringify(abi)} />
+        <ModeTab>Decoded</ModeTab>
-    </div>
+        <ModeTab>Raw</ModeTab>
-    <RawABI abi={abi} />
+      </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>
 );
 

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);

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);