@lifi/widget 1.19.0 → 1.20.0

package/cjs/components/AppContainer.js

@@ -33,7 +33,6 @@ const RelativeContainer = (0, styles_1.styled)(material_1.Box, {
 const CssBaselineContainer = (0, styles_1.styled)(material_1.ScopedCssBaseline, {
     shouldForwardProp: (prop) => prop !== 'variant',
 })(({ variant }) => ({
-    position: 'relative',
     display: 'flex',
     flex: 1,
     flexDirection: 'column',

package/cjs/components/BottomSheet/BottomSheet.js

@@ -4,6 +4,7 @@ exports.BottomSheet = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 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) => {
     const openRef = (0, react_1.useRef)(open);
@@ -20,5 +21,5 @@ exports.BottomSheet = (0, react_1.forwardRef)(({ elementRef, children, open }, r
         },
         close,
     }), [close]);
-    return ((0, jsx_runtime_1.jsx)(material_1.Drawer, Object.assign({ ref: elementRef, anchor: "bottom", open: drawerOpen, onClose: close, ModalProps: Dialog_1.modalProps, PaperProps: Dialog_1.paperProps, BackdropProps: Dialog_1.backdropProps, disableAutoFocus: true, disableEnforceFocus: true, disableScrollLock: true, disablePortal: true }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(material_1.Drawer, Object.assign({ container: hooks_1.getScrollableContainer, ref: elementRef, anchor: "bottom", open: drawerOpen, onClose: close, ModalProps: Dialog_1.modalProps, PaperProps: Dialog_1.paperProps, BackdropProps: Dialog_1.backdropProps, disableAutoFocus: true }, { children: children })));
 });

package/cjs/components/ChainSelect/ChainSelect.js

@@ -25,7 +25,7 @@ const ChainSelect = ({ formType }) => {
     const chainsToHide = ((_a = chains === null || chains === void 0 ? void 0 : chains.length) !== null && _a !== void 0 ? _a : 0) - stores_1.maxChainToOrder;
     return ((0, jsx_runtime_1.jsxs)(ChainSelect_style_1.ChainContainer, { children: [isLoading
                 ? Array.from({ length: stores_1.maxChainToOrder + 1 }).map((_, index) => ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 56, height: 56, sx: { borderRadius: 1 } }, index)))
-                : getChains().map((chain) => ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: chain.name, placement: "top", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, Object.assign({ onClick: () => setCurrentChain(chain.id), variant: chainId === chain.id ? 'selected' : 'default' }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: chain.logoURI, alt: chain.key, sx: { width: 40, height: 40 } }, { children: chain.name[0] })) })) }), chain.id))), chainsToHide > 0 ? ((0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, Object.assign({ onClick: showAllChains }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
+                : getChains().map((chain) => ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: chain.name, placement: "top", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, Object.assign({ onClick: () => setCurrentChain(chain.id), variant: chainId === chain.id ? 'selected' : 'default' }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: chain.logoURI, alt: chain.key, sx: { width: 40, height: 40 } }, { children: chain.name[0] })) })) }), chain.id))), chainsToHide > 0 ? ((0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, Object.assign({ onClick: showAllChains }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
                         width: 40,
                         height: 40,
                         display: 'grid',

package/cjs/components/Dialog.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dialog = exports.backdropProps = exports.paperProps = exports.modalProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
+const hooks_1 = require("../hooks");
 exports.modalProps = {
     sx: {
         position: 'absolute',
@@ -25,6 +26,6 @@ exports.backdropProps = {
     },
 };
 const Dialog = ({ children, open, onClose, }) => {
-    return ((0, jsx_runtime_1.jsx)(material_1.Dialog, Object.assign({ open: open, onClose: onClose, sx: exports.modalProps.sx, PaperProps: exports.paperProps, BackdropProps: exports.backdropProps, disableAutoFocus: true, disableEnforceFocus: true, disableScrollLock: true, disablePortal: true }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(material_1.Dialog, Object.assign({ container: hooks_1.getScrollableContainer, open: open, onClose: onClose, sx: exports.modalProps.sx, PaperProps: exports.paperProps, BackdropProps: exports.backdropProps }, { children: children })));
 };
 exports.Dialog = Dialog;

package/cjs/components/Header/NavigationHeader.js

@@ -49,6 +49,6 @@ const NavigationHeader = () => {
                 return t(`header.swap`);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, Object.assign({ elevation: 0 }, { children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "start", onClick: navigateBack }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowBack, {}) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [account.isActive ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`header.swapHistory`), enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.swapHistory) }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.History, {}) })) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`header.settings`), enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "end", onClick: () => navigate(utils_1.navigationRoutes.settings) }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.SettingsOutlined, {}) })) }))] }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: element || (0, jsx_runtime_1.jsx)(material_1.Box, { width: 28, height: 40 }) })] })] })));
