@lifi/widget 1.22.1 → 1.23.1

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

@@ -27,9 +27,15 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
     componentsProps?: {
         root?: (import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides) | undefined;
     } | undefined;
+    slotProps?: {
+        root?: (import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides) | undefined;
+    } | undefined;
+    slots?: {
+        root?: import("react").ElementType<any> | undefined;
+    } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "componentsProps" | "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" | "componentsProps" | "slotProps" | "slots" | "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;

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { BottomSheetBase, BottomSheetProps } from './types';
-export declare const BottomSheet: import("react").ForwardRefExoticComponent<Pick<BottomSheetProps, "className" | "style" | "classes" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "transitionDuration" | "variant" | "open" | "anchor" | "components" | "elementRef" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "slotProps" | "slots" | "elevation" | "PaperProps" | "ModalProps" | "SlideProps"> & import("react").RefAttributes<BottomSheetBase>>;
+export declare const BottomSheet: import("react").ForwardRefExoticComponent<Pick<BottomSheetProps, "className" | "style" | "classes" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "transitionDuration" | "variant" | "open" | "anchor" | "components" | "elementRef" | "componentsProps" | "slotProps" | "slots" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "elevation" | "PaperProps" | "ModalProps" | "SlideProps"> & import("react").RefAttributes<BottomSheetBase>>;

package/cjs/components/SelectChainAndToken.js

@@ -23,6 +23,6 @@ const SelectChainAndToken = (props) => {
         (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.FromToken)) ||
         (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.ToToken));
     const isCompact = fromChain && toChain && fromToken && toToken && !prefersNarrowView;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' } }, props, { children: [(0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "from", compact: isCompact }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, m: !disabledReverse ? -1.25 : 1 }, { children: !disabledReverse ? ((0, jsx_runtime_1.jsx)(ReverseTokensButton_1.ReverseTokensButton, { vertical: !isCompact })) : null })), (0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "to", compact: isCompact })] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' } }, props, { children: [(0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "from", compact: isCompact }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, m: !disabledReverse ? -1.125 : 1 }, { children: !disabledReverse ? ((0, jsx_runtime_1.jsx)(ReverseTokensButton_1.ReverseTokensButton, { vertical: !isCompact })) : null })), (0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "to", compact: isCompact })] })));
 };
 exports.SelectChainAndToken = SelectChainAndToken;

package/cjs/components/SelectTokenButton/SelectTokenButton.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectTokenButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
@@ -35,6 +34,6 @@ const SelectTokenButton = ({ formType, compact }) => {
     const defaultTitle = formType === 'to' && variant === 'refuel'
         ? t(`header.selectChain`)
         : t(`swap.selectChainAndToken`);
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ flex: 1, onClick: onClick }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.${formType}`) }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 24 }), subheader: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: isSelected ? (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain }) : null, action: !compact ? (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) : null, title: isSelected ? token.symbol : defaultTitle, subheader: isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ flex: 1, onClick: onClick }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.${formType}`) }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 24 }), subheader: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain })) : ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatarSkeleton, {})), title: isSelected ? token.symbol : defaultTitle, subheader: isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] })));
 };
 exports.SelectTokenButton = SelectTokenButton;

package/cjs/components/SelectTokenButton/SelectTokenButton.style.js

@@ -15,7 +15,7 @@ exports.SelectTokenCardHeader = (0, styles_1.styled)(Card_1.CardHeader, {
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
-        width: compact ? (selected ? 92 : 142) : 224,
+        width: compact ? (selected ? 92 : 142) : 256,
         fontWeight: selected ? 500 : 400,
         fontSize: compact && !selected ? '1rem' : '1.125rem',
     },
@@ -23,6 +23,6 @@ exports.SelectTokenCardHeader = (0, styles_1.styled)(Card_1.CardHeader, {
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
-        width: compact ? 92 : 224,
+        width: compact ? 92 : 256,
     },
 }));

package/cjs/components/StepActions/StepActions.js

