@lifi/widget 1.31.0 → 1.32.0

package/cjs/components/SelectTokenButton/SelectTokenButton.js

@@ -30,13 +30,13 @@ const SelectTokenButton = ({ formType, compact }) => {
                 : utils_1.navigationRoutes.toToken);
     };
     const isSelected = !!(chain && token);
-    const onClick = !(disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(tokenKey)) ? handleClick : undefined;
+    const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined;
     const defaultPlaceholder = formType === 'to' && variant === 'refuel'
         ? t(`header.selectChain`)
         : t(`swap.selectChainAndToken`);
     const cardTitle = formType === 'from' && variant === 'nft'
         ? t(`swap.payWith`)
         : t(`swap.${formType}`);
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ flex: 1, onClick: onClick }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: cardTitle }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 24 }), subheader: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain })) : ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultPlaceholder, subheader: isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { flex: 1, onClick: onClick, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: cardTitle }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 24 }), subheader: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain })) : ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultPlaceholder, subheader: isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] }));
 };
 exports.SelectTokenButton = SelectTokenButton;

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

@@ -13,7 +13,7 @@ export declare const SelectTokenCardHeader: import("@emotion/styled").StyledComp
     titleTypographyProps?: import("@mui/material").TypographyProps<"span", {
         component?: "span" | undefined;
     }> | 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 | "title" | "action" | "sx" | "disableTypography" | "avatar" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     selected?: boolean | undefined;

package/cjs/components/SendToWallet/SendToWallet.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.SendToWalletFormHelperText = exports.SendToWallet = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -28,9 +19,9 @@ exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
     const { disabledUI, hiddenUI, requiredUI, toAddress } = (0, providers_1.useWidgetConfig)();
     const { showSendToWallet, showSendToWalletDirty, setSendToWallet } = (0, stores_1.useSendToWalletStore)();
     const { showDestinationWallet } = (0, stores_1.useSettings)(['showDestinationWallet']);
-    const hiddenToAddress = hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(types_1.HiddenUI.ToAddress);
-    const disabledToAddress = disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.ToAddress);
-    const requiredToAddress = requiredUI === null || requiredUI === void 0 ? void 0 : requiredUI.includes(types_1.DisabledUI.ToAddress);
+    const hiddenToAddress = hiddenUI?.includes(types_1.HiddenUI.ToAddress);
+    const disabledToAddress = disabledUI?.includes(types_1.DisabledUI.ToAddress);
+    const requiredToAddress = requiredUI?.includes(types_1.DisabledUI.ToAddress);
     // We want to show toAddress field if it is set via widget configuration and not hidden
     const showInstantly = Boolean(!showSendToWalletDirty &&
         showDestinationWallet &&
@@ -56,26 +47,25 @@ exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
     const { onChange, onBlur, name, ref: inputRef, } = register(providers_1.SwapFormKey.ToAddress, {
         required: requiredToAddress &&
             t('swap.error.title.walletAddressRequired'),
-        validate: (value) => __awaiter(void 0, void 0, void 0, function* () {
+        validate: async (value) => {
             try {
                 if (!value) {
                     return true;
                 }
-                const address = yield (provider === null || provider === void 0 ? void 0 : provider.resolveName(value));
+                const address = await provider?.resolveName(value);
                 return ((0, address_1.isAddress)(address || value) ||
                     t('swap.error.title.walletAddressInvalid'));
             }
-            catch (_a) {
+            catch {
                 return t('swap.error.title.walletEnsAddressInvalid');
             }
-        }),
+        },
         onBlur: () => trigger(providers_1.SwapFormKey.ToAddress),
     });
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ timeout: showInstantly ? 0 : 225, in: showSendToWallet || showInstantly, mountOnEnter: true, unmountOnExit: true }, { children: (0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({}, props, { ref: ref }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, Object.assign({ required: requiredToAddress }, { children: t('swap.sendToWallet') })), (0, jsx_runtime_1.jsxs)(SendToWallet_style_1.FormControl, Object.assign({ fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' } }, { children: [(0, jsx_runtime_1.jsx)(SendToWallet_style_1.Input, { ref: inputRef, size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, placeholder: t('swap.walletAddressOrEns'), disabled: Boolean(toAddress && disabledToAddress) }), (0, jsx_runtime_1.jsx)(exports.SendToWalletFormHelperText, {})] }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: showInstantly ? 0 : 225, in: showSendToWallet || showInstantly, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { ...props, ref: ref, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { required: requiredToAddress, children: t('swap.sendToWallet') }), (0, jsx_runtime_1.jsxs)(SendToWallet_style_1.FormControl, { fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' }, children: [(0, jsx_runtime_1.jsx)(SendToWallet_style_1.Input, { ref: inputRef, size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, placeholder: t('swap.walletAddressOrEns'), disabled: Boolean(toAddress && disabledToAddress) }), (0, jsx_runtime_1.jsx)(exports.SendToWalletFormHelperText, {})] })] }) }));
 });
 const SendToWalletFormHelperText = () => {
-    var _a;
     const { errors } = (0, react_hook_form_1.useFormState)();
-    return ((0, jsx_runtime_1.jsx)(material_1.FormHelperText, Object.assign({ error: !!errors.toAddress }, { children: (_a = errors.toAddress) === null || _a === void 0 ? void 0 : _a.message })));
+    return ((0, jsx_runtime_1.jsx)(material_1.FormHelperText, { error: !!errors.toAddress, children: errors.toAddress?.message }));
 };
 exports.SendToWalletFormHelperText = SendToWalletFormHelperText;

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

