Fix: Daimo bug and activity receipt bug

[Zishan-7]

TASK-14492
TASK-14491

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
peanut-wallet	Ready	Preview	Comment	Sep 3, 2025 4:44pm

[coderabbitai]

Walkthrough

Use pre-parsed numeric amount for DaimoPayButton toUnits, add a slugify utility, and apply slugified chain names and stricter tokenData guards in TransactionDetailsReceipt for CoinGecko requests.

Changes

Cohort / File(s)	Summary of Changes
DaimoPayButton amount handling src/components/Global/DaimoPayButton/index.tsx	Use previously computed numeric formattedAmount (via parseFloat(...)) for the toUnits payload (formattedAmount.toString() instead of amount.replace(/,/g, '')); no exported signature changes.
Transaction receipt chain slug & tokenData guards src/components/TransactionDetails/TransactionDetailsReceipt.tsx	Import slugify; compute chainName = slugify(...); use slugified chain name in CoinGecko URL; change tokenData state type to `{ symbol:string; icon:string }
General utilities: slugify src/utils/general.utils.ts	Add exported slugify(text: string): string utility that lowercases, trims, removes non-word chars, replaces spaces/underscores with hyphens, and trims hyphens.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Fix: disable add money button on default state + disable sound on IOS #1145 — Modifies DaimoPayButton (validation UI/props); overlaps with amount/validation changes.
• Fix: daimo bugs part2 #1149 — Touches DaimoPayButton and TransactionDetailsReceipt; overlaps on payment handling and chain/token logic.
• [TASK-13865] fix: add tx info on receipt #1109 — Updates tokenDisplayDetails and explorer URLs consumed by TransactionDetails; relates to the slugified chainName usage.

Suggested reviewers

• jjramirezn
• kushagrasarathe

✨ 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-deposit-state

---

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 or @coderabbit 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.

[notion-workspace]

Bug: Token not found when depositing from Binance

[notion-workspace]

Bug: Daimo stale state issue

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

src/utils/general.utils.ts (1)

1297-1309: Slugify is fine, but don’t rely on it for CoinGecko platform IDs.

Generic slugging won’t match several CoinGecko IDs (e.g., BSC/BNB → binance-smart-chain, Optimism → optimistic-ethereum). Document this limitation here or provide a dedicated mapper (by chainId/known names) for external APIs.

Apply (optional) improvement to handle diacritics and produce more robust slugs:

 export function slugify(text: string): string {
-    return text
+    return text
+        .normalize('NFKD')                // Split accents
+        .replace(/[\u0300-\u036f]/g, '')  // Remove diacritics
         .toLowerCase()
         .trim()
         .replace(/[^\w\s-]/g, '')
         .replace(/[\s_-]+/g, '-')
         .replace(/^-+|-+$/g, '')
 }

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

206-210: Slugified chainName may not match CoinGecko platform IDs. Add a small mapping/fallback.

Examples: BSC/BNB → binance-smart-chain, OP Mainnet/Optimism → optimistic-ethereum. Otherwise you’ll frequently hit 404s and show blank token data.

Using prior learning, keep UI resilient when price/icon lookups fail. Suggested fallback mapper:

// Place near the effect or in a util:
const cgPlatformIdByChainName: Record<string, string> = {
  'bsc': 'binance-smart-chain',
  'bnb': 'binance-smart-chain',
  'bnb-smart-chain': 'binance-smart-chain',
  'op-mainnet': 'optimistic-ethereum',
  'optimism': 'optimistic-ethereum',
  'arbitrum-one': 'arbitrum-one',
  'polygon-pos': 'polygon-pos',
  'avalanche-c-chain': 'avalanche',
  'gnosis': 'xdai',
  'zksync-era': 'zksync-era',
  'base': 'base',
}

// Then:
const rawName = transaction.tokenDisplayDetails?.chainName ?? ''
const slug = slugify(rawName)
const chainName = cgPlatformIdByChainName[slug] ?? slug

📜 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 2acd55b and a371b42.

📒 Files selected for processing (3)

• src/components/Global/DaimoPayButton/index.tsx (1 hunks)
• src/components/TransactionDetails/TransactionDetailsReceipt.tsx (2 hunks)
• src/utils/general.utils.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (6)

📚 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: 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: 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

📚 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

📚 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

📚 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

🧬 Code graph analysis (1)

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

src/utils/general.utils.ts (1)

• slugify (1302-1309)

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

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

11-11: Import looks good.

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

71-101: File src/components/Global/DaimoPayButton/index.tsx not found; review comment no longer applies.

Likely an incorrect or invalid review comment.

[coderabbitai]

Actionable comments posted: 1

♻️ Duplicate comments (1)

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

203-216: Guard empty chain/address and check res.ok before parsing.
Currently res.json() is called unconditionally and missing fields can throw; also an empty slug or missing address yields .../contract/undefined. Add guards and validate payload.

-            try {
-                const chainName = slugify(transaction.tokenDisplayDetails?.chainName ?? '')
-                const res = await fetch(
-                    `https://api.coingecko.com/api/v3/coins/${chainName}/contract/${transaction.tokenAddress}`
-                )
-                const tokenDetails = await res.json()
-                setTokenData({
-                    symbol: tokenDetails.symbol,
-                    icon: tokenDetails.image.large,
-                })
-            } catch (e) {
-                console.error(e)
-                setTokenData(null)
-            } finally {
+            try {
+                const chainName = slugify(transaction.tokenDisplayDetails?.chainName ?? '')
+                const tokenAddress = transaction.tokenAddress
+                if (!chainName || !tokenAddress) throw new Error('Missing chain or token address for CoinGecko request')
+                const res = await fetch(
+                    `https://api.coingecko.com/api/v3/coins/${chainName}/contract/${tokenAddress}`
+                )
+                if (!res.ok) {
+                    throw new Error(`CoinGecko error: ${res.status} ${res.statusText}`)
+                }
+                const tokenDetails = await res.json()
+                const symbol = tokenDetails?.symbol
+                const icon =
+                    tokenDetails?.image?.large ?? tokenDetails?.image?.small ?? tokenDetails?.image?.thumb
+                if (!symbol || !icon) throw new Error('Incomplete token data from CoinGecko')
+                setTokenData({ symbol, icon })
+            } catch (e) {
+                console.error(e)
+                setTokenData(null)
+            } finally {

Optional: add an AbortController and include transaction in the effect deps to avoid stale fetches and leaks.

🧹 Nitpick comments (1)

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

58-59: Consider a single discriminated state for data + loading/error.
Merging tokenData and isTokenDataLoading into one { status: 'loading'|'ready'|'error'; data?: {symbol;icon} } state simplifies branching.

📜 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 a371b42 and 3b5a1b6.

📒 Files selected for processing (1)

• src/components/TransactionDetails/TransactionDetailsReceipt.tsx (5 hunks)

🧰 Additional context used

🧠 Learnings (8)

📓 Common learnings

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.

📚 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-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: Hugo0
PR: peanutprotocol/peanut-ui#413
File: src/components/Request/Pay/Views/Initial.view.tsx:71-72
Timestamp: 2024-10-08T20:13:42.967Z
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/components/TransactionDetails/TransactionDetailsReceipt.tsx

📚 Learning: 2024-10-23T09:38:27.670Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#469
File: src/app/request/pay/page.tsx:32-64
Timestamp: 2024-10-23T09:38:27.670Z
Learning: In `src/app/request/pay/page.tsx`, if `linkRes` is not OK in the `generateMetadata` function, the desired behavior is to use the standard title and preview image without throwing an error.

Applied to files:

• src/components/TransactionDetails/TransactionDetailsReceipt.tsx

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

Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.tsx:113-123
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In the `PayRequestLink` component (`src/components/Request/Pay/Pay.tsx`), when resolving ENS names, handle errors by displaying an appropriate error message to the user if the ENS cannot be resolved.

Applied to files:

• src/components/TransactionDetails/TransactionDetailsReceipt.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-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 (1)

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

src/utils/general.utils.ts (1)

• slugify (1302-1309)

src/components/Payment/PaymentInfoRow.tsx (1)

• PaymentInfoRow (7-81)

⏰ 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/TransactionDetails/TransactionDetailsReceipt.tsx (1)

11-11: Importing slugify here is correct and improves URL hygiene.