@layerswap/widget 0.1.20 → 1.0.0-alpha1.1

package/dist/esm/helpers/accountSelectHelper.js

@@ -0,0 +1,16 @@
+export function SwitchWalletAccount(props, provider) {
+    const { walletId, address, providerName } = props;
+    if (!provider || !provider.connectedWallets) {
+        throw new Error("Provider or connected wallets not available.");
+    }
+    const wallet = provider.connectedWallets.find(c => c.id === walletId);
+    if (!wallet) {
+        throw new Error(`Wallet with id ${walletId} not found in connected wallets.`);
+    }
+    if (provider.switchAccount) {
+        provider.switchAccount(wallet, address);
+    }
+    else {
+        throw new Error(`Switch account method not implemented for provider ${providerName}.`);
+    }
+}

package/dist/esm/helpers/balanceHelper.js

@@ -0,0 +1,22 @@
+/**
+ * Calculates the total USD value of balances for a network
+ * Only includes balances for tokens that are present in the route's token list
+ * @param networkBalance - NetworkBalance object containing token balances
+ * @param network - NetworkWithTokens or NetworkRoute object containing token price information
+ * @returns Total USD value of all token balances that exist in the route
+ */
+export function getTotalBalanceInUSD(networkBalance, network) {
+    if (!networkBalance.balances || networkBalance.balances.length === 0) {
+        return null;
+    }
+    return networkBalance.balances.reduce((total, tokenBalance) => {
+        const token = network.tokens.find(t => t?.symbol === tokenBalance.token);
+        // Only include balances for tokens that are present in the route
+        if (!token) {
+            return total;
+        }
+        const tokenPriceInUsd = token.price_in_usd || 0;
+        const amount = tokenBalance.amount || 0;
+        return total + (amount * tokenPriceInUsd);
+    }, 0);
+}

package/dist/esm/helpers/getSettings.js

@@ -0,0 +1,17 @@
+import LayerSwapApiClient from "../lib/apiClients/layerSwapApiClient";
+export async function getSettings() {
+    const apiClient = new LayerSwapApiClient();
+    const { data: networkData } = await apiClient.GetLSNetworksAsync();
+    const { data: sourceExchangesData } = await apiClient.GetSourceExchangesAsync();
+    const { data: sourceRoutes } = await apiClient.GetRoutesAsync('sources');
+    const { data: destinationRoutes } = await apiClient.GetRoutesAsync('destinations');
+    if (!networkData)
+        return;
+    const settings = {
+        networks: networkData,
+        sourceExchanges: sourceExchangesData || [],
+        sourceRoutes: sourceRoutes || [],
+        destinationRoutes: destinationRoutes || []
+    };
+    return settings;
+}

package/dist/esm/helpers/querryHelper.js

@@ -0,0 +1,13 @@
+import { PersistantQueryParams } from "../Models/InitialSettings";
+export const resolvePersistantQueryParams = (query) => {
+    if (!query)
+        return null;
+    const persiatantParams = new PersistantQueryParams();
+    const res = {};
+    Object.keys(persiatantParams).forEach(key => {
+        if (query[key] !== undefined) {
+            res[key] = query[key];
+        }
+    });
+    return res;
+};

package/dist/esm/helpers/routes.js

