@lifi/widget 4.0.0-beta.9 → 4.0.0

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

@@ -1,39 +1,47 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js';
-import { useRoutes } from '../../hooks/useRoutes.js';
-import { useRouteExecutionStoreContext } from '../../stores/routes/RouteExecutionStore.js';
-import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js';
-export 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.
-     */
-    // biome-ignore lint/correctness/useExhaustiveDependencies: run only when currentRoute changes
-    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 (_jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || Date.now(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: handleRefetch, sx: { marginRight: -1 }, size: "medium" }));
+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

@@ -1 +1 @@
-{"version":3,"file":"RouteTracker.js","sourceRoot":"","sources":["../../../../src/pages/TransactionPage/RouteTracker.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAA;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,EAAE,6BAA6B,EAAE,MAAM,4CAA4C,CAAA;AAC1F,OAAO,EAAE,qBAAqB,EAAE,MAAM,8CAA8C,CAAA;AAQpF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,iBAAiB,EACjB,QAAQ,EACR,UAAU,GACQ,EAAE,EAAE;IACtB,MAAM,mBAAmB,GAAG,6BAA6B,EAAE,CAAA;IAC3D,MAAM,kBAAkB,GAAG,qBAAqB,EAAE,CAAA;IAClD,MAAM,CAAC,eAAe,CAAC,GAAG,QAAQ,CAChC,GAAG,EAAE,CAAC,mBAAmB,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,KAAK,CACtE,CAAA;IACD,MAAM,oBAAoB,GAAG,MAAM,CAAC,eAAe,EAAE,EAAE,CAAC,CAAA;IACxD,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,SAAS,CAC3E,EAAE,eAAe,EAAE,CACpB,CAAA;IACD,MAAM,YAAY,GAAG,MAAM,EAAE,CAAC,CAAC,CAAC,CAAA;IAEhC;;;;;OAKG;IACH,8FAA8F;IAC9F,SAAS,CAAC,GAAG,EAAE;QACb,IACE,oBAAoB,CAAC,OAAO;YAC5B,YAAY;YACZ,oBAAoB,CAAC,OAAO,KAAK,YAAY,CAAC,EAAE,EAChD,CAAC;YACD,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,OAAO,CAAA;YACtD,oBAAoB,CAAC,OAAO,GAAG,YAAY,CAAC,EAAE,CAAA;YAC9C,kBAAkB,CAAC,YAAY,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,CAAA;YACxE,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,CAAA;QAC3B,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,UAAU,CAAC,CAAA;IACxB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC,CAAA;IAE5B,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,OAAO,EAAE,CAAA;IACX,CAAC,CAAA;IAED,OAAO,CACL,KAAC,oBAAoB,IACnB,SAAS,EAAE,aAAa,IAAI,IAAI,CAAC,GAAG,EAAE,EACtC,YAAY,EAAE,WAAW,EACzB,SAAS,EAAE,UAAU,EACrB,OAAO,EAAE,aAAa,EACtB,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,EACvB,IAAI,EAAC,QAAQ,GACb,CACH,CAAA;AACH,CAAC,CAAA"}
+{"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

@@ -1,12 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js';
-import { useMessageQueue } from '../../components/Messages/useMessageQueue.js';
-export const StartTransactionButton = ({ onClick, route, text, loading, }) => {
-    const { messages, isLoading } = useMessageQueue(route, true);
-    const hasNonGasMessages = useMemo(() => {
-        return messages.some((message) => message.id !== 'INSUFFICIENT_GAS');
-    }, [messages]);
-    return (_jsx(BaseTransactionButton, { onClick: onClick, text: text, disabled: hasNonGasMessages, loading: isLoading || loading, route: route }));
+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

@@ -1 +1 @@
-{"version":3,"file":"StartTransactionButton.js","sourceRoot":"","sources":["../../../../src/pages/TransactionPage/StartTransactionButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,iEAAiE,CAAA;AACvG,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAA;AAG9E,MAAM,CAAC,MAAM,sBAAsB,GAA0C,CAAC,EAC5E,OAAO,EACP,KAAK,EACL,IAAI,EACJ,OAAO,GACR,EAAE,EAAE;IACH,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;IAE5D,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,KAAK,kBAAkB,CAAC,CAAA;IACtE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,OAAO,CACL,KAAC,qBAAqB,IACpB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,iBAAiB,EAC3B,OAAO,EAAE,SAAS,IAAI,OAAO,EAC7B,KAAK,EAAE,KAAK,GACZ,CACH,CAAA;AACH,CAAC,CAAA"}
+{"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

@@ -1,75 +1,82 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import WarningRounded from '@mui/icons-material/WarningRounded';
-import { Box, Button, Typography } from '@mui/material';
-import { forwardRef, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
-import { FeeBreakdownTooltip } from '../../components/FeeBreakdownTooltip.js';
-import { useSetContentHeight } from '../../hooks/useSetContentHeight.js';
-import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js';
-import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js';
-import { calculateValueLossPercentage } from './utils.js';
-export const TokenValueBottomSheet = forwardRef(({ route, onContinue, onCancel }, ref) => {
-    const handleCancel = () => {
-        ;
-        ref.current?.close();
-        onCancel?.();
-    };
-    return (_jsx(BottomSheet, { ref: ref, onClose: onCancel, children: _jsx(TokenValueBottomSheetContent, { route: route, onContinue: onContinue, onCancel: handleCancel }) }));
+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 { 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 (_jsxs(Box, { ref: ref, sx: {
-            p: 3,
-        }, children: [_jsxs(CenterContainer, { children: [_jsx(IconCircle, { status: "warning", mb: 1, children: _jsx(WarningRounded, { color: "warning" }) }), _jsx(Typography, { sx: {
-                            py: 1,
-                            fontSize: 18,
-                            fontWeight: 700,
-                        }, children: t('warning.title.highValueLoss') })] }), _jsx(Typography, { sx: {
-                    py: 1,
-                }, children: t('warning.message.highValueLoss') }), _jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    mt: 1,
-                }, children: [_jsx(Typography, { children: t('main.sending') }), _jsx(Typography, { sx: {
-                            fontWeight: 600,
-                        }, children: t('format.currency', { value: route.fromAmountUSD }) })] }), _jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    mt: 0.25,
-                }, children: [_jsx(Typography, { children: t('main.fees.network') }), _jsx(FeeBreakdownTooltip, { gasCosts: gasCosts, gasless: !gasCostUSD, children: _jsx(Typography, { sx: {
-                                fontWeight: 600,
-                            }, children: !gasCostUSD
-                                ? t('main.fees.free')
-                                : t('format.currency', { value: gasCostUSD }) }) })] }), feeCostUSD ? (_jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    mt: 0.25,
-                }, children: [_jsx(Typography, { children: t('main.fees.provider') }), _jsx(FeeBreakdownTooltip, { feeCosts: feeCosts, children: _jsx(Typography, { sx: {
-                                fontWeight: 600,
-                            }, children: t('format.currency', { value: feeCostUSD }) }) })] })) : null, _jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    mt: 0.25,
-                }, children: [_jsx(Typography, { children: t('main.receiving') }), _jsx(Typography, { sx: {
-                            fontWeight: 600,
-                        }, children: t('format.currency', { value: route.toAmountUSD }) })] }), _jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    mt: 0.25,
-                }, children: [_jsx(Typography, { children: t('main.valueLoss') }), _jsxs(Typography, { sx: {
-                            fontWeight: 600,
-                        }, children: [calculateValueLossPercentage(fromAmountUSD, toAmountUSD, gasCostUSD, feeCostUSD), "%"] })] }), _jsxs(Box, { sx: {
-                    display: 'flex',
-                    mt: 3,
-                }, children: [_jsx(Button, { variant: "text", onClick: onCancel, fullWidth: true, children: t('button.cancel') }), _jsx(Box, { sx: {
-                            display: 'flex',
-                            p: 1,
-                        } }), _jsx(Button, { variant: "contained", onClick: onContinue, fullWidth: true, children: t('button.continue') })] })] }));
+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

@@ -1 +1 @@
-{"version":3,"file":"TokenValueBottomSheet.js","sourceRoot":"","sources":["../../../../src/pages/TransactionPage/TokenValueBottomSheet.tsx"],"names":[],"mappings":"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"}
+{"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

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

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

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

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

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

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