+    return ((0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, Object.assign({ elevation: 0 }, { children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "start", onClick: navigateBack }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowBack, {}) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [account.isActive ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`header.swapHistory`), enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.swapHistory) }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.History, {}) })) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`header.settings`), enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "end", onClick: () => navigate(utils_1.navigationRoutes.settings) }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.SettingsOutlined, {}) })) }))] }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: element || (0, jsx_runtime_1.jsx)(material_1.Box, { width: 28, height: 40 }) })] })] })));
 };
 exports.NavigationHeader = NavigationHeader;

package/cjs/components/ProgressToNextUpdate/ProgressToNextUpdate.js

@@ -42,7 +42,7 @@ const ProgressToNextUpdate = (_a) => {
     }, [isLoading]);
     return ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: onClick, disabled: isLoading }, other, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t('tooltip.progressToNextUpdate', {
                 value: getSecondsToUpdate(updatedAt, timeToUpdate),
-            }), placement: "top", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+            }), placement: "top", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
                     display: 'grid',
                     position: 'relative',
                     placeItems: 'center',

package/cjs/components/SendToWallet/SendToWalletButton.js

@@ -24,7 +24,7 @@ const SendToWalletButton = () => {
         }
         toggleSendToWallet();
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
                 minWidth: 48,
                 marginLeft: 1,
             } }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.WalletOutlined, {}) })) })));

package/cjs/components/SwapInput/SwapInputAdornment.js

@@ -24,6 +24,6 @@ const SwapInputAdornment = ({ formType }) => {
             shouldTouch: true,
         });
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: isLoading && tokenAddress ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 46, height: 20, sx: { borderRadius: 0.5 } })) : formType === 'from' && (token === null || token === void 0 ? void 0 : token.amount) ? ((0, jsx_runtime_1.jsx)(SwapInputAdornment_style_1.Button, Object.assign({ onClick: handleMax }, { children: t('button.max') }))) : null })));
+    return ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: isLoading && tokenAddress ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 46, height: 24, sx: { borderRadius: 0.5 } })) : formType === 'from' && (token === null || token === void 0 ? void 0 : token.amount) ? ((0, jsx_runtime_1.jsx)(SwapInputAdornment_style_1.Button, Object.assign({ onClick: handleMax }, { children: t('button.max') }))) : null })));
 };
 exports.SwapInputAdornment = SwapInputAdornment;

package/cjs/components/SwapInput/SwapInputAdornment.style.js

@@ -5,7 +5,7 @@ const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 exports.Button = (0, styles_1.styled)(material_1.Button)(({ theme }) => ({
     padding: theme.spacing(0.5, 1, 0.625, 1),
-    lineHeight: 1,
+    lineHeight: 1.0715,
     fontSize: '0.875rem',
     minWidth: 'unset',
 }));

package/cjs/components/SwapRouteCard/SwapRouteCard.js

