@lifi/widget 1.32.1 → 1.32.3

package/AppDrawer.d.ts

@@ -9,3 +9,6 @@ export interface WidgetDrawer {
 export declare const AppDrawer: import("react").ForwardRefExoticComponent<import("./types").WidgetDrawerProps & WidgetConfig & {
     config?: WidgetConfig | undefined;
 } & import("react").RefAttributes<WidgetDrawer>>;
+export declare const DrawerButtonText: ({ open }: {
+    open: boolean;
+}) => JSX.Element;

package/AppDrawer.js

@@ -7,9 +7,8 @@ import { AppDefault } from './App';
 import { DrawerButton, DrawerButtonTypography } from './AppDrawer.style';
 import { AppProvider } from './AppProvider';
 export const AppDrawer = forwardRef(({ elementRef, open, config }, ref) => {
-    const { t } = useTranslation();
     const openRef = useRef(open);
-    const [drawerOpen, setDrawerOpen] = useState(open);
+    const [drawerOpen, setDrawerOpen] = useState(Boolean(open));
     const toggleDrawer = useCallback(() => {
         setDrawerOpen((open) => !open);
     }, []);
@@ -31,9 +30,8 @@ export const AppDrawer = forwardRef(({ elementRef, open, config }, ref) => {
             ...config?.containerStyle,
             height: '100%',
         },
-        variant: 'drawer',
     }), [config]);
-    return (_jsxs(AppProvider, { config: drawerConfig, children: [_jsxs(DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? _jsx(KeyboardArrowRightIcon, {}) : _jsx(KeyboardArrowLeftIcon, {}), _jsx(DrawerButtonTypography, { children: drawerOpen ? t('button.hide') : t('button.lifiSwap') })] }), _jsx(Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
+    return (_jsxs(AppProvider, { config: drawerConfig, children: [_jsxs(DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? _jsx(KeyboardArrowRightIcon, {}) : _jsx(KeyboardArrowLeftIcon, {}), _jsx(DrawerButtonText, { open: drawerOpen })] }), _jsx(Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
                     sx: {
                         backgroundColor: 'rgb(0 0 0 / 48%)',
                         backdropFilter: 'blur(3px)',
@@ -46,3 +44,7 @@ export const AppDrawer = forwardRef(({ elementRef, open, config }, ref) => {
                     },
                 }, keepMounted: true, children: _jsx(AppDefault, {}) })] }));
 });
+export const DrawerButtonText = ({ open }) => {
+    const { t } = useTranslation();
+    return (_jsx(DrawerButtonTypography, { children: open ? t('button.hide') : t('button.lifiSwap') }));
+};

package/cjs/AppDrawer.d.ts

@@ -9,3 +9,6 @@ export interface WidgetDrawer {
 export declare const AppDrawer: import("react").ForwardRefExoticComponent<import("./types").WidgetDrawerProps & WidgetConfig & {
     config?: WidgetConfig | undefined;
 } & import("react").RefAttributes<WidgetDrawer>>;
+export declare const DrawerButtonText: ({ open }: {
+    open: boolean;
+}) => JSX.Element;

package/cjs/AppDrawer.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppDrawer = void 0;
+exports.DrawerButtonText = exports.AppDrawer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
@@ -10,9 +10,8 @@ const App_1 = require("./App");
 const AppDrawer_style_1 = require("./AppDrawer.style");
 const AppProvider_1 = require("./AppProvider");
 exports.AppDrawer = (0, react_1.forwardRef)(({ elementRef, open, config }, ref) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
     const openRef = (0, react_1.useRef)(open);
-    const [drawerOpen, setDrawerOpen] = (0, react_1.useState)(open);
+    const [drawerOpen, setDrawerOpen] = (0, react_1.useState)(Boolean(open));
     const toggleDrawer = (0, react_1.useCallback)(() => {
         setDrawerOpen((open) => !open);
     }, []);
@@ -34,9 +33,8 @@ exports.AppDrawer = (0, react_1.forwardRef)(({ elementRef, open, config }, ref)
             ...config?.containerStyle,
             height: '100%',
         },
-        variant: 'drawer',
     }), [config]);
