@multiversx/sdk-dapp-liquidity 1.1.2-alpha.5 → 1.1.2-alpha.7

package/helpers/getDisplayName.d.ts

@@ -0,0 +1,3 @@
+import { ChainDTO } from 'dto/Chain.dto';
+
+export declare const getDisplayName: (chain?: ChainDTO) => string;

package/helpers/getDisplayName.js

@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../reactjs/constants/index.js");
+const reactjs_constants_chains = require("../reactjs/constants/chains.js");
+const getDisplayName = (chain) => {
+  if (!(chain == null ? void 0 : chain.chainName)) {
+    return (chain == null ? void 0 : chain.networkName) || "";
+  }
+  return reactjs_constants_chains.ChainName[chain.chainName] || chain.networkName;
+};
+exports.getDisplayName = getDisplayName;

package/helpers/getDisplayName.mjs

@@ -0,0 +1,11 @@
+import "../reactjs/constants/index.mjs";
+import { ChainName } from "../reactjs/constants/chains.mjs";
+const getDisplayName = (chain) => {
+  if (!(chain == null ? void 0 : chain.chainName)) {
+    return (chain == null ? void 0 : chain.networkName) || "";
+  }
+  return ChainName[chain.chainName] || chain.networkName;
+};
+export {
+  getDisplayName
+};

package/package.json

@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/multiversx/mx-sdk-dapp-liquidity#readme",
   "license": "MIT",
-  "version": "1.1.2-alpha.5",
+  "version": "1.1.2-alpha.7",
   "main": "index.js",
   "module": "index.mjs",
   "types": "index.d.ts",

package/reactjs/components/BridgeForm/Deposit.js

