@lifi/widget 0.0.0-preview-6cc63bac

package/dist/esm/pages/SendToWallet/RecentWalletsPage.js

@@ -0,0 +1,124 @@
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { useBookmarkActions } from "../../stores/bookmarks/useBookmarkActions.js";
+import { useBookmarks } from "../../stores/bookmarks/useBookmarks.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { PageContainer } from "../../components/PageContainer.js";
+import { defaultChainIdsByType } from "../../utils/chainType.js";
+import { useToAddressRequirements } from "../../hooks/useToAddressRequirements.js";
+import { shortenAddress } from "../../utils/wallet.js";
+import { useExplorer } from "../../hooks/useExplorer.js";
+import { useHeader } from "../../hooks/useHeader.js";
+import { useListHeight } from "../../hooks/useListHeight.js";
+import { ContextMenu } from "../../components/ContextMenu.js";
+import { EmptyListIndicator } from "../../components/EmptyListIndicator/EmptyListIndicator.js";
+import { AccountAvatar } from "../../components/Avatar/AccountAvatar.js";
+import { ListItem as ListItem$1 } from "../../components/ListItem/ListItem.js";
+import { ListItemButton as ListItemButton$1 } from "../../components/ListItem/ListItemButton.js";
+import { BookmarkAddressSheet } from "./BookmarkAddressSheet.js";
+import { useRef, useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { List, ListItemAvatar, ListItemText } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ContentCopyRounded from "@mui/icons-material/ContentCopyRounded";
+import OpenInNewRounded from "@mui/icons-material/OpenInNewRounded";
+import DeleteOutline from "@mui/icons-material/DeleteOutlined";
+import AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet";
+import TurnedInNot from "@mui/icons-material/TurnedInNot";
+//#region src/pages/SendToWallet/RecentWalletsPage.tsx
+const RecentWalletsPage = () => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const [bookmarkTarget, setBookmarkTarget] = useState();
+	const bookmarkAddressSheetRef = useRef(null);
+	const listParentRef = useRef(null);
+	const { recentWallets } = useBookmarks();
+	const { requiredToChainType } = useToAddressRequirements();
+	const { removeRecentWallet, addBookmark, setSelectedBookmark, addRecentWallet } = useBookmarkActions();
+	const { setFieldValue } = useFieldActions();
+	const { getAddressLink } = useExplorer();
+	useHeader(t("header.recentWallets"));
+	const { listHeight } = useListHeight({ listParentRef });
+	const handleRecentSelected = (recentWallet) => {
+		addRecentWallet(recentWallet);
+		setFieldValue("toAddress", recentWallet.address, {
+			isTouched: true,
+			isDirty: true
+		});
+		setSelectedBookmark(recentWallet);
+		navigate({
+			to: navigationRoutes.home,
+			replace: true
+		});
+	};
+	const handleAddBookmark = (bookmark) => {
+		addBookmark(bookmark);
+		navigate({
+			to: navigationRoutes.bookmarks,
+			replace: true
+		});
+	};
+	return /* @__PURE__ */ jsxs(PageContainer, {
+		disableGutters: true,
+		children: [/* @__PURE__ */ jsxs(List, {
+			className: "long-list",
+			ref: listParentRef,
+			style: {
+				height: listHeight,
+				overflow: "auto"
+			},
+			disablePadding: true,
+			sx: { paddingTop: 1.5 },
+			children: [recentWallets.map((recentWallet) => /* @__PURE__ */ jsxs(ListItem$1, {
+				sx: { position: "relative" },
+				children: [/* @__PURE__ */ jsxs(ListItemButton$1, {
+					disabled: requiredToChainType && requiredToChainType !== recentWallet.chainType,
+					onClick: () => handleRecentSelected(recentWallet),
+					children: [/* @__PURE__ */ jsx(ListItemAvatar, { children: /* @__PURE__ */ jsx(AccountAvatar, { chainId: defaultChainIdsByType[recentWallet.chainType] }) }), /* @__PURE__ */ jsx(ListItemText, {
+						primary: recentWallet.name || shortenAddress(recentWallet.address),
+						secondary: recentWallet.name ? shortenAddress(recentWallet.address) : void 0
+					})]
+				}), /* @__PURE__ */ jsx(ContextMenu, {
+					disabled: !!(requiredToChainType && requiredToChainType !== recentWallet.chainType),
+					items: [
+						{
+							icon: /* @__PURE__ */ jsx(ContentCopyRounded, {}),
+							label: t("button.copyAddress"),
+							onClick: () => navigator.clipboard.writeText(recentWallet.address)
+						},
+						{
+							icon: /* @__PURE__ */ jsx(OpenInNewRounded, {}),
+							label: t("button.viewOnExplorer"),
+							onClick: () => window.open(getAddressLink(recentWallet.address, defaultChainIdsByType[recentWallet.chainType]), "_blank")
+						},
+						{
+							icon: /* @__PURE__ */ jsx(TurnedInNot, {}),
+							label: t("button.bookmark"),
+							onClick: () => {
+								setBookmarkTarget(recentWallet);
+								bookmarkAddressSheetRef.current?.open();
+							}
+						},
+						{
+							icon: /* @__PURE__ */ jsx(DeleteOutline, {}),
+							label: t("button.delete"),
+							onClick: () => removeRecentWallet(recentWallet.address)
+						}
+					]
+				})]
+			}, recentWallet.address)), !recentWallets.length && /* @__PURE__ */ jsx(EmptyListIndicator, {
+				icon: /* @__PURE__ */ jsx(AccountBalanceWalletIcon, {}),
+				title: t("sendToWallet.noRecentWallets"),
+				message: t("sendToWallet.noRecentWalletsMessage")
+			})]
+		}), /* @__PURE__ */ jsx(BookmarkAddressSheet, {
+			ref: bookmarkAddressSheetRef,
+			validatedWallet: bookmarkTarget,
+			onAddBookmark: handleAddBookmark
+		})]
+	});
+};
+//#endregion
+export { RecentWalletsPage };
+
+//# sourceMappingURL=RecentWalletsPage.js.map

