Extract ABI parent component

src/address/ContractABI.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Copy from "../components/Copy";
+import RawABI from "./RawABI";
+
+type ContractABIProps = {
+  abi: any[];
+};
+
+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} />
+  </div>
+);
+
+export default React.memo(ContractABI);

src/address/Contracts.tsx

@@ -5,13 +5,12 @@ 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 Copy from "../components/Copy";
-import ABI from "./ABI";
 import Contract from "./Contract";
 import { RuntimeContext } from "../useRuntime";
 import { Metadata } from "../useSourcify";
 import ExternalLink from "../components/ExternalLink";
 import { openInRemixURL } from "../url";
+import ContractABI from "./ContractABI";
 
 type ContractsProps = {
   checksummedAddress: string;
@@ -70,13 +69,7 @@ const Contracts: React.FC<ContractsProps> = ({
         {rawMetadata !== undefined && rawMetadata !== null && (
           <>
             {rawMetadata.output.abi && (
-              <div className="mb-3">
+              <ContractABI abi={rawMetadata.output.abi} />
-                <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(rawMetadata.output.abi)} />
-                </div>
-                <ABI abi={rawMetadata.output.abi} />
-              </div>
             )}
             <div>
               <Menu>

src/address/RawABI.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { SyntaxHighlighter, docco } from "../highlight-init";
 
-type ABIProps = {
+type RawABIProps = {
   abi: any[];
 };
 
-const ABI: React.FC<ABIProps> = ({ abi }) => (
+const RawABI: React.FC<RawABIProps> = ({ abi }) => (
   <SyntaxHighlighter
     className="w-full h-60 border font-code text-base"
     language="json"
@@ -16,4 +16,4 @@ const ABI: React.FC<ABIProps> = ({ abi }) => (
   </SyntaxHighlighter>
 );
 
-export default React.memo(ABI);
+export default React.memo(RawABI);