@lifi/widget 1.11.4 → 1.13.0

package/AppDrawer.style.d.ts

@@ -2,7 +2,7 @@
 export declare const DrawerButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "info" | "warning" | "error" | "primary" | "secondary" | undefined;
+    color?: "inherit" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

package/AppDrawer.style.js

@@ -39,8 +39,12 @@ export const DrawerButton = styled(Button, {
         ? getButtonTransformWidth(drawerProps === null || drawerProps === void 0 ? void 0 : drawerProps.width, drawerProps === null || drawerProps === void 0 ? void 0 : drawerProps.maxWidth)
         : '0px'} * -1), 0, 0)`,
     transition: theme.transitions.create(['transform'], {
-        duration: theme.transitions.duration.enteringScreen,
-        easing: theme.transitions.easing.easeOut,
+        duration: open
+            ? theme.transitions.duration.enteringScreen
+            : theme.transitions.duration.leavingScreen,
+        easing: open
+            ? theme.transitions.easing.easeOut
+            : theme.transitions.easing.sharp,
     }),
     zIndex: 1500,
     '&:hover': {

package/AppProvider.d.ts

@@ -5,3 +5,7 @@ export interface AppProps {
 }
 export declare const AppProvider: React.FC<PropsWithChildren<AppProps>>;
 export declare const AppRouter: React.FC<PropsWithChildren<{}>>;
+export declare const TelemetryProvider: React.FC<{
+    children: React.ReactElement<any, any> | null;
+    disabled?: boolean;
+}>;

package/AppProvider.js

@@ -12,11 +12,14 @@ import { WalletProvider } from './providers/WalletProvider';
 import { WidgetProvider } from './providers/WidgetProvider';
 const QueryProvider = QueryClientProvider;
 export const AppProvider = ({ children, config, }) => {
-    useTelemetry(config === null || config === void 0 ? void 0 : config.disableTelemetry);
-    return (_jsx(WidgetProvider, Object.assign({ config: config }, { children: _jsx(ThemeProvider, { children: _jsx(QueryProvider, Object.assign({ client: queryClient }, { children: _jsx(WalletProvider, { children: _jsx(SwapFormProvider, { children: _jsx(AppRouter, { children: children }) }) }) })) }) })));
+    return (_jsx(QueryProvider, Object.assign({ client: queryClient }, { children: _jsx(TelemetryProvider, Object.assign({ disabled: config === null || config === void 0 ? void 0 : config.disableTelemetry }, { children: _jsx(WalletProvider, Object.assign({ walletManagement: config === null || config === void 0 ? void 0 : config.walletManagement }, { children: _jsx(WidgetProvider, Object.assign({ config: config }, { children: _jsx(ThemeProvider, { children: _jsx(SwapFormProvider, { children: _jsx(AppRouter, { children: children }) }) }) })) })) })) })));
 };
 export const AppRouter = ({ children }) => {
     const inRouterContext = useInRouterContext();
     const Router = inRouterContext ? Fragment : MemoryRouter;
     return _jsx(Router, { children: children });
 };
+export const TelemetryProvider = ({ children, disabled }) => {
+    useTelemetry(disabled);
+    return children;
+};

package/components/Header/Header.js

@@ -9,6 +9,7 @@ const stickyHeaderRoutes = [
     navigationRoutes.selectWallet,
     navigationRoutes.settings,
     navigationRoutes.swapRoutes,
+    navigationRoutes.swapExecution,
     navigationRoutes.swapHistory,
     navigationRoutes.swapDetails,
 ];

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/NotFound.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Block as BlockIcon } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 export const NotFound = () => {
@@ -10,5 +11,5 @@ export const NotFound = () => {
             flexDirection: 'column',
             flex: 1,
             padding: 3,
-        } }, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: t('tooltip.notFound.title') })), _jsx(Typography, { children: t('tooltip.notFound.text') })] })));
+        } }, { children: [_jsx(Typography, Object.assign({ fontSize: 48 }, { children: _jsx(BlockIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('tooltip.notFound.title') })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('tooltip.notFound.text') }))] })));
 };

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

@@ -2,7 +2,7 @@
 export declare const IconButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "success" | "info" | "warning" | "error" | "primary" | "secondary" | undefined;
+    color?: "inherit" | "default" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;

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/Step/Step.js

@@ -13,7 +13,10 @@ export const Step = ({ step, fromToken, toToken }) => {
     const getCardTitle = () => {
         switch (step.type) {
             case 'lifi':
-                return t('swap.stepSwapAndBridge');
+                if (step.includedSteps.some((step) => step.type === 'cross')) {
+                    return t('swap.stepSwapAndBridge');
+                }
+                return t('swap.stepSwap');
             case 'swap':
                 return t('swap.stepSwap');
             case 'cross':

package/components/Step/StepProcess.style.d.ts

@@ -2,7 +2,7 @@
 export declare const LinkButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "success" | "info" | "warning" | "error" | "primary" | "secondary" | undefined;
+    color?: "inherit" | "default" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;

package/components/StepActions/StepActions.js

@@ -21,7 +21,9 @@ import { StepAvatar, StepConnector, StepContent, StepLabel, } from './StepAction
 export const StepActions = (_a) => {
     var _b;
     var { step, dense } = _a, other = __rest(_a, ["step", "dense"]);
-    const StepDetailsLabel = step.type === 'cross' || step.type === 'lifi'
+    const StepDetailsLabel = step.type === 'cross' ||
+        (step.type === 'lifi' &&
+            step.includedSteps.some((step) => step.type === 'cross'))
         ? CrossStepDetailsLabel
         : SwapStepDetailsLabel;
     const isFullView = !dense && ((_b = step.includedSteps) === null || _b === void 0 ? void 0 : _b.length) > 1;
@@ -33,7 +35,7 @@ export const StepActions = (_a) => {
                 boxSizing: 'content-box',
             } }, { children: tool.toolDetails.name[0] }))) : null;
     };
-    return (_jsxs(Box, Object.assign({}, other, { children: [_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mb: isFullView ? 1.5 : 0 }, { children: [_jsx(StepAvatar, Object.assign({ variant: step.type === 'lifi' ? 'square' : 'circular', src: step.type !== 'lifi' ? step.toolDetails.logoURI : undefined, alt: step.toolDetails.name }, { children: step.type === 'lifi' ? _jsx(LiFiToolLogo, {}) : step.toolDetails.name[0] })), _jsx(Typography, Object.assign({ ml: 2, fontSize: 18, fontWeight: "500", textTransform: "capitalize" }, { children: step.type === 'lifi'
+    return (_jsxs(Box, Object.assign({}, other, { children: [_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mb: isFullView ? 1.5 : 0 }, { children: [_jsx(StepAvatar, Object.assign({ variant: "circular", src: step.type !== 'lifi' ? step.toolDetails.logoURI : undefined, alt: step.toolDetails.name }, { children: step.type === 'lifi' ? _jsx(LiFiToolLogo, {}) : step.toolDetails.name[0] })), _jsx(Typography, Object.assign({ ml: 2, fontSize: 18, fontWeight: "500", textTransform: "capitalize" }, { children: step.type === 'lifi'
                             ? 'LI.FI Smart Contract'
                             : step.toolDetails.name }))] })), isFullView ? (_jsx(Stepper, Object.assign({ orientation: "vertical", connector: _jsx(StepConnector, {}), activeStep: -1 }, { children: step.includedSteps.map((step) => (_jsxs(MuiStep, Object.assign({ expanded: true }, { children: [_jsx(StepLabel, Object.assign({ StepIconComponent: StepIconComponent }, { children: step.type === 'cross' || step.type === 'lifi' ? (_jsx(CrossStepDetailsLabel, { step: step })) : (_jsx(SwapStepDetailsLabel, { step: step })) })), _jsx(StepContent, { children: _jsx(StepDetailsContent, { step: step }) })] }), step.id))) }))) : (_jsxs(Box, Object.assign({ ml: 6 }, { children: [_jsx(StepDetailsLabel, { step: step }), _jsx(StepDetailsContent, { step: step })] })))] })));
 };

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/SwapButton/SwapButton.js

@@ -29,7 +29,10 @@ export const SwapButton = ({ onClick, currentRoute, text, loading, }) => {
     const [chainId] = useWatch({
         name: [SwapFormKeyHelper.getChainKey('from')],
     });
-    const isCurrentChainMatch = ((_a = getChainById(chainId || ChainId.ETH)) === null || _a === void 0 ? void 0 : _a.id) === account.chainId;
+    // Allow switching chain only if execution is not started
+    const switchChainAllowed = ((_a = getChainById(chainId || ChainId.ETH)) === null || _a === void 0 ? void 0 : _a.id) !== account.chainId &&
+        currentRoute &&
+        !currentRoute.steps.some((step) => step.execution);
     const handleSwapButtonClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive) {
             if (config.walletManagement) {
@@ -39,7 +42,7 @@ export const SwapButton = ({ onClick, currentRoute, text, loading, }) => {
                 navigate(navigationRoutes.selectWallet);
             }
         }
-        else if (!isCurrentChainMatch) {
+        else if (switchChainAllowed) {
             yield switchChain(chainId);
             // check that the current route exists in the up to date route list
         }
@@ -49,7 +52,7 @@ export const SwapButton = ({ onClick, currentRoute, text, loading, }) => {
     });
     const getButtonText = () => {
         if (account.isActive) {
-            if (!isCurrentChainMatch) {
+            if (switchChainAllowed) {
                 return t(`button.switchChain`);
             }
             if (!currentRoute) {
@@ -63,5 +66,5 @@ export const SwapButton = ({ onClick, currentRoute, text, loading, }) => {
         // loading={isLoading || isFetching}
         disabled: (insufficientFunds || !!insufficientGas.length || loading) &&
             currentRoute &&
-            isCurrentChainMatch, fullWidth: true }, { children: getButtonText() })));
+            !switchChainAllowed, fullWidth: true }, { children: getButtonText() })));
 };

package/components/SwapButton/SwapButton.style.d.ts

@@ -17,7 +17,7 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
 } & Omit<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "info" | "warning" | "error" | "primary" | "secondary" | undefined;
+    color?: "inherit" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

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

@@ -4,7 +4,7 @@ export declare const minInputFontSize = 14;
 export declare const FormControl: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").FormControlClasses> | undefined;
-    color?: "success" | "info" | "warning" | "error" | "primary" | "secondary" | undefined;
+    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
     disabled?: boolean | undefined;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;

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/SwapInput/SwapInputAdornment.style.d.ts

@@ -2,7 +2,7 @@
 export declare const Button: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "info" | "warning" | "error" | "primary" | "secondary" | undefined;
+    color?: "inherit" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

package/components/SwapRouteCard/SwapRouteCard.style.js

@@ -1,5 +1,6 @@
 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 }) => ({
@@ -11,7 +12,9 @@ export const Label = styled(Typography, {
             ? theme.palette.grey[500]
             : theme.palette.grey[600],
     borderRadius: theme.shape.borderRadiusSecondary,
-    color: active ? theme.palette.common.white : theme.palette.text.secondary,
+    color: active
+        ? getContrastTextColor(theme, theme.palette.primary.main)
+        : theme.palette.text.secondary,
     padding: theme.spacing(0.75),
     fontSize: 12,
     lineHeight: 1,

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,48 +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, isLoading, isBalanceLoading } = useTokenBalances(selectedChainId);
-    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), '');
@@ -58,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.d.ts

@@ -17,7 +17,7 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, "className" | "style" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "dense" | "selected" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ListItem: import("@emotion/styled").StyledComponent<{
     button?: false | undefined;
 } & import("@mui/material").ListItemBaseProps & {
@@ -29,4 +29,4 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
     } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "components" | "componentsProps" | "selected" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -1,3 +1,3 @@
 import LIFI, { ConfigUpdate } from '@lifi/sdk';
 export declare const LiFi: LIFI;
-export declare const updateLiFiConfig: (configUpdate?: ConfigUpdate) => void;
+export declare const updateLiFiConfig: (configUpdate: ConfigUpdate) => void;