@lifi/widget 1.7.0 → 1.9.0

package/pages/SwapPage/ExecutionItem.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Process, Step } from '@lifinance/sdk';
+import { Process, Step } from '@lifi/sdk';
 export declare const ExecutionItem: React.FC<{
     step: Step;
     process: Process;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Step, TokenAmount } from '@lifinance/sdk';
+import { Step, TokenAmount } from '@lifi/sdk';
 export declare const StepItem: React.FC<{
     step: Step;
     fromToken?: TokenAmount;

package/pages/SwapPage/StepTimer.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Step } from '@lifinance/sdk';
+import { Step } from '@lifi/sdk';
 export declare const StepTimer: React.FC<{
     step: Step;
 }>;

package/pages/SwapPage/SwapPage.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useRouteExecution } from '../../hooks';
+import { InsufficientGasOrFundsMessage } from '../../components/InsufficientGasOrFundsMessage';
+import { useHasSufficientBalance, useRouteExecution } from '../../hooks';
 import { StatusBottomSheet } from './StatusBottomSheet';
 import { StepDivider } from './StepDivider';
 import { StepItem } from './StepItem';
@@ -11,12 +12,14 @@ 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;
     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))), status === 'idle' ? (_jsx(Button, Object.assign({ variant: "contained", disableElevation: true, fullWidth: true, onClick: executeRoute }, { children: t('button.startSwap') }))) : null, status === 'error' ? (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ variant: "contained", disableElevation: true, fullWidth: true, onClick: restartRoute }, { children: t('button.restartSwap') })), _jsx(Button, Object.assign({ variant: "outlined", disableElevation: true, fullWidth: true, onClick: handleRemoveRoute }, { 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' ? (_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 })] }));
 };

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/SwapPage/utils.d.ts

@@ -1,4 +1,4 @@
-import { EVMChain, Process, Step } from '@lifinance/sdk';
+import { EVMChain, Process, Step } from '@lifi/sdk';
 import { TFunction } from 'react-i18next';
 export declare function getProcessMessage(t: TFunction<'translation', undefined>, getChainById: (chainId: number) => EVMChain | undefined, step: Step, process: Process): {
     title?: string;

package/pages/SwapPage/utils.js

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

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

@@ -1,5 +1,5 @@
+import { Token } from '@lifi/sdk';
 import { Wallet } from '@lifi/wallet-management';
-import { Token } from '@lifinance/sdk';
 import { Signer } from 'ethers';
 export interface WalletContextProps {
     account: WalletAccount;

package/providers/WidgetProvider/WidgetProvider.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ChainId, getChainByKey } from '@lifinance/sdk';
+import { ChainId, getChainByKey } from '@lifi/sdk';
 import { createContext, useContext, useMemo } from 'react';
 const stub = () => {
     throw new Error('You forgot to wrap your component in <WidgetProvider>.');

package/stores/route/types.d.ts

@@ -1,4 +1,4 @@
-import { Route } from '@lifinance/sdk';
+import { Route } from '@lifi/sdk';
 export interface RouteExecutionStore {
     currentRoute?: Route;
     routes: Record<string, RouteExecution>;

package/stores/route/useCurrentRoute.d.ts

@@ -1,2 +1,2 @@
-import { Route } from '@lifinance/sdk';
+import { Route } from '@lifi/sdk';
 export declare const useCurrentRoute: () => [Route | undefined, (route?: Route) => void];

package/stores/route/useSetExecutableRoute.d.ts

@@ -1 +1 @@
-export declare const useSetExecutableRoute: () => (route: import("@lifinance/types").Route) => void;
+export declare const useSetExecutableRoute: () => (route: import("@lifi/types").Route) => void;

package/stores/settings/types.d.ts

@@ -1,4 +1,4 @@
-import { Bridge, Exchange, Order } from '@lifinance/sdk';
+import { Bridge, Exchange, Order } from '@lifi/sdk';
 import { Appearance } from '../../types';
 export declare type ValueSetter<S> = <K extends keyof S>(key: K, value: S[Extract<K, string>]) => void;
 export declare type ValuesSetter<S> = <K extends keyof S>(values: Record<K, S[Extract<K, string>]>) => void;

package/stores/settings/useSettingsStore.d.ts

@@ -5,7 +5,7 @@ export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<Omit
             setValue: import("./types").ValueSetter<SettingsState>;
             setValues: import("./types").ValuesSetter<SettingsState>;
             initializeTools(toolType: import("./types").SettingsToolType, tools: string[]): void;
-            setTools(toolType: import("./types").SettingsToolType, tools: string[], availableTools: (Pick<import("@lifinance/types").Bridge, "key"> | Pick<import("@lifinance/types").Exchange, "key">)[]): void;
+            setTools(toolType: import("./types").SettingsToolType, tools: string[], availableTools: (Pick<import("@lifi/types").Bridge, "key"> | Pick<import("@lifi/types").Exchange, "key">)[]): void;
             advancedPreferences: boolean;
             appearance: import("../..").Appearance;
             routePriority: "RECOMMENDED" | "FASTEST" | "CHEAPEST" | "SAFEST";

package/types/widget.d.ts

@@ -1,4 +1,4 @@
-import { ChainKey, Token } from '@lifinance/sdk';
+import { ChainKey, Token } from '@lifi/sdk';
 import { PaletteMode, PaletteOptions, Shape } from '@mui/material';
 import { TypographyOptions } from '@mui/material/styles/createTypography';
 import { Signer } from 'ethers';

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/pages/MainPage/InsufficientGasOrFundsMessage.d.ts

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

package/pages/MainPage/InsufficientGasOrFundsMessage.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { CardTitle } from '../../components/Card';
-import { useHasSufficientBalance } from '../../hooks';
-import { MessageCard } from './InsufficientGasOrFundsMessage.style';
-export const InsufficientGasOrFundsMessage = () => {
-    const { t } = useTranslation();
-    const { hasGasBalanceOnStartChain, hasGasOnCrossChain, hasSufficientBalance, } = useHasSufficientBalance();
-    if (hasSufficientBalance && hasGasBalanceOnStartChain && hasGasOnCrossChain) {
-        return null;
-    }
-    let title;
-    let message;
-    if (!hasSufficientBalance) {
-        title = t(`swap.warning.title.insufficientFunds`);
-        message = t(`swap.warning.message.insufficientFunds`);
-    }
-    if (!hasGasBalanceOnStartChain) {
-        title = t(`swap.warning.title.insufficientGasOnStartChain`);
-        message = t(`swap.warning.message.insufficientGasOnStartChain`);
-    }
-    if (!hasGasOnCrossChain) {
-        title = t(`swap.warning.title.insufficientGasOnDestinationChain`);
-        message = t(`swap.warning.message.insufficientGasOnDestinationChain`);
-    }
-    return (_jsxs(MessageCard, Object.assign({ mx: 3, mb: 3 }, { children: [_jsx(CardTitle, { children: title }), _jsx(Typography, Object.assign({ variant: "body2", px: 2, pb: 2, pt: 1 }, { children: message }))] })));
-};