@lifi/widget 1.20.3 → 1.22.0

package/components/SwapRouteCard/SwapRouteCard.js

@@ -14,6 +14,7 @@ import { AccessTime as AccessTimeIcon, EvStationOutlined as EvStationIcon, Expan
 import { Box, Collapse, Tooltip, Typography } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useWidgetConfig } from '../../providers';
 import { Card } from '../Card';
 import { StepActions } from '../StepActions';
 import { Token } from '../Token';
@@ -23,6 +24,7 @@ export const SwapRouteCard = (_a) => {
     var _b;
     var { route, active, variant = 'default', expanded } = _a, other = __rest(_a, ["route", "active", "variant", "expanded"]);
     const { t } = useTranslation();
+    const { variant: widgetVariant, useRecommendedRoute } = useWidgetConfig();
     const [cardExpanded, setCardExpanded] = useState(variant === 'default' || expanded);
     const alternativeTag = t(`swap.tags.ALTERNATIVE`);
     const label = ((_b = route.tags) === null || _b === void 0 ? void 0 : _b.length)
@@ -32,7 +34,7 @@ export const SwapRouteCard = (_a) => {
         e.stopPropagation();
         setCardExpanded((expanded) => !expanded);
     };
-    return (_jsxs(Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [_jsx(Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route })) : null] })), _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'stretched' ? route.steps[0] : undefined }), variant === 'stretched' && !expanded ? (_jsx(IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }))) : null] })), _jsx(Collapse, Object.assign({ timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true }, { children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
+    return (_jsxs(Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? (_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [_jsx(Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route })) : null] }))) : null, _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'stretched' ? route.steps[0] : undefined }), variant === 'stretched' && !expanded ? (_jsx(IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }))) : null] })), _jsx(Collapse, Object.assign({ timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true }, { children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
 };
 export const SwapRouteCardEssentials = ({ route, dense }) => {
     var _a;
@@ -44,8 +46,8 @@ export const SwapRouteCardEssentials = ({ route, dense }) => {
     const gasCosts = getGasCostsBreakdown(route);
     return (_jsxs(Box, Object.assign({ display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0 }, { children: [_jsx(Tooltip, Object.assign({ title: _jsxs(Box, Object.assign({ component: "span" }, { children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas) => {
                             var _a;
-                            return (_jsxs(Typography, Object.assign({ fontSize: 11 }, { children: [(_a = gas.amount) === null || _a === void 0 ? void 0 : _a.toFixed(6), " ", gas.token.symbol, " (", t(`swap.currency`, { value: gas.amountUSD }), ")"] }), `${gas.token.address}${gas.token.symbol}`));
-                        })] })), placement: "top", enterDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(EvStationIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t(`swap.currency`, { value: gasCostUSD }) }))] })) })), _jsx(Tooltip, Object.assign({ title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(AccessTimeIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t('swap.estimatedTime', {
+                            return (_jsxs(Typography, Object.assign({ fontSize: 11 }, { children: [(_a = gas.amount) === null || _a === void 0 ? void 0 : _a.toFixed(6), " ", gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }), `${gas.token.address}${gas.token.symbol}`));
+                        })] })), placement: "top", enterDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(EvStationIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t(`format.currency`, { value: gasCostUSD }) }))] })) })), _jsx(Tooltip, Object.assign({ title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(AccessTimeIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t('swap.estimatedTime', {
                                 value: executionTimeMinutes,
                             }) }))] })) })), !dense ? (_jsx(Tooltip, Object.assign({ title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(LayersIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: route.steps.length }))] })) }))) : null] })));
 };

package/components/SwapRouteCard/SwapRouteCard.style.d.ts

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

