@lifi/widget 1.32.8 → 2.0.0-alpha.1

package/cjs/components/Step/GasStepProcess.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GasStepProcess = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const EvStationOutlined_1 = require("@mui/icons-material/EvStationOutlined");
+const EvStation_1 = require("@mui/icons-material/EvStation");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const CircularProgress_style_1 = require("./CircularProgress.style");
@@ -12,10 +12,10 @@ const GasStepProcess = ({ step }) => {
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { px: 2, py: 1, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                 display: 'flex',
                 alignItems: 'center',
-            }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: (0, jsx_runtime_1.jsx)(EvStationOutlined_1.default, { color: isDone ? 'success' : 'inherit', sx: {
+            }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: (0, jsx_runtime_1.jsx)(EvStation_1.default, { color: isDone ? 'success' : 'inherit', sx: {
                             position: 'absolute',
                             fontSize: '1rem',
-                        } }) }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { ml: 2, fontSize: 14, fontWeight: 400, children: [t('format.currency', {
+                        } }) }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { ml: 2, flex: 1, fontSize: 14, fontWeight: 400, children: [t('format.currency', {
                             value: (step.execution?.gasAmountUSD ||
                                 step.estimate.gasCosts?.reduce((amount, gasCost) => amount + parseFloat(gasCost.amountUSD || '0'), 0)) ??
                                 0,

package/cjs/components/Step/Step.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { Step as StepType, TokenAmount } from '@lifi/sdk';
+import type { LifiStep, TokenAmount } from '@lifi/sdk';
 export declare const Step: React.FC<{
-    step: StepType;
+    step: LifiStep;
     fromToken?: TokenAmount;
     toToken?: TokenAmount;
     toAddress?: string;

package/cjs/components/Step/Step.js

@@ -20,17 +20,15 @@ const Step = ({ step, fromToken, toToken, toAddress }) => {
     const getCardTitle = () => {
         switch (step.type) {
             case 'lifi':
-                if (step.includedSteps.every((step) => step.type === 'cross')) {
-                    return t('swap.stepBridge');
+                const hasCrossStep = step.includedSteps.some((step) => step.type === 'cross');
+                const hasSwapStep = step.includedSteps.some((step) => step.type === 'swap');
+                if (hasCrossStep && hasSwapStep) {
+                    return t('swap.stepSwapAndBridge');
                 }
-                if (step.includedSteps.every((step) => step.type === 'swap')) {
-                    return t('swap.stepSwap');
+                if (hasCrossStep) {
+                    return t('swap.stepBridge');
                 }
-                return t('swap.stepSwapAndBridge');
-            case 'swap':
                 return t('swap.stepSwap');
-            case 'cross':
-                return t('swap.stepBridge');
             default:
                 return t('swap.stepSwap');
         }

package/cjs/components/Step/StepList.d.ts

@@ -1,2 +1,2 @@
-import { Route } from '@lifi/sdk';
+import type { Route } from '@lifi/sdk';
 export declare const getStepList: (route?: Route) => JSX.Element[] | undefined;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { Process, Step } from '@lifi/sdk';
+import type { LifiStep, Process } from '@lifi/sdk';
 export declare const StepProcess: React.FC<{
-    step: Step;
+    step: LifiStep;
     process: Process;
 }>;

package/cjs/components/Step/StepProcess.js

@@ -12,10 +12,6 @@ const StepProcess = ({ step, process }) => {
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { px: 2, py: 1, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                     display: 'flex',
                     alignItems: 'center',
-                }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { process: process }), (0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 2, fontSize: 14, fontWeight: process.error ? 600 : 400, children: title }), process.txLink ? ((0, jsx_runtime_1.jsx)(material_1.Box, { ml: 2, sx: {
-                            display: 'flex',
-                            flex: 1,
-                            justifyContent: 'flex-end',
-                        }, children: (0, jsx_runtime_1.jsx)(StepProcess_style_1.LinkButton, { size: "small", edge: "end", LinkComponent: material_1.Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer", children: (0, jsx_runtime_1.jsx)(LinkRounded_1.default, {}) }) })) : null] }), message ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary", children: message })) : null] }));
+                }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { process: process }), (0, jsx_runtime_1.jsx)(material_1.Typography, { mx: 2, flex: 1, fontSize: 14, fontWeight: process.error ? 600 : 400, children: title }), process.txLink ? ((0, jsx_runtime_1.jsx)(StepProcess_style_1.LinkButton, { size: "small", edge: "end", LinkComponent: material_1.Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer", children: (0, jsx_runtime_1.jsx)(LinkRounded_1.default, {}) })) : null] }), message ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary", children: message })) : null] }));
 };
 exports.StepProcess = StepProcess;

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

@@ -1,39 +1,3 @@
-/// <reference types="react" />
-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" | "primary" | "secondary" | "info" | undefined;
-    disabled?: boolean | undefined;
-    disableFocusRipple?: boolean | undefined;
-    edge?: false | "end" | "start" | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & Omit<import("@mui/material").LinkBaseProps, "classes"> & {
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").LinkClasses> | undefined;
-    color?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue<string[] | import("csstype").Property.Color | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue<string[] | import("csstype").Property.Color | undefined>);
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    TypographyClasses?: (Partial<import("@mui/material").TypographyClasses> & Partial<import("@mui/material").ClassNameMap<never>>) | undefined;
-    underline?: "none" | "always" | "hover" | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
-    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "p" | "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" | "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "type" | "referrerPolicy" | "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" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "underline" | "TypographyClasses">, {}, {}>;
+import type { StyledComponent } from '@emotion/styled';
+import type { IconButtonProps, LinkProps } from '@mui/material';
+export declare const LinkButton: StyledComponent<IconButtonProps & LinkProps>;

package/cjs/components/Step/StepTimer.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { Step } from '@lifi/sdk';
+import type { LifiStep } from '@lifi/sdk';
 export declare const StepTimer: React.FC<{
-    step: Step;
+    step: LifiStep;
     hideInProgress?: boolean;
 }>;

package/cjs/components/Step/StepTimer.js

@@ -7,7 +7,7 @@ const react_i18next_1 = require("react-i18next");
 const react_timer_hook_1 = require("react-timer-hook");
 const getExpiryTimestamp = (step) => new Date((step.execution?.process[0]?.startedAt ?? Date.now()) +
     step.estimate.executionDuration * 1000);
-const StepTimer = ({ step, hideInProgress, }) => {
+const StepTimer = ({ step, hideInProgress }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const [isExpired, setExpired] = (0, react_1.useState)(false);
     const [isExecutionStarted, setExecutionStarted] = (0, react_1.useState)(!!step.execution);

package/cjs/components/StepActions/StepActions.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="react" />
-import type { Step } from '@lifi/sdk';
+import type { LifiStep, Step } from '@lifi/sdk';
 import type { WidgetVariant } from '../../types';
 import type { StepActionsProps, StepDetailsLabelProps } from './types';
 export declare const StepActions: React.FC<StepActionsProps>;
+export declare const IncludedSteps: React.FC<{
+    step: LifiStep;
+    variant?: WidgetVariant;
+}>;
 export declare const StepDetailsContent: React.FC<{
     step: Step;
     variant?: WidgetVariant;
@@ -10,3 +14,4 @@ export declare const StepDetailsContent: React.FC<{
 export declare const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps>;
 export declare const CrossStepDetailsLabel: React.FC<Omit<StepDetailsLabelProps, 'variant'>>;
 export declare const SwapStepDetailsLabel: React.FC<Omit<StepDetailsLabelProps, 'variant'>>;
+export declare const ProtocolStepDetailsLabel: React.FC<Omit<StepDetailsLabelProps, 'variant'>>;

package/cjs/components/StepActions/StepActions.js

@@ -1,29 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapStepDetailsLabel = exports.CrossStepDetailsLabel = exports.CustomStepDetailsLabel = exports.StepDetailsContent = exports.StepActions = void 0;
+exports.ProtocolStepDetailsLabel = exports.SwapStepDetailsLabel = exports.CrossStepDetailsLabel = exports.CustomStepDetailsLabel = exports.StepDetailsContent = exports.IncludedSteps = exports.StepActions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ArrowForward_1 = require("@mui/icons-material/ArrowForward");
+const ExpandLess_1 = require("@mui/icons-material/ExpandLess");
+const ExpandMore_1 = require("@mui/icons-material/ExpandMore");
 const material_1 = require("@mui/material");
+const big_js_1 = require("big.js");
+const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../hooks");
 const icons_1 = require("../../icons");
 const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
+const Card_1 = require("../Card");
 const SmallAvatar_1 = require("../SmallAvatar");
 const StepActions_style_1 = require("./StepActions.style");
 const StepActions = ({ step, dense, ...other }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
     const { variant, contractTool } = (0, providers_1.useWidgetConfig)();
-    const StepDetailsLabel = step.tool === 'custom' && variant === 'nft'
-        ? exports.CustomStepDetailsLabel
-        : step.type === 'cross' ||
-            (step.type === 'lifi' &&
-                step.includedSteps.some((step) => step.type === 'cross'))
-            ? exports.CrossStepDetailsLabel
-            : exports.SwapStepDetailsLabel;
-    const isFullView = !dense && step.includedSteps?.length > 1;
+    const [cardExpanded, setCardExpanded] = (0, react_1.useState)(false);
+    const handleExpand = (e) => {
+        e.stopPropagation();
+        setCardExpanded((expanded) => !expanded);
+    };
     const customStep = variant === 'nft'
         ? step.includedSteps?.find((step) => step.type === 'custom')
         : undefined;
+    const hasCollapsedSteps = dense && step.includedSteps?.length > 1;
     if (customStep && contractTool) {
         const toolDetails = {
             key: contractTool.name,
@@ -31,10 +35,16 @@ const StepActions = ({ step, dense, ...other }) => {
             logoURI: contractTool.logoURI,
         };
         customStep.toolDetails = toolDetails;
-        if (!isFullView) {
+        if (dense) {
             step.toolDetails = toolDetails;
         }
     }
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ...other, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: (0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, { children: (0, jsx_runtime_1.jsx)(icons_1.LiFiToolLogo, {}) }), children: (0, jsx_runtime_1.jsx)(StepActions_style_1.StepAvatar, { variant: "circular", src: step.toolDetails.logoURI, alt: step.toolDetails.name, children: step.toolDetails.name[0] }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 2, fontSize: 18, fontWeight: "500", flex: 1, children: t(`swap.stepDetails`, {
+                            tool: step.toolDetails.name,
+                        }) }), hasCollapsedSteps ? ((0, jsx_runtime_1.jsx)(Card_1.CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) })) : null] }), hasCollapsedSteps ? ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(exports.IncludedSteps, { step: step, variant: variant }) })) : ((0, jsx_runtime_1.jsx)(exports.IncludedSteps, { step: step, variant: variant }))] }));
+};
+exports.StepActions = StepActions;
+const IncludedSteps = ({ step, variant }) => {
     // eslint-disable-next-line react/no-unstable-nested-components
     const StepIconComponent = ({ icon }) => {
         const tool = step.includedSteps?.[Number(icon) - 1];
@@ -42,17 +52,35 @@ const StepActions = ({ step, dense, ...other }) => {
                 boxSizing: 'content-box',
             }, children: tool.toolDetails.name[0] })) : null;
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ...other, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', alignItems: 'center' }, mb: isFullView ? 1.5 : 0, children: [(0, jsx_runtime_1.jsx)(StepActions_style_1.StepAvatar, { variant: "circular", src: step.type !== 'lifi' ? step.toolDetails.logoURI : undefined, alt: step.toolDetails.name, children: step.type === 'lifi' ? (0, jsx_runtime_1.jsx)(icons_1.LiFiToolLogo, {}) : step.toolDetails.name[0] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 2, fontSize: 18, fontWeight: "500", textTransform: "capitalize", children: step.type === 'lifi'
-                            ? 'LI.FI Smart Contract'
-                            : step.toolDetails.name })] }), isFullView ? ((0, jsx_runtime_1.jsx)(material_1.Stepper, { orientation: "vertical", connector: (0, jsx_runtime_1.jsx)(StepActions_style_1.StepConnector, {}), activeStep: -1, children: step.includedSteps.map((step, i) => ((0, jsx_runtime_1.jsxs)(material_1.Step, { expanded: true, children: [(0, jsx_runtime_1.jsx)(StepActions_style_1.StepLabel, { StepIconComponent: StepIconComponent, children: step.type === 'custom' && variant === 'nft' ? ((0, jsx_runtime_1.jsx)(exports.CustomStepDetailsLabel, { step: step, variant: variant })) : step.type === 'cross' || step.type === 'lifi' ? ((0, jsx_runtime_1.jsx)(exports.CrossStepDetailsLabel, { step: step })) : ((0, jsx_runtime_1.jsx)(exports.SwapStepDetailsLabel, { step: step })) }), (0, jsx_runtime_1.jsx)(StepActions_style_1.StepContent, { children: (0, jsx_runtime_1.jsx)(exports.StepDetailsContent, { step: step, variant: variant }) })] }, step.id))) })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { ml: 6, children: [(0, jsx_runtime_1.jsx)(StepDetailsLabel, { step: step, variant: variant === 'nft' ? variant : undefined }), (0, jsx_runtime_1.jsx)(exports.StepDetailsContent, { step: step, variant: variant })] }))] }));
+    const StepDetailsLabel = step.tool === 'custom' && variant === 'nft'
+        ? exports.CustomStepDetailsLabel
+        : step.type === 'lifi' &&
+            step.includedSteps.some((step) => step.type === 'cross')
+            ? exports.CrossStepDetailsLabel
+            : exports.SwapStepDetailsLabel;
+    return step.includedSteps.length > 1 ? ((0, jsx_runtime_1.jsx)(material_1.Box, { mt: 1.5, children: (0, jsx_runtime_1.jsx)(material_1.Stepper, { orientation: "vertical", connector: (0, jsx_runtime_1.jsx)(StepActions_style_1.StepConnector, {}), activeStep: -1, children: step.includedSteps.map((step, i) => ((0, jsx_runtime_1.jsxs)(material_1.Step, { expanded: true, children: [(0, jsx_runtime_1.jsx)(StepActions_style_1.StepLabel, { StepIconComponent: StepIconComponent, children: step.type === 'custom' && variant === 'nft' ? ((0, jsx_runtime_1.jsx)(exports.CustomStepDetailsLabel, { step: step, variant: variant })) : step.type === 'cross' ? ((0, jsx_runtime_1.jsx)(exports.CrossStepDetailsLabel, { step: step })) : step.type === 'protocol' ? ((0, jsx_runtime_1.jsx)(exports.ProtocolStepDetailsLabel, { step: step })) : ((0, jsx_runtime_1.jsx)(exports.SwapStepDetailsLabel, { step: step })) }), (0, jsx_runtime_1.jsx)(StepActions_style_1.StepContent, { children: (0, jsx_runtime_1.jsx)(exports.StepDetailsContent, { step: step, variant: variant }) })] }, step.id))) }) })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { ml: 6, children: [(0, jsx_runtime_1.jsx)(StepDetailsLabel, { step: step, variant: variant === 'nft' ? variant : undefined }), (0, jsx_runtime_1.jsx)(exports.StepDetailsContent, { step: step, variant: variant })] }));
 };
