fb(ui): creating fidelity bond display on earn page instead of modal

src/components/Earn.tsx

@@ -28,8 +28,8 @@ import PageTitle from './PageTitle'
 import SegmentedTabs from './SegmentedTabs'
 import { CreateFidelityBond } from './fb/CreateFidelityBond'
 import { CreateFidelityBond2 } from './fb2/CreateFidelityBond'
-import { ExistingFidelityBond } from './fb/ExistingFidelityBond'
-import { RenewFidelityBondModal, SpendFidelityBondModal } from './fb/SpendFidelityBondModal'
+import { ExistingFidelityBond, CreatingFidelityBond } from './fb2/ExistingFidelityBond'
+import { RenewFidelityBondModal, SpendFidelityBondModal } from './fb2/SpendFidelityBondModal'
 import { EarnReportOverlay } from './EarnReport'
 import { OrderbookOverlay } from './Orderbook'
 import Balance from './Balance'
@@ -443,13 +443,18 @@ export default function Earn({ wallet }: EarnProps) {
   const [isWaitingMakerStop, setIsWaitingMakerStop] = useState(false)
   const [isShowReport, setIsShowReport] = useState(false)
   const [isShowOrderbook, setIsShowOrderbook] = useState(false)
+  const [timelockedAddress, setTimelockedAddress] = useState<Api.BitcoinAddress>()
+  const [lockDate, setLockDate] = useState<Api.Lockdate | null>(null)
+  const [amount, setAmount] = useState<Api.AmountSats>(0)
+  const [isCreatingFB, setIsCreatingFB] = useState(false)
 
   const [initialValues, setInitialValues] = useState(initialFormValues())
 
   const fidelityBonds = useMemo(() => {
     return currentWalletInfo?.fidelityBondSummary.fbOutputs || []
   }, [currentWalletInfo])
 
+  console.log(fidelityBonds)
   const [moveToJarFidelityBondId, setMoveToJarFidelityBondId] = useState<Api.UtxoId>()
   const [renewFidelityBondId, setRenewFidelityBondId] = useState<Api.UtxoId>()
 
@@ -708,6 +713,9 @@ export default function Earn({ wallet }: EarnProps) {
                     </ExistingFidelityBond>
                   )
                 })}