package/dist/esm/pages/SendToWallet/RecentWalletsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecentWalletsPage.js","names":["ListItem","ListItemButton"],"sources":["../../../../src/pages/SendToWallet/RecentWalletsPage.tsx"],"sourcesContent":["import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'\nimport ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport DeleteOutline from '@mui/icons-material/DeleteOutlined'\nimport OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'\nimport TurnedInNot from '@mui/icons-material/TurnedInNot'\nimport { List, ListItemAvatar, ListItemText } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { type JSX, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { AccountAvatar } from '../../components/Avatar/AccountAvatar.js'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { ContextMenu } from '../../components/ContextMenu.js'\nimport { EmptyListIndicator } from '../../components/EmptyListIndicator/EmptyListIndicator.js'\nimport { ListItem } from '../../components/ListItem/ListItem.js'\nimport { ListItemButton } from '../../components/ListItem/ListItemButton.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useListHeight } from '../../hooks/useListHeight.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport type { Bookmark } from '../../stores/bookmarks/types.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { defaultChainIdsByType } from '../../utils/chainType.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { BookmarkAddressSheet } from './BookmarkAddressSheet.js'\n\nexport const RecentWalletsPage = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const [bookmarkTarget, setBookmarkTarget] = useState<Bookmark>()\n  const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null)\n  const listParentRef = useRef<HTMLUListElement | null>(null)\n  const { recentWallets } = useBookmarks()\n  const { requiredToChainType } = useToAddressRequirements()\n  const {\n    removeRecentWallet,\n    addBookmark,\n    setSelectedBookmark,\n    addRecentWallet,\n  } = useBookmarkActions()\n  const { setFieldValue } = useFieldActions()\n  const { getAddressLink } = useExplorer()\n\n  useHeader(t('header.recentWallets'))\n\n  const { listHeight } = useListHeight({ listParentRef })\n\n  const handleRecentSelected = (recentWallet: Bookmark) => {\n    addRecentWallet(recentWallet)\n    setFieldValue('toAddress', recentWallet.address, {\n      isTouched: true,\n      isDirty: true,\n    })\n    setSelectedBookmark(recentWallet)\n    navigate({\n      to: navigationRoutes.home,\n      replace: true,\n    })\n  }\n\n  const handleAddBookmark = (bookmark: Bookmark) => {\n    addBookmark(bookmark)\n    navigate({ to: navigationRoutes.bookmarks, replace: true })\n  }\n\n  return (\n    <PageContainer disableGutters>\n      <List\n        className=\"long-list\"\n        ref={listParentRef}\n        style={{ height: listHeight, overflow: 'auto' }}\n        disablePadding\n        sx={{ paddingTop: 1.5 }}\n      >\n        {recentWallets.map((recentWallet) => (\n          <ListItem key={recentWallet.address} sx={{ position: 'relative' }}>\n            <ListItemButton\n              disabled={\n                requiredToChainType &&\n                requiredToChainType !== recentWallet.chainType\n              }\n              onClick={() => handleRecentSelected(recentWallet)}\n            >\n              <ListItemAvatar>\n                <AccountAvatar\n                  chainId={defaultChainIdsByType[recentWallet.chainType]}\n                />\n              </ListItemAvatar>\n              <ListItemText\n                primary={\n                  recentWallet.name || shortenAddress(recentWallet.address)\n                }\n                secondary={\n                  recentWallet.name\n                    ? shortenAddress(recentWallet.address)\n                    : undefined\n                }\n              />\n            </ListItemButton>\n            <ContextMenu\n              disabled={\n                !!(\n                  requiredToChainType &&\n                  requiredToChainType !== recentWallet.chainType\n                )\n              }\n              items={[\n                {\n                  icon: <ContentCopyRounded />,\n                  label: t('button.copyAddress'),\n                  onClick: () =>\n                    navigator.clipboard.writeText(recentWallet.address),\n                },\n                {\n                  icon: <OpenInNewRounded />,\n                  label: t('button.viewOnExplorer'),\n                  onClick: () =>\n                    window.open(\n                      getAddressLink(\n                        recentWallet.address,\n                        defaultChainIdsByType[recentWallet.chainType]\n                      ),\n                      '_blank'\n                    ),\n                },\n                {\n                  icon: <TurnedInNot />,\n                  label: t('button.bookmark'),\n                  onClick: () => {\n                    setBookmarkTarget(recentWallet)\n                    bookmarkAddressSheetRef.current?.open()\n                  },\n                },\n                {\n                  icon: <DeleteOutline />,\n                  label: t('button.delete'),\n                  onClick: () => removeRecentWallet(recentWallet.address),\n                },\n              ]}\n            />\n          </ListItem>\n        ))}\n        {!recentWallets.length && (\n          <EmptyListIndicator\n            icon={<AccountBalanceWalletIcon />}\n            title={t('sendToWallet.noRecentWallets')}\n            message={t('sendToWallet.noRecentWalletsMessage')}\n          />\n        )}\n      </List>\n      <BookmarkAddressSheet\n        ref={bookmarkAddressSheetRef}\n        validatedWallet={bookmarkTarget}\n        onAddBookmark={handleAddBookmark}\n      />\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAa,0BAAuC;CAClD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,CAAC,gBAAgB,qBAAqB,SAAmB;CAC/D,MAAM,0BAA0B,OAAwB,IAAI;CAC5D,MAAM,gBAAgB,OAAgC,IAAI;CAC1D,MAAM,EAAE,kBAAkB,aAAa;CACvC,MAAM,EAAE,wBAAwB,yBAAyB;CACzD,MAAM,EACJ,oBACA,aACA,qBACA,oBACE,mBAAmB;CACvB,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,mBAAmB,YAAY;CAEvC,UAAU,EAAE,sBAAsB,CAAC;CAEnC,MAAM,EAAE,eAAe,cAAc,EAAE,cAAc,CAAC;CAEtD,MAAM,wBAAwB,iBAA2B;EACvD,gBAAgB,YAAY;EAC5B,cAAc,aAAa,aAAa,SAAS;GAC/C,WAAW;GACX,SAAS;EACX,CAAC;EACD,oBAAoB,YAAY;EAChC,SAAS;GACP,IAAI,iBAAiB;GACrB,SAAS;EACX,CAAC;CACH;CAEA,MAAM,qBAAqB,aAAuB;EAChD,YAAY,QAAQ;EACpB,SAAS;GAAE,IAAI,iBAAiB;GAAW,SAAS;EAAK,CAAC;CAC5D;CAEA,OACE,qBAAC,eAAD;EAAe,gBAAA;YAAf,CACE,qBAAC,MAAD;GACE,WAAU;GACV,KAAK;GACL,OAAO;IAAE,QAAQ;IAAY,UAAU;GAAO;GAC9C,gBAAA;GACA,IAAI,EAAE,YAAY,IAAI;aALxB,CAOG,cAAc,KAAK,iBAClB,qBAACA,YAAD;IAAqC,IAAI,EAAE,UAAU,WAAW;cAAhE,CACE,qBAACC,kBAAD;KACE,UACE,uBACA,wBAAwB,aAAa;KAEvC,eAAe,qBAAqB,YAAY;eALlD,CAOE,oBAAC,gBAAD,EAAA,UACE,oBAAC,eAAD,EACE,SAAS,sBAAsB,aAAa,WAC7C,CAAA,EACa,CAAA,GAChB,oBAAC,cAAD;MACE,SACE,aAAa,QAAQ,eAAe,aAAa,OAAO;MAE1D,WACE,aAAa,OACT,eAAe,aAAa,OAAO,IACnC,KAAA;KAEP,CAAA,CACa;QAChB,oBAAC,aAAD;KACE,UACE,CAAC,EACC,uBACA,wBAAwB,aAAa;KAGzC,OAAO;MACL;OACE,MAAM,oBAAC,oBAAD,CAAqB,CAAA;OAC3B,OAAO,EAAE,oBAAoB;OAC7B,eACE,UAAU,UAAU,UAAU,aAAa,OAAO;MACtD;MACA;OACE,MAAM,oBAAC,kBAAD,CAAmB,CAAA;OACzB,OAAO,EAAE,uBAAuB;OAChC,eACE,OAAO,KACL,eACE,aAAa,SACb,sBAAsB,aAAa,UACrC,GACA,QACF;MACJ;MACA;OACE,MAAM,oBAAC,aAAD,CAAc,CAAA;OACpB,OAAO,EAAE,iBAAiB;OAC1B,eAAe;QACb,kBAAkB,YAAY;QAC9B,wBAAwB,SAAS,KAAK;OACxC;MACF;MACA;OACE,MAAM,oBAAC,eAAD,CAAgB,CAAA;OACtB,OAAO,EAAE,eAAe;OACxB,eAAe,mBAAmB,aAAa,OAAO;MACxD;KACF;IACD,CAAA,CACO;MAjEK,aAAa,OAiElB,CACX,GACA,CAAC,cAAc,UACd,oBAAC,oBAAD;IACE,MAAM,oBAAC,0BAAD,CAA2B,CAAA;IACjC,OAAO,EAAE,8BAA8B;IACvC,SAAS,EAAE,qCAAqC;GACjD,CAAA,CAEC;MACN,oBAAC,sBAAD;GACE,KAAK;GACL,iBAAiB;GACjB,eAAe;EAChB,CAAA,CACY;;AAEnB"}

