@lifi/widget 1.0.0

package/hooks/useRouteExecution/types.d.ts

@@ -0,0 +1,15 @@
+import { Route } from '@lifinance/sdk';
+export interface RouteExecutionStore {
+    currentRoute?: Route;
+    routes: Record<string, RouteExecution>;
+    setCurrentRoute: (route?: Route) => void;
+    setExecutableRoute: (route: Route) => void;
+    updateRoute: (route: Route) => void;
+    restartRoute: (routeId: string) => void;
+    removeRoute: (routeId: string) => void;
+}
+export declare type RouteExecutionStatus = 'error' | 'idle' | 'loading' | 'success';
+export interface RouteExecution {
+    route: Route;
+    status: RouteExecutionStatus;
+}

package/hooks/useRouteExecution/types.js

@@ -0,0 +1 @@
+export {};

package/hooks/useRouteExecution/useRouteExecution.d.ts

@@ -0,0 +1,8 @@
+import { Route } from '@lifinance/sdk';
+export declare const useRouteExecution: (routeId: string) => {
+    executeRoute: () => void;
+    restartRoute: () => void;
+    removeRoute: () => void;
+    route: Route;
+    status: import("./types").RouteExecutionStatus;
+};

package/hooks/useRouteExecution/useRouteExecution.js