@@ -44,8 +44,8 @@ const SwapRouteCardEssentials = ({ route, dense }) => {
         .map((step) => step.estimate.executionDuration)
         .reduce((duration, x) => duration + x, 0) / 60);
     const gasCostUSD = parseFloat((_a = route.gasCostUSD) !== null && _a !== void 0 ? _a : '') || 0.01;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`tooltip.estimatedNetworkFee`), placement: "top", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.EvStationOutlined, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t(`swap.currency`, { value: gasCostUSD }) }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.AccessTime, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t('swap.estimatedTime', {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`tooltip.estimatedNetworkFee`), placement: "top", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.EvStationOutlined, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t(`swap.currency`, { value: gasCostUSD }) }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.AccessTime, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t('swap.estimatedTime', {
                                 value: executionTimeMinutes,
-                            }) }))] })) })), !dense ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.LayersOutlined, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: route.steps.length }))] })) }))) : null] })));
+                            }) }))] })) })), !dense ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.LayersOutlined, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: route.steps.length }))] })) }))) : null] })));
 };
 exports.SwapRouteCardEssentials = SwapRouteCardEssentials;

package/cjs/config/version.d.ts

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

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.19.0';
+exports.version = '1.20.0';

package/cjs/hooks/useContentHeight.d.ts

@@ -1 +1,3 @@
+import type { MutableRefObject } from 'react';
 export declare const useContentHeight: () => number;
+export declare const useSetContentHeight: (ref: MutableRefObject<HTMLElement | undefined>) => void;

package/cjs/hooks/useContentHeight.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useContentHeight = void 0;
+exports.useSetContentHeight = exports.useContentHeight = void 0;
 const react_1 = require("react");
 const utils_1 = require("../utils");
+const useScrollableContainer_1 = require("./useScrollableContainer");
 const getContentHeight = () => {
     const headerElement = document.getElementById(utils_1.ElementId.Header);
     const containerElement = document.getElementById(utils_1.ElementId.ScrollableContainer);
@@ -25,3 +26,19 @@ const useContentHeight = () => {
     return contentHeight;
 };
 exports.useContentHeight = useContentHeight;
+const useSetContentHeight = (ref) => {
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        const scrollableContainer = (0, useScrollableContainer_1.getScrollableContainer)();
+        if (!scrollableContainer ||
+            !ref.current ||
+            ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientHeight) <= (scrollableContainer === null || scrollableContainer === void 0 ? void 0 : scrollableContainer.clientHeight)) {
+            return;
+        }
+        scrollableContainer.style.height = `${ref.current.clientHeight}px`;
+        return () => {
+            scrollableContainer.style.removeProperty('height');
+        };
+    }, [ref]);
+};
+exports.useSetContentHeight = useSetContentHeight;

package/cjs/i18n/en/translation.json

@@ -22,6 +22,7 @@
     "removeSwap": "Remove swap",
     "done": "Done",
     "okay": "Okay",
+    "continue": "Continue",
     "seeDetails": "See details",
     "tryAgain": "Try again",
     "light": "Light",
@@ -62,6 +63,10 @@
     "supportId": "Support ID",
     "sendToWallet": "Send to a different wallet",
     "walletAddressOrEns": "Wallet address or ENS name",
