@lifi/widget 1.31.1 → 1.32.1

package/cjs/components/StepActions/StepActions.js

@@ -1,15 +1,4 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapStepDetailsLabel = exports.CrossStepDetailsLabel = exports.CustomStepDetailsLabel = exports.StepDetailsContent = exports.StepActions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -22,9 +11,7 @@ const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
 const SmallAvatar_1 = require("../SmallAvatar");
 const StepActions_style_1 = require("./StepActions.style");
-const StepActions = (_a) => {
-    var _b, _c;
-    var { step, dense } = _a, other = __rest(_a, ["step", "dense"]);
+const StepActions = ({ step, dense, ...other }) => {
     const { variant, contractTool } = (0, providers_1.useWidgetConfig)();
     const StepDetailsLabel = step.tool === 'custom' && variant === 'nft'
         ? exports.CustomStepDetailsLabel
@@ -33,9 +20,9 @@ const StepActions = (_a) => {
                 step.includedSteps.some((step) => step.type === 'cross'))
             ? exports.CrossStepDetailsLabel
             : exports.SwapStepDetailsLabel;
-    const isFullView = !dense && ((_b = step.includedSteps) === null || _b === void 0 ? void 0 : _b.length) > 1;
+    const isFullView = !dense && step.includedSteps?.length > 1;
     const customStep = variant === 'nft'
-        ? (_c = step.includedSteps) === null || _c === void 0 ? void 0 : _c.find((step) => step.type === 'custom')
+        ? step.includedSteps?.find((step) => step.type === 'custom')
         : undefined;
     if (customStep && contractTool) {
         const toolDetails = {
@@ -50,26 +37,24 @@ const StepActions = (_a) => {
     }
     // eslint-disable-next-line react/no-unstable-nested-components
     const StepIconComponent = ({ icon }) => {
-        var _a;
-        const tool = (_a = step.includedSteps) === null || _a === void 0 ? void 0 : _a[Number(icon) - 1];
-        return tool ? ((0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, Object.assign({ src: tool.toolDetails.logoURI, alt: tool.toolDetails.name, sx: {
+        const tool = step.includedSteps?.[Number(icon) - 1];
+        return tool ? ((0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, { src: tool.toolDetails.logoURI, alt: tool.toolDetails.name, sx: {
                 boxSizing: 'content-box',
-            } }, { children: tool.toolDetails.name[0] }))) : null;
+            }, children: tool.toolDetails.name[0] })) : null;
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({}, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mb: isFullView ? 1.5 : 0 }, { children: [(0, jsx_runtime_1.jsx)(StepActions_style_1.StepAvatar, Object.assign({ variant: "circular", src: step.type !== 'lifi' ? step.toolDetails.logoURI : undefined, alt: step.toolDetails.name }, { children: step.type === 'lifi' ? (0, jsx_runtime_1.jsx)(icons_1.LiFiToolLogo, {}) : step.toolDetails.name[0] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 2, fontSize: 18, fontWeight: "500", textTransform: "capitalize" }, { children: step.type === 'lifi'
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ...other, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', alignItems: 'center' }, mb: isFullView ? 1.5 : 0, children: [(0, jsx_runtime_1.jsx)(StepActions_style_1.StepAvatar, { variant: "circular", src: step.type !== 'lifi' ? step.toolDetails.logoURI : undefined, alt: step.toolDetails.name, children: step.type === 'lifi' ? (0, jsx_runtime_1.jsx)(icons_1.LiFiToolLogo, {}) : step.toolDetails.name[0] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 2, fontSize: 18, fontWeight: "500", textTransform: "capitalize", children: step.type === 'lifi'
                             ? 'LI.FI Smart Contract'
-                            : step.toolDetails.name }))] })), isFullView ? ((0, jsx_runtime_1.jsx)(material_1.Stepper, Object.assign({ orientation: "vertical", connector: (0, jsx_runtime_1.jsx)(StepActions_style_1.StepConnector, {}), activeStep: -1 }, { children: step.includedSteps.map((step, i) => ((0, jsx_runtime_1.jsxs)(material_1.Step, Object.assign({ expanded: true }, { children: [(0, jsx_runtime_1.jsx)(StepActions_style_1.StepLabel, Object.assign({ StepIconComponent: StepIconComponent }, { children: step.type === 'custom' && variant === 'nft' ? ((0, jsx_runtime_1.jsx)(exports.CustomStepDetailsLabel, { step: step, variant: variant })) : step.type === 'cross' || step.type === 'lifi' ? ((0, jsx_runtime_1.jsx)(exports.CrossStepDetailsLabel, { step: step })) : ((0, jsx_runtime_1.jsx)(exports.SwapStepDetailsLabel, { step: step })) })), (0, jsx_runtime_1.jsx)(StepActions_style_1.StepContent, { children: (0, jsx_runtime_1.jsx)(exports.StepDetailsContent, { step: step, variant: variant }) })] }), step.id))) }))) : ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ ml: 6 }, { children: [(0, jsx_runtime_1.jsx)(StepDetailsLabel, { step: step, variant: variant === 'nft' ? variant : undefined }), (0, jsx_runtime_1.jsx)(exports.StepDetailsContent, { step: step, variant: variant })] })))] })));
+                            : step.toolDetails.name })] }), isFullView ? ((0, jsx_runtime_1.jsx)(material_1.Stepper, { orientation: "vertical", connector: (0, jsx_runtime_1.jsx)(StepActions_style_1.StepConnector, {}), activeStep: -1, children: step.includedSteps.map((step, i) => ((0, jsx_runtime_1.jsxs)(material_1.Step, { expanded: true, children: [(0, jsx_runtime_1.jsx)(StepActions_style_1.StepLabel, { StepIconComponent: StepIconComponent, children: step.type === 'custom' && variant === 'nft' ? ((0, jsx_runtime_1.jsx)(exports.CustomStepDetailsLabel, { step: step, variant: variant })) : step.type === 'cross' || step.type === 'lifi' ? ((0, jsx_runtime_1.jsx)(exports.CrossStepDetailsLabel, { step: step })) : ((0, jsx_runtime_1.jsx)(exports.SwapStepDetailsLabel, { step: step })) }), (0, jsx_runtime_1.jsx)(StepActions_style_1.StepContent, { children: (0, jsx_runtime_1.jsx)(exports.StepDetailsContent, { step: step, variant: variant }) })] }, step.id))) })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { ml: 6, children: [(0, jsx_runtime_1.jsx)(StepDetailsLabel, { step: step, variant: variant === 'nft' ? variant : undefined }), (0, jsx_runtime_1.jsx)(exports.StepDetailsContent, { step: step, variant: variant })] }))] }));
 };
 exports.StepActions = StepActions;
 const StepDetailsContent = ({ step, variant }) => {
-    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', {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { 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, !((step.type === 'custom' || step.tool === 'custom') &&
                 variant === 'nft') ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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),
