@lifi/widget 4.1.0 → 4.2.0

package/dist/esm/components/Routes/LimitOrderRoutes.js

@@ -0,0 +1,34 @@
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useRoutes } from "../../hooks/useRoutes.js";
+import { useToAddressRequirements } from "../../hooks/useToAddressRequirements.js";
+import { RouteNotFoundCard } from "../RouteCard/RouteNotFoundCard.js";
+import { RouteProviderCard, RouteProviderCardSkeleton } from "../RouteCard/RouteProviderCard.js";
+import { Stack } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Routes/LimitOrderRoutes.tsx
+const LimitOrderRoutes = (props) => {
+	const { routes, isLoading, isFetching, isFetched } = useRoutes();
+	const [toAddress, selectedRouteId] = useFieldValues("toAddress", "selectedRouteId");
+	const { setFieldValue } = useFieldActions();
+	const { requiredToAddress } = useToAddressRequirements();
+	const currentRoute = routes?.[0];
+	if (!currentRoute && !isLoading && !isFetching && !isFetched) return null;
+	const allowInteraction = !(currentRoute && requiredToAddress && !toAddress);
+	const activeRouteId = routes?.find((route) => route.id === selectedRouteId)?.id ?? currentRoute?.id;
+	return /* @__PURE__ */ jsx(Stack, {
+		direction: "column",
+		spacing: 1,
+		sx: props.sx,
+		className: props.className,
+		children: isLoading && !currentRoute ? Array.from({ length: 2 }).map((_, index) => /* @__PURE__ */ jsx(RouteProviderCardSkeleton, {}, index)) : !currentRoute ? /* @__PURE__ */ jsx(RouteNotFoundCard, {}) : routes?.map((route) => /* @__PURE__ */ jsx(RouteProviderCard, {
+			route,
+			active: route.id === activeRouteId,
+			onClick: allowInteraction ? () => setFieldValue("selectedRouteId", route.id) : void 0
+		}, route.id))
+	});
+};
+//#endregion
+export { LimitOrderRoutes };
+
+//# sourceMappingURL=LimitOrderRoutes.js.map

