@lifi/widget 1.31.0 → 1.32.0

package/components/Step/Step.js

@@ -11,10 +11,9 @@ import { GasStepProcess } from './GasStepProcess';
 import { StepProcess } from './StepProcess';
 import { StepTimer } from './StepTimer';
 export const Step = ({ step, fromToken, toToken, toAddress }) => {
-    var _a, _b, _c;
     const { t } = useTranslation();
     const { getChainById } = useChains();
-    const stepHasError = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.process.some((process) => process.status === 'FAILED');
+    const stepHasError = step.execution?.process.some((process) => process.status === 'FAILED');
     const getCardTitle = () => {
         switch (step.type) {
             case 'lifi':
@@ -35,10 +34,10 @@ export const Step = ({ step, fromToken, toToken, toAddress }) => {
     };
     const formattedToAddress = shortenWalletAddress(toAddress);
     const toAddressLink = toAddress
-        ? `${(_b = getChainById(step.action.toChainId)) === null || _b === void 0 ? void 0 : _b.metamask.blockExplorerUrls[0]}address/${toAddress}`
+        ? `${getChainById(step.action.toChainId)?.metamask.blockExplorerUrls[0]}address/${toAddress}`
         : undefined;
-    return (_jsxs(Card, Object.assign({ variant: stepHasError ? 'error' : 'default' }, { children: [_jsxs(Box, Object.assign({ sx: {
+    return (_jsxs(Card, { variant: stepHasError ? 'error' : 'default', children: [_jsxs(Box, { sx: {
                     display: 'flex',
                     flex: 1,
-                } }, { children: [_jsx(CardTitle, Object.assign({ flex: 1 }, { children: getCardTitle() })), _jsx(CardTitle, Object.assign({ sx: { fontWeight: 500 } }, { children: _jsx(StepTimer, { step: step }) }))] })), _jsxs(Box, Object.assign({ py: 1 }, { children: [fromToken ? _jsx(Token, { token: fromToken, px: 2, py: 1 }) : null, _jsx(StepActions, { step: step, px: 2, py: 1, dense: true }), (_c = step.execution) === null || _c === void 0 ? void 0 : _c.process.map((process, index) => (_jsx(StepProcess, { step: step, process: process }, index))), _jsx(GasStepProcess, { step: step }), formattedToAddress && toAddressLink ? (_jsx(DestinationWalletAddress, { step: step, toAddress: formattedToAddress, toAddressLink: toAddressLink })) : null, toToken ? _jsx(Token, { token: toToken, px: 2, py: 1 }) : null] }))] })));
+                }, children: [_jsx(CardTitle, { flex: 1, children: getCardTitle() }), _jsx(CardTitle, { sx: { fontWeight: 500 }, children: _jsx(StepTimer, { step: step }) })] }), _jsxs(Box, { py: 1, children: [fromToken ? _jsx(Token, { token: fromToken, px: 2, py: 1 }) : null, _jsx(StepActions, { step: step, px: 2, py: 1, dense: true }), step.execution?.process.map((process, index) => (_jsx(StepProcess, { step: step, process: process }, index))), _jsx(GasStepProcess, { step: step }), formattedToAddress && toAddressLink ? (_jsx(DestinationWalletAddress, { step: step, toAddress: formattedToAddress, toAddressLink: toAddressLink })) : null, toToken ? _jsx(Token, { token: toToken, px: 2, py: 1 }) : null] })] }));
 };

package/components/Step/StepList.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { Route } from '@lifi/sdk';
 export declare const getStepList: (route?: Route) => JSX.Element[] | undefined;

package/components/Step/StepList.js

@@ -2,13 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import { StepDivider } from '../../components/StepDivider';
 import { Step } from './Step';
-export const getStepList = (route) => route === null || route === void 0 ? void 0 : route.steps.map((step, index, steps) => {
-    var _a, _b, _c, _d, _e;
+export const getStepList = (route) => route?.steps.map((step, index, steps) => {
     const lastIndex = steps.length - 1;
     const fromToken = index === 0
-        ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined;
+        ? { ...step.action.fromToken, amount: step.action.fromAmount }
+        : undefined;
     const toToken = index === lastIndex
-        ? Object.assign(Object.assign({}, ((_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toToken) !== null && _b !== void 0 ? _b : (_c = step.action) === null || _c === void 0 ? void 0 : _c.toToken)), { amount: (_e = (_d = step.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : step.estimate.toAmount }) : undefined;
+        ? {
+            ...(step.execution?.toToken ?? step.action?.toToken),
+            amount: step.execution?.toAmount ?? step.estimate.toAmount,
+        }
+        : undefined;
     const toAddress = index === lastIndex && route.fromAddress !== route.toAddress
         ? route.toAddress
         : undefined;

package/components/Step/StepProcess.js

@@ -6,12 +6,12 @@ import { CircularProgress } from './CircularProgress';
 import { LinkButton } from './StepProcess.style';
 export const StepProcess = ({ step, process }) => {
     const { title, message } = useProcessMessage(step, process);
-    return (_jsxs(Box, Object.assign({ px: 2, py: 1 }, { children: [_jsxs(Box, Object.assign({ sx: {
+    return (_jsxs(Box, { px: 2, py: 1, children: [_jsxs(Box, { sx: {
                     display: 'flex',
                     alignItems: 'center',
-                } }, { children: [_jsx(CircularProgress, { process: process }), _jsx(Typography, Object.assign({ ml: 2, fontSize: 14, fontWeight: process.error ? 600 : 400 }, { children: title })), process.txLink ? (_jsx(Box, Object.assign({ ml: 2, sx: {
+                }, children: [_jsx(CircularProgress, { process: process }), _jsx(Typography, { ml: 2, fontSize: 14, fontWeight: process.error ? 600 : 400, children: title }), process.txLink ? (_jsx(Box, { ml: 2, sx: {
                             display: 'flex',
                             flex: 1,
                             justifyContent: 'flex-end',
-                        } }, { children: _jsx(LinkButton, Object.assign({ size: "small", edge: "end", LinkComponent: Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer" }, { children: _jsx(LinkIcon, {}) })) }))) : null] })), message ? (_jsx(Typography, Object.assign({ ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary" }, { children: message }))) : null] })));
+                        }, children: _jsx(LinkButton, { size: "small", edge: "end", LinkComponent: Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer", children: _jsx(LinkIcon, {}) }) })) : null] }), message ? (_jsx(Typography, { ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary", children: message })) : null] }));
 };

package/components/Step/StepProcess.style.d.ts

@@ -24,7 +24,7 @@ export declare const LinkButton: 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> & Omit<import("@mui/material").LinkBaseProps, "classes"> & {
     children?: import("react").ReactNode;
@@ -34,6 +34,6 @@ export declare const LinkButton: import("@emotion/styled").StyledComponent<{
     TypographyClasses?: (Partial<import("@mui/material").TypographyClasses> & Partial<import("@mui/material").ClassNameMap<never>>) | undefined;
     underline?: "none" | "always" | "hover" | undefined;
     variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
-} & Omit<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
     ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "p" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "type" | "referrerPolicy" | "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" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "underline" | "TypographyClasses">, {}, {}>;

package/components/Step/StepTimer.js

@@ -2,13 +2,9 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useTimer } from 'react-timer-hook';
-const getExpiryTimestamp = (step) => {
-    var _a, _b, _c;
-    return new Date(((_c = (_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.process[0]) === null || _b === void 0 ? void 0 : _b.startedAt) !== null && _c !== void 0 ? _c : Date.now()) +
-        step.estimate.executionDuration * 1000);
-};
+const getExpiryTimestamp = (step) => new Date((step.execution?.process[0]?.startedAt ?? Date.now()) +
+    step.estimate.executionDuration * 1000);
 export const StepTimer = ({ step, hideInProgress, }) => {
-    var _a, _b;
     const { t } = useTranslation();
     const [isExpired, setExpired] = useState(false);
     const [isExecutionStarted, setExecutionStarted] = useState(!!step.execution);
@@ -49,8 +45,8 @@ export const StepTimer = ({ step, hideInProgress, }) => {
             }) }));
     }
     const isTimerExpired = isExpired || (!minutes && !seconds);
-    if (((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE' ||
-        ((_b = step.execution) === null || _b === void 0 ? void 0 : _b.status) === 'FAILED' ||
+    if (step.execution?.status === 'DONE' ||
+        step.execution?.status === 'FAILED' ||
         (isTimerExpired && hideInProgress)) {
         return null;
     }

package/components/StepActions/StepActions.js

@@ -1,14 +1,3 @@
-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;
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ArrowForward as ArrowForwardIcon } from '@mui/icons-material';
 import { Box, Step as MuiStep, Stepper, Typography } from '@mui/material';
@@ -19,9 +8,7 @@ import { useWidgetConfig } from '../../providers';
 import { formatTokenAmount } from '../../utils';
 import { SmallAvatar } from '../SmallAvatar';
 import { StepAvatar, StepConnector, StepContent, StepLabel, } from './StepActions.style';
-export const StepActions = (_a) => {
-    var _b, _c;
-    var { step, dense } = _a, other = __rest(_a, ["step", "dense"]);
+export const StepActions = ({ step, dense, ...other }) => {
     const { variant, contractTool } = useWidgetConfig();
     const StepDetailsLabel = step.tool === 'custom' && variant === 'nft'
         ? CustomStepDetailsLabel
@@ -30,9 +17,9 @@ export const StepActions = (_a) => {
                 step.includedSteps.some((step) => step.type === 'cross'))
             ? CrossStepDetailsLabel
             : 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 = {
@@ -47,51 +34,47 @@ export 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 ? (_jsx(SmallAvatar, Object.assign({ src: tool.toolDetails.logoURI, alt: tool.toolDetails.name, sx: {
+        const tool = step.includedSteps?.[Number(icon) - 1];
+        return tool ? (_jsx(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 (_jsxs(Box, Object.assign({}, other, { children: [_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mb: isFullView ? 1.5 : 0 }, { children: [_jsx(StepAvatar, Object.assign({ variant: "circular", src: step.type !== 'lifi' ? step.toolDetails.logoURI : undefined, alt: step.toolDetails.name }, { children: step.type === 'lifi' ? _jsx(LiFiToolLogo, {}) : step.toolDetails.name[0] })), _jsx(Typography, Object.assign({ ml: 2, fontSize: 18, fontWeight: "500", textTransform: "capitalize" }, { children: step.type === 'lifi'
+    return (_jsxs(Box, { ...other, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, mb: isFullView ? 1.5 : 0, children: [_jsx(StepAvatar, { variant: "circular", src: step.type !== 'lifi' ? step.toolDetails.logoURI : undefined, alt: step.toolDetails.name, children: step.type === 'lifi' ? _jsx(LiFiToolLogo, {}) : step.toolDetails.name[0] }), _jsx(Typography, { ml: 2, fontSize: 18, fontWeight: "500", textTransform: "capitalize", children: step.type === 'lifi'
                             ? 'LI.FI Smart Contract'
-                            : step.toolDetails.name }))] })), isFullView ? (_jsx(Stepper, Object.assign({ orientation: "vertical", connector: _jsx(StepConnector, {}), activeStep: -1 }, { children: step.includedSteps.map((step, i) => (_jsxs(MuiStep, Object.assign({ expanded: true }, { children: [_jsx(StepLabel, Object.assign({ StepIconComponent: StepIconComponent }, { children: step.type === 'custom' && variant === 'nft' ? (_jsx(CustomStepDetailsLabel, { step: step, variant: variant })) : step.type === 'cross' || step.type === 'lifi' ? (_jsx(CrossStepDetailsLabel, { step: step })) : (_jsx(SwapStepDetailsLabel, { step: step })) })), _jsx(StepContent, { children: _jsx(StepDetailsContent, { step: step, variant: variant }) })] }), step.id))) }))) : (_jsxs(Box, Object.assign({ ml: 6 }, { children: [_jsx(StepDetailsLabel, { step: step, variant: variant === 'nft' ? variant : undefined }), _jsx(StepDetailsContent, { step: step, variant: variant })] })))] })));
+                            : step.toolDetails.name })] }), isFullView ? (_jsx(Stepper, { orientation: "vertical", connector: _jsx(StepConnector, {}), activeStep: -1, children: step.includedSteps.map((step, i) => (_jsxs(MuiStep, { expanded: true, children: [_jsx(StepLabel, { StepIconComponent: StepIconComponent, children: step.type === 'custom' && variant === 'nft' ? (_jsx(CustomStepDetailsLabel, { step: step, variant: variant })) : step.type === 'cross' || step.type === 'lifi' ? (_jsx(CrossStepDetailsLabel, { step: step })) : (_jsx(SwapStepDetailsLabel, { step: step })) }), _jsx(StepContent, { children: _jsx(StepDetailsContent, { step: step, variant: variant }) })] }, step.id))) })) : (_jsxs(Box, { ml: 6, children: [_jsx(StepDetailsLabel, { step: step, variant: variant === 'nft' ? variant : undefined }), _jsx(StepDetailsContent, { step: step, variant: variant })] }))] }));
 };
 export const StepDetailsContent = ({ step, variant }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { t } = useTranslation();
-    return (_jsxs(Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex" }, { children: [t('format.number', {
+    return (_jsxs(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex", children: [t('format.number', {
                 value: formatTokenAmount(step.estimate.fromAmount, step.action.fromToken.decimals),
             }), ' ', step.action.fromToken.symbol, !((step.type === 'custom' || step.tool === 'custom') &&
                 variant === 'nft') ? (_jsxs(_Fragment, { children: [_jsx(ArrowForwardIcon, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {
-                        value: 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: formatTokenAmount(step.execution?.toAmount ?? step.estimate.toAmount, step.execution?.toToken?.decimals ?? step.action.toToken.decimals),
+                    }), ' ', step.execution?.toToken?.symbol ?? step.action.toToken.symbol] })) : null] }));
 };
 export const CustomStepDetailsLabel = ({ step, variant, }) => {
     const { t } = useTranslation();
     if (!variant) {
         return null;
     }
-    return (_jsx(Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary" }, { children: t(`swap.${variant}StepDetails`, {
+    return (_jsx(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t(`swap.${variant}StepDetails`, {
             tool: step.toolDetails.name,
-        }) })));
+        }) }));
 };
 export const CrossStepDetailsLabel = ({ step }) => {
-    var _a, _b;
     const { t } = useTranslation();
     const { getChainById } = useChains();
-    return (_jsx(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 (_jsx(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,
-        }) })));
+        }) }));
 };
 export const SwapStepDetailsLabel = ({ step }) => {
-    var _a;
     const { t } = useTranslation();
     const { getChainById } = useChains();
-    return (_jsx(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 (_jsx(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t('swap.swapStepDetails', {
+            chain: getChainById(step.action.fromChainId)?.name,
             tool: step.toolDetails.name,
-        }) })));
+        }) }));
 };

package/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/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/components/SwapButton/SwapButton.js

@@ -1,12 +1,3 @@
-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());
-    });
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { LoadingButton } from '@mui/lab';
 import { useTranslation } from 'react-i18next';
