@silentswap/react 0.0.41

package/dist/hooks/silent/useOrderTracking.js

@@ -0,0 +1,524 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+/**
+ * Output stage enum matching Svelte's OutputStage (string values)
+ */
+export var OutputStage;
+(function (OutputStage) {
+    OutputStage["NONE"] = "NONE";
+    OutputStage["INIT"] = "INIT";
+    OutputStage["FUNDED"] = "FUNDED";
+    OutputStage["REDEEMED"] = "REDEEMED";
+    OutputStage["IBC_SENT"] = "IBC_SENT";
+    OutputStage["IBC_RCVD"] = "IBC_RCVD";
+    OutputStage["BRIDGE_SENT"] = "BRIDGE_SENT";
+    OutputStage["BRIDGE_CFRM"] = "BRIDGE_CFRM";
+    OutputStage["BRIDGE_RCVD"] = "BRIDGE_RCVD";
+    OutputStage["SWAP_USDC_GAS"] = "SWAP_USDC_GAS";
+    OutputStage["SWAP_USDC_TRG"] = "SWAP_USDC_TRG";
+    OutputStage["LTRL_TRG_SENT"] = "LTRL_TRG_SENT";
+    OutputStage["LTRL_TRG_RCVD"] = "LTRL_TRG_RCVD";
+    OutputStage["SWAP_TRG_DST"] = "SWAP_TRG_DST";
+    OutputStage["XFER_TRG_DST"] = "XFER_TRG_DST";
+    OutputStage["REFUND_NATIVE"] = "REFUND_NATIVE";
+    OutputStage["FINALIZED"] = "FINALIZED";
+})(OutputStage || (OutputStage = {}));
+/**
+ * Get human-readable status text from output stage
+ */
+export function getStatusTextFromStage(stage) {
+    switch (stage) {
+        case OutputStage.NONE:
+            return 'Uncertain state';
+        case OutputStage.INIT:
+            return 'Verifying deposit';
+        case OutputStage.FUNDED:
+            return 'Initializing';
+        case OutputStage.REDEEMED:
+            return 'Anonymizing';
+        case OutputStage.IBC_SENT:
+            return 'Moving';
+        case OutputStage.IBC_RCVD:
+            return 'Staging';
+        case OutputStage.BRIDGE_SENT:
+        case OutputStage.BRIDGE_CFRM:
+        case OutputStage.BRIDGE_RCVD:
+            return 'Bridging';
+        case OutputStage.SWAP_USDC_GAS:
+            return 'Fueling';
+        case OutputStage.SWAP_USDC_TRG:
+            return 'Swapping';
+        case OutputStage.LTRL_TRG_SENT:
+        case OutputStage.LTRL_TRG_RCVD:
+        case OutputStage.SWAP_TRG_DST:
+            return 'Finalizing';
+        case OutputStage.XFER_TRG_DST:
+        case OutputStage.REFUND_NATIVE:
+        case OutputStage.FINALIZED:
+            return 'Complete';
+        default:
+            return 'Processing';
+    }
+}
+/**
+ * Get progress value (0-1) from output stage
+ */
+export function getProgressFromStage(stage) {
+    switch (stage) {
+        case OutputStage.NONE:
+            return 0;
+        case OutputStage.INIT:
+            return 0;
+        case OutputStage.FUNDED:
+            return 0.1;
+        case OutputStage.REDEEMED:
+            return 0.15;
+        case OutputStage.IBC_SENT:
+            return 0.25;
+        case OutputStage.IBC_RCVD:
+            return 0.35;
+        case OutputStage.BRIDGE_SENT:
+            return 0.5;
+        case OutputStage.BRIDGE_CFRM:
+            return 0.6;
+        case OutputStage.BRIDGE_RCVD:
+            return 0.7;
+        case OutputStage.SWAP_USDC_GAS:
+            return 0.8;
+        case OutputStage.SWAP_USDC_TRG:
+            return 0.9;
+        case OutputStage.LTRL_TRG_SENT:
+        case OutputStage.LTRL_TRG_RCVD:
+        case OutputStage.SWAP_TRG_DST:
+            return 0.95;
+        case OutputStage.XFER_TRG_DST:
+        case OutputStage.REFUND_NATIVE:
+        case OutputStage.FINALIZED:
+            return 1;
+        default:
+            return 0;
+    }
+}
+/**
+ * React hook for tracking SilentSwap orders via WebSocket
+ */
+export function useOrderTracking({ client, orderId: initialOrderId, viewingAuth: initialAuth, onStatusUpdate, onError, onComplete, } = {}) {
+    const [isConnected, setIsConnected] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [orderStatus, setOrderStatus] = useState(null);
+    const [deposit, setDeposit] = useState(null);
+    const [outputs, setOutputs] = useState([]);
+    const [progresses, setProgresses] = useState([undefined]);
+    const [statusTexts, setStatusTexts] = useState(['Connecting']);
+    const [completedTimestamp, setCompletedTimestamp] = useState(null);
+    const [isComplete, setIsComplete] = useState(false);
+    const wsRef = useRef(null);
+    const orderIdRef = useRef(initialOrderId);
+    const authRef = useRef(initialAuth);
+    const requestCounterRef = useRef(0);
+    const responseHandlersRef = useRef(new Map());
+    const reconnectTimeoutRef = useRef(null);
+    const lastReceivedRef = useRef(0);
+    const isReconnectingRef = useRef(false);
+    const reconnectAttemptsRef = useRef(0);
+    const maxReconnectAttempts = 5; // Maximum number of reconnection attempts
+    const reconnectDelayRef = useRef(1000); // Initial delay in ms, will increase exponentially
+    // Track the last connected orderId/auth to prevent unnecessary reconnections
+    // These are used in both the auto-connect useEffect and the onclose handler
+    const lastConnectedOrderIdRef = useRef(undefined);
+    const lastConnectedAuthRef = useRef(undefined);
+    // Update output state when status changes
+    const updateOutput = useCallback((index, stage, timestamp = Date.now(), asset) => {
+        const progress = getProgressFromStage(stage);
+        const status = getStatusTextFromStage(stage);
+        setProgresses((prev) => {
+            const newProgresses = [...prev];
+            newProgresses[index] = progress;
+            return newProgresses;
+        });
+        setStatusTexts((prev) => {
+            const newTexts = [...prev];
+            newTexts[index] = status;
+            return newTexts;
+        });
+        setOutputs((prev) => {
+            const newOutputs = [...prev];
+            newOutputs[index] = {
+                ...newOutputs[index],
+                index,
+                stage,
+                timestamp,
+                ...(asset ? { asset } : {}),
+                // Preserve recipient if it exists
+                ...(prev[index]?.recipient ? { recipient: prev[index].recipient } : {}),
+            };
+            return newOutputs;
+        });
+        // Check if all outputs are complete
+        setProgresses((currentProgresses) => {
+            if (currentProgresses.every((p) => (p ?? 0) >= 1)) {
+                setIsComplete(true);
+                setCompletedTimestamp(timestamp);
+                onComplete?.();
+            }
+            return currentProgresses;
+        });
+    }, [onComplete]);
+    // Submit JSON-RPC request
+    const submitRequest = useCallback((method, params, handler) => {
+        const ws = wsRef.current;
+        if (!ws || ws.readyState !== WebSocket.OPEN) {
+            console.warn('WebSocket not connected, cannot send request');
+            return -1;
+        }
+        const requestId = requestCounterRef.current++;
+        const request = {
+            jsonrpc: '2.0',
+            id: requestId,
+            method,
+            params,
+        };
+        if (handler) {
+            responseHandlersRef.current.set(requestId, handler);
+        }
+        ws.send(JSON.stringify(request));
+        return requestId;
+    }, []);
+    // Connect to WebSocket using JSON-RPC protocol (matching Svelte implementation)
+    const connect = useCallback((orderId, auth) => {
+        orderIdRef.current = orderId;
+        authRef.current = auth;
+        setIsLoading(true);
+        setError(null);
+        isReconnectingRef.current = false;
+        // Clear any existing reconnection timeout
+        if (reconnectTimeoutRef.current) {
+            clearTimeout(reconnectTimeoutRef.current);
+            reconnectTimeoutRef.current = null;
+        }
+        // Close existing connection
+        if (wsRef.current) {
+            wsRef.current.close();
+            wsRef.current = null;
+        }
+        // Clear response handlers
+        responseHandlersRef.current.clear();
+        requestCounterRef.current = 0;
+        // Reset reconnection attempts and delay for new connection
+        reconnectAttemptsRef.current = 0;
+        reconnectDelayRef.current = 1000;
+        // Get WebSocket URL (matching Svelte implementation)
+        // Use env var if available, otherwise use client baseUrl, otherwise construct from location
+        // IMPORTANT: URL should be just /websocket with NO path or query params
+        // Auth is sent via JSON-RPC connect method, not in URL
+        let wsUrl;
+        if (typeof window !== 'undefined' && window.__WEBSOCKET_URL__) {
+            // WebSocket URL from window (for runtime override)
+            wsUrl = window.__WEBSOCKET_URL__;
+        }
+        else if (client) {
+            // Use client baseUrl (convert http/https to ws/wss)
+            const baseUrl = client.baseUrl;
+            try {
+                const url = new URL(baseUrl);
+                const protocol = url.protocol === 'https:' ? 'wss:' : 'ws:';
+                wsUrl = `${protocol}//${url.host}/websocket`;
+            }
+            catch {
+                // If URL parsing fails, try simple string replacement
+                wsUrl = baseUrl.replace(/^https?:\/\//, 'wss://').replace(/^http:\/\//, 'ws://') + '/websocket';
+            }
+        }
+        else if (typeof window !== 'undefined') {
+            // Construct from current location
+            wsUrl = `${window.location.protocol === 'https:' ? 'wss' : 'ws'}://${window.location.host}/websocket`;
+        }
+        else {
+            wsUrl = 'ws://localhost/websocket';
+        }
+        // Ensure URL doesn't have any path or query params (just /websocket)
+        // This is critical: the WebSocket URL must be exactly: wss://domain/websocket (no params)
+        try {
+            const url = new URL(wsUrl);
+            // Force protocol to ws/wss (remove any existing path/query)
+            const protocol = url.protocol === 'https:' || url.protocol === 'wss:' ? 'wss:' : 'ws:';
+            // Reconstruct URL with only host and /websocket path
+            wsUrl = `${protocol}//${url.host}/websocket`;
+        }
+        catch {
+            // If URL parsing fails, try to clean it manually
+            // Remove any query params, hash, or extra paths
+            wsUrl = wsUrl.split('?')[0].split('#')[0].replace(/\/+$/, '') + '/websocket';
+        }
+        try {
+            const ws = new WebSocket(wsUrl);
+            wsRef.current = ws;
+            ws.onopen = () => {
+                lastReceivedRef.current = Date.now();
+                setIsConnected(true);
+                setIsLoading(false);
+                isReconnectingRef.current = false;
+                // Reset reconnection attempts on successful connection
+                reconnectAttemptsRef.current = 0;
+                reconnectDelayRef.current = 1000;
+                // Send connect JSON-RPC request (matching Svelte)
+                const connectRequestId = submitRequest('connect', {
+                    auth: {
+                        orderId,
+                        viewingAuth: auth,
+                    },
+                }, (error, result) => {
+                    if (error) {
+                        const err = new Error(error.message || 'Connection error');
+                        setError(err);
+                        setIsLoading(false);
+                        onError?.(err);
+                        return;
+                    }
+                    // Handle connected response
+                    const status = result;
+                    setOrderStatus(status);
+                    if (status.deposit) {
+                        setDeposit({
+                            amount: status.deposit.amount,
+                            timestamp: status.deposit.timestamp,
+                            duration: status.deposit.duration,
+                            orderId: status.deposit.orderId,
+                            tx: status.deposit.tx,
+                        });
+                    }
+                    // Initialize outputs
+                    const numOutputs = status.outputs?.length ?? 1;
+                    setProgresses(new Array(numOutputs).fill(undefined));
+                    setStatusTexts(new Array(numOutputs).fill('Connecting'));
+                    // Process initial output statuses
+                    status.outputs?.forEach((output, index) => {
+                        // Set output with recipient information (matching Svelte)
+                        setOutputs((prev) => {
+                            const newOutputs = [...prev];
+                            newOutputs[index] = {
+                                index,
+                                stage: output.stage,
+                                timestamp: output.timestamp,
+                                recipient: output.recipient,
+                                asset: output.output,
+                                txs: output.txs,
+                            };
+                            return newOutputs;
+                        });
+                        // Update progress and status
+                        updateOutput(index, output.stage, output.timestamp, output.output);
+                    });
+                    // Register status handler for subsequent updates (matching Svelte pattern)
+                    // Status updates come as responses to the same request ID
+                    if (connectRequestId >= 0) {
+                        responseHandlersRef.current.set(connectRequestId, (statusError, statusResult) => {
+                            if (statusError) {
+                                const err = new Error(statusError.message || 'Status error');
+                                setError(err);
+                                onError?.(err);
+                                return;
+                            }
+                            // Handle status update
+                            const update = statusResult;
+                            handleStatusUpdate(update);
+                        });
+                    }
+                    onStatusUpdate?.(status);
+                });
+            };
+            ws.onmessage = (event) => {
+                lastReceivedRef.current = Date.now();
+                try {
+                    const response = JSON.parse(event.data);
+                    // Validate JSON-RPC response
+                    if (response.jsonrpc !== '2.0' || typeof response.id !== 'number') {
+                        return;
+                    }
+                    // Get handler(s) for this request ID (matching Svelte pattern)
+                    // Status updates come as multiple responses to the same request ID
+                    // So we DON'T delete the handler - it stays registered for subsequent updates
+                    const handler = responseHandlersRef.current.get(response.id);
+                    if (handler) {
+                        // Call handler but DON'T delete it - status updates reuse the same request ID
+                        handler(response.error, response.result);
+                    }
+                }
+                catch (parseError) {
+                    console.warn('Failed to parse WebSocket message:', parseError);
+                }
+            };
+            ws.onerror = (event) => {
+                const err = new Error('WebSocket connection error');
+                setError(err);
+                setIsLoading(false);
+                // Don't call onError here to prevent infinite error logging
+                // The error will be handled by onclose reconnection logic
+            };
+            ws.onclose = async () => {
+                setIsConnected(false);
+                responseHandlersRef.current.clear();
+                // Automatic reconnection with retry limit and exponential backoff
+                // Only reconnect if we still have valid orderId/auth and we're not already reconnecting
+                // Also check that the orderId/auth matches what we're supposed to be tracking
+                if (orderIdRef.current &&
+                    authRef.current &&
+                    !isReconnectingRef.current &&
+                    orderIdRef.current === lastConnectedOrderIdRef.current &&
+                    authRef.current === lastConnectedAuthRef.current) {
+                    // Check if we've exceeded max reconnection attempts
+                    if (reconnectAttemptsRef.current >= maxReconnectAttempts) {
+                        const err = new Error(`WebSocket connection failed after ${maxReconnectAttempts} attempts`);
+                        setError(err);
+                        setIsLoading(false);
+                        onError?.(err);
+                        // Reset attempts after a longer delay (30 seconds) to allow retry later
+                        reconnectTimeoutRef.current = setTimeout(() => {
+                            reconnectAttemptsRef.current = 0;
+                            reconnectDelayRef.current = 1000;
+                        }, 30000);
+                        return;
+                    }
+                    isReconnectingRef.current = true;
+                    reconnectAttemptsRef.current += 1;
+                    // Exponential backoff: delay increases with each attempt (1s, 2s, 4s, 8s, 16s)
+                    const currentDelay = reconnectDelayRef.current;
+                    reconnectDelayRef.current = Math.min(currentDelay * 2, 30000); // Cap at 30 seconds
+                    // If last received was a while ago, add extra delay
+                    const timeSinceLastReceived = Date.now() - lastReceivedRef.current;
+                    const extraDelay = timeSinceLastReceived > 90000 ? 5000 : 0;
+                    const totalDelay = currentDelay + extraDelay;
+                    reconnectTimeoutRef.current = setTimeout(() => {
+                        // Double-check that orderId/auth still match before reconnecting
+                        if (orderIdRef.current &&
+                            authRef.current &&
+                            orderIdRef.current === lastConnectedOrderIdRef.current &&
+                            authRef.current === lastConnectedAuthRef.current) {
+                            isReconnectingRef.current = false; // Reset before connecting
+                            connect(orderIdRef.current, authRef.current);
+                        }
+                        else {
+                            // Order changed, don't reconnect
+                            isReconnectingRef.current = false;
+                            reconnectAttemptsRef.current = 0;
+                            reconnectDelayRef.current = 1000;
+                        }
+                    }, totalDelay);
+                }
+            };
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Failed to connect to order tracking');
+            setError(error);
+            setIsLoading(false);
+            onError?.(error);
+        }
+    }, [submitRequest, updateOutput, onStatusUpdate, onError]);
+    // Handle status updates
+    const handleStatusUpdate = useCallback((update) => {
+        switch (update.type) {
+            case 'deposit': {
+                setDeposit({
+                    amount: update.data.amount,
+                    timestamp: update.data.timestamp,
+                    duration: update.data.duration,
+                    orderId: update.data.orderId,
+                    tx: update.data.tx,
+                });
+                break;
+            }
+            case 'stage': {
+                updateOutput(update.data.index, update.data.stage, update.data.timestamp, update.data.asset);
+                break;
+            }
+            case 'transaction': {
+                setOutputs((prev) => {
+                    const newOutputs = [...prev];
+                    if (newOutputs[update.data.index]) {
+                        const existingTxs = newOutputs[update.data.index].txs || {};
+                        newOutputs[update.data.index] = {
+                            ...newOutputs[update.data.index],
+                            txs: {
+                                ...existingTxs,
+                                [update.data.kind]: {
+                                    txId: update.data.txId,
+                                    chain: update.data.chain,
+                                },
+                            },
+                        };
+                    }
+                    return newOutputs;
+                });
+                break;
+            }
+            case 'error': {
+                const err = new Error(update.data.message || 'Order tracking error');
+                setError(err);
+                onError?.(err);
+                break;
+            }
+        }
+    }, [updateOutput, onError]);
+    // Disconnect from WebSocket
+    const disconnect = useCallback(() => {
+        // Clear reconnection timeout
+        if (reconnectTimeoutRef.current) {
+            clearTimeout(reconnectTimeoutRef.current);
+            reconnectTimeoutRef.current = null;
+        }
+        isReconnectingRef.current = true; // Prevent reconnection
+        orderIdRef.current = undefined;
+        authRef.current = undefined;
+        if (wsRef.current) {
+            wsRef.current.close();
+            wsRef.current = null;
+        }
+        responseHandlersRef.current.clear();
+        setIsConnected(false);
+    }, []);
+    // Auto-connect if orderId and auth are provided
+    useEffect(() => {
+        // Only connect if orderId/auth changed or if not yet connected
+        // Also check if we're already connected to the same orderId/auth to prevent reconnection
+        const shouldConnect = initialOrderId &&
+            initialAuth &&
+            client &&
+            (lastConnectedOrderIdRef.current !== initialOrderId || lastConnectedAuthRef.current !== initialAuth) &&
+            !isReconnectingRef.current &&
+            (!wsRef.current || wsRef.current.readyState === WebSocket.CLOSED);
+        if (shouldConnect) {
+            lastConnectedOrderIdRef.current = initialOrderId;
+            lastConnectedAuthRef.current = initialAuth;
+            connect(initialOrderId, initialAuth);
+        }
+        return () => {
+            // Only disconnect if we're actually disconnecting (orderId/auth cleared)
+            if (!initialOrderId || !initialAuth) {
+                lastConnectedOrderIdRef.current = undefined;
+                lastConnectedAuthRef.current = undefined;
+                disconnect();
+            }
+        };
+        // Only depend on initialOrderId, initialAuth, and client
+        // Don't include connect/disconnect to prevent infinite loops
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialOrderId, initialAuth, client]);
+    return {
+        // State
+        isConnected,
+        isLoading,
+        error,
+        orderStatus,
+        deposit,
+        outputs,
+        progresses,
+        statusTexts,
+        completedTimestamp,
+        isComplete,
+        // Methods
+        connect,
+        disconnect,
+        getStatusText: getStatusTextFromStage,
+        getProgress: getProgressFromStage,
+    };
+}

package/dist/hooks/silent/useQuoteCalculation.d.ts

@@ -0,0 +1,50 @@
+import type { QuoteResponse, HdFacilitatorGroup, BridgeProvider, AssetInfo, QuoteRequest } from '@silentswap/sdk';
+import type { SilentSwapWallet } from './useWallet.js';
+export interface Destination {
+    asset: string;
+    contact: string;
+    amount: string;
+    priceUsd?: number;
+}
+export interface QuoteCalculationResult {
+    quote: QuoteResponse;
+    usdcAmount: string;
+    facilitatorGroup: HdFacilitatorGroup | undefined;
+    bridgeProvider: BridgeProvider;
+    allowanceTarget: `0x${string}` | undefined;
+}
+export interface UseQuoteCalculationOptions {
+    /** User's address (EVM hex address or Solana base58 address) */
+    address: `0x${string}` | string;
+    /** EVM address */
+    evmAddress: `0x${string}` | string;
+    /** SilentSwap wallet instance */
+    wallet: SilentSwapWallet | null;
+    /** Depositor address from client */
+    depositorAddress: `0x${string}`;
+    /** Get quote function */
+    getQuote: (request: QuoteRequest) => Promise<QuoteResponse | null>;
+    /** Get price function */
+    getPrice: (asset: AssetInfo) => Promise<number>;
+    /** Set destinations callback */
+    setDestinations: (updater: Destination[] | ((prev: Destination[]) => Destination[])) => void;
+}
+export interface UseQuoteCalculationReturn {
+    /** Calculate quote and return result */
+    calculateQuote: (sourceAsset: string, sourceAmount: string, destinations: Destination[], splits: number[]) => Promise<QuoteCalculationResult | null>;
+    /** Loading state for quote calculation */
+    loadingAmounts: boolean;
+    /** Deposit amount in USDC */
+    depositAmountUsdc: number;
+}
+/**
+ * Hook for calculating quotes and USDC amounts
+ *
+ * Extracted from useSilentQuote to improve modularity and reusability.
+ * Handles:
+ * - USDC amount calculation for different asset types (Solana, EVM, direct USDC)
+ * - Facilitator group resolution
+ * - Quote request construction and fetching
+ * - Destination amount updates
+ */
+export declare function useQuoteCalculation({ address, evmAddress, wallet, depositorAddress, getQuote, getPrice, setDestinations, }: UseQuoteCalculationOptions): UseQuoteCalculationReturn;