@lifi/widget 1.31.1 → 1.32.1

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

@@ -2,7 +2,7 @@
 export declare const IconButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "success" | "warning" | "error" | "info" | "primary" | "secondary" | undefined;
+    color?: "inherit" | "default" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;
@@ -24,6 +24,6 @@ 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>, {}, {}>;

package/cjs/components/Select.js

@@ -20,6 +20,7 @@ exports.Select = (0, styles_1.styled)(material_1.Select, {
     },
     [`.${Select_1.selectClasses.icon}`]: {
         right: 10,
+        color: theme.palette.text.primary,
     },
     [`.${ListItemIcon_1.listItemIconClasses.root}`]: {
         minWidth: 38,

package/cjs/components/SelectChainAndToken.js

@@ -20,8 +20,8 @@ const SelectChainAndToken = (props) => {
         ],
     });
     const disabledReverse = variant === 'refuel' ||
-        (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.FromToken)) ||
-        (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.ToToken));
+        disabledUI?.includes(types_1.DisabledUI.FromToken) ||
+        disabledUI?.includes(types_1.DisabledUI.ToToken);
     const nftVariant = variant === 'nft';
     const isCompact = fromChain &&
         toChain &&
@@ -29,10 +29,10 @@ const SelectChainAndToken = (props) => {
         toToken &&
         !prefersNarrowView &&
         !nftVariant;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' } }, props, { children: [(0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "from", compact: isCompact }), !nftVariant ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' }, ...props, children: [(0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "from", compact: isCompact }), !nftVariant ? ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
-                }, m: !disabledReverse ? -1.125 : 1 }, { children: !disabledReverse ? ((0, jsx_runtime_1.jsx)(ReverseTokensButton_1.ReverseTokensButton, { vertical: !isCompact })) : null }))) : null, !nftVariant ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "to", compact: isCompact })) : null] })));
+                }, m: !disabledReverse ? -1.125 : 1, children: !disabledReverse ? ((0, jsx_runtime_1.jsx)(ReverseTokensButton_1.ReverseTokensButton, { vertical: !isCompact })) : null })) : null, !nftVariant ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "to", compact: isCompact })) : null] }));
 };
 exports.SelectChainAndToken = SelectChainAndToken;

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

@@ -2,7 +2,7 @@
 export declare const FormControl: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").FormControlClasses> | undefined;
-    color?: "success" | "warning" | "error" | "info" | "primary" | "secondary" | undefined;
+    color?: "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;
@@ -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

@@ -2,7 +2,7 @@
 export declare const LinkButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "success" | "warning" | "error" | "info" | "primary" | "secondary" | undefined;
+    color?: "inherit" | "default" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;
@@ -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;
     }