@lifi/widget 1.26.0 → 1.26.2

package/cjs/components/BottomSheet/BottomSheet.js

@@ -6,13 +6,14 @@ const material_1 = require("@mui/material");
 const react_1 = require("react");
 const hooks_1 = require("../../hooks");
 const Dialog_1 = require("../Dialog");
-exports.BottomSheet = (0, react_1.forwardRef)(({ elementRef, children, open }, ref) => {
+exports.BottomSheet = (0, react_1.forwardRef)(({ elementRef, children, open, onClose }, ref) => {
     const openRef = (0, react_1.useRef)(open);
     const [drawerOpen, setDrawerOpen] = (0, react_1.useState)(open);
     const close = (0, react_1.useCallback)(() => {
         setDrawerOpen(false);
         openRef.current = false;
-    }, []);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onClose]);
     (0, react_1.useImperativeHandle)(ref, () => ({
         isOpen: () => openRef.current,
         open: () => {

package/cjs/components/BottomSheet/types.d.ts

@@ -1,7 +1,8 @@
 import type { DrawerProps } from '@mui/material';
 import type { RefObject } from 'react';
-export type BottomSheetProps = DrawerProps & {
+export type BottomSheetProps = Omit<DrawerProps, 'onClose'> & {
     elementRef?: RefObject<HTMLDivElement>;
+    onClose?(): void;
 };
 export interface BottomSheetBase {
     isOpen(): void;

package/cjs/config/version.d.ts

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

package/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '1.26.0';
+exports.version = '1.26.2';

package/cjs/hooks/useRouteExecution.js

@@ -20,6 +20,7 @@ const utils_1 = require("../utils");
 const useWidgetEvents_1 = require("./useWidgetEvents");
 const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchangeRateUpdate, }) => {
     const lifi = (0, providers_1.useLiFi)();
+    const queryClient = (0, react_query_1.useQueryClient)();
     const { account, switchChain } = (0, providers_1.useWallet)();
     const resumedAfterMount = (0, react_1.useRef)(false);
     const emitter = (0, useWidgetEvents_1.useWidgetEvents)();
@@ -77,6 +78,7 @@ const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchangeRateU
         if (!(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route)) {
             throw Error('Execution route not found.');
         }
+        queryClient.removeQueries(['routes']);
         return lifi.executeRoute(account.signer, routeExecution.route, {
             updateCallback,
             switchChainHook,

package/cjs/pages/SwapPage/ExchangeRateBottomSheet.d.ts

@@ -3,7 +3,7 @@ import type { ExchangeRateUpdateParams, Route } from '@lifi/sdk';
 export interface ExchangeRateBottomSheetBase {
     isOpen(): void;
     open(resolver: (value: boolean) => void, data: ExchangeRateUpdateParams): void;
-    close(value?: boolean): void;
+    close(value?: boolean, bottomSheetClose?: boolean): void;
 }
 interface ExchangeRateBottomSheetProps {
     data?: ExchangeRateUpdateParams;

package/cjs/pages/SwapPage/ExchangeRateBottomSheet.js

@@ -20,11 +20,16 @@ exports.ExchangeRateBottomSheet = (0, react_1.forwardRef)(({ onContinue, onCance
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close(true);
         onContinue === null || onContinue === void 0 ? void 0 : onContinue();
     };
-    const handleCancel = () => {
+    const handleCancel = (0, react_1.useCallback)(() => {
         var _a;
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close(false);
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-    };
+    }, [onCancel, ref]);
+    const handleClose = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close(false, false);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    }, [onCancel, ref]);
     (0, react_1.useImperativeHandle)(ref, () => ({
         isOpen: () => { var _a; return (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.isOpen(); },
         open: (resolver, data) => {
@@ -33,13 +38,15 @@ exports.ExchangeRateBottomSheet = (0, react_1.forwardRef)(({ onContinue, onCance
             resolverRef.current = resolver;
             (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.open();
         },
-        close: (value = false) => {
+        close: (value = false, bottomSheetClose = true) => {
             var _a, _b;
             (_a = resolverRef.current) === null || _a === void 0 ? void 0 : _a.call(resolverRef, value);
-            (_b = bottomSheetRef.current) === null || _b === void 0 ? void 0 : _b.close();
+            if (bottomSheetClose) {
+                (_b = bottomSheetRef.current) === null || _b === void 0 ? void 0 : _b.close();
+            }
         },
     }), []);
-    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: bottomSheetRef }, { children: (0, jsx_runtime_1.jsx)(ExchangeRateBottomSheetContent, { data: data, onContinue: handleContinue, onCancel: handleCancel }) })));
+    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: bottomSheetRef, onClose: handleClose }, { children: (0, jsx_runtime_1.jsx)(ExchangeRateBottomSheetContent, { data: data, onContinue: handleContinue, onCancel: handleCancel }) })));
 });
 const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
     const { t } = (0, react_i18next_1.useTranslation)();

package/cjs/pages/SwapPage/SwapPage.js

@@ -82,6 +82,6 @@ const SwapPage = () => {
                                 enableLoading: true }), status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleRemoveRoute, sx: {
                                         minWidth: 48,
                                         marginLeft: 1,
-                                    } }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Delete, {}) })) }))) : null] }))] })) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null, route ? ((0, jsx_runtime_1.jsx)(TokenValueBottomSheet_1.TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, route ? (0, jsx_runtime_1.jsx)(ExchangeRateBottomSheet_1.ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef }) : null] }));
+                                    } }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Delete, {}) })) }))) : null] }))] })) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null, route ? ((0, jsx_runtime_1.jsx)(TokenValueBottomSheet_1.TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, route ? ((0, jsx_runtime_1.jsx)(ExchangeRateBottomSheet_1.ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })) : null] }));
 };
 exports.SwapPage = SwapPage;

