@layerswap/widget 0.1.18 → 1.0.0-alpha0.1

package/dist/hooks/useClickOutside.d.ts

@@ -0,0 +1,9 @@
+type UseClickOutsideReturn<T extends HTMLElement> = {
+    ref: React.RefObject<T>;
+    isActive: boolean;
+    setIsActive: (value: boolean) => void;
+    activate: () => void;
+    deactivate: () => void;
+};
+export declare const useClickOutside: <T extends HTMLElement = HTMLDivElement>(initialState?: boolean) => UseClickOutsideReturn<T>;
+export {};

package/dist/hooks/useClickOutside.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef, useState } from 'react';
+export const useClickOutside = (initialState = false) => {
+    const [isActive, setIsActive] = useState(initialState);
+    const ref = useRef(null);
+    useEffect(() => {
+        function handleClickOutside(e) {
+            if (ref.current && !ref.current.contains(e.target)) {
+                setIsActive(false);
+            }
+        }
+        document.addEventListener("mousedown", handleClickOutside);
+        document.addEventListener("touchstart", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+            document.removeEventListener("touchstart", handleClickOutside);
+        };
+    }, []);
+    const activate = () => setIsActive(true);
+    const deactivate = () => setIsActive(false);
+    return {
+        ref,
+        isActive,
+        setIsActive,
+        activate,
+        deactivate,
+    };
+};

package/dist/hooks/useCopyClipboard.d.ts

@@ -0,0 +1 @@
+export default function useCopyClipboard(timeout?: number): [boolean, (toCopy: string | number) => void];

package/dist/hooks/useCopyClipboard.js

@@ -0,0 +1,21 @@
+import copy from 'copy-to-clipboard';
+import { useCallback, useEffect, useState } from 'react';
+export default function useCopyClipboard(timeout = 500) {
+    const [isCopied, setIsCopied] = useState(false);
+    const staticCopy = useCallback((text) => {
+        const didCopy = copy(text);
+        setIsCopied(didCopy);
+    }, []);
+    useEffect(() => {
+        if (isCopied) {
+            const hide = setTimeout(() => {
+                setIsCopied(false);
+            }, timeout);
+            return () => {
+                clearTimeout(hide);
+            };
+        }
+        return undefined;
+    }, [isCopied, setIsCopied, timeout]);
+    return [isCopied, staticCopy];
+}

package/dist/hooks/useExchangeNetworks.d.ts

@@ -0,0 +1,29 @@
+type Props = {
+    fromExchange?: string | undefined;
+    to?: string | undefined;
+    toAsset?: string | undefined;
+};
+export default function useExchangeNetworks({ fromExchange, to, toAsset }: Props): {
+    networks: {
+        token: {
+            status: "active";
+            symbol: string;
+            display_asset?: string;
+            logo: string;
+            contract: string | null | undefined;
+            decimals: number;
+            price_in_usd: number;
+            precision: number;
+            listing_date: string;
+            source_rank?: number | undefined;
+            destination_rank?: number | undefined;
+        };
+        network: import("../Models/Network").Network;
+        fee: {
+            total_fee: number;
+            total_fee_in_usd: number;
+        };
+    }[] | undefined;
+    isLoading: boolean;
+};
+export {};

package/dist/hooks/useExchangeNetworks.js

@@ -0,0 +1,16 @@
+import useSWR from "swr";
+import { resolveExchangeHistoricalNetworksURL } from "../helpers/routes";
+import { useMemo } from "react";
+import LayerSwapApiClient from "../lib/apiClients/layerSwapApiClient";
+export default function useExchangeNetworks({ fromExchange, to, toAsset }) {
+    const exchangeNetworksURL = resolveExchangeHistoricalNetworksURL("from", { fromExchange, to, toAsset });
+    const apiClient = new LayerSwapApiClient();
+    const { data: apiResponse, isLoading } = useSWR(exchangeNetworksURL, apiClient.fetcher, {
+        keepPreviousData: true,
+        dedupingInterval: 10000,
+        revalidateIfStale: false
+    });
+    //As the response does not give the statuses and it does not include not active tokens, we can assume all are active
+    const networks = useMemo(() => (apiResponse?.data?.map(n => ({ ...n, token: { ...n.token, status: "active" } }))), [apiResponse]);
+    return { networks, isLoading };
+}

