@lifi/widget 4.1.0 → 4.2.0

package/dist/esm/pages/MainPage/ReviewButton.js

@@ -3,6 +3,7 @@ import "../../types/events.js";
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
 import { navigationRoutes } from "../../utils/navigationRoutes.js";
 import { useSplitMode } from "../../stores/navigationTabs/useNavigationTabsStore.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
 import { useRoutes } from "../../hooks/useRoutes.js";
 import { useToAddressRequirements } from "../../hooks/useToAddressRequirements.js";
 import { BaseTransactionButton } from "../../components/BaseTransactionButton/BaseTransactionButton.js";
@@ -18,7 +19,8 @@ const ReviewButton = () => {
 	const splitState = useSplitMode();
 	const { toAddress, requiredToAddress } = useToAddressRequirements();
 	const { routes, setReviewableRoute } = useRoutes();
-	const currentRoute = routes?.[0];
+	const [selectedRouteId] = useFieldValues("selectedRouteId");
+	const currentRoute = (mode === "limit" ? routes?.find((route) => route.id === selectedRouteId) : void 0) ?? routes?.[0];
 	const handleClick = async () => {
 		if (!currentRoute) return;
 		setReviewableRoute(currentRoute);
@@ -35,11 +37,16 @@ const ReviewButton = () => {
 		if (currentRoute) switch (mode) {
 			case "custom": return t(`button.${modeOptions?.custom?.type ?? "checkout"}Review`);
 			case "refuel": return t("button.getGas");
-			default: return t(`button.${currentRoute.fromChainId === currentRoute.toChainId ? "swap" : "bridge"}Review`);
+			case "limit": return t("button.review");
+			default: {
+				const transactionType = currentRoute.fromChainId === currentRoute.toChainId ? "swap" : "bridge";
+				return t(`button.${transactionType}Review`);
+			}
 		}
 		switch (mode) {
 			case "custom": return modeOptions?.custom?.type === "deposit" ? t("button.deposit") : t("button.buy");
 			case "refuel": return t("button.getGas");
+			case "limit": return t("button.review");
 			case "split":
 				if (splitState) return t(`button.${splitState}`);
 				return t("button.exchange");

package/dist/esm/pages/MainPage/ReviewButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReviewButton.js","names":[],"sources":["../../../../src/pages/MainPage/ReviewButton.tsx"],"sourcesContent":["import { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useSplitMode } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\n\nexport const ReviewButton: React.FC = () => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const emitter = useWidgetEvents()\n  const { mode, modeOptions } = useWidgetConfig()\n  const splitState = useSplitMode()\n  const { toAddress, requiredToAddress } = useToAddressRequirements()\n  const { routes, setReviewableRoute } = useRoutes()\n\n  const currentRoute = routes?.[0]\n\n  const handleClick = async () => {\n    if (!currentRoute) {\n      return\n    }\n\n    setReviewableRoute(currentRoute)\n    navigate({\n      to: navigationRoutes.transactionExecution,\n      search: { routeId: currentRoute.id },\n    })\n    emitter.emit(WidgetEvent.RouteSelected, {\n      route: currentRoute,\n      routes: routes!,\n    })\n  }\n\n  const getButtonText = (): string => {\n    if (currentRoute) {\n      switch (mode) {\n        case 'custom':\n          return t(`button.${modeOptions?.custom?.type ?? 'checkout'}Review`)\n        case 'refuel':\n          return t('button.getGas')\n        default: {\n          const transactionType =\n            currentRoute.fromChainId === currentRoute.toChainId\n              ? 'swap'\n              : 'bridge'\n          return t(`button.${transactionType}Review`)\n        }\n      }\n    }\n    switch (mode) {\n      case 'custom':\n        return modeOptions?.custom?.type === 'deposit'\n          ? t('button.deposit')\n          : t('button.buy')\n      case 'refuel':\n        return t('button.getGas')\n      case 'split':\n        if (splitState) {\n          return t(`button.${splitState}`)\n        }\n        return t('button.exchange')\n      default:\n        return t('button.exchange')\n    }\n  }\n\n  return (\n    <BaseTransactionButton\n      text={getButtonText()}\n      onClick={handleClick}\n      disabled={currentRoute && requiredToAddress && !toAddress}\n      route={currentRoute}\n      sx={{ flex: 1 }}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAWA,MAAa,qBAA+B;CAC1C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,gBAAgB;CAChC,MAAM,EAAE,MAAM,gBAAgB,gBAAgB;CAC9C,MAAM,aAAa,aAAa;CAChC,MAAM,EAAE,WAAW,sBAAsB,yBAAyB;CAClE,MAAM,EAAE,QAAQ,uBAAuB,UAAU;CAEjD,MAAM,eAAe,SAAS;CAE9B,MAAM,cAAc,YAAY;EAC9B,IAAI,CAAC,cACH;EAGF,mBAAmB,YAAY;EAC/B,SAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,EAAE,SAAS,aAAa,GAAG;EACrC,CAAC;EACD,QAAQ,KAAA,iBAAgC;GACtC,OAAO;GACC;EACV,CAAC;CACH;CAEA,MAAM,sBAA8B;EAClC,IAAI,cACF,QAAQ,MAAR;GACE,KAAK,UACH,OAAO,EAAE,UAAU,aAAa,QAAQ,QAAQ,WAAW,OAAO;GACpE,KAAK,UACH,OAAO,EAAE,eAAe;GAC1B,SAKE,OAAO,EAAE,UAHP,aAAa,gBAAgB,aAAa,YACtC,SACA,SAC6B,OAAO;EAE9C;EAEF,QAAQ,MAAR;GACE,KAAK,UACH,OAAO,aAAa,QAAQ,SAAS,YACjC,EAAE,gBAAgB,IAClB,EAAE,YAAY;GACpB,KAAK,UACH,OAAO,EAAE,eAAe;GAC1B,KAAK;IACH,IAAI,YACF,OAAO,EAAE,UAAU,YAAY;IAEjC,OAAO,EAAE,iBAAiB;GAC5B,SACE,OAAO,EAAE,iBAAiB;EAC9B;CACF;CAEA,OACE,oBAAC,uBAAD;EACE,MAAM,cAAc;EACpB,SAAS;EACT,UAAU,gBAAgB,qBAAqB,CAAC;EAChD,OAAO;EACP,IAAI,EAAE,MAAM,EAAE;CACf,CAAA;AAEL"}
+{"version":3,"file":"ReviewButton.js","names":[],"sources":["../../../../src/pages/MainPage/ReviewButton.tsx"],"sourcesContent":["import { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useSplitMode } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\n\nexport const ReviewButton: React.FC = () => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const emitter = useWidgetEvents()\n  const { mode, modeOptions } = useWidgetConfig()\n  const splitState = useSplitMode()\n  const { toAddress, requiredToAddress } = useToAddressRequirements()\n  const { routes, setReviewableRoute } = useRoutes()\n  const [selectedRouteId] = useFieldValues('selectedRouteId')\n\n  // The provider pick only applies in limit mode (it's the only flow that sets\n  // it). Honoring it in other modes would be wrong, since provider/tool keys\n  // can collide across modes. Everywhere else, fall back to the best route.\n  const currentRoute =\n    (mode === 'limit'\n      ? routes?.find((route) => route.id === selectedRouteId)\n      : undefined) ?? routes?.[0]\n\n  const handleClick = async () => {\n    if (!currentRoute) {\n      return\n    }\n\n    setReviewableRoute(currentRoute)\n    navigate({\n      to: navigationRoutes.transactionExecution,\n      search: { routeId: currentRoute.id },\n    })\n    emitter.emit(WidgetEvent.RouteSelected, {\n      route: currentRoute,\n      routes: routes!,\n    })\n  }\n\n  const getButtonText = (): string => {\n    if (currentRoute) {\n      switch (mode) {\n        case 'custom':\n          return t(`button.${modeOptions?.custom?.type ?? 'checkout'}Review`)\n        case 'refuel':\n          return t('button.getGas')\n        case 'limit':\n          return t('button.review')\n        default: {\n          const transactionType =\n            currentRoute.fromChainId === currentRoute.toChainId\n              ? 'swap'\n              : 'bridge'\n          return t(`button.${transactionType}Review`)\n        }\n      }\n    }\n    switch (mode) {\n      case 'custom':\n        return modeOptions?.custom?.type === 'deposit'\n          ? t('button.deposit')\n          : t('button.buy')\n      case 'refuel':\n        return t('button.getGas')\n      case 'limit':\n        return t('button.review')\n      case 'split':\n        if (splitState) {\n          return t(`button.${splitState}`)\n        }\n        return t('button.exchange')\n      default:\n        return t('button.exchange')\n    }\n  }\n\n  return (\n    <BaseTransactionButton\n      text={getButtonText()}\n      onClick={handleClick}\n      disabled={currentRoute && requiredToAddress && !toAddress}\n      route={currentRoute}\n      sx={{ flex: 1 }}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,qBAA+B;CAC1C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,gBAAgB;CAChC,MAAM,EAAE,MAAM,gBAAgB,gBAAgB;CAC9C,MAAM,aAAa,aAAa;CAChC,MAAM,EAAE,WAAW,sBAAsB,yBAAyB;CAClE,MAAM,EAAE,QAAQ,uBAAuB,UAAU;CACjD,MAAM,CAAC,mBAAmB,eAAe,iBAAiB;CAK1D,MAAM,gBACH,SAAS,UACN,QAAQ,MAAM,UAAU,MAAM,OAAO,eAAe,IACpD,KAAA,MAAc,SAAS;CAE7B,MAAM,cAAc,YAAY;EAC9B,IAAI,CAAC,cACH;EAGF,mBAAmB,YAAY;EAC/B,SAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,EAAE,SAAS,aAAa,GAAG;EACrC,CAAC;EACD,QAAQ,KAAA,iBAAgC;GACtC,OAAO;GACC;EACV,CAAC;CACH;CAEA,MAAM,sBAA8B;EAClC,IAAI,cACF,QAAQ,MAAR;GACE,KAAK,UACH,OAAO,EAAE,UAAU,aAAa,QAAQ,QAAQ,WAAW,OAAO;GACpE,KAAK,UACH,OAAO,EAAE,eAAe;GAC1B,KAAK,SACH,OAAO,EAAE,eAAe;GAC1B,SAAS;IACP,MAAM,kBACJ,aAAa,gBAAgB,aAAa,YACtC,SACA;IACN,OAAO,EAAE,UAAU,gBAAgB,OAAO;GAC5C;EACF;EAEF,QAAQ,MAAR;GACE,KAAK,UACH,OAAO,aAAa,QAAQ,SAAS,YACjC,EAAE,gBAAgB,IAClB,EAAE,YAAY;GACpB,KAAK,UACH,OAAO,EAAE,eAAe;GAC1B,KAAK,SACH,OAAO,EAAE,eAAe;GAC1B,KAAK;IACH,IAAI,YACF,OAAO,EAAE,UAAU,YAAY;IAEjC,OAAO,EAAE,iBAAiB;GAC5B,SACE,OAAO,EAAE,iBAAiB;EAC9B;CACF;CAEA,OACE,oBAAC,uBAAD;EACE,MAAM,cAAc;EACpB,SAAS;EACT,UAAU,gBAAgB,qBAAqB,CAAC;EAChD,OAAO;EACP,IAAI,EAAE,MAAM,EAAE;CACf,CAAA;AAEL"}

package/dist/esm/pages/RoutePriorityPage.js

@@ -0,0 +1,48 @@
+import { useSettingsActions } from "../stores/settings/useSettingsActions.js";
+import { PageContainer } from "../components/PageContainer.js";
+import { useSettings } from "../stores/settings/useSettings.js";
+import { useHeader } from "../hooks/useHeader.js";
+import { useListHeight } from "../hooks/useListHeight.js";
+import { ListItemText as ListItemText$1 } from "../components/ListItemText.js";
+import { SettingsListItemButton } from "../components/SettingsListItemButton.js";
+import { useRef } from "react";
+import { List } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Check from "@mui/icons-material/Check";
+//#region src/pages/RoutePriorityPage.tsx
+const routePriorities = ["CHEAPEST", "FASTEST"];
+const RoutePriorityPage = () => {
+	const { t } = useTranslation();
+	const { setValue } = useSettingsActions();
+	const { routePriority } = useSettings(["routePriority"]);
+	const listParentRef = useRef(null);
+	const { listHeight } = useListHeight({ listParentRef });
+	useHeader(t("settings.routePriority"));
+	return /* @__PURE__ */ jsx(PageContainer, {
+		disableGutters: true,
+		children: /* @__PURE__ */ jsx(List, {
+			className: "long-list",
+			ref: listParentRef,
+			style: {
+				height: listHeight,
+				overflow: "auto"
+			},
+			sx: { padding: 1.5 },
+			children: routePriorities.map((priority) => {
+				const key = priority.toLowerCase();
+				return /* @__PURE__ */ jsxs(SettingsListItemButton, {
+					onClick: () => setValue("routePriority", priority),
+					children: [/* @__PURE__ */ jsx(ListItemText$1, {
+						primary: t(`settings.routePriorityOptions.${key}.title`),
+						secondary: t(`settings.routePriorityOptions.${key}.description`)
+					}), routePriority === priority && /* @__PURE__ */ jsx(Check, { color: "primary" })]
+				}, priority);
+			})
+		})
+	});
+};
+//#endregion
+export { RoutePriorityPage };
+
+//# sourceMappingURL=RoutePriorityPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RoutePriorityPage.js","names":["ListItemText"],"sources":["../../../src/pages/RoutePriorityPage.tsx"],"sourcesContent":["import type { Order } from '@lifi/sdk'\nimport Check from '@mui/icons-material/Check'\nimport { List } from '@mui/material'\nimport { useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ListItemText } from '../components/ListItemText.js'\nimport { PageContainer } from '../components/PageContainer.js'\nimport { SettingsListItemButton } from '../components/SettingsListItemButton.js'\nimport { useHeader } from '../hooks/useHeader.js'\nimport { useListHeight } from '../hooks/useListHeight.js'\nimport { useSettings } from '../stores/settings/useSettings.js'\nimport { useSettingsActions } from '../stores/settings/useSettingsActions.js'\n\nconst routePriorities: Order[] = ['CHEAPEST', 'FASTEST']\n\nexport const RoutePriorityPage: React.FC = () => {\n  const { t } = useTranslation()\n  const { setValue } = useSettingsActions()\n  const { routePriority } = useSettings(['routePriority'])\n  const listParentRef = useRef<HTMLUListElement | null>(null)\n  const { listHeight } = useListHeight({ listParentRef })\n\n  useHeader(t('settings.routePriority'))\n\n  return (\n    <PageContainer disableGutters>\n      <List\n        className=\"long-list\"\n        ref={listParentRef}\n        style={{ height: listHeight, overflow: 'auto' }}\n        sx={{\n          padding: 1.5,\n        }}\n      >\n        {routePriorities.map((priority) => {\n          const key = priority.toLowerCase()\n          return (\n            <SettingsListItemButton\n              key={priority}\n              onClick={() => setValue('routePriority', priority)}\n            >\n              <ListItemText\n                primary={t(`settings.routePriorityOptions.${key}.title` as any)}\n                secondary={t(\n                  `settings.routePriorityOptions.${key}.description` as any\n                )}\n              />\n              {routePriority === priority && <Check color=\"primary\" />}\n            </SettingsListItemButton>\n          )\n        })}\n      </List>\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,kBAA2B,CAAC,YAAY,SAAS;AAEvD,MAAa,0BAAoC;CAC/C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,aAAa,mBAAmB;CACxC,MAAM,EAAE,kBAAkB,YAAY,CAAC,eAAe,CAAC;CACvD,MAAM,gBAAgB,OAAgC,IAAI;CAC1D,MAAM,EAAE,eAAe,cAAc,EAAE,cAAc,CAAC;CAEtD,UAAU,EAAE,wBAAwB,CAAC;CAErC,OACE,oBAAC,eAAD;EAAe,gBAAA;YACb,oBAAC,MAAD;GACE,WAAU;GACV,KAAK;GACL,OAAO;IAAE,QAAQ;IAAY,UAAU;GAAO;GAC9C,IAAI,EACF,SAAS,IACX;aAEC,gBAAgB,KAAK,aAAa;IACjC,MAAM,MAAM,SAAS,YAAY;IACjC,OACE,qBAAC,wBAAD;KAEE,eAAe,SAAS,iBAAiB,QAAQ;eAFnD,CAIE,oBAACA,gBAAD;MACE,SAAS,EAAE,iCAAiC,IAAI,OAAc;MAC9D,WAAW,EACT,iCAAiC,IAAI,aACvC;KACD,CAAA,GACA,kBAAkB,YAAY,oBAAC,OAAD,EAAO,OAAM,UAAW,CAAA,CACjC;OAVjB,QAUiB;GAE5B,CAAC;EACG,CAAA;CACO,CAAA;AAEnB"}

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

@@ -7,12 +7,12 @@ import { BadgedValue } from "./SettingsCard/BadgedValue.js";
 import { useNavigate } from "@tanstack/react-router";
 import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
+import SwapHorizIcon from "@mui/icons-material/SwapHoriz";
 import AirlineStops from "@mui/icons-material/AirlineStops";
-import SwapHoriz from "@mui/icons-material/SwapHoriz";
 //#region src/pages/SettingsPage/BridgeAndExchangeSettings.tsx
 const supportedIcons = {
 	Bridges: AirlineStops,
-	Exchanges: SwapHoriz
+	Exchanges: SwapHorizIcon
 };
 const BridgeAndExchangeSettings = ({ type }) => {
 	const { isBridgesChanged, isExchangesChanged } = useSettingMonitor();

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

@@ -1 +1 @@
-{"version":3,"file":"BridgeAndExchangeSettings.js","names":[],"sources":["../../../../src/pages/SettingsPage/BridgeAndExchangeSettings.tsx"],"sourcesContent":["import AirlineStops from '@mui/icons-material/AirlineStops'\nimport SwapHoriz from '@mui/icons-material/SwapHoriz'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { CardButton } from '../../components/Card/CardButton.js'\nimport { useSettingMonitor } from '../../hooks/useSettingMonitor.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useSettingsStore } from '../../stores/settings/SettingsStore.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { BadgedValue } from './SettingsCard/BadgedValue.js'\n\nconst supportedIcons = {\n  Bridges: AirlineStops,\n  Exchanges: SwapHoriz,\n}\n\nexport const BridgeAndExchangeSettings: React.FC<{\n  type: 'Bridges' | 'Exchanges'\n}> = ({ type }) => {\n  const { isBridgesChanged, isExchangesChanged } = useSettingMonitor()\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const [enabledTools, tools] = useSettingsStore((state) => {\n    const enabledTools = Object.values(state[`_enabled${type}`])\n    return [enabledTools.filter(Boolean).length, enabledTools.length]\n  })\n\n  const { hiddenUI } = useWidgetConfig()\n\n  if (type === 'Bridges' && hiddenUI?.bridgesSettings) {\n    return null\n  }\n\n  const customisationLookUp = {\n    Bridges: isBridgesChanged,\n    Exchanges: isExchangesChanged,\n  }\n\n  const handleClick = () => {\n    navigate({\n      to: navigationRoutes[type.toLowerCase() as 'bridges' | 'exchanges'],\n    })\n  }\n\n  const Icon = supportedIcons[type]\n\n  return (\n    <CardButton\n      onClick={handleClick}\n      icon={<Icon />}\n      title={t(`settings.enabled${type}`)}\n    >\n      <BadgedValue\n        badgeColor=\"info\"\n        showBadge={customisationLookUp[type]}\n      >{`${enabledTools}/${tools}`}</BadgedValue>\n    </CardButton>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAWA,MAAM,iBAAiB;CACrB,SAAS;CACT,WAAW;AACb;AAEA,MAAa,6BAEP,EAAE,WAAW;CACjB,MAAM,EAAE,kBAAkB,uBAAuB,kBAAkB;CACnE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,CAAC,cAAc,SAAS,kBAAkB,UAAU;EACxD,MAAM,eAAe,OAAO,OAAO,MAAM,WAAW,OAAO;EAC3D,OAAO,CAAC,aAAa,OAAO,OAAO,CAAC,CAAC,QAAQ,aAAa,MAAM;CAClE,CAAC;CAED,MAAM,EAAE,aAAa,gBAAgB;CAErC,IAAI,SAAS,aAAa,UAAU,iBAClC,OAAO;CAGT,MAAM,sBAAsB;EAC1B,SAAS;EACT,WAAW;CACb;CAEA,MAAM,oBAAoB;EACxB,SAAS,EACP,IAAI,iBAAiB,KAAK,YAAY,GACxC,CAAC;CACH;CAEA,MAAM,OAAO,eAAe;CAE5B,OACE,oBAAC,YAAD;EACE,SAAS;EACT,MAAM,oBAAC,MAAD,CAAO,CAAA;EACb,OAAO,EAAE,mBAAmB,MAAM;YAElC,oBAAC,aAAD;GACE,YAAW;GACX,WAAW,oBAAoB;aAC/B,GAAG,aAAa,GAAG;EAAqB,CAAA;CAChC,CAAA;AAEhB"}
+{"version":3,"file":"BridgeAndExchangeSettings.js","names":["SwapHoriz"],"sources":["../../../../src/pages/SettingsPage/BridgeAndExchangeSettings.tsx"],"sourcesContent":["import AirlineStops from '@mui/icons-material/AirlineStops'\nimport SwapHoriz from '@mui/icons-material/SwapHoriz'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { CardButton } from '../../components/Card/CardButton.js'\nimport { useSettingMonitor } from '../../hooks/useSettingMonitor.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useSettingsStore } from '../../stores/settings/SettingsStore.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { BadgedValue } from './SettingsCard/BadgedValue.js'\n\nconst supportedIcons = {\n  Bridges: AirlineStops,\n  Exchanges: SwapHoriz,\n}\n\nexport const BridgeAndExchangeSettings: React.FC<{\n  type: 'Bridges' | 'Exchanges'\n}> = ({ type }) => {\n  const { isBridgesChanged, isExchangesChanged } = useSettingMonitor()\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const [enabledTools, tools] = useSettingsStore((state) => {\n    const enabledTools = Object.values(state[`_enabled${type}`])\n    return [enabledTools.filter(Boolean).length, enabledTools.length]\n  })\n\n  const { hiddenUI } = useWidgetConfig()\n\n  if (type === 'Bridges' && hiddenUI?.bridgesSettings) {\n    return null\n  }\n\n  const customisationLookUp = {\n    Bridges: isBridgesChanged,\n    Exchanges: isExchangesChanged,\n  }\n\n  const handleClick = () => {\n    navigate({\n      to: navigationRoutes[type.toLowerCase() as 'bridges' | 'exchanges'],\n    })\n  }\n\n  const Icon = supportedIcons[type]\n\n  return (\n    <CardButton\n      onClick={handleClick}\n      icon={<Icon />}\n      title={t(`settings.enabled${type}`)}\n    >\n      <BadgedValue\n        badgeColor=\"info\"\n        showBadge={customisationLookUp[type]}\n      >{`${enabledTools}/${tools}`}</BadgedValue>\n    </CardButton>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAWA,MAAM,iBAAiB;CACrB,SAAS;CACT,WAAWA;AACb;AAEA,MAAa,6BAEP,EAAE,WAAW;CACjB,MAAM,EAAE,kBAAkB,uBAAuB,kBAAkB;CACnE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,CAAC,cAAc,SAAS,kBAAkB,UAAU;EACxD,MAAM,eAAe,OAAO,OAAO,MAAM,WAAW,OAAO;EAC3D,OAAO,CAAC,aAAa,OAAO,OAAO,CAAC,CAAC,QAAQ,aAAa,MAAM;CAClE,CAAC;CAED,MAAM,EAAE,aAAa,gBAAgB;CAErC,IAAI,SAAS,aAAa,UAAU,iBAClC,OAAO;CAGT,MAAM,sBAAsB;EAC1B,SAAS;EACT,WAAW;CACb;CAEA,MAAM,oBAAoB;EACxB,SAAS,EACP,IAAI,iBAAiB,KAAK,YAAY,GACxC,CAAC;CACH;CAEA,MAAM,OAAO,eAAe;CAE5B,OACE,oBAAC,YAAD;EACE,SAAS;EACT,MAAM,oBAAC,MAAD,CAAO,CAAA;EACb,OAAO,EAAE,mBAAmB,MAAM;YAElC,oBAAC,aAAD;GACE,YAAW;GACX,WAAW,oBAAoB;aAC/B,GAAG,aAAa,GAAG;EAAqB,CAAA;CAChC,CAAA;AAEhB"}

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

@@ -1,44 +1,29 @@
-import { useSettingsActions } from "../../stores/settings/useSettingsActions.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
 import { useSettings } from "../../stores/settings/useSettings.js";
-import { CardTabs, Tab } from "../../components/Tabs/Tabs.style.js";
 import { useSettingMonitor } from "../../hooks/useSettingMonitor.js";
+import { CardButton } from "../../components/Card/CardButton.js";
 import { BadgedValue } from "./SettingsCard/BadgedValue.js";
-import { SettingCardExpandable } from "./SettingsCard/SettingCardExpandable.js";
+import { useNavigate } from "@tanstack/react-router";
 import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import Route from "@mui/icons-material/Route";
 //#region src/pages/SettingsPage/RoutePrioritySettings.tsx
-const Priorities = ["CHEAPEST", "FASTEST"];
 const RoutePrioritySettings = () => {
 	const { t } = useTranslation();
-	const { setValue } = useSettingsActions();
+	const navigate = useNavigate();
 	const { isRoutePriorityChanged } = useSettingMonitor();
 	const { routePriority } = useSettings(["routePriority"]);
-	const currentRoutePriority = routePriority ?? "";
-	const handleRoutePriorityChange = (_, routePriority) => {
-		setValue("routePriority", routePriority);
+	const handleClick = () => {
+		navigate({ to: navigationRoutes.routePriority });
 	};
-	return /* @__PURE__ */ jsx(SettingCardExpandable, {
-		value: /* @__PURE__ */ jsx(BadgedValue, {
-			badgeColor: "info",
-			showBadge: isRoutePriorityChanged,
-			children: t(`main.tags.${currentRoutePriority.toLowerCase()}`)
-		}),
+	return /* @__PURE__ */ jsx(CardButton, {
+		onClick: handleClick,
 		icon: /* @__PURE__ */ jsx(Route, {}),
 		title: t("settings.routePriority"),
-		children: /* @__PURE__ */ jsx(CardTabs, {
-			value: currentRoutePriority,
-			"aria-label": "tabs",
-			indicatorColor: "primary",
-			onChange: handleRoutePriorityChange,
-			sx: { mt: 1.5 },
-			children: Priorities.map((priority) => {
-				return /* @__PURE__ */ jsx(Tab, {
-					label: t(`main.tags.${priority.toLowerCase()}`),
-					value: priority,
-					disableRipple: true
-				}, priority);
-			})
+		children: /* @__PURE__ */ jsx(BadgedValue, {
+			badgeColor: "info",
+			showBadge: isRoutePriorityChanged,
+			children: routePriority === "FASTEST" ? t("settings.routePriorityOptions.fastest.title") : t("settings.routePriorityOptions.cheapest.title")
 		})
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"RoutePrioritySettings.js","names":[],"sources":["../../../../src/pages/SettingsPage/RoutePrioritySettings.tsx"],"sourcesContent":["import type { Order } from '@lifi/sdk'\nimport Route from '@mui/icons-material/Route'\nimport { useTranslation } from 'react-i18next'\nimport { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js'\nimport { useSettingMonitor } from '../../hooks/useSettingMonitor.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { useSettingsActions } from '../../stores/settings/useSettingsActions.js'\nimport { BadgedValue } from './SettingsCard/BadgedValue.js'\nimport { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js'\n\nconst Priorities: Order[] = ['CHEAPEST', 'FASTEST']\n\nexport const RoutePrioritySettings: React.FC = () => {\n  const { t } = useTranslation()\n  const { setValue } = useSettingsActions()\n  const { isRoutePriorityChanged } = useSettingMonitor()\n  const { routePriority } = useSettings(['routePriority'])\n  const currentRoutePriority = routePriority ?? ''\n\n  const handleRoutePriorityChange = (\n    _: React.SyntheticEvent,\n    routePriority: Order\n  ) => {\n    setValue('routePriority', routePriority)\n  }\n\n  return (\n    <SettingCardExpandable\n      value={\n        <BadgedValue badgeColor=\"info\" showBadge={isRoutePriorityChanged}>\n          {t(`main.tags.${currentRoutePriority.toLowerCase()}` as any)}\n        </BadgedValue>\n      }\n      icon={<Route />}\n      title={t('settings.routePriority')}\n    >\n      <CardTabs\n        value={currentRoutePriority}\n        aria-label=\"tabs\"\n        indicatorColor=\"primary\"\n        onChange={handleRoutePriorityChange}\n        sx={{ mt: 1.5 }}\n      >\n        {Priorities.map((priority) => {\n          return (\n            <Tab\n              key={priority}\n              label={t(`main.tags.${priority.toLowerCase()}` as any)}\n              value={priority}\n              disableRipple\n            />\n          )\n        })}\n      </CardTabs>\n    </SettingCardExpandable>\n  )\n}\n"],"mappings":";;;;;;;;;;AAUA,MAAM,aAAsB,CAAC,YAAY,SAAS;AAElD,MAAa,8BAAwC;CACnD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,aAAa,mBAAmB;CACxC,MAAM,EAAE,2BAA2B,kBAAkB;CACrD,MAAM,EAAE,kBAAkB,YAAY,CAAC,eAAe,CAAC;CACvD,MAAM,uBAAuB,iBAAiB;CAE9C,MAAM,6BACJ,GACA,kBACG;EACH,SAAS,iBAAiB,aAAa;CACzC;CAEA,OACE,oBAAC,uBAAD;EACE,OACE,oBAAC,aAAD;GAAa,YAAW;GAAO,WAAW;aACvC,EAAE,aAAa,qBAAqB,YAAY,GAAU;EAChD,CAAA;EAEf,MAAM,oBAAC,OAAD,CAAQ,CAAA;EACd,OAAO,EAAE,wBAAwB;YAEjC,oBAAC,UAAD;GACE,OAAO;GACP,cAAW;GACX,gBAAe;GACf,UAAU;GACV,IAAI,EAAE,IAAI,IAAI;aAEb,WAAW,KAAK,aAAa;IAC5B,OACE,oBAAC,KAAD;KAEE,OAAO,EAAE,aAAa,SAAS,YAAY,GAAU;KACrD,OAAO;KACP,eAAA;IACD,GAJM,QAIN;GAEL,CAAC;EACO,CAAA;CACW,CAAA;AAE3B"}
+{"version":3,"file":"RoutePrioritySettings.js","names":[],"sources":["../../../../src/pages/SettingsPage/RoutePrioritySettings.tsx"],"sourcesContent":["import Route from '@mui/icons-material/Route'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { CardButton } from '../../components/Card/CardButton.js'\nimport { useSettingMonitor } from '../../hooks/useSettingMonitor.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { BadgedValue } from './SettingsCard/BadgedValue.js'\n\nexport const RoutePrioritySettings: React.FC = () => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { isRoutePriorityChanged } = useSettingMonitor()\n  const { routePriority } = useSettings(['routePriority'])\n\n  const handleClick = () => {\n    navigate({ to: navigationRoutes.routePriority })\n  }\n\n  return (\n    <CardButton\n      onClick={handleClick}\n      icon={<Route />}\n      title={t('settings.routePriority')}\n    >\n      <BadgedValue badgeColor=\"info\" showBadge={isRoutePriorityChanged}>\n        {routePriority === 'FASTEST'\n          ? t('settings.routePriorityOptions.fastest.title')\n          : t('settings.routePriorityOptions.cheapest.title')}\n      </BadgedValue>\n    </CardButton>\n  )\n}\n"],"mappings":";;;;;;;;;;AASA,MAAa,8BAAwC;CACnD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,2BAA2B,kBAAkB;CACrD,MAAM,EAAE,kBAAkB,YAAY,CAAC,eAAe,CAAC;CAEvD,MAAM,oBAAoB;EACxB,SAAS,EAAE,IAAI,iBAAiB,cAAc,CAAC;CACjD;CAEA,OACE,oBAAC,YAAD;EACE,SAAS;EACT,MAAM,oBAAC,OAAD,CAAQ,CAAA;EACd,OAAO,EAAE,wBAAwB;YAEjC,oBAAC,aAAD;GAAa,YAAW;GAAO,WAAW;aACvC,kBAAkB,YACf,EAAE,6CAA6C,IAC/C,EAAE,8CAA8C;EACzC,CAAA;CACH,CAAA;AAEhB"}

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

@@ -0,0 +1,133 @@
+import { useSettingsActions } from "../../../stores/settings/useSettingsActions.js";
+import { formatInputAmount, formatSlippage } from "../../../utils/format.js";
+import { PageContainer } from "../../../components/PageContainer.js";
+import { useSettings } from "../../../stores/settings/useSettings.js";
+import { useSettingMonitor } from "../../../hooks/useSettingMonitor.js";
+import { useHeader } from "../../../hooks/useHeader.js";
+import { useListHeight } from "../../../hooks/useListHeight.js";
+import { ListItemText as ListItemText$1 } from "../../../components/ListItemText.js";
+import { SettingsListItemButton } from "../../../components/SettingsListItemButton.js";
+import { SlippageClearButton, SlippageInput, SlippageLimitsWarningContainer } from "./SlippageSettings.style.js";
+import { useRef, useState } from "react";
+import { Box, Collapse, List, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import CloseRounded from "@mui/icons-material/CloseRounded";
+import WarningRounded from "@mui/icons-material/WarningRounded";
+import Check from "@mui/icons-material/Check";
+//#region src/pages/SettingsPage/SlippageSettings/SlippagePage.tsx
+const slippagePresets = ["0.5", "1"];
+const maxFractionDigits = 5;
+const SlippagePage = () => {
+	const { t } = useTranslation();
+	const { isSlippageNotRecommended, isSlippageUnderRecommendedLimits, isSlippageOutsideRecommendedLimits } = useSettingMonitor();
+	const { slippage } = useSettings(["slippage"]);
+	const { setValue } = useSettingsActions();
+	const defaultValue = useRef(slippage);
+	const listParentRef = useRef(null);
+	const { listHeight } = useListHeight({ listParentRef });
+	useHeader(t("settings.slippage"));
+	const isAuto = !slippage || slippage === void 0;
+	const isPreset = !!slippage && slippagePresets.includes(slippage);
+	const isCustom = !isAuto && !isPreset;
+	const [customMode, setCustomMode] = useState(isCustom);
+	const [inputValue, setInputValue] = useState(isCustom ? slippage ?? "" : "");
+	const handleAuto = () => {
+		setCustomMode(false);
+		setInputValue("");
+		setValue("slippage", void 0);
+	};
+	const handlePreset = (preset) => {
+		setCustomMode(false);
+		setValue("slippage", preset);
+	};
+	const handleCustom = () => {
+		setCustomMode(true);
+		const initialValue = slippage || "";
+		if (initialValue) {
+			setInputValue(initialValue);
+			setValue("slippage", initialValue);
+		}
+	};
+	const formatAndSetSlippage = (value, returnInitial = false) => {
+		const formattedSlippage = formatSlippage(value, defaultValue.current, returnInitial);
+		const formattedValue = Number(formattedSlippage) === 0 && !returnInitial ? "0" : formatInputAmount(formattedSlippage, maxFractionDigits, returnInitial);
+		const maxLength = Number(formattedValue) < 10 ? 7 : 8;
+		const slicedValue = formattedValue.slice(0, maxLength);
+		setInputValue(slicedValue);
+		setValue("slippage", slicedValue.length ? slicedValue : void 0);
+	};
+	const handleInputUpdate = (event) => {
+		formatAndSetSlippage(event.target.value, true);
+	};
+	const handleInputFocus = (event) => {
+		formatAndSetSlippage(event.target.value);
+	};
+	const handleInputBlur = (event) => {
+		formatAndSetSlippage(event.target.value);
+	};
+	const slippageWarningText = isSlippageOutsideRecommendedLimits ? t("warning.message.slippageOutsideRecommendedLimits") : isSlippageUnderRecommendedLimits ? t("warning.message.slippageUnderRecommendedLimits") : "";
+	return /* @__PURE__ */ jsx(PageContainer, {
+		disableGutters: true,
+		children: /* @__PURE__ */ jsxs(List, {
+			className: "long-list",
+			ref: listParentRef,
+			style: {
+				height: listHeight,
+				overflow: "auto"
+			},
+			sx: { padding: 1.5 },
+			children: [
+				/* @__PURE__ */ jsxs(SettingsListItemButton, {
+					onClick: handleAuto,
+					children: [/* @__PURE__ */ jsx(ListItemText$1, {
+						primary: t("button.auto"),
+						secondary: t("settings.slippageAutoDescription")
+					}), !customMode && isAuto && /* @__PURE__ */ jsx(Check, { color: "primary" })]
+				}),
+				slippagePresets.map((preset) => /* @__PURE__ */ jsxs(SettingsListItemButton, {
+					onClick: () => handlePreset(preset),
+					children: [/* @__PURE__ */ jsx(ListItemText$1, { primary: `${preset}%` }), !customMode && slippage === preset && /* @__PURE__ */ jsx(Check, { color: "primary" })]
+				}, preset)),
+				/* @__PURE__ */ jsxs(SettingsListItemButton, {
+					onClick: handleCustom,
+					children: [/* @__PURE__ */ jsx(ListItemText$1, { primary: t("settings.custom") }), customMode && /* @__PURE__ */ jsx(Check, { color: "primary" })]
+				}),
+				/* @__PURE__ */ jsx(Collapse, {
+					in: customMode,
+					children: /* @__PURE__ */ jsxs(Box, {
+						sx: {
+							px: 1.5,
+							pt: 1
+						},
+						children: [/* @__PURE__ */ jsx(SlippageInput, {
+							placeholder: "0.5",
+							inputProps: { inputMode: "decimal" },
+							value: inputValue,
+							onChange: handleInputUpdate,
+							onFocus: handleInputFocus,
+							onBlur: handleInputBlur,
+							autoComplete: "off",
+							endAdornment: !isAuto && /* @__PURE__ */ jsx(SlippageClearButton, {
+								size: "small",
+								onClick: handleAuto,
+								"aria-label": "Clear",
+								children: /* @__PURE__ */ jsx(CloseRounded, { fontSize: "small" })
+							})
+						}), isSlippageNotRecommended && /* @__PURE__ */ jsxs(SlippageLimitsWarningContainer, { children: [/* @__PURE__ */ jsx(WarningRounded, { color: "warning" }), /* @__PURE__ */ jsx(Typography, {
+							sx: {
+								fontSize: 13,
+								fontWeight: 400
+							},
+							children: slippageWarningText
+						})] })]
+					})
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { SlippagePage };
+
+//# sourceMappingURL=SlippagePage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SlippagePage.js","names":["ListItemText"],"sources":["../../../../../src/pages/SettingsPage/SlippageSettings/SlippagePage.tsx"],"sourcesContent":["import Check from '@mui/icons-material/Check'\nimport CloseRounded from '@mui/icons-material/CloseRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Collapse, List, Typography } from '@mui/material'\nimport type { ChangeEventHandler, FocusEventHandler } from 'react'\nimport { useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ListItemText } from '../../../components/ListItemText.js'\nimport { PageContainer } from '../../../components/PageContainer.js'\nimport { SettingsListItemButton } from '../../../components/SettingsListItemButton.js'\nimport { useHeader } from '../../../hooks/useHeader.js'\nimport { useListHeight } from '../../../hooks/useListHeight.js'\nimport { useSettingMonitor } from '../../../hooks/useSettingMonitor.js'\nimport { defaultSlippage } from '../../../stores/settings/createSettingsStore.js'\nimport { useSettings } from '../../../stores/settings/useSettings.js'\nimport { useSettingsActions } from '../../../stores/settings/useSettingsActions.js'\nimport { formatInputAmount, formatSlippage } from '../../../utils/format.js'\nimport {\n  SlippageClearButton,\n  SlippageInput,\n  SlippageLimitsWarningContainer,\n} from './SlippageSettings.style.js'\n\nconst slippagePresets = ['0.5', '1']\nconst maxFractionDigits = 5\n\nexport const SlippagePage: React.FC = () => {\n  const { t } = useTranslation()\n  const {\n    isSlippageNotRecommended,\n    isSlippageUnderRecommendedLimits,\n    isSlippageOutsideRecommendedLimits,\n  } = useSettingMonitor()\n  const { slippage } = useSettings(['slippage'])\n  const { setValue } = useSettingsActions()\n  const defaultValue = useRef(slippage)\n  const listParentRef = useRef<HTMLUListElement | null>(null)\n  const { listHeight } = useListHeight({ listParentRef })\n\n  useHeader(t('settings.slippage'))\n\n  const isAuto = !slippage || slippage === defaultSlippage\n  const isPreset = !!slippage && slippagePresets.includes(slippage)\n  const isCustom = !isAuto && !isPreset\n\n  const [customMode, setCustomMode] = useState(isCustom)\n  const [inputValue, setInputValue] = useState(isCustom ? (slippage ?? '') : '')\n\n  const handleAuto = () => {\n    setCustomMode(false)\n    setInputValue('')\n    setValue('slippage', defaultSlippage)\n  }\n\n  const handlePreset = (preset: string) => {\n    setCustomMode(false)\n    setValue('slippage', preset)\n  }\n\n  const handleCustom = () => {\n    setCustomMode(true)\n    const initialValue = slippage || ''\n    if (initialValue) {\n      setInputValue(initialValue)\n      setValue('slippage', initialValue)\n    }\n  }\n\n  const formatAndSetSlippage = (value: string, returnInitial = false) => {\n    const formattedSlippage = formatSlippage(\n      value,\n      defaultValue.current,\n      returnInitial\n    )\n    const formattedValue =\n      Number(formattedSlippage) === 0 && !returnInitial\n        ? '0'\n        : formatInputAmount(formattedSlippage, maxFractionDigits, returnInitial)\n    const maxLength =\n      Number(formattedValue) < 10\n        ? maxFractionDigits + 2\n        : maxFractionDigits + 3\n    const slicedValue = formattedValue.slice(0, maxLength)\n    setInputValue(slicedValue)\n    setValue('slippage', slicedValue.length ? slicedValue : defaultSlippage)\n  }\n\n  const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = (event) => {\n    formatAndSetSlippage(event.target.value, true)\n  }\n\n  const handleInputFocus: FocusEventHandler<HTMLInputElement> = (event) => {\n    formatAndSetSlippage(event.target.value)\n  }\n\n  const handleInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    formatAndSetSlippage(event.target.value)\n  }\n\n  const slippageWarningText = isSlippageOutsideRecommendedLimits\n    ? t('warning.message.slippageOutsideRecommendedLimits')\n    : isSlippageUnderRecommendedLimits\n      ? t('warning.message.slippageUnderRecommendedLimits')\n      : ''\n\n  return (\n    <PageContainer disableGutters>\n      <List\n        className=\"long-list\"\n        ref={listParentRef}\n        style={{ height: listHeight, overflow: 'auto' }}\n        sx={{\n          padding: 1.5,\n        }}\n      >\n        <SettingsListItemButton onClick={handleAuto}>\n          <ListItemText\n            primary={t('button.auto')}\n            secondary={t('settings.slippageAutoDescription')}\n          />\n          {!customMode && isAuto && <Check color=\"primary\" />}\n        </SettingsListItemButton>\n        {slippagePresets.map((preset) => (\n          <SettingsListItemButton\n            key={preset}\n            onClick={() => handlePreset(preset)}\n          >\n            <ListItemText primary={`${preset}%`} />\n            {!customMode && slippage === preset && <Check color=\"primary\" />}\n          </SettingsListItemButton>\n        ))}\n        <SettingsListItemButton onClick={handleCustom}>\n          <ListItemText primary={t('settings.custom')} />\n          {customMode && <Check color=\"primary\" />}\n        </SettingsListItemButton>\n        <Collapse in={customMode}>\n          <Box sx={{ px: 1.5, pt: 1 }}>\n            <SlippageInput\n              placeholder=\"0.5\"\n              inputProps={{ inputMode: 'decimal' }}\n              value={inputValue}\n              onChange={handleInputUpdate}\n              onFocus={handleInputFocus}\n              onBlur={handleInputBlur}\n              autoComplete=\"off\"\n              endAdornment={\n                !isAuto && (\n                  <SlippageClearButton\n                    size=\"small\"\n                    onClick={handleAuto}\n                    aria-label=\"Clear\"\n                  >\n                    <CloseRounded fontSize=\"small\" />\n                  </SlippageClearButton>\n                )\n              }\n            />\n            {isSlippageNotRecommended && (\n              <SlippageLimitsWarningContainer>\n                <WarningRounded color=\"warning\" />\n                <Typography\n                  sx={{\n                    fontSize: 13,\n                    fontWeight: 400,\n                  }}\n                >\n                  {slippageWarningText}\n                </Typography>\n              </SlippageLimitsWarningContainer>\n            )}\n          </Box>\n        </Collapse>\n      </List>\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuBA,MAAM,kBAAkB,CAAC,OAAO,GAAG;AACnC,MAAM,oBAAoB;AAE1B,MAAa,qBAA+B;CAC1C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EACJ,0BACA,kCACA,uCACE,kBAAkB;CACtB,MAAM,EAAE,aAAa,YAAY,CAAC,UAAU,CAAC;CAC7C,MAAM,EAAE,aAAa,mBAAmB;CACxC,MAAM,eAAe,OAAO,QAAQ;CACpC,MAAM,gBAAgB,OAAgC,IAAI;CAC1D,MAAM,EAAE,eAAe,cAAc,EAAE,cAAc,CAAC;CAEtD,UAAU,EAAE,mBAAmB,CAAC;CAEhC,MAAM,SAAS,CAAC,YAAY,aAAA,KAAA;CAC5B,MAAM,WAAW,CAAC,CAAC,YAAY,gBAAgB,SAAS,QAAQ;CAChE,MAAM,WAAW,CAAC,UAAU,CAAC;CAE7B,MAAM,CAAC,YAAY,iBAAiB,SAAS,QAAQ;CACrD,MAAM,CAAC,YAAY,iBAAiB,SAAS,WAAY,YAAY,KAAM,EAAE;CAE7E,MAAM,mBAAmB;EACvB,cAAc,KAAK;EACnB,cAAc,EAAE;EAChB,SAAS,YAAA,KAAA,CAA2B;CACtC;CAEA,MAAM,gBAAgB,WAAmB;EACvC,cAAc,KAAK;EACnB,SAAS,YAAY,MAAM;CAC7B;CAEA,MAAM,qBAAqB;EACzB,cAAc,IAAI;EAClB,MAAM,eAAe,YAAY;EACjC,IAAI,cAAc;GAChB,cAAc,YAAY;GAC1B,SAAS,YAAY,YAAY;EACnC;CACF;CAEA,MAAM,wBAAwB,OAAe,gBAAgB,UAAU;EACrE,MAAM,oBAAoB,eACxB,OACA,aAAa,SACb,aACF;EACA,MAAM,iBACJ,OAAO,iBAAiB,MAAM,KAAK,CAAC,gBAChC,MACA,kBAAkB,mBAAmB,mBAAmB,aAAa;EAC3E,MAAM,YACJ,OAAO,cAAc,IAAI,KACrB,IACA;EACN,MAAM,cAAc,eAAe,MAAM,GAAG,SAAS;EACrD,cAAc,WAAW;EACzB,SAAS,YAAY,YAAY,SAAS,cAAA,KAAA,CAA6B;CACzE;CAEA,MAAM,qBAA2D,UAAU;EACzE,qBAAqB,MAAM,OAAO,OAAO,IAAI;CAC/C;CAEA,MAAM,oBAAyD,UAAU;EACvE,qBAAqB,MAAM,OAAO,KAAK;CACzC;CAEA,MAAM,mBAAwD,UAAU;EACtE,qBAAqB,MAAM,OAAO,KAAK;CACzC;CAEA,MAAM,sBAAsB,qCACxB,EAAE,kDAAkD,IACpD,mCACE,EAAE,gDAAgD,IAClD;CAEN,OACE,oBAAC,eAAD;EAAe,gBAAA;YACb,qBAAC,MAAD;GACE,WAAU;GACV,KAAK;GACL,OAAO;IAAE,QAAQ;IAAY,UAAU;GAAO;GAC9C,IAAI,EACF,SAAS,IACX;aANF;IAQE,qBAAC,wBAAD;KAAwB,SAAS;eAAjC,CACE,oBAACA,gBAAD;MACE,SAAS,EAAE,aAAa;MACxB,WAAW,EAAE,kCAAkC;KAChD,CAAA,GACA,CAAC,cAAc,UAAU,oBAAC,OAAD,EAAO,OAAM,UAAW,CAAA,CAC5B;;IACvB,gBAAgB,KAAK,WACpB,qBAAC,wBAAD;KAEE,eAAe,aAAa,MAAM;eAFpC,CAIE,oBAACA,gBAAD,EAAc,SAAS,GAAG,OAAO,GAAK,CAAA,GACrC,CAAC,cAAc,aAAa,UAAU,oBAAC,OAAD,EAAO,OAAM,UAAW,CAAA,CACzC;OALjB,MAKiB,CACzB;IACD,qBAAC,wBAAD;KAAwB,SAAS;eAAjC,CACE,oBAACA,gBAAD,EAAc,SAAS,EAAE,iBAAiB,EAAI,CAAA,GAC7C,cAAc,oBAAC,OAAD,EAAO,OAAM,UAAW,CAAA,CACjB;;IACxB,oBAAC,UAAD;KAAU,IAAI;eACZ,qBAAC,KAAD;MAAK,IAAI;OAAE,IAAI;OAAK,IAAI;MAAE;gBAA1B,CACE,oBAAC,eAAD;OACE,aAAY;OACZ,YAAY,EAAE,WAAW,UAAU;OACnC,OAAO;OACP,UAAU;OACV,SAAS;OACT,QAAQ;OACR,cAAa;OACb,cACE,CAAC,UACC,oBAAC,qBAAD;QACE,MAAK;QACL,SAAS;QACT,cAAW;kBAEX,oBAAC,cAAD,EAAc,UAAS,QAAS,CAAA;OACb,CAAA;MAG1B,CAAA,GACA,4BACC,qBAAC,gCAAD,EAAA,UAAA,CACE,oBAAC,gBAAD,EAAgB,OAAM,UAAW,CAAA,GACjC,oBAAC,YAAD;OACE,IAAI;QACF,UAAU;QACV,YAAY;OACd;iBAEC;MACS,CAAA,CACkB,EAAA,CAAA,CAE/B;;IACG,CAAA;GACN;;CACO,CAAA;AAEnB"}

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

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

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

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

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

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

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

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