@lifi/widget 0.0.0-preview-6cc63bac

package/dist/esm/components/RouteCard/RouteCard.js

@@ -0,0 +1,86 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { Card as Card$1 } from "../Card/Card.js";
+import { getAccumulatedFeeCostsBreakdown } from "../../utils/fees.js";
+import { CardLabel, CardLabelTypography } from "../Card/CardLabel.js";
+import { getMatchingLabels } from "./getMatchingLabels.js";
+import { RouteToken } from "./RouteToken.js";
+import { useMemo } from "react";
+import { Box, Tooltip } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/RouteCard/RouteCard.tsx
+const RouteCard = ({ route, active, variant = "default", expanded: defaultExpanded, ...other }) => {
+	const { t } = useTranslation();
+	const { mode, modeOptions, routeLabels, hiddenUI } = useWidgetConfig();
+	const token = mode === "custom" && modeOptions?.custom?.type !== "deposit" ? {
+		...route.fromToken,
+		amount: BigInt(route.fromAmount)
+	} : {
+		...route.toToken,
+		amount: BigInt(route.toAmount)
+	};
+	const impactToken = mode !== "custom" && !hiddenUI?.routeCardPriceImpact ? {
+		...route.fromToken,
+		amount: BigInt(route.fromAmount)
+	} : void 0;
+	const [tags, customLabels] = useMemo(() => {
+		const mainTag = route.tags?.find((tag) => tag === "CHEAPEST" || tag === "FASTEST");
+		const tags = mainTag ? [mainTag] : [];
+		const { combinedFeesUSD } = getAccumulatedFeeCostsBreakdown(route);
+		if (!combinedFeesUSD) tags.push("gasless");
+		if (route.steps.length > 1) tags.push("multistep");
+		return [tags, getMatchingLabels(route, routeLabels)];
+	}, [
+		route.tags,
+		route,
+		routeLabels
+	]);
+	const cardContent = /* @__PURE__ */ jsxs(Box, {
+		sx: { flex: 1 },
+		children: [mode !== "refuel" && (tags.length || customLabels.length) ? /* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				alignItems: "center",
+				mb: 2,
+				gap: 1,
+				flexWrap: "wrap"
+			},
+			children: [tags?.map((tag) => {
+				const formattedTag = tag.toLowerCase();
+				const tooltipKey = `tooltip.${formattedTag}`;
+				const tooltipText = t(tooltipKey);
+				const hasTooltip = tooltipText !== tooltipKey;
+				const cardLabel = /* @__PURE__ */ jsx(CardLabel, {
+					variant: tag === "gasless" ? "success" : active ? "secondary" : void 0,
+					children: /* @__PURE__ */ jsx(CardLabelTypography, { children: t(`main.tags.${formattedTag}`) })
+				}, tag);
+				return hasTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+					title: tooltipText,
+					arrow: true,
+					placement: "top",
+					children: cardLabel
+				}, tag) : cardLabel;
+			}), customLabels.map((label, index) => /* @__PURE__ */ jsx(CardLabel, {
+				sx: label.sx,
+				children: /* @__PURE__ */ jsx(CardLabelTypography, { children: label.text })
+			}, index))]
+		}) : null, /* @__PURE__ */ jsx(RouteToken, {
+			route,
+			token,
+			impactToken,
+			defaultExpanded,
+			showEssentials: true
+		})]
+	});
+	return mode === "refuel" || variant === "cardless" ? cardContent : /* @__PURE__ */ jsx(Card$1, {
+		type: active ? "selected" : "default",
+		selectionColor: "secondary",
+		indented: true,
+		...other,
+		children: cardContent
+	});
+};
+//#endregion
+export { RouteCard };
+
+//# sourceMappingURL=RouteCard.js.map

