From 573da29d9ee45cbd728d9fc2431e228726b44787 Mon Sep 17 00:00:00 2001
From: Mathieu Geukens <mr-zwets@protonmail.com>
Date: Tue, 17 Sep 2024 11:34:07 +0200
Subject: [PATCH] add mocknet

---
 src/components/App.tsx              | 10 +++++-----
 src/components/ContractFunction.tsx | 15 +++++++++++----
 src/components/Contracts.tsx        | 25 +++++++++++++++++++++++--
 src/components/NewContract.tsx      |  9 ++++++---
 src/components/Wallets.tsx          | 27 +++++++++++++++++++++++----
 5 files changed, 68 insertions(+), 18 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 4834628..b5234bd 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,6 +1,6 @@
 // Components
 import React, { useState } from 'react';
-import { Artifact, ElectrumNetworkProvider, NetworkProvider } from 'cashscript';
+import { Artifact, MockNetworkProvider, NetworkProvider } from 'cashscript';
 import Header from './Header'
 import Main from './Main'
 import Footer from './Footer';
@@ -13,7 +13,7 @@ import Contracts from './Contracts';
 import TransactionBuilder from './TransactionBuilder';
 
 function App() {
-  const [provider, setProvider] = useState<NetworkProvider>(new ElectrumNetworkProvider("chipnet"))
+  const [provider, setProvider] = useState<NetworkProvider>(new MockNetworkProvider())
   const [wallets, setWallets] = useState<Wallet[]>([])
   const [artifacts, setArtifacts] = useState<Artifact[] | undefined>(undefined);
   const [contracts, setContracts] = useState<ContractInfo[] | undefined>(undefined)
@@ -41,7 +41,7 @@ contract TransferWithTimeout(pubkey sender, pubkey recipient, int timeout) {
     if (!currentContract) return
     // create a separate lists for utxos and mutate entry
     const utxosList = contracts.map(contract => contract.utxos ?? [])
-    const contractUtxos = await currentContract.getUtxos();
+    const contractUtxos = await provider.getUtxos(currentContract.address);
     utxosList[contractIndex] = contractUtxos
     // map is the best way to deep clone array of complex objects
     const newContracts: ContractInfo[] = contracts.map((contractInfo,index) => (
@@ -54,7 +54,7 @@ contract TransferWithTimeout(pubkey sender, pubkey recipient, int timeout) {
     if(!contracts) return
 
     const utxosPromises = contracts.map(contractInfo => {
-      const contractUtxos = contractInfo.contract.getUtxos();
+      const contractUtxos = provider.getUtxos(contractInfo.contract.address);
       return contractUtxos ?? []
     })
     const utxosContracts = await Promise.all(utxosPromises)
@@ -82,7 +82,7 @@ contract TransferWithTimeout(pubkey sender, pubkey recipient, int timeout) {
             <NewContract artifacts={artifacts} provider={provider} setProvider={setProvider} contracts={contracts} setContracts={setContracts} updateUtxosContract={updateUtxosContract} />
           </Tab>
           <Tab eventKey="contracts" title="Contracts">
-            <Contracts contracts={contracts} setContracts={setContracts} updateUtxosContract={updateUtxosContract} />
+            <Contracts provider={provider} contracts={contracts} setContracts={setContracts} updateUtxosContract={updateUtxosContract} />
           </Tab>
           <Tab eventKey="wallets" title="Wallets">
             <WalletInfo provider={provider} wallets={wallets} setWallets={setWallets}/>
diff --git a/src/components/ContractFunction.tsx b/src/components/ContractFunction.tsx
index 36c5054..47e8ac9 100644
--- a/src/components/ContractFunction.tsx
+++ b/src/components/ContractFunction.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { AbiFunction, NetworkProvider, FunctionArgument, Recipient, SignatureTemplate } from 'cashscript'
+import { AbiFunction, NetworkProvider, FunctionArgument, Recipient, SignatureTemplate, MockNetworkProvider } from 'cashscript'
 import { Form, InputGroup, Button, Card } from 'react-bootstrap'
 import { readAsType, ExplorerString, Wallet, NamedUtxo, ContractInfo } from './shared'
 
@@ -289,10 +289,17 @@ const ContractFunction: React.FC<Props> = ({ contractInfo, abi, provider, wallet
       // if noAutomaticChange is enabled, add this to the transaction in construction
       if (noAutomaticChange) transaction.withoutChange().withoutTokenChange()
       transaction.to(outputs)
-      const { txid } = await transaction.send()
 
-      alert(`Transaction successfully sent: ${ExplorerString[provider.network]}/tx/${txid}`)
-      console.log(`Transaction successfully sent: ${ExplorerString[provider.network]}/tx/${txid}`)
+      // check for mocknet
+      if(provider instanceof MockNetworkProvider){
+        await transaction.debug()
+        alert(`Transaction evalution passed! Bitauth IDE link: ${await transaction.bitauthUri()}`)
+        console.log(`Transaction evalution passed! Bitauth IDE link: ${await transaction.bitauthUri()}`)
+      } else {
+        const { txid } = await transaction.send()
+        alert(`Transaction successfully sent: ${ExplorerString[provider.network]}/tx/${txid}`)
+        console.log(`Transaction successfully sent: ${ExplorerString[provider.network]}/tx/${txid}`)
+      }
       updateUtxosContract(contract.name)
     } catch (e: any) {
       alert(e.message)
diff --git a/src/components/Contracts.tsx b/src/components/Contracts.tsx
index fd20c85..a31f5de 100644
--- a/src/components/Contracts.tsx
+++ b/src/components/Contracts.tsx
@@ -3,14 +3,16 @@ import CopyText from './shared/CopyText'
 import { Card, Button } from 'react-bootstrap'
 import { ContractInfo } from './shared'
 import InfoUtxos from './InfoUtxos'
+import { MockNetworkProvider, NetworkProvider, randomUtxo } from 'cashscript'
 
 interface Props {
+  provider: NetworkProvider
   contracts: ContractInfo[] | undefined
   setContracts: (contract: ContractInfo[] | undefined) => void
   updateUtxosContract: (contractName: string) => void
 }
 
-const Contracts: React.FC<Props> = ({ contracts, setContracts, updateUtxosContract }) => {
+const Contracts: React.FC<Props> = ({ provider, contracts, setContracts, updateUtxosContract }) => {
 
   const removeContract = (contractInfo: ContractInfo) => {
     const contractToRemove = contractInfo.contract
@@ -19,6 +21,12 @@ const Contracts: React.FC<Props> = ({ contracts, setContracts, updateUtxosContra
     setContracts(newContracts)
   }
 
+  const addRandomUtxo = (contractInfo:ContractInfo) => {
+    if(!(provider instanceof MockNetworkProvider)) return
+    provider.addUtxo(contractInfo.contract.address, randomUtxo())
+    updateUtxosContract(contractInfo.contract.name)
+  }
+
   return (
     <div style={{
       height: 'calc(100vh - 170px)',
@@ -66,9 +74,11 @@ const Contracts: React.FC<Props> = ({ contracts, setContracts, updateUtxosContra
                 <p>loading ...</p>:
                 (<div>
                   {contractInfo?.utxos.length} {contractInfo?.utxos.length == 1 ? "utxo" : "utxos"}
-                  <span onClick={() => {}} style={{cursor:"pointer", marginLeft:"10px"}}>
+                  { undefined === (provider as MockNetworkProvider)?.addUtxo ? (<>
+                    <span onClick={() => {}} style={{cursor:"pointer", marginLeft:"10px"}}>
                     <Button size='sm' onClick={() => updateUtxosContract(contractInfo.contract.name)} variant='secondary' style={{padding:" 0px 2px"}}>refresh ⭯</Button>
                   </span>
+                  </>) : null}
                   {contractInfo.utxos.length ? 
                     <details>
                       <summary>Show utxos</summary>
@@ -78,6 +88,17 @@ const Contracts: React.FC<Props> = ({ contracts, setContracts, updateUtxosContra
                   </details> : null}
                 </div>)
               }
+              { undefined !== (provider as MockNetworkProvider)?.addUtxo ? (
+                <div>
+                  <strong>Create new contract utxo</strong>
+                  <div onClick={() => addRandomUtxo(contractInfo)} style={{cursor:"pointer"}}>
+                    <Button size='sm' variant='secondary' style={{padding:" 0px 2px"}}>add random utxo</Button>
+                  </div>
+                  <details>
+                    <summary>Create custom utxo</summary>
+                    <p>coming soon...</p>
+                  </details>
+                </div>) : null}
               <strong>Total contract balance</strong>
               {contractInfo.utxos == undefined? 
                 <p>loading ...</p>:
diff --git a/src/components/NewContract.tsx b/src/components/NewContract.tsx
index 0a37b6d..4e76ac9 100644
--- a/src/components/NewContract.tsx
+++ b/src/components/NewContract.tsx
@@ -36,19 +36,22 @@ const NewContract: React.FC<Props> = ({ artifacts, provider, setProvider, contra
     </Form.Control>
   )
 
-  function changeNetwork(newNetwork: Network){
-    const newprovider = new ElectrumNetworkProvider(newNetwork)
+  function changeNetwork(newNetwork: "mocknet" | Network){
+    const newprovider = newNetwork == "mocknet" ? 
+      new MockNetworkProvider() : new ElectrumNetworkProvider(newNetwork)
     setProvider(newprovider)
   }
 
   const networkSelector = (
     <Form.Control size="sm" id="network-selector" style={{width: "350px", display:"inline-block"}}
       as="select"
-      value={provider.network}
+      value={provider.network != "chipnet" ? provider.network
+        : ((provider as MockNetworkProvider)?.addUtxo)? "mocknet" : "chipnet" }
       onChange={(event) => {
         changeNetwork(event.target.value as Network)
       }}
     >
+      <option>mocknet</option>
       <option>chipnet</option>
       <option>testnet3</option>
       <option>testnet4</option>
diff --git a/src/components/Wallets.tsx b/src/components/Wallets.tsx
index f647ddd..dc6f11f 100644
--- a/src/components/Wallets.tsx
+++ b/src/components/Wallets.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { NetworkProvider } from 'cashscript'
+import { MockNetworkProvider, NetworkProvider, randomUtxo } from 'cashscript'
 import { ColumnFlex, Wallet } from './shared'
 import { Button, Card } from 'react-bootstrap'
 import {
@@ -123,6 +123,12 @@ const WalletInfo: React.FC<Props> = ({provider, wallets, setWallets}) => {
     setWallets(walletsCopy)
   }
 
+  const addRandomUtxo = (wallet: Wallet, index: number) => {
+    if(!(provider instanceof MockNetworkProvider)) return
+    provider.addUtxo(wallet.address, randomUtxo())
+    updateUtxosWallet(wallet, index)
+  }
+
   const walletList = wallets.map((wallet, index) => (
     <Card style={{ marginBottom: '10px' }} key={wallet.privKeyHex}>
       <Card.Header style={{ display:"flex", justifyContent:"space-between"}}>
@@ -148,10 +154,23 @@ const WalletInfo: React.FC<Props> = ({provider, wallets, setWallets}) => {
         <Card.Text><strong>Wallet utxos</strong></Card.Text>
         <div>
           <span>{wallet.utxos?.length} {wallet.utxos?.length == 1 ? "utxo" : "utxos"}</span>
-          <span onClick={() => updateUtxosWallet(wallet,index)} style={{cursor:"pointer", marginLeft:"10px"}}>
-            <Button size='sm' variant='secondary' style={{padding:" 0px 2px"}}>refresh ⭯</Button>
-          </span>
+          { undefined === (provider as MockNetworkProvider)?.addUtxo ? (<>
+            <span onClick={() => updateUtxosWallet(wallet,index)} style={{cursor:"pointer", marginLeft:"10px"}}>
+              <Button size='sm' variant='secondary' style={{padding:" 0px 2px"}}>refresh ⭯</Button>
+            </span>
+          </>) : null}
         </div>
+        { undefined !== (provider as MockNetworkProvider)?.addUtxo ? (
+          <div>
+            <strong>Create new wallet utxo</strong>
+            <div onClick={() => addRandomUtxo(wallet, index)} style={{cursor:"pointer"}}>
+              <Button size='sm' variant='secondary' style={{padding:" 0px 2px"}}>add random utxo</Button>
+            </div>
+            <details>
+              <summary>Create custom utxo</summary>
+              <p>coming soon...</p>
+            </details>
+          </div>) : null}
         <Card.Text><strong>Wallet Balance</strong></Card.Text>
         <div>{wallet.utxos?.reduce((acc, utxo) => acc + utxo.satoshis, 0n).toString()} satoshis</div>
         <strong>Private Key</strong>