@lifi/widget 1.26.4 → 1.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.26.4",
+  "version": "1.27.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",
@@ -42,28 +42,28 @@
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@lifi/sdk": "^1.7.0",
+    "@lifi/sdk": "^1.7.1",
     "@lifi/wallet-management": "^1.2.2",
-    "@mui/icons-material": "^5.10.16",
-    "@mui/lab": "^5.0.0-alpha.110",
-    "@mui/material": "^5.10.16",
-    "@sentry/integrations": "^7.22.0",
-    "@sentry/react": "^7.22.0",
-    "@sentry/tracing": "^7.22.0",
-    "@tanstack/react-query": "^4.18.0",
-    "@tanstack/react-virtual": "^3.0.0-beta.23",
+    "@mui/icons-material": "^5.11.0",
+    "@mui/lab": "^5.0.0-alpha.112",
+    "@mui/material": "^5.11.0",
+    "@sentry/integrations": "^7.25.0",
+    "@sentry/react": "^7.25.0",
+    "@sentry/tracing": "^7.25.0",
+    "@tanstack/react-query": "^4.19.1",
+    "@tanstack/react-virtual": "^3.0.0-beta.30",
     "big.js": "^6.2.1",
-    "i18next": "22.0.4",
+    "i18next": "22.4.5",
     "i18next-browser-languagedetector": "^7.0.1",
     "microdiff": "^1.3.1",
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.40.0",
-    "react-i18next": "^12.0.0",
-    "react-router-dom": "^6.4.3",
+    "react-i18next": "^12.1.1",
+    "react-router-dom": "^6.4.5",
     "react-timer-hook": "^3.0.5",
-    "zustand": "^4.1.4"
+    "zustand": "^4.1.5"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",

package/pages/MainPage/MainSwapButton.js

@@ -8,14 +8,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
 import { useFormState } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { SwapButton } from '../../components/SwapButton';
 import { useSwapRoutes } from '../../hooks';
 import { useSetExecutableRoute } from '../../stores';
 import { navigationRoutes } from '../../utils';
-export const MainSwapButton = forwardRef((_, ref) => {
+export const MainSwapButton = () => {
     const navigate = useNavigate();
     const { isValid, isValidating } = useFormState();
     const setExecutableRoute = useSetExecutableRoute();
@@ -29,5 +28,5 @@ export const MainSwapButton = forwardRef((_, ref) => {
             });
         }
     });
-    return (_jsx(SwapButton, { onClick: handleClick, currentRoute: currentRoute, disable: isLoading || isFetching || isValidating || !isValid, ref: ref }));
-});
+    return (_jsx(SwapButton, { onClick: handleClick, currentRoute: currentRoute, disabled: isLoading || isFetching || isValidating || !isValid }));
+};

package/pages/SettingsPage/ColorSchemeButtonGroup.js

@@ -4,12 +4,13 @@ import { Box, ToggleButtonGroup } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useWidgetConfig } from '../../providers';
 import { useAppearance } from '../../stores';
