@lifi/widget 0.0.0-preview-6cc63bac

package/dist/esm/pages/TransactionPage/TransactionDoneButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionDoneButtons.js","names":[],"sources":["../../../../src/pages/TransactionPage/TransactionDoneButtons.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Button } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type React from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useClearAmountFields } from '../../stores/form/useClearAmountFields.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { hasEnumFlag } from '../../utils/enum.js'\nimport { formatTokenAmount } from '../../utils/format.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { getExecutionToToken } from '../../utils/token.js'\n\ninterface TransactionDoneButtonsProps {\n  route: RouteExtended\n  status: RouteExecutionStatus\n}\n\nexport const TransactionDoneButtons: React.FC<TransactionDoneButtonsProps> = ({\n  route,\n  status,\n}) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { setFieldValue } = useFieldActions()\n  const clearAmountFields = useClearAmountFields()\n\n  if (!hasEnumFlag(status, RouteExecutionStatus.Done)) {\n    return null\n  }\n\n  const handlePartialDone = () => {\n    const toToken = getExecutionToToken(route)\n    if (\n      toToken.chainId !== route.toToken.chainId &&\n      toToken.address !== route.toToken.address\n    ) {\n      setFieldValue(\n        'fromAmount',\n        formatTokenAmount(toToken.amount, toToken.decimals),\n        { isTouched: true }\n      )\n      setFieldValue('fromChain', toToken.chainId, { isTouched: true })\n      setFieldValue('fromToken', toToken.address, { isTouched: true })\n      setFieldValue('toChain', route.toToken.chainId, {\n        isTouched: true,\n      })\n      setFieldValue('toToken', route.toToken.address, {\n        isTouched: true,\n      })\n    } else {\n      clearAmountFields()\n    }\n  }\n\n  const handleClick = () => {\n    if (hasEnumFlag(status, RouteExecutionStatus.Partial)) {\n      handlePartialDone()\n    } else {\n      clearAmountFields()\n    }\n    navigate({ to: navigationRoutes.home, replace: true })\n  }\n\n  return (\n    <Button variant=\"contained\" fullWidth onClick={handleClick}>\n      {t('button.done')}\n    </Button>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAkBA,MAAa,0BAAiE,EAC5E,OACA,aACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,oBAAoB,qBAAqB;CAE/C,IAAI,CAAC,YAAY,QAAA,CAAiC,GAChD,OAAO;CAGT,MAAM,0BAA0B;EAC9B,MAAM,UAAU,oBAAoB,KAAK;EACzC,IACE,QAAQ,YAAY,MAAM,QAAQ,WAClC,QAAQ,YAAY,MAAM,QAAQ,SAClC;GACA,cACE,cACA,kBAAkB,QAAQ,QAAQ,QAAQ,QAAQ,GAClD,EAAE,WAAW,KAAK,CACpB;GACA,cAAc,aAAa,QAAQ,SAAS,EAAE,WAAW,KAAK,CAAC;GAC/D,cAAc,aAAa,QAAQ,SAAS,EAAE,WAAW,KAAK,CAAC;GAC/D,cAAc,WAAW,MAAM,QAAQ,SAAS,EAC9C,WAAW,KACb,CAAC;GACD,cAAc,WAAW,MAAM,QAAQ,SAAS,EAC9C,WAAW,KACb,CAAC;EACH,OACE,kBAAkB;CAEtB;CAEA,MAAM,oBAAoB;EACxB,IAAI,YAAY,QAAA,EAAoC,GAClD,kBAAkB;OAElB,kBAAkB;EAEpB,SAAS;GAAE,IAAI,iBAAiB;GAAM,SAAS;EAAK,CAAC;CACvD;CAEA,OACE,oBAAC,QAAD;EAAQ,SAAQ;EAAY,WAAA;EAAU,SAAS;YAC5C,EAAE,aAAa;CACV,CAAA;AAEZ"}

package/dist/esm/pages/TransactionPage/TransactionExecutionContent.js

@@ -0,0 +1,78 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { Card as Card$1 } from "../../components/Card/Card.js";
+import { hasEnumFlag } from "../../utils/enum.js";
+import { RouteTokens } from "../../components/RouteCard/RouteTokens.js";
+import { WarningMessages } from "../../components/Messages/WarningMessages.js";
+import { useExecutionRows } from "../../components/StepActions/executionRows.js";
+import { ExecutionStatusCard } from "../../components/ExecutionStatusCard/ExecutionStatusCard.js";
+import { StatusIcon } from "../../components/ExecutionStatusCard/StatusIcon.js";
+import { useRouteExecutionMessage } from "../../hooks/useRouteExecutionMessage.js";
+import { ExecutionDoneCard } from "./ExecutionDoneCard.js";
+import { TransactionDoneButtons } from "./TransactionDoneButtons.js";
+import { TransactionFailedButtons } from "./TransactionFailedButtons.js";
+import { Box } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LazyMotion, MotionConfig, domMax } from "motion/react";
+//#region src/pages/TransactionPage/TransactionExecutionContent.tsx
+/**
+* Execution-phase layout for the Transaction page.
+* Renders the {@link ExecutionStatusCard}, warning messages,
+* and terminal action buttons.
+*/
+const TransactionExecutionContent = ({ route, status, restartRoute, deleteRoute }) => {
+	const { title, message } = useRouteExecutionMessage(route, status);
+	const { mode, contractCompactComponent, contractSecondaryComponent, defaultUI } = useWidgetConfig();
+	const isDone = hasEnumFlag(status, 4);
+	return /* @__PURE__ */ jsx(LazyMotion, {
+		features: domMax,
+		strict: true,
+		children: /* @__PURE__ */ jsx(MotionConfig, {
+			reducedMotion: "user",
+			children: /* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 2
+				},
+				children: [
+					/* @__PURE__ */ jsx(ExecutionStatusCard, {
+						title,
+						description: message,
+						rows: useExecutionRows(route, isDone ? route.toAddress : void 0),
+						iconSlot: mode === "custom" && isDone && !!(contractCompactComponent || contractSecondaryComponent) ? contractCompactComponent || contractSecondaryComponent : /* @__PURE__ */ jsx(StatusIcon, {
+							route,
+							status
+						}),
+						footerSlot: isDone ? /* @__PURE__ */ jsx(ExecutionDoneCard, {
+							route,
+							status
+						}) : /* @__PURE__ */ jsx(Card$1, {
+							type: "default",
+							indented: true,
+							children: /* @__PURE__ */ jsx(RouteTokens, {
+								route,
+								defaultExpanded: defaultUI?.transactionDetailsExpanded
+							})
+						})
+					}),
+					/* @__PURE__ */ jsx(WarningMessages, {
+						route,
+						allowInteraction: true
+					}),
+					status === 8 ? /* @__PURE__ */ jsx(TransactionFailedButtons, {
+						route,
+						restartRoute,
+						deleteRoute
+					}) : isDone ? /* @__PURE__ */ jsx(TransactionDoneButtons, {
+						route,
+						status
+					}) : null
+				]
+			})
+		})
+	});
+};
+//#endregion
+export { TransactionExecutionContent };
+
+//# sourceMappingURL=TransactionExecutionContent.js.map

