@lifi/widget 1.18.9 → 1.20.0

package/hooks/index.js

@@ -2,6 +2,7 @@ export * from './useChain';
 export * from './useChains';
 export * from './useContentHeight';
 export * from './useDebouncedWatch';
+export * from './useExpandableVariant';
 export * from './useFeaturedTokens';
 export * from './useGasSufficiency';
 export * from './useInitializer';

package/hooks/useContentHeight.d.ts

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

package/hooks/useContentHeight.js

@@ -1,5 +1,6 @@
 import { useLayoutEffect, useState } from 'react';
 import { ElementId } from '../utils';
+import { getScrollableContainer } from './useScrollableContainer';
 const getContentHeight = () => {
     const headerElement = document.getElementById(ElementId.Header);
     const containerElement = document.getElementById(ElementId.ScrollableContainer);
@@ -21,3 +22,18 @@ export const useContentHeight = () => {
     }, []);
     return contentHeight;
 };
+export const useSetContentHeight = (ref) => {
+    useLayoutEffect(() => {
+        var _a;
+        const scrollableContainer = getScrollableContainer();
+        if (!scrollableContainer ||
+            !ref.current ||
+            ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientHeight) <= (scrollableContainer === null || scrollableContainer === void 0 ? void 0 : scrollableContainer.clientHeight)) {
+            return;
+        }
+        scrollableContainer.style.height = `${ref.current.clientHeight}px`;
+        return () => {
+            scrollableContainer.style.removeProperty('height');
+        };
+    }, [ref]);
+};

package/hooks/useExpandableVariant.d.ts

@@ -0,0 +1 @@
+export declare const useExpandableVariant: () => boolean;

package/hooks/useExpandableVariant.js

@@ -0,0 +1,10 @@
+import { useMediaQuery } from '@mui/material';
+import { useWidgetConfig } from '../providers';
+const defaultExpandableWidth = 852;
+export const useExpandableVariant = () => {
+    const { variant } = useWidgetConfig();
+    const expandableAllowed = useMediaQuery((theme) => {
+        return theme.breakpoints.up(defaultExpandableWidth);
+    });
+    return variant === 'expandable' && expandableAllowed;
+};

package/hooks/useGasSufficiency.d.ts

@@ -9,7 +9,8 @@ interface GasSufficiency {
     chain?: EVMChain;
 }
 export declare const useGasSufficiency: (route?: Route) => {
-    insufficientGas: GasSufficiency[] | undefined;
-    insufficientFunds: boolean;
+    insufficientGas: GasSufficiency[] | null | undefined;
+    insufficientFunds: boolean | null | undefined;
+    isLoading: boolean;
 };
 export {};

package/hooks/useGasSufficiency.js

@@ -7,23 +7,25 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { useQuery } from '@tanstack/react-query';
 import Big from 'big.js';
-import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useChains } from '.';
 import { useWallet } from '../providers';
+import { isRouteCompleted } from '../stores';
 import { useTokenBalance } from './useTokenBalance';
