@lifi/widget 0.0.0-preview-6cc63bac

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

@@ -0,0 +1,81 @@
+import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
+import "../../types/events.js";
+import { useChain } from "../../hooks/useChain.js";
+import { AlertMessage } from "../../components/Messages/AlertMessage.js";
+import { BottomSheet } from "../../components/BottomSheet/BottomSheet.js";
+import { IconContainer, SendToWalletButtonRow, SendToWalletSheetContainer, SheetAddressContainer } from "../SendToWallet/SendToWalletPage.style.js";
+import { useSetContentHeight } from "../../hooks/useSetContentHeight.js";
+import { forwardRef, useRef } from "react";
+import { Button, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Wallet from "@mui/icons-material/Wallet";
+import WarningRounded from "@mui/icons-material/WarningRounded";
+//#region src/pages/TransactionPage/ConfirmToAddressSheet.tsx
+const ConfirmToAddressSheet = forwardRef((props, ref) => {
+	const handleClose = () => {
+		ref.current?.close();
+	};
+	return /* @__PURE__ */ jsx(BottomSheet, {
+		ref,
+		children: /* @__PURE__ */ jsx(ConfirmToAddressSheetContent, {
+			...props,
+			onClose: handleClose
+		})
+	});
+});
+const ConfirmToAddressSheetContent = ({ onContinue, onClose, toAddress, toChainId }) => {
+	const { t } = useTranslation();
+	const { chain } = useChain(toChainId);
+	const emitter = useWidgetEvents();
+	const ref = useRef(null);
+	useSetContentHeight(ref);
+	const handleContinue = () => {
+		emitter.emit("lowAddressActivityConfirmed", {
+			address: toAddress,
+			chainId: toChainId
+		});
+		onClose();
+		onContinue();
+	};
+	return /* @__PURE__ */ jsxs(SendToWalletSheetContainer, {
+		ref,
+		children: [
+			/* @__PURE__ */ jsx(IconContainer, { children: /* @__PURE__ */ jsx(Wallet, { sx: { fontSize: 40 } }) }),
+			/* @__PURE__ */ jsx(Typography, {
+				variant: "h6",
+				sx: {
+					textAlign: "center",
+					mb: 2
+				},
+				children: t("warning.title.lowAddressActivity")
+			}),
+			/* @__PURE__ */ jsx(SheetAddressContainer, { children: /* @__PURE__ */ jsx(Typography, { children: toAddress }) }),
+			/* @__PURE__ */ jsx(AlertMessage, {
+				severity: "warning",
+				title: /* @__PURE__ */ jsx(Typography, {
+					variant: "body2",
+					sx: { color: "text.primary" },
+					children: t("warning.message.lowAddressActivity", { chainName: chain?.name })
+				}),
+				icon: /* @__PURE__ */ jsx(WarningRounded, {}),
+				multiline: true
+			}),
+			/* @__PURE__ */ jsxs(SendToWalletButtonRow, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				onClick: onClose,
+				fullWidth: true,
+				children: t("button.cancel")
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "contained",
+				onClick: handleContinue,
+				fullWidth: true,
+				children: t("button.continue")
+			})] })
+		]
+	});
+};
+//#endregion
+export { ConfirmToAddressSheet };
+
+//# sourceMappingURL=ConfirmToAddressSheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmToAddressSheet.js","names":[],"sources":["../../../../src/pages/TransactionPage/ConfirmToAddressSheet.tsx"],"sourcesContent":["import Wallet from '@mui/icons-material/Wallet'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { 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 { AlertMessage } from '../../components/Messages/AlertMessage.js'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport {\n  IconContainer,\n  SendToWalletButtonRow,\n  SendToWalletSheetContainer,\n  SheetAddressContainer,\n} from '../SendToWallet/SendToWalletPage.style.js'\n\ninterface ConfirmToAddressSheetProps {\n  onContinue: () => void\n  toAddress: string\n  toChainId: number\n}\n\ninterface ConfirmToAddressSheetContentProps extends ConfirmToAddressSheetProps {\n  onClose: () => void\n}\n\nexport const ConfirmToAddressSheet: ForwardRefExoticComponent<\n  ConfirmToAddressSheetProps & RefAttributes<BottomSheetBase>\n> = forwardRef<BottomSheetBase, ConfirmToAddressSheetProps>((props, ref) => {\n  const handleClose = () => {\n    ;(ref as RefObject<BottomSheetBase>).current?.close()\n  }\n\n  return (\n    <BottomSheet ref={ref}>\n      <ConfirmToAddressSheetContent {...props} onClose={handleClose} />\n    </BottomSheet>\n  )\n})\n\nconst ConfirmToAddressSheetContent: React.FC<\n  ConfirmToAddressSheetContentProps\n> = ({ onContinue, onClose, toAddress, toChainId }) => {\n  const { t } = useTranslation()\n  const { chain } = useChain(toChainId)\n  const emitter = useWidgetEvents()\n  const ref = useRef<HTMLElement>(null)\n  useSetContentHeight(ref)\n\n  const handleContinue = () => {\n    emitter.emit(WidgetEvent.LowAddressActivityConfirmed, {\n      address: toAddress,\n      chainId: toChainId,\n    })\n    onClose()\n    onContinue()\n  }\n\n  return (\n    <SendToWalletSheetContainer ref={ref}>\n      <IconContainer>\n        <Wallet sx={{ fontSize: 40 }} />\n      </IconContainer>\n      <Typography variant=\"h6\" sx={{ textAlign: 'center', mb: 2 }}>\n        {t('warning.title.lowAddressActivity')}\n      </Typography>\n      <SheetAddressContainer>\n        <Typography>{toAddress}</Typography>\n      </SheetAddressContainer>\n      <AlertMessage\n        severity=\"warning\"\n        title={\n          <Typography variant=\"body2\" sx={{ color: 'text.primary' }}>\n            {t('warning.message.lowAddressActivity', {\n              chainName: chain?.name,\n            })}\n          </Typography>\n        }\n        icon={<WarningRounded />}\n        multiline\n      />\n      <SendToWalletButtonRow>\n        <Button variant=\"text\" onClick={onClose} fullWidth>\n          {t('button.cancel')}\n        </Button>\n        <Button variant=\"contained\" onClick={handleContinue} fullWidth>\n          {t('button.continue')}\n        </Button>\n      </SendToWalletButtonRow>\n    </SendToWalletSheetContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AA8BA,MAAa,wBAET,YAAyD,OAAO,QAAQ;CAC1E,MAAM,oBAAoB;EACvB,IAAoC,SAAS,MAAM;CACtD;CAEA,OACE,oBAAC,aAAD;EAAkB;YAChB,oBAAC,8BAAD;GAA8B,GAAI;GAAO,SAAS;EAAc,CAAA;CACrD,CAAA;AAEjB,CAAC;AAED,MAAM,gCAED,EAAE,YAAY,SAAS,WAAW,gBAAgB;CACrD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,UAAU,SAAS,SAAS;CACpC,MAAM,UAAU,gBAAgB;CAChC,MAAM,MAAM,OAAoB,IAAI;CACpC,oBAAoB,GAAG;CAEvB,MAAM,uBAAuB;EAC3B,QAAQ,KAAA,+BAA8C;GACpD,SAAS;GACT,SAAS;EACX,CAAC;EACD,QAAQ;EACR,WAAW;CACb;CAEA,OACE,qBAAC,4BAAD;EAAiC;YAAjC;GACE,oBAAC,eAAD,EAAA,UACE,oBAAC,QAAD,EAAQ,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA,EAClB,CAAA;GACf,oBAAC,YAAD;IAAY,SAAQ;IAAK,IAAI;KAAE,WAAW;KAAU,IAAI;IAAE;cACvD,EAAE,kCAAkC;GAC3B,CAAA;GACZ,oBAAC,uBAAD,EAAA,UACE,oBAAC,YAAD,EAAA,UAAa,UAAsB,CAAA,EACd,CAAA;GACvB,oBAAC,cAAD;IACE,UAAS;IACT,OACE,oBAAC,YAAD;KAAY,SAAQ;KAAQ,IAAI,EAAE,OAAO,eAAe;eACrD,EAAE,sCAAsC,EACvC,WAAW,OAAO,KACpB,CAAC;IACS,CAAA;IAEd,MAAM,oBAAC,gBAAD,CAAiB,CAAA;IACvB,WAAA;GACD,CAAA;GACD,qBAAC,uBAAD,EAAA,UAAA,CACE,oBAAC,QAAD;IAAQ,SAAQ;IAAO,SAAS;IAAS,WAAA;cACtC,EAAE,eAAe;GACZ,CAAA,GACR,oBAAC,QAAD;IAAQ,SAAQ;IAAY,SAAS;IAAgB,WAAA;cAClD,EAAE,iBAAiB;GACd,CAAA,CACa,EAAA,CAAA;EACG;;AAEhC"}

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