@@ -18,19 +9,19 @@ export const SwapButton = ({ onClick, currentRoute, text, disabled, loading, })
     const navigate = useNavigate();
     const { variant, walletManagement } = useWidgetConfig();
     const { account, connect } = 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(navigationRoutes.selectWallet);
             }
         }
         else {
-            onClick === null || onClick === void 0 ? void 0 : onClick();
+            onClick?.();
         }
-    });
+    };
     const getButtonText = () => {
         if (account.isActive) {
             if (!currentRoute) {
@@ -45,5 +36,5 @@ export const SwapButton = ({ onClick, currentRoute, text, disabled, loading, })
         }
         return t(`button.connectWallet`);
     };
-    return (_jsx(LoadingButton, Object.assign({ variant: "contained", color: "primary", onClick: handleSwapButtonClick, disabled: disabled, loading: loading, loadingPosition: "center", fullWidth: true }, { children: getButtonText() })));
+    return (_jsx(LoadingButton, { variant: "contained", color: "primary", onClick: handleSwapButtonClick, disabled: disabled, loading: loading, loadingPosition: "center", fullWidth: true, children: getButtonText() }));
 };

package/components/SwapInput/FormPriceHelperText.js

@@ -15,13 +15,13 @@ export const FormPriceHelperText = ({ formType, }) => {
         ],
     });
     const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