package/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -11,8 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Skeleton } from '@mui/material';
+import { useWidgetConfig } from '../../providers';
 import { Card } from '../Card';
 export const SwapRouteCardSkeleton = (_a) => {
     var { variant } = _a, other = __rest(_a, ["variant"]);
-    return (_jsxs(Card, Object.assign({ dense: variant === 'dense', indented: true }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Skeleton, { variant: "rectangular", width: 118, height: 24, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? (_jsxs(Box, Object.assign({ display: "flex" }, { children: [_jsx(Skeleton, { variant: "text", width: 52, height: 24, sx: { marginRight: 2 } }), _jsx(Skeleton, { variant: "text", width: 44, height: 24, sx: { marginRight: 2 } }), _jsx(Skeleton, { variant: "text", width: 32, height: 24 })] }))) : null] })), _jsxs(Box, Object.assign({ mt: 2 }, { children: [_jsxs(Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [_jsx(Box, Object.assign({ mr: 2 }, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }) })), _jsx(Skeleton, { variant: "text", width: 96, height: 32 })] })), _jsxs(Box, Object.assign({ ml: 6, display: "flex", alignItems: "center" }, { children: [_jsx(Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? (_jsx(Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })) : null] }))] })), variant !== 'stretched' ? (_jsxs(Box, Object.assign({ mt: 2, display: "flex", justifyContent: "space-between" }, { children: [_jsx(Skeleton, { variant: "text", width: 48, height: 24 }), _jsx(Skeleton, { variant: "text", width: 48, height: 24 })] }))) : null] })));
+    const { variant: widgetVariant, useRecommendedRoute } = useWidgetConfig();
+    return (_jsxs(Card, Object.assign({ dense: variant === 'dense', indented: true }, other, { children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? (_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [_jsx(Skeleton, { variant: "rectangular", width: 118, height: 24, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? (_jsxs(Box, Object.assign({ display: "flex" }, { children: [_jsx(Skeleton, { variant: "text", width: 52, height: 24, sx: { marginRight: 2 } }), _jsx(Skeleton, { variant: "text", width: 44, height: 24, sx: { marginRight: 2 } }), _jsx(Skeleton, { variant: "text", width: 32, height: 24 })] }))) : null] }))) : null, _jsxs(Box, { children: [_jsxs(Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [_jsx(Box, Object.assign({ mr: 2 }, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }) })), _jsx(Skeleton, { variant: "text", width: 96, height: 32 })] })), _jsxs(Box, Object.assign({ ml: 6, display: "flex", alignItems: "center" }, { children: [_jsx(Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? (_jsx(Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })) : null] }))] }), variant !== 'stretched' ? (_jsxs(Box, Object.assign({ mt: 2, display: "flex", justifyContent: "space-between" }, { children: [_jsx(Skeleton, { variant: "text", width: 48, height: 24 }), _jsx(Skeleton, { variant: "text", width: 48, height: 24 })] }))) : null] })));
 };

package/components/SwapRoutes/SwapRoutes.js

@@ -8,11 +8,13 @@ import { Card, CardTitle } from '../../components/Card';
 import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate';
 import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../../components/SwapRouteCard';
 import { useSwapRoutes } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
 import { Stack } from './SwapRoutes.style';
 import { useSetRecommendedRoute } from './useSetRecommendedRoute';
 export const SwapRoutes = (props) => {
     const { t } = useTranslation();
+    const { variant, useRecommendedRoute } = useWidgetConfig();
     const navigate = useNavigate();
     const { isValid, isValidating } = useFormState();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
@@ -25,13 +27,16 @@ export const SwapRoutes = (props) => {
         navigate(navigationRoutes.swapRoutes);
     };
     const routeNotFound = !currentRoute && !isLoading && !isFetching;
+    const onlyRecommendedRoute = variant === 'refuel' || useRecommendedRoute;
     return (_jsxs(Card, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.routes') }), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
                     position: 'absolute',
                     top: 8,
                     right: 8,
-                } }), _jsxs(Box, Object.assign({ sx: { display: 'flex' } }, { children: [_jsx(Stack, Object.assign({ direction: "row", spacing: 2, my: 2, ml: 2, mr: routeNotFound ? 2 : 1, sx: {
-                            borderRightWidth: !routeNotFound && (isFetching || (routes && routes.length > 1))
+                } }), _jsxs(Box, Object.assign({ sx: { display: 'flex' } }, { children: [_jsx(Stack, Object.assign({ direction: "row", spacing: 2, my: 2, ml: 2, mr: onlyRecommendedRoute || routeNotFound ? 2 : 1, sx: {
+                            borderRightWidth: !onlyRecommendedRoute &&
+                                !routeNotFound &&
+                                (isFetching || (routes && routes.length > 1))
                                 ? 1
                                 : 0,
-                        } }, { children: isLoading || isFetching ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" }), _jsx(SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })] })) : !currentRoute ? (_jsx(SwapRouteNotFoundCard, {})) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense", pointerEvents: "none" })) : null] })) })), _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? (_jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", disabled: isValidating || !isValid }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })));
+                        } }, { children: isLoading || isFetching ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: !onlyRecommendedRoute ? '80%' : '100%', variant: "dense" }), !onlyRecommendedRoute ? (_jsx(SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })) : null] })) : !currentRoute ? (_jsx(SwapRouteNotFoundCard, {})) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: !onlyRecommendedRoute && routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), !onlyRecommendedRoute && routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense", pointerEvents: "none" })) : null] })) })), _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !onlyRecommendedRoute && !routeNotFound ? (_jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", disabled: isValidating || !isValid }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })));
 };

