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

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

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 (206) 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/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/Chains/AllChainsAvatar.js CHANGED Viewed

@@ -27,6 +27,12 @@ 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;

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 = 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;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"}

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/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
 		})]
 	});

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Expansion.js","names":[],"sources":["../../../../src/components/Expansion/Expansion.tsx"],"sourcesContent":["import { type JSX, useMemo, useRef, useState } from 'react'\nimport { useHasChainExpansion } from '../../hooks/useHasChainExpansion.js'\nimport { ExpansionType } from '../../types/widget.js'\nimport { ChainsExpanded } from '../Chains/ChainsExpanded.js'\nimport { chainExpansionWidth } from '../Chains/ChainsExpanded.style.js'\nimport { RoutesExpanded } from '../Routes/RoutesExpanded.js'\nimport { routesExpansionWidth } from '../Routes/RoutesExpanded.style.js'\nimport { ExpansionContainer } from './Expansion.style.js'\n\nexport function Expansion(): JSX.Element {\n const [withChainExpansion, expansionType] = useHasChainExpansion()\n const chainExpansionTypeRef = useRef<ExpansionType>(expansionType)\n const [routesOpen, setRoutesOpen] = useState(false)\n\n // Track the previous chain expansion type to avoid re-renders when transitioning to Routes\n if (\n expansionType === ExpansionType.FromChain \|\|\n expansionType === ExpansionType.ToChain\n ) {\n chainExpansionTypeRef.current = expansionType\n }\n\n const containerWidth = useMemo(() => {\n return routesOpen\n ? routesExpansionWidth\n : withChainExpansion\n ? chainExpansionWidth\n : 0\n }, [routesOpen, withChainExpansion])\n\n return (\n <ExpansionContainer width={containerWidth}>\n <RoutesExpanded\n canOpen={expansionType === ExpansionType.Routes}\n setOpenExpansion={setRoutesOpen}\n />\n <ChainsExpanded\n formType={\n chainExpansionTypeRef.current === ExpansionType.FromChain\n ? 'from'\n : 'to'\n }\n open={withChainExpansion}\n />\n </ExpansionContainer>\n )\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,YAAyB;CACvC,MAAM,CAAC,oBAAoB,iBAAiB,sBAAsB;CAClE,MAAM,wBAAwB,OAAsB,cAAc;CAClE,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;AAGnD,KACE,~~kBAAkB~~,~~cAAc~~,~~aAChC~~,~~kBAAkB~~,~~cAAc,QAEhC,~~uBAAsB,UAAU;AAWlC,QACE,qBAAC,oBAAD;EAAoB,OATC,cAAc;AACnC,UAAO,aACH,uBACA,qBACE,sBACA;KACL,CAAC,YAAY,mBAAmB,CAAC;YAGlC,CACE,oBAAC,gBAAD;GACE,SAAS,~~kBAAkB,cAAc~~;~~GACzC~~,kBAAkB;GAClB,CAAA,EACF,oBAAC,gBAAD;GACE,UACE,sBAAsB,~~YAAY~~,~~cAAc~~,~~YAC5C,~~SACA;GAEN,MAAM;GACN,CAAA,CACiB"}
1	+ {"version":3,"file":"Expansion.js","names":[],"sources":["../../../../src/components/Expansion/Expansion.tsx"],"sourcesContent":["import { type JSX, useMemo, useRef, useState } from 'react'\nimport { useHasChainExpansion } from '../../hooks/useHasChainExpansion.js'\nimport { ExpansionType } from '../../types/widget.js'\nimport { ChainsExpanded } from '../Chains/ChainsExpanded.js'\nimport { chainExpansionWidth } from '../Chains/ChainsExpanded.style.js'\nimport { RoutesExpanded } from '../Routes/RoutesExpanded.js'\nimport { routesExpansionWidth } from '../Routes/RoutesExpanded.style.js'\nimport { ExpansionContainer } from './Expansion.style.js'\n\nexport function Expansion(): JSX.Element {\n const [withChainExpansion, expansionType] = useHasChainExpansion()\n const chainExpansionTypeRef = useRef<ExpansionType>(expansionType)\n const [routesOpen, setRoutesOpen] = useState(false)\n\n // Track the previous chain expansion type to avoid re-renders when transitioning to Routes\n if (\n expansionType === ExpansionType.FromChain \|\|\n expansionType === ExpansionType.ToChain\n ) {\n chainExpansionTypeRef.current = expansionType\n }\n\n const containerWidth = useMemo(() => {\n return routesOpen\n ? routesExpansionWidth\n : withChainExpansion\n ? chainExpansionWidth\n : 0\n }, [routesOpen, withChainExpansion])\n\n return (\n <ExpansionContainer width={containerWidth}>\n <RoutesExpanded\n canOpen={expansionType === ExpansionType.Routes}\n setOpenExpansion={setRoutesOpen}\n />\n <ChainsExpanded\n formType={\n chainExpansionTypeRef.current === ExpansionType.FromChain\n ? 'from'\n : 'to'\n }\n open={withChainExpansion}\n />\n </ExpansionContainer>\n )\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,YAAyB;CACvC,MAAM,CAAC,oBAAoB,iBAAiB,sBAAsB;CAClE,MAAM,wBAAwB,OAAsB,cAAc;CAClE,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;AAGnD,KACE,kBAAA,eACA,kBAAA,UAEA,uBAAsB,UAAU;AAWlC,QACE,qBAAC,oBAAD;EAAoB,OATC,cAAc;AACnC,UAAO,aACH,uBACA,qBACE,sBACA;KACL,CAAC,YAAY,mBAAmB,CAAC;YAGlC,CACE,oBAAC,gBAAD;GACE,SAAS,kBAAA;GACT,kBAAkB;GAClB,CAAA,EACF,oBAAC,gBAAD;GACE,UACE,sBAAsB,YAAA,cAClB,SACA;GAEN,MAAM;GACN,CAAA,CACiB"}

package/dist/esm/components/Header/ActivitiesButton.js CHANGED Viewed

@@ -19,7 +19,7 @@ const ActivitiesButton = () => {
 			active: indicator.active || indicator.failed,
 			size: "medium",
 			onClick: () => navigate({ to: navigationRoutes.activities }),
-			disableRipple: true,
+			disableRipple: indicator.active || indicator.failed,
 			children: /* @__PURE__ */ jsx(ErrorBadge, {
 				invisible: !indicator.failed,
 				badgeContent: /* @__PURE__ */ jsx(ErrorRounded, {

package/dist/esm/components/Header/ActivitiesButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActivitiesButton.js","names":["HistoryIcon"],"sources":["../../../../src/components/Header/ActivitiesButton.tsx"],"sourcesContent":["import ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport HistoryIcon from '@mui/icons-material/History'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRouteExecutionIndicator } from '../../stores/routes/useRouteExecutionIndicator.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CircularProgressPending } from '../Step/CircularProgress.style.js'\nimport {\n ActivitiesIconButton,\n ErrorBadge,\n IconContainer,\n ProgressTrack,\n} from './ActivitiesButton.style.js'\n\nexport const ActivitiesButton = (): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const indicator = useRouteExecutionIndicator()\n\n return (\n <Tooltip title={t('header.activities')}>\n <ActivitiesIconButton\n active={indicator.active \|\| indicator.failed}\n size=\"medium\"\n onClick={() => navigate({ to: navigationRoutes.activities })}\n disableRipple\n >\n <ErrorBadge\n invisible={!indicator.failed}\n badgeContent={\n <ErrorRounded color=\"error\" sx={{ width: 20, height: 20 }} />\n }\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n >\n <IconContainer>\n {(indicator.active \|\| indicator.failed) && (\n <ProgressTrack\n variant=\"determinate\"\n value={100}\n size={40}\n thickness={3}\n />\n )}\n {indicator.active && (\n <CircularProgressPending\n size={40}\n sx={{ position: 'absolute', top: -8, left: -8 }}\n />\n )}\n <HistoryIcon />\n </IconContainer>\n </ErrorBadge>\n </ActivitiesIconButton>\n </Tooltip>\n )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,yBAAsC;CACjD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,YAAY,4BAA4B;AAE9C,QACE,oBAAC,SAAD;EAAS,OAAO,EAAE,oBAAoB;YACpC,oBAAC,sBAAD;GACE,QAAQ,UAAU,UAAU,UAAU;GACtC,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,YAAY,CAAC;GAC5D,~~eAAA~~;~~aAEA~~,oBAAC,YAAD;IACE,WAAW,CAAC,UAAU;IACtB,cACE,oBAAC,cAAD;KAAc,OAAM;KAAQ,IAAI;MAAE,OAAO;MAAI,QAAQ;MAAI;KAAI,CAAA;IAE/D,SAAQ;IACR,cAAc;KAAE,UAAU;KAAO,YAAY;KAAS;cAEtD,qBAAC,eAAD,EAAA,UAAA;MACI,UAAU,UAAU,UAAU,WAC9B,oBAAC,eAAD;MACE,SAAQ;MACR,OAAO;MACP,MAAM;MACN,WAAW;MACX,CAAA;KAEH,UAAU,UACT,oBAAC,yBAAD;MACE,MAAM;MACN,IAAI;OAAE,UAAU;OAAY,KAAK;OAAI,MAAM;OAAI;MAC/C,CAAA;KAEJ,oBAACA,SAAD,EAAe,CAAA;KACD,EAAA,CAAA;IACL,CAAA;GACQ,CAAA;EACf,CAAA"}
1	+ {"version":3,"file":"ActivitiesButton.js","names":["HistoryIcon"],"sources":["../../../../src/components/Header/ActivitiesButton.tsx"],"sourcesContent":["import ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport HistoryIcon from '@mui/icons-material/History'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRouteExecutionIndicator } from '../../stores/routes/useRouteExecutionIndicator.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CircularProgressPending } from '../Step/CircularProgress.style.js'\nimport {\n ActivitiesIconButton,\n ErrorBadge,\n IconContainer,\n ProgressTrack,\n} from './ActivitiesButton.style.js'\n\nexport const ActivitiesButton = (): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const indicator = useRouteExecutionIndicator()\n\n return (\n <Tooltip title={t('header.activities')}>\n <ActivitiesIconButton\n active={indicator.active \|\| indicator.failed}\n size=\"medium\"\n onClick={() => navigate({ to: navigationRoutes.activities })}\n disableRipple={indicator.active \|\| indicator.failed}\n >\n <ErrorBadge\n invisible={!indicator.failed}\n badgeContent={\n <ErrorRounded color=\"error\" sx={{ width: 20, height: 20 }} />\n }\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n >\n <IconContainer>\n {(indicator.active \|\| indicator.failed) && (\n <ProgressTrack\n variant=\"determinate\"\n value={100}\n size={40}\n thickness={3}\n />\n )}\n {indicator.active && (\n <CircularProgressPending\n size={40}\n sx={{ position: 'absolute', top: -8, left: -8 }}\n />\n )}\n <HistoryIcon />\n </IconContainer>\n </ErrorBadge>\n </ActivitiesIconButton>\n </Tooltip>\n )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,yBAAsC;CACjD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,YAAY,4BAA4B;AAE9C,QACE,oBAAC,SAAD;EAAS,OAAO,EAAE,oBAAoB;YACpC,oBAAC,sBAAD;GACE,QAAQ,UAAU,UAAU,UAAU;GACtC,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,YAAY,CAAC;GAC5D,eAAe,UAAU,UAAU,UAAU;aAE7C,oBAAC,YAAD;IACE,WAAW,CAAC,UAAU;IACtB,cACE,oBAAC,cAAD;KAAc,OAAM;KAAQ,IAAI;MAAE,OAAO;MAAI,QAAQ;MAAI;KAAI,CAAA;IAE/D,SAAQ;IACR,cAAc;KAAE,UAAU;KAAO,YAAY;KAAS;cAEtD,qBAAC,eAAD,EAAA,UAAA;MACI,UAAU,UAAU,UAAU,WAC9B,oBAAC,eAAD;MACE,SAAQ;MACR,OAAO;MACP,MAAM;MACN,WAAW;MACX,CAAA;KAEH,UAAU,UACT,oBAAC,yBAAD;MACE,MAAM;MACN,IAAI;OAAE,UAAU;OAAY,KAAK;OAAI,MAAM;OAAI;MAC/C,CAAA;KAEJ,oBAACA,SAAD,EAAe,CAAA;KACD,EAAA,CAAA;IACL,CAAA;GACQ,CAAA;EACf,CAAA"}

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

@@ -1,5 +1,5 @@
 import { useSetHeaderHeight } from "../../stores/header/useHeaderStore.js";
-import { ElementId, createElementId } from "../../utils/elements.js";
+import { createElementId } from "../../utils/elements.js";
 import { stickyHeaderRoutes } from "../../utils/navigationRoutes.js";
 import { useDefaultElementId } from "../../hooks/useDefaultElementId.js";
 import { Container } from "./Header.style.js";
@@ -29,7 +29,7 @@ const HeaderContainer = ({ children }) => {
 		};
 	}, [setHeaderHeight]);
 	return /* @__PURE__ */ jsx(Container, {
-		id: createElementId(ElementId.Header, elementId ?? ""),
+		id: createElementId("widget-header", elementId ?? ""),
 		sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)),
 		ref: headerRef,
 		children

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.js","names":[],"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import { useLocation } from '@tanstack/react-router'\nimport type { FC, PropsWithChildren } from 'react'\nimport { useLayoutEffect, useRef } from 'react'\nimport { useDefaultElementId } from '../../hooks/useDefaultElementId.js'\nimport { useSetHeaderHeight } from '../../stores/header/useHeaderStore.js'\nimport { createElementId, ElementId } from '../../utils/elements.js'\nimport { stickyHeaderRoutes } from '../../utils/navigationRoutes.js'\nimport { Container } from './Header.style.js'\nimport { NavigationHeader } from './NavigationHeader.js'\nimport { WalletHeader } from './WalletHeader.js'\n\nconst HeaderContainer: FC<PropsWithChildren> = ({ children }) => {\n const { pathname } = useLocation()\n const elementId = useDefaultElementId()\n const headerRef = useRef<HTMLDivElement>(null)\n const { setHeaderHeight } = useSetHeaderHeight()\n\n useLayoutEffect(() => {\n const handleHeaderResize = () => {\n const height = headerRef.current?.getBoundingClientRect().height\n\n if (height) {\n setHeaderHeight(height)\n }\n }\n\n let resizeObserver: ResizeObserver\n\n if (headerRef.current) {\n resizeObserver = new ResizeObserver(handleHeaderResize)\n resizeObserver.observe(headerRef.current)\n }\n\n return () => {\n if (resizeObserver) {\n resizeObserver.disconnect()\n }\n }\n }, [setHeaderHeight])\n\n return (\n <Container\n id={createElementId(ElementId.Header, elementId ?? '')}\n sticky={stickyHeaderRoutes.some((route) => pathname.includes(route))}\n ref={headerRef}\n >\n {children}\n </Container>\n )\n}\n\nexport const Header: FC = () => {\n return (\n <HeaderContainer>\n <WalletHeader />\n <NavigationHeader />\n </HeaderContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,mBAA0C,EAAE,eAAe;CAC/D,MAAM,EAAE,aAAa,aAAa;CAClC,MAAM,YAAY,qBAAqB;CACvC,MAAM,YAAY,OAAuB,KAAK;CAC9C,MAAM,EAAE,oBAAoB,oBAAoB;AAEhD,uBAAsB;EACpB,MAAM,2BAA2B;GAC/B,MAAM,SAAS,UAAU,SAAS,uBAAuB,CAAC;AAE1D,OAAI,OACF,iBAAgB,OAAO;;EAI3B,IAAI;AAEJ,MAAI,UAAU,SAAS;AACrB,oBAAiB,IAAI,eAAe,mBAAmB;AACvD,kBAAe,QAAQ,UAAU,QAAQ;;AAG3C,eAAa;AACX,OAAI,eACF,gBAAe,YAAY;;IAG9B,CAAC,gBAAgB,CAAC;AAErB,QACE,oBAAC,WAAD;EACE,IAAI,~~gBAAgB~~,~~UAAU~~,~~QAAQ,~~aAAa,GAAG;EACtD,QAAQ,mBAAmB,MAAM,UAAU,SAAS,SAAS,MAAM,CAAC;EACpE,KAAK;EAEJ;EACS,CAAA;;AAIhB,MAAa,eAAmB;AAC9B,QACE,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAgB,CAAA,EAChB,oBAAC,kBAAD,EAAoB,CAAA,CACJ,EAAA,CAAA"}
1	+ {"version":3,"file":"Header.js","names":[],"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import { useLocation } from '@tanstack/react-router'\nimport type { FC, PropsWithChildren } from 'react'\nimport { useLayoutEffect, useRef } from 'react'\nimport { useDefaultElementId } from '../../hooks/useDefaultElementId.js'\nimport { useSetHeaderHeight } from '../../stores/header/useHeaderStore.js'\nimport { createElementId, ElementId } from '../../utils/elements.js'\nimport { stickyHeaderRoutes } from '../../utils/navigationRoutes.js'\nimport { Container } from './Header.style.js'\nimport { NavigationHeader } from './NavigationHeader.js'\nimport { WalletHeader } from './WalletHeader.js'\n\nconst HeaderContainer: FC<PropsWithChildren> = ({ children }) => {\n const { pathname } = useLocation()\n const elementId = useDefaultElementId()\n const headerRef = useRef<HTMLDivElement>(null)\n const { setHeaderHeight } = useSetHeaderHeight()\n\n useLayoutEffect(() => {\n const handleHeaderResize = () => {\n const height = headerRef.current?.getBoundingClientRect().height\n\n if (height) {\n setHeaderHeight(height)\n }\n }\n\n let resizeObserver: ResizeObserver\n\n if (headerRef.current) {\n resizeObserver = new ResizeObserver(handleHeaderResize)\n resizeObserver.observe(headerRef.current)\n }\n\n return () => {\n if (resizeObserver) {\n resizeObserver.disconnect()\n }\n }\n }, [setHeaderHeight])\n\n return (\n <Container\n id={createElementId(ElementId.Header, elementId ?? '')}\n sticky={stickyHeaderRoutes.some((route) => pathname.includes(route))}\n ref={headerRef}\n >\n {children}\n </Container>\n )\n}\n\nexport const Header: FC = () => {\n return (\n <HeaderContainer>\n <WalletHeader />\n <NavigationHeader />\n </HeaderContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,mBAA0C,EAAE,eAAe;CAC/D,MAAM,EAAE,aAAa,aAAa;CAClC,MAAM,YAAY,qBAAqB;CACvC,MAAM,YAAY,OAAuB,KAAK;CAC9C,MAAM,EAAE,oBAAoB,oBAAoB;AAEhD,uBAAsB;EACpB,MAAM,2BAA2B;GAC/B,MAAM,SAAS,UAAU,SAAS,uBAAuB,CAAC;AAE1D,OAAI,OACF,iBAAgB,OAAO;;EAI3B,IAAI;AAEJ,MAAI,UAAU,SAAS;AACrB,oBAAiB,IAAI,eAAe,mBAAmB;AACvD,kBAAe,QAAQ,UAAU,QAAQ;;AAG3C,eAAa;AACX,OAAI,eACF,gBAAe,YAAY;;IAG9B,CAAC,gBAAgB,CAAC;AAErB,QACE,oBAAC,WAAD;EACE,IAAI,gBAAA,iBAAkC,aAAa,GAAG;EACtD,QAAQ,mBAAmB,MAAM,UAAU,SAAS,SAAS,MAAM,CAAC;EACpE,KAAK;EAEJ;EACS,CAAA;;AAIhB,MAAa,eAAmB;AAC9B,QACE,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAgB,CAAA,EAChB,oBAAC,kBAAD,EAAoB,CAAA,CACJ,EAAA,CAAA"}

package/dist/esm/components/Header/NavigationHeader.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
 import { useHeaderStore } from "../../stores/header/useHeaderStore.js";
-import { HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { backButtonRoutes, navigationRoutes, navigationRoutesValues } from "../../utils/navigationRoutes.js";
 import { HeaderAppBar, HeaderControlsContainer } from "./Header.style.js";
 import { ActivitiesButton } from "./ActivitiesButton.js";
@@ -47,9 +47,9 @@ const NavigationHeader = () => {
 				children: title
 			}),
 			pathname === navigationRoutes.home ? /* @__PURE__ */ jsxs(HeaderControlsContainer, { children: [
-				account.isConnected && !hiddenUI?.includes(HiddenUI.History) && /* @__PURE__ */ jsx(ActivitiesButton, {}),
+				account.isConnected && !hiddenUI?.includes("history") && /* @__PURE__ */ jsx(ActivitiesButton, {}),
 				/* @__PURE__ */ jsx(SettingsButton, {}),
-				variant === "drawer" && !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? /* @__PURE__ */ jsx(CloseDrawerButton, { header: "navigation" }) : null
+				variant === "drawer" && !hiddenUI?.includes("drawerCloseButton") ? /* @__PURE__ */ jsx(CloseDrawerButton, { header: "navigation" }) : null
 			] }) : element || /* @__PURE__ */ jsx(Box, { sx: {
 				width: 28,
 				height: 40

package/dist/esm/components/Header/NavigationHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationHeader.js","names":[],"sources":["../../../../src/components/Header/NavigationHeader.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { Box, Typography } from '@mui/material'\nimport { useLocation } from '@tanstack/react-router'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport {\n backButtonRoutes,\n navigationRoutes,\n navigationRoutesValues,\n} from '../../utils/navigationRoutes.js'\nimport { ActivitiesButton } from './ActivitiesButton.js'\nimport { BackButton } from './BackButton.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport { HeaderAppBar, HeaderControlsContainer } from './Header.style.js'\nimport { SettingsButton } from './SettingsButton.js'\nimport { SplitNavigationTabs } from './SplitNavigationTabs.js'\n\nexport const NavigationHeader: React.FC = () => {\n const { subvariant, hiddenUI, variant, defaultUI, subvariantOptions } =\n useWidgetConfig()\n const { account } = useAccount()\n const [element, title] = useHeaderStore((state) => [\n state.element,\n state.title,\n ])\n const { pathname } = useLocation()\n const cleanedPathname = pathname.endsWith('/')\n ? pathname.slice(0, -1)\n : pathname\n const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1)\n const hasPath = navigationRoutesValues.includes(path)\n\n // Show tabs when split is undefined (default tabs) or an object with defaultTab\n // Hide tabs when split is a string ('bridge' or 'swap' - single mode)\n const showSplitOptions =\n subvariant === 'split' &&\n !hasPath &&\n typeof subvariantOptions?.split !== 'string'\n\n return (\n <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>\n {backButtonRoutes.includes(path) ? <BackButton /> : null}\n {showSplitOptions ? (\n <Box sx={{ flex: 1, marginRight: 1 }}>\n <SplitNavigationTabs />\n </Box>\n ) : (\n <Typography\n align={hasPath ? 'center' : 'left'}\n noWrap={defaultUI?.navigationHeaderTitleNoWrap ?? true}\n sx={{\n fontSize: hasPath ? 18 : 24,\n fontWeight: '700',\n flex: 1,\n }}\n >\n {title}\n </Typography>\n )}\n {pathname === navigationRoutes.home ? (\n <HeaderControlsContainer>\n {account.isConnected && !hiddenUI?.includes(HiddenUI.History) && (\n <ActivitiesButton />\n )}\n <SettingsButton />\n {variant === 'drawer' &&\n !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (\n <CloseDrawerButton header=\"navigation\" />\n ) : null}\n </HeaderControlsContainer>\n ) : (\n element \|\| (\n <Box\n sx={{\n width: 28,\n height: 40,\n }}\n />\n )\n )}\n </HeaderAppBar>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,yBAAmC;CAC9C,MAAM,EAAE,YAAY,UAAU,SAAS,WAAW,sBAChD,iBAAiB;CACnB,MAAM,EAAE,YAAY,YAAY;CAChC,MAAM,CAAC,SAAS,SAAS,gBAAgB,UAAU,CACjD,MAAM,SACN,MAAM,MACP,CAAC;CACF,MAAM,EAAE,aAAa,aAAa;CAClC,MAAM,kBAAkB,SAAS,SAAS,IAAI,GAC1C,SAAS,MAAM,GAAG,GAAG,GACrB;CACJ,MAAM,OAAO,gBAAgB,UAAU,gBAAgB,YAAY,IAAI,GAAG,EAAE;CAC5E,MAAM,UAAU,uBAAuB,SAAS,KAAK;CAIrD,MAAM,mBACJ,eAAe,WACf,CAAC,WACD,OAAO,mBAAmB,UAAU;AAEtC,QACE,qBAAC,cAAD;EAAc,WAAW;EAAG,IAAI;GAAE,YAAY;GAAG,eAAe;GAAK;YAArE;GACG,iBAAiB,SAAS,KAAK,GAAG,oBAAC,YAAD,EAAc,CAAA,GAAG;GACnD,mBACC,oBAAC,KAAD;IAAK,IAAI;KAAE,MAAM;KAAG,aAAa;KAAG;cAClC,oBAAC,qBAAD,EAAuB,CAAA;IACnB,CAAA,GAEN,oBAAC,YAAD;IACE,OAAO,UAAU,WAAW;IAC5B,QAAQ,WAAW,+BAA+B;IAClD,IAAI;KACF,UAAU,UAAU,KAAK;KACzB,YAAY;KACZ,MAAM;KACP;cAEA;IACU,CAAA;GAEd,aAAa,iBAAiB,OAC7B,qBAAC,yBAAD,EAAA,UAAA;IACG,QAAQ,eAAe,CAAC,UAAU,~~SAAS~~,~~SAAS~~,~~QAAQ,~~IAC3D,oBAAC,kBAAD,EAAoB,CAAA;IAEtB,oBAAC,gBAAD,EAAkB,CAAA;IACjB,YAAY,YACb,CAAC,UAAU,~~SAAS~~,~~SAAS~~,~~kBAAkB,~~GAC7C,oBAAC,mBAAD,EAAmB,QAAO,cAAe,CAAA,GACvC;IACoB,EAAA,CAAA,GAE1B,WACE,oBAAC,KAAD,EACE,IAAI;IACF,OAAO;IACP,QAAQ;IACT,EACD,CAAA;GAGO"}
1	+ {"version":3,"file":"NavigationHeader.js","names":[],"sources":["../../../../src/components/Header/NavigationHeader.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { Box, Typography } from '@mui/material'\nimport { useLocation } from '@tanstack/react-router'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport {\n backButtonRoutes,\n navigationRoutes,\n navigationRoutesValues,\n} from '../../utils/navigationRoutes.js'\nimport { ActivitiesButton } from './ActivitiesButton.js'\nimport { BackButton } from './BackButton.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport { HeaderAppBar, HeaderControlsContainer } from './Header.style.js'\nimport { SettingsButton } from './SettingsButton.js'\nimport { SplitNavigationTabs } from './SplitNavigationTabs.js'\n\nexport const NavigationHeader: React.FC = () => {\n const { subvariant, hiddenUI, variant, defaultUI, subvariantOptions } =\n useWidgetConfig()\n const { account } = useAccount()\n const [element, title] = useHeaderStore((state) => [\n state.element,\n state.title,\n ])\n const { pathname } = useLocation()\n const cleanedPathname = pathname.endsWith('/')\n ? pathname.slice(0, -1)\n : pathname\n const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1)\n const hasPath = navigationRoutesValues.includes(path)\n\n // Show tabs when split is undefined (default tabs) or an object with defaultTab\n // Hide tabs when split is a string ('bridge' or 'swap' - single mode)\n const showSplitOptions =\n subvariant === 'split' &&\n !hasPath &&\n typeof subvariantOptions?.split !== 'string'\n\n return (\n <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>\n {backButtonRoutes.includes(path) ? <BackButton /> : null}\n {showSplitOptions ? (\n <Box sx={{ flex: 1, marginRight: 1 }}>\n <SplitNavigationTabs />\n </Box>\n ) : (\n <Typography\n align={hasPath ? 'center' : 'left'}\n noWrap={defaultUI?.navigationHeaderTitleNoWrap ?? true}\n sx={{\n fontSize: hasPath ? 18 : 24,\n fontWeight: '700',\n flex: 1,\n }}\n >\n {title}\n </Typography>\n )}\n {pathname === navigationRoutes.home ? (\n <HeaderControlsContainer>\n {account.isConnected && !hiddenUI?.includes(HiddenUI.History) && (\n <ActivitiesButton />\n )}\n <SettingsButton />\n {variant === 'drawer' &&\n !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (\n <CloseDrawerButton header=\"navigation\" />\n ) : null}\n </HeaderControlsContainer>\n ) : (\n element \|\| (\n <Box\n sx={{\n width: 28,\n height: 40,\n }}\n />\n )\n )}\n </HeaderAppBar>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,yBAAmC;CAC9C,MAAM,EAAE,YAAY,UAAU,SAAS,WAAW,sBAChD,iBAAiB;CACnB,MAAM,EAAE,YAAY,YAAY;CAChC,MAAM,CAAC,SAAS,SAAS,gBAAgB,UAAU,CACjD,MAAM,SACN,MAAM,MACP,CAAC;CACF,MAAM,EAAE,aAAa,aAAa;CAClC,MAAM,kBAAkB,SAAS,SAAS,IAAI,GAC1C,SAAS,MAAM,GAAG,GAAG,GACrB;CACJ,MAAM,OAAO,gBAAgB,UAAU,gBAAgB,YAAY,IAAI,GAAG,EAAE;CAC5E,MAAM,UAAU,uBAAuB,SAAS,KAAK;CAIrD,MAAM,mBACJ,eAAe,WACf,CAAC,WACD,OAAO,mBAAmB,UAAU;AAEtC,QACE,qBAAC,cAAD;EAAc,WAAW;EAAG,IAAI;GAAE,YAAY;GAAG,eAAe;GAAK;YAArE;GACG,iBAAiB,SAAS,KAAK,GAAG,oBAAC,YAAD,EAAc,CAAA,GAAG;GACnD,mBACC,oBAAC,KAAD;IAAK,IAAI;KAAE,MAAM;KAAG,aAAa;KAAG;cAClC,oBAAC,qBAAD,EAAuB,CAAA;IACnB,CAAA,GAEN,oBAAC,YAAD;IACE,OAAO,UAAU,WAAW;IAC5B,QAAQ,WAAW,+BAA+B;IAClD,IAAI;KACF,UAAU,UAAU,KAAK;KACzB,YAAY;KACZ,MAAM;KACP;cAEA;IACU,CAAA;GAEd,aAAa,iBAAiB,OAC7B,qBAAC,yBAAD,EAAA,UAAA;IACG,QAAQ,eAAe,CAAC,UAAU,SAAA,UAA0B,IAC3D,oBAAC,kBAAD,EAAoB,CAAA;IAEtB,oBAAC,gBAAD,EAAkB,CAAA;IACjB,YAAY,YACb,CAAC,UAAU,SAAA,oBAAoC,GAC7C,oBAAC,mBAAD,EAAmB,QAAO,cAAe,CAAA,GACvC;IACoB,EAAA,CAAA,GAE1B,WACE,oBAAC,KAAD,EACE,IAAI;IACF,OAAO;IACP,QAAQ;IACT,EACD,CAAA;GAGO"}

package/dist/esm/components/Header/WalletHeader.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { useFieldValues } from "../../stores/form/useFieldValues.js";
 import { useExternalWalletProvider } from "../../providers/WalletProvider/useExternalWalletProvider.js";
 import { useChain } from "../../hooks/useChain.js";
@@ -20,7 +20,7 @@ import Wallet from "@mui/icons-material/Wallet";
 const useInternalWalletManagement = () => {
 	const { hiddenUI } = useWidgetConfig();
 	const { useExternalWalletProvidersOnly } = useExternalWalletProvider();
-	const isWalletMenuHidden = hiddenUI?.includes(HiddenUI.WalletMenu);
+	const isWalletMenuHidden = hiddenUI?.includes("walletMenu");
 	return { shouldShowWalletMenu: !useExternalWalletProvidersOnly && !isWalletMenuHidden };
 };
 const WalletHeader = () => {
@@ -37,7 +37,7 @@ const WalletMenuButton = () => {
 	const [fromChainId] = useFieldValues("fromChain");
 	const { chain: fromChain } = useChain(fromChainId);
 	const activeAccount = (fromChain ? accounts.find((account) => account.chainType === fromChain.chainType) : void 0) || account;
-	if (variant === "drawer") return /* @__PURE__ */ jsxs(DrawerWalletContainer, { children: [activeAccount.isConnected ? /* @__PURE__ */ jsx(ConnectedButton, { account: activeAccount }) : /* @__PURE__ */ jsx(ConnectButton, {}), !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? /* @__PURE__ */ jsx(CloseDrawerButton, { header: "wallet" }) : null] });
+	if (variant === "drawer") return /* @__PURE__ */ jsxs(DrawerWalletContainer, { children: [activeAccount.isConnected ? /* @__PURE__ */ jsx(ConnectedButton, { account: activeAccount }) : /* @__PURE__ */ jsx(ConnectButton, {}), !hiddenUI?.includes("drawerCloseButton") ? /* @__PURE__ */ jsx(CloseDrawerButton, { header: "wallet" }) : null] });
 	return activeAccount.isConnected ? /* @__PURE__ */ jsx(ConnectedButton, { account: activeAccount }) : /* @__PURE__ */ jsx(ConnectButton, {});
 };
 const ConnectButton = () => {