@lifi/widget 4.0.0-beta.0 → 4.0.0-beta.10

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

@@ -1,30 +1,40 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { SearchInput } from '../../components/Search/SearchInput.js';
-import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-export const SearchTokenInput = ({ formType }) => {
-    const { t } = useTranslation();
-    const [value] = useFieldValues('tokenSearchFilter');
-    const { setFieldValue, setAsTouched } = useFieldActions();
-    const [fromChain, toChain] = useFieldValues('fromChain', 'toChain');
-    const isAllNetworks = useChainOrderStore((state) => state[`${formType}IsAllNetworks`]);
-    const onChange = useCallback((newValue) => {
-        setFieldValue('tokenSearchFilter', newValue, {
-            isDirty: true,
-            isTouched: true,
-        });
-    }, [setFieldValue]);
-    const onBlur = useCallback(() => {
-        setAsTouched('tokenSearchFilter');
-    }, [setAsTouched]);
-    useEffect(() => () => {
-        setFieldValue('tokenSearchFilter', '');
-    }, [setFieldValue]);
-    return (_jsx(SearchInput
-    // Reset the search input when a chain or the "All Networks" is changed
-    , { name: "tokenSearchFilter", placeholder: t('main.tokenSearch'), onChange: (e) => onChange(e.target.value), onBlur: onBlur, onClear: () => setFieldValue('tokenSearchFilter', ''), value: value, autoFocus: true }, `${fromChain}-${toChain}-${isAllNetworks}`));
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { useChainOrderStore } from "../../stores/chains/ChainOrderStore.js";
+import { SearchInput } from "../../components/Search/SearchInput.js";
+import { useCallback, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/SelectTokenPage/SearchTokenInput.tsx
+const SearchTokenInput = ({ formType }) => {
+	const { t } = useTranslation();
+	const [value] = useFieldValues("tokenSearchFilter");
+	const { setFieldValue, setAsTouched } = useFieldActions();
+	const [fromChain, toChain] = useFieldValues("fromChain", "toChain");
+	const isAllNetworks = useChainOrderStore((state) => state[`${formType}IsAllNetworks`]);
+	const onChange = useCallback((newValue) => {
+		setFieldValue("tokenSearchFilter", newValue, {
+			isDirty: true,
+			isTouched: true
+		});
+	}, [setFieldValue]);
+	const onBlur = useCallback(() => {
+		setAsTouched("tokenSearchFilter");
+	}, [setAsTouched]);
+	useEffect(() => () => {
+		setFieldValue("tokenSearchFilter", "");
+	}, [setFieldValue]);
+	return /* @__PURE__ */ jsx(SearchInput, {
+		name: "tokenSearchFilter",
+		placeholder: t("main.tokenSearch"),
+		onChange: (e) => onChange(e.target.value),
+		onBlur,
+		onClear: () => setFieldValue("tokenSearchFilter", ""),
+		value,
+		autoFocus: true
+	}, `${fromChain}-${toChain}-${isAllNetworks}`);
 };
+//#endregion
+export { SearchTokenInput };
+
 //# sourceMappingURL=SearchTokenInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchTokenInput.js","sourceRoot":"","sources":["../../../../src/pages/SelectTokenPage/SearchTokenInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAA;AAE3E,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AAMpE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAyB,EAAE,EAAE;IACtE,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,CAAC,KAAK,CAAC,GAAG,cAAc,CAAC,mBAAmB,CAAC,CAAA;IACnD,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,eAAe,EAAE,CAAA;IACzD,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG,cAAc,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;IACnE,MAAM,aAAa,GAAG,kBAAkB,CACtC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,QAAQ,eAAe,CAAC,CAC7C,CAAA;IAED,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,QAAqC,EAAE,EAAE;QACxC,aAAa,CAAC,mBAAmB,EAAE,QAAQ,EAAE;YAC3C,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;SAChB,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAA;IAED,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,YAAY,CAAC,mBAAmB,CAAC,CAAA;IACnC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,SAAS,CACP,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,aAAa,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAA;IACxC,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAA;IAED,OAAO,CACL,KAAC,WAAW;IACV,uEAAuE;QAEvE,IAAI,EAAC,mBAAmB,EACxB,WAAW,EAAE,CAAC,CAAC,kBAAkB,CAAC,EAClC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,EAC/D,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,mBAAmB,EAAE,EAAE,CAAC,EACrD,KAAK,EAAE,KAA2B,EAClC,SAAS,UAPJ,GAAG,SAAS,IAAI,OAAO,IAAI,aAAa,EAAE,CAQ/C,CACH,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"SearchTokenInput.js","names":[],"sources":["../../../../src/pages/SelectTokenPage/SearchTokenInput.tsx"],"sourcesContent":["import { type JSX, useCallback, useEffect } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { SearchInput } from '../../components/Search/SearchInput.js'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\n\ninterface SearchTokenInputProps {\n  formType: FormType\n}\n\nexport const SearchTokenInput = ({\n  formType,\n}: SearchTokenInputProps): JSX.Element => {\n  const { t } = useTranslation()\n  const [value] = useFieldValues('tokenSearchFilter')\n  const { setFieldValue, setAsTouched } = useFieldActions()\n  const [fromChain, toChain] = useFieldValues('fromChain', 'toChain')\n  const isAllNetworks = useChainOrderStore(\n    (state) => state[`${formType}IsAllNetworks`]\n  )\n\n  const onChange = useCallback(\n    (newValue: string | number | undefined) => {\n      setFieldValue('tokenSearchFilter', newValue, {\n        isDirty: true,\n        isTouched: true,\n      })\n    },\n    [setFieldValue]\n  )\n\n  const onBlur = useCallback(() => {\n    setAsTouched('tokenSearchFilter')\n  }, [setAsTouched])\n\n  useEffect(\n    () => () => {\n      setFieldValue('tokenSearchFilter', '')\n    },\n    [setFieldValue]\n  )\n\n  return (\n    <SearchInput\n      // Reset the search input when a chain or the \"All Networks\" is changed\n      key={`${fromChain}-${toChain}-${isAllNetworks}`}\n      name=\"tokenSearchFilter\"\n      placeholder={t('main.tokenSearch')}\n      onChange={(e) => onChange((e.target as HTMLInputElement).value)}\n      onBlur={onBlur}\n      onClear={() => setFieldValue('tokenSearchFilter', '')}\n      value={value as string | undefined}\n      autoFocus\n    />\n  )\n}\n"],"mappings":";;;;;;;;AAYA,MAAa,oBAAoB,EAC/B,eACwC;CACxC,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,CAAC,SAAS,eAAe,oBAAoB;CACnD,MAAM,EAAE,eAAe,iBAAiB,iBAAiB;CACzD,MAAM,CAAC,WAAW,WAAW,eAAe,aAAa,UAAU;CACnE,MAAM,gBAAgB,oBACnB,UAAU,MAAM,GAAG,SAAS,gBAC9B;CAED,MAAM,WAAW,aACd,aAA0C;AACzC,gBAAc,qBAAqB,UAAU;GAC3C,SAAS;GACT,WAAW;GACZ,CAAC;IAEJ,CAAC,cAAc,CAChB;CAED,MAAM,SAAS,kBAAkB;AAC/B,eAAa,oBAAoB;IAChC,CAAC,aAAa,CAAC;AAElB,uBACc;AACV,gBAAc,qBAAqB,GAAG;IAExC,CAAC,cAAc,CAChB;AAED,QACE,oBAAC,aAAD;EAGE,MAAK;EACL,aAAa,EAAE,mBAAmB;EAClC,WAAW,MAAM,SAAU,EAAE,OAA4B,MAAM;EACvD;EACR,eAAe,cAAc,qBAAqB,GAAG;EAC9C;EACP,WAAA;EACA,EARK,GAAG,UAAU,GAAG,QAAQ,GAAG,gBAQhC"}

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

@@ -1,47 +1,48 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, useMediaQuery } from '@mui/material';
-import { useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js';
-import { FullPageContainer } from '../../components/FullPageContainer.js';
-import { TokenList } from '../../components/TokenList/TokenList.js';
-import { useHeader } from '../../hooks/useHeader.js';
-import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.js';
-import { useSwapOnly } from '../../hooks/useSwapOnly.js';
-import { useWideVariant } from '../../hooks/useWideVariant.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { HiddenUI } from '../../types/widget.js';
-import { SearchTokenInput } from './SearchTokenInput.js';
-export const SelectTokenPage = ({ formType }) => {
-    useScrollableOverflowHidden();
-    const headerRef = useRef(null);
-    const swapOnly = useSwapOnly();
-    const { subvariant, hiddenUI, subvariantOptions } = useWidgetConfig();
-    const wideVariant = useWideVariant();
-    const { t } = useTranslation();
-    const title = formType === 'from'
-        ? subvariant === 'custom'
-            ? t('header.payWith')
-            : t('header.from')
-        : t('header.to');
-    useHeader(title);
-    const hideChainSelect = (wideVariant && !subvariantOptions?.wide?.disableChainSidebar) ||
-        (swapOnly && formType === 'to') ||
-        hiddenUI?.includes(HiddenUI.ChainSelect);
-    const isMobile = useMediaQuery((theme) => theme.breakpoints.down(theme.breakpoints.values.xs));
-    const hideSearchTokenInput = hiddenUI?.includes(HiddenUI.SearchTokenInput);
-    const hasHeader = !hideChainSelect || !hideSearchTokenInput;
-    return (_jsxs(FullPageContainer, { disableGutters: true, children: [_jsxs(Box, { ref: headerRef, sx: {
-                    pb: hasHeader ? 2 : 0,
-                    px: 3,
-                }, children: [!hideChainSelect ? _jsx(ChainSelect, { formType: formType }) : null, !hideSearchTokenInput && (_jsx(Box, { sx: {
-                            mt: !hideChainSelect ? 2 : 0,
-                        }, children: _jsx(SearchTokenInput, { formType: formType }) }))] }), _jsx(TokenList
-            // Rerender component if variant changes (since chains tiles change height)
-            , { headerRef: headerRef, formType: formType }, hideChainSelect
-                ? 'without-offset'
-                : isMobile
-                    ? 'with-offset-mobile'
-                    : 'with-offset')] }));
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { HiddenUI } from "../../types/widget.js";
+import { useSwapOnly } from "../../hooks/useSwapOnly.js";
+import { useScrollableOverflowHidden } from "../../hooks/useScrollableContainer.js";
+import { FullPageContainer } from "../../components/FullPageContainer.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 }) => {
+	useScrollableOverflowHidden();
+	const headerRef = useRef(null);
+	const swapOnly = useSwapOnly();
+	const { subvariant, hiddenUI, subvariantOptions } = useWidgetConfig();
+	const wideVariant = useWideVariant();
+	const { t } = useTranslation();
+	useHeader(formType === "from" ? subvariant === "custom" ? t("header.payWith") : t("header.from") : t("header.to"));
+	const hideChainSelect = wideVariant && !subvariantOptions?.wide?.disableChainSidebar || swapOnly && formType === "to" || hiddenUI?.includes(HiddenUI.ChainSelect);
+	const isMobile = useMediaQuery((theme) => theme.breakpoints.down(theme.breakpoints.values.xs));
+	const hideSearchTokenInput = hiddenUI?.includes(HiddenUI.SearchTokenInput);
+	return /* @__PURE__ */ jsxs(FullPageContainer, {
+		disableGutters: true,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			ref: headerRef,
+			sx: {
+				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

@@ -1 +1 @@
-{"version":3,"file":"SelectTokenPage.js","sourceRoot":"","sources":["../../../../src/pages/SelectTokenPage/SelectTokenPage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAc,aAAa,EAAE,MAAM,eAAe,CAAA;AAE9D,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAA;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAA;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAA;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,EAAE,2BAA2B,EAAE,MAAM,uCAAuC,CAAA;AACnF,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAA;AAElF,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAExD,MAAM,CAAC,MAAM,eAAe,GAAsB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACjE,2BAA2B,EAAE,CAAA;IAE7B,MAAM,SAAS,GAAG,MAAM,CAAc,IAAI,CAAC,CAAA;IAE3C,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAE9B,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,iBAAiB,EAAE,GAAG,eAAe,EAAE,CAAA;IACrE,MAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IAEpC,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,KAAK,GACT,QAAQ,KAAK,MAAM;QACjB,CAAC,CAAC,UAAU,KAAK,QAAQ;YACvB,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC;YACrB,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;QACpB,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAA;IAEpB,SAAS,CAAC,KAAK,CAAC,CAAA;IAEhB,MAAM,eAAe,GACnB,CAAC,WAAW,IAAI,CAAC,iBAAiB,EAAE,IAAI,EAAE,mBAAmB,CAAC;QAC9D,CAAC,QAAQ,IAAI,QAAQ,KAAK,IAAI,CAAC;QAC/B,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAA;IAE1C,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC,KAAY,EAAE,EAAE,CAC9C,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC,CACpD,CAAA;IACD,MAAM,oBAAoB,GAAG,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAA;IAE1E,MAAM,SAAS,GAAG,CAAC,eAAe,IAAI,CAAC,oBAAoB,CAAA;IAE3D,OAAO,CACL,MAAC,iBAAiB,IAAC,cAAc,mBAC/B,MAAC,GAAG,IACF,GAAG,EAAE,SAAS,EACd,EAAE,EAAE;oBACF,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBACrB,EAAE,EAAE,CAAC;iBACN,aAEA,CAAC,eAAe,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAAC,CAAC,CAAC,IAAI,EAC7D,CAAC,oBAAoB,IAAI,CACxB,KAAC,GAAG,IACF,EAAE,EAAE;4BACF,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;yBAC7B,YAED,KAAC,gBAAgB,IAAC,QAAQ,EAAE,QAAQ,GAAI,GACpC,CACP,IACG,EACN,KAAC,SAAS;YACR,2EAA2E;gBAQ3E,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,IAPhB,eAAe;gBACb,CAAC,CAAC,gBAAgB;gBAClB,CAAC,CAAC,QAAQ;oBACR,CAAC,CAAC,oBAAoB;oBACtB,CAAC,CAAC,aAAa,CAIrB,IACgB,CACrB,CAAA;AACH,CAAC,CAAA"}
+{"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 { FullPageContainer } from '../../components/FullPageContainer.js'\nimport { TokenList } from '../../components/TokenList/TokenList.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.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 { HiddenUI } from '../../types/widget.js'\nimport { SearchTokenInput } from './SearchTokenInput.js'\n\nexport const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {\n  useScrollableOverflowHidden()\n\n  const headerRef = useRef<HTMLElement>(null)\n\n  const swapOnly = useSwapOnly()\n\n  const { subvariant, hiddenUI, subvariantOptions } = useWidgetConfig()\n  const wideVariant = useWideVariant()\n\n  const { t } = useTranslation()\n  const title =\n    formType === 'from'\n      ? subvariant === 'custom'\n        ? t('header.payWith')\n        : t('header.from')\n      : t('header.to')\n\n  useHeader(title)\n\n  const hideChainSelect =\n    (wideVariant && !subvariantOptions?.wide?.disableChainSidebar) ||\n    (swapOnly && formType === 'to') ||\n    hiddenUI?.includes(HiddenUI.ChainSelect)\n\n  const isMobile = useMediaQuery((theme: Theme) =>\n    theme.breakpoints.down(theme.breakpoints.values.xs)\n  )\n  const hideSearchTokenInput = hiddenUI?.includes(HiddenUI.SearchTokenInput)\n\n  const hasHeader = !hideChainSelect || !hideSearchTokenInput\n\n  return (\n    <FullPageContainer disableGutters>\n      <Box\n        ref={headerRef}\n        sx={{\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    </FullPageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAa,mBAAsC,EAAE,eAAe;AAClE,8BAA6B;CAE7B,MAAM,YAAY,OAAoB,KAAK;CAE3C,MAAM,WAAW,aAAa;CAE9B,MAAM,EAAE,YAAY,UAAU,sBAAsB,iBAAiB;CACrE,MAAM,cAAc,gBAAgB;CAEpC,MAAM,EAAE,MAAM,gBAAgB;AAQ9B,WANE,aAAa,SACT,eAAe,WACb,EAAE,iBAAiB,GACnB,EAAE,cAAc,GAClB,EAAE,YAAY,CAEJ;CAEhB,MAAM,kBACH,eAAe,CAAC,mBAAmB,MAAM,uBACzC,YAAY,aAAa,QAC1B,UAAU,SAAS,SAAS,YAAY;CAE1C,MAAM,WAAW,eAAe,UAC9B,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,CACpD;CACD,MAAM,uBAAuB,UAAU,SAAS,SAAS,iBAAiB;AAI1E,QACE,qBAAC,mBAAD;EAAmB,gBAAA;YAAnB,CACE,qBAAC,KAAD;GACE,KAAK;GACL,IAAI;IACF,IAPU,CAAC,mBAAmB,CAAC,uBAOf,IAAI;IACpB,IAAI;IACL;aALH,CAOG,CAAC,kBAAkB,oBAAC,aAAD,EAAuB,UAAY,CAAA,GAAG,MACzD,CAAC,wBACA,oBAAC,KAAD;IACE,IAAI,EACF,IAAI,CAAC,kBAAkB,IAAI,GAC5B;cAED,oBAAC,kBAAD,EAA4B,UAAY,CAAA;IACpC,CAAA,CAEJ;MACN,oBAAC,WAAD;GASa;GACD;GACV,EARE,kBACI,mBACA,WACE,uBACA,cAIR,CACgB"}

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

@@ -1,117 +1,176 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ErrorIcon from '@mui/icons-material/Error';
-import TurnedIn from '@mui/icons-material/TurnedIn';
-import WarningRounded from '@mui/icons-material/WarningRounded';
-import { Button, Typography } from '@mui/material';
-import { forwardRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
-import { Input } from '../../components/Input.js';
-import { AlertMessage } from '../../components/Messages/AlertMessage.js';
-import { useAddressValidation } from '../../hooks/useAddressValidation.js';
-import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
-import { AddressInput, BookmarkInputFields, IconContainer, SendToWalletButtonRow, SendToWalletCard, SendToWalletSheetContainer, SheetAddressContainer, SheetTitle, ValidationAlert, } from './SendToWalletPage.style.js';
-export 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(undefined);
-        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(undefined);
-        }
-        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;
-        }
-        //  If the validatedWallet is supplied as a prop then we should assume
-        //  the address has already been validated
-        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(undefined);
-        }
-        setAddress(e.target.value.trim());
-    };
-    const handleNameInputChange = (e) => {
-        if (error) {
-            setError(undefined);
-        }
-        setName(e.target.value);
-    };
-    const resetValues = () => {
-        setName('');
-        setAddress('');
-    };
-    return (_jsx(BottomSheet, { ref: ref, onClose: resetValues, children: _jsxs(SendToWalletSheetContainer, { children: [_jsx(IconContainer, { children: _jsx(TurnedIn, { sx: { fontSize: 40 } }) }), _jsx(SheetTitle, { children: t('sendToWallet.bookmarkWallet') }), validatedWallet ? (_jsxs(SheetAddressContainer, { children: [validatedWallet?.name ? (_jsx(Typography, { sx: {
-                                fontWeight: 600,
-                                mb: 0.5,
-                            }, children: validatedWallet?.name })) : null, _jsx(Typography, { children: validatedWallet?.address })] })) : null, _jsxs(BookmarkInputFields, { children: [_jsx(SendToWalletCard, { type: error?.type === 'name' ? 'error' : 'default', children: _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 && (_jsx(SendToWalletCard, { type: error?.type === 'address' ? 'error' : 'default', children: _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 ? (_jsx(ValidationAlert, { icon: _jsx(ErrorIcon, {}), children: error.message })) : null] }), _jsx(AlertMessage, { title: _jsx(Typography, { variant: "body2", sx: { color: 'text.primary' }, children: t('warning.message.fundsLossPrevention') }), icon: _jsx(WarningRounded, {}) }), _jsxs(SendToWalletButtonRow, { children: [_jsx(Button, { variant: "text", onClick: handleCancel, fullWidth: true, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: handleBookmark, loading: isValidating, loadingPosition: "center", fullWidth: true, focusRipple: true, children: t('button.bookmark') })] })] }) }));
+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

@@ -1 +1 @@
-{"version":3,"file":"BookmarkAddressSheet.js","sourceRoot":"","sources":["../../../../src/pages/SendToWallet/BookmarkAddressSheet.tsx"],"names":[],"mappings":"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"}
+{"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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"}