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

package/reactjs/components/DisplayAmount/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './truncateAmount';

package/reactjs/components/DisplayAmount/utils/index.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const reactjs_components_DisplayAmount_utils_truncateAmount = require("./truncateAmount.js");
+exports.truncateAmount = reactjs_components_DisplayAmount_utils_truncateAmount.truncateAmount;

package/reactjs/components/DisplayAmount/utils/index.mjs

@@ -0,0 +1,4 @@
+import { truncateAmount } from "./truncateAmount.mjs";
+export {
+  truncateAmount
+};

package/reactjs/components/DisplayAmount/utils/truncateAmount.d.ts

@@ -0,0 +1 @@
+export declare const truncateAmount: (formattedAmount: string) => string | number;

package/reactjs/components/DisplayAmount/utils/truncateAmount.js

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const numeral = require("numeral");
+const reactjs_utils_removeCommas = require("../../../utils/removeCommas.js");
+const truncateAmount = (formattedAmount) => {
+  const cleanFormattedAmount = reactjs_utils_removeCommas.removeCommas(formattedAmount);
+  const number = Number(cleanFormattedAmount);
+  const abbreviations = {
+    T: 1e12,
+    B: 1e9,
+    M: 1e6,
+    K: 1e3
+  };
+  for (const key in abbreviations) {
+    if (Math.abs(number) >= abbreviations[key]) {
+      return numeral(number / abbreviations[key]).format("0.[00]") + key;
+    }
+  }
+  return number;
+};
+exports.truncateAmount = truncateAmount;

package/reactjs/components/DisplayAmount/utils/truncateAmount.mjs

@@ -0,0 +1,21 @@
+import numeral from "numeral";
+import { removeCommas } from "../../../utils/removeCommas.mjs";
+const truncateAmount = (formattedAmount) => {
+  const cleanFormattedAmount = removeCommas(formattedAmount);
+  const number = Number(cleanFormattedAmount);
+  const abbreviations = {
+    T: 1e12,
+    B: 1e9,
+    M: 1e6,
+    K: 1e3
+  };
+  for (const key in abbreviations) {
+    if (Math.abs(number) >= abbreviations[key]) {
+      return numeral(number / abbreviations[key]).format("0.[00]") + key;
+    }
+  }
+  return number;
+};
+export {
+  truncateAmount
+};

package/reactjs/components/SmallLoader/SmallLoader.d.ts

@@ -0,0 +1,4 @@
+export declare const SmallLoader: ({ show, color }: {
+    show: boolean;
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/reactjs/components/SmallLoader/SmallLoader.js

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const faSpinner = require("@fortawesome/free-solid-svg-icons/faSpinner");
+const reactFontawesome = require("@fortawesome/react-fontawesome");
+const SmallLoader = ({
+  show,
+  color
+}) => {
+  if (!show) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-d-flex", children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactFontawesome.FontAwesomeIcon,
+    {
+      icon: faSpinner.faSpinner,
+      className: `liq-fa-spin liq-fast-spin ${color ? color : "liq-text-primary"}`
+    }
+  ) });
+};
+exports.SmallLoader = SmallLoader;

package/reactjs/components/SmallLoader/SmallLoader.mjs

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons/faSpinner";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+const SmallLoader = ({
+  show,
+  color
+}) => {
+  if (!show) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "liq-d-flex", children: /* @__PURE__ */ jsx(
+    FontAwesomeIcon,
+    {
+      icon: faSpinner,
+      className: `liq-fa-spin liq-fast-spin ${color ? color : "liq-text-primary"}`
+    }
+  ) });
+};
+export {
+  SmallLoader
+};

package/reactjs/components/SmallLoader/index.d.ts

@@ -0,0 +1 @@
+export * from './SmallLoader';

package/reactjs/components/SmallLoader/index.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const reactjs_components_SmallLoader_SmallLoader = require("./SmallLoader.js");
+exports.SmallLoader = reactjs_components_SmallLoader_SmallLoader.SmallLoader;

