@lifi/widget 0.0.0-preview-6cc63bac

package/dist/esm/AppDefault.js

@@ -0,0 +1,214 @@
+import { navigationRoutes } from "./utils/navigationRoutes.js";
+import { AppLayout } from "./AppLayout.js";
+import { NotFound } from "./components/NotFound.js";
+import { ActivitiesPage } from "./pages/ActivitiesPage/ActivitiesPage.js";
+import { LanguagesPage } from "./pages/LanguagesPage.js";
+import { MainPage } from "./pages/MainPage/MainPage.js";
+import { RoutesPage } from "./pages/RoutesPage/RoutesPage.js";
+import { SelectChainPage } from "./pages/SelectChainPage/SelectChainPage.js";
+import { SelectEnabledToolsPage } from "./pages/SelectEnabledToolsPage.js";
+import { SelectTokenPage } from "./pages/SelectTokenPage/SelectTokenPage.js";
+import { BookmarksPage } from "./pages/SendToWallet/BookmarksPage.js";
+import { ConnectedWalletsPage } from "./pages/SendToWallet/ConnectedWalletsPage.js";
+import { RecentWalletsPage } from "./pages/SendToWallet/RecentWalletsPage.js";
+import { SendToConfiguredWalletPage } from "./pages/SendToWallet/SendToConfiguredWalletPage.js";
+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
+const rootRoute = createRootRoute({
+	component: AppLayout,
+	notFoundComponent: NotFound
+});
+const indexRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: navigationRoutes.home,
+	component: MainPage
+});
+const settingsLayoutRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: navigationRoutes.settings
+});
+const settingsIndexRoute = createRoute({
+	getParentRoute: () => settingsLayoutRoute,
+	path: "/",
+	component: SettingsPage
+});
+const settingsBridgesRoute = createRoute({
+	getParentRoute: () => settingsLayoutRoute,
+	path: navigationRoutes.bridges,
+	component: () => /* @__PURE__ */ jsx(SelectEnabledToolsPage, { type: "Bridges" })
+});
+const settingsExchangesRoute = createRoute({
+	getParentRoute: () => settingsLayoutRoute,
+	path: navigationRoutes.exchanges,
+	component: () => /* @__PURE__ */ jsx(SelectEnabledToolsPage, { type: "Exchanges" })
+});
+const settingsLanguagesRoute = createRoute({
+	getParentRoute: () => settingsLayoutRoute,
+	path: navigationRoutes.languages,
+	component: LanguagesPage
+});
+const fromTokenLayoutRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: navigationRoutes.fromToken
+});
+const fromTokenIndexRoute = createRoute({
+	getParentRoute: () => fromTokenLayoutRoute,
+	path: "/",
+	component: () => /* @__PURE__ */ jsx(SelectTokenPage, { formType: "from" })
+});
+const fromTokenFromChainRoute = createRoute({
+	getParentRoute: () => fromTokenLayoutRoute,
+	path: navigationRoutes.fromChain,
+	component: () => /* @__PURE__ */ jsx(SelectChainPage, { formType: "from" })
+});
+const toTokenLayoutRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: navigationRoutes.toToken
+});
+const toTokenIndexRoute = createRoute({
+	getParentRoute: () => toTokenLayoutRoute,
+	path: "/",
+	component: () => /* @__PURE__ */ jsx(SelectTokenPage, { formType: "to" })
+});
+const toTokenToChainRoute = createRoute({
+	getParentRoute: () => toTokenLayoutRoute,
+	path: navigationRoutes.toChain,
+	component: () => /* @__PURE__ */ jsx(SelectChainPage, { formType: "to" })
+});
+const toTokenNativeRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: navigationRoutes.toTokenNative,
+	component: () => /* @__PURE__ */ jsx(SelectChainPage, {
+		formType: "to",
+		selectNativeToken: true
+	})
+});
+const routesLayoutRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: navigationRoutes.routes
+});
+const routesIndexRoute = createRoute({
+	getParentRoute: () => routesLayoutRoute,
+	path: "/",
+	component: RoutesPage
+});
+const routesTransactionExecutionRoute = createRoute({
+	getParentRoute: () => routesLayoutRoute,
+	path: navigationRoutes.transactionExecution
+});
+const routesTransactionExecutionIndexRoute = createRoute({
+	getParentRoute: () => routesTransactionExecutionRoute,
+	path: "/",
+	component: TransactionPage
+});
+const routesTransactionExecutionDetailsRoute = createRoute({
+	getParentRoute: () => routesTransactionExecutionRoute,
+	path: navigationRoutes.transactionDetails,
+	component: TransactionDetailsPage
+});
+const activitiesLayoutRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: navigationRoutes.activities
+});
+const activitiesIndexRoute = createRoute({
+	getParentRoute: () => activitiesLayoutRoute,
+	path: "/",
+	component: ActivitiesPage
+});
+const activitiesDetailsRoute = createRoute({
+	getParentRoute: () => activitiesLayoutRoute,
+	path: navigationRoutes.transactionDetails,
+	component: TransactionDetailsPage
+});
+const activitiesTransactionExecutionRoute = createRoute({
+	getParentRoute: () => activitiesLayoutRoute,
+	path: navigationRoutes.transactionExecution,
+	component: TransactionPage
+});
+const sendToWalletLayoutRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: navigationRoutes.sendToWallet
+});
+const sendToWalletIndexRoute = createRoute({
+	getParentRoute: () => sendToWalletLayoutRoute,
+	path: "/",
+	component: SendToWalletPage
+});
+const sendToWalletBookmarksRoute = createRoute({
+	getParentRoute: () => sendToWalletLayoutRoute,
+	path: navigationRoutes.bookmarks,
+	component: BookmarksPage
+});
+const sendToWalletRecentWalletsRoute = createRoute({
+	getParentRoute: () => sendToWalletLayoutRoute,
+	path: navigationRoutes.recentWallets,
+	component: RecentWalletsPage
+});
+const sendToWalletConnectedWalletsRoute = createRoute({
+	getParentRoute: () => sendToWalletLayoutRoute,
+	path: navigationRoutes.connectedWallets,
+	component: ConnectedWalletsPage
+});
+const configuredWalletsRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: navigationRoutes.configuredWallets,
+	component: SendToConfiguredWalletPage
+});
+const transactionExecutionLayoutRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: navigationRoutes.transactionExecution
+});
+const transactionExecutionIndexRoute = createRoute({
+	getParentRoute: () => transactionExecutionLayoutRoute,
+	path: "/",
+	component: TransactionPage
+});
+const transactionExecutionDetailsRoute = createRoute({
+	getParentRoute: () => transactionExecutionLayoutRoute,
+	path: navigationRoutes.transactionDetails,
+	component: TransactionDetailsPage
+});
+const 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 AppDefault = () => {
+	const [router] = useState(() => createRouter({
+		routeTree,
+		history: createMemoryHistory({ initialEntries: ["/"] }),
+		defaultPreload: "intent"
+	}));
+	return /* @__PURE__ */ jsx(RouterProvider, { router });
+};
+//#endregion
+export { AppDefault };
+
+//# sourceMappingURL=AppDefault.js.map

