fix: request cta flashing state

[kushagrasarathe]

• fixes TASK-18410

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
peanut-wallet	Building	Preview, Comment	Mar 12, 2026 5:15pm

[kushagrasarathe]

@coderabbitai review in depth.

Evaluate:

• risk of introducing new bugs and breaking existing functionality
• performance impact and latency
• code quality and DRY

Also, write a very concise testing guide for QA

[notion-workspace]

🪲 Staging Bug: fix login state of cta in send flow (also check other flows)

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 31fa1037-fe9a-4128-884f-91c2b8b559a5

📥 Commits

Reviewing files that changed from the base of the PR and between df80e59 and 6ddd050.

📒 Files selected for processing (3)

• src/features/payments/flows/direct-send/useDirectSendFlow.ts
• src/features/payments/flows/semantic-request/useSemanticRequestFlow.ts
• src/features/payments/shared/components/SendWithPeanutCta.tsx

---

Walkthrough

The changes add balance-loading awareness to payment flow error handling and update authentication state management in a CTA component. The isFetchingBalance flag from useWallet is introduced to gate insufficient balance errors during balance fetch operations, and SendWithPeanutCta uses a composite authentication state to show logged-in UI while auth is resolving.

Changes

Cohort / File(s)	Summary
Payment flow balance-loading gates src/features/payments/flows/direct-send/useDirectSendFlow.ts, src/features/payments/flows/semantic-request/useSemanticRequestFlow.ts	Added isFetchingBalance from useWallet to prevent showing insufficient balance errors while balance is being fetched. Updated isInsufficientBalance computation to gate on completed balance loading and added isFetchingBalance to dependency arrays.
Authentication state management src/features/payments/shared/components/SendWithPeanutCta.tsx	Introduced showAsLoggedIn composite state `(isFetchingUser

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: request cta flashing state' clearly identifies the main change: fixing a flashing state issue in the request CTA component across multiple payment flow files.
Description check	✅ Passed	The description 'fixes TASK-18410' is related to the changeset, though minimal. It references a task ticket that provides context for the changes made across the payment flow files.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/request-cta

📝 Coding Plan

• Generate coding plan for human review comments

---

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

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

Let me gather the PR details and diff first.

---

🏁 Script executed:

#!/bin/bash
# Get PR details and diff
gh pr view 1745 --repo peanutprotocol/peanut-ui --json title,body,files,additions,deletions,changedFiles
echo "---DIFF---"
gh pr diff 1745 --repo peanutprotocol/peanut-ui

Length of output: 5520

---

Let me now examine the relevant hooks and component context more deeply.

---

🏁 Script executed:

#!/bin/bash
# Find and read useWallet hook
fd -e ts -e tsx 'useWallet' --exec echo {}
echo "---"
# Find isFetchingBalance definition
rg -n "isFetchingBalance" --type ts --type tsx -C 3
echo "---"
# Find isFetchingUser in useAuth
rg -n "isFetchingUser" --type ts --type tsx -C 3
echo "---"
# Read the full SendWithPeanutCta component
fd -e tsx 'SendWithPeanutCta' --exec cat {}

Length of output: 3961

---

🏁 Script executed:

#!/bin/bash
echo "=== useWallet.ts ==="
cat src/hooks/wallet/useWallet.ts

echo "=== useWalletBalances.ts ==="
cat src/hooks/useWalletBalances.ts

echo "=== isFetchingBalance in all files ==="
rg -n "isFetchingBalance" -C 3

echo "=== isFetchingUser in authContext ==="
rg -n "isFetchingUser" -C 3

Length of output: 47865

---

@kushagrasarathe Here's the in-depth review:

---

🔍 In-Depth Review: fix: request cta flashing state

What the PR does

Two related flash problems are fixed:

1. "Insufficient balance" flash — isInsufficientBalance could briefly compute true before the balance query resolved. Fixed by gating on !isFetchingBalance in both useDirectSendFlow and useSemanticRequestFlow.
2. "Join Peanut" flash — The SendWithPeanutCta button could briefly render the guest state (!isLoggedIn) while auth was still in-flight. Fixed by showAsLoggedIn = isFetchingUser || isLoggedIn.

---

✅ Risk of Introducing New Bugs

Low overall risk. A few edge cases to be aware of:

Scenario	Risk	Notes
isFetchingBalance stuck permanently (e.g., network timeout)	Low	isInsufficientBalance stays false — user never sees "Add funds" CTA. Better than a false positive, and useBalance has TanStack Query retry logic
showAsLoggedIn=true for a logged-out user during fetch	Low-Negligible	During the isFetchingUser window, a non-logged-in user sees "Send with Peanut" briefly, then it flips to "Join Peanut" — an inverse micro-flash. Practically imperceptible given TanStack Query's fast resolution from cache
Click silently swallowed during isFetchingUser	Negligible	The early return if (isFetchingUser) return prevents navigation for any user during this window, including logged-in ones. The window is transient

Consistency check — good news: The useContributePotFlow.ts and RequestPotActionList.tsx already had the !isFetchingBalance guard pattern before this PR. This PR simply brings useDirectSendFlow and useSemanticRequestFlow to parity. No new behavioral contract is introduced.

---

⚡ Performance Impact and Latency

Negligible. Both isFetchingBalance (from useWallet) and isFetchingUser (from useAuth) are pre-existing reactive values — no new queries, subscriptions, or computations are introduced. Adding one boolean to a useMemo dependency array is essentially free.

---

🧹 Code Quality & DRY

Mostly good. A few observations:

1. Parity achieved: The fix correctly mirrors the existing pattern in useContributePotFlow:

   // RequestPotActionList.tsx (pre-existing, different but equivalent pattern)
   if (isFetchingBalance) return true // assume sufficient while loading to avoid flash

   vs the new pattern:

   // useDirectSendFlow / useSemanticRequestFlow (new)
   !isFetchingBalance && !hasEnoughBalance && ...

   These are logically equivalent outcomes (suppress the insufficient-balance state during loading), but the pattern differs slightly between the component and the hooks. Not a bug, but a minor inconsistency.

2. Pre-existing DRY tech debt (not introduced here): The isInsufficientBalance memo is duplicated across three flow hooks with minor variations. This could eventually be extracted into a shared useInsufficientBalanceGuard hook, but is out of scope for this bug fix.

3. Comments are clear: Both guard conditions are well-documented with inline comments explaining why the guard exists, which is good practice.

---

🧪 Concise QA Testing Guide

Test environment: Logged-out user + logged-in user with both sufficient and insufficient balance.

#	Scenario	Steps	Expected
1	"Join Peanut" flash	Open a request payment page while not logged in, observe initial render	Button should NOT briefly show "Send with Peanut" icon/text before switching to "Join Peanut"
2	"Add funds" flash	Log in, open a direct send or semantic request page with an amount greater than your balance, watch initial load	Should NOT briefly flash "Add funds to Peanut" then flicker
3	Click during auth load	Hard-refresh a payment page and click the CTA button as fast as possible	Click should be silently ignored (no redirect, no error) while auth resolves
4	Logged-in normal flow	Log in with sufficient balance, open a payment page, click CTA	Should execute payment normally
5	Logged-in insufficient balance	Log in with insufficient balance, open a payment page with a high amount	Should show "Add funds to Peanut" and redirect to /add-money on click
6	Guest redirect	Open a payment page while logged out, wait for auth to settle, click CTA	Should redirect to /setup
7	Regression: contribute-pot flow	Test the pot contribution flow for the same flash scenarios	Should remain unaffected (already had the guard)

---

🧠 Learnings used

Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 852
File: src/hooks/useTransactionHistory.ts:177-239
Timestamp: 2025-05-14T21:16:06.369Z
Learning: When reviewing code, pay attention to and resolve CodeRabbit comments as they can contain useful refactoring suggestions and insights.

---

Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 594
File: src/components/Request/Pay/Views/Initial.view.tsx:188-213
Timestamp: 2024-12-31T15:08:15.640Z
Learning: Always resolve coderabbit comments when reviewing code, since they can contain useful suggestions.