@lifi/widget 1.7.0 → 1.9.0

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/components/TokenList/types.d.ts

@@ -1,4 +1,4 @@
-import { TokenAmount } from '@lifinance/sdk';
+import { TokenAmount } from '@lifi/sdk';
 import { SwapFormDirection } from '../../providers/SwapFormProvider';
 export interface TokenListProps {
     formType: SwapFormDirection;

package/components/TokenList/utils.d.ts

@@ -1,4 +1,4 @@
-import { TokenAmount } from '@lifinance/sdk';
+import { TokenAmount } from '@lifi/sdk';
 export declare const tokenAmountMock: TokenAmount;
 export declare const skeletonKey = "skeleton";
 export declare const createTokenAmountSkeletons: () => {
@@ -9,7 +9,7 @@ export declare const createTokenAmountSkeletons: () => {
     symbol: string;
     decimals: number;
     chainId: number;
-    coinKey?: import("@lifinance/sdk").CoinKey | undefined;
+    coinKey?: import("@lifi/sdk").CoinKey | undefined;
     priceUSD?: string | undefined;
     logoURI?: string | undefined;
 }[];

package/config/theme.js

@@ -13,6 +13,15 @@ const palette = {
     success: {
         main: '#0AA65B',
     },
+    warning: {
+        main: '#FFE668',
+    },
+    error: {
+        main: '#E5452F',
+    },
+    info: {
+        main: '#297EFF',
+    },
 };
 export const createTheme = (mode, theme = {}) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
@@ -64,7 +73,7 @@ export const createTheme = (mode, theme = {}) => {
                 },
             },
             MuiButton: {
-                styleOverrides: mode === 'dark'
+                styleOverrides: Object.assign(Object.assign({}, (mode === 'dark'
                     ? {
                         outlined: {
                             color: palette.primary.light,
@@ -82,7 +91,13 @@ export const createTheme = (mode, theme = {}) => {
                             },
                         },
                     }
-                    : undefined,
+                    : {})), { root: {
+                        '&.Mui-disabled': {
+                            color: mode === 'light'
+                                ? 'rgb(0 0 0 / 70%)'
+                                : 'rgb(255 255 255 / 70%)',
+                        },
+                    } }),
             },
             MuiIconButton: {
                 styleOverrides: {

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/useChain.d.ts

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

package/hooks/useChains.d.ts

@@ -18,11 +18,11 @@ export declare const useChains: () => {
     isPreviousData: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("react-query").QueryObserverResult<import("@lifinance/types").EVMChain[], unknown>>;
+    refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
     remove: () => void;
     fetchStatus: import("react-query").FetchStatus;
-    chains: import("@lifinance/types").EVMChain[] | undefined;
-    getChainById: (chainId: number) => import("@lifinance/types").EVMChain | undefined;
+    chains: import("@lifi/types").EVMChain[] | undefined;
+    getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
 } | {
     error: null;
     isError: false;
@@ -43,11 +43,11 @@ export declare const useChains: () => {
     isPreviousData: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("react-query").QueryObserverResult<import("@lifinance/types").EVMChain[], unknown>>;
+    refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
     remove: () => void;
     fetchStatus: import("react-query").FetchStatus;
-    chains: import("@lifinance/types").EVMChain[] | undefined;
-    getChainById: (chainId: number) => import("@lifinance/types").EVMChain | undefined;
+    chains: import("@lifi/types").EVMChain[] | undefined;
+    getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
 } | {
     error: unknown;
     isError: true;
@@ -68,11 +68,11 @@ export declare const useChains: () => {
     isPreviousData: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("react-query").QueryObserverResult<import("@lifinance/types").EVMChain[], unknown>>;
+    refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
     remove: () => void;
     fetchStatus: import("react-query").FetchStatus;
-    chains: import("@lifinance/types").EVMChain[] | undefined;
-    getChainById: (chainId: number) => import("@lifinance/types").EVMChain | undefined;
+    chains: import("@lifi/types").EVMChain[] | undefined;
+    getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
 } | {
     error: null;
     isError: false;
@@ -93,9 +93,9 @@ export declare const useChains: () => {
     isPreviousData: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("react-query").QueryObserverResult<import("@lifinance/types").EVMChain[], unknown>>;
+    refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
     remove: () => void;
     fetchStatus: import("react-query").FetchStatus;
-    chains: import("@lifinance/types").EVMChain[] | undefined;
-    getChainById: (chainId: number) => import("@lifinance/types").EVMChain | undefined;
+    chains: import("@lifi/types").EVMChain[] | undefined;
+    getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
 };

package/hooks/useHasSufficientBalance.d.ts

@@ -1,5 +1,5 @@
 export declare const useHasSufficientBalance: () => {
-    hasGasBalanceOnStartChain: boolean;
+    hasGasOnStartChain: boolean;
     hasGasOnCrossChain: boolean;
     hasSufficientBalance: boolean;
 };

package/hooks/useHasSufficientBalance.js

@@ -1,58 +1,63 @@
-import { isSwapStep } from '@lifinance/sdk';
+import { isSwapStep } from '@lifi/sdk';
 import Big from 'big.js';
 import { useMemo } from 'react';
 import { useWatch } from 'react-hook-form';
-import { SwapFormKeyHelper } from '../providers/SwapFormProvider';
+import { useDebouncedWatch } from '.';
+import { SwapFormKey, SwapFormKeyHelper } from '../providers/SwapFormProvider';
 import { useCurrentRoute } from '../stores';
 import { useTokenBalances } from './useTokenBalances';
 export const useHasSufficientBalance = () => {
     var _a;
     const [route] = useCurrentRoute();
-    const [fromChainId, toChainId] = useWatch({
+    const [fromChainId, toChainId, fromToken] = useWatch({
         name: [
             SwapFormKeyHelper.getChainKey('from'),
             SwapFormKeyHelper.getChainKey('to'),
+            SwapFormKey.FromToken,
         ],
     });
+    const fromAmount = useDebouncedWatch(SwapFormKey.FromAmount, 250);
     const lastStep = route === null || route === void 0 ? void 0 : route.steps.at(-1);
     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 hasGasBalanceOnStartChain = useMemo(() => {
-        var _a, _b, _c;
-        const token = (_a = route === null || route === void 0 ? void 0 : route.steps[0].estimate.gasCosts) === null || _a === void 0 ? void 0 : _a[0].token;
-        if (!token) {
+    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) {
             return true;
         }
-        const balance = Big((_c = (_b = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === token.address)) === null || _b === void 0 ? void 0 : _b.amount) !== null && _c !== void 0 ? _c : 0);
-        const requiredAmount = route.steps
+        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);
+        let requiredAmount = route.steps
             .filter((step) => step.action.fromChainId === route.fromChainId)
             .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, token.decimals));
-        return balance.gt(0) && balance.gte(requiredAmount);
+            .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);
+        }
+        return gasTokenBalance.gt(0) && gasTokenBalance.gte(requiredAmount);
     }, [fromChainTokenBalances, route]);
     const hasGasOnCrossChain = useMemo(() => {
         var _a, _b, _c, _d, _e, _f;
-        const token = (_a = lastStep === null || lastStep === void 0 ? void 0 : lastStep.estimate.gasCosts) === null || _a === void 0 ? void 0 : _a[0].token;
-        if (!token || !isSwapStep(lastStep)) {
+        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)) {
             return true;
         }
-        const balance = Big((_c = (_b = toChainTokenBalances === null || toChainTokenBalances === void 0 ? void 0 : toChainTokenBalances.find((t) => t.address === token.address)) === null || _b === void 0 ? void 0 : _b.amount) !== null && _c !== void 0 ? _c : 0);
+        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]);
     const hasSufficientBalance = useMemo(() => {
-        var _a, _b, _c;
-        if (!route) {
+        var _a, _b;
+        if (!fromToken || !fromAmount) {
             return true;
         }
-        const balance = Big((_b = (_a = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === route.fromToken.address)) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);
-        return Big(route.fromAmount)
-            .div(Math.pow(10, ((_c = route.fromToken.decimals) !== null && _c !== void 0 ? _c : 0)))
-            .lte(balance);
-    }, [fromChainTokenBalances, route]);
+        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]);
     return {
-        hasGasBalanceOnStartChain,
+        hasGasOnStartChain,
         hasGasOnCrossChain,
         hasSufficientBalance,
     };

package/hooks/useRouteExecution.d.ts

@@ -1,4 +1,4 @@
-import { Route } from '@lifinance/sdk';
+import { Route } from '@lifi/sdk';
 export declare const useRouteExecution: (routeId: string) => {
     executeRoute: () => void;
     restartRoute: () => void;

package/hooks/useSwapRoutes.d.ts

@@ -1,8 +1,9 @@
 export declare const useSwapRoutes: () => {
-    routes: import("@lifinance/types").Route[] | undefined;
+    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("@lifinance/types").RoutesResponse, unknown>>;
+    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,6 +7,7 @@ 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';
@@ -62,13 +63,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,
@@ -97,14 +96,15 @@ export const useSwapRoutes = () => {
         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 && recommendedRoute) {
+        if (!isCurrentRouteInSet && currentRoute !== recommendedRoute) {
             setCurrentRoute(recommendedRoute);
         }
-    }, [currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.id, data === null || data === void 0 ? void 0 : data.routes, setCurrentRoute]);
+    }, [currentRoute, data === null || data === void 0 ? void 0 : data.routes, setCurrentRoute]);
     return {
         routes: data === null || data === void 0 ? void 0 : data.routes,
         isLoading: isEnabled && isLoading,
         isFetching,
+        isFetched,
         dataUpdatedAt,
         refetchTime,
         refetch,

package/hooks/useToken.d.ts

@@ -1,4 +1,4 @@
 export declare const useToken: (chainId: number, tokenAddress: string) => {
-    token: import("@lifinance/types").Token | undefined;
+    token: import("@lifi/types").Token | undefined;
     isLoading: boolean;
 };

package/hooks/useTokenBalance.d.ts

@@ -1,4 +1,4 @@
-import { TokenAmount } from '@lifinance/sdk';
+import { TokenAmount } from '@lifi/sdk';
 export declare const useTokenBalance: (chainId: number, tokenAddress: string) => {
     token: TokenAmount | undefined;
     isLoading: boolean;

package/hooks/useTokenBalances.d.ts

@@ -1,4 +1,4 @@
-import { TokenAmount } from '@lifinance/sdk';
+import { TokenAmount } from '@lifi/sdk';
 export declare const useTokenBalances: (selectedChainId: number) => {
     tokens: TokenAmount[] | undefined;
     isLoading: boolean;

package/hooks/useTokens.d.ts

@@ -1,5 +1,5 @@
 export declare const useTokens: (selectedChainId: number) => {
-    tokens: import("@lifinance/types").Token[] | undefined;
+    tokens: import("@lifi/types").Token[] | undefined;
     isLoading: boolean;
     isFetching: boolean;
 };

package/hooks/useTools.d.ts

@@ -1 +1 @@
-export declare const useTools: () => import("@lifinance/types").ToolsResponse | undefined;
+export declare const useTools: () => import("@lifi/types").ToolsResponse | undefined;

package/i18n/en/translation.json

@@ -68,16 +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": {
-        "insufficientFunds": "Insufficient funds",
-        "insufficientGasOnStartChain": "Insufficient gas on start chain",
-        "insufficientGasOnDestinationChain": "Insufficient gas on destination chain"
+        "insufficientGas": "Insufficient gas"
       },
       "message": {
-        "insufficientFunds": "You don't have enough funds in this account.",
-        "insufficientGasOnStartChain": "The selected route requires a swap on the chain you are transferring from. You need to have gas on that chain to pay for the transaction there.",
-        "insufficientGasOnDestinationChain": "The selected route requires a swap on the chain you are transferring to. You need to have gas on that chain to pay for the transaction there."
+        "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": {
@@ -100,7 +106,7 @@
     "process": {
       "tokenAllowance": {
         "started": "Setting token allowance.",
-        "pending": "Waiting for token allowance approval.",
+        "pending": "Waiting for token allowance.",
         "done": "Token allowance approved."
       },
       "switchChain": {
@@ -145,6 +151,10 @@
     "extensionNotFound": "Please make sure that only the {{name}} browser extension is active before choosing this wallet."
   },
   "tooltip": {
+    "notFound": {
+      "title": "Sorry 🥲",
+      "text": "We couldn't find this page."
+    },
     "progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click this circle to update manually."
   }
 }

package/i18n/index.d.ts

@@ -71,11 +71,17 @@ export declare const resources: {
                         fundsReceived: string;
                     };
                 };
+                info: {
+                    title: {
+                        routeNotFound: string;
+                    };
+                    message: {
+                        routeNotFound: string;
+                    };
+                };
                 warning: {
                     title: {
-                        insufficientFunds: string;
-                        insufficientGasOnStartChain: string;
-                        insufficientGasOnDestinationChain: string;
+                        insufficientGas: string;
                     };
                     message: {
                         insufficientFunds: string;
@@ -148,6 +154,10 @@ export declare const resources: {
                 extensionNotFound: string;
             };
             tooltip: {
+                notFound: {
+                    title: string;
+                    text: string;
+                };
                 progressToNextUpdate: string;
             };
         };

package/lifi.d.ts

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

package/lifi.js

@@ -1,4 +1,4 @@
-import LIFI from '@lifinance/sdk';
+import LIFI from '@lifi/sdk';
 export const LiFi = new LIFI({
     // apiUrl: env.LIFI_API_URL,
     defaultRouteOptions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.7.0",
+  "version": "1.9.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",
@@ -23,7 +23,7 @@
   "bugs": {
     "url": "https://github.com/lifinance/widget/issues"
   },
-  "license": "MIT",
+  "license": "Apache-2.0",
   "keywords": [
     "widget",
     "lifi-widget",
@@ -41,21 +41,21 @@
     "@emotion/styled": "^11.9.3",
     "@ethersproject/experimental": "^5.6.3",
     "@ethersproject/providers": "^5.6.8",
-    "@lifi/wallet-management": "^1.1.0",
-    "@lifinance/sdk": "^1.0.0-beta.14",
+    "@lifi/sdk": "^1.0.1",
+    "@lifi/wallet-management": "^1.1.1",
     "@mui/icons-material": "^5.8.4",
-    "@mui/lab": "^5.0.0-alpha.89",
-    "@mui/material": "^5.8.7",
-    "@sentry/integrations": "^7.5.1",
-    "@sentry/react": "^7.5.1",
-    "@sentry/tracing": "^7.5.1",
-    "big.js": "^6.2.0",
-    "i18next": "^21.8.13",
+    "@mui/lab": "^5.0.0-alpha.90",
+    "@mui/material": "^5.9.0",
+    "@sentry/integrations": "^7.6.0",
+    "@sentry/react": "^7.6.0",
+    "@sentry/tracing": "^7.6.0",
+    "big.js": "^6.2.1",
+    "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

@@ -1,12 +1,12 @@
 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 { InsufficientGasOrFundsMessage } from './InsufficientGasOrFundsMessage';
 import { FormContainer } from './MainPage.style';
 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, {}), _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(SwapButton, {}) }))] })));
 };

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/SelectTokenPage/ChainSelect.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { SwapFormTypeProps } from '../../providers/SwapFormProvider';
 export declare const ChainSelect: ({ formType }: SwapFormTypeProps) => JSX.Element;

