@lifi/widget 1.25.1 → 1.26.0

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

@@ -8,6 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { isAddress } from '@ethersproject/address';
+import { LifiErrorCode } from '@lifi/sdk';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import Big from 'big.js';
 import { useWatch } from 'react-hook-form';
@@ -107,6 +108,12 @@ export const useSwapRoutes = () => {
         refetchInterval,
         staleTime: refetchTime,
         cacheTime: refetchTime,
+        retry(failureCount, error) {
+            if ((error === null || error === void 0 ? void 0 : error.code) === LifiErrorCode.NotFound) {
+                return false;
+            }
+            return true;
+        },
     });
     return {
         routes: data === null || data === void 0 ? void 0 : data.routes,

package/hooks/useTokenBalance.js

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

package/hooks/useTools.js

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

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

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.25.1",
+  "version": "1.26.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -42,14 +42,14 @@
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@lifi/sdk": "^1.6.4",
+    "@lifi/sdk": "^1.7.0",
     "@lifi/wallet-management": "^1.2.1",
-    "@mui/icons-material": "^5.10.14",
-    "@mui/lab": "^5.0.0-alpha.108",
-    "@mui/material": "^5.10.14",
-    "@sentry/integrations": "^7.20.0",
-    "@sentry/react": "^7.20.0",
-    "@sentry/tracing": "^7.20.0",
+    "@mui/icons-material": "^5.10.15",
+    "@mui/lab": "^5.0.0-alpha.109",
+    "@mui/material": "^5.10.15",
+    "@sentry/integrations": "^7.21.1",
+    "@sentry/react": "^7.21.1",
+    "@sentry/tracing": "^7.21.1",
     "@tanstack/react-query": "^4.16.1",
     "@tanstack/react-virtual": "^3.0.0-beta.23",
     "big.js": "^6.2.1",
@@ -60,7 +60,7 @@
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.39.4",
+    "react-hook-form": "^7.39.5",
     "react-i18next": "^12.0.0",
     "react-router-dom": "^6.4.3",
     "react-timer-hook": "^3.0.5",

package/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -8,22 +8,21 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ContentCopy as ContentCopyIcon, DeleteOutline as DeleteIcon, } from '@mui/icons-material';
-import { Box, Button, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, Typography, } from '@mui/material';
-import { Fragment, useCallback, useEffect, useState } from 'react';
+import { ContentCopy as ContentCopyIcon, DeleteOutline as DeleteIcon } from '@mui/icons-material';
+import { Box, Button, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, Typography } from '@mui/material';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import shallow from 'zustand/shallow';
 import { Card, CardTitle } from '../../components/Card';
 import { Dialog } from '../../components/Dialog';
 import { useHeaderActionStore } from '../../components/Header';
-import { Step } from '../../components/Step';
-import { StepDivider } from '../../components/StepDivider';
+import { getStepList } from '../../components/Step';
 import { useNavigateBack } from '../../hooks';
 import { useRouteExecutionStore } from '../../stores';
 import { Container } from './SwapDetailsPage.style';
 export const SwapDetailsPage = () => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     const { t, i18n } = useTranslation();
     const { navigateBack } = useNavigateBack();
     const { state } = useLocation();
