@lifi/widget 1.11.4 → 1.13.0

package/config/lifi.js

@@ -1,11 +1,5 @@
 import LIFI from '@lifi/sdk';
-const defaultConfig = {
-// apiUrl: env.LIFI_API_URL,
-// defaultRouteOptions: {
-//   integrator: 'li.fi',
-// },
-};
-export const LiFi = new LIFI(defaultConfig);
+export const LiFi = new LIFI();
 export const updateLiFiConfig = (configUpdate) => {
-    LiFi.setConfig(Object.assign(Object.assign({}, defaultConfig), configUpdate));
+    LiFi.setConfig(configUpdate);
 };

package/config/sentry.d.ts

@@ -1 +1 @@
-export declare const initSentry: (enabled?: boolean) => void;
+export declare const initSentry: (enabled?: boolean) => Promise<void>;

package/config/sentry.js

@@ -1,20 +1,35 @@
-import { CaptureConsole } from '@sentry/integrations';
-import * as Sentry from '@sentry/react';
-import { BrowserTracing } from '@sentry/tracing';
-import { version } from './version';
-export const initSentry = (enabled) => {
-    Sentry.init({
-        dsn: 'https://bc1312161bf948db9b9c82618035ec22@o1302189.ingest.sentry.io/6539228',
-        integrations: [
-            new BrowserTracing(),
-            new CaptureConsole({
-                levels: ['error'],
-            }),
-        ],
-        sampleRate: 1,
-        tracesSampleRate: 0.2,
-        enabled,
-        environment: process.env.NODE_ENV,
-        release: version,
+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 { version } from './version';
+let sentryLoaded = false;
+export const initSentry = (enabled) => __awaiter(void 0, void 0, void 0, function* () {
+    if (enabled || sentryLoaded) {
+        const [Sentry, { CaptureConsole }, { BrowserTracing }] = yield Promise.all([
+            import('@sentry/react'),
+            import('@sentry/integrations'),
+            import('@sentry/tracing'),
+        ]);
+        Sentry.init({
+            dsn: 'https://bc1312161bf948db9b9c82618035ec22@o1302189.ingest.sentry.io/6539228',
+            integrations: [
+                new BrowserTracing(),
+                new CaptureConsole({
+                    levels: ['error'],
+                }),
+            ],
+            sampleRate: 1,
+            tracesSampleRate: 0.2,
+            enabled,
+            environment: process.env.NODE_ENV,
+            release: version,
+        });
+        sentryLoaded = true;
+    }
+});

package/config/theme.js

@@ -31,12 +31,15 @@ const shape = {
 };
 export const createTheme = (mode, theme = {}) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    const primaryMainColor = (_c = (_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : palette.primary.main;
+    const primaryLightColor = lighten((_f = (_e = (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : palette.primary.main, 0.5);
+    const primaryDarkColor = darken((_j = (_h = (_g = theme.palette) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h.main) !== null && _j !== void 0 ? _j : palette.primary.main, 0.2);
     return createMuiTheme({
         typography: Object.assign({ fontFamily: 'Inter var, Inter, sans-serif' }, theme.typography),
         palette: Object.assign(Object.assign(Object.assign({ mode }, palette), { primary: {
-                main: (_c = (_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : palette.primary.main,
-                light: lighten((_f = (_e = (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : palette.primary.main, 0.5),
-                dark: darken((_j = (_h = (_g = theme.palette) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h.main) !== null && _j !== void 0 ? _j : palette.primary.main, 0.2),
+                main: primaryMainColor,
+                light: primaryLightColor,
+                dark: primaryDarkColor,
             }, secondary: {
                 main: (_m = (_l = (_k = theme.palette) === null || _k === void 0 ? void 0 : _k.secondary) === null || _l === void 0 ? void 0 : _l.main) !== null && _m !== void 0 ? _m : palette.secondary.main,
                 light: lighten((_q = (_p = (_o = theme.palette) === null || _o === void 0 ? void 0 : _o.secondary) === null || _p === void 0 ? void 0 : _p.main) !== null && _q !== void 0 ? _q : palette.secondary.main, 0.5),
@@ -85,18 +88,18 @@ export const createTheme = (mode, theme = {}) => {
                 styleOverrides: Object.assign(Object.assign({}, (mode === 'dark'
                     ? {
                         outlined: {
-                            color: palette.primary.light,
-                            borderColor: palette.primary.light,
+                            color: primaryLightColor,
+                            borderColor: primaryLightColor,
                             '&:hover': {
-                                backgroundColor: alpha(palette.primary.light, 0.08),
-                                borderColor: palette.primary.light,
+                                backgroundColor: alpha(primaryLightColor, 0.08),
+                                borderColor: primaryLightColor,
                             },
                         },
                         text: {
-                            color: palette.primary.light,
+                            color: primaryLightColor,
                             '&:hover': {
-                                backgroundColor: alpha(palette.primary.light, 0.08),
-                                borderColor: palette.primary.light,
+                                backgroundColor: alpha(primaryLightColor, 0.08),
+                                borderColor: primaryLightColor,
                             },
                         },
                     }
@@ -117,7 +120,7 @@ export const createTheme = (mode, theme = {}) => {
                         },
                     }, contained: {
                         '&:hover': {
-                            color: getContrastRatio(palette.primary.main, dark.text.primary) >= 3
+                            color: getContrastRatio(dark.text.primary, primaryMainColor) >= 3
                                 ? dark.text.primary
                                 : light.text.primary,
                         },

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.11.4";
+export declare const version = "1.13.0";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.11.4';
+export const version = '1.13.0';

package/hooks/index.d.ts

@@ -2,7 +2,9 @@ export * from './useChain';
 export * from './useChains';
 export * from './useContentHeight';
 export * from './useDebouncedWatch';
+export * from './useFeaturedTokens';
 export * from './useGasSufficiency';
+export * from './useInitializer';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
 export * from './useSwapRoutes';
@@ -11,4 +13,5 @@ export * from './useToken';
 export * from './useTokenBalance';
 export * from './useTokenBalances';
 export * from './useTokens';
+export * from './useTokenSearch';
 export * from './useTools';

package/hooks/index.js

@@ -2,7 +2,9 @@ export * from './useChain';
 export * from './useChains';
 export * from './useContentHeight';
 export * from './useDebouncedWatch';
+export * from './useFeaturedTokens';
 export * from './useGasSufficiency';
+export * from './useInitializer';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
 export * from './useSwapRoutes';
@@ -11,4 +13,5 @@ export * from './useToken';
 export * from './useTokenBalance';
 export * from './useTokenBalances';
 export * from './useTokens';
+export * from './useTokenSearch';
 export * from './useTools';

package/hooks/useFeaturedTokens.d.ts

@@ -0,0 +1 @@
+export declare const useFeaturedTokens: (selectedChainId: number) => import("@lifi/types").Token[] | undefined;

package/hooks/useFeaturedTokens.js

@@ -0,0 +1,6 @@
+import { useMemo } from 'react';
+import { useWidgetConfig } from '../providers/WidgetProvider';
+export const useFeaturedTokens = (selectedChainId) => {
+    const { featuredTokens } = useWidgetConfig();
+    return useMemo(() => featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.filter((token) => token.chainId === selectedChainId), [featuredTokens, selectedChainId]);
+};

package/hooks/useGasSufficiency.js

@@ -15,12 +15,16 @@ export const useGasSufficiency = (route) => {
         ],
     });
     const fromAmount = useDebouncedWatch(SwapFormKey.FromAmount, 250);
-    const { tokens: fromChainTokenBalances } = useTokenBalances(fromChainId);
-    const { tokens: toChainTokenBalances } = useTokenBalances(toChainId);
     const { getChainById } = useChains();
+    const { tokensWithBalance: fromChainTokenBalances } = useTokenBalances(fromChainId);
+    const { tokensWithBalance: toChainTokenBalances } = useTokenBalances(toChainId);
     const insufficientGas = useMemo(() => {
         var _a;
-        if (!account.isActive || !route || !fromAmount) {
+        if (!account.isActive ||
+            !route ||
+            !fromAmount ||
+            !fromChainTokenBalances ||
+            !toChainTokenBalances) {
             return [];
         }
         const tokenBalancesByChain = {
@@ -78,7 +82,10 @@ export const useGasSufficiency = (route) => {
     ]);
     const insufficientFunds = useMemo(() => {
         var _a, _b;
-        if (!account.isActive || !fromToken || !fromAmount) {
+        if (!account.isActive ||
+            !fromToken ||
+            !fromAmount ||
+            !fromChainTokenBalances) {
             return false;
         }
         const balance = Big((_b = (_a = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === fromToken)) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);

package/hooks/useRouteExecution.js

@@ -20,21 +20,23 @@ export const useRouteExecution = (routeId) => {
     const routeExecution = useRouteStore((state) => state.routes[routeId]);
     const [updateRoute, restartRoute, deleteRoute] = useRouteStore((state) => [state.updateRoute, state.restartRoute, state.deleteRoute], shallow);
     const updateCallback = (updatedRoute) => {
-        console.log('Route updated.', updatedRoute);
-        updateRoute(deepClone(updatedRoute));
+        const clonedUpdatedRoute = deepClone(updatedRoute);
+        console.log('Route updated.', clonedUpdatedRoute);
+        updateRoute(clonedUpdatedRoute);
     };
-    const switchChainHook = useCallback((requiredChainId) => __awaiter(void 0, void 0, void 0, function* () {
+    const switchChainHook = (requiredChainId) => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive || !account.signer) {
             return account.signer;
         }
-        if ((yield account.signer.getChainId()) !== requiredChainId) {
+        const currentChainId = yield account.signer.getChainId();
+        if (currentChainId !== 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.');
@@ -112,26 +114,29 @@ export const useRouteExecution = (routeId) => {
         deleteRoute(routeId);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [routeId]);
+    // Resume route execution after page reload
     useEffect(() => {
-        // check if route is eligible for automatic resuming
-        const isDone = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
-        const isFailed = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps.some((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
-        const alreadyStarted = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps.some((step) => step.execution);
-        if (!isDone &&
-            !isFailed &&
-            alreadyStarted &&
-            account.signer &&
+        // Check if route is eligible for automatic resuming
+        if (isActiveRoute(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route) &&
+            account.isActive &&
             !resumedAfterMount.current) {
             resumedAfterMount.current = true;
             resumeRoute();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [account.isActive]);
+    useEffect(() => {
         return () => {
-            if (routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route) {
-                LiFi.moveExecutionToBackground(routeExecution.route);
+            var _a;
+            const route = (_a = useRouteStore.getState().routes[routeId]) === null || _a === void 0 ? void 0 : _a.route;
+            if (!route || !isActiveRoute(route)) {
+                return;
             }
+            LiFi.moveExecutionToBackground(route);
+            console.log('Move route execution to background.', routeId);
+            resumedAfterMount.current = false;
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [account.signer]);
+    }, [routeId]);
     return {
         executeRoute,
         restartRoute: restartRouteMutation,
@@ -140,3 +145,12 @@ export const useRouteExecution = (routeId) => {
         status: routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.status,
     };
 };
+const isActiveRoute = (route) => {
+    if (!route) {
+        return false;
+    }
+    const allDone = 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);
+    return !allDone && !isFailed && alreadyStarted;
+};

package/hooks/useSwapRoutes.js

@@ -40,7 +40,7 @@ export const useSwapRoutes = () => {
     // Boolean(account.address) &&
     !isNaN(fromChainId) &&
         !isNaN(toChainId) &&
-        Boolean(fromTokenAddress) &&
+        Boolean(token === null || token === void 0 ? void 0 : token.address) &&
         Boolean(toTokenAddress) &&
         !isNaN(fromTokenAmount) &&
         Number(fromTokenAmount) > 0 &&
@@ -49,7 +49,7 @@ export const useSwapRoutes = () => {
         'routes',
         account.address,
         fromChainId,
-        fromTokenAddress,
+        token === null || token === void 0 ? void 0 : token.address,
         fromTokenAmount,
         toChainId,
         toTokenAddress,

package/hooks/useToken.d.ts

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

package/hooks/useToken.js

@@ -8,6 +8,7 @@ export const useToken = (chainId, tokenAddress) => {
     }, [chainId, tokenAddress, tokens]);
     return {
         token,
-        isLoading: isLoading && isFetching,
+        isLoading,
+        isFetching,
     };
 };

package/hooks/useTokenBalance.d.ts

@@ -1,7 +1,5 @@
-import { TokenAmount } from '@lifi/sdk';
 export declare const useTokenBalance: (chainId: number, tokenAddress: string) => {
-    token: TokenAmount | undefined;
+    token: import("..").Token | undefined;
     isLoading: boolean;
-    isFetching: boolean;
-    refetchBalance: (chainId?: number, tokenAddress?: string) => Promise<void>;
+    refetch: <TPageData>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("..").Token[] | undefined, unknown>>;
 };

package/hooks/useTokenBalance.js

@@ -1,46 +1,15 @@
-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, useQueryClient } from '@tanstack/react-query';
-import { useCallback } from 'react';
-import { LiFi } from '../config/lifi';
-import { useWallet } from '../providers/WalletProvider';
-import { formatTokenAmount } from '../utils';
-import { useToken } from './useToken';
+import { useMemo } from 'react';
+import { useTokenBalances } from './useTokenBalances';
 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: 30000,
-        staleTime: 30000,
-        cacheTime: 30000,
-    });
-    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]);
+    const { tokens, tokensWithBalance, isBalanceLoading, refetch } = useTokenBalances(chainId);
+    const token = useMemo(() => {
+        var _a;
+        const token = (_a = (tokensWithBalance !== null && tokensWithBalance !== void 0 ? tokensWithBalance : tokens)) === null || _a === void 0 ? void 0 : _a.find((token) => token.address === tokenAddress && token.chainId === chainId);
+        return token;
+    }, [chainId, tokenAddress, tokens, tokensWithBalance]);
     return {
-        token: tokenWithBalance !== null && tokenWithBalance !== void 0 ? tokenWithBalance : token,
-        isLoading,
-        isFetching,
-        refetchBalance,
+        token,
+        isLoading: isBalanceLoading,
+        refetch,
     };
 };

package/hooks/useTokenBalances.d.ts

@@ -1,7 +1,10 @@
-import { TokenAmount } from '@lifi/sdk';
+import { Token } from '../types';
 export declare const useTokenBalances: (selectedChainId: number) => {
-    tokens: TokenAmount[] | undefined;
+    tokens: Token[] | undefined;
+    tokensWithBalance: Token[] | undefined;
+    featuredTokens: import("@lifi/types").Token[] | undefined;
     isLoading: boolean;
     isBalanceLoading: boolean;
-    updateBalances: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<TokenAmount[], unknown>>;
+    isBalanceFetched: boolean;
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<Token[] | undefined, unknown>>;
 };

package/hooks/useTokenBalances.js

@@ -7,46 +7,70 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+/* eslint-disable consistent-return */
 import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
 import { LiFi } from '../config/lifi';
 import { useWallet } from '../providers/WalletProvider';
 import { formatTokenAmount } from '../utils';
-import { useChains } from './useChains';
+import { useFeaturedTokens } from './useFeaturedTokens';
 import { useTokens } from './useTokens';
+const defaultRefetchInterval = 60000;
+const minRefetchInterval = 1000;
 export const useTokenBalances = (selectedChainId) => {
     const { account } = useWallet();
-    const { chains, isLoading: isChainsLoading } = useChains();
+    const featuredTokens = useFeaturedTokens(selectedChainId);
     const { tokens, isLoading } = useTokens(selectedChainId);
-    const isBalanceLoadingEnabled = Boolean(account.address) && Boolean(tokens) && Boolean(chains);
-    const { data: tokensWithBalance, isLoading: isBalanceLoading, refetch, } = useQuery(['token-balances', selectedChainId, account.address], ({ queryKey: [_, chainId, account] }) => __awaiter(void 0, void 0, void 0, function* () {
-        if (!account || !tokens) {
-            return [];
+    const [refetchInterval, setRefetchInterval] = useState(defaultRefetchInterval);
+    const isBalanceLoadingEnabled = Boolean(account.address) && Boolean(tokens === null || tokens === void 0 ? void 0 : tokens.length);
+    const { data: tokensWithBalance, isLoading: isBalanceLoading, isFetched: isBalanceFetched, refetch, } = useQuery(['token-balances', account.address, selectedChainId, tokens === null || tokens === void 0 ? void 0 : tokens.length], ({ queryKey: [, accountAddress] }) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!accountAddress || !tokens) {
+            return;
         }
-        const tokenBalances = yield LiFi.getTokenBalances(account, tokens);
-        const formatedTokens = (tokenBalances.length === 0 ? tokens : tokenBalances).map((token) => {
+        const tokenBalances = yield LiFi.getTokenBalances(accountAddress, tokens);
+        if (!(tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.length)) {
+            // Sometimes RPCs (e.g. Arbitrum) don't return balances on first call
+            // TODO: fix and remove backplane
+            setRefetchInterval((interval) => interval === defaultRefetchInterval
+                ? minRefetchInterval
+                : interval * 2);
+            return;
+        }
+        const featuredTokenAddresses = new Set(featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.map((token) => token.address));
+        const sortFn = (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');
+        };
+        const formattedTokens = (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'),
+        const result = [
+            ...formattedTokens
+                .filter((token) => token.amount !== '0' && featuredTokenAddresses.has(token.address))
+                .sort(sortFn),
+            ...formattedTokens.filter((token) => token.amount === '0' && featuredTokenAddresses.has(token.address)),
+            ...formattedTokens
+                .filter((token) => token.amount !== '0' &&
+                !featuredTokenAddresses.has(token.address))
+                .sort(sortFn),
+            ...formattedTokens.filter((token) => token.amount === '0' && !featuredTokenAddresses.has(token.address)),
         ];
+        return result;
     }), {
         enabled: isBalanceLoadingEnabled,
         refetchIntervalInBackground: true,
-        refetchInterval: 60000,
-        staleTime: 60000,
+        refetchInterval,
+        staleTime: refetchInterval,
     });
     return {
-        tokens: tokensWithBalance !== null && tokensWithBalance !== void 0 ? tokensWithBalance : tokens,
-        isLoading: isLoading || isChainsLoading,
+        tokens,
+        tokensWithBalance,
+        featuredTokens,
+        isLoading,
         isBalanceLoading: isBalanceLoading && isBalanceLoadingEnabled,
-        updateBalances: refetch,
+        isBalanceFetched,
+        refetch,
     };
 };

package/hooks/useTokenSearch.d.ts

@@ -0,0 +1,7 @@
+import { Token } from '../types';
+export declare const useTokenSearch: (token: string, chainId: number, enabled?: boolean) => {
+    token: Token | undefined;
+    isLoading: boolean;
+    isFetching: boolean;
+    isFetched: boolean;
+};

package/hooks/useTokenSearch.js

@@ -0,0 +1,37 @@
+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, useQueryClient } from '@tanstack/react-query';
+import { LiFi } from '../config/lifi';
+export const useTokenSearch = (token, chainId, enabled) => {
+    const queryClient = useQueryClient();
+    const { data, isLoading, isFetching, isFetched } = useQuery(['token-search', chainId, token], ({ queryKey: [, chainId, token], signal }) => __awaiter(void 0, void 0, void 0, function* () {
+        const data = yield LiFi.getToken(chainId, token, {
+            signal,
+        });
+        if (data) {
+            queryClient.setQueriesData(['tokens', chainId], (tokens) => {
+                if (!(tokens === null || tokens === void 0 ? void 0 : tokens.some((token) => token.address === data.address))) {
+                    tokens === null || tokens === void 0 ? void 0 : tokens.push(data);
+                }
+                return tokens;
+            });
+        }
+        return data;
+    }), {
+        enabled,
+        retry: false,
+    });
+    return {
+        token: data,
+        isLoading,
+        isFetching,
+        isFetched,
+    };
+};

package/hooks/useTokens.d.ts

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

package/hooks/useTokens.js

@@ -9,12 +9,20 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { useQuery } from '@tanstack/react-query';
 import { LiFi } from '../config/lifi';
+import { useFeaturedTokens } from './useFeaturedTokens';
 export const useTokens = (selectedChainId) => {
-    const { data: tokens, isLoading, isFetching, } = useQuery(['tokens', selectedChainId], () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
+    const featuredTokens = useFeaturedTokens(selectedChainId);
+    const { data: tokens, isLoading, isFetching, } = useQuery(['tokens', selectedChainId, featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length], () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c;
         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));
+        const featuredTokenAddresses = new Set(featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.map((token) => token.address));
+        return [
+            ...((_a = featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.map((token) => {
+                token.featured = true;
+                return token;
+            })) !== null && _a !== void 0 ? _a : []),
+            ...((_c = (_b = data.tokens) === null || _b === void 0 ? void 0 : _b[selectedChainId].filter((token) => !featuredTokenAddresses.has(token.address))) !== null && _c !== void 0 ? _c : []),
+        ];
     }));
     return {
         tokens,

package/i18n/en/translation.json

@@ -50,6 +50,8 @@
     "selectChain": "Chain",
     "selectToken": "Token",
     "selectChainAndToken": "Select chain and token",
+    "featuredTokens": "Featured tokens",
+    "otherTokens": "Other tokens",
     "inProgress": "In progress",
     "couldntFindTokens": "We couldn't find tokens on this chain or you don't have any.",
     "stepSwap": "Swap",
@@ -90,7 +92,8 @@
     "warning": {
       "title": {
         "insufficientGas": "Insufficient gas",
-        "deleteSwap": "Delete this swap?"
+        "deleteSwap": "Delete this swap?",
+        "deleteSwapHistory": "Delete swap history?"
       },
       "message": {
         "insufficientFunds": "You don't have enough funds to execute the swap.",
@@ -164,7 +167,7 @@
   },
   "tooltip": {
     "notFound": {
-      "title": "Sorry 🥲",
+      "title": "404",
       "text": "We couldn't find this page."
     },
     "progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click this circle to update manually."