@lifi/widget 4.1.0 → 4.2.0

package/dist/esm/components/LimitOrderSettings/LimitOrderSettings.js

@@ -0,0 +1,99 @@
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { formatDuration } from "../../utils/format.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { Card as Card$1 } from "../Card/Card.js";
+import { Switch as Switch$1 } from "../Switch.js";
+import { Container as Container$1, ExpiryValue, SettingItemButton, SettingItemTitle, SettingItemValue, SettingsRow, ToggleLabel } from "./LimitOrderSettings.style.js";
+import { useState } from "react";
+import { Menu, MenuItem } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Check from "@mui/icons-material/Check";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+//#region src/components/LimitOrderSettings/LimitOrderSettings.tsx
+/** Selectable order-validity durations, in seconds. */
+const DURATIONS = [
+	3600,
+	86400,
+	604800,
+	2592e3,
+	31536e3
+];
+const LimitOrderSettings = (props) => {
+	const { t, i18n } = useTranslation();
+	const [validUntil, partiallyFillable] = useFieldValues("validUntil", "partiallyFillable");
+	const { setFieldValue } = useFieldActions();
+	const [anchorEl, setAnchorEl] = useState(null);
+	const open = Boolean(anchorEl);
+	const handleOpen = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+	const handleSelect = (duration) => {
+		setFieldValue("validUntil", duration);
+		setAnchorEl(null);
+	};
+	const handlePartiallyFillableChange = (event) => {
+		setFieldValue("partiallyFillable", event.target.checked);
+	};
+	return /* @__PURE__ */ jsxs(Container$1, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Card$1, { children: /* @__PURE__ */ jsxs(SettingItemButton, {
+				onClick: handleOpen,
+				disableRipple: true,
+				"aria-haspopup": "menu",
+				"aria-expanded": open,
+				children: [/* @__PURE__ */ jsx(SettingItemTitle, { children: t("limitOrder.expiresIn") }), /* @__PURE__ */ jsxs(ExpiryValue, { children: [/* @__PURE__ */ jsx(SettingItemValue, { children: formatDuration(validUntil, i18n.language, "long") }), /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { sx: {
+					fontSize: 20,
+					height: "18px",
+					marginTop: "2px"
+				} })] })]
+			}) }),
+			/* @__PURE__ */ jsx(Menu, {
+				anchorEl,
+				open,
+				onClose: handleClose,
+				anchorOrigin: {
+					vertical: "bottom",
+					horizontal: "right"
+				},
+				transformOrigin: {
+					vertical: "top",
+					horizontal: "right"
+				},
+				slotProps: { paper: { sx: (theme) => ({
+					border: `1px solid ${theme.vars.palette.grey[300]}`,
+					boxShadow: "none",
+					...theme.applyStyles("dark", { borderColor: theme.vars.palette.grey[800] })
+				}) } },
+				children: DURATIONS.map((duration) => /* @__PURE__ */ jsxs(MenuItem, {
+					onClick: () => handleSelect(duration),
+					sx: (theme) => ({
+						justifyContent: "space-between",
+						gap: 4,
+						fontSize: 14,
+						fontWeight: 700,
+						lineHeight: "18px",
+						color: theme.vars.palette.text.primary
+					}),
+					children: [formatDuration(duration, i18n.language, "long"), duration === validUntil ? /* @__PURE__ */ jsx(Check, {
+						color: "primary",
+						fontSize: "small"
+					}) : null]
+				}, duration))
+			}),
+			/* @__PURE__ */ jsx(Card$1, { children: /* @__PURE__ */ jsxs(SettingsRow, { children: [/* @__PURE__ */ jsx(ToggleLabel, { children: t("limitOrder.partiallyFillable") }), /* @__PURE__ */ jsx(Switch$1, {
+				checked: partiallyFillable,
+				onChange: handlePartiallyFillableChange,
+				"aria-label": t("limitOrder.partiallyFillable")
+			})] }) })
+		]
+	});
+};
+//#endregion
+export { LimitOrderSettings };
+
+//# sourceMappingURL=LimitOrderSettings.js.map