@@ -13,7 +13,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/SendToWallet/SendToWalletButton.js

@@ -18,19 +18,19 @@ const SendToWalletButton = () => {
     const { showDestinationWallet } = (0, stores_1.useSettings)(['showDestinationWallet']);
     if (!showDestinationWallet ||
         !account.isActive ||
-        (hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(types_1.HiddenUI.ToAddress)) ||
-        (requiredUI === null || requiredUI === void 0 ? void 0 : requiredUI.includes(types_1.HiddenUI.ToAddress))) {
+        hiddenUI?.includes(types_1.HiddenUI.ToAddress) ||
+        requiredUI?.includes(types_1.HiddenUI.ToAddress)) {
         return null;
     }
     const handleClick = () => {
-        if (showSendToWallet && !(disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.ToAddress))) {
+        if (showSendToWallet && !disabledUI?.includes(types_1.DisabledUI.ToAddress)) {
             setValue(providers_1.SwapFormKey.ToAddress, '', { shouldTouch: true });
         }
         toggleSendToWallet();
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
                 minWidth: 48,
                 marginLeft: 1,
-            } }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.WalletOutlined, {}) })) })));
+            }, children: (0, jsx_runtime_1.jsx)(icons_material_1.WalletOutlined, {}) }) }));
 };
 exports.SendToWalletButton = SendToWalletButton;

package/cjs/components/SmallAvatar.d.ts