package/dist/esm/components/RouteCard/RouteCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteCard.js","names":["Card"],"sources":["../../../../src/components/RouteCard/RouteCard.tsx"],"sourcesContent":["import type { TokenAmount } from '@lifi/sdk'\nimport { Box, Tooltip } from '@mui/material'\nimport { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { RouteLabel } from '../../types/widget.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'\nimport { getMatchingLabels } from './getMatchingLabels.js'\nimport { RouteToken } from './RouteToken.js'\nimport type { RouteCardProps } from './types.js'\n\nexport const RouteCard: React.FC<\n  RouteCardProps & Omit<CardProps, 'variant'>\n> = ({\n  route,\n  active,\n  variant = 'default',\n  expanded: defaultExpanded,\n  ...other\n}) => {\n  const { t } = useTranslation()\n  const { mode, modeOptions, routeLabels, hiddenUI } = useWidgetConfig()\n\n  const token: TokenAmount =\n    mode === 'custom' && modeOptions?.custom?.type !== 'deposit'\n      ? { ...route.fromToken, amount: BigInt(route.fromAmount) }\n      : { ...route.toToken, amount: BigInt(route.toAmount) }\n  const impactToken: TokenAmount | undefined =\n    mode !== 'custom' && !hiddenUI?.routeCardPriceImpact\n      ? { ...route.fromToken, amount: BigInt(route.fromAmount) }\n      : undefined\n\n  const [tags, customLabels]: [string[], RouteLabel[]] = useMemo(() => {\n    const mainTag = route.tags?.find(\n      (tag) => tag === 'CHEAPEST' || tag === 'FASTEST'\n    )\n    const tags: string[] = mainTag ? [mainTag] : []\n    const { combinedFeesUSD } = getAccumulatedFeeCostsBreakdown(route)\n    if (!combinedFeesUSD) {\n      tags.push('gasless')\n    }\n    if (route.steps.length > 1) {\n      tags.push('multistep')\n    }\n    const customLabels = getMatchingLabels(route, routeLabels)\n    return [tags, customLabels]\n  }, [route.tags, route, routeLabels])\n\n  const cardContent = (\n    <Box\n      sx={{\n        flex: 1,\n      }}\n    >\n      {mode !== 'refuel' && (tags.length || customLabels.length) ? (\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            mb: 2,\n            gap: 1,\n            flexWrap: 'wrap',\n          }}\n        >\n          {tags?.map((tag) => {\n            const formattedTag = tag.toLowerCase()\n            const tooltipKey = `tooltip.${formattedTag}` as any\n            const tooltipText = t(tooltipKey)\n            const hasTooltip = tooltipText !== tooltipKey\n\n            const cardLabel = (\n              <CardLabel\n                variant={\n                  tag === 'gasless'\n                    ? 'success'\n                    : active\n                      ? 'secondary'\n                      : undefined\n                }\n                key={tag}\n              >\n                <CardLabelTypography>\n                  {t(`main.tags.${formattedTag}` as any)}\n                </CardLabelTypography>\n              </CardLabel>\n            )\n\n            return hasTooltip ? (\n              <Tooltip key={tag} title={tooltipText} arrow placement=\"top\">\n                {cardLabel}\n              </Tooltip>\n            ) : (\n              cardLabel\n            )\n          })}\n          {customLabels.map((label, index) => (\n            <CardLabel key={index} sx={label.sx}>\n              <CardLabelTypography>{label.text}</CardLabelTypography>\n            </CardLabel>\n          ))}\n        </Box>\n      ) : null}\n      <RouteToken\n        route={route}\n        token={token}\n        impactToken={impactToken}\n        defaultExpanded={defaultExpanded}\n        showEssentials\n      />\n    </Box>\n  )\n\n  return mode === 'refuel' || variant === 'cardless' ? (\n    cardContent\n  ) : (\n    <Card\n      type={active ? 'selected' : 'default'}\n      selectionColor=\"secondary\"\n      indented\n      {...other}\n    >\n      {cardContent}\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,aAER,EACH,OACA,QACA,UAAU,WACV,UAAU,iBACV,GAAG,YACC;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,MAAM,aAAa,aAAa,aAAa,gBAAgB;CAErE,MAAM,QACJ,SAAS,YAAY,aAAa,QAAQ,SAAS,YAC/C;EAAE,GAAG,MAAM;EAAW,QAAQ,OAAO,MAAM,UAAU;CAAE,IACvD;EAAE,GAAG,MAAM;EAAS,QAAQ,OAAO,MAAM,QAAQ;CAAE;CACzD,MAAM,cACJ,SAAS,YAAY,CAAC,UAAU,uBAC5B;EAAE,GAAG,MAAM;EAAW,QAAQ,OAAO,MAAM,UAAU;CAAE,IACvD,KAAA;CAEN,MAAM,CAAC,MAAM,gBAA0C,cAAc;EACnE,MAAM,UAAU,MAAM,MAAM,MACzB,QAAQ,QAAQ,cAAc,QAAQ,SACzC;EACA,MAAM,OAAiB,UAAU,CAAC,OAAO,IAAI,CAAC;EAC9C,MAAM,EAAE,oBAAoB,gCAAgC,KAAK;EACjE,IAAI,CAAC,iBACH,KAAK,KAAK,SAAS;EAErB,IAAI,MAAM,MAAM,SAAS,GACvB,KAAK,KAAK,WAAW;EAGvB,OAAO,CAAC,MADa,kBAAkB,OAAO,WACrB,CAAC;CAC5B,GAAG;EAAC,MAAM;EAAM;EAAO;CAAW,CAAC;CAEnC,MAAM,cACJ,qBAAC,KAAD;EACE,IAAI,EACF,MAAM,EACR;YAHF,CAKG,SAAS,aAAa,KAAK,UAAU,aAAa,UACjD,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACZ,IAAI;IACJ,KAAK;IACL,UAAU;GACZ;aAPF,CASG,MAAM,KAAK,QAAQ;IAClB,MAAM,eAAe,IAAI,YAAY;IACrC,MAAM,aAAa,WAAW;IAC9B,MAAM,cAAc,EAAE,UAAU;IAChC,MAAM,aAAa,gBAAgB;IAEnC,MAAM,YACJ,oBAAC,WAAD;KACE,SACE,QAAQ,YACJ,YACA,SACE,cACA,KAAA;eAIR,oBAAC,qBAAD,EAAA,UACG,EAAE,aAAa,cAAqB,EAClB,CAAA;IACZ,GALJ,GAKI;IAGb,OAAO,aACL,oBAAC,SAAD;KAAmB,OAAO;KAAa,OAAA;KAAM,WAAU;eACpD;IACM,GAFK,GAEL,IAET;GAEJ,CAAC,GACA,aAAa,KAAK,OAAO,UACxB,oBAAC,WAAD;IAAuB,IAAI,MAAM;cAC/B,oBAAC,qBAAD,EAAA,UAAsB,MAAM,KAA0B,CAAA;GAC7C,GAFK,KAEL,CACZ,CACE;OACH,MACJ,oBAAC,YAAD;GACS;GACA;GACM;GACI;GACjB,gBAAA;EACD,CAAA,CACE;;CAGP,OAAO,SAAS,YAAY,YAAY,aACtC,cAEA,oBAACA,QAAD;EACE,MAAM,SAAS,aAAa;EAC5B,gBAAe;EACf,UAAA;EACA,GAAI;YAEH;CACG,CAAA;AAEV"}

package/dist/esm/components/RouteCard/RouteCardEssentials.js

@@ -0,0 +1,92 @@
+import { formatDuration } from "../../utils/format.js";
+import { getAccumulatedFeeCostsBreakdown } from "../../utils/fees.js";
+import { FeeBreakdownTooltip } from "../FeeBreakdownTooltip.js";
+import { IconTypography } from "../IconTypography.js";
+import { TokenRate } from "../TokenRate/TokenRate.js";
+import { Box, Tooltip, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import AccessTimeFilled from "@mui/icons-material/AccessTimeFilled";
+import LocalGasStationRounded from "@mui/icons-material/LocalGasStationRounded";
+//#region src/components/RouteCard/RouteCardEssentials.tsx
+const RouteCardEssentials = ({ route }) => {
+	const { t, i18n } = useTranslation();
+	const executionTimeSeconds = Math.floor(route.steps.reduce((duration, step) => duration + step.estimate.executionDuration, 0));
+	const { gasCosts, feeCosts, combinedFeesUSD } = getAccumulatedFeeCostsBreakdown(route);
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			flex: 1,
+			mt: 2
+		},
+		children: [/* @__PURE__ */ jsx(Tooltip, {
+			title: t("tooltip.exchangeRate"),
+			children: /* @__PURE__ */ jsx(TokenRate, { route })
+		}), /* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				alignItems: "center"
+			},
+			children: [/* @__PURE__ */ jsx(FeeBreakdownTooltip, {
+				gasCosts,
+				feeCosts,
+				gasless: !combinedFeesUSD,
+				children: /* @__PURE__ */ jsxs(Box, {
+					sx: {
+						display: "flex",
+						mr: 1.5,
+						alignItems: "center"
+					},
+					children: [/* @__PURE__ */ jsx(IconTypography, {
+						component: "span",
+						sx: {
+							mr: .5,
+							fontSize: 16
+						},
+						children: /* @__PURE__ */ jsx(LocalGasStationRounded, { fontSize: "inherit" })
+					}), /* @__PURE__ */ jsx(Typography, {
+						"data-value": combinedFeesUSD,
+						sx: {
+							fontSize: 14,
+							color: "text.primary",
+							fontWeight: 600,
+							lineHeight: 1
+						},
+						children: !combinedFeesUSD ? t("main.fees.free") : t("format.currency", { value: combinedFeesUSD })
+					})]
+				})
+			}), /* @__PURE__ */ jsx(Tooltip, {
+				title: t("tooltip.estimatedTime"),
+				sx: { cursor: "help" },
+				children: /* @__PURE__ */ jsxs(Box, {
+					sx: {
+						display: "flex",
+						alignItems: "center"
+					},
+					children: [/* @__PURE__ */ jsx(IconTypography, {
+						component: "span",
+						sx: {
+							mr: .5,
+							fontSize: 16
+						},
+						children: /* @__PURE__ */ jsx(AccessTimeFilled, { fontSize: "inherit" })
+					}), /* @__PURE__ */ jsx(Typography, {
+						sx: {
+							fontSize: 14,
+							color: "text.primary",
+							fontWeight: 600,
+							lineHeight: 1
+						},
+						children: formatDuration(executionTimeSeconds, i18n.language)
+					})]
+				})
+			})]
+		})]
+	});
+};
+//#endregion
+export { RouteCardEssentials };
+
+//# sourceMappingURL=RouteCardEssentials.js.map

package/dist/esm/components/RouteCard/RouteCardEssentials.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteCardEssentials.js","names":[],"sources":["../../../../src/components/RouteCard/RouteCardEssentials.tsx"],"sourcesContent":["import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'\nimport LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'\nimport { Box, Tooltip, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { formatDuration } from '../../utils/format.js'\nimport { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js'\nimport { IconTypography } from '../IconTypography.js'\nimport { TokenRate } from '../TokenRate/TokenRate.js'\nimport type { RouteCardEssentialsProps } from './types.js'\n\nexport const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({\n  route,\n}) => {\n  const { t, i18n } = useTranslation()\n  const executionTimeSeconds = Math.floor(\n    route.steps.reduce(\n      (duration, step) => duration + step.estimate.executionDuration,\n      0\n    )\n  )\n\n  const { gasCosts, feeCosts, combinedFeesUSD } =\n    getAccumulatedFeeCostsBreakdown(route)\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        flex: 1,\n        mt: 2,\n      }}\n    >\n      <Tooltip title={t('tooltip.exchangeRate')}>\n        <TokenRate route={route} />\n      </Tooltip>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n        }}\n      >\n        <FeeBreakdownTooltip\n          gasCosts={gasCosts}\n          feeCosts={feeCosts}\n          gasless={!combinedFeesUSD}\n        >\n          <Box\n            sx={{\n              display: 'flex',\n              mr: 1.5,\n              alignItems: 'center',\n            }}\n          >\n            <IconTypography component=\"span\" sx={{ mr: 0.5, fontSize: 16 }}>\n              <LocalGasStationRounded fontSize=\"inherit\" />\n            </IconTypography>\n            <Typography\n              data-value={combinedFeesUSD}\n              sx={{\n                fontSize: 14,\n                color: 'text.primary',\n                fontWeight: 600,\n                lineHeight: 1,\n              }}\n            >\n              {!combinedFeesUSD\n                ? t('main.fees.free')\n                : t('format.currency', {\n                    value: combinedFeesUSD,\n                  })}\n            </Typography>\n          </Box>\n        </FeeBreakdownTooltip>\n        <Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n            }}\n          >\n            <IconTypography component=\"span\" sx={{ mr: 0.5, fontSize: 16 }}>\n              <AccessTimeFilled fontSize=\"inherit\" />\n            </IconTypography>\n            <Typography\n              sx={{\n                fontSize: 14,\n                color: 'text.primary',\n                fontWeight: 600,\n                lineHeight: 1,\n              }}\n            >\n              {formatDuration(executionTimeSeconds, i18n.language)}\n            </Typography>\n          </Box>\n        </Tooltip>\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,uBAA2D,EACtE,YACI;CACJ,MAAM,EAAE,GAAG,SAAS,eAAe;CACnC,MAAM,uBAAuB,KAAK,MAChC,MAAM,MAAM,QACT,UAAU,SAAS,WAAW,KAAK,SAAS,mBAC7C,CACF,CACF;CAEA,MAAM,EAAE,UAAU,UAAU,oBAC1B,gCAAgC,KAAK;CACvC,OACE,qBAAC,KAAD;EACE,IAAI;GACF,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,MAAM;GACN,IAAI;EACN;YAPF,CASE,oBAAC,SAAD;GAAS,OAAO,EAAE,sBAAsB;aACtC,oBAAC,WAAD,EAAkB,MAAQ,CAAA;EACnB,CAAA,GACT,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;GACd;aAJF,CAME,oBAAC,qBAAD;IACY;IACA;IACV,SAAS,CAAC;cAEV,qBAAC,KAAD;KACE,IAAI;MACF,SAAS;MACT,IAAI;MACJ,YAAY;KACd;eALF,CAOE,oBAAC,gBAAD;MAAgB,WAAU;MAAO,IAAI;OAAE,IAAI;OAAK,UAAU;MAAG;gBAC3D,oBAAC,wBAAD,EAAwB,UAAS,UAAW,CAAA;KAC9B,CAAA,GAChB,oBAAC,YAAD;MACE,cAAY;MACZ,IAAI;OACF,UAAU;OACV,OAAO;OACP,YAAY;OACZ,YAAY;MACd;gBAEC,CAAC,kBACE,EAAE,gBAAgB,IAClB,EAAE,mBAAmB,EACnB,OAAO,gBACT,CAAC;KACK,CAAA,CACT;;GACc,CAAA,GACrB,oBAAC,SAAD;IAAS,OAAO,EAAE,uBAAuB;IAAG,IAAI,EAAE,QAAQ,OAAO;cAC/D,qBAAC,KAAD;KACE,IAAI;MACF,SAAS;MACT,YAAY;KACd;eAJF,CAME,oBAAC,gBAAD;MAAgB,WAAU;MAAO,IAAI;OAAE,IAAI;OAAK,UAAU;MAAG;gBAC3D,oBAAC,kBAAD,EAAkB,UAAS,UAAW,CAAA;KACxB,CAAA,GAChB,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;OACP,YAAY;OACZ,YAAY;MACd;gBAEC,eAAe,sBAAsB,KAAK,QAAQ;KACzC,CAAA,CACT;;GACE,CAAA,CACN;IACF;;AAET"}

package/dist/esm/components/RouteCard/RouteCardSkeleton.js

@@ -0,0 +1,53 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { Card as Card$1 } from "../Card/Card.js";
+import { TokenSkeleton } from "../Token/Token.js";
+import { Box, Skeleton } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/RouteCard/RouteCardSkeleton.tsx
+const RouteCardSkeleton = ({ variant, ...other }) => {
+	const { mode } = useWidgetConfig();
+	const cardContent = /* @__PURE__ */ jsxs(Box, {
+		sx: { flex: 1 },
+		children: [
+			mode !== "refuel" && mode !== "custom" ? /* @__PURE__ */ jsx(Box, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					mb: 2
+				},
+				children: /* @__PURE__ */ jsx(Skeleton, {
+					variant: "rectangular",
+					width: 112,
+					height: 24,
+					sx: (theme) => ({ borderRadius: theme.vars.shape.borderRadius })
+				})
+			}) : null,
+			/* @__PURE__ */ jsx(TokenSkeleton, {}),
+			/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					mt: 2,
+					display: "flex",
+					justifyContent: "space-between"
+				},
+				children: [/* @__PURE__ */ jsx(Skeleton, {
+					variant: "text",
+					width: 64,
+					height: 20
+				}), /* @__PURE__ */ jsx(Skeleton, {
+					variant: "text",
+					width: 56,
+					height: 20
+				})]
+			})
+		]
+	});
+	return mode === "refuel" || variant === "cardless" ? cardContent : /* @__PURE__ */ jsx(Card$1, {
+		indented: true,
+		...other,
+		children: cardContent
+	});
+};
+//#endregion
+export { RouteCardSkeleton };
+
+//# sourceMappingURL=RouteCardSkeleton.js.map