package/dist/esm/components/LimitOrderSettings/LimitOrderSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LimitOrderSettings.js","names":["Container","Card","Switch"],"sources":["../../../../src/components/LimitOrderSettings/LimitOrderSettings.tsx"],"sourcesContent":["import Check from '@mui/icons-material/Check'\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'\nimport type { BoxProps } from '@mui/material'\nimport { Menu, MenuItem } from '@mui/material'\nimport { type ChangeEvent, type JSX, type MouseEvent, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { formatDuration } from '../../utils/format.js'\nimport { Card } from '../Card/Card.js'\nimport { Switch } from '../Switch.js'\nimport {\n  Container,\n  ExpiryValue,\n  SettingItemButton,\n  SettingItemTitle,\n  SettingItemValue,\n  SettingsRow,\n  ToggleLabel,\n} from './LimitOrderSettings.style.js'\n\n/** Selectable order-validity durations, in seconds. */\nconst DURATIONS = [3600, 86400, 604800, 2592000, 31536000]\n\nexport const LimitOrderSettings: React.FC<BoxProps> = (props): JSX.Element => {\n  const { t, i18n } = useTranslation()\n  const [validUntil, partiallyFillable] = useFieldValues(\n    'validUntil',\n    'partiallyFillable'\n  )\n  const { setFieldValue } = useFieldActions()\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n  const open = Boolean(anchorEl)\n\n  const handleOpen = (event: MouseEvent<HTMLElement>): void => {\n    setAnchorEl(event.currentTarget)\n  }\n\n  const handleClose = (): void => {\n    setAnchorEl(null)\n  }\n\n  const handleSelect = (duration: number): void => {\n    setFieldValue('validUntil', duration)\n    setAnchorEl(null)\n  }\n\n  const handlePartiallyFillableChange = (\n    event: ChangeEvent<HTMLInputElement>\n  ): void => {\n    setFieldValue('partiallyFillable', event.target.checked)\n  }\n\n  return (\n    <Container {...props}>\n      <Card>\n        <SettingItemButton\n          onClick={handleOpen}\n          disableRipple\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n        >\n          <SettingItemTitle>{t('limitOrder.expiresIn')}</SettingItemTitle>\n          <ExpiryValue>\n            <SettingItemValue>\n              {formatDuration(validUntil, i18n.language, 'long')}\n            </SettingItemValue>\n            <KeyboardArrowDownIcon\n              sx={{ fontSize: 20, height: '18px', marginTop: '2px' }}\n            />\n          </ExpiryValue>\n        </SettingItemButton>\n      </Card>\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={handleClose}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        slotProps={{\n          paper: {\n            sx: (theme) => ({\n              border: `1px solid ${theme.vars.palette.grey[300]}`,\n              boxShadow: 'none',\n              ...theme.applyStyles('dark', {\n                borderColor: theme.vars.palette.grey[800],\n              }),\n            }),\n          },\n        }}\n      >\n        {DURATIONS.map((duration) => (\n          <MenuItem\n            key={duration}\n            onClick={() => handleSelect(duration)}\n            sx={(theme) => ({\n              justifyContent: 'space-between',\n              gap: 4,\n              fontSize: 14,\n              fontWeight: 700,\n              lineHeight: '18px',\n              color: theme.vars.palette.text.primary,\n            })}\n          >\n            {formatDuration(duration, i18n.language, 'long')}\n            {duration === validUntil ? (\n              <Check color=\"primary\" fontSize=\"small\" />\n            ) : null}\n          </MenuItem>\n        ))}\n      </Menu>\n      <Card>\n        <SettingsRow>\n          <ToggleLabel>{t('limitOrder.partiallyFillable')}</ToggleLabel>\n          <Switch\n            checked={partiallyFillable}\n            onChange={handlePartiallyFillableChange}\n            aria-label={t('limitOrder.partiallyFillable')}\n          />\n        </SettingsRow>\n      </Card>\n    </Container>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAM,YAAY;CAAC;CAAM;CAAO;CAAQ;CAAS;AAAQ;AAEzD,MAAa,sBAA0C,UAAuB;CAC5E,MAAM,EAAE,GAAG,SAAS,eAAe;CACnC,MAAM,CAAC,YAAY,qBAAqB,eACtC,cACA,mBACF;CACA,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,CAAC,UAAU,eAAe,SAA6B,IAAI;CACjE,MAAM,OAAO,QAAQ,QAAQ;CAE7B,MAAM,cAAc,UAAyC;EAC3D,YAAY,MAAM,aAAa;CACjC;CAEA,MAAM,oBAA0B;EAC9B,YAAY,IAAI;CAClB;CAEA,MAAM,gBAAgB,aAA2B;EAC/C,cAAc,cAAc,QAAQ;EACpC,YAAY,IAAI;CAClB;CAEA,MAAM,iCACJ,UACS;EACT,cAAc,qBAAqB,MAAM,OAAO,OAAO;CACzD;CAEA,OACE,qBAACA,aAAD;EAAW,GAAI;YAAf;GACE,oBAACC,QAAD,EAAA,UACE,qBAAC,mBAAD;IACE,SAAS;IACT,eAAA;IACA,iBAAc;IACd,iBAAe;cAJjB,CAME,oBAAC,kBAAD,EAAA,UAAmB,EAAE,sBAAsB,EAAoB,CAAA,GAC/D,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,kBAAD,EAAA,UACG,eAAe,YAAY,KAAK,UAAU,MAAM,EACjC,CAAA,GAClB,oBAAC,uBAAD,EACE,IAAI;KAAE,UAAU;KAAI,QAAQ;KAAQ,WAAW;IAAM,EACtD,CAAA,CACU,EAAA,CAAA,CACI;MACf,CAAA;GACN,oBAAC,MAAD;IACY;IACJ;IACN,SAAS;IACT,cAAc;KAAE,UAAU;KAAU,YAAY;IAAQ;IACxD,iBAAiB;KAAE,UAAU;KAAO,YAAY;IAAQ;IACxD,WAAW,EACT,OAAO,EACL,KAAK,WAAW;KACd,QAAQ,aAAa,MAAM,KAAK,QAAQ,KAAK;KAC7C,WAAW;KACX,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,MAAM,KAAK,QAAQ,KAAK,KACvC,CAAC;IACH,GACF,EACF;cAEC,UAAU,KAAK,aACd,qBAAC,UAAD;KAEE,eAAe,aAAa,QAAQ;KACpC,KAAK,WAAW;MACd,gBAAgB;MAChB,KAAK;MACL,UAAU;MACV,YAAY;MACZ,YAAY;MACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;KACjC;eAVF,CAYG,eAAe,UAAU,KAAK,UAAU,MAAM,GAC9C,aAAa,aACZ,oBAAC,OAAD;MAAO,OAAM;MAAU,UAAS;KAAS,CAAA,IACvC,IACI;OAfH,QAeG,CACX;GACG,CAAA;GACN,oBAACA,QAAD,EAAA,UACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,EAAE,8BAA8B,EAAe,CAAA,GAC7D,oBAACC,UAAD;IACE,SAAS;IACT,UAAU;IACV,cAAY,EAAE,8BAA8B;GAC7C,CAAA,CACU,EAAA,CAAA,EACT,CAAA;EACG;;AAEf"}

package/dist/esm/components/LimitOrderSettings/LimitOrderSettings.style.js

@@ -0,0 +1,52 @@
+import { Box, ButtonBase, Typography, styled } from "@mui/material";
+//#region src/components/LimitOrderSettings/LimitOrderSettings.style.tsx
+const Container$1 = styled(Box)(({ theme }) => ({
+	display: "flex",
+	flexDirection: "column",
+	gap: theme.spacing(1)
+}));
+const SettingsRow = styled(Box)(({ theme }) => ({
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+	gap: theme.spacing(2),
+	padding: theme.spacing(1.5, 2)
+}));
+const ToggleLabel = styled(Box)(({ theme }) => ({
+	fontSize: 14,
+	fontWeight: 700,
+	lineHeight: 1,
+	color: theme.vars.palette.text.primary,
+	flex: "1 0 0",
+	minWidth: 0
+}));
+const ExpiryValue = styled(Box)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	gap: theme.spacing(.5),
+	color: theme.vars.palette.text.secondary,
+	height: 14
+}));
+const SettingItemButton = styled(ButtonBase)(({ theme }) => ({
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+	width: "100%",
+	padding: theme.spacing(2),
+	borderRadius: theme.vars.shape.borderRadius
+}));
+const SettingItemTitle = styled(Typography)(({ theme }) => ({
+	fontSize: 14,
+	fontWeight: 700,
+	color: theme.vars.palette.text.primary,
+	lineHeight: 1
+}));
+const SettingItemValue = styled(Typography)(({ theme }) => ({
+	fontSize: 14,
+	fontWeight: 700,
+	color: theme.vars.palette.text.primary
+}));
+//#endregion
+export { Container$1 as Container, ExpiryValue, SettingItemButton, SettingItemTitle, SettingItemValue, SettingsRow, ToggleLabel };
+
+//# sourceMappingURL=LimitOrderSettings.style.js.map

package/dist/esm/components/LimitOrderSettings/LimitOrderSettings.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LimitOrderSettings.style.js","names":["Container"],"sources":["../../../../src/components/LimitOrderSettings/LimitOrderSettings.style.tsx"],"sourcesContent":["import { Box, ButtonBase, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const Container: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n}))\n\nexport const SettingsRow: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  gap: theme.spacing(2),\n  padding: theme.spacing(1.5, 2),\n}))\n\nexport const ToggleLabel: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  fontSize: 14,\n  fontWeight: 700,\n  lineHeight: 1,\n  color: theme.vars.palette.text.primary,\n  flex: '1 0 0',\n  minWidth: 0,\n}))\n\nexport const ExpiryValue: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(0.5),\n  color: theme.vars.palette.text.secondary,\n  height: 14,\n}))\n\nexport const SettingItemButton: React.FC<\n  React.ComponentProps<typeof ButtonBase>\n> = styled(ButtonBase)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  width: '100%',\n  padding: theme.spacing(2),\n  borderRadius: theme.vars.shape.borderRadius,\n}))\n\nexport const SettingItemTitle: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 14,\n  fontWeight: 700,\n  color: theme.vars.palette.text.primary,\n  lineHeight: 1,\n}))\n\nexport const SettingItemValue: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 14,\n  fontWeight: 700,\n  color: theme.vars.palette.text.primary,\n}))\n"],"mappings":";;AAGA,MAAaA,cAAwD,OACnE,GACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAa,cAA0D,OACrE,GACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,KAAK,MAAM,QAAQ,CAAC;CACpB,SAAS,MAAM,QAAQ,KAAK,CAAC;AAC/B,EAAE;AAEF,MAAa,cAA0D,OACrE,GACF,CAAC,EAAE,EAAE,aAAa;CAChB,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,MAAM;CACN,UAAU;AACZ,EAAE;AAEF,MAAa,cAA0D,OACrE,GACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,EAAG;CACtB,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,QAAQ;AACV,EAAE;AAEF,MAAa,oBAET,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACrC,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,OAAO;CACP,SAAS,MAAM,QAAQ,CAAC;CACxB,cAAc,MAAM,KAAK,MAAM;AACjC,EAAE;AAEF,MAAa,mBAET,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,YAAY;AACd,EAAE;AAEF,MAAa,mBAET,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;AACjC,EAAE"}