+    "swapping": "Swapping",
+    "gasCost": "Gas cost",
+    "receiving": "Receiving",
+    "valueLoss": "Value loss",
     "tags": {
       "RECOMMENDED": "RECOMMENDED",
       "FASTEST": "FAST",
@@ -95,13 +100,15 @@
         "insufficientGas": "Insufficient gas",
         "deleteSwap": "Delete this swap?",
         "deleteSwapHistory": "Delete swap history?",
-        "deleteActiveSwaps": "Delete all active swaps?"
+        "deleteActiveSwaps": "Delete all active swaps?",
+        "highValueLoss": "High value loss"
       },
       "message": {
         "insufficientFunds": "You don't have enough funds to execute the swap.",
         "insufficientGas": "You need to add at least:",
         "deleteSwapHistory": "Swap history is only stored locally and can't be recovered if you delete it.",
-        "deleteActiveSwaps": "Active swaps are only stored locally and can't be recovered if you delete them."
+        "deleteActiveSwaps": "Active swaps are only stored locally and can't be recovered if you delete them.",
+        "highValueLoss": "The value of the received tokens is significantly lower than the swapped tokens and transaction cost."
       }
     },
     "error": {

package/cjs/i18n/index.d.ts

@@ -25,6 +25,7 @@ export declare const resources: {
                 removeSwap: string;
                 done: string;
                 okay: string;
+                continue: string;
                 seeDetails: string;
                 tryAgain: string;
                 light: string;
@@ -65,6 +66,10 @@ export declare const resources: {
                 supportId: string;
                 sendToWallet: string;
                 walletAddressOrEns: string;
+                swapping: string;
+                gasCost: string;
+                receiving: string;
+                valueLoss: string;
                 tags: {
                     RECOMMENDED: string;
                     FASTEST: string;
@@ -99,12 +104,14 @@ export declare const resources: {
                         deleteSwap: string;
                         deleteSwapHistory: string;
                         deleteActiveSwaps: string;
+                        highValueLoss: string;
                     };
                     message: {
                         insufficientFunds: string;
                         insufficientGas: string;
                         deleteSwapHistory: string;
                         deleteActiveSwaps: string;
+                        highValueLoss: string;
                     };
                 };
                 error: {

package/cjs/pages/SwapPage/StatusBottomSheet.js

@@ -79,6 +79,6 @@ const StatusBottomSheet = ({ status, route, }) => {
             (_b = ref.current) === null || _b === void 0 ? void 0 : _b.open();
         }
     }, [refetch, refetchNewBalance, status]);
-    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: ref }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3 }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary", sx: StatusBottomSheet_style_1.iconStyles })) : null, status === 'success' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success", sx: StatusBottomSheet_style_1.iconStyles })) : null, status === 'error' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error", sx: StatusBottomSheet_style_1.iconStyles })) : null] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_g = (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.estimate.toAmount) !== null && _g !== void 0 ? _g : route.toAmount }), py: 1 })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ pt: 2, pb: 1 }, { children: message })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.okay') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.tryAgain') : null] })) })), status === 'success' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
+    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: ref }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3 }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary" }) : null, status === 'success' ? (0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success" }) : null, status === 'error' ? (0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error" }) : null] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_g = (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.estimate.toAmount) !== null && _g !== void 0 ? _g : route.toAmount }), py: 1 })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: message })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.okay') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.seeDetails') : null] })) })), status === 'success' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
 };
 exports.StatusBottomSheet = StatusBottomSheet;

package/cjs/pages/SwapPage/StatusBottomSheet.style.d.ts

@@ -19,7 +19,3 @@ export declare const IconCircle: import("@emotion/styled").StyledComponent<impor
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
     status: RouteExecutionStatus;
 }, {}, {}>;
-export declare const iconStyles: {
-    position: string;
-    fontSize: string;
-};

package/cjs/pages/SwapPage/StatusBottomSheet.style.js

@@ -1,16 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.iconStyles = exports.IconCircle = exports.IconContainer = void 0;
+exports.IconCircle = exports.IconContainer = void 0;
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const getStatusColor = (status, theme) => {
     switch (status) {
         case 'success':
-            return theme.palette.success.main;
+            return { color: theme.palette.success.main, alpha: 0.15, darken: 0 };
         case 'error':
-            return theme.palette.error.main;
+            return { color: theme.palette.error.main, alpha: 0.2, darken: 0 };
+        case 'warning':
+            return { color: theme.palette.warning.main, alpha: 0.7, darken: 0.4 };
         default:
-            return theme.palette.primary.main;
+            return { color: theme.palette.primary.main, alpha: 0.15, darken: 0 };
     }
 };
 exports.IconContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
@@ -20,16 +22,20 @@ exports.IconContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
 }));
 exports.IconCircle = (0, styles_1.styled)(material_1.Box, {
     shouldForwardProp: (prop) => prop !== 'status',
-})(({ theme, status }) => ({
-    border: `3px solid ${getStatusColor(status, theme)}`,
-    borderRadius: '50%',
-    width: 64,
-    height: 64,
-    display: 'grid',
-    position: 'relative',
-    placeItems: 'center',
-}));
-exports.iconStyles = {
-    position: 'absolute',
-    fontSize: '2.5rem',
-};
+})(({ theme, status }) => {
+    const { color, alpha: alphaValue, darken: darkenValue, } = getStatusColor(status, theme);
+    return {
+        backgroundColor: (0, styles_1.alpha)(color, alphaValue),
+        borderRadius: '50%',
+        width: 64,
+        height: 64,
+        display: 'grid',
+        position: 'relative',
+        placeItems: 'center',
+        '& > svg': {
+            color: (0, styles_1.darken)(color, darkenValue),
+            width: 32,
+            height: 32,
+        },
+    };
+});

