@lifi/widget 1.23.1 → 1.25.0

package/AppDrawer.style.d.ts

@@ -39,7 +39,7 @@ export declare const DrawerButton: import("@emotion/styled").StyledComponent<{
     } | undefined;
 }, {}, {}>;
 export declare const DrawerButtonTypography: 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/AppProvider.js

@@ -6,7 +6,7 @@ import { queryClient } from './config/queryClient';
 import { I18nProvider, SDKProvider, SwapFormProvider, TelemetryProvider, ThemeProvider, WalletProvider, WidgetProvider, } from './providers';
 const QueryProvider = QueryClientProvider;
 export const AppProvider = ({ children, config, }) => {
-    return (_jsx(QueryProvider, Object.assign({ client: queryClient }, { children: _jsx(WidgetProvider, Object.assign({ config: config }, { children: _jsx(SDKProvider, { children: _jsx(TelemetryProvider, { children: _jsx(SwapFormProvider, { children: _jsx(ThemeProvider, { children: _jsx(I18nProvider, { children: _jsx(WalletProvider, { children: _jsx(AppRouter, { children: children }) }) }) }) }) }) }) })) })));
+    return (_jsx(QueryProvider, Object.assign({ client: queryClient }, { children: _jsx(WidgetProvider, Object.assign({ config: config }, { children: _jsx(SDKProvider, { children: _jsx(TelemetryProvider, { children: _jsx(ThemeProvider, { children: _jsx(I18nProvider, { children: _jsx(WalletProvider, { children: _jsx(SwapFormProvider, { children: _jsx(AppRouter, { children: children }) }) }) }) }) }) }) })) })));
 };
 export const AppRouter = ({ children }) => {
     const inRouterContext = useInRouterContext();

package/cjs/AppDrawer.style.d.ts

@@ -39,7 +39,7 @@ export declare const DrawerButton: import("@emotion/styled").StyledComponent<{
     } | undefined;
 }, {}, {}>;
 export declare const DrawerButtonTypography: 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/cjs/AppProvider.js

@@ -9,7 +9,7 @@ const queryClient_1 = require("./config/queryClient");
 const providers_1 = require("./providers");
 const QueryProvider = react_query_1.QueryClientProvider;
 const AppProvider = ({ children, config, }) => {
-    return ((0, jsx_runtime_1.jsx)(QueryProvider, Object.assign({ client: queryClient_1.queryClient }, { children: (0, jsx_runtime_1.jsx)(providers_1.WidgetProvider, Object.assign({ config: config }, { children: (0, jsx_runtime_1.jsx)(providers_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.TelemetryProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.SwapFormProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.I18nProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.WalletProvider, { children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) }) }) }) }) }) }) })) })));
+    return ((0, jsx_runtime_1.jsx)(QueryProvider, Object.assign({ client: queryClient_1.queryClient }, { children: (0, jsx_runtime_1.jsx)(providers_1.WidgetProvider, Object.assign({ config: config }, { children: (0, jsx_runtime_1.jsx)(providers_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.TelemetryProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.I18nProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.WalletProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.SwapFormProvider, { children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) }) }) }) }) }) }) })) })));
 };
 exports.AppProvider = AppProvider;
 const AppRouter = ({ children }) => {

package/cjs/components/ActiveSwaps/ActiveSwapItem.js

@@ -6,6 +6,7 @@ const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const react_router_dom_1 = require("react-router-dom");
 const hooks_1 = require("../../hooks");
+const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const StepTimer_1 = require("../Step/StepTimer");
 const TokenAvatar_1 = require("../TokenAvatar");
@@ -40,6 +41,6 @@ const ActiveSwapItem = ({ routeId, dense }) => {
                         alignItems: 'center',
                         marginLeft: 2,
                         height: 16,
-                    } }, { children: [route.fromToken.symbol, (0, jsx_runtime_1.jsx)(icons_material_1.ArrowForward, { sx: { paddingX: 0.5 } }), route.toToken.symbol] })), secondary: status !== 'success' ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.75, ml: 2 }, { children: title }))) : null }), getStatusComponent()] })));
+                    } }, { children: [route.fromToken.symbol, (0, jsx_runtime_1.jsx)(icons_material_1.ArrowForward, { sx: { paddingX: 0.5 } }), route.toToken.symbol] })), secondary: status !== stores_1.RouteExecutionStatus.Done ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.75, ml: 2 }, { children: title }))) : null }), getStatusComponent()] })));
 };
 exports.ActiveSwapItem = ActiveSwapItem;

