From 99bcaaae0e7f1fdc67db6aa8338b1d450c95f725 Mon Sep 17 00:00:00 2001
From: Mathieu Geukens <mr-zwets@protonmail.com>
Date: Sun, 2 Jun 2024 10:07:19 +0200
Subject: [PATCH] mutliple contract artifacts

---
 src/components/App.tsx           |  6 +--
 src/components/ArtifactsInfo.tsx | 70 +++++++++++++++++++++-----------
 src/components/Main.tsx          | 19 +++++----
 3 files changed, 60 insertions(+), 35 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 5bd423e..7237889 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -14,7 +14,7 @@ import ContractFunctions from './ContractFunctions'
 function App() {
   const [network, setNetwork] = useState<Network>('chipnet')
   const [wallets, setWallets] = useState<Wallet[]>([])
-  const [artifact, setArtifact] = useState<Artifact | undefined>(undefined);
+  const [artifacts, setArtifacts] = useState<Artifact[] | undefined>(undefined);
   const [contract, setContract] = useState<Contract | undefined>(undefined)
   const [utxos, setUtxos] = useState<Utxo[] | undefined>(undefined)
   const [balance, setBalance] = useState<bigint | undefined>(undefined)
@@ -36,16 +36,14 @@ function App() {
           style={{ display: "inline-flex", marginLeft: "calc(100vw - 1000px)" }}
         >
           <Tab eventKey="editor" title="Editor">
-            <Main artifact={artifact} setArtifact={setArtifact} />
+            <Main artifacts={artifacts} setArtifacts={setArtifacts} />
           </Tab>
           <Tab eventKey="contract" title="Contract">
-            <ContractInfo artifact={artifact} network={network} setNetwork={setNetwork} utxos={utxos} balance={balance} contract={contract} setContract={setContract} updateUtxosContract={updateUtxosContract} />
           </Tab>
           <Tab eventKey="wallets" title="Wallets">
             <WalletInfo network={network} wallets={wallets} setWallets={setWallets}/>
           </Tab>
           <Tab eventKey="transactionBuilder" title="TransactionBuilder">
-            <ContractFunctions artifact={artifact} contract={contract} network={network} wallets={wallets} contractUtxos={utxos} updateUtxosContract={updateUtxosContract} />
           </Tab>
         </Tabs>
       </div>
diff --git a/src/components/ArtifactsInfo.tsx b/src/components/ArtifactsInfo.tsx
index 2ddb331..87c60af 100644
--- a/src/components/ArtifactsInfo.tsx
+++ b/src/components/ArtifactsInfo.tsx
@@ -2,13 +2,13 @@ import React from 'react'
 import { Artifact } from 'cashscript'
 
 interface Props {
-  artifact?: Artifact
+  artifacts?: Artifact[]
+  setArtifacts: (artifacts: Artifact[] | undefined) => void
 }
 
-const ContractInfo: React.FC<Props> = ({ artifact }) => {
+const ContractInfo: React.FC<Props> = ({ artifacts, setArtifacts }) => {
 
-  const downloadArtifact = () => {
-    if(!artifact) return
+  const downloadArtifact = (artifact: Artifact) => {
     const element = document.createElement('a');
     element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(artifact, null, 2)));
     element.setAttribute('download', `${artifact.contractName}.json`);
@@ -18,6 +18,12 @@ const ContractInfo: React.FC<Props> = ({ artifact }) => {
     document.body.removeChild(element);
   }
 
+  const removeArtifact = (artifactToRemove: Artifact) => {
+    const artifactToRemoveName = artifactToRemove.contractName;
+    const newArtifacts = artifacts?.filter(artifact => artifact.contractName !== artifactToRemoveName)
+    setArtifacts(newArtifacts)
+  }
+
   return (
     <div style={{
       flex: 2,
@@ -30,26 +36,44 @@ const ContractInfo: React.FC<Props> = ({ artifact }) => {
       background: '#fffffe',
       padding: '8px 16px',
       color: '#000'
-    }}>{ artifact?
+    }}>{ artifacts?.length?
       (<div>
-        <h2>Artifact {artifact.contractName}</h2>
-        <strong>Last Updated</strong>
-        <p>{artifact.updatedAt}</p>
-        <strong>Artifact Bytecode</strong>
-        <details>
-          <summary>
-            show full Bytecode
-          </summary>
-          {artifact.bytecode}
-        </details>
-        <strong>Compiler Version</strong>
-        <p>{artifact.compiler.version}</p>
-        <strong>Download Artifact</strong>
-        <p onClick={downloadArtifact}>
-          download JSON file
-          <img src='./downloadIcon.svg' style={{marginLeft:"5px", verticalAlign: "text-bottom", cursor:"pointer"}}/>
-        </p>
-      </div>) : 
+        <h2>Contract Artifacts</h2>
+        {artifacts.map(artifact => (
+          <details key={artifact.contractName} style={{margin:"10px 0"}}>
+            <summary style={{fontSize: "1rem"}}>
+              {artifact.contractName}
+              <div style={{float:"right"}}>
+                <img
+                  src='./trash.svg'
+                  onClick={() => removeArtifact(artifact)}
+                  style={{padding: "0px 6px", width: "fit-content", cursor:"pointer"}}
+                  alt='trashIcon'
+                />
+              </div>
+            </summary>
+          
+            <div style={{paddingLeft: "15px"}}>
+              <strong>Last Updated</strong>
+              <p>{artifact.updatedAt}</p>
+              <strong>Artifact Bytecode</strong>
+              <details>
+                <summary>
+                  show full Bytecode
+                </summary>
+                {artifact.bytecode}
+              </details>
+              <strong>Compiler Version</strong>
+              <p>{artifact.compiler.version}</p>
+              <strong>Download Artifact</strong>
+              <p onClick={() => downloadArtifact(artifact)}>
+                download JSON file
+                <img src='./downloadIcon.svg' style={{marginLeft:"5px", verticalAlign: "text-bottom", cursor:"pointer"}}/>
+              </p>
+            </div>
+          </details>
+          ))}
+        </div>) : 
       <div>Compile a CashScript contract to get started!</div> }
     </div>
   )
diff --git a/src/components/Main.tsx b/src/components/Main.tsx
index ce1a7c7..e824132 100644
--- a/src/components/Main.tsx
+++ b/src/components/Main.tsx
@@ -6,11 +6,11 @@ import Editor from './Editor';
 import ArtifactsInfo from './ArtifactsInfo';
 
 interface Props {
-  artifact: Artifact | undefined
-  setArtifact: (artifact: Artifact | undefined) => void
+  artifacts: Artifact[] | undefined
+  setArtifacts: (artifacts: Artifact[] | undefined) => void
 }
 
-const Main: React.FC<Props> = ({artifact, setArtifact}) => {
+const Main: React.FC<Props> = ({artifacts, setArtifacts}) => {
   const [code, setCode] = useState<string>(
 `pragma cashscript >= 0.8.0;
 
@@ -29,7 +29,7 @@ contract TransferWithTimeout(pubkey sender, pubkey recipient, int timeout) {
 `);
 
   const [needRecompile, setNeedRecompile] = useState<boolean>(true);
-
+  /*
   useEffect(() => {
     const codeLocalStorage = localStorage.getItem("code");
     // If code exits in local storage, set it as new code
@@ -51,16 +51,19 @@ contract TransferWithTimeout(pubkey sender, pubkey recipient, int timeout) {
     const changedCashScriptCode = previousCode!= code;
     setNeedRecompile(changedCashScriptCode);
   },[code, needRecompile, artifact])
+  */
 
   function compile() {
     try {
       localStorage.setItem("code", code);
-      const artifact = compileString(code);
-      setArtifact(artifact);
+      const newArtifact = compileString(code);
+      const nameNewArtifact = newArtifact.contractName
+      const newArtifacts = artifacts?.filter(artifact => artifact.contractName !== nameNewArtifact)
+      setArtifacts([newArtifact, ...newArtifacts ?? []]);
     } catch (e: any) {
       alert(e.message);
       console.error(e.message);
-      setArtifact(undefined);
+      setArtifacts(undefined);
     }
   }
 
@@ -70,7 +73,7 @@ contract TransferWithTimeout(pubkey sender, pubkey recipient, int timeout) {
       height: 'calc(100vh - 140px)'
     }}>
       <Editor code={code} setCode={setCode} compile={compile} needRecompile={needRecompile}/>
-      <ArtifactsInfo artifact={artifact} />
+      <ArtifactsInfo artifacts={artifacts} setArtifacts={setArtifacts}/>
     </RowFlex>
   )
 }