package/reactjs/components/SmallLoader/index.mjs

@@ -0,0 +1,4 @@
+import { SmallLoader } from "./SmallLoader.mjs";
+export {
+  SmallLoader
+};

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

@@ -0,0 +1,16 @@
+import { TokenType } from '../../../types/token';
+
+export declare const TokenSelector: ({ name, options, selectedOption, areOptionsLoading, className, disabled, omitDisableClass, color, onBlur, onChange, onMaxBtnClick, onTokenSelectorDisplay }: {
+    name: string;
+    options: TokenType[];
+    selectedOption?: TokenType;
+    areOptionsLoading?: boolean;
+    disabled?: boolean;
+    omitDisableClass?: boolean;
+    className?: string;
+    color?: "neutral-750" | "neutral-850";
+    onChange: (option?: TokenType) => void;
+    onBlur: (e: React.FocusEvent<any, HTMLButtonElement>) => void;
+    onMaxBtnClick?: () => void;
+    onTokenSelectorDisplay?: (visible: boolean) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/reactjs/components/TokenSelector/TokenSelector.js

@@ -0,0 +1,158 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const faChevronDown = require("@fortawesome/free-solid-svg-icons/faChevronDown");
+const faWallet = require("@fortawesome/free-solid-svg-icons/faWallet");
+const reactFontawesome = require("@fortawesome/react-fontawesome");
+const require$$0 = require("react");
+const reactjs_components_TokenSelector_components_SelectContainer = require("./components/SelectContainer.js");
+const reactjs_components_TokenSelector_components_SelectContent = require("./components/SelectContent.js");
+const reactjs_components_TokenSelector_components_SelectedOption = require("./components/SelectedOption.js");
+const constants_index = require("../../../constants/index.js");
+const reactjs_hooks_useResolveTokenChain = require("../../hooks/useResolveTokenChain.js");
+const reactjs_queries_useGetChains_query = require("../../queries/useGetChains.query.js");
+const reactjs_utils_mxClsx = require("../../utils/mxClsx.js");
+const reactjs_components_base_MxButton_MxButton = require("../base/MxButton/MxButton.js");
+const reactjs_components_DisplayAmount_DisplayAmount = require("../DisplayAmount/DisplayAmount.js");
+const TokenSelector = ({
+  name,
+  options = [],
+  selectedOption,
+  areOptionsLoading = false,
+  className = "",
+  disabled = false,
+  omitDisableClass = false,
+  color = "neutral-750",
+  onBlur,
+  onChange,
+  onMaxBtnClick,
+  onTokenSelectorDisplay
+}) => {
+  const [show, setShow] = require$$0.useState(false);
+  const { data, isLoading: areChainsLoading } = reactjs_queries_useGetChains_query.useGetChainsQuery();
+  const { chainIcon } = reactjs_hooks_useResolveTokenChain.useResolveTokenChain({
+    token: selectedOption
+  });
+  const chains = require$$0.useMemo(() => {
+    return (data == null ? void 0 : data.filter(
+      (chain) => !constants_index.MVX_CHAIN_IDS.includes(Number(chain.chainId.toString()))
+    )) ?? [];
+  }, [data]);
+  const handleOnClick = () => setShow(true);
+  require$$0.useEffect(() => {
+    onTokenSelectorDisplay == null ? void 0 : onTokenSelectorDisplay(show);
+  }, [show]);
+  if (areOptionsLoading || areChainsLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: reactjs_utils_mxClsx.mxClsx(
+          "liq-h-12 liq-w-40 liq-animate-pulse",
+          {
+            "liq-rounded-xl": true,
+            "liq-rounded-e-lg liq-rounded-s-3xl": true
+          },
+          {
+            "liq-bg-neutral-100 liq-bg-opacity-[0.1] hover:liq-bg-opacity-[0.25]": color === "neutral-750",
+            "liq-bg-neutral-100 liq-bg-opacity-[0.05] hover:liq-bg-opacity-[0.15]": color === "neutral-850"
+          },
+          className
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    show && /* @__PURE__ */ jsxRuntime.jsx(reactjs_components_TokenSelector_components_SelectContainer.SelectContainer, { onClose: () => setShow(false), children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactjs_components_TokenSelector_components_SelectContent.SelectContent,
+      {
+        onSelect: (token) => {
+          onChange(token);
+          setShow(false);
+        },
+        tokens: options,
+        chains,
+        areChainsLoading,
+        selectedToken: selectedOption
+      }
+    ) }),
+    !show && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-flex-col liq-items-end liq-justify-between liq-gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          name,
+          type: "button",
+          role: "combobox",
+          className: reactjs_utils_mxClsx.mxClsx(
+            "focus-primary liq-group liq-flex liq-cursor-pointer liq-items-center liq-gap-2 liq-transition-colors liq-duration-200 liq-relative",
+            {
+              "liq-rounded-e-lg liq-rounded-s-3xl liq-px-1 liq-py-1 liq-pr-3": true
+            },
+            {
+              "liq-bg-neutral-750/50 hover:enabled:liq-bg-neutral-750": color === "neutral-750",
+              "liq-bg-neutral-900/50 liq-outline liq-outline-1 liq-outline-neutral-700/20 hover:enabled:liq-bg-neutral-600/50 hover:enabled:liq-outline-neutral-600": color === "neutral-850"
+            },
+            {
+              "disabled:!liq-opacity-70": disabled && !omitDisableClass
+            },
+            {
+              "!liq-cursor-not-allowed !liq-bg-transparent !liq-outline-transparent": disabled
+            },
+            className
+          ),
+          onBlur,
+          onClick: handleOnClick,
+          disabled,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactjs_components_TokenSelector_components_SelectedOption.SelectedOption, { value: selectedOption }),
+            !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+              reactFontawesome.FontAwesomeIcon,
+              {
+                icon: faChevronDown.faChevronDown,
+                className: "liq-text-neutral-200 group-hover:liq-text-neutral-50"
+              }
+            ),
+            chainIcon && /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: chainIcon,
+                alt: "",
+                className: "liq-absolute liq-left-6 liq-bottom-[2px] liq-chain-icon liq-sm liq-w-6 liq-h-6 liq-border-[3px] liq-border-neutral-850  liq-rounded-lg"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex liq-items-center liq-gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-items-center liq-gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-items-center liq-gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactFontawesome.FontAwesomeIcon,
+            {
+              icon: faWallet.faWallet,
+              className: "liq-text-neutral-300"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactjs_components_DisplayAmount_DisplayAmount.DisplayAmount,
+            {
+              decimals: selectedOption == null ? void 0 : selectedOption.decimals,
+              amount: (selectedOption == null ? void 0 : selectedOption.balance) ?? "0",
+              className: "liq-font-medium liq-text-neutral-100"
+            }
+          )
+        ] }),
+        onMaxBtnClick && /* @__PURE__ */ jsxRuntime.jsx(
+          reactjs_components_base_MxButton_MxButton.MxButton,
+          {
+            btnSize: "xs",
+            variant: "neutral-800",
+            disabled,
+            onClick: onMaxBtnClick,
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-text-neutral-300", children: "MAX" })
+          }
+        )
+      ] }) })
+    ] })
+  ] });
+};
+exports.TokenSelector = TokenSelector;