+const refetchInterval = 30000;
 export const useGasSufficiency = (route) => {
     const { account } = useWallet();
     const { getChainById } = useChains();
     const { token: fromToken, getTokenBalancesWithRetry } = useTokenBalance(route === null || route === void 0 ? void 0 : route.fromToken);
-    const [insufficientGas, setInsufficientGas] = useState();
-    const checkInsufficientGas = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    const { data: insufficientGas, isInitialLoading: insufficientGasLoading } = useQuery(['gas-sufficiency-check', account.address, route === null || route === void 0 ? void 0 : route.id], () => __awaiter(void 0, void 0, void 0, function* () {
         var _a, _b;
         if (!account.address || !route) {
-            setInsufficientGas(undefined);
-            return;
+            return null;
         }
-        const gasCosts = route.steps.reduce((groupedGasCosts, step) => {
+        const gasCosts = route.steps
+            .filter((step) => !step.execution || step.execution.status !== 'DONE')
+            .reduce((groupedGasCosts, step) => {
             if (step.estimate.gasCosts) {
                 const { token } = step.estimate.gasCosts[0];
                 const gasCostAmount = step.estimate.gasCosts
@@ -37,7 +39,6 @@ export const useGasSufficiency = (route) => {
                     gasAmount,
                     tokenAmount: gasAmount,
                     token,
-                    chain: getChainById(token.chainId),
                 };
                 return groupedGasCosts;
             }
@@ -48,41 +49,64 @@ export const useGasSufficiency = (route) => {
         }
         const tokenBalances = yield getTokenBalancesWithRetry(account.address, Object.values(gasCosts).map((item) => item.token));
         if (!(tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.length)) {
-            setInsufficientGas(undefined);
-            return;
+            return null;
         }
         [route.fromChainId, route.toChainId].forEach((chainId) => {
             var _a, _b, _c, _d, _e, _f;
             if (gasCosts[chainId]) {
                 const gasTokenBalance = Big((_b = (_a = tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.find((t) => t.chainId === gasCosts[chainId].token.chainId &&
                     t.address === gasCosts[chainId].token.address)) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);
-                const insufficientFromChainGas = gasTokenBalance.lte(0) ||
+                const insufficient = gasTokenBalance.lte(0) ||
                     gasTokenBalance.lt((_c = gasCosts[chainId].gasAmount) !== null && _c !== void 0 ? _c : Big(0)) ||
                     gasTokenBalance.lt((_d = gasCosts[chainId].tokenAmount) !== null && _d !== void 0 ? _d : Big(0));
-                const insufficientFromChainGasAmount = insufficientFromChainGas
+                const insufficientAmount = insufficient
                     ? (_f = (_e = gasCosts[chainId].tokenAmount) === null || _e === void 0 ? void 0 : _e.minus(gasTokenBalance)) !== null && _f !== void 0 ? _f : gasCosts[chainId].gasAmount.minus(gasTokenBalance)
                     : undefined;
-                gasCosts[chainId] = Object.assign(Object.assign({}, gasCosts[chainId]), { insufficient: insufficientFromChainGas, insufficientAmount: insufficientFromChainGasAmount === null || insufficientFromChainGasAmount === void 0 ? void 0 : insufficientFromChainGasAmount.round(5, Big.roundUp) });
+                gasCosts[chainId] = Object.assign(Object.assign({}, gasCosts[chainId]), { insufficient, insufficientAmount: insufficientAmount === null || insufficientAmount === void 0 ? void 0 : insufficientAmount.round(5, Big.roundUp), chain: insufficient ? getChainById(chainId) : undefined });
             }
         });
         const gasCostResult = Object.values(gasCosts).filter((gasCost) => gasCost.insufficient);
-        setInsufficientGas(gasCostResult);
-    }), [account.address, getChainById, getTokenBalancesWithRetry, route]);
-    const insufficientFunds = useMemo(() => {
-        var _a;
-        if (!account.isActive || !fromToken || !route) {
-            return false;
+        return gasCostResult;
+    }), {
+        enabled: Boolean(account.address && route),
+        refetchIntervalInBackground: true,
+        refetchInterval,
+        staleTime: refetchInterval,
+        cacheTime: refetchInterval,
+    });
+    const { data: insufficientFunds, isInitialLoading: insufficientFundsLoading, } = useQuery(['funds-sufficiency-check', account.address, route === null || route === void 0 ? void 0 : route.id], () => __awaiter(void 0, void 0, void 0, function* () {
+        var _c, _d, _e, _f;
+        if (!account.address || !fromToken || !route || isRouteCompleted(route)) {
+            return null;
+        }
+        let currentTokenBalance = Big((_c = fromToken === null || fromToken === void 0 ? void 0 : fromToken.amount) !== null && _c !== void 0 ? _c : 0);
+        const currentAction = (_d = route.steps.filter((step) => !step.execution || step.execution.status !== 'DONE')[0]) === null || _d === void 0 ? void 0 : _d.action;
+        if (fromToken.chainId === currentAction.fromToken.chainId &&
+            fromToken.address === currentAction.fromToken.address &&
+            currentTokenBalance.gt(0)) {
+            const insufficientFunds = Big(route.fromAmount)
+                .div(Math.pow(10, route.fromToken.decimals))
+                .gt(currentTokenBalance);
+            return insufficientFunds;
         }
-        const balance = Big((_a = fromToken === null || fromToken === void 0 ? void 0 : fromToken.amount) !== null && _a !== void 0 ? _a : 0);
-        return Big(route.fromAmount)
-            .div(Math.pow(10, route.fromToken.decimals))
-            .gt(balance);
-    }, [account.isActive, fromToken, route]);
-    useEffect(() => {
-        checkInsufficientGas();
-    }, [checkInsufficientGas]);
+        const tokenBalances = yield getTokenBalancesWithRetry(account.address, [
+            currentAction.fromToken,
+        ]);
+        currentTokenBalance = Big((_f = (_e = tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances[0]) === null || _e === void 0 ? void 0 : _e.amount) !== null && _f !== void 0 ? _f : 0);
+        const insufficientFunds = Big(currentAction.fromAmount)
+            .div(Math.pow(10, currentAction.fromToken.decimals))
+            .gt(currentTokenBalance);
+        return insufficientFunds;
+    }), {
+        enabled: Boolean(account.address && route && fromToken),
+        refetchIntervalInBackground: true,
+        refetchInterval,
+        staleTime: refetchInterval,
+        cacheTime: refetchInterval,
+    });
     return {
         insufficientGas,
         insufficientFunds,
+        isLoading: insufficientGasLoading || insufficientFundsLoading,
     };
 };

package/hooks/useSwapRoutes.js

@@ -74,16 +74,18 @@ export const useSwapRoutes = () => {
         catch (_d) {
             toWalletAddress = isAddress(toAddress) ? toAddress : fromAddress;
         }
+        const fromAmount = Big(Number(fromTokenAmount) * Math.pow(10, ((_c = token === null || token === void 0 ? void 0 : token.decimals) !== null && _c !== void 0 ? _c : 0))).toString();
+        const formattedSlippage = parseFloat(slippage) / 100;
         return lifi.getRoutes({
             fromChainId,
-            fromAmount: Big(Number(fromTokenAmount) * Math.pow(10, ((_c = token === null || token === void 0 ? void 0 : token.decimals) !== null && _c !== void 0 ? _c : 0))).toString(),
+            fromAmount,
             fromTokenAddress,
             toChainId,
             toTokenAddress,
             fromAddress,
             toAddress: toWalletAddress,
             options: {
-                slippage: slippage / 100,
+                slippage: formattedSlippage,
                 bridges: {
                     allow: enabledBridges,
                 },

package/hooks/useTokenBalance.js

@@ -21,12 +21,12 @@ export const useTokenBalance = (token, accountAddress) => {
         try {
             const tokenBalances = yield lifi.getTokenBalances(accountAddress, tokens);
             if (!tokenBalances.every((token) => token.blockNumber)) {
-                if (depth > 5) {
+                if (depth > 10) {
                     console.warn('Token balance backoff depth exceeded.');
                     return undefined;
                 }
                 yield new Promise((resolve) => {
-                    setTimeout(resolve, depth * 100);
+                    setTimeout(resolve, Math.pow(1.5, depth) * 100);
                 });
                 return getTokenBalancesWithRetry(accountAddress, tokens, depth + 1);
             }

package/i18n/en/translation.json

@@ -22,6 +22,7 @@
     "removeSwap": "Remove swap",
     "done": "Done",
     "okay": "Okay",
+    "continue": "Continue",
     "seeDetails": "See details",
     "tryAgain": "Try again",
     "light": "Light",
@@ -44,10 +45,6 @@
     "routes": "You get",
     "approximateCurrency": "\u2248 {{value, currency(currency: USD)}}",
     "currency": "{{value, currency(currency: USD)}}",
-    "sendToRecipient": "Send to recipient",
-    "addressConfirmation": "I confirm that the address above is correct",
-    "gas": "gas fee",
-    "minutes": "minutes",
     "tokenSearch": "Search your token",
     "selectChain": "Chain",
     "selectToken": "Token",
@@ -66,6 +63,10 @@
     "supportId": "Support ID",
     "sendToWallet": "Send to a different wallet",
     "walletAddressOrEns": "Wallet address or ENS name",
+    "swapping": "Swapping",
+    "gasCost": "Gas cost",
+    "receiving": "Receiving",
+    "valueLoss": "Value loss",
     "tags": {
       "RECOMMENDED": "RECOMMENDED",
       "FASTEST": "FAST",
@@ -98,12 +99,16 @@
       "title": {
         "insufficientGas": "Insufficient gas",
         "deleteSwap": "Delete this swap?",
-        "deleteSwapHistory": "Delete swap history?"
+        "deleteSwapHistory": "Delete swap history?",
+        "deleteActiveSwaps": "Delete all active swaps?",
+        "highValueLoss": "High value loss"
       },
       "message": {
         "insufficientFunds": "You don't have enough funds to execute the swap.",
         "insufficientGas": "You need to add at least:",
-        "deleteSwap": "Swap history is only stored locally and can't be recovered if you delete it."
+        "deleteSwapHistory": "Swap history is only stored locally and can't be recovered if you delete it.",
+        "deleteActiveSwaps": "Active swaps are only stored locally and can't be recovered if you delete them.",
+        "highValueLoss": "The value of the received tokens is significantly lower than the swapped tokens and transaction cost."
       }
     },
     "error": {
@@ -179,6 +184,9 @@
       "title": "404",
       "text": "We couldn't find this page."
     },
-    "progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click this circle to update manually."
+    "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."
   }
 }

package/i18n/index.d.ts

@@ -25,6 +25,7 @@ export declare const resources: {
                 removeSwap: string;
                 done: string;
                 okay: string;
+                continue: string;
                 seeDetails: string;
                 tryAgain: string;
                 light: string;
@@ -47,10 +48,6 @@ export declare const resources: {
                 routes: string;
                 approximateCurrency: string;
                 currency: string;
-                sendToRecipient: string;
-                addressConfirmation: string;
-                gas: string;
-                minutes: string;
                 tokenSearch: string;
                 selectChain: string;
                 selectToken: string;
@@ -69,6 +66,10 @@ export declare const resources: {
                 supportId: string;
                 sendToWallet: string;
                 walletAddressOrEns: string;
+                swapping: string;
+                gasCost: string;
+                receiving: string;
+                valueLoss: string;
                 tags: {
                     RECOMMENDED: string;
                     FASTEST: string;
@@ -102,11 +103,15 @@ export declare const resources: {
                         insufficientGas: string;
                         deleteSwap: string;
                         deleteSwapHistory: string;
+                        deleteActiveSwaps: string;
+                        highValueLoss: string;
                     };
                     message: {
                         insufficientFunds: string;
                         insufficientGas: string;
-                        deleteSwap: string;
+                        deleteSwapHistory: string;
+                        deleteActiveSwaps: string;
+                        highValueLoss: string;
                     };
                 };
                 error: {
@@ -183,6 +188,9 @@ export declare const resources: {
                     text: string;
                 };
                 progressToNextUpdate: string;
+                numberOfSteps: string;
+                estimatedTime: string;
+                estimatedNetworkFee: string;
             };
         };
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.18.9",
+  "version": "1.20.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -45,25 +45,25 @@
     "@lifi/sdk": "^1.6.0",
     "@lifi/wallet-management": "^1.1.10",
     "@mui/icons-material": "^5.10.6",
-    "@mui/lab": "^5.0.0-alpha.101",
-    "@mui/material": "^5.10.7",
-    "@sentry/integrations": "^7.14.0",
-    "@sentry/react": "^7.14.0",
-    "@sentry/tracing": "^7.14.0",
-    "@tanstack/react-query": "^4.8.0",
+    "@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",
+    "@tanstack/react-query": "^4.10.3",
     "@tanstack/react-virtual": "^3.0.0-beta.18",
     "big.js": "^6.2.1",
-    "i18next": "^21.9.2",
+    "i18next": "^21.10.0",
     "immer": "^9.0.15",
     "microdiff": "^1.3.1",
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.36.1",
+    "react-hook-form": "^7.37.0",
     "react-i18next": "^11.18.6",
-    "react-router-dom": "^6.4.1",
+    "react-router-dom": "^6.4.2",
     "react-timer-hook": "^3.0.5",
-    "zustand": "^4.1.1"
+    "zustand": "^4.1.2"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",

package/pages/ActiveSwapsPage/ActiveSwapsPage.js

@@ -1,17 +1,34 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Container, List } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable consistent-return */
+import { DeleteOutline as DeleteIcon } from '@mui/icons-material';
+import { Button, Container, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, List, } from '@mui/material';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { ActiveSwapItem } from '../../components/ActiveSwaps';
+import { Dialog } from '../../components/Dialog';
+import { useHeaderActionStore } from '../../components/Header';
 import { useWallet } from '../../providers';
-import { useExecutingRoutesIds } from '../../stores';
+import { useExecutingRoutesIds, useRouteExecutionStore } from '../../stores';
 import { ActiveSwapsEmpty } from './ActiveSwapsEmpty';
 export const ActiveSwapsPage = () => {
+    const { t } = useTranslation();
     const { account } = useWallet();
     const executingRoutes = useExecutingRoutesIds(account.address);
+    const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes);
+    const [open, setOpen] = useState(false);
+    const toggleDialog = useCallback(() => {
+        setOpen((open) => !open);
+    }, []);
+    useEffect(() => {
+        if (executingRoutes.length) {
+            return useHeaderActionStore.getState().setAction(_jsx(IconButton, Object.assign({ size: "medium", edge: "end", onClick: toggleDialog }, { children: _jsx(DeleteIcon, {}) })));
+        }
+    }, [executingRoutes.length, toggleDialog]);
     if (!executingRoutes.length) {
         return _jsx(ActiveSwapsEmpty, {});
     }
-    return (_jsx(Container, Object.assign({ disableGutters: true }, { children: _jsx(List, Object.assign({ sx: {
-                paddingLeft: 1.5,
-                paddingRight: 1.5,
-            } }, { children: executingRoutes.map((routeId) => (_jsx(ActiveSwapItem, { routeId: routeId }, routeId))) })) })));
+    return (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsx(List, Object.assign({ sx: {
+                    paddingLeft: 1.5,
+                    paddingRight: 1.5,
+                } }, { children: executingRoutes.map((routeId) => (_jsx(ActiveSwapItem, { routeId: routeId }, routeId))) })), _jsxs(Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteActiveSwaps') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteActiveSwaps') }) }), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), _jsx(Button, Object.assign({ variant: "contained", onClick: () => deleteRoutes('active'), autoFocus: true }, { children: t('button.delete') }))] })] }))] })));
 };