@@ -0,0 +1,69 @@
+export const resolveExchangesURLForSelectedToken = (values) => {
+    const include_unmatched = 'true';
+    const include_swaps = 'false';
+    const include_unavailable = 'true';
+    const { from, fromAsset: fromCurrency } = values;
+    const params = new URLSearchParams({
+        include_unmatched,
+        include_swaps,
+        include_unavailable,
+        ...(from?.name && fromCurrency?.symbol ?
+            {
+                ['source_network']: from?.name,
+                ['source_token']: fromCurrency?.symbol,
+            }
+            : {})
+    });
+    const sourcesURL = `/source_exchanges?${params.toString()}`;
+    return sourcesURL;
+};
+export const resolveExchangeHistoricalNetworksURL = (direction, { fromExchange, to, toAsset }) => {
+    if (direction === "from" && fromExchange && to && toAsset) {
+        const params = new URLSearchParams({
+            source_exchange: fromExchange,
+            destination_network: to,
+            destination_token: toAsset,
+        });
+        return `/exchange_withdrawal_networks?${params.toString()}`;
+    }
+    return null;
+};
+export const resolveNetworkRoutesURL = (direction, values, networkTypes) => {
+    const { from, to, fromAsset: fromCurrency, toAsset: toCurrency, fromExchange, toExchange } = values;
+    const selectednetwork = direction === "from" ? to : from;
+    const selectedToken = direction === "from" ? toCurrency?.symbol : fromCurrency?.symbol;
+    const isCEX = fromExchange || toExchange;
+    return resolveRoutesURLForSelectedToken({
+        direction,
+        network: isCEX ? undefined : selectednetwork?.name,
+        token: isCEX ? undefined : selectedToken,
+        includes: { unmatched: true, unavailable: true, swaps: !isCEX },
+        networkTypes
+    });
+};
+export const resolveRoutesURLForSelectedToken = ({ direction, network, token, includes, networkTypes }) => {
+    const include_unmatched = includes.unmatched ? 'true' : 'false';
+    const include_swaps = includes.swaps ? 'true' : 'false';
+    const include_unavailable = includes.unavailable ? 'true' : 'false';
+    const params = new URLSearchParams({
+        include_unmatched,
+        include_swaps,
+        include_unavailable,
+        ...(networkTypes ? { network_types: networkTypes?.join(',') } : {}),
+        ...(network ?
+            {
+                [direction === 'to' ? 'source_network' : 'destination_network']: network,
+            }
+            : {}),
+        ...(network && token ?
+            {
+                [direction === 'to' ? 'source_network' : 'destination_network']: network,
+                [direction === 'to' ? 'source_token' : 'destination_token']: token,
+            }
+            : {})
+    });
+    const sourceRoutesURL = `/sources?${params.toString()}`;
+    const destinationRoutesURL = `/destinations?${params.toString()}`;
+    const result = direction === "from" ? sourceRoutesURL : destinationRoutesURL;
+    return result;
+};

package/dist/esm/helpers/settingsHelper.js

@@ -0,0 +1,16 @@
+import { THEME_COLORS } from "../Models/Theme";
+export const getThemeData = async (query) => {
+    try {
+        if (!query)
+            return null;
+        const theme_name = query.theme || query.appName || query.addressSource;
+        // const internalApiClient = new InternalApiClient()
+        // const themeData = await internalApiClient.GetThemeData(theme_name);
+        // result.themeData = themeData as ThemeData;
+        return THEME_COLORS[theme_name] || null;
+    }
+    catch (e) {
+        console.log(e);
+        return null;
+    }
+};

package/dist/esm/helpers/tokenHelper.js

@@ -0,0 +1,9 @@
+export const resolveTokenUsdPrice = (token, quote) => {
+    if (quote?.source_token?.symbol && quote?.source_token?.symbol === token?.symbol) {
+        return quote.source_token.price_in_usd;
+    }
+    if (quote?.destination_token?.symbol && quote?.destination_token?.symbol === token?.symbol) {
+        return quote.destination_token.price_in_usd;
+    }
+    return token?.price_in_usd;
+};

package/dist/esm/hooks/useAllWithdrawalBalances.js