@@ -0,0 +1,146 @@
+import { formatTokenAmount } from "../../utils/format.js";
+import { IconCircle } from "../../components/IconCircle/IconCircle.js";
+import { BottomSheet } from "../../components/BottomSheet/BottomSheet.js";
+import { useSetContentHeight } from "../../hooks/useSetContentHeight.js";
+import { CenterContainer } from "./ExchangeRateBottomSheet.style.js";
+import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
+import { Box, Button, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/TransactionPage/ExchangeRateBottomSheet.tsx
+const ExchangeRateBottomSheet = forwardRef(({ onContinue, onCancel }, ref) => {
+	const [data, setData] = useState();
+	const bottomSheetRef = useRef(null);
+	const resolverRef = useRef(null);
+	const handleContinue = () => {
+		ref.current?.close(true);
+		onContinue?.();
+	};
+	const handleCancel = useCallback(() => {
+		ref.current?.close(false);
+		onCancel?.();
+	}, [onCancel, ref]);
+	const handleClose = useCallback(() => {
+		ref.current?.close(false, false);
+		onCancel?.();
+	}, [onCancel, ref]);
+	useImperativeHandle(ref, () => ({
+		isOpen: () => bottomSheetRef.current?.isOpen(),
+		open: (resolver, data) => {
+			setData(data);
+			resolverRef.current = resolver;
+			bottomSheetRef.current?.open();
+		},
+		close: (value = false, bottomSheetClose = true) => {
+			resolverRef.current?.(value);
+			if (bottomSheetClose) bottomSheetRef.current?.close();
+		}
+	}), []);
+	return /* @__PURE__ */ jsx(BottomSheet, {
+		ref: bottomSheetRef,
+		onClose: handleClose,
+		children: /* @__PURE__ */ jsx(ExchangeRateBottomSheetContent, {
+			data,
+			onContinue: handleContinue,
+			onCancel: handleCancel
+		})
+	});
+});
+const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
+	const { t } = useTranslation();
+	const ref = useRef(null);
+	useSetContentHeight(ref);
+	if (!data) return;
+	const oldAmount = BigInt(data.oldToAmount || 1);
+	const rateChange = (Number(BigInt(data.newToAmount || 0) * 1000000n / oldAmount) / 1e6 * 100 - 100).toFixed(2);
+	return /* @__PURE__ */ jsxs(Box, {
+		ref,
+		sx: { p: 3 },
+		children: [
+			/* @__PURE__ */ jsxs(CenterContainer, { children: [/* @__PURE__ */ jsx(IconCircle, {
+				status: "warning",
+				sx: { mb: 1 }
+			}), /* @__PURE__ */ jsx(Typography, {
+				sx: {
+					py: 1,
+					fontSize: 18,
+					fontWeight: 700
+				},
+				children: t("warning.title.rateChanged")
+			})] }),
+			/* @__PURE__ */ jsx(Typography, {
+				sx: { py: 1 },
+				children: t("warning.message.rateChanged")
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					justifyContent: "space-between",
+					mt: 1
+				},
+				children: [/* @__PURE__ */ jsx(Typography, { children: t("main.quotedAmount") }), /* @__PURE__ */ jsxs(Typography, {
+					sx: { fontWeight: 600 },
+					children: [
+						t("format.tokenAmount", { value: formatTokenAmount(BigInt(data.oldToAmount), data.toToken.decimals) }),
+						" ",
+						data?.toToken.symbol
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					justifyContent: "space-between",
+					mt: .25
+				},
+				children: [/* @__PURE__ */ jsx(Typography, { children: t("main.currentAmount") }), /* @__PURE__ */ jsxs(Typography, {
+					sx: { fontWeight: 600 },
+					children: [
+						t("format.tokenAmount", { value: formatTokenAmount(BigInt(data?.newToAmount), data?.toToken.decimals) }),
+						" ",
+						data?.toToken.symbol
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					justifyContent: "space-between",
+					mt: .25
+				},
+				children: [/* @__PURE__ */ jsx(Typography, { children: t("main.rateChange") }), /* @__PURE__ */ jsxs(Typography, {
+					sx: { fontWeight: 600 },
+					children: [rateChange, "%"]
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					mt: 3
+				},
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						onClick: onCancel,
+						fullWidth: true,
+						children: t("button.cancel")
+					}),
+					/* @__PURE__ */ jsx(Box, { sx: {
+						display: "flex",
+						p: 1
+					} }),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "contained",
+						onClick: onContinue,
+						fullWidth: true,
+						children: t("button.continue")
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { ExchangeRateBottomSheet };
+
+//# sourceMappingURL=ExchangeRateBottomSheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExchangeRateBottomSheet.js","names":[],"sources":["../../../../src/pages/TransactionPage/ExchangeRateBottomSheet.tsx"],"sourcesContent":["import type { ExchangeRateUpdateParams } from '@lifi/sdk'\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 { IconCircle } from '../../components/IconCircle/IconCircle.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport { formatTokenAmount } from '../../utils/format.js'\nimport { CenterContainer } from './ExchangeRateBottomSheet.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        <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/ExchangeRateBottomSheet.style.js

@@ -0,0 +1,11 @@
+import { Box, styled } from "@mui/material";
+//#region src/pages/TransactionPage/ExchangeRateBottomSheet.style.tsx
+const CenterContainer = styled(Box)(() => ({
+	display: "grid",
+	placeItems: "center",
+	position: "relative"
+}));
+//#endregion
+export { CenterContainer };
+
+//# sourceMappingURL=ExchangeRateBottomSheet.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExchangeRateBottomSheet.style.js","names":[],"sources":["../../../../src/pages/TransactionPage/ExchangeRateBottomSheet.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const CenterContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(() => ({\n    display: 'grid',\n    placeItems: 'center',\n    position: 'relative',\n  }))\n"],"mappings":";;AAGA,MAAa,kBACX,OAAO,GAAG,SAAS;CACjB,SAAS;CACT,YAAY;CACZ,UAAU;AACZ,EAAE"}

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

@@ -0,0 +1,38 @@
+import { Card as Card$1 } from "../../components/Card/Card.js";
+import { hasEnumFlag } from "../../utils/enum.js";
+import { getExecutionToToken } from "../../utils/token.js";
+import { Token } from "../../components/Token/Token.js";
+import { CardTitle } from "../../components/Card/CardTitle.js";
+import { Box } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/TransactionPage/ExecutionDoneCard.tsx
+const ExecutionDoneCard = ({ route, status }) => {
+	const { t } = useTranslation();
+	const toToken = getExecutionToToken(route);
+	return /* @__PURE__ */ jsxs(Card$1, {
+		type: "default",
+		indented: true,
+		children: [/* @__PURE__ */ jsx(Box, {
+			sx: {
+				display: "flex",
+				justifyContent: "space-between",
+				alignItems: "center"
+			},
+			children: /* @__PURE__ */ jsx(CardTitle, {
+				sx: {
+					padding: 0,
+					mb: 2
+				},
+				children: hasEnumFlag(status, 32) ? t("header.refunded") : t("header.received")
+			})
+		}), /* @__PURE__ */ jsx(Token, {
+			token: toToken,
+			disableDescription: false
+		})]
+	});
+};
+//#endregion
+export { ExecutionDoneCard };
+
+//# sourceMappingURL=ExecutionDoneCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExecutionDoneCard.js","names":["Card"],"sources":["../../../../src/pages/TransactionPage/ExecutionDoneCard.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport type React from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Card } from '../../components/Card/Card.js'\nimport { CardTitle } from '../../components/Card/CardTitle.js'\nimport { Token } from '../../components/Token/Token.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { hasEnumFlag } from '../../utils/enum.js'\nimport { getExecutionToToken } from '../../utils/token.js'\n\ninterface ExecutionDoneCardProps {\n  route: RouteExtended\n  status: RouteExecutionStatus\n}\n\nexport const ExecutionDoneCard: React.FC<ExecutionDoneCardProps> = ({\n  route,\n  status,\n}) => {\n  const { t } = useTranslation()\n\n  const toToken = getExecutionToToken(route)\n\n  return (\n    <Card type=\"default\" indented>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n        }}\n      >\n        <CardTitle sx={{ padding: 0, mb: 2 }}>\n          {hasEnumFlag(status, RouteExecutionStatus.Refunded)\n            ? t('header.refunded')\n            : t('header.received')}\n        </CardTitle>\n      </Box>\n      <Token token={toToken} disableDescription={false} />\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;AAgBA,MAAa,qBAAuD,EAClE,OACA,aACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,UAAU,oBAAoB,KAAK;CAEzC,OACE,qBAACA,QAAD;EAAM,MAAK;EAAU,UAAA;YAArB,CACE,oBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,gBAAgB;IAChB,YAAY;GACd;aAEA,oBAAC,WAAD;IAAW,IAAI;KAAE,SAAS;KAAG,IAAI;IAAE;cAChC,YAAY,QAAA,EAAqC,IAC9C,EAAE,iBAAiB,IACnB,EAAE,iBAAiB;GACd,CAAA;EACR,CAAA,GACL,oBAAC,OAAD;GAAO,OAAO;GAAS,oBAAoB;EAAQ,CAAA,CAC/C;;AAEV"}

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

@@ -0,0 +1,47 @@
+import { useRouteExecutionStoreContext } from "../../stores/routes/RouteExecutionStore.js";
+import { useSetExecutableRoute } from "../../stores/routes/useSetExecutableRoute.js";
+import { useRoutes } from "../../hooks/useRoutes.js";
+import { ProgressToNextUpdate } from "../../components/ProgressToNextUpdate.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/TransactionPage/RouteTracker.tsx
+const RouteTracker = ({ observableRouteId, onChange, onFetching }) => {
+	const routeExecutionStore = useRouteExecutionStoreContext();
+	const setExecutableRoute = useSetExecutableRoute();
+	const [observableRoute] = useState(() => routeExecutionStore.getState().routes[observableRouteId]?.route);
+	const observableRouteIdRef = useRef(observableRoute?.id);
+	const { routes, isFetching, dataUpdatedAt, refetchTime, refetch } = useRoutes({ observableRoute });
+	const currentRoute = routes?.[0];
+	/**
+	* The reviewable route is the route that the user currently sees on the review page.
+	* The observable route is the route for which we track bridges and exchanges.
+	* This allows us to query the route using the same tool each time we refresh.
+	* The observable and reviewable routes can be the same when we first enter the review page.
+	*/
+	useEffect(() => {
+		if (observableRouteIdRef.current && currentRoute && observableRouteIdRef.current !== currentRoute.id) {
+			const reviewableRouteId = observableRouteIdRef.current;
+			observableRouteIdRef.current = currentRoute.id;
+			setExecutableRoute(currentRoute, [observableRouteId, reviewableRouteId]);
+			onChange(currentRoute.id);
+		}
+	}, [currentRoute?.id, observableRouteId]);
+	useEffect(() => {
+		onFetching(isFetching);
+	}, [isFetching, onFetching]);
+	const handleRefetch = () => {
+		refetch();
+	};
+	return /* @__PURE__ */ jsx(ProgressToNextUpdate, {
+		updatedAt: dataUpdatedAt || Date.now(),
+		timeToUpdate: refetchTime,
+		isLoading: isFetching,
+		onClick: handleRefetch,
+		sx: { marginRight: -1 },
+		size: "medium"
+	});
+};
+//#endregion
+export { RouteTracker };
+
+//# sourceMappingURL=RouteTracker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RouteTracker.js","names":[],"sources":["../../../../src/pages/TransactionPage/RouteTracker.tsx"],"sourcesContent":["import type { Dispatch, JSX, SetStateAction } from 'react'\nimport { useEffect, useRef, useState } from 'react'\nimport { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useRouteExecutionStoreContext } from '../../stores/routes/RouteExecutionStore.js'\nimport { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js'\n\ninterface RouteTrackerProps {\n  observableRouteId: string\n  onChange: Dispatch<SetStateAction<string>>\n  onFetching: Dispatch<SetStateAction<boolean>>\n}\n\nexport const RouteTracker = ({\n  observableRouteId,\n  onChange,\n  onFetching,\n}: RouteTrackerProps): JSX.Element => {\n  const routeExecutionStore = useRouteExecutionStoreContext()\n  const setExecutableRoute = useSetExecutableRoute()\n  const [observableRoute] = useState(\n    () => routeExecutionStore.getState().routes[observableRouteId]?.route\n  )\n  const observableRouteIdRef = useRef(observableRoute?.id)\n  const { routes, isFetching, dataUpdatedAt, refetchTime, refetch } = useRoutes(\n    { observableRoute }\n  )\n  const currentRoute = routes?.[0]\n\n  /**\n   * The reviewable route is the route that the user currently sees on the review page.\n   * The observable route is the route for which we track bridges and exchanges.\n   * This allows us to query the route using the same tool each time we refresh.\n   * The observable and reviewable routes can be the same when we first enter the review page.\n   */\n  // biome-ignore lint/correctness/useExhaustiveDependencies: run only when currentRoute changes\n  useEffect(() => {\n    if (\n      observableRouteIdRef.current &&\n      currentRoute &&\n      observableRouteIdRef.current !== currentRoute.id\n    ) {\n      const reviewableRouteId = observableRouteIdRef.current\n      observableRouteIdRef.current = currentRoute.id\n      setExecutableRoute(currentRoute, [observableRouteId, reviewableRouteId])\n      onChange(currentRoute.id)\n    }\n  }, [currentRoute?.id, observableRouteId])\n\n  useEffect(() => {\n    onFetching(isFetching)\n  }, [isFetching, onFetching])\n\n  const handleRefetch = () => {\n    refetch()\n  }\n\n  return (\n    <ProgressToNextUpdate\n      updatedAt={dataUpdatedAt || Date.now()}\n      timeToUpdate={refetchTime}\n      isLoading={isFetching}\n      onClick={handleRefetch}\n      sx={{ marginRight: -1 }}\n      size=\"medium\"\n    />\n  )\n}\n"],"mappings":";;;;;;;AAaA,MAAa,gBAAgB,EAC3B,mBACA,UACA,iBACoC;CACpC,MAAM,sBAAsB,8BAA8B;CAC1D,MAAM,qBAAqB,sBAAsB;CACjD,MAAM,CAAC,mBAAmB,eAClB,oBAAoB,SAAS,EAAE,OAAO,oBAAoB,KAClE;CACA,MAAM,uBAAuB,OAAO,iBAAiB,EAAE;CACvD,MAAM,EAAE,QAAQ,YAAY,eAAe,aAAa,YAAY,UAClE,EAAE,gBAAgB,CACpB;CACA,MAAM,eAAe,SAAS;;;;;;;CAS9B,gBAAgB;EACd,IACE,qBAAqB,WACrB,gBACA,qBAAqB,YAAY,aAAa,IAC9C;GACA,MAAM,oBAAoB,qBAAqB;GAC/C,qBAAqB,UAAU,aAAa;GAC5C,mBAAmB,cAAc,CAAC,mBAAmB,iBAAiB,CAAC;GACvE,SAAS,aAAa,EAAE;EAC1B;CACF,GAAG,CAAC,cAAc,IAAI,iBAAiB,CAAC;CAExC,gBAAgB;EACd,WAAW,UAAU;CACvB,GAAG,CAAC,YAAY,UAAU,CAAC;CAE3B,MAAM,sBAAsB;EAC1B,QAAQ;CACV;CAEA,OACE,oBAAC,sBAAD;EACE,WAAW,iBAAiB,KAAK,IAAI;EACrC,cAAc;EACd,WAAW;EACX,SAAS;EACT,IAAI,EAAE,aAAa,GAAG;EACtB,MAAK;CACN,CAAA;AAEL"}

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

@@ -0,0 +1,21 @@
+import { useMessageQueue } from "../../components/Messages/useMessageQueue.js";
+import { BaseTransactionButton } from "../../components/BaseTransactionButton/BaseTransactionButton.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/TransactionPage/StartTransactionButton.tsx
+const StartTransactionButton = ({ onClick, route, text, loading }) => {
+	const { messages, isLoading } = useMessageQueue(route, true);
+	return /* @__PURE__ */ jsx(BaseTransactionButton, {
+		onClick,
+		text,
+		disabled: useMemo(() => {
+			return messages.some((message) => message.id !== "INSUFFICIENT_GAS");
+		}, [messages]),
+		loading: isLoading || loading,
+		route
+	});
+};
+//#endregion
+export { StartTransactionButton };
+
+//# sourceMappingURL=StartTransactionButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StartTransactionButton.js","names":[],"sources":["../../../../src/pages/TransactionPage/StartTransactionButton.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js'\nimport { useMessageQueue } from '../../components/Messages/useMessageQueue.js'\nimport type { StartTransactionButtonProps } from './types.js'\n\nexport const StartTransactionButton: React.FC<StartTransactionButtonProps> = ({\n  onClick,\n  route,\n  text,\n  loading,\n}) => {\n  const { messages, isLoading } = useMessageQueue(route, true)\n\n  const hasNonGasMessages = useMemo(() => {\n    return messages.some((message) => message.id !== 'INSUFFICIENT_GAS')\n  }, [messages])\n\n  return (\n    <BaseTransactionButton\n      onClick={onClick}\n      text={text}\n      disabled={hasNonGasMessages}\n      loading={isLoading || loading}\n      route={route}\n    />\n  )\n}\n"],"mappings":";;;;;AAKA,MAAa,0BAAiE,EAC5E,SACA,OACA,MACA,cACI;CACJ,MAAM,EAAE,UAAU,cAAc,gBAAgB,OAAO,IAAI;CAM3D,OACE,oBAAC,uBAAD;EACW;EACH;EACN,UARsB,cAAc;GACtC,OAAO,SAAS,MAAM,YAAY,QAAQ,OAAO,kBAAkB;EACrE,GAAG,CAAC,QAAQ,CAMkB;EAC1B,SAAS,aAAa;EACf;CACR,CAAA;AAEL"}

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

@@ -0,0 +1,82 @@
+import { getAccumulatedFeeCostsBreakdown } from "../../utils/fees.js";
+import { FeeBreakdownTooltip } from "../../components/FeeBreakdownTooltip.js";
+import { IconCircle } from "../../components/IconCircle/IconCircle.js";
+import { BottomSheet } from "../../components/BottomSheet/BottomSheet.js";
+import { useSetContentHeight } from "../../hooks/useSetContentHeight.js";
+import { ButtonRow, CenterContainer, ContentContainer, DetailLabel, DetailRow, DetailValue, WarningMessage, WarningTitle } from "./TokenValueBottomSheet.style.js";
+import { calculateValueLossPercentage } from "./utils.js";
+import { forwardRef, useRef, useState } from "react";
+import { Button, Checkbox, FormControlLabel } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/TransactionPage/TokenValueBottomSheet.tsx
+const TokenValueBottomSheet = forwardRef(({ route, onContinue, onCancel }, ref) => {
+	const handleCancel = () => {
+		ref.current?.close();
+		onCancel?.();
+	};
+	return /* @__PURE__ */ jsx(BottomSheet, {
+		ref,
+		onClose: onCancel,
+		children: /* @__PURE__ */ jsx(TokenValueBottomSheetContent, {
+			route,
+			onContinue,
+			onCancel: handleCancel
+		})
+	});
+});
+const TokenValueBottomSheetContent = ({ route, onCancel, onContinue }) => {
+	const [accepted, setAccepted] = useState(false);
+	const { t } = useTranslation();
+	const ref = useRef(null);
+	useSetContentHeight(ref);
+	const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
+	const fromAmountUSD = Number.parseFloat(route.fromAmountUSD);
+	const toAmountUSD = Number.parseFloat(route.toAmountUSD);
+	return /* @__PURE__ */ jsxs(ContentContainer, {
+		ref,
+		children: [
+			/* @__PURE__ */ jsxs(CenterContainer, { children: [/* @__PURE__ */ jsx(IconCircle, {
+				status: "warning",
+				sx: { mb: 2.5 }
+			}), /* @__PURE__ */ jsx(WarningTitle, { children: t("warning.title.highValueLoss") })] }),
+			/* @__PURE__ */ jsx(WarningMessage, { children: t("warning.message.highValueLoss") }),
+			/* @__PURE__ */ jsxs(DetailRow, { children: [/* @__PURE__ */ jsx(DetailLabel, { children: t("main.sending") }), /* @__PURE__ */ jsx(DetailValue, { children: t("format.currency", { value: route.fromAmountUSD }) })] }),
+			/* @__PURE__ */ jsxs(DetailRow, { children: [/* @__PURE__ */ jsx(DetailLabel, { children: t("main.fees.network") }), /* @__PURE__ */ jsx(FeeBreakdownTooltip, {
+				gasCosts,
+				gasless: !gasCostUSD,
+				children: /* @__PURE__ */ jsx(DetailValue, { children: !gasCostUSD ? t("main.fees.free") : t("format.currency", { value: gasCostUSD }) })
+			})] }),
+			feeCostUSD ? /* @__PURE__ */ jsxs(DetailRow, { children: [/* @__PURE__ */ jsx(DetailLabel, { children: t("main.fees.provider") }), /* @__PURE__ */ jsx(FeeBreakdownTooltip, {
+				feeCosts,
+				children: /* @__PURE__ */ jsx(DetailValue, { children: t("format.currency", { value: feeCostUSD }) })
+			})] }) : null,
+			/* @__PURE__ */ jsxs(DetailRow, { children: [/* @__PURE__ */ jsx(DetailLabel, { children: t("main.receiving") }), /* @__PURE__ */ jsx(DetailValue, { children: t("format.currency", { value: route.toAmountUSD }) })] }),
+			/* @__PURE__ */ jsxs(DetailRow, { children: [/* @__PURE__ */ jsx(DetailLabel, { children: t("main.valueLoss") }), /* @__PURE__ */ jsxs(DetailValue, { 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(ButtonRow, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				onClick: onCancel,
+				fullWidth: true,
+				children: t("button.cancel")
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "contained",
+				onClick: onContinue,
+				disabled: !accepted,
+				fullWidth: true,
+				children: t("button.continue")
+			})] })
+		]
+	});
+};
+//#endregion
+export { TokenValueBottomSheet };
+
+//# sourceMappingURL=TokenValueBottomSheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TokenValueBottomSheet.js","names":[],"sources":["../../../../src/pages/TransactionPage/TokenValueBottomSheet.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport { Button, Checkbox, FormControlLabel } 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 { IconCircle } from '../../components/IconCircle/IconCircle.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport {\n  ButtonRow,\n  CenterContainer,\n  ContentContainer,\n  DetailLabel,\n  DetailRow,\n  DetailValue,\n  WarningMessage,\n  WarningTitle,\n} from './TokenValueBottomSheet.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\n  return (\n    <ContentContainer ref={ref}>\n      <CenterContainer>\n        <IconCircle status=\"warning\" sx={{ mb: 2.5 }} />\n        <WarningTitle>{t('warning.title.highValueLoss')}</WarningTitle>\n      </CenterContainer>\n      <WarningMessage>{t('warning.message.highValueLoss')}</WarningMessage>\n      <DetailRow>\n        <DetailLabel>{t('main.sending')}</DetailLabel>\n        <DetailValue>\n          {t('format.currency', { value: route.fromAmountUSD })}\n        </DetailValue>\n      </DetailRow>\n      <DetailRow>\n        <DetailLabel>{t('main.fees.network')}</DetailLabel>\n        <FeeBreakdownTooltip gasCosts={gasCosts} gasless={!gasCostUSD}>\n          <DetailValue>\n            {!gasCostUSD\n              ? t('main.fees.free')\n              : t('format.currency', { value: gasCostUSD })}\n          </DetailValue>\n        </FeeBreakdownTooltip>\n      </DetailRow>\n      {feeCostUSD ? (\n        <DetailRow>\n          <DetailLabel>{t('main.fees.provider')}</DetailLabel>\n          <FeeBreakdownTooltip feeCosts={feeCosts}>\n            <DetailValue>\n              {t('format.currency', { value: feeCostUSD })}\n            </DetailValue>\n          </FeeBreakdownTooltip>\n        </DetailRow>\n      ) : null}\n      <DetailRow>\n        <DetailLabel>{t('main.receiving')}</DetailLabel>\n        <DetailValue>\n          {t('format.currency', { value: route.toAmountUSD })}\n        </DetailValue>\n      </DetailRow>\n      <DetailRow>\n        <DetailLabel>{t('main.valueLoss')}</DetailLabel>\n        <DetailValue>\n          {calculateValueLossPercentage(\n            fromAmountUSD,\n            toAmountUSD,\n            gasCostUSD,\n            feeCostUSD\n          )}\n          %\n        </DetailValue>\n      </DetailRow>\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      <ButtonRow>\n        <Button variant=\"text\" onClick={onCancel} fullWidth>\n          {t('button.cancel')}\n        </Button>\n        <Button\n          variant=\"contained\"\n          onClick={onContinue}\n          disabled={!accepted}\n          fullWidth\n        >\n          {t('button.continue')}\n        </Button>\n      </ButtonRow>\n    </ContentContainer>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,44 @@
+import { Box, Typography, styled } from "@mui/material";
+//#region src/pages/TransactionPage/TokenValueBottomSheet.style.tsx
+const CenterContainer = styled(Box)(() => ({
+	display: "grid",
+	placeItems: "center",
+	position: "relative"
+}));
+const ContentContainer = styled(Box)(({ theme }) => ({ padding: theme.spacing(3) }));
+const WarningTitle = styled(Typography)(({ theme }) => ({
+	paddingTop: theme.spacing(1),
+	paddingBottom: theme.spacing(1),
+	fontSize: 18,
+	fontWeight: 700
+}));
+const WarningMessage = styled(Typography)(({ theme }) => ({
+	marginBottom: theme.spacing(2.5),
+	fontSize: 14,
+	fontWeight: 500
+}));
+const DetailRow = styled(Box)(({ theme }) => ({
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+	paddingTop: theme.spacing(.75),
+	paddingBottom: theme.spacing(.75)
+}));
+const DetailLabel = styled(Typography)(({ theme }) => ({
+	fontSize: 14,
+	fontWeight: 500,
+	color: theme.vars.palette.text.secondary
+}));
+const DetailValue = styled(Typography)({
+	fontSize: 14,
+	fontWeight: 700
+});
+const ButtonRow = styled(Box)(({ theme }) => ({
+	display: "flex",
+	marginTop: theme.spacing(3),
+	gap: theme.spacing(1.5)
+}));
+//#endregion
+export { ButtonRow, CenterContainer, ContentContainer, DetailLabel, DetailRow, DetailValue, WarningMessage, WarningTitle };
+
+//# sourceMappingURL=TokenValueBottomSheet.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TokenValueBottomSheet.style.js","names":[],"sources":["../../../../src/pages/TransactionPage/TokenValueBottomSheet.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const CenterContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(() => ({\n    display: 'grid',\n    placeItems: 'center',\n    position: 'relative',\n  }))\n\nexport const ContentContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    padding: theme.spacing(3),\n  }))\n\nexport const WarningTitle: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(({ theme }) => ({\n    paddingTop: theme.spacing(1),\n    paddingBottom: theme.spacing(1),\n    fontSize: 18,\n    fontWeight: 700,\n  }))\n\nexport const WarningMessage: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(({ theme }) => ({\n    marginBottom: theme.spacing(2.5),\n    fontSize: 14,\n    fontWeight: 500,\n  }))\n\nexport const DetailRow: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  paddingTop: theme.spacing(0.75),\n  paddingBottom: theme.spacing(0.75),\n}))\n\nexport const DetailLabel: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(({ theme }) => ({\n    fontSize: 14,\n    fontWeight: 500,\n    color: theme.vars.palette.text.secondary,\n  }))\n\nexport const DetailValue: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)({\n    fontSize: 14,\n    fontWeight: 700,\n  })\n\nexport const ButtonRow: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  marginTop: theme.spacing(3),\n  gap: theme.spacing(1.5),\n}))\n"],"mappings":";;AAGA,MAAa,kBACX,OAAO,GAAG,SAAS;CACjB,SAAS;CACT,YAAY;CACZ,UAAU;AACZ,EAAE;AAEJ,MAAa,mBACX,OAAO,GAAG,GAAG,EAAE,aAAa,EAC1B,SAAS,MAAM,QAAQ,CAAC,EAC1B,EAAE;AAEJ,MAAa,eACX,OAAO,UAAU,GAAG,EAAE,aAAa;CACjC,YAAY,MAAM,QAAQ,CAAC;CAC3B,eAAe,MAAM,QAAQ,CAAC;CAC9B,UAAU;CACV,YAAY;AACd,EAAE;AAEJ,MAAa,iBACX,OAAO,UAAU,GAAG,EAAE,aAAa;CACjC,cAAc,MAAM,QAAQ,GAAG;CAC/B,UAAU;CACV,YAAY;AACd,EAAE;AAEJ,MAAa,YAAwD,OACnE,GACF,GAAG,EAAE,aAAa;CAChB,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,YAAY,MAAM,QAAQ,GAAI;CAC9B,eAAe,MAAM,QAAQ,GAAI;AACnC,EAAE;AAEF,MAAa,cACX,OAAO,UAAU,GAAG,EAAE,aAAa;CACjC,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;AACjC,EAAE;AAEJ,MAAa,cACX,OAAO,UAAU,EAAE;CACjB,UAAU;CACV,YAAY;AACd,CAAC;AAEH,MAAa,YAAwD,OACnE,GACF,GAAG,EAAE,aAAa;CAChB,SAAS;CACT,WAAW,MAAM,QAAQ,CAAC;CAC1B,KAAK,MAAM,QAAQ,GAAG;AACxB,EAAE"}

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

@@ -0,0 +1,21 @@
+import { TransactionExecutionContent } from "./TransactionExecutionContent.js";
+import { TransactionReview } from "./TransactionReview.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/TransactionPage/TransactionContent.tsx
+const TransactionContent = ({ route, status, executeRoute, restartRoute, deleteRoute, routeRefreshing }) => {
+	if (status === 1) return /* @__PURE__ */ jsx(TransactionReview, {
+		route,
+		executeRoute,
+		routeRefreshing
+	});
+	return /* @__PURE__ */ jsx(TransactionExecutionContent, {
+		route,
+		status,
+		restartRoute,
+		deleteRoute
+	});
+};
+//#endregion
+export { TransactionContent };
+
+//# sourceMappingURL=TransactionContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionContent.js","names":[],"sources":["../../../../src/pages/TransactionPage/TransactionContent.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport type React from 'react'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { TransactionExecutionContent } from './TransactionExecutionContent.js'\nimport { TransactionReview } from './TransactionReview.js'\n\ninterface TransactionContentProps {\n  route: RouteExtended\n  status: RouteExecutionStatus\n  executeRoute: () => void\n  restartRoute: () => void\n  deleteRoute: () => void\n  routeRefreshing: boolean\n}\n\nexport const TransactionContent: React.FC<TransactionContentProps> = ({\n  route,\n  status,\n  executeRoute,\n  restartRoute,\n  deleteRoute,\n  routeRefreshing,\n}) => {\n  if (status === RouteExecutionStatus.Idle) {\n    return (\n      <TransactionReview\n        route={route}\n        executeRoute={executeRoute}\n        routeRefreshing={routeRefreshing}\n      />\n    )\n  }\n\n  return (\n    <TransactionExecutionContent\n      route={route}\n      status={status}\n      restartRoute={restartRoute}\n      deleteRoute={deleteRoute}\n    />\n  )\n}\n"],"mappings":";;;;AAeA,MAAa,sBAAyD,EACpE,OACA,QACA,cACA,cACA,aACA,sBACI;CACJ,IAAI,WAAA,GACF,OACE,oBAAC,mBAAD;EACS;EACO;EACG;CAClB,CAAA;CAIL,OACE,oBAAC,6BAAD;EACS;EACC;EACM;EACD;CACd,CAAA;AAEL"}

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

@@ -0,0 +1,46 @@
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { formatTokenAmount } from "../../utils/format.js";
+import { hasEnumFlag } from "../../utils/enum.js";
+import { getExecutionToToken } from "../../utils/token.js";
+import { useClearAmountFields } from "../../stores/form/useClearAmountFields.js";
+import { useNavigate } from "@tanstack/react-router";
+import { Button } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/TransactionPage/TransactionDoneButtons.tsx
+const TransactionDoneButtons = ({ route, status }) => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const { setFieldValue } = useFieldActions();
+	const clearAmountFields = useClearAmountFields();
+	if (!hasEnumFlag(status, 4)) return null;
+	const handlePartialDone = () => {
+		const toToken = getExecutionToToken(route);
+		if (toToken.chainId !== route.toToken.chainId && toToken.address !== route.toToken.address) {
+			setFieldValue("fromAmount", formatTokenAmount(toToken.amount, toToken.decimals), { isTouched: true });
+			setFieldValue("fromChain", toToken.chainId, { isTouched: true });
+			setFieldValue("fromToken", toToken.address, { isTouched: true });
+			setFieldValue("toChain", route.toToken.chainId, { isTouched: true });
+			setFieldValue("toToken", route.toToken.address, { isTouched: true });
+		} else clearAmountFields();
+	};
+	const handleClick = () => {
+		if (hasEnumFlag(status, 16)) handlePartialDone();
+		else clearAmountFields();
+		navigate({
+			to: navigationRoutes.home,
+			replace: true
+		});
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "contained",
+		fullWidth: true,
+		onClick: handleClick,
+		children: t("button.done")
+	});
+};
+//#endregion
+export { TransactionDoneButtons };
+
+//# sourceMappingURL=TransactionDoneButtons.js.map