Show success message after settle on coin control

[bordalix]

Message stays for 5 seconds

Preview:

Screen.Recording.2025-10-13.at.16.29.10.mov

@tiero please review

Summary by CodeRabbit

• New Features
  • Adds a clear success confirmation in Settings → VTXOs after a renewal/settlement completes: a green success banner appears and auto-dismisses after 5 seconds.
  • Improves on-screen status handling for the renewal flow so users receive immediate, prominent visual feedback when the action succeeds.

[coderabbitai]

Walkthrough

Added success feedback to the Vtxos settings: imported WarningBox; introduced duration and success state; added an effect to auto-reset success after 5s with cleanup; set success on successful settleVtxos; conditionally render a green WarningBox on success.

Changes

Cohort / File(s)	Summary of Changes
Settings UI state & feedback src/screens/Settings/Vtxos.tsx	Imported WarningBox; added duration (number) and success (boolean) state variables; added an effect to auto-reset success after 5s with cleanup; called showSuccess / set success = true after successful settleVtxos; conditionally rendered a green WarningBox with "Coins renewed successfully" when success is true.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Vtxos as Settings/Vtxos Component
  participant Svc as settleVtxos()

  User->>Vtxos: Click "Settle VTXOs"
  Vtxos->>Svc: invoke settleVtxos()
  Svc-->>Vtxos: resolve (success)
  rect rgba(200,255,200,0.2)
    Vtxos->>Vtxos: set success = true (showSuccess)
    Vtxos-->>User: render green WarningBox ("Coins renewed successfully")
  end
  Note over Vtxos: effect clears success after 5s (cleanup on unmount)

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title clearly states the primary change of displaying a success message after a settle action in coin control, matching the PR’s implementation of a temporary success alert and is both concise and specific.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch show_success_settle

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c4eb918 and 98ebcb2.

📒 Files selected for processing (1)

• src/screens/Settings/Vtxos.tsx (4 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/screens/Settings/Vtxos.tsx (2)

src/lib/asp.ts (1)

• settleVtxos (150-152)

src/components/Warning.tsx (1)

• WarningBox (12-38)

🔇 Additional comments (2)

src/screens/Settings/Vtxos.tsx (2)

68-73: Previous critical issues resolved correctly.

The timeout cleanup implementation is now correct, and the hook is properly placed before the early return. This eliminates the memory leak risk and satisfies React's rules of hooks.

---

82-82: Clean success feedback pattern.

The success state implementation provides clear user feedback after the settle action, with automatic dismissal after 5 seconds. The conditional rendering ensures the success message only appears when appropriate.

Also applies to: 130-130

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cloudflare-workers-and-pages]

Deploying wallet-bitcoin-v8 with    Cloudflare Pages

Latest commit:	98ebcb2
Status:	✅  Deploy successful!
Preview URL:	https://f3e807dc.wallet-v8.pages.dev
Branch Preview URL:	https://show-success-settle.wallet-v8.pages.dev

View logs

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/screens/Settings/Vtxos.tsx (1)

75-85: Reset success state when an error occurs.

The success state is not cleared in the error handler. If a previous successful settle occurred, both the success message and error message will be displayed simultaneously, creating a confusing user experience.

Apply this diff to reset the success state:

   const handleRollover = async () => {
     try {
+      setSuccess(false)
       setRollingover(true)
       await settleVtxos(svcWallet)
       setRollingover(false)
       showSuccess()
     } catch (err) {
       setError(extractError(err))
+      setSuccess(false)
       setRollingover(false)
     }
   }

🧹 Nitpick comments (1)

src/screens/Settings/Vtxos.tsx (1)

34-34: The duration state appears unrelated to the PR objectives.

The duration state is used for the Reminder component (line 182) and market hour calculations, which seems separate from the success message feature. Consider clarifying why this state was added in this PR, or move it to a separate commit for better separation of concerns.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fce53cf and 3fed592.

📒 Files selected for processing (1)

• src/screens/Settings/Vtxos.tsx (4 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/screens/Settings/Vtxos.tsx (2)

src/lib/asp.ts (1)

• settleVtxos (150-152)

src/components/Warning.tsx (1)

• WarningBox (12-38)

🔇 Additional comments (1)

src/screens/Settings/Vtxos.tsx (1)

23-23: LGTM! Success feedback implementation is well-structured.

The addition of the WarningBox import, success state, and conditional rendering provides clear user feedback after a successful settle operation. The approach aligns with the PR objectives.

Also applies to: 41-41, 80-80, 128-128

[tiero]

utACK for me

[cloudflare-workers-and-pages]

Deploying wallet-signet with    Cloudflare Pages

Latest commit:	98ebcb2
Status:	✅  Deploy successful!
Preview URL:	https://a3a98150.wallet-23u.pages.dev
Branch Preview URL:	https://show-success-settle.wallet-23u.pages.dev

View logs

[cloudflare-workers-and-pages]

Deploying wallet-mutinynet with    Cloudflare Pages

Latest commit:	98ebcb2
Status:	✅  Deploy successful!
Preview URL:	https://c2c85f6b.arkade-wallet.pages.dev
Branch Preview URL:	https://show-success-settle.arkade-wallet.pages.dev

View logs

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3fed592 and c4eb918.

📒 Files selected for processing (1)

• src/screens/Settings/Vtxos.tsx (4 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/screens/Settings/Vtxos.tsx (2)

src/lib/asp.ts (1)

• settleVtxos (150-152)

src/components/Warning.tsx (1)

• WarningBox (12-38)

🪛 Biome (2.1.2)

src/screens/Settings/Vtxos.tsx

[error] 74-74: This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.

Hooks should not be called after an early return.

For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

(lint/correctness/useHookAtTopLevel)