@@ -11,7 +11,7 @@ export declare const SmallAvatar: 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>, {}, {}>;
 export declare const SmallAvatarSkeletonBase: import("@emotion/styled").StyledComponent<{
@@ -22,7 +22,7 @@ export declare const SmallAvatarSkeletonBase: import("@emotion/styled").StyledCo
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: "text" | "circular" | "rounded" | "rectangular" | undefined;
     width?: string | number | 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" | "height" | "width" | "animation" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const SmallAvatarSkeletonContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
@@ -30,7 +30,7 @@ export declare const SmallAvatarSkeletonContainer: import("@emotion/styled").Sty
     component?: import("react").ElementType<any> | undefined;
     ref?: import("react").Ref<unknown> | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const SmallAvatarSkeleton: () => JSX.Element;

package/cjs/components/Step/CircularProgress.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Process } from '@lifi/sdk';
 export declare function CircularProgress({ process }: {
     process: Process;

package/cjs/components/Step/CircularProgress.js

@@ -6,7 +6,7 @@ const icons_material_1 = require("@mui/icons-material");
 const styles_1 = require("@mui/material/styles");
 const CircularProgress_style_1 = require("./CircularProgress.style");
 function CircularProgress({ process }) {
-    return ((0, jsx_runtime_1.jsxs)(CircularProgress_style_1.CircularIcon, Object.assign({ status: process.status, substatus: process.substatus }, { children: [process.status === 'STARTED' || process.status === 'PENDING' ? ((0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularProgressPending, { size: 32, thickness: 3 })) : null, process.status === 'ACTION_REQUIRED' ? ((0, jsx_runtime_1.jsx)(icons_material_1.InfoRounded, { color: "info", sx: {
+    return ((0, jsx_runtime_1.jsxs)(CircularProgress_style_1.CircularIcon, { status: process.status, substatus: process.substatus, children: [process.status === 'STARTED' || process.status === 'PENDING' ? ((0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularProgressPending, { size: 32, thickness: 3 })) : null, process.status === 'ACTION_REQUIRED' ? ((0, jsx_runtime_1.jsx)(icons_material_1.InfoRounded, { color: "info", sx: {
                     position: 'absolute',
                     fontSize: '1rem',
                 } })) : null, process.status === 'DONE' &&
@@ -20,6 +20,6 @@ function CircularProgress({ process }) {
                 } })) : null, process.status === 'FAILED' ? ((0, jsx_runtime_1.jsx)(icons_material_1.ErrorRounded, { color: "error", sx: {
                     position: 'absolute',
                     fontSize: '1rem',
-                } })) : null] })));
+                } })) : null] }));
 }
 exports.CircularProgress = CircularProgress;

package/cjs/components/Step/CircularProgress.style.d.ts

@@ -6,7 +6,7 @@ export declare const CircularIcon: import("@emotion/styled").StyledComponent<imp
     component?: import("react").ElementType<any> | undefined;
     ref?: import("react").Ref<unknown> | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
-} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
     status: Status;

package/cjs/components/Step/DestinationWalletAddress.js

@@ -8,25 +8,24 @@ const react_i18next_1 = require("react-i18next");
 const CircularProgress_style_1 = require("./CircularProgress.style");
 const StepProcess_style_1 = require("./StepProcess.style");
 const DestinationWalletAddress = ({ step, toAddress, toAddressLink }) => {
-    var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
-    const isDone = ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE';
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ px: 2, py: 1 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+    const isDone = step.execution?.status === 'DONE';
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { px: 2, py: 1, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                 display: 'flex',
                 alignItems: 'center',
-            } }, { children: [(0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularIcon, Object.assign({ status: isDone ? 'DONE' : 'NOT_STARTED' }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.WalletOutlined, { color: isDone ? 'success' : 'inherit', sx: {
+            }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: (0, jsx_runtime_1.jsx)(icons_material_1.WalletOutlined, { color: isDone ? 'success' : 'inherit', sx: {
                             position: 'absolute',
                             fontSize: '1rem',
-                        } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 2, fontSize: 14, fontWeight: 400 }, { children: isDone
+                        } }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 2, fontSize: 14, fontWeight: 400, children: isDone
                         ? t('swap.sentToAddress', {
                             address: toAddress,
                         })
                         : t('swap.sendToAddress', {
                             address: toAddress,
-                        }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ ml: 2, sx: {
+                        }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { ml: 2, sx: {
                         display: 'flex',
                         flex: 1,
                         justifyContent: 'flex-end',
-                    } }, { children: (0, jsx_runtime_1.jsx)(StepProcess_style_1.LinkButton, Object.assign({ size: "small", edge: "end", LinkComponent: material_1.Link, href: toAddressLink, target: "_blank", rel: "nofollow noreferrer" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.LinkRounded, {}) })) }))] })) })));
+                    }, children: (0, jsx_runtime_1.jsx)(StepProcess_style_1.LinkButton, { size: "small", edge: "end", LinkComponent: material_1.Link, href: toAddressLink, target: "_blank", rel: "nofollow noreferrer", children: (0, jsx_runtime_1.jsx)(icons_material_1.LinkRounded, {}) }) })] }) }));
 };
 exports.DestinationWalletAddress = DestinationWalletAddress;

