@lifi/widget 1.18.8 → 1.19.0

package/App.js

@@ -6,11 +6,11 @@ import { Header } from './components/Header';
 import { Initializer } from './components/Initializer';
 import { PoweredBy } from './components/PoweredBy';
 import { SwapRoutesExpanded } from './components/SwapRoutes';
-import { useWidgetConfig } from './providers';
+import { useExpandableVariant } from './hooks';
 export const App = ({ config }) => {
     return (_jsx(AppProvider, Object.assign({ config: config }, { children: _jsx(AppDefault, {}) })));
 };
 export const AppDefault = () => {
-    const { variant } = useWidgetConfig();
-    return (_jsxs(AppExpandedContainer, { children: [_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsx(FlexContainer, Object.assign({ disableGutters: true }, { children: _jsx(AppRoutes, {}) })), _jsx(PoweredBy, {}), _jsx(Initializer, {})] }), variant === 'expandable' ? _jsx(SwapRoutesExpanded, {}) : null] }));
+    const expandable = useExpandableVariant();
+    return (_jsxs(AppExpandedContainer, { children: [_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsx(FlexContainer, Object.assign({ disableGutters: true }, { children: _jsx(AppRoutes, {}) })), _jsx(PoweredBy, {}), _jsx(Initializer, {})] }), expandable ? _jsx(SwapRoutesExpanded, {}) : null] }));
 };

package/cjs/App.js

@@ -9,13 +9,13 @@ const Header_1 = require("./components/Header");
 const Initializer_1 = require("./components/Initializer");
 const PoweredBy_1 = require("./components/PoweredBy");
 const SwapRoutes_1 = require("./components/SwapRoutes");
-const providers_1 = require("./providers");
+const hooks_1 = require("./hooks");
 const App = ({ config }) => {
     return ((0, jsx_runtime_1.jsx)(AppProvider_1.AppProvider, Object.assign({ config: config }, { children: (0, jsx_runtime_1.jsx)(exports.AppDefault, {}) })));
 };
 exports.App = App;
 const AppDefault = () => {
-    const { variant } = (0, providers_1.useWidgetConfig)();
-    return ((0, jsx_runtime_1.jsxs)(AppContainer_1.AppExpandedContainer, { children: [(0, jsx_runtime_1.jsxs)(AppContainer_1.AppContainer, { children: [(0, jsx_runtime_1.jsx)(Header_1.Header, {}), (0, jsx_runtime_1.jsx)(AppContainer_1.FlexContainer, Object.assign({ disableGutters: true }, { children: (0, jsx_runtime_1.jsx)(AppRoutes_1.AppRoutes, {}) })), (0, jsx_runtime_1.jsx)(PoweredBy_1.PoweredBy, {}), (0, jsx_runtime_1.jsx)(Initializer_1.Initializer, {})] }), variant === 'expandable' ? (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutesExpanded, {}) : null] }));
+    const expandable = (0, hooks_1.useExpandableVariant)();
+    return ((0, jsx_runtime_1.jsxs)(AppContainer_1.AppExpandedContainer, { children: [(0, jsx_runtime_1.jsxs)(AppContainer_1.AppContainer, { children: [(0, jsx_runtime_1.jsx)(Header_1.Header, {}), (0, jsx_runtime_1.jsx)(AppContainer_1.FlexContainer, Object.assign({ disableGutters: true }, { children: (0, jsx_runtime_1.jsx)(AppRoutes_1.AppRoutes, {}) })), (0, jsx_runtime_1.jsx)(PoweredBy_1.PoweredBy, {}), (0, jsx_runtime_1.jsx)(Initializer_1.Initializer, {})] }), expandable ? (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutesExpanded, {}) : null] }));
 };
 exports.AppDefault = AppDefault;

package/cjs/components/ActiveSwaps/ActiveSwaps.js

@@ -23,7 +23,7 @@ const ActiveSwaps = (props) => {
         navigate(utils_1.navigationRoutes.activeSwaps);
     };
     const hasShowAll = (executingRoutes === null || executingRoutes === void 0 ? void 0 : executingRoutes.length) > 2;
