wip(renew): ability to renew specific fidelity bond

src/components/Earn.tsx

@@ -13,7 +13,7 @@ import PageTitle from './PageTitle'
 import SegmentedTabs from './SegmentedTabs'
 import { CreateFidelityBond } from './fb/CreateFidelityBond'
 import { ExistingFidelityBond } from './fb/ExistingFidelityBond'
-import { SpendFidelityBondModal } from './fb/SpendFidelityBondModal'
+import { RenewFidelityBondModal, SpendFidelityBondModal } from './fb/SpendFidelityBondModal'
 import { EarnReportOverlay } from './EarnReport'
 import { OrderbookOverlay } from './Orderbook'
 import Balance from './Balance'
@@ -632,6 +632,20 @@ export default function Earn({ wallet }: EarnProps) {
                     }}
                   />
                 )}
+                {currentWalletInfo && renewFidelityBondId && (
+                  <RenewFidelityBondModal
+                    show={true}
+                    fidelityBondId={renewFidelityBondId}
+                    wallet={wallet}
+                    walletInfo={currentWalletInfo}
+                    onClose={({ mustReload }) => {
+                      setRenewFidelityBondId(undefined)
+                      if (mustReload) {
+                        reloadFidelityBonds({ delay: 0 })
+                      }
+                    }}
+                  />
+                )}
                 {fidelityBonds.map((fidelityBond, index) => {
                   const isExpired = !fb.utxo.isLocked(fidelityBond)
                   const actionsEnabled =

src/components/fb/CreateFidelityBond.tsx

@@ -254,8 +254,8 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
         return (
           <SelectDate
             description={t('earn.fidelity_bond.select_date.description')}
-            selectableYearsRange={yearsRange}
-            onDateSelected={(date) => setLockDate(date)}
+            yearsRange={yearsRange}
+            onChange={(date) => setLockDate(date)}
           />
         )
       case steps.selectJar:

src/components/fb/FidelityBondSteps.tsx

@@ -10,17 +10,15 @@ import { SelectableJar, jarInitial, jarFillLevel } from '../jars/Jar'
 import Sprite from '../Sprite'
 import Balance from '../Balance'
 import { CopyButton } from '../CopyButton'
-import LockdateForm from './LockdateForm'
+import LockdateForm, { LockdateFormProps } from './LockdateForm'
 import * as fb from './utils'
 import styles from './FidelityBondSteps.module.css'
 
 const cx = classnamesBind.bind(styles)
 
-interface SelectDateProps {
+type SelectDateProps = {
   description: string
-  selectableYearsRange: fb.YearsRange
-  onDateSelected: (lockdate: Api.Lockdate | null) => void
-}
+} & LockdateFormProps
 
 interface SelectJarProps {
   description: string
@@ -70,11 +68,11 @@ interface CreatedFidelityBondProps {
   frozenUtxos: Array<Utxo>
 }
 
-const SelectDate = ({ description, selectableYearsRange, onDateSelected }: SelectDateProps) => {
+const SelectDate = ({ description, yearsRange, disabled, onChange }: SelectDateProps) => {
   return (
     <div className="d-flex flex-column gap-4">
       <div className={styles.stepDescription}>{description}</div>
-      <LockdateForm onChange={(date) => onDateSelected(date)} yearsRange={selectableYearsRange} />
+      <LockdateForm yearsRange={yearsRange} onChange={onChange} disabled={disabled} />
     </div>
   )
 }

src/components/fb/LockdateForm.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import * as rb from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 
@@ -58,13 +58,14 @@ export const _selectableYears = (yearsRange: fb.YearsRange, now = new Date()): n
     .map((_, index) => index + now.getUTCFullYear() + extra)
 }
 
-interface LockdateFormProps {
+export interface LockdateFormProps {
   onChange: (lockdate: Api.Lockdate | null) => void
   yearsRange?: fb.YearsRange
   now?: Date
+  disabled?: boolean
 }
 
-const LockdateForm = ({ onChange, now, yearsRange }: LockdateFormProps) => {
+const LockdateForm = ({ onChange, now, yearsRange, disabled }: LockdateFormProps) => {
   const { i18n } = useTranslation()
   const _now = useMemo<Date>(() => now || new Date(), [now])
   const _yearsRange = useMemo<fb.YearsRange>(() => yearsRange || fb.DEFAULT_TIMELOCK_YEARS_RANGE, [yearsRange])
@@ -115,6 +116,7 @@ const LockdateForm = ({ onChange, now, yearsRange }: LockdateFormProps) => {
               onChange={(e) => setLockdateYear(parseInt(e.target.value, 10))}
               required
               isInvalid={!isLockdateYearValid}
+              disabled={disabled}
               data-testid="select-lockdate-year"
             >
               {selectableYears.map((year) => (
@@ -135,6 +137,7 @@ const LockdateForm = ({ onChange, now, yearsRange }: LockdateFormProps) => {
               onChange={(e) => setLockdateMonth(parseInt(e.target.value, 10) as Month)}
               required
               isInvalid={!isLockdateMonthValid}
+              disabled={disabled}
               data-testid="select-lockdate-month"
             >
               {selectableMonths.map((it) => (