@lifi/widget 0.0.0-preview-6cc63bac

package/dist/esm/components/RouteCard/getMatchingLabels.js

@@ -0,0 +1,24 @@
+import { getConfigItemSets, isItemAllowedForSets } from "../../utils/item.js";
+//#region src/components/RouteCard/getMatchingLabels.ts
+const getMatchingLabels = (route, routeLabels) => {
+	if (!routeLabels?.length) return [];
+	return routeLabels.filter((rule) => {
+		const conditions = [];
+		if (rule.bridges || rule.exchanges) {
+			const toolNames = route.steps.flatMap((step) => step.includedSteps.map((s) => s.tool));
+			const bridgesConfigSets = getConfigItemSets(rule.bridges, (bridges) => new Set(bridges));
+			const exchangesConfigSets = getConfigItemSets(rule.exchanges, (exchanges) => new Set(exchanges));
+			conditions.push(toolNames.some((toolName) => isItemAllowedForSets(toolName, bridgesConfigSets) && isItemAllowedForSets(toolName, exchangesConfigSets)));
+		}
+		if (rule.fromTokenAddress?.length) conditions.push(rule.fromTokenAddress.includes(route.fromToken.address));
+		if (rule.toTokenAddress?.length) conditions.push(rule.toTokenAddress.includes(route.toToken.address));
+		if (rule.fromChainId?.length) conditions.push(rule.fromChainId.includes(route.fromChainId));
+		if (rule.toChainId?.length) conditions.push(rule.toChainId.includes(route.toChainId));
+		if (rule.match) conditions.push(rule.match(route));
+		return conditions.length && conditions.every(Boolean);
+	}).map((rule) => rule.label);
+};
+//#endregion
+export { getMatchingLabels };
+
+//# sourceMappingURL=getMatchingLabels.js.map

package/dist/esm/components/RouteCard/getMatchingLabels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMatchingLabels.js","names":[],"sources":["../../../../src/components/RouteCard/getMatchingLabels.ts"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport type { RouteLabel, RouteLabelRule } from '../../types/widget.js'\nimport { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'\n\nexport const getMatchingLabels = (\n  route: Route,\n  routeLabels?: RouteLabelRule[]\n): RouteLabel[] => {\n  if (!routeLabels?.length) {\n    return []\n  }\n\n  return routeLabels\n    .filter((rule) => {\n      const conditions: boolean[] = []\n\n      // Check bridge/exchange matches if specified\n      if (rule.bridges || rule.exchanges) {\n        const toolNames = route.steps.flatMap((step) =>\n          step.includedSteps.map((s) => s.tool)\n        )\n        const bridgesConfigSets = getConfigItemSets(\n          rule.bridges,\n          (bridges) => new Set(bridges)\n        )\n        const exchangesConfigSets = getConfigItemSets(\n          rule.exchanges,\n          (exchanges) => new Set(exchanges)\n        )\n        conditions.push(\n          toolNames.some(\n            (toolName) =>\n              isItemAllowedForSets(toolName, bridgesConfigSets) &&\n              isItemAllowedForSets(toolName, exchangesConfigSets)\n          )\n        )\n      }\n\n      // Check token matches if specified\n      if (rule.fromTokenAddress?.length) {\n        conditions.push(rule.fromTokenAddress.includes(route.fromToken.address))\n      }\n\n      if (rule.toTokenAddress?.length) {\n        conditions.push(rule.toTokenAddress.includes(route.toToken.address))\n      }\n\n      // Check chain matches if specified\n      if (rule.fromChainId?.length) {\n        conditions.push(rule.fromChainId.includes(route.fromChainId))\n      }\n\n      if (rule.toChainId?.length) {\n        conditions.push(rule.toChainId.includes(route.toChainId))\n      }\n\n      // Evaluate custom match function if specified\n      if (rule.match) {\n        conditions.push(rule.match(route))\n      }\n\n      // Must have at least one condition and all conditions must be true\n      return conditions.length && conditions.every(Boolean)\n    })\n    .map((rule) => rule.label)\n}\n"],"mappings":";;AAIA,MAAa,qBACX,OACA,gBACiB;CACjB,IAAI,CAAC,aAAa,QAChB,OAAO,CAAC;CAGV,OAAO,YACJ,QAAQ,SAAS;EAChB,MAAM,aAAwB,CAAC;EAG/B,IAAI,KAAK,WAAW,KAAK,WAAW;GAClC,MAAM,YAAY,MAAM,MAAM,SAAS,SACrC,KAAK,cAAc,KAAK,MAAM,EAAE,IAAI,CACtC;GACA,MAAM,oBAAoB,kBACxB,KAAK,UACJ,YAAY,IAAI,IAAI,OAAO,CAC9B;GACA,MAAM,sBAAsB,kBAC1B,KAAK,YACJ,cAAc,IAAI,IAAI,SAAS,CAClC;GACA,WAAW,KACT,UAAU,MACP,aACC,qBAAqB,UAAU,iBAAiB,KAChD,qBAAqB,UAAU,mBAAmB,CACtD,CACF;EACF;EAGA,IAAI,KAAK,kBAAkB,QACzB,WAAW,KAAK,KAAK,iBAAiB,SAAS,MAAM,UAAU,OAAO,CAAC;EAGzE,IAAI,KAAK,gBAAgB,QACvB,WAAW,KAAK,KAAK,eAAe,SAAS,MAAM,QAAQ,OAAO,CAAC;EAIrE,IAAI,KAAK,aAAa,QACpB,WAAW,KAAK,KAAK,YAAY,SAAS,MAAM,WAAW,CAAC;EAG9D,IAAI,KAAK,WAAW,QAClB,WAAW,KAAK,KAAK,UAAU,SAAS,MAAM,SAAS,CAAC;EAI1D,IAAI,KAAK,OACP,WAAW,KAAK,KAAK,MAAM,KAAK,CAAC;EAInC,OAAO,WAAW,UAAU,WAAW,MAAM,OAAO;CACtD,CAAC,EACA,KAAK,SAAS,KAAK,KAAK;AAC7B"}

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

