@multiversx/sdk-dapp-liquidity 1.1.4 → 1.1.6

package/api/getChains.js

@@ -13,6 +13,6 @@ async function getChains({
       Authorization: `Bearer ${nativeAuthToken}`
     }
   };
-  return await axios.get(`/chains?isBridge=${bridgeOnly}`, config);
+  return axios.get(`/chains?isBridge=${bridgeOnly}`, config);
 }
 exports.getChains = getChains;

package/api/getChains.mjs

@@ -10,7 +10,7 @@ async function getChains({
       Authorization: `Bearer ${nativeAuthToken}`
     }
   };
-  return await axios.get(`/chains?isBridge=${bridgeOnly}`, config);
+  return axios.get(`/chains?isBridge=${bridgeOnly}`, config);
 }
 export {
   getChains

package/package.json

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

package/reactjs/components/BridgeForm/Deposit.js

@@ -65,7 +65,7 @@ const Deposit = ({
   onNavigate,
   onChangeDirection
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b;
   const ref = React.useRef(null);
   const [isTokenSelectorVisible, setIsTokenSelectorVisible] = React.useState(false);
   const [pendingSigning, setPendingSigning] = React.useState(false);
@@ -349,6 +349,7 @@ const Deposit = ({
       }
     },
     [
+      selectedChainOption,
       bridgeAddress,
       handleOnChangeFirstAmount,
       handleOnChangeSecondAmount,
@@ -368,6 +369,7 @@ const Deposit = ({
     handleSubmit,
     resetSwapForm
   } = reactjs_hooks_useBridgeFormik.useBridgeFormik({
+    isMvxConnected: Boolean(mvxAddress),
     rate,
     sender: account.address ?? "",
     receiver: mvxAddress ?? "",
@@ -618,26 +620,14 @@ const Deposit = ({
             }
           )
         ] }),
-        account.address && siginingTransactionsCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-items-center liq-justify-center liq-text-neutral-300 liq-text-sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            "You will be asked to sign ",
-            siginingTransactionsCount,
-            " ",
-            siginingTransactionsCount > 1 ? "transactions" : "transaction",
-            " ",
-            "on",
-            " "
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: (_d = (_c = core.getConnections(config)[0]) == null ? void 0 : _c.connector) == null ? void 0 : _d.icon,
-              alt: "",
-              className: "liq-mx-1 liq-h-[1rem] liq-w-[1rem]"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { children: (_f = (_e = core.getConnections(config)[0]) == null ? void 0 : _e.connector) == null ? void 0 : _f.name })
-        ] })
+        account.address && siginingTransactionsCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex liq-items-center liq-justify-center liq-text-neutral-300 liq-text-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          "You will be asked to sign ",
+          siginingTransactionsCount,
+          " ",
+          siginingTransactionsCount > 1 ? "transactions" : "transaction",
+          " ",
+          "on your wallet"
+        ] }) })
       ]
     }
   ) });

package/reactjs/components/BridgeForm/Deposit.mjs

@@ -3,7 +3,7 @@ import { faSpinner } from "@fortawesome/free-solid-svg-icons/faSpinner";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { formatAmount } from "@multiversx/sdk-dapp-utils/out/helpers/formatAmount";
 import { useAppKitNetwork } from "@reown/appkit/react";
-import { waitForTransactionReceipt, getConnections } from "@wagmi/core";
+import { waitForTransactionReceipt } from "@wagmi/core";
 import debounce from "lodash/debounce";
 import { useRef, useState, useMemo, useCallback, useEffect } from "react";
 import { toast } from "react-toastify";
@@ -62,7 +62,7 @@ const Deposit = ({
   onNavigate,
   onChangeDirection
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b;
   const ref = useRef(null);
   const [isTokenSelectorVisible, setIsTokenSelectorVisible] = useState(false);
   const [pendingSigning, setPendingSigning] = useState(false);
@@ -346,6 +346,7 @@ const Deposit = ({
       }
     },
     [
+      selectedChainOption,
       bridgeAddress,
       handleOnChangeFirstAmount,
       handleOnChangeSecondAmount,
@@ -365,6 +366,7 @@ const Deposit = ({
     handleSubmit,
     resetSwapForm
   } = useBridgeFormik({
+    isMvxConnected: Boolean(mvxAddress),
     rate,
     sender: account.address ?? "",
     receiver: mvxAddress ?? "",
@@ -615,26 +617,14 @@ const Deposit = ({
             }
           )
         ] }),
-        account.address && siginingTransactionsCount > 0 && /* @__PURE__ */ jsxs("div", { className: "liq-flex liq-items-center liq-justify-center liq-text-neutral-300 liq-text-sm", children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            "You will be asked to sign ",
-            siginingTransactionsCount,
-            " ",
-            siginingTransactionsCount > 1 ? "transactions" : "transaction",
-            " ",
-            "on",
-            " "
-          ] }),
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: (_d = (_c = getConnections(config)[0]) == null ? void 0 : _c.connector) == null ? void 0 : _d.icon,
-              alt: "",
-              className: "liq-mx-1 liq-h-[1rem] liq-w-[1rem]"
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { children: (_f = (_e = getConnections(config)[0]) == null ? void 0 : _e.connector) == null ? void 0 : _f.name })
-        ] })
+        account.address && siginingTransactionsCount > 0 && /* @__PURE__ */ jsx("div", { className: "liq-flex liq-items-center liq-justify-center liq-text-neutral-300 liq-text-sm", children: /* @__PURE__ */ jsxs("div", { children: [
+          "You will be asked to sign ",
+          siginingTransactionsCount,
+          " ",
+          siginingTransactionsCount > 1 ? "transactions" : "transaction",
+          " ",
+          "on your wallet"
+        ] }) })
       ]
     }
   ) });