package/dist/hooks/useFee.d.ts

@@ -0,0 +1,65 @@
+import { Quote, SwapBasicData } from '../lib/apiClients/layerSwapApiClient';
+import { SwapFormValues } from '../components/Pages/Swap/Form/SwapFormValues';
+type UseQuoteData = {
+    minAllowedAmount?: number;
+    maxAllowedAmount?: number;
+    quote?: Quote;
+    quoteError?: QuoteError;
+    isQuoteLoading: boolean;
+    mutateFee: () => void;
+    mutateLimits: () => void;
+    limitsValidating: boolean;
+};
+export type QuoteError = {
+    code: string;
+    message: string;
+    response?: {
+        data?: {
+            error?: {
+                code?: string;
+                message?: string;
+                metadata?: {
+                    AmountLimit: number;
+                };
+            };
+        };
+    };
+    metadata?: {
+        StatusCode?: string;
+        [key: string]: any;
+    };
+};
+type Props = {
+    from: string | undefined;
+    to: string | undefined;
+    fromCurrency: string | undefined;
+    toCurrency: string | undefined;
+    amount: string | number | undefined;
+    refuel: boolean | undefined;
+    depositMethod: "wallet" | "deposit_address" | undefined;
+    withDelay?: boolean;
+};
+export declare function useQuoteData(formValues: Props | undefined, refreshInterval?: number): UseQuoteData;
+export declare function transformFormValuesToQuoteArgs(values: SwapFormValues, withDelay?: boolean): Props | undefined;
+export declare function transformSwapDataToQuoteArgs(swapData: SwapBasicData | undefined, refuel: boolean): Props | undefined;
+export declare const getLimits: (swapValues: LimitsQueryOptions) => Promise<{
+    minAllowedAmount: number | undefined;
+    maxAllowedAmount: number | undefined;
+}>;
+interface LimitsQueryOptions {
+    sourceNetwork?: string;
+    sourceToken?: string;
+    destinationNetwork?: string;
+    destinationToken?: string;
+    useDepositAddress?: boolean;
+    refuel?: boolean;
+}
+export declare function buildLimitsUrl({ sourceNetwork, sourceToken, destinationNetwork, destinationToken, useDepositAddress, refuel }: LimitsQueryOptions): string;
+type LoadingState = {
+    key: string | null;
+    setKey: (value: string | null) => void;
+    isLoading: boolean;
+    setLoading: (loading: boolean) => void;
+};
+export declare const useLoadingStore: import("zustand").UseBoundStore<import("zustand").StoreApi<LoadingState>>;
+export {};

package/dist/hooks/useFee.js

