npm - @lifi/widget - Versions diffs - 4.0.0-beta.14 → 4.0.0-beta.18 - Mend

@lifi/widget 4.0.0-beta.14 → 4.0.0-beta.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (294) hide show

package/dist/esm/AppDefault.js CHANGED Viewed

@@ -16,6 +16,7 @@ import { SendToWalletPage } from "./pages/SendToWallet/SendToWalletPage.js";
 import { SettingsPage } from "./pages/SettingsPage/SettingsPage.js";
 import { TransactionDetailsPage } from "./pages/TransactionDetailsPage/TransactionDetailsPage.js";
 import { TransactionPage } from "./pages/TransactionPage/TransactionPage.js";
+import { useState } from "react";
 import { RouterProvider, createMemoryHistory, createRootRoute, createRoute, createRouter } from "@tanstack/react-router";
 import { jsx } from "react/jsx-runtime";
 //#region src/AppDefault.tsx
@@ -173,37 +174,38 @@ const transactionExecutionDetailsRoute = createRoute({
 	path: navigationRoutes.transactionDetails,
 	component: TransactionDetailsPage
 });
-const router = createRouter({
-	routeTree: rootRoute.addChildren([
-		indexRoute,
-		settingsLayoutRoute.addChildren([
-			settingsIndexRoute,
-			settingsLanguagesRoute,
-			settingsBridgesRoute,
-			settingsExchangesRoute
-		]),
-		fromTokenLayoutRoute.addChildren([fromTokenIndexRoute, fromTokenFromChainRoute]),
-		toTokenLayoutRoute.addChildren([toTokenIndexRoute, toTokenToChainRoute]),
-		toTokenNativeRoute,
-		routesLayoutRoute.addChildren([routesIndexRoute, routesTransactionExecutionRoute.addChildren([routesTransactionExecutionIndexRoute, routesTransactionExecutionDetailsRoute])]),
-		transactionExecutionLayoutRoute.addChildren([transactionExecutionIndexRoute, transactionExecutionDetailsRoute]),
-		activitiesLayoutRoute.addChildren([
-			activitiesIndexRoute,
-			activitiesDetailsRoute,
-			activitiesTransactionExecutionRoute
-		]),
-		sendToWalletLayoutRoute.addChildren([
-			sendToWalletIndexRoute,
-			sendToWalletBookmarksRoute,
-			sendToWalletRecentWalletsRoute,
-			sendToWalletConnectedWalletsRoute
-		]),
-		configuredWalletsRoute
+const routeTree = rootRoute.addChildren([
+	indexRoute,
+	settingsLayoutRoute.addChildren([
+		settingsIndexRoute,
+		settingsLanguagesRoute,
+		settingsBridgesRoute,
+		settingsExchangesRoute
 	]),
-	history: createMemoryHistory({ initialEntries: ["/"] }),
-	defaultPreload: "intent"
-});
+	fromTokenLayoutRoute.addChildren([fromTokenIndexRoute, fromTokenFromChainRoute]),
+	toTokenLayoutRoute.addChildren([toTokenIndexRoute, toTokenToChainRoute]),
+	toTokenNativeRoute,
+	routesLayoutRoute.addChildren([routesIndexRoute, routesTransactionExecutionRoute.addChildren([routesTransactionExecutionIndexRoute, routesTransactionExecutionDetailsRoute])]),
+	transactionExecutionLayoutRoute.addChildren([transactionExecutionIndexRoute, transactionExecutionDetailsRoute]),
+	activitiesLayoutRoute.addChildren([
+		activitiesIndexRoute,
+		activitiesDetailsRoute,
+		activitiesTransactionExecutionRoute
+	]),
+	sendToWalletLayoutRoute.addChildren([
+		sendToWalletIndexRoute,
+		sendToWalletBookmarksRoute,
+		sendToWalletRecentWalletsRoute,
+		sendToWalletConnectedWalletsRoute
+	]),
+	configuredWalletsRoute
+]);
 const AppDefault = () => {
+	const [router] = useState(() => createRouter({
+		routeTree,
+		history: createMemoryHistory({ initialEntries: ["/"] }),
+		defaultPreload: "intent"
+	}));
 	return /* @__PURE__ */ jsx(RouterProvider, { router });
 };
 //#endregion

package/dist/esm/AppDefault.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppDefault.js","names":[],"sources":["../../src/AppDefault.tsx"],"sourcesContent":["import {\n createMemoryHistory,\n createRootRoute,\n createRoute,\n createRouter,\n RouterProvider,\n} from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { AppLayout } from './AppLayout.js'\nimport { NotFound } from './components/NotFound.js'\nimport { ActivitiesPage } from './pages/ActivitiesPage/ActivitiesPage.js'\nimport { LanguagesPage } from './pages/LanguagesPage.js'\nimport { MainPage } from './pages/MainPage/MainPage.js'\nimport { RoutesPage } from './pages/RoutesPage/RoutesPage.js'\nimport { SelectChainPage } from './pages/SelectChainPage/SelectChainPage.js'\nimport { SelectEnabledToolsPage } from './pages/SelectEnabledToolsPage.js'\nimport { SelectTokenPage } from './pages/SelectTokenPage/SelectTokenPage.js'\nimport { BookmarksPage } from './pages/SendToWallet/BookmarksPage.js'\nimport { ConnectedWalletsPage } from './pages/SendToWallet/ConnectedWalletsPage.js'\nimport { RecentWalletsPage } from './pages/SendToWallet/RecentWalletsPage.js'\nimport { SendToConfiguredWalletPage } from './pages/SendToWallet/SendToConfiguredWalletPage.js'\nimport { SendToWalletPage } from './pages/SendToWallet/SendToWalletPage.js'\nimport { SettingsPage } from './pages/SettingsPage/SettingsPage.js'\nimport { TransactionDetailsPage } from './pages/TransactionDetailsPage/TransactionDetailsPage.js'\nimport { TransactionPage } from './pages/TransactionPage/TransactionPage.js'\nimport { navigationRoutes } from './utils/navigationRoutes.js'\n\nconst rootRoute = createRootRoute({\n component: AppLayout,\n notFoundComponent: NotFound,\n})\n\nconst indexRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: navigationRoutes.home,\n component: MainPage,\n})\n\nconst settingsLayoutRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: navigationRoutes.settings,\n})\n\nconst settingsIndexRoute = createRoute({\n getParentRoute: () => settingsLayoutRoute,\n path: '/',\n component: SettingsPage,\n})\n\nconst settingsBridgesRoute = createRoute({\n getParentRoute: () => settingsLayoutRoute,\n path: navigationRoutes.bridges,\n component: () => <SelectEnabledToolsPage type=\"Bridges\" />,\n})\n\nconst settingsExchangesRoute = createRoute({\n getParentRoute: () => settingsLayoutRoute,\n path: navigationRoutes.exchanges,\n component: () => <SelectEnabledToolsPage type=\"Exchanges\" />,\n})\n\nconst settingsLanguagesRoute = createRoute({\n getParentRoute: () => settingsLayoutRoute,\n path: navigationRoutes.languages,\n component: LanguagesPage,\n})\n\nconst fromTokenLayoutRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: navigationRoutes.fromToken,\n})\n\nconst fromTokenIndexRoute = createRoute({\n getParentRoute: () => fromTokenLayoutRoute,\n path: '/',\n component: () => <SelectTokenPage formType=\"from\" />,\n})\n\nconst fromTokenFromChainRoute = createRoute({\n getParentRoute: () => fromTokenLayoutRoute,\n path: navigationRoutes.fromChain,\n component: () => <SelectChainPage formType=\"from\" />,\n})\n\nconst toTokenLayoutRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: navigationRoutes.toToken,\n})\n\nconst toTokenIndexRoute = createRoute({\n getParentRoute: () => toTokenLayoutRoute,\n path: '/',\n component: () => <SelectTokenPage formType=\"to\" />,\n})\n\nconst toTokenToChainRoute = createRoute({\n getParentRoute: () => toTokenLayoutRoute,\n path: navigationRoutes.toChain,\n component: () => <SelectChainPage formType=\"to\" />,\n})\n\nconst toTokenNativeRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: navigationRoutes.toTokenNative,\n component: () => <SelectChainPage formType=\"to\" selectNativeToken />,\n})\n\nconst routesLayoutRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: navigationRoutes.routes,\n})\n\nconst routesIndexRoute = createRoute({\n getParentRoute: () => routesLayoutRoute,\n path: '/',\n component: RoutesPage,\n})\n\nconst routesTransactionExecutionRoute = createRoute({\n getParentRoute: () => routesLayoutRoute,\n path: navigationRoutes.transactionExecution,\n})\n\nconst routesTransactionExecutionIndexRoute = createRoute({\n getParentRoute: () => routesTransactionExecutionRoute,\n path: '/',\n component: TransactionPage,\n})\n\nconst routesTransactionExecutionDetailsRoute = createRoute({\n getParentRoute: () => routesTransactionExecutionRoute,\n path: navigationRoutes.transactionDetails,\n component: TransactionDetailsPage,\n})\n\nconst activitiesLayoutRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: navigationRoutes.activities,\n})\n\nconst activitiesIndexRoute = createRoute({\n getParentRoute: () => activitiesLayoutRoute,\n path: '/',\n component: ActivitiesPage,\n})\n\nconst activitiesDetailsRoute = createRoute({\n getParentRoute: () => activitiesLayoutRoute,\n path: navigationRoutes.transactionDetails,\n component: TransactionDetailsPage,\n})\n\nconst activitiesTransactionExecutionRoute = createRoute({\n getParentRoute: () => activitiesLayoutRoute,\n path: navigationRoutes.transactionExecution,\n component: TransactionPage,\n})\n\nconst sendToWalletLayoutRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: navigationRoutes.sendToWallet,\n})\n\nconst sendToWalletIndexRoute = createRoute({\n getParentRoute: () => sendToWalletLayoutRoute,\n path: '/',\n component: SendToWalletPage,\n})\n\nconst sendToWalletBookmarksRoute = createRoute({\n getParentRoute: () => sendToWalletLayoutRoute,\n path: navigationRoutes.bookmarks,\n component: BookmarksPage,\n})\n\nconst sendToWalletRecentWalletsRoute = createRoute({\n getParentRoute: () => sendToWalletLayoutRoute,\n path: navigationRoutes.recentWallets,\n component: RecentWalletsPage,\n})\n\nconst sendToWalletConnectedWalletsRoute = createRoute({\n getParentRoute: () => sendToWalletLayoutRoute,\n path: navigationRoutes.connectedWallets,\n component: ConnectedWalletsPage,\n})\n\nconst configuredWalletsRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: navigationRoutes.configuredWallets,\n component: SendToConfiguredWalletPage,\n})\n\nconst transactionExecutionLayoutRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: navigationRoutes.transactionExecution,\n})\n\nconst transactionExecutionIndexRoute = createRoute({\n getParentRoute: () => transactionExecutionLayoutRoute,\n path: '/',\n component: TransactionPage,\n})\n\nconst transactionExecutionDetailsRoute = createRoute({\n getParentRoute: () => transactionExecutionLayoutRoute,\n path: navigationRoutes.transactionDetails,\n component: TransactionDetailsPage,\n})\n\nconst routeTree = rootRoute.addChildren([\n indexRoute,\n settingsLayoutRoute.addChildren([\n settingsIndexRoute,\n settingsLanguagesRoute,\n settingsBridgesRoute,\n settingsExchangesRoute,\n ]),\n fromTokenLayoutRoute.addChildren([\n fromTokenIndexRoute,\n fromTokenFromChainRoute,\n ]),\n toTokenLayoutRoute.addChildren([toTokenIndexRoute, toTokenToChainRoute]),\n toTokenNativeRoute,\n routesLayoutRoute.addChildren([\n routesIndexRoute,\n routesTransactionExecutionRoute.addChildren([\n routesTransactionExecutionIndexRoute,\n routesTransactionExecutionDetailsRoute,\n ]),\n ]),\n transactionExecutionLayoutRoute.addChildren([\n transactionExecutionIndexRoute,\n transactionExecutionDetailsRoute,\n ]),\n activitiesLayoutRoute.addChildren([\n activitiesIndexRoute,\n activitiesDetailsRoute,\n activitiesTransactionExecutionRoute,\n ]),\n sendToWalletLayoutRoute.addChildren([\n sendToWalletIndexRoute,\n sendToWalletBookmarksRoute,\n sendToWalletRecentWalletsRoute,\n sendToWalletConnectedWalletsRoute,\n ]),\n configuredWalletsRoute,\n])\n\nconst history = createMemoryHistory({\n initialEntries: ['/'],\n})\n\nconst router: ReturnType<typeof createRouter> = createRouter({\n routeTree,\n history,\n defaultPreload: 'intent',\n})\n\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\nexport const AppDefault = (): JSX.Element => {\n return <RouterProvider router={router} />\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"AppDefault.js","names":[],"sources":["../../src/AppDefault.tsx"],"sourcesContent":["import {\n createMemoryHistory,\n createRootRoute,\n createRoute,\n createRouter,\n RouterProvider,\n} from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useState } from 'react'\nimport { AppLayout } from './AppLayout.js'\nimport { NotFound } from './components/NotFound.js'\nimport { ActivitiesPage } from './pages/ActivitiesPage/ActivitiesPage.js'\nimport { LanguagesPage } from './pages/LanguagesPage.js'\nimport { MainPage } from './pages/MainPage/MainPage.js'\nimport { RoutesPage } from './pages/RoutesPage/RoutesPage.js'\nimport { SelectChainPage } from './pages/SelectChainPage/SelectChainPage.js'\nimport { SelectEnabledToolsPage } from './pages/SelectEnabledToolsPage.js'\nimport { SelectTokenPage } from './pages/SelectTokenPage/SelectTokenPage.js'\nimport { BookmarksPage } from './pages/SendToWallet/BookmarksPage.js'\nimport { ConnectedWalletsPage } from './pages/SendToWallet/ConnectedWalletsPage.js'\nimport { RecentWalletsPage } from './pages/SendToWallet/RecentWalletsPage.js'\nimport { SendToConfiguredWalletPage } from './pages/SendToWallet/SendToConfiguredWalletPage.js'\nimport { SendToWalletPage } from './pages/SendToWallet/SendToWalletPage.js'\nimport { SettingsPage } from './pages/SettingsPage/SettingsPage.js'\nimport { TransactionDetailsPage } from './pages/TransactionDetailsPage/TransactionDetailsPage.js'\nimport { TransactionPage } from './pages/TransactionPage/TransactionPage.js'\nimport { navigationRoutes } from './utils/navigationRoutes.js'\n\nconst rootRoute = createRootRoute({\n component: AppLayout,\n notFoundComponent: NotFound,\n})\n\nconst indexRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: navigationRoutes.home,\n component: MainPage,\n})\n\nconst settingsLayoutRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: navigationRoutes.settings,\n})\n\nconst settingsIndexRoute = createRoute({\n getParentRoute: () => settingsLayoutRoute,\n path: '/',\n component: SettingsPage,\n})\n\nconst settingsBridgesRoute = createRoute({\n getParentRoute: () => settingsLayoutRoute,\n path: navigationRoutes.bridges,\n component: () => <SelectEnabledToolsPage type=\"Bridges\" />,\n})\n\nconst settingsExchangesRoute = createRoute({\n getParentRoute: () => settingsLayoutRoute,\n path: navigationRoutes.exchanges,\n component: () => <SelectEnabledToolsPage type=\"Exchanges\" />,\n})\n\nconst settingsLanguagesRoute = createRoute({\n getParentRoute: () => settingsLayoutRoute,\n path: navigationRoutes.languages,\n component: LanguagesPage,\n})\n\nconst fromTokenLayoutRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: navigationRoutes.fromToken,\n})\n\nconst fromTokenIndexRoute = createRoute({\n getParentRoute: () => fromTokenLayoutRoute,\n path: '/',\n component: () => <SelectTokenPage formType=\"from\" />,\n})\n\nconst fromTokenFromChainRoute = createRoute({\n getParentRoute: () => fromTokenLayoutRoute,\n path: navigationRoutes.fromChain,\n component: () => <SelectChainPage formType=\"from\" />,\n})\n\nconst toTokenLayoutRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: navigationRoutes.toToken,\n})\n\nconst toTokenIndexRoute = createRoute({\n getParentRoute: () => toTokenLayoutRoute,\n path: '/',\n component: () => <SelectTokenPage formType=\"to\" />,\n})\n\nconst toTokenToChainRoute = createRoute({\n getParentRoute: () => toTokenLayoutRoute,\n path: navigationRoutes.toChain,\n component: () => <SelectChainPage formType=\"to\" />,\n})\n\nconst toTokenNativeRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: navigationRoutes.toTokenNative,\n component: () => <SelectChainPage formType=\"to\" selectNativeToken />,\n})\n\nconst routesLayoutRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: navigationRoutes.routes,\n})\n\nconst routesIndexRoute = createRoute({\n getParentRoute: () => routesLayoutRoute,\n path: '/',\n component: RoutesPage,\n})\n\nconst routesTransactionExecutionRoute = createRoute({\n getParentRoute: () => routesLayoutRoute,\n path: navigationRoutes.transactionExecution,\n})\n\nconst routesTransactionExecutionIndexRoute = createRoute({\n getParentRoute: () => routesTransactionExecutionRoute,\n path: '/',\n component: TransactionPage,\n})\n\nconst routesTransactionExecutionDetailsRoute = createRoute({\n getParentRoute: () => routesTransactionExecutionRoute,\n path: navigationRoutes.transactionDetails,\n component: TransactionDetailsPage,\n})\n\nconst activitiesLayoutRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: navigationRoutes.activities,\n})\n\nconst activitiesIndexRoute = createRoute({\n getParentRoute: () => activitiesLayoutRoute,\n path: '/',\n component: ActivitiesPage,\n})\n\nconst activitiesDetailsRoute = createRoute({\n getParentRoute: () => activitiesLayoutRoute,\n path: navigationRoutes.transactionDetails,\n component: TransactionDetailsPage,\n})\n\nconst activitiesTransactionExecutionRoute = createRoute({\n getParentRoute: () => activitiesLayoutRoute,\n path: navigationRoutes.transactionExecution,\n component: TransactionPage,\n})\n\nconst sendToWalletLayoutRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: navigationRoutes.sendToWallet,\n})\n\nconst sendToWalletIndexRoute = createRoute({\n getParentRoute: () => sendToWalletLayoutRoute,\n path: '/',\n component: SendToWalletPage,\n})\n\nconst sendToWalletBookmarksRoute = createRoute({\n getParentRoute: () => sendToWalletLayoutRoute,\n path: navigationRoutes.bookmarks,\n component: BookmarksPage,\n})\n\nconst sendToWalletRecentWalletsRoute = createRoute({\n getParentRoute: () => sendToWalletLayoutRoute,\n path: navigationRoutes.recentWallets,\n component: RecentWalletsPage,\n})\n\nconst sendToWalletConnectedWalletsRoute = createRoute({\n getParentRoute: () => sendToWalletLayoutRoute,\n path: navigationRoutes.connectedWallets,\n component: ConnectedWalletsPage,\n})\n\nconst configuredWalletsRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: navigationRoutes.configuredWallets,\n component: SendToConfiguredWalletPage,\n})\n\nconst transactionExecutionLayoutRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: navigationRoutes.transactionExecution,\n})\n\nconst transactionExecutionIndexRoute = createRoute({\n getParentRoute: () => transactionExecutionLayoutRoute,\n path: '/',\n component: TransactionPage,\n})\n\nconst transactionExecutionDetailsRoute = createRoute({\n getParentRoute: () => transactionExecutionLayoutRoute,\n path: navigationRoutes.transactionDetails,\n component: TransactionDetailsPage,\n})\n\nconst routeTree = rootRoute.addChildren([\n indexRoute,\n settingsLayoutRoute.addChildren([\n settingsIndexRoute,\n settingsLanguagesRoute,\n settingsBridgesRoute,\n settingsExchangesRoute,\n ]),\n fromTokenLayoutRoute.addChildren([\n fromTokenIndexRoute,\n fromTokenFromChainRoute,\n ]),\n toTokenLayoutRoute.addChildren([toTokenIndexRoute, toTokenToChainRoute]),\n toTokenNativeRoute,\n routesLayoutRoute.addChildren([\n routesIndexRoute,\n routesTransactionExecutionRoute.addChildren([\n routesTransactionExecutionIndexRoute,\n routesTransactionExecutionDetailsRoute,\n ]),\n ]),\n transactionExecutionLayoutRoute.addChildren([\n transactionExecutionIndexRoute,\n transactionExecutionDetailsRoute,\n ]),\n activitiesLayoutRoute.addChildren([\n activitiesIndexRoute,\n activitiesDetailsRoute,\n activitiesTransactionExecutionRoute,\n ]),\n sendToWalletLayoutRoute.addChildren([\n sendToWalletIndexRoute,\n sendToWalletBookmarksRoute,\n sendToWalletRecentWalletsRoute,\n sendToWalletConnectedWalletsRoute,\n ]),\n configuredWalletsRoute,\n])\n\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: ReturnType<typeof createRouter>\n }\n}\n\nexport const AppDefault = (): JSX.Element => {\n const [router] = useState(() =>\n createRouter({\n routeTree,\n history: createMemoryHistory({ initialEntries: ['/'] }),\n defaultPreload: 'intent',\n })\n )\n return <RouterProvider router={router} />\n}\n"],"mappings":"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"}