package/dist/esm/components/Routes/LimitOrderRoutes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LimitOrderRoutes.js","names":[],"sources":["../../../../src/components/Routes/LimitOrderRoutes.tsx"],"sourcesContent":["import { Stack } from '@mui/material'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\nimport {\n  RouteProviderCard,\n  RouteProviderCardSkeleton,\n} from '../RouteCard/RouteProviderCard.js'\n\nexport const LimitOrderRoutes: React.FC<CardProps> = (props) => {\n  const { routes, isLoading, isFetching, isFetched } = useRoutes()\n  const [toAddress, selectedRouteId] = useFieldValues(\n    'toAddress',\n    'selectedRouteId'\n  )\n  const { setFieldValue } = useFieldActions()\n  const { requiredToAddress } = useToAddressRequirements()\n\n  const currentRoute = routes?.[0]\n\n  if (!currentRoute && !isLoading && !isFetching && !isFetched) {\n    return null\n  }\n\n  const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress\n  const allowInteraction = !toAddressUnsatisfied\n\n  const activeRouteId =\n    routes?.find((route) => route.id === selectedRouteId)?.id ??\n    currentRoute?.id\n\n  return (\n    <Stack\n      direction=\"column\"\n      spacing={1}\n      sx={props.sx}\n      className={props.className}\n    >\n      {isLoading && !currentRoute ? (\n        Array.from({ length: 2 }).map((_, index) => (\n          <RouteProviderCardSkeleton key={index} />\n        ))\n      ) : !currentRoute ? (\n        <RouteNotFoundCard />\n      ) : (\n        routes?.map((route) => (\n          <RouteProviderCard\n            key={route.id}\n            route={route}\n            active={route.id === activeRouteId}\n            onClick={\n              allowInteraction\n                ? () => setFieldValue('selectedRouteId', route.id)\n                : undefined\n            }\n          />\n        ))\n      )}\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;;;AAYA,MAAa,oBAAyC,UAAU;CAC9D,MAAM,EAAE,QAAQ,WAAW,YAAY,cAAc,UAAU;CAC/D,MAAM,CAAC,WAAW,mBAAmB,eACnC,aACA,iBACF;CACA,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,sBAAsB,yBAAyB;CAEvD,MAAM,eAAe,SAAS;CAE9B,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,cAAc,CAAC,WACjD,OAAO;CAIT,MAAM,mBAAmB,EADI,gBAAgB,qBAAqB,CAAC;CAGnE,MAAM,gBACJ,QAAQ,MAAM,UAAU,MAAM,OAAO,eAAe,CAAC,EAAE,MACvD,cAAc;CAEhB,OACE,oBAAC,OAAD;EACE,WAAU;EACV,SAAS;EACT,IAAI,MAAM;EACV,WAAW,MAAM;YAEhB,aAAa,CAAC,eACb,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,UAChC,oBAAC,2BAAD,CAAwC,GAAR,KAAQ,CACzC,IACC,CAAC,eACH,oBAAC,mBAAD,CAAoB,CAAA,IAEpB,QAAQ,KAAK,UACX,oBAAC,mBAAD;GAES;GACP,QAAQ,MAAM,OAAO;GACrB,SACE,yBACU,cAAc,mBAAmB,MAAM,EAAE,IAC/C,KAAA;EAEP,GARM,MAAM,EAQZ,CACF;CAEE,CAAA;AAEX"}

package/dist/esm/components/Routes/Routes.js

@@ -16,7 +16,7 @@ import { useTranslation } from "react-i18next";
 const Routes = (props) => {
 	const { t } = useTranslation();
 	const navigate = useNavigate();
-	const { mode, modeOptions, showSingleRoute } = useWidgetConfig();
+	const { mode, modeOptions, showSingleRoute, defaultUI } = useWidgetConfig();
 	const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch } = useRoutes();
 	const currentRoute = routes?.[0];
 	if (!currentRoute && !isLoading && !isFetching && !isFetched) return null;
@@ -28,7 +28,7 @@ const Routes = (props) => {
 	return /* @__PURE__ */ jsxs(Card$1, {
 		...props,
 		children: [
-			/* @__PURE__ */ jsx(CardTitle, { children: title }),
+			defaultUI?.layout === "cards" ? null : /* @__PURE__ */ jsx(CardTitle, { children: title }),
 			/* @__PURE__ */ jsx(ProgressToNextUpdate, {
 				updatedAt: dataUpdatedAt || Date.now(),
 				timeToUpdate: refetchTime,

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

@@ -1 +1 @@
-{"version":3,"file":"Routes.js","names":["Card"],"sources":["../../../../src/components/Routes/Routes.tsx"],"sourcesContent":["import { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ButtonTertiary } from '../ButtonTertiary.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'\nimport { RouteCard } from '../RouteCard/RouteCard.js'\nimport { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\n\nexport const Routes: React.FC<CardProps> = (props) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { mode, modeOptions, showSingleRoute } = useWidgetConfig()\n  const {\n    routes,\n    isLoading,\n    isFetching,\n    isFetched,\n    dataUpdatedAt,\n    refetchTime,\n    refetch,\n  } = useRoutes()\n\n  const currentRoute = routes?.[0]\n\n  if (!currentRoute && !isLoading && !isFetching && !isFetched) {\n    return null\n  }\n\n  const handleCardClick = () => {\n    navigate({ to: navigationRoutes.routes })\n  }\n\n  const routeNotFound = !currentRoute && !isLoading && !isFetching\n  const onlySingleRoute = mode === 'refuel' || showSingleRoute\n  const showAll =\n    !onlySingleRoute && !routeNotFound && (routes?.length ?? 0) > 1\n\n  const title =\n    mode === 'custom'\n      ? modeOptions?.custom?.type === 'deposit'\n        ? t('header.receive')\n        : t('header.youPay')\n      : t('header.receive')\n\n  return (\n    <Card {...props}>\n      <CardTitle>{title}</CardTitle>\n      <ProgressToNextUpdate\n        updatedAt={dataUpdatedAt || Date.now()}\n        timeToUpdate={refetchTime}\n        isLoading={isFetching}\n        onClick={() => refetch()}\n        sx={{\n          position: 'absolute',\n          top: 8,\n          right: 8,\n        }}\n      />\n      <Box\n        sx={{\n          p: 2,\n        }}\n      >\n        {isLoading && !currentRoute ? (\n          <RouteCardSkeleton variant=\"cardless\" />\n        ) : !currentRoute ? (\n          <RouteNotFoundCard />\n        ) : (\n          <RouteCard route={currentRoute} variant=\"cardless\" active />\n        )}\n\n        <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter>\n          <Box\n            sx={{\n              mt: 2,\n            }}\n          >\n            <ButtonTertiary onClick={handleCardClick} fullWidth>\n              {t('button.showAll')}\n            </ButtonTertiary>\n          </Box>\n        </Collapse>\n      </Box>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAa,UAA+B,UAAU;CACpD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,MAAM,aAAa,oBAAoB,gBAAgB;CAC/D,MAAM,EACJ,QACA,WACA,YACA,WACA,eACA,aACA,YACE,UAAU;CAEd,MAAM,eAAe,SAAS;CAE9B,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,cAAc,CAAC,WACjD,OAAO;CAGT,MAAM,wBAAwB;EAC5B,SAAS,EAAE,IAAI,iBAAiB,OAAO,CAAC;CAC1C;CAIA,MAAM,UACJ,EAFsB,SAAS,YAAY,oBAEvB,EAHA,CAAC,gBAAgB,CAAC,aAAa,CAAC,gBAGb,QAAQ,UAAU,KAAK;CAEhE,MAAM,QACJ,SAAS,WACL,aAAa,QAAQ,SAAS,YAC5B,EAAE,gBAAgB,IAClB,EAAE,eAAe,IACnB,EAAE,gBAAgB;CAExB,OACE,qBAACA,QAAD;EAAM,GAAI;YAAV;GACE,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA;GAC7B,oBAAC,sBAAD;IACE,WAAW,iBAAiB,KAAK,IAAI;IACrC,cAAc;IACd,WAAW;IACX,eAAe,QAAQ;IACvB,IAAI;KACF,UAAU;KACV,KAAK;KACL,OAAO;IACT;GACD,CAAA;GACD,qBAAC,KAAD;IACE,IAAI,EACF,GAAG,EACL;cAHF,CAKG,aAAa,CAAC,eACb,oBAAC,mBAAD,EAAmB,SAAQ,WAAY,CAAA,IACrC,CAAC,eACH,oBAAC,mBAAD,CAAoB,CAAA,IAEpB,oBAAC,WAAD;KAAW,OAAO;KAAc,SAAQ;KAAW,QAAA;IAAQ,CAAA,GAG7D,oBAAC,UAAD;KAAU,SAAS;KAAK,IAAI;KAAS,eAAA;KAAc,cAAA;eACjD,oBAAC,KAAD;MACE,IAAI,EACF,IAAI,EACN;gBAEA,oBAAC,gBAAD;OAAgB,SAAS;OAAiB,WAAA;iBACvC,EAAE,gBAAgB;MACL,CAAA;KACb,CAAA;IACG,CAAA,CACP;;EACD;;AAEV"}
+{"version":3,"file":"Routes.js","names":["Card"],"sources":["../../../../src/components/Routes/Routes.tsx"],"sourcesContent":["import { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ButtonTertiary } from '../ButtonTertiary.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'\nimport { RouteCard } from '../RouteCard/RouteCard.js'\nimport { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\n\nexport const Routes: React.FC<CardProps> = (props) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { mode, modeOptions, showSingleRoute, defaultUI } = useWidgetConfig()\n  const {\n    routes,\n    isLoading,\n    isFetching,\n    isFetched,\n    dataUpdatedAt,\n    refetchTime,\n    refetch,\n  } = useRoutes()\n\n  const currentRoute = routes?.[0]\n\n  if (!currentRoute && !isLoading && !isFetching && !isFetched) {\n    return null\n  }\n\n  const handleCardClick = () => {\n    navigate({ to: navigationRoutes.routes })\n  }\n\n  const routeNotFound = !currentRoute && !isLoading && !isFetching\n  const onlySingleRoute = mode === 'refuel' || showSingleRoute\n  const showAll =\n    !onlySingleRoute && !routeNotFound && (routes?.length ?? 0) > 1\n\n  const title =\n    mode === 'custom'\n      ? modeOptions?.custom?.type === 'deposit'\n        ? t('header.receive')\n        : t('header.youPay')\n      : t('header.receive')\n\n  return (\n    <Card {...props}>\n      {/* The cards layout's Receive card already carries this header. */}\n      {defaultUI?.layout === 'cards' ? null : <CardTitle>{title}</CardTitle>}\n      <ProgressToNextUpdate\n        updatedAt={dataUpdatedAt || Date.now()}\n        timeToUpdate={refetchTime}\n        isLoading={isFetching}\n        onClick={() => refetch()}\n        sx={{\n          position: 'absolute',\n          top: 8,\n          right: 8,\n        }}\n      />\n      <Box\n        sx={{\n          p: 2,\n        }}\n      >\n        {isLoading && !currentRoute ? (\n          <RouteCardSkeleton variant=\"cardless\" />\n        ) : !currentRoute ? (\n          <RouteNotFoundCard />\n        ) : (\n          <RouteCard route={currentRoute} variant=\"cardless\" active />\n        )}\n\n        <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter>\n          <Box\n            sx={{\n              mt: 2,\n            }}\n          >\n            <ButtonTertiary onClick={handleCardClick} fullWidth>\n              {t('button.showAll')}\n            </ButtonTertiary>\n          </Box>\n        </Collapse>\n      </Box>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAa,UAA+B,UAAU;CACpD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,MAAM,aAAa,iBAAiB,cAAc,gBAAgB;CAC1E,MAAM,EACJ,QACA,WACA,YACA,WACA,eACA,aACA,YACE,UAAU;CAEd,MAAM,eAAe,SAAS;CAE9B,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,cAAc,CAAC,WACjD,OAAO;CAGT,MAAM,wBAAwB;EAC5B,SAAS,EAAE,IAAI,iBAAiB,OAAO,CAAC;CAC1C;CAIA,MAAM,UACJ,EAFsB,SAAS,YAAY,oBAEvB,EAHA,CAAC,gBAAgB,CAAC,aAAa,CAAC,gBAGb,QAAQ,UAAU,KAAK;CAEhE,MAAM,QACJ,SAAS,WACL,aAAa,QAAQ,SAAS,YAC5B,EAAE,gBAAgB,IAClB,EAAE,eAAe,IACnB,EAAE,gBAAgB;CAExB,OACE,qBAACA,QAAD;EAAM,GAAI;YAAV;GAEG,WAAW,WAAW,UAAU,OAAO,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA;GACrE,oBAAC,sBAAD;IACE,WAAW,iBAAiB,KAAK,IAAI;IACrC,cAAc;IACd,WAAW;IACX,eAAe,QAAQ;IACvB,IAAI;KACF,UAAU;KACV,KAAK;KACL,OAAO;IACT;GACD,CAAA;GACD,qBAAC,KAAD;IACE,IAAI,EACF,GAAG,EACL;cAHF,CAKG,aAAa,CAAC,eACb,oBAAC,mBAAD,EAAmB,SAAQ,WAAY,CAAA,IACrC,CAAC,eACH,oBAAC,mBAAD,CAAoB,CAAA,IAEpB,oBAAC,WAAD;KAAW,OAAO;KAAc,SAAQ;KAAW,QAAA;IAAQ,CAAA,GAG7D,oBAAC,UAAD;KAAU,SAAS;KAAK,IAAI;KAAS,eAAA;KAAc,cAAA;eACjD,oBAAC,KAAD;MACE,IAAI,EACF,IAAI,EACN;gBAEA,oBAAC,gBAAD;OAAgB,SAAS;OAAiB,WAAA;iBACvC,EAAE,gBAAgB;MACL,CAAA;KACb,CAAA;IACG,CAAA,CACP;;EACD;;AAEV"}

package/dist/esm/components/SettingsPanel/SettingsPanel.js

@@ -0,0 +1,51 @@
+import { useSettingsStore } from "../../stores/settings/SettingsStore.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { useSplitMode } from "../../stores/navigationTabs/useNavigationTabsStore.js";
+import { Card } from "../Card/Card.js";
+import { useSettings } from "../../stores/settings/useSettings.js";
+import { SettingsPanelButton, SettingsPanelContainer, SettingsPanelTitle, SettingsPanelValue } from "./SettingsPanel.style.js";
+import { bridgeSettingsPanelKeys, swapSettingsPanelKeys } from "./utils.js";
+import { useNavigate } from "@tanstack/react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/SettingsPanel/SettingsPanel.tsx
+const SettingsPanel = (props) => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const splitMode = useSplitMode();
+	const { slippage, routePriority } = useSettings(["slippage", "routePriority"]);
+	const [enabledBridges, totalBridges, enabledExchanges, totalExchanges] = useSettingsStore((state) => [
+		Object.values(state._enabledBridges).filter(Boolean).length,
+		Object.values(state._enabledBridges).length,
+		Object.values(state._enabledExchanges).filter(Boolean).length,
+		Object.values(state._enabledExchanges).length
+	]);
+	const rows = splitMode === "bridge" ? bridgeSettingsPanelKeys : swapSettingsPanelKeys;
+	const labelByKey = {
+		routePriority: t("settings.routePriority"),
+		exchanges: t("settings.enabledExchanges"),
+		bridges: t("settings.enabledBridges"),
+		slippage: t("settings.slippage")
+	};
+	const valueByKey = {
+		routePriority: routePriority === "FASTEST" ? t("settings.routePriorityOptions.fastest.title") : t("settings.routePriorityOptions.cheapest.title"),
+		exchanges: `${enabledExchanges}/${totalExchanges}`,
+		bridges: `${enabledBridges}/${totalBridges}`,
+		slippage: slippage ? `${slippage}%` : t("button.auto")
+	};
+	const handleClick = (key) => {
+		navigate({ to: `/${navigationRoutes.settings}/${navigationRoutes[key]}` });
+	};
+	return /* @__PURE__ */ jsx(SettingsPanelContainer, {
+		...props,
+		children: rows.map((key) => /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(SettingsPanelButton, {
+			onClick: () => handleClick(key),
+			disableRipple: true,
+			children: [/* @__PURE__ */ jsx(SettingsPanelTitle, { children: labelByKey[key] }), /* @__PURE__ */ jsx(SettingsPanelValue, { children: valueByKey[key] })]
+		}) }, key))
+	});
+};
+//#endregion
+export { SettingsPanel };
+
+//# sourceMappingURL=SettingsPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsPanel.js","names":[],"sources":["../../../../src/components/SettingsPanel/SettingsPanel.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSplitMode } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport { useSettingsStore } from '../../stores/settings/SettingsStore.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { Card } from '../Card/Card.js'\nimport {\n  SettingsPanelButton,\n  SettingsPanelContainer,\n  SettingsPanelTitle,\n  SettingsPanelValue,\n} from './SettingsPanel.style.js'\nimport {\n  bridgeSettingsPanelKeys,\n  type SettingsPanelKey,\n  swapSettingsPanelKeys,\n} from './utils.js'\n\nexport const SettingsPanel: React.FC<BoxProps> = (props): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const splitMode = useSplitMode()\n  const { slippage, routePriority } = useSettings(['slippage', 'routePriority'])\n  const [enabledBridges, totalBridges, enabledExchanges, totalExchanges] =\n    useSettingsStore((state) => [\n      Object.values(state._enabledBridges).filter(Boolean).length,\n      Object.values(state._enabledBridges).length,\n      Object.values(state._enabledExchanges).filter(Boolean).length,\n      Object.values(state._enabledExchanges).length,\n    ])\n\n  const rows =\n    splitMode === 'bridge' ? bridgeSettingsPanelKeys : swapSettingsPanelKeys\n\n  const labelByKey: Record<SettingsPanelKey, string> = {\n    routePriority: t('settings.routePriority'),\n    exchanges: t('settings.enabledExchanges'),\n    bridges: t('settings.enabledBridges'),\n    slippage: t('settings.slippage'),\n  }\n\n  const valueByKey: Record<SettingsPanelKey, string> = {\n    routePriority:\n      routePriority === 'FASTEST'\n        ? t('settings.routePriorityOptions.fastest.title')\n        : t('settings.routePriorityOptions.cheapest.title'),\n    exchanges: `${enabledExchanges}/${totalExchanges}`,\n    bridges: `${enabledBridges}/${totalBridges}`,\n    slippage: slippage ? `${slippage}%` : t('button.auto'),\n  }\n\n  const handleClick = (key: SettingsPanelKey) => {\n    navigate({\n      to: `/${navigationRoutes.settings}/${navigationRoutes[key]}`,\n    })\n  }\n\n  return (\n    <SettingsPanelContainer {...props}>\n      {rows.map((key) => (\n        <Card key={key}>\n          <SettingsPanelButton onClick={() => handleClick(key)} disableRipple>\n            <SettingsPanelTitle>{labelByKey[key]}</SettingsPanelTitle>\n            <SettingsPanelValue>{valueByKey[key]}</SettingsPanelValue>\n          </SettingsPanelButton>\n        </Card>\n      ))}\n    </SettingsPanelContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAqBA,MAAa,iBAAqC,UAAuB;CACvE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,YAAY,aAAa;CAC/B,MAAM,EAAE,UAAU,kBAAkB,YAAY,CAAC,YAAY,eAAe,CAAC;CAC7E,MAAM,CAAC,gBAAgB,cAAc,kBAAkB,kBACrD,kBAAkB,UAAU;EAC1B,OAAO,OAAO,MAAM,eAAe,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC;EACrD,OAAO,OAAO,MAAM,eAAe,CAAC,CAAC;EACrC,OAAO,OAAO,MAAM,iBAAiB,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC;EACvD,OAAO,OAAO,MAAM,iBAAiB,CAAC,CAAC;CACzC,CAAC;CAEH,MAAM,OACJ,cAAc,WAAW,0BAA0B;CAErD,MAAM,aAA+C;EACnD,eAAe,EAAE,wBAAwB;EACzC,WAAW,EAAE,2BAA2B;EACxC,SAAS,EAAE,yBAAyB;EACpC,UAAU,EAAE,mBAAmB;CACjC;CAEA,MAAM,aAA+C;EACnD,eACE,kBAAkB,YACd,EAAE,6CAA6C,IAC/C,EAAE,8CAA8C;EACtD,WAAW,GAAG,iBAAiB,GAAG;EAClC,SAAS,GAAG,eAAe,GAAG;EAC9B,UAAU,WAAW,GAAG,SAAS,KAAK,EAAE,aAAa;CACvD;CAEA,MAAM,eAAe,QAA0B;EAC7C,SAAS,EACP,IAAI,IAAI,iBAAiB,SAAS,GAAG,iBAAiB,OACxD,CAAC;CACH;CAEA,OACE,oBAAC,wBAAD;EAAwB,GAAI;YACzB,KAAK,KAAK,QACT,oBAAC,MAAD,EAAA,UACE,qBAAC,qBAAD;GAAqB,eAAe,YAAY,GAAG;GAAG,eAAA;aAAtD,CACE,oBAAC,oBAAD,EAAA,UAAqB,WAAW,KAAyB,CAAA,GACzD,oBAAC,oBAAD,EAAA,UAAqB,WAAW,KAAyB,CAAA,CACtC;KACjB,GALK,GAKL,CACP;CACqB,CAAA;AAE5B"}

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

@@ -0,0 +1,33 @@
+import { Box, ButtonBase, Typography, styled } from "@mui/material";
+//#region src/components/SettingsPanel/SettingsPanel.style.tsx
+const SettingsPanelContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	flexDirection: "column",
+	gap: theme.spacing(1)
+}));
+const SettingsPanelButton = styled(ButtonBase)(({ theme }) => ({
+	display: "flex",
+	width: "100%",
+	justifyContent: "space-between",
+	alignItems: "center",
+	gap: theme.spacing(1),
+	padding: theme.spacing(2),
+	borderRadius: theme.vars.shape.borderRadius
+}));
+const SettingsPanelTitle = styled(Typography)(({ theme }) => ({
+	fontSize: 14,
+	lineHeight: 1,
+	fontWeight: 700,
+	color: theme.vars.palette.text.primary
+}));
+const SettingsPanelValue = styled(Typography)(({ theme }) => ({
+	fontSize: 14,
+	lineHeight: 1,
+	fontWeight: 500,
+	color: theme.vars.palette.text.secondary,
+	whiteSpace: "nowrap"
+}));
+//#endregion
+export { SettingsPanelButton, SettingsPanelContainer, SettingsPanelTitle, SettingsPanelValue };
+
+//# sourceMappingURL=SettingsPanel.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsPanel.style.js","names":[],"sources":["../../../../src/components/SettingsPanel/SettingsPanel.style.tsx"],"sourcesContent":["import { Box, ButtonBase, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const SettingsPanelContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n}))\n\nexport const SettingsPanelButton: React.FC<\n  React.ComponentProps<typeof ButtonBase>\n> = styled(ButtonBase)(({ theme }) => ({\n  display: 'flex',\n  width: '100%',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  padding: theme.spacing(2),\n  borderRadius: theme.vars.shape.borderRadius,\n}))\n\nexport const SettingsPanelTitle: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 14,\n  lineHeight: 1,\n  fontWeight: 700,\n  color: theme.vars.palette.text.primary,\n}))\n\nexport const SettingsPanelValue: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 14,\n  lineHeight: 1,\n  fontWeight: 500,\n  color: theme.vars.palette.text.secondary,\n  whiteSpace: 'nowrap',\n}))\n"],"mappings":";;AAGA,MAAa,yBAET,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAa,sBAET,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACrC,SAAS;CACT,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,KAAK,MAAM,QAAQ,CAAC;CACpB,SAAS,MAAM,QAAQ,CAAC;CACxB,cAAc,MAAM,KAAK,MAAM;AACjC,EAAE;AAEF,MAAa,qBAET,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;AACjC,EAAE;AAEF,MAAa,qBAET,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,YAAY;AACd,EAAE"}

package/dist/esm/components/SettingsPanel/utils.js

@@ -0,0 +1,14 @@
+//#region src/components/SettingsPanel/utils.ts
+/** Navigation tabs that surface the settings panel on the main page. */
+const advancedNavigationTabKeys = ["swap-advanced", "bridge-advanced"];
+const swapSettingsPanelKeys = ["slippage", "exchanges"];
+const bridgeSettingsPanelKeys = [
+	"routePriority",
+	"slippage",
+	"bridges",
+	"exchanges"
+];
+//#endregion
+export { advancedNavigationTabKeys, bridgeSettingsPanelKeys, swapSettingsPanelKeys };
+
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/SettingsPanel/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/components/SettingsPanel/utils.ts"],"sourcesContent":["import type { NavigationTabKey } from '../../types/widget.js'\n\nexport type SettingsPanelKey =\n  | 'routePriority'\n  | 'exchanges'\n  | 'bridges'\n  | 'slippage'\n\n/** Navigation tabs that surface the settings panel on the main page. */\nexport const advancedNavigationTabKeys: NavigationTabKey[] = [\n  'swap-advanced',\n  'bridge-advanced',\n]\n\n// Keys are ordered to match the settings page layout.\n// Swap is same-chain, so route priority and bridges are not relevant.\nexport const swapSettingsPanelKeys: SettingsPanelKey[] = [\n  'slippage',\n  'exchanges',\n]\n\nexport const bridgeSettingsPanelKeys: SettingsPanelKey[] = [\n  'routePriority',\n  'slippage',\n  'bridges',\n  'exchanges',\n]\n"],"mappings":";;AASA,MAAa,4BAAgD,CAC3D,iBACA,iBACF;AAIA,MAAa,wBAA4C,CACvD,YACA,WACF;AAEA,MAAa,0BAA8C;CACzD;CACA;CACA;CACA;AACF"}

package/dist/esm/components/SwapButton/SwapButton.js

@@ -0,0 +1,50 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useAvailableChains } from "../../hooks/useAvailableChains.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { useToAddressReset } from "../../hooks/useToAddressReset.js";
+import { useToAddressAutoPopulate } from "../../hooks/useToAddressAutoPopulate.js";
+import { SwapButtonContainer, SwapIconCard } from "./SwapButton.style.js";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+//#region src/components/SwapButton/SwapButton.tsx
+const SwapButton = ({ sx, ...props }) => {
+	const { t } = useTranslation();
+	const { mode } = useWidgetConfig();
+	const { setFieldValue, getFieldValues } = useFieldActions();
+	const { getChainById } = useAvailableChains();
+	const { tryResetToAddress } = useToAddressReset();
+	const autoPopulateToAddress = useToAddressAutoPopulate();
+	const handleClick = () => {
+		const [fromChainId, fromToken, toChainId, toToken, toAddress, toAmount] = getFieldValues("fromChain", "fromToken", "toChain", "toToken", "toAddress", "toAmount");
+		setFieldValue("fromAmount", mode === "limit" && toAmount ? toAmount : "", { isTouched: true });
+		setFieldValue("fromChain", toChainId, { isTouched: true });
+		setFieldValue("fromToken", toToken, { isTouched: true });
+		setFieldValue("toChain", fromChainId, { isTouched: true });
+		setFieldValue("toToken", fromToken, { isTouched: true });
+		if (autoPopulateToAddress({
+			formType: "from",
+			selectedToAddress: toAddress,
+			selectedChainId: toChainId,
+			selectedOppositeChainId: fromChainId,
+			selectedOppositeTokenAddress: fromToken
+		})) return;
+		const toChain = getChainById(fromChainId);
+		if (toChain) tryResetToAddress(toChain);
+	};
+	return /* @__PURE__ */ jsx(SwapButtonContainer, {
+		sx,
+		...props,
+		children: /* @__PURE__ */ jsx(SwapIconCard, {
+			component: "button",
+			onClick: handleClick,
+			"aria-label": t("button.swap"),
+			"data-testid": "widget-swap-tokens-button",
+			children: /* @__PURE__ */ jsx(ArrowDownwardIcon, { fontSize: "inherit" })
+		})
+	});
+};
+//#endregion
+export { SwapButton };
+
+//# sourceMappingURL=SwapButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwapButton.js","names":["ArrowDownward"],"sources":["../../../../src/components/SwapButton/SwapButton.tsx"],"sourcesContent":["import ArrowDownward from '@mui/icons-material/ArrowDownward'\nimport type { BoxProps } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useToAddressReset } from '../../hooks/useToAddressReset.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { SwapButtonContainer, SwapIconCard } from './SwapButton.style.js'\n\nexport const SwapButton: React.FC<BoxProps> = ({\n  sx,\n  ...props\n}): JSX.Element => {\n  const { t } = useTranslation()\n  const { mode } = useWidgetConfig()\n  const { setFieldValue, getFieldValues } = useFieldActions()\n  const { getChainById } = useAvailableChains()\n  const { tryResetToAddress } = useToAddressReset()\n  const autoPopulateToAddress = useToAddressAutoPopulate()\n\n  const handleClick = (): void => {\n    const [fromChainId, fromToken, toChainId, toToken, toAddress, toAmount] =\n      getFieldValues(\n        'fromChain',\n        'fromToken',\n        'toChain',\n        'toToken',\n        'toAddress',\n        'toAmount'\n      )\n    const newFromAmount =\n      mode === 'limit' && toAmount ? (toAmount as string) : ''\n    setFieldValue('fromAmount', newFromAmount, { isTouched: true })\n    setFieldValue('fromChain', toChainId, { isTouched: true })\n    setFieldValue('fromToken', toToken, { isTouched: true })\n    setFieldValue('toChain', fromChainId, { isTouched: true })\n    setFieldValue('toToken', fromToken, { isTouched: true })\n\n    const autoPopulatedToAddress = autoPopulateToAddress({\n      formType: 'from',\n      selectedToAddress: toAddress,\n      selectedChainId: toChainId,\n      selectedOppositeChainId: fromChainId,\n      selectedOppositeTokenAddress: fromToken,\n    })\n\n    if (autoPopulatedToAddress) {\n      return\n    }\n\n    const toChain = getChainById(fromChainId)\n    if (toChain) {\n      tryResetToAddress(toChain)\n    }\n  }\n\n  return (\n    <SwapButtonContainer sx={sx} {...props}>\n      <SwapIconCard\n        component=\"button\"\n        onClick={handleClick}\n        aria-label={t('button.swap')}\n        data-testid=\"widget-swap-tokens-button\"\n      >\n        <ArrowDownward fontSize=\"inherit\" />\n      </SwapIconCard>\n    </SwapButtonContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAa,cAAkC,EAC7C,IACA,GAAG,YACc;CACjB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,SAAS,gBAAgB;CACjC,MAAM,EAAE,eAAe,mBAAmB,gBAAgB;CAC1D,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,sBAAsB,kBAAkB;CAChD,MAAM,wBAAwB,yBAAyB;CAEvD,MAAM,oBAA0B;EAC9B,MAAM,CAAC,aAAa,WAAW,WAAW,SAAS,WAAW,YAC5D,eACE,aACA,aACA,WACA,WACA,aACA,UACF;EAGF,cAAc,cADZ,SAAS,WAAW,WAAY,WAAsB,IACb,EAAE,WAAW,KAAK,CAAC;EAC9D,cAAc,aAAa,WAAW,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,aAAa,SAAS,EAAE,WAAW,KAAK,CAAC;EACvD,cAAc,WAAW,aAAa,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,WAAW,WAAW,EAAE,WAAW,KAAK,CAAC;EAUvD,IAR+B,sBAAsB;GACnD,UAAU;GACV,mBAAmB;GACnB,iBAAiB;GACjB,yBAAyB;GACzB,8BAA8B;EAChC,CAEyB,GACvB;EAGF,MAAM,UAAU,aAAa,WAAW;EACxC,IAAI,SACF,kBAAkB,OAAO;CAE7B;CAEA,OACE,oBAAC,qBAAD;EAAyB;EAAI,GAAI;YAC/B,oBAAC,cAAD;GACE,WAAU;GACV,SAAS;GACT,cAAY,EAAE,aAAa;GAC3B,eAAY;aAEZ,oBAACA,mBAAD,EAAe,UAAS,UAAW,CAAA;EACvB,CAAA;CACK,CAAA;AAEzB"}

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

@@ -0,0 +1,24 @@
+import { Card as Card$1 } from "../Card/Card.js";
+import { Box, styled } from "@mui/material";
+//#region src/components/SwapButton/SwapButton.style.tsx
+const swapButtonZIndex = 1110;
+const SwapIconCard = styled(Card$1)(({ theme }) => ({
+	height: 32,
+	width: 32,
+	fontSize: 16,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	borderRadius: theme.vars.shape.borderRadiusTertiary,
+	zIndex: swapButtonZIndex
+}));
+const SwapButtonContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	justifyContent: "center",
+	alignItems: "center",
+	margin: theme.spacing(-1.5)
+}));
+//#endregion
+export { SwapButtonContainer, SwapIconCard };
+
+//# sourceMappingURL=SwapButton.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwapButton.style.js","names":["Card"],"sources":["../../../../src/components/SwapButton/SwapButton.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport { Card } from '../Card/Card.js'\n\n// Sits just above MUI's appBar layer (1100) so the swap icon stays on top of the\n// two overlapping amount cards it bridges.\nconst swapButtonZIndex = 1110\n\nexport const SwapIconCard: React.FC<React.ComponentProps<typeof Card>> = styled(\n  Card\n)(({ theme }) => ({\n  height: 32,\n  width: 32,\n  fontSize: 16,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  borderRadius: theme.vars.shape.borderRadiusTertiary,\n  zIndex: swapButtonZIndex,\n}))\n\nexport const SwapButtonContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    margin: theme.spacing(-1.5),\n  }))\n"],"mappings":";;;AAMA,MAAM,mBAAmB;AAEzB,MAAa,eAA4D,OACvEA,MACF,CAAC,EAAE,EAAE,aAAa;CAChB,QAAQ;CACR,OAAO;CACP,UAAU;CACV,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,cAAc,MAAM,KAAK,MAAM;CAC/B,QAAQ;AACV,EAAE;AAEF,MAAa,sBACX,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,QAAQ,MAAM,QAAQ,IAAI;AAC5B,EAAE"}