-    return ((0, jsx_runtime_1.jsxs)(AppProvider_1.AppProvider, { config: drawerConfig, children: [(0, jsx_runtime_1.jsxs)(AppDrawer_style_1.DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowLeft, {}), (0, jsx_runtime_1.jsx)(AppDrawer_style_1.DrawerButtonTypography, { children: drawerOpen ? t('button.hide') : t('button.lifiSwap') })] }), (0, jsx_runtime_1.jsx)(material_1.Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
+    return ((0, jsx_runtime_1.jsxs)(AppProvider_1.AppProvider, { config: drawerConfig, children: [(0, jsx_runtime_1.jsxs)(AppDrawer_style_1.DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowLeft, {}), (0, jsx_runtime_1.jsx)(exports.DrawerButtonText, { open: drawerOpen })] }), (0, jsx_runtime_1.jsx)(material_1.Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
                     sx: {
                         backgroundColor: 'rgb(0 0 0 / 48%)',
                         backdropFilter: 'blur(3px)',
@@ -49,3 +47,8 @@ exports.AppDrawer = (0, react_1.forwardRef)(({ elementRef, open, config }, ref)
                     },
                 }, keepMounted: true, children: (0, jsx_runtime_1.jsx)(App_1.AppDefault, {}) })] }));
 });
+const DrawerButtonText = ({ open }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsx)(AppDrawer_style_1.DrawerButtonTypography, { children: open ? t('button.hide') : t('button.lifiSwap') }));
+};
+exports.DrawerButtonText = DrawerButtonText;

package/cjs/components/ActiveSwaps/ActiveSwapItem.js

@@ -41,7 +41,7 @@ const ActiveSwapItem = ({ routeId, dense }) => {
         }
     };
     const ListItemComponent = dense ? ActiveSwaps_style_1.ListItem : ActiveSwaps_style_1.ListItemButton;
-    return ((0, jsx_runtime_1.jsxs)(ListItemComponent, { onClick: handleClick, dense: true, disableRipple: true, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsxs)(TokenAvatar_1.TokenAvatarGroup, { total: 2, children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: route.fromToken }), (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: route.toToken })] }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { sx: { margin: 0 }, disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 500, lineHeight: 1, sx: {
+    return ((0, jsx_runtime_1.jsxs)(ListItemComponent, { onClick: handleClick, dense: true, disableRipple: dense, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsxs)(TokenAvatar_1.TokenAvatarGroup, { total: 2, children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: route.fromToken }), (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: route.toToken })] }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { sx: { margin: 0 }, disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 500, lineHeight: 1, sx: {
                         display: 'flex',
                         alignItems: 'center',
                         marginLeft: 2,

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

@@ -11,7 +11,7 @@ exports.ListItemButton = (0, styles_1.styled)(material_1.ListItemButton)(({ them
     paddingRight: theme.spacing(1.5),
     height: 64,
     '&:hover': {
-        backgroundColor: (0, utils_1.getContrastAlphaColor)(theme, '4%'),
+        backgroundColor: (0, utils_1.getContrastAlphaColor)(theme.palette.mode, '4%'),
     },
 }));
 exports.ListItem = (0, styles_1.styled)(material_1.ListItem, {

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

@@ -4,7 +4,6 @@ type CardVariant = 'default' | 'selected' | 'error';
 export type CardProps = {
     variant?: CardVariant;
     selectionColor?: 'primary' | 'secondary';
-    dense?: boolean;
     indented?: boolean;
     onClick?: MouseEventHandler<HTMLDivElement>;
     pointerEvents?: 'auto' | 'none';
@@ -19,7 +18,6 @@ export declare const Card: import("@emotion/styled").StyledComponent<import("@mu
 }, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
     variant?: CardVariant | undefined;
     selectionColor?: "primary" | "secondary" | undefined;
-    dense?: boolean | undefined;
     indented?: boolean | undefined;
     onClick?: MouseEventHandler<HTMLDivElement> | undefined;
     pointerEvents?: "none" | "auto" | undefined;

package/cjs/components/Card/Card.js

@@ -12,14 +12,8 @@ const getBackgroundColor = (theme, variant, selectionColor) => variant === 'sele
         : (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',
-        'pointerEvents',
-    ].includes(prop),
-})(({ theme, variant, selectionColor = 'primary', dense, indented, pointerEvents, onClick, }) => {
+    shouldForwardProp: (prop) => !['variant', 'indented', 'selectionColor', 'pointerEvents'].includes(prop),
+})(({ theme, variant, selectionColor = 'primary', indented, pointerEvents, onClick, }) => {
     const backgroundColor = getBackgroundColor(theme, variant, selectionColor);
     const backgroundHoverColor = onClick
         ? theme.palette.mode === 'light'

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

@@ -9,7 +9,6 @@ export declare const ChainCard: import("@emotion/styled").StyledComponent<import
 }, "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;
     pointerEvents?: "none" | "auto" | undefined;

package/cjs/components/Header/WalletHeader.js

@@ -56,7 +56,7 @@ const ConnectedButton = () => {
     };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_style_1.WalletButton, { endIcon: (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {}), startIcon: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: chain?.logoURI, alt: chain?.key, sx: { width: 24, height: 24 }, children: chain?.name[0] }), sx: {
                     marginRight: -1.25,
-                }, onClick: handleClick, children: walletAddress }), (0, jsx_runtime_1.jsxs)(WalletMenu_1.WalletMenu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: handleCopyAddress, disableRipple: true, children: [(0, jsx_runtime_1.jsx)(icons_material_1.ContentCopy, {}), t(`button.copyAddress`)] }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { component: "a", onClick: handleClose, href: `${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`, target: "_blank", disableRipple: true, children: [(0, jsx_runtime_1.jsx)(icons_material_1.OpenInNewOutlined, {}), t(`button.viewOnExplorer`)] }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleDisconnect, fullWidth: true, startIcon: (0, jsx_runtime_1.jsx)(icons_material_1.PowerSettingsNewRounded, {}), sx: {
+                }, onClick: handleClick, children: walletAddress }), (0, jsx_runtime_1.jsxs)(WalletMenu_1.WalletMenu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: handleCopyAddress, children: [(0, jsx_runtime_1.jsx)(icons_material_1.ContentCopy, {}), t(`button.copyAddress`)] }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { component: "a", onClick: handleClose, href: `${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`, target: "_blank", children: [(0, jsx_runtime_1.jsx)(icons_material_1.OpenInNewOutlined, {}), t(`button.viewOnExplorer`)] }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleDisconnect, fullWidth: true, startIcon: (0, jsx_runtime_1.jsx)(icons_material_1.PowerSettingsNewRounded, {}), sx: {
                             marginTop: 1,
                         }, children: t(`button.disconnect`) })] })] }));
 };