package/cjs/pages/SwapPage/SwapPage.js

@@ -25,32 +25,51 @@ const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const StatusBottomSheet_1 = require("./StatusBottomSheet");
 const SwapPage_style_1 = require("./SwapPage.style");
+const TokenValueBottomSheet_1 = require("./TokenValueBottomSheet");
 const SwapPage = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { state } = (0, react_router_dom_1.useLocation)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
-    const { setValue, formState: { isValid, isValidating }, } = (0, react_hook_form_1.useFormContext)();
+    const tokenValueBottomSheetRef = (0, react_1.useRef)(null);
+    const { setValue,
+    // formState: { isValid, isValidating },
+     } = (0, react_hook_form_1.useFormContext)();
     const { route, status, executeRoute, restartRoute, deleteRoute } = (0, hooks_1.useRouteExecution)(state === null || state === void 0 ? void 0 : state.routeId);
-    const handleRemoveRoute = () => {
-        navigateBack();
-        deleteRoute();
-    };
+    const handleExecuteRoute = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        if ((_a = tokenValueBottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.isOpen()) {
+            (_b = tokenValueBottomSheetRef.current) === null || _b === void 0 ? void 0 : _b.close();
+        }
+        executeRoute();
+        setValue(providers_1.SwapFormKey.FromAmount, '');
+    }, [executeRoute, setValue]);
     const handleSwapClick = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
         if (status === 'idle') {
-            executeRoute();
-            setValue(providers_1.SwapFormKey.FromAmount, '');
+            const thresholdExceeded = (0, TokenValueBottomSheet_1.getTokenValueLossThreshold)(route);
+            if (thresholdExceeded) {
+                (_a = tokenValueBottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.open();
+            }
+            else {
+                handleExecuteRoute();
+            }
         }
         if (status === 'error') {
             restartRoute();
         }
     });
-    // eslint-disable-next-line consistent-return
+    const handleRemoveRoute = () => {
+        navigateBack();
+        deleteRoute();
+    };
     const getSwapButtonText = () => {
-        if (status === 'idle') {
-            return t('button.startSwap');
-        }
-        if (status === 'error') {
-            return t('button.restartSwap');
+        switch (status) {
+            case 'idle':
+                return t('button.startSwap');
+            case 'error':
+                return t('button.restartSwap');
+            default:
+                return '';
         }
     };
     return ((0, jsx_runtime_1.jsxs)(SwapPage_style_1.Container, { children: [route === null || route === void 0 ? void 0 : route.steps.map((step, index, steps) => {
@@ -58,9 +77,11 @@ const SwapPage = () => {
                 return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Step_1.Step, { step: step, fromToken: index === 0
                                 ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined, toToken: index === steps.length - 1
                                 ? Object.assign(Object.assign({}, step.action.toToken), { amount: (_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount }) : undefined }), steps.length > 1 && index !== steps.length - 1 ? ((0, jsx_runtime_1.jsx)(StepDivider_1.StepDivider, {})) : null] }, step.id));
-            }), status === 'idle' || status === 'error' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { route: route, mt: 2 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2, display: "flex" }, { children: [(0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, disable: status === 'idle' && (isValidating || !isValid), enableLoading: true }), status === 'error' ? ((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] }));
+            }), status === 'idle' || status === 'error' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { route: route, mt: 2 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2, display: "flex" }, { children: [(0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, 
+                                // disable={status === 'idle' && (isValidating || !isValid)}
+                                enableLoading: true }), status === 'error' ? ((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] }));
 };
 exports.SwapPage = SwapPage;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { Route } from '@lifi/sdk';
