feat: display merchant city and country under merchant name in card activity

Show merchant location (city + country) as a small text line beneath the
merchant name in the mobile card transactions list, desktop transactions
page, and transaction detail view.

https://claude.ai/code/session_01PQ9KnG6RaRm5cbSLkXmXvT

Author: claude

app/(protected)/(tabs)/activity/[clientTxId].tsx

@@ -163,6 +163,9 @@ const CardTransactionDetail = memo(function CardTransactionDetail({
   cardProvider,
 }: CardTransactionDetailProps) {
   const merchantName = transaction.merchant_name || transaction.description || 'Unknown';
+  const merchantLocation = [transaction.merchant_city, transaction.merchant_country]
+    .filter(Boolean)
+    .join(' ') || undefined;
   const isPurchase = transaction.category === CardTransactionCategory.PURCHASE;
   const { data: cashbacks } = useCashbacks();
 
@@ -247,7 +250,12 @@ const CardTransactionDetail = memo(function CardTransactionDetail({
   return (
     <PageLayout desktopOnly>
       <View className="mx-auto w-full max-w-lg flex-1 gap-10 px-4 py-8 pb-32 md:py-12">
-        <Back title={merchantName} className="text-xl md:text-3xl" />
+        <View>
+          <Back title={merchantName} className="text-xl md:text-3xl" />
+          {merchantLocation && (
+            <Text className="ml-10 text-sm text-muted-foreground">{merchantLocation}</Text>
+          )}
+        </View>
 
         <View className="items-center gap-4">
           {/* Avatar with initials or token icon */}

app/(protected)/(tabs)/card/details/transactions.tsx

@@ -66,6 +66,9 @@ export default function CardTransactions() {
   const renderTransaction = ({ item, index }: { item: CardTransaction; index: number }) => {
     const isPurchase = item.category === CardTransactionCategory.PURCHASE;
     const merchantName = item.merchant_name || item.description;
+    const merchantLocation = [item.merchant_city, item.merchant_country]
+      .filter(Boolean)
+      .join(' ') || undefined;
     const color = getColorForTransaction(merchantName);
 
     const transactionUrl = item.crypto_transaction_details?.tx_hash
@@ -103,6 +106,11 @@ export default function CardTransactions() {
             <Text className="text-lg font-medium" numberOfLines={1}>
               {merchantName}
             </Text>
+            {merchantLocation && (
+              <Text className="text-sm text-muted-foreground" numberOfLines={1}>
+                {merchantLocation}
+              </Text>
+            )}
             <Text className="text-sm text-muted-foreground" numberOfLines={1}>
               {formatDate(item.posted_at)}
               {', '}

components/Activity/CardTransactions.tsx

@@ -156,6 +156,9 @@ export default function CardTransactions() {
 
       const transaction = row as CardTransactionWithTimestamp;
       const merchantName = transaction.merchant_name || transaction.description || 'Unknown';
+      const merchantLocation = [transaction.merchant_city, transaction.merchant_country]
+        .filter(Boolean)
+        .join(' ') || undefined;
       const initials = getInitials(merchantName);
       const isPurchase = transaction.category === CardTransactionCategory.PURCHASE;
       const color = getColorForTransaction(merchantName);
@@ -195,6 +198,11 @@ export default function CardTransactions() {
               <Text className="text-lg font-medium text-white" numberOfLines={1}>
                 {merchantName}
               </Text>
+              {merchantLocation && (
+                <Text className="text-sm text-[#8E8E93]" numberOfLines={1}>
+                  {merchantLocation}
+                </Text>
+              )}
               {cashbackInfo && (
                 <View className="mt-0.5 flex-row items-center gap-1">
                   <Diamond />

lib/types.ts

@@ -1241,6 +1241,8 @@ export interface CardTransaction {
   merchant_category_code?: string;
   merchant_name?: string;
   merchant_location?: string;
+  merchant_city?: string;
+  merchant_country?: string;
   local_transaction_details?: LocalTransactionDetails;
 }