@lifi/widget 1.10.1 → 1.10.4

package/App.js

@@ -13,7 +13,7 @@ import { SettingsPage } from './pages/SettingsPage';
 import { SwapPage } from './pages/SwapPage';
 import { SwapRoutesPage } from './pages/SwapRoutesPage';
 import { useWallet } from './providers/WalletProvider';
-import { routes } from './utils/routes';
+import { navigationRoutes } from './utils';
 export const App = ({ config }) => {
     return (_jsx(AppProvider, Object.assign({ config: config }, { children: _jsx(AppDefault, {}) })));
 };
@@ -23,5 +23,5 @@ export const AppDefault = () => {
         attemptEagerConnect();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsxs(Routes, { children: [_jsx(Route, { path: routes.home, element: _jsx(MainPage, {}) }), _jsx(Route, { path: routes.selectWallet, element: _jsx(SelectWalletPage, {}) }), _jsx(Route, { path: `${routes.swapRoutes}/${routes.swap}/${routes.selectWallet}`, element: _jsx(SelectWalletPage, {}) }), _jsx(Route, { path: routes.settings, element: _jsx(SettingsPage, {}) }), _jsx(Route, { path: routes.fromToken, element: _jsx(SelectTokenPage, { formType: "from" }) }), _jsx(Route, { path: routes.toToken, element: _jsx(SelectTokenPage, { formType: "to" }) }), _jsx(Route, { path: routes.swapRoutes, element: _jsx(SwapRoutesPage, {}) }), _jsx(Route, { path: `${routes.swapRoutes}/${routes.swap}`, element: _jsx(SwapPage, {}) }), _jsx(Route, { path: routes.swap, element: _jsx(SwapPage, {}) }), _jsx(Route, { path: "*", element: _jsx(NotFound, {}) })] }), _jsx(Initializer, {})] }));
+    return (_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsx(MainPage, {}) }), _jsx(Route, { path: navigationRoutes.selectWallet, element: _jsx(SelectWalletPage, {}) }), _jsx(Route, { path: `${navigationRoutes.swapRoutes}/${navigationRoutes.swap}/${navigationRoutes.selectWallet}`, element: _jsx(SelectWalletPage, {}) }), _jsx(Route, { path: navigationRoutes.settings, element: _jsx(SettingsPage, {}) }), _jsx(Route, { path: navigationRoutes.fromToken, element: _jsx(SelectTokenPage, { formType: "from" }) }), _jsx(Route, { path: navigationRoutes.toToken, element: _jsx(SelectTokenPage, { formType: "to" }) }), _jsx(Route, { path: navigationRoutes.swapRoutes, element: _jsx(SwapRoutesPage, {}) }), _jsx(Route, { path: `${navigationRoutes.swapRoutes}/${navigationRoutes.swap}`, element: _jsx(SwapPage, {}) }), _jsx(Route, { path: navigationRoutes.swap, element: _jsx(SwapPage, {}) }), _jsx(Route, { path: "*", element: _jsx(NotFound, {}) })] }), _jsx(Initializer, {})] }));
 };

package/components/AppContainer.js

@@ -4,7 +4,7 @@ import { styled } from '@mui/material/styles';
 import { useLayoutEffect, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useWidgetConfig } from '../providers/WidgetProvider';