package/components/SwapRoutes/SwapRoutesExpanded.d.ts

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

package/components/Token/Token.js

@@ -12,22 +12,23 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useChains } from '../../hooks';
+import { useChain } from '../../hooks';
 import { formatTokenAmount } from '../../utils';
 import { SmallAvatar } from '../SmallAvatar';
 import { TextFitter } from '../TextFitter';
 import { TokenAvatar } from '../TokenAvatar';
 import { TextSecondary, TextSecondaryContainer } from './Token.style';
 export const Token = (_a) => {
-    var _b;
     var { token, connected, step } = _a, other = __rest(_a, ["token", "connected", "step"]);
     const { t } = useTranslation();
-    const { getChainById } = useChains();
-    return (_jsxs(Box, Object.assign({ flex: 1 }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", flex: 1, alignItems: "center" }, { children: [_jsx(TokenAvatar, { token: token, sx: { marginRight: 2 } }), _jsx(TextFitter, Object.assign({ height: 30, textStyle: {
+    const { chain } = useChain(token.chainId);
+    return (_jsxs(Box, Object.assign({ flex: 1 }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", flex: 1, alignItems: "center" }, { children: [_jsx(TokenAvatar, { token: token, chain: chain, sx: { marginRight: 2 } }), _jsx(TextFitter, Object.assign({ height: 30, textStyle: {
                             fontWeight: 700,
-                        } }, { children: formatTokenAmount(token.amount, token.decimals) }))] })), _jsxs(TextSecondaryContainer, Object.assign({ connected: connected, component: "span" }, { children: [_jsx(TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
+                        } }, { children: t('format.number', {
+                            value: formatTokenAmount(token.amount, token.decimals),
+                        }) }))] })), _jsxs(TextSecondaryContainer, Object.assign({ connected: connected, component: "span" }, { children: [_jsx(TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
                             tokenSymbol: token.symbol,
-                            chainName: (_b = getChainById(token.chainId)) === null || _b === void 0 ? void 0 : _b.name,
+                            chainName: chain === null || chain === void 0 ? void 0 : chain.name,
                         }) })), step ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ fontSize: 12, lineHeight: 1, fontWeight: 500, color: "text.secondary", px: 1, mt: 0.5 }, { children: "\u2022" })), _jsxs(Box, Object.assign({ display: "flex", alignItems: "flex-end", height: 12, mt: 0.5 }, { children: [_jsx(Box, Object.assign({ pr: 0.75 }, { children: _jsx(SmallAvatar, Object.assign({ src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
                                                 border: 0,
                                                 marginBottom: -0.25,

package/components/TokenAvatar/TokenAvatar.d.ts

@@ -1,7 +1,12 @@
 /// <reference types="react" />
-import type { Token } from '@lifi/sdk';
+import type { Chain, Token } from '@lifi/sdk';
 import type { SxProps, Theme } from '@mui/material';
+export declare const TokenAvatarFallback: React.FC<{
+    token: Token;
+    sx?: SxProps<Theme>;
+}>;
 export declare const TokenAvatar: React.FC<{
     token: Token;
+    chain?: Chain;
     sx?: SxProps<Theme>;
 }>;

package/components/TokenAvatar/TokenAvatar.js

@@ -2,8 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Avatar, Badge } from '@mui/material';
 import { useChain, useToken } from '../../hooks';
 import { SmallAvatar } from '../SmallAvatar';
-export const TokenAvatar = ({ token, sx }) => {
+export const TokenAvatarFallback = ({ token, sx }) => {
     const { chain } = useChain(token.chainId);
     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] })) })));
+    return _jsx(TokenAvatar, { token: chainToken !== null && chainToken !== void 0 ? chainToken : token, chain: chain, sx: sx });
+};
+export const TokenAvatar = ({ token, chain, sx }) => {
+    if (!chain || !token.logoURI) {
+        return _jsx(TokenAvatarFallback, { token: token, sx: sx });
+    }
+    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] })) })));
 };