package/cjs/components/ListItemButton.js

@@ -9,6 +9,6 @@ exports.ListItemButton = (0, styles_1.styled)(material_1.ListItemButton)(({ them
     paddingLeft: theme.spacing(1.5),
     height: 56,
     '&:hover': {
-        backgroundColor: (0, utils_1.getContrastAlphaColor)(theme, '4%'),
+        backgroundColor: (0, utils_1.getContrastAlphaColor)(theme.palette.mode, '4%'),
     },
 }));

package/cjs/components/SwapRouteCard/SwapRouteCard.js

@@ -28,7 +28,7 @@ const SwapRouteCard = ({ route, active, variant = 'default', expanded, ...other
         ? { ...route.fromToken, amount: route.fromAmount }
         : { ...route.toToken, amount: route.toAmount };
     const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, { active: active ?? label !== alternativeTag, children: label }), variant === 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: token, step: variant === 'stretched' ? route.steps[0] : undefined, disableDescription: variant === 'dense' && widgetVariant !== 'refuel' }), variant === 'stretched' && !expanded ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(icons_material_1.ExpandLess, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {}) })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) }), variant !== 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route, dense: true })) : null] }));
-    return widgetVariant === 'refuel' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, { dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true, ...other, children: cardContent }));
+    return widgetVariant === 'refuel' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, { variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true, ...other, children: cardContent }));
 };
 exports.SwapRouteCard = SwapRouteCard;
 const SwapRouteCardEssentials = ({ route, dense }) => {

package/cjs/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -10,6 +10,6 @@ const SwapRouteCardSkeleton = ({ variant, ...other }) => {
     const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 118, height: 24, sx: (theme) => ({
                             borderRadius: `${theme.shape.borderRadiusSecondary}px`,
                         }) }), variant === 'stretched' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 52, height: 24, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 44, height: 24, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 32, height: 24 })] })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { mr: 2, children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }) }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 96, height: 32 })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { ml: 6, display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })) : null] })] }), variant !== 'stretched' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, display: "flex", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 24 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 24 })] })) : null] }));
-    return widgetVariant === 'refuel' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, { dense: variant === 'dense', indented: true, ...other, children: cardContent }));
+    return widgetVariant === 'refuel' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, { indented: true, ...other, children: cardContent }));
 };
 exports.SwapRouteCardSkeleton = SwapRouteCardSkeleton;

package/cjs/components/TokenList/TokenListItem.js

