@lifi/widget 1.25.1 → 1.26.0

package/cjs/hooks/useRouteExecution.js

@@ -18,7 +18,7 @@ const stores_1 = require("../stores");
 const events_1 = require("../types/events");
 const utils_1 = require("../utils");
 const useWidgetEvents_1 = require("./useWidgetEvents");
-const useRouteExecution = (routeId, executeInBackground) => {
+const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchangeRateUpdate, }) => {
     const lifi = (0, providers_1.useLiFi)();
     const { account, switchChain } = (0, providers_1.useWallet)();
     const resumedAfterMount = (0, react_1.useRef)(false);
@@ -63,6 +63,13 @@ const useRouteExecution = (routeId, executeInBackground) => {
         }
         return account.signer;
     });
+    const acceptExchangeRateUpdateHook = (params) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!onAcceptExchangeRateUpdate) {
+            return false;
+        }
+        const accepted = yield new Promise((resolve) => onAcceptExchangeRateUpdate(resolve, params));
+        return accepted;
+    });
     const executeRouteMutation = (0, react_query_1.useMutation)(() => {
         if (!account.signer) {
             throw Error('Account signer not found.');
@@ -73,6 +80,7 @@ const useRouteExecution = (routeId, executeInBackground) => {
         return lifi.executeRoute(account.signer, routeExecution.route, {
             updateCallback,
             switchChainHook,
+            acceptExchangeRateUpdateHook,
             infiniteApproval: false,
             executeInBackground,
         });
@@ -94,6 +102,7 @@ const useRouteExecution = (routeId, executeInBackground) => {
         return lifi.resumeRoute(account.signer, resumedRoute !== null && resumedRoute !== void 0 ? resumedRoute : routeExecution.route, {
             updateCallback,
             switchChainHook,
+            acceptExchangeRateUpdateHook,
             infiniteApproval: false,
             executeInBackground,
         });
@@ -104,8 +113,8 @@ const useRouteExecution = (routeId, executeInBackground) => {
     });
     const executeRoute = (0, react_1.useCallback)(() => {
         executeRouteMutation.mutateAsync(undefined, {
-            onError: () => {
-                console.warn('Execution failed!', routeId);
+            onError: (error) => {
+                console.warn('Execution failed!', routeId, error);
                 // Notification.showNotification(NotificationType.SwapExecution_ERROR);
             },
             onSuccess: (route) => {
@@ -116,8 +125,8 @@ const useRouteExecution = (routeId, executeInBackground) => {
     }, [executeRouteMutation, routeId]);
     const resumeRoute = (0, react_1.useCallback)((route) => {
         resumeRouteMutation.mutateAsync(route, {
-            onError: () => {
-                console.warn('Resumed execution failed.', routeId);
+            onError: (error) => {
+                console.warn('Resumed execution failed.', routeId, error);
             },
             onSuccess: (route) => {
                 console.log('Resumed execution successful.', route);

package/cjs/hooks/useSwapRoutes.d.ts

@@ -1,9 +1,9 @@
 export declare const useSwapRoutes: () => {
-    routes: import("@lifi/types").Route[] | undefined;
+    routes: import("@lifi/sdk").Route[] | undefined;
     isLoading: boolean;
     isFetching: boolean;
     isFetched: boolean;
     dataUpdatedAt: number;
     refetchTime: number;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/types").RoutesResponse, unknown>>;
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/sdk").RoutesResponse, any>>;
 };

package/cjs/hooks/useSwapRoutes.js

@@ -11,6 +11,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSwapRoutes = void 0;
 const address_1 = require("@ethersproject/address");
+const sdk_1 = require("@lifi/sdk");
 const react_query_1 = require("@tanstack/react-query");
 const big_js_1 = require("big.js");
 const react_hook_form_1 = require("react-hook-form");
@@ -110,6 +111,12 @@ const useSwapRoutes = () => {
         refetchInterval,
         staleTime: refetchTime,
         cacheTime: refetchTime,
+        retry(failureCount, error) {
+            if ((error === null || error === void 0 ? void 0 : error.code) === sdk_1.LifiErrorCode.NotFound) {
+                return false;
+            }
+            return true;
+        },
     });
     return {
         routes: data === null || data === void 0 ? void 0 : data.routes,

package/cjs/hooks/useTokenBalance.js

@@ -85,8 +85,8 @@ const useTokenBalance = (token, accountAddress) => {
     };
     const refetchNewBalance = (0, react_1.useCallback)(() => {
         queryClient.setQueryDefaults(tokenBalanceQueryKey, {
-            refetchInterval: 500,
-            staleTime: 500,
+            refetchInterval: 250,
+            staleTime: 250,
         });
     }, [queryClient, tokenBalanceQueryKey]);
     return {

package/cjs/hooks/useTools.js

@@ -18,6 +18,8 @@ const useTools = () => {
                 .filter((exchange) => (0, providers_1.isItemAllowed)(exchange.key, exchanges))
                 .map((exchange) => exchange.key));
         },
+        refetchInterval: 180000,
+        staleTime: 180000,
     });
     const formattedTools = (0, react_1.useMemo)(() => ({
         bridges: data === null || data === void 0 ? void 0 : data.bridges.reduce((bridges, bridge) => {

package/cjs/i18n/en.json

@@ -69,22 +69,27 @@
   },
   "swap": {
     "crossStepDetails": "Bridge from {{from}} to {{to}} via {{tool}}",
+    "currentAmount": "Current amount",
     "error": {
       "message": {
-        "slippageTooLarge": "The slippage is larger than the defined threshold. Please request a new route to get a fresh quote.",
+        "slippageThreshold": "The slippage is larger than the defined threshold. Please request a new route to get a fresh quote.",
         "transactionFailed": "Please check the block explorer for more information.",
-        "transactionNotSent": "Transaction was not sent, your funds are still in your wallet ({{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}} on {{chainName}}).",
-        "transactionRejected": "Your signature is required to complete the transaction. {{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}} on {{chainName}} remain in your wallet."
+        "transactionNotSent": "Transaction was not sent. {{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
+        "transactionRejected": "Your signature is required to complete the transaction. {{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
+        "unknown": "Please try again or contact support."
       },
       "title": {
-        "chainSwitch": "Chain switch required.",
-        "failed": "Swap failed.",
-        "slippageTooLarge": "Slippage too large.",
-        "transactionFailed": "Transaction has failed.",
-        "transactionRejected": "Signature required.",
-        "transactionUnderpriced": "Transaction is underpriced.",
-        "transactionUnprepared": "Unable to prepare transaction.",
-        "unknown": "Something went wrong.",
+        "balanceIsTooLow": "The balance is too low",
+        "chainSwitch": "Chain switch required",
+        "failed": "Swap failed",
+        "gasLimitIsTooLow": "The gas limit is too low",
+        "slippageNotMet": "Slippage conditions not met",
+        "transactionCanceled": "Transaction canceled",
+        "transactionFailed": "Transaction failed",
+        "transactionRejected": "Signature required",
+        "transactionUnderpriced": "Transaction is underpriced",
+        "transactionUnprepared": "Unable to prepare transaction",
+        "unknown": "Something went wrong",
         "walletAddressInvalid": "Wallet address is invalid.",
         "walletEnsAddressInvalid": "Wallet address is invalid or network doesn't support ENS."
       }
@@ -94,6 +99,8 @@
     "from": "From",
     "fromAmount": "You pay",
     "gasCost": "Gas cost",
+    "gasFeeEstimated": "estimated gas fee",
+    "gasFeePaid": "gas fee paid",
     "inProgress": "in progress",
     "info": {
       "message": {
@@ -112,37 +119,43 @@
     "otherTokens": "Other tokens",
     "process": {
       "crossChain": {
-        "actionRequired": "Please sign the transaction.",
-        "done": "Transaction approved.",
-        "pending": "Waiting for transaction.",
-        "started": "Preparing transaction."
+        "actionRequired": "Please sign the transaction",
+        "done": "Bridge transaction confirmed",
+        "pending": "Waiting for bridge transaction",
+        "started": "Preparing bridge transaction"
       },
       "receivingChain": {
-        "done": "Funds received.",
-        "pending": "Waiting for receiving chain."
+        "done": "Bridge completed",
+        "partial": "Bridge partially completed",
+        "pending": "Waiting for destination chain",
+        "refunded": "Bridge transaction refunded"
       },
       "swap": {
-        "actionRequired": "Please sign the transaction.",
-        "done": "Swap completed.",
-        "pending": "Swapping.",
-        "started": "Preparing swap."
+        "actionRequired": "Please sign the transaction",
+        "done": "Swap completed",
+        "pending": "Waiting for swap transaction",
+        "started": "Preparing swap transaction"
       },
       "switchChain": {
-        "actionRequired": "Chain switch required.",
-        "done": "Chain switched successfully."
+        "actionRequired": "Chain switch required",
+        "done": "Chain switched successfully"
       },
       "tokenAllowance": {
-        "done": "Token allowance approved.",
-        "pending": "Waiting for token allowance.",
-        "started": "Setting token allowance."
+        "done": "Token allowance approved",
+        "pending": "Waiting for token allowance",
+        "started": "Setting token allowance"
       }
     },
+    "quotedAmount": "Quoted amount",
+    "rateChange": "Rate change",
     "receiving": "Receiving",
     "routes": "You get",
     "selectChain": "Chain",
     "selectChainAndToken": "Select chain and token",
     "selectToken": "Token",
+    "sendToAddress": "Send to {{address}}",
     "sendToWallet": "Send to a different wallet",
+    "sentToAddress": "Sent to {{address}}",
     "stepBridge": "Bridge",
     "stepSwap": "Swap",
     "stepSwapAndBridge": "Swap and bridge",
@@ -153,6 +166,7 @@
       },
       "title": {
         "gasSwapSuccessful": "Gas swap successful",
+        "refundIssued": "Refund issued",
         "swapPartiallySuccessful": "Swap partially successful",
         "swapSuccessful": "Swap successful"
       }
@@ -179,14 +193,16 @@
         "deleteSwapHistory": "Swap history is only stored locally and can't be recovered if you delete it.",
         "highValueLoss": "The value of the received tokens is significantly lower than the swapped tokens and transaction cost.",
         "insufficientFunds": "You don't have enough funds to execute the swap.",
-        "insufficientGas": "You need to add at least:"
+        "insufficientGas": "You need to add at least:",
+        "rateChanged": "The exchange rate has changed. By continuing the swap, you'll accept the new rate."
       },
       "title": {
         "deleteActiveSwaps": "Delete all active swaps?",
         "deleteSwap": "Delete this swap?",
         "deleteSwapHistory": "Delete swap history?",
         "highValueLoss": "High value loss",
-        "insufficientGas": "Insufficient gas"
+        "insufficientGas": "Insufficient gas",
+        "rateChanged": "Rate changed"
       }
     }
   },

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -21,12 +21,11 @@ const Card_1 = require("../../components/Card");
 const Dialog_1 = require("../../components/Dialog");
 const Header_1 = require("../../components/Header");
 const Step_1 = require("../../components/Step");
-const StepDivider_1 = require("../../components/StepDivider");
 const hooks_1 = require("../../hooks");
 const stores_1 = require("../../stores");
 const SwapDetailsPage_style_1 = require("./SwapDetailsPage.style");
 const SwapDetailsPage = () => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     const { t, i18n } = (0, react_i18next_1.useTranslation)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const { state } = (0, react_router_dom_1.useLocation)();
@@ -41,30 +40,26 @@ const SwapDetailsPage = () => {
             deleteRoute(routeExecution.route.id);
         }
     };
-    const copyRouteId = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _c;
-        yield navigator.clipboard.writeText((_c = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.id) !== null && _c !== void 0 ? _c : '');
+    let supportId = (_d = (_c = (_b = (_a = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps[0].execution) === null || _a === void 0 ? void 0 : _a.process.find((process) => process.txHash)) === null || _b === void 0 ? void 0 : _b.txHash) !== null && _c !== void 0 ? _c : routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.id) !== null && _d !== void 0 ? _d : '';
+    if (process.env.NODE_ENV === 'development') {
+        supportId += `_${routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.id}`;
+    }
+    const copySupportId = () => __awaiter(void 0, void 0, void 0, function* () {
+        yield navigator.clipboard.writeText(supportId);
     });
     (0, react_1.useEffect)(() => {
         return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "end", onClick: toggleDialog }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.DeleteOutline, {}) })));
     }, [toggleDialog]);
-    const startedAt = new Date((_b = (_a = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps[0].execution) === null || _a === void 0 ? void 0 : _a.process[0].startedAt) !== null && _b !== void 0 ? _b : 0);
+    const startedAt = new Date((_f = (_e = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps[0].execution) === null || _e === void 0 ? void 0 : _e.process[0].startedAt) !== null && _f !== void 0 ? _f : 0);
     return ((0, jsx_runtime_1.jsxs)(SwapDetailsPage_style_1.Container, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
                     display: 'flex',
                     flex: 1,
                     justifyContent: 'space-between',
                 }, pb: 1 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
-                        }).format(startedAt) }))] })), routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps.map((step, index, steps) => {
-                var _a, _b, _c, _d, _e;
-                const fromToken = index === 0
-                    ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined;
-                const toToken = index === steps.length - 1
-                    ? Object.assign(Object.assign({}, ((_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toToken) !== null && _b !== void 0 ? _b : (_c = step.action) === null || _c === void 0 ? void 0 : _c.toToken)), { amount: (_e = (_d = step.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : step.estimate.toAmount }) : undefined;
-                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Step_1.Step, { step: step, fromToken: fromToken, toToken: toToken }), steps.length > 1 && index !== steps.length - 1 ? ((0, jsx_runtime_1.jsx)(StepDivider_1.StepDivider, {})) : null] }, step.id));
-            }), (0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ mt: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+                        }).format(startedAt) }))] })), (0, Step_1.getStepList)(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route), (0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ mt: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
                             display: 'flex',
                             flex: 1,
-                        } }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, Object.assign({ flex: 1 }, { children: t('swap.supportId') })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mr: 1, mt: 1 }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", onClick: copyRouteId }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ContentCopy, { fontSize: "small" }) })) }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' } }, { children: routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.id }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true }, { children: t('button.contactSupport') })) })), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteSwap') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", onClick: handleDeleteRoute, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
+                        } }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, Object.assign({ flex: 1 }, { children: t('swap.supportId') })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mr: 1, mt: 1 }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", onClick: copySupportId }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ContentCopy, { fontSize: "small" }) })) }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' } }, { children: supportId }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true }, { children: t('button.contactSupport') })) })), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteSwap') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", onClick: handleDeleteRoute, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
 };
 exports.SwapDetailsPage = SwapDetailsPage;