-import { ElementId } from '../utils/elements';
+import { ElementId } from '../utils';
 import { PoweredBy } from './PoweredBy';
 const CssBaselineContainer = styled(ScopedCssBaseline)(({ theme }) => ({
     // height: '100%',

package/components/Header/Header.js

@@ -1,15 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLocation } from 'react-router-dom';
 import { useWidgetConfig } from '../../providers/WidgetProvider';
-import { ElementId } from '../../utils/elements';
-import { routes } from '../../utils/routes';
+import { ElementId, navigationRoutes } from '../../utils';
 import { Container } from './Header.style';
 import { NavigationHeader } from './NavigationHeader';
 import { WalletHeader } from './WalletHeader';
 const stickyHeaderRoutes = [
-    routes.selectWallet,
-    routes.settings,
-    routes.swapRoutes,
+    navigationRoutes.selectWallet,
+    navigationRoutes.settings,
+    navigationRoutes.swapRoutes,
 ];
 const HeaderContainer = ({ children }) => {
     const { pathname } = useLocation();

package/components/Header/NavigationHeader.js

@@ -3,46 +3,46 @@ import { ArrowBack as ArrowBackIcon, Settings as SettingsIcon, } from '@mui/icon
 import { Box, IconButton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
-import { routes, routesValues } from '../../utils/routes';
+import { navigationRoutes, navigationRoutesValues } from '../../utils';
 import { SwapRoutesUpdateProgress } from '../SwapRoutes/SwapRoutesUpdateProgress';
 import { HeaderAppBar } from './Header.style';
 const backButtonRoutes = [
-    routes.selectWallet,
-    routes.settings,
-    routes.fromToken,
-    routes.toToken,
-    routes.swapRoutes,
-    routes.swap,
+    navigationRoutes.selectWallet,
+    navigationRoutes.settings,
+    navigationRoutes.fromToken,
+    navigationRoutes.toToken,
+    navigationRoutes.swapRoutes,
+    navigationRoutes.swap,
 ];
 export const NavigationHeader = () => {
     const { t } = useTranslation();
     const { pathname } = useLocation();
     const path = pathname.substring(pathname.lastIndexOf('/') + 1);
-    const hasPath = routesValues.includes(path);
+    const hasPath = navigationRoutesValues.includes(path);
     const navigate = useNavigate();
     const handleSettings = () => {
-        navigate(routes.settings);
+        navigate(navigationRoutes.settings);
     };
     const handleBack = () => {
         navigate(-1);
     };
     const handleHeaderTitle = () => {
         switch (path) {
-            case routes.selectWallet:
+            case navigationRoutes.selectWallet:
                 return t(`header.selectWallet`);
-            case routes.settings:
+            case navigationRoutes.settings:
                 return t(`header.settings`);
-            case routes.fromToken:
+            case navigationRoutes.fromToken:
                 return t(`header.from`);
-            case routes.toToken:
+            case navigationRoutes.toToken:
                 return t(`header.to`);
-            case routes.swapRoutes:
+            case navigationRoutes.swapRoutes:
                 return t(`header.routes`);
-            case routes.swap:
+            case navigationRoutes.swap:
                 return t(`header.swap`);
             default:
                 return t(`header.swap`);
         }
     };
-    return (_jsxs(HeaderAppBar, Object.assign({ elevation: 0 }, { children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "start", onClick: handleBack }, { children: _jsx(ArrowBackIcon, {}) }))) : null, _jsx(Typography, Object.assign({ fontSize: hasPath ? 24 : 32, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: routes.swapRoutes, element: _jsx(SwapRoutesUpdateProgress, { size: "medium", edge: "end", sx: { marginRight: -1 } }) }), _jsx(Route, { path: routes.home, element: _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: handleSettings }, { children: _jsx(SettingsIcon, {}) })) }), _jsx(Route, { path: "*", element: _jsx(Box, { width: 28, height: 48 }) })] })] })));
+    return (_jsxs(HeaderAppBar, Object.assign({ elevation: 0 }, { children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "start", onClick: handleBack }, { children: _jsx(ArrowBackIcon, {}) }))) : null, _jsx(Typography, Object.assign({ fontSize: hasPath ? 24 : 32, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.swapRoutes, element: _jsx(SwapRoutesUpdateProgress, { size: "medium", edge: "end", sx: { marginRight: -1 } }) }), _jsx(Route, { path: navigationRoutes.home, element: _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: handleSettings }, { children: _jsx(SettingsIcon, {}) })) }), _jsx(Route, { path: "*", element: _jsx(Box, { width: 28, height: 48 }) })] })] })));
 };

package/components/Header/WalletHeader.js

@@ -14,7 +14,7 @@ import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useWallet } from '../../providers/WalletProvider';
 import { useWidgetConfig } from '../../providers/WidgetProvider';
-import { routes } from '../../utils/routes';
+import { navigationRoutes } from '../../utils';
 import { HeaderAppBar } from './Header.style';
 export const WalletHeader = () => {
     const { t } = useTranslation();
@@ -38,7 +38,7 @@ const ConnectButton = () => {
             yield walletConnect();
             return;
         }
-        navigate(routes.selectWallet);
+        navigate(navigationRoutes.selectWallet);
     });
-    return (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "disconnect", edge: "end", onClick: !pathname.includes(routes.selectWallet) ? connect : undefined }, { children: _jsx(AccountBalanceWalletIcon, {}) })));
+    return (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "disconnect", edge: "end", onClick: !pathname.includes(navigationRoutes.selectWallet) ? connect : undefined }, { children: _jsx(AccountBalanceWalletIcon, {}) })));
 };

package/components/SelectTokenButton/SelectTokenButton.js

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useChain, useToken } from '../../hooks';
 import { SwapFormKeyHelper, } from '../../providers/SwapFormProvider';
-import { routes } from '../../utils/routes';
+import { navigationRoutes } from '../../utils';
 import { CardTitle } from '../Card';
 import { CardContainer } from '../Card/CardContainer';
 import { Card, SelectTokenCardHeader } from './SelectTokenButton.style';