package/dist/esm/pages/TransactionPage/TransactionExecutionContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionExecutionContent.js","names":["Card"],"sources":["../../../../src/pages/TransactionPage/TransactionExecutionContent.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport { domMax, LazyMotion, MotionConfig } from 'motion/react'\nimport type React from 'react'\nimport type { JSX } from 'react'\nimport { Card } from '../../components/Card/Card.js'\nimport { ExecutionStatusCard } from '../../components/ExecutionStatusCard/ExecutionStatusCard.js'\nimport { StatusIcon } from '../../components/ExecutionStatusCard/StatusIcon.js'\nimport { WarningMessages } from '../../components/Messages/WarningMessages.js'\nimport { RouteTokens } from '../../components/RouteCard/RouteTokens.js'\nimport { useExecutionRows } from '../../components/StepActions/executionRows.js'\nimport { useRouteExecutionMessage } from '../../hooks/useRouteExecutionMessage.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { hasEnumFlag } from '../../utils/enum.js'\nimport { ExecutionDoneCard } from './ExecutionDoneCard.js'\nimport { TransactionDoneButtons } from './TransactionDoneButtons.js'\nimport { TransactionFailedButtons } from './TransactionFailedButtons.js'\n\nexport interface TransactionExecutionContentProps {\n  route: RouteExtended\n  status: RouteExecutionStatus\n  restartRoute: () => void\n  deleteRoute: () => void\n}\n\n/**\n * Execution-phase layout for the Transaction page.\n * Renders the {@link ExecutionStatusCard}, warning messages,\n * and terminal action buttons.\n */\nexport const TransactionExecutionContent: React.FC<\n  TransactionExecutionContentProps\n> = ({ route, status, restartRoute, deleteRoute }): JSX.Element => {\n  const { title, message } = useRouteExecutionMessage(route, status)\n  const {\n    mode,\n    contractCompactComponent,\n    contractSecondaryComponent,\n    defaultUI,\n  } = useWidgetConfig()\n\n  const isDone = hasEnumFlag(status, RouteExecutionStatus.Done)\n  const rows = useExecutionRows(route, isDone ? route.toAddress : undefined)\n\n  const showContract =\n    mode === 'custom' &&\n    isDone &&\n    !!(contractCompactComponent || contractSecondaryComponent)\n\n  const iconSlot = showContract ? (\n    contractCompactComponent || contractSecondaryComponent\n  ) : (\n    <StatusIcon route={route} status={status} />\n  )\n\n  const footerSlot = isDone ? (\n    <ExecutionDoneCard route={route} status={status} />\n  ) : (\n    <Card type=\"default\" indented>\n      <RouteTokens\n        route={route}\n        defaultExpanded={defaultUI?.transactionDetailsExpanded}\n      />\n    </Card>\n  )\n\n  return (\n    <LazyMotion features={domMax} strict>\n      <MotionConfig reducedMotion=\"user\">\n        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n          <ExecutionStatusCard\n            title={title}\n            description={message}\n            rows={rows}\n            iconSlot={iconSlot}\n            footerSlot={footerSlot}\n          />\n          <WarningMessages route={route} allowInteraction />\n          {status === RouteExecutionStatus.Failed ? (\n            <TransactionFailedButtons\n              route={route}\n              restartRoute={restartRoute}\n              deleteRoute={deleteRoute}\n            />\n          ) : isDone ? (\n            <TransactionDoneButtons route={route} status={status} />\n          ) : null}\n        </Box>\n      </MotionConfig>\n    </LazyMotion>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,+BAER,EAAE,OAAO,QAAQ,cAAc,kBAA+B;CACjE,MAAM,EAAE,OAAO,YAAY,yBAAyB,OAAO,MAAM;CACjE,MAAM,EACJ,MACA,0BACA,4BACA,cACE,gBAAgB;CAEpB,MAAM,SAAS,YAAY,QAAA,CAAiC;CAyB5D,OACE,oBAAC,YAAD;EAAY,UAAU;EAAQ,QAAA;YAC5B,oBAAC,cAAD;GAAc,eAAc;aAC1B,qBAAC,KAAD;IAAK,IAAI;KAAE,SAAS;KAAQ,eAAe;KAAU,KAAK;IAAE;cAA5D;KACE,oBAAC,qBAAD;MACS;MACP,aAAa;MACb,MA/BG,iBAAiB,OAAO,SAAS,MAAM,YAAY,KAAA,CA+B7C;MACT,UA7BR,SAAS,YACT,UACA,CAAC,EAAE,4BAA4B,8BAG/B,4BAA4B,6BAE5B,oBAAC,YAAD;OAAmB;OAAe;MAAS,CAAA;MAuBnC,YApBS,SACjB,oBAAC,mBAAD;OAA0B;OAAe;MAAS,CAAA,IAElD,oBAACA,QAAD;OAAM,MAAK;OAAU,UAAA;iBACnB,oBAAC,aAAD;QACS;QACP,iBAAiB,WAAW;OAC7B,CAAA;MACG,CAAA;KAaC,CAAA;KACD,oBAAC,iBAAD;MAAwB;MAAO,kBAAA;KAAkB,CAAA;KAChD,WAAA,IACC,oBAAC,0BAAD;MACS;MACO;MACD;KACd,CAAA,IACC,SACF,oBAAC,wBAAD;MAA+B;MAAe;KAAS,CAAA,IACrD;IACD;;EACO,CAAA;CACJ,CAAA;AAEhB"}

package/dist/esm/pages/TransactionPage/TransactionFailedButtons.js

@@ -0,0 +1,80 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { getAccumulatedFeeCostsBreakdown } from "../../utils/fees.js";
+import { useNavigateBack } from "../../hooks/useNavigateBack.js";
+import { useAddressActivity } from "../../hooks/useAddressActivity.js";
+import { ConfirmToAddressSheet } from "./ConfirmToAddressSheet.js";
+import { StartTransactionButton } from "./StartTransactionButton.js";
+import { getTokenValueLossThreshold } from "./utils.js";
+import { TokenValueBottomSheet } from "./TokenValueBottomSheet.js";
+import { useRef } from "react";
+import { Box, Button } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/TransactionPage/TransactionFailedButtons.tsx
+const TransactionFailedButtons = ({ route, restartRoute, deleteRoute }) => {
+	const { t } = useTranslation();
+	const navigateBack = useNavigateBack();
+	const { mode, hiddenUI } = useWidgetConfig();
+	const tokenValueBottomSheetRef = useRef(null);
+	const confirmToAddressSheetRef = useRef(null);
+	const { toAddress, hasActivity, isLoading: isLoadingAddressActivity, isFetched: isActivityAddressFetched } = useAddressActivity(route.toChainId);
+	const handleRemoveRoute = () => {
+		navigateBack();
+		deleteRoute();
+	};
+	const handleRetryClick = () => {
+		if (toAddress && !hasActivity && !isLoadingAddressActivity && isActivityAddressFetched && !hiddenUI?.lowAddressActivityConfirmation) {
+			confirmToAddressSheetRef.current?.open();
+			return;
+		}
+		const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
+		if (getTokenValueLossThreshold(Number.parseFloat(route.fromAmountUSD), Number.parseFloat(route.toAmountUSD), gasCostUSD, feeCostUSD) && mode !== "custom") tokenValueBottomSheetRef.current?.open();
+		else restartRoute();
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 1.5
+		},
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					gap: 1.5
+				},
+				children: [/* @__PURE__ */ jsx(Box, {
+					sx: { flex: 1 },
+					children: /* @__PURE__ */ jsx(Button, {
+						onClick: handleRemoveRoute,
+						fullWidth: true,
+						children: t("button.delete")
+					})
+				}), /* @__PURE__ */ jsx(Box, {
+					sx: { flex: 1 },
+					children: /* @__PURE__ */ jsx(StartTransactionButton, {
+						text: t("button.tryAgain"),
+						onClick: handleRetryClick,
+						route,
+						loading: isLoadingAddressActivity
+					})
+				})]
+			}),
+			mode !== "custom" ? /* @__PURE__ */ jsx(TokenValueBottomSheet, {
+				route,
+				ref: tokenValueBottomSheetRef,
+				onContinue: restartRoute
+			}) : null,
+			!hiddenUI?.lowAddressActivityConfirmation ? /* @__PURE__ */ jsx(ConfirmToAddressSheet, {
+				ref: confirmToAddressSheetRef,
+				onContinue: restartRoute,
+				toAddress,
+				toChainId: route.toChainId
+			}) : null
+		]
+	});
+};
+//#endregion
+export { TransactionFailedButtons };
+
+//# sourceMappingURL=TransactionFailedButtons.js.map