package/cjs/components/Step/GasStepProcess.js

@@ -7,18 +7,18 @@ const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const CircularProgress_style_1 = require("./CircularProgress.style");
 const GasStepProcess = ({ step }) => {
-    var _a, _b, _c, _d;
     const { t } = (0, react_i18next_1.useTranslation)();
-    const isDone = ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE';
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ px: 2, py: 1 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+    const isDone = step.execution?.status === 'DONE';
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { px: 2, py: 1, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                 display: 'flex',
                 alignItems: 'center',
-            } }, { children: [(0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularIcon, Object.assign({ status: isDone ? 'DONE' : 'NOT_STARTED' }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.EvStationOutlined, { color: isDone ? 'success' : 'inherit', sx: {
+            }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: (0, jsx_runtime_1.jsx)(icons_material_1.EvStationOutlined, { color: isDone ? 'success' : 'inherit', sx: {
                             position: 'absolute',
                             fontSize: '1rem',
-                        } }) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ ml: 2, fontSize: 14, fontWeight: 400 }, { children: [t('format.currency', {
-                            value: (_d = (((_b = step.execution) === null || _b === void 0 ? void 0 : _b.gasAmountUSD) ||
-                                ((_c = step.estimate.gasCosts) === null || _c === void 0 ? void 0 : _c.reduce((amount, gasCost) => amount + parseFloat(gasCost.amountUSD || '0'), 0)))) !== null && _d !== void 0 ? _d : 0,
-                        }), ' ', isDone ? t('swap.gasFeePaid') : t('swap.gasFeeEstimated')] }))] })) })));
+                        } }) }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { ml: 2, fontSize: 14, fontWeight: 400, children: [t('format.currency', {
+                            value: (step.execution?.gasAmountUSD ||
+                                step.estimate.gasCosts?.reduce((amount, gasCost) => amount + parseFloat(gasCost.amountUSD || '0'), 0)) ??
+                                0,
+                        }), ' ', isDone ? t('swap.gasFeePaid') : t('swap.gasFeeEstimated')] })] }) }));
 };
 exports.GasStepProcess = GasStepProcess;

package/cjs/components/Step/Step.js

@@ -14,10 +14,9 @@ const GasStepProcess_1 = require("./GasStepProcess");
 const StepProcess_1 = require("./StepProcess");
 const StepTimer_1 = require("./StepTimer");
 const Step = ({ step, fromToken, toToken, toAddress }) => {
-    var _a, _b, _c;
     const { t } = (0, react_i18next_1.useTranslation)();
     const { getChainById } = (0, hooks_1.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':
@@ -38,11 +37,11 @@ const Step = ({ step, fromToken, toToken, toAddress }) => {
     };
     const formattedToAddress = (0, utils_1.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 ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ variant: stepHasError ? 'error' : 'default' }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { variant: stepHasError ? 'error' : 'default', children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                     display: 'flex',
                     flex: 1,
-                } }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, Object.assign({ flex: 1 }, { children: getCardTitle() })), (0, jsx_runtime_1.jsx)(Card_1.CardTitle, Object.assign({ sx: { fontWeight: 500 } }, { children: (0, jsx_runtime_1.jsx)(StepTimer_1.StepTimer, { step: step }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ py: 1 }, { children: [fromToken ? (0, jsx_runtime_1.jsx)(Token_1.Token, { token: fromToken, px: 2, py: 1 }) : null, (0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, px: 2, py: 1, dense: true }), (_c = step.execution) === null || _c === void 0 ? void 0 : _c.process.map((process, index) => ((0, jsx_runtime_1.jsx)(StepProcess_1.StepProcess, { step: step, process: process }, index))), (0, jsx_runtime_1.jsx)(GasStepProcess_1.GasStepProcess, { step: step }), formattedToAddress && toAddressLink ? ((0, jsx_runtime_1.jsx)(DestinationWalletAddress_1.DestinationWalletAddress, { step: step, toAddress: formattedToAddress, toAddressLink: toAddressLink })) : null, toToken ? (0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, px: 2, py: 1 }) : null] }))] })));
+                }, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { flex: 1, children: getCardTitle() }), (0, jsx_runtime_1.jsx)(Card_1.CardTitle, { sx: { fontWeight: 500 }, children: (0, jsx_runtime_1.jsx)(StepTimer_1.StepTimer, { step: step }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { py: 1, children: [fromToken ? (0, jsx_runtime_1.jsx)(Token_1.Token, { token: fromToken, px: 2, py: 1 }) : null, (0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, px: 2, py: 1, dense: true }), step.execution?.process.map((process, index) => ((0, jsx_runtime_1.jsx)(StepProcess_1.StepProcess, { step: step, process: process }, index))), (0, jsx_runtime_1.jsx)(GasStepProcess_1.GasStepProcess, { step: step }), formattedToAddress && toAddressLink ? ((0, jsx_runtime_1.jsx)(DestinationWalletAddress_1.DestinationWalletAddress, { step: step, toAddress: formattedToAddress, toAddressLink: toAddressLink })) : null, toToken ? (0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, px: 2, py: 1 }) : null] })] }));
 };
 exports.Step = Step;