@@ -38,29 +37,25 @@ export 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);
     });
     useEffect(() => {
         return useHeaderActionStore.getState().setAction(_jsx(IconButton, Object.assign({ size: "medium", edge: "end", onClick: toggleDialog }, { children: _jsx(DeleteIcon, {}) })));
     }, [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 (_jsxs(Container, { children: [_jsxs(Box, Object.assign({ sx: {
                     display: 'flex',
                     flex: 1,
                     justifyContent: 'space-between',
                 }, pb: 1 }, { children: [_jsx(Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) })), _jsx(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 (_jsxs(Fragment, { children: [_jsx(Step, { step: step, fromToken: fromToken, toToken: toToken }), steps.length > 1 && index !== steps.length - 1 ? (_jsx(StepDivider, {})) : null] }, step.id));
-            }), _jsxs(Card, Object.assign({ mt: 2 }, { children: [_jsxs(Box, Object.assign({ sx: {
+                        }).format(startedAt) }))] })), getStepList(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route), _jsxs(Card, Object.assign({ mt: 2 }, { children: [_jsxs(Box, Object.assign({ sx: {
                             display: 'flex',
                             flex: 1,
-                        } }, { children: [_jsx(CardTitle, Object.assign({ flex: 1 }, { children: t('swap.supportId') })), _jsx(Box, Object.assign({ mr: 1, mt: 1 }, { children: _jsx(IconButton, Object.assign({ size: "medium", onClick: copyRouteId }, { children: _jsx(ContentCopyIcon, { fontSize: "small" }) })) }))] })), _jsx(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 }))] })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "contained", href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true }, { children: t('button.contactSupport') })) })), _jsxs(Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteSwap') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), _jsx(Button, Object.assign({ variant: "contained", onClick: handleDeleteRoute, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
+                        } }, { children: [_jsx(CardTitle, Object.assign({ flex: 1 }, { children: t('swap.supportId') })), _jsx(Box, Object.assign({ mr: 1, mt: 1 }, { children: _jsx(IconButton, Object.assign({ size: "medium", onClick: copySupportId }, { children: _jsx(ContentCopyIcon, { fontSize: "small" }) })) }))] })), _jsx(Typography, Object.assign({ variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' } }, { children: supportId }))] })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true }, { children: t('button.contactSupport') })) })), _jsxs(Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteSwap') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), _jsx(Button, Object.assign({ variant: "contained", onClick: handleDeleteRoute, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
 };

package/pages/SwapHistoryPage/SwapHistoryEmpty.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { History as HistoryIcon } from '@mui/icons-material';
+import { ReceiptLongRounded as HistoryIcon } from '@mui/icons-material';
 import { Container, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 export const SwapHistoryEmpty = () => {

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

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { WarningRounded as WarningIcon } from '@mui/icons-material';
+import { Box, Button, Typography } from '@mui/material';
+import Big from 'big.js';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BottomSheet } from '../../components/BottomSheet';
+import { useSetContentHeight } from '../../hooks';
+import { formatTokenAmount } from '../../utils';
+import { IconCircle, IconContainer } from './StatusBottomSheet.style';
+export const ExchangeRateBottomSheet = forwardRef(({ onContinue, onCancel }, ref) => {
+    const [data, setData] = useState();
+    const bottomSheetRef = useRef(null);
+    const resolverRef = 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();
+    };
+    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 (_jsx(BottomSheet, Object.assign({ ref: bottomSheetRef }, { children: _jsx(ExchangeRateBottomSheetContent, { data: data, onContinue: handleContinue, onCancel: handleCancel }) })));
+});
+const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
+    const { t } = useTranslation();
+    const ref = useRef();
+    useSetContentHeight(ref);
+    return (_jsxs(Box, Object.assign({ p: 3, ref: ref }, { children: [_jsxs(IconContainer, { children: [_jsx(IconCircle, Object.assign({ status: "warning", mb: 1 }, { children: _jsx(WarningIcon, { color: "warning" }) })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: t('swap.warning.title.rateChanged') }))] }), _jsx(Typography, Object.assign({ py: 1 }, { children: t('swap.warning.message.rateChanged') })), _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 1 }, { children: [_jsx(Typography, { children: t('swap.quotedAmount') }), _jsxs(Typography, Object.assign({ fontWeight: 600 }, { children: [t('format.number', {
+                                value: 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] }))] })), _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [_jsx(Typography, { children: t('swap.currentAmount') }), _jsxs(Typography, Object.assign({ fontWeight: 600 }, { children: [t('format.number', {
+                                value: 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] }))] })), _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [_jsx(Typography, { children: t('swap.rateChange') }), _jsxs(Typography, Object.assign({ fontWeight: 600 }, { children: [Big((data === null || data === void 0 ? void 0 : data.newToAmount) || 0)
+                                .div(Big((data === null || data === void 0 ? void 0 : data.oldToAmount) || 0))
+                                .minus(1)
+                                .mul(100)
+                                .round(2, Big.roundUp)
+                                .toString(), "%"] }))] })), _jsxs(Box, Object.assign({ display: "flex", mt: 3 }, { children: [_jsx(Button, Object.assign({ variant: "text", onClick: onCancel, fullWidth: true }, { children: t('button.cancel') })), _jsx(Box, { display: "flex", p: 1 }), _jsx(Button, Object.assign({ variant: "contained", onClick: onContinue, fullWidth: true }, { children: t('button.continue') }))] }))] })));
+};
+export const getTokenValueLossThreshold = (route) => {
+    if (!route) {
+        return false;
+    }
+    const fromAmountUSD = Big((route === null || route === void 0 ? void 0 : route.fromAmountUSD) || 0);
+    const toAmountUSD = Big((route === null || route === void 0 ? void 0 : route.toAmountUSD) || 0);
+    const gasCostUSD = Big((route === null || route === void 0 ? void 0 : route.gasCostUSD) || 0);
+    if (fromAmountUSD.eq(0) && toAmountUSD.eq(0)) {
+        return false;
+    }
+    return toAmountUSD.div(fromAmountUSD.plus(gasCostUSD)).lt(0.9);
+};

package/pages/SwapPage/StatusBottomSheet.js