@@ -17,7 +17,7 @@ exports.TokenListItem = (0, react_1.memo)(({ onClick, size, start, token, showBa
 const TokenListItemButton = ({ onClick, token, showBalance, isBalanceLoading, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const tokenPrice = (0, utils_1.formatTokenPrice)(token.amount, token.priceUSD);
-    return ((0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItemButton, { onClick: onClick, dense: true, disableRipple: true, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: token.logoURI, alt: token.symbol, children: token.symbol[0] }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: token.symbol, secondary: token.name }), showBalance ? (isBalanceLoading ? ((0, jsx_runtime_1.jsx)(exports.TokenAmountSkeleton, {})) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { textAlign: 'right' }, children: [Number(token.amount) ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", noWrap: true, children: t('format.number', {
+    return ((0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItemButton, { onClick: onClick, dense: true, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: token.logoURI, alt: token.symbol, children: token.symbol[0] }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: token.symbol, secondary: token.name }), showBalance ? (isBalanceLoading ? ((0, jsx_runtime_1.jsx)(exports.TokenAmountSkeleton, {})) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { textAlign: 'right' }, children: [Number(token.amount) ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", noWrap: true, children: t('format.number', {
                             value: token.amount,
                         }) })) : null, tokenPrice ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", "data-price": token.priceUSD, children: t(`format.currency`, {
                             value: tokenPrice,

package/cjs/config/theme.js

@@ -2,9 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTheme = void 0;
 const LoadingButton_1 = require("@mui/lab/LoadingButton");
+const ButtonBase_1 = require("@mui/material/ButtonBase");
 const colors_1 = require("@mui/material/colors");
 const DialogActions_1 = require("@mui/material/DialogActions");
 const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
 const palette = {
     primary: {
         main: '#3F49E1',
@@ -44,6 +46,16 @@ const shape = {
     borderRadius: 12,
     borderRadiusSecondary: 8,
 };
+const enterKeyframe = (0, system_1.keyframes) `
+  0% {
+    transform: scale(0);
+    opacity: 0.05;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.1;
+  }
+`;
 const createTheme = (mode, theme = {}) => {
     const primaryMainColor = theme.palette?.primary?.main ??
         palette.primary.main;
@@ -107,6 +119,19 @@ const createTheme = (mode, theme = {}) => {
                     },
                 },
             },
+            MuiButtonBase: {
+                styleOverrides: {
+                    root: {
+                        [`& .${ButtonBase_1.touchRippleClasses.ripple}.${ButtonBase_1.touchRippleClasses.rippleVisible}`]: {
+                            animationName: `${enterKeyframe}`,
+                        },
+                        [`& .${ButtonBase_1.touchRippleClasses.ripple}.${ButtonBase_1.touchRippleClasses.rippleVisible}`]: {
+                            opacity: 0.1,
+                            animationName: `${enterKeyframe}`,
+                        },
+                    },
+                },
+            },
             MuiButton: {
                 defaultProps: {
                     disableElevation: true,

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.32.1";
+export declare const version = "1.32.3";

package/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '1.32.1';
+exports.version = '1.32.3';

package/cjs/hooks/index.d.ts

@@ -12,7 +12,6 @@ export * from './useProcessMessage';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
 export * from './useSwapRoutes';
-export * from './useTelemetry';
 export * from './useToken';
 export * from './useTokenAddressBalance';
 export * from './useTokenBalance';

package/cjs/hooks/index.js

@@ -28,7 +28,6 @@ __exportStar(require("./useProcessMessage"), exports);
 __exportStar(require("./useRouteExecution"), exports);
 __exportStar(require("./useScrollableContainer"), exports);
 __exportStar(require("./useSwapRoutes"), exports);
-__exportStar(require("./useTelemetry"), exports);
 __exportStar(require("./useToken"), exports);
 __exportStar(require("./useTokenAddressBalance"), exports);
 __exportStar(require("./useTokenBalance"), exports);

package/cjs/hooks/useTokenBalance.js

@@ -5,7 +5,7 @@ const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 const providers_1 = require("../providers");
 const utils_1 = require("../utils");
-const defaultRefetchInterval = 60000;
+const defaultRefetchInterval = 30000;
 const useTokenBalance = (token, accountAddress) => {
     const lifi = (0, providers_1.useLiFi)();
     const { account } = (0, providers_1.useWallet)();

package/cjs/hooks/useTokenBalances.js

@@ -8,7 +8,7 @@ const providers_1 = require("../providers");
 const utils_1 = require("../utils");
 const useFeaturedTokens_1 = require("./useFeaturedTokens");
 const useTokens_1 = require("./useTokens");
-const defaultRefetchInterval = 60000;
+const defaultRefetchInterval = 30000;
 const minRefetchInterval = 1000;
 const useTokenBalances = (selectedChainId) => {
     const lifi = (0, providers_1.useLiFi)();

package/cjs/i18n/it.json

@@ -6,7 +6,6 @@
     "contactSupport": "Contatta l'assistenza",
     "continue": "Continua",
     "copyAddress": "Copia indirizzo",
-    "viewOnExplorer": "Visualizza sull'Explorer",
     "dark": "Scuro",
     "delete": "Elimina",
     "disconnect": "Disconnetti",
@@ -19,6 +18,8 @@
     "ok": "Ok",
     "okay": "Okay",
     "removeSwap": "Rimuovi lo scambio",
+    "reset": "Ripristina",
+    "resetSettings": "Ripristina impostazioni",
     "restartSwap": "Riavvia lo scambio",
     "reviewGasSwap": "Rivedi lo scambio di gas",
     "reviewSwap": "Rivedi lo scambio",
@@ -27,7 +28,8 @@
     "startGasSwap": "Inizia lo scambio di gas",
     "startSwap": "Avvia lo scambio",
     "swap": "Scambio",
-    "tryAgain": "Riprova"
+    "tryAgain": "Riprova",
+    "viewOnExplorer": "Visualizza sull'Explorer"
   },
   "format": {
     "currency": "{{value, currency(currency: USD)}}",
@@ -54,7 +56,6 @@
     "title": "Lingua"
   },
   "settings": {
-    "advancedPreferences": "Preferenze avanzate",
     "enabledBridges": "Bridge abilitati",
     "enabledExchanges": "Exchange abilitati",
     "gasPrice": {
@@ -63,10 +64,7 @@
       "slow": "Lento",
       "title": "Prezzo gas"
     },
-    "resetToDefault": "Ripristina le impostazioni predefinite",
     "routePriority": "Priorità di route",
-    "selectEnabledBridges": "Selezionare i bridge abilitati",
-    "selectEnabledExchanges": "Seleziona gli exchange abilitati",
     "showDestinationWallet": "Mostra il portafoglio di destinazione",
     "slippage": "Slittamento"
   },
@@ -201,7 +199,8 @@
         "highValueLoss": "Il valore dei token ricevuti è significativamente inferiore ai token scambiati più il costo della transazione.",
         "insufficientFunds": "Non hai abbastanza fondi per eseguire lo scambio.",
         "insufficientGas": "È necessario aggiungere almeno:",
-        "rateChanged": "Il tasso di scambio è cambiato. Se procedi, confermi di accettare il nuovo tasso."
+        "rateChanged": "Il tasso di scambio è cambiato. Se procedi, confermi di accettare il nuovo tasso.",
+        "resetSettings": "Questo porterà al ripristino della priorità di route, slittamento di prezzo, prezzo del gas, bridge abilitati ed exchanges."
       },
       "title": {
         "deleteActiveSwaps": "Cancellare tutti gli scambi attivi?",
@@ -209,7 +208,8 @@
         "deleteSwapHistory": "Cancellare la cronologia degli scambi?",
         "highValueLoss": "Perdita di valore elevato",
         "insufficientGas": "Gas insufficiente",
-        "rateChanged": "Tasso cambiato"
+        "rateChanged": "Tasso cambiato",
+        "resetSettings": "Ripristinare le impostazioni?"
       }
     }
   },

package/cjs/i18n/zh.json

@@ -6,7 +6,6 @@
     "contactSupport": "联系我们",
     "continue": "继续",
     "copyAddress": "复制地址",
-    "viewOnExplorer": "在区块链浏览器上查看",
     "dark": "深色模式",
     "delete": "删除",
     "disconnect": "断开连接",
@@ -19,6 +18,8 @@
     "ok": "确认",
     "okay": "确认",
     "removeSwap": "删除该兑换",
+    "reset": "重置",
+    "resetSettings": "恢复默认设置",
     "restartSwap": "重新兑换",
     "reviewGasSwap": "查看燃气费兑换",
     "reviewSwap": "查看该兑换",
@@ -27,7 +28,8 @@
     "startGasSwap": "开始兑换燃气费",
     "startSwap": "开始兑换",
     "swap": "兑换",
-    "tryAgain": "重试"
+    "tryAgain": "重试",
+    "viewOnExplorer": "在区块链浏览器上查看"
   },
   "format": {
     "currency": "{{value, currency(currency: USD)}}",
@@ -54,7 +56,6 @@
     "title": "语言"
   },
   "settings": {
-    "advancedPreferences": "偏好设置",
     "enabledBridges": "已选中的跨链桥",
     "enabledExchanges": "已选中的交易所",
     "gasPrice": {
@@ -63,10 +64,7 @@
       "slow": "缓慢",
       "title": "燃气费"
     },
-    "resetToDefault": "重置为默认值",
     "routePriority": "路由优先级",
-    "selectEnabledBridges": "选择要使用的跨链桥",
-    "selectEnabledExchanges": "选择要使用的交易所",
     "showDestinationWallet": "显示收款钱包",
     "slippage": "滑点"
   },
@@ -201,7 +199,8 @@
         "highValueLoss": "收到的代币的价值明显低于要被兑换的代币和交易成本。",
         "insufficientFunds": "你没有足够的资金来执行这笔兑换。",
         "insufficientGas": "你至少需要：",
-        "rateChanged": "兑换比例已经改变，如果继续兑换，您将接受新的兑换比例。"
+        "rateChanged": "兑换比例已经改变，如果继续兑换，您将接受新的兑换比例。",
+        "resetSettings": "这将重置您的路由优先级，滑点，燃气费，选中的跨链桥和链上交易所。"
       },
       "title": {
         "deleteActiveSwaps": "确定要清空正在进行的兑换记录？",
@@ -209,7 +208,8 @@
         "deleteSwapHistory": "确定要清空兑换记录？",
         "highValueLoss": "大额资金损失",
         "insufficientGas": "燃料费不足",
-        "rateChanged": "兑换比例变动"
+        "rateChanged": "兑换比例变动",
+        "resetSettings": "确定要恢复默认设置吗?"
       }
     }
   },

package/cjs/pages/SelectChainPage/SelectChainPage.js

@@ -24,6 +24,6 @@ const SelectChainPage = ({ formType, selectNativeToken, }) => {
     return ((0, jsx_runtime_1.jsx)(material_1.Container, { disableGutters: true, children: (0, jsx_runtime_1.jsx)(material_1.List, { sx: {
                 paddingLeft: 1.5,
                 paddingRight: 1.5,
-            }, children: chains?.map((chain) => ((0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { onClick: () => handleClick(chain), disableRipple: true, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: chain.logoURI, alt: chain.name, children: chain.name[0] }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: chain.name })] }, chain.id))) }) }));
+            }, children: chains?.map((chain) => ((0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { onClick: () => handleClick(chain), children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: chain.logoURI, alt: chain.name, children: chain.name[0] }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: chain.name })] }, chain.id))) }) }));
 };
 exports.SelectChainPage = SelectChainPage;

