Add abi section

src/address/ABI.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+import hljs from "highlight.js";
+import docco from "react-syntax-highlighter/dist/esm/styles/hljs/docco";
+
+import hljsDefineSolidity from "highlightjs-solidity";
+hljsDefineSolidity(hljs);
+
+type ABIProps = {
+  abi: any[];
+};
+
+const ABI: React.FC<ABIProps> = ({ abi }) => (
+  <SyntaxHighlighter
+    className="w-full h-60 border font-code text-base"
+    language="json"
+    style={docco}
+    showLineNumbers
+  >
+    {JSON.stringify(abi, null, "  ") ?? ""}
+  </SyntaxHighlighter>
+);
+
+export default React.memo(ABI);

src/address/Contract.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
 import hljs from "highlight.js";
 import docco from "react-syntax-highlighter/dist/esm/styles/hljs/docco";
+import { useContract } from "../useSourcify";
 
 import hljsDefineSolidity from "highlightjs-solidity";
-import { useContract } from "../useSourcify";
 hljsDefineSolidity(hljs);
 
 type ContractProps = {

src/address/Contracts.tsx

@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
 import ContentFrame from "../ContentFrame";
 import InfoRow from "../components/InfoRow";
+import ABI from "./ABI";
 import Contract from "./Contract";
 import { RuntimeContext } from "../useRuntime";
 import { Metadata } from "../useSourcify";
@@ -82,6 +83,15 @@ const Contracts: React.FC<ContractsProps> = ({
           </span>
         )}
         {rawMetadata !== undefined && rawMetadata !== null && (
+          <>
+            {rawMetadata.output.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">
+                  ABI
+                </div>
+                <ABI abi={rawMetadata.output.abi} />
+              </div>
+            )}
             <div>
               <Menu>
                 <div className="flex space-x-2 justify-between items-baseline">
@@ -133,6 +143,7 @@ const Contracts: React.FC<ContractsProps> = ({
                 />
               )}
             </div>
+          </>
         )}
       </div>
     </ContentFrame>