-    const fromAmountTokenPrice = formatTokenPrice(amount, token === null || token === void 0 ? void 0 : token.priceUSD);
-    return (_jsxs(FormHelperText, Object.assign({ component: "div", sx: { display: 'flex', justifyContent: 'space-between', margin: 0 } }, { children: [_jsx(Typography, Object.assign({ color: fromAmountTokenPrice ? 'text.secondary' : 'grey.600', fontWeight: 400, fontSize: 12, marginLeft: 8, lineHeight: 1.3334, flex: 1, sx: {
+    const fromAmountTokenPrice = formatTokenPrice(amount, token?.priceUSD);
+    return (_jsxs(FormHelperText, { component: "div", sx: { display: 'flex', justifyContent: 'space-between', margin: 0 }, children: [_jsx(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 ? (_jsx(Skeleton, { variant: "text", width: 48, height: 16, sx: { borderRadius: 0.25 } })) : (token === null || token === void 0 ? void 0 : token.amount) ? (_jsx(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 ? (_jsx(Skeleton, { variant: "text", width: 48, height: 16, sx: { borderRadius: 0.25 } })) : token?.amount ? (_jsx(Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1.3334, pl: 0.25, children: `/ ${t(`format.number`, {
+                    value: token?.amount,
+                })}` })) : null] }));
 };

package/components/SwapInput/SwapInput.js

@@ -1,14 +1,3 @@
-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;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { useController } from 'react-hook-form';
@@ -22,8 +11,7 @@ import { FormPriceHelperText } from './FormPriceHelperText';
 import { FormControl, Input } from './SwapInput.style';
 import { SwapInputEndAdornment } from './SwapInputEndAdornment';
 import { SwapInputStartAdornment } from './SwapInputStartAdornment';
-export const SwapInput = (_a) => {
-    var { formType } = _a, props = __rest(_a, ["formType"]);
+export const SwapInput = ({ formType, ...props }) => {
     const { t } = useTranslation();
     const amountKey = SwapFormKeyHelper.getAmountKey(formType);
     const { field: { onChange, onBlur, value }, } = useController({
@@ -42,8 +30,8 @@ export const SwapInput = (_a) => {
         onChange(formattedAmount);
         onBlur();
     };
-    const disabled = disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(DisabledUI.FromAmount);
-    return (_jsxs(Card, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.fromAmount') }), _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: _jsx(SwapInputStartAdornment, { formType: formType }), endAdornment: !disabled ? (_jsx(SwapInputEndAdornment, { formType: formType })) : undefined, inputProps: {
+    const disabled = disabledUI?.includes(DisabledUI.FromAmount);
+    return (_jsxs(Card, { ...props, children: [_jsx(CardTitle, { children: t('swap.fromAmount') }), _jsxs(FormControl, { fullWidth: true, children: [_jsx(Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: _jsx(SwapInputStartAdornment, { formType: formType }), endAdornment: !disabled ? (_jsx(SwapInputEndAdornment, { formType: formType })) : undefined, inputProps: {
                             inputMode: 'decimal',
-                        }, onChange: handleChange, onBlur: handleBlur, value: value, name: amountKey, disabled: disabled, required: true }), _jsx(FormPriceHelperText, { formType: formType })] })), _jsx(FitInputText, { ref: ref, formType: formType })] })));
+                        }, onChange: handleChange, onBlur: handleBlur, value: value, name: amountKey, disabled: disabled, required: true }), _jsx(FormPriceHelperText, { formType: formType })] }), _jsx(FitInputText, { ref: ref, formType: formType })] }));
 };

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

@@ -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/components/SwapInput/SwapInputAdornment.style.d.ts

@@ -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/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/components/SwapInput/SwapInputEndAdornment.js

@@ -16,10 +16,9 @@ export const SwapInputEndAdornment = ({ formType }) => {
     });
     const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
     const handleMax = () => {
-        var _a;
-        setValue(SwapFormKeyHelper.getAmountKey(formType), (_a = token === null || token === void 0 ? void 0 : token.amount) !== null && _a !== void 0 ? _a : '', {
+        setValue(SwapFormKeyHelper.getAmountKey(formType), token?.amount ?? '', {
             shouldTouch: true,
         });
     };
-    return (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: isLoading && tokenAddress ? (_jsx(Skeleton, { variant: "rectangular", width: 46, height: 24, sx: { borderRadius: 0.5 } })) : formType === 'from' && (token === null || token === void 0 ? void 0 : token.amount) ? (_jsx(Button, Object.assign({ onClick: handleMax }, { children: t('button.max') }))) : null })));
+    return (_jsx(InputAdornment, { position: "end", children: isLoading && tokenAddress ? (_jsx(Skeleton, { variant: "rectangular", width: 46, height: 24, sx: { borderRadius: 0.5 } })) : formType === 'from' && token?.amount ? (_jsx(Button, { onClick: handleMax, children: t('button.max') })) : null }));
 };

