@lifi/widget 1.18.9 → 1.19.0

package/components/ActiveSwaps/ActiveSwaps.js

@@ -5,9 +5,9 @@ import { useNavigate } from 'react-router-dom';
 import { useWallet } from '../../providers';
 import { useExecutingRoutesIds } from '../../stores';
 import { navigationRoutes } from '../../utils';
-import { CardTitle } from '../Card';
+import { Card, CardTitle } from '../Card';
 import { ActiveSwapItem } from './ActiveSwapItem';
-import { ProgressCard, ShowAllButton } from './ActiveSwaps.style';
+import { ShowAllButton } from './ActiveSwaps.style';
 export const ActiveSwaps = (props) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
@@ -20,7 +20,7 @@ export const ActiveSwaps = (props) => {
         navigate(navigationRoutes.activeSwaps);
     };
     const hasShowAll = (executingRoutes === null || executingRoutes === void 0 ? void 0 : executingRoutes.length) > 2;
-    return (_jsxs(ProgressCard, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('header.activeSwaps') }), _jsx(Stack, Object.assign({ spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2 }, { children: executingRoutes.slice(0, 2).map((routeId) => (_jsx(ActiveSwapItem, { routeId: routeId, dense: true }, routeId))) })), hasShowAll ? (_jsx(ShowAllButton, Object.assign({ disableRipple: true, fullWidth: true, onClick: handleShowAll, sx: (theme) => ({
+    return (_jsxs(Card, Object.assign({ variant: "selected", selectionColor: "secondary" }, props, { children: [_jsx(CardTitle, { children: t('header.activeSwaps') }), _jsx(Stack, Object.assign({ spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2 }, { children: executingRoutes.slice(0, 2).map((routeId) => (_jsx(ActiveSwapItem, { routeId: routeId, dense: true }, routeId))) })), hasShowAll ? (_jsx(ShowAllButton, Object.assign({ disableRipple: true, fullWidth: true, onClick: handleShowAll, sx: (theme) => ({
                     padding: theme.spacing(0.75, 2),
                 }) }, { children: t('button.showAll') }))) : null] })));
 };

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

@@ -1,15 +1,7 @@
 import { Button, ListItem as MuiListItem, ListItemButton as MuiListItemButton, } from '@mui/material';
 import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
-import { alpha, styled } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import { getContrastAlphaColor } from '../../utils';
-import { Card } from '../Card';
-export const ProgressCard = styled(Card)(({ theme }) => ({
-    borderColor: alpha(theme.palette.secondary.main, 0.48),
-    background: alpha(theme.palette.secondary.main, 0.08),
-    '&:hover': {
-        background: alpha(theme.palette.secondary.main, 0.08),
-    },
-}));
 export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusSecondary,
     paddingLeft: theme.spacing(1.5),

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

@@ -4,7 +4,7 @@ import { styled } from '@mui/material/styles';
 import { useWidgetConfig } from '../providers';
 import { ElementId } from '../utils';
 export const maxHeight = 680;
-const ExpandedContainer = styled(Box, {
+export const AppExpandedContainer = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'variant',
 })(({ variant }) => ({
     display: 'flex',
@@ -30,6 +30,7 @@ const RelativeContainer = styled(Box, {
 const CssBaselineContainer = styled(ScopedCssBaseline, {
     shouldForwardProp: (prop) => prop !== 'variant',
 })(({ variant }) => ({
+    position: 'relative',
     display: 'flex',
     flex: 1,
     flexDirection: 'column',
@@ -50,6 +51,3 @@ export const AppContainer = ({ children }) => {
     const { containerStyle, variant } = useWidgetConfig();
     return (_jsx(RelativeContainer, Object.assign({ sx: containerStyle, variant: variant }, { children: _jsx(CssBaselineContainer, Object.assign({ id: ElementId.ScrollableContainer, variant: variant, enableColorScheme: true }, { children: _jsx(FlexContainer, Object.assign({ disableGutters: true }, { children: children })) })) })));
 };
-export const AppExpandedContainer = ({ children, }) => {
-    return _jsx(ExpandedContainer, { children: children });
-};

package/components/BottomSheet/BottomSheet.js

@@ -1,44 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Drawer } from '@mui/material';
 import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
-import { useScrollableContainer } from '../../hooks';
+import { backdropProps, modalProps, paperProps } from '../Dialog';
 export const BottomSheet = forwardRef(({ elementRef, children, open }, ref) => {
     const openRef = useRef(open);
     const [drawerOpen, setDrawerOpen] = useState(open);
-    const containerElement = useScrollableContainer();
-    const openDrawer = useCallback(() => {
-        setDrawerOpen(true);
-        openRef.current = true;
-    }, []);
-    const closeDrawer = useCallback(() => {
+    const close = useCallback(() => {
         setDrawerOpen(false);
         openRef.current = false;
     }, []);
     useImperativeHandle(ref, () => ({
         isOpen: () => openRef.current,
-        openDrawer,
-        closeDrawer,
-    }), [closeDrawer, openDrawer]);
-    return (_jsx(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 (_jsx(Drawer, Object.assign({ ref: elementRef, anchor: "bottom", open: drawerOpen, onClose: close, ModalProps: modalProps, PaperProps: paperProps, BackdropProps: backdropProps, disableAutoFocus: true, disableEnforceFocus: true, disableScrollLock: true, disablePortal: true }, { children: children })));
 });

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

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

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

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

package/components/ChainSelect/useChainSelect.js

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

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

@@ -1,23 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dialog as MuiDialog } from '@mui/material';
-import { useScrollableContainer } from '../hooks';
+export const modalProps = {
+    sx: {
+        position: 'absolute',
+        overflow: 'hidden',
+    },
+};
+export const paperProps = {
+    sx: (theme) => ({
+        position: 'absolute',
+        backgroundImage: 'none',
+        borderTopLeftRadius: theme.shape.borderRadius,
+        borderTopRightRadius: theme.shape.borderRadius,
+    }),
+};
+export const backdropProps = {
+    sx: {
+        position: 'absolute',
+        backgroundColor: 'rgb(0 0 0 / 32%)',
+        backdropFilter: 'blur(3px)',
+    },
+};
 export const Dialog = ({ children, open, onClose, }) => {
-    const containerElement = useScrollableContainer();
-    return (_jsx(MuiDialog, 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 (_jsx(MuiDialog, Object.assign({ open: open, onClose: onClose, sx: modalProps.sx, PaperProps: paperProps, BackdropProps: backdropProps, disableAutoFocus: true, disableEnforceFocus: true, disableScrollLock: true, disablePortal: true }, { children: children })));
 };

package/components/GasSufficiencyMessage/GasSufficiencyMessage.js

@@ -11,35 +11,32 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { WarningAmber as WarningIcon } from '@mui/icons-material';
-import { Box, Typography } from '@mui/material';
+import { Box, Collapse, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useGasSufficiency } from '../../hooks';
-import { useSelectedRouteStore } from '../../stores';
+import { useRecommendedRouteStore } from '../../stores';
 import { CardTitle } from '../Card';
 import { MessageCard } from './GasSufficiencyMessage.style';
 export const GasSufficiencyMessage = (_a) => {
     var { route } = _a, props = __rest(_a, ["route"]);
     const { t } = useTranslation();
-    const selectedRoute = useSelectedRouteStore((state) => state.selectedRoute);
-    const { insufficientFunds, insufficientGas } = useGasSufficiency(route !== null && route !== void 0 ? route : selectedRoute);
-    if (!insufficientFunds && !(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)) {
-        return null;
-    }
-    return (_jsxs(MessageCard, Object.assign({}, props, { children: [_jsx(WarningIcon, { sx: {
-                    marginTop: 2,
-                    marginLeft: 2,
-                } }), _jsxs(Box, { children: [(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? (_jsx(CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? (_jsx(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) ? (_jsx(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 (_jsx(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 = useRecommendedRouteStore((state) => state.recommendedRoute);
+    const { insufficientFunds, insufficientGas } = useGasSufficiency(route !== null && route !== void 0 ? route : recommendedRoute);
+    return (_jsx(Collapse, Object.assign({ timeout: 225, in: Boolean(insufficientFunds || (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)), unmountOnExit: true, mountOnEnter: true, appear: true }, { children: _jsx(Box, Object.assign({}, props, { children: _jsxs(MessageCard, { children: [_jsx(WarningIcon, { sx: {
+                            marginTop: 2,
+                            marginLeft: 2,
+                        } }), _jsxs(Box, { children: [(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? (_jsx(CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? (_jsx(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) ? (_jsx(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 (_jsx(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] })] }) })) })));
 };

package/components/Header/NavigationHeader.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowBack as ArrowBackIcon, History as HistoryIcon, SettingsOutlined as SettingsIcon, } from '@mui/icons-material';
-import { Box, IconButton, Typography } from '@mui/material';
+import { Box, IconButton, Tooltip, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { useNavigateBack } from '../../hooks';
@@ -46,5 +46,5 @@ export const NavigationHeader = () => {
                 return t(`header.swap`);
         }
     };
-    return (_jsxs(HeaderAppBar, Object.assign({ elevation: 0 }, { children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "start", onClick: navigateBack }, { children: _jsx(ArrowBackIcon, {}) }))) : null, _jsx(Typography, Object.assign({ fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive ? (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "swap-history", edge: "start", onClick: () => navigate(navigationRoutes.swapHistory) }, { children: _jsx(HistoryIcon, {}) }))) : null, _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: () => navigate(navigationRoutes.settings) }, { children: _jsx(SettingsIcon, {}) }))] }) }), _jsx(Route, { path: "*", element: element || _jsx(Box, { width: 28, height: 40 }) })] })] })));
+    return (_jsxs(HeaderAppBar, Object.assign({ elevation: 0 }, { children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, Object.assign({ size: "medium", edge: "start", onClick: navigateBack }, { children: _jsx(ArrowBackIcon, {}) }))) : null, _jsx(Typography, Object.assign({ fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive ? (_jsx(Tooltip, Object.assign({ title: t(`header.swapHistory`), enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: _jsx(IconButton, Object.assign({ size: "medium", edge: "start", onClick: () => navigate(navigationRoutes.swapHistory) }, { children: _jsx(HistoryIcon, {}) })) }))) : null, _jsx(Tooltip, Object.assign({ title: t(`header.settings`), enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: _jsx(IconButton, Object.assign({ size: "medium", edge: "end", onClick: () => navigate(navigationRoutes.settings) }, { children: _jsx(SettingsIcon, {}) })) }))] }) }), _jsx(Route, { path: "*", element: element || _jsx(Box, { width: 28, height: 40 }) })] })] })));
 };

package/components/Header/WalletHeader.js

@@ -23,7 +23,7 @@ export const WalletHeader = () => {
                         display: 'flex',
                         flex: 1,
                         flexDirection: 'column',
-                    }, mr: 0.5 }, { children: [_jsx(Typography, Object.assign({ variant: "caption", align: "right" }, { children: t(`header.walletConnected`) })), _jsx(Typography, Object.assign({ variant: "body2", align: "right", fontWeight: "600" }, { children: walletAddress }))] })), _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "disconnect", edge: "end", onClick: disconnect }, { children: _jsx(LogoutIcon, {}) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body2", align: "right", fontWeight: "600", flex: 1, mr: 0.5 }, { children: t(`header.connectWallet`) })), _jsx(ConnectButton, {})] })) })));
+                    }, mr: 0.5 }, { children: [_jsx(Typography, Object.assign({ variant: "caption", align: "right" }, { children: t(`header.walletConnected`) })), _jsx(Typography, Object.assign({ variant: "body2", align: "right", fontWeight: "600" }, { children: walletAddress }))] })), _jsx(IconButton, Object.assign({ size: "medium", edge: "end", onClick: disconnect }, { children: _jsx(LogoutIcon, {}) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body2", align: "right", fontWeight: "600", flex: 1, mr: 0.5 }, { children: t(`header.connectWallet`) })), _jsx(ConnectButton, {})] })) })));
 };
 const ConnectButton = () => {
     const { pathname } = useLocation();
@@ -37,5 +37,5 @@ const ConnectButton = () => {
         }
         navigate(navigationRoutes.selectWallet);
     });
-    return (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "disconnect", edge: "end", onClick: !pathname.includes(navigationRoutes.selectWallet) ? connect : undefined }, { children: _jsx(WalletOutlinedIcon, {}) })));
+    return (_jsx(IconButton, Object.assign({ size: "medium", edge: "end", onClick: !pathname.includes(navigationRoutes.selectWallet) ? connect : undefined }, { children: _jsx(WalletOutlinedIcon, {}) })));
 };

package/components/PoweredBy/PoweredBy.js

@@ -15,5 +15,5 @@ export const PoweredBy = () => {
             display: 'flex',
             alignItems: 'flex-end',
             justifyContent: 'flex-end',
-        } }, { children: _jsx(Tooltip, Object.assign({ title: `v${version}`, placement: "top", enterDelay: 5000, 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 } })] })) })) })));
+        } }, { children: _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 } })] })) })) })));
 };

