Merge pull request #21 from foldingcash/mmolina/utxo-list-sync

Invert the utxo list for contract function component and set a timer to fetch new utxos periodically
CashScript · May 24, 2024 · 0d1fd40 · 0d1fd40
2 parents ce5c690 + ad429dd
commit 0d1fd40
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/src/components/ContractFunction.tsx b/src/components/ContractFunction.tsx
@@ -8,10 +8,11 @@ interface Props {
   abi?: AbiFunction
   network: Network
   wallets: Wallet[]
+  utxos: Utxo[] | undefined
   updateUtxosContract: () => void
 }
 
-const ContractFunction: React.FC<Props> = ({ contract, abi, network, wallets, updateUtxosContract }) => {
+const ContractFunction: React.FC<Props> = ({ contract, abi, network, wallets, utxos, updateUtxosContract }) => {
   const [args, setArgs] = useState<Argument[]>([])
   const [outputs, setOutputs] = useState<Recipient[]>([{ to: '', amount: 0n }])
   // transaction inputs, not the same as abi.inputs
@@ -31,8 +32,8 @@ const ContractFunction: React.FC<Props> = ({ contract, abi, network, wallets, up
   useEffect(() => {
     if (!manualSelection) return;
     async function updateUtxos() {
-      if (contract === undefined) return
-      const utxosContract = await contract.getUtxos()
+      if (contract === undefined || utxos === undefined) return
+      const utxosContract = utxos
       console.log(utxosContract)
       const namedUtxosContract: NamedUtxo[] = utxosContract.map((utxo, index) => ({ ...utxo, name: `Contract UTXO ${index}`, isP2pkh: false }))
       let newUtxoList = namedUtxosContract
@@ -44,7 +45,7 @@ const ContractFunction: React.FC<Props> = ({ contract, abi, network, wallets, up
       setUtxoList(newUtxoList);
     }
     updateUtxos()
-  }, [manualSelection])
+  }, [manualSelection, utxos])
 
   function fillPrivKey(i: number, walletIndex: string) {
     const argsCopy = [...args];

diff --git a/src/components/ContractFunctions.tsx b/src/components/ContractFunctions.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Artifact, Contract, Network } from 'cashscript'
+import { Artifact, Contract, Network, Utxo } from 'cashscript'
 import ContractFunction from './ContractFunction'
 import { Wallet } from './shared'
 
@@ -8,12 +8,13 @@ interface Props {
   contract?: Contract
   network: Network
   wallets: Wallet[]
+  utxos: Utxo[] | undefined
   updateUtxosContract: () => void
 }
 
-const ContractFunctions: React.FC<Props> = ({ artifact, contract, network, wallets, updateUtxosContract }) => {
+const ContractFunctions: React.FC<Props> = ({ artifact, contract, network, wallets, utxos, updateUtxosContract }) => {
   const functions = artifact?.abi.map(func => (
-    <ContractFunction contract={contract} key={func.name} abi={func} network={network} wallets={wallets} updateUtxosContract={updateUtxosContract}/>
+    <ContractFunction contract={contract} key={func.name} abi={func} network={network} wallets={wallets} utxos={utxos} updateUtxosContract={updateUtxosContract}/>
   ))
 
   return (

diff --git a/src/components/ContractInfo.tsx b/src/components/ContractInfo.tsx
@@ -53,13 +53,19 @@ const ContractInfo: React.FC<Props> = ({ artifact, network, setNetwork, setShowW
     setUtxos(await contract.getUtxos())
   }
 
+  useEffect(() => {
+    setTimeout(() => {
+      updateUtxosContract()
+    }, 5000);
+  }, [updateUtxosContract]);
+
   return (
     <ColumnFlex
       id="preview"
       style={{ ...style, flex: 1, margin: '16px' }}
     >
       <ContractCreation artifact={artifact} contract={contract} setContract={setContract} network={network} setNetwork={setNetwork} setShowWallets={setShowWallets} utxos={utxos} balance={balance} updateUtxosContract={updateUtxosContract}/>
-      <ContractFunctions artifact={artifact} contract={contract} network={network} wallets={wallets} updateUtxosContract={updateUtxosContract}/>
+      <ContractFunctions artifact={artifact} contract={contract} network={network} wallets={wallets} utxos={utxos} updateUtxosContract={updateUtxosContract} />
     </ColumnFlex>
   )
 }