@lifi/widget 1.32.8 → 2.0.0-alpha.0

package/pages/SwapPage/SwapPage.js

@@ -1,30 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import DeleteIcon from '@mui/icons-material/Delete';
 import { Box, Button, Tooltip } from '@mui/material';
-import { useCallback, useRef } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
-import { GasSufficiencyMessage } from '../../components/GasSufficiencyMessage';
+import { GasMessage } from '../../components/GasMessage';
+import { Insurance } from '../../components/Insurance';
 import { getStepList } from '../../components/Step';
 import { useNavigateBack, useRouteExecution } from '../../hooks';
 import { SwapFormKey, useWidgetConfig } from '../../providers';
 import { RouteExecutionStatus } from '../../stores';
 import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet';
-import { StartSwapButton } from './StartSwapButton';
+import { StartIdleSwapButton, StartSwapButton } from './StartSwapButton';
 import { StatusBottomSheet } from './StatusBottomSheet';
 import { Container } from './SwapPage.style';
-import { getTokenValueLossThreshold, TokenValueBottomSheet, } from './TokenValueBottomSheet';
+import { TokenValueBottomSheet, getTokenValueLossThreshold, } from './TokenValueBottomSheet';
 export const SwapPage = () => {
     const { t } = useTranslation();
-    const { variant } = useWidgetConfig();
-    const { state } = useLocation();
+    const { setValue } = useFormContext();
     const { navigateBack } = useNavigateBack();
+    const { variant, insurance } = useWidgetConfig();
+    const { state } = useLocation();
+    const stateRouteId = state?.routeId;
+    const [routeId, setRouteId] = useState(stateRouteId);
     const tokenValueBottomSheetRef = useRef(null);
     const exchangeRateBottomSheetRef = useRef(null);
-    const { setValue } = useFormContext();
     const { route, status, executeRoute, restartRoute, deleteRoute } = useRouteExecution({
-        routeId: state?.routeId,
+        routeId: routeId,
         onAcceptExchangeRateUpdate: exchangeRateBottomSheetRef.current?.open,
     });
     const handleExecuteRoute = useCallback(() => {
@@ -64,8 +67,16 @@ export const SwapPage = () => {
                 return '';
         }
     };
-    return (_jsxs(Container, { children: [getStepList(route), status === RouteExecutionStatus.Idle ||
-                status === RouteExecutionStatus.Failed ? (_jsxs(_Fragment, { children: [_jsx(GasSufficiencyMessage, { route: route, mt: 2 }), _jsxs(Box, { mt: 2, display: "flex", children: [_jsx(StartSwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route }), status === RouteExecutionStatus.Failed ? (_jsx(Tooltip, { title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true, children: _jsx(Button, { onClick: handleRemoveRoute, sx: {
+    const SwapButton = insurance && status === RouteExecutionStatus.Idle
+        ? StartIdleSwapButton
+        : StartSwapButton;
+    const insuranceAvailable = insurance &&
+        variant !== 'refuel' &&
+        (route?.insurance?.state === 'INSURED' ||
+            (status === RouteExecutionStatus.Idle &&
+                route?.insurance?.state === 'INSURABLE'));
+    return (_jsxs(Container, { children: [getStepList(route), insuranceAvailable ? (_jsx(Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route?.insurance.feeAmountUsd, onChange: setRouteId })) : null, status === RouteExecutionStatus.Idle ||
+                status === RouteExecutionStatus.Failed ? (_jsxs(_Fragment, { children: [_jsx(GasMessage, { mt: 2, route: route }), _jsxs(Box, { mt: 2, display: "flex", children: [_jsx(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, route: route, insurableRouteId: stateRouteId }), status === RouteExecutionStatus.Failed ? (_jsx(Tooltip, { title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true, children: _jsx(Button, { onClick: handleRemoveRoute, sx: {
                                         minWidth: 48,
                                         marginLeft: 1,
                                     }, children: _jsx(DeleteIcon, {}) }) })) : null] })] })) : null, route && status ? (_jsx(StatusBottomSheet, { status: status, route: route })) : null, route ? (_jsx(TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, route ? (_jsx(ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })) : null] }));

package/pages/SwapPage/types.d.ts

@@ -0,0 +1,9 @@
+import type { Route } from '@lifi/sdk';
+export interface StartSwapButtonProps {
+    onClick?(): void;
+    route?: Route;
+    text?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    insurableRouteId: string;
+}

package/pages/SwapPage/types.js

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

package/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -30,5 +30,5 @@ export const SwapRoutesPage = () => {
             .setAction(_jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 }, size: "medium", edge: "end" }));
     }, [dataUpdatedAt, isFetching, refetch, refetchTime]);
     const routeNotFound = !swapRoutes?.length && !isLoading && !isFetching;
-    return (_jsx(Stack, { direction: "column", spacing: 2, flex: 1, children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, {})) : isLoading ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, {}, index)))) : (swapRoutes?.map((route, index) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0 }, route.id)))) }));
+    return (_jsx(Stack, { direction: "column", spacing: 2, flex: 1, children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, {})) : isLoading ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, {}, index)))) : (swapRoutes?.map((route, index) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: swapRoutes?.length <= 2 }, route.id)))) }));
 };