package/dist/esm/pages/TransactionPage/TransactionFailedButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionFailedButtons.js","names":[],"sources":["../../../../src/pages/TransactionPage/TransactionFailedButtons.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box, Button } from '@mui/material'\nimport { useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { useAddressActivity } from '../../hooks/useAddressActivity.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'\nimport { StartTransactionButton } from './StartTransactionButton.js'\nimport { TokenValueBottomSheet } from './TokenValueBottomSheet.js'\nimport { getTokenValueLossThreshold } from './utils.js'\n\ninterface TransactionFailedButtonsProps {\n  route: RouteExtended\n  restartRoute: () => void\n  deleteRoute: () => void\n}\n\nexport const TransactionFailedButtons: React.FC<\n  TransactionFailedButtonsProps\n> = ({ route, restartRoute, deleteRoute }) => {\n  const { t } = useTranslation()\n  const navigateBack = useNavigateBack()\n  const { mode, hiddenUI } = useWidgetConfig()\n\n  const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)\n  const confirmToAddressSheetRef = useRef<BottomSheetBase>(null)\n\n  const {\n    toAddress,\n    hasActivity,\n    isLoading: isLoadingAddressActivity,\n    isFetched: isActivityAddressFetched,\n  } = useAddressActivity(route.toChainId)\n\n  const handleRemoveRoute = () => {\n    navigateBack()\n    deleteRoute()\n  }\n\n  const handleRetryClick = () => {\n    if (\n      toAddress &&\n      !hasActivity &&\n      !isLoadingAddressActivity &&\n      isActivityAddressFetched &&\n      !hiddenUI?.lowAddressActivityConfirmation\n    ) {\n      confirmToAddressSheetRef.current?.open()\n      return\n    }\n\n    const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)\n    const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)\n    const toAmountUSD = Number.parseFloat(route.toAmountUSD)\n    const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(\n      fromAmountUSD,\n      toAmountUSD,\n      gasCostUSD,\n      feeCostUSD\n    )\n    if (tokenValueLossThresholdExceeded && mode !== 'custom') {\n      tokenValueBottomSheetRef.current?.open()\n    } else {\n      restartRoute()\n    }\n  }\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n      <Box sx={{ display: 'flex', gap: 1.5 }}>\n        <Box sx={{ flex: 1 }}>\n          <Button onClick={handleRemoveRoute} fullWidth>\n            {t('button.delete')}\n          </Button>\n        </Box>\n        <Box sx={{ flex: 1 }}>\n          <StartTransactionButton\n            text={t('button.tryAgain')}\n            onClick={handleRetryClick}\n            route={route}\n            loading={isLoadingAddressActivity}\n          />\n        </Box>\n      </Box>\n      {mode !== 'custom' ? (\n        <TokenValueBottomSheet\n          route={route}\n          ref={tokenValueBottomSheetRef}\n          onContinue={restartRoute}\n        />\n      ) : null}\n      {!hiddenUI?.lowAddressActivityConfirmation ? (\n        <ConfirmToAddressSheet\n          ref={confirmToAddressSheetRef}\n          onContinue={restartRoute}\n          toAddress={toAddress!}\n          toChainId={route.toChainId!}\n        />\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAa,4BAER,EAAE,OAAO,cAAc,kBAAkB;CAC5C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,eAAe,gBAAgB;CACrC,MAAM,EAAE,MAAM,aAAa,gBAAgB;CAE3C,MAAM,2BAA2B,OAAwB,IAAI;CAC7D,MAAM,2BAA2B,OAAwB,IAAI;CAE7D,MAAM,EACJ,WACA,aACA,WAAW,0BACX,WAAW,6BACT,mBAAmB,MAAM,SAAS;CAEtC,MAAM,0BAA0B;EAC9B,aAAa;EACb,YAAY;CACd;CAEA,MAAM,yBAAyB;EAC7B,IACE,aACA,CAAC,eACD,CAAC,4BACD,4BACA,CAAC,UAAU,gCACX;GACA,yBAAyB,SAAS,KAAK;GACvC;EACF;EAEA,MAAM,EAAE,YAAY,eAAe,gCAAgC,KAAK;EASxE,IANwC,2BAFlB,OAAO,WAAW,MAAM,aAGhC,GAFM,OAAO,WAAW,MAAM,WAGhC,GACV,YACA,UAEgC,KAAK,SAAS,UAC9C,yBAAyB,SAAS,KAAK;OAEvC,aAAa;CAEjB;CAEA,OACE,qBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAI;YAA9D;GACE,qBAAC,KAAD;IAAK,IAAI;KAAE,SAAS;KAAQ,KAAK;IAAI;cAArC,CACE,oBAAC,KAAD;KAAK,IAAI,EAAE,MAAM,EAAE;eACjB,oBAAC,QAAD;MAAQ,SAAS;MAAmB,WAAA;gBACjC,EAAE,eAAe;KACZ,CAAA;IACL,CAAA,GACL,oBAAC,KAAD;KAAK,IAAI,EAAE,MAAM,EAAE;eACjB,oBAAC,wBAAD;MACE,MAAM,EAAE,iBAAiB;MACzB,SAAS;MACF;MACP,SAAS;KACV,CAAA;IACE,CAAA,CACF;;GACJ,SAAS,WACR,oBAAC,uBAAD;IACS;IACP,KAAK;IACL,YAAY;GACb,CAAA,IACC;GACH,CAAC,UAAU,iCACV,oBAAC,uBAAD;IACE,KAAK;IACL,YAAY;IACD;IACX,WAAW,MAAM;GAClB,CAAA,IACC;EACD;;AAET"}

package/dist/esm/pages/TransactionPage/TransactionPage.js

@@ -0,0 +1,79 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { PageContainer } from "../../components/PageContainer.js";
+import { hasEnumFlag } from "../../utils/enum.js";
+import { useHeader } from "../../hooks/useHeader.js";
+import { ContractComponent } from "../../components/ContractComponent/ContractComponent.js";
+import { usePacedRouteExecution } from "../../hooks/usePacedRouteExecution.js";
+import { useClearAmountFields } from "../../stores/form/useClearAmountFields.js";
+import { ExchangeRateBottomSheet } from "./ExchangeRateBottomSheet.js";
+import { RouteTracker } from "./RouteTracker.js";
+import { TransactionContent } from "./TransactionContent.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useLocation } from "@tanstack/react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/TransactionPage/TransactionPage.tsx
+const TransactionPage = () => {
+	const { t } = useTranslation();
+	const { mode, modeOptions, contractSecondaryComponent } = useWidgetConfig();
+	const { search } = useLocation();
+	const stateRouteId = search?.routeId;
+	const [routeId, setRouteId] = useState(stateRouteId);
+	const [routeRefreshing, setRouteRefreshing] = useState(false);
+	const clearAmountFields = useClearAmountFields();
+	const exchangeRateBottomSheetRef = useRef(null);
+	const onAcceptExchangeRateUpdate = (resolver, data) => {
+		exchangeRateBottomSheetRef.current?.open(resolver, data);
+	};
+	const { route, status, executeRoute, restartRoute, deleteRoute } = usePacedRouteExecution({
+		routeId,
+		onAcceptExchangeRateUpdate
+	});
+	const statusRef = useRef(status);
+	statusRef.current = status;
+	const getHeaderTitle = () => {
+		if (mode === "custom") return t(`header.${modeOptions?.custom?.type ?? "checkout"}`);
+		if (route) {
+			const transactionType = route.fromChainId === route.toChainId ? "swap" : "bridge";
+			return status === 1 ? t(`button.${transactionType}Review`) : t(`header.${transactionType}`);
+		}
+		return t("header.exchange");
+	};
+	const headerAction = useMemo(() => status === 1 ? /* @__PURE__ */ jsx(RouteTracker, {
+		observableRouteId: stateRouteId,
+		onChange: setRouteId,
+		onFetching: setRouteRefreshing
+	}) : void 0, [stateRouteId, status]);
+	useHeader(getHeaderTitle(), headerAction);
+	useEffect(() => {
+		return () => {
+			if (statusRef.current && statusRef.current !== 1 && !hasEnumFlag(statusRef.current, 4)) clearAmountFields();
+		};
+	}, []);
+	if (!route || !status) return null;
+	return /* @__PURE__ */ jsxs(PageContainer, {
+		topGutters: true,
+		bottomGutters: true,
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 2
+		},
+		children: [
+			/* @__PURE__ */ jsx(TransactionContent, {
+				route,
+				status,
+				executeRoute,
+				restartRoute,
+				deleteRoute,
+				routeRefreshing
+			}),
+			mode === "custom" && contractSecondaryComponent ? /* @__PURE__ */ jsx(ContractComponent, { children: contractSecondaryComponent }) : null,
+			/* @__PURE__ */ jsx(ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })
+		]
+	});
+};
+//#endregion
+export { TransactionPage };
+
+//# sourceMappingURL=TransactionPage.js.map

