@lifi/widget 4.0.0-alpha.4 → 4.0.0-alpha.6

package/dist/esm/icons/lifi.js

@@ -1,2 +1,6 @@
-export const lifiLogoUrl = 'https://lifinance.github.io/types/src/assets/icons/bridges/lifi.svg';
+//#region src/icons/lifi.ts
+const lifiLogoUrl = "https://lifinance.github.io/types/src/assets/icons/bridges/lifi.svg";
+//#endregion
+export { lifiLogoUrl };
+
 //# sourceMappingURL=lifi.js.map

package/dist/esm/icons/lifi.js.map

@@ -1 +1 @@
-{"version":3,"file":"lifi.js","sourceRoot":"","sources":["../../../src/icons/lifi.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GACtB,qEAAqE,CAAA"}
+{"version":3,"file":"lifi.js","names":[],"sources":["../../../src/icons/lifi.ts"],"sourcesContent":["export const lifiLogoUrl =\n  'https://lifinance.github.io/types/src/assets/icons/bridges/lifi.svg'\n"],"mappings":";AAAA,MAAa,cACX"}

package/dist/esm/index.d.ts

@@ -1,33 +1,33 @@
-export type * from '@lifi/sdk';
-export { ChainId, ChainType, CoinKey } from '@lifi/sdk';
-export { App as LiFiWidget } from './App.js';
-export type { WidgetDrawer } from './AppDrawer.js';
-export * from './components/ContractComponent/ItemPrice.js';
-export * from './components/ContractComponent/NFT/NFT.js';
-export * from './components/ContractComponent/NFT/NFTBase.js';
-export * from './components/ContractComponent/NFT/types.js';
-export * from './components/Skeleton/WidgetSkeleton.js';
-export { defaultMaxHeight } from './config/constants.js';
-export * from './config/version.js';
-export { useWidgetChains } from './hooks/useWidgetChains.js';
-export { useWidgetEvents, widgetEvents } from './hooks/useWidgetEvents.js';
-export * from './stores/bookmarks/types.js';
-export * from './stores/form/types.js';
-export { useFieldActions } from './stores/form/useFieldActions.js';
-export { useFieldValues } from './stores/form/useFieldValues.js';
-export { azureLightTheme } from './themes/azureLight.js';
-export { createTheme } from './themes/createTheme.js';
-export { jumperTheme } from './themes/jumper.js';
-export * from './themes/palettes.js';
-export * from './themes/types.js';
-export { watermelonLightTheme } from './themes/watermelonLight.js';
-export { windows95Theme } from './themes/windows95.js';
-export * from './types/events.js';
-export type { TokenAmount } from './types/token.js';
-export * from './types/widget.js';
-export { compactNumberFormatter } from './utils/compactNumberFormatter.js';
-export { currencyExtendedFormatter } from './utils/currencyExtendedFormatter.js';
-export * from './utils/format.js';
-export { getPriceImpact } from './utils/getPriceImpact.js';
-export { navigationRoutes } from './utils/navigationRoutes.js';
-export { percentFormatter } from './utils/percentFormatter.js';
+import { DefaultFieldValues, DefaultValues, ExtractValueType, FormActions, FormFieldArray, FormFieldNames, FormKeyHelper, FormProps, FormStoreStore, FormType, FormTypeProps, FormValueControl, FormValues, FormValuesState, GenericFormValue, ResetOptions, SetOptions, TouchedFields, ValidationActions, ValidationProps } from "./stores/form/types.js";
+import { AllowDeny, AllowDenyItems, AllowDenySet, AllowDenySetItem, AllowDenySets, Appearance, CalculateFeeParams, CustomSubvariant, DefaultUI, DisabledUI, DisabledUIType, ExpansionType, ExplorerUrl, FieldNames, FieldValues, FormFieldOptions, FormRef, FormRefProps, FormState, HiddenUI, HiddenUIType, NavigationProps, PoweredByType, RequiredUI, RequiredUIType, RouteLabel, RouteLabelRule, SetFieldValueFunction, SplitSubvariant, SplitSubvariantOptions, SubvariantOptions, ToAddress, WideSubvariant, WidgetChains, WidgetConfig, WidgetConfigPartialProps, WidgetConfigProps, WidgetContractTool, WidgetDrawerProps, WidgetFeeConfig, WidgetLanguages, WidgetProps, WidgetProvider, WidgetSDKConfig, WidgetSubvariant, WidgetTheme, WidgetThemeComponents, WidgetTokens, WidgetVariant, WidgetWalletConfig } from "./types/widget.js";
+import { WidgetDrawer } from "./AppDrawer.js";
+import { App } from "./App.js";
+import { TokenAmount } from "./types/token.js";
+import { ItemPrice, ItemPriceProps } from "./components/ContractComponent/ItemPrice.js";
+import { NFTBaseProps, NFTOwner, NFTProps } from "./components/ContractComponent/NFT/types.js";
+import { NFT } from "./components/ContractComponent/NFT/NFT.js";
+import { NFTBase } from "./components/ContractComponent/NFT/NFTBase.js";
+import { WidgetSkeleton } from "./components/Skeleton/WidgetSkeleton.js";
+import { defaultMaxHeight } from "./config/constants.js";
+import { name, version } from "./config/version.js";
+import { useWidgetChains } from "./hooks/useWidgetChains.js";
+import { navigationRoutes } from "./utils/navigationRoutes.js";
+import { ChainPinned, ChainTokenSelected, ContactSupport, FormFieldChanged, LowAddressActivityConfirmed, RouteExecutionUpdate, RouteHighValueLossUpdate, RouteSelected, SettingUpdated, TokenSearch, WalletConnected, WidgetEvent, WidgetEvents } from "./types/events.js";
+import { useWidgetEvents, widgetEvents } from "./hooks/useWidgetEvents.js";
+import { Bookmark, BookmarkActions, BookmarkProps, BookmarkState, BookmarkStore } from "./stores/bookmarks/types.js";
+import { useFieldActions } from "./stores/form/useFieldActions.js";
+import { useFieldValues } from "./stores/form/useFieldValues.js";
+import { azureLightTheme } from "./themes/azureLight.js";
+import { createTheme } from "./themes/createTheme.js";
+import { jumperTheme } from "./themes/jumper.js";
+import { palette, paletteDark, paletteLight } from "./themes/palettes.js";
+import { watermelonLightTheme } from "./themes/watermelonLight.js";
+import { windows95Theme } from "./themes/windows95.js";
+import { compactNumberFormatter } from "./utils/compactNumberFormatter.js";
+import { currencyExtendedFormatter } from "./utils/currencyExtendedFormatter.js";
+import { formatDuration, formatInputAmount, formatSlippage, formatTokenAmount, formatTokenPrice, priceToTokenAmount, usdDecimals, wrapLongWords } from "./utils/format.js";
+import { getPriceImpact } from "./utils/getPriceImpact.js";
+import { percentFormatter } from "./utils/percentFormatter.js";
+import { ChainId, ChainType, CoinKey } from "@lifi/sdk";
+export * from "@lifi/sdk";
+export { AllowDeny, AllowDenyItems, AllowDenySet, AllowDenySetItem, AllowDenySets, Appearance, Bookmark, BookmarkActions, BookmarkProps, BookmarkState, BookmarkStore, CalculateFeeParams, ChainId, ChainPinned, ChainTokenSelected, ChainType, CoinKey, ContactSupport, CustomSubvariant, DefaultFieldValues, DefaultUI, DefaultValues, DisabledUI, DisabledUIType, ExpansionType, ExplorerUrl, ExtractValueType, FieldNames, FieldValues, FormActions, FormFieldArray, FormFieldChanged, FormFieldNames, FormFieldOptions, FormKeyHelper, FormProps, FormRef, FormRefProps, FormState, FormStoreStore, FormType, FormTypeProps, FormValueControl, FormValues, FormValuesState, GenericFormValue, HiddenUI, HiddenUIType, ItemPrice, ItemPriceProps, App as LiFiWidget, LowAddressActivityConfirmed, NFT, NFTBase, NFTBaseProps, NFTOwner, NFTProps, NavigationProps, PoweredByType, RequiredUI, RequiredUIType, ResetOptions, RouteExecutionUpdate, RouteHighValueLossUpdate, RouteLabel, RouteLabelRule, RouteSelected, SetFieldValueFunction, SetOptions, SettingUpdated, SplitSubvariant, SplitSubvariantOptions, SubvariantOptions, ToAddress, type TokenAmount, TokenSearch, TouchedFields, ValidationActions, ValidationProps, WalletConnected, WideSubvariant, WidgetChains, WidgetConfig, WidgetConfigPartialProps, WidgetConfigProps, WidgetContractTool, type WidgetDrawer, WidgetDrawerProps, WidgetEvent, WidgetEvents, WidgetFeeConfig, WidgetLanguages, WidgetProps, WidgetProvider, WidgetSDKConfig, WidgetSkeleton, WidgetSubvariant, WidgetTheme, WidgetThemeComponents, WidgetTokens, WidgetVariant, WidgetWalletConfig, azureLightTheme, compactNumberFormatter, createTheme, currencyExtendedFormatter, defaultMaxHeight, formatDuration, formatInputAmount, formatSlippage, formatTokenAmount, formatTokenPrice, getPriceImpact, jumperTheme, name, navigationRoutes, palette, paletteDark, paletteLight, percentFormatter, priceToTokenAmount, usdDecimals, useFieldActions, useFieldValues, useWidgetChains, useWidgetEvents, version, watermelonLightTheme, widgetEvents, windows95Theme, wrapLongWords };

package/dist/esm/index.js

@@ -1,31 +1,28 @@
-export { ChainId, ChainType, CoinKey } from '@lifi/sdk';
-export { App as LiFiWidget } from './App.js';
-export * from './components/ContractComponent/ItemPrice.js';
-export * from './components/ContractComponent/NFT/NFT.js';
-export * from './components/ContractComponent/NFT/NFTBase.js';
-export * from './components/ContractComponent/NFT/types.js';
-export * from './components/Skeleton/WidgetSkeleton.js';
-export { defaultMaxHeight } from './config/constants.js';
-export * from './config/version.js';
-export { useWidgetChains } from './hooks/useWidgetChains.js';
-export { useWidgetEvents, widgetEvents } from './hooks/useWidgetEvents.js';
-export * from './stores/bookmarks/types.js';
-export * from './stores/form/types.js';
-export { useFieldActions } from './stores/form/useFieldActions.js';
-export { useFieldValues } from './stores/form/useFieldValues.js';
-export { azureLightTheme } from './themes/azureLight.js';
-export { createTheme } from './themes/createTheme.js';
-export { jumperTheme } from './themes/jumper.js';
-export * from './themes/palettes.js';
-export * from './themes/types.js';
-export { watermelonLightTheme } from './themes/watermelonLight.js';
-export { windows95Theme } from './themes/windows95.js';
-export * from './types/events.js';
-export * from './types/widget.js';
-export { compactNumberFormatter } from './utils/compactNumberFormatter.js';
-export { currencyExtendedFormatter } from './utils/currencyExtendedFormatter.js';
-export * from './utils/format.js';
-export { getPriceImpact } from './utils/getPriceImpact.js';
-export { navigationRoutes } from './utils/navigationRoutes.js';
-export { percentFormatter } from './utils/percentFormatter.js';
-//# sourceMappingURL=index.js.map
+import { defaultMaxHeight } from "./config/constants.js";
+import { useWidgetEvents, widgetEvents } from "./hooks/useWidgetEvents.js";
+import { WidgetEvent } from "./types/events.js";
+import { DisabledUI, ExpansionType, HiddenUI, RequiredUI } from "./types/widget.js";
+import { navigationRoutes } from "./utils/navigationRoutes.js";
+import { FormKeyHelper } from "./stores/form/types.js";
+import { useFieldValues } from "./stores/form/useFieldValues.js";
+import { name, version } from "./config/version.js";
+import { useFieldActions } from "./stores/form/useFieldActions.js";
+import { formatDuration, formatInputAmount, formatSlippage, formatTokenAmount, formatTokenPrice, priceToTokenAmount, usdDecimals, wrapLongWords } from "./utils/format.js";
+import { getPriceImpact } from "./utils/getPriceImpact.js";
+import { compactNumberFormatter } from "./utils/compactNumberFormatter.js";
+import { currencyExtendedFormatter } from "./utils/currencyExtendedFormatter.js";
+import { percentFormatter } from "./utils/percentFormatter.js";
+import { palette, paletteDark, paletteLight } from "./themes/palettes.js";
+import { createTheme } from "./themes/createTheme.js";
+import { App } from "./App.js";
+import { ItemPrice } from "./components/ContractComponent/ItemPrice.js";
+import { NFTBase } from "./components/ContractComponent/NFT/NFTBase.js";
+import { NFT } from "./components/ContractComponent/NFT/NFT.js";
+import { WidgetSkeleton } from "./components/Skeleton/WidgetSkeleton.js";
+import { useWidgetChains } from "./hooks/useWidgetChains.js";
+import { azureLightTheme } from "./themes/azureLight.js";
+import { jumperTheme } from "./themes/jumper.js";
+import { watermelonLightTheme } from "./themes/watermelonLight.js";
+import { windows95Theme } from "./themes/windows95.js";
+import { ChainId, ChainType, CoinKey } from "@lifi/sdk";
+export { ChainId, ChainType, CoinKey, DisabledUI, ExpansionType, FormKeyHelper, HiddenUI, ItemPrice, App as LiFiWidget, NFT, NFTBase, RequiredUI, WidgetEvent, WidgetSkeleton, azureLightTheme, compactNumberFormatter, createTheme, currencyExtendedFormatter, defaultMaxHeight, formatDuration, formatInputAmount, formatSlippage, formatTokenAmount, formatTokenPrice, getPriceImpact, jumperTheme, name, navigationRoutes, palette, paletteDark, paletteLight, percentFormatter, priceToTokenAmount, usdDecimals, useFieldActions, useFieldValues, useWidgetChains, useWidgetEvents, version, watermelonLightTheme, widgetEvents, windows95Theme, wrapLongWords };

package/dist/esm/pages/ActivitiesPage/ActiveTransactionItem.js

@@ -0,0 +1,36 @@
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { TransactionCardSkeleton } from "../../components/TransactionCard/TransactionCardSkeleton.js";
+import { ActiveTransactionCard } from "../../components/TransactionCard/ActiveTransactionCard.js";
+import { useRouteExecution } from "../../hooks/useRouteExecution.js";
+import { useNavigate } from "@tanstack/react-router";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/ActivitiesPage/ActiveTransactionItem.tsx
+const ActiveTransactionItem = ({ routeId }) => {
+	const navigate = useNavigate();
+	const { route, status, deleteRoute } = useRouteExecution({
+		routeId,
+		executeInBackground: true
+	});
+	const lastActiveStep = route?.steps.findLast((step) => step.execution);
+	if (!route || !lastActiveStep) return /* @__PURE__ */ jsx(TransactionCardSkeleton, { active: true });
+	const handleClick = () => {
+		navigate({
+			to: navigationRoutes.transactionExecution,
+			search: { routeId }
+		});
+	};
+	const handleDelete = (e) => {
+		e.stopPropagation();
+		deleteRoute();
+	};
+	return /* @__PURE__ */ jsx(ActiveTransactionCard, {
+		route,
+		status,
+		onClick: handleClick,
+		onDelete: handleDelete
+	});
+};
+//#endregion
+export { ActiveTransactionItem };
+
+//# sourceMappingURL=ActiveTransactionItem.js.map

package/dist/esm/pages/ActivitiesPage/ActiveTransactionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveTransactionItem.js","names":[],"sources":["../../../../src/pages/ActivitiesPage/ActiveTransactionItem.tsx"],"sourcesContent":["import { useNavigate } from '@tanstack/react-router'\nimport type { MouseEvent } from 'react'\nimport { ActiveTransactionCard } from '../../components/TransactionCard/ActiveTransactionCard.js'\nimport { TransactionCardSkeleton } from '../../components/TransactionCard/TransactionCardSkeleton.js'\nimport { useRouteExecution } from '../../hooks/useRouteExecution.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\n\nexport const ActiveTransactionItem: React.FC<{ routeId: string }> = ({\n  routeId,\n}) => {\n  const navigate = useNavigate()\n  const { route, status, deleteRoute } = useRouteExecution({\n    routeId,\n    executeInBackground: true,\n  })\n\n  const lastActiveStep = route?.steps.findLast((step) => step.execution)\n\n  if (!route || !lastActiveStep) {\n    return <TransactionCardSkeleton active />\n  }\n\n  const handleClick = () => {\n    navigate({\n      to: navigationRoutes.transactionExecution,\n      search: { routeId },\n    })\n  }\n\n  const handleDelete = (e: MouseEvent) => {\n    e.stopPropagation()\n    deleteRoute()\n  }\n\n  return (\n    <ActiveTransactionCard\n      route={route}\n      status={status}\n      onClick={handleClick}\n      onDelete={handleDelete}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAOA,MAAa,yBAAwD,EACnE,cACI;CACJ,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,OAAO,QAAQ,gBAAgB,kBAAkB;EACvD;EACA,qBAAqB;EACtB,CAAC;CAEF,MAAM,iBAAiB,OAAO,MAAM,UAAU,SAAS,KAAK,UAAU;AAEtE,KAAI,CAAC,SAAS,CAAC,eACb,QAAO,oBAAC,yBAAD,EAAyB,QAAA,MAAS,CAAA;CAG3C,MAAM,oBAAoB;AACxB,WAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,EAAE,SAAS;GACpB,CAAC;;CAGJ,MAAM,gBAAgB,MAAkB;AACtC,IAAE,iBAAiB;AACnB,eAAa;;AAGf,QACE,oBAAC,uBAAD;EACS;EACC;EACR,SAAS;EACT,UAAU;EACV,CAAA"}

package/dist/esm/pages/ActivitiesPage/ActivitiesPage.js

@@ -0,0 +1,102 @@
+import { PageContainer } from "../../components/PageContainer.js";
+import { RouteExecutionStatus } from "../../stores/routes/types.js";
+import { useRouteExecutionStore } from "../../stores/routes/RouteExecutionStore.js";
+import { TransactionCardSkeleton } from "../../components/TransactionCard/TransactionCardSkeleton.js";
+import { useHeader } from "../../hooks/useHeader.js";
+import { useListHeight } from "../../hooks/useListHeight.js";
+import { useTransactionList } from "../../hooks/useTransactionList.js";
+import { ActiveTransactionItem } from "./ActiveTransactionItem.js";
+import { ActivitiesPageMenuButton } from "./ActivitiesPageMenuButton.js";
+import { TransactionHistoryEmpty } from "./TransactionHistoryEmpty.js";
+import { TransactionHistoryItem } from "./TransactionHistoryItem.js";
+import { useCallback, useMemo, useRef } from "react";
+import { Box, List } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useAccount } from "@lifi/wallet-management";
+//#region src/pages/ActivitiesPage/ActivitiesPage.tsx
+const SKELETON_COUNT = 3;
+const ActivitiesPage = () => {
+	const parentRef = useRef(null);
+	const { items, isLoading } = useTransactionList();
+	const { t } = useTranslation();
+	const { accounts } = useAccount();
+	const accountAddresses = useMemo(() => accounts.map((account) => account.address), [accounts]);
+	const hasFailedItems = useRouteExecutionStore(useCallback((state) => Object.values(state.routes).some((r) => r?.status === RouteExecutionStatus.Failed && accountAddresses.includes(r.route.fromAddress)), [accountAddresses]));
+	useHeader(t("header.activities"), hasFailedItems ? /* @__PURE__ */ jsx(ActivitiesPageMenuButton, {}) : null);
+	const { listHeight } = useListHeight({ listParentRef: parentRef });
+	const hasStoreItems = items.length > 0;
+	const skeletonCount = isLoading && hasStoreItems ? SKELETON_COUNT : 0;
+	const totalCount = items.length + skeletonCount;
+	const getItemKey = useCallback((index) => {
+		if (index >= items.length) return `skeleton-${index}`;
+		const item = items[index];
+		if (item.type === "active") return `active-${item.routeId}`;
+		return `${item.type}-${item.txHash || item.routeExecution.route.id}`;
+	}, [items]);
+	const { getVirtualItems, getTotalSize, measureElement } = useVirtualizer({
+		count: hasStoreItems ? totalCount : 0,
+		overscan: 3,
+		paddingEnd: 12,
+		getScrollElement: () => parentRef.current,
+		estimateSize: (index) => items[index]?.type === "active" ? 218 : 196,
+		getItemKey
+	});
+	if (!items.length && !isLoading) return /* @__PURE__ */ jsx(TransactionHistoryEmpty, {});
+	return /* @__PURE__ */ jsx(PageContainer, {
+		disableGutters: true,
+		style: { minHeight: 544 },
+		children: /* @__PURE__ */ jsx(Box, {
+			ref: parentRef,
+			style: { height: listHeight },
+			sx: {
+				overflow: "auto",
+				paddingX: 3
+			},
+			children: isLoading && !hasStoreItems ? /* @__PURE__ */ jsx(List, {
+				disablePadding: true,
+				sx: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 2,
+					marginBottom: 2
+				},
+				children: Array.from({ length: SKELETON_COUNT }).map((_, index) => /* @__PURE__ */ jsx(TransactionCardSkeleton, {}, index))
+			}) : /* @__PURE__ */ jsx(List, {
+				className: "long-list",
+				style: {
+					height: getTotalSize(),
+					position: "relative"
+				},
+				disablePadding: true,
+				children: getVirtualItems().map((item) => {
+					const listItem = item.index < items.length ? items[item.index] : null;
+					return /* @__PURE__ */ jsx("li", {
+						ref: measureElement,
+						"data-index": item.index,
+						style: {
+							position: "absolute",
+							top: 0,
+							left: 0,
+							width: "100%",
+							paddingBottom: 16,
+							transform: `translateY(${item.start}px)`,
+							listStyle: "none"
+						},
+						children: !listItem ? /* @__PURE__ */ jsx(TransactionCardSkeleton, {}) : listItem.type === "active" ? /* @__PURE__ */ jsx(ActiveTransactionItem, { routeId: listItem.routeId }) : /* @__PURE__ */ jsx(TransactionHistoryItem, {
+							route: listItem.routeExecution.route,
+							type: listItem.type,
+							transactionHash: listItem.txHash,
+							startedAt: listItem.startedAt
+						})
+					}, item.key);
+				})
+			})
+		})
+	});
+};
+//#endregion
+export { ActivitiesPage };
+
+//# sourceMappingURL=ActivitiesPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActivitiesPage.js","names":[],"sources":["../../../../src/pages/ActivitiesPage/ActivitiesPage.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { Box, List } from '@mui/material'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport { type JSX, useCallback, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { TransactionCardSkeleton } from '../../components/TransactionCard/TransactionCardSkeleton.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useListHeight } from '../../hooks/useListHeight.js'\nimport { useTransactionList } from '../../hooks/useTransactionList.js'\nimport { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { ActiveTransactionItem } from './ActiveTransactionItem.js'\nimport { ActivitiesPageMenuButton } from './ActivitiesPageMenuButton.js'\nimport { TransactionHistoryEmpty } from './TransactionHistoryEmpty.js'\nimport { TransactionHistoryItem } from './TransactionHistoryItem.js'\n\nconst SKELETON_COUNT = 3\n\nexport const ActivitiesPage = (): JSX.Element => {\n  // Parent ref and useVirtualizer should be in one file to avoid blank page (0 virtual items) issue\n  const parentRef = useRef<HTMLDivElement | null>(null)\n  const { items, isLoading } = useTransactionList()\n  const { t } = useTranslation()\n  const { accounts } = useAccount()\n  const accountAddresses = useMemo(\n    () => accounts.map((account) => account.address),\n    [accounts]\n  )\n  const hasFailedItems = useRouteExecutionStore(\n    useCallback(\n      (state) =>\n        Object.values(state.routes).some(\n          (r) =>\n            r?.status === RouteExecutionStatus.Failed &&\n            accountAddresses.includes(r.route.fromAddress)\n        ),\n      [accountAddresses]\n    )\n  )\n\n  useHeader(\n    t('header.activities'),\n    hasFailedItems ? <ActivitiesPageMenuButton /> : null\n  )\n\n  const { listHeight } = useListHeight({\n    listParentRef: parentRef,\n  })\n\n  const hasStoreItems = items.length > 0\n  const skeletonCount = isLoading && hasStoreItems ? SKELETON_COUNT : 0\n  const totalCount = items.length + skeletonCount\n\n  const getItemKey = useCallback(\n    (index: number) => {\n      if (index >= items.length) {\n        return `skeleton-${index}`\n      }\n      const item = items[index]\n      if (item.type === 'active') {\n        return `active-${item.routeId}`\n      }\n      return `${item.type}-${item.txHash || item.routeExecution.route.id}`\n    },\n    [items]\n  )\n\n  const { getVirtualItems, getTotalSize, measureElement } = useVirtualizer({\n    count: hasStoreItems ? totalCount : 0,\n    overscan: 3,\n    paddingEnd: 12,\n    getScrollElement: () => parentRef.current,\n    estimateSize: (index) => (items[index]?.type === 'active' ? 218 : 196),\n    getItemKey,\n  })\n\n  if (!items.length && !isLoading) {\n    return <TransactionHistoryEmpty />\n  }\n\n  return (\n    <PageContainer disableGutters style={{ minHeight: 544 }}>\n      <Box\n        ref={parentRef}\n        style={{ height: listHeight }}\n        sx={{ overflow: 'auto', paddingX: 3 }}\n      >\n        {isLoading && !hasStoreItems ? (\n          <List\n            disablePadding\n            sx={{\n              display: 'flex',\n              flexDirection: 'column',\n              gap: 2,\n              marginBottom: 2,\n            }}\n          >\n            {Array.from({ length: SKELETON_COUNT }).map((_, index) => (\n              <TransactionCardSkeleton key={index} />\n            ))}\n          </List>\n        ) : (\n          <List\n            className=\"long-list\"\n            style={{ height: getTotalSize(), position: 'relative' }}\n            disablePadding\n          >\n            {getVirtualItems().map((item) => {\n              const listItem =\n                item.index < items.length ? items[item.index] : null\n              return (\n                <li\n                  key={item.key}\n                  ref={measureElement}\n                  data-index={item.index}\n                  style={{\n                    position: 'absolute',\n                    top: 0,\n                    left: 0,\n                    width: '100%',\n                    paddingBottom: 16,\n                    transform: `translateY(${item.start}px)`,\n                    listStyle: 'none',\n                  }}\n                >\n                  {!listItem ? (\n                    <TransactionCardSkeleton />\n                  ) : listItem.type === 'active' ? (\n                    <ActiveTransactionItem routeId={listItem.routeId} />\n                  ) : (\n                    <TransactionHistoryItem\n                      route={listItem.routeExecution.route}\n                      type={listItem.type}\n                      transactionHash={listItem.txHash}\n                      startedAt={listItem.startedAt}\n                    />\n                  )}\n                </li>\n              )\n            })}\n          </List>\n        )}\n      </Box>\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,MAAM,iBAAiB;AAEvB,MAAa,uBAAoC;CAE/C,MAAM,YAAY,OAA8B,KAAK;CACrD,MAAM,EAAE,OAAO,cAAc,oBAAoB;CACjD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,aAAa,YAAY;CACjC,MAAM,mBAAmB,cACjB,SAAS,KAAK,YAAY,QAAQ,QAAQ,EAChD,CAAC,SAAS,CACX;CACD,MAAM,iBAAiB,uBACrB,aACG,UACC,OAAO,OAAO,MAAM,OAAO,CAAC,MACzB,MACC,GAAG,WAAW,qBAAqB,UACnC,iBAAiB,SAAS,EAAE,MAAM,YAAY,CACjD,EACH,CAAC,iBAAiB,CACnB,CACF;AAED,WACE,EAAE,oBAAoB,EACtB,iBAAiB,oBAAC,0BAAD,EAA4B,CAAA,GAAG,KACjD;CAED,MAAM,EAAE,eAAe,cAAc,EACnC,eAAe,WAChB,CAAC;CAEF,MAAM,gBAAgB,MAAM,SAAS;CACrC,MAAM,gBAAgB,aAAa,gBAAgB,iBAAiB;CACpE,MAAM,aAAa,MAAM,SAAS;CAElC,MAAM,aAAa,aAChB,UAAkB;AACjB,MAAI,SAAS,MAAM,OACjB,QAAO,YAAY;EAErB,MAAM,OAAO,MAAM;AACnB,MAAI,KAAK,SAAS,SAChB,QAAO,UAAU,KAAK;AAExB,SAAO,GAAG,KAAK,KAAK,GAAG,KAAK,UAAU,KAAK,eAAe,MAAM;IAElE,CAAC,MAAM,CACR;CAED,MAAM,EAAE,iBAAiB,cAAc,mBAAmB,eAAe;EACvE,OAAO,gBAAgB,aAAa;EACpC,UAAU;EACV,YAAY;EACZ,wBAAwB,UAAU;EAClC,eAAe,UAAW,MAAM,QAAQ,SAAS,WAAW,MAAM;EAClE;EACD,CAAC;AAEF,KAAI,CAAC,MAAM,UAAU,CAAC,UACpB,QAAO,oBAAC,yBAAD,EAA2B,CAAA;AAGpC,QACE,oBAAC,eAAD;EAAe,gBAAA;EAAe,OAAO,EAAE,WAAW,KAAK;YACrD,oBAAC,KAAD;GACE,KAAK;GACL,OAAO,EAAE,QAAQ,YAAY;GAC7B,IAAI;IAAE,UAAU;IAAQ,UAAU;IAAG;aAEpC,aAAa,CAAC,gBACb,oBAAC,MAAD;IACE,gBAAA;IACA,IAAI;KACF,SAAS;KACT,eAAe;KACf,KAAK;KACL,cAAc;KACf;cAEA,MAAM,KAAK,EAAE,QAAQ,gBAAgB,CAAC,CAAC,KAAK,GAAG,UAC9C,oBAAC,yBAAD,EAAuC,EAAT,MAAS,CACvC;IACG,CAAA,GAEP,oBAAC,MAAD;IACE,WAAU;IACV,OAAO;KAAE,QAAQ,cAAc;KAAE,UAAU;KAAY;IACvD,gBAAA;cAEC,iBAAiB,CAAC,KAAK,SAAS;KAC/B,MAAM,WACJ,KAAK,QAAQ,MAAM,SAAS,MAAM,KAAK,SAAS;AAClD,YACE,oBAAC,MAAD;MAEE,KAAK;MACL,cAAY,KAAK;MACjB,OAAO;OACL,UAAU;OACV,KAAK;OACL,MAAM;OACN,OAAO;OACP,eAAe;OACf,WAAW,cAAc,KAAK,MAAM;OACpC,WAAW;OACZ;gBAEA,CAAC,WACA,oBAAC,yBAAD,EAA2B,CAAA,GACzB,SAAS,SAAS,WACpB,oBAAC,uBAAD,EAAuB,SAAS,SAAS,SAAW,CAAA,GAEpD,oBAAC,wBAAD;OACE,OAAO,SAAS,eAAe;OAC/B,MAAM,SAAS;OACf,iBAAiB,SAAS;OAC1B,WAAW,SAAS;OACpB,CAAA;MAED,EAzBE,KAAK,IAyBP;MAEP;IACG,CAAA;GAEL,CAAA;EACQ,CAAA"}