@@ -0,0 +1,70 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { Card as Card$1 } from "../Card/Card.js";
+import { useRoutes } from "../../hooks/useRoutes.js";
+import { ProgressToNextUpdate } from "../ProgressToNextUpdate.js";
+import { RouteCard } from "../RouteCard/RouteCard.js";
+import { RouteCardSkeleton } from "../RouteCard/RouteCardSkeleton.js";
+import { RouteNotFoundCard } from "../RouteCard/RouteNotFoundCard.js";
+import { CardTitle } from "../Card/CardTitle.js";
+import { ButtonTertiary } from "../ButtonTertiary.js";
+import { useNavigate } from "@tanstack/react-router";
+import { Box, Collapse } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/Routes/Routes.tsx
+const Routes = (props) => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const { mode, modeOptions, showSingleRoute } = useWidgetConfig();
+	const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch } = useRoutes();
+	const currentRoute = routes?.[0];
+	if (!currentRoute && !isLoading && !isFetching && !isFetched) return null;
+	const handleCardClick = () => {
+		navigate({ to: navigationRoutes.routes });
+	};
+	const showAll = !(mode === "refuel" || showSingleRoute) && !(!currentRoute && !isLoading && !isFetching) && (routes?.length ?? 0) > 1;
+	const title = mode === "custom" ? modeOptions?.custom?.type === "deposit" ? t("header.receive") : t("header.youPay") : t("header.receive");
+	return /* @__PURE__ */ jsxs(Card$1, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(CardTitle, { children: title }),
+			/* @__PURE__ */ jsx(ProgressToNextUpdate, {
+				updatedAt: dataUpdatedAt || Date.now(),
+				timeToUpdate: refetchTime,
+				isLoading: isFetching,
+				onClick: () => refetch(),
+				sx: {
+					position: "absolute",
+					top: 8,
+					right: 8
+				}
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				sx: { p: 2 },
+				children: [isLoading && !currentRoute ? /* @__PURE__ */ jsx(RouteCardSkeleton, { variant: "cardless" }) : !currentRoute ? /* @__PURE__ */ jsx(RouteNotFoundCard, {}) : /* @__PURE__ */ jsx(RouteCard, {
+					route: currentRoute,
+					variant: "cardless",
+					active: true
+				}), /* @__PURE__ */ jsx(Collapse, {
+					timeout: 225,
+					in: showAll,
+					unmountOnExit: true,
+					mountOnEnter: true,
+					children: /* @__PURE__ */ jsx(Box, {
+						sx: { mt: 2 },
+						children: /* @__PURE__ */ jsx(ButtonTertiary, {
+							onClick: handleCardClick,
+							fullWidth: true,
+							children: t("button.showAll")
+						})
+					})
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { Routes };
+
+//# sourceMappingURL=Routes.js.map

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

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

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

@@ -0,0 +1,74 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { PageContainer } from "../PageContainer.js";
+import { useToAddressRequirements } from "../../hooks/useToAddressRequirements.js";
+import { ProgressToNextUpdate } from "../ProgressToNextUpdate.js";
+import { RouteCard } from "../RouteCard/RouteCard.js";
+import { RouteCardSkeleton } from "../RouteCard/RouteCardSkeleton.js";
+import { RouteNotFoundCard } from "../RouteCard/RouteNotFoundCard.js";
+import { Container as Container$1, Header } from "./RoutesExpanded.style.js";
+import { memo } from "react";
+import { Stack, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useAccount } from "@lifi/wallet-management";
+//#region src/components/Routes/RoutesContent.tsx
+const headerHeight = "52px";
+const RoutesContent = memo(function RoutesContent({ routes, isFetching, isLoading, dataUpdatedAt, refetchTime, fromChain, refetch, onRouteClick }) {
+	const { t } = useTranslation();
+	const { mode, modeOptions } = useWidgetConfig();
+	const { account } = useAccount({ chainType: fromChain?.chainType });
+	const [toAddress] = useFieldValues("toAddress");
+	const { requiredToAddress } = useToAddressRequirements();
+	const currentRoute = routes?.[0];
+	const routeNotFound = !currentRoute && !isLoading && !isFetching;
+	const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress;
+	const allowInteraction = account.isConnected && !toAddressUnsatisfied;
+	const title = mode === "custom" ? modeOptions?.custom?.type === "deposit" ? t("header.deposit") : t("header.youPay") : t("header.receive");
+	return /* @__PURE__ */ jsxs(Container$1, {
+		enableColorScheme: true,
+		minimumHeight: isLoading,
+		children: [/* @__PURE__ */ jsxs(Header, {
+			sx: { height: headerHeight },
+			children: [/* @__PURE__ */ jsx(Typography, {
+				noWrap: true,
+				sx: {
+					fontSize: 18,
+					fontWeight: "700",
+					flex: 1
+				},
+				children: title
+			}), /* @__PURE__ */ jsx(ProgressToNextUpdate, {
+				updatedAt: dataUpdatedAt || Date.now(),
+				timeToUpdate: refetchTime,
+				isLoading: isFetching,
+				onClick: () => refetch(),
+				sx: { marginRight: -1 }
+			})]
+		}), /* @__PURE__ */ jsx(PageContainer, {
+			sx: {
+				height: `calc(100% - ${headerHeight})`,
+				overflow: "auto"
+			},
+			children: /* @__PURE__ */ jsx(Stack, {
+				direction: "column",
+				spacing: 2,
+				sx: {
+					flex: 1,
+					paddingTop: 1.5,
+					paddingBottom: 3
+				},
+				children: routeNotFound ? /* @__PURE__ */ jsx(RouteNotFoundCard, {}) : (isLoading || isFetching) && !routes?.length ? Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx(RouteCardSkeleton, {}, index)) : routes?.map((route, index) => /* @__PURE__ */ jsx(RouteCard, {
+					route,
+					onClick: allowInteraction ? () => onRouteClick(route) : void 0,
+					active: index === 0,
+					expanded: routes?.length === 1
+				}, index))
+			})
+		})]
+	});
+});
+//#endregion
+export { RoutesContent };
+
+//# sourceMappingURL=RoutesContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RoutesContent.js","names":["Container"],"sources":["../../../../src/components/Routes/RoutesContent.tsx"],"sourcesContent":["import type { ExtendedChain, Route } from '@lifi/sdk'\nimport { useAccount } from '@lifi/wallet-management'\nimport { Stack, Typography } from '@mui/material'\nimport type React from 'react'\nimport { memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { PageContainer } from '../PageContainer.js'\nimport { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'\nimport { RouteCard } from '../RouteCard/RouteCard.js'\nimport { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\nimport { Container, Header } from './RoutesExpanded.style.js'\n\ninterface RoutesContentProps {\n  routes?: Route[]\n  isFetching: boolean\n  isLoading: boolean\n  dataUpdatedAt: number\n  refetchTime: number\n  fromChain: ExtendedChain | undefined\n  refetch: () => void\n  onRouteClick: (route: Route) => void\n}\n\nconst headerHeight = '52px'\n\nexport const RoutesContent: React.NamedExoticComponent<RoutesContentProps> =\n  memo(function RoutesContent({\n    routes,\n    isFetching,\n    isLoading,\n    dataUpdatedAt,\n    refetchTime,\n    fromChain,\n    refetch,\n    onRouteClick,\n  }: RoutesContentProps) {\n    const { t } = useTranslation()\n    const { mode, modeOptions } = useWidgetConfig()\n\n    const { account } = useAccount({ chainType: fromChain?.chainType })\n    const [toAddress] = useFieldValues('toAddress')\n    const { requiredToAddress } = useToAddressRequirements()\n\n    const currentRoute = routes?.[0]\n\n    const routeNotFound = !currentRoute && !isLoading && !isFetching\n    const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress\n    const allowInteraction = account.isConnected && !toAddressUnsatisfied\n\n    const title =\n      mode === 'custom'\n        ? modeOptions?.custom?.type === 'deposit'\n          ? t('header.deposit')\n          : t('header.youPay')\n        : t('header.receive')\n\n    return (\n      <Container enableColorScheme minimumHeight={isLoading}>\n        <Header sx={{ height: headerHeight }}>\n          <Typography\n            noWrap\n            sx={{\n              fontSize: 18,\n              fontWeight: '700',\n              flex: 1,\n            }}\n          >\n            {title}\n          </Typography>\n          <ProgressToNextUpdate\n            updatedAt={dataUpdatedAt || Date.now()}\n            timeToUpdate={refetchTime}\n            isLoading={isFetching}\n            onClick={() => refetch()}\n            sx={{ marginRight: -1 }}\n          />\n        </Header>\n        <PageContainer\n          sx={{ height: `calc(100% - ${headerHeight})`, overflow: 'auto' }}\n        >\n          <Stack\n            direction=\"column\"\n            spacing={2}\n            sx={{\n              flex: 1,\n              paddingTop: 1.5,\n              paddingBottom: 3,\n            }}\n          >\n            {routeNotFound ? (\n              <RouteNotFoundCard />\n            ) : (isLoading || isFetching) && !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 ? () => onRouteClick(route) : undefined\n                  }\n                  active={index === 0}\n                  expanded={routes?.length === 1}\n                />\n              ))\n            )}\n          </Stack>\n        </PageContainer>\n      </Container>\n    )\n  })\n"],"mappings":";;;;;;;;;;;;;;;AA2BA,MAAM,eAAe;AAErB,MAAa,gBACX,KAAK,SAAS,cAAc,EAC1B,QACA,YACA,WACA,eACA,aACA,WACA,SACA,gBACqB;CACrB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,MAAM,gBAAgB,gBAAgB;CAE9C,MAAM,EAAE,YAAY,WAAW,EAAE,WAAW,WAAW,UAAU,CAAC;CAClE,MAAM,CAAC,aAAa,eAAe,WAAW;CAC9C,MAAM,EAAE,sBAAsB,yBAAyB;CAEvD,MAAM,eAAe,SAAS;CAE9B,MAAM,gBAAgB,CAAC,gBAAgB,CAAC,aAAa,CAAC;CACtD,MAAM,uBAAuB,gBAAgB,qBAAqB,CAAC;CACnE,MAAM,mBAAmB,QAAQ,eAAe,CAAC;CAEjD,MAAM,QACJ,SAAS,WACL,aAAa,QAAQ,SAAS,YAC5B,EAAE,gBAAgB,IAClB,EAAE,eAAe,IACnB,EAAE,gBAAgB;CAExB,OACE,qBAACA,aAAD;EAAW,mBAAA;EAAkB,eAAe;YAA5C,CACE,qBAAC,QAAD;GAAQ,IAAI,EAAE,QAAQ,aAAa;aAAnC,CACE,oBAAC,YAAD;IACE,QAAA;IACA,IAAI;KACF,UAAU;KACV,YAAY;KACZ,MAAM;IACR;cAEC;GACS,CAAA,GACZ,oBAAC,sBAAD;IACE,WAAW,iBAAiB,KAAK,IAAI;IACrC,cAAc;IACd,WAAW;IACX,eAAe,QAAQ;IACvB,IAAI,EAAE,aAAa,GAAG;GACvB,CAAA,CACK;MACR,oBAAC,eAAD;GACE,IAAI;IAAE,QAAQ,eAAe,aAAa;IAAI,UAAU;GAAO;aAE/D,oBAAC,OAAD;IACE,WAAU;IACV,SAAS;IACT,IAAI;KACF,MAAM;KACN,YAAY;KACZ,eAAe;IACjB;cAEC,gBACC,oBAAC,mBAAD,CAAoB,CAAA,KACjB,aAAa,eAAe,CAAC,QAAQ,SACxC,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,GAAG,UAChC,oBAAC,mBAAD,CAAgC,GAAR,KAAQ,CACjC,IAED,QAAQ,KAAK,OAAc,UACzB,oBAAC,WAAD;KAES;KACP,SACE,yBAAyB,aAAa,KAAK,IAAI,KAAA;KAEjD,QAAQ,UAAU;KAClB,UAAU,QAAQ,WAAW;IAC9B,GAPM,KAON,CACF;GAEE,CAAA;EACM,CAAA,CACN;;AAEf,CAAC"}

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

@@ -0,0 +1,69 @@
+import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
+import "../../types/events.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { ExpansionTransition } from "../Expansion/ExpansionTransition.js";
+import { useRoutes } from "../../hooks/useRoutes.js";
+import { routesExpansionWidth } from "./RoutesExpanded.style.js";
+import { RoutesContent } from "./RoutesContent.js";
+import { memo, useCallback, useEffect, useLayoutEffect, useRef } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Routes/RoutesExpanded.tsx
+const RoutesExpanded = memo(function RoutesExpanded({ canOpen, setOpenExpansion }) {
+	const emitter = useWidgetEvents();
+	const navigate = useNavigate();
+	const routesRef = useRef(void 0);
+	const routesActiveRef = useRef(false);
+	const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, fromChain, refetch, setReviewableRoute } = useRoutes();
+	const onExit = useCallback(() => {
+		routesRef.current = void 0;
+	}, []);
+	if (routesRef.current && !routes) {
+		routesActiveRef.current = false;
+		if (isLoading) routesRef.current = void 0;
+	} else {
+		routesRef.current = routes;
+		routesActiveRef.current = Boolean(routes);
+	}
+	const expanded = Boolean(routesActiveRef.current || isLoading || isFetching || isFetched) && canOpen;
+	const onRouteClick = useCallback((route) => {
+		setReviewableRoute(route);
+		navigate({
+			to: navigationRoutes.transactionExecution,
+			search: { routeId: route.id }
+		});
+		emitter.emit("routeSelected", {
+			route,
+			routes
+		});
+	}, [
+		emitter,
+		routes,
+		setReviewableRoute
+	]);
+	useLayoutEffect(() => {
+		setOpenExpansion(expanded);
+	}, [expanded, setOpenExpansion]);
+	useEffect(() => {
+		emitter.emit("widgetExpanded", expanded);
+	}, [emitter, expanded]);
+	return /* @__PURE__ */ jsx(ExpansionTransition, {
+		in: expanded,
+		width: routesExpansionWidth,
+		onExited: onExit,
+		children: /* @__PURE__ */ jsx(RoutesContent, {
+			routes: routesRef.current,
+			isFetching,
+			isLoading,
+			dataUpdatedAt,
+			refetchTime,
+			fromChain,
+			refetch,
+			onRouteClick
+		})
+	});
+});
+//#endregion
+export { RoutesExpanded };
+
+//# sourceMappingURL=RoutesExpanded.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RoutesExpanded.js","names":[],"sources":["../../../../src/components/Routes/RoutesExpanded.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport { useNavigate } from '@tanstack/react-router'\nimport type React from 'react'\nimport { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ExpansionTransition } from '../Expansion/ExpansionTransition.js'\nimport { RoutesContent } from './RoutesContent.js'\nimport { routesExpansionWidth } from './RoutesExpanded.style.js'\n\ninterface RoutesExpandedProps {\n  canOpen: boolean\n  setOpenExpansion: (open: boolean) => void\n}\n\nexport const RoutesExpanded: React.NamedExoticComponent<RoutesExpandedProps> =\n  memo(function RoutesExpanded({\n    canOpen,\n    setOpenExpansion,\n  }: RoutesExpandedProps) {\n    const emitter = useWidgetEvents()\n    const navigate = useNavigate()\n    const routesRef = useRef<Route[]>(undefined)\n    const routesActiveRef = useRef(false)\n\n    const {\n      routes,\n      isLoading,\n      isFetching,\n      isFetched,\n      dataUpdatedAt,\n      refetchTime,\n      fromChain,\n      refetch,\n      setReviewableRoute,\n    } = useRoutes()\n\n    const onExit = useCallback(() => {\n      // Clean routes cache on exit\n      routesRef.current = undefined\n    }, [])\n\n    // We cache routes results in ref for a better exit animation\n    if (routesRef.current && !routes) {\n      routesActiveRef.current = false\n      // If we are loading routes with a new queryKey, we need to clear the cache\n      if (isLoading) {\n        routesRef.current = undefined\n      }\n    } else {\n      routesRef.current = routes\n      routesActiveRef.current = Boolean(routes)\n    }\n\n    const expanded =\n      Boolean(\n        routesActiveRef.current || isLoading || isFetching || isFetched\n      ) && canOpen\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: stable navigation callback that won't cause rerenders in RoutesContent\n    const onRouteClick = useCallback(\n      (route: Route) => {\n        setReviewableRoute(route)\n        navigate({\n          to: navigationRoutes.transactionExecution,\n          search: { routeId: route.id },\n        })\n        emitter.emit(WidgetEvent.RouteSelected, { route, routes: routes! })\n      },\n      [emitter, routes, setReviewableRoute]\n    )\n\n    // Use layout effect to update parent's width when expansion changes\n    useLayoutEffect(() => {\n      setOpenExpansion(expanded)\n    }, [expanded, setOpenExpansion])\n\n    useEffect(() => {\n      emitter.emit(WidgetEvent.WidgetExpanded, expanded)\n    }, [emitter, expanded])\n\n    return (\n      <ExpansionTransition\n        in={expanded}\n        width={routesExpansionWidth}\n        onExited={onExit}\n      >\n        <RoutesContent\n          routes={routesRef.current}\n          isFetching={isFetching}\n          isLoading={isLoading}\n          dataUpdatedAt={dataUpdatedAt}\n          refetchTime={refetchTime}\n          fromChain={fromChain}\n          refetch={refetch}\n          onRouteClick={onRouteClick}\n        />\n      </ExpansionTransition>\n    )\n  })\n"],"mappings":";;;;;;;;;;;AAiBA,MAAa,iBACX,KAAK,SAAS,eAAe,EAC3B,SACA,oBACsB;CACtB,MAAM,UAAU,gBAAgB;CAChC,MAAM,WAAW,YAAY;CAC7B,MAAM,YAAY,OAAgB,KAAA,CAAS;CAC3C,MAAM,kBAAkB,OAAO,KAAK;CAEpC,MAAM,EACJ,QACA,WACA,YACA,WACA,eACA,aACA,WACA,SACA,uBACE,UAAU;CAEd,MAAM,SAAS,kBAAkB;EAE/B,UAAU,UAAU,KAAA;CACtB,GAAG,CAAC,CAAC;CAGL,IAAI,UAAU,WAAW,CAAC,QAAQ;EAChC,gBAAgB,UAAU;EAE1B,IAAI,WACF,UAAU,UAAU,KAAA;CAExB,OAAO;EACL,UAAU,UAAU;EACpB,gBAAgB,UAAU,QAAQ,MAAM;CAC1C;CAEA,MAAM,WACJ,QACE,gBAAgB,WAAW,aAAa,cAAc,SACxD,KAAK;CAGP,MAAM,eAAe,aAClB,UAAiB;EAChB,mBAAmB,KAAK;EACxB,SAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,EAAE,SAAS,MAAM,GAAG;EAC9B,CAAC;EACD,QAAQ,KAAA,iBAAgC;GAAE;GAAe;EAAQ,CAAC;CACpE,GACA;EAAC;EAAS;EAAQ;CAAkB,CACtC;CAGA,sBAAsB;EACpB,iBAAiB,QAAQ;CAC3B,GAAG,CAAC,UAAU,gBAAgB,CAAC;CAE/B,gBAAgB;EACd,QAAQ,KAAA,kBAAiC,QAAQ;CACnD,GAAG,CAAC,SAAS,QAAQ,CAAC;CAEtB,OACE,oBAAC,qBAAD;EACE,IAAI;EACJ,OAAO;EACP,UAAU;YAEV,oBAAC,eAAD;GACE,QAAQ,UAAU;GACN;GACD;GACI;GACF;GACF;GACF;GACK;EACf,CAAA;CACkB,CAAA;AAEzB,CAAC"}

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

@@ -0,0 +1,34 @@
+import { getWidgetMaxHeight } from "../../utils/widgetSize.js";
+import { Box, ScopedCssBaseline, styled } from "@mui/material";
+//#region src/components/Routes/RoutesExpanded.style.ts
+const routesExpansionWidth = "436px";
+const Container$1 = styled(ScopedCssBaseline, { shouldForwardProp: (prop) => !["minimumHeight"].includes(prop) })(({ theme, minimumHeight }) => {
+	return {
+		...theme.container,
+		backgroundColor: theme.vars.palette.background.default,
+		overflow: "hidden",
+		width: routesExpansionWidth,
+		display: "flex",
+		flexDirection: "column",
+		whiteSpace: "normal",
+		...theme.container?.display !== "flex" ? {
+			maxHeight: getWidgetMaxHeight(theme),
+			...minimumHeight ? { "&": { height: "auto" } } : {}
+		} : { height: minimumHeight ? "auto" : "100%" },
+		...theme.routesContainer
+	};
+});
+const Header = styled(Box)(({ theme }) => ({
+	backgroundColor: theme.vars.palette.background.default,
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+	padding: theme.spacing(1.5, 3, 0, 3),
+	position: "sticky",
+	top: 0,
+	zIndex: 1200
+}));
+//#endregion
+export { Container$1 as Container, Header, routesExpansionWidth };
+
+//# sourceMappingURL=RoutesExpanded.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RoutesExpanded.style.js","names":["Container"],"sources":["../../../../src/components/Routes/RoutesExpanded.style.ts"],"sourcesContent":["import type { ScopedCssBaselineProps } from '@mui/material'\nimport { Box, ScopedCssBaseline, styled } from '@mui/material'\nimport type React from 'react'\nimport { getWidgetMaxHeight } from '../../utils/widgetSize.js'\n\nexport const routesExpansionWidth = '436px'\n\ninterface ContainerProps extends ScopedCssBaselineProps {\n  minimumHeight: boolean\n}\n\nexport const Container: React.FC<\n  React.ComponentProps<typeof ScopedCssBaseline> & ContainerProps\n> = styled(ScopedCssBaseline, {\n  shouldForwardProp: (prop) => !['minimumHeight'].includes(prop as string),\n})<ContainerProps>(({ theme, minimumHeight }) => {\n  return {\n    ...theme.container,\n    backgroundColor: theme.vars.palette.background.default,\n    overflow: 'hidden',\n    width: routesExpansionWidth,\n    display: 'flex',\n    flexDirection: 'column',\n    whiteSpace: 'normal',\n    ...(theme.container?.display !== 'flex'\n      ? {\n          maxHeight: getWidgetMaxHeight(theme),\n          ...(minimumHeight ? { '&': { height: 'auto' } } : {}),\n        }\n      : { height: minimumHeight ? 'auto' : '100%' }),\n    ...theme.routesContainer,\n  }\n})\n\nexport const Header: React.FC<React.ComponentProps<typeof Box>> = styled(Box)(\n  ({ theme }) => ({\n    backgroundColor: theme.vars.palette.background.default,\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    padding: theme.spacing(1.5, 3, 0, 3),\n    position: 'sticky',\n    top: 0,\n    zIndex: 1200,\n  })\n)\n"],"mappings":";;;AAKA,MAAa,uBAAuB;AAMpC,MAAaA,cAET,OAAO,mBAAmB,EAC5B,oBAAoB,SAAS,CAAC,CAAC,eAAe,EAAE,SAAS,IAAc,EACzE,CAAC,GAAmB,EAAE,OAAO,oBAAoB;CAC/C,OAAO;EACL,GAAG,MAAM;EACT,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,UAAU;EACV,OAAO;EACP,SAAS;EACT,eAAe;EACf,YAAY;EACZ,GAAI,MAAM,WAAW,YAAY,SAC7B;GACE,WAAW,mBAAmB,KAAK;GACnC,GAAI,gBAAgB,EAAE,KAAK,EAAE,QAAQ,OAAO,EAAE,IAAI,CAAC;EACrD,IACA,EAAE,QAAQ,gBAAgB,SAAS,OAAO;EAC9C,GAAG,MAAM;CACX;AACF,CAAC;AAED,MAAa,SAAqD,OAAO,GAAG,GACzE,EAAE,aAAa;CACd,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,SAAS,MAAM,QAAQ,KAAK,GAAG,GAAG,CAAC;CACnC,UAAU;CACV,KAAK;CACL,QAAQ;AACV,EACF"}

package/dist/esm/components/Search/SearchInput.js

@@ -0,0 +1,46 @@
+import { InputCard } from "../Card/InputCard.js";
+import { Input } from "./SearchInput.style.js";
+import { FormControl, IconButton, InputAdornment } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import ClearIcon from "@mui/icons-material/Clear";
+import Search from "@mui/icons-material/Search";
+//#region src/components/Search/SearchInput.tsx
+const SearchInput = ({ inputRef, name, placeholder, onChange, onBlur, onClear, value, autoFocus, size = "medium" }) => {
+	return /* @__PURE__ */ jsx(InputCard, { children: /* @__PURE__ */ jsx(FormControl, {
+		fullWidth: true,
+		children: /* @__PURE__ */ jsx(Input, {
+			inputRef,
+			size,
+			placeholder,
+			startAdornment: /* @__PURE__ */ jsx(InputAdornment, {
+				position: "start",
+				children: /* @__PURE__ */ jsx(Search, {})
+			}),
+			endAdornment: (value || inputRef?.current?.value) && onClear && /* @__PURE__ */ jsx(InputAdornment, {
+				position: "end",
+				children: /* @__PURE__ */ jsx(IconButton, {
+					size,
+					onClick: onClear,
+					"aria-label": "Clear",
+					tabIndex: -1,
+					sx: { padding: .5 },
+					children: /* @__PURE__ */ jsx(ClearIcon, { fontSize: size })
+				})
+			}),
+			inputProps: {
+				inputMode: "search",
+				onChange,
+				onBlur,
+				name,
+				value,
+				maxLength: 128
+			},
+			autoComplete: "off",
+			autoFocus
+		})
+	}) });
+};
+//#endregion
+export { SearchInput };
+
+//# sourceMappingURL=SearchInput.js.map

package/dist/esm/components/Search/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../../src/components/Search/SearchInput.tsx"],"sourcesContent":["import ClearIcon from '@mui/icons-material/Clear'\nimport Search from '@mui/icons-material/Search'\nimport { FormControl, IconButton, InputAdornment } from '@mui/material'\nimport type {\n  ChangeEventHandler,\n  FocusEventHandler,\n  JSX,\n  RefObject,\n} from 'react'\nimport { InputCard } from '../../components/Card/InputCard.js'\nimport { Input } from './SearchInput.style.js'\n\ninterface SearchInputProps {\n  inputRef?: RefObject<HTMLInputElement | null>\n  name?: string\n  value?: string\n  placeholder?: string\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  onBlur?: FocusEventHandler<HTMLInputElement>\n  onClear?: () => void\n  autoFocus?: boolean\n  size?: 'small' | 'medium'\n}\n\nexport const SearchInput = ({\n  inputRef,\n  name,\n  placeholder,\n  onChange,\n  onBlur,\n  onClear,\n  value,\n  autoFocus,\n  size = 'medium',\n}: SearchInputProps): JSX.Element => {\n  return (\n    <InputCard>\n      <FormControl fullWidth>\n        <Input\n          inputRef={inputRef}\n          size={size}\n          placeholder={placeholder}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <Search />\n            </InputAdornment>\n          }\n          endAdornment={\n            (value || inputRef?.current?.value) &&\n            onClear && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  size={size}\n                  onClick={onClear}\n                  aria-label=\"Clear\"\n                  tabIndex={-1}\n                  sx={{\n                    padding: 0.5,\n                  }}\n                >\n                  <ClearIcon fontSize={size} />\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          inputProps={{\n            inputMode: 'search',\n            onChange,\n            onBlur,\n            name,\n            value,\n            maxLength: 128,\n          }}\n          autoComplete=\"off\"\n          autoFocus={autoFocus}\n        />\n      </FormControl>\n    </InputCard>\n  )\n}\n"],"mappings":";;;;;;;AAwBA,MAAa,eAAe,EAC1B,UACA,MACA,aACA,UACA,QACA,SACA,OACA,WACA,OAAO,eAC4B;CACnC,OACE,oBAAC,WAAD,EAAA,UACE,oBAAC,aAAD;EAAa,WAAA;YACX,oBAAC,OAAD;GACY;GACJ;GACO;GACb,gBACE,oBAAC,gBAAD;IAAgB,UAAS;cACvB,oBAAC,QAAD,CAAS,CAAA;GACK,CAAA;GAElB,eACG,SAAS,UAAU,SAAS,UAC7B,WACE,oBAAC,gBAAD;IAAgB,UAAS;cACvB,oBAAC,YAAD;KACQ;KACN,SAAS;KACT,cAAW;KACX,UAAU;KACV,IAAI,EACF,SAAS,GACX;eAEA,oBAAC,WAAD,EAAW,UAAU,KAAO,CAAA;IAClB,CAAA;GACE,CAAA;GAGpB,YAAY;IACV,WAAW;IACX;IACA;IACA;IACA;IACA,WAAW;GACb;GACA,cAAa;GACF;EACZ,CAAA;CACU,CAAA,EACJ,CAAA;AAEf"}

package/dist/esm/components/Search/SearchInput.style.js

@@ -0,0 +1,27 @@
+import { Input as Input$1 } from "../Input.js";
+import { inputAdornmentClasses, inputBaseClasses, styled, svgIconClasses } from "@mui/material";
+//#region src/components/Search/SearchInput.style.tsx
+const Input = styled(Input$1, { shouldForwardProp: (prop) => prop !== "size" })(({ theme, size = "medium" }) => ({
+	paddingRight: size === "small" ? theme.spacing(1.25) : theme.spacing(1.75),
+	paddingLeft: theme.spacing(1.25),
+	fontSize: size === "small" ? "0.875rem" : "1rem",
+	borderRadius: theme.vars.shape.borderRadius,
+	[theme.breakpoints.down(theme.breakpoints.values.xs)]: { paddingRight: theme.spacing(1.25) },
+	[`& .${inputBaseClasses.input}`]: { padding: theme.spacing(1) },
+	[`& .${inputAdornmentClasses.root}`]: {
+		marginLeft: 0,
+		marginRight: 0,
+		[`& .${svgIconClasses.root}`]: { width: size === "small" ? "1.25rem" : "1.5rem" }
+	},
+	[`& .${inputAdornmentClasses.root}.${inputAdornmentClasses.positionEnd}`]: {
+		marginRight: size === "small" ? theme.spacing(-.5) : theme.spacing(-1),
+		[`& .${svgIconClasses.root}`]: {
+			width: size === "small" ? "1rem" : "1.25rem",
+			height: size === "small" ? "1rem" : "1.25rem"
+		}
+	}
+}));
+//#endregion
+export { Input };
+
+//# sourceMappingURL=SearchInput.style.js.map

package/dist/esm/components/Search/SearchInput.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.style.js","names":["InputBase"],"sources":["../../../../src/components/Search/SearchInput.style.tsx"],"sourcesContent":["import {\n  inputAdornmentClasses,\n  inputBaseClasses,\n  styled,\n  svgIconClasses,\n} from '@mui/material'\nimport type React from 'react'\nimport { Input as InputBase } from '../../components/Input.js'\n\ninterface InputProps {\n  size?: 'small' | 'medium'\n}\n\nexport const Input: React.FC<\n  React.ComponentProps<typeof InputBase> & InputProps\n> = styled(InputBase, {\n  shouldForwardProp: (prop) => prop !== 'size',\n})<InputProps>(({ theme, size = 'medium' }) => ({\n  paddingRight: size === 'small' ? theme.spacing(1.25) : theme.spacing(1.75),\n  paddingLeft: theme.spacing(1.25),\n  fontSize: size === 'small' ? '0.875rem' : '1rem',\n  borderRadius: theme.vars.shape.borderRadius,\n  [theme.breakpoints.down(theme.breakpoints.values.xs)]: {\n    paddingRight: theme.spacing(1.25),\n  },\n  [`& .${inputBaseClasses.input}`]: {\n    padding: theme.spacing(1),\n  },\n  [`& .${inputAdornmentClasses.root}`]: {\n    marginLeft: 0,\n    marginRight: 0,\n    [`& .${svgIconClasses.root}`]: {\n      width: size === 'small' ? '1.25rem' : '1.5rem',\n    },\n  },\n  [`& .${inputAdornmentClasses.root}.${inputAdornmentClasses.positionEnd}`]: {\n    marginRight: size === 'small' ? theme.spacing(-0.5) : theme.spacing(-1),\n    [`& .${svgIconClasses.root}`]: {\n      width: size === 'small' ? '1rem' : '1.25rem',\n      height: size === 'small' ? '1rem' : '1.25rem',\n    },\n  },\n}))\n"],"mappings":";;;AAaA,MAAa,QAET,OAAOA,SAAW,EACpB,oBAAoB,SAAS,SAAS,OACxC,CAAC,GAAe,EAAE,OAAO,OAAO,gBAAgB;CAC9C,cAAc,SAAS,UAAU,MAAM,QAAQ,IAAI,IAAI,MAAM,QAAQ,IAAI;CACzE,aAAa,MAAM,QAAQ,IAAI;CAC/B,UAAU,SAAS,UAAU,aAAa;CAC1C,cAAc,MAAM,KAAK,MAAM;EAC9B,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI,EACrD,cAAc,MAAM,QAAQ,IAAI,EAClC;EACC,MAAM,iBAAiB,UAAU,EAChC,SAAS,MAAM,QAAQ,CAAC,EAC1B;EACC,MAAM,sBAAsB,SAAS;EACpC,YAAY;EACZ,aAAa;GACZ,MAAM,eAAe,SAAS,EAC7B,OAAO,SAAS,UAAU,YAAY,SACxC;CACF;EACC,MAAM,sBAAsB,KAAK,GAAG,sBAAsB,gBAAgB;EACzE,aAAa,SAAS,UAAU,MAAM,QAAQ,GAAI,IAAI,MAAM,QAAQ,EAAE;GACrE,MAAM,eAAe,SAAS;GAC7B,OAAO,SAAS,UAAU,SAAS;GACnC,QAAQ,SAAS,UAAU,SAAS;EACtC;CACF;AACF,EAAE"}

package/dist/esm/components/Search/SearchNotFound.js

@@ -0,0 +1,9 @@
+import { NotFoundContainer, NotFoundIconContainer, NotFoundMessage } from "./SearchNotFound.style.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import SearchOff from "@mui/icons-material/SearchOff";
+//#region src/components/Search/SearchNotFound.tsx
+const SearchNotFound = ({ message }) => /* @__PURE__ */ jsxs(NotFoundContainer, { children: [/* @__PURE__ */ jsx(NotFoundIconContainer, { children: /* @__PURE__ */ jsx(SearchOff, { fontSize: "inherit" }) }), /* @__PURE__ */ jsx(NotFoundMessage, { children: message })] });
+//#endregion
+export { SearchNotFound };
+
+//# sourceMappingURL=SearchNotFound.js.map

package/dist/esm/components/Search/SearchNotFound.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchNotFound.js","names":[],"sources":["../../../../src/components/Search/SearchNotFound.tsx"],"sourcesContent":["import SearchOff from '@mui/icons-material/SearchOff'\nimport type { JSX } from 'react'\nimport {\n  NotFoundContainer,\n  NotFoundIconContainer,\n  NotFoundMessage,\n} from './SearchNotFound.style.js'\n\ninterface SearchNotFoundProps {\n  message: string\n}\n\nexport const SearchNotFound = ({\n  message,\n}: SearchNotFoundProps): JSX.Element => (\n  <NotFoundContainer>\n    <NotFoundIconContainer>\n      <SearchOff fontSize=\"inherit\" />\n    </NotFoundIconContainer>\n    <NotFoundMessage>{message}</NotFoundMessage>\n  </NotFoundContainer>\n)\n"],"mappings":";;;;AAYA,MAAa,kBAAkB,EAC7B,cAEA,qBAAC,mBAAD,EAAA,UAAA,CACE,oBAAC,uBAAD,EAAA,UACE,oBAAC,WAAD,EAAW,UAAS,UAAW,CAAA,EACV,CAAA,GACvB,oBAAC,iBAAD,EAAA,UAAkB,QAAyB,CAAA,CAC1B,EAAA,CAAA"}

package/dist/esm/components/Search/SearchNotFound.style.js

@@ -0,0 +1,28 @@
+import { Box, Typography, styled } from "@mui/material";
+//#region src/components/Search/SearchNotFound.style.tsx
+const NotFoundContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	justifyContent: "center",
+	alignItems: "center",
+	flexDirection: "column",
+	flex: 1,
+	padding: theme.spacing(3)
+}));
+const NotFoundMessage = styled(Typography)(({ theme }) => ({
+	fontSize: 14,
+	whiteSpace: "normal",
+	color: theme.vars.palette.text.secondary,
+	textAlign: "center",
+	flex: 1,
+	marginTop: theme.spacing(2),
+	paddingLeft: theme.spacing(2),
+	paddingRight: theme.spacing(2)
+}));
+const NotFoundIconContainer = styled(Typography)(() => ({
+	fontSize: 48,
+	lineHeight: 1
+}));
+//#endregion
+export { NotFoundContainer, NotFoundIconContainer, NotFoundMessage };
+
+//# sourceMappingURL=SearchNotFound.style.js.map

