@multiversx/sdk-dapp-liquidity 1.1.7 → 2.0.0-alpha.0

package/reactjs/components/BridgeForm/Deposit.mjs

@@ -8,11 +8,14 @@ import debounce from "lodash/debounce";
 import { useRef, useState, useMemo, useCallback, useEffect } from "react";
 import { toast } from "react-toastify";
 import { useBridgeTokenSelection } from "./hooks/useBridgeTokenSelection.mjs";
+import { resolveSigningChainType } from "./utils/bridgeFormHelpers.mjs";
 import { MVX_CHAIN_IDS } from "../../../constants/index.mjs";
 import { getApiURL } from "../../../helpers/getApiURL.mjs";
 import { ChainType } from "../../../types/chainType.mjs";
 import { useWeb3App } from "../../context/useWeb3App.mjs";
+import { sameBridgeApiChainId, toBridgeApiChainId } from "../../helpers/resolveBridgeApiChainId.mjs";
 import { useAccount } from "../../hooks/useAccount.mjs";
+import { useBridgeApiChainId } from "../../hooks/useBridgeApiChainId.mjs";
 import { useBridgeFormik, BridgeFormikValuesEnum } from "../../hooks/useBridgeFormik.mjs";
 import { useFetchBridgeData } from "../../hooks/useFetchBridgeData.mjs";
 import { useGetChainId } from "../../hooks/useGetChainId.mjs";
@@ -39,6 +42,7 @@ import "wagmi";
 import { MvxConnectButton } from "../Connect/MvxConnectButton.mjs";
 import { BridgeAccountDisplay } from "../Connect/BridgeAccountDisplay.mjs";
 import { MvxAccountDisplay } from "../Connect/MvxAccountDisplay.mjs";
+import "@reown/appkit-controllers";
 import { ToggleDirection } from "../ToggleDirection/ToggleDirection.mjs";
 import { TokenSelector } from "../TokenSelector/TokenSelector.mjs";
 let fetchRateInterval;
