fix: reload utxos after creating a fidelity bond (#380)

* fix: reload utxos after creating a fidelity bondgst

* fix: remove unused import

src/components/Earn.jsx

@@ -1,5 +1,4 @@
-import React from 'react'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Formik } from 'formik'
 import * as rb from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
@@ -22,6 +21,10 @@ import styles from './Earn.module.css'
 // 2022-04-26: With value of 2_000ms, no state corruption could be provoked in a local dev setup.
 const MAKER_STOP_RESPONSE_DELAY_MS = 2_000
 
+// When reloading UTXO after creating a fidelity bond, use a delay to make sure
+// that the UTXO corresponding to the fidelity bond is correctly marked as such.
+const RELOAD_FIDELITY_BONDS_DELAY_MS = 2_000
+
 const OFFERTYPE_REL = 'sw0reloffer'
 const OFFERTYPE_ABS = 'sw0absoffer'
 
@@ -194,6 +197,29 @@ export default function Earn() {
     })
   }, [isSending, serviceInfo, isWaitingMakerStart, isWaitingMakerStop, t])
 
+  const reloadFidelityBonds = ({ delay }) => {
+    const abortCtrl = new AbortController()
+
+    setIsLoading(true)
+
+    new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(reloadCurrentWalletInfo({ signal: abortCtrl.signal }))
+      }, delay)
+    })
+      .then((info) => {
+        if (info) {
+          const unspentOutputs = info.data.utxos.utxos
+          const fbOutputs = unspentOutputs.filter((utxo) => utxo.locktime)
+          setFidelityBonds(fbOutputs)
+        }
+      })
+      .catch((err) => {
+        setAlert({ variant: 'danger', message: err.message })
+      })
+      .finally(() => !abortCtrl.signal.aborted && setIsLoading(false))
+  }
+
   const feeRelMin = 0.0
   const feeRelMax = 0.1 // 10%
   const feeRelPercentageStep = 0.0001
@@ -295,6 +321,7 @@ export default function Earn() {
                     totalBalance={balanceSummary?.totalBalance}
                     wallet={currentWallet}
                     walletInfo={currentWalletInfo}
+                    onDone={() => reloadFidelityBonds({ delay: RELOAD_FIDELITY_BONDS_DELAY_MS })}
                   />
                 ) : (
                   <rb.Placeholder as="div" animation="wave">

src/components/fb/CreateFidelityBond.jsx

@@ -21,7 +21,7 @@ const steps = {
   failed: 7,
 }
 
-const CreateFidelityBond = ({ otherFidelityBondExists, accountBalances, totalBalance, wallet, walletInfo }) => {
+const CreateFidelityBond = ({ otherFidelityBondExists, accountBalances, totalBalance, wallet, walletInfo, onDone }) => {
   const reloadCurrentWalletInfo = useReloadCurrentWalletInfo()
 
   const [isExpanded, setIsExpanded] = useState(false)
@@ -234,7 +234,7 @@ const CreateFidelityBond = ({ otherFidelityBondExists, accountBalances, totalBal
       case steps.reviewInputs:
         return timelockedAddress === null ? 'Try again' : 'Create Fidelity Bond'
       case steps.createFidelityBond:
-        return alert === null ? 'Close' : 'Try Again'
+        return alert === null ? 'Done' : 'Try Again'
       default:
         return null
     }
@@ -323,6 +323,7 @@ const CreateFidelityBond = ({ otherFidelityBondExists, accountBalances, totalBal
 
     if (nextStep(step) === steps.done) {
       reset()
+      onDone()
     }
 
     if (nextStep(step) === steps.failed) {