-    return ((0, jsx_runtime_1.jsxs)(ActiveSwaps_style_1.ProgressCard, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('header.activeSwaps') }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2 }, { children: executingRoutes.slice(0, 2).map((routeId) => ((0, jsx_runtime_1.jsx)(ActiveSwapItem_1.ActiveSwapItem, { routeId: routeId, dense: true }, routeId))) })), hasShowAll ? ((0, jsx_runtime_1.jsx)(ActiveSwaps_style_1.ShowAllButton, Object.assign({ disableRipple: true, fullWidth: true, onClick: handleShowAll, sx: (theme) => ({
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ variant: "selected", selectionColor: "secondary" }, props, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('header.activeSwaps') }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2 }, { children: executingRoutes.slice(0, 2).map((routeId) => ((0, jsx_runtime_1.jsx)(ActiveSwapItem_1.ActiveSwapItem, { routeId: routeId, dense: true }, routeId))) })), hasShowAll ? ((0, jsx_runtime_1.jsx)(ActiveSwaps_style_1.ShowAllButton, Object.assign({ disableRipple: true, fullWidth: true, onClick: handleShowAll, sx: (theme) => ({
                     padding: theme.spacing(0.75, 2),
                 }) }, { children: t('button.showAll') }))) : null] })));
 };

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

@@ -1,18 +1,4 @@
 /// <reference types="react" />
-export declare const ProgressCard: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    children?: import("react").ReactNode;
-    component?: import("react").ElementType<any> | undefined;
-    ref?: import("react").Ref<unknown> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "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> & {
-    variant?: ("default" | "error" | "selected") | undefined;
-    selectionColor?: "primary" | "secondary" | undefined;
-    dense?: boolean | undefined;
-    indented?: boolean | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-}, {}, {}>;
 export declare const ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;

package/cjs/components/ActiveSwaps/ActiveSwaps.style.js

@@ -1,18 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ShowAllButton = exports.ListItem = exports.ListItemButton = exports.ProgressCard = void 0;
+exports.ShowAllButton = exports.ListItem = exports.ListItemButton = void 0;
 const material_1 = require("@mui/material");
 const ListItemSecondaryAction_1 = require("@mui/material/ListItemSecondaryAction");
 const styles_1 = require("@mui/material/styles");
 const utils_1 = require("../../utils");
-const Card_1 = require("../Card");
-exports.ProgressCard = (0, styles_1.styled)(Card_1.Card)(({ theme }) => ({
-    borderColor: (0, styles_1.alpha)(theme.palette.secondary.main, 0.48),
-    background: (0, styles_1.alpha)(theme.palette.secondary.main, 0.08),
-    '&:hover': {
-        background: (0, styles_1.alpha)(theme.palette.secondary.main, 0.08),
-    },
-}));
 exports.ListItemButton = (0, styles_1.styled)(material_1.ListItemButton)(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusSecondary,
     paddingLeft: theme.spacing(1.5),

package/cjs/components/AppContainer.d.ts

@@ -1,5 +1,16 @@
 import type { PropsWithChildren } from 'react';
+import type { WidgetVariant } from '../types';
 export declare const maxHeight = 680;
+export declare const AppExpandedContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "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> & {
+    variant?: WidgetVariant | undefined;
+}, {}, {}>;
 export declare const FlexContainer: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ContainerClasses> | undefined;
