Fix: daimo bugs part2

[Zishan-7]

Bugs Fixed

• Adding money after successfully added money takes you to success screen with the amount $0.00 ✅
• Black screen after successful deposit on IOS ✅
• Double $value on activity ✅
• big Logos for x-chain txs ✅
• Req fulfilment with daimo does not update status in txn history ✅

[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 28, 2025 6:48pm

[coderabbitai]

Warning

Rate limit exceeded

@Zishan-7 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 12 minutes and 21 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbit review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 7b62542 and 6a96e39.

📒 Files selected for processing (1)

• src/components/TransactionDetails/TransactionCard.tsx (1 hunks)

Walkthrough

Updates Daimo payment flow to use destination chain ID and optionally override payerAddress with the connected wallet; exposes a resetOnSuccess prop to the Daimo button. Adjusts DisplayIcon sizing, gates SoundPlayer playback via effect for iOS/device detection, and enhances transaction details with USD deposit formatting, token metadata loading, and tokenAddress propagation.

Changes

Cohort / File(s)	Summary
Daimo payment flow src/components/Common/ActionListDaimoPayButton.tsx, src/hooks/usePaymentInitiator.ts, src/components/Global/DaimoPayButton/index.tsx	Reads wallet address (peanutWalletAddress) and uses it to override payerAddress when present. Changes completeDaimoPayment payload to use destinationchainId (from destination.chainId) instead of sourceChainId. Adds resetOnSuccess prop to DaimoPayButtonSDK.Custom usage.
Display / Avatar sizing src/components/Global/DisplayIcon.tsx, src/components/Profile/AvatarWithBadge.tsx	Passes className={sizeClass} into AvatarWithBadge fallback; AvatarWithBadge now accepts optional className prop to allow inner avatar sizing.
Sound playback gating src/components/Global/SoundPlayer.tsx	Moves iOS/unknown-device playback guard into useEffect and expands dependencies to [sound, deviceType]; component continues rendering but effect avoids initiating playback on iOS or when deviceType is unknown.
Transaction display and token metadata src/components/TransactionDetails/TransactionCard.tsx, src/components/TransactionDetails/TransactionDetailsReceipt.tsx, src/components/TransactionDetails/transactionTransformer.ts	Adds a DEPOSIT branch formatting display amount as USD ("+$<transaction.amount>"). Adds tokenAddress?: string to TransactionDetails and maps it from entry.tokenAddress. Implements token metadata loading (symbol/icon) with loading state and error handling; replaces direct token display with fetched tokenData and skeleton while loading.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 minutes

Possibly related PRs

• Fix: Add crypto showing incorrect view on refresh #1028 — Modifies usePaymentInitiator hook and control flow; overlaps with the hook parameter/payload changes here.
• Fix Daimo bugs #1132 — Touches Daimo payment integration and ActionListDaimoPayButton payload handling, closely related to these changes.
• [TASK-13865] fix: add tx info on receipt #1109 — Extends TransactionDetails/transformer with token fields; related to added tokenAddress and token metadata handling.

Suggested reviewers

• Hugo0
• kushagrasarathe
• jjramirezn

✨ 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/daimo-bugs-part2

---

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.

[coderabbitai]

Actionable comments posted: 5

Caution

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

⚠️ Outside diff range comments (2)

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

71-101: Harden amount validation and disabled state to prevent non-numeric values opening the modal.

Currently "abc" bypasses range checks (NaN comparisons are false). Add an explicit NaN guard and trim check.

   const handleClick = useCallback(async () => {
     // Parse and validate amount
-    const formattedAmount = parseFloat(amount.replace(/,/g, ''))
+    const formattedAmount = parseFloat(amount.replace(/,/g, ''))
+    if (!Number.isFinite(formattedAmount)) {
+      onValidationError?.('Enter a valid amount.')
+      return false
+    }
@@
-            const isDisabled = disabled || amount.length === 0
+            const isDisabled = disabled || amount.trim().length === 0

Also applies to: 123-126

src/hooks/usePaymentInitiator.ts (1)

797-801: Do not surface backend sync failures to users after a successful Daimo payment.

Per prior product guidance, Daimo handles payment success; backend update failures should not show user-facing errors. Swallow the error, log it, and proceed to Success.

-      } catch (err) {
-        return handleError(err, loadingStep)
-      }
+      } catch (err) {
+        captureException(err)
+        console.warn('Daimo payment succeeded but backend sync failed. Proceeding without blocking UI.', err)
+        setLoadingStep('Success')
+        return { status: 'Success', charge: chargeDetails, payment: null, txHash, success: true }
+      }

Note: This aligns with the learnings about handleCompleteDaimoPayment not displaying errors when DB update fails after Daimo success.

🧹 Nitpick comments (3)

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

86-98: Minor robustness for mobile autoplay

Consider hinting inline playback to reduce browser quirks.

-        const audio = new Audio(audioSrc)
+        const audio = new Audio(audioSrc)
+        // iOS/Safari hint
+        // @ts-expect-error: playsInline is widely supported on <video>, harmless on <audio>
+        audio.playsInline = true

src/hooks/usePaymentInitiator.ts (1)

801-802: Add missing dependency.

dispatch is used inside the callback; include it to avoid stale closure.

-    [determineChargeDetails, setLoadingStep, setPaymentDetails]
+    [determineChargeDetails, setLoadingStep, setPaymentDetails, dispatch]

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

122-123: Add missing dependency to callback.

peanutWalletAddress is read in the callback; include it to avoid stale address usage.

-        [chargeDetails, completeDaimoPayment, dispatch]
+        [chargeDetails, completeDaimoPayment, dispatch, peanutWalletAddress]

📜 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 42a1daf and 3d55668.

📒 Files selected for processing (8)

• src/components/Common/ActionListDaimoPayButton.tsx (3 hunks)
• src/components/Global/DaimoPayButton/index.tsx (1 hunks)
• src/components/Global/DisplayIcon.tsx (1 hunks)
• src/components/Global/SoundPlayer.tsx (2 hunks)
• src/components/TransactionDetails/TransactionCard.tsx (1 hunks)
• src/components/TransactionDetails/TransactionDetailsReceipt.tsx (3 hunks)
• src/components/TransactionDetails/transactionTransformer.ts (2 hunks)
• src/hooks/usePaymentInitiator.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (9)

📓 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.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.

📚 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/TransactionDetails/TransactionCard.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/hooks/usePaymentInitiator.ts
• src/components/Common/ActionListDaimoPayButton.tsx
• src/components/Global/DaimoPayButton/index.tsx

📚 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/Common/ActionListDaimoPayButton.tsx
• src/components/Global/DaimoPayButton/index.tsx

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

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#413
File: src/context/tokenSelector.context.tsx:118-123
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In the `TokenContextProvider` component within `src/context/tokenSelector.context.tsx`, in the TypeScript React application, when data changes and before calling `fetchAndSetTokenPrice`, it is necessary to reset `selectedTokenData`, `selectedTokenPrice`, `selectedTokenDecimals`, and `inputDenomination` to discard stale data.

Applied to files:

• src/components/TransactionDetails/TransactionDetailsReceipt.tsx

📚 Learning: 2024-10-07T13:42:00.443Z

Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.tsx:103-111
Timestamp: 2024-10-07T13:42:00.443Z
Learning: When the token price cannot be fetched in `src/components/Request/Pay/Pay.tsx` within the `PayRequestLink` component, set `tokenPriceData.price` to 0 to ensure the UI remains functional. Since Squid uses their own price engine for x-chain fulfillment transactions, this approach will not affect the transaction computation.

Applied to files:

• src/components/TransactionDetails/TransactionDetailsReceipt.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/components/TransactionDetails/TransactionDetailsReceipt.tsx

📚 Learning: 2024-11-18T21:36:11.486Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#535
File: src/components/Claim/Claim.tsx:142-146
Timestamp: 2024-11-18T21:36:11.486Z
Learning: In `src/components/Claim/Claim.tsx`, external calls like token price fetching and cross-chain details retrieval are already encapsulated within existing `try...catch` blocks, so additional error handling may be unnecessary.

Applied to files:

• src/components/TransactionDetails/TransactionDetailsReceipt.tsx

📚 Learning: 2024-10-03T09:57:43.885Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#404
File: src/context/tokenSelector.context.tsx:121-121
Timestamp: 2024-10-03T09:57:43.885Z
Learning: In `TokenContextProvider` within `tokenSelector.context.tsx`, when token data is loaded from preferences, it's acceptable to set `isTokenPriceFetchingComplete` to `true` because the token data is already available.

Applied to files:

• src/components/TransactionDetails/TransactionDetailsReceipt.tsx

🧬 Code graph analysis (2)

src/hooks/usePaymentInitiator.ts (2)

src/services/services.types.ts (1)

• TRequestChargeResponse (172-210)

src/services/charges.ts (1)

• chargesApi (6-94)

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

src/hooks/wallet/useWallet.ts (1)

• useWallet (21-123)

🪛 Biome (2.1.2)

src/components/TransactionDetails/TransactionDetailsReceipt.tsx

[error] 234-234: 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)

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