-                    }), ' ', (_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] })) : null] })));
+                        value: (0, utils_1.formatTokenAmount)(step.execution?.toAmount ?? step.estimate.toAmount, step.execution?.toToken?.decimals ?? step.action.toToken.decimals),
+                    }), ' ', step.execution?.toToken?.symbol ?? step.action.toToken.symbol] })) : null] }));
 };
 exports.StepDetailsContent = StepDetailsContent;
 const CustomStepDetailsLabel = ({ step, variant, }) => {
@@ -77,29 +62,27 @@ const CustomStepDetailsLabel = ({ step, variant, }) => {
     if (!variant) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary" }, { children: t(`swap.${variant}StepDetails`, {
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t(`swap.${variant}StepDetails`, {
             tool: step.toolDetails.name,
-        }) })));
+        }) }));
 };
 exports.CustomStepDetailsLabel = CustomStepDetailsLabel;
 const CrossStepDetailsLabel = ({ step }) => {
-    var _a, _b;
     const { t } = (0, react_i18next_1.useTranslation)();
     const { getChainById } = (0, hooks_1.useChains)();
-    return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary" }, { children: t('swap.crossStepDetails', {
-            from: (_a = getChainById(step.action.fromChainId)) === null || _a === void 0 ? void 0 : _a.name,
-            to: (_b = getChainById(step.action.toChainId)) === null || _b === void 0 ? void 0 : _b.name,
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t('swap.crossStepDetails', {
+            from: getChainById(step.action.fromChainId)?.name,
+            to: getChainById(step.action.toChainId)?.name,
             tool: step.toolDetails.name,
-        }) })));
+        }) }));
 };
 exports.CrossStepDetailsLabel = CrossStepDetailsLabel;
 const SwapStepDetailsLabel = ({ step }) => {
-    var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
     const { getChainById } = (0, hooks_1.useChains)();
-    return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary" }, { children: t('swap.swapStepDetails', {
-            chain: (_a = getChainById(step.action.fromChainId)) === null || _a === void 0 ? void 0 : _a.name,
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t('swap.swapStepDetails', {
+            chain: getChainById(step.action.fromChainId)?.name,
             tool: step.toolDetails.name,
-        }) })));
+        }) }));
 };
 exports.SwapStepDetailsLabel = SwapStepDetailsLabel;

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