package/components/TokenList/TokenList.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
-import { useCallback, useRef } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
+import { useRef } from 'react';
+import { useWatch } from 'react-hook-form';
 import { useDebouncedWatch, useTokenBalances, useTokenSearch, } from '../../hooks';
 import { SwapFormKey, SwapFormKeyHelper, useWallet } from '../../providers';
 import { TokenNotFound } from './TokenNotFound';
+import { useTokenSelect } from './useTokenSelect';
 import { VirtualizedTokenList } from './VirtualizedTokenList';
 export const TokenList = ({ formType, height, onClick, }) => {
     var _a, _b;
     const parentRef = useRef(null);
     const { account } = useWallet();
-    const { setValue, getValues } = useFormContext();
     const [selectedChainId] = useWatch({
         name: [SwapFormKeyHelper.getChainKey(formType)],
     });
@@ -34,27 +34,6 @@ export const TokenList = ({ formType, height, onClick, }) => {
         : searchedToken
             ? [searchedToken]
             : filteredTokens;
-    const handleTokenClick = useCallback((tokenAddress) => {
-        setValue(SwapFormKeyHelper.getTokenKey(formType), tokenAddress, {
-            shouldTouch: true,
-        });
-        // Set chain again to trigger URL builder update
-        setValue(SwapFormKeyHelper.getChainKey(formType), selectedChainId, {
-            shouldTouch: true,
-        });
-        setValue(SwapFormKeyHelper.getAmountKey(formType), '');
-        const oppositeFormType = formType === 'from' ? 'to' : 'from';
-        const [selectedOppositeToken, selectedOppositeChainId] = getValues([
-            SwapFormKeyHelper.getTokenKey(oppositeFormType),
-            SwapFormKeyHelper.getChainKey(oppositeFormType),
-        ]);
-        if (selectedOppositeToken === tokenAddress &&
-            selectedOppositeChainId === selectedChainId) {
-            setValue(SwapFormKeyHelper.getTokenKey(oppositeFormType), '', {
-                shouldTouch: true,
-            });
-        }
-        onClick === null || onClick === void 0 ? void 0 : onClick();
-    }, [formType, getValues, onClick, selectedChainId, setValue]);
+    const handleTokenClick = useTokenSelect(formType, onClick);
     return (_jsxs(Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!tokens.length && !isLoading ? (_jsx(TokenNotFound, { formType: formType })) : 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/TokenListItem.d.ts

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

package/components/TokenList/TokenListItem.js

@@ -5,16 +5,21 @@ 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, 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 (_jsxs(ListItem, Object.assign({ disablePadding: true, style: {
             height: `${size}px`,
             transform: `translateY(${start}px)`,
-        } }, { 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] })));
+        } }, { children: [startAdornment, _jsx(TokenListItemButton, { token: token, showBalance: showBalance, isBalanceLoading: isBalanceLoading, onClick: handleClick }), endAdornment] })));
 });
+export const TokenListItemButton = ({ onClick, token, showBalance, isBalanceLoading, }) => {
+    const { t } = useTranslation();
+    const tokenPrice = formatTokenPrice(token.amount, token.priceUSD);
+    return (_jsxs(ListItemButton, Object.assign({ onClick: onClick, 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: t('format.number', {
+                            value: token.amount,
+                        }) }))) : null, tokenPrice ? (_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", "data-price": token.priceUSD }, { children: t(`format.currency`, {
+                            value: tokenPrice,
+                        }) }))) : null] })))) : null] })));
+};
 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: 1.5, marginRight: 2 } }) }), _jsx(ListItemText, { primary: _jsx(Skeleton, { variant: "text", width: 48, height: 20 }), secondary: _jsx(Skeleton, { variant: "text", width: 96, height: 20 }) })] })));
 };

package/components/TokenList/index.d.ts

@@ -1 +1,2 @@
 export * from './TokenList';
+export * from './useTokenSelect';

package/components/TokenList/index.js

@@ -1 +1,2 @@
 export * from './TokenList';
+export * from './useTokenSelect';

package/components/TokenList/types.d.ts