package/reactjs/components/BridgeForm/Transfer.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const formatAmount = require("@multiversx/sdk-dapp-utils/out/helpers/formatAmount");
 const react = require("@reown/appkit/react");
-const core = require("@wagmi/core");
 const debounce = require("lodash/debounce");
 const React = require("react");
 const reactToastify = require("react-toastify");
@@ -70,7 +69,7 @@ const Transfer = ({
   onNavigate,
   onChangeDirection
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b;
   const ref = React.useRef(null);
   const [isTokenSelectorVisible, setIsTokenSelectorVisible] = React.useState(false);
   const [forceRefetchRate, setForceRefetchRate] = React.useState(1);
@@ -79,7 +78,6 @@ const Transfer = ({
   const account = reactjs_hooks_useAccount.useAccount();
   const { switchNetwork } = react.useAppKitNetwork();
   const {
-    config,
     options,
     supportedChains: sdkChains,
     nativeAuthToken,
@@ -276,6 +274,7 @@ const Transfer = ({
     handleSubmit,
     resetSwapForm
   } = reactjs_hooks_useBridgeFormik.useBridgeFormik({
+    isMvxConnected: Boolean(mvxAddress),
     rate,
     sender: mvxAddress ?? "",
     receiver: account.address ?? "",
@@ -516,6 +515,7 @@ const Transfer = ({
           mvxAddress && isAuthenticated && /* @__PURE__ */ jsxRuntime.jsxs(
             reactjs_components_base_MxButton_MxButton.MxButton,
             {
+              "data-testid": "submit-button",
               type: "submit",
               variant: "neutral-850",
               className: "liq-w-full disabled:liq-bg-neutral-850/50 liq-py-3 hover:enabled:liq-bg-primary !liq-text-primary-200",
@@ -538,26 +538,14 @@ const Transfer = ({
             }
           )
         ] }),
-        account.address && siginingTransactionsCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-items-center liq-justify-center liq-text-neutral-300 liq-text-sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            "You will be asked to sign ",
-            siginingTransactionsCount,
-            " ",
-            siginingTransactionsCount > 1 ? "transactions" : "transaction",
-            " ",
-            "on",
-            " "
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: (_d = (_c = core.getConnections(config)[0]) == null ? void 0 : _c.connector) == null ? void 0 : _d.icon,
-              alt: "",
-              className: "liq-mx-1 liq-h-[1rem] liq-w-[1rem]"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { children: (_f = (_e = core.getConnections(config)[0]) == null ? void 0 : _e.connector) == null ? void 0 : _f.name })
-        ] })
+        account.address && siginingTransactionsCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex liq-items-center liq-justify-center liq-text-neutral-300 liq-text-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          "You will be asked to sign ",
+          siginingTransactionsCount,
+          " ",
+          siginingTransactionsCount > 1 ? "transactions" : "transaction",
+          " ",
+          "on your wallet"
+        ] }) })
       ]
     }
   ) });

package/reactjs/components/BridgeForm/Transfer.mjs

@@ -1,7 +1,6 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { formatAmount } from "@multiversx/sdk-dapp-utils/out/helpers/formatAmount";
 import { useAppKitNetwork } from "@reown/appkit/react";
-import { getConnections } from "@wagmi/core";
 import debounce from "lodash/debounce";
 import { useRef, useState, useMemo, useCallback, useEffect } from "react";
 import { toast } from "react-toastify";
