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

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

@@ -1,136 +1,112 @@
-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 { MVX_CHAIN_IDS } from "../../../../constants/index.mjs";
-import { getDisplayName } from "../../../../helpers/getDisplayName.mjs";
+import { jsxs as u, jsx as c } from "react/jsx-runtime";
+import { useState as q, useRef as A, useMemo as g, useEffect as S } from "react";
+import { ChainSelect as D } from "./ChainSelect/ChainSelect.mjs";
+import { TokenList as R } from "./TokenList.mjs";
+import { MVX_CHAIN_IDS as b } from "../../../../constants/index.mjs";
+import { getDisplayName as V } from "../../../../helpers/getDisplayName.mjs";
 import "../../../constants/index.mjs";
-import { MxSearch } from "../../base/MxSearch/MxSearch.mjs";
-import { ALL_NETWORK_ID } from "../../../constants/chains.mjs";
-const SelectContent = ({
-  onSelect,
-  tokens = [],
-  chains = [],
-  isMvxSelector = false,
-  areChainsLoading,
-  selectedToken
+import { MxSearch as $ } from "../../base/MxSearch/MxSearch.mjs";
+import { ALL_NETWORK_ID as C } from "../../../constants/chains.mjs";
+const z = ({
+  onSelect: N,
+  tokens: l = [],
+  chains: d = [],
+  isMvxSelector: o = !1,
+  areChainsLoading: L,
+  selectedToken: s
 }) => {
-  const [filteredTokens, setFilteredTokens] = useState(tokens);
-  const [selected, setSelected] = useState(selectedToken);
-  const searchPatternRef = useRef("");
-  const availableChains = useMemo(() => {
-    if (isMvxSelector) {
-      return chains.filter(
-        (chain) => MVX_CHAIN_IDS.includes(chain.chainId.toString())
-      );
-    }
-    return chains.filter(
-      (chain) => !MVX_CHAIN_IDS.includes(chain.chainId.toString())
-    );
-  }, [chains, isMvxSelector]);
-  const defaultChainId = useMemo(() => {
-    var _a;
-    if (isMvxSelector) {
-      const mvxChainWithTokens = availableChains.find(
-        (chain) => tokens.some(
-          (token) => token.chainId.toString() === chain.chainId.toString()
+  const [f, a] = q(l), [w, I] = q(s), m = A(""), r = g(() => o ? d.filter(
+    (e) => b.includes(e.chainId.toString())
+  ) : d.filter(
+    (e) => !b.includes(e.chainId.toString())
+  ), [d, o]), h = g(() => {
+    var e;
+    if (o) {
+      const i = r.find(
+        (n) => l.some(
+          (_) => _.chainId.toString() === n.chainId.toString()
         )
       );
-      return (mvxChainWithTokens == null ? void 0 : mvxChainWithTokens.chainId.toString()) ?? ((_a = availableChains[0]) == null ? void 0 : _a.chainId.toString()) ?? ALL_NETWORK_ID;
+      return (i == null ? void 0 : i.chainId.toString()) ?? ((e = r[0]) == null ? void 0 : e.chainId.toString()) ?? C;
     }
-    return ALL_NETWORK_ID;
-  }, [availableChains, tokens, isMvxSelector]);
-  const [selectedChainId, setSelectedChainId] = useState(defaultChainId);
-  useEffect(() => {
-    const isCurrentSelectionValid = availableChains.some(
-      (chain) => chain.chainId.toString() === selectedChainId
+    return C;
+  }, [r, l, o]), [t, p] = q(h);
+  S(() => {
+    r.some(
+      (i) => i.chainId.toString() === t
+    ) || p(h);
+  }, [h, r, t]);
+  const T = g(() => {
+    const e = r.find(
+      (i) => i.chainId.toString() === t
     );
-    if (!isCurrentSelectionValid) {
-      setSelectedChainId(defaultChainId);
-    }
-  }, [defaultChainId, availableChains, selectedChainId]);
-  const filteredTokensText = useMemo(() => {
-    const selectedChain = availableChains.find(
-      (chain) => chain.chainId.toString() === selectedChainId
-    );
-    if (!selectedChain) {
-      return `Tokens on all networks (${tokens.length})`;
-    }
-    return `Tokens on ${getDisplayName(selectedChain)} (${filteredTokens.length})`;
-  }, [availableChains, filteredTokens.length, selectedChainId, tokens.length]);
-  const handleSelect = (token) => {
-    setSelected(token);
-    onSelect(token);
-  };
-  const handleSearch = (pattern) => {
-    searchPatternRef.current = pattern;
-    if (selectedChainId === ALL_NETWORK_ID) {
-      if (pattern.trim() === "") {
-        setFilteredTokens(tokens);
-      } else {
-        const filtered = tokens.filter(
-          (token) => token.symbol.toLowerCase().includes(pattern.toLowerCase())
+    return e ? `Tokens on ${V(e)} (${f.length})` : `Tokens on all networks (${l.length})`;
+  }, [r, f.length, t, l.length]), y = (e) => {
+    I(e), N(e);
+  }, x = (e) => {
+    if (m.current = e, t === C) {
+      if (e.trim() === "")
+        a(l);
+      else {
+        const i = l.filter(
+          (n) => n.symbol.toLowerCase().includes(e.toLowerCase())
         );
-        setFilteredTokens(filtered);
+        a(i);
       }
       return;
     }
-    if (pattern.trim() === "") {
-      const filtered = tokens.filter(
-        (token) => token.chainId.toString() === selectedChainId.toString()
+    if (e.trim() === "") {
+      const i = l.filter(
+        (n) => n.chainId.toString() === t.toString()
       );
-      setFilteredTokens(filtered);
+      a(i);
     } else {
-      const filtered = tokens.filter(
-        (token) => token.symbol.toLowerCase().includes(pattern.toLowerCase()) && token.chainId.toString() === selectedChainId.toString()
+      const i = l.filter(
+        (n) => n.symbol.toLowerCase().includes(e.toLowerCase()) && n.chainId.toString() === t.toString()
       );
-      setFilteredTokens(filtered);
+      a(i);
     }
   };
-  useEffect(() => {
-    setFilteredTokens(tokens);
-    setSelected(selectedToken);
-    searchPatternRef.current = "";
-  }, [selectedToken, tokens]);
-  useEffect(() => {
-    handleSearch(searchPatternRef.current);
-  }, [selectedChainId, tokens]);
-  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,
+  return S(() => {
+    a(l), I(s), m.current = "";
+  }, [s, l]), S(() => {
+    x(m.current);
+  }, [t, l]), /* @__PURE__ */ u("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__ */ c("div", { className: "liq-flex liq-flex-col liq-gap-3 liq-rounded-t-2xl liq-p-2", children: /* @__PURE__ */ u("div", { className: "liq-flex liq-gap-2", children: [
+      /* @__PURE__ */ c(
+        $,
         {
           inputClassName: "!liq-bg-neutral-750 liq-border liq-border-neutral-750",
           placeholder: "Search token",
-          onChange: handleSearch
+          onChange: x
         }
       ),
-      !isMvxSelector && /* @__PURE__ */ jsx(
-        ChainSelect,
+      !o && /* @__PURE__ */ c(
+        D,
         {
-          chains: availableChains,
-          ignoreAllChains: isMvxSelector,
-          selectedChainId,
-          onChange: (chainId) => {
-            setSelectedChainId(chainId);
+          chains: r,
+          ignoreAllChains: o,
+          selectedChainId: t,
+          onChange: (e) => {
+            p(e);
           },
-          isLoading: areChainsLoading
+          isLoading: L
         }
       )
     ] }) }),
-    /* @__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,
+    /* @__PURE__ */ u("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__ */ c("div", { className: "liq-flex liq-text-left liq-text-neutral-300 liq-mt-4 liq-ml-2", children: T }),
+      /* @__PURE__ */ c(
+        R,
         {
-          tokens: filteredTokens,
-          onSelect: handleSelect,
-          selectedToken: selected
+          tokens: f,
+          onSelect: y,
+          selectedToken: w
         }
       )
     ] })
   ] });
 };
 export {
-  SelectContent
+  z as SelectContent
 };

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

@@ -1,29 +1,2 @@
 #!/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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./TokenIcon.js"),l=require("./TokenSymbol.js"),i=({value:n})=>e.jsxs(e.Fragment,{children:[e.jsx(t.TokenIcon,{size:"lg",token:n,className:"liq-flex liq-items-center liq-justify-center liq-relative"}),e.jsxs("div",{className:"liq-flex-1 liq-truncate liq-text-left",children:[n&&e.jsx("div",{className:"liq-flex liq-flex-col",children:e.jsx("div",{className:"liq-flex liq-items-center",children:e.jsx(l.TokenSymbol,{token:n,className:"liq-font-semibold liq-leading-none"})})}),!n&&e.jsx("div",{className:"liq-text-neutral-500",children:"Select token"})]})]});exports.SelectedOption=i;

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

@@ -1,28 +1,26 @@
-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,
+import { jsxs as i, Fragment as t, jsx as e } from "react/jsx-runtime";
+import { TokenIcon as n } from "./TokenIcon.mjs";
+import { TokenSymbol as r } from "./TokenSymbol.mjs";
+const m = ({ value: l }) => /* @__PURE__ */ i(t, { children: [
+  /* @__PURE__ */ e(
+    n,
+    {
+      size: "lg",
+      token: l,
+      className: "liq-flex liq-items-center liq-justify-center liq-relative"
+    }
+  ),
+  /* @__PURE__ */ i("div", { className: "liq-flex-1 liq-truncate liq-text-left", children: [
+    l && /* @__PURE__ */ e("div", { className: "liq-flex liq-flex-col", children: /* @__PURE__ */ e("div", { className: "liq-flex liq-items-center", children: /* @__PURE__ */ e(
+      r,
       {
-        size: "lg",
-        token: value,
-        className: "liq-flex liq-items-center liq-justify-center liq-relative"
+        token: l,
+        className: "liq-font-semibold liq-leading-none"
       }
-    ),
-    /* @__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" })
-    ] })
-  ] });
-};
+    ) }) }),
+    !l && /* @__PURE__ */ e("div", { className: "liq-text-neutral-500", children: "Select token" })
+  ] })
+] });
 export {
-  SelectedOption
+  m as SelectedOption
 };

package/reactjs/components/TokenSelector/components/TokenIcon.js

@@ -1,82 +1,2 @@
 #!/usr/bin/env node
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const faDiamond = require("@fortawesome/free-solid-svg-icons/faDiamond");
-const reactFontawesome = require("@fortawesome/react-fontawesome");
-const React = require("react");
-const _default = require("../../../../default-H3AbmzFV.js");
-const reactjs_utils_mxClsx = require("../../../utils/mxClsx.js");
-const TokenIcon = ({
-  token,
-  size = "lg",
-  className = ""
-}) => {
-  const getIconComponent = React.useCallback(
-    (assetTicker) => {
-      if (!assetTicker || !token) {
-        return /* @__PURE__ */ jsxRuntime.jsx("img", { src: _default.DefaultIcon, alt: "" });
-      }
-      return token.pngUrl && token.pngUrl !== "" ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
-        {
-          src: token.pngUrl,
-          alt: "",
-          className: "liq-asset-icon liq-sm liq-p-0"
-        }
-      ) }) : /* @__PURE__ */ jsxRuntime.jsx("img", { src: _default.DefaultIcon, alt: "" });
-    },
-    [token]
-  );
-  const IconComponent = React.useMemo(
-    () => getIconComponent(token == null ? void 0 : token.symbol),
-    [getIconComponent, token == null ? void 0 : token.symbol]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: reactjs_utils_mxClsx.mxClsx(
-        "liq-flex-shrink-0 liq-overflow-hidden liq-rounded-full",
-        {
-          "liq-h-4 liq-w-4": size === "xs",
-          "liq-h-5 liq-w-5": size === "2xs",
-          "liq-h-6 liq-w-6": size === "sm",
-          "liq-h-7 liq-w-7": size === "2sm",
-          "liq-h-8 liq-w-8": size === "md",
-          "liq-h-10 liq-w-10": size === "lg",
-          "liq-h-12 liq-w-12": size === "xl",
-          "liq-h-14 liq-w-14": size === "2xl",
-          "liq-h-16 liq-w-16": size === "3xl"
-        },
-        className
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: IconComponent ? /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: reactjs_utils_mxClsx.mxClsx(
-            {
-              "liq-h-4 liq-w-4": size === "xs",
-              "liq-h-5 liq-w-5": size === "2xs",
-              "liq-h-6 liq-w-6": size === "sm",
-              "liq-h-7 liq-w-7": size === "2sm",
-              "liq-h-8 liq-w-8": size === "md",
-              "liq-h-10 liq-w-10": size === "lg",
-              "liq-h-12 liq-w-12": size === "xl",
-              "liq-h-14 liq-w-14": size === "2xl",
-              "liq-h-16 liq-w-16": size === "3xl"
-            },
-            className
-          ),
-          children: IconComponent
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex liq-h-full liq-w-full liq-items-center liq-justify-center liq-rounded-full liq-bg-black liq-p-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-        reactFontawesome.FontAwesomeIcon,
-        {
-          icon: faDiamond.faDiamond,
-          className: "liq-text-neutral-500"
-        }
-      ) }) })
-    }
-  );
-};
-exports.TokenIcon = TokenIcon;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("react/jsx-runtime"),t=require("@fortawesome/free-solid-svg-icons/faDiamond"),o=require("@fortawesome/react-fontawesome"),c=require("react"),u=require("../../../../helpers/safeImageUrl.js"),r=require("../../../../default-DbU6vPaB.js"),a=require("../../../utils/mxClsx.js"),x=({token:i,size:l="lg",className:e=""})=>{const s=c.useCallback(m=>!m||!i?q.jsx("img",{src:r.DefaultIcon,alt:""}):i.pngUrl&&i.pngUrl!==""?q.jsx(q.Fragment,{children:q.jsx("img",{src:u.safeImageUrl(i.pngUrl,r.DefaultIcon),alt:"",className:"liq-asset-icon liq-sm liq-p-0"})}):q.jsx("img",{src:r.DefaultIcon,alt:""}),[i]),n=c.useMemo(()=>s(i==null?void 0:i.symbol),[s,i==null?void 0:i.symbol]);return q.jsx("div",{className:a.mxClsx("liq-flex-shrink-0 liq-overflow-hidden liq-rounded-full",{"liq-h-4 liq-w-4":l==="xs","liq-h-5 liq-w-5":l==="2xs","liq-h-6 liq-w-6":l==="sm","liq-h-7 liq-w-7":l==="2sm","liq-h-8 liq-w-8":l==="md","liq-h-10 liq-w-10":l==="lg","liq-h-12 liq-w-12":l==="xl","liq-h-14 liq-w-14":l==="2xl","liq-h-16 liq-w-16":l==="3xl"},e),children:q.jsx(q.Fragment,{children:n?q.jsx("div",{className:a.mxClsx({"liq-h-4 liq-w-4":l==="xs","liq-h-5 liq-w-5":l==="2xs","liq-h-6 liq-w-6":l==="sm","liq-h-7 liq-w-7":l==="2sm","liq-h-8 liq-w-8":l==="md","liq-h-10 liq-w-10":l==="lg","liq-h-12 liq-w-12":l==="xl","liq-h-14 liq-w-14":l==="2xl","liq-h-16 liq-w-16":l==="3xl"},e),children:n}):q.jsx("div",{className:"liq-flex liq-h-full liq-w-full liq-items-center liq-justify-center liq-rounded-full liq-bg-black liq-p-1",children:q.jsx(o.FontAwesomeIcon,{icon:t.faDiamond,className:"liq-text-neutral-500"})})})})};exports.TokenIcon=x;

package/reactjs/components/TokenSelector/components/TokenIcon.mjs

@@ -1,75 +1,70 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { faDiamond } from "@fortawesome/free-solid-svg-icons/faDiamond";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useCallback, useMemo } from "react";
-import { D as DefaultIcon } from "../../../../default-BYtXv70Z.mjs";
-import { mxClsx } from "../../../utils/mxClsx.mjs";
-const TokenIcon = ({
-  token,
-  size = "lg",
-  className = ""
+import { jsx as q, Fragment as o } from "react/jsx-runtime";
+import { faDiamond as w } from "@fortawesome/free-solid-svg-icons/faDiamond";
+import { FontAwesomeIcon as s } from "@fortawesome/react-fontawesome";
+import { useCallback as f, useMemo as d } from "react";
+import { safeImageUrl as t } from "../../../../helpers/safeImageUrl.mjs";
+import { D as r } from "../../../../default-D0Jk5ROI.mjs";
+import { mxClsx as a } from "../../../utils/mxClsx.mjs";
+const v = ({
+  token: i,
+  size: l = "lg",
+  className: m = ""
 }) => {
-  const getIconComponent = useCallback(
-    (assetTicker) => {
-      if (!assetTicker || !token) {
-        return /* @__PURE__ */ jsx("img", { src: DefaultIcon, alt: "" });
+  const c = f(
+    (n) => !n || !i ? /* @__PURE__ */ q("img", { src: r, alt: "" }) : i.pngUrl && i.pngUrl !== "" ? /* @__PURE__ */ q(o, { children: /* @__PURE__ */ q(
+      "img",
+      {
+        src: t(i.pngUrl, r),
+        alt: "",
+        className: "liq-asset-icon liq-sm liq-p-0"
       }
-      return token.pngUrl && token.pngUrl !== "" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: token.pngUrl,
-          alt: "",
-          className: "liq-asset-icon liq-sm liq-p-0"
-        }
-      ) }) : /* @__PURE__ */ jsx("img", { src: DefaultIcon, alt: "" });
-    },
-    [token]
-  );
-  const IconComponent = useMemo(
-    () => getIconComponent(token == null ? void 0 : token.symbol),
-    [getIconComponent, token == null ? void 0 : token.symbol]
+    ) }) : /* @__PURE__ */ q("img", { src: r, alt: "" }),
+    [i]
+  ), h = d(
+    () => c(i == null ? void 0 : i.symbol),
+    [c, i == null ? void 0 : i.symbol]
   );
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ q(
     "div",
     {
-      className: mxClsx(
+      className: a(
         "liq-flex-shrink-0 liq-overflow-hidden liq-rounded-full",
         {
-          "liq-h-4 liq-w-4": size === "xs",
-          "liq-h-5 liq-w-5": size === "2xs",
-          "liq-h-6 liq-w-6": size === "sm",
-          "liq-h-7 liq-w-7": size === "2sm",
-          "liq-h-8 liq-w-8": size === "md",
-          "liq-h-10 liq-w-10": size === "lg",
-          "liq-h-12 liq-w-12": size === "xl",
-          "liq-h-14 liq-w-14": size === "2xl",
-          "liq-h-16 liq-w-16": size === "3xl"
+          "liq-h-4 liq-w-4": l === "xs",
+          "liq-h-5 liq-w-5": l === "2xs",
+          "liq-h-6 liq-w-6": l === "sm",
+          "liq-h-7 liq-w-7": l === "2sm",
+          "liq-h-8 liq-w-8": l === "md",
+          "liq-h-10 liq-w-10": l === "lg",
+          "liq-h-12 liq-w-12": l === "xl",
+          "liq-h-14 liq-w-14": l === "2xl",
+          "liq-h-16 liq-w-16": l === "3xl"
         },
-        className
+        m
       ),
-      children: /* @__PURE__ */ jsx(Fragment, { children: IconComponent ? /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ q(o, { children: h ? /* @__PURE__ */ q(
         "div",
         {
-          className: mxClsx(
+          className: a(
             {
-              "liq-h-4 liq-w-4": size === "xs",
-              "liq-h-5 liq-w-5": size === "2xs",
-              "liq-h-6 liq-w-6": size === "sm",
-              "liq-h-7 liq-w-7": size === "2sm",
-              "liq-h-8 liq-w-8": size === "md",
-              "liq-h-10 liq-w-10": size === "lg",
-              "liq-h-12 liq-w-12": size === "xl",
-              "liq-h-14 liq-w-14": size === "2xl",
-              "liq-h-16 liq-w-16": size === "3xl"
+              "liq-h-4 liq-w-4": l === "xs",
+              "liq-h-5 liq-w-5": l === "2xs",
+              "liq-h-6 liq-w-6": l === "sm",
+              "liq-h-7 liq-w-7": l === "2sm",
+              "liq-h-8 liq-w-8": l === "md",
+              "liq-h-10 liq-w-10": l === "lg",
+              "liq-h-12 liq-w-12": l === "xl",
+              "liq-h-14 liq-w-14": l === "2xl",
+              "liq-h-16 liq-w-16": l === "3xl"
             },
-            className
+            m
           ),
-          children: IconComponent
+          children: h
         }
-      ) : /* @__PURE__ */ jsx("div", { className: "liq-flex liq-h-full liq-w-full liq-items-center liq-justify-center liq-rounded-full liq-bg-black liq-p-1", children: /* @__PURE__ */ jsx(
-        FontAwesomeIcon,
+      ) : /* @__PURE__ */ q("div", { className: "liq-flex liq-h-full liq-w-full liq-items-center liq-justify-center liq-rounded-full liq-bg-black liq-p-1", children: /* @__PURE__ */ q(
+        s,
         {
-          icon: faDiamond,
+          icon: w,
           className: "liq-text-neutral-500"
         }
       ) }) })
@@ -77,5 +72,5 @@ const TokenIcon = ({
   );
 };
 export {
-  TokenIcon
+  v as TokenIcon
 };

package/reactjs/components/TokenSelector/components/TokenItem.js

@@ -1,81 +1,2 @@
 #!/usr/bin/env node
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("@reown/appkit/react");
-const React = require("react");
-const reactjs_components_TokenSelector_components_TokenIcon = require("./TokenIcon.js");
-const types_chainType = require("../../../../types/chainType.js");
-const reactjs_context_useWeb3App = require("../../../context/useWeb3App.js");
-const reactjs_hooks_useGetChainId = require("../../../hooks/useGetChainId.js");
-const reactjs_hooks_useResolveTokenChain = require("../../../hooks/useResolveTokenChain.js");
-const TokenItem = ({
-  token,
-  onClick,
-  selected
-}) => {
-  var _a, _b;
-  const { tokenChain, chainIcon } = reactjs_hooks_useResolveTokenChain.useResolveTokenChain({
-    token
-  });
-  const { supportedChains: sdkChains } = reactjs_context_useWeb3App.useWeb3App();
-  const { switchNetwork } = react.useAppKitNetwork();
-  const chainId = reactjs_hooks_useGetChainId.useGetChainId();
-  const activeChain = React.useMemo(() => {
-    return sdkChains == null ? void 0 : sdkChains.find(
-      (chain) => chain.id.toString() === (chainId == null ? void 0 : chainId.toString())
-    );
-  }, [chainId, sdkChains]);
-  const handleSwitchChain = React.useCallback(() => {
-    if ((tokenChain == null ? void 0 : tokenChain.chainType) !== types_chainType.ChainType.evm) {
-      return;
-    }
-    if (activeChain && (tokenChain == null ? void 0 : tokenChain.chainId) && (activeChain == null ? void 0 : activeChain.id.toString()) !== (tokenChain == null ? void 0 : tokenChain.chainId.toString())) {
-      switchNetwork(
-        (sdkChains == null ? void 0 : sdkChains.find(
-          (chain) => chain.id.toString() === (tokenChain == null ? void 0 : tokenChain.chainId.toString())
-        )) ?? activeChain
-      );
-    }
-  }, [
-    activeChain,
-    sdkChains,
-    switchNetwork,
-    tokenChain == null ? void 0 : tokenChain.chainId,
-    tokenChain == null ? void 0 : tokenChain.chainType
-  ]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-testid": `token-item-${(_b = (_a = token.symbol) == null ? void 0 : _a.toLowerCase) == null ? void 0 : _b.call(_a)}`,
-      className: `token-item ${selected ? "liq-selected" : ""} liq-flex liq-cursor-pointer liq-items-center liq-justify-between liq-rounded-lg liq-p-2 hover:liq-bg-neutral-700 liq-bg-neutral-850`,
-      onClick: () => {
-        handleSwitchChain();
-        onClick(token);
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-w-full liq-items-center liq-relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reactjs_components_TokenSelector_components_TokenIcon.TokenIcon,
-          {
-            size: "lg",
-            token,
-            className: "liq-flex liq-items-center liq-justify-center"
-          }
-        ),
-        chainIcon && /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: chainIcon,
-            alt: "",
-            className: "liq-absolute liq-left-4 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.jsxs("div", { className: "liq-ml-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-text-sm liq-font-bold", children: token.symbol }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-text-xs liq-text-gray-400", children: token.name })
-        ] })
-      ] })
-    }
-  );
-};
-exports.TokenItem = TokenItem;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),x=require("@reown/appkit/react"),a=require("react"),b=require("./TokenIcon.js"),g=require("../../../../types/chainType.js"),j=require("../../../context/useWeb3App.js"),f=require("../../../hooks/useGetChainId.js"),h=require("../../../hooks/useResolveTokenChain.js"),y=({token:s,onClick:d,selected:m})=>{var c,u;const{tokenChain:e,chainIcon:n}=h.useResolveTokenChain({token:s}),{supportedChains:i}=j.useWeb3App(),{switchNetwork:q}=x.useAppKitNetwork(),r=f.useGetChainId(),l=a.useMemo(()=>i==null?void 0:i.find(o=>o.id.toString()===(r==null?void 0:r.toString())),[r,i]),p=a.useCallback(()=>{(e==null?void 0:e.chainType)===g.ChainType.evm&&l&&e!=null&&e.chainId&&(l==null?void 0:l.id.toString())!==(e==null?void 0:e.chainId.toString())&&q((i==null?void 0:i.find(o=>o.id.toString()===(e==null?void 0:e.chainId.toString())))??l)},[l,i,q,e==null?void 0:e.chainId,e==null?void 0:e.chainType]);return t.jsx("div",{"data-testid":`token-item-${(u=(c=s.symbol)==null?void 0:c.toLowerCase)==null?void 0:u.call(c)}`,className:`token-item ${m?"liq-selected":""} liq-flex liq-cursor-pointer liq-items-center liq-justify-between liq-rounded-lg liq-p-2 hover:liq-bg-neutral-700 liq-bg-neutral-850`,onClick:()=>{p(),d(s)},children:t.jsxs("div",{className:"liq-flex liq-w-full liq-items-center liq-relative",children:[t.jsx(b.TokenIcon,{size:"lg",token:s,className:"liq-flex liq-items-center liq-justify-center"}),n&&t.jsx("img",{src:n,alt:"",className:"liq-absolute liq-left-4 liq-bottom-[-2px] liq-chain-icon liq-sm liq-w-6 liq-h-6 liq-border-[3px] liq-border-neutral-850  liq-rounded-lg"}),t.jsxs("div",{className:"liq-ml-2",children:[t.jsx("div",{className:"liq-text-sm liq-font-bold",children:s.symbol}),t.jsx("div",{className:"liq-text-xs liq-text-gray-400",children:s.name})]})]})})};exports.TokenItem=y;