@lifi/widget 1.11.0 → 1.11.1

package/App.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Route, Routes } from 'react-router-dom';
+import { useRoutes } from 'react-router-dom';
 import { AppProvider } from './AppProvider';
 import { AppContainer, FlexContainer } from './components/AppContainer';
 import { Header } from './components/Header';
@@ -19,5 +19,57 @@ export const App = ({ config }) => {
     return (_jsx(AppProvider, Object.assign({ config: config }, { children: _jsx(AppDefault, {}) })));
 };
 export const AppDefault = () => {
-    return (_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsx(FlexContainer, Object.assign({ disableGutters: true }, { children: _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsx(MainPage, {}) }), _jsx(Route, { path: navigationRoutes.selectWallet, element: _jsx(SelectWalletPage, {}) }), _jsx(Route, { path: navigationRoutes.settings, element: _jsx(SettingsPage, {}) }), _jsx(Route, { path: navigationRoutes.swapHistory, element: _jsx(SwapHistoryPage, {}) }), _jsx(Route, { path: navigationRoutes.swapDetails, element: _jsx(SwapDetailsPage, {}) }), _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.swap, element: _jsx(SwapPage, {}) }), _jsx(Route, { path: "*", element: _jsx(NotFound, {}) })] }) })), _jsx(PoweredBy, {}), _jsx(Initializer, {})] }));
+    return (_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsx(FlexContainer, Object.assign({ disableGutters: true }, { children: _jsx(AppRoutes, {}) })), _jsx(PoweredBy, {}), _jsx(Initializer, {})] }));
+};
+const AppRoutes = () => {
+    const element = useRoutes([
+        {
+            path: '/',
+            element: _jsx(MainPage, {}),
+        },
+        {
+            path: navigationRoutes.settings,
+            element: _jsx(SettingsPage, {}),
+        },
+        {
+            path: navigationRoutes.fromToken,
+            element: _jsx(SelectTokenPage, { formType: "from" }),
+        },
+        {
+            path: navigationRoutes.toToken,
+            element: _jsx(SelectTokenPage, { formType: "to" }),
+        },
+        {
+            path: navigationRoutes.swapRoutes,
+            element: _jsx(SwapRoutesPage, {}),
+        },
+        {
+            path: navigationRoutes.swapHistory,
+            element: _jsx(SwapHistoryPage, {}),
+        },
+        {
+            path: `${navigationRoutes.swapHistory}/${navigationRoutes.swapDetails}`,
+            element: _jsx(SwapDetailsPage, {}),
+        },
+        ...[
+            navigationRoutes.selectWallet,
+            `${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`,
+            `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`,
+        ].map((path) => ({
+            path,
+            element: _jsx(SelectWalletPage, {}),
+        })),
+        ...[
+            navigationRoutes.swapExecution,
+            `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}`,
+        ].map((path) => ({
+            path,
+            element: _jsx(SwapPage, {}),
+        })),
+        {
+            path: '*',
+            element: _jsx(NotFound, {}),
+        },
+    ]);
+    return element;
 };

package/components/GasSufficiencyMessage/GasSufficiencyMessage.js