@@ -67,7 +66,7 @@ const Transfer = ({
   onNavigate,
   onChangeDirection
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b;
   const ref = useRef(null);
   const [isTokenSelectorVisible, setIsTokenSelectorVisible] = useState(false);
   const [forceRefetchRate, setForceRefetchRate] = useState(1);
@@ -76,7 +75,6 @@ const Transfer = ({
   const account = useAccount();
   const { switchNetwork } = useAppKitNetwork();
   const {
-    config,
     options,
     supportedChains: sdkChains,
     nativeAuthToken,
@@ -273,6 +271,7 @@ const Transfer = ({
     handleSubmit,
     resetSwapForm
   } = useBridgeFormik({
+    isMvxConnected: Boolean(mvxAddress),
     rate,
     sender: mvxAddress ?? "",
     receiver: account.address ?? "",
@@ -513,6 +512,7 @@ const Transfer = ({
           mvxAddress && isAuthenticated && /* @__PURE__ */ jsxs(
             MxButton,
             {
+              "data-testid": "submit-button",
               type: "submit",
               variant: "neutral-850",
               className: "liq-w-full disabled:liq-bg-neutral-850/50 liq-py-3 hover:enabled:liq-bg-primary !liq-text-primary-200",
@@ -535,26 +535,14 @@ const Transfer = ({
             }
           )
         ] }),
-        account.address && siginingTransactionsCount > 0 && /* @__PURE__ */ jsxs("div", { className: "liq-flex liq-items-center liq-justify-center liq-text-neutral-300 liq-text-sm", children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            "You will be asked to sign ",
-            siginingTransactionsCount,
-            " ",
-            siginingTransactionsCount > 1 ? "transactions" : "transaction",
-            " ",
-            "on",
-            " "
-          ] }),
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: (_d = (_c = getConnections(config)[0]) == null ? void 0 : _c.connector) == null ? void 0 : _d.icon,
-              alt: "",
-              className: "liq-mx-1 liq-h-[1rem] liq-w-[1rem]"
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { children: (_f = (_e = getConnections(config)[0]) == null ? void 0 : _e.connector) == null ? void 0 : _f.name })
-        ] })
+        account.address && siginingTransactionsCount > 0 && /* @__PURE__ */ jsx("div", { className: "liq-flex liq-items-center liq-justify-center liq-text-neutral-300 liq-text-sm", children: /* @__PURE__ */ jsxs("div", { children: [
+          "You will be asked to sign ",
+          siginingTransactionsCount,
+          " ",
+          siginingTransactionsCount > 1 ? "transactions" : "transaction",
+          " ",
+          "on your wallet"
+        ] }) })
       ]
     }
   ) });

package/reactjs/components/Connect/BridgeAccountDisplay.js

@@ -53,13 +53,21 @@ const BridgeAccountDisplay = ({
             children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex liq-min-w-0 liq-flex-grow liq-overflow-hidden liq-leading-none liq-max-w-[10rem]", children: /* @__PURE__ */ jsxRuntime.jsx(reactjs_components_TrimAddress_TrimAddress.TrimAddress, { address: account.address }) })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(reactjs_components_CopyButton_CopyButton.CopyButton, { text: account.address, className: "liq-text-sm" })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactjs_components_CopyButton_CopyButton.CopyButton,
+          {
+            text: account.address,
+            className: "liq-text-sm",
+            "data-testid": "evm-copy-button"
+          }
+        )
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-ml-auto liq-mr-0 liq-flex liq-items-center liq-gap-1", children: /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           className: "focus-primary liq-flex liq-items-center liq-gap-1 liq-rounded-xl liq-px-0 liq-py-2 liq-text-sm liq-font-semibold liq-text-neutral-400 liq-transition-colors liq-duration-200 hover:enabled:liq-text-white disabled:liq-opacity-50",
           onClick: handleDisconnect,
+          "data-testid": "evm-disconnect-button",
           children: /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: faPowerOff.faPowerOff })
         }
       ) })

package/reactjs/components/Connect/BridgeAccountDisplay.mjs

@@ -50,13 +50,21 @@ const BridgeAccountDisplay = ({
             children: /* @__PURE__ */ jsx("div", { className: "liq-flex liq-min-w-0 liq-flex-grow liq-overflow-hidden liq-leading-none liq-max-w-[10rem]", children: /* @__PURE__ */ jsx(TrimAddress, { address: account.address }) })
           }
         ),
-        /* @__PURE__ */ jsx(CopyButton, { text: account.address, className: "liq-text-sm" })
+        /* @__PURE__ */ jsx(
+          CopyButton,
+          {
+            text: account.address,
+            className: "liq-text-sm",
+            "data-testid": "evm-copy-button"
+          }
+        )
       ] }) }),
       /* @__PURE__ */ jsx("div", { className: "liq-ml-auto liq-mr-0 liq-flex liq-items-center liq-gap-1", children: /* @__PURE__ */ jsx(
         "button",
         {
           className: "focus-primary liq-flex liq-items-center liq-gap-1 liq-rounded-xl liq-px-0 liq-py-2 liq-text-sm liq-font-semibold liq-text-neutral-400 liq-transition-colors liq-duration-200 hover:enabled:liq-text-white disabled:liq-opacity-50",
           onClick: handleDisconnect,
+          "data-testid": "evm-disconnect-button",
           children: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faPowerOff })
         }
       ) })