src/components/TransactionDetails/transactionTransformer.ts (2)

62-62: Type surface addition looks good

Adding tokenAddress?: string to TransactionDetails is appropriate for downstream token metadata fetches.

---

420-420: Mapping tokenAddress from entry

tokenAddress: entry.tokenAddress correctly threads through for consumers.

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

40-41: Propagate sizing to AvatarWithBadge — OK

Passing className={sizeClass} to AvatarWithBadge should fix oversized fallback avatars.

Confirm AvatarWithBadge accepts className?: string and does not override width/height in a way that conflicts with sizeClass.

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

25-26: Gate playback on iOS via effect — resolves black screen

Early-returning inside the effect for !deviceType or iOS is a clean fix; widening deps to [sound, deviceType] ensures re-evaluation once device type is known.

src/components/TransactionDetails/TransactionDetailsReceipt.tsx (2)

58-60: State for token metadata — OK

tokenData and isTokenDataLoading states are appropriate for driving the skeleton and loaded view.

---

185-211: Amount display normalization — OK

Always dollarizing the receipt amount (or original currency for in-flight bank_deposit) aligns with “never show token value”.

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

111-111: resetOnSuccess supported in @daimo/pay ≥1.16.0; current version ^1.16.5 is sufficient—no changes required.

src/components/Common/ActionListDaimoPayButton.tsx (3)

94-121: LGTM on not surfacing errors during Daimo completion.

You log errors and always clear isDaimoPaymentProcessing; no user-facing error is dispatched here. This matches the product guidance for Daimo flows.

---

11-12: Note on useWallet address typing.

useWallet returns address via a non-null assertion but it may be undefined at runtime; your nullish-coalesce fallback on payerAddress is a safe guard. No change needed.

Also applies to: 24-25

---

1-156: All completeDaimoPayment call sites use destinationchainId; no sourceChainId usage remains.

[jjramirezn]

One blocking issue, rest looks good