package/dist/esm/pages/SendToWallet/SendToConfiguredWalletPage.js

@@ -0,0 +1,84 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useBookmarkActions } from "../../stores/bookmarks/useBookmarkActions.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { PageContainer } from "../../components/PageContainer.js";
+import { defaultChainIdsByType } from "../../utils/chainType.js";
+import { useToAddressRequirements } from "../../hooks/useToAddressRequirements.js";
+import { useNavigateBack } from "../../hooks/useNavigateBack.js";
+import { shortenAddress } from "../../utils/wallet.js";
+import { useExplorer } from "../../hooks/useExplorer.js";
+import { useHeader } from "../../hooks/useHeader.js";
+import { useListHeight } from "../../hooks/useListHeight.js";
+import { ContextMenu } from "../../components/ContextMenu.js";
+import { AccountAvatar } from "../../components/Avatar/AccountAvatar.js";
+import { ListItem as ListItem$1 } from "../../components/ListItem/ListItem.js";
+import { ListItemButton as ListItemButton$1 } from "../../components/ListItem/ListItemButton.js";
+import { useRef } from "react";
+import { List, ListItemAvatar, ListItemText } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ContentCopyRounded from "@mui/icons-material/ContentCopyRounded";
+import OpenInNewRounded from "@mui/icons-material/OpenInNewRounded";
+//#region src/pages/SendToWallet/SendToConfiguredWalletPage.tsx
+const SendToConfiguredWalletPage = () => {
+	const { t } = useTranslation();
+	const navigateBack = useNavigateBack();
+	const { toAddresses } = useWidgetConfig();
+	const { requiredToChainType } = useToAddressRequirements();
+	const { setSelectedBookmark } = useBookmarkActions();
+	const { setFieldValue } = useFieldActions();
+	const { getAddressLink } = useExplorer();
+	const listParentRef = useRef(null);
+	useHeader(t("header.sendToWallet"));
+	const { listHeight } = useListHeight({ listParentRef });
+	const handleCuratedSelected = (toAddress) => {
+		setSelectedBookmark(toAddress);
+		setFieldValue("toAddress", toAddress.address, {
+			isTouched: true,
+			isDirty: true
+		});
+		navigateBack();
+	};
+	return /* @__PURE__ */ jsx(PageContainer, {
+		disableGutters: true,
+		children: /* @__PURE__ */ jsx(List, {
+			className: "long-list",
+			ref: listParentRef,
+			style: {
+				height: listHeight,
+				overflow: "auto"
+			},
+			disablePadding: true,
+			sx: { paddingTop: 1.5 },
+			children: toAddresses?.map((toAddress) => /* @__PURE__ */ jsxs(ListItem$1, {
+				sx: { position: "relative" },
+				children: [/* @__PURE__ */ jsxs(ListItemButton$1, {
+					disabled: requiredToChainType && requiredToChainType !== toAddress.chainType,
+					onClick: () => handleCuratedSelected(toAddress),
+					children: [/* @__PURE__ */ jsx(ListItemAvatar, { children: /* @__PURE__ */ jsx(AccountAvatar, {
+						chainId: defaultChainIdsByType[toAddress.chainType],
+						toAddress
+					}) }), /* @__PURE__ */ jsx(ListItemText, {
+						primary: toAddress.name || shortenAddress(toAddress.address),
+						secondary: toAddress.name ? shortenAddress(toAddress.address) : void 0
+					})]
+				}), /* @__PURE__ */ jsx(ContextMenu, {
+					disabled: !!(requiredToChainType && requiredToChainType !== toAddress.chainType),
+					items: [{
+						icon: /* @__PURE__ */ jsx(ContentCopyRounded, {}),
+						label: t("button.copyAddress"),
+						onClick: () => navigator.clipboard.writeText(toAddress.address)
+					}, {
+						icon: /* @__PURE__ */ jsx(OpenInNewRounded, {}),
+						label: t("button.viewOnExplorer"),
+						onClick: () => window.open(getAddressLink(toAddress.address, defaultChainIdsByType[toAddress.chainType]), "_blank")
+					}]
+				})]
+			}, toAddress.address))
+		})
+	});
+};
+//#endregion
+export { SendToConfiguredWalletPage };
+
+//# sourceMappingURL=SendToConfiguredWalletPage.js.map