@@ -0,0 +1,132 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useCallback, useEffect } from 'react';
+import { useMutation } from 'react-query';
+import shallow from 'zustand/shallow';
+import { LiFi } from '../../lifi';
+import { useWallet } from '../../providers/WalletProvider';
+import { deepClone } from '../../utils/deepClone';
+import { useRouteStore } from './useRouteStore';
+export const useRouteExecution = (routeId) => {
+    const { route, status } = useRouteStore((state) => state.routes[routeId]);
+    const [updateRoute, restartRoute, removeRoute] = useRouteStore((state) => [state.updateRoute, state.restartRoute, state.removeRoute], shallow);
+    const { account, switchChain } = useWallet();
+    const updateCallback = (updatedRoute) => {
+        console.log('Route updated.', updatedRoute);
+        updateRoute(deepClone(updatedRoute));
+    };
+    const switchChainHook = useCallback((requiredChainId) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!account.isActive || !account.signer) {
+            return account.signer;
+        }
+        if ((yield account.signer.getChainId()) !== requiredChainId) {
+            const switched = yield switchChain(requiredChainId);
+            if (!switched) {
+                throw new Error('Chain was not switched.');
+            }
+        }
+        return account.signer;
+    }), [account.isActive, account.signer, switchChain]);
+    const executeRouteMutation = useMutation(() => {
+        if (!account.signer) {
+            throw Error('Account signer not found.');
+        }
+        if (!route) {
+            throw Error('Execution route not found.');
+        }
+        return LiFi.executeRoute(account.signer, route, {
+            updateCallback,
+            switchChainHook,
+            infiniteApproval: false,
+        });
+    }, {
+        onMutate: () => {
+            console.log('Execution started.', routeId);
+        },
+        onError: () => {
+            console.warn('Execution failed.', routeId);
+        },
+        onSuccess: (route) => {
+            console.log('Executed successfully.', routeId);
+        },
+    });
+    const resumeRouteMutation = useMutation((resumedRoute) => {
+        if (!account.signer) {
+            throw Error('Account signer not found.');
+        }
+        if (!route) {
+            throw Error('Execution route not found.');
+        }
+        return LiFi.resumeRoute(account.signer, resumedRoute !== null && resumedRoute !== void 0 ? resumedRoute : route, {
+            updateCallback,
+            switchChainHook,
+            infiniteApproval: false,
+        });
+    }, {
+        onMutate: () => {
+            console.log('Resumed to execution.', routeId);
+        },
+        onError: () => {
+            console.warn('Resumed execution failed.', routeId);
+        },
+        onSuccess: (route) => {
+            console.log('Resumed execution successful.', route);
+        },
+    });
+    const executeRoute = useCallback(() => {
+        executeRouteMutation.mutateAsync(undefined, {
+            onError: () => {
+                console.warn('Real execution failed!', routeId);
+                // Notification.showNotification(NotificationType.SwapExecution_ERROR);
+            },
+            onSuccess: (route) => {
+                console.log('Real execution successfully!', route);
+                // Notification.showNotification(NotificationType.TRANSACTION_SUCCESSFULL);
+            },
+        });
+    }, [executeRouteMutation, routeId]);
+    const resumeRoute = useCallback((route) => {
+        resumeRouteMutation.mutateAsync(route, {
+            onError: () => {
+                console.warn('Real resumed execution failed.', routeId);
+            },
+            onSuccess: (route) => {
+                console.log('Real resumed execution successful.', route);
+            },
+        });
+    }, [resumeRouteMutation, routeId]);
+    const restartRouteMutation = useCallback(() => {
+        restartRoute(routeId);
+        resumeRoute(useRouteStore.getState().routes[routeId].route);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [resumeRoute, routeId]);
+    const removeRouteMutation = useCallback(() => {
+        removeRoute(routeId);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [routeId]);
+    useEffect(() => {
+        // check if route is eligible for automatic resuming
+        const isDone = route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
+        const isFailed = route.steps.some((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
+        const alreadyStarted = route.steps.some((step) => step.execution);
+        if (!isDone && !isFailed && alreadyStarted) {
+            resumeRoute();
+        }
+        return () => LiFi.moveExecutionToBackground(route);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return {
+        executeRoute,
+        restartRoute: restartRouteMutation,
+        removeRoute: removeRouteMutation,
+        route,
+        status,
+    };
+};

package/hooks/useRouteExecution/useRouteStore.d.ts

@@ -0,0 +1,17 @@
+import { Route } from '@lifinance/sdk';
+import type { RouteExecutionStore } from './types';
+export declare const useRouteStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<RouteExecutionStore>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<RouteExecutionStore, {
+            routes: Record<string, import("./types").RouteExecution>;
+        }>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void>;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: RouteExecutionStore) => void) => () => void;
+        onFinishHydration: (fn: (state: RouteExecutionStore) => void) => () => void;
+    };
+}>;
+export declare const useSetExecutableRoute: () => (route: Route) => void;
+export declare const useExecutingRoutes: () => import("./types").RouteExecution[];
+export declare const useCurrentRoute: () => [Route | undefined, (route?: Route) => void];

package/hooks/useRouteExecution/useRouteStore.js

@@ -0,0 +1,71 @@
+import produce from 'immer';
+import create from 'zustand';
+import { persist } from 'zustand/middleware';
+import shallow from 'zustand/shallow';
+export const useRouteStore = create()(persist((set) => ({
+    routes: {},
+    setCurrentRoute: (route) => set(produce((state) => {
+        state.currentRoute = route;
+    })),
+    setExecutableRoute: (route) => set(produce((state) => {
+        if (!state.routes[route.id]) {
+            // clean previous idle routes that were not executed
+            Object.keys(state.routes)
+                .filter((routeId) => state.routes[routeId].status === 'idle')
+                .forEach((routeId) => delete state.routes[routeId]);
+            state.routes[route.id] = {
+                route,
+                status: 'idle',
+            };
+            state.currentRoute = route;
+        }
+    })),
+    updateRoute: (route) => set(produce((state) => {
+        state.routes[route.id].route = route;
+        const isFailed = route.steps.some((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
+        if (isFailed) {
+            state.routes[route.id].status = 'error';
+            return;
+        }
+        const isDone = route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
+        if (isDone) {
+            state.routes[route.id].status = 'success';
+            return;
+        }
+        const isLoading = route.steps.some((step) => step.execution);
+        if (isLoading) {
+            state.routes[route.id].status = 'loading';
+        }
+    })),
+    restartRoute: (routeId) => set(produce((state) => {
+        state.routes[routeId].route.steps.forEach((step) => {
+            var _a, _b;
+            const stepHasFailed = ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED';
+            // check if the step has been cancelled which is a "failed" state
+            const stepHasBeenCancelled = (_b = step.execution) === null || _b === void 0 ? void 0 : _b.process.some((process) => process.status === 'CANCELLED');
+            if (step.execution && (stepHasFailed || stepHasBeenCancelled)) {
+                step.execution.status = 'RESUME';
+                // remove last (failed) process
+                step.execution.process.pop();
+            }
+        });
+        state.routes[routeId].status = 'loading';
+    })),
+    removeRoute: (routeId) => set(produce((state) => {
+        if (state.routes[routeId]) {
+            delete state.routes[routeId];
+        }
+    })),
+}), {
+    name: 'li.fi-widget-executable-routes',
+    partialize: (state) => ({ routes: state.routes }),
+}));
+export const useSetExecutableRoute = () => {
+    return useRouteStore((state) => state.setExecutableRoute);
+};
+export const useExecutingRoutes = () => {
+    return useRouteStore((state) => Object.values(state.routes).filter((route) => route.status === 'loading' || route.status === 'error'));
+};
+export const useCurrentRoute = () => {
+    return useRouteStore((state) => [state.currentRoute, state.setCurrentRoute], shallow);
+};

package/hooks/useScrollableContainer.d.ts

@@ -0,0 +1,2 @@
+export declare const useScrollableContainer: () => HTMLElement | null;
+export declare const useScrollableOverflowHidden: () => void;

package/hooks/useScrollableContainer.js

@@ -0,0 +1,24 @@
+import { useLayoutEffect, useState } from 'react';
+import { ElementId } from '../utils/elements';
+export const useScrollableContainer = () => {
+    const [containerElement, setContainerElement] = useState(() => document.getElementById(ElementId.ScrollableContainer));
+    useLayoutEffect(() => {
+        if (!containerElement) {
+            setContainerElement(document.getElementById(ElementId.ScrollableContainer));
+        }
+    }, [containerElement]);
+    return containerElement;
+};
+export const useScrollableOverflowHidden = () => {
+    useLayoutEffect(() => {
+        const element = document.getElementById(ElementId.ScrollableContainer);
+        if (element) {
+            element.style.overflowY = 'hidden';
+        }
+        return () => {
+            if (element) {
+                element.style.overflowY = 'auto';
+            }
+        };
+    }, []);
+};

package/hooks/useSettings/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './useSettingsStore';

package/hooks/useSettings/index.js

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './useSettingsStore';

package/hooks/useSettings/types.d.ts

@@ -0,0 +1,5 @@
+import { Appearance } from '../../types';
+export interface SettingsStore {
+    appearance: Appearance;
+    setAppearance(appearance: Appearance): void;
+}

package/hooks/useSettings/types.js

@@ -0,0 +1 @@
+export {};

package/hooks/useSettings/useSettingsStore.d.ts

@@ -0,0 +1,13 @@
+import { Appearance } from '../../types';
+import { SettingsStore } from './types';
+export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<SettingsStore>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<SettingsStore, Partial<SettingsStore>>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void>;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: SettingsStore) => void) => () => void;
+        onFinishHydration: (fn: (state: SettingsStore) => void) => () => void;
+    };
+}>;
+export declare const useAppearance: () => [Appearance, (appearance: Appearance) => void];