package/dist/esm/components/TokenPillButton/TokenPillButton.js

@@ -0,0 +1,52 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useChain } from "../../hooks/useChain.js";
+import { useToken } from "../../hooks/useToken.js";
+import { AvatarBadgedDefault } from "../Avatar/Avatar.js";
+import { TokenAvatar } from "../Avatar/TokenAvatar.js";
+import { TokenPill, TokenPillLabel, TokenPillSymbol, TokenSelectPill } from "./TokenPillButton.style.js";
+import { useNavigate } from "@tanstack/react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/TokenPillButton/TokenPillButton.tsx
+const TokenPillButton = ({ formType }) => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const { disabledUI, mode } = useWidgetConfig();
+	const tokenKey = FormKeyHelper.getTokenKey(formType);
+	const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), tokenKey);
+	const { chain } = useChain(chainId);
+	const { token } = useToken(chainId, tokenAddress);
+	const isSelected = !!(chain && token);
+	const handleClick = () => {
+		navigate({ to: formType === "from" ? navigationRoutes.fromToken : mode === "refuel" ? navigationRoutes.toTokenNative : navigationRoutes.toToken });
+	};
+	const isDisabled = !!disabledUI?.[tokenKey];
+	const testId = `widget-${formType}-token-button`;
+	if (isSelected) return /* @__PURE__ */ jsxs(TokenPill, {
+		onClick: isDisabled ? void 0 : handleClick,
+		disabled: isDisabled,
+		"data-testid": testId,
+		children: [/* @__PURE__ */ jsx(TokenAvatar, {
+			token,
+			chain,
+			tokenAvatarSize: 24,
+			chainAvatarSize: 12
+		}), /* @__PURE__ */ jsx(TokenPillSymbol, { children: token.symbol })]
+	});
+	return /* @__PURE__ */ jsxs(TokenSelectPill, {
+		onClick: isDisabled ? void 0 : handleClick,
+		"data-testid": testId,
+		children: [/* @__PURE__ */ jsx(AvatarBadgedDefault, {
+			chain,
+			avatarSize: 24,
+			badgeSize: 12
+		}), /* @__PURE__ */ jsx(TokenPillLabel, { children: t("main.select") })]
+	});
+};
+//#endregion
+export { TokenPillButton };
+
+//# sourceMappingURL=TokenPillButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TokenPillButton.js","names":[],"sources":["../../../../src/components/TokenPillButton/TokenPillButton.tsx"],"sourcesContent":["import { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport type { DisabledUIConfig } from '../../types/widget.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { AvatarBadgedDefault } from '../Avatar/Avatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport {\n  TokenPill,\n  TokenPillLabel,\n  TokenPillSymbol,\n  TokenSelectPill,\n} from './TokenPillButton.style.js'\n\nexport const TokenPillButton: React.FC<FormTypeProps> = ({\n  formType,\n}): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { disabledUI, mode } = useWidgetConfig()\n\n  const tokenKey = FormKeyHelper.getTokenKey(formType)\n  const [chainId, tokenAddress] = useFieldValues(\n    FormKeyHelper.getChainKey(formType),\n    tokenKey\n  )\n\n  const { chain } = useChain(chainId)\n  const { token } = useToken(chainId, tokenAddress)\n\n  const isSelected = !!(chain && token)\n\n  const handleClick = (): void => {\n    navigate({\n      to:\n        formType === 'from'\n          ? navigationRoutes.fromToken\n          : mode === 'refuel'\n            ? navigationRoutes.toTokenNative\n            : navigationRoutes.toToken,\n    })\n  }\n\n  const isDisabled = !!disabledUI?.[tokenKey as keyof DisabledUIConfig]\n\n  const testId = `widget-${formType}-token-button`\n\n  if (isSelected) {\n    return (\n      <TokenPill\n        onClick={isDisabled ? undefined : handleClick}\n        disabled={isDisabled}\n        data-testid={testId}\n      >\n        <TokenAvatar\n          token={token}\n          chain={chain}\n          tokenAvatarSize={24}\n          chainAvatarSize={12}\n        />\n        <TokenPillSymbol>{token.symbol}</TokenPillSymbol>\n      </TokenPill>\n    )\n  }\n\n  return (\n    <TokenSelectPill\n      onClick={isDisabled ? undefined : handleClick}\n      data-testid={testId}\n    >\n      <AvatarBadgedDefault chain={chain} avatarSize={24} badgeSize={12} />\n      <TokenPillLabel>{t('main.select')}</TokenPillLabel>\n    </TokenSelectPill>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAa,mBAA4C,EACvD,eACiB;CACjB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,YAAY,SAAS,gBAAgB;CAE7C,MAAM,WAAW,cAAc,YAAY,QAAQ;CACnD,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,QACF;CAEA,MAAM,EAAE,UAAU,SAAS,OAAO;CAClC,MAAM,EAAE,UAAU,SAAS,SAAS,YAAY;CAEhD,MAAM,aAAa,CAAC,EAAE,SAAS;CAE/B,MAAM,oBAA0B;EAC9B,SAAS,EACP,IACE,aAAa,SACT,iBAAiB,YACjB,SAAS,WACP,iBAAiB,gBACjB,iBAAiB,QAC3B,CAAC;CACH;CAEA,MAAM,aAAa,CAAC,CAAC,aAAa;CAElC,MAAM,SAAS,UAAU,SAAS;CAElC,IAAI,YACF,OACE,qBAAC,WAAD;EACE,SAAS,aAAa,KAAA,IAAY;EAClC,UAAU;EACV,eAAa;YAHf,CAKE,oBAAC,aAAD;GACS;GACA;GACP,iBAAiB;GACjB,iBAAiB;EAClB,CAAA,GACD,oBAAC,iBAAD,EAAA,UAAkB,MAAM,OAAwB,CAAA,CACvC;;CAIf,OACE,qBAAC,iBAAD;EACE,SAAS,aAAa,KAAA,IAAY;EAClC,eAAa;YAFf,CAIE,oBAAC,qBAAD;GAA4B;GAAO,YAAY;GAAI,WAAW;EAAK,CAAA,GACnE,oBAAC,gBAAD,EAAA,UAAiB,EAAE,aAAa,EAAkB,CAAA,CACnC;;AAErB"}

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