@@ -20,22 +20,15 @@ export const GasSufficiencyMessage = (_a) => {
     var { route } = _a, props = __rest(_a, ["route"]);
     const { t } = useTranslation();
     const { insufficientFunds, insufficientGas } = useGasSufficiency(route);
-    if (!insufficientFunds || !insufficientGas.length) {
+    if (!insufficientFunds && !insufficientGas.length) {
         return null;
     }
-    let title;
-    let message;
-    if (insufficientFunds) {
-        message = t(`swap.warning.message.insufficientFunds`);
-    }
-    else if (insufficientGas.length) {
-        title = t(`swap.warning.title.insufficientGas`);
-        message = t(`swap.warning.message.insufficientGas`);
-    }
     return (_jsxs(MessageCard, Object.assign({}, props, { children: [_jsx(WarningIcon, { sx: {
                     marginTop: 2,
                     marginLeft: 2,
-                } }), _jsxs(Box, { children: [title ? _jsx(CardTitle, { children: title }) : null, _jsx(Typography, Object.assign({ variant: "body2", px: 2, pb: !insufficientFunds && insufficientGas.length ? 0 : 2, pt: title ? 1 : 2 }, { children: message })), !insufficientFunds && insufficientGas.length
+                } }), _jsxs(Box, { children: [insufficientGas.length ? (_jsx(CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? (_jsx(Typography, Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length ? 0 : 2, pt: insufficientGas.length ? 1 : 2 }, { children: insufficientFunds
+                            ? t(`swap.warning.message.insufficientFunds`)
+                            : null }))) : null, insufficientGas.length ? (_jsx(Typography, Object.assign({ variant: "body2", px: 2, pt: 1 }, { children: t(`swap.warning.message.insufficientGas`) }))) : null, insufficientGas.length
                         ? insufficientGas.map((item, index) => {
                             var _a, _b;
                             return (_jsx(Typography, Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length - 1 === index ? 2 : 0, pt: 0.5 }, { children: t(`swap.tokenOnChainAmount`, {

package/components/Header/NavigationHeader.js

@@ -4,7 +4,7 @@ import { Box, IconButton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import { useWallet } from '../../providers/WalletProvider';
-import { navigationRoutes } from '../../utils';
+import { navigationRoutes, navigationRoutesValues } from '../../utils';
 import { HeaderAppBar } from './Header.style';
 import { useHeaderActionStore } from './useHeaderActionStore';
 const backButtonRoutes = [
@@ -14,20 +14,22 @@ const backButtonRoutes = [
     navigationRoutes.fromToken,
     navigationRoutes.toToken,
     navigationRoutes.swapRoutes,
-    navigationRoutes.swap,
+    navigationRoutes.swapExecution,
     navigationRoutes.swapDetails,
 ];
 export const NavigationHeader = () => {
     const { t } = useTranslation();
-    const { pathname } = useLocation();
     const navigate = useNavigate();
     const { account } = useWallet();
-    const { path: actionPath, element } = useHeaderActionStore();
+    const { element } = useHeaderActionStore();
+    const { pathname } = useLocation();
+    const path = pathname.substring(pathname.lastIndexOf('/') + 1);
+    const hasPath = navigationRoutesValues.includes(path);
     const handleBack = () => {
         navigate(-1);
     };
     const handleHeaderTitle = () => {
-        switch (pathname) {
+        switch (path) {
             case navigationRoutes.selectWallet:
                 return t(`header.selectWallet`);
             case navigationRoutes.settings:
@@ -40,7 +42,7 @@ export const NavigationHeader = () => {
                 return t(`header.to`);
             case navigationRoutes.swapRoutes:
                 return t(`header.routes`);
-            case navigationRoutes.swap:
+            case navigationRoutes.swapExecution:
                 return t(`header.swap`);
             case navigationRoutes.swapDetails:
                 return t(`header.swapDetails`);
@@ -48,5 +50,5 @@ export const NavigationHeader = () => {
                 return t(`header.swap`);
         }
     };
-    return (_jsxs(HeaderAppBar, Object.assign({ elevation: 0 }, { children: [backButtonRoutes.includes(pathname) ? (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "start", onClick: handleBack }, { children: _jsx(ArrowBackIcon, {}) }))) : null, _jsx(Typography, Object.assign({ fontSize: pathname === '/' ? 24 : 18, align: pathname === '/' ? 'left' : 'center', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive ? (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "swap-history", edge: "start", onClick: () => navigate(navigationRoutes.swapHistory) }, { children: _jsx(HistoryIcon, {}) }))) : null, _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: () => navigate(navigationRoutes.settings) }, { children: _jsx(SettingsIcon, {}) }))] }) }), _jsx(Route, { path: actionPath !== null && actionPath !== void 0 ? actionPath : '*', element: element || _jsx(Box, { width: 28, height: 40 }) })] })] })));
+    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 ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive ? (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "swap-history", edge: "start", onClick: () => navigate(navigationRoutes.swapHistory) }, { children: _jsx(HistoryIcon, {}) }))) : null, _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: () => navigate(navigationRoutes.settings) }, { children: _jsx(SettingsIcon, {}) }))] }) }), _jsx(Route, { path: "*", element: element || _jsx(Box, { width: 28, height: 40 }) })] })] })));
 };