@@ -485,6 +485,7 @@ const Deposit = ({
                     options: fromOptions,
                     areOptionsLoading: isTokensLoading,
                     isMvxSelector: isFirstTokenMvx,
+                    isDestination: false,
                     color: "neutral-850",
                     onChange: onChangeFirstSelect,
                     onBlur: handleBlur,
@@ -545,6 +546,7 @@ const Deposit = ({
                     options: toOptions,
                     areOptionsLoading: isTokensLoading,
                     isMvxSelector: isSecondTokenMvx,
+                    isDestination: true,
                     color: "neutral-850",
                     onChange: onChangeSecondSelect,
                     onBlur: handleBlur,

package/reactjs/components/BridgeForm/Deposit.mjs

@@ -482,6 +482,7 @@ const Deposit = ({
                     options: fromOptions,
                     areOptionsLoading: isTokensLoading,
                     isMvxSelector: isFirstTokenMvx,
+                    isDestination: false,
                     color: "neutral-850",
                     onChange: onChangeFirstSelect,
                     onBlur: handleBlur,
@@ -542,6 +543,7 @@ const Deposit = ({
                     options: toOptions,
                     areOptionsLoading: isTokensLoading,
                     isMvxSelector: isSecondTokenMvx,
+                    isDestination: true,
                     color: "neutral-850",
                     onChange: onChangeSecondSelect,
                     onBlur: handleBlur,

package/reactjs/components/BridgeForm/Transfer.js

@@ -430,6 +430,7 @@ const Transfer = ({
                     options: fromOptions,
                     areOptionsLoading: isTokensLoading,
                     isMvxSelector: isFirstTokenMvx,
+                    isDestination: false,
                     color: "neutral-850",
                     onChange: onChangeFirstSelect,
                     onBlur: handleBlur,
@@ -485,6 +486,7 @@ const Transfer = ({
                     options: toOptions,
                     areOptionsLoading: isTokensLoading,
                     isMvxSelector: isSecondTokenMvx,
+                    isDestination: true,
                     color: "neutral-850",
                     onChange: onChangeSecondSelect,
                     onBlur: handleBlur,

package/reactjs/components/BridgeForm/Transfer.mjs

@@ -427,6 +427,7 @@ const Transfer = ({
                     options: fromOptions,
                     areOptionsLoading: isTokensLoading,
                     isMvxSelector: isFirstTokenMvx,
+                    isDestination: false,
                     color: "neutral-850",
                     onChange: onChangeFirstSelect,
                     onBlur: handleBlur,
@@ -482,6 +483,7 @@ const Transfer = ({
                     options: toOptions,
                     areOptionsLoading: isTokensLoading,
                     isMvxSelector: isSecondTokenMvx,
+                    isDestination: true,
                     color: "neutral-850",
                     onChange: onChangeSecondSelect,
                     onBlur: handleBlur,

package/reactjs/components/Connect/BridgeAccountDisplay.js

@@ -7,6 +7,7 @@ const reactFontawesome = require("@fortawesome/react-fontawesome");
 const react = require("@reown/appkit/react");
 const React = require("react");
 const api_checkAccount = require("../../../api/checkAccount.js");
+const helpers_getDisplayName = require("../../../helpers/getDisplayName.js");
 const reactjs_components_Connect_SwitchChainButton = require("./SwitchChainButton.js");
 const helpers_getApiURL = require("../../../helpers/getApiURL.js");
 const reactjs_context_useWeb3App = require("../../context/useWeb3App.js");
@@ -130,7 +131,7 @@ const BridgeAccountDisplay = ({
             " "
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("img", { src: activeChain == null ? void 0 : activeChain.pngUrl, alt: "", className: "liq-w-4" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-truncate md:liq-text-clip", children: activeChain == null ? void 0 : activeChain.networkName })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-truncate md:liq-text-clip", children: helpers_getDisplayName.getDisplayName(activeChain) })
         ] }) })
       }
     )

package/reactjs/components/Connect/BridgeAccountDisplay.mjs

@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useDisconnect } from "@reown/appkit/react";
 import { useCallback, useEffect } from "react";
 import { checkAccount } from "../../../api/checkAccount.mjs";
+import { getDisplayName } from "../../../helpers/getDisplayName.mjs";
 import { SwitchChainButton } from "./SwitchChainButton.mjs";
 import { getApiURL } from "../../../helpers/getApiURL.mjs";
 import { useWeb3App } from "../../context/useWeb3App.mjs";
@@ -127,7 +128,7 @@ const BridgeAccountDisplay = ({
             " "
           ] }),
           /* @__PURE__ */ jsx("img", { src: activeChain == null ? void 0 : activeChain.pngUrl, alt: "", className: "liq-w-4" }),
-          /* @__PURE__ */ jsx("div", { className: "liq-truncate md:liq-text-clip", children: activeChain == null ? void 0 : activeChain.networkName })
+          /* @__PURE__ */ jsx("div", { className: "liq-truncate md:liq-text-clip", children: getDisplayName(activeChain) })
         ] }) })
       }
     )

package/reactjs/components/Connect/BridgeConnectButton.js

@@ -3,14 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const reactjs_components_Connect_CustomConnectButton = require("./CustomConnectButton.js");
-const reactjs_constants_chains = require("../../constants/chains.js");
+const helpers_getDisplayName = require("../../../helpers/getDisplayName.js");
 const reactjs_hooks_useAccount = require("../../hooks/useAccount.js");
-const getDisplayName = (chain) => {
-  if (!(chain == null ? void 0 : chain.chainName)) {
-    return (chain == null ? void 0 : chain.networkName) || "";
-  }
-  return reactjs_constants_chains.ChainName[chain.chainName] || chain.networkName;
-};
 const BridgeConnectButton = ({
   activeChain,
   disabled,
@@ -27,7 +21,7 @@ const BridgeConnectButton = ({
         className: "liq-z-10 liq-flex liq-h-[1.5rem] liq-w-[1.5rem] liq-p-1"
       }
     ),
-    (activeChain == null ? void 0 : activeChain.networkName) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-inline sm:liq-hidden liq-truncate", children: getDisplayName(activeChain) })
+    (activeChain == null ? void 0 : activeChain.networkName) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-inline liq-truncate", children: helpers_getDisplayName.getDisplayName(activeChain) })
   ] }) });
 };
 exports.BridgeConnectButton = BridgeConnectButton;

package/reactjs/components/Connect/BridgeConnectButton.mjs

@@ -1,13 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CustomConnectButton } from "./CustomConnectButton.mjs";
-import { ChainName } from "../../constants/chains.mjs";
+import { getDisplayName } from "../../../helpers/getDisplayName.mjs";
 import { useAccount } from "../../hooks/useAccount.mjs";