package/pages/MainPage/MainPage.js

@@ -6,10 +6,10 @@ import { SelectChainAndToken } from '../../components/SelectChainAndToken';
 import { SendToWallet, SendToWalletButton, } from '../../components/SendToWallet';
 import { SwapInput } from '../../components/SwapInput';
 import { SwapRoutes } from '../../components/SwapRoutes';
-import { useWidgetConfig } from '../../providers';
+import { useExpandableVariant } from '../../hooks';
 import { FormContainer } from './MainPage.style';
 import { MainSwapButton } from './MainSwapButton';
 export const MainPage = () => {
-    const { variant } = useWidgetConfig();
-    return (_jsxs(FormContainer, Object.assign({ disableGutters: true }, { children: [_jsx(ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), _jsx(SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 3 }, { children: _jsx(SwapInput, { formType: "from" }) })), variant !== 'expandable' ? _jsx(SwapRoutes, { mx: 3, mb: 3 }) : null, _jsx(GasSufficiencyMessage, { mx: 3, mb: 3 }), _jsxs(Box, Object.assign({ mx: 3, mb: 1 }, { children: [_jsx(SendToWallet, { mb: 3 }), _jsxs(Box, Object.assign({ sx: { display: 'flex' } }, { children: [_jsx(MainSwapButton, {}), _jsx(SendToWalletButton, {})] }))] }))] })));
+    const expandable = useExpandableVariant();
+    return (_jsxs(FormContainer, Object.assign({ disableGutters: true }, { children: [_jsx(ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), _jsx(SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 3 }, { children: _jsx(SwapInput, { formType: "from" }) })), !expandable ? _jsx(SwapRoutes, { mx: 3, mb: 3 }) : null, _jsx(GasSufficiencyMessage, { mx: 3, mb: 3 }), _jsxs(Box, Object.assign({ mx: 3, mb: 1 }, { children: [_jsx(SendToWallet, { mb: 3 }), _jsxs(Box, Object.assign({ sx: { display: 'flex' } }, { children: [_jsx(MainSwapButton, {}), _jsx(SendToWalletButton, {})] }))] }))] })));
 };