package/dist/esm/AppDefault.js.map

@@ -0,0 +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/AppDrawer.d.ts

@@ -0,0 +1,12 @@
+import { ForwardRefExoticComponent, PropsWithChildren, RefAttributes } from "react";
+
+//#region src/AppDrawer.d.ts
+interface WidgetDrawer {
+  isOpen(): void;
+  toggleDrawer(): void;
+  openDrawer(): void;
+  closeDrawer(): void;
+}
+//#endregion
+export { WidgetDrawer };
+//# sourceMappingURL=AppDrawer.d.ts.map

package/dist/esm/AppDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppDrawer.d.ts","names":[],"sources":["../../src/AppDrawer.tsx"],"mappings":";;;UAkBiB,YAAA;EACf,MAAA;EACA,YAAA;EACA,UAAA;EACA,WAAA;AAAA"}

package/dist/esm/AppDrawer.js

@@ -0,0 +1,63 @@
+import { DrawerContext } from "./AppDrawerContext.js";
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Drawer } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+//#region src/AppDrawer.tsx
+const AppDrawer = forwardRef(({ elementRef, open, onClose, children }, ref) => {
+	const openRef = useRef(Boolean(open));
+	const [drawerOpen, setDrawerOpen] = useState(Boolean(open));
+	const toggleDrawer = useCallback(() => {
+		setDrawerOpen((open) => {
+			openRef.current = !open;
+			return openRef.current;
+		});
+		if (!openRef.current) onClose?.();
+	}, [onClose]);
+	const openDrawer = useCallback(() => {
+		setDrawerOpen(true);
+		openRef.current = true;
+	}, []);
+	const closeDrawer = useCallback(() => {
+		setDrawerOpen(false);
+		openRef.current = false;
+		onClose?.();
+	}, [onClose]);
+	useImperativeHandle(ref, () => ({
+		isOpen: () => openRef.current,
+		toggleDrawer,
+		openDrawer,
+		closeDrawer
+	}), [
+		closeDrawer,
+		openDrawer,
+		toggleDrawer
+	]);
+	const drawerContext = useMemo(() => ({ closeDrawer }), [closeDrawer]);
+	return /* @__PURE__ */ jsx(DrawerContext.Provider, {
+		value: drawerContext,
+		children: /* @__PURE__ */ jsx(Drawer, {
+			ref: elementRef,
+			anchor: "right",
+			open: drawerOpen,
+			onClose: closeDrawer,
+			slotProps: {
+				paper: { sx: (theme) => ({
+					background: theme.vars.palette.background.default,
+					width: theme?.container?.width ?? "100%",
+					minWidth: theme?.container?.minWidth ?? theme.breakpoints.values.xs,
+					maxWidth: theme?.container?.maxWidth ?? theme.breakpoints.values.sm
+				}) },
+				backdrop: { sx: {
+					backgroundColor: "rgb(0 0 0 / 48%)",
+					backdropFilter: "blur(3px)"
+				} }
+			},
+			keepMounted: true,
+			children
+		})
+	});
+});
+//#endregion
+export { AppDrawer };
+
+//# sourceMappingURL=AppDrawer.js.map