package/dist/esm/pages/TransactionPage/TransactionPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionPage.js","names":[],"sources":["../../../../src/pages/TransactionPage/TransactionPage.tsx"],"sourcesContent":["import type { ExchangeRateUpdateParams } from '@lifi/sdk'\nimport { useLocation } from '@tanstack/react-router'\nimport { type JSX, useEffect, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { usePacedRouteExecution } from '../../hooks/usePacedRouteExecution.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useClearAmountFields } from '../../stores/form/useClearAmountFields.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { hasEnumFlag } from '../../utils/enum.js'\nimport type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js'\nimport { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js'\nimport { RouteTracker } from './RouteTracker.js'\nimport { TransactionContent } from './TransactionContent.js'\n\nexport const TransactionPage = (): JSX.Element | null => {\n  const { t } = useTranslation()\n  const { mode, modeOptions, contractSecondaryComponent } = useWidgetConfig()\n  const { search }: any = useLocation()\n  const stateRouteId = search?.routeId\n  const [routeId, setRouteId] = useState<string>(stateRouteId)\n  const [routeRefreshing, setRouteRefreshing] = useState(false)\n  const clearAmountFields = useClearAmountFields()\n\n  const exchangeRateBottomSheetRef = useRef<ExchangeRateBottomSheetBase>(null)\n\n  const onAcceptExchangeRateUpdate = (\n    resolver: (value: boolean) => void,\n    data: ExchangeRateUpdateParams\n  ) => {\n    exchangeRateBottomSheetRef.current?.open(resolver, data)\n  }\n\n  const { route, status, executeRoute, restartRoute, deleteRoute } =\n    usePacedRouteExecution({\n      routeId: routeId,\n      onAcceptExchangeRateUpdate,\n    })\n\n  const statusRef = useRef(status)\n  statusRef.current = status\n\n  const getHeaderTitle = () => {\n    if (mode === 'custom') {\n      return t(`header.${modeOptions?.custom?.type ?? 'checkout'}`)\n    }\n    if (route) {\n      const transactionType =\n        route.fromChainId === route.toChainId ? 'swap' : 'bridge'\n      return status === RouteExecutionStatus.Idle\n        ? t(`button.${transactionType}Review`)\n        : t(`header.${transactionType}`)\n    }\n\n    return t('header.exchange')\n  }\n\n  const headerAction = useMemo(\n    () =>\n      status === RouteExecutionStatus.Idle ? (\n        <RouteTracker\n          observableRouteId={stateRouteId}\n          onChange={setRouteId}\n          onFetching={setRouteRefreshing}\n        />\n      ) : undefined,\n    [stateRouteId, status]\n  )\n\n  useHeader(getHeaderTitle(), headerAction)\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: cleanup only on unmount\n  useEffect(() => {\n    return () => {\n      if (\n        statusRef.current &&\n        statusRef.current !== RouteExecutionStatus.Idle &&\n        !hasEnumFlag(statusRef.current, RouteExecutionStatus.Done)\n      ) {\n        clearAmountFields()\n      }\n    }\n  }, [])\n\n  if (!route || !status) {\n    return null\n  }\n\n  return (\n    <PageContainer\n      topGutters\n      bottomGutters\n      sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}\n    >\n      <TransactionContent\n        route={route}\n        status={status}\n        executeRoute={executeRoute}\n        restartRoute={restartRoute}\n        deleteRoute={deleteRoute}\n        routeRefreshing={routeRefreshing}\n      />\n      {mode === 'custom' && contractSecondaryComponent ? (\n        <ContractComponent>{contractSecondaryComponent}</ContractComponent>\n      ) : null}\n      <ExchangeRateBottomSheet ref={exchangeRateBottomSheetRef} />\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAa,wBAA4C;CACvD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,MAAM,aAAa,+BAA+B,gBAAgB;CAC1E,MAAM,EAAE,WAAgB,YAAY;CACpC,MAAM,eAAe,QAAQ;CAC7B,MAAM,CAAC,SAAS,cAAc,SAAiB,YAAY;CAC3D,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,KAAK;CAC5D,MAAM,oBAAoB,qBAAqB;CAE/C,MAAM,6BAA6B,OAAoC,IAAI;CAE3E,MAAM,8BACJ,UACA,SACG;EACH,2BAA2B,SAAS,KAAK,UAAU,IAAI;CACzD;CAEA,MAAM,EAAE,OAAO,QAAQ,cAAc,cAAc,gBACjD,uBAAuB;EACZ;EACT;CACF,CAAC;CAEH,MAAM,YAAY,OAAO,MAAM;CAC/B,UAAU,UAAU;CAEpB,MAAM,uBAAuB;EAC3B,IAAI,SAAS,UACX,OAAO,EAAE,UAAU,aAAa,QAAQ,QAAQ,YAAY;EAE9D,IAAI,OAAO;GACT,MAAM,kBACJ,MAAM,gBAAgB,MAAM,YAAY,SAAS;GACnD,OAAO,WAAA,IACH,EAAE,UAAU,gBAAgB,OAAO,IACnC,EAAE,UAAU,iBAAiB;EACnC;EAEA,OAAO,EAAE,iBAAiB;CAC5B;CAEA,MAAM,eAAe,cAEjB,WAAA,IACE,oBAAC,cAAD;EACE,mBAAmB;EACnB,UAAU;EACV,YAAY;CACb,CAAA,IACC,KAAA,GACN,CAAC,cAAc,MAAM,CACvB;CAEA,UAAU,eAAe,GAAG,YAAY;CAGxC,gBAAgB;EACd,aAAa;GACX,IACE,UAAU,WACV,UAAU,YAAA,KACV,CAAC,YAAY,UAAU,SAAA,CAAkC,GAEzD,kBAAkB;EAEtB;CACF,GAAG,CAAC,CAAC;CAEL,IAAI,CAAC,SAAS,CAAC,QACb,OAAO;CAGT,OACE,qBAAC,eAAD;EACE,YAAA;EACA,eAAA;EACA,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAE;YAHzD;GAKE,oBAAC,oBAAD;IACS;IACC;IACM;IACA;IACD;IACI;GAClB,CAAA;GACA,SAAS,YAAY,6BACpB,oBAAC,mBAAD,EAAA,UAAoB,2BAA8C,CAAA,IAChE;GACJ,oBAAC,yBAAD,EAAyB,KAAK,2BAA6B,CAAA;EAC9C;;AAEnB"}

package/dist/esm/pages/TransactionPage/TransactionReview.js

@@ -0,0 +1,115 @@
+import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
+import "../../types/events.js";
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useHeaderStore } from "../../stores/header/useHeaderStore.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { Card as Card$1 } from "../../components/Card/Card.js";
+import { getAccumulatedFeeCostsBreakdown } from "../../utils/fees.js";
+import { RouteTokens } from "../../components/RouteCard/RouteTokens.js";
+import { WarningMessages } from "../../components/Messages/WarningMessages.js";
+import { useAddressActivity } from "../../hooks/useAddressActivity.js";
+import { ConfirmToAddressSheet } from "./ConfirmToAddressSheet.js";
+import { StartTransactionButton } from "./StartTransactionButton.js";
+import { calculateValueLossPercentage, getTokenValueLossThreshold } from "./utils.js";
+import { TokenValueBottomSheet } from "./TokenValueBottomSheet.js";
+import { useRef } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { Box } from "@mui/material";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/TransactionPage/TransactionReview.tsx
+const TransactionReview = ({ route, executeRoute, routeRefreshing }) => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const { setFieldValue } = useFieldActions();
+	const emitter = useWidgetEvents();
+	const setBackAction = useHeaderStore((state) => state.setBackAction);
+	const { mode, modeOptions, hiddenUI, defaultUI } = useWidgetConfig();
+	const tokenValueBottomSheetRef = useRef(null);
+	const confirmToAddressSheetRef = useRef(null);
+	const { toAddress, hasActivity, isLoading: isLoadingAddressActivity, isFetched: isActivityAddressFetched } = useAddressActivity(route.toChainId);
+	const handleExecuteRoute = () => {
+		if (tokenValueBottomSheetRef.current?.isOpen()) {
+			const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
+			const fromAmountUSD = Number.parseFloat(route.fromAmountUSD);
+			const toAmountUSD = Number.parseFloat(route.toAmountUSD);
+			emitter.emit("routeHighValueLoss", {
+				fromAmountUSD,
+				toAmountUSD,
+				gasCostUSD,
+				feeCostUSD,
+				valueLoss: calculateValueLossPercentage(fromAmountUSD, toAmountUSD, gasCostUSD, feeCostUSD)
+			});
+		}
+		tokenValueBottomSheetRef.current?.close();
+		executeRoute();
+		setFieldValue("fromAmount", "");
+		if (mode === "custom") {
+			setFieldValue("fromToken", "");
+			setFieldValue("toToken", "");
+		}
+		setBackAction(() => {
+			navigate({
+				to: navigationRoutes.home,
+				replace: true
+			});
+		});
+	};
+	const handleStartClick = () => {
+		if (toAddress && !hasActivity && !isLoadingAddressActivity && isActivityAddressFetched && !hiddenUI?.lowAddressActivityConfirmation) {
+			confirmToAddressSheetRef.current?.open();
+			return;
+		}
+		const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
+		if (getTokenValueLossThreshold(Number.parseFloat(route.fromAmountUSD), Number.parseFloat(route.toAmountUSD), gasCostUSD, feeCostUSD) && mode !== "custom") tokenValueBottomSheetRef.current?.open();
+		else handleExecuteRoute();
+	};
+	const getButtonText = () => {
+		switch (mode) {
+			case "custom": return modeOptions?.custom?.type === "deposit" ? t("button.deposit") : t("button.buy");
+			case "refuel": return t("button.startBridging");
+			default: return t(`button.start${route.fromChainId === route.toChainId ? "Swapping" : "Bridging"}`);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Card$1, {
+			type: "default",
+			indented: true,
+			children: /* @__PURE__ */ jsx(RouteTokens, {
+				route,
+				showEssentials: true,
+				defaultExpanded: defaultUI?.transactionDetailsExpanded
+			})
+		}),
+		/* @__PURE__ */ jsx(WarningMessages, {
+			sx: { mt: 2 },
+			route,
+			allowInteraction: true
+		}),
+		/* @__PURE__ */ jsx(Box, {
+			sx: { flex: 1 },
+			children: /* @__PURE__ */ jsx(StartTransactionButton, {
+				text: getButtonText(),
+				onClick: handleStartClick,
+				route,
+				loading: routeRefreshing || isLoadingAddressActivity
+			})
+		}),
+		mode !== "custom" ? /* @__PURE__ */ jsx(TokenValueBottomSheet, {
+			route,
+			ref: tokenValueBottomSheetRef,
+			onContinue: handleExecuteRoute
+		}) : null,
+		!hiddenUI?.lowAddressActivityConfirmation ? /* @__PURE__ */ jsx(ConfirmToAddressSheet, {
+			ref: confirmToAddressSheetRef,
+			onContinue: handleExecuteRoute,
+			toAddress,
+			toChainId: route.toChainId
+		}) : null
+	] });
+};
+//#endregion
+export { TransactionReview };
+
+//# sourceMappingURL=TransactionReview.js.map

