@lifi/widget 4.0.0-beta.0 → 4.0.0-beta.10

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

@@ -1,23 +1,53 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Skeleton } from '@mui/material';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { Card } from '../Card/Card.js';
-import { TokenSkeleton } from '../Token/Token.js';
-export const RouteCardSkeleton = ({ variant, ...other }) => {
-    const { subvariant } = useWidgetConfig();
-    const cardContent = (_jsxs(Box, { sx: {
-            flex: 1,
-        }, children: [subvariant !== 'refuel' && subvariant !== 'custom' ? (_jsx(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    mb: 2,
-                }, children: _jsx(Skeleton, { variant: "rectangular", width: 112, height: 24, sx: (theme) => ({
-                        borderRadius: theme.vars.shape.borderRadius,
-                    }) }) })) : null, _jsx(TokenSkeleton, {}), _jsxs(Box, { sx: {
-                    mt: 2,
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                }, children: [_jsx(Skeleton, { variant: "text", width: 64, height: 20 }), _jsx(Skeleton, { variant: "text", width: 56, height: 20 })] })] }));
-    return subvariant === 'refuel' || variant === 'cardless' ? (cardContent) : (_jsx(Card, { indented: true, ...other, children: cardContent }));
+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 { subvariant } = useWidgetConfig();
+	const cardContent = /* @__PURE__ */ jsxs(Box, {
+		sx: { flex: 1 },
+		children: [
+			subvariant !== "refuel" && subvariant !== "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 subvariant === "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

@@ -1 +1 @@
-{"version":3,"file":"RouteCardSkeleton.js","sourceRoot":"","sources":["../../../../src/components/RouteCard/RouteCardSkeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAA;AAElF,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAGjD,MAAM,CAAC,MAAM,iBAAiB,GAE1B,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC5B,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAA;IAExC,MAAM,WAAW,GAAG,CAClB,MAAC,GAAG,IACF,EAAE,EAAE;YACF,IAAI,EAAE,CAAC;SACR,aAEA,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,CACpD,KAAC,GAAG,IACF,EAAE,EAAE;oBACF,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,QAAQ;oBACpB,EAAE,EAAE,CAAC;iBACN,YAED,KAAC,QAAQ,IACP,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,EAAE,EACV,EAAE,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;wBACd,YAAY,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY;qBAC5C,CAAC,GACF,GACE,CACP,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,aAAa,KAAG,EACjB,MAAC,GAAG,IACF,EAAE,EAAE;oBACF,EAAE,EAAE,CAAC;oBACL,OAAO,EAAE,MAAM;oBACf,cAAc,EAAE,eAAe;iBAChC,aAED,KAAC,QAAQ,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,EAClD,KAAC,QAAQ,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,IAC9C,IACF,CACP,CAAA;IAED,OAAO,UAAU,KAAK,QAAQ,IAAI,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,CACzD,WAAW,CACZ,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,QAAQ,WAAK,KAAK,YACrB,WAAW,GACP,CACR,CAAA;AACH,CAAC,CAAA"}
+{"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 { subvariant } = useWidgetConfig()\n\n  const cardContent = (\n    <Box\n      sx={{\n        flex: 1,\n      }}\n    >\n      {subvariant !== 'refuel' && subvariant !== '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 subvariant === '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,eAAe,iBAAiB;CAExC,MAAM,cACJ,qBAAC,KAAD;EACE,IAAI,EACF,MAAM,GACP;YAHH;GAKG,eAAe,YAAY,eAAe,WACzC,oBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;KACZ,IAAI;KACL;cAED,oBAAC,UAAD;KACE,SAAQ;KACR,OAAO;KACP,QAAQ;KACR,KAAK,WAAW,EACd,cAAc,MAAM,KAAK,MAAM,cAChC;KACD,CAAA;IACE,CAAA,GACJ;GACJ,oBAAC,eAAD,EAAiB,CAAA;GACjB,qBAAC,KAAD;IACE,IAAI;KACF,IAAI;KACJ,SAAS;KACT,gBAAgB;KACjB;cALH,CAOE,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;KAAM,CAAA,EAClD,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;KAAM,CAAA,CAC9C;;GACF;;AAGR,QAAO,eAAe,YAAY,YAAY,aAC5C,cAEA,oBAACA,QAAD;EAAM,UAAA;EAAS,GAAI;YAChB;EACI,CAAA"}

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 { useEthereumContext } from "@lifi/widget-provider";
+import { useTranslation } from "react-i18next";
+//#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,IACD,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,KAAK,MAAM,QAAQ,EAAE;CACtB,EAAE;AAEH,MAAa,uBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,GAAI;CACxB,EAAE;AAEL,MAAa,cACX,OAAO,WAAW,EAAE,EAAE,aAAa;CACjC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAChC,EAAE;AAEL,MAAa,cACX,OAAO,WAAW,QAAQ;CACxB,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,WAAW;CACZ,EAAE;AAEL,MAAa,iBAET,OAAOA,iBAAa,EAAE,EAAE,aAAa;CACvC,UAAU;CACV,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,QAAQ;CACT,EAAE"}

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

@@ -1,27 +1,45 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Route from '@mui/icons-material/Route';
-import { Box, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-export const RouteNotFoundCard = () => {
-    const { t } = useTranslation();
-    return (_jsxs(Box, { sx: {
-            py: 1.625,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexDirection: 'column',
-            flex: 1,
-            whiteSpace: 'normal',
-        }, children: [_jsx(Typography, { sx: {
-                    fontSize: 48,
-                }, children: _jsx(Route, { fontSize: "inherit" }) }), _jsx(Typography, { sx: {
-                    fontSize: 18,
-                    fontWeight: 700,
-                }, children: t('info.title.routeNotFound') }), _jsx(Typography, { sx: {
-                    fontSize: 14,
-                    color: 'text.secondary',
-                    textAlign: 'center',
-                    mt: 2,
-                }, children: t('info.message.routeNotFound') })] }));
+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

@@ -1 +1 @@
-{"version":3,"file":"RouteNotFoundCard.js","sourceRoot":"","sources":["../../../../src/components/RouteCard/RouteNotFoundCard.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,2BAA2B,CAAA;AAC7C,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C,MAAM,CAAC,MAAM,iBAAiB,GAAa,GAAG,EAAE;IAC9C,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,OAAO,CACL,MAAC,GAAG,IACF,EAAE,EAAE;YACF,EAAE,EAAE,KAAK;YACT,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,aAAa,EAAE,QAAQ;YACvB,IAAI,EAAE,CAAC;YACP,UAAU,EAAE,QAAQ;SACrB,aAED,KAAC,UAAU,IACT,EAAE,EAAE;oBACF,QAAQ,EAAE,EAAE;iBACb,YAED,KAAC,KAAK,IAAC,QAAQ,EAAC,SAAS,GAAG,GACjB,EACb,KAAC,UAAU,IACT,EAAE,EAAE;oBACF,QAAQ,EAAE,EAAE;oBACZ,UAAU,EAAE,GAAG;iBAChB,YAEA,CAAC,CAAC,0BAA0B,CAAC,GACnB,EACb,KAAC,UAAU,IACT,EAAE,EAAE;oBACF,QAAQ,EAAE,EAAE;oBACZ,KAAK,EAAE,gBAAgB;oBACvB,SAAS,EAAE,QAAQ;oBACnB,EAAE,EAAE,CAAC;iBACN,YAEA,CAAC,CAAC,4BAA4B,CAAC,GACrB,IACT,CACP,CAAA;AACH,CAAC,CAAA"}
+{"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,gBAAgB;AAC9B,QACE,qBAAC,KAAD;EACE,IAAI;GACF,IAAI;GACJ,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,eAAe;GACf,MAAM;GACN,YAAY;GACb;YATH;GAWE,oBAAC,YAAD;IACE,IAAI,EACF,UAAU,IACX;cAED,oBAAC,OAAD,EAAO,UAAS,WAAY,CAAA;IACjB,CAAA;GACb,oBAAC,YAAD;IACE,IAAI;KACF,UAAU;KACV,YAAY;KACb;cAEA,EAAE,2BAA2B;IACnB,CAAA;GACb,oBAAC,YAAD;IACE,IAAI;KACF,UAAU;KACV,OAAO;KACP,WAAW;KACX,IAAI;KACL;cAEA,EAAE,6BAA6B;IACrB,CAAA;GACT"}

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

@@ -0,0 +1,50 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { HiddenUI } from "../../types/widget.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?.includes(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 { HiddenUI } from '../../types/widget.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?.includes(\n            HiddenUI.RouteTokenDescription\n          )}\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":";;;;;;;;;;;;;AAsBA,MAAa,cAAc,EACzB,OACA,OACA,aACA,iBACA,qBACkC;CAClC,MAAM,EAAE,aAAa,iBAAiB;CAEtC,MAAM,CAAC,cAAc,mBAAmB,SAAS,gBAAgB;CAEjE,MAAM,gBAAsD,MAAM;AAChE,IAAE,iBAAiB;AACnB,mBAAiB,aAAa,CAAC,SAAS;;AAG1C,QACE,qBAAC,KAAD,EAAA,UAAA;EACE,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,OAAD;GACS;GACM;GACb,MAAM,MAAM,MAAM;GAClB,aAAa,CAAC;GACd,oBAAoB,UAAU,SAC5B,SAAS,sBACV;GACD,CAAA,EACD,CAAC,kBACA,oBAAC,gBAAD;GAAgB,SAAS;GAAc,MAAK;aACzC,eACC,oBAAC,YAAD,EAAY,UAAS,WAAY,CAAA,GAEjC,oBAAC,YAAD,EAAY,UAAS,WAAY,CAAA;GAEpB,CAAA,GACf,KACW,EAAA,CAAA;EACjB,oBAAC,UAAD;GAAU,SAAS;GAAK,IAAI;GAAc,cAAA;GAAa,eAAA;aACrD,oBAAC,cAAD,EAAqB,OAAS,CAAA;GACrB,CAAA;EACV,iBACC,oBAAC,UAAD;GAAU,SAAS;GAAK,IAAI,CAAC;aAC3B,oBAAC,qBAAD,EAA4B,OAAS,CAAA;GAC5B,CAAA,GACT;EACA,EAAA,CAAA"}

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,IAAI,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,EAAE;CACtB,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 }) => {
+	const { subvariant, defaultUI } = 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) : subvariant === "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,
+				defaultExpanded: defaultUI?.transactionDetailsExpanded,
+				showEssentials
+			}) : 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}> = ({ route, showEssentials }) => {\n  const { subvariant, defaultUI } = 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      : subvariant === '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          defaultExpanded={defaultUI?.transactionDetailsExpanded}\n          showEssentials={showEssentials}\n        />\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;AAOA,MAAa,eAGP,EAAE,OAAO,qBAAqB;CAClC,MAAM,EAAE,YAAY,cAAc,iBAAiB;CAEnD,MAAM,YAAY;EAChB,GAAG,MAAM,MAAM,GAAG,OAAO;EACzB,QAAQ,OAAO,MAAM,MAAM,GAAG,OAAO,WAAW;EACjD;CAED,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,SAAS,GACrD,eAAe,WACb,OAAO,MAAM,SAAS,GACtB,OAAO,MAAM,MAAM,eAAe,SAAS,SAAS;EAC3D;AAED,QACE,qBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;GAAK;YAA/D;GACG,YAAY,oBAAC,OAAD,EAAO,OAAO,WAAa,CAAA,GAAG;GAC3C,oBAAC,KAAD;IACE,IAAI;KACF,OAAO;KACP,QAAQ;KACR,SAAS;KACT,YAAY;KACZ,gBAAgB;KACjB;cAED,oBAAC,mBAAD,EAAmB,IAAI,EAAE,UAAU,IAAI,EAAI,CAAA;IACvC,CAAA;GACL,UACC,oBAAC,YAAD;IACS;IACP,OAAO;IACP,aAAa;IACb,iBAAiB,WAAW;IACZ;IAChB,CAAA,GACA;GACA"}

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

@@ -1,36 +1,23 @@
-import { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js';
-export const getMatchingLabels = (route, routeLabels) => {
-    if (!routeLabels?.length) {
-        return [];
-    }
-    return routeLabels
-        .filter((rule) => {
-        const conditions = [];
-        // Check bridge/exchange matches if specified
-        if (rule.bridges || rule.exchanges) {
-            const toolNames = route.steps.flatMap((step) => step.includedSteps.map((s) => s.tool));
-            const bridgesConfigSets = getConfigItemSets(rule.bridges, (bridges) => new Set(bridges));
-            const exchangesConfigSets = getConfigItemSets(rule.exchanges, (exchanges) => new Set(exchanges));
-            conditions.push(toolNames.some((toolName) => isItemAllowedForSets(toolName, bridgesConfigSets) &&
-                isItemAllowedForSets(toolName, exchangesConfigSets)));
-        }
-        // Check token matches if specified
-        if (rule.fromTokenAddress?.length) {
-            conditions.push(rule.fromTokenAddress.includes(route.fromToken.address));
-        }
-        if (rule.toTokenAddress?.length) {
-            conditions.push(rule.toTokenAddress.includes(route.toToken.address));
-        }
-        // Check chain matches if specified
-        if (rule.fromChainId?.length) {
-            conditions.push(rule.fromChainId.includes(route.fromChainId));
-        }
-        if (rule.toChainId?.length) {
-            conditions.push(rule.toChainId.includes(route.toChainId));
-        }
-        // Must have at least one condition and all conditions must be true
-        return conditions.length && conditions.every(Boolean);
-    })
-        .map((rule) => rule.label);
+import { getConfigItemSets, isItemAllowedForSets } from "../../utils/item.js";
+//#region src/components/RouteCard/getMatchingLabels.ts
+const getMatchingLabels = (route, routeLabels) => {
+	if (!routeLabels?.length) return [];
+	return routeLabels.filter((rule) => {
+		const conditions = [];
+		if (rule.bridges || rule.exchanges) {
+			const toolNames = route.steps.flatMap((step) => step.includedSteps.map((s) => s.tool));
+			const bridgesConfigSets = getConfigItemSets(rule.bridges, (bridges) => new Set(bridges));
+			const exchangesConfigSets = getConfigItemSets(rule.exchanges, (exchanges) => new Set(exchanges));
+			conditions.push(toolNames.some((toolName) => isItemAllowedForSets(toolName, bridgesConfigSets) && isItemAllowedForSets(toolName, exchangesConfigSets)));
+		}
+		if (rule.fromTokenAddress?.length) conditions.push(rule.fromTokenAddress.includes(route.fromToken.address));
+		if (rule.toTokenAddress?.length) conditions.push(rule.toTokenAddress.includes(route.toToken.address));
+		if (rule.fromChainId?.length) conditions.push(rule.fromChainId.includes(route.fromChainId));
+		if (rule.toChainId?.length) conditions.push(rule.toChainId.includes(route.toChainId));
+		return conditions.length && conditions.every(Boolean);
+	}).map((rule) => rule.label);
 };
+//#endregion
+export { getMatchingLabels };
+
 //# sourceMappingURL=getMatchingLabels.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"getMatchingLabels.js","sourceRoot":"","sources":["../../../../src/components/RouteCard/getMatchingLabels.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAE7E,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,KAAY,EACZ,WAA8B,EAChB,EAAE;IAChB,IAAI,CAAC,WAAW,EAAE,MAAM,EAAE,CAAC;QACzB,OAAO,EAAE,CAAA;IACX,CAAC;IAED,OAAO,WAAW;SACf,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;QACf,MAAM,UAAU,GAAc,EAAE,CAAA;QAEhC,6CAA6C;QAC7C,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnC,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAC7C,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CACtC,CAAA;YACD,MAAM,iBAAiB,GAAG,iBAAiB,CACzC,IAAI,CAAC,OAAO,EACZ,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,OAAO,CAAC,CAC9B,CAAA;YACD,MAAM,mBAAmB,GAAG,iBAAiB,CAC3C,IAAI,CAAC,SAAS,EACd,CAAC,SAAS,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,SAAS,CAAC,CAClC,CAAA;YACD,UAAU,CAAC,IAAI,CACb,SAAS,CAAC,IAAI,CACZ,CAAC,QAAQ,EAAE,EAAE,CACX,oBAAoB,CAAC,QAAQ,EAAE,iBAAiB,CAAC;gBACjD,oBAAoB,CAAC,QAAQ,EAAE,mBAAmB,CAAC,CACtD,CACF,CAAA;QACH,CAAC;QAED,mCAAmC;QACnC,IAAI,IAAI,CAAC,gBAAgB,EAAE,MAAM,EAAE,CAAC;YAClC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;QAC1E,CAAC;QAED,IAAI,IAAI,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC;YAChC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAA;QACtE,CAAC;QAED,mCAAmC;QACnC,IAAI,IAAI,CAAC,WAAW,EAAE,MAAM,EAAE,CAAC;YAC7B,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAA;QAC/D,CAAC;QAED,IAAI,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC;YAC3B,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAA;QAC3D,CAAC;QAED,mEAAmE;QACnE,OAAO,UAAU,CAAC,MAAM,IAAI,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;IACvD,CAAC,CAAC;SACD,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AAC9B,CAAC,CAAA"}
+{"version":3,"file":"getMatchingLabels.js","names":[],"sources":["../../../../src/components/RouteCard/getMatchingLabels.ts"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport type { RouteLabel, RouteLabelRule } from '../../types/widget.js'\nimport { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'\n\nexport const getMatchingLabels = (\n  route: Route,\n  routeLabels?: RouteLabelRule[]\n): RouteLabel[] => {\n  if (!routeLabels?.length) {\n    return []\n  }\n\n  return routeLabels\n    .filter((rule) => {\n      const conditions: boolean[] = []\n\n      // Check bridge/exchange matches if specified\n      if (rule.bridges || rule.exchanges) {\n        const toolNames = route.steps.flatMap((step) =>\n          step.includedSteps.map((s) => s.tool)\n        )\n        const bridgesConfigSets = getConfigItemSets(\n          rule.bridges,\n          (bridges) => new Set(bridges)\n        )\n        const exchangesConfigSets = getConfigItemSets(\n          rule.exchanges,\n          (exchanges) => new Set(exchanges)\n        )\n        conditions.push(\n          toolNames.some(\n            (toolName) =>\n              isItemAllowedForSets(toolName, bridgesConfigSets) &&\n              isItemAllowedForSets(toolName, exchangesConfigSets)\n          )\n        )\n      }\n\n      // Check token matches if specified\n      if (rule.fromTokenAddress?.length) {\n        conditions.push(rule.fromTokenAddress.includes(route.fromToken.address))\n      }\n\n      if (rule.toTokenAddress?.length) {\n        conditions.push(rule.toTokenAddress.includes(route.toToken.address))\n      }\n\n      // Check chain matches if specified\n      if (rule.fromChainId?.length) {\n        conditions.push(rule.fromChainId.includes(route.fromChainId))\n      }\n\n      if (rule.toChainId?.length) {\n        conditions.push(rule.toChainId.includes(route.toChainId))\n      }\n\n      // Must have at least one condition and all conditions must be true\n      return conditions.length && conditions.every(Boolean)\n    })\n    .map((rule) => rule.label)\n}\n"],"mappings":";;AAIA,MAAa,qBACX,OACA,gBACiB;AACjB,KAAI,CAAC,aAAa,OAChB,QAAO,EAAE;AAGX,QAAO,YACJ,QAAQ,SAAS;EAChB,MAAM,aAAwB,EAAE;AAGhC,MAAI,KAAK,WAAW,KAAK,WAAW;GAClC,MAAM,YAAY,MAAM,MAAM,SAAS,SACrC,KAAK,cAAc,KAAK,MAAM,EAAE,KAAK,CACtC;GACD,MAAM,oBAAoB,kBACxB,KAAK,UACJ,YAAY,IAAI,IAAI,QAAQ,CAC9B;GACD,MAAM,sBAAsB,kBAC1B,KAAK,YACJ,cAAc,IAAI,IAAI,UAAU,CAClC;AACD,cAAW,KACT,UAAU,MACP,aACC,qBAAqB,UAAU,kBAAkB,IACjD,qBAAqB,UAAU,oBAAoB,CACtD,CACF;;AAIH,MAAI,KAAK,kBAAkB,OACzB,YAAW,KAAK,KAAK,iBAAiB,SAAS,MAAM,UAAU,QAAQ,CAAC;AAG1E,MAAI,KAAK,gBAAgB,OACvB,YAAW,KAAK,KAAK,eAAe,SAAS,MAAM,QAAQ,QAAQ,CAAC;AAItE,MAAI,KAAK,aAAa,OACpB,YAAW,KAAK,KAAK,YAAY,SAAS,MAAM,YAAY,CAAC;AAG/D,MAAI,KAAK,WAAW,OAClB,YAAW,KAAK,KAAK,UAAU,SAAS,MAAM,UAAU,CAAC;AAI3D,SAAO,WAAW,UAAU,WAAW,MAAM,QAAQ;GACrD,CACD,KAAK,SAAS,KAAK,MAAM"}