@multiversx/sdk-dapp-liquidity 0.2.0-alpha.1

package/reactjs/components/BridgeForm/BridgeForm.js

@@ -0,0 +1,680 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const faSpinner = require("@fortawesome/free-solid-svg-icons/faSpinner");
+const reactFontawesome = require("@fortawesome/react-fontawesome");
+const formatAmount = require("@multiversx/sdk-dapp-utils/out/helpers/formatAmount");
+const debounce = require("lodash/debounce");
+const require$$0 = require("react");
+const reactRouterDom = require("react-router-dom");
+const reactToastify = require("react-toastify");
+const wagmi = require("wagmi");
+const helpers_getApiURL = require("../../../helpers/getApiURL.js");
+const reactjs_context_useWeb3App = require("../../context/useWeb3App.js");
+const reactjs_hooks_useAccount = require("../../hooks/useAccount.js");
+const reactjs_hooks_useBridgeFormik = require("../../hooks/useBridgeFormik.js");
+const reactjs_hooks_useFetchBridgeData = require("../../hooks/useFetchBridgeData.js");
+const reactjs_hooks_useGetChainId = require("../../hooks/useGetChainId.js");
+const reactjs_hooks_useSendTransactions = require("../../hooks/useSendTransactions.js");
+const reactjs_hooks_useSignTransaction = require("../../hooks/useSignTransaction.js");
+const reactjs_queries_useGetHistory_query = require("../../queries/useGetHistory.query.js");
+const reactjs_queries_useGetRate_mutation = require("../../queries/useGetRate.mutation.js");
+const reactjs_utils_getCompletePathname = require("../../utils/getCompletePathname.js");
+const reactjs_utils_getInitialTokens = require("../../utils/getInitialTokens.js");
+const reactjs_utils_mxClsx = require("../../utils/mxClsx.js");
+const reactjs_components_AmountCard_AmountCard = require("../AmountCard/AmountCard.js");
+const reactjs_components_AmountInput_AmountInput = require("../AmountInput/AmountInput.js");
+const reactjs_components_base_MxButton_MxButton = require("../base/MxButton/MxButton.js");
+require("../base/MxCard/MxCard.js");
+require("../base/MxLink/MxLink.js");
+require("../base/MxSearch/MxSearch.js");
+require("@fortawesome/free-solid-svg-icons/faClose");
+require("@headlessui/react");
+require("react-dom");
+require("react-popper");
+require("../base/MxTooltip/components/TooltipContainer/TooltipContainer.js");
+const reactjs_components_BridgeHistory_BridgeHistory = require("../BridgeHistory/BridgeHistory.js");
+const reactjs_components_Connect_BridgeConnectButton = require("../Connect/BridgeConnectButton.js");
+require("../../../index-cvy2-uZ_.js");
+const viem = require("viem");
+require("viem/chains");
+const reactjs_components_Connect_MvxConnectButton = require("../Connect/MvxConnectButton.js");
+const reactjs_components_Connect_BridgeAccountDisplay = require("../Connect/BridgeAccountDisplay.js");
+const reactjs_components_Connect_MvxAccountDisplay = require("../Connect/MvxAccountDisplay.js");
+const reactjs_components_TokenSelector_TokenSelector = require("../TokenSelector/TokenSelector.js");
+const actions = require("viem/actions");
+const reactjs_hooks_useBalances = require("../../../useBalances-Bxtc4GNK.js");
+function deepEqual(a, b) {
+  if (a === b)
+    return true;
+  if (a && b && typeof a === "object" && typeof b === "object") {
+    if (a.constructor !== b.constructor)
+      return false;
+    let length;
+    let i;
+    if (Array.isArray(a) && Array.isArray(b)) {
+      length = a.length;
+      if (length !== b.length)
+        return false;
+      for (i = length; i-- !== 0; )
+        if (!deepEqual(a[i], b[i]))
+          return false;
+      return true;
+    }
+    if (a.valueOf !== Object.prototype.valueOf)
+      return a.valueOf() === b.valueOf();
+    if (a.toString !== Object.prototype.toString)
+      return a.toString() === b.toString();
+    const keys = Object.keys(a);
+    length = keys.length;
+    if (length !== Object.keys(b).length)
+      return false;
+    for (i = length; i-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
+        return false;
+    for (i = length; i-- !== 0; ) {
+      const key = keys[i];
+      if (key && !deepEqual(a[key], b[key]))
+        return false;
+    }
+    return true;
+  }
+  return a !== a && b !== b;
+}
+let previousConnections = [];
+function getConnections(config) {
+  const connections = [...config.state.connections.values()];
+  if (config.state.status === "reconnecting")
+    return previousConnections;
+  if (deepEqual(previousConnections, connections))
+    return previousConnections;
+  previousConnections = connections;
+  return connections;
+}
+async function waitForTransactionReceipt(config, parameters) {
+  const { chainId, timeout = 0, ...rest } = parameters;
+  const client = config.getClient({ chainId });
+  const action = reactjs_hooks_useBalances.getAction(client, actions.waitForTransactionReceipt, "waitForTransactionReceipt");
+  const receipt = await action({ ...rest, timeout });
+  if (receipt.status === "reverted") {
+    const action_getTransaction = reactjs_hooks_useBalances.getAction(client, actions.getTransaction, "getTransaction");
+    const txn = await action_getTransaction({ hash: receipt.transactionHash });
+    const action_call = reactjs_hooks_useBalances.getAction(client, actions.call, "call");
+    const code = await action_call({
+      ...txn,
+      data: txn.input,
+      gasPrice: txn.type !== "eip1559" ? txn.gasPrice : void 0,
+      maxFeePerGas: txn.type === "eip1559" ? txn.maxFeePerGas : void 0,
+      maxPriorityFeePerGas: txn.type === "eip1559" ? txn.maxPriorityFeePerGas : void 0
+    });
+    const reason = (code == null ? void 0 : code.data) ? viem.hexToString(`0x${code.data.substring(138)}`) : "unknown reason";
+    throw new Error(reason);
+  }
+  return {
+    ...receipt,
+    chainId: client.chain.id
+  };
+}
+const BridgeForm = ({
+  mvxChainId,
+  mvxAddress,
+  username,
+  nativeAuthToken,
+  callbackRoute = "/",
+  refetchTrigger,
+  showHistory,
+  onSuccessfullySentTransaction,
+  onFailedSentTransaction,
+  onHistoryClose,
+  onMvxConnect,
+  onMvxDisconnect
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  const [isTokenSelectorVisible, setIsTokenSelectorVisible] = require$$0.useState(false);
+  const [pendingSigning, setPendingSigning] = require$$0.useState(false);
+  const [siginingTransactionsCount, setSigningTransactionsCount] = require$$0.useState(0);
+  const navigate = reactRouterDom.useNavigate();
+  const account = reactjs_hooks_useAccount.useAccount();
+  const { chains: sdkChains } = wagmi.useSwitchChain();
+  const { config, options } = reactjs_context_useWeb3App.useWeb3App();
+  const chainId = reactjs_hooks_useGetChainId.useGetChainId();
+  const {
+    evmTokensWithBalances,
+    mvxTokensWithBalances,
+    isTokensLoading: tokensLoading,
+    isLoadingEvmTokensBalances,
+    isLoadingMvxTokensBalances,
+    chains = [],
+    isChainsLoading
+  } = reactjs_hooks_useFetchBridgeData.useFetchBridgeData({
+    refetchTrigger,
+    mvxAddress,
+    mvxApiURL: options.mvxApiURL
+  });
+  const isTokensLoading = tokensLoading || isLoadingEvmTokensBalances || isLoadingMvxTokensBalances || isChainsLoading;
+  const activeChain = require$$0.useMemo(() => {
+    return sdkChains.find(
+      (chain) => chain.id.toString() === (chainId == null ? void 0 : chainId.toString())
+    );
+  }, [chainId, sdkChains]);
+  const mvxChain = require$$0.useMemo(() => {
+    return chains.find(
+      (chain) => chain.chainId.toString() === mvxChainId.toString()
+    );
+  }, [chainId, chains]);
+  const { signTransaction } = reactjs_hooks_useSignTransaction.useSignTransaction();
+  const sendTransactions = reactjs_hooks_useSendTransactions.useSendTransactions();
+  const {
+    mutate: getRate,
+    data: rate,
+    isPending: isPendingRate,
+    error: rateError
+  } = reactjs_queries_useGetRate_mutation.useGetRateMutation();
+  const rateValidationError = ((_a = rateError == null ? void 0 : rateError.response) == null ? void 0 : _a.status) === 400 ? (_b = rateError == null ? void 0 : rateError.response) == null ? void 0 : _b.data.message : void 0;
+  const ref = require$$0.useRef(null);
+  const [firstToken, setFirstToken] = require$$0.useState();
+  const [firstAmount, setFirstAmount] = require$$0.useState("");
+  const [secondToken, setSecondToken] = require$$0.useState();
+  const [secondAmount, setSecondAmount] = require$$0.useState("");
+  const bridgeAddress = account.address;
+  const isAuthenticated = account.isConnected && Boolean(bridgeAddress);
+  const fromOptions = require$$0.useMemo(
+    () => (evmTokensWithBalances && evmTokensWithBalances.map((token) => {
+      return {
+        ...token,
+        identifier: token.address,
+        ticker: token.symbol
+      };
+    })) ?? [],
+    [evmTokensWithBalances]
+  );
+  const toOptions = require$$0.useMemo(
+    () => (mvxTokensWithBalances && mvxTokensWithBalances.map((token) => {
+      return {
+        ...token,
+        identifier: token.address,
+        ticker: token.symbol
+      };
+    })) ?? [],
+    [mvxTokensWithBalances]
+  );
+  const selectedChainOption = require$$0.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 hasAmounts = firstAmount !== "" && secondAmount !== "";
+  const fetchRateDebounced = require$$0.useCallback(
+    debounce(async (amount) => {
+      if (!amount || !account.address || !(firstToken == null ? void 0 : firstToken.address) || !(secondToken == null ? void 0 : secondToken.address) || !selectedChainOption || !chainId) {
+        return;
+      }
+      getRate({
+        nativeAuthToken: nativeAuthToken ?? "",
+        body: {
+          tokenIn: firstToken.address,
+          amountIn: amount,
+          fromChainId: chainId.toString(),
+          tokenOut: secondToken.address,
+          toChainId: mvxChainId
+        }
+      });
+    }, 500),
+    [
+      account.address,
+      firstToken == null ? void 0 : firstToken.address,
+      secondToken == null ? void 0 : secondToken.address,
+      selectedChainOption
+    ]
+  );
+  const handleOnChangeFirstAmount = require$$0.useCallback((amount) => {
+    setFirstAmount(() => amount);
+    setLastChangedField(reactjs_hooks_useBridgeFormik.BridgeFormikValuesEnum.firstAmount);
+  }, []);
+  const handleOnChangeSecondAmount = require$$0.useCallback((amount) => {
+    setSecondAmount(() => amount);
+    setLastChangedField(reactjs_hooks_useBridgeFormik.BridgeFormikValuesEnum.secondAmount);
+  }, []);
+  const handleHistoryClose = require$$0.useCallback(() => {
+    onHistoryClose == null ? void 0 : onHistoryClose();
+  }, [onHistoryClose]);
+  const handleOnFirstMaxBtnChange = require$$0.useCallback(() => {
+    const formattedBalance = formatAmount.formatAmount({
+      decimals: firstToken == null ? void 0 : firstToken.decimals,
+      input: (firstToken == null ? void 0 : firstToken.balance) ?? "0",
+      addCommas: false,
+      digits: 4
+    });
+    formik.setFieldValue("firstAmount", formattedBalance);
+    handleOnChangeFirstAmount(formattedBalance);
+  }, [firstToken == null ? void 0 : firstToken.balance, firstToken == null ? void 0 : firstToken.decimals, handleOnChangeFirstAmount]);
+  const onSuccess = require$$0.useCallback(
+    async (txHashes) => {
+      handleOnChangeFirstAmount("");
+      handleOnChangeSecondAmount("");
+      reactjs_queries_useGetHistory_query.invalidateHistoryQuery();
+      reactjs_queries_useGetHistory_query.invalidateHistoryQuery();
+      onSuccessfullySentTransaction == null ? void 0 : onSuccessfullySentTransaction(txHashes);
+    },
+    [
+      handleOnChangeFirstAmount,
+      handleOnChangeSecondAmount,
+      onSuccessfullySentTransaction
+    ]
+  );
+  const updateUrlParams = require$$0.useCallback(
+    ({ firstTokenId, secondTokenId }) => {
+      if (isTokensLoading || !bridgeAddress) {
+        return;
+      }
+      const currentUrl = reactjs_utils_getCompletePathname.getCompletePathname();
+      const searchParams = new URLSearchParams(window.location.search);
+      if (firstTokenId) {
+        searchParams.set("firstToken", firstTokenId);
+      }
+      if (secondTokenId) {
+        searchParams.set("secondToken", secondTokenId);
+      }
+      const newUrl = `${callbackRoute}?${searchParams.toString()}`;
+      if (currentUrl === newUrl) {
+        return;
+      }
+      navigate(newUrl, { replace: true });
+    },
+    [bridgeAddress, callbackRoute, isTokensLoading, navigate]
+  );
+  const onChangeFirstSelect = require$$0.useCallback(
+    (option) => {
+      if (!option) {
+        return;
+      }
+      setFirstToken(() => option);
+      updateUrlParams({ firstTokenId: option == null ? void 0 : option.address });
+      const secondOption = toOptions.find((x) => x.name === (option == null ? void 0 : option.name));
+      if (!secondOption) {
+        return;
+      }
+      setSecondToken(() => secondOption);
+      updateUrlParams({ secondTokenId: secondOption == null ? void 0 : secondOption.address });
+    },
+    [toOptions, updateUrlParams]
+  );
+  const onChangeSecondSelect = require$$0.useCallback(
+    (option) => {
+      if (!option) {
+        return;
+      }
+      setSecondToken(() => option);
+      updateUrlParams({ secondTokenId: option == null ? void 0 : option.address });
+      const firstOption = fromOptions.find((x) => x.name === (option == null ? void 0 : option.name));
+      if (!firstOption) {
+        return;
+      }
+      setFirstToken(() => firstOption);
+      updateUrlParams({ firstTokenId: firstOption == null ? void 0 : firstOption.address });
+    },
+    [fromOptions, updateUrlParams]
+  );
+  const setInitialSelectedTokens = () => {
+    var _a2, _b2, _c2, _d2;
+    if (isTokensLoading) {
+      return;
+    }
+    const initialTokens = reactjs_utils_getInitialTokens.getInitialTokens();
+    const firstOption = (fromOptions == null ? void 0 : fromOptions.find(
+      ({ identifier }) => [initialTokens == null ? void 0 : initialTokens.firstTokenId].includes(identifier)
+    )) ?? fromOptions.find(
+      (option) => {
+        var _a3;
+        return option.chainId.toString() === ((_a3 = activeChain == null ? void 0 : activeChain.id) == null ? void 0 : _a3.toString());
+      }
+    );
+    const secondOption = (toOptions == null ? void 0 : toOptions.find(
+      ({ address }) => address === ((firstOption == null ? void 0 : firstOption.name) ?? (initialTokens == null ? void 0 : initialTokens.secondTokenId))
+    )) ?? toOptions.find((x) => x.name === (firstOption == null ? void 0 : firstOption.name));
+    const hasOptionsSelected = Boolean(firstToken) && Boolean(secondToken) && ((_a2 = firstToken == null ? void 0 : firstToken.address) == null ? void 0 : _a2.toLowerCase()) === ((_b2 = firstOption == null ? void 0 : firstOption.address) == null ? void 0 : _b2.toLowerCase()) && ((_c2 = secondToken == null ? void 0 : secondToken.address) == null ? void 0 : _c2.toLowerCase()) === ((_d2 = secondOption == null ? void 0 : secondOption.address) == null ? void 0 : _d2.toLowerCase());
+    if (hasOptionsSelected) {
+      return;
+    }
+    if (!firstOption || !secondOption) {
+      return;
+    }
+    setFirstToken(firstOption);
+    setSecondToken(secondOption);
+    updateUrlParams({
+      firstTokenId: firstOption == null ? void 0 : firstOption.address,
+      secondTokenId: secondOption == null ? void 0 : secondOption.address
+    });
+  };
+  const onSubmit = require$$0.useCallback(
+    async (transactions) => {
+      const signedTransactions = [];
+      setPendingSigning(true);
+      setSigningTransactionsCount(() => transactions.length);
+      try {
+        let txIndex = -1;
+        for (const transaction of transactions) {
+          ++txIndex;
+          try {
+            const txHash = await signTransaction({
+              ...transaction,
+              value: BigInt(transaction.value),
+              gas: BigInt(transaction.gasLimit),
+              account: bridgeAddress
+            });
+            signedTransactions.push({
+              ...transaction,
+              txHash
+            });
+            setSigningTransactionsCount(
+              () => transactions.length - 1 - txIndex
+            );
+            if (txIndex === transactions.length - 1) {
+              continue;
+            }
+            const transactionReceipt = await waitForTransactionReceipt(config, {
+              confirmations: 1,
+              hash: txHash
+            });
+            console.log({
+              transactionReceipt,
+              hash: txHash
+            });
+          } catch (e) {
+            reactToastify.toast.dismiss();
+            reactToastify.toast.error("Transaction aborted");
+            onFailedSentTransaction == null ? void 0 : onFailedSentTransaction("Transaction aborted");
+            setPendingSigning(false);
+            return;
+          }
+        }
+        await sendTransactions({
+          transactions: signedTransactions,
+          url: helpers_getApiURL.getApiURL() ?? "",
+          token: nativeAuthToken ?? ""
+        });
+        const txHashes = signedTransactions.map((tx) => tx.txHash);
+        onSuccess(txHashes);
+        setPendingSigning(false);
+      } catch (e) {
+        console.error(e);
+        reactToastify.toast.dismiss();
+        reactToastify.toast.error("Transaction cancelled");
+        onFailedSentTransaction == null ? void 0 : onFailedSentTransaction("Transaction cancelled");
+        setPendingSigning(false);
+        setSigningTransactionsCount(0);
+        resetSwapForm();
+        handleOnChangeFirstAmount("");
+        handleOnChangeSecondAmount("");
+      }
+    },
+    [
+      bridgeAddress,
+      handleOnChangeFirstAmount,
+      handleOnChangeSecondAmount,
+      nativeAuthToken,
+      onSuccess,
+      sendTransactions,
+      signTransaction
+    ]
+  );
+  const {
+    formik,
+    firstAmountError,
+    secondAmountError,
+    fromChainError,
+    handleBlur,
+    handleChange,
+    handleSubmit,
+    resetSwapForm,
+    setLastChangedField
+  } = reactjs_hooks_useBridgeFormik.useBridgeFormik({
+    fee: rate == null ? void 0 : rate.fee,
+    nativeAuthToken,
+    mvxAccountAddress: mvxAddress,
+    firstToken,
+    firstAmount,
+    fromChainId: chainId == null ? void 0 : chainId.toString(),
+    toChainId: mvxChainId,
+    secondToken,
+    secondAmount,
+    onSubmit
+  });
+  const hasError = Boolean(
+    firstAmountError || secondAmountError || fromChainError || rateValidationError
+  );
+  require$$0.useEffect(() => {
+    if (!firstAmount) {
+      setSecondAmount("");
+    }
+    fetchRateDebounced(firstAmount);
+  }, [firstAmount, fetchRateDebounced]);
+  require$$0.useEffect(() => {
+    return setSecondAmount((rate == null ? void 0 : rate.amountOut) ?? "");
+  }, [rate]);
+  require$$0.useEffect(setInitialSelectedTokens, [isTokensLoading, chainId]);
+  require$$0.useEffect(() => {
+    const selectedTokenOption = evmTokensWithBalances == null ? void 0 : evmTokensWithBalances.find(
+      (x) => x.address === (firstToken == null ? void 0 : firstToken.address)
+    );
+    if (!selectedTokenOption) {
+      return;
+    }
+    setFirstToken((prevState) => {
+      if (!prevState) {
+        return prevState;
+      }
+      return {
+        ...prevState,
+        balance: selectedTokenOption == null ? void 0 : selectedTokenOption.balance
+      };
+    });
+  }, [evmTokensWithBalances, firstToken == null ? void 0 : firstToken.address]);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      ref,
+      noValidate: true,
+      className: "liq-flex liq-flex-col liq-gap-1 liq-relative",
+      autoComplete: "off",
+      onSubmit: handleSubmit,
+      children: [
+        showHistory && /* @__PURE__ */ jsxRuntime.jsx(reactjs_components_BridgeHistory_BridgeHistory.BridgeHistory, { mvxAddress, onClose: handleHistoryClose }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          reactjs_components_AmountCard_AmountCard.AmountCard,
+          {
+            className: reactjs_utils_mxClsx.mxClsx(
+              "liq-pb-8 liq-pt-6 hover:liq-bg-neutral-700/50 sm:liq-pb-6",
+              {
+                "liq-pointer-events-none": isTokenSelectorVisible,
+                "focus-within:liq-outline-neutral-700/75 hover:liq-outline-neutral-700/55 hover:focus-within:liq-outline-neutral-700/80": !isTokenSelectorVisible
+              }
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-items-center liq-gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "From" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactjs_components_Connect_BridgeAccountDisplay.BridgeAccountDisplay,
+                  {
+                    disabled: isPendingRate,
+                    activeChain: selectedChainOption
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-justify-between liq-gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactjs_components_AmountInput_AmountInput.AmountInput,
+                  {
+                    inputName: "firstAmount",
+                    inputValue: formik.values.firstAmount ?? "",
+                    amountError: firstAmount !== "" ? rateValidationError ?? firstAmountError : void 0,
+                    disabled: false,
+                    onInputDebounceChange: handleOnChangeFirstAmount,
+                    onInputChange: handleChange,
+                    onBlur: handleBlur
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactjs_components_TokenSelector_TokenSelector.TokenSelector,
+                  {
+                    name: "firstToken",
+                    disabled: isPendingRate,
+                    options: fromOptions,
+                    areOptionsLoading: isTokensLoading,
+                    color: "neutral-850",
+                    onChange: onChangeFirstSelect,
+                    onBlur: handleBlur,
+                    onMaxBtnClick: handleOnFirstMaxBtnChange,
+                    selectedOption: firstToken,
+                    onTokenSelectorDisplay: (visible) => setIsTokenSelectorVisible(visible)
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          reactjs_components_AmountCard_AmountCard.AmountCard,
+          {
+            className: reactjs_utils_mxClsx.mxClsx(
+              "liq-pb-8 liq-pt-6 hover:liq-bg-neutral-700/50 sm:liq-pb-6",
+              {
+                "liq-pointer-events-none": isTokenSelectorVisible
+              }
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-items-center liq-gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "To" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactjs_components_Connect_MvxAccountDisplay.MvxAccountDisplay,
+                  {
+                    accountAddress: mvxAddress,
+                    chainIcon: (mvxChain == null ? void 0 : mvxChain.svgUrl) ?? "",
+                    username,
+                    accountExplorerUrl: `${options.mvxExplorerAddress}/accounts/${mvxAddress}`,
+                    showTag: true,
+                    onDisconnect: onMvxDisconnect,
+                    onConnect: onMvxConnect
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-justify-between liq-gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactjs_components_AmountInput_AmountInput.AmountInput,
+                  {
+                    inputName: "secondAmount",
+                    inputValue: formik.values.secondAmount ?? "",
+                    amountError: secondAmount !== "" ? fromChainError ?? secondAmountError : void 0,
+                    disabled: false,
+                    onInputDebounceChange: handleOnChangeSecondAmount,
+                    onInputChange: handleChange,
+                    onBlur: handleBlur
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactjs_components_TokenSelector_TokenSelector.TokenSelector,
+                  {
+                    name: "secondToken",
+                    disabled: true,
+                    omitDisableClass: true,
+                    options: toOptions,
+                    areOptionsLoading: isTokensLoading,
+                    color: "neutral-850",
+                    onChange: onChangeSecondSelect,
+                    onBlur: handleBlur,
+                    selectedOption: secondToken
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-items-center liq-justify-center", children: [
+          !mvxAddress && /* @__PURE__ */ jsxRuntime.jsx(
+            reactjs_components_Connect_MvxConnectButton.MvxConnectButton,
+            {
+              mvxAccountAddress: mvxAddress,
+              chain: mvxChain,
+              onClick: onMvxConnect
+            }
+          ),
+          mvxAddress && !isAuthenticated && /* @__PURE__ */ jsxRuntime.jsx(
+            reactjs_components_Connect_BridgeConnectButton.BridgeConnectButton,
+            {
+              className: "liq-w-full liq-rounded-xl liq-bg-neutral-850/50 liq-px-8 liq-py-3 liq-font-semibold liq-text-primary-200 liq-transition-colors liq-duration-200 hover:enabled:liq-bg-primary-700/80 disabled:liq-opacity-50",
+              disabled: isPendingRate,
+              activeChain: selectedChainOption
+            }
+          ),
+          mvxAddress && isAuthenticated && /* @__PURE__ */ jsxRuntime.jsxs(
+            reactjs_components_base_MxButton_MxButton.MxButton,
+            {
+              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",
+              disabled: !hasAmounts || isPendingRate || !mvxAddress || !account.address || hasError || pendingSigning,
+              children: [
+                hasAmounts && !pendingSigning && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-justify-center liq-gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Deposit on " }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: (mvxChain == null ? void 0 : mvxChain.svgUrl) ?? "",
+                      alt: "",
+                      className: "liq-h-[1.5rem] liq-w-[1.5rem]"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { children: "MultiversX" })
+                ] }),
+                !hasAmounts && !pendingSigning && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-text-neutral-100", children: "Enter amount" }),
+                pendingSigning && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-justify-center liq-items-center liq-gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactFontawesome.FontAwesomeIcon,
+                    {
+                      icon: faSpinner.faSpinner,
+                      spin: true,
+                      className: "liq-mx-1 liq-flex liq-items-center"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Depositing on" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: (mvxChain == null ? void 0 : mvxChain.svgUrl) ?? "",
+                      alt: "",
+                      className: "liq-h-[1.5rem] liq-w-[1.5rem]"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { children: "MultiversX" })
+                ] })
+              ]
+            }
+          )
+        ] }),
+        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 = 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 = getConnections(config)[0]) == null ? void 0 : _e.connector) == null ? void 0 : _f.name })
+        ] })
+      ]
+    }
+  ) });
+};
+exports.BridgeForm = BridgeForm;