refactor: move provider to the global scope

src/components/App.tsx

@@ -1,6 +1,6 @@
 // Components
 import React, { useState } from 'react';
-import { Artifact, Network } from 'cashscript';
+import { Artifact, ElectrumNetworkProvider, NetworkProvider } from 'cashscript';
 import Header from './Header'
 import Main from './Main'
 import Footer from './Footer';
@@ -13,12 +13,12 @@ import Contracts from './Contracts';
 import TransactionBuilder from './TransactionBuilder';
 
 function App() {
-  const [network, setNetwork] = useState<Network>('chipnet')
+  const [provider, setProvider] = useState<NetworkProvider>(new ElectrumNetworkProvider("chipnet"))
   const [wallets, setWallets] = useState<Wallet[]>([])
   const [artifacts, setArtifacts] = useState<Artifact[] | undefined>(undefined);
   const [contracts, setContracts] = useState<ContractInfo[] | undefined>(undefined)
   const [code, setCode] = useState<string>(
-`pragma cashscript >= 0.8.0;
+`pragma cashscript >= 0.10.0;
     
 contract TransferWithTimeout(pubkey sender, pubkey recipient, int timeout) {
     // Require recipient's signature to match
@@ -79,16 +79,16 @@ contract TransferWithTimeout(pubkey sender, pubkey recipient, int timeout) {
             <Main code={code} setCode={setCode} artifacts={artifacts} setArtifacts={setArtifacts} setContracts={setContracts} updateAllUtxosContracts={updateAllUtxosContracts}/>
           </Tab>
           <Tab eventKey="newcontract" title="New Contract">
-            <NewContract artifacts={artifacts} network={network} setNetwork={setNetwork} contracts={contracts} setContracts={setContracts} updateUtxosContract={updateUtxosContract} />
+            <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} />
           </Tab>
           <Tab eventKey="wallets" title="Wallets">
-            <WalletInfo network={network} wallets={wallets} setWallets={setWallets}/>
+            <WalletInfo provider={provider} wallets={wallets} setWallets={setWallets}/>
           </Tab>
           <Tab eventKey="transactionBuilder" title="TransactionBuilder">
-            <TransactionBuilder network={network} wallets={wallets} contracts={contracts} updateUtxosContract={updateUtxosContract}/>
+            <TransactionBuilder provider={provider} wallets={wallets} contracts={contracts} updateUtxosContract={updateUtxosContract}/>
           </Tab>
         </Tabs>
       </div>

src/components/ContractCreation.tsx

@@ -1,17 +1,17 @@
 import React, { useState, useEffect } from 'react'
-import { Artifact, Contract, ConstructorArgument, Network, ElectrumNetworkProvider } from 'cashscript'
+import { Artifact, Contract, ConstructorArgument, NetworkProvider } from 'cashscript'
 import { InputGroup, Form, Button } from 'react-bootstrap'
 import { readAsConstructorType, ContractInfo, TinyContractObj } from './shared'
 
 interface Props {
   artifact?: Artifact
   contracts?: ContractInfo[]
   setContracts: (contracts?: ContractInfo[]) => void
-  network: Network
+  provider: NetworkProvider
   updateUtxosContract: (contractName: string) => void
 }
 
-const ContractCreation: React.FC<Props> = ({ artifact, contracts, setContracts, network, updateUtxosContract}) => {
+const ContractCreation: React.FC<Props> = ({ artifact, contracts, setContracts, provider, updateUtxosContract}) => {
   const [constructorArgs, setConstructorArgs] = useState<ConstructorArgument[]>([])
   const [nameContract, setNameContract] = useState<string>("");
   const [createdContract, setCreatedContract] = useState(false);
@@ -52,7 +52,6 @@ const ContractCreation: React.FC<Props> = ({ artifact, contracts, setContracts,
   function createContract() {
     if (!artifact) return
     try {
-      const provider = new ElectrumNetworkProvider(network)
       const newContract = new Contract(artifact, constructorArgs, { provider })
       newContract.name = nameContract
       const contractInfo = {contract: newContract, utxos: undefined, args: constructorArgs}

src/components/ContractFunction.tsx

@@ -1,17 +1,17 @@
 import React, { useState, useEffect } from 'react'
-import { AbiFunction, FunctionArgument, Network, Recipient, SignatureTemplate, Utxo } from 'cashscript'
+import { AbiFunction, NetworkProvider, FunctionArgument, Recipient, SignatureTemplate } from 'cashscript'
 import { Form, InputGroup, Button, Card } from 'react-bootstrap'
 import { readAsType, ExplorerString, Wallet, NamedUtxo, ContractInfo } from './shared'
 
 interface Props {
   contractInfo: ContractInfo
   abi?: AbiFunction
-  network: Network
+  provider: NetworkProvider
   wallets: Wallet[]
   updateUtxosContract: (contractName: string) => void
 }
 
-const ContractFunction: React.FC<Props> = ({ contractInfo, abi, network, wallets, updateUtxosContract }) => {
+const ContractFunction: React.FC<Props> = ({ contractInfo, abi, provider, wallets, updateUtxosContract }) => {
   const [functionArgs, setFunctionArgs] = useState<FunctionArgument[]>([])
   const [outputs, setOutputs] = useState<Recipient[]>([{ to: '', amount: 0n }])
   // transaction inputs, not the same as abi.inputs
@@ -291,8 +291,8 @@ const ContractFunction: React.FC<Props> = ({ contractInfo, abi, network, wallets
       transaction.to(outputs)
       const { txid } = await transaction.send()
 
-      alert(`Transaction successfully sent: ${ExplorerString[network]}/tx/${txid}`)
-      console.log(`Transaction successfully sent: ${ExplorerString[network]}/tx/${txid}`)
+      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)

src/components/ContractFunctions.tsx

@@ -1,18 +1,18 @@
 import React from 'react'
-import { Network } from 'cashscript'
+import { NetworkProvider } from 'cashscript'
 import ContractFunction from './ContractFunction'
 import { Wallet, ContractInfo } from './shared'
 
 interface Props {
   contractInfo: ContractInfo
-  network: Network
+  provider: NetworkProvider
   wallets: Wallet[]
   updateUtxosContract: (contractName: string) => void
 }
 
-const ContractFunctions: React.FC<Props> = ({ contractInfo, network, wallets, updateUtxosContract }) => {
+const ContractFunctions: React.FC<Props> = ({ contractInfo, provider, wallets, updateUtxosContract }) => {
   const functions = contractInfo.contract.artifact?.abi.map(func => (
-    <ContractFunction contractInfo={contractInfo} key={func.name} abi={func} network={network} wallets={wallets} updateUtxosContract={updateUtxosContract}/>
+    <ContractFunction contractInfo={contractInfo} key={func.name} abi={func} provider={provider} wallets={wallets} updateUtxosContract={updateUtxosContract}/>
   ))
 
   return (

src/components/NewContract.tsx

@@ -1,19 +1,19 @@
 import React, { useState } from 'react'
-import { Artifact, Network } from 'cashscript'
+import { Artifact, NetworkProvider, Network, MockNetworkProvider, ElectrumNetworkProvider } from 'cashscript'
 import { Form } from 'react-bootstrap'
 import ContractCreation from './ContractCreation';
 import { ContractInfo } from './shared'
 
 interface Props {
   artifacts?: Artifact[]
-  network: Network
-  setNetwork: (network: Network) => void
+  provider: NetworkProvider
+  setProvider: (provider: NetworkProvider) => void
   updateUtxosContract: (contractName: string) => void
   contracts: ContractInfo[] | undefined
   setContracts: (contract: ContractInfo[] | undefined) => void
 }
 
-const NewContract: React.FC<Props> = ({ artifacts, network, setNetwork, contracts, setContracts, updateUtxosContract }) => {
+const NewContract: React.FC<Props> = ({ artifacts, provider, setProvider, contracts, setContracts, updateUtxosContract }) => {
 
   const [selectedArifact, setSelectedArtifact] = useState<Artifact | undefined>(undefined);
 
@@ -36,18 +36,23 @@ const NewContract: React.FC<Props> = ({ artifacts, network, setNetwork, contract
     </Form.Control>
   )
 
+  function changeNetwork(newNetwork: Network){
+    const newprovider = new ElectrumNetworkProvider(newNetwork)
+    setProvider(newprovider)
+  }
+
   const networkSelector = (
     <Form.Control size="sm" id="network-selector" style={{width: "350px", display:"inline-block"}}
       as="select"
-      value={network}
+      value={provider.network}
       onChange={(event) => {
-        setNetwork(event.target.value as Network)
+        changeNetwork(event.target.value as Network)
       }}
     >
-      <option>mainnet</option>
+      <option>chipnet</option>
       <option>testnet3</option>
       <option>testnet4</option>
-      <option>chipnet</option>
+      <option>mainnet</option>
     </Form.Control>
   )
 
@@ -67,15 +72,15 @@ const NewContract: React.FC<Props> = ({ artifacts, network, setNetwork, contract
       <h2>New Contract</h2>
       {artifacts?.length ?
         <>
-          <p style={{margin: "10px 0"}}>Choose the contract Arifact and network to use:</p>
           <div style={{margin: "10px 0"}}>
-            <span>Select Artifact:</span> {artifactSelector}
+            <span>Select target Network:</span> {networkSelector}
           </div>
+          <p style={{margin: "10px 0"}}>Choose the contract Arifact to use:</p>
           <div style={{margin: "10px 0"}}>
-            <span>Select target Network:</span> {networkSelector}
+            <span>Select Artifact:</span> {artifactSelector}
           </div>
           {selectedArifact !== undefined ?
-            <ContractCreation artifact={selectedArifact} network={network} contracts={contracts} setContracts={setContracts} updateUtxosContract={updateUtxosContract} />
+            <ContractCreation artifact={selectedArifact} provider={provider} contracts={contracts} setContracts={setContracts} updateUtxosContract={updateUtxosContract} />
             : null
           }
         </>

src/components/TransactionBuilder.tsx

@@ -1,17 +1,17 @@
 import React, {useState} from 'react'
-import { Network } from 'cashscript'
+import { NetworkProvider } from 'cashscript'
 import ContractFunctions from './ContractFunctions';
 import { Wallet, ContractInfo } from './shared'
 import { Form } from 'react-bootstrap'
 
 interface Props {
-  network: Network
+  provider: NetworkProvider
   wallets: Wallet[]
   updateUtxosContract: (contractName: string) => void
   contracts: ContractInfo[] | undefined
 }
 
-const TransactionBuilder: React.FC<Props> = ({ network, wallets, contracts, updateUtxosContract }) => {
+const TransactionBuilder: React.FC<Props> = ({ provider, wallets, contracts, updateUtxosContract }) => {
 
   const [selectedContract, setSelectedContract] = useState<ContractInfo | undefined>(undefined);
 
@@ -55,7 +55,7 @@ const TransactionBuilder: React.FC<Props> = ({ network, wallets, contracts, upda
       }
       </div>
       {selectedContract !== undefined ?
-        <ContractFunctions contractInfo={selectedContract} network={network} wallets={wallets} updateUtxosContract={updateUtxosContract} />
+        <ContractFunctions contractInfo={selectedContract} provider={provider} wallets={wallets} updateUtxosContract={updateUtxosContract} />
         : null
       }
     </div>

src/components/Wallets.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { Network, ElectrumNetworkProvider } from 'cashscript'
+import { NetworkProvider } from 'cashscript'
 import { ColumnFlex, Wallet } from './shared'
 import { Button, Card } from 'react-bootstrap'
 import {
@@ -16,12 +16,12 @@ import CopyText from './shared/CopyText'
 import InfoUtxos from './InfoUtxos'
 
 interface Props {
-  network: Network
+  provider: NetworkProvider
   wallets: Wallet[]
   setWallets:(wallets: Wallet[]) => void
 }
 
-const WalletInfo: React.FC<Props> = ({network, wallets, setWallets}) => {
+const WalletInfo: React.FC<Props> = ({provider, wallets, setWallets}) => {
   useEffect(() => {
     const localStorageData = localStorage.getItem("wallets");
     // If the local storage is null
@@ -91,9 +91,8 @@ const WalletInfo: React.FC<Props> = ({network, wallets, setWallets}) => {
         }
         setWallets(newWallets);
         // fetch UTXOs
-        const networkProvider = new ElectrumNetworkProvider(network)
         for (const wallet of newWallets){
-          const walletUtxos = await networkProvider.getUtxos(wallet.address);
+          const walletUtxos = await provider.getUtxos(wallet.address);
           wallet.utxos = walletUtxos
         }
         setWallets(newWallets);
@@ -118,7 +117,7 @@ const WalletInfo: React.FC<Props> = ({network, wallets, setWallets}) => {
   }, [wallets]);
 
   async function updateUtxosWallet (wallet: Wallet, index: number) {
-    const walletUtxos = await new ElectrumNetworkProvider(network).getUtxos(wallet.address);
+    const walletUtxos = await provider.getUtxos(wallet.address);
     const walletsCopy = [...wallets]
     walletsCopy[index].utxos = walletUtxos
     setWallets(walletsCopy)
@@ -142,10 +141,10 @@ const WalletInfo: React.FC<Props> = ({network, wallets, setWallets}) => {
         <CopyText>{wallet.pubKeyHex}</CopyText>
         <Card.Text><strong>Pubkeyhash hex:</strong></Card.Text>
         <CopyText>{wallet.pubKeyHashHex}</CopyText>
-        <Card.Text><strong>{network==="mainnet"? "Address:" : "Testnet Address:"}</strong></Card.Text>
-        <CopyText>{network==="mainnet"? wallet.address : wallet.testnetAddress}</CopyText>
-        <Card.Text><strong>{network==="mainnet"? "Token address:" : "Testnet Token Address:"}</strong></Card.Text>
-        <CopyText>{network==="mainnet"? hash160ToCash(wallet.pubKeyHashHex, false, true) : hash160ToCash(wallet.pubKeyHashHex, true, true)}</CopyText>
+        <Card.Text><strong>{provider.network==="mainnet"? "Address:" : "Testnet Address:"}</strong></Card.Text>
+        <CopyText>{provider.network==="mainnet"? wallet.address : wallet.testnetAddress}</CopyText>
+        <Card.Text><strong>{provider.network==="mainnet"? "Token address:" : "Testnet Token Address:"}</strong></Card.Text>
+        <CopyText>{provider.network==="mainnet"? hash160ToCash(wallet.pubKeyHashHex, false, true) : hash160ToCash(wallet.pubKeyHashHex, true, true)}</CopyText>
         <Card.Text><strong>Wallet utxos</strong></Card.Text>
         <div>
           <span>{wallet.utxos?.length} {wallet.utxos?.length == 1 ? "utxo" : "utxos"}</span>
@@ -159,7 +158,7 @@ const WalletInfo: React.FC<Props> = ({network, wallets, setWallets}) => {
         <details>
           <summary>Show Private Key</summary>
           <Card.Text><strong>WIF:</strong></Card.Text>
-          <CopyText>{encodePrivateKeyWif(wallet.privKey, network === "mainnet" ? "mainnet" : "testnet")}</CopyText>
+          <CopyText>{encodePrivateKeyWif(wallet.privKey, provider.network === "mainnet" ? "mainnet" : "testnet")}</CopyText>
           <Card.Text><strong>Hex:</strong></Card.Text>
           <CopyText>{wallet.privKeyHex}</CopyText>
         </details>