package/components/ProgressToNextUpdate/ProgressToNextUpdate.js

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

package/components/ReverseTokensButton/ReverseTokensButton.js

@@ -12,11 +12,11 @@ export const ReverseTokensButton = ({ vertical, }) => {
             SwapFormKey.ToChain,
             SwapFormKey.ToToken,
         ]);
-        setValue(SwapFormKey.FromAmount, '');
-        setValue(SwapFormKey.FromChain, toChain);
-        setValue(SwapFormKey.FromToken, toToken);
-        setValue(SwapFormKey.ToChain, fromChain);
-        setValue(SwapFormKey.ToToken, fromToken);
+        setValue(SwapFormKey.FromAmount, '', { shouldTouch: true });
+        setValue(SwapFormKey.FromChain, toChain, { shouldTouch: true });
+        setValue(SwapFormKey.FromToken, toToken, { shouldTouch: true });
+        setValue(SwapFormKey.ToChain, fromChain, { shouldTouch: true });
+        setValue(SwapFormKey.ToToken, fromToken, { shouldTouch: true });
     };
-    return (_jsx(IconButton, Object.assign({ onClick: handleClick, size: "small", "aria-label": "swap-destinations" }, { children: vertical ? _jsx(SwapVertIcon, {}) : _jsx(SwapHorizIcon, {}) })));
+    return (_jsx(IconButton, Object.assign({ onClick: handleClick, size: "small" }, { children: vertical ? _jsx(SwapVertIcon, {}) : _jsx(SwapHorizIcon, {}) })));
 };

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