@@ -0,0 +1,148 @@
+import { useCallback, useEffect, useState } from 'react';
+import useSWR, { useSWRConfig } from 'swr';
+import LayerSwapApiClient from '../lib/apiClients/layerSwapApiClient';
+import { sleep } from 'fuels';
+import { create } from 'zustand';
+import { isDiffByPercent } from '../components/utils/numbers';
+export function useQuoteData(formValues, refreshInterval) {
+    const { fromCurrency, toCurrency, from, to, amount, refuel, depositMethod, withDelay } = formValues || {};
+    const [debouncedAmount, setDebouncedAmount] = useState(amount);
+    const [isDebouncing, setIsDebouncing] = useState(false);
+    useEffect(() => {
+        setIsDebouncing(true);
+        const handler = setTimeout(() => {
+            setDebouncedAmount(amount);
+            setIsDebouncing(false);
+        }, 300);
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [amount]);
+    const apiClient = new LayerSwapApiClient();
+    const use_deposit_address = depositMethod === 'wallet' ? false : true;
+    const limitsURL = (from && to && depositMethod && toCurrency && fromCurrency) ?
+        buildLimitsUrl({
+            sourceNetwork: from,
+            sourceToken: fromCurrency,
+            destinationNetwork: to,
+            destinationToken: toCurrency,
+            useDepositAddress: use_deposit_address,
+            refuel
+        }) : null;
+    const { data: amountRange, mutate: mutateLimits, isValidating: limitsValidating } = useSWR(limitsURL, apiClient.fetcher, {
+        refreshInterval: (refreshInterval || refreshInterval == 0) ? refreshInterval : 20000,
+        dedupingInterval: 20000,
+    });
+    const canGetQuote = from && to && depositMethod && toCurrency && fromCurrency
+        && Number(debouncedAmount) > 0
+        && (!amountRange || Number(debouncedAmount) >= (amountRange?.data?.min_amount || 0) && Number(debouncedAmount) <= (amountRange?.data?.max_amount || 0));
+    const quoteURL = (canGetQuote && !isDebouncing) ?
+        `/quote?source_network=${from}&source_token=${fromCurrency}&destination_network=${to}&destination_token=${toCurrency}&amount=${debouncedAmount}&refuel=${!!refuel}&use_deposit_address=${use_deposit_address}` : null;
+    const { cache } = useSWRConfig();
+    const isQuoteLoading = useLoadingStore((state) => state.isLoading);
+    //TODO: implement middleware that handles the delay logic
+    const quoteFetchWrapper = useCallback(async (url) => {
+        const { setLoading, key, setKey } = useLoadingStore.getState();
+        try {
+            if (key !== url) {
+                setLoading(true);
+            }
+            const previousData = cache.get(url)?.data;
+            const newData = await apiClient.fetcher(url);
+            if (previousData?.data?.quote && isDiffByPercent(previousData?.data?.quote.receive_amount, newData.data?.quote.receive_amount, 2)) {
+                const { setLoading } = useLoadingStore.getState();
+                setLoading(true);
+                await sleep(3500);
+            }
+            setKey(url);
+            setLoading(false);
+            return newData;
+        }
+        catch (error) {
+            setKey(null);
+            throw error;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [cache]);
+    const { data: quote, mutate: mutateFee, error: quoteError } = useSWR(quoteURL, quoteFetchWrapper, {
+        refreshInterval: (refreshInterval || refreshInterval == 0) ? refreshInterval : 42000,
+        dedupingInterval: 42000,
+        keepPreviousData: true
+    });
+    return {
+        minAllowedAmount: amountRange?.data?.min_amount,
+        maxAllowedAmount: amountRange?.data?.max_amount,
+        quote: (quoteError || !canGetQuote) ? undefined : quote?.data,
+        isQuoteLoading: isQuoteLoading,
+        quoteError,
+        mutateFee,
+        mutateLimits,
+        limitsValidating,
+    };
+}
+export function transformFormValuesToQuoteArgs(values, withDelay) {
+    if (values.fromAsset?.status !== 'active' || values.toAsset?.status !== 'active')
+        return undefined;
+    return {
+        amount: values.amount,
+        from: values.from?.name,
+        depositMethod: values.depositMethod,
+        fromCurrency: values.fromAsset?.symbol,
+        to: values.to?.name,
+        toCurrency: values.toAsset?.symbol,
+        refuel: values.refuel,
+        withDelay
+    };
+}
+export function transformSwapDataToQuoteArgs(swapData, refuel) {
+    return {
+        refuel,
+        amount: swapData?.requested_amount,
+        from: swapData?.source_network.name,
+        depositMethod: swapData?.use_deposit_address ? 'deposit_address' : 'wallet',
+        fromCurrency: swapData?.source_token.symbol,
+        to: swapData?.destination_network.name,
+        toCurrency: swapData?.destination_token.symbol,
+    };
+}
+export const getLimits = async (swapValues) => {
+    const apiClient = new LayerSwapApiClient();
+    const { sourceToken, sourceNetwork, destinationNetwork, destinationToken, refuel, useDepositAddress } = swapValues || {};
+    if (!sourceNetwork || !destinationNetwork || !useDepositAddress || !destinationToken || !sourceToken)
+        return { minAllowedAmount: undefined, maxAllowedAmount: undefined };
+    const url = buildLimitsUrl({
+        sourceNetwork,
+        sourceToken,
+        destinationNetwork,
+        destinationToken,
+        useDepositAddress,
+        refuel
+    });
+    const response = await apiClient.fetcher(url);
+    return {
+        minAllowedAmount: response?.data?.min_amount,
+        maxAllowedAmount: response?.data?.max_amount
+    };
+};
+export function buildLimitsUrl({ sourceNetwork, sourceToken, destinationNetwork, destinationToken, useDepositAddress, refuel = false }) {
+    if (!sourceNetwork || !sourceToken || !destinationNetwork || !destinationToken) {
+        throw new Error("Invalid parameters for building limits URL");
+    }
+    const params = new URLSearchParams({
+        source_network: sourceNetwork,
+        source_token: sourceToken,
+        destination_network: destinationNetwork,
+        destination_token: destinationToken,
+        use_deposit_address: useDepositAddress ? 'true' : 'false',
+        refuel: String(!!refuel),
+    });
+    return `/limits?${params.toString()}`;
+}
+export const useLoadingStore = create((set) => ({
+    key: null,
+    setKey: (value) => set({ key: value }),
+    isLoading: false,
+    setLoading: (loading) => set({ isLoading: loading }),
+}));

package/dist/hooks/useFormRoutes.d.ts

@@ -0,0 +1,42 @@
+import { NetworkRoute, NetworkRouteToken } from "../Models/Network";
+import { RowElement } from "../Models/Route";
+import { Exchange } from "../Models/Exchange";
+import { SwapDirection, SwapFormValues } from "../components/Pages/Swap/Form/SwapFormValues";
+type Props = {
+    direction: SwapDirection;
+    values: SwapFormValues;
+};
+export default function useFormRoutes({ direction, values }: Props, search?: string): {
+    allRoutes: NetworkRoute[];
+    isLoading: boolean;
+    routeElements: RowElement[];
+    exchanges: Exchange[];
+    exchangesRoutesLoading: boolean;
+    exchangeNetworks: {
+        token: {
+            status: "active";
+            symbol: string;
+            display_asset?: string;
+            logo: string;
+            contract: string | null | undefined;
+            decimals: number;
+            price_in_usd: number;
+            precision: number;
+            listing_date: string;
+            source_rank?: number | undefined;
+            destination_rank?: number | undefined;
+        };
+        network: import("../Models/Network").Network;
+        fee: {
+            total_fee: number;
+            total_fee_in_usd: number;
+        };
+    }[] | undefined;
+    exchangeSourceNetworksLoading: boolean;
+    selectedRoute: NetworkRoute | undefined;
+    selectedToken: (NetworkRouteToken & {
+        manuallySet?: boolean;
+    }) | undefined;
+    allbalancesLoaded: boolean;
+};
+export {};

package/dist/hooks/useFormRoutes.js

@@ -0,0 +1,283 @@
+import useSWR from "swr";
+import { useEffect, useMemo, useState } from "react";
+import { useSettingsState } from "../context/settings";
+import useAllWithdrawalBalances from "./useAllWithdrawalBalances";
+import { resolveExchangesURLForSelectedToken, resolveNetworkRoutesURL } from "../helpers/routes";
+import LayerSwapApiClient from "../lib/apiClients/layerSwapApiClient";
+import useExchangeNetworks from "./useExchangeNetworks";
+import { useRecentNetworksStore } from "../stores/recentRoutesStore";
+import { useRouteTokenSwitchStore } from "../stores/routeTokenSwitchStore";
+export default function useFormRoutes({ direction, values }, search) {
+    const { routes, isLoading: routesLoading } = useRoutes({ direction, values });
+    const { exchangesRoutes, isLoading: exchangesRoutesLoading } = useExchangeRoutes({ direction, values });
+    const { networks: withdrawalNetworks, isLoading: exchangeSourceNetworksLoading } = useExchangeNetworks({
+        fromExchange: values.fromExchange?.name,
+        to: values.to?.name,
+        toAsset: values.toAsset?.symbol
+    });
+    const groupByToken = useRouteTokenSwitchStore((s) => s.showTokens);
+    const { balances, isLoading: balancesLoading } = useAllWithdrawalBalances();
+    const routesHistory = useRecentNetworksStore(state => state.recentRoutes);
+    const routeElements = useMemo(() => groupRoutes(routes, direction, balances, groupByToken ? "token" : "network", routesHistory, balancesLoading, search), [balancesLoading, routes, balances, direction, search, groupByToken, routesHistory]);
+    const exchanges = useMemo(() => {
+        return groupExchanges(exchangesRoutes, search);
+    }, [exchangesRoutes, search]);
+    const selectedRoute = useMemo(() => resolveSelectedRoute(values, direction), [values, direction]);
+    const selectedToken = useMemo(() => resolveSelectedToken(values, direction), [values, direction]);
+    return useMemo(() => ({
+        allRoutes: routes,
+        isLoading: routesLoading,
+        routeElements,
+        exchanges,
+        exchangesRoutesLoading,
+        exchangeNetworks: withdrawalNetworks,
+        exchangeSourceNetworksLoading,
+        selectedRoute,
+        selectedToken,
+        allbalancesLoaded: !balancesLoading,
+    }), [
+        routes,
+        routesLoading,
+        routeElements,
+        exchanges,
+        exchangesRoutesLoading,
+        withdrawalNetworks,
+        exchangeSourceNetworksLoading,
+        selectedRoute,
+        selectedToken,
+        balancesLoading,
+    ]);
+}
+function useRoutesData(url, defaultData, fetcher) {
+    const { data, isLoading } = useSWR(url, fetcher, {
+        keepPreviousData: true,
+        dedupingInterval: 10000,
+    });
+    const [routes, setRoutes] = useState(defaultData);
+    useEffect(() => {
+        if (!isLoading && data?.data)
+            setRoutes(data.data);
+    }, [isLoading, data]);
+    return { routes, isLoading };
+}
+function useRoutes({ direction, values }) {
+    const { sourceRoutes, destinationRoutes } = useSettingsState();
+    const apiClient = new LayerSwapApiClient();
+    const url = useMemo(() => resolveNetworkRoutesURL(direction, values), [direction, values]);
+    const defaultRoutes = direction === 'from' ? sourceRoutes : destinationRoutes;
+    return useRoutesData(url, defaultRoutes || [], apiClient.fetcher);
+}
+// ---------- Token Helpers ----------
+function resolveTokenUSDBalance(route, token, balances) {
+    const networkBalance = balances?.[route.name]?.balances || [];
+    const match = networkBalance.find(b => b.token === token.symbol);
+    return match?.amount && match.amount > 0 ? match.amount * token.price_in_usd : 0;
+}
+function sortRoutesByBalance(routes, balances) {
+    return routes.sort((a, b) => {
+        const balanceA = balances?.[a.name]?.totalInUSD || 0;
+        const balanceB = balances?.[b.name]?.totalInUSD || 0;
+        if (balanceB !== balanceA) {
+            return balanceB - balanceA;
+        }
+        return a.display_name.localeCompare(b.display_name);
+    });
+}
+function sortGroupedTokensByBalance(tokenElements, balances) {
+    return tokenElements.map(group => {
+        const items = group?.items?.map(item => ({
+            ...item,
+            usdValue: resolveTokenUSDBalance(item.route.route, item.route.token, balances),
+        })).sort((a, b) => b.usdValue - a.usdValue);
+        const totalUSD = items?.reduce((sum, i) => sum + i.usdValue, 0);
+        return { ...group, items, totalUSD };
+    }).sort((a, b) => b.totalUSD - a.totalUSD);
+}
+function resolveSearch(routes, search, direction, balances, routesHistory) {
+    const matchedNetworks = searchInNetworks(routes, search);
+    const matchedTokens = searchInTokens(routes, search).sort(sortSuggestedTokenElements(direction, balances, routesHistory));
+    return [
+        ...(matchedNetworks.length ? [resolveTitle('Networks'), ...matchedNetworks] : []),
+        ...(matchedTokens.length ? [resolveTitle('Tokens'), ...matchedTokens] : [])
+    ];
+}
+const searchInNetworks = (routes, search) => {
+    const lower = search.toLowerCase().trim();
+    return routes.filter(r => {
+        const internalNameMatch = r.name.toLowerCase().includes(lower);
+        const displayNameMatch = r.display_name?.toLowerCase().includes(lower);
+        return internalNameMatch || displayNameMatch;
+    }).map(r => ({ type: 'network', route: r }));
+};
+const searchInTokens = (routes, search) => {
+    const lower = search.toLowerCase().replace(/\s+/g, " ").trim();
+    return extractTokenElementsAsSuggested(routes).filter(e => {
+        const { token, route } = e.route;
+        const symbolMatch = token.symbol.toLowerCase().includes(lower);
+        const contractMatch = token.contract?.toLowerCase().includes(lower);
+        const nameMatch = token.display_asset?.toLowerCase().includes(lower);
+        const splitted = lower.split(' ');
+        const firstpart = splitted?.[0];
+        const secondpart = splitted?.[1];
+        const combo = (firstpart && secondpart) ? ((token.symbol.toLowerCase().includes(firstpart) && route.name.toLowerCase().includes(secondpart))
+            ||
+                (token.symbol.toLowerCase().includes(secondpart) && route.name.toLowerCase().includes(firstpart))
+            ||
+                (token.symbol.toLowerCase().includes(firstpart) && route.display_name.toLowerCase().includes(secondpart))
+            ||
+                (token.symbol.toLowerCase().includes(secondpart) && route.display_name.toLowerCase().includes(firstpart))) : false;
+        return symbolMatch || contractMatch || nameMatch || combo;
+    });
+};
+// ---------- Route Grouping ----------
+function groupRoutes(routes, direction, balances, groupBy = 'network', recents, balancesLoading, search) {
+    if (search) {
+        return resolveSearch(routes, search, direction, balances, recents);
+    }
+    const suggestedRoutes = getSuggestedRoutes(routes, balances, recents, direction, balancesLoading);
+    if (groupBy === "token") {
+        const groupedTokens = resolveTokenRoutes(routes, balances, direction);
+        return mergeGroups(suggestedRoutes, groupedTokens);
+    }
+    const groupedNetworks = resolveNetworkRoutes(routes, balances, direction);
+    return mergeGroups(suggestedRoutes, groupedNetworks);
+}
+const mergeGroups = (suggestedRoutes, allRoutes) => {
+    const allRoutesTitle = allRoutes.find(() => true)?.type === "grouped_token" ? 'All Tokens' : 'All Networks';
+    return [
+        ...(suggestedRoutes.length ? [resolveTitle('Suggestions'), ...suggestedRoutes] : []),
+        resolveTitle(allRoutesTitle),
+        ...allRoutes
+    ];
+};
+const resolveNetworkRoutes = (routes, balances, direction) => {
+    if (direction === "from" && balances) {
+        return sortRoutesByBalance(routes, balances).map(r => ({
+            type: 'network',
+            route: { ...r, tokens: sortNetworkTokens(r, balances) }
+        }));
+    }
+    return routes
+        .sort((a, b) => a.name.localeCompare(b.name))
+        .map(r => ({ type: 'network', route: { ...r, tokens: r.tokens.sort((a, b) => a.symbol.localeCompare(b.symbol)) } }));
+};
+const resolveTokenRoutes = (routes, balances, direction) => {
+    const groupedRoutes = groupByTokens(routes);
+    if (direction === "from" && balances)
+        return sortGroupedTokensByBalance(groupedRoutes, balances);
+    return groupedRoutes.sort((a, b) => a.symbol.localeCompare(b.symbol));
+};
+function groupExchanges(exchangesRoutes, search) {
+    if (search) {
+        const exchanges = exchangesRoutes.filter(r => r.name.toLowerCase().includes(search.toLowerCase())).map((r) => ({ ...r }));
+        return [
+            ...exchanges,
+        ];
+    }
+    const exchanges = exchangesRoutes
+        .map((r) => ({ ...r }))
+        .sort((a, b) => a.name.localeCompare(b.name));
+    return [
+        ...exchanges,
+    ];
+}
+// ---------- Token Grouping ----------
+function groupByTokens(routes) {
+    const tokenMap = {};
+    for (const r of routes) {
+        for (const t of r.tokens || []) {
+            const el = { type: 'network_token', route: { token: t, route: r } };
+            if (!tokenMap[t.symbol])
+                tokenMap[t.symbol] = [];
+            tokenMap[t.symbol].push(el);
+        }
+    }
+    const result = Object.entries(tokenMap)
+        .map(([symbol, items]) => ({
+        type: 'grouped_token',
+        symbol,
+        items
+    }));
+    return result;
+}
+// ---------- Sorting ----------
+function sortNetworkTokens(route, balances) {
+    return [...(route.tokens || [])].sort((a, b) => {
+        const balanceA = resolveTokenUSDBalance(route, a, balances || {});
+        const balanceB = resolveTokenUSDBalance(route, b, balances || {});
+        if (balanceB !== balanceA) {
+            return balanceB - balanceA; // Descending by balance
+        }
+        return a.symbol.localeCompare(b.symbol); // Ascending by symbol
+    });
+}
+// ---------- Resolvers ----------
+function resolveSelectedRoute(values, direction) {
+    return direction === 'from' ? values.from : values.to;
+}
+function resolveSelectedToken(values, direction) {
+    return direction === 'from' ? values.fromAsset : values.toAsset;
+}
+// ---------- Exchange ----------
+function useExchangeRoutes({ values }) {
+    const { sourceExchanges } = useSettingsState();
+    const apiClient = new LayerSwapApiClient();
+    const exchangeRoutesURL = useMemo(() => resolveExchangesURLForSelectedToken(values), [values]);
+    const { data: apiResponse, isLoading, } = useSWR(exchangeRoutesURL, apiClient.fetcher, { keepPreviousData: true, dedupingInterval: 10000 });
+    const defaultData = sourceExchanges || [];
+    const [exchangesRoutes, setExchangesData] = useState(defaultData);
+    useEffect(() => {
+        if (!isLoading && apiResponse?.data)
+            setExchangesData(apiResponse.data);
+    }, [apiResponse]);
+    const res = exchangesRoutes.map(r => ({ ...r, cex: true }));
+    return { exchangesRoutes: res, isLoading };
+}
+function getSuggestedRoutes(routes, balances, routesHistory, direction, balancesLoading, limit = 4) {
+    if (direction === "from") {
+        if (!balancesLoading && !balances)
+            return [];
+        if (balancesLoading && direction === "from")
+            return Array(limit).fill({ type: "sceleton_token" });
+    }
+    const tokenElements = extractTokenElementsAsSuggested(routes).filter(t => t.route.token.status === "active");
+    const sorted = tokenElements.sort(sortSuggestedTokenElements(direction, balances, routesHistory));
+    return sorted.slice(0, limit);
+}
+const extractTokenElementsAsSuggested = (routes) => routes.flatMap(route => (route.tokens || []).map(token => ({ type: 'suggested_token', route: { token, route } })));
+const sortSuggestedTokenElements = (direction, balances, routesHistory) => (a, b) => {
+    if (direction === "from" && balances) {
+        const a_balance = getNetworkTokenElementBalance(a, balances);
+        const b_balance = getNetworkTokenElementBalance(b, balances);
+        if (a_balance !== b_balance) {
+            return b_balance - a_balance;
+        }
+    }
+    if (routesHistory) {
+        const a_used = getUsedCount(a, routesHistory);
+        const b_used = getUsedCount(b, routesHistory);
+        if (a_used !== b_used) {
+            return b_used - a_used;
+        }
+    }
+    const a_rank = getRank(a, direction);
+    const b_rank = getRank(b, direction);
+    return b_rank - a_rank;
+};
+const getNetworkTokenElementBalance = (item, balances) => {
+    return (balances[item.route.route.name]?.balances?.find(b => b.token === item.route.token.symbol)?.amount || 0) * item.route.token.price_in_usd;
+};
+const getUsedCount = (item, history) => {
+    return history[item.route.route.name]?.[item.route.token.symbol] || 0;
+};
+const getRank = (item, direction) => {
+    switch (direction) {
+        case "from":
+            return item.route.token.source_rank || 0;
+        case "to":
+            return item.route.token.destination_rank || 0;
+    }
+};
+const resolveTitle = (text) => {
+    return { type: 'group_title', text };
+};

package/dist/hooks/useFormValidation.d.ts

@@ -0,0 +1,14 @@
+import { SwapFormValues } from '../components/Pages/Swap/Form/SwapFormValues';
+import { QuoteError } from './useFee';
+interface Params {
+    values: SwapFormValues;
+    minAllowedAmount: number | undefined;
+    maxAllowedAmount: number | undefined;
+    sourceAddress: string | undefined;
+    sameAccountNetwork?: string | undefined;
+    quoteError?: QuoteError;
+}
+export declare function resolveFormValidation({ values, maxAllowedAmount, minAllowedAmount, sourceAddress, sameAccountNetwork, quoteError }: Params): {
+    message: string;
+};
+export {};