package/dist/esm/components/RouteCard/RouteCardSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteCardSkeleton.js","names":["Card"],"sources":["../../../../src/components/RouteCard/RouteCardSkeleton.tsx"],"sourcesContent":["import { Box, Skeleton } from '@mui/material'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { TokenSkeleton } from '../Token/Token.js'\nimport type { RouteCardSkeletonProps } from './types.js'\n\nexport const RouteCardSkeleton: React.FC<\n  RouteCardSkeletonProps & Omit<CardProps, 'variant'>\n> = ({ variant, ...other }) => {\n  const { mode } = useWidgetConfig()\n\n  const cardContent = (\n    <Box\n      sx={{\n        flex: 1,\n      }}\n    >\n      {mode !== 'refuel' && mode !== 'custom' ? (\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            mb: 2,\n          }}\n        >\n          <Skeleton\n            variant=\"rectangular\"\n            width={112}\n            height={24}\n            sx={(theme) => ({\n              borderRadius: theme.vars.shape.borderRadius,\n            })}\n          />\n        </Box>\n      ) : null}\n      <TokenSkeleton />\n      <Box\n        sx={{\n          mt: 2,\n          display: 'flex',\n          justifyContent: 'space-between',\n        }}\n      >\n        <Skeleton variant=\"text\" width={64} height={20} />\n        <Skeleton variant=\"text\" width={56} height={20} />\n      </Box>\n    </Box>\n  )\n\n  return mode === 'refuel' || variant === 'cardless' ? (\n    cardContent\n  ) : (\n    <Card indented {...other}>\n      {cardContent}\n    </Card>\n  )\n}\n"],"mappings":";;;;;;AAOA,MAAa,qBAER,EAAE,SAAS,GAAG,YAAY;CAC7B,MAAM,EAAE,SAAS,gBAAgB;CAEjC,MAAM,cACJ,qBAAC,KAAD;EACE,IAAI,EACF,MAAM,EACR;YAHF;GAKG,SAAS,YAAY,SAAS,WAC7B,oBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;KACZ,IAAI;IACN;cAEA,oBAAC,UAAD;KACE,SAAQ;KACR,OAAO;KACP,QAAQ;KACR,KAAK,WAAW,EACd,cAAc,MAAM,KAAK,MAAM,aACjC;IACD,CAAA;GACE,CAAA,IACH;GACJ,oBAAC,eAAD,CAAgB,CAAA;GAChB,qBAAC,KAAD;IACE,IAAI;KACF,IAAI;KACJ,SAAS;KACT,gBAAgB;IAClB;cALF,CAOE,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA,GACjD,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA,CAC9C;;EACF;;CAGP,OAAO,SAAS,YAAY,YAAY,aACtC,cAEA,oBAACA,QAAD;EAAM,UAAA;EAAS,GAAI;YAChB;CACG,CAAA;AAEV"}