package/dist/esm/pages/ActivitiesPage/ActivitiesPageMenuButton.js

@@ -0,0 +1,55 @@
+import { useRouteExecutionStore } from "../../stores/routes/RouteExecutionStore.js";
+import { ContextMenu } from "../../components/ContextMenu.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 { useMemo, useState } from "react";
+import { Button } from "@mui/material";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useAccount } from "@lifi/wallet-management";
+import DeleteOutline from "@mui/icons-material/DeleteOutline";
+//#region src/pages/ActivitiesPage/ActivitiesPageMenuButton.tsx
+const ActivitiesPageMenuButton = () => {
+	const { t } = useTranslation();
+	const [dialogOpen, setDialogOpen] = useState(false);
+	const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes);
+	const { accounts } = useAccount();
+	const accountAddresses = useMemo(() => accounts.flatMap((account) => account.address ?? []), [accounts]);
+	const handleDialogOpen = () => setDialogOpen(true);
+	const handleDialogClose = () => setDialogOpen(false);
+	const handleRemoveAllFailed = () => {
+		deleteRoutes("failed", accountAddresses);
+		handleDialogClose();
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ContextMenu, {
+		buttonSx: {
+			position: "static",
+			marginRight: -1.5
+		},
+		items: [{
+			icon: /* @__PURE__ */ jsx(DeleteOutline, {}),
+			label: t("button.clearAllFailed"),
+			onClick: handleDialogOpen
+		}]
+	}), /* @__PURE__ */ jsx(Dialog$1, {
+		open: dialogOpen,
+		onClose: handleDialogClose,
+		children: /* @__PURE__ */ jsxs(DialogContainer, { children: [
+			/* @__PURE__ */ jsx(DialogTitle$1, { children: t("warning.title.clearFailedTransactions") }),
+			/* @__PURE__ */ jsx(DialogContent$1, { children: /* @__PURE__ */ jsx(DialogContentText$1, { children: t("warning.message.clearFailedTransactions") }) }),
+			/* @__PURE__ */ jsxs(DialogActions$1, { children: [/* @__PURE__ */ jsx(Button, {
+				onClick: handleDialogClose,
+				children: t("button.cancel")
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "contained",
+				onClick: handleRemoveAllFailed,
+				autoFocus: true,
+				children: t("button.delete")
+			})] })
+		] })
+	})] });
+};
+//#endregion
+export { ActivitiesPageMenuButton };
+
+//# sourceMappingURL=ActivitiesPageMenuButton.js.map

