small layout changes

CashScript · Sep 24, 2024 · 426909b · 426909b
1 parent a99a3df
commit 426909b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 22 deletions.
diff --git a/src/components/Contracts.tsx b/src/components/Contracts.tsx
@@ -74,27 +74,26 @@ const Contracts: React.FC<Props> = ({ provider, contracts, setContracts, updateU
                 <p>loading ...</p>:
                 (<div>
                   {contractInfo?.utxos.length} {contractInfo?.utxos.length == 1 ? "utxo" : "utxos"}
-                  { 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>
-                      <div>
-                        <InfoUtxos utxos={contractInfo?.utxos}/>
-                      </div>
-                  </details> : null}
+                  <details style={{width: "fit-content"}}>
+                    <summary>Show utxos</summary>
+                    <div>
+                      <InfoUtxos utxos={contractInfo?.utxos}/>
+                    </div>
+                  </details> 
+                  { undefined === (provider as MockNetworkProvider)?.addUtxo ? (
+                    <div style={{cursor:"pointer", marginLeft:"10px"}}>
+                      <Button size='sm' onClick={() => updateUtxosContract(contractInfo.contract.name)} variant='secondary' style={{padding:" 0px 2px"}}>refresh ⭯</Button>
+                    </div>)
+                  : 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>
+                    <Button size='sm' variant='secondary' style={{padding:"0px 2px"}}>add random utxo</Button>
                   </div>
-                  <details>
+                  <details style={{width: "fit-content"}}>
                     <summary>Create custom utxo</summary>
                     <p>coming soon...</p>
                   </details>
@@ -103,7 +102,6 @@ const Contracts: React.FC<Props> = ({ provider, contracts, setContracts, updateU
               {contractInfo.utxos == undefined? 
                 <p>loading ...</p>:
                 <p>{contractInfo.utxos?.reduce((acc, utxo) => acc + utxo.satoshis, 0n).toString()} satoshis</p>
-
               }
               <strong>Contract size</strong>
               <p>{contractInfo.contract.bytesize} bytes (max 520), {contractInfo.contract.opcount} opcodes (max 201)</p>

diff --git a/src/components/Wallets.tsx b/src/components/Wallets.tsx
@@ -159,6 +159,12 @@ const WalletInfo: React.FC<Props> = ({provider, wallets, setWallets}) => {
               <Button size='sm' variant='secondary' style={{padding:" 0px 2px"}}>refresh ⭯</Button>
             </span>
           </>) : null}
+          <details style={{width: "fit-content"}}>
+            <summary>Show utxos</summary>
+            <div>
+              <InfoUtxos utxos={wallet.utxos}/>
+            </div>
+          </details>
         </div>
         { undefined !== (provider as MockNetworkProvider)?.addUtxo ? (
           <div>
@@ -181,13 +187,6 @@ const WalletInfo: React.FC<Props> = ({provider, wallets, setWallets}) => {
           <Card.Text><strong>Hex:</strong></Card.Text>
           <CopyText>{wallet.privKeyHex}</CopyText>
         </details>
-        {wallet.utxos.length ? 
-          (<details>
-            <summary>Show utxos</summary>
-            <div>
-              <InfoUtxos utxos={wallet.utxos}/>
-            </div>
-          </details>) : null}
       </Card.Body>
     </Card>
   ))