@lifi/widget 1.24.0 → 1.25.0

package/components/SwapInput/SwapInput.js

@@ -1,49 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
+import { useRef } from 'react';
+import { useController } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useChain, useToken } from '../../hooks';
 import { SwapFormKeyHelper, useWidgetConfig } from '../../providers';
 import { DisabledUI } from '../../types';
-import { fitInputText, formatAmount } from '../../utils';
+import { formatAmount } from '../../utils';
 import { Card, CardTitle } from '../Card';
-import { TokenAvatar, TokenAvatarSkeleton } from '../TokenAvatar';
+import { FitInputText } from './FitInputText';
 import { FormPriceHelperText } from './FormPriceHelperText';
-import { FormControl, Input, maxInputFontSize, minInputFontSize, } from './SwapInput.style';
-import { SwapInputAdornment } from './SwapInputAdornment';
+import { FormControl, Input } from './SwapInput.style';
+import { SwapInputEndAdornment } from './SwapInputEndAdornment';
+import { SwapInputStartAdornment } from './SwapInputStartAdornment';
 export const SwapInput = ({ formType }) => {
     const { t } = useTranslation();
-    const { setValue } = useFormContext();
-    const { disabledUI } = useWidgetConfig();
-    const ref = useRef(null);
     const amountKey = SwapFormKeyHelper.getAmountKey(formType);
-    const [amount, chainId, tokenAddress] = useWatch({
-        name: [
-            amountKey,
-            SwapFormKeyHelper.getChainKey(formType),
-            SwapFormKeyHelper.getTokenKey(formType),
-        ],
+    const { field: { onChange, onBlur, value }, } = useController({
+        name: amountKey,
     });
-    const { chain } = useChain(chainId);
-    const { token } = useToken(chainId, tokenAddress);
-    const isSelected = !!(chain && token);
+    const { disabledUI } = useWidgetConfig();
+    const ref = useRef(null);
     const handleChange = (event) => {
         const { value } = event.target;
         const formattedAmount = formatAmount(value, true);
-        setValue(amountKey, formattedAmount, {
-            shouldTouch: true,
-        });
+        onChange(formattedAmount);
     };
     const handleBlur = (event) => {
         const { value } = event.target;
         const formattedAmount = formatAmount(value);
-        setValue(amountKey, formattedAmount);
+        onChange(formattedAmount);
+        onBlur();
     };
-    useLayoutEffect(() => {
-        fitInputText(maxInputFontSize, minInputFontSize, ref.current);
-    }, [amount]);
     const disabled = disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(DisabledUI.FromAmount);
-    return (_jsxs(Card, { children: [_jsx(CardTitle, { children: t('swap.fromAmount') }), _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain, sx: { marginLeft: 2 } })) : (_jsx(TokenAvatarSkeleton, { sx: { marginLeft: 2 } })), endAdornment: !disabled ? _jsx(SwapInputAdornment, { formType: formType }) : undefined, inputProps: {
+    return (_jsxs(Card, { children: [_jsx(CardTitle, { children: t('swap.fromAmount') }), _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: _jsx(SwapInputStartAdornment, { formType: formType }), endAdornment: !disabled ? (_jsx(SwapInputEndAdornment, { formType: formType })) : undefined, inputProps: {
                             inputMode: 'decimal',
-                        }, onChange: handleChange, onBlur: handleBlur, value: amount, name: amountKey, disabled: disabled, required: true }), _jsx(FormPriceHelperText, { selected: isSelected, formType: formType })] }))] }));
+                        }, onChange: handleChange, onBlur: handleBlur, value: value, name: amountKey, disabled: disabled, required: true }), _jsx(FormPriceHelperText, { formType: formType })] })), _jsx(FitInputText, { ref: ref, formType: formType })] }));
 };

package/components/SwapInput/SwapInput.style.d.ts