package/pages/SelectTokenPage/SearchTokenInput.d.ts

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

package/pages/SelectWalletPage/SelectWalletPage.d.ts

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

package/pages/SettingsPage/AdvancedPreferences.d.ts

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

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/SettingsPage/GasPriceSelect.d.ts

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

package/pages/SettingsPage/RoutePrioritySelect.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Orders } from '@lifinance/sdk';
+import { Orders } from '@lifi/sdk';
 import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
 import { FormControl, MenuItem } from '@mui/material';
 import { useTranslation } from 'react-i18next';

package/pages/SettingsPage/SettingsPage.d.ts

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

package/pages/SettingsPage/SlippageInput.d.ts

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

package/pages/SwapPage/CircularProgress.d.ts

@@ -1,4 +1,5 @@
-import { Status } from '@lifinance/sdk';
+/// <reference types="react" />
+import { Status } from '@lifi/sdk';
 export declare function CircularProgress({ status }: {
     status: Status;
 }): JSX.Element;

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

@@ -1,4 +1,4 @@
-import { Status } from '@lifinance/sdk';
+import { Status } from '@lifi/sdk';
 import { Theme } from '@mui/material';
 export declare const CircularProgress: import("@emotion/styled").StyledComponent<import("@mui/material").CircularProgressProps & import("@mui/system").MUIStyledCommonProps<Theme> & {
     status: Status;