Merge pull request #1958 from Solid-Money/claude/cashback-escrow-status-W0JQd

Add escrow status and countdown timer for cashback releases

Author: MusabShakeel576

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

@@ -3,7 +3,7 @@ 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 { format, formatDistanceStrict, minutesToSeconds } from 'date-fns';
 import { ArrowUpRight, ChevronLeft, X } from 'lucide-react-native';
 import { mainnet } from 'viem/chains';
 
@@ -92,6 +92,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 }>();
@@ -217,12 +232,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>,

components/Activity/CardTransactions.tsx

@@ -207,7 +207,11 @@ export default function CardTransactions() {
                 <View className="mt-0.5 flex-row items-center gap-1">
                   <Diamond />
                   <Text className="text-sm text-[#8E8E93]">
-                    {cashbackInfo.isPending ? 'Cashback (Pending)' : 'Cashback'}
+                    {cashbackInfo.isEscrowed
+                      ? 'Cashback (Escrowed)'
+                      : cashbackInfo.isPending
+                        ? 'Cashback (Pending)'
+                        : 'Cashback'}
                   </Text>
                 </View>
               )}

lib/types.ts

@@ -923,12 +923,15 @@ export interface Cashback {
   fuseUsdPrice?: string;
   fiatAmount?: string;
   fiatCurrency?: string;
+  payoutAt?: string;
   createdAt: string;
 }
 
 export interface CashbackInfo {
   amount: string;
   isPending: boolean;
+  isEscrowed: boolean;
+  payoutAt?: string;
 }
 
 export interface SourceDepositInstructions {

lib/utils/cardHelpers.ts

@@ -117,12 +117,15 @@ export const getCashbackAmount = (
   }
 
   const isPending = PENDING_CASHBACK_STATUSES.includes(cashback.status);
+  const isEscrowed = cashback.status === CashbackStatus.Escrowed;
 
   // For pending cashbacks without fuseAmount yet, show pending indicator without amount
   if (!cashback.fuseAmount) {
     return {
       amount: 'Pending',
       isPending: true,
+      isEscrowed,
+      payoutAt: cashback.payoutAt,
     };
   }
 
@@ -137,5 +140,7 @@ export const getCashbackAmount = (
   return {
     amount: `+$${amount.toFixed(2)}`,
     isPending,
+    isEscrowed,
+    payoutAt: cashback.payoutAt,
   };
 };