@lifi/widget 1.18.7 → 1.18.8

package/cjs/components/SwapRoutes/SwapRoutes.js

@@ -4,7 +4,6 @@ exports.SwapRoutes = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
-const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
@@ -12,22 +11,16 @@ const Card_1 = require("../../components/Card");
 const ProgressToNextUpdate_1 = require("../../components/ProgressToNextUpdate");
 const SwapRouteCard_1 = require("../../components/SwapRouteCard");
 const hooks_1 = require("../../hooks");
-const providers_1 = require("../../providers");
-const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const SwapRoutes_style_1 = require("./SwapRoutes.style");
+const useSetSelectedRoute_1 = require("./useSetSelectedRoute");
 const SwapRoutes = (props) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { variant } = (0, providers_1.useWidgetConfig)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
-    const setSelectedRoute = (0, stores_1.useSelectedRouteStore)((state) => state.setSelectedRoute);
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
     const currentRoute = routes === null || routes === void 0 ? void 0 : routes[0];
-    (0, react_1.useEffect)(() => {
-        setSelectedRoute(!isFetching ? currentRoute : undefined);
-        return () => setSelectedRoute(undefined);
-    }, [currentRoute, isFetching, setSelectedRoute]);
+    (0, useSetSelectedRoute_1.useSetSelectedRoute)(currentRoute, isFetching);
     if (!currentRoute && !isLoading && !isFetching && !isFetched) {
         return null;
     }
@@ -35,9 +28,6 @@ const SwapRoutes = (props) => {
         navigate(utils_1.navigationRoutes.swapRoutes);
     };
     const routeNotFound = !currentRoute && !isLoading && !isFetching;
-    if (variant === 'expandable') {
-        return null;
-    }
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.routes') }), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
                     position: 'absolute',
                     top: 8,

package/cjs/components/SwapRoutes/SwapRoutesExpanded.js

@@ -13,13 +13,16 @@ const utils_1 = require("../../utils");
 const ProgressToNextUpdate_1 = require("../ProgressToNextUpdate");
 const SwapRouteCard_1 = require("../SwapRouteCard");
 const SwapRoutes_style_1 = require("./SwapRoutes.style");
+const useSetSelectedRoute_1 = require("./useSetSelectedRoute");
 const SwapRoutesExpanded = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { containerStyle } = (0, providers_1.useWidgetConfig)();
     const navigate = (0, react_router_dom_1.useNavigate)();
-    const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
-    const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
+    const { containerStyle } = (0, providers_1.useWidgetConfig)();
+    const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
+    const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
+    const currentRoute = routes === null || routes === void 0 ? void 0 : routes[0];
+    (0, useSetSelectedRoute_1.useSetSelectedRoute)(currentRoute, isFetching);
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const cleanedPathname = pathname.endsWith('/')
         ? pathname.slice(0, -1)
@@ -34,7 +37,6 @@ const SwapRoutesExpanded = () => {
             });
         }
     };
-    const currentRoute = routes === null || routes === void 0 ? void 0 : routes[0];
     const expanded = Boolean(currentRoute || isLoading || isFetching || isFetched) && !hasPath;
     const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
     return ((0, jsx_runtime_1.jsx)(SwapRoutes_style_1.CollapseContainer, { children: (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ appear: true, timeout: 225, in: expanded, orientation: "horizontal" }, { children: (0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({ appear: true, timeout: 225, in: expanded }, { children: (0, jsx_runtime_1.jsx)(SwapRoutes_style_1.Container, Object.assign({ sx: containerStyle }, { children: (0, jsx_runtime_1.jsxs)(SwapRoutes_style_1.ScrollableContainer, { children: [(0, jsx_runtime_1.jsxs)(SwapRoutes_style_1.Header, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: "700", flex: 1, noWrap: true }, { children: t('swap.routes') })), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3 }, { children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { variant: "stretched" }, index)))) : (routes === null || routes === void 0 ? void 0 : routes.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, variant: "stretched", expanded: (routes === null || routes === void 0 ? void 0 : routes.length) <= 2 }, route.id)))) }))] }) })) })) })) }));

package/cjs/components/SwapRoutes/useSetSelectedRoute.d.ts

@@ -0,0 +1,2 @@
+import type { Route } from '@lifi/sdk';
+export declare const useSetSelectedRoute: (currentRoute?: Route, isFetching?: boolean) => void;

