@lifi/widget 0.0.0-preview-6cc63bac

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

@@ -0,0 +1,49 @@
+import { useSettingsStore } from "../../stores/settings/SettingsStore.js";
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { useSettingMonitor } from "../../hooks/useSettingMonitor.js";
+import { CardButton } from "../../components/Card/CardButton.js";
+import { BadgedValue } from "./SettingsCard/BadgedValue.js";
+import { useNavigate } from "@tanstack/react-router";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+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
+};
+const BridgeAndExchangeSettings = ({ type }) => {
+	const { isBridgesChanged, isExchangesChanged } = useSettingMonitor();
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const [enabledTools, tools] = useSettingsStore((state) => {
+		const enabledTools = Object.values(state[`_enabled${type}`]);
+		return [enabledTools.filter(Boolean).length, enabledTools.length];
+	});
+	const { hiddenUI } = useWidgetConfig();
+	if (type === "Bridges" && hiddenUI?.bridgesSettings) return null;
+	const customisationLookUp = {
+		Bridges: isBridgesChanged,
+		Exchanges: isExchangesChanged
+	};
+	const handleClick = () => {
+		navigate({ to: navigationRoutes[type.toLowerCase()] });
+	};
+	const Icon = supportedIcons[type];
+	return /* @__PURE__ */ jsx(CardButton, {
+		onClick: handleClick,
+		icon: /* @__PURE__ */ jsx(Icon, {}),
+		title: t(`settings.enabled${type}`),
+		children: /* @__PURE__ */ jsx(BadgedValue, {
+			badgeColor: "info",
+			showBadge: customisationLookUp[type],
+			children: `${enabledTools}/${tools}`
+		})
+	});
+};
+//#endregion
+export { BridgeAndExchangeSettings };
+
+//# sourceMappingURL=BridgeAndExchangeSettings.js.map

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

@@ -0,0 +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,EAAE,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/GasPriceSettings.js