@@ -44,12 +44,12 @@ const StepActions = (_a) => {
 };
 exports.StepActions = StepActions;
 const StepDetailsContent = ({ step }) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
     const { t } = (0, react_i18next_1.useTranslation)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex" }, { children: [t('format.number', {
                 value: (0, utils_1.formatTokenAmount)(step.estimate.fromAmount, step.action.fromToken.decimals),
             }), ' ', step.action.fromToken.symbol, (0, jsx_runtime_1.jsx)(icons_material_1.ArrowForward, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {
-                value: (0, utils_1.formatTokenAmount)((_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount, step.action.toToken.decimals),
+                value: (0, utils_1.formatTokenAmount)((_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount, (_e = (_d = (_c = step.execution) === null || _c === void 0 ? void 0 : _c.toToken) === null || _d === void 0 ? void 0 : _d.decimals) !== null && _e !== void 0 ? _e : step.action.toToken.decimals),
             }), ' ', step.action.toToken.symbol] })));
 };
 exports.StepDetailsContent = StepDetailsContent;

package/cjs/components/SwapButton/SwapButton.js

@@ -47,7 +47,7 @@ exports.SwapButton = (0, react_1.forwardRef)(({ onClick, currentRoute, text, dis
             }
             return variant !== 'refuel'
                 ? t(`button.reviewSwap`)
-                : t(`button.startSwap`);
+                : t(`button.startGasSwap`);
         }
         return t(`button.connectWallet`);
     };

package/cjs/components/SwapInput/FormPriceHelperText.js

@@ -19,7 +19,7 @@ const FormPriceHelperText = ({ formType, selected }) => {
     });
     const { token, isLoading } = (0, hooks_1.useTokenAddressBalance)(chainId, tokenAddress);
     const fromAmountTokenPrice = (0, utils_1.formatTokenPrice)(amount, token === null || token === void 0 ? void 0 : token.priceUSD);
-    return ((0, jsx_runtime_1.jsxs)(material_1.FormHelperText, Object.assign({ component: "div", sx: { display: 'flex', justifyContent: 'space-between', margin: 0 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: fromAmountTokenPrice ? 'text.secondary' : 'grey.600', fontWeight: 400, fontSize: 12, marginLeft: selected ? 8 : 2, lineHeight: 1.3334, flex: 1, sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormHelperText, Object.assign({ component: "div", sx: { display: 'flex', justifyContent: 'space-between', margin: 0 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: fromAmountTokenPrice ? 'text.secondary' : 'grey.600', fontWeight: 400, fontSize: 12, marginLeft: 8, lineHeight: 1.3334, flex: 1, sx: {
                     wordBreak: 'break-word',
                     overflowWrap: 'break-word',
                 } }, { children: t(`format.currency`, {

package/cjs/components/SwapInput/SwapInput.js

@@ -46,7 +46,7 @@ const SwapInput = ({ formType }) => {
         (0, utils_1.fitInputText)(SwapInput_style_1.maxInputFontSize, SwapInput_style_1.minInputFontSize, ref.current);
     }, [amount]);
     const disabled = disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.FromAmount);
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.fromAmount') }), (0, jsx_runtime_1.jsxs)(SwapInput_style_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(SwapInput_style_1.Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain, sx: { marginLeft: 2 } })) : null, endAdornment: !disabled ? (0, jsx_runtime_1.jsx)(SwapInputAdornment_1.SwapInputAdornment, { formType: formType }) : undefined, inputProps: {
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.fromAmount') }), (0, jsx_runtime_1.jsxs)(SwapInput_style_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(SwapInput_style_1.Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain, sx: { marginLeft: 2 } })) : ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatarSkeleton, { sx: { marginLeft: 2 } })), endAdornment: !disabled ? (0, jsx_runtime_1.jsx)(SwapInputAdornment_1.SwapInputAdornment, { formType: formType }) : undefined, inputProps: {
                             inputMode: 'decimal',
                         }, onChange: handleChange, onBlur: handleBlur, value: amount, name: amountKey, disabled: disabled, required: true }), (0, jsx_runtime_1.jsx)(FormPriceHelperText_1.FormPriceHelperText, { selected: isSelected, formType: formType })] }))] }));
 };

package/cjs/components/SwapRouteCard/SwapRouteCard.js