package/cjs/pages/SwapPage/TokenValueBottomSheet.js

@@ -16,7 +16,7 @@ exports.TokenValueBottomSheet = (0, react_1.forwardRef)(({ route, onContinue, on
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
     };
-    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: ref }, { children: (0, jsx_runtime_1.jsx)(TokenValueBottomSheetContent, { route: route, onContinue: onContinue, onCancel: handleCancel }) })));
+    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: ref, onClose: onCancel }, { children: (0, jsx_runtime_1.jsx)(TokenValueBottomSheetContent, { route: route, onContinue: onContinue, onCancel: handleCancel }) })));
 });
 const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();

package/components/BottomSheet/BottomSheet.js

@@ -3,13 +3,14 @@ import { Drawer } from '@mui/material';
 import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
 import { getScrollableContainer } from '../../hooks';
 import { backdropProps, modalProps, paperProps } from '../Dialog';
-export const BottomSheet = forwardRef(({ elementRef, children, open }, ref) => {
+export const BottomSheet = forwardRef(({ elementRef, children, open, onClose }, ref) => {
     const openRef = useRef(open);
     const [drawerOpen, setDrawerOpen] = useState(open);
     const close = useCallback(() => {
         setDrawerOpen(false);
         openRef.current = false;
-    }, []);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onClose]);
     useImperativeHandle(ref, () => ({
         isOpen: () => openRef.current,
         open: () => {

package/components/BottomSheet/types.d.ts

@@ -1,7 +1,8 @@
 import type { DrawerProps } from '@mui/material';
 import type { RefObject } from 'react';
-export type BottomSheetProps = DrawerProps & {
+export type BottomSheetProps = Omit<DrawerProps, 'onClose'> & {
     elementRef?: RefObject<HTMLDivElement>;
+    onClose?(): void;
 };
 export interface BottomSheetBase {
     isOpen(): void;

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/useRouteExecution.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef } from 'react';
 import shallow from 'zustand/shallow';
 import { useLiFi, useWallet } from '../providers';
@@ -17,6 +17,7 @@ import { deepClone } from '../utils';
 import { useWidgetEvents } from './useWidgetEvents';
 export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchangeRateUpdate, }) => {
     const lifi = useLiFi();
+    const queryClient = useQueryClient();
     const { account, switchChain } = useWallet();
     const resumedAfterMount = useRef(false);
     const emitter = useWidgetEvents();
@@ -74,6 +75,7 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
         if (!(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route)) {
             throw Error('Execution route not found.');
         }
+        queryClient.removeQueries(['routes']);
         return lifi.executeRoute(account.signer, routeExecution.route, {
             updateCallback,
             switchChainHook,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.26.0",
+  "version": "1.26.2",
   "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",
@@ -50,7 +50,7 @@
     "@sentry/integrations": "^7.21.1",
     "@sentry/react": "^7.21.1",
     "@sentry/tracing": "^7.21.1",
-    "@tanstack/react-query": "^4.16.1",
+    "@tanstack/react-query": "^4.18.0",
     "@tanstack/react-virtual": "^3.0.0-beta.23",
     "big.js": "^6.2.1",
     "i18next": "22.0.4",
@@ -60,7 +60,7 @@
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.39.5",
+    "react-hook-form": "^7.39.7",
     "react-i18next": "^12.0.0",
     "react-router-dom": "^6.4.3",
     "react-timer-hook": "^3.0.5",

package/pages/SwapPage/ExchangeRateBottomSheet.d.ts

@@ -3,7 +3,7 @@ import type { ExchangeRateUpdateParams, Route } from '@lifi/sdk';
 export interface ExchangeRateBottomSheetBase {
     isOpen(): void;
     open(resolver: (value: boolean) => void, data: ExchangeRateUpdateParams): void;
-    close(value?: boolean): void;
+    close(value?: boolean, bottomSheetClose?: boolean): void;
 }
 interface ExchangeRateBottomSheetProps {
     data?: ExchangeRateUpdateParams;

package/pages/SwapPage/ExchangeRateBottomSheet.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { WarningRounded as WarningIcon } from '@mui/icons-material';
 import { Box, Button, Typography } from '@mui/material';
 import Big from 'big.js';
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BottomSheet } from '../../components/BottomSheet';
 import { useSetContentHeight } from '../../hooks';
@@ -17,11 +17,16 @@ export const ExchangeRateBottomSheet = forwardRef(({ onContinue, onCancel }, ref
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close(true);
         onContinue === null || onContinue === void 0 ? void 0 : onContinue();
     };
-    const handleCancel = () => {
+    const handleCancel = useCallback(() => {
         var _a;
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close(false);
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-    };
+    }, [onCancel, ref]);
+    const handleClose = useCallback(() => {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close(false, false);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    }, [onCancel, ref]);
     useImperativeHandle(ref, () => ({
         isOpen: () => { var _a; return (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.isOpen(); },
         open: (resolver, data) => {
@@ -30,13 +35,15 @@ export const ExchangeRateBottomSheet = forwardRef(({ onContinue, onCancel }, ref
             resolverRef.current = resolver;
             (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.open();
         },
-        close: (value = false) => {
+        close: (value = false, bottomSheetClose = true) => {
             var _a, _b;
             (_a = resolverRef.current) === null || _a === void 0 ? void 0 : _a.call(resolverRef, value);
-            (_b = bottomSheetRef.current) === null || _b === void 0 ? void 0 : _b.close();
+            if (bottomSheetClose) {
+                (_b = bottomSheetRef.current) === null || _b === void 0 ? void 0 : _b.close();
+            }
         },
     }), []);
-    return (_jsx(BottomSheet, Object.assign({ ref: bottomSheetRef }, { children: _jsx(ExchangeRateBottomSheetContent, { data: data, onContinue: handleContinue, onCancel: handleCancel }) })));
+    return (_jsx(BottomSheet, Object.assign({ ref: bottomSheetRef, onClose: handleClose }, { children: _jsx(ExchangeRateBottomSheetContent, { data: data, onContinue: handleContinue, onCancel: handleCancel }) })));
 });
 const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
     const { t } = useTranslation();

package/pages/SwapPage/StatusBottomSheet.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable consistent-return */
-import { Done as DoneIcon, ErrorRounded as ErrorIcon, InfoRounded as InfoIcon, WarningRounded as WarningIcon } from '@mui/icons-material';
+import { Done as DoneIcon, ErrorRounded as ErrorIcon, InfoRounded as InfoIcon, WarningRounded as WarningIcon, } from '@mui/icons-material';
 import { Box, Button, Typography } from '@mui/material';
 import { useEffect, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { BottomSheet } from '../../components/BottomSheet';
 import { Token } from '../../components/Token';
-import { getProcessMessage, useChains, useNavigateBack, useTokenBalance } from '../../hooks';
+import { getProcessMessage, useChains, useNavigateBack, useTokenBalance, } from '../../hooks';
 import { SwapFormKey } from '../../providers';
 import { RouteExecutionStatus } from '../../stores';
-import { formatTokenAmount, hasEnumFlag, navigationRoutes, shortenWalletAddress } from '../../utils';
+import { formatTokenAmount, hasEnumFlag, navigationRoutes, shortenWalletAddress, } from '../../utils';
 import { IconCircle, IconContainer } from './StatusBottomSheet.style';
 export const StatusBottomSheet = ({ status, route, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;

package/pages/SwapPage/SwapPage.js

@@ -23,7 +23,7 @@ import { RouteExecutionStatus } from '../../stores';
 import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet';
 import { StatusBottomSheet } from './StatusBottomSheet';
 import { Container } from './SwapPage.style';
-import { getTokenValueLossThreshold, TokenValueBottomSheet } from './TokenValueBottomSheet';
+import { getTokenValueLossThreshold, TokenValueBottomSheet, } from './TokenValueBottomSheet';
 export const SwapPage = () => {
     var _a;
     const { t } = useTranslation();
@@ -79,5 +79,5 @@ export const SwapPage = () => {
                                 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: {
                                         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] }));
+                                    } }, { 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/TokenValueBottomSheet.js

@@ -13,7 +13,7 @@ export const TokenValueBottomSheet = forwardRef(({ route, onContinue, onCancel }
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
     };
-    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsx(TokenValueBottomSheetContent, { route: route, onContinue: onContinue, onCancel: handleCancel }) })));
+    return (_jsx(BottomSheet, Object.assign({ ref: ref, onClose: onCancel }, { children: _jsx(TokenValueBottomSheetContent, { route: route, onContinue: onContinue, onCancel: handleCancel }) })));
 });
 const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
     const { t } = useTranslation();