package/dist/esm/AppDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppDrawer.js","names":[],"sources":["../../src/AppDrawer.tsx"],"sourcesContent":["import { Drawer } from '@mui/material'\nimport type {\n  ForwardRefExoticComponent,\n  PropsWithChildren,\n  RefAttributes,\n} from 'react'\nimport {\n  forwardRef,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport type { WidgetDrawerContext } from './AppDrawerContext.js'\nimport { DrawerContext } from './AppDrawerContext.js'\nimport type { WidgetDrawerProps } from './types/widget.js'\n\nexport interface WidgetDrawer {\n  isOpen(): void\n  toggleDrawer(): void\n  openDrawer(): void\n  closeDrawer(): void\n}\n\nexport const AppDrawer: ForwardRefExoticComponent<\n  PropsWithChildren<WidgetDrawerProps> & RefAttributes<WidgetDrawer>\n> = forwardRef<WidgetDrawer, PropsWithChildren<WidgetDrawerProps>>(\n  ({ elementRef, open, onClose, children }, ref) => {\n    const openRef = useRef(Boolean(open))\n    const [drawerOpen, setDrawerOpen] = useState(Boolean(open))\n\n    const toggleDrawer = useCallback(() => {\n      setDrawerOpen((open) => {\n        openRef.current = !open\n        return openRef.current\n      })\n      if (!openRef.current) {\n        onClose?.()\n      }\n    }, [onClose])\n\n    const openDrawer = useCallback(() => {\n      setDrawerOpen(true)\n      openRef.current = true\n    }, [])\n\n    const closeDrawer = useCallback(() => {\n      setDrawerOpen(false)\n      openRef.current = false\n      onClose?.()\n    }, [onClose])\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        isOpen: () => openRef.current,\n        toggleDrawer,\n        openDrawer,\n        closeDrawer,\n      }),\n      [closeDrawer, openDrawer, toggleDrawer]\n    )\n\n    const drawerContext: WidgetDrawerContext = useMemo(\n      () => ({\n        closeDrawer,\n      }),\n      [closeDrawer]\n    )\n\n    return (\n      <DrawerContext.Provider value={drawerContext}>\n        <Drawer\n          ref={elementRef}\n          anchor=\"right\"\n          open={drawerOpen}\n          onClose={closeDrawer}\n          slotProps={{\n            paper: {\n              sx: (theme) => ({\n                background: theme.vars.palette.background.default,\n                width: theme?.container?.width ?? '100%',\n                minWidth:\n                  theme?.container?.minWidth ?? theme.breakpoints.values.xs,\n                maxWidth:\n                  theme?.container?.maxWidth ?? theme.breakpoints.values.sm,\n              }),\n            },\n            backdrop: {\n              sx: {\n                backgroundColor: 'rgb(0 0 0 / 48%)',\n                backdropFilter: 'blur(3px)',\n              },\n            },\n          }}\n          keepMounted\n        >\n          {children}\n        </Drawer>\n      </DrawerContext.Provider>\n    )\n  }\n)\n"],"mappings":";;;;;AAyBA,MAAa,YAET,YACD,EAAE,YAAY,MAAM,SAAS,YAAY,QAAQ;CAChD,MAAM,UAAU,OAAO,QAAQ,IAAI,CAAC;CACpC,MAAM,CAAC,YAAY,iBAAiB,SAAS,QAAQ,IAAI,CAAC;CAE1D,MAAM,eAAe,kBAAkB;EACrC,eAAe,SAAS;GACtB,QAAQ,UAAU,CAAC;GACnB,OAAO,QAAQ;EACjB,CAAC;EACD,IAAI,CAAC,QAAQ,SACX,UAAU;CAEd,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,aAAa,kBAAkB;EACnC,cAAc,IAAI;EAClB,QAAQ,UAAU;CACpB,GAAG,CAAC,CAAC;CAEL,MAAM,cAAc,kBAAkB;EACpC,cAAc,KAAK;EACnB,QAAQ,UAAU;EAClB,UAAU;CACZ,GAAG,CAAC,OAAO,CAAC;CAEZ,oBACE,YACO;EACL,cAAc,QAAQ;EACtB;EACA;EACA;CACF,IACA;EAAC;EAAa;EAAY;CAAY,CACxC;CAEA,MAAM,gBAAqC,eAClC,EACL,YACF,IACA,CAAC,WAAW,CACd;CAEA,OACE,oBAAC,cAAc,UAAf;EAAwB,OAAO;YAC7B,oBAAC,QAAD;GACE,KAAK;GACL,QAAO;GACP,MAAM;GACN,SAAS;GACT,WAAW;IACT,OAAO,EACL,KAAK,WAAW;KACd,YAAY,MAAM,KAAK,QAAQ,WAAW;KAC1C,OAAO,OAAO,WAAW,SAAS;KAClC,UACE,OAAO,WAAW,YAAY,MAAM,YAAY,OAAO;KACzD,UACE,OAAO,WAAW,YAAY,MAAM,YAAY,OAAO;IAC3D,GACF;IACA,UAAU,EACR,IAAI;KACF,iBAAiB;KACjB,gBAAgB;IAClB,EACF;GACF;GACA,aAAA;GAEC;EACK,CAAA;CACc,CAAA;AAE5B,CACF"}

