@lifi/widget 2.4.5 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "2.4.5",
+  "version": "2.5.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -43,13 +43,13 @@
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@lifi/sdk": "^2.4.0",
-    "@lifi/wallet-management": "^2.3.4",
-    "@mui/icons-material": "^5.14.9",
-    "@mui/lab": "^5.0.0-alpha.145",
-    "@mui/material": "^5.14.10",
-    "@tanstack/react-query": "^4.35.3",
-    "@tanstack/react-virtual": "^3.0.0-beta.60",
+    "@lifi/sdk": "^2.4.1",
+    "@lifi/wallet-management": "^2.3.5",
+    "@mui/icons-material": "^5.14.11",
+    "@mui/lab": "^5.0.0-alpha.146",
+    "@mui/material": "^5.14.11",
+    "@tanstack/react-query": "^4.35.7",
+    "@tanstack/react-virtual": "^3.0.0-beta.61",
     "big.js": "^6.2.1",
     "i18next": "^23.5.1",
     "i18next-browser-languagedetector": "^7.1.0",
@@ -57,13 +57,13 @@
     "mitt": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.46.1",
+    "react-hook-form": "^7.47.0",
     "react-i18next": "^13.2.2",
     "react-intersection-observer": "^9.5.2",
     "react-router-dom": "^6.16.0",
     "react-timer-hook": "^3.0.7",
     "uuid": "^9.0.1",
-    "zustand": "^4.4.1"
+    "zustand": "^4.4.2"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",

package/pages/SettingsPage/ResetSettingsButton.js

@@ -5,8 +5,18 @@ import { useTranslation } from 'react-i18next';
 import { Dialog } from '../../components/Dialog';
 import { useTools } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
-import { useSettingsStore } from '../../stores';
+import { defaultConfigurableSettings, setDefaultSettings, useSettingsStore, } from '../../stores';
+import { ResetButtonContainer } from './ResetSettingsButton.style';
+import { InfoRounded } from '@mui/icons-material';
+import { shallow } from 'zustand/shallow';
 export const ResetSettingsButton = () => {
+    const [enabledBridges, enabledExchanges, routePriority, slippage, gasPrice] = useSettingsStore((state) => [
+        state.enabledBridges,
+        state.enabledExchanges,
+        state.routePriority,
+        state.slippage,
+        state.gasPrice,
+    ], shallow);
     const { t } = useTranslation();
     const { tools } = useTools();
     const config = useWidgetConfig();
@@ -18,8 +28,26 @@ export const ResetSettingsButton = () => {
     const handleReset = () => {
         if (tools) {
             resetSettings(config, tools.bridges.map((tool) => tool.key), tools.exchanges.map((tool) => tool.key));
+            setDefaultSettings(config);
         }
         toggleDialog();
     };
-    return (_jsxs(Box, { px: 3, mt: 1.5, mb: 1, children: [_jsx(Button, { onClick: toggleDialog, fullWidth: true, children: t('button.resetSettings') }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('warning.title.resetSettings') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('warning.message.resetSettings') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: handleReset, autoFocus: true, children: t('button.reset') })] })] })] }));
+    const isSlippageChanged = config.slippage
+        ? Number(slippage) !== config.slippage * 100
+        : slippage !== defaultConfigurableSettings.slippage;
+    const isRoutePriorityChanged = config.routePriority
+        ? routePriority !== config.routePriority
+        : routePriority !== defaultConfigurableSettings.routePriority;
+    const isGasPriceChanged = gasPrice !== defaultConfigurableSettings.gasPrice;
+    const isCustomRouteSettings = tools?.bridges?.length !== enabledBridges?.length ||
+        tools?.exchanges?.length !== enabledExchanges?.length ||
+        isSlippageChanged ||
+        isRoutePriorityChanged ||
+        isGasPriceChanged;
+    if (!isCustomRouteSettings) {
+        return null;
+    }
+    return (_jsx(Box, { px: 3, mt: 1.5, mb: 1, children: _jsxs(ResetButtonContainer, { children: [_jsxs(Box, { display: "flex", marginBottom: "12px", children: [_jsx(InfoRounded, { sx: {
+                                marginRight: '8px',
+                            } }), _jsx(Box, { fontSize: 14, children: t(`settings.resetSettings`) })] }), _jsx(Button, { onClick: toggleDialog, fullWidth: true, children: t('button.resetSettings') }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('warning.title.resetSettings') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('warning.message.resetSettings') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: handleReset, autoFocus: true, children: t('button.reset') })] })] })] }) }));
 };

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ResetButtonContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/pages/SettingsPage/ResetSettingsButton.style.js

