@lifi/widget 1.20.0 → 1.20.2

package/cjs/components/ActiveSwaps/ActiveSwaps.js

@@ -23,8 +23,6 @@ const ActiveSwaps = (props) => {
         navigate(utils_1.navigationRoutes.activeSwaps);
     };
     const hasShowAll = (executingRoutes === null || executingRoutes === void 0 ? void 0 : executingRoutes.length) > 2;
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ variant: "selected", selectionColor: "secondary" }, props, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('header.activeSwaps') }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2 }, { children: executingRoutes.slice(0, 2).map((routeId) => ((0, jsx_runtime_1.jsx)(ActiveSwapItem_1.ActiveSwapItem, { routeId: routeId, dense: true }, routeId))) })), hasShowAll ? ((0, jsx_runtime_1.jsx)(ActiveSwaps_style_1.ShowAllButton, Object.assign({ disableRipple: true, fullWidth: true, onClick: handleShowAll, sx: (theme) => ({
-                    padding: theme.spacing(0.75, 2),
-                }) }, { children: t('button.showAll') }))) : null] })));
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ variant: "selected", selectionColor: "secondary" }, props, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('header.activeSwaps') }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2 }, { children: executingRoutes.slice(0, 2).map((routeId) => ((0, jsx_runtime_1.jsx)(ActiveSwapItem_1.ActiveSwapItem, { routeId: routeId, dense: true }, routeId))) })), hasShowAll ? ((0, jsx_runtime_1.jsx)(ActiveSwaps_style_1.ShowAllButton, Object.assign({ disableRipple: true, fullWidth: true, onClick: handleShowAll }, { children: t('button.showAll') }))) : null] })));
 };
 exports.ActiveSwaps = ActiveSwaps;

package/cjs/components/ActiveSwaps/ActiveSwaps.style.js

@@ -30,4 +30,6 @@ exports.ShowAllButton = (0, styles_1.styled)(material_1.Button)(({ theme }) => (
     '&:hover': {
         background: 'none',
     },
+    padding: theme.spacing(0.75, 2),
+    fontSize: '0.875rem',
 }));

package/cjs/components/Card/Card.d.ts

@@ -1,6 +1,14 @@
-import type { Theme } from '@mui/material';
+import type { BoxProps, Theme } from '@mui/material';
 import type { MouseEventHandler } from 'react';
 declare type CardVariant = 'default' | 'selected' | 'error';
+export declare type CardProps = {
+    variant?: CardVariant;
+    selectionColor?: 'primary' | 'secondary';
+    dense?: boolean;
+    indented?: boolean;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    pointerEvents?: 'auto' | 'none';
+} & BoxProps;
 export declare const Card: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
     children?: import("react").ReactNode;
     component?: import("react").ElementType<any> | undefined;
@@ -14,5 +22,6 @@ export declare const Card: import("@emotion/styled").StyledComponent<import("@mu
     dense?: boolean | undefined;
     indented?: boolean | undefined;
     onClick?: MouseEventHandler<HTMLDivElement> | undefined;
+    pointerEvents?: "none" | "auto" | undefined;
 }, {}, {}>;
 export {};

package/cjs/components/Card/Card.js

@@ -11,8 +11,14 @@ const getBackgroundColor = (theme, variant, selectionColor) => variant === 'sele
         : (0, styles_1.alpha)(theme.palette.secondary.main, theme.palette.mode === 'light' ? 0.08 : 0.12)
     : theme.palette.background.paper;
 exports.Card = (0, styles_1.styled)(material_1.Box, {
-    shouldForwardProp: (prop) => !['dense', 'variant', 'indented', 'selectionColor'].includes(prop),
-})(({ theme, variant, selectionColor = 'primary', dense, indented, onClick, }) => {
+    shouldForwardProp: (prop) => ![
+        'dense',
+        'variant',
+        'indented',
+        'selectionColor',
+        'pointerEvents',
+    ].includes(prop),
+})(({ theme, variant, selectionColor = 'primary', dense, indented, pointerEvents, onClick, }) => {
     const backgroundColor = getBackgroundColor(theme, variant, selectionColor);
     return {
         backgroundColor,
@@ -45,5 +51,6 @@ exports.Card = (0, styles_1.styled)(material_1.Box, {
             duration: theme.transitions.duration.enteringScreen,
             easing: theme.transitions.easing.easeOut,
         }),
+        pointerEvents,
     };
 });