package/cjs/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.js

@@ -46,6 +46,6 @@ const SelectEnabledToolsPage = ({ type }) => {
     return ((0, jsx_runtime_1.jsx)(material_1.Container, { disableGutters: true, children: (0, jsx_runtime_1.jsx)(material_1.List, { sx: {
                 paddingLeft: 1.5,
                 paddingRight: 1.5,
-            }, children: tools?.[typeKey].map((tool) => ((0, jsx_runtime_1.jsxs)(SelectEnabledToolsPage_style_1.ListItemButton, { onClick: () => handleClick(tool.key), disableRipple: true, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: tool.logoURI, alt: tool.name, children: tool.name[0] }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: tool.name }), enabledTools?.includes(tool.key) ? ((0, jsx_runtime_1.jsx)(icons_material_1.CheckBox, { color: "primary" })) : ((0, jsx_runtime_1.jsx)(icons_material_1.CheckBoxOutlineBlankOutlined, {}))] }, tool.name))) }) }));
+            }, children: tools?.[typeKey].map((tool) => ((0, jsx_runtime_1.jsxs)(SelectEnabledToolsPage_style_1.ListItemButton, { onClick: () => handleClick(tool.key), children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: tool.logoURI, alt: tool.name, children: tool.name[0] }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: tool.name }), enabledTools?.includes(tool.key) ? ((0, jsx_runtime_1.jsx)(icons_material_1.CheckBox, { color: "primary" })) : ((0, jsx_runtime_1.jsx)(icons_material_1.CheckBoxOutlineBlankOutlined, {}))] }, tool.name))) }) }));
 };
 exports.SelectEnabledToolsPage = SelectEnabledToolsPage;

