fix change network functionality

src/components/App.tsx

@@ -1,5 +1,5 @@
 // Components
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Artifact, MockNetworkProvider, NetworkProvider } from 'cashscript';
 import Header from './Header'
 import Main from './Main'
@@ -34,7 +34,11 @@ contract TransferWithTimeout(pubkey sender, pubkey recipient, int timeout) {
 }
 `);
 
-  async function updateUtxosContract (nameContract: string) {
+  useEffect(() => {
+    updateAllUtxosContracts()
+  }, [provider])
+
+  async function updateUtxosContract(nameContract: string) {
     const contractIndex = contracts?.findIndex(contractInfo => contractInfo.contract.name == nameContract)
     if (contractIndex == undefined) return
     const currentContract = contracts?.[contractIndex].contract
@@ -76,7 +80,7 @@ contract TransferWithTimeout(pubkey sender, pubkey recipient, int timeout) {
           style={{ display: "inline-flex", marginLeft: "calc(100vw - 1100px)" }}
         >
           <Tab eventKey="editor" title="Editor">
-            <Main code={code} setCode={setCode} artifacts={artifacts} setArtifacts={setArtifacts} setContracts={setContracts} updateAllUtxosContracts={updateAllUtxosContracts}/>
+            <Main code={code} setCode={setCode} artifacts={artifacts} setArtifacts={setArtifacts} provider={provider} setProvider={setProvider} setContracts={setContracts} updateAllUtxosContracts={updateAllUtxosContracts}/>
           </Tab>
           <Tab eventKey="newcontract" title="New Contract">
             <NewContract artifacts={artifacts} provider={provider} setProvider={setProvider} contracts={contracts} setContracts={setContracts} updateUtxosContract={updateUtxosContract} />

src/components/ContractFunction.tsx

@@ -289,7 +289,7 @@ const ContractFunction: React.FC<Props> = ({ contractInfo, abi, provider, wallet
       transaction.to(outputs)
 
       // check for mocknet
-      if(provider instanceof MockNetworkProvider){
+      if(provider.network == "mocknet"){
         try{
           await transaction.debug()
           alert(`Transaction evalution passed! see Bitauth IDE link in console`)

src/components/Main.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Artifact, Contract, ElectrumNetworkProvider } from 'cashscript';
+import { Artifact, Contract, ElectrumNetworkProvider, MockNetworkProvider, Network, NetworkProvider } from 'cashscript';
 import { compileString } from 'cashc';
 import { RowFlex, ContractInfo, TinyContractObj } from './shared';
 import Editor from './Editor';
@@ -12,23 +12,32 @@ interface Props {
   setArtifacts: (artifacts: Artifact[] | undefined) => void
   setContracts: (contracts?: ContractInfo[]) => void
   updateAllUtxosContracts: () => void
+  setProvider: (networkProvider: NetworkProvider) => void
+  provider: NetworkProvider
 }
 
-const Main: React.FC<Props> = ({code, setCode, artifacts, setArtifacts, setContracts, updateAllUtxosContracts}) => {
+const Main: React.FC<Props> = ({
+  code, setCode, artifacts, setArtifacts, setContracts, updateAllUtxosContracts, provider, setProvider
+}) => {
 
   const [initializeContracts, setInitializeContracts] = useState<number>(0);
 
   useEffect(() => {
     const codeLocalStorage = localStorage.getItem("code");
     const artifactsLocalStorage = localStorage.getItem("artifacts");
     const contractsLocalStorage = localStorage.getItem("contracts");
+    const networkLocalStorage = localStorage.getItem("network");
     // If code exits in local storage, set it as new code
     if (codeLocalStorage) setCode(codeLocalStorage);
     if (artifactsLocalStorage){
       try{
          setArtifacts(JSON.parse(artifactsLocalStorage));
       } catch(error){ console.log(error) }
     }
+    if (networkLocalStorage && networkLocalStorage != "mocknet"){
+      const newProvider = new ElectrumNetworkProvider(networkLocalStorage as Network)
+      setProvider(newProvider)
+    }
     if (contractsLocalStorage) setInitializeContracts(1)
   }, [])
 
@@ -38,14 +47,13 @@ const Main: React.FC<Props> = ({code, setCode, artifacts, setArtifacts, setContr
     if(!contractsStringLocalStorage) return
     const contractsLocalStorage: TinyContractObj[] = JSON.parse(contractsStringLocalStorage)
     const newContracts = contractsLocalStorage.map(tinyContractObj => {
-      const {contractName, artifactName, network, args} = tinyContractObj
+      const {contractName, artifactName, args} = tinyContractObj
       const matchingArtifact = artifacts?.find(artifact => artifact.contractName == artifactName)
       if(!matchingArtifact) return
       const unstringifiedArgs = args.map(arg => {
         if(typeof arg == "string" && arg.startsWith("bigint")) return BigInt(arg.slice(6))
           return arg
       })
-      const provider = new ElectrumNetworkProvider(network)
       const newContract = new Contract(matchingArtifact, unstringifiedArgs, {provider})
       newContract.name = contractName
       const contractInfo: ContractInfo = {

src/components/NewContract.tsx

@@ -36,17 +36,17 @@ const NewContract: React.FC<Props> = ({ artifacts, provider, setProvider, contra
     </Form.Control>
   )
 
-  function changeNetwork(newNetwork: "mocknet" | Network){
+  function changeNetwork(newNetwork: Network){
     const newprovider = newNetwork == "mocknet" ? 
       new MockNetworkProvider() : new ElectrumNetworkProvider(newNetwork)
     setProvider(newprovider)
+    localStorage.setItem("network", newNetwork)
   }
 
   const networkSelector = (
     <Form.Control size="sm" id="network-selector" style={{width: "350px", display:"inline-block"}}
       as="select"
-      value={provider.network != "chipnet" ? provider.network
-        : ((provider as MockNetworkProvider)?.addUtxo)? "mocknet" : "chipnet" }
+      value={provider.network}
       onChange={(event) => {
         changeNetwork(event.target.value as Network)
       }}