package/components/SwapRouteCard/SwapRouteCard.js

@@ -1,14 +1,3 @@
-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;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AccessTime as AccessTimeIcon, EvStationOutlined as EvStationIcon, ExpandLess as ExpandLessIcon, ExpandMore as ExpandMoreIcon, LayersOutlined as LayersIcon, } from '@mui/icons-material';
 import { Box, Collapse, Tooltip, Typography } from '@mui/material';
@@ -20,14 +9,12 @@ import { StepActions } from '../StepActions';
 import { Token } from '../Token';
 import { IconButton, Label } from './SwapRouteCard.style';
 import { getGasCostsBreakdown } from './utils';
-export const SwapRouteCard = (_a) => {
-    var _b;
-    var { route, active, variant = 'default', expanded } = _a, other = __rest(_a, ["route", "active", "variant", "expanded"]);
+export const SwapRouteCard = ({ route, active, variant = 'default', expanded, ...other }) => {
     const { t } = useTranslation();
     const { variant: widgetVariant, useRecommendedRoute } = useWidgetConfig();
     const [cardExpanded, setCardExpanded] = 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) => {
@@ -35,22 +22,19 @@ export 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 = (_jsxs(Box, Object.assign({ flex: 1 }, { children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? (_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [_jsx(Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route })) : null] }))) : null, _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Token, { token: token, step: variant === 'stretched' ? route.steps[0] : undefined, disableDescription: variant === 'dense' && widgetVariant !== 'refuel' }), variant === 'stretched' && !expanded ? (_jsx(IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }))) : null] })), _jsx(Collapse, Object.assign({ timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true }, { children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
-    return widgetVariant === 'refuel' ? (cardContent) : (_jsx(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 = (_jsxs(Box, { flex: 1, children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? (_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsx(Label, { active: active ?? label !== alternativeTag, children: label }), variant === 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route })) : null] })) : null, _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsx(Token, { token: token, step: variant === 'stretched' ? route.steps[0] : undefined, disableDescription: variant === 'dense' && widgetVariant !== 'refuel' }), variant === 'stretched' && !expanded ? (_jsx(IconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) })) : null] }), _jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) }), variant !== 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route, dense: true })) : null] }));
+    return widgetVariant === 'refuel' ? (cardContent) : (_jsx(Card, { dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true, ...other, children: cardContent }));
 };
 export const SwapRouteCardEssentials = ({ route, dense }) => {
-    var _a;
     const { t } = 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 = getGasCostsBreakdown(route);
-    return (_jsxs(Box, Object.assign({ display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0 }, { children: [_jsx(Tooltip, Object.assign({ title: _jsxs(Box, Object.assign({ component: "span" }, { children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas) => {
-                            var _a;
-                            return (_jsxs(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: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(EvStationIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t(`format.currency`, { value: gasCostUSD }) }))] })) })), _jsx(Tooltip, Object.assign({ title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(AccessTimeIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t('swap.estimatedTime', {
+    return (_jsxs(Box, { display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0, children: [_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas) => (_jsxs(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: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: _jsx(EvStationIcon, { fontSize: dense ? 'medium' : 'small' }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), _jsx(Tooltip, { title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: _jsx(AccessTimeIcon, { fontSize: dense ? 'medium' : 'small' }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('swap.estimatedTime', {
                                 value: executionTimeMinutes,
-                            }) }))] })) })), !dense ? (_jsx(Tooltip, Object.assign({ title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(LayersIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: route.steps.length }))] })) }))) : null] })));
+                            }) })] }) }), !dense ? (_jsx(Tooltip, { title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: _jsx(LayersIcon, { fontSize: dense ? 'medium' : 'small' }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: route.steps.length })] }) })) : null] }));
 };

