@lifi/widget 4.0.0-alpha.4 → 4.0.0-alpha.6

package/dist/esm/components/Step/StepActions.js

@@ -0,0 +1,199 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { HiddenUI } from "../../types/widget.js";
+import { useAvailableChains } from "../../hooks/useAvailableChains.js";
+import { formatTokenAmount, formatTokenPrice } from "../../utils/format.js";
+import { Card as Card$1 } from "../Card/Card.js";
+import { CardIconButton } from "../Card/CardIconButton.js";
+import { SmallAvatar } from "../Avatar/SmallAvatar.js";
+import { StepActionsHeader, StepActionsTitle, StepLabelTypography } from "./StepActions.style.js";
+import { Fragment } from "react";
+import { Box, Divider, Tooltip } from "@mui/material";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useEthereumContext } from "@lifi/widget-provider";
+import { useTranslation } from "react-i18next";
+import ArrowForward from "@mui/icons-material/ArrowForward";
+//#region src/components/Step/StepActions.tsx
+const StepActions = ({ route }) => {
+	const { t } = useTranslation();
+	const { subvariant, subvariantOptions, feeConfig, hiddenUI } = useWidgetConfig();
+	const { isGaslessStep } = useEthereumContext();
+	const headerIncludedSteps = route.steps.flatMap((step) => step.includedSteps);
+	const tooltipContent = /* @__PURE__ */ jsx(Card$1, {
+		indented: true,
+		children: /* @__PURE__ */ jsx(Box, {
+			sx: {
+				display: "grid",
+				gridTemplateColumns: "32px 1fr",
+				columnGap: 1.5
+			},
+			children: route.steps.flatMap((routeStep) => {
+				let steps = routeStep.includedSteps;
+				if (hiddenUI?.includes(HiddenUI.IntegratorStepDetails)) {
+					const feeCollectionStep = steps.find((s) => s.tool === "feeCollection");
+					if (feeCollectionStep) {
+						steps = structuredClone(steps.filter((s) => s.tool !== "feeCollection"));
+						steps[0].estimate.fromAmount = feeCollectionStep.estimate.fromAmount;
+					}
+				}
+				const hasGaslessSupport = !!isGaslessStep?.(routeStep);
+				return steps.map((includedStep) => ({
+					includedStep,
+					hasGaslessSupport
+				}));
+			}).map(({ includedStep: step, hasGaslessSupport }, i, arr) => {
+				const showDivider = i !== arr.length - 1;
+				const isFeeCollection = step.type === "protocol" && step.tool === "feeCollection";
+				const toolName = isFeeCollection && feeConfig?.name ? feeConfig.name : step.toolDetails.name;
+				const toolLogoURI = isFeeCollection && feeConfig?.logoURI ? feeConfig.logoURI : step.toolDetails.logoURI;
+				return /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(Box, {
+						sx: {
+							display: "flex",
+							justifyContent: "center"
+						},
+						children: toolLogoURI ? /* @__PURE__ */ jsx(SmallAvatar, {
+							src: toolLogoURI,
+							alt: toolName,
+							sx: {
+								width: 32,
+								height: 32
+							},
+							children: toolName?.[0]
+						}) : null
+					}),
+					/* @__PURE__ */ jsxs(Box, {
+						sx: {
+							display: "flex",
+							flexDirection: "column",
+							minHeight: 32
+						},
+						children: [step.type === "custom" && subvariant === "custom" ? /* @__PURE__ */ jsx(CustomStepDetailsLabel, {
+							step,
+							subvariant,
+							subvariantOptions
+						}) : step.type === "cross" ? /* @__PURE__ */ jsx(BridgeStepDetailsLabel, { step }) : step.type === "protocol" ? /* @__PURE__ */ jsx(ProtocolStepDetailsLabel, {
+							step,
+							feeConfig,
+							relayerSupport: hasGaslessSupport
+						}) : /* @__PURE__ */ jsx(SwapStepDetailsLabel, { step }), /* @__PURE__ */ jsx(StepDetailsContent, { step })]
+					}),
+					showDivider && /* @__PURE__ */ jsx(Box, {
+						sx: {
+							display: "flex",
+							alignItems: "center",
+							px: "15px"
+						},
+						children: /* @__PURE__ */ jsx(Divider, {
+							orientation: "vertical",
+							sx: {
+								my: .5,
+								height: 8,
+								borderRightWidth: 2
+							}
+						})
+					}),
+					showDivider && /* @__PURE__ */ jsx(Box, {})
+				] }, step.id);
+			})
+		})
+	});
+	return /* @__PURE__ */ jsxs(StepActionsHeader, { children: [/* @__PURE__ */ jsx(StepActionsTitle, { children: t("main.route") }), /* @__PURE__ */ jsx(Tooltip, {
+		title: tooltipContent,
+		placement: "bottom-end",
+		arrow: false,
+		slotProps: {
+			tooltip: { sx: {
+				bgcolor: "transparent",
+				p: 0,
+				boxShadow: "none",
+				maxWidth: "none"
+			} },
+			transition: { style: { transformOrigin: "right top" } }
+		},
+		children: /* @__PURE__ */ jsx(CardIconButton, {
+			size: "small",
+			sx: (theme) => ({ borderRadius: theme.vars.shape.borderRadiusSecondary }),
+			children: /* @__PURE__ */ jsx(Box, {
+				sx: {
+					display: "flex",
+					alignItems: "center"
+				},
+				children: headerIncludedSteps.map((includedStep, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 ? /* @__PURE__ */ jsx(Divider, { sx: {
+					width: 8,
+					mx: .5,
+					borderWidth: 1
+				} }) : null, /* @__PURE__ */ jsx(SmallAvatar, {
+					src: includedStep.toolDetails.logoURI,
+					alt: includedStep.toolDetails.name,
+					sx: {
+						width: 16,
+						height: 16
+					},
+					children: includedStep.toolDetails.name[0]
+				})] }, index))
+			})
+		})
+	})] });
+};
+const StepDetailsContent = ({ step }) => {
+	const { t } = useTranslation();
+	const sameTokenProtocolStep = step.action.fromToken.chainId === step.action.toToken.chainId && step.action.fromToken.address === step.action.toToken.address;
+	let fromAmount;
+	if (sameTokenProtocolStep) {
+		const estimatedFromAmount = BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount);
+		fromAmount = estimatedFromAmount > 0n ? formatTokenAmount(estimatedFromAmount, step.action.fromToken.decimals) : formatTokenAmount(BigInt(step.estimate.fromAmount), step.action.fromToken.decimals);
+	} else fromAmount = formatTokenAmount(BigInt(step.estimate.fromAmount), step.action.fromToken.decimals);
+	const showToAmount = step.type !== "custom" && step.tool !== "custom" && !sameTokenProtocolStep;
+	return /* @__PURE__ */ jsxs(StepLabelTypography, { children: [
+		!showToAmount ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			t("format.tokenAmount", { value: formatTokenAmount(BigInt(step.estimate.fromAmount), step.action.fromToken.decimals) }),
+			" ",
+			step.action.fromToken.symbol,
+			" - "
+		] }) : null,
+		t("format.tokenAmount", { value: fromAmount }),
+		" ",
+		step.action.fromToken.symbol,
+		showToAmount ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(ArrowForward, { sx: {
+				fontSize: 18,
+				paddingX: .5,
+				height: 12
+			} }),
+			t("format.tokenAmount", { value: formatTokenAmount(BigInt(step.execution?.toAmount ?? step.estimate.toAmount), step.execution?.toToken?.decimals ?? step.action.toToken.decimals) }),
+			" ",
+			step.execution?.toToken?.symbol ?? step.action.toToken.symbol
+		] }) : ` (${t("format.currency", { value: formatTokenPrice(fromAmount, step.action.fromToken.priceUSD, step.action.fromToken.decimals) })})`
+	] });
+};
+const CustomStepDetailsLabel = ({ step, subvariant, subvariantOptions }) => {
+	const { t } = useTranslation();
+	if (!subvariant) return null;
+	const toolDetails = subvariant === "custom" && step.includedSteps?.length > 0 ? step.includedSteps.find((step) => step.tool === "custom" && step.toolDetails.key !== "custom")?.toolDetails || step.toolDetails : step.toolDetails;
+	return /* @__PURE__ */ jsx(StepLabelTypography, { children: t(`main.${subvariant === "custom" && subvariantOptions?.custom || "checkout"}StepDetails`, { tool: toolDetails.name }) });
+};
+const BridgeStepDetailsLabel = ({ step }) => {
+	const { t } = useTranslation();
+	const { getChainById } = useAvailableChains();
+	return /* @__PURE__ */ jsx(StepLabelTypography, { children: t("main.bridgeStepDetails", {
+		from: getChainById(step.action.fromChainId)?.name,
+		to: getChainById(step.action.toChainId)?.name,
+		tool: step.toolDetails.name
+	}) });
+};
+const SwapStepDetailsLabel = ({ step }) => {
+	const { t } = useTranslation();
+	const { getChainById } = useAvailableChains();
+	return /* @__PURE__ */ jsx(StepLabelTypography, { children: t("main.swapStepDetails", {
+		chain: getChainById(step.action.fromChainId)?.name,
+		tool: step.toolDetails.name
+	}) });
+};
+const ProtocolStepDetailsLabel = ({ step, feeConfig, relayerSupport }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsx(StepLabelTypography, { children: step.toolDetails.key === "feeCollection" ? feeConfig?.name || (relayerSupport ? t("main.fees.relayerService") : t("main.fees.defaultIntegrator")) : step.toolDetails.key === "gasZip" ? t("main.refuelStepDetails", { tool: step.toolDetails.name }) : step.toolDetails.name });
+};
+//#endregion
+export { StepActions };
+
+//# sourceMappingURL=StepActions.js.map