package/dist/esm/pages/SendToWallet/SendToConfiguredWalletPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendToConfiguredWalletPage.js","names":["ListItem","ListItemButton"],"sources":["../../../../src/pages/SendToWallet/SendToConfiguredWalletPage.tsx"],"sourcesContent":["import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'\nimport { List, ListItemAvatar, ListItemText } from '@mui/material'\nimport { type JSX, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { AccountAvatar } from '../../components/Avatar/AccountAvatar.js'\nimport { ContextMenu } from '../../components/ContextMenu.js'\nimport { ListItem } from '../../components/ListItem/ListItem.js'\nimport { ListItemButton } from '../../components/ListItem/ListItemButton.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useListHeight } from '../../hooks/useListHeight.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport type { ToAddress } from '../../types/widget.js'\nimport { defaultChainIdsByType } from '../../utils/chainType.js'\nimport { shortenAddress } from '../../utils/wallet.js'\n\nexport const SendToConfiguredWalletPage = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigateBack = useNavigateBack()\n  const { toAddresses } = useWidgetConfig()\n  const { requiredToChainType } = useToAddressRequirements()\n  const { setSelectedBookmark } = useBookmarkActions()\n  const { setFieldValue } = useFieldActions()\n  const { getAddressLink } = useExplorer()\n  const listParentRef = useRef<HTMLUListElement | null>(null)\n\n  useHeader(t('header.sendToWallet'))\n\n  const { listHeight } = useListHeight({ listParentRef })\n\n  const handleCuratedSelected = (toAddress: ToAddress) => {\n    setSelectedBookmark(toAddress)\n    setFieldValue('toAddress', toAddress.address, {\n      isTouched: true,\n      isDirty: true,\n    })\n    navigateBack()\n  }\n\n  return (\n    <PageContainer disableGutters>\n      <List\n        className=\"long-list\"\n        ref={listParentRef}\n        style={{ height: listHeight, overflow: 'auto' }}\n        disablePadding\n        sx={{ paddingTop: 1.5 }}\n      >\n        {toAddresses?.map((toAddress) => (\n          <ListItem key={toAddress.address} sx={{ position: 'relative' }}>\n            <ListItemButton\n              disabled={\n                requiredToChainType &&\n                requiredToChainType !== toAddress.chainType\n              }\n              onClick={() => handleCuratedSelected(toAddress)}\n            >\n              <ListItemAvatar>\n                <AccountAvatar\n                  chainId={defaultChainIdsByType[toAddress.chainType]}\n                  toAddress={toAddress}\n                />\n              </ListItemAvatar>\n              <ListItemText\n                primary={toAddress.name || shortenAddress(toAddress.address)}\n                secondary={\n                  toAddress.name ? shortenAddress(toAddress.address) : undefined\n                }\n              />\n            </ListItemButton>\n            <ContextMenu\n              disabled={\n                !!(\n                  requiredToChainType &&\n                  requiredToChainType !== toAddress.chainType\n                )\n              }\n              items={[\n                {\n                  icon: <ContentCopyRounded />,\n                  label: t('button.copyAddress'),\n                  onClick: () =>\n                    navigator.clipboard.writeText(toAddress.address),\n                },\n                {\n                  icon: <OpenInNewRounded />,\n                  label: t('button.viewOnExplorer'),\n                  onClick: () =>\n                    window.open(\n                      getAddressLink(\n                        toAddress.address,\n                        defaultChainIdsByType[toAddress.chainType]\n                      ),\n                      '_blank'\n                    ),\n                },\n              ]}\n            />\n          </ListItem>\n        ))}\n      </List>\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAa,mCAAgD;CAC3D,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,eAAe,gBAAgB;CACrC,MAAM,EAAE,gBAAgB,gBAAgB;CACxC,MAAM,EAAE,wBAAwB,yBAAyB;CACzD,MAAM,EAAE,wBAAwB,mBAAmB;CACnD,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,mBAAmB,YAAY;CACvC,MAAM,gBAAgB,OAAgC,IAAI;CAE1D,UAAU,EAAE,qBAAqB,CAAC;CAElC,MAAM,EAAE,eAAe,cAAc,EAAE,cAAc,CAAC;CAEtD,MAAM,yBAAyB,cAAyB;EACtD,oBAAoB,SAAS;EAC7B,cAAc,aAAa,UAAU,SAAS;GAC5C,WAAW;GACX,SAAS;EACX,CAAC;EACD,aAAa;CACf;CAEA,OACE,oBAAC,eAAD;EAAe,gBAAA;YACb,oBAAC,MAAD;GACE,WAAU;GACV,KAAK;GACL,OAAO;IAAE,QAAQ;IAAY,UAAU;GAAO;GAC9C,gBAAA;GACA,IAAI,EAAE,YAAY,IAAI;aAErB,aAAa,KAAK,cACjB,qBAACA,YAAD;IAAkC,IAAI,EAAE,UAAU,WAAW;cAA7D,CACE,qBAACC,kBAAD;KACE,UACE,uBACA,wBAAwB,UAAU;KAEpC,eAAe,sBAAsB,SAAS;eALhD,CAOE,oBAAC,gBAAD,EAAA,UACE,oBAAC,eAAD;MACE,SAAS,sBAAsB,UAAU;MAC9B;KACZ,CAAA,EACa,CAAA,GAChB,oBAAC,cAAD;MACE,SAAS,UAAU,QAAQ,eAAe,UAAU,OAAO;MAC3D,WACE,UAAU,OAAO,eAAe,UAAU,OAAO,IAAI,KAAA;KAExD,CAAA,CACa;QAChB,oBAAC,aAAD;KACE,UACE,CAAC,EACC,uBACA,wBAAwB,UAAU;KAGtC,OAAO,CACL;MACE,MAAM,oBAAC,oBAAD,CAAqB,CAAA;MAC3B,OAAO,EAAE,oBAAoB;MAC7B,eACE,UAAU,UAAU,UAAU,UAAU,OAAO;KACnD,GACA;MACE,MAAM,oBAAC,kBAAD,CAAmB,CAAA;MACzB,OAAO,EAAE,uBAAuB;MAChC,eACE,OAAO,KACL,eACE,UAAU,SACV,sBAAsB,UAAU,UAClC,GACA,QACF;KACJ,CACF;IACD,CAAA,CACO;MAjDK,UAAU,OAiDf,CACX;EACG,CAAA;CACO,CAAA;AAEnB"}

package/dist/esm/pages/SendToWallet/SendToWalletPage.js

