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

src/components/AddWithdraw/AddWithdrawCountriesList.tsx

@@ -1,11 +1,6 @@
 'use client'
 
-import {
-    COUNTRY_SPECIFIC_METHODS,
-    countryCodeMap,
-    countryData,
-    SpecificPaymentMethod,
-} from '@/components/AddMoney/consts'
+import { COUNTRY_SPECIFIC_METHODS, countryData, SpecificPaymentMethod } from '@/components/AddMoney/consts'
 import StatusBadge from '@/components/Global/Badges/StatusBadge'
 import { IconName } from '@/components/Global/Icons/Icon'
 import NavHeader from '@/components/Global/NavHeader'

src/components/Claim/Link/views/BankFlowManager.view.tsx

@@ -28,6 +28,7 @@ import { InitiateKYCModal } from '@/components/Kyc'
 import { useWebSocket } from '@/hooks/useWebSocket'
 import { KYCStatus } from '@/utils/bridge-accounts.utils'
 import { getCountryCodeForWithdraw } from '@/utils/withdraw.utils'
+import { sendLinksApi } from '@/services/sendLinks'
 
 type BankAccountWithId = IBankAccountDetails &
     (
@@ -102,6 +103,16 @@ export const BankFlowManager = (props: IClaimScreenProps) => {
                     address: details.depositInstructions.toAddress,
                     link: claimLinkData.link,
                 })
+                // if a user is logged in, associate the claim with their account.
+                // this helps track their activity correctly.
+                if (user && claimTx) {
+                    try {
+                        await sendLinksApi.associateClaim(claimTx)
+                    } catch (e) {
+                        Sentry.captureException(e)
+                        console.error('Failed to associate claim', e)
+                    }
+                }
                 setTransactionHash(claimTx)
                 await confirmOfframp(details.transferId, claimTx)
                 if (setClaimType) setClaimType('claim-bank')
@@ -113,7 +124,7 @@ export const BankFlowManager = (props: IClaimScreenProps) => {
                 throw e
             }
         },
-        [claimLink, claimLinkData.link, setTransactionHash, setClaimType, onCustom]
+        [claimLink, claimLinkData.link, setTransactionHash, setClaimType, onCustom, user]
     )
 
     /**

src/components/Common/ActionList.tsx

@@ -118,6 +118,18 @@ export default function ActionList({ claimLinkData, isLoggedIn, flow, requestLin
         return false
     }, [claimType, requestType, flow])
 
+    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])
+
     return (
         <div className="space-y-2">
             {!isLoggedIn && (
@@ -142,7 +154,7 @@ export default function ActionList({ claimLinkData, isLoggedIn, flow, requestLin
             )}
             <Divider text="or" />
             <div className="space-y-2">
-                {ACTION_METHODS.map((method) => {
+                {sortedActionMethods.map((method) => {
                     if (flow === 'request' && method.id === 'exchange-or-wallet') {
                         return <ActionListDaimoPayButton key={method.id} />
                     }

src/components/TransactionDetails/TransactionAvatarBadge.tsx

@@ -53,6 +53,7 @@ const TransactionAvatarBadge: React.FC<TransactionAvatarBadgeProps> = ({
         case 'bank_withdraw':
         case 'bank_deposit':
         case 'bank_request_fulfillment':
+        case 'bank_claim':
             displayIconName = 'bank'
             displayInitials = undefined
             calculatedBgColor = AVATAR_TEXT_DARK

src/components/TransactionDetails/TransactionCard.tsx

@@ -26,6 +26,7 @@ export type TransactionType =
     | 'bank_deposit'
     | 'bank_request_fulfillment'
     | 'claim_external'
+    | 'bank_claim'
 
 interface TransactionCardProps {
     type: TransactionType
@@ -235,6 +236,7 @@ function getActionIcon(type: TransactionType, direction: TransactionDirection):
         case 'bank_withdraw':
         case 'cashout':
         case 'claim_external':
+        case 'bank_claim':
             iconName = 'arrow-up'
             iconSize = 8
             break
@@ -258,6 +260,7 @@ function getActionText(type: TransactionType): string {
         case 'bank_withdraw':
             actionText = 'Withdraw'
             break
+        case 'bank_claim':
         case 'claim_external':
             actionText = 'Claim'
             break

src/components/TransactionDetails/transactionTransformer.ts

@@ -253,10 +253,32 @@ export function mapTransactionDataForDrawer(entry: HistoryEntry): MappedTransact
             isPeerActuallyUser = false
             break
         case EHistoryEntryType.BANK_SEND_LINK_CLAIM:
-            direction = 'bank_claim'
-            transactionCardType = 'bank_withdraw'
-            nameForDetails = 'Claimed to Bank'
-            isPeerActuallyUser = false
+            // this handles how a bank claim is displayed in the transaction history.
+            if (entry.userRole === EHistoryUserRole.SENDER || entry.userRole === EHistoryUserRole.BOTH) {
+                // from the sender's perspective (or when sender claims their own link).
+                if (entry.recipientAccount.isUser) {
+                    // cases 1 & 2: claimed by a peanut user (kyc'd or not). show as direct send.
+                    direction = 'send'
+                    transactionCardType = 'send'
+                    nameForDetails =
+                        entry.recipientAccount?.username ??
+                        entry.recipientAccount?.fullName ??
+                        entry.recipientAccount?.identifier
+                    isPeerActuallyUser = true
+                } else {
+                    // case 3: claimed by a guest. show as generic bank claim.
+                    direction = 'bank_claim'
+                    transactionCardType = 'bank_claim'
+                    nameForDetails = 'Claimed to Bank'
+                    isPeerActuallyUser = false
+                }
+            } else {
+                // from the claimant's perspective, it's always a bank claim.
+                direction = 'bank_claim'
+                transactionCardType = 'bank_claim'
+                nameForDetails = 'Claimed to Bank'
+                isPeerActuallyUser = false
+            }
             break
         case EHistoryEntryType.BRIDGE_ONRAMP:
             direction = 'bank_deposit'
@@ -441,7 +463,8 @@ export function mapTransactionDataForDrawer(entry: HistoryEntry): MappedTransact
         },
         sourceView: 'history',
         bankAccountDetails:
-            entry.type === EHistoryEntryType.BRIDGE_OFFRAMP || entry.type === EHistoryEntryType.BANK_SEND_LINK_CLAIM
+            entry.type === EHistoryEntryType.BRIDGE_OFFRAMP ||
+            (entry.type === EHistoryEntryType.BANK_SEND_LINK_CLAIM && entry.userRole === EHistoryUserRole.RECIPIENT)
                 ? {
                       identifier: entry.recipientAccount.identifier,
                       type: entry.recipientAccount.type,

src/constants/actionlist.consts.ts

@@ -1,4 +1,4 @@
-import { MERCADO_PAGO_ICON } from '@/assets'
+import { MERCADO_PAGO } from '@/assets'
 import { METAMASK_LOGO, TRUST_WALLET_SMALL_LOGO } from '@/assets/wallets'
 import binanceIcon from '@/assets/exchanges/binance.svg'
 
@@ -26,7 +26,7 @@ export const ACTION_METHODS: PaymentMethod[] = [
         id: 'mercadopago',
         title: 'Mercado Pago',
         description: 'Instant transfers',
-        icons: [MERCADO_PAGO_ICON],
+        icons: [MERCADO_PAGO],
         soon: true,
     },
     {