@@ -37,7 +37,8 @@ const SwapRouteCard = (_a) => {
         e.stopPropagation();
         setCardExpanded((expanded) => !expanded);
     };
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, Object.assign({ active: active !== null && active !== void 0 ? 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, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'stretched' ? route.steps[0] : undefined }), variant === 'stretched' && !expanded ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconButton, Object.assign({ 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, Object.assign({ 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] })));
+    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ flex: 1 }, { children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, Object.assign({ active: active !== null && active !== void 0 ? 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, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'stretched' ? route.steps[0] : undefined, disableDescription: variant === 'dense' && widgetVariant !== 'refuel' }), variant === 'stretched' && !expanded ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconButton, Object.assign({ 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, Object.assign({ 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, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: cardContent })));
 };
 exports.SwapRouteCard = SwapRouteCard;
 const SwapRouteCardEssentials = ({ route, dense }) => {

package/cjs/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -19,6 +19,7 @@ const Card_1 = require("../Card");
 const SwapRouteCardSkeleton = (_a) => {
     var { variant } = _a, other = __rest(_a, ["variant"]);
     const { variant: widgetVariant, useRecommendedRoute } = (0, providers_1.useWidgetConfig)();
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: variant === 'dense', indented: true }, other, { children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ 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: { borderRadius: 0.5 } }), variant === 'stretched' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ 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, Object.assign({ display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ 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, Object.assign({ 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, Object.assign({ 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] })));
+    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ flex: 1 }, { children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ 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: { borderRadius: 0.5 } }), variant === 'stretched' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ 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, Object.assign({ display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ 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, Object.assign({ 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, Object.assign({ 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, Object.assign({ dense: variant === 'dense', indented: true }, other, { children: cardContent })));
 };
 exports.SwapRouteCardSkeleton = SwapRouteCardSkeleton;

package/cjs/components/Token/Token.d.ts

@@ -1,8 +1,11 @@
 /// <reference types="react" />
 import type { Step, TokenAmount } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
-export declare const Token: React.FC<{
+interface TokenProps {
     token: TokenAmount;
     connected?: boolean;
     step?: Step;
-} & BoxProps>;
+    disableDescription?: boolean;
+}
+export declare const Token: React.FC<TokenProps & BoxProps>;
+export {};

package/cjs/components/Token/Token.js

@@ -22,19 +22,23 @@ const TextFitter_1 = require("../TextFitter");
 const TokenAvatar_1 = require("../TokenAvatar");
 const Token_style_1 = require("./Token.style");
 const Token = (_a) => {
-    var { token, connected, step } = _a, other = __rest(_a, ["token", "connected", "step"]);
+    var { token, connected, step, disableDescription } = _a, other = __rest(_a, ["token", "connected", "step", "disableDescription"]);
     const { t } = (0, react_i18next_1.useTranslation)();
     const { chain } = (0, hooks_1.useChain)(token.chainId);
+    const formattedTokenAmount = (0, utils_1.formatTokenAmount)(token.amount, token.decimals);
+    const formattedTokenPrice = (0, utils_1.formatTokenPrice)(formattedTokenAmount, token.priceUSD);
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ flex: 1 }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", flex: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(TextFitter_1.TextFitter, Object.assign({ height: 30, textStyle: {
                             fontWeight: 700,
                         } }, { children: t('format.number', {
-                            value: (0, utils_1.formatTokenAmount)(token.amount, token.decimals),
-                        }) }))] })), (0, jsx_runtime_1.jsxs)(Token_style_1.TextSecondaryContainer, Object.assign({ connected: connected, component: "span" }, { children: [(0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
+                            value: formattedTokenAmount,
+                        }) }))] })), (0, jsx_runtime_1.jsxs)(Token_style_1.TextSecondaryContainer, Object.assign({ connected: connected, component: "span" }, { children: [(0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: connected }, { children: t(`format.currency`, {
+                            value: formattedTokenPrice,
+                        }) })), !disableDescription ? ((0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: connected, px: 0.5, dot: true }, { children: "\u2022" }))) : null, !step && !disableDescription ? ((0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
                             tokenSymbol: token.symbol,
                             chainName: chain === null || chain === void 0 ? void 0 : chain.name,
-                        }) })), step ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, lineHeight: 1, fontWeight: 500, color: "text.secondary", px: 1, mt: 0.5 }, { children: "\u2022" })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "flex-end", height: 12, mt: 0.5 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ pr: 0.75 }, { children: (0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, Object.assign({ src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
-                                                border: 0,
-                                                marginBottom: -0.25,
-                                            } }, { children: step.toolDetails.name[0] })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, lineHeight: 1, fontWeight: 500, color: "text.secondary" }, { children: step.toolDetails.name }))] }))] })) : null] }))] })));
+                        }) }))) : null, step ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "flex-end", height: 12, mt: 0.5 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ pr: 0.75 }, { children: (0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, Object.assign({ src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
+                                        border: 0,
+                                        marginBottom: -0.25,
+                                    } }, { children: step.toolDetails.name[0] })) })), (0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: true }, { children: step.toolDetails.name }))] }))) : null] }))] })));
 };
 exports.Token = Token;

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