package/dist/esm/components/LimitPriceCard/LimitPriceCard.js

@@ -0,0 +1,115 @@
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { formatInputAmount } from "../../utils/format.js";
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useToken } from "../../hooks/useToken.js";
+import { useRoutes } from "../../hooks/useRoutes.js";
+import { CardTitle } from "../Card/CardTitle.js";
+import { useLimitMarketRate } from "../../hooks/useLimitMarketRate.js";
+import { applyPriceOffset, invertPrice } from "../../utils/limitOrder.js";
+import { useLinkedLimitFields } from "../../hooks/useLinkedLimitFields.js";
+import { AmountCard, CardBodyRow, CardHeaderRow, LargeInput } from "../AmountInputCard/AmountInputCard.style.js";
+import { InvertChip } from "./LimitPriceCard.style.js";
+import { LimitPricePresets } from "./LimitPricePresets.js";
+import { useEffect, useRef, useState } from "react";
+import { Skeleton } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import SwapHorizIcon from "@mui/icons-material/SwapHoriz";
+//#region src/components/LimitPriceCard/LimitPriceCard.tsx
+const cleanDisplay = (value) => value ? formatInputAmount(value, 8) : "";
+const LimitPriceCard = (props) => {
+	const { t } = useTranslation();
+	const isEditingRef = useRef(false);
+	const [inputValue, setInputValue] = useState("");
+	const [fromChainId, fromTokenAddress, toChainId, toTokenAddress, priceInverted] = useFieldValues(FormKeyHelper.getChainKey("from"), FormKeyHelper.getTokenKey("from"), FormKeyHelper.getChainKey("to"), FormKeyHelper.getTokenKey("to"), "priceInverted");
+	const { token: fromToken } = useToken(fromChainId, fromTokenAddress);
+	const { token: toToken } = useToken(toChainId, toTokenAddress);
+	const { isFetching } = useRoutes();
+	const { limitPrice, setLimitPrice } = useLinkedLimitFields();
+	const { setFieldValue } = useFieldActions();
+	const hasTokens = Boolean(fromToken && toToken);
+	const showSkeleton = isFetching && !limitPrice;
+	const leadToken = priceInverted ? toToken : fromToken;
+	const unitToken = priceInverted ? fromToken : toToken;
+	const marketCanonical = useLimitMarketRate();
+	const displayPrice = priceInverted ? invertPrice(limitPrice) : limitPrice;
+	useEffect(() => {
+		setFieldValue("toAmount", "", {
+			isDirty: false,
+			isTouched: false
+		});
+		setFieldValue("selectedRouteId", void 0);
+	}, [
+		fromChainId,
+		fromTokenAddress,
+		toChainId,
+		toTokenAddress
+	]);
+	useEffect(() => {
+		if (!isEditingRef.current) setInputValue(cleanDisplay(displayPrice));
+	}, [displayPrice]);
+	const handleChange = (event) => {
+		isEditingRef.current = true;
+		const formatted = formatInputAmount(event.target.value, 18, true);
+		setInputValue(formatted);
+		const numeric = Number(formatted);
+		if (!formatted || Number.isNaN(numeric) || numeric <= 0) {
+			setLimitPrice("");
+			return;
+		}
+		const canonical = priceInverted ? 1 / numeric : numeric;
+		setLimitPrice(String(canonical));
+	};
+	const handleBlur = () => {
+		isEditingRef.current = false;
+		setInputValue(cleanDisplay(displayPrice));
+	};
+	const handleInvert = () => {
+		isEditingRef.current = false;
+		setFieldValue("priceInverted", !priceInverted);
+	};
+	const handlePreset = (pct) => {
+		if (marketCanonical === void 0) return;
+		isEditingRef.current = false;
+		setLimitPrice(applyPriceOffset(String(marketCanonical), pct));
+	};
+	const label = hasTokens ? t("limitOrder.priceLabel", { symbol: leadToken?.symbol }) : t("limitOrder.price");
+	return /* @__PURE__ */ jsxs(AmountCard, {
+		...props,
+		mask: false,
+		children: [
+			/* @__PURE__ */ jsxs(CardHeaderRow, { children: [/* @__PURE__ */ jsx(CardTitle, {
+				sx: { padding: 0 },
+				children: label
+			}), hasTokens ? /* @__PURE__ */ jsxs(InvertChip, {
+				onClick: handleInvert,
+				"aria-label": "invert price",
+				children: [unitToken?.symbol, /* @__PURE__ */ jsx(SwapHorizIcon, { sx: { fontSize: 16 } })]
+			}) : null] }),
+			/* @__PURE__ */ jsx(CardBodyRow, { children: showSkeleton ? /* @__PURE__ */ jsx(Skeleton, {
+				variant: "rounded",
+				height: 32,
+				sx: { flex: 1 }
+			}) : /* @__PURE__ */ jsx(LargeInput, {
+				size: "small",
+				autoComplete: "off",
+				placeholder: "0",
+				inputProps: { inputMode: "decimal" },
+				onChange: handleChange,
+				onBlur: handleBlur,
+				value: inputValue,
+				name: "limitPrice",
+				disabled: !hasTokens
+			}) }),
+			/* @__PURE__ */ jsx(LimitPricePresets, {
+				onSelect: handlePreset,
+				disabled: !hasTokens || marketCanonical === void 0
+			})
+		]
+	});
+};
+//#endregion
+export { LimitPriceCard };
+
+//# sourceMappingURL=LimitPriceCard.js.map