@@ -1,19 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable consistent-return */
-import { Done as DoneIcon, Info as InfoIcon, Warning as WarningIcon, } from '@mui/icons-material';
+import { Done as DoneIcon, ErrorRounded as ErrorIcon, InfoRounded as InfoIcon, WarningRounded as WarningIcon } from '@mui/icons-material';
 import { Box, Button, Typography } from '@mui/material';
 import { useEffect, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { BottomSheet } from '../../components/BottomSheet';
 import { Token } from '../../components/Token';
-import { getProcessMessage, useChains, useNavigateBack, useTokenBalance, } from '../../hooks';
+import { getProcessMessage, useChains, useNavigateBack, useTokenBalance } from '../../hooks';
 import { SwapFormKey } from '../../providers';
 import { RouteExecutionStatus } from '../../stores';
-import { formatTokenAmount, hasEnumFlag, navigationRoutes, shortenWalletAddress, } from '../../utils';
+import { formatTokenAmount, hasEnumFlag, navigationRoutes, shortenWalletAddress } from '../../utils';
 import { IconCircle, IconContainer } from './StatusBottomSheet.style';
 export 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 } = useTranslation();
     const { navigateBack, navigate } = useNavigateBack();
     const ref = useRef(null);
@@ -92,9 +92,25 @@ export const StatusBottomSheet = ({ status, route, }) => {
             handlePrimaryButton = handlePartialDone;
             break;
         }
+        case RouteExecutionStatus.Done | 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: shortenWalletAddress(route.toAddress),
+                });
+            }
+            break;
+        }
         case 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;
             }
@@ -120,7 +136,7 @@ export const StatusBottomSheet = ({ status, route, }) => {
         }
     }, [refetch, refetchNewBalance, status]);
     return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === RouteExecutionStatus.Idle ? (_jsx(InfoIcon, { color: "primary" })) : null, status === RouteExecutionStatus.Done ? (_jsx(DoneIcon, { color: "success" })) : null, hasEnumFlag(status, RouteExecutionStatus.Partial) ||