@@ -11,18 +11,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isAddress } from '@ethersproject/address';
 import { Collapse, FormHelperText } from '@mui/material';
 import { forwardRef, useEffect } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { SwapFormKey, useWallet } from '../../providers';
 import { Card, CardTitle } from '../Card';
 import { FormControl, Input } from './SendToWallet.style';
 import { useSendToWalletStore } from './store';
 export const SendToWallet = forwardRef((props, ref) => {
-    var _a;
     const { t } = useTranslation();
     const showSendToWallet = useSendToWalletStore((state) => state.showSendToWallet);
     const { account, provider } = useWallet();
-    const { register, trigger, formState: { errors }, } = useFormContext();
+    const { register, trigger } = useFormContext();
     useEffect(() => {
         trigger(SwapFormKey.ToAddress);
     }, [account.chainId, trigger]);
@@ -36,11 +35,16 @@ export const SendToWallet = forwardRef((props, ref) => {
                 return (isAddress(address || value) ||
                     t('swap.error.title.walletAddressInvalid'));
             }
-            catch (_b) {
+            catch (_a) {
                 return t('swap.error.title.walletEnsAddressInvalid');
             }
         }),
         onBlur: () => trigger(SwapFormKey.ToAddress),
     });
-    return (_jsx(Collapse, Object.assign({ timeout: 225, unmountOnExit: true, mountOnEnter: true, in: showSendToWallet }, { children: _jsxs(Card, Object.assign({}, props, { ref: ref }, { children: [_jsx(CardTitle, { 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'), autoFocus: true }), _jsx(FormHelperText, Object.assign({ error: !!errors.toAddress }, { children: (_a = errors.toAddress) === null || _a === void 0 ? void 0 : _a.message }))] }))] })) })));
+    return (_jsx(Collapse, Object.assign({ timeout: 225, in: showSendToWallet, mountOnEnter: true, unmountOnExit: true }, { children: _jsxs(Card, Object.assign({}, props, { ref: ref }, { children: [_jsx(CardTitle, { 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'), autoFocus: true }), _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 })));
+};

package/components/SendToWallet/SendToWalletButton.js

@@ -17,11 +17,11 @@ export const SendToWalletButton = () => {
     }
     const handleClick = () => {
         if (showSendToWallet) {
-            setValue(SwapFormKey.ToAddress, '');
+            setValue(SwapFormKey.ToAddress, '', { shouldTouch: true });
         }
         toggleSendToWallet();
     };
-    return (_jsx(Tooltip, Object.assign({ title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 500, enterNextDelay: 500, arrow: true }, { children: _jsx(Button, Object.assign({ variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
+    return (_jsx(Tooltip, Object.assign({ title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: _jsx(Button, Object.assign({ variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
                 minWidth: 48,
                 marginLeft: 1,
             } }, { children: _jsx(WalletOutlinedIcon, {}) })) })));

package/components/Step/StepProcess.js

@@ -13,5 +13,5 @@ export const StepProcess = ({ step, process }) => {
                             display: 'flex',
                             flex: 1,
                             justifyContent: 'flex-end',
-                        } }, { children: _jsx(LinkButton, Object.assign({ size: "small", "aria-label": "settings", edge: "end", LinkComponent: Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer" }, { children: _jsx(LinkIcon, {}) })) }))) : null] })), message ? (_jsx(Typography, Object.assign({ ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary" }, { children: message }))) : null] })));
+                        } }, { children: _jsx(LinkButton, Object.assign({ size: "small", edge: "end", LinkComponent: Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer" }, { children: _jsx(LinkIcon, {}) })) }))) : null] })), message ? (_jsx(Typography, Object.assign({ ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary" }, { children: message }))) : null] })));
 };

package/components/SwapButton/SwapButton.js

@@ -8,19 +8,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
 import { forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useGasSufficiency } from '../../hooks';
 import { useWallet, useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
-export const SwapButton = forwardRef(({ onClick, currentRoute, text, disable }, ref) => {
+export const SwapButton = forwardRef(({ onClick, currentRoute, text, disable, enableLoading, loading }, ref) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const config = useWidgetConfig();
     const { account, connect } = useWallet();
-    const { insufficientFunds, insufficientGas } = useGasSufficiency(currentRoute);
+    const { insufficientFunds, insufficientGas, isLoading: isGasSufficiencyLoading, } = useGasSufficiency(currentRoute);
     const handleSwapButtonClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive) {
             if (config.walletManagement) {
@@ -43,5 +43,5 @@ export const SwapButton = forwardRef(({ onClick, currentRoute, text, disable },
         }
         return t(`button.connectWallet`);
     };
-    return (_jsx(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 (_jsx(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/components/SwapButton/types.d.ts

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

package/components/SwapInput/SwapInput.js

@@ -27,11 +27,15 @@ export const SwapInput = ({ formType }) => {
     const isSelected = !!(chain && token);
     const handleChange = (event) => {
         const { value } = event.target;
-        setValue(amountKey, formatAmount(value, true));
+        const formattedAmount = formatAmount(value, true);
+        setValue(amountKey, formattedAmount, {
+            shouldTouch: true,
+        });
     };
     const handleBlur = (event) => {
         const { value } = event.target;
-        setValue(amountKey, formatAmount(value));
+        const formattedAmount = formatAmount(value);
+        setValue(amountKey, formattedAmount);
     };
     useLayoutEffect(() => {
         fitInputText(maxInputFontSize, minInputFontSize, ref.current);

package/components/SwapInput/SwapInputAdornment.js

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