package/providers/SDKProvider/SDKProvider.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import LIFI from '@lifi/sdk';
-export declare const useLiFi: () => LIFI;
+import { LiFi } from '@lifi/sdk';
+export declare const useLiFi: () => LiFi;
 export declare const SDKProvider: React.FC<React.PropsWithChildren>;

package/providers/SDKProvider/SDKProvider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import LIFI from '@lifi/sdk';
+import { LiFi } from '@lifi/sdk';
 import { createContext, useContext, useMemo } from 'react';
 import { useWidgetConfig } from '../WidgetProvider';
 let lifi;
@@ -10,6 +10,7 @@ export const SDKProvider = ({ children, }) => {
     const value = useMemo(() => {
         const config = {
             ...sdkConfig,
+            integrator: integrator ?? window.location.hostname,
             defaultRouteOptions: {
                 fee,
                 integrator: integrator ?? window.location.hostname,
@@ -20,7 +21,7 @@ export const SDKProvider = ({ children, }) => {
             },
         };
         if (!lifi) {
-            lifi = new LIFI({
+            lifi = new LiFi({
                 disableVersionCheck: true,
                 ...config,
             });

package/providers/SwapFormProvider/FormUpdater.js

@@ -5,7 +5,7 @@ import { SwapFormKey } from '../SwapFormProvider';
 import { useWallet } from '../WalletProvider';
 import { isItemAllowed, useWidgetConfig } from '../WidgetProvider';
 export const FormUpdater = ({ defaultValues }) => {
-    const { fromChain, toChain, chains, disabledChains } = useWidgetConfig();
+    const { fromChain, toChain, chains } = useWidgetConfig();
     const { account } = useWallet();
     const { setValue, getValues, getFieldState, resetField, 
     // Subscription to touchedFields is required by getFieldState to work
@@ -13,7 +13,7 @@ export const FormUpdater = ({ defaultValues }) => {
     const previousDefaultValues = useRef(defaultValues);
     // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
     useEffect(() => {
-        const chainAllowed = account.chainId && isItemAllowed(account.chainId, chains, disabledChains);
+        const chainAllowed = account.chainId && isItemAllowed(account.chainId, chains);
         if (!account.isActive || !account.chainId || !chainAllowed) {
             return;
         }
@@ -37,7 +37,6 @@ export const FormUpdater = ({ defaultValues }) => {
         account.chainId,
         account.isActive,
         chains,
-        disabledChains,
         fromChain,
         getFieldState,
         getValues,

package/providers/WidgetProvider/WidgetProvider.js

@@ -4,13 +4,16 @@ import { createContext, useContext, useId, useMemo } from 'react';
 import { setDefaultSettings } from '../../stores';
 import { formatAmount } from '../../utils';
 const initialContext = {
-    disabledChains: [],
     elementId: '',
+    integrator: '',
 };
 const WidgetContext = createContext(initialContext);
 export const useWidgetConfig = () => useContext(WidgetContext);
-export const WidgetProvider = ({ children, config: { fromChain, fromToken, toChain, toToken, fromAmount, ...config } = {}, }) => {
+export const WidgetProvider = ({ children, config: { fromChain, fromToken, toChain, toToken, fromAmount, integrator, ...config } = {}, }) => {
     const elementId = useId();
+    if (!integrator) {
+        throw Error('Required property "integrator" is missing.');
+    }
     const value = useMemo(() => {
         try {
             const searchParams = Object.fromEntries(new URLSearchParams(window?.location.search));
@@ -46,14 +49,24 @@ export const WidgetProvider = ({ children, config: { fromChain, fromToken, toCha
                     ? formatAmount(searchParams.fromAmount)
                     : fromAmount,
                 elementId,
+                integrator,
             };
             setDefaultSettings(value);
             return value;
         }
         catch (e) {
             console.warn(e);
-            return { ...config, elementId };
+            return { ...config, elementId, integrator };
         }
-    }, [config, elementId, fromAmount, fromChain, fromToken, toChain, toToken]);
+    }, [
+        config,
+        elementId,
+        fromAmount,
+        fromChain,
+        fromToken,
+        integrator,
+        toChain,
+        toToken,
+    ]);
     return (_jsx(WidgetContext.Provider, { value: value, children: children }));
 };

package/providers/WidgetProvider/utils.d.ts

@@ -1,4 +1,4 @@
 export declare const isItemAllowed: <T>(itemId: T, items?: {
     allow?: T[] | undefined;
     deny?: T[] | undefined;
-} | undefined, disabledChains?: T[] | undefined) => boolean;
+} | undefined) => boolean;

package/providers/WidgetProvider/utils.js

@@ -1,8 +1,6 @@
-export const isItemAllowed = (itemId, items, 
-/** @deprecated Remove in the next major release */
-disabledChains) => {
+export const isItemAllowed = (itemId, items) => {
     if (items?.allow?.length) {
         return items.allow.includes(itemId);
     }
-    return !(disabledChains?.includes(itemId) || items?.deny?.includes(itemId));
+    return !items?.deny?.includes(itemId);
 };

package/stores/StoreProvider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { RecommendedRouteStoreProvider, RouteExecutionStoreProvider, } from './routes';
+import { RouteExecutionStoreProvider } from './routes';
 export const StoreProvider = ({ children, namePrefix }) => {
-    return (_jsx(RouteExecutionStoreProvider, { namePrefix: namePrefix, children: _jsx(RecommendedRouteStoreProvider, { children: children }) }));
+    return (_jsx(RouteExecutionStoreProvider, { namePrefix: namePrefix, children: children }));
 };

package/stores/routes/createRouteExecutionStore.js

@@ -5,13 +5,14 @@ import { RouteExecutionStatus } from './types';
 import { isRouteDone, isRouteFailed, isRoutePartiallyDone, isRouteRefunded, } from './utils';
 export const createRouteExecutionStore = ({ namePrefix }) => create(persist((set, get) => ({
     routes: {},
-    setExecutableRoute: (route) => {
+    setExecutableRoute: (route, insurableRouteId) => {
         if (!get().routes[route.id]) {
             set((state) => {
                 const routes = { ...state.routes };
                 // clean previous idle routes that were not executed
                 Object.keys(routes)
-                    .filter((routeId) => routes[routeId]?.status === RouteExecutionStatus.Idle)
+                    .filter((routeId) => routeId !== insurableRouteId &&
+                    routes[routeId]?.status === RouteExecutionStatus.Idle)
                     .forEach((routeId) => delete routes[routeId]);
                 routes[route.id] = {
                     route,

package/stores/routes/index.d.ts

@@ -1,7 +1,6 @@
 export * from './RouteExecutionStore';
 export * from './types';
 export * from './useExecutingRoutesIds';
-export * from './useRecommendedRouteStore';
 export * from './useSetExecutableRoute';
 export * from './useSwapHistory';
 export * from './utils';

package/stores/routes/index.js

@@ -1,7 +1,6 @@
 export * from './RouteExecutionStore';
 export * from './types';
 export * from './useExecutingRoutesIds';
-export * from './useRecommendedRouteStore';
 export * from './useSetExecutableRoute';
 export * from './useSwapHistory';
 export * from './utils';

package/stores/routes/types.d.ts

@@ -5,7 +5,7 @@ export interface RouteExecution {
 }
 export interface RouteExecutionState {
     routes: Partial<Record<string, RouteExecution>>;
-    setExecutableRoute: (route: Route) => void;
+    setExecutableRoute: (route: Route, insurableRouteId?: string) => void;
     updateRoute: (route: Route) => void;
     restartRoute: (routeId: string) => void;
     deleteRoute: (routeId: string) => void;
@@ -19,7 +19,3 @@ export declare enum RouteExecutionStatus {
     Partial = 8,
     Refunded = 16
 }
-export interface RecommendedRouteState {
-    recommendedRoute?: Route;
-    setRecommendedRoute: (route?: Route) => void;
-}

package/stores/routes/useSetExecutableRoute.d.ts

@@ -1 +1 @@
-export declare const useSetExecutableRoute: () => (route: import("@lifi/types").Route) => void;
+export declare const useSetExecutableRoute: () => (route: import("@lifi/types").Route, insurableRouteId?: string | undefined) => void;

package/stores/settings/types.d.ts

@@ -9,6 +9,7 @@ export interface SettingsProps {
     gasPrice?: string;
     language?: string;
     routePriority?: Order;
+    enabledAutoRefuel: boolean;
     showDestinationWallet: boolean;
     slippage?: string;
     enabledBridges: string[];

package/stores/settings/useSettingsStore.js

@@ -8,6 +8,7 @@ export const defaultConfigurableSettings = {
 export const defaultSettings = {
     appearance: 'auto',
     gasPrice: 'normal',
+    enabledAutoRefuel: true,
     showDestinationWallet: true,
     enabledBridges: [],
     enabledExchanges: [],