@@ -0,0 +1,39 @@
+import { Button, Typography, styled } from "@mui/material";
+//#region src/components/TokenPillButton/TokenPillButton.style.tsx
+const pillLayout = (theme) => ({
+	height: 36,
+	borderRadius: theme.vars.shape.borderRadiusSecondary,
+	padding: theme.spacing(.5, 1),
+	display: "flex",
+	alignItems: "center",
+	gap: theme.spacing(1),
+	whiteSpace: "nowrap",
+	flexShrink: 0
+});
+const TokenPill = styled(Button)(({ theme }) => ({
+	...pillLayout(theme),
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+	border: "1px solid transparent",
+	transition: theme.transitions.create(["background-color"], { duration: theme.transitions.duration.short }),
+	"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` }
+}));
+const TokenSelectPill = styled(TokenPill)({ minWidth: 0 });
+const TokenPillSymbol = styled(Typography)(({ theme }) => ({
+	fontSize: 14,
+	fontWeight: 700,
+	lineHeight: "18px",
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap",
+	color: theme.vars.palette.text.primary
+}));
+const TokenPillLabel = styled(Typography)(({ theme }) => ({
+	fontSize: 16,
+	fontWeight: 700,
+	lineHeight: "20px",
+	color: theme.vars.palette.text.secondary
+}));
+//#endregion
+export { TokenPill, TokenPillLabel, TokenPillSymbol, TokenSelectPill };
+
+//# sourceMappingURL=TokenPillButton.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TokenPillButton.style.js","names":[],"sources":["../../../../src/components/TokenPillButton/TokenPillButton.style.tsx"],"sourcesContent":["import { Button, styled, type Theme, Typography } from '@mui/material'\nimport type React from 'react'\n\nconst pillLayout = (theme: Theme) => ({\n  height: 36,\n  borderRadius: theme.vars.shape.borderRadiusSecondary,\n  padding: theme.spacing(0.5, 1),\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  whiteSpace: 'nowrap',\n  flexShrink: 0,\n})\n\nexport const TokenPill: React.FC<React.ComponentProps<typeof Button>> = styled(\n  Button\n)(({ theme }) => ({\n  ...pillLayout(theme),\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  border: '1px solid transparent',\n  transition: theme.transitions.create(['background-color'], {\n    duration: theme.transitions.duration.short,\n  }),\n  '&:hover': {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n  },\n}))\n\nexport const TokenSelectPill: React.FC<React.ComponentProps<typeof Button>> =\n  styled(TokenPill)({ minWidth: 0 })\n\nexport const TokenPillSymbol: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 14,\n  fontWeight: 700,\n  lineHeight: '18px',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  color: theme.vars.palette.text.primary,\n}))\n\nexport const TokenPillLabel: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(({ theme }) => ({\n    fontSize: 16,\n    fontWeight: 700,\n    lineHeight: '20px',\n    color: theme.vars.palette.text.secondary,\n  }))\n"],"mappings":";;AAGA,MAAM,cAAc,WAAkB;CACpC,QAAQ;CACR,cAAc,MAAM,KAAK,MAAM;CAC/B,SAAS,MAAM,QAAQ,IAAK,CAAC;CAC7B,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,CAAC;CACpB,YAAY;CACZ,YAAY;AACd;AAEA,MAAa,YAA2D,OACtE,MACF,CAAC,EAAE,EAAE,aAAa;CAChB,GAAG,WAAW,KAAK;CACnB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAC9E,QAAQ;CACR,YAAY,MAAM,YAAY,OAAO,CAAC,kBAAkB,GAAG,EACzD,UAAU,MAAM,YAAY,SAAS,MACvC,CAAC;CACD,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;AACF,EAAE;AAEF,MAAa,kBACX,OAAO,SAAS,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC;AAEnC,MAAa,kBAET,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,UAAU;CACV,cAAc;CACd,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;AACjC,EAAE;AAEF,MAAa,iBACX,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACjC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;AACjC,EAAE"}