package/dist/esm/components/Step/StepActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepActions.js","names":["Card"],"sources":["../../../../src/components/Step/StepActions.tsx"],"sourcesContent":["import type { LiFiStep, RouteExtended, StepExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport ArrowForward from '@mui/icons-material/ArrowForward'\nimport { Box, Divider, Tooltip } from '@mui/material'\nimport { Fragment } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport type { StepDetailsLabelProps } from '../StepActions/types.js'\nimport {\n  StepActionsHeader,\n  StepActionsTitle,\n  StepLabelTypography,\n} from './StepActions.style.js'\n\nexport const StepActions: React.FC<{\n  route: RouteExtended\n}> = ({ route }) => {\n  const { t } = useTranslation()\n  const { subvariant, subvariantOptions, feeConfig, hiddenUI } =\n    useWidgetConfig()\n  const { isGaslessStep } = useEthereumContext()\n\n  const headerIncludedSteps = route.steps.flatMap((step) => step.includedSteps)\n\n  const flatSteps = route.steps.flatMap((routeStep) => {\n    let steps = routeStep.includedSteps\n    if (hiddenUI?.includes(HiddenUI.IntegratorStepDetails)) {\n      const feeCollectionStep = steps.find((s) => s.tool === 'feeCollection')\n      if (feeCollectionStep) {\n        steps = structuredClone(steps.filter((s) => s.tool !== 'feeCollection'))\n        steps[0].estimate.fromAmount = feeCollectionStep.estimate.fromAmount\n      }\n    }\n    const hasGaslessSupport = !!isGaslessStep?.(routeStep)\n    return steps.map((includedStep) => ({ includedStep, hasGaslessSupport }))\n  })\n\n  const tooltipContent = (\n    <Card indented>\n      <Box\n        sx={{\n          display: 'grid',\n          gridTemplateColumns: '32px 1fr',\n          columnGap: 1.5,\n        }}\n      >\n        {flatSteps.map(({ includedStep: step, hasGaslessSupport }, i, arr) => {\n          const showDivider = i !== arr.length - 1\n          const isFeeCollection =\n            step.type === 'protocol' && step.tool === 'feeCollection'\n          const toolName =\n            isFeeCollection && feeConfig?.name\n              ? feeConfig.name\n              : step.toolDetails.name\n          const toolLogoURI =\n            isFeeCollection && feeConfig?.logoURI\n              ? feeConfig.logoURI\n              : step.toolDetails.logoURI\n\n          return (\n            <Fragment key={step.id}>\n              <Box sx={{ display: 'flex', justifyContent: 'center' }}>\n                {toolLogoURI ? (\n                  <SmallAvatar\n                    src={toolLogoURI}\n                    alt={toolName}\n                    sx={{ width: 32, height: 32 }}\n                  >\n                    {toolName?.[0]}\n                  </SmallAvatar>\n                ) : null}\n              </Box>\n              <Box\n                sx={{ display: 'flex', flexDirection: 'column', minHeight: 32 }}\n              >\n                {step.type === 'custom' && subvariant === 'custom' ? (\n                  <CustomStepDetailsLabel\n                    step={step}\n                    subvariant={subvariant}\n                    subvariantOptions={subvariantOptions}\n                  />\n                ) : step.type === 'cross' ? (\n                  <BridgeStepDetailsLabel step={step} />\n                ) : step.type === 'protocol' ? (\n                  <ProtocolStepDetailsLabel\n                    step={step}\n                    feeConfig={feeConfig}\n                    relayerSupport={hasGaslessSupport}\n                  />\n                ) : (\n                  <SwapStepDetailsLabel step={step} />\n                )}\n                <StepDetailsContent step={step} />\n              </Box>\n              {showDivider && (\n                <Box sx={{ display: 'flex', alignItems: 'center', px: '15px' }}>\n                  <Divider\n                    orientation=\"vertical\"\n                    sx={{ my: 0.5, height: 8, borderRightWidth: 2 }}\n                  />\n                </Box>\n              )}\n              {showDivider && <Box />}\n            </Fragment>\n          )\n        })}\n      </Box>\n    </Card>\n  )\n\n  return (\n    <StepActionsHeader>\n      <StepActionsTitle>{t('main.route')}</StepActionsTitle>\n      <Tooltip\n        title={tooltipContent}\n        placement=\"bottom-end\"\n        arrow={false}\n        slotProps={{\n          tooltip: {\n            sx: {\n              bgcolor: 'transparent',\n              p: 0,\n              boxShadow: 'none',\n              maxWidth: 'none',\n            },\n          },\n          transition: {\n            style: { transformOrigin: 'right top' },\n          },\n        }}\n      >\n        <CardIconButton\n          size=\"small\"\n          sx={(theme) => ({\n            borderRadius: theme.vars.shape.borderRadiusSecondary,\n          })}\n        >\n          <Box sx={{ display: 'flex', alignItems: 'center' }}>\n            {headerIncludedSteps.map((includedStep, index) => (\n              <Fragment key={index}>\n                {index > 0 ? (\n                  <Divider sx={{ width: 8, mx: 0.5, borderWidth: 1 }} />\n                ) : null}\n                <SmallAvatar\n                  src={includedStep.toolDetails.logoURI}\n                  alt={includedStep.toolDetails.name}\n                  sx={{ width: 16, height: 16 }}\n                >\n                  {includedStep.toolDetails.name[0]}\n                </SmallAvatar>\n              </Fragment>\n            ))}\n          </Box>\n        </CardIconButton>\n      </Tooltip>\n    </StepActionsHeader>\n  )\n}\n\nconst StepDetailsContent: React.FC<{\n  step: StepExtended\n}> = ({ step }) => {\n  const { t } = useTranslation()\n\n  const sameTokenProtocolStep =\n    step.action.fromToken.chainId === step.action.toToken.chainId &&\n    step.action.fromToken.address === step.action.toToken.address\n\n  let fromAmount: string | undefined\n  if (sameTokenProtocolStep) {\n    const estimatedFromAmount =\n      BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount)\n\n    fromAmount =\n      estimatedFromAmount > 0n\n        ? formatTokenAmount(estimatedFromAmount, step.action.fromToken.decimals)\n        : formatTokenAmount(\n            BigInt(step.estimate.fromAmount),\n            step.action.fromToken.decimals\n          )\n  } else {\n    fromAmount = formatTokenAmount(\n      BigInt(step.estimate.fromAmount),\n      step.action.fromToken.decimals\n    )\n  }\n\n  const showToAmount =\n    step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep\n\n  return (\n    <StepLabelTypography>\n      {!showToAmount ? (\n        <>\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(step.estimate.fromAmount),\n              step.action.fromToken.decimals\n            ),\n          })}{' '}\n          {step.action.fromToken.symbol}\n          {' - '}\n        </>\n      ) : null}\n      {t('format.tokenAmount', {\n        value: fromAmount,\n      })}{' '}\n      {step.action.fromToken.symbol}\n      {showToAmount ? (\n        <>\n          <ArrowForward sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(step.execution?.toAmount ?? step.estimate.toAmount),\n              step.execution?.toToken?.decimals ?? step.action.toToken.decimals\n            ),\n          })}{' '}\n          {step.execution?.toToken?.symbol ?? step.action.toToken.symbol}\n        </>\n      ) : (\n        ` (${t('format.currency', {\n          value: formatTokenPrice(\n            fromAmount,\n            step.action.fromToken.priceUSD,\n            step.action.fromToken.decimals\n          ),\n        })})`\n      )}\n    </StepLabelTypography>\n  )\n}\n\nconst CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({\n  step,\n  subvariant,\n  subvariantOptions,\n}) => {\n  const { t } = useTranslation()\n\n  if (!subvariant) {\n    return null\n  }\n\n  // FIXME: step transaction request overrides step tool details, but not included step tool details\n  const toolDetails =\n    subvariant === 'custom' &&\n    (step as unknown as LiFiStep).includedSteps?.length > 0\n      ? (step as unknown as LiFiStep).includedSteps.find(\n          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'\n        )?.toolDetails || step.toolDetails\n      : step.toolDetails\n\n  const stepDetailsKey =\n    (subvariant === 'custom' && subvariantOptions?.custom) || 'checkout'\n\n  return (\n    <StepLabelTypography>\n      {t(`main.${stepDetailsKey}StepDetails`, {\n        tool: toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst BridgeStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n  const { t } = useTranslation()\n  const { getChainById } = useAvailableChains()\n  return (\n    <StepLabelTypography>\n      {t('main.bridgeStepDetails', {\n        from: getChainById(step.action.fromChainId)?.name,\n        to: getChainById(step.action.toChainId)?.name,\n        tool: step.toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst SwapStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n  const { t } = useTranslation()\n  const { getChainById } = useAvailableChains()\n  return (\n    <StepLabelTypography>\n      {t('main.swapStepDetails', {\n        chain: getChainById(step.action.fromChainId)?.name,\n        tool: step.toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst ProtocolStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step, feeConfig, relayerSupport }) => {\n  const { t } = useTranslation()\n  return (\n    <StepLabelTypography>\n      {step.toolDetails.key === 'feeCollection'\n        ? feeConfig?.name ||\n          (relayerSupport\n            ? t('main.fees.relayerService')\n            : t('main.fees.defaultIntegrator'))\n        : step.toolDetails.key === 'gasZip'\n          ? t('main.refuelStepDetails', {\n              tool: step.toolDetails.name,\n            })\n          : step.toolDetails.name}\n    </StepLabelTypography>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/Step/StepActions.style.js

@@ -0,0 +1,27 @@
+import { AvatarMasked } from "../Avatar/Avatar.style.js";
+import { Box, Typography, styled } from "@mui/material";
+//#region src/components/Step/StepActions.style.tsx
+const StepLabelTypography = styled(Typography)(({ theme }) => ({
+	fontSize: 12,
+	fontWeight: 500,
+	lineHeight: 1.3334,
+	color: theme.vars.palette.text.primary,
+	whiteSpace: "nowrap"
+}));
+styled(AvatarMasked)(({ theme }) => ({
+	color: theme.vars.palette.text.primary,
+	backgroundColor: "transparent"
+}));
+const StepActionsHeader = styled(Box)(() => ({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between"
+}));
+const StepActionsTitle = styled(Typography)(() => ({
+	fontSize: 12,
+	fontWeight: 700
+}));
+//#endregion
+export { StepActionsHeader, StepActionsTitle, StepLabelTypography };
+
+//# sourceMappingURL=StepActions.style.js.map

package/dist/esm/components/Step/StepActions.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepActions.style.js","names":[],"sources":["../../../../src/components/Step/StepActions.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\nimport { AvatarMasked } from '../Avatar/Avatar.style.js'\n\nexport const StepLabelTypography: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 12,\n  fontWeight: 500,\n  lineHeight: 1.3334,\n  color: theme.vars.palette.text.primary,\n  whiteSpace: 'nowrap',\n}))\n\nexport const StepAvatar: React.FC<React.ComponentProps<typeof AvatarMasked>> =\n  styled(AvatarMasked)(({ theme }) => ({\n    color: theme.vars.palette.text.primary,\n    backgroundColor: 'transparent',\n  }))\n\nexport const StepActionsHeader: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(() => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  }))\n\nexport const StepActionsTitle: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(() => ({\n  fontSize: 12,\n  fontWeight: 700,\n}))\n"],"mappings":";;;AAIA,MAAa,sBAET,OAAO,WAAW,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,YAAY;CACb,EAAE;AAGD,OAAO,aAAa,EAAE,EAAE,aAAa;CACnC,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,iBAAiB;CAClB,EAAE;AAEL,MAAa,oBACX,OAAO,IAAI,QAAQ;CACjB,SAAS;CACT,YAAY;CACZ,gBAAgB;CACjB,EAAE;AAEL,MAAa,mBAET,OAAO,WAAW,QAAQ;CAC5B,UAAU;CACV,YAAY;CACb,EAAE"}

package/dist/esm/components/Step/StepList.js

@@ -1,34 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import { StepDivider } from '../../components/StepDivider/StepDivider.js';
-import { Step } from './Step.js';
-export const getStepList = (route, subvariant) => route?.steps.map((step, index, steps) => {
-    const lastIndex = steps.length - 1;
-    const fromToken = index === 0
-        ? {
-            ...step.action.fromToken,
-            amount: BigInt(step.action.fromAmount),
-        }
-        : undefined;
-    let toToken;
-    let impactToken;
-    if (index === lastIndex) {
-        toToken = {
-            ...(step.execution?.toToken ?? step.action.toToken),
-            amount: step.execution?.toAmount
-                ? BigInt(step.execution.toAmount)
-                : subvariant === 'custom'
-                    ? BigInt(route.toAmount)
-                    : BigInt(step.estimate.toAmount),
-        };
-        impactToken = {
-            ...steps[0].action.fromToken,
-            amount: BigInt(steps[0].action.fromAmount),
-        };
-    }
-    const toAddress = index === lastIndex && route.fromAddress !== route.toAddress
-        ? route.toAddress
-        : undefined;
-    return (_jsxs(Fragment, { children: [_jsx(Step, { step: step, fromToken: fromToken, toToken: toToken, impactToken: impactToken, toAddress: toAddress }), steps.length > 1 && index !== steps.length - 1 ? (_jsx(StepDivider, {})) : null] }, step.id));
+import { StepDivider } from "../StepDivider/StepDivider.js";
+import { Step } from "./Step.js";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Step/StepList.tsx
+const getStepList = (route, subvariant) => route?.steps.map((step, index, steps) => {
+	const lastIndex = steps.length - 1;
+	const fromToken = index === 0 ? {
+		...step.action.fromToken,
+		amount: BigInt(step.action.fromAmount)
+	} : void 0;
+	let toToken;
+	let impactToken;
+	if (index === lastIndex) {
+		toToken = {
+			...step.execution?.toToken ?? step.action.toToken,
+			amount: step.execution?.toAmount ? BigInt(step.execution.toAmount) : subvariant === "custom" ? BigInt(route.toAmount) : BigInt(step.estimate.toAmount)
+		};
+		impactToken = {
+			...steps[0].action.fromToken,
+			amount: BigInt(steps[0].action.fromAmount)
+		};
+	}
+	const toAddress = index === lastIndex && route.fromAddress !== route.toAddress ? route.toAddress : void 0;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Step, {
+		step,
+		fromToken,
+		toToken,
+		impactToken,
+		toAddress
+	}), steps.length > 1 && index !== steps.length - 1 ? /* @__PURE__ */ jsx(StepDivider, {}) : null] }, step.id);
 });
+//#endregion
+export { getStepList };
+
 //# sourceMappingURL=StepList.js.map

package/dist/esm/components/Step/StepList.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepList.js","sourceRoot":"","sources":["../../../../src/components/Step/StepList.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAA;AAEzE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAEhC,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,KAAqB,EACrB,UAA6B,EAC7B,EAAE,CACF,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IACtC,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAA;IAClC,MAAM,SAAS,GACb,KAAK,KAAK,CAAC;QACT,CAAC,CAAC;YACE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS;YACxB,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC;SACvC;QACH,CAAC,CAAC,SAAS,CAAA;IACf,IAAI,OAAgC,CAAA;IACpC,IAAI,WAAoC,CAAA;IACxC,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,OAAO,GAAG;YACR,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;YACnD,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ;gBAC9B,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;gBACjC,CAAC,CAAC,UAAU,KAAK,QAAQ;oBACvB,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC;oBACxB,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;SACrC,CAAA;QACD,WAAW,GAAG;YACZ,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS;YAC5B,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC;SAC3C,CAAA;IACH,CAAC;IACD,MAAM,SAAS,GACb,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,WAAW,KAAK,KAAK,CAAC,SAAS;QAC1D,CAAC,CAAC,KAAK,CAAC,SAAS;QACjB,CAAC,CAAC,SAAS,CAAA;IACf,OAAO,CACL,MAAC,QAAQ,eACP,KAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,GACpB,EACD,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAChD,KAAC,WAAW,KAAG,CAChB,CAAC,CAAC,CAAC,IAAI,KAVK,IAAI,CAAC,EAAE,CAWX,CACZ,CAAA;AACH,CAAC,CAAC,CAAA"}
+{"version":3,"file":"StepList.js","names":[],"sources":["../../../../src/components/Step/StepList.tsx"],"sourcesContent":["import type { RouteExtended, TokenAmount } from '@lifi/sdk'\nimport { Fragment, type JSX } from 'react'\nimport { StepDivider } from '../../components/StepDivider/StepDivider.js'\nimport type { WidgetSubvariant } from '../../types/widget.js'\nimport { Step } from './Step.js'\n\nexport const getStepList = (\n  route?: RouteExtended,\n  subvariant?: WidgetSubvariant\n): JSX.Element[] | undefined =>\n  route?.steps.map((step, index, steps) => {\n    const lastIndex = steps.length - 1\n    const fromToken: TokenAmount | undefined =\n      index === 0\n        ? {\n            ...step.action.fromToken,\n            amount: BigInt(step.action.fromAmount),\n          }\n        : undefined\n    let toToken: TokenAmount | undefined\n    let impactToken: TokenAmount | undefined\n    if (index === lastIndex) {\n      toToken = {\n        ...(step.execution?.toToken ?? step.action.toToken),\n        amount: step.execution?.toAmount\n          ? BigInt(step.execution.toAmount)\n          : subvariant === 'custom'\n            ? BigInt(route.toAmount)\n            : BigInt(step.estimate.toAmount),\n      }\n      impactToken = {\n        ...steps[0].action.fromToken,\n        amount: BigInt(steps[0].action.fromAmount),\n      }\n    }\n    const toAddress =\n      index === lastIndex && route.fromAddress !== route.toAddress\n        ? route.toAddress\n        : undefined\n    return (\n      <Fragment key={step.id}>\n        <Step\n          step={step}\n          fromToken={fromToken}\n          toToken={toToken}\n          impactToken={impactToken}\n          toAddress={toAddress}\n        />\n        {steps.length > 1 && index !== steps.length - 1 ? (\n          <StepDivider />\n        ) : null}\n      </Fragment>\n    )\n  })\n"],"mappings":";;;;;AAMA,MAAa,eACX,OACA,eAEA,OAAO,MAAM,KAAK,MAAM,OAAO,UAAU;CACvC,MAAM,YAAY,MAAM,SAAS;CACjC,MAAM,YACJ,UAAU,IACN;EACE,GAAG,KAAK,OAAO;EACf,QAAQ,OAAO,KAAK,OAAO,WAAW;EACvC,GACD,KAAA;CACN,IAAI;CACJ,IAAI;AACJ,KAAI,UAAU,WAAW;AACvB,YAAU;GACR,GAAI,KAAK,WAAW,WAAW,KAAK,OAAO;GAC3C,QAAQ,KAAK,WAAW,WACpB,OAAO,KAAK,UAAU,SAAS,GAC/B,eAAe,WACb,OAAO,MAAM,SAAS,GACtB,OAAO,KAAK,SAAS,SAAS;GACrC;AACD,gBAAc;GACZ,GAAG,MAAM,GAAG,OAAO;GACnB,QAAQ,OAAO,MAAM,GAAG,OAAO,WAAW;GAC3C;;CAEH,MAAM,YACJ,UAAU,aAAa,MAAM,gBAAgB,MAAM,YAC/C,MAAM,YACN,KAAA;AACN,QACE,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,MAAD;EACQ;EACK;EACF;EACI;EACF;EACX,CAAA,EACD,MAAM,SAAS,KAAK,UAAU,MAAM,SAAS,IAC5C,oBAAC,aAAD,EAAe,CAAA,GACb,KACK,EAAA,EAXI,KAAK,GAWT;EAEb"}