-exports.StepActions = StepActions;
+exports.IncludedSteps = IncludedSteps;
 const StepDetailsContent = ({ step, variant }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
+    const sameTokenProtocolStep = step.action.fromToken.chainId === step.action.toToken.chainId &&
+        step.action.fromToken.address === step.action.toToken.address;
+    let fromAmount;
+    if (sameTokenProtocolStep) {
+        fromAmount = (0, big_js_1.default)(step.estimate.fromAmount)
+            .div(10 ** step.action.fromToken.decimals)
+            .minus((0, big_js_1.default)(step.estimate.toAmount).div(10 ** step.action.toToken.decimals));
+    }
+    else {
+        fromAmount = (0, utils_1.formatTokenAmount)(step.estimate.fromAmount, step.action.fromToken.decimals);
+    }
+    const showToAmount = step.type !== 'custom' &&
+        step.tool !== 'custom' &&
+        variant !== 'nft' &&
+        !sameTokenProtocolStep;
     return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { 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, !((step.type === 'custom' || step.tool === 'custom') &&
-                variant === 'nft') ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ArrowForward_1.default, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {
+                value: fromAmount,
+            }), ' ', step.action.fromToken.symbol, showToAmount ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ArrowForward_1.default, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {
                         value: (0, utils_1.formatTokenAmount)(step.execution?.toAmount ?? step.estimate.toAmount, step.execution?.toToken?.decimals ?? step.action.toToken.decimals),
                     }), ' ', step.execution?.toToken?.symbol ?? step.action.toToken.symbol] })) : null] }));
 };