package/dist/esm/components/RouteCard/RouteDetails.js

@@ -0,0 +1,100 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { formatDuration, formatTokenAmount, formatTokenPrice } from "../../utils/format.js";
+import { isRouteDone } from "../../stores/routes/utils.js";
+import { getAccumulatedFeeCostsBreakdown } from "../../utils/fees.js";
+import { getPriceImpact } from "../../utils/getPriceImpact.js";
+import { FeeBreakdownTooltip } from "../FeeBreakdownTooltip.js";
+import { useTokenRateText } from "../../hooks/useTokenRateText.js";
+import { StepActions } from "../Step/StepActions.js";
+import { DetailInfoIcon, DetailLabel, DetailLabelContainer, DetailRow, DetailValue } from "./RouteDetails.style.js";
+import { Box, Tooltip } from "@mui/material";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useEthereumContext } from "@lifi/widget-provider";
+//#region src/components/RouteCard/RouteDetails.tsx
+const RouteDetails = ({ route }) => {
+	const { t, i18n } = useTranslation();
+	const { rateText, toggleRate } = useTokenRateText(route);
+	const { feeConfig } = useWidgetConfig();
+	const { isGaslessStep } = useEthereumContext();
+	const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
+	const priceImpact = getPriceImpact({
+		fromAmount: BigInt(route.fromAmount),
+		toAmount: BigInt(route.toAmount),
+		fromToken: route.fromToken,
+		toToken: route.toToken
+	});
+	let feeAmountUSD = 0;
+	let feePercentage = 0;
+	const feeCollectionStep = route.steps[0].includedSteps.find((includedStep) => includedStep.tool === "feeCollection");
+	if (feeCollectionStep) {
+		feeAmountUSD = formatTokenPrice(BigInt(feeCollectionStep.estimate.fromAmount) - BigInt(feeCollectionStep.estimate.toAmount), feeCollectionStep.action.fromToken.priceUSD, feeCollectionStep.action.fromToken.decimals);
+		feePercentage = feeCollectionStep.estimate.feeCosts?.reduce((percentage, feeCost) => percentage + Number.parseFloat(feeCost.percentage || "0"), 0) ?? 0;
+	}
+	const executionTimeSeconds = Math.floor(route.steps.reduce((duration, step) => duration + step.estimate.executionDuration, 0));
+	const hasGaslessSupport = route.steps.every((step) => isGaslessStep?.(step));
+	const showIntegratorFeeCollectionDetails = (feeAmountUSD || Number.isFinite(feeConfig?.fee)) && !hasGaslessSupport;
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 1,
+			pt: 1.5
+		},
+		children: [
+			/* @__PURE__ */ jsx(StepActions, { route }),
+			/* @__PURE__ */ jsxs(DetailRow, { children: [/* @__PURE__ */ jsxs(DetailLabelContainer, { children: [/* @__PURE__ */ jsx(DetailLabel, { children: t("main.fees.network") }), /* @__PURE__ */ jsx(FeeBreakdownTooltip, {
+				gasCosts,
+				gasless: hasGaslessSupport,
+				children: /* @__PURE__ */ jsx(DetailInfoIcon, {})
+			})] }), /* @__PURE__ */ jsx(DetailValue, { children: !gasCostUSD ? t("main.fees.free") : t("format.currency", { value: gasCostUSD }) })] }),
+			feeCosts.length ? /* @__PURE__ */ jsxs(DetailRow, { children: [/* @__PURE__ */ jsxs(DetailLabelContainer, { children: [/* @__PURE__ */ jsx(DetailLabel, { children: t("main.fees.provider") }), /* @__PURE__ */ jsx(FeeBreakdownTooltip, {
+				feeCosts,
+				children: /* @__PURE__ */ jsx(DetailInfoIcon, {})
+			})] }), /* @__PURE__ */ jsx(DetailValue, { children: t("format.currency", { value: feeCostUSD }) })] }) : null,
+			showIntegratorFeeCollectionDetails ? /* @__PURE__ */ jsxs(DetailRow, { children: [/* @__PURE__ */ jsxs(DetailLabelContainer, { children: [/* @__PURE__ */ jsxs(DetailLabel, { children: [feeConfig?.name || t("main.fees.defaultIntegrator"), feeConfig?.showFeePercentage && /* @__PURE__ */ jsxs(Fragment, { children: [
+				" (",
+				t("format.percent", { value: feePercentage }),
+				")"
+			] })] }), feeConfig?.showFeeTooltip && (feeConfig?.name || feeConfig?.feeTooltipComponent) ? /* @__PURE__ */ jsx(Tooltip, {
+				title: feeConfig?.feeTooltipComponent || t("tooltip.feeCollection", { tool: feeConfig.name }),
+				children: /* @__PURE__ */ jsx(DetailInfoIcon, {})
+			}) : null] }), /* @__PURE__ */ jsx(DetailValue, { children: t("format.currency", { value: feeAmountUSD }) })] }) : null,
+			/* @__PURE__ */ jsxs(DetailRow, { children: [/* @__PURE__ */ jsxs(DetailLabelContainer, { children: [/* @__PURE__ */ jsx(DetailLabel, { children: t("main.priceImpact") }), /* @__PURE__ */ jsx(Tooltip, {
+				title: t("tooltip.priceImpact"),
+				children: /* @__PURE__ */ jsx(DetailInfoIcon, {})
+			})] }), /* @__PURE__ */ jsx(DetailValue, { children: t("format.percent", {
+				value: priceImpact,
+				usePlusSign: true
+			}) })] }),
+			!isRouteDone(route) ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(DetailRow, { children: [/* @__PURE__ */ jsxs(DetailLabelContainer, { children: [/* @__PURE__ */ jsx(DetailLabel, { children: t("main.maxSlippage") }), /* @__PURE__ */ jsx(Tooltip, {
+				title: t("tooltip.slippage"),
+				children: /* @__PURE__ */ jsx(DetailInfoIcon, {})
+			})] }), /* @__PURE__ */ jsx(DetailValue, { children: route.steps[0].action.slippage ? t("format.percent", { value: route.steps[0].action.slippage }) : t("button.auto") })] }), /* @__PURE__ */ jsxs(DetailRow, { children: [/* @__PURE__ */ jsxs(DetailLabelContainer, { children: [/* @__PURE__ */ jsx(DetailLabel, { children: t("main.minReceived") }), /* @__PURE__ */ jsx(Tooltip, {
+				title: t("tooltip.minReceived"),
+				children: /* @__PURE__ */ jsx(DetailInfoIcon, {})
+			})] }), /* @__PURE__ */ jsxs(DetailValue, { children: [
+				t("format.tokenAmount", { value: formatTokenAmount(BigInt(route.toAmountMin), route.toToken.decimals) }),
+				" ",
+				route.toToken.symbol
+			] })] })] }) : null,
+			/* @__PURE__ */ jsxs(DetailRow, { children: [/* @__PURE__ */ jsxs(DetailLabelContainer, { children: [/* @__PURE__ */ jsx(DetailLabel, { children: t("main.exchangeRate") }), /* @__PURE__ */ jsx(Tooltip, {
+				title: t("tooltip.exchangeRate"),
+				children: /* @__PURE__ */ jsx(DetailInfoIcon, {})
+			})] }), /* @__PURE__ */ jsx(DetailValue, {
+				onClick: toggleRate,
+				role: "button",
+				sx: { cursor: "pointer" },
+				children: rateText
+			})] }),
+			/* @__PURE__ */ jsxs(DetailRow, { children: [/* @__PURE__ */ jsxs(DetailLabelContainer, { children: [/* @__PURE__ */ jsx(DetailLabel, { children: t("main.estimatedTime") }), /* @__PURE__ */ jsx(Tooltip, {
+				title: t("tooltip.estimatedTime"),
+				children: /* @__PURE__ */ jsx(DetailInfoIcon, {})
+			})] }), /* @__PURE__ */ jsx(DetailValue, { children: formatDuration(executionTimeSeconds, i18n.language) })] })
+		]
+	});
+};
+//#endregion
+export { RouteDetails };
+
+//# sourceMappingURL=RouteDetails.js.map