package/cjs/components/ChainSelect/ChainSelect.style.d.ts

@@ -12,6 +12,7 @@ export declare const ChainCard: import("@emotion/styled").StyledComponent<import
     dense?: boolean | undefined;
     indented?: boolean | undefined;
     onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    pointerEvents?: "none" | "auto" | undefined;
 }, {}, {}>;
 export declare const ChainContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     children?: import("react").ReactNode;

package/cjs/components/SwapRouteCard/SwapRouteCard.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { BoxProps } from '@mui/material';
+import type { CardProps } from '../Card';
 import type { SwapRouteCardEssentialsProps, SwapRouteCardProps } from './types';
-export declare const SwapRouteCard: React.FC<SwapRouteCardProps & BoxProps>;
+export declare const SwapRouteCard: React.FC<SwapRouteCardProps & Omit<CardProps, 'variant'>>;
 export declare const SwapRouteCardEssentials: React.FC<SwapRouteCardEssentialsProps>;

package/cjs/components/SwapRouteCard/SwapRouteCard.js

@@ -21,6 +21,7 @@ const Card_1 = require("../Card");
 const StepActions_1 = require("../StepActions");
 const Token_1 = require("../Token");
 const SwapRouteCard_style_1 = require("./SwapRouteCard.style");
+const utils_1 = require("./utils");
 const SwapRouteCard = (_a) => {
     var _b;
     var { route, active, variant = 'default', expanded } = _a, other = __rest(_a, ["route", "active", "variant", "expanded"]);
@@ -44,7 +45,11 @@ 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, 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', {
+    const gasCosts = (0, utils_1.getGasCostsBreakdown)(route);
+    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: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "span" }, { children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas) => {
+                            var _a;
+                            return ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontSize: 11 }, { children: [(_a = gas.amount) === null || _a === void 0 ? void 0 : _a.toFixed(6), " ", gas.token.symbol, " (", t(`swap.currency`, { value: gas.amountUSD }), ")"] }), `${gas.token.address}${gas.token.symbol}`));
+                        })] })), 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, 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] })));
 };

package/cjs/components/SwapRouteCard/utils.d.ts

@@ -0,0 +1,7 @@
+import type { Route, Token } from '@lifi/sdk';
+import Big from 'big.js';
+export declare const getGasCostsBreakdown: (route: Route) => {
+    amount: Big;
+    amountUSD: number;
+    token: Token;
+}[];

package/cjs/components/SwapRouteCard/utils.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGasCostsBreakdown = void 0;
+const big_js_1 = require("big.js");
+const getGasCostsBreakdown = (route) => {
+    return Object.values(route.steps.reduce((groupedGasCosts, step) => {
+        if (step.estimate.gasCosts) {
+            const { token } = step.estimate.gasCosts[0];
+            const gasCostAmount = step.estimate.gasCosts
+                .reduce((amount, gasCost) => amount.plus((0, big_js_1.default)(gasCost.amount || 0)), (0, big_js_1.default)(0))
+                .div(Math.pow(10, token.decimals));
+            const gasCostAmountUSD = step.estimate.gasCosts.reduce((amount, gasCost) => amount + parseFloat(gasCost.amountUSD || '0'), 0);
+            const groupedGasCost = groupedGasCosts[token.chainId];
+            const amount = groupedGasCost
+                ? groupedGasCost.amount.plus(gasCostAmount)
+                : gasCostAmount;
+            const amountUSD = groupedGasCost
+                ? groupedGasCost.amountUSD + gasCostAmountUSD
+                : gasCostAmountUSD;
+            groupedGasCosts[token.chainId] = {
+                amount,
+                amountUSD,
+                token,
+            };
+            return groupedGasCosts;
+        }
+        return groupedGasCosts;
+    }, {}));
+};
+exports.getGasCostsBreakdown = getGasCostsBreakdown;