package/dist/esm/components/LimitPriceCard/LimitPriceCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LimitPriceCard.js","names":[],"sources":["../../../../src/components/LimitPriceCard/LimitPriceCard.tsx"],"sourcesContent":["import SwapHorizIcon from '@mui/icons-material/SwapHoriz'\nimport type { CardProps } from '@mui/material'\nimport { Skeleton } from '@mui/material'\nimport { type ChangeEvent, type JSX, useEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useLimitMarketRate } from '../../hooks/useLimitMarketRate.js'\nimport { useLinkedLimitFields } from '../../hooks/useLinkedLimitFields.js'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { formatInputAmount } from '../../utils/format.js'\nimport { applyPriceOffset, invertPrice } from '../../utils/limitOrder.js'\nimport {\n  AmountCard,\n  amountHeight,\n  CardBodyRow,\n  CardHeaderRow,\n  LargeInput,\n} from '../AmountInputCard/AmountInputCard.style.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { InvertChip } from './LimitPriceCard.style.js'\nimport { LimitPricePresets } from './LimitPricePresets.js'\n\nconst cleanDisplay = (value: string): string =>\n  value ? formatInputAmount(value, 8) : ''\n\nexport const LimitPriceCard: React.FC<CardProps> = (props): JSX.Element => {\n  const { t } = useTranslation()\n  const isEditingRef = useRef(false)\n  const [inputValue, setInputValue] = useState('')\n\n  const [\n    fromChainId,\n    fromTokenAddress,\n    toChainId,\n    toTokenAddress,\n    priceInverted,\n  ] = useFieldValues(\n    FormKeyHelper.getChainKey('from'),\n    FormKeyHelper.getTokenKey('from'),\n    FormKeyHelper.getChainKey('to'),\n    FormKeyHelper.getTokenKey('to'),\n    'priceInverted'\n  )\n  const { token: fromToken } = useToken(fromChainId, fromTokenAddress)\n  const { token: toToken } = useToken(toChainId, toTokenAddress)\n\n  const { isFetching } = useRoutes()\n\n  // limitPrice is derived from the from/to amount fields, not stored.\n  const { limitPrice, setLimitPrice } = useLinkedLimitFields()\n  const { setFieldValue } = useFieldActions()\n\n  const hasTokens = Boolean(fromToken && toToken)\n  const showSkeleton = isFetching && !limitPrice\n  const leadToken = priceInverted ? toToken : fromToken\n  const unitToken = priceInverted ? fromToken : toToken\n\n  const marketCanonical = useLimitMarketRate()\n\n  // Canonical price is orientation-independent; flip only for display.\n  const displayPrice = priceInverted ? invertPrice(limitPrice) : limitPrice\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: pair fields are intentional re-run triggers, not read in the body\n  useEffect(() => {\n    setFieldValue('toAmount', '', { isDirty: false, isTouched: false })\n    setFieldValue('selectedRouteId', undefined)\n  }, [fromChainId, fromTokenAddress, toChainId, toTokenAddress])\n\n  // Keep the input in sync with derived/preset/invert updates, but never yank\n  // the value out from under an actively-typing user.\n  useEffect(() => {\n    if (!isEditingRef.current) {\n      setInputValue(cleanDisplay(displayPrice))\n    }\n  }, [displayPrice])\n\n  const handleChange = (\n    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ): void => {\n    isEditingRef.current = true\n    const formatted = formatInputAmount(event.target.value, 18, true)\n    setInputValue(formatted)\n    const numeric = Number(formatted)\n    if (!formatted || Number.isNaN(numeric) || numeric <= 0) {\n      setLimitPrice('')\n      return\n    }\n    // Canonical price is orientation-independent; un-flip the displayed value.\n    const canonical = priceInverted ? 1 / numeric : numeric\n    setLimitPrice(String(canonical))\n  }\n\n  const handleBlur = (): void => {\n    isEditingRef.current = false\n    setInputValue(cleanDisplay(displayPrice))\n  }\n\n  const handleInvert = (): void => {\n    isEditingRef.current = false\n    setFieldValue('priceInverted', !priceInverted)\n  }\n\n  // Apply a percentage offset to the canonical market rate (0 = at market).\n  const handlePreset = (pct: number): void => {\n    if (marketCanonical === undefined) {\n      return\n    }\n    isEditingRef.current = false\n    setLimitPrice(applyPriceOffset(String(marketCanonical), pct))\n  }\n\n  const label = hasTokens\n    ? t('limitOrder.priceLabel', { symbol: leadToken?.symbol })\n    : t('limitOrder.price')\n\n  return (\n    <AmountCard {...props} mask={false}>\n      <CardHeaderRow>\n        <CardTitle sx={{ padding: 0 }}>{label}</CardTitle>\n        {hasTokens ? (\n          <InvertChip onClick={handleInvert} aria-label=\"invert price\">\n            {unitToken?.symbol}\n            <SwapHorizIcon sx={{ fontSize: 16 }} />\n          </InvertChip>\n        ) : null}\n      </CardHeaderRow>\n      <CardBodyRow>\n        {showSkeleton ? (\n          <Skeleton variant=\"rounded\" height={amountHeight} sx={{ flex: 1 }} />\n        ) : (\n          <LargeInput\n            size=\"small\"\n            autoComplete=\"off\"\n            placeholder=\"0\"\n            inputProps={{ inputMode: 'decimal' }}\n            onChange={handleChange}\n            onBlur={handleBlur}\n            value={inputValue}\n            name=\"limitPrice\"\n            disabled={!hasTokens}\n          />\n        )}\n      </CardBodyRow>\n      <LimitPricePresets\n        onSelect={handlePreset}\n        disabled={!hasTokens || marketCanonical === undefined}\n      />\n    </AmountCard>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAyBA,MAAM,gBAAgB,UACpB,QAAQ,kBAAkB,OAAO,CAAC,IAAI;AAExC,MAAa,kBAAuC,UAAuB;CACzE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,eAAe,OAAO,KAAK;CACjC,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAE/C,MAAM,CACJ,aACA,kBACA,WACA,gBACA,iBACE,eACF,cAAc,YAAY,MAAM,GAChC,cAAc,YAAY,MAAM,GAChC,cAAc,YAAY,IAAI,GAC9B,cAAc,YAAY,IAAI,GAC9B,eACF;CACA,MAAM,EAAE,OAAO,cAAc,SAAS,aAAa,gBAAgB;CACnE,MAAM,EAAE,OAAO,YAAY,SAAS,WAAW,cAAc;CAE7D,MAAM,EAAE,eAAe,UAAU;CAGjC,MAAM,EAAE,YAAY,kBAAkB,qBAAqB;CAC3D,MAAM,EAAE,kBAAkB,gBAAgB;CAE1C,MAAM,YAAY,QAAQ,aAAa,OAAO;CAC9C,MAAM,eAAe,cAAc,CAAC;CACpC,MAAM,YAAY,gBAAgB,UAAU;CAC5C,MAAM,YAAY,gBAAgB,YAAY;CAE9C,MAAM,kBAAkB,mBAAmB;CAG3C,MAAM,eAAe,gBAAgB,YAAY,UAAU,IAAI;CAG/D,gBAAgB;EACd,cAAc,YAAY,IAAI;GAAE,SAAS;GAAO,WAAW;EAAM,CAAC;EAClE,cAAc,mBAAmB,KAAA,CAAS;CAC5C,GAAG;EAAC;EAAa;EAAkB;EAAW;CAAc,CAAC;CAI7D,gBAAgB;EACd,IAAI,CAAC,aAAa,SAChB,cAAc,aAAa,YAAY,CAAC;CAE5C,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,gBACJ,UACS;EACT,aAAa,UAAU;EACvB,MAAM,YAAY,kBAAkB,MAAM,OAAO,OAAO,IAAI,IAAI;EAChE,cAAc,SAAS;EACvB,MAAM,UAAU,OAAO,SAAS;EAChC,IAAI,CAAC,aAAa,OAAO,MAAM,OAAO,KAAK,WAAW,GAAG;GACvD,cAAc,EAAE;GAChB;EACF;EAEA,MAAM,YAAY,gBAAgB,IAAI,UAAU;EAChD,cAAc,OAAO,SAAS,CAAC;CACjC;CAEA,MAAM,mBAAyB;EAC7B,aAAa,UAAU;EACvB,cAAc,aAAa,YAAY,CAAC;CAC1C;CAEA,MAAM,qBAA2B;EAC/B,aAAa,UAAU;EACvB,cAAc,iBAAiB,CAAC,aAAa;CAC/C;CAGA,MAAM,gBAAgB,QAAsB;EAC1C,IAAI,oBAAoB,KAAA,GACtB;EAEF,aAAa,UAAU;EACvB,cAAc,iBAAiB,OAAO,eAAe,GAAG,GAAG,CAAC;CAC9D;CAEA,MAAM,QAAQ,YACV,EAAE,yBAAyB,EAAE,QAAQ,WAAW,OAAO,CAAC,IACxD,EAAE,kBAAkB;CAExB,OACE,qBAAC,YAAD;EAAY,GAAI;EAAO,MAAM;YAA7B;GACE,qBAAC,eAAD,EAAA,UAAA,CACE,oBAAC,WAAD;IAAW,IAAI,EAAE,SAAS,EAAE;cAAI;GAAiB,CAAA,GAChD,YACC,qBAAC,YAAD;IAAY,SAAS;IAAc,cAAW;cAA9C,CACG,WAAW,QACZ,oBAAC,eAAD,EAAe,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA,CAC5B;QACV,IACS,EAAA,CAAA;GACf,oBAAC,aAAD,EAAA,UACG,eACC,oBAAC,UAAD;IAAU,SAAQ;IAAU,QAAA;IAAsB,IAAI,EAAE,MAAM,EAAE;GAAI,CAAA,IAEpE,oBAAC,YAAD;IACE,MAAK;IACL,cAAa;IACb,aAAY;IACZ,YAAY,EAAE,WAAW,UAAU;IACnC,UAAU;IACV,QAAQ;IACR,OAAO;IACP,MAAK;IACL,UAAU,CAAC;GACZ,CAAA,EAEQ,CAAA;GACb,oBAAC,mBAAD;IACE,UAAU;IACV,UAAU,CAAC,aAAa,oBAAoB,KAAA;GAC7C,CAAA;EACS;;AAEhB"}