@@ -78,6 +82,7 @@ const Deposit = ({
     bridgeOnly
   } = useWeb3App();
   const chainId = useGetChainId();
+  const bridgeApiChainId = useBridgeApiChainId();
   const {
     evmTokensWithBalances,
     mvxTokensWithBalances,
@@ -93,16 +98,14 @@ const Deposit = ({
   });
   const isTokensLoading = tokensLoading || isLoadingEvmTokensBalances || isLoadingMvxTokensBalances || isChainsLoading;
   const activeChain = useMemo(() => {
-    return sdkChains.find(
-      (chain) => chain.id.toString() === (chainId == null ? void 0 : chainId.toString())
-    );
+    return sdkChains.find((chain) => sameBridgeApiChainId(chain.id, chainId));
   }, [chainId, sdkChains]);
   const mvxChain = useMemo(() => {
     return chains.find(
       (chain) => chain.chainId.toString() === mvxChainId.toString()
     );
   }, [chainId, chains]);
-  const { evm, solana, bitcoin } = useSignTransaction();
+  const { evm, solana, bitcoin, sui } = useSignTransaction();
   const sendTransactions = useSendTransactions();
   const {
     mutate: getRate,
@@ -114,7 +117,7 @@ const Deposit = ({
   const handleSwitchNetwork = useCallback(
     (chain) => {
       const sdkChain = sdkChains.find(
-        (c) => c.id.toString() === chain.id.toString()
+        (c) => sameBridgeApiChainId(c.id, chain.id)
       );
       if (sdkChain) {
         switchNetwork(sdkChain);
@@ -158,15 +161,19 @@ const Deposit = ({
       return selectedChainOption;
     }
     return chains.find(
-      (chain) => chain.chainId.toString() === firstToken.chainId.toString()
+      (chain) => sameBridgeApiChainId(chain.chainId, firstToken.chainId)
     ) ?? selectedChainOption;
   }, [firstToken == null ? void 0 : firstToken.chainId, chains, selectedChainOption]);
+  const bridgeFromChainId = useMemo(
+    () => toBridgeApiChainId(firstToken == null ? void 0 : firstToken.chainId) ?? bridgeApiChainId,
+    [firstToken == null ? void 0 : firstToken.chainId, bridgeApiChainId]
+  );
   const bridgeAddress = account.address;
   const isAuthenticated = account.isConnected && Boolean(bridgeAddress);
   const hasAmounts = firstAmount !== "" && secondAmount !== "";
   const fetchRateDebounced = useCallback(
     debounce(async (amount) => {
-      if (!amount || !Number(amount) || !account.address || !(firstToken == null ? void 0 : firstToken.address) || !(secondToken == null ? void 0 : secondToken.address) || !selectedChainOption || !chainId) {
+      if (!amount || !Number(amount) || !account.address || !(firstToken == null ? void 0 : firstToken.address) || !(secondToken == null ? void 0 : secondToken.address) || !selectedChainOption || !bridgeFromChainId) {
         return;
       }
       getRate({
@@ -174,7 +181,7 @@ const Deposit = ({
         body: {
           tokenIn: firstToken.address,
           amountIn: amount,
-          fromChainId: chainId.toString(),
+          fromChainId: bridgeFromChainId,
           tokenOut: secondToken.address,
           toChainId: mvxChainId
         }
@@ -182,6 +189,7 @@ const Deposit = ({
     }, 500),
     [
       account.address,
+      bridgeFromChainId,
       firstToken == null ? void 0 : firstToken.address,
       secondToken == null ? void 0 : secondToken.address,
       selectedChainOption
@@ -240,6 +248,7 @@ const Deposit = ({
       transactions,
       provider
     }) => {
+      var _a2, _b2, _c;
       const signedTransactions = [];
       setPendingSigning(true);
       setSigningTransactionsCount(() => transactions.length);
@@ -248,8 +257,8 @@ const Deposit = ({
         for (const transaction of transactions) {
           ++txIndex;
           try {
-            switch (selectedChainOption == null ? void 0 : selectedChainOption.chainType) {
-              case ChainType.evm:
+            switch (resolveSigningChainType(transaction, firstTokenChain)) {
+              case ChainType.evm: {
                 const hash = await evm.signTransaction({
                   ...transaction,
                   value: BigInt(transaction.value),
@@ -278,6 +287,7 @@ const Deposit = ({
                   hash
                 });
                 break;
+              }
               case ChainType.sol:
                 if (!transaction.instructions || !transaction.feePayer) {
                   break;
@@ -308,6 +318,29 @@ const Deposit = ({
                   txHash: psbt
                 });
                 break;
+              case ChainType.sui: {
+                const serializedTx = (_a2 = transaction.suiParams) == null ? void 0 : _a2.transactionBytes;
+                const sender = (_b2 = transaction.suiParams) == null ? void 0 : _b2.sender;
+                if (!serializedTx || !sender) {
+                  console.error("No Sui transaction bytes or sender address");
+                  break;
+                }
+                const signature = await sui.signTransaction({
+                  transaction: serializedTx,
+                  address: sender
+                });
+                if (!signature) {
+                  break;
+                }
+                signedTransactions.push({
+                  ...transaction,
+                  suiParams: {
+                    ...transaction.suiParams,
+                    signature
+                  }
+                });
+                break;
+              }
               default:
                 toast.error("Provider not supported");
                 setPendingSigning(false);
@@ -324,13 +357,15 @@ const Deposit = ({
             return;
           }
         }
-        await sendTransactions({
+        const { data: batch } = await sendTransactions({
           transactions: signedTransactions,
           provider,
           url: getApiURL() ?? "",
           token: nativeAuthToken ?? ""
         });
-        const txHashes = signedTransactions.map((tx) => tx.txHash);
+        const apiHashes = ((_c = batch.transactions) == null ? void 0 : _c.map((tx) => tx.txHash).filter((h) => Boolean(h))) ?? [];
+        const localHashes = signedTransactions.map((tx) => tx.txHash).filter((h) => Boolean(h));
+        const txHashes = apiHashes.length > 0 ? apiHashes : localHashes.length > 0 ? localHashes : batch.batchId ? [batch.batchId] : [];
         onSuccess(txHashes);
         setPendingSigning(false);
       } catch (e) {
@@ -346,14 +381,18 @@ const Deposit = ({
       }
     },
     [
-      selectedChainOption,
+      firstTokenChain == null ? void 0 : firstTokenChain.chainType,
       bridgeAddress,
+      config,
       handleOnChangeFirstAmount,
       handleOnChangeSecondAmount,
       nativeAuthToken,
       onSuccess,
       sendTransactions,
-      evm.signTransaction
+      bitcoin.signTransaction,
+      evm.signTransaction,
+      solana.signTransaction,
+      sui.signTransaction
     ]
   );
   const {
@@ -372,7 +411,7 @@ const Deposit = ({
     receiver: mvxAddress ?? "",
     firstToken,
     firstAmount,
-    fromChainId: chainId == null ? void 0 : chainId.toString(),
+    fromChainId: bridgeFromChainId,
     toChainId: mvxChainId,
     secondToken,
     secondAmount,
@@ -580,14 +619,14 @@ const Deposit = ({
               className: "liq-w-full disabled:liq-bg-neutral-850/50 liq-py-3 hover:enabled:liq-bg-primary !liq-text-primary-200",
               disabled: !hasAmounts || isPendingRate || !mvxAddress || !account.address || hasError || pendingSigning,
               children: [
-                hasAmounts && !pendingSigning && /* @__PURE__ */ jsxs("div", { className: "liq-flex liq-justify-center liq-gap-2", children: [
+                hasAmounts && !pendingSigning && /* @__PURE__ */ jsxs("div", { className: "liq-flex liq-justify-center liq-items-center liq-gap-2", children: [
                   /* @__PURE__ */ jsx("div", { children: "Deposit on " }),
                   /* @__PURE__ */ jsx(
                     "img",
                     {
                       src: (mvxChain == null ? void 0 : mvxChain.pngUrl) ?? "",
                       alt: "",
-                      className: "liq-h-[1.5rem] liq-w-[1.5rem]"
+                      className: "liq-h-[1.5rem] liq-w-[1.5rem] liq-rounded-lg"
                     }
                   ),
                   /* @__PURE__ */ jsx("div", { children: "MultiversX" })
@@ -608,7 +647,7 @@ const Deposit = ({
                     {
                       src: (mvxChain == null ? void 0 : mvxChain.pngUrl) ?? "",
                       alt: "",
-                      className: "liq-h-[1.5rem] liq-w-[1.5rem]"
+                      className: "liq-h-[1.5rem] liq-w-[1.5rem] liq-rounded-lg"
                     }
                   ),
                   /* @__PURE__ */ jsx("div", { children: "MultiversX" })

package/reactjs/components/BridgeForm/Transfer.js

@@ -12,6 +12,7 @@ const constants_index = require("../../../constants/index.js");
 const helpers_getApiURL = require("../../../helpers/getApiURL.js");
 const types_providerType = require("../../../types/providerType.js");
 const reactjs_context_useWeb3App = require("../../context/useWeb3App.js");
+const reactjs_helpers_resolveBridgeApiChainId = require("../../helpers/resolveBridgeApiChainId.js");
 require("yup");
 require("@multiversx/sdk-dapp-utils/out/helpers/parseAmount");
 require("bignumber.js");
@@ -19,6 +20,7 @@ const reactjs_hooks_useAccount = require("../../hooks/useAccount.js");
 require("axios");
 const reactjs_hooks_useBridgeFormik = require("../../hooks/useBridgeFormik.js");
 const reactjs_hooks_useFetchBridgeData = require("../../hooks/useFetchBridgeData.js");
+const reactjs_hooks_useBridgeApiChainId = require("../../hooks/useBridgeApiChainId.js");
 require("@tanstack/react-query");
 const reactjs_hooks_useGetChainId = require("../../hooks/useGetChainId.js");
 require("../../constants/index.js");
@@ -26,6 +28,7 @@ const reactjs_hooks_useSendTransactions = require("../../hooks/useSendTransactio
 require("@reown/appkit-adapter-solana/react");
 require("@solana/web3.js");
 require("wagmi");
+require("@reown/appkit-controllers");
 const reactjs_queries_useGetHistory_query = require("../../queries/useGetHistory.query.js");
 const reactjs_queries_useGetRate_mutation = require("../../queries/useGetRate.mutation.js");
 const reactjs_utils_mxClsx = require("../../utils/mxClsx.js");
@@ -84,6 +87,7 @@ const Transfer = ({
     bridgeOnly
   } = reactjs_context_useWeb3App.useWeb3App();
   const chainId = reactjs_hooks_useGetChainId.useGetChainId();
+  const bridgeApiChainId = reactjs_hooks_useBridgeApiChainId.useBridgeApiChainId();
   const sendTransactions = reactjs_hooks_useSendTransactions.useSendTransactions();
   const {
     signMvxTransactions,
@@ -105,9 +109,7 @@ const Transfer = ({
   });
   const isTokensLoading = tokensLoading || isLoadingEvmTokensBalances || isLoadingMvxTokensBalances || isChainsLoading;
   const activeChain = React.useMemo(() => {
-    return sdkChains.find(
-      (chain) => chain.id.toString() === (chainId == null ? void 0 : chainId.toString())
-    );
+    return sdkChains.find((chain) => reactjs_helpers_resolveBridgeApiChainId.sameBridgeApiChainId(chain.id, chainId));
   }, [chainId, sdkChains]);
   const mvxChain = React.useMemo(() => {
     return chains.find(
@@ -124,7 +126,7 @@ const Transfer = ({
   const handleSwitchNetwork = React.useCallback(
     (chain) => {
       const sdkChain = sdkChains.find(
-        (c) => c.id.toString() === chain.id.toString()
+        (c) => reactjs_helpers_resolveBridgeApiChainId.sameBridgeApiChainId(c.id, chain.id)
       );
       if (sdkChain) {
         switchNetwork(sdkChain);
@@ -173,15 +175,19 @@ const Transfer = ({
       return selectedChainOption;
     }
     return chains.find(
-      (chain) => chain.chainId.toString() === secondToken.chainId.toString()
+      (chain) => reactjs_helpers_resolveBridgeApiChainId.sameBridgeApiChainId(chain.chainId, secondToken.chainId)
     ) ?? selectedChainOption;
   }, [secondToken == null ? void 0 : secondToken.chainId, chains, selectedChainOption]);
+  const bridgeToChainId = React.useMemo(
+    () => reactjs_helpers_resolveBridgeApiChainId.toBridgeApiChainId(secondToken == null ? void 0 : secondToken.chainId) ?? bridgeApiChainId,
+    [secondToken == null ? void 0 : secondToken.chainId, bridgeApiChainId]
+  );
   const bridgeAddress = account.address;
   const isAuthenticated = account.isConnected && Boolean(bridgeAddress);
   const hasAmounts = firstAmount !== "" && secondAmount !== "";
   const fetchRateDebounced = React.useCallback(
     debounce(async (amount) => {
-      if (!amount || !Number(amount) || !account.address || !(firstToken == null ? void 0 : firstToken.address) || !(secondToken == null ? void 0 : secondToken.address) || !selectedChainOption || !chainId) {
+      if (!amount || !Number(amount) || !account.address || !(firstToken == null ? void 0 : firstToken.address) || !(secondToken == null ? void 0 : secondToken.address) || !selectedChainOption || !bridgeToChainId) {
         return;
       }
       getRate({
@@ -191,12 +197,13 @@ const Transfer = ({
           amountIn: amount,
           fromChainId: mvxChainId,
           tokenOut: secondToken.address,
-          toChainId: chainId.toString()
+          toChainId: bridgeToChainId
         }
       });
     }, 500),
     [
       account.address,
+      bridgeToChainId,
       firstToken == null ? void 0 : firstToken.address,
       secondToken == null ? void 0 : secondToken.address,
       selectedChainOption
@@ -281,7 +288,7 @@ const Transfer = ({
     firstToken,
     firstAmount,
     fromChainId: mvxChainId,
-    toChainId: chainId == null ? void 0 : chainId.toString(),
+    toChainId: bridgeToChainId,
     secondToken,
     secondAmount,
     setForceRefetchRate,
@@ -521,14 +528,14 @@ const Transfer = ({
               className: "liq-w-full disabled:liq-bg-neutral-850/50 liq-py-3 hover:enabled:liq-bg-primary !liq-text-primary-200",
               disabled: !hasAmounts || isPendingRate || !mvxAddress || !account.address || hasError,
               children: [
-                hasAmounts && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-justify-center liq-gap-2", children: [
+                hasAmounts && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-justify-center liq-items-center liq-gap-2", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Transfer to " }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "img",
                     {
                       src: (secondTokenChain == null ? void 0 : secondTokenChain.pngUrl) ?? "",
                       alt: "",
-                      className: "liq-h-[1.5rem] liq-w-[1.5rem]"
+                      className: "liq-h-[1.5rem] liq-w-[1.5rem] liq-rounded-lg"
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { children: secondTokenChain == null ? void 0 : secondTokenChain.networkName })

package/reactjs/components/BridgeForm/Transfer.mjs

@@ -9,6 +9,7 @@ import { MVX_CHAIN_IDS } from "../../../constants/index.mjs";
 import { getApiURL } from "../../../helpers/getApiURL.mjs";
 import { ProviderType } from "../../../types/providerType.mjs";
 import { useWeb3App } from "../../context/useWeb3App.mjs";
+import { sameBridgeApiChainId, toBridgeApiChainId } from "../../helpers/resolveBridgeApiChainId.mjs";
 import "yup";
 import "@multiversx/sdk-dapp-utils/out/helpers/parseAmount";
 import "bignumber.js";
@@ -16,6 +17,7 @@ import { useAccount } from "../../hooks/useAccount.mjs";
 import "axios";
 import { useBridgeFormik, BridgeFormikValuesEnum } from "../../hooks/useBridgeFormik.mjs";
 import { useFetchBridgeData } from "../../hooks/useFetchBridgeData.mjs";
+import { useBridgeApiChainId } from "../../hooks/useBridgeApiChainId.mjs";
 import "@tanstack/react-query";
 import { useGetChainId } from "../../hooks/useGetChainId.mjs";
 import "../../constants/index.mjs";
@@ -23,6 +25,7 @@ import { useSendTransactions } from "../../hooks/useSendTransactions.mjs";
 import "@reown/appkit-adapter-solana/react";
 import "@solana/web3.js";
 import "wagmi";
+import "@reown/appkit-controllers";
 import { invalidateHistoryQuery } from "../../queries/useGetHistory.query.mjs";
 import { useGetRateMutation } from "../../queries/useGetRate.mutation.mjs";
 import { mxClsx } from "../../utils/mxClsx.mjs";
@@ -81,6 +84,7 @@ const Transfer = ({
     bridgeOnly
   } = useWeb3App();
   const chainId = useGetChainId();
+  const bridgeApiChainId = useBridgeApiChainId();
   const sendTransactions = useSendTransactions();
   const {
     signMvxTransactions,
@@ -102,9 +106,7 @@ const Transfer = ({
   });
   const isTokensLoading = tokensLoading || isLoadingEvmTokensBalances || isLoadingMvxTokensBalances || isChainsLoading;
   const activeChain = useMemo(() => {
-    return sdkChains.find(
-      (chain) => chain.id.toString() === (chainId == null ? void 0 : chainId.toString())
-    );
+    return sdkChains.find((chain) => sameBridgeApiChainId(chain.id, chainId));
   }, [chainId, sdkChains]);
   const mvxChain = useMemo(() => {
     return chains.find(
@@ -121,7 +123,7 @@ const Transfer = ({
   const handleSwitchNetwork = useCallback(
     (chain) => {
       const sdkChain = sdkChains.find(
-        (c) => c.id.toString() === chain.id.toString()
+        (c) => sameBridgeApiChainId(c.id, chain.id)
       );
       if (sdkChain) {
         switchNetwork(sdkChain);
@@ -170,15 +172,19 @@ const Transfer = ({
       return selectedChainOption;
     }
     return chains.find(
-      (chain) => chain.chainId.toString() === secondToken.chainId.toString()
+      (chain) => sameBridgeApiChainId(chain.chainId, secondToken.chainId)
     ) ?? selectedChainOption;
   }, [secondToken == null ? void 0 : secondToken.chainId, chains, selectedChainOption]);
+  const bridgeToChainId = useMemo(
+    () => toBridgeApiChainId(secondToken == null ? void 0 : secondToken.chainId) ?? bridgeApiChainId,
+    [secondToken == null ? void 0 : secondToken.chainId, bridgeApiChainId]
+  );
   const bridgeAddress = account.address;
   const isAuthenticated = account.isConnected && Boolean(bridgeAddress);
   const hasAmounts = firstAmount !== "" && secondAmount !== "";
   const fetchRateDebounced = useCallback(
     debounce(async (amount) => {
-      if (!amount || !Number(amount) || !account.address || !(firstToken == null ? void 0 : firstToken.address) || !(secondToken == null ? void 0 : secondToken.address) || !selectedChainOption || !chainId) {
+      if (!amount || !Number(amount) || !account.address || !(firstToken == null ? void 0 : firstToken.address) || !(secondToken == null ? void 0 : secondToken.address) || !selectedChainOption || !bridgeToChainId) {
         return;
       }
       getRate({
@@ -188,12 +194,13 @@ const Transfer = ({
           amountIn: amount,
           fromChainId: mvxChainId,
           tokenOut: secondToken.address,
-          toChainId: chainId.toString()
+          toChainId: bridgeToChainId
         }
       });
     }, 500),
     [
       account.address,
+      bridgeToChainId,
       firstToken == null ? void 0 : firstToken.address,
       secondToken == null ? void 0 : secondToken.address,
       selectedChainOption
@@ -278,7 +285,7 @@ const Transfer = ({
     firstToken,
     firstAmount,
     fromChainId: mvxChainId,
-    toChainId: chainId == null ? void 0 : chainId.toString(),
+    toChainId: bridgeToChainId,
     secondToken,
     secondAmount,
     setForceRefetchRate,
@@ -518,14 +525,14 @@ const Transfer = ({
               className: "liq-w-full disabled:liq-bg-neutral-850/50 liq-py-3 hover:enabled:liq-bg-primary !liq-text-primary-200",
               disabled: !hasAmounts || isPendingRate || !mvxAddress || !account.address || hasError,
               children: [
-                hasAmounts && /* @__PURE__ */ jsxs("div", { className: "liq-flex liq-justify-center liq-gap-2", children: [
+                hasAmounts && /* @__PURE__ */ jsxs("div", { className: "liq-flex liq-justify-center liq-items-center liq-gap-2", children: [
                   /* @__PURE__ */ jsx("div", { children: "Transfer to " }),
                   /* @__PURE__ */ jsx(
                     "img",
                     {
                       src: (secondTokenChain == null ? void 0 : secondTokenChain.pngUrl) ?? "",
                       alt: "",
-                      className: "liq-h-[1.5rem] liq-w-[1.5rem]"
+                      className: "liq-h-[1.5rem] liq-w-[1.5rem] liq-rounded-lg"
                     }
                   ),
                   /* @__PURE__ */ jsx("div", { children: secondTokenChain == null ? void 0 : secondTokenChain.networkName })

package/reactjs/components/BridgeForm/hooks/useBridgeTokenSelection.js

@@ -2,6 +2,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const reactjs_helpers_resolveBridgeApiChainId = require("../../../helpers/resolveBridgeApiChainId.js");
 const reactjs_utils_getInitialTokens = require("../../../utils/getInitialTokens.js");
 const reactjs_components_BridgeForm_utils_bridgeFormHelpers = require("../utils/bridgeFormHelpers.js");
 const useBridgeTokenSelection = ({
@@ -56,12 +57,33 @@ const useBridgeTokenSelection = ({
       ticker: token.symbol
     }))) ?? [];
   }, [firstToken == null ? void 0 : firstToken.symbol, toTokens]);
-  const selectedChainOption = React.useMemo(
-    () => (chains == null ? void 0 : chains.find(
-      (option) => option.chainId.toString() === (activeChain == null ? void 0 : activeChain.id.toString())
-    )) ?? (chains == null ? void 0 : chains[0]),
-    [activeChain == null ? void 0 : activeChain.id, chains]
-  );
+  const selectedChainOption = React.useMemo(() => {
+    const anchorToken = mvxChainId ? secondToken : firstToken;
+    const byAnchorToken = anchorToken && (chains == null ? void 0 : chains.find(
+      (option) => reactjs_helpers_resolveBridgeApiChainId.sameBridgeApiChainId(option.chainId, anchorToken.chainId)
+    ));
+    if (byAnchorToken) {
+      return byAnchorToken;
+    }
+    const byActiveChain = chains == null ? void 0 : chains.find(
+      (option) => reactjs_helpers_resolveBridgeApiChainId.sameBridgeApiChainId(option.chainId, activeChain == null ? void 0 : activeChain.id)
+    );
+    if (byActiveChain) {
+      return byActiveChain;
+    }
+    const byOtherToken = mvxChainId ? firstToken && (chains == null ? void 0 : chains.find(
+      (option) => reactjs_helpers_resolveBridgeApiChainId.sameBridgeApiChainId(option.chainId, firstToken.chainId)
+    )) : secondToken && (chains == null ? void 0 : chains.find(
+      (option) => reactjs_helpers_resolveBridgeApiChainId.sameBridgeApiChainId(option.chainId, secondToken.chainId)
+    ));
+    return byOtherToken ?? (chains == null ? void 0 : chains[0]);
+  }, [
+    activeChain == null ? void 0 : activeChain.id,
+    chains,
+    firstToken == null ? void 0 : firstToken.chainId,
+    mvxChainId,
+    secondToken == null ? void 0 : secondToken.chainId
+  ]);
   const getDefaultReceivingToken = React.useCallback(
     (values) => reactjs_components_BridgeForm_utils_bridgeFormHelpers.getDefaultReceivingToken(values, toTokens),
     [toTokens]
@@ -132,7 +154,7 @@ const useBridgeTokenSelection = ({
       secondTokenId: firstToken.address
     });
     const selectedOptionChain = sdkChains == null ? void 0 : sdkChains.find(
-      (chain) => chain.id.toString() === secondToken.chainId.toString()
+      (chain) => reactjs_helpers_resolveBridgeApiChainId.sameBridgeApiChainId(chain.id, secondToken.chainId)
     );
     if (selectedOptionChain && switchNetwork) {
       switchNetwork(selectedOptionChain);
@@ -154,7 +176,7 @@ const useBridgeTokenSelection = ({
     const firstOption = fromOptions.find(
       ({ identifier }) => (initialTokens == null ? void 0 : initialTokens.firstTokenId) === identifier
     ) ?? fromOptions.find(
-      (option) => option.chainId.toString() === (activeChainId == null ? void 0 : activeChainId.toString())
+      (option) => reactjs_helpers_resolveBridgeApiChainId.sameBridgeApiChainId(option.chainId, activeChainId)
     ) ?? fromOptions[0];
     let secondOption = toTokens == null ? void 0 : toTokens.find(
       (x) => x.symbol.toLowerCase() === (firstOption == null ? void 0 : firstOption.symbol.toLowerCase())
@@ -179,7 +201,7 @@ const useBridgeTokenSelection = ({
       setFirstToken(firstOption);
       updateUrlParams({ firstTokenId: firstOption.address });
       const selectedOptionChain = (sdkChains == null ? void 0 : sdkChains.find(
-        (chain) => chain.id.toString() === firstOption.chainId.toString()
+        (chain) => reactjs_helpers_resolveBridgeApiChainId.sameBridgeApiChainId(chain.id, firstOption.chainId)
       )) ?? activeChain;
       if (selectedOptionChain && switchNetwork) {
         switchNetwork(selectedOptionChain);

package/reactjs/components/BridgeForm/hooks/useBridgeTokenSelection.mjs

@@ -1,4 +1,5 @@
 import { useRef, useState, useMemo, useCallback, useEffect } from "react";
+import { sameBridgeApiChainId } from "../../../helpers/resolveBridgeApiChainId.mjs";
 import { getInitialTokens } from "../../../utils/getInitialTokens.mjs";
 import { getAvailableTokens, getDefaultReceivingToken, updateUrlParams } from "../utils/bridgeFormHelpers.mjs";
 const useBridgeTokenSelection = ({
@@ -53,12 +54,33 @@ const useBridgeTokenSelection = ({
       ticker: token.symbol
     }))) ?? [];
   }, [firstToken == null ? void 0 : firstToken.symbol, toTokens]);
-  const selectedChainOption = useMemo(
-    () => (chains == null ? void 0 : chains.find(
-      (option) => option.chainId.toString() === (activeChain == null ? void 0 : activeChain.id.toString())
-    )) ?? (chains == null ? void 0 : chains[0]),
-    [activeChain == null ? void 0 : activeChain.id, chains]
-  );
+  const selectedChainOption = useMemo(() => {
+    const anchorToken = mvxChainId ? secondToken : firstToken;
+    const byAnchorToken = anchorToken && (chains == null ? void 0 : chains.find(
+      (option) => sameBridgeApiChainId(option.chainId, anchorToken.chainId)
+    ));
+    if (byAnchorToken) {
+      return byAnchorToken;
+    }
+    const byActiveChain = chains == null ? void 0 : chains.find(
+      (option) => sameBridgeApiChainId(option.chainId, activeChain == null ? void 0 : activeChain.id)
+    );
+    if (byActiveChain) {
+      return byActiveChain;
+    }
+    const byOtherToken = mvxChainId ? firstToken && (chains == null ? void 0 : chains.find(
+      (option) => sameBridgeApiChainId(option.chainId, firstToken.chainId)
+    )) : secondToken && (chains == null ? void 0 : chains.find(
+      (option) => sameBridgeApiChainId(option.chainId, secondToken.chainId)
+    ));
+    return byOtherToken ?? (chains == null ? void 0 : chains[0]);
+  }, [
+    activeChain == null ? void 0 : activeChain.id,
+    chains,
+    firstToken == null ? void 0 : firstToken.chainId,
+    mvxChainId,
+    secondToken == null ? void 0 : secondToken.chainId
+  ]);
   const getDefaultReceivingToken$1 = useCallback(
     (values) => getDefaultReceivingToken(values, toTokens),
     [toTokens]
@@ -129,7 +151,7 @@ const useBridgeTokenSelection = ({
       secondTokenId: firstToken.address
     });
     const selectedOptionChain = sdkChains == null ? void 0 : sdkChains.find(
-      (chain) => chain.id.toString() === secondToken.chainId.toString()
+      (chain) => sameBridgeApiChainId(chain.id, secondToken.chainId)
     );
     if (selectedOptionChain && switchNetwork) {
       switchNetwork(selectedOptionChain);
@@ -151,7 +173,7 @@ const useBridgeTokenSelection = ({
     const firstOption = fromOptions.find(
       ({ identifier }) => (initialTokens == null ? void 0 : initialTokens.firstTokenId) === identifier
     ) ?? fromOptions.find(
-      (option) => option.chainId.toString() === (activeChainId == null ? void 0 : activeChainId.toString())
+      (option) => sameBridgeApiChainId(option.chainId, activeChainId)
     ) ?? fromOptions[0];
     let secondOption = toTokens == null ? void 0 : toTokens.find(
       (x) => x.symbol.toLowerCase() === (firstOption == null ? void 0 : firstOption.symbol.toLowerCase())
@@ -176,7 +198,7 @@ const useBridgeTokenSelection = ({
       setFirstToken(firstOption);
       updateUrlParams$1({ firstTokenId: firstOption.address });
       const selectedOptionChain = (sdkChains == null ? void 0 : sdkChains.find(
-        (chain) => chain.id.toString() === firstOption.chainId.toString()
+        (chain) => sameBridgeApiChainId(chain.id, firstOption.chainId)
       )) ?? activeChain;
       if (selectedOptionChain && switchNetwork) {
         switchNetwork(selectedOptionChain);

package/reactjs/components/BridgeForm/utils/bridgeFormHelpers.d.ts

@@ -1,11 +1,17 @@
 import { InitialTokensType } from '../../../utils/getInitialTokens';
+import { ServerTransaction } from '../../../../types/transaction';
 import { TokenType } from '../../../../types/token';
+import { ChainType } from '../../../../types/chainType';
 
 export declare const updateUrlParams: ({ firstTokenId, secondTokenId, callbackRoute, isTokensLoading, onNavigate }: InitialTokensType & {
     callbackRoute: string;
     isTokensLoading: boolean;
     onNavigate?: (url: string, options?: object) => void;
 }) => void;
+/** Prefer server transaction shape so signing matches the API even if chain metadata is stale. */
+export declare function resolveSigningChainType(transaction: ServerTransaction, fallbackChain?: {
+    chainType?: ChainType;
+}): ChainType | undefined;
 /**
  * Gets available tokens based on the source token and forced destination
  */

package/reactjs/components/BridgeForm/utils/bridgeFormHelpers.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const types_chainType = require("../../../../types/chainType.js");
 const reactjs_constants_index = require("../../../constants/index.js");
 const reactjs_utils_getCompletePathname = require("../../../utils/getCompletePathname.js");
 const updateUrlParams = ({
@@ -27,6 +28,22 @@ const updateUrlParams = ({
   }
   onNavigate == null ? void 0 : onNavigate(newUrl, { replace: true });
 };
+function resolveSigningChainType(transaction, fallbackChain) {
+  var _a, _b;
+  if (((_a = transaction.suiParams) == null ? void 0 : _a.transactionBytes) && ((_b = transaction.suiParams) == null ? void 0 : _b.sender)) {
+    return types_chainType.ChainType.sui;
+  }
+  if (transaction.instructions && transaction.feePayer) {
+    return types_chainType.ChainType.sol;
+  }
+  if (transaction.bitcoinParams) {
+    return types_chainType.ChainType.btc;
+  }
+  if (transaction.to && transaction.data !== void 0) {
+    return types_chainType.ChainType.evm;
+  }
+  return fallbackChain == null ? void 0 : fallbackChain.chainType;
+}
 const getAvailableTokens = (option, targetTokens, forcedDestinationTokenSymbol) => {
   if (forcedDestinationTokenSymbol) {
     const forcedToken = targetTokens == null ? void 0 : targetTokens.find(
@@ -56,4 +73,5 @@ const getDefaultReceivingToken = (values, fallbackTokens) => {
 };
 exports.getAvailableTokens = getAvailableTokens;
 exports.getDefaultReceivingToken = getDefaultReceivingToken;
+exports.resolveSigningChainType = resolveSigningChainType;
 exports.updateUrlParams = updateUrlParams;