@lifi/widget 1.12.1 → 1.13.0

package/components/Initializer.js

@@ -1,4 +1,4 @@
-import { useInitializer } from '../hooks/useInitializer';
+import { useInitializer } from '../hooks';
 export const Initializer = () => {
     useInitializer();
     return null;

package/components/PoweredBy/PoweredBy.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Typography } from '@mui/material';
+import { Box, Tooltip, Typography } from '@mui/material';
+import { version } from '../../config/version';
 import { LiFiLogo } from '../LiFiLogo';
 import { Link } from './PoweredBy.style';
 export const PoweredBy = () => {
@@ -7,5 +8,5 @@ export const PoweredBy = () => {
             display: 'flex',
             alignItems: 'flex-end',
             justifyContent: 'flex-end',
-        } }, { children: _jsxs(Link, Object.assign({ href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary" }, { children: [_jsx(Typography, Object.assign({ color: "text.secondary", fontSize: 12, px: 0.5 }, { children: "Powered by" })), _jsx(LiFiLogo, { variant: "full", style: { height: 16, width: 42 } })] })) })));
+        } }, { children: _jsx(Tooltip, Object.assign({ title: `v${version}`, placement: "top", enterDelay: 5000, arrow: true }, { children: _jsxs(Link, Object.assign({ href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary" }, { children: [_jsx(Typography, Object.assign({ color: "text.secondary", fontSize: 12, px: 0.5 }, { children: "Powered by" })), _jsx(LiFiLogo, { variant: "full", style: { height: 16, width: 42 } })] })) })) })));
 };

package/components/Step/CircularProgress.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Status } from '@lifi/sdk';
 export declare function CircularProgress({ status }: {
     status: Status;

package/components/SwapButton/ButtonTooltip.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ButtonTooltip: ({ title, children, }: {
     title?: string | undefined;
     children: JSX.Element;

package/components/SwapInput/FormPriceHelperText.js

@@ -14,14 +14,14 @@ export const FormPriceHelperText = ({ formType, selected }) => {
             SwapFormKeyHelper.getTokenKey(formType),
         ],
     });
-    const { token, isLoading, isFetching } = useTokenBalance(chainId, tokenAddress);
+    const { token, isLoading } = useTokenBalance(chainId, tokenAddress);
     const fromAmountTokenPrice = formatTokenPrice(amount, token === null || token === void 0 ? void 0 : token.priceUSD);
     return (_jsxs(FormHelperText, Object.assign({ component: "div", sx: { display: 'flex', justifyContent: 'space-between', margin: 0 } }, { children: [_jsx(Typography, Object.assign({ color: fromAmountTokenPrice ? 'text.secondary' : 'grey.600', fontWeight: 400, fontSize: 12, marginLeft: selected ? 8 : 2, lineHeight: 1.3334, flex: 1, sx: {
                     wordBreak: 'break-word',
                     overflowWrap: 'break-word',
                 } }, { children: t(`swap.currency`, {
                     value: fromAmountTokenPrice,
-                }) })), isLoading && isFetching ? (_jsx(Skeleton, { variant: "text", width: 48, height: 16, sx: { borderRadius: 0.25 } })) : (token === null || token === void 0 ? void 0 : token.amount) ? (_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1.3334, pl: 0.25 }, { children: t(`swap.maxAmount`, {
+                }) })), isLoading && tokenAddress ? (_jsx(Skeleton, { variant: "text", width: 48, height: 16, sx: { borderRadius: 0.25 } })) : (token === null || token === void 0 ? void 0 : token.amount) ? (_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1.3334, pl: 0.25 }, { children: t(`swap.maxAmount`, {
                     amount: token === null || token === void 0 ? void 0 : token.amount,
                 }) }))) : null] })));
 };

package/components/SwapInput/SwapInputAdornment.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { SwapFormTypeProps } from '../../providers/SwapFormProvider';
 export declare const SwapInputAdornment: ({ formType }: SwapFormTypeProps) => JSX.Element;

package/components/SwapInput/SwapInputAdornment.js

@@ -14,10 +14,10 @@ export const SwapInputAdornment = ({ formType }) => {
             SwapFormKeyHelper.getTokenKey(formType),
         ],
     });
-    const { token, isLoading, isFetching } = useTokenBalance(chainId, tokenAddress);
+    const { token, isLoading } = useTokenBalance(chainId, tokenAddress);
     const handleMax = () => {
         var _a;
         setValue(SwapFormKeyHelper.getAmountKey(formType), (_a = token === null || token === void 0 ? void 0 : token.amount) !== null && _a !== void 0 ? _a : '');
     };
-    return (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: isLoading && isFetching ? (_jsx(Skeleton, { variant: "rectangular", width: 46, height: 20, sx: { borderRadius: 0.5 } })) : formType === 'from' && (token === null || token === void 0 ? void 0 : token.amount) ? (_jsx(Button, Object.assign({ onClick: handleMax, variant: "outlined" }, { children: t('button.max') }))) : null })));
+    return (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: isLoading && tokenAddress ? (_jsx(Skeleton, { variant: "rectangular", width: 46, height: 20, sx: { borderRadius: 0.5 } })) : formType === 'from' && (token === null || token === void 0 ? void 0 : token.amount) ? (_jsx(Button, Object.assign({ onClick: handleMax, variant: "outlined" }, { children: t('button.max') }))) : null })));
 };

package/components/SwapRouteCard/SwapRouteCard.style.js