@@ -0,0 +1,237 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { useBookmarkActions } from "../../stores/bookmarks/useBookmarkActions.js";
+import { useBookmarks } from "../../stores/bookmarks/useBookmarks.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useChain } from "../../hooks/useChain.js";
+import { useToAddressRequirements } from "../../hooks/useToAddressRequirements.js";
+import { useAddressValidation } from "../../hooks/useAddressValidation.js";
+import { useHeader } from "../../hooks/useHeader.js";
+import { ButtonTertiary } from "../../components/ButtonTertiary.js";
+import { AccountDeployedMessage } from "../../components/Messages/AccountDeployedMessage.js";
+import { AddressInput, FullHeightAdjustablePageContainer, SendToWalletButtonRow, SendToWalletCard, SendToWalletIconButton, ValidationAlert } from "./SendToWalletPage.style.js";
+import { BookmarkAddressSheet } from "./BookmarkAddressSheet.js";
+import { CardButton } from "../../components/Card/CardButton.js";
+import { ConfirmAddressSheet } from "./ConfirmAddressSheet.js";
+import { useRef, useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { Box, Tooltip, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useAccount } from "@lifi/wallet-management";
+import Wallet from "@mui/icons-material/Wallet";
+import TurnedIn from "@mui/icons-material/TurnedIn";
+import ErrorIcon from "@mui/icons-material/Error";
+import AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet";
+//#region src/pages/SendToWallet/SendToWalletPage.tsx
+const SendToWalletPage = () => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const bookmarkAddressSheetRef = useRef(null);
+	const confirmAddressSheetRef = useRef(null);
+	const { bookmarks, recentWallets } = useBookmarks();
+	const { addBookmark, getBookmark, setSelectedBookmark, getSelectedBookmark, addRecentWallet } = useBookmarkActions();
+	const { setFieldValue } = useFieldActions();
+	const [inputAddressValue, setInputAddressValue] = useState(() => getSelectedBookmark()?.address ?? "");
+	const [validatedWallet, setValidatedWallet] = useState();
+	const [errorMessage, setErrorMessage] = useState("");
+	const { validateAddress, isValidating } = useAddressValidation();
+	const { requiredToChainType } = useToAddressRequirements();
+	const [toChainId] = useFieldValues("toChain");
+	const { chain: toChain } = useChain(toChainId);
+	const [isDoneButtonLoading, setIsDoneButtonLoading] = useState(false);
+	const [isBookmarkButtonLoading, setIsBookmarkButtonLoading] = useState(false);
+	const { variant, hiddenUI, requiredUI } = useWidgetConfig();
+	const { accounts } = useAccount();
+	const connectedWallets = accounts.filter((account) => account.isConnected);
+	useHeader(t("header.sendToWallet"));
+	const handleInputChange = (e) => {
+		if (errorMessage) setErrorMessage("");
+		if (getSelectedBookmark()) {
+			setFieldValue("toAddress", "", { isTouched: true });
+			setSelectedBookmark();
+		}
+		setInputAddressValue(e.target.value.trim());
+	};
+	const handleDone = async () => {
+		if (isValidating) return;
+		if (!inputAddressValue) {
+			setErrorMessage(t("error.title.walletAddressRequired"));
+			return;
+		}
+		setIsDoneButtonLoading(true);
+		const validationResult = await validateAddress({
+			value: inputAddressValue,
+			chainType: requiredToChainType,
+			chain: toChain
+		});
+		setIsDoneButtonLoading(false);
+		if (!validationResult.isValid) {
+			setErrorMessage(validationResult.error);
+			return;
+		}
+		if (requiredToChainType && requiredToChainType !== validationResult.chainType) {
+			setErrorMessage(t("error.title.walletChainTypeInvalid", { chainName: toChain?.name }));
+			return;
+		}
+		setValidatedWallet({
+			name: validationResult.addressType === 1 ? inputAddressValue : void 0,
+			address: validationResult.address,
+			chainType: validationResult.chainType
+		});
+		confirmAddressSheetRef.current?.open();
+	};
+	const handleBookmarkAddress = async () => {
+		if (isValidating) return;
+		if (!inputAddressValue) {
+			setErrorMessage(t("error.title.walletAddressRequired"));
+			return;
+		}
+		const existingBookmarkWallet = getBookmark(inputAddressValue);
+		if (existingBookmarkWallet) {
+			setErrorMessage(t("error.title.bookmarkAlreadyExists", { name: existingBookmarkWallet.name }));
+			return;
+		}
+		setIsBookmarkButtonLoading(true);
+		const validationResult = await validateAddress({ value: inputAddressValue });
+		setIsBookmarkButtonLoading(false);
+		if (validationResult.isValid) {
+			setValidatedWallet({
+				name: validationResult.addressType === 1 ? inputAddressValue : void 0,
+				address: validationResult.address,
+				chainType: validationResult.chainType
+			});
+			bookmarkAddressSheetRef.current?.open();
+		} else setErrorMessage(validationResult.error);
+	};
+	const handleRecentWalletsClick = () => {
+		navigate({ to: navigationRoutes.recentWallets });
+	};
+	const handleConnectedWalletsClick = () => {
+		navigate({ to: navigationRoutes.connectedWallets });
+	};
+	const handleBookmarkedWalletsClick = () => {
+		navigate({ to: navigationRoutes.bookmarks });
+	};
+	const handleAddBookmark = (bookmark) => {
+		addBookmark(bookmark);
+		navigate({ to: navigationRoutes.bookmarks });
+	};
+	const handleOnConfirm = (confirmedWallet) => {
+		setSelectedBookmark(confirmedWallet);
+		addRecentWallet(confirmedWallet);
+	};
+	const placeholder = t("sendToWallet.enterAddress", { context: "long" });
+	return /* @__PURE__ */ jsxs(FullHeightAdjustablePageContainer, {
+		topGutters: true,
+		bottomGutters: true,
+		enableFullHeight: variant !== "drawer",
+		children: [/* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 2,
+				marginBottom: 6
+			},
+			children: [/* @__PURE__ */ jsxs(SendToWalletCard, {
+				type: errorMessage ? "error" : "default",
+				children: [
+					/* @__PURE__ */ jsx(AddressInput, {
+						size: "small",
+						autoComplete: "off",
+						autoCorrect: "off",
+						autoCapitalize: "off",
+						spellCheck: "false",
+						onChange: handleInputChange,
+						value: inputAddressValue,
+						placeholder,
+						"aria-label": placeholder,
+						maxRows: 2,
+						inputProps: { maxLength: 128 },
+						multiline: true
+					}),
+					errorMessage ? /* @__PURE__ */ jsx(ValidationAlert, {
+						icon: /* @__PURE__ */ jsx(ErrorIcon, {}),
+						sx: {
+							pb: 2,
+							paddingX: 2
+						},
+						children: errorMessage
+					}) : null,
+					/* @__PURE__ */ jsxs(SendToWalletButtonRow, {
+						sx: {
+							paddingX: 2,
+							paddingBottom: 2
+						},
+						children: [/* @__PURE__ */ jsx(ButtonTertiary, {
+							variant: "text",
+							onClick: handleDone,
+							loading: isDoneButtonLoading,
+							loadingPosition: "center",
+							sx: { flexGrow: 1 },
+							children: t("button.done")
+						}), /* @__PURE__ */ jsx(Tooltip, {
+							title: t("button.bookmark"),
+							children: /* @__PURE__ */ jsx(SendToWalletIconButton, {
+								onClick: handleBookmarkAddress,
+								loading: isBookmarkButtonLoading,
+								loadingPosition: "center",
+								children: /* @__PURE__ */ jsx(TurnedIn, { fontSize: "small" })
+							})
+						})]
+					}),
+					/* @__PURE__ */ jsx(ConfirmAddressSheet, {
+						ref: confirmAddressSheetRef,
+						validatedBookmark: validatedWallet,
+						onConfirm: handleOnConfirm
+					}),
+					/* @__PURE__ */ jsx(BookmarkAddressSheet, {
+						ref: bookmarkAddressSheetRef,
+						validatedWallet,
+						onAddBookmark: handleAddBookmark
+					})
+				]
+			}), requiredUI?.accountDeployedMessage && /* @__PURE__ */ jsx(AccountDeployedMessage, {})]
+		}), /* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 1
+			},
+			children: [
+				/* @__PURE__ */ jsx(CardButton, {
+					title: t("header.recentWallets"),
+					icon: /* @__PURE__ */ jsx(AccountBalanceWalletIcon, {}),
+					onClick: handleRecentWalletsClick,
+					children: !!recentWallets.length && /* @__PURE__ */ jsx(Typography, {
+						sx: { color: "text.secondary" },
+						children: recentWallets.length
+					})
+				}),
+				!hiddenUI?.addressBookConnectedWallets && /* @__PURE__ */ jsx(CardButton, {
+					title: t("sendToWallet.connectedWallets"),
+					icon: /* @__PURE__ */ jsx(Wallet, {}),
+					onClick: handleConnectedWalletsClick,
+					children: !!connectedWallets.length && /* @__PURE__ */ jsx(Typography, {
+						sx: { color: "text.secondary" },
+						children: connectedWallets.length
+					})
+				}),
+				/* @__PURE__ */ jsx(CardButton, {
+					title: t("header.bookmarkedWallets"),
+					icon: /* @__PURE__ */ jsx(TurnedIn, {}),
+					onClick: handleBookmarkedWalletsClick,
+					children: !!bookmarks.length && /* @__PURE__ */ jsx(Typography, {
+						sx: { color: "text.secondary" },
+						children: bookmarks.length
+					})
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { SendToWalletPage };
+
+//# sourceMappingURL=SendToWalletPage.js.map

package/dist/esm/pages/SendToWallet/SendToWalletPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendToWalletPage.js","names":[],"sources":["../../../../src/pages/SendToWallet/SendToWalletPage.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'\nimport ErrorIcon from '@mui/icons-material/Error'\nimport TurnedIn from '@mui/icons-material/TurnedIn'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Box, Tooltip, Typography } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { ChangeEvent } from 'react'\nimport { useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { ButtonTertiary } from '../../components/ButtonTertiary.js'\nimport { CardButton } from '../../components/Card/CardButton.js'\nimport { AccountDeployedMessage } from '../../components/Messages/AccountDeployedMessage.js'\nimport {\n  AddressType,\n  useAddressValidation,\n} from '../../hooks/useAddressValidation.js'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { Bookmark } from '../../stores/bookmarks/types.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { BookmarkAddressSheet } from './BookmarkAddressSheet.js'\nimport { ConfirmAddressSheet } from './ConfirmAddressSheet.js'\nimport {\n  AddressInput,\n  FullHeightAdjustablePageContainer,\n  SendToWalletButtonRow,\n  SendToWalletCard,\n  SendToWalletIconButton,\n  ValidationAlert,\n} from './SendToWalletPage.style.js'\n\nexport const SendToWalletPage: React.FC = () => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null)\n  const confirmAddressSheetRef = useRef<BottomSheetBase>(null)\n  const { bookmarks, recentWallets } = useBookmarks()\n  const {\n    addBookmark,\n    getBookmark,\n    setSelectedBookmark,\n    getSelectedBookmark,\n    addRecentWallet,\n  } = useBookmarkActions()\n  const { setFieldValue } = useFieldActions()\n  const [inputAddressValue, setInputAddressValue] = useState(\n    () => getSelectedBookmark()?.address ?? ''\n  )\n  const [validatedWallet, setValidatedWallet] = useState<Bookmark>()\n  const [errorMessage, setErrorMessage] = useState('')\n  const { validateAddress, isValidating } = useAddressValidation()\n  const { requiredToChainType } = useToAddressRequirements()\n  const [toChainId] = useFieldValues('toChain')\n  const { chain: toChain } = useChain(toChainId)\n  const [isDoneButtonLoading, setIsDoneButtonLoading] = useState(false)\n  const [isBookmarkButtonLoading, setIsBookmarkButtonLoading] = useState(false)\n  const { variant, hiddenUI, requiredUI } = useWidgetConfig()\n\n  const { accounts } = useAccount()\n  const connectedWallets = accounts.filter((account) => account.isConnected)\n\n  useHeader(t('header.sendToWallet'))\n\n  const handleInputChange = (e: ChangeEvent) => {\n    if (errorMessage) {\n      setErrorMessage('')\n    }\n    if (getSelectedBookmark()) {\n      setFieldValue('toAddress', '', { isTouched: true })\n      setSelectedBookmark()\n    }\n    setInputAddressValue((e.target as HTMLInputElement).value.trim())\n  }\n\n  const handleDone = async () => {\n    if (isValidating) {\n      return\n    }\n    if (!inputAddressValue) {\n      setErrorMessage(t('error.title.walletAddressRequired'))\n      return\n    }\n    setIsDoneButtonLoading(true)\n    const validationResult = await validateAddress({\n      value: inputAddressValue,\n      chainType: requiredToChainType,\n      chain: toChain,\n    })\n    setIsDoneButtonLoading(false)\n    if (!validationResult.isValid) {\n      setErrorMessage(validationResult.error)\n      return\n    }\n\n    if (\n      requiredToChainType &&\n      requiredToChainType !== validationResult.chainType\n    ) {\n      setErrorMessage(\n        t('error.title.walletChainTypeInvalid', {\n          chainName: toChain?.name,\n        })\n      )\n      return\n    }\n\n    setValidatedWallet({\n      name:\n        validationResult.addressType === AddressType.NameService\n          ? inputAddressValue\n          : undefined,\n      address: validationResult.address,\n      chainType: validationResult.chainType,\n    })\n    confirmAddressSheetRef.current?.open()\n  }\n\n  const handleBookmarkAddress = async () => {\n    if (isValidating) {\n      return\n    }\n    if (!inputAddressValue) {\n      setErrorMessage(t('error.title.walletAddressRequired'))\n      return\n    }\n\n    const existingBookmarkWallet = getBookmark(inputAddressValue)\n    if (existingBookmarkWallet) {\n      setErrorMessage(\n        t('error.title.bookmarkAlreadyExists', {\n          name: existingBookmarkWallet.name,\n        })\n      )\n      return\n    }\n    setIsBookmarkButtonLoading(true)\n    const validationResult = await validateAddress({\n      value: inputAddressValue,\n    })\n    setIsBookmarkButtonLoading(false)\n\n    if (validationResult.isValid) {\n      setValidatedWallet({\n        name:\n          validationResult.addressType === AddressType.NameService\n            ? inputAddressValue\n            : undefined,\n        address: validationResult.address,\n        chainType: validationResult.chainType,\n      })\n      bookmarkAddressSheetRef.current?.open()\n    } else {\n      setErrorMessage(validationResult.error)\n    }\n  }\n\n  const handleRecentWalletsClick = () => {\n    navigate({ to: navigationRoutes.recentWallets })\n  }\n\n  const handleConnectedWalletsClick = () => {\n    navigate({ to: navigationRoutes.connectedWallets })\n  }\n  const handleBookmarkedWalletsClick = () => {\n    navigate({ to: navigationRoutes.bookmarks })\n  }\n\n  const handleAddBookmark = (bookmark: Bookmark) => {\n    addBookmark(bookmark)\n    navigate({ to: navigationRoutes.bookmarks })\n  }\n\n  const handleOnConfirm = (confirmedWallet: Bookmark) => {\n    setSelectedBookmark(confirmedWallet)\n    addRecentWallet(confirmedWallet)\n  }\n\n  const placeholder = t('sendToWallet.enterAddress', {\n    context: 'long',\n  })\n\n  return (\n    <FullHeightAdjustablePageContainer\n      topGutters\n      bottomGutters\n      enableFullHeight={variant !== 'drawer'}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: 2,\n          marginBottom: 6,\n        }}\n      >\n        <SendToWalletCard type={errorMessage ? 'error' : 'default'}>\n          <AddressInput\n            size=\"small\"\n            autoComplete=\"off\"\n            autoCorrect=\"off\"\n            autoCapitalize=\"off\"\n            spellCheck=\"false\"\n            onChange={handleInputChange}\n            value={inputAddressValue}\n            placeholder={placeholder}\n            aria-label={placeholder}\n            maxRows={2}\n            inputProps={{ maxLength: 128 }}\n            multiline\n          />\n          {errorMessage ? (\n            <ValidationAlert icon={<ErrorIcon />} sx={{ pb: 2, paddingX: 2 }}>\n              {errorMessage}\n            </ValidationAlert>\n          ) : null}\n          <SendToWalletButtonRow sx={{ paddingX: 2, paddingBottom: 2 }}>\n            <ButtonTertiary\n              variant=\"text\"\n              onClick={handleDone}\n              loading={isDoneButtonLoading}\n              loadingPosition=\"center\"\n              sx={{ flexGrow: 1 }}\n            >\n              {t('button.done')}\n            </ButtonTertiary>\n            <Tooltip title={t('button.bookmark')}>\n              <SendToWalletIconButton\n                onClick={handleBookmarkAddress}\n                loading={isBookmarkButtonLoading}\n                loadingPosition=\"center\"\n              >\n                <TurnedIn fontSize=\"small\" />\n              </SendToWalletIconButton>\n            </Tooltip>\n          </SendToWalletButtonRow>\n          <ConfirmAddressSheet\n            ref={confirmAddressSheetRef}\n            validatedBookmark={validatedWallet}\n            onConfirm={handleOnConfirm}\n          />\n          <BookmarkAddressSheet\n            ref={bookmarkAddressSheetRef}\n            validatedWallet={validatedWallet}\n            onAddBookmark={handleAddBookmark}\n          />\n        </SendToWalletCard>\n        {requiredUI?.accountDeployedMessage && <AccountDeployedMessage />}\n      </Box>\n      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>\n        <CardButton\n          title={t('header.recentWallets')}\n          icon={<AccountBalanceWalletIcon />}\n          onClick={handleRecentWalletsClick}\n        >\n          {!!recentWallets.length && (\n            <Typography\n              sx={{\n                color: 'text.secondary',\n              }}\n            >\n              {recentWallets.length}\n            </Typography>\n          )}\n        </CardButton>\n        {!hiddenUI?.addressBookConnectedWallets && (\n          <CardButton\n            title={t('sendToWallet.connectedWallets')}\n            icon={<Wallet />}\n            onClick={handleConnectedWalletsClick}\n          >\n            {!!connectedWallets.length && (\n              <Typography\n                sx={{\n                  color: 'text.secondary',\n                }}\n              >\n                {connectedWallets.length}\n              </Typography>\n            )}\n          </CardButton>\n        )}\n        <CardButton\n          title={t('header.bookmarkedWallets')}\n          icon={<TurnedIn />}\n          onClick={handleBookmarkedWalletsClick}\n        >\n          {!!bookmarks.length && (\n            <Typography\n              sx={{\n                color: 'text.secondary',\n              }}\n            >\n              {bookmarks.length}\n            </Typography>\n          )}\n        </CardButton>\n      </Box>\n    </FullHeightAdjustablePageContainer>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/pages/SendToWallet/SendToWalletPage.style.js

@@ -0,0 +1,90 @@
+import { PageContainer } from "../../components/PageContainer.js";
+import { InputCard } from "../../components/Card/InputCard.js";
+import { Input } from "../../components/Input.js";
+import { ButtonTertiary } from "../../components/ButtonTertiary.js";
+import { Alert, Box, Typography, alertClasses, inputBaseClasses, styled } from "@mui/material";
+//#region src/pages/SendToWallet/SendToWalletPage.style.tsx
+const AddressInput = styled(Input)(({ theme }) => ({
+	padding: 0,
+	[`.${inputBaseClasses.input}`]: {
+		padding: theme.spacing(2),
+		minHeight: 48
+	}
+}));
+const BookmarkInputFields = styled(Box)(({ theme }) => ({
+	display: "flex",
+	flexDirection: "column",
+	gap: theme.spacing(2),
+	width: "100%"
+}));
+const FullHeightAdjustablePageContainer = styled(PageContainer, { shouldForwardProp: (prop) => prop !== "enableFullHeight" })(({ theme, enableFullHeight }) => ({
+	display: "flex",
+	flexDirection: "column",
+	gap: theme.spacing(1),
+	justifyContent: "space-between",
+	...enableFullHeight && theme.container?.height === "100%" ? { height: "100%" } : {}
+}));
+const SendToWalletCard = styled(InputCard)({
+	display: "flex",
+	flexDirection: "column"
+});
+const SendToWalletSheetContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	padding: theme.spacing(4, 3, 3),
+	gap: theme.spacing(2)
+}));
+const SendToWalletButtonRow = styled(Box)(({ theme }) => ({
+	display: "flex",
+	width: "100%",
+	gap: theme.spacing(1)
+}));
+const SendToWalletIconButton = styled(ButtonTertiary)(({ theme }) => ({
+	padding: theme.spacing(1.25),
+	minWidth: 40
+}));
+const IconContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	justifyContent: "center",
+	alignItems: "center",
+	width: 80,
+	height: 80,
+	borderRadius: "50%",
+	color: theme.vars.palette.grey[800],
+	background: theme.vars.palette.grey[300],
+	...theme.applyStyles("dark", {
+		color: theme.vars.palette.grey[300],
+		background: theme.vars.palette.grey[800]
+	})
+}));
+const SheetTitle = styled(Typography)(() => ({
+	fontSize: 18,
+	fontWeight: 700
+}));
+const SheetAddressContainer = styled(Box)(() => ({
+	width: "100%",
+	wordWrap: "break-word"
+}));
+const BookmarkButtonContainer = styled(Box)(({ theme }) => ({
+	background: theme.vars.palette.background.default,
+	display: "flex",
+	flexDirection: "column",
+	flexShrink: 0,
+	padding: theme.spacing(2, 3, 3),
+	width: "100%"
+}));
+const ValidationAlert = styled(Alert)(({ theme }) => ({
+	backgroundColor: "transparent",
+	padding: 0,
+	color: theme.vars.palette.text.primary,
+	[`.${alertClasses.icon}`]: {
+		padding: 0,
+		color: theme.vars.palette.error.main
+	},
+	[`.${alertClasses.message}`]: { padding: theme.spacing(.25, 0, 0, 0) }
+}));
+//#endregion
+export { AddressInput, BookmarkButtonContainer, BookmarkInputFields, FullHeightAdjustablePageContainer, IconContainer, SendToWalletButtonRow, SendToWalletCard, SendToWalletIconButton, SendToWalletSheetContainer, SheetAddressContainer, SheetTitle, ValidationAlert };
+
+//# sourceMappingURL=SendToWalletPage.style.js.map