@@ -22,7 +22,9 @@ export const SelectTokenButton = ({ formType, compact }) => {
     const { chain, isLoading: isChainLoading } = useChain(chainId);
     const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress);
     const handleClick = () => {
-        navigate(formType === 'from' ? routes.fromToken : routes.toToken);
+        navigate(formType === 'from'
+            ? navigationRoutes.fromToken
+            : navigationRoutes.toToken);
     };
     const isSelected = !!(chain && token);
     return (_jsx(CardContainer, Object.assign({ flex: 1 }, { children: _jsxs(Card, Object.assign({ onClick: handleClick, elevation: 0 }, { children: [_jsx(CardTitle, { children: t(`swap.${formType}`) }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (_jsx(SelectTokenCardHeader, { avatar: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }), title: _jsx(Skeleton, { variant: "text", width: 64, height: 24 }), subheader: _jsx(Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : (_jsx(SelectTokenCardHeader, { avatar: isSelected ? (_jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol }, { children: token.symbol[0] }))) : null, action: !compact ? _jsx(KeyboardArrowRightIcon, {}) : null, title: isSelected ? token.symbol : t(`swap.selectChainAndToken`), subheader: isSelected ? `on ${chain.name}` : null, selected: isSelected, compact: compact }))] })) })));

package/components/StepActions/StepActions.js

@@ -14,7 +14,7 @@ import { ArrowForward as ArrowForwardIcon } from '@mui/icons-material';
 import { Box, Step as MuiStep, Stepper, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useChains } from '../../hooks';