@@ -1,6 +1,6 @@
-import { getContrastTextColor } from '@lifi/widget/utils';
 import { Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
+import { getContrastTextColor } from '../../utils';
 export const Label = styled(Typography, {
     shouldForwardProp: (prop) => prop !== 'active',
 })(({ theme, active }) => ({

package/components/TokenAvatar/TokenAvatar.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Avatar, Badge } from '@mui/material';
-import { useChain } from '../../hooks';
+import { useChain, useToken } from '../../hooks';
 import { SmallAvatar } from '../SmallAvatar';
 export const TokenAvatar = ({ token, sx }) => {
     const { chain } = useChain(token.chainId);
-    return (_jsx(Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: chain ? (_jsx(SmallAvatar, Object.assign({ src: chain.logoURI, alt: chain.name }, { children: chain.name[0] }))) : null, sx: sx }, { children: _jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol }, { children: token.symbol[0] })) })));
+    const { token: chainToken } = useToken(token.chainId, token.address);
+    return (_jsx(Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: chain ? (_jsx(SmallAvatar, Object.assign({ src: chain.logoURI, alt: chain.name }, { children: chain.name[0] }))) : null, sx: sx }, { children: _jsx(Avatar, Object.assign({ src: token.logoURI || (chainToken === null || chainToken === void 0 ? void 0 : chainToken.logoURI), alt: token.symbol }, { children: token.symbol[0] })) })));
 };

package/components/TokenList/TokenList.js

@@ -1,49 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, List, Typography } from '@mui/material';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Box } from '@mui/material';
+import { useCallback, useRef } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { useVirtual } from 'react-virtual';
-import { useDebouncedWatch, useTokenBalances } from '../../hooks';
+import { useDebouncedWatch, useTokenBalances, useTokenSearch, } from '../../hooks';
 import { SwapFormKey, SwapFormKeyHelper, } from '../../providers/SwapFormProvider';
 import { useWallet } from '../../providers/WalletProvider';
-import { TokenListItem, TokenListItemSkeleton } from './TokenListItem';
-import { createTokenAmountSkeletons, skeletonKey } from './utils';
+import { TokenNotFound } from './TokenNotFound';
+import { VirtualizedTokenList } from './VirtualizedTokenList';
 export const TokenList = ({ formType, height, onClick, }) => {
-    const { t } = useTranslation();
+    var _a, _b;
+    const parentRef = useRef(null);
     const { account } = useWallet();
     const { setValue, getValues } = useFormContext();
     const [selectedChainId] = useWatch({
         name: [SwapFormKeyHelper.getChainKey(formType)],
     });
-    const [searchTokensFilter] = useDebouncedWatch([SwapFormKey.SearchTokensFilter], 250);
-    const { tokens: tokensWithoutBalance, tokensWithBalance, isLoading, isBalanceLoading, } = useTokenBalances(selectedChainId);
-    const tokens = tokensWithBalance !== null && tokensWithBalance !== void 0 ? tokensWithBalance : tokensWithoutBalance;
-    const chainTokens = useMemo(() => {
-        var _a;
-        let chainTokens = tokens !== null && tokens !== void 0 ? tokens : [];
-        const searchFilter = (_a = searchTokensFilter === null || searchTokensFilter === void 0 ? void 0 : searchTokensFilter.toUpperCase()) !== null && _a !== void 0 ? _a : '';
-        chainTokens = isLoading
-            ? createTokenAmountSkeletons()
-            : searchTokensFilter
-                ? chainTokens.filter((token) => token.name.toUpperCase().includes(searchFilter) ||
-                    token.symbol.toUpperCase().includes(searchFilter) ||
-                    token.address.toUpperCase().includes(searchFilter))
-                : chainTokens;
-        return chainTokens;
-    }, [isLoading, searchTokensFilter, tokens]);
-    const parentRef = useRef(null);
-    const { virtualItems, totalSize, scrollToIndex } = useVirtual({
-        size: chainTokens.length,
-        parentRef,
-        overscan: 3,
-        paddingEnd: 12,
-        estimateSize: useCallback(() => 64, []),
-        keyExtractor: (index) => { var _a; return (_a = chainTokens[index].address) !== null && _a !== void 0 ? _a : index; },
-    });
-    useEffect(() => {
-        scrollToIndex(0);
-    }, [scrollToIndex, selectedChainId]);
+    const [tokenSearchFilter] = useDebouncedWatch([SwapFormKey.TokenSearchFilter], 250);
+    const { tokens: chainTokens, tokensWithBalance, isLoading: isTokensLoading, isBalanceLoading, featuredTokens, } = useTokenBalances(selectedChainId);
+    let filteredTokens = ((_a = tokensWithBalance !== null && tokensWithBalance !== void 0 ? tokensWithBalance : chainTokens) !== null && _a !== void 0 ? _a : []);
+    const searchFilter = (_b = tokenSearchFilter === null || tokenSearchFilter === void 0 ? void 0 : tokenSearchFilter.toUpperCase()) !== null && _b !== void 0 ? _b : '';
+    filteredTokens = tokenSearchFilter
+        ? filteredTokens.filter((token) => token.name.toUpperCase().includes(searchFilter) ||
+            token.symbol.toUpperCase().includes(searchFilter) ||
+            token.address.toUpperCase().includes(searchFilter))
+        : filteredTokens;
+    const tokenSearchEnabled = !filteredTokens.length && !isTokensLoading;
+    const { token: searchedToken, isLoading: isSearchedTokenLoading } = useTokenSearch(tokenSearchFilter, selectedChainId, tokenSearchEnabled);
+    const isLoading = isTokensLoading || (tokenSearchEnabled && isSearchedTokenLoading);
+    const tokens = filteredTokens.length
+        ? filteredTokens
+        : searchedToken
+            ? [searchedToken]
+            : filteredTokens;
     const handleTokenClick = useCallback((tokenAddress) => {
         setValue(SwapFormKeyHelper.getTokenKey(formType), tokenAddress);
         setValue(SwapFormKeyHelper.getAmountKey(formType), '');
@@ -59,11 +47,5 @@ export const TokenList = ({ formType, height, onClick, }) => {
         }
         onClick === null || onClick === void 0 ? void 0 : onClick();
     }, [formType, getValues, onClick, setValue]);
-    return (_jsxs(Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!virtualItems.length ? (_jsx(Typography, Object.assign({ variant: "body1", align: "center", py: 2, px: 3 }, { children: t('swap.couldntFindTokens') }))) : null, _jsx(List, Object.assign({ style: { height: totalSize }, disablePadding: true }, { children: virtualItems.map((item) => {
-                    const token = chainTokens[item.index];
-                    if (token.name.includes(skeletonKey)) {
-                        return (_jsx(TokenListItemSkeleton, { size: item.size, start: item.start }, item.key));
-                    }
-                    return (_jsx(TokenListItem, { onClick: handleTokenClick, size: item.size, start: item.start, token: token, isBalanceLoading: isBalanceLoading, showBalance: account.isActive }, item.key));
-                }) }))] })));
+    return (_jsxs(Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!tokens.length && !isLoading ? _jsx(TokenNotFound, {}) : null, _jsx(VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] })));
 };

