fix: external claim links history ui + badges fix

src/app/(mobile-ui)/history/page.tsx

@@ -161,6 +161,7 @@ const HistoryPage = () => {
                                             initials={transactionDetails.initials}
                                             transaction={transactionDetails}
                                             position={position}
+                                            haveSentMoneyToUser={transactionDetails.haveSentMoneyToUser}
                                         />
                                     )
                                 })()

src/components/Home/HomeHistory.tsx

@@ -216,12 +216,6 @@ const HomeHistory = ({ isPublic = false, username }: { isPublic?: boolean; usern
 
                             // determine card position for styling (first, middle, last, single)
                             const position = getCardPosition(index, pendingRequests.length)
-                            const haveSentMoneyToUser =
-                                item.userRole === 'SENDER'
-                                    ? interactions[item.recipientAccount.userId]
-                                    : item.senderAccount?.userId
-                                      ? interactions[item.senderAccount.userId]
-                                      : false
 
                             return (
                                 <TransactionCard
@@ -234,7 +228,7 @@ const HomeHistory = ({ isPublic = false, username }: { isPublic?: boolean; usern
                                     transaction={transactionDetails}
                                     position={position}
                                     isPending={true}
-                                    haveSentMoneyToUser={haveSentMoneyToUser}
+                                    haveSentMoneyToUser={transactionDetails.haveSentMoneyToUser}
                                 />
                             )
                         })}

src/components/TransactionDetails/TransactionCard.tsx

@@ -6,13 +6,14 @@ import { TransactionDirection } from '@/components/TransactionDetails/Transactio
 import { TransactionDetails } from '@/components/TransactionDetails/transactionTransformer'
 import { useTransactionDetailsDrawer } from '@/hooks/useTransactionDetailsDrawer'
 import { EHistoryEntryType, EHistoryUserRole } from '@/hooks/useTransactionHistory'
-import { formatNumberForDisplay } from '@/utils'
+import { formatNumberForDisplay, printableAddress } from '@/utils'
 import { getDisplayCurrencySymbol } from '@/utils/currency'
 import React from 'react'
 import { STABLE_COINS } from '@/constants'
 import Image from 'next/image'
 import StatusPill, { StatusPillType } from '../Global/StatusPill'
 import { VerifiedUserLabel } from '../UserHeader'
+import { isAddress } from 'viem'
 
 export type TransactionType =
     | 'send'
@@ -24,6 +25,7 @@ export type TransactionType =
     | 'bank_withdraw'
     | 'bank_deposit'
     | 'bank_request_fulfillment'
+    | 'claim_external'
 
 interface TransactionCardProps {
     type: TransactionType
@@ -174,11 +176,10 @@ const TransactionCard: React.FC<TransactionCardProps> = ({
                                 {isPending && <div className="h-2 w-2 animate-pulsate rounded-full bg-primary-1" />}
                                 <div className="max-w-40 truncate font-roboto text-[16px] font-medium">
                                     <VerifiedUserLabel
-                                        name={name}
+                                        name={isAddress(name) ? printableAddress(name) : name}
                                         isVerified={transaction.isVerified}
                                         haveSentMoneyToUser={haveSentMoneyToUser}
                                     />
-                                    {/* <AddressLink address={name} isLink={false} /> */}
                                 </div>
                             </div>
                             {/* display the action icon and type text */}
@@ -229,6 +230,7 @@ function getActionIcon(type: TransactionType, direction: TransactionDirection):
         case 'withdraw':
         case 'bank_withdraw':
         case 'cashout':
+        case 'claim_external':
             iconName = 'arrow-up'
             iconSize = 8
             break
@@ -252,6 +254,9 @@ function getActionText(type: TransactionType): string {
         case 'bank_withdraw':
             actionText = 'Withdraw'
             break
+        case 'claim_external':
+            actionText = 'Claim'
+            break
         case 'bank_deposit':
             actionText = 'Add'
             break

src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx

@@ -22,6 +22,7 @@ export type TransactionDirection =
     | 'bank_claim'
     | 'bank_deposit'
     | 'bank_request_fulfillment'
+    | 'claim_external'
 
 interface TransactionDetailsHeaderCardProps {
     direction: TransactionDirection
@@ -100,6 +101,15 @@ const getTitle = (
             case 'bank_deposit':
                 titleText = `${status === 'completed' ? 'Added' : 'Adding'} from ${displayName}`
                 break
+            case 'claim_external':
+                if (status === 'completed') {
+                    titleText = `Claimed to ${displayName}`
+                } else if (status === 'failed') {
+                    titleText = `Claim to ${displayName}`
+                } else {
+                    titleText = `Claiming to ${displayName}`
+                }
+                break
             default:
                 titleText = displayName
                 break
@@ -124,6 +134,7 @@ const getIcon = (direction: TransactionDirection, isLinkTransaction?: boolean):
             return 'arrow-down-left'
         case 'withdraw':
         case 'bank_claim':
+        case 'claim_external':
             return 'arrow-up'
         case 'add':
         case 'bank_deposit':