@@ -30,3 +30,9 @@ export interface TokenListItemProps extends TokenListItemBaseProps {
     startAdornment?: React.ReactNode;
     endAdornment?: React.ReactNode;
 }
+export interface TokenListItemButtonProps {
+    onClick?(): void;
+    showBalance?: boolean;
+    token: TokenAmount;
+    isBalanceLoading?: boolean;
+}

package/components/TokenList/useTokenSelect.d.ts

@@ -0,0 +1,2 @@
+import type { SwapFormType } from '../../providers';
+export declare const useTokenSelect: (formType: SwapFormType, onClick?: () => void) => (tokenAddress: string, chainId?: number) => void;

package/components/TokenList/useTokenSelect.js

@@ -0,0 +1,29 @@
+import { useCallback } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { SwapFormKeyHelper } from '../../providers';
+export const useTokenSelect = (formType, onClick) => {
+    const { setValue, getValues } = useFormContext();
+    return useCallback((tokenAddress, chainId) => {
+        const selectedChainId = chainId !== null && chainId !== void 0 ? chainId : getValues(SwapFormKeyHelper.getChainKey(formType));
+        setValue(SwapFormKeyHelper.getTokenKey(formType), tokenAddress, {
+            shouldTouch: true,
+        });
+        // Set chain again to trigger URL builder update
+        setValue(SwapFormKeyHelper.getChainKey(formType), selectedChainId, {
+            shouldTouch: true,
+        });
+        setValue(SwapFormKeyHelper.getAmountKey(formType), '');
+        const oppositeFormType = formType === 'from' ? 'to' : 'from';
+        const [selectedOppositeToken, selectedOppositeChainId] = getValues([
+            SwapFormKeyHelper.getTokenKey(oppositeFormType),
+            SwapFormKeyHelper.getChainKey(oppositeFormType),
+        ]);
+        if (selectedOppositeToken === tokenAddress &&
+            selectedOppositeChainId === selectedChainId) {
+            setValue(SwapFormKeyHelper.getTokenKey(oppositeFormType), '', {
+                shouldTouch: true,
+            });
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    }, [formType, getValues, onClick, setValue]);
+};

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/useChain.d.ts

@@ -1,4 +1,4 @@
-export declare const useChain: (chainId: number) => {
-    chain: import("@lifi/types").EVMChain | undefined;
+export declare const useChain: (chainId?: number) => {
+    chain: import("@lifi/types").ExtendedChain | undefined;
     isLoading: boolean;
 };

package/hooks/useChains.d.ts

@@ -1,5 +1,5 @@
 export declare const useChains: () => {
-    chains: import("@lifi/types").EVMChain[] | undefined;
-    getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
+    chains: import("@lifi/types").ExtendedChain[] | undefined;
+    getChainById: (chainId: number) => import("@lifi/types").ExtendedChain | undefined;
     isLoading: boolean;
 };

package/hooks/useExpandableVariant.js

@@ -2,9 +2,7 @@ import { useMediaQuery } from '@mui/material';
 import { useWidgetConfig } from '../providers';
 const defaultExpandableWidth = 852;
 export const useExpandableVariant = () => {
-    const { variant } = useWidgetConfig();
-    const expandableAllowed = useMediaQuery((theme) => {
-        return theme.breakpoints.up(defaultExpandableWidth);
-    });
-    return variant === 'expandable' && expandableAllowed;
+    const { variant, useRecommendedRoute } = useWidgetConfig();
+    const expandableAllowed = useMediaQuery((theme) => theme.breakpoints.up(defaultExpandableWidth));
+    return variant === 'expandable' && expandableAllowed && !useRecommendedRoute;
 };

package/hooks/useProcessMessage.d.ts

@@ -1,10 +1,10 @@
 import type { EVMChain, Process, Step } from '@lifi/sdk';
-import type { TFunction } from 'react-i18next';
+import type { TFunction } from 'i18next';
 export declare const useProcessMessage: (step?: Step, process?: Process) => {
     title?: string | undefined;
     message?: string | undefined;
 };
-export declare function getProcessMessage(t: TFunction<'translation', undefined>, getChainById: (chainId: number) => EVMChain | undefined, step: Step, process: Process): {
+export declare function getProcessMessage(t: TFunction, getChainById: (chainId: number) => EVMChain | undefined, step: Step, process: Process): {
     title?: string;
     message?: string;
 };

package/hooks/useSwapRoutes.js

@@ -12,12 +12,13 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import Big from 'big.js';
 import { useWatch } from 'react-hook-form';
 import { useDebouncedWatch, useToken } from '.';
-import { SwapFormKey, useLiFi, useWallet } from '../providers';
+import { SwapFormKey, useLiFi, useWallet, useWidgetConfig } from '../providers';
 import { useSettings } from '../stores';
 const refetchTime = 60000;
 export const useSwapRoutes = () => {
     var _a;
     const lifi = useLiFi();
+    const { variant } = useWidgetConfig();
     const { account, provider } = useWallet();
     const queryClient = useQueryClient();
     const { slippage, enabledBridges, enabledExchanges, routePriority } = useSettings([
@@ -36,13 +37,14 @@ export const useSwapRoutes = () => {
         ],
     });
     const [fromTokenAmount] = useDebouncedWatch([SwapFormKey.FromAmount], 320);
-    const { token } = useToken(fromChainId, fromTokenAddress);
+    const { token: fromToken } = useToken(fromChainId, fromTokenAddress);
+    const { token: toToken } = useToken(toChainId, toTokenAddress);
     const isEnabled = 
     // Boolean(account.address) &&
     !isNaN(fromChainId) &&
         !isNaN(toChainId) &&
-        Boolean(token === null || token === void 0 ? void 0 : token.address) &&
-        Boolean(toTokenAddress) &&
+        Boolean(fromToken === null || fromToken === void 0 ? void 0 : fromToken.address) &&
+        Boolean(toToken === null || toToken === void 0 ? void 0 : toToken.address) &&
         !isNaN(fromTokenAmount) &&
         Number(fromTokenAmount) > 0 &&
         !Number.isNaN(slippage);
@@ -50,21 +52,22 @@ export const useSwapRoutes = () => {
         'routes',
         account.address,
         fromChainId,
-        token === null || token === void 0 ? void 0 : token.address,
+        fromToken === null || fromToken === void 0 ? void 0 : fromToken.address,
         fromTokenAmount,
         toChainId,
-        toTokenAddress,
+        toToken === null || toToken === void 0 ? void 0 : toToken.address,
         toAddress,
         slippage,
         enabledBridges,
         enabledExchanges,
         routePriority,
+        variant,
     ];
     const previousDataUpdatedAt = (_a = queryClient.getQueryState(queryKey)) === null || _a === void 0 ? void 0 : _a.dataUpdatedAt;
     const refetchInterval = previousDataUpdatedAt
         ? Math.min(Math.abs(refetchTime - (Date.now() - previousDataUpdatedAt)), refetchTime)
         : refetchTime;
-    const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } = useQuery(queryKey, ({ queryKey: [_, fromAddress, fromChainId, fromTokenAddress, fromTokenAmount, toChainId, toTokenAddress, toAddress, slippage, enabledBridges, enabledExchanges, routePriority,], signal, }) => __awaiter(void 0, void 0, void 0, function* () {
+    const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } = useQuery(queryKey, ({ queryKey: [_, fromAddress, fromChainId, fromTokenAddress, fromTokenAmount, toChainId, toTokenAddress, toAddress, slippage, enabledBridges, enabledExchanges, routePriority, variant,], signal, }) => __awaiter(void 0, void 0, void 0, function* () {
         var _b, _c;
         let toWalletAddress;
         try {
@@ -74,7 +77,7 @@ export const useSwapRoutes = () => {
         catch (_d) {
             toWalletAddress = isAddress(toAddress) ? toAddress : fromAddress;
         }
-        const fromAmount = Big(Number(fromTokenAmount) * Math.pow(10, ((_c = token === null || token === void 0 ? void 0 : token.decimals) !== null && _c !== void 0 ? _c : 0))).toString();
+        const fromAmount = Big(Number(fromTokenAmount) * Math.pow(10, ((_c = fromToken === null || fromToken === void 0 ? void 0 : fromToken.decimals) !== null && _c !== void 0 ? _c : 0))).toString();
         const formattedSlippage = parseFloat(slippage) / 100;
         return lifi.getRoutes({
             fromChainId,
@@ -93,6 +96,7 @@ export const useSwapRoutes = () => {
                     allow: enabledExchanges,
                 },
                 order: routePriority,
+                allowSwitchChain: variant !== 'refuel',
             },
         }, { signal });
     }), {