-import { formatTokenAmount } from '../../utils/format';
+import { formatTokenAmount } from '../../utils';
 import { LiFiLogo } from '../LiFiLogo';
 import { StepAvatar, StepConnector, StepContent, StepIcon, StepLabel, } from './StepActions.style';
 export const StepActions = (_a) => {
@@ -29,7 +29,8 @@ export const StepActions = (_a) => {
                             : 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: StepIcon }, { 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 })] })))] })));
 };
 export const StepDetailsContent = ({ step }) => {
-    return (_jsxs(Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex" }, { children: [formatTokenAmount(step.estimate.fromAmount, step.action.fromToken.decimals), ' ', step.action.fromToken.symbol, _jsx(ArrowForwardIcon, { sx: { fontSize: 18, paddingX: 0.5 } }), formatTokenAmount(step.estimate.toAmount, step.action.toToken.decimals), ' ', step.action.toToken.symbol] })));
+    var _a, _b;
+    return (_jsxs(Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex" }, { children: [formatTokenAmount(step.estimate.fromAmount, step.action.fromToken.decimals), ' ', step.action.fromToken.symbol, _jsx(ArrowForwardIcon, { sx: { fontSize: 18, paddingX: 0.5 } }), formatTokenAmount((_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount, step.action.toToken.decimals), ' ', step.action.toToken.symbol] })));
 };
 export const CrossStepDetailsLabel = ({ step }) => {
     var _a, _b;

package/components/StepToken.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Box, Typography } from '@mui/material';
-import { formatTokenAmount } from '../utils/format';
+import { formatTokenAmount } from '../utils';
 import { TextFitter } from './TextFitter';
 export const StepToken = (_a) => {
     var { token } = _a, other = __rest(_a, ["token"]);

package/components/SwapButton/SwapButton.js

@@ -16,7 +16,7 @@ import { useChains, useHasSufficientBalance } from '../../hooks';
 import { SwapFormKeyHelper } from '../../providers/SwapFormProvider';
 import { useWallet } from '../../providers/WalletProvider';
 import { useWidgetConfig } from '../../providers/WidgetProvider';
-import { routes } from '../../utils/routes';
+import { navigationRoutes } from '../../utils';
 import { Button } from './SwapButton.style';
 export const SwapButton = ({ onClick, text, loading, }) => {
     var _a;
@@ -36,7 +36,7 @@ export const SwapButton = ({ onClick, text, loading, }) => {
                 yield walletConnect();
             }
             else {
-                navigate(routes.selectWallet);
+                navigate(navigationRoutes.selectWallet);
             }
         }
         else if (!isCurrentChainMatch) {

package/components/SwapButton/SwapButton.style.js

@@ -1,7 +1,7 @@
 import { LoadingButton } from '@mui/lab';
 import { loadingButtonClasses } from '@mui/lab/LoadingButton';
 import { styled } from '@mui/material/styles';
-import { getContrastAlphaColor } from '../../utils/colors';
+import { getContrastAlphaColor } from '../../utils';
 export const Button = styled(LoadingButton)(({ theme }) => ({
     textTransform: 'none',
     borderRadius: theme.shape.borderRadiusSecondary,

package/components/SwapInProgress/SwapInProgress.js

@@ -5,7 +5,7 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useExecutingRoutes } from '../../stores';
-import { routes } from '../../utils/routes';
+import { navigationRoutes } from '../../utils';
 import { CardTitle } from '../Card';
 import { Card, RouteAvatar, RouteCard } from './SwapInProgress.style';
 export const SwapInProgress = (props) => {
@@ -13,7 +13,7 @@ export const SwapInProgress = (props) => {
     const navigate = useNavigate();
     const executingRoutes = useExecutingRoutes();
     const handleCardClick = useCallback((routeId) => {
-        navigate(routes.swap, { state: { routeId } });
+        navigate(navigationRoutes.swap, { state: { routeId } });
     }, [navigate]);
     if (!(executingRoutes === null || executingRoutes === void 0 ? void 0 : executingRoutes.length)) {
         return null;

package/components/SwapInput/FormPriceHelperText.js

@@ -4,7 +4,7 @@ import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useTokenBalance } from '../../hooks';
 import { SwapFormKeyHelper, } from '../../providers/SwapFormProvider';
-import { formatTokenPrice } from '../../utils/format';
+import { formatTokenPrice } from '../../utils';
 export const FormPriceHelperText = ({ formType, selected }) => {
     const { t } = useTranslation();
     const [amount, chainId, tokenAddress] = useWatch({

package/components/SwapInput/SwapInput.js

@@ -5,8 +5,7 @@ import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useChain, useToken } from '../../hooks';
 import { SwapFormKeyHelper, } from '../../providers/SwapFormProvider';
-import { formatAmount } from '../../utils/format';
-import { fitInputText } from '../../utils/input';
+import { fitInputText, formatAmount } from '../../utils';
 import { CardContainer, CardTitle } from '../Card';
 import { FormPriceHelperText } from './FormPriceHelperText';
 import { FormControl, Input, maxInputFontSize, minInputFontSize, } from './SwapInput.style';

package/components/SwapRouteCard/SwapRouteCard.js

@@ -17,7 +17,7 @@ import { StepActions } from '../StepActions';
 import { StepToken } from '../StepToken';
 import { Card, Check, Label } from './SwapRouteCard.style';
 export const SwapRouteCard = (_a) => {
-    var _b;
+    var _b, _c;
     var { route, active, dense } = _a, other = __rest(_a, ["route", "active", "dense"]);
     const { t } = useTranslation();
     const label = ((_b = route.tags) === null || _b === void 0 ? void 0 : _b.length)
@@ -32,7 +32,7 @@ export const SwapRouteCard = (_a) => {
                     : null, _jsxs(Box, Object.assign({ sx: {
                         display: 'flex',
                         justifyContent: 'space-between',
-                    } }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ fontSize: 18, fontWeight: "500" }, { children: t(`swap.currency`, { value: route.gasCostUSD }) })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary" }, { children: t(`swap.gas`) }))] }), _jsxs(Box, { children: [_jsxs(Typography, Object.assign({ fontSize: 18, fontWeight: "500", display: "flex", justifyContent: "flex-end" }, { children: ["~", (route.steps
+                    } }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ fontSize: 18, fontWeight: "500" }, { children: t(`swap.currency`, { value: (_c = route.gasCostUSD) !== null && _c !== void 0 ? _c : 0 }) })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary" }, { children: t(`swap.gas`) }))] }), _jsxs(Box, { children: [_jsxs(Typography, Object.assign({ fontSize: 18, fontWeight: "500", display: "flex", justifyContent: "flex-end" }, { children: ["~", (route.steps
                                             .map((step) => step.estimate.executionDuration)
                                             .reduce((cumulated, x) => cumulated + x) / 60).toFixed(0)] })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary", textAlign: "end" }, { children: t(`swap.minutes`) }))] })] }))] }) })));
 };

package/components/SwapRoutes/SwapRoutes.js

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useSwapRoutes } from '../../hooks';
 import { useCurrentRoute } from '../../stores';
-import { routes } from '../../utils/routes';
+import { navigationRoutes } from '../../utils';
 import { CardContainer, CardTitle } from '../Card';
 import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../SwapRouteCard';
 import { Stack } from './SwapRoutes.style';
@@ -18,7 +18,7 @@ export const SwapRoutes = (props) => {
     const [currentRoute] = useCurrentRoute();
     const { routes: swapRoutes, isLoading, isFetching, isFetched, } = useSwapRoutes();
     const handleCardClick = useCallback(() => {
-        navigate(routes.swapRoutes);
+        navigate(navigationRoutes.swapRoutes);
     }, [navigate]);
     if (!(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && !isLoading && !isFetching && !isFetched) {
         return null;

package/components/TokenList/TokenList.style.js

@@ -1,7 +1,7 @@
 import { ListItem as MuiListItem, ListItemButton as MuiListItemButton, } from '@mui/material';
 import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
 import { styled } from '@mui/material/styles';
-import { getContrastAlphaColor } from '../../utils/colors';
+import { getContrastAlphaColor } from '../../utils';
 export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusSecondary,
     paddingLeft: theme.spacing(2),

package/components/TokenList/TokenListItem.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Box, ListItemAvatar, ListItemText, Skeleton, Typography, } from '@mui/material';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { formatTokenPrice } from '../../utils/format';
+import { formatTokenPrice } from '../../utils';
 import { ListItem, ListItemButton } from './TokenList.style';
 export const TokenListItem = memo(({ onClick, size, start, token, showBalance }) => {
     var _a;

package/config/sentry.js

@@ -13,7 +13,7 @@ export const initSentry = (enabled) => {
         ],
         sampleRate: 1,
         tracesSampleRate: 0.2,
-        enabled: enabled && process.env.NODE_ENV === 'production',
+        enabled,
         environment: process.env.NODE_ENV,
         release: version,
     });

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/useContentHeight.js

@@ -1,5 +1,5 @@
 import { useLayoutEffect, useState } from 'react';
-import { ElementId } from '../utils/elements';
+import { ElementId } from '../utils';
 const getContentHeight = () => {
     const headerElement = document.getElementById(ElementId.Header);
     const containerElement = document.getElementById(ElementId.ScrollableContainer);

package/hooks/useHasSufficientBalance.js

@@ -23,9 +23,9 @@ export const useHasSufficientBalance = () => {
     const { tokens: fromChainTokenBalances } = useTokenBalances(fromChainId);
     const { tokens: toChainTokenBalances } = useTokenBalances((_a = lastStep === null || lastStep === void 0 ? void 0 : lastStep.action.fromChainId) !== null && _a !== void 0 ? _a : toChainId);
     const hasGasOnStartChain = useMemo(() => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c;
         const gasToken = (_a = route === null || route === void 0 ? void 0 : route.steps[0].estimate.gasCosts) === null || _a === void 0 ? void 0 : _a[0].token;
-        if (!account.isActive || !gasToken) {
+        if (!account.isActive || !gasToken || !fromAmount) {
             return true;
         }
         const gasTokenBalance = Big((_c = (_b = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === gasToken.address)) === null || _b === void 0 ? void 0 : _b.amount) !== null && _c !== void 0 ? _c : 0);
@@ -34,12 +34,12 @@ export const useHasSufficientBalance = () => {
             .reduce((big, step) => { var _a; return big.plus(Big(((_a = step.estimate.gasCosts) === null || _a === void 0 ? void 0 : _a[0].amount) || 0)); }, Big(0))
             .div(Math.pow(10, gasToken.decimals));
         if (route.fromToken.address === gasToken.address) {
-            const tokenBalance = Big((_e = (_d = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === route.fromToken.address)) === null || _d === void 0 ? void 0 : _d.amount) !== null && _e !== void 0 ? _e : 0);
-            requiredAmount = requiredAmount.plus(tokenBalance);
+            requiredAmount = requiredAmount.plus(Big(fromAmount));
         }
         return gasTokenBalance.gt(0) && gasTokenBalance.gte(requiredAmount);
     }, [
         account.isActive,
+        fromAmount,
         fromChainTokenBalances,
         route === null || route === void 0 ? void 0 : route.fromChainId,
         route === null || route === void 0 ? void 0 : route.fromToken.address,

package/hooks/useRouteExecution.js

@@ -13,11 +13,11 @@ import shallow from 'zustand/shallow';
 import { LiFi } from '../config/lifi';
 import { useWallet } from '../providers/WalletProvider';
 import { useRouteStore } from '../stores';
-import { deepClone } from '../utils/deepClone';
+import { deepClone } from '../utils';
 export const useRouteExecution = (routeId) => {
     const { account, switchChain } = useWallet();
     const resumedAfterMount = useRef(false);
-    const { route, status } = useRouteStore((state) => { var _a; return (_a = state.routes[routeId]) !== null && _a !== void 0 ? _a : {}; });
+    const { route, status } = useRouteStore((state) => state.routes[routeId]);
     const [updateRoute, restartRoute, removeRoute] = useRouteStore((state) => [state.updateRoute, state.restartRoute, state.removeRoute], shallow);
     const updateCallback = (updatedRoute) => {
         console.log('Route updated.', updatedRoute);

package/hooks/useScrollableContainer.js

@@ -1,5 +1,5 @@
 import { useLayoutEffect, useState } from 'react';
-import { ElementId } from '../utils/elements';
+import { ElementId } from '../utils';
 export const useScrollableContainer = () => {
     const [containerElement, setContainerElement] = useState(() => document.getElementById(ElementId.ScrollableContainer));
     useLayoutEffect(() => {

package/hooks/useSwapRoutes.js

@@ -44,8 +44,8 @@ export const useSwapRoutes = () => {
         !isNaN(toChainId) &&
         Boolean(fromTokenAddress) &&
         Boolean(toTokenAddress) &&
-        Boolean(fromTokenAmount) &&
         !isNaN(fromTokenAmount) &&
+        Number(fromTokenAmount) > 0 &&
         !Number.isNaN(slippage);
     const queryKey = [
         'routes',
@@ -96,11 +96,12 @@ export const useSwapRoutes = () => {
         // check that the current route is selected from existing routes
         const isCurrentRouteInSet = data === null || data === void 0 ? void 0 : data.routes.some((route) => route.id === (currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.id));
         const recommendedRoute = data === null || data === void 0 ? void 0 : data.routes[0];
-        // we don't want to set the current route again if it's already selected from existing routes
-        if (!isCurrentRouteInSet && currentRoute !== recommendedRoute) {
+        // we don't want to set the current route again on mount if it's already selected from existing routes
+        if (!isCurrentRouteInSet) {
             setCurrentRoute(recommendedRoute);
         }
-    }, [currentRoute, data === null || data === void 0 ? void 0 : data.routes, setCurrentRoute]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data === null || data === void 0 ? void 0 : data.routes, setCurrentRoute]);
     return {
         routes: data === null || data === void 0 ? void 0 : data.routes,
         isLoading: isEnabled && isLoading,

package/hooks/useTelemetry.js

@@ -1,10 +1,18 @@
+/* eslint-disable consistent-return */
 import { useEffect } from 'react';
 import { initSentry } from '../config/sentry';
 export const useTelemetry = (disabled) => {
     useEffect(() => {
-        if (process.env.NODE_ENV === 'production' && disabled) {
-            console.warn('Enable crash reports and diagnostic data to be collected. This helps us to better understand how the widget is performing and where improvements need to be made.');
-            initSentry(false);
+        if (disabled) {
+            if (process.env.NODE_ENV === 'production') {
+                console.warn('Enable crash reports and diagnostic data to be collected. This helps us to better understand how the widget is performing and where improvements need to be made.');
+            }
+        }
+        else {
+            initSentry(true);
+            return () => {
+                initSentry(false);
+            };
         }
     }, [disabled]);
 };

package/hooks/useTokenBalance.js

@@ -11,7 +11,7 @@ import { useCallback } from 'react';
 import { useQuery, useQueryClient } from 'react-query';
 import { LiFi } from '../config/lifi';
 import { useWallet } from '../providers/WalletProvider';
-import { formatTokenAmount } from '../utils/format';
+import { formatTokenAmount } from '../utils';
 import { useToken } from './useToken';
 export const useTokenBalance = (chainId, tokenAddress) => {
     const { account } = useWallet();
@@ -26,9 +26,9 @@ export const useTokenBalance = (chainId, tokenAddress) => {
     }), {
         enabled: Boolean(account.address) && Boolean(token),
         refetchIntervalInBackground: true,
-        refetchInterval: 60000,
-        staleTime: 60000,
-        cacheTime: 60000,
+        refetchInterval: 30000,
+        staleTime: 30000,
+        cacheTime: 30000,
     });
     const refetchBalance = useCallback((chainId, tokenAddress) => __awaiter(void 0, void 0, void 0, function* () {
         if (!chainId && !tokenAddress) {

package/hooks/useTokenBalances.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { useQuery } from 'react-query';
 import { LiFi } from '../config/lifi';
 import { useWallet } from '../providers/WalletProvider';
-import { formatTokenAmount } from '../utils/format';
+import { formatTokenAmount } from '../utils';
 import { useChains } from './useChains';
 import { useTokens } from './useTokens';
 export const useTokenBalances = (selectedChainId) => {

package/index.js

@@ -1,10 +1,8 @@
 import { App } from './App';
 import { AppDrawer } from './AppDrawer';
-import { initSentry } from './config/sentry';
 import './fonts/inter.css';
 import { configureReactI18next } from './i18n';
 export * from './types';
-initSentry(true);
 configureReactI18next();
 // ClassNameGenerator.configure((componentName) => componentName.replace('Mui', ''));
 export const LiFiWidget = App;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.10.1",
+  "version": "1.10.4",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "sideEffects": false,
   "main": "./index.js",
@@ -42,7 +42,7 @@
     "@ethersproject/experimental": "^5.6.3",
     "@ethersproject/providers": "^5.6.8",
     "@lifi/sdk": "^1.0.2",
-    "@lifi/wallet-management": "^1.1.1",
+    "@lifi/wallet-management": "^1.1.2",
     "@mui/icons-material": "^5.8.4",
     "@mui/lab": "^5.0.0-alpha.90",
     "@mui/material": "^5.9.0",

package/pages/MainPage/MainSwapButton.js

@@ -12,7 +12,7 @@ import { useNavigate } from 'react-router-dom';
 import { SwapButton } from '../../components/SwapButton';
 import { useSwapRoutes } from '../../hooks';
 import { useCurrentRoute, useSetExecutableRoute } from '../../stores';
-import { routes } from '../../utils/routes';
+import { navigationRoutes } from '../../utils';
 export const MainSwapButton = () => {
     const navigate = useNavigate();
     const [currentRoute] = useCurrentRoute();
@@ -22,7 +22,7 @@ export const MainSwapButton = () => {
         if (currentRoute &&
             (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.some((route) => route.id === currentRoute.id))) {
             setExecutableRoute(currentRoute);
-            navigate(routes.swap, {
+            navigate(navigationRoutes.swap, {
                 state: { routeId: currentRoute.id },
             });
         }

package/pages/SelectWalletPage/SelectWalletPage.style.js

@@ -2,7 +2,7 @@ import { ListItem, ListItemButton, ListItemText, Typography, } from '@mui/materi
 import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
 import { listItemTextClasses } from '@mui/material/ListItemText';
 import { styled } from '@mui/material/styles';
-import { getContrastAlphaColor } from '../../utils/colors';
+import { getContrastAlphaColor } from '../../utils';
 export const WalletListItemButton = styled(ListItemButton)(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusSecondary,
     paddingLeft: theme.spacing(1.5),

package/pages/SettingsPage/SlippageInput.js

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { CardContainer, CardTitle } from '../../components/Card';
 import { Input } from '../../components/Input';
 import { useSetSettings, useSettings } from '../../stores';
-import { formatSlippage } from '../../utils/format';
+import { formatSlippage } from '../../utils';
 export const SlippageInput = () => {
     const { t } = useTranslation();
     const [setValue] = useSetSettings();

package/pages/SwapPage/StatusBottomSheet.js

@@ -13,6 +13,7 @@ import { IconCircle, IconContainer, iconStyles, } from './StatusBottomSheet.styl
 import { Button } from './SwapPage.style';
 import { getProcessMessage } from './utils';
 export const StatusBottomSheet = ({ status, route, }) => {
+    var _a, _b, _c, _d, _e;
     const { t } = useTranslation();
     const navigate = useNavigate();
     const ref = useRef(null);
@@ -75,5 +76,5 @@ export const StatusBottomSheet = ({ status, route, }) => {
             (_b = ref.current) === null || _b === void 0 ? void 0 : _b.openDrawer();
         }
     }, [refetchBalance, status]);
-    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (_jsx(InfoIcon, { color: "primary", sx: iconStyles })) : null, status === 'success' ? (_jsx(DoneIcon, { color: "success", sx: iconStyles })) : null, status === 'error' ? (_jsx(WarningIcon, { color: "error", sx: iconStyles })) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(StepToken, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), py: 1 })) : null] }), _jsx(Typography, Object.assign({ pt: 2, pb: 1 }, { children: message })), _jsxs(Button, Object.assign({ variant: "contained", disableElevation: true, fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.okay') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.tryAgain') : null] })), status === 'success' ? (_jsx(Button, Object.assign({ variant: "outlined", disableElevation: true, fullWidth: true, onClick: handleClose }, { children: t('button.seeDetails') }))) : null] })) })));
+    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (_jsx(InfoIcon, { color: "primary", sx: iconStyles })) : null, status === 'success' ? (_jsx(DoneIcon, { color: "success", sx: iconStyles })) : null, status === 'error' ? (_jsx(WarningIcon, { color: "error", sx: iconStyles })) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(StepToken, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_e = (_c = (_b = (_a = route.steps.at(-1)) === null || _a === void 0 ? void 0 : _a.execution) === null || _b === void 0 ? void 0 : _b.toAmount) !== null && _c !== void 0 ? _c : (_d = route.steps.at(-1)) === null || _d === void 0 ? void 0 : _d.estimate.toAmount) !== null && _e !== void 0 ? _e : route.toAmount }), py: 1 })) : null] }), _jsx(Typography, Object.assign({ pt: 2, pb: 1 }, { children: message })), _jsxs(Button, Object.assign({ variant: "contained", disableElevation: true, fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.okay') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.tryAgain') : null] })), status === 'success' ? (_jsx(Button, Object.assign({ variant: "outlined", disableElevation: true, fullWidth: true, onClick: handleClose }, { children: t('button.seeDetails') }))) : null] })) })));
 };