package/dist/esm/components/Search/SearchNotFound.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchNotFound.style.js","names":[],"sources":["../../../../src/components/Search/SearchNotFound.style.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const NotFoundContainer: React.FC<BoxProps> = styled(Box)(\n  ({ theme }) => ({\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    flexDirection: 'column',\n    flex: 1,\n    padding: theme.spacing(3),\n  })\n)\n\nexport const NotFoundMessage: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 14,\n  whiteSpace: 'normal',\n  color: theme.vars.palette.text.secondary,\n  textAlign: 'center',\n  flex: 1,\n  marginTop: theme.spacing(2),\n  paddingLeft: theme.spacing(2),\n  paddingRight: theme.spacing(2),\n}))\n\nexport const NotFoundIconContainer: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(() => ({\n  fontSize: 48,\n  lineHeight: 1,\n}))\n"],"mappings":";;AAIA,MAAa,oBAAwC,OAAO,GAAG,GAC5D,EAAE,aAAa;CACd,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,eAAe;CACf,MAAM;CACN,SAAS,MAAM,QAAQ,CAAC;AAC1B,EACF;AAEA,MAAa,kBAET,OAAO,UAAU,GAAG,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW;CACX,MAAM;CACN,WAAW,MAAM,QAAQ,CAAC;CAC1B,aAAa,MAAM,QAAQ,CAAC;CAC5B,cAAc,MAAM,QAAQ,CAAC;AAC/B,EAAE;AAEF,MAAa,wBAET,OAAO,UAAU,SAAS;CAC5B,UAAU;CACV,YAAY;AACd,EAAE"}