package/dist/esm/pages/ActivitiesPage/ActivitiesPageMenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivitiesPageMenuButton.js","names":["DeleteOutlineIcon","Dialog","DialogTitle","DialogContent","DialogContentText","DialogActions"],"sources":["../../../../src/pages/ActivitiesPage/ActivitiesPageMenuButton.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'\nimport { Button } from '@mui/material'\nimport { useMemo, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ContextMenu } from '../../components/ContextMenu.js'\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 { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js'\n\nexport const ActivitiesPageMenuButton: React.FC = () => {\n  const { t } = useTranslation()\n  const [dialogOpen, setDialogOpen] = useState(false)\n  const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes)\n  const { accounts } = useAccount()\n  const accountAddresses = useMemo(\n    () => accounts.flatMap((account) => account.address ?? []),\n    [accounts]\n  )\n\n  const handleDialogOpen = () => setDialogOpen(true)\n  const handleDialogClose = () => setDialogOpen(false)\n\n  const handleRemoveAllFailed = () => {\n    deleteRoutes('failed', accountAddresses)\n    handleDialogClose()\n  }\n\n  return (\n    <>\n      <ContextMenu\n        buttonSx={{ position: 'static', marginRight: -1.5 }}\n        items={[\n          {\n            icon: <DeleteOutlineIcon />,\n            label: t('button.clearAllFailed'),\n            onClick: handleDialogOpen,\n          },\n        ]}\n      />\n      <Dialog open={dialogOpen} onClose={handleDialogClose}>\n        <DialogContainer>\n          <DialogTitle>\n            {t('warning.title.clearFailedTransactions')}\n          </DialogTitle>\n          <DialogContent>\n            <DialogContentText>\n              {t('warning.message.clearFailedTransactions')}\n            </DialogContentText>\n          </DialogContent>\n          <DialogActions>\n            <Button onClick={handleDialogClose}>{t('button.cancel')}</Button>\n            <Button\n              variant=\"contained\"\n              onClick={handleRemoveAllFailed}\n              autoFocus\n            >\n              {t('button.delete')}\n            </Button>\n          </DialogActions>\n        </DialogContainer>\n      </Dialog>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,iCAA2C;CACtD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,eAAe,wBAAwB,UAAU,MAAM,aAAa;CAC1E,MAAM,EAAE,aAAa,YAAY;CACjC,MAAM,mBAAmB,cACjB,SAAS,SAAS,YAAY,QAAQ,WAAW,EAAE,CAAC,EAC1D,CAAC,SAAS,CACX;CAED,MAAM,yBAAyB,cAAc,KAAK;CAClD,MAAM,0BAA0B,cAAc,MAAM;CAEpD,MAAM,8BAA8B;AAClC,eAAa,UAAU,iBAAiB;AACxC,qBAAmB;;AAGrB,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,aAAD;EACE,UAAU;GAAE,UAAU;GAAU,aAAa;GAAM;EACnD,OAAO,CACL;GACE,MAAM,oBAACA,eAAD,EAAqB,CAAA;GAC3B,OAAO,EAAE,wBAAwB;GACjC,SAAS;GACV,CACF;EACD,CAAA,EACF,oBAACC,UAAD;EAAQ,MAAM;EAAY,SAAS;YACjC,qBAAC,iBAAD,EAAA,UAAA;GACE,oBAACC,eAAD,EAAA,UACG,EAAE,wCAAwC,EAC/B,CAAA;GACd,oBAACC,iBAAD,EAAA,UACE,oBAACC,qBAAD,EAAA,UACG,EAAE,0CAA0C,EAC3B,CAAA,EACN,CAAA;GAChB,qBAACC,iBAAD,EAAA,UAAA,CACE,oBAAC,QAAD;IAAQ,SAAS;cAAoB,EAAE,gBAAgB;IAAU,CAAA,EACjE,oBAAC,QAAD;IACE,SAAQ;IACR,SAAS;IACT,WAAA;cAEC,EAAE,gBAAgB;IACZ,CAAA,CACK,EAAA,CAAA;GACA,EAAA,CAAA;EACX,CAAA,CACR,EAAA,CAAA"}