@@ -15,6 +15,6 @@ export declare const StepAvatar: import("@emotion/styled").StyledComponent<{
     srcSet?: string | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: "square" | "circular" | "rounded" | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "alt" | "imgProps" | "sizes" | "src" | "srcSet"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -6,6 +6,6 @@ export declare const Container: import("@emotion/styled").StyledComponent<{
     fixed?: boolean | undefined;
     maxWidth?: false | import("@mui/material").Breakpoint | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "maxWidth" | "fixed" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/SwapButton/SwapButton.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -21,19 +12,19 @@ const SwapButton = ({ onClick, currentRoute, text, disabled, loading, }) => {
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { variant, walletManagement } = (0, providers_1.useWidgetConfig)();
     const { account, connect } = (0, providers_1.useWallet)();
-    const handleSwapButtonClick = () => __awaiter(void 0, void 0, void 0, function* () {
+    const handleSwapButtonClick = async () => {
         if (!account.isActive) {
             if (walletManagement) {
-                yield connect();
+                await connect();
             }
             else {
                 navigate(utils_1.navigationRoutes.selectWallet);
             }
         }
         else {
-            onClick === null || onClick === void 0 ? void 0 : onClick();
+            onClick?.();
         }
-    });
+    };
     const getButtonText = () => {
         if (account.isActive) {
             if (!currentRoute) {
@@ -48,6 +39,6 @@ const SwapButton = ({ onClick, currentRoute, text, disabled, loading, }) => {
         }
         return t(`button.connectWallet`);
     };
-    return ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "contained", color: "primary", onClick: handleSwapButtonClick, disabled: disabled, loading: loading, loadingPosition: "center", fullWidth: true }, { children: getButtonText() })));
+    return ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, { variant: "contained", color: "primary", onClick: handleSwapButtonClick, disabled: disabled, loading: loading, loadingPosition: "center", fullWidth: true, children: getButtonText() }));
 };
 exports.SwapButton = SwapButton;

package/cjs/components/SwapInput/FormPriceHelperText.js

@@ -18,14 +18,14 @@ const FormPriceHelperText = ({ formType, }) => {
         ],
     });
     const { token, isLoading } = (0, hooks_1.useTokenAddressBalance)(chainId, tokenAddress);