package/cjs/components/SwapRoutes/SwapRoutes.js

@@ -36,6 +36,6 @@ const SwapRoutes = (props) => {
                             borderRightWidth: !routeNotFound && (isFetching || (routes && routes.length > 1))
                                 ? 1
                                 : 0,
-                        } }, { children: isLoading || isFetching ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" }), (0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })] })) : !currentRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), routes.length > 1 ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense" })) : null] })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ py: 1, pr: 1 }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleCardClick, size: "medium", disabled: isValidating || !isValid }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) })) }))) : null }))] }))] })));
+                        } }, { children: isLoading || isFetching ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" }), (0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })] })) : !currentRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), routes.length > 1 ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense", pointerEvents: "none" })) : null] })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ py: 1, pr: 1 }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleCardClick, size: "medium", disabled: isValidating || !isValid }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) })) }))) : null }))] }))] })));
 };
 exports.SwapRoutes = SwapRoutes;

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.20.0";
+export declare const version = "1.20.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.20.0';
+exports.version = '1.20.2';

package/cjs/hooks/useGasSufficiency.d.ts

@@ -1,6 +1,6 @@
 import type { EVMChain, Route, Token } from '@lifi/sdk';
 import Big from 'big.js';
-interface GasSufficiency {
+export interface GasSufficiency {
     gasAmount: Big;
     tokenAmount?: Big;
     insufficientAmount?: Big;
@@ -13,4 +13,3 @@ export declare const useGasSufficiency: (route?: Route) => {
     insufficientFunds: boolean | null | undefined;
     isLoading: boolean;
 };
-export {};

package/cjs/hooks/useTokens.js

@@ -12,10 +12,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTokens = void 0;
 const react_query_1 = require("@tanstack/react-query");
 const providers_1 = require("../providers");
+const useChains_1 = require("./useChains");
 const useFeaturedTokens_1 = require("./useFeaturedTokens");
 const useTokens = (selectedChainId) => {
     var _a, _b, _c, _d;
     const lifi = (0, providers_1.useLiFi)();
+    const { getChainById, isLoading: isSupportedChainsLoading } = (0, useChains_1.useChains)();
     const featuredTokens = (0, useFeaturedTokens_1.useFeaturedTokens)(selectedChainId);
     const { tokens, chains, disabledChains } = (0, providers_1.useWidgetConfig)();
     const { data, isLoading } = (0, react_query_1.useQuery)([
@@ -29,6 +31,7 @@ const useTokens = (selectedChainId) => {
     ], () => __awaiter(void 0, void 0, void 0, function* () {
         var _e, _f, _g, _h, _j;
         const chainAllowed = selectedChainId &&
+            getChainById(selectedChainId) &&
             (0, providers_1.isItemAllowed)(selectedChainId, chains, disabledChains);
         if (!chainAllowed) {
             return [];
@@ -50,7 +53,9 @@ const useTokens = (selectedChainId) => {
             })) !== null && _h !== void 0 ? _h : []),
             ...((_j = filteredTokens === null || filteredTokens === void 0 ? void 0 : filteredTokens.filter((token) => !featuredTokenAddresses.has(token.address))) !== null && _j !== void 0 ? _j : []),
         ];
-    }));
+    }), {
+        enabled: !isSupportedChainsLoading,
+    });
     return {
         tokens: data,
         isLoading,

package/cjs/i18n/en/translation.json

@@ -186,7 +186,8 @@
     },
     "progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click here to update manually.",
     "numberOfSteps": "A number of swap steps. Each step can contain 1-3 transactions that require a signature.",
-    "estimatedTime": "Estimated time in minutes.",
-    "estimatedNetworkFee": "Estimated network fee."
+    "estimatedTime": "Estimated swap execution time in minutes.",
+    "estimatedNetworkFee": "Estimated network fee.",
+    "settingsModified": "Settings (modified)"
   }
 }