@@ -10,7 +10,7 @@ export declare const FormControl: import("@emotion/styled").StyledComponent<{
     fullWidth?: boolean | undefined;
     focused?: boolean | undefined;
     hiddenLabel?: boolean | undefined;
-    margin?: "none" | "normal" | "dense" | undefined;
+    margin?: "normal" | "none" | "dense" | undefined;
     required?: boolean | undefined;
     size?: "small" | "medium" | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;

package/components/SwapInput/SwapInputEndAdornment.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { SwapFormTypeProps } from '../../providers';
+export declare const SwapInputEndAdornment: ({ formType }: SwapFormTypeProps) => JSX.Element;

package/components/SwapInput/{SwapInputAdornment.js → SwapInputEndAdornment.js}

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useTokenAddressBalance } from '../../hooks';
 import { SwapFormKeyHelper } from '../../providers';
 import { Button } from './SwapInputAdornment.style';
-export const SwapInputAdornment = ({ formType }) => {
+export const SwapInputEndAdornment = ({ formType }) => {
     const { t } = useTranslation();
     const { setValue } = useFormContext();
     const [chainId, tokenAddress] = useWatch({

package/components/SwapInput/SwapInputStartAdornment.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { SwapFormTypeProps } from '../../providers';
+export declare const SwapInputStartAdornment: React.FC<SwapFormTypeProps>;

package/components/SwapInput/SwapInputStartAdornment.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useWatch } from 'react-hook-form';
+import { useChain, useToken } from '../../hooks';
+import { SwapFormKeyHelper } from '../../providers';
+import { TokenAvatar, TokenAvatarSkeleton } from '../TokenAvatar';
+export const SwapInputStartAdornment = ({ formType, }) => {
+    const [chainId, tokenAddress] = useWatch({
+        name: [
+            SwapFormKeyHelper.getChainKey(formType),
+            SwapFormKeyHelper.getTokenKey(formType),
+        ],
+    });
+    const { chain } = useChain(chainId);
+    const { token } = useToken(chainId, tokenAddress);
+    const isSelected = !!(chain && token);
+    return isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain, sx: { marginLeft: 2 } })) : (_jsx(TokenAvatarSkeleton, { sx: { marginLeft: 2 } }));
+};

package/components/SwapRouteCard/SwapRouteCard.style.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
     gutterBottom?: boolean | undefined;

package/components/SwapRoutes/SwapRoutes.style.d.ts

@@ -34,7 +34,7 @@ export declare const Header: import("@emotion/styled").StyledComponent<import("@
 export declare const Stack: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     ref?: import("react").Ref<unknown> | undefined;
     children?: import("react").ReactNode;
-    direction?: import("@mui/system").ResponsiveStyleValue<"row" | "column" | "column-reverse" | "row-reverse"> | undefined;
+    direction?: import("@mui/system").ResponsiveStyleValue<"column" | "column-reverse" | "row" | "row-reverse"> | undefined;
     spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
     divider?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;

package/components/Token/Token.style.d.ts

@@ -10,7 +10,7 @@ export declare const TextSecondaryContainer: import("@emotion/styled").StyledCom
     connected?: boolean | undefined;
 }, {}, {}>;
 export declare const TextSecondary: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
     gutterBottom?: boolean | undefined;

package/components/TokenList/useTokenSelect.js