package/components/TokenList/TokenList.style.js

@@ -6,6 +6,7 @@ export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusSecondary,
     paddingLeft: theme.spacing(2),
     height: 64,
+    width: '100%',
     '&:hover': {
         backgroundColor: getContrastAlphaColor(theme, '4%'),
     },
@@ -14,8 +15,10 @@ export const ListItem = styled(MuiListItem)(({ theme }) => ({
     position: 'absolute',
     top: 0,
     left: 0,
-    width: '100%',
-    padding: theme.spacing(0.5, 3),
+    height: 64,
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    padding: theme.spacing(0, 3),
     [`.${listItemSecondaryActionClasses.root}`]: {
         right: theme.spacing(5),
     },

package/components/TokenList/TokenListItem.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TokenListItemBaseProps, TokenListItemProps } from './types';
+import { TokenListItemProps } from './types';
 export declare const TokenListItem: React.FC<TokenListItemProps>;
-export declare const TokenListItemSkeleton: React.FC<TokenListItemBaseProps>;
+export declare const TokenListItemSkeleton: () => JSX.Element;
 export declare const TokenAmountSkeleton: React.FC;

package/components/TokenList/TokenListItem.js

@@ -4,22 +4,19 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatTokenPrice } from '../../utils';
 import { ListItem, ListItemButton } from './TokenList.style';
-export const TokenListItem = memo(({ onClick, size, start, token, showBalance, isBalanceLoading }) => {
+export const TokenListItem = memo(({ onClick, size, start, token, showBalance, isBalanceLoading, startAdornment, endAdornment, }) => {
     const { t } = useTranslation();
     const handleClick = () => onClick === null || onClick === void 0 ? void 0 : onClick(token.address);
     const tokenPrice = formatTokenPrice(token.amount, token.priceUSD);
-    return (_jsx(ListItem, Object.assign({ disablePadding: true, style: {
+    return (_jsxs(ListItem, Object.assign({ disablePadding: true, style: {
             height: `${size}px`,
             transform: `translateY(${start}px)`,
-        } }, { children: _jsxs(ListItemButton, Object.assign({ onClick: handleClick, dense: true, disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol }, { children: token.symbol[0] })) }), _jsx(ListItemText, { primary: token.symbol, secondary: token.name }), showBalance ? (isBalanceLoading ? (_jsx(TokenAmountSkeleton, {})) : (_jsxs(Box, Object.assign({ sx: { textAlign: 'right' } }, { children: [Number(token.amount) ? (_jsx(Typography, Object.assign({ variant: "body1", noWrap: true }, { children: token.amount }))) : null, tokenPrice ? (_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", "data-price": token.priceUSD }, { children: t(`swap.currency`, {
-                                value: tokenPrice,
-                            }) }))) : null] })))) : null] })) })));
+        } }, { children: [startAdornment, _jsxs(ListItemButton, Object.assign({ onClick: handleClick, dense: true, disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol }, { children: token.symbol[0] })) }), _jsx(ListItemText, { primary: token.symbol, secondary: token.name }), showBalance ? (isBalanceLoading ? (_jsx(TokenAmountSkeleton, {})) : (_jsxs(Box, Object.assign({ sx: { textAlign: 'right' } }, { children: [Number(token.amount) ? (_jsx(Typography, Object.assign({ variant: "body1", noWrap: true }, { children: token.amount }))) : null, tokenPrice ? (_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", "data-price": token.priceUSD }, { children: t(`swap.currency`, {
+                                    value: tokenPrice,
+                                }) }))) : null] })))) : null] })), endAdornment] })));
 });
