@multiversx/sdk-dapp-liquidity 0.2.0-alpha.1

package/reactjs/components/TokenSelector/components/ChainSelect/components/ChainOptionLabel.js

@@ -0,0 +1,45 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const allNetworks = require("../../../../../../all-networks-NYACMyeN.js");
+require("../../../../../constants/index.js");
+const reactjs_constants_chains = require("../../../../../constants/chains.js");
+const ChainOptionLabel = ({
+  chain,
+  inDropdown = false
+}) => {
+  const inDropdownClass = inDropdown ? "in-dropdown" : "hidden md:flex";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `chain-element liq-flex liq-items-center liq-justify-between`,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-flex-row liq-items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `chain-image liq-mr-2 ${inDropdownClass}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-h-6 liq-w-6 liq-flex-shrink-0 liq-overflow-hidden", children: chain.svgUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: chain.svgUrl ?? reactjs_constants_chains.chainIdentifier[chain.name],
+            alt: "",
+            loading: "lazy",
+            className: "liq-h-full liq-w-full"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: allNetworks.AllNetworks,
+            alt: "",
+            className: "liq-h-full liq-w-full"
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex liq-flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex liq-items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "chain-name liq-flex liq-items-center liq-gap-2 liq-whitespace-nowrap",
+            children: chain.networkName
+          }
+        ) }) })
+      ] })
+    }
+  );
+};
+exports.ChainOptionLabel = ChainOptionLabel;

package/reactjs/components/TokenSelector/components/ChainSelect/components/ChainOptionLabel.mjs

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { A as AllNetworks } from "../../../../../../all-networks-EJIVYZ_i.mjs";
+import "../../../../../constants/index.mjs";
+import { chainIdentifier } from "../../../../../constants/chains.mjs";
+const ChainOptionLabel = ({
+  chain,
+  inDropdown = false
+}) => {
+  const inDropdownClass = inDropdown ? "in-dropdown" : "hidden md:flex";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `chain-element liq-flex liq-items-center liq-justify-between`,
+      children: /* @__PURE__ */ jsxs("div", { className: "liq-flex liq-flex-row liq-items-center", children: [
+        /* @__PURE__ */ jsx("div", { className: `chain-image liq-mr-2 ${inDropdownClass}`, children: /* @__PURE__ */ jsx("div", { className: "liq-h-6 liq-w-6 liq-flex-shrink-0 liq-overflow-hidden", children: chain.svgUrl ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: chain.svgUrl ?? chainIdentifier[chain.name],
+            alt: "",
+            loading: "lazy",
+            className: "liq-h-full liq-w-full"
+          }
+        ) : /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: AllNetworks,
+            alt: "",
+            className: "liq-h-full liq-w-full"
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx("div", { className: "liq-flex liq-flex-col", children: /* @__PURE__ */ jsx("div", { className: "liq-flex liq-items-center", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "chain-name liq-flex liq-items-center liq-gap-2 liq-whitespace-nowrap",
+            children: chain.networkName
+          }
+        ) }) })
+      ] })
+    }
+  );
+};
+export {
+  ChainOptionLabel
+};

package/reactjs/components/TokenSelector/components/ChainSelect/components/FormatChainOptionLabel.d.ts

@@ -0,0 +1,6 @@
+import { ChainSelectOptionType } from '../types/chainSelectOption';
+import { FormatOptionLabelContext } from 'react-select';
+
+export declare const FormatChainOptionLabel: (option: ChainSelectOptionType, { context }: {
+    context: FormatOptionLabelContext;
+}) => import("react/jsx-runtime").JSX.Element;

package/reactjs/components/TokenSelector/components/ChainSelect/components/FormatChainOptionLabel.js

@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactjs_components_TokenSelector_components_ChainSelect_components_ChainOptionLabel = require("./ChainOptionLabel.js");
+const reactjs_components_SmallLoader_SmallLoader = require("../../../../SmallLoader/SmallLoader.js");
+const FormatChainOptionLabel = (option, { context }) => {
+  const { chain } = option;
+  const inDropdown = context === "menu";
+  const args = {
+    chain,
+    inDropdown
+  };
+  if (option.value === "loader") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex liq-justify-center liq-py-5", children: /* @__PURE__ */ jsxRuntime.jsx(reactjs_components_SmallLoader_SmallLoader.SmallLoader, { show: true }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactjs_components_TokenSelector_components_ChainSelect_components_ChainOptionLabel.ChainOptionLabel, { ...args });
+};
+exports.FormatChainOptionLabel = FormatChainOptionLabel;

package/reactjs/components/TokenSelector/components/ChainSelect/components/FormatChainOptionLabel.mjs

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { ChainOptionLabel } from "./ChainOptionLabel.mjs";
+import { SmallLoader } from "../../../../SmallLoader/SmallLoader.mjs";
+const FormatChainOptionLabel = (option, { context }) => {
+  const { chain } = option;
+  const inDropdown = context === "menu";
+  const args = {
+    chain,
+    inDropdown
+  };
+  if (option.value === "loader") {
+    return /* @__PURE__ */ jsx("div", { className: "liq-flex liq-justify-center liq-py-5", children: /* @__PURE__ */ jsx(SmallLoader, { show: true }) });
+  }
+  return /* @__PURE__ */ jsx(ChainOptionLabel, { ...args });
+};
+export {
+  FormatChainOptionLabel
+};

package/reactjs/components/TokenSelector/components/ChainSelect/components/IndicatorSeparator.d.ts

@@ -0,0 +1,3 @@
+export declare const IndicatorSeparator: () => {
+    display: string;
+};

package/reactjs/components/TokenSelector/components/ChainSelect/components/IndicatorSeparator.js

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const IndicatorSeparator = () => {
+  return { display: "none" };
+};
+exports.IndicatorSeparator = IndicatorSeparator;

package/reactjs/components/TokenSelector/components/ChainSelect/components/IndicatorSeparator.mjs

@@ -0,0 +1,6 @@
+const IndicatorSeparator = () => {
+  return { display: "none" };
+};
+export {
+  IndicatorSeparator
+};

package/reactjs/components/TokenSelector/components/ChainSelect/components/SelectedChainOption.d.ts

@@ -0,0 +1,4 @@
+import { PartialChainOptionType } from '../types/partialChainOption';
+import { SingleValueProps } from 'react-select';
+
+export declare const SelectedChainOption: ({ ...props }: SingleValueProps<PartialChainOptionType>) => import("react/jsx-runtime").JSX.Element;

package/reactjs/components/TokenSelector/components/ChainSelect/components/SelectedChainOption.js

@@ -0,0 +1,33 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Select = require("react-select");
+const allNetworks = require("../../../../../../all-networks-NYACMyeN.js");
+require("../../../../../constants/index.js");
+const reactjs_constants_chains = require("../../../../../constants/chains.js");
+const SelectedChainOption = ({
+  ...props
+}) => {
+  const {
+    selectProps: { onMenuOpen },
+    data: { chain }
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(Select.components.SingleValue, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "liq-w-full liq-flex liq-justify-between liq-items-center liq-cursor-pointer",
+      onClick: onMenuOpen,
+      children: (chain == null ? void 0 : chain.svgUrl) ? /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: chain.svgUrl ?? reactjs_constants_chains.chainIdentifier[chain.name],
+          alt: "",
+          loading: "lazy",
+          className: "liq-h-full liq-w-full"
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("img", { src: allNetworks.AllNetworks, alt: "", className: "liq-h-full liq-w-full" })
+    }
+  ) });
+};
+exports.SelectedChainOption = SelectedChainOption;

package/reactjs/components/TokenSelector/components/ChainSelect/components/SelectedChainOption.mjs

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { components } from "react-select";
+import { A as AllNetworks } from "../../../../../../all-networks-EJIVYZ_i.mjs";
+import "../../../../../constants/index.mjs";
+import { chainIdentifier } from "../../../../../constants/chains.mjs";
+const SelectedChainOption = ({
+  ...props
+}) => {
+  const {
+    selectProps: { onMenuOpen },
+    data: { chain }
+  } = props;
+  return /* @__PURE__ */ jsx(components.SingleValue, { ...props, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "liq-w-full liq-flex liq-justify-between liq-items-center liq-cursor-pointer",
+      onClick: onMenuOpen,
+      children: (chain == null ? void 0 : chain.svgUrl) ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: chain.svgUrl ?? chainIdentifier[chain.name],
+          alt: "",
+          loading: "lazy",
+          className: "liq-h-full liq-w-full"
+        }
+      ) : /* @__PURE__ */ jsx("img", { src: AllNetworks, alt: "", className: "liq-h-full liq-w-full" })
+    }
+  ) });
+};
+export {
+  SelectedChainOption
+};

package/reactjs/components/TokenSelector/components/ChainSelect/types/chainSelectOption.d.ts

@@ -0,0 +1,10 @@
+export type ChainSelectOptionType = {
+    label: string;
+    value: string;
+    chain: {
+        id: string;
+        name: string;
+        networkName: string;
+        svgUrl?: string;
+    };
+};

package/reactjs/components/TokenSelector/components/ChainSelect/types/chainSelectOption.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+"use strict";

package/reactjs/components/TokenSelector/components/ChainSelect/types/chainSelectOption.mjs

@@ -0,0 +1 @@
+

package/reactjs/components/TokenSelector/components/ChainSelect/types/partialChainOption.d.ts

@@ -0,0 +1,10 @@
+export type PartialChainOptionType = {
+    label: string;
+    value: string;
+    chain: {
+        id: string;
+        name: string;
+        networkName: string;
+        svgUrl: string;
+    };
+};

package/reactjs/components/TokenSelector/components/ChainSelect/types/partialChainOption.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+"use strict";

package/reactjs/components/TokenSelector/components/ChainSelect/types/partialChainOption.mjs

@@ -0,0 +1 @@
+

package/reactjs/components/TokenSelector/components/SelectContainer.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+export declare const SelectContainer: ({ children, className, onClose }: {
+    className?: string;
+    children?: ReactNode;
+    onClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/reactjs/components/TokenSelector/components/SelectContainer.js

@@ -0,0 +1,41 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const faClose = require("@fortawesome/free-solid-svg-icons/faClose");
+const reactFontawesome = require("@fortawesome/react-fontawesome");
+const reactjs_utils_mxClsx = require("../../../utils/mxClsx.js");
+const reactjs_components_base_MxButton_MxButton = require("../../base/MxButton/MxButton.js");
+const reactjs_components_base_MxCard_MxCard = require("../../base/MxCard/MxCard.js");
+const SelectContainer = ({
+  children,
+  className,
+  onClose
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactjs_components_base_MxCard_MxCard.MxCard,
+    {
+      className: reactjs_utils_mxClsx.mxClsx(
+        "liq-flex liq-flex-col liq-absolute liq-left-0 liq-top-0 liq-order-1 liq-mx-auto liq-w-full liq-gap-1 liq-pt-12 lg:liq-order-2 lg:liq-max-w-[27.5rem] !liq-min-h-[26rem] !lg:liq-pt-0 !liq-bg-neutral-850 !liq-z-[15] !liq-p-2 !liq-pointer-events-auto",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-items-center liq-justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex liq-flex-1 liq-items-center liq-justify-center liq-text-center liq-text-lg", children: "Select a token" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactjs_components_base_MxButton_MxButton.MxButton,
+            {
+              btnSize: "md",
+              className: "liq-border-none !liq-px-2",
+              variant: "link-neutral-500",
+              onClick: onClose,
+              children: /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: faClose.faClose, size: "xl" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "!liq-flex !liq-flex-1 !liq-flex-col !liq-gap-1", children })
+      ]
+    }
+  );
+};
+exports.SelectContainer = SelectContainer;

package/reactjs/components/TokenSelector/components/SelectContainer.mjs

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { faClose } from "@fortawesome/free-solid-svg-icons/faClose";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { mxClsx } from "../../../utils/mxClsx.mjs";
+import { MxButton } from "../../base/MxButton/MxButton.mjs";
+import { MxCard } from "../../base/MxCard/MxCard.mjs";
+const SelectContainer = ({
+  children,
+  className,
+  onClose
+}) => {
+  return /* @__PURE__ */ jsxs(
+    MxCard,
+    {
+      className: mxClsx(
+        "liq-flex liq-flex-col liq-absolute liq-left-0 liq-top-0 liq-order-1 liq-mx-auto liq-w-full liq-gap-1 liq-pt-12 lg:liq-order-2 lg:liq-max-w-[27.5rem] !liq-min-h-[26rem] !lg:liq-pt-0 !liq-bg-neutral-850 !liq-z-[15] !liq-p-2 !liq-pointer-events-auto",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "liq-flex liq-items-center liq-justify-between", children: [
+          /* @__PURE__ */ jsx("div", { className: "liq-flex liq-flex-1 liq-items-center liq-justify-center liq-text-center liq-text-lg", children: "Select a token" }),
+          /* @__PURE__ */ jsx(
+            MxButton,
+            {
+              btnSize: "md",
+              className: "liq-border-none !liq-px-2",
+              variant: "link-neutral-500",
+              onClick: onClose,
+              children: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faClose, size: "xl" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "!liq-flex !liq-flex-1 !liq-flex-col !liq-gap-1", children })
+      ]
+    }
+  );
+};
+export {
+  SelectContainer
+};

package/reactjs/components/TokenSelector/components/SelectContent.d.ts

@@ -0,0 +1,10 @@
+import { TokenType } from '../../../../types/token';
+import { ChainDTO } from '../../../../dto/Chain.dto';
+
+export declare const SelectContent: ({ onSelect, tokens, chains, areChainsLoading, selectedToken }: {
+    onSelect: (token: TokenType) => void;
+    tokens: TokenType[];
+    chains: ChainDTO[];
+    areChainsLoading?: boolean;
+    selectedToken?: TokenType;
+}) => import("react/jsx-runtime").JSX.Element;

package/reactjs/components/TokenSelector/components/SelectContent.js

@@ -0,0 +1,93 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const require$$0 = require("react");
+const reactjs_components_TokenSelector_components_ChainSelect_ChainSelect = require("./ChainSelect/ChainSelect.js");
+const reactjs_components_TokenSelector_components_TokenList = require("./TokenList.js");
+const reactjs_hooks_useGetChainId = require("../../../hooks/useGetChainId.js");
+const reactjs_components_base_MxSearch_MxSearch = require("../../base/MxSearch/MxSearch.js");
+const SelectContent = ({
+  onSelect,
+  tokens = [],
+  chains = [],
+  areChainsLoading,
+  selectedToken
+}) => {
+  const [filteredTokens, setFilteredTokens] = require$$0.useState(tokens);
+  const [selected, setSelected] = require$$0.useState(selectedToken);
+  const searchPatternRef = require$$0.useRef("");
+  const activeChainId = reactjs_hooks_useGetChainId.useGetChainId();
+  const [selectedChainId, setSelectedChainId] = require$$0.useState(
+    (activeChainId == null ? void 0 : activeChainId.toString()) ?? "0"
+  );
+  const filteredTokensText = require$$0.useMemo(() => {
+    const selectedChain = chains.find(
+      (chain) => chain.chainId.toString() === selectedChainId
+    );
+    if (!selectedChain) {
+      return `Tokens on all networks (${tokens.length})`;
+    }
+    return `Tokens on ${selectedChain.networkName} (${filteredTokens.length})`;
+  }, [chains, filteredTokens.length, selectedChainId, tokens.length]);
+  const handleSelect = (token) => {
+    setSelected(token);
+    onSelect(token);
+  };
+  const handleSearch = (pattern) => {
+    searchPatternRef.current = pattern;
+    if (selectedChainId === "0") {
+      const filtered2 = tokens.filter(
+        (token) => token.symbol.toLowerCase().includes(pattern.toLowerCase())
+      );
+      setFilteredTokens(filtered2);
+      return;
+    }
+    const filtered = tokens.filter(
+      (token) => token.symbol.toLowerCase().includes(pattern.toLowerCase()) && token.chainId.toString() === selectedChainId.toString()
+    );
+    setFilteredTokens(filtered);
+  };
+  require$$0.useEffect(() => {
+    setFilteredTokens(tokens);
+    setSelected(selectedToken);
+  }, [selectedToken, tokens]);
+  require$$0.useEffect(() => {
+    handleSearch(searchPatternRef.current);
+  }, [selectedChainId]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-relative liq-flex liq-max-w-full liq-flex-col liq-rounded-none liq-p-0 !liq-max-h-[22rem]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex liq-flex-col liq-gap-3 liq-rounded-t-2xl liq-p-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactjs_components_base_MxSearch_MxSearch.MxSearch,
+        {
+          inputClassName: "!liq-bg-neutral-750 liq-border liq-border-neutral-750",
+          placeholder: "Search token",
+          onChange: handleSearch
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactjs_components_TokenSelector_components_ChainSelect_ChainSelect.ChainSelect,
+        {
+          chains,
+          selectedChainId,
+          onChange: (chainId) => {
+            setSelectedChainId(chainId);
+          },
+          isLoading: areChainsLoading
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "scrollbar-thin liq-flex liq-flex-col liq-gap-2 liq-overflow-y-scroll liq-border-t liq-border-neutral-750 liq-pb-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex liq-text-left liq-text-neutral-300 liq-mt-4 liq-ml-2", children: filteredTokensText }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactjs_components_TokenSelector_components_TokenList.TokenList,
+        {
+          tokens: filteredTokens,
+          onSelect: handleSelect,
+          selectedToken: selected
+        }
+      )
+    ] })
+  ] });
+};
+exports.SelectContent = SelectContent;

package/reactjs/components/TokenSelector/components/SelectContent.mjs

@@ -0,0 +1,92 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useMemo, useEffect } from "react";
+import { ChainSelect } from "./ChainSelect/ChainSelect.mjs";
+import { TokenList } from "./TokenList.mjs";
+import { useGetChainId } from "../../../hooks/useGetChainId.mjs";
+import { MxSearch } from "../../base/MxSearch/MxSearch.mjs";
+const SelectContent = ({
+  onSelect,
+  tokens = [],
+  chains = [],
+  areChainsLoading,
+  selectedToken
+}) => {
+  const [filteredTokens, setFilteredTokens] = useState(tokens);
+  const [selected, setSelected] = useState(selectedToken);
+  const searchPatternRef = useRef("");
+  const activeChainId = useGetChainId();
+  const [selectedChainId, setSelectedChainId] = useState(
+    (activeChainId == null ? void 0 : activeChainId.toString()) ?? "0"
+  );
+  const filteredTokensText = useMemo(() => {
+    const selectedChain = chains.find(
+      (chain) => chain.chainId.toString() === selectedChainId
+    );
+    if (!selectedChain) {
+      return `Tokens on all networks (${tokens.length})`;
+    }
+    return `Tokens on ${selectedChain.networkName} (${filteredTokens.length})`;
+  }, [chains, filteredTokens.length, selectedChainId, tokens.length]);
+  const handleSelect = (token) => {
+    setSelected(token);
+    onSelect(token);
+  };
+  const handleSearch = (pattern) => {
+    searchPatternRef.current = pattern;
+    if (selectedChainId === "0") {
+      const filtered2 = tokens.filter(
+        (token) => token.symbol.toLowerCase().includes(pattern.toLowerCase())
+      );
+      setFilteredTokens(filtered2);
+      return;
+    }
+    const filtered = tokens.filter(
+      (token) => token.symbol.toLowerCase().includes(pattern.toLowerCase()) && token.chainId.toString() === selectedChainId.toString()
+    );
+    setFilteredTokens(filtered);
+  };
+  useEffect(() => {
+    setFilteredTokens(tokens);
+    setSelected(selectedToken);
+  }, [selectedToken, tokens]);
+  useEffect(() => {
+    handleSearch(searchPatternRef.current);
+  }, [selectedChainId]);
+  return /* @__PURE__ */ jsxs("div", { className: "liq-relative liq-flex liq-max-w-full liq-flex-col liq-rounded-none liq-p-0 !liq-max-h-[22rem]", children: [
+    /* @__PURE__ */ jsx("div", { className: "liq-flex liq-flex-col liq-gap-3 liq-rounded-t-2xl liq-p-2", children: /* @__PURE__ */ jsxs("div", { className: "liq-flex liq-gap-2", children: [
+      /* @__PURE__ */ jsx(
+        MxSearch,
+        {
+          inputClassName: "!liq-bg-neutral-750 liq-border liq-border-neutral-750",
+          placeholder: "Search token",
+          onChange: handleSearch
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ChainSelect,
+        {
+          chains,
+          selectedChainId,
+          onChange: (chainId) => {
+            setSelectedChainId(chainId);
+          },
+          isLoading: areChainsLoading
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "scrollbar-thin liq-flex liq-flex-col liq-gap-2 liq-overflow-y-scroll liq-border-t liq-border-neutral-750 liq-pb-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "liq-flex liq-text-left liq-text-neutral-300 liq-mt-4 liq-ml-2", children: filteredTokensText }),
+      /* @__PURE__ */ jsx(
+        TokenList,
+        {
+          tokens: filteredTokens,
+          onSelect: handleSelect,
+          selectedToken: selected
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  SelectContent
+};

package/reactjs/components/TokenSelector/components/SelectedOption.d.ts

@@ -0,0 +1,5 @@
+import { TokenType } from '../../../../types/token';
+
+export declare const SelectedOption: ({ value }: {
+    value?: TokenType;
+}) => import("react/jsx-runtime").JSX.Element;

package/reactjs/components/TokenSelector/components/SelectedOption.js

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactjs_components_TokenSelector_components_TokenIcon = require("./TokenIcon.js");
+const reactjs_components_TokenSelector_components_TokenSymbol = require("./TokenSymbol.js");
+const SelectedOption = ({ value }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactjs_components_TokenSelector_components_TokenIcon.TokenIcon,
+      {
+        size: "lg",
+        token: value,
+        className: "liq-flex liq-items-center liq-justify-center liq-relative"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex-1 liq-truncate liq-text-left", children: [
+      value && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex liq-flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex liq-items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactjs_components_TokenSelector_components_TokenSymbol.TokenSymbol,
+        {
+          token: value,
+          className: "liq-font-semibold liq-leading-none"
+        }
+      ) }) }),
+      !value && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-text-neutral-500", children: "Select token" })
+    ] })
+  ] });
+};
+exports.SelectedOption = SelectedOption;

package/reactjs/components/TokenSelector/components/SelectedOption.mjs

@@ -0,0 +1,28 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { TokenIcon } from "./TokenIcon.mjs";
+import { TokenSymbol } from "./TokenSymbol.mjs";
+const SelectedOption = ({ value }) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TokenIcon,
+      {
+        size: "lg",
+        token: value,
+        className: "liq-flex liq-items-center liq-justify-center liq-relative"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "liq-flex-1 liq-truncate liq-text-left", children: [
+      value && /* @__PURE__ */ jsx("div", { className: "liq-flex liq-flex-col", children: /* @__PURE__ */ jsx("div", { className: "liq-flex liq-items-center", children: /* @__PURE__ */ jsx(
+        TokenSymbol,
+        {
+          token: value,
+          className: "liq-font-semibold liq-leading-none"
+        }
+      ) }) }),
+      !value && /* @__PURE__ */ jsx("div", { className: "liq-text-neutral-500", children: "Select token" })
+    ] })
+  ] });
+};
+export {
+  SelectedOption
+};

package/reactjs/components/TokenSelector/components/TokenIcon.d.ts

@@ -0,0 +1,8 @@
+import { TokenType } from '../../../../types/token';
+
+export type TokenIconSize = 'xs' | '2xs' | 'sm' | '2sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+export declare const TokenIcon: ({ token, size, className }: {
+    className?: string;
+    size?: TokenIconSize;
+    token?: TokenType;
+}) => import("react/jsx-runtime").JSX.Element;