package/pages/SelectWalletPage/SelectWalletPage.js

@@ -45,5 +45,5 @@ export const SelectWalletPage = () => {
                     paddingRight: 1.5,
                 } }, { children: supportedWallets.map((wallet) => (_jsxs(ListItemButton, Object.assign({ onClick: () => handleConnect(wallet), disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: wallet.icon.src || wallet.icon, alt: wallet.name }, { children: wallet.name[0] })) }), _jsx(ListItemText, { primary: wallet.name })] }), wallet.name))) })), _jsxs(Dialog, Object.assign({ open: walletIdentity.show, onClose: closeDialog }, { children: [_jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('wallet.extensionNotFound', {
                                 name: (_a = walletIdentity.wallet) === null || _a === void 0 ? void 0 : _a.name,
-                            }) }) }), _jsx(DialogActions, { children: _jsx(Button, Object.assign({ onClick: closeDialog, autoFocus: true }, { children: t('button.ok') })) })] }))] })));
+                            }) }) }), _jsx(DialogActions, { children: _jsx(Button, Object.assign({ variant: "contained", onClick: closeDialog, autoFocus: true }, { children: t('button.ok') })) })] }))] })));
 };

package/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -43,7 +43,7 @@ export const SwapDetailsPage = () => {
         yield navigator.clipboard.writeText((_c = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.id) !== null && _c !== void 0 ? _c : '');
     });
     useEffect(() => {
-        return useHeaderActionStore.getState().setAction(_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: _jsx(DeleteIcon, {}) })));
+        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);
     return (_jsxs(Container, { children: [_jsxs(Box, Object.assign({ sx: {
@@ -58,5 +58,5 @@ export const SwapDetailsPage = () => {
             }), _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", "aria-label": "settings", 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.deleteSwap') }) }), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), _jsx(Button, Object.assign({ 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: 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') }))] })] }))] }));
 };

package/pages/SwapHistoryPage/SwapHistoryPage.js

@@ -22,11 +22,11 @@ export const SwapHistoryPage = () => {
     }, []);
     useEffect(() => {
         if (swaps.length) {
-            return useHeaderActionStore.getState().setAction(_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: _jsx(DeleteIcon, {}) })));
+            return useHeaderActionStore.getState().setAction(_jsx(IconButton, Object.assign({ size: "medium", edge: "end", onClick: toggleDialog }, { children: _jsx(DeleteIcon, {}) })));
         }
     }, [swaps.length, toggleDialog]);
     if (!swaps.length) {
         return _jsx(SwapHistoryEmpty, {});
     }
-    return (_jsxs(Container, { children: [_jsx(Stack, Object.assign({ spacing: 2, mt: 1 }, { children: swaps.length ? (swaps.map(({ route }) => (_jsx(SwapHistoryItem, { route: route }, route.id)))) : (_jsx(SwapHistoryEmpty, {})) })), _jsxs(Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteSwapHistory') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteSwap') }) }), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), _jsx(Button, Object.assign({ onClick: deleteRoutes, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
+    return (_jsxs(Container, { children: [_jsx(Stack, Object.assign({ spacing: 2, mt: 1 }, { children: swaps.length ? (swaps.map(({ route }) => (_jsx(SwapHistoryItem, { route: route }, route.id)))) : (_jsx(SwapHistoryEmpty, {})) })), _jsxs(Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteSwapHistory') }), _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: () => deleteRoutes('completed'), autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
 };

package/pages/SwapPage/StatusBottomSheet.js

@@ -10,15 +10,15 @@ import { Token } from '../../components/Token';
 import { getProcessMessage, useChains, useNavigateBack, useTokenBalance, } from '../../hooks';
 import { SwapFormKey } from '../../providers';
 import { navigationRoutes, shortenWalletAddress } from '../../utils';
-import { IconCircle, IconContainer, iconStyles, } from './StatusBottomSheet.style';
+import { IconCircle, IconContainer } from './StatusBottomSheet.style';
 export const StatusBottomSheet = ({ status, route, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const { t } = useTranslation();
     const { navigateBack, navigate } = useNavigateBack();
     const ref = useRef(null);
     const { getChainById } = useChains();
-    const { token, refetch, refetchNewBalance, refetchAllBalances } = useTokenBalance(route.toToken, route.toAddress);
     const { setValue } = useFormContext();
+    const { token, refetch, refetchNewBalance, refetchAllBalances } = useTokenBalance(route.toToken, route.toAddress);
     const clearFromAmount = () => {
         refetchAllBalances();
         setValue(SwapFormKey.FromAmount, '');
@@ -30,7 +30,7 @@ export const StatusBottomSheet = ({ status, route, }) => {
     const handleClose = () => {
         var _a;
         clearFromAmount();
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.closeDrawer();
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
     };
     const handleSeeDetails = () => {
         handleClose();
@@ -73,8 +73,8 @@ export const StatusBottomSheet = ({ status, route, }) => {
                 refetchNewBalance();
                 refetch();
             }
-            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.openDrawer();
+            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.open();
         }
     }, [refetch, refetchNewBalance, status]);
-    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (_jsx(InfoIcon, { color: "primary", sx: iconStyles })) : null, status === 'success' ? (_jsx(DoneIcon, { color: "success", sx: iconStyles })) : null, status === 'error' ? (_jsx(WarningIcon, { color: "error", sx: iconStyles })) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_g = (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.estimate.toAmount) !== null && _g !== void 0 ? _g : route.toAmount }), py: 1 })) : null] }), _jsx(Typography, Object.assign({ pt: 2, pb: 1 }, { children: message })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsxs(Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.okay') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.tryAgain') : null] })) })), status === 'success' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "outlined", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
+    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? _jsx(InfoIcon, { color: "primary" }) : null, status === 'success' ? _jsx(DoneIcon, { color: "success" }) : null, status === 'error' ? _jsx(WarningIcon, { color: "error" }) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_g = (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.estimate.toAmount) !== null && _g !== void 0 ? _g : route.toAmount }), py: 1 })) : null] }), _jsx(Typography, Object.assign({ py: 1 }, { children: message })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsxs(Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.okay') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.seeDetails') : null] })) })), status === 'success' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "text", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
 };

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

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

