@lifi/widget 1.32.0 → 1.32.2

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/WidgetProvider/WidgetProvider.js

@@ -14,7 +14,6 @@ const WidgetContext = (0, react_1.createContext)(initialContext);
 const useWidgetConfig = () => (0, react_1.useContext)(WidgetContext);
 exports.useWidgetConfig = useWidgetConfig;
 const WidgetProvider = ({ children, config: { fromChain, fromToken, toChain, toToken, fromAmount, ...config } = {}, }) => {
-    const settingsStoreContext = (0, stores_1.useSettingsStoreContext)();
     const elementId = (0, react_1.useId)();
     const value = (0, react_1.useMemo)(() => {
         try {
@@ -25,7 +24,7 @@ const WidgetProvider = ({ children, config: { fromChain, fromToken, toChain, toT
                     delete searchParams[`${key}Token`];
                 }
             });
-            return {
+            const value = {
                 ...config,
                 fromChain: (searchParams.fromChain &&
                     isNaN(parseInt(searchParams.fromChain, 10))) ||
@@ -52,15 +51,14 @@ const WidgetProvider = ({ children, config: { fromChain, fromToken, toChain, toT
                     : fromAmount,
                 elementId,
             };
+            (0, stores_1.setDefaultSettings)(value);
+            return value;
         }
         catch (e) {
             console.warn(e);
             return { ...config, elementId };
         }
     }, [config, elementId, fromAmount, fromChain, fromToken, toChain, toToken]);
-    (0, react_1.useEffect)(() => {
-        (0, stores_1.setDefaultSettings)(settingsStoreContext, value);
-    }, [settingsStoreContext, value]);
     return ((0, jsx_runtime_1.jsx)(WidgetContext.Provider, { value: value, children: children }));
 };
 exports.WidgetProvider = WidgetProvider;

package/cjs/stores/StoreProvider.js

@@ -2,14 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StoreProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const chains_1 = require("./chains");
 const routes_1 = require("./routes");
-const settings_1 = require("./settings");
 const StoreProvider = ({ children, namePrefix }) => {
-    return ((0, jsx_runtime_1.jsx)(routes_1.RouteExecutionStoreProvider, { namePrefix: namePrefix, children: (0, jsx_runtime_1.jsx)(settings_1.SettingsStoreProvider
-        // namePrefix={namePrefix}
-        , { children: (0, jsx_runtime_1.jsx)(chains_1.ChainOrderStoreProvider
-            // namePrefix={namePrefix}
-            , { children: children }) }) }));
+    return ((0, jsx_runtime_1.jsx)(routes_1.RouteExecutionStoreProvider, { namePrefix: namePrefix, children: (0, jsx_runtime_1.jsx)(routes_1.RecommendedRouteStoreProvider, { children: children }) }));
 };
 exports.StoreProvider = StoreProvider;

package/cjs/stores/chains/index.d.ts

@@ -1,4 +1,3 @@
-export * from './ChainOrderStore';
-export * from './createChainOrderStore';
 export * from './types';
 export * from './useChainOrder';
+export * from './useChainOrderStore';

package/cjs/stores/chains/index.js

@@ -14,7 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ChainOrderStore"), exports);
-__exportStar(require("./createChainOrderStore"), exports);
 __exportStar(require("./types"), exports);
 __exportStar(require("./useChainOrder"), exports);
+__exportStar(require("./useChainOrderStore"), exports);

package/cjs/stores/chains/useChainOrder.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useChainOrder = void 0;
 const shallow_1 = require("zustand/shallow");
-const ChainOrderStore_1 = require("./ChainOrderStore");
+const _1 = require(".");
 const useChainOrder = () => {
-    return (0, ChainOrderStore_1.useChainOrderStore)((state) => [state.chainOrder, state.setChain], shallow_1.shallow);
+    return (0, _1.useChainOrderStore)((state) => [state.chainOrder, state.setChain], shallow_1.shallow);
 };
 exports.useChainOrder = useChainOrder;

package/cjs/stores/chains/useChainOrderStore.d.ts

@@ -0,0 +1,3 @@
+import type { ChainOrderState } from './types';
+export declare const maxChainToOrder = 9;
+export declare const useChainOrderStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ChainOrderState>>;

package/cjs/stores/chains/{createChainOrderStore.js → useChainOrderStore.js}

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createChainOrderStore = exports.maxChainToOrder = void 0;
+exports.useChainOrderStore = exports.maxChainToOrder = void 0;
 const zustand_1 = require("zustand");
 const middleware_1 = require("zustand/middleware");
 exports.maxChainToOrder = 9;
-const createChainOrderStore = ({ namePrefix }) => (0, zustand_1.create)((0, middleware_1.persist)((set, get) => ({
+exports.useChainOrderStore = (0, zustand_1.create)((0, middleware_1.persist)((set, get) => ({
     chainOrder: [],
     availableChains: [],
     initializeChains: (chainIds) => {
@@ -46,8 +46,7 @@ const createChainOrderStore = ({ namePrefix }) => (0, zustand_1.create)((0, midd
         });
     },
 }), {
-    name: `${namePrefix || 'li.fi'}-widget-chains-order`,
+    name: `li.fi-widget-chains-order`,
     version: 0,
     partialize: (state) => ({ chainOrder: state.chainOrder }),
 }));
-exports.createChainOrderStore = createChainOrderStore;

package/cjs/stores/routes/types.d.ts

@@ -19,7 +19,7 @@ export declare enum RouteExecutionStatus {
     Partial = 8,
     Refunded = 16
 }
-export interface RecommendedRouteStore {
+export interface RecommendedRouteState {
     recommendedRoute?: Route;
     setRecommendedRoute: (route?: Route) => void;
 }

package/cjs/stores/routes/useRecommendedRouteStore.d.ts

@@ -1,2 +1,10 @@
-import type { RecommendedRouteStore } from './types';
-export declare const useRecommendedRouteStore: import("zustand").UseBoundStore<import("zustand").StoreApi<RecommendedRouteStore>>;
+/// <reference types="react" />
+import type { StoreApi, UseBoundStore } from 'zustand';
+import type { PersistStoreProviderProps } from '../types';
+import type { RecommendedRouteState } from './types';
+export declare const createRecommendedRouteStore: () => UseBoundStore<StoreApi<RecommendedRouteState>>;
+export type RecommendedRouteStore = UseBoundStore<StoreApi<RecommendedRouteState>>;
+export declare const RecommendedRouteStoreContext: import("react").Context<RecommendedRouteStore | null>;
+export declare function RecommendedRouteStoreProvider({ children, ...props }: PersistStoreProviderProps): JSX.Element;
+export declare function useRecommendedRouteStore<T>(selector: (state: RecommendedRouteState) => T, equalityFn?: (left: T, right: T) => boolean): T;
+export declare function useRecommendedRouteStoreContext(): RecommendedRouteStore;

package/cjs/stores/routes/useRecommendedRouteStore.js

@@ -1,11 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRecommendedRouteStore = void 0;
+exports.useRecommendedRouteStoreContext = exports.useRecommendedRouteStore = exports.RecommendedRouteStoreProvider = exports.RecommendedRouteStoreContext = exports.createRecommendedRouteStore = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const zustand_1 = require("zustand");
-exports.useRecommendedRouteStore = (0, zustand_1.create)((set) => ({
+const createRecommendedRouteStore = () => (0, zustand_1.create)((set) => ({
     setRecommendedRoute: (recommendedRoute) => {
         set(() => ({
             recommendedRoute,
         }));
     },
 }));
+exports.createRecommendedRouteStore = createRecommendedRouteStore;
+exports.RecommendedRouteStoreContext = (0, react_1.createContext)(null);
+function RecommendedRouteStoreProvider({ children, ...props }) {
+    const storeRef = (0, react_1.useRef)();
+    if (!storeRef.current) {
+        storeRef.current = (0, exports.createRecommendedRouteStore)();
+    }
+    return ((0, jsx_runtime_1.jsx)(exports.RecommendedRouteStoreContext.Provider, { value: storeRef.current, children: children }));
+}
+exports.RecommendedRouteStoreProvider = RecommendedRouteStoreProvider;
+function useRecommendedRouteStore(selector, equalityFn) {
+    const useStore = (0, react_1.useContext)(exports.RecommendedRouteStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${RecommendedRouteStoreProvider.name}>.`);
+    }
+    return useStore(selector, equalityFn);
+}
+exports.useRecommendedRouteStore = useRecommendedRouteStore;
+function useRecommendedRouteStoreContext() {
+    const useStore = (0, react_1.useContext)(exports.RecommendedRouteStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${RecommendedRouteStoreProvider.name}>.`);
+    }
+    return useStore;
+}
+exports.useRecommendedRouteStoreContext = useRecommendedRouteStoreContext;

package/cjs/stores/settings/index.d.ts

@@ -1,5 +1,5 @@
-export * from './SettingsStore';
 export * from './types';
 export * from './useAppearance';
 export * from './useSendToWalletStore';
 export * from './useSettings';
+export * from './useSettingsStore';

package/cjs/stores/settings/index.js

@@ -14,8 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./SettingsStore"), exports);
 __exportStar(require("./types"), exports);
 __exportStar(require("./useAppearance"), exports);
 __exportStar(require("./useSendToWalletStore"), exports);
 __exportStar(require("./useSettings"), exports);
+__exportStar(require("./useSettingsStore"), exports);

package/cjs/stores/settings/useAppearance.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAppearance = void 0;
 const shallow_1 = require("zustand/shallow");
-const SettingsStore_1 = require("./SettingsStore");
+const useSettingsStore_1 = require("./useSettingsStore");
 const useAppearance = () => {
-    const [appearance, setValue] = (0, SettingsStore_1.useSettingsStore)((state) => [state.appearance, state.setValue], shallow_1.shallow);
+    const [appearance, setValue] = (0, useSettingsStore_1.useSettingsStore)((state) => [state.appearance, state.setValue], shallow_1.shallow);
     const setAppearance = (appearance) => {
         setValue('appearance', appearance);
     };

package/cjs/stores/settings/useSettings.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSettings = void 0;
 const shallow_1 = require("zustand/shallow");
-const SettingsStore_1 = require("./SettingsStore");
+const useSettingsStore_1 = require("./useSettingsStore");
 const useSettings = (keys) => {
-    return (0, SettingsStore_1.useSettingsStore)((state) => keys.reduce((values, key) => {
+    return (0, useSettingsStore_1.useSettingsStore)((state) => keys.reduce((values, key) => {
         values[key] = state[key];
         return values;
     }, {}), shallow_1.shallow);

package/cjs/stores/settings/useSettingsStore.d.ts

@@ -0,0 +1,6 @@
+import type { WidgetConfig } from '../../types';
+import type { SettingsProps, SettingsState } from './types';
+export declare const defaultConfigurableSettings: Pick<SettingsState, 'routePriority' | 'slippage'>;
+export declare const defaultSettings: SettingsProps;
+export declare const useSettingsStore: import("zustand").UseBoundStore<import("zustand").StoreApi<SettingsState>>;
+export declare const setDefaultSettings: (config?: WidgetConfig) => void;

package/cjs/stores/settings/{createSettingsStore.js → useSettingsStore.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createSettingsStore = exports.defaultSettings = exports.defaultConfigurableSettings = void 0;
+exports.setDefaultSettings = exports.useSettingsStore = exports.defaultSettings = exports.defaultConfigurableSettings = void 0;
 const zustand_1 = require("zustand");
 const middleware_1 = require("zustand/middleware");
 const types_1 = require("./types");
@@ -15,7 +15,7 @@ exports.defaultSettings = {
     enabledBridges: [],
     enabledExchanges: [],
 };
-const createSettingsStore = ({ namePrefix }) => (0, zustand_1.create)((0, middleware_1.persist)((set, get) => ({
+exports.useSettingsStore = (0, zustand_1.create)((0, middleware_1.persist)((set, get) => ({
     ...exports.defaultSettings,
     setValue: (key, value) => set(() => ({
         [key]: value,
@@ -74,7 +74,7 @@ const createSettingsStore = ({ namePrefix }) => (0, zustand_1.create)((0, middle
         get().initializeTools('Exchanges', exchanges, true);
     },
 }), {
-    name: `${namePrefix || 'li.fi'}-widget-settings`,
+    name: `li.fi-widget-settings`,
     version: 2,
     partialize: (state) => {
         const { enabledBridges, enabledExchanges, ...partializedState } = state;
@@ -99,4 +99,20 @@ const createSettingsStore = ({ namePrefix }) => (0, zustand_1.create)((0, middle
         return persistedState;
     },
 }));
-exports.createSettingsStore = createSettingsStore;
+const setDefaultSettings = (config) => {
+    const { slippage, routePriority, setValue } = exports.useSettingsStore.getState();
+    const defaultSlippage = (config?.slippage ||
+        config?.sdkConfig?.defaultRouteOptions?.slippage ||
+        0) * 100;
+    const defaultRoutePriority = config?.routePriority || config?.sdkConfig?.defaultRouteOptions?.order;
+    exports.defaultConfigurableSettings.slippage = (defaultSlippage || exports.defaultConfigurableSettings.slippage)?.toString();
+    exports.defaultConfigurableSettings.routePriority =
+        defaultRoutePriority || exports.defaultConfigurableSettings.routePriority;
+    if (!slippage) {
+        setValue('slippage', exports.defaultConfigurableSettings.slippage);
+    }
+    if (!routePriority) {
+        setValue('routePriority', exports.defaultConfigurableSettings.routePriority);
+    }
+};
+exports.setDefaultSettings = setDefaultSettings;

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.d.ts

@@ -35,11 +35,11 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
     } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "componentsProps" | "slotProps" | "slots" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "slotProps" | "slots" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ShowAllButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "warning" | "error" | "info" | "primary" | "secondary" | undefined;
+    color?: "inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

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'

package/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/components/Header/Header.style.d.ts

@@ -21,7 +21,7 @@ export declare const Container: import("@emotion/styled").StyledComponent<import
 export declare const WalletButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "warning" | "error" | "info" | "primary" | "secondary" | undefined;
+    color?: "inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

package/components/Header/WalletHeader.js

@@ -52,7 +52,7 @@ const ConnectedButton = () => {
     };
     return (_jsxs(_Fragment, { children: [_jsx(WalletButton, { endIcon: _jsx(ExpandMoreIcon, {}), startIcon: _jsx(Avatar, { src: chain?.logoURI, alt: chain?.key, sx: { width: 24, height: 24 }, children: chain?.name[0] }), sx: {
                     marginRight: -1.25,
-                }, onClick: handleClick, children: walletAddress }), _jsxs(WalletMenu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: [_jsxs(MenuItem, { onClick: handleCopyAddress, disableRipple: true, children: [_jsx(ContentCopyIcon, {}), t(`button.copyAddress`)] }), _jsxs(MenuItem, { component: "a", onClick: handleClose, href: `${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`, target: "_blank", disableRipple: true, children: [_jsx(OpenInNewOutlinedIcon, {}), t(`button.viewOnExplorer`)] }), _jsx(Button, { onClick: handleDisconnect, fullWidth: true, startIcon: _jsx(PowerSettingsIcon, {}), sx: {
+                }, onClick: handleClick, children: walletAddress }), _jsxs(WalletMenu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: [_jsxs(MenuItem, { onClick: handleCopyAddress, children: [_jsx(ContentCopyIcon, {}), t(`button.copyAddress`)] }), _jsxs(MenuItem, { component: "a", onClick: handleClose, href: `${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`, target: "_blank", children: [_jsx(OpenInNewOutlinedIcon, {}), t(`button.viewOnExplorer`)] }), _jsx(Button, { onClick: handleDisconnect, fullWidth: true, startIcon: _jsx(PowerSettingsIcon, {}), sx: {
                             marginTop: 1,
                         }, children: t(`button.disconnect`) })] })] }));
 };

package/components/ListItemButton.js

@@ -6,6 +6,6 @@ export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
     paddingLeft: theme.spacing(1.5),
     height: 56,
     '&:hover': {
-        backgroundColor: getContrastAlphaColor(theme, '4%'),
+        backgroundColor: getContrastAlphaColor(theme.palette.mode, '4%'),
     },
 }));

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

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

package/components/SendToWallet/SendToWallet.style.d.ts

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

package/components/Step/StepProcess.style.d.ts

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

package/components/SwapInput/SwapInput.style.d.ts

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

package/components/SwapInput/SwapInputAdornment.style.d.ts

@@ -2,7 +2,7 @@
 export declare const Button: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "warning" | "error" | "info" | "primary" | "secondary" | undefined;
+    color?: "inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

package/components/SwapRouteCard/SwapRouteCard.js

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

package/components/SwapRouteCard/SwapRouteCard.style.d.ts

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

package/components/SwapRouteCard/SwapRouteCardSkeleton.js

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

package/components/TokenList/TokenList.style.d.ts

@@ -35,4 +35,4 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
     } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "componentsProps" | "slotProps" | "slots" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "slotProps" | "slots" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/TokenList/TokenListItem.js

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

package/config/theme.js

@@ -1,7 +1,9 @@
 import { loadingButtonClasses } from '@mui/lab/LoadingButton';
+import { touchRippleClasses } from '@mui/material/ButtonBase';
 import { common } from '@mui/material/colors';
 import { dialogActionsClasses } from '@mui/material/DialogActions';
 import { alpha, createTheme as createMuiTheme, darken, getContrastRatio, lighten, } from '@mui/material/styles';
+import { keyframes } from '@mui/system';
 const palette = {
     primary: {
         main: '#3F49E1',
@@ -41,6 +43,16 @@ const shape = {
     borderRadius: 12,
     borderRadiusSecondary: 8,
 };
+const enterKeyframe = keyframes `
+  0% {
+    transform: scale(0);
+    opacity: 0.05;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.1;
+  }
+`;
 export const createTheme = (mode, theme = {}) => {
     const primaryMainColor = theme.palette?.primary?.main ??
         palette.primary.main;
@@ -104,6 +116,19 @@ export const createTheme = (mode, theme = {}) => {
                     },
                 },
             },
+            MuiButtonBase: {
+                styleOverrides: {
+                    root: {
+                        [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]: {
+                            animationName: `${enterKeyframe}`,
+                        },
+                        [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]: {
+                            opacity: 0.1,
+                            animationName: `${enterKeyframe}`,
+                        },
+                    },
+                },
+            },
             MuiButton: {
                 defaultProps: {
                     disableElevation: true,

package/config/version.d.ts

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

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.32.0';
+export const version = '1.32.2';