@lifi/widget 0.0.0-preview-6cc63bac

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/DeleteOutlined'\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,eAAe;CAC7B,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,eAAe,wBAAwB,UAAU,MAAM,YAAY;CACzE,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,mBAAmB,cACjB,SAAS,SAAS,YAAY,QAAQ,WAAW,CAAC,CAAC,GACzD,CAAC,QAAQ,CACX;CAEA,MAAM,yBAAyB,cAAc,IAAI;CACjD,MAAM,0BAA0B,cAAc,KAAK;CAEnD,MAAM,8BAA8B;EAClC,aAAa,UAAU,gBAAgB;EACvC,kBAAkB;CACpB;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,aAAD;EACE,UAAU;GAAE,UAAU;GAAU,aAAa;EAAK;EAClD,OAAO,CACL;GACE,MAAM,oBAACA,eAAD,CAAoB,CAAA;GAC1B,OAAO,EAAE,uBAAuB;GAChC,SAAS;EACX,CACF;CACD,CAAA,GACD,oBAACC,UAAD;EAAQ,MAAM;EAAY,SAAS;YACjC,qBAAC,iBAAD,EAAA,UAAA;GACE,oBAACC,eAAD,EAAA,UACG,EAAE,uCAAuC,EAC/B,CAAA;GACb,oBAACC,iBAAD,EAAA,UACE,oBAACC,qBAAD,EAAA,UACG,EAAE,yCAAyC,EAC3B,CAAA,EACN,CAAA;GACf,qBAACC,iBAAD,EAAA,UAAA,CACE,oBAAC,QAAD;IAAQ,SAAS;cAAoB,EAAE,eAAe;GAAU,CAAA,GAChE,oBAAC,QAAD;IACE,SAAQ;IACR,SAAS;IACT,WAAA;cAEC,EAAE,eAAe;GACZ,CAAA,CACK,EAAA,CAAA;EACA,EAAA,CAAA;CACX,CAAA,CACR,EAAA,CAAA;AAEN"}

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