+import type { BottomSheetBase } from '../../components/BottomSheet';
+interface TokenValueBottomSheetProps {
+    route: Route;
+    onContinue(): void;
+    onCancel?(): void;
+}
+export declare const TokenValueBottomSheet: import("react").ForwardRefExoticComponent<TokenValueBottomSheetProps & import("react").RefAttributes<BottomSheetBase>>;
+export declare const getTokenValueLossThreshold: (route?: Route) => boolean;
+export {};

package/cjs/pages/SwapPage/TokenValueBottomSheet.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTokenValueLossThreshold = exports.TokenValueBottomSheet = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const big_js_1 = require("big.js");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const BottomSheet_1 = require("../../components/BottomSheet");
+const hooks_1 = require("../../hooks");
+const StatusBottomSheet_style_1 = require("./StatusBottomSheet.style");
+exports.TokenValueBottomSheet = (0, react_1.forwardRef)(({ route, onContinue, onCancel }, ref) => {
+    const handleCancel = () => {
+        var _a;
+        (_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 }) })));
+});
+const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const ref = (0, react_1.useRef)();
+    (0, hooks_1.useSetContentHeight)(ref);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3, ref: ref }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: "warning", mb: 1 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "warning" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: t('swap.warning.title.highValueLoss') }))] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: t('swap.warning.message.highValueLoss') })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 1 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.swapping') }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: t('swap.currency', { value: route.fromAmountUSD }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.gasCost') }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: t('swap.currency', { value: route.gasCostUSD }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.receiving') }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: t('swap.currency', { value: route.toAmountUSD }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.valueLoss') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: [(0, big_js_1.default)(route.toAmountUSD || 0)
+                                .div((0, big_js_1.default)(route.fromAmountUSD || 0).plus((0, big_js_1.default)(route.gasCostUSD || 0)))
+                                .mul(-100)
+                                .toFixed(1), "%"] }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", mt: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", onClick: onCancel, fullWidth: true }, { children: t('button.cancel') })), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", p: 1 }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", onClick: onContinue, fullWidth: true }, { children: t('button.continue') }))] }))] })));
+};
+const getTokenValueLossThreshold = (route) => {
+    if (!route) {
+        return false;
+    }
+    const fromAmountUSD = (0, big_js_1.default)((route === null || route === void 0 ? void 0 : route.fromAmountUSD) || 0);
+    const toAmountUSD = (0, big_js_1.default)((route === null || route === void 0 ? void 0 : route.toAmountUSD) || 0);
+    const gasCostUSD = (0, big_js_1.default)((route === null || route === void 0 ? void 0 : route.gasCostUSD) || 0);
+    if (fromAmountUSD.eq(0) && toAmountUSD.eq(0)) {
+        return false;
+    }
+    return toAmountUSD.div(fromAmountUSD.plus(gasCostUSD)).lt(0.9);
+};
+exports.getTokenValueLossThreshold = getTokenValueLossThreshold;

package/cjs/stores/routes/types.d.ts

@@ -7,7 +7,7 @@ export interface RouteExecutionStore {
     deleteRoute: (routeId: string) => void;
     deleteRoutes: (type: 'completed' | 'active') => void;
 }