package/cjs/i18n/index.d.ts

@@ -191,6 +191,7 @@ export declare const resources: {
                 numberOfSteps: string;
                 estimatedTime: string;
                 estimatedNetworkFee: string;
+                settingsModified: string;
             };
         };
     };

package/cjs/pages/SwapPage/TokenValueBottomSheet.js

@@ -24,7 +24,8 @@ const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
     (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)
+                                .minus(1)
+                                .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) => {

package/cjs/stores/settings/useSettingsStore.d.ts

@@ -1,4 +1,5 @@
 import type { SettingsState, SettingsStore } from './types';
+export declare const defaultSettings: Omit<SettingsState, 'enabledBridges' | 'enabledExchanges' | '_enabledBridges' | '_enabledExchanges'>;
 export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<SettingsStore>, "persist"> & {
     persist: {
         setOptions: (options: Partial<import("zustand/middleware").PersistOptions<SettingsStore, {

package/cjs/stores/settings/useSettingsStore.js

@@ -11,30 +11,29 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSettingsStore = void 0;
+exports.useSettingsStore = exports.defaultSettings = void 0;
 /* eslint-disable no-underscore-dangle */
 const zustand_1 = require("zustand");
 const middleware_1 = require("zustand/middleware");
 const immer_1 = require("zustand/middleware/immer");
 const types_1 = require("./types");
-exports.useSettingsStore = (0, zustand_1.default)()((0, middleware_1.persist)((0, immer_1.immer)((set) => ({
-    advancedPreferences: false,
-    showDestinationWallet: true,
+exports.defaultSettings = {
     appearance: 'auto',
     gasPrice: 'normal',
     routePriority: 'RECOMMENDED',
     slippage: '0.5',
-    setValue: (key, value) => set((state) => {
+    advancedPreferences: false,
+    showDestinationWallet: true,
+};
+exports.useSettingsStore = (0, zustand_1.default)()((0, middleware_1.persist)((0, immer_1.immer)((set) => (Object.assign(Object.assign({}, exports.defaultSettings), { setValue: (key, value) => set((state) => {
         state[key] = value;
-    }),
-    setValues: (values) => set((state) => {
+    }), setValues: (values) => set((state) => {
         for (const key in values) {
             if (Object.prototype.hasOwnProperty.call(state, key)) {
                 state[key] = values[key];
             }
         }
-    }),
-    initializeTools: (toolType, tools) => set((state) => {
+    }), initializeTools: (toolType, tools) => set((state) => {
         if (!tools.length) {
             return;
         }
@@ -58,15 +57,13 @@ exports.useSettingsStore = (0, zustand_1.default)()((0, middleware_1.persist)((0
         state[`enabled${toolType}`] = Object.entries(state[`_enabled${toolType}`])
             .filter(([_, value]) => value)
             .map(([key]) => key);
-    }),
-    setTools: (toolType, tools, availableTools) => set((state) => {
+    }), setTools: (toolType, tools, availableTools) => set((state) => {
         state[`enabled${toolType}`] = tools;
         state[`_enabled${toolType}`] = availableTools.reduce((values, tool) => {
             values[tool.key] = tools.includes(tool.key);
             return values;
         }, {});
-    }),
-})), {
+    }) }))), {
     name: 'li.fi-widget-settings',
     version: 2,
     partialize: (state) => {

package/components/ActiveSwaps/ActiveSwaps.js

@@ -20,7 +20,5 @@ export const ActiveSwaps = (props) => {
         navigate(navigationRoutes.activeSwaps);
     };
     const hasShowAll = (executingRoutes === null || executingRoutes === void 0 ? void 0 : executingRoutes.length) > 2;
-    return (_jsxs(Card, Object.assign({ variant: "selected", selectionColor: "secondary" }, props, { children: [_jsx(CardTitle, { children: t('header.activeSwaps') }), _jsx(Stack, Object.assign({ spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2 }, { children: executingRoutes.slice(0, 2).map((routeId) => (_jsx(ActiveSwapItem, { routeId: routeId, dense: true }, routeId))) })), hasShowAll ? (_jsx(ShowAllButton, Object.assign({ disableRipple: true, fullWidth: true, onClick: handleShowAll, sx: (theme) => ({
-                    padding: theme.spacing(0.75, 2),
-                }) }, { children: t('button.showAll') }))) : null] })));
+    return (_jsxs(Card, Object.assign({ variant: "selected", selectionColor: "secondary" }, props, { children: [_jsx(CardTitle, { children: t('header.activeSwaps') }), _jsx(Stack, Object.assign({ spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2 }, { children: executingRoutes.slice(0, 2).map((routeId) => (_jsx(ActiveSwapItem, { routeId: routeId, dense: true }, routeId))) })), hasShowAll ? (_jsx(ShowAllButton, Object.assign({ disableRipple: true, fullWidth: true, onClick: handleShowAll }, { children: t('button.showAll') }))) : null] })));
 };

package/components/ActiveSwaps/ActiveSwaps.style.js

@@ -27,4 +27,6 @@ export const ShowAllButton = styled(Button)(({ theme }) => ({
     '&:hover': {
         background: 'none',
     },
+    padding: theme.spacing(0.75, 2),
+    fontSize: '0.875rem',
 }));

package/components/Card/Card.d.ts

@@ -1,6 +1,14 @@
-import type { Theme } from '@mui/material';
+import type { BoxProps, Theme } from '@mui/material';
 import type { MouseEventHandler } from 'react';
 declare type CardVariant = 'default' | 'selected' | 'error';
+export declare type CardProps = {
+    variant?: CardVariant;
+    selectionColor?: 'primary' | 'secondary';
+    dense?: boolean;
+    indented?: boolean;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    pointerEvents?: 'auto' | 'none';
+} & BoxProps;
 export declare const Card: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
     children?: import("react").ReactNode;
     component?: import("react").ElementType<any> | undefined;
@@ -14,5 +22,6 @@ export declare const Card: import("@emotion/styled").StyledComponent<import("@mu
     dense?: boolean | undefined;
     indented?: boolean | undefined;
     onClick?: MouseEventHandler<HTMLDivElement> | undefined;
+    pointerEvents?: "none" | "auto" | undefined;
 }, {}, {}>;
 export {};

package/components/Card/Card.js

@@ -8,8 +8,14 @@ const getBackgroundColor = (theme, variant, selectionColor) => variant === 'sele
         : alpha(theme.palette.secondary.main, theme.palette.mode === 'light' ? 0.08 : 0.12)
     : theme.palette.background.paper;
 export const Card = styled(Box, {
-    shouldForwardProp: (prop) => !['dense', 'variant', 'indented', 'selectionColor'].includes(prop),
-})(({ theme, variant, selectionColor = 'primary', dense, indented, onClick, }) => {
+    shouldForwardProp: (prop) => ![
+        'dense',
+        'variant',
+        'indented',
+        'selectionColor',
+        'pointerEvents',
+    ].includes(prop),
+})(({ theme, variant, selectionColor = 'primary', dense, indented, pointerEvents, onClick, }) => {
     const backgroundColor = getBackgroundColor(theme, variant, selectionColor);
     return {
         backgroundColor,
@@ -42,5 +48,6 @@ export const Card = styled(Box, {
             duration: theme.transitions.duration.enteringScreen,
             easing: theme.transitions.easing.easeOut,
         }),
+        pointerEvents,
     };
 });

package/components/ChainSelect/ChainSelect.style.d.ts

@@ -12,6 +12,7 @@ export declare const ChainCard: import("@emotion/styled").StyledComponent<import
     dense?: boolean | undefined;
     indented?: boolean | undefined;
     onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    pointerEvents?: "none" | "auto" | undefined;
 }, {}, {}>;
 export declare const ChainContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     children?: import("react").ReactNode;

package/components/SwapRouteCard/SwapRouteCard.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { BoxProps } from '@mui/material';
+import type { CardProps } from '../Card';
 import type { SwapRouteCardEssentialsProps, SwapRouteCardProps } from './types';
-export declare const SwapRouteCard: React.FC<SwapRouteCardProps & BoxProps>;
+export declare const SwapRouteCard: React.FC<SwapRouteCardProps & Omit<CardProps, 'variant'>>;
 export declare const SwapRouteCardEssentials: React.FC<SwapRouteCardEssentialsProps>;

package/components/SwapRouteCard/SwapRouteCard.js

@@ -18,6 +18,7 @@ import { Card } from '../Card';
 import { StepActions } from '../StepActions';
 import { Token } from '../Token';
 import { IconButton, Label } from './SwapRouteCard.style';
+import { getGasCostsBreakdown } from './utils';
 export const SwapRouteCard = (_a) => {
     var _b;
     var { route, active, variant = 'default', expanded } = _a, other = __rest(_a, ["route", "active", "variant", "expanded"]);
@@ -40,7 +41,11 @@ 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, 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', {
+    const gasCosts = getGasCostsBreakdown(route);
+    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: _jsxs(Box, Object.assign({ component: "span" }, { children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas) => {
+                            var _a;
+                            return (_jsxs(Typography, Object.assign({ fontSize: 11 }, { children: [(_a = gas.amount) === null || _a === void 0 ? void 0 : _a.toFixed(6), " ", gas.token.symbol, " (", t(`swap.currency`, { value: gas.amountUSD }), ")"] }), `${gas.token.address}${gas.token.symbol}`));
+                        })] })), 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, 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/components/SwapRouteCard/utils.d.ts

@@ -0,0 +1,7 @@
+import type { Route, Token } from '@lifi/sdk';
+import Big from 'big.js';
+export declare const getGasCostsBreakdown: (route: Route) => {
+    amount: Big;
+    amountUSD: number;
+    token: Token;
+}[];

package/components/SwapRouteCard/utils.js

@@ -0,0 +1,26 @@
+import Big from 'big.js';
+export const getGasCostsBreakdown = (route) => {
+    return Object.values(route.steps.reduce((groupedGasCosts, step) => {
+        if (step.estimate.gasCosts) {
+            const { token } = step.estimate.gasCosts[0];
+            const gasCostAmount = step.estimate.gasCosts
+                .reduce((amount, gasCost) => amount.plus(Big(gasCost.amount || 0)), Big(0))
+                .div(Math.pow(10, token.decimals));
+            const gasCostAmountUSD = step.estimate.gasCosts.reduce((amount, gasCost) => amount + parseFloat(gasCost.amountUSD || '0'), 0);
+            const groupedGasCost = groupedGasCosts[token.chainId];
+            const amount = groupedGasCost
+                ? groupedGasCost.amount.plus(gasCostAmount)
+                : gasCostAmount;
+            const amountUSD = groupedGasCost
+                ? groupedGasCost.amountUSD + gasCostAmountUSD
+                : gasCostAmountUSD;
+            groupedGasCosts[token.chainId] = {
+                amount,
+                amountUSD,
+                token,
+            };
+            return groupedGasCosts;
+        }
+        return groupedGasCosts;
+    }, {}));
+};

package/components/SwapRoutes/SwapRoutes.js

@@ -33,5 +33,5 @@ export const SwapRoutes = (props) => {
                             borderRightWidth: !routeNotFound && (isFetching || (routes && routes.length > 1))
                                 ? 1
                                 : 0,
-                        } }, { children: isLoading || isFetching ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" }), _jsx(SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })] })) : !currentRoute ? (_jsx(SwapRouteNotFoundCard, {})) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense" })) : null] })) })), _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? (_jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", disabled: isValidating || !isValid }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })));
+                        } }, { children: isLoading || isFetching ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" }), _jsx(SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })] })) : !currentRoute ? (_jsx(SwapRouteNotFoundCard, {})) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense", pointerEvents: "none" })) : null] })) })), _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? (_jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", disabled: isValidating || !isValid }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })));
 };

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/useGasSufficiency.d.ts