@@ -11,4 +22,3 @@ export declare const FlexContainer: import("@emotion/styled").StyledComponent<{
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "maxWidth" | "fixed" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const AppContainer: React.FC<PropsWithChildren<{}>>;
-export declare const AppExpandedContainer: React.FC<PropsWithChildren<{}>>;

package/cjs/components/AppContainer.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppExpandedContainer = exports.AppContainer = exports.FlexContainer = exports.maxHeight = void 0;
+exports.AppContainer = exports.FlexContainer = exports.AppExpandedContainer = exports.maxHeight = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const providers_1 = require("../providers");
 const utils_1 = require("../utils");
 exports.maxHeight = 680;
-const ExpandedContainer = (0, styles_1.styled)(material_1.Box, {
+exports.AppExpandedContainer = (0, styles_1.styled)(material_1.Box, {
     shouldForwardProp: (prop) => prop !== 'variant',
 })(({ variant }) => ({
     display: 'flex',
@@ -33,6 +33,7 @@ const RelativeContainer = (0, styles_1.styled)(material_1.Box, {
 const CssBaselineContainer = (0, styles_1.styled)(material_1.ScopedCssBaseline, {
     shouldForwardProp: (prop) => prop !== 'variant',
 })(({ variant }) => ({
+    position: 'relative',
     display: 'flex',
     flex: 1,
     flexDirection: 'column',
@@ -54,7 +55,3 @@ const AppContainer = ({ children }) => {
     return ((0, jsx_runtime_1.jsx)(RelativeContainer, Object.assign({ sx: containerStyle, variant: variant }, { children: (0, jsx_runtime_1.jsx)(CssBaselineContainer, Object.assign({ id: utils_1.ElementId.ScrollableContainer, variant: variant, enableColorScheme: true }, { children: (0, jsx_runtime_1.jsx)(exports.FlexContainer, Object.assign({ disableGutters: true }, { children: children })) })) })));
 };
 exports.AppContainer = AppContainer;
-const AppExpandedContainer = ({ children, }) => {
-    return (0, jsx_runtime_1.jsx)(ExpandedContainer, { children: children });
-};
-exports.AppExpandedContainer = AppExpandedContainer;

package/cjs/components/BottomSheet/BottomSheet.js

@@ -4,44 +4,21 @@ exports.BottomSheet = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
-const hooks_1 = require("../../hooks");
+const Dialog_1 = require("../Dialog");
 exports.BottomSheet = (0, react_1.forwardRef)(({ elementRef, children, open }, ref) => {
     const openRef = (0, react_1.useRef)(open);
     const [drawerOpen, setDrawerOpen] = (0, react_1.useState)(open);
-    const containerElement = (0, hooks_1.useScrollableContainer)();
-    const openDrawer = (0, react_1.useCallback)(() => {
-        setDrawerOpen(true);
-        openRef.current = true;
-    }, []);
-    const closeDrawer = (0, react_1.useCallback)(() => {
+    const close = (0, react_1.useCallback)(() => {
         setDrawerOpen(false);
         openRef.current = false;
     }, []);
     (0, react_1.useImperativeHandle)(ref, () => ({
         isOpen: () => openRef.current,
-        openDrawer,
-        closeDrawer,
-    }), [closeDrawer, openDrawer]);
-    return ((0, jsx_runtime_1.jsx)(material_1.Drawer, Object.assign({ container: containerElement, ref: elementRef, anchor: "bottom", open: drawerOpen, onClose: closeDrawer, ModalProps: {
-            sx: {
-                position: 'absolute',
-                overflow: 'hidden',
-            },
-            keepMounted: true,
-        }, PaperProps: {
-            sx: (theme) => ({
-                position: 'absolute',
-                backgroundImage: 'none',
-                borderTopLeftRadius: theme.shape.borderRadius,
-                borderTopRightRadius: theme.shape.borderRadius,
-            }),
-        }, BackdropProps: {
-            sx: {
-                position: 'absolute',
-                backgroundColor: 'rgb(0 0 0 / 48%)',
-                backdropFilter: 'blur(3px)',
-            },
-        }, SlideProps: {
-            container: containerElement,
-        } }, { children: children })));
+        open: () => {
+            setDrawerOpen(true);
+            openRef.current = true;
+        },
+        close,
+    }), [close]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Drawer, Object.assign({ ref: elementRef, anchor: "bottom", open: drawerOpen, onClose: close, ModalProps: Dialog_1.modalProps, PaperProps: Dialog_1.paperProps, BackdropProps: Dialog_1.backdropProps, disableAutoFocus: true, disableEnforceFocus: true, disableScrollLock: true, disablePortal: true }, { children: children })));
 });

package/cjs/components/BottomSheet/types.d.ts

@@ -5,6 +5,6 @@ export declare type BottomSheetProps = DrawerProps & {
 };
 export interface BottomSheetBase {
     isOpen(): void;
-    openDrawer(): void;
-    closeDrawer(): void;
+    open(): void;
+    close(): void;
 }

package/cjs/components/Card/Card.js

@@ -8,7 +8,7 @@ const getBackgroundColor = (theme, variant, selectionColor) => variant === 'sele
         ? theme.palette.mode === 'light'
             ? (0, styles_1.alpha)(theme.palette.primary.main, 0.04)
             : (0, styles_1.alpha)(theme.palette.primary.main, 0.42)
-        : (0, styles_1.alpha)(theme.palette.secondary.main, 0.08)
+        : (0, styles_1.alpha)(theme.palette.secondary.main, theme.palette.mode === 'light' ? 0.08 : 0.12)
     : theme.palette.background.paper;
 exports.Card = (0, styles_1.styled)(material_1.Box, {
     shouldForwardProp: (prop) => !['dense', 'variant', 'indented', 'selectionColor'].includes(prop),

package/cjs/components/Card/CardHeader.d.ts

@@ -15,4 +15,4 @@ export declare const CardHeader: import("@emotion/styled").StyledComponent<{
     }> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "title" | "action" | "sx" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "title" | "action" | "sx" | "disableTypography" | "avatar" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/ChainSelect/ChainSelect.js

@@ -25,7 +25,7 @@ const ChainSelect = ({ formType }) => {
     const chainsToHide = ((_a = chains === null || chains === void 0 ? void 0 : chains.length) !== null && _a !== void 0 ? _a : 0) - stores_1.maxChainToOrder;
     return ((0, jsx_runtime_1.jsxs)(ChainSelect_style_1.ChainContainer, { children: [isLoading
                 ? Array.from({ length: stores_1.maxChainToOrder + 1 }).map((_, index) => ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 56, height: 56, sx: { borderRadius: 1 } }, index)))
-                : getChains().map((chain) => ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: chain.name, placement: "top", enterDelay: 500, enterNextDelay: 500, arrow: true }, { children: (0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, Object.assign({ onClick: () => setCurrentChain(chain.id), variant: chainId === chain.id ? 'selected' : 'default' }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: chain.logoURI, alt: chain.key, sx: { width: 40, height: 40 } }, { children: chain.name[0] })) })) }), chain.id))), chainsToHide > 0 ? ((0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, Object.assign({ onClick: showAllChains }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
+                : getChains().map((chain) => ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: chain.name, placement: "top", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, Object.assign({ onClick: () => setCurrentChain(chain.id), variant: chainId === chain.id ? 'selected' : 'default' }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: chain.logoURI, alt: chain.key, sx: { width: 40, height: 40 } }, { children: chain.name[0] })) })) }), chain.id))), chainsToHide > 0 ? ((0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, Object.assign({ onClick: showAllChains }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
                         width: 40,
                         height: 40,
                         display: 'grid',

package/cjs/components/ChainSelect/useChainSelect.js

@@ -20,10 +20,8 @@ const useChainSelect = (formType) => {
         return selectedChains;
     };
     const setCurrentChain = (chainId) => {
-        setValue(chainKey, chainId, { shouldDirty: true });
-        setValue(providers_1.SwapFormKeyHelper.getTokenKey(formType), '', {
-            shouldDirty: false,
-        });
+        setValue(chainKey, chainId, { shouldTouch: true });
+        setValue(providers_1.SwapFormKeyHelper.getTokenKey(formType), '');
         setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), '');
         setValue(providers_1.SwapFormKey.TokenSearchFilter, '');
         setChainOrder(chainId);

package/cjs/components/Dialog.d.ts

@@ -1,3 +1,24 @@
-import type { DialogProps } from '@mui/material';
+import type { DialogProps, Theme } from '@mui/material';
 import type { PropsWithChildren } from 'react';
+export declare const modalProps: {
+    sx: {
+        position: string;
+        overflow: string;
+    };
+};
+export declare const paperProps: {
+    sx: (theme: Theme) => {
+        position: string;
+        backgroundImage: string;
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+    };
+};
+export declare const backdropProps: {
+    sx: {
+        position: string;
+        backgroundColor: string;
+        backdropFilter: string;
+    };
+};
 export declare const Dialog: React.FC<PropsWithChildren<DialogProps>>;

package/cjs/components/Dialog.js

@@ -1,27 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dialog = void 0;
+exports.Dialog = exports.backdropProps = exports.paperProps = exports.modalProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const hooks_1 = require("../hooks");
+exports.modalProps = {
+    sx: {
+        position: 'absolute',
+        overflow: 'hidden',
+    },
+};
+exports.paperProps = {
+    sx: (theme) => ({
+        position: 'absolute',
+        backgroundImage: 'none',
+        borderTopLeftRadius: theme.shape.borderRadius,
+        borderTopRightRadius: theme.shape.borderRadius,
+    }),
+};
+exports.backdropProps = {
+    sx: {
+        position: 'absolute',
+        backgroundColor: 'rgb(0 0 0 / 32%)',
+        backdropFilter: 'blur(3px)',
+    },
+};
 const Dialog = ({ children, open, onClose, }) => {
-    const containerElement = (0, hooks_1.useScrollableContainer)();
-    return ((0, jsx_runtime_1.jsx)(material_1.Dialog, Object.assign({ open: open, onClose: onClose, container: containerElement, sx: {
-            position: 'absolute',
-            overflow: 'hidden',
-        }, PaperProps: {
-            sx: (theme) => ({
-                position: 'absolute',
-                backgroundImage: 'none',
-                borderTopLeftRadius: theme.shape.borderRadius,
-                borderTopRightRadius: theme.shape.borderRadius,
-            }),
-        }, BackdropProps: {
-            sx: {
-                position: 'absolute',
-                backgroundColor: 'rgb(0 0 0 / 32%)',
-                backdropFilter: 'blur(3px)',
-            },
-        } }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(material_1.Dialog, Object.assign({ open: open, onClose: onClose, sx: exports.modalProps.sx, PaperProps: exports.paperProps, BackdropProps: exports.backdropProps, disableAutoFocus: true, disableEnforceFocus: true, disableScrollLock: true, disablePortal: true }, { children: children })));
 };
 exports.Dialog = Dialog;

package/cjs/components/GasSufficiencyMessage/GasSufficiencyMessage.js

@@ -23,27 +23,24 @@ const GasSufficiencyMessage_style_1 = require("./GasSufficiencyMessage.style");
 const GasSufficiencyMessage = (_a) => {
     var { route } = _a, props = __rest(_a, ["route"]);
     const { t } = (0, react_i18next_1.useTranslation)();
-    const selectedRoute = (0, stores_1.useSelectedRouteStore)((state) => state.selectedRoute);
-    const { insufficientFunds, insufficientGas } = (0, hooks_1.useGasSufficiency)(route !== null && route !== void 0 ? route : selectedRoute);
-    if (!insufficientFunds && !(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsxs)(GasSufficiencyMessage_style_1.MessageCard, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.WarningAmber, { sx: {
-                    marginTop: 2,
-                    marginLeft: 2,
-                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? ((0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pb: (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? 0 : 2, pt: (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? 1 : 2 }, { children: insufficientFunds
-                            ? t(`swap.warning.message.insufficientFunds`)
-                            : null }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pt: 1 }, { children: t(`swap.warning.message.insufficientGas`) }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)
-                        ? insufficientGas.map((item, index) => {
-                            var _a, _b;
-                            return ((0, jsx_runtime_1.jsx)(material_1.Typography
-                            // eslint-disable-next-line react/no-array-index-key
-                            , Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length - 1 === index ? 2 : 0, pt: 0.5 }, { children: t(`swap.tokenOnChainAmount`, {
-                                    amount: (_a = item.insufficientAmount) === null || _a === void 0 ? void 0 : _a.toString(),
-                                    tokenSymbol: item.token.symbol,
-                                    chainName: (_b = item.chain) === null || _b === void 0 ? void 0 : _b.name,
-                                }) }), index));
-                        })
-                        : null] })] })));
+    const recommendedRoute = (0, stores_1.useRecommendedRouteStore)((state) => state.recommendedRoute);
+    const { insufficientFunds, insufficientGas } = (0, hooks_1.useGasSufficiency)(route !== null && route !== void 0 ? route : recommendedRoute);
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ timeout: 225, in: Boolean(insufficientFunds || (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)), unmountOnExit: true, mountOnEnter: true, appear: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({}, props, { children: (0, jsx_runtime_1.jsxs)(GasSufficiencyMessage_style_1.MessageCard, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.WarningAmber, { sx: {
+                            marginTop: 2,
+                            marginLeft: 2,
+                        } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? ((0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pb: (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? 0 : 2, pt: (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? 1 : 2 }, { children: insufficientFunds
+                                    ? t(`swap.warning.message.insufficientFunds`)
+                                    : null }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pt: 1 }, { children: t(`swap.warning.message.insufficientGas`) }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)
+                                ? insufficientGas.map((item, index) => {
+                                    var _a, _b;
+                                    return ((0, jsx_runtime_1.jsx)(material_1.Typography
+                                    // eslint-disable-next-line react/no-array-index-key
+                                    , Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length - 1 === index ? 2 : 0, pt: 0.5 }, { children: t(`swap.tokenOnChainAmount`, {
+                                            amount: (_a = item.insufficientAmount) === null || _a === void 0 ? void 0 : _a.toString(),
+                                            tokenSymbol: item.token.symbol,
+                                            chainName: (_b = item.chain) === null || _b === void 0 ? void 0 : _b.name,
+                                        }) }), index));
+                                })
+                                : null] })] }) })) })));
 };
 exports.GasSufficiencyMessage = GasSufficiencyMessage;