@@ -0,0 +1,56 @@
+import { useSettingsActions } from "../../stores/settings/useSettingsActions.js";
+import { useSettings } from "../../stores/settings/useSettings.js";
+import { useSettingMonitor } from "../../hooks/useSettingMonitor.js";
+import { CardTabs, Tab } from "../../components/Tabs/Tabs.style.js";
+import { BadgedValue } from "./SettingsCard/BadgedValue.js";
+import { SettingCardExpandable } from "./SettingsCard/SettingCardExpandable.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import EvStation from "@mui/icons-material/EvStation";
+//#region src/pages/SettingsPage/GasPriceSettings.tsx
+const GasPriceSettings = () => {
+	const { t } = useTranslation();
+	const { setValue } = useSettingsActions();
+	const { isGasPriceChanged } = useSettingMonitor();
+	const { gasPrice } = useSettings(["gasPrice"]);
+	const handleGasPriceChange = (_, gasPrice) => {
+		setValue("gasPrice", gasPrice);
+	};
+	return /* @__PURE__ */ jsx(SettingCardExpandable, {
+		value: /* @__PURE__ */ jsx(BadgedValue, {
+			badgeColor: "info",
+			showBadge: isGasPriceChanged,
+			children: t(`settings.gasPrice.${gasPrice}`)
+		}),
+		icon: /* @__PURE__ */ jsx(EvStation, {}),
+		title: t("settings.gasPrice.title"),
+		children: /* @__PURE__ */ jsxs(CardTabs, {
+			value: gasPrice,
+			"aria-label": "tabs",
+			indicatorColor: "primary",
+			onChange: handleGasPriceChange,
+			sx: { mt: 1.5 },
+			children: [
+				/* @__PURE__ */ jsx(Tab, {
+					label: t("settings.gasPrice.slow"),
+					value: "slow",
+					disableRipple: true
+				}),
+				/* @__PURE__ */ jsx(Tab, {
+					label: t("settings.gasPrice.normal"),
+					value: "normal",
+					disableRipple: true
+				}),
+				/* @__PURE__ */ jsx(Tab, {
+					label: t("settings.gasPrice.fast"),
+					value: "fast",
+					disableRipple: true
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { GasPriceSettings };
+
+//# sourceMappingURL=GasPriceSettings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GasPriceSettings.js","names":[],"sources":["../../../../src/pages/SettingsPage/GasPriceSettings.tsx"],"sourcesContent":["import EvStation from '@mui/icons-material/EvStation'\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\nexport const GasPriceSettings: React.FC = () => {\n  const { t } = useTranslation()\n  const { setValue } = useSettingsActions()\n  const { isGasPriceChanged } = useSettingMonitor()\n  const { gasPrice } = useSettings(['gasPrice'])\n\n  const handleGasPriceChange = (_: React.SyntheticEvent, gasPrice: string) => {\n    setValue('gasPrice', gasPrice)\n  }\n\n  return (\n    <SettingCardExpandable\n      value={\n        <BadgedValue badgeColor=\"info\" showBadge={isGasPriceChanged}>\n          {t(`settings.gasPrice.${gasPrice}` as any)}\n        </BadgedValue>\n      }\n      icon={<EvStation />}\n      title={t('settings.gasPrice.title')}\n    >\n      <CardTabs\n        value={gasPrice}\n        aria-label=\"tabs\"\n        indicatorColor=\"primary\"\n        onChange={handleGasPriceChange}\n        sx={{ mt: 1.5 }}\n      >\n        <Tab label={t('settings.gasPrice.slow')} value=\"slow\" disableRipple />\n        <Tab\n          label={t('settings.gasPrice.normal')}\n          value=\"normal\"\n          disableRipple\n        />\n        <Tab label={t('settings.gasPrice.fast')} value=\"fast\" disableRipple />\n      </CardTabs>\n    </SettingCardExpandable>\n  )\n}\n"],"mappings":";;;;;;;;;;AASA,MAAa,yBAAmC;CAC9C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,aAAa,mBAAmB;CACxC,MAAM,EAAE,sBAAsB,kBAAkB;CAChD,MAAM,EAAE,aAAa,YAAY,CAAC,UAAU,CAAC;CAE7C,MAAM,wBAAwB,GAAyB,aAAqB;EAC1E,SAAS,YAAY,QAAQ;CAC/B;CAEA,OACE,oBAAC,uBAAD;EACE,OACE,oBAAC,aAAD;GAAa,YAAW;GAAO,WAAW;aACvC,EAAE,qBAAqB,UAAiB;EAC9B,CAAA;EAEf,MAAM,oBAAC,WAAD,CAAY,CAAA;EAClB,OAAO,EAAE,yBAAyB;YAElC,qBAAC,UAAD;GACE,OAAO;GACP,cAAW;GACX,gBAAe;GACf,UAAU;GACV,IAAI,EAAE,IAAI,IAAI;aALhB;IAOE,oBAAC,KAAD;KAAK,OAAO,EAAE,wBAAwB;KAAG,OAAM;KAAO,eAAA;IAAe,CAAA;IACrE,oBAAC,KAAD;KACE,OAAO,EAAE,0BAA0B;KACnC,OAAM;KACN,eAAA;IACD,CAAA;IACD,oBAAC,KAAD;KAAK,OAAO,EAAE,wBAAwB;KAAG,OAAM;KAAO,eAAA;IAAe,CAAA;GAC7D;;CACW,CAAA;AAE3B"}

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

@@ -0,0 +1,31 @@
+import { languageNames } from "../../providers/I18nProvider/constants.js";
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { useLanguages } from "../../hooks/useLanguages.js";
+import { CardValue } from "../../components/Card/CardButton.style.js";
+import { CardButton } from "../../components/Card/CardButton.js";
+import { useNavigate } from "@tanstack/react-router";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Language from "@mui/icons-material/Language";
+//#region src/pages/SettingsPage/LanguageSetting.tsx
+const LanguageSetting = () => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const { hiddenUI } = useWidgetConfig();
+	const { selectedLanguageCode } = useLanguages();
+	if (hiddenUI?.language) return null;
+	const handleClick = () => {
+		navigate({ to: navigationRoutes.languages });
+	};
+	return /* @__PURE__ */ jsx(CardButton, {
+		onClick: handleClick,
+		icon: /* @__PURE__ */ jsx(Language, {}),
+		title: t("language.title"),
+		children: /* @__PURE__ */ jsx(CardValue, { children: languageNames[selectedLanguageCode] || t("language.name", { lng: selectedLanguageCode }) || selectedLanguageCode })
+	});
+};
+//#endregion
+export { LanguageSetting };
+
+//# sourceMappingURL=LanguageSetting.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSetting.js","names":[],"sources":["../../../../src/pages/SettingsPage/LanguageSetting.tsx"],"sourcesContent":["import Language from '@mui/icons-material/Language'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { CardButton } from '../../components/Card/CardButton.js'\nimport { CardValue } from '../../components/Card/CardButton.style.js'\nimport { useLanguages } from '../../hooks/useLanguages.js'\nimport { languageNames } from '../../providers/I18nProvider/constants.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\n\nexport const LanguageSetting: React.FC = () => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { hiddenUI } = useWidgetConfig()\n  const { selectedLanguageCode } = useLanguages()\n\n  if (hiddenUI?.language) {\n    return null\n  }\n\n  const handleClick = () => {\n    navigate({ to: navigationRoutes.languages })\n  }\n\n  return (\n    <CardButton\n      onClick={handleClick}\n      icon={<Language />}\n      title={t('language.title')}\n    >\n      <CardValue>\n        {languageNames[selectedLanguageCode as keyof typeof languageNames] ||\n          t('language.name', {\n            lng: selectedLanguageCode,\n          }) ||\n          selectedLanguageCode}\n      </CardValue>\n    </CardButton>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAUA,MAAa,wBAAkC;CAC7C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,EAAE,yBAAyB,aAAa;CAE9C,IAAI,UAAU,UACZ,OAAO;CAGT,MAAM,oBAAoB;EACxB,SAAS,EAAE,IAAI,iBAAiB,UAAU,CAAC;CAC7C;CAEA,OACE,oBAAC,YAAD;EACE,SAAS;EACT,MAAM,oBAAC,UAAD,CAAW,CAAA;EACjB,OAAO,EAAE,gBAAgB;YAEzB,oBAAC,WAAD,EAAA,UACG,cAAc,yBACb,EAAE,iBAAiB,EACjB,KAAK,qBACP,CAAC,KACD,qBACO,CAAA;CACD,CAAA;AAEhB"}

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

@@ -0,0 +1,64 @@
+import { useSettingMonitor } from "../../hooks/useSettingMonitor.js";
+import { Dialog as Dialog$1 } from "../../components/Dialog/Dialog.js";
+import { DialogActions as DialogActions$1, DialogContainer, DialogContent as DialogContent$1, DialogContentText as DialogContentText$1, DialogTitle as DialogTitle$1 } from "../../components/Dialog/Dialog.style.js";
+import { ResetButtonContainer } from "./ResetSettingsButton.style.js";
+import { useCallback, useState } from "react";
+import { Box, Button } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import InfoRounded from "@mui/icons-material/InfoRounded";
+//#region src/pages/SettingsPage/ResetSettingsButton.tsx
+const ResetSettingsButton = () => {
+	const { t } = useTranslation();
+	const { isCustomRouteSettings, reset } = useSettingMonitor();
+	const [open, setOpen] = useState(false);
+	const toggleDialog = useCallback(() => {
+		setOpen((open) => !open);
+	}, []);
+	const handleReset = () => {
+		reset();
+		toggleDialog();
+	};
+	if (!isCustomRouteSettings) return null;
+	return /* @__PURE__ */ jsx(Box, {
+		sx: { mt: 2 },
+		children: /* @__PURE__ */ jsxs(ResetButtonContainer, { children: [
+			/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					marginBottom: "12px"
+				},
+				children: [/* @__PURE__ */ jsx(InfoRounded, { sx: { marginRight: "8px" } }), /* @__PURE__ */ jsx(Box, {
+					sx: { fontSize: 14 },
+					children: t("settings.resetSettings")
+				})]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				onClick: toggleDialog,
+				fullWidth: true,
+				children: t("button.resetSettings")
+			}),
+			/* @__PURE__ */ jsx(Dialog$1, {
+				open,
+				onClose: toggleDialog,
+				children: /* @__PURE__ */ jsxs(DialogContainer, { children: [
+					/* @__PURE__ */ jsx(DialogTitle$1, { children: t("warning.title.resetSettings") }),
+					/* @__PURE__ */ jsx(DialogContent$1, { children: /* @__PURE__ */ jsx(DialogContentText$1, { children: t("warning.message.resetSettings") }) }),
+					/* @__PURE__ */ jsxs(DialogActions$1, { children: [/* @__PURE__ */ jsx(Button, {
+						onClick: toggleDialog,
+						children: t("button.cancel")
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "contained",
+						onClick: handleReset,
+						autoFocus: true,
+						children: t("button.reset")
+					})] })
+				] })
+			})
+		] })
+	});
+};
+//#endregion
+export { ResetSettingsButton };
+
+//# sourceMappingURL=ResetSettingsButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResetSettingsButton.js","names":["Dialog","DialogTitle","DialogContent","DialogContentText","DialogActions"],"sources":["../../../../src/pages/SettingsPage/ResetSettingsButton.tsx"],"sourcesContent":["import InfoRounded from '@mui/icons-material/InfoRounded'\nimport { Box, Button } from '@mui/material'\nimport { useCallback, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Dialog } from '../../components/Dialog/Dialog.js'\nimport {\n  DialogActions,\n  DialogContainer,\n  DialogContent,\n  DialogContentText,\n  DialogTitle,\n} from '../../components/Dialog/Dialog.style.js'\nimport { useSettingMonitor } from '../../hooks/useSettingMonitor.js'\nimport { ResetButtonContainer } from './ResetSettingsButton.style.js'\n\nexport const ResetSettingsButton: React.FC = () => {\n  const { t } = useTranslation()\n  const { isCustomRouteSettings, reset } = useSettingMonitor()\n  const [open, setOpen] = useState(false)\n\n  const toggleDialog = useCallback(() => {\n    setOpen((open) => !open)\n  }, [])\n\n  const handleReset = () => {\n    reset()\n    toggleDialog()\n  }\n\n  if (!isCustomRouteSettings) {\n    return null\n  }\n\n  return (\n    <Box\n      sx={{\n        mt: 2,\n      }}\n    >\n      <ResetButtonContainer>\n        <Box\n          sx={{\n            display: 'flex',\n            marginBottom: '12px',\n          }}\n        >\n          <InfoRounded\n            sx={{\n              marginRight: '8px',\n            }}\n          />\n          <Box\n            sx={{\n              fontSize: 14,\n            }}\n          >\n            {t('settings.resetSettings')}\n          </Box>\n        </Box>\n        <Button onClick={toggleDialog} fullWidth>\n          {t('button.resetSettings')}\n        </Button>\n\n        <Dialog open={open} onClose={toggleDialog}>\n          <DialogContainer>\n            <DialogTitle>{t('warning.title.resetSettings')}</DialogTitle>\n            <DialogContent>\n              <DialogContentText>\n                {t('warning.message.resetSettings')}\n              </DialogContentText>\n            </DialogContent>\n            <DialogActions>\n              <Button onClick={toggleDialog}>{t('button.cancel')}</Button>\n              <Button variant=\"contained\" onClick={handleReset} autoFocus>\n                {t('button.reset')}\n              </Button>\n            </DialogActions>\n          </DialogContainer>\n        </Dialog>\n      </ResetButtonContainer>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;AAeA,MAAa,4BAAsC;CACjD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,uBAAuB,UAAU,kBAAkB;CAC3D,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,eAAe,kBAAkB;EACrC,SAAS,SAAS,CAAC,IAAI;CACzB,GAAG,CAAC,CAAC;CAEL,MAAM,oBAAoB;EACxB,MAAM;EACN,aAAa;CACf;CAEA,IAAI,CAAC,uBACH,OAAO;CAGT,OACE,oBAAC,KAAD;EACE,IAAI,EACF,IAAI,EACN;YAEA,qBAAC,sBAAD,EAAA,UAAA;GACE,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,cAAc;IAChB;cAJF,CAME,oBAAC,aAAD,EACE,IAAI,EACF,aAAa,MACf,EACD,CAAA,GACD,oBAAC,KAAD;KACE,IAAI,EACF,UAAU,GACZ;eAEC,EAAE,wBAAwB;IACxB,CAAA,CACF;;GACL,oBAAC,QAAD;IAAQ,SAAS;IAAc,WAAA;cAC5B,EAAE,sBAAsB;GACnB,CAAA;GAER,oBAACA,UAAD;IAAc;IAAM,SAAS;cAC3B,qBAAC,iBAAD,EAAA,UAAA;KACE,oBAACC,eAAD,EAAA,UAAc,EAAE,6BAA6B,EAAe,CAAA;KAC5D,oBAACC,iBAAD,EAAA,UACE,oBAACC,qBAAD,EAAA,UACG,EAAE,+BAA+B,EACjB,CAAA,EACN,CAAA;KACf,qBAACC,iBAAD,EAAA,UAAA,CACE,oBAAC,QAAD;MAAQ,SAAS;gBAAe,EAAE,eAAe;KAAU,CAAA,GAC3D,oBAAC,QAAD;MAAQ,SAAQ;MAAY,SAAS;MAAa,WAAA;gBAC/C,EAAE,cAAc;KACX,CAAA,CACK,EAAA,CAAA;IACA,EAAA,CAAA;GACX,CAAA;EACY,EAAA,CAAA;CACnB,CAAA;AAET"}

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

@@ -0,0 +1,12 @@
+import { Box, styled } from "@mui/material";
+//#region src/pages/SettingsPage/ResetSettingsButton.style.tsx
+const ResetButtonContainer = styled(Box)(({ theme }) => ({
+	background: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+	borderRadius: "16px",
+	padding: "16px",
+	svg: { fill: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)` }
+}));
+//#endregion
+export { ResetButtonContainer };
+
+//# sourceMappingURL=ResetSettingsButton.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResetSettingsButton.style.js","names":[],"sources":["../../../../src/pages/SettingsPage/ResetSettingsButton.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ResetButtonContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    background: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    borderRadius: '16px',\n    padding: '16px',\n    svg: {\n      fill: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,\n    },\n  }))\n"],"mappings":";;AAGA,MAAa,uBACX,OAAO,GAAG,GAAG,EAAE,aAAa;CAC1B,YAAY,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CACzE,cAAc;CACd,SAAS;CACT,KAAK,EACH,MAAM,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBACrE;AACF,EAAE"}

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

@@ -0,0 +1,48 @@
+import { useSettingsActions } from "../../stores/settings/useSettingsActions.js";
+import { useSettings } from "../../stores/settings/useSettings.js";
+import { useSettingMonitor } from "../../hooks/useSettingMonitor.js";
+import { CardTabs, Tab } from "../../components/Tabs/Tabs.style.js";
+import { BadgedValue } from "./SettingsCard/BadgedValue.js";
+import { SettingCardExpandable } from "./SettingsCard/SettingCardExpandable.js";
+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 { isRoutePriorityChanged } = useSettingMonitor();
+	const { routePriority } = useSettings(["routePriority"]);
+	const currentRoutePriority = routePriority ?? "";
+	const handleRoutePriorityChange = (_, routePriority) => {
+		setValue("routePriority", routePriority);
+	};
+	return /* @__PURE__ */ jsx(SettingCardExpandable, {
+		value: /* @__PURE__ */ jsx(BadgedValue, {
+			badgeColor: "info",
+			showBadge: isRoutePriorityChanged,
+			children: t(`main.tags.${currentRoutePriority.toLowerCase()}`)
+		}),
+		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);
+			})
+		})
+	});
+};
+//#endregion
+export { RoutePrioritySettings };
+
+//# sourceMappingURL=RoutePrioritySettings.js.map

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

@@ -0,0 +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"}

package/dist/esm/pages/SettingsPage/SettingsCard/BadgedValue.js

@@ -0,0 +1,13 @@
+import { CardValue } from "../../../components/Card/CardButton.style.js";
+import { Badge } from "./SettingCard.style.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/SettingsPage/SettingsCard/BadgedValue.tsx
+const BadgedValue = ({ showBadge, badgeColor, children }) => showBadge && badgeColor ? /* @__PURE__ */ jsx(Badge, {
+	variant: "dot",
+	color: badgeColor,
+	children: /* @__PURE__ */ jsx(CardValue, { children })
+}) : /* @__PURE__ */ jsx(CardValue, { children });
+//#endregion
+export { BadgedValue };
+
+//# sourceMappingURL=BadgedValue.js.map

package/dist/esm/pages/SettingsPage/SettingsCard/BadgedValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgedValue.js","names":[],"sources":["../../../../../src/pages/SettingsPage/SettingsCard/BadgedValue.tsx"],"sourcesContent":["import type { BadgeProps } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport { CardValue } from '../../../components/Card/CardButton.style.js'\nimport { Badge } from './SettingCard.style.js'\n\ninterface BadgedValueProps {\n  showBadge: boolean\n  badgeColor?: BadgeProps['color']\n}\n\nexport const BadgedValue: React.FC<PropsWithChildren<BadgedValueProps>> = ({\n  showBadge,\n  badgeColor,\n  children,\n}) =>\n  showBadge && badgeColor ? (\n    <Badge variant=\"dot\" color={badgeColor}>\n      <CardValue>{children}</CardValue>\n    </Badge>\n  ) : (\n    <CardValue>{children}</CardValue>\n  )\n"],"mappings":";;;;AAUA,MAAa,eAA8D,EACzE,WACA,YACA,eAEA,aAAa,aACX,oBAAC,OAAD;CAAO,SAAQ;CAAM,OAAO;WAC1B,oBAAC,WAAD,EAAY,SAAoB,CAAA;AAC3B,CAAA,IAEP,oBAAC,WAAD,EAAY,SAAoB,CAAA"}

package/dist/esm/pages/SettingsPage/SettingsCard/SettingCard.style.js

@@ -0,0 +1,23 @@
+import { Badge, Box, badgeClasses, styled } from "@mui/material";
+//#region src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx
+const SettingsList = styled(Box)(({ theme }) => ({
+	display: "flex",
+	flexDirection: "column",
+	gap: theme.spacing(1)
+}));
+const Badge$1 = styled(Badge)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	gap: theme.spacing(1.25),
+	[`.${badgeClasses.badge}`]: {
+		width: 10,
+		height: 10,
+		position: "relative",
+		transform: "translateX(0)",
+		borderRadius: "50%"
+	}
+}));
+//#endregion
+export { Badge$1 as Badge, SettingsList };
+
+//# sourceMappingURL=SettingCard.style.js.map

package/dist/esm/pages/SettingsPage/SettingsCard/SettingCard.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingCard.style.js","names":["Badge","MuiBadge"],"sources":["../../../../../src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx"],"sourcesContent":["import { Box, badgeClasses, Badge as MuiBadge, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const SettingsList: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n}))\n\nexport const Badge: React.FC<React.ComponentProps<typeof MuiBadge>> = styled(\n  MuiBadge\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.25),\n  [`.${badgeClasses.badge}`]: {\n    width: 10,\n    height: 10,\n    // the following removes MUI styling so we can position the badge with flex\n    position: 'relative',\n    transform: 'translateX(0)',\n    borderRadius: '50%',\n  },\n}))\n"],"mappings":";;AAGA,MAAa,eAA2D,OACtE,GACF,GAAG,EAAE,aAAa;CAChB,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAaA,UAAyD,OACpEC,KACF,GAAG,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,IAAI;EACtB,IAAI,aAAa,UAAU;EAC1B,OAAO;EACP,QAAQ;EAER,UAAU;EACV,WAAW;EACX,cAAc;CAChB;AACF,EAAE"}

package/dist/esm/pages/SettingsPage/SettingsCard/SettingCardExpandable.js

@@ -0,0 +1,47 @@
+import { Card as Card$1 } from "../../../components/Card/Card.js";
+import { CardRowButton, CardTitleContainer, CardValue } from "../../../components/Card/CardButton.style.js";
+import { useSettingsCardExpandable } from "./SettingsAccordian.js";
+import { forwardRef, useId, useImperativeHandle, useRef } from "react";
+import { Collapse } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx
+const SettingCardExpandable = forwardRef(({ icon, title, value, children, disabled, keepValueVisible, onEntered }, ref) => {
+	const { expanded, toggleExpanded } = useSettingsCardExpandable();
+	const buttonId = useId();
+	const collapseId = useId();
+	const buttonRef = useRef(null);
+	useImperativeHandle(ref, () => ({
+		element: buttonRef.current,
+		isExpanded: expanded,
+		toggleExpanded
+	}), [expanded, toggleExpanded]);
+	return /* @__PURE__ */ jsxs(Card$1, {
+		sx: { p: 1 },
+		children: [/* @__PURE__ */ jsxs(CardRowButton, {
+			ref: buttonRef,
+			id: buttonId,
+			"aria-expanded": expanded,
+			"aria-controls": collapseId,
+			onClick: disabled ? void 0 : () => toggleExpanded(),
+			disableRipple: true,
+			sx: {
+				p: 1,
+				cursor: disabled ? "default" : "pointer"
+			},
+			children: [/* @__PURE__ */ jsxs(CardTitleContainer, { children: [icon, /* @__PURE__ */ jsx(CardValue, { children: title })] }), (!expanded || keepValueVisible) && value]
+		}), /* @__PURE__ */ jsx(Collapse, {
+			id: collapseId,
+			role: "region",
+			"aria-labelledby": buttonId,
+			in: expanded,
+			mountOnEnter: true,
+			unmountOnExit: true,
+			onEntered,
+			children
+		})]
+	});
+});
+//#endregion
+export { SettingCardExpandable };
+
+//# sourceMappingURL=SettingCardExpandable.js.map

package/dist/esm/pages/SettingsPage/SettingsCard/SettingCardExpandable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingCardExpandable.js","names":["Card"],"sources":["../../../../../src/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx"],"sourcesContent":["import { Collapse } from '@mui/material'\nimport type { PropsWithChildren, ReactNode } from 'react'\nimport {\n  type ForwardRefExoticComponent,\n  forwardRef,\n  type RefAttributes,\n  useId,\n  useImperativeHandle,\n  useRef,\n} from 'react'\nimport { Card } from '../../../components/Card/Card.js'\nimport {\n  CardRowButton,\n  CardTitleContainer,\n  CardValue,\n} from '../../../components/Card/CardButton.style.js'\nimport { useSettingsCardExpandable } from './SettingsAccordian.js'\nimport type { SettingCardTitle } from './types.js'\n\ninterface SettingCardExpandableProps extends SettingCardTitle {\n  value: ReactNode\n  disabled?: boolean\n  keepValueVisible?: boolean\n  onEntered?: () => void\n}\n\nexport interface SettingCardExpandableRef {\n  element: HTMLButtonElement | null\n  isExpanded: boolean\n  toggleExpanded: (forceExpanded?: boolean) => void\n}\n\nexport const SettingCardExpandable: ForwardRefExoticComponent<\n  PropsWithChildren<SettingCardExpandableProps> &\n    RefAttributes<SettingCardExpandableRef>\n> = forwardRef<\n  SettingCardExpandableRef,\n  PropsWithChildren<SettingCardExpandableProps>\n>(\n  (\n    { icon, title, value, children, disabled, keepValueVisible, onEntered },\n    ref\n  ) => {\n    const { expanded, toggleExpanded } = useSettingsCardExpandable()\n    const buttonId = useId()\n    const collapseId = useId()\n    const buttonRef = useRef<HTMLButtonElement>(null)\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        element: buttonRef.current,\n        isExpanded: expanded,\n        toggleExpanded,\n      }),\n      [expanded, toggleExpanded]\n    )\n\n    return (\n      <Card sx={{ p: 1 }}>\n        <CardRowButton\n          ref={buttonRef}\n          id={buttonId}\n          aria-expanded={expanded}\n          aria-controls={collapseId}\n          onClick={disabled ? undefined : () => toggleExpanded()}\n          disableRipple\n          sx={{ p: 1, cursor: disabled ? 'default' : 'pointer' }}\n        >\n          <CardTitleContainer>\n            {icon}\n            <CardValue>{title}</CardValue>\n          </CardTitleContainer>\n          {(!expanded || keepValueVisible) && value}\n        </CardRowButton>\n        <Collapse\n          id={collapseId}\n          role=\"region\"\n          aria-labelledby={buttonId}\n          in={expanded}\n          mountOnEnter\n          unmountOnExit\n          onEntered={onEntered}\n        >\n          {children}\n        </Collapse>\n      </Card>\n    )\n  }\n)\n"],"mappings":";;;;;;;AAgCA,MAAa,wBAGT,YAKA,EAAE,MAAM,OAAO,OAAO,UAAU,UAAU,kBAAkB,aAC5D,QACG;CACH,MAAM,EAAE,UAAU,mBAAmB,0BAA0B;CAC/D,MAAM,WAAW,MAAM;CACvB,MAAM,aAAa,MAAM;CACzB,MAAM,YAAY,OAA0B,IAAI;CAEhD,oBACE,YACO;EACL,SAAS,UAAU;EACnB,YAAY;EACZ;CACF,IACA,CAAC,UAAU,cAAc,CAC3B;CAEA,OACE,qBAACA,QAAD;EAAM,IAAI,EAAE,GAAG,EAAE;YAAjB,CACE,qBAAC,eAAD;GACE,KAAK;GACL,IAAI;GACJ,iBAAe;GACf,iBAAe;GACf,SAAS,WAAW,KAAA,UAAkB,eAAe;GACrD,eAAA;GACA,IAAI;IAAE,GAAG;IAAG,QAAQ,WAAW,YAAY;GAAU;aAPvD,CASE,qBAAC,oBAAD,EAAA,UAAA,CACG,MACD,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA,CACX,EAAA,CAAA,IAClB,CAAC,YAAY,qBAAqB,KACvB;MACf,oBAAC,UAAD;GACE,IAAI;GACJ,MAAK;GACL,mBAAiB;GACjB,IAAI;GACJ,cAAA;GACA,eAAA;GACW;GAEV;EACO,CAAA,CACN;;AAEV,CACF"}

package/dist/esm/pages/SettingsPage/SettingsCard/SettingsAccordian.js

@@ -0,0 +1,38 @@
+import { createContext, useContext, useEffect, useId, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/SettingsPage/SettingsCard/SettingsAccordian.tsx
+const SettingsAccordionContext = createContext({
+	setOpenCard: (_id) => {},
+	openCard: ""
+});
+const SettingsCardAccordion = ({ children }) => {
+	const [openCard, setOpenCard] = useState("");
+	return /* @__PURE__ */ jsx(SettingsAccordionContext.Provider, {
+		value: {
+			openCard,
+			setOpenCard
+		},
+		children
+	});
+};
+const useSettingsCardExpandable = () => {
+	const settingCardExpandableId = useId();
+	const [expanded, setExpanded] = useState(false);
+	const { openCard, setOpenCard } = useContext(SettingsAccordionContext);
+	const toggleExpanded = (forceExpanded) => {
+		const newExpanded = forceExpanded ?? !expanded;
+		setExpanded(newExpanded);
+		if (newExpanded && openCard !== settingCardExpandableId) setOpenCard(settingCardExpandableId);
+	};
+	useEffect(() => {
+		if (openCard !== settingCardExpandableId) setExpanded(false);
+	}, [settingCardExpandableId, openCard]);
+	return {
+		expanded,
+		toggleExpanded
+	};
+};
+//#endregion
+export { SettingsCardAccordion, useSettingsCardExpandable };
+
+//# sourceMappingURL=SettingsAccordian.js.map

package/dist/esm/pages/SettingsPage/SettingsCard/SettingsAccordian.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsAccordian.js","names":[],"sources":["../../../../../src/pages/SettingsPage/SettingsCard/SettingsAccordian.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { createContext, useContext, useEffect, useId, useState } from 'react'\n\nconst SettingsAccordionContext = createContext({\n  setOpenCard: (_id: string) => {},\n  openCard: '',\n})\n\nexport const SettingsCardAccordion: React.FC<PropsWithChildren> = ({\n  children,\n}) => {\n  const [openCard, setOpenCard] = useState('')\n\n  return (\n    <SettingsAccordionContext.Provider value={{ openCard, setOpenCard }}>\n      {children}\n    </SettingsAccordionContext.Provider>\n  )\n}\n\nexport const useSettingsCardExpandable = (): {\n  expanded: boolean\n  toggleExpanded: (forceExpanded?: boolean) => void\n} => {\n  const settingCardExpandableId = useId()\n  const [expanded, setExpanded] = useState(false)\n  const { openCard, setOpenCard } = useContext(SettingsAccordionContext)\n\n  const toggleExpanded = (forceExpanded?: boolean) => {\n    const newExpanded = forceExpanded ?? !expanded\n    setExpanded(newExpanded)\n\n    if (newExpanded && openCard !== settingCardExpandableId) {\n      setOpenCard(settingCardExpandableId)\n    }\n  }\n\n  useEffect(() => {\n    if (openCard !== settingCardExpandableId) {\n      setExpanded(false)\n    }\n  }, [settingCardExpandableId, openCard])\n\n  return {\n    expanded: expanded,\n    toggleExpanded: toggleExpanded,\n  }\n}\n"],"mappings":";;;AAGA,MAAM,2BAA2B,cAAc;CAC7C,cAAc,QAAgB,CAAC;CAC/B,UAAU;AACZ,CAAC;AAED,MAAa,yBAAsD,EACjE,eACI;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,EAAE;CAE3C,OACE,oBAAC,yBAAyB,UAA1B;EAAmC,OAAO;GAAE;GAAU;EAAY;EAC/D;CACgC,CAAA;AAEvC;AAEA,MAAa,kCAGR;CACH,MAAM,0BAA0B,MAAM;CACtC,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,EAAE,UAAU,gBAAgB,WAAW,wBAAwB;CAErE,MAAM,kBAAkB,kBAA4B;EAClD,MAAM,cAAc,iBAAiB,CAAC;EACtC,YAAY,WAAW;EAEvB,IAAI,eAAe,aAAa,yBAC9B,YAAY,uBAAuB;CAEvC;CAEA,gBAAgB;EACd,IAAI,aAAa,yBACf,YAAY,KAAK;CAErB,GAAG,CAAC,yBAAyB,QAAQ,CAAC;CAEtC,OAAO;EACK;EACM;CAClB;AACF"}

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

@@ -0,0 +1,39 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { PageContainer } from "../../components/PageContainer.js";
+import { useHeader } from "../../hooks/useHeader.js";
+import { SettingsList } from "./SettingsCard/SettingCard.style.js";
+import { BridgeAndExchangeSettings } from "./BridgeAndExchangeSettings.js";
+import { SettingsCardAccordion } from "./SettingsCard/SettingsAccordian.js";
+import { GasPriceSettings } from "./GasPriceSettings.js";
+import { LanguageSetting } from "./LanguageSetting.js";
+import { ResetSettingsButton } from "./ResetSettingsButton.js";
+import { RoutePrioritySettings } from "./RoutePrioritySettings.js";
+import { SlippageSettings } from "./SlippageSettings/SlippageSettings.js";
+import { SmallBalanceFilterSettings } from "./SmallBalanceFilterSettings.js";
+import { ThemeSettings } from "./ThemeSettings.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/SettingsPage/SettingsPage.tsx
+const SettingsPage = () => {
+	const { t } = useTranslation();
+	const { hiddenUI } = useWidgetConfig();
+	useHeader(t("header.settings"));
+	return /* @__PURE__ */ jsxs(PageContainer, {
+		topGutters: true,
+		bottomGutters: true,
+		children: [/* @__PURE__ */ jsx(SettingsList, { children: /* @__PURE__ */ jsxs(SettingsCardAccordion, { children: [
+			/* @__PURE__ */ jsx(ThemeSettings, {}),
+			/* @__PURE__ */ jsx(LanguageSetting, {}),
+			/* @__PURE__ */ jsx(RoutePrioritySettings, {}),
+			/* @__PURE__ */ jsx(GasPriceSettings, {}),
+			/* @__PURE__ */ jsx(SlippageSettings, {}),
+			!hiddenUI?.hideSmallBalances && /* @__PURE__ */ jsx(SmallBalanceFilterSettings, {}),
+			/* @__PURE__ */ jsx(BridgeAndExchangeSettings, { type: "Bridges" }),
+			/* @__PURE__ */ jsx(BridgeAndExchangeSettings, { type: "Exchanges" })
+		] }) }), /* @__PURE__ */ jsx(ResetSettingsButton, {})]
+	});
+};
+//#endregion
+export { SettingsPage };
+
+//# sourceMappingURL=SettingsPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsPage.js","names":[],"sources":["../../../../src/pages/SettingsPage/SettingsPage.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { BridgeAndExchangeSettings } from './BridgeAndExchangeSettings.js'\nimport { GasPriceSettings } from './GasPriceSettings.js'\nimport { LanguageSetting } from './LanguageSetting.js'\nimport { ResetSettingsButton } from './ResetSettingsButton.js'\nimport { RoutePrioritySettings } from './RoutePrioritySettings.js'\nimport { SettingsList } from './SettingsCard/SettingCard.style.js'\nimport { SettingsCardAccordion } from './SettingsCard/SettingsAccordian.js'\nimport { SlippageSettings } from './SlippageSettings/SlippageSettings.js'\nimport { SmallBalanceFilterSettings } from './SmallBalanceFilterSettings.js'\nimport { ThemeSettings } from './ThemeSettings.js'\n\nexport const SettingsPage = (): JSX.Element => {\n  const { t } = useTranslation()\n  const { hiddenUI } = useWidgetConfig()\n  useHeader(t('header.settings'))\n\n  return (\n    <PageContainer topGutters bottomGutters>\n      <SettingsList>\n        <SettingsCardAccordion>\n          <ThemeSettings />\n          <LanguageSetting />\n          <RoutePrioritySettings />\n          <GasPriceSettings />\n          <SlippageSettings />\n          {!hiddenUI?.hideSmallBalances && <SmallBalanceFilterSettings />}\n          <BridgeAndExchangeSettings type=\"Bridges\" />\n          <BridgeAndExchangeSettings type=\"Exchanges\" />\n        </SettingsCardAccordion>\n      </SettingsList>\n      <ResetSettingsButton />\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAa,qBAAkC;CAC7C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,aAAa,gBAAgB;CACrC,UAAU,EAAE,iBAAiB,CAAC;CAE9B,OACE,qBAAC,eAAD;EAAe,YAAA;EAAW,eAAA;YAA1B,CACE,oBAAC,cAAD,EAAA,UACE,qBAAC,uBAAD,EAAA,UAAA;GACE,oBAAC,eAAD,CAAgB,CAAA;GAChB,oBAAC,iBAAD,CAAkB,CAAA;GAClB,oBAAC,uBAAD,CAAwB,CAAA;GACxB,oBAAC,kBAAD,CAAmB,CAAA;GACnB,oBAAC,kBAAD,CAAmB,CAAA;GAClB,CAAC,UAAU,qBAAqB,oBAAC,4BAAD,CAA6B,CAAA;GAC9D,oBAAC,2BAAD,EAA2B,MAAK,UAAW,CAAA;GAC3C,oBAAC,2BAAD,EAA2B,MAAK,YAAa,CAAA;EACxB,EAAA,CAAA,EACX,CAAA,GACd,oBAAC,qBAAD,CAAsB,CAAA,CACT;;AAEnB"}

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

@@ -0,0 +1,92 @@
+import { useSettingsActions } from "../../../stores/settings/useSettingsActions.js";
+import { formatInputAmount, formatSlippage } from "../../../utils/format.js";
+import { useSettings } from "../../../stores/settings/useSettings.js";
+import { useSettingMonitor } from "../../../hooks/useSettingMonitor.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 { 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 { 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, {
+			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
+			})] })]
+		})
+	});
+};
+//#endregion
+export { SlippageSettings };
+
+//# sourceMappingURL=SlippageSettings.js.map

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

@@ -0,0 +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"}