fix: send flow cta

[kushagrasarathe]

• fixes TASK-14256 : request flow cta being shown in direct send
• also fixes TASK-13591 : success sound not playing on direct send

[notion-workspace]

🪲 Bug: request fulfillment options are being show on direct send flow

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
peanut-wallet	Ready	Preview	Comment	Aug 27, 2025 7:10am

[notion-workspace]

Implement sound for successful payment/claim

[coderabbitai]

Walkthrough

Adds a new exported PaymentFlow type and threads a flow prop from the client into InitialPaymentView and PaymentForm to conditionally alter UI (e.g., hide ActionList and DaimoPay for direct_pay). Refactors SoundPlayer to use a persistent Audio ref with autoplay handling and improved cleanup/error handling.

Changes

Cohort / File(s)	Summary
Payment flow plumbing src/app/[...recipient]/client.tsx, src/components/Payment/PaymentForm/index.tsx	Add exported PaymentFlow type; replace inline union types with PaymentFlow; pass flow to InitialPaymentView and PaymentForm; conditionally hide ActionList and DaimoPayButton for direct_pay; add flow?: PaymentFlow prop to PaymentForm; remove peanut-USDC special-case and trim constants imports.
Audio playback handling src/components/Global/SoundPlayer.tsx	Refactor to persistent Audio via useRef, preload and attempt playback, register one-time user-interaction listeners when autoplay is blocked, distinguish autoplay-related errors, and pause/clear audio on unmount. Public API unchanged.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• [TASK-12682] fix: show token selector for guest flow #955 — Modifies PaymentForm token/chain selection and peanut-wallet handling; overlaps with removal of peanut-USDC special-case.
• feat: links v2.1 req fulfilment flows #1085 — Wires a shared PaymentFlow through client and payment components; closely related to the new PaymentFlow plumbing.
• feat: deposit flow #773 — Updates PaymentForm control flow and modal/deposit handling; related to the flow-based gating added here.

Suggested reviewers

• Zishan-7
• jjramirezn

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

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

---

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (5)

src/components/Global/SoundPlayer.tsx (3)

44-77: Broaden autoplay error detection (Safari/WebKit edge cases).

Safari can throw DOMException with code 0 or different messages. Slightly broaden detection to reduce false negatives.

Apply this diff:

-                    const isAutoplayBlocked =
-                        error?.name === 'NotAllowedError' || /gesture|autoplay|play\(\) failed/i.test(message)
+                    const isAutoplayBlocked =
+                        error?.name === 'NotAllowedError' ||
+                        (typeof DOMException !== 'undefined' &&
+                            error instanceof DOMException &&
+                            (error.name === 'NotAllowedError' || (error as any).code === 0)) ||
+                        /gesture|autoplay|play\(\) failed/i.test(message)

---

31-43: Add passive+keyboard unlock handlers; ensure full cleanup.

• Use passive listeners for pointer/touch to avoid scroll-blocking warnings.
• Add keydown (Enter/Space) to unlock for keyboard users.
• Ensure all listeners are removed in cleanup.

Apply this diff:

         // track if we attached one-time unlock listeners and the unlock handler
         let listenersAdded = false
-        let unlock: (() => void) | null = null
+        let unlock: (() => void) | null = null
+        let unlockKeydown: ((e: KeyboardEvent) => void) | null = null

         // clean up any unlock listeners if they were added
         const removeListeners = () => {
             if (!listenersAdded || !unlock) return
             document.removeEventListener('pointerdown', unlock)
             document.removeEventListener('touchstart', unlock)
             document.removeEventListener('click', unlock)
+            if (unlockKeydown) {
+                document.removeEventListener('keydown', unlockKeydown)
+                unlockKeydown = null
+            }
             listenersAdded = false
             unlock = null
         }

-                        document.addEventListener('pointerdown', unlock, { once: true })
-                        document.addEventListener('touchstart', unlock, { once: true })
+                        document.addEventListener('pointerdown', unlock, { once: true, passive: true })
+                        document.addEventListener('touchstart', unlock, { once: true, passive: true })
                         document.addEventListener('click', unlock, { once: true })
