[TASK-13950] Fix: incorrect token amount on second withdraw

[Zishan-7]

Bugs fixed - TASK-13950, incorrect explorer url for deposits and TASK-14284

[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 29, 2025 9:54am

[notion-workspace]

🪲 Bug: I withdrew 2 times and the 2nd it says the wrong amount in the activity

[coderabbitai]

Walkthrough

Reset token-selector context on unmount of the Withdraw Crypto page; override explorer URL chain ID for DEPOSIT entries in the transaction transformer; change loading header label from "Transactions" to "Activity". No exported/public signatures changed.

Changes

Cohort / File(s)	Summary of changes
Withdraw Crypto Page src/app/(mobile-ui)/withdraw/crypto/page.tsx	Added useContext import and tokenSelectorContext usage; retrieved resetTokenContextProvider and invoked it in the existing effect cleanup alongside other unmount resets.
Transaction URL resolution src/components/TransactionDetails/transactionTransformer.ts	Imported PEANUT_WALLET_CHAIN; introduced explorerUrlChainID override (use PEANUT_WALLET_CHAIN.id for DEPOSIT entries, otherwise entry.chainId); compute explorer base URL with explorerUrlChainID and require it when building TX explorer links.
Home header label src/components/Home/HomeHistory.tsx	Changed loading header label text from "Transactions" to "Activity".

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• [TASK-13865] fix: add tx info on receipt #1109 — Modifies explorer URL and transaction/address display logic in TransactionDetails; directly related to the explorer chain-id override.
• fixed withdraw status not resetting after withdraw #914 — Adjusts WithdrawCryptoPage reset/cleanup behavior; overlaps with token-selector reset on unmount.
• fix: consecutive withdraw bug issue #1056 — Adds/changes payment-initiator and unmount resets in WithdrawCryptoPage; related to combined cleanup behavior.

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/crypto-withdraw-amount

---

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

📜 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 cce1488 and 7f14315.

📒 Files selected for processing (1)

• src/app/(mobile-ui)/withdraw/crypto/page.tsx (2 hunks)

🧰 Additional context used

🧠 Learnings (8)

📓 Common learnings

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.

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.

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#631
File: src/components/Create/Create.tsx:108-112
Timestamp: 2025-01-16T13:14:40.363Z
Learning: In the Peanut UI codebase, the `resetTokenContextProvider` function from `tokenSelectorContext` is a stable function reference that doesn't change, so it doesn't need to be included in useEffect dependencies.

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.

📚 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/app/(mobile-ui)/withdraw/crypto/page.tsx

📚 Learning: 2025-01-16T13:14:40.363Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#631
File: src/components/Create/Create.tsx:108-112
Timestamp: 2025-01-16T13:14:40.363Z
Learning: In the Peanut UI codebase, the `resetTokenContextProvider` function from `tokenSelectorContext` is a stable function reference that doesn't change, so it doesn't need to be included in useEffect dependencies.

Applied to files:

• src/app/(mobile-ui)/withdraw/crypto/page.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)/withdraw/crypto/page.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/app/(mobile-ui)/withdraw/crypto/page.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/app/(mobile-ui)/withdraw/crypto/page.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/app/(mobile-ui)/withdraw/crypto/page.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/app/(mobile-ui)/withdraw/crypto/page.tsx

🧬 Code graph analysis (1)

src/app/(mobile-ui)/withdraw/crypto/page.tsx (2)

src/redux/hooks.ts (2)

• useAppDispatch (5-5)
• usePaymentStore (12-12)

src/context/tokenSelector.context.tsx (1)

• tokenSelectorContext (23-46)

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

src/app/(mobile-ui)/withdraw/crypto/page.tsx (3)

27-27: LGTM: adding useContext import is correct.
Matches the new usage below.

---

38-38: LGTM: consuming resetTokenContextProvider from context.
Per prior learning, this function ref is stable; no need to place it in any dependency arrays.

