@lifi/widget 0.0.0-preview-6cc63bac

package/dist/esm/pages/SelectTokenPage/SelectTokenPage.js

@@ -0,0 +1,46 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useSwapOnly } from "../../hooks/useSwapOnly.js";
+import { PageContainer } from "../../components/PageContainer.js";
+import { useWideVariant } from "../../hooks/useWideVariant.js";
+import { useHeader } from "../../hooks/useHeader.js";
+import { ChainSelect } from "../../components/ChainSelect/ChainSelect.js";
+import { TokenList } from "../../components/TokenList/TokenList.js";
+import { SearchTokenInput } from "./SearchTokenInput.js";
+import { useRef } from "react";
+import { Box, useMediaQuery } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/SelectTokenPage/SelectTokenPage.tsx
+const SelectTokenPage = ({ formType }) => {
+	const headerRef = useRef(null);
+	const swapOnly = useSwapOnly();
+	const { mode, hiddenUI } = useWidgetConfig();
+	const wideVariant = useWideVariant();
+	const { t } = useTranslation();
+	useHeader(formType === "from" ? mode === "custom" ? t("header.payWith") : t("header.from") : t("header.to"));
+	const hideChainSelect = wideVariant && !hiddenUI?.chainSidebar || swapOnly && formType === "to" || hiddenUI?.chainSelect;
+	const isMobile = useMediaQuery((theme) => theme.breakpoints.down(theme.breakpoints.values.xs));
+	const hideSearchTokenInput = hiddenUI?.searchTokenInput;
+	return /* @__PURE__ */ jsxs(PageContainer, {
+		disableGutters: true,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			ref: headerRef,
+			sx: {
+				pt: 1.5,
+				pb: !hideChainSelect || !hideSearchTokenInput ? 2 : 0,
+				px: 3
+			},
+			children: [!hideChainSelect ? /* @__PURE__ */ jsx(ChainSelect, { formType }) : null, !hideSearchTokenInput && /* @__PURE__ */ jsx(Box, {
+				sx: { mt: !hideChainSelect ? 2 : 0 },
+				children: /* @__PURE__ */ jsx(SearchTokenInput, { formType })
+			})]
+		}), /* @__PURE__ */ jsx(TokenList, {
+			headerRef,
+			formType
+		}, hideChainSelect ? "without-offset" : isMobile ? "with-offset-mobile" : "with-offset")]
+	});
+};
+//#endregion
+export { SelectTokenPage };
+
+//# sourceMappingURL=SelectTokenPage.js.map

package/dist/esm/pages/SelectTokenPage/SelectTokenPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTokenPage.js","names":[],"sources":["../../../../src/pages/SelectTokenPage/SelectTokenPage.tsx"],"sourcesContent":["import { Box, type Theme, useMediaQuery } from '@mui/material'\nimport type { FC } from 'react'\nimport { useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ChainSelect } from '../../components/ChainSelect/ChainSelect.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { TokenList } from '../../components/TokenList/TokenList.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useSwapOnly } from '../../hooks/useSwapOnly.js'\nimport { useWideVariant } from '../../hooks/useWideVariant.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { SearchTokenInput } from './SearchTokenInput.js'\n\nexport const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {\n  const headerRef = useRef<HTMLElement>(null)\n\n  const swapOnly = useSwapOnly()\n\n  const { mode, hiddenUI } = useWidgetConfig()\n  const wideVariant = useWideVariant()\n\n  const { t } = useTranslation()\n  const title =\n    formType === 'from'\n      ? mode === 'custom'\n        ? t('header.payWith')\n        : t('header.from')\n      : t('header.to')\n\n  useHeader(title)\n\n  const hideChainSelect =\n    (wideVariant && !hiddenUI?.chainSidebar) ||\n    (swapOnly && formType === 'to') ||\n    hiddenUI?.chainSelect\n\n  const isMobile = useMediaQuery((theme: Theme) =>\n    theme.breakpoints.down(theme.breakpoints.values.xs)\n  )\n  const hideSearchTokenInput = hiddenUI?.searchTokenInput\n\n  const hasHeader = !hideChainSelect || !hideSearchTokenInput\n\n  return (\n    <PageContainer disableGutters>\n      <Box\n        ref={headerRef}\n        sx={{\n          pt: 1.5,\n          pb: hasHeader ? 2 : 0,\n          px: 3,\n        }}\n      >\n        {!hideChainSelect ? <ChainSelect formType={formType} /> : null}\n        {!hideSearchTokenInput && (\n          <Box\n            sx={{\n              mt: !hideChainSelect ? 2 : 0,\n            }}\n          >\n            <SearchTokenInput formType={formType} />\n          </Box>\n        )}\n      </Box>\n      <TokenList\n        // Rerender component if variant changes (since chains tiles change height)\n        key={\n          hideChainSelect\n            ? 'without-offset'\n            : isMobile\n              ? 'with-offset-mobile'\n              : 'with-offset'\n        }\n        headerRef={headerRef}\n        formType={formType}\n      />\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAa,mBAAsC,EAAE,eAAe;CAClE,MAAM,YAAY,OAAoB,IAAI;CAE1C,MAAM,WAAW,YAAY;CAE7B,MAAM,EAAE,MAAM,aAAa,gBAAgB;CAC3C,MAAM,cAAc,eAAe;CAEnC,MAAM,EAAE,MAAM,eAAe;CAQ7B,UANE,aAAa,SACT,SAAS,WACP,EAAE,gBAAgB,IAClB,EAAE,aAAa,IACjB,EAAE,WAAW,CAEJ;CAEf,MAAM,kBACH,eAAe,CAAC,UAAU,gBAC1B,YAAY,aAAa,QAC1B,UAAU;CAEZ,MAAM,WAAW,eAAe,UAC9B,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,CACpD;CACA,MAAM,uBAAuB,UAAU;CAIvC,OACE,qBAAC,eAAD;EAAe,gBAAA;YAAf,CACE,qBAAC,KAAD;GACE,KAAK;GACL,IAAI;IACF,IAAI;IACJ,IARU,CAAC,mBAAmB,CAAC,uBAQf,IAAI;IACpB,IAAI;GACN;aANF,CAQG,CAAC,kBAAkB,oBAAC,aAAD,EAAuB,SAAW,CAAA,IAAI,MACzD,CAAC,wBACA,oBAAC,KAAD;IACE,IAAI,EACF,IAAI,CAAC,kBAAkB,IAAI,EAC7B;cAEA,oBAAC,kBAAD,EAA4B,SAAW,CAAA;GACpC,CAAA,CAEJ;MACL,oBAAC,WAAD;GASa;GACD;EACX,GARG,kBACI,mBACA,WACE,uBACA,aAIT,CACY;;AAEnB"}

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