package/cjs/components/Header/NavigationHeader.js

@@ -49,6 +49,6 @@ const NavigationHeader = () => {
                 return t(`header.swap`);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, Object.assign({ elevation: 0 }, { children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "start", onClick: navigateBack }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowBack, {}) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [account.isActive ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "swap-history", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.swapHistory) }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.History, {}) }))) : null, (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: () => navigate(utils_1.navigationRoutes.settings) }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.SettingsOutlined, {}) }))] }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: element || (0, jsx_runtime_1.jsx)(material_1.Box, { width: 28, height: 40 }) })] })] })));
+    return ((0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, Object.assign({ elevation: 0 }, { children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "start", onClick: navigateBack }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowBack, {}) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [account.isActive ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`header.swapHistory`), enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.swapHistory) }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.History, {}) })) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`header.settings`), enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "end", onClick: () => navigate(utils_1.navigationRoutes.settings) }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.SettingsOutlined, {}) })) }))] }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: element || (0, jsx_runtime_1.jsx)(material_1.Box, { width: 28, height: 40 }) })] })] })));
 };
 exports.NavigationHeader = NavigationHeader;

package/cjs/components/Header/WalletHeader.js

@@ -26,7 +26,7 @@ const WalletHeader = () => {
                         display: 'flex',
                         flex: 1,
                         flexDirection: 'column',
-                    }, mr: 0.5 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption", align: "right" }, { children: t(`header.walletConnected`) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", align: "right", fontWeight: "600" }, { children: walletAddress }))] })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "disconnect", edge: "end", onClick: disconnect }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Logout, {}) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", align: "right", fontWeight: "600", flex: 1, mr: 0.5 }, { children: t(`header.connectWallet`) })), (0, jsx_runtime_1.jsx)(ConnectButton, {})] })) })));
+                    }, mr: 0.5 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption", align: "right" }, { children: t(`header.walletConnected`) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", align: "right", fontWeight: "600" }, { children: walletAddress }))] })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "end", onClick: disconnect }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Logout, {}) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", align: "right", fontWeight: "600", flex: 1, mr: 0.5 }, { children: t(`header.connectWallet`) })), (0, jsx_runtime_1.jsx)(ConnectButton, {})] })) })));
 };
 exports.WalletHeader = WalletHeader;
 const ConnectButton = () => {
@@ -41,5 +41,5 @@ const ConnectButton = () => {
         }
         navigate(utils_1.navigationRoutes.selectWallet);
     });