---

228-231: Right fix: reset token selector after successful withdrawal.
Prevents stale token/decimals from contaminating a second withdraw; aligns with the PR objective.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

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

381-383: Gate by baseUrl (not chainId var) when composing tx link.

If normalization/fallback above is adopted, prefer checking baseUrl existence.

-        if (entry.txHash && explorerUrlChainID) {
+        if (entry.txHash && baseUrl) {
             explorerUrlWithTx = `${baseUrl}/tx/${entry.txHash}`
         }

📜 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 327d33f and 2f0f401.

📒 Files selected for processing (1)

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

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

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.

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.

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#631
File: src/components/Create/Create.tsx:108-112
Timestamp: 2025-01-16T13:14:40.363Z
Learning: In the Peanut UI codebase, the `resetTokenContextProvider` function from `tokenSelectorContext` is a stable function reference that doesn't change, so it doesn't need to be included in useEffect dependencies.

📚 Learning: 2025-05-05T20:43:40.198Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#830
File: src/components/Global/ListItemView/index.tsx:186-191
Timestamp: 2025-05-05T20:43:40.198Z
Learning: In the Peanut UI codebase, chainId is stored as a numeric or hex ID in the HistoryEntry object, not as a human-readable name string. When using it with explorer links, it should be passed directly to getExplorerUrl() as a number, rather than comparing it against chain.name in the supportedPeanutChains array.

Applied to files:

• src/components/TransactionDetails/transactionTransformer.ts

🧬 Code graph analysis (1)

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

src/constants/zerodev.consts.ts (1)

• PEANUT_WALLET_CHAIN (18-18)

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

• getExplorerUrl (857-865)

⏰ 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/transactionTransformer.ts (1)

16-16: PEANUT_WALLET_CHAIN barrel export verified.
src/constants/index.ts includes export * from './zerodev.consts', and zerodev.consts.ts defines export const PEANUT_WALLET_CHAIN, so the import from @/constants will succeed.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (8)

src/components/Home/HomeHistory.tsx (8)

63-64: Strongly type combinedEntries.

Avoids any-based leaks and helps downstream guards.

-    const [combinedEntries, setCombinedEntries] = useState<Array<any>>([])
+    const [combinedEntries, setCombinedEntries] = useState<Array<HistoryEntry | KycHistoryEntry>>([])

---

66-80: Harden userIds derivation (optional chaining + fewer allocations).

Protects against missing account objects from ws entries and reduces intermediate arrays.

-    const userIds = useMemo(() => {
-        if (!combinedEntries.length) return []
-        return Array.from(
-            new Set(
-                combinedEntries
-                    .map((entry) => {
-                        if (isKycStatusItem(entry)) return null
-                        if (entry.userRole === 'SENDER') return entry.recipientAccount.userId
-                        if (entry.userRole === 'RECIPIENT') return entry.senderAccount?.userId
-                        return null
-                    })
-                    .filter((userId) => userId) as string[]
-            )
-        )
-    }, [combinedEntries])
+    const userIds = useMemo(() => {
+        if (!combinedEntries.length) return []
+        return Array.from(
+            new Set(
+                combinedEntries.flatMap((entry) => {
+                    if (isKycStatusItem(entry)) return []
+                    const id =
+                        entry.userRole === 'SENDER'
+                            ? entry.recipientAccount?.userId
+                            : entry.senderAccount?.userId
+                    return id ? [id] : []
+                })
+            )
+        )
+    }, [combinedEntries])

---

95-116: Avoid unsafe access when building wsEntry.extraData.link.

recipientAccount may be missing; add optional chaining + safe fallback to /history.

-                    wsEntry.extraData.link = `${BASE_URL}/${wsEntry.recipientAccount.username || wsEntry.recipientAccount.identifier}?chargeId=${wsEntry.uuid}`
+                    {
+                        const recipientHandle =
+                            wsEntry.recipientAccount?.username ?? wsEntry.recipientAccount?.identifier
+                        const baseLink = recipientHandle ? `${BASE_URL}/${recipientHandle}` : `${BASE_URL}/history`
+                        wsEntry.extraData.link = `${baseLink}?chargeId=${wsEntry.uuid}`
+                    }
@@
-                    wsEntry.extraData.link = `${BASE_URL}/${wsEntry.recipientAccount.username || wsEntry.recipientAccount.identifier}?chargeId=${wsEntry.uuid}`
+                    {
+                        const recipientHandle =
+                            wsEntry.recipientAccount?.username ?? wsEntry.recipientAccount?.identifier
+                        const baseLink = recipientHandle ? `${BASE_URL}/${recipientHandle}` : `${BASE_URL}/history`
+                        wsEntry.extraData.link = `${baseLink}?chargeId=${wsEntry.uuid}`
+                    }

Also QA deposit entries after the transformer change to ensure explorer links resolve to the intended chain.

---

136-141: Prefer nullish coalescing over logical OR in date sort.

Prevents treating empty strings as 0 unintentionally.

-                const dateA = new Date(a.timestamp || 0).getTime()
-                const dateB = new Date(b.timestamp || 0).getTime()
+                const dateA = new Date(a.timestamp ?? 0).getTime()
+                const dateB = new Date(b.timestamp ?? 0).getTime()

---

151-154: Use enum for type safety in filters.

You already import EHistoryEntryType; use it here for consistency.

-                entry.type === 'REQUEST' &&
+                entry.type === EHistoryEntryType.REQUEST &&
                 entry.userRole === 'SENDER' &&
                 entry.status === 'NEW'

---

249-256: Avoid recomputing filteredEntries inside the map.

Compute once to keep render cheap (even if N is small here).

-                {combinedEntries
-                    .filter((item) => !pendingRequests.some((r) => r.uuid === item.uuid))
-                    .map((item, index) => {
-                        // filter out pending requests to calculate correct card position
-                        const filteredEntries = combinedEntries.filter(
-                            (entry) => !pendingRequests.some((r) => r.uuid === entry.uuid)
-                        )
+                {combinedEntries
+                    .filter((item) => !pendingRequests.some((r) => r.uuid === item.uuid))
+                    .map((item, index, filteredEntries) => {

Or precompute with useMemo and map over that array.

---

162-162: Unify all header copy to use a single headingLabel. Introduce

const headingLabel = isSameUser ? 'Activity' : 'Latest Activity'

and replace the hard-coded <h2> at lines 162, 178, 195, and 239 with:

- <h2 className="text-base font-bold">…</h2>
+ <h2 className="text-base font-bold">{headingLabel}</h2>

---

32-33: Guard mutual-transaction filter by username.

Add !!username so filterMutualTxs is only true when a target user is specified:

-    const filterMutualTxs = !isPublic && username !== user?.user.username
+    const filterMutualTxs = !isPublic && !!username && username !== user?.user.username

📜 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 2f0f401 and 30a776e.

📒 Files selected for processing (1)

• src/components/Home/HomeHistory.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

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.

📚 Learning: 2025-04-11T11:33:53.245Z

Learnt from: kushagrasarathe
PR: peanutprotocol/peanut-ui#798
File: src/components/Home/HomeHistory.tsx:138-192
Timestamp: 2025-04-11T11:33:53.245Z
Learning: In the HomeHistory component, infinite scrolling is intentionally not implemented despite the presence of useInfiniteQuery and IntersectionObserver code. The component is designed to only display the first 5 entries with a "View all transactions" link for viewing the complete history.

Applied to files:

• src/components/Home/HomeHistory.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/Home/HomeHistory.tsx (1)

142-144: Behavior preserved: preview 5 entries + link to full history.

This aligns with the intentional UX (no infinite scroll on Home). Good.

Also applies to: 241-245