package/cjs/components/BottomSheet/types.d.ts

@@ -1,6 +1,6 @@
 import type { DrawerProps } from '@mui/material';
 import type { RefObject } from 'react';
-export declare type BottomSheetProps = DrawerProps & {
+export type BottomSheetProps = DrawerProps & {
     elementRef?: RefObject<HTMLDivElement>;
 };
 export interface BottomSheetBase {

package/cjs/components/Card/Card.d.ts

@@ -1,7 +1,7 @@
 import type { BoxProps, Theme } from '@mui/material';
 import type { MouseEventHandler } from 'react';
-declare type CardVariant = 'default' | 'selected' | 'error';
-export declare type CardProps = {
+type CardVariant = 'default' | 'selected' | 'error';
+export type CardProps = {
     variant?: CardVariant;
     selectionColor?: 'primary' | 'secondary';
     dense?: boolean;

package/cjs/components/Card/CardTitle.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const CardTitle: 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/cjs/components/ChainSelect/ChainSelect.js

@@ -13,10 +13,15 @@ const useChainSelect_1 = require("./useChainSelect");
 const ChainSelect = ({ formType }) => {
     var _a;
     const navigate = (0, react_router_dom_1.useNavigate)();
-    const { chains, getChains, setCurrentChain, isLoading } = (0, useChainSelect_1.useChainSelect)(formType);
+    const { chainOrder, chains, getChains, isLoading, setChainOrder, setCurrentChain, } = (0, useChainSelect_1.useChainSelect)(formType);
     const [chainId] = (0, react_hook_form_1.useWatch)({
         name: [providers_1.SwapFormKeyHelper.getChainKey(formType)],
     });
+    const hasChainInOrderedList = chainOrder.includes(chainId);
+    // If we don't have a chain in the ordered chain list we should add it.
+    if (!hasChainInOrderedList) {
+        setChainOrder(chainId);
+    }
     const showAllChains = () => {
         navigate(utils_1.navigationRoutes[`${formType}Chain`]);
     };

package/cjs/components/ChainSelect/useChainSelect.d.ts

@@ -1,8 +1,10 @@
 import type { EVMChain } from '@lifi/sdk';
 import type { SwapFormType } from '../../providers';
 export declare const useChainSelect: (formType: SwapFormType) => {
+    chainOrder: number[];
     chains: import("@lifi/sdk").ExtendedChain[] | undefined;
     getChains: () => EVMChain[];
-    setCurrentChain: (chainId: number) => void;
     isLoading: boolean;
+    setChainOrder: (chainId: number) => void;
+    setCurrentChain: (chainId: number) => void;
 };

package/cjs/components/ChainSelect/useChainSelect.js

@@ -6,10 +6,11 @@ const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
 const useChainSelect = (formType) => {
+    const chainKey = providers_1.SwapFormKeyHelper.getChainKey(formType);
+    const { field: { onChange, onBlur }, } = (0, react_hook_form_1.useController)({ name: chainKey });
     const { setValue } = (0, react_hook_form_1.useFormContext)();
     const { chains, isLoading } = (0, hooks_1.useChains)();
     const [chainOrder, setChainOrder] = (0, stores_1.useChainOrder)();
-    const chainKey = providers_1.SwapFormKeyHelper.getChainKey(formType);
     const getChains = () => {
         if (!chains) {
             return [];
@@ -20,12 +21,20 @@ const useChainSelect = (formType) => {
         return selectedChains;
     };
     const setCurrentChain = (chainId) => {
-        setValue(chainKey, chainId, { shouldTouch: true });
+        onChange(chainId);
+        onBlur();
         setValue(providers_1.SwapFormKeyHelper.getTokenKey(formType), '');
         setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), '');
         setValue(providers_1.SwapFormKey.TokenSearchFilter, '');
         setChainOrder(chainId);
     };
-    return { chains, getChains, setCurrentChain, isLoading };
+    return {
+        chainOrder,
+        chains,
+        getChains,
+        isLoading,
+        setChainOrder,
+        setCurrentChain,
+    };
 };
 exports.useChainSelect = useChainSelect;

package/cjs/components/SendToWallet/SendToWallet.style.d.ts

@@ -8,7 +8,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/cjs/components/StepActions/StepActions.js

@@ -44,13 +44,13 @@ const StepActions = (_a) => {
 };
 exports.StepActions = StepActions;
 const StepDetailsContent = ({ step }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { t } = (0, react_i18next_1.useTranslation)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex" }, { children: [t('format.number', {
                 value: (0, utils_1.formatTokenAmount)(step.estimate.fromAmount, step.action.fromToken.decimals),
             }), ' ', step.action.fromToken.symbol, (0, jsx_runtime_1.jsx)(icons_material_1.ArrowForward, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {
                 value: (0, utils_1.formatTokenAmount)((_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount, (_e = (_d = (_c = step.execution) === null || _c === void 0 ? void 0 : _c.toToken) === null || _d === void 0 ? void 0 : _d.decimals) !== null && _e !== void 0 ? _e : step.action.toToken.decimals),
-            }), ' ', step.action.toToken.symbol] })));
+            }), ' ', (_h = (_g = (_f = step.execution) === null || _f === void 0 ? void 0 : _f.toToken) === null || _g === void 0 ? void 0 : _g.symbol) !== null && _h !== void 0 ? _h : step.action.toToken.symbol] })));
 };
 exports.StepDetailsContent = StepDetailsContent;
 const CrossStepDetailsLabel = ({ step }) => {

package/cjs/components/SwapInput/FitInputText.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { SwapFormTypeProps } from '../../providers';
+export declare const FitInputText: import("react").ForwardRefExoticComponent<SwapFormTypeProps & import("react").RefAttributes<HTMLInputElement>>;

package/cjs/components/SwapInput/FitInputText.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FitInputText = void 0;
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const providers_1 = require("../../providers");
+const utils_1 = require("../../utils");
+const SwapInput_style_1 = require("./SwapInput.style");
+exports.FitInputText = (0, react_1.forwardRef)(({ formType }, ref) => {
+    const amountKey = providers_1.SwapFormKeyHelper.getAmountKey(formType);
+    const [amount] = (0, react_hook_form_1.useWatch)({
+        name: [amountKey],
+    });
+    (0, react_1.useLayoutEffect)(() => {
+        (0, utils_1.fitInputText)(SwapInput_style_1.maxInputFontSize, SwapInput_style_1.minInputFontSize, ref
+            .current);
+    }, [amount, ref]);
+    return null;
+});

package/cjs/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/cjs/components/SwapInput/FormPriceHelperText.js

@@ -8,7 +8,7 @@ const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
-const FormPriceHelperText = ({ formType, selected }) => {
+const FormPriceHelperText = ({ formType, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const [amount, chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
         name: [

package/cjs/components/SwapInput/SwapInput.js

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

package/cjs/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/cjs/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/cjs/components/SwapInput/{SwapInputAdornment.js → SwapInputEndAdornment.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapInputAdornment = void 0;
+exports.SwapInputEndAdornment = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
@@ -8,7 +8,7 @@ const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const SwapInputAdornment_style_1 = require("./SwapInputAdornment.style");
-const SwapInputAdornment = ({ formType }) => {
+const SwapInputEndAdornment = ({ formType }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
     const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
@@ -26,4 +26,4 @@ const SwapInputAdornment = ({ formType }) => {
     };
     return ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: isLoading && tokenAddress ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 46, height: 24, sx: { borderRadius: 0.5 } })) : formType === 'from' && (token === null || token === void 0 ? void 0 : token.amount) ? ((0, jsx_runtime_1.jsx)(SwapInputAdornment_style_1.Button, Object.assign({ onClick: handleMax }, { children: t('button.max') }))) : null })));
 };
-exports.SwapInputAdornment = SwapInputAdornment;
+exports.SwapInputEndAdornment = SwapInputEndAdornment;

package/cjs/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/cjs/components/SwapInput/SwapInputStartAdornment.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapInputStartAdornment = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
+const TokenAvatar_1 = require("../TokenAvatar");
+const SwapInputStartAdornment = ({ formType, }) => {
+    const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
+        name: [
+            providers_1.SwapFormKeyHelper.getChainKey(formType),
+            providers_1.SwapFormKeyHelper.getTokenKey(formType),
+        ],
+    });
+    const { chain } = (0, hooks_1.useChain)(chainId);
+    const { token } = (0, hooks_1.useToken)(chainId, tokenAddress);
+    const isSelected = !!(chain && token);
+    return isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain, sx: { marginLeft: 2 } })) : ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatarSkeleton, { sx: { marginLeft: 2 } }));
+};
+exports.SwapInputStartAdornment = SwapInputStartAdornment;