-const getDisplayName = (chain) => {
-  if (!(chain == null ? void 0 : chain.chainName)) {
-    return (chain == null ? void 0 : chain.networkName) || "";
-  }
-  return ChainName[chain.chainName] || chain.networkName;
-};
 const BridgeConnectButton = ({
   activeChain,
   disabled,
@@ -24,7 +18,7 @@ const BridgeConnectButton = ({
         className: "liq-z-10 liq-flex liq-h-[1.5rem] liq-w-[1.5rem] liq-p-1"
       }
     ),
-    (activeChain == null ? void 0 : activeChain.networkName) && /* @__PURE__ */ jsx("span", { className: "liq-inline sm:liq-hidden liq-truncate", children: getDisplayName(activeChain) })
+    (activeChain == null ? void 0 : activeChain.networkName) && /* @__PURE__ */ jsx("span", { className: "liq-inline liq-truncate", children: getDisplayName(activeChain) })
   ] }) });
 };
 export {

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

@@ -1,6 +1,6 @@
 import { TokenType } from '../../../types/token';
 
-export declare const TokenSelector: ({ name, options, selectedOption, areOptionsLoading, className, disabled, isMvxSelector, omitDisableClass, color, onBlur, onChange, onMaxBtnClick, onTokenSelectorDisplay }: {
+export declare const TokenSelector: ({ name, options, selectedOption, areOptionsLoading, className, disabled, isMvxSelector, omitDisableClass, isDestination, color, onBlur, onChange, onMaxBtnClick, onTokenSelectorDisplay }: {
     name: string;
     options: TokenType[];
     selectedOption?: TokenType;
@@ -8,6 +8,7 @@ export declare const TokenSelector: ({ name, options, selectedOption, areOptions
     disabled?: boolean;
     isMvxSelector?: boolean;
     omitDisableClass?: boolean;
+    isDestination?: boolean;
     className?: string;
     color?: "neutral-750" | "neutral-850";
     onChange: (option?: TokenType) => void;

package/reactjs/components/TokenSelector/TokenSelector.js

@@ -24,6 +24,7 @@ const TokenSelector = ({
   disabled = false,
   isMvxSelector = false,
   omitDisableClass = false,
+  isDestination = false,
   color = "neutral-750",
   onBlur,
   onChange,
@@ -45,8 +46,28 @@ const TokenSelector = ({
       (chain) => !constants_index.MVX_CHAIN_IDS.includes(chain.chainId.toString())
     )) ?? [];
   }, [data, isMvxSelector]);
-  const isDestinationMvx = name === "secondToken" && isMvxSelector;
+  const isDestinationMvx = React.useMemo(() => {
+    const shouldDisable = isMvxSelector && isDestination;
+    if (isMvxSelector) {
+      console.log(`🔍 TokenSelector [${name}]:`, {
+        isMvxSelector,
+        isDestination,
+        shouldDisable,
+        disabled,
+        chainsLength: chains.length
+      });
+    }
+    return shouldDisable;
+  }, [isMvxSelector, isDestination, name, disabled, chains.length]);
   const isVisuallyDisabled = disabled || chains.length < 2 || isDestinationMvx;
+  if (isMvxSelector) {
+    console.log(`🎛️ Final disable state [${name}]:`, {
+      disabled,
+      "chains.length < 2": chains.length < 2,
+      isDestinationMvx,
+      isVisuallyDisabled
+    });
+  }
   const handleOnClick = () => setShow(true);
   const showLoadingSkeleton = (areOptionsLoading || areChainsLoading) && !selectedOption;
   React.useEffect(() => {

package/reactjs/components/TokenSelector/TokenSelector.mjs

@@ -21,6 +21,7 @@ const TokenSelector = ({
   disabled = false,
   isMvxSelector = false,
   omitDisableClass = false,
+  isDestination = false,
   color = "neutral-750",
   onBlur,
   onChange,
@@ -42,8 +43,28 @@ const TokenSelector = ({
       (chain) => !MVX_CHAIN_IDS.includes(chain.chainId.toString())
     )) ?? [];
   }, [data, isMvxSelector]);
-  const isDestinationMvx = name === "secondToken" && isMvxSelector;
+  const isDestinationMvx = useMemo(() => {
+    const shouldDisable = isMvxSelector && isDestination;
+    if (isMvxSelector) {
+      console.log(`🔍 TokenSelector [${name}]:`, {
+        isMvxSelector,
+        isDestination,
+        shouldDisable,
+        disabled,
+        chainsLength: chains.length
+      });
+    }
+    return shouldDisable;
+  }, [isMvxSelector, isDestination, name, disabled, chains.length]);
   const isVisuallyDisabled = disabled || chains.length < 2 || isDestinationMvx;
+  if (isMvxSelector) {
+    console.log(`🎛️ Final disable state [${name}]:`, {
+      disabled,
+      "chains.length < 2": chains.length < 2,
+      isDestinationMvx,
+      isVisuallyDisabled
+    });
+  }
   const handleOnClick = () => setShow(true);
   const showLoadingSkeleton = (areOptionsLoading || areChainsLoading) && !selectedOption;
   useEffect(() => {

package/style.css

@@ -2180,10 +2180,6 @@ video {
 }
 @media (min-width: 640px){
 
-    .sm\:liq-hidden{
-        display: none;
-    }
-
     .sm\:liq-pb-6{
         padding-bottom: 1.5rem;
     }