package/dist/esm/components/LimitPriceCard/LimitPriceCard.style.js

@@ -0,0 +1,89 @@
+import { Box, Button, ButtonBase, Typography, styled } from "@mui/material";
+//#region src/components/LimitPriceCard/LimitPriceCard.style.tsx
+/**
+* Quick-set preset pill. Mirrors the percentage chips' pill look but is always
+* visible (no reveal-on-hover), since presets are the card's primary control.
+*/
+const PriceChip = styled(Button)(({ theme }) => ({
+	minWidth: 0,
+	padding: theme.spacing(.5, 1.5),
+	fontSize: 12,
+	fontWeight: 700,
+	lineHeight: 1.3334,
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+	color: theme.vars.palette.text.primary,
+	transition: "background-color 200ms ease",
+	"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` }
+}));
+/**
+* Editable variant of the preset pill: looks identical to {@link PriceChip} but
+* wraps an inline input so the user can type an arbitrary percentage premium
+* (`+__%`) instead of picking a fixed preset.
+*/
+const EditablePriceChip = styled(Box)(({ theme }) => ({
+	display: "inline-flex",
+	alignItems: "center",
+	minWidth: 0,
+	padding: theme.spacing(.5, 1.5),
+	borderRadius: theme.vars.shape.borderRadius,
+	fontSize: 12,
+	fontWeight: 700,
+	lineHeight: 1.3334,
+	color: theme.vars.palette.text.primary,
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+	transition: "background-color 200ms ease",
+	cursor: "text",
+	"&:hover, &:focus-within": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` },
+	"&[aria-disabled=\"true\"]": {
+		opacity: .5,
+		pointerEvents: "none"
+	}
+}));
+/** Bare input inside {@link EditablePriceChip}; inherits the pill's typography. */
+const PriceChipInput = styled("input")(({ theme }) => ({
+	appearance: "none",
+	border: "none",
+	outline: "none",
+	background: "transparent",
+	padding: 0,
+	margin: 0,
+	font: "inherit",
+	color: "inherit",
+	textAlign: "right",
+	minWidth: "1ch",
+	"&::placeholder": {
+		color: theme.vars.palette.text.secondary,
+		opacity: 1
+	}
+}));
+styled(Typography)(({ theme }) => ({
+	fontSize: 18,
+	fontWeight: 600,
+	lineHeight: 1.4,
+	whiteSpace: "nowrap",
+	color: theme.vars.palette.text.primary
+}));
+/**
+* Invert affordance anchored to the far right of the lead row. Styled as a
+* pill to mirror the percentage chips, but always visible (no reveal-on-hover).
+*/
+const InvertChip = styled(ButtonBase)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	gap: theme.spacing(.5),
+	minWidth: 0,
+	padding: theme.spacing(.5, 1.5),
+	borderRadius: "9999px",
+	fontSize: 12,
+	fontWeight: 700,
+	lineHeight: 1.3334,
+	color: theme.vars.palette.text.primary,
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+	transition: "background-color 200ms ease",
+	"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` }
+}));
+//#endregion
+export { EditablePriceChip, InvertChip, PriceChip, PriceChipInput };
+
+//# sourceMappingURL=LimitPriceCard.style.js.map

package/dist/esm/components/LimitPriceCard/LimitPriceCard.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LimitPriceCard.style.js","names":[],"sources":["../../../../src/components/LimitPriceCard/LimitPriceCard.style.tsx"],"sourcesContent":["import { Box, Button, ButtonBase, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\n/**\n * Quick-set preset pill. Mirrors the percentage chips' pill look but is always\n * visible (no reveal-on-hover), since presets are the card's primary control.\n */\nexport const PriceChip: React.FC<React.ComponentProps<typeof Button>> = styled(\n  Button\n)(({ theme }) => ({\n  minWidth: 0,\n  padding: theme.spacing(0.5, 1.5),\n  fontSize: 12,\n  fontWeight: 700,\n  lineHeight: 1.3334,\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  color: theme.vars.palette.text.primary,\n  transition: 'background-color 200ms ease',\n  '&:hover': {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n  },\n}))\n\n/**\n * Editable variant of the preset pill: looks identical to {@link PriceChip} but\n * wraps an inline input so the user can type an arbitrary percentage premium\n * (`+__%`) instead of picking a fixed preset.\n */\nexport const EditablePriceChip: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'inline-flex',\n    alignItems: 'center',\n    minWidth: 0,\n    padding: theme.spacing(0.5, 1.5),\n    borderRadius: theme.vars.shape.borderRadius,\n    fontSize: 12,\n    fontWeight: 700,\n    lineHeight: 1.3334,\n    color: theme.vars.palette.text.primary,\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    transition: 'background-color 200ms ease',\n    cursor: 'text',\n    '&:hover, &:focus-within': {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n    },\n    '&[aria-disabled=\"true\"]': {\n      opacity: 0.5,\n      pointerEvents: 'none',\n    },\n  }))\n\n/** Bare input inside {@link EditablePriceChip}; inherits the pill's typography. */\nexport const PriceChipInput: React.FC<React.ComponentProps<'input'>> = styled(\n  'input'\n)(({ theme }) => ({\n  appearance: 'none',\n  border: 'none',\n  outline: 'none',\n  background: 'transparent',\n  padding: 0,\n  margin: 0,\n  font: 'inherit',\n  color: 'inherit',\n  textAlign: 'right',\n  minWidth: '1ch',\n  '&::placeholder': {\n    color: theme.vars.palette.text.secondary,\n    opacity: 1,\n  },\n}))\n\nexport const UnitSymbol: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(({ theme }) => ({\n    fontSize: 18,\n    fontWeight: 600,\n    lineHeight: 1.4,\n    whiteSpace: 'nowrap',\n    color: theme.vars.palette.text.primary,\n  }))\n\n/**\n * Invert affordance anchored to the far right of the lead row. Styled as a\n * pill to mirror the percentage chips, but always visible (no reveal-on-hover).\n */\nexport const InvertChip: React.FC<React.ComponentProps<typeof ButtonBase>> =\n  styled(ButtonBase)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: theme.spacing(0.5),\n    minWidth: 0,\n    padding: theme.spacing(0.5, 1.5),\n    borderRadius: '9999px',\n    fontSize: 12,\n    fontWeight: 700,\n    lineHeight: 1.3334,\n    color: theme.vars.palette.text.primary,\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    transition: 'background-color 200ms ease',\n    '&:hover': {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n    },\n  }))\n"],"mappings":";;;;;;AAOA,MAAa,YAA2D,OACtE,MACF,CAAC,EAAE,EAAE,aAAa;CAChB,UAAU;CACV,SAAS,MAAM,QAAQ,IAAK,GAAG;CAC/B,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAC9E,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,YAAY;CACZ,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;AACF,EAAE;;;;;;AAOF,MAAa,oBACX,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,UAAU;CACV,SAAS,MAAM,QAAQ,IAAK,GAAG;CAC/B,cAAc,MAAM,KAAK,MAAM;CAC/B,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAC9E,YAAY;CACZ,QAAQ;CACR,2BAA2B,EACzB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;CACA,6BAA2B;EACzB,SAAS;EACT,eAAe;CACjB;AACF,EAAE;;AAGJ,MAAa,iBAA0D,OACrE,OACF,CAAC,EAAE,EAAE,aAAa;CAChB,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,MAAM;CACN,OAAO;CACP,WAAW;CACX,UAAU;CACV,kBAAkB;EAChB,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,SAAS;CACX;AACF,EAAE;AAGA,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACjC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;AACjC,EAAE;;;;;AAMJ,MAAa,aACX,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACjC,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,KAAK,MAAM,QAAQ,EAAG;CACtB,UAAU;CACV,SAAS,MAAM,QAAQ,IAAK,GAAG;CAC/B,cAAc;CACd,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAC9E,YAAY;CACZ,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;AACF,EAAE"}