package/dist/esm/config/version.d.ts

@@ -1,6 +1,6 @@
 //#region src/config/version.d.ts
 declare const name = "@lifi/widget";
-declare const version = "4.1.0";
+declare const version = "4.2.0";
 //#endregion
 export { name, version };
 //# sourceMappingURL=version.d.ts.map

package/dist/esm/config/version.js

@@ -1,6 +1,6 @@
 //#region src/config/version.ts
 const name = "@lifi/widget";
-const version = "4.1.0";
+const version = "4.2.0";
 //#endregion
 export { name, version };
 

package/dist/esm/config/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","names":[],"sources":["../../../src/config/version.ts"],"sourcesContent":["export const name = '@lifi/widget'\nexport const version = '4.1.0'\n"],"mappings":";AAAA,MAAa,OAAO;AACpB,MAAa,UAAU"}
+{"version":3,"file":"version.js","names":[],"sources":["../../../src/config/version.ts"],"sourcesContent":["export const name = '@lifi/widget'\nexport const version = '4.2.0'\n"],"mappings":";AAAA,MAAa,OAAO;AACpB,MAAa,UAAU"}

package/dist/esm/hooks/useChainSearch.js

@@ -24,7 +24,8 @@ function useChainSearch(formType, listRef, inputRef) {
 			setCurrentChain(chain.id);
 		}, [setCurrentChain]),
 		onChange: useCallback(() => {
-			debouncedFilterChains(inputRef.current?.value || "");
+			const value = inputRef.current?.value || "";
+			debouncedFilterChains(value);
 		}, [debouncedFilterChains, inputRef]),
 		onClear: useCallback(() => {
 			if (inputRef.current) inputRef.current.value = "";

package/dist/esm/hooks/useChainSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"useChainSearch.js","names":[],"sources":["../../../src/hooks/useChainSearch.ts"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { debounce } from '@mui/material'\nimport type { RefObject } from 'react'\nimport { useCallback, useMemo, useState } from 'react'\nimport { useChainSelect } from '../components/ChainSelect/useChainSelect.js'\nimport { FormKeyHelper, type FormType } from '../stores/form/types.js'\nimport { useFieldValues } from '../stores/form/useFieldValues.js'\n\nexport function useChainSearch(\n  formType: FormType,\n  listRef: RefObject<HTMLDivElement | null>,\n  inputRef: RefObject<HTMLInputElement | null>\n): {\n  filteredChains: ExtendedChain[]\n  isLoading: boolean\n  selectedChainId: number | undefined\n  onSelectChainFallback: (chain: ExtendedChain) => void\n  onChange: () => void\n  onClear: () => void\n} {\n  const { chains, isLoading, setCurrentChain } = useChainSelect(formType)\n  const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType))\n  const [debouncedSearchValue, setDebouncedSearchValue] = useState('')\n\n  const filteredChains = useMemo(() => {\n    const value = debouncedSearchValue.toLowerCase()\n    return value\n      ? (chains?.filter((chain) => chain.name.toLowerCase().includes(value)) ??\n          [])\n      : (chains ?? [])\n  }, [chains, debouncedSearchValue])\n\n  const debouncedFilterChains = useMemo(\n    () =>\n      debounce((value: string) => {\n        setDebouncedSearchValue(value)\n        listRef.current?.scrollTo(0, 0)\n      }, 250),\n    [listRef]\n  )\n\n  const onSelectChainFallback = useCallback(\n    (chain: ExtendedChain) => {\n      setCurrentChain(chain.id)\n    },\n    [setCurrentChain]\n  )\n\n  const onChange = useCallback(() => {\n    const value = inputRef.current?.value || ''\n    debouncedFilterChains(value)\n  }, [debouncedFilterChains, inputRef])\n\n  const onClear = useCallback(() => {\n    if (inputRef.current) {\n      inputRef.current.value = ''\n    }\n    setDebouncedSearchValue('')\n    listRef.current?.scrollTo(0, 0)\n  }, [inputRef, listRef])\n\n  return {\n    filteredChains,\n    isLoading,\n    selectedChainId,\n    onSelectChainFallback,\n    onChange,\n    onClear,\n  }\n}\n"],"mappings":";;;;;;AAQA,SAAgB,eACd,UACA,SACA,UAQA;CACA,MAAM,EAAE,QAAQ,WAAW,oBAAoB,eAAe,QAAQ;CACtE,MAAM,CAAC,mBAAmB,eAAe,cAAc,YAAY,QAAQ,CAAC;CAC5E,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,EAAE;CAEnE,MAAM,iBAAiB,cAAc;EACnC,MAAM,QAAQ,qBAAqB,YAAY;EAC/C,OAAO,QACF,QAAQ,QAAQ,UAAU,MAAM,KAAK,YAAY,CAAC,CAAC,SAAS,KAAK,CAAC,KACjE,CAAC,IACF,UAAU,CAAC;CAClB,GAAG,CAAC,QAAQ,oBAAoB,CAAC;CAEjC,MAAM,wBAAwB,cAE1B,UAAU,UAAkB;EAC1B,wBAAwB,KAAK;EAC7B,QAAQ,SAAS,SAAS,GAAG,CAAC;CAChC,GAAG,GAAG,GACR,CAAC,OAAO,CACV;CAsBA,OAAO;EACL;EACA;EACA;EACA,uBAxB4B,aAC3B,UAAyB;GACxB,gBAAgB,MAAM,EAAE;EAC1B,GACA,CAAC,eAAe,CAoBI;EACpB,UAlBe,kBAAkB;GAEjC,sBADc,SAAS,SAAS,SAAS,EACd;EAC7B,GAAG,CAAC,uBAAuB,QAAQ,CAe1B;EACP,SAdc,kBAAkB;GAChC,IAAI,SAAS,SACX,SAAS,QAAQ,QAAQ;GAE3B,wBAAwB,EAAE;GAC1B,QAAQ,SAAS,SAAS,GAAG,CAAC;EAChC,GAAG,CAAC,UAAU,OAAO,CAQb;CACR;AACF"}
+{"version":3,"file":"useChainSearch.js","names":[],"sources":["../../../src/hooks/useChainSearch.ts"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { debounce } from '@mui/material'\nimport type { RefObject } from 'react'\nimport { useCallback, useMemo, useState } from 'react'\nimport { useChainSelect } from '../components/ChainSelect/useChainSelect.js'\nimport { FormKeyHelper, type FormType } from '../stores/form/types.js'\nimport { useFieldValues } from '../stores/form/useFieldValues.js'\n\nexport function useChainSearch(\n  formType: FormType,\n  listRef: RefObject<HTMLDivElement | null>,\n  inputRef: RefObject<HTMLInputElement | null>\n): {\n  filteredChains: ExtendedChain[]\n  isLoading: boolean\n  selectedChainId: number | undefined\n  onSelectChainFallback: (chain: ExtendedChain) => void\n  onChange: () => void\n  onClear: () => void\n} {\n  const { chains, isLoading, setCurrentChain } = useChainSelect(formType)\n  const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType))\n  const [debouncedSearchValue, setDebouncedSearchValue] = useState('')\n\n  const filteredChains = useMemo(() => {\n    const value = debouncedSearchValue.toLowerCase()\n    return value\n      ? (chains?.filter((chain) => chain.name.toLowerCase().includes(value)) ??\n          [])\n      : (chains ?? [])\n  }, [chains, debouncedSearchValue])\n\n  const debouncedFilterChains = useMemo(\n    () =>\n      debounce((value: string) => {\n        setDebouncedSearchValue(value)\n        listRef.current?.scrollTo(0, 0)\n      }, 250),\n    [listRef]\n  )\n\n  const onSelectChainFallback = useCallback(\n    (chain: ExtendedChain) => {\n      setCurrentChain(chain.id)\n    },\n    [setCurrentChain]\n  )\n\n  const onChange = useCallback(() => {\n    const value = inputRef.current?.value || ''\n    debouncedFilterChains(value)\n  }, [debouncedFilterChains, inputRef])\n\n  const onClear = useCallback(() => {\n    if (inputRef.current) {\n      inputRef.current.value = ''\n    }\n    setDebouncedSearchValue('')\n    listRef.current?.scrollTo(0, 0)\n  }, [inputRef, listRef])\n\n  return {\n    filteredChains,\n    isLoading,\n    selectedChainId,\n    onSelectChainFallback,\n    onChange,\n    onClear,\n  }\n}\n"],"mappings":";;;;;;AAQA,SAAgB,eACd,UACA,SACA,UAQA;CACA,MAAM,EAAE,QAAQ,WAAW,oBAAoB,eAAe,QAAQ;CACtE,MAAM,CAAC,mBAAmB,eAAe,cAAc,YAAY,QAAQ,CAAC;CAC5E,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,EAAE;CAEnE,MAAM,iBAAiB,cAAc;EACnC,MAAM,QAAQ,qBAAqB,YAAY;EAC/C,OAAO,QACF,QAAQ,QAAQ,UAAU,MAAM,KAAK,YAAY,CAAC,CAAC,SAAS,KAAK,CAAC,KACjE,CAAC,IACF,UAAU,CAAC;CAClB,GAAG,CAAC,QAAQ,oBAAoB,CAAC;CAEjC,MAAM,wBAAwB,cAE1B,UAAU,UAAkB;EAC1B,wBAAwB,KAAK;EAC7B,QAAQ,SAAS,SAAS,GAAG,CAAC;CAChC,GAAG,GAAG,GACR,CAAC,OAAO,CACV;CAsBA,OAAO;EACL;EACA;EACA;EACA,uBAxB4B,aAC3B,UAAyB;GACxB,gBAAgB,MAAM,EAAE;EAC1B,GACA,CAAC,eAAe,CAoBI;EACpB,UAlBe,kBAAkB;GACjC,MAAM,QAAQ,SAAS,SAAS,SAAS;GACzC,sBAAsB,KAAK;EAC7B,GAAG,CAAC,uBAAuB,QAAQ,CAe1B;EACP,SAdc,kBAAkB;GAChC,IAAI,SAAS,SACX,SAAS,QAAQ,QAAQ;GAE3B,wBAAwB,EAAE;GAC1B,QAAQ,SAAS,SAAS,GAAG,CAAC;EAChC,GAAG,CAAC,UAAU,OAAO,CAQb;CACR;AACF"}

package/dist/esm/hooks/useLimitMarketRate.js

@@ -0,0 +1,24 @@
+import { FormKeyHelper } from "../stores/form/types.js";
+import { useFieldValues } from "../stores/form/useFieldValues.js";
+import { useToken } from "./useToken.js";
+//#region src/hooks/useLimitMarketRate.ts
+/**
+* Canonical limit-order market rate (receive token per send token), derived
+* from the tokens' USD prices: 1 send token ≈ sendPrice / receivePrice receive
+* tokens. This is the spot ratio — what the price card's "Market" reference and
+* proximity indicator compare against. Returns `undefined` until both token
+* prices are known.
+*/
+const useLimitMarketRate = () => {
+	const [fromChainId, fromTokenAddress, toChainId, toTokenAddress] = useFieldValues(FormKeyHelper.getChainKey("from"), FormKeyHelper.getTokenKey("from"), FormKeyHelper.getChainKey("to"), FormKeyHelper.getTokenKey("to"));
+	const { token: fromToken } = useToken(fromChainId, fromTokenAddress);
+	const { token: toToken } = useToken(toChainId, toTokenAddress);
+	const fromPrice = Number(fromToken?.priceUSD);
+	const toPrice = Number(toToken?.priceUSD);
+	if (!fromPrice || !toPrice || Number.isNaN(fromPrice) || Number.isNaN(toPrice)) return;
+	return fromPrice / toPrice;
+};
+//#endregion
+export { useLimitMarketRate };
+
+//# sourceMappingURL=useLimitMarketRate.js.map

package/dist/esm/hooks/useLimitMarketRate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLimitMarketRate.js","names":[],"sources":["../../../src/hooks/useLimitMarketRate.ts"],"sourcesContent":["import { FormKeyHelper } from '../stores/form/types.js'\nimport { useFieldValues } from '../stores/form/useFieldValues.js'\nimport { useToken } from './useToken.js'\n\n/**\n * Canonical limit-order market rate (receive token per send token), derived\n * from the tokens' USD prices: 1 send token ≈ sendPrice / receivePrice receive\n * tokens. This is the spot ratio — what the price card's \"Market\" reference and\n * proximity indicator compare against. Returns `undefined` until both token\n * prices are known.\n */\nexport const useLimitMarketRate = (): number | undefined => {\n  const [fromChainId, fromTokenAddress, toChainId, toTokenAddress] =\n    useFieldValues(\n      FormKeyHelper.getChainKey('from'),\n      FormKeyHelper.getTokenKey('from'),\n      FormKeyHelper.getChainKey('to'),\n      FormKeyHelper.getTokenKey('to')\n    )\n  const { token: fromToken } = useToken(fromChainId, fromTokenAddress)\n  const { token: toToken } = useToken(toChainId, toTokenAddress)\n\n  const fromPrice = Number(fromToken?.priceUSD)\n  const toPrice = Number(toToken?.priceUSD)\n\n  // A `priceUSD` of `\"0\"` (or missing) means the price is unknown — there's no\n  // meaningful spot ratio to derive, and dividing by a zero `toPrice` would be\n  // `Infinity`, so the falsy guard intentionally suppresses the rate here.\n  if (\n    !fromPrice ||\n    !toPrice ||\n    Number.isNaN(fromPrice) ||\n    Number.isNaN(toPrice)\n  ) {\n    return undefined\n  }\n\n  return fromPrice / toPrice\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,2BAA+C;CAC1D,MAAM,CAAC,aAAa,kBAAkB,WAAW,kBAC/C,eACE,cAAc,YAAY,MAAM,GAChC,cAAc,YAAY,MAAM,GAChC,cAAc,YAAY,IAAI,GAC9B,cAAc,YAAY,IAAI,CAChC;CACF,MAAM,EAAE,OAAO,cAAc,SAAS,aAAa,gBAAgB;CACnE,MAAM,EAAE,OAAO,YAAY,SAAS,WAAW,cAAc;CAE7D,MAAM,YAAY,OAAO,WAAW,QAAQ;CAC5C,MAAM,UAAU,OAAO,SAAS,QAAQ;CAKxC,IACE,CAAC,aACD,CAAC,WACD,OAAO,MAAM,SAAS,KACtB,OAAO,MAAM,OAAO,GAEpB;CAGF,OAAO,YAAY;AACrB"}

package/dist/esm/hooks/useLinkedLimitFields.js

@@ -0,0 +1,49 @@
+import { useFieldActions } from "../stores/form/useFieldActions.js";
+import { FormKeyHelper } from "../stores/form/types.js";
+import { useFieldValues } from "../stores/form/useFieldValues.js";
+import { useToken } from "./useToken.js";
+import { deriveLimitPrice, deriveReceiveAmount } from "../utils/limitOrder.js";
+//#region src/hooks/useLinkedLimitFields.ts
+/**
+* Implements the linked-field derivation for limit orders:
+* - `limitPrice = receiveAmount / sendAmount`
+* - editing sendAmount recomputes receiveAmount, holding the current price
+* - editing limitPrice (with a send amount set) recomputes receiveAmount
+* - sendAmount never changes without an explicit user edit
+*
+* The receive amount (`toAmount`) is read-only in the UI — it is derived here
+* from the send amount and limit price, then sent to the routes request; the
+* receive card only displays the resulting quote.
+*
+* The limit price is NOT stored: it is purely a function of the `fromAmount`
+* and `toAmount` form fields (canonical receive-per-send). The UI layer handles
+* base/quote display inversion. Because it's derived, editing the send amount
+* only has to preserve the pre-edit price.
+*/
+const useLinkedLimitFields = () => {
+	const { setFieldValue } = useFieldActions();
+	const [toChainId, toTokenAddress, sendAmount, receiveAmount] = useFieldValues(FormKeyHelper.getChainKey("to"), FormKeyHelper.getTokenKey("to"), FormKeyHelper.getAmountKey("from"), FormKeyHelper.getAmountKey("to"));
+	const { token: toToken } = useToken(toChainId, toTokenAddress);
+	const limitPrice = deriveLimitPrice(sendAmount, receiveAmount);
+	const setSendAmount = (value) => {
+		setFieldValue("fromAmount", value, {
+			isDirty: true,
+			isTouched: true
+		});
+		const nextReceive = deriveReceiveAmount(value, limitPrice, toToken?.decimals);
+		if (nextReceive) setFieldValue("toAmount", nextReceive, { isDirty: true });
+	};
+	const setLimitPrice = (value) => {
+		const nextReceive = deriveReceiveAmount(sendAmount, value, toToken?.decimals);
+		setFieldValue("toAmount", nextReceive, { isDirty: true });
+	};
+	return {
+		limitPrice,
+		setSendAmount,
+		setLimitPrice
+	};
+};
+//#endregion
+export { useLinkedLimitFields };
+
+//# sourceMappingURL=useLinkedLimitFields.js.map

package/dist/esm/hooks/useLinkedLimitFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLinkedLimitFields.js","names":[],"sources":["../../../src/hooks/useLinkedLimitFields.ts"],"sourcesContent":["import { FormKeyHelper } from '../stores/form/types.js'\nimport { useFieldActions } from '../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../stores/form/useFieldValues.js'\nimport { deriveLimitPrice, deriveReceiveAmount } from '../utils/limitOrder.js'\nimport { useToken } from './useToken.js'\n\nexport interface LinkedLimitFields {\n  limitPrice: string\n  /** Set the send amount (explicit user edit); derives receiveAmount when a price is set. */\n  setSendAmount: (value: string) => void\n  /** Set the limit price (canonical: receive per send); derives receiveAmount when a send amount is set. */\n  setLimitPrice: (value: string) => void\n}\n\n/**\n * Implements the linked-field derivation for limit orders:\n * - `limitPrice = receiveAmount / sendAmount`\n * - editing sendAmount recomputes receiveAmount, holding the current price\n * - editing limitPrice (with a send amount set) recomputes receiveAmount\n * - sendAmount never changes without an explicit user edit\n *\n * The receive amount (`toAmount`) is read-only in the UI — it is derived here\n * from the send amount and limit price, then sent to the routes request; the\n * receive card only displays the resulting quote.\n *\n * The limit price is NOT stored: it is purely a function of the `fromAmount`\n * and `toAmount` form fields (canonical receive-per-send). The UI layer handles\n * base/quote display inversion. Because it's derived, editing the send amount\n * only has to preserve the pre-edit price.\n */\nexport const useLinkedLimitFields = (): LinkedLimitFields => {\n  const { setFieldValue } = useFieldActions()\n  const [toChainId, toTokenAddress, sendAmount, receiveAmount] = useFieldValues(\n    FormKeyHelper.getChainKey('to'),\n    FormKeyHelper.getTokenKey('to'),\n    FormKeyHelper.getAmountKey('from'),\n    FormKeyHelper.getAmountKey('to')\n  )\n  const { token: toToken } = useToken(toChainId, toTokenAddress)\n\n  const limitPrice = deriveLimitPrice(sendAmount, receiveAmount)\n\n  const setSendAmount = (value: string): void => {\n    // Hold the pre-edit price (derived from the current fields) so changing the\n    // send amount rescales the receive amount instead of moving the price.\n    setFieldValue('fromAmount', value, { isDirty: true, isTouched: true })\n    const nextReceive = deriveReceiveAmount(\n      value,\n      limitPrice,\n      toToken?.decimals\n    )\n    if (nextReceive) {\n      setFieldValue('toAmount', nextReceive, { isDirty: true })\n    }\n  }\n\n  const setLimitPrice = (value: string): void => {\n    // Write unconditionally (including '') so the receive amount tracks the\n    // price both ways — clearing the price clears the derived receive amount\n    // instead of leaving a stale value that re-derives the old price.\n    const nextReceive = deriveReceiveAmount(\n      sendAmount,\n      value,\n      toToken?.decimals\n    )\n    setFieldValue('toAmount', nextReceive, { isDirty: true })\n  }\n\n  return {\n    limitPrice,\n    setSendAmount,\n    setLimitPrice,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAa,6BAAgD;CAC3D,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,CAAC,WAAW,gBAAgB,YAAY,iBAAiB,eAC7D,cAAc,YAAY,IAAI,GAC9B,cAAc,YAAY,IAAI,GAC9B,cAAc,aAAa,MAAM,GACjC,cAAc,aAAa,IAAI,CACjC;CACA,MAAM,EAAE,OAAO,YAAY,SAAS,WAAW,cAAc;CAE7D,MAAM,aAAa,iBAAiB,YAAY,aAAa;CAE7D,MAAM,iBAAiB,UAAwB;EAG7C,cAAc,cAAc,OAAO;GAAE,SAAS;GAAM,WAAW;EAAK,CAAC;EACrE,MAAM,cAAc,oBAClB,OACA,YACA,SAAS,QACX;EACA,IAAI,aACF,cAAc,YAAY,aAAa,EAAE,SAAS,KAAK,CAAC;CAE5D;CAEA,MAAM,iBAAiB,UAAwB;EAI7C,MAAM,cAAc,oBAClB,YACA,OACA,SAAS,QACX;EACA,cAAc,YAAY,aAAa,EAAE,SAAS,KAAK,CAAC;CAC1D;CAEA,OAAO;EACL;EACA;EACA;CACF;AACF"}