@lifi/widget 1.8.0 → 1.10.0

package/App.js

@@ -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.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: 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, {})] }));
 };

package/AppDrawer.style.d.ts

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

package/README.md

@@ -1,19 +1,95 @@
-# @lifi/widget
+<div align="center">
 
-LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
+[![license](https://img.shields.io/badge/license-Apache%202-blue)](/LICENSE.md)
+[![npm latest package](https://img.shields.io/npm/v/@lifi/widget/latest.svg)](https://www.npmjs.com/package/@lifi/widget)
+[![npm downloads](https://img.shields.io/npm/dm/@lifi/widget.svg)](https://www.npmjs.com/package/@lifi/widget)
+[![Average time to resolve an issue](https://isitmaintained.com/badge/resolution/lifinance/widget.svg)](https://isitmaintained.com/project/lifinance/widget)
+[![Follow on Twitter](https://img.shields.io/twitter/follow/lifiprotocol.svg?label=follow+LI.FI)](https://twitter.com/lifiprotocol)
+
+</div>
+
+<h1 align="center">LI.FI Widget</h1>
+
+This repository contains LI.FI Widget and supporting libraries.
+
+- [_LI.FI Widget_](https://li.fi/widget/) for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
+
+- [_LI.FI Wallet Management_](https://www.npmjs.com/package/@lifi/wallet-management) is our library of hooks that can help you gain complete control over your app's wallet management.
 
 ## Installation
 
-Install the package in your project directory with:
+### LI.FI Widget
+
+LI.FI Widget is available as an [npm package](https://www.npmjs.com/package/@lifi/widget).
+
+**npm:**
 
 ```sh
-// with npm
 npm install @lifi/widget
+```
 
-// with yarn
+**yarn:**
+
+```sh
 yarn add @lifi/widget
 ```
 
+### LI.FI Wallet Management
+
+LI.FI Wallet Management is available as an [npm package](https://www.npmjs.com/package/@lifi/wallet-management).
+
+**npm:**
+
+```sh
+npm install @lifi/wallet-management
+```
+
+**yarn:**
+
+```sh
+yarn add @lifi/wallet-management
+```
+
+## Getting started with LI.FI Widget
+
+Here is an example of a basic app using LI.FI Widget:
+
+```jsx
+import { LiFiWidget, WidgetConfig } from '@lifi/widget';
+import { useMemo } from 'react';
+
+export const WidgetPage = () => {
+  const widgetConfig: WidgetConfig = useMemo(() => {
+    return {
+      containerStyle: {
+        border: `1px solid ${
+          window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'rgb(66, 66, 66)'
+            : 'rgb(234, 234, 234)'
+        }`,
+        borderRadius: '16px',
+        display: 'flex',
+      },
+    };
+  }, []);
+
+  return <LiFiWidget config={widgetConfig} />;
+};
+```
+
+## Examples
+
+Visit our [playground](https://testing.li.finance) to see how you can customize your [LI.FI Widget](https://www.npmjs.com/package/@lifi/widget) experience.
+
 ## Documentation
 
-[The documentation.](https://docs.li.fi/)
+[LI.FI Documentation](https://docs.li.fi)
+
+## Changelog
+
+The [changelog](/CHANGELOG.md) is regularly updated to reflect what's changed in each new release.
+
+## License
+
+This project is licensed under the terms of the
+[Apache-2.0](/LICENSE.md).

package/components/Header/Header.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useWidgetConfig } from '@lifi/widget/providers/WidgetProvider';
 import { useLocation } from 'react-router-dom';
+import { useWidgetConfig } from '../../providers/WidgetProvider';
 import { ElementId } from '../../utils/elements';
 import { routes } from '../../utils/routes';
 import { Container } from './Header.style';

package/components/ReverseTokensButton/ReverseTokensButton.style.d.ts

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

package/components/SwapButton/SwapButton.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
-export declare const SwapButton: React.FC;
+import { SwapButtonProps } from './types';
+export declare const SwapButton: React.FC<SwapButtonProps>;

package/components/SwapButton/SwapButton.js

@@ -12,23 +12,19 @@ import { ChainId } from '@lifi/sdk';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useChains, useHasSufficientBalance, useSwapRoutes } from '../../hooks';
+import { useChains, useHasSufficientBalance } from '../../hooks';
 import { SwapFormKeyHelper } from '../../providers/SwapFormProvider';
 import { useWallet } from '../../providers/WalletProvider';
 import { useWidgetConfig } from '../../providers/WidgetProvider';
-import { useCurrentRoute, useSetExecutableRoute } from '../../stores';
 import { routes } from '../../utils/routes';
 import { Button } from './SwapButton.style';
-export const SwapButton = () => {
+export const SwapButton = ({ onClick, text, loading, }) => {
     var _a;
     const navigate = useNavigate();
     const { t } = useTranslation();
     const { getChainById } = useChains();
     const config = useWidgetConfig();
     const { account, switchChain, connect: walletConnect } = useWallet();
-    const [currentRoute] = useCurrentRoute();
-    const setExecutableRoute = useSetExecutableRoute();
-    const { routes: swapRoutes, isLoading, isFetching } = useSwapRoutes();
     const { hasGasOnStartChain, hasGasOnCrossChain, hasSufficientBalance } = useHasSufficientBalance();
     const [chainId] = useWatch({
         name: [SwapFormKeyHelper.getChainKey('from')],
@@ -47,12 +43,8 @@ export const SwapButton = () => {
             yield switchChain(chainId);
             // check that the current route exists in the up to date route list
         }
-        else if (currentRoute &&
-            (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.some((route) => route.id === currentRoute.id))) {
-            setExecutableRoute(currentRoute);
-            navigate(routes.swap, {
-                state: { routeId: currentRoute.id },
-            });
+        else {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     });
     const getButtonText = () => {
@@ -60,7 +52,7 @@ export const SwapButton = () => {
             if (!isCurrentChainMatch) {
                 return t(`button.switchChain`);
             }
-            return t(`button.swap`);
+            return text || t(`button.swap`);
         }
         return t(`button.connectWallet`);
     };
@@ -69,7 +61,6 @@ export const SwapButton = () => {
         disabled: (!hasSufficientBalance ||
             !hasGasOnStartChain ||
             !hasGasOnCrossChain ||
-            isLoading ||
-            isFetching) &&
+            loading) &&
             isCurrentChainMatch }, { children: getButtonText() })));
 };

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

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

package/components/SwapButton/types.d.ts

@@ -0,0 +1,5 @@
+export interface SwapButtonProps {
+    onClick?(): void;
+    text?: string;
+    loading?: boolean;
+}

package/components/SwapButton/types.js

@@ -0,0 +1 @@
+export {};

package/components/SwapInput/SwapInput.style.d.ts

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

package/components/SwapInput/SwapInputAdornment.style.d.ts

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

package/components/SwapRouteCard/SwapRouteCardSkeleton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material';
+import { SwapRouteCardSkeletonProps } from './types';
+export declare const SwapRouteCardSkeleton: React.FC<SwapRouteCardSkeletonProps & BoxProps>;

package/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Skeleton } from '@mui/material';
+import { Card } from './SwapRouteCard.style';
+export const SwapRouteCardSkeleton = (_a) => {
+    var { active, dense } = _a, other = __rest(_a, ["active", "dense"]);
+    return (_jsxs(Card, Object.assign({ dense: dense }, other, { children: [_jsxs(Box, Object.assign({ sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                } }, { children: [_jsx(Skeleton, { variant: "rectangular", width: 120, height: 24, sx: { borderRadius: 0.5 } }), active ? _jsx(Skeleton, { variant: "circular", width: 24, height: 24 }) : null] })), _jsxs(Box, Object.assign({ my: 2 }, { children: [_jsxs(Box, Object.assign({ sx: {
+                            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 })] })), _jsx(Box, Object.assign({ ml: 6 }, { children: _jsx(Skeleton, { variant: "text", width: 56, height: 22 }) }))] })), _jsxs(Box, Object.assign({ sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                } }, { children: [_jsxs(Box, { children: [_jsx(Skeleton, { variant: "text", width: 56, height: 22 }), _jsx(Skeleton, { variant: "text", width: 52, height: 15 })] }), _jsxs(Box, Object.assign({ sx: {
+                            display: 'flex',
+                            alignItems: 'flex-end',
+                            flexDirection: 'column',
+                        } }, { children: [_jsx(Skeleton, { variant: "text", width: 40, height: 22 }), _jsx(Skeleton, { variant: "text", width: 48, height: 15 })] }))] }))] })));
+};

package/components/SwapRouteCard/SwapRouteNotFoundCard.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material';
+import { SwapRouteCardSkeletonProps } from './types';
+export declare const SwapRouteNotFoundCard: React.FC<SwapRouteCardSkeletonProps & BoxProps>;

package/components/SwapRouteCard/SwapRouteNotFoundCard.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Route as RouteIcon } from '@mui/icons-material';
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Card } from './SwapRouteCard.style';
+export const SwapRouteNotFoundCard = (_a) => {
+    var { active, dense } = _a, other = __rest(_a, ["active", "dense"]);
+    const { t } = useTranslation();
+    return (_jsx(Card, Object.assign({ active: active, dense: dense }, other, { children: _jsxs(Box, Object.assign({ sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexDirection: 'column',
+                flex: 1,
+            }, py: 1.375 }, { children: [_jsx(RouteIcon, { fontSize: "large" }), _jsx(Typography, Object.assign({ fontSize: 16, fontWeight: "500", mt: 2 }, { children: t('swap.info.title.routeNotFound') })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 1 }, { children: t('swap.info.message.routeNotFound') }))] })) })));
+};

package/components/SwapRouteCard/index.d.ts

@@ -1 +1,3 @@
 export * from './SwapRouteCard';
+export * from './SwapRouteCardSkeleton';
+export * from './SwapRouteNotFoundCard';

package/components/SwapRouteCard/index.js

@@ -1 +1,3 @@
 export * from './SwapRouteCard';
+export * from './SwapRouteCardSkeleton';
+export * from './SwapRouteNotFoundCard';

package/components/SwapRouteCard/types.d.ts

@@ -5,3 +5,8 @@ export interface SwapRouteCardProps {
     active?: boolean;
     blur?: boolean;
 }
+export interface SwapRouteCardSkeletonProps {
+    dense?: boolean;
+    active?: boolean;
+    blur?: boolean;
+}

package/components/SwapRoutes/SwapRoutes.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react/no-array-index-key */
 import { KeyboardArrowRight as KeyboardArrowRightIcon } from '@mui/icons-material';
-import { Box, IconButton, Skeleton } from '@mui/material';
+import { Box, IconButton } from '@mui/material';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -9,26 +9,24 @@ import { useSwapRoutes } from '../../hooks';
 import { useCurrentRoute } from '../../stores';
 import { routes } from '../../utils/routes';
 import { CardContainer, CardTitle } from '../Card';
-import { SwapRouteCard } from '../SwapRouteCard';
+import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../SwapRouteCard';
 import { Stack } from './SwapRoutes.style';
 import { SwapRoutesUpdateProgress } from './SwapRoutesUpdateProgress';
 export const SwapRoutes = (props) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const [currentRoute] = useCurrentRoute();
-    const { routes: swapRoutes, isLoading, isFetching } = useSwapRoutes();
+    const { routes: swapRoutes, isLoading, isFetching, isFetched, } = useSwapRoutes();
     const handleCardClick = useCallback(() => {
         navigate(routes.swapRoutes);
     }, [navigate]);
-    if (!(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && !isLoading && !isFetching) {
+    if (!(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && !isLoading && !isFetching && !isFetched) {
         return null;
     }
-    return (_jsxs(CardContainer, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.routes') }), _jsx(SwapRoutesUpdateProgress, { sx: {
+    const routeNotFound = !(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && isFetched;
+    return (_jsxs(CardContainer, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.routes') }), !routeNotFound ? (_jsx(SwapRoutesUpdateProgress, { sx: {
                     position: 'absolute',
                     top: 8,
                     right: 8,
-                } }), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: [_jsx(Stack, Object.assign({ direction: "row", py: 2, pl: 2, pr: 1 }, { children: isLoading || isFetching || !currentRoute ? (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 181, sx: (theme) => ({
-                                borderRadius: theme.shape.borderRadiusSecondary / theme.shape.borderRadius,
-                                minWidth: '100%',
-                            }) })) : (_jsx(SwapRouteCard, { minWidth: "100%", route: currentRoute, active: true, dense: true })) })), _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, _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: [_jsx(Stack, Object.assign({ direction: "row", py: 2, pl: 2, pr: routeNotFound ? 2 : 1 }, { children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, { minWidth: "100%", dense: true })) : isLoading || isFetching || !currentRoute ? (_jsx(SwapRouteCardSkeleton, { minWidth: "100%", active: true, dense: true })) : (_jsx(SwapRouteCard, { minWidth: "100%", route: currentRoute, active: true, dense: true })) })), !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] }))] })));
 };

