start work on createUtxo component

src/components/Contracts.tsx

@@ -2,8 +2,9 @@ import React from 'react'
 import CopyText from './shared/CopyText'
 import { Card, Button } from 'react-bootstrap'
 import { ContractInfo } from './shared'
-import InfoUtxos from './InfoUtxos'
+import InfoUtxos from './shared/InfoUtxos'
 import { MockNetworkProvider, NetworkProvider, randomUtxo } from 'cashscript'
+import CreateUtxo from './shared/CreateUtxo'
 
 interface Props {
   provider: NetworkProvider
@@ -93,9 +94,10 @@ const Contracts: React.FC<Props> = ({ provider, contracts, setContracts, updateU
                   <div onClick={() => addRandomUtxo(contractInfo)} style={{cursor:"pointer"}}>
                     <Button size='sm' variant='secondary' style={{padding:"0px 2px"}}>add random utxo</Button>
                   </div>
-                  <details style={{width: "fit-content"}}>
+                  <details style={{maxWidth: "50%"}}>
                     <summary>Create custom utxo</summary>
-                    <p>coming soon...</p>
+                    <CreateUtxo provider={provider} address={contractInfo.contract.address} 
+                      updateUtxos={() => updateUtxosContract(contractInfo.contract.name)}/>
                   </details>
                 </div>) : null}
               <strong>Total contract balance</strong>

src/components/Wallets.tsx

@@ -13,7 +13,8 @@ import {
   encodePrivateKeyWif,
 } from '@bitauth/libauth'
 import CopyText from './shared/CopyText'
-import InfoUtxos from './InfoUtxos'
+import InfoUtxos from './shared/InfoUtxos'
+import CreateUtxo from './shared/CreateUtxo'
 
 interface Props {
   provider: NetworkProvider
@@ -172,10 +173,10 @@ const WalletInfo: React.FC<Props> = ({provider, wallets, setWallets}) => {
             <div onClick={() => addRandomUtxo(wallet, index)} style={{cursor:"pointer"}}>
               <Button size='sm' variant='secondary' style={{padding:" 0px 2px"}}>add random utxo</Button>
             </div>
-            <details>
+            <details style={{maxWidth: "50%"}}>
               <summary>Create custom utxo</summary>
-              <p>coming soon...</p>
-            </details>
+                <CreateUtxo provider={provider} address={wallet.address} updateUtxos={() => updateUtxosWallet(wallet,index)}/>
+              </details>
           </div>) : null}
         <Card.Text><strong>Wallet Balance</strong></Card.Text>
         <div>{wallet.utxos?.reduce((acc, utxo) => acc + utxo.satoshis, 0n).toString()} satoshis</div>

src/components/shared/CreateUtxo.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react'
+import { MockNetworkProvider, NetworkProvider, Utxo } from 'cashscript'
+import { Form, InputGroup, Button, Card } from 'react-bootstrap'
+
+interface Props {
+  provider: NetworkProvider
+  address: string
+  updateUtxos: (() => Promise<void>) | (() => void)
+}
+
+const CreateUtxo: React.FC<Props> = ({provider, address, updateUtxos}) => {
+  const [customUtxo, setCustomUtxo] = useState<Utxo>({txid: "", satoshis: 0n, vout: 0})
+  // const [hasFT, setHasFT] = useState<boolean>(false)
+  // const [hasNFT, setHasNFT] = useState<boolean>(false)
+
+  const addCustomUtxo = () => {
+    try{
+      if(!(provider instanceof MockNetworkProvider)) return
+      if(customUtxo.satoshis < 546n) throw new Error('Utxo must have atleast 546n sats')
+      provider.addUtxo(address, customUtxo)
+      updateUtxos()
+    } catch(e){
+      alert(e)
+    }
+  }
+
+  return (
+    <div style={{marginLeft: "20px", marginBottom: "10px"}}>
+      Fill in (partial) utxo data:
+      <div>
+        <div>
+          <InputGroup>
+            <Form.Control size="sm"
+              placeholder="TxId"
+              aria-label="TxId"
+              onChange={(event) => {
+                const utxoCopy = { ...customUtxo }
+                utxoCopy.txid = event.target.value as string
+                setCustomUtxo(utxoCopy)
+              }}
+            />
+            <Form.Control size="sm"
+              placeholder="OutputIndex"
+              aria-label="OutputIndex"
+              onChange={(event) => {
+                const utxoCopy = { ...customUtxo }
+                utxoCopy.vout = parseInt(event.target.value)
+                setCustomUtxo(utxoCopy)
+              }}
+            />
+          </InputGroup>
+        </div>
+        <div>
+          <InputGroup>
+            <Form.Control size="sm"
+              placeholder="Satoshi amount"
+              aria-label="Satoshi amount"
+              onChange={(event) => {
+                const utxoCopy = { ...customUtxo }
+                utxoCopy.satoshis = BigInt(event.target.value)
+                setCustomUtxo(utxoCopy)
+              }}
+            />
+          </InputGroup>
+        </div>
+        {/*
+        <Form style={{ marginTop: '5px', marginBottom: '5px', display: "inline-block" }}>
+        <Form.Check
+          type="switch"
+          id={"HasFT"}
+          label="add tokens to Utxo"
+          onChange={(event) => console.log("b")}
+          />
+        </Form>*/}
+      </div>
+      <Button size='sm' variant='secondary' onClick={() => addCustomUtxo()} style={{padding:" 0px 2px"}}>add custom utxo</Button>
+    </div>
+  )
+}
+
+export default CreateUtxo