+import { HiddenUI } from '../../types';
 import { ToggleButton } from './ColorSchemeButtonGroup.style';
 export const ColorSchemeButtonGroup = () => {
     const { t } = useTranslation();
-    const { disableAppearance } = useWidgetConfig();
+    const { disableAppearance, hiddenUI } = useWidgetConfig();
     const [appearance, setAppearance] = useAppearance();
-    if (disableAppearance) {
+    if (disableAppearance || (hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(HiddenUI.Appearance))) {
         return null;
     }
     return (_jsx(Box, Object.assign({ pb: 2 }, { children: _jsxs(ToggleButtonGroup, Object.assign({ color: "primary", value: appearance, onChange: (_, value) => {

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" | "primary" | "secondary" | "info" | "standard" | undefined;
+    color?: "success" | "warning" | "error" | "secondary" | "primary" | "info" | "standard" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     fullWidth?: boolean | undefined;

package/pages/SettingsPage/LanguageSelect.js

@@ -6,14 +6,15 @@ import { Card, CardTitle } from '../../components/Card';
 import { Select } from '../../components/Select';
 import { useWidgetConfig } from '../../providers';
 import { useSettings, useSettingsStore } from '../../stores';
+import { HiddenUI } from '../../types';
 export const LanguageSelect = () => {
     var _a;
     const { t } = useTranslation();
-    const { languages, disableI18n } = useWidgetConfig();
+    const { languages, hiddenUI } = useWidgetConfig();
     const { i18n } = useTranslation();
     const setValue = useSettingsStore((state) => state.setValue);
     const { language } = useSettings(['language']);
-    if (disableI18n) {
+    if (hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(HiddenUI.Language)) {
         return null;
     }
     const handleChangeLanguage = (event) => {

package/pages/SettingsPage/ShowDestinationWallet.js

@@ -3,18 +3,20 @@ import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Switch } from '../../components/Switch';
 import { useWidgetConfig } from '../../providers';
-import { useSettings, useSettingsStore } from '../../stores';
-import { DisabledUI } from '../../types';
+import { useSendToWalletStore, useSettings, useSettingsStore, } from '../../stores';
+import { HiddenUI } from '../../types';
 export const ShowDestinationWallet = () => {
     const { t } = useTranslation();
-    const { disabledUI } = useWidgetConfig();
+    const { hiddenUI } = useWidgetConfig();
+    const setSendToWallet = useSendToWalletStore((state) => state.setSendToWallet);
     const setValue = useSettingsStore((state) => state.setValue);
     const { showDestinationWallet } = useSettings(['showDestinationWallet']);
-    if (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(DisabledUI.ToAddress)) {
+    if (hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(HiddenUI.ToAddress)) {
         return null;
     }
     const onChange = (_, checked) => {
         setValue('showDestinationWallet', checked);
+        setSendToWallet(false);
     };
     return (_jsx(Box, Object.assign({ px: 3, pt: 2 }, { children: _jsxs(Box, Object.assign({ sx: {
                 display: 'flex',

package/pages/SwapPage/StartSwapButton.d.ts

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

package/pages/SwapPage/StartSwapButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SwapButton } from '../../components/SwapButton';
+import { useGasSufficiency } from '../../hooks';
+export const StartSwapButton = ({ onClick, currentRoute, text, }) => {
+    const { insufficientFunds, insufficientGas, isLoading: isGasSufficiencyLoading, } = useGasSufficiency(currentRoute);
+    return (_jsx(SwapButton, { onClick: onClick, text: text, currentRoute: currentRoute, disabled: insufficientFunds || !!(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length), loading: isGasSufficiencyLoading }));
+};

package/pages/SwapPage/SwapPage.js

@@ -16,11 +16,11 @@ import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { GasSufficiencyMessage } from '../../components/GasSufficiencyMessage';
 import { getStepList } from '../../components/Step';
-import { SwapButton } from '../../components/SwapButton';
 import { useNavigateBack, useRouteExecution } from '../../hooks';
 import { SwapFormKey } from '../../providers';
 import { RouteExecutionStatus } from '../../stores';
 import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet';
+import { StartSwapButton } from './StartSwapButton';
 import { StatusBottomSheet } from './StatusBottomSheet';
 import { Container } from './SwapPage.style';
 import { getTokenValueLossThreshold, TokenValueBottomSheet, } from './TokenValueBottomSheet';
@@ -74,9 +74,7 @@ export const SwapPage = () => {
         }
     };
     return (_jsxs(Container, { children: [getStepList(route), status === RouteExecutionStatus.Idle ||
-                status === RouteExecutionStatus.Failed ? (_jsxs(_Fragment, { children: [_jsx(GasSufficiencyMessage, { route: route, mt: 2 }), _jsxs(Box, Object.assign({ mt: 2, display: "flex" }, { children: [_jsx(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, 
-                                // disable={status === 'idle' && (isValidating || !isValid)}
-                                enableLoading: true }), status === RouteExecutionStatus.Failed ? (_jsx(Tooltip, Object.assign({ title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true }, { children: _jsx(Button, Object.assign({ onClick: handleRemoveRoute, sx: {
+                status === RouteExecutionStatus.Failed ? (_jsxs(_Fragment, { children: [_jsx(GasSufficiencyMessage, { route: route, mt: 2 }), _jsxs(Box, Object.assign({ mt: 2, display: "flex" }, { children: [_jsx(StartSwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route }), status === RouteExecutionStatus.Failed ? (_jsx(Tooltip, Object.assign({ title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true }, { children: _jsx(Button, Object.assign({ 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/stores/routes/useRouteExecutionStore.js

@@ -96,6 +96,18 @@ export const useRouteExecutionStore = create()(persist((set, get) => ({
     merge: (persistedState, currentState) => {
         const state = Object.assign(Object.assign({}, currentState), persistedState);
         try {
+            // Move swaps to history after 1 day
+            const currentTime = new Date().getTime();
+            const oneDay = 1000 * 60 * 60 * 24;
+            Object.values(state.routes).forEach((routeExecution) => {
+                var _a, _b, _c, _d, _e;
+                const startedAt = (_e = (_d = (_c = (_b = (_a = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps) === null || _a === void 0 ? void 0 : _a.find((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; })) === null || _b === void 0 ? void 0 : _b.execution) === null || _c === void 0 ? void 0 : _c.process.find((process) => process.startedAt)) === null || _d === void 0 ? void 0 : _d.startedAt) !== null && _e !== void 0 ? _e : 0;
+                const outdated = startedAt > 0 && currentTime - startedAt > oneDay;
+                if ((routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route) && outdated) {
+                    routeExecution.status |= RouteExecutionStatus.Done;
+                }
+            });
+            // migrate old routes
             const routeString = localStorage.getItem('routes');
             if (routeString) {
                 const routes = JSON.parse(routeString);
@@ -122,8 +134,8 @@ export const useRouteExecutionStore = create()(persist((set, get) => ({
                         state.routes[route.id].status = RouteExecutionStatus.Pending;
                     }
                 });
+                localStorage.removeItem('routes');
             }
-            localStorage.removeItem('routes');
         }
         catch (error) {
             console.log(error);

package/stores/settings/index.d.ts

@@ -1,4 +1,5 @@
 export * from './types';
 export * from './useAppearance';
+export * from './useSendToWalletStore';
 export * from './useSettings';
 export * from './useSettingsStore';

package/stores/settings/index.js

@@ -1,4 +1,5 @@
 export * from './types';
 export * from './useAppearance';
+export * from './useSendToWalletStore';
 export * from './useSettings';
 export * from './useSettingsStore';

package/stores/settings/types.d.ts

@@ -23,3 +23,11 @@ export interface SettingsStore extends SettingsState {
     initializeTools(toolType: SettingsToolType, tools: string[]): void;
     setTools(toolType: SettingsToolType, tools: string[], availableTools: (Pick<Bridge, 'key'> | Pick<Exchange, 'key'>)[]): void;
 }
+export interface SendToWalletState {
+    showSendToWallet: boolean;
+    showSendToWalletDirty: boolean;
+}
+export interface SendToWalletStore extends SendToWalletState {
+    toggleSendToWallet(): void;
+    setSendToWallet(value: boolean): void;
+}

package/stores/settings/useSendToWalletStore.js

@@ -0,0 +1,13 @@
+import create from 'zustand';
+export const useSendToWalletStore = create((set) => ({
+    showSendToWallet: false,
+    showSendToWalletDirty: false,
+    toggleSendToWallet: () => set((state) => ({
+        showSendToWallet: !state.showSendToWallet,
+        showSendToWalletDirty: true,
+    })),
+    setSendToWallet: (value) => set({
+        showSendToWallet: value,
+        showSendToWalletDirty: true,
+    }),
+}));