@@ -23,6 +23,7 @@ export declare const TextSecondary: import("@emotion/styled").StyledComponent<im
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("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") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     connected?: boolean | undefined;
+    dot?: boolean | undefined;
 }, {}, {}>;
 export declare const TokenDivider: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     children?: import("react").ReactNode;

package/cjs/components/Token/Token.style.js

@@ -22,12 +22,12 @@ exports.TextSecondaryContainer = (0, styles_1.styled)(material_1.Box, {
     flexWrap: 'wrap',
 }));
 exports.TextSecondary = (0, styles_1.styled)(material_1.Typography, {
-    shouldForwardProp: (prop) => prop !== 'connected',
-})(({ theme, connected }) => ({
+    shouldForwardProp: (prop) => !['connected', 'dot'].includes(prop),
+})(({ theme, connected, dot }) => ({
     fontSize: 12,
     lineHeight: 1,
     fontWeight: 500,
-    color: theme.palette.text.secondary,
+    color: dot ? theme.palette.grey[400] : theme.palette.text.secondary,
     marginTop: connected ? 0 : theme.spacing(0.5),
 }));
 exports.TokenDivider = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({

package/cjs/components/TokenAvatar/TokenAvatar.d.ts

@@ -15,3 +15,6 @@ export declare const TokenAvatar: React.FC<{
     chain?: Chain;
     sx?: SxProps<Theme>;
 }>;
+export declare const TokenAvatarSkeleton: React.FC<{
+    sx?: SxProps<Theme>;
+}>;

package/cjs/components/TokenAvatar/TokenAvatar.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TokenAvatar = exports.TokenAvatarBase = exports.TokenAvatarFallback = void 0;
+exports.TokenAvatarSkeleton = exports.TokenAvatar = exports.TokenAvatarBase = exports.TokenAvatarFallback = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const hooks_1 = require("../../hooks");
 const SmallAvatar_1 = require("../SmallAvatar");
+const TokenAvatar_style_1 = require("./TokenAvatar.style");
 const TokenAvatarFallback = ({ token, sx }) => {
     const { chain } = (0, hooks_1.useChain)(token.chainId);
     const { token: chainToken } = (0, hooks_1.useToken)(token.chainId, token.address);
@@ -22,3 +23,7 @@ const TokenAvatar = ({ token, chain, sx }) => {
     return (0, jsx_runtime_1.jsx)(exports.TokenAvatarBase, { token: token, chain: chain, sx: sx });
 };
 exports.TokenAvatar = TokenAvatar;
+const TokenAvatarSkeleton = ({ sx }) => {
+    return ((0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: (0, jsx_runtime_1.jsx)(TokenAvatar_style_1.AvatarSkeleton, { width: 16, height: 16 }), sx: sx }, { children: (0, jsx_runtime_1.jsx)(TokenAvatar_style_1.AvatarSkeletonContainer, { children: (0, jsx_runtime_1.jsx)(TokenAvatar_style_1.AvatarSkeleton, { width: 28, height: 28 }) }) })));
+};
+exports.TokenAvatarSkeleton = TokenAvatarSkeleton;

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

@@ -1 +1,18 @@
+/// <reference types="react" />
 export declare const TokenAvatarGroup: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarGroupProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const AvatarSkeleton: 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>, {}, {}>;
+export declare const AvatarSkeletonContainer: 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>, {}, {}>;

package/cjs/components/TokenAvatar/TokenAvatar.style.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TokenAvatarGroup = void 0;
+exports.AvatarSkeletonContainer = exports.AvatarSkeleton = exports.TokenAvatarGroup = void 0;
 const material_1 = require("@mui/material");
 const Avatar_1 = require("@mui/material/Avatar");
 const Badge_1 = require("@mui/material/Badge");
@@ -14,3 +14,16 @@ exports.TokenAvatarGroup = (0, styles_1.styled)(material_1.AvatarGroup)(({ theme
         marginLeft: theme.spacing(1),
     },
 }));
+exports.AvatarSkeleton = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    background: theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[800],
+    border: `2px solid ${theme.palette.background.paper}`,
+    borderRadius: '50%',
+}));
+exports.AvatarSkeletonContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    border: `2px solid ${theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[800]}`,
+    borderRadius: '50%',
+}));

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