package/dist/esm/components/RouteCard/RouteDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteDetails.js","names":[],"sources":["../../../../src/components/RouteCard/RouteDetails.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport { Box, Tooltip } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTokenRateText } from '../../hooks/useTokenRateText.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { isRouteDone } from '../../stores/routes/utils.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport {\n  formatDuration,\n  formatTokenAmount,\n  formatTokenPrice,\n} from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js'\nimport { StepActions } from '../Step/StepActions.js'\nimport {\n  DetailInfoIcon,\n  DetailLabel,\n  DetailLabelContainer,\n  DetailRow,\n  DetailValue,\n} from './RouteDetails.style.js'\n\ninterface RouteDetailsProps {\n  route: RouteExtended\n}\n\nexport const RouteDetails = ({ route }: RouteDetailsProps): JSX.Element => {\n  const { t, i18n } = useTranslation()\n  const { rateText, toggleRate } = useTokenRateText(route)\n  const { feeConfig } = useWidgetConfig()\n  const { isGaslessStep } = useEthereumContext()\n\n  const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } =\n    getAccumulatedFeeCostsBreakdown(route)\n\n  const priceImpact = getPriceImpact({\n    fromAmount: BigInt(route.fromAmount),\n    toAmount: BigInt(route.toAmount),\n    fromToken: route.fromToken,\n    toToken: route.toToken,\n  })\n\n  let feeAmountUSD = 0\n  let feePercentage = 0\n\n  const feeCollectionStep = route.steps[0].includedSteps.find(\n    (includedStep) => includedStep.tool === 'feeCollection'\n  )\n\n  if (feeCollectionStep) {\n    const estimatedFromAmount =\n      BigInt(feeCollectionStep.estimate.fromAmount) -\n      BigInt(feeCollectionStep.estimate.toAmount)\n\n    feeAmountUSD = formatTokenPrice(\n      estimatedFromAmount,\n      feeCollectionStep.action.fromToken.priceUSD,\n      feeCollectionStep.action.fromToken.decimals\n    )\n\n    feePercentage =\n      feeCollectionStep.estimate.feeCosts?.reduce(\n        (percentage, feeCost) =>\n          percentage + Number.parseFloat(feeCost.percentage || '0'),\n        0\n      ) ?? 0\n  }\n\n  const executionTimeSeconds = Math.floor(\n    route.steps.reduce(\n      (duration, step) => duration + step.estimate.executionDuration,\n      0\n    )\n  )\n\n  const hasGaslessSupport = route.steps.every((step) => isGaslessStep?.(step))\n\n  const showIntegratorFeeCollectionDetails =\n    (feeAmountUSD || Number.isFinite(feeConfig?.fee)) && !hasGaslessSupport\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, pt: 1.5 }}>\n      <StepActions route={route} />\n      <DetailRow>\n        <DetailLabelContainer>\n          <DetailLabel>{t('main.fees.network')}</DetailLabel>\n          <FeeBreakdownTooltip gasCosts={gasCosts} gasless={hasGaslessSupport}>\n            <DetailInfoIcon />\n          </FeeBreakdownTooltip>\n        </DetailLabelContainer>\n        <DetailValue>\n          {!gasCostUSD\n            ? t('main.fees.free')\n            : t('format.currency', { value: gasCostUSD })}\n        </DetailValue>\n      </DetailRow>\n      {feeCosts.length ? (\n        <DetailRow>\n          <DetailLabelContainer>\n            <DetailLabel>{t('main.fees.provider')}</DetailLabel>\n            <FeeBreakdownTooltip feeCosts={feeCosts}>\n              <DetailInfoIcon />\n            </FeeBreakdownTooltip>\n          </DetailLabelContainer>\n          <DetailValue>\n            {t('format.currency', { value: feeCostUSD })}\n          </DetailValue>\n        </DetailRow>\n      ) : null}\n      {showIntegratorFeeCollectionDetails ? (\n        <DetailRow>\n          <DetailLabelContainer>\n            <DetailLabel>\n              {feeConfig?.name || t('main.fees.defaultIntegrator')}\n              {feeConfig?.showFeePercentage && (\n                <> ({t('format.percent', { value: feePercentage })})</>\n              )}\n            </DetailLabel>\n            {feeConfig?.showFeeTooltip &&\n            (feeConfig?.name || feeConfig?.feeTooltipComponent) ? (\n              <Tooltip\n                title={\n                  feeConfig?.feeTooltipComponent ||\n                  t('tooltip.feeCollection', { tool: feeConfig.name })\n                }\n              >\n                <DetailInfoIcon />\n              </Tooltip>\n            ) : null}\n          </DetailLabelContainer>\n          <DetailValue>\n            {t('format.currency', { value: feeAmountUSD })}\n          </DetailValue>\n        </DetailRow>\n      ) : null}\n      <DetailRow>\n        <DetailLabelContainer>\n          <DetailLabel>{t('main.priceImpact')}</DetailLabel>\n          <Tooltip title={t('tooltip.priceImpact')}>\n            <DetailInfoIcon />\n          </Tooltip>\n        </DetailLabelContainer>\n        <DetailValue>\n          {t('format.percent', { value: priceImpact, usePlusSign: true })}\n        </DetailValue>\n      </DetailRow>\n      {!isRouteDone(route) ? (\n        <>\n          <DetailRow>\n            <DetailLabelContainer>\n              <DetailLabel>{t('main.maxSlippage')}</DetailLabel>\n              <Tooltip title={t('tooltip.slippage')}>\n                <DetailInfoIcon />\n              </Tooltip>\n            </DetailLabelContainer>\n            <DetailValue>\n              {route.steps[0].action.slippage\n                ? t('format.percent', {\n                    value: route.steps[0].action.slippage,\n                  })\n                : t('button.auto')}\n            </DetailValue>\n          </DetailRow>\n          <DetailRow>\n            <DetailLabelContainer>\n              <DetailLabel>{t('main.minReceived')}</DetailLabel>\n              <Tooltip title={t('tooltip.minReceived')}>\n                <DetailInfoIcon />\n              </Tooltip>\n            </DetailLabelContainer>\n            <DetailValue>\n              {t('format.tokenAmount', {\n                value: formatTokenAmount(\n                  BigInt(route.toAmountMin),\n                  route.toToken.decimals\n                ),\n              })}{' '}\n              {route.toToken.symbol}\n            </DetailValue>\n          </DetailRow>\n        </>\n      ) : null}\n      <DetailRow>\n        <DetailLabelContainer>\n          <DetailLabel>{t('main.exchangeRate')}</DetailLabel>\n          <Tooltip title={t('tooltip.exchangeRate')}>\n            <DetailInfoIcon />\n          </Tooltip>\n        </DetailLabelContainer>\n        <DetailValue\n          onClick={toggleRate}\n          role=\"button\"\n          sx={{ cursor: 'pointer' }}\n        >\n          {rateText}\n        </DetailValue>\n      </DetailRow>\n      <DetailRow>\n        <DetailLabelContainer>\n          <DetailLabel>{t('main.estimatedTime')}</DetailLabel>\n          <Tooltip title={t('tooltip.estimatedTime')}>\n            <DetailInfoIcon />\n          </Tooltip>\n        </DetailLabelContainer>\n        <DetailValue>\n          {formatDuration(executionTimeSeconds, i18n.language)}\n        </DetailValue>\n      </DetailRow>\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/RouteCard/RouteDetails.style.js

