Qa

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

@@ -3,8 +3,8 @@ import { Linking, Pressable, View } from 'react-native';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import * as Sentry from '@sentry/react-native';
 import { useQuery } from '@tanstack/react-query';
-import { format, minutesToSeconds } from 'date-fns';
-import { ArrowUpRight, ChevronLeft, X } from 'lucide-react-native';
+import { format, formatDistanceStrict, minutesToSeconds } from 'date-fns';
+import { ArrowUpRight, X } from 'lucide-react-native';
 import { mainnet } from 'viem/chains';
 
 import Diamond from '@/assets/images/diamond';
@@ -13,6 +13,7 @@ import CopyToClipboard from '@/components/CopyToClipboard';
 import EstimatedTime from '@/components/EstimatedTime';
 import PageLayout from '@/components/PageLayout';
 import RenderTokenIcon from '@/components/RenderTokenIcon';
+import { BackButton } from '@/components/ui/back-button';
 import { Button } from '@/components/ui/button';
 import { Text } from '@/components/ui/text';
 import { Underline } from '@/components/ui/underline';
@@ -92,6 +93,21 @@ const Value = memo(function Value({ children, className }: ValueProps) {
   return <Text className={cn('text-lg font-bold', className)}>{children}</Text>;
 });
 
+const EscrowTimeLeft = memo(function EscrowTimeLeft({ payoutAt }: { payoutAt: string }) {
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    const interval = setInterval(() => setNow(Date.now()), 60_000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const target = useMemo(() => new Date(payoutAt).getTime(), [payoutAt]);
+
+  if (target - now <= 0) return <Value>Releasing soon</Value>;
+
+  return <Value>{formatDistanceStrict(target, now)}</Value>;
+});
+
 const Back = memo(function Back({ title, className }: BackProps) {
   const router = useRouter();
   const params = useLocalSearchParams<{ tab?: string; from?: string }>();
@@ -106,12 +122,11 @@ const Back = memo(function Back({ title, className }: BackProps) {
   }, [params.from, params.tab, router]);
 
   return (
-    <View className="flex-row items-center justify-between">
-      <Pressable onPress={handleBackPress} className="web:hover:opacity-70">
-        <ChevronLeft color="white" />
-      </Pressable>
+    <View className="relative flex-row items-center justify-center">
+      <View className="absolute left-0">
+        <BackButton onPress={handleBackPress} />
+      </View>
       <Text className={cn('text-center text-lg font-semibold text-white', className)}>{title}</Text>
-      <View className="w-10" />
     </View>
   );
 });
@@ -162,7 +177,11 @@ const CardTransactionDetail = memo(function CardTransactionDetail({
   activity,
   cardProvider,
 }: CardTransactionDetailProps) {
-  const merchantName = transaction.merchant_name || transaction.description || 'Unknown';
+  const merchantName = (
+    transaction.merchant_name?.trim() ||
+    transaction.description?.trim() ||
+    'Unknown'
+  );
   const merchantLocation = [transaction.merchant_city, transaction.merchant_country]
     .filter(Boolean)
     .join(' ') || undefined;
@@ -171,6 +190,8 @@ const CardTransactionDetail = memo(function CardTransactionDetail({
 
   const txHash = transaction.crypto_transaction_details?.tx_hash;
   const isApproved = transaction.status === 'approved';
+  const isDeclined = transaction.status === 'declined';
+  const isReversed = transaction.status === 'reversed';
   const postedDate = useMemo(() => {
     const dateStr = isApproved
       ? transaction.authorized_at || transaction.posted_at
@@ -193,18 +214,37 @@ const CardTransactionDetail = memo(function CardTransactionDetail({
 
   const cashbackInfo = getCashbackAmount(transaction.id, cashbacks);
 
+  const statusLabel = isApproved
+    ? 'Pending'
+    : isDeclined
+      ? 'Declined'
+      : isReversed
+        ? 'Reversed'
+        : 'Confirmed';
+  const statusColor = isApproved
+    ? 'text-yellow-500'
+    : isDeclined
+      ? 'text-red-400'
+      : '';
+
   const rows = useMemo(() => {
     const allRows = [
       { key: 'from', label: <Label>Sent from</Label>, value: <Value>Card</Value> },
       {
         key: 'status',
         label: <Label>Status</Label>,
-        value: (
-          <Value className={isApproved ? 'text-yellow-500' : ''}>
-            {isApproved ? 'Pending' : 'Confirmed'}
-          </Value>
-        ),
+        value: <Value className={statusColor}>{statusLabel}</Value>,
       },
+      isDeclined &&
+        transaction.declined_reason && {
+          key: 'reason',
+          label: <Label>Reason</Label>,
+          value: (
+            <Value className="max-w-[60%] text-right text-base">
+              {toTitleCase(transaction.declined_reason)}
+            </Value>
+          ),
+        },
       cashbackInfo && {
         key: 'cashback',
         label: (
@@ -217,12 +257,24 @@ const CardTransactionDetail = memo(function CardTransactionDetail({
           <Value
             className={cashbackInfo.amount === 'Pending' ? 'text-yellow-500' : 'text-[#34C759]'}
           >
-            {cashbackInfo.isPending && cashbackInfo.amount !== 'Pending'
-              ? `${cashbackInfo.amount} (Pending)`
-              : cashbackInfo.amount}
+            {cashbackInfo.amount === 'Pending'
+              ? cashbackInfo.isEscrowed
+                ? 'Escrowed'
+                : 'Pending'
+              : cashbackInfo.isEscrowed
+                ? `${cashbackInfo.amount} (Escrowed)`
+                : cashbackInfo.isPending
+                  ? `${cashbackInfo.amount} (Pending)`
+                  : cashbackInfo.amount}
           </Value>
         ),
       },
+      cashbackInfo?.isEscrowed &&
+        cashbackInfo.payoutAt && {
+          key: 'cashback-escrow-time-left',
+          label: <Label>Releases in</Label>,
+          value: <EscrowTimeLeft payoutAt={cashbackInfo.payoutAt} />,
+        },
       txHash && {
         key: 'explorer',
         label: <Label>Explorer</Label>,
@@ -240,7 +292,15 @@ const CardTransactionDetail = memo(function CardTransactionDetail({
     ].filter(Boolean) as { key: string; label: React.ReactNode; value: React.ReactNode }[];
 
     return allRows;
-  }, [cashbackInfo, txHash, handleExplorerPress, isApproved]);
+  }, [
+    cashbackInfo,
+    txHash,
+    handleExplorerPress,
+    statusLabel,
+    statusColor,
+    isDeclined,
+    transaction.declined_reason,
+  ]);
 
   const tokenIcon = useMemo(
     () => getTokenIcon({ tokenSymbol: transaction.currency?.toUpperCase(), size: 75 }),
@@ -253,7 +313,7 @@ const CardTransactionDetail = memo(function CardTransactionDetail({
         <View>
           <Back title={merchantName} className="text-xl md:text-3xl" />
           {merchantLocation && (
-            <Text className="ml-10 text-sm text-muted-foreground">{merchantLocation}</Text>
+            <Text className="text-center text-sm text-muted-foreground">{merchantLocation}</Text>
           )}
         </View>
 

app/(protected)/(tabs)/add-referrer.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { ActivityIndicator, Pressable, TextInput, View } from 'react-native';
+import { ActivityIndicator, TextInput, View } from 'react-native';
 import { router } from 'expo-router';
-import { ArrowLeft } from 'lucide-react-native';
 
 import InfoError from '@/assets/images/info-error';
 import PageLayout from '@/components/PageLayout';
+import { BackButton } from '@/components/ui/back-button';
 import { Button } from '@/components/ui/button';
 import { Text } from '@/components/ui/text';
 import { path } from '@/constants/path';
@@ -68,9 +68,7 @@ export default function AddReferrer() {
       <View className="mx-auto w-full max-w-lg flex-1 justify-center gap-10 px-4 py-8">
         <View className="mx-auto w-full gap-5 md:gap-5">
           <View className="flex-row items-center justify-between">
-            <Pressable onPress={() => router.back()} className="web:hover:opacity-70">
-              <ArrowLeft color="white" />
-            </Pressable>
+            <BackButton />
             <Text className="text-center text-lg font-semibold text-white md:text-xl">
               Enter your friend&apos;s referral code
             </Text>

app/(protected)/(tabs)/bridge-kyc.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { useLocalSearchParams, useRouter } from 'expo-router';
-import { ArrowLeft } from 'lucide-react-native';
 
 import PageLayout from '@/components/PageLayout';
+import { BackButton } from '@/components/ui/back-button';
 import { Text } from '@/components/ui/text';
 import { TRACKING_EVENTS } from '@/constants/tracking-events';
 import { track } from '@/lib/analytics';
@@ -246,12 +246,7 @@ export default function BridgeKyc({ onSuccess }: BridgeKycParams = {}) {
     <PageLayout desktopOnly>
       <View className="mx-auto w-full max-w-lg flex-1 pt-8">
         <View className="flex-row items-center justify-between">
-          <Pressable
-            onPress={() => (router.canGoBack() ? router.back() : router.replace('/'))}
-            className="web:hover:opacity-70"
-          >
-            <ArrowLeft color="white" />
-          </Pressable>
+          <BackButton />
           <Text className="text-center text-xl font-semibold text-white md:text-2xl">
             Verify identity
           </Text>

app/(protected)/(tabs)/card-onboard/country-verification-required.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Pressable, View } from 'react-native';
+import { View } from 'react-native';
 import { useRouter } from 'expo-router';
-import { ArrowLeft, ShieldAlert } from 'lucide-react-native';
+import { ShieldAlert } from 'lucide-react-native';
 
 import PageLayout from '@/components/PageLayout';
+import { BackButton } from '@/components/ui/back-button';
 import { Button } from '@/components/ui/button';
 import { Text } from '@/components/ui/text';
 import { path } from '@/constants/path';
@@ -42,9 +43,7 @@ export default function CountryVerificationRequired() {
       <View className="mx-auto w-full max-w-lg px-4 pt-12">
         {/* Header */}
         <View className="mb-10 flex-row items-center justify-between">
-          <Pressable onPress={goBack} className="web:hover:opacity-70">
-            <ArrowLeft color="white" />
-          </Pressable>
+          <BackButton onPress={goBack} />
           <Text className="text-center text-xl font-semibold text-white md:text-2xl">
             Verification Required
           </Text>

app/(protected)/(tabs)/card-onboard/country_selection.tsx

@@ -9,12 +9,13 @@ import {
   View,
 } from 'react-native';
 import { useRouter } from 'expo-router';
-import { ArrowLeft, ChevronDown } from 'lucide-react-native';
+import { ChevronDown } from 'lucide-react-native';
 import { useShallow } from 'zustand/react/shallow';
 
 import CountryFlagImage from '@/components/CountryFlagImage';
 import { NotificationEmailModalDialog } from '@/components/NotificationEmailModal/NotificationEmailModalDialog';
 import PageLayout from '@/components/PageLayout';
+import { BackButton } from '@/components/ui/back-button';
 import { Button } from '@/components/ui/button';
 import { Text } from '@/components/ui/text';
 import { COUNTRIES, Country } from '@/constants/countries';
@@ -330,9 +331,7 @@ export default function CountrySelection() {
       />
       <View className="mx-auto w-full max-w-lg px-4 pt-12">
         <View className="mb-10 flex-row items-center justify-between">
-          <Pressable onPress={goBack} className="web:hover:opacity-70">
-            <ArrowLeft color="white" />
-          </Pressable>
+          <BackButton onPress={goBack} />
           <Text className="text-center text-xl font-semibold text-white md:text-2xl">
             Solid card
           </Text>

app/(protected)/(tabs)/card/activate/country_selection.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { ActivityIndicator, Modal, Pressable, ScrollView, TextInput, View } from 'react-native';
 import { useRouter } from 'expo-router';
-import { ArrowLeft, ChevronDown } from 'lucide-react-native';
+import { ChevronDown } from 'lucide-react-native';
 import { useShallow } from 'zustand/react/shallow';
 
 import CountryFlagImage from '@/components/CountryFlagImage';
 import PageLayout from '@/components/PageLayout';
+import { BackButton } from '@/components/ui/back-button';
 import { Button } from '@/components/ui/button';
 import { Text } from '@/components/ui/text';
 import { COUNTRIES, Country } from '@/constants/countries';
@@ -19,7 +20,7 @@
 
 export default function ActivateCountrySelection() {
   const router = useRouter();
   const { user } = useUserStore(
     useShallow(state => ({
       user: state.users.find(user => user.selected),
     })),
@@ -260,9 +261,7 @@
     <PageLayout desktopOnly>
       <View className="mx-auto w-full max-w-lg px-4 pt-12">
         <View className="mb-10 flex-row items-center justify-between">
-          <Pressable onPress={goBack} className="web:hover:opacity-70">
-            <ArrowLeft color="white" />
-          </Pressable>
+          <BackButton onPress={goBack} />
           <Text className="text-center text-xl font-semibold text-white md:text-2xl">
             Solid card
           </Text>

app/(protected)/(tabs)/card/deposit.tsx

@@ -3,10 +3,10 @@ import { ActivityIndicator, Pressable, View } from 'react-native';
 import Toast from 'react-native-toast-message';
 import { Image } from 'expo-image';
 import { useRouter } from 'expo-router';
-import { ArrowLeft } from 'lucide-react-native';
 import { Address, formatUnits } from 'viem';
 
 import PageLayout from '@/components/PageLayout';
+import { BackButton } from '@/components/ui/back-button';
 import { Button } from '@/components/ui/button';
 import { Text } from '@/components/ui/text';
 import { TRACKING_EVENTS } from '@/constants/tracking-events';
@@ -216,9 +216,7 @@ const DepositToCard = () => {
     <PageLayout desktopOnly contentClassName="px-4 py-8">
       <View className="mx-auto h-full w-full max-w-md">
         <View className="mb-8 flex-row items-center justify-between">
-          <Pressable onPress={() => router.back()} className="web:hover:opacity-70">
-            <ArrowLeft color="white" />
-          </Pressable>
+          <BackButton />
           <Text className="text-center text-xl font-semibold md:text-2xl">Deposit to card</Text>
           <View className="w-6" />
         </View>