@lifi/widget 1.31.0 → 1.32.0

package/components/Header/WalletHeader.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ContentCopy as ContentCopyIcon, ExpandMore as ExpandMoreIcon, OpenInNewOutlined as OpenInNewOutlinedIcon, PowerSettingsNewRounded as PowerSettingsIcon, WalletOutlined as WalletOutlinedIcon, } from '@mui/icons-material';
 import { Avatar, Button, MenuItem } from '@mui/material';
@@ -20,7 +11,7 @@ import { HeaderAppBar, WalletButton } from './Header.style';
 import { WalletMenu } from './WalletMenu';
 export const WalletHeader = () => {
     const { account } = useWallet();
-    return (_jsx(HeaderAppBar, Object.assign({ elevation: 0, sx: { justifyContent: 'flex-end' } }, { children: account.isActive ? _jsx(ConnectedButton, {}) : _jsx(ConnectButton, {}) })));
+    return (_jsx(HeaderAppBar, { elevation: 0, sx: { justifyContent: 'flex-end' }, children: account.isActive ? _jsx(ConnectedButton, {}) : _jsx(ConnectButton, {}) }));
 };
 const ConnectButton = () => {
     const { t } = useTranslation();
@@ -28,16 +19,16 @@ const ConnectButton = () => {
     const config = useWidgetConfig();
     const { connect: connectWallet } = useWallet();
     const navigate = useNavigate();
-    const connect = () => __awaiter(void 0, void 0, void 0, function* () {
+    const connect = async () => {
         if (config.walletManagement) {
-            yield connectWallet();
+            await connectWallet();
             return;
         }
         navigate(navigationRoutes.selectWallet);
-    });
-    return (_jsx(WalletButton, Object.assign({ endIcon: _jsx(WalletOutlinedIcon, {}), onClick: !pathname.includes(navigationRoutes.selectWallet) ? connect : undefined, sx: {
+    };
+    return (_jsx(WalletButton, { endIcon: _jsx(WalletOutlinedIcon, {}), onClick: !pathname.includes(navigationRoutes.selectWallet) ? connect : undefined, sx: {
             marginRight: -1.25,
-        } }, { children: t(`button.connectWallet`) })));
+        }, children: t(`button.connectWallet`) }));
 };
 const ConnectedButton = () => {
     const { t } = useTranslation();
@@ -55,14 +46,13 @@ const ConnectedButton = () => {
         disconnect();
         handleClose();
     };
-    const handleCopyAddress = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        yield navigator.clipboard.writeText((_a = account.address) !== null && _a !== void 0 ? _a : '');
+    const handleCopyAddress = async () => {
+        await navigator.clipboard.writeText(account.address ?? '');
         handleClose();
-    });
-    return (_jsxs(_Fragment, { children: [_jsx(WalletButton, Object.assign({ endIcon: _jsx(ExpandMoreIcon, {}), startIcon: _jsx(Avatar, Object.assign({ src: chain === null || chain === void 0 ? void 0 : chain.logoURI, alt: chain === null || chain === void 0 ? void 0 : chain.key, sx: { width: 24, height: 24 } }, { children: chain === null || chain === void 0 ? void 0 : chain.name[0] })), sx: {
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(WalletButton, { endIcon: _jsx(ExpandMoreIcon, {}), startIcon: _jsx(Avatar, { src: chain?.logoURI, alt: chain?.key, sx: { width: 24, height: 24 }, children: chain?.name[0] }), sx: {
                     marginRight: -1.25,
-                }, onClick: handleClick }, { children: walletAddress })), _jsxs(WalletMenu, Object.assign({ anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose }, { children: [_jsxs(MenuItem, Object.assign({ onClick: handleCopyAddress, disableRipple: true }, { children: [_jsx(ContentCopyIcon, {}), t(`button.copyAddress`)] })), _jsxs(MenuItem, Object.assign({ component: "a", onClick: handleClose, href: `${chain === null || chain === void 0 ? void 0 : chain.metamask.blockExplorerUrls[0]}address/${account.address}`, target: "_blank", disableRipple: true }, { children: [_jsx(OpenInNewOutlinedIcon, {}), t(`button.viewOnExplorer`)] })), _jsx(Button, Object.assign({ onClick: handleDisconnect, fullWidth: true, startIcon: _jsx(PowerSettingsIcon, {}), sx: {
+                }, onClick: handleClick, children: walletAddress }), _jsxs(WalletMenu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: [_jsxs(MenuItem, { onClick: handleCopyAddress, disableRipple: true, children: [_jsx(ContentCopyIcon, {}), t(`button.copyAddress`)] }), _jsxs(MenuItem, { component: "a", onClick: handleClose, href: `${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`, target: "_blank", disableRipple: true, children: [_jsx(OpenInNewOutlinedIcon, {}), t(`button.viewOnExplorer`)] }), _jsx(Button, { onClick: handleDisconnect, fullWidth: true, startIcon: _jsx(PowerSettingsIcon, {}), sx: {
                             marginTop: 1,
-                        } }, { children: t(`button.disconnect`) }))] }))] }));
+                        }, children: t(`button.disconnect`) })] })] }));
 };