package/cjs/pages/SelectNativeTokenPage/SelectNativeTokenPage.js

@@ -17,6 +17,6 @@ const SelectNativeTokenPage = ({ formType, }) => {
     return ((0, jsx_runtime_1.jsx)(material_1.Container, { disableGutters: true, children: (0, jsx_runtime_1.jsx)(material_1.List, { sx: {
                 paddingLeft: 1.5,
                 paddingRight: 1.5,
-            }, children: chains?.map((chain) => ((0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { onClick: () => selectToken(chain.nativeToken.address, chain.id), disableRipple: true, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: chain.nativeToken, chain: chain }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: chain.nativeToken.symbol, secondary: t('swap.onChain', { chainName: chain.name }) })] }, chain.id))) }) }));
+            }, children: chains?.map((chain) => ((0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { onClick: () => selectToken(chain.nativeToken.address, chain.id), children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: chain.nativeToken, chain: chain }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: chain.nativeToken.symbol, secondary: t('swap.onChain', { chainName: chain.name }) })] }, chain.id))) }) }));
 };
 exports.SelectNativeTokenPage = SelectNativeTokenPage;

package/cjs/pages/SelectWalletPage/SelectWalletPage.js

@@ -40,7 +40,7 @@ const SelectWalletPage = () => {
     return ((0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: true, children: [(0, jsx_runtime_1.jsx)(material_1.List, { sx: {
                     paddingLeft: 1.5,
                     paddingRight: 1.5,
-                }, children: wallet_management_1.supportedWallets.map((wallet) => ((0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { onClick: () => handleConnect(wallet), disableRipple: true, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: wallet.icon.src || wallet.icon, alt: wallet.name, children: wallet.name[0] }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: wallet.name })] }, wallet.name))) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: walletIdentity.show, onClose: closeDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('wallet.extensionNotFound', {
+                }, children: wallet_management_1.supportedWallets.map((wallet) => ((0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { onClick: () => handleConnect(wallet), children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: wallet.icon.src || wallet.icon, alt: wallet.name, children: wallet.name[0] }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: wallet.name })] }, wallet.name))) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: walletIdentity.show, onClose: closeDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('wallet.extensionNotFound', {
                                 name: walletIdentity.wallet?.name,
                             }) }) }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: closeDialog, autoFocus: true, children: t('button.ok') }) })] })] }));
 };

