@@ -157,30 +312,33 @@ export function WalletConnect({ className, size = "default" }: WalletConnectProp
)}
{/* Recovery actions */}
- {(error || !isFreighterInstalled()) && (
+ {(error || !isInstalled) && (
)}
- {/* Info Message */}
- {!isFreighterInstalled() && !error && (
+ {/* Install prompt */}
+ {!isInstalled && !error && (
Freighter wallet not detected.
@@ -217,5 +375,4 @@ export function WalletConnect({ className, size = "default" }: WalletConnectProp
);
}
-
export default WalletConnect;
\ No newline at end of file
diff --git a/veilend-web/src/components/WalletStatus.tsx b/veilend-web/src/components/WalletStatus.tsx
index 3efa241..ddc36e6 100644
--- a/veilend-web/src/components/WalletStatus.tsx
+++ b/veilend-web/src/components/WalletStatus.tsx
@@ -1,37 +1,114 @@
"use client";
import React from "react";
-import { Wallet, ShieldCheck, ShieldAlert, Loader2 } from "lucide-react";
+import { Wallet, ShieldCheck, ShieldAlert, Loader2, XCircle } from "lucide-react";
import { useWallet } from "@/context/WalletContext";
import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
interface WalletStatusProps {
showDetails?: boolean;
className?: string;
+ onConnect?: () => void;
+ onDisconnect?: () => void;
}
-export function WalletStatus({ showDetails = false, className = "" }: WalletStatusProps) {
- const { address, isConnected, isAuthenticated, isLoading, error } = useWallet();
+export function WalletStatus({
+ showDetails = false,
+ className = "",
+ onConnect,
+ onDisconnect
+}: WalletStatusProps) {
+ const {
+ address,
+ isConnected,
+ isAuthenticated,
+ isInstalled,
+ isLoading,
+ error,
+ connect,
+ disconnect,
+ clearError
+ } = useWallet();
+ const handleConnect = async () => {
+ if (onConnect) {
+ onConnect();
+ }
+ await connect();
+ };
+
+ const handleDisconnect = async () => {
+ if (onDisconnect) {
+ onDisconnect();
+ }
+ await disconnect();
+ };
+
+ // Loading state
if (isLoading) {
return (
- Initializing wallet...
+ Connecting...
);
}
+ // Error state with tooltip
if (error) {
return (
-
-
-
Wallet error
- {showDetails &&
{error}}
+
+
+
+ Error
+
+
+
+
+
+ {error}
+
+
+
+ {error}
+
+
+
+
+
+ );
+ }
+
+ // Freighter not installed
+ if (!isInstalled) {
+ return (
+
+
+
+ Freighter Required
+
+
);
}
+ // Connected state
if (isConnected && isAuthenticated) {
const truncatedAddress = address
? `${address.slice(0, 6)}...${address.slice(-4)}`
@@ -43,17 +120,34 @@ export function WalletStatus({ showDetails = false, className = "" }: WalletStat
Connected
- {showDetails && (
+ {showDetails && address && (
{truncatedAddress}
)}
+
);
}
+ // Disconnected state
return (
-
-
-
Not connected
+
+
+ Not connected
+
);
}
diff --git a/veilend-web/src/components/ui/tooltip.tsx b/veilend-web/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..a8be005
--- /dev/null
+++ b/veilend-web/src/components/ui/tooltip.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+ React.ElementRef
,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
\ No newline at end of file
diff --git a/veilend-web/src/lib/api/dashboard-client.ts b/veilend-web/src/lib/api/dashboard-client.ts
new file mode 100644
index 0000000..35cc331
--- /dev/null
+++ b/veilend-web/src/lib/api/dashboard-client.ts
@@ -0,0 +1,236 @@
+import { DashboardData, AssetBalance, ActivityEvent, ActivityActionType } from '../types/dashboard';
+
+export interface DashboardClientConfig {
+ apiBaseUrl: string;
+ refreshInterval?: number;
+}
+
+export class DashboardClient {
+ private apiBaseUrl: string;
+ private refreshInterval: number;
+ private abortController: AbortController | null = null;
+
+ constructor(config: DashboardClientConfig) {
+ this.apiBaseUrl = config.apiBaseUrl;
+ this.refreshInterval = config.refreshInterval || 10000;
+ }
+
+ async fetchDashboardData(address: string, signal?: AbortSignal): Promise {
+ if (!address || !address.startsWith('G')) {
+ throw new Error('Invalid Stellar address provided');
+ }
+
+ try {
+ const controller = new AbortController();
+ const combinedSignal = signal ? this.combineSignals(signal, controller.signal) : controller.signal;
+
+ const [positionsRes, transactionsRes, pricesRes] = await Promise.all([
+ fetch(`${this.apiBaseUrl}/indexer/positions/${address}`, {
+ signal: combinedSignal,
+ headers: { 'Cache-Control': 'no-cache' }
+ }),
+ fetch(`${this.apiBaseUrl}/indexer/transactions/${address}`, {
+ signal: combinedSignal,
+ headers: { 'Cache-Control': 'no-cache' }
+ }),
+ fetch(`${this.apiBaseUrl}/oracle/prices`, {
+ signal: combinedSignal,
+ headers: { 'Cache-Control': 'no-cache' }
+ })
+ ]);
+
+ if (!positionsRes.ok || !transactionsRes.ok || !pricesRes.ok) {
+ const errorDetails = {
+ positions: positionsRes.status,
+ transactions: transactionsRes.status,
+ prices: pricesRes.status
+ };
+ throw new Error(`Failed to fetch data from indexer: ${JSON.stringify(errorDetails)}`);
+ }
+
+ const [positionsData, transactionsData, pricesData] = await Promise.all([
+ positionsRes.json(),
+ transactionsRes.json(),
+ pricesRes.json()
+ ]);
+
+ return this.transformDashboardData(
+ positionsData.positions || [],
+ transactionsData.transactions || [],
+ pricesData.prices || {}
+ );
+ } catch (error) {
+ if (error instanceof Error && error.name === 'AbortError') {
+ throw error;
+ }
+ console.error('Dashboard API Error:', error);
+ throw new Error('Failed to fetch live dashboard data. Please check your connection.');
+ }
+ }
+
+ private combineSignals(signal1: AbortSignal, signal2: AbortSignal): AbortSignal {
+ const controller = new AbortController();
+ const onAbort = () => controller.abort();
+
+ if (signal1.aborted) {
+ controller.abort();
+ return controller.signal;
+ }
+ if (signal2.aborted) {
+ controller.abort();
+ return controller.signal;
+ }
+
+ signal1.addEventListener('abort', onAbort, { once: true });
+ signal2.addEventListener('abort', onAbort, { once: true });
+
+ return controller.signal;
+ }
+
+ private transformDashboardData(
+ positions: Array<{ assetAddress: string; depositedAmount: string | number; borrowedAmount: string | number }>,
+ transactions: Array<{ id: string; type: string; amount: string | number; assetAddress: string; timestamp: string; txHash: string }>,
+ prices: Record
+ ): DashboardData {
+ let totalDepositedUsd = 0;
+ let totalBorrowedUsd = 0;
+ const depositedAssets: AssetBalance[] = [];
+ const borrowedAssets: AssetBalance[] = [];
+
+ // Process positions with real oracle prices
+ if (Array.isArray(positions) && positions.length > 0) {
+ positions.forEach((pos) => {
+ const deposited = Number(pos.depositedAmount) / 1e7;
+ const borrowed = Number(pos.borrowedAmount) / 1e7;
+
+ // Get price from oracle, default to 0 if not available
+ const price = prices[pos.assetAddress] || 0;
+
+ if (deposited > 0 && price > 0) {
+ const usdValue = deposited * price;
+ totalDepositedUsd += usdValue;
+ depositedAssets.push({
+ assetSymbol: this.extractAssetSymbol(pos.assetAddress),
+ assetName: pos.assetAddress,
+ balance: deposited,
+ usdValue,
+ });
+ }
+
+ if (borrowed > 0 && price > 0) {
+ const usdValue = borrowed * price;
+ totalBorrowedUsd += usdValue;
+ borrowedAssets.push({
+ assetSymbol: this.extractAssetSymbol(pos.assetAddress),
+ assetName: pos.assetAddress,
+ balance: borrowed,
+ usdValue,
+ });
+ }
+ });
+ }
+
+ // Calculate health factor with proper LTV
+ const healthFactor = totalBorrowedUsd === 0
+ ? Infinity
+ : Math.min((totalDepositedUsd * 0.8) / totalBorrowedUsd, 99.99);
+
+ const totalBalanceUsd = totalDepositedUsd - totalBorrowedUsd;
+
+ // Process transactions with real prices
+ let recentActivity: ActivityEvent[] = [];
+
+ if (Array.isArray(transactions) && transactions.length > 0) {
+ const mappedActivities = transactions.map((tx) => {
+ const amount = Number(tx.amount) / 1e7;
+ const price = prices[tx.assetAddress] || 0;
+ const usdValue = amount * price;
+
+ // Skip transactions with no value
+ if (usdValue <= 0) {
+ return null;
+ }
+
+ // Create activity with proper status type
+ const activity: ActivityEvent = {
+ id: tx.id,
+ action: this.mapTransactionType(tx.type),
+ assetSymbol: this.extractAssetSymbol(tx.assetAddress),
+ amount,
+ usdValue,
+ timestamp: tx.timestamp,
+ status: 'COMPLETED', // All indexer transactions are completed
+ txHash: tx.txHash,
+ };
+
+ return activity;
+ });
+
+ // Filter out null values and assert the type
+ recentActivity = mappedActivities
+ .filter((activity): activity is ActivityEvent => activity !== null)
+ .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
+ .slice(0, 50);
+ }
+
+ return {
+ portfolio: {
+ totalBalanceUsd,
+ healthFactor,
+ totalDepositedUsd,
+ totalBorrowedUsd,
+ depositedAssets,
+ borrowedAssets,
+ lastUpdated: new Date().toISOString(),
+ },
+ recentActivity,
+ };
+ }
+
+ private extractAssetSymbol(assetAddress: string): string {
+ // Extract asset symbol from address
+ if (assetAddress.includes('USDC')) return 'USDC';
+ if (assetAddress.includes('XLM')) return 'XLM';
+ if (assetAddress.includes('BTC')) return 'BTC';
+ if (assetAddress.includes('ETH')) return 'ETH';
+ return assetAddress.slice(-4);
+ }
+
+ private mapTransactionType(type: string): ActivityActionType {
+ const normalizedType = type.toUpperCase();
+ switch (normalizedType) {
+ case 'DEPOSIT':
+ case 'SUPPLY':
+ return 'DEPOSIT';
+ case 'BORROW':
+ return 'BORROW';
+ case 'REPAY':
+ case 'REPAYMENT':
+ return 'REPAY';
+ case 'WITHDRAW':
+ case 'WITHDRAWAL':
+ return 'WITHDRAW';
+ default:
+ console.warn(`Unknown transaction type: ${type}, defaulting to DEPOSIT`);
+ return 'DEPOSIT';
+ }
+ }
+
+ destroy(): void {
+ if (this.abortController) {
+ this.abortController.abort();
+ this.abortController = null;
+ }
+ }
+}
+
+// Singleton instance
+let dashboardClientInstance: DashboardClient | null = null;
+
+export function getDashboardClient(): DashboardClient {
+ if (!dashboardClientInstance) {
+ const apiBaseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
+ dashboardClientInstance = new DashboardClient({ apiBaseUrl });
+ }
+ return dashboardClientInstance;
+}
\ No newline at end of file
diff --git a/veilend-web/src/lib/api/dashboard.ts b/veilend-web/src/lib/api/dashboard.ts
index accdd26..f0b5da5 100644
--- a/veilend-web/src/lib/api/dashboard.ts
+++ b/veilend-web/src/lib/api/dashboard.ts
@@ -2,10 +2,6 @@ import { DashboardData, ActivityActionType, AssetBalance } from '../types/dashbo
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
-// For the demo/campaign, we can use a hardcoded or random dummy address if none is provided.
-// In a real app with wallet connect, this would be passed dynamically.
-const DEMO_ADDRESS = 'GCOQ4Z...'; // example stellar pubkey
-
// Define types for API responses
interface IndexerPosition {
assetAddress: string;
@@ -22,77 +18,124 @@ interface IndexerTransaction {
txHash: string;
}
-export async function fetchDashboardData(address: string = DEMO_ADDRESS): Promise {
+interface OraclePrice {
+ [assetAddress: string]: number;
+}
+
+/**
+ * Fetches live dashboard data for a specific wallet address
+ * @param address - Stellar wallet address (must start with 'G')
+ * @returns Promise
+ * @throws Error if address is invalid or API calls fail
+ */
+export async function fetchDashboardData(address: string): Promise {
+ // Validate address
+ if (!address || !address.startsWith('G')) {
+ throw new Error('Invalid Stellar address provided. Address must start with "G".');
+ }
+
try {
- const [positionsRes, transactionsRes] = await Promise.all([
- fetch(`${API_BASE_URL}/indexer/positions/${address}`, { next: { revalidate: 10 } }),
- fetch(`${API_BASE_URL}/indexer/transactions/${address}`, { next: { revalidate: 10 } })
+ const [positionsRes, transactionsRes, pricesRes] = await Promise.all([
+ fetch(`${API_BASE_URL}/indexer/positions/${address}`, {
+ next: { revalidate: 10 },
+ headers: { 'Cache-Control': 'no-cache' }
+ }),
+ fetch(`${API_BASE_URL}/indexer/transactions/${address}`, {
+ next: { revalidate: 10 },
+ headers: { 'Cache-Control': 'no-cache' }
+ }),
+ fetch(`${API_BASE_URL}/oracle/prices`, {
+ next: { revalidate: 10 },
+ headers: { 'Cache-Control': 'no-cache' }
+ })
]);
- if (!positionsRes.ok || !transactionsRes.ok) {
- throw new Error('Failed to fetch data from live indexer endpoints');
+ if (!positionsRes.ok || !transactionsRes.ok || !pricesRes.ok) {
+ const errorDetails = {
+ positions: positionsRes.status,
+ transactions: transactionsRes.status,
+ prices: pricesRes.status
+ };
+ throw new Error(`Failed to fetch data from indexer: ${JSON.stringify(errorDetails)}`);
}
- const { positions } = await positionsRes.json() as { positions: IndexerPosition[] };
- const { transactions } = await transactionsRes.json() as { transactions: IndexerTransaction[] };
+ const positionsData = await positionsRes.json() as { positions: IndexerPosition[] };
+ const transactionsData = await transactionsRes.json() as { transactions: IndexerTransaction[] };
+ const pricesData = await pricesRes.json() as { prices: OraclePrice };
+
+ // Validate response structure
+ if (!positionsData.positions || !Array.isArray(positionsData.positions)) {
+ throw new Error('Invalid positions data format received from indexer');
+ }
let totalDepositedUsd = 0;
let totalBorrowedUsd = 0;
const depositedAssets: AssetBalance[] = [];
const borrowedAssets: AssetBalance[] = [];
- // Map positions (assuming naive 1:1 USD pricing for demo unless oracle is integrated)
- // The backend returns IndexerPosition: { assetAddress, depositedAmount, borrowedAmount }
- if (Array.isArray(positions)) {
- positions.forEach((pos: IndexerPosition) => {
- const deposited = Number(pos.depositedAmount) / 1e7; // Assuming 7 decimals (Stellar standard)
- const borrowed = Number(pos.borrowedAmount) / 1e7;
-
- // Mock price for demo since Oracle might not be fully wired in the read models yet
- const price = pos.assetAddress.includes('USDC') ? 1.0 : 0.11; // Dummy XLM price
-
- if (deposited > 0) {
- const usdValue = deposited * price;
- totalDepositedUsd += usdValue;
- depositedAssets.push({
- assetSymbol: pos.assetAddress.substring(0, 4), // Dummy symbol from address
- assetName: pos.assetAddress,
- balance: deposited,
- usdValue,
- });
- }
-
- if (borrowed > 0) {
- const usdValue = borrowed * price;
- totalBorrowedUsd += usdValue;
- borrowedAssets.push({
- assetSymbol: pos.assetAddress.substring(0, 4),
- assetName: pos.assetAddress,
- balance: borrowed,
- usdValue,
- });
- }
- });
- }
+ // Map positions with real oracle prices
+ const positions = positionsData.positions || [];
+ const transactions = transactionsData.transactions || [];
+ const prices = pricesData.prices || {};
+
+ positions.forEach((pos: IndexerPosition) => {
+ const deposited = Number(pos.depositedAmount) / 1e7;
+ const borrowed = Number(pos.borrowedAmount) / 1e7;
+
+ // Use oracle price, fallback to 0 if not available
+ const price = prices[pos.assetAddress] || 0;
- const healthFactor = totalBorrowedUsd === 0 ? 99.99 : (totalDepositedUsd * 0.8) / totalBorrowedUsd; // Assumed 80% LTV
+ if (deposited > 0 && price > 0) {
+ const usdValue = deposited * price;
+ totalDepositedUsd += usdValue;
+ depositedAssets.push({
+ assetSymbol: extractAssetSymbol(pos.assetAddress),
+ assetName: pos.assetAddress,
+ balance: deposited,
+ usdValue,
+ });
+ }
+
+ if (borrowed > 0 && price > 0) {
+ const usdValue = borrowed * price;
+ totalBorrowedUsd += usdValue;
+ borrowedAssets.push({
+ assetSymbol: extractAssetSymbol(pos.assetAddress),
+ assetName: pos.assetAddress,
+ balance: borrowed,
+ usdValue,
+ });
+ }
+ });
+
+ // Calculate health factor with proper LTV
+ const healthFactor = totalBorrowedUsd === 0
+ ? Infinity
+ : Math.min((totalDepositedUsd * 0.8) / totalBorrowedUsd, 99.99);
+
const totalBalanceUsd = totalDepositedUsd - totalBorrowedUsd;
- // Map transactions
- const recentActivity = Array.isArray(transactions) ? transactions.map((tx: IndexerTransaction) => {
- const amount = Number(tx.amount) / 1e7;
- const price = tx.assetAddress.includes('USDC') ? 1.0 : 0.11;
- return {
- id: tx.id,
- action: tx.type.toUpperCase() as ActivityActionType,
- assetSymbol: tx.assetAddress.substring(0, 4),
- amount,
- usdValue: amount * price,
- timestamp: tx.timestamp,
- status: 'COMPLETED' as const,
- txHash: tx.txHash,
- };
- }).sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()) : [];
+ // Map transactions with real prices
+ const recentActivity = Array.isArray(transactions)
+ ? transactions
+ .map((tx: IndexerTransaction) => {
+ const amount = Number(tx.amount) / 1e7;
+ const price = prices[tx.assetAddress] || 0;
+ return {
+ id: tx.id,
+ action: mapTransactionType(tx.type),
+ assetSymbol: extractAssetSymbol(tx.assetAddress),
+ amount,
+ usdValue: amount * price,
+ timestamp: tx.timestamp,
+ status: 'COMPLETED' as const,
+ txHash: tx.txHash,
+ };
+ })
+ .filter((activity) => activity.usdValue > 0)
+ .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
+ .slice(0, 50)
+ : [];
return {
portfolio: {
@@ -107,7 +150,52 @@ export async function fetchDashboardData(address: string = DEMO_ADDRESS): Promis
recentActivity,
};
} catch (error) {
- console.error('API Error:', error);
- throw new Error('Could not load live dashboard data. Is the NestJS indexer running?');
+ console.error('Dashboard API Error:', error);
+
+ // Re-throw with user-friendly message
+ if (error instanceof Error) {
+ throw new Error(`Failed to load dashboard data: ${error.message}`);
+ }
+ throw new Error('Could not load live dashboard data. Please check your connection.');
+ }
+}
+
+/**
+ * Extracts a short asset symbol from the asset address
+ * @param assetAddress - Full asset address
+ * @returns 4-character symbol
+ */
+function extractAssetSymbol(assetAddress: string): string {
+ // For production, this should use a proper mapping from the backend
+ // or extract from the asset code if available
+ if (assetAddress.includes('USDC')) return 'USDC';
+ if (assetAddress.includes('XLM')) return 'XLM';
+ if (assetAddress.includes('BTC')) return 'BTC';
+ if (assetAddress.includes('ETH')) return 'ETH';
+ return assetAddress.slice(-4);
+}
+
+/**
+ * Maps transaction type to ActivityActionType
+ * @param type - Raw transaction type from indexer
+ * @returns Normalized ActivityActionType
+ */
+function mapTransactionType(type: string): ActivityActionType {
+ const normalizedType = type.toUpperCase();
+ switch (normalizedType) {
+ case 'DEPOSIT':
+ case 'SUPPLY':
+ return 'DEPOSIT';
+ case 'BORROW':
+ return 'BORROW';
+ case 'REPAY':
+ case 'REPAYMENT':
+ return 'REPAY';
+ case 'WITHDRAW':
+ case 'WITHDRAWAL':
+ return 'WITHDRAW';
+ default:
+ console.warn(`Unknown transaction type: ${type}, defaulting to DEPOSIT`);
+ return 'DEPOSIT';
}
}
\ No newline at end of file
diff --git a/veilend-web/src/lib/hooks/useDashboardData.ts b/veilend-web/src/lib/hooks/useDashboardData.ts
new file mode 100644
index 0000000..7aa5969
--- /dev/null
+++ b/veilend-web/src/lib/hooks/useDashboardData.ts
@@ -0,0 +1,196 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { DashboardData } from '../types/dashboard';
+import { getDashboardClient } from '../api/dashboard-client';
+
+export interface UseDashboardDataOptions {
+ address: string | null;
+ enabled?: boolean;
+ refreshInterval?: number;
+ retryOnError?: boolean;
+ maxRetries?: number;
+}
+
+export interface UseDashboardDataResult {
+ data: DashboardData | null;
+ isLoading: boolean;
+ isError: boolean;
+ error: Error | null;
+ isStale: boolean;
+ refetch: () => Promise;
+ lastUpdated: Date | null;
+}
+
+export function useDashboardData(options: UseDashboardDataOptions): UseDashboardDataResult {
+ const {
+ address,
+ enabled = true,
+ refreshInterval = 30000,
+ retryOnError = true,
+ maxRetries = 3,
+ } = options;
+
+ const [data, setData] = useState(null);
+ const [isLoading, setIsLoading] = useState(false);
+ const [isError, setIsError] = useState(false);
+ const [error, setError] = useState(null);
+ const [isStale, setIsStale] = useState(false);
+ const [lastUpdated, setLastUpdated] = useState(null);
+
+ const retryCount = useRef(0);
+ const retryTimeoutRef = useRef(null);
+ const intervalIdRef = useRef(null);
+ const abortControllerRef = useRef(null);
+
+ // Ref container to hold fetchData reference for safe recursive retry calls
+ const fetchDataRef = useRef<() => Promise>(() => Promise.resolve());
+
+ const client = getDashboardClient();
+
+ // Clear pending timers & abort pending requests
+ const cleanupPendingOperations = useCallback(() => {
+ if (retryTimeoutRef.current) {
+ clearTimeout(retryTimeoutRef.current);
+ retryTimeoutRef.current = null;
+ }
+ if (abortControllerRef.current) {
+ abortControllerRef.current.abort();
+ abortControllerRef.current = null;
+ }
+ }, []);
+
+ // Primary fetch execution function
+ const fetchData = useCallback(async (): Promise => {
+ // Validate address format
+ if (!address || !address.startsWith('G')) {
+ setData(null);
+ setIsLoading(false);
+ setIsError(true);
+ setError(new Error('Invalid wallet address'));
+ return;
+ }
+
+ cleanupPendingOperations();
+ abortControllerRef.current = new AbortController();
+
+ setIsLoading(true);
+ setIsError(false);
+ setError(null);
+ setIsStale(false);
+
+ try {
+ const dashboardData = await client.fetchDashboardData(
+ address,
+ abortControllerRef.current.signal
+ );
+
+ setData(dashboardData);
+ setLastUpdated(new Date());
+ retryCount.current = 0;
+ setIsStale(false);
+ setIsLoading(false);
+ } catch (err) {
+ // Ignore request cancellations
+ if (err instanceof Error && err.name === 'AbortError') {
+ return;
+ }
+
+ const errorObj = err instanceof Error ? err : new Error('Failed to fetch dashboard data');
+ setError(errorObj);
+ setIsError(true);
+ setIsLoading(false);
+
+ // Exponential backoff retry logic using ref call to satisfy ESLint
+ if (retryOnError && retryCount.current < maxRetries) {
+ const backoffDelay = Math.min(1000 * Math.pow(2, retryCount.current), 10000);
+ retryCount.current += 1;
+
+ retryTimeoutRef.current = setTimeout(() => {
+ if (enabled && address) {
+ fetchDataRef.current();
+ }
+ }, backoffDelay);
+ }
+ }
+ }, [address, client, enabled, maxRetries, retryOnError, cleanupPendingOperations]);
+
+ // Keep fetchDataRef in sync safely via effect
+ useEffect(() => {
+ fetchDataRef.current = fetchData;
+ }, [fetchData]);
+
+ // Separate effect for clearing data when disabled or unmounting
+ useEffect(() => {
+ if (!enabled || !address) {
+ cleanupPendingOperations();
+ const timer = setTimeout(() => {
+ setData(null);
+ setIsLoading(false);
+ setIsError(false);
+ setError(null);
+ }, 0);
+
+ return () => clearTimeout(timer);
+ }
+ }, [enabled, address, cleanupPendingOperations]);
+
+ // Main lifecycle effect: initial fetch + interval polling
+ useEffect(() => {
+ if (!enabled || !address) {
+ return;
+ }
+
+ // Deferred execution prevents synchronous setState calls inside the effect
+ const initialTimer = setTimeout(() => {
+ fetchData();
+ }, 0);
+
+ if (refreshInterval > 0) {
+ intervalIdRef.current = setInterval(() => {
+ setIsStale(true);
+ fetchData();
+ }, refreshInterval);
+ }
+
+ return () => {
+ clearTimeout(initialTimer);
+ if (intervalIdRef.current) {
+ clearInterval(intervalIdRef.current);
+ intervalIdRef.current = null;
+ }
+ cleanupPendingOperations();
+ };
+ }, [address, enabled, refreshInterval, fetchData, cleanupPendingOperations]);
+
+ // Manual refetch trigger
+ const refetch = useCallback(async (): Promise => {
+ if (!enabled || !address) return;
+ retryCount.current = 0;
+ await fetchData();
+ }, [address, enabled, fetchData]);
+
+ // Handle visibility changes when returning to active tab
+ useEffect(() => {
+ const handleVisibilityChange = () => {
+ if (document.hidden) {
+ setIsStale(true);
+ } else if (isStale && enabled && address) {
+ fetchData();
+ }
+ };
+
+ document.addEventListener('visibilitychange', handleVisibilityChange);
+ return () => {
+ document.removeEventListener('visibilitychange', handleVisibilityChange);
+ };
+ }, [isStale, enabled, address, fetchData]);
+
+ return {
+ data,
+ isLoading,
+ isError,
+ error,
+ isStale,
+ refetch,
+ lastUpdated,
+ };
+}
diff --git a/veilend-web/src/lib/hooks/usePositionSync.ts b/veilend-web/src/lib/hooks/usePositionSync.ts
index 4c7d473..9b6d872 100644
--- a/veilend-web/src/lib/hooks/usePositionSync.ts
+++ b/veilend-web/src/lib/hooks/usePositionSync.ts
@@ -1,4 +1,4 @@
-'use client'
+'use client';
import * as React from 'react';
import { DashboardData } from '@/lib/types/dashboard';
@@ -29,9 +29,7 @@ interface UsePositionSyncOptions {
/**
* Keeps positions, collateral and borrowed values in sync with live protocol
- * state by polling the indexer. Exposes explicit loading / empty / stale / error
- * states so the dashboard can represent each clearly. Privacy mode is orthogonal:
- * this hook only manages the values; masking is handled at render time.
+ * state by polling the indexer.
*/
export function usePositionSync(
options: UsePositionSyncOptions = {},
@@ -48,20 +46,36 @@ export function usePositionSync(
const [lastSyncedAt, setLastSyncedAt] = React.useState(null);
const [error, setError] = React.useState(null);
- // Guards against state updates after unmount / overlapping requests
- const inFlight = React.useRef(false);
- const mounted = React.useRef(true);
+ // Safely sync ref in useEffect to avoid react-hooks/refs render error
+ const dataRef = React.useRef(data);
+ React.useEffect(() => {
+ dataRef.current = data;
+ }, [data]);
+
+ const inFlight = React.useRef(false);
+ const mounted = React.useRef(true);
+ const abortControllerRef = React.useRef(null);
const load = React.useCallback(async () => {
+ if (!address || !address.startsWith('G')) {
+ setStatus('idle');
+ setError('No valid wallet address provided');
+ return;
+ }
+
if (inFlight.current) return;
inFlight.current = true;
- // Only show the full loading state on the very first fetch; subsequent
- // polls refresh in the background without flickering the UI.
+ if (abortControllerRef.current) {
+ abortControllerRef.current.abort();
+ }
+ abortControllerRef.current = new AbortController();
+
setStatus((prev) => (prev === 'idle' ? 'loading' : prev));
try {
const result = await fetchDashboardData(address);
+
if (!mounted.current) return;
const isEmpty =
@@ -75,45 +89,102 @@ export function usePositionSync(
setStatus(isEmpty ? 'empty' : 'live');
} catch (err) {
if (!mounted.current) return;
- setError(err instanceof Error ? err.message : 'Failed to sync positions.');
- // Keep stale data visible if we have it; otherwise surface the error.
- setStatus(data ? 'stale' : 'error');
+
+ if (err instanceof Error && err.name === 'AbortError') {
+ return;
+ }
+
+ const errorMessage =
+ err instanceof Error ? err.message : 'Failed to sync positions.';
+ setError(errorMessage);
+
+ setStatus(dataRef.current ? 'stale' : 'error');
} finally {
inFlight.current = false;
+ abortControllerRef.current = null;
}
- }, [address, data]);
+ }, [address]);
+
+ // Handle address change: Reset state cleanly
+ React.useEffect(() => {
+ const timer = setTimeout(() => {
+ if (address) {
+ setStatus('idle');
+ setData(null);
+ setError(null);
+ setLastSyncedAt(null);
+ }
+ }, 0);
+
+ return () => clearTimeout(timer);
+ }, [address]);
+
+ const isValid = React.useMemo(() => {
+ return Boolean(enabled && address && address.startsWith('G'));
+ }, [enabled, address]);
// Initial load + interval polling
React.useEffect(() => {
mounted.current = true;
- if (!enabled) return;
- // Intentional fetch-on-mount: load() flips status to 'loading' before the
- // first await, which the rule flags; that initial transition is the point.
- // eslint-disable-next-line react-hooks/set-state-in-effect
- load();
- const id = setInterval(load, intervalMs);
+ if (!isValid) {
+ const timer = setTimeout(() => {
+ setStatus('idle');
+ }, 0);
+ return () => clearTimeout(timer);
+ }
+
+ const initialTimer = setTimeout(() => {
+ if (mounted.current) {
+ load();
+ }
+ }, 0);
+
+ const pollInterval = setInterval(() => {
+ if (mounted.current && isValid) {
+ load();
+ }
+ }, intervalMs);
+
return () => {
- mounted.current = false;
- clearInterval(id);
+ clearTimeout(initialTimer);
+ clearInterval(pollInterval);
+ if (abortControllerRef.current) {
+ abortControllerRef.current.abort();
+ abortControllerRef.current = null;
+ }
};
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [enabled, intervalMs, address]);
+ }, [isValid, intervalMs, load]);
- // Independent staleness ticker: flags data as stale if a poll hasn't
- // succeeded within staleAfterMs, even while requests keep failing.
+ // Staleness ticker: flags data as stale if poll hasn't succeeded within staleAfterMs
React.useEffect(() => {
if (lastSyncedAt === null) return;
- const id = setInterval(() => {
+
+ const ticker = setInterval(() => {
if (!mounted.current) return;
+
setStatus((prev) => {
if (prev !== 'live' && prev !== 'empty') return prev;
- return Date.now() - lastSyncedAt > staleAfterMs ? 'stale' : prev;
+
+ const isStale = Date.now() - lastSyncedAt > staleAfterMs;
+ return isStale ? 'stale' : prev;
});
}, Math.min(staleAfterMs, 5_000));
- return () => clearInterval(id);
+
+ return () => clearInterval(ticker);
}, [lastSyncedAt, staleAfterMs]);
+ // Component unmount lifecycle
+ React.useEffect(() => {
+ return () => {
+ mounted.current = false;
+ if (abortControllerRef.current) {
+ abortControllerRef.current.abort();
+ abortControllerRef.current = null;
+ }
+ };
+ }, []);
+
return {
status,
data,