+                        // keyboard unlock (Enter/Space)
+                        unlockKeydown = (e: KeyboardEvent) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                unlock?.()
+                            }
+                        }
+                        document.addEventListener('keydown', unlockKeydown, { once: true })
                         listenersAdded = true

Also applies to: 70-73

---

81-91: Tighten cleanup to fully release audio resources (iOS WebKit).

Clearing the src and calling load() helps older WebKit free memory.

Apply this diff:

             if (audioRef.current) {
                 try {
-                    audioRef.current.pause()
+                    audioRef.current.pause()
+                    audioRef.current.src = ''
+                    audioRef.current.load()
                 } catch (_) {
                     // ignore
                 }
             }

src/app/[...recipient]/client.tsx (1)

477-483: Hides ActionList for direct_pay; consider also hiding for external_wallet.

If ActionList is request-centric, showing it in add-money (external_wallet) may confuse users. Optionally gate it out there too.

Apply this diff if desired:

-                        {flow !== 'direct_pay' && (
+                        {flow !== 'direct_pay' && !isExternalWalletFlow && (
                             <ActionList
                                 flow="request"
                                 requestLinkData={parsedPaymentData as ParsedURL}
                                 isLoggedIn={!!user?.user.userId}
                             />
                         )}

src/components/Payment/PaymentForm/index.tsx (1)

39-39: Import PaymentFlow as a type-only import to avoid runtime coupling.

Importing from a page module at runtime risks circular deps and larger bundles. Type-only keeps it compile-time only.

Apply this diff:

-import { PaymentFlow } from '@/app/[...recipient]/client'
+import type { PaymentFlow } from '@/app/[...recipient]/client'

Optional follow-up (cleaner): move PaymentFlow to a shared types module to decouple routes from components.

New file suggestion:

// src/types/payment-flow.ts
export type PaymentFlow = 'request_pay' | 'external_wallet' | 'direct_pay' | 'withdraw'

Then update imports in both files:

- export type PaymentFlow = 'request_pay' | 'external_wallet' | 'direct_pay' | 'withdraw'
+ // (remove this from client.tsx and import from '@/types/payment-flow')

- import type { PaymentFlow } from '@/app/[...recipient]/client'
+ import type { PaymentFlow } from '@/types/payment-flow'

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 7239eab and 7aa083f.

📒 Files selected for processing (3)

• src/app/[...recipient]/client.tsx (3 hunks)
• src/components/Global/SoundPlayer.tsx (2 hunks)
• src/components/Payment/PaymentForm/index.tsx (5 hunks)

🧰 Additional context used

🧠 Learnings (6)

📓 Common learnings

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1104
File: src/components/Payment/PaymentForm/index.tsx:522-545
Timestamp: 2025-08-22T07:28:32.260Z
Learning: In `src/components/Payment/PaymentForm/index.tsx`, the `handleCompleteDaimoPayment` function is only for updating payment status in the backend after a successful Daimo payment. Payment success/failure is handled by Daimo itself, so try/catch error handling and error display are not needed for backend sync failures - users shouldn't see errors if payment succeeded but database update failed.

📚 Learning: 2025-08-22T07:28:32.260Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1104
File: src/components/Payment/PaymentForm/index.tsx:522-545
Timestamp: 2025-08-22T07:28:32.260Z
Learning: In `src/components/Payment/PaymentForm/index.tsx`, the `handleCompleteDaimoPayment` function is only for updating payment status in the backend after a successful Daimo payment. Payment success/failure is handled by Daimo itself, so try/catch error handling and error display are not needed for backend sync failures - users shouldn't see errors if payment succeeded but database update failed.

Applied to files:

• src/components/Payment/PaymentForm/index.tsx

📚 Learning: 2024-12-02T17:19:18.532Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#551
File: src/components/Request/Create/Views/Initial.view.tsx:151-156
Timestamp: 2024-12-02T17:19:18.532Z
Learning: In the `InitialView` component at `src/components/Request/Create/Views/Initial.view.tsx`, when setting the default chain and token in the `useEffect` triggered by `isPeanutWallet`, it's acceptable to omit the setters from the dependency array and not include additional error handling for invalid defaults.

Applied to files:

• src/components/Payment/PaymentForm/index.tsx

📚 Learning: 2024-10-29T12:19:41.968Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#495
File: src/components/Global/TokenAmountInput/index.tsx:23-30
Timestamp: 2024-10-29T12:19:41.968Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), when the 'Max' button is clicked, we intentionally set the input denomination to 'TOKEN' because we are setting the value as token.

Applied to files:

• src/components/Payment/PaymentForm/index.tsx

📚 Learning: 2025-06-18T19:56:55.443Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#919
File: src/components/Withdraw/views/Initial.withdraw.view.tsx:87-87
Timestamp: 2025-06-18T19:56:55.443Z
Learning: In withdraw flows for Peanut Wallet, the PeanutActionDetailsCard should always display "USDC" as the token symbol because it shows the amount being withdrawn from the Peanut Wallet (which holds USDC), regardless of the destination token/chain selected by the user. The TokenSelector is used for choosing the withdrawal destination, not the source display.

Applied to files:

• src/components/Payment/PaymentForm/index.tsx

📚 Learning: 2024-10-04T13:10:49.199Z

Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#413
File: src/components/Request/Pay/Views/Initial.view.tsx:71-72
Timestamp: 2024-10-04T13:10:49.199Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, it's acceptable to use the `!` operator in TypeScript to assert that `selectedTokenData` is not `null` or `undefined`, and potential runtime errors from accessing its properties without checks can be disregarded.

Applied to files:

• src/app/[...recipient]/client.tsx

🧬 Code graph analysis (2)

src/components/Payment/PaymentForm/index.tsx (1)

src/app/[...recipient]/client.tsx (1)

• PaymentFlow (36-36)

src/app/[...recipient]/client.tsx (2)

src/components/Common/ActionList.tsx (1)

• ActionList (80-217)

src/lib/url-parser/types/payment.ts (1)

• ParsedURL (7-16)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Deploy-Preview

🔇 Additional comments (6)

src/components/Global/SoundPlayer.tsx (1)

25-33: Solid move to a persistent Audio element with ref.

Preloading and keeping a ref for cleanup addresses lifecycle and “sound not playing” flakiness on mobile/Chrome autoplay policies.

src/app/[...recipient]/client.tsx (2)

36-36: Introducing PaymentFlow union type is good API design.

Clear, narrow union improves ergonomics across the flow.

---

39-40: Flow prop on page props is sensible, defaulting to request_pay.

Keeps routes backward-compatible and explicit.

src/components/Payment/PaymentForm/index.tsx (3)

54-55: Prop extension looks good.

Adding optional flow keeps backward compatibility for existing callers.

---

71-72: Destructuring new flow prop is correct.

No side effects; maintains component API stability.

---

630-631: Suppressing DaimoPay in direct_pay aligns with PR intent; confirm UX.

If direct_pay must not surface “Pay using exchange or wallet”, this is correct. If we still want to allow non-Peanut payments in direct flow, revisit.

Would you like DaimoPay hidden for all direct_pay cases, including when no requestId is present and the user is not connected?

[Zishan-7]

Send with peanut button is always disabled when paying to address

[kushagrasarathe]

Send with peanut button is always disabled when paying to address

@Zishan-7 works for me

[coderabbitai]

Actionable comments posted: 0

Caution

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

⚠️ Outside diff range comments (2)

src/components/Payment/PaymentForm/index.tsx (2)

307-333: canInitiatePayment blocks direct sends due to token/chain requirement.

Even if the button becomes enabled, this guard still prevents initiating payment for direct_pay from Peanut Wallet.

Apply this diff to bypass token/chain requirement for direct direct_pay with Peanut Wallet and add missing deps:

     const canInitiatePayment = useMemo<boolean>(() => {
         let amountIsSet = false
         if (isPintaReq) {
             amountIsSet = beerQuantity > 0
         } else if (isActivePeanutWallet) {
             amountIsSet = !!inputTokenAmount && parseFloat(inputTokenAmount) > 0
         } else {
             amountIsSet =
                 (!!inputTokenAmount && parseFloat(inputTokenAmount) > 0) || (!!usdValue && parseFloat(usdValue) > 0)
         }

-        const tokenSelected = !!selectedTokenAddress && !!selectedChainID
+        const tokenSelected =
+            (flow === 'direct_pay' && isActivePeanutWallet && !isExternalWalletFlow)
+                ? true
+                : (!!selectedTokenAddress && !!selectedChainID)

         const recipientExists = !!recipient
         const walletConnected = isConnected

         return recipientExists && amountIsSet && tokenSelected && walletConnected
     }, [
         recipient,
         inputTokenAmount,
         usdValue,
         selectedTokenAddress,
         selectedChainID,
         isPintaReq,
         beerQuantity,
         isConnected,
         isActivePeanutWallet,
+        isExternalWalletFlow,
+        flow,
     ])

---

704-725: Relax disable logic for direct_pay (Peanut Wallet) and include flow in dependencies
The current memoized disable-check treats direct_pay like any other flow—falling through to the “must have token/chain” guard—so “Send with Peanut” stays disabled when sending directly to an address. Also, because flow isn’t in the dependency array, switching between flows won’t recompute the memo.

Please apply the following changes in src/components/Payment/PaymentForm/index.tsx around lines 704–725:

         if (isExternalWalletFlow) {
             if (!isExternalWalletConnected) return false // "Connect Wallet" button should be active
             return (
                 !inputTokenAmount ||
                 isNaN(parseFloat(inputTokenAmount)) ||
                 parseFloat(inputTokenAmount) <= 0 ||
                 !selectedTokenAddress ||
                 !selectedChainID ||
                 isProcessing
             )
         }

-        if (flow === 'request_pay') return false
+        if (flow === 'request_pay') return false
+        // For direct sends from Peanut Wallet, skip token/chain checks
+        if (flow === 'direct_pay' && isActivePeanutWallet && !isExternalWalletFlow) return false

         // logic for non-AddMoneyFlow / non-Pinta (Pinta has its own button logic)
         if (!isPintaReq) {
             if (!isConnected) return true // disable when not connected (guest/non‐Peanut)
             if (!selectedTokenAddress || !selectedChainID) return true // token/chain required
         }
         // fallback
         return false
     }, [
         isProcessing,
         error,
         inputTokenAmount,
         isExternalWalletFlow,
         isExternalWalletConnected,
         selectedTokenAddress,
         selectedChainID,
         isConnected,
         isActivePeanutWallet,
         isPintaReq,
+        flow,
     ])

