From d7ba5f09fd2b69808bd3b4f19337de3acf250b12 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sun, 24 Oct 2021 23:04:04 -0300
Subject: [PATCH] Extract ABI parent component

---
 src/address/ContractABI.tsx         | 19 +++++++++++++++++++
 src/address/Contracts.tsx           | 11 ++---------
 src/address/{ABI.tsx => RawABI.tsx} |  6 +++---
 3 files changed, 24 insertions(+), 12 deletions(-)
 create mode 100644 src/address/ContractABI.tsx
 rename src/address/{ABI.tsx => RawABI.tsx} (74%)

diff --git a/src/address/ContractABI.tsx b/src/address/ContractABI.tsx
new file mode 100644
index 0000000..2f079de
--- /dev/null
+++ b/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);
diff --git a/src/address/Contracts.tsx b/src/address/Contracts.tsx
index 0745d73..dbaaf83 100644
--- a/src/address/Contracts.tsx
+++ b/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">
-                <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>
+              <ContractABI abi={rawMetadata.output.abi} />
             )}
             <div>
               <Menu>
diff --git a/src/address/ABI.tsx b/src/address/RawABI.tsx
similarity index 74%
rename from src/address/ABI.tsx
rename to src/address/RawABI.tsx
index a714367..bc07e81 100644
--- a/src/address/ABI.tsx
+++ b/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);