package/pages/SwapPage/SwapPage.js

@@ -14,7 +14,7 @@ export const SwapPage = () => {
     const { t } = useTranslation();
     const { state } = useLocation();
     const navigate = useNavigate();
-    const { route, status, executeRoute, restartRoute, removeRoute } = useRouteExecution(state.routeId);
+    const { route, status, executeRoute, restartRoute, removeRoute } = useRouteExecution(state === null || state === void 0 ? void 0 : state.routeId);
     const handleRemoveRoute = () => {
         removeRoute();
         navigate(-1);
@@ -36,7 +36,10 @@ export const SwapPage = () => {
             return t('button.restartSwap');
         }
     };
-    return (_jsxs(Container, { children: [route === null || route === void 0 ? void 0 : route.steps.map((step, index, steps) => (_jsxs(Fragment, { children: [_jsx(StepItem, { step: step, fromToken: index === 0
-                            ? Object.assign(Object.assign({}, route.fromToken), { amount: route.fromAmount }) : undefined, toToken: index === steps.length - 1
-                            ? Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }) : undefined }), steps.length > 1 && index !== steps.length - 1 ? (_jsx(StepDivider, {})) : null] }, step.id))), _jsx(InsufficientGasOrFundsMessage, { mt: 2 }), status === 'idle' || status === 'error' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SwapButton, { onClick: handleSwapClick, text: getSwapButtonText() }) }))) : null, status === 'error' ? (_jsx(Button, Object.assign({ variant: "outlined", disableElevation: true, fullWidth: true, onClick: handleRemoveRoute }, { children: t('button.removeSwap') }))) : null, _jsx(StatusBottomSheet, { status: status, route: route })] }));
+    return (_jsxs(Container, { children: [route === null || route === void 0 ? void 0 : route.steps.map((step, index, steps) => {
+                var _a, _b;
+                return (_jsxs(Fragment, { children: [_jsx(StepItem, { step: step, fromToken: index === 0
+                                ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined, toToken: index === steps.length - 1
+                                ? Object.assign(Object.assign({}, step.action.toToken), { amount: (_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount }) : undefined }), steps.length > 1 && index !== steps.length - 1 ? (_jsx(StepDivider, {})) : null] }, step.id));
+            }), status === 'idle' ? _jsx(InsufficientGasOrFundsMessage, { mt: 2 }) : null, status === 'idle' || status === 'error' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SwapButton, { onClick: handleSwapClick, text: getSwapButtonText() }) }))) : null, status === 'error' ? (_jsx(Button, Object.assign({ variant: "outlined", disableElevation: true, fullWidth: true, onClick: handleRemoveRoute }, { children: t('button.removeSwap') }))) : null, _jsx(StatusBottomSheet, { status: status, route: route })] }));
 };