@@ -0,0 +1,17 @@
+import { EmptyListIndicator } from "../../components/EmptyListIndicator/EmptyListIndicator.js";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import HistoryIcon from "@mui/icons-material/History";
+//#region src/pages/ActivitiesPage/TransactionHistoryEmpty.tsx
+const TransactionHistoryEmpty = () => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsx(EmptyListIndicator, {
+		icon: /* @__PURE__ */ jsx(HistoryIcon, {}),
+		title: t("info.title.emptyTransactionHistory"),
+		message: 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 HistoryIcon from '@mui/icons-material/History'\nimport { useTranslation } from 'react-i18next'\nimport { EmptyListIndicator } from '../../components/EmptyListIndicator/EmptyListIndicator.js'\n\nexport const TransactionHistoryEmpty: React.FC = () => {\n  const { t } = useTranslation()\n  return (\n    <EmptyListIndicator\n      icon={<HistoryIcon />}\n      title={t('info.title.emptyTransactionHistory')}\n      message={t('info.message.emptyTransactionHistory')}\n    />\n  )\n}\n"],"mappings":";;;;;AAIA,MAAa,gCAA0C;CACrD,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,oBAAD;EACE,MAAM,oBAAC,aAAD,CAAc,CAAA;EACpB,OAAO,EAAE,oCAAoC;EAC7C,SAAS,EAAE,sCAAsC;CAClD,CAAA;AAEL"}

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,YAAY;CAE7B,MAAM,oBAAoB;EACxB,SAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,SAAS,YAAY,EAAE,gBAAgB,IAAI,EAAE,SAAS,MAAM,GAAG;EACzE,CAAC;CACH;CAEA,OACE,oBAAC,iBAAD;EACS;EACP,MAAM,IAAI,KAAK,SAAS;EACxB,SAAS;CACV,CAAA;AAEL,CAAC"}

package/dist/esm/pages/LanguagesPage.js

@@ -0,0 +1,31 @@
+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: { padding: 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

@@ -0,0 +1 @@
+{"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          padding: 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,eAAe;CAC7B,MAAM,EAAE,sBAAsB,oBAAoB,wBAChD,aAAa;CAEf,UAAU,EAAE,gBAAgB,CAAC;CAE7B,IAAI,mBAAmB,SAAS,GAC9B,OAAO;CAGT,OACE,oBAAC,eAAD;EAAe,gBAAA;YACb,oBAAC,MAAD;GACE,IAAI,EACF,SAAS,IACX;aAEC,mBAAmB,KAAK,aACvB,qBAAC,wBAAD;IAEE,eAAe,oBAAoB,QAAQ;cAF7C,CAIE,oBAACA,gBAAD,EACE,SACE,cAAc,aACd,EAAE,iBAAiB,EACjB,KAAK,SACP,CAAC,KACD,SAEH,CAAA,GACA,yBAAyB,YAAY,oBAAC,OAAD,EAAO,OAAM,UAAW,CAAA,CACxC;MAbjB,QAaiB,CACzB;EACG,CAAA;CACO,CAAA;AAEnB"}

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

@@ -0,0 +1,59 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { PageContainer } from "../../components/PageContainer.js";
+import { useWideVariant } from "../../hooks/useWideVariant.js";
+import { useHeader } from "../../hooks/useHeader.js";
+import { AmountInput } from "../../components/AmountInput/AmountInput.js";
+import { ContractComponent } from "../../components/ContractComponent/ContractComponent.js";
+import { GasRefuelMessage } from "../../components/Messages/GasRefuelMessage.js";
+import { PoweredBy } from "../../components/PoweredBy/PoweredBy.js";
+import { Routes } from "../../components/Routes/Routes.js";
+import { SelectChainAndToken } from "../../components/SelectChainAndToken.js";
+import { SendToWalletButton } from "../../components/SendToWallet/SendToWalletButton.js";
+import { SendToWalletExpandButton } from "../../components/SendToWallet/SendToWalletExpandButton.js";
+import { MainWarningMessages } from "./MainWarningMessages.js";
+import { ReviewButton } from "./ReviewButton.js";
+import { Box } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/MainPage/MainPage.tsx
+const MainPage = () => {
+	const { t } = useTranslation();
+	const wideVariant = useWideVariant();
+	const { mode, modeOptions, contractComponent, hiddenUI } = useWidgetConfig();
+	const custom = mode === "custom";
+	const showPoweredBy = !hiddenUI?.poweredBy;
+	const showGasRefuelMessage = !hiddenUI?.gasRefuelMessage;
+	const splitTitle = modeOptions?.split === "bridge" ? t("header.bridge") : modeOptions?.split === "swap" ? t("header.swap") : void 0;
+	useHeader(mode === "custom" ? t(`header.${modeOptions?.custom?.type ?? "checkout"}`) : mode === "refuel" ? t("header.gas") : mode === "split" && splitTitle ? splitTitle : t("header.exchange"));
+	const marginSx = { marginBottom: 2 };
+	return /* @__PURE__ */ jsxs(PageContainer, {
+		topGutters: true,
+		children: [
+			custom ? /* @__PURE__ */ jsx(ContractComponent, {
+				sx: marginSx,
+				children: contractComponent
+			}) : null,
+			/* @__PURE__ */ jsx(SelectChainAndToken, { sx: marginSx }),
+			!custom || modeOptions?.custom?.type === "deposit" ? /* @__PURE__ */ jsx(AmountInput, {
+				formType: "from",
+				sx: marginSx
+			}) : null,
+			!wideVariant ? /* @__PURE__ */ jsx(Routes, { sx: marginSx }) : null,
+			/* @__PURE__ */ jsx(SendToWalletButton, { sx: marginSx }),
+			showGasRefuelMessage ? /* @__PURE__ */ jsx(GasRefuelMessage, { sx: marginSx }) : null,
+			/* @__PURE__ */ jsx(MainWarningMessages, { sx: marginSx }),
+			/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					mb: showPoweredBy ? 1 : 3
+				},
+				children: [/* @__PURE__ */ jsx(ReviewButton, {}), /* @__PURE__ */ jsx(SendToWalletExpandButton, {})]
+			}),
+			showPoweredBy ? /* @__PURE__ */ jsx(PoweredBy, {}) : null
+		]
+	});
+};
+//#endregion
+export { MainPage };
+
+//# sourceMappingURL=MainPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MainPage.js","names":[],"sources":["../../../../src/pages/MainPage/MainPage.tsx"],"sourcesContent":["import { Box } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AmountInput } from '../../components/AmountInput/AmountInput.js'\nimport { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'\nimport { GasRefuelMessage } from '../../components/Messages/GasRefuelMessage.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { PoweredBy } from '../../components/PoweredBy/PoweredBy.js'\nimport { Routes } from '../../components/Routes/Routes.js'\nimport { SelectChainAndToken } from '../../components/SelectChainAndToken.js'\nimport { SendToWalletButton } from '../../components/SendToWallet/SendToWalletButton.js'\nimport { SendToWalletExpandButton } from '../../components/SendToWallet/SendToWalletExpandButton.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useWideVariant } from '../../hooks/useWideVariant.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { MainWarningMessages } from './MainWarningMessages.js'\nimport { ReviewButton } from './ReviewButton.js'\n\nexport const MainPage: React.FC = () => {\n  const { t } = useTranslation()\n  const wideVariant = useWideVariant()\n  const { mode, modeOptions, contractComponent, hiddenUI } = useWidgetConfig()\n  const custom = mode === 'custom'\n  const showPoweredBy = !hiddenUI?.poweredBy\n  const showGasRefuelMessage = !hiddenUI?.gasRefuelMessage\n\n  const splitTitle =\n    modeOptions?.split === 'bridge'\n      ? t('header.bridge')\n      : modeOptions?.split === 'swap'\n        ? t('header.swap')\n        : undefined\n  const title =\n    mode === 'custom'\n      ? t(`header.${modeOptions?.custom?.type ?? 'checkout'}`)\n      : mode === 'refuel'\n        ? t('header.gas')\n        : mode === 'split' && splitTitle\n          ? splitTitle\n          : t('header.exchange')\n\n  useHeader(title)\n\n  const marginSx = { marginBottom: 2 }\n\n  return (\n    <PageContainer topGutters>\n      {custom ? (\n        <ContractComponent sx={marginSx}>{contractComponent}</ContractComponent>\n      ) : null}\n      <SelectChainAndToken sx={marginSx} />\n      {!custom || modeOptions?.custom?.type === 'deposit' ? (\n        <AmountInput formType=\"from\" sx={marginSx} />\n      ) : null}\n      {!wideVariant ? <Routes sx={marginSx} /> : null}\n      <SendToWalletButton sx={marginSx} />\n      {showGasRefuelMessage ? <GasRefuelMessage sx={marginSx} /> : null}\n      <MainWarningMessages sx={marginSx} />\n      <Box\n        sx={{\n          display: 'flex',\n          mb: showPoweredBy ? 1 : 3,\n        }}\n      >\n        <ReviewButton />\n        <SendToWalletExpandButton />\n      </Box>\n      {showPoweredBy ? <PoweredBy /> : null}\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,MAAa,iBAA2B;CACtC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,cAAc,eAAe;CACnC,MAAM,EAAE,MAAM,aAAa,mBAAmB,aAAa,gBAAgB;CAC3E,MAAM,SAAS,SAAS;CACxB,MAAM,gBAAgB,CAAC,UAAU;CACjC,MAAM,uBAAuB,CAAC,UAAU;CAExC,MAAM,aACJ,aAAa,UAAU,WACnB,EAAE,eAAe,IACjB,aAAa,UAAU,SACrB,EAAE,aAAa,IACf,KAAA;CAUR,UARE,SAAS,WACL,EAAE,UAAU,aAAa,QAAQ,QAAQ,YAAY,IACrD,SAAS,WACP,EAAE,YAAY,IACd,SAAS,WAAW,aAClB,aACA,EAAE,iBAAiB,CAEd;CAEf,MAAM,WAAW,EAAE,cAAc,EAAE;CAEnC,OACE,qBAAC,eAAD;EAAe,YAAA;YAAf;GACG,SACC,oBAAC,mBAAD;IAAmB,IAAI;cAAW;GAAqC,CAAA,IACrE;GACJ,oBAAC,qBAAD,EAAqB,IAAI,SAAW,CAAA;GACnC,CAAC,UAAU,aAAa,QAAQ,SAAS,YACxC,oBAAC,aAAD;IAAa,UAAS;IAAO,IAAI;GAAW,CAAA,IAC1C;GACH,CAAC,cAAc,oBAAC,QAAD,EAAQ,IAAI,SAAW,CAAA,IAAI;GAC3C,oBAAC,oBAAD,EAAoB,IAAI,SAAW,CAAA;GAClC,uBAAuB,oBAAC,kBAAD,EAAkB,IAAI,SAAW,CAAA,IAAI;GAC7D,oBAAC,qBAAD,EAAqB,IAAI,SAAW,CAAA;GACpC,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,IAAI,gBAAgB,IAAI;IAC1B;cAJF,CAME,oBAAC,cAAD,CAAe,CAAA,GACf,oBAAC,0BAAD,CAA2B,CAAA,CACxB;;GACJ,gBAAgB,oBAAC,WAAD,CAAY,CAAA,IAAI;EACpB;;AAEnB"}

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