package/dist/esm/AppLayout.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use client";
 import { useWidgetConfig } from "./providers/WidgetProvider/WidgetProvider.js";
-import { ElementId, createElementId } from "./utils/elements.js";
+import { createElementId } from "./utils/elements.js";
 import { AppContainer, AppExpandedContainer } from "./components/AppContainer.js";
 import { version } from "./config/version.js";
 import { Expansion } from "./components/Expansion/Expansion.js";
@@ -16,7 +16,7 @@ const AppLayout = () => {
 	const { elementId, buildUrl } = useWidgetConfig();
 	const wideVariant = useWideVariant();
 	return /* @__PURE__ */ jsxs(AppExpandedContainer, {
-		id: createElementId(ElementId.AppExpandedContainer, elementId),
+		id: createElementId("widget-app-expanded-container", elementId),
 		"data-version": version,
 		children: [/* @__PURE__ */ jsxs(AppContainer, { children: [
 			/* @__PURE__ */ jsx(Header, {}),

package/dist/esm/AppLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppLayout.js","names":[],"sources":["../../src/AppLayout.tsx"],"sourcesContent":["'use client'\nimport { Outlet } from '@tanstack/react-router'\nimport {\n AppContainer,\n AppExpandedContainer,\n} from './components/AppContainer.js'\nimport { Expansion } from './components/Expansion/Expansion.js'\nimport { Header } from './components/Header/Header.js'\nimport { Initializer } from './components/Initializer.js'\nimport { PageEntered } from './components/PageEntered.js'\nimport { version } from './config/version.js'\nimport { useWideVariant } from './hooks/useWideVariant.js'\nimport { useWidgetConfig } from './providers/WidgetProvider/WidgetProvider.js'\nimport { URLSearchParamsBuilder } from './stores/form/URLSearchParamsBuilder.js'\nimport { createElementId, ElementId } from './utils/elements.js'\n\nexport const AppLayout: React.FC = () => {\n const { elementId, buildUrl } = useWidgetConfig()\n const wideVariant = useWideVariant()\n\n return (\n <AppExpandedContainer\n id={createElementId(ElementId.AppExpandedContainer, elementId)}\n data-version={version}\n >\n <AppContainer>\n <Header />\n <Initializer />\n {buildUrl ? <URLSearchParamsBuilder /> : null}\n <PageEntered />\n <Outlet />\n </AppContainer>\n {wideVariant && <Expansion />}\n </AppExpandedContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAa,kBAA4B;CACvC,MAAM,EAAE,WAAW,aAAa,iBAAiB;CACjD,MAAM,cAAc,gBAAgB;AAEpC,QACE,qBAAC,sBAAD;EACE,IAAI,~~gBAAgB~~,~~UAAU~~,~~sBAAsB,~~UAAU;EAC9D,gBAAc;YAFhB,CAIE,qBAAC,cAAD,EAAA,UAAA;GACE,oBAAC,QAAD,EAAU,CAAA;GACV,oBAAC,aAAD,EAAe,CAAA;GACd,WAAW,oBAAC,wBAAD,EAA0B,CAAA,GAAG;GACzC,oBAAC,aAAD,EAAe,CAAA;GACf,oBAAC,QAAD,EAAU,CAAA;GACG,EAAA,CAAA,EACd,eAAe,oBAAC,WAAD,EAAa,CAAA,CACR"}
1	+ {"version":3,"file":"AppLayout.js","names":[],"sources":["../../src/AppLayout.tsx"],"sourcesContent":["'use client'\nimport { Outlet } from '@tanstack/react-router'\nimport {\n AppContainer,\n AppExpandedContainer,\n} from './components/AppContainer.js'\nimport { Expansion } from './components/Expansion/Expansion.js'\nimport { Header } from './components/Header/Header.js'\nimport { Initializer } from './components/Initializer.js'\nimport { PageEntered } from './components/PageEntered.js'\nimport { version } from './config/version.js'\nimport { useWideVariant } from './hooks/useWideVariant.js'\nimport { useWidgetConfig } from './providers/WidgetProvider/WidgetProvider.js'\nimport { URLSearchParamsBuilder } from './stores/form/URLSearchParamsBuilder.js'\nimport { createElementId, ElementId } from './utils/elements.js'\n\nexport const AppLayout: React.FC = () => {\n const { elementId, buildUrl } = useWidgetConfig()\n const wideVariant = useWideVariant()\n\n return (\n <AppExpandedContainer\n id={createElementId(ElementId.AppExpandedContainer, elementId)}\n data-version={version}\n >\n <AppContainer>\n <Header />\n <Initializer />\n {buildUrl ? <URLSearchParamsBuilder /> : null}\n <PageEntered />\n <Outlet />\n </AppContainer>\n {wideVariant && <Expansion />}\n </AppExpandedContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAa,kBAA4B;CACvC,MAAM,EAAE,WAAW,aAAa,iBAAiB;CACjD,MAAM,cAAc,gBAAgB;AAEpC,QACE,qBAAC,sBAAD;EACE,IAAI,gBAAA,iCAAgD,UAAU;EAC9D,gBAAc;YAFhB,CAIE,qBAAC,cAAD,EAAA,UAAA;GACE,oBAAC,QAAD,EAAU,CAAA;GACV,oBAAC,aAAD,EAAe,CAAA;GACd,WAAW,oBAAC,wBAAD,EAA0B,CAAA,GAAG;GACzC,oBAAC,aAAD,EAAe,CAAA;GACf,oBAAC,QAAD,EAAU,CAAA;GACG,EAAA,CAAA,EACd,eAAe,oBAAC,WAAD,EAAa,CAAA,CACR"}

package/dist/esm/components/AmountInput/AmountInput.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { DisabledUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { FormKeyHelper } from "../../stores/form/types.js";
 import { useFieldValues } from "../../stores/form/useFieldValues.js";
 import { useFieldActions } from "../../stores/form/useFieldActions.js";
@@ -20,7 +20,7 @@ const AmountInput = ({ formType, ...props }) => {
 	const { disabledUI } = useWidgetConfig();
 	const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
 	const { token } = useToken(chainId, tokenAddress);
-	const disabled = disabledUI?.includes(DisabledUI.FromAmount);
+	const disabled = disabledUI?.includes("fromAmount");
 	return /* @__PURE__ */ jsx(AmountInputBase, {
 		formType,
 		token,

package/dist/esm/components/AmountInput/AmountInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AmountInput.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInput.tsx"],"sourcesContent":["import type { Token } from '@lifi/sdk'\nimport type { CardProps } from '@mui/material'\nimport type { ChangeEvent, ReactNode } from 'react'\nimport { useLayoutEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToken } from '../../hooks/useToken.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { FormKeyHelper, type FormTypeProps } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport { DisabledUI } from '../../types/widget.js'\nimport {\n formatInputAmount,\n formatTokenPrice,\n priceToTokenAmount,\n usdDecimals,\n} from '../../utils/format.js'\nimport { fitInputText } from '../../utils/input.js'\nimport { InputCard } from '../Card/InputCard.js'\nimport {\n AmountInputCardHeader,\n AmountInputCardTitle,\n FormContainer,\n FormControl,\n Input,\n maxInputFontSize,\n minInputFontSize,\n} from './AmountInput.style.js'\nimport { AmountInputEndAdornment } from './AmountInputEndAdornment.js'\nimport { AmountInputStartAdornment } from './AmountInputStartAdornment.js'\nimport { PriceFormHelperText } from './PriceFormHelperText.js'\n\nexport const AmountInput: React.FC<FormTypeProps & CardProps> = ({\n formType,\n ...props\n}) => {\n const { disabledUI } = useWidgetConfig()\n\n const [chainId, tokenAddress] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType)\n )\n\n const { token } = useToken(chainId, tokenAddress)\n\n const disabled = disabledUI?.includes(DisabledUI.FromAmount)\n return (\n <AmountInputBase\n formType={formType}\n token={token}\n bottomAdornment={<PriceFormHelperText formType={formType} />}\n disabled={disabled}\n {...props}\n />\n )\n}\n\nconst AmountInputBase: React.FC<\n FormTypeProps &\n CardProps & {\n token?: Token\n startAdornment?: ReactNode\n bottomAdornment?: ReactNode\n disabled?: boolean\n }\n> = ({\n formType,\n token,\n startAdornment,\n bottomAdornment,\n disabled,\n ...props\n}) => {\n const { t } = useTranslation()\n const { subvariant, subvariantOptions } = useWidgetConfig()\n const ref = useRef<HTMLInputElement>(null)\n\n const isEditingRef = useRef(false)\n const [formattedPriceInput, setFormattedPriceInput] = useState('')\n\n const amountKey = FormKeyHelper.getAmountKey(formType)\n const [value] = useFieldValues(amountKey)\n const { setFieldValue } = useFieldActions()\n const { inputMode } = useInputModeStore()\n\n const currentInputMode = inputMode[formType]\n let displayValue: string\n if (isEditingRef.current) {\n if (currentInputMode === 'price') {\n displayValue = formattedPriceInput\n } else {\n displayValue = value as string\n }\n } else {\n if (currentInputMode === 'price') {\n const priceValue = formatTokenPrice(value as string, token?.priceUSD)\n displayValue = formatInputAmount(\n priceValue.toFixed(usdDecimals),\n usdDecimals\n )\n } else {\n displayValue = value as string\n }\n }\n\n const handleChange = (\n event: ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>\n ) => {\n const { value: inputValue } = event.target\n isEditingRef.current = true\n\n let formattedValue: string\n if (currentInputMode === 'price') {\n const cleanInputValue = inputValue.replace('$', '')\n formattedValue = formatInputAmount(cleanInputValue, usdDecimals, true)\n const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)\n setFormattedPriceInput(formattedValue)\n setFieldValue(amountKey, tokenValue, { isDirty: true, isTouched: true })\n } else {\n formattedValue = formatInputAmount(inputValue, token?.decimals, true)\n setFieldValue(amountKey, formattedValue, {\n isDirty: true,\n isTouched: true,\n })\n }\n }\n\n const handleBlur = (\n event: ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>\n ) => {\n const { value: inputValue } = event.target\n isEditingRef.current = false\n\n let formattedValue: string\n if (currentInputMode === 'price') {\n const cleanInputValue = inputValue.replace('$', '')\n formattedValue = formatInputAmount(cleanInputValue, usdDecimals)\n const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)\n const formattedAmount = formatInputAmount(tokenValue, token?.decimals)\n setFieldValue(amountKey, formattedAmount, {\n isDirty: true,\n isTouched: true,\n })\n } else {\n formattedValue = formatInputAmount(inputValue, token?.decimals)\n setFieldValue(amountKey, formattedValue, {\n isDirty: true,\n isTouched: true,\n })\n }\n }\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: we need run effect on value change\n useLayoutEffect(() => {\n if (ref.current) {\n fitInputText(maxInputFontSize, minInputFontSize, ref.current)\n }\n }, [displayValue])\n\n const title =\n subvariant === 'custom'\n ? subvariantOptions?.custom === 'deposit'\n ? t('header.amount')\n : t('header.youPay')\n : t('header.send')\n\n return (\n <InputCard {...props}>\n <AmountInputCardHeader>\n <AmountInputCardTitle>{title}</AmountInputCardTitle>\n </AmountInputCardHeader>\n <FormContainer>\n <AmountInputStartAdornment formType={formType} />\n <FormControl fullWidth>\n <Input\n inputRef={ref}\n size=\"small\"\n autoComplete=\"off\"\n placeholder={currentInputMode === 'price' ? '$0' : '0'}\n startAdornment={startAdornment}\n inputProps={{\n inputMode: 'decimal',\n }}\n onChange={handleChange}\n onBlur={handleBlur}\n value={\n currentInputMode === 'price'\n ? displayValue\n ? `$${displayValue}`\n : ''\n : displayValue\n }\n name={amountKey}\n disabled={disabled}\n required\n />\n {bottomAdornment}\n </FormControl>\n </FormContainer>\n {!disabled && <AmountInputEndAdornment formType={formType} />}\n </InputCard>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiCA,MAAa,eAAoD,EAC/D,UACA,GAAG,YACC;CACJ,MAAM,EAAE,eAAe,iBAAiB;CAExC,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,SAAS,EACnC,cAAc,YAAY,SAAS,CACpC;CAED,MAAM,EAAE,UAAU,SAAS,SAAS,aAAa;CAEjD,MAAM,WAAW,YAAY,~~SAAS~~,~~WAAW,WAAW~~;AAC5D,QACE,oBAAC,iBAAD;EACY;EACH;EACP,iBAAiB,oBAAC,qBAAD,EAA+B,UAAY,CAAA;EAClD;EACV,GAAI;EACJ,CAAA;;AAIN,MAAM,mBAQD,EACH,UACA,OACA,gBACA,iBACA,UACA,GAAG,YACC;CACJ,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,YAAY,sBAAsB,iBAAiB;CAC3D,MAAM,MAAM,OAAyB,KAAK;CAE1C,MAAM,eAAe,OAAO,MAAM;CAClC,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,GAAG;CAElE,MAAM,YAAY,cAAc,aAAa,SAAS;CACtD,MAAM,CAAC,SAAS,eAAe,UAAU;CACzC,MAAM,EAAE,kBAAkB,iBAAiB;CAC3C,MAAM,EAAE,cAAc,mBAAmB;CAEzC,MAAM,mBAAmB,UAAU;CACnC,IAAI;AACJ,KAAI,aAAa,QACf,KAAI,qBAAqB,QACvB,gBAAe;KAEf,gBAAe;UAGb,qBAAqB,QAEvB,gBAAe,kBADI,iBAAiB,OAAiB,OAAO,~~SAAS~~,~~CAExD~~,QAAA,EAAoB,EAAA,EAEhC;KAED,gBAAe;CAInB,MAAM,gBACJ,UACG;EACH,MAAM,EAAE,OAAO,eAAe,MAAM;AACpC,eAAa,UAAU;EAEvB,IAAI;AACJ,MAAI,qBAAqB,SAAS;AAEhC,oBAAiB,kBADO,WAAW,QAAQ,KAAK,~~GAAG~~,EAAA,~~GACc~~,KAAK;GACtE,MAAM,aAAa,mBAAmB,gBAAgB,OAAO,SAAS;AACtE,0BAAuB,eAAe;AACtC,iBAAc,WAAW,YAAY;IAAE,SAAS;IAAM,WAAW;IAAM,CAAC;SACnE;AACL,oBAAiB,kBAAkB,YAAY,OAAO,UAAU,KAAK;AACrE,iBAAc,WAAW,gBAAgB;IACvC,SAAS;IACT,WAAW;IACZ,CAAC;;;CAIN,MAAM,cACJ,UACG;EACH,MAAM,EAAE,OAAO,eAAe,MAAM;AACpC,eAAa,UAAU;EAEvB,IAAI;AACJ,MAAI,qBAAqB,SAAS;AAEhC,oBAAiB,kBADO,WAAW,QAAQ,KAAK,~~GAAG~~,EAAA,~~EACa~~;AAGhE,iBAAc,WADU,kBADL,mBAAmB,gBAAgB,OAAO,~~SAAS~~,~~EAChB~~,OAAO,~~SAAS~~,~~EAC5B~~;IACxC,SAAS;IACT,WAAW;IACZ,CAAC;SACG;AACL,oBAAiB,kBAAkB,YAAY,OAAO,SAAS;AAC/D,iBAAc,WAAW,gBAAgB;IACvC,SAAS;IACT,WAAW;IACZ,CAAC;;;AAKN,uBAAsB;AACpB,MAAI,IAAI,QACN,cAAA,IAAA,IAAiD,IAAI,QAAQ;IAE9D,CAAC,aAAa,CAAC;CAElB,MAAM,QACJ,eAAe,WACX,mBAAmB,WAAW,YAC5B,EAAE,gBAAgB,GAClB,EAAE,gBAAgB,GACpB,EAAE,cAAc;AAEtB,QACE,qBAAC,WAAD;EAAW,GAAI;YAAf;GACE,oBAAC,uBAAD,EAAA,UACE,oBAAC,sBAAD,EAAA,UAAuB,OAA6B,CAAA,EAC9B,CAAA;GACxB,qBAAC,eAAD,EAAA,UAAA,CACE,oBAAC,2BAAD,EAAqC,UAAY,CAAA,EACjD,qBAAC,aAAD;IAAa,WAAA;cAAb,CACE,oBAAC,OAAD;KACE,UAAU;KACV,MAAK;KACL,cAAa;KACb,aAAa,qBAAqB,UAAU,OAAO;KACnC;KAChB,YAAY,EACV,WAAW,WACZ;KACD,UAAU;KACV,QAAQ;KACR,OACE,qBAAqB,UACjB,eACE,IAAI,iBACJ,KACF;KAEN,MAAM;KACI;KACV,UAAA;KACA,CAAA,EACD,gBACW;MACA,EAAA,CAAA;GACf,CAAC,YAAY,oBAAC,yBAAD,EAAmC,UAAY,CAAA;GACnD"}
1	+ {"version":3,"file":"AmountInput.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInput.tsx"],"sourcesContent":["import type { Token } from '@lifi/sdk'\nimport type { CardProps } from '@mui/material'\nimport type { ChangeEvent, ReactNode } from 'react'\nimport { useLayoutEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToken } from '../../hooks/useToken.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { FormKeyHelper, type FormTypeProps } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport { DisabledUI } from '../../types/widget.js'\nimport {\n formatInputAmount,\n formatTokenPrice,\n priceToTokenAmount,\n usdDecimals,\n} from '../../utils/format.js'\nimport { fitInputText } from '../../utils/input.js'\nimport { InputCard } from '../Card/InputCard.js'\nimport {\n AmountInputCardHeader,\n AmountInputCardTitle,\n FormContainer,\n FormControl,\n Input,\n maxInputFontSize,\n minInputFontSize,\n} from './AmountInput.style.js'\nimport { AmountInputEndAdornment } from './AmountInputEndAdornment.js'\nimport { AmountInputStartAdornment } from './AmountInputStartAdornment.js'\nimport { PriceFormHelperText } from './PriceFormHelperText.js'\n\nexport const AmountInput: React.FC<FormTypeProps & CardProps> = ({\n formType,\n ...props\n}) => {\n const { disabledUI } = useWidgetConfig()\n\n const [chainId, tokenAddress] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType)\n )\n\n const { token } = useToken(chainId, tokenAddress)\n\n const disabled = disabledUI?.includes(DisabledUI.FromAmount)\n return (\n <AmountInputBase\n formType={formType}\n token={token}\n bottomAdornment={<PriceFormHelperText formType={formType} />}\n disabled={disabled}\n {...props}\n />\n )\n}\n\nconst AmountInputBase: React.FC<\n FormTypeProps &\n CardProps & {\n token?: Token\n startAdornment?: ReactNode\n bottomAdornment?: ReactNode\n disabled?: boolean\n }\n> = ({\n formType,\n token,\n startAdornment,\n bottomAdornment,\n disabled,\n ...props\n}) => {\n const { t } = useTranslation()\n const { subvariant, subvariantOptions } = useWidgetConfig()\n const ref = useRef<HTMLInputElement>(null)\n\n const isEditingRef = useRef(false)\n const [formattedPriceInput, setFormattedPriceInput] = useState('')\n\n const amountKey = FormKeyHelper.getAmountKey(formType)\n const [value] = useFieldValues(amountKey)\n const { setFieldValue } = useFieldActions()\n const { inputMode } = useInputModeStore()\n\n const currentInputMode = inputMode[formType]\n let displayValue: string\n if (isEditingRef.current) {\n if (currentInputMode === 'price') {\n displayValue = formattedPriceInput\n } else {\n displayValue = value as string\n }\n } else {\n if (currentInputMode === 'price') {\n const priceValue = formatTokenPrice(value as string, token?.priceUSD)\n displayValue = formatInputAmount(\n priceValue.toFixed(usdDecimals),\n usdDecimals\n )\n } else {\n displayValue = value as string\n }\n }\n\n const handleChange = (\n event: ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>\n ) => {\n const { value: inputValue } = event.target\n isEditingRef.current = true\n\n let formattedValue: string\n if (currentInputMode === 'price') {\n const cleanInputValue = inputValue.replace('$', '')\n formattedValue = formatInputAmount(cleanInputValue, usdDecimals, true)\n const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)\n setFormattedPriceInput(formattedValue)\n setFieldValue(amountKey, tokenValue, { isDirty: true, isTouched: true })\n } else {\n formattedValue = formatInputAmount(inputValue, token?.decimals, true)\n setFieldValue(amountKey, formattedValue, {\n isDirty: true,\n isTouched: true,\n })\n }\n }\n\n const handleBlur = (\n event: ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>\n ) => {\n const { value: inputValue } = event.target\n isEditingRef.current = false\n\n let formattedValue: string\n if (currentInputMode === 'price') {\n const cleanInputValue = inputValue.replace('$', '')\n formattedValue = formatInputAmount(cleanInputValue, usdDecimals)\n const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)\n const formattedAmount = formatInputAmount(tokenValue, token?.decimals)\n setFieldValue(amountKey, formattedAmount, {\n isDirty: true,\n isTouched: true,\n })\n } else {\n formattedValue = formatInputAmount(inputValue, token?.decimals)\n setFieldValue(amountKey, formattedValue, {\n isDirty: true,\n isTouched: true,\n })\n }\n }\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: we need run effect on value change\n useLayoutEffect(() => {\n if (ref.current) {\n fitInputText(maxInputFontSize, minInputFontSize, ref.current)\n }\n }, [displayValue])\n\n const title =\n subvariant === 'custom'\n ? subvariantOptions?.custom === 'deposit'\n ? t('header.amount')\n : t('header.youPay')\n : t('header.send')\n\n return (\n <InputCard {...props}>\n <AmountInputCardHeader>\n <AmountInputCardTitle>{title}</AmountInputCardTitle>\n </AmountInputCardHeader>\n <FormContainer>\n <AmountInputStartAdornment formType={formType} />\n <FormControl fullWidth>\n <Input\n inputRef={ref}\n size=\"small\"\n autoComplete=\"off\"\n placeholder={currentInputMode === 'price' ? '$0' : '0'}\n startAdornment={startAdornment}\n inputProps={{\n inputMode: 'decimal',\n }}\n onChange={handleChange}\n onBlur={handleBlur}\n value={\n currentInputMode === 'price'\n ? displayValue\n ? `$${displayValue}`\n : ''\n : displayValue\n }\n name={amountKey}\n disabled={disabled}\n required\n />\n {bottomAdornment}\n </FormControl>\n </FormContainer>\n {!disabled && <AmountInputEndAdornment formType={formType} />}\n </InputCard>\n )\n}\n"],"mappings":"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"}

package/dist/esm/components/AmountInput/AmountInputStartAdornment.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AmountInputStartAdornment.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInputStartAdornment.tsx"],"sourcesContent":["import { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { AvatarBadgedDefault } from '../Avatar/Avatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\n\nexport const AmountInputStartAdornment: React.FC<FormTypeProps> = ({\n formType,\n}) => {\n const [chainId, tokenAddress] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType)\n )\n\n const { chain } = useChain(chainId)\n const { token } = useToken(chainId, tokenAddress)\n const isSelected = !!(chain && token)\n\n return isSelected ? (\n <TokenAvatar token={token} chain={chain} />\n ) : (\n <AvatarBadgedDefault />\n )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,6BAAsD,EACjE,eACI;CACJ,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,SAAS,EACnC,cAAc,YAAY,SAAS,CACpC;CAED,MAAM,EAAE,UAAU,SAAS,QAAQ;CACnC,MAAM,EAAE,UAAU,SAAS,SAAS,aAAa;AAGjD,~~QAFmB~~,~~CAAC~~,EAAE,SAAS,SAG7B,oBAAC,aAAD;EAAoB;EAAc;EAAS,CAAA,GAE3C,oBAAC,qBAAD,EAAuB,CAAA"}
1	+ {"version":3,"file":"AmountInputStartAdornment.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInputStartAdornment.tsx"],"sourcesContent":["import { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { AvatarBadgedDefault } from '../Avatar/Avatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\n\nexport const AmountInputStartAdornment: React.FC<FormTypeProps> = ({\n formType,\n}) => {\n const [chainId, tokenAddress] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType)\n )\n\n const { chain } = useChain(chainId)\n const { token } = useToken(chainId, tokenAddress)\n const isSelected = !!(chain && token)\n\n return isSelected ? (\n <TokenAvatar token={token} chain={chain} />\n ) : (\n <AvatarBadgedDefault />\n )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,6BAAsD,EACjE,eACI;CACJ,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,SAAS,EACnC,cAAc,YAAY,SAAS,CACpC;CAED,MAAM,EAAE,UAAU,SAAS,QAAQ;CACnC,MAAM,EAAE,UAAU,SAAS,SAAS,aAAa;AAGjD,QAAO,CAFa,EAAE,SAAS,SAG7B,oBAAC,aAAD;EAAoB;EAAc;EAAS,CAAA,GAE3C,oBAAC,qBAAD,EAAuB,CAAA"}

package/dist/esm/components/AmountInput/PriceFormHelperText.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PriceFormHelperText.js","names":[],"sources":["../../../../src/components/AmountInput/PriceFormHelperText.tsx"],"sourcesContent":["import type { TokenAmount } from '@lifi/sdk'\nimport SwapVertIcon from '@mui/icons-material/SwapVert'\nimport { FormHelperText, Skeleton, Typography } from '@mui/material'\nimport type React from 'react'\nimport { memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { InputPriceButton } from './PriceFormHelperText.style.js'\n\nexport const PriceFormHelperText: React.NamedExoticComponent<FormTypeProps> =\n memo<FormTypeProps>(({ formType }) => {\n const [chainId, tokenAddress] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType)\n )\n const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)\n\n return (\n <PriceFormHelperTextBase\n formType={formType}\n isLoading={isLoading}\n tokenAddress={tokenAddress}\n token={token}\n />\n )\n })\n\nconst PriceFormHelperTextBase: React.FC<\n FormTypeProps & {\n isLoading?: boolean\n tokenAddress?: string\n token?: TokenAmount\n }\n> = ({ formType, isLoading, tokenAddress, token }) => {\n const { t } = useTranslation()\n const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType))\n const { inputMode, toggleInputMode } = useInputModeStore()\n\n const currentInputMode = inputMode[formType]\n\n const tokenAmount = token\n ? formatTokenAmount(token.amount, token.decimals)\n : '0'\n\n const getPriceAmountDisplayValue = () => {\n if (currentInputMode === 'amount') {\n const tokenPrice = formatTokenPrice(\n amount,\n token?.priceUSD,\n token?.decimals\n )\n return t('format.currency', { value: tokenPrice })\n } else {\n return t('format.tokenAmount', { value: amount \|\| '0' })\n }\n }\n\n const handleToggleMode = (e: React.MouseEvent) => {\n e.stopPropagation()\n toggleInputMode(formType)\n }\n\n return (\n <FormHelperText\n component=\"div\"\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n margin: 0,\n marginLeft: 1.25,\n marginTop: 0.5,\n }}\n >\n <InputPriceButton\n onClick={token?.priceUSD ? handleToggleMode : undefined}\n >\n <Typography\n sx={{\n color: 'text.secondary',\n fontWeight: 500,\n fontSize: 12,\n lineHeight: 1,\n marginRight: 0.25,\n maxWidth: 136,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }}\n >\n {getPriceAmountDisplayValue()}\n </Typography>\n {currentInputMode === 'price' && token?.symbol ? (\n <Typography\n sx={{\n color: 'text.secondary',\n fontWeight: 500,\n fontSize: 12,\n lineHeight: 1,\n wordBreak: 'break-word',\n overflowWrap: 'break-word',\n marginRight: 0.25,\n }}\n >\n {token.symbol}\n </Typography>\n ) : null}\n {token?.priceUSD && <SwapVertIcon sx={{ fontSize: 14 }} />}\n </InputPriceButton>\n {isLoading && tokenAddress ? (\n <Skeleton variant=\"text\" width={56} height={16} />\n ) : token?.amount ? (\n <Typography\n sx={{\n fontWeight: 500,\n fontSize: 12,\n color: 'text.secondary',\n lineHeight: 1,\n paddingLeft: 0.25,\n }}\n title={tokenAmount}\n >\n {`/ ${t('format.tokenAmount', {\n value: tokenAmount,\n })}`}\n </Typography>\n ) : null}\n </FormHelperText>\n )\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,sBACX,MAAqB,EAAE,eAAe;CACpC,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,SAAS,EACnC,cAAc,YAAY,SAAS,CACpC;CACD,MAAM,EAAE,OAAO,cAAc,uBAAuB,SAAS,aAAa;AAE1E,QACE,oBAAC,yBAAD;EACY;EACC;EACG;EACP;EACP,CAAA;EAEJ;AAEJ,MAAM,2BAMD,EAAE,UAAU,WAAW,cAAc,YAAY;CACpD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,CAAC,UAAU,eAAe,cAAc,aAAa,SAAS,CAAC;CACrE,MAAM,EAAE,WAAW,oBAAoB,mBAAmB;CAE1D,MAAM,mBAAmB,UAAU;CAEnC,MAAM,cAAc,QAChB,kBAAkB,MAAM,QAAQ,MAAM,SAAS,GAC/C;CAEJ,MAAM,mCAAmC;AACvC,MAAI,qBAAqB,SAMvB,QAAO,EAAE,mBAAmB,EAAE,OALX,iBACjB,QACA,OAAO,UACP,OAAO,~~SACR~~,~~EACgD~~,CAAC;MAElD,QAAO,EAAE,sBAAsB,EAAE,OAAO,UAAU,KAAK,CAAC;;CAI5D,MAAM,oBAAoB,MAAwB;AAChD,IAAE,iBAAiB;AACnB,kBAAgB,SAAS;;AAG3B,QACE,qBAAC,gBAAD;EACE,WAAU;EACV,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,QAAQ;GACR,YAAY;GACZ,WAAW;GACZ;YATH,CAWE,qBAAC,kBAAD;GACE,SAAS,OAAO,WAAW,mBAAmB,KAAA;aADhD;IAGE,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,YAAY;MACZ,UAAU;MACV,YAAY;MACZ,aAAa;MACb,UAAU;MACV,UAAU;MACV,cAAc;MACd,YAAY;MACb;eAEA,4BAA4B;KAClB,CAAA;IACZ,qBAAqB,WAAW,OAAO,SACtC,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,YAAY;MACZ,UAAU;MACV,YAAY;MACZ,WAAW;MACX,cAAc;MACd,aAAa;MACd;eAEA,MAAM;KACI,CAAA,GACX;IACH,OAAO,YAAY,oBAAC,cAAD,EAAc,IAAI,EAAE,UAAU,IAAI,EAAI,CAAA;IACzC;MAClB,aAAa,eACZ,oBAAC,UAAD;GAAU,SAAQ;GAAO,OAAO;GAAI,QAAQ;GAAM,CAAA,GAChD,OAAO,SACT,oBAAC,YAAD;GACE,IAAI;IACF,YAAY;IACZ,UAAU;IACV,OAAO;IACP,YAAY;IACZ,aAAa;IACd;GACD,OAAO;aAEN,KAAK,EAAE,sBAAsB,EAC5B,OAAO,aACR,CAAC;GACS,CAAA,GACX,KACW"}
1	+ {"version":3,"file":"PriceFormHelperText.js","names":[],"sources":["../../../../src/components/AmountInput/PriceFormHelperText.tsx"],"sourcesContent":["import type { TokenAmount } from '@lifi/sdk'\nimport SwapVertIcon from '@mui/icons-material/SwapVert'\nimport { FormHelperText, Skeleton, Typography } from '@mui/material'\nimport type React from 'react'\nimport { memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { InputPriceButton } from './PriceFormHelperText.style.js'\n\nexport const PriceFormHelperText: React.NamedExoticComponent<FormTypeProps> =\n memo<FormTypeProps>(({ formType }) => {\n const [chainId, tokenAddress] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType)\n )\n const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)\n\n return (\n <PriceFormHelperTextBase\n formType={formType}\n isLoading={isLoading}\n tokenAddress={tokenAddress}\n token={token}\n />\n )\n })\n\nconst PriceFormHelperTextBase: React.FC<\n FormTypeProps & {\n isLoading?: boolean\n tokenAddress?: string\n token?: TokenAmount\n }\n> = ({ formType, isLoading, tokenAddress, token }) => {\n const { t } = useTranslation()\n const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType))\n const { inputMode, toggleInputMode } = useInputModeStore()\n\n const currentInputMode = inputMode[formType]\n\n const tokenAmount = token\n ? formatTokenAmount(token.amount, token.decimals)\n : '0'\n\n const getPriceAmountDisplayValue = () => {\n if (currentInputMode === 'amount') {\n const tokenPrice = formatTokenPrice(\n amount,\n token?.priceUSD,\n token?.decimals\n )\n return t('format.currency', { value: tokenPrice })\n } else {\n return t('format.tokenAmount', { value: amount \|\| '0' })\n }\n }\n\n const handleToggleMode = (e: React.MouseEvent) => {\n e.stopPropagation()\n toggleInputMode(formType)\n }\n\n return (\n <FormHelperText\n component=\"div\"\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n margin: 0,\n marginLeft: 1.25,\n marginTop: 0.5,\n }}\n >\n <InputPriceButton\n onClick={token?.priceUSD ? handleToggleMode : undefined}\n >\n <Typography\n sx={{\n color: 'text.secondary',\n fontWeight: 500,\n fontSize: 12,\n lineHeight: 1,\n marginRight: 0.25,\n maxWidth: 136,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }}\n >\n {getPriceAmountDisplayValue()}\n </Typography>\n {currentInputMode === 'price' && token?.symbol ? (\n <Typography\n sx={{\n color: 'text.secondary',\n fontWeight: 500,\n fontSize: 12,\n lineHeight: 1,\n wordBreak: 'break-word',\n overflowWrap: 'break-word',\n marginRight: 0.25,\n }}\n >\n {token.symbol}\n </Typography>\n ) : null}\n {token?.priceUSD && <SwapVertIcon sx={{ fontSize: 14 }} />}\n </InputPriceButton>\n {isLoading && tokenAddress ? (\n <Skeleton variant=\"text\" width={56} height={16} />\n ) : token?.amount ? (\n <Typography\n sx={{\n fontWeight: 500,\n fontSize: 12,\n color: 'text.secondary',\n lineHeight: 1,\n paddingLeft: 0.25,\n }}\n title={tokenAmount}\n >\n {`/ ${t('format.tokenAmount', {\n value: tokenAmount,\n })}`}\n </Typography>\n ) : null}\n </FormHelperText>\n )\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,sBACX,MAAqB,EAAE,eAAe;CACpC,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,SAAS,EACnC,cAAc,YAAY,SAAS,CACpC;CACD,MAAM,EAAE,OAAO,cAAc,uBAAuB,SAAS,aAAa;AAE1E,QACE,oBAAC,yBAAD;EACY;EACC;EACG;EACP;EACP,CAAA;EAEJ;AAEJ,MAAM,2BAMD,EAAE,UAAU,WAAW,cAAc,YAAY;CACpD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,CAAC,UAAU,eAAe,cAAc,aAAa,SAAS,CAAC;CACrE,MAAM,EAAE,WAAW,oBAAoB,mBAAmB;CAE1D,MAAM,mBAAmB,UAAU;CAEnC,MAAM,cAAc,QAChB,kBAAkB,MAAM,QAAQ,MAAM,SAAS,GAC/C;CAEJ,MAAM,mCAAmC;AACvC,MAAI,qBAAqB,SAMvB,QAAO,EAAE,mBAAmB,EAAE,OALX,iBACjB,QACA,OAAO,UACP,OAAO,SAEsC,EAAE,CAAC;MAElD,QAAO,EAAE,sBAAsB,EAAE,OAAO,UAAU,KAAK,CAAC;;CAI5D,MAAM,oBAAoB,MAAwB;AAChD,IAAE,iBAAiB;AACnB,kBAAgB,SAAS;;AAG3B,QACE,qBAAC,gBAAD;EACE,WAAU;EACV,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,QAAQ;GACR,YAAY;GACZ,WAAW;GACZ;YATH,CAWE,qBAAC,kBAAD;GACE,SAAS,OAAO,WAAW,mBAAmB,KAAA;aADhD;IAGE,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,YAAY;MACZ,UAAU;MACV,YAAY;MACZ,aAAa;MACb,UAAU;MACV,UAAU;MACV,cAAc;MACd,YAAY;MACb;eAEA,4BAA4B;KAClB,CAAA;IACZ,qBAAqB,WAAW,OAAO,SACtC,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,YAAY;MACZ,UAAU;MACV,YAAY;MACZ,WAAW;MACX,cAAc;MACd,aAAa;MACd;eAEA,MAAM;KACI,CAAA,GACX;IACH,OAAO,YAAY,oBAAC,cAAD,EAAc,IAAI,EAAE,UAAU,IAAI,EAAI,CAAA;IACzC;MAClB,aAAa,eACZ,oBAAC,UAAD;GAAU,SAAQ;GAAO,OAAO;GAAI,QAAQ;GAAM,CAAA,GAChD,OAAO,SACT,oBAAC,YAAD;GACE,IAAI;IACF,YAAY;IACZ,UAAU;IACV,OAAO;IACP,YAAY;IACZ,aAAa;IACd;GACD,OAAO;aAEN,KAAK,EAAE,sBAAsB,EAC5B,OAAO,aACR,CAAC;GACS,CAAA,GACX,KACW"}

package/dist/esm/components/AppContainer.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import "../config/constants.js";
 import { useWidgetConfig } from "../providers/WidgetProvider/WidgetProvider.js";
 import { useHeaderHeight } from "../stores/header/useHeaderStore.js";
-import { ElementId, createElementId } from "../utils/elements.js";
+import { createElementId } from "../utils/elements.js";
 import { getWidgetMaxHeight } from "../utils/widgetSize.js";
 import { Box, Container, ScopedCssBaseline, styled } from "@mui/material";
 import { jsx } from "react/jsx-runtime";
@@ -75,9 +75,9 @@ const AppContainer = ({ children }) => {
 	const positionFixedAdjustment = theme?.header?.position === "fixed" ? headerHeight : 0;
 	return /* @__PURE__ */ jsx(RelativeContainer, {
 		variant,
-		id: createElementId(ElementId.RelativeContainer, elementId),
+		id: createElementId("widget-relative-container", elementId),
 		children: /* @__PURE__ */ jsx(CssBaselineContainer, {
-			id: createElementId(ElementId.ScrollableContainer, elementId),
+			id: createElementId("widget-scrollable-container", elementId),
 			variant,
 			enableColorScheme: true,
 			paddingTopAdjustment: positionFixedAdjustment,

package/dist/esm/components/AppContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppContainer.js","names":[],"sources":["../../../src/components/AppContainer.tsx"],"sourcesContent":["import type { BoxProps, ContainerProps } from '@mui/material'\nimport { Box, Container, ScopedCssBaseline, styled } from '@mui/material'\nimport type React from 'react'\nimport type { PropsWithChildren } from 'react'\nimport { defaultMaxHeight } from '../config/constants.js'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderHeight } from '../stores/header/useHeaderStore.js'\nimport type { WidgetVariant } from '../types/widget.js'\nimport { createElementId, ElementId } from '../utils/elements.js'\nimport { getWidgetMaxHeight } from '../utils/widgetSize.js'\n\n// NOTE: the setting of the height in AppExpandedContainer, RelativeContainer and CssBaselineContainer can\n// be done dynamically by values in the config - namely the config.theme.container values display, maxHeight and height\n// A Number of other components and hooks work with height values that are often set on or derived from these elements\n// if there are changes to how the height works here you should also check the functionality of these hooks and their point of use\n// - useTokenListHeight\n// - useSetContentHeight\n// Also check any code that is using the methods from elements.ts utils file\n\nexport const AppExpandedContainer: React.FC<BoxProps> = styled(Box)(\n ({ theme }) => {\n return {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'start',\n flex: 1,\n height:\n theme.container?.display === 'flex'\n ? '100%'\n : theme.container?.maxHeight\n ? 'auto'\n : theme.container?.height \|\| 'auto',\n }\n }\n)\n\nexport const RelativeContainer: React.FC<\n BoxProps & { variant?: WidgetVariant }\n> = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: WidgetVariant }>(({ theme }) => {\n const maxHeight =\n theme.container?.height === 'fit-content' \|\|\n (!theme.container?.height && !theme.container?.maxHeight)\n ? 'none'\n : getWidgetMaxHeight(theme)\n return {\n position: 'relative',\n boxSizing: 'content-box',\n width: '100%',\n minWidth: theme.breakpoints.values.xs,\n maxWidth: theme.breakpoints.values.sm,\n background: theme.vars.palette.background.default,\n overflow: 'auto',\n flex: 1,\n ...theme.container,\n maxHeight:\n theme.container?.display === 'flex' && !theme.container?.height\n ? '100%'\n : maxHeight,\n zIndex: 1, // NB: higher than of expansion containers\n variants: [\n {\n props: {\n variant: 'drawer',\n },\n style: {\n maxHeight: 'none',\n height: '100%',\n boxShadow: 'none',\n borderRadius: 0,\n },\n },\n ],\n }\n})\n\ninterface CssBaselineContainerProps {\n variant?: WidgetVariant\n paddingTopAdjustment: number\n elementId: string\n}\n\nconst CssBaselineContainer = styled(ScopedCssBaseline, {\n shouldForwardProp: (prop) =>\n !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop as string),\n})<CssBaselineContainerProps>(({ theme, variant, paddingTopAdjustment }) => {\n const maxHeight =\n theme.container?.height === 'fit-content' \|\|\n (!theme.container?.height && !theme.container?.maxHeight)\n ? 'none'\n : getWidgetMaxHeight(theme)\n return {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n overflowX: 'clip',\n margin: 0,\n width: '100%',\n maxHeight:\n variant === 'drawer' \|\| theme.container?.display === 'flex'\n ? 'none'\n : maxHeight,\n overflowY: 'auto',\n height: theme.container?.display === 'flex' ? 'auto' : '100%',\n paddingTop: paddingTopAdjustment,\n // This allows FullPageContainer.tsx to expand and fill the available vertical space in max height and default layout modes\n '&:has(.full-page-container)': {\n height:\n theme.container?.maxHeight \|\|\n theme.container?.height \|\|\n defaultMaxHeight,\n },\n '&:has(.long-list)': {\n minHeight: getWidgetMaxHeight(theme),\n maxHeight: getWidgetMaxHeight(theme),\n },\n }\n})\n\nexport const FlexContainer: React.FC<ContainerProps> = styled(Container)({\n display: 'flex',\n flexDirection: 'column',\n flex: 1,\n})\n\nexport const AppContainer: React.FC<PropsWithChildren> = ({ children }) => {\n // const ref = useRef<HTMLDivElement>(null);\n const { variant, elementId, theme } = useWidgetConfig()\n const { headerHeight } = useHeaderHeight()\n const positionFixedAdjustment =\n theme?.header?.position === 'fixed' ? headerHeight : 0\n\n return (\n <RelativeContainer\n variant={variant}\n id={createElementId(ElementId.RelativeContainer, elementId)}\n >\n <CssBaselineContainer\n id={createElementId(ElementId.ScrollableContainer, elementId)}\n variant={variant}\n enableColorScheme\n paddingTopAdjustment={positionFixedAdjustment}\n elementId={elementId}\n // ref={ref}\n >\n <FlexContainer disableGutters>{children}</FlexContainer>\n </CssBaselineContainer>\n {/* <ScrollToLocation elementRef={ref} /> */}\n </RelativeContainer>\n )\n}\n\n// export const ScrollToLocation: React.FC<{\n// elementRef: RefObject<HTMLElement>;\n// }> = ({ elementRef }) => {\n// const { pathname } = useLocation();\n// useLayoutEffect(() => {\n// elementRef.current?.scrollTo(0, 0);\n// }, [elementRef, pathname]);\n// return null;\n// };\n"],"mappings":";;;;;;;;AAmBA,MAAa,uBAA2C,OAAO,IAAI,EAChE,EAAE,YAAY;AACb,QAAO;EACL,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,MAAM;EACN,QACE,MAAM,WAAW,YAAY,SACzB,SACA,MAAM,WAAW,YACf,SACA,MAAM,WAAW,UAAU;EACpC;EAEJ;AAED,MAAa,oBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,WACvC,CAAC,EAA+B,EAAE,YAAY;CAC7C,MAAM,YACJ,MAAM,WAAW,WAAW,iBAC3B,CAAC,MAAM,WAAW,UAAU,CAAC,MAAM,WAAW,YAC3C,SACA,mBAAmB,MAAM;AAC/B,QAAO;EACL,UAAU;EACV,WAAW;EACX,OAAO;EACP,UAAU,MAAM,YAAY,OAAO;EACnC,UAAU,MAAM,YAAY,OAAO;EACnC,YAAY,MAAM,KAAK,QAAQ,WAAW;EAC1C,UAAU;EACV,MAAM;EACN,GAAG,MAAM;EACT,WACE,MAAM,WAAW,YAAY,UAAU,CAAC,MAAM,WAAW,SACrD,SACA;EACN,QAAQ;EACR,UAAU,CACR;GACE,OAAO,EACL,SAAS,UACV;GACD,OAAO;IACL,WAAW;IACX,QAAQ;IACR,WAAW;IACX,cAAc;IACf;GACF,CACF;EACF;EACD;AAQF,MAAM,uBAAuB,OAAO,mBAAmB,EACrD,oBAAoB,SAClB,CAAC;CAAC;CAAW;CAAwB;CAAY,CAAC,SAAS,KAAe,EAC7E,CAAC,EAA6B,EAAE,OAAO,SAAS,2BAA2B;CAC1E,MAAM,YACJ,MAAM,WAAW,WAAW,iBAC3B,CAAC,MAAM,WAAW,UAAU,CAAC,MAAM,WAAW,YAC3C,SACA,mBAAmB,MAAM;AAC/B,QAAO;EACL,SAAS;EACT,MAAM;EACN,eAAe;EACf,WAAW;EACX,QAAQ;EACR,OAAO;EACP,WACE,YAAY,YAAY,MAAM,WAAW,YAAY,SACjD,SACA;EACN,WAAW;EACX,QAAQ,MAAM,WAAW,YAAY,SAAS,SAAS;EACvD,YAAY;EAEZ,+BAA+B,EAC7B,QACE,MAAM,WAAW,aACjB,MAAM,WAAW,UAAA,KAEpB;EACD,qBAAqB;GACnB,WAAW,mBAAmB,MAAM;GACpC,WAAW,mBAAmB,MAAM;GACrC;EACF;EACD;AAEF,MAAa,gBAA0C,OAAO,UAAU,CAAC;CACvE,SAAS;CACT,eAAe;CACf,MAAM;CACP,CAAC;AAEF,MAAa,gBAA6C,EAAE,eAAe;CAEzE,MAAM,EAAE,SAAS,WAAW,UAAU,iBAAiB;CACvD,MAAM,EAAE,iBAAiB,iBAAiB;CAC1C,MAAM,0BACJ,OAAO,QAAQ,aAAa,UAAU,eAAe;AAEvD,QACE,oBAAC,mBAAD;EACW;EACT,IAAI,~~gBAAgB~~,~~UAAU~~,~~mBAAmB,~~UAAU;YAE3D,oBAAC,sBAAD;GACE,IAAI,~~gBAAgB~~,UAAU~~,qBAAqB,UAAU~~;GACpD;GACT,mBAAA;GACA,sBAAsB;GACX;aAGX,oBAAC,eAAD;IAAe,gBAAA;IAAgB;IAAyB,CAAA;GACnC,CAAA;EAEL,CAAA"}
1	+ {"version":3,"file":"AppContainer.js","names":[],"sources":["../../../src/components/AppContainer.tsx"],"sourcesContent":["import type { BoxProps, ContainerProps } from '@mui/material'\nimport { Box, Container, ScopedCssBaseline, styled } from '@mui/material'\nimport type React from 'react'\nimport type { PropsWithChildren } from 'react'\nimport { defaultMaxHeight } from '../config/constants.js'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderHeight } from '../stores/header/useHeaderStore.js'\nimport type { WidgetVariant } from '../types/widget.js'\nimport { createElementId, ElementId } from '../utils/elements.js'\nimport { getWidgetMaxHeight } from '../utils/widgetSize.js'\n\n// NOTE: the setting of the height in AppExpandedContainer, RelativeContainer and CssBaselineContainer can\n// be done dynamically by values in the config - namely the config.theme.container values display, maxHeight and height\n// A Number of other components and hooks work with height values that are often set on or derived from these elements\n// if there are changes to how the height works here you should also check the functionality of these hooks and their point of use\n// - useTokenListHeight\n// - useSetContentHeight\n// Also check any code that is using the methods from elements.ts utils file\n\nexport const AppExpandedContainer: React.FC<BoxProps> = styled(Box)(\n ({ theme }) => {\n return {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'start',\n flex: 1,\n height:\n theme.container?.display === 'flex'\n ? '100%'\n : theme.container?.maxHeight\n ? 'auto'\n : theme.container?.height \|\| 'auto',\n }\n }\n)\n\nexport const RelativeContainer: React.FC<\n BoxProps & { variant?: WidgetVariant }\n> = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: WidgetVariant }>(({ theme }) => {\n const maxHeight =\n theme.container?.height === 'fit-content' \|\|\n (!theme.container?.height && !theme.container?.maxHeight)\n ? 'none'\n : getWidgetMaxHeight(theme)\n return {\n position: 'relative',\n boxSizing: 'content-box',\n width: '100%',\n minWidth: theme.breakpoints.values.xs,\n maxWidth: theme.breakpoints.values.sm,\n background: theme.vars.palette.background.default,\n overflow: 'auto',\n flex: 1,\n ...theme.container,\n maxHeight:\n theme.container?.display === 'flex' && !theme.container?.height\n ? '100%'\n : maxHeight,\n zIndex: 1, // NB: higher than of expansion containers\n variants: [\n {\n props: {\n variant: 'drawer',\n },\n style: {\n maxHeight: 'none',\n height: '100%',\n boxShadow: 'none',\n borderRadius: 0,\n },\n },\n ],\n }\n})\n\ninterface CssBaselineContainerProps {\n variant?: WidgetVariant\n paddingTopAdjustment: number\n elementId: string\n}\n\nconst CssBaselineContainer = styled(ScopedCssBaseline, {\n shouldForwardProp: (prop) =>\n !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop as string),\n})<CssBaselineContainerProps>(({ theme, variant, paddingTopAdjustment }) => {\n const maxHeight =\n theme.container?.height === 'fit-content' \|\|\n (!theme.container?.height && !theme.container?.maxHeight)\n ? 'none'\n : getWidgetMaxHeight(theme)\n return {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n overflowX: 'clip',\n margin: 0,\n width: '100%',\n maxHeight:\n variant === 'drawer' \|\| theme.container?.display === 'flex'\n ? 'none'\n : maxHeight,\n overflowY: 'auto',\n height: theme.container?.display === 'flex' ? 'auto' : '100%',\n paddingTop: paddingTopAdjustment,\n // This allows FullPageContainer.tsx to expand and fill the available vertical space in max height and default layout modes\n '&:has(.full-page-container)': {\n height:\n theme.container?.maxHeight \|\|\n theme.container?.height \|\|\n defaultMaxHeight,\n },\n '&:has(.long-list)': {\n minHeight: getWidgetMaxHeight(theme),\n maxHeight: getWidgetMaxHeight(theme),\n },\n }\n})\n\nexport const FlexContainer: React.FC<ContainerProps> = styled(Container)({\n display: 'flex',\n flexDirection: 'column',\n flex: 1,\n})\n\nexport const AppContainer: React.FC<PropsWithChildren> = ({ children }) => {\n // const ref = useRef<HTMLDivElement>(null);\n const { variant, elementId, theme } = useWidgetConfig()\n const { headerHeight } = useHeaderHeight()\n const positionFixedAdjustment =\n theme?.header?.position === 'fixed' ? headerHeight : 0\n\n return (\n <RelativeContainer\n variant={variant}\n id={createElementId(ElementId.RelativeContainer, elementId)}\n >\n <CssBaselineContainer\n id={createElementId(ElementId.ScrollableContainer, elementId)}\n variant={variant}\n enableColorScheme\n paddingTopAdjustment={positionFixedAdjustment}\n elementId={elementId}\n // ref={ref}\n >\n <FlexContainer disableGutters>{children}</FlexContainer>\n </CssBaselineContainer>\n {/* <ScrollToLocation elementRef={ref} /> */}\n </RelativeContainer>\n )\n}\n\n// export const ScrollToLocation: React.FC<{\n// elementRef: RefObject<HTMLElement>;\n// }> = ({ elementRef }) => {\n// const { pathname } = useLocation();\n// useLayoutEffect(() => {\n// elementRef.current?.scrollTo(0, 0);\n// }, [elementRef, pathname]);\n// return null;\n// };\n"],"mappings":";;;;;;;;AAmBA,MAAa,uBAA2C,OAAO,IAAI,EAChE,EAAE,YAAY;AACb,QAAO;EACL,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,MAAM;EACN,QACE,MAAM,WAAW,YAAY,SACzB,SACA,MAAM,WAAW,YACf,SACA,MAAM,WAAW,UAAU;EACpC;EAEJ;AAED,MAAa,oBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,WACvC,CAAC,EAA+B,EAAE,YAAY;CAC7C,MAAM,YACJ,MAAM,WAAW,WAAW,iBAC3B,CAAC,MAAM,WAAW,UAAU,CAAC,MAAM,WAAW,YAC3C,SACA,mBAAmB,MAAM;AAC/B,QAAO;EACL,UAAU;EACV,WAAW;EACX,OAAO;EACP,UAAU,MAAM,YAAY,OAAO;EACnC,UAAU,MAAM,YAAY,OAAO;EACnC,YAAY,MAAM,KAAK,QAAQ,WAAW;EAC1C,UAAU;EACV,MAAM;EACN,GAAG,MAAM;EACT,WACE,MAAM,WAAW,YAAY,UAAU,CAAC,MAAM,WAAW,SACrD,SACA;EACN,QAAQ;EACR,UAAU,CACR;GACE,OAAO,EACL,SAAS,UACV;GACD,OAAO;IACL,WAAW;IACX,QAAQ;IACR,WAAW;IACX,cAAc;IACf;GACF,CACF;EACF;EACD;AAQF,MAAM,uBAAuB,OAAO,mBAAmB,EACrD,oBAAoB,SAClB,CAAC;CAAC;CAAW;CAAwB;CAAY,CAAC,SAAS,KAAe,EAC7E,CAAC,EAA6B,EAAE,OAAO,SAAS,2BAA2B;CAC1E,MAAM,YACJ,MAAM,WAAW,WAAW,iBAC3B,CAAC,MAAM,WAAW,UAAU,CAAC,MAAM,WAAW,YAC3C,SACA,mBAAmB,MAAM;AAC/B,QAAO;EACL,SAAS;EACT,MAAM;EACN,eAAe;EACf,WAAW;EACX,QAAQ;EACR,OAAO;EACP,WACE,YAAY,YAAY,MAAM,WAAW,YAAY,SACjD,SACA;EACN,WAAW;EACX,QAAQ,MAAM,WAAW,YAAY,SAAS,SAAS;EACvD,YAAY;EAEZ,+BAA+B,EAC7B,QACE,MAAM,WAAW,aACjB,MAAM,WAAW,UAAA,KAEpB;EACD,qBAAqB;GACnB,WAAW,mBAAmB,MAAM;GACpC,WAAW,mBAAmB,MAAM;GACrC;EACF;EACD;AAEF,MAAa,gBAA0C,OAAO,UAAU,CAAC;CACvE,SAAS;CACT,eAAe;CACf,MAAM;CACP,CAAC;AAEF,MAAa,gBAA6C,EAAE,eAAe;CAEzE,MAAM,EAAE,SAAS,WAAW,UAAU,iBAAiB;CACvD,MAAM,EAAE,iBAAiB,iBAAiB;CAC1C,MAAM,0BACJ,OAAO,QAAQ,aAAa,UAAU,eAAe;AAEvD,QACE,oBAAC,mBAAD;EACW;EACT,IAAI,gBAAA,6BAA6C,UAAU;YAE3D,oBAAC,sBAAD;GACE,IAAI,gBAAA,+BAA+C,UAAU;GACpD;GACT,mBAAA;GACA,sBAAsB;GACX;aAGX,oBAAC,eAAD;IAAe,gBAAA;IAAgB;IAAyB,CAAA;GACnC,CAAA;EAEL,CAAA"}

package/dist/esm/components/ChainSelect/ChainSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChainSelect.js","names":[],"sources":["../../../../src/components/ChainSelect/ChainSelect.tsx"],"sourcesContent":["import type { EVMChain } from '@lifi/sdk'\nimport { Skeleton, type Theme, Tooltip, useMediaQuery } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type React from 'react'\nimport { type JSX, memo, useCallback, useEffect, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport {\n maxChainsToOrder,\n maxChainsToShow,\n maxGridItemsToShow,\n} from '../../stores/chains/createChainOrderStore.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { AllChainsAvatar } from '../Chains/AllChainsAvatar.js'\nimport {\n ChainAvatar,\n ChainCard,\n ChainContainer,\n MoreChainsBox,\n MoreChainsText,\n} from './ChainSelect.style.js'\nimport { useChainSelect } from './useChainSelect.js'\n\nexport const ChainSelect: React.NamedExoticComponent<FormTypeProps> = memo(\n ({ formType }: FormTypeProps): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const isMobile = useMediaQuery((theme: Theme) =>\n theme.breakpoints.down(theme.breakpoints.values.xs)\n )\n const { setFieldValue } = useFieldActions()\n const {\n chainOrder,\n chains,\n isLoading,\n getSelectedChains,\n setChainOrder,\n setCurrentChain,\n } = useChainSelect(formType)\n\n const [showAllNetworks, isAllNetworks, setIsAllNetworks] =\n useChainOrderStore((state) => [\n state[`${formType}ShowAllNetworks`],\n state[`${formType}IsAllNetworks`],\n state.setIsAllNetworks,\n ])\n\n const [chainId] = useFieldValues(FormKeyHelper.getChainKey(formType))\n\n useEffect(() => {\n if (chainId) {\n const hasChainInOrderedList = chainOrder.includes(chainId)\n // If we don't have a chain in the ordered chain list we should add it.\n if (!hasChainInOrderedList) {\n setChainOrder(chainId, formType)\n }\n }\n }, [chainId, chainOrder, formType, setChainOrder])\n\n const onChainSelect = useCallback(\n (selectedChainId: number) => {\n setIsAllNetworks(false, formType)\n setCurrentChain(selectedChainId)\n },\n [setIsAllNetworks, setCurrentChain, formType]\n )\n\n const showAllChains = useCallback(() => {\n navigate({ to: navigationRoutes[`${formType}Chain`] })\n }, [navigate, formType])\n\n const selectAllNetworks = useCallback(() => {\n setIsAllNetworks(true, formType)\n // Reset the chain and token fields when selecting all networks\n setFieldValue(FormKeyHelper.getChainKey(formType), '', {\n isTouched: true,\n })\n setFieldValue(FormKeyHelper.getTokenKey(formType), '', {\n isTouched: true,\n })\n }, [setIsAllNetworks, formType, setFieldValue])\n\n const chainsToHide =\n chains?.length === maxChainsToShow\n ? 0\n : (chains?.length ?? 0) - maxChainsToOrder\n\n const chainsToShow = useMemo(\n () => (chainsToHide > 0 ? getSelectedChains() : chains) ?? [],\n [chainsToHide, getSelectedChains, chains]\n )\n\n const tilesCount =\n chainsToShow.length +\n (showAllNetworks ? 1 : 0) +\n (chainsToHide > 0 ? 1 : 0)\n\n if (isLoading) {\n return (\n <ChainContainer itemCount={tilesCount}>\n {Array.from({ length: maxGridItemsToShow }).map((_, index) => (\n <Skeleton\n key={index}\n variant=\"rectangular\"\n width={56}\n height={isMobile ? 36 : 56}\n sx={{ borderRadius: 1 }}\n />\n ))}\n </ChainContainer>\n )\n }\n\n return (\n <ChainContainer itemCount={tilesCount}>\n {showAllNetworks && (\n <Tooltip title={t('main.allNetworks')} enterNextDelay={100}>\n <ChainCard\n component=\"button\"\n onClick={selectAllNetworks}\n type={isAllNetworks ? 'selected' : 'default'}\n selectionColor=\"secondary\"\n >\n <AllChainsAvatar\n chains={chains ?? []}\n size={isMobile ? 'small' : 'medium'}\n />\n </ChainCard>\n </Tooltip>\n )}\n {chainsToShow.map((chain: EVMChain) => (\n <ChainItem\n key={chain.id}\n chain={chain}\n isSelected={chainId === chain.id}\n isAllNetworks={isAllNetworks}\n onSelect={onChainSelect}\n />\n ))}\n {chainsToHide > 0 && (\n <ChainCard component=\"button\" onClick={showAllChains}>\n <MoreChainsBox>\n <MoreChainsText>+{chainsToHide}</MoreChainsText>\n </MoreChainsBox>\n </ChainCard>\n )}\n </ChainContainer>\n )\n }\n)\n\nconst ChainItem = memo(\n ({\n chain,\n isSelected,\n isAllNetworks,\n onSelect,\n }: {\n chain: EVMChain\n isSelected: boolean\n isAllNetworks: boolean\n onSelect: (id: number) => void\n }) => {\n return (\n <Tooltip title={chain.name} enterNextDelay={100}>\n <ChainCard\n component=\"button\"\n onClick={() => onSelect(chain.id)}\n type={!isAllNetworks && isSelected ? 'selected' : 'default'}\n selectionColor=\"secondary\"\n >\n <ChainAvatar src={chain.logoURI} alt={chain.key}>\n {chain.name[0]}\n </ChainAvatar>\n </ChainCard>\n </Tooltip>\n )\n }\n)\n"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAa,cAAyD,MACnE,EAAE,eAA2C;CAC5C,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,WAAW,eAAe,UAC9B,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,CACpD;CACD,MAAM,EAAE,kBAAkB,iBAAiB;CAC3C,MAAM,EACJ,YACA,QACA,WACA,mBACA,eACA,oBACE,eAAe,SAAS;CAE5B,MAAM,CAAC,iBAAiB,eAAe,oBACrC,oBAAoB,UAAU;EAC5B,MAAM,GAAG,SAAS;EAClB,MAAM,GAAG,SAAS;EAClB,MAAM;EACP,CAAC;CAEJ,MAAM,CAAC,WAAW,eAAe,cAAc,YAAY,SAAS,CAAC;AAErE,iBAAgB;AACd,MAAI;OAGE,CAF0B,WAAW,SAAS,~~QAAQ~~,~~CAGxD~~,eAAc,SAAS,SAAS;;IAGnC;EAAC;EAAS;EAAY;EAAU;EAAc,CAAC;CAElD,MAAM,gBAAgB,aACnB,oBAA4B;AAC3B,mBAAiB,OAAO,SAAS;AACjC,kBAAgB,gBAAgB;IAElC;EAAC;EAAkB;EAAiB;EAAS,CAC9C;CAED,MAAM,gBAAgB,kBAAkB;AACtC,WAAS,EAAE,IAAI,iBAAiB,GAAG,SAAS,SAAS,CAAC;IACrD,CAAC,UAAU,SAAS,CAAC;CAExB,MAAM,oBAAoB,kBAAkB;AAC1C,mBAAiB,MAAM,SAAS;AAEhC,gBAAc,cAAc,YAAY,SAAS,EAAE,IAAI,EACrD,WAAW,MACZ,CAAC;AACF,gBAAc,cAAc,YAAY,SAAS,EAAE,IAAI,EACrD,WAAW,MACZ,CAAC;IACD;EAAC;EAAkB;EAAU;EAAc,CAAC;CAE/C,MAAM,eACJ,QAAQ,WAAA,IACJ,KACC,QAAQ,UAAU,KAAA;CAEzB,MAAM,eAAe,eACZ,eAAe,IAAI,mBAAmB,GAAG,WAAW,EAAE,EAC7D;EAAC;EAAc;EAAmB;EAAO,CAC1C;CAED,MAAM,aACJ,aAAa,UACZ,kBAAkB,IAAI,MACtB,eAAe,IAAI,IAAI;AAE1B,KAAI,UACF,QACE,oBAAC,gBAAD;EAAgB,WAAW;YACxB,MAAM,KAAK,EAAE,QAAA,IAA4B,CAAC,CAAC,KAAK,GAAG,UAClD,oBAAC,UAAD;GAEE,SAAQ;GACR,OAAO;GACP,QAAQ,WAAW,KAAK;GACxB,IAAI,EAAE,cAAc,GAAG;GACvB,EALK,MAKL,CACF;EACa,CAAA;AAIrB,QACE,qBAAC,gBAAD;EAAgB,WAAW;YAA3B;GACG,mBACC,oBAAC,SAAD;IAAS,OAAO,EAAE,mBAAmB;IAAE,gBAAgB;cACrD,oBAAC,WAAD;KACE,WAAU;KACV,SAAS;KACT,MAAM,gBAAgB,aAAa;KACnC,gBAAe;eAEf,oBAAC,iBAAD;MACE,QAAQ,UAAU,EAAE;MACpB,MAAM,WAAW,UAAU;MAC3B,CAAA;KACQ,CAAA;IACJ,CAAA;GAEX,aAAa,KAAK,UACjB,oBAAC,WAAD;IAES;IACP,YAAY,YAAY,MAAM;IACf;IACf,UAAU;IACV,EALK,MAAM,GAKX,CACF;GACD,eAAe,KACd,oBAAC,WAAD;IAAW,WAAU;IAAS,SAAS;cACrC,oBAAC,eAAD,EAAA,UACE,qBAAC,gBAAD,EAAA,UAAA,CAAgB,KAAE,aAA8B,EAAA,CAAA,EAClC,CAAA;IACN,CAAA;GAEC;;EAGtB;AAED,MAAM,YAAY,MACf,EACC,OACA,YACA,eACA,eAMI;AACJ,QACE,oBAAC,SAAD;EAAS,OAAO,MAAM;EAAM,gBAAgB;YAC1C,oBAAC,WAAD;GACE,WAAU;GACV,eAAe,SAAS,MAAM,GAAG;GACjC,MAAM,CAAC,iBAAiB,aAAa,aAAa;GAClD,gBAAe;aAEf,oBAAC,aAAD;IAAa,KAAK,MAAM;IAAS,KAAK,MAAM;cACzC,MAAM,KAAK;IACA,CAAA;GACJ,CAAA;EACJ,CAAA;EAGf"}
1	+ {"version":3,"file":"ChainSelect.js","names":[],"sources":["../../../../src/components/ChainSelect/ChainSelect.tsx"],"sourcesContent":["import type { EVMChain } from '@lifi/sdk'\nimport { Skeleton, type Theme, Tooltip, useMediaQuery } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type React from 'react'\nimport { type JSX, memo, useCallback, useEffect, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport {\n maxChainsToOrder,\n maxChainsToShow,\n maxGridItemsToShow,\n} from '../../stores/chains/createChainOrderStore.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { AllChainsAvatar } from '../Chains/AllChainsAvatar.js'\nimport {\n ChainAvatar,\n ChainCard,\n ChainContainer,\n MoreChainsBox,\n MoreChainsText,\n} from './ChainSelect.style.js'\nimport { useChainSelect } from './useChainSelect.js'\n\nexport const ChainSelect: React.NamedExoticComponent<FormTypeProps> = memo(\n ({ formType }: FormTypeProps): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const isMobile = useMediaQuery((theme: Theme) =>\n theme.breakpoints.down(theme.breakpoints.values.xs)\n )\n const { setFieldValue } = useFieldActions()\n const {\n chainOrder,\n chains,\n isLoading,\n getSelectedChains,\n setChainOrder,\n setCurrentChain,\n } = useChainSelect(formType)\n\n const [showAllNetworks, isAllNetworks, setIsAllNetworks] =\n useChainOrderStore((state) => [\n state[`${formType}ShowAllNetworks`],\n state[`${formType}IsAllNetworks`],\n state.setIsAllNetworks,\n ])\n\n const [chainId] = useFieldValues(FormKeyHelper.getChainKey(formType))\n\n useEffect(() => {\n if (chainId) {\n const hasChainInOrderedList = chainOrder.includes(chainId)\n // If we don't have a chain in the ordered chain list we should add it.\n if (!hasChainInOrderedList) {\n setChainOrder(chainId, formType)\n }\n }\n }, [chainId, chainOrder, formType, setChainOrder])\n\n const onChainSelect = useCallback(\n (selectedChainId: number) => {\n setIsAllNetworks(false, formType)\n setCurrentChain(selectedChainId)\n },\n [setIsAllNetworks, setCurrentChain, formType]\n )\n\n const showAllChains = useCallback(() => {\n navigate({ to: navigationRoutes[`${formType}Chain`] })\n }, [navigate, formType])\n\n const selectAllNetworks = useCallback(() => {\n setIsAllNetworks(true, formType)\n // Reset the chain and token fields when selecting all networks\n setFieldValue(FormKeyHelper.getChainKey(formType), '', {\n isTouched: true,\n })\n setFieldValue(FormKeyHelper.getTokenKey(formType), '', {\n isTouched: true,\n })\n }, [setIsAllNetworks, formType, setFieldValue])\n\n const chainsToHide =\n chains?.length === maxChainsToShow\n ? 0\n : (chains?.length ?? 0) - maxChainsToOrder\n\n const chainsToShow = useMemo(\n () => (chainsToHide > 0 ? getSelectedChains() : chains) ?? [],\n [chainsToHide, getSelectedChains, chains]\n )\n\n const tilesCount =\n chainsToShow.length +\n (showAllNetworks ? 1 : 0) +\n (chainsToHide > 0 ? 1 : 0)\n\n if (isLoading) {\n return (\n <ChainContainer itemCount={tilesCount}>\n {Array.from({ length: maxGridItemsToShow }).map((_, index) => (\n <Skeleton\n key={index}\n variant=\"rectangular\"\n width={56}\n height={isMobile ? 36 : 56}\n sx={{ borderRadius: 1 }}\n />\n ))}\n </ChainContainer>\n )\n }\n\n return (\n <ChainContainer itemCount={tilesCount}>\n {showAllNetworks && (\n <Tooltip title={t('main.allNetworks')} enterNextDelay={100}>\n <ChainCard\n component=\"button\"\n onClick={selectAllNetworks}\n type={isAllNetworks ? 'selected' : 'default'}\n selectionColor=\"secondary\"\n >\n <AllChainsAvatar\n chains={chains ?? []}\n size={isMobile ? 'small' : 'medium'}\n />\n </ChainCard>\n </Tooltip>\n )}\n {chainsToShow.map((chain: EVMChain) => (\n <ChainItem\n key={chain.id}\n chain={chain}\n isSelected={chainId === chain.id}\n isAllNetworks={isAllNetworks}\n onSelect={onChainSelect}\n />\n ))}\n {chainsToHide > 0 && (\n <ChainCard component=\"button\" onClick={showAllChains}>\n <MoreChainsBox>\n <MoreChainsText>+{chainsToHide}</MoreChainsText>\n </MoreChainsBox>\n </ChainCard>\n )}\n </ChainContainer>\n )\n }\n)\n\nconst ChainItem = memo(\n ({\n chain,\n isSelected,\n isAllNetworks,\n onSelect,\n }: {\n chain: EVMChain\n isSelected: boolean\n isAllNetworks: boolean\n onSelect: (id: number) => void\n }) => {\n return (\n <Tooltip title={chain.name} enterNextDelay={100}>\n <ChainCard\n component=\"button\"\n onClick={() => onSelect(chain.id)}\n type={!isAllNetworks && isSelected ? 'selected' : 'default'}\n selectionColor=\"secondary\"\n >\n <ChainAvatar src={chain.logoURI} alt={chain.key}>\n {chain.name[0]}\n </ChainAvatar>\n </ChainCard>\n </Tooltip>\n )\n }\n)\n"],"mappings":"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"}

package/dist/esm/components/ChainSelect/useChainSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useChainSelect.js","names":[],"sources":["../../../../src/components/ChainSelect/useChainSelect.ts"],"sourcesContent":["import type { EVMChain, ExtendedChain } from '@lifi/sdk'\nimport { useCallback } from 'react'\nimport { useChains } from '../../hooks/useChains.js'\nimport { useSwapOnly } from '../../hooks/useSwapOnly.js'\nimport { useToAddressReset } from '../../hooks/useToAddressReset.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useChainOrder } from '../../stores/chains/useChainOrder.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport type { DisabledUI } from '../../types/widget.js'\n\nexport const useChainSelect = (\n formType: FormType\n): {\n chainOrder: number[]\n chains: ExtendedChain[] \| undefined\n getSelectedChains: () => EVMChain[]\n isLoading: boolean\n setChainOrder: (chainId: number, type: FormType) => void\n setCurrentChain: (chainId: number) => void\n} => {\n const { disabledUI } = useWidgetConfig()\n const chainKey = FormKeyHelper.getChainKey(formType)\n const { setFieldValue, getFieldValues } = useFieldActions()\n const { useExternalWalletProvidersOnly, externalChainTypes } =\n useExternalWalletProvider()\n const { chains, isLoading, getChainById } = useChains(\n formType,\n // If the integrator uses external wallet management and has not opted in for partial wallet management,\n // restrict the displayed chains to those compatible with external wallet management.\n // This ensures users only see chains for which they can sign transactions.\n formType === 'from' && useExternalWalletProvidersOnly\n ? externalChainTypes\n : undefined\n )\n\n const [chainOrder, setChainOrder] = useChainOrder(formType)\n const swapOnly = useSwapOnly()\n const { tryResetToAddress } = useToAddressReset()\n\n const getSelectedChains = useCallback((): EVMChain[] => {\n if (!chains) {\n return []\n }\n const selectedChains = chainOrder\n .map((chainId) => chains.find((chain) => chain.id === chainId))\n .filter(Boolean) as EVMChain[]\n return selectedChains\n }, [chains, chainOrder])\n\n const setCurrentChain = useCallback(\n (chainId: number): void => {\n setFieldValue(chainKey, chainId, { isDirty: true, isTouched: true })\n if (swapOnly) {\n setFieldValue(FormKeyHelper.getChainKey('to'), chainId, {\n isTouched: true,\n })\n }\n const tokenKey = FormKeyHelper.getTokenKey(formType)\n if (!disabledUI?.includes(tokenKey as DisabledUI)) {\n setFieldValue(tokenKey, '')\n }\n const amountKey = FormKeyHelper.getAmountKey(formType)\n if (!disabledUI?.includes(amountKey as DisabledUI)) {\n setFieldValue(amountKey, '')\n }\n\n const [toChainId] = getFieldValues('toChain')\n const toChain = getChainById(toChainId)\n if (toChain) {\n tryResetToAddress(toChain)\n }\n setChainOrder(chainId, formType)\n },\n [\n chainKey,\n swapOnly,\n setFieldValue,\n disabledUI,\n formType,\n getChainById,\n tryResetToAddress,\n setChainOrder,\n getFieldValues,\n ]\n )\n\n return {\n chainOrder: chainOrder,\n chains: chains,\n getSelectedChains: getSelectedChains,\n isLoading: isLoading,\n setChainOrder: setChainOrder,\n setCurrentChain: setCurrentChain,\n }\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAa,kBACX,aAQG;CACH,MAAM,EAAE,eAAe,iBAAiB;CACxC,MAAM,WAAW,cAAc,YAAY,SAAS;CACpD,MAAM,EAAE,eAAe,mBAAmB,iBAAiB;CAC3D,MAAM,EAAE,gCAAgC,uBACtC,2BAA2B;CAC7B,MAAM,EAAE,QAAQ,WAAW,iBAAiB,UAC1C,UAIA,aAAa,UAAU,iCACnB,qBACA,KAAA,EACL;CAED,MAAM,CAAC,YAAY,iBAAiB,cAAc,SAAS;CAC3D,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,sBAAsB,mBAAmB;AAiDjD,QAAO;EACO;EACJ;EACR,mBAlDwB,kBAA8B;AACtD,OAAI,CAAC,OACH,QAAO,EAAE;AAKX,UAHuB,WACpB,KAAK,YAAY,OAAO,MAAM,UAAU,MAAM,OAAO,QAAQ,CAAC,CAC9D,OAAO,~~QAAQ~~;~~KAEjB~~,CAAC,QAAQ,WAAW,~~CAAC~~;~~EA2CX~~;EACI;EACf,iBA3CsB,aACrB,YAA0B;AACzB,iBAAc,UAAU,SAAS;IAAE,SAAS;IAAM,WAAW;IAAM,CAAC;AACpE,OAAI,SACF,eAAc,cAAc,YAAY,KAAK,EAAE,SAAS,EACtD,WAAW,MACZ,CAAC;GAEJ,MAAM,WAAW,cAAc,YAAY,SAAS;AACpD,OAAI,CAAC,YAAY,SAAS,SAAuB,CAC/C,eAAc,UAAU,GAAG;GAE7B,MAAM,YAAY,cAAc,aAAa,SAAS;AACtD,OAAI,CAAC,YAAY,SAAS,UAAwB,CAChD,eAAc,WAAW,GAAG;GAG9B,MAAM,CAAC,aAAa,eAAe,UAAU;GAC7C,MAAM,UAAU,aAAa,UAAU;AACvC,OAAI,QACF,mBAAkB,QAAQ;AAE5B,iBAAc,SAAS,SAAS;KAElC;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,~~CACF~~;~~EASA~~"}
1	+ {"version":3,"file":"useChainSelect.js","names":[],"sources":["../../../../src/components/ChainSelect/useChainSelect.ts"],"sourcesContent":["import type { EVMChain, ExtendedChain } from '@lifi/sdk'\nimport { useCallback } from 'react'\nimport { useChains } from '../../hooks/useChains.js'\nimport { useSwapOnly } from '../../hooks/useSwapOnly.js'\nimport { useToAddressReset } from '../../hooks/useToAddressReset.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useChainOrder } from '../../stores/chains/useChainOrder.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport type { DisabledUI } from '../../types/widget.js'\n\nexport const useChainSelect = (\n formType: FormType\n): {\n chainOrder: number[]\n chains: ExtendedChain[] \| undefined\n getSelectedChains: () => EVMChain[]\n isLoading: boolean\n setChainOrder: (chainId: number, type: FormType) => void\n setCurrentChain: (chainId: number) => void\n} => {\n const { disabledUI } = useWidgetConfig()\n const chainKey = FormKeyHelper.getChainKey(formType)\n const { setFieldValue, getFieldValues } = useFieldActions()\n const { useExternalWalletProvidersOnly, externalChainTypes } =\n useExternalWalletProvider()\n const { chains, isLoading, getChainById } = useChains(\n formType,\n // If the integrator uses external wallet management and has not opted in for partial wallet management,\n // restrict the displayed chains to those compatible with external wallet management.\n // This ensures users only see chains for which they can sign transactions.\n formType === 'from' && useExternalWalletProvidersOnly\n ? externalChainTypes\n : undefined\n )\n\n const [chainOrder, setChainOrder] = useChainOrder(formType)\n const swapOnly = useSwapOnly()\n const { tryResetToAddress } = useToAddressReset()\n\n const getSelectedChains = useCallback((): EVMChain[] => {\n if (!chains) {\n return []\n }\n const selectedChains = chainOrder\n .map((chainId) => chains.find((chain) => chain.id === chainId))\n .filter(Boolean) as EVMChain[]\n return selectedChains\n }, [chains, chainOrder])\n\n const setCurrentChain = useCallback(\n (chainId: number): void => {\n setFieldValue(chainKey, chainId, { isDirty: true, isTouched: true })\n if (swapOnly) {\n setFieldValue(FormKeyHelper.getChainKey('to'), chainId, {\n isTouched: true,\n })\n }\n const tokenKey = FormKeyHelper.getTokenKey(formType)\n if (!disabledUI?.includes(tokenKey as DisabledUI)) {\n setFieldValue(tokenKey, '')\n }\n const amountKey = FormKeyHelper.getAmountKey(formType)\n if (!disabledUI?.includes(amountKey as DisabledUI)) {\n setFieldValue(amountKey, '')\n }\n\n const [toChainId] = getFieldValues('toChain')\n const toChain = getChainById(toChainId)\n if (toChain) {\n tryResetToAddress(toChain)\n }\n setChainOrder(chainId, formType)\n },\n [\n chainKey,\n swapOnly,\n setFieldValue,\n disabledUI,\n formType,\n getChainById,\n tryResetToAddress,\n setChainOrder,\n getFieldValues,\n ]\n )\n\n return {\n chainOrder: chainOrder,\n chains: chains,\n getSelectedChains: getSelectedChains,\n isLoading: isLoading,\n setChainOrder: setChainOrder,\n setCurrentChain: setCurrentChain,\n }\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAa,kBACX,aAQG;CACH,MAAM,EAAE,eAAe,iBAAiB;CACxC,MAAM,WAAW,cAAc,YAAY,SAAS;CACpD,MAAM,EAAE,eAAe,mBAAmB,iBAAiB;CAC3D,MAAM,EAAE,gCAAgC,uBACtC,2BAA2B;CAC7B,MAAM,EAAE,QAAQ,WAAW,iBAAiB,UAC1C,UAIA,aAAa,UAAU,iCACnB,qBACA,KAAA,EACL;CAED,MAAM,CAAC,YAAY,iBAAiB,cAAc,SAAS;CAC3D,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,sBAAsB,mBAAmB;AAiDjD,QAAO;EACO;EACJ;EACR,mBAlDwB,kBAA8B;AACtD,OAAI,CAAC,OACH,QAAO,EAAE;AAKX,UAHuB,WACpB,KAAK,YAAY,OAAO,MAAM,UAAU,MAAM,OAAO,QAAQ,CAAC,CAC9D,OAAO,QACW;KACpB,CAAC,QAAQ,WAAW,CA0Ce;EACzB;EACI;EACf,iBA3CsB,aACrB,YAA0B;AACzB,iBAAc,UAAU,SAAS;IAAE,SAAS;IAAM,WAAW;IAAM,CAAC;AACpE,OAAI,SACF,eAAc,cAAc,YAAY,KAAK,EAAE,SAAS,EACtD,WAAW,MACZ,CAAC;GAEJ,MAAM,WAAW,cAAc,YAAY,SAAS;AACpD,OAAI,CAAC,YAAY,SAAS,SAAuB,CAC/C,eAAc,UAAU,GAAG;GAE7B,MAAM,YAAY,cAAc,aAAa,SAAS;AACtD,OAAI,CAAC,YAAY,SAAS,UAAwB,CAChD,eAAc,WAAW,GAAG;GAG9B,MAAM,CAAC,aAAa,eAAe,UAAU;GAC7C,MAAM,UAAU,aAAa,UAAU;AACvC,OAAI,QACF,mBAAkB,QAAQ;AAE5B,iBAAc,SAAS,SAAS;KAElC;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAS+B;EACjC"}

package/dist/esm/components/Chains/AllChainsAvatar.js CHANGED Viewed

@@ -27,9 +27,15 @@ const chainTypeIcons = [
 		chainType: ChainType.MVM,
 		icon: "https://lifinance.github.io/types/src/assets/icons/chains/sui.svg",
 		defaultChainId: ChainId.SUI
+	},
+	{
+		name: "Tron",
+		chainType: ChainType.TVM,
+		icon: "https://lifinance.github.io/types/src/assets/icons/chains/tron.svg",
+		defaultChainId: ChainId.TRN
 	}
 ];
-const maxChainAvatarsCount = chainTypeIcons.length;
+const maxChainAvatarsCount = 4;
 const AllChainsAvatar = memo(({ chains, size }) => {
 	const icons = useMemo(() => {
 		const chainsPerChainType = /* @__PURE__ */ new Map();

package/dist/esm/components/Chains/AllChainsAvatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AllChainsAvatar.js","names":[],"sources":["../../../../src/components/Chains/AllChainsAvatar.tsx"],"sourcesContent":["import {\n ChainId,\n ChainType,\n type EVMChain,\n type ExtendedChain,\n} from '@lifi/sdk'\nimport { Avatar, Box } from '@mui/material'\nimport type React from 'react'\nimport { type JSX, memo, useMemo } from 'react'\n\ninterface AllChainsAvatarProps {\n chains: ExtendedChain[] \| EVMChain[]\n size: 'small' \| 'medium'\n}\n\nconst chainTypeIcons = [\n {\n name: 'Ethereum',\n chainType: ChainType.EVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/ethereum.svg',\n defaultChainId: ChainId.ETH,\n },\n {\n name: 'Solana',\n chainType: ChainType.SVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/solana.svg',\n defaultChainId: ChainId.SOL,\n },\n {\n name: 'Bitcoin',\n chainType: ChainType.UTXO,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/bitcoin.svg',\n defaultChainId: ChainId.BTC,\n },\n {\n name: 'Sui',\n chainType: ChainType.MVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/sui.svg',\n defaultChainId: ChainId.SUI,\n },\n]\n\nconst maxChainAvatarsCount = ~~chainTypeIcons.length~~\n\nexport const AllChainsAvatar: React.NamedExoticComponent<AllChainsAvatarProps> =\n memo(({ chains, size }: AllChainsAvatarProps): JSX.Element => {\n const icons = useMemo(() => {\n // Create maps for efficient lookups\n const chainsPerChainType = new Map<ChainType, number>()\n const chainsByChainType = new Map<\n ChainType,\n (ExtendedChain \| EVMChain)[]\n >()\n\n chains.forEach((chain) => {\n chainsPerChainType.set(\n chain.chainType,\n (chainsPerChainType.get(chain.chainType) \|\| 0) + 1\n )\n const chainsOfType = chainsByChainType.get(chain.chainType) \|\| []\n chainsOfType.push(chain)\n chainsByChainType.set(chain.chainType, chainsOfType)\n })\n\n // Get existing ecosystem icons\n const existingChainTypeIcons = chainTypeIcons.filter(\n (predefinedChain) => {\n const numberOfChains =\n chainsPerChainType.get(predefinedChain.chainType) ?? 0\n\n // If there's only one chain of this type, check if it's not the default\n if (numberOfChains === 1) {\n const chainsOfType = chainsByChainType.get(\n predefinedChain.chainType\n )\n const singleChain = chainsOfType?.[0]\n // Exclude the predefined icon if the single chain is not the default\n if (\n singleChain &&\n singleChain.id !== predefinedChain.defaultChainId\n ) {\n return false\n }\n }\n\n return numberOfChains > 0\n }\n )\n\n if (existingChainTypeIcons.length === maxChainAvatarsCount) {\n return existingChainTypeIcons\n }\n\n const remainingSlots =\n maxChainAvatarsCount - existingChainTypeIcons.length\n\n // Create a Set for O(1) lookup of predefined icon names\n const predefinedIconNames = new Set(\n existingChainTypeIcons.map((icon) => icon.name)\n )\n\n const chainsWithLogos = chains.filter((chain) => {\n // Filter out chain icons matching ecosystem icons\n return !predefinedIconNames.has(chain.name) && Boolean(chain.logoURI)\n })\n\n const additionalIcons = chainsWithLogos\n .slice(0, remainingSlots)\n .map((chain) => ({\n name: chain.name,\n chainType: chain.chainType,\n icon: chain.logoURI!,\n }))\n\n return [...existingChainTypeIcons, ...additionalIcons]\n }, [chains])\n\n const wrapperSize = size === 'small' ? '32px' : '40px'\n const avatarSize = size === 'small' ? '12px' : '16px'\n const avatarsCount = Math.min(icons.length, maxChainAvatarsCount)\n const gridRows = avatarsCount > 2 ? 2 : 1\n const gridColumns = avatarsCount > 1 ? 2 : 1\n\n return (\n <Box\n sx={{\n width: wrapperSize,\n height: wrapperSize,\n display: 'grid',\n gridTemplateRows: `repeat(${gridRows}, 1fr)`,\n gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n placeItems: 'center',\n }}\n >\n {icons.slice(0, avatarsCount).map((chain, idx) => {\n const isThirdAvatarInThreeAvatarLayout =\n avatarsCount === 3 && idx === 2\n\n return (\n <Avatar\n key={`${chain.chainType}-${idx}`}\n src={chain.icon}\n alt={chain.name}\n sx={{\n width: avatarSize,\n height: avatarSize,\n margin: 'auto',\n ...(isThirdAvatarInThreeAvatarLayout && {\n gridColumn: '1 / span 2',\n gridRow: '2',\n justifySelf: 'center',\n }),\n }}\n >\n {chain.chainType[0]}\n </Avatar>\n )\n })}\n </Box>\n )\n })\n"],"mappings":";;;;;AAeA,MAAM,iBAAiB;CACrB;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACF;AAED,MAAM,uBAAuB~~,eAAe~~;~~AAE5C~~,MAAa,kBACX,MAAM,EAAE,QAAQ,WAA8C;CAC5D,MAAM,QAAQ,cAAc;EAE1B,MAAM,qCAAqB,IAAI,KAAwB;EACvD,MAAM,oCAAoB,IAAI,KAG3B;AAEH,SAAO,SAAS,UAAU;AACxB,sBAAmB,IACjB,MAAM,YACL,mBAAmB,IAAI,MAAM,UAAU,IAAI,KAAK,EAClD;GACD,MAAM,eAAe,kBAAkB,IAAI,MAAM,UAAU,IAAI,EAAE;AACjE,gBAAa,KAAK,MAAM;AACxB,qBAAkB,IAAI,MAAM,WAAW,aAAa;IACpD;EAGF,MAAM,yBAAyB,eAAe,QAC3C,oBAAoB;GACnB,MAAM,iBACJ,mBAAmB,IAAI,gBAAgB,UAAU,IAAI;AAGvD,OAAI,mBAAmB,GAAG;IAIxB,MAAM,cAHe,kBAAkB,IACrC,gBAAgB,~~UACjB~~,~~GACkC~~;AAEnC,QACE,eACA,YAAY,OAAO,gBAAgB,eAEnC,QAAO;;AAIX,UAAO,iBAAiB;IAE3B;AAED,MAAI,uBAAuB,WAAW,qBACpC,QAAO;EAGT,MAAM,iBACJ,uBAAuB,uBAAuB;EAGhD,MAAM,sBAAsB,IAAI,IAC9B,uBAAuB,KAAK,SAAS,KAAK,KAAK,CAChD;EAOD,MAAM,kBALkB,OAAO,QAAQ,UAAU;AAE/C,UAAO,CAAC,oBAAoB,IAAI,MAAM,KAAK,IAAI,QAAQ,MAAM,QAAQ;~~IACrE~~,~~CAGC~~,MAAM,GAAG,eAAe,CACxB,KAAK,WAAW;GACf,MAAM,MAAM;GACZ,WAAW,MAAM;GACjB,MAAM,MAAM;GACb,EAAE;AAEL,SAAO,CAAC,GAAG,wBAAwB,GAAG,gBAAgB;IACrD,CAAC,OAAO,CAAC;CAEZ,MAAM,cAAc,SAAS,UAAU,SAAS;CAChD,MAAM,aAAa,SAAS,UAAU,SAAS;CAC/C,MAAM,eAAe,KAAK,IAAI,MAAM,QAAQ,qBAAqB;CACjE,MAAM,WAAW,eAAe,IAAI,IAAI;CACxC,MAAM,cAAc,eAAe,IAAI,IAAI;AAE3C,QACE,oBAAC,KAAD;EACE,IAAI;GACF,OAAO;GACP,QAAQ;GACR,SAAS;GACT,kBAAkB,UAAU,SAAS;GACrC,qBAAqB,UAAU,YAAY;GAC3C,YAAY;GACb;YAEA,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,OAAO,QAAQ;GAChD,MAAM,mCACJ,iBAAiB,KAAK,QAAQ;AAEhC,UACE,oBAAC,QAAD;IAEE,KAAK,MAAM;IACX,KAAK,MAAM;IACX,IAAI;KACF,OAAO;KACP,QAAQ;KACR,QAAQ;KACR,GAAI,oCAAoC;MACtC,YAAY;MACZ,SAAS;MACT,aAAa;MACd;KACF;cAEA,MAAM,UAAU;IACV,EAfF,GAAG,MAAM,UAAU,GAAG,MAepB;IAEX;EACE,CAAA;EAER"}
1	+ {"version":3,"file":"AllChainsAvatar.js","names":[],"sources":["../../../../src/components/Chains/AllChainsAvatar.tsx"],"sourcesContent":["import {\n ChainId,\n ChainType,\n type EVMChain,\n type ExtendedChain,\n} from '@lifi/sdk'\nimport { Avatar, Box } from '@mui/material'\nimport type React from 'react'\nimport { type JSX, memo, useMemo } from 'react'\n\ninterface AllChainsAvatarProps {\n chains: ExtendedChain[] \| EVMChain[]\n size: 'small' \| 'medium'\n}\n\nconst chainTypeIcons = [\n {\n name: 'Ethereum',\n chainType: ChainType.EVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/ethereum.svg',\n defaultChainId: ChainId.ETH,\n },\n {\n name: 'Solana',\n chainType: ChainType.SVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/solana.svg',\n defaultChainId: ChainId.SOL,\n },\n {\n name: 'Bitcoin',\n chainType: ChainType.UTXO,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/bitcoin.svg',\n defaultChainId: ChainId.BTC,\n },\n {\n name: 'Sui',\n chainType: ChainType.MVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/sui.svg',\n defaultChainId: ChainId.SUI,\n },\n {\n name: 'Tron',\n chainType: ChainType.TVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/tron.svg',\n defaultChainId: ChainId.TRN,\n },\n]\n\nconst maxChainAvatarsCount = 4\n\nexport const AllChainsAvatar: React.NamedExoticComponent<AllChainsAvatarProps> =\n memo(({ chains, size }: AllChainsAvatarProps): JSX.Element => {\n const icons = useMemo(() => {\n // Create maps for efficient lookups\n const chainsPerChainType = new Map<ChainType, number>()\n const chainsByChainType = new Map<\n ChainType,\n (ExtendedChain \| EVMChain)[]\n >()\n\n chains.forEach((chain) => {\n chainsPerChainType.set(\n chain.chainType,\n (chainsPerChainType.get(chain.chainType) \|\| 0) + 1\n )\n const chainsOfType = chainsByChainType.get(chain.chainType) \|\| []\n chainsOfType.push(chain)\n chainsByChainType.set(chain.chainType, chainsOfType)\n })\n\n // Get existing ecosystem icons\n const existingChainTypeIcons = chainTypeIcons.filter(\n (predefinedChain) => {\n const numberOfChains =\n chainsPerChainType.get(predefinedChain.chainType) ?? 0\n\n // If there's only one chain of this type, check if it's not the default\n if (numberOfChains === 1) {\n const chainsOfType = chainsByChainType.get(\n predefinedChain.chainType\n )\n const singleChain = chainsOfType?.[0]\n // Exclude the predefined icon if the single chain is not the default\n if (\n singleChain &&\n singleChain.id !== predefinedChain.defaultChainId\n ) {\n return false\n }\n }\n\n return numberOfChains > 0\n }\n )\n\n if (existingChainTypeIcons.length === maxChainAvatarsCount) {\n return existingChainTypeIcons\n }\n\n const remainingSlots =\n maxChainAvatarsCount - existingChainTypeIcons.length\n\n // Create a Set for O(1) lookup of predefined icon names\n const predefinedIconNames = new Set(\n existingChainTypeIcons.map((icon) => icon.name)\n )\n\n const chainsWithLogos = chains.filter((chain) => {\n // Filter out chain icons matching ecosystem icons\n return !predefinedIconNames.has(chain.name) && Boolean(chain.logoURI)\n })\n\n const additionalIcons = chainsWithLogos\n .slice(0, remainingSlots)\n .map((chain) => ({\n name: chain.name,\n chainType: chain.chainType,\n icon: chain.logoURI!,\n }))\n\n return [...existingChainTypeIcons, ...additionalIcons]\n }, [chains])\n\n const wrapperSize = size === 'small' ? '32px' : '40px'\n const avatarSize = size === 'small' ? '12px' : '16px'\n const avatarsCount = Math.min(icons.length, maxChainAvatarsCount)\n const gridRows = avatarsCount > 2 ? 2 : 1\n const gridColumns = avatarsCount > 1 ? 2 : 1\n\n return (\n <Box\n sx={{\n width: wrapperSize,\n height: wrapperSize,\n display: 'grid',\n gridTemplateRows: `repeat(${gridRows}, 1fr)`,\n gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n placeItems: 'center',\n }}\n >\n {icons.slice(0, avatarsCount).map((chain, idx) => {\n const isThirdAvatarInThreeAvatarLayout =\n avatarsCount === 3 && idx === 2\n\n return (\n <Avatar\n key={`${chain.chainType}-${idx}`}\n src={chain.icon}\n alt={chain.name}\n sx={{\n width: avatarSize,\n height: avatarSize,\n margin: 'auto',\n ...(isThirdAvatarInThreeAvatarLayout && {\n gridColumn: '1 / span 2',\n gridRow: '2',\n justifySelf: 'center',\n }),\n }}\n >\n {chain.chainType[0]}\n </Avatar>\n )\n })}\n </Box>\n )\n })\n"],"mappings":";;;;;AAeA,MAAM,iBAAiB;CACrB;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACF;AAED,MAAM,uBAAuB;AAE7B,MAAa,kBACX,MAAM,EAAE,QAAQ,WAA8C;CAC5D,MAAM,QAAQ,cAAc;EAE1B,MAAM,qCAAqB,IAAI,KAAwB;EACvD,MAAM,oCAAoB,IAAI,KAG3B;AAEH,SAAO,SAAS,UAAU;AACxB,sBAAmB,IACjB,MAAM,YACL,mBAAmB,IAAI,MAAM,UAAU,IAAI,KAAK,EAClD;GACD,MAAM,eAAe,kBAAkB,IAAI,MAAM,UAAU,IAAI,EAAE;AACjE,gBAAa,KAAK,MAAM;AACxB,qBAAkB,IAAI,MAAM,WAAW,aAAa;IACpD;EAGF,MAAM,yBAAyB,eAAe,QAC3C,oBAAoB;GACnB,MAAM,iBACJ,mBAAmB,IAAI,gBAAgB,UAAU,IAAI;AAGvD,OAAI,mBAAmB,GAAG;IAIxB,MAAM,cAHe,kBAAkB,IACrC,gBAAgB,UAEc,GAAG;AAEnC,QACE,eACA,YAAY,OAAO,gBAAgB,eAEnC,QAAO;;AAIX,UAAO,iBAAiB;IAE3B;AAED,MAAI,uBAAuB,WAAW,qBACpC,QAAO;EAGT,MAAM,iBACJ,uBAAuB,uBAAuB;EAGhD,MAAM,sBAAsB,IAAI,IAC9B,uBAAuB,KAAK,SAAS,KAAK,KAAK,CAChD;EAOD,MAAM,kBALkB,OAAO,QAAQ,UAAU;AAE/C,UAAO,CAAC,oBAAoB,IAAI,MAAM,KAAK,IAAI,QAAQ,MAAM,QAAQ;IAGhC,CACpC,MAAM,GAAG,eAAe,CACxB,KAAK,WAAW;GACf,MAAM,MAAM;GACZ,WAAW,MAAM;GACjB,MAAM,MAAM;GACb,EAAE;AAEL,SAAO,CAAC,GAAG,wBAAwB,GAAG,gBAAgB;IACrD,CAAC,OAAO,CAAC;CAEZ,MAAM,cAAc,SAAS,UAAU,SAAS;CAChD,MAAM,aAAa,SAAS,UAAU,SAAS;CAC/C,MAAM,eAAe,KAAK,IAAI,MAAM,QAAQ,qBAAqB;CACjE,MAAM,WAAW,eAAe,IAAI,IAAI;CACxC,MAAM,cAAc,eAAe,IAAI,IAAI;AAE3C,QACE,oBAAC,KAAD;EACE,IAAI;GACF,OAAO;GACP,QAAQ;GACR,SAAS;GACT,kBAAkB,UAAU,SAAS;GACrC,qBAAqB,UAAU,YAAY;GAC3C,YAAY;GACb;YAEA,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,OAAO,QAAQ;GAChD,MAAM,mCACJ,iBAAiB,KAAK,QAAQ;AAEhC,UACE,oBAAC,QAAD;IAEE,KAAK,MAAM;IACX,KAAK,MAAM;IACX,IAAI;KACF,OAAO;KACP,QAAQ;KACR,QAAQ;KACR,GAAI,oCAAoC;MACtC,YAAY;MACZ,SAAS;MACT,aAAa;MACd;KACF;cAEA,MAAM,UAAU;IACV,EAfF,GAAG,MAAM,UAAU,GAAG,MAepB;IAEX;EACE,CAAA;EAER"}

package/dist/esm/components/Chains/SelectChainContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectChainContent.js","names":[],"sources":["../../../../src/components/Chains/SelectChainContent.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Box, debounce, useTheme } from '@mui/material'\nimport type React from 'react'\nimport { memo, useCallback, useMemo, useRef, useState } from 'react'\nimport { useDefaultElementId } from '../../hooks/useDefaultElementId.js'\nimport { useScrollableContainer } from '../../hooks/useScrollableContainer.js'\nimport { FormKeyHelper, type FormType } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { getWidgetMaxHeight } from '../../utils/widgetSize.js'\nimport { useChainSelect } from '../ChainSelect/useChainSelect.js'\nimport { FullPageContainer } from '../FullPageContainer.js'\nimport { ChainList } from './ChainList.js'\nimport { ChainSearchInput } from './ChainSearchInput.js'\n\ninterface SelectChainContentProps {\n formType: FormType\n onSelect?: (chain: ExtendedChain) => void\n inExpansion: boolean\n}\n\nconst searchHeaderHeight = '80px'\n\nexport const SelectChainContent: React.NamedExoticComponent<SelectChainContentProps> =\n memo(function SelectChainContent({\n formType,\n onSelect,\n inExpansion,\n }: SelectChainContentProps) {\n const theme = useTheme()\n const { chains, isLoading, setCurrentChain } = useChainSelect(formType)\n const elementId = useDefaultElementId()\n const scrollableContainer = useScrollableContainer(elementId ?? '')\n const [selectedChainId] = useFieldValues(\n FormKeyHelper.getChainKey(formType)\n )\n const inputRef = useRef<HTMLInputElement>(null)\n const listRef = useRef<HTMLDivElement>(null)\n const [debouncedSearchValue, setDebouncedSearchValue] = useState('')\n\n const filteredChains = useMemo(() => {\n const value = debouncedSearchValue.toLowerCase()\n return value\n ? (chains?.filter((chain) =>\n chain.name.toLowerCase().includes(value)\n ) ?? [])\n : (chains ?? [])\n }, [chains, debouncedSearchValue])\n\n const scrollToTop = useCallback(() => {\n // Scroll widget container to top\n if (!inExpansion && scrollableContainer) {\n scrollableContainer.scrollTop = 0\n }\n }, [inExpansion, scrollableContainer])\n\n const debouncedFilterChains = useMemo(\n () =>\n debounce((value: string) => {\n setDebouncedSearchValue(value)\n scrollToTop()\n }, 250),\n [scrollToTop]\n )\n\n const onSelectChainFallback = useCallback(\n (chain: ExtendedChain) => {\n setCurrentChain(chain.id)\n },\n [setCurrentChain]\n )\n\n const onChange = useCallback(() => {\n const value = inputRef.current?.value \|\| ''\n debouncedFilterChains(value)\n }, [debouncedFilterChains])\n\n const onClear = useCallback(() => {\n setDebouncedSearchValue('')\n scrollToTop()\n }, [scrollToTop])\n\n const listContainerHeight = useMemo(() => {\n const fullContainerHeight = getWidgetMaxHeight(theme)\n const heightValue =\n typeof fullContainerHeight === 'number'\n ? `${fullContainerHeight}px`\n : fullContainerHeight\n return `calc(${heightValue} - ${searchHeaderHeight})`\n }, [theme])\n\n return (\n <FullPageContainer disableGutters>\n <ChainSearchInput\n inputRef={inputRef}\n inExpansion={inExpansion}\n onChange={onChange}\n onClear={onClear}\n searchHeaderHeight={searchHeaderHeight}\n />\n <Box\n ref={listRef}\n sx={\n inExpansion ? { height: listContainerHeight, overflow: 'auto' } : {}\n }\n >\n <ChainList\n parentRef={listRef}\n formType={formType}\n chains={filteredChains}\n isLoading={isLoading}\n onSelect={onSelect ?? onSelectChainFallback}\n selectedChainId={selectedChainId}\n hasSearchQuery={!!inputRef.current?.value}\n inExpansion={inExpansion}\n />\n </Box>\n </FullPageContainer>\n )\n })\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,qBAAqB;AAE3B,MAAa,qBACX,KAAK,SAAS,mBAAmB,EAC/B,UACA,UACA,eAC0B;CAC1B,MAAM,QAAQ,UAAU;CACxB,MAAM,EAAE,QAAQ,WAAW,oBAAoB,eAAe,SAAS;CAEvE,MAAM,sBAAsB,uBADV,~~qBAAqB~~,~~IACyB~~,GAAG;CACnE,MAAM,CAAC,mBAAmB,eACxB,cAAc,YAAY,SAAS,CACpC;CACD,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,GAAG;CAEpE,MAAM,iBAAiB,cAAc;EACnC,MAAM,QAAQ,qBAAqB,aAAa;AAChD,SAAO,QACF,QAAQ,QAAQ,UACf,MAAM,KAAK,aAAa,CAAC,SAAS,MAAM,CACzC,IAAI,EAAE,GACN,UAAU,EAAE;IAChB,CAAC,QAAQ,qBAAqB,CAAC;CAElC,MAAM,cAAc,kBAAkB;AAEpC,MAAI,CAAC,eAAe,oBAClB,qBAAoB,YAAY;IAEjC,CAAC,aAAa,oBAAoB,CAAC;CAEtC,MAAM,wBAAwB,cAE1B,UAAU,UAAkB;AAC1B,0BAAwB,MAAM;AAC9B,eAAa;IACZ,IAAI,EACT,CAAC,YAAY,CACd;CAED,MAAM,wBAAwB,aAC3B,UAAyB;AACxB,kBAAgB,MAAM,GAAG;IAE3B,CAAC,gBAAgB,CAClB;CAED,MAAM,WAAW,kBAAkB;AAEjC,wBADc,SAAS,SAAS,SAAS,GACb;IAC3B,CAAC,sBAAsB,CAAC;CAE3B,MAAM,UAAU,kBAAkB;AAChC,0BAAwB,GAAG;AAC3B,eAAa;IACZ,CAAC,YAAY,CAAC;CAEjB,MAAM,sBAAsB,cAAc;EACxC,MAAM,sBAAsB,mBAAmB,MAAM;AAKrD,SAAO,QAHL,OAAO,wBAAwB,WAC3B,GAAG,oBAAoB,MACvB,oBACqB,KAAK,mBAAmB;IAClD,CAAC,MAAM,CAAC;AAEX,QACE,qBAAC,mBAAD;EAAmB,gBAAA;YAAnB,CACE,oBAAC,kBAAD;GACY;GACG;GACH;GACD;GACW;GACpB,CAAA,EACF,oBAAC,KAAD;GACE,KAAK;GACL,IACE,cAAc;IAAE,QAAQ;IAAqB,UAAU;IAAQ,GAAG,EAAE;aAGtE,oBAAC,WAAD;IACE,WAAW;IACD;IACV,QAAQ;IACG;IACX,UAAU,YAAY;IACL;IACjB,gBAAgB,CAAC,CAAC,SAAS,SAAS;IACvB;IACb,CAAA;GACE,CAAA,CACY;;EAEtB"}
1	+ {"version":3,"file":"SelectChainContent.js","names":[],"sources":["../../../../src/components/Chains/SelectChainContent.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Box, debounce, useTheme } from '@mui/material'\nimport type React from 'react'\nimport { memo, useCallback, useMemo, useRef, useState } from 'react'\nimport { useDefaultElementId } from '../../hooks/useDefaultElementId.js'\nimport { useScrollableContainer } from '../../hooks/useScrollableContainer.js'\nimport { FormKeyHelper, type FormType } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { getWidgetMaxHeight } from '../../utils/widgetSize.js'\nimport { useChainSelect } from '../ChainSelect/useChainSelect.js'\nimport { FullPageContainer } from '../FullPageContainer.js'\nimport { ChainList } from './ChainList.js'\nimport { ChainSearchInput } from './ChainSearchInput.js'\n\ninterface SelectChainContentProps {\n formType: FormType\n onSelect?: (chain: ExtendedChain) => void\n inExpansion: boolean\n}\n\nconst searchHeaderHeight = '80px'\n\nexport const SelectChainContent: React.NamedExoticComponent<SelectChainContentProps> =\n memo(function SelectChainContent({\n formType,\n onSelect,\n inExpansion,\n }: SelectChainContentProps) {\n const theme = useTheme()\n const { chains, isLoading, setCurrentChain } = useChainSelect(formType)\n const elementId = useDefaultElementId()\n const scrollableContainer = useScrollableContainer(elementId ?? '')\n const [selectedChainId] = useFieldValues(\n FormKeyHelper.getChainKey(formType)\n )\n const inputRef = useRef<HTMLInputElement>(null)\n const listRef = useRef<HTMLDivElement>(null)\n const [debouncedSearchValue, setDebouncedSearchValue] = useState('')\n\n const filteredChains = useMemo(() => {\n const value = debouncedSearchValue.toLowerCase()\n return value\n ? (chains?.filter((chain) =>\n chain.name.toLowerCase().includes(value)\n ) ?? [])\n : (chains ?? [])\n }, [chains, debouncedSearchValue])\n\n const scrollToTop = useCallback(() => {\n // Scroll widget container to top\n if (!inExpansion && scrollableContainer) {\n scrollableContainer.scrollTop = 0\n }\n }, [inExpansion, scrollableContainer])\n\n const debouncedFilterChains = useMemo(\n () =>\n debounce((value: string) => {\n setDebouncedSearchValue(value)\n scrollToTop()\n }, 250),\n [scrollToTop]\n )\n\n const onSelectChainFallback = useCallback(\n (chain: ExtendedChain) => {\n setCurrentChain(chain.id)\n },\n [setCurrentChain]\n )\n\n const onChange = useCallback(() => {\n const value = inputRef.current?.value \|\| ''\n debouncedFilterChains(value)\n }, [debouncedFilterChains])\n\n const onClear = useCallback(() => {\n setDebouncedSearchValue('')\n scrollToTop()\n }, [scrollToTop])\n\n const listContainerHeight = useMemo(() => {\n const fullContainerHeight = getWidgetMaxHeight(theme)\n const heightValue =\n typeof fullContainerHeight === 'number'\n ? `${fullContainerHeight}px`\n : fullContainerHeight\n return `calc(${heightValue} - ${searchHeaderHeight})`\n }, [theme])\n\n return (\n <FullPageContainer disableGutters>\n <ChainSearchInput\n inputRef={inputRef}\n inExpansion={inExpansion}\n onChange={onChange}\n onClear={onClear}\n searchHeaderHeight={searchHeaderHeight}\n />\n <Box\n ref={listRef}\n sx={\n inExpansion ? { height: listContainerHeight, overflow: 'auto' } : {}\n }\n >\n <ChainList\n parentRef={listRef}\n formType={formType}\n chains={filteredChains}\n isLoading={isLoading}\n onSelect={onSelect ?? onSelectChainFallback}\n selectedChainId={selectedChainId}\n hasSearchQuery={!!inputRef.current?.value}\n inExpansion={inExpansion}\n />\n </Box>\n </FullPageContainer>\n )\n })\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,qBAAqB;AAE3B,MAAa,qBACX,KAAK,SAAS,mBAAmB,EAC/B,UACA,UACA,eAC0B;CAC1B,MAAM,QAAQ,UAAU;CACxB,MAAM,EAAE,QAAQ,WAAW,oBAAoB,eAAe,SAAS;CAEvE,MAAM,sBAAsB,uBADV,qBAC0C,IAAI,GAAG;CACnE,MAAM,CAAC,mBAAmB,eACxB,cAAc,YAAY,SAAS,CACpC;CACD,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,GAAG;CAEpE,MAAM,iBAAiB,cAAc;EACnC,MAAM,QAAQ,qBAAqB,aAAa;AAChD,SAAO,QACF,QAAQ,QAAQ,UACf,MAAM,KAAK,aAAa,CAAC,SAAS,MAAM,CACzC,IAAI,EAAE,GACN,UAAU,EAAE;IAChB,CAAC,QAAQ,qBAAqB,CAAC;CAElC,MAAM,cAAc,kBAAkB;AAEpC,MAAI,CAAC,eAAe,oBAClB,qBAAoB,YAAY;IAEjC,CAAC,aAAa,oBAAoB,CAAC;CAEtC,MAAM,wBAAwB,cAE1B,UAAU,UAAkB;AAC1B,0BAAwB,MAAM;AAC9B,eAAa;IACZ,IAAI,EACT,CAAC,YAAY,CACd;CAED,MAAM,wBAAwB,aAC3B,UAAyB;AACxB,kBAAgB,MAAM,GAAG;IAE3B,CAAC,gBAAgB,CAClB;CAED,MAAM,WAAW,kBAAkB;AAEjC,wBADc,SAAS,SAAS,SAAS,GACb;IAC3B,CAAC,sBAAsB,CAAC;CAE3B,MAAM,UAAU,kBAAkB;AAChC,0BAAwB,GAAG;AAC3B,eAAa;IACZ,CAAC,YAAY,CAAC;CAEjB,MAAM,sBAAsB,cAAc;EACxC,MAAM,sBAAsB,mBAAmB,MAAM;AAKrD,SAAO,QAHL,OAAO,wBAAwB,WAC3B,GAAG,oBAAoB,MACvB,oBACqB,KAAK,mBAAmB;IAClD,CAAC,MAAM,CAAC;AAEX,QACE,qBAAC,mBAAD;EAAmB,gBAAA;YAAnB,CACE,oBAAC,kBAAD;GACY;GACG;GACH;GACD;GACW;GACpB,CAAA,EACF,oBAAC,KAAD;GACE,KAAK;GACL,IACE,cAAc;IAAE,QAAQ;IAAqB,UAAU;IAAQ,GAAG,EAAE;aAGtE,oBAAC,WAAD;IACE,WAAW;IACD;IACV,QAAQ;IACG;IACX,UAAU,YAAY;IACL;IACjB,gBAAgB,CAAC,CAAC,SAAS,SAAS;IACvB;IACb,CAAA;GACE,CAAA,CACY;;EAEtB"}

package/dist/esm/components/ContractComponent/ItemPrice.js CHANGED Viewed

@@ -20,7 +20,7 @@ const ItemPrice = ({ token, contractCalls }) => {
 	]);
 	return /* @__PURE__ */ jsx(Token$1, {
 		token,
-		p: 2
+		sx: { p: 2 }
 	});
 };
 //#endregion

package/dist/esm/components/ContractComponent/ItemPrice.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ItemPrice.js","names":["Token"],"sources":["../../../../src/components/ContractComponent/ItemPrice.tsx"],"sourcesContent":["import { type ContractCall, formatUnits } from '@lifi/sdk'\nimport { useEffect } from 'react'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport type { TokenAmount } from '../../types/token.js'\nimport { Token } from '../Token/Token.js'\n\nexport interface ItemPriceProps {\n token: TokenAmount\n contractCalls?: ContractCall[]\n}\n\nexport const ItemPrice: React.FC<ItemPriceProps> = ({\n token,\n contractCalls,\n}) => {\n const { setFieldValue } = useFieldActions()\n\n useEffect(() => {\n if (token) {\n setFieldValue('toChain', token.chainId, { isTouched: true })\n setFieldValue('toToken', token.address, { isTouched: true })\n setFieldValue(\n 'toAmount',\n token.amount ? formatUnits(token.amount, token.decimals) : '',\n {\n isTouched: true,\n }\n )\n }\n if (contractCalls) {\n setFieldValue('contractCalls', contractCalls, {\n isTouched: true,\n })\n }\n }, [contractCalls, setFieldValue, token])\n return <Token token={token} p={2} />\n}\n"],"mappings":";;;;;;AAWA,MAAa,aAAuC,EAClD,OACA,oBACI;CACJ,MAAM,EAAE,kBAAkB,iBAAiB;AAE3C,iBAAgB;AACd,MAAI,OAAO;AACT,iBAAc,WAAW,MAAM,SAAS,EAAE,WAAW,MAAM,CAAC;AAC5D,iBAAc,WAAW,MAAM,SAAS,EAAE,WAAW,MAAM,CAAC;AAC5D,iBACE,YACA,MAAM,SAAS,YAAY,MAAM,QAAQ,MAAM,SAAS,GAAG,IAC3D,EACE,WAAW,MACZ,CACF;;AAEH,MAAI,cACF,eAAc,iBAAiB,eAAe,EAC5C,WAAW,MACZ,CAAC;IAEH;EAAC;EAAe;EAAe;EAAM,CAAC;AACzC,QAAO,oBAACA,SAAD;EAAc;EAAO,GAAG;~~EAAK~~,CAAA"}
1	+ {"version":3,"file":"ItemPrice.js","names":["Token"],"sources":["../../../../src/components/ContractComponent/ItemPrice.tsx"],"sourcesContent":["import { type ContractCall, formatUnits } from '@lifi/sdk'\nimport { useEffect } from 'react'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport type { TokenAmount } from '../../types/token.js'\nimport { Token } from '../Token/Token.js'\n\nexport interface ItemPriceProps {\n token: TokenAmount\n contractCalls?: ContractCall[]\n}\n\nexport const ItemPrice: React.FC<ItemPriceProps> = ({\n token,\n contractCalls,\n}) => {\n const { setFieldValue } = useFieldActions()\n\n useEffect(() => {\n if (token) {\n setFieldValue('toChain', token.chainId, { isTouched: true })\n setFieldValue('toToken', token.address, { isTouched: true })\n setFieldValue(\n 'toAmount',\n token.amount ? formatUnits(token.amount, token.decimals) : '',\n {\n isTouched: true,\n }\n )\n }\n if (contractCalls) {\n setFieldValue('contractCalls', contractCalls, {\n isTouched: true,\n })\n }\n }, [contractCalls, setFieldValue, token])\n return <Token token={token} sx={{ p: 2 }} />\n}\n"],"mappings":";;;;;;AAWA,MAAa,aAAuC,EAClD,OACA,oBACI;CACJ,MAAM,EAAE,kBAAkB,iBAAiB;AAE3C,iBAAgB;AACd,MAAI,OAAO;AACT,iBAAc,WAAW,MAAM,SAAS,EAAE,WAAW,MAAM,CAAC;AAC5D,iBAAc,WAAW,MAAM,SAAS,EAAE,WAAW,MAAM,CAAC;AAC5D,iBACE,YACA,MAAM,SAAS,YAAY,MAAM,QAAQ,MAAM,SAAS,GAAG,IAC3D,EACE,WAAW,MACZ,CACF;;AAEH,MAAI,cACF,eAAc,iBAAiB,eAAe,EAC5C,WAAW,MACZ,CAAC;IAEH;EAAC;EAAe;EAAe;EAAM,CAAC;AACzC,QAAO,oBAACA,SAAD;EAAc;EAAO,IAAI,EAAE,GAAG,GAAG;EAAI,CAAA"}

package/dist/esm/components/ContractComponent/NFT/NFTBase.js CHANGED Viewed

@@ -66,7 +66,7 @@ const NFTBase = ({ imageUrl, isLoading, collectionName, assetName, owner, token
 		}), /* @__PURE__ */ jsx(Token, {
 			token,
 			isLoading,
-			mt: 2
+			sx: { mt: 2 }
 		})]
 	});
 };

package/dist/esm/components/ContractComponent/NFT/NFTBase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NFTBase.js","names":[],"sources":["../../../../../src/components/ContractComponent/NFT/NFTBase.tsx"],"sourcesContent":["import { Box, Link, Skeleton, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { Token } from '../../Token/Token.js'\nimport { PreviewAvatar } from './NFT.style.js'\nimport type { NFTProps } from './types.js'\n\nexport const NFTBase: React.FC<NFTProps> = ({\n imageUrl,\n isLoading,\n collectionName,\n assetName,\n owner,\n token,\n}) => {\n const { t } = useTranslation()\n return (\n <Box\n sx={{\n p: 2,\n }}\n >\n <Box\n sx={{\n display: 'flex',\n }}\n >\n {isLoading ? (\n <Skeleton\n width={96}\n height={96}\n variant=\"rectangular\"\n sx={{ borderRadius: 1 }}\n />\n ) : (\n <PreviewAvatar src={imageUrl} />\n )}\n <Box\n sx={{\n ml: 2,\n }}\n >\n {isLoading ? (\n <Skeleton width={144} height={21} variant=\"text\" />\n ) : (\n <Typography\n sx={{\n fontSize: 14,\n color: 'text.secondary',\n }}\n >\n {collectionName}\n </Typography>\n )}\n {isLoading ? (\n <Skeleton width={112} height={27} variant=\"text\" />\n ) : (\n <Typography\n sx={{\n fontSize: 18,\n fontWeight: 600,\n }}\n >\n {assetName}\n </Typography>\n )}\n {isLoading ? (\n <Skeleton width={128} height={21} variant=\"text\" />\n ) : owner ? (\n <Typography\n sx={{\n fontSize: 14,\n color: 'text.secondary',\n }}\n >\n {t('main.ownedBy')}{' '}\n <Link\n href={owner.url}\n target=\"_blank\"\n underline=\"none\"\n color=\"primary\"\n >\n {owner.name}\n </Link>\n </Typography>\n ) : null}\n </Box>\n </Box>\n <Token token={token} isLoading={isLoading} mt={2} />\n </Box>\n )\n}\n"],"mappings":";;;;;;AAMA,MAAa,WAA+B,EAC1C,UACA,WACA,gBACA,WACA,OACA,YACI;CACJ,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,qBAAC,KAAD;EACE,IAAI,EACF,GAAG,GACJ;YAHH,CAKE,qBAAC,KAAD;GACE,IAAI,EACF,SAAS,QACV;aAHH,CAKG,YACC,oBAAC,UAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAQ;IACR,IAAI,EAAE,cAAc,GAAG;IACvB,CAAA,GAEF,oBAAC,eAAD,EAAe,KAAK,UAAY,CAAA,EAElC,qBAAC,KAAD;IACE,IAAI,EACF,IAAI,GACL;cAHH;KAKG,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;MAAS,CAAA,GAEnD,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;OACR;gBAEA;MACU,CAAA;KAEd,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;MAAS,CAAA,GAEnD,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,YAAY;OACb;gBAEA;MACU,CAAA;KAEd,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;MAAS,CAAA,GACjD,QACF,qBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;OACR;gBAJH;OAMG,EAAE,eAAe;OAAE;OACpB,oBAAC,MAAD;QACE,MAAM,MAAM;QACZ,QAAO;QACP,WAAU;QACV,OAAM;kBAEL,MAAM;QACF,CAAA;OACI;UACX;KACA;MACF;MACN,oBAAC,OAAD;GAAc;GAAkB;GAAW,IAAI;~~GAAK~~,CAAA,~~CAChD~~"}
1	+ {"version":3,"file":"NFTBase.js","names":[],"sources":["../../../../../src/components/ContractComponent/NFT/NFTBase.tsx"],"sourcesContent":["import { Box, Link, Skeleton, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { Token } from '../../Token/Token.js'\nimport { PreviewAvatar } from './NFT.style.js'\nimport type { NFTProps } from './types.js'\n\nexport const NFTBase: React.FC<NFTProps> = ({\n imageUrl,\n isLoading,\n collectionName,\n assetName,\n owner,\n token,\n}) => {\n const { t } = useTranslation()\n return (\n <Box\n sx={{\n p: 2,\n }}\n >\n <Box\n sx={{\n display: 'flex',\n }}\n >\n {isLoading ? (\n <Skeleton\n width={96}\n height={96}\n variant=\"rectangular\"\n sx={{ borderRadius: 1 }}\n />\n ) : (\n <PreviewAvatar src={imageUrl} />\n )}\n <Box\n sx={{\n ml: 2,\n }}\n >\n {isLoading ? (\n <Skeleton width={144} height={21} variant=\"text\" />\n ) : (\n <Typography\n sx={{\n fontSize: 14,\n color: 'text.secondary',\n }}\n >\n {collectionName}\n </Typography>\n )}\n {isLoading ? (\n <Skeleton width={112} height={27} variant=\"text\" />\n ) : (\n <Typography\n sx={{\n fontSize: 18,\n fontWeight: 600,\n }}\n >\n {assetName}\n </Typography>\n )}\n {isLoading ? (\n <Skeleton width={128} height={21} variant=\"text\" />\n ) : owner ? (\n <Typography\n sx={{\n fontSize: 14,\n color: 'text.secondary',\n }}\n >\n {t('main.ownedBy')}{' '}\n <Link\n href={owner.url}\n target=\"_blank\"\n underline=\"none\"\n color=\"primary\"\n >\n {owner.name}\n </Link>\n </Typography>\n ) : null}\n </Box>\n </Box>\n <Token token={token} isLoading={isLoading} sx={{ mt: 2 }} />\n </Box>\n )\n}\n"],"mappings":";;;;;;AAMA,MAAa,WAA+B,EAC1C,UACA,WACA,gBACA,WACA,OACA,YACI;CACJ,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,qBAAC,KAAD;EACE,IAAI,EACF,GAAG,GACJ;YAHH,CAKE,qBAAC,KAAD;GACE,IAAI,EACF,SAAS,QACV;aAHH,CAKG,YACC,oBAAC,UAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAQ;IACR,IAAI,EAAE,cAAc,GAAG;IACvB,CAAA,GAEF,oBAAC,eAAD,EAAe,KAAK,UAAY,CAAA,EAElC,qBAAC,KAAD;IACE,IAAI,EACF,IAAI,GACL;cAHH;KAKG,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;MAAS,CAAA,GAEnD,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;OACR;gBAEA;MACU,CAAA;KAEd,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;MAAS,CAAA,GAEnD,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,YAAY;OACb;gBAEA;MACU,CAAA;KAEd,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;MAAS,CAAA,GACjD,QACF,qBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;OACR;gBAJH;OAMG,EAAE,eAAe;OAAE;OACpB,oBAAC,MAAD;QACE,MAAM,MAAM;QACZ,QAAO;QACP,WAAU;QACV,OAAM;kBAEL,MAAM;QACF,CAAA;OACI;UACX;KACA;MACF;MACN,oBAAC,OAAD;GAAc;GAAkB;GAAW,IAAI,EAAE,IAAI,GAAG;GAAI,CAAA,CACxD"}

package/dist/esm/components/Dialog/Dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.js","names":["Dialog","MuiDialog"],"sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import type { DialogProps, Theme } from '@mui/material'\nimport { Dialog as MuiDialog } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js'\n\nexport const modalProps: { sx: { position: string; overflow: string } } = {\n sx: {\n position: 'absolute',\n overflow: 'hidden',\n },\n}\n\nexport const slotProps: DialogProps['slotProps'] = {\n paper: {\n sx: (theme: Theme) => ({\n position: 'absolute',\n backgroundImage: 'none',\n backgroundColor: theme.vars.palette.background.default,\n borderTopLeftRadius: theme.vars.shape.borderRadius,\n borderTopRightRadius: theme.vars.shape.borderRadius,\n }),\n },\n backdrop: {\n sx: {\n position: 'absolute',\n backgroundColor: 'rgb(0 0 0 / 32%)',\n backdropFilter: 'blur(3px)',\n },\n },\n}\n\nexport const Dialog: React.FC<PropsWithChildren<DialogProps>> = ({\n children,\n open,\n onClose,\n}) => {\n const getContainer = useGetScrollableContainer()\n return (\n <MuiDialog\n container={getContainer}\n open={open}\n onClose={onClose}\n sx={modalProps.sx}\n slotProps={slotProps}\n >\n {children}\n </MuiDialog>\n )\n}\n"],"mappings":";;;;AAKA,MAAa,aAA6D,EACxE,IAAI;CACF,UAAU;CACV,UAAU;CACX,EACF;AAED,MAAa,YAAsC;CACjD,OAAO,EACL,KAAK,WAAkB;EACrB,UAAU;EACV,iBAAiB;EACjB,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,qBAAqB,MAAM,KAAK,MAAM;EACtC,sBAAsB,MAAM,KAAK,MAAM;EACxC,GACF;CACD,UAAU,EACR,IAAI;EACF,UAAU;EACV,iBAAiB;EACjB,gBAAgB;EACjB,EACF;CACF;AAED,MAAaA,YAAoD,EAC/D,UACA,MACA,cACI;AAEJ,QACE,oBAACC,QAAD;EACE,WAHiB,~~2BAA2B~~;~~EAItC~~;EACG;EACT,IAAI,WAAW;EACJ;EAEV;EACS,CAAA"}
1	+ {"version":3,"file":"Dialog.js","names":["Dialog","MuiDialog"],"sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import type { DialogProps, Theme } from '@mui/material'\nimport { Dialog as MuiDialog } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js'\n\nexport const modalProps: { sx: { position: string; overflow: string } } = {\n sx: {\n position: 'absolute',\n overflow: 'hidden',\n },\n}\n\nexport const slotProps: DialogProps['slotProps'] = {\n paper: {\n sx: (theme: Theme) => ({\n position: 'absolute',\n backgroundImage: 'none',\n backgroundColor: theme.vars.palette.background.default,\n borderTopLeftRadius: theme.vars.shape.borderRadius,\n borderTopRightRadius: theme.vars.shape.borderRadius,\n }),\n },\n backdrop: {\n sx: {\n position: 'absolute',\n backgroundColor: 'rgb(0 0 0 / 32%)',\n backdropFilter: 'blur(3px)',\n },\n },\n}\n\nexport const Dialog: React.FC<PropsWithChildren<DialogProps>> = ({\n children,\n open,\n onClose,\n}) => {\n const getContainer = useGetScrollableContainer()\n return (\n <MuiDialog\n container={getContainer}\n open={open}\n onClose={onClose}\n sx={modalProps.sx}\n slotProps={slotProps}\n >\n {children}\n </MuiDialog>\n )\n}\n"],"mappings":";;;;AAKA,MAAa,aAA6D,EACxE,IAAI;CACF,UAAU;CACV,UAAU;CACX,EACF;AAED,MAAa,YAAsC;CACjD,OAAO,EACL,KAAK,WAAkB;EACrB,UAAU;EACV,iBAAiB;EACjB,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,qBAAqB,MAAM,KAAK,MAAM;EACtC,sBAAsB,MAAM,KAAK,MAAM;EACxC,GACF;CACD,UAAU,EACR,IAAI;EACF,UAAU;EACV,iBAAiB;EACjB,gBAAgB;EACjB,EACF;CACF;AAED,MAAaA,YAAoD,EAC/D,UACA,MACA,cACI;AAEJ,QACE,oBAACC,QAAD;EACE,WAHiB,2BAGM;EACjB;EACG;EACT,IAAI,WAAW;EACJ;EAEV;EACS,CAAA"}

package/dist/esm/components/Expansion/Expansion.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ExpansionType } from "../../types/widget.js";
+import "../../types/widget.js";
 import { useHasChainExpansion } from "../../hooks/useHasChainExpansion.js";
 import { ExpansionContainer } from "./Expansion.style.js";
 import { chainExpansionWidth } from "../Chains/ChainsExpanded.style.js";
@@ -12,16 +12,16 @@ function Expansion() {
 	const [withChainExpansion, expansionType] = useHasChainExpansion();
 	const chainExpansionTypeRef = useRef(expansionType);
 	const [routesOpen, setRoutesOpen] = useState(false);
-	if (expansionType === ExpansionType.FromChain || expansionType === ExpansionType.ToChain) chainExpansionTypeRef.current = expansionType;
+	if (expansionType === "fromChain" || expansionType === "toChain") chainExpansionTypeRef.current = expansionType;
 	return /* @__PURE__ */ jsxs(ExpansionContainer, {
 		width: useMemo(() => {
 			return routesOpen ? routesExpansionWidth : withChainExpansion ? chainExpansionWidth : 0;
 		}, [routesOpen, withChainExpansion]),
 		children: [/* @__PURE__ */ jsx(RoutesExpanded, {
-			canOpen: expansionType === ExpansionType.Routes,
+			canOpen: expansionType === "routes",
 			setOpenExpansion: setRoutesOpen
 		}), /* @__PURE__ */ jsx(ChainsExpanded, {
-			formType: chainExpansionTypeRef.current === ExpansionType.FromChain ? "from" : "to",
+			formType: chainExpansionTypeRef.current === "fromChain" ? "from" : "to",
 			open: withChainExpansion
 		})]
 	});