@@ -86,3 +114,12 @@ const SwapStepDetailsLabel = ({ step }) => {
         }) }));
 };
 exports.SwapStepDetailsLabel = SwapStepDetailsLabel;
+const ProtocolStepDetailsLabel = ({ step }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: step.toolDetails.key === 'lifuelProtocol'
+            ? t('swap.refuelStepDetails', {
+                tool: step.toolDetails.name,
+            })
+            : step.toolDetails.name }));
+};
+exports.ProtocolStepDetailsLabel = ProtocolStepDetailsLabel;

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

@@ -14,7 +14,7 @@ export declare const StepAvatar: import("@emotion/styled").StyledComponent<{
     src?: string | undefined;
     srcSet?: string | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "square" | "circular" | "rounded" | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"square" | "circular" | "rounded", import("@mui/material").AvatarPropsVariantOverrides> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "alt" | "imgProps" | "sizes" | "src" | "srcSet"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -1,8 +1,8 @@
-import type { Step } from '@lifi/sdk';
+import type { LifiStep, Step } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
 import type { WidgetVariant } from '../../types';
 export interface StepActionsProps extends BoxProps {
-    step: Step;
+    step: LifiStep;
     dense?: boolean;
 }
 export interface StepDetailsLabelProps {

package/cjs/components/SwapButton/SwapButton.js

@@ -7,7 +7,7 @@ const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
-const SwapButton = ({ onClick, currentRoute, text, disabled, loading, }) => {
+const SwapButton = ({ onClick, hasRoute, text, disabled, loading, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { variant, walletManagement } = (0, providers_1.useWidgetConfig)();
@@ -27,7 +27,7 @@ const SwapButton = ({ onClick, currentRoute, text, disabled, loading, }) => {
     };
     const getButtonText = () => {
         if (account.isActive) {
-            if (!currentRoute) {
+            if (!hasRoute) {
                 return variant !== 'refuel' ? t(`button.swap`) : t(`button.getGas`);
             }
             if (text) {

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

@@ -1,7 +1,6 @@
-import type { Route } from '@lifi/sdk';
 export interface SwapButtonProps {
     onClick?(): void;
-    currentRoute?: Route;
+    hasRoute?: boolean;
     text?: string;
     disabled?: boolean;
     loading?: boolean;

package/cjs/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" | "primary" | "secondary" | "info" | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"success" | "warning" | "error" | "primary" | "secondary" | "info", import("@mui/material").FormControlPropsColorOverrides> | undefined;
     disabled?: boolean | undefined;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;
@@ -12,7 +12,7 @@ export declare const FormControl: import("@emotion/styled").StyledComponent<{
     hiddenLabel?: boolean | undefined;
     margin?: "normal" | "none" | "dense" | undefined;
     required?: boolean | undefined;
-    size?: "small" | "medium" | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "medium", import("@mui/material").FormControlPropsSizeOverrides> | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: "outlined" | "filled" | "standard" | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

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

@@ -2,17 +2,17 @@
 export declare const Button: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info", import("@mui/material").ButtonPropsColorOverrides> | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     endIcon?: import("react").ReactNode;
     fullWidth?: boolean | undefined;
     href?: string | undefined;
-    size?: "small" | "medium" | "large" | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "text" | "outlined" | "contained" | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"text" | "outlined" | "contained", import("@mui/material").ButtonPropsVariantOverrides> | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;

package/cjs/components/SwapInput/SwapInputEndAdornment.js

@@ -3,23 +3,40 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapInputEndAdornment = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
+const big_js_1 = require("big.js");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
+const utils_1 = require("../../utils");
 const SwapInputAdornment_style_1 = require("./SwapInputAdornment.style");
 const SwapInputEndAdornment = ({ formType }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
+    const { getChainById } = (0, hooks_1.useChains)();
     const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
         name: [
             providers_1.SwapFormKeyHelper.getChainKey(formType),
             providers_1.SwapFormKeyHelper.getTokenKey(formType),
         ],
     });
+    const { data } = (0, hooks_1.useGasRecommendation)(chainId);
     const { token, isLoading } = (0, hooks_1.useTokenAddressBalance)(chainId, tokenAddress);
     const handleMax = () => {
-        setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), token?.amount ?? '', {
+        const chain = getChainById(chainId);
+        let maxAmount;
+        if (chain?.nativeToken.address === tokenAddress &&
+            data?.available &&
+            data?.recommended) {
+            const tokenAmount = (0, big_js_1.default)(token?.amount ?? 0);
+            const recommendedAmount = (0, big_js_1.default)(data.recommended.amount)
+                .div(10 ** data.recommended.token.decimals)
+                .div(2);
+            if (tokenAmount.gt(recommendedAmount)) {
+                maxAmount = (0, utils_1.formatTokenAmount)(tokenAmount.minus(recommendedAmount).toString());
+            }
+        }
+        setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), maxAmount || token?.amount || '', {
             shouldTouch: true,
         });
     };

package/cjs/components/SwapRouteCard/SwapRouteCard.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
 import type { CardProps } from '../Card';
-import type { SwapRouteCardEssentialsProps, SwapRouteCardProps } from './types';
+import type { SwapRouteCardProps } from './types';
 export declare const SwapRouteCard: React.FC<SwapRouteCardProps & Omit<CardProps, 'variant'>>;
-export declare const SwapRouteCardEssentials: React.FC<SwapRouteCardEssentialsProps>;

package/cjs/components/SwapRouteCard/SwapRouteCard.js

@@ -1,12 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapRouteCardEssentials = exports.SwapRouteCard = void 0;
+exports.SwapRouteCard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const AccessTime_1 = require("@mui/icons-material/AccessTime");
-const EvStationOutlined_1 = require("@mui/icons-material/EvStationOutlined");
 const ExpandLess_1 = require("@mui/icons-material/ExpandLess");
 const ExpandMore_1 = require("@mui/icons-material/ExpandMore");
-const LayersOutlined_1 = require("@mui/icons-material/LayersOutlined");
+const VerifiedUser_1 = require("@mui/icons-material/VerifiedUser");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
@@ -14,16 +12,12 @@ const providers_1 = require("../../providers");
 const Card_1 = require("../Card");
 const StepActions_1 = require("../StepActions");
 const Token_1 = require("../Token");
-const SwapRouteCard_style_1 = require("./SwapRouteCard.style");
-const utils_1 = require("./utils");
+const SwapRouteCardEssentials_1 = require("./SwapRouteCardEssentials");
 const SwapRouteCard = ({ route, active, variant = 'default', expanded, ...other }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { variant: widgetVariant, useRecommendedRoute } = (0, providers_1.useWidgetConfig)();
-    const [cardExpanded, setCardExpanded] = (0, react_1.useState)(variant === 'default' || expanded);
-    const alternativeTag = t(`swap.tags.ALTERNATIVE`);
-    const label = route.tags?.length
-        ? t(`swap.tags.${route.tags[0]}`)
-        : alternativeTag;
+    const { variant: widgetVariant } = (0, providers_1.useWidgetConfig)();
+    const [cardExpanded, setCardExpanded] = (0, react_1.useState)(expanded);
+    const insurable = route.insurance?.state === 'INSURABLE';
     const handleExpand = (e) => {
         e.stopPropagation();
         setCardExpanded((expanded) => !expanded);
@@ -31,19 +25,9 @@ const SwapRouteCard = ({ route, active, variant = 'default', expanded, ...other
     const token = widgetVariant === 'nft'
         ? { ...route.fromToken, amount: route.fromAmount }
         : { ...route.toToken, amount: route.toAmount };
-    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, { active: active ?? label !== alternativeTag, children: label }), variant === 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: token, step: variant === 'stretched' ? route.steps[0] : undefined, disableDescription: variant === 'dense' && widgetVariant !== 'refuel' }), variant === 'stretched' && !expanded ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) }), variant !== 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route, dense: true })) : null] }));
-    return widgetVariant === 'refuel' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, { variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true, ...other, children: cardContent }));
+    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [widgetVariant !== 'refuel' && (insurable || route.tags?.length) ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mb: 2, children: [insurable ? ((0, jsx_runtime_1.jsxs)(Card_1.CardLabel, { type: route.tags?.length && !cardExpanded
+                            ? 'insurance-icon'
+                            : 'insurance', children: [(0, jsx_runtime_1.jsx)(VerifiedUser_1.default, { fontSize: "inherit" }), cardExpanded || !route.tags?.length ? ((0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { type: "icon", children: t(`swap.tags.insurable`) })) : null] })) : null, route.tags?.length ? ((0, jsx_runtime_1.jsx)(Card_1.CardLabel, { type: active ? 'active' : undefined, children: (0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { children: t(`swap.tags.${route.tags[0].toLowerCase()}`) }) })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: token, step: !cardExpanded ? route.steps[0] : undefined }), !expanded ? ((0, jsx_runtime_1.jsx)(Card_1.CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) }), (0, jsx_runtime_1.jsx)(SwapRouteCardEssentials_1.SwapRouteCardEssentials, { route: route })] }));
+    return widgetVariant === 'refuel' || variant === 'cardless' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, { variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true, ...other, children: cardContent }));
 };
 exports.SwapRouteCard = SwapRouteCard;
