@lifi/widget 4.0.0-beta.9 → 4.0.0

package/dist/esm/pages/SelectEnabledToolsPage.js

@@ -1,57 +1,105 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Checkbox, debounce, Tooltip } from '@mui/material';
-import { memo, useCallback, useMemo, useState, } from 'react';
-import { useTranslation } from 'react-i18next';
-import { FullPageContainer } from '../components/FullPageContainer.js';
-import { StickySearchInput } from '../components/Search/SearchInput.js';
-import { Tools } from '../components/Tools/Tools.js';
-import { useDefaultElementId } from '../hooks/useDefaultElementId.js';
-import { useHeader } from '../hooks/useHeader.js';
-import { useScrollableContainer } from '../hooks/useScrollableContainer.js';
-import { useTools } from '../hooks/useTools.js';
-import { useSettingsStore } from '../stores/settings/SettingsStore.js';
-import { useSettingsActions } from '../stores/settings/useSettingsActions.js';
-const SelectAllCheckbox = memo(({ allCheckboxesSelected, anyCheckboxesSelected, noCheckboxesAvailable, onClick, }) => {
-    const { t } = useTranslation();
-    const tooltipTitle = noCheckboxesAvailable
-        ? undefined
-        : allCheckboxesSelected
-            ? t('tooltip.deselectAll')
-            : t('tooltip.selectAll');
-    return (_jsx(Tooltip, { title: tooltipTitle, children: _jsx(Checkbox, { id: "select-all", checked: allCheckboxesSelected, indeterminate: anyCheckboxesSelected && !allCheckboxesSelected, onChange: onClick, disabled: noCheckboxesAvailable, sx: { mr: -1.5 } }) }));
+import { useSettingsStore } from "../stores/settings/SettingsStore.js";
+import { useSettingsActions } from "../stores/settings/useSettingsActions.js";
+import { PageContainer } from "../components/PageContainer.js";
+import { SearchInput } from "../components/Search/SearchInput.js";
+import { useTools } from "../hooks/useTools.js";
+import { useHeader } from "../hooks/useHeader.js";
+import { useListHeight } from "../hooks/useListHeight.js";
+import { Tools } from "../components/Tools/Tools.js";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
+import { Box, Checkbox, Tooltip, debounce } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/SelectEnabledToolsPage.tsx
+const SelectAllCheckbox = memo(({ allCheckboxesSelected, anyCheckboxesSelected, noCheckboxesAvailable, onClick }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title: noCheckboxesAvailable ? void 0 : allCheckboxesSelected ? t("tooltip.deselectAll") : t("tooltip.selectAll"),
+		children: /* @__PURE__ */ jsx(Checkbox, {
+			id: "select-all",
+			checked: allCheckboxesSelected,
+			indeterminate: anyCheckboxesSelected && !allCheckboxesSelected,
+			onChange: onClick,
+			disabled: noCheckboxesAvailable,
+			sx: {
+				mr: -1.5,
+				height: 20
+			}
+		})
+	});
 });