package/dist/esm/components/SelectChainAndToken.js

@@ -0,0 +1,36 @@
+import { useWidgetConfig } from "../providers/WidgetProvider/WidgetProvider.js";
+import { ReverseTokensButtonEmpty } from "./ReverseTokensButton/ReverseTokensButton.style.js";
+import { ReverseTokensButton } from "./ReverseTokensButton/ReverseTokensButton.js";
+import { SelectTokenButton } from "./SelectTokenButton/SelectTokenButton.js";
+import { Box } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/SelectChainAndToken.tsx
+const SelectChainAndToken = (props) => {
+	const { disabledUI, hiddenUI, mode } = useWidgetConfig();
+	const hiddenReverse = mode === "refuel" || disabledUI?.fromToken || disabledUI?.toToken || hiddenUI?.fromToken || hiddenUI?.toToken || hiddenUI?.reverseTokensButton;
+	const hiddenFromToken = hiddenUI?.fromToken;
+	const hiddenToToken = mode === "custom" || hiddenUI?.toToken;
+	const showReverseButton = !hiddenToToken && !hiddenFromToken;
+	return /* @__PURE__ */ jsxs(Box, {
+		...props,
+		sx: {
+			display: "flex",
+			...props.sx
+		},
+		children: [
+			!hiddenFromToken ? /* @__PURE__ */ jsx(SelectTokenButton, {
+				formType: "from",
+				hiddenReverse
+			}) : null,
+			showReverseButton ? !hiddenReverse ? /* @__PURE__ */ jsx(ReverseTokensButton, {}) : /* @__PURE__ */ jsx(ReverseTokensButtonEmpty, {}) : null,
+			!hiddenToToken ? /* @__PURE__ */ jsx(SelectTokenButton, {
+				formType: "to",
+				hiddenReverse
+			}) : null
+		]
+	});
+};
+//#endregion
+export { SelectChainAndToken };
+
+//# sourceMappingURL=SelectChainAndToken.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectChainAndToken.js","names":[],"sources":["../../../src/components/SelectChainAndToken.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { Box } from '@mui/material'\nimport { ReverseTokensButton } from '../components/ReverseTokensButton/ReverseTokensButton.js'\nimport { SelectTokenButton } from '../components/SelectTokenButton/SelectTokenButton.js'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { ReverseTokensButtonEmpty } from './ReverseTokensButton/ReverseTokensButton.style.js'\n\nexport const SelectChainAndToken: React.FC<BoxProps> = (props) => {\n  const { disabledUI, hiddenUI, mode } = useWidgetConfig()\n\n  const hiddenReverse =\n    mode === 'refuel' ||\n    disabledUI?.fromToken ||\n    disabledUI?.toToken ||\n    hiddenUI?.fromToken ||\n    hiddenUI?.toToken ||\n    hiddenUI?.reverseTokensButton\n\n  const hiddenFromToken = hiddenUI?.fromToken\n  const hiddenToToken = mode === 'custom' || hiddenUI?.toToken\n\n  const showReverseButton = !hiddenToToken && !hiddenFromToken\n\n  return (\n    <Box {...props} sx={{ display: 'flex', ...props.sx }}>\n      {!hiddenFromToken ? (\n        <SelectTokenButton formType=\"from\" hiddenReverse={hiddenReverse} />\n      ) : null}\n      {showReverseButton ? (\n        !hiddenReverse ? (\n          <ReverseTokensButton />\n        ) : (\n          <ReverseTokensButtonEmpty />\n        )\n      ) : null}\n      {!hiddenToToken ? (\n        <SelectTokenButton formType=\"to\" hiddenReverse={hiddenReverse} />\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;AAOA,MAAa,uBAA2C,UAAU;CAChE,MAAM,EAAE,YAAY,UAAU,SAAS,gBAAgB;CAEvD,MAAM,gBACJ,SAAS,YACT,YAAY,aACZ,YAAY,WACZ,UAAU,aACV,UAAU,WACV,UAAU;CAEZ,MAAM,kBAAkB,UAAU;CAClC,MAAM,gBAAgB,SAAS,YAAY,UAAU;CAErD,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAE7C,OACE,qBAAC,KAAD;EAAK,GAAI;EAAO,IAAI;GAAE,SAAS;GAAQ,GAAG,MAAM;EAAG;YAAnD;GACG,CAAC,kBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAsB;GAAgB,CAAA,IAChE;GACH,oBACC,CAAC,gBACC,oBAAC,qBAAD,CAAsB,CAAA,IAEtB,oBAAC,0BAAD,CAA2B,CAAA,IAE3B;GACH,CAAC,gBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAoB;GAAgB,CAAA,IAC9D;EACD;;AAET"}