@@ -0,0 +1,35 @@
+import { Box, Typography, styled } from "@mui/material";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+//#region src/components/RouteCard/RouteDetails.style.tsx
+const DetailRow = styled(Box)(({ theme }) => ({
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+	gap: theme.spacing(1)
+}));
+const DetailLabelContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	gap: theme.spacing(.5)
+}));
+const DetailLabel = styled(Typography)(({ theme }) => ({
+	fontSize: 12,
+	fontWeight: 500,
+	lineHeight: 1.3334,
+	color: theme.vars.palette.text.secondary
+}));
+const DetailValue = styled(Typography)(() => ({
+	fontSize: 12,
+	fontWeight: 700,
+	lineHeight: 1.3334,
+	textAlign: "right"
+}));
+const DetailInfoIcon = styled(InfoOutlinedIcon)(({ theme }) => ({
+	fontSize: 16,
+	color: theme.vars.palette.text.secondary,
+	cursor: "help"
+}));
+//#endregion
+export { DetailInfoIcon, DetailLabel, DetailLabelContainer, DetailRow, DetailValue };
+
+//# sourceMappingURL=RouteDetails.style.js.map

package/dist/esm/components/RouteCard/RouteDetails.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteDetails.style.js","names":["InfoOutlined"],"sources":["../../../../src/components/RouteCard/RouteDetails.style.tsx"],"sourcesContent":["import InfoOutlined from '@mui/icons-material/InfoOutlined'\nimport { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const DetailRow: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n}))\n\nexport const DetailLabelContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n  }))\n\nexport const DetailLabel: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(({ theme }) => ({\n    fontSize: 12,\n    fontWeight: 500,\n    lineHeight: 1.3334,\n    color: theme.vars.palette.text.secondary,\n  }))\n\nexport const DetailValue: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(() => ({\n    fontSize: 12,\n    fontWeight: 700,\n    lineHeight: 1.3334,\n    textAlign: 'right',\n  }))\n\nexport const DetailInfoIcon: React.FC<\n  React.ComponentProps<typeof InfoOutlined>\n> = styled(InfoOutlined)(({ theme }) => ({\n  fontSize: 16,\n  color: theme.vars.palette.text.secondary,\n  cursor: 'help',\n}))\n"],"mappings":";;;AAIA,MAAa,YAAwD,OACnE,GACF,GAAG,EAAE,aAAa;CAChB,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAa,uBACX,OAAO,GAAG,GAAG,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,EAAG;AACxB,EAAE;AAEJ,MAAa,cACX,OAAO,UAAU,GAAG,EAAE,aAAa;CACjC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;AACjC,EAAE;AAEJ,MAAa,cACX,OAAO,UAAU,SAAS;CACxB,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,WAAW;AACb,EAAE;AAEJ,MAAa,iBAET,OAAOA,gBAAY,GAAG,EAAE,aAAa;CACvC,UAAU;CACV,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,QAAQ;AACV,EAAE"}

package/dist/esm/components/RouteCard/RouteNotFoundCard.js