@@ -0,0 +1,176 @@
+import { useBookmarkActions } from "../../stores/bookmarks/useBookmarkActions.js";
+import { Input } from "../../components/Input.js";
+import { useAddressValidation } from "../../hooks/useAddressValidation.js";
+import { AlertMessage } from "../../components/Messages/AlertMessage.js";
+import { BottomSheet } from "../../components/BottomSheet/BottomSheet.js";
+import { AddressInput, BookmarkInputFields, IconContainer, SendToWalletButtonRow, SendToWalletCard, SendToWalletSheetContainer, SheetAddressContainer, SheetTitle, ValidationAlert } from "./SendToWalletPage.style.js";
+import { forwardRef, useState } from "react";
+import { Button, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import WarningRounded from "@mui/icons-material/WarningRounded";
+import TurnedIn from "@mui/icons-material/TurnedIn";
+import ErrorIcon from "@mui/icons-material/Error";
+//#region src/pages/SendToWallet/BookmarkAddressSheet.tsx
+const BookmarkAddressSheet = forwardRef(({ validatedWallet, onAddBookmark }, ref) => {
+	const { t } = useTranslation();
+	const [name, setName] = useState("");
+	const [address, setAddress] = useState("");
+	const [error, setError] = useState();
+	const { validateAddress, isValidating } = useAddressValidation();
+	const { getBookmark } = useBookmarkActions();
+	const nameValue = name.trim() || validatedWallet?.name || "";
+	const addressValue = address || validatedWallet?.address || "";
+	const handleCancel = () => {
+		setError(void 0);
+		ref.current?.close();
+	};
+	const validateWithAddressFromInput = async () => {
+		const validationResult = await validateAddress({ value: address });
+		if (!validationResult.isValid) {
+			setError({
+				type: "address",
+				message: validationResult.error
+			});
+			return;
+		}
+		return {
+			name: nameValue,
+			address: validationResult.address,
+			chainType: validationResult.chainType
+		};
+	};
+	const validateWithValidatedWallet = (validatedWallet) => {
+		if (error) setError(void 0);
+		return {
+			name: nameValue,
+			address: validatedWallet.address,
+			chainType: validatedWallet.chainType
+		};
+	};
+	const handleBookmark = async () => {
+		if (isValidating) return;
+		if (!nameValue) {
+			setError({
+				type: "name",
+				message: t("error.title.bookmarkNameRequired")
+			});
+			return;
+		}
+		if (!addressValue) {
+			setError({
+				type: "address",
+				message: t("error.title.walletAddressRequired")
+			});
+			return;
+		}
+		const validatedBookmark = validatedWallet ? validateWithValidatedWallet(validatedWallet) : await validateWithAddressFromInput();
+		if (validatedBookmark) {
+			const existingBookmark = getBookmark(validatedBookmark.address);
+			if (existingBookmark) {
+				setError({
+					type: "address",
+					message: t("error.title.bookmarkAlreadyExists", { name: existingBookmark.name })
+				});
+				return;
+			}
+			ref.current?.close();
+			onAddBookmark({
+				name: validatedBookmark.name,
+				address: validatedBookmark.address,
+				chainType: validatedBookmark.chainType
+			});
+		}
+	};
+	const handleAddressInputChange = (e) => {
+		if (error) setError(void 0);
+		setAddress(e.target.value.trim());
+	};
+	const handleNameInputChange = (e) => {
+		if (error) setError(void 0);
+		setName(e.target.value);
+	};
+	const resetValues = () => {
+		setName("");
+		setAddress("");
+	};
+	return /* @__PURE__ */ jsx(BottomSheet, {
+		ref,
+		onClose: resetValues,
+		children: /* @__PURE__ */ jsxs(SendToWalletSheetContainer, { children: [
+			/* @__PURE__ */ jsx(IconContainer, { children: /* @__PURE__ */ jsx(TurnedIn, { sx: { fontSize: 40 } }) }),
+			/* @__PURE__ */ jsx(SheetTitle, { children: t("sendToWallet.bookmarkWallet") }),
+			validatedWallet ? /* @__PURE__ */ jsxs(SheetAddressContainer, { children: [validatedWallet?.name ? /* @__PURE__ */ jsx(Typography, {
+				sx: {
+					fontWeight: 600,
+					mb: .5
+				},
+				children: validatedWallet?.name
+			}) : null, /* @__PURE__ */ jsx(Typography, { children: validatedWallet?.address })] }) : null,
+			/* @__PURE__ */ jsxs(BookmarkInputFields, { children: [
+				/* @__PURE__ */ jsx(SendToWalletCard, {
+					type: error?.type === "name" ? "error" : "default",
+					children: /* @__PURE__ */ jsx(Input, {
+						size: "small",
+						autoComplete: "off",
+						autoCorrect: "off",
+						autoCapitalize: "off",
+						spellCheck: "false",
+						onChange: handleNameInputChange,
+						value: name,
+						placeholder: validatedWallet?.name || t("sendToWallet.enterName"),
+						"aria-label": validatedWallet?.name || t("sendToWallet.enterName"),
+						inputProps: { maxLength: 128 }
+					})
+				}),
+				!validatedWallet && /* @__PURE__ */ jsx(SendToWalletCard, {
+					type: error?.type === "address" ? "error" : "default",
+					children: /* @__PURE__ */ jsx(AddressInput, {
+						size: "small",
+						autoComplete: "off",
+						autoCorrect: "off",
+						autoCapitalize: "off",
+						spellCheck: "false",
+						onChange: handleAddressInputChange,
+						value: address,
+						placeholder: t("sendToWallet.enterAddress", { context: "long" }),
+						"aria-label": t("sendToWallet.enterAddress", { context: "long" }),
+						maxRows: 2,
+						inputProps: { maxLength: 128 },
+						multiline: true
+					})
+				}),
+				error ? /* @__PURE__ */ jsx(ValidationAlert, {
+					icon: /* @__PURE__ */ jsx(ErrorIcon, {}),
+					children: error.message
+				}) : null
+			] }),
+			/* @__PURE__ */ jsx(AlertMessage, {
+				title: /* @__PURE__ */ jsx(Typography, {
+					variant: "body2",
+					sx: { color: "text.primary" },
+					children: t("warning.message.fundsLossPrevention")
+				}),
+				icon: /* @__PURE__ */ jsx(WarningRounded, {})
+			}),
+			/* @__PURE__ */ jsxs(SendToWalletButtonRow, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				onClick: handleCancel,
+				fullWidth: true,
+				children: t("button.cancel")
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "contained",
+				onClick: handleBookmark,
+				loading: isValidating,
+				loadingPosition: "center",
+				fullWidth: true,
+				focusRipple: true,
+				children: t("button.bookmark")
+			})] })
+		] })
+	});
+});
+//#endregion
+export { BookmarkAddressSheet };
+
+//# sourceMappingURL=BookmarkAddressSheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BookmarkAddressSheet.js","names":[],"sources":["../../../../src/pages/SendToWallet/BookmarkAddressSheet.tsx"],"sourcesContent":["import ErrorIcon from '@mui/icons-material/Error'\nimport TurnedIn from '@mui/icons-material/TurnedIn'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Button, Typography } from '@mui/material'\nimport type { ChangeEvent, RefObject } from 'react'\nimport {\n  type ForwardRefExoticComponent,\n  forwardRef,\n  type RefAttributes,\n  useState,\n} from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { Input } from '../../components/Input.js'\nimport { AlertMessage } from '../../components/Messages/AlertMessage.js'\nimport { useAddressValidation } from '../../hooks/useAddressValidation.js'\nimport type { Bookmark } from '../../stores/bookmarks/types.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport {\n  AddressInput,\n  BookmarkInputFields,\n  IconContainer,\n  SendToWalletButtonRow,\n  SendToWalletCard,\n  SendToWalletSheetContainer,\n  SheetAddressContainer,\n  SheetTitle,\n  ValidationAlert,\n} from './SendToWalletPage.style.js'\nimport type { BookmarkError } from './types.js'\n\ninterface BookmarkAddressProps {\n  onAddBookmark: (bookmark: Bookmark) => void\n  validatedWallet?: Bookmark\n}\n\nexport const BookmarkAddressSheet: ForwardRefExoticComponent<\n  BookmarkAddressProps & RefAttributes<BottomSheetBase>\n> = forwardRef<BottomSheetBase, BookmarkAddressProps>(\n  ({ validatedWallet, onAddBookmark }, ref) => {\n    const { t } = useTranslation()\n    const [name, setName] = useState('')\n    const [address, setAddress] = useState('')\n    const [error, setError] = useState<BookmarkError>()\n    const { validateAddress, isValidating } = useAddressValidation()\n    const { getBookmark } = useBookmarkActions()\n\n    const nameValue = name.trim() || validatedWallet?.name || ''\n    const addressValue = address || validatedWallet?.address || ''\n\n    const handleCancel = () => {\n      setError(undefined)\n      ;(ref as RefObject<BottomSheetBase>).current?.close()\n    }\n\n    const validateWithAddressFromInput = async () => {\n      const validationResult = await validateAddress({ value: address })\n      if (!validationResult.isValid) {\n        setError({ type: 'address', message: validationResult.error })\n        return\n      }\n\n      return {\n        name: nameValue,\n        address: validationResult.address,\n        chainType: validationResult.chainType,\n      }\n    }\n\n    const validateWithValidatedWallet = (validatedWallet: Bookmark) => {\n      if (error) {\n        setError(undefined)\n      }\n      return {\n        name: nameValue,\n        address: validatedWallet.address,\n        chainType: validatedWallet.chainType,\n      }\n    }\n\n    const handleBookmark = async () => {\n      if (isValidating) {\n        return\n      }\n      if (!nameValue) {\n        setError({\n          type: 'name',\n          message: t('error.title.bookmarkNameRequired'),\n        })\n        return\n      }\n      if (!addressValue) {\n        setError({\n          type: 'address',\n          message: t('error.title.walletAddressRequired'),\n        })\n        return\n      }\n\n      //  If the validatedWallet is supplied as a prop then we should assume\n      //  the address has already been validated\n      const validatedBookmark = validatedWallet\n        ? validateWithValidatedWallet(validatedWallet)\n        : await validateWithAddressFromInput()\n\n      if (validatedBookmark) {\n        const existingBookmark = getBookmark(validatedBookmark.address)\n        if (existingBookmark) {\n          setError({\n            type: 'address',\n            message: t('error.title.bookmarkAlreadyExists', {\n              name: existingBookmark.name,\n            }),\n          })\n          return\n        }\n        ;(ref as RefObject<BottomSheetBase>).current?.close()\n\n        onAddBookmark({\n          name: validatedBookmark.name,\n          address: validatedBookmark.address,\n          chainType: validatedBookmark.chainType,\n        })\n      }\n    }\n\n    const handleAddressInputChange = (e: ChangeEvent) => {\n      if (error) {\n        setError(undefined)\n      }\n      setAddress((e.target as HTMLInputElement).value.trim())\n    }\n\n    const handleNameInputChange = (e: ChangeEvent) => {\n      if (error) {\n        setError(undefined)\n      }\n      setName((e.target as HTMLInputElement).value)\n    }\n\n    const resetValues = () => {\n      setName('')\n      setAddress('')\n    }\n\n    return (\n      <BottomSheet ref={ref} onClose={resetValues}>\n        <SendToWalletSheetContainer>\n          <IconContainer>\n            <TurnedIn sx={{ fontSize: 40 }} />\n          </IconContainer>\n          <SheetTitle>{t('sendToWallet.bookmarkWallet')}</SheetTitle>\n          {validatedWallet ? (\n            <SheetAddressContainer>\n              {validatedWallet?.name ? (\n                <Typography\n                  sx={{\n                    fontWeight: 600,\n                    mb: 0.5,\n                  }}\n                >\n                  {validatedWallet?.name}\n                </Typography>\n              ) : null}\n              <Typography>{validatedWallet?.address}</Typography>\n            </SheetAddressContainer>\n          ) : null}\n          <BookmarkInputFields>\n            <SendToWalletCard\n              type={error?.type === 'name' ? 'error' : 'default'}\n            >\n              <Input\n                size=\"small\"\n                autoComplete=\"off\"\n                autoCorrect=\"off\"\n                autoCapitalize=\"off\"\n                spellCheck=\"false\"\n                onChange={handleNameInputChange}\n                value={name}\n                placeholder={\n                  validatedWallet?.name || t('sendToWallet.enterName')\n                }\n                aria-label={\n                  validatedWallet?.name || t('sendToWallet.enterName')\n                }\n                inputProps={{ maxLength: 128 }}\n              />\n            </SendToWalletCard>\n            {!validatedWallet && (\n              <SendToWalletCard\n                type={error?.type === 'address' ? 'error' : 'default'}\n              >\n                <AddressInput\n                  size=\"small\"\n                  autoComplete=\"off\"\n                  autoCorrect=\"off\"\n                  autoCapitalize=\"off\"\n                  spellCheck=\"false\"\n                  onChange={handleAddressInputChange}\n                  value={address}\n                  placeholder={t('sendToWallet.enterAddress', {\n                    context: 'long',\n                  })}\n                  aria-label={t('sendToWallet.enterAddress', {\n                    context: 'long',\n                  })}\n                  maxRows={2}\n                  inputProps={{ maxLength: 128 }}\n                  multiline\n                />\n              </SendToWalletCard>\n            )}\n            {error ? (\n              <ValidationAlert icon={<ErrorIcon />}>\n                {error.message}\n              </ValidationAlert>\n            ) : null}\n          </BookmarkInputFields>\n          <AlertMessage\n            title={\n              <Typography variant=\"body2\" sx={{ color: 'text.primary' }}>\n                {t('warning.message.fundsLossPrevention')}\n              </Typography>\n            }\n            icon={<WarningRounded />}\n          />\n          <SendToWalletButtonRow>\n            <Button variant=\"text\" onClick={handleCancel} fullWidth>\n              {t('button.cancel')}\n            </Button>\n            <Button\n              variant=\"contained\"\n              onClick={handleBookmark}\n              loading={isValidating}\n              loadingPosition=\"center\"\n              fullWidth\n              focusRipple\n            >\n              {t('button.bookmark')}\n            </Button>\n          </SendToWalletButtonRow>\n        </SendToWalletSheetContainer>\n      </BottomSheet>\n    )\n  }\n)\n"],"mappings":"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"}