package/components/Header/types.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
 export interface HeaderActionState {
-    path?: string | null;
     element?: React.ReactNode | null;
 }
 export interface HeaderActionStore extends HeaderActionState {
-    setAction(path?: string, element?: React.ReactNode | null): () => void;
+    setAction(element?: React.ReactNode | null): () => void;
     removeAction(): void;
 }

package/components/Header/useHeaderActionStore.d.ts

@@ -3,4 +3,4 @@ import { HeaderActionStore } from './types';
 export declare const useHeaderActionStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<HeaderActionStore>, "setState"> & {
     setState(nextStateOrUpdater: HeaderActionStore | Partial<HeaderActionStore> | ((state: import("immer/dist/internal").WritableDraft<HeaderActionStore>) => void), shouldReplace?: boolean | undefined): void;
 }>;
-export declare const useSetHeaderAction: () => (path?: string | undefined, element?: import("react").ReactNode) => () => void;
+export declare const useSetHeaderAction: () => (element?: import("react").ReactNode) => () => void;

package/components/Header/useHeaderActionStore.js

@@ -2,16 +2,14 @@
 import create from 'zustand';
 import { immer } from 'zustand/middleware/immer';
 export const useHeaderActionStore = create()(immer((set, get) => ({
-    setAction: (path, element) => {
+    setAction: (element) => {
         set((state) => {
-            state.path = path;
             state.element = element;
         });
         return get().removeAction;
     },
     removeAction: () => {
         set((state) => {
-            state.path = null;
             state.element = null;
         });
     },

package/components/SwapInProgress/SwapInProgress.js

@@ -16,7 +16,7 @@ export const SwapInProgress = (props) => {
     const { account } = useWallet();
     const executingRoutes = useExecutingRoutes(account.address);
     const handleCardClick = useCallback((routeId) => {
-        navigate(navigationRoutes.swap, { state: { routeId } });
+        navigate(navigationRoutes.swapExecution, { state: { routeId } });
     }, [navigate]);
     if (!(executingRoutes === null || executingRoutes === void 0 ? void 0 : executingRoutes.length)) {
         return null;

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/useGasSufficiency.js

@@ -82,7 +82,7 @@ export const useGasSufficiency = (route) => {
             return false;
         }
         const balance = Big((_b = (_a = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === fromToken)) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);
-        return Big(fromAmount).gte(balance);
+        return Big(fromAmount).gt(balance);
     }, [account.isActive, fromAmount, fromChainTokenBalances, fromToken]);
     return {
         insufficientGas,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "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",

package/pages/MainPage/MainSwapButton.js

@@ -21,7 +21,7 @@ export const MainSwapButton = () => {
     const handleClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (currentRoute) {
             setExecutableRoute(currentRoute);
-            navigate(navigationRoutes.swap, {
+            navigate(navigationRoutes.swapExecution, {
                 state: { routeId: currentRoute.id },
             });
         }

package/pages/MainPage/SwapRoutes.js

@@ -32,5 +32,5 @@ export const SwapRoutes = (props) => {
                                     borderWidth: !routeNotFound && (isFetching || (routes && routes.length > 1))
                                         ? 1
                                         : 0,
-                                } }, { children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, { minWidth: "100%", dense: true })) : isLoading || isFetching || !currentRoute ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true }), _jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true })] })) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, active: true, dense: true }), routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], dense: true })) : 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", "aria-label": "swap-routes" }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })), !isFetching ? (_jsx(GasSufficiencyMessage, Object.assign({ route: currentRoute }, props))) : null] }));
+                                } }, { children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, { minWidth: "100%", dense: true })) : isLoading || isFetching || !currentRoute ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true }), _jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true })] })) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, active: true, dense: true }), routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], dense: true })) : 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", "aria-label": "swap-routes" }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })), _jsx(GasSufficiencyMessage, Object.assign({ route: !isFetching ? currentRoute : undefined }, props))] }));
 };