-    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "disconnect", edge: "end", onClick: !pathname.includes(utils_1.navigationRoutes.selectWallet) ? connect : undefined }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.WalletOutlined, {}) })));
+    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "end", onClick: !pathname.includes(utils_1.navigationRoutes.selectWallet) ? connect : undefined }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.WalletOutlined, {}) })));
 };

package/cjs/components/PoweredBy/PoweredBy.js

@@ -18,6 +18,6 @@ const PoweredBy = () => {
             display: 'flex',
             alignItems: 'flex-end',
             justifyContent: 'flex-end',
-        } }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: `v${version_1.version}`, placement: "top", enterDelay: 5000, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(PoweredBy_style_1.Link, Object.assign({ href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "text.secondary", fontSize: 12, px: 0.5 }, { children: "Powered by" })), (0, jsx_runtime_1.jsx)(LiFiLogo_1.LiFiLogo, { variant: "full", style: { height: 16, width: 42 } })] })) })) })));
+        } }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: `v${version_1.version}`, placement: "top", enterDelay: 3000, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(PoweredBy_style_1.Link, Object.assign({ href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "text.secondary", fontSize: 12, px: 0.5 }, { children: "Powered by" })), (0, jsx_runtime_1.jsx)(LiFiLogo_1.LiFiLogo, { variant: "full", style: { height: 16, width: 42 } })] })) })) })));
 };
 exports.PoweredBy = PoweredBy;