package/pages/SwapPage/utils.js

@@ -1,5 +1,5 @@
 import { LifiErrorCode, MetaMaskProviderErrorCode, } from '@lifi/sdk';
-import { formatTokenAmount } from '../../utils/format';
+import { formatTokenAmount } from '../../utils';
 const formatProcessMessage = (initialMessage, args = {}) => {
     return Object.keys(args).reduce((message, key) => {
         return message.replace(`{${key}}`, args[key]);

package/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../../components/SwapRouteCard';
 import { useSwapRoutes } from '../../hooks';
 import { useCurrentRoute, useSetExecutableRoute } from '../../stores';
-import { routes } from '../../utils/routes';
+import { navigationRoutes } from '../../utils';
 import { Stack } from './SwapRoutesPage.style';
 export const SwapRoutesPage = () => {
     const navigate = useNavigate();
@@ -13,11 +13,14 @@ export const SwapRoutesPage = () => {
     const setExecutableRoute = useSetExecutableRoute();
     const handleRouteClick = (route) => {
         setExecutableRoute(route);
-        navigate(routes.swap, { state: { routeId: route.id }, replace: true });
+        navigate(navigationRoutes.swap, {
+            state: { routeId: route.id },
+            replace: true,
+        });
     };
     useEffect(() => {
         if (!(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && !isLoading && !isFetching) {
-            navigate(routes.home);
+            navigate(navigationRoutes.home);
         }
         // redirect to the home page if no routes are found on page reload
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/utils/index.d.ts

@@ -0,0 +1,6 @@
+export * from './colors';
+export * from './deepClone';
+export * from './elements';
+export * from './format';
+export * from './input';
+export * from './navigationRoutes';

package/utils/index.js

@@ -0,0 +1,6 @@
+export * from './colors';
+export * from './deepClone';
+export * from './elements';
+export * from './format';
+export * from './input';
+export * from './navigationRoutes';

package/utils/navigationRoutes.d.ts

@@ -0,0 +1,11 @@
+export declare const navigationRoutes: {
+    home: string;
+    selectWallet: string;
+    settings: string;
+    fromToken: string;
+    toToken: string;
+    swapRoutes: string;
+    swap: string;
+};
+export declare const navigationRoutesValues: string[];
+export declare type NavigationRouteType = keyof typeof navigationRoutes;

package/utils/{routes.js → navigationRoutes.js}

@@ -1,4 +1,4 @@
-export const routes = {
+export const navigationRoutes = {
     home: '/',
     selectWallet: 'select-wallet',
     settings: 'settings',
@@ -7,4 +7,4 @@ export const routes = {
     swapRoutes: 'swap-routes',
     swap: 'swap',
 };
-export const routesValues = Object.values(routes);
+export const navigationRoutesValues = Object.values(navigationRoutes);

package/utils/routes.d.ts

@@ -1,11 +0,0 @@
-export declare const routes: {
-    home: string;
-    selectWallet: string;
-    settings: string;
-    fromToken: string;
-    toToken: string;
-    swapRoutes: string;
-    swap: string;
-};
-export declare const routesValues: string[];
-export declare type RouteType = keyof typeof routes;