@lifi/widget 1.23.1 → 1.25.0

package/cjs/i18n/uk.json

@@ -10,6 +10,7 @@
     "delete": "Видалити",
     "disconnectWallet": "Відключити гаманець",
     "done": "Готово",
+    "getGas": "Отримати газ",
     "hide": "Сховати",
     "lifiSwap": "LI.FI Swap",
     "light": "Світла",
@@ -21,6 +22,7 @@
     "reviewSwap": "Переглянути своп",
     "seeDetails": "Детальніше",
     "showAll": "Показати всі",
+    "startGasSwap": "Почати своп газу",
     "startSwap": "Почати своп",
     "swap": "Своп",
     "tryAgain": "Спробувати ще раз"
@@ -32,6 +34,8 @@
   "header": {
     "activeSwaps": "Активні свопи",
     "from": "Своп з",
+    "gas": "Газ",
+    "gasSwap": "Своп газу",
     "routes": "Ви отримуєте",
     "selectChain": "Оберіть чейн",
     "selectWallet": "Виберіть свій гаманець",
@@ -64,7 +68,7 @@
     "slippage": "Прослизання"
   },
   "swap": {
-    "crossStepDetails": "Міст з {{from}} до {{to}} через {{tool}}",
+    "crossStepDetails": "Брідж з {{from}} до {{to}} через {{tool}}",
     "error": {
       "message": {
         "slippageTooLarge": "Прослизання більше визначеного порогу. Будь ласка, оберіть новий маршрут, щоб отримати свіжу пропозицію.",
@@ -85,7 +89,7 @@
         "walletEnsAddressInvalid": "Адреса гаманця недійсна або мережа не підтримує ENS."
       }
     },
-    "estimatedTime": "{{value}}м",
+    "estimatedTime": "{{value}}х",
     "featuredTokens": "Рекомендовані токени",
     "from": "З",
     "fromAmount": "Ви платите",
@@ -139,14 +143,15 @@
     "selectChainAndToken": "Виберіть чейн і токен",
     "selectToken": "Токен",
     "sendToWallet": "Надіслати на інший гаманець",
-    "stepBridge": "Міст",
+    "stepBridge": "Брідж",
     "stepSwap": "Своп",
-    "stepSwapAndBridge": "Своп і міст",
+    "stepSwapAndBridge": "Своп та брідж",
     "success": {
       "message": {
         "swapSuccessful": "Зараз у гаманці {{walletAddress}} на чейні {{chainName}} є {{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}}."
       },
       "title": {
+        "gasSwapSuccessful": "Своп газу успішний",
         "swapSuccessful": "Своп успішний"
       }
     },
@@ -154,10 +159,10 @@
     "swapStepDetails": "Своп на {{chain}} через {{tool}}",
     "swapping": "Обмін",
     "tags": {
-      "ALTERNATIVE": "АЛЬТЕРНАТИВНИЙ",
+      "ALTERNATIVE": "АЛЬТЕРНАТИВА",
       "CHEAPEST": "ДЕШЕВИЙ",
       "FASTEST": "ШВИДКИЙ",
-      "RECOMMENDED": "РЕКОМЕНДОВАНИЙ",
+      "RECOMMENDED": "РЕКОМЕНДУЄМО",
       "SAFEST": "БЕЗПЕЧНИЙ"
     },
     "to": "До",

package/cjs/pages/SettingsPage/RoutePrioritySelect.js

@@ -13,7 +13,8 @@ const RoutePrioritySelect = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
     const { routePriority } = (0, stores_1.useSettings)(['routePriority']);
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.routePriority`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ MenuProps: { elevation: 2 }, value: routePriority, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: icons_material_1.KeyboardArrowDown, dense: true }, { children: sdk_1.Orders.map((order) => {
+    const value = routePriority !== null && routePriority !== void 0 ? routePriority : '';
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.routePriority`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ MenuProps: { elevation: 2 }, value: value, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: icons_material_1.KeyboardArrowDown, dense: true }, { children: sdk_1.Orders.map((order) => {
                         const tag = t(`swap.tags.${order.toUpperCase()}`);
                         const tagName = `${tag[0]}${tag.slice(1).toLowerCase()}`;
                         return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: order }, { children: tagName }), order));

