load artifact code

src/components/App.tsx

@@ -19,6 +19,22 @@ function App() {
   const [contract, setContract] = useState<Contract | undefined>(undefined)
   const [utxos, setUtxos] = useState<Utxo[] | undefined>(undefined)
   const [balance, setBalance] = useState<bigint | undefined>(undefined)
+  const [code, setCode] = useState<string>(
+`pragma cashscript >= 0.8.0;
+    
+contract TransferWithTimeout(pubkey sender, pubkey recipient, int timeout) {
+    // Require recipient's signature to match
+    function transfer(sig recipientSig) {
+        require(checkSig(recipientSig, recipient));
+    }
+    
+    // Require timeout time to be reached and sender's signature to match
+    function timeout(sig senderSig) {
+        require(checkSig(senderSig, sender));
+        require(tx.time >= timeout);
+    }
+}
+`);
 
   async function updateUtxosContract () {
     if (!contract) return
@@ -37,7 +53,7 @@ function App() {
           style={{ display: "inline-flex", marginLeft: "calc(100vw - 1100px)" }}
         >
           <Tab eventKey="editor" title="Editor">
-            <Main artifacts={artifacts} setArtifacts={setArtifacts} />
+            <Main code={code} setCode={setCode} artifacts={artifacts} setArtifacts={setArtifacts} />
           </Tab>
           <Tab eventKey="newcontract" title="New Contract">
             <NewContract artifacts={artifacts} network={network} setNetwork={setNetwork} utxos={utxos} balance={balance} contract={contract} setContract={setContract} updateUtxosContract={updateUtxosContract} />

src/components/ArtifactsInfo.tsx

@@ -1,12 +1,14 @@
 import React from 'react'
 import { Artifact } from 'cashscript'
+import { Button } from 'react-bootstrap'
 
 interface Props {
+  setCode: (code: string) => void
   artifacts?: Artifact[]
   setArtifacts: (artifacts: Artifact[] | undefined) => void
 }
 
-const ContractInfo: React.FC<Props> = ({ artifacts, setArtifacts }) => {
+const ContractInfo: React.FC<Props> = ({ setCode, artifacts, setArtifacts }) => {
 
   const downloadArtifact = (artifact: Artifact) => {
     const element = document.createElement('a');
@@ -24,6 +26,11 @@ const ContractInfo: React.FC<Props> = ({ artifacts, setArtifacts }) => {
     setArtifacts(newArtifacts)
   }
 
+  const loadArtifact = (artifact: Artifact) => {
+    console.log(artifact.source)
+    setCode(artifact.source)
+  }
+
   return (
     <div style={{
       flex: 2,
@@ -71,6 +78,10 @@ const ContractInfo: React.FC<Props> = ({ artifacts, setArtifacts }) => {
                 download JSON file
                 <img src='./downloadIcon.svg' style={{marginLeft:"5px", verticalAlign: "text-bottom", cursor:"pointer"}}/>
               </p>
+              <strong>Load Contract to Editor</strong>
+              <Button variant="secondary" size="sm" style={{display:"block"}} onClick={() => loadArtifact(artifact)}>
+                Load Artifact
+              </Button>
             </div>
           </details>
           ))}

src/components/Editor.tsx

@@ -26,7 +26,7 @@ const Editor: React.FC<Props> = ({ code, setCode, compile, needRecompile }) => {
         language="sol"
         value={code}
         theme="light"
-        onChange={(ev: any, code?: string) => code && setCode(code)}
+        onChange={(ev: any, code?: string) => setCode(code?? "") }
         editorDidMount={handleEditorDidMount}
       />
       <Button

src/components/Main.tsx

@@ -1,32 +1,18 @@
 import React, { useState, useEffect } from 'react';
-import { Artifact, Utxo } from 'cashscript';
+import { Artifact } from 'cashscript';
 import { compileString } from 'cashc';
 import { RowFlex } from './shared';
 import Editor from './Editor';
 import ArtifactsInfo from './ArtifactsInfo';
 
 interface Props {
+  code: string
+  setCode: (code: string) => void
   artifacts: Artifact[] | undefined
   setArtifacts: (artifacts: Artifact[] | undefined) => void
 }
 
-const Main: React.FC<Props> = ({artifacts, setArtifacts}) => {
-  const [code, setCode] = useState<string>(
-`pragma cashscript >= 0.8.0;
-
-contract TransferWithTimeout(pubkey sender, pubkey recipient, int timeout) {
-    // Require recipient's signature to match
-    function transfer(sig recipientSig) {
-        require(checkSig(recipientSig, recipient));
-    }
-
-    // Require timeout time to be reached and sender's signature to match
-    function timeout(sig senderSig) {
-        require(checkSig(senderSig, sender));
-        require(tx.time >= timeout);
-    }
-}
-`);
+const Main: React.FC<Props> = ({code, setCode, artifacts, setArtifacts}) => {
 
   const [needRecompile, setNeedRecompile] = useState<boolean>(true);
   /*
@@ -58,12 +44,16 @@ contract TransferWithTimeout(pubkey sender, pubkey recipient, int timeout) {
       localStorage.setItem("code", code);
       const newArtifact = compileString(code);
       const nameNewArtifact = newArtifact.contractName
+      const sameArifactExists = artifacts?.find(artifact => nameNewArtifact === artifact.contractName)
+      if(sameArifactExists){
+        const confirmOverwrite = confirm("About to overwite existing artifact with same name")
+        if(!confirmOverwrite) return
+      }
       const newArtifacts = artifacts?.filter(artifact => artifact.contractName !== nameNewArtifact)
       setArtifacts([newArtifact, ...newArtifacts ?? []]);
     } catch (e: any) {
       alert(e.message);
       console.error(e.message);
-      setArtifacts(undefined);
     }
   }
 
@@ -73,7 +63,7 @@ contract TransferWithTimeout(pubkey sender, pubkey recipient, int timeout) {
       height: 'calc(100vh - 140px)'
     }}>
       <Editor code={code} setCode={setCode} compile={compile} needRecompile={needRecompile}/>
-      <ArtifactsInfo artifacts={artifacts} setArtifacts={setArtifacts}/>
+      <ArtifactsInfo setCode={setCode} artifacts={artifacts} setArtifacts={setArtifacts}/>
     </RowFlex>
   )
 }