package/cjs/pages/SwapHistoryPage/SwapHistoryEmpty.js

@@ -14,6 +14,6 @@ const SwapHistoryEmpty = () => {
             alignItems: 'center',
             justifyContent: 'center',
             paddingY: 12,
-        } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.History, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.emptySwapHistory') })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.emptySwapHistory') }))] })));
+        } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ReceiptLongRounded, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.emptySwapHistory') })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.emptySwapHistory') }))] })));
 };
 exports.SwapHistoryEmpty = SwapHistoryEmpty;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { ExchangeRateUpdateParams, Route } from '@lifi/sdk';
+export interface ExchangeRateBottomSheetBase {
+    isOpen(): void;
+    open(resolver: (value: boolean) => void, data: ExchangeRateUpdateParams): void;
+    close(value?: boolean): void;
+}
+interface ExchangeRateBottomSheetProps {
+    data?: ExchangeRateUpdateParams;
+    onContinue?(): void;
+    onCancel?(): void;
+}
+export declare const ExchangeRateBottomSheet: import("react").ForwardRefExoticComponent<ExchangeRateBottomSheetProps & import("react").RefAttributes<ExchangeRateBottomSheetBase>>;
+export declare const getTokenValueLossThreshold: (route?: Route) => boolean;
+export {};