@@ -0,0 +1,16 @@
+import { useRoutes } from "../../hooks/useRoutes.js";
+import { WarningMessages } from "../../components/Messages/WarningMessages.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/MainPage/MainWarningMessages.tsx
+const MainWarningMessages = (props) => {
+	const { routes } = useRoutes();
+	const currentRoute = routes?.[0];
+	return /* @__PURE__ */ jsx(WarningMessages, {
+		route: currentRoute,
+		...props
+	});
+};
+//#endregion
+export { MainWarningMessages };
+
+//# sourceMappingURL=MainWarningMessages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MainWarningMessages.js","names":[],"sources":["../../../../src/pages/MainPage/MainWarningMessages.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport type { BoxProps } from '@mui/material'\nimport { WarningMessages } from '../../components/Messages/WarningMessages.js'\nimport { useRoutes } from '../../hooks/useRoutes.js'\n\ninterface MainWarningMessagesProps extends BoxProps {\n  route?: Route\n}\n\nexport const MainWarningMessages: React.FC<MainWarningMessagesProps> = (\n  props\n) => {\n  const { routes } = useRoutes()\n  const currentRoute = routes?.[0]\n\n  return <WarningMessages route={currentRoute} {...props} />\n}\n"],"mappings":";;;;AASA,MAAa,uBACX,UACG;CACH,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,eAAe,SAAS;CAE9B,OAAO,oBAAC,iBAAD;EAAiB,OAAO;EAAc,GAAI;CAAQ,CAAA;AAC3D"}

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

@@ -0,0 +1,60 @@
+import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
+import "../../types/events.js";
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { useSplitModeStore } from "../../stores/settings/useSplitModeStore.js";
+import { useRoutes } from "../../hooks/useRoutes.js";
+import { useToAddressRequirements } from "../../hooks/useToAddressRequirements.js";
+import { BaseTransactionButton } from "../../components/BaseTransactionButton/BaseTransactionButton.js";
+import { useNavigate } from "@tanstack/react-router";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/MainPage/ReviewButton.tsx
+const ReviewButton = () => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const emitter = useWidgetEvents();
+	const { mode, modeOptions } = useWidgetConfig();
+	const splitState = useSplitModeStore((state) => state.state);
+	const { toAddress, requiredToAddress } = useToAddressRequirements();
+	const { routes, setReviewableRoute } = useRoutes();
+	const currentRoute = routes?.[0];
+	const handleClick = async () => {
+		if (!currentRoute) return;
+		setReviewableRoute(currentRoute);
+		navigate({
+			to: navigationRoutes.transactionExecution,
+			search: { routeId: currentRoute.id }
+		});
+		emitter.emit("routeSelected", {
+			route: currentRoute,
+			routes
+		});
+	};
+	const getButtonText = () => {
+		if (currentRoute) switch (mode) {
+			case "custom": return t(`button.${modeOptions?.custom?.type ?? "checkout"}Review`);
+			case "refuel": return t("button.getGas");
+			default: return t(`button.${currentRoute.fromChainId === currentRoute.toChainId ? "swap" : "bridge"}Review`);
+		}
+		switch (mode) {
+			case "custom": return modeOptions?.custom?.type === "deposit" ? t("button.deposit") : t("button.buy");
+			case "refuel": return t("button.getGas");
+			case "split":
+				if (splitState) return t(`button.${splitState}`);
+				return t("button.exchange");
+			default: return t("button.exchange");
+		}
+	};
+	return /* @__PURE__ */ jsx(BaseTransactionButton, {
+		text: getButtonText(),
+		onClick: handleClick,
+		disabled: currentRoute && requiredToAddress && !toAddress,
+		route: currentRoute,
+		sx: { flex: 1 }
+	});
+};
+//#endregion
+export { ReviewButton };
+
+//# sourceMappingURL=ReviewButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReviewButton.js","names":[],"sources":["../../../../src/pages/MainPage/ReviewButton.tsx"],"sourcesContent":["import { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useSplitModeStore } from '../../stores/settings/useSplitModeStore.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\n\nexport const ReviewButton: React.FC = () => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const emitter = useWidgetEvents()\n  const { mode, modeOptions } = useWidgetConfig()\n  const splitState = useSplitModeStore((state) => state.state)\n  const { toAddress, requiredToAddress } = useToAddressRequirements()\n  const { routes, setReviewableRoute } = useRoutes()\n\n  const currentRoute = routes?.[0]\n\n  const handleClick = async () => {\n    if (!currentRoute) {\n      return\n    }\n\n    setReviewableRoute(currentRoute)\n    navigate({\n      to: navigationRoutes.transactionExecution,\n      search: { routeId: currentRoute.id },\n    })\n    emitter.emit(WidgetEvent.RouteSelected, {\n      route: currentRoute,\n      routes: routes!,\n    })\n  }\n\n  const getButtonText = (): string => {\n    if (currentRoute) {\n      switch (mode) {\n        case 'custom':\n          return t(`button.${modeOptions?.custom?.type ?? 'checkout'}Review`)\n        case 'refuel':\n          return t('button.getGas')\n        default: {\n          const transactionType =\n            currentRoute.fromChainId === currentRoute.toChainId\n              ? 'swap'\n              : 'bridge'\n          return t(`button.${transactionType}Review`)\n        }\n      }\n    }\n    switch (mode) {\n      case 'custom':\n        return modeOptions?.custom?.type === 'deposit'\n          ? t('button.deposit')\n          : t('button.buy')\n      case 'refuel':\n        return t('button.getGas')\n      case 'split':\n        if (splitState) {\n          return t(`button.${splitState}`)\n        }\n        return t('button.exchange')\n      default:\n        return t('button.exchange')\n    }\n  }\n\n  return (\n    <BaseTransactionButton\n      text={getButtonText()}\n      onClick={handleClick}\n      disabled={currentRoute && requiredToAddress && !toAddress}\n      route={currentRoute}\n      sx={{ flex: 1 }}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAWA,MAAa,qBAA+B;CAC1C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,gBAAgB;CAChC,MAAM,EAAE,MAAM,gBAAgB,gBAAgB;CAC9C,MAAM,aAAa,mBAAmB,UAAU,MAAM,KAAK;CAC3D,MAAM,EAAE,WAAW,sBAAsB,yBAAyB;CAClE,MAAM,EAAE,QAAQ,uBAAuB,UAAU;CAEjD,MAAM,eAAe,SAAS;CAE9B,MAAM,cAAc,YAAY;EAC9B,IAAI,CAAC,cACH;EAGF,mBAAmB,YAAY;EAC/B,SAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,EAAE,SAAS,aAAa,GAAG;EACrC,CAAC;EACD,QAAQ,KAAA,iBAAgC;GACtC,OAAO;GACC;EACV,CAAC;CACH;CAEA,MAAM,sBAA8B;EAClC,IAAI,cACF,QAAQ,MAAR;GACE,KAAK,UACH,OAAO,EAAE,UAAU,aAAa,QAAQ,QAAQ,WAAW,OAAO;GACpE,KAAK,UACH,OAAO,EAAE,eAAe;GAC1B,SAKE,OAAO,EAAE,UAHP,aAAa,gBAAgB,aAAa,YACtC,SACA,SAC6B,OAAO;EAE9C;EAEF,QAAQ,MAAR;GACE,KAAK,UACH,OAAO,aAAa,QAAQ,SAAS,YACjC,EAAE,gBAAgB,IAClB,EAAE,YAAY;GACpB,KAAK,UACH,OAAO,EAAE,eAAe;GAC1B,KAAK;IACH,IAAI,YACF,OAAO,EAAE,UAAU,YAAY;IAEjC,OAAO,EAAE,iBAAiB;GAC5B,SACE,OAAO,EAAE,iBAAiB;EAC9B;CACF;CAEA,OACE,oBAAC,uBAAD;EACE,MAAM,cAAc;EACpB,SAAS;EACT,UAAU,gBAAgB,qBAAqB,CAAC;EAChD,OAAO;EACP,IAAI,EAAE,MAAM,EAAE;CACf,CAAA;AAEL"}