package/dist/esm/pages/TransactionPage/TransactionReview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionReview.js","names":["Card"],"sources":["../../../../src/pages/TransactionPage/TransactionReview.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { Card } from '../../components/Card/Card.js'\nimport { WarningMessages } from '../../components/Messages/WarningMessages.js'\nimport { RouteTokens } from '../../components/RouteCard/RouteTokens.js'\nimport { useAddressActivity } from '../../hooks/useAddressActivity.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'\nimport { StartTransactionButton } from './StartTransactionButton.js'\nimport { TokenValueBottomSheet } from './TokenValueBottomSheet.js'\nimport {\n  calculateValueLossPercentage,\n  getTokenValueLossThreshold,\n} from './utils.js'\n\ninterface TransactionReviewProps {\n  route: RouteExtended\n  executeRoute: () => void\n  routeRefreshing: boolean\n}\n\nexport const TransactionReview: React.FC<TransactionReviewProps> = ({\n  route,\n  executeRoute,\n  routeRefreshing,\n}) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { setFieldValue } = useFieldActions()\n  const emitter = useWidgetEvents()\n  const setBackAction = useHeaderStore((state) => state.setBackAction)\n  const { mode, modeOptions, hiddenUI, defaultUI } = useWidgetConfig()\n\n  const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)\n  const confirmToAddressSheetRef = useRef<BottomSheetBase>(null)\n\n  const {\n    toAddress,\n    hasActivity,\n    isLoading: isLoadingAddressActivity,\n    isFetched: isActivityAddressFetched,\n  } = useAddressActivity(route.toChainId)\n\n  const handleExecuteRoute = () => {\n    if (tokenValueBottomSheetRef.current?.isOpen()) {\n      const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)\n      const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)\n      const toAmountUSD = Number.parseFloat(route.toAmountUSD)\n      emitter.emit(WidgetEvent.RouteHighValueLoss, {\n        fromAmountUSD,\n        toAmountUSD,\n        gasCostUSD,\n        feeCostUSD,\n        valueLoss: calculateValueLossPercentage(\n          fromAmountUSD,\n          toAmountUSD,\n          gasCostUSD,\n          feeCostUSD\n        ),\n      })\n    }\n    tokenValueBottomSheetRef.current?.close()\n    executeRoute()\n    setFieldValue('fromAmount', '')\n    if (mode === 'custom') {\n      setFieldValue('fromToken', '')\n      setFieldValue('toToken', '')\n    }\n    setBackAction(() => {\n      navigate({ to: navigationRoutes.home, replace: true })\n    })\n  }\n\n  const handleStartClick = () => {\n    if (\n      toAddress &&\n      !hasActivity &&\n      !isLoadingAddressActivity &&\n      isActivityAddressFetched &&\n      !hiddenUI?.lowAddressActivityConfirmation\n    ) {\n      confirmToAddressSheetRef.current?.open()\n      return\n    }\n\n    const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)\n    const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)\n    const toAmountUSD = Number.parseFloat(route.toAmountUSD)\n    const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(\n      fromAmountUSD,\n      toAmountUSD,\n      gasCostUSD,\n      feeCostUSD\n    )\n    if (tokenValueLossThresholdExceeded && mode !== 'custom') {\n      tokenValueBottomSheetRef.current?.open()\n    } else {\n      handleExecuteRoute()\n    }\n  }\n\n  const getButtonText = (): string => {\n    switch (mode) {\n      case 'custom':\n        return modeOptions?.custom?.type === 'deposit'\n          ? t('button.deposit')\n          : t('button.buy')\n      case 'refuel':\n        return t('button.startBridging')\n      default: {\n        const transactionType =\n          route.fromChainId === route.toChainId ? 'Swapping' : 'Bridging'\n        return t(`button.start${transactionType}`)\n      }\n    }\n  }\n\n  return (\n    <>\n      <Card type=\"default\" indented>\n        <RouteTokens\n          route={route}\n          showEssentials\n          defaultExpanded={defaultUI?.transactionDetailsExpanded}\n        />\n      </Card>\n      <WarningMessages sx={{ mt: 2 }} route={route} allowInteraction />\n      <Box sx={{ flex: 1 }}>\n        <StartTransactionButton\n          text={getButtonText()}\n          onClick={handleStartClick}\n          route={route}\n          loading={routeRefreshing || isLoadingAddressActivity}\n        />\n      </Box>\n      {mode !== 'custom' ? (\n        <TokenValueBottomSheet\n          route={route}\n          ref={tokenValueBottomSheetRef}\n          onContinue={handleExecuteRoute}\n        />\n      ) : null}\n      {!hiddenUI?.lowAddressActivityConfirmation ? (\n        <ConfirmToAddressSheet\n          ref={confirmToAddressSheetRef}\n          onContinue={handleExecuteRoute}\n          toAddress={toAddress!}\n          toChainId={route.toChainId!}\n        />\n      ) : null}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,qBAAuD,EAClE,OACA,cACA,sBACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,UAAU,gBAAgB;CAChC,MAAM,gBAAgB,gBAAgB,UAAU,MAAM,aAAa;CACnE,MAAM,EAAE,MAAM,aAAa,UAAU,cAAc,gBAAgB;CAEnE,MAAM,2BAA2B,OAAwB,IAAI;CAC7D,MAAM,2BAA2B,OAAwB,IAAI;CAE7D,MAAM,EACJ,WACA,aACA,WAAW,0BACX,WAAW,6BACT,mBAAmB,MAAM,SAAS;CAEtC,MAAM,2BAA2B;EAC/B,IAAI,yBAAyB,SAAS,OAAO,GAAG;GAC9C,MAAM,EAAE,YAAY,eAAe,gCAAgC,KAAK;GACxE,MAAM,gBAAgB,OAAO,WAAW,MAAM,aAAa;GAC3D,MAAM,cAAc,OAAO,WAAW,MAAM,WAAW;GACvD,QAAQ,KAAA,sBAAqC;IAC3C;IACA;IACA;IACA;IACA,WAAW,6BACT,eACA,aACA,YACA,UACF;GACF,CAAC;EACH;EACA,yBAAyB,SAAS,MAAM;EACxC,aAAa;EACb,cAAc,cAAc,EAAE;EAC9B,IAAI,SAAS,UAAU;GACrB,cAAc,aAAa,EAAE;GAC7B,cAAc,WAAW,EAAE;EAC7B;EACA,oBAAoB;GAClB,SAAS;IAAE,IAAI,iBAAiB;IAAM,SAAS;GAAK,CAAC;EACvD,CAAC;CACH;CAEA,MAAM,yBAAyB;EAC7B,IACE,aACA,CAAC,eACD,CAAC,4BACD,4BACA,CAAC,UAAU,gCACX;GACA,yBAAyB,SAAS,KAAK;GACvC;EACF;EAEA,MAAM,EAAE,YAAY,eAAe,gCAAgC,KAAK;EASxE,IANwC,2BAFlB,OAAO,WAAW,MAAM,aAGhC,GAFM,OAAO,WAAW,MAAM,WAGhC,GACV,YACA,UAEgC,KAAK,SAAS,UAC9C,yBAAyB,SAAS,KAAK;OAEvC,mBAAmB;CAEvB;CAEA,MAAM,sBAA8B;EAClC,QAAQ,MAAR;GACE,KAAK,UACH,OAAO,aAAa,QAAQ,SAAS,YACjC,EAAE,gBAAgB,IAClB,EAAE,YAAY;GACpB,KAAK,UACH,OAAO,EAAE,sBAAsB;GACjC,SAGE,OAAO,EAAE,eADP,MAAM,gBAAgB,MAAM,YAAY,aAAa,YACd;EAE7C;CACF;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA;EACE,oBAACA,QAAD;GAAM,MAAK;GAAU,UAAA;aACnB,oBAAC,aAAD;IACS;IACP,gBAAA;IACA,iBAAiB,WAAW;GAC7B,CAAA;EACG,CAAA;EACN,oBAAC,iBAAD;GAAiB,IAAI,EAAE,IAAI,EAAE;GAAU;GAAO,kBAAA;EAAkB,CAAA;EAChE,oBAAC,KAAD;GAAK,IAAI,EAAE,MAAM,EAAE;aACjB,oBAAC,wBAAD;IACE,MAAM,cAAc;IACpB,SAAS;IACF;IACP,SAAS,mBAAmB;GAC7B,CAAA;EACE,CAAA;EACJ,SAAS,WACR,oBAAC,uBAAD;GACS;GACP,KAAK;GACL,YAAY;EACb,CAAA,IACC;EACH,CAAC,UAAU,iCACV,oBAAC,uBAAD;GACE,KAAK;GACL,YAAY;GACD;GACX,WAAW,MAAM;EAClB,CAAA,IACC;CACJ,EAAA,CAAA;AAEN"}

