@lifi/widget 1.19.0 → 1.20.0

package/components/SwapRouteCard/SwapRouteCard.js

@@ -40,7 +40,7 @@ export 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 (_jsxs(Box, Object.assign({ display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0 }, { children: [_jsx(Tooltip, Object.assign({ title: t(`tooltip.estimatedNetworkFee`), placement: "top", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(EvStationIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t(`swap.currency`, { value: gasCostUSD }) }))] })) })), _jsx(Tooltip, Object.assign({ title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(AccessTimeIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t('swap.estimatedTime', {
+    return (_jsxs(Box, Object.assign({ display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0 }, { children: [_jsx(Tooltip, Object.assign({ title: t(`tooltip.estimatedNetworkFee`), placement: "top", enterDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(EvStationIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t(`swap.currency`, { value: gasCostUSD }) }))] })) })), _jsx(Tooltip, Object.assign({ title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(AccessTimeIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t('swap.estimatedTime', {
                                 value: executionTimeMinutes,
-                            }) }))] })) })), !dense ? (_jsx(Tooltip, Object.assign({ title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(LayersIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: route.steps.length }))] })) }))) : null] })));
+                            }) }))] })) })), !dense ? (_jsx(Tooltip, Object.assign({ title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(LayersIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: route.steps.length }))] })) }))) : null] })));
 };

package/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/config/version.js

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

package/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/hooks/useContentHeight.js

@@ -1,5 +1,6 @@
 import { useLayoutEffect, useState } from 'react';
 import { ElementId } from '../utils';
+import { getScrollableContainer } from './useScrollableContainer';
 const getContentHeight = () => {
     const headerElement = document.getElementById(ElementId.Header);
     const containerElement = document.getElementById(ElementId.ScrollableContainer);
@@ -21,3 +22,18 @@ export const useContentHeight = () => {
     }, []);
     return contentHeight;
 };
+export const useSetContentHeight = (ref) => {
+    useLayoutEffect(() => {
+        var _a;
+        const scrollableContainer = 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]);
+};

package/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.19.0",
+  "version": "1.20.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",

package/pages/SwapPage/StatusBottomSheet.js

@@ -10,7 +10,7 @@ import { Token } from '../../components/Token';
 import { getProcessMessage, useChains, useNavigateBack, useTokenBalance, } from '../../hooks';
 import { SwapFormKey } from '../../providers';
 import { navigationRoutes, shortenWalletAddress } from '../../utils';
-import { IconCircle, IconContainer, iconStyles, } from './StatusBottomSheet.style';
+import { IconCircle, IconContainer } from './StatusBottomSheet.style';
 export const StatusBottomSheet = ({ status, route, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const { t } = useTranslation();
@@ -76,5 +76,5 @@ export const StatusBottomSheet = ({ status, route, }) => {
             (_b = ref.current) === null || _b === void 0 ? void 0 : _b.open();
         }
     }, [refetch, refetchNewBalance, status]);
-    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (_jsx(InfoIcon, { color: "primary", sx: iconStyles })) : null, status === 'success' ? (_jsx(DoneIcon, { color: "success", sx: iconStyles })) : null, status === 'error' ? (_jsx(WarningIcon, { color: "error", sx: iconStyles })) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(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] }), _jsx(Typography, Object.assign({ pt: 2, pb: 1 }, { children: message })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsxs(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' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "text", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
+    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? _jsx(InfoIcon, { color: "primary" }) : null, status === 'success' ? _jsx(DoneIcon, { color: "success" }) : null, status === 'error' ? _jsx(WarningIcon, { color: "error" }) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(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] }), _jsx(Typography, Object.assign({ py: 1 }, { children: message })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsxs(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' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "text", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
 };

package/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/pages/SwapPage/StatusBottomSheet.style.js

@@ -1,13 +1,15 @@
 import { Box } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { alpha, darken, styled } from '@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 };
     }
 };
 export const IconContainer = styled(Box)(({ theme }) => ({
@@ -17,16 +19,20 @@ export const IconContainer = styled(Box)(({ theme }) => ({
 }));
 export const IconCircle = styled(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',
-}));
-export const iconStyles = {
-    position: 'absolute',
-    fontSize: '2.5rem',
-};
+})(({ theme, status }) => {
+    const { color, alpha: alphaValue, darken: darkenValue, } = getStatusColor(status, theme);
+    return {
+        backgroundColor: alpha(color, alphaValue),
+        borderRadius: '50%',
+        width: 64,
+        height: 64,
+        display: 'grid',
+        position: 'relative',
+        placeItems: 'center',
+        '& > svg': {
+            color: darken(color, darkenValue),
+            width: 32,
+            height: 32,
+        },
+    };
+});

package/pages/SwapPage/SwapPage.js