package/dist/esm/pages/RoutesPage/RoutesPage.js

@@ -0,0 +1,74 @@
+import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
+import "../../types/events.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useRoutes } from "../../hooks/useRoutes.js";
+import { useToAddressRequirements } from "../../hooks/useToAddressRequirements.js";
+import { ProgressToNextUpdate } from "../../components/ProgressToNextUpdate.js";
+import { RouteCard } from "../../components/RouteCard/RouteCard.js";
+import { RouteCardSkeleton } from "../../components/RouteCard/RouteCardSkeleton.js";
+import { RouteNotFoundCard } from "../../components/RouteCard/RouteNotFoundCard.js";
+import { useHeader } from "../../hooks/useHeader.js";
+import { Stack } from "./RoutesPage.style.js";
+import { useMemo } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useAccount } from "@lifi/wallet-management";
+//#region src/pages/RoutesPage/RoutesPage.tsx
+const RoutesPage = () => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const emitter = useWidgetEvents();
+	const { routes, isLoading, isFetching, dataUpdatedAt, refetchTime, fromChain, refetch, setReviewableRoute } = useRoutes();
+	const { account } = useAccount({ chainType: fromChain?.chainType });
+	const [toAddress] = useFieldValues("toAddress");
+	const { requiredToAddress } = useToAddressRequirements();
+	const headerAction = useMemo(() => /* @__PURE__ */ jsx(ProgressToNextUpdate, {
+		updatedAt: dataUpdatedAt || Date.now(),
+		timeToUpdate: refetchTime,
+		isLoading: isFetching,
+		onClick: () => refetch(),
+		sx: { marginRight: -1 },
+		size: "medium"
+	}), [
+		dataUpdatedAt,
+		isFetching,
+		refetch,
+		refetchTime
+	]);
+	useHeader(t("header.receive"), headerAction);
+	const handleRouteClick = (route) => {
+		setReviewableRoute(route);
+		navigate({
+			to: navigationRoutes.transactionExecution,
+			search: { routeId: route.id }
+		});
+		emitter.emit("routeSelected", {
+			route,
+			routes
+		});
+	};
+	const routeNotFound = !routes?.length && !isLoading && !isFetching;
+	const toAddressUnsatisfied = routes?.[0] && requiredToAddress && !toAddress;
+	const allowInteraction = account.isConnected && !toAddressUnsatisfied;
+	return /* @__PURE__ */ jsx(Stack, {
+		className: "long-list",
+		direction: "column",
+		spacing: 2,
+		sx: {
+			flex: 1,
+			pt: 1.5
+		},
+		children: routeNotFound ? /* @__PURE__ */ jsx(RouteNotFoundCard, {}) : isLoading && !routes?.length ? Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx(RouteCardSkeleton, {}, index)) : routes?.map((route, index) => /* @__PURE__ */ jsx(RouteCard, {
+			route,
+			onClick: allowInteraction ? () => handleRouteClick(route) : void 0,
+			active: index === 0,
+			expanded: routes?.length === 1
+		}, index))
+	});
+};
+//#endregion
+export { RoutesPage };
+
+//# sourceMappingURL=RoutesPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RoutesPage.js","names":[],"sources":["../../../../src/pages/RoutesPage/RoutesPage.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport { useAccount } from '@lifi/wallet-management'\nimport { useNavigate } from '@tanstack/react-router'\nimport { type JSX, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js'\nimport { RouteCard } from '../../components/RouteCard/RouteCard.js'\nimport { RouteCardSkeleton } from '../../components/RouteCard/RouteCardSkeleton.js'\nimport { RouteNotFoundCard } from '../../components/RouteCard/RouteNotFoundCard.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { Stack } from './RoutesPage.style.js'\n\nexport const RoutesPage = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const emitter = useWidgetEvents()\n  const {\n    routes,\n    isLoading,\n    isFetching,\n    dataUpdatedAt,\n    refetchTime,\n    fromChain,\n    refetch,\n    setReviewableRoute,\n  } = useRoutes()\n  const { account } = useAccount({ chainType: fromChain?.chainType })\n  const [toAddress] = useFieldValues('toAddress')\n  const { requiredToAddress } = useToAddressRequirements()\n\n  const headerAction = useMemo(\n    () => (\n      <ProgressToNextUpdate\n        updatedAt={dataUpdatedAt || Date.now()}\n        timeToUpdate={refetchTime}\n        isLoading={isFetching}\n        onClick={() => refetch()}\n        sx={{ marginRight: -1 }}\n        size=\"medium\"\n      />\n    ),\n    [dataUpdatedAt, isFetching, refetch, refetchTime]\n  )\n\n  useHeader(t('header.receive'), headerAction)\n\n  const handleRouteClick = (route: Route) => {\n    setReviewableRoute(route)\n    navigate({\n      to: navigationRoutes.transactionExecution,\n      search: { routeId: route.id },\n    })\n    emitter.emit(WidgetEvent.RouteSelected, {\n      route,\n      routes: routes!,\n    })\n  }\n\n  const routeNotFound = !routes?.length && !isLoading && !isFetching\n\n  const toAddressUnsatisfied = routes?.[0] && requiredToAddress && !toAddress\n\n  const allowInteraction = account.isConnected && !toAddressUnsatisfied\n\n  return (\n    <Stack\n      className=\"long-list\"\n      direction=\"column\"\n      spacing={2}\n      sx={{ flex: 1, pt: 1.5 }}\n    >\n      {routeNotFound ? (\n        <RouteNotFoundCard />\n      ) : isLoading && !routes?.length ? (\n        Array.from({ length: 3 }).map((_, index) => (\n          <RouteCardSkeleton key={index} />\n        ))\n      ) : (\n        routes?.map((route: Route, index: number) => (\n          <RouteCard\n            key={index}\n            route={route}\n            onClick={\n              allowInteraction ? () => handleRouteClick(route) : undefined\n            }\n            active={index === 0}\n            expanded={routes?.length === 1}\n          />\n        ))\n      )}\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAa,mBAAgC;CAC3C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,gBAAgB;CAChC,MAAM,EACJ,QACA,WACA,YACA,eACA,aACA,WACA,SACA,uBACE,UAAU;CACd,MAAM,EAAE,YAAY,WAAW,EAAE,WAAW,WAAW,UAAU,CAAC;CAClE,MAAM,CAAC,aAAa,eAAe,WAAW;CAC9C,MAAM,EAAE,sBAAsB,yBAAyB;CAEvD,MAAM,eAAe,cAEjB,oBAAC,sBAAD;EACE,WAAW,iBAAiB,KAAK,IAAI;EACrC,cAAc;EACd,WAAW;EACX,eAAe,QAAQ;EACvB,IAAI,EAAE,aAAa,GAAG;EACtB,MAAK;CACN,CAAA,GAEH;EAAC;EAAe;EAAY;EAAS;CAAW,CAClD;CAEA,UAAU,EAAE,gBAAgB,GAAG,YAAY;CAE3C,MAAM,oBAAoB,UAAiB;EACzC,mBAAmB,KAAK;EACxB,SAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,EAAE,SAAS,MAAM,GAAG;EAC9B,CAAC;EACD,QAAQ,KAAA,iBAAgC;GACtC;GACQ;EACV,CAAC;CACH;CAEA,MAAM,gBAAgB,CAAC,QAAQ,UAAU,CAAC,aAAa,CAAC;CAExD,MAAM,uBAAuB,SAAS,MAAM,qBAAqB,CAAC;CAElE,MAAM,mBAAmB,QAAQ,eAAe,CAAC;CAEjD,OACE,oBAAC,OAAD;EACE,WAAU;EACV,WAAU;EACV,SAAS;EACT,IAAI;GAAE,MAAM;GAAG,IAAI;EAAI;YAEtB,gBACC,oBAAC,mBAAD,CAAoB,CAAA,IAClB,aAAa,CAAC,QAAQ,SACxB,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,GAAG,UAChC,oBAAC,mBAAD,CAAgC,GAAR,KAAQ,CACjC,IAED,QAAQ,KAAK,OAAc,UACzB,oBAAC,WAAD;GAES;GACP,SACE,yBAAyB,iBAAiB,KAAK,IAAI,KAAA;GAErD,QAAQ,UAAU;GAClB,UAAU,QAAQ,WAAW;EAC9B,GAPM,KAON,CACF;CAEE,CAAA;AAEX"}

