@lifi/widget 1.23.1 → 1.25.0

package/components/SwapInput/FormPriceHelperText.d.ts

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

package/components/SwapInput/FormPriceHelperText.js

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useTokenAddressBalance } from '../../hooks';
 import { SwapFormKeyHelper } from '../../providers';
 import { formatTokenPrice } from '../../utils';
-export const FormPriceHelperText = ({ formType, selected }) => {
+export const FormPriceHelperText = ({ formType, }) => {
     const { t } = useTranslation();
     const [amount, chainId, tokenAddress] = useWatch({
         name: [

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.23.1";
+export declare const version = "1.25.0";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.23.1';
+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/useTelemetry.js

@@ -2,10 +2,12 @@
 import { useEffect } from 'react';
 import { initSentry } from '../config/sentry';
 import { name } from '../config/version';
+let warningLogged = false;
 export const useTelemetry = (disabled) => {
     useEffect(() => {
         if (disabled) {
-            if (process.env.NODE_ENV === 'development') {
+            if (process.env.NODE_ENV === 'development' && !warningLogged) {
+                warningLogged = true;
                 console.warn(`[${name}] Enable crash reports and diagnostic data to be collected. This helps us to better understand how the widget is performing and where improvements need to be made.`);
             }
         }

package/hooks/useTools.d.ts

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

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

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.23.1",
+  "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.1.13",
-    "@mui/icons-material": "^5.10.9",
-    "@mui/lab": "^5.0.0-alpha.107",
-    "@mui/material": "^5.10.13",
-    "@sentry/integrations": "^7.18.0",
-    "@sentry/react": "^7.18.0",
-    "@sentry/tracing": "^7.18.0",
-    "@tanstack/react-query": "^4.14.5",
-    "@tanstack/react-virtual": "^3.0.0-beta.22",
+    "@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.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.1",
+    "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/SwapHistoryPage/SwapHistoryItem.js

@@ -6,7 +6,7 @@ import { Card } from '../../components/Card';
 import { Token, TokenDivider } from '../../components/Token';
 import { navigationRoutes } from '../../utils';
 export const SwapHistoryItem = ({ route }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { i18n } = useTranslation();
     const navigate = useNavigate();
     const handleClick = () => {
@@ -15,11 +15,13 @@ export 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 (_jsxs(Card, Object.assign({ onClick: handleClick }, { children: [_jsxs(Box, Object.assign({ sx: {
                     display: 'flex',
                     flex: 1,
                     justifyContent: 'space-between',
                 }, pt: 1.75, px: 2 }, { children: [_jsx(Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) })), _jsx(Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
-                        }).format(startedAt) }))] })), _jsxs(Box, Object.assign({ py: 1 }, { children: [_jsx(Token, { token: Object.assign(Object.assign({}, route.fromToken), { amount: route.fromAmount }), px: 2, pt: 1, connected: true }), _jsx(TokenDivider, {}), _jsx(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) }))] })), _jsxs(Box, Object.assign({ py: 1 }, { children: [_jsx(Token, { token: fromToken, px: 2, pt: 1, connected: true }), _jsx(TokenDivider, {}), _jsx(Token, { token: toToken, px: 2, pt: 0.5, pb: 1 })] }))] })));
 };