-    const fromAmountTokenPrice = (0, utils_1.formatTokenPrice)(amount, token === null || token === void 0 ? void 0 : token.priceUSD);
-    return ((0, jsx_runtime_1.jsxs)(material_1.FormHelperText, Object.assign({ component: "div", sx: { display: 'flex', justifyContent: 'space-between', margin: 0 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: fromAmountTokenPrice ? 'text.secondary' : 'grey.600', fontWeight: 400, fontSize: 12, marginLeft: 8, lineHeight: 1.3334, flex: 1, sx: {
+    const fromAmountTokenPrice = (0, utils_1.formatTokenPrice)(amount, token?.priceUSD);
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormHelperText, { component: "div", sx: { display: 'flex', justifyContent: 'space-between', margin: 0 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { color: fromAmountTokenPrice ? 'text.secondary' : 'grey.600', fontWeight: 400, fontSize: 12, marginLeft: 8, lineHeight: 1.3334, flex: 1, sx: {
                     wordBreak: 'break-word',
                     overflowWrap: 'break-word',
-                } }, { children: t(`format.currency`, {
+                }, children: t(`format.currency`, {
                     value: fromAmountTokenPrice,
-                }) })), isLoading && tokenAddress ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 16, sx: { borderRadius: 0.25 } })) : (token === null || token === void 0 ? void 0 : token.amount) ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1.3334, pl: 0.25 }, { children: `/ ${t(`format.number`, {
-                    value: token === null || token === void 0 ? void 0 : token.amount,
-                })}` }))) : null] })));
+                }) }), isLoading && tokenAddress ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 16, sx: { borderRadius: 0.25 } })) : token?.amount ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1.3334, pl: 0.25, children: `/ ${t(`format.number`, {
+                    value: token?.amount,
+                })}` })) : null] }));
 };
 exports.FormPriceHelperText = FormPriceHelperText;

package/cjs/components/SwapInput/SwapInput.js

@@ -1,15 +1,4 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -25,8 +14,7 @@ const FormPriceHelperText_1 = require("./FormPriceHelperText");
 const SwapInput_style_1 = require("./SwapInput.style");
 const SwapInputEndAdornment_1 = require("./SwapInputEndAdornment");
 const SwapInputStartAdornment_1 = require("./SwapInputStartAdornment");
-const SwapInput = (_a) => {
-    var { formType } = _a, props = __rest(_a, ["formType"]);
+const SwapInput = ({ formType, ...props }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const amountKey = providers_1.SwapFormKeyHelper.getAmountKey(formType);
     const { field: { onChange, onBlur, value }, } = (0, react_hook_form_1.useController)({
@@ -45,9 +33,9 @@ const SwapInput = (_a) => {
         onChange(formattedAmount);
         onBlur();
     };
-    const disabled = disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.FromAmount);
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({}, props, { 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: {
+    const disabled = disabledUI?.includes(types_1.DisabledUI.FromAmount);
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { ...props, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.fromAmount') }), (0, jsx_runtime_1.jsxs)(SwapInput_style_1.FormControl, { 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: 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 })] })));
+                        }, 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

@@ -4,7 +4,7 @@ export declare const minInputFontSize = 14;
 export declare const FormControl: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").FormControlClasses> | undefined;
-    color?: "success" | "warning" | "error" | "info" | "primary" | "secondary" | undefined;
+    color?: "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;
@@ -15,7 +15,7 @@ export declare const FormControl: import("@emotion/styled").StyledComponent<{
     size?: "small" | "medium" | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: "outlined" | "filled" | "standard" | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "disabled" | "sx" | "margin" | "fullWidth" | "size" | "variant" | "error" | "required" | "focused" | "hiddenLabel"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const Input: import("@emotion/styled").StyledComponent<import("@mui/material").InputBaseProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -2,7 +2,7 @@
 export declare const Button: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "warning" | "error" | "info" | "primary" | "secondary" | undefined;
+    color?: "inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
@@ -29,6 +29,6 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
     tabIndex?: number | undefined;
     TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

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

package/cjs/components/SwapInput/SwapInputEndAdornment.js

@@ -19,11 +19,10 @@ const SwapInputEndAdornment = ({ formType }) => {
     });
     const { token, isLoading } = (0, hooks_1.useTokenAddressBalance)(chainId, tokenAddress);
     const handleMax = () => {
-        var _a;
-        setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), (_a = token === null || token === void 0 ? void 0 : token.amount) !== null && _a !== void 0 ? _a : '', {
+        setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), token?.amount ?? '', {
             shouldTouch: true,
         });
     };
-    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 })));
+    return ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { 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?.amount ? ((0, jsx_runtime_1.jsx)(SwapInputAdornment_style_1.Button, { onClick: handleMax, children: t('button.max') })) : null }));
 };
 exports.SwapInputEndAdornment = SwapInputEndAdornment;