package/cjs/pages/SettingsPage/EnabledToolsButton.js

@@ -20,6 +20,6 @@ const EnabledToolsButton = ({ type }) => {
     const handleClick = () => {
         navigate(utils_1.navigationRoutes[type.toLowerCase()]);
     };
-    return ((0, jsx_runtime_1.jsxs)(EnabledToolsButton_style_1.ListItemButton, { onClick: handleClick, disableRipple: true, children: [(0, jsx_runtime_1.jsx)(EnabledToolsButton_style_1.ListItemText, { primary: t(`settings.enabled${type}`) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(EnabledToolsButton_style_1.ListItemText, { primary: `${enabledTools}/${tools}` }), (0, jsx_runtime_1.jsx)(icons_material_1.ChevronRight, {})] })] }));
+    return ((0, jsx_runtime_1.jsxs)(EnabledToolsButton_style_1.ListItemButton, { onClick: handleClick, children: [(0, jsx_runtime_1.jsx)(EnabledToolsButton_style_1.ListItemText, { primary: t(`settings.enabled${type}`) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(EnabledToolsButton_style_1.ListItemText, { primary: `${enabledTools}/${tools}` }), (0, jsx_runtime_1.jsx)(icons_material_1.ChevronRight, {})] })] }));
 };
 exports.EnabledToolsButton = EnabledToolsButton;

package/cjs/providers/index.d.ts

@@ -1,7 +1,6 @@
 export * from './I18nProvider';
 export * from './SDKProvider';
 export * from './SwapFormProvider';
-export * from './TelemetryProvider';
 export * from './ThemeProvider';
 export * from './WalletProvider';
 export * from './WidgetProvider';

package/cjs/providers/index.js

@@ -17,7 +17,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./I18nProvider"), exports);
 __exportStar(require("./SDKProvider"), exports);
 __exportStar(require("./SwapFormProvider"), exports);
-__exportStar(require("./TelemetryProvider"), exports);
 __exportStar(require("./ThemeProvider"), exports);
 __exportStar(require("./WalletProvider"), exports);
 __exportStar(require("./WidgetProvider"), exports);

package/cjs/utils/colors.d.ts