package/cjs/components/ProgressToNextUpdate/ProgressToNextUpdate.js

@@ -42,7 +42,7 @@ const ProgressToNextUpdate = (_a) => {
     }, [isLoading]);
     return ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: onClick, disabled: isLoading }, other, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t('tooltip.progressToNextUpdate', {
                 value: getSecondsToUpdate(updatedAt, timeToUpdate),
-            }), placement: "top", enterDelay: 250, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+            }), placement: "top", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
                     display: 'grid',
                     position: 'relative',
                     placeItems: 'center',

package/cjs/components/ReverseTokensButton/ReverseTokensButton.js

@@ -15,12 +15,12 @@ const ReverseTokensButton = ({ vertical, }) => {
             providers_1.SwapFormKey.ToChain,
             providers_1.SwapFormKey.ToToken,
         ]);
-        setValue(providers_1.SwapFormKey.FromAmount, '');
-        setValue(providers_1.SwapFormKey.FromChain, toChain);
-        setValue(providers_1.SwapFormKey.FromToken, toToken);
-        setValue(providers_1.SwapFormKey.ToChain, fromChain);
-        setValue(providers_1.SwapFormKey.ToToken, fromToken);
+        setValue(providers_1.SwapFormKey.FromAmount, '', { shouldTouch: true });
+        setValue(providers_1.SwapFormKey.FromChain, toChain, { shouldTouch: true });
+        setValue(providers_1.SwapFormKey.FromToken, toToken, { shouldTouch: true });
+        setValue(providers_1.SwapFormKey.ToChain, fromChain, { shouldTouch: true });
+        setValue(providers_1.SwapFormKey.ToToken, fromToken, { shouldTouch: true });
     };