package/dist/esm/pages/ActivitiesPage/TransactionHistoryEmpty.js

@@ -0,0 +1,44 @@
+import { Container, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ReceiptLongRounded from "@mui/icons-material/ReceiptLongRounded";
+//#region src/pages/ActivitiesPage/TransactionHistoryEmpty.tsx
+const TransactionHistoryEmpty = () => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsxs(Container, {
+		sx: {
+			display: "flex",
+			flex: 1,
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center",
+			paddingY: 12
+		},
+		children: [
+			/* @__PURE__ */ jsx(Typography, {
+				sx: { fontSize: 48 },
+				children: /* @__PURE__ */ jsx(ReceiptLongRounded, { fontSize: "inherit" })
+			}),
+			/* @__PURE__ */ jsx(Typography, {
+				sx: {
+					fontSize: 18,
+					fontWeight: 700
+				},
+				children: t("info.title.emptyTransactionHistory")
+			}),
+			/* @__PURE__ */ jsx(Typography, {
+				sx: {
+					fontSize: 14,
+					color: "text.secondary",
+					textAlign: "center",
+					mt: 2
+				},
+				children: t("info.message.emptyTransactionHistory")
+			})
+		]
+	});
+};
+//#endregion
+export { TransactionHistoryEmpty };
+
+//# sourceMappingURL=TransactionHistoryEmpty.js.map