@@ -0,0 +1,10 @@
+import { getContrastAlphaColor } from '../../utils';
+import { Box, styled } from '@mui/material';
+export const ResetButtonContainer = styled(Box)(({ theme }) => ({
+    background: getContrastAlphaColor(theme.palette.mode, '4%'),
+    borderRadius: '16px',
+    padding: '16px',
+    [`svg`]: {
+        fill: getContrastAlphaColor(theme.palette.mode, '40%'),
+    },
+}));

package/pages/TransactionPage/StartTransactionButton.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DefaultTransactionButton } from '../../components/DefaultTransactionButton';
-import { useFundsSufficiency, useGasSufficiency, useRoutes } from '../../hooks';
+import { useFromTokenSufficiency, useGasSufficiency, useRoutes, } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
 import { useRouteExecutionStore } from '../../stores';
 export const StartTransactionButton = ({ onClick, route, text, loading, }) => {
     const { sdkConfig } = useWidgetConfig();
     const isMultisigSigner = sdkConfig?.multisigConfig?.isMultisigSigner;
     const { insufficientGas, isInitialLoading: isGasSufficiencyLoading } = useGasSufficiency(route);
-    const { insufficientFunds, isInitialLoading: isFundsSufficiencyLoading } = useFundsSufficiency(route);
-    const shouldDisableButton = !isMultisigSigner && (insufficientFunds || !!insufficientGas?.length);
-    return (_jsx(DefaultTransactionButton, { onClick: onClick, text: text, disabled: shouldDisableButton, loading: isFundsSufficiencyLoading || isGasSufficiencyLoading || loading }));
+    const { insufficientFromToken, isInitialLoading: isFromTokenSufficiencyLoading, } = useFromTokenSufficiency(route);
+    const shouldDisableButton = !isMultisigSigner && (insufficientFromToken || !!insufficientGas?.length);
+    return (_jsx(DefaultTransactionButton, { onClick: onClick, text: text, disabled: shouldDisableButton, loading: isFromTokenSufficiencyLoading || isGasSufficiencyLoading || loading }));
 };
 export const StartInsurableTransactionButton = ({ onClick, text, route, loading, disabled, insurableRouteId }) => {
     const routeExecution = useRouteExecutionStore((state) => state.routes[insurableRouteId]);

package/providers/SDKProvider/SDKProvider.js

@@ -7,16 +7,17 @@ let lifi;
 const SDKContext = createContext(null);
 export const useLiFi = () => useContext(SDKContext);
 export const SDKProvider = ({ children, }) => {
-    const { sdkConfig, fee, integrator, referrer, routePriority, slippage } = useWidgetConfig();
+    const { sdkConfig, integrator, apiKey, fee, referrer, routePriority, slippage, } = useWidgetConfig();
     const value = useMemo(() => {
         const config = {
             ...sdkConfig,
+            apiKey,
             integrator: integrator ?? window.location.hostname,
             defaultRouteOptions: {
-                fee,
                 integrator: integrator ?? window.location.hostname,
+                fee,
                 referrer,
-                routePriority,
+                order: routePriority,
                 slippage,
                 ...sdkConfig?.defaultRouteOptions,
             },
@@ -30,6 +31,6 @@ export const SDKProvider = ({ children, }) => {
         }
         lifi.setConfig(config);
         return lifi;
-    }, [fee, integrator, referrer, routePriority, sdkConfig, slippage]);
+    }, [apiKey, fee, integrator, referrer, routePriority, sdkConfig, slippage]);
     return _jsx(SDKContext.Provider, { value: value, children: children });
 };

package/stores/StoreProvider.js

@@ -4,5 +4,7 @@ import { HeaderStoreProvider } from './header';
 import { RouteExecutionStoreProvider } from './routes';
 import { SplitSubvariantStoreProvider } from './settings';
 export const StoreProvider = ({ children, config, }) => {
-    return (_jsx(SplitSubvariantStoreProvider, { state: config.subvariant === 'split' ? 'swap' : undefined, children: _jsx(HeaderStoreProvider, { namePrefix: config?.keyPrefix, children: _jsx(ChainOrderStoreProvider, { namePrefix: config?.keyPrefix, children: _jsx(RouteExecutionStoreProvider, { namePrefix: config?.keyPrefix, children: children }) }) }) }));
+    return (_jsx(SplitSubvariantStoreProvider, { state: config.subvariant === 'split'
+            ? config.subvariantOptions || 'swap'
+            : undefined, children: _jsx(HeaderStoreProvider, { namePrefix: config?.keyPrefix, children: _jsx(ChainOrderStoreProvider, { namePrefix: config?.keyPrefix, children: _jsx(RouteExecutionStoreProvider, { namePrefix: config?.keyPrefix, children: children }) }) }) }));
 };