package/dist/esm/AppDrawerContext.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+//#region src/AppDrawerContext.ts
+const DrawerContext = createContext({});
+const useDrawer = () => useContext(DrawerContext);
+//#endregion
+export { DrawerContext, useDrawer };
+
+//# sourceMappingURL=AppDrawerContext.js.map

package/dist/esm/AppDrawerContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppDrawerContext.js","names":[],"sources":["../../src/AppDrawerContext.ts"],"sourcesContent":["import { type Context, createContext, useContext } from 'react'\n\nexport interface WidgetDrawerContext {\n  closeDrawer?(): void\n}\n\nexport const DrawerContext: Context<WidgetDrawerContext> =\n  createContext<WidgetDrawerContext>({})\n\nexport const useDrawer = (): WidgetDrawerContext => useContext(DrawerContext)\n"],"mappings":";;AAMA,MAAa,gBACX,cAAmC,CAAC,CAAC;AAEvC,MAAa,kBAAuC,WAAW,aAAa"}

package/dist/esm/AppLayout.js

@@ -0,0 +1,33 @@
+"use client";
+import { useWidgetConfig } from "./providers/WidgetProvider/WidgetProvider.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";
+import { Header } from "./components/Header/Header.js";
+import { Initializer } from "./components/Initializer.js";
+import { PageEntered } from "./components/PageEntered.js";
+import { useWideVariant } from "./hooks/useWideVariant.js";
+import { URLSearchParamsBuilder } from "./stores/form/URLSearchParamsBuilder.js";
+import { Outlet } from "@tanstack/react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/AppLayout.tsx
+const AppLayout = () => {
+	const { elementId, buildUrl } = useWidgetConfig();
+	const wideVariant = useWideVariant();
+	return /* @__PURE__ */ jsxs(AppExpandedContainer, {
+		id: createElementId("widget-app-expanded-container", elementId),
+		"data-version": version,
+		children: [/* @__PURE__ */ jsxs(AppContainer, { children: [
+			/* @__PURE__ */ jsx(Header, {}),
+			/* @__PURE__ */ jsx(Initializer, {}),
+			buildUrl ? /* @__PURE__ */ jsx(URLSearchParamsBuilder, {}) : null,
+			/* @__PURE__ */ jsx(PageEntered, {}),
+			/* @__PURE__ */ jsx(Outlet, {})
+		] }), wideVariant && /* @__PURE__ */ jsx(Expansion, {})]
+	});
+};
+//#endregion
+export { AppLayout };
+
+//# sourceMappingURL=AppLayout.js.map