@@ -1,18 +1,14 @@
 import { useCallback } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useController, useFormContext } from 'react-hook-form';
 import { SwapFormKeyHelper } from '../../providers';
 export const useTokenSelect = (formType, onClick) => {
+    const tokenKey = SwapFormKeyHelper.getTokenKey(formType);
+    const { field: { onChange, onBlur }, } = useController({ name: tokenKey });
     const { setValue, getValues } = useFormContext();
     return useCallback((tokenAddress, chainId) => {
+        onChange(tokenAddress);
+        onBlur();
         const selectedChainId = chainId !== null && chainId !== void 0 ? chainId : getValues(SwapFormKeyHelper.getChainKey(formType));
-        setValue(SwapFormKeyHelper.getTokenKey(formType), tokenAddress, {
-            shouldTouch: true,
-        });
-        // Set chain again to trigger URL builder update
-        setValue(SwapFormKeyHelper.getChainKey(formType), selectedChainId, {
-            shouldTouch: true,
-        });
-        setValue(SwapFormKeyHelper.getAmountKey(formType), '');
         const oppositeFormType = formType === 'from' ? 'to' : 'from';
         const [selectedOppositeToken, selectedOppositeChainId] = getValues([
             SwapFormKeyHelper.getTokenKey(oppositeFormType),
@@ -21,9 +17,16 @@ export const useTokenSelect = (formType, onClick) => {
         if (selectedOppositeToken === tokenAddress &&
             selectedOppositeChainId === selectedChainId) {
             setValue(SwapFormKeyHelper.getTokenKey(oppositeFormType), '', {
+                shouldDirty: true,
                 shouldTouch: true,
             });
         }
+        // Set chain again to trigger URL builder update
+        setValue(SwapFormKeyHelper.getChainKey(formType), selectedChainId, {
+            shouldDirty: true,
+            shouldTouch: true,
+        });
+        setValue(SwapFormKeyHelper.getAmountKey(formType), '');
         onClick === null || onClick === void 0 ? void 0 : onClick();
-    }, [formType, getValues, onClick, setValue]);
+    }, [formType, getValues, onBlur, onChange, onClick, setValue]);
 };

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/useGasSufficiency.js

@@ -11,7 +11,7 @@ import { useQuery } from '@tanstack/react-query';
 import Big from 'big.js';
 import { useChains } from '.';
 import { useWallet } from '../providers';
-import { isRouteCompleted } from '../stores';
+import { isRouteDone } from '../stores';
 import { useTokenBalance } from './useTokenBalance';
 const refetchInterval = 30000;
 export const useGasSufficiency = (route) => {
@@ -75,7 +75,7 @@ export const useGasSufficiency = (route) => {
     });
     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)) {
+        if (!account.address || !fromToken || !route || isRouteDone(route)) {
             return null;
         }
         let currentTokenBalance = Big((_c = fromToken === null || fromToken === void 0 ? void 0 : fromToken.amount) !== null && _c !== void 0 ? _c : 0);

package/hooks/useRouteExecution.js

@@ -11,7 +11,7 @@ import { useMutation } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef } from 'react';
 import shallow from 'zustand/shallow';
 import { useLiFi, useWallet } from '../providers';
-import { getUpdatedProcess, isRouteActive, isRouteCompleted, isRouteFailed, useRouteExecutionStore, } from '../stores';
+import { getUpdatedProcess, isRouteActive, isRouteDone, isRouteFailed, useRouteExecutionStore, } from '../stores';
 import { WidgetEvent } from '../types/events';
 import { deepClone } from '../utils';
 import { useWidgetEvents } from './useWidgetEvents';
@@ -36,7 +36,7 @@ export const useRouteExecution = (routeId, executeInBackground) => {
                 process,
             });
         }