package/cjs/components/SwapRoutes/useSetSelectedRoute.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSetSelectedRoute = void 0;
+const react_1 = require("react");
+const stores_1 = require("../../stores");
+const useSetSelectedRoute = (currentRoute, isFetching) => {
+    const setSelectedRoute = (0, stores_1.useSelectedRouteStore)((state) => state.setSelectedRoute);
+    (0, react_1.useEffect)(() => {
+        setSelectedRoute(!isFetching ? currentRoute : undefined);
+        return () => setSelectedRoute(undefined);
+    }, [currentRoute, isFetching, setSelectedRoute]);
+};
+exports.useSetSelectedRoute = useSetSelectedRoute;

package/cjs/components/TokenList/TokenList.js

@@ -17,7 +17,7 @@ const TokenList = ({ formType, height, onClick, }) => {
     const [selectedChainId] = (0, react_hook_form_1.useWatch)({
         name: [providers_1.SwapFormKeyHelper.getChainKey(formType)],
     });
-    const [tokenSearchFilter] = (0, hooks_1.useDebouncedWatch)([providers_1.SwapFormKey.TokenSearchFilter], 250);
+    const [tokenSearchFilter] = (0, hooks_1.useDebouncedWatch)([providers_1.SwapFormKey.TokenSearchFilter], 320);
     const { tokens: chainTokens, tokensWithBalance, isLoading: isTokensLoading, isBalanceLoading, featuredTokens, } = (0, hooks_1.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 : '';
@@ -27,7 +27,7 @@ const TokenList = ({ formType, height, onClick, }) => {
             token.address.toUpperCase().includes(searchFilter))
         : filteredTokens;
     const tokenSearchEnabled = !isTokensLoading &&
-        !!filteredTokens.length &&
+        !filteredTokens.length &&
         !!tokenSearchFilter &&
         !!selectedChainId;
     const { token: searchedToken, isLoading: isSearchedTokenLoading } = (0, hooks_1.useTokenSearch)(tokenSearchFilter, selectedChainId, tokenSearchEnabled);

package/cjs/config/version.d.ts

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

package/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '1.18.7';
+exports.version = '1.18.8';

package/cjs/hooks/useDebouncedWatch.js

@@ -15,10 +15,7 @@ const useDebouncedWatch = (name, delay) => {
             const hasWatchedValue = Array.isArray(watchedValue)
                 ? watchedValue.some((value) => value)
                 : Boolean(watchedValue);
-            const hasDebouncedValue = Array.isArray(debouncedValueRef.current)
-                ? debouncedValueRef.current.some((value) => value)
-                : Boolean(debouncedValueRef.current);
-            if (hasWatchedValue && hasDebouncedValue) {
+            if (hasWatchedValue) {
                 const handler = setTimeout(() => {
                     setDebouncedValue(watchedValue);
                 }, delay);

package/cjs/hooks/useSwapRoutes.js

@@ -38,7 +38,7 @@ const useSwapRoutes = () => {
             providers_1.SwapFormKey.ToAddress,
         ],
     });
-    const [fromTokenAmount] = (0, _1.useDebouncedWatch)([providers_1.SwapFormKey.FromAmount], 250);
+    const [fromTokenAmount] = (0, _1.useDebouncedWatch)([providers_1.SwapFormKey.FromAmount], 320);
     const { token } = (0, _1.useToken)(fromChainId, fromTokenAddress);
     const isEnabled = 
     // Boolean(account.address) &&

package/cjs/pages/MainPage/MainPage.js

@@ -9,9 +9,11 @@ const SelectChainAndToken_1 = require("../../components/SelectChainAndToken");
 const SendToWallet_1 = require("../../components/SendToWallet");
 const SwapInput_1 = require("../../components/SwapInput");
 const SwapRoutes_1 = require("../../components/SwapRoutes");
+const providers_1 = require("../../providers");
 const MainPage_style_1 = require("./MainPage.style");
 const MainSwapButton_1 = require("./MainSwapButton");
 const MainPage = () => {
-    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mx: 3, mb: 3 }, { children: (0, jsx_runtime_1.jsx)(SwapInput_1.SwapInput, { formType: "from" }) })), (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mx: 3, mb: 1 }, { children: [(0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex' } }, { children: [(0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWalletButton, {})] }))] }))] })));
+    const { variant } = (0, providers_1.useWidgetConfig)();
+    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mx: 3, mb: 3 }, { children: (0, jsx_runtime_1.jsx)(SwapInput_1.SwapInput, { formType: "from" }) })), variant !== 'expandable' ? (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 3 }) : null, (0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mx: 3, mb: 1 }, { children: [(0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex' } }, { children: [(0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWalletButton, {})] }))] }))] })));
 };
 exports.MainPage = MainPage;

package/components/SwapRoutes/SwapRoutes.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { KeyboardArrowRight as KeyboardArrowRightIcon } from '@mui/icons-material';
 import { Box, IconButton } from '@mui/material';
-import { useEffect } from 'react';
 import { useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -9,22 +8,16 @@ 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 { useSelectedRouteStore } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { Stack } from './SwapRoutes.style';
+import { useSetSelectedRoute } from './useSetSelectedRoute';
 export const SwapRoutes = (props) => {
     const { t } = useTranslation();
-    const { variant } = useWidgetConfig();
     const navigate = useNavigate();
     const { isValid, isValidating } = useFormState();
-    const setSelectedRoute = useSelectedRouteStore((state) => state.setSelectedRoute);
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
     const currentRoute = routes === null || routes === void 0 ? void 0 : routes[0];
-    useEffect(() => {
-        setSelectedRoute(!isFetching ? currentRoute : undefined);
-        return () => setSelectedRoute(undefined);
-    }, [currentRoute, isFetching, setSelectedRoute]);
+    useSetSelectedRoute(currentRoute, isFetching);
     if (!currentRoute && !isLoading && !isFetching && !isFetched) {
         return null;
     }
@@ -32,9 +25,6 @@ export const SwapRoutes = (props) => {
         navigate(navigationRoutes.swapRoutes);
     };
     const routeNotFound = !currentRoute && !isLoading && !isFetching;
-    if (variant === 'expandable') {
-        return null;
-    }
     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,

package/components/SwapRoutes/SwapRoutesExpanded.js

@@ -10,13 +10,16 @@ import { navigationRoutes, navigationRoutesValues } from '../../utils';
 import { ProgressToNextUpdate } from '../ProgressToNextUpdate';
 import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../SwapRouteCard';
 import { CollapseContainer, Container, Header, ScrollableContainer, } from './SwapRoutes.style';
+import { useSetSelectedRoute } from './useSetSelectedRoute';
 export const SwapRoutesExpanded = () => {
     const { t } = useTranslation();
-    const { containerStyle } = useWidgetConfig();
     const navigate = useNavigate();
-    const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
-    const { isValid, isValidating } = useFormState();
     const setExecutableRoute = useSetExecutableRoute();
+    const { containerStyle } = useWidgetConfig();
+    const { isValid, isValidating } = useFormState();
+    const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
+    const currentRoute = routes === null || routes === void 0 ? void 0 : routes[0];
+    useSetSelectedRoute(currentRoute, isFetching);
     const { pathname } = useLocation();
     const cleanedPathname = pathname.endsWith('/')
         ? pathname.slice(0, -1)
@@ -31,7 +34,6 @@ export const SwapRoutesExpanded = () => {
             });
         }
     };
-    const currentRoute = routes === null || routes === void 0 ? void 0 : routes[0];
     const expanded = Boolean(currentRoute || isLoading || isFetching || isFetched) && !hasPath;
     const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
     return (_jsx(CollapseContainer, { children: _jsx(Collapse, Object.assign({ appear: true, timeout: 225, in: expanded, orientation: "horizontal" }, { children: _jsx(Grow, Object.assign({ appear: true, timeout: 225, in: expanded }, { children: _jsx(Container, Object.assign({ sx: containerStyle }, { children: _jsxs(ScrollableContainer, { children: [_jsxs(Header, { children: [_jsx(Typography, Object.assign({ fontSize: 18, fontWeight: "700", flex: 1, noWrap: true }, { children: t('swap.routes') })), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), _jsx(Stack, Object.assign({ direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3 }, { children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, { variant: "stretched" }, index)))) : (routes === null || routes === void 0 ? void 0 : routes.map((route, index) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, variant: "stretched", expanded: (routes === null || routes === void 0 ? void 0 : routes.length) <= 2 }, route.id)))) }))] }) })) })) })) }));