@@ -0,0 +1,45 @@
+import { Box, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Route from "@mui/icons-material/Route";
+//#region src/components/RouteCard/RouteNotFoundCard.tsx
+const RouteNotFoundCard = () => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			py: 1.625,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexDirection: "column",
+			flex: 1,
+			whiteSpace: "normal"
+		},
+		children: [
+			/* @__PURE__ */ jsx(Typography, {
+				sx: { fontSize: 48 },
+				children: /* @__PURE__ */ jsx(Route, { fontSize: "inherit" })
+			}),
+			/* @__PURE__ */ jsx(Typography, {
+				sx: {
+					fontSize: 18,
+					fontWeight: 700
+				},
+				children: t("info.title.routeNotFound")
+			}),
+			/* @__PURE__ */ jsx(Typography, {
+				sx: {
+					fontSize: 14,
+					color: "text.secondary",
+					textAlign: "center",
+					mt: 2
+				},
+				children: t("info.message.routeNotFound")
+			})
+		]
+	});
+};
+//#endregion
+export { RouteNotFoundCard };
+
+//# sourceMappingURL=RouteNotFoundCard.js.map

package/dist/esm/components/RouteCard/RouteNotFoundCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteNotFoundCard.js","names":[],"sources":["../../../../src/components/RouteCard/RouteNotFoundCard.tsx"],"sourcesContent":["import Route from '@mui/icons-material/Route'\nimport { Box, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\n\nexport const RouteNotFoundCard: React.FC = () => {\n  const { t } = useTranslation()\n  return (\n    <Box\n      sx={{\n        py: 1.625,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        flexDirection: 'column',\n        flex: 1,\n        whiteSpace: 'normal',\n      }}\n    >\n      <Typography\n        sx={{\n          fontSize: 48,\n        }}\n      >\n        <Route fontSize=\"inherit\" />\n      </Typography>\n      <Typography\n        sx={{\n          fontSize: 18,\n          fontWeight: 700,\n        }}\n      >\n        {t('info.title.routeNotFound')}\n      </Typography>\n      <Typography\n        sx={{\n          fontSize: 14,\n          color: 'text.secondary',\n          textAlign: 'center',\n          mt: 2,\n        }}\n      >\n        {t('info.message.routeNotFound')}\n      </Typography>\n    </Box>\n  )\n}\n"],"mappings":";;;;;AAIA,MAAa,0BAAoC;CAC/C,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,qBAAC,KAAD;EACE,IAAI;GACF,IAAI;GACJ,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,eAAe;GACf,MAAM;GACN,YAAY;EACd;YATF;GAWE,oBAAC,YAAD;IACE,IAAI,EACF,UAAU,GACZ;cAEA,oBAAC,OAAD,EAAO,UAAS,UAAW,CAAA;GACjB,CAAA;GACZ,oBAAC,YAAD;IACE,IAAI;KACF,UAAU;KACV,YAAY;IACd;cAEC,EAAE,0BAA0B;GACnB,CAAA;GACZ,oBAAC,YAAD;IACE,IAAI;KACF,UAAU;KACV,OAAO;KACP,WAAW;KACX,IAAI;IACN;cAEC,EAAE,4BAA4B;GACrB,CAAA;EACT;;AAET"}

package/dist/esm/components/RouteCard/RouteToken.js

@@ -0,0 +1,49 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { CardIconButton } from "../Card/CardIconButton.js";
+import { Token } from "../Token/Token.js";
+import { RouteCardEssentials } from "./RouteCardEssentials.js";
+import { RouteDetails } from "./RouteDetails.js";
+import { TokenContainer } from "./RouteToken.style.js";
+import { useState } from "react";
+import { Box, Collapse } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import ExpandLess from "@mui/icons-material/ExpandLess";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+//#region src/components/RouteCard/RouteToken.tsx
+const RouteToken = ({ route, token, impactToken, defaultExpanded, showEssentials }) => {
+	const { hiddenUI } = useWidgetConfig();
+	const [cardExpanded, setCardExpanded] = useState(defaultExpanded);
+	const handleExpand = (e) => {
+		e.stopPropagation();
+		setCardExpanded((expanded) => !expanded);
+	};
+	return /* @__PURE__ */ jsxs(Box, { children: [
+		/* @__PURE__ */ jsxs(TokenContainer, { children: [/* @__PURE__ */ jsx(Token, {
+			token,
+			impactToken,
+			step: route.steps[0],
+			stepVisible: !cardExpanded,
+			disableDescription: hiddenUI?.routeTokenDescription
+		}), !defaultExpanded ? /* @__PURE__ */ jsx(CardIconButton, {
+			onClick: handleExpand,
+			size: "small",
+			children: cardExpanded ? /* @__PURE__ */ jsx(ExpandLess, { fontSize: "inherit" }) : /* @__PURE__ */ jsx(ExpandMore, { fontSize: "inherit" })
+		}) : null] }),
+		/* @__PURE__ */ jsx(Collapse, {
+			timeout: 225,
+			in: cardExpanded,
+			mountOnEnter: true,
+			unmountOnExit: true,
+			children: /* @__PURE__ */ jsx(RouteDetails, { route })
+		}),
+		showEssentials ? /* @__PURE__ */ jsx(Collapse, {
+			timeout: 225,
+			in: !cardExpanded,
+			children: /* @__PURE__ */ jsx(RouteCardEssentials, { route })
+		}) : null
+	] });
+};
+//#endregion
+export { RouteToken };
+
+//# sourceMappingURL=RouteToken.js.map

package/dist/esm/components/RouteCard/RouteToken.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteToken.js","names":[],"sources":["../../../../src/components/RouteCard/RouteToken.tsx"],"sourcesContent":["import type { RouteExtended, TokenAmount } from '@lifi/sdk'\nimport ExpandLess from '@mui/icons-material/ExpandLess'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport { Box, Collapse } from '@mui/material'\nimport type { JSX } from 'react'\nimport { type MouseEventHandler, useState } from 'react'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { Token } from '../Token/Token.js'\nimport { RouteCardEssentials } from './RouteCardEssentials.js'\nimport { RouteDetails } from './RouteDetails.js'\nimport { TokenContainer } from './RouteToken.style.js'\n\ninterface RouteTokenProps {\n  route: RouteExtended\n  token: TokenAmount\n  impactToken?: TokenAmount\n  defaultExpanded?: boolean\n  showEssentials?: boolean\n}\n\nexport const RouteToken = ({\n  route,\n  token,\n  impactToken,\n  defaultExpanded,\n  showEssentials,\n}: RouteTokenProps): JSX.Element => {\n  const { hiddenUI } = useWidgetConfig()\n\n  const [cardExpanded, setCardExpanded] = useState(defaultExpanded)\n\n  const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.stopPropagation()\n    setCardExpanded((expanded) => !expanded)\n  }\n\n  return (\n    <Box>\n      <TokenContainer>\n        <Token\n          token={token}\n          impactToken={impactToken}\n          step={route.steps[0]}\n          stepVisible={!cardExpanded}\n          disableDescription={hiddenUI?.routeTokenDescription}\n        />\n        {!defaultExpanded ? (\n          <CardIconButton onClick={handleExpand} size=\"small\">\n            {cardExpanded ? (\n              <ExpandLess fontSize=\"inherit\" />\n            ) : (\n              <ExpandMore fontSize=\"inherit\" />\n            )}\n          </CardIconButton>\n        ) : null}\n      </TokenContainer>\n      <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>\n        <RouteDetails route={route} />\n      </Collapse>\n      {showEssentials ? (\n        <Collapse timeout={225} in={!cardExpanded}>\n          <RouteCardEssentials route={route} />\n        </Collapse>\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAqBA,MAAa,cAAc,EACzB,OACA,OACA,aACA,iBACA,qBACkC;CAClC,MAAM,EAAE,aAAa,gBAAgB;CAErC,MAAM,CAAC,cAAc,mBAAmB,SAAS,eAAe;CAEhE,MAAM,gBAAsD,MAAM;EAChE,EAAE,gBAAgB;EAClB,iBAAiB,aAAa,CAAC,QAAQ;CACzC;CAEA,OACE,qBAAC,KAAD,EAAA,UAAA;EACE,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,OAAD;GACS;GACM;GACb,MAAM,MAAM,MAAM;GAClB,aAAa,CAAC;GACd,oBAAoB,UAAU;EAC/B,CAAA,GACA,CAAC,kBACA,oBAAC,gBAAD;GAAgB,SAAS;GAAc,MAAK;aACzC,eACC,oBAAC,YAAD,EAAY,UAAS,UAAW,CAAA,IAEhC,oBAAC,YAAD,EAAY,UAAS,UAAW,CAAA;EAEpB,CAAA,IACd,IACU,EAAA,CAAA;EAChB,oBAAC,UAAD;GAAU,SAAS;GAAK,IAAI;GAAc,cAAA;GAAa,eAAA;aACrD,oBAAC,cAAD,EAAqB,MAAQ,CAAA;EACrB,CAAA;EACT,iBACC,oBAAC,UAAD;GAAU,SAAS;GAAK,IAAI,CAAC;aAC3B,oBAAC,qBAAD,EAA4B,MAAQ,CAAA;EAC5B,CAAA,IACR;CACD,EAAA,CAAA;AAET"}

package/dist/esm/components/RouteCard/RouteToken.style.js

@@ -0,0 +1,11 @@
+import { Box, styled } from "@mui/material";
+//#region src/components/RouteCard/RouteToken.style.tsx
+const TokenContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	gap: theme.spacing(1)
+}));
+//#endregion
+export { TokenContainer };
+
+//# sourceMappingURL=RouteToken.style.js.map