-        if (isRouteCompleted(clonedUpdatedRoute)) {
+        if (isRouteDone(clonedUpdatedRoute)) {
             emitter.emit(WidgetEvent.RouteExecutionCompleted, clonedUpdatedRoute);
         }
         if (isRouteFailed(clonedUpdatedRoute) && process) {

package/hooks/useSwapRoutes.js

@@ -16,9 +16,9 @@ import { SwapFormKey, useLiFi, useWallet, useWidgetConfig } from '../providers';
 import { useSettings } from '../stores';
 const refetchTime = 60000;
 export const useSwapRoutes = () => {
-    var _a;
+    var _a, _b;
     const lifi = useLiFi();
-    const { variant } = useWidgetConfig();
+    const { variant, sdkConfig } = useWidgetConfig();
     const { account, provider } = useWallet();
     const queryClient = useQueryClient();
     const { slippage, enabledBridges, enabledExchanges, routePriority } = useSettings([
@@ -62,22 +62,25 @@ export const useSwapRoutes = () => {
         enabledExchanges,
         routePriority,
         variant,
+        (_a = sdkConfig === null || sdkConfig === void 0 ? void 0 : sdkConfig.defaultRouteOptions) === null || _a === void 0 ? void 0 : _a.allowSwitchChain,
     ];
-    const previousDataUpdatedAt = (_a = queryClient.getQueryState(queryKey)) === null || _a === void 0 ? void 0 : _a.dataUpdatedAt;
+    const previousDataUpdatedAt = (_b = queryClient.getQueryState(queryKey)) === null || _b === void 0 ? void 0 : _b.dataUpdatedAt;
     const refetchInterval = previousDataUpdatedAt
         ? Math.min(Math.abs(refetchTime - (Date.now() - previousDataUpdatedAt)), refetchTime)
         : refetchTime;
-    const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } = useQuery(queryKey, ({ queryKey: [_, fromAddress, fromChainId, fromTokenAddress, fromTokenAmount, toChainId, toTokenAddress, toAddress, slippage, enabledBridges, enabledExchanges, routePriority, variant,], signal, }) => __awaiter(void 0, void 0, void 0, function* () {
-        var _b, _c;
+    const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } = useQuery(queryKey, ({ queryKey: [_, fromAddress, fromChainId, fromTokenAddress, fromTokenAmount, toChainId, toTokenAddress, toAddress, slippage, enabledBridges, enabledExchanges, routePriority, variant, allowSwitchChain,], signal, }) => __awaiter(void 0, void 0, void 0, function* () {
+        var _c, _d;
         let toWalletAddress;
         try {
             toWalletAddress =
-                (_b = (yield (provider === null || provider === void 0 ? void 0 : provider.resolveName(toAddress)))) !== null && _b !== void 0 ? _b : (isAddress(toAddress) ? toAddress : fromAddress);
+                (_c = (yield (provider === null || provider === void 0 ? void 0 : provider.resolveName(toAddress)))) !== null && _c !== void 0 ? _c : (isAddress(toAddress) ? toAddress : fromAddress);
         }
-        catch (_d) {
+        catch (_e) {
             toWalletAddress = isAddress(toAddress) ? toAddress : fromAddress;
         }
-        const fromAmount = Big(Number(fromTokenAmount) * Math.pow(10, ((_c = fromToken === null || fromToken === void 0 ? void 0 : fromToken.decimals) !== null && _c !== void 0 ? _c : 0))).toString();
+        const fromAmount = Big(fromTokenAmount)
+            .mul(Math.pow(10, ((_d = fromToken === null || fromToken === void 0 ? void 0 : fromToken.decimals) !== null && _d !== void 0 ? _d : 0)))
+            .toString();
         const formattedSlippage = parseFloat(slippage) / 100;
         return lifi.getRoutes({
             fromChainId,
@@ -96,7 +99,7 @@ export const useSwapRoutes = () => {
                     allow: enabledExchanges,
                 },
                 order: routePriority,
-                allowSwitchChain: variant !== 'refuel',
+                allowSwitchChain: variant === 'refuel' ? false : allowSwitchChain,
             },
         }, { signal });
     }), {

package/hooks/useTools.d.ts

@@ -2,7 +2,7 @@ import type { Bridge, Exchange } from '@lifi/sdk';
 interface WidgetBridge extends Omit<Bridge, 'key'> {
     key: string;
 }
-declare type FormattedTool<T, K extends keyof T> = Record<string, Pick<T, K>>;
+type FormattedTool<T, K extends keyof T> = Record<string, Pick<T, K>>;
 export declare const useTools: () => {
     tools: import("@lifi/sdk").ToolsResponse | undefined;
     formattedTools: {

package/i18n/en.json

@@ -148,10 +148,12 @@
     "stepSwapAndBridge": "Swap and bridge",
     "success": {
       "message": {
-        "swapSuccessful": "There are now {{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}} in wallet {{walletAddress}} on {{chainName}} chain."
+        "swapPartiallySuccessful": "We've tried to complete the swap, but {{tool}} ran out of liquidity for {{tokenSymbol}} token.",
+        "swapSuccessful": "There are now {{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}} in {{walletAddress}} wallet on {{chainName}} chain."
       },
       "title": {
         "gasSwapSuccessful": "Gas swap successful",
+        "swapPartiallySuccessful": "Swap partially successful",
         "swapSuccessful": "Swap successful"
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.24.0",
+  "version": "1.25.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,25 +42,25 @@
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@lifi/sdk": "^1.6.3",
-    "@lifi/wallet-management": "^1.2.0",
-    "@mui/icons-material": "^5.10.9",
-    "@mui/lab": "^5.0.0-alpha.107",
-    "@mui/material": "^5.10.13",
+    "@lifi/sdk": "^1.6.4",
+    "@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.19.0",
     "@sentry/react": "^7.19.0",
     "@sentry/tracing": "^7.19.0",
-    "@tanstack/react-query": "^4.14.6",
-    "@tanstack/react-virtual": "^3.0.0-beta.22",
+    "@tanstack/react-query": "^4.16.1",
+    "@tanstack/react-virtual": "^3.0.0-beta.23",
     "big.js": "^6.2.1",
-    "i18next": "^22.0.4",
+    "i18next": "22.0.4",
     "i18next-browser-languagedetector": "^7.0.1",
     "immer": "^9.0.16",
     "microdiff": "^1.3.1",
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.39.3",
+    "react-hook-form": "^7.39.4",
     "react-i18next": "^12.0.0",
     "react-router-dom": "^6.4.3",
     "react-timer-hook": "^3.0.5",

package/pages/SettingsPage/RoutePrioritySelect.js

@@ -10,7 +10,8 @@ export const RoutePrioritySelect = () => {
     const { t } = useTranslation();
     const setValue = useSettingsStore((state) => state.setValue);
     const { routePriority } = useSettings(['routePriority']);
-    return (_jsxs(Card, { children: [_jsx(CardTitle, { children: t(`settings.routePriority`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ MenuProps: { elevation: 2 }, value: routePriority, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: Orders.map((order) => {
+    const value = routePriority !== null && routePriority !== void 0 ? routePriority : '';
+    return (_jsxs(Card, { children: [_jsx(CardTitle, { children: t(`settings.routePriority`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ MenuProps: { elevation: 2 }, value: value, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: Orders.map((order) => {
                         const tag = t(`swap.tags.${order.toUpperCase()}`);
                         const tagName = `${tag[0]}${tag.slice(1).toLowerCase()}`;
                         return (_jsx(MenuItem, Object.assign({ value: order }, { children: tagName }), order));

package/pages/SettingsPage/SlippageInput.js

@@ -19,7 +19,8 @@ export const SlippageInput = () => {
         const { value } = event.target;
         setValue('slippage', formatSlippage(value, defaultValue.current));
     };
+    const value = slippage !== null && slippage !== void 0 ? slippage : '';
     return (_jsxs(Card, { children: [_jsx(CardTitle, { children: t(`settings.slippage`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Input, { size: "small", placeholder: t(`settings.slippage`), endAdornment: _jsx(InputAdornment, Object.assign({ position: "end" }, { children: "%" })), autoComplete: "off", inputProps: {
                         inputMode: 'decimal',
-                    }, onChange: handleChange, onBlur: handleBlur, value: slippage }) }))] }));
+                    }, onChange: handleChange, onBlur: handleBlur, value: value }) }))] }));
 };

package/pages/SwapPage/StatusBottomSheet.js

@@ -9,10 +9,11 @@ import { BottomSheet } from '../../components/BottomSheet';
 import { Token } from '../../components/Token';
 import { getProcessMessage, useChains, useNavigateBack, useTokenBalance, } from '../../hooks';
 import { SwapFormKey } from '../../providers';
-import { navigationRoutes, shortenWalletAddress } from '../../utils';
+import { RouteExecutionStatus } from '../../stores';
+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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const { t } = useTranslation();
     const { navigateBack, navigate } = useNavigateBack();
     const ref = useRef(null);
@@ -28,6 +29,22 @@ export const StatusBottomSheet = ({ status, route, }) => {
         clearFromAmount();
         navigateBack();
     };
+    const handlePartialDone = () => {
+        clearFromAmount();
+        if (toToken.chainId !== route.toToken.chainId &&
+            toToken.address !== route.toToken.address) {
+            setValue(SwapFormKey.FromAmount, formatTokenAmount(toToken.amount, toToken.decimals), { shouldTouch: true });
+            setValue(SwapFormKey.FromChain, toToken.chainId, { shouldTouch: true });
+            setValue(SwapFormKey.FromToken, toToken.address, { shouldTouch: true });
+            setValue(SwapFormKey.ToChain, route.toToken.chainId, {
+                shouldTouch: true,
+            });
+            setValue(SwapFormKey.ToToken, route.toToken.address, {
+                shouldTouch: true,
+            });
+        }
+        navigateBack();
+    };
     const handleClose = () => {
         var _a;
         clearFromAmount();
@@ -41,26 +58,50 @@ export const StatusBottomSheet = ({ status, route, }) => {
         });
     };
     let title;
-    let message;
+    let primaryMessage;
+    let secondaryMessage;
+    let handlePrimaryButton = handleDone;
     switch (status) {
-        case 'success':
+        case RouteExecutionStatus.Done: {
             title = t('swap.success.title.swapSuccessful');
-            message = t('swap.success.message.swapSuccessful', {
-                amount: token === null || token === void 0 ? void 0 : token.amount,
-                tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol,
-                chainName: (_j = getChainById(route.toChainId)) === null || _j === void 0 ? void 0 : _j.name,
-                walletAddress: shortenWalletAddress(route.toAddress),
+            if (token) {
+                primaryMessage = t('swap.success.message.swapSuccessful', {
+                    amount: token.amount,
+                    tokenSymbol: token.symbol,
+                    chainName: (_j = getChainById(token.chainId)) === null || _j === void 0 ? void 0 : _j.name,
+                    walletAddress: shortenWalletAddress(route.toAddress),
+                });
+            }
+            handlePrimaryButton = handleDone;
+            break;
+        }
+        case RouteExecutionStatus.Done | RouteExecutionStatus.Partial: {
+            title = t('swap.success.title.swapPartiallySuccessful');
+            primaryMessage = t('swap.success.message.swapPartiallySuccessful', {
+                tool: (_k = route.steps.at(-1)) === null || _k === void 0 ? void 0 : _k.toolDetails.name,
+                tokenSymbol: (_l = route.steps.at(-1)) === null || _l === void 0 ? void 0 : _l.action.toToken.symbol,
             });
+            if (token) {
+                secondaryMessage = t('swap.success.message.swapSuccessful', {
+                    amount: token.amount,
+                    tokenSymbol: token.symbol,
+                    chainName: (_m = getChainById(token.chainId)) === null || _m === void 0 ? void 0 : _m.name,
+                    walletAddress: shortenWalletAddress(route.toAddress),
+                });
+            }
+            handlePrimaryButton = handlePartialDone;
             break;
-        case 'error': {
+        }
+        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 = (_k = step === null || step === void 0 ? void 0 : step.execution) === null || _k === void 0 ? void 0 : _k.process.find((process) => process.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');
             if (!step || !process) {
                 break;
             }
             const processMessage = getProcessMessage(t, getChainById, step, process);
             title = processMessage.title;
-            message = processMessage.message;
+            primaryMessage = processMessage.message;
+            handlePrimaryButton = handleClose;
             break;
         }
         default:
@@ -68,14 +109,20 @@ export const StatusBottomSheet = ({ status, route, }) => {
     }
     useEffect(() => {
         var _a, _b;
-        if ((status === 'success' || status === 'error') &&
+        const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done);
+        if ((hasSuccessFlag || hasEnumFlag(status, RouteExecutionStatus.Failed)) &&
             !((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isOpen())) {
-            if (status === 'success') {
+            if (hasSuccessFlag) {
                 refetchNewBalance();
                 refetch();
             }
             (_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" }) : 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: toToken, py: 1, disableDescription: true })) : 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.ok') : 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", onClick: handleSeeDetails, fullWidth: true }, { 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 === 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)
+                                ? t('button.done')
+                                : null, status === RouteExecutionStatus.Failed
+                                ? t('button.seeDetails')
+                                : null] })) })), hasEnumFlag(status, RouteExecutionStatus.Done) ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "text", onClick: handleSeeDetails, fullWidth: true }, { children: t('button.seeDetails') })) }))) : null] })) })));
 };

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import type { Theme } from '@mui/material';
-import type { RouteExecutionStatus } from '../../stores';
+import { RouteExecutionStatus } from '../../stores';
+type StatusColor = RouteExecutionStatus | 'warning';
 export declare const IconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
     children?: import("react").ReactNode;
     component?: import("react").ElementType<any> | undefined;
@@ -17,5 +18,6 @@ export declare const IconCircle: import("@emotion/styled").StyledComponent<impor
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, 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;
+    status: StatusColor;
 }, {}, {}>;
+export {};

package/pages/SwapPage/StatusBottomSheet.style.js

@@ -1,11 +1,14 @@
 import { Box } from '@mui/material';
 import { alpha, darken, styled } from '@mui/material/styles';
+import { RouteExecutionStatus } from '../../stores';
 const getStatusColor = (status, theme) => {
     switch (status) {
-        case 'success':
+        case RouteExecutionStatus.Done:
             return { color: theme.palette.success.main, alpha: 0.15, darken: 0 };
-        case 'error':
+        case RouteExecutionStatus.Failed:
             return { color: theme.palette.error.main, alpha: 0.2, 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 };
         default:

package/pages/SwapPage/SwapPage.js

@@ -20,6 +20,7 @@ import { StepDivider } from '../../components/StepDivider';
 import { SwapButton } from '../../components/SwapButton';
 import { useNavigateBack, useRouteExecution } from '../../hooks';
 import { SwapFormKey } from '../../providers';
+import { RouteExecutionStatus } from '../../stores';
 import { StatusBottomSheet } from './StatusBottomSheet';
 import { Container } from './SwapPage.style';
 import { getTokenValueLossThreshold, TokenValueBottomSheet, } from './TokenValueBottomSheet';
@@ -40,7 +41,7 @@ export const SwapPage = () => {
     }, [executeRoute, setValue]);
     const handleSwapClick = () => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
-        if (status === 'idle') {
+        if (status === RouteExecutionStatus.Idle) {
             const thresholdExceeded = getTokenValueLossThreshold(route);
             if (thresholdExceeded) {
                 (_a = tokenValueBottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.open();
@@ -49,7 +50,7 @@ export const SwapPage = () => {
                 handleExecuteRoute();
             }
         }
-        if (status === 'error') {
+        if (status === RouteExecutionStatus.Failed) {
             restartRoute();
         }
     });
@@ -59,9 +60,9 @@ export const SwapPage = () => {
     };
     const getSwapButtonText = () => {
         switch (status) {
-            case 'idle':
+            case RouteExecutionStatus.Idle:
                 return t('button.startSwap');
-            case 'error':
+            case RouteExecutionStatus.Failed:
                 return t('button.restartSwap');
             default:
                 return '';
@@ -74,9 +75,10 @@ export const SwapPage = () => {
                 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 === 'idle' || status === 'error' ? (_jsxs(_Fragment, { children: [_jsx(GasSufficiencyMessage, { route: route, mt: 2 }), _jsxs(Box, Object.assign({ mt: 2, display: "flex" }, { children: [_jsx(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, 
+            }), 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 === 'error' ? (_jsx(Tooltip, Object.assign({ title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true }, { children: _jsx(Button, Object.assign({ onClick: handleRemoveRoute, sx: {
+                                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] }));

package/pages/SwapRoutesPage/SwapRoutesPage.style.d.ts

@@ -2,7 +2,7 @@
 export declare const Stack: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     ref?: import("react").Ref<unknown> | undefined;
     children?: import("react").ReactNode;
-    direction?: import("@mui/system").ResponsiveStyleValue<"row" | "column" | "column-reverse" | "row-reverse"> | undefined;
+    direction?: import("@mui/system").ResponsiveStyleValue<"column" | "column-reverse" | "row" | "row-reverse"> | undefined;
     spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
     divider?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;