package/cjs/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/cjs/components/Step/StepList.js

@@ -5,13 +5,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const StepDivider_1 = require("../../components/StepDivider");
 const Step_1 = require("./Step");
-const getStepList = (route) => route === null || route === void 0 ? void 0 : route.steps.map((step, index, steps) => {
-    var _a, _b, _c, _d, _e;
+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/cjs/components/Step/StepProcess.js

@@ -9,13 +9,13 @@ const CircularProgress_1 = require("./CircularProgress");
 const StepProcess_style_1 = require("./StepProcess.style");
 const StepProcess = ({ step, process }) => {
     const { title, message } = (0, hooks_1.useProcessMessage)(step, process);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ px: 2, py: 1 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { px: 2, py: 1, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                     display: 'flex',
                     alignItems: 'center',
-                } }, { children: [(0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { process: process }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 2, fontSize: 14, fontWeight: process.error ? 600 : 400 }, { children: title })), process.txLink ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ ml: 2, sx: {
+                }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { process: process }), (0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 2, fontSize: 14, fontWeight: process.error ? 600 : 400, children: title }), process.txLink ? ((0, jsx_runtime_1.jsx)(material_1.Box, { ml: 2, sx: {
                             display: 'flex',
                             flex: 1,
                             justifyContent: 'flex-end',
-                        } }, { children: (0, jsx_runtime_1.jsx)(StepProcess_style_1.LinkButton, Object.assign({ size: "small", edge: "end", LinkComponent: material_1.Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.LinkRounded, {}) })) }))) : null] })), message ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary" }, { children: message }))) : null] })));
+                        }, children: (0, jsx_runtime_1.jsx)(StepProcess_style_1.LinkButton, { size: "small", edge: "end", LinkComponent: material_1.Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer", children: (0, jsx_runtime_1.jsx)(icons_material_1.LinkRounded, {}) }) })) : null] }), message ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary", children: message })) : null] }));
 };
 exports.StepProcess = StepProcess;

package/cjs/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/cjs/components/Step/StepTimer.js

@@ -5,13 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const react_timer_hook_1 = require("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);
 const StepTimer = ({ step, hideInProgress, }) => {
-    var _a, _b;
     const { t } = (0, react_i18next_1.useTranslation)();
     const [isExpired, setExpired] = (0, react_1.useState)(false);
     const [isExecutionStarted, setExecutionStarted] = (0, react_1.useState)(!!step.execution);
@@ -52,8 +48,8 @@ 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/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>, {}, {}>;