Alert when user creates bond with already existing lockDate

joinmarket-webui · Apr 18, 2024 · 660c62c · 660c62c
1 parent 24987e6
commit 660c62c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 36 deletions.
diff --git a/src/components/fb/CreateFidelityBond.tsx b/src/components/fb/CreateFidelityBond.tsx
@@ -88,7 +88,6 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
   const [utxoIdsToBeSpent, setUtxoIdsToBeSpent] = useState([])
   const [createdFidelityBondUtxo, setCreatedFidelityBondUtxo] = useState<Utxo>()
   const [frozenUtxos, setFrozenUtxos] = useState<Utxos>([])
-  const [lockDateExists, setLockDateExists] = useState(false)
 
   const selectedUtxosTotalValue = useMemo(
     () => selectedUtxos.map((it) => it.value).reduce((prev, curr) => prev + curr, 0),
@@ -125,20 +124,8 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
     return currentWalletInfo?.fidelityBondSummary.fbOutputs || []
   }, [currentWalletInfo])
 
-  const ifLockTimeExists = (fidelityBonds: Utxos, lockDate: Api.Lockdate): void => {
-    setLockDateExists(false)
-    if (lockDate)
-      // eslint-disable-next-line array-callback-return
-      fidelityBonds.map((fidelityBond) => {
-        const locktime = fb.utxo.getLocktime(fidelityBond)
-        if (locktime === fb.lockdate.toTimestamp(lockDate)) {
-          setLockDateExists(true)
-        }
-      })
-  }
-
-  useEffect(() => {
-    if (lockDate) ifLockTimeExists(fidelityBonds, lockDate)
+  const bondWithSelectedLockDateAlreadyExists = useMemo(() => {
+    return lockDate && fidelityBonds.some((it) => fb.utxo.getLocktime(it) === fb.lockdate.toTimestamp(lockDate))
   }, [fidelityBonds, lockDate])
 
   useEffect(() => {
@@ -307,12 +294,20 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
         }
 
         return (
-          <SelectDate
-            description={t('earn.fidelity_bond.select_date.description')}
-            yearsRange={yearsRange}
-            lockDateExists={lockDateExists}
-            onChange={(date) => setLockDate(date)}
-          />
+          <>
+            <SelectDate
+              description={t('earn.fidelity_bond.select_date.description')}
+              yearsRange={yearsRange}
+              onChange={(date) => setLockDate(date)}
+            />
+            {bondWithSelectedLockDateAlreadyExists && (
+              <Alert
+                className="text-start mt-4"
+                variant="warning"
+                message={<Trans i18nKey="earn.fidelity_bond.select_date.warning_fb_with_same_expiry" />}
+              />
+            )}
+          </>
         )
       case steps.selectJar:
         return (

diff --git a/src/components/fb/FidelityBondSteps.tsx b/src/components/fb/FidelityBondSteps.tsx
@@ -68,11 +68,11 @@ interface CreatedFidelityBondProps {
   frozenUtxos: Array<Utxo>
 }
 
-const SelectDate = ({ description, yearsRange, disabled, lockDateExists, onChange }: SelectDateProps) => {
+const SelectDate = ({ description, yearsRange, disabled, onChange }: SelectDateProps) => {
   return (
     <div className="d-flex flex-column gap-4">
       <div className={styles.stepDescription}>{description}</div>
-      <LockdateForm yearsRange={yearsRange} lockDateExists={lockDateExists} onChange={onChange} disabled={disabled} />
+      <LockdateForm yearsRange={yearsRange} onChange={onChange} disabled={disabled} />
     </div>
   )
 }

diff --git a/src/components/fb/LockdateForm.tsx b/src/components/fb/LockdateForm.tsx
@@ -3,7 +3,6 @@ import * as rb from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import * as Api from '../../libs/JmWalletApi'
 import * as fb from './utils'
-import Alert from '../Alert'
 
 const monthFormatter = (locales: string) => new Intl.DateTimeFormat(locales, { month: 'long' })
 
@@ -61,12 +60,11 @@ export const _selectableYears = (yearsRange: fb.YearsRange, now = new Date()): n
 export interface LockdateFormProps {
   onChange: (lockdate: Api.Lockdate | null) => void
   yearsRange?: fb.YearsRange
-  lockDateExists?: boolean
   now?: Date
   disabled?: boolean
 }
 
-const LockdateForm = ({ onChange, now, yearsRange, lockDateExists, disabled }: 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])
@@ -78,7 +76,6 @@ const LockdateForm = ({ onChange, now, yearsRange, lockDateExists, disabled }: L
 
   const [lockdateYear, setLockdateYear] = useState(initialYear)
   const [lockdateMonth, setLockdateMonth] = useState(initialMonth)
-  const [timestamp, setTimestamp] = useState(Date.UTC(lockdateYear, lockdateMonth - 1, 1))
 
   const selectableYears = useMemo(() => _selectableYears(_yearsRange, _now), [_yearsRange, _now])
   const selectableMonths = useMemo(
@@ -98,12 +95,12 @@ const LockdateForm = ({ onChange, now, yearsRange, lockDateExists, disabled }: L
 
   useEffect(() => {
     if (isLockdateYearValid && isLockdateMonthValid) {
-      setTimestamp(Date.UTC(lockdateYear, lockdateMonth - 1, 1))
+      const timestamp = Date.UTC(lockdateYear, lockdateMonth - 1, 1)
       onChange(fb.lockdate.fromTimestamp(timestamp))
     } else {
       onChange(null)
     }
-  }, [lockdateYear, lockdateMonth, isLockdateYearValid, isLockdateMonthValid, timestamp, onChange])
+  }, [lockdateYear, lockdateMonth, isLockdateYearValid, isLockdateMonthValid, onChange])
 
   return (
     <rb.Container>
@@ -150,13 +147,6 @@ const LockdateForm = ({ onChange, now, yearsRange, lockDateExists, disabled }: L
             </rb.Form.Select>
           </rb.Form.Group>
         </rb.Col>
-        {lockDateExists && (
-          <Alert
-            className="text-start mt-4"
-            variant="warning"
-            message={<Trans i18nKey="earn.fidelity_bond.select_date.warning_fb_with_same_expiry" />}
-          />
-        )}
       </rb.Row>
     </rb.Container>
   )