add loading state to contract balance & utxos

CashScript · Jun 1, 2024 · 64e492f · 64e492f
1 parent 37c34d8
commit 64e492f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/src/components/ContractCreation.tsx b/src/components/ContractCreation.tsx
@@ -100,23 +100,32 @@ const ContractCreation: React.FC<Props> = ({ artifact, contract, setContract, ne
     }}>
       <h2>{artifact?.contractName}</h2>
       {constructorForm}
-      {contract !== undefined && balance !== undefined &&
+      {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>
-            <p>{utxos?.length} {utxos?.length == 1 ? "utxo" : "utxos"}</p>
-            <details  onClick={() => updateUtxosContract()}>
-              <summary>Show utxos</summary>
-              <div>
-                <InfoUtxos utxos={utxos}/>
-              </div>
-            </details>
+            {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>
-            <p>{balance.toString()} satoshis</p>
+            {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>

diff --git a/src/components/ContractInfo.tsx b/src/components/ContractInfo.tsx
@@ -1,8 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { Artifact, Contract, Network, Utxo } from 'cashscript'
-import { ColumnFlex, Wallet } from './shared'
+import { ColumnFlex } from './shared'
 import ContractCreation from './ContractCreation'
-import ContractFunctions from './ContractFunctions'
 import { ElectrumClient, ElectrumTransport } from 'electrum-cash'
 
 interface Props {
@@ -14,7 +13,7 @@ interface Props {
 const ContractInfo: React.FC<Props> = ({ artifact, network, setNetwork }) => {
   const [contract, setContract] = useState<Contract | undefined>(undefined)
   const [balance, setBalance] = useState<bigint | undefined>(undefined)
-  const [utxos, setUtxos] = useState<Utxo[] | undefined>([])
+  const [utxos, setUtxos] = useState<Utxo[] | undefined>(undefined)
   const [electrumClient, setElectrumClient] = useState<ElectrumClient | undefined>(undefined)
 
   useEffect(() => setContract(undefined), [artifact])