From 72c554673c1a36eab536e8005d651f9ce83f06af Mon Sep 17 00:00:00 2001 From: barrytra Date: Sat, 2 Nov 2024 15:40:02 +0530 Subject: [PATCH] fb(ui): creating fidelity bond display on earn page instead of modal --- src/components/Earn.tsx | 18 +++- src/components/fb2/CreateFidelityBond.tsx | 36 ++++++-- .../fb2/ExistingFidelityBond.module.css | 23 ++++- src/components/fb2/ExistingFidelityBond.tsx | 92 +++++++++++++++++-- src/components/fb2/FidelityBondSteps.tsx | 1 + src/i18n/locales/en/translation.json | 2 +- 6 files changed, 151 insertions(+), 21 deletions(-) diff --git a/src/components/Earn.tsx b/src/components/Earn.tsx index d2facaa78..2b958647f 100644 --- a/src/components/Earn.tsx +++ b/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,6 +443,10 @@ 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() + const [lockDate, setLockDate] = useState(null) + const [amount, setAmount] = useState(0) + const [isCreatingFB, setIsCreatingFB] = useState(false) const [initialValues, setInitialValues] = useState(initialFormValues()) @@ -450,6 +454,7 @@ export default function Earn({ wallet }: EarnProps) { return currentWalletInfo?.fidelityBondSummary.fbOutputs || [] }, [currentWalletInfo]) + console.log(fidelityBonds) const [moveToJarFidelityBondId, setMoveToJarFidelityBondId] = useState() const [renewFidelityBondId, setRenewFidelityBondId] = useState() @@ -708,6 +713,9 @@ export default function Earn({ wallet }: EarnProps) { ) })} + {isCreatingFB && ( + + )} <> {!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)} /> ) : ( diff --git a/src/components/fb2/CreateFidelityBond.tsx b/src/components/fb2/CreateFidelityBond.tsx index f5cd37e14..aa2bbb0bd 100644 --- a/src/components/fb2/CreateFidelityBond.tsx +++ b/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() const [step, setStep] = useState(steps.selectDate) - const [lockDate, setLockDate] = useState(null) const [selectedJar, setSelectedJar] = useState() const [selectedUtxos, setSelectedUtxos] = useState([]) - const [timelockedAddress, setTimelockedAddress] = useState() // 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 )} - { + {/* { - } + } */}
-
- {isExpired ? ( + {isExpired ? ( +
Fidelity Bond expired - ) : ( - t('earn.fidelity_bond.existing.title_active') - )} -
+
+ ) : ( +
+ + Active Fidelity Bond + +
+ )}
{ + 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 ( +
+
+
+ Creating Fidelity Bond +
+
+
+
+
+ +
+
+ +
+
Amount
+
+ +
+
+
+
+ +
+
{t(`earn.fidelity_bond.existing.${'label_locked_until'}`)}
+
{lockDate}
+
+
+
+ } + successText={} + value={timelockedAddress!} + className={styles.icon} + /> +
+
{t('earn.fidelity_bond.existing.label_address')}
+
+ {timelockedAddress} +
+
+
+
+
+
+ ) +} + +export { ExistingFidelityBond, CreatingFidelityBond } diff --git a/src/components/fb2/FidelityBondSteps.tsx b/src/components/fb2/FidelityBondSteps.tsx index 7ac662675..56f48925f 100644 --- a/src/components/fb2/FidelityBondSteps.tsx +++ b/src/components/fb2/FidelityBondSteps.tsx @@ -148,6 +148,7 @@ const SelectUtxos = ({ selectedUtxos, utxos, onUtxoSelected, onUtxoDeselected }: } else { onUtxoDeselected(utxo) } + console.log('selected Utxos:', selectedUtxos) } return ( diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json index ed486d7dc..c653f19d9 100644 --- a/src/i18n/locales/en/translation.json +++ b/src/i18n/locales/en/translation.json @@ -547,7 +547,7 @@ "button_create": "Create Fidelity Bond" }, "existing": { - "title_active": "Fidelity Bond", + "title_active": "Active Fidelity Bond", "title_expired": "Fidelity Bond <1>expired", "label_locked_until": "Locked until", "label_expired_on": "Expired on",