package/stores/routes/createRouteExecutionStore.js

@@ -151,7 +151,7 @@ export const createRouteExecutionStore = ({ namePrefix }) => createWithEqualityF
             }
         }
         catch (error) {
-            console.log(error);
+            console.error(error);
         }
         return state;
     },

package/stores/settings/types.d.ts

@@ -35,12 +35,13 @@ export interface SendToWalletStore extends SendToWalletState {
     toggleSendToWallet(): void;
     setSendToWallet(value: boolean): void;
 }
+export type SplitSubvariantOptions = 'bridge' | 'swap';
 export interface SplitSubvariantState {
-    state?: 'swap' | 'bridge';
-    setState(state: 'swap' | 'bridge'): void;
+    state?: SplitSubvariantOptions;
+    setState(state: SplitSubvariantOptions): void;
 }
 export type SplitSubvariantStore = UseBoundStoreWithEqualityFn<StoreApi<SplitSubvariantState>>;
 export interface SplitSubvariantProps {
-    state?: 'swap' | 'bridge';
+    state?: SplitSubvariantOptions;
 }
 export type SplitSubvariantProviderProps = PropsWithChildren<SplitSubvariantProps>;

package/stores/settings/useSettingsStore.d.ts

@@ -1,6 +1,6 @@
 import type { WidgetConfig } from '../../types';
 import type { SettingsProps, SettingsState } from './types';
-export declare const defaultConfigurableSettings: Pick<SettingsState, 'routePriority' | 'slippage'>;
+export declare const defaultConfigurableSettings: Pick<SettingsState, 'routePriority' | 'slippage' | 'gasPrice'>;
 export declare const defaultSettings: SettingsProps;
 export declare const useSettingsStore: import("zustand/traditional").UseBoundStoreWithEqualityFn<import("zustand").StoreApi<SettingsState>>;
 export declare const setDefaultSettings: (config?: WidgetConfig) => void;

package/stores/settings/useSettingsStore.js

@@ -4,6 +4,7 @@ import { SettingsToolTypes } from './types';
 export const defaultConfigurableSettings = {
     routePriority: 'RECOMMENDED',
     slippage: '0.5',
+    gasPrice: 'normal',
 };
 export const defaultSettings = {
     appearance: 'auto',
@@ -64,10 +65,10 @@ export const useSettingsStore = createWithEqualityFn(persist((set, get) => ({
         }, {}),
     })),
     reset: (config, bridges, exchanges) => {
+        const { appearance, ...restDefaultSettings } = defaultSettings;
         set(() => ({
-            ...defaultSettings,
+            ...restDefaultSettings,
             ...defaultConfigurableSettings,
-            appearance: config.appearance ?? defaultSettings.appearance,
         }));
         get().initializeTools('Bridges', bridges, true);
         get().initializeTools('Exchanges', exchanges, true);
@@ -99,7 +100,7 @@ export const useSettingsStore = createWithEqualityFn(persist((set, get) => ({
     },
 }), Object.is);
 export const setDefaultSettings = (config) => {
-    const { slippage, routePriority, setValue } = useSettingsStore.getState();
+    const { slippage, routePriority, setValue, gasPrice } = useSettingsStore.getState();
     const defaultSlippage = (config?.slippage ||
         config?.sdkConfig?.defaultRouteOptions?.slippage ||
         0) * 100;
@@ -113,4 +114,7 @@ export const setDefaultSettings = (config) => {
     if (!routePriority) {
         setValue('routePriority', defaultConfigurableSettings.routePriority);
     }
+    if (!gasPrice) {
+        setValue('gasPrice', defaultConfigurableSettings.gasPrice);
+    }
 };

package/stores/settings/useSplitSubvariantStore.js

@@ -4,7 +4,7 @@ import { createWithEqualityFn } from 'zustand/traditional';
 export const SplitSubvariantStoreContext = createContext(null);
 const shouldRecreateStore = (store, props) => {
     const { state } = store.getState();
-    return (!state && props.state) || (state && !props.state);
+    return state !== props.state;
 };
 export function SplitSubvariantStoreProvider({ children, ...props }) {
     const storeRef = useRef();