@@ -1,3 +1,3 @@
-import type { Theme } from '@mui/material';
-export declare const getContrastAlphaColor: (theme: Theme, alpha: string | number) => string;
+import type { PaletteMode, Theme } from '@mui/material';
+export declare const getContrastAlphaColor: (mode: PaletteMode, alpha: string | number) => string;
 export declare const getContrastTextColor: (theme: Theme, background?: string) => "#fff" | "#000";

package/cjs/utils/colors.js

@@ -3,9 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getContrastTextColor = exports.getContrastAlphaColor = void 0;
 const colors_1 = require("@mui/material/colors");
 const styles_1 = require("@mui/material/styles");
-const getContrastAlphaColor = (theme, alpha) => theme.palette.mode === 'light'
-    ? `rgb(0 0 0 / ${alpha})`
-    : `rgb(255 255 255 / ${alpha})`;
+const getContrastAlphaColor = (mode, alpha) => mode === 'light' ? `rgb(0 0 0 / ${alpha})` : `rgb(255 255 255 / ${alpha})`;
 exports.getContrastAlphaColor = getContrastAlphaColor;
 const getContrastTextColor = (theme, background) => (0, styles_1.getContrastRatio)(colors_1.common.white, background ?? theme.palette.primary.main) >= 3
     ? colors_1.common.white

package/components/ActiveSwaps/ActiveSwapItem.js

@@ -38,7 +38,7 @@ export const ActiveSwapItem = ({ routeId, dense }) => {
         }
     };
     const ListItemComponent = dense ? ListItem : ListItemButton;
-    return (_jsxs(ListItemComponent, { onClick: handleClick, dense: true, disableRipple: true, children: [_jsx(ListItemAvatar, { children: _jsxs(TokenAvatarGroup, { total: 2, children: [_jsx(TokenAvatar, { token: route.fromToken }), _jsx(TokenAvatar, { token: route.toToken })] }) }), _jsx(ListItemText, { sx: { margin: 0 }, disableTypography: true, primary: _jsxs(Typography, { fontWeight: 500, lineHeight: 1, sx: {
+    return (_jsxs(ListItemComponent, { onClick: handleClick, dense: true, disableRipple: dense, children: [_jsx(ListItemAvatar, { children: _jsxs(TokenAvatarGroup, { total: 2, children: [_jsx(TokenAvatar, { token: route.fromToken }), _jsx(TokenAvatar, { token: route.toToken })] }) }), _jsx(ListItemText, { sx: { margin: 0 }, disableTypography: true, primary: _jsxs(Typography, { fontWeight: 500, lineHeight: 1, sx: {
                         display: 'flex',
                         alignItems: 'center',
                         marginLeft: 2,

package/components/ActiveSwaps/ActiveSwaps.style.js

@@ -8,7 +8,7 @@ export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
     paddingRight: theme.spacing(1.5),
     height: 64,
     '&:hover': {
-        backgroundColor: getContrastAlphaColor(theme, '4%'),
+        backgroundColor: getContrastAlphaColor(theme.palette.mode, '4%'),
     },
 }));
 export const ListItem = styled(MuiListItem, {

package/components/Card/Card.d.ts

@@ -4,7 +4,6 @@ type CardVariant = 'default' | 'selected' | 'error';
 export type CardProps = {
     variant?: CardVariant;
     selectionColor?: 'primary' | 'secondary';
-    dense?: boolean;
     indented?: boolean;
     onClick?: MouseEventHandler<HTMLDivElement>;
     pointerEvents?: 'auto' | 'none';
@@ -19,7 +18,6 @@ export declare const Card: import("@emotion/styled").StyledComponent<import("@mu
 }, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
     variant?: CardVariant | undefined;
     selectionColor?: "primary" | "secondary" | undefined;
-    dense?: boolean | undefined;
     indented?: boolean | undefined;
     onClick?: MouseEventHandler<HTMLDivElement> | undefined;
     pointerEvents?: "none" | "auto" | undefined;

package/components/Card/Card.js

@@ -9,14 +9,8 @@ const getBackgroundColor = (theme, variant, selectionColor) => variant === 'sele
         : 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',
-        'pointerEvents',
-    ].includes(prop),
-})(({ theme, variant, selectionColor = 'primary', dense, indented, pointerEvents, onClick, }) => {
+    shouldForwardProp: (prop) => !['variant', 'indented', 'selectionColor', 'pointerEvents'].includes(prop),
+})(({ theme, variant, selectionColor = 'primary', indented, pointerEvents, onClick, }) => {
     const backgroundColor = getBackgroundColor(theme, variant, selectionColor);
     const backgroundHoverColor = onClick
         ? theme.palette.mode === 'light'