package/dist/esm/pages/SendToWallet/BookmarksPage.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 { BookmarkButtonContainer } from "./SendToWalletPage.style.js";
+import { BookmarkAddressSheet } from "./BookmarkAddressSheet.js";
+import { useRef } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { Button, 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 TurnedIn from "@mui/icons-material/TurnedIn";
+//#region src/pages/SendToWallet/BookmarksPage.tsx
+const BookmarksPage = () => {
+	const { t } = useTranslation();
+	const bookmarkAddressSheetRef = useRef(null);
+	const listParentRef = useRef(null);
+	const buttonRef = useRef(null);
+	const { bookmarks } = useBookmarks();
+	const { requiredToChainType } = useToAddressRequirements();
+	const { addBookmark, removeBookmark, setSelectedBookmark } = useBookmarkActions();
+	const navigate = useNavigate();
+	const { setFieldValue } = useFieldActions();
+	const { getAddressLink } = useExplorer();
+	useHeader(t("header.bookmarkedWallets"));
+	const { listHeight } = useListHeight({
+		listParentRef,
+		headerRef: buttonRef
+	});
+	const handleAddBookmark = () => {
+		bookmarkAddressSheetRef.current?.open();
+	};
+	const handleBookmarkSelected = (bookmark) => {
+		setFieldValue("toAddress", bookmark.address, {
+			isTouched: true,
+			isDirty: true
+		});
+		setSelectedBookmark(bookmark);
+		navigate({
+			to: navigationRoutes.home,
+			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: [bookmarks.map((bookmark) => /* @__PURE__ */ jsxs(ListItem$1, {
+					sx: { position: "relative" },
+					children: [/* @__PURE__ */ jsxs(ListItemButton$1, {
+						onClick: () => handleBookmarkSelected(bookmark),
+						disabled: requiredToChainType && requiredToChainType !== bookmark.chainType,
+						children: [/* @__PURE__ */ jsx(ListItemAvatar, { children: /* @__PURE__ */ jsx(AccountAvatar, { chainId: defaultChainIdsByType[bookmark.chainType] }) }), /* @__PURE__ */ jsx(ListItemText, {
+							primary: bookmark.name,
+							secondary: shortenAddress(bookmark.address)
+						})]
+					}), /* @__PURE__ */ jsx(ContextMenu, {
+						disabled: !!(requiredToChainType && requiredToChainType !== bookmark.chainType),
+						items: [
+							{
+								icon: /* @__PURE__ */ jsx(ContentCopyRounded, {}),
+								label: t("button.copyAddress"),
+								onClick: () => navigator.clipboard.writeText(bookmark.address)
+							},
+							{
+								icon: /* @__PURE__ */ jsx(OpenInNewRounded, {}),
+								label: t("button.viewOnExplorer"),
+								onClick: () => window.open(getAddressLink(bookmark.address, defaultChainIdsByType[bookmark.chainType]), "_blank")
+							},
+							{
+								icon: /* @__PURE__ */ jsx(DeleteOutline, {}),
+								label: t("button.delete"),
+								onClick: () => removeBookmark(bookmark.address)
+							}
+						]
+					})]
+				}, bookmark.address)), !bookmarks.length && /* @__PURE__ */ jsx(EmptyListIndicator, {
+					icon: /* @__PURE__ */ jsx(TurnedIn, {}),
+					title: t("sendToWallet.noBookmarkedWallets"),
+					message: t("sendToWallet.noBookmarkedWalletsMessage")
+				})]
+			}),
+			/* @__PURE__ */ jsx(BookmarkButtonContainer, {
+				ref: buttonRef,
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "contained",
+					onClick: handleAddBookmark,
+					children: t("sendToWallet.addBookmark")
+				})
+			}),
+			/* @__PURE__ */ jsx(BookmarkAddressSheet, {
+				ref: bookmarkAddressSheetRef,
+				onAddBookmark: addBookmark
+			})
+		]
+	});
+};
+//#endregion
+export { BookmarksPage };
+
+//# sourceMappingURL=BookmarksPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BookmarksPage.js","names":["ListItem","ListItemButton"],"sources":["../../../../src/pages/SendToWallet/BookmarksPage.tsx"],"sourcesContent":["import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport DeleteOutline from '@mui/icons-material/DeleteOutlined'\nimport OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'\nimport TurnedIn from '@mui/icons-material/TurnedIn'\nimport { Button, List, ListItemAvatar, ListItemText } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { type JSX, useRef } 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'\nimport { BookmarkButtonContainer } from './SendToWalletPage.style.js'\n\nexport const BookmarksPage = (): JSX.Element => {\n  const { t } = useTranslation()\n  const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null)\n  const listParentRef = useRef<HTMLUListElement | null>(null)\n  const buttonRef = useRef<HTMLDivElement | null>(null)\n  const { bookmarks } = useBookmarks()\n  const { requiredToChainType } = useToAddressRequirements()\n  const { addBookmark, removeBookmark, setSelectedBookmark } =\n    useBookmarkActions()\n  const navigate = useNavigate()\n  const { setFieldValue } = useFieldActions()\n  const { getAddressLink } = useExplorer()\n\n  useHeader(t('header.bookmarkedWallets'))\n\n  const { listHeight } = useListHeight({\n    listParentRef,\n    headerRef: buttonRef,\n  })\n\n  const handleAddBookmark = () => {\n    bookmarkAddressSheetRef.current?.open()\n  }\n\n  const handleBookmarkSelected = (bookmark: Bookmark) => {\n    setFieldValue('toAddress', bookmark.address, {\n      isTouched: true,\n      isDirty: true,\n    })\n    setSelectedBookmark(bookmark)\n    navigate({ to: navigationRoutes.home, 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        {bookmarks.map((bookmark) => (\n          <ListItem key={bookmark.address} sx={{ position: 'relative' }}>\n            <ListItemButton\n              onClick={() => handleBookmarkSelected(bookmark)}\n              disabled={\n                requiredToChainType &&\n                requiredToChainType !== bookmark.chainType\n              }\n            >\n              <ListItemAvatar>\n                <AccountAvatar\n                  chainId={defaultChainIdsByType[bookmark.chainType]}\n                />\n              </ListItemAvatar>\n              <ListItemText\n                primary={bookmark.name}\n                secondary={shortenAddress(bookmark.address)}\n              />\n            </ListItemButton>\n            <ContextMenu\n              disabled={\n                !!(\n                  requiredToChainType &&\n                  requiredToChainType !== bookmark.chainType\n                )\n              }\n              items={[\n                {\n                  icon: <ContentCopyRounded />,\n                  label: t('button.copyAddress'),\n                  onClick: () =>\n                    navigator.clipboard.writeText(bookmark.address),\n                },\n                {\n                  icon: <OpenInNewRounded />,\n                  label: t('button.viewOnExplorer'),\n                  onClick: () =>\n                    window.open(\n                      getAddressLink(\n                        bookmark.address,\n                        defaultChainIdsByType[bookmark.chainType]\n                      ),\n                      '_blank'\n                    ),\n                },\n                {\n                  icon: <DeleteOutline />,\n                  label: t('button.delete'),\n                  onClick: () => removeBookmark(bookmark.address),\n                },\n              ]}\n            />\n          </ListItem>\n        ))}\n        {!bookmarks.length && (\n          <EmptyListIndicator\n            icon={<TurnedIn />}\n            title={t('sendToWallet.noBookmarkedWallets')}\n            message={t('sendToWallet.noBookmarkedWalletsMessage')}\n          />\n        )}\n      </List>\n      <BookmarkButtonContainer ref={buttonRef}>\n        <Button variant=\"contained\" onClick={handleAddBookmark}>\n          {t('sendToWallet.addBookmark')}\n        </Button>\n      </BookmarkButtonContainer>\n      <BookmarkAddressSheet\n        ref={bookmarkAddressSheetRef}\n        onAddBookmark={addBookmark}\n      />\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAa,sBAAmC;CAC9C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,0BAA0B,OAAwB,IAAI;CAC5D,MAAM,gBAAgB,OAAgC,IAAI;CAC1D,MAAM,YAAY,OAA8B,IAAI;CACpD,MAAM,EAAE,cAAc,aAAa;CACnC,MAAM,EAAE,wBAAwB,yBAAyB;CACzD,MAAM,EAAE,aAAa,gBAAgB,wBACnC,mBAAmB;CACrB,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,mBAAmB,YAAY;CAEvC,UAAU,EAAE,0BAA0B,CAAC;CAEvC,MAAM,EAAE,eAAe,cAAc;EACnC;EACA,WAAW;CACb,CAAC;CAED,MAAM,0BAA0B;EAC9B,wBAAwB,SAAS,KAAK;CACxC;CAEA,MAAM,0BAA0B,aAAuB;EACrD,cAAc,aAAa,SAAS,SAAS;GAC3C,WAAW;GACX,SAAS;EACX,CAAC;EACD,oBAAoB,QAAQ;EAC5B,SAAS;GAAE,IAAI,iBAAiB;GAAM,SAAS;EAAK,CAAC;CACvD;CAEA,OACE,qBAAC,eAAD;EAAe,gBAAA;YAAf;GACE,qBAAC,MAAD;IACE,WAAU;IACV,KAAK;IACL,OAAO;KAAE,QAAQ;KAAY,UAAU;IAAO;IAC9C,gBAAA;IACA,IAAI,EAAE,YAAY,IAAI;cALxB,CAOG,UAAU,KAAK,aACd,qBAACA,YAAD;KAAiC,IAAI,EAAE,UAAU,WAAW;eAA5D,CACE,qBAACC,kBAAD;MACE,eAAe,uBAAuB,QAAQ;MAC9C,UACE,uBACA,wBAAwB,SAAS;gBAJrC,CAOE,oBAAC,gBAAD,EAAA,UACE,oBAAC,eAAD,EACE,SAAS,sBAAsB,SAAS,WACzC,CAAA,EACa,CAAA,GAChB,oBAAC,cAAD;OACE,SAAS,SAAS;OAClB,WAAW,eAAe,SAAS,OAAO;MAC3C,CAAA,CACa;SAChB,oBAAC,aAAD;MACE,UACE,CAAC,EACC,uBACA,wBAAwB,SAAS;MAGrC,OAAO;OACL;QACE,MAAM,oBAAC,oBAAD,CAAqB,CAAA;QAC3B,OAAO,EAAE,oBAAoB;QAC7B,eACE,UAAU,UAAU,UAAU,SAAS,OAAO;OAClD;OACA;QACE,MAAM,oBAAC,kBAAD,CAAmB,CAAA;QACzB,OAAO,EAAE,uBAAuB;QAChC,eACE,OAAO,KACL,eACE,SAAS,SACT,sBAAsB,SAAS,UACjC,GACA,QACF;OACJ;OACA;QACE,MAAM,oBAAC,eAAD,CAAgB,CAAA;QACtB,OAAO,EAAE,eAAe;QACxB,eAAe,eAAe,SAAS,OAAO;OAChD;MACF;KACD,CAAA,CACO;OAnDK,SAAS,OAmDd,CACX,GACA,CAAC,UAAU,UACV,oBAAC,oBAAD;KACE,MAAM,oBAAC,UAAD,CAAW,CAAA;KACjB,OAAO,EAAE,kCAAkC;KAC3C,SAAS,EAAE,yCAAyC;IACrD,CAAA,CAEC;;GACN,oBAAC,yBAAD;IAAyB,KAAK;cAC5B,oBAAC,QAAD;KAAQ,SAAQ;KAAY,SAAS;eAClC,EAAE,0BAA0B;IACvB,CAAA;GACe,CAAA;GACzB,oBAAC,sBAAD;IACE,KAAK;IACL,eAAe;GAChB,CAAA;EACY;;AAEnB"}

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