package/{pages/SelectChainPage/SelectChainPage.style.d.ts → components/ListItemButton.d.ts}

@@ -15,7 +15,6 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
     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").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+}, "classes"> & 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;
 }, "className" | "style" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const ListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/ListItemButton.js

@@ -0,0 +1,11 @@
+import { ListItemButton as MuiListItemButton } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { getContrastAlphaColor } from '../utils';
+export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadius,
+    paddingLeft: theme.spacing(1.5),
+    height: 56,
+    '&:hover': {
+        backgroundColor: getContrastAlphaColor(theme, '4%'),
+    },
+}));

package/components/ListItemText.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/ListItemText.js

@@ -0,0 +1,8 @@
+import { ListItemText as MuiListItemText } from '@mui/material';
+import { listItemTextClasses } from '@mui/material/ListItemText';
+import { styled } from '@mui/material/styles';
+export const ListItemText = styled(MuiListItemText)(({ theme }) => ({
+    [`.${listItemTextClasses.primary}`]: {
+        fontWeight: 400,
+    },
+}));

package/components/NFT/NFT.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Link, Skeleton, Typography } from '@mui/material';
 import { useEffect } from 'react';
@@ -17,8 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { SwapFormKey } from '../../providers';
 import { Token } from '../Token';
 import { PreviewAvatar } from './NFT.style';