package/cjs/pages/SettingsPage/SlippageInput.js

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

package/cjs/pages/SwapHistoryPage/SwapHistoryItem.js

@@ -9,7 +9,7 @@ const Card_1 = require("../../components/Card");
 const Token_1 = require("../../components/Token");
 const utils_1 = require("../../utils");
 const SwapHistoryItem = ({ route }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { i18n } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const handleClick = () => {
@@ -18,12 +18,14 @@ const SwapHistoryItem = ({ route }) => {
         });
     };
     const startedAt = new Date((_b = (_a = route.steps[0].execution) === null || _a === void 0 ? void 0 : _a.process[0].startedAt) !== null && _b !== void 0 ? _b : 0);
+    const fromToken = Object.assign(Object.assign({}, route.fromToken), { amount: route.fromAmount });
+    const toToken = Object.assign(Object.assign({}, ((_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toToken) !== null && _e !== void 0 ? _e : route.toToken)), { amount: (_h = (_g = (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.execution) === null || _g === void 0 ? void 0 : _g.toAmount) !== null && _h !== void 0 ? _h : route.toAmount });
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ onClick: handleClick }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
                     display: 'flex',
                     flex: 1,
                     justifyContent: 'space-between',
                 }, pt: 1.75, px: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
-                        }).format(startedAt) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ py: 1 }, { children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.fromToken), { amount: route.fromAmount }), px: 2, pt: 1, connected: true }), (0, jsx_runtime_1.jsx)(Token_1.TokenDivider, {}), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_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 : route.toAmount }), px: 2, pt: 0.5, pb: 1 })] }))] })));
+                        }).format(startedAt) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ py: 1 }, { children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: fromToken, px: 2, pt: 1, connected: true }), (0, jsx_runtime_1.jsx)(Token_1.TokenDivider, {}), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, px: 2, pt: 0.5, pb: 1 })] }))] })));
 };
 exports.SwapHistoryItem = SwapHistoryItem;

package/cjs/pages/SwapPage/StatusBottomSheet.js

@@ -12,16 +12,18 @@ const BottomSheet_1 = require("../../components/BottomSheet");
 const Token_1 = require("../../components/Token");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