-                                    hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (_jsx(WarningIcon, { color: "warning" })) : null, hasEnumFlag(status, RouteExecutionStatus.Failed) ? (_jsx(WarningIcon, { color: "error" })) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), hasEnumFlag(status, RouteExecutionStatus.Done) ? (_jsx(Token, { token: toToken, py: 1, disableDescription: true })) : null] }), _jsx(Typography, Object.assign({ py: 1 }, { children: primaryMessage })), secondaryMessage ? (_jsx(Typography, Object.assign({ py: 1 }, { children: secondaryMessage }))) : null, _jsx(Box, Object.assign({ mt: 2 }, { children: _jsxs(Button, Object.assign({ variant: "contained", fullWidth: true, onClick: handlePrimaryButton }, { children: [status === RouteExecutionStatus.Idle ? t('button.ok') : null, hasEnumFlag(status, RouteExecutionStatus.Done)
+                                    hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (_jsx(WarningIcon, { color: "warning" })) : null, hasEnumFlag(status, RouteExecutionStatus.Failed) ? (_jsx(ErrorIcon, { color: "error" })) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), hasEnumFlag(status, RouteExecutionStatus.Done) ? (_jsx(Token, { token: toToken, py: 1, disableDescription: true })) : null] }), _jsx(Typography, Object.assign({ py: 1 }, { children: primaryMessage })), secondaryMessage ? (_jsx(Typography, Object.assign({ py: 1 }, { children: secondaryMessage }))) : null, _jsx(Box, Object.assign({ mt: 2 }, { children: _jsxs(Button, Object.assign({ variant: "contained", fullWidth: true, onClick: handlePrimaryButton }, { children: [status === RouteExecutionStatus.Idle ? t('button.ok') : null, hasEnumFlag(status, RouteExecutionStatus.Done)
                                 ? t('button.done')
                                 : null, status === RouteExecutionStatus.Failed
                                 ? t('button.seeDetails')

package/pages/SwapPage/StatusBottomSheet.style.js

@@ -4,15 +4,15 @@ import { RouteExecutionStatus } from '../../stores';
 const getStatusColor = (status, theme) => {
     switch (status) {
         case 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 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 RouteExecutionStatus.Done | RouteExecutionStatus.Partial:
         case RouteExecutionStatus.Done | 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 };
     }
 };
 export const IconContainer = styled(Box)(({ theme }) => ({

package/pages/SwapPage/SwapPage.js

@@ -10,27 +10,32 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Delete as DeleteIcon } from '@mui/icons-material';
 import { Box, Button, Tooltip } from '@mui/material';
-import { Fragment, useCallback, useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { GasSufficiencyMessage } from '../../components/GasSufficiencyMessage';
-import { Step } from '../../components/Step';
-import { StepDivider } from '../../components/StepDivider';
+import { getStepList } from '../../components/Step';
 import { SwapButton } from '../../components/SwapButton';
 import { useNavigateBack, useRouteExecution } from '../../hooks';
 import { SwapFormKey } from '../../providers';
 import { RouteExecutionStatus } from '../../stores';
+import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet';
 import { StatusBottomSheet } from './StatusBottomSheet';
 import { Container } from './SwapPage.style';
-import { getTokenValueLossThreshold, TokenValueBottomSheet, } from './TokenValueBottomSheet';
+import { getTokenValueLossThreshold, TokenValueBottomSheet } from './TokenValueBottomSheet';
 export const SwapPage = () => {
+    var _a;
     const { t } = useTranslation();
     const { state } = useLocation();
     const { navigateBack } = useNavigateBack();
     const tokenValueBottomSheetRef = useRef(null);
+    const exchangeRateBottomSheetRef = useRef(null);
     const { setValue } = useFormContext();
-    const { route, status, executeRoute, restartRoute, deleteRoute } = useRouteExecution(state === null || state === void 0 ? void 0 : state.routeId);
+    const { route, status, executeRoute, restartRoute, deleteRoute } = 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 = useCallback(() => {
         var _a, _b;
         if ((_a = tokenValueBottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.isOpen()) {
@@ -40,11 +45,11 @@ export const SwapPage = () => {
         setValue(SwapFormKey.FromAmount, '');
     }, [executeRoute, setValue]);
     const handleSwapClick = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
+        var _b;
         if (status === RouteExecutionStatus.Idle) {
             const thresholdExceeded = 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();
@@ -63,23 +68,16 @@ export const SwapPage = () => {
             case RouteExecutionStatus.Idle:
                 return t('button.startSwap');
             case RouteExecutionStatus.Failed:
-                return t('button.restartSwap');
+                return t('button.tryAgain');
             default:
                 return '';
         }
     };
-    return (_jsxs(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 (_jsxs(Fragment, { children: [_jsx(Step, { step: step, fromToken: fromToken, toToken: toToken }), steps.length > 1 && index !== steps.length - 1 ? (_jsx(StepDivider, {})) : null] }, step.id));
-            }), status === RouteExecutionStatus.Idle ||
+    return (_jsxs(Container, { children: [getStepList(route), status === RouteExecutionStatus.Idle ||
                 status === RouteExecutionStatus.Failed ? (_jsxs(_Fragment, { children: [_jsx(GasSufficiencyMessage, { route: route, mt: 2 }), _jsxs(Box, Object.assign({ mt: 2, display: "flex" }, { children: [_jsx(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, 
                                 // disable={status === 'idle' && (isValidating || !isValid)}
                                 enableLoading: true }), status === RouteExecutionStatus.Failed ? (_jsx(Tooltip, Object.assign({ title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true }, { children: _jsx(Button, Object.assign({ onClick: handleRemoveRoute, sx: {
                                         minWidth: 48,
                                         marginLeft: 1,
-                                    } }, { children: _jsx(DeleteIcon, {}) })) }))) : null] }))] })) : null, route && status ? (_jsx(StatusBottomSheet, { status: status, route: route })) : null, route ? (_jsx(TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null] }));
+                                    } }, { children: _jsx(DeleteIcon, {}) })) }))) : null] }))] })) : null, route && status ? (_jsx(StatusBottomSheet, { status: status, route: route })) : null, route ? (_jsx(TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, route ? _jsx(ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef }) : null] }));
 };

package/pages/SwapPage/TokenValueBottomSheet.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Warning as WarningIcon } from '@mui/icons-material';
+import { WarningRounded as WarningIcon } from '@mui/icons-material';
 import { Box, Button, Typography } from '@mui/material';
 import Big from 'big.js';
 import { forwardRef, useRef } from 'react';
@@ -23,7 +23,8 @@ const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
                                 .div(Big(route.fromAmountUSD || 0).plus(Big(route.gasCostUSD || 0)))
                                 .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') }))] }))] })));
+                                .round(2, Big.roundUp)
+                                .toString(), "%"] }))] })), _jsxs(Box, Object.assign({ display: "flex", mt: 3 }, { children: [_jsx(Button, Object.assign({ variant: "text", onClick: onCancel, fullWidth: true }, { children: t('button.cancel') })), _jsx(Box, { display: "flex", p: 1 }), _jsx(Button, Object.assign({ variant: "contained", onClick: onContinue, fullWidth: true }, { children: t('button.continue') }))] }))] })));
 };
 export const getTokenValueLossThreshold = (route) => {
     if (!route) {