package/reactjs/components/Connect/BridgeConnectButton.js

@@ -11,17 +11,25 @@ const BridgeConnectButton = ({
   className
 }) => {
   const account = reactjs_hooks_useAccount.useAccount();
-  return /* @__PURE__ */ jsxRuntime.jsx(reactjs_components_Connect_CustomConnectButton.CustomConnectButton, { className, disabled, children: account.isConnected ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-items-center liq-justify-center liq-gap-1", children: [
-    !account.isConnected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-ml-2 liq-flex liq-items-center liq-gap-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-text-primary-200", children: account.isConnecting ? "Connecting..." : "Connect" }) }),
-    activeChain && /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      {
-        src: activeChain.pngUrl,
-        alt: "",
-        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 liq-truncate", children: helpers_getDisplayName.getDisplayName(activeChain) })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactjs_components_Connect_CustomConnectButton.CustomConnectButton,
+    {
+      className,
+      disabled,
+      "data-testid": "evm-network-connect-button",
+      children: account.isConnected ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-items-center liq-justify-center liq-gap-1", children: [
+        !account.isConnected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-ml-2 liq-flex liq-items-center liq-gap-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-text-primary-200", children: account.isConnecting ? "Connecting..." : "Connect" }) }),
+        activeChain && /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: activeChain.pngUrl,
+            alt: "",
+            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 liq-truncate", children: helpers_getDisplayName.getDisplayName(activeChain) })
+      ] })
+    }
+  );
 };
 exports.BridgeConnectButton = BridgeConnectButton;

package/reactjs/components/Connect/BridgeConnectButton.mjs