package/dist/esm/pages/ActivitiesPage/TransactionHistoryEmpty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionHistoryEmpty.js","names":[],"sources":["../../../../src/pages/ActivitiesPage/TransactionHistoryEmpty.tsx"],"sourcesContent":["import ReceiptLongRounded from '@mui/icons-material/ReceiptLongRounded'\nimport { Container, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\n\nexport const TransactionHistoryEmpty: React.FC = () => {\n  const { t } = useTranslation()\n  return (\n    <Container\n      sx={{\n        display: 'flex',\n        flex: 1,\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        paddingY: 12,\n      }}\n    >\n      <Typography\n        sx={{\n          fontSize: 48,\n        }}\n      >\n        <ReceiptLongRounded fontSize=\"inherit\" />\n      </Typography>\n      <Typography\n        sx={{\n          fontSize: 18,\n          fontWeight: 700,\n        }}\n      >\n        {t('info.title.emptyTransactionHistory')}\n      </Typography>\n      <Typography\n        sx={{\n          fontSize: 14,\n          color: 'text.secondary',\n          textAlign: 'center',\n          mt: 2,\n        }}\n      >\n        {t('info.message.emptyTransactionHistory')}\n      </Typography>\n    </Container>\n  )\n}\n"],"mappings":";;;;;AAIA,MAAa,gCAA0C;CACrD,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,qBAAC,WAAD;EACE,IAAI;GACF,SAAS;GACT,MAAM;GACN,eAAe;GACf,YAAY;GACZ,gBAAgB;GAChB,UAAU;GACX;YARH;GAUE,oBAAC,YAAD;IACE,IAAI,EACF,UAAU,IACX;cAED,oBAAC,oBAAD,EAAoB,UAAS,WAAY,CAAA;IAC9B,CAAA;GACb,oBAAC,YAAD;IACE,IAAI;KACF,UAAU;KACV,YAAY;KACb;cAEA,EAAE,qCAAqC;IAC7B,CAAA;GACb,oBAAC,YAAD;IACE,IAAI;KACF,UAAU;KACV,OAAO;KACP,WAAW;KACX,IAAI;KACL;cAEA,EAAE,uCAAuC;IAC/B,CAAA;GACH"}

package/dist/esm/pages/ActivitiesPage/TransactionHistoryItem.js

@@ -0,0 +1,24 @@
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { TransactionCard } from "../../components/TransactionCard/TransactionCard.js";
+import { memo } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/ActivitiesPage/TransactionHistoryItem.tsx
+const TransactionHistoryItem = memo(({ route, type, transactionHash, startedAt }) => {
+	const navigate = useNavigate();
+	const handleClick = () => {
+		navigate({
+			to: navigationRoutes.transactionDetails,
+			search: type === "history" ? { transactionHash } : { routeId: route.id }
+		});
+	};
+	return /* @__PURE__ */ jsx(TransactionCard, {
+		route,
+		date: new Date(startedAt),
+		onClick: handleClick
+	});
+});
+//#endregion
+export { TransactionHistoryItem };
+
+//# sourceMappingURL=TransactionHistoryItem.js.map

package/dist/esm/pages/ActivitiesPage/TransactionHistoryItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionHistoryItem.js","names":[],"sources":["../../../../src/pages/ActivitiesPage/TransactionHistoryItem.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { useNavigate } from '@tanstack/react-router'\nimport { memo } from 'react'\nimport { TransactionCard } from '../../components/TransactionCard/TransactionCard.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\n\nexport const TransactionHistoryItem: React.FC<{\n  route: RouteExtended\n  type: 'local' | 'history'\n  transactionHash: string\n  // startedAt in ms\n  startedAt: number\n}> = memo(({ route, type, transactionHash, startedAt }) => {\n  const navigate = useNavigate()\n\n  const handleClick = () => {\n    navigate({\n      to: navigationRoutes.transactionDetails,\n      search: type === 'history' ? { transactionHash } : { routeId: route.id },\n    })\n  }\n\n  return (\n    <TransactionCard\n      route={route}\n      date={new Date(startedAt)}\n      onClick={handleClick}\n    />\n  )\n})\n"],"mappings":";;;;;;AAMA,MAAa,yBAMR,MAAM,EAAE,OAAO,MAAM,iBAAiB,gBAAgB;CACzD,MAAM,WAAW,aAAa;CAE9B,MAAM,oBAAoB;AACxB,WAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,SAAS,YAAY,EAAE,iBAAiB,GAAG,EAAE,SAAS,MAAM,IAAI;GACzE,CAAC;;AAGJ,QACE,oBAAC,iBAAD;EACS;EACP,MAAM,IAAI,KAAK,UAAU;EACzB,SAAS;EACT,CAAA;EAEJ"}

package/dist/esm/pages/LanguagesPage.js

@@ -1,29 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Check from '@mui/icons-material/Check';
-import { List } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { ListItemText } from '../components/ListItemText.js';
-import { PageContainer } from '../components/PageContainer.js';
-import { SettingsListItemButton } from '../components/SettingsListItemButton.js';
-import { useHeader } from '../hooks/useHeader.js';
-import { useLanguages } from '../hooks/useLanguages.js';
-import { languageNames } from '../providers/I18nProvider/constants.js';
-export const LanguagesPage = () => {
-    const { t } = useTranslation();
-    const { selectedLanguageCode, availableLanguages, setLanguageWithCode } = useLanguages();
-    useHeader(t('language.title'));
-    if (availableLanguages.length < 1) {
-        return null;
-    }
-    return (_jsx(PageContainer, { disableGutters: true, children: _jsx(List, { sx: {
-                paddingTop: 0,
-                paddingLeft: 1.5,
-                paddingRight: 1.5,
-                paddingBottom: 1.5,
-            }, children: availableLanguages.map((language) => (_jsxs(SettingsListItemButton, { onClick: () => setLanguageWithCode(language), children: [_jsx(ListItemText, { primary: languageNames[language] ||
-                            t('language.name', {
-                                lng: language,
-                            }) ||
-                            language }), selectedLanguageCode === language && _jsx(Check, { color: "primary" })] }, language))) }) }));
+import { languageNames } from "../providers/I18nProvider/constants.js";
+import { PageContainer } from "../components/PageContainer.js";
+import { useHeader } from "../hooks/useHeader.js";
+import { ListItemText as ListItemText$1 } from "../components/ListItemText.js";
+import { SettingsListItemButton } from "../components/SettingsListItemButton.js";
+import { useLanguages } from "../hooks/useLanguages.js";
+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/LanguagesPage.tsx
+const LanguagesPage = () => {
+	const { t } = useTranslation();
+	const { selectedLanguageCode, availableLanguages, setLanguageWithCode } = useLanguages();
+	useHeader(t("language.title"));
+	if (availableLanguages.length < 1) return null;
+	return /* @__PURE__ */ jsx(PageContainer, {
+		disableGutters: true,
+		children: /* @__PURE__ */ jsx(List, {
+			sx: {
+				paddingTop: 0,
+				paddingLeft: 1.5,
+				paddingRight: 1.5,
+				paddingBottom: 1.5
+			},
+			children: availableLanguages.map((language) => /* @__PURE__ */ jsxs(SettingsListItemButton, {
+				onClick: () => setLanguageWithCode(language),
+				children: [/* @__PURE__ */ jsx(ListItemText$1, { primary: languageNames[language] || t("language.name", { lng: language }) || language }), selectedLanguageCode === language && /* @__PURE__ */ jsx(Check, { color: "primary" })]
+			}, language))
+		})
+	});
 };
+//#endregion
+export { LanguagesPage };
+
 //# sourceMappingURL=LanguagesPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LanguagesPage.js","sourceRoot":"","sources":["../../../src/pages/LanguagesPage.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,2BAA2B,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAA;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAA;AAEtE,MAAM,CAAC,MAAM,aAAa,GAAa,GAAG,EAAE;IAC1C,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,GACrE,YAAY,EAAE,CAAA;IAEhB,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAA;IAE9B,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAClC,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,KAAC,aAAa,IAAC,cAAc,kBAC3B,KAAC,IAAI,IACH,EAAE,EAAE;gBACF,UAAU,EAAE,CAAC;gBACb,WAAW,EAAE,GAAG;gBAChB,YAAY,EAAE,GAAG;gBACjB,aAAa,EAAE,GAAG;aACnB,YAEA,kBAAkB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACpC,MAAC,sBAAsB,IAErB,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,QAAQ,CAAC,aAE5C,KAAC,YAAY,IACX,OAAO,EACL,aAAa,CAAC,QAAsC,CAAC;4BACrD,CAAC,CAAC,eAAe,EAAE;gCACjB,GAAG,EAAE,QAAQ;6BACd,CAAC;4BACF,QAAQ,GAEV,EACD,oBAAoB,KAAK,QAAQ,IAAI,KAAC,KAAK,IAAC,KAAK,EAAC,SAAS,GAAG,KAZ1D,QAAQ,CAaU,CAC1B,CAAC,GACG,GACO,CACjB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"LanguagesPage.js","names":["ListItemText"],"sources":["../../../src/pages/LanguagesPage.tsx"],"sourcesContent":["import Check from '@mui/icons-material/Check'\nimport { List } from '@mui/material'\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 { useLanguages } from '../hooks/useLanguages.js'\nimport { languageNames } from '../providers/I18nProvider/constants.js'\n\nexport const LanguagesPage: React.FC = () => {\n  const { t } = useTranslation()\n  const { selectedLanguageCode, availableLanguages, setLanguageWithCode } =\n    useLanguages()\n\n  useHeader(t('language.title'))\n\n  if (availableLanguages.length < 1) {\n    return null\n  }\n\n  return (\n    <PageContainer disableGutters>\n      <List\n        sx={{\n          paddingTop: 0,\n          paddingLeft: 1.5,\n          paddingRight: 1.5,\n          paddingBottom: 1.5,\n        }}\n      >\n        {availableLanguages.map((language) => (\n          <SettingsListItemButton\n            key={language}\n            onClick={() => setLanguageWithCode(language)}\n          >\n            <ListItemText\n              primary={\n                languageNames[language as keyof typeof languageNames] ||\n                t('language.name', {\n                  lng: language,\n                }) ||\n                language\n              }\n            />\n            {selectedLanguageCode === language && <Check color=\"primary\" />}\n          </SettingsListItemButton>\n        ))}\n      </List>\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAUA,MAAa,sBAAgC;CAC3C,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,sBAAsB,oBAAoB,wBAChD,cAAc;AAEhB,WAAU,EAAE,iBAAiB,CAAC;AAE9B,KAAI,mBAAmB,SAAS,EAC9B,QAAO;AAGT,QACE,oBAAC,eAAD;EAAe,gBAAA;YACb,oBAAC,MAAD;GACE,IAAI;IACF,YAAY;IACZ,aAAa;IACb,cAAc;IACd,eAAe;IAChB;aAEA,mBAAmB,KAAK,aACvB,qBAAC,wBAAD;IAEE,eAAe,oBAAoB,SAAS;cAF9C,CAIE,oBAACA,gBAAD,EACE,SACE,cAAc,aACd,EAAE,iBAAiB,EACjB,KAAK,UACN,CAAC,IACF,UAEF,CAAA,EACD,yBAAyB,YAAY,oBAAC,OAAD,EAAO,OAAM,WAAY,CAAA,CACxC;MAblB,SAakB,CACzB;GACG,CAAA;EACO,CAAA"}