@@ -27,6 +27,12 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
     componentsProps?: {
         root?: (import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides) | undefined;
     } | undefined;
+    slotProps?: {
+        root?: (import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides) | undefined;
+    } | undefined;
+    slots?: {
+        root?: import("react").ElementType<any> | undefined;
+    } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "componentsProps" | "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" | "componentsProps" | "slotProps" | "slots" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/config/version.d.ts

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

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.22.1';
+exports.version = '1.23.1';

package/cjs/hooks/useGasSufficiency.js

@@ -72,7 +72,6 @@ const useGasSufficiency = (route) => {
         return gasCostResult;
     }), {
         enabled: Boolean(account.address && route),
-        refetchIntervalInBackground: true,
         refetchInterval,
         staleTime: refetchInterval,
         cacheTime: refetchInterval,
@@ -102,7 +101,6 @@ const useGasSufficiency = (route) => {
         return insufficientFunds;
     }), {
         enabled: Boolean(account.address && route && fromToken),
-        refetchIntervalInBackground: true,
         refetchInterval,
         staleTime: refetchInterval,
         cacheTime: refetchInterval,

package/cjs/hooks/useInitializer.js

@@ -6,10 +6,14 @@ const sdk_1 = require("@lifi/sdk");
 const react_1 = require("react");
 const version_1 = require("../config/version");
 const useTools_1 = require("./useTools");
+let checkedPackageUpdates = false;
 const useInitializer = () => {
     (0, useTools_1.useTools)();
     (0, react_1.useEffect)(() => {
-        (0, sdk_1.checkPackageUpdates)(version_1.name, version_1.version);
+        if (!checkedPackageUpdates) {
+            checkedPackageUpdates = true;
+            (0, sdk_1.checkPackageUpdates)(version_1.name, version_1.version);
+        }
     }, []);
 };
 exports.useInitializer = useInitializer;

package/cjs/hooks/useSwapRoutes.js

@@ -104,7 +104,6 @@ const useSwapRoutes = () => {
         }, { signal });
     }), {
         enabled: isEnabled,
-        refetchIntervalInBackground: true,
         refetchInterval,
         staleTime: refetchTime,
         cacheTime: refetchTime,

package/cjs/hooks/useTokenBalance.js

@@ -73,7 +73,6 @@ const useTokenBalance = (token, accountAddress) => {
         return Object.assign(Object.assign({}, tokenBalances[0]), { amount: formattedAmount });
     }), {
         enabled: Boolean(walletAddress && token),
-        refetchIntervalInBackground: true,
         refetchInterval: defaultRefetchInterval,
         staleTime: defaultRefetchInterval,
     });

package/cjs/hooks/useTokenBalances.js

@@ -62,7 +62,6 @@ const useTokenBalances = (selectedChainId) => {
         return result;
     }), {
         enabled: isBalanceLoadingEnabled,
-        refetchIntervalInBackground: true,
         refetchInterval,
         staleTime: refetchInterval,
     });

package/cjs/hooks/useTools.js