package/pages/SwapPage/StatusBottomSheet.style.js

@@ -1,13 +1,15 @@
 import { Box } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { alpha, darken, styled } from '@mui/material/styles';
 const getStatusColor = (status, theme) => {
     switch (status) {
         case 'success':
-            return theme.palette.success.main;
+            return { color: theme.palette.success.main, alpha: 0.15, darken: 0 };
         case 'error':
-            return theme.palette.error.main;
+            return { color: theme.palette.error.main, alpha: 0.2, darken: 0 };
+        case 'warning':
+            return { color: theme.palette.warning.main, alpha: 0.7, darken: 0.4 };
         default:
-            return theme.palette.primary.main;
+            return { color: theme.palette.primary.main, alpha: 0.15, darken: 0 };
     }
 };
 export const IconContainer = styled(Box)(({ theme }) => ({
@@ -17,16 +19,20 @@ export const IconContainer = styled(Box)(({ theme }) => ({
 }));
 export const IconCircle = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'status',
-})(({ theme, status }) => ({
-    border: `3px solid ${getStatusColor(status, theme)}`,
-    borderRadius: '50%',
-    width: 64,
-    height: 64,
-    display: 'grid',
-    position: 'relative',
-    placeItems: 'center',
-}));
-export const iconStyles = {
-    position: 'absolute',
-    fontSize: '2.5rem',
-};
+})(({ theme, status }) => {
+    const { color, alpha: alphaValue, darken: darkenValue, } = getStatusColor(status, theme);
+    return {
+        backgroundColor: alpha(color, alphaValue),
+        borderRadius: '50%',
+        width: 64,
+        height: 64,
+        display: 'grid',
+        position: 'relative',
+        placeItems: 'center',
+        '& > svg': {
+            color: darken(color, darkenValue),
+            width: 32,
+            height: 32,
+        },
+    };
+});