package/dist/esm/AppLayout.js.map

@@ -0,0 +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,gBAAgB;CAChD,MAAM,cAAc,eAAe;CAEnC,OACE,qBAAC,sBAAD;EACE,IAAI,gBAAA,iCAAgD,SAAS;EAC7D,gBAAc;YAFhB,CAIE,qBAAC,cAAD,EAAA,UAAA;GACE,oBAAC,QAAD,CAAS,CAAA;GACT,oBAAC,aAAD,CAAc,CAAA;GACb,WAAW,oBAAC,wBAAD,CAAyB,CAAA,IAAI;GACzC,oBAAC,aAAD,CAAc,CAAA;GACd,oBAAC,QAAD,CAAS,CAAA;EACG,EAAA,CAAA,GACb,eAAe,oBAAC,WAAD,CAAY,CAAA,CACR;;AAE1B"}

package/dist/esm/AppProvider.js

@@ -0,0 +1,30 @@
+import { SettingsStoreProvider } from "./stores/settings/SettingsStore.js";
+import { WidgetProvider } from "./providers/WidgetProvider/WidgetProvider.js";
+import { SDKClientProvider } from "./providers/SDKClientProvider.js";
+import { I18nProvider } from "./providers/I18nProvider/I18nProvider.js";
+import { QueryClientProvider } from "./providers/QueryClientProvider.js";
+import { ThemeProvider } from "./providers/ThemeProvider/ThemeProvider.js";
+import { WalletProvider } from "./providers/WalletProvider/WalletProvider.js";
+import { StoreProvider } from "./stores/StoreProvider.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/AppProvider.tsx
+const AppProvider = ({ children, config, formRef }) => {
+	return /* @__PURE__ */ jsx(QueryClientProvider, { children: /* @__PURE__ */ jsx(SettingsStoreProvider, {
+		config,
+		children: /* @__PURE__ */ jsx(WidgetProvider, {
+			config,
+			children: /* @__PURE__ */ jsx(I18nProvider, { children: /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(SDKClientProvider, { children: /* @__PURE__ */ jsx(WalletProvider, {
+				providers: config.providers ?? [],
+				children: /* @__PURE__ */ jsx(StoreProvider, {
+					config,
+					formRef,
+					children
+				})
+			}) }) }) })
+		})
+	}) });
+};
+//#endregion
+export { AppProvider };
+
+//# sourceMappingURL=AppProvider.js.map