-const SwapRouteCardEssentials = ({ route, dense }) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const executionTimeMinutes = Math.ceil(route.steps
-        .map((step) => step.estimate.executionDuration)
-        .reduce((duration, x) => duration + x, 0) / 60);
-    const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
-    const gasCosts = (0, utils_1.getGasCostsBreakdown)(route);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas) => ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 11, children: [gas.amount?.toFixed(6), " ", gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }, `${gas.token.address}${gas.token.symbol}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: (0, jsx_runtime_1.jsx)(EvStationOutlined_1.default, { fontSize: dense ? 'medium' : 'small' }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: (0, jsx_runtime_1.jsx)(AccessTime_1.default, { fontSize: dense ? 'medium' : 'small' }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('swap.estimatedTime', {
-                                value: executionTimeMinutes,
-                            }) })] }) }), !dense ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: (0, jsx_runtime_1.jsx)(LayersOutlined_1.default, { fontSize: dense ? 'medium' : 'small' }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: route.steps.length })] }) })) : null] }));
-};
-exports.SwapRouteCardEssentials = SwapRouteCardEssentials;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+export declare const IconTypography: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     align?: "center" | "left" | "right" | "inherit" | "justify" | undefined;
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
@@ -7,40 +7,8 @@ export declare const Label: import("@emotion/styled").StyledComponent<import("@m
     noWrap?: boolean | undefined;
     paragraph?: boolean | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)", string>> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"inherit" | import("@mui/material").TypographyVariant, import("@mui/material").TypographyPropsVariantOverrides> | undefined;
+    variantMapping?: Partial<Record<import("@mui/types").OverridableStringUnion<"inherit" | import("@mui/material").TypographyVariant, import("@mui/material").TypographyPropsVariantOverrides>, string>> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     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> & {
-    active?: boolean | undefined;
-}, {}, {}>;
-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" | "primary" | "secondary" | "info" | undefined;
-    disabled?: boolean | undefined;
-    disableFocusRipple?: boolean | undefined;
-    edge?: false | "end" | "start" | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    active?: boolean | 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>, {}, {}>;