@@ -9,8 +9,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Delete as DeleteIcon } from '@mui/icons-material';
-import { Box, Button } from '@mui/material';
-import { Fragment } from 'react';
+import { Box, Button, Tooltip } from '@mui/material';
+import { Fragment, useCallback, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
@@ -22,32 +22,51 @@ import { useNavigateBack, useRouteExecution } from '../../hooks';
 import { SwapFormKey } from '../../providers';
 import { StatusBottomSheet } from './StatusBottomSheet';
 import { Container } from './SwapPage.style';
+import { getTokenValueLossThreshold, TokenValueBottomSheet, } from './TokenValueBottomSheet';
 export const SwapPage = () => {
     const { t } = useTranslation();
     const { state } = useLocation();
     const { navigateBack } = useNavigateBack();
-    const { setValue, formState: { isValid, isValidating }, } = useFormContext();
+    const tokenValueBottomSheetRef = useRef(null);
+    const { setValue,
+    // formState: { isValid, isValidating },
+     } = useFormContext();
     const { route, status, executeRoute, restartRoute, deleteRoute } = useRouteExecution(state === null || state === void 0 ? void 0 : state.routeId);
-    const handleRemoveRoute = () => {
-        navigateBack();
-        deleteRoute();
-    };
+    const handleExecuteRoute = 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(SwapFormKey.FromAmount, '');
+    }, [executeRoute, setValue]);
     const handleSwapClick = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
         if (status === 'idle') {
-            executeRoute();
-            setValue(SwapFormKey.FromAmount, '');
+            const thresholdExceeded = 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 (_jsxs(Container, { children: [route === null || route === void 0 ? void 0 : route.steps.map((step, index, steps) => {
@@ -55,8 +74,10 @@ export const SwapPage = () => {
                 return (_jsxs(Fragment, { children: [_jsx(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 ? (_jsx(StepDivider, {})) : null] }, step.id));
-            }), status === 'idle' || status === 'error' ? (_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 === 'error' ? (_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] }));
+            }), status === 'idle' || status === 'error' ? (_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 === 'error' ? (_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] }));
 };

package/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/pages/SwapPage/TokenValueBottomSheet.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Warning as WarningIcon } from '@mui/icons-material';
+import { Box, Button, Typography } from '@mui/material';
+import Big from 'big.js';
+import { forwardRef, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BottomSheet } from '../../components/BottomSheet';
+import { useSetContentHeight } from '../../hooks';
+import { IconCircle, IconContainer } from './StatusBottomSheet.style';
+export const TokenValueBottomSheet = 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 (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsx(TokenValueBottomSheetContent, { route: route, onContinue: onContinue, onCancel: handleCancel }) })));
+});
+const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
+    const { t } = useTranslation();
+    const ref = useRef();
+    useSetContentHeight(ref);
+    return (_jsxs(Box, Object.assign({ p: 3, ref: ref }, { children: [_jsxs(IconContainer, { children: [_jsx(IconCircle, Object.assign({ status: "warning", mb: 1 }, { children: _jsx(WarningIcon, { color: "warning" }) })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: t('swap.warning.title.highValueLoss') }))] }), _jsx(Typography, Object.assign({ py: 1 }, { children: t('swap.warning.message.highValueLoss') })), _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 1 }, { children: [_jsx(Typography, { children: t('swap.swapping') }), _jsx(Typography, Object.assign({ fontWeight: 600 }, { children: t('swap.currency', { value: route.fromAmountUSD }) }))] })), _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [_jsx(Typography, { children: t('swap.gasCost') }), _jsx(Typography, Object.assign({ fontWeight: 600 }, { children: t('swap.currency', { value: route.gasCostUSD }) }))] })), _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [_jsx(Typography, { children: t('swap.receiving') }), _jsx(Typography, Object.assign({ fontWeight: 600 }, { children: t('swap.currency', { value: route.toAmountUSD }) }))] })), _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [_jsx(Typography, { children: t('swap.valueLoss') }), _jsxs(Typography, Object.assign({ fontWeight: 600 }, { children: [Big(route.toAmountUSD || 0)
+                                .div(Big(route.fromAmountUSD || 0).plus(Big(route.gasCostUSD || 0)))
+                                .mul(-100)
+                                .toFixed(1), "%"] }))] })), _jsxs(Box, Object.assign({ display: "flex", mt: 3 }, { children: [_jsx(Button, Object.assign({ variant: "text", onClick: onCancel, fullWidth: true }, { children: t('button.cancel') })), _jsx(Box, { display: "flex", p: 1 }), _jsx(Button, Object.assign({ variant: "contained", onClick: onContinue, fullWidth: true }, { children: t('button.continue') }))] }))] })));
+};
+export const getTokenValueLossThreshold = (route) => {
+    if (!route) {
+        return false;
+    }
+    const fromAmountUSD = Big((route === null || route === void 0 ? void 0 : route.fromAmountUSD) || 0);
+    const toAmountUSD = Big((route === null || route === void 0 ? void 0 : route.toAmountUSD) || 0);
+    const gasCostUSD = Big((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);
+};

package/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;