@lifi/widget 1.32.8 → 2.0.0-alpha.0

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,36 @@ 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 === 'cross' ||
+            (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' || step.type === 'lifi' ? ((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 +115,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/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>, {}, {}>;

package/cjs/components/SwapRouteCard/SwapRouteCard.style.js

@@ -1,43 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButton = exports.Label = void 0;
+exports.IconTypography = void 0;
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
-const utils_1 = require("../../utils");
-exports.Label = (0, styles_1.styled)(material_1.Typography, {
-    shouldForwardProp: (prop) => prop !== 'active',
-})(({ theme, active }) => ({
-    backgroundColor: active ? theme.palette.secondary.main : 'transparent',
-    border: '1px solid',
-    borderColor: active
-        ? theme.palette.secondary.main
-        : theme.palette.mode === 'light'
-            ? theme.palette.grey[300]
-            : theme.palette.grey[800],
-    borderRadius: theme.shape.borderRadiusSecondary,
-    color: active
-        ? (0, utils_1.getContrastTextColor)(theme, theme.palette.secondary.main)
-        : theme.palette.text.secondary,
-    padding: theme.spacing(0.75),
-    fontSize: 12,
-    lineHeight: 1,
-    fontWeight: '600',
-    height: 24,
-    letterSpacing: '0.05rem',
-    textTransform: 'uppercase',
-    display: 'inline-flex',
-    userSelect: 'none',
+exports.IconTypography = (0, styles_1.styled)(material_1.Typography)(({ theme }) => ({
+    color: theme.palette.mode === 'light'
+        ? (0, styles_1.alpha)(theme.palette.common.black, 0.24)
+        : (0, styles_1.alpha)(theme.palette.common.white, 0.32),
+    lineHeight: 0,
+    marginRight: theme.spacing(0.5),
 }));
-exports.IconButton = (0, styles_1.styled)(material_1.IconButton, {
-    shouldForwardProp: (prop) => prop !== 'active',
-})(({ theme, active }) => {
-    const backgroundColor = theme.palette.mode === 'light'
-        ? theme.palette.common.black
-        : theme.palette.common.white;
-    return {
-        backgroundColor: (0, styles_1.alpha)(backgroundColor, 0.04),
-        '&:hover': {
-            backgroundColor: (0, styles_1.alpha)(backgroundColor, 0.08),
-        },
-    };
-});

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { SwapRouteCardEssentialsProps } from './types';
+export declare const SwapRouteCardEssentials: React.FC<SwapRouteCardEssentialsProps>;

package/cjs/components/SwapRouteCard/SwapRouteCardEssentials.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapRouteCardEssentials = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AccessTimeFilled_1 = require("@mui/icons-material/AccessTimeFilled");
+const EvStation_1 = require("@mui/icons-material/EvStation");
+const Layers_1 = require("@mui/icons-material/Layers");
+const MonetizationOn_1 = require("@mui/icons-material/MonetizationOn");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const SwapRouteCard_style_1 = require("./SwapRouteCard.style");
+const utils_1 = require("./utils");
+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);
+    const feeCosts = (0, utils_1.getFeeCostsBreakdown)(route, false);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: 'space-between', flex: 1, mt: 2, 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, index) => ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 11, children: [gas.amount?.toFixed(9), " ", gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }, `${gas.token.address}${index}`)))] }), 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)(SwapRouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(EvStation_1.default, { fontSize: "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: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.additionalProviderFee`), feeCosts.map((fee, index) => ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 11, children: [fee.amount?.toFixed(9), " ", fee.token.symbol, " (", t(`format.currency`, { value: fee.amountUSD }), ")"] }, `${fee.token.address}${index}`)))] }), 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)(SwapRouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(MonetizationOn_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, {
+                                value: feeCosts.reduce((sum, feeCost) => sum + feeCost.amountUSD, 0),
+                            }) })] }) }), (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)(SwapRouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(AccessTimeFilled_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('swap.estimatedTime', {
+                                value: executionTimeMinutes,
+                            }) })] }) }), (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)(SwapRouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(Layers_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: route.steps.length })] }) })] }));
+};
+exports.SwapRouteCardEssentials = SwapRouteCardEssentials;

package/cjs/components/SwapRouteCard/SwapRouteCardSkeleton.js

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

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

@@ -1,7 +1,7 @@
 import type { Route } from '@lifi/sdk';
 export interface SwapRouteCardProps {
     route: Route;
-    variant?: 'default' | 'stretched' | 'dense';
+    variant?: 'default' | 'cardless';
     active?: boolean;
     expanded?: boolean;
 }
@@ -10,5 +10,5 @@ export interface SwapRouteCardEssentialsProps {
     dense?: boolean;
 }
 export interface SwapRouteCardSkeletonProps {
-    variant?: 'default' | 'stretched' | 'dense';
+    variant?: 'default' | 'cardless';
 }

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

@@ -5,3 +5,8 @@ export declare const getGasCostsBreakdown: (route: Route) => {
     amountUSD: number;
     token: Token;
 }[];
+export declare const getFeeCostsBreakdown: (route: Route, included?: boolean) => {
+    amount: Big;
+    amountUSD: number;
+    token: Token;
+}[];

package/cjs/components/SwapRouteCard/utils.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getGasCostsBreakdown = void 0;
+exports.getFeeCostsBreakdown = exports.getGasCostsBreakdown = void 0;
 const big_js_1 = require("big.js");
 const getGasCostsBreakdown = (route) => {
     return Object.values(route.steps.reduce((groupedGasCosts, step) => {
-        if (step.estimate.gasCosts) {
+        if (step.estimate.gasCosts?.length) {
             const { token } = step.estimate.gasCosts[0];
             const gasCostAmount = step.estimate.gasCosts
                 .reduce((amount, gasCost) => amount.plus((0, big_js_1.default)(gasCost.amount || 0)), (0, big_js_1.default)(0))
@@ -28,3 +28,33 @@ const getGasCostsBreakdown = (route) => {
     }, {}));
 };
 exports.getGasCostsBreakdown = getGasCostsBreakdown;
+const getFeeCostsBreakdown = (route, included) => {
+    return Object.values(route.steps.reduce((groupedFeeCosts, step) => {
+        let feeCosts = step.estimate.feeCosts;
+        if (typeof included === 'boolean') {
+            feeCosts = feeCosts?.filter((feeCost) => feeCost.included === included);
+        }
+        if (feeCosts?.length) {
+            const { token } = feeCosts[0];
+            const feeCostAmount = feeCosts
+                .reduce((amount, feeCost) => amount.plus((0, big_js_1.default)(feeCost.amount || 0)), (0, big_js_1.default)(0))
+                .div(10 ** token.decimals);
+            const feeCostAmountUSD = feeCosts.reduce((amount, feeCost) => amount + parseFloat(feeCost.amountUSD || '0'), 0);
+            const groupedFeeCost = groupedFeeCosts[token.chainId];
+            const amount = groupedFeeCost
+                ? groupedFeeCost.amount.plus(feeCostAmount)
+                : feeCostAmount;
+            const amountUSD = groupedFeeCost
+                ? groupedFeeCost.amountUSD + feeCostAmountUSD
+                : feeCostAmountUSD;
+            groupedFeeCosts[token.chainId] = {
+                amount,
+                amountUSD,
+                token,
+            };
+            return groupedFeeCosts;
+        }
+        return groupedFeeCosts;
+    }, {}));
+};
+exports.getFeeCostsBreakdown = getFeeCostsBreakdown;