Bullet-point summary of required fixes:

• Add a special case for flow === 'direct_pay' with an active Peanut wallet to bypass token/chain validation.
• Include flow in the dependency array so the memo recalculates when the flow changes.

After merging, please re-test:

1. Direct send to a raw address while connected to Peanut Wallet
2. request_pay flow
3. Add-money flow with an external wallet

🧹 Nitpick comments (4)

src/components/Payment/PaymentForm/index.tsx (4)

677-679: Balance-error detection is too narrow; misses “Insufficient balance”.

The UI relies on this to show the “Add funds” CTA. Normalize both common messages.

Apply this diff:

-    const isInsufficientBalanceError = useMemo(() => {
-        return error?.includes("You don't have enough balance.")
-    }, [error])
+    const isInsufficientBalanceError = useMemo(() => {
+        const msg = (error ?? '').toLowerCase()
+        return msg.includes("you don't have enough balance") || msg.includes('insufficient balance')
+    }, [error])

---

39-39: Use a type-only import to avoid bundling client module code at runtime.

This keeps Next’s client/server boundaries clean.

Apply this diff:

-import { PaymentFlow } from '@/app/[...recipient]/client'
+import type { PaymentFlow } from '@/app/[...recipient]/client'

---

155-181: Optional: auto-select Peanut Wallet defaults for direct_pay.