+const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const StatusBottomSheet_style_1 = require("./StatusBottomSheet.style");
 const StatusBottomSheet = ({ status, route, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const { t } = (0, react_i18next_1.useTranslation)();
     const { navigateBack, navigate } = (0, hooks_1.useNavigateBack)();
     const ref = (0, react_1.useRef)(null);
     const { getChainById } = (0, hooks_1.useChains)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
-    const { token, refetch, refetchNewBalance, refetchAllBalances } = (0, hooks_1.useTokenBalance)(route.toToken, route.toAddress);
+    const toToken = Object.assign(Object.assign({}, ((_c = (_b = (_a = route.steps.at(-1)) === null || _a === void 0 ? void 0 : _a.execution) === null || _b === void 0 ? void 0 : _b.toToken) !== null && _c !== void 0 ? _c : route.toToken)), { amount: (_h = (_f = (_e = (_d = route.steps.at(-1)) === null || _d === void 0 ? void 0 : _d.execution) === null || _e === void 0 ? void 0 : _e.toAmount) !== null && _f !== void 0 ? _f : (_g = route.steps.at(-1)) === null || _g === void 0 ? void 0 : _g.estimate.toAmount) !== null && _h !== void 0 ? _h : route.toAmount });
+    const { token, refetch, refetchNewBalance, refetchAllBalances } = (0, hooks_1.useTokenBalance)(toToken, route.toAddress);
     const clearFromAmount = () => {
         refetchAllBalances();
         setValue(providers_1.SwapFormKey.FromAmount, '');
@@ -30,6 +32,22 @@ const StatusBottomSheet = ({ status, route, }) => {
         clearFromAmount();
         navigateBack();
     };
+    const handlePartialDone = () => {
+        clearFromAmount();
+        if (toToken.chainId !== route.toToken.chainId &&
+            toToken.address !== route.toToken.address) {
+            setValue(providers_1.SwapFormKey.FromAmount, (0, utils_1.formatTokenAmount)(toToken.amount, toToken.decimals), { shouldTouch: true });
+            setValue(providers_1.SwapFormKey.FromChain, toToken.chainId, { shouldTouch: true });
+            setValue(providers_1.SwapFormKey.FromToken, toToken.address, { shouldTouch: true });
+            setValue(providers_1.SwapFormKey.ToChain, route.toToken.chainId, {
+                shouldTouch: true,
+            });
+            setValue(providers_1.SwapFormKey.ToToken, route.toToken.address, {
+                shouldTouch: true,
+            });
+        }
+        navigateBack();
+    };
     const handleClose = () => {
         var _a;
         clearFromAmount();
@@ -43,26 +61,50 @@ const StatusBottomSheet = ({ status, route, }) => {
         });
     };
     let title;
-    let message;
+    let primaryMessage;
+    let secondaryMessage;
+    let handlePrimaryButton = handleDone;
     switch (status) {
-        case 'success':
+        case stores_1.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: (_a = getChainById(route.toChainId)) === null || _a === void 0 ? void 0 : _a.name,
-                walletAddress: (0, utils_1.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: (0, utils_1.shortenWalletAddress)(route.toAddress),
+                });
+            }
+            handlePrimaryButton = handleDone;
+            break;
+        }
+        case stores_1.RouteExecutionStatus.Done | stores_1.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: (0, utils_1.shortenWalletAddress)(route.toAddress),
+                });
+            }
+            handlePrimaryButton = handlePartialDone;
             break;
-        case 'error': {
+        }
+        case stores_1.RouteExecutionStatus.Failed: {
             const step = route.steps.find((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
-            const process = (_b = step === null || step === void 0 ? void 0 : step.execution) === null || _b === void 0 ? void 0 : _b.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 = (0, hooks_1.getProcessMessage)(t, getChainById, step, process);
             title = processMessage.title;
-            message = processMessage.message;
+            primaryMessage = processMessage.message;
+            handlePrimaryButton = handleClose;
             break;
         }
         default:
@@ -70,15 +112,21 @@ const StatusBottomSheet = ({ status, route, }) => {
     }
     (0, react_1.useEffect)(() => {
         var _a, _b;
-        if ((status === 'success' || status === 'error') &&
+        const hasSuccessFlag = (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done);
+        if ((hasSuccessFlag || (0, utils_1.hasEnumFlag)(status, stores_1.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 ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: ref }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3 }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary" }) : null, status === 'success' ? (0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success" }) : null, status === 'error' ? (0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error" }) : null] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? ((0, jsx_runtime_1.jsx)(Token_1.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, disableDescription: true })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: message })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "contained", fullWidth: true, onClick: 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' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
+    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: ref }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3 }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary" })) : null, status === stores_1.RouteExecutionStatus.Done ? ((0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Partial) ||
+                                    (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Refunded) ? ((0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "warning" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Failed) ? ((0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error" })) : null] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done) ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, py: 1, disableDescription: true })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: primaryMessage })), secondaryMessage ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: secondaryMessage }))) : null, (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "contained", fullWidth: true, onClick: handlePrimaryButton }, { children: [status === stores_1.RouteExecutionStatus.Idle ? t('button.ok') : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done)
+                                ? t('button.done')
+                                : null, status === stores_1.RouteExecutionStatus.Failed
+                                ? t('button.seeDetails')
+                                : null] })) })), (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done) ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", onClick: handleSeeDetails, fullWidth: true }, { children: t('button.seeDetails') })) }))) : null] })) })));
 };
 exports.StatusBottomSheet = StatusBottomSheet;

package/cjs/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/cjs/pages/SwapPage/StatusBottomSheet.style.js