package/dist/esm/components/SelectTokenButton/SelectTokenButton.js

@@ -0,0 +1,70 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { useChainOrderStore } from "../../stores/chains/ChainOrderStore.js";
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useChain } from "../../hooks/useChain.js";
+import { useToken } from "../../hooks/useToken.js";
+import { AvatarBadgedDefault, AvatarBadgedSkeleton } from "../Avatar/Avatar.js";
+import { TokenAvatar } from "../Avatar/TokenAvatar.js";
+import { CardTitle } from "../Card/CardTitle.js";
+import { CardContent as CardContent$1, SelectTokenCard, SelectTokenCardHeader } from "./SelectTokenButton.style.js";
+import { useNavigate } from "@tanstack/react-router";
+import { Skeleton } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/SelectTokenButton/SelectTokenButton.tsx
+const SelectTokenButton = ({ formType, hiddenReverse }) => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const { disabledUI, mode } = useWidgetConfig();
+	const tokenKey = FormKeyHelper.getTokenKey(formType);
+	const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), tokenKey);
+	const { chain, isLoading: isChainLoading } = useChain(chainId);
+	const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress);
+	const isAllNetworks = useChainOrderStore((state) => state[`${formType}IsAllNetworks`]);
+	const handleClick = () => {
+		navigate({ to: formType === "from" ? navigationRoutes.fromToken : mode === "refuel" ? navigationRoutes.toTokenNative : navigationRoutes.toToken });
+	};
+	const isSelected = !!(chain && token);
+	const onClick = !disabledUI?.[tokenKey] ? handleClick : void 0;
+	const defaultPlaceholder = `${t("main.select")}...`;
+	const cardTitle = formType === "from" && mode === "custom" ? t("header.payWith") : t(`main.${formType}`);
+	return /* @__PURE__ */ jsx(SelectTokenCard, {
+		component: "button",
+		onClick,
+		children: /* @__PURE__ */ jsxs(CardContent$1, {
+			formType,
+			mask: !hiddenReverse,
+			children: [/* @__PURE__ */ jsx(CardTitle, { children: cardTitle }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? /* @__PURE__ */ jsx(SelectTokenCardHeader, {
+				avatar: /* @__PURE__ */ jsx(AvatarBadgedSkeleton, {}),
+				title: /* @__PURE__ */ jsx(Skeleton, {
+					variant: "text",
+					width: 64,
+					height: 24
+				}),
+				subheader: /* @__PURE__ */ jsx(Skeleton, {
+					variant: "text",
+					width: 72,
+					height: 16
+				})
+			}) : /* @__PURE__ */ jsx(SelectTokenCardHeader, {
+				avatar: isSelected ? /* @__PURE__ */ jsx(TokenAvatar, {
+					token,
+					chain
+				}) : /* @__PURE__ */ jsx(AvatarBadgedDefault, { chain: isAllNetworks ? void 0 : chain }),
+				title: isSelected ? token.symbol : defaultPlaceholder,
+				slotProps: {
+					title: { title: isSelected ? token.symbol : defaultPlaceholder },
+					subheader: { title: isSelected ? chain.name : void 0 }
+				},
+				subheader: isSelected ? chain.name : null,
+				selected: isSelected
+			})]
+		})
+	});
+};
+//#endregion
+export { SelectTokenButton };
+
+//# sourceMappingURL=SelectTokenButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTokenButton.js","names":["CardContent"],"sources":["../../../../src/components/SelectTokenButton/SelectTokenButton.tsx"],"sourcesContent":["import { Skeleton } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport type { ChainOrderState } from '../../stores/chains/types.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport type { DisabledUIConfig } from '../../types/widget.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { AvatarBadgedDefault, AvatarBadgedSkeleton } from '../Avatar/Avatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport {\n  CardContent,\n  SelectTokenCard,\n  SelectTokenCardHeader,\n} from './SelectTokenButton.style.js'\n\nexport const SelectTokenButton: React.FC<\n  FormTypeProps & {\n    hiddenReverse?: boolean\n  }\n> = ({ formType, hiddenReverse }) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { disabledUI, mode } = useWidgetConfig()\n  const tokenKey = FormKeyHelper.getTokenKey(formType)\n  const [chainId, tokenAddress] = useFieldValues(\n    FormKeyHelper.getChainKey(formType),\n    tokenKey\n  )\n  const { chain, isLoading: isChainLoading } = useChain(chainId)\n  const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress)\n\n  const isAllNetworks = useChainOrderStore(\n    (state: ChainOrderState) => state[`${formType}IsAllNetworks`]\n  )\n\n  const handleClick = () => {\n    navigate({\n      to:\n        formType === 'from'\n          ? navigationRoutes.fromToken\n          : mode === 'refuel'\n            ? navigationRoutes.toTokenNative\n            : navigationRoutes.toToken,\n    })\n  }\n\n  const isSelected = !!(chain && token)\n  const onClick = !disabledUI?.[tokenKey as keyof DisabledUIConfig]\n    ? handleClick\n    : undefined\n  const defaultPlaceholder = `${t('main.select')}...`\n  const cardTitle: string =\n    formType === 'from' && mode === 'custom'\n      ? t('header.payWith')\n      : t(`main.${formType}`)\n  return (\n    <SelectTokenCard component=\"button\" onClick={onClick}>\n      <CardContent formType={formType} mask={!hiddenReverse}>\n        <CardTitle>{cardTitle}</CardTitle>\n        {chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (\n          <SelectTokenCardHeader\n            avatar={<AvatarBadgedSkeleton />}\n            title={<Skeleton variant=\"text\" width={64} height={24} />}\n            subheader={<Skeleton variant=\"text\" width={72} height={16} />}\n          />\n        ) : (\n          <SelectTokenCardHeader\n            avatar={\n              isSelected ? (\n                <TokenAvatar token={token} chain={chain} />\n              ) : (\n                <AvatarBadgedDefault\n                  chain={isAllNetworks ? undefined : chain}\n                />\n              )\n            }\n            title={isSelected ? token.symbol : defaultPlaceholder}\n            slotProps={{\n              title: {\n                title: isSelected ? token.symbol : defaultPlaceholder,\n              },\n              subheader: {\n                title: isSelected ? chain.name : undefined,\n              },\n            }}\n            subheader={isSelected ? chain.name : null}\n            selected={isSelected}\n          />\n        )}\n      </CardContent>\n    </SelectTokenCard>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,MAAa,qBAIR,EAAE,UAAU,oBAAoB;CACnC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,YAAY,SAAS,gBAAgB;CAC7C,MAAM,WAAW,cAAc,YAAY,QAAQ;CACnD,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,QACF;CACA,MAAM,EAAE,OAAO,WAAW,mBAAmB,SAAS,OAAO;CAC7D,MAAM,EAAE,OAAO,WAAW,mBAAmB,SAAS,SAAS,YAAY;CAE3E,MAAM,gBAAgB,oBACnB,UAA2B,MAAM,GAAG,SAAS,eAChD;CAEA,MAAM,oBAAoB;EACxB,SAAS,EACP,IACE,aAAa,SACT,iBAAiB,YACjB,SAAS,WACP,iBAAiB,gBACjB,iBAAiB,QAC3B,CAAC;CACH;CAEA,MAAM,aAAa,CAAC,EAAE,SAAS;CAC/B,MAAM,UAAU,CAAC,aAAa,YAC1B,cACA,KAAA;CACJ,MAAM,qBAAqB,GAAG,EAAE,aAAa,EAAE;CAC/C,MAAM,YACJ,aAAa,UAAU,SAAS,WAC5B,EAAE,gBAAgB,IAClB,EAAE,QAAQ,UAAU;CAC1B,OACE,oBAAC,iBAAD;EAAiB,WAAU;EAAkB;YAC3C,qBAACA,eAAD;GAAuB;GAAU,MAAM,CAAC;aAAxC,CACE,oBAAC,WAAD,EAAA,UAAY,UAAqB,CAAA,GAChC,WAAW,iBAAiB,kBAAkB,kBAC7C,oBAAC,uBAAD;IACE,QAAQ,oBAAC,sBAAD,CAAuB,CAAA;IAC/B,OAAO,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA;IACxD,WAAW,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA;GAC7D,CAAA,IAED,oBAAC,uBAAD;IACE,QACE,aACE,oBAAC,aAAD;KAAoB;KAAc;IAAQ,CAAA,IAE1C,oBAAC,qBAAD,EACE,OAAO,gBAAgB,KAAA,IAAY,MACpC,CAAA;IAGL,OAAO,aAAa,MAAM,SAAS;IACnC,WAAW;KACT,OAAO,EACL,OAAO,aAAa,MAAM,SAAS,mBACrC;KACA,WAAW,EACT,OAAO,aAAa,MAAM,OAAO,KAAA,EACnC;IACF;IACA,WAAW,aAAa,MAAM,OAAO;IACrC,UAAU;GACX,CAAA,CAEQ;;CACE,CAAA;AAErB"}