package/config/lifi.d.ts

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

package/config/lifi.js

@@ -0,0 +1,11 @@
+import LIFI from '@lifi/sdk';
+const defaultConfig = {
+// apiUrl: env.LIFI_API_URL,
+// defaultRouteOptions: {
+//   integrator: 'li.fi',
+// },
+};
+export const LiFi = new LIFI(defaultConfig);
+export const updateLiFiConfig = (configUpdate) => {
+    LiFi.setConfig(Object.assign(Object.assign({}, defaultConfig), configUpdate));
+};

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/useChains.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { useCallback } from 'react';
 import { useQuery } from 'react-query';
-import { LiFi } from '../lifi';
+import { LiFi } from '../config/lifi';
 import { useWidgetConfig } from '../providers/WidgetProvider';
 export const useChains = () => {
     const { disabledChains } = useWidgetConfig();

package/hooks/useHasSufficientBalance.js

@@ -4,10 +4,12 @@ import { useMemo } from 'react';
 import { useWatch } from 'react-hook-form';
 import { useDebouncedWatch } from '.';
 import { SwapFormKey, SwapFormKeyHelper } from '../providers/SwapFormProvider';
+import { useWallet } from '../providers/WalletProvider';
 import { useCurrentRoute } from '../stores';
 import { useTokenBalances } from './useTokenBalances';
 export const useHasSufficientBalance = () => {
     var _a;
+    const { account } = useWallet();
     const [route] = useCurrentRoute();
     const [fromChainId, toChainId, fromToken] = useWatch({
         name: [
@@ -23,7 +25,7 @@ export const useHasSufficientBalance = () => {
     const hasGasOnStartChain = useMemo(() => {
         var _a, _b, _c, _d, _e;
         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 (!gasToken) {
+        if (!account.isActive || !gasToken) {
             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);
@@ -36,26 +38,32 @@ export const useHasSufficientBalance = () => {
             requiredAmount = requiredAmount.plus(tokenBalance);
         }
         return gasTokenBalance.gt(0) && gasTokenBalance.gte(requiredAmount);
-    }, [fromChainTokenBalances, route]);
+    }, [
+        account.isActive,
+        fromChainTokenBalances,
+        route === null || route === void 0 ? void 0 : route.fromChainId,
+        route === null || route === void 0 ? void 0 : route.fromToken.address,
+        route === null || route === void 0 ? void 0 : route.steps,
+    ]);
     const hasGasOnCrossChain = useMemo(() => {
         var _a, _b, _c, _d, _e, _f;
         const gasToken = (_a = lastStep === null || lastStep === void 0 ? void 0 : lastStep.estimate.gasCosts) === null || _a === void 0 ? void 0 : _a[0].token;
-        if (!gasToken || !isSwapStep(lastStep)) {
+        if (!account.isActive || !gasToken || !isSwapStep(lastStep)) {
             return true;
         }
         const balance = Big((_c = (_b = toChainTokenBalances === null || toChainTokenBalances === void 0 ? void 0 : toChainTokenBalances.find((t) => t.address === gasToken.address)) === null || _b === void 0 ? void 0 : _b.amount) !== null && _c !== void 0 ? _c : 0);
         const gasEstimate = (_d = lastStep.estimate.gasCosts) === null || _d === void 0 ? void 0 : _d[0].amount;
         const requiredAmount = Big(gasEstimate || 0).div(Math.pow(10, ((_f = (_e = lastStep.estimate.gasCosts) === null || _e === void 0 ? void 0 : _e[0].token.decimals) !== null && _f !== void 0 ? _f : 0)));
         return balance.gt(0) && balance.gte(requiredAmount);
-    }, [lastStep, toChainTokenBalances]);
+    }, [account.isActive, lastStep, toChainTokenBalances]);
     const hasSufficientBalance = useMemo(() => {
         var _a, _b;
-        if (!fromToken || !fromAmount) {
+        if (!account.isActive || !fromToken || !fromAmount) {
             return true;
         }
         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).lte(balance);
-    }, [fromAmount, fromChainTokenBalances, fromToken]);
+    }, [account.isActive, fromAmount, fromChainTokenBalances, fromToken]);
     return {
         hasGasOnStartChain,
         hasGasOnCrossChain,

package/hooks/useRouteExecution.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { useCallback, useEffect, useRef } from 'react';
 import { useMutation } from 'react-query';
 import shallow from 'zustand/shallow';
-import { LiFi } from '../lifi';
+import { LiFi } from '../config/lifi';
 import { useWallet } from '../providers/WalletProvider';
 import { useRouteStore } from '../stores';
 import { deepClone } from '../utils/deepClone';

package/hooks/useSwapRoutes.d.ts

@@ -2,6 +2,7 @@ export declare const useSwapRoutes: () => {
     routes: import("@lifi/types").Route[] | undefined;
     isLoading: boolean;
     isFetching: boolean;
+    isFetched: boolean;
     dataUpdatedAt: number;
     refetchTime: number;
     refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("react-query").QueryObserverResult<import("@lifi/types").RoutesResponse, unknown>>;

package/hooks/useSwapRoutes.js

@@ -7,11 +7,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import Big from 'big.js';
 import { useEffect } from 'react';
 import { useWatch } from 'react-hook-form';
 import { useQuery, useQueryClient } from 'react-query';
 import { useDebouncedWatch, useToken } from '.';
-import { LiFi } from '../lifi';
+import { LiFi } from '../config/lifi';
 import { SwapFormKey } from '../providers/SwapFormProvider';
 import { useWallet } from '../providers/WalletProvider';
 import { useCurrentRoute, useSettings } from '../stores';
@@ -37,8 +38,9 @@ export const useSwapRoutes = () => {
     });
     const [fromTokenAmount] = useDebouncedWatch([SwapFormKey.FromAmount], 250);
     const { token } = useToken(fromChainId, fromTokenAddress);
-    const isEnabled = Boolean(account.address) &&
-        !isNaN(fromChainId) &&
+    const isEnabled = 
+    // Boolean(account.address) &&
+    !isNaN(fromChainId) &&
         !isNaN(toChainId) &&
         Boolean(fromTokenAddress) &&
         Boolean(toTokenAddress) &&
@@ -62,13 +64,11 @@ export const useSwapRoutes = () => {
     const refetchInterval = previousDataUpdatedAt
         ? Math.min(Math.abs(refetchTime - (Date.now() - previousDataUpdatedAt)), refetchTime)
         : refetchTime;
-    const { data, isLoading, isFetching, dataUpdatedAt, refetch } = useQuery(queryKey, ({ queryKey: [_, address, fromChainId, fromTokenAddress, fromTokenAmount, toChainId, toTokenAddress, slippage, enabledBridges, enabledExchanges, routePriority,], signal, }) => __awaiter(void 0, void 0, void 0, function* () {
+    const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } = useQuery(queryKey, ({ queryKey: [_, address, fromChainId, fromTokenAddress, fromTokenAmount, toChainId, toTokenAddress, slippage, enabledBridges, enabledExchanges, routePriority,], signal, }) => __awaiter(void 0, void 0, void 0, function* () {
         var _b;
         return LiFi.getRoutes({
             fromChainId,
-            // TODO: simplify
-            fromAmount: (Number(fromTokenAmount) *
-                Math.pow(10, ((_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 0))).toFixed(0),
+            fromAmount: Big(Number(fromTokenAmount) * Math.pow(10, ((_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 0))).toString(),
             fromTokenAddress,
             toChainId,
             toTokenAddress,
@@ -105,6 +105,7 @@ export const useSwapRoutes = () => {
         routes: data === null || data === void 0 ? void 0 : data.routes,
         isLoading: isEnabled && isLoading,
         isFetching,
+        isFetched,
         dataUpdatedAt,
         refetchTime,
         refetch,

package/hooks/useTokenBalance.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { useCallback } from 'react';
 import { useQuery, useQueryClient } from 'react-query';
-import { LiFi } from '../lifi';
+import { LiFi } from '../config/lifi';
 import { useWallet } from '../providers/WalletProvider';
 import { formatTokenAmount } from '../utils/format';
 import { useToken } from './useToken';

package/hooks/useTokenBalances.js

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

package/hooks/useTokens.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { useQuery } from 'react-query';
-import { LiFi } from '../lifi';
+import { LiFi } from '../config/lifi';
 export const useTokens = (selectedChainId) => {
     const { data: tokens, isLoading, isFetching, } = useQuery(['tokens', selectedChainId], () => __awaiter(void 0, void 0, void 0, function* () {
         var _a;

package/hooks/useTools.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 import { useQuery } from 'react-query';
-import { LiFi } from '../lifi';
+import { LiFi } from '../config/lifi';
 import { useSettingsStore } from '../stores';
 export const useTools = () => {
     const initializeTools = useSettingsStore((state) => state.initializeTools);

package/i18n/en/translation.json

@@ -68,14 +68,22 @@
         "fundsReceived": "You now have {{amount}} {{tokenSymbol}} in your wallet on {{chainName}} chain."
       }
     },
+    "info": {
+      "title": {
+        "routeNotFound": "No routes available"
+      },
+      "message": {
+        "routeNotFound": "Try another \"from\" and \"to\" token combination."
+      }
+    },
     "warning": {
       "title": {
         "insufficientGas": "Insufficient gas"
       },
       "message": {
-        "insufficientFunds": "You don't have enough funds for this transaction on the start “from” chain.",
-        "insufficientGasOnStartChain": "You need to have enough gas to pay for this transaction on the start “from” chain.",
-        "insufficientGasOnDestinationChain": "You need to have enough gas to pay for this transaction on the destination “to” chain."
+        "insufficientFunds": "You don't have enough funds for this transaction on the start \"from\" chain.",
+        "insufficientGasOnStartChain": "You need to have enough gas to pay for this transaction on the start \"from\" chain.",
+        "insufficientGasOnDestinationChain": "You need to have enough gas to pay for this transaction on the destination \"to\" chain."
       }
     },
     "error": {

package/i18n/index.d.ts

@@ -71,6 +71,14 @@ export declare const resources: {
                         fundsReceived: string;
                     };
                 };
+                info: {
+                    title: {
+                        routeNotFound: string;
+                    };
+                    message: {
+                        routeNotFound: string;
+                    };
+                };
                 warning: {
                     title: {
                         insufficientGas: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "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",
@@ -41,7 +41,7 @@
     "@emotion/styled": "^11.9.3",
     "@ethersproject/experimental": "^5.6.3",
     "@ethersproject/providers": "^5.6.8",
-    "@lifi/sdk": "^1.0.0",
+    "@lifi/sdk": "^1.0.2",
     "@lifi/wallet-management": "^1.1.1",
     "@mui/icons-material": "^5.8.4",
     "@mui/lab": "^5.0.0-alpha.90",
@@ -50,12 +50,12 @@
     "@sentry/react": "^7.6.0",
     "@sentry/tracing": "^7.6.0",
     "big.js": "^6.2.1",
-    "i18next": "^21.8.13",
+    "i18next": "^21.8.14",
     "immer": "^9.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.33.1",
-    "react-i18next": "^11.18.0",
+    "react-i18next": "^11.18.1",
     "react-query": "^4.0.0-beta.23",
     "react-resize-detector": "^7.1.2",
     "react-router-dom": "^6.3.0",

package/pages/MainPage/MainPage.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { InsufficientGasOrFundsMessage } from '../../components/InsufficientGasOrFundsMessage';
 import { SelectChainAndToken } from '../../components/SelectChainAndToken';
-import { SwapButton } from '../../components/SwapButton';
 import { SwapInProgress } from '../../components/SwapInProgress';
 import { SwapInput } from '../../components/SwapInput';
 import { SwapRoutes } from '../../components/SwapRoutes';
 import { FormContainer } from './MainPage.style';
+import { MainSwapButton } from './MainSwapButton';
 export const MainPage = () => {
-    return (_jsxs(FormContainer, Object.assign({ disableGutters: true }, { children: [_jsx(SwapInProgress, { mx: 3, mt: 2, mb: 1 }), _jsx(SelectChainAndToken, { mt: 2, mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 3 }, { children: _jsx(SwapInput, { formType: "from" }) })), _jsx(SwapRoutes, { mx: 3, mb: 3 }), _jsx(InsufficientGasOrFundsMessage, { mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 1 }, { children: _jsx(SwapButton, {}) }))] })));
+    return (_jsxs(FormContainer, Object.assign({ disableGutters: true }, { children: [_jsx(SwapInProgress, { mx: 3, mt: 2, mb: 1 }), _jsx(SelectChainAndToken, { mt: 2, mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 3 }, { children: _jsx(SwapInput, { formType: "from" }) })), _jsx(SwapRoutes, { mx: 3, mb: 3 }), _jsx(InsufficientGasOrFundsMessage, { mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 1 }, { children: _jsx(MainSwapButton, {}) }))] })));
 };

package/pages/MainPage/MainPage.style.d.ts

@@ -8,4 +8,4 @@ export declare const FormContainer: import("@emotion/styled").StyledComponent<{
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "maxWidth" | "fixed" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "maxWidth" | "fixed" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/pages/MainPage/MainPage.style.js

@@ -1,5 +1,5 @@
 import { Container } from '@mui/material';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 export const FormContainer = styled(Container)({
     display: 'flex',
     flexDirection: 'column',

package/pages/MainPage/MainSwapButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MainSwapButton: React.FC;

package/pages/MainPage/MainSwapButton.js

@@ -0,0 +1,31 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+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';
+export const MainSwapButton = () => {
+    const navigate = useNavigate();
+    const [currentRoute] = useCurrentRoute();
+    const setExecutableRoute = useSetExecutableRoute();
+    const { routes: swapRoutes, isLoading, isFetching } = useSwapRoutes();
+    const handleClick = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (currentRoute &&
+            (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.some((route) => route.id === currentRoute.id))) {
+            setExecutableRoute(currentRoute);
+            navigate(routes.swap, {
+                state: { routeId: currentRoute.id },
+            });
+        }
+    });
+    return _jsx(SwapButton, { onClick: handleClick, loading: isLoading || isFetching });
+};

package/pages/SettingsPage/ColorSchemeButtonGroup.style.d.ts

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

package/pages/SwapPage/ExecutionItem.style.d.ts

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

package/pages/SwapPage/SwapPage.js

@@ -1,9 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { InsufficientGasOrFundsMessage } from '../../components/InsufficientGasOrFundsMessage';
-import { useHasSufficientBalance, useRouteExecution } from '../../hooks';
+import { SwapButton } from '../../components/SwapButton';
+import { useRouteExecution } from '../../hooks';
 import { StatusBottomSheet } from './StatusBottomSheet';
 import { StepDivider } from './StepDivider';
 import { StepItem } from './StepItem';
@@ -12,14 +14,29 @@ export const SwapPage = () => {
     const { t } = useTranslation();
     const { state } = useLocation();
     const navigate = useNavigate();
-    const { hasGasOnStartChain, hasGasOnCrossChain, hasSufficientBalance } = useHasSufficientBalance();
     const { route, status, executeRoute, restartRoute, removeRoute } = useRouteExecution(state.routeId);
     const handleRemoveRoute = () => {
         removeRoute();
         navigate(-1);
     };
-    const isDisabled = !hasSufficientBalance || !hasGasOnStartChain || !hasGasOnCrossChain;
+    const handleSwapClick = () => {
+        if (status === 'idle') {
+            executeRoute();
+        }
+        if (status === 'error') {
+            restartRoute();
+        }
+    };
+    // eslint-disable-next-line consistent-return
+    const getSwapButtonText = () => {
+        if (status === 'idle') {
+            return t('button.startSwap');
+        }
+        if (status === 'error') {
+            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' ? (_jsx(Button, Object.assign({ variant: "contained", disableElevation: true, fullWidth: true, onClick: executeRoute, disabled: isDisabled }, { children: t('button.startSwap') }))) : null, status === 'error' ? (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ variant: "contained", disableElevation: true, fullWidth: true, onClick: restartRoute, disabled: isDisabled }, { children: t('button.restartSwap') })), _jsx(Button, Object.assign({ variant: "outlined", disableElevation: true, fullWidth: true, onClick: handleRemoveRoute, disabled: isDisabled }, { children: t('button.removeSwap') }))] })) : null, _jsx(StatusBottomSheet, { status: status, route: route })] }));
+                            ? 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 })] }));
 };

package/pages/SwapPage/SwapPage.style.d.ts

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

package/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -1,28 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Skeleton } from '@mui/material';
+import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { SwapRouteCard } from '../../components/SwapRouteCard';
+import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../../components/SwapRouteCard';
 import { useSwapRoutes } from '../../hooks';
 import { useCurrentRoute, useSetExecutableRoute } from '../../stores';
 import { routes } from '../../utils/routes';
 import { Stack } from './SwapRoutesPage.style';
 export const SwapRoutesPage = () => {
     const navigate = useNavigate();
-    const { routes: swapRoutes, isLoading, isFetching } = useSwapRoutes();
+    const { routes: swapRoutes, isLoading, isFetching, isFetched, } = useSwapRoutes();
     const [currentRoute] = useCurrentRoute();
     const setExecutableRoute = useSetExecutableRoute();
-    if (!(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && !isLoading && !isFetching) {
-        // TODO: make no routes message
-        return null;
-    }
     const handleRouteClick = (route) => {
         setExecutableRoute(route);
         navigate(routes.swap, { state: { routeId: route.id }, replace: true });
     };
-    // A route for this transaction does not exist yet possibly due to liquidity issues or because the amount of tokens you are sending is below the bridge minimum amount.
-    // Please try again later or change the tokens you intend to swap.
-    // If the problem persists, come to our Discord and leave a message in the support channel.
-    return (_jsx(Stack, Object.assign({ direction: "column", spacing: 2 }, { children: isLoading || isFetching
-            ? Array.from({ length: 3 }).map((_, index) => (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 196, sx: { borderRadius: 1 } }, index)))
-            : swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.map((route, index) => (_jsx(SwapRouteCard, { route: route, active: (currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.id) === route.id, onClick: () => handleRouteClick(route) }, route.id))) })));
+    useEffect(() => {
+        if (!(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && !isLoading && !isFetching) {
+            navigate(routes.home);
+        }
+        // redirect to the home page if no routes are found on page reload
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    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, { minWidth: "100%", dense: true })) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, { minWidth: "100%", dense: true }, index)))) : (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.map((route, index) => (_jsx(SwapRouteCard, { route: route, active: (currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.id) === route.id, onClick: () => handleRouteClick(route) }, route.id)))) })));
 };

package/providers/WidgetProvider/WidgetProvider.js

@@ -11,7 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ChainId, getChainByKey } from '@lifi/sdk';
-import { createContext, useContext, useMemo } from 'react';
+import { updateLiFiConfig } from '@lifi/widget/config/lifi';
+import { createContext, useContext, useEffect, useMemo } from 'react';
 const stub = () => {
     throw new Error('You forgot to wrap your component in <WidgetProvider>.');
 };
@@ -21,7 +22,7 @@ const initialContext = {
 const WidgetContext = createContext(initialContext);
 export const useWidgetConfig = () => useContext(WidgetContext);
 export const WidgetProvider = (_a) => {
-    var { children } = _a, _b = _a.config, _c = _b === void 0 ? {} : _b, { fromChain, fromToken, toChain, toToken } = _c, config = __rest(_c, ["fromChain", "fromToken", "toChain", "toToken"]);
+    var { children } = _a, _b = _a.config, _c = _b === void 0 ? {} : _b, { fromChain, fromToken, toChain, toToken, integrator } = _c, config = __rest(_c, ["fromChain", "fromToken", "toChain", "toToken", "integrator"]);
     const value = useMemo(() => {
         try {
             return Object.assign(Object.assign({}, config), { fromChain: typeof fromChain === 'number'
@@ -39,5 +40,12 @@ export const WidgetProvider = (_a) => {
             return config;
         }
     }, [config, fromChain, fromToken, toChain, toToken]);
+    useEffect(() => {
+        updateLiFiConfig({
+            defaultRouteOptions: {
+                integrator: integrator !== null && integrator !== void 0 ? integrator : window.location.hostname,
+            },
+        });
+    }, [integrator]);
     return (_jsx(WidgetContext.Provider, Object.assign({ value: value }, { children: children })));
 };

package/stores/route/useRouteStore.js

@@ -56,6 +56,6 @@ export const useRouteStore = create()(persist(immer((set) => ({
         state.routes[routeId].status = 'idle';
     }),
 })), {
-    name: 'li.fi-widget-executable-routes',
+    name: 'li.fi-widget-routes',
     partialize: (state) => ({ routes: state.routes }),
 }));

package/types/widget.d.ts

@@ -27,6 +27,7 @@ interface WidgetConfigBase {
     disableAppearance?: boolean;
     disableTelemetry?: boolean;
     walletManagement?: WidgetWalletManagement;
+    integrator?: string;
 }
 declare type WidgetFromTokenConfig = {
     fromChain: `${ChainKey}` | number;

package/utils/format.js

@@ -1,8 +1,8 @@
 import Big from 'big.js';
-// JavaScript numbers use exponential notation for positive exponents of 21 and above.
-Big.PE = 21;
+// JavaScript numbers use exponential notation for positive exponents of 21 and above. We need more.
+Big.PE = 42;
 // JavaScript numbers use exponential notation for negative exponents of -7 and below. We need more.
-Big.NE = -21;
+Big.NE = -42;
 /**
  * Format token amount to at least 4 decimals.
  * @param amount amount to format.

package/lifi.d.ts

@@ -1,2 +0,0 @@
-import LIFI from '@lifi/sdk';
-export declare const LiFi: LIFI;

package/lifi.js

@@ -1,7 +0,0 @@
-import LIFI from '@lifi/sdk';
-export const LiFi = new LIFI({
-    // apiUrl: env.LIFI_API_URL,
-    defaultRouteOptions: {
-        integrator: 'li.fi',
-    },
-});