package/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;
@@ -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/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -1,23 +1,11 @@
-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;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Skeleton } from '@mui/material';
 import { useWidgetConfig } from '../../providers';
 import { Card } from '../Card';
-export const SwapRouteCardSkeleton = (_a) => {
-    var { variant } = _a, other = __rest(_a, ["variant"]);
+export const SwapRouteCardSkeleton = ({ variant, ...other }) => {
     const { variant: widgetVariant, useRecommendedRoute } = useWidgetConfig();
-    const cardContent = (_jsxs(Box, Object.assign({ flex: 1 }, { children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? (_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [_jsx(Skeleton, { variant: "rectangular", width: 118, height: 24, sx: (theme) => ({
+    const cardContent = (_jsxs(Box, { flex: 1, children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? (_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsx(Skeleton, { variant: "rectangular", width: 118, height: 24, sx: (theme) => ({
                             borderRadius: `${theme.shape.borderRadiusSecondary}px`,
-                        }) }), variant === 'stretched' ? (_jsxs(Box, Object.assign({ display: "flex" }, { children: [_jsx(Skeleton, { variant: "text", width: 52, height: 24, sx: { marginRight: 2 } }), _jsx(Skeleton, { variant: "text", width: 44, height: 24, sx: { marginRight: 2 } }), _jsx(Skeleton, { variant: "text", width: 32, height: 24 })] }))) : null] }))) : null, _jsxs(Box, { children: [_jsxs(Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [_jsx(Box, Object.assign({ mr: 2 }, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }) })), _jsx(Skeleton, { variant: "text", width: 96, height: 32 })] })), _jsxs(Box, Object.assign({ ml: 6, display: "flex", alignItems: "center" }, { children: [_jsx(Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? (_jsx(Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })) : null] }))] }), variant !== 'stretched' ? (_jsxs(Box, Object.assign({ mt: 2, display: "flex", justifyContent: "space-between" }, { children: [_jsx(Skeleton, { variant: "text", width: 48, height: 24 }), _jsx(Skeleton, { variant: "text", width: 48, height: 24 })] }))) : null] })));
-    return widgetVariant === 'refuel' ? (cardContent) : (_jsx(Card, Object.assign({ dense: variant === 'dense', indented: true }, other, { children: cardContent })));
+                        }) }), variant === 'stretched' ? (_jsxs(Box, { display: "flex", children: [_jsx(Skeleton, { variant: "text", width: 52, height: 24, sx: { marginRight: 2 } }), _jsx(Skeleton, { variant: "text", width: 44, height: 24, sx: { marginRight: 2 } }), _jsx(Skeleton, { variant: "text", width: 32, height: 24 })] })) : null] })) : null, _jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Box, { mr: 2, children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }) }), _jsx(Skeleton, { variant: "text", width: 96, height: 32 })] }), _jsxs(Box, { ml: 6, display: "flex", alignItems: "center", children: [_jsx(Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? (_jsx(Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })) : null] })] }), variant !== 'stretched' ? (_jsxs(Box, { mt: 2, display: "flex", justifyContent: "space-between", children: [_jsx(Skeleton, { variant: "text", width: 48, height: 24 }), _jsx(Skeleton, { variant: "text", width: 48, height: 24 })] })) : null] }));
+    return widgetVariant === 'refuel' ? (cardContent) : (_jsx(Card, { dense: variant === 'dense', indented: true, ...other, children: cardContent }));
 };

package/components/SwapRouteCard/SwapRouteNotFoundCard.js

@@ -4,11 +4,11 @@ import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 export const SwapRouteNotFoundCard = () => {
     const { t } = useTranslation();
-    return (_jsxs(Box, Object.assign({ sx: {
+    return (_jsxs(Box, { sx: {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             flexDirection: 'column',
             flex: 1,
-        }, py: 1.625 }, { children: [_jsx(Typography, Object.assign({ fontSize: 48 }, { children: _jsx(RouteIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.routeNotFound') })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.routeNotFound') }))] })));
+        }, py: 1.625, children: [_jsx(Typography, { fontSize: 48, children: _jsx(RouteIcon, { fontSize: "inherit" }) }), _jsx(Typography, { fontSize: 18, fontWeight: 700, children: t('swap.info.title.routeNotFound') }), _jsx(Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('swap.info.message.routeNotFound') })] }));
 };

package/components/SwapRouteCard/utils.js

@@ -5,7 +5,7 @@ export const getGasCostsBreakdown = (route) => {
             const { token } = step.estimate.gasCosts[0];
             const gasCostAmount = step.estimate.gasCosts
                 .reduce((amount, gasCost) => amount.plus(Big(gasCost.amount || 0)), Big(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