-export declare type RouteExecutionStatus = 'error' | 'idle' | 'loading' | 'success';
+export declare type RouteExecutionStatus = 'error' | 'idle' | 'loading' | 'success' | 'warning';
 export interface RouteExecution {
     route: Route;
     status: RouteExecutionStatus;

package/components/AppContainer.js

@@ -30,7 +30,6 @@ const RelativeContainer = styled(Box, {
 const CssBaselineContainer = styled(ScopedCssBaseline, {
     shouldForwardProp: (prop) => prop !== 'variant',
 })(({ variant }) => ({
-    position: 'relative',
     display: 'flex',
     flex: 1,
     flexDirection: 'column',

package/components/BottomSheet/BottomSheet.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 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) => {
     const openRef = useRef(open);
@@ -17,5 +18,5 @@ export const BottomSheet = forwardRef(({ elementRef, children, open }, ref) => {
         },
         close,
     }), [close]);
-    return (_jsx(Drawer, Object.assign({ ref: elementRef, anchor: "bottom", open: drawerOpen, onClose: close, ModalProps: modalProps, PaperProps: paperProps, BackdropProps: backdropProps, disableAutoFocus: true, disableEnforceFocus: true, disableScrollLock: true, disablePortal: true }, { children: children })));
+    return (_jsx(Drawer, Object.assign({ container: getScrollableContainer, ref: elementRef, anchor: "bottom", open: drawerOpen, onClose: close, ModalProps: modalProps, PaperProps: paperProps, BackdropProps: backdropProps, disableAutoFocus: true }, { children: children })));
 });

package/components/ChainSelect/ChainSelect.js

@@ -22,7 +22,7 @@ export const ChainSelect = ({ formType }) => {
     const chainsToHide = ((_a = chains === null || chains === void 0 ? void 0 : chains.length) !== null && _a !== void 0 ? _a : 0) - maxChainToOrder;
     return (_jsxs(ChainContainer, { children: [isLoading
                 ? Array.from({ length: maxChainToOrder + 1 }).map((_, index) => (_jsx(Skeleton, { variant: "rectangular", width: 56, height: 56, sx: { borderRadius: 1 } }, index)))
-                : getChains().map((chain) => (_jsx(Tooltip, Object.assign({ title: chain.name, placement: "top", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: _jsx(ChainCard, Object.assign({ onClick: () => setCurrentChain(chain.id), variant: chainId === chain.id ? 'selected' : 'default' }, { children: _jsx(Avatar, Object.assign({ src: chain.logoURI, alt: chain.key, sx: { width: 40, height: 40 } }, { children: chain.name[0] })) })) }), chain.id))), chainsToHide > 0 ? (_jsx(ChainCard, Object.assign({ onClick: showAllChains }, { children: _jsx(Box, Object.assign({ sx: {
+                : getChains().map((chain) => (_jsx(Tooltip, Object.assign({ title: chain.name, placement: "top", enterDelay: 400, arrow: true }, { children: _jsx(ChainCard, Object.assign({ onClick: () => setCurrentChain(chain.id), variant: chainId === chain.id ? 'selected' : 'default' }, { children: _jsx(Avatar, Object.assign({ src: chain.logoURI, alt: chain.key, sx: { width: 40, height: 40 } }, { children: chain.name[0] })) })) }), chain.id))), chainsToHide > 0 ? (_jsx(ChainCard, Object.assign({ onClick: showAllChains }, { children: _jsx(Box, Object.assign({ sx: {
                         width: 40,
                         height: 40,
                         display: 'grid',

package/components/Dialog.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dialog as MuiDialog } from '@mui/material';
+import { getScrollableContainer } from '../hooks';
 export const modalProps = {
     sx: {
         position: 'absolute',
@@ -22,5 +23,5 @@ export const backdropProps = {
     },
 };
 export const Dialog = ({ children, open, onClose, }) => {
-    return (_jsx(MuiDialog, Object.assign({ open: open, onClose: onClose, sx: modalProps.sx, PaperProps: paperProps, BackdropProps: backdropProps, disableAutoFocus: true, disableEnforceFocus: true, disableScrollLock: true, disablePortal: true }, { children: children })));
+    return (_jsx(MuiDialog, Object.assign({ container: getScrollableContainer, open: open, onClose: onClose, sx: modalProps.sx, PaperProps: paperProps, BackdropProps: backdropProps }, { children: children })));
 };

package/components/Header/NavigationHeader.js

@@ -46,5 +46,5 @@ export const NavigationHeader = () => {
                 return t(`header.swap`);
         }
     };
-    return (_jsxs(HeaderAppBar, Object.assign({ elevation: 0 }, { children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, Object.assign({ size: "medium", edge: "start", onClick: navigateBack }, { children: _jsx(ArrowBackIcon, {}) }))) : null, _jsx(Typography, Object.assign({ fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive ? (_jsx(Tooltip, Object.assign({ title: t(`header.swapHistory`), enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: _jsx(IconButton, Object.assign({ size: "medium", edge: "start", onClick: () => navigate(navigationRoutes.swapHistory) }, { children: _jsx(HistoryIcon, {}) })) }))) : null, _jsx(Tooltip, Object.assign({ title: t(`header.settings`), enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: _jsx(IconButton, Object.assign({ size: "medium", edge: "end", onClick: () => navigate(navigationRoutes.settings) }, { children: _jsx(SettingsIcon, {}) })) }))] }) }), _jsx(Route, { path: "*", element: element || _jsx(Box, { width: 28, height: 40 }) })] })] })));
+    return (_jsxs(HeaderAppBar, Object.assign({ elevation: 0 }, { children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, Object.assign({ size: "medium", edge: "start", onClick: navigateBack }, { children: _jsx(ArrowBackIcon, {}) }))) : null, _jsx(Typography, Object.assign({ fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive ? (_jsx(Tooltip, Object.assign({ title: t(`header.swapHistory`), enterDelay: 400, arrow: true }, { children: _jsx(IconButton, Object.assign({ size: "medium", edge: "start", onClick: () => navigate(navigationRoutes.swapHistory) }, { children: _jsx(HistoryIcon, {}) })) }))) : null, _jsx(Tooltip, Object.assign({ title: t(`header.settings`), enterDelay: 400, arrow: true }, { children: _jsx(IconButton, Object.assign({ size: "medium", edge: "end", onClick: () => navigate(navigationRoutes.settings) }, { children: _jsx(SettingsIcon, {}) })) }))] }) }), _jsx(Route, { path: "*", element: element || _jsx(Box, { width: 28, height: 40 }) })] })] })));
 };

package/components/ProgressToNextUpdate/ProgressToNextUpdate.js

@@ -39,7 +39,7 @@ export const ProgressToNextUpdate = (_a) => {
     }, [isLoading]);
     return (_jsx(IconButton, Object.assign({ onClick: onClick, disabled: isLoading }, other, { children: _jsx(Tooltip, Object.assign({ title: t('tooltip.progressToNextUpdate', {
                 value: getSecondsToUpdate(updatedAt, timeToUpdate),
-            }), placement: "top", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ sx: {
+            }), placement: "top", enterDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ sx: {
                     display: 'grid',
                     position: 'relative',
                     placeItems: 'center',

package/components/SendToWallet/SendToWalletButton.js

@@ -21,7 +21,7 @@ export const SendToWalletButton = () => {
         }
         toggleSendToWallet();
     };
-    return (_jsx(Tooltip, Object.assign({ title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: _jsx(Button, Object.assign({ variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
+    return (_jsx(Tooltip, Object.assign({ title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 400, arrow: true }, { children: _jsx(Button, Object.assign({ variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
                 minWidth: 48,
                 marginLeft: 1,
             } }, { children: _jsx(WalletOutlinedIcon, {}) })) })));

package/components/SwapInput/SwapInputAdornment.js

@@ -21,5 +21,5 @@ export const SwapInputAdornment = ({ formType }) => {
             shouldTouch: true,
         });
     };
-    return (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: isLoading && tokenAddress ? (_jsx(Skeleton, { variant: "rectangular", width: 46, height: 20, sx: { borderRadius: 0.5 } })) : formType === 'from' && (token === null || token === void 0 ? void 0 : token.amount) ? (_jsx(Button, Object.assign({ onClick: handleMax }, { children: t('button.max') }))) : null })));
+    return (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: isLoading && tokenAddress ? (_jsx(Skeleton, { variant: "rectangular", width: 46, height: 24, sx: { borderRadius: 0.5 } })) : formType === 'from' && (token === null || token === void 0 ? void 0 : token.amount) ? (_jsx(Button, Object.assign({ onClick: handleMax }, { children: t('button.max') }))) : null })));
 };

package/components/SwapInput/SwapInputAdornment.style.js

@@ -2,7 +2,7 @@ import { Button as MuiButton } from '@mui/material';
 import { styled } from '@mui/material/styles';
 export const Button = styled(MuiButton)(({ theme }) => ({
     padding: theme.spacing(0.5, 1, 0.625, 1),
-    lineHeight: 1,
+    lineHeight: 1.0715,
     fontSize: '0.875rem',
     minWidth: 'unset',
 }));