-export const SelectEnabledToolsPage = ({ type }) => {
-    const typeKey = type.toLowerCase();
-    const { tools } = useTools();
-    const { toggleToolKeys } = useSettingsActions();
-    const disabledTools = useSettingsStore((state) => state[`disabled${type}`]);
-    const { t } = useTranslation();
-    const elementId = useDefaultElementId();
-    const scrollableContainer = useScrollableContainer(elementId);
-    const [searchValue, setSearchValue] = useState('');
-    const filteredTools = useMemo(() => {
-        const toolsList = tools?.[typeKey] ?? [];
-        if (!searchValue) {
-            return toolsList;
-        }
-        const lowerSearchValue = searchValue.toLowerCase();
-        return toolsList.filter((tool) => tool.name.toLowerCase().includes(lowerSearchValue));
-    }, [tools, typeKey, searchValue]);
-    const handleSelectAll = useCallback(() => {
-        toggleToolKeys(type, filteredTools.map((tool) => tool.key));
-    }, [toggleToolKeys, type, filteredTools]);
-    const headerAction = useMemo(() => (_jsx(SelectAllCheckbox, { allCheckboxesSelected: !!filteredTools.length &&
-            filteredTools.every((tool) => !disabledTools.includes(tool.key)), anyCheckboxesSelected: !!filteredTools.length &&
-            filteredTools.some((tool) => disabledTools.includes(tool.key)), noCheckboxesAvailable: !filteredTools.length, onClick: handleSelectAll })), [disabledTools, handleSelectAll, filteredTools]);
-    useHeader(t(`settings.enabled${type}`), headerAction);
-    const handleSearchInputChange = useCallback((e) => {
-        const value = e.target.value;
-        setSearchValue(value);
-        if (scrollableContainer) {
-            scrollableContainer.scrollTop = 0;
-        }
-    }, [scrollableContainer]);
-    const debouncedSearchInputChange = debounce(handleSearchInputChange, 250);
-    return (_jsxs(FullPageContainer, { disableGutters: true, children: [_jsx(StickySearchInput, { onChange: debouncedSearchInputChange, placeholder: t(`main.search${type}`) }), _jsx(Tools, { filteredTools: filteredTools, type: type })] }));
+const SelectEnabledToolsPage = ({ type }) => {
+	const typeKey = type.toLowerCase();
+	const { tools } = useTools();
+	const { toggleToolKeys } = useSettingsActions();
+	const disabledTools = useSettingsStore((state) => state[`disabled${type}`]);
+	const { t } = useTranslation();
+	const headerRef = useRef(null);
+	const listRef = useRef(null);
+	const [searchValue, setSearchValue] = useState("");
+	const { listHeight } = useListHeight({
+		listParentRef: listRef,
+		headerRef
+	});
+	const filteredTools = useMemo(() => {
+		const toolsList = tools?.[typeKey] ?? [];
+		if (!searchValue) return toolsList;
+		const lowerSearchValue = searchValue.toLowerCase();
+		return toolsList.filter((tool) => tool.name.toLowerCase().includes(lowerSearchValue));
+	}, [
+		tools,
+		typeKey,
+		searchValue
+	]);
+	const handleSelectAll = useCallback(() => {
+		toggleToolKeys(type, filteredTools.map((tool) => tool.key));
+	}, [
+		toggleToolKeys,
+		type,
+		filteredTools
+	]);
+	const headerAction = useMemo(() => /* @__PURE__ */ jsx(SelectAllCheckbox, {
+		allCheckboxesSelected: !!filteredTools.length && filteredTools.every((tool) => !disabledTools.includes(tool.key)),
+		anyCheckboxesSelected: !!filteredTools.length && filteredTools.some((tool) => disabledTools.includes(tool.key)),
+		noCheckboxesAvailable: !filteredTools.length,
+		onClick: handleSelectAll
+	}), [
+		disabledTools,
+		handleSelectAll,
+		filteredTools
+	]);
+	useHeader(t(`settings.enabled${type}`), headerAction);
+	return /* @__PURE__ */ jsxs(PageContainer, {
+		disableGutters: true,
+		children: [/* @__PURE__ */ jsx(Box, {
+			ref: headerRef,
+			sx: {
+				px: 3,
+				pb: 2,
+				pt: 1.5
+			},
+			children: /* @__PURE__ */ jsx(SearchInput, {
+				onChange: debounce(useCallback((e) => {
+					setSearchValue(e.target.value);
+					listRef.current?.scrollTo(0, 0);
+				}, []), 250),
+				placeholder: t(`main.search${type}`),
+				autoFocus: true
+			})
+		}), /* @__PURE__ */ jsx(Box, {
+			ref: listRef,
+			style: {
+				height: listHeight,
+				overflow: "auto"
+			},
+			children: /* @__PURE__ */ jsx(Tools, {
+				filteredTools,
+				type
+			})
+		})]
+	});
 };
+//#endregion
+export { SelectEnabledToolsPage };
+
 //# sourceMappingURL=SelectEnabledToolsPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectEnabledToolsPage.js","sourceRoot":"","sources":["../../../src/pages/SelectEnabledToolsPage.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectEnabledToolsPage.js","names":[],"sources":["../../../src/pages/SelectEnabledToolsPage.tsx"],"sourcesContent":["import { Box, Checkbox, debounce, Tooltip } from '@mui/material'\nimport type { ChangeEvent, ChangeEventHandler } from 'react'\nimport { memo, useCallback, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { PageContainer } from '../components/PageContainer.js'\nimport { SearchInput } from '../components/Search/SearchInput.js'\nimport { type ToolCollectionTypes, Tools } from '../components/Tools/Tools.js'\nimport { useHeader } from '../hooks/useHeader.js'\nimport { useListHeight } from '../hooks/useListHeight.js'\nimport { useTools } from '../hooks/useTools.js'\nimport { useSettingsStore } from '../stores/settings/SettingsStore.js'\nimport { useSettingsActions } from '../stores/settings/useSettingsActions.js'\n\ninterface SelectAllCheckboxProps {\n  allCheckboxesSelected: boolean\n  onClick: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void\n  anyCheckboxesSelected: boolean\n  noCheckboxesAvailable: boolean\n}\n\nconst SelectAllCheckbox = memo<SelectAllCheckboxProps>(\n  ({\n    allCheckboxesSelected,\n    anyCheckboxesSelected,\n    noCheckboxesAvailable,\n    onClick,\n  }) => {\n    const { t } = useTranslation()\n    const tooltipTitle = noCheckboxesAvailable\n      ? undefined\n      : allCheckboxesSelected\n        ? t('tooltip.deselectAll')\n        : t('tooltip.selectAll')\n\n    return (\n      <Tooltip title={tooltipTitle}>\n        <Checkbox\n          id=\"select-all\"\n          checked={allCheckboxesSelected}\n          indeterminate={anyCheckboxesSelected && !allCheckboxesSelected}\n          onChange={onClick}\n          disabled={noCheckboxesAvailable}\n          sx={{ mr: -1.5, height: 20 }}\n        />\n      </Tooltip>\n    )\n  }\n)\n\nexport const SelectEnabledToolsPage: React.FC<{\n  type: 'Bridges' | 'Exchanges'\n}> = ({ type }) => {\n  const typeKey = type.toLowerCase() as 'bridges' | 'exchanges'\n  const { tools } = useTools()\n  const { toggleToolKeys } = useSettingsActions()\n\n  const disabledTools = useSettingsStore((state) => state[`disabled${type}`])\n\n  const { t } = useTranslation()\n  const headerRef = useRef<HTMLElement>(null)\n  const listRef = useRef<HTMLDivElement>(null)\n  const [searchValue, setSearchValue] = useState('')\n\n  const { listHeight } = useListHeight({\n    listParentRef: listRef,\n    headerRef,\n  })\n\n  const filteredTools = useMemo(() => {\n    const toolsList = tools?.[typeKey] ?? []\n\n    if (!searchValue) {\n      return toolsList\n    }\n\n    const lowerSearchValue = searchValue.toLowerCase()\n    return toolsList.filter((tool) =>\n      tool.name.toLowerCase().includes(lowerSearchValue)\n    ) as ToolCollectionTypes\n  }, [tools, typeKey, searchValue])\n\n  const handleSelectAll = useCallback(() => {\n    toggleToolKeys(\n      type,\n      filteredTools.map((tool) => tool.key)\n    )\n  }, [toggleToolKeys, type, filteredTools])\n\n  const headerAction = useMemo(\n    () => (\n      <SelectAllCheckbox\n        allCheckboxesSelected={\n          !!filteredTools.length &&\n          filteredTools.every((tool) => !disabledTools.includes(tool.key))\n        }\n        anyCheckboxesSelected={\n          !!filteredTools.length &&\n          filteredTools.some((tool) => disabledTools.includes(tool.key))\n        }\n        noCheckboxesAvailable={!filteredTools.length}\n        onClick={handleSelectAll}\n      />\n    ),\n    [disabledTools, handleSelectAll, filteredTools]\n  )\n\n  useHeader(t(`settings.enabled${type}`), headerAction)\n\n  const handleSearchInputChange: ChangeEventHandler<HTMLInputElement> =\n    useCallback((e) => {\n      setSearchValue(e.target.value)\n      listRef.current?.scrollTo(0, 0)\n    }, [])\n\n  const debouncedSearchInputChange = debounce(handleSearchInputChange, 250)\n\n  return (\n    <PageContainer disableGutters>\n      <Box ref={headerRef} sx={{ px: 3, pb: 2, pt: 1.5 }}>\n        <SearchInput\n          onChange={debouncedSearchInputChange}\n          placeholder={t(`main.search${type}`)}\n          autoFocus\n        />\n      </Box>\n      <Box ref={listRef} style={{ height: listHeight, overflow: 'auto' }}>\n        <Tools filteredTools={filteredTools} type={type} />\n      </Box>\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,oBAAoB,MACvB,EACC,uBACA,uBACA,uBACA,cACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAO7B,OACE,oBAAC,SAAD;EAAS,OAPU,wBACjB,KAAA,IACA,wBACE,EAAE,qBAAqB,IACvB,EAAE,mBAAmB;YAIvB,oBAAC,UAAD;GACE,IAAG;GACH,SAAS;GACT,eAAe,yBAAyB,CAAC;GACzC,UAAU;GACV,UAAU;GACV,IAAI;IAAE,IAAI;IAAM,QAAQ;GAAG;EAC5B,CAAA;CACM,CAAA;AAEb,CACF;AAEA,MAAa,0BAEP,EAAE,WAAW;CACjB,MAAM,UAAU,KAAK,YAAY;CACjC,MAAM,EAAE,UAAU,SAAS;CAC3B,MAAM,EAAE,mBAAmB,mBAAmB;CAE9C,MAAM,gBAAgB,kBAAkB,UAAU,MAAM,WAAW,OAAO;CAE1E,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,YAAY,OAAoB,IAAI;CAC1C,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;CAEjD,MAAM,EAAE,eAAe,cAAc;EACnC,eAAe;EACf;CACF,CAAC;CAED,MAAM,gBAAgB,cAAc;EAClC,MAAM,YAAY,QAAQ,YAAY,CAAC;EAEvC,IAAI,CAAC,aACH,OAAO;EAGT,MAAM,mBAAmB,YAAY,YAAY;EACjD,OAAO,UAAU,QAAQ,SACvB,KAAK,KAAK,YAAY,EAAE,SAAS,gBAAgB,CACnD;CACF,GAAG;EAAC;EAAO;EAAS;CAAW,CAAC;CAEhC,MAAM,kBAAkB,kBAAkB;EACxC,eACE,MACA,cAAc,KAAK,SAAS,KAAK,GAAG,CACtC;CACF,GAAG;EAAC;EAAgB;EAAM;CAAa,CAAC;CAExC,MAAM,eAAe,cAEjB,oBAAC,mBAAD;EACE,uBACE,CAAC,CAAC,cAAc,UAChB,cAAc,OAAO,SAAS,CAAC,cAAc,SAAS,KAAK,GAAG,CAAC;EAEjE,uBACE,CAAC,CAAC,cAAc,UAChB,cAAc,MAAM,SAAS,cAAc,SAAS,KAAK,GAAG,CAAC;EAE/D,uBAAuB,CAAC,cAAc;EACtC,SAAS;CACV,CAAA,GAEH;EAAC;EAAe;EAAiB;CAAa,CAChD;CAEA,UAAU,EAAE,mBAAmB,MAAM,GAAG,YAAY;CAUpD,OACE,qBAAC,eAAD;EAAe,gBAAA;YAAf,CACE,oBAAC,KAAD;GAAK,KAAK;GAAW,IAAI;IAAE,IAAI;IAAG,IAAI;IAAG,IAAI;GAAI;aAC/C,oBAAC,aAAD;IACE,UAN2B,SALjC,aAAa,MAAM;KACjB,eAAe,EAAE,OAAO,KAAK;KAC7B,QAAQ,SAAS,SAAS,GAAG,CAAC;IAChC,GAAG,CAAC,CAE4D,GAAG,GAM1B;IACnC,aAAa,EAAE,cAAc,MAAM;IACnC,WAAA;GACD,CAAA;EACE,CAAA,GACL,oBAAC,KAAD;GAAK,KAAK;GAAS,OAAO;IAAE,QAAQ;IAAY,UAAU;GAAO;aAC/D,oBAAC,OAAD;IAAsB;IAAqB;GAAO,CAAA;EAC/C,CAAA,CACQ;;AAEnB"}

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 { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { useChainOrderStore } from "../../stores/chains/ChainOrderStore.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.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,eAAe;CAC7B,MAAM,CAAC,SAAS,eAAe,mBAAmB;CAClD,MAAM,EAAE,eAAe,iBAAiB,gBAAgB;CACxD,MAAM,CAAC,WAAW,WAAW,eAAe,aAAa,SAAS;CAClE,MAAM,gBAAgB,oBACnB,UAAU,MAAM,GAAG,SAAS,eAC/B;CAEA,MAAM,WAAW,aACd,aAA0C;EACzC,cAAc,qBAAqB,UAAU;GAC3C,SAAS;GACT,WAAW;EACb,CAAC;CACH,GACA,CAAC,aAAa,CAChB;CAEA,MAAM,SAAS,kBAAkB;EAC/B,aAAa,mBAAmB;CAClC,GAAG,CAAC,YAAY,CAAC;CAEjB,sBACc;EACV,cAAc,qBAAqB,EAAE;CACvC,GACA,CAAC,aAAa,CAChB;CAEA,OACE,oBAAC,aAAD;EAGE,MAAK;EACL,aAAa,EAAE,kBAAkB;EACjC,WAAW,MAAM,SAAU,EAAE,OAA4B,KAAK;EACtD;EACR,eAAe,cAAc,qBAAqB,EAAE;EAC7C;EACP,WAAA;CACD,GARM,GAAG,UAAU,GAAG,QAAQ,GAAG,eAQjC;AAEL"}

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

@@ -1,47 +1,46 @@
-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 { 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

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