-export const TokenListItemSkeleton = ({ size, start, }) => {
-    return (_jsxs(ListItem, Object.assign({ secondaryAction: _jsx(TokenAmountSkeleton, {}), disablePadding: true, style: {
-            height: `${size}px`,
-            transform: `translateY(${start}px)`,
-        } }, { children: [_jsx(ListItemAvatar, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32, sx: { marginLeft: 2, marginRight: 2 } }) }), _jsx(ListItemText, { primary: _jsx(Skeleton, { variant: "text", width: 48, height: 20 }), secondary: _jsx(Skeleton, { variant: "text", width: 96, height: 20 }) })] })));
+export const TokenListItemSkeleton = () => {
+    return (_jsxs(ListItem, Object.assign({ secondaryAction: _jsx(TokenAmountSkeleton, {}), disablePadding: true, sx: { position: 'relative', flexDirection: 'row', alignItems: 'center' } }, { children: [_jsx(ListItemAvatar, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32, sx: { marginLeft: 2, marginRight: 2 } }) }), _jsx(ListItemText, { primary: _jsx(Skeleton, { variant: "text", width: 48, height: 20 }), secondary: _jsx(Skeleton, { variant: "text", width: 96, height: 20 }) })] })));
 };
 export const TokenAmountSkeleton = () => {
     return (_jsxs(Box, Object.assign({ sx: {

package/components/TokenList/TokenNotFound.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const TokenNotFound: React.FC;

package/components/TokenList/TokenNotFound.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SearchOff as SearchOffIcon } from '@mui/icons-material';
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+export const TokenNotFound = () => {
+    const { t } = useTranslation();
+    return (_jsxs(Box, Object.assign({ sx: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: 'column',
+            flex: 1,
+            padding: 3,
+        } }, { children: [_jsx(Typography, Object.assign({ fontSize: 48, lineHeight: 1 }, { children: _jsx(SearchOffIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2 }, { children: t('swap.couldntFindTokens') }))] })));
+};

package/components/TokenList/VirtualizedTokenList.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { VirtualizedTokenListProps } from './types';
+export declare const VirtualizedTokenList: FC<VirtualizedTokenListProps>;

package/components/TokenList/VirtualizedTokenList.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { List, Typography } from '@mui/material';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { TokenListItem, TokenListItemSkeleton } from './TokenListItem';
+export const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef, chainId, isLoading, isBalanceLoading, showBalance, showFeatured, onClick, }) => {
+    const { t } = useTranslation();
+    const hasFeaturedTokens = !!featuredTokensLength && showFeatured;
+    const featuredTokensLastIndex = (featuredTokensLength !== null && featuredTokensLength !== void 0 ? featuredTokensLength : 0) - 1;
+    const tokensLastIndex = tokens.length - 1;
+    const { getVirtualItems, getTotalSize, scrollToIndex } = useVirtualizer({
+        count: tokens.length,
+        getScrollElement: () => scrollElementRef.current,
+        overscan: 5,
+        paddingEnd: 12,
+        estimateSize: (index) => {
+            var _a, _b;
+            // heigth of TokenListItem
+            let size = 64;
+            if (!hasFeaturedTokens) {
+                return size;
+            }
+            if (index === 0 && ((_a = tokens[index]) === null || _a === void 0 ? void 0 : _a.featured)) {
+                // height of startAdornment
+                size += 24;
+            }
+            if (index === featuredTokensLastIndex &&
+                index !== tokensLastIndex &&
+                ((_b = tokens[index]) === null || _b === void 0 ? void 0 : _b.featured)) {
+                // height of endAdornment
+                size += 32;
+            }
+            return size;
+        },
+        getItemKey: (index) => { var _a; return (_a = tokens[index].address) !== null && _a !== void 0 ? _a : index; },
+    });
+    useEffect(() => {
+        scrollToIndex(0, { align: 'start', smoothScroll: false });
+    }, [scrollToIndex, chainId]);
+    if (isLoading) {
+        return (_jsx(List, Object.assign({ disablePadding: true }, { children: Array.from({ length: 3 }).map((_, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            _jsx(TokenListItemSkeleton, {}, index))) })));
+    }
+    return (_jsx(List, Object.assign({ style: { height: getTotalSize() }, disablePadding: true }, { children: getVirtualItems().map((item) => {
+            const token = tokens[item.index];
+            return (_jsx(TokenListItem, { onClick: onClick, size: item.size, start: item.start, token: token, isBalanceLoading: isBalanceLoading, showBalance: showBalance, startAdornment: hasFeaturedTokens && token.featured && item.index === 0 ? (_jsx(Typography, Object.assign({ fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, pb: 1.25 }, { children: t('swap.featuredTokens') }))) : null, endAdornment: hasFeaturedTokens &&
+                    token.featured &&
+                    item.index === featuredTokensLastIndex &&
+                    item.index !== tokensLastIndex ? (_jsx(Typography, Object.assign({ fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, py: 1.25 }, { children: t('swap.otherTokens') }))) : null }, item.key));
+        }) })));
+};

package/components/TokenList/types.d.ts

@@ -1,12 +1,25 @@
 import { TokenAmount } from '@lifi/sdk';
+import { MutableRefObject } from 'react';
 import { SwapFormDirection } from '../../providers/SwapFormProvider';
+import { Token } from '../../types';
 export interface TokenListProps {
     formType: SwapFormDirection;
     height: number;
     onClick?(): void;
 }
+export interface VirtualizedTokenListProps {
+    tokens: Token[];
+    featuredTokensLength?: number;
+    scrollElementRef: MutableRefObject<HTMLElement | null>;
+    isLoading: boolean;
+    isBalanceLoading: boolean;
+    chainId: number;
+    showBalance?: boolean;
+    showFeatured?: boolean;
+    onClick(tokenAddress: string): void;
+}
 export interface TokenListItemBaseProps {
-    onClick?(token: string): void;
+    onClick?(tokenAddress: string): void;
     size: number;
     start: number;
 }
@@ -14,4 +27,6 @@ export interface TokenListItemProps extends TokenListItemBaseProps {
     showBalance?: boolean;
     token: TokenAmount;
     isBalanceLoading?: boolean;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
 }

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/version.d.ts

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

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.12.1';
+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/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-balance', 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,9 +1,10 @@
-import { TokenAmount } from '@lifi/sdk';
+import { Token } from '../types';
 export declare const useTokenBalances: (selectedChainId: number) => {
-    tokens: import("@lifi/sdk").Token[] | undefined;
-    tokensWithBalance: TokenAmount[] | undefined;
+    tokens: Token[] | undefined;
+    tokensWithBalance: Token[] | undefined;
+    featuredTokens: import("@lifi/types").Token[] | undefined;
     isLoading: boolean;
     isBalanceLoading: boolean;
     isBalanceFetched: boolean;
-    updateBalances: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<TokenAmount[] | undefined, unknown>>;
+    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,20 +7,23 @@ 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 { useFeaturedTokens } from './useFeaturedTokens';
 import { useTokens } from './useTokens';
 const defaultRefetchInterval = 60000;
 const minRefetchInterval = 1000;
 export const useTokenBalances = (selectedChainId) => {
     const { account } = useWallet();
+    const featuredTokens = useFeaturedTokens(selectedChainId);
     const { tokens, isLoading } = useTokens(selectedChainId);
     const [refetchInterval, setRefetchInterval] = useState(defaultRefetchInterval);
-    const isBalanceLoadingEnabled = Boolean(account.address) && Boolean(tokens);
-    const { data: tokensWithBalance, isLoading: isBalanceLoading, isFetched: isBalanceFetched, refetch, } = useQuery(['token-balances', selectedChainId, account.address], ({ queryKey: [, , accountAddress] }) => __awaiter(void 0, void 0, void 0, function* () {
+    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;
         }
@@ -33,20 +36,28 @@ export const useTokenBalances = (selectedChainId) => {
                 : interval * 2);
             return;
         }
-        const formatedTokens = (tokenBalances.length === 0 ? tokens : tokenBalances).map((token) => {
+        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,
@@ -56,9 +67,10 @@ export const useTokenBalances = (selectedChainId) => {
     return {
         tokens,
         tokensWithBalance,
+        featuredTokens,
         isLoading,
         isBalanceLoading: isBalanceLoading && isBalanceLoadingEnabled,
         isBalanceFetched,
-        updateBalances: refetch,
+        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",

package/i18n/index.d.ts

@@ -53,6 +53,8 @@ export declare const resources: {
                 selectChain: string;
                 selectToken: string;
                 selectChainAndToken: string;
+                featuredTokens: string;
+                otherTokens: string;
                 inProgress: string;
                 couldntFindTokens: string;
                 stepSwap: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.12.1",
+  "version": "1.13.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "sideEffects": false,
   "main": "./index.js",
@@ -44,23 +44,22 @@
     "@lifi/sdk": "^1.1.3",
     "@lifi/wallet-management": "^1.1.3",
     "@mui/icons-material": "^5.8.4",
-    "@mui/lab": "^5.0.0-alpha.93",
-    "@mui/material": "^5.9.3",
-    "@sentry/integrations": "^7.9.0",
-    "@sentry/react": "^7.9.0",
-    "@sentry/tracing": "^7.9.0",
+    "@mui/lab": "^5.0.0-alpha.94",
+    "@mui/material": "^5.10.0",
+    "@sentry/integrations": "^7.10.0",
+    "@sentry/react": "^7.10.0",
+    "@sentry/tracing": "^7.10.0",
     "@tanstack/react-query": "^4.0.10",
+    "@tanstack/react-virtual": "^3.0.0-beta.17",
     "big.js": "^6.2.1",
-    "i18next": "^21.8.16",
+    "i18next": "^21.9.0",
     "immer": "^9.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.34.0",
     "react-i18next": "^11.18.3",
-    "react-resize-detector": "^7.1.2",
     "react-router-dom": "^6.3.0",
     "react-timer-hook": "^3.0.5",
-    "react-virtual": "^2.10.4",
     "zustand": "^4.0.0"
   },
   "eslintConfig": {

package/pages/SelectTokenPage/ChainSelect.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { SwapFormTypeProps } from '../../providers/SwapFormProvider';
 export declare const ChainSelect: ({ formType }: SwapFormTypeProps) => JSX.Element;

package/pages/SelectTokenPage/ChainSelect.js

@@ -6,20 +6,23 @@ import { useTranslation } from 'react-i18next';
 import { Card, CardTitle } from '../../components/Card';
 import { Select } from '../../components/Select';
 import { useChains } from '../../hooks';
-import { SwapFormKeyHelper, } from '../../providers/SwapFormProvider';
+import { SwapFormKey, SwapFormKeyHelper, } from '../../providers/SwapFormProvider';
 import { useWidgetConfig } from '../../providers/WidgetProvider';
 export const ChainSelect = ({ formType }) => {
     const { t } = useTranslation();
-    const { setValue } = useFormContext();
+    const { setValue, register } = useFormContext();
     const { fromChain, toChain } = useWidgetConfig();
     const { chains, isLoading } = useChains();
+    const chainKey = SwapFormKeyHelper.getChainKey(formType);
     const [chainId] = useWatch({
-        name: [SwapFormKeyHelper.getChainKey(formType)],
+        name: [chainKey],
     });
+    const { onChange, onBlur, name, ref } = register(chainKey);
     const handleChain = (event) => {
-        setValue(SwapFormKeyHelper.getChainKey(formType), event.target.value);
+        onChange(event);
         setValue(SwapFormKeyHelper.getTokenKey(formType), '');
         setValue(SwapFormKeyHelper.getAmountKey(formType), '');
+        setValue(SwapFormKey.TokenSearchFilter, '');
     };
-    return !isLoading ? (_jsxs(Card, { children: [_jsx(CardTitle, { children: t(`swap.selectChain`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ labelId: "label", MenuProps: { elevation: 2 }, defaultValue: formType === 'from' ? fromChain : toChain, value: chainId, onChange: handleChain, IconComponent: KeyboardArrowDownIcon }, { children: chains === null || chains === void 0 ? void 0 : chains.map((chain) => (_jsxs(MenuItem, Object.assign({ value: chain.id }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: chain.logoURI, alt: chain.key }, { children: chain.name[0] })) }), chain.name] }), chain.key))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 98, sx: { borderRadius: 1 } }));
+    return !isLoading ? (_jsxs(Card, { children: [_jsx(CardTitle, { children: t(`swap.selectChain`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ ref: ref, labelId: chainKey, name: name, MenuProps: { elevation: 2 }, defaultValue: formType === 'from' ? fromChain : toChain, value: chainId, onChange: handleChain, onBlur: onBlur, IconComponent: KeyboardArrowDownIcon }, { children: chains === null || chains === void 0 ? void 0 : chains.map((chain) => (_jsxs(MenuItem, Object.assign({ value: chain.id }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: chain.logoURI, alt: chain.key }, { children: chain.name[0] })) }), chain.name] }), chain.key))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 98, sx: { borderRadius: 1 } }));
 };

package/pages/SelectTokenPage/SearchTokenInput.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SearchTokenInput: () => JSX.Element;

package/pages/SelectTokenPage/SearchTokenInput.js

@@ -11,7 +11,7 @@ export const SearchTokenInput = () => {
     const { t } = useTranslation();
     const { register, setValue } = useFormContext();
     useEffect(() => () => {
-        setValue(SwapFormKey.SearchTokensFilter, '');
+        setValue(SwapFormKey.TokenSearchFilter, '');
     }, [setValue]);
-    return (_jsx(Card, { children: _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Input, { size: "small", placeholder: t(`swap.tokenSearch`), defaultValue: "", endAdornment: _jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(SearchIcon, {}) })), inputProps: Object.assign({ inputMode: 'search' }, register(SwapFormKey.SearchTokensFilter)), autoComplete: "off" }) })) }));
+    return (_jsx(Card, { children: _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Input, { size: "small", placeholder: t(`swap.tokenSearch`), defaultValue: "", endAdornment: _jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(SearchIcon, {}) })), inputProps: Object.assign({ inputMode: 'search' }, register(SwapFormKey.TokenSearchFilter)), autoComplete: "off" }) })) }));
 };