package/dist/esm/pages/TransactionPage/utils.js

@@ -0,0 +1,12 @@
+//#region src/pages/TransactionPage/utils.ts
+const calculateValueLossPercentage = (fromAmountUSD, toAmountUSD, gasCostUSD, feeCostUSD) => {
+	return Number.parseFloat(((toAmountUSD / (fromAmountUSD + gasCostUSD + feeCostUSD) - 1) * 100).toFixed(2));
+};
+const getTokenValueLossThreshold = (fromAmountUSD, toAmountUSD, gasCostUSD, feeCostUSD) => {
+	if (!fromAmountUSD || !toAmountUSD) return false;
+	return toAmountUSD / (fromAmountUSD + gasCostUSD + feeCostUSD) < .9;
+};
+//#endregion
+export { calculateValueLossPercentage, getTokenValueLossThreshold };
+
+//# sourceMappingURL=utils.js.map

package/dist/esm/pages/TransactionPage/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/pages/TransactionPage/utils.ts"],"sourcesContent":["export const calculateValueLossPercentage = (\n  fromAmountUSD: number,\n  toAmountUSD: number,\n  gasCostUSD: number,\n  feeCostUSD: number\n): number => {\n  return Number.parseFloat(\n    (\n      (toAmountUSD / (fromAmountUSD + gasCostUSD + feeCostUSD) - 1) *\n      100\n    ).toFixed(2)\n  )\n}\n\nexport const getTokenValueLossThreshold = (\n  fromAmountUSD: number,\n  toAmountUSD: number,\n  gasCostUSD: number,\n  feeCostUSD: number\n): boolean => {\n  if (!fromAmountUSD || !toAmountUSD) {\n    return false\n  }\n  return toAmountUSD / (fromAmountUSD + gasCostUSD + feeCostUSD) < 0.9\n}\n"],"mappings":";AAAA,MAAa,gCACX,eACA,aACA,YACA,eACW;CACX,OAAO,OAAO,aAET,eAAe,gBAAgB,aAAa,cAAc,KAC3D,KACA,QAAQ,CAAC,CACb;AACF;AAEA,MAAa,8BACX,eACA,aACA,YACA,eACY;CACZ,IAAI,CAAC,iBAAiB,CAAC,aACrB,OAAO;CAET,OAAO,eAAe,gBAAgB,aAAa,cAAc;AACnE"}

package/dist/esm/providers/I18nProvider/I18nProvider.js