If you prefer to keep the token/chain requirement elsewhere, auto-select defaults when using Peanut Wallet and no selection exists. This prevents empty state and keeps store consistent.

Add this effect (and import PEANUT_WALLET_CHAIN if needed):

useEffect(() => {
  if (
    flow === 'direct_pay' &&
    isActivePeanutWallet &&
    !isExternalWalletFlow &&
    !selectedTokenAddress &&
    !selectedChainID
  ) {
    setSelectedTokenAddress(PEANUT_WALLET_TOKEN)
    setSelectedTokenDecimals(PEANUT_WALLET_TOKEN_DECIMALS)
    // Requires: import { PEANUT_WALLET_CHAIN } from '@/constants'
    setSelectedChainID(PEANUT_WALLET_CHAIN.id.toString())
  }
}, [
  flow,
  isActivePeanutWallet,
  isExternalWalletFlow,
  selectedTokenAddress,
  selectedChainID,
  setSelectedTokenAddress,
  setSelectedTokenDecimals,
  setSelectedChainID,
])

If you adopt this, also update the constants import to include PEANUT_WALLET_CHAIN.

---

20-20: Import PEANUT_WALLET_CHAIN only if you adopt the auto-default effect.

Keeps imports minimal unless needed.

-import { PEANUT_WALLET_TOKEN, PEANUT_WALLET_TOKEN_DECIMALS, PINTA_WALLET_CHAIN, PINTA_WALLET_TOKEN } from '@/constants'
+import { PEANUT_WALLET_TOKEN, PEANUT_WALLET_TOKEN_DECIMALS, PEANUT_WALLET_CHAIN, PINTA_WALLET_CHAIN, PINTA_WALLET_TOKEN } from '@/constants'

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 7aa083f and 56f873e.