@@ -3,12 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconCircle = exports.IconContainer = void 0;
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
+const stores_1 = require("../../stores");
 const getStatusColor = (status, theme) => {
     switch (status) {
-        case 'success':
+        case stores_1.RouteExecutionStatus.Done:
             return { color: theme.palette.success.main, alpha: 0.15, darken: 0 };
-        case 'error':
+        case stores_1.RouteExecutionStatus.Failed:
             return { color: theme.palette.error.main, alpha: 0.2, darken: 0 };
+        case stores_1.RouteExecutionStatus.Done | stores_1.RouteExecutionStatus.Partial:
+        case stores_1.RouteExecutionStatus.Done | stores_1.RouteExecutionStatus.Refunded:
         case 'warning':
             return { color: theme.palette.warning.main, alpha: 0.7, darken: 0.4 };
         default:

package/cjs/pages/SwapPage/SwapPage.js

@@ -23,6 +23,7 @@ const StepDivider_1 = require("../../components/StepDivider");
 const SwapButton_1 = require("../../components/SwapButton");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
+const stores_1 = require("../../stores");
 const StatusBottomSheet_1 = require("./StatusBottomSheet");
 const SwapPage_style_1 = require("./SwapPage.style");
 const TokenValueBottomSheet_1 = require("./TokenValueBottomSheet");
@@ -43,7 +44,7 @@ const SwapPage = () => {
     }, [executeRoute, setValue]);
     const handleSwapClick = () => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
-        if (status === 'idle') {
+        if (status === stores_1.RouteExecutionStatus.Idle) {
             const thresholdExceeded = (0, TokenValueBottomSheet_1.getTokenValueLossThreshold)(route);
             if (thresholdExceeded) {
                 (_a = tokenValueBottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.open();
@@ -52,7 +53,7 @@ const SwapPage = () => {
                 handleExecuteRoute();
             }
         }
-        if (status === 'error') {
+        if (status === stores_1.RouteExecutionStatus.Failed) {
             restartRoute();
         }
     });
@@ -62,9 +63,9 @@ const SwapPage = () => {
     };
     const getSwapButtonText = () => {
         switch (status) {
-            case 'idle':
+            case stores_1.RouteExecutionStatus.Idle:
                 return t('button.startSwap');
-            case 'error':
+            case stores_1.RouteExecutionStatus.Failed:
                 return t('button.restartSwap');
             default:
                 return '';
@@ -77,9 +78,10 @@ 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 ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Step_1.Step, { step: step, fromToken: fromToken, toToken: toToken }), steps.length > 1 && index !== steps.length - 1 ? ((0, jsx_runtime_1.jsx)(StepDivider_1.StepDivider, {})) : null] }, step.id));
-            }), status === 'idle' || status === 'error' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { route: route, mt: 2 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2, display: "flex" }, { children: [(0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, 
+            }), status === stores_1.RouteExecutionStatus.Idle ||
+                status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { route: route, mt: 2 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2, display: "flex" }, { children: [(0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, 
                                 // disable={status === 'idle' && (isValidating || !isValid)}
-                                enableLoading: true }), status === 'error' ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleRemoveRoute, sx: {
+                                enableLoading: true }), status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleRemoveRoute, sx: {
                                         minWidth: 48,
                                         marginLeft: 1,
                                     } }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Delete, {}) })) }))) : null] }))] })) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null, route ? ((0, jsx_runtime_1.jsx)(TokenValueBottomSheet_1.TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null] }));

package/cjs/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;

package/cjs/providers/I18nProvider/types.d.ts

@@ -1,16 +1,16 @@
 import type * as languages from '../../i18n';