package/cjs/pages/SwapPage/ExchangeRateBottomSheet.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTokenValueLossThreshold = exports.ExchangeRateBottomSheet = 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 utils_1 = require("../../utils");
+const StatusBottomSheet_style_1 = require("./StatusBottomSheet.style");
+exports.ExchangeRateBottomSheet = (0, react_1.forwardRef)(({ onContinue, onCancel }, ref) => {
+    const [data, setData] = (0, react_1.useState)();
+    const bottomSheetRef = (0, react_1.useRef)(null);
+    const resolverRef = (0, react_1.useRef)();
+    const handleContinue = () => {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close(true);
+        onContinue === null || onContinue === void 0 ? void 0 : onContinue();
+    };
+    const handleCancel = () => {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close(false);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    };
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        isOpen: () => { var _a; return (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.isOpen(); },
+        open: (resolver, data) => {
+            var _a;
+            setData(data);
+            resolverRef.current = resolver;
+            (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.open();
+        },
+        close: (value = false) => {
+            var _a, _b;
+            (_a = resolverRef.current) === null || _a === void 0 ? void 0 : _a.call(resolverRef, value);
+            (_b = bottomSheetRef.current) === null || _b === void 0 ? void 0 : _b.close();
+        },
+    }), []);
+    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: bottomSheetRef }, { children: (0, jsx_runtime_1.jsx)(ExchangeRateBottomSheetContent, { data: data, onContinue: handleContinue, onCancel: handleCancel }) })));
+});
+const ExchangeRateBottomSheetContent = ({ data, 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.WarningRounded, { color: "warning" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: t('swap.warning.title.rateChanged') }))] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: t('swap.warning.message.rateChanged') })), (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.quotedAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: [t('format.number', {
+                                value: (0, utils_1.formatTokenAmount)(data === null || data === void 0 ? void 0 : data.oldToAmount, data === null || data === void 0 ? void 0 : data.toToken.decimals),
+                            }), ' ', data === null || data === void 0 ? void 0 : data.toToken.symbol] }))] })), (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.currentAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: [t('format.number', {
+                                value: (0, utils_1.formatTokenAmount)(data === null || data === void 0 ? void 0 : data.newToAmount, data === null || data === void 0 ? void 0 : data.toToken.decimals),
+                            }), ' ', data === null || data === void 0 ? void 0 : data.toToken.symbol] }))] })), (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.rateChange') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: [(0, big_js_1.default)((data === null || data === void 0 ? void 0 : data.newToAmount) || 0)
+                                .div((0, big_js_1.default)((data === null || data === void 0 ? void 0 : data.oldToAmount) || 0))
+                                .minus(1)
+                                .mul(100)
+                                .round(2, big_js_1.default.roundUp)
+                                .toString(), "%"] }))] })), (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/pages/SwapPage/StatusBottomSheet.js

@@ -16,7 +16,7 @@ const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const StatusBottomSheet_style_1 = require("./StatusBottomSheet.style");
 const StatusBottomSheet = ({ status, route, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const { t } = (0, react_i18next_1.useTranslation)();
     const { navigateBack, navigate } = (0, hooks_1.useNavigateBack)();
     const ref = (0, react_1.useRef)(null);
@@ -95,9 +95,25 @@ const StatusBottomSheet = ({ status, route, }) => {
             handlePrimaryButton = handlePartialDone;
             break;
         }
+        case stores_1.RouteExecutionStatus.Done | stores_1.RouteExecutionStatus.Refunded: {
+            title = t('swap.success.title.refundIssued');
+            primaryMessage = t('swap.success.message.swapPartiallySuccessful', {
+                tool: (_o = route.steps.at(-1)) === null || _o === void 0 ? void 0 : _o.toolDetails.name,
+                tokenSymbol: (_p = route.steps.at(-1)) === null || _p === void 0 ? void 0 : _p.action.toToken.symbol,
+            });
+            if (token) {
+                secondaryMessage = t('swap.success.message.swapSuccessful', {
+                    amount: token.amount,
+                    tokenSymbol: token.symbol,
+                    chainName: (_q = getChainById(token.chainId)) === null || _q === void 0 ? void 0 : _q.name,
+                    walletAddress: (0, utils_1.shortenWalletAddress)(route.toAddress),
+                });
+            }
+            break;
+        }
         case stores_1.RouteExecutionStatus.Failed: {
             const step = route.steps.find((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
-            const process = (_o = step === null || step === void 0 ? void 0 : step.execution) === null || _o === void 0 ? void 0 : _o.process.find((process) => process.status === 'FAILED');
+            const process = (_r = step === null || step === void 0 ? void 0 : step.execution) === null || _r === void 0 ? void 0 : _r.process.find((process) => process.status === 'FAILED');
             if (!step || !process) {
                 break;
             }
@@ -122,8 +138,8 @@ 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 === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary" })) : null, status === stores_1.RouteExecutionStatus.Done ? ((0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Partial) ||
-                                    (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Refunded) ? ((0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "warning" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Failed) ? ((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 })), (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done) ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, py: 1, disableDescription: true })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: primaryMessage })), secondaryMessage ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: secondaryMessage }))) : null, (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: handlePrimaryButton }, { children: [status === stores_1.RouteExecutionStatus.Idle ? t('button.ok') : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done)
+    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 === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(icons_material_1.InfoRounded, { color: "primary" })) : null, status === stores_1.RouteExecutionStatus.Done ? ((0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Partial) ||
+                                    (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Refunded) ? ((0, jsx_runtime_1.jsx)(icons_material_1.WarningRounded, { color: "warning" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Failed) ? ((0, jsx_runtime_1.jsx)(icons_material_1.ErrorRounded, { color: "error" })) : null] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done) ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, py: 1, disableDescription: true })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: primaryMessage })), secondaryMessage ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: secondaryMessage }))) : null, (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: handlePrimaryButton }, { children: [status === stores_1.RouteExecutionStatus.Idle ? t('button.ok') : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done)
                                 ? t('button.done')
                                 : null, status === stores_1.RouteExecutionStatus.Failed
                                 ? t('button.seeDetails')

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

@@ -7,15 +7,15 @@ const stores_1 = require("../../stores");
 const getStatusColor = (status, theme) => {
     switch (status) {
         case stores_1.RouteExecutionStatus.Done:
-            return { color: theme.palette.success.main, alpha: 0.15, darken: 0 };
+            return { color: theme.palette.success.main, alpha: 0.12, darken: 0 };
         case stores_1.RouteExecutionStatus.Failed:
-            return { color: theme.palette.error.main, alpha: 0.2, darken: 0 };
+            return { color: theme.palette.error.main, alpha: 0.12, darken: 0 };
         case stores_1.RouteExecutionStatus.Done | stores_1.RouteExecutionStatus.Partial:
         case stores_1.RouteExecutionStatus.Done | stores_1.RouteExecutionStatus.Refunded:
         case 'warning':
-            return { color: theme.palette.warning.main, alpha: 0.7, darken: 0.4 };
+            return { color: theme.palette.warning.main, alpha: 0.48, darken: 0.32 };
         default:
-            return { color: theme.palette.primary.main, alpha: 0.15, darken: 0 };
+            return { color: theme.palette.primary.main, alpha: 0.12, darken: 0 };
     }
 };
 exports.IconContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({

package/cjs/pages/SwapPage/SwapPage.js

@@ -19,21 +19,26 @@ const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const GasSufficiencyMessage_1 = require("../../components/GasSufficiencyMessage");
 const Step_1 = require("../../components/Step");
-const StepDivider_1 = require("../../components/StepDivider");
 const SwapButton_1 = require("../../components/SwapButton");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
+const ExchangeRateBottomSheet_1 = require("./ExchangeRateBottomSheet");
 const StatusBottomSheet_1 = require("./StatusBottomSheet");
 const SwapPage_style_1 = require("./SwapPage.style");
 const TokenValueBottomSheet_1 = require("./TokenValueBottomSheet");
 const SwapPage = () => {
+    var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
     const { state } = (0, react_router_dom_1.useLocation)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const tokenValueBottomSheetRef = (0, react_1.useRef)(null);
+    const exchangeRateBottomSheetRef = (0, react_1.useRef)(null);
     const { setValue } = (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 { route, status, executeRoute, restartRoute, deleteRoute } = (0, hooks_1.useRouteExecution)({
+        routeId: state === null || state === void 0 ? void 0 : state.routeId,
+        onAcceptExchangeRateUpdate: (_a = exchangeRateBottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.open,
+    });
     const handleExecuteRoute = (0, react_1.useCallback)(() => {
         var _a, _b;
         if ((_a = tokenValueBottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.isOpen()) {
@@ -43,11 +48,11 @@ const SwapPage = () => {
         setValue(providers_1.SwapFormKey.FromAmount, '');
     }, [executeRoute, setValue]);
     const handleSwapClick = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
+        var _b;
         if (status === stores_1.RouteExecutionStatus.Idle) {
             const thresholdExceeded = (0, TokenValueBottomSheet_1.getTokenValueLossThreshold)(route);
             if (thresholdExceeded) {
-                (_a = tokenValueBottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.open();
+                (_b = tokenValueBottomSheetRef.current) === null || _b === void 0 ? void 0 : _b.open();
             }
             else {
                 handleExecuteRoute();
@@ -66,24 +71,17 @@ const SwapPage = () => {
             case stores_1.RouteExecutionStatus.Idle:
                 return t('button.startSwap');
             case stores_1.RouteExecutionStatus.Failed:
-                return t('button.restartSwap');
+                return t('button.tryAgain');
             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) => {
-                var _a, _b, _c, _d, _e;
-                const fromToken = index === 0
-                    ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined;
-                const toToken = index === steps.length - 1
-                    ? Object.assign(Object.assign({}, ((_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toToken) !== null && _b !== void 0 ? _b : (_c = step.action) === null || _c === void 0 ? void 0 : _c.toToken)), { amount: (_e = (_d = step.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : step.estimate.toAmount }) : undefined;
-                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Step_1.Step, { step: step, fromToken: fromToken, toToken: toToken }), steps.length > 1 && index !== steps.length - 1 ? ((0, jsx_runtime_1.jsx)(StepDivider_1.StepDivider, {})) : null] }, step.id));
-            }), status === stores_1.RouteExecutionStatus.Idle ||
+    return ((0, jsx_runtime_1.jsxs)(SwapPage_style_1.Container, { children: [(0, Step_1.getStepList)(route), status === stores_1.RouteExecutionStatus.Idle ||
                 status === stores_1.RouteExecutionStatus.Failed ? ((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 === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleRemoveRoute, sx: {
                                         minWidth: 48,
                                         marginLeft: 1,
-                                    } }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Delete, {}) })) }))) : null] }))] })) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null, route ? ((0, jsx_runtime_1.jsx)(TokenValueBottomSheet_1.TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null] }));
+                                    } }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Delete, {}) })) }))) : null] }))] })) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null, route ? ((0, jsx_runtime_1.jsx)(TokenValueBottomSheet_1.TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, route ? (0, jsx_runtime_1.jsx)(ExchangeRateBottomSheet_1.ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef }) : null] }));
 };
 exports.SwapPage = SwapPage;

package/cjs/pages/SwapPage/TokenValueBottomSheet.js

@@ -22,11 +22,12 @@ 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('format.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('format.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('format.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)
+    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.WarningRounded, { 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('format.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('format.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('format.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)))
                                 .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') }))] }))] })));
+                                .round(2, big_js_1.default.roundUp)
+                                .toString(), "%"] }))] })), (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) {

package/cjs/utils/navigationRoutes.js

@@ -20,6 +20,7 @@ exports.navigationRoutesValues = Object.values(exports.navigationRoutes);
 exports.stickyHeaderRoutes = [
     exports.navigationRoutes.activeSwaps,
     exports.navigationRoutes.fromChain,
+    exports.navigationRoutes.home,
     exports.navigationRoutes.selectWallet,
     exports.navigationRoutes.settings,
     exports.navigationRoutes.swapDetails,