@@ -0,0 +1,82 @@
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { useNavigateBack } from "../../hooks/useNavigateBack.js";
+import { AlertMessage } from "../../components/Messages/AlertMessage.js";
+import { BottomSheet } from "../../components/BottomSheet/BottomSheet.js";
+import { IconContainer, SendToWalletButtonRow, SendToWalletSheetContainer, SheetAddressContainer, SheetTitle } from "./SendToWalletPage.style.js";
+import { useSetContentHeight } from "../../hooks/useSetContentHeight.js";
+import { forwardRef, useRef } from "react";
+import { Button, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Wallet from "@mui/icons-material/Wallet";
+import WarningRounded from "@mui/icons-material/WarningRounded";
+//#region src/pages/SendToWallet/ConfirmAddressSheet.tsx
+const ConfirmAddressSheet = forwardRef((props, ref) => {
+	const handleClose = () => {
+		ref.current?.close();
+	};
+	return /* @__PURE__ */ jsx(BottomSheet, {
+		ref,
+		children: /* @__PURE__ */ jsx(ConfirmAddressSheetContent, {
+			...props,
+			onClose: handleClose
+		})
+	});
+});
+const ConfirmAddressSheetContent = ({ validatedBookmark, onConfirm, onClose }) => {
+	const { t } = useTranslation();
+	const navigateBack = useNavigateBack();
+	const { setFieldValue } = useFieldActions();
+	const containerRef = useRef(null);
+	useSetContentHeight(containerRef);
+	const handleConfirm = () => {
+		if (validatedBookmark) {
+			setFieldValue("toAddress", validatedBookmark.address, {
+				isTouched: true,
+				isDirty: true
+			});
+			onConfirm?.(validatedBookmark);
+			onClose();
+			navigateBack();
+		}
+	};
+	return /* @__PURE__ */ jsxs(SendToWalletSheetContainer, {
+		ref: containerRef,
+		children: [
+			/* @__PURE__ */ jsx(IconContainer, { children: /* @__PURE__ */ jsx(Wallet, { sx: { fontSize: 40 } }) }),
+			/* @__PURE__ */ jsx(SheetTitle, { children: t("sendToWallet.confirmWalletAddress") }),
+			/* @__PURE__ */ jsxs(SheetAddressContainer, { children: [validatedBookmark?.name ? /* @__PURE__ */ jsx(Typography, {
+				sx: {
+					fontWeight: 600,
+					mb: .5
+				},
+				children: validatedBookmark?.name
+			}) : null, /* @__PURE__ */ jsx(Typography, { children: validatedBookmark?.address })] }),
+			/* @__PURE__ */ jsx(AlertMessage, {
+				severity: "warning",
+				title: /* @__PURE__ */ jsx(Typography, {
+					variant: "body2",
+					sx: { color: "text.primary" },
+					children: t("warning.message.fundsLossPrevention")
+				}),
+				icon: /* @__PURE__ */ jsx(WarningRounded, {}),
+				multiline: true
+			}),
+			/* @__PURE__ */ jsxs(SendToWalletButtonRow, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				onClick: onClose,
+				fullWidth: true,
+				children: t("button.cancel")
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "contained",
+				onClick: handleConfirm,
+				fullWidth: true,
+				children: t("button.confirm")
+			})] })
+		]
+	});
+};
+//#endregion
+export { ConfirmAddressSheet };
+
+//# sourceMappingURL=ConfirmAddressSheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmAddressSheet.js","names":[],"sources":["../../../../src/pages/SendToWallet/ConfirmAddressSheet.tsx"],"sourcesContent":["import Wallet from '@mui/icons-material/Wallet'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Button, Typography } from '@mui/material'\nimport type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'\nimport { forwardRef, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { AlertMessage } from '../../components/Messages/AlertMessage.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport type { Bookmark } from '../../stores/bookmarks/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport {\n  IconContainer,\n  SendToWalletButtonRow,\n  SendToWalletSheetContainer,\n  SheetAddressContainer,\n  SheetTitle,\n} from './SendToWalletPage.style.js'\n\ninterface ConfirmAddressSheetProps {\n  onConfirm: (wallet: Bookmark) => void\n  validatedBookmark?: Bookmark\n}\n\ninterface ConfirmAddressSheetContentProps extends ConfirmAddressSheetProps {\n  onClose: () => void\n}\n\nexport const ConfirmAddressSheet: ForwardRefExoticComponent<\n  ConfirmAddressSheetProps & RefAttributes<BottomSheetBase>\n> = forwardRef<BottomSheetBase, ConfirmAddressSheetProps>((props, ref) => {\n  const handleClose = () => {\n    ;(ref as RefObject<BottomSheetBase>).current?.close()\n  }\n\n  return (\n    <BottomSheet ref={ref}>\n      <ConfirmAddressSheetContent {...props} onClose={handleClose} />\n    </BottomSheet>\n  )\n})\n\nconst ConfirmAddressSheetContent: React.FC<ConfirmAddressSheetContentProps> = ({\n  validatedBookmark,\n  onConfirm,\n  onClose,\n}) => {\n  const { t } = useTranslation()\n  const navigateBack = useNavigateBack()\n  const { setFieldValue } = useFieldActions()\n  const containerRef = useRef<HTMLElement>(null)\n  useSetContentHeight(containerRef)\n\n  const handleConfirm = () => {\n    if (validatedBookmark) {\n      setFieldValue('toAddress', validatedBookmark.address, {\n        isTouched: true,\n        isDirty: true,\n      })\n      onConfirm?.(validatedBookmark)\n      onClose()\n      navigateBack()\n    }\n  }\n\n  return (\n    <SendToWalletSheetContainer ref={containerRef}>\n      <IconContainer>\n        <Wallet sx={{ fontSize: 40 }} />\n      </IconContainer>\n      <SheetTitle>{t('sendToWallet.confirmWalletAddress')}</SheetTitle>\n      <SheetAddressContainer>\n        {validatedBookmark?.name ? (\n          <Typography\n            sx={{\n              fontWeight: 600,\n              mb: 0.5,\n            }}\n          >\n            {validatedBookmark?.name}\n          </Typography>\n        ) : null}\n        <Typography>{validatedBookmark?.address}</Typography>\n      </SheetAddressContainer>\n      <AlertMessage\n        severity=\"warning\"\n        title={\n          <Typography variant=\"body2\" sx={{ color: 'text.primary' }}>\n            {t('warning.message.fundsLossPrevention')}\n          </Typography>\n        }\n        icon={<WarningRounded />}\n        multiline\n      />\n      <SendToWalletButtonRow>\n        <Button variant=\"text\" onClick={onClose} fullWidth>\n          {t('button.cancel')}\n        </Button>\n        <Button variant=\"contained\" onClick={handleConfirm} fullWidth>\n          {t('button.confirm')}\n        </Button>\n      </SendToWalletButtonRow>\n    </SendToWalletSheetContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AA8BA,MAAa,sBAET,YAAuD,OAAO,QAAQ;CACxE,MAAM,oBAAoB;EACvB,IAAoC,SAAS,MAAM;CACtD;CAEA,OACE,oBAAC,aAAD;EAAkB;YAChB,oBAAC,4BAAD;GAA4B,GAAI;GAAO,SAAS;EAAc,CAAA;CACnD,CAAA;AAEjB,CAAC;AAED,MAAM,8BAAyE,EAC7E,mBACA,WACA,cACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,eAAe,gBAAgB;CACrC,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,eAAe,OAAoB,IAAI;CAC7C,oBAAoB,YAAY;CAEhC,MAAM,sBAAsB;EAC1B,IAAI,mBAAmB;GACrB,cAAc,aAAa,kBAAkB,SAAS;IACpD,WAAW;IACX,SAAS;GACX,CAAC;GACD,YAAY,iBAAiB;GAC7B,QAAQ;GACR,aAAa;EACf;CACF;CAEA,OACE,qBAAC,4BAAD;EAA4B,KAAK;YAAjC;GACE,oBAAC,eAAD,EAAA,UACE,oBAAC,QAAD,EAAQ,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA,EAClB,CAAA;GACf,oBAAC,YAAD,EAAA,UAAa,EAAE,mCAAmC,EAAc,CAAA;GAChE,qBAAC,uBAAD,EAAA,UAAA,CACG,mBAAmB,OAClB,oBAAC,YAAD;IACE,IAAI;KACF,YAAY;KACZ,IAAI;IACN;cAEC,mBAAmB;GACV,CAAA,IACV,MACJ,oBAAC,YAAD,EAAA,UAAa,mBAAmB,QAAoB,CAAA,CAC/B,EAAA,CAAA;GACvB,oBAAC,cAAD;IACE,UAAS;IACT,OACE,oBAAC,YAAD;KAAY,SAAQ;KAAQ,IAAI,EAAE,OAAO,eAAe;eACrD,EAAE,qCAAqC;IAC9B,CAAA;IAEd,MAAM,oBAAC,gBAAD,CAAiB,CAAA;IACvB,WAAA;GACD,CAAA;GACD,qBAAC,uBAAD,EAAA,UAAA,CACE,oBAAC,QAAD;IAAQ,SAAQ;IAAO,SAAS;IAAS,WAAA;cACtC,EAAE,eAAe;GACZ,CAAA,GACR,oBAAC,QAAD;IAAQ,SAAQ;IAAY,SAAS;IAAe,WAAA;cACjD,EAAE,gBAAgB;GACb,CAAA,CACa,EAAA,CAAA;EACG;;AAEhC"}

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