📒 Files selected for processing (1)

• src/components/Payment/PaymentForm/index.tsx (6 hunks)

🧰 Additional context used

🧠 Learnings (4)

📚 Learning: 2025-08-22T07:28:32.281Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1104
File: src/components/Payment/PaymentForm/index.tsx:522-545
Timestamp: 2025-08-22T07:28:32.281Z
Learning: In `src/components/Payment/PaymentForm/index.tsx`, the `handleCompleteDaimoPayment` function is only for updating payment status in the backend after a successful Daimo payment. Payment success/failure is handled by Daimo itself, so try/catch error handling and error display are not needed for backend sync failures - users shouldn't see errors if payment succeeded but database update failed.

Applied to files:

• src/components/Payment/PaymentForm/index.tsx

📚 Learning: 2024-12-02T17:19:18.532Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#551
File: src/components/Request/Create/Views/Initial.view.tsx:151-156
Timestamp: 2024-12-02T17:19:18.532Z
Learning: In the `InitialView` component at `src/components/Request/Create/Views/Initial.view.tsx`, when setting the default chain and token in the `useEffect` triggered by `isPeanutWallet`, it's acceptable to omit the setters from the dependency array and not include additional error handling for invalid defaults.

Applied to files:

• src/components/Payment/PaymentForm/index.tsx

📚 Learning: 2024-10-29T12:19:41.968Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#495
File: src/components/Global/TokenAmountInput/index.tsx:23-30
Timestamp: 2024-10-29T12:19:41.968Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), when the 'Max' button is clicked, we intentionally set the input denomination to 'TOKEN' because we are setting the value as token.

Applied to files:

• src/components/Payment/PaymentForm/index.tsx

📚 Learning: 2025-06-18T19:56:55.443Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#919
File: src/components/Withdraw/views/Initial.withdraw.view.tsx:87-87
Timestamp: 2025-06-18T19:56:55.443Z
Learning: In withdraw flows for Peanut Wallet, the PeanutActionDetailsCard should always display "USDC" as the token symbol because it shows the amount being withdrawn from the Peanut Wallet (which holds USDC), regardless of the destination token/chain selected by the user. The TokenSelector is used for choosing the withdrawal destination, not the source display.

Applied to files:

• src/components/Payment/PaymentForm/index.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Deploy-Preview

🔇 Additional comments (1)

src/components/Payment/PaymentForm/index.tsx (1)

630-647: Hiding DaimoPayButton for direct_pay is correct.

This prevents the request-flow CTA from appearing during direct send.

[Zishan-7]

lgtm