Fix: disable add money button on default state + disable sound on IOS

[Zishan-7]

TASK-13591
TASK-14289
TASK-14253

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
peanut-wallet	Building	Preview	Comment	Aug 28, 2025 0:36am

[coderabbitai]

Walkthrough

The PR updates success view handling by removing DEPOSIT support and switching add-money direct flow to use type "SEND" with a new isExternalWalletFlow flag. It adds a disabled prop to DaimoPayButton and disables submission on zero amounts. Sound playback is disabled on iOS devices. Validation messages stop forcing two-decimal formatting.

Changes

Cohort / File(s)	Summary of Changes
Success view and flow adjustments src/app/(mobile-ui)/add-money/crypto/direct/page.tsx, src/components/Payment/Views/Status.payment.view.tsx	In page: DirectSuccessView now uses type="SEND" and passes isExternalWalletFlow. In Status.payment.view: removed "DEPOSIT" from DirectSuccessViewProps.type and related branches (title and header conditions).
DaimoPayButton API and messaging src/components/Global/DaimoPayButton/index.tsx	Added support for a new disabled? prop; validation messages now show raw min/max values instead of toFixed(2). Page usage disables button when inputTokenAmount === '0.00'.
Sound behavior on iOS src/components/Global/SoundPlayer.tsx	Imported device detection and return null on iOS, disabling audio playback there; other behavior unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• fix: more and more bugssssss #1030 — Also modifies DirectSuccessView/Status.payment.view.tsx around success-view typing and handling.
• feat: links v2.1 req fulfilment flows #1085 — Introduces and propagates isExternalWalletFlow and updates DirectSuccessView usage across flows.
• fix: send flow cta #1133 — Adjusts DaimoPayButton behavior and flow-related handling alongside playback considerations.

Suggested labels

enhancement

Suggested reviewers

• Hugo0
• kushagrasarathe

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/validation

---

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 @coderabbit in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbit 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:
  • @coderabbit gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbit 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 @coderabbit help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbit ignore or @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbit summary or @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbit or @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.

[Hugo0]

lgtm

[Hugo0]

nit: would benefit of a @dev TODO comment explaining that we'd want to fix this in the future

[coderabbitai]

Actionable comments posted: 2

Caution

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

⚠️ Outside diff range comments (4)

src/components/Global/DaimoPayButton/index.tsx (2)

89-96: Don’t block when onBeforeShow returns undefined; only block on explicit false.

Currently, undefined from onBeforeShow is treated as falsy and prevents opening, which is error-prone.

Apply:

- if (onBeforeShow) {
-     const isValid = await onBeforeShow()
-     if (!isValid) return false
- }
+ if (onBeforeShow) {
+     const isValid = await onBeforeShow()
+     if (isValid === false) return false
+ }

---

121-131: Harden disabled state: treat empty and non-positive amounts as disabled.

Covers '0', '0.0', whitespace, etc., not just empty string. Aligns with “disable on default/zero state.”

- // Compute robust disabled state once
- const isDisabled = disabled || amount.length === 0
+ // Compute robust disabled state once
+ const normalizedAmount = amount.replace(/,/g, '').trim()
+ const isZeroish = normalizedAmount === '' || Number(normalizedAmount) <= 0
+ const isDisabled = disabled || isZeroish

src/components/Payment/Views/Status.payment.view.tsx (1)

30-36: Remove or replace all remaining ‘DEPOSIT’ call sites
The search output shows DEPOSIT is still referenced in:

• src/services/services.types.ts (TChargeTransactionType)
• src/hooks/useTransactionHistory.ts (EHistoryEntryType and switch cases)
• src/components/TransactionDetails/transactionTransformer.ts (case DEPOSIT)
• src/components/Payment/PaymentForm/index.tsx (transactionType assignment)
• src/components/Payment/Views/Confirm.payment.view.tsx (transactionType prop)
• src/components/TransactionDetails/TransactionDetailsReceipt.tsx (originalType check)
• src/components/TransactionDetails/TransactionCard.tsx (originalType condition)
• src/app/[...recipient]/client.tsx (extraDataForDrawer.originalType)
• src/components/Global/RewardsModal/index.tsx (REWARD_ASSET_TYPE.DEPOSIT)

Update or remove these to align with the new flow.

src/app/(mobile-ui)/add-money/crypto/direct/page.tsx (1)

97-101: Disable condition is too narrow ('0.00' only); make it robust for any non-positive/empty input.

Prevents accidental enables for '0'/'0.0' variants or whitespace.

- disabled={inputTokenAmount === '0.00'}
+ disabled={
+   (() => {
+     const n = inputTokenAmount.replace(/,/g, '').trim()
+     return n === '' || Number(n) <= 0
+   })()
+ }

🧹 Nitpick comments (4)

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

3-3: Consider hardening iOS detection (iPadOS with desktop UA).
Current hook checks navigator.userAgent for iPad/iPhone/iPod only; iPadOS often reports a Mac UA. Enhance detection to avoid misclassifying iPadOS as WEB.

Example update for src/hooks/useGetDeviceType.ts (outside selected lines):

