@lifi/widget 4.0.0-beta.9 → 4.1.0

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

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

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

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

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

@@ -1,162 +1,79 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import Delete from '@mui/icons-material/Delete';
-import { Box, Button, Tooltip } from '@mui/material';
-import { useLocation, useNavigate } from '@tanstack/react-router';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
-import { WarningMessages } from '../../components/Messages/WarningMessages.js';
-import { PageContainer } from '../../components/PageContainer.js';
-import { getStepList } from '../../components/Step/StepList.js';
-import { TransactionDetails } from '../../components/TransactionDetails.js';
-import { useAddressActivity } from '../../hooks/useAddressActivity.js';
-import { useHeader } from '../../hooks/useHeader.js';
-import { useNavigateBack } from '../../hooks/useNavigateBack.js';
-import { useRouteExecution } from '../../hooks/useRouteExecution.js';
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { useHeaderStore } from '../../stores/header/useHeaderStore.js';
-import { RouteExecutionStatus } from '../../stores/routes/types.js';
-import { WidgetEvent } from '../../types/events.js';
-import { HiddenUI } from '../../types/widget.js';
-import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
-import { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js';
-import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js';
-import { RouteTracker } from './RouteTracker.js';
-import { StartTransactionButton } from './StartTransactionButton.js';
-import { StatusBottomSheet } from './StatusBottomSheet.js';
-import { TokenValueBottomSheet } from './TokenValueBottomSheet.js';
-import { calculateValueLossPercentage, getTokenValueLossThreshold, } from './utils.js';
-export const TransactionPage = () => {
-    const { t } = useTranslation();
-    const { setFieldValue } = useFieldActions();
-    const emitter = useWidgetEvents();
-    const setBackAction = useHeaderStore((state) => state.setBackAction);
-    const navigate = useNavigate();
-    const navigateBack = useNavigateBack();
-    const { subvariant, subvariantOptions, contractSecondaryComponent, hiddenUI, } = useWidgetConfig();
-    const { search } = useLocation();
-    const stateRouteId = search?.routeId;
-    const [routeId, setRouteId] = useState(stateRouteId);
-    const [routeRefreshing, setRouteRefreshing] = useState(false);
-    const tokenValueBottomSheetRef = useRef(null);
-    const exchangeRateBottomSheetRef = useRef(null);
-    const confirmToAddressSheetRef = useRef(null);
-    const onAcceptExchangeRateUpdate = (resolver, data) => {
-        exchangeRateBottomSheetRef.current?.open(resolver, data);
-    };
-    const { route, status, executeRoute, restartRoute, deleteRoute } = useRouteExecution({
-        routeId: routeId,
-        onAcceptExchangeRateUpdate,
-    });
-    const { toAddress, hasActivity, isLoading: isLoadingAddressActivity, isFetched: isActivityAddressFetched, } = useAddressActivity(route?.toChainId);
-    const getHeaderTitle = () => {
-        if (subvariant === 'custom') {
-            return t(`header.${subvariantOptions?.custom ?? 'checkout'}`);
-        }
-        if (route) {
-            const transactionType = route.fromChainId === route.toChainId ? 'swap' : 'bridge';
-            return status === RouteExecutionStatus.Idle
-                ? t(`button.${transactionType}Review`)
-                : t(`header.${transactionType}`);
-        }
-        return t('header.exchange');
-    };
-    const headerAction = useMemo(() => status === RouteExecutionStatus.Idle ? (_jsx(RouteTracker, { observableRouteId: stateRouteId, onChange: setRouteId, onFetching: setRouteRefreshing })) : undefined, [stateRouteId, status]);
-    useHeader(getHeaderTitle(), headerAction);
-    // biome-ignore lint/correctness/useExhaustiveDependencies: We want to emit event only when the page is mounted
-    useEffect(() => {
-        if (status === RouteExecutionStatus.Idle) {
-            emitter.emit(WidgetEvent.ReviewTransactionPageEntered, route);
-        }
-    }, []);
-    if (!route) {
-        return null;
-    }
-    const handleExecuteRoute = () => {
-        if (tokenValueBottomSheetRef.current?.isOpen()) {
-            const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
-            const fromAmountUSD = Number.parseFloat(route.fromAmountUSD);
-            const toAmountUSD = Number.parseFloat(route.toAmountUSD);
-            emitter.emit(WidgetEvent.RouteHighValueLoss, {
-                fromAmountUSD,
-                toAmountUSD,
-                gasCostUSD,
-                feeCostUSD,
-                valueLoss: calculateValueLossPercentage(fromAmountUSD, toAmountUSD, gasCostUSD, feeCostUSD),
-            });
-        }
-        tokenValueBottomSheetRef.current?.close();
-        executeRoute();
-        setFieldValue('fromAmount', '');
-        if (subvariant === 'custom') {
-            setFieldValue('fromToken', '');
-            setFieldValue('toToken', '');
-        }
-        // Once transaction is started, set the back action to navigate to the home page
-        setBackAction(() => {
-            navigate({ to: navigationRoutes.home, replace: true });
-        });
-    };
-    const handleStartClick = async () => {
-        if (status === RouteExecutionStatus.Idle) {
-            if (toAddress &&
-                !hasActivity &&
-                !isLoadingAddressActivity &&
-                isActivityAddressFetched &&
-                !hiddenUI?.includes(HiddenUI.LowAddressActivityConfirmation)) {
-                confirmToAddressSheetRef.current?.open();
-                return;
-            }
-            const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
-            const fromAmountUSD = Number.parseFloat(route.fromAmountUSD);
-            const toAmountUSD = Number.parseFloat(route.toAmountUSD);
-            const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(fromAmountUSD, toAmountUSD, gasCostUSD, feeCostUSD);
-            if (tokenValueLossThresholdExceeded && subvariant !== 'custom') {
-                tokenValueBottomSheetRef.current?.open();
-            }
-            else {
-                handleExecuteRoute();
-            }
-        }
-        if (status === RouteExecutionStatus.Failed) {
-            restartRoute();
-        }
-    };
-    const handleRemoveRoute = () => {
-        navigateBack();
-        deleteRoute();
-    };
-    const getButtonText = () => {
-        switch (status) {
-            case RouteExecutionStatus.Idle:
-                switch (subvariant) {
-                    case 'custom':
-                        return subvariantOptions?.custom === 'deposit'
-                            ? t('button.deposit')
-                            : t('button.buy');
-                    case 'refuel':
-                        return t('button.startBridging');
-                    default: {
-                        const transactionType = route.fromChainId === route.toChainId ? 'Swapping' : 'Bridging';
-                        return t(`button.start${transactionType}`);
-                    }
-                }
-            case RouteExecutionStatus.Failed:
-                return t('button.tryAgain');
-            default:
-                return '';
-        }
-    };
-    return (_jsxs(PageContainer, { bottomGutters: true, children: [getStepList(route, subvariant), subvariant === 'custom' && contractSecondaryComponent ? (_jsx(ContractComponent, { sx: { marginTop: 2 }, children: contractSecondaryComponent })) : null, _jsx(TransactionDetails, { route: route, sx: { marginTop: 2 } }), status === RouteExecutionStatus.Idle ||
-                status === RouteExecutionStatus.Failed ? (_jsxs(_Fragment, { children: [_jsx(WarningMessages, { mt: 2, route: route, allowInteraction: true }), _jsxs(Box, { sx: {
-                            mt: 2,
-                            display: 'flex',
-                        }, children: [_jsx(StartTransactionButton, { text: getButtonText(), onClick: handleStartClick, route: route, loading: routeRefreshing || isLoadingAddressActivity }), status === RouteExecutionStatus.Failed ? (_jsx(Tooltip, { title: t('button.removeTransaction'), placement: "bottom-end", children: _jsx(Button, { onClick: handleRemoveRoute, sx: {
-                                        minWidth: 48,
-                                        marginLeft: 1,
-                                    }, children: _jsx(Delete, {}) }) })) : null] })] })) : null, status ? _jsx(StatusBottomSheet, { status: status, route: route }) : null, subvariant !== 'custom' ? (_jsx(TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, _jsx(ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef }), !hiddenUI?.includes(HiddenUI.LowAddressActivityConfirmation) ? (_jsx(ConfirmToAddressSheet, { ref: confirmToAddressSheetRef, onContinue: handleExecuteRoute, toAddress: toAddress, toChainId: route.toChainId })) : null] }));
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { PageContainer } from "../../components/PageContainer.js";
+import { hasEnumFlag } from "../../utils/enum.js";
+import { useHeader } from "../../hooks/useHeader.js";
+import { ContractComponent } from "../../components/ContractComponent/ContractComponent.js";
+import { usePacedRouteExecution } from "../../hooks/usePacedRouteExecution.js";
+import { useClearAmountFields } from "../../stores/form/useClearAmountFields.js";
+import { ExchangeRateBottomSheet } from "./ExchangeRateBottomSheet.js";
+import { RouteTracker } from "./RouteTracker.js";
+import { TransactionContent } from "./TransactionContent.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useLocation } from "@tanstack/react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/TransactionPage/TransactionPage.tsx
+const TransactionPage = () => {
+	const { t } = useTranslation();
+	const { mode, modeOptions, contractSecondaryComponent } = useWidgetConfig();
+	const { search } = useLocation();
+	const stateRouteId = search?.routeId;
+	const [routeId, setRouteId] = useState(stateRouteId);
+	const [routeRefreshing, setRouteRefreshing] = useState(false);
+	const clearAmountFields = useClearAmountFields();
+	const exchangeRateBottomSheetRef = useRef(null);
+	const onAcceptExchangeRateUpdate = (resolver, data) => {
+		exchangeRateBottomSheetRef.current?.open(resolver, data);
+	};
+	const { route, status, executeRoute, restartRoute, deleteRoute } = usePacedRouteExecution({
+		routeId,
+		onAcceptExchangeRateUpdate
+	});
+	const statusRef = useRef(status);
+	statusRef.current = status;
+	const getHeaderTitle = () => {
+		if (mode === "custom") return t(`header.${modeOptions?.custom?.type ?? "checkout"}`);
+		if (route) {
+			const transactionType = route.fromChainId === route.toChainId ? "swap" : "bridge";
+			return status === 1 ? t(`button.${transactionType}Review`) : t(`header.${transactionType}`);
+		}
+		return t("header.exchange");
+	};
+	const headerAction = useMemo(() => status === 1 ? /* @__PURE__ */ jsx(RouteTracker, {
+		observableRouteId: stateRouteId,
+		onChange: setRouteId,
+		onFetching: setRouteRefreshing
+	}) : void 0, [stateRouteId, status]);
+	useHeader(getHeaderTitle(), headerAction);
+	useEffect(() => {
+		return () => {
+			if (statusRef.current && statusRef.current !== 1 && !hasEnumFlag(statusRef.current, 4)) clearAmountFields();
+		};
+	}, []);
+	if (!route || !status) return null;
+	return /* @__PURE__ */ jsxs(PageContainer, {
+		topGutters: true,
+		bottomGutters: true,
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 2
+		},
+		children: [
+			/* @__PURE__ */ jsx(TransactionContent, {
+				route,
+				status,
+				executeRoute,
+				restartRoute,
+				deleteRoute,
+				routeRefreshing
+			}),
+			mode === "custom" && contractSecondaryComponent ? /* @__PURE__ */ jsx(ContractComponent, { children: contractSecondaryComponent }) : null,
+			/* @__PURE__ */ jsx(ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })
+		]
+	});
 };
+//#endregion
+export { TransactionPage };
+
 //# sourceMappingURL=TransactionPage.js.map

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/pages/TransactionPage/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAC1C,aAAqB,EACrB,WAAmB,EACnB,UAAkB,EAClB,UAAkB,EAClB,EAAE;IACF,OAAO,MAAM,CAAC,UAAU,CACtB,CACE,CAAC,WAAW,GAAG,CAAC,aAAa,GAAG,UAAU,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;QAC7D,GAAG,CACJ,CAAC,OAAO,CAAC,CAAC,CAAC,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,0BAA0B,GAAG,CACxC,aAAqB,EACrB,WAAmB,EACnB,UAAkB,EAClB,UAAkB,EAClB,EAAE;IACF,IAAI,CAAC,aAAa,IAAI,CAAC,WAAW,EAAE,CAAC;QACnC,OAAO,KAAK,CAAA;IACd,CAAC;IACD,OAAO,WAAW,GAAG,CAAC,aAAa,GAAG,UAAU,GAAG,UAAU,CAAC,GAAG,GAAG,CAAA;AACtE,CAAC,CAAA"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/pages/TransactionPage/utils.ts"],"sourcesContent":["export const calculateValueLossPercentage = (\n  fromAmountUSD: number,\n  toAmountUSD: number,\n  gasCostUSD: number,\n  feeCostUSD: number\n): number => {\n  return Number.parseFloat(\n    (\n      (toAmountUSD / (fromAmountUSD + gasCostUSD + feeCostUSD) - 1) *\n      100\n    ).toFixed(2)\n  )\n}\n\nexport const getTokenValueLossThreshold = (\n  fromAmountUSD: number,\n  toAmountUSD: number,\n  gasCostUSD: number,\n  feeCostUSD: number\n): boolean => {\n  if (!fromAmountUSD || !toAmountUSD) {\n    return false\n  }\n  return toAmountUSD / (fromAmountUSD + gasCostUSD + feeCostUSD) < 0.9\n}\n"],"mappings":";AAAA,MAAa,gCACX,eACA,aACA,YACA,eACW;CACX,OAAO,OAAO,aAET,eAAe,gBAAgB,aAAa,cAAc,KAC3D,IAAA,CACA,QAAQ,CAAC,CACb;AACF;AAEA,MAAa,8BACX,eACA,aACA,YACA,eACY;CACZ,IAAI,CAAC,iBAAiB,CAAC,aACrB,OAAO;CAET,OAAO,eAAe,gBAAgB,aAAa,cAAc;AACnE"}