package/reactjs/components/TokenSelector/TokenSelector.mjs

@@ -0,0 +1,157 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
+import { faWallet } from "@fortawesome/free-solid-svg-icons/faWallet";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState, useMemo, useEffect } from "react";
+import { SelectContainer } from "./components/SelectContainer.mjs";
+import { SelectContent } from "./components/SelectContent.mjs";
+import { SelectedOption } from "./components/SelectedOption.mjs";
+import { MVX_CHAIN_IDS } from "../../../constants/index.mjs";
+import { useResolveTokenChain } from "../../hooks/useResolveTokenChain.mjs";
+import { useGetChainsQuery } from "../../queries/useGetChains.query.mjs";
+import { mxClsx } from "../../utils/mxClsx.mjs";
+import { MxButton } from "../base/MxButton/MxButton.mjs";
+import { DisplayAmount } from "../DisplayAmount/DisplayAmount.mjs";
+const TokenSelector = ({
+  name,
+  options = [],
+  selectedOption,
+  areOptionsLoading = false,
+  className = "",
+  disabled = false,
+  omitDisableClass = false,
+  color = "neutral-750",
+  onBlur,
+  onChange,
+  onMaxBtnClick,
+  onTokenSelectorDisplay
+}) => {
+  const [show, setShow] = useState(false);
+  const { data, isLoading: areChainsLoading } = useGetChainsQuery();
+  const { chainIcon } = useResolveTokenChain({
+    token: selectedOption
+  });
+  const chains = useMemo(() => {
+    return (data == null ? void 0 : data.filter(
+      (chain) => !MVX_CHAIN_IDS.includes(Number(chain.chainId.toString()))
+    )) ?? [];
+  }, [data]);
+  const handleOnClick = () => setShow(true);
+  useEffect(() => {
+    onTokenSelectorDisplay == null ? void 0 : onTokenSelectorDisplay(show);
+  }, [show]);
+  if (areOptionsLoading || areChainsLoading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: mxClsx(
+          "liq-h-12 liq-w-40 liq-animate-pulse",
+          {
+            "liq-rounded-xl": true,
+            "liq-rounded-e-lg liq-rounded-s-3xl": true
+          },
+          {
+            "liq-bg-neutral-100 liq-bg-opacity-[0.1] hover:liq-bg-opacity-[0.25]": color === "neutral-750",
+            "liq-bg-neutral-100 liq-bg-opacity-[0.05] hover:liq-bg-opacity-[0.15]": color === "neutral-850"
+          },
+          className
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    show && /* @__PURE__ */ jsx(SelectContainer, { onClose: () => setShow(false), children: /* @__PURE__ */ jsx(
+      SelectContent,
+      {
+        onSelect: (token) => {
+          onChange(token);
+          setShow(false);
+        },
+        tokens: options,
+        chains,
+        areChainsLoading,
+        selectedToken: selectedOption
+      }
+    ) }),
+    !show && /* @__PURE__ */ jsxs("div", { className: "liq-flex liq-flex-col liq-items-end liq-justify-between liq-gap-4", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          name,
+          type: "button",
+          role: "combobox",
+          className: mxClsx(
+            "focus-primary liq-group liq-flex liq-cursor-pointer liq-items-center liq-gap-2 liq-transition-colors liq-duration-200 liq-relative",
+            {
+              "liq-rounded-e-lg liq-rounded-s-3xl liq-px-1 liq-py-1 liq-pr-3": true
+            },
+            {
+              "liq-bg-neutral-750/50 hover:enabled:liq-bg-neutral-750": color === "neutral-750",
+              "liq-bg-neutral-900/50 liq-outline liq-outline-1 liq-outline-neutral-700/20 hover:enabled:liq-bg-neutral-600/50 hover:enabled:liq-outline-neutral-600": color === "neutral-850"
+            },
+            {
+              "disabled:!liq-opacity-70": disabled && !omitDisableClass
+            },
+            {
+              "!liq-cursor-not-allowed !liq-bg-transparent !liq-outline-transparent": disabled
+            },
+            className
+          ),
+          onBlur,
+          onClick: handleOnClick,
+          disabled,
+          children: [
+            /* @__PURE__ */ jsx(SelectedOption, { value: selectedOption }),
+            !disabled && /* @__PURE__ */ jsx(
+              FontAwesomeIcon,
+              {
+                icon: faChevronDown,
+                className: "liq-text-neutral-200 group-hover:liq-text-neutral-50"
+              }
+            ),
+            chainIcon && /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: chainIcon,
+                alt: "",
+                className: "liq-absolute liq-left-6 liq-bottom-[2px] liq-chain-icon liq-sm liq-w-6 liq-h-6 liq-border-[3px] liq-border-neutral-850  liq-rounded-lg"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "liq-flex liq-items-center liq-gap-3", children: /* @__PURE__ */ jsxs("div", { className: "liq-flex liq-items-center liq-gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "liq-flex liq-items-center liq-gap-1", children: [
+          /* @__PURE__ */ jsx(
+            FontAwesomeIcon,
+            {
+              icon: faWallet,
+              className: "liq-text-neutral-300"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DisplayAmount,
+            {
+              decimals: selectedOption == null ? void 0 : selectedOption.decimals,
+              amount: (selectedOption == null ? void 0 : selectedOption.balance) ?? "0",
+              className: "liq-font-medium liq-text-neutral-100"
+            }
+          )
+        ] }),
+        onMaxBtnClick && /* @__PURE__ */ jsx(
+          MxButton,
+          {
+            btnSize: "xs",
+            variant: "neutral-800",
+            disabled,
+            onClick: onMaxBtnClick,
+            children: /* @__PURE__ */ jsx("span", { className: "liq-text-neutral-300", children: "MAX" })
+          }
+        )
+      ] }) })
+    ] })
+  ] });
+};
+export {
+  TokenSelector
+};

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