package/hooks/useSettings/useSettingsStore.js

@@ -0,0 +1,22 @@
+import produce from 'immer';
+import create from 'zustand';
+import { persist } from 'zustand/middleware';
+import shallow from 'zustand/shallow';
+export const useSettingsStore = create()(persist((set) => ({
+    appearance: 'auto',
+    setAppearance: (appearance) => set(produce((state) => {
+        state.appearance = appearance;
+    })),
+}), {
+    name: 'li.fi-widget-settings',
+    version: 1,
+    migrate: (persistedState, version) => {
+        if (version === 0 && persistedState.appearance === 'system') {
+            persistedState.appearance = 'auto';
+        }
+        return persistedState;
+    },
+}));
+export const useAppearance = () => {
+    return useSettingsStore((state) => [state.appearance, state.setAppearance], shallow);
+};

package/hooks/useSwapRoutes.d.ts

@@ -0,0 +1,8 @@
+export declare const useSwapRoutes: () => {
+    routes: import("@lifinance/types").Route[] | undefined;
+    isLoading: boolean;
+    isFetching: boolean;
+    dataUpdatedAt: number;
+    refetchTime: number;
+    refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("react-query").QueryObserverResult<import("@lifinance/types").RoutesResponse, unknown>>;
+};

package/hooks/useSwapRoutes.js