@@ -0,0 +1,39 @@
+import { useSettingsState } from "../context/settings";
+import { selectResolvedInitiatedBalances, useBalanceStore } from "../stores/balanceStore";
+import { useEffect, useMemo, useRef } from "react";
+import { useBalanceAccounts } from "../context/balanceAccounts";
+export default function useAllWithdrawalBalances() {
+    const networks = useSettingsState().networks;
+    const balanceAccounts = useBalanceAccounts("from");
+    const walletNetworks = useMemo(() => {
+        return balanceAccounts.map(account => {
+            const withdrawalNetworks = account.walletWithdrawalSupportedNetworks;
+            if (!withdrawalNetworks || withdrawalNetworks.length === 0)
+                return [];
+            return withdrawalNetworks.map(networkName => {
+                const network = networks.find(n => n.name === networkName);
+                if (!network)
+                    return null;
+                return {
+                    address: account.address,
+                    network,
+                };
+            });
+        }).flat().filter(item => item !== null);
+    }, [balanceAccounts, networks]);
+    const walletNetwokrsString = useMemo(() => {
+        return walletNetworks.map(item => `${item.address}-${item.network.name}`).join(',');
+    }, [walletNetworks]);
+    useEffect(() => {
+        if (walletNetworks)
+            useBalanceStore.getState().initAllBalances(walletNetworks);
+    }, [walletNetwokrsString]);
+    const lastBalancesRef = useRef(null);
+    const resolvedBalances = useBalanceStore(selectResolvedInitiatedBalances);
+    const isLoading = useBalanceStore(s => s.isLoading);
+    if (resolvedBalances != null && Object.keys(resolvedBalances).length > 0) {
+        lastBalancesRef.current = resolvedBalances;
+    }
+    const result = resolvedBalances === null && isLoading ? lastBalancesRef.current : resolvedBalances;
+    return useMemo(() => ({ isLoading, balances: result }), [result, isLoading]);
+}

package/dist/esm/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/esm/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/esm/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/esm/hooks/useFee.js

@@ -0,0 +1,175 @@
+import { useCallback, useEffect, useState } from 'react';
+import useSWR, { useSWRConfig } from 'swr';
+import LayerSwapApiClient from '../lib/apiClients/layerSwapApiClient';
+import { create } from 'zustand';
+import { isDiffByPercent } from '../components/utils/numbers';
+import { useSlippageStore } from '../stores/slippageStore';
+import { sleep } from '../lib/wallets/utils';
+export function useQuoteData(formValues, refreshInterval) {
+    const { fromCurrency, toCurrency, from, to, amount, refuel, depositMethod } = formValues || {};
+    const [debouncedAmount, setDebouncedAmount] = useState(amount);
+    const [isDebouncing, setIsDebouncing] = useState(false);
+    const { slippage } = useSlippageStore();
+    useEffect(() => {
+        if (amount === debouncedAmount)
+            return;
+        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: 5000
+    });
+    const canGetQuote = from && to && depositMethod && toCurrency && fromCurrency && debouncedAmount;
+    const quoteURL = (canGetQuote && !isDebouncing)
+        ? buildQuoteUrl({
+            sourceNetwork: from,
+            sourceToken: fromCurrency,
+            destinationNetwork: to,
+            destinationToken: toCurrency,
+            amount: debouncedAmount,
+            refuel: !!refuel,
+            useDepositAddress: use_deposit_address,
+            slippage,
+        })
+        : 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) {
+            if (error.response?.data?.error?.code === "VALIDATION_ERROR") {
+                useSlippageStore.getState().clearSlippage();
+            }
+            setLoading(false);
+            setKey(null);
+            throw error;
+        }
+    }, [cache]);
+    const { data: quote, mutate: mutateFee, error: quoteError } = useSWR(quoteURL, quoteFetchWrapper, {
+        refreshInterval: (refreshInterval || refreshInterval == 0) ? refreshInterval : 42000,
+        dedupingInterval: 5000,
+        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) {
+    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 function buildQuoteUrl(args) {
+    const { sourceNetwork, sourceToken, destinationNetwork, destinationToken, amount, refuel, useDepositAddress, slippage, } = args;
+    const params = new URLSearchParams({
+        source_network: sourceNetwork,
+        source_token: sourceToken,
+        destination_network: destinationNetwork,
+        destination_token: destinationToken,
+        amount: String(amount),
+        refuel: String(!!refuel),
+        use_deposit_address: useDepositAddress ? 'true' : 'false',
+    });
+    if (slippage !== undefined) {
+        params.append('slippage', String(slippage));
+    }
+    return `/quote?${params.toString()}`;
+}
+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 }),
+}));