add contracts to contracts page

CashScript · Jun 4, 2024 · 2f16b3b · 2f16b3b
1 parent e8eb9d4
commit 2f16b3b
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 65 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -16,7 +16,7 @@ function App() {
   const [network, setNetwork] = useState<Network>('chipnet')
   const [wallets, setWallets] = useState<Wallet[]>([])
   const [artifacts, setArtifacts] = useState<Artifact[] | undefined>(undefined);
-  const [contract, setContract] = useState<Contract | undefined>(undefined)
+  const [contracts, setContracts] = useState<Contract[] | undefined>(undefined)
   const [utxos, setUtxos] = useState<Utxo[] | undefined>(undefined)
   const [balance, setBalance] = useState<bigint | undefined>(undefined)
   const [code, setCode] = useState<string>(
@@ -35,7 +35,7 @@ contract TransferWithTimeout(pubkey sender, pubkey recipient, int timeout) {
     }
 }
 `);
-
+  const contract = contracts?.[0] // TODO: delete this
   async function updateUtxosContract () {
     if (!contract) return
     setBalance(await contract.getBalance())
@@ -56,10 +56,10 @@ contract TransferWithTimeout(pubkey sender, pubkey recipient, int timeout) {
             <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} />
+            <NewContract artifacts={artifacts} network={network} setNetwork={setNetwork} utxos={utxos} balance={balance} contracts={contracts} setContracts={setContracts} updateUtxosContract={updateUtxosContract} />
           </Tab>
           <Tab eventKey="contracts" title="Contracts">
-            <Contracts artifacts={artifacts} network={network} setNetwork={setNetwork} utxos={utxos} balance={balance} contract={contract} setContract={setContract} updateUtxosContract={updateUtxosContract} />
+            <Contracts contracts={contracts} setContracts={setContracts} utxos={utxos} balance={balance} updateUtxosContract={updateUtxosContract} />
           </Tab>
           <Tab eventKey="wallets" title="Wallets">
             <WalletInfo network={network} wallets={wallets} setWallets={setWallets}/>

diff --git a/src/components/ContractCreation.tsx b/src/components/ContractCreation.tsx
@@ -1,25 +1,24 @@
 import React, { useState, useEffect } from 'react'
 import { Artifact, Contract, Argument, Network, ElectrumNetworkProvider, Utxo } from 'cashscript'
 import { InputGroup, Form, Button } from 'react-bootstrap'
-// import { QRFunc } from 'react-qrbtf'
 import { readAsType } from './shared'
-import CopyText from './shared/CopyText'
-import InfoUtxos from './InfoUtxos'
 
 interface Props {
   artifact?: Artifact
-  contract?: Contract
-  setContract: (contract?: Contract) => void
+  contracts?: Contract[]
+  setContracts: (contract?: Contract[]) => void
   network: Network
   utxos: Utxo[] | undefined
   balance: bigint | undefined
   updateUtxosContract: () => void
 }
 
-const ContractCreation: React.FC<Props> = ({ artifact, contract, setContract, network, balance, utxos, updateUtxosContract}) => {
+const ContractCreation: React.FC<Props> = ({ artifact, contracts, setContracts, network, balance, utxos, updateUtxosContract}) => {
   const [args, setArgs] = useState<Argument[]>([])
 
-  useEffect(() => {
+  const contract = contracts?.[0] // TODO: delete this
+
+  const resetInputFields = () => {
     // This code is suuper ugly but I haven't found any other way to clear the value
     // of the input fields.
     artifact?.constructorInputs.forEach((input, i) => {
@@ -31,7 +30,7 @@ const ContractCreation: React.FC<Props> = ({ artifact, contract, setContract, ne
     const newArgs = artifact?.constructorInputs.map(() => '') || []
 
     setArgs(newArgs)
-  }, [artifact])
+  }
 
   useEffect(() => {
     updateUtxosContract()
@@ -62,7 +61,9 @@ const ContractCreation: React.FC<Props> = ({ artifact, contract, setContract, ne
     try {
       const provider = new ElectrumNetworkProvider(network)
       const newContract = new Contract(artifact, args, { provider })
-      setContract(newContract)
+      setContracts([newContract, ...contracts ?? []])
+      alert("created contract!")
+      resetInputFields()
     } catch (e: any) {
       alert(e.message)
       console.error(e.message)
@@ -76,40 +77,6 @@ const ContractCreation: React.FC<Props> = ({ artifact, contract, setContract, ne
       <h5>{artifact?.contractName}</h5>
       <p>Initialise contract by providing contract arguments:</p>
       {constructorForm}
-      {contract !== undefined &&
-        <div style={{ margin: '5px', width: '100%' }}>
-          <div style={{ float: 'left', width: '70%' }}>
-            <strong>Contract address (p2sh32)</strong>
-            <CopyText>{contract.address}</CopyText>
-            <strong>Contract token address (p2sh32)</strong>
-            <CopyText>{contract.tokenAddress}</CopyText>
-            <strong>Contract utxos</strong>
-            {utxos == undefined? 
-              <p>loading ...</p>:
-              (<>
-              <p>{utxos.length} {utxos.length == 1 ? "utxo" : "utxos"}</p>
-              {utxos.length ? 
-                <details>
-                  <summary>Show utxos</summary>
-                  <div>
-                    <InfoUtxos utxos={utxos}/>
-                  </div>
-              </details> : null}
-              </>)
-            }
-            <strong>Total contract balance</strong>
-            {balance == undefined? 
-              <p>loading ...</p>:
-              <p>{balance.toString()} satoshis</p>
-            }
-            <strong>Contract size</strong>
-            <p>{contract.bytesize} bytes (max 520), {contract.opcount} opcodes (max 201)</p>
-          </div>
-          {/* <div style={{ float: 'left', width: '30%', paddingTop: '4%' }}>
-            <QRFunc value={contract.address} />
-          </div> */}
-        </div>
-      }
     </div>
   )
 }

diff --git a/src/components/ContractInfo.tsx b/src/components/ContractInfo.tsx
@@ -10,14 +10,16 @@ interface Props {
   balance: bigint | undefined
   utxos: Utxo[] | undefined
   updateUtxosContract: () => void
-  contract: Contract | undefined
-  setContract: (contract: Contract | undefined) => void
+  contracts: Contract[] | undefined
+  setContracts: (contract: Contract[] | undefined) => void
 }
 
-const ContractInfo: React.FC<Props> = ({ artifact, network, contract, setContract, utxos, balance, updateUtxosContract }) => {
+const ContractInfo: React.FC<Props> = ({ artifact, network, contracts, setContracts, utxos, balance, updateUtxosContract }) => {
   const [electrumClient, setElectrumClient] = useState<ElectrumClient | undefined>(undefined)
 
-  useEffect(() => setContract(undefined), [artifact])
+  const contract = contracts?.[0] // TODO: delete this
+
+  useEffect(() => setContracts(undefined), [artifact])
 
   async function initElectrumSubscription(){
     if(electrumClient) electrumClient?.disconnect()
@@ -42,11 +44,11 @@ const ContractInfo: React.FC<Props> = ({ artifact, network, contract, setContrac
 
   useEffect(() => {
     initElectrumSubscription()
-  }, [contract])
+  }, [contracts])
 
   return (
     <ColumnFlex>
-      <ContractCreation artifact={artifact} contract={contract} setContract={setContract} network={network} utxos={utxos} balance={balance} updateUtxosContract={updateUtxosContract}/>
+      <ContractCreation artifact={artifact} contracts={contracts} setContracts={setContracts} network={network} utxos={utxos} balance={balance} updateUtxosContract={updateUtxosContract}/>
     </ColumnFlex>
   )
 }

diff --git a/src/components/Contracts.tsx b/src/components/Contracts.tsx
@@ -1,18 +1,23 @@
 import React from 'react'
 import { Artifact, Contract, Network, Utxo } from 'cashscript'
+import CopyText from './shared/CopyText'
+import { Card } from 'react-bootstrap'
 
 interface Props {
-  artifacts?: Artifact[]
-  network: Network
-  setNetwork: (network: Network) => void
+  contracts: Contract[] | undefined
+  setContracts: (contract: Contract[] | undefined) => void
   balance: bigint | undefined
   utxos: Utxo[] | undefined
   updateUtxosContract: () => void
-  contract: Contract | undefined
-  setContract: (contract: Contract | undefined) => void
 }
 
-const Contracts: React.FC<Props> = ({ artifacts, network, setNetwork, contract, setContract, utxos, balance, updateUtxosContract }) => {
+const Contracts: React.FC<Props> = ({ contracts, setContracts, utxos, balance, updateUtxosContract }) => {
+
+  const removeContract = (contractToRemove: Contract) => {
+    const contractToRemoveAddress = contractToRemove.address;
+    const newContracts = contracts?.filter(contract => contract.address !== contractToRemoveAddress)
+    setContracts(newContracts)
+  }
 
   return (
     <div style={{
@@ -28,7 +33,45 @@ const Contracts: React.FC<Props> = ({ artifacts, network, setNetwork, contract,
       margin: "16px"
     }}>
       <h2>Contracts</h2>
-      hello world
+      {contracts == undefined ? <p>
+        No Contracts created yet...
+      </p>:null}
+      {contracts?.map(contract => (
+        <Card style={{ marginBottom: '10px' }} key={contract.address}>
+          <Card.Header style={{ display:"flex", justifyContent:"space-between"}}>
+            <div>{contract.name}</div>
+            <img src='./trash.svg' onClick={() => removeContract(contract)} style={{padding: "0px 6px", width: "fit-content", cursor:"pointer"}}/>
+          </Card.Header>
+          <Card.Body>
+            <div style={{ margin: '5px', width: '100%' }}>
+              <strong>Contract address (p2sh32)</strong>
+              <CopyText>{contract.address}</CopyText>
+              <strong>Contract token address (p2sh32)</strong>
+              <CopyText>{contract.tokenAddress}</CopyText>
+              <strong>Contract utxos</strong>
+              {utxos == undefined? 
+                <p>loading ...</p>:
+                (<>
+                <p>{utxos.length} {utxos.length == 1 ? "utxo" : "utxos"}</p>
+                {utxos.length ? 
+                  <details>
+                    <summary>Show utxos</summary>
+                    <div>
+                    </div>
+                </details> : null}
+                </>)
+              }
+              <strong>Total contract balance</strong>
+              {balance == undefined? 
+                <p>loading ...</p>:
+                <p>{balance.toString()} satoshis</p>
+              }
+              <strong>Contract size</strong>
+              <p>{contract.bytesize} bytes (max 520), {contract.opcount} opcodes (max 201)</p>
+            </div>
+          </Card.Body>
+        </Card>
+      ))}
     </div>
   )
 }

diff --git a/src/components/NewContract.tsx b/src/components/NewContract.tsx
@@ -10,11 +10,11 @@ interface Props {
   balance: bigint | undefined
   utxos: Utxo[] | undefined
   updateUtxosContract: () => void
-  contract: Contract | undefined
-  setContract: (contract: Contract | undefined) => void
+  contracts: Contract[] | undefined
+  setContracts: (contract: Contract[] | undefined) => void
 }
 
-const NewContract: React.FC<Props> = ({ artifacts, network, setNetwork, contract, setContract, utxos, balance, updateUtxosContract }) => {
+const NewContract: React.FC<Props> = ({ artifacts, network, setNetwork, contracts, setContracts, utxos, balance, updateUtxosContract }) => {
 
   const [selectedArifact, setSelectedArtifact] = useState<Artifact | undefined>(undefined);
 
@@ -76,11 +76,11 @@ const NewContract: React.FC<Props> = ({ artifacts, network, setNetwork, contract
             <span>Select target Network:</span> {networkSelector}
           </div>
           {selectedArifact !== undefined ?
-            <ContractInfo artifact={selectedArifact} network={network} utxos={utxos} balance={balance} contract={contract} setContract={setContract} updateUtxosContract={updateUtxosContract} />
+            <ContractInfo artifact={selectedArifact} network={network} utxos={utxos} balance={balance} contracts={contracts} setContracts={setContracts} updateUtxosContract={updateUtxosContract} />
             : null
           }
         </>
-        : <p> Create a Artifact first.</p>
+        : <p> Create an Artifact first.</p>
       }
     </div>
   )