@@ -0,0 +1,101 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useEffect } from 'react';
+import { useWatch } from 'react-hook-form';
+import { useQuery } from 'react-query';
+import { useDebouncedWatch, useToken } from '.';
+import { LiFi } from '../lifi';
+import { SwapFormKey } from '../providers/SwapFormProvider';
+import { useWallet } from '../providers/WalletProvider';
+import { useCurrentRoute } from './useRouteExecution';
+const refetchTime = 60000;
+export const useSwapRoutes = () => {
+    const { account } = useWallet();
+    const [currentRoute, setCurrentRoute] = useCurrentRoute();
+    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress, slippage, enabledBridges, enabledExchanges,] = useWatch({
+        name: [
+            SwapFormKey.FromChain,
+            SwapFormKey.FromToken,
+            SwapFormKey.ToChain,
+            SwapFormKey.ToToken,
+            SwapFormKey.Slippage,
+            SwapFormKey.EnabledBridges,
+            SwapFormKey.EnabledExchanges,
+        ],
+    });
+    const [fromTokenAmount] = useDebouncedWatch([SwapFormKey.FromAmount], 500);
+    const { token } = useToken(fromChainId, fromTokenAddress);
+    const isEnabled = Boolean(account.address) &&
+        !isNaN(fromChainId) &&
+        !isNaN(toChainId) &&
+        Boolean(fromTokenAddress) &&
+        Boolean(toTokenAddress) &&
+        Boolean(fromTokenAmount) &&
+        !isNaN(fromTokenAmount) &&
+        !isNaN(slippage);
+    const { data, isLoading, isFetching, dataUpdatedAt, refetch } = useQuery([
+        'routes',
+        account.address,
+        fromChainId,
+        fromTokenAddress,
+        fromTokenAmount,
+        toChainId,
+        toTokenAddress,
+        slippage,
+        enabledBridges,
+        enabledExchanges,
+    ], ({ queryKey: [_, address, fromChainId, fromTokenAddress, fromTokenAmount, toChainId, toTokenAddress, slippage, enabledBridges, enabledExchanges,], signal, }) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        return LiFi.getRoutes({
+            fromChainId,
+            // TODO: simplify
+            fromAmount: (Number(fromTokenAmount) *
+                Math.pow(10, ((_a = token === null || token === void 0 ? void 0 : token.decimals) !== null && _a !== void 0 ? _a : 0))).toFixed(0),
+            fromTokenAddress,
+            toChainId,
+            toTokenAddress,
+            fromAddress: address,
+            toAddress: address,
+            options: {
+                slippage: slippage / 100,
+                bridges: {
+                    allow: enabledBridges,
+                },
+                exchanges: {
+                    allow: enabledExchanges,
+                },
+            },
+        }, { signal });
+    }), {
+        enabled: isEnabled,
+        refetchIntervalInBackground: true,
+        refetchInterval: refetchTime,
+        staleTime: refetchTime,
+        // TODO: probably should be removed
+        cacheTime: refetchTime,
+    });
+    useEffect(() => {
+        // check that the current route is selected from existing routes
+        const isCurrentRouteInSet = data === null || data === void 0 ? void 0 : data.routes.some((route) => route.id === (currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.id));
+        const recommendedRoute = data === null || data === void 0 ? void 0 : data.routes[0];
+        // we don't want to set the current route again if it's already selected from existing routes
+        if (!isCurrentRouteInSet && recommendedRoute) {
+            setCurrentRoute(recommendedRoute);
+        }
+    }, [currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.id, data === null || data === void 0 ? void 0 : data.routes, setCurrentRoute]);
+    return {
+        routes: data === null || data === void 0 ? void 0 : data.routes,
+        isLoading: isEnabled && isLoading,
+        isFetching,
+        dataUpdatedAt,
+        refetchTime,
+        refetch,
+    };
+};