package/dist/esm/components/RouteCard/RouteToken.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteToken.style.js","names":[],"sources":["../../../../src/components/RouteCard/RouteToken.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const TokenContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n  }))\n"],"mappings":";;AAGA,MAAa,iBACX,OAAO,GAAG,GAAG,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE"}

package/dist/esm/components/RouteCard/RouteTokens.js

@@ -0,0 +1,50 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { Token } from "../Token/Token.js";
+import { RouteToken } from "./RouteToken.js";
+import { Box } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+//#region src/components/RouteCard/RouteTokens.tsx
+const RouteTokens = ({ route, showEssentials, defaultExpanded }) => {
+	const { mode } = useWidgetConfig();
+	const fromToken = {
+		...route.steps[0].action.fromToken,
+		amount: BigInt(route.steps[0].action.fromAmount)
+	};
+	const lastStepIndex = route.steps.length - 1;
+	const toToken = {
+		...route.steps[lastStepIndex].execution?.toToken ?? route.steps[lastStepIndex].action.toToken,
+		amount: route.steps[lastStepIndex].execution?.toAmount ? BigInt(route.steps[lastStepIndex].execution.toAmount) : mode === "custom" ? BigInt(route.toAmount) : BigInt(route.steps[lastStepIndex].estimate.toAmount)
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 1.5
+		},
+		children: [
+			fromToken ? /* @__PURE__ */ jsx(Token, { token: fromToken }) : null,
+			/* @__PURE__ */ jsx(Box, {
+				sx: {
+					width: 40,
+					height: 20,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center"
+				},
+				children: /* @__PURE__ */ jsx(ArrowDownwardIcon, { sx: { fontSize: 16 } })
+			}),
+			toToken ? /* @__PURE__ */ jsx(RouteToken, {
+				route,
+				token: toToken,
+				impactToken: fromToken,
+				showEssentials,
+				defaultExpanded
+			}) : null
+		]
+	});
+};
+//#endregion
+export { RouteTokens };
+
+//# sourceMappingURL=RouteTokens.js.map

package/dist/esm/components/RouteCard/RouteTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteTokens.js","names":[],"sources":["../../../../src/components/RouteCard/RouteTokens.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'\nimport { Box } from '@mui/material'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { Token } from '../Token/Token.js'\nimport { RouteToken } from './RouteToken.js'\n\nexport const RouteTokens: React.FC<{\n  route: RouteExtended\n  showEssentials?: boolean\n  defaultExpanded?: boolean\n}> = ({ route, showEssentials, defaultExpanded }) => {\n  const { mode } = useWidgetConfig()\n\n  const fromToken = {\n    ...route.steps[0].action.fromToken,\n    amount: BigInt(route.steps[0].action.fromAmount),\n  }\n\n  const lastStepIndex = route.steps.length - 1\n  const toToken = {\n    ...(route.steps[lastStepIndex].execution?.toToken ??\n      route.steps[lastStepIndex].action.toToken),\n    amount: route.steps[lastStepIndex].execution?.toAmount\n      ? BigInt(route.steps[lastStepIndex].execution.toAmount)\n      : mode === 'custom'\n        ? BigInt(route.toAmount)\n        : BigInt(route.steps[lastStepIndex].estimate.toAmount),\n  }\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n      {fromToken ? <Token token={fromToken} /> : null}\n      <Box\n        sx={{\n          width: 40,\n          height: 20,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        <ArrowDownwardIcon sx={{ fontSize: 16 }} />\n      </Box>\n      {toToken ? (\n        <RouteToken\n          route={route}\n          token={toToken}\n          impactToken={fromToken}\n          showEssentials={showEssentials}\n          defaultExpanded={defaultExpanded}\n        />\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;AAOA,MAAa,eAIP,EAAE,OAAO,gBAAgB,sBAAsB;CACnD,MAAM,EAAE,SAAS,gBAAgB;CAEjC,MAAM,YAAY;EAChB,GAAG,MAAM,MAAM,GAAG,OAAO;EACzB,QAAQ,OAAO,MAAM,MAAM,GAAG,OAAO,UAAU;CACjD;CAEA,MAAM,gBAAgB,MAAM,MAAM,SAAS;CAC3C,MAAM,UAAU;EACd,GAAI,MAAM,MAAM,eAAe,WAAW,WACxC,MAAM,MAAM,eAAe,OAAO;EACpC,QAAQ,MAAM,MAAM,eAAe,WAAW,WAC1C,OAAO,MAAM,MAAM,eAAe,UAAU,QAAQ,IACpD,SAAS,WACP,OAAO,MAAM,QAAQ,IACrB,OAAO,MAAM,MAAM,eAAe,SAAS,QAAQ;CAC3D;CAEA,OACE,qBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAI;YAA9D;GACG,YAAY,oBAAC,OAAD,EAAO,OAAO,UAAY,CAAA,IAAI;GAC3C,oBAAC,KAAD;IACE,IAAI;KACF,OAAO;KACP,QAAQ;KACR,SAAS;KACT,YAAY;KACZ,gBAAgB;IAClB;cAEA,oBAAC,mBAAD,EAAmB,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACvC,CAAA;GACJ,UACC,oBAAC,YAAD;IACS;IACP,OAAO;IACP,aAAa;IACG;IACC;GAClB,CAAA,IACC;EACD;;AAET"}