feat(frontend): add quote freshness timer badges

frontend/src/components/VaultDashboard.test.tsx

@@ -59,6 +59,7 @@ vi.mock("../hooks/useFeeEstimate", () => ({
     feeUsd: 0.01,
     isEstimating: false,
     isHighFee: false,
+    lastUpdated: new Date("2026-03-25T10:00:00.000Z"),
   }),
 }));
 
@@ -202,6 +203,7 @@ describe("VaultDashboard", () => {
     expect(screen.queryByText(/Wallet Not Connected/i)).not.toBeInTheDocument();
     expect(screen.getByText(/Global RWA Yield Fund/i)).toBeInTheDocument();
     expect(screen.getByText(/Current APY/i)).toBeInTheDocument();
+    expect(screen.getByText(/APY quote fresh/i)).toBeInTheDocument();
 
     expect(await screen.findByText(/Sovereign Debt/i)).toBeInTheDocument();
     expect(screen.getByText(/Strategy ID:/i)).toBeInTheDocument();
@@ -255,6 +257,8 @@ describe("VaultDashboard", () => {
       expect(mutateAsync).toHaveBeenCalled();
     }, { timeout: 10000 });
 
+    expect(screen.getByText(/Fee quote fresh/i)).toBeInTheDocument();
+
     // Resolve the mocked API call
     resolveSubmit();
 

frontend/src/components/VaultDashboard.tsx

@@ -244,7 +244,7 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
   const confirmation = useTransactionConfirmation();
 
   const { isOnline } = useNetworkStatus();
-  const { feeXlm, isEstimating, isHighFee } = useFeeEstimate(
+  const { feeXlm, isEstimating, isHighFee, lastUpdated: feeLastUpdated } = useFeeEstimate(
     walletAddress,
     "",
     dashboardUrl.state.tab,
@@ -253,6 +253,7 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
 
   const { slippage, setSlippage, presets, isHighSlippage, minReceived } = useSlippage();
   const [customSlippage, setCustomSlippage] = useState("");
+  const { isStale: feeIsStale, ageText: feeAgeText } = useStaleIndicator(feeLastUpdated);
 
   // Create validation schema based on transaction type and current state
   const transactionSchema = React.useMemo<ValidationSchema<{ amount: string }>>(() => {
@@ -1127,8 +1128,18 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
                               </div>
                               <div className="flex justify-between">
                                 <span style={{ color: "var(--text-secondary)" }}>Network Fee</span>
-                                <span style={{ fontWeight: 600, textAlign: "right" }}>
+                                <span style={{ fontWeight: 600, textAlign: "right", display: "inline-flex", flexDirection: "column", alignItems: "flex-end", gap: "6px" }}>
                                   {isEstimating ? <Skeleton width="60px" height="1.1rem" /> : `${feeXlm.toFixed(4)} XLM`}
+                                  {!isEstimating && (
+                                    <Badge
+                                      variant="outline"
+                                      color={feeIsStale ? "warning" : "info"}
+                                      size="compact"
+                                      icon={<Clock3 size={10} />}
+                                    >
+                                      Fee quote {feeIsStale ? `stale ${feeAgeText}`.trim() : feeAgeText ? `fresh ${feeAgeText}` : "fresh"}
+                                    </Badge>
+                                  )}
                                 </span>
                               </div>
                               <div style={{ height: "1px", background: "var(--border-glass)" }} />
@@ -1221,7 +1232,7 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
                                   size="compact"
                                   icon={<Clock3 size={10} />}
                                 >
-                                  Quote {statsIsStale ? `stale ${statsAgeText}`.trim() : statsAgeText ? `fresh ${statsAgeText}` : "fresh"}
+                                  APY quote {statsIsStale ? `stale ${statsAgeText}`.trim() : statsAgeText ? `fresh ${statsAgeText}` : "fresh"}
                                 </Badge>
                               </div>
                             </div>

frontend/src/hooks/useFeeEstimate.ts

@@ -27,6 +27,7 @@ export function useFeeEstimate(
   const [feeXlm, setFeeXlm] = useState<number>(0);
   const [feeUsd, setFeeUsd] = useState<number>(0);
   const [isEstimating, setIsEstimating] = useState(false);
+  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
 
   const { data: xlmPrice = 0.12 } = useQuery({
     queryKey: ["xlmPrice"],
@@ -59,6 +60,7 @@ export function useFeeEstimate(
           const xlmFee = parseFloat(xlmFeeStr);
           setFeeXlm(xlmFee);
           setFeeUsd(xlmFee * xlmPrice);
+          setLastUpdated(new Date());
         }
       } catch (error) {
         console.error("Fee estimation failed", error);
@@ -85,5 +87,6 @@ export function useFeeEstimate(
     isEstimating,
     isHighFee,
     feeToValueRatio,
+    lastUpdated,
   };
 }