package/hooks/useToken.d.ts

@@ -0,0 +1,4 @@
+export declare const useToken: (chainId: number, tokenAddress: string) => {
+    token: import("@lifinance/types").Token | undefined;
+    isLoading: boolean;
+};

package/hooks/useToken.js

@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+import { useTokens } from './useTokens';
+export const useToken = (chainId, tokenAddress) => {
+    const { tokens, isLoading, isFetching } = useTokens(chainId);
+    const token = useMemo(() => {
+        const token = tokens === null || tokens === void 0 ? void 0 : tokens.find((token) => token.address === tokenAddress && token.chainId === chainId);
+        return token;
+    }, [chainId, tokenAddress, tokens]);
+    return {
+        token,
+        isLoading: isLoading && isFetching,
+    };
+};

package/hooks/useTokenBalance.d.ts

@@ -0,0 +1,7 @@
+import { TokenAmount } from '@lifinance/sdk';
+export declare const useTokenBalance: (chainId: number, tokenAddress: string) => {
+    token: TokenAmount | undefined;
+    isLoading: boolean;
+    isFetching: boolean;
+    refetchBalance: (chainId?: number, tokenAddress?: string) => Promise<void>;
+};

package/hooks/useTokenBalance.js

@@ -0,0 +1,46 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useCallback } from 'react';
+import { useQuery, useQueryClient } from 'react-query';
+import { LiFi } from '../lifi';
+import { useWallet } from '../providers/WalletProvider';
+import { formatTokenAmount } from '../utils/format';
+import { useToken } from './useToken';
+export const useTokenBalance = (chainId, tokenAddress) => {
+    const { account } = useWallet();
+    const queryClient = useQueryClient();
+    const { token } = useToken(chainId, tokenAddress);
+    const { data: tokenWithBalance, isLoading, isFetching, refetch, } = useQuery(['token', account.address, chainId, tokenAddress], ({ queryKey: [, address] }) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!address || !token) {
+            return null;
+        }
+        const tokenBalance = yield LiFi.getTokenBalance(address, token);
+        return Object.assign(Object.assign(Object.assign({}, token), tokenBalance), { amount: formatTokenAmount(tokenBalance === null || tokenBalance === void 0 ? void 0 : tokenBalance.amount) });
+    }), {
+        enabled: Boolean(account.address) && Boolean(token),
+        refetchIntervalInBackground: true,
+        refetchInterval: 60000,
+        staleTime: 60000,
+        cacheTime: 60000,
+    });
+    const refetchBalance = useCallback((chainId, tokenAddress) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!chainId && !tokenAddress) {
+            refetch();
+            return;
+        }
+        yield queryClient.invalidateQueries(['token', account.address, chainId, tokenAddress], { type: 'all', exact: true });
+    }), [account.address, queryClient, refetch]);
+    return {
+        token: tokenWithBalance !== null && tokenWithBalance !== void 0 ? tokenWithBalance : token,
+        isLoading,
+        isFetching,
+        refetchBalance,
+    };
+};