+                {isCreatingFB && (
+                  <CreatingFidelityBond timelockedAddress={timelockedAddress} lockDate={lockDate} amount={amount} />
+                )}
                 <>
                   {!serviceInfo?.makerRunning &&
                     !serviceInfo?.coinjoinInProgress &&
@@ -727,6 +735,12 @@ export default function Earn({ wallet }: EarnProps) {
                           wallet={wallet}
                           walletInfo={currentWalletInfo}
                           onDone={() => reloadFidelityBonds({ delay: RELOAD_FIDELITY_BONDS_DELAY_MS })}
+                          timelockedAddress={timelockedAddress}
+                          setTimelockedAddress={(address) => setTimelockedAddress(address)}
+                          lockDate={lockDate}
+                          setLockDate={(date) => setLockDate(date)}
+                          setAmount={(amount) => setAmount(amount)}
+                          setIsCreatingFB={(input) => setIsCreatingFB(input)}
                         />
                       </>
                     ) : (

src/components/fb2/CreateFidelityBond.tsx

@@ -57,28 +57,46 @@ interface CreateFidelityBondProps {
   wallet: CurrentWallet
   walletInfo: WalletInfo
   onDone: () => void
+  timelockedAddress: Api.BitcoinAddress | undefined
+  setTimelockedAddress: (address: Api.BitcoinAddress | undefined) => void
+  lockDate: Api.Lockdate | null
+  setLockDate: (date: Api.Lockdate | null) => void
+  setAmount: (amount: Api.AmountSats) => void
+  setIsCreatingFB: (input: boolean) => void
 }
 
-const CreateFidelityBond2 = ({ otherFidelityBondExists, wallet, walletInfo, onDone }: CreateFidelityBondProps) => {
+const CreateFidelityBond2 = ({
+  otherFidelityBondExists,
+  wallet,
+  walletInfo,
+  onDone,
+  timelockedAddress,
+  setTimelockedAddress,
+  lockDate,
+  setLockDate,
+  setAmount,
+  setIsCreatingFB,
+}: CreateFidelityBondProps) => {
   const { t } = useTranslation()
   const reloadCurrentWalletInfo = useReloadCurrentWalletInfo()
   const feeConfigValues = useFeeConfigValues()[0]
 
   const [showCreateFidelityBondModal, setShowCreateFidelityBondModal] = useState(false)
-  const [creatingFidelityBond, setCreatingFidelityBond] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [alert, setAlert] = useState<SimpleAlert>()
   const [step, setStep] = useState(steps.selectDate)
-  const [lockDate, setLockDate] = useState<Api.Lockdate | null>(null)
   const [selectedJar, setSelectedJar] = useState<JarIndex>()
   const [selectedUtxos, setSelectedUtxos] = useState<Utxos>([])
-  const [timelockedAddress, setTimelockedAddress] = useState<Api.BitcoinAddress>()
 
   // Check if all utxos are selected
   const selectedUtxosTotalValue = useMemo(
     () => selectedUtxos.map((it) => it.value).reduce((prev, curr) => prev + curr, 0),
     [selectedUtxos],
   )
+  useEffect(() => {
+    setAmount(selectedUtxosTotalValue)
+  }, [selectedUtxosTotalValue, setAmount])
+
   const allUtxosSelected = useMemo(
     () => walletInfo.balanceSummary.calculatedTotalBalanceInSats === selectedUtxosTotalValue,
     [walletInfo, selectedUtxosTotalValue],
@@ -157,7 +175,7 @@ const CreateFidelityBond2 = ({ otherFidelityBondExists, wallet, walletInfo, onDo
           setAlert({ variant: 'danger', message: err.message })
         })
     },
-    [t, wallet],
+    [t, wallet, setTimelockedAddress],
   )
 
   useEffect(() => {
@@ -270,7 +288,7 @@ const CreateFidelityBond2 = ({ otherFidelityBondExists, wallet, walletInfo, onDo
       const abortCtrl = new AbortController()
       const requestContext = { ...wallet, signal: abortCtrl.signal }
       reset()
-      setCreatingFidelityBond(true)
+      setIsCreatingFB(true)
       await spendUtxosWithDirectSend(
         requestContext,
         {
@@ -289,7 +307,7 @@ const CreateFidelityBond2 = ({ otherFidelityBondExists, wallet, walletInfo, onDo
             Api.Helper.throwResolved(res, errorResolver(t, 'earn.fidelity_bond.move.error_spending_fidelity_bond')),
         },
       )
-      setCreatingFidelityBond(false)
+      setIsCreatingFB(false)
       onDone()
       return
     }
@@ -365,7 +383,7 @@ const CreateFidelityBond2 = ({ otherFidelityBondExists, wallet, walletInfo, onDo
           </div>
         </div>
       )}
-      {
+      {/* {
         <rb.Modal
           show={creatingFidelityBond}
           animation={true}
@@ -384,7 +402,7 @@ const CreateFidelityBond2 = ({ otherFidelityBondExists, wallet, walletInfo, onDo
             </div>
           </rb.Modal.Body>
         </rb.Modal>
-      }
+      } */}
       <rb.Modal
         show={showCreateFidelityBondModal}
         animation={true}

src/components/fb2/ExistingFidelityBond.module.css

@@ -1,11 +1,18 @@
 .container {
-  border: 1px solid var(--bs-gray-200);
+  border: 1px solid;
+  border-color: rgb(120, 200, 0);
+  border-radius: 0.3rem;
+  padding: 1.25rem;
+}
+
+.creatingContainer {
+  border: 1px solid var(--bs-gray-400);
   border-radius: 0.3rem;
   padding: 1.25rem;
 }
 
 :root[data-theme='dark'] .container {
-  border-color: var(--bs-gray-700);
+  border-color: rgb(148, 245, 2);
 }
 
 .expired {
@@ -18,6 +25,18 @@
 }
 
 .title {
+  width: 100%;
+  font-size: 1.2rem;
+  color: rgb(120, 200, 0);
+}
+
+.creatingTitle {
+  width: 100%;
+  font-size: 1.2rem;
+  color: var(--bs-body-color);
+}
+
+.titleExpired {
   width: 100%;
   font-size: 1.2rem;
   color: var(--bs-body-color);

src/components/fb2/ExistingFidelityBond.tsx

@@ -8,6 +8,8 @@ import Balance from '../Balance'
 import { CopyButton } from '../CopyButton'
 import * as fb from './utils'
 import styles from './ExistingFidelityBond.module.css'
+import * as Api from '../../libs/JmWalletApi'
+import * as rb from 'react-bootstrap'
 
 interface ExistingFidelityBondProps {
   fidelityBond: Utxo
@@ -38,15 +40,19 @@ const ExistingFidelityBond = ({ fidelityBond, children }: PropsWithChildren<Exis
       })}
     >
       <div className="d-flex justify-content-between align-items-center">
-        <div className={styles.title}>
-          {isExpired ? (
+        {isExpired ? (
+          <div className={styles.titleExpired}>
             <Trans i18nKey="earn.fidelity_bond.existing.title_expired">
               Fidelity Bond <strong>expired</strong>
             </Trans>
-          ) : (
-            t('earn.fidelity_bond.existing.title_active')
-          )}
-        </div>
+          </div>
+        ) : (
+          <div className={styles.title}>
+            <Trans i18nKey="earn.fidelity_bond.existing.title_active">
+              <strong>Active</strong> Fidelity Bond
+            </Trans>
+          </div>
+        )}
         <div className="d-flex align-items-center gap-1">
           <Sprite symbol="coins" width="24" height="24" />
           <Balance
@@ -96,4 +102,76 @@ const ExistingFidelityBond = ({ fidelityBond, children }: PropsWithChildren<Exis
   )
 }
 
-export { ExistingFidelityBond }
+interface CreatingFidelityBondProps {
+  timelockedAddress: Api.BitcoinAddress | undefined
+  lockDate: Api.Lockdate | null
+  amount: Api.AmountSats
+}
+
+const CreatingFidelityBond = ({ timelockedAddress, lockDate, amount }: CreatingFidelityBondProps) => {
+  const settings = useSettings()
+  const { t, i18n } = useTranslation()
+
+  // const humanReadableLockDuration = useMemo(() => {
+  //   const locktime = fb.utxo.getLocktime(fidelityBond)
+  //   if (!locktime) return '-'
+  //   return fb.time.humanReadableDuration({
+  //     to: locktime,
+  //     locale: i18n.resolvedLanguage || i18n.language,
+  //   })
+  // }, [i18n, fidelityBond])
+
+  return (
+    <div className={classNames(styles.creatingContainer)}>
+      <div className="d-flex justify-content-between align-items-center">
+        <div className={styles.creatingTitle}>
+          <strong>Creating </strong> Fidelity Bond
+        </div>
+        <div className="d-flex align-items-center gap-1">
+          <rb.Spinner as="span" animation="border" size="sm" role="status" aria-hidden="true" className="me-2" />
+        </div>
+      </div>
+      <div className="d-flex align-items-center justify-content-start gap-4 px-3 mt-3">
+        <Sprite className={styles.jar} symbol={'fb-filled'} width="46px" height="74px" />
+        <div className="d-flex flex-column gap-3">
+          <div className="d-flex align-items-center gap-2">
+            <Sprite symbol="coins" width="24" height="24" />
+            <div className="d-flex flex-column">
+              <div className={styles.label}>Amount</div>
+              <div className={styles.content}>
+                <Balance
+                  valueString={amount.toString()}
+                  convertToUnit={settings.unit}
+                  showBalance={settings.showBalance}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="d-flex align-items-center gap-2">
+            <Sprite symbol="clock" width="18" height="18" className={styles.icon} />
+            <div className="d-flex flex-column">
+              <div className={styles.label}>{t(`earn.fidelity_bond.existing.${'label_locked_until'}`)}</div>
+              <div className={styles.content}>{lockDate}</div>
+            </div>
+          </div>
+          <div className="d-flex align-items-center gap-2">
+            <CopyButton
+              text={<Sprite symbol="copy" width="18" height="18" />}
+              successText={<Sprite symbol="checkmark" width="18" height="18" />}
+              value={timelockedAddress!}
+              className={styles.icon}
+            />
+            <div className="d-flex flex-column">
+              <div className={styles.label}>{t('earn.fidelity_bond.existing.label_address')}</div>
+              <div className={styles.content}>
+                <code>{timelockedAddress}</code>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { ExistingFidelityBond, CreatingFidelityBond }

src/components/fb2/FidelityBondSteps.tsx

@@ -148,6 +148,7 @@ const SelectUtxos = ({ selectedUtxos, utxos, onUtxoSelected, onUtxoDeselected }:
     } else {
       onUtxoDeselected(utxo)
     }
+    // console.log('selected Utxos:', selectedUtxos)
   }
 
   return (

src/i18n/locales/en/translation.json

@@ -547,7 +547,7 @@
         "button_create": "Create Fidelity Bond"
       },
       "existing": {
-        "title_active": "Fidelity Bond",
+        "title_active": "<strong>Active</strong> Fidelity Bond",
         "title_expired": "Fidelity Bond <1>expired</1>",
         "label_locked_until": "Locked until",
         "label_expired_on": "Expired on",