npm - @lifi/widget - Versions diffs - 4.0.0-beta.14 → 4.0.0-beta.17 - Mend

@lifi/widget 4.0.0-beta.14 → 4.0.0-beta.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (206) hide show

package/dist/esm/pages/TransactionPage/ExchangeRateBottomSheet.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExchangeRateBottomSheet.js","names":[],"sources":["../../../../src/pages/TransactionPage/ExchangeRateBottomSheet.tsx"],"sourcesContent":["import type { ExchangeRateUpdateParams } from '@lifi/sdk'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Button, Typography } from '@mui/material'\nimport type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'\nimport {\n forwardRef,\n useCallback,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport { formatTokenAmount } from '../../utils/format.js'\nimport { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'\n\nexport interface ExchangeRateBottomSheetBase {\n isOpen(): void\n open(resolver: (value: boolean) => void, data: ExchangeRateUpdateParams): void\n close(value?: boolean, bottomSheetClose?: boolean): void\n}\n\ninterface ExchangeRateBottomSheetProps {\n data?: ExchangeRateUpdateParams\n onContinue?(): void\n onCancel?(): void\n}\n\nexport const ExchangeRateBottomSheet: ForwardRefExoticComponent<\n ExchangeRateBottomSheetProps & RefAttributes<ExchangeRateBottomSheetBase>\n> = forwardRef<ExchangeRateBottomSheetBase, ExchangeRateBottomSheetProps>(\n ({ onContinue, onCancel }, ref) => {\n const [data, setData] = useState<ExchangeRateUpdateParams>()\n const bottomSheetRef = useRef<BottomSheetBase>(null)\n const resolverRef = useRef<(value: boolean) => void>(null)\n\n const handleContinue = () => {\n ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(true)\n onContinue?.()\n }\n\n const handleCancel = useCallback(() => {\n ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(false)\n onCancel?.()\n }, [onCancel, ref])\n\n const handleClose = useCallback(() => {\n ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(\n false,\n false\n )\n onCancel?.()\n }, [onCancel, ref])\n\n useImperativeHandle(\n ref,\n () => ({\n isOpen: () => bottomSheetRef.current?.isOpen(),\n open: (resolver, data) => {\n setData(data)\n resolverRef.current = resolver\n bottomSheetRef.current?.open()\n },\n close: (value = false, bottomSheetClose = true) => {\n resolverRef.current?.(value)\n if (bottomSheetClose) {\n bottomSheetRef.current?.close()\n }\n },\n }),\n []\n )\n\n return (\n <BottomSheet ref={bottomSheetRef} onClose={handleClose}>\n <ExchangeRateBottomSheetContent\n data={data}\n onContinue={handleContinue}\n onCancel={handleCancel}\n />\n </BottomSheet>\n )\n }\n)\n\nconst ExchangeRateBottomSheetContent: React.FC<\n ExchangeRateBottomSheetProps\n> = ({ data, onCancel, onContinue }) => {\n const { t } = useTranslation()\n const ref = useRef<HTMLElement>(null)\n useSetContentHeight(ref)\n\n if (!data) {\n return\n }\n\n const oldAmount = BigInt(data.oldToAmount \|\| 1)\n const rateChange = (\n (Number((BigInt(data.newToAmount \|\| 0) * 1_000_000n) / oldAmount) /\n 1_000_000) *\n 100 -\n 100\n ).toFixed(2)\n\n return (\n <Box\n ref={ref}\n sx={{\n p: 3,\n }}\n >\n <CenterContainer>\n <IconCircle status=\"warning\" mb={1}>\n <WarningRounded color=\"warning\" />\n </IconCircle>\n <Typography\n sx={{\n py: 1,\n fontSize: 18,\n fontWeight: 700,\n }}\n >\n {t('warning.title.rateChanged')}\n </Typography>\n </CenterContainer>\n <Typography\n sx={{\n py: 1,\n }}\n >\n {t('warning.message.rateChanged')}\n </Typography>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mt: 1,\n }}\n >\n <Typography>{t('main.quotedAmount')}</Typography>\n <Typography\n sx={{\n fontWeight: 600,\n }}\n >\n {t('format.tokenAmount', {\n value: formatTokenAmount(\n BigInt(data.oldToAmount),\n data.toToken.decimals\n ),\n })}{' '}\n {data?.toToken.symbol}\n </Typography>\n </Box>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mt: 0.25,\n }}\n >\n <Typography>{t('main.currentAmount')}</Typography>\n <Typography\n sx={{\n fontWeight: 600,\n }}\n >\n {t('format.tokenAmount', {\n value: formatTokenAmount(\n BigInt(data?.newToAmount),\n data?.toToken.decimals\n ),\n })}{' '}\n {data?.toToken.symbol}\n </Typography>\n </Box>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mt: 0.25,\n }}\n >\n <Typography>{t('main.rateChange')}</Typography>\n <Typography\n sx={{\n fontWeight: 600,\n }}\n >\n {rateChange}%\n </Typography>\n </Box>\n <Box\n sx={{\n display: 'flex',\n mt: 3,\n }}\n >\n <Button variant=\"text\" onClick={onCancel} fullWidth>\n {t('button.cancel')}\n </Button>\n <Box\n sx={{\n display: 'flex',\n p: 1,\n }}\n />\n <Button variant=\"contained\" onClick={onContinue} fullWidth>\n {t('button.continue')}\n </Button>\n </Box>\n </Box>\n )\n}\n"],"mappings":";;;;;;;;;;AA8BA,MAAa,0BAET,YACD,EAAE,YAAY,YAAY,QAAQ;CACjC,MAAM,CAAC,MAAM,WAAW,UAAoC;CAC5D,MAAM,iBAAiB,OAAwB,KAAK;CACpD,MAAM,cAAc,OAAiC,KAAK;CAE1D,MAAM,uBAAuB;AACzB,MAA+C,SAAS,MAAM,KAAK;AACrE,gBAAc;;CAGhB,MAAM,eAAe,kBAAkB;AACnC,MAA+C,SAAS,MAAM,MAAM;AACtE,cAAY;IACX,CAAC,UAAU,IAAI,CAAC;CAEnB,MAAM,cAAc,kBAAkB;AAClC,MAA+C,SAAS,MACxD,OACA,MACD;AACD,cAAY;IACX,CAAC,UAAU,IAAI,CAAC;AAEnB,qBACE,YACO;EACL,cAAc,eAAe,SAAS,QAAQ;EAC9C,OAAO,UAAU,SAAS;AACxB,WAAQ,KAAK;AACb,eAAY,UAAU;AACtB,kBAAe,SAAS,MAAM;;EAEhC,QAAQ,QAAQ,OAAO,mBAAmB,SAAS;AACjD,eAAY,UAAU,MAAM;AAC5B,OAAI,iBACF,gBAAe,SAAS,OAAO;;EAGpC,GACD,EAAE,CACH;AAED,QACE,oBAAC,aAAD;EAAa,KAAK;EAAgB,SAAS;YACzC,oBAAC,gCAAD;GACQ;GACN,YAAY;GACZ,UAAU;GACV,CAAA;EACU,CAAA;EAGnB;AAED,MAAM,kCAED,EAAE,MAAM,UAAU,iBAAiB;CACtC,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,MAAM,OAAoB,KAAK;AACrC,qBAAoB,IAAI;AAExB,KAAI,CAAC,KACH;CAGF,MAAM,YAAY,OAAO,KAAK,eAAe,EAAE;CAC/C,MAAM,cACH,OAAQ,OAAO,KAAK,eAAe,EAAE,GAAG,WAAc,UAAU,GAC/D,MACA,MACF,KACA,QAAQ,EAAE;AAEZ,QACE,qBAAC,KAAD;EACO;EACL,IAAI,EACF,GAAG,GACJ;YAJH;GAME,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,YAAD;IAAY,QAAO;IAAU,IAAI;~~cAC/B~~,oBAAC,gBAAD,EAAgB,OAAM,WAAY,CAAA;IACvB,CAAA,EACb,oBAAC,YAAD;IACE,IAAI;KACF,IAAI;KACJ,UAAU;KACV,YAAY;KACb;cAEA,EAAE,4BAA4B;IACpB,CAAA,CACG,EAAA,CAAA;GAClB,oBAAC,YAAD;IACE,IAAI,EACF,IAAI,GACL;cAEA,EAAE,8BAA8B;IACtB,CAAA;GACb,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,gBAAgB;KAChB,IAAI;KACL;cALH,CAOE,oBAAC,YAAD,EAAA,UAAa,EAAE,oBAAoB,EAAc,CAAA,EACjD,qBAAC,YAAD;KACE,IAAI,EACF,YAAY,KACb;eAHH;MAKG,EAAE,sBAAsB,EACvB,OAAO,kBACL,OAAO,KAAK,YAAY,EACxB,KAAK,QAAQ,SACd,EACF,CAAC;MAAE;MACH,MAAM,QAAQ;MACJ;OACT;;GACN,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,gBAAgB;KAChB,IAAI;KACL;cALH,CAOE,oBAAC,YAAD,EAAA,UAAa,EAAE,qBAAqB,EAAc,CAAA,EAClD,qBAAC,YAAD;KACE,IAAI,EACF,YAAY,KACb;eAHH;MAKG,EAAE,sBAAsB,EACvB,OAAO,kBACL,OAAO,MAAM,YAAY,EACzB,MAAM,QAAQ,SACf,EACF,CAAC;MAAE;MACH,MAAM,QAAQ;MACJ;OACT;;GACN,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,gBAAgB;KAChB,IAAI;KACL;cALH,CAOE,oBAAC,YAAD,EAAA,UAAa,EAAE,kBAAkB,EAAc,CAAA,EAC/C,qBAAC,YAAD;KACE,IAAI,EACF,YAAY,KACb;eAHH,CAKG,YAAW,IACD;OACT;;GACN,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,IAAI;KACL;cAJH;KAME,oBAAC,QAAD;MAAQ,SAAQ;MAAO,SAAS;MAAU,WAAA;gBACvC,EAAE,gBAAgB;MACZ,CAAA;KACT,oBAAC,KAAD,EACE,IAAI;MACF,SAAS;MACT,GAAG;MACJ,EACD,CAAA;KACF,oBAAC,QAAD;MAAQ,SAAQ;MAAY,SAAS;MAAY,WAAA;gBAC9C,EAAE,kBAAkB;MACd,CAAA;KACL;;GACF"}
1	+ {"version":3,"file":"ExchangeRateBottomSheet.js","names":[],"sources":["../../../../src/pages/TransactionPage/ExchangeRateBottomSheet.tsx"],"sourcesContent":["import type { ExchangeRateUpdateParams } from '@lifi/sdk'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Button, Typography } from '@mui/material'\nimport type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'\nimport {\n forwardRef,\n useCallback,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport { formatTokenAmount } from '../../utils/format.js'\nimport { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'\n\nexport interface ExchangeRateBottomSheetBase {\n isOpen(): void\n open(resolver: (value: boolean) => void, data: ExchangeRateUpdateParams): void\n close(value?: boolean, bottomSheetClose?: boolean): void\n}\n\ninterface ExchangeRateBottomSheetProps {\n data?: ExchangeRateUpdateParams\n onContinue?(): void\n onCancel?(): void\n}\n\nexport const ExchangeRateBottomSheet: ForwardRefExoticComponent<\n ExchangeRateBottomSheetProps & RefAttributes<ExchangeRateBottomSheetBase>\n> = forwardRef<ExchangeRateBottomSheetBase, ExchangeRateBottomSheetProps>(\n ({ onContinue, onCancel }, ref) => {\n const [data, setData] = useState<ExchangeRateUpdateParams>()\n const bottomSheetRef = useRef<BottomSheetBase>(null)\n const resolverRef = useRef<(value: boolean) => void>(null)\n\n const handleContinue = () => {\n ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(true)\n onContinue?.()\n }\n\n const handleCancel = useCallback(() => {\n ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(false)\n onCancel?.()\n }, [onCancel, ref])\n\n const handleClose = useCallback(() => {\n ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(\n false,\n false\n )\n onCancel?.()\n }, [onCancel, ref])\n\n useImperativeHandle(\n ref,\n () => ({\n isOpen: () => bottomSheetRef.current?.isOpen(),\n open: (resolver, data) => {\n setData(data)\n resolverRef.current = resolver\n bottomSheetRef.current?.open()\n },\n close: (value = false, bottomSheetClose = true) => {\n resolverRef.current?.(value)\n if (bottomSheetClose) {\n bottomSheetRef.current?.close()\n }\n },\n }),\n []\n )\n\n return (\n <BottomSheet ref={bottomSheetRef} onClose={handleClose}>\n <ExchangeRateBottomSheetContent\n data={data}\n onContinue={handleContinue}\n onCancel={handleCancel}\n />\n </BottomSheet>\n )\n }\n)\n\nconst ExchangeRateBottomSheetContent: React.FC<\n ExchangeRateBottomSheetProps\n> = ({ data, onCancel, onContinue }) => {\n const { t } = useTranslation()\n const ref = useRef<HTMLElement>(null)\n useSetContentHeight(ref)\n\n if (!data) {\n return\n }\n\n const oldAmount = BigInt(data.oldToAmount \|\| 1)\n const rateChange = (\n (Number((BigInt(data.newToAmount \|\| 0) * 1_000_000n) / oldAmount) /\n 1_000_000) *\n 100 -\n 100\n ).toFixed(2)\n\n return (\n <Box\n ref={ref}\n sx={{\n p: 3,\n }}\n >\n <CenterContainer>\n <IconCircle status=\"warning\" sx={{ mb: 1 }}>\n <WarningRounded color=\"warning\" />\n </IconCircle>\n <Typography\n sx={{\n py: 1,\n fontSize: 18,\n fontWeight: 700,\n }}\n >\n {t('warning.title.rateChanged')}\n </Typography>\n </CenterContainer>\n <Typography\n sx={{\n py: 1,\n }}\n >\n {t('warning.message.rateChanged')}\n </Typography>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mt: 1,\n }}\n >\n <Typography>{t('main.quotedAmount')}</Typography>\n <Typography\n sx={{\n fontWeight: 600,\n }}\n >\n {t('format.tokenAmount', {\n value: formatTokenAmount(\n BigInt(data.oldToAmount),\n data.toToken.decimals\n ),\n })}{' '}\n {data?.toToken.symbol}\n </Typography>\n </Box>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mt: 0.25,\n }}\n >\n <Typography>{t('main.currentAmount')}</Typography>\n <Typography\n sx={{\n fontWeight: 600,\n }}\n >\n {t('format.tokenAmount', {\n value: formatTokenAmount(\n BigInt(data?.newToAmount),\n data?.toToken.decimals\n ),\n })}{' '}\n {data?.toToken.symbol}\n </Typography>\n </Box>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mt: 0.25,\n }}\n >\n <Typography>{t('main.rateChange')}</Typography>\n <Typography\n sx={{\n fontWeight: 600,\n }}\n >\n {rateChange}%\n </Typography>\n </Box>\n <Box\n sx={{\n display: 'flex',\n mt: 3,\n }}\n >\n <Button variant=\"text\" onClick={onCancel} fullWidth>\n {t('button.cancel')}\n </Button>\n <Box\n sx={{\n display: 'flex',\n p: 1,\n }}\n />\n <Button variant=\"contained\" onClick={onContinue} fullWidth>\n {t('button.continue')}\n </Button>\n </Box>\n </Box>\n )\n}\n"],"mappings":"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"}