-export const NFT = (_a) => {
-    var { imageUrl, isLoading, collectonName, assetName, owner, token, contract } = _a, props = __rest(_a, ["imageUrl", "isLoading", "collectonName", "assetName", "owner", "token", "contract"]);
+export const NFT = ({ imageUrl, isLoading, collectonName, assetName, owner, token, contract, ...props }) => {
     const { t } = useTranslation();
     const { setValue } = useFormContext();
     useEffect(() => {
@@ -33,5 +21,5 @@ export const NFT = (_a) => {
             setValue(SwapFormKey.ToContractGasLimit, contract.gasLimit);
         }
     }, [contract, setValue, token]);
-    return (_jsxs(Box, Object.assign({ p: 2 }, { children: [_jsxs(Box, Object.assign({ display: "flex" }, { children: [isLoading ? (_jsx(Skeleton, { width: 96, height: 96, variant: "rectangular", sx: { borderRadius: 1 } })) : (_jsx(PreviewAvatar, { src: imageUrl })), _jsxs(Box, Object.assign({ ml: 2 }, { children: [isLoading ? (_jsx(Skeleton, { width: 144, height: 21, variant: "text" })) : (_jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary" }, { children: collectonName }))), isLoading ? (_jsx(Skeleton, { width: 112, height: 27, variant: "text" })) : (_jsx(Typography, Object.assign({ fontSize: 18, fontWeight: 600 }, { children: assetName }))), isLoading ? (_jsx(Skeleton, { width: 128, height: 21, variant: "text" })) : owner ? (_jsxs(Typography, Object.assign({ fontSize: 14, color: "text.secondary" }, { children: [t('swap.ownedBy'), ' ', _jsx(Link, Object.assign({ href: owner.url, target: "_blank", underline: "none", color: "primary" }, { children: owner.name }))] }))) : null] }))] })), _jsx(Token, { token: token, isLoading: isLoading, mt: 2 })] })));
+    return (_jsxs(Box, { p: 2, children: [_jsxs(Box, { display: "flex", children: [isLoading ? (_jsx(Skeleton, { width: 96, height: 96, variant: "rectangular", sx: { borderRadius: 1 } })) : (_jsx(PreviewAvatar, { src: imageUrl })), _jsxs(Box, { ml: 2, children: [isLoading ? (_jsx(Skeleton, { width: 144, height: 21, variant: "text" })) : (_jsx(Typography, { fontSize: 14, color: "text.secondary", children: collectonName })), isLoading ? (_jsx(Skeleton, { width: 112, height: 27, variant: "text" })) : (_jsx(Typography, { fontSize: 18, fontWeight: 600, children: assetName })), isLoading ? (_jsx(Skeleton, { width: 128, height: 21, variant: "text" })) : owner ? (_jsxs(Typography, { fontSize: 14, color: "text.secondary", children: [t('swap.ownedBy'), ' ', _jsx(Link, { href: owner.url, target: "_blank", underline: "none", color: "primary", children: owner.name })] })) : null] })] }), _jsx(Token, { token: token, isLoading: isLoading, mt: 2 })] }));
 };

package/components/NFT/NFT.style.d.ts

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

package/components/NotFound.js

@@ -4,12 +4,12 @@ import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 export const NotFound = () => {
     const { t } = useTranslation();
-    return (_jsxs(Box, Object.assign({ sx: {
+    return (_jsxs(Box, { sx: {
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
             flexDirection: 'column',
             flex: 1,
             padding: 3,
-        } }, { children: [_jsx(Typography, Object.assign({ fontSize: 48 }, { children: _jsx(BlockIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('tooltip.notFound.title') })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('tooltip.notFound.text') }))] })));
+        }, children: [_jsx(Typography, { fontSize: 48, children: _jsx(BlockIcon, { fontSize: "inherit" }) }), _jsx(Typography, { fontSize: 18, fontWeight: 700, children: t('tooltip.notFound.title') }), _jsx(Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('tooltip.notFound.text') })] }));
 };

package/components/PoweredBy/PoweredBy.js

@@ -14,9 +14,9 @@ export const PoweredBy = () => {
         pathname.includes(navigationRoutes.toToken)) {
         return null;
     }
-    return (_jsx(Box, Object.assign({ px: 3, py: (hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(HiddenUI.PoweredBy)) ? 1 : 2, sx: {
+    return (_jsx(Box, { px: 3, py: hiddenUI?.includes(HiddenUI.PoweredBy) ? 1 : 2, sx: {
             display: 'flex',
             alignItems: 'flex-end',
             justifyContent: 'flex-end',
-        } }, { children: !(hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(HiddenUI.PoweredBy)) ? (_jsx(Tooltip, Object.assign({ title: `v${version}`, placement: "top", enterDelay: 3000, arrow: true }, { children: _jsxs(Link, Object.assign({ href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary" }, { children: [_jsx(Typography, Object.assign({ color: "text.secondary", fontSize: 12, px: 0.5 }, { children: "Powered by" })), _jsx(LiFiLogo, { variant: "full", style: { height: 16, width: 42 } })] })) }))) : null })));
+        }, children: !hiddenUI?.includes(HiddenUI.PoweredBy) ? (_jsx(Tooltip, { title: `v${version}`, placement: "top", enterDelay: 3000, arrow: true, children: _jsxs(Link, { href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary", children: [_jsx(Typography, { color: "text.secondary", fontSize: 12, px: 0.5, children: "Powered by" }), _jsx(LiFiLogo, { variant: "full", style: { height: 16, width: 42 } })] }) })) : null }));
 };

package/components/PoweredBy/PoweredBy.style.d.ts

@@ -7,6 +7,6 @@ export declare const Link: import("@emotion/styled").StyledComponent<Omit<import
     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;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
+} & import("@mui/material/OverridableComponent").CommonProps & 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"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/ProgressToNextUpdate/ProgressToNextUpdate.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, CircularProgress, IconButton, Tooltip } from '@mui/material';
 import { useEffect, useState } from 'react';
@@ -17,8 +6,7 @@ const getProgressValue = (updatedAt, timeToUpdate) => updatedAt
     ? Math.min(100, ((Date.now() - updatedAt) / timeToUpdate) * 100)
     : 0;
 const getSecondsToUpdate = (updatedAt, timeToUpdate) => Math.max(Math.round((timeToUpdate - (Date.now() - updatedAt)) / 1000), 0);
-export const ProgressToNextUpdate = (_a) => {
-    var { updatedAt, timeToUpdate, isLoading, onClick } = _a, other = __rest(_a, ["updatedAt", "timeToUpdate", "isLoading", "onClick"]);
+export const ProgressToNextUpdate = ({ updatedAt, timeToUpdate, isLoading, onClick, ...other }) => {
     const { t } = useTranslation();
     const [value, setValue] = useState(() => getProgressValue(updatedAt, timeToUpdate));
     useEffect(() => {
@@ -37,15 +25,15 @@ export const ProgressToNextUpdate = (_a) => {
             setValue(0);
         }
     }, [isLoading]);
-    return (_jsx(IconButton, Object.assign({ onClick: onClick, disabled: isLoading }, other, { children: _jsx(Tooltip, Object.assign({ title: t('tooltip.progressToNextUpdate', {
+    return (_jsx(IconButton, { onClick: onClick, disabled: isLoading, ...other, children: _jsx(Tooltip, { title: t('tooltip.progressToNextUpdate', {
                 value: getSecondsToUpdate(updatedAt, timeToUpdate),
-            }), placement: "top", enterDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ sx: {
+            }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { sx: {
                     display: 'grid',
                     position: 'relative',
                     placeItems: 'center',
                     width: 24,
                     height: 24,
-                } }, { children: [_jsx(CircularProgress, { variant: "determinate", size: 24, value: 100, sx: (theme) => ({
+                }, children: [_jsx(CircularProgress, { variant: "determinate", size: 24, value: 100, sx: (theme) => ({
                             position: 'absolute',
                             color: theme.palette.mode === 'light'
                                 ? theme.palette.grey[300]
@@ -55,5 +43,5 @@ export const ProgressToNextUpdate = (_a) => {
                             color: theme.palette.mode === 'light'
                                 ? theme.palette.primary.main
                                 : theme.palette.primary.light,
-                        }) })] })) })) })));
+                        }) })] }) }) }));
 };

package/components/ReverseTokensButton/ReverseTokensButton.js

@@ -18,5 +18,5 @@ export const ReverseTokensButton = ({ vertical, }) => {
         setValue(SwapFormKey.ToChain, fromChain, { shouldTouch: true });
         setValue(SwapFormKey.ToToken, fromToken, { shouldTouch: true });
     };
-    return (_jsx(IconButton, Object.assign({ onClick: handleClick, size: "small" }, { children: vertical ? _jsx(SwapVertIcon, {}) : _jsx(SwapHorizIcon, {}) })));
+    return (_jsx(IconButton, { onClick: handleClick, size: "small", children: vertical ? _jsx(SwapVertIcon, {}) : _jsx(SwapHorizIcon, {}) }));
 };

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

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

@@ -17,6 +17,7 @@ export const Select = styled(MuiSelect, {
     },
     [`.${selectClasses.icon}`]: {
         right: 10,
+        color: theme.palette.text.primary,
     },
     [`.${listItemIconClasses.root}`]: {
         minWidth: 38,

package/components/SelectChainAndToken.js

@@ -17,8 +17,8 @@ export const SelectChainAndToken = (props) => {
         ],
     });
     const disabledReverse = variant === 'refuel' ||
-        (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(DisabledUI.FromToken)) ||
-        (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(DisabledUI.ToToken));
+        disabledUI?.includes(DisabledUI.FromToken) ||
+        disabledUI?.includes(DisabledUI.ToToken);
     const nftVariant = variant === 'nft';
     const isCompact = fromChain &&
         toChain &&
@@ -26,9 +26,9 @@ export const SelectChainAndToken = (props) => {
         toToken &&
         !prefersNarrowView &&
         !nftVariant;
-    return (_jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' } }, props, { children: [_jsx(SelectTokenButton, { formType: "from", compact: isCompact }), !nftVariant ? (_jsx(Box, Object.assign({ sx: {
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' }, ...props, children: [_jsx(SelectTokenButton, { formType: "from", compact: isCompact }), !nftVariant ? (_jsx(Box, { sx: {
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
-                }, m: !disabledReverse ? -1.125 : 1 }, { children: !disabledReverse ? (_jsx(ReverseTokensButton, { vertical: !isCompact })) : null }))) : null, !nftVariant ? (_jsx(SelectTokenButton, { formType: "to", compact: isCompact })) : null] })));
+                }, m: !disabledReverse ? -1.125 : 1, children: !disabledReverse ? (_jsx(ReverseTokensButton, { vertical: !isCompact })) : null })) : null, !nftVariant ? (_jsx(SelectTokenButton, { formType: "to", compact: isCompact })) : null] }));
 };

package/components/SelectTokenButton/SelectTokenButton.js

@@ -27,12 +27,12 @@ export const SelectTokenButton = ({ formType, compact }) => {
                 : 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 (_jsxs(Card, Object.assign({ flex: 1, onClick: onClick }, { children: [_jsx(CardTitle, { children: cardTitle }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (_jsx(SelectTokenCardHeader, { avatar: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }), title: _jsx(Skeleton, { variant: "text", width: 64, height: 24 }), subheader: _jsx(Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : (_jsx(SelectTokenCardHeader, { avatar: isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain })) : (_jsx(TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultPlaceholder, subheader: isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] })));
+    return (_jsxs(Card, { flex: 1, onClick: onClick, children: [_jsx(CardTitle, { children: cardTitle }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (_jsx(SelectTokenCardHeader, { avatar: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }), title: _jsx(Skeleton, { variant: "text", width: 64, height: 24 }), subheader: _jsx(Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : (_jsx(SelectTokenCardHeader, { avatar: isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain })) : (_jsx(TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultPlaceholder, subheader: isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] }));
 };

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

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isAddress } from '@ethersproject/address';
 import { Collapse, FormHelperText } from '@mui/material';
@@ -25,9 +16,9 @@ export const SendToWallet = forwardRef((props, ref) => {
     const { disabledUI, hiddenUI, requiredUI, toAddress } = useWidgetConfig();
     const { showSendToWallet, showSendToWalletDirty, setSendToWallet } = useSendToWalletStore();
     const { showDestinationWallet } = useSettings(['showDestinationWallet']);
-    const hiddenToAddress = hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(HiddenUI.ToAddress);
-    const disabledToAddress = disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(DisabledUI.ToAddress);
-    const requiredToAddress = requiredUI === null || requiredUI === void 0 ? void 0 : requiredUI.includes(DisabledUI.ToAddress);
+    const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress);
+    const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress);
+    const requiredToAddress = requiredUI?.includes(DisabledUI.ToAddress);
     // We want to show toAddress field if it is set via widget configuration and not hidden
     const showInstantly = Boolean(!showSendToWalletDirty &&
         showDestinationWallet &&
@@ -53,25 +44,24 @@ export const SendToWallet = forwardRef((props, ref) => {
     const { onChange, onBlur, name, ref: inputRef, } = register(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 (isAddress(address || value) ||
                     t('swap.error.title.walletAddressInvalid'));
             }
-            catch (_a) {
+            catch {
                 return t('swap.error.title.walletEnsAddressInvalid');
             }
-        }),
+        },
         onBlur: () => trigger(SwapFormKey.ToAddress),
     });
-    return (_jsx(Collapse, Object.assign({ timeout: showInstantly ? 0 : 225, in: showSendToWallet || showInstantly, mountOnEnter: true, unmountOnExit: true }, { children: _jsxs(Card, Object.assign({}, props, { ref: ref }, { children: [_jsx(CardTitle, Object.assign({ required: requiredToAddress }, { children: t('swap.sendToWallet') })), _jsxs(FormControl, Object.assign({ fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' } }, { children: [_jsx(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) }), _jsx(SendToWalletFormHelperText, {})] }))] })) })));
+    return (_jsx(Collapse, { timeout: showInstantly ? 0 : 225, in: showSendToWallet || showInstantly, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Card, { ...props, ref: ref, children: [_jsx(CardTitle, { required: requiredToAddress, children: t('swap.sendToWallet') }), _jsxs(FormControl, { fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' }, children: [_jsx(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) }), _jsx(SendToWalletFormHelperText, {})] })] }) }));
 });
 export const SendToWalletFormHelperText = () => {
-    var _a;
     const { errors } = useFormState();
-    return (_jsx(FormHelperText, Object.assign({ error: !!errors.toAddress }, { children: (_a = errors.toAddress) === null || _a === void 0 ? void 0 : _a.message })));
+    return (_jsx(FormHelperText, { error: !!errors.toAddress, children: errors.toAddress?.message }));
 };

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

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

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

@@ -3,7 +3,7 @@ import { Done as DoneIcon, ErrorRounded as ErrorIcon, InfoRounded as InfoIcon, W
 import { darken } from '@mui/material/styles';
 import { CircularIcon, CircularProgressPending } from './CircularProgress.style';
 export function CircularProgress({ process }) {
-    return (_jsxs(CircularIcon, Object.assign({ status: process.status, substatus: process.substatus }, { children: [process.status === 'STARTED' || process.status === 'PENDING' ? (_jsx(CircularProgressPending, { size: 32, thickness: 3 })) : null, process.status === 'ACTION_REQUIRED' ? (_jsx(InfoIcon, { color: "info", sx: {
+    return (_jsxs(CircularIcon, { status: process.status, substatus: process.substatus, children: [process.status === 'STARTED' || process.status === 'PENDING' ? (_jsx(CircularProgressPending, { size: 32, thickness: 3 })) : null, process.status === 'ACTION_REQUIRED' ? (_jsx(InfoIcon, { color: "info", sx: {
                     position: 'absolute',
                     fontSize: '1rem',
                 } })) : null, process.status === 'DONE' &&
@@ -17,5 +17,5 @@ export function CircularProgress({ process }) {
                 } })) : null, process.status === 'FAILED' ? (_jsx(ErrorIcon, { color: "error", sx: {
                     position: 'absolute',
                     fontSize: '1rem',
-                } })) : null] })));
+                } })) : null] }));
 }

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

@@ -5,24 +5,23 @@ import { useTranslation } from 'react-i18next';
 import { CircularIcon } from './CircularProgress.style';
 import { LinkButton } from './StepProcess.style';
 export const DestinationWalletAddress = ({ step, toAddress, toAddressLink }) => {
-    var _a;
     const { t } = useTranslation();
-    const isDone = ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE';
-    return (_jsx(Box, Object.assign({ px: 2, py: 1 }, { children: _jsxs(Box, Object.assign({ sx: {
+    const isDone = step.execution?.status === 'DONE';
+    return (_jsx(Box, { px: 2, py: 1, children: _jsxs(Box, { sx: {
                 display: 'flex',
                 alignItems: 'center',
-            } }, { children: [_jsx(CircularIcon, Object.assign({ status: isDone ? 'DONE' : 'NOT_STARTED' }, { children: _jsx(WalletOutlinedIcon, { color: isDone ? 'success' : 'inherit', sx: {
+            }, children: [_jsx(CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: _jsx(WalletOutlinedIcon, { color: isDone ? 'success' : 'inherit', sx: {
                             position: 'absolute',
                             fontSize: '1rem',
-                        } }) })), _jsx(Typography, Object.assign({ ml: 2, fontSize: 14, fontWeight: 400 }, { children: isDone
+                        } }) }), _jsx(Typography, { ml: 2, fontSize: 14, fontWeight: 400, children: isDone
                         ? t('swap.sentToAddress', {
                             address: toAddress,
                         })
                         : t('swap.sendToAddress', {
                             address: toAddress,
-                        }) })), _jsx(Box, Object.assign({ ml: 2, sx: {
+                        }) }), _jsx(Box, { ml: 2, sx: {
                         display: 'flex',
                         flex: 1,
                         justifyContent: 'flex-end',
-                    } }, { children: _jsx(LinkButton, Object.assign({ size: "small", edge: "end", LinkComponent: Link, href: toAddressLink, target: "_blank", rel: "nofollow noreferrer" }, { children: _jsx(LinkIcon, {}) })) }))] })) })));
+                    }, children: _jsx(LinkButton, { size: "small", edge: "end", LinkComponent: Link, href: toAddressLink, target: "_blank", rel: "nofollow noreferrer", children: _jsx(LinkIcon, {}) }) })] }) }));
 };

package/components/Step/GasStepProcess.js

@@ -4,17 +4,17 @@ import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CircularIcon } from './CircularProgress.style';
 export const GasStepProcess = ({ step }) => {
-    var _a, _b, _c, _d;
     const { t } = useTranslation();
-    const isDone = ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE';
-    return (_jsx(Box, Object.assign({ px: 2, py: 1 }, { children: _jsxs(Box, Object.assign({ sx: {
+    const isDone = step.execution?.status === 'DONE';
+    return (_jsx(Box, { px: 2, py: 1, children: _jsxs(Box, { sx: {
                 display: 'flex',
                 alignItems: 'center',
-            } }, { children: [_jsx(CircularIcon, Object.assign({ status: isDone ? 'DONE' : 'NOT_STARTED' }, { children: _jsx(EvStationIcon, { color: isDone ? 'success' : 'inherit', sx: {
+            }, children: [_jsx(CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: _jsx(EvStationIcon, { color: isDone ? 'success' : 'inherit', sx: {
                             position: 'absolute',
                             fontSize: '1rem',
-                        } }) })), _jsxs(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')] }))] })) })));
+                        } }) }), _jsxs(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')] })] }) }));
 };