@@ -0,0 +1,8 @@
+import { ChainDTO } from '../../../../../dto/Chain.dto';
+
+export declare const ChainSelect: ({ isLoading, selectedChainId, onChange, chains }: {
+    isLoading?: boolean;
+    selectedChainId?: string;
+    onChange?: (chainId: string) => void;
+    chains: ChainDTO[];
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,86 @@
+#!/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 Select = require("react-select");
+const reactjs_components_TokenSelector_components_ChainSelect_components_FormatChainOptionLabel = require("./components/FormatChainOptionLabel.js");
+const reactjs_components_TokenSelector_components_ChainSelect_components_IndicatorSeparator = require("./components/IndicatorSeparator.js");
+const reactjs_components_TokenSelector_components_ChainSelect_components_SelectedChainOption = require("./components/SelectedChainOption.js");
+const ChainSelect = ({
+  isLoading,
+  selectedChainId,
+  onChange,
+  chains
+}) => {
+  const chainOptions = require$$0.useMemo(() => {
+    const options = chains.map((chain) => ({
+      label: chain.networkName,
+      value: chain.chainId.toString(),
+      chain: {
+        id: chain.chainId.toString(),
+        name: chain.chainName,
+        networkName: chain.networkName,
+        svgUrl: chain.svgUrl
+      }
+    }));
+    options.unshift({
+      label: "All",
+      value: "0",
+      chain: {
+        id: "0",
+        name: "all",
+        networkName: "All",
+        svgUrl: "https://cdn.multiversx.com/liquidity-sdk/all-networks.svg"
+      }
+    });
+    return options;
+  }, [chains]);
+  const selectedChain = require$$0.useMemo(() => {
+    return chainOptions.find(
+      (chainOption) => chainOption.value.toString() === (selectedChainId == null ? void 0 : selectedChainId.toString())
+    ) ?? (chainOptions == null ? void 0 : chainOptions[0]);
+  }, [chainOptions, selectedChainId]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "styled-chain-select", "data-testid": "chainDropdown", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Select,
+    {
+      className: "basic-single",
+      classNamePrefix: "styled-chain-select",
+      maxMenuHeight: 260,
+      value: selectedChain,
+      isLoading,
+      styles: {
+        indicatorSeparator: reactjs_components_TokenSelector_components_ChainSelect_components_IndicatorSeparator.IndicatorSeparator,
+        control: (css) => ({
+          ...css,
+          width: "max-content",
+          minWidth: "100%",
+          maxWidth: "10rem"
+        }),
+        menu: (css) => ({
+          ...css,
+          zIndex: 9999,
+          width: "max-content",
+          minWidth: "100%",
+          right: 0
+        })
+      },
+      isSearchable: true,
+      name: "chain",
+      options: chainOptions,
+      onChange: (selectedOption) => {
+        var _a, _b;
+        if ((_a = selectedOption == null ? void 0 : selectedOption.chain) == null ? void 0 : _a.id) {
+          onChange == null ? void 0 : onChange((_b = selectedOption.chain) == null ? void 0 : _b.id.toString());
+        }
+      },
+      isMulti: false,
+      formatOptionLabel: reactjs_components_TokenSelector_components_ChainSelect_components_FormatChainOptionLabel.FormatChainOptionLabel,
+      components: {
+        Input: () => null,
+        SingleValue: reactjs_components_TokenSelector_components_ChainSelect_components_SelectedChainOption.SelectedChainOption
+      }
+    }
+  ) });
+};
+exports.ChainSelect = ChainSelect;

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