@@ -1,6 +1,6 @@
 import type { EVMChain, Route, Token } from '@lifi/sdk';
 import Big from 'big.js';
-interface GasSufficiency {
+export interface GasSufficiency {
     gasAmount: Big;
     tokenAmount?: Big;
     insufficientAmount?: Big;
@@ -13,4 +13,3 @@ export declare const useGasSufficiency: (route?: Route) => {
     insufficientFunds: boolean | null | undefined;
     isLoading: boolean;
 };
-export {};

package/hooks/useTokens.js

@@ -9,10 +9,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { useQuery } from '@tanstack/react-query';
 import { isItemAllowed, useLiFi, useWidgetConfig } from '../providers';
+import { useChains } from './useChains';
 import { useFeaturedTokens } from './useFeaturedTokens';
 export const useTokens = (selectedChainId) => {
     var _a, _b, _c, _d;
     const lifi = useLiFi();
+    const { getChainById, isLoading: isSupportedChainsLoading } = useChains();
     const featuredTokens = useFeaturedTokens(selectedChainId);
     const { tokens, chains, disabledChains } = useWidgetConfig();
     const { data, isLoading } = useQuery([
@@ -26,6 +28,7 @@ export const useTokens = (selectedChainId) => {
     ], () => __awaiter(void 0, void 0, void 0, function* () {
         var _e, _f, _g, _h, _j;
         const chainAllowed = selectedChainId &&
+            getChainById(selectedChainId) &&
             isItemAllowed(selectedChainId, chains, disabledChains);
         if (!chainAllowed) {
             return [];
@@ -47,7 +50,9 @@ export const useTokens = (selectedChainId) => {
             })) !== null && _h !== void 0 ? _h : []),
             ...((_j = filteredTokens === null || filteredTokens === void 0 ? void 0 : filteredTokens.filter((token) => !featuredTokenAddresses.has(token.address))) !== null && _j !== void 0 ? _j : []),
         ];
-    }));
+    }), {
+        enabled: !isSupportedChainsLoading,
+    });
     return {
         tokens: data,
         isLoading,

package/i18n/en/translation.json

@@ -186,7 +186,8 @@
     },
     "progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click here to update manually.",
     "numberOfSteps": "A number of swap steps. Each step can contain 1-3 transactions that require a signature.",