package/dist/esm/pages/TransactionPage/StatusBottomSheet.js CHANGED Viewed

@@ -5,7 +5,6 @@ import { useFieldActions } from "../../stores/form/useFieldActions.js";
 import { formatTokenAmount } from "../../utils/format.js";
 import { Card as Card$1 } from "../../components/Card/Card.js";
 import { hasEnumFlag } from "../../utils/enum.js";
-import { RouteExecutionStatus } from "../../stores/routes/types.js";
 import { getSourceTxHash } from "../../stores/routes/utils.js";
 import { Token } from "../../components/Token/Token.js";
 import { getErrorMessage } from "../../utils/getErrorMessage.js";
@@ -29,8 +28,8 @@ const StatusBottomSheet = ({ status, route }) => {
 		ref.current?.close();
 	}, []);
 	useEffect(() => {
-		const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done);
-		const hasFailedFlag = hasEnumFlag(status, RouteExecutionStatus.Failed);
+		const hasSuccessFlag = hasEnumFlag(status, 4);
+		const hasFailedFlag = hasEnumFlag(status, 8);
 		if ((hasSuccessFlag || hasFailedFlag) && !ref.current?.isOpen()) ref.current?.open();
 	}, [status]);
 	return /* @__PURE__ */ jsx(BottomSheet, {
@@ -100,11 +99,11 @@ const StatusBottomSheetContent = ({ status, route, onClose }) => {
 	let failedMessage;
 	let handlePrimaryButton = handleDone;
 	switch (status) {
-		case RouteExecutionStatus.Done:
+		case 4:
 			title = subvariant === "custom" ? t(`success.title.${subvariantOptions?.custom ?? "checkout"}Successful`) : t(`success.title.${transactionType}Successful`);
 			handlePrimaryButton = handleDone;
 			break;
-		case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:
+		case 20:
 			title = t(`success.title.${transactionType}PartiallySuccessful`);
 			primaryMessage = t("success.message.exchangePartiallySuccessful", {
 				tool: route.steps.at(-1)?.toolDetails.name,
@@ -112,14 +111,14 @@ const StatusBottomSheetContent = ({ status, route, onClose }) => {
 			});
 			handlePrimaryButton = handlePartialDone;
 			break;
-		case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:
+		case 36:
 			title = t("success.title.refundIssued");
 			primaryMessage = t("success.message.exchangePartiallySuccessful", {
 				tool: route.steps.at(-1)?.toolDetails.name,
 				tokenSymbol: route.steps.at(-1)?.action.toToken.symbol
 			});
 			break;
-		case RouteExecutionStatus.Failed: {
+		case 8: {
 			const step = route.steps.find((step) => step.execution?.status === "FAILED");
 			if (!step) break;
 			const actionMessage = getErrorMessage(t, getChainById, step, step.execution?.actions?.find((action) => action.status === "FAILED") || {
@@ -134,20 +133,20 @@ const StatusBottomSheetContent = ({ status, route, onClose }) => {
 		}
 		default: break;
 	}
-	const showContractComponent = subvariant === "custom" && hasEnumFlag(status, RouteExecutionStatus.Done) && (contractCompactComponent || contractSecondaryComponent);
-	const VcComponent = status === RouteExecutionStatus.Done ? feeConfig?._vcComponent : void 0;
+	const showContractComponent = subvariant === "custom" && hasEnumFlag(status, 4) && (contractCompactComponent || contractSecondaryComponent);
+	const VcComponent = status === 4 ? feeConfig?._vcComponent : void 0;
 	return /* @__PURE__ */ jsxs(Box, {
 		ref,
 		sx: { p: 3 },
 		children: [
 			!showContractComponent ? /* @__PURE__ */ jsx(CenterContainer, { children: /* @__PURE__ */ jsxs(IconCircle, {
 				status,
-				mb: 1,
+				sx: { mb: 1 },
 				children: [
-					status === RouteExecutionStatus.Idle ? /* @__PURE__ */ jsx(InfoRounded, { color: "primary" }) : null,
-					status === RouteExecutionStatus.Done ? /* @__PURE__ */ jsx(Done, { color: "success" }) : null,
-					hasEnumFlag(status, RouteExecutionStatus.Partial) || hasEnumFlag(status, RouteExecutionStatus.Refunded) ? /* @__PURE__ */ jsx(WarningRounded, { color: "warning" }) : null,
-					hasEnumFlag(status, RouteExecutionStatus.Failed) ? /* @__PURE__ */ jsx(ErrorRounded, { color: "error" }) : null
+					status === 1 ? /* @__PURE__ */ jsx(InfoRounded, { color: "primary" }) : null,
+					status === 4 ? /* @__PURE__ */ jsx(Done, { color: "success" }) : null,
+					hasEnumFlag(status, 16) || hasEnumFlag(status, 32) ? /* @__PURE__ */ jsx(WarningRounded, { color: "warning" }) : null,
+					hasEnumFlag(status, 8) ? /* @__PURE__ */ jsx(ErrorRounded, { color: "error" }) : null
 				]
 			}) }) : null,
 			/* @__PURE__ */ jsx(CenterContainer, { children: /* @__PURE__ */ jsx(Typography, {
@@ -158,10 +157,10 @@ const StatusBottomSheetContent = ({ status, route, onClose }) => {
 				},
 				children: title
 			}) }),
-			showContractComponent ? contractCompactComponent || contractSecondaryComponent : hasEnumFlag(status, RouteExecutionStatus.Failed) && failedMessage ? /* @__PURE__ */ jsx(Typography, {
+			showContractComponent ? contractCompactComponent || contractSecondaryComponent : hasEnumFlag(status, 8) && failedMessage ? /* @__PURE__ */ jsx(Typography, {
 				sx: { py: 1 },
 				children: failedMessage
-			}) : hasEnumFlag(status, RouteExecutionStatus.Done) ? /* @__PURE__ */ jsxs(Box, {
+			}) : hasEnumFlag(status, 4) ? /* @__PURE__ */ jsxs(Box, {
 				sx: {
 					display: "flex",
 					flexDirection: "column",
@@ -179,7 +178,7 @@ const StatusBottomSheetContent = ({ status, route, onClose }) => {
 					children: [
 						/* @__PURE__ */ jsx(CardTitle, {
 							sx: { padding: 0 },
-							children: hasEnumFlag(status, RouteExecutionStatus.Refunded) ? t("header.refunded") : t("header.received")
+							children: hasEnumFlag(status, 32) ? t("header.refunded") : t("header.received")
 						}),
 						/* @__PURE__ */ jsx(Token, {
 							token: toToken,
@@ -203,7 +202,7 @@ const StatusBottomSheetContent = ({ status, route, onClose }) => {
 					marginTop: 2,
 					gap: 1.5
 				},
-				children: [hasEnumFlag(status, RouteExecutionStatus.Done) ? /* @__PURE__ */ jsx(Button, {
+				children: [hasEnumFlag(status, 4) ? /* @__PURE__ */ jsx(Button, {
 					variant: "text",
 					onClick: handleSeeDetails,
 					fullWidth: true,
@@ -213,9 +212,9 @@ const StatusBottomSheetContent = ({ status, route, onClose }) => {
 					fullWidth: true,
 					onClick: handlePrimaryButton,
 					children: [
-						status === RouteExecutionStatus.Idle ? t("button.ok") : null,
-						hasEnumFlag(status, RouteExecutionStatus.Done) ? t("button.done") : null,
-						status === RouteExecutionStatus.Failed ? t("button.seeDetails") : null
+						status === 1 ? t("button.ok") : null,
+						hasEnumFlag(status, 4) ? t("button.done") : null,
+						status === 8 ? t("button.seeDetails") : null
 					]
 				})]
 			})

package/dist/esm/pages/TransactionPage/StatusBottomSheet.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StatusBottomSheet.js","names":["Card"],"sources":["../../../../src/pages/TransactionPage/StatusBottomSheet.tsx"],"sourcesContent":["import type { ExecutionActionType } from '@lifi/sdk'\nimport Done from '@mui/icons-material/Done'\nimport ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport InfoRounded from '@mui/icons-material/InfoRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Button, Typography } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useCallback, useEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { Card } from '../../components/Card/Card.js'\nimport { CardTitle } from '../../components/Card/CardTitle.js'\nimport { Token } from '../../components/Token/Token.js'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport {\n type RouteExecution,\n RouteExecutionStatus,\n} from '../../stores/routes/types.js'\nimport { getSourceTxHash } from '../../stores/routes/utils.js'\nimport { hasEnumFlag } from '../../utils/enum.js'\nimport { formatTokenAmount } from '../../utils/format.js'\nimport { getErrorMessage } from '../../utils/getErrorMessage.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'\n\ninterface StatusBottomSheetContentProps extends RouteExecution {\n onClose(): void\n}\n\nexport const StatusBottomSheet: React.FC<RouteExecution> = ({\n status,\n route,\n}) => {\n const ref = useRef<BottomSheetBase>(null)\n\n const onClose = useCallback(() => {\n ref.current?.close()\n }, [])\n\n useEffect(() => {\n const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done)\n const hasFailedFlag = hasEnumFlag(status, RouteExecutionStatus.Failed)\n if ((hasSuccessFlag \|\| hasFailedFlag) && !ref.current?.isOpen()) {\n ref.current?.open()\n }\n }, [status])\n\n return (\n <BottomSheet ref={ref}>\n <StatusBottomSheetContent\n status={status}\n route={route}\n onClose={onClose}\n />\n </BottomSheet>\n )\n}\n\nconst StatusBottomSheetContent: React.FC<StatusBottomSheetContentProps> = ({\n status,\n route,\n onClose,\n}) => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const { setFieldValue } = useFieldActions()\n const {\n subvariant,\n subvariantOptions,\n contractSecondaryComponent,\n contractCompactComponent,\n feeConfig,\n } = useWidgetConfig()\n const { getChainById } = useAvailableChains()\n\n const ref = useRef<HTMLElement>(null)\n useSetContentHeight(ref)\n\n const toToken = {\n ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),\n amount: BigInt(\n route.steps.at(-1)?.execution?.toAmount ??\n route.steps.at(-1)?.estimate.toAmount ??\n route.toAmount\n ),\n }\n\n const cleanFields = () => {\n setFieldValue('fromAmount', '')\n setFieldValue('toAmount', '')\n }\n\n const handleDone = () => {\n cleanFields()\n navigate({ to: navigationRoutes.home, replace: true })\n }\n\n const handlePartialDone = () => {\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 cleanFields()\n }\n navigate({ to: navigationRoutes.home, replace: true })\n }\n\n const handleClose = () => {\n cleanFields()\n onClose()\n }\n\n const handleSeeDetails = () => {\n handleClose()\n\n const transactionHash = getSourceTxHash(route)\n\n navigate({\n to: navigationRoutes.transactionDetails,\n search: {\n routeId: route.id,\n transactionHash,\n },\n replace: true,\n })\n }\n\n const transactionType =\n route.fromChainId === route.toChainId ? 'swap' : 'bridge'\n\n let title: string \| undefined\n let primaryMessage: string \| undefined\n let failedMessage: string \| undefined\n let handlePrimaryButton = handleDone\n switch (status) {\n case RouteExecutionStatus.Done: {\n title =\n subvariant === 'custom'\n ? t(\n `success.title.${subvariantOptions?.custom ?? 'checkout'}Successful`\n )\n : t(`success.title.${transactionType}Successful`)\n handlePrimaryButton = handleDone\n break\n }\n case RouteExecutionStatus.Done \| RouteExecutionStatus.Partial: {\n title = t(`success.title.${transactionType}PartiallySuccessful`)\n primaryMessage = t('success.message.exchangePartiallySuccessful', {\n tool: route.steps.at(-1)?.toolDetails.name,\n tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,\n })\n handlePrimaryButton = handlePartialDone\n break\n }\n case RouteExecutionStatus.Done \| RouteExecutionStatus.Refunded: {\n title = t('success.title.refundIssued')\n primaryMessage = t('success.message.exchangePartiallySuccessful', {\n tool: route.steps.at(-1)?.toolDetails.name,\n tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,\n })\n break\n }\n case RouteExecutionStatus.Failed: {\n const step = route.steps.find(\n (step) => step.execution?.status === 'FAILED'\n )\n if (!step) {\n break\n }\n const action = step.execution?.actions?.find(\n (action) => action.status === 'FAILED'\n ) \|\| {\n status: 'FAILED',\n type: 'EXECUTION' as ExecutionActionType,\n error: step.execution?.error,\n } // synthetic action to represent a failed execution with no actions\n const actionMessage = getErrorMessage(t, getChainById, step, action)\n title = actionMessage.title\n failedMessage = actionMessage.message\n handlePrimaryButton = handleClose\n break\n }\n default:\n break\n }\n\n const showContractComponent =\n subvariant === 'custom' &&\n hasEnumFlag(status, RouteExecutionStatus.Done) &&\n (contractCompactComponent \|\| contractSecondaryComponent)\n\n const VcComponent =\n status === RouteExecutionStatus.Done ? feeConfig?._vcComponent : undefined\n\n return (\n <Box\n ref={ref}\n sx={{\n p: 3,\n }}\n >\n {!showContractComponent ? (\n <CenterContainer>\n <IconCircle status={status} mb={1}>\n {status === RouteExecutionStatus.Idle ? (\n <InfoRounded color=\"primary\" />\n ) : null}\n {status === RouteExecutionStatus.Done ? (\n <Done color=\"success\" />\n ) : null}\n {hasEnumFlag(status, RouteExecutionStatus.Partial) \|\|\n hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (\n <WarningRounded color=\"warning\" />\n ) : null}\n {hasEnumFlag(status, RouteExecutionStatus.Failed) ? (\n <ErrorRounded color=\"error\" />\n ) : null}\n </IconCircle>\n </CenterContainer>\n ) : null}\n <CenterContainer>\n <Typography\n sx={{\n py: 1,\n fontSize: 18,\n fontWeight: 700,\n }}\n >\n {title}\n </Typography>\n </CenterContainer>\n {showContractComponent ? (\n contractCompactComponent \|\| contractSecondaryComponent\n ) : hasEnumFlag(status, RouteExecutionStatus.Failed) && failedMessage ? (\n <Typography\n sx={{\n py: 1,\n }}\n >\n {failedMessage}\n </Typography>\n ) : hasEnumFlag(status, RouteExecutionStatus.Done) ? (\n <Box\n sx={{\n display: 'flex',\n flexDirection: 'column',\n gap: 2,\n marginTop: 2,\n marginBottom: VcComponent ? 2 : 3,\n }}\n >\n <Card\n sx={{\n display: 'flex',\n flexDirection: 'column',\n gap: 2,\n padding: 2,\n }}\n >\n <CardTitle sx={{ padding: 0 }}>\n {hasEnumFlag(status, RouteExecutionStatus.Refunded)\n ? t('header.refunded')\n : t('header.received')}\n </CardTitle>\n <Token token={toToken} disableDescription={false} />\n {primaryMessage && (\n <Typography\n sx={{\n color: 'text.secondary',\n fontSize: '12px',\n lineHeight: '16px',\n fontWeight: 500,\n }}\n >\n {primaryMessage}\n </Typography>\n )}\n </Card>\n {VcComponent ? <VcComponent route={route} /> : null}\n </Box>\n ) : null}\n <Box sx={{ display: 'flex', marginTop: 2, gap: 1.5 }}>\n {hasEnumFlag(status, RouteExecutionStatus.Done) ? (\n <Button variant=\"text\" onClick={handleSeeDetails} fullWidth>\n {t('button.seeDetails')}\n </Button>\n ) : null}\n <Button variant=\"contained\" fullWidth onClick={handlePrimaryButton}>\n {status === RouteExecutionStatus.Idle ? t('button.ok') : null}\n {hasEnumFlag(status, RouteExecutionStatus.Done)\n ? t('button.done')\n : null}\n {status === RouteExecutionStatus.Failed\n ? t('button.seeDetails')\n : null}\n </Button>\n </Box>\n </Box>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"StatusBottomSheet.js","names":["Card"],"sources":["../../../../src/pages/TransactionPage/StatusBottomSheet.tsx"],"sourcesContent":["import type { ExecutionActionType } from '@lifi/sdk'\nimport Done from '@mui/icons-material/Done'\nimport ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport InfoRounded from '@mui/icons-material/InfoRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Button, Typography } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useCallback, useEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { Card } from '../../components/Card/Card.js'\nimport { CardTitle } from '../../components/Card/CardTitle.js'\nimport { Token } from '../../components/Token/Token.js'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport {\n type RouteExecution,\n RouteExecutionStatus,\n} from '../../stores/routes/types.js'\nimport { getSourceTxHash } from '../../stores/routes/utils.js'\nimport { hasEnumFlag } from '../../utils/enum.js'\nimport { formatTokenAmount } from '../../utils/format.js'\nimport { getErrorMessage } from '../../utils/getErrorMessage.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'\n\ninterface StatusBottomSheetContentProps extends RouteExecution {\n onClose(): void\n}\n\nexport const StatusBottomSheet: React.FC<RouteExecution> = ({\n status,\n route,\n}) => {\n const ref = useRef<BottomSheetBase>(null)\n\n const onClose = useCallback(() => {\n ref.current?.close()\n }, [])\n\n useEffect(() => {\n const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done)\n const hasFailedFlag = hasEnumFlag(status, RouteExecutionStatus.Failed)\n if ((hasSuccessFlag \|\| hasFailedFlag) && !ref.current?.isOpen()) {\n ref.current?.open()\n }\n }, [status])\n\n return (\n <BottomSheet ref={ref}>\n <StatusBottomSheetContent\n status={status}\n route={route}\n onClose={onClose}\n />\n </BottomSheet>\n )\n}\n\nconst StatusBottomSheetContent: React.FC<StatusBottomSheetContentProps> = ({\n status,\n route,\n onClose,\n}) => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const { setFieldValue } = useFieldActions()\n const {\n subvariant,\n subvariantOptions,\n contractSecondaryComponent,\n contractCompactComponent,\n feeConfig,\n } = useWidgetConfig()\n const { getChainById } = useAvailableChains()\n\n const ref = useRef<HTMLElement>(null)\n useSetContentHeight(ref)\n\n const toToken = {\n ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),\n amount: BigInt(\n route.steps.at(-1)?.execution?.toAmount ??\n route.steps.at(-1)?.estimate.toAmount ??\n route.toAmount\n ),\n }\n\n const cleanFields = () => {\n setFieldValue('fromAmount', '')\n setFieldValue('toAmount', '')\n }\n\n const handleDone = () => {\n cleanFields()\n navigate({ to: navigationRoutes.home, replace: true })\n }\n\n const handlePartialDone = () => {\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 cleanFields()\n }\n navigate({ to: navigationRoutes.home, replace: true })\n }\n\n const handleClose = () => {\n cleanFields()\n onClose()\n }\n\n const handleSeeDetails = () => {\n handleClose()\n\n const transactionHash = getSourceTxHash(route)\n\n navigate({\n to: navigationRoutes.transactionDetails,\n search: {\n routeId: route.id,\n transactionHash,\n },\n replace: true,\n })\n }\n\n const transactionType =\n route.fromChainId === route.toChainId ? 'swap' : 'bridge'\n\n let title: string \| undefined\n let primaryMessage: string \| undefined\n let failedMessage: string \| undefined\n let handlePrimaryButton = handleDone\n switch (status) {\n case RouteExecutionStatus.Done: {\n title =\n subvariant === 'custom'\n ? t(\n `success.title.${subvariantOptions?.custom ?? 'checkout'}Successful`\n )\n : t(`success.title.${transactionType}Successful`)\n handlePrimaryButton = handleDone\n break\n }\n case RouteExecutionStatus.Done \| RouteExecutionStatus.Partial: {\n title = t(`success.title.${transactionType}PartiallySuccessful`)\n primaryMessage = t('success.message.exchangePartiallySuccessful', {\n tool: route.steps.at(-1)?.toolDetails.name,\n tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,\n })\n handlePrimaryButton = handlePartialDone\n break\n }\n case RouteExecutionStatus.Done \| RouteExecutionStatus.Refunded: {\n title = t('success.title.refundIssued')\n primaryMessage = t('success.message.exchangePartiallySuccessful', {\n tool: route.steps.at(-1)?.toolDetails.name,\n tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,\n })\n break\n }\n case RouteExecutionStatus.Failed: {\n const step = route.steps.find(\n (step) => step.execution?.status === 'FAILED'\n )\n if (!step) {\n break\n }\n const action = step.execution?.actions?.find(\n (action) => action.status === 'FAILED'\n ) \|\| {\n status: 'FAILED',\n type: 'EXECUTION' as ExecutionActionType,\n error: step.execution?.error,\n } // synthetic action to represent a failed execution with no actions\n const actionMessage = getErrorMessage(t, getChainById, step, action)\n title = actionMessage.title\n failedMessage = actionMessage.message\n handlePrimaryButton = handleClose\n break\n }\n default:\n break\n }\n\n const showContractComponent =\n subvariant === 'custom' &&\n hasEnumFlag(status, RouteExecutionStatus.Done) &&\n (contractCompactComponent \|\| contractSecondaryComponent)\n\n const VcComponent =\n status === RouteExecutionStatus.Done ? feeConfig?._vcComponent : undefined\n\n return (\n <Box\n ref={ref}\n sx={{\n p: 3,\n }}\n >\n {!showContractComponent ? (\n <CenterContainer>\n <IconCircle status={status} sx={{ mb: 1 }}>\n {status === RouteExecutionStatus.Idle ? (\n <InfoRounded color=\"primary\" />\n ) : null}\n {status === RouteExecutionStatus.Done ? (\n <Done color=\"success\" />\n ) : null}\n {hasEnumFlag(status, RouteExecutionStatus.Partial) \|\|\n hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (\n <WarningRounded color=\"warning\" />\n ) : null}\n {hasEnumFlag(status, RouteExecutionStatus.Failed) ? (\n <ErrorRounded color=\"error\" />\n ) : null}\n </IconCircle>\n </CenterContainer>\n ) : null}\n <CenterContainer>\n <Typography\n sx={{\n py: 1,\n fontSize: 18,\n fontWeight: 700,\n }}\n >\n {title}\n </Typography>\n </CenterContainer>\n {showContractComponent ? (\n contractCompactComponent \|\| contractSecondaryComponent\n ) : hasEnumFlag(status, RouteExecutionStatus.Failed) && failedMessage ? (\n <Typography\n sx={{\n py: 1,\n }}\n >\n {failedMessage}\n </Typography>\n ) : hasEnumFlag(status, RouteExecutionStatus.Done) ? (\n <Box\n sx={{\n display: 'flex',\n flexDirection: 'column',\n gap: 2,\n marginTop: 2,\n marginBottom: VcComponent ? 2 : 3,\n }}\n >\n <Card\n sx={{\n display: 'flex',\n flexDirection: 'column',\n gap: 2,\n padding: 2,\n }}\n >\n <CardTitle sx={{ padding: 0 }}>\n {hasEnumFlag(status, RouteExecutionStatus.Refunded)\n ? t('header.refunded')\n : t('header.received')}\n </CardTitle>\n <Token token={toToken} disableDescription={false} />\n {primaryMessage && (\n <Typography\n sx={{\n color: 'text.secondary',\n fontSize: '12px',\n lineHeight: '16px',\n fontWeight: 500,\n }}\n >\n {primaryMessage}\n </Typography>\n )}\n </Card>\n {VcComponent ? <VcComponent route={route} /> : null}\n </Box>\n ) : null}\n <Box sx={{ display: 'flex', marginTop: 2, gap: 1.5 }}>\n {hasEnumFlag(status, RouteExecutionStatus.Done) ? (\n <Button variant=\"text\" onClick={handleSeeDetails} fullWidth>\n {t('button.seeDetails')}\n </Button>\n ) : null}\n <Button variant=\"contained\" fullWidth onClick={handlePrimaryButton}>\n {status === RouteExecutionStatus.Idle ? t('button.ok') : null}\n {hasEnumFlag(status, RouteExecutionStatus.Done)\n ? t('button.done')\n : null}\n {status === RouteExecutionStatus.Failed\n ? t('button.seeDetails')\n : null}\n </Button>\n </Box>\n </Box>\n )\n}\n"],"mappings":"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"}

package/dist/esm/pages/TransactionPage/StatusBottomSheet.style.js CHANGED Viewed

@@ -1,22 +1,21 @@
-import { RouteExecutionStatus } from "../../stores/routes/types.js";
 import { Box, styled } from "@mui/material";
 //#region src/pages/TransactionPage/StatusBottomSheet.style.tsx
 const getStatusColor = (status, theme) => {
 	switch (status) {
-		case RouteExecutionStatus.Done: return {
+		case 4: return {
 			color: theme.vars.palette.success.main,
 			alpha: .12,
 			lightDarken: 0,
 			darkDarken: 0
 		};
-		case RouteExecutionStatus.Failed: return {
+		case 8: return {
 			color: theme.vars.palette.error.main,
 			alpha: .12,
 			lightDarken: 0,
 			darkDarken: 0
 		};
-		case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:
-		case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:
+		case 20:
+		case 36:
 		case "warning": return {
 			color: theme.vars.palette.warning.main,
 			alpha: .48,
@@ -36,7 +35,7 @@ const CenterContainer = styled(Box)(() => ({
 	placeItems: "center",
 	position: "relative"
 }));
-const IconCircle = styled(Box, { shouldForwardProp: (prop) => prop !== "status" })(({ theme, status = RouteExecutionStatus.Idle }) => {
+const IconCircle = styled(Box, { shouldForwardProp: (prop) => prop !== "status" })(({ theme, status = 1 }) => {
 	const statusConfig = getStatusColor(status, theme);
 	return {
 		backgroundColor: `color-mix(in srgb, ${statusConfig.color} ${statusConfig.alpha * 100}%, transparent)`,

package/dist/esm/pages/TransactionPage/StatusBottomSheet.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StatusBottomSheet.style.js","names":[],"sources":["../../../../src/pages/TransactionPage/StatusBottomSheet.style.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\n\ntype StatusColor = RouteExecutionStatus \| 'warning'\n\nconst getStatusColor = (status: StatusColor, theme: Theme) => {\n switch (status) {\n case RouteExecutionStatus.Done:\n return {\n color: theme.vars.palette.success.main,\n alpha: 0.12,\n lightDarken: 0,\n darkDarken: 0,\n }\n case RouteExecutionStatus.Failed:\n return {\n color: theme.vars.palette.error.main,\n alpha: 0.12,\n lightDarken: 0,\n darkDarken: 0,\n }\n case RouteExecutionStatus.Done \| RouteExecutionStatus.Partial:\n case RouteExecutionStatus.Done \| RouteExecutionStatus.Refunded:\n case 'warning':\n return {\n color: theme.vars.palette.warning.main,\n alpha: 0.48,\n lightDarken: 0.32,\n darkDarken: 0,\n }\n default:\n return {\n color: theme.vars.palette.primary.main,\n alpha: 0.12,\n lightDarken: 0,\n darkDarken: 0,\n }\n }\n}\n\nexport const CenterContainer: React.FC<\n React.ComponentProps<typeof Box> & { status?: StatusColor }\n> = styled(Box)(() => ({\n display: 'grid',\n placeItems: 'center',\n position: 'relative',\n}))\n\nexport const IconCircle: React.FC<\n React.ComponentProps<typeof Box> & { status?: StatusColor }\n> = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'status',\n})<{ status?: StatusColor }>(\n ({ theme, status = RouteExecutionStatus.Idle }) => {\n const statusConfig = getStatusColor(status, theme)\n\n return {\n backgroundColor: `color-mix(in srgb, ${statusConfig.color} ${statusConfig.alpha * 100}%, transparent)`,\n borderRadius: '50%',\n width: 72,\n height: 72,\n display: 'grid',\n position: 'relative',\n placeItems: 'center',\n '& > svg': {\n color: `color-mix(in srgb, ${statusConfig.color} ${(1 - statusConfig.lightDarken) * 100}%, black)`,\n width: 36,\n height: 36,\n },\n ...theme.applyStyles('dark', {\n '& > svg': {\n color: `color-mix(in srgb, ${statusConfig.color} ${(1 - statusConfig.darkDarken) * 100}%, black)`,\n width: 36,\n height: 36,\n },\n }),\n }\n }\n)\n"],"mappings":"~~;;;~~AAOA,MAAM,kBAAkB,QAAqB,UAAiB;AAC5D,SAAQ,QAAR;EACE,~~KAAK~~,~~qBAAqB~~,~~KACxB,~~QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,~~KAAK~~,~~qBAAqB~~,~~OACxB,~~QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,MAAM;GAChC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,~~KAAK,qBAAqB,OAAO,qBAAqB~~;~~EACtD~~,~~KAAK,qBAAqB,OAAO,qBAAqB~~;~~EACtD~~,KAAK,UACH,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,QACE,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;;;AAIP,MAAa,kBAET,OAAO,IAAI,QAAQ;CACrB,SAAS;CACT,YAAY;CACZ,UAAU;CACX,EAAE;AAEH,MAAa,aAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,UACvC,CAAC,EACC,EAAE,OAAO,~~SAAS~~,~~qBAAqB,WAAW~~;CACjD,MAAM,eAAe,eAAe,QAAQ,MAAM;AAElD,QAAO;EACL,iBAAiB,sBAAsB,aAAa,MAAM,GAAG,aAAa,QAAQ,IAAI;EACtF,cAAc;EACd,OAAO;EACP,QAAQ;EACR,SAAS;EACT,UAAU;EACV,YAAY;EACZ,WAAW;GACT,OAAO,sBAAsB,aAAa,MAAM,IAAI,IAAI,aAAa,eAAe,IAAI;GACxF,OAAO;GACP,QAAQ;GACT;EACD,GAAG,MAAM,YAAY,QAAQ,EAC3B,WAAW;GACT,OAAO,sBAAsB,aAAa,MAAM,IAAI,IAAI,aAAa,cAAc,IAAI;GACvF,OAAO;GACP,QAAQ;GACT,EACF,CAAC;EACH;EAEJ"}
1	+ {"version":3,"file":"StatusBottomSheet.style.js","names":[],"sources":["../../../../src/pages/TransactionPage/StatusBottomSheet.style.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\n\ntype StatusColor = RouteExecutionStatus \| 'warning'\n\nconst getStatusColor = (status: StatusColor, theme: Theme) => {\n switch (status) {\n case RouteExecutionStatus.Done:\n return {\n color: theme.vars.palette.success.main,\n alpha: 0.12,\n lightDarken: 0,\n darkDarken: 0,\n }\n case RouteExecutionStatus.Failed:\n return {\n color: theme.vars.palette.error.main,\n alpha: 0.12,\n lightDarken: 0,\n darkDarken: 0,\n }\n case RouteExecutionStatus.Done \| RouteExecutionStatus.Partial:\n case RouteExecutionStatus.Done \| RouteExecutionStatus.Refunded:\n case 'warning':\n return {\n color: theme.vars.palette.warning.main,\n alpha: 0.48,\n lightDarken: 0.32,\n darkDarken: 0,\n }\n default:\n return {\n color: theme.vars.palette.primary.main,\n alpha: 0.12,\n lightDarken: 0,\n darkDarken: 0,\n }\n }\n}\n\nexport const CenterContainer: React.FC<\n React.ComponentProps<typeof Box> & { status?: StatusColor }\n> = styled(Box)(() => ({\n display: 'grid',\n placeItems: 'center',\n position: 'relative',\n}))\n\nexport const IconCircle: React.FC<\n React.ComponentProps<typeof Box> & { status?: StatusColor }\n> = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'status',\n})<{ status?: StatusColor }>(\n ({ theme, status = RouteExecutionStatus.Idle }) => {\n const statusConfig = getStatusColor(status, theme)\n\n return {\n backgroundColor: `color-mix(in srgb, ${statusConfig.color} ${statusConfig.alpha * 100}%, transparent)`,\n borderRadius: '50%',\n width: 72,\n height: 72,\n display: 'grid',\n position: 'relative',\n placeItems: 'center',\n '& > svg': {\n color: `color-mix(in srgb, ${statusConfig.color} ${(1 - statusConfig.lightDarken) * 100}%, black)`,\n width: 36,\n height: 36,\n },\n ...theme.applyStyles('dark', {\n '& > svg': {\n color: `color-mix(in srgb, ${statusConfig.color} ${(1 - statusConfig.darkDarken) * 100}%, black)`,\n width: 36,\n height: 36,\n },\n }),\n }\n }\n)\n"],"mappings":";;AAOA,MAAM,kBAAkB,QAAqB,UAAiB;AAC5D,SAAQ,QAAR;EACE,KAAA,EACE,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,KAAA,EACE,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,MAAM;GAChC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,KAAA;EACA,KAAA;EACA,KAAK,UACH,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,QACE,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;;;AAIP,MAAa,kBAET,OAAO,IAAI,QAAQ;CACrB,SAAS;CACT,YAAY;CACZ,UAAU;CACX,EAAE;AAEH,MAAa,aAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,UACvC,CAAC,EACC,EAAE,OAAO,SAAA,QAAyC;CACjD,MAAM,eAAe,eAAe,QAAQ,MAAM;AAElD,QAAO;EACL,iBAAiB,sBAAsB,aAAa,MAAM,GAAG,aAAa,QAAQ,IAAI;EACtF,cAAc;EACd,OAAO;EACP,QAAQ;EACR,SAAS;EACT,UAAU;EACV,YAAY;EACZ,WAAW;GACT,OAAO,sBAAsB,aAAa,MAAM,IAAI,IAAI,aAAa,eAAe,IAAI;GACxF,OAAO;GACP,QAAQ;GACT;EACD,GAAG,MAAM,YAAY,QAAQ,EAC3B,WAAW;GACT,OAAO,sBAAsB,aAAa,MAAM,IAAI,IAAI,aAAa,cAAc,IAAI;GACvF,OAAO;GACP,QAAQ;GACT,EACF,CAAC;EACH;EAEJ"}

package/dist/esm/pages/TransactionPage/TokenValueBottomSheet.js CHANGED Viewed

@@ -4,8 +4,8 @@ import { BottomSheet } from "../../components/BottomSheet/BottomSheet.js";
 import { useSetContentHeight } from "../../hooks/useSetContentHeight.js";
 import { CenterContainer, IconCircle } from "./StatusBottomSheet.style.js";
 import { calculateValueLossPercentage } from "./utils.js";
-import { forwardRef, useRef } from "react";
-import { Box, Button, Typography } from "@mui/material";
+import { forwardRef, useRef, useState } from "react";
+import { Box, Button, Checkbox, FormControlLabel, Typography } from "@mui/material";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import WarningRounded from "@mui/icons-material/WarningRounded";
@@ -26,6 +26,7 @@ const TokenValueBottomSheet = forwardRef(({ route, onContinue, onCancel }, ref)
 	});
 });
 const TokenValueBottomSheetContent = ({ route, onCancel, onContinue }) => {
+	const [accepted, setAccepted] = useState(false);
 	const { t } = useTranslation();
 	const ref = useRef(null);
 	useSetContentHeight(ref);
@@ -38,7 +39,7 @@ const TokenValueBottomSheetContent = ({ route, onCancel, onContinue }) => {
 		children: [
 			/* @__PURE__ */ jsxs(CenterContainer, { children: [/* @__PURE__ */ jsx(IconCircle, {
 				status: "warning",
-				mb: 1,
+				sx: { mb: 1 },
 				children: /* @__PURE__ */ jsx(WarningRounded, { color: "warning" })
 			}), /* @__PURE__ */ jsx(Typography, {
 				sx: {
@@ -114,10 +115,18 @@ const TokenValueBottomSheetContent = ({ route, onCancel, onContinue }) => {
 					children: [calculateValueLossPercentage(fromAmountUSD, toAmountUSD, gasCostUSD, feeCostUSD), "%"]
 				})]
 			}),
+			/* @__PURE__ */ jsx(FormControlLabel, {
+				control: /* @__PURE__ */ jsx(Checkbox, {
+					checked: accepted,
+					onChange: (_, checked) => setAccepted(checked)
+				}),
+				label: t("warning.checkbox.highValueLoss"),
+				sx: { mt: 1 }
+			}),
 			/* @__PURE__ */ jsxs(Box, {
 				sx: {
 					display: "flex",
-					mt: 3
+					mt: 1
 				},
 				children: [
 					/* @__PURE__ */ jsx(Button, {
@@ -133,6 +142,7 @@ const TokenValueBottomSheetContent = ({ route, onCancel, onContinue }) => {
 					/* @__PURE__ */ jsx(Button, {
 						variant: "contained",
 						onClick: onContinue,
+						disabled: !accepted,
 						fullWidth: true,
 						children: t("button.continue")
 					})

package/dist/esm/pages/TransactionPage/TokenValueBottomSheet.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TokenValueBottomSheet.js","names":[],"sources":["../../../../src/pages/TransactionPage/TokenValueBottomSheet.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Button, Typography } from '@mui/material'\nimport type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'\nimport { forwardRef, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { FeeBreakdownTooltip } from '../../components/FeeBreakdownTooltip.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'\nimport { calculateValueLossPercentage } from './utils.js'\n\ninterface TokenValueBottomSheetProps {\n route: Route\n onContinue(): void\n onCancel?(): void\n}\n\nexport const TokenValueBottomSheet: ForwardRefExoticComponent<\n TokenValueBottomSheetProps & RefAttributes<BottomSheetBase>\n> = forwardRef<BottomSheetBase, TokenValueBottomSheetProps>(\n ({ route, onContinue, onCancel }, ref) => {\n const handleCancel = () => {\n ;(ref as RefObject<BottomSheetBase>).current?.close()\n onCancel?.()\n }\n\n return (\n <BottomSheet ref={ref} onClose={onCancel}>\n <TokenValueBottomSheetContent\n route={route}\n onContinue={onContinue}\n onCancel={handleCancel}\n />\n </BottomSheet>\n )\n }\n)\n\nconst TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({\n route,\n onCancel,\n onContinue,\n}) => {\n const { t } = useTranslation()\n const ref = useRef<HTMLElement>(null)\n useSetContentHeight(ref)\n const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } =\n getAccumulatedFeeCostsBreakdown(route)\n const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)\n const toAmountUSD = Number.parseFloat(route.toAmountUSD)\n return (\n <Box\n ref={ref}\n sx={{\n p: 3,\n }}\n >\n <CenterContainer>\n <IconCircle status=\"warning\" mb={1}>\n <WarningRounded color=\"warning\" />\n </IconCircle>\n <Typography\n sx={{\n py: 1,\n fontSize: 18,\n fontWeight: 700,\n }}\n >\n {t('warning.title.highValueLoss')}\n </Typography>\n </CenterContainer>\n <Typography\n sx={{\n py: 1,\n }}\n >\n {t('warning.message.highValueLoss')}\n </Typography>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mt: 1,\n }}\n >\n <Typography>{t('main.sending')}</Typography>\n <Typography\n sx={{\n fontWeight: 600,\n }}\n >\n {t('format.currency', { value: route.fromAmountUSD })}\n </Typography>\n </Box>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mt: 0.25,\n }}\n >\n <Typography>{t('main.fees.network')}</Typography>\n <FeeBreakdownTooltip gasCosts={gasCosts} gasless={!gasCostUSD}>\n <Typography\n sx={{\n fontWeight: 600,\n }}\n >\n {!gasCostUSD\n ? t('main.fees.free')\n : t('format.currency', { value: gasCostUSD })}\n </Typography>\n </FeeBreakdownTooltip>\n </Box>\n {feeCostUSD ? (\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mt: 0.25,\n }}\n >\n <Typography>{t('main.fees.provider')}</Typography>\n <FeeBreakdownTooltip feeCosts={feeCosts}>\n <Typography\n sx={{\n fontWeight: 600,\n }}\n >\n {t('format.currency', { value: feeCostUSD })}\n </Typography>\n </FeeBreakdownTooltip>\n </Box>\n ) : null}\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mt: 0.25,\n }}\n >\n <Typography>{t('main.receiving')}</Typography>\n <Typography\n sx={{\n fontWeight: 600,\n }}\n >\n {t('format.currency', { value: route.toAmountUSD })}\n </Typography>\n </Box>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mt: 0.25,\n }}\n >\n <Typography>{t('main.valueLoss')}</Typography>\n <Typography\n sx={{\n fontWeight: 600,\n }}\n >\n {calculateValueLossPercentage(\n fromAmountUSD,\n toAmountUSD,\n gasCostUSD,\n feeCostUSD\n )}\n %\n </Typography>\n </Box>\n <Box\n sx={{\n display: 'flex',\n mt: 3,\n }}\n >\n <Button variant=\"text\" onClick={onCancel} fullWidth>\n {t('button.cancel')}\n </Button>\n <Box\n sx={{\n display: 'flex',\n p: 1,\n }}\n />\n <Button variant=\"contained\" onClick={onContinue} fullWidth>\n {t('button.continue')}\n </Button>\n </Box>\n </Box>\n )\n}\n"],"mappings":";;;;;;;;;;;;~~AAoBA~~,MAAa,wBAET,YACD,EAAE,OAAO,YAAY,YAAY,QAAQ;CACxC,MAAM,qBAAqB;AACvB,MAAmC,SAAS,OAAO;AACrD,cAAY;;AAGd,QACE,oBAAC,aAAD;EAAkB;EAAK,SAAS;YAC9B,oBAAC,8BAAD;GACS;GACK;GACZ,UAAU;GACV,CAAA;EACU,CAAA;EAGnB;AAED,MAAM,gCAAsE,EAC1E,OACA,UACA,iBACI;CACJ,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,MAAM,OAAoB,KAAK;AACrC,qBAAoB,IAAI;CACxB,MAAM,EAAE,UAAU,UAAU,YAAY,eACtC,gCAAgC,MAAM;CACxC,MAAM,gBAAgB,OAAO,WAAW,MAAM,cAAc;CAC5D,MAAM,cAAc,OAAO,WAAW,MAAM,YAAY;AACxD,QACE,qBAAC,KAAD;EACO;EACL,IAAI,EACF,GAAG,GACJ;YAJH;GAME,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,YAAD;IAAY,QAAO;IAAU,IAAI;~~cAC/B~~,oBAAC,gBAAD,EAAgB,OAAM,WAAY,CAAA;IACvB,CAAA,EACb,oBAAC,YAAD;IACE,IAAI;KACF,IAAI;KACJ,UAAU;KACV,YAAY;KACb;cAEA,EAAE,8BAA8B;IACtB,CAAA,CACG,EAAA,CAAA;GAClB,oBAAC,YAAD;IACE,IAAI,EACF,IAAI,GACL;cAEA,EAAE,gCAAgC;IACxB,CAAA;GACb,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,gBAAgB;KAChB,IAAI;KACL;cALH,CAOE,oBAAC,YAAD,EAAA,UAAa,EAAE,eAAe,EAAc,CAAA,EAC5C,oBAAC,YAAD;KACE,IAAI,EACF,YAAY,KACb;eAEA,EAAE,mBAAmB,EAAE,OAAO,MAAM,eAAe,CAAC;KAC1C,CAAA,CACT;;GACN,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,gBAAgB;KAChB,IAAI;KACL;cALH,CAOE,oBAAC,YAAD,EAAA,UAAa,EAAE,oBAAoB,EAAc,CAAA,EACjD,oBAAC,qBAAD;KAA+B;KAAU,SAAS,CAAC;eACjD,oBAAC,YAAD;MACE,IAAI,EACF,YAAY,KACb;gBAEA,CAAC,aACE,EAAE,iBAAiB,GACnB,EAAE,mBAAmB,EAAE,OAAO,YAAY,CAAC;MACpC,CAAA;KACO,CAAA,CAClB;;GACL,aACC,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,gBAAgB;KAChB,IAAI;KACL;cALH,CAOE,oBAAC,YAAD,EAAA,UAAa,EAAE,qBAAqB,EAAc,CAAA,EAClD,oBAAC,qBAAD;KAA+B;eAC7B,oBAAC,YAAD;MACE,IAAI,EACF,YAAY,KACb;gBAEA,EAAE,mBAAmB,EAAE,OAAO,YAAY,CAAC;MACjC,CAAA;KACO,CAAA,CAClB;QACJ;GACJ,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,gBAAgB;KAChB,IAAI;KACL;cALH,CAOE,oBAAC,YAAD,EAAA,UAAa,EAAE,iBAAiB,EAAc,CAAA,EAC9C,oBAAC,YAAD;KACE,IAAI,EACF,YAAY,KACb;eAEA,EAAE,mBAAmB,EAAE,OAAO,MAAM,aAAa,CAAC;KACxC,CAAA,CACT;;GACN,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,gBAAgB;KAChB,IAAI;KACL;cALH,CAOE,oBAAC,YAAD,EAAA,UAAa,EAAE,iBAAiB,EAAc,CAAA,EAC9C,qBAAC,YAAD;KACE,IAAI,EACF,YAAY,KACb;eAHH,CAKG,6BACC,eACA,aACA,YACA,WACD,EAAC,IAES;OACT;;GACN,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,IAAI;KACL;cAJH;KAME,oBAAC,QAAD;MAAQ,SAAQ;MAAO,SAAS;MAAU,WAAA;gBACvC,EAAE,gBAAgB;MACZ,CAAA;KACT,oBAAC,KAAD,EACE,IAAI;MACF,SAAS;MACT,GAAG;MACJ,EACD,CAAA;KACF,oBAAC,QAAD;~~MAAQ~~,SAAQ;~~MAAY~~,SAAS;~~MAAY~~,WAAA;~~gBAC9C~~,EAAE,kBAAkB;MACd,CAAA;KACL;;GACF"}
1	+ {"version":3,"file":"TokenValueBottomSheet.js","names":[],"sources":["../../../../src/pages/TransactionPage/TokenValueBottomSheet.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport {\n Box,\n Button,\n Checkbox,\n FormControlLabel,\n Typography,\n} from '@mui/material'\nimport type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'\nimport { forwardRef, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { FeeBreakdownTooltip } from '../../components/FeeBreakdownTooltip.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'\nimport { calculateValueLossPercentage } from './utils.js'\n\ninterface TokenValueBottomSheetProps {\n route: Route\n onContinue(): void\n onCancel?(): void\n}\n\nexport const TokenValueBottomSheet: ForwardRefExoticComponent<\n TokenValueBottomSheetProps & RefAttributes<BottomSheetBase>\n> = forwardRef<BottomSheetBase, TokenValueBottomSheetProps>(\n ({ route, onContinue, onCancel }, ref) => {\n const handleCancel = () => {\n ;(ref as RefObject<BottomSheetBase>).current?.close()\n onCancel?.()\n }\n\n return (\n <BottomSheet ref={ref} onClose={onCancel}>\n <TokenValueBottomSheetContent\n route={route}\n onContinue={onContinue}\n onCancel={handleCancel}\n />\n </BottomSheet>\n )\n }\n)\n\nconst TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({\n route,\n onCancel,\n onContinue,\n}) => {\n const [accepted, setAccepted] = useState(false)\n const { t } = useTranslation()\n const ref = useRef<HTMLElement>(null)\n useSetContentHeight(ref)\n const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } =\n getAccumulatedFeeCostsBreakdown(route)\n const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)\n const toAmountUSD = Number.parseFloat(route.toAmountUSD)\n return (\n <Box\n ref={ref}\n sx={{\n p: 3,\n }}\n >\n <CenterContainer>\n <IconCircle status=\"warning\" sx={{ mb: 1 }}>\n <WarningRounded color=\"warning\" />\n </IconCircle>\n <Typography\n sx={{\n py: 1,\n fontSize: 18,\n fontWeight: 700,\n }}\n >\n {t('warning.title.highValueLoss')}\n </Typography>\n </CenterContainer>\n <Typography\n sx={{\n py: 1,\n }}\n >\n {t('warning.message.highValueLoss')}\n </Typography>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mt: 1,\n }}\n >\n <Typography>{t('main.sending')}</Typography>\n <Typography\n sx={{\n fontWeight: 600,\n }}\n >\n {t('format.currency', { value: route.fromAmountUSD })}\n </Typography>\n </Box>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mt: 0.25,\n }}\n >\n <Typography>{t('main.fees.network')}</Typography>\n <FeeBreakdownTooltip gasCosts={gasCosts} gasless={!gasCostUSD}>\n <Typography\n sx={{\n fontWeight: 600,\n }}\n >\n {!gasCostUSD\n ? t('main.fees.free')\n : t('format.currency', { value: gasCostUSD })}\n </Typography>\n </FeeBreakdownTooltip>\n </Box>\n {feeCostUSD ? (\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mt: 0.25,\n }}\n >\n <Typography>{t('main.fees.provider')}</Typography>\n <FeeBreakdownTooltip feeCosts={feeCosts}>\n <Typography\n sx={{\n fontWeight: 600,\n }}\n >\n {t('format.currency', { value: feeCostUSD })}\n </Typography>\n </FeeBreakdownTooltip>\n </Box>\n ) : null}\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mt: 0.25,\n }}\n >\n <Typography>{t('main.receiving')}</Typography>\n <Typography\n sx={{\n fontWeight: 600,\n }}\n >\n {t('format.currency', { value: route.toAmountUSD })}\n </Typography>\n </Box>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mt: 0.25,\n }}\n >\n <Typography>{t('main.valueLoss')}</Typography>\n <Typography\n sx={{\n fontWeight: 600,\n }}\n >\n {calculateValueLossPercentage(\n fromAmountUSD,\n toAmountUSD,\n gasCostUSD,\n feeCostUSD\n )}\n %\n </Typography>\n </Box>\n <FormControlLabel\n control={\n <Checkbox\n checked={accepted}\n onChange={(_, checked) => setAccepted(checked)}\n />\n }\n label={t('warning.checkbox.highValueLoss')}\n sx={{ mt: 1 }}\n />\n <Box\n sx={{\n display: 'flex',\n mt: 1,\n }}\n >\n <Button variant=\"text\" onClick={onCancel} fullWidth>\n {t('button.cancel')}\n </Button>\n <Box\n sx={{\n display: 'flex',\n p: 1,\n }}\n />\n <Button\n variant=\"contained\"\n onClick={onContinue}\n disabled={!accepted}\n fullWidth\n >\n {t('button.continue')}\n </Button>\n </Box>\n </Box>\n )\n}\n"],"mappings":"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"}

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

@@ -1,12 +1,11 @@
 import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
-import { WidgetEvent } from "../../types/events.js";
+import "../../types/events.js";
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
 import { useHeaderStore } from "../../stores/header/useHeaderStore.js";
-import { HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { navigationRoutes } from "../../utils/navigationRoutes.js";
 import { useFieldActions } from "../../stores/form/useFieldActions.js";
 import { PageContainer } from "../../components/PageContainer.js";
-import { RouteExecutionStatus } from "../../stores/routes/types.js";
 import { getAccumulatedFeeCostsBreakdown } from "../../utils/fees.js";
 import { useNavigateBack } from "../../hooks/useNavigateBack.js";
 import { useHeader } from "../../hooks/useHeader.js";
@@ -23,7 +22,7 @@ import { StartTransactionButton } from "./StartTransactionButton.js";
 import { StatusBottomSheet } from "./StatusBottomSheet.js";
 import { calculateValueLossPercentage, getTokenValueLossThreshold } from "./utils.js";
 import { TokenValueBottomSheet } from "./TokenValueBottomSheet.js";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { useLocation, useNavigate } from "@tanstack/react-router";
 import { Box, Button, Tooltip } from "@mui/material";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -57,26 +56,23 @@ const TransactionPage = () => {
 		if (subvariant === "custom") return t(`header.${subvariantOptions?.custom ?? "checkout"}`);
 		if (route) {
 			const transactionType = route.fromChainId === route.toChainId ? "swap" : "bridge";
-			return status === RouteExecutionStatus.Idle ? t(`button.${transactionType}Review`) : t(`header.${transactionType}`);
+			return status === 1 ? t(`button.${transactionType}Review`) : t(`header.${transactionType}`);
 		}
 		return t("header.exchange");
 	};
-	const headerAction = useMemo(() => status === RouteExecutionStatus.Idle ? /* @__PURE__ */ jsx(RouteTracker, {
+	const headerAction = useMemo(() => status === 1 ? /* @__PURE__ */ jsx(RouteTracker, {
 		observableRouteId: stateRouteId,
 		onChange: setRouteId,
 		onFetching: setRouteRefreshing
 	}) : void 0, [stateRouteId, status]);
 	useHeader(getHeaderTitle(), headerAction);
-	useEffect(() => {
-		if (status === RouteExecutionStatus.Idle) emitter.emit(WidgetEvent.ReviewTransactionPageEntered, route);
-	}, []);
 	if (!route) return null;
 	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(WidgetEvent.RouteHighValueLoss, {
+			emitter.emit("routeHighValueLoss", {
 				fromAmountUSD,
 				toAmountUSD,
 				gasCostUSD,
@@ -99,8 +95,8 @@ const TransactionPage = () => {
 		});
 	};
 	const handleStartClick = async () => {
-		if (status === RouteExecutionStatus.Idle) {
-			if (toAddress && !hasActivity && !isLoadingAddressActivity && isActivityAddressFetched && !hiddenUI?.includes(HiddenUI.LowAddressActivityConfirmation)) {
+		if (status === 1) {
+			if (toAddress && !hasActivity && !isLoadingAddressActivity && isActivityAddressFetched && !hiddenUI?.includes("lowAddressActivityConfirmation")) {
 				confirmToAddressSheetRef.current?.open();
 				return;
 			}
@@ -108,7 +104,7 @@ const TransactionPage = () => {
 			if (getTokenValueLossThreshold(Number.parseFloat(route.fromAmountUSD), Number.parseFloat(route.toAmountUSD), gasCostUSD, feeCostUSD) && subvariant !== "custom") tokenValueBottomSheetRef.current?.open();
 			else handleExecuteRoute();
 		}
-		if (status === RouteExecutionStatus.Failed) restartRoute();
+		if (status === 8) restartRoute();
 	};
 	const handleRemoveRoute = () => {
 		navigateBack();
@@ -116,12 +112,12 @@ const TransactionPage = () => {
 	};
 	const getButtonText = () => {
 		switch (status) {
-			case RouteExecutionStatus.Idle: switch (subvariant) {
+			case 1: switch (subvariant) {
 				case "custom": return subvariantOptions?.custom === "deposit" ? t("button.deposit") : t("button.buy");
 				case "refuel": return t("button.startBridging");
 				default: return t(`button.start${route.fromChainId === route.toChainId ? "Swapping" : "Bridging"}`);
 			}
-			case RouteExecutionStatus.Failed: return t("button.tryAgain");
+			case 8: return t("button.tryAgain");
 			default: return "";
 		}
 	};
@@ -137,8 +133,8 @@ const TransactionPage = () => {
 				route,
 				sx: { marginTop: 2 }
 			}),
-			status === RouteExecutionStatus.Idle || status === RouteExecutionStatus.Failed ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(WarningMessages, {
-				mt: 2,
+			status === 1 || status === 8 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(WarningMessages, {
+				sx: { mt: 2 },
 				route,
 				allowInteraction: true
 			}), /* @__PURE__ */ jsxs(Box, {
@@ -151,7 +147,7 @@ const TransactionPage = () => {
 					onClick: handleStartClick,
 					route,
 					loading: routeRefreshing || isLoadingAddressActivity
-				}), status === RouteExecutionStatus.Failed ? /* @__PURE__ */ jsx(Tooltip, {
+				}), status === 8 ? /* @__PURE__ */ jsx(Tooltip, {
 					title: t("button.clearTransaction"),
 					placement: "bottom-end",
 					children: /* @__PURE__ */ jsx(Button, {
@@ -174,7 +170,7 @@ const TransactionPage = () => {
 				onContinue: handleExecuteRoute
 			}) : null,
 			/* @__PURE__ */ jsx(ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef }),
-			!hiddenUI?.includes(HiddenUI.LowAddressActivityConfirmation) ? /* @__PURE__ */ jsx(ConfirmToAddressSheet, {
+			!hiddenUI?.includes("lowAddressActivityConfirmation") ? /* @__PURE__ */ jsx(ConfirmToAddressSheet, {
 				ref: confirmToAddressSheetRef,
 				onContinue: handleExecuteRoute,
 				toAddress,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TransactionPage.js","names":[],"sources":["../../../../src/pages/TransactionPage/TransactionPage.tsx"],"sourcesContent":["import type { ExchangeRateUpdateParams } from '@lifi/sdk'\nimport Delete from '@mui/icons-material/Delete'\nimport { Box, Button, Tooltip } from '@mui/material'\nimport { useLocation, useNavigate } from '@tanstack/react-router'\nimport { type JSX, useEffect, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'\nimport { WarningMessages } from '../../components/Messages/WarningMessages.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { getStepList } from '../../components/Step/StepList.js'\nimport { TransactionDetails } from '../../components/TransactionDetails.js'\nimport { useAddressActivity } from '../../hooks/useAddressActivity.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useRouteExecution } from '../../hooks/useRouteExecution.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 { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'\nimport type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js'\nimport { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js'\nimport { RouteTracker } from './RouteTracker.js'\nimport { StartTransactionButton } from './StartTransactionButton.js'\nimport { StatusBottomSheet } from './StatusBottomSheet.js'\nimport { TokenValueBottomSheet } from './TokenValueBottomSheet.js'\nimport {\n calculateValueLossPercentage,\n getTokenValueLossThreshold,\n} from './utils.js'\n\nexport const TransactionPage = (): JSX.Element \| null => {\n const { t } = useTranslation()\n const { setFieldValue } = useFieldActions()\n const emitter = useWidgetEvents()\n const setBackAction = useHeaderStore((state) => state.setBackAction)\n const navigate = useNavigate()\n const navigateBack = useNavigateBack()\n const {\n subvariant,\n subvariantOptions,\n contractSecondaryComponent,\n hiddenUI,\n } = 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\n const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)\n const exchangeRateBottomSheetRef = useRef<ExchangeRateBottomSheetBase>(null)\n const confirmToAddressSheetRef = useRef<BottomSheetBase>(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 useRouteExecution({\n routeId: routeId,\n onAcceptExchangeRateUpdate,\n })\n\n const {\n toAddress,\n hasActivity,\n isLoading: isLoadingAddressActivity,\n isFetched: isActivityAddressFetched,\n } = useAddressActivity(route?.toChainId)\n\n const getHeaderTitle = () => {\n if (subvariant === 'custom') {\n return t(`header.${subvariantOptions?.custom ?? '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: We want to emit event only when the page is mounted\n useEffect(() => {\n if (status === RouteExecutionStatus.Idle) {\n emitter.emit(WidgetEvent.ReviewTransactionPageEntered, route)\n }\n }, [])\n\n if (!route) {\n return null\n }\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 (subvariant === 'custom') {\n setFieldValue('fromToken', '')\n setFieldValue('toToken', '')\n }\n // Once transaction is started, set the back action to navigate to the home page\n setBackAction(() => {\n navigate({ to: navigationRoutes.home, replace: true })\n })\n }\n\n const handleStartClick = async () => {\n if (status === RouteExecutionStatus.Idle) {\n if (\n toAddress &&\n !hasActivity &&\n !isLoadingAddressActivity &&\n isActivityAddressFetched &&\n !hiddenUI?.includes(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 && subvariant !== 'custom') {\n tokenValueBottomSheetRef.current?.open()\n } else {\n handleExecuteRoute()\n }\n }\n if (status === RouteExecutionStatus.Failed) {\n restartRoute()\n }\n }\n\n const handleRemoveRoute = () => {\n navigateBack()\n deleteRoute()\n }\n\n const getButtonText = (): string => {\n switch (status) {\n case RouteExecutionStatus.Idle:\n switch (subvariant) {\n case 'custom':\n return subvariantOptions?.custom === '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 case RouteExecutionStatus.Failed:\n return t('button.tryAgain')\n default:\n return ''\n }\n }\n\n return (\n <PageContainer bottomGutters>\n {getStepList(route, subvariant)}\n {subvariant === 'custom' && contractSecondaryComponent ? (\n <ContractComponent sx={{ marginTop: 2 }}>\n {contractSecondaryComponent}\n </ContractComponent>\n ) : null}\n <TransactionDetails route={route} sx={{ marginTop: 2 }} />\n {status === RouteExecutionStatus.Idle \|\|\n status === RouteExecutionStatus.Failed ? (\n <>\n <WarningMessages mt={2} route={route} allowInteraction />\n <Box\n sx={{\n mt: 2,\n display: 'flex',\n }}\n >\n <StartTransactionButton\n text={getButtonText()}\n onClick={handleStartClick}\n route={route}\n loading={routeRefreshing \|\| isLoadingAddressActivity}\n />\n {status === RouteExecutionStatus.Failed ? (\n <Tooltip\n title={t('button.clearTransaction')}\n placement=\"bottom-end\"\n >\n <Button\n onClick={handleRemoveRoute}\n sx={{\n minWidth: 48,\n marginLeft: 1,\n }}\n >\n <Delete />\n </Button>\n </Tooltip>\n ) : null}\n </Box>\n </>\n ) : null}\n {status ? <StatusBottomSheet status={status} route={route} /> : null}\n {subvariant !== 'custom' ? (\n <TokenValueBottomSheet\n route={route}\n ref={tokenValueBottomSheetRef}\n onContinue={handleExecuteRoute}\n />\n ) : null}\n <ExchangeRateBottomSheet ref={exchangeRateBottomSheetRef} />\n {!hiddenUI?.includes(HiddenUI.LowAddressActivityConfirmation) ? (\n <ConfirmToAddressSheet\n ref={confirmToAddressSheetRef}\n onContinue={handleExecuteRoute}\n toAddress={toAddress!}\n toChainId={route.toChainId!}\n />\n ) : null}\n </PageContainer>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"TransactionPage.js","names":[],"sources":["../../../../src/pages/TransactionPage/TransactionPage.tsx"],"sourcesContent":["import type { ExchangeRateUpdateParams } from '@lifi/sdk'\nimport Delete from '@mui/icons-material/Delete'\nimport { Box, Button, Tooltip } from '@mui/material'\nimport { useLocation, useNavigate } from '@tanstack/react-router'\nimport { type JSX, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'\nimport { WarningMessages } from '../../components/Messages/WarningMessages.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { getStepList } from '../../components/Step/StepList.js'\nimport { TransactionDetails } from '../../components/TransactionDetails.js'\nimport { useAddressActivity } from '../../hooks/useAddressActivity.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useRouteExecution } from '../../hooks/useRouteExecution.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 { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'\nimport type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js'\nimport { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js'\nimport { RouteTracker } from './RouteTracker.js'\nimport { StartTransactionButton } from './StartTransactionButton.js'\nimport { StatusBottomSheet } from './StatusBottomSheet.js'\nimport { TokenValueBottomSheet } from './TokenValueBottomSheet.js'\nimport {\n calculateValueLossPercentage,\n getTokenValueLossThreshold,\n} from './utils.js'\n\nexport const TransactionPage = (): JSX.Element \| null => {\n const { t } = useTranslation()\n const { setFieldValue } = useFieldActions()\n const emitter = useWidgetEvents()\n const setBackAction = useHeaderStore((state) => state.setBackAction)\n const navigate = useNavigate()\n const navigateBack = useNavigateBack()\n const {\n subvariant,\n subvariantOptions,\n contractSecondaryComponent,\n hiddenUI,\n } = 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\n const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)\n const exchangeRateBottomSheetRef = useRef<ExchangeRateBottomSheetBase>(null)\n const confirmToAddressSheetRef = useRef<BottomSheetBase>(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 useRouteExecution({\n routeId: routeId,\n onAcceptExchangeRateUpdate,\n })\n\n const {\n toAddress,\n hasActivity,\n isLoading: isLoadingAddressActivity,\n isFetched: isActivityAddressFetched,\n } = useAddressActivity(route?.toChainId)\n\n const getHeaderTitle = () => {\n if (subvariant === 'custom') {\n return t(`header.${subvariantOptions?.custom ?? '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 if (!route) {\n return null\n }\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 (subvariant === 'custom') {\n setFieldValue('fromToken', '')\n setFieldValue('toToken', '')\n }\n // Once transaction is started, set the back action to navigate to the home page\n setBackAction(() => {\n navigate({ to: navigationRoutes.home, replace: true })\n })\n }\n\n const handleStartClick = async () => {\n if (status === RouteExecutionStatus.Idle) {\n if (\n toAddress &&\n !hasActivity &&\n !isLoadingAddressActivity &&\n isActivityAddressFetched &&\n !hiddenUI?.includes(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 && subvariant !== 'custom') {\n tokenValueBottomSheetRef.current?.open()\n } else {\n handleExecuteRoute()\n }\n }\n if (status === RouteExecutionStatus.Failed) {\n restartRoute()\n }\n }\n\n const handleRemoveRoute = () => {\n navigateBack()\n deleteRoute()\n }\n\n const getButtonText = (): string => {\n switch (status) {\n case RouteExecutionStatus.Idle:\n switch (subvariant) {\n case 'custom':\n return subvariantOptions?.custom === '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 case RouteExecutionStatus.Failed:\n return t('button.tryAgain')\n default:\n return ''\n }\n }\n\n return (\n <PageContainer bottomGutters>\n {getStepList(route, subvariant)}\n {subvariant === 'custom' && contractSecondaryComponent ? (\n <ContractComponent sx={{ marginTop: 2 }}>\n {contractSecondaryComponent}\n </ContractComponent>\n ) : null}\n <TransactionDetails route={route} sx={{ marginTop: 2 }} />\n {status === RouteExecutionStatus.Idle \|\|\n status === RouteExecutionStatus.Failed ? (\n <>\n <WarningMessages sx={{ mt: 2 }} route={route} allowInteraction />\n <Box\n sx={{\n mt: 2,\n display: 'flex',\n }}\n >\n <StartTransactionButton\n text={getButtonText()}\n onClick={handleStartClick}\n route={route}\n loading={routeRefreshing \|\| isLoadingAddressActivity}\n />\n {status === RouteExecutionStatus.Failed ? (\n <Tooltip\n title={t('button.clearTransaction')}\n placement=\"bottom-end\"\n >\n <Button\n onClick={handleRemoveRoute}\n sx={{\n minWidth: 48,\n marginLeft: 1,\n }}\n >\n <Delete />\n </Button>\n </Tooltip>\n ) : null}\n </Box>\n </>\n ) : null}\n {status ? <StatusBottomSheet status={status} route={route} /> : null}\n {subvariant !== 'custom' ? (\n <TokenValueBottomSheet\n route={route}\n ref={tokenValueBottomSheetRef}\n onContinue={handleExecuteRoute}\n />\n ) : null}\n <ExchangeRateBottomSheet ref={exchangeRateBottomSheetRef} />\n {!hiddenUI?.includes(HiddenUI.LowAddressActivityConfirmation) ? (\n <ConfirmToAddressSheet\n ref={confirmToAddressSheetRef}\n onContinue={handleExecuteRoute}\n toAddress={toAddress!}\n toChainId={route.toChainId!}\n />\n ) : null}\n </PageContainer>\n )\n}\n"],"mappings":"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"}