@silentswap/react 0.0.78 → 0.0.80

package/dist/contexts/OrdersContext.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { NaiveBase58, RefundEligibility } from '@silentswap/sdk';
 import type { SilentSwapWallet } from '../hooks/silent/useWallet.js';
+import { type OrderTrackingState, type OrderTrackingOptions } from './orderTrackingTypes.js';
 export type OrdersContextOrderMetadata = {
     sourceAsset?: {
         caip19: string;
@@ -29,16 +30,23 @@ export type FacilitatorGroup = () => Promise<{
     }>;
 }>;
 export declare const useWalletFacilitatorGroups: (wallet: SilentSwapWallet | null, setFacilitatorGroups: (groups: FacilitatorGroup[]) => void) => void;
+export type OrderDestination = {
+    asset: string;
+    contact: string;
+    amount: string;
+};
 export type OrdersContextType = {
     orders: OrdersContextOrder[];
     loading: boolean;
     facilitatorGroups: FacilitatorGroup[];
     orderIdToViewingAuth: Record<string, NaiveBase58>;
     orderIdToDefaultPublicKey: Record<string, string>;
+    orderIdToDestinations: Record<string, OrderDestination[]>;
     addFacilitatorGroup: (group: FacilitatorGroup) => void;
     setFacilitatorGroups: (groups: FacilitatorGroup[]) => void;
     clearFacilitatorGroups: () => void;
     setOrderDefaultPublicKey: (orderId: string, publicKey: string) => void;
+    setOrderDestinations: (orderId: string, destinations: OrderDestination[]) => void;
     refreshOrders: () => void;
     getOrderAgeText: (modified?: number) => string;
     getStatusInfo: (status: string, refundEligibility?: RefundEligibility | null) => {
@@ -46,6 +54,10 @@ export type OrdersContextType = {
         pulsing: boolean;
         color: string;
     };
+    orderTrackingByKey: Record<string, OrderTrackingState>;
+    connectOrderTracking: (orderId: string, auth: string, options: OrderTrackingOptions) => void;
+    disconnectOrderTracking: (orderId: string, auth: string) => void;
+    getOrderTrackingState: (orderId: string, auth: string) => OrderTrackingState;
 };
 export declare const OrdersProvider: React.FC<{
     children: React.ReactNode;

package/dist/contexts/OrdersContext.js

@@ -4,6 +4,8 @@ import { createContext, useContext, useState, useEffect, useCallback, useMemo, u
 import { bytes_to_base58, DepositStatus, hex_to_bytes } from '@silentswap/sdk';
 import { useLocalStorage } from 'usehooks-ts';
 import { useSilentSwap } from './SilentSwapContext.js';
+import { createOrderTrackingManager } from './orderTrackingConnection.js';
+import { getOrderTrackingCacheKey, DEFAULT_ORDER_TRACKING_STATE, } from './orderTrackingTypes.js';
 export const useWalletFacilitatorGroups = (wallet, setFacilitatorGroups) => {
     // Automatically set facilitator groups from wallet (matches Svelte behavior)
     // In Svelte: UserState.facilitatorGroups = a_accounts.map(g => g.group) when wallet loads
@@ -28,6 +30,49 @@ export const OrdersProvider = ({ children, baseUrl: baseUrlProp }) => {
     const [facilitatorGroups, setFacilitatorGroupsState] = useState([]);
     const [orderIdToViewingAuth, setOrderIdToViewingAuth] = useLocalStorage('orderIdToViewingAuth', {}, { initializeWithValue: true });
     const [orderIdToDefaultPublicKey, setOrderIdToDefaultPublicKey] = useLocalStorage('orderIdToDefaultPublicKey', {}, { initializeWithValue: true });
+    const [orderIdToDestinations, setOrderIdToDestinationsState] = useLocalStorage('orderIdToDestinations', {}, { initializeWithValue: true });
+    // Order tracking: WebSocket connections and status cache live in context
+    const [orderTrackingByKey, setOrderTrackingByKey] = useState({});
+    const orderTrackingStateRef = useRef(new Map());
+    const activeTrackingKeysRef = useRef(new Set());
+    const optionsByKeyRef = useRef(new Map());
+    // Stable API object: only setStateForKey needs a ref so it always sees latest setOrderTrackingByKey
+    const setStateForKeyRef = useRef(null);
+    setStateForKeyRef.current = (key, state) => {
+        orderTrackingStateRef.current.set(key, state);
+        setOrderTrackingByKey((prev) => ({ ...prev, [key]: state }));
+    };
+    const orderTrackingApiRef = useRef({
+        setStateForKey(key, state) {
+            setStateForKeyRef.current(key, state);
+        },
+        getStateForKey(key) {
+            return orderTrackingStateRef.current.get(key);
+        },
+        isKeyActive(key) {
+            return activeTrackingKeysRef.current.has(key);
+        },
+        getOptionsForKey(key) {
+            return optionsByKeyRef.current.get(key);
+        },
+    });
+    const orderTrackingManager = useMemo(() => createOrderTrackingManager(orderTrackingApiRef), []);
+    const connectOrderTracking = useCallback((orderId, auth, options) => {
+        const key = getOrderTrackingCacheKey(orderId, auth);
+        activeTrackingKeysRef.current.add(key);
+        optionsByKeyRef.current.set(key, options);
+        orderTrackingManager.connect(orderId, auth, key, options);
+    }, [orderTrackingManager]);
+    const disconnectOrderTracking = useCallback((orderId, auth) => {
+        const key = getOrderTrackingCacheKey(orderId, auth);
+        activeTrackingKeysRef.current.delete(key);
+        optionsByKeyRef.current.delete(key);
+        orderTrackingManager.disconnect(orderId, auth);
+    }, [orderTrackingManager]);
+    const getOrderTrackingState = useCallback((orderId, auth) => {
+        const key = getOrderTrackingCacheKey(orderId, auth);
+        return orderTrackingByKey[key] ?? DEFAULT_ORDER_TRACKING_STATE;
+    }, [orderTrackingByKey]);
     // Generate viewing auth token from facilitator group
     const facilitator_group_authorize_order_view = useCallback(async (groupGetter) => {
         try {
@@ -190,6 +235,12 @@ export const OrdersProvider = ({ children, baseUrl: baseUrlProp }) => {
             [orderId]: publicKey,
         }));
     }, [setOrderIdToDefaultPublicKey]);
+    const setOrderDestinations = useCallback((orderId, destinations) => {
+        setOrderIdToDestinationsState((prev) => ({
+            ...prev,
+            [orderId]: destinations,
+        }));
+    }, [setOrderIdToDestinationsState]);
     const clearFacilitatorGroups = useCallback(() => {
         setFacilitatorGroupsState([]);
         setOrders([]);
@@ -238,26 +289,38 @@ export const OrdersProvider = ({ children, baseUrl: baseUrlProp }) => {
         facilitatorGroups,
         orderIdToViewingAuth,
         orderIdToDefaultPublicKey,
+        orderIdToDestinations,
         addFacilitatorGroup,
         setFacilitatorGroups,
         clearFacilitatorGroups,
         setOrderDefaultPublicKey,
+        setOrderDestinations,
         refreshOrders,
         getOrderAgeText,
         getStatusInfo,
+        orderTrackingByKey,
+        connectOrderTracking,
+        disconnectOrderTracking,
+        getOrderTrackingState,
     }), [
         orders,
         loading,
         facilitatorGroups,
         orderIdToViewingAuth,
         orderIdToDefaultPublicKey,
+        orderIdToDestinations,
         addFacilitatorGroup,
         setFacilitatorGroups,
         clearFacilitatorGroups,
         setOrderDefaultPublicKey,
+        setOrderDestinations,
         refreshOrders,
         getOrderAgeText,
         getStatusInfo,
+        orderTrackingByKey,
+        connectOrderTracking,
+        disconnectOrderTracking,
+        getOrderTrackingState,
     ]);
     return _jsx(OrdersContext.Provider, { value: value, children: children });
 };

package/dist/contexts/SwapFormEstimatesContext.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type CalculationDirection } from '@silentswap/sdk';
+import type { AssetInfo } from '@silentswap/sdk';
+export interface SwapFormEstimatesContextType {
+    handleSliderChange: () => void;
+    handleDestinationAmountChange: () => void;
+    handleInputAmountChange: () => void;
+    calculationDirection: CalculationDirection;
+}
+export interface SwapFormEstimatesProviderProps {
+    children: React.ReactNode;
+    tokenIn: AssetInfo | null;
+    fetchEstimates: (direction?: CalculationDirection) => Promise<void>;
+}
+export declare function SwapFormEstimatesProvider({ children, tokenIn, fetchEstimates, }: SwapFormEstimatesProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useSwapFormEstimatesContext(): SwapFormEstimatesContextType;

package/dist/contexts/SwapFormEstimatesContext.js

@@ -0,0 +1,445 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useCallback, useRef, useMemo, useEffect } from 'react';
+import { useSwap, X_RANGE_SLIDER_MIN_GAP } from '../hooks/useSwap.js';
+import { usePricesContext } from './PricesContext.js';
+import { usePlatformHealthContext } from '../hooks/usePlatformHealth.js';
+import { getAssetByCaip19, CALCULATION_DIRECTION_INPUT_TO_OUTPUT, CALCULATION_DIRECTION_OUTPUT_TO_INPUT, } from '@silentswap/sdk';
+const XT_DELAY_DEBOUNCE_QUOTE = 550;
+const SwapFormEstimatesContext = createContext(undefined);
+export function SwapFormEstimatesProvider({ children, tokenIn, fetchEstimates, }) {
+    const setSplits = useSwap((state) => state.setSplits);
+    const setInputAmount = useSwap((state) => state.setInputAmount);
+    const inputAmount = useSwap((state) => state.inputAmount);
+    const destinations = useSwap((state) => state.destinations);
+    const splits = useSwap((state) => state.splits);
+    const isDraggingSlider = useSwap((state) => state.isDraggingSlider);
+    const updateDestinationAmount = useSwap((state) => state.updateDestinationAmount);
+    const { getPrice } = usePricesContext();
+    const { getServiceFeeRate } = usePlatformHealthContext();
+    const fetchEstimatesRef = useRef(fetchEstimates);
+    const debounceTimerRef = useRef(null);
+    const isRecalculatingInputRef = useRef(false);
+    const programmaticInputChangeRef = useRef(false);
+    const shouldFetchAfterInputRecalcRef = useRef(false);
+    const isFetchingEstimatesRef = useRef(false);
+    const [calculationDirection, setCalculationDirection] = React.useState(CALCULATION_DIRECTION_INPUT_TO_OUTPUT);
+    const calculationDirectionRef = useRef(CALCULATION_DIRECTION_INPUT_TO_OUTPUT);
+    // Refs for destination amount calculation (from useDestinationAmountCalculation)
+    const prevSplitsRef = useRef('');
+    const prevInputAmountForCalcRef = useRef('');
+    const rafScheduledRef = useRef(false);
+    const pendingUpdateRef = useRef(null);
+    const isManualDestinationChangeRef = useRef(false);
+    // Update fetchEstimates ref
+    React.useEffect(() => {
+        fetchEstimatesRef.current = fetchEstimates;
+    }, [fetchEstimates]);
+    // Debounced fetch estimates
+    const scheduleFetchEstimates = useCallback((immediate = false, direction) => {
+        if (isDraggingSlider) {
+            return;
+        }
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+            debounceTimerRef.current = null;
+        }
+        const effectiveDirection = direction || calculationDirectionRef.current || CALCULATION_DIRECTION_INPUT_TO_OUTPUT;
+        // Update state and ref when direction changes
+        if (effectiveDirection !== calculationDirectionRef.current) {
+            calculationDirectionRef.current = effectiveDirection;
+            setCalculationDirection(effectiveDirection);
+        }
+        isFetchingEstimatesRef.current = true;
+        const fetchPromise = immediate
+            ? fetchEstimatesRef.current(effectiveDirection)
+            : new Promise((resolve) => {
+                debounceTimerRef.current = setTimeout(() => {
+                    fetchEstimatesRef
+                        .current(effectiveDirection)
+                        .then(resolve)
+                        .catch((err) => {
+                        console.error('Failed to fetch estimates:', err);
+                        resolve();
+                    });
+                    debounceTimerRef.current = null;
+                }, XT_DELAY_DEBOUNCE_QUOTE);
+            });
+        fetchPromise
+            .catch((err) => {
+            console.error('Failed to fetch estimates:', err);
+        })
+            .finally(() => {
+            isFetchingEstimatesRef.current = false;
+        });
+    }, [isDraggingSlider]);
+    // Recalculate splits from destination amounts
+    const recalculateSplitsFromAmounts = useCallback(() => {
+        if (!tokenIn)
+            return;
+        // Get latest state from Zustand store to avoid stale closures
+        const currentState = useSwap.getState();
+        const currentDestinations = currentState.destinations;
+        const currentInputAmount = currentState.inputAmount;
+        const currentSplits = currentState.splits;
+        console.log('[SwapFormEstimates] Recalculating splits from amounts destinations', JSON.stringify({
+            destinations: currentDestinations.map((d) => ({ asset: d.asset, amount: d.amount, priceUsd: d.priceUsd })),
+            inputAmount: currentInputAmount,
+        }, null, 2));
+        // Calculate USD values for each destination
+        // Always use getPrice to ensure we have the latest price, not stale dest.priceUsd
+        const destinationUsdValues = currentDestinations.map((dest, idx) => {
+            if (!dest.amount || parseFloat(dest.amount) <= 0)
+                return 0;
+            const amount = parseFloat(dest.amount) || 0;
+            let price = undefined;
+            if (dest.asset) {
+                const assetInfo = getAssetByCaip19(dest.asset);
+                if (assetInfo) {
+                    // Always use getPrice to get the latest price
+                    price = getPrice(assetInfo);
+                }
+            }
+            // Fallback to dest.priceUsd only if getPrice returns undefined/null
+            if (price == null) {
+                price = dest.priceUsd;
+            }
+            const usdValue = price && price > 0 ? amount * price : 0;
+            console.log(`[SwapFormEstimates] Destination ${idx} USD calculation`, JSON.stringify({
+                index: idx,
+                asset: dest.asset,
+                amount,
+                price,
+                destPriceUsd: dest.priceUsd,
+                usdValue,
+            }, null, 2));
+            return usdValue;
+        });
+        const totalUsd = destinationUsdValues.reduce((sum, val) => sum + val, 0);
+        console.log('[SwapFormEstimates] Total destination USD', JSON.stringify({
+            totalUsd,
+            destinationUsdValues,
+        }, null, 2));
+        // When user manually edits outputs, trigger reverse calculation using estimate system
+        // The estimate system will calculate the required input amount using EXACT_OUTPUT tradeType
+        // and srcChainTokenInAmount: 'auto' for ingress quotes
+        // IMPORTANT: When calculating input from outputs, we need to account for the service fee
+        // that will be deducted. So if user wants $100 in outputs, we need to calculate input
+        // such that: inputUsd - (inputUsd * serviceFeeRate) = outputUsd
+        // Solving: inputUsd = outputUsd / (1 - serviceFeeRate)
+        if (totalUsd > 0 && tokenIn && !isRecalculatingInputRef.current) {
+            const currentInputAmountNum = parseFloat(currentInputAmount) || 0;
+            const tokenInPrice = getPrice(tokenIn);
+            if (tokenInPrice != null && tokenInPrice > 0) {
+                // Calculate required input USD accounting for service fee
+                // Formula: inputUsd = outputUsd / (1 - serviceFeeRate)
+                const serviceFeeRate = getServiceFeeRate() ?? 0.01; // Default to 1% if not available
+                const requiredInputUsd = totalUsd / (1 - serviceFeeRate);
+                const currentInputUsd = currentInputAmountNum * tokenInPrice;
+                const USD_TOLERANCE = 0.01;
+                const difference = Math.abs(requiredInputUsd - currentInputUsd);
+                console.log('[SwapFormEstimates] Triggering reverse calculation via estimate system', JSON.stringify({
+                    currentInputAmount: currentInputAmountNum,
+                    currentInputUsd,
+                    totalUsd,
+                    requiredInputUsd,
+                    serviceFeeRate,
+                    tokenInPrice,
+                    difference,
+                    exceedsTolerance: difference > USD_TOLERANCE,
+                }, null, 2));
+                // If there's a significant difference, trigger reverse calculation
+                // The estimate system will calculate the required input amount automatically
+                if (difference > USD_TOLERANCE) {
+                    isRecalculatingInputRef.current = true;
+                    programmaticInputChangeRef.current = true;
+                    shouldFetchAfterInputRecalcRef.current = true;
+                    calculationDirectionRef.current = CALCULATION_DIRECTION_OUTPUT_TO_INPUT;
+                    setCalculationDirection(CALCULATION_DIRECTION_OUTPUT_TO_INPUT);
+                    // Fetch estimates with reverse calculation direction
+                    // The estimate system will:
+                    // 1. Use EXACT_OUTPUT tradeType for egress quotes with dstChainTokenOutAmount = output value
+                    // 2. Use EXACT_OUTPUT tradeType for ingress quotes with srcChainTokenInAmount: 'auto'
+                    // 3. Calculate the required input amount and return it in result.calculatedInputAmount
+                    scheduleFetchEstimates(false, CALCULATION_DIRECTION_OUTPUT_TO_INPUT);
+                    // Reset the flag after a delay to allow state updates to propagate
+                    setTimeout(() => {
+                        isRecalculatingInputRef.current = false;
+                    }, 100);
+                }
+            }
+        }
+        // Recalculate splits based on USD proportions
+        // Always recalculate splits when destinations change, even if input was recalculated
+        // This ensures the slider reflects the new proportions
+        if (totalUsd > 0 && currentSplits.length === currentDestinations.length) {
+            const newSplits = [];
+            let cumulative = 0;
+            for (let i = 0; i < destinationUsdValues.length; i++) {
+                const proportion = destinationUsdValues[i] / totalUsd;
+                cumulative += proportion;
+                const newSplit = Math.max(cumulative, i > 0 ? newSplits[i - 1] + X_RANGE_SLIDER_MIN_GAP : X_RANGE_SLIDER_MIN_GAP);
+                newSplits.push(Math.min(newSplit, 1.0));
+            }
+            // Ensure last split is exactly 1.0
+            newSplits[newSplits.length - 1] = 1.0;
+            // Normalize splits to ensure minimum gaps
+            for (let i = newSplits.length - 2; i >= 0; i--) {
+                const maxAllowed = newSplits[i + 1] - X_RANGE_SLIDER_MIN_GAP;
+                if (newSplits[i] > maxAllowed) {
+                    newSplits[i] = maxAllowed;
+                }
+            }
+            // Only update if different
+            const SPLIT_TOLERANCE = 0.0001;
+            const splitsAreDifferent = newSplits.some((newSplit, i) => {
+                const currentSplit = currentSplits[i] || 0;
+                return Math.abs(newSplit - currentSplit) > SPLIT_TOLERANCE;
+            });
+            if (splitsAreDifferent) {
+                console.log('[SwapFormEstimates] Updating splits:', {
+                    from: currentSplits,
+                    to: newSplits,
+                    destinationUsdValues,
+                    totalUsd,
+                });
+                // Always create a new array reference to ensure Zustand detects the change
+                setSplits([...newSplits]);
+            }
+        }
+    }, [tokenIn, setSplits, setInputAmount, getPrice, getServiceFeeRate]);
+    // Handle slider change (splits changed)
+    const handleSliderChange = useCallback(() => {
+        scheduleFetchEstimates();
+    }, [scheduleFetchEstimates]);
+    // Handle destination amount change (user manually edited)
+    const handleDestinationAmountChange = useCallback(() => {
+        // Mark that this is a manual destination change
+        // This prevents performDestinationAmountCalculation from overwriting user's changes
+        isManualDestinationChangeRef.current = true;
+        recalculateSplitsFromAmounts();
+        // Clear the flag after recalculation completes
+        // Use setTimeout to ensure state updates have propagated
+        setTimeout(() => {
+            isManualDestinationChangeRef.current = false;
+        }, 150);
+        // If input amount was not recalculated, fetch estimates directly
+        if (!shouldFetchAfterInputRecalcRef.current) {
+            scheduleFetchEstimates();
+        }
+    }, [recalculateSplitsFromAmounts, scheduleFetchEstimates]);
+    // Handle input amount change (user manually edited)
+    const handleInputAmountChange = useCallback(() => {
+        // Mark as user-initiated change (not programmatic)
+        programmaticInputChangeRef.current = false;
+        shouldFetchAfterInputRecalcRef.current = false;
+        // Reset recalculation flag if it was set (in case of programmatic change that completed)
+        isRecalculatingInputRef.current = false;
+        // Set direction to input-to-output (normal flow)
+        calculationDirectionRef.current = CALCULATION_DIRECTION_INPUT_TO_OUTPUT;
+        setCalculationDirection(CALCULATION_DIRECTION_INPUT_TO_OUTPUT);
+        // Just fetch estimates with new input amount
+        // This will recalculate output amounts based on the new input
+        scheduleFetchEstimates();
+    }, [scheduleFetchEstimates]);
+    // Function to perform destination amount calculation from splits and inputAmount
+    // This ensures displayAmount updates immediately when slider is dragged
+    // Uses USD values to correctly calculate amounts across different tokens
+    const performDestinationAmountCalculation = useCallback((splitsToUse, inputAmountToUse) => {
+        // Use destinations from closure (will be fresh due to dependency array)
+        const currentDestinations = destinations;
+        if (!inputAmountToUse || parseFloat(inputAmountToUse) <= 0 || splitsToUse.length === 0) {
+            // Clear amounts if no input - batch updates
+            const updates = [];
+            currentDestinations.forEach((_, index) => {
+                if (currentDestinations[index].amount !== '') {
+                    updates.push({ index, amount: '' });
+                }
+            });
+            // Apply all updates at once
+            updates.forEach(({ index, amount }) => {
+                updateDestinationAmount(index, amount);
+            });
+            return;
+        }
+        const inputAmountNum = parseFloat(inputAmountToUse);
+        if (isNaN(inputAmountNum))
+            return;
+        // Get input token price (tokenIn from closure will be fresh due to dependency array)
+        const inputTokenPrice = tokenIn ? getPrice(tokenIn) : undefined;
+        if (!inputTokenPrice || inputTokenPrice <= 0) {
+            // Can't calculate without input price - skip calculation
+            return;
+        }
+        // Calculate total USD value of input amount
+        const totalUsdValue = inputAmountNum * inputTokenPrice;
+        // Apply service fee to get actionable USD (amount available for outputs after fee deduction)
+        // Formula: serviceFeeUsd = depositUsd * serviceFeeRate
+        //          actionableUsd = depositUsd - serviceFeeUsd
+        const serviceFeeRate = getServiceFeeRate() ?? 0.01; // Default to 1% if not available
+        const serviceFeeUsd = totalUsdValue * serviceFeeRate;
+        const actionableUsd = totalUsdValue - serviceFeeUsd;
+        // Normalize splits for single destination - ensure it's always [1.0]
+        const normalizedSplits = currentDestinations.length === 1 ? [1.0] : splitsToUse;
+        // Recalculate each destination amount based on splits using USD values
+        // Formula:
+        // 1. Calculate USD value for this destination: actionableUsd * splitDiff (after service fee)
+        // 2. Convert USD to destination token: usdValue / destTokenPrice
+        // This ensures correct amounts when swapping between different tokens
+        // Batch all updates to minimize re-renders
+        const updates = [];
+        currentDestinations.forEach((_, index) => {
+            const prevSplit = index > 0 ? normalizedSplits[index - 1] : 0;
+            const currentSplit = normalizedSplits[index] ?? 1;
+            const splitDiff = currentSplit - prevSplit;
+            // Calculate USD value for this destination (after service fee)
+            const destinationUsdValue = actionableUsd * splitDiff;
+            // Get destination asset info and price
+            const destAsset = currentDestinations[index]?.asset;
+            if (!destAsset) {
+                return; // Skip if no asset
+            }
+            const destAssetInfo = getAssetByCaip19(destAsset);
+            const destTokenPrice = destAssetInfo ? getPrice(destAssetInfo) : currentDestinations[index]?.priceUsd;
+            if (!destTokenPrice || destTokenPrice <= 0) {
+                return; // Skip if no price available
+            }
+            // Convert USD value to destination token amount
+            const newAmount = (destinationUsdValue / destTokenPrice).toFixed(destAssetInfo?.precision ?? 6);
+            // Only update if amount has changed
+            if (currentDestinations[index].amount !== newAmount) {
+                updates.push({ index, amount: newAmount });
+            }
+        });
+        // Apply all updates
+        updates.forEach(({ index, amount }) => {
+            updateDestinationAmount(index, amount);
+        });
+    }, [destinations, tokenIn, getPrice, updateDestinationAmount, getServiceFeeRate]);
+    // Effect to recalculate destination amounts when splits or inputAmount changes
+    // This ensures displayAmount updates immediately when slider is dragged
+    useEffect(() => {
+        // Skip recalculation if user manually changed destination amounts
+        // (we only want to update input amount, not overwrite user's manual changes)
+        if (isManualDestinationChangeRef.current) {
+            return;
+        }
+        // Skip recalculation if we're currently recalculating input amount
+        // This prevents infinite loops when input amount is programmatically updated
+        if (isRecalculatingInputRef.current) {
+            return;
+        }
+        // Skip recalculation if input change was programmatic (from output-to-input calculation)
+        // When output-to-input calculates and sets input amount, we don't want to recalculate outputs
+        // as that would trigger another fetch and cause an infinite loop
+        if (programmaticInputChangeRef.current) {
+            return;
+        }
+        const splitsKey = splits.join(',');
+        const hasSplitsChanged = prevSplitsRef.current !== splitsKey;
+        const hasInputAmountChanged = prevInputAmountForCalcRef.current !== inputAmount;
+        // Only recalculate if splits or inputAmount actually changed
+        if (!hasSplitsChanged && !hasInputAmountChanged) {
+            return;
+        }
+        // Update refs immediately to prevent re-running
+        prevSplitsRef.current = splitsKey;
+        prevInputAmountForCalcRef.current = inputAmount;
+        // During drag, throttle updates using requestAnimationFrame to avoid blocking pointer events
+        // But still allow updates to happen (unlike before where we skipped entirely)
+        if (isDraggingSlider) {
+            // Store pending update
+            pendingUpdateRef.current = { splits, inputAmount };
+            // Schedule update if not already scheduled
+            if (!rafScheduledRef.current) {
+                rafScheduledRef.current = true;
+                requestAnimationFrame(() => {
+                    if (pendingUpdateRef.current) {
+                        performDestinationAmountCalculation(pendingUpdateRef.current.splits, pendingUpdateRef.current.inputAmount);
+                        pendingUpdateRef.current = null;
+                    }
+                    rafScheduledRef.current = false;
+                });
+            }
+            return;
+        }
+        // Not dragging - update immediately
+        // Also flush any pending updates from when we were dragging
+        if (pendingUpdateRef.current) {
+            performDestinationAmountCalculation(pendingUpdateRef.current.splits, pendingUpdateRef.current.inputAmount);
+            pendingUpdateRef.current = null;
+        }
+        else {
+            performDestinationAmountCalculation(splits, inputAmount);
+        }
+    }, [splits, inputAmount, tokenIn, destinations, isDraggingSlider, performDestinationAmountCalculation]);
+    // Create a unique key for the current estimate request
+    // This key changes when any relevant input changes, triggering a new fetch
+    const estimateKey = useMemo(() => {
+        if (!tokenIn?.caip19 || !inputAmount || parseFloat(inputAmount) <= 0) {
+            return null;
+        }
+        if (destinations.length === 0 || !destinations.every((d) => d.asset)) {
+            return null;
+        }
+        if (splits.length === 0 || splits.length !== destinations.length) {
+            return null;
+        }
+        // Create a unique key from all relevant inputs
+        return [tokenIn.caip19, inputAmount, destinations.map((d) => d.asset).join(','), splits.join(',')].join('|');
+    }, [tokenIn?.caip19, inputAmount, destinations, splits]);
+    // Track the last estimate key we fetched for to avoid duplicate fetches
+    const lastFetchedKeyRef = useRef(null);
+    // Reset the fetched key when tokenIn changes to allow fetching for new tokens
+    useEffect(() => {
+        const tokenInId = tokenIn?.caip19 || null;
+        const lastKeyToken = lastFetchedKeyRef.current?.split('|')[0] || null;
+        // If token changed, reset the ref to allow fetching for the new token
+        if (tokenInId && lastKeyToken && tokenInId !== lastKeyToken) {
+            lastFetchedKeyRef.current = null;
+        }
+    }, [tokenIn?.caip19]);
+    // Initial fetch of estimates when we have required data
+    // This ensures estimates are loaded on page first load or when data becomes available
+    useEffect(() => {
+        // Skip if we're already fetching to prevent loops
+        if (isFetchingEstimatesRef.current) {
+            // Update lastFetchedKeyRef to the new key to prevent re-triggering when fetch completes
+            if (estimateKey) {
+                lastFetchedKeyRef.current = estimateKey;
+            }
+            return;
+        }
+        // Only fetch if we have a valid estimate key and it's different from the last one we fetched
+        if (estimateKey && estimateKey !== lastFetchedKeyRef.current) {
+            // Mark this key as fetched to prevent duplicate calls
+            lastFetchedKeyRef.current = estimateKey;
+            // Use the debounced fetch function to avoid rapid duplicate calls
+            // Use immediate=true for initial load to get estimates faster
+            scheduleFetchEstimates(true);
+        }
+        return () => { };
+    }, [estimateKey, scheduleFetchEstimates, tokenIn?.caip19]);
+    const value = useMemo(() => ({
+        handleSliderChange,
+        handleDestinationAmountChange,
+        handleInputAmountChange,
+        calculationDirection,
+    }), [handleSliderChange, handleDestinationAmountChange, handleInputAmountChange, calculationDirection]);
+    // Cleanup timers on unmount
+    React.useEffect(() => {
+        return () => {
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
+            }
+        };
+    }, []);
+    return _jsx(SwapFormEstimatesContext.Provider, { value: value, children: children });
+}
+export function useSwapFormEstimatesContext() {
+    const context = useContext(SwapFormEstimatesContext);
+    if (context === undefined) {
+        throw new Error('useSwapFormEstimatesContext must be used within SwapFormEstimatesProvider');
+    }
+    return context;
+}

package/dist/contexts/orderTrackingConnection.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Order tracking WebSocket and cache logic.
+ * Lives in context via createOrderTrackingManager(); state updates go through setStateForKey.
+ */
+import type { OrderTrackingState, OrderTrackingOptions } from './orderTrackingTypes.js';
+export type OrderTrackingManagerApi = {
+    setStateForKey: (key: string, state: OrderTrackingState) => void;
+    getStateForKey: (key: string) => OrderTrackingState | undefined;
+    isKeyActive: (key: string) => boolean;
+    getOptionsForKey: (key: string) => OrderTrackingOptions | undefined;
+};
+/** Ref-like object so the manager always reads the current API (avoids storing manager in a ref). */
+export type OrderTrackingManagerApiRef = {
+    current: OrderTrackingManagerApi;
+};
+export declare function createOrderTrackingManager(apiRef: OrderTrackingManagerApiRef): {
+    connect: (orderId: string, auth: string, key: string, options: OrderTrackingOptions) => void;
+    disconnect: (orderId: string, auth: string) => void;
+};