Add delegated VTXO refresh flow (#228)

niteshbalusu11 · web-flow · commit 48e6e33f89fb · 2026-06-12T14:06:00.000-04:00
Replaces the VTXO detail exit CTA, separates expired VTXO state, adds the expired list filter, and includes formatting updates.
diff --git a/client/src/components/PendingRoundStatusBanner.tsx b/client/src/components/PendingRoundStatusBanner.tsx
@@ -96,9 +96,7 @@ const PendingRoundDetail = ({ round }: { round: PendingRoundStatus }) => {
 
   return (
     <View className="mb-4 rounded-lg bg-card p-4">
-      <Text className="mb-3 text-base font-semibold text-foreground">
-        Round #{round.round_id}
-      </Text>
+      <Text className="mb-3 text-base font-semibold text-foreground">Round #{round.round_id}</Text>
       <RoundDetailRow label="Status" value={formatRoundStatus(round.status)} />
       <RoundDetailRow label="Final" value={round.is_final ? "Yes" : "No"} />
       <RoundDetailRow label="Successful" value={round.is_success ? "Yes" : "No"} />
@@ -157,11 +155,7 @@ export const PendingRoundStatusBanner = () => {
         actionLabel="View"
         onActionPress={() => setIsSheetOpen(true)}
       />
-      <AppBottomSheet
-        isOpen={isSheetOpen}
-        onClose={() => setIsSheetOpen(false)}
-        scrollable
-      >
+      <AppBottomSheet isOpen={isSheetOpen} onClose={() => setIsSheetOpen(false)} scrollable>
         <View className="px-1 pb-2">
           <View className="mb-5 flex-row items-center">
             <Pressable onPress={() => setIsSheetOpen(false)} className="mr-4">
diff --git a/client/src/components/SendSuccessBottomSheet.tsx b/client/src/components/SendSuccessBottomSheet.tsx
@@ -64,9 +64,7 @@ export const SendSuccessBottomSheet: React.FC<SendSuccessBottomSheetProps> = ({
   btcPrice,
   fiatCurrency,
 }) => {
-  const fiatAmount = btcPrice
-    ? satsToFiat(parsedResult.amount_sat, btcPrice, fiatCurrency)
-    : null;
+  const fiatAmount = btcPrice ? satsToFiat(parsedResult.amount_sat, btcPrice, fiatCurrency) : null;
   const colors = useThemeColors();
 
   return (
diff --git a/client/src/components/StatusBannerStrip.tsx b/client/src/components/StatusBannerStrip.tsx
@@ -1,5 +1,5 @@
 import type React from "react";
-import { Pressable, View } from "react-native";
+import { Pressable, View, type TextStyle } from "react-native";
 import { Text } from "~/components/ui/text";
 
 export type StatusBannerTone = "info" | "success" | "failed";
@@ -11,6 +11,7 @@ type StatusBannerStripProps = {
   tone: StatusBannerTone;
   actionLabel?: string | null;
   actionBusyLabel?: string;
+  actionTextStyle?: TextStyle;
   isActionLoading?: boolean;
   onPress?: () => void;
   onActionPress?: () => void;
@@ -24,6 +25,7 @@ export const StatusBannerStrip = ({
   tone,
   actionLabel,
   actionBusyLabel = "Working",
+  actionTextStyle,
   isActionLoading = false,
   onPress,
   onActionPress,
@@ -65,7 +67,7 @@ export const StatusBannerStrip = ({
           accessibilityLabel={actionLabel}
           className="ml-3 h-8 items-center justify-center rounded-full border border-border/70 bg-background/60 px-3 active:opacity-80 disabled:opacity-50"
         >
-          <Text className={`text-xs font-semibold ${actionTextClassName}`}>
+          <Text className={`text-xs font-semibold ${actionTextClassName}`} style={actionTextStyle}>
             {isActionLoading ? actionBusyLabel : actionLabel}
           </Text>
         </Pressable>
diff --git a/client/src/components/ui/AppBottomSheet.tsx b/client/src/components/ui/AppBottomSheet.tsx
@@ -1,10 +1,7 @@
 import type React from "react";
 import { ScrollView, StyleSheet, useWindowDimensions, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import {
-  ModalBottomSheet,
-  type Detent,
-} from "@swmansion/react-native-bottom-sheet";
+import { ModalBottomSheet, type Detent } from "@swmansion/react-native-bottom-sheet";
 
 type AppBottomSheetProps = {
   isOpen: boolean;
diff --git a/client/src/hooks/useWallet.ts b/client/src/hooks/useWallet.ts
@@ -10,6 +10,7 @@ import {
   loadWalletIfNeeded as loadWalletAction,
   sync as syncAction,
   onchainSync as onchainSyncAction,
+  maintenanceWithOnchainDelegated,
   getVtxos,
   getExpiringVtxos,
   closeWalletIfLoaded,
@@ -184,6 +185,35 @@ export function useGetExpiringVtxos() {
   });
 }
 
+export function useRefreshExpiringVtxos() {
+  const { showAlert } = useAlert();
+
+  return useMutation({
+    mutationFn: async () => {
+      const result = await maintenanceWithOnchainDelegated();
+      if (result.isErr()) {
+        throw result.error;
+      }
+    },
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["vtxos"] }),
+        queryClient.invalidateQueries({ queryKey: ["expiring-vtxos"] }),
+        queryClient.invalidateQueries({ queryKey: ["balance"] }),
+        queryClient.invalidateQueries({ queryKey: ["pending-rounds"] }),
+      ]);
+      showAlert({
+        title: "Refresh scheduled",
+        description: "A delegated refresh has been scheduled for eligible VTXOs.",
+      });
+    },
+    onError: (error: Error) => {
+      log.e("Failed to refresh expiring VTXOs", [error]);
+      showAlert({ title: "Failed to refresh VTXO", description: error.message });
+    },
+  });
+}
+
 export function useCloseWallet() {
   const { setWalletUnloaded } = useWalletStore();
   const { showAlert } = useAlert();
diff --git a/client/src/lib/fiatCurrency.ts b/client/src/lib/fiatCurrency.ts
@@ -24,8 +24,7 @@ export const FIAT_CURRENCY_INFO: Record<FiatCurrencyCode, FiatCurrencyInfo> = {
 export type FiatRates = Partial<Record<FiatCurrencyCode, number>>;
 
 export const isFiatCurrencyCode = (value: unknown): value is FiatCurrencyCode =>
-  typeof value === "string" &&
-  SUPPORTED_FIAT_CURRENCIES.includes(value as FiatCurrencyCode);
+  typeof value === "string" && SUPPORTED_FIAT_CURRENCIES.includes(value as FiatCurrencyCode);
 
 export const getFiatCurrencyInfo = (currency: FiatCurrencyCode): FiatCurrencyInfo =>
   FIAT_CURRENCY_INFO[currency];
@@ -39,10 +38,7 @@ export const fiatToSats = (amount: number, btcPrice: number): number => {
   return Math.round((amount / btcPrice) * 100_000_000);
 };
 
-export const formatFiatAmount = (
-  amount: number | string,
-  currency: FiatCurrencyCode,
-): string => {
+export const formatFiatAmount = (amount: number | string, currency: FiatCurrencyCode): string => {
   const { decimals, symbol } = getFiatCurrencyInfo(currency);
   const numericAmount = typeof amount === "number" ? amount : Number(amount);
   const formattedAmount = Number.isFinite(numericAmount)
diff --git a/client/src/screens/BoardArkScreen.tsx b/client/src/screens/BoardArkScreen.tsx
@@ -795,7 +795,9 @@ const BoardArkScreen = () => {
             )}
 
             {/* Action Button */}
-            <View className={`flex-row items-center gap-3 ${flow === "offboard" ? "mt-5" : "mt-8"}`}>
+            <View
+              className={`flex-row items-center gap-3 ${flow === "offboard" ? "mt-5" : "mt-8"}`}
+            >
               <Button
                 onPress={handleClearForm}
                 variant="outline"
diff --git a/client/src/screens/TransactionDetailScreen.tsx b/client/src/screens/TransactionDetailScreen.tsx
@@ -205,7 +205,10 @@ export const TransactionDetailContent = ({
             />
           ) : null}
           {transaction.hasOnchainFee && typeof transaction.onchainFeeSat === "number" ? (
-            <TransactionDetailRow label="Onchain Fee" value={formatBip177(transaction.onchainFeeSat)} />
+            <TransactionDetailRow
+              label="Onchain Fee"
+              value={formatBip177(transaction.onchainFeeSat)}
+            />
           ) : null}
           {typeof transaction.confirmationHeight === "number" ? (
             <TransactionDetailRow
@@ -214,7 +217,11 @@ export const TransactionDetailContent = ({
             />
           ) : null}
           {transaction.confirmationHash ? (
-            <TransactionDetailRow label="Block Hash" value={transaction.confirmationHash} copyable />
+            <TransactionDetailRow
+              label="Block Hash"
+              value={transaction.confirmationHash}
+              copyable
+            />
           ) : null}
           {transaction.txHex ? (
             <TransactionDetailRow label="Raw Transaction" value={transaction.txHex} copyable />
@@ -225,7 +232,9 @@ export const TransactionDetailContent = ({
       {hasMovementDetails ? (
         <View className="bg-card p-4 rounded-lg mb-4">
           <Text className="text-lg font-semibold text-foreground mb-3">Ark Movement</Text>
-          {movementKindLabel ? <TransactionDetailRow label="Type" value={movementKindLabel} /> : null}
+          {movementKindLabel ? (
+            <TransactionDetailRow label="Type" value={movementKindLabel} />
+          ) : null}
           {movementStatusLabel ? (
             <TransactionDetailRow label="Status" value={movementStatusLabel} />
           ) : null}
diff --git a/client/src/screens/TransactionsScreen.tsx b/client/src/screens/TransactionsScreen.tsx
@@ -65,8 +65,7 @@ const TransactionsScreen = () => {
   };
 
   const exportToCSV = async () => {
-    const csvHeader =
-      `Payment ID,Date,Type,Direction,Amount (₿),BTC Price (${fiatCurrency}),Transaction ID,Destination\n`;
+    const csvHeader = `Payment ID,Date,Type,Direction,Amount (₿),BTC Price (${fiatCurrency}),Transaction ID,Destination\n`;
     const csvRows = filteredTransactions
       .map((transaction) => {
         const date =
diff --git a/client/src/screens/VTXODetailScreen.tsx b/client/src/screens/VTXODetailScreen.tsx
@@ -12,13 +12,17 @@ import type { BarkVtxo } from "react-native-nitro-ark";
 import { useGetBlockHeight } from "~/hooks/useMarketData";
 import { formatBip177 } from "~/lib/utils";
 import { getMempoolTxUrl } from "~/constants";
-import { NoahButton } from "~/components/ui/NoahButton";
 import type { SettingsStackParamList } from "~/Navigators";
+import { useGetExpiringVtxos, useGetVtxos, useRefreshExpiringVtxos } from "~/hooks/useWallet";
+import { StatusBannerStrip } from "~/components/StatusBannerStrip";
 
 type VTXOWithStatus = BarkVtxo & {
   isExpiring: boolean;
+  isExpired: boolean;
 };
 
+const EXPIRED_COLOR = "#ef4444";
+
 const VTXODetailRow = ({
   label,
   value,
@@ -93,27 +97,54 @@ const VTXODetailScreen = () => {
   const navigation = useNavigation<NativeStackNavigationProp<SettingsStackParamList>>();
   const iconColor = useIconColor();
   const { data: blockHeight } = useGetBlockHeight();
-  const { vtxo } = route.params as { vtxo: VTXOWithStatus };
+  const { vtxo: routeVtxo } = route.params as { vtxo: VTXOWithStatus };
+  const { data: allVtxos = [] } = useGetVtxos();
+  const { data: expiringVtxos } = useGetExpiringVtxos();
+  const refreshExpiringVtxos = useRefreshExpiringVtxos();
+  const latestVtxo = allVtxos.find((item) => item.point === routeVtxo.point);
+  const currentVtxo = latestVtxo ?? routeVtxo;
+  const isLatestExpiring = expiringVtxos?.some((item) => item.point === currentVtxo.point);
+  const vtxo: VTXOWithStatus = {
+    ...currentVtxo,
+    isExpiring: isLatestExpiring ?? routeVtxo.isExpiring,
+    isExpired: routeVtxo.isExpired ?? false,
+  };
   const anchorExplorerUrl = getMempoolTxUrl(vtxo.anchor_point);
+  const isExpired =
+    vtxo.state !== "Locked" &&
+    (blockHeight !== undefined ? vtxo.expiry_height <= blockHeight : vtxo.isExpired);
+  const canRefresh = vtxo.state !== "Locked" && (vtxo.isExpiring || isExpired);
+  const statusLabel =
+    vtxo.state === "Locked"
+      ? "Locked"
+      : isExpired
+        ? "Expired"
+        : vtxo.isExpiring
+          ? "Expiring"
+          : "Active";
 
   const getStatusColor = (vtxo: VTXOWithStatus) => {
     if (vtxo.state === "Locked") return "text-gray-500";
+    if (isExpired) return "text-red-500";
     return vtxo.isExpiring ? "text-orange-500" : "text-green-500";
   };
 
   const getStatusIcon = (vtxo: VTXOWithStatus) => {
     if (vtxo.state === "Locked") return "lock-closed-outline";
+    if (isExpired) return "alert-circle-outline";
     return vtxo.isExpiring ? "warning-outline" : "checkmark-circle-outline";
   };
 
   const getVtxoIcon = (vtxo: VTXOWithStatus) => {
     if (vtxo.state === "Locked") return "lock-closed-outline";
+    if (isExpired) return "alert-circle-outline";
     return vtxo.isExpiring ? "warning-outline" : "cube-outline";
   };
 
   const getVtxoColor = (vtxo: VTXOWithStatus) => {
     if (vtxo.state === "Locked") return "#6b7280";
-    return vtxo.isExpiring ? "#f97316" : "#22c55e";
+    if (isExpired) return EXPIRED_COLOR;
+    return vtxo.isExpiring ? COLORS.BITCOIN_ORANGE : "#22c55e";
   };
 
   return (
@@ -131,6 +162,27 @@ const VTXODetailScreen = () => {
           showsVerticalScrollIndicator={false}
           contentContainerStyle={{ paddingBottom: 50 }}
         >
+          {canRefresh ? (
+            <StatusBannerStrip
+              className="mb-4"
+              title={isExpired ? "VTXO expired" : "VTXO expiring soon"}
+              message="Refresh this VTXO to keep it available."
+              icon={
+                <Icon
+                  name={isExpired ? "alert-circle-outline" : "warning-outline"}
+                  size={16}
+                  color={isExpired ? EXPIRED_COLOR : COLORS.BITCOIN_ORANGE}
+                />
+              }
+              tone={isExpired ? "failed" : "info"}
+              actionLabel="Refresh"
+              actionBusyLabel="Refreshing"
+              actionTextStyle={{ color: COLORS.BITCOIN_ORANGE }}
+              isActionLoading={refreshExpiringVtxos.isPending}
+              onActionPress={() => refreshExpiringVtxos.mutate()}
+            />
+          ) : null}
+
           <View className="items-center my-8">
             <View className="mb-4">
               <Icon name={getVtxoIcon(vtxo)} size={64} color={getVtxoColor(vtxo)} />
@@ -141,18 +193,15 @@ const VTXODetailScreen = () => {
             <View className="flex-row items-center">
               <Icon name={getStatusIcon(vtxo)} size={20} color={getVtxoColor(vtxo)} />
               <Text className={`text-xl font-medium ml-2 ${getStatusColor(vtxo)}`}>
-                {vtxo.state === "Locked" ? "Locked" : vtxo.isExpiring ? "Expiring" : "Active"}
+                {statusLabel}
               </Text>
             </View>
           </View>
 
           <View className="bg-card p-4 rounded-lg mb-4">
             <VTXODetailRow label="Amount" value={formatBip177(vtxo.amount)} />
             <VTXODetailRow label="State" value={vtxo.state} />
-            <VTXODetailRow
-              label="Status"
-              value={vtxo.state === "Locked" ? "Locked" : vtxo.isExpiring ? "Expiring" : "Active"}
-            />
+            <VTXODetailRow label="Status" value={statusLabel} />
             <VTXODetailRow
               label="Current Block Height"
               value={blockHeight ? blockHeight.toLocaleString() : "Loading..."}
@@ -182,21 +231,6 @@ const VTXODetailScreen = () => {
             />
             <VTXODetailRow label="Server Public Key" value={vtxo.server_pubkey} copyable />
           </View>
-
-          <View className="rounded-lg border border-amber-500/30 bg-amber-500/10 p-4">
-            <Text className="text-base font-semibold text-amber-700 dark:text-amber-300">
-              Emergency exit
-            </Text>
-            <Text className="mt-1 text-sm leading-5 text-amber-700/90 dark:text-amber-200/90">
-              Use only if the Ark server is unavailable and normal offboarding cannot be used.
-            </Text>
-            <NoahButton
-              className="mt-4"
-              onPress={() => navigation.navigate("UnilateralExit", { vtxoIds: [vtxo.point] })}
-            >
-              Exit This VTXO
-            </NoahButton>
-          </View>
         </ScrollView>
       </View>
     </NoahSafeAreaView>
diff --git a/client/src/screens/VTXOsScreen.tsx b/client/src/screens/VTXOsScreen.tsx
