fix: send links history ui for senders pov when claimed to bank accounts

[kushagrasarathe]

• fixes TASK-14407 : send links claimed to bank accounts showing incorrect history for sender's pov

receiver is a non-kyced peanut user, claiming on behalf of sender

• sender : testk01 (history looks like this)

  • initial history when link is not claimed
  • 

• history when link is claimed on sender’s pov

  • 

• receiver : testk02 (history looks like this)

  • history when link is claimed on receiver's pov
  • 

receiver is a kyced peanut user

• sender : testk02 (history looks like this)

  • initial history when link is not claimed
  • 

• history when link is claimed to bank account, shown as direct send to the user

  • 

• receiver : testk01 (history looks like this)

  • 

receiver is a guest user claiming on senders kyc, sender is kyced

• sender : testk01 (history looks like this)

  • initial history when link is not claimed

  • 

  • history when link is claimed by a guest (logged out) user

  • 

• receiver : guest

  • NO HISTORY IN THIS CASE

[notion-workspace]

🪲 Bug: 0x address shown instead of Peanut user on activity tx

[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 1, 2025 5:39pm

[coderabbitai]

Walkthrough

Adds send-links association in bank-claim flow, reorders action methods by availability, introduces a new transaction type 'bank_claim' across details components and transformer logic, updates avatar/icon/text handling, tightens bank account detail exposure in transformer, removes an unused import, and switches a Mercado Pago icon import.

Changes

Cohort / File(s)	Summary of changes
Claim link association src/components/Claim/Link/views/BankFlowManager.view.tsx	Calls sendLinksApi.associateClaim(claimTx) after confirming claim when user exists; adds error reporting; updates callback deps to include user.
Action methods ordering src/components/Common/ActionList.tsx, src/constants/actionlist.consts.ts	Memoizes and renders sortedActionMethods to show available methods first; updates Mercado Pago icon import from MERCADO_PAGO_ICON to MERCADO_PAGO.
Transaction details: bank_claim support src/components/TransactionDetails/TransactionAvatarBadge.tsx, src/components/TransactionDetails/TransactionCard.tsx	Adds 'bank_claim' to TransactionType; maps to up-arrow icon and "Claim" label; renders bank-style avatar for 'bank_claim'.
Transformer: BANK_SEND_LINK_CLAIM logic src/components/TransactionDetails/transactionTransformer.ts	Refactors BANK_SEND_LINK_CLAIM: branches by userRole and recipient account type to set direction, card type ('send' vs 'bank_claim'), peer name flags; restricts bankAccountDetails to BRIDGE_OFFRAMP or BANK_SEND_LINK_CLAIM with userRole === RECIPIENT.
Import cleanup src/components/AddWithdraw/AddWithdrawCountriesList.tsx	Removes unused countryCodeMap import; consolidates import line; no logic changes.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• fix: associate a external wallet claim to user if logged in #1126 — Adds sendLinksApi.associateClaim in claim flows; mirrors the new association call pattern.
• feat: badges updates #1119 — Adjusts TransactionAvatarBadge, TransactionCard, and transformer for claim-related transaction types.
• HOTFIX - IBAN country detection and incorrect bank acc details #1094 — Changes around countryCodeMap and AddWithdrawCountriesList imports overlap with this import cleanup.

Suggested labels

enhancement

Suggested reviewers

• Zishan-7
• 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/bank-claim-history

---

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.

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

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

56-61: Set iconFillColor for bank_ avatars to ensure contrast on dark backgrounds.*

Currently the bank icon renders on a dark background with a dark fill, making it hard to see.

         case 'bank_request_fulfillment':
         case 'bank_claim':
             displayIconName = 'bank'
             displayInitials = undefined
             calculatedBgColor = AVATAR_TEXT_DARK
             textColor = AVATAR_TEXT_LIGHT
+            iconFillColor = AVATAR_TEXT_LIGHT
             break

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

466-472: Only populate bankAccountDetails when recipientAccount fields exist.

Prevents runtime errors when identifier/type are missing.

-        bankAccountDetails:
-            entry.type === EHistoryEntryType.BRIDGE_OFFRAMP ||
-            (entry.type === EHistoryEntryType.BANK_SEND_LINK_CLAIM && entry.userRole === EHistoryUserRole.RECIPIENT)
-                ? {
-                      identifier: entry.recipientAccount.identifier,
-                      type: entry.recipientAccount.type,
-                  }
-                : undefined,
+        bankAccountDetails:
+            entry.type === EHistoryEntryType.BRIDGE_OFFRAMP ||
+            (entry.type === EHistoryEntryType.BANK_SEND_LINK_CLAIM && entry.userRole === EHistoryUserRole.RECIPIENT)
+                ? (entry.recipientAccount?.identifier && entry.recipientAccount?.type
+                    ? {
+                          identifier: entry.recipientAccount.identifier,
+                          type: entry.recipientAccount.type,
+                      }
+                    : undefined)
+                : undefined,

🧹 Nitpick comments (2)

src/components/Claim/Link/views/BankFlowManager.view.tsx (1)

106-115: Associate claim only when a real logged-in user exists.

Using user as a truthy check may run for guest-like objects. Tighten to user?.user?.userId.

-                if (user && claimTx) {
+                if (user?.user?.userId && claimTx) {
                     try {
                         await sendLinksApi.associateClaim(claimTx)
                     } catch (e) {
                         Sentry.captureException(e)
                         console.error('Failed to associate claim', e)
                     }
                 }

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

121-132: Availability-based ordering — good; add explicit stable tie-breaker.

Sorting by availability is on point. To avoid relying on engine sort stability, add an index tie-breaker.

-    const sortedActionMethods = useMemo(() => {
-        return [...ACTION_METHODS].sort((a, b) => {
-            const aIsUnavailable = a.soon || (a.id === 'bank' && requiresVerification)
-            const bIsUnavailable = b.soon || (b.id === 'bank' && requiresVerification)
-
-            if (aIsUnavailable === bIsUnavailable) {
-                return 0
-            }
-            return aIsUnavailable ? 1 : -1
-        })
-    }, [requiresVerification])
+    const sortedActionMethods = useMemo(() => {
+        return ACTION_METHODS
+            .map((m, idx) => ({
+                m,
+                idx,
+                unavailable: m.soon || (m.id === 'bank' && requiresVerification),
+            }))
+            .sort((a, b) => Number(a.unavailable) - Number(b.unavailable) || a.idx - b.idx)
+            .map(({ m }) => m)
+    }, [requiresVerification])

📜 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 a314777 and c1e18c4.

📒 Files selected for processing (7)

• src/components/AddWithdraw/AddWithdrawCountriesList.tsx (1 hunks)
• src/components/Claim/Link/views/BankFlowManager.view.tsx (3 hunks)
• src/components/Common/ActionList.tsx (2 hunks)
• src/components/TransactionDetails/TransactionAvatarBadge.tsx (1 hunks)
• src/components/TransactionDetails/TransactionCard.tsx (3 hunks)
• src/components/TransactionDetails/transactionTransformer.ts (2 hunks)
• src/constants/actionlist.consts.ts (2 hunks)

🧰 Additional context used

🧠 Learnings (4)

📚 Learning: 2025-08-14T14:42:54.411Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1094
File: src/utils/withdraw.utils.ts:181-191
Timestamp: 2025-08-14T14:42:54.411Z
Learning: The countryCodeMap in src/components/AddMoney/consts/index.ts uses uppercase 3-letter country codes as keys (like 'AUT', 'BEL', 'CZE') that map to 2-letter country codes, requiring input normalization to uppercase for proper lookups.

Applied to files:

• src/components/AddWithdraw/AddWithdrawCountriesList.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/components/AddWithdraw/AddWithdrawCountriesList.tsx

📚 Learning: 2025-08-26T17:38:37.055Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1132
File: src/components/Common/ActionList.tsx:153-156
Timestamp: 2025-08-26T17:38:37.055Z
Learning: In ActionList.tsx, when there are circular dependency concerns with ACTION_METHODS being imported by other components, the preferred solution is to move ACTION_METHODS to a separate constants file (like src/constants/actionlist.consts.ts) rather than using prop drilling. This centralizes constants management and creates a cleaner dependency graph.

Applied to files:

• src/components/Common/ActionList.tsx
• src/constants/actionlist.consts.ts

📚 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/Claim/Link/views/BankFlowManager.view.tsx

🧬 Code graph analysis (2)

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

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

• ACTION_METHODS (13-39)

src/components/Claim/Link/views/BankFlowManager.view.tsx (1)

src/services/sendLinks.ts (1)

• sendLinksApi (88-228)

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

src/components/AddWithdraw/AddWithdrawCountriesList.tsx (1)

3-3: Import cleanup LGTM.

Removing the unused symbol reduces bundle size and lints noise.

src/components/TransactionDetails/TransactionCard.tsx (3)

239-242: Icon mapping for bank_claim is consistent.

Arrow-up aligns with “funds leaving your wallet” semantics.

---

263-266: Action text mapping reads well.

'Claim' aligns with claim_external; no concerns.

---

29-30: All UI switches and unions updated for ‘bank_claim’
Confirm your base TransactionType/direction union (e.g. in your shared models or API types) also includes ‘bank_claim’.

src/components/Claim/Link/views/BankFlowManager.view.tsx (2)

31-31: New sendLinksApi import — OK.

Keeps claim/user association concerns encapsulated in the service.

---

127-128: Dependency array update is correct.

Including user prevents stale closures after auth state changes.

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

256-281: No action needed: ‘bank_claim’ is supported
The TransactionDirection type (in TransactionDetailsHeaderCard.tsx) includes 'bank_claim', and all dependent UI components—HeaderCard, TransactionCard, TransactionAvatarBadge, and TransactionDetailsReceipt—already handle this case.

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

157-170: Render uses sortedActionMethods with stable keys — LGTM.

The conditional swap to ActionListDaimoPayButton preserves ordering and keeps keys stable via method.id.