package/dist/esm/pages/RoutesPage/RoutesPage.style.js

@@ -0,0 +1,10 @@
+import { Stack, styled } from "@mui/material";
+//#region src/pages/RoutesPage/RoutesPage.style.ts
+const Stack$1 = styled(Stack)(({ theme }) => ({
+	position: "relative",
+	padding: theme.spacing(0, 3, 3, 3)
+}));
+//#endregion
+export { Stack$1 as Stack };
+
+//# sourceMappingURL=RoutesPage.style.js.map

package/dist/esm/pages/RoutesPage/RoutesPage.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoutesPage.style.js","names":["Stack","MuiStack"],"sources":["../../../../src/pages/RoutesPage/RoutesPage.style.ts"],"sourcesContent":["import { Stack as MuiStack, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const Stack: React.FC<React.ComponentProps<typeof MuiStack>> = styled(\n  MuiStack\n)(({ theme }) => ({\n  position: 'relative',\n  padding: theme.spacing(0, 3, 3, 3),\n}))\n"],"mappings":";;AAGA,MAAaA,UAAyD,OACpEC,KACF,GAAG,EAAE,aAAa;CAChB,UAAU;CACV,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;AACnC,EAAE"}

package/dist/esm/pages/SelectChainPage/SelectChainPage.js

@@ -0,0 +1,35 @@
+import { useChainSelect } from "../../components/ChainSelect/useChainSelect.js";
+import { useNavigateBack } from "../../hooks/useNavigateBack.js";
+import { useHeader } from "../../hooks/useHeader.js";
+import { SelectChainPageContent } from "../../components/Chains/SelectChainPageContent.js";
+import { useTokenSelect } from "../../components/TokenList/useTokenSelect.js";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/SelectChainPage/SelectChainPage.tsx
+const SelectChainPage = ({ formType, selectNativeToken }) => {
+	const navigateBack = useNavigateBack();
+	const { setCurrentChain } = useChainSelect(formType);
+	const selectToken = useTokenSelect(formType, navigateBack);
+	const { t } = useTranslation();
+	useHeader(t("header.selectChain"));
+	return /* @__PURE__ */ jsx(SelectChainPageContent, {
+		formType,
+		onSelect: useCallback(async (chain) => {
+			if (selectNativeToken) selectToken(chain.nativeToken.address, chain.id);
+			else {
+				setCurrentChain(chain.id);
+				navigateBack();
+			}
+		}, [
+			navigateBack,
+			selectNativeToken,
+			selectToken,
+			setCurrentChain
+		])
+	});
+};
+//#endregion
+export { SelectChainPage };
+
+//# sourceMappingURL=SelectChainPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectChainPage.js","names":[],"sources":["../../../../src/pages/SelectChainPage/SelectChainPage.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { useCallback } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainSelect } from '../../components/ChainSelect/useChainSelect.js'\nimport { SelectChainPageContent } from '../../components/Chains/SelectChainPageContent.js'\nimport { useTokenSelect } from '../../components/TokenList/useTokenSelect.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport type { SelectChainPageProps } from './types.js'\n\nexport const SelectChainPage: React.FC<SelectChainPageProps> = ({\n  formType,\n  selectNativeToken,\n}) => {\n  const navigateBack = useNavigateBack()\n  const { setCurrentChain } = useChainSelect(formType)\n  const selectToken = useTokenSelect(formType, navigateBack)\n\n  const { t } = useTranslation()\n\n  useHeader(t('header.selectChain'))\n\n  const handleClick = useCallback(\n    async (chain: ExtendedChain) => {\n      if (selectNativeToken) {\n        selectToken(chain.nativeToken.address, chain.id)\n      } else {\n        setCurrentChain(chain.id)\n        navigateBack()\n      }\n    },\n    [navigateBack, selectNativeToken, selectToken, setCurrentChain]\n  )\n\n  return <SelectChainPageContent formType={formType} onSelect={handleClick} />\n}\n"],"mappings":";;;;;;;;;AAUA,MAAa,mBAAmD,EAC9D,UACA,wBACI;CACJ,MAAM,eAAe,gBAAgB;CACrC,MAAM,EAAE,oBAAoB,eAAe,QAAQ;CACnD,MAAM,cAAc,eAAe,UAAU,YAAY;CAEzD,MAAM,EAAE,MAAM,eAAe;CAE7B,UAAU,EAAE,oBAAoB,CAAC;CAcjC,OAAO,oBAAC,wBAAD;EAAkC;EAAU,UAZ/B,YAClB,OAAO,UAAyB;GAC9B,IAAI,mBACF,YAAY,MAAM,YAAY,SAAS,MAAM,EAAE;QAC1C;IACL,gBAAgB,MAAM,EAAE;IACxB,aAAa;GACf;EACF,GACA;GAAC;GAAc;GAAmB;GAAa;EAAe,CAGO;CAAI,CAAA;AAC7E"}

package/dist/esm/pages/SelectEnabledToolsPage.js

@@ -0,0 +1,105 @@
+import { useSettingsStore } from "../stores/settings/SettingsStore.js";
+import { useSettingsActions } from "../stores/settings/useSettingsActions.js";
+import { PageContainer } from "../components/PageContainer.js";
+import { SearchInput } from "../components/Search/SearchInput.js";
+import { useTools } from "../hooks/useTools.js";
+import { useHeader } from "../hooks/useHeader.js";
+import { useListHeight } from "../hooks/useListHeight.js";
+import { Tools } from "../components/Tools/Tools.js";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
+import { Box, Checkbox, Tooltip, debounce } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/SelectEnabledToolsPage.tsx
+const SelectAllCheckbox = memo(({ allCheckboxesSelected, anyCheckboxesSelected, noCheckboxesAvailable, onClick }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title: noCheckboxesAvailable ? void 0 : allCheckboxesSelected ? t("tooltip.deselectAll") : t("tooltip.selectAll"),
+		children: /* @__PURE__ */ jsx(Checkbox, {
+			id: "select-all",
+			checked: allCheckboxesSelected,
+			indeterminate: anyCheckboxesSelected && !allCheckboxesSelected,
+			onChange: onClick,
+			disabled: noCheckboxesAvailable,
+			sx: {
+				mr: -1.5,
+				height: 20
+			}
+		})
+	});
+});
+const SelectEnabledToolsPage = ({ type }) => {
+	const typeKey = type.toLowerCase();
+	const { tools } = useTools();
+	const { toggleToolKeys } = useSettingsActions();
+	const disabledTools = useSettingsStore((state) => state[`disabled${type}`]);
+	const { t } = useTranslation();
+	const headerRef = useRef(null);
+	const listRef = useRef(null);
+	const [searchValue, setSearchValue] = useState("");
+	const { listHeight } = useListHeight({
+		listParentRef: listRef,
+		headerRef
+	});
+	const filteredTools = useMemo(() => {
+		const toolsList = tools?.[typeKey] ?? [];
+		if (!searchValue) return toolsList;
+		const lowerSearchValue = searchValue.toLowerCase();
+		return toolsList.filter((tool) => tool.name.toLowerCase().includes(lowerSearchValue));
+	}, [
+		tools,
+		typeKey,
+		searchValue
+	]);
+	const handleSelectAll = useCallback(() => {
+		toggleToolKeys(type, filteredTools.map((tool) => tool.key));
+	}, [
+		toggleToolKeys,
+		type,
+		filteredTools
+	]);
+	const headerAction = useMemo(() => /* @__PURE__ */ jsx(SelectAllCheckbox, {
+		allCheckboxesSelected: !!filteredTools.length && filteredTools.every((tool) => !disabledTools.includes(tool.key)),
+		anyCheckboxesSelected: !!filteredTools.length && filteredTools.some((tool) => disabledTools.includes(tool.key)),
+		noCheckboxesAvailable: !filteredTools.length,
+		onClick: handleSelectAll
+	}), [
+		disabledTools,
+		handleSelectAll,
+		filteredTools
+	]);
+	useHeader(t(`settings.enabled${type}`), headerAction);
+	return /* @__PURE__ */ jsxs(PageContainer, {
+		disableGutters: true,
+		children: [/* @__PURE__ */ jsx(Box, {
+			ref: headerRef,
+			sx: {
+				px: 3,
+				pb: 2,
+				pt: 1.5
+			},
+			children: /* @__PURE__ */ jsx(SearchInput, {
+				onChange: debounce(useCallback((e) => {
+					setSearchValue(e.target.value);
+					listRef.current?.scrollTo(0, 0);
+				}, []), 250),
+				placeholder: t(`main.search${type}`),
+				autoFocus: true
+			})
+		}), /* @__PURE__ */ jsx(Box, {
+			ref: listRef,
+			style: {
+				height: listHeight,
+				overflow: "auto"
+			},
+			children: /* @__PURE__ */ jsx(Tools, {
+				filteredTools,
+				type
+			})
+		})]
+	});
+};
+//#endregion
+export { SelectEnabledToolsPage };
+
+//# sourceMappingURL=SelectEnabledToolsPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectEnabledToolsPage.js","names":[],"sources":["../../../src/pages/SelectEnabledToolsPage.tsx"],"sourcesContent":["import { Box, Checkbox, debounce, Tooltip } from '@mui/material'\nimport type { ChangeEvent, ChangeEventHandler } from 'react'\nimport { memo, useCallback, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { PageContainer } from '../components/PageContainer.js'\nimport { SearchInput } from '../components/Search/SearchInput.js'\nimport { type ToolCollectionTypes, Tools } from '../components/Tools/Tools.js'\nimport { useHeader } from '../hooks/useHeader.js'\nimport { useListHeight } from '../hooks/useListHeight.js'\nimport { useTools } from '../hooks/useTools.js'\nimport { useSettingsStore } from '../stores/settings/SettingsStore.js'\nimport { useSettingsActions } from '../stores/settings/useSettingsActions.js'\n\ninterface SelectAllCheckboxProps {\n  allCheckboxesSelected: boolean\n  onClick: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void\n  anyCheckboxesSelected: boolean\n  noCheckboxesAvailable: boolean\n}\n\nconst SelectAllCheckbox = memo<SelectAllCheckboxProps>(\n  ({\n    allCheckboxesSelected,\n    anyCheckboxesSelected,\n    noCheckboxesAvailable,\n    onClick,\n  }) => {\n    const { t } = useTranslation()\n    const tooltipTitle = noCheckboxesAvailable\n      ? undefined\n      : allCheckboxesSelected\n        ? t('tooltip.deselectAll')\n        : t('tooltip.selectAll')\n\n    return (\n      <Tooltip title={tooltipTitle}>\n        <Checkbox\n          id=\"select-all\"\n          checked={allCheckboxesSelected}\n          indeterminate={anyCheckboxesSelected && !allCheckboxesSelected}\n          onChange={onClick}\n          disabled={noCheckboxesAvailable}\n          sx={{ mr: -1.5, height: 20 }}\n        />\n      </Tooltip>\n    )\n  }\n)\n\nexport const SelectEnabledToolsPage: React.FC<{\n  type: 'Bridges' | 'Exchanges'\n}> = ({ type }) => {\n  const typeKey = type.toLowerCase() as 'bridges' | 'exchanges'\n  const { tools } = useTools()\n  const { toggleToolKeys } = useSettingsActions()\n\n  const disabledTools = useSettingsStore((state) => state[`disabled${type}`])\n\n  const { t } = useTranslation()\n  const headerRef = useRef<HTMLElement>(null)\n  const listRef = useRef<HTMLDivElement>(null)\n  const [searchValue, setSearchValue] = useState('')\n\n  const { listHeight } = useListHeight({\n    listParentRef: listRef,\n    headerRef,\n  })\n\n  const filteredTools = useMemo(() => {\n    const toolsList = tools?.[typeKey] ?? []\n\n    if (!searchValue) {\n      return toolsList\n    }\n\n    const lowerSearchValue = searchValue.toLowerCase()\n    return toolsList.filter((tool) =>\n      tool.name.toLowerCase().includes(lowerSearchValue)\n    ) as ToolCollectionTypes\n  }, [tools, typeKey, searchValue])\n\n  const handleSelectAll = useCallback(() => {\n    toggleToolKeys(\n      type,\n      filteredTools.map((tool) => tool.key)\n    )\n  }, [toggleToolKeys, type, filteredTools])\n\n  const headerAction = useMemo(\n    () => (\n      <SelectAllCheckbox\n        allCheckboxesSelected={\n          !!filteredTools.length &&\n          filteredTools.every((tool) => !disabledTools.includes(tool.key))\n        }\n        anyCheckboxesSelected={\n          !!filteredTools.length &&\n          filteredTools.some((tool) => disabledTools.includes(tool.key))\n        }\n        noCheckboxesAvailable={!filteredTools.length}\n        onClick={handleSelectAll}\n      />\n    ),\n    [disabledTools, handleSelectAll, filteredTools]\n  )\n\n  useHeader(t(`settings.enabled${type}`), headerAction)\n\n  const handleSearchInputChange: ChangeEventHandler<HTMLInputElement> =\n    useCallback((e) => {\n      setSearchValue(e.target.value)\n      listRef.current?.scrollTo(0, 0)\n    }, [])\n\n  const debouncedSearchInputChange = debounce(handleSearchInputChange, 250)\n\n  return (\n    <PageContainer disableGutters>\n      <Box ref={headerRef} sx={{ px: 3, pb: 2, pt: 1.5 }}>\n        <SearchInput\n          onChange={debouncedSearchInputChange}\n          placeholder={t(`main.search${type}`)}\n          autoFocus\n        />\n      </Box>\n      <Box ref={listRef} style={{ height: listHeight, overflow: 'auto' }}>\n        <Tools filteredTools={filteredTools} type={type} />\n      </Box>\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,oBAAoB,MACvB,EACC,uBACA,uBACA,uBACA,cACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAO7B,OACE,oBAAC,SAAD;EAAS,OAPU,wBACjB,KAAA,IACA,wBACE,EAAE,qBAAqB,IACvB,EAAE,mBAAmB;YAIvB,oBAAC,UAAD;GACE,IAAG;GACH,SAAS;GACT,eAAe,yBAAyB,CAAC;GACzC,UAAU;GACV,UAAU;GACV,IAAI;IAAE,IAAI;IAAM,QAAQ;GAAG;EAC5B,CAAA;CACM,CAAA;AAEb,CACF;AAEA,MAAa,0BAEP,EAAE,WAAW;CACjB,MAAM,UAAU,KAAK,YAAY;CACjC,MAAM,EAAE,UAAU,SAAS;CAC3B,MAAM,EAAE,mBAAmB,mBAAmB;CAE9C,MAAM,gBAAgB,kBAAkB,UAAU,MAAM,WAAW,OAAO;CAE1E,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,YAAY,OAAoB,IAAI;CAC1C,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;CAEjD,MAAM,EAAE,eAAe,cAAc;EACnC,eAAe;EACf;CACF,CAAC;CAED,MAAM,gBAAgB,cAAc;EAClC,MAAM,YAAY,QAAQ,YAAY,CAAC;EAEvC,IAAI,CAAC,aACH,OAAO;EAGT,MAAM,mBAAmB,YAAY,YAAY;EACjD,OAAO,UAAU,QAAQ,SACvB,KAAK,KAAK,YAAY,EAAE,SAAS,gBAAgB,CACnD;CACF,GAAG;EAAC;EAAO;EAAS;CAAW,CAAC;CAEhC,MAAM,kBAAkB,kBAAkB;EACxC,eACE,MACA,cAAc,KAAK,SAAS,KAAK,GAAG,CACtC;CACF,GAAG;EAAC;EAAgB;EAAM;CAAa,CAAC;CAExC,MAAM,eAAe,cAEjB,oBAAC,mBAAD;EACE,uBACE,CAAC,CAAC,cAAc,UAChB,cAAc,OAAO,SAAS,CAAC,cAAc,SAAS,KAAK,GAAG,CAAC;EAEjE,uBACE,CAAC,CAAC,cAAc,UAChB,cAAc,MAAM,SAAS,cAAc,SAAS,KAAK,GAAG,CAAC;EAE/D,uBAAuB,CAAC,cAAc;EACtC,SAAS;CACV,CAAA,GAEH;EAAC;EAAe;EAAiB;CAAa,CAChD;CAEA,UAAU,EAAE,mBAAmB,MAAM,GAAG,YAAY;CAUpD,OACE,qBAAC,eAAD;EAAe,gBAAA;YAAf,CACE,oBAAC,KAAD;GAAK,KAAK;GAAW,IAAI;IAAE,IAAI;IAAG,IAAI;IAAG,IAAI;GAAI;aAC/C,oBAAC,aAAD;IACE,UAN2B,SALjC,aAAa,MAAM;KACjB,eAAe,EAAE,OAAO,KAAK;KAC7B,QAAQ,SAAS,SAAS,GAAG,CAAC;IAChC,GAAG,CAAC,CAE4D,GAAG,GAM1B;IACnC,aAAa,EAAE,cAAc,MAAM;IACnC,WAAA;GACD,CAAA;EACE,CAAA,GACL,oBAAC,KAAD;GAAK,KAAK;GAAS,OAAO;IAAE,QAAQ;IAAY,UAAU;GAAO;aAC/D,oBAAC,OAAD;IAAsB;IAAqB;GAAO,CAAA;EAC/C,CAAA,CACQ;;AAEnB"}

