feat: move fidelity bonds to earn screen

src/components/Alert.jsx

@@ -1,13 +1,16 @@
 import React, { useState } from 'react'
 import { Alert as BsAlert } from 'react-bootstrap'
 
-export default function Alert({ variant, dismissible, message, ...props }) {
+export default function Alert({ variant, dismissible, message, onDismissed, ...props }) {
   const [show, setShow] = useState(true)
 
   return (
     <BsAlert
       show={show}
-      onClose={() => setShow(false)}
+      onClose={() => {
+        setShow(false)
+        onDismissed && onDismissed()
+      }}
       variant={variant}
       dismissible={dismissible}
       className="my-3"

src/components/App.jsx

@@ -10,7 +10,6 @@ import Earn from './Earn'
 import Receive from './Receive'
 import CurrentWalletMagic from './CurrentWalletMagic'
 import CurrentWalletAdvanced from './CurrentWalletAdvanced'
-import FidelityBond from './FidelityBond'
 import Settings from './Settings'
 import Navbar from './Navbar'
 import Layout from './Layout'
@@ -133,7 +132,6 @@ export default function App() {
                     <Route path={routes.earn} element={<Earn />} />
                     <Route path={routes.receive} element={<Receive />} />
                     <Route path={routes.settings} element={<Settings stopWallet={stopWallet} />} />
-                    <Route path={routes.fidelityBonds} element={<FidelityBond />} />
                   </>
                 )}
               </Route>

src/components/CurrentWalletAdvanced.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react'
-import { Link } from 'react-router-dom'
 import * as rb from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 // @ts-ignore
@@ -10,7 +9,6 @@ import DisplayAccountUTXOs from './DisplayAccountUTXOs'
 import DisplayUTXOs from './DisplayUTXOs'
 // @ts-ignore
 import { useCurrentWallet, useCurrentWalletInfo, useReloadCurrentWalletInfo } from '../context/WalletContext'
-import { routes } from '../constants/routes'
 import styles from './CurrentWalletAdvanced.module.css'
 
 type Utxos = any[]
@@ -97,14 +95,6 @@ export default function CurrentWalletAdvanced() {
                   <Trans i18nKey="fidelity_bond.alert_no_fidelity_bonds" as="span">
                     No Fidelity Bond present.
                   </Trans>
-                  <>
-                    {' '}
-                    <Link to={routes.fidelityBonds}>
-                      <Trans i18nKey="current_wallet_advanced.link_fidelity_bonds_create_text" as="span">
-                        Create a Fidelity Bond.
-                      </Trans>
-                    </Link>
-                  </>
                 </>
               </rb.Alert>
             ) : (

src/components/Earn.jsx

@@ -4,11 +4,14 @@ import { Formik } from 'formik'
 import * as rb from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { useSettings } from '../context/SettingsContext'
-import { useCurrentWallet } from '../context/WalletContext'
+import { useCurrentWallet, useCurrentWalletInfo, useReloadCurrentWalletInfo } from '../context/WalletContext'
 import { useServiceInfo, useReloadServiceInfo } from '../context/ServiceInfoContext'
+import { useBalanceSummary } from '../hooks/BalanceSummary'
 import Sprite from './Sprite'
 import PageTitle from './PageTitle'
 import SegmentedTabs from './SegmentedTabs'
+import { CreateFidelityBond } from './fb/CreateFidelityBond'
+import { ExistingFidelityBond } from './fb/ExistingFidelityBond'
 import { EarnReportOverlay } from './EarnReport'
 import * as Api from '../libs/JmWalletApi'
 import styles from './Earn.module.css'
@@ -82,8 +85,11 @@ export default function Earn() {
   const { t } = useTranslation()
   const settings = useSettings()
   const currentWallet = useCurrentWallet()
+  const currentWalletInfo = useCurrentWalletInfo()
+  const reloadCurrentWalletInfo = useReloadCurrentWalletInfo()
   const serviceInfo = useServiceInfo()
   const reloadServiceInfo = useReloadServiceInfo()
+  const balanceSummary = useBalanceSummary(currentWalletInfo)
 
   const [isAdvancedView, setIsAdvancedView] = useState(settings.useAdvancedWalletMode)
   const [alert, setAlert] = useState(null)
@@ -93,6 +99,7 @@ export default function Earn() {
   const [isWaitingMakerStart, setIsWaitingMakerStart] = useState(false)
   const [isWaitingMakerStop, setIsWaitingMakerStop] = useState(false)
   const [isShowReport, setIsShowReport] = useState(false)
+  const [fidelityBonds, setFidelityBonds] = useState([])
 
   const startMakerService = (ordertype, minsize, cjfee_a, cjfee_r) => {
     setIsSending(true)
@@ -146,14 +153,23 @@ export default function Earn() {
 
     setIsLoading(true)
 
-    reloadServiceInfo({ signal: abortCtrl.signal })
+    const reloadingServiceInfo = reloadServiceInfo({ signal: abortCtrl.signal })
+    const reloadingCurrentWalletInfo = reloadCurrentWalletInfo({ signal: abortCtrl.signal }).then((info) => {
+      if (info && !abortCtrl.signal.aborted) {
+        const unspentOutputs = info.data.utxos.utxos
+        const fbOutputs = unspentOutputs.filter((utxo) => utxo.locktime)
+        setFidelityBonds(fbOutputs)
+      }
+    })
+
+    Promise.all([reloadingServiceInfo, reloadingCurrentWalletInfo])
       .catch((err) => {
         !abortCtrl.signal.aborted && setAlert({ variant: 'danger', message: err.message })
       })
       .finally(() => !abortCtrl.signal.aborted && setIsLoading(false))
 
     return () => abortCtrl.abort()
-  }, [currentWallet, isSending, reloadServiceInfo])
+  }, [currentWallet, isSending, reloadServiceInfo, reloadCurrentWalletInfo])
 
   useEffect(() => {
     if (isSending) return
@@ -255,16 +271,39 @@ export default function Earn() {
               {t('earn.alert_coinjoin_in_progress')}
             </rb.Alert>
           </rb.Fade>
-
           {alert && <rb.Alert variant={alert.variant}>{alert.message}</rb.Alert>}
-
           {serviceInfoAlert && <rb.Alert variant={serviceInfoAlert.variant}>{serviceInfoAlert.message}</rb.Alert>}
-
           {!serviceInfo?.coinjoinInProgress &&
             !serviceInfo?.makerRunning &&
             !isWaitingMakerStart &&
             !isWaitingMakerStop && <p className="text-secondary mb-4">{t('earn.market_explainer')}</p>}
-
+          {!serviceInfo?.coinjoinInProgress && (
+            <>
+              <PageTitle
+                title={'Create a Fidelity Bond'}
+                subtitle={
+                  'Fidelity bonds prevent Sybil attacks by deliberately increasing the cost of creating cryptographic identities. Creating a fidelity bond will increase your chances of being picked for a collaborative transaction.'
+                }
+              />
+              <div className="d-flex flex-column gap-3">
+                {fidelityBonds.length > 0 &&
+                  fidelityBonds.map((utxo, index) => <ExistingFidelityBond key={index} utxo={utxo} />)}
+                {!isLoading && balanceSummary ? (
+                  <CreateFidelityBond
+                    otherFidelityBondExists={fidelityBonds.length > 0}
+                    accountBalances={balanceSummary?.accountBalances}
+                    totalBalance={balanceSummary?.totalBalance}
+                    wallet={currentWallet}
+                    walletInfo={currentWalletInfo}
+                  />
+                ) : (
+                  <rb.Placeholder as="div" animation="wave">
+                    <rb.Placeholder xs={12} className={styles['fb-loader']} />
+                  </rb.Placeholder>
+                )}
+              </div>
+            </>
+          )}
           {!serviceInfo?.coinjoinInProgress && (
             <Formik initialValues={initialValues} validate={validate} onSubmit={onSubmit}>
               {({ handleSubmit, setFieldValue, handleChange, handleBlur, values, touched, errors, isSubmitting }) => (
@@ -423,7 +462,6 @@ export default function Earn() {
                       <hr />
                     </div>
                   )}
-
                   <rb.Button
                     variant="dark"
                     type="submit"
@@ -457,7 +495,6 @@ export default function Earn() {
           )}
         </rb.Col>
       </rb.Row>
-
       <rb.Row className="mt-5 mb-3">
         <rb.Col className="d-flex justify-content-center">
           <EarnReportOverlay show={isShowReport} onHide={() => setIsShowReport(false)} />

src/components/Earn.module.css

@@ -3,6 +3,11 @@
   border-radius: 0.25rem;
 }
 
+.earn .fb-loader {
+  height: 11rem;
+  border-radius: 0.25rem;
+}
+
 .earn form input:not([type='checkbox']) {
   height: 3.5rem;
 }