package/cjs/components/SwapRouteCard/SwapRouteCard.js

@@ -1,15 +1,4 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapRouteCardEssentials = exports.SwapRouteCard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -23,14 +12,12 @@ const StepActions_1 = require("../StepActions");
 const Token_1 = require("../Token");
 const SwapRouteCard_style_1 = require("./SwapRouteCard.style");
 const utils_1 = require("./utils");
-const SwapRouteCard = (_a) => {
-    var _b;
-    var { route, active, variant = 'default', expanded } = _a, other = __rest(_a, ["route", "active", "variant", "expanded"]);
+const SwapRouteCard = ({ route, active, variant = 'default', expanded, ...other }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { variant: widgetVariant, useRecommendedRoute } = (0, providers_1.useWidgetConfig)();
     const [cardExpanded, setCardExpanded] = (0, react_1.useState)(variant === 'default' || expanded);
     const alternativeTag = t(`swap.tags.ALTERNATIVE`);
-    const label = ((_b = route.tags) === null || _b === void 0 ? void 0 : _b.length)
+    const label = route.tags?.length
         ? t(`swap.tags.${route.tags[0]}`)
         : alternativeTag;
     const handleExpand = (e) => {
@@ -38,24 +25,21 @@ const SwapRouteCard = (_a) => {
         setCardExpanded((expanded) => !expanded);
     };
     const token = widgetVariant === 'nft'
-        ? Object.assign(Object.assign({}, route.fromToken), { amount: route.fromAmount }) : Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount });
-    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ flex: 1 }, { children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route })) : null] }))) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: token, step: variant === 'stretched' ? route.steps[0] : undefined, disableDescription: variant === 'dense' && widgetVariant !== 'refuel' }), variant === 'stretched' && !expanded ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: cardExpanded ? (0, jsx_runtime_1.jsx)(icons_material_1.ExpandLess, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {}) }))) : null] })), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true }, { children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
-    return widgetVariant === 'refuel' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: cardContent })));
+        ? { ...route.fromToken, amount: route.fromAmount }
+        : { ...route.toToken, amount: route.toAmount };
+    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, { active: active ?? label !== alternativeTag, children: label }), variant === 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: token, step: variant === 'stretched' ? route.steps[0] : undefined, disableDescription: variant === 'dense' && widgetVariant !== 'refuel' }), variant === 'stretched' && !expanded ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(icons_material_1.ExpandLess, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {}) })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) }), variant !== 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route, dense: true })) : null] }));
+    return widgetVariant === 'refuel' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, { dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true, ...other, children: cardContent }));
 };
 exports.SwapRouteCard = SwapRouteCard;
 const SwapRouteCardEssentials = ({ route, dense }) => {
-    var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
     const executionTimeMinutes = Math.ceil(route.steps
         .map((step) => step.estimate.executionDuration)
         .reduce((duration, x) => duration + x, 0) / 60);
-    const gasCostUSD = parseFloat((_a = route.gasCostUSD) !== null && _a !== void 0 ? _a : '') || 0.01;
+    const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
     const gasCosts = (0, utils_1.getGasCostsBreakdown)(route);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "span" }, { children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas) => {
-                            var _a;
-                            return ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontSize: 11 }, { children: [(_a = gas.amount) === null || _a === void 0 ? void 0 : _a.toFixed(6), " ", gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }), `${gas.token.address}${gas.token.symbol}`));
-                        })] })), placement: "top", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.EvStationOutlined, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t(`format.currency`, { value: gasCostUSD }) }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.AccessTime, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t('swap.estimatedTime', {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas) => ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 11, children: [gas.amount?.toFixed(6), " ", gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }, `${gas.token.address}${gas.token.symbol}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: (0, jsx_runtime_1.jsx)(icons_material_1.EvStationOutlined, { fontSize: dense ? 'medium' : 'small' }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: (0, jsx_runtime_1.jsx)(icons_material_1.AccessTime, { fontSize: dense ? 'medium' : 'small' }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('swap.estimatedTime', {
                                 value: executionTimeMinutes,
-                            }) }))] })) })), !dense ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.LayersOutlined, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: route.steps.length }))] })) }))) : null] })));
+                            }) })] }) }), !dense ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: (0, jsx_runtime_1.jsx)(icons_material_1.LayersOutlined, { fontSize: dense ? 'medium' : 'small' }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: route.steps.length })] }) })) : null] }));
 };
 exports.SwapRouteCardEssentials = SwapRouteCardEssentials;

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

@@ -9,7 +9,7 @@ export declare const Label: import("@emotion/styled").StyledComponent<import("@m
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
     variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)", string>> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("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") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     active?: boolean | undefined;
@@ -17,7 +17,7 @@ export declare const Label: import("@emotion/styled").StyledComponent<import("@m
 export declare const IconButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "success" | "warning" | "error" | "info" | "primary" | "secondary" | undefined;
+    color?: "inherit" | "default" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;
@@ -39,7 +39,7 @@ export declare const IconButton: import("@emotion/styled").StyledComponent<{
     tabIndex?: number | undefined;
     TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     active?: boolean | undefined;

package/cjs/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -1,27 +1,15 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapRouteCardSkeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const providers_1 = require("../../providers");
 const Card_1 = require("../Card");
-const SwapRouteCardSkeleton = (_a) => {
-    var { variant } = _a, other = __rest(_a, ["variant"]);
+const SwapRouteCardSkeleton = ({ variant, ...other }) => {
     const { variant: widgetVariant, useRecommendedRoute } = (0, providers_1.useWidgetConfig)();
-    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ flex: 1 }, { children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 118, height: 24, sx: (theme) => ({
+    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 118, height: 24, sx: (theme) => ({
                             borderRadius: `${theme.shape.borderRadiusSecondary}px`,
-                        }) }), variant === 'stretched' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 52, height: 24, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 44, height: 24, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 32, height: 24 })] }))) : null] }))) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mr: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }) })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 96, height: 32 })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ ml: 6, display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })) : null] }))] }), variant !== 'stretched' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2, display: "flex", justifyContent: "space-between" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 24 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 24 })] }))) : null] })));
-    return widgetVariant === 'refuel' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, Object.assign({ dense: variant === 'dense', indented: true }, other, { children: cardContent })));
+                        }) }), variant === 'stretched' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 52, height: 24, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 44, height: 24, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 32, height: 24 })] })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { mr: 2, children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }) }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 96, height: 32 })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { ml: 6, display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })) : null] })] }), variant !== 'stretched' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, display: "flex", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 24 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 24 })] })) : null] }));
+    return widgetVariant === 'refuel' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, { dense: variant === 'dense', indented: true, ...other, children: cardContent }));
 };
 exports.SwapRouteCardSkeleton = SwapRouteCardSkeleton;

package/cjs/components/SwapRouteCard/SwapRouteNotFoundCard.js

@@ -7,12 +7,12 @@ const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const SwapRouteNotFoundCard = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             flexDirection: 'column',
             flex: 1,
-        }, py: 1.625 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Route, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.routeNotFound') })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.routeNotFound') }))] })));
+        }, py: 1.625, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, children: (0, jsx_runtime_1.jsx)(icons_material_1.Route, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 700, children: t('swap.info.title.routeNotFound') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('swap.info.message.routeNotFound') })] }));
 };
 exports.SwapRouteNotFoundCard = SwapRouteNotFoundCard;

package/cjs/components/SwapRouteCard/utils.js

@@ -8,7 +8,7 @@ const getGasCostsBreakdown = (route) => {
             const { token } = step.estimate.gasCosts[0];
             const gasCostAmount = step.estimate.gasCosts
                 .reduce((amount, gasCost) => amount.plus((0, big_js_1.default)(gasCost.amount || 0)), (0, big_js_1.default)(0))
-                .div(Math.pow(10, token.decimals));
+                .div(10 ** token.decimals);
             const gasCostAmountUSD = step.estimate.gasCosts.reduce((amount, gasCost) => amount + parseFloat(gasCost.amountUSD || '0'), 0);
             const groupedGasCost = groupedGasCosts[token.chainId];
             const amount = groupedGasCost

package/cjs/components/SwapRoutes/SwapRoutes.js

@@ -21,7 +21,7 @@ const SwapRoutes = (props) => {
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
-    const currentRoute = routes === null || routes === void 0 ? void 0 : routes[0];
+    const currentRoute = routes?.[0];
     (0, useSetRecommendedRoute_1.useSetRecommendedRoute)(currentRoute, isFetching);
     if (!currentRoute && !isLoading && !isFetching && !isFetched) {
         return null;
@@ -31,16 +31,16 @@ const SwapRoutes = (props) => {
     };
     const routeNotFound = !currentRoute && !isLoading && !isFetching;
     const onlyRecommendedRoute = variant === 'refuel' || useRecommendedRoute;
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.routes') }), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { ...props, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.routes') }), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
                     position: 'absolute',
                     top: 8,
                     right: 8,
-                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex' } }, { children: [(0, jsx_runtime_1.jsx)(SwapRoutes_style_1.Stack, Object.assign({ direction: "row", spacing: 2, my: 2, ml: 2, mr: onlyRecommendedRoute || routeNotFound ? 2 : 1, sx: {
+                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex' }, children: [(0, jsx_runtime_1.jsx)(SwapRoutes_style_1.Stack, { direction: "row", spacing: 2, my: 2, ml: 2, mr: onlyRecommendedRoute || routeNotFound ? 2 : 1, sx: {
                             borderRightWidth: !onlyRecommendedRoute &&
                                 !routeNotFound &&
                                 (isFetching || (routes && routes.length > 1))
                                 ? 1
                                 : 0,
-                        } }, { children: isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: !onlyRecommendedRoute ? '80%' : '100%', variant: "dense" }), !onlyRecommendedRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })) : null] })) : !currentRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: !onlyRecommendedRoute && routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), !onlyRecommendedRoute && routes.length > 1 ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense", pointerEvents: "none" })) : null] })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !onlyRecommendedRoute && !routeNotFound ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ py: 1, pr: 1 }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleCardClick, size: "medium", disabled: isValidating || !isValid }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) })) }))) : null }))] }))] })));
+                        }, children: isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: !onlyRecommendedRoute ? '80%' : '100%', variant: "dense" }), !onlyRecommendedRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })) : null] })) : !currentRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: !onlyRecommendedRoute && routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), !onlyRecommendedRoute && routes.length > 1 ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense", pointerEvents: "none" })) : null] })) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: 'flex', alignItems: 'center' }, children: !onlyRecommendedRoute && !routeNotFound ? ((0, jsx_runtime_1.jsx)(material_1.Box, { py: 1, pr: 1, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: handleCardClick, size: "medium", disabled: isValidating || !isValid, children: (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) }) })) : null })] })] }));
 };
 exports.SwapRoutes = SwapRoutes;