@@ -8,18 +8,26 @@ const BridgeConnectButton = ({
   className
 }) => {
   const account = useAccount();
-  return /* @__PURE__ */ jsx(CustomConnectButton, { className, disabled, children: account.isConnected ? null : /* @__PURE__ */ jsxs("div", { className: "liq-flex liq-items-center liq-justify-center liq-gap-1", children: [
-    !account.isConnected && /* @__PURE__ */ jsx("div", { className: "liq-ml-2 liq-flex liq-items-center liq-gap-1", children: /* @__PURE__ */ jsx("span", { className: "liq-text-primary-200", children: account.isConnecting ? "Connecting..." : "Connect" }) }),
-    activeChain && /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: activeChain.pngUrl,
-        alt: "",
-        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 liq-truncate", children: getDisplayName(activeChain) })
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    CustomConnectButton,
+    {
+      className,
+      disabled,
+      "data-testid": "evm-network-connect-button",
+      children: account.isConnected ? null : /* @__PURE__ */ jsxs("div", { className: "liq-flex liq-items-center liq-justify-center liq-gap-1", children: [
+        !account.isConnected && /* @__PURE__ */ jsx("div", { className: "liq-ml-2 liq-flex liq-items-center liq-gap-1", children: /* @__PURE__ */ jsx("span", { className: "liq-text-primary-200", children: account.isConnecting ? "Connecting..." : "Connect" }) }),
+        activeChain && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: activeChain.pngUrl,
+            alt: "",
+            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 liq-truncate", children: getDisplayName(activeChain) })
+      ] })
+    }
+  );
 };
 export {
   BridgeConnectButton

package/reactjs/components/Connect/CustomConnectButton.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
 
-export declare const CustomConnectButton: ({ disabled, className, children }: {
+export declare const CustomConnectButton: ({ disabled, className, children, "data-testid": dataTestId }: {
     disabled?: boolean;
     className?: string;
     children?: ReactNode;
+    "data-testid"?: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/reactjs/components/Connect/CustomConnectButton.js

@@ -7,7 +7,8 @@ const wagmi = require("wagmi");
 const CustomConnectButton = ({
   disabled,
   className,
-  children
+  children,
+  "data-testid": dataTestId
 }) => {
   const { open } = react.useAppKit();
   const { isConnected, isConnecting } = wagmi.useAccount();
@@ -27,6 +28,7 @@ const CustomConnectButton = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
+      "data-testid": dataTestId,
       onClick: () => open({
         view: "Connect"
       }),

package/reactjs/components/Connect/CustomConnectButton.mjs

@@ -4,7 +4,8 @@ import { useAccount, useDisconnect } from "wagmi";
 const CustomConnectButton = ({
   disabled,
   className,
-  children
+  children,
+  "data-testid": dataTestId
 }) => {
   const { open } = useAppKit();
   const { isConnected, isConnecting } = useAccount();
@@ -24,6 +25,7 @@ const CustomConnectButton = ({
   return /* @__PURE__ */ jsx(
     "button",
     {
+      "data-testid": dataTestId,
       onClick: () => open({
         view: "Connect"
       }),

package/reactjs/components/Connect/MvxAccountDisplay.js

@@ -46,13 +46,21 @@ const MvxAccountDisplay = ({
             )
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(reactjs_components_CopyButton_CopyButton.CopyButton, { text: accountAddress, className: "liq-text-sm" })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactjs_components_CopyButton_CopyButton.CopyButton,
+          {
+            text: accountAddress,
+            className: "liq-text-sm",
+            "data-testid": "mx-copy-button"
+          }
+        )
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-ml-auto liq-mr-0 liq-flex liq-items-center liq-gap-1", children: /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           className: "focus-primary liq-flex liq-items-center liq-gap-1 liq-rounded-xl liq-px-0 liq-py-2 liq-text-sm liq-font-semibold liq-text-neutral-400 liq-transition-colors liq-duration-200 hover:enabled:liq-text-white disabled:liq-opacity-50",
           onClick: handleDisconnect,
+          "data-testid": "mx-disconnect-button",
           children: /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: faPowerOff.faPowerOff })
         }
       ) })
@@ -63,6 +71,7 @@ const MvxAccountDisplay = ({
         type: "button",
         className: "liq-rounded-lg liq-font-semibold liq-transition-colors liq-duration-200 disabled:liq-opacity-50 liq-bg-neutral-750 liq-text-primary-200 hover:enabled:liq-bg-primary liq-px-2",
         onClick: handleConnect,
+        "data-testid": "mx-connect-button",
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-justify-center liq-gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Connect " }),
           /* @__PURE__ */ jsxRuntime.jsx("img", { src: chainIcon, alt: "", className: "liq-w-4" }),

package/reactjs/components/Connect/MvxAccountDisplay.mjs

@@ -43,13 +43,21 @@ const MvxAccountDisplay = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx(CopyButton, { text: accountAddress, className: "liq-text-sm" })
+        /* @__PURE__ */ jsx(
+          CopyButton,
+          {
+            text: accountAddress,
+            className: "liq-text-sm",
+            "data-testid": "mx-copy-button"
+          }
+        )
       ] }) }),
       /* @__PURE__ */ jsx("div", { className: "liq-ml-auto liq-mr-0 liq-flex liq-items-center liq-gap-1", children: /* @__PURE__ */ jsx(
         "button",
         {
           className: "focus-primary liq-flex liq-items-center liq-gap-1 liq-rounded-xl liq-px-0 liq-py-2 liq-text-sm liq-font-semibold liq-text-neutral-400 liq-transition-colors liq-duration-200 hover:enabled:liq-text-white disabled:liq-opacity-50",
           onClick: handleDisconnect,
+          "data-testid": "mx-disconnect-button",
           children: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faPowerOff })
         }
       ) })
@@ -60,6 +68,7 @@ const MvxAccountDisplay = ({
         type: "button",
         className: "liq-rounded-lg liq-font-semibold liq-transition-colors liq-duration-200 disabled:liq-opacity-50 liq-bg-neutral-750 liq-text-primary-200 hover:enabled:liq-bg-primary liq-px-2",
         onClick: handleConnect,
+        "data-testid": "mx-connect-button",
         children: /* @__PURE__ */ jsxs("div", { className: "liq-flex liq-justify-center liq-gap-2", children: [
           /* @__PURE__ */ jsx("div", { children: "Connect " }),
           /* @__PURE__ */ jsx("img", { src: chainIcon, alt: "", className: "liq-w-4" }),

package/reactjs/components/Connect/MvxConnectButton.js

@@ -17,6 +17,7 @@ const MvxConnectButton = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactjs_components_base_MxButton_MxButton.MxButton,
     {
+      "data-testid": "mx-network-connect-button",
       type: "button",
       variant: "neutral-850",
       className: reactjs_utils_mxClsx.mxClsx(

package/reactjs/components/Connect/MvxConnectButton.mjs

@@ -14,6 +14,7 @@ const MvxConnectButton = ({
   return /* @__PURE__ */ jsx(
     MxButton,
     {
+      "data-testid": "mx-network-connect-button",
       type: "button",
       variant: "neutral-850",
       className: mxClsx(

package/reactjs/components/Connect/SwitchChainButton.js

@@ -22,6 +22,7 @@ const SwitchChainButton = ({
       },
       className: `${baseStyle} ${className}`,
       disabled,
+      "data-tesid": "evm-connect-button",
       children
     }
   );

package/reactjs/components/Connect/SwitchChainButton.mjs

@@ -19,6 +19,7 @@ const SwitchChainButton = ({
       },
       className: `${baseStyle} ${className}`,
       disabled,
+      "data-tesid": "evm-connect-button",
       children
     }
   );

package/reactjs/components/CopyButton/CopyButton.d.ts

@@ -1,6 +1,7 @@
 interface CopyButtonType {
     text: string;
     className?: string;
+    'data-testid'?: string;
 }
-export declare const CopyButton: ({ text, className }: CopyButtonType) => import("react/jsx-runtime").JSX.Element;
+export declare const CopyButton: ({ text, className, "data-testid": dataTestId }: CopyButtonType) => import("react/jsx-runtime").JSX.Element;
 export {};

package/reactjs/components/CopyButton/CopyButton.js

@@ -8,7 +8,11 @@ const reactFontawesome = require("@fortawesome/react-fontawesome");
 const React = require("react");
 const reactjs_components_CopyButton_utils_copyToClipboard = require("./utils/copyToClipboard.js");
 const reactjs_components_base_MxButton_MxButton = require("../base/MxButton/MxButton.js");
-const CopyButton = ({ text, className = "" }) => {
+const CopyButton = ({
+  text,
+  className = "",
+  "data-testid": dataTestId
+}) => {
   const [copyResult, setCopyResut] = React.useState({
     default: true,
     success: false
@@ -35,6 +39,7 @@ const CopyButton = ({ text, className = "" }) => {
       className,
       variant: "link-neutral-500",
       onClick: handleOnClick,
+      "data-testid": dataTestId,
       children: copyResult.default || !copyResult.success ? /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: faCopy.faCopy }) : /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: faCheck.faCheck })
     }
   );

package/reactjs/components/CopyButton/CopyButton.mjs

@@ -5,7 +5,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 import { copyTextToClipboard } from "./utils/copyToClipboard.mjs";
 import { MxButton } from "../base/MxButton/MxButton.mjs";
-const CopyButton = ({ text, className = "" }) => {
+const CopyButton = ({
+  text,
+  className = "",
+  "data-testid": dataTestId
+}) => {
   const [copyResult, setCopyResut] = React.useState({
     default: true,
     success: false
@@ -32,6 +36,7 @@ const CopyButton = ({ text, className = "" }) => {
       className,
       variant: "link-neutral-500",
       onClick: handleOnClick,
+      "data-testid": dataTestId,
       children: copyResult.default || !copyResult.success ? /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faCopy }) : /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faCheck })
     }
   );

package/reactjs/components/ToggleDirection/ToggleDirection.js

@@ -11,13 +11,21 @@ const ToggleDirection = ({
     e.stopPropagation();
     onChangeDirection();
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("button", { className: "liq-inline-block", onClick: handleChangeDirection, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "img",
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
     {
-      src: HugImage,
-      alt: "",
-      className: "liq-h-6 liq-w-6 liq-text-neutral-100 liq-mx-auto liq-my-2"
+      className: "liq-inline-block",
+      onClick: handleChangeDirection,
+      "data-testid": "toggle-button",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: HugImage,
+          alt: "",
+          className: "liq-h-6 liq-w-6 liq-text-neutral-100 liq-mx-auto liq-my-2"
+        }
+      )
     }
-  ) });
+  );
 };
 exports.ToggleDirection = ToggleDirection;

package/reactjs/components/ToggleDirection/ToggleDirection.mjs

@@ -8,14 +8,22 @@ const ToggleDirection = ({
     e.stopPropagation();
     onChangeDirection();
   };
-  return /* @__PURE__ */ jsx("button", { className: "liq-inline-block", onClick: handleChangeDirection, children: /* @__PURE__ */ jsx(
-    "img",
+  return /* @__PURE__ */ jsx(
+    "button",
     {
-      src: HugImage,
-      alt: "",
-      className: "liq-h-6 liq-w-6 liq-text-neutral-100 liq-mx-auto liq-my-2"
+      className: "liq-inline-block",
+      onClick: handleChangeDirection,
+      "data-testid": "toggle-button",
+      children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: HugImage,
+          alt: "",
+          className: "liq-h-6 liq-w-6 liq-text-neutral-100 liq-mx-auto liq-my-2"
+        }
+      )
     }
-  ) });
+  );
 };
 export {
   ToggleDirection

package/reactjs/components/TokenSelector/TokenSelector.js

@@ -149,6 +149,7 @@ const TokenSelector = ({
           /* @__PURE__ */ jsxRuntime.jsx(
             reactjs_components_DisplayAmount_DisplayAmount.DisplayAmount,
             {
+              "data-testid": `${name}-balance`,
               decimals: selectedOption == null ? void 0 : selectedOption.decimals,
               amount: (selectedOption == null ? void 0 : selectedOption.balance) ?? "0",
               className: "liq-font-medium liq-text-neutral-100"

package/reactjs/components/TokenSelector/TokenSelector.mjs

@@ -146,6 +146,7 @@ const TokenSelector = ({
           /* @__PURE__ */ jsx(
             DisplayAmount,
             {
+              "data-testid": `${name}-balance`,
               decimals: selectedOption == null ? void 0 : selectedOption.decimals,
               amount: (selectedOption == null ? void 0 : selectedOption.balance) ?? "0",
               className: "liq-font-medium liq-text-neutral-100"

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

@@ -13,6 +13,7 @@ const TokenItem = ({
   onClick,
   selected
 }) => {
+  var _a, _b;
   const { tokenChain, chainIcon } = reactjs_hooks_useResolveTokenChain.useResolveTokenChain({
     token
   });
@@ -36,6 +37,7 @@ const TokenItem = ({
   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();

package/reactjs/components/TokenSelector/components/TokenItem.mjs

@@ -10,6 +10,7 @@ const TokenItem = ({
   onClick,
   selected
 }) => {
+  var _a, _b;
   const { tokenChain, chainIcon } = useResolveTokenChain({
     token
   });
@@ -33,6 +34,7 @@ const TokenItem = ({
   return /* @__PURE__ */ 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();

package/reactjs/hooks/useBridgeFormik.d.ts

@@ -19,7 +19,7 @@ export interface TradeFormikValuesType {
     fromChainId?: string;
     toChainId?: string;
 }
-export declare const useBridgeFormik: ({ sender, receiver, firstToken, firstAmount, secondToken, secondAmount, fromChainId, toChainId, setForceRefetchRate, rate, onSubmit }: {
+export declare const useBridgeFormik: ({ sender, receiver, firstToken, firstAmount, secondToken, secondAmount, fromChainId, toChainId, setForceRefetchRate, rate, onSubmit, isMvxConnected }: {
     sender: string;
     receiver: string;
     firstAmount?: string;
@@ -28,6 +28,7 @@ export declare const useBridgeFormik: ({ sender, receiver, firstToken, firstAmou
     toChainId?: string;
     firstToken?: TokenType;
     secondToken?: TokenType;
+    isMvxConnected: boolean;
     setForceRefetchRate?: (value: (previous: number) => number) => void;
     rate?: RateRequestResponse;
     onSubmit: ({ transactions, provider }: {

package/reactjs/hooks/useBridgeFormik.js

@@ -30,7 +30,8 @@ const useBridgeFormik = ({
   toChainId,
   setForceRefetchRate,
   rate,
-  onSubmit
+  onSubmit,
+  isMvxConnected
 }) => {
   const pendingSigningRef = React.useRef();
   const { nativeAuthToken } = reactjs_context_useWeb3App.useWeb3App();
@@ -93,7 +94,7 @@ const useBridgeFormik = ({
       [
         "firstAmount"
         /* firstAmount */
-      ]: reactjs_hooks_validation_useAmountSchema.useAmountSchema(),
+      ]: reactjs_hooks_validation_useAmountSchema.useAmountSchema({ isMvxConnected }),
       [
         "firstToken"
         /* firstToken */

package/reactjs/hooks/useBridgeFormik.mjs

@@ -27,7 +27,8 @@ const useBridgeFormik = ({
   toChainId,
   setForceRefetchRate,
   rate,
-  onSubmit
+  onSubmit,
+  isMvxConnected
 }) => {
   const pendingSigningRef = useRef();
   const { nativeAuthToken } = useWeb3App();
@@ -90,7 +91,7 @@ const useBridgeFormik = ({
       [
         "firstAmount"
         /* firstAmount */
-      ]: useAmountSchema(),
+      ]: useAmountSchema({ isMvxConnected }),
       [
         "firstToken"
         /* firstToken */

package/reactjs/hooks/validation/useAmountSchema.d.ts

@@ -1,2 +1,4 @@
 import * as yup from 'yup';
-export declare const useAmountSchema: () => yup.StringSchema<string, yup.AnyObject, undefined, "">;
+export declare const useAmountSchema: ({ isMvxConnected }: {
+    isMvxConnected: boolean;
+}) => yup.StringSchema<string, yup.AnyObject, undefined, "">;

package/reactjs/hooks/validation/useAmountSchema.js

@@ -21,9 +21,11 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const yup__namespace = /* @__PURE__ */ _interopNamespaceDefault(yup);
-const useAmountSchema = () => {
+const useAmountSchema = ({
+  isMvxConnected
+}) => {
   const testHasEnoughFunds = reactjs_hooks_validation_useTestHasEnoughFunds.useTestHasEnoughFunds();
-  const testIsConnected = reactjs_hooks_validation_useTestIsConnected.useTestIsConnected();
+  const testIsConnected = reactjs_hooks_validation_useTestIsConnected.useTestIsConnected({ isMvxConnected });
   const testStartDot = (value) => !(value == null ? void 0 : value.startsWith("."));
   const testEndDot = (value) => !(value == null ? void 0 : value.endsWith("."));
   return yup__namespace.string().required("Amount is a required field").test("account", testIsConnected).test("startDot", "Amount must not start with dot", testStartDot).test("endDot", "Amount must not end with dot", testEndDot).test("funds", testHasEnoughFunds);

package/reactjs/hooks/validation/useAmountSchema.mjs

@@ -1,9 +1,11 @@
 import * as yup from "yup";
 import { useTestHasEnoughFunds } from "./useTestHasEnoughFunds.mjs";
 import { useTestIsConnected } from "./useTestIsConnected.mjs";
-const useAmountSchema = () => {
+const useAmountSchema = ({
+  isMvxConnected
+}) => {
   const testHasEnoughFunds = useTestHasEnoughFunds();
-  const testIsConnected = useTestIsConnected();
+  const testIsConnected = useTestIsConnected({ isMvxConnected });
   const testStartDot = (value) => !(value == null ? void 0 : value.startsWith("."));
   const testEndDot = (value) => !(value == null ? void 0 : value.endsWith("."));
   return yup.string().required("Amount is a required field").test("account", testIsConnected).test("startDot", "Amount must not start with dot", testStartDot).test("endDot", "Amount must not end with dot", testEndDot).test("funds", testHasEnoughFunds);

package/reactjs/hooks/validation/useTestIsConnected.d.ts

@@ -1,3 +1,5 @@
 import { TestContext } from 'yup';
 
-export declare const useTestIsConnected: () => <T extends string | undefined>(_value: T, context: TestContext) => true | import('yup').ValidationError;
+export declare const useTestIsConnected: ({ isMvxConnected }: {
+    isMvxConnected: boolean;
+}) => <T extends string | undefined>(_value: T, context: TestContext) => true | import('yup').ValidationError;

package/reactjs/hooks/validation/useTestIsConnected.js

@@ -2,12 +2,19 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const helpers_getMvxChainId = require("../../../helpers/getMvxChainId.js");
 const reactjs_hooks_useAccount = require("../useAccount.js");
-const useTestIsConnected = () => {
+const useTestIsConnected = ({
+  isMvxConnected
+}) => {
   const { address } = reactjs_hooks_useAccount.useAccount();
   return React.useCallback(
     (_value, context) => {
-      if (Boolean(address)) {
+      const firstToken = context.parent.firstToken;
+      const mvxChainId = helpers_getMvxChainId.getMvxChainId();
+      const isFromMvxChain = (firstToken == null ? void 0 : firstToken.chainId) === mvxChainId;
+      const isConnected = isFromMvxChain ? isMvxConnected : Boolean(address);
+      if (isConnected) {
         return true;
       }
       return context.createError({
@@ -15,7 +22,7 @@ const useTestIsConnected = () => {
         path: context.path
       });
     },
-    [address]
+    [address, isMvxConnected]
   );
 };
 exports.useTestIsConnected = useTestIsConnected;

package/reactjs/hooks/validation/useTestIsConnected.mjs

@@ -1,10 +1,17 @@
 import { useCallback } from "react";
+import { getMvxChainId } from "../../../helpers/getMvxChainId.mjs";
 import { useAccount } from "../useAccount.mjs";
-const useTestIsConnected = () => {
+const useTestIsConnected = ({
+  isMvxConnected
+}) => {
   const { address } = useAccount();
   return useCallback(
     (_value, context) => {
-      if (Boolean(address)) {
+      const firstToken = context.parent.firstToken;
+      const mvxChainId = getMvxChainId();
+      const isFromMvxChain = (firstToken == null ? void 0 : firstToken.chainId) === mvxChainId;
+      const isConnected = isFromMvxChain ? isMvxConnected : Boolean(address);
+      if (isConnected) {
         return true;
       }
       return context.createError({
@@ -12,7 +19,7 @@ const useTestIsConnected = () => {
         path: context.path
       });
     },
-    [address]
+    [address, isMvxConnected]
   );
 };
 export {

package/style.css

@@ -692,9 +692,6 @@ video {
 .liq-h-\[1\.5rem\]{
     height: 1.5rem;
 }
-.liq-h-\[1rem\]{
-    height: 1rem;
-}
 .liq-h-full{
     height: 100%;
 }
@@ -743,9 +740,6 @@ video {
 .liq-w-\[1\.5rem\]{
     width: 1.5rem;
 }
-.liq-w-\[1rem\]{
-    width: 1rem;
-}
 .liq-w-full{
     width: 100%;
 }