-    return ((0, jsx_runtime_1.jsx)(ReverseTokensButton_style_1.IconButton, Object.assign({ onClick: handleClick, size: "small", "aria-label": "swap-destinations" }, { children: vertical ? (0, jsx_runtime_1.jsx)(icons_material_1.SwapVert, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.SwapHoriz, {}) })));
+    return ((0, jsx_runtime_1.jsx)(ReverseTokensButton_style_1.IconButton, Object.assign({ onClick: handleClick, size: "small" }, { children: vertical ? (0, jsx_runtime_1.jsx)(icons_material_1.SwapVert, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.SwapHoriz, {}) })));
 };
 exports.ReverseTokensButton = ReverseTokensButton;

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

@@ -15,7 +15,7 @@ export declare const SelectTokenCardHeader: import("@emotion/styled").StyledComp
     }> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "title" | "action" | "sx" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+}, 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;
     compact?: boolean | undefined;
 }, {}, {}>;

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

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import type { BoxProps } from '@mui/material';
 export declare const SendToWallet: React.FC<BoxProps>;
+export declare const SendToWalletFormHelperText: React.FC;

package/cjs/components/SendToWallet/SendToWallet.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SendToWallet = void 0;
+exports.SendToWalletFormHelperText = exports.SendToWallet = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const address_1 = require("@ethersproject/address");
 const material_1 = require("@mui/material");