package/cjs/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/cjs/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/cjs/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/cjs/components/TokenList/useTokenSelect.js

@@ -5,17 +5,13 @@ const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const providers_1 = require("../../providers");
 const useTokenSelect = (formType, onClick) => {
+    const tokenKey = providers_1.SwapFormKeyHelper.getTokenKey(formType);
+    const { field: { onChange, onBlur }, } = (0, react_hook_form_1.useController)({ name: tokenKey });
     const { setValue, getValues } = (0, react_hook_form_1.useFormContext)();
     return (0, react_1.useCallback)((tokenAddress, chainId) => {
+        onChange(tokenAddress);
+        onBlur();
         const selectedChainId = chainId !== null && chainId !== void 0 ? chainId : getValues(providers_1.SwapFormKeyHelper.getChainKey(formType));
-        setValue(providers_1.SwapFormKeyHelper.getTokenKey(formType), tokenAddress, {
-            shouldTouch: true,
-        });
-        // Set chain again to trigger URL builder update
-        setValue(providers_1.SwapFormKeyHelper.getChainKey(formType), selectedChainId, {
-            shouldTouch: true,
-        });
-        setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), '');
         const oppositeFormType = formType === 'from' ? 'to' : 'from';
         const [selectedOppositeToken, selectedOppositeChainId] = getValues([
             providers_1.SwapFormKeyHelper.getTokenKey(oppositeFormType),
@@ -24,10 +20,17 @@ const useTokenSelect = (formType, onClick) => {
         if (selectedOppositeToken === tokenAddress &&
             selectedOppositeChainId === selectedChainId) {
             setValue(providers_1.SwapFormKeyHelper.getTokenKey(oppositeFormType), '', {
+                shouldDirty: true,
                 shouldTouch: true,
             });
         }
+        // Set chain again to trigger URL builder update
+        setValue(providers_1.SwapFormKeyHelper.getChainKey(formType), selectedChainId, {
+            shouldDirty: true,
+            shouldTouch: true,
+        });
+        setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), '');
         onClick === null || onClick === void 0 ? void 0 : onClick();
-    }, [formType, getValues, onClick, setValue]);
+    }, [formType, getValues, onBlur, onChange, onClick, setValue]);
 };
 exports.useTokenSelect = useTokenSelect;