package/hooks/useTokenBalances.d.ts

@@ -0,0 +1,7 @@
+import { TokenAmount } from '@lifinance/sdk';
+export declare const useTokenBalances: (selectedChainId: number) => {
+    tokens: TokenAmount[] | undefined;
+    isLoading: boolean;
+    isFetching: boolean;
+    updateBalances: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("react-query").QueryObserverResult<TokenAmount[], unknown>>;
+};

package/hooks/useTokenBalances.js

@@ -0,0 +1,54 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useQuery } from 'react-query';
+import { LiFi } from '../lifi';
+import { useWallet } from '../providers/WalletProvider';
+import { formatTokenAmount } from '../utils/format';
+import { useChains } from './useChains';
+import { useTokens } from './useTokens';
+export const useTokenBalances = (selectedChainId) => {
+    const { account } = useWallet();
+    const { chains, isLoading: isChainsLoading } = useChains();
+    const { tokens, isLoading, isFetching } = useTokens(selectedChainId);
+    const isBalancesLoadingEnabled = Boolean(account.address) && Boolean(tokens) && Boolean(chains);
+    const { data: tokensWithBalance, isLoading: isBalancesLoading, isFetching: isBalancesFetching, refetch, } = useQuery(['token-balances', selectedChainId, account.address], ({ queryKey: [_, chainId, account] }) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!account || !tokens) {
+            return [];
+        }
+        const tokenBalances = yield LiFi.getTokenBalances(account, tokens);
+        const formatedTokens = (tokenBalances.length === 0 ? tokens : tokenBalances).map((token) => {
+            token.amount = formatTokenAmount(token.amount);
+            return token;
+        });
+        return [
+            ...formatedTokens
+                .filter((token) => token.amount !== '0')
+                .sort((a, b) => {
+                var _a, _b, _c, _d;
+                return parseFloat((_a = b.amount) !== null && _a !== void 0 ? _a : '0') * parseFloat((_b = b.priceUSD) !== null && _b !== void 0 ? _b : '0') -
+                    parseFloat((_c = a.amount) !== null && _c !== void 0 ? _c : '0') * parseFloat((_d = a.priceUSD) !== null && _d !== void 0 ? _d : '0');
+            }),
+            ...formatedTokens.filter((token) => token.amount === '0'),
+        ];
+    }), {
+        enabled: isBalancesLoadingEnabled,
+        refetchIntervalInBackground: true,
+        refetchInterval: 60000,
+        staleTime: 60000,
+    });
+    return {
+        tokens: tokensWithBalance !== null && tokensWithBalance !== void 0 ? tokensWithBalance : tokens,
+        isLoading: (isBalancesLoading && isBalancesLoadingEnabled) ||
+            (isLoading && isFetching) ||
+            isChainsLoading,
+        isFetching: isBalancesFetching,
+        updateBalances: refetch,
+    };
+};

package/hooks/useTokens.d.ts

@@ -0,0 +1,5 @@
+export declare const useTokens: (selectedChainId: number) => {
+    tokens: import("@lifinance/types").Token[] | undefined;
+    isLoading: boolean;
+    isFetching: boolean;
+};

package/hooks/useTokens.js

@@ -0,0 +1,24 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useQuery } from 'react-query';
+import { LiFi } from '../lifi';
+export const useTokens = (selectedChainId) => {
+    const { data: tokens, isLoading, isFetching, } = useQuery(['tokens', selectedChainId], () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const data = yield LiFi.getTokens({ chains: [selectedChainId] });
+        return (_a = data.tokens) === null || _a === void 0 ? void 0 : _a[selectedChainId];
+        // .sort((a, b) => (a.symbol > b.symbol ? 1 : -1));
+    }));
+    return {
+        tokens,
+        isLoading,
+        isFetching,
+    };
+};