package/pages/SelectWalletPage/SelectWalletPage.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SelectWalletPage: () => JSX.Element;

package/pages/SettingsPage/AdvancedPreferences.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const AdvancedPreferences: () => JSX.Element;

package/pages/SettingsPage/GasPriceSelect.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const GasPriceSelect: () => JSX.Element;

package/pages/SettingsPage/SettingsPage.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SettingsPage: () => JSX.Element;

package/pages/SettingsPage/SlippageInput.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SlippageInput: () => JSX.Element;

package/pages/SwapPage/StatusBottomSheet.js

@@ -17,10 +17,10 @@ export const StatusBottomSheet = ({ status, route, }) => {
     const navigate = useNavigate();
     const ref = useRef(null);
     const { getChainById } = useChains();
-    const { token, refetchBalance } = useTokenBalance(route.toChainId, route.toToken.address);
+    const { token, refetch: refetchBalance } = useTokenBalance(route.toChainId, route.toToken.address);
     const { setValue } = useFormContext();
     const clearFromAmount = () => {
-        refetchBalance(route.fromChainId, route.fromToken.address);
+        refetchBalance();
         setValue(SwapFormKey.FromAmount, '');
     };
     const handleDone = () => {

package/providers/SwapFormProvider/SwapFormProvider.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const formDefaultValues: {
     fromAmount: string;
-    searchTokensFilter: string;
+    tokenSearchFilter: string;
 };
 export declare const SwapFormProvider: React.FC<React.PropsWithChildren<{}>>;

package/providers/SwapFormProvider/SwapFormProvider.js

@@ -1,18 +1,35 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ChainId } from '@lifi/sdk';
+import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
+import { useWallet } from '../WalletProvider';
 import { useWidgetConfig } from '../WidgetProvider';
 import { SwapFormKey } from './types';
 export const formDefaultValues = {
     [SwapFormKey.FromAmount]: '',
-    [SwapFormKey.SearchTokensFilter]: '',
+    [SwapFormKey.TokenSearchFilter]: '',
 };
 export const SwapFormProvider = ({ children, }) => {
-    var _a;
+    const { account } = useWallet();
     const { fromChain, fromToken, fromAmount, toChain, toToken } = useWidgetConfig();
     const methods = useForm({
-        defaultValues: Object.assign(Object.assign({}, formDefaultValues), { fromChain,
-            fromToken, fromAmount: (_a = fromAmount === null || fromAmount === void 0 ? void 0 : fromAmount.toPrecision()) !== null && _a !== void 0 ? _a : formDefaultValues.fromAmount, toChain,
-            toToken }),
+        defaultValues: Object.assign(Object.assign({}, formDefaultValues), { fromChain: fromChain !== null && fromChain !== void 0 ? fromChain : ChainId.ETH, fromToken, fromAmount: (typeof fromAmount === 'number'
+                ? fromAmount === null || fromAmount === void 0 ? void 0 : fromAmount.toPrecision()
+                : fromAmount) || formDefaultValues.fromAmount, toChain: toChain !== null && toChain !== void 0 ? toChain : ChainId.ETH, toToken }),
     });
+    // Set wallet chain as default if no fromChain is provided by config and if it wasn't changed during widget usage
+    useEffect(() => {
+        const { isDirty, isTouched } = methods.getFieldState(SwapFormKey.FromChain, methods.formState);
+        if (account.isActive &&
+            account.chainId &&
+            !fromChain &&
+            !isDirty &&
+            !isTouched) {
+            methods.setValue(SwapFormKey.FromChain, account.chainId, {
+                shouldDirty: false,
+                shouldTouch: false,
+            });
+        }
+    }, [account.chainId, account.isActive, fromChain, methods]);
     return _jsx(FormProvider, Object.assign({}, methods, { children: children }));
 };

package/providers/SwapFormProvider/types.d.ts

@@ -2,7 +2,7 @@ export declare enum SwapFormKey {
     FromAmount = "fromAmount",
     FromChain = "fromChain",
     FromToken = "fromToken",
-    SearchTokensFilter = "searchTokensFilter",
+    TokenSearchFilter = "tokenSearchFilter",
     ToChain = "toChain",
     ToToken = "toToken"
 }
@@ -10,7 +10,7 @@ export declare type SwapFormValues = {
     [SwapFormKey.FromAmount]: string;
     [SwapFormKey.FromChain]: number;
     [SwapFormKey.FromToken]: string;
-    [SwapFormKey.SearchTokensFilter]: string;
+    [SwapFormKey.TokenSearchFilter]: string;
     [SwapFormKey.ToChain]: number;
     [SwapFormKey.ToToken]: string;
 };
@@ -19,7 +19,6 @@ export declare const SwapFormKeyHelper: {
     getChainKey: (formType: SwapFormDirection) => 'fromChain' | 'toChain';
     getTokenKey: (formType: SwapFormDirection) => 'fromToken' | 'toToken';
     getAmountKey: (formType: SwapFormDirection) => 'fromAmount' | 'toAmount';
-    getSearchTokensFilterKey: (formType: SwapFormDirection) => string;
 };
 export interface SwapFormTypeProps {
     formType: SwapFormDirection;

package/providers/SwapFormProvider/types.js

@@ -3,7 +3,7 @@ export var SwapFormKey;
     SwapFormKey["FromAmount"] = "fromAmount";
     SwapFormKey["FromChain"] = "fromChain";
     SwapFormKey["FromToken"] = "fromToken";
-    SwapFormKey["SearchTokensFilter"] = "searchTokensFilter";
+    SwapFormKey["TokenSearchFilter"] = "tokenSearchFilter";
     SwapFormKey["ToChain"] = "toChain";
     SwapFormKey["ToToken"] = "toToken";
 })(SwapFormKey || (SwapFormKey = {}));