const ua = navigator.userAgent || '';
const isAndroid = /android/i.test(ua);
const isIosUA = /iPad|iPhone|iPod/.test(ua);
// iPadOS with desktop UA: Mac platform + touch/multi-touch
const isIpadDesktopUA =
  /Mac/i.test(ua) && (navigator.maxTouchPoints || 0) > 1;

useEffect(() => {
  if (isIosUA || isIpadDesktopUA) {
    setDeviceType(DeviceType.IOS);
  } else if (isAndroid) {
    setDeviceType(DeviceType.ANDROID);
  } else {
    setDeviceType(DeviceType.WEB);
  }
}, []);

Please verify on an actual iPad (Safari with “Request Desktop Website” enabled) that sound remains disabled.

src/components/Global/DaimoPayButton/index.tsx (1)

75-84: Validation copy can render awkward amounts like $0.1; consider localized 2-decimal formatting.

If UX prefers standard currency formatting, format min/max with toLocaleString to avoid $0.1/$1000 (no comma). Optional if the change was intentional.

Apply inline formatting:

- onValidationError?.(`Minimum deposit using crypto is $${minAmount}.`)
+ onValidationError?.(`Minimum deposit using crypto is $${minAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}.`)

- onValidationError?.(`Maximum deposit using crypto is $${maxAmount}.`)
+ onValidationError?.(`Maximum deposit using crypto is $${maxAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}.`)

src/components/Payment/Views/Status.payment.view.tsx (1)

171-176: Add a default title fallback to avoid rendering “undefined” edge cases.

Future changes could miss all branches.

 const getTitle = () => {
   if (isExternalWalletFlow) return 'You successfully added'
   if (isWithdrawFlow) return 'You just withdrew'
   if (type === 'SEND') return 'You sent '
   if (type === 'REQUEST') return 'You requested '
+  return 'Success'
 }

src/app/(mobile-ui)/add-money/crypto/direct/page.tsx (1)

18-19: Nit: rename setter to camelCase for consistency.

Prefer setIsPaymentSuccess.

- const [isPaymentSuccess, setisPaymentSuccess] = useState(false)
+ const [isPaymentSuccess, setIsPaymentSuccess] = useState(false)

And update references:

- setisPaymentSuccess(true)
+ setIsPaymentSuccess(true)

📜 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 a0b9802 and 2774ee0.

📒 Files selected for processing (4)

• src/app/(mobile-ui)/add-money/crypto/direct/page.tsx (2 hunks)
• src/components/Global/DaimoPayButton/index.tsx (1 hunks)
• src/components/Global/SoundPlayer.tsx (2 hunks)
• src/components/Payment/Views/Status.payment.view.tsx (2 hunks)

🧰 Additional context used

🧠 Learnings (12)

📓 Common learnings

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1132
File: src/app/[...recipient]/client.tsx:394-397
Timestamp: 2025-08-26T15:25:53.328Z
Learning: In `src/components/Common/ActionListDaimoPayButton.tsx`, the `handleCompleteDaimoPayment` function should not display error messages to users when DB update fails because the Daimo payment itself has succeeded - showing errors would be confusing since the payment was successful.

📚 Learning: 2025-08-26T15:25:53.328Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1132
File: src/app/[...recipient]/client.tsx:394-397
Timestamp: 2025-08-26T15:25:53.328Z
Learning: In `src/components/Common/ActionListDaimoPayButton.tsx`, the `handleCompleteDaimoPayment` function should not display error messages to users when DB update fails because the Daimo payment itself has succeeded - showing errors would be confusing since the payment was successful.

Applied to files:

• src/components/Global/DaimoPayButton/index.tsx
• src/app/(mobile-ui)/add-money/crypto/direct/page.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/Global/DaimoPayButton/index.tsx
• src/app/(mobile-ui)/add-money/crypto/direct/page.tsx

📚 Learning: 2025-08-22T07:25:59.304Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1104
File: src/components/Payment/PaymentForm/index.tsx:596-600
Timestamp: 2025-08-22T07:25:59.304Z
Learning: The `TokenAmountInput` component in `src/components/Global/TokenAmountInput/` always returns decimal strings (e.g., "1,234.56"), not base units. When passing these values to external APIs like Daimo's `toUnits` prop, simply stripping commas with `.replace(/,/g, '')` is sufficient.

Applied to files:

• src/components/Global/DaimoPayButton/index.tsx

📚 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/Global/DaimoPayButton/index.tsx
• src/app/(mobile-ui)/add-money/crypto/direct/page.tsx

📚 Learning: 2024-10-07T15:25:45.170Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:25:45.170Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(...)` return strings, ensuring that `calculatedFee` consistently returns a string without the need for additional type conversion.

Applied to files:

• src/components/Global/DaimoPayButton/index.tsx
• src/app/(mobile-ui)/add-money/crypto/direct/page.tsx
• src/components/Payment/Views/Status.payment.view.tsx

📚 Learning: 2024-10-07T15:28:25.280Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:28:25.280Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(estimatedGasCost, 3)` return strings, ensuring consistent return types for `calculatedFee`.

Applied to files:

