@multiversx/sdk-dapp-liquidity 2.0.0 → 2.1.0-alpha.1

package/reactjs/components/TokenSelector/TokenSelector.mjs

@@ -1,132 +1,112 @@
-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,
-  isMvxSelector = false,
-  omitDisableClass = false,
-  isDestination = false,
-  color = "neutral-750",
-  onBlur,
-  onChange,
-  onMaxBtnClick,
-  onTokenSelectorDisplay
+import { jsx as l, jsxs as n, Fragment as D } from "react/jsx-runtime";
+import { faChevronDown as F } from "@fortawesome/free-solid-svg-icons/faChevronDown";
+import { faWallet as V } from "@fortawesome/free-solid-svg-icons/faWallet";
+import { FontAwesomeIcon as p } from "@fortawesome/react-fontawesome";
+import { useState as X, useMemo as x, useEffect as _ } from "react";
+import { SelectContainer as z } from "./components/SelectContainer.mjs";
+import { SelectContent as E } from "./components/SelectContent.mjs";
+import { SelectedOption as G } from "./components/SelectedOption.mjs";
+import { MVX_CHAIN_IDS as v } from "../../../constants/index.mjs";
+import { useResolveTokenChain as H } from "../../hooks/useResolveTokenChain.mjs";
+import { useGetChainsQuery as Q } from "../../queries/useGetChains.query.mjs";
+import { mxClsx as C } from "../../utils/mxClsx.mjs";
+import { MxButton as R } from "../base/MxButton/MxButton.mjs";
+import { DisplayAmount as W } from "../DisplayAmount/DisplayAmount.mjs";
+const rl = ({
+  name: m,
+  options: N = [],
+  selectedOption: i,
+  areOptionsLoading: w = !1,
+  className: c = "",
+  disabled: f = !1,
+  isMvxSelector: t = !1,
+  omitDisableClass: y = !1,
+  isDestination: d = !1,
+  color: a = "neutral-750",
+  onBlur: I,
+  onChange: k,
+  onMaxBtnClick: h,
+  onTokenSelectorDisplay: q
 }) => {
-  const [show, setShow] = useState(false);
-  const { data, isLoading: areChainsLoading } = useGetChainsQuery();
-  const { chainIcon } = useResolveTokenChain({
-    token: selectedOption
-  });
-  const chains = useMemo(() => {
-    if (isMvxSelector) {
-      return (data == null ? void 0 : data.filter(
-        (chain) => MVX_CHAIN_IDS.includes(chain.chainId.toString())
-      )) ?? [];
+  const [o, u] = X(!1), { data: e, isLoading: b } = Q(), { chainIcon: g } = H({
+    token: i
+  }), A = x(() => t ? (e == null ? void 0 : e.filter(
+    (r) => v.includes(r.chainId.toString())
+  )) ?? [] : (e == null ? void 0 : e.filter(
+    (r) => !v.includes(r.chainId.toString())
+  )) ?? [], [e, t]), S = x(() => t && d, [t, d]), s = f || S, j = () => u(!0), L = (w || b) && !i;
+  return _(() => {
+    q == null || q(o);
+  }, [o]), L ? /* @__PURE__ */ l(
+    "div",
+    {
+      className: C(
+        "liq-h-12 liq-w-40 liq-animate-pulse",
+        {
+          "liq-rounded-xl": !0,
+          "liq-rounded-e-lg liq-rounded-s-3xl": !0
+        },
+        {
+          "liq-bg-neutral-100 liq-bg-opacity-[0.1] hover:liq-bg-opacity-[0.25]": a === "neutral-750",
+          "liq-bg-neutral-100 liq-bg-opacity-[0.05] hover:liq-bg-opacity-[0.15]": a === "neutral-850"
+        },
+        c
+      )
     }
-    return (data == null ? void 0 : data.filter(
-      (chain) => !MVX_CHAIN_IDS.includes(chain.chainId.toString())
-    )) ?? [];
-  }, [data, isMvxSelector]);
-  const isDestinationMvx = useMemo(() => {
-    const shouldDisable = isMvxSelector && isDestination;
-    return shouldDisable;
-  }, [isMvxSelector, isDestination]);
-  const isVisuallyDisabled = disabled || isDestinationMvx;
-  const handleOnClick = () => setShow(true);
-  const showLoadingSkeleton = (areOptionsLoading || areChainsLoading) && !selectedOption;
-  useEffect(() => {
-    onTokenSelectorDisplay == null ? void 0 : onTokenSelectorDisplay(show);
-  }, [show]);
-  if (showLoadingSkeleton) {
-    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,
+  ) : /* @__PURE__ */ n(D, { children: [
+    o && /* @__PURE__ */ l(z, { onClose: () => u(!1), children: /* @__PURE__ */ l(
+      E,
       {
-        onSelect: (token) => {
-          onChange(token);
-          setShow(false);
+        onSelect: (r) => {
+          k(r), u(!1);
         },
-        tokens: options,
-        chains,
-        isMvxSelector,
-        areChainsLoading,
-        selectedToken: selectedOption
+        tokens: N,
+        chains: A,
+        isMvxSelector: t,
+        areChainsLoading: b,
+        selectedToken: i
       }
     ) }),
-    !show && /* @__PURE__ */ jsxs("div", { className: "liq-flex liq-flex-col liq-items-end liq-justify-between liq-gap-4", children: [
-      /* @__PURE__ */ jsxs(
+    !o && /* @__PURE__ */ n("div", { className: "liq-flex liq-flex-col liq-items-end liq-justify-between liq-gap-4", children: [
+      /* @__PURE__ */ n(
         "button",
         {
-          name,
+          name: m,
           type: "button",
           role: "combobox",
-          className: mxClsx(
+          className: C(
             "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-rounded-e-lg liq-rounded-s-3xl liq-px-1 liq-py-1 liq-pr-3": !0
             },
             {
-              "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"
+              "liq-bg-neutral-750/50 hover:enabled:liq-bg-neutral-750": a === "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": a === "neutral-850"
             },
             {
-              "disabled:!liq-opacity-70": isVisuallyDisabled && !omitDisableClass
+              "disabled:!liq-opacity-70": s && !y
             },
             {
-              "!liq-cursor-not-allowed !liq-bg-transparent !liq-outline-transparent": isVisuallyDisabled
+              "!liq-cursor-not-allowed !liq-bg-transparent !liq-outline-transparent": s
             },
-            className
+            c
           ),
-          onBlur,
-          onClick: handleOnClick,
-          disabled: isVisuallyDisabled,
+          onBlur: I,
+          onClick: j,
+          disabled: s,
           children: [
-            /* @__PURE__ */ jsx(SelectedOption, { value: selectedOption }),
-            !isVisuallyDisabled && /* @__PURE__ */ jsx(
-              FontAwesomeIcon,
+            /* @__PURE__ */ l(G, { value: i }),
+            !s && /* @__PURE__ */ l(
+              p,
               {
-                icon: faChevronDown,
+                icon: F,
                 className: "liq-text-neutral-200 group-hover:liq-text-neutral-50"
               }
             ),
-            chainIcon && /* @__PURE__ */ jsx(
+            g && /* @__PURE__ */ l(
               "img",
               {
-                src: chainIcon,
+                src: g,
                 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"
               }
@@ -134,33 +114,33 @@ const TokenSelector = ({
           ]
         }
       ),
-      /* @__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,
+      /* @__PURE__ */ l("div", { className: "liq-flex liq-items-center liq-gap-3", children: /* @__PURE__ */ n("div", { className: "liq-flex liq-items-center liq-gap-3", children: [
+        /* @__PURE__ */ n("div", { className: "liq-flex liq-items-center liq-gap-1", children: [
+          /* @__PURE__ */ l(
+            p,
             {
-              icon: faWallet,
+              icon: V,
               className: "liq-text-neutral-300"
             }
           ),
-          /* @__PURE__ */ jsx(
-            DisplayAmount,
+          /* @__PURE__ */ l(
+            W,
             {
-              "data-testid": `${name}-balance`,
-              decimals: selectedOption == null ? void 0 : selectedOption.decimals,
-              amount: (selectedOption == null ? void 0 : selectedOption.balance) ?? "0",
+              "data-testid": `${m}-balance`,
+              decimals: i == null ? void 0 : i.decimals,
+              amount: (i == null ? void 0 : i.balance) ?? "0",
               className: "liq-font-medium liq-text-neutral-100"
             }
           )
         ] }),
-        onMaxBtnClick && /* @__PURE__ */ jsx(
-          MxButton,
+        h && /* @__PURE__ */ l(
+          R,
           {
             btnSize: "xs",
             variant: "neutral-800",
-            disabled,
-            onClick: onMaxBtnClick,
-            children: /* @__PURE__ */ jsx("span", { className: "liq-text-neutral-300", children: "MAX" })
+            disabled: f,
+            onClick: h,
+            children: /* @__PURE__ */ l("span", { className: "liq-text-neutral-300", children: "MAX" })
           }
         )
       ] }) })
@@ -168,5 +148,5 @@ const TokenSelector = ({
   ] });
 };
 export {
-  TokenSelector
+  rl as TokenSelector
 };

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

@@ -1,95 +1,2 @@
 #!/usr/bin/env node
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const Select = require("react-select");
-const helpers_getDisplayName = require("../../../../../helpers/getDisplayName.js");
-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");
-require("../../../../constants/index.js");
-const reactjs_constants_chains = require("../../../../constants/chains.js");
-const ChainSelect = ({
-  isLoading,
-  selectedChainId,
-  ignoreAllChains = false,
-  onChange,
-  chains
-}) => {
-  const chainOptions = React.useMemo(() => {
-    const options = chains.map((chain) => ({
-      label: chain.networkName,
-      value: chain.chainId.toString(),
-      chain: {
-        id: chain.chainId.toString(),
-        name: helpers_getDisplayName.getDisplayName(chain),
-        networkName: chain.networkName,
-        svgUrl: chain.svgUrl,
-        pngUrl: chain.pngUrl
-      }
-    }));
-    if (ignoreAllChains) {
-      return options;
-    }
-    options.unshift({
-      label: "All",
-      value: reactjs_constants_chains.ALL_NETWORK_ID,
-      chain: {
-        id: reactjs_constants_chains.ALL_NETWORK_ID,
-        name: "all",
-        networkName: "All",
-        svgUrl: "https://cdn.multiversx.com/liquidity-sdk/all-networks.svg",
-        pngUrl: "https://cdn.multiversx.com/liquidity-sdk/all-networks.svg"
-      }
-    });
-    return options;
-  }, [chains]);
-  const selectedChain = React.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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),l=require("react"),_=require("react-select"),S=require("../../../../../helpers/getDisplayName.js"),d=require("./components/FormatChainOptionLabel.js"),g=require("./components/IndicatorSeparator.js"),h=require("./components/SelectedChainOption.js");require("../../../../constants/index.js");const c=require("../../../../constants/chains.js"),v=({isLoading:m,selectedChainId:r,ignoreAllChains:u=!1,onChange:o,chains:i})=>{const n=l.useMemo(()=>{const e=i.map(t=>({label:t.networkName,value:t.chainId.toString(),chain:{id:t.chainId.toString(),name:S.getDisplayName(t),networkName:t.networkName,svgUrl:t.svgUrl,pngUrl:t.pngUrl}}));return u||e.unshift({label:"All",value:c.ALL_NETWORK_ID,chain:{id:c.ALL_NETWORK_ID,name:"all",networkName:"All",svgUrl:"https://cdn.multiversx.com/liquidity-sdk/all-networks.svg",pngUrl:"https://cdn.multiversx.com/liquidity-sdk/all-networks.svg"}}),e},[i]),p=l.useMemo(()=>n.find(e=>e.value.toString()===(r==null?void 0:r.toString()))??(n==null?void 0:n[0]),[n,r]);return s.jsx("div",{className:"styled-chain-select","data-testid":"chainDropdown",children:s.jsx(_,{className:"basic-single",classNamePrefix:"styled-chain-select",maxMenuHeight:260,value:p,isLoading:m,styles:{indicatorSeparator:g.IndicatorSeparator,control:e=>({...e,width:"max-content",minWidth:"100%",maxWidth:"10rem"}),menu:e=>({...e,zIndex:9999,width:"max-content",minWidth:"100%",right:0})},isSearchable:!0,name:"chain",options:n,onChange:e=>{var t,a;(t=e==null?void 0:e.chain)!=null&&t.id&&(o==null||o((a=e.chain)==null?void 0:a.id.toString()))},isMulti:!1,formatOptionLabel:d.FormatChainOptionLabel,components:{Input:()=>null,SingleValue:h.SelectedChainOption}})})};exports.ChainSelect=v;

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

@@ -1,94 +1,85 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import Select from "react-select";
-import { getDisplayName } from "../../../../../helpers/getDisplayName.mjs";
-import { FormatChainOptionLabel } from "./components/FormatChainOptionLabel.mjs";
-import { IndicatorSeparator } from "./components/IndicatorSeparator.mjs";
-import { SelectedChainOption } from "./components/SelectedChainOption.mjs";
+import { jsx as n } from "react/jsx-runtime";
+import { useMemo as e } from "react";
+import f from "react-select";
+import { getDisplayName as d } from "../../../../../helpers/getDisplayName.mjs";
+import { FormatChainOptionLabel as g } from "./components/FormatChainOptionLabel.mjs";
+import { IndicatorSeparator as v } from "./components/IndicatorSeparator.mjs";
+import { SelectedChainOption as S } from "./components/SelectedChainOption.mjs";
 import "../../../../constants/index.mjs";
-import { ALL_NETWORK_ID } from "../../../../constants/chains.mjs";
-const ChainSelect = ({
-  isLoading,
-  selectedChainId,
-  ignoreAllChains = false,
-  onChange,
-  chains
+import { ALL_NETWORK_ID as s } from "../../../../constants/chains.mjs";
+const W = ({
+  isLoading: p,
+  selectedChainId: o,
+  ignoreAllChains: u = !1,
+  onChange: a,
+  chains: m
 }) => {
-  const chainOptions = useMemo(() => {
-    const options = chains.map((chain) => ({
-      label: chain.networkName,
-      value: chain.chainId.toString(),
+  const i = e(() => {
+    const t = m.map((r) => ({
+      label: r.networkName,
+      value: r.chainId.toString(),
       chain: {
-        id: chain.chainId.toString(),
-        name: getDisplayName(chain),
-        networkName: chain.networkName,
-        svgUrl: chain.svgUrl,
-        pngUrl: chain.pngUrl
+        id: r.chainId.toString(),
+        name: d(r),
+        networkName: r.networkName,
+        svgUrl: r.svgUrl,
+        pngUrl: r.pngUrl
       }
     }));
-    if (ignoreAllChains) {
-      return options;
-    }
-    options.unshift({
+    return u || t.unshift({
       label: "All",
-      value: ALL_NETWORK_ID,
+      value: s,
       chain: {
-        id: ALL_NETWORK_ID,
+        id: s,
         name: "all",
         networkName: "All",
         svgUrl: "https://cdn.multiversx.com/liquidity-sdk/all-networks.svg",
         pngUrl: "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,
+    }), t;
+  }, [m]), c = e(() => i.find(
+    (t) => t.value.toString() === (o == null ? void 0 : o.toString())
+  ) ?? (i == null ? void 0 : i[0]), [i, o]);
+  return /* @__PURE__ */ n("div", { className: "styled-chain-select", "data-testid": "chainDropdown", children: /* @__PURE__ */ n(
+    f,
     {
       className: "basic-single",
       classNamePrefix: "styled-chain-select",
       maxMenuHeight: 260,
-      value: selectedChain,
-      isLoading,
+      value: c,
+      isLoading: p,
       styles: {
-        indicatorSeparator: IndicatorSeparator,
-        control: (css) => ({
-          ...css,
+        indicatorSeparator: v,
+        control: (t) => ({
+          ...t,
           width: "max-content",
           minWidth: "100%",
           maxWidth: "10rem"
         }),
-        menu: (css) => ({
-          ...css,
+        menu: (t) => ({
+          ...t,
           zIndex: 9999,
           width: "max-content",
           minWidth: "100%",
           right: 0
         })
       },
-      isSearchable: true,
+      isSearchable: !0,
       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());
-        }
+      options: i,
+      onChange: (t) => {
+        var r, l;
+        (r = t == null ? void 0 : t.chain) != null && r.id && (a == null || a((l = t.chain) == null ? void 0 : l.id.toString()));
       },
-      isMulti: false,
-      formatOptionLabel: FormatChainOptionLabel,
+      isMulti: !1,
+      formatOptionLabel: g,
       components: {
         Input: () => null,
-        SingleValue: SelectedChainOption
+        SingleValue: S
       }
     }
   ) });
 };
 export {
-  ChainSelect
+  W as ChainSelect
 };

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

@@ -1,52 +1,2 @@
 #!/usr/bin/env node
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-require("@multiversx/sdk-dapp-utils/out/helpers/formatAmount");
-require("@multiversx/sdk-dapp-utils/out/helpers/stringIsInteger");
-require("bignumber.js");
-require("../../../../../constants/index.js");
-require("@multiversx/sdk-dapp-utils/out/helpers/parseAmount");
-const reactjs_utils_mxClsx = require("../../../../../utils/mxClsx.js");
-const allNetworks = require("../../../../../../all-networks-NYACMyeN.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.pngUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: chain.pngUrl ?? reactjs_constants_chains.chainIdentifier[chain.name],
-            alt: "",
-            loading: "lazy",
-            className: reactjs_utils_mxClsx.mxClsx("liq-h-full liq-w-full", {
-              "liq-rounded-lg": chain.id !== reactjs_constants_chains.ALL_NETWORK_ID
-            })
-          }
-        ) : /* @__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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("@multiversx/sdk-dapp-utils/out/helpers/formatAmount");require("@multiversx/sdk-dapp-utils/out/helpers/stringIsInteger");require("bignumber.js");require("../../../../../constants/index.js");require("@multiversx/sdk-dapp-utils/out/helpers/parseAmount");const n=require("../../../../../utils/mxClsx.js"),a=require("../../../../../../helpers/safeImageUrl.js"),t=require("../../../../../../all-networks--dfVLHLJ.js"),i=require("../../../../../constants/chains.js"),c=({chain:l,inDropdown:s=!1})=>{const r=s?"in-dropdown":"hidden md:flex";return e.jsx("div",{className:"chain-element liq-flex liq-items-center liq-justify-between",children:e.jsxs("div",{className:"liq-flex liq-flex-row liq-items-center",children:[e.jsx("div",{className:`chain-image liq-mr-2 ${r}`,children:e.jsx("div",{className:"liq-h-6 liq-w-6 liq-flex-shrink-0 liq-overflow-hidden",children:l.pngUrl?e.jsx("img",{src:a.safeImageUrl(l.pngUrl,i.chainIdentifier[l.name]),alt:"",loading:"lazy",className:n.mxClsx("liq-h-full liq-w-full",{"liq-rounded-lg":l.id!==i.ALL_NETWORK_ID})}):e.jsx("img",{src:t.AllNetworks,alt:"",className:"liq-h-full liq-w-full"})})}),e.jsx("div",{className:"liq-flex liq-flex-col",children:e.jsx("div",{className:"liq-flex liq-items-center",children:e.jsx("div",{className:"chain-name liq-flex liq-items-center liq-gap-2 liq-whitespace-nowrap",children:l.networkName})})})]})})};exports.ChainOptionLabel=c;