@@ -21,11 +21,10 @@ const Card_1 = require("../Card");
 const SendToWallet_style_1 = require("./SendToWallet.style");
 const store_1 = require("./store");
 exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
-    var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
     const showSendToWallet = (0, store_1.useSendToWalletStore)((state) => state.showSendToWallet);
     const { account, provider } = (0, providers_1.useWallet)();
-    const { register, trigger, formState: { errors }, } = (0, react_hook_form_1.useFormContext)();
+    const { register, trigger } = (0, react_hook_form_1.useFormContext)();
     (0, react_1.useEffect)(() => {
         trigger(providers_1.SwapFormKey.ToAddress);
     }, [account.chainId, trigger]);
@@ -39,11 +38,17 @@ exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
                 return ((0, address_1.isAddress)(address || value) ||
                     t('swap.error.title.walletAddressInvalid'));
             }
-            catch (_b) {
+            catch (_a) {
                 return t('swap.error.title.walletEnsAddressInvalid');
             }
         }),
         onBlur: () => trigger(providers_1.SwapFormKey.ToAddress),
     });
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ timeout: 225, unmountOnExit: true, mountOnEnter: true, in: showSendToWallet }, { children: (0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({}, props, { ref: ref }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { 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'), autoFocus: true }), (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.Collapse, Object.assign({ timeout: 225, in: showSendToWallet, 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, { 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'), autoFocus: true }), (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 })));
+};
+exports.SendToWalletFormHelperText = SendToWalletFormHelperText;

package/cjs/components/SendToWallet/SendToWalletButton.js

@@ -20,11 +20,11 @@ const SendToWalletButton = () => {
     }
     const handleClick = () => {
         if (showSendToWallet) {
-            setValue(providers_1.SwapFormKey.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: 500, enterNextDelay: 500, 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, Object.assign({ title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
                 minWidth: 48,
                 marginLeft: 1,
             } }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.WalletOutlined, {}) })) })));

package/cjs/components/Step/StepProcess.js

@@ -16,6 +16,6 @@ const StepProcess = ({ step, process }) => {
                             display: 'flex',
                             flex: 1,
                             justifyContent: 'flex-end',
-                        } }, { children: (0, jsx_runtime_1.jsx)(StepProcess_style_1.LinkButton, Object.assign({ size: "small", "aria-label": "settings", edge: "end", LinkComponent: material_1.Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Link, {}) })) }))) : 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, 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.Link, {}) })) }))) : null] })), message ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary" }, { children: message }))) : null] })));
 };
 exports.StepProcess = StepProcess;

package/cjs/components/SwapButton/SwapButton.js

@@ -11,19 +11,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const lab_1 = require("@mui/lab");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
-exports.SwapButton = (0, react_1.forwardRef)(({ onClick, currentRoute, text, disable }, ref) => {
+exports.SwapButton = (0, react_1.forwardRef)(({ onClick, currentRoute, text, disable, enableLoading, loading }, ref) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const config = (0, providers_1.useWidgetConfig)();
     const { account, connect } = (0, providers_1.useWallet)();
-    const { insufficientFunds, insufficientGas } = (0, hooks_1.useGasSufficiency)(currentRoute);
+    const { insufficientFunds, insufficientGas, isLoading: isGasSufficiencyLoading, } = (0, hooks_1.useGasSufficiency)(currentRoute);
     const handleSwapButtonClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive) {
             if (config.walletManagement) {
@@ -46,5 +46,5 @@ exports.SwapButton = (0, react_1.forwardRef)(({ onClick, currentRoute, text, dis
         }
         return t(`button.connectWallet`);
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, disabled: insufficientFunds || !!(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) || disable, fullWidth: true, ref: ref }, { children: getButtonText() })));
+    return ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, disabled: insufficientFunds || !!(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) || disable, loading: enableLoading && (loading || isGasSufficiencyLoading), loadingPosition: "center", fullWidth: true, ref: ref }, { children: getButtonText() })));
 });

package/cjs/components/SwapButton/types.d.ts

@@ -4,4 +4,6 @@ export interface SwapButtonProps {
     currentRoute?: Route;
     text?: string;
     disable?: boolean;
+    loading?: boolean;
+    enableLoading?: boolean;
 }