package/dist/esm/pages/SelectTokenPage/SearchTokenInput.js

@@ -0,0 +1,40 @@
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { useChainOrderStore } from "../../stores/chains/ChainOrderStore.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { SearchInput } from "../../components/Search/SearchInput.js";
+import { useCallback, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/SelectTokenPage/SearchTokenInput.tsx
+const SearchTokenInput = ({ formType }) => {
+	const { t } = useTranslation();
+	const [value] = useFieldValues("tokenSearchFilter");
+	const { setFieldValue, setAsTouched } = useFieldActions();
+	const [fromChain, toChain] = useFieldValues("fromChain", "toChain");
+	const isAllNetworks = useChainOrderStore((state) => state[`${formType}IsAllNetworks`]);
+	const onChange = useCallback((newValue) => {
+		setFieldValue("tokenSearchFilter", newValue, {
+			isDirty: true,
+			isTouched: true
+		});
+	}, [setFieldValue]);
+	const onBlur = useCallback(() => {
+		setAsTouched("tokenSearchFilter");
+	}, [setAsTouched]);
+	useEffect(() => () => {
+		setFieldValue("tokenSearchFilter", "");
+	}, [setFieldValue]);
+	return /* @__PURE__ */ jsx(SearchInput, {
+		name: "tokenSearchFilter",
+		placeholder: t("main.tokenSearch"),
+		onChange: (e) => onChange(e.target.value),
+		onBlur,
+		onClear: () => setFieldValue("tokenSearchFilter", ""),
+		value,
+		autoFocus: true
+	}, `${fromChain}-${toChain}-${isAllNetworks}`);
+};
+//#endregion
+export { SearchTokenInput };
+
+//# sourceMappingURL=SearchTokenInput.js.map

package/dist/esm/pages/SelectTokenPage/SearchTokenInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchTokenInput.js","names":[],"sources":["../../../../src/pages/SelectTokenPage/SearchTokenInput.tsx"],"sourcesContent":["import { type JSX, useCallback, useEffect } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { SearchInput } from '../../components/Search/SearchInput.js'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\n\ninterface SearchTokenInputProps {\n  formType: FormType\n}\n\nexport const SearchTokenInput = ({\n  formType,\n}: SearchTokenInputProps): JSX.Element => {\n  const { t } = useTranslation()\n  const [value] = useFieldValues('tokenSearchFilter')\n  const { setFieldValue, setAsTouched } = useFieldActions()\n  const [fromChain, toChain] = useFieldValues('fromChain', 'toChain')\n  const isAllNetworks = useChainOrderStore(\n    (state) => state[`${formType}IsAllNetworks`]\n  )\n\n  const onChange = useCallback(\n    (newValue: string | number | undefined) => {\n      setFieldValue('tokenSearchFilter', newValue, {\n        isDirty: true,\n        isTouched: true,\n      })\n    },\n    [setFieldValue]\n  )\n\n  const onBlur = useCallback(() => {\n    setAsTouched('tokenSearchFilter')\n  }, [setAsTouched])\n\n  useEffect(\n    () => () => {\n      setFieldValue('tokenSearchFilter', '')\n    },\n    [setFieldValue]\n  )\n\n  return (\n    <SearchInput\n      // Reset the search input when a chain or the \"All Networks\" is changed\n      key={`${fromChain}-${toChain}-${isAllNetworks}`}\n      name=\"tokenSearchFilter\"\n      placeholder={t('main.tokenSearch')}\n      onChange={(e) => onChange((e.target as HTMLInputElement).value)}\n      onBlur={onBlur}\n      onClear={() => setFieldValue('tokenSearchFilter', '')}\n      value={value as string | undefined}\n      autoFocus\n    />\n  )\n}\n"],"mappings":";;;;;;;;AAYA,MAAa,oBAAoB,EAC/B,eACwC;CACxC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,CAAC,SAAS,eAAe,mBAAmB;CAClD,MAAM,EAAE,eAAe,iBAAiB,gBAAgB;CACxD,MAAM,CAAC,WAAW,WAAW,eAAe,aAAa,SAAS;CAClE,MAAM,gBAAgB,oBACnB,UAAU,MAAM,GAAG,SAAS,eAC/B;CAEA,MAAM,WAAW,aACd,aAA0C;EACzC,cAAc,qBAAqB,UAAU;GAC3C,SAAS;GACT,WAAW;EACb,CAAC;CACH,GACA,CAAC,aAAa,CAChB;CAEA,MAAM,SAAS,kBAAkB;EAC/B,aAAa,mBAAmB;CAClC,GAAG,CAAC,YAAY,CAAC;CAEjB,sBACc;EACV,cAAc,qBAAqB,EAAE;CACvC,GACA,CAAC,aAAa,CAChB;CAEA,OACE,oBAAC,aAAD;EAGE,MAAK;EACL,aAAa,EAAE,kBAAkB;EACjC,WAAW,MAAM,SAAU,EAAE,OAA4B,KAAK;EACtD;EACR,eAAe,cAAc,qBAAqB,EAAE;EAC7C;EACP,WAAA;CACD,GARM,GAAG,UAAU,GAAG,QAAQ,GAAG,eAQjC;AAEL"}