@@ -0,0 +1,85 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import Select from "react-select";
+import { FormatChainOptionLabel } from "./components/FormatChainOptionLabel.mjs";
+import { IndicatorSeparator } from "./components/IndicatorSeparator.mjs";
+import { SelectedChainOption } from "./components/SelectedChainOption.mjs";
+const ChainSelect = ({
+  isLoading,
+  selectedChainId,
+  onChange,
+  chains
+}) => {
+  const chainOptions = useMemo(() => {
+    const options = chains.map((chain) => ({
+      label: chain.networkName,
+      value: chain.chainId.toString(),
+      chain: {
+        id: chain.chainId.toString(),
+        name: chain.chainName,
+        networkName: chain.networkName,
+        svgUrl: chain.svgUrl
+      }
+    }));
+    options.unshift({
+      label: "All",
+      value: "0",
+      chain: {
+        id: "0",
+        name: "all",
+        networkName: "All",
+        svgUrl: "https://cdn.multiversx.com/liquidity-sdk/all-networks.svg"
+      }
+    });
+    return options;
+  }, [chains]);
+  const selectedChain = useMemo(() => {
+    return chainOptions.find(
+      (chainOption) => chainOption.value.toString() === (selectedChainId == null ? void 0 : selectedChainId.toString())
+    ) ?? (chainOptions == null ? void 0 : chainOptions[0]);
+  }, [chainOptions, selectedChainId]);
+  return /* @__PURE__ */ jsx("div", { className: "styled-chain-select", "data-testid": "chainDropdown", children: /* @__PURE__ */ jsx(
+    Select,
+    {
+      className: "basic-single",
+      classNamePrefix: "styled-chain-select",
+      maxMenuHeight: 260,
+      value: selectedChain,
+      isLoading,
+      styles: {
+        indicatorSeparator: IndicatorSeparator,
+        control: (css) => ({
+          ...css,
+          width: "max-content",
+          minWidth: "100%",
+          maxWidth: "10rem"
+        }),
+        menu: (css) => ({
+          ...css,
+          zIndex: 9999,
+          width: "max-content",
+          minWidth: "100%",
+          right: 0
+        })
+      },
+      isSearchable: true,
+      name: "chain",
+      options: chainOptions,
+      onChange: (selectedOption) => {
+        var _a, _b;
+        if ((_a = selectedOption == null ? void 0 : selectedOption.chain) == null ? void 0 : _a.id) {
+          onChange == null ? void 0 : onChange((_b = selectedOption.chain) == null ? void 0 : _b.id.toString());
+        }
+      },
+      isMulti: false,
+      formatOptionLabel: FormatChainOptionLabel,
+      components: {
+        Input: () => null,
+        SingleValue: SelectedChainOption
+      }
+    }
+  ) });
+};
+export {
+  ChainSelect
+};

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

@@ -0,0 +1,11 @@
+export interface ChainOptionLabelType {
+    isDisabled?: boolean;
+    inDropdown?: boolean;
+    chain: {
+        id: string;
+        name: string;
+        networkName: string;
+        svgUrl?: string;
+    };
+}
+export declare const ChainOptionLabel: ({ chain, inDropdown }: ChainOptionLabelType) => import("react/jsx-runtime").JSX.Element;