@@ -0,0 +1,106 @@
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { useBookmarkActions } from "../../stores/bookmarks/useBookmarkActions.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { PageContainer } from "../../components/PageContainer.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 { useRef } 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 { useAccount } from "@lifi/wallet-management";
+import Wallet from "@mui/icons-material/Wallet";
+import ContentCopyRounded from "@mui/icons-material/ContentCopyRounded";
+import OpenInNewRounded from "@mui/icons-material/OpenInNewRounded";
+//#region src/pages/SendToWallet/ConnectedWalletsPage.tsx
+const ConnectedWalletsPage = () => {
+	const { t } = useTranslation();
+	const { accounts } = useAccount();
+	const { setSelectedBookmark } = useBookmarkActions();
+	const { requiredToChainType } = useToAddressRequirements();
+	const navigate = useNavigate();
+	const { setFieldValue } = useFieldActions();
+	const { getAddressLink } = useExplorer();
+	const listParentRef = useRef(null);
+	useHeader(t("sendToWallet.connectedWallets"));
+	const { listHeight } = useListHeight({ listParentRef });
+	const handleWalletSelected = (account) => {
+		setFieldValue("toAddress", account.address, {
+			isTouched: true,
+			isDirty: true
+		});
+		setSelectedBookmark({
+			name: account.connector?.name,
+			address: account.address,
+			chainType: account.chainType,
+			isConnectedAccount: true
+		});
+		navigate({
+			to: navigationRoutes.home,
+			replace: true
+		});
+	};
+	return /* @__PURE__ */ jsx(PageContainer, {
+		disableGutters: true,
+		children: /* @__PURE__ */ jsxs(List, {
+			className: "long-list",
+			ref: listParentRef,
+			style: {
+				height: listHeight,
+				overflow: "auto"
+			},
+			disablePadding: true,
+			sx: { paddingTop: 1.5 },
+			children: [accounts.map((account) => {
+				const walletAddress = shortenAddress(account.address);
+				const menuItems = [{
+					icon: /* @__PURE__ */ jsx(ContentCopyRounded, {}),
+					label: t("button.copyAddress"),
+					onClick: () => {
+						if (account.address) navigator.clipboard.writeText(account.address);
+					}
+				}, ...account.chainId ? [{
+					icon: /* @__PURE__ */ jsx(OpenInNewRounded, {}),
+					label: t("button.viewOnExplorer"),
+					onClick: () => {
+						if (account.address) window.open(getAddressLink(account.address, account.chainId), "_blank");
+					}
+				}] : []];
+				return /* @__PURE__ */ jsxs(ListItem$1, {
+					sx: { position: "relative" },
+					children: [/* @__PURE__ */ jsxs(ListItemButton$1, {
+						onClick: () => handleWalletSelected(account),
+						disabled: requiredToChainType && requiredToChainType !== account.chainType,
+						children: [/* @__PURE__ */ jsx(ListItemAvatar, { children: /* @__PURE__ */ jsx(AccountAvatar, {
+							chainId: account.chainId,
+							account
+						}) }), /* @__PURE__ */ jsx(ListItemText, {
+							primary: account.connector?.name,
+							secondary: walletAddress
+						})]
+					}), /* @__PURE__ */ jsx(ContextMenu, {
+						items: menuItems,
+						disabled: !!(requiredToChainType && requiredToChainType !== account.chainType)
+					})]
+				}, account.address);
+			}), !accounts.length && /* @__PURE__ */ jsx(EmptyListIndicator, {
+				icon: /* @__PURE__ */ jsx(Wallet, {}),
+				title: t("sendToWallet.noConnectedWallets"),
+				message: t("sendToWallet.noConnectedWalletsMessage")
+			})]
+		})
+	});
+};
+//#endregion
+export { ConnectedWalletsPage };
+
+//# sourceMappingURL=ConnectedWalletsPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectedWalletsPage.js","names":["ListItem","ListItemButton"],"sources":["../../../../src/pages/SendToWallet/ConnectedWalletsPage.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { List, ListItemAvatar, ListItemText } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\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 { 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 { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { shortenAddress } from '../../utils/wallet.js'\n\nexport const ConnectedWalletsPage = (): JSX.Element => {\n  const { t } = useTranslation()\n  const { accounts } = useAccount()\n  const { setSelectedBookmark } = useBookmarkActions()\n  const { requiredToChainType } = useToAddressRequirements()\n  const navigate = useNavigate()\n  const { setFieldValue } = useFieldActions()\n  const { getAddressLink } = useExplorer()\n  const listParentRef = useRef<HTMLUListElement | null>(null)\n\n  useHeader(t('sendToWallet.connectedWallets'))\n\n  const { listHeight } = useListHeight({ listParentRef })\n\n  const handleWalletSelected = (account: Account) => {\n    setFieldValue('toAddress', account.address!, {\n      isTouched: true,\n      isDirty: true,\n    })\n    setSelectedBookmark({\n      name: account.connector?.name,\n      address: account.address!,\n      chainType: account.chainType!,\n      isConnectedAccount: true,\n    })\n    navigate({\n      to: navigationRoutes.home,\n      replace: true,\n    })\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        {accounts.map((account) => {\n          const walletAddress = shortenAddress(account.address)\n          const menuItems = [\n            {\n              icon: <ContentCopyRounded />,\n              label: t('button.copyAddress'),\n              onClick: () => {\n                if (account.address) {\n                  navigator.clipboard.writeText(account.address)\n                }\n              },\n            },\n            ...(account.chainId\n              ? [\n                  {\n                    icon: <OpenInNewRounded />,\n                    label: t('button.viewOnExplorer'),\n                    onClick: () => {\n                      if (account.address) {\n                        window.open(\n                          getAddressLink(account.address, account.chainId),\n                          '_blank'\n                        )\n                      }\n                    },\n                  },\n                ]\n              : []),\n          ]\n\n          return (\n            <ListItem key={account.address} sx={{ position: 'relative' }}>\n              <ListItemButton\n                onClick={() => handleWalletSelected(account)}\n                disabled={\n                  requiredToChainType &&\n                  requiredToChainType !== account.chainType\n                }\n              >\n                <ListItemAvatar>\n                  <AccountAvatar chainId={account.chainId} account={account} />\n                </ListItemAvatar>\n                <ListItemText\n                  primary={account.connector?.name}\n                  secondary={walletAddress}\n                />\n              </ListItemButton>\n              <ContextMenu\n                items={menuItems}\n                disabled={\n                  !!(\n                    requiredToChainType &&\n                    requiredToChainType !== account.chainType\n                  )\n                }\n              />\n            </ListItem>\n          )\n        })}\n        {!accounts.length && (\n          <EmptyListIndicator\n            icon={<Wallet />}\n            title={t('sendToWallet.noConnectedWallets')}\n            message={t('sendToWallet.noConnectedWalletsMessage')}\n          />\n        )}\n      </List>\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,6BAA0C;CACrD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,EAAE,wBAAwB,mBAAmB;CACnD,MAAM,EAAE,wBAAwB,yBAAyB;CACzD,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,mBAAmB,YAAY;CACvC,MAAM,gBAAgB,OAAgC,IAAI;CAE1D,UAAU,EAAE,+BAA+B,CAAC;CAE5C,MAAM,EAAE,eAAe,cAAc,EAAE,cAAc,CAAC;CAEtD,MAAM,wBAAwB,YAAqB;EACjD,cAAc,aAAa,QAAQ,SAAU;GAC3C,WAAW;GACX,SAAS;EACX,CAAC;EACD,oBAAoB;GAClB,MAAM,QAAQ,WAAW;GACzB,SAAS,QAAQ;GACjB,WAAW,QAAQ;GACnB,oBAAoB;EACtB,CAAC;EACD,SAAS;GACP,IAAI,iBAAiB;GACrB,SAAS;EACX,CAAC;CACH;CAEA,OACE,oBAAC,eAAD;EAAe,gBAAA;YACb,qBAAC,MAAD;GACE,WAAU;GACV,KAAK;GACL,OAAO;IAAE,QAAQ;IAAY,UAAU;GAAO;GAC9C,gBAAA;GACA,IAAI,EAAE,YAAY,IAAI;aALxB,CAOG,SAAS,KAAK,YAAY;IACzB,MAAM,gBAAgB,eAAe,QAAQ,OAAO;IACpD,MAAM,YAAY,CAChB;KACE,MAAM,oBAAC,oBAAD,CAAqB,CAAA;KAC3B,OAAO,EAAE,oBAAoB;KAC7B,eAAe;MACb,IAAI,QAAQ,SACV,UAAU,UAAU,UAAU,QAAQ,OAAO;KAEjD;IACF,GACA,GAAI,QAAQ,UACR,CACE;KACE,MAAM,oBAAC,kBAAD,CAAmB,CAAA;KACzB,OAAO,EAAE,uBAAuB;KAChC,eAAe;MACb,IAAI,QAAQ,SACV,OAAO,KACL,eAAe,QAAQ,SAAS,QAAQ,OAAO,GAC/C,QACF;KAEJ;IACF,CACF,IACA,CAAC,CACP;IAEA,OACE,qBAACA,YAAD;KAAgC,IAAI,EAAE,UAAU,WAAW;eAA3D,CACE,qBAACC,kBAAD;MACE,eAAe,qBAAqB,OAAO;MAC3C,UACE,uBACA,wBAAwB,QAAQ;gBAJpC,CAOE,oBAAC,gBAAD,EAAA,UACE,oBAAC,eAAD;OAAe,SAAS,QAAQ;OAAkB;MAAU,CAAA,EAC9C,CAAA,GAChB,oBAAC,cAAD;OACE,SAAS,QAAQ,WAAW;OAC5B,WAAW;MACZ,CAAA,CACa;SAChB,oBAAC,aAAD;MACE,OAAO;MACP,UACE,CAAC,EACC,uBACA,wBAAwB,QAAQ;KAGrC,CAAA,CACO;OAzBK,QAAQ,OAyBb;GAEd,CAAC,GACA,CAAC,SAAS,UACT,oBAAC,oBAAD;IACE,MAAM,oBAAC,QAAD,CAAS,CAAA;IACf,OAAO,EAAE,iCAAiC;IAC1C,SAAS,EAAE,wCAAwC;GACpD,CAAA,CAEC;;CACO,CAAA;AAEnB"}