@@ -8,7 +8,7 @@ const stores_1 = require("../stores");
 const useTools = () => {
     const lifi = (0, providers_1.useLiFi)();
     const { bridges, exchanges } = (0, providers_1.useWidgetConfig)();
-    const { data } = (0, react_query_1.useQuery)(['tools'], ({ signal }) => lifi.getTools(undefined, { signal }), {
+    const { data } = (0, react_query_1.useQuery)(['tools'], () => lifi.getTools(), {
         onSuccess(data) {
             const { initializeTools } = stores_1.useSettingsStore.getState();
             initializeTools('Bridges', data.bridges

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -56,10 +56,12 @@ const SwapDetailsPage = () => {
                 }, pb: 1 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
                         }).format(startedAt) }))] })), routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps.map((step, index, steps) => {
-                var _a, _b;
-                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Step_1.Step, { step: step, fromToken: index === 0
-                                ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined, toToken: index === steps.length - 1
-                                ? Object.assign(Object.assign({}, step.action.toToken), { amount: (_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount }) : undefined }), steps.length > 1 && index !== steps.length - 1 ? ((0, jsx_runtime_1.jsx)(StepDivider_1.StepDivider, {})) : null] }, step.id));
+                var _a, _b, _c, _d, _e;
+                const fromToken = index === 0
+                    ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined;
+                const toToken = index === steps.length - 1
+                    ? Object.assign(Object.assign({}, ((_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toToken) !== null && _b !== void 0 ? _b : (_c = step.action) === null || _c === void 0 ? void 0 : _c.toToken)), { amount: (_e = (_d = step.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : step.estimate.toAmount }) : undefined;
+                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Step_1.Step, { step: step, fromToken: fromToken, toToken: toToken }), steps.length > 1 && index !== steps.length - 1 ? ((0, jsx_runtime_1.jsx)(StepDivider_1.StepDivider, {})) : null] }, step.id));
             }), (0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ mt: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
                             display: 'flex',
                             flex: 1,

package/cjs/pages/SwapPage/StatusBottomSheet.js

@@ -79,6 +79,6 @@ const StatusBottomSheet = ({ status, route, }) => {
             (_b = ref.current) === null || _b === void 0 ? void 0 : _b.open();
         }
     }, [refetch, refetchNewBalance, status]);
-    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: ref }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3 }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary" }) : null, status === 'success' ? (0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success" }) : null, status === 'error' ? (0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error" }) : null] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_g = (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.estimate.toAmount) !== null && _g !== void 0 ? _g : route.toAmount }), py: 1 })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: message })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.ok') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.seeDetails') : null] })) })), status === 'success' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
+    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: ref }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3 }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary" }) : null, status === 'success' ? (0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success" }) : null, status === 'error' ? (0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error" }) : null] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_g = (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.estimate.toAmount) !== null && _g !== void 0 ? _g : route.toAmount }), py: 1, disableDescription: true })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: message })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.ok') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.seeDetails') : null] })) })), status === 'success' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
 };
 exports.StatusBottomSheet = StatusBottomSheet;

package/cjs/pages/SwapPage/SwapPage.js

@@ -71,10 +71,12 @@ const SwapPage = () => {
         }
     };
     return ((0, jsx_runtime_1.jsxs)(SwapPage_style_1.Container, { children: [route === null || route === void 0 ? void 0 : route.steps.map((step, index, steps) => {
-                var _a, _b;
-                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Step_1.Step, { step: step, fromToken: index === 0
-                                ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined, toToken: index === steps.length - 1
-                                ? Object.assign(Object.assign({}, step.action.toToken), { amount: (_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount }) : undefined }), steps.length > 1 && index !== steps.length - 1 ? ((0, jsx_runtime_1.jsx)(StepDivider_1.StepDivider, {})) : null] }, step.id));
+                var _a, _b, _c, _d, _e;
+                const fromToken = index === 0
+                    ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined;
+                const toToken = index === steps.length - 1
+                    ? Object.assign(Object.assign({}, ((_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toToken) !== null && _b !== void 0 ? _b : (_c = step.action) === null || _c === void 0 ? void 0 : _c.toToken)), { amount: (_e = (_d = step.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : step.estimate.toAmount }) : undefined;
+                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Step_1.Step, { step: step, fromToken: fromToken, toToken: toToken }), steps.length > 1 && index !== steps.length - 1 ? ((0, jsx_runtime_1.jsx)(StepDivider_1.StepDivider, {})) : null] }, step.id));
             }), status === 'idle' || status === 'error' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { route: route, mt: 2 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2, display: "flex" }, { children: [(0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, 
                                 // disable={status === 'idle' && (isValidating || !isValid)}
                                 enableLoading: true }), status === 'error' ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleRemoveRoute, sx: {

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

@@ -27,9 +27,15 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
     componentsProps?: {
         root?: (import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides) | undefined;
     } | undefined;
+    slotProps?: {
+        root?: (import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides) | undefined;
+    } | undefined;
+    slots?: {
+        root?: import("react").ElementType<any> | undefined;
+    } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "componentsProps" | "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" | "componentsProps" | "slotProps" | "slots" | "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;