package/dist/esm/AppProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppProvider.js","names":[],"sources":["../../src/AppProvider.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { I18nProvider } from './providers/I18nProvider/I18nProvider.js'\nimport { QueryClientProvider } from './providers/QueryClientProvider.js'\nimport { SDKClientProvider } from './providers/SDKClientProvider.js'\nimport { ThemeProvider } from './providers/ThemeProvider/ThemeProvider.js'\nimport { WalletProvider } from './providers/WalletProvider/WalletProvider.js'\nimport { WidgetProvider } from './providers/WidgetProvider/WidgetProvider.js'\nimport { StoreProvider } from './stores/StoreProvider.js'\nimport { SettingsStoreProvider } from './stores/settings/SettingsStore.js'\nimport type { WidgetConfigProps } from './types/widget.js'\n\nexport const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({\n  children,\n  config,\n  formRef,\n}) => {\n  return (\n    <QueryClientProvider>\n      <SettingsStoreProvider config={config}>\n        <WidgetProvider config={config}>\n          <I18nProvider>\n            <ThemeProvider>\n              <SDKClientProvider>\n                <WalletProvider providers={config.providers ?? []}>\n                  <StoreProvider config={config} formRef={formRef}>\n                    {children}\n                  </StoreProvider>\n                </WalletProvider>\n              </SDKClientProvider>\n            </ThemeProvider>\n          </I18nProvider>\n        </WidgetProvider>\n      </SettingsStoreProvider>\n    </QueryClientProvider>\n  )\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAa,eAA+D,EAC1E,UACA,QACA,cACI;CACJ,OACE,oBAAC,qBAAD,EAAA,UACE,oBAAC,uBAAD;EAA+B;YAC7B,oBAAC,gBAAD;GAAwB;aACtB,oBAAC,cAAD,EAAA,UACE,oBAAC,eAAD,EAAA,UACE,oBAAC,mBAAD,EAAA,UACE,oBAAC,gBAAD;IAAgB,WAAW,OAAO,aAAa,CAAC;cAC9C,oBAAC,eAAD;KAAuB;KAAiB;KACrC;IACY,CAAA;GACD,CAAA,EACC,CAAA,EACN,CAAA,EACH,CAAA;EACA,CAAA;CACK,CAAA,EACJ,CAAA;AAEzB"}

package/dist/esm/components/ActionRow/ActionRow.js

@@ -0,0 +1,17 @@
+import { ActionRowContainer, ActionRowLabel } from "./ActionRow.style.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ActionRow/ActionRow.tsx
+const ActionRow = ({ message, startAdornment, endAdornment, sx }) => {
+	return /* @__PURE__ */ jsxs(ActionRowContainer, {
+		sx,
+		children: [
+			startAdornment,
+			/* @__PURE__ */ jsx(ActionRowLabel, { children: message }),
+			endAdornment
+		]
+	});
+};
+//#endregion
+export { ActionRow };
+
+//# sourceMappingURL=ActionRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionRow.js","names":[],"sources":["../../../../src/components/ActionRow/ActionRow.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material'\nimport type { FC, ReactNode } from 'react'\nimport { ActionRowContainer, ActionRowLabel } from './ActionRow.style.js'\n\ninterface ActionRowProps {\n  message: string\n  startAdornment: ReactNode\n  endAdornment?: ReactNode\n  sx?: SxProps<Theme>\n}\n\nexport const ActionRow: FC<ActionRowProps> = ({\n  message,\n  startAdornment,\n  endAdornment,\n  sx,\n}) => {\n  return (\n    <ActionRowContainer sx={sx}>\n      {startAdornment}\n      <ActionRowLabel>{message}</ActionRowLabel>\n      {endAdornment}\n    </ActionRowContainer>\n  )\n}\n"],"mappings":";;;AAWA,MAAa,aAAiC,EAC5C,SACA,gBACA,cACA,SACI;CACJ,OACE,qBAAC,oBAAD;EAAwB;YAAxB;GACG;GACD,oBAAC,gBAAD,EAAA,UAAiB,QAAwB,CAAA;GACxC;EACiB;;AAExB"}

package/dist/esm/components/ActionRow/ActionRow.style.js

@@ -0,0 +1,21 @@
+import { Box, Typography, styled } from "@mui/material";
+//#region src/components/ActionRow/ActionRow.style.tsx
+const ActionRowContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	gap: theme.spacing(1),
+	padding: theme.spacing(1),
+	borderRadius: theme.vars.shape.borderRadiusTertiary,
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`
+}));
+const ActionRowLabel = styled(Typography)(({ theme }) => ({
+	flex: 1,
+	fontSize: 12,
+	fontWeight: 500,
+	lineHeight: 1.3334,
+	color: theme.vars.palette.text.primary
+}));
+//#endregion
+export { ActionRowContainer, ActionRowLabel };
+
+//# sourceMappingURL=ActionRow.style.js.map

package/dist/esm/components/ActionRow/ActionRow.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionRow.style.js","names":[],"sources":["../../../../src/components/ActionRow/ActionRow.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const ActionRowContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n    padding: theme.spacing(1),\n    borderRadius: theme.vars.shape.borderRadiusTertiary,\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  }))\n\nexport const ActionRowLabel: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(({ theme }) => ({\n    flex: 1,\n    fontSize: 12,\n    fontWeight: 500,\n    lineHeight: 1.3334,\n    color: theme.vars.palette.text.primary,\n  }))\n"],"mappings":";;AAGA,MAAa,qBACX,OAAO,GAAG,GAAG,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,CAAC;CACpB,SAAS,MAAM,QAAQ,CAAC;CACxB,cAAc,MAAM,KAAK,MAAM;CAC/B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;AAChF,EAAE;AAEJ,MAAa,iBACX,OAAO,UAAU,GAAG,EAAE,aAAa;CACjC,MAAM;CACN,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;AACjC,EAAE"}

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

@@ -0,0 +1,117 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { formatInputAmount, formatTokenPrice, priceToTokenAmount } from "../../utils/format.js";
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { InputCard } from "../Card/InputCard.js";
+import { useToken } from "../../hooks/useToken.js";
+import { useInputModeStore } from "../../stores/inputMode/useInputModeStore.js";
+import { fitInputText } from "../../utils/input.js";
+import { AmountInputCardHeader, AmountInputCardTitle, FormContainer, FormControl, Input } from "./AmountInput.style.js";
+import { AmountInputEndAdornment } from "./AmountInputEndAdornment.js";
+import { AmountInputStartAdornment } from "./AmountInputStartAdornment.js";
+import { PriceFormHelperText } from "./PriceFormHelperText.js";
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/AmountInput/AmountInput.tsx
+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?.fromAmount;
+	return /* @__PURE__ */ jsx(AmountInputBase, {
+		formType,
+		token,
+		bottomAdornment: /* @__PURE__ */ jsx(PriceFormHelperText, { formType }),
+		disabled,
+		...props
+	});
+};
+const AmountInputBase = ({ formType, token, startAdornment, bottomAdornment, disabled, ...props }) => {
+	const { t } = useTranslation();
+	const { mode, modeOptions } = useWidgetConfig();
+	const ref = useRef(null);
+	const isEditingRef = useRef(false);
+	const [formattedPriceInput, setFormattedPriceInput] = useState("");
+	const amountKey = FormKeyHelper.getAmountKey(formType);
+	const [value] = useFieldValues(amountKey);
+	const { setFieldValue } = useFieldActions();
+	const { inputMode } = useInputModeStore();
+	const currentInputMode = inputMode[formType];
+	let displayValue;
+	if (isEditingRef.current) if (currentInputMode === "price") displayValue = formattedPriceInput;
+	else displayValue = value;
+	else if (currentInputMode === "price") displayValue = formatInputAmount(formatTokenPrice(value, token?.priceUSD).toFixed(2), 2);
+	else displayValue = value;
+	const handleChange = (event) => {
+		const { value: inputValue } = event.target;
+		isEditingRef.current = true;
+		let formattedValue;
+		if (currentInputMode === "price") {
+			formattedValue = formatInputAmount(inputValue.replace("$", ""), 2, true);
+			const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD);
+			setFormattedPriceInput(formattedValue);
+			setFieldValue(amountKey, tokenValue, {
+				isDirty: true,
+				isTouched: true
+			});
+		} else {
+			formattedValue = formatInputAmount(inputValue, token?.decimals, true);
+			setFieldValue(amountKey, formattedValue, {
+				isDirty: true,
+				isTouched: true
+			});
+		}
+	};
+	const handleBlur = (event) => {
+		const { value: inputValue } = event.target;
+		isEditingRef.current = false;
+		let formattedValue;
+		if (currentInputMode === "price") {
+			formattedValue = formatInputAmount(inputValue.replace("$", ""), 2);
+			setFieldValue(amountKey, formatInputAmount(priceToTokenAmount(formattedValue, token?.priceUSD), token?.decimals), {
+				isDirty: true,
+				isTouched: true
+			});
+		} else {
+			formattedValue = formatInputAmount(inputValue, token?.decimals);
+			setFieldValue(amountKey, formattedValue, {
+				isDirty: true,
+				isTouched: true
+			});
+		}
+	};
+	useLayoutEffect(() => {
+		if (ref.current) fitInputText(24, 14, ref.current);
+	}, [displayValue]);
+	const title = mode === "custom" ? modeOptions?.custom?.type === "deposit" ? t("header.amount") : t("header.youPay") : t("header.send");
+	return /* @__PURE__ */ jsxs(InputCard, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(AmountInputCardHeader, { children: /* @__PURE__ */ jsx(AmountInputCardTitle, { children: title }) }),
+			/* @__PURE__ */ jsxs(FormContainer, { children: [/* @__PURE__ */ jsx(AmountInputStartAdornment, { formType }), /* @__PURE__ */ jsxs(FormControl, {
+				fullWidth: true,
+				children: [/* @__PURE__ */ jsx(Input, {
+					inputRef: ref,
+					size: "small",
+					autoComplete: "off",
+					placeholder: currentInputMode === "price" ? "$0" : "0",
+					startAdornment,
+					inputProps: { inputMode: "decimal" },
+					onChange: handleChange,
+					onBlur: handleBlur,
+					value: currentInputMode === "price" ? displayValue ? `$${displayValue}` : "" : displayValue,
+					name: amountKey,
+					disabled,
+					required: true
+				}), bottomAdornment]
+			})] }),
+			!disabled && /* @__PURE__ */ jsx(AmountInputEndAdornment, { formType })
+		]
+	});
+};
+//#endregion
+export { AmountInput };
+
+//# sourceMappingURL=AmountInput.js.map

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

@@ -0,0 +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 {\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?.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 { mode, modeOptions } = 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    mode === 'custom'\n      ? modeOptions?.custom?.type === '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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"}