package/dist/esm/components/LimitPriceCard/LimitPricePresets.js

@@ -0,0 +1,91 @@
+import { EditablePriceChip, PriceChip, PriceChipInput } from "./LimitPriceCard.style.js";
+import { ChipContainer } from "../AmountInputCard/PercentageChips.style.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/LimitPriceCard/LimitPricePresets.tsx
+/** Quick-set presets, as percentage offsets from market (0 = at market). */
+const PRESETS = [
+	0,
+	1,
+	5,
+	10
+];
+/**
+* Row of quick-set price controls: fixed percentage presets plus a free-form
+* "custom %" pill that collapses to a button until engaged. Owns its own
+* custom-input state so the card only deals with applying an offset.
+*/
+const LimitPricePresets = ({ onSelect, disabled }) => {
+	const { t } = useTranslation();
+	const customInputRef = useRef(null);
+	const [customPct, setCustomPct] = useState("");
+	const [customFocused, setCustomFocused] = useState(false);
+	useEffect(() => {
+		if (customFocused) customInputRef.current?.focus();
+	}, [customFocused]);
+	const handlePresetClick = (pct) => {
+		setCustomPct("");
+		setCustomFocused(false);
+		onSelect(pct);
+	};
+	const handleCustomChange = (event) => {
+		const raw = event.target.value;
+		if (raw && !/^[+-]?\d*\.?\d*$/.test(raw)) return;
+		setCustomPct(raw);
+		const numeric = Number(raw);
+		if (raw === "" || Number.isNaN(numeric)) return;
+		onSelect(numeric);
+	};
+	const handleCustomKeyDown = (event) => {
+		if (event.key === "Enter") event.currentTarget.blur();
+	};
+	const handleCustomBlur = () => {
+		setCustomFocused(false);
+		setCustomPct((prev) => {
+			if (!prev || prev.startsWith("+") || prev.startsWith("-")) return prev;
+			return Number.isNaN(Number(prev)) ? prev : `+${prev}`;
+		});
+	};
+	const showCustomLabel = customPct === "" && !customFocused;
+	return /* @__PURE__ */ jsxs(ChipContainer, {
+		sx: {
+			marginTop: .5,
+			flexWrap: "wrap"
+		},
+		children: [PRESETS.map((pct) => /* @__PURE__ */ jsx(PriceChip, {
+			onClick: () => handlePresetClick(pct),
+			children: pct === 0 ? t("limitOrder.market") : `+${pct}%`
+		}, pct)), showCustomLabel ? /* @__PURE__ */ jsx(PriceChip, {
+			disabled,
+			onClick: () => setCustomFocused(true),
+			children: t("limitOrder.custom")
+		}) : /* @__PURE__ */ jsxs(EditablePriceChip, {
+			"aria-disabled": disabled,
+			onClick: (event) => {
+				if (disabled) return;
+				event.currentTarget.querySelector("input")?.focus();
+				const numeric = Number(customPct);
+				if (customPct && !Number.isNaN(numeric)) onSelect(numeric);
+			},
+			children: [/* @__PURE__ */ jsx(PriceChipInput, {
+				ref: customInputRef,
+				inputMode: "decimal",
+				autoComplete: "off",
+				placeholder: "0",
+				"aria-label": t("limitOrder.custom"),
+				value: customPct,
+				onChange: handleCustomChange,
+				onKeyDown: handleCustomKeyDown,
+				onFocus: () => setCustomFocused(true),
+				onBlur: handleCustomBlur,
+				disabled,
+				style: { width: `${Math.max(customPct.length, 1)}ch` }
+			}), "%"]
+		})]
+	});
+};
+//#endregion
+export { LimitPricePresets };
+
+//# sourceMappingURL=LimitPricePresets.js.map