-    "estimatedTime": "Estimated time in minutes.",
-    "estimatedNetworkFee": "Estimated network fee."
+    "estimatedTime": "Estimated swap execution time in minutes.",
+    "estimatedNetworkFee": "Estimated network fee.",
+    "settingsModified": "Settings (modified)"
   }
 }

package/i18n/index.d.ts

@@ -191,6 +191,7 @@ export declare const resources: {
                 numberOfSteps: string;
                 estimatedTime: string;
                 estimatedNetworkFee: string;
+                settingsModified: string;
             };
         };
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.20.0",
+  "version": "1.20.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",
@@ -44,12 +44,12 @@
     "@ethersproject/providers": "^5.7.1",
     "@lifi/sdk": "^1.6.0",
     "@lifi/wallet-management": "^1.1.10",
-    "@mui/icons-material": "^5.10.6",
-    "@mui/lab": "^5.0.0-alpha.102",
-    "@mui/material": "^5.10.8",
-    "@sentry/integrations": "^7.14.2",
-    "@sentry/react": "^7.14.2",
-    "@sentry/tracing": "^7.14.2",
+    "@mui/icons-material": "^5.10.9",
+    "@mui/lab": "^5.0.0-alpha.103",
+    "@mui/material": "^5.10.9",
+    "@sentry/integrations": "^7.15.0",
+    "@sentry/react": "^7.15.0",
+    "@sentry/tracing": "^7.15.0",
     "@tanstack/react-query": "^4.10.3",
     "@tanstack/react-virtual": "^3.0.0-beta.18",
     "big.js": "^6.2.1",

package/pages/SwapPage/TokenValueBottomSheet.js

@@ -21,7 +21,8 @@ const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
     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)
+                                .minus(1)
+                                .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) => {