fix: bottom sheet closing

packages/widget/src/components/BottomSheet/BottomSheet.tsx

@@ -4,7 +4,7 @@ import {
   useCallback,
   useImperativeHandle,
   useRef,
-  useState
+  useState,
 } from 'react';
 import { getScrollableContainer } from '../../hooks';
 import { backdropProps, modalProps, paperProps } from '../Dialog';
@@ -19,7 +19,7 @@ export const BottomSheet = forwardRef<BottomSheetBase, BottomSheetProps>(
       setDrawerOpen(false);
       openRef.current = false;
       onClose?.();
-    }, []);
+    }, [onClose]);
 
     useImperativeHandle(
       ref,

packages/widget/src/pages/SwapPage/ExchangeRateBottomSheet.tsx

@@ -3,13 +3,13 @@ import type { ExchangeRateUpdateParams, Route } from '@lifi/sdk';
 import { WarningRounded as WarningIcon } from '@mui/icons-material';
 import { Box, Button, Typography } from '@mui/material';
 import Big from 'big.js';
+import type { MutableRefObject } from 'react';
 import {
   forwardRef,
-  MutableRefObject,
   useCallback,
   useImperativeHandle,
   useRef,
-  useState
+  useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { BottomSheetBase } from '../../components/BottomSheet';
@@ -24,7 +24,7 @@ export interface ExchangeRateBottomSheetBase {
     resolver: (value: boolean) => void,
     data: ExchangeRateUpdateParams,
   ): void;
-  close(value?: boolean): void;
+  close(value?: boolean, bottomSheetClose?: boolean): void;
 }
 
 interface ExchangeRateBottomSheetProps {
@@ -51,7 +51,15 @@ export const ExchangeRateBottomSheet = forwardRef<
       false,
     );
     onCancel?.();
-  }, []);
+  }, [onCancel, ref]);
+
+  const handleClose = useCallback(() => {
+    (ref as MutableRefObject<ExchangeRateBottomSheetBase>).current?.close(
+      false,
+      false,
+    );
+    onCancel?.();
+  }, [onCancel, ref]);
 
   useImperativeHandle(
     ref,
@@ -62,16 +70,18 @@ export const ExchangeRateBottomSheet = forwardRef<
         resolverRef.current = resolver;
         bottomSheetRef.current?.open();
       },
-      close: (value = false) => {
+      close: (value = false, bottomSheetClose = true) => {
         resolverRef.current?.(value);
-        bottomSheetRef.current?.close();
+        if (bottomSheetClose) {
+          bottomSheetRef.current?.close();
+        }
       },
     }),
     [],
   );
 
   return (
-    <BottomSheet ref={bottomSheetRef} onClose={handleCancel}>
+    <BottomSheet ref={bottomSheetRef} onClose={handleClose}>
       <ExchangeRateBottomSheetContent
         data={data}
         onContinue={handleContinue}

packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable consistent-return */
 import {
-  Done as DoneIcon, ErrorRounded as ErrorIcon, InfoRounded as InfoIcon,
-  WarningRounded as WarningIcon
+  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';
@@ -14,7 +16,7 @@ import {
   getProcessMessage,
   useChains,
   useNavigateBack,
-  useTokenBalance
+  useTokenBalance,
 } from '../../hooks';
 import { SwapFormKey } from '../../providers';
 import type { RouteExecution } from '../../stores';
@@ -23,7 +25,7 @@ import {
   formatTokenAmount,
   hasEnumFlag,
   navigationRoutes,
-  shortenWalletAddress
+  shortenWalletAddress,
 } from '../../utils';
 import { IconCircle, IconContainer } from './StatusBottomSheet.style';
 

packages/widget/src/pages/SwapPage/SwapPage.tsx

@@ -11,15 +11,13 @@ import { SwapButton } from '../../components/SwapButton';
 import { useNavigateBack, useRouteExecution } from '../../hooks';
 import { SwapFormKey } from '../../providers';
 import { RouteExecutionStatus } from '../../stores';
-import {
-  ExchangeRateBottomSheet,
-  ExchangeRateBottomSheetBase
-} from './ExchangeRateBottomSheet';
+import type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet';
+import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet';
 import { StatusBottomSheet } from './StatusBottomSheet';
 import { Container } from './SwapPage.style';
 import {
   getTokenValueLossThreshold,
-  TokenValueBottomSheet
+  TokenValueBottomSheet,
 } from './TokenValueBottomSheet';
 
 export const SwapPage: React.FC = () => {
@@ -119,7 +117,9 @@ export const SwapPage: React.FC = () => {
           onContinue={handleExecuteRoute}
         />
       ) : null}
-      {route ? <ExchangeRateBottomSheet ref={exchangeRateBottomSheetRef} /> : null}
+      {route ? (
+        <ExchangeRateBottomSheet ref={exchangeRateBottomSheetRef} />
+      ) : null}
     </Container>
   );
 };

packages/widget/src/pages/SwapPage/TokenValueBottomSheet.tsx

@@ -3,7 +3,8 @@ import type { Route } from '@lifi/sdk';
 import { WarningRounded as WarningIcon } from '@mui/icons-material';
 import { Box, Button, Typography } from '@mui/material';
 import Big from 'big.js';
-import { forwardRef, MutableRefObject, useCallback, useRef } from 'react';
+import type { MutableRefObject } from 'react';
+import { forwardRef, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { BottomSheetBase } from '../../components/BottomSheet';
 import { BottomSheet } from '../../components/BottomSheet';
@@ -20,13 +21,13 @@ export const TokenValueBottomSheet = forwardRef<
   BottomSheetBase,
   TokenValueBottomSheetProps
 >(({ route, onContinue, onCancel }, ref) => {
-  const handleCancel = useCallback(() => {
+  const handleCancel = () => {
     (ref as MutableRefObject<BottomSheetBase>).current?.close();
     onCancel?.();
-  }, []);
+  };
 
   return (
-    <BottomSheet ref={ref} onClose={handleCancel}>
+    <BottomSheet ref={ref} onClose={onCancel}>
       <TokenValueBottomSheetContent
         route={route}
         onContinue={onContinue}