package/dist/esm/components/LimitPriceCard/LimitPricePresets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LimitPricePresets.js","names":[],"sources":["../../../../src/components/LimitPriceCard/LimitPricePresets.tsx"],"sourcesContent":["import { type ChangeEvent, type JSX, useEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ChipContainer } from '../AmountInputCard/PercentageChips.style.js'\nimport {\n  EditablePriceChip,\n  PriceChip,\n  PriceChipInput,\n} from './LimitPriceCard.style.js'\n\n/** Quick-set presets, as percentage offsets from market (0 = at market). */\nconst PRESETS = [0, 1, 5, 10] as const\n\ninterface LimitPricePresetsProps {\n  /** Apply a percentage offset from the market rate (0 = at market). */\n  onSelect: (pct: number) => void\n  /** Disables the free-form custom pill (no tokens / no market rate yet). */\n  disabled: boolean\n}\n\n/**\n * Row of quick-set price controls: fixed percentage presets plus a free-form\n * \"custom %\" pill that collapses to a button until engaged. Owns its own\n * custom-input state so the card only deals with applying an offset.\n */\nexport const LimitPricePresets = ({\n  onSelect,\n  disabled,\n}: LimitPricePresetsProps): JSX.Element => {\n  const { t } = useTranslation()\n  const customInputRef = useRef<HTMLInputElement>(null)\n  const [customPct, setCustomPct] = useState('')\n  const [customFocused, setCustomFocused] = useState(false)\n\n  // The custom pill renders as a plain button until engaged; when it flips into\n  // edit mode (focused), move the caret into the freshly-mounted input.\n  useEffect(() => {\n    if (customFocused) {\n      customInputRef.current?.focus()\n    }\n  }, [customFocused])\n\n  // Picking a fixed preset clears any custom value so the custom pill collapses\n  // back to its \"Custom\" button instead of showing a stale, no-longer-applied %.\n  const handlePresetClick = (pct: number): void => {\n    setCustomPct('')\n    setCustomFocused(false)\n    onSelect(pct)\n  }\n\n  // Free-form offset pill: apply the typed percentage live so the price input\n  // tracks the offset as the user types. Accepts an optional leading +/- sign\n  // so the price can be set above (premium) or below (discount) market.\n  const handleCustomChange = (event: ChangeEvent<HTMLInputElement>): void => {\n    const raw = event.target.value\n    if (raw && !/^[+-]?\\d*\\.?\\d*$/.test(raw)) {\n      return\n    }\n    setCustomPct(raw)\n    const numeric = Number(raw)\n    // Bare '', '+', '-', '.' etc. aren't applicable numbers yet — Number() maps\n    // the signs/dot to NaN, and '' to 0, so guard both.\n    if (raw === '' || Number.isNaN(numeric)) {\n      return\n    }\n    onSelect(numeric)\n  }\n\n  const handleCustomKeyDown = (\n    event: React.KeyboardEvent<HTMLInputElement>\n  ): void => {\n    if (event.key === 'Enter') {\n      event.currentTarget.blur()\n    }\n  }\n\n  // On blur, surface an explicit sign: a bare positive entry like \"10\" reads as\n  // \"+10\" so the direction (above/below market) is unambiguous once collapsed.\n  const handleCustomBlur = (): void => {\n    setCustomFocused(false)\n    setCustomPct((prev) => {\n      if (!prev || prev.startsWith('+') || prev.startsWith('-')) {\n        return prev\n      }\n      return Number.isNaN(Number(prev)) ? prev : `+${prev}`\n    })\n  }\n\n  // Collapse to a plain \"Custom\" label only while empty and unfocused; once the\n  // user engages (focus) or has typed a value, reveal the `+__%` affixes.\n  const showCustomLabel = customPct === '' && !customFocused\n\n  return (\n    <ChipContainer sx={{ marginTop: 0.5, flexWrap: 'wrap' }}>\n      {PRESETS.map((pct) => (\n        <PriceChip key={pct} onClick={() => handlePresetClick(pct)}>\n          {pct === 0 ? t('limitOrder.market') : `+${pct}%`}\n        </PriceChip>\n      ))}\n      {showCustomLabel ? (\n        <PriceChip disabled={disabled} onClick={() => setCustomFocused(true)}>\n          {t('limitOrder.custom')}\n        </PriceChip>\n      ) : (\n        <EditablePriceChip\n          aria-disabled={disabled}\n          onClick={(event) => {\n            // `aria-disabled` only announces the state; enforce it so a\n            // programmatic click can't apply an offset while disabled.\n            if (disabled) {\n              return\n            }\n            const input = event.currentTarget.querySelector('input')\n            input?.focus()\n            const numeric = Number(customPct)\n            if (customPct && !Number.isNaN(numeric)) {\n              onSelect(numeric)\n            }\n          }}\n        >\n          <PriceChipInput\n            ref={customInputRef}\n            inputMode=\"decimal\"\n            autoComplete=\"off\"\n            placeholder=\"0\"\n            aria-label={t('limitOrder.custom')}\n            value={customPct}\n            onChange={handleCustomChange}\n            onKeyDown={handleCustomKeyDown}\n            onFocus={() => setCustomFocused(true)}\n            onBlur={handleCustomBlur}\n            disabled={disabled}\n            style={{ width: `${Math.max(customPct.length, 1)}ch` }}\n          />\n          %\n        </EditablePriceChip>\n      )}\n    </ChipContainer>\n  )\n}\n"],"mappings":";;;;;;;AAUA,MAAM,UAAU;CAAC;CAAG;CAAG;CAAG;AAAE;;;;;;AAc5B,MAAa,qBAAqB,EAChC,UACA,eACyC;CACzC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,iBAAiB,OAAyB,IAAI;CACpD,MAAM,CAAC,WAAW,gBAAgB,SAAS,EAAE;CAC7C,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CAIxD,gBAAgB;EACd,IAAI,eACF,eAAe,SAAS,MAAM;CAElC,GAAG,CAAC,aAAa,CAAC;CAIlB,MAAM,qBAAqB,QAAsB;EAC/C,aAAa,EAAE;EACf,iBAAiB,KAAK;EACtB,SAAS,GAAG;CACd;CAKA,MAAM,sBAAsB,UAA+C;EACzE,MAAM,MAAM,MAAM,OAAO;EACzB,IAAI,OAAO,CAAC,mBAAmB,KAAK,GAAG,GACrC;EAEF,aAAa,GAAG;EAChB,MAAM,UAAU,OAAO,GAAG;EAG1B,IAAI,QAAQ,MAAM,OAAO,MAAM,OAAO,GACpC;EAEF,SAAS,OAAO;CAClB;CAEA,MAAM,uBACJ,UACS;EACT,IAAI,MAAM,QAAQ,SAChB,MAAM,cAAc,KAAK;CAE7B;CAIA,MAAM,yBAA+B;EACnC,iBAAiB,KAAK;EACtB,cAAc,SAAS;GACrB,IAAI,CAAC,QAAQ,KAAK,WAAW,GAAG,KAAK,KAAK,WAAW,GAAG,GACtD,OAAO;GAET,OAAO,OAAO,MAAM,OAAO,IAAI,CAAC,IAAI,OAAO,IAAI;EACjD,CAAC;CACH;CAIA,MAAM,kBAAkB,cAAc,MAAM,CAAC;CAE7C,OACE,qBAAC,eAAD;EAAe,IAAI;GAAE,WAAW;GAAK,UAAU;EAAO;YAAtD,CACG,QAAQ,KAAK,QACZ,oBAAC,WAAD;GAAqB,eAAe,kBAAkB,GAAG;aACtD,QAAQ,IAAI,EAAE,mBAAmB,IAAI,IAAI,IAAI;EACrC,GAFK,GAEL,CACZ,GACA,kBACC,oBAAC,WAAD;GAAqB;GAAU,eAAe,iBAAiB,IAAI;aAChE,EAAE,mBAAmB;EACb,CAAA,IAEX,qBAAC,mBAAD;GACE,iBAAe;GACf,UAAU,UAAU;IAGlB,IAAI,UACF;IAGF,MADoB,cAAc,cAAc,OAC5C,CAAC,EAAE,MAAM;IACb,MAAM,UAAU,OAAO,SAAS;IAChC,IAAI,aAAa,CAAC,OAAO,MAAM,OAAO,GACpC,SAAS,OAAO;GAEpB;aAdF,CAgBE,oBAAC,gBAAD;IACE,KAAK;IACL,WAAU;IACV,cAAa;IACb,aAAY;IACZ,cAAY,EAAE,mBAAmB;IACjC,OAAO;IACP,UAAU;IACV,WAAW;IACX,eAAe,iBAAiB,IAAI;IACpC,QAAQ;IACE;IACV,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,UAAU,QAAQ,CAAC,EAAE,IAAI;GACtD,CAAA,GAAC,GAEe;IAER;;AAEnB"}

package/dist/esm/components/RouteCard/RouteProviderCard.js

@@ -0,0 +1,118 @@
+import { Card as Card$1 } from "../Card/Card.js";
+import { getAccumulatedFeeCostsBreakdown } from "../../utils/fees.js";
+import { SmallAvatar } from "../Avatar/SmallAvatar.js";
+import { IconTypography } from "../IconTypography.js";
+import { Box, Skeleton, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import LocalGasStationRounded from "@mui/icons-material/LocalGasStationRounded";
+//#region src/components/RouteCard/RouteProviderCard.tsx
+const RouteProviderCard = ({ route, active, onClick, ...other }) => {
+	const { t } = useTranslation();
+	const provider = route.steps[0]?.toolDetails;
+	const { gasCostUSD } = getAccumulatedFeeCostsBreakdown(route);
+	return /* @__PURE__ */ jsx(Card$1, {
+		type: active ? "selected" : "default",
+		selectionColor: "secondary",
+		onClick,
+		sx: {
+			py: 1.5,
+			px: 2,
+			...onClick ? { cursor: "pointer" } : {}
+		},
+		...other,
+		children: /* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				gap: 1
+			},
+			children: [/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					gap: 1,
+					minWidth: 0
+				},
+				children: [/* @__PURE__ */ jsx(SmallAvatar, {
+					src: provider?.logoURI,
+					alt: provider?.name,
+					size: 20,
+					children: provider?.name?.[0]
+				}), /* @__PURE__ */ jsx(Typography, {
+					noWrap: true,
+					sx: {
+						fontSize: 14,
+						fontWeight: 600,
+						color: "text.primary"
+					},
+					children: provider?.name
+				})]
+			}), /* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					alignItems: "center"
+				},
+				children: [/* @__PURE__ */ jsx(IconTypography, {
+					component: "span",
+					sx: {
+						mr: .5,
+						fontSize: 16
+					},
+					children: /* @__PURE__ */ jsx(LocalGasStationRounded, { fontSize: "inherit" })
+				}), /* @__PURE__ */ jsx(Typography, {
+					"data-value": gasCostUSD,
+					sx: {
+						fontSize: 14,
+						color: "text.primary",
+						fontWeight: 600,
+						lineHeight: 1
+					},
+					children: !gasCostUSD ? t("main.fees.free") : t("format.currency", { value: gasCostUSD })
+				})]
+			})]
+		})
+	});
+};
+const RouteProviderCardSkeleton = (props) => {
+	return /* @__PURE__ */ jsx(Card$1, {
+		sx: {
+			py: 1.5,
+			px: 2
+		},
+		...props,
+		children: /* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				gap: 1
+			},
+			children: [/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					gap: 1
+				},
+				children: [/* @__PURE__ */ jsx(Skeleton, {
+					variant: "circular",
+					width: 20,
+					height: 20
+				}), /* @__PURE__ */ jsx(Skeleton, {
+					variant: "text",
+					width: 80,
+					height: 20
+				})]
+			}), /* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				width: 56,
+				height: 20
+			})]
+		})
+	});
+};
+//#endregion
+export { RouteProviderCard, RouteProviderCardSkeleton };
+
+//# sourceMappingURL=RouteProviderCard.js.map

package/dist/esm/components/RouteCard/RouteProviderCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteProviderCard.js","names":["Card"],"sources":["../../../../src/components/RouteCard/RouteProviderCard.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'\nimport { Box, Skeleton, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { IconTypography } from '../IconTypography.js'\n\ninterface RouteProviderCardProps {\n  route: Route\n  active?: boolean\n}\n\nexport const RouteProviderCard: React.FC<\n  RouteProviderCardProps & Omit<CardProps, 'variant'>\n> = ({ route, active, onClick, ...other }) => {\n  const { t } = useTranslation()\n\n  const provider = route.steps[0]?.toolDetails\n  const { gasCostUSD } = getAccumulatedFeeCostsBreakdown(route)\n\n  return (\n    <Card\n      type={active ? 'selected' : 'default'}\n      selectionColor=\"secondary\"\n      onClick={onClick}\n      sx={{ py: 1.5, px: 2, ...(onClick ? { cursor: 'pointer' } : {}) }}\n      {...other}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          gap: 1,\n        }}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: 1,\n            minWidth: 0,\n          }}\n        >\n          <SmallAvatar src={provider?.logoURI} alt={provider?.name} size={20}>\n            {provider?.name?.[0]}\n          </SmallAvatar>\n          <Typography\n            noWrap\n            sx={{\n              fontSize: 14,\n              fontWeight: 600,\n              color: 'text.primary',\n            }}\n          >\n            {provider?.name}\n          </Typography>\n        </Box>\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n          }}\n        >\n          <IconTypography component=\"span\" sx={{ mr: 0.5, fontSize: 16 }}>\n            <LocalGasStationRounded fontSize=\"inherit\" />\n          </IconTypography>\n          <Typography\n            data-value={gasCostUSD}\n            sx={{\n              fontSize: 14,\n              color: 'text.primary',\n              fontWeight: 600,\n              lineHeight: 1,\n            }}\n          >\n            {!gasCostUSD\n              ? t('main.fees.free')\n              : t('format.currency', {\n                  value: gasCostUSD,\n                })}\n          </Typography>\n        </Box>\n      </Box>\n    </Card>\n  )\n}\n\nexport const RouteProviderCardSkeleton: React.FC<Omit<CardProps, 'variant'>> = (\n  props\n) => {\n  return (\n    <Card sx={{ py: 1.5, px: 2 }} {...props}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          gap: 1,\n        }}\n      >\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n          <Skeleton variant=\"circular\" width={20} height={20} />\n          <Skeleton variant=\"text\" width={80} height={20} />\n        </Box>\n        <Skeleton variant=\"text\" width={56} height={20} />\n      </Box>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;AAeA,MAAa,qBAER,EAAE,OAAO,QAAQ,SAAS,GAAG,YAAY;CAC5C,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,WAAW,MAAM,MAAM,EAAE,EAAE;CACjC,MAAM,EAAE,eAAe,gCAAgC,KAAK;CAE5D,OACE,oBAACA,QAAD;EACE,MAAM,SAAS,aAAa;EAC5B,gBAAe;EACN;EACT,IAAI;GAAE,IAAI;GAAK,IAAI;GAAG,GAAI,UAAU,EAAE,QAAQ,UAAU,IAAI,CAAC;EAAG;EAChE,GAAI;YAEJ,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACZ,gBAAgB;IAChB,KAAK;GACP;aANF,CAQE,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;KACZ,KAAK;KACL,UAAU;IACZ;cANF,CAQE,oBAAC,aAAD;KAAa,KAAK,UAAU;KAAS,KAAK,UAAU;KAAM,MAAM;eAC7D,UAAU,OAAO;IACP,CAAA,GACb,oBAAC,YAAD;KACE,QAAA;KACA,IAAI;MACF,UAAU;MACV,YAAY;MACZ,OAAO;KACT;eAEC,UAAU;IACD,CAAA,CACT;OACL,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;IACd;cAJF,CAME,oBAAC,gBAAD;KAAgB,WAAU;KAAO,IAAI;MAAE,IAAI;MAAK,UAAU;KAAG;eAC3D,oBAAC,wBAAD,EAAwB,UAAS,UAAW,CAAA;IAC9B,CAAA,GAChB,oBAAC,YAAD;KACE,cAAY;KACZ,IAAI;MACF,UAAU;MACV,OAAO;MACP,YAAY;MACZ,YAAY;KACd;eAEC,CAAC,aACE,EAAE,gBAAgB,IAClB,EAAE,mBAAmB,EACnB,OAAO,WACT,CAAC;IACK,CAAA,CACT;KACF;;CACD,CAAA;AAEV;AAEA,MAAa,6BACX,UACG;CACH,OACE,oBAACA,QAAD;EAAM,IAAI;GAAE,IAAI;GAAK,IAAI;EAAE;EAAG,GAAI;YAChC,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACZ,gBAAgB;IAChB,KAAK;GACP;aANF,CAQE,qBAAC,KAAD;IAAK,IAAI;KAAE,SAAS;KAAQ,YAAY;KAAU,KAAK;IAAE;cAAzD,CACE,oBAAC,UAAD;KAAU,SAAQ;KAAW,OAAO;KAAI,QAAQ;IAAK,CAAA,GACrD,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA,CAC9C;OACL,oBAAC,UAAD;IAAU,SAAQ;IAAO,OAAO;IAAI,QAAQ;GAAK,CAAA,CAC9C;;CACD,CAAA;AAEV"}