• src/components/Global/DaimoPayButton/index.tsx
• src/app/(mobile-ui)/add-money/crypto/direct/page.tsx

📚 Learning: 2024-10-29T12:20:47.207Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#495
File: src/components/Create/Link/Input.view.tsx:244-248
Timestamp: 2024-10-29T12:20:47.207Z
Learning: In the `TokenAmountInput` component within `src/components/Global/TokenAmountInput/index.tsx`, when `balance` is undefined, the `maxValue` prop should be set to an empty string `''`.

Applied to files:

• src/components/Global/DaimoPayButton/index.tsx

📚 Learning: 2024-10-08T20:13:42.967Z

Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#420
File: src/components/Offramp/Offramp.consts.ts:27-28
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In `src/components/Offramp/Offramp.consts.ts`, the `MIN_CASHOUT_LIMIT` is set to $10 because smaller amounts are impractical due to approximately $1 fee per cashout.

Applied to files:

• src/components/Global/DaimoPayButton/index.tsx

📚 Learning: 2024-10-08T20:13:42.967Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.

Applied to files:

• src/app/(mobile-ui)/add-money/crypto/direct/page.tsx
• src/components/Payment/Views/Status.payment.view.tsx

📚 Learning: 2025-05-22T15:38:48.586Z

Learnt from: kushagrasarathe
PR: peanutprotocol/peanut-ui#869
File: src/app/(mobile-ui)/withdraw/page.tsx:82-88
Timestamp: 2025-05-22T15:38:48.586Z
Learning: The country-specific withdrawal route exists at src/app/(mobile-ui)/withdraw/[...country]/page.tsx and renders the AddWithdrawCountriesList component with flow="withdraw".

Applied to files:

• src/app/(mobile-ui)/add-money/crypto/direct/page.tsx

📚 Learning: 2024-10-22T18:10:56.955Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#469
File: src/app/request/pay/page.tsx:25-25
Timestamp: 2024-10-22T18:10:56.955Z
Learning: In the `src/app/request/pay/page.tsx` file, the `PreviewType` enum values are strings, so when adding `previewType` to `URLSearchParams`, there's no need to convert them to strings.

Applied to files:

• src/components/Payment/Views/Status.payment.view.tsx

🧬 Code graph analysis (1)

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

src/hooks/useGetDeviceType.ts (1)

• useDeviceType (14-32)

⏰ 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 (4)

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

3-3: LGTM: device detection import is appropriate.

src/components/Payment/Views/Status.payment.view.tsx (1)

181-191: Header visibility update tied to SEND-only: LGTM.

The md-hidden NavHeader now shows only for SEND; aligns with removing DEPOSIT.

src/app/(mobile-ui)/add-money/crypto/direct/page.tsx (2)

22-39: Backend update errors are not surfaced to users: LGTM and aligned with past decisions.

Logs the error and proceeds to success—matches the Daimo post-success sync guidance.

---

50-55: Switch to type="SEND" + isExternalWalletFlow: LGTM.

Matches the consolidated success-view semantics.

[coderabbitai]

🛠️ Refactor suggestion

Do not start playback until deviceType is known; include deviceType in effect deps.
Guard the effect with deviceType to prevent preloading/attempted playback on iOS and avoid doing work twice. Also add deviceType to the dependency array so the effect runs once after detection.

Example (outside selected lines):

useEffect(() => {
  if (!deviceType || deviceType === DeviceType.IOS) return; // wait for detection; disable on iOS
  // ... existing effect body ...
}, [sound, deviceType]);

🤖 Prompt for AI Agents

In src/components/Global/SoundPlayer.tsx around lines 22 to 23, the effect that
preloads/plays audio runs before deviceType is known and doesn't include
deviceType in its dependency array; update the effect to early-return when
deviceType is falsy or equals the iOS enum (so it doesn't attempt
playback/preload on iOS) and add deviceType to the effect's dependency array so
the effect only runs once after detection (e.g., guard at top of effect: if
(!deviceType || deviceType === DeviceType.IOS) return; and include deviceType in
deps).

[coderabbitai]

⚠️ Potential issue

Critical: conditional Hooks violation (early return before useEffect).
On initial render useEffect runs; on iOS render after detection returns before useEffect, changing hook order across renders → “Rendered fewer hooks than expected.” Also this still preloads audio on iOS once before the second render.

Apply this diff to remove the early return:

-    // Early return for iOS devices - completely disable sound
-    if (deviceType === DeviceType.IOS) {
-        return null
-    }

Then gate playback inside the effect and add deviceType to the deps as shown in my prior snippet.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	// Early return for iOS devices - completely disable sound
	if (deviceType === DeviceType.IOS) {
	return null
	}

🤖 Prompt for AI Agents

In src/components/Global/SoundPlayer.tsx around lines 24-27, remove the early
return for iOS so the component always renders (preserving hook order) and
instead gate all audio setup/playback inside the useEffect: add deviceType to
the effect dependency array, and at the start of that effect return early if
deviceType === DeviceType.IOS so no Audio elements are created or preloaded on
iOS; keep rendering null/empty UI as before but ensure hooks
(useEffect/useState/etc.) are always invoked in the same order across renders.