package/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -20,7 +20,6 @@ import { useSetHeaderAction } from '../../components/Header';
 import { Step } from '../../components/Step';
 import { StepDivider } from '../../components/StepDivider';
 import { useRouteStore } from '../../stores';
-import { navigationRoutes } from '../../utils';
 import { Container } from './SwapDetailsPage.style';
 export const SwapDetailsPage = () => {
     var _a, _b;
@@ -44,7 +43,7 @@ export const SwapDetailsPage = () => {
         yield navigator.clipboard.writeText((_c = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.id) !== null && _c !== void 0 ? _c : '');
     });
     useEffect(() => {
-        return setHeaderAction(navigationRoutes.swapDetails, _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: _jsx(DeleteIcon, {}) })));
+        return setHeaderAction(_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: _jsx(DeleteIcon, {}) })));
     }, [setHeaderAction, toggleDialog]);
     const startedAt = new Date((_b = (_a = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps[0].execution) === null || _a === void 0 ? void 0 : _a.process[0].startedAt) !== null && _b !== void 0 ? _b : 0);
     return (_jsxs(Container, { children: [_jsxs(Box, Object.assign({ sx: {

package/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { useSetHeaderAction } from '../../components/Header';
 import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate';
 import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../../components/SwapRouteCard';
@@ -10,25 +10,26 @@ import { navigationRoutes } from '../../utils';
 import { Stack } from './SwapRoutesPage.style';
 export const SwapRoutesPage = () => {
     const navigate = useNavigate();
+    const { pathname } = useLocation();
     const setHeaderAction = useSetHeaderAction();
     const { routes: swapRoutes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
     const setExecutableRoute = useSetExecutableRoute();
     const handleRouteClick = (route) => {
         setExecutableRoute(route);
-        navigate(navigationRoutes.swap, {
+        navigate(navigationRoutes.swapExecution, {
             state: { routeId: route.id },
         });
     };
     useEffect(() => {
         if (!(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && !isLoading && !isFetching) {
-            navigate(navigationRoutes.home);
+            navigate(pathname.substring(0, pathname.lastIndexOf('/')));
         }
         // redirect to the home page if no routes are found on page reload
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useEffect(() => {
-        return setHeaderAction(navigationRoutes.swapRoutes, _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt, timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 }, size: "medium", edge: "end" }));
+        return setHeaderAction(_jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt, timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 }, size: "medium", edge: "end" }));
     }, [dataUpdatedAt, isFetching, refetch, refetchTime, setHeaderAction]);
     const routeNotFound = !(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && isFetched;
-    return (_jsx(Stack, Object.assign({ direction: "column", spacing: 2 }, { children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, { dense: true })) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, { dense: true }, index)))) : (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.map((route, index) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route) }, route.id)))) })));
+    return (_jsx(Stack, Object.assign({ direction: "column", spacing: 2 }, { children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, {}, index)))) : (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.map((route, index) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route) }, route.id)))) })));
 };

package/utils/navigationRoutes.d.ts

@@ -5,7 +5,7 @@ export declare const navigationRoutes: {
     fromToken: string;
     toToken: string;
     swapRoutes: string;
-    swap: string;
+    swapExecution: string;
     swapHistory: string;
     swapDetails: string;
 };

package/utils/navigationRoutes.js

@@ -1,12 +1,12 @@
 export const navigationRoutes = {
     home: '/',
-    selectWallet: '/select-wallet',
-    settings: '/settings',
-    fromToken: '/select-from-token',
-    toToken: '/select-to-token',
-    swapRoutes: '/swap-routes',
-    swap: '/swap',
-    swapHistory: '/swap-history',
-    swapDetails: '/swap-details',
+    selectWallet: 'select-wallet',
+    settings: 'settings',
+    fromToken: 'select-from-token',
+    toToken: 'select-to-token',
+    swapRoutes: 'swap-routes',
+    swapExecution: 'swap-execution',
+    swapHistory: 'swap-history',
+    swapDetails: 'swap-details',
 };
 export const navigationRoutesValues = Object.values(navigationRoutes);