-export declare type PartialResource<T> = T extends object ? {
+export type PartialResource<T> = T extends object ? {
     [P in keyof T]?: PartialResource<T[P]>;
 } : T;
-export declare type LanguageKey = keyof typeof languages;
-export declare type LanguageResources = {
+export type LanguageKey = keyof typeof languages;
+export type LanguageResources = {
     [language in LanguageKey]?: PartialResource<typeof languages.en>;
 } | {
     [language: string]: PartialResource<typeof languages.en>;
 };
-export declare type LanguageTranslationResource = {
+export type LanguageTranslationResource = {
     [namespace in 'translation']: PartialResource<typeof languages.en>;
 };
-export declare type LanguageTranslationResources = {
+export type LanguageTranslationResources = {
     [language: string]: LanguageTranslationResource;
 };

package/cjs/providers/SwapFormProvider/FormUpdater.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { SwapFormValues } from '../SwapFormProvider';
+export declare const FormUpdater: React.FC<{
+    defaultValues: Partial<SwapFormValues>;
+}>;

package/cjs/providers/{WalletProvider/WalletFormUpdate.js → SwapFormProvider/FormUpdater.js}

@@ -1,50 +1,38 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WalletFormUpdate = void 0;
+exports.FormUpdater = void 0;
 /* eslint-disable @typescript-eslint/no-unused-vars */
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
-const stores_1 = require("../../stores");
 const SwapFormProvider_1 = require("../SwapFormProvider");
+const WalletProvider_1 = require("../WalletProvider");
 const WidgetProvider_1 = require("../WidgetProvider");
-const WalletFormUpdate = ({ account, }) => {
+const FormUpdater = ({ defaultValues }) => {
     const { fromChain, toChain, chains, disabledChains } = (0, WidgetProvider_1.useWidgetConfig)();
-    const { setValue, getValues, getFieldState, 
+    const { account } = (0, WalletProvider_1.useWallet)();
+    const { setValue, getValues, getFieldState, resetField, 
     // Subscription to touchedFields is required by getFieldState to work
     formState: { touchedFields }, } = (0, react_hook_form_1.useFormContext)();
+    const previousDefaultValues = (0, react_1.useRef)(defaultValues);
     // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
     (0, react_1.useEffect)(() => {
         const chainAllowed = account.chainId && (0, WidgetProvider_1.isItemAllowed)(account.chainId, chains, disabledChains);
         if (!account.isActive || !account.chainId || !chainAllowed) {
             return;
         }
-        const [fromChainValue, toChainValue] = getValues([
-            SwapFormProvider_1.SwapFormKey.FromChain,
-            SwapFormProvider_1.SwapFormKey.ToChain,
-        ]);
         const { isTouched: isFromChainTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.FromChain);
         const { isTouched: isToChainTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.ToChain);
         const { isTouched: isFromTokenTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.FromToken);
         const { isTouched: isToTokenTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.ToToken);
         const { isTouched: isFromAmountTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.FromAmount);
-        const { chainOrder, setChain } = stores_1.useChainOrderStore.getState();
-        // Users can switch chains in the wallet.
-        // If we don't have a chain in the ordered chain list we should add it.
-        setChain(account.chainId);
-        // If we ran out of slots for the ordered chain list and the current chain isn't there
-        // we should make a recently switched chain as current.
-        const hasFromChainInOrderedList = chainOrder.includes(fromChainValue);
-        const hasToChainInOrderedList = chainOrder.includes(toChainValue);
-        if ((!fromChain && !isFromChainTouched && !isFromTokenTouched) ||
-            !hasFromChainInOrderedList) {
+        if (!fromChain && !isFromChainTouched && !isFromTokenTouched) {
             setValue(SwapFormProvider_1.SwapFormKey.FromChain, account.chainId);
             setValue(SwapFormProvider_1.SwapFormKey.FromToken, '');
             if (isFromAmountTouched) {
                 setValue(SwapFormProvider_1.SwapFormKey.FromAmount, '');
             }
         }
-        if ((!toChain && !isToChainTouched && !isToTokenTouched) ||
-            !hasToChainInOrderedList) {
+        if (!toChain && !isToChainTouched && !isToTokenTouched) {
             setValue(SwapFormProvider_1.SwapFormKey.ToChain, account.chainId);
             setValue(SwapFormProvider_1.SwapFormKey.ToToken, '');
         }
@@ -59,6 +47,21 @@ const WalletFormUpdate = ({ account, }) => {
         setValue,
         toChain,
     ]);
+    (0, react_1.useEffect)(() => {
+        Object.keys(defaultValues).forEach((key) => {
+            if (previousDefaultValues.current[key] !== defaultValues[key]) {
+                const value = defaultValues[key] ||
+                    // set the chain to the current user one if it is not present in the config
+                    (key === SwapFormProvider_1.SwapFormKey.FromChain || key === SwapFormProvider_1.SwapFormKey.ToChain
+                        ? account.chainId || ''
+                        : '');
+                setValue(key, value);
+                resetField(key, { defaultValue: value });
+            }
+        });
+        previousDefaultValues.current = defaultValues;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [defaultValues, getValues, resetField, setValue]);
     return null;
 };
-exports.WalletFormUpdate = WalletFormUpdate;
+exports.FormUpdater = FormUpdater;

package/cjs/providers/SwapFormProvider/SwapFormProvider.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapFormProvider = exports.formDefaultValues = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const WidgetProvider_1 = require("../WidgetProvider");
+const FormUpdater_1 = require("./FormUpdater");
 const types_1 = require("./types");
 const URLSearchParamsBuilder_1 = require("./URLSearchParamsBuilder");
 exports.formDefaultValues = {
@@ -13,14 +15,17 @@ exports.formDefaultValues = {
 };
 const SwapFormProvider = ({ children, }) => {
     const { fromChain, fromToken, fromAmount, toChain, toToken, toAddress, buildSwapUrl, } = (0, WidgetProvider_1.useWidgetConfig)();
+    const defaultValues = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, exports.formDefaultValues), { fromChain,
+        fromToken, fromAmount: (typeof fromAmount === 'number'
+            ? fromAmount === null || fromAmount === void 0 ? void 0 : fromAmount.toPrecision()
+            : fromAmount) || exports.formDefaultValues.fromAmount, toChain,
+        toToken,
+        toAddress })), [fromAmount, fromChain, fromToken, toAddress, toChain, toToken]);
     const methods = (0, react_hook_form_1.useForm)({
-        defaultValues: Object.assign(Object.assign({}, exports.formDefaultValues), { fromChain,
-            fromToken, fromAmount: (typeof fromAmount === 'number'
-                ? fromAmount === null || fromAmount === void 0 ? void 0 : fromAmount.toPrecision()
-                : fromAmount) || exports.formDefaultValues.fromAmount, toChain,
-            toToken,
-            toAddress }),
+        // TODO: revisit after RHF release values support
+        // values,
+        defaultValues,
     });
-    return ((0, jsx_runtime_1.jsxs)(react_hook_form_1.FormProvider, Object.assign({}, methods, { children: [buildSwapUrl ? (0, jsx_runtime_1.jsx)(URLSearchParamsBuilder_1.URLSearchParamsBuilder, {}) : null, children] })));
+    return ((0, jsx_runtime_1.jsxs)(react_hook_form_1.FormProvider, Object.assign({}, methods, { children: [(0, jsx_runtime_1.jsx)(FormUpdater_1.FormUpdater, { defaultValues: defaultValues }), buildSwapUrl ? (0, jsx_runtime_1.jsx)(URLSearchParamsBuilder_1.URLSearchParamsBuilder, {}) : null, children] })));
 };
 exports.SwapFormProvider = SwapFormProvider;

package/cjs/providers/SwapFormProvider/types.d.ts

@@ -7,7 +7,7 @@ export declare enum SwapFormKey {
     ToToken = "toToken",
     TokenSearchFilter = "tokenSearchFilter"
 }
-export declare type SwapFormValues = {
+export type SwapFormValues = {
     [SwapFormKey.FromAmount]: string;
     [SwapFormKey.FromChain]: number;
     [SwapFormKey.FromToken]: string;
@@ -16,7 +16,7 @@ export declare type SwapFormValues = {
     [SwapFormKey.ToToken]: string;
     [SwapFormKey.TokenSearchFilter]: string;
 };
-export declare type SwapFormType = 'from' | 'to';
+export type SwapFormType = 'from' | 'to';
 export declare const SwapFormKeyHelper: {
     getChainKey: (formType: SwapFormType) => 'fromChain' | 'toChain';
     getTokenKey: (formType: SwapFormType) => 'fromToken' | 'toToken';

package/cjs/providers/WalletProvider/WalletProvider.d.ts

@@ -1,4 +1,4 @@
-import type { Signer } from 'ethers';
+import type { Signer } from '@ethersproject/abstract-signer';
 import type { FC, PropsWithChildren } from 'react';
 import type { WalletContextProps } from './types';
 export declare const useWallet: () => WalletContextProps;

package/cjs/providers/WalletProvider/WalletProvider.js

@@ -14,7 +14,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const wallet_management_1 = require("@lifi/wallet-management");
 const react_1 = require("react");
 const WidgetProvider_1 = require("../WidgetProvider");
-const WalletFormUpdate_1 = require("./WalletFormUpdate");
 const stub = () => {
     throw new Error('You forgot to wrap your component in <WalletProvider>.');
 };
@@ -95,7 +94,7 @@ const WalletProvider = ({ children }) => {
         account,
         provider,
     }), [account, addChain, addToken, connect, disconnect, provider, switchChain]);
-    return ((0, jsx_runtime_1.jsxs)(WalletContext.Provider, Object.assign({ value: value }, { children: [(0, jsx_runtime_1.jsx)(WalletFormUpdate_1.WalletFormUpdate, { account: account }), children] })));
+    return ((0, jsx_runtime_1.jsx)(WalletContext.Provider, Object.assign({ value: value }, { children: children })));
 };
 exports.WalletProvider = WalletProvider;
 const extractAccountFromSigner = (signer) => __awaiter(void 0, void 0, void 0, function* () {

package/cjs/providers/WalletProvider/types.d.ts

@@ -1,10 +1,10 @@
-import type { Web3Provider } from '@ethersproject/providers';
+import type { Signer } from '@ethersproject/abstract-signer';
+import type { Provider } from '@ethersproject/providers';
 import type { Token } from '@lifi/sdk';
 import type { Wallet } from '@lifi/wallet-management';
-import type { Signer } from 'ethers';
 export interface WalletContextProps {
     account: WalletAccount;
-    provider?: Web3Provider;
+    provider?: Provider;
     addChain(chainId: number): Promise<boolean>;
     addToken(chainId: number, token: Token): Promise<void>;
     disconnect(): void;

package/cjs/providers/WidgetProvider/WidgetProvider.js

@@ -15,6 +15,7 @@ exports.WidgetProvider = exports.useWidgetConfig = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@lifi/sdk");
 const react_1 = require("react");
+const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const initialContext = {
     disabledChains: [],
@@ -59,6 +60,9 @@ const WidgetProvider = (_a) => {
             return config;
         }
     }, [config, fromAmount, fromChain, fromToken, toChain, toToken]);
+    (0, react_1.useEffect)(() => {
+        (0, stores_1.setDefaultSettings)(value);
+    }, [value]);
     return ((0, jsx_runtime_1.jsx)(WidgetContext.Provider, Object.assign({ value: value }, { children: children })));
 };
 exports.WidgetProvider = WidgetProvider;

package/cjs/providers/WidgetProvider/types.d.ts

@@ -1,5 +1,5 @@
 import type { WidgetConfig } from '../../types';
-export declare type WidgetContextProps = WidgetConfig & {
+export type WidgetContextProps = WidgetConfig & {
     fromChain?: number;
     toChain?: number;
 };

package/cjs/stores/routes/types.d.ts

@@ -7,7 +7,14 @@ export interface RouteExecutionStore {
     deleteRoute: (routeId: string) => void;
     deleteRoutes: (type: 'completed' | 'active') => void;
 }
-export declare type RouteExecutionStatus = 'error' | 'idle' | 'loading' | 'success' | 'warning';
+export declare enum RouteExecutionStatus {
+    Idle = 0,
+    Pending = 1,
+    Done = 2,
+    Failed = 4,
+    Partial = 8,
+    Refunded = 16
+}
 export interface RouteExecution {
     route: Route;
     status: RouteExecutionStatus;