diff --git a/frontend/src/components/VaultDashboard.test.tsx b/frontend/src/components/VaultDashboard.test.tsx index 5349c443..c438a859 100644 --- a/frontend/src/components/VaultDashboard.test.tsx +++ b/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(); diff --git a/frontend/src/components/VaultDashboard.tsx b/frontend/src/components/VaultDashboard.tsx index e516e1ac..9e7bae3e 100644 --- a/frontend/src/components/VaultDashboard.tsx +++ b/frontend/src/components/VaultDashboard.tsx @@ -244,7 +244,7 @@ const VaultDashboard: React.FC = ({ 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 = ({ 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>(() => { @@ -1127,8 +1128,18 @@ const VaultDashboard: React.FC = ({
Network Fee - + {isEstimating ? : `${feeXlm.toFixed(4)} XLM`} + {!isEstimating && ( + } + > + Fee quote {feeIsStale ? `stale ${feeAgeText}`.trim() : feeAgeText ? `fresh ${feeAgeText}` : "fresh"} + + )}
@@ -1221,7 +1232,7 @@ const VaultDashboard: React.FC = ({ size="compact" icon={} > - Quote {statsIsStale ? `stale ${statsAgeText}`.trim() : statsAgeText ? `fresh ${statsAgeText}` : "fresh"} + APY quote {statsIsStale ? `stale ${statsAgeText}`.trim() : statsAgeText ? `fresh ${statsAgeText}` : "fresh"}
diff --git a/frontend/src/hooks/useFeeEstimate.ts b/frontend/src/hooks/useFeeEstimate.ts index 7958add3..20a58afa 100644 --- a/frontend/src/hooks/useFeeEstimate.ts +++ b/frontend/src/hooks/useFeeEstimate.ts @@ -27,6 +27,7 @@ export function useFeeEstimate( const [feeXlm, setFeeXlm] = useState(0); const [feeUsd, setFeeUsd] = useState(0); const [isEstimating, setIsEstimating] = useState(false); + const [lastUpdated, setLastUpdated] = useState(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, }; }