[Frontend] Deposit/withdraw operation hooks regenerate transactionId with Date.now() every render, so progress UI vanishes and buttons never lock during an in-flight tx

[grantfox-oss]

Telegram (ask questions / claim the issue here first): https://t.me/+DOylgFv1jyJlNzM0

Why this matters

In useRepaymentOperation.ts the transaction id is recomputed on every render: const transactionId = deposit-${Date.now()} (line 129) and const transactionId = withdrawal-${Date.now()} (line 220), then passed to useTransaction(transactionId). useTransaction calls useOptimisticUI() (useOptimisticUI.ts:209) which subscribes the component to the whole store, so every store write inside executeDeposit (start/sign/submit/confirm) re-renders LendPageClient and mints a NEW id. The displayed value depositOp.transaction = getTransaction(newId) is undefined while the in-flight executeDeposit closure keeps writing to the original id. Consequence: after the first network await (buildDeposit.mutateAsync) the ids diverge, OperationProgress (LendPageClient.tsx:382 and :451) hits if (!transaction) return null (OperationProgress.tsx:41) and shows nothing during signing/submitting/confirming, and depositOp.isLoading/withdrawalOp.isLoading (LendPageClient.tsx:376,431) stays false because status of an undefined tx is falsy - so the Deposit/Withdraw buttons are never disabled mid-flight, permitting a duplicate deposit/withdraw submission with a second click.

Acceptance criteria

• Compute the operation id once with useRef/useState/useMemo (stable across renders) in useDepositOperation, useWithdrawalOperation and useRepaymentOperation
• OperationProgress reflects pending/signing/submitted/confirming live for the whole deposit/withdraw flow
• Deposit/Withdraw buttons stay disabled (and show Depositing.../Withdrawing...) until the operation settles, preventing double submission

Files to touch

• frontend/src/app/hooks/useRepaymentOperation.ts
• frontend/src/app/[locale]/lend/LendPageClient.tsx
• frontend/src/app/hooks/useOptimisticUI.ts
• frontend/src/app/components/ui/OperationProgress.tsx

Out of scope

• Reworking the simulated executeRepayment in the unused LoanRepaymentForm

[Padom2020]

Hi! I'd like to apply to work on this issue.
I'm a fullstack developer with over 5 years of experience, including React hooks/state management and transaction flow UI for financial applications. I've built highly complex production software including my ecommerce platform digemart.com, eventcrib.com, and stannscollegeddl.org.
I understand the bug clearly: transactionId is recomputed with Date.now() on every render in useRepaymentOperation.ts (and the equivalent deposit/withdrawal hooks), and because useOptimisticUI subscribes to the whole store, every store write during executeDeposit triggers a re-render that mints a new id so the displayed transaction becomes undefined after the first await, OperationProgress shows nothing mid-flight, and isLoading stays falsy, leaving buttons unlocked and allowing duplicate submissions.
My plan:

Make the operation id stable across renders using useRef (most appropriate here since it's a one-time id with no need to trigger a render itself) in useDepositOperation, useWithdrawalOperation, and useRepaymentOperation.
Verify OperationProgress then correctly reflects pending/signing/submitted/confirming throughout the full flow, since it'll now be looking up the same id the in-flight closure is writing to.
Confirm isLoading on depositOp/withdrawalOp correctly reflects in-flight state so the Deposit/Withdraw buttons stay disabled and show the loading label until the operation settles.
Test the double-click scenario specifically clicking Deposit twice in quick succession should now be blocked, not just visually but at the submission level.
Leave the unused LoanRepaymentForm's simulated executeRepayment untouched, per the out-of-scope note.

I'll open a draft PR within 6 hours of confirming scope.
Looking forward to contributing!

[Martins-O]

@Martins-O has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hey Maintainer,

I would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Martins-O to this issue.

[dannyy2000]

@dannyy2000 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi maintainer, can iwork on this

ℹ️ Repo Maintainers: To accept this application, review their application or assign @dannyy2000 to this issue.

[grantfox-oss]

🦊 GrantFox — @dannyy2000 has been assigned to this issue!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #1105)
2. Your PR will be reviewed by the LabsCrypt maintainers

Good luck! Track your progress on GrantFox.

[drips-wave]

Congratulations, @dannyy2000! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @dannyy2000: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox!

@dannyy2000's PR #1260 was approved and merged by @ogazboiz.

🏆 @dannyy2000: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (226 total points). Track your full progress on GrantFox.

👏 Great work, @dannyy2000! Keep contributing to LabsCrypt.

[drips-wave]

This issue has been completed by @dannyy2000 as part of the Stellar Wave Program's 6th Wave 🥳

😎 @dannyy2000: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.