@lifi/widget 4.0.0 → 4.2.0

package/dist/esm/pages/SettingsPage/SlippageSettings/SlippageSettings.js

@@ -1,88 +1,30 @@
-import { useSettingsActions } from "../../../stores/settings/useSettingsActions.js";
-import { formatInputAmount, formatSlippage } from "../../../utils/format.js";
+import { navigationRoutes } from "../../../utils/navigationRoutes.js";
 import { useSettings } from "../../../stores/settings/useSettings.js";
 import { useSettingMonitor } from "../../../hooks/useSettingMonitor.js";
+import { CardButton } from "../../../components/Card/CardButton.js";
 import { BadgedValue } from "../SettingsCard/BadgedValue.js";
-import { SettingCardExpandable } from "../SettingsCard/SettingCardExpandable.js";
-import { SettingsCustomInput, SettingsDefaultButton, SettingsFieldSet, SlippageLimitsWarningContainer } from "./SlippageSettings.style.js";
-import { useRef, useState } from "react";
-import { Box, Typography } from "@mui/material";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useNavigate } from "@tanstack/react-router";
+import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import WarningRounded from "@mui/icons-material/WarningRounded";
 import Percent from "@mui/icons-material/Percent";
 //#region src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx
-const defaultSlippageInputValue = "0.5";
-const maxFractionDigits = 5;
 const SlippageSettings = () => {
 	const { t } = useTranslation();
-	const { isSlippageNotRecommended, isSlippageUnderRecommendedLimits, isSlippageOutsideRecommendedLimits, isSlippageChanged } = useSettingMonitor();
+	const navigate = useNavigate();
+	const { isSlippageNotRecommended, isSlippageChanged } = useSettingMonitor();
 	const { slippage } = useSettings(["slippage"]);
-	const { setValue } = useSettingsActions();
-	const defaultValue = useRef(slippage);
-	const [focused, setFocused] = useState();
-	const [inputValue, setInputValue] = useState(!slippage || slippage === void 0 ? defaultSlippageInputValue : slippage);
-	const handleDefaultClick = () => {
-		setValue("slippage", void 0);
-	};
-	const formatAndSetSlippage = (value, returnInitial = false) => {
-		const formattedSlippage = formatSlippage(value, defaultValue.current, returnInitial);
-		const formattedValue = Number(formattedSlippage) === 0 && !returnInitial ? "0" : formatInputAmount(formattedSlippage, maxFractionDigits, returnInitial);
-		const maxLength = Number(formattedValue) < 10 ? 7 : 8;
-		const slicedValue = formattedValue.slice(0, maxLength);
-		setInputValue(slicedValue);
-		setValue("slippage", slicedValue.length ? slicedValue : void 0);
-	};
-	const handleInputUpdate = (event) => {
-		formatAndSetSlippage(event.target.value, true);
-	};
-	const handleInputFocus = (event) => {
-		setFocused("input");
-		formatAndSetSlippage(event.target.value);
-	};
-	const handleInputBlur = (event) => {
-		setFocused(void 0);
-		formatAndSetSlippage(event.target.value);
-	};
 	const badgeColor = isSlippageNotRecommended ? "warning" : isSlippageChanged ? "info" : void 0;
-	const slippageWarningText = isSlippageOutsideRecommendedLimits ? t("warning.message.slippageOutsideRecommendedLimits") : isSlippageUnderRecommendedLimits ? t("warning.message.slippageUnderRecommendedLimits") : "";
-	return /* @__PURE__ */ jsx(SettingCardExpandable, {
-		value: /* @__PURE__ */ jsx(BadgedValue, {
+	const handleClick = () => {
+		navigate({ to: navigationRoutes.slippage });
+	};
+	return /* @__PURE__ */ jsx(CardButton, {
+		onClick: handleClick,
+		icon: /* @__PURE__ */ jsx(Percent, {}),
+		title: t("settings.slippage"),
+		children: /* @__PURE__ */ jsx(BadgedValue, {
 			badgeColor,
 			showBadge: !!badgeColor,
 			children: slippage ? `${slippage}%` : t("button.auto")
-		}),
-		icon: /* @__PURE__ */ jsx(Percent, {}),
-		title: t("settings.slippage"),
-		children: /* @__PURE__ */ jsxs(Box, {
-			sx: { mt: 1.5 },
-			children: [/* @__PURE__ */ jsxs(SettingsFieldSet, { children: [/* @__PURE__ */ jsx(SettingsDefaultButton, {
-				selected: void 0 === slippage && focused !== "input",
-				onFocus: () => {
-					setFocused("button");
-				},
-				onBlur: () => {
-					setFocused(void 0);
-				},
-				onClick: handleDefaultClick,
-				disableRipple: true,
-				children: t("button.auto")
-			}), /* @__PURE__ */ jsx(SettingsCustomInput, {
-				selected: void 0 !== slippage && focused !== "button",
-				placeholder: focused === "input" ? "" : t("settings.custom"),
-				inputProps: { inputMode: "decimal" },
-				onChange: handleInputUpdate,
-				onFocus: handleInputFocus,
-				value: inputValue,
-				autoComplete: "off",
-				onBlur: handleInputBlur
-			})] }), isSlippageNotRecommended && /* @__PURE__ */ jsxs(SlippageLimitsWarningContainer, { children: [/* @__PURE__ */ jsx(WarningRounded, { color: "warning" }), /* @__PURE__ */ jsx(Typography, {
-				sx: {
-					fontSize: 13,
-					fontWeight: 400
-				},
-				children: slippageWarningText
-			})] })]
 		})
 	});
 };

package/dist/esm/pages/SettingsPage/SlippageSettings/SlippageSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlippageSettings.js","names":[],"sources":["../../../../../src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx"],"sourcesContent":["import Percent from '@mui/icons-material/Percent'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Typography } from '@mui/material'\nimport type { ChangeEventHandler, FocusEventHandler } from 'react'\nimport { useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSettingMonitor } from '../../../hooks/useSettingMonitor.js'\nimport { defaultSlippage } from '../../../stores/settings/createSettingsStore.js'\nimport { useSettings } from '../../../stores/settings/useSettings.js'\nimport { useSettingsActions } from '../../../stores/settings/useSettingsActions.js'\nimport { formatInputAmount, formatSlippage } from '../../../utils/format.js'\nimport { BadgedValue } from '../SettingsCard/BadgedValue.js'\nimport { SettingCardExpandable } from '../SettingsCard/SettingCardExpandable.js'\nimport {\n  SettingsCustomInput,\n  SettingsDefaultButton,\n  SettingsFieldSet,\n  SlippageLimitsWarningContainer,\n} from './SlippageSettings.style.js'\n\nconst defaultSlippageInputValue = '0.5'\nconst maxFractionDigits = 5\n\nexport const SlippageSettings: React.FC = () => {\n  const { t } = useTranslation()\n  const {\n    isSlippageNotRecommended,\n    isSlippageUnderRecommendedLimits,\n    isSlippageOutsideRecommendedLimits,\n    isSlippageChanged,\n  } = useSettingMonitor()\n  const { slippage } = useSettings(['slippage'])\n  const { setValue } = useSettingsActions()\n  const defaultValue = useRef(slippage)\n  const [focused, setFocused] = useState<'input' | 'button'>()\n\n  const customInputValue =\n    !slippage || slippage === defaultSlippage\n      ? defaultSlippageInputValue\n      : slippage\n\n  const [inputValue, setInputValue] = useState(customInputValue)\n\n  const handleDefaultClick = () => {\n    setValue('slippage', defaultSlippage)\n  }\n\n  const formatAndSetSlippage = (value: string, returnInitial = false) => {\n    const formattedSlippage = formatSlippage(\n      value,\n      defaultValue.current,\n      returnInitial\n    )\n    const formattedValue =\n      Number(formattedSlippage) === 0 && !returnInitial\n        ? '0'\n        : formatInputAmount(formattedSlippage, maxFractionDigits, returnInitial)\n    const maxLength =\n      Number(formattedValue) < 10\n        ? maxFractionDigits + 2\n        : maxFractionDigits + 3\n    const slicedValue = formattedValue.slice(0, maxLength)\n    setInputValue(slicedValue)\n    setValue('slippage', slicedValue.length ? slicedValue : defaultSlippage)\n  }\n\n  const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = (event) => {\n    formatAndSetSlippage(event.target.value, true)\n  }\n\n  const handleInputFocus: FocusEventHandler<HTMLInputElement> = (event) => {\n    setFocused('input')\n    formatAndSetSlippage(event.target.value)\n  }\n\n  const handleInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    setFocused(undefined)\n    formatAndSetSlippage(event.target.value)\n  }\n\n  const badgeColor = isSlippageNotRecommended\n    ? 'warning'\n    : isSlippageChanged\n      ? 'info'\n      : undefined\n\n  const slippageWarningText = isSlippageOutsideRecommendedLimits\n    ? t('warning.message.slippageOutsideRecommendedLimits')\n    : isSlippageUnderRecommendedLimits\n      ? t('warning.message.slippageUnderRecommendedLimits')\n      : ''\n\n  return (\n    <SettingCardExpandable\n      value={\n        <BadgedValue badgeColor={badgeColor} showBadge={!!badgeColor}>\n          {slippage ? `${slippage}%` : t('button.auto')}\n        </BadgedValue>\n      }\n      icon={<Percent />}\n      title={t('settings.slippage')}\n    >\n      <Box\n        sx={{\n          mt: 1.5,\n        }}\n      >\n        <SettingsFieldSet>\n          <SettingsDefaultButton\n            selected={defaultSlippage === slippage && focused !== 'input'}\n            onFocus={() => {\n              setFocused('button')\n            }}\n            onBlur={() => {\n              setFocused(undefined)\n            }}\n            onClick={handleDefaultClick}\n            disableRipple\n          >\n            {t('button.auto')}\n          </SettingsDefaultButton>\n          <SettingsCustomInput\n            selected={defaultSlippage !== slippage && focused !== 'button'}\n            placeholder={focused === 'input' ? '' : t('settings.custom')}\n            inputProps={{\n              inputMode: 'decimal',\n            }}\n            onChange={handleInputUpdate}\n            onFocus={handleInputFocus}\n            value={inputValue}\n            autoComplete=\"off\"\n            onBlur={handleInputBlur}\n          />\n        </SettingsFieldSet>\n        {isSlippageNotRecommended && (\n          <SlippageLimitsWarningContainer>\n            <WarningRounded color=\"warning\" />\n            <Typography\n              sx={{\n                fontSize: 13,\n                fontWeight: 400,\n              }}\n            >\n              {slippageWarningText}\n            </Typography>\n          </SlippageLimitsWarningContainer>\n        )}\n      </Box>\n    </SettingCardExpandable>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAoBA,MAAM,4BAA4B;AAClC,MAAM,oBAAoB;AAE1B,MAAa,yBAAmC;CAC9C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EACJ,0BACA,kCACA,oCACA,sBACE,kBAAkB;CACtB,MAAM,EAAE,aAAa,YAAY,CAAC,UAAU,CAAC;CAC7C,MAAM,EAAE,aAAa,mBAAmB;CACxC,MAAM,eAAe,OAAO,QAAQ;CACpC,MAAM,CAAC,SAAS,cAAc,SAA6B;CAO3D,MAAM,CAAC,YAAY,iBAAiB,SAJlC,CAAC,YAAY,aAAA,KAAA,IACT,4BACA,QAEuD;CAE7D,MAAM,2BAA2B;EAC/B,SAAS,YAAA,KAAA,CAA2B;CACtC;CAEA,MAAM,wBAAwB,OAAe,gBAAgB,UAAU;EACrE,MAAM,oBAAoB,eACxB,OACA,aAAa,SACb,aACF;EACA,MAAM,iBACJ,OAAO,iBAAiB,MAAM,KAAK,CAAC,gBAChC,MACA,kBAAkB,mBAAmB,mBAAmB,aAAa;EAC3E,MAAM,YACJ,OAAO,cAAc,IAAI,KACrB,IACA;EACN,MAAM,cAAc,eAAe,MAAM,GAAG,SAAS;EACrD,cAAc,WAAW;EACzB,SAAS,YAAY,YAAY,SAAS,cAAA,KAAA,CAA6B;CACzE;CAEA,MAAM,qBAA2D,UAAU;EACzE,qBAAqB,MAAM,OAAO,OAAO,IAAI;CAC/C;CAEA,MAAM,oBAAyD,UAAU;EACvE,WAAW,OAAO;EAClB,qBAAqB,MAAM,OAAO,KAAK;CACzC;CAEA,MAAM,mBAAwD,UAAU;EACtE,WAAW,KAAA,CAAS;EACpB,qBAAqB,MAAM,OAAO,KAAK;CACzC;CAEA,MAAM,aAAa,2BACf,YACA,oBACE,SACA,KAAA;CAEN,MAAM,sBAAsB,qCACxB,EAAE,kDAAkD,IACpD,mCACE,EAAE,gDAAgD,IAClD;CAEN,OACE,oBAAC,uBAAD;EACE,OACE,oBAAC,aAAD;GAAyB;GAAY,WAAW,CAAC,CAAC;aAC/C,WAAW,GAAG,SAAS,KAAK,EAAE,aAAa;EACjC,CAAA;EAEf,MAAM,oBAAC,SAAD,CAAU,CAAA;EAChB,OAAO,EAAE,mBAAmB;YAE5B,qBAAC,KAAD;GACE,IAAI,EACF,IAAI,IACN;aAHF,CAKE,qBAAC,kBAAD,EAAA,UAAA,CACE,oBAAC,uBAAD;IACE,UAAA,KAAA,MAA8B,YAAY,YAAY;IACtD,eAAe;KACb,WAAW,QAAQ;IACrB;IACA,cAAc;KACZ,WAAW,KAAA,CAAS;IACtB;IACA,SAAS;IACT,eAAA;cAEC,EAAE,aAAa;GACK,CAAA,GACvB,oBAAC,qBAAD;IACE,UAAA,KAAA,MAA8B,YAAY,YAAY;IACtD,aAAa,YAAY,UAAU,KAAK,EAAE,iBAAiB;IAC3D,YAAY,EACV,WAAW,UACb;IACA,UAAU;IACV,SAAS;IACT,OAAO;IACP,cAAa;IACb,QAAQ;GACT,CAAA,CACe,EAAA,CAAA,GACjB,4BACC,qBAAC,gCAAD,EAAA,UAAA,CACE,oBAAC,gBAAD,EAAgB,OAAM,UAAW,CAAA,GACjC,oBAAC,YAAD;IACE,IAAI;KACF,UAAU;KACV,YAAY;IACd;cAEC;GACS,CAAA,CACkB,EAAA,CAAA,CAE/B;;CACgB,CAAA;AAE3B"}
+{"version":3,"file":"SlippageSettings.js","names":[],"sources":["../../../../../src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx"],"sourcesContent":["import Percent from '@mui/icons-material/Percent'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { CardButton } from '../../../components/Card/CardButton.js'\nimport { useSettingMonitor } from '../../../hooks/useSettingMonitor.js'\nimport { useSettings } from '../../../stores/settings/useSettings.js'\nimport { navigationRoutes } from '../../../utils/navigationRoutes.js'\nimport { BadgedValue } from '../SettingsCard/BadgedValue.js'\n\nexport const SlippageSettings: React.FC = () => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { isSlippageNotRecommended, isSlippageChanged } = useSettingMonitor()\n  const { slippage } = useSettings(['slippage'])\n\n  const badgeColor = isSlippageNotRecommended\n    ? 'warning'\n    : isSlippageChanged\n      ? 'info'\n      : undefined\n\n  const handleClick = () => {\n    navigate({ to: navigationRoutes.slippage })\n  }\n\n  return (\n    <CardButton\n      onClick={handleClick}\n      icon={<Percent />}\n      title={t('settings.slippage')}\n    >\n      <BadgedValue badgeColor={badgeColor} showBadge={!!badgeColor}>\n        {slippage ? `${slippage}%` : t('button.auto')}\n      </BadgedValue>\n    </CardButton>\n  )\n}\n"],"mappings":";;;;;;;;;;AASA,MAAa,yBAAmC;CAC9C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,0BAA0B,sBAAsB,kBAAkB;CAC1E,MAAM,EAAE,aAAa,YAAY,CAAC,UAAU,CAAC;CAE7C,MAAM,aAAa,2BACf,YACA,oBACE,SACA,KAAA;CAEN,MAAM,oBAAoB;EACxB,SAAS,EAAE,IAAI,iBAAiB,SAAS,CAAC;CAC5C;CAEA,OACE,oBAAC,YAAD;EACE,SAAS;EACT,MAAM,oBAAC,SAAD,CAAU,CAAA;EAChB,OAAO,EAAE,mBAAmB;YAE5B,oBAAC,aAAD;GAAyB;GAAY,WAAW,CAAC,CAAC;aAC/C,WAAW,GAAG,SAAS,KAAK,EAAE,aAAa;EACjC,CAAA;CACH,CAAA;AAEhB"}

package/dist/esm/pages/SettingsPage/SlippageSettings/SlippageSettings.style.js

@@ -1,4 +1,4 @@
-import { Box, ButtonBase, InputBase, inputBaseClasses, styled } from "@mui/material";
+import { Box, IconButton, InputBase, inputBaseClasses, styled } from "@mui/material";
 //#region src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx
 const SettingsFieldSet = styled(Box)(({ theme }) => ({
 	display: "flex",
@@ -18,18 +18,6 @@ const settingsControlSelected = (theme) => ({
 	}),
 	borderRadius: `calc(${theme.vars.shape.borderRadius} - 4px)`
 });
-const SettingsDefaultButton = styled(ButtonBase)(({ theme, selected }) => {
-	const settingsControlSelectedStyles = settingsControlSelected(theme);
-	const selectedStyle = selected ? { "&:not(:focus)": { ...settingsControlSelectedStyles } } : {};
-	return {
-		height: "100%",
-		width: "100%",
-		fontSize: "1rem",
-		fontWeight: 700,
-		"&:focus": { ...settingsControlSelectedStyles },
-		...selectedStyle
-	};
-});
 const SettingsCustomInput = styled(InputBase)(({ theme, selected }) => {
 	const settingsControlSelectedStyles = settingsControlSelected(theme);
 	const selectedStyle = selected ? { "&:not(:focus)": { ...settingsControlSelectedStyles } } : {};
@@ -56,7 +44,31 @@ const SlippageLimitsWarningContainer = styled(Box)(({ theme }) => ({
 	gap: theme.spacing(1.25),
 	marginTop: theme.spacing(1.5)
 }));
+const SlippageInput = styled(InputBase)(({ theme }) => ({
+	minHeight: 44,
+	width: "100%",
+	backgroundColor: theme.vars.palette.background.default,
+	border: "1px solid",
+	borderColor: theme.vars.palette.divider,
+	borderRadius: theme.vars.shape.borderRadius,
+	paddingRight: theme.spacing(1),
+	[`.${inputBaseClasses.input}`]: {
+		padding: theme.spacing(1.5),
+		fontSize: 16,
+		fontWeight: 500,
+		lineHeight: "20px",
+		"&::placeholder": {
+			opacity: 1,
+			color: theme.vars.palette.text.secondary
+		},
+		"&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": { display: "none" }
+	}
+}));
+const SlippageClearButton = styled(IconButton)(({ theme }) => ({
+	padding: theme.spacing(.5),
+	flexShrink: 0
+}));
 //#endregion
-export { SettingsCustomInput, SettingsDefaultButton, SettingsFieldSet, SlippageLimitsWarningContainer };
+export { SettingsCustomInput, SettingsFieldSet, SlippageClearButton, SlippageInput, SlippageLimitsWarningContainer };
 
 //# sourceMappingURL=SlippageSettings.style.js.map

package/dist/esm/pages/SettingsPage/SlippageSettings/SlippageSettings.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlippageSettings.style.js","names":[],"sources":["../../../../../src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport {\n  Box,\n  ButtonBase,\n  InputBase,\n  inputBaseClasses,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const SettingsFieldSet: React.FC<\n  React.ComponentProps<typeof Box> & SettingsControlProps\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  borderRadius: theme.vars.shape.borderRadius,\n  padding: theme.spacing(0.5),\n  gap: theme.spacing(0.5),\n  height: '3.5rem',\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n  }),\n}))\n\nconst settingsControlSelected = (theme: Theme) => ({\n  backgroundColor: theme.vars.palette.background.paper,\n  boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,\n    boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.background} 4%, transparent)`,\n  }),\n  borderRadius: `calc(${theme.vars.shape.borderRadius} - 4px)`,\n})\n\ninterface SettingsControlProps {\n  selected?: boolean\n}\n\nexport const SettingsDefaultButton: React.FC<\n  React.ComponentProps<typeof ButtonBase> & SettingsControlProps\n> = styled(ButtonBase)<SettingsControlProps>(({ theme, selected }) => {\n  const settingsControlSelectedStyles = settingsControlSelected(theme)\n  const selectedStyle = selected\n    ? {\n        '&:not(:focus)': {\n          ...settingsControlSelectedStyles,\n        },\n      }\n    : {}\n\n  return {\n    height: '100%',\n    width: '100%',\n    fontSize: '1rem',\n    fontWeight: 700,\n    '&:focus': {\n      ...settingsControlSelectedStyles,\n    },\n    ...selectedStyle,\n  }\n})\n\nexport const SettingsCustomInput: React.FC<\n  React.ComponentProps<typeof InputBase> & SettingsControlProps\n> = styled(InputBase)<SettingsControlProps>(({ theme, selected }) => {\n  const settingsControlSelectedStyles = settingsControlSelected(theme)\n  const selectedStyle = selected\n    ? {\n        '&:not(:focus)': {\n          ...settingsControlSelectedStyles,\n        },\n      }\n    : {}\n\n  return {\n    height: '100%',\n    width: '100%',\n    [`.${inputBaseClasses.input}`]: {\n      height: '100%',\n      width: '100%',\n      padding: 0,\n      textAlign: 'center',\n      '&::placeholder': {\n        fontSize: '1rem',\n        fontWeight: 700,\n        opacity: 1,\n      },\n      '&:focus': {\n        ...settingsControlSelectedStyles,\n      },\n      ...selectedStyle,\n    },\n  }\n})\n\nexport const SlippageLimitsWarningContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  gap: theme.spacing(1.25),\n  marginTop: theme.spacing(1.5),\n}))\n"],"mappings":";;AAUA,MAAa,mBAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,SAAS;CACT,cAAc,MAAM,KAAK,MAAM;CAC/B,SAAS,MAAM,QAAQ,EAAG;CAC1B,KAAK,MAAM,QAAQ,EAAG;CACtB,QAAQ;CACR,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAC9E,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF,CAAC;AACH,EAAE;AAEF,MAAM,2BAA2B,WAAkB;CACjD,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,WAAW,kCAAkC,MAAM,KAAK,QAAQ,OAAO,aAAa;CACpF,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,WAAW;EAC5E,WAAW,kCAAkC,MAAM,KAAK,QAAQ,OAAO,WAAW;CACpF,CAAC;CACD,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;AACtD;AAMA,MAAa,wBAET,OAAO,UAAU,GAAyB,EAAE,OAAO,eAAe;CACpE,MAAM,gCAAgC,wBAAwB,KAAK;CACnE,MAAM,gBAAgB,WAClB,EACE,iBAAiB,EACf,GAAG,8BACL,EACF,IACA,CAAC;CAEL,OAAO;EACL,QAAQ;EACR,OAAO;EACP,UAAU;EACV,YAAY;EACZ,WAAW,EACT,GAAG,8BACL;EACA,GAAG;CACL;AACF,CAAC;AAED,MAAa,sBAET,OAAO,SAAS,GAAyB,EAAE,OAAO,eAAe;CACnE,MAAM,gCAAgC,wBAAwB,KAAK;CACnE,MAAM,gBAAgB,WAClB,EACE,iBAAiB,EACf,GAAG,8BACL,EACF,IACA,CAAC;CAEL,OAAO;EACL,QAAQ;EACR,OAAO;GACN,IAAI,iBAAiB,UAAU;GAC9B,QAAQ;GACR,OAAO;GACP,SAAS;GACT,WAAW;GACX,kBAAkB;IAChB,UAAU;IACV,YAAY;IACZ,SAAS;GACX;GACA,WAAW,EACT,GAAG,8BACL;GACA,GAAG;EACL;CACF;AACF,CAAC;AAED,MAAa,iCAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,IAAI;CACvB,WAAW,MAAM,QAAQ,GAAG;AAC9B,EAAE"}
+{"version":3,"file":"SlippageSettings.style.js","names":[],"sources":["../../../../../src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport {\n  Box,\n  IconButton,\n  InputBase,\n  inputBaseClasses,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const SettingsFieldSet: React.FC<\n  React.ComponentProps<typeof Box> & SettingsControlProps\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  borderRadius: theme.vars.shape.borderRadius,\n  padding: theme.spacing(0.5),\n  gap: theme.spacing(0.5),\n  height: '3.5rem',\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n  }),\n}))\n\nconst settingsControlSelected = (theme: Theme) => ({\n  backgroundColor: theme.vars.palette.background.paper,\n  boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,\n    boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.background} 4%, transparent)`,\n  }),\n  borderRadius: `calc(${theme.vars.shape.borderRadius} - 4px)`,\n})\n\ninterface SettingsControlProps {\n  selected?: boolean\n}\n\nexport const SettingsCustomInput: React.FC<\n  React.ComponentProps<typeof InputBase> & SettingsControlProps\n> = styled(InputBase)<SettingsControlProps>(({ theme, selected }) => {\n  const settingsControlSelectedStyles = settingsControlSelected(theme)\n  const selectedStyle = selected\n    ? {\n        '&:not(:focus)': {\n          ...settingsControlSelectedStyles,\n        },\n      }\n    : {}\n\n  return {\n    height: '100%',\n    width: '100%',\n    [`.${inputBaseClasses.input}`]: {\n      height: '100%',\n      width: '100%',\n      padding: 0,\n      textAlign: 'center',\n      '&::placeholder': {\n        fontSize: '1rem',\n        fontWeight: 700,\n        opacity: 1,\n      },\n      '&:focus': {\n        ...settingsControlSelectedStyles,\n      },\n      ...selectedStyle,\n    },\n  }\n})\n\nexport const SlippageLimitsWarningContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  gap: theme.spacing(1.25),\n  marginTop: theme.spacing(1.5),\n}))\n\nexport const SlippageInput: React.FC<React.ComponentProps<typeof InputBase>> =\n  styled(InputBase)(({ theme }) => ({\n    minHeight: 44,\n    width: '100%',\n    backgroundColor: theme.vars.palette.background.default,\n    border: '1px solid',\n    borderColor: theme.vars.palette.divider,\n    borderRadius: theme.vars.shape.borderRadius,\n    paddingRight: theme.spacing(1),\n    [`.${inputBaseClasses.input}`]: {\n      padding: theme.spacing(1.5),\n      fontSize: 16,\n      fontWeight: 500,\n      lineHeight: '20px',\n      '&::placeholder': {\n        opacity: 1,\n        color: theme.vars.palette.text.secondary,\n      },\n      '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {\n        display: 'none',\n      },\n    },\n  }))\n\nexport const SlippageClearButton: React.FC<\n  React.ComponentProps<typeof IconButton>\n> = styled(IconButton)(({ theme }) => ({\n  padding: theme.spacing(0.5),\n  flexShrink: 0,\n}))\n"],"mappings":";;AAUA,MAAa,mBAET,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,cAAc,MAAM,KAAK,MAAM;CAC/B,SAAS,MAAM,QAAQ,EAAG;CAC1B,KAAK,MAAM,QAAQ,EAAG;CACtB,QAAQ;CACR,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAC9E,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF,CAAC;AACH,EAAE;AAEF,MAAM,2BAA2B,WAAkB;CACjD,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,WAAW,kCAAkC,MAAM,KAAK,QAAQ,OAAO,aAAa;CACpF,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,WAAW;EAC5E,WAAW,kCAAkC,MAAM,KAAK,QAAQ,OAAO,WAAW;CACpF,CAAC;CACD,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;AACtD;AAMA,MAAa,sBAET,OAAO,SAAS,CAAC,EAAwB,EAAE,OAAO,eAAe;CACnE,MAAM,gCAAgC,wBAAwB,KAAK;CACnE,MAAM,gBAAgB,WAClB,EACE,iBAAiB,EACf,GAAG,8BACL,EACF,IACA,CAAC;CAEL,OAAO;EACL,QAAQ;EACR,OAAO;GACN,IAAI,iBAAiB,UAAU;GAC9B,QAAQ;GACR,OAAO;GACP,SAAS;GACT,WAAW;GACX,kBAAkB;IAChB,UAAU;IACV,YAAY;IACZ,SAAS;GACX;GACA,WAAW,EACT,GAAG,8BACL;GACA,GAAG;EACL;CACF;AACF,CAAC;AAED,MAAa,iCAET,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,IAAI;CACvB,WAAW,MAAM,QAAQ,GAAG;AAC9B,EAAE;AAEF,MAAa,gBACX,OAAO,SAAS,CAAC,EAAE,EAAE,aAAa;CAChC,WAAW;CACX,OAAO;CACP,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,QAAQ;CACR,aAAa,MAAM,KAAK,QAAQ;CAChC,cAAc,MAAM,KAAK,MAAM;CAC/B,cAAc,MAAM,QAAQ,CAAC;EAC5B,IAAI,iBAAiB,UAAU;EAC9B,SAAS,MAAM,QAAQ,GAAG;EAC1B,UAAU;EACV,YAAY;EACZ,YAAY;EACZ,kBAAkB;GAChB,SAAS;GACT,OAAO,MAAM,KAAK,QAAQ,KAAK;EACjC;EACA,8DAA8D,EAC5D,SAAS,OACX;CACF;AACF,EAAE;AAEJ,MAAa,sBAET,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACrC,SAAS,MAAM,QAAQ,EAAG;CAC1B,YAAY;AACd,EAAE"}

package/dist/esm/pages/SettingsPage/ThemeSettings.js

@@ -1,3 +1,5 @@
+import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
+import "../../types/events.js";
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
 import { CardTabs, Tab as Tab$1 } from "../../components/Tabs/Tabs.style.js";
 import { CardValue } from "../../components/Card/CardButton.style.js";
@@ -26,12 +28,14 @@ const ThemeTab = ({ title, value, Icon, ...props }) => /* @__PURE__ */ jsx(Toolt
 const ThemeSettings = () => {
 	const { t } = useTranslation();
 	const { mode, setMode } = useColorScheme();
+	const widgetEvents = useWidgetEvents();
 	const { hiddenUI } = useWidgetConfig();
 	if (hiddenUI?.appearance) return null;
 	const appearance = mode ?? "system";
 	const ThemeIcon = themeIcons[appearance];
 	const handleThemeChange = (_, appearance) => {
 		setMode(appearance);
+		widgetEvents.emit("appearanceChanged", appearance);
 	};
 	return /* @__PURE__ */ jsx(SettingCardExpandable, {
 		value: /* @__PURE__ */ jsxs(CardValue, { children: [t(`button.${appearance}`), " "] }),

package/dist/esm/pages/SettingsPage/ThemeSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeSettings.js","names":["Tab"],"sources":["../../../../src/pages/SettingsPage/ThemeSettings.tsx"],"sourcesContent":["import BrightnessAuto from '@mui/icons-material/BrightnessAuto'\nimport LightMode from '@mui/icons-material/LightMode'\nimport Nightlight from '@mui/icons-material/Nightlight'\nimport { Tooltip, useColorScheme } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { CardValue } from '../../components/Card/CardButton.style.js'\nimport { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { Appearance } from '../../types/widget.js'\nimport { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js'\n\nconst themeIcons = {\n  light: LightMode,\n  dark: Nightlight,\n  system: BrightnessAuto,\n}\n\ninterface ThemeTabProps {\n  title: string\n  value: Appearance\n  Icon: React.ReactElement\n}\n\n// If the Tab is not the direct child of the Tabs component you can loose the switching\n// The component passes the props to the Tab component so switching isn't lost\nconst ThemeTab: React.FC<ThemeTabProps> = ({\n  title,\n  value,\n  Icon,\n  ...props\n}) => (\n  <Tooltip title={title}>\n    <Tab icon={Icon} value={value} {...props} disableRipple />\n  </Tooltip>\n)\n\nexport const ThemeSettings: React.FC = () => {\n  const { t } = useTranslation()\n  const { mode, setMode } = useColorScheme()\n  const { hiddenUI } = useWidgetConfig()\n\n  if (hiddenUI?.appearance) {\n    return null\n  }\n\n  const appearance = mode ?? 'system'\n\n  const ThemeIcon = themeIcons[appearance]\n\n  const handleThemeChange = (\n    _: React.SyntheticEvent,\n    appearance: Appearance\n  ) => {\n    setMode(appearance)\n  }\n\n  return (\n    <SettingCardExpandable\n      value={<CardValue>{t(`button.${appearance}`)} </CardValue>}\n      icon={<ThemeIcon />}\n      title={t('settings.appearance')}\n    >\n      <CardTabs\n        value={appearance}\n        aria-label=\"tabs\"\n        indicatorColor=\"primary\"\n        onChange={handleThemeChange}\n        sx={{ mt: 1.5 }}\n      >\n        {Object.entries(themeIcons).map(([theme, Icon]) => {\n          const supportedThemeOption = theme as Appearance\n\n          return (\n            <ThemeTab\n              key={supportedThemeOption}\n              title={t(`button.${supportedThemeOption}`)}\n              value={supportedThemeOption}\n              Icon={<Icon />}\n            />\n          )\n        })}\n      </CardTabs>\n    </SettingCardExpandable>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,aAAa;CACjB,OAAO;CACP,MAAM;CACN,QAAQ;AACV;AAUA,MAAM,YAAqC,EACzC,OACA,OACA,MACA,GAAG,YAEH,oBAAC,SAAD;CAAgB;WACd,oBAACA,OAAD;EAAK,MAAM;EAAa;EAAO,GAAI;EAAO,eAAA;CAAe,CAAA;AAClD,CAAA;AAGX,MAAa,sBAAgC;CAC3C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,MAAM,YAAY,eAAe;CACzC,MAAM,EAAE,aAAa,gBAAgB;CAErC,IAAI,UAAU,YACZ,OAAO;CAGT,MAAM,aAAa,QAAQ;CAE3B,MAAM,YAAY,WAAW;CAE7B,MAAM,qBACJ,GACA,eACG;EACH,QAAQ,UAAU;CACpB;CAEA,OACE,oBAAC,uBAAD;EACE,OAAO,qBAAC,WAAD,EAAA,UAAA,CAAY,EAAE,UAAU,YAAY,GAAE,GAAY,EAAA,CAAA;EACzD,MAAM,oBAAC,WAAD,CAAY,CAAA;EAClB,OAAO,EAAE,qBAAqB;YAE9B,oBAAC,UAAD;GACE,OAAO;GACP,cAAW;GACX,gBAAe;GACf,UAAU;GACV,IAAI,EAAE,IAAI,IAAI;aAEb,OAAO,QAAQ,UAAU,EAAE,KAAK,CAAC,OAAO,UAAU;IACjD,MAAM,uBAAuB;IAE7B,OACE,oBAAC,UAAD;KAEE,OAAO,EAAE,UAAU,sBAAsB;KACzC,OAAO;KACP,MAAM,oBAAC,MAAD,CAAO,CAAA;IACd,GAJM,oBAIN;GAEL,CAAC;EACO,CAAA;CACW,CAAA;AAE3B"}
+{"version":3,"file":"ThemeSettings.js","names":["Tab"],"sources":["../../../../src/pages/SettingsPage/ThemeSettings.tsx"],"sourcesContent":["import BrightnessAuto from '@mui/icons-material/BrightnessAuto'\nimport LightMode from '@mui/icons-material/LightMode'\nimport Nightlight from '@mui/icons-material/Nightlight'\nimport { Tooltip, useColorScheme } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { CardValue } from '../../components/Card/CardButton.style.js'\nimport { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport type { Appearance } from '../../types/widget.js'\nimport { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js'\n\nconst themeIcons = {\n  light: LightMode,\n  dark: Nightlight,\n  system: BrightnessAuto,\n}\n\ninterface ThemeTabProps {\n  title: string\n  value: Appearance\n  Icon: React.ReactElement\n}\n\n// If the Tab is not the direct child of the Tabs component you can loose the switching\n// The component passes the props to the Tab component so switching isn't lost\nconst ThemeTab: React.FC<ThemeTabProps> = ({\n  title,\n  value,\n  Icon,\n  ...props\n}) => (\n  <Tooltip title={title}>\n    <Tab icon={Icon} value={value} {...props} disableRipple />\n  </Tooltip>\n)\n\nexport const ThemeSettings: React.FC = () => {\n  const { t } = useTranslation()\n  const { mode, setMode } = useColorScheme()\n  const widgetEvents = useWidgetEvents()\n  const { hiddenUI } = useWidgetConfig()\n\n  if (hiddenUI?.appearance) {\n    return null\n  }\n\n  const appearance = mode ?? 'system'\n\n  const ThemeIcon = themeIcons[appearance]\n\n  const handleThemeChange = (\n    _: React.SyntheticEvent,\n    appearance: Appearance\n  ) => {\n    setMode(appearance)\n    widgetEvents.emit(WidgetEvent.AppearanceChanged, appearance)\n  }\n\n  return (\n    <SettingCardExpandable\n      value={<CardValue>{t(`button.${appearance}`)} </CardValue>}\n      icon={<ThemeIcon />}\n      title={t('settings.appearance')}\n    >\n      <CardTabs\n        value={appearance}\n        aria-label=\"tabs\"\n        indicatorColor=\"primary\"\n        onChange={handleThemeChange}\n        sx={{ mt: 1.5 }}\n      >\n        {Object.entries(themeIcons).map(([theme, Icon]) => {\n          const supportedThemeOption = theme as Appearance\n\n          return (\n            <ThemeTab\n              key={supportedThemeOption}\n              title={t(`button.${supportedThemeOption}`)}\n              value={supportedThemeOption}\n              Icon={<Icon />}\n            />\n          )\n        })}\n      </CardTabs>\n    </SettingCardExpandable>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,aAAa;CACjB,OAAO;CACP,MAAM;CACN,QAAQ;AACV;AAUA,MAAM,YAAqC,EACzC,OACA,OACA,MACA,GAAG,YAEH,oBAAC,SAAD;CAAgB;WACd,oBAACA,OAAD;EAAK,MAAM;EAAa;EAAO,GAAI;EAAO,eAAA;CAAe,CAAA;AAClD,CAAA;AAGX,MAAa,sBAAgC;CAC3C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,MAAM,YAAY,eAAe;CACzC,MAAM,eAAe,gBAAgB;CACrC,MAAM,EAAE,aAAa,gBAAgB;CAErC,IAAI,UAAU,YACZ,OAAO;CAGT,MAAM,aAAa,QAAQ;CAE3B,MAAM,YAAY,WAAW;CAE7B,MAAM,qBACJ,GACA,eACG;EACH,QAAQ,UAAU;EAClB,aAAa,KAAA,qBAAoC,UAAU;CAC7D;CAEA,OACE,oBAAC,uBAAD;EACE,OAAO,qBAAC,WAAD,EAAA,UAAA,CAAY,EAAE,UAAU,YAAY,GAAE,GAAY,EAAA,CAAA;EACzD,MAAM,oBAAC,WAAD,CAAY,CAAA;EAClB,OAAO,EAAE,qBAAqB;YAE9B,oBAAC,UAAD;GACE,OAAO;GACP,cAAW;GACX,gBAAe;GACf,UAAU;GACV,IAAI,EAAE,IAAI,IAAI;aAEb,OAAO,QAAQ,UAAU,CAAC,CAAC,KAAK,CAAC,OAAO,UAAU;IACjD,MAAM,uBAAuB;IAE7B,OACE,oBAAC,UAAD;KAEE,OAAO,EAAE,UAAU,sBAAsB;KACzC,OAAO;KACP,MAAM,oBAAC,MAAD,CAAO,CAAA;IACd,GAJM,oBAIN;GAEL,CAAC;EACO,CAAA;CACW,CAAA;AAE3B"}

package/dist/esm/pages/TransactionDetailsPage/ContactSupportButton.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactSupportButton.style.js","names":[],"sources":["../../../../src/pages/TransactionDetailsPage/ContactSupportButton.style.tsx"],"sourcesContent":["import { styled } from '@mui/material'\nimport type React from 'react'\nimport { ButtonTertiary } from '../../components/ButtonTertiary.js'\n\nexport const ButtonChip: React.FC<React.ComponentProps<typeof ButtonTertiary>> =\n  styled(ButtonTertiary)(({ theme }) => ({\n    padding: theme.spacing(0.5, 1.5),\n    fontSize: 12,\n    fontWeight: 700,\n    lineHeight: 1.3334,\n    height: 'auto',\n  }))\n"],"mappings":";;;AAIA,MAAa,aACX,OAAO,cAAc,GAAG,EAAE,aAAa;CACrC,SAAS,MAAM,QAAQ,IAAK,GAAG;CAC/B,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,QAAQ;AACV,EAAE"}
+{"version":3,"file":"ContactSupportButton.style.js","names":[],"sources":["../../../../src/pages/TransactionDetailsPage/ContactSupportButton.style.tsx"],"sourcesContent":["import { styled } from '@mui/material'\nimport type React from 'react'\nimport { ButtonTertiary } from '../../components/ButtonTertiary.js'\n\nexport const ButtonChip: React.FC<React.ComponentProps<typeof ButtonTertiary>> =\n  styled(ButtonTertiary)(({ theme }) => ({\n    padding: theme.spacing(0.5, 1.5),\n    fontSize: 12,\n    fontWeight: 700,\n    lineHeight: 1.3334,\n    height: 'auto',\n  }))\n"],"mappings":";;;AAIA,MAAa,aACX,OAAO,cAAc,CAAC,EAAE,EAAE,aAAa;CACrC,SAAS,MAAM,QAAQ,IAAK,GAAG;CAC/B,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,QAAQ;AACV,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"TransactionDetailsPage.js","names":[],"sources":["../../../../src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx"],"sourcesContent":["import type { FullStatusData } from '@lifi/sdk'\nimport { useLocation, useNavigate } from '@tanstack/react-router'\nimport { useEffect, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { TransactionCard } from '../../components/TransactionCard/TransactionCard.js'\nimport { internalExplorerUrl } from '../../config/constants.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useTools } from '../../hooks/useTools.js'\nimport { useTransactionDetails } from '../../hooks/useTransactionDetails.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js'\nimport { getSourceTxHash } from '../../stores/routes/utils.js'\nimport { buildRouteFromTxHistory } from '../../utils/converters.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ReceiptsCard } from './ReceiptsCard.js'\nimport { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js'\nimport { TransferIdCard } from './TransferIdCard.js'\n\nexport const TransactionDetailsPage: React.FC = () => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { mode, modeOptions, contractSecondaryComponent, explorerUrls } =\n    useWidgetConfig()\n  const { search }: any = useLocation()\n  const { tools } = useTools()\n  const { getTransactionLink } = useExplorer()\n  const storedRouteExecution = useRouteExecutionStore((store) =>\n    search?.routeId ? store.routes[search.routeId] : undefined\n  )\n  const { transaction, isLoading } = useTransactionDetails(\n    !storedRouteExecution && search?.transactionHash\n  )\n\n  const title =\n    mode === 'custom'\n      ? t(`header.${modeOptions?.custom?.type ?? 'checkout'}Details`)\n      : t('header.transactionDetails')\n  useHeader(title)\n\n  const routeExecution = useMemo(() => {\n    if (storedRouteExecution) {\n      return storedRouteExecution\n    }\n    if (isLoading) {\n      return\n    }\n    if (transaction) {\n      return buildRouteFromTxHistory(transaction as FullStatusData, tools)\n    }\n  }, [isLoading, storedRouteExecution, tools, transaction])\n\n  useEffect(() => {\n    if (!isLoading && !routeExecution) {\n      navigate({ to: navigationRoutes.home })\n    }\n  }, [isLoading, navigate, routeExecution])\n\n  const explorerUrl = explorerUrls?.internal?.[0]\n  const url = typeof explorerUrl === 'string' ? explorerUrl : explorerUrl?.url\n\n  const sourceTxHash = getSourceTxHash(routeExecution?.route)\n  let supportId = sourceTxHash ?? routeExecution?.route.id ?? ''\n\n  const internalTxLink =\n    routeExecution?.route?.steps?.at(-1)?.execution?.internalTxLink\n  const externalTxLink =\n    routeExecution?.route?.steps?.at(-1)?.execution?.externalTxLink\n\n  const txLink =\n    (url\n      ? internalTxLink?.replace(internalExplorerUrl, url)\n      : internalTxLink) ||\n    externalTxLink ||\n    getTransactionLink({ txHash: supportId })\n\n  if (process.env.NODE_ENV === 'development') {\n    supportId += `_${routeExecution?.route.id}`\n  }\n\n  const startedAt = new Date(\n    routeExecution?.route.steps[0].execution?.startedAt ?? 0\n  )\n\n  if (isLoading && !storedRouteExecution) {\n    return <TransactionDetailsSkeleton />\n  }\n\n  if (!routeExecution?.route) {\n    return null\n  }\n\n  return (\n    <PageContainer\n      topGutters\n      bottomGutters\n      sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}\n    >\n      <TransactionCard route={routeExecution.route} date={startedAt} />\n      {mode === 'custom' && contractSecondaryComponent ? (\n        <ContractComponent>{contractSecondaryComponent}</ContractComponent>\n      ) : null}\n      <ReceiptsCard route={routeExecution.route} />\n      {supportId ? (\n        <TransferIdCard transferId={supportId} txLink={txLink} />\n      ) : null}\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,+BAAyC;CACpD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,MAAM,aAAa,4BAA4B,iBACrD,gBAAgB;CAClB,MAAM,EAAE,WAAgB,YAAY;CACpC,MAAM,EAAE,UAAU,SAAS;CAC3B,MAAM,EAAE,uBAAuB,YAAY;CAC3C,MAAM,uBAAuB,wBAAwB,UACnD,QAAQ,UAAU,MAAM,OAAO,OAAO,WAAW,KAAA,CACnD;CACA,MAAM,EAAE,aAAa,cAAc,sBACjC,CAAC,wBAAwB,QAAQ,eACnC;CAMA,UAHE,SAAS,WACL,EAAE,UAAU,aAAa,QAAQ,QAAQ,WAAW,QAAQ,IAC5D,EAAE,2BAA2B,CACpB;CAEf,MAAM,iBAAiB,cAAc;EACnC,IAAI,sBACF,OAAO;EAET,IAAI,WACF;EAEF,IAAI,aACF,OAAO,wBAAwB,aAA+B,KAAK;CAEvE,GAAG;EAAC;EAAW;EAAsB;EAAO;CAAW,CAAC;CAExD,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,gBACjB,SAAS,EAAE,IAAI,iBAAiB,KAAK,CAAC;CAE1C,GAAG;EAAC;EAAW;EAAU;CAAc,CAAC;CAExC,MAAM,cAAc,cAAc,WAAW;CAC7C,MAAM,MAAM,OAAO,gBAAgB,WAAW,cAAc,aAAa;CAGzE,IAAI,YADiB,gBAAgB,gBAAgB,KAC1B,KAAK,gBAAgB,MAAM,MAAM;CAE5D,MAAM,iBACJ,gBAAgB,OAAO,OAAO,GAAG,EAAE,GAAG,WAAW;CACnD,MAAM,iBACJ,gBAAgB,OAAO,OAAO,GAAG,EAAE,GAAG,WAAW;CAEnD,MAAM,UACH,MACG,gBAAgB,QAAA,sBAA6B,GAAG,IAChD,mBACJ,kBACA,mBAAmB,EAAE,QAAQ,UAAU,CAAC;CAE1C,IAAI,QAAQ,IAAI,aAAa,eAC3B,aAAa,IAAI,gBAAgB,MAAM;CAGzC,MAAM,YAAY,IAAI,KACpB,gBAAgB,MAAM,MAAM,GAAG,WAAW,aAAa,CACzD;CAEA,IAAI,aAAa,CAAC,sBAChB,OAAO,oBAAC,4BAAD,CAA6B,CAAA;CAGtC,IAAI,CAAC,gBAAgB,OACnB,OAAO;CAGT,OACE,qBAAC,eAAD;EACE,YAAA;EACA,eAAA;EACA,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAE;YAHzD;GAKE,oBAAC,iBAAD;IAAiB,OAAO,eAAe;IAAO,MAAM;GAAY,CAAA;GAC/D,SAAS,YAAY,6BACpB,oBAAC,mBAAD,EAAA,UAAoB,2BAA8C,CAAA,IAChE;GACJ,oBAAC,cAAD,EAAc,OAAO,eAAe,MAAQ,CAAA;GAC3C,YACC,oBAAC,gBAAD;IAAgB,YAAY;IAAmB;GAAS,CAAA,IACtD;EACS;;AAEnB"}
+{"version":3,"file":"TransactionDetailsPage.js","names":[],"sources":["../../../../src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx"],"sourcesContent":["import type { FullStatusData } from '@lifi/sdk'\nimport { useLocation, useNavigate } from '@tanstack/react-router'\nimport { useEffect, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { TransactionCard } from '../../components/TransactionCard/TransactionCard.js'\nimport { internalExplorerUrl } from '../../config/constants.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useTools } from '../../hooks/useTools.js'\nimport { useTransactionDetails } from '../../hooks/useTransactionDetails.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js'\nimport { getSourceTxHash } from '../../stores/routes/utils.js'\nimport { buildRouteFromTxHistory } from '../../utils/converters.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ReceiptsCard } from './ReceiptsCard.js'\nimport { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js'\nimport { TransferIdCard } from './TransferIdCard.js'\n\nexport const TransactionDetailsPage: React.FC = () => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { mode, modeOptions, contractSecondaryComponent, explorerUrls } =\n    useWidgetConfig()\n  const { search }: any = useLocation()\n  const { tools } = useTools()\n  const { getTransactionLink } = useExplorer()\n  const storedRouteExecution = useRouteExecutionStore((store) =>\n    search?.routeId ? store.routes[search.routeId] : undefined\n  )\n  const { transaction, isLoading } = useTransactionDetails(\n    !storedRouteExecution && search?.transactionHash\n  )\n\n  const title =\n    mode === 'custom'\n      ? t(`header.${modeOptions?.custom?.type ?? 'checkout'}Details`)\n      : t('header.transactionDetails')\n  useHeader(title)\n\n  const routeExecution = useMemo(() => {\n    if (storedRouteExecution) {\n      return storedRouteExecution\n    }\n    if (isLoading) {\n      return\n    }\n    if (transaction) {\n      return buildRouteFromTxHistory(transaction as FullStatusData, tools)\n    }\n  }, [isLoading, storedRouteExecution, tools, transaction])\n\n  useEffect(() => {\n    if (!isLoading && !routeExecution) {\n      navigate({ to: navigationRoutes.home })\n    }\n  }, [isLoading, navigate, routeExecution])\n\n  const explorerUrl = explorerUrls?.internal?.[0]\n  const url = typeof explorerUrl === 'string' ? explorerUrl : explorerUrl?.url\n\n  const sourceTxHash = getSourceTxHash(routeExecution?.route)\n  let supportId = sourceTxHash ?? routeExecution?.route.id ?? ''\n\n  const internalTxLink =\n    routeExecution?.route?.steps?.at(-1)?.execution?.internalTxLink\n  const externalTxLink =\n    routeExecution?.route?.steps?.at(-1)?.execution?.externalTxLink\n\n  const txLink =\n    (url\n      ? internalTxLink?.replace(internalExplorerUrl, url)\n      : internalTxLink) ||\n    externalTxLink ||\n    getTransactionLink({ txHash: supportId })\n\n  if (process.env.NODE_ENV === 'development') {\n    supportId += `_${routeExecution?.route.id}`\n  }\n\n  const startedAt = new Date(\n    routeExecution?.route.steps[0].execution?.startedAt ?? 0\n  )\n\n  if (isLoading && !storedRouteExecution) {\n    return <TransactionDetailsSkeleton />\n  }\n\n  if (!routeExecution?.route) {\n    return null\n  }\n\n  return (\n    <PageContainer\n      topGutters\n      bottomGutters\n      sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}\n    >\n      <TransactionCard route={routeExecution.route} date={startedAt} />\n      {mode === 'custom' && contractSecondaryComponent ? (\n        <ContractComponent>{contractSecondaryComponent}</ContractComponent>\n      ) : null}\n      <ReceiptsCard route={routeExecution.route} />\n      {supportId ? (\n        <TransferIdCard transferId={supportId} txLink={txLink} />\n      ) : null}\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,+BAAyC;CACpD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,MAAM,aAAa,4BAA4B,iBACrD,gBAAgB;CAClB,MAAM,EAAE,WAAgB,YAAY;CACpC,MAAM,EAAE,UAAU,SAAS;CAC3B,MAAM,EAAE,uBAAuB,YAAY;CAC3C,MAAM,uBAAuB,wBAAwB,UACnD,QAAQ,UAAU,MAAM,OAAO,OAAO,WAAW,KAAA,CACnD;CACA,MAAM,EAAE,aAAa,cAAc,sBACjC,CAAC,wBAAwB,QAAQ,eACnC;CAMA,UAHE,SAAS,WACL,EAAE,UAAU,aAAa,QAAQ,QAAQ,WAAW,QAAQ,IAC5D,EAAE,2BAA2B,CACpB;CAEf,MAAM,iBAAiB,cAAc;EACnC,IAAI,sBACF,OAAO;EAET,IAAI,WACF;EAEF,IAAI,aACF,OAAO,wBAAwB,aAA+B,KAAK;CAEvE,GAAG;EAAC;EAAW;EAAsB;EAAO;CAAW,CAAC;CAExD,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,gBACjB,SAAS,EAAE,IAAI,iBAAiB,KAAK,CAAC;CAE1C,GAAG;EAAC;EAAW;EAAU;CAAc,CAAC;CAExC,MAAM,cAAc,cAAc,WAAW;CAC7C,MAAM,MAAM,OAAO,gBAAgB,WAAW,cAAc,aAAa;CAGzE,IAAI,YADiB,gBAAgB,gBAAgB,KAC1B,KAAK,gBAAgB,MAAM,MAAM;CAE5D,MAAM,iBACJ,gBAAgB,OAAO,OAAO,GAAG,EAAE,CAAC,EAAE,WAAW;CACnD,MAAM,iBACJ,gBAAgB,OAAO,OAAO,GAAG,EAAE,CAAC,EAAE,WAAW;CAEnD,MAAM,UACH,MACG,gBAAgB,QAAA,sBAA6B,GAAG,IAChD,mBACJ,kBACA,mBAAmB,EAAE,QAAQ,UAAU,CAAC;CAE1C,IAAI,QAAQ,IAAI,aAAa,eAC3B,aAAa,IAAI,gBAAgB,MAAM;CAGzC,MAAM,YAAY,IAAI,KACpB,gBAAgB,MAAM,MAAM,EAAE,CAAC,WAAW,aAAa,CACzD;CAEA,IAAI,aAAa,CAAC,sBAChB,OAAO,oBAAC,4BAAD,CAA6B,CAAA;CAGtC,IAAI,CAAC,gBAAgB,OACnB,OAAO;CAGT,OACE,qBAAC,eAAD;EACE,YAAA;EACA,eAAA;EACA,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAE;YAHzD;GAKE,oBAAC,iBAAD;IAAiB,OAAO,eAAe;IAAO,MAAM;GAAY,CAAA;GAC/D,SAAS,YAAY,6BACpB,oBAAC,mBAAD,EAAA,UAAoB,2BAA8C,CAAA,IAChE;GACJ,oBAAC,cAAD,EAAc,OAAO,eAAe,MAAQ,CAAA;GAC3C,YACC,oBAAC,gBAAD;IAAgB,YAAY;IAAmB;GAAS,CAAA,IACtD;EACS;;AAEnB"}

package/dist/esm/pages/TransactionDetailsPage/TransactionDetailsSkeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionDetailsSkeleton.js","names":["Card"],"sources":["../../../../src/pages/TransactionDetailsPage/TransactionDetailsSkeleton.tsx"],"sourcesContent":["import { Box, Skeleton } from '@mui/material'\nimport type { JSX } from 'react'\nimport { Card } from '../../components/Card/Card.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { TokenSkeleton } from '../../components/Token/Token.js'\n\nexport const TransactionDetailsSkeleton = (): JSX.Element => {\n  return (\n    <PageContainer topGutters>\n      <Box\n        sx={{\n          pb: 1,\n          pt: 0.75,\n          display: 'flex',\n          flex: 1,\n          justifyContent: 'space-between',\n        }}\n      >\n        <Skeleton width={96} height={20} variant=\"text\" />\n        <Skeleton width={40} height={20} variant=\"text\" />\n      </Box>\n      <Card sx={{ paddingX: 2, marginBottom: 3 }}>\n        <Box\n          sx={{\n            pt: 2.5,\n          }}\n        >\n          <Skeleton width={64} height={12} variant=\"rounded\" />\n        </Box>\n        <Box\n          sx={{\n            py: 1,\n          }}\n        >\n          {/* Token skeleton */}\n          <Box\n            sx={{\n              py: 1,\n            }}\n          >\n            <TokenSkeleton />\n          </Box>\n          {/* Bridge skeleton */}\n          <Box\n            sx={{\n              py: 1,\n            }}\n          >\n            <TokenSkeleton disableDescription />\n          </Box>\n          {/* Steps skeleton */}\n          {Array.from({ length: 3 }).map((_, key) => (\n            <Box\n              key={key}\n              sx={{\n                py: 1,\n                display: 'flex',\n                alignItems: 'center',\n              }}\n            >\n              <Skeleton\n                variant=\"rounded\"\n                width={40}\n                height={40}\n                sx={{\n                  borderRadius: '100%',\n                }}\n              />\n              <Skeleton\n                sx={{\n                  ml: 2,\n                }}\n                width={96}\n                height={24}\n                variant=\"text\"\n              />\n            </Box>\n          ))}\n          {/* Receiving Token skeleton */}\n          <Box\n            sx={{\n              py: 1,\n            }}\n          >\n            <TokenSkeleton />\n          </Box>\n        </Box>\n      </Card>\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;AAMA,MAAa,mCAAgD;CAC3D,OACE,qBAAC,eAAD;EAAe,YAAA;YAAf,CACE,qBAAC,KAAD;GACE,IAAI;IACF,IAAI;IACJ,IAAI;IACJ,SAAS;IACT,MAAM;IACN,gBAAgB;GAClB;aAPF,CASE,oBAAC,UAAD;IAAU,OAAO;IAAI,QAAQ;IAAI,SAAQ;GAAQ,CAAA,GACjD,oBAAC,UAAD;IAAU,OAAO;IAAI,QAAQ;IAAI,SAAQ;GAAQ,CAAA,CAC9C;MACL,qBAACA,QAAD;GAAM,IAAI;IAAE,UAAU;IAAG,cAAc;GAAE;aAAzC,CACE,oBAAC,KAAD;IACE,IAAI,EACF,IAAI,IACN;cAEA,oBAAC,UAAD;KAAU,OAAO;KAAI,QAAQ;KAAI,SAAQ;IAAW,CAAA;GACjD,CAAA,GACL,qBAAC,KAAD;IACE,IAAI,EACF,IAAI,EACN;cAHF;KAME,oBAAC,KAAD;MACE,IAAI,EACF,IAAI,EACN;gBAEA,oBAAC,eAAD,CAAgB,CAAA;KACb,CAAA;KAEL,oBAAC,KAAD;MACE,IAAI,EACF,IAAI,EACN;gBAEA,oBAAC,eAAD,EAAe,oBAAA,KAAoB,CAAA;KAChC,CAAA;KAEJ,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,GAAG,QACjC,qBAAC,KAAD;MAEE,IAAI;OACF,IAAI;OACJ,SAAS;OACT,YAAY;MACd;gBANF,CAQE,oBAAC,UAAD;OACE,SAAQ;OACR,OAAO;OACP,QAAQ;OACR,IAAI,EACF,cAAc,OAChB;MACD,CAAA,GACD,oBAAC,UAAD;OACE,IAAI,EACF,IAAI,EACN;OACA,OAAO;OACP,QAAQ;OACR,SAAQ;MACT,CAAA,CACE;QAvBE,GAuBF,CACN;KAED,oBAAC,KAAD;MACE,IAAI,EACF,IAAI,EACN;gBAEA,oBAAC,eAAD,CAAgB,CAAA;KACb,CAAA;IACF;KACD;IACO;;AAEnB"}
+{"version":3,"file":"TransactionDetailsSkeleton.js","names":["Card"],"sources":["../../../../src/pages/TransactionDetailsPage/TransactionDetailsSkeleton.tsx"],"sourcesContent":["import { Box, Skeleton } from '@mui/material'\nimport type { JSX } from 'react'\nimport { Card } from '../../components/Card/Card.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { TokenSkeleton } from '../../components/Token/Token.js'\n\nexport const TransactionDetailsSkeleton = (): JSX.Element => {\n  return (\n    <PageContainer topGutters>\n      <Box\n        sx={{\n          pb: 1,\n          pt: 0.75,\n          display: 'flex',\n          flex: 1,\n          justifyContent: 'space-between',\n        }}\n      >\n        <Skeleton width={96} height={20} variant=\"text\" />\n        <Skeleton width={40} height={20} variant=\"text\" />\n      </Box>\n      <Card sx={{ paddingX: 2, marginBottom: 3 }}>\n        <Box\n          sx={{\n            pt: 2.5,\n          }}\n        >\n          <Skeleton width={64} height={12} variant=\"rounded\" />\n        </Box>\n        <Box\n          sx={{\n            py: 1,\n          }}\n        >\n          {/* Token skeleton */}\n          <Box\n            sx={{\n              py: 1,\n            }}\n          >\n            <TokenSkeleton />\n          </Box>\n          {/* Bridge skeleton */}\n          <Box\n            sx={{\n              py: 1,\n            }}\n          >\n            <TokenSkeleton disableDescription />\n          </Box>\n          {/* Steps skeleton */}\n          {Array.from({ length: 3 }).map((_, key) => (\n            <Box\n              key={key}\n              sx={{\n                py: 1,\n                display: 'flex',\n                alignItems: 'center',\n              }}\n            >\n              <Skeleton\n                variant=\"rounded\"\n                width={40}\n                height={40}\n                sx={{\n                  borderRadius: '100%',\n                }}\n              />\n              <Skeleton\n                sx={{\n                  ml: 2,\n                }}\n                width={96}\n                height={24}\n                variant=\"text\"\n              />\n            </Box>\n          ))}\n          {/* Receiving Token skeleton */}\n          <Box\n            sx={{\n              py: 1,\n            }}\n          >\n            <TokenSkeleton />\n          </Box>\n        </Box>\n      </Card>\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;AAMA,MAAa,mCAAgD;CAC3D,OACE,qBAAC,eAAD;EAAe,YAAA;YAAf,CACE,qBAAC,KAAD;GACE,IAAI;IACF,IAAI;IACJ,IAAI;IACJ,SAAS;IACT,MAAM;IACN,gBAAgB;GAClB;aAPF,CASE,oBAAC,UAAD;IAAU,OAAO;IAAI,QAAQ;IAAI,SAAQ;GAAQ,CAAA,GACjD,oBAAC,UAAD;IAAU,OAAO;IAAI,QAAQ;IAAI,SAAQ;GAAQ,CAAA,CAC9C;MACL,qBAACA,QAAD;GAAM,IAAI;IAAE,UAAU;IAAG,cAAc;GAAE;aAAzC,CACE,oBAAC,KAAD;IACE,IAAI,EACF,IAAI,IACN;cAEA,oBAAC,UAAD;KAAU,OAAO;KAAI,QAAQ;KAAI,SAAQ;IAAW,CAAA;GACjD,CAAA,GACL,qBAAC,KAAD;IACE,IAAI,EACF,IAAI,EACN;cAHF;KAME,oBAAC,KAAD;MACE,IAAI,EACF,IAAI,EACN;gBAEA,oBAAC,eAAD,CAAgB,CAAA;KACb,CAAA;KAEL,oBAAC,KAAD;MACE,IAAI,EACF,IAAI,EACN;gBAEA,oBAAC,eAAD,EAAe,oBAAA,KAAoB,CAAA;KAChC,CAAA;KAEJ,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,QACjC,qBAAC,KAAD;MAEE,IAAI;OACF,IAAI;OACJ,SAAS;OACT,YAAY;MACd;gBANF,CAQE,oBAAC,UAAD;OACE,SAAQ;OACR,OAAO;OACP,QAAQ;OACR,IAAI,EACF,cAAc,OAChB;MACD,CAAA,GACD,oBAAC,UAAD;OACE,IAAI,EACF,IAAI,EACN;OACA,OAAO;OACP,QAAQ;OACR,SAAQ;MACT,CAAA,CACE;QAvBE,GAuBF,CACN;KAED,oBAAC,KAAD;MACE,IAAI,EACF,IAAI,EACN;gBAEA,oBAAC,eAAD,CAAgB,CAAA;KACb,CAAA;IACF;KACD;IACO;;AAEnB"}

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

@@ -5,14 +5,14 @@ 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 { 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 ConfirmToAddressSheet = ({ ref, ...props }) => {
 	const handleClose = () => {
 		ref.current?.close();
 	};
@@ -23,7 +23,7 @@ const ConfirmToAddressSheet = forwardRef((props, ref) => {
 			onClose: handleClose
 		})
 	});
-});
+};
 const ConfirmToAddressSheetContent = ({ onContinue, onClose, toAddress, toChainId }) => {
 	const { t } = useTranslation();
 	const { chain } = useChain(toChainId);

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

@@ -1 +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"}
+{"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 { JSX, Ref, RefObject } from 'react'\nimport { 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 = ({\n  ref,\n  ...props\n}: ConfirmToAddressSheetProps & {\n  ref?: Ref<BottomSheetBase>\n}): JSX.Element => {\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,yBAAyB,EACpC,KACA,GAAG,YAGc;CACjB,MAAM,oBAAoB;EACvB,IAAoC,SAAS,MAAM;CACtD;CAEA,OACE,oBAAC,aAAD;EAAkB;YAChB,oBAAC,8BAAD;GAA8B,GAAI;GAAO,SAAS;EAAc,CAAA;CACrD,CAAA;AAEjB;AAEA,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

@@ -3,27 +3,31 @@ 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 { 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 ExchangeRateBottomSheet = ({ onContinue, onCancel, ref }) => {
 	const [data, setData] = useState();
 	const bottomSheetRef = useRef(null);
 	const resolverRef = useRef(null);
-	const handleContinue = () => {
-		ref.current?.close(true);
+	const close = useCallback((value = false, bottomSheetClose = true) => {
+		resolverRef.current?.(value);
+		if (bottomSheetClose) bottomSheetRef.current?.close();
+	}, []);
+	const handleContinue = useCallback(() => {
+		close(true);
 		onContinue?.();
-	};
+	}, [close, onContinue]);
 	const handleCancel = useCallback(() => {
-		ref.current?.close(false);
+		close(false);
 		onCancel?.();
-	}, [onCancel, ref]);
+	}, [close, onCancel]);
 	const handleClose = useCallback(() => {
-		ref.current?.close(false, false);
+		close(false, false);
 		onCancel?.();
-	}, [onCancel, ref]);
+	}, [close, onCancel]);
 	useImperativeHandle(ref, () => ({
 		isOpen: () => bottomSheetRef.current?.isOpen(),
 		open: (resolver, data) => {
@@ -31,11 +35,8 @@ const ExchangeRateBottomSheet = forwardRef(({ onContinue, onCancel }, ref) => {
 			resolverRef.current = resolver;
 			bottomSheetRef.current?.open();
 		},
-		close: (value = false, bottomSheetClose = true) => {
-			resolverRef.current?.(value);
-			if (bottomSheetClose) bottomSheetRef.current?.close();
-		}
-	}), []);
+		close
+	}), [close]);
 	return /* @__PURE__ */ jsx(BottomSheet, {
 		ref: bottomSheetRef,
 		onClose: handleClose,
@@ -45,7 +46,7 @@ const ExchangeRateBottomSheet = forwardRef(({ onContinue, onCancel }, ref) => {
 			onCancel: handleCancel
 		})
 	});
-});
+};
 const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
 	const { t } = useTranslation();
 	const ref = useRef(null);

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

@@ -1 +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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"}
+{"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 { JSX, Ref } from 'react'\nimport { useCallback, useImperativeHandle, 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 { 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 = ({\n  onContinue,\n  onCancel,\n  ref,\n}: ExchangeRateBottomSheetProps & {\n  ref?: Ref<ExchangeRateBottomSheetBase>\n}): JSX.Element => {\n  const [data, setData] = useState<ExchangeRateUpdateParams>()\n  const bottomSheetRef = useRef<BottomSheetBase>(null)\n  const resolverRef = useRef<(value: boolean) => void>(null)\n\n  const close = useCallback((value = false, bottomSheetClose = true) => {\n    resolverRef.current?.(value)\n    if (bottomSheetClose) {\n      bottomSheetRef.current?.close()\n    }\n  }, [])\n\n  const handleContinue = useCallback(() => {\n    close(true)\n    onContinue?.()\n  }, [close, onContinue])\n\n  const handleCancel = useCallback(() => {\n    close(false)\n    onCancel?.()\n  }, [close, onCancel])\n\n  const handleClose = useCallback(() => {\n    close(false, false)\n    onCancel?.()\n  }, [close, onCancel])\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,\n    }),\n    [close]\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\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.map

@@ -1 +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"}
+{"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,CAAC,QAAQ;CACjB,SAAS;CACT,YAAY;CACZ,UAAU;AACZ,EAAE"}

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

@@ -1 +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"}
+{"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,CAAC,CAAC,OAAO,kBAAkB,EAAE,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/TokenValueBottomSheet.js

@@ -5,12 +5,12 @@ 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 { 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 TokenValueBottomSheet = ({ route, onContinue, onCancel, ref }) => {
 	const handleCancel = () => {
 		ref.current?.close();
 		onCancel?.();
@@ -24,7 +24,7 @@ const TokenValueBottomSheet = forwardRef(({ route, onContinue, onCancel }, ref)
 			onCancel: handleCancel
 		})
 	});
-});
+};
 const TokenValueBottomSheetContent = ({ route, onCancel, onContinue }) => {
 	const [accepted, setAccepted] = useState(false);
 	const { t } = useTranslation();

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

@@ -1 +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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"}
+{"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 { JSX, Ref, RefObject } from 'react'\nimport { 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 = ({\n  route,\n  onContinue,\n  onCancel,\n  ref,\n}: TokenValueBottomSheetProps & {\n  ref?: Ref<BottomSheetBase>\n}): JSX.Element => {\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\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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"}