package/components/SwapRoutes/useSetSelectedRoute.d.ts

@@ -0,0 +1,2 @@
+import type { Route } from '@lifi/sdk';
+export declare const useSetSelectedRoute: (currentRoute?: Route, isFetching?: boolean) => void;

package/components/SwapRoutes/useSetSelectedRoute.js

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+import { useSelectedRouteStore } from '../../stores';
+export const useSetSelectedRoute = (currentRoute, isFetching) => {
+    const setSelectedRoute = useSelectedRouteStore((state) => state.setSelectedRoute);
+    useEffect(() => {
+        setSelectedRoute(!isFetching ? currentRoute : undefined);
+        return () => setSelectedRoute(undefined);
+    }, [currentRoute, isFetching, setSelectedRoute]);
+};

package/components/TokenList/TokenList.js

@@ -14,7 +14,7 @@ export const TokenList = ({ formType, height, onClick, }) => {
     const [selectedChainId] = useWatch({
         name: [SwapFormKeyHelper.getChainKey(formType)],
     });
-    const [tokenSearchFilter] = useDebouncedWatch([SwapFormKey.TokenSearchFilter], 250);
+    const [tokenSearchFilter] = useDebouncedWatch([SwapFormKey.TokenSearchFilter], 320);
     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 : '';
@@ -24,7 +24,7 @@ export const TokenList = ({ formType, height, onClick, }) => {
             token.address.toUpperCase().includes(searchFilter))
         : filteredTokens;
     const tokenSearchEnabled = !isTokensLoading &&
-        !!filteredTokens.length &&
+        !filteredTokens.length &&
         !!tokenSearchFilter &&
         !!selectedChainId;
     const { token: searchedToken, isLoading: isSearchedTokenLoading } = useTokenSearch(tokenSearchFilter, selectedChainId, tokenSearchEnabled);

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/useDebouncedWatch.js

@@ -12,10 +12,7 @@ export const useDebouncedWatch = (name, delay) => {
             const hasWatchedValue = Array.isArray(watchedValue)
                 ? watchedValue.some((value) => value)
                 : Boolean(watchedValue);
-            const hasDebouncedValue = Array.isArray(debouncedValueRef.current)
-                ? debouncedValueRef.current.some((value) => value)
-                : Boolean(debouncedValueRef.current);
-            if (hasWatchedValue && hasDebouncedValue) {
+            if (hasWatchedValue) {
                 const handler = setTimeout(() => {
                     setDebouncedValue(watchedValue);
                 }, delay);

package/hooks/useSwapRoutes.js

@@ -35,7 +35,7 @@ export const useSwapRoutes = () => {
             SwapFormKey.ToAddress,
         ],
     });
-    const [fromTokenAmount] = useDebouncedWatch([SwapFormKey.FromAmount], 250);
+    const [fromTokenAmount] = useDebouncedWatch([SwapFormKey.FromAmount], 320);
     const { token } = useToken(fromChainId, fromTokenAddress);
     const isEnabled = 
     // Boolean(account.address) &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.18.7",
+  "version": "1.18.8",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",

package/pages/MainPage/MainPage.js

@@ -6,8 +6,10 @@ import { SelectChainAndToken } from '../../components/SelectChainAndToken';
 import { SendToWallet, SendToWalletButton, } from '../../components/SendToWallet';
 import { SwapInput } from '../../components/SwapInput';
 import { SwapRoutes } from '../../components/SwapRoutes';
+import { useWidgetConfig } from '../../providers';
 import { FormContainer } from './MainPage.style';
 import { MainSwapButton } from './MainSwapButton';
 export const MainPage = () => {
-    return (_jsxs(FormContainer, Object.assign({ disableGutters: true }, { children: [_jsx(ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), _jsx(SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 3 }, { children: _jsx(SwapInput, { formType: "from" }) })), _jsx(SwapRoutes, { mx: 3, mb: 3 }), _jsx(GasSufficiencyMessage, { mx: 3, mb: 3 }), _jsxs(Box, Object.assign({ mx: 3, mb: 1 }, { children: [_jsx(SendToWallet, { mb: 3 }), _jsxs(Box, Object.assign({ sx: { display: 'flex' } }, { children: [_jsx(MainSwapButton, {}), _jsx(SendToWalletButton, {})] }))] }))] })));
+    const { variant } = useWidgetConfig();
+    return (_jsxs(FormContainer, Object.assign({ disableGutters: true }, { children: [_jsx(ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), _jsx(SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 3 }, { children: _jsx(SwapInput, { formType: "from" }) })), variant !== 'expandable' ? _jsx(SwapRoutes, { mx: 3, mb: 3 }) : null, _jsx(GasSufficiencyMessage, { mx: 3, mb: 3 }), _jsxs(Box, Object.assign({ mx: 3, mb: 1 }, { children: [_jsx(SendToWallet, { mb: 3 }), _jsxs(Box, Object.assign({ sx: { display: 'flex' } }, { children: [_jsx(MainSwapButton, {}), _jsx(SendToWalletButton, {})] }))] }))] })));
 };