@@ -11,5 +11,4 @@ export const SwapFormKeyHelper = {
     getChainKey: (formType) => `${formType}Chain`,
     getTokenKey: (formType) => `${formType}Token`,
     getAmountKey: (formType) => `${formType}Amount`,
-    getSearchTokensFilterKey: (formType) => `${formType}SearchTokensFilter`,
 };

package/providers/WidgetProvider/WidgetProvider.js

@@ -10,10 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ChainId, getChainByKey } from '@lifi/sdk';
+import { getChainByKey } from '@lifi/sdk';
 import { createContext, useContext, useEffect, useMemo } from 'react';
 import { updateLiFiConfig } from '../../config/lifi';
-import { useWallet } from '../WalletProvider';
 const stub = () => {
     throw new Error('You forgot to wrap your component in <WidgetProvider>.');
 };
@@ -23,26 +22,36 @@ const initialContext = {
 const WidgetContext = createContext(initialContext);
 export const useWidgetConfig = () => useContext(WidgetContext);
 export const WidgetProvider = (_a) => {
-    var { children } = _a, _b = _a.config, _c = _b === void 0 ? {} : _b, { fromChain, fromToken, toChain, toToken, integrator } = _c, config = __rest(_c, ["fromChain", "fromToken", "toChain", "toToken", "integrator"]);
-    const { account } = useWallet();
+    var { children } = _a, _b = _a.config, _c = _b === void 0 ? {} : _b, { fromChain, fromToken, toChain, toToken, fromAmount, integrator } = _c, config = __rest(_c, ["fromChain", "fromToken", "toChain", "toToken", "fromAmount", "integrator"]);
     const value = useMemo(() => {
-        var _a;
+        var _a, _b, _c, _d;
         try {
-            return Object.assign(Object.assign({}, config), { fromChain: typeof fromChain === 'number'
-                    ? fromChain
-                    : typeof fromChain === 'string'
-                        ? getChainByKey(fromChain.toLowerCase()).id
-                        : (_a = account.chainId) !== null && _a !== void 0 ? _a : ChainId.ETH, toChain: typeof toChain === 'number'
-                    ? toChain
-                    : typeof toChain === 'string'
-                        ? getChainByKey(toChain.toLowerCase()).id
-                        : ChainId.ETH, fromToken: fromToken === null || fromToken === void 0 ? void 0 : fromToken.toLowerCase(), toToken: toToken === null || toToken === void 0 ? void 0 : toToken.toLowerCase() });
+            const searchParams = Object.fromEntries(new URLSearchParams(window === null || window === void 0 ? void 0 : window.location.search));
+            return Object.assign(Object.assign({}, config), { fromChain: (searchParams.fromChain &&
+                    isNaN(parseInt(searchParams.fromChain, 10))) ||
+                    typeof fromChain === 'string'
+                    ? getChainByKey((_a = (searchParams.fromChain || fromChain)) === null || _a === void 0 ? void 0 : _a.toLowerCase()).id
+                    : (searchParams.fromChain &&
+                        !isNaN(parseInt(searchParams.fromChain, 10))) ||
+                        typeof fromChain === 'number'
+                        ? parseInt(searchParams.fromChain, 10) || fromChain
+                        : undefined, toChain: (searchParams.toChain && isNaN(parseInt(searchParams.toChain, 10))) ||
+                    typeof toChain === 'string'
+                    ? getChainByKey((_b = (searchParams.toChain || toChain)) === null || _b === void 0 ? void 0 : _b.toLowerCase()).id
+                    : (searchParams.toChain &&
+                        !isNaN(parseInt(searchParams.toChain, 10))) ||
+                        typeof toChain === 'number'
+                        ? parseInt(searchParams.toChain, 10) || toChain
+                        : undefined, fromToken: ((_c = searchParams.fromToken) === null || _c === void 0 ? void 0 : _c.toLowerCase()) || (fromToken === null || fromToken === void 0 ? void 0 : fromToken.toLowerCase()), toToken: ((_d = searchParams.toToken) === null || _d === void 0 ? void 0 : _d.toLowerCase()) || (toToken === null || toToken === void 0 ? void 0 : toToken.toLowerCase()), fromAmount: typeof searchParams.fromAmount === 'string' &&
+                    !isNaN(parseFloat(searchParams.fromAmount))
+                    ? searchParams.fromAmount
+                    : fromAmount });
         }
         catch (e) {
             console.warn(e);
             return config;
         }
-    }, [account.chainId, config, fromChain, fromToken, toChain, toToken]);
+    }, [config, fromAmount, fromChain, fromToken, toChain, toToken]);
     useEffect(() => {
         updateLiFiConfig({
             defaultRouteOptions: {

package/types/index.d.ts

@@ -1 +1,2 @@
+export * from './token';
 export * from './widget';

package/types/index.js

@@ -1 +1,2 @@
+export * from './token';
 export * from './widget';

package/types/token.d.ts

@@ -0,0 +1,4 @@
+import { TokenAmount } from '@lifi/sdk';
+export interface Token extends TokenAmount {
+    featured?: boolean;
+}

package/types/token.js

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

package/types/widget.d.ts

@@ -18,8 +18,7 @@ export interface WidgetWalletManagement {
     signer?: Signer;
 }
 interface WidgetConfigBase {
-    fromAmount?: number;
-    disabledChains?: number[];
+    fromAmount?: number | string;
     containerStyle?: CSSProperties;
     theme?: ThemeConfig;
     appearance?: Appearance;
@@ -27,6 +26,8 @@ interface WidgetConfigBase {
     disableTelemetry?: boolean;
     walletManagement?: WidgetWalletManagement;
     integrator?: string;
+    disabledChains?: number[];
+    featuredTokens?: Token[];
 }
 declare type WidgetFromTokenConfig = {
     fromChain: `${ChainKey}` | number;

package/components/TokenList/utils.d.ts

@@ -1,15 +0,0 @@
-import { TokenAmount } from '@lifi/sdk';
-export declare const tokenAmountMock: TokenAmount;
-export declare const skeletonKey = "skeleton";
-export declare const createTokenAmountSkeletons: () => {
-    address: string;
-    name: string;
-    amount: string;
-    blockNumber?: number | undefined;
-    symbol: string;
-    decimals: number;
-    chainId: number;
-    coinKey?: import("@lifi/sdk").CoinKey | undefined;
-    priceUSD?: string | undefined;
-    logoURI?: string | undefined;
-}[];

package/components/TokenList/utils.js

@@ -1,10 +0,0 @@
-export const tokenAmountMock = {
-    address: '-1x0',
-    amount: '',
-    chainId: -1,
-    decimals: 0,
-    name: '',
-    symbol: '',
-};
-export const skeletonKey = 'skeleton';
-export const createTokenAmountSkeletons = () => Array.from({ length: 3 }).map((_, index) => (Object.assign(Object.assign({}, tokenAmountMock), { address: `${tokenAmountMock.address}-${index}`, name: `${skeletonKey}-${index}` })));