@@ -0,0 +1,83 @@
+import { allLanguages } from "./constants.js";
+import { mergeWithLanguageResources } from "./i18n.js";
+import { useSettingsStore } from "../../stores/settings/SettingsStore.js";
+import { useWidgetConfig } from "../WidgetProvider/WidgetProvider.js";
+import { useSettings } from "../../stores/settings/useSettings.js";
+import { useLanguages } from "../../hooks/useLanguages.js";
+import { compactNumberFormatter } from "../../utils/compactNumberFormatter.js";
+import { currencyExtendedFormatter } from "../../utils/currencyExtendedFormatter.js";
+import { percentFormatter } from "../../utils/percentFormatter.js";
+import { en } from "./enResource.js";
+import { useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { I18nextProvider } from "react-i18next";
+import { createInstance } from "i18next";
+//#region src/providers/I18nProvider/I18nProvider.tsx
+const I18nProvider = ({ children }) => {
+	const { languages, languageResources } = useWidgetConfig();
+	const { language, languageCache } = useSettings(["language", "languageCache"]);
+	const i18nInstanceRef = useRef(null);
+	return /* @__PURE__ */ jsxs(I18nextProvider, {
+		i18n: useMemo(() => {
+			if (i18nInstanceRef.current) {
+				if (language && languageCache && language !== "en") i18nInstanceRef.current.addResourceBundle(language, "translation", languageCache, true, true);
+				return i18nInstanceRef.current;
+			}
+			const customLanguageKeys = languageResources ? Object.keys(languageResources).filter((key) => !allLanguages.includes(key)) : [];
+			const initialLanguage = language || languages?.default;
+			const i18n = createInstance({
+				lng: initialLanguage,
+				fallbackLng: "en",
+				lowerCaseLng: true,
+				interpolation: { escapeValue: false },
+				resources: {
+					en: { translation: mergeWithLanguageResources(en, languageResources?.en) },
+					...initialLanguage && initialLanguage !== "en" && languageCache && { [initialLanguage]: { translation: languageCache } },
+					...customLanguageKeys.reduce((acc, key) => {
+						const customResource = languageResources?.[key];
+						if (customResource) acc[key] = { translation: customResource };
+						return acc;
+					}, {})
+				},
+				detection: { caches: [] },
+				returnEmptyString: false
+			});
+			i18n.init();
+			i18n.services.formatter?.addCached("numberExt", compactNumberFormatter);
+			i18n.services.formatter?.addCached("currencyExt", currencyExtendedFormatter);
+			i18n.services.formatter?.addCached("percent", percentFormatter);
+			i18nInstanceRef.current = i18n;
+			return i18n;
+		}, [
+			language,
+			languageResources,
+			languages?.default,
+			languageCache
+		]),
+		children: [children, /* @__PURE__ */ jsx(DefaultLanguageHandler, {})]
+	});
+};
+const DefaultLanguageHandler = () => {
+	const { languages } = useWidgetConfig();
+	const [lastDefaultLanguage, setValue] = useSettingsStore((state) => [state.lastDefaultLanguage, state.setValue]);
+	const { setLanguageWithCode: setLanguage } = useLanguages();
+	useEffect(() => {
+		const currentDefaultLanguage = languages?.default;
+		if (!(currentDefaultLanguage && currentDefaultLanguage !== lastDefaultLanguage)) return;
+		const updateLanguage = async () => {
+			await setLanguage(currentDefaultLanguage);
+			setValue("lastDefaultLanguage", currentDefaultLanguage);
+		};
+		updateLanguage();
+	}, [
+		languages?.default,
+		setValue,
+		lastDefaultLanguage,
+		setLanguage
+	]);
+	return null;
+};
+//#endregion
+export { I18nProvider };
+
+//# sourceMappingURL=I18nProvider.js.map

package/dist/esm/providers/I18nProvider/I18nProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"I18nProvider.js","names":["enResource"],"sources":["../../../../src/providers/I18nProvider/I18nProvider.tsx"],"sourcesContent":["import { createInstance, type i18n } from 'i18next'\nimport { useEffect, useMemo, useRef } from 'react'\nimport { I18nextProvider } from 'react-i18next'\nimport { useLanguages } from '../../hooks/useLanguages.js'\nimport { useSettingsStore } from '../../stores/settings/SettingsStore.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { compactNumberFormatter } from '../../utils/compactNumberFormatter.js'\nimport { currencyExtendedFormatter } from '../../utils/currencyExtendedFormatter.js'\nimport { percentFormatter } from '../../utils/percentFormatter.js'\nimport { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'\nimport { allLanguages } from './constants.js'\nimport { enResource } from './enResource.js'\nimport { mergeWithLanguageResources } from './i18n.js'\nimport type { LanguageKey, LanguageResource, PartialResource } from './types.js'\n\nexport const I18nProvider: React.FC<React.PropsWithChildren> = ({\n  children,\n}) => {\n  const { languages, languageResources } = useWidgetConfig()\n  const { language, languageCache } = useSettings(['language', 'languageCache'])\n  const i18nInstanceRef = useRef<i18n | null>(null)\n\n  const i18nInstance = useMemo(() => {\n    if (i18nInstanceRef.current) {\n      // Update i18n instance with language and language cache updates\n      if (language && languageCache && language !== 'en') {\n        i18nInstanceRef.current.addResourceBundle(\n          language,\n          'translation',\n          languageCache,\n          true,\n          true\n        )\n      }\n      return i18nInstanceRef.current\n    }\n\n    // Custom language resources (of non-default languages) are added statically.\n    // If custom language resources extend existing languages, they are merged with dynamically loaded resources.\n    const customLanguageKeys = languageResources\n      ? Object.keys(languageResources).filter(\n          (key: string) => !allLanguages.includes(key as LanguageKey)\n        )\n      : []\n    const initialLanguage = language || languages?.default\n    const i18n = createInstance({\n      lng: initialLanguage,\n      fallbackLng: 'en',\n      lowerCaseLng: true,\n      interpolation: { escapeValue: false },\n      resources: {\n        en: {\n          translation: mergeWithLanguageResources(\n            enResource,\n            languageResources?.en\n          ),\n        },\n        ...(initialLanguage &&\n          initialLanguage !== 'en' &&\n          languageCache && {\n            [initialLanguage]: {\n              translation: languageCache,\n            },\n          }),\n        // Add non-existing custom language resources\n        ...customLanguageKeys.reduce(\n          (acc, key) => {\n            const customResource = languageResources?.[key as LanguageKey]\n            if (customResource) {\n              acc[key] = {\n                translation: customResource,\n              }\n            }\n            return acc\n          },\n          {} as Record<\n            string,\n            { translation: PartialResource<LanguageResource> }\n          >\n        ),\n      },\n      detection: {\n        caches: [],\n      },\n      returnEmptyString: false,\n    })\n\n    i18n.init()\n\n    i18n.services.formatter?.addCached('numberExt', compactNumberFormatter)\n    i18n.services.formatter?.addCached('currencyExt', currencyExtendedFormatter)\n    i18n.services.formatter?.addCached('percent', percentFormatter)\n    i18nInstanceRef.current = i18n\n    return i18n\n  }, [language, languageResources, languages?.default, languageCache])\n\n  return (\n    <I18nextProvider i18n={i18nInstance}>\n      {children}\n      <DefaultLanguageHandler />\n    </I18nextProvider>\n  )\n}\n\n// Sync language settings internally when config.languages.default changes externally\nconst DefaultLanguageHandler: React.FC = () => {\n  const { languages } = useWidgetConfig()\n  const [lastDefaultLanguage, setValue] = useSettingsStore((state) => [\n    state.lastDefaultLanguage,\n    state.setValue,\n  ])\n  const { setLanguageWithCode: setLanguage } = useLanguages()\n\n  useEffect(() => {\n    const currentDefaultLanguage = languages?.default\n\n    const defaultLanguageChanged =\n      currentDefaultLanguage && currentDefaultLanguage !== lastDefaultLanguage\n\n    if (!defaultLanguageChanged) {\n      return\n    }\n\n    const updateLanguage = async () => {\n      await setLanguage(currentDefaultLanguage)\n      setValue('lastDefaultLanguage', currentDefaultLanguage)\n    }\n\n    updateLanguage()\n  }, [languages?.default, setValue, lastDefaultLanguage, setLanguage])\n\n  return null\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAa,gBAAmD,EAC9D,eACI;CACJ,MAAM,EAAE,WAAW,sBAAsB,gBAAgB;CACzD,MAAM,EAAE,UAAU,kBAAkB,YAAY,CAAC,YAAY,eAAe,CAAC;CAC7E,MAAM,kBAAkB,OAAoB,IAAI;CA4EhD,OACE,qBAAC,iBAAD;EAAiB,MA3EE,cAAc;GACjC,IAAI,gBAAgB,SAAS;IAE3B,IAAI,YAAY,iBAAiB,aAAa,MAC5C,gBAAgB,QAAQ,kBACtB,UACA,eACA,eACA,MACA,IACF;IAEF,OAAO,gBAAgB;GACzB;GAIA,MAAM,qBAAqB,oBACvB,OAAO,KAAK,iBAAiB,EAAE,QAC5B,QAAgB,CAAC,aAAa,SAAS,GAAkB,CAC5D,IACA,CAAC;GACL,MAAM,kBAAkB,YAAY,WAAW;GAC/C,MAAM,OAAO,eAAe;IAC1B,KAAK;IACL,aAAa;IACb,cAAc;IACd,eAAe,EAAE,aAAa,MAAM;IACpC,WAAW;KACT,IAAI,EACF,aAAa,2BACXA,IACA,mBAAmB,EACrB,EACF;KACA,GAAI,mBACF,oBAAoB,QACpB,iBAAiB,GACd,kBAAkB,EACjB,aAAa,cACf,EACF;KAEF,GAAG,mBAAmB,QACnB,KAAK,QAAQ;MACZ,MAAM,iBAAiB,oBAAoB;MAC3C,IAAI,gBACF,IAAI,OAAO,EACT,aAAa,eACf;MAEF,OAAO;KACT,GACA,CAAC,CAIH;IACF;IACA,WAAW,EACT,QAAQ,CAAC,EACX;IACA,mBAAmB;GACrB,CAAC;GAED,KAAK,KAAK;GAEV,KAAK,SAAS,WAAW,UAAU,aAAa,sBAAsB;GACtE,KAAK,SAAS,WAAW,UAAU,eAAe,yBAAyB;GAC3E,KAAK,SAAS,WAAW,UAAU,WAAW,gBAAgB;GAC9D,gBAAgB,UAAU;GAC1B,OAAO;EACT,GAAG;GAAC;GAAU;GAAmB,WAAW;GAAS;EAAa,CAG9B;YAAlC,CACG,UACD,oBAAC,wBAAD,CAAyB,CAAA,CACV;;AAErB;AAGA,MAAM,+BAAyC;CAC7C,MAAM,EAAE,cAAc,gBAAgB;CACtC,MAAM,CAAC,qBAAqB,YAAY,kBAAkB,UAAU,CAClE,MAAM,qBACN,MAAM,QACR,CAAC;CACD,MAAM,EAAE,qBAAqB,gBAAgB,aAAa;CAE1D,gBAAgB;EACd,MAAM,yBAAyB,WAAW;EAK1C,IAAI,EAFF,0BAA0B,2BAA2B,sBAGrD;EAGF,MAAM,iBAAiB,YAAY;GACjC,MAAM,YAAY,sBAAsB;GACxC,SAAS,uBAAuB,sBAAsB;EACxD;EAEA,eAAe;CACjB,GAAG;EAAC,WAAW;EAAS;EAAU;EAAqB;CAAW,CAAC;CAEnE,OAAO;AACT"}

package/dist/esm/providers/I18nProvider/constants.js

@@ -0,0 +1,43 @@
+//#region src/providers/I18nProvider/constants.ts
+const allLanguages = [
+	"en",
+	"es",
+	"fr",
+	"de",
+	"it",
+	"pt",
+	"ja",
+	"ko",
+	"zh",
+	"hi",
+	"bn",
+	"th",
+	"vi",
+	"tr",
+	"uk",
+	"id",
+	"pl"
+];
+const languageNames = {
+	en: "English",
+	es: "Español",
+	fr: "Français",
+	de: "Deutsch",
+	it: "Italiano",
+	pt: "Português",
+	ja: "日本語",
+	ko: "한국어",
+	zh: "中文",
+	hi: "हिन्दी",
+	bn: "বাংলা",
+	th: "ไทย",
+	vi: "Tiếng Việt",
+	tr: "Türkçe",
+	uk: "Українська",
+	id: "Bahasa Indonesia",
+	pl: "Polski"
+};
+//#endregion
+export { allLanguages, languageNames };
+
+//# sourceMappingURL=constants.js.map

package/dist/esm/providers/I18nProvider/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":[],"sources":["../../../../src/providers/I18nProvider/constants.ts"],"sourcesContent":["import type { LanguageKey } from './types.js'\n\nexport const allLanguages: LanguageKey[] = [\n  'en',\n  'es',\n  'fr',\n  'de',\n  'it',\n  'pt',\n  'ja',\n  'ko',\n  'zh',\n  'hi',\n  'bn',\n  'th',\n  'vi',\n  'tr',\n  'uk',\n  'id',\n  'pl',\n]\n\nexport const languageNames: Record<LanguageKey, string> = {\n  en: 'English',\n  es: 'Español',\n  fr: 'Français',\n  de: 'Deutsch',\n  it: 'Italiano',\n  pt: 'Português',\n  ja: '日本語',\n  ko: '한국어',\n  zh: '中文',\n  hi: 'हिन्दी',\n  bn: 'বাংলা',\n  th: 'ไทย',\n  vi: 'Tiếng Việt',\n  tr: 'Türkçe',\n  uk: 'Українська',\n  id: 'Bahasa Indonesia',\n  pl: 'Polski',\n}\n"],"mappings":";AAEA,MAAa,eAA8B;CACzC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAa,gBAA6C;CACxD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN"}

package/dist/esm/providers/I18nProvider/enResource.d.ts

@@ -0,0 +1,2 @@
+import en from "../../i18n/en.json" with { type: "json" };
+export { en };

package/dist/esm/providers/I18nProvider/enResource.js

@@ -0,0 +1,2 @@
+import en from "../../i18n/en.json" with { type: "json" };
+export { en };

package/dist/esm/providers/I18nProvider/i18n.js

@@ -0,0 +1,18 @@
+import { deepMerge } from "../../utils/deepMerge.js";
+//#region src/providers/I18nProvider/i18n.ts
+async function loadLocale(lng, customLanguageResource) {
+	let languageResource;
+	try {
+		languageResource = (await import(`../../i18n/${lng}.json`)).default;
+	} catch {
+		languageResource = {};
+	}
+	return mergeWithLanguageResources(languageResource, customLanguageResource);
+}
+function mergeWithLanguageResources(languageResource, customLanguageResource) {
+	return customLanguageResource ? deepMerge(languageResource, customLanguageResource) : languageResource;
+}
+//#endregion
+export { loadLocale, mergeWithLanguageResources };
+
+//# sourceMappingURL=i18n.js.map

package/dist/esm/providers/I18nProvider/i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.js","names":[],"sources":["../../../../src/providers/I18nProvider/i18n.ts"],"sourcesContent":["import { deepMerge } from '../../utils/deepMerge.js'\nimport type { LanguageKey, LanguageResource, PartialResource } from './types.js'\n\n// Dynamically import the JSON file for the specified language\nexport async function loadLocale(\n  lng: LanguageKey,\n  customLanguageResource?: PartialResource<LanguageResource>\n): Promise<LanguageResource> {\n  let languageResource: LanguageResource\n  try {\n    const languageResourceModule = await import(`../../i18n/${lng}.json`)\n    languageResource = languageResourceModule.default as LanguageResource\n  } catch {\n    languageResource = {} as LanguageResource\n  }\n  return mergeWithLanguageResources(languageResource, customLanguageResource)\n}\n\nexport function mergeWithLanguageResources(\n  languageResource: LanguageResource,\n  customLanguageResource?: PartialResource<LanguageResource>\n): LanguageResource {\n  return customLanguageResource\n    ? deepMerge(languageResource, customLanguageResource)\n    : languageResource\n}\n"],"mappings":";;AAIA,eAAsB,WACpB,KACA,wBAC2B;CAC3B,IAAI;CACJ,IAAI;EAEF,oBAAmB,MADkB,OAAO,cAAc,IAAI,SACpB;CAC5C,QAAQ;EACN,mBAAmB,CAAC;CACtB;CACA,OAAO,2BAA2B,kBAAkB,sBAAsB;AAC5E;AAEA,SAAgB,2BACd,kBACA,wBACkB;CAClB,OAAO,yBACH,UAAU,kBAAkB,sBAAsB,IAClD;AACN"}

package/dist/esm/providers/I18nProvider/types.d.ts

@@ -0,0 +1,12 @@
+import { en } from "./enResource.js";
+
+//#region src/providers/I18nProvider/types.d.ts
+type PartialResource<T> = T extends object ? { [P in keyof T]?: PartialResource<T[P]> } : T;
+type LanguageKey = "en" | "es" | "fr" | "de" | "it" | "pt" | "ja" | "ko" | "zh" | "hi" | "bn" | "th" | "vi" | "tr" | "uk" | "id" | "pl";
+type LanguageResource = typeof en;
+type LanguageResources = { [K in LanguageKey]?: PartialResource<LanguageResource> } | {
+  [language: string]: PartialResource<LanguageResource>;
+};
+//#endregion
+export { LanguageKey, LanguageResource, LanguageResources };
+//# sourceMappingURL=types.d.ts.map