package/dist/esm/pages/SendToWallet/SendToWalletPage.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendToWalletPage.style.js","names":[],"sources":["../../../../src/pages/SendToWallet/SendToWalletPage.style.tsx"],"sourcesContent":["import {\n  Alert,\n  alertClasses,\n  Box,\n  inputBaseClasses,\n  styled,\n  Typography,\n} from '@mui/material'\nimport type React from 'react'\nimport { ButtonTertiary } from '../../components/ButtonTertiary.js'\nimport { InputCard } from '../../components/Card/InputCard.js'\nimport { Input } from '../../components/Input.js'\nimport type { PageContainerProps } from '../../components/PageContainer.js'\nimport { PageContainer } from '../../components/PageContainer.js'\n\nexport const AddressInput: React.FC<\n  React.ComponentProps<typeof Input> & PageContainerProps\n> = styled(Input)(({ theme }) => ({\n  padding: 0,\n  [`.${inputBaseClasses.input}`]: {\n    padding: theme.spacing(2),\n    minHeight: 48,\n  },\n}))\n\nexport const BookmarkInputFields: React.FC<\n  React.ComponentProps<typeof Box> & PageContainerProps\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  width: '100%',\n}))\n\ninterface FullHeightAdjustablePageContainerProps extends PageContainerProps {\n  enableFullHeight?: boolean\n}\n\nexport const FullHeightAdjustablePageContainer: React.FC<\n  React.ComponentProps<typeof PageContainer> &\n    FullHeightAdjustablePageContainerProps\n> = styled(PageContainer, {\n  shouldForwardProp: (prop) => prop !== 'enableFullHeight',\n})<FullHeightAdjustablePageContainerProps>(({ theme, enableFullHeight }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n  justifyContent: 'space-between',\n  ...(enableFullHeight && theme.container?.height === '100%'\n    ? {\n        height: '100%',\n      }\n    : {}),\n}))\n\nexport const SendToWalletCard: React.FC<\n  React.ComponentProps<typeof InputCard>\n> = styled(InputCard)({\n  display: 'flex',\n  flexDirection: 'column',\n})\n\nexport const SendToWalletSheetContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  padding: theme.spacing(4, 3, 3),\n  gap: theme.spacing(2),\n}))\n\nexport const SendToWalletButtonRow: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    width: '100%',\n    gap: theme.spacing(1),\n  }))\n\nexport const SendToWalletIconButton: React.FC<\n  React.ComponentProps<typeof ButtonTertiary>\n> = styled(ButtonTertiary)(({ theme }) => ({\n  padding: theme.spacing(1.25),\n  minWidth: 40,\n}))\n\nexport const IconContainer: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  width: 80,\n  height: 80,\n  borderRadius: '50%',\n  color: theme.vars.palette.grey[800],\n  background: theme.vars.palette.grey[300],\n  ...theme.applyStyles('dark', {\n    color: theme.vars.palette.grey[300],\n    background: theme.vars.palette.grey[800],\n  }),\n}))\n\nexport const SheetTitle: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(() => ({\n    fontSize: 18,\n    fontWeight: 700,\n  }))\n\nexport const SheetAddressContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(() => ({\n    width: '100%',\n    wordWrap: 'break-word',\n  }))\n\nexport const BookmarkButtonContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  background: theme.vars.palette.background.default,\n  display: 'flex',\n  flexDirection: 'column',\n  flexShrink: 0,\n  padding: theme.spacing(2, 3, 3),\n  width: '100%',\n}))\n\nexport const ValidationAlert: React.FC<React.ComponentProps<typeof Alert>> =\n  styled(Alert)(({ theme }) => ({\n    backgroundColor: 'transparent',\n    padding: 0,\n    color: theme.vars.palette.text.primary,\n    [`.${alertClasses.icon}`]: {\n      padding: 0,\n      color: theme.vars.palette.error.main,\n    },\n    [`.${alertClasses.message}`]: { padding: theme.spacing(0.25, 0, 0, 0) },\n  }))\n"],"mappings":";;;;;;AAeA,MAAa,eAET,OAAO,KAAK,GAAG,EAAE,aAAa;CAChC,SAAS;EACR,IAAI,iBAAiB,UAAU;EAC9B,SAAS,MAAM,QAAQ,CAAC;EACxB,WAAW;CACb;AACF,EAAE;AAEF,MAAa,sBAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,CAAC;CACpB,OAAO;AACT,EAAE;AAMF,MAAa,oCAGT,OAAO,eAAe,EACxB,oBAAoB,SAAS,SAAS,mBACxC,CAAC,GAA2C,EAAE,OAAO,wBAAwB;CAC3E,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,CAAC;CACpB,gBAAgB;CAChB,GAAI,oBAAoB,MAAM,WAAW,WAAW,SAChD,EACE,QAAQ,OACV,IACA,CAAC;AACP,EAAE;AAEF,MAAa,mBAET,OAAO,SAAS,EAAE;CACpB,SAAS;CACT,eAAe;AACjB,CAAC;AAED,MAAa,6BAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,SAAS;CACT,eAAe;CACf,YAAY;CACZ,SAAS,MAAM,QAAQ,GAAG,GAAG,CAAC;CAC9B,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAa,wBACX,OAAO,GAAG,GAAG,EAAE,aAAa;CAC1B,SAAS;CACT,OAAO;CACP,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEJ,MAAa,yBAET,OAAO,cAAc,GAAG,EAAE,aAAa;CACzC,SAAS,MAAM,QAAQ,IAAI;CAC3B,UAAU;AACZ,EAAE;AAEF,MAAa,gBAA4D,OACvE,GACF,GAAG,EAAE,aAAa;CAChB,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,OAAO;CACP,QAAQ;CACR,cAAc;CACd,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,YAAY,MAAM,KAAK,QAAQ,KAAK;CACpC,GAAG,MAAM,YAAY,QAAQ;EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,YAAY,MAAM,KAAK,QAAQ,KAAK;CACtC,CAAC;AACH,EAAE;AAEF,MAAa,aACX,OAAO,UAAU,SAAS;CACxB,UAAU;CACV,YAAY;AACd,EAAE;AAEJ,MAAa,wBACX,OAAO,GAAG,SAAS;CACjB,OAAO;CACP,UAAU;AACZ,EAAE;AAEJ,MAAa,0BAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,YAAY,MAAM,KAAK,QAAQ,WAAW;CAC1C,SAAS;CACT,eAAe;CACf,YAAY;CACZ,SAAS,MAAM,QAAQ,GAAG,GAAG,CAAC;CAC9B,OAAO;AACT,EAAE;AAEF,MAAa,kBACX,OAAO,KAAK,GAAG,EAAE,aAAa;CAC5B,iBAAiB;CACjB,SAAS;CACT,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC9B,IAAI,aAAa,SAAS;EACzB,SAAS;EACT,OAAO,MAAM,KAAK,QAAQ,MAAM;CAClC;EACC,IAAI,aAAa,YAAY,EAAE,SAAS,MAAM,QAAQ,KAAM,GAAG,GAAG,CAAC,EAAE;AACxE,EAAE"}