package/cjs/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/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '1.23.1';
+exports.version = '1.25.0';

package/cjs/hooks/useGasSufficiency.js

@@ -78,7 +78,7 @@ const useGasSufficiency = (route) => {
     });
     const { data: insufficientFunds, isInitialLoading: insufficientFundsLoading, } = (0, react_query_1.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 || (0, stores_1.isRouteCompleted)(route)) {
+        if (!account.address || !fromToken || !route || (0, stores_1.isRouteDone)(route)) {
             return null;
         }
         let currentTokenBalance = (0, big_js_1.default)((_c = fromToken === null || fromToken === void 0 ? void 0 : fromToken.amount) !== null && _c !== void 0 ? _c : 0);

package/cjs/hooks/useRouteExecution.js

@@ -39,7 +39,7 @@ const useRouteExecution = (routeId, executeInBackground) => {
                 process,
             });
         }
-        if ((0, stores_1.isRouteCompleted)(clonedUpdatedRoute)) {
+        if ((0, stores_1.isRouteDone)(clonedUpdatedRoute)) {
             emitter.emit(events_1.WidgetEvent.RouteExecutionCompleted, clonedUpdatedRoute);
         }
         if ((0, stores_1.isRouteFailed)(clonedUpdatedRoute) && process) {

package/cjs/hooks/useSwapRoutes.js

@@ -19,9 +19,9 @@ const providers_1 = require("../providers");
 const stores_1 = require("../stores");
 const refetchTime = 60000;
 const useSwapRoutes = () => {
-    var _a;
+    var _a, _b;
     const lifi = (0, providers_1.useLiFi)();
-    const { variant } = (0, providers_1.useWidgetConfig)();
+    const { variant, sdkConfig } = (0, providers_1.useWidgetConfig)();
     const { account, provider } = (0, providers_1.useWallet)();
     const queryClient = (0, react_query_1.useQueryClient)();
     const { slippage, enabledBridges, enabledExchanges, routePriority } = (0, stores_1.useSettings)([
@@ -65,22 +65,25 @@ 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 } = (0, react_query_1.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 } = (0, react_query_1.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 : ((0, address_1.isAddress)(toAddress) ? toAddress : fromAddress);
+                (_c = (yield (provider === null || provider === void 0 ? void 0 : provider.resolveName(toAddress)))) !== null && _c !== void 0 ? _c : ((0, address_1.isAddress)(toAddress) ? toAddress : fromAddress);
         }
-        catch (_d) {
+        catch (_e) {
             toWalletAddress = (0, address_1.isAddress)(toAddress) ? toAddress : fromAddress;
         }
-        const fromAmount = (0, big_js_1.default)(Number(fromTokenAmount) * Math.pow(10, ((_c = fromToken === null || fromToken === void 0 ? void 0 : fromToken.decimals) !== null && _c !== void 0 ? _c : 0))).toString();
+        const fromAmount = (0, big_js_1.default)(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,
@@ -99,7 +102,7 @@ const useSwapRoutes = () => {
                     allow: enabledExchanges,
                 },
                 order: routePriority,
-                allowSwitchChain: variant !== 'refuel',
+                allowSwitchChain: variant === 'refuel' ? false : allowSwitchChain,
             },
         }, { signal });
     }), {

package/cjs/hooks/useTelemetry.js

@@ -5,10 +5,12 @@ exports.useTelemetry = void 0;
 const react_1 = require("react");
 const sentry_1 = require("../config/sentry");
 const version_1 = require("../config/version");
+let warningLogged = false;
 const useTelemetry = (disabled) => {
     (0, react_1.useEffect)(() => {
         if (disabled) {
-            if (process.env.NODE_ENV === 'development') {
+            if (process.env.NODE_ENV === 'development' && !warningLogged) {
+                warningLogged = true;
                 console.warn(`[${version_1.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/cjs/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/cjs/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"
       }
     },