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

package/reactjs/components/BridgeForm/Transfer.js

@@ -1,560 +1,2 @@
 #!/usr/bin/env node
-"use strict";
-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 debounce = require("lodash/debounce");
-const React = require("react");
-const reactToastify = require("react-toastify");
-const reactjs_components_BridgeForm_hooks_useBridgeTokenSelection = require("./hooks/useBridgeTokenSelection.js");
-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");
-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");
-const reactjs_hooks_useSendTransactions = require("../../hooks/useSendTransactions.js");
-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");
-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("@fortawesome/react-fontawesome");
-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");
-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_ToggleDirection_ToggleDirection = require("../ToggleDirection/ToggleDirection.js");
-const reactjs_components_TokenSelector_TokenSelector = require("../TokenSelector/TokenSelector.js");
-let fetchRateInterval;
-const Transfer = ({
-  mvxChainId,
-  mvxAddress,
-  username,
-  callbackRoute = "/",
-  firstTokenIdentifier,
-  secondTokenIdentifier,
-  firstTokenAmount,
-  secondTokenAmount,
-  refetchTrigger,
-  showHistory,
-  forcedDestinationTokenSymbol,
-  onSuccessfullySentTransaction,
-  onFailedSentTransaction,
-  onHistoryClose,
-  onMvxConnect,
-  onMvxDisconnect,
-  onNavigate,
-  onChangeDirection
-}) => {
-  var _a, _b;
-  const ref = React.useRef(null);
-  const [isTokenSelectorVisible, setIsTokenSelectorVisible] = React.useState(false);
-  const [forceRefetchRate, setForceRefetchRate] = React.useState(1);
-  const [siginingTransactionsCount, setSigningTransactionsCount] = React.useState(0);
-  const [latestTransactions, setLatestTransactions] = React.useState([]);
-  const account = reactjs_hooks_useAccount.useAccount();
-  const { switchNetwork } = react.useAppKitNetwork();
-  const {
-    options,
-    supportedChains: sdkChains,
-    nativeAuthToken,
-    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,
-    resetMvxTransactionHash,
-    latestMvxTransactionHash
-  } = reactjs_context_useWeb3App.useWeb3App();
-  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 = React.useMemo(() => {
-    return sdkChains.find((chain) => reactjs_helpers_resolveBridgeApiChainId.sameBridgeApiChainId(chain.id, chainId));
-  }, [chainId, sdkChains]);
-  const mvxChain = React.useMemo(() => {
-    return chains.find(
-      (chain) => chain.chainId.toString() === mvxChainId.toString()
-    );
-  }, [chainId, chains]);
-  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 handleSwitchNetwork = React.useCallback(
-    (chain) => {
-      const sdkChain = sdkChains.find(
-        (c) => reactjs_helpers_resolveBridgeApiChainId.sameBridgeApiChainId(c.id, chain.id)
-      );
-      if (sdkChain) {
-        switchNetwork(sdkChain);
-      }
-    },
-    [sdkChains, switchNetwork]
-  );
-  const {
-    firstToken,
-    secondToken,
-    fromOptions,
-    toOptions,
-    selectedChainOption,
-    onChangeFirstSelect,
-    onChangeSecondSelect,
-    handleChangeDirection: handleTokenChangeDirection
-  } = reactjs_components_BridgeForm_hooks_useBridgeTokenSelection.useBridgeTokenSelection({
-    chains,
-    activeChain,
-    sdkChains,
-    switchNetwork: handleSwitchNetwork,
-    fromTokens: mvxTokensWithBalances,
-    toTokens: evmTokensWithBalances,
-    firstTokenIdentifier,
-    secondTokenIdentifier,
-    forcedDestinationTokenSymbol,
-    isTokensLoading,
-    mvxChainId,
-    callbackRoute,
-    onNavigate
-  });
-  const handleChangeDirection = () => {
-    handleTokenChangeDirection();
-    onChangeDirection();
-  };
-  const [firstAmount, setFirstAmount] = React.useState(firstTokenAmount ?? "");
-  const [secondAmount, setSecondAmount] = React.useState(secondTokenAmount ?? "");
-  const isFirstTokenMvx = React.useMemo(() => {
-    return firstToken ? constants_index.MVX_CHAIN_IDS.includes(firstToken.chainId.toString()) : false;
-  }, [firstToken == null ? void 0 : firstToken.chainId]);
-  const isSecondTokenMvx = React.useMemo(() => {
-    return secondToken ? constants_index.MVX_CHAIN_IDS.includes(secondToken.chainId.toString()) : false;
-  }, [secondToken == null ? void 0 : secondToken.chainId]);
-  const secondTokenChain = React.useMemo(() => {
-    if (!secondToken) {
-      return selectedChainOption;
-    }
-    return chains.find(
-      (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 || !bridgeToChainId) {
-        return;
-      }
-      getRate({
-        nativeAuthToken: nativeAuthToken ?? "",
-        body: {
-          tokenIn: firstToken.address,
-          amountIn: amount,
-          fromChainId: mvxChainId,
-          tokenOut: secondToken.address,
-          toChainId: bridgeToChainId
-        }
-      });
-    }, 500),
-    [
-      account.address,
-      bridgeToChainId,
-      firstToken == null ? void 0 : firstToken.address,
-      secondToken == null ? void 0 : secondToken.address,
-      selectedChainOption
-    ]
-  );
-  const handleOnChangeFirstAmount = React.useCallback((amount) => {
-    setFirstAmount(() => amount);
-  }, []);
-  const handleOnChangeSecondAmount = React.useCallback((amount) => {
-    setSecondAmount(() => amount);
-  }, []);
-  const handleHistoryClose = React.useCallback(() => {
-    onHistoryClose == null ? void 0 : onHistoryClose();
-  }, [onHistoryClose]);
-  const handleOnFirstMaxBtnChange = React.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 = React.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 onSubmit = React.useCallback(
-    async ({ transactions }) => {
-      setSigningTransactionsCount(() => transactions.length);
-      try {
-        if (!signMvxTransactions) {
-          throw new Error("signMvxTransactions function is not provided");
-        }
-        await signMvxTransactions(transactions);
-        setLatestTransactions(transactions);
-      } catch (e) {
-        console.error(e);
-        reactToastify.toast.dismiss();
-        reactToastify.toast.error("Transaction cancelled");
-        onFailedSentTransaction == null ? void 0 : onFailedSentTransaction("Transaction cancelled");
-        setSigningTransactionsCount(0);
-        resetSwapForm();
-        handleOnChangeFirstAmount("");
-        handleOnChangeSecondAmount("");
-      }
-    },
-    [
-      bridgeAddress,
-      handleOnChangeFirstAmount,
-      handleOnChangeSecondAmount,
-      nativeAuthToken,
-      onSuccess,
-      signMvxTransactions
-    ]
-  );
-  const {
-    formik,
-    firstAmountError,
-    secondAmountError,
-    fromChainError,
-    handleBlur,
-    handleChange,
-    handleSubmit,
-    resetSwapForm
-  } = reactjs_hooks_useBridgeFormik.useBridgeFormik({
-    isMvxConnected: Boolean(mvxAddress),
-    rate,
-    sender: mvxAddress ?? "",
-    receiver: account.address ?? "",
-    firstToken,
-    firstAmount,
-    fromChainId: mvxChainId,
-    toChainId: bridgeToChainId,
-    secondToken,
-    secondAmount,
-    setForceRefetchRate,
-    onSubmit
-  });
-  const hasError = Boolean(
-    firstAmountError || secondAmountError || fromChainError || rateValidationError
-  );
-  const amountErrorFirstInput = React.useMemo(() => {
-    return firstAmount !== "" ? rateValidationError ?? firstAmountError : void 0;
-  }, [firstAmountError, firstAmount, rateValidationError]);
-  const amountErrorSecondInput = React.useMemo(() => {
-    return secondAmount !== "" ? fromChainError ?? secondAmountError : void 0;
-  }, [fromChainError, secondAmountError, secondAmount]);
-  React.useEffect(() => {
-    if (!firstAmount) {
-      setSecondAmount("");
-    }
-    fetchRateDebounced(firstAmount);
-    if (fetchRateInterval) {
-      clearInterval(fetchRateInterval);
-    }
-    fetchRateInterval = setInterval(() => {
-      fetchRateDebounced(firstAmount);
-    }, 50 * 1e3);
-    return () => clearInterval(fetchRateInterval);
-  }, [firstAmount, forceRefetchRate, fetchRateDebounced]);
-  React.useEffect(() => {
-    if (!(rate == null ? void 0 : rate.amountOut)) {
-      return;
-    }
-    formik.setFieldValue(reactjs_hooks_useBridgeFormik.BridgeFormikValuesEnum.secondAmount, rate.amountOut);
-    setSecondAmount(rate.amountOut);
-  }, [rate == null ? void 0 : rate.amountOut]);
-  React.useEffect(() => {
-    if (rateValidationError) {
-      formik.setFieldValue(reactjs_hooks_useBridgeFormik.BridgeFormikValuesEnum.secondAmount, "0");
-      setSecondAmount("0");
-    }
-  }, [rateValidationError]);
-  React.useEffect(() => {
-    if (firstTokenAmount) {
-      formik.setFieldValue(
-        reactjs_hooks_useBridgeFormik.BridgeFormikValuesEnum.firstAmount,
-        firstTokenAmount
-      );
-      handleOnChangeFirstAmount(firstTokenAmount);
-    }
-  }, []);
-  React.useEffect(() => {
-    if (secondTokenAmount) {
-      formik.setFieldValue(
-        reactjs_hooks_useBridgeFormik.BridgeFormikValuesEnum.secondAmount,
-        secondTokenAmount
-      );
-      handleOnChangeSecondAmount(secondTokenAmount);
-    }
-  }, [secondTokenAmount]);
-  React.useEffect(() => {
-    if (latestMvxTransactionHash) {
-      try {
-        const txHash = latestMvxTransactionHash;
-        sendTransactions({
-          transactions: latestTransactions.map((tx) => ({
-            ...tx,
-            txHash,
-            receiver: account.address
-          })),
-          provider: (rate == null ? void 0 : rate.provider) ?? types_providerType.ProviderType.None,
-          url: helpers_getApiURL.getApiURL() ?? "",
-          token: nativeAuthToken ?? ""
-        });
-        onSuccessfullySentTransaction == null ? void 0 : onSuccessfullySentTransaction([txHash]);
-      } catch (err) {
-        console.error("Error while sending transactions:", err);
-        onFailedSentTransaction == null ? void 0 : onFailedSentTransaction(
-          "An error occurred while sending the transaction"
-        );
-        return;
-      } finally {
-        resetMvxTransactionHash == null ? void 0 : resetMvxTransactionHash();
-        setLatestTransactions([]);
-      }
-    }
-  }, [
-    latestMvxTransactionHash,
-    latestTransactions,
-    rate == null ? void 0 : rate.provider,
-    sendTransactions
-  ]);
-  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_MvxAccountDisplay.MvxAccountDisplay,
-                  {
-                    accountAddress: mvxAddress,
-                    chainIcon: (mvxChain == null ? void 0 : mvxChain.pngUrl) ?? "",
-                    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: "firstAmount",
-                    inputValue: formik.values.firstAmount,
-                    amountError: amountErrorFirstInput,
-                    disabled: false,
-                    onInputDebounceChange: handleOnChangeFirstAmount,
-                    onInputChange: handleChange,
-                    onBlur: handleBlur
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  reactjs_components_TokenSelector_TokenSelector.TokenSelector,
-                  {
-                    name: "firstToken",
-                    disabled: isPendingRate,
-                    options: fromOptions,
-                    areOptionsLoading: isTokensLoading,
-                    isMvxSelector: isFirstTokenMvx,
-                    isDestination: false,
-                    color: "neutral-850",
-                    onChange: onChangeFirstSelect,
-                    onBlur: handleBlur,
-                    onMaxBtnClick: handleOnFirstMaxBtnChange,
-                    selectedOption: firstToken,
-                    onTokenSelectorDisplay: (visible) => setIsTokenSelectorVisible(visible)
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-absolute liq-left-[6%] liq-top-[40%] -liq-mt-1 liq-z-10", children: bridgeOnly && /* @__PURE__ */ jsxRuntime.jsx(reactjs_components_ToggleDirection_ToggleDirection.ToggleDirection, { onChangeDirection: handleChangeDirection }) }),
-        /* @__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_BridgeAccountDisplay.BridgeAccountDisplay,
-                  {
-                    disabled: isPendingRate,
-                    activeChain: secondTokenChain
-                  }
-                )
-              ] }),
-              /* @__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: amountErrorSecondInput,
-                    disabled: false,
-                    onInputDebounceChange: handleOnChangeSecondAmount,
-                    onInputChange: handleChange,
-                    onBlur: handleBlur
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  reactjs_components_TokenSelector_TokenSelector.TokenSelector,
-                  {
-                    name: "secondToken",
-                    disabled: isPendingRate,
-                    omitDisableClass: true,
-                    options: toOptions,
-                    areOptionsLoading: isTokensLoading,
-                    isMvxSelector: isSecondTokenMvx,
-                    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,
-              icon: (mvxChain == null ? void 0 : mvxChain.pngUrl) ?? "",
-              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: secondTokenChain
-            }
-          ),
-          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",
-              disabled: !hasAmounts || isPendingRate || !mvxAddress || !account.address || hasError,
-              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] liq-rounded-lg"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { children: secondTokenChain == null ? void 0 : secondTokenChain.networkName })
-                ] }),
-                !hasAmounts && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-text-neutral-100", children: "Enter amount" })
-              ]
-            }
-          )
-        ] }),
-        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"
-        ] }) })
-      ]
-    }
-  ) });
-};
-exports.Transfer = Transfer;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),nt=require("@multiversx/sdk-dapp-utils/out/helpers/formatAmount"),rt=require("@reown/appkit/react"),ot=require("lodash/debounce"),s=require("react"),ce=require("react-toastify"),at=require("./hooks/useBridgeTokenSelection.js"),le=require("../../../constants/index.js"),ct=require("../../../helpers/getApiURL.js");require("../../constants/index.js");const $=require("../../../helpers/safeImageUrl.js"),lt=require("../../../types/providerType.js"),ue=require("../../context/useWeb3App.js"),D=require("../../helpers/resolveBridgeApiChainId.js");require("yup");require("@multiversx/sdk-dapp-utils/out/helpers/parseAmount");require("bignumber.js");const ut=require("../../hooks/useAccount.js");require("axios");const I=require("../../hooks/useBridgeFormik.js"),dt=require("../../hooks/useFetchBridgeData.js"),mt=require("../../hooks/useBridgeApiChainId.js");require("@tanstack/react-query");const qt=require("../../hooks/useGetChainId.js"),ht=require("../../hooks/useSendTransactions.js");require("@reown/appkit-adapter-solana/react");require("@solana/web3.js");require("wagmi");require("@reown/appkit-controllers");const pt=require("../../queries/useGetHistory.query.js"),gt=require("../../queries/useGetRate.mutation.js"),de=require("../../utils/mxClsx.js"),me=require("../AmountCard/AmountCard.js"),qe=require("../AmountInput/AmountInput.js"),_t=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("@fortawesome/react-fontawesome");require("@headlessui/react");require("react-dom");require("react-popper");require("../base/MxTooltip/components/TooltipContainer/TooltipContainer.js");const ft=require("../BridgeHistory/BridgeHistory.js"),xt=require("../Connect/BridgeConnectButton.js"),bt=require("../Connect/MvxConnectButton.js"),Ct=require("../Connect/BridgeAccountDisplay.js"),jt=require("../Connect/MvxAccountDisplay.js"),vt=require("../ToggleDirection/ToggleDirection.js"),he=require("../TokenSelector/TokenSelector.js");let E;const It=({mvxChainId:B,mvxAddress:o,username:pe,callbackRoute:ge="/",firstTokenIdentifier:_e,secondTokenIdentifier:fe,firstTokenAmount:A,secondTokenAmount:f,refetchTrigger:xe,showHistory:be,forcedDestinationTokenSymbol:Ce,onSuccessfullySentTransaction:d,onFailedSentTransaction:q,onHistoryClose:y,onMvxConnect:z,onMvxDisconnect:je,onNavigate:ve,onChangeDirection:Ie})=>{var oe,ae;const Be=s.useRef(null),[O,Ae]=s.useState(!1),[ye,Me]=s.useState(1),[R,K]=s.useState(0),[Y,J]=s.useState([]),a=ut.useAccount(),{switchNetwork:Z}=rt.useAppKitNetwork(),T=pt.useInvalidateHistoryQuery(),{options:ee,supportedChains:x,nativeAuthToken:V,bridgeOnly:ke}=ue.useWeb3App(),F=qt.useGetChainId(),te=mt.useBridgeApiChainId(),se=ht.useSendTransactions(),{signMvxTransactions:L,resetMvxTransactionHash:S,latestMvxTransactionHash:U}=ue.useWeb3App(),{evmTokensWithBalances:Ne,mvxTokensWithBalances:we,isTokensLoading:De,isLoadingEvmTokensBalances:Ee,isLoadingMvxTokensBalances:Oe,chains:b=[],isChainsLoading:Re}=dt.useFetchBridgeData({refetchTrigger:xe,mvxAddress:o,mvxApiURL:ee.mvxApiURL}),G=De||Ee||Oe||Re,Ve=s.useMemo(()=>x.find(e=>D.sameBridgeApiChainId(e.id,F)),[F,x]),h=s.useMemo(()=>b.find(e=>e.chainId.toString()===B.toString()),[F,b]),{mutate:Fe,data:r,isPending:C,error:p}=gt.useGetRateMutation(),j=((oe=p==null?void 0:p.response)==null?void 0:oe.status)===400?(ae=p==null?void 0:p.response)==null?void 0:ae.data.message:void 0,Le=s.useCallback(e=>{const _=x.find(it=>D.sameBridgeApiChainId(it.id,e.id));_&&Z(_)},[x,Z]),{firstToken:i,secondToken:n,fromOptions:Se,toOptions:Ue,selectedChainOption:v,onChangeFirstSelect:Ge,onChangeSecondSelect:He,handleChangeDirection:We}=at.useBridgeTokenSelection({chains:b,activeChain:Ve,sdkChains:x,switchNetwork:Le,fromTokens:we,toTokens:Ne,firstTokenIdentifier:_e,secondTokenIdentifier:fe,forcedDestinationTokenSymbol:Ce,isTokensLoading:G,mvxChainId:B,callbackRoute:ge,onNavigate:ve}),Pe=()=>{We(),Ie()},[c,Qe]=s.useState(A??""),[M,k]=s.useState(f??""),Xe=s.useMemo(()=>i?le.MVX_CHAIN_IDS.includes(i.chainId.toString()):!1,[i==null?void 0:i.chainId]),$e=s.useMemo(()=>n?le.MVX_CHAIN_IDS.includes(n.chainId.toString()):!1,[n==null?void 0:n.chainId]),l=s.useMemo(()=>n?b.find(e=>D.sameBridgeApiChainId(e.chainId,n.chainId))??v:v,[n==null?void 0:n.chainId,b,v]),N=s.useMemo(()=>D.toBridgeApiChainId(n==null?void 0:n.chainId)??te,[n==null?void 0:n.chainId,te]),ie=a.address,ne=a.isConnected&&!!ie,H=c!==""&&M!=="",W=s.useCallback(ot(async e=>{!e||!Number(e)||!a.address||!(i!=null&&i.address)||!(n!=null&&n.address)||!v||!N||Fe({nativeAuthToken:V??"",body:{tokenIn:i.address,amountIn:e,fromChainId:B,tokenOut:n.address,toChainId:N}})},500),[a.address,N,i==null?void 0:i.address,n==null?void 0:n.address,v]),u=s.useCallback(e=>{Qe(()=>e)},[]),g=s.useCallback(e=>{k(()=>e)},[]),ze=s.useCallback(()=>{y==null||y()},[y]),Ke=s.useCallback(()=>{const e=nt.formatAmount({decimals:i==null?void 0:i.decimals,input:(i==null?void 0:i.balance)??"0",addCommas:!1,digits:4});m.setFieldValue("firstAmount",e),u(e)},[i==null?void 0:i.balance,i==null?void 0:i.decimals,u]),Ye=s.useCallback(async e=>{u(""),g(""),T(),T(),d==null||d(e)},[u,g,d]),Je=s.useCallback(async({transactions:e})=>{K(()=>e.length);try{if(!L)throw new Error("signMvxTransactions function is not provided");await L(e),J(e)}catch(_){console.error(_),ce.toast.dismiss(),ce.toast.error("Transaction cancelled"),q==null||q("Transaction cancelled"),K(0),Te(),u(""),g("")}},[ie,u,g,V,Ye,L]),{formik:m,firstAmountError:P,secondAmountError:Q,fromChainError:X,handleBlur:w,handleChange:re,handleSubmit:Ze,resetSwapForm:Te}=I.useBridgeFormik({isMvxConnected:!!o,rate:r,sender:o??"",receiver:a.address??"",firstToken:i,firstAmount:c,fromChainId:B,toChainId:N,secondToken:n,secondAmount:M,setForceRefetchRate:Me,onSubmit:Je}),et=!!(P||Q||X||j),tt=s.useMemo(()=>c!==""?j??P:void 0,[P,c,j]),st=s.useMemo(()=>M!==""?X??Q:void 0,[X,Q,M]);return s.useEffect(()=>(c||k(""),W(c),E&&clearInterval(E),E=setInterval(()=>{W(c)},50*1e3),()=>clearInterval(E)),[c,ye,W]),s.useEffect(()=>{r!=null&&r.amountOut&&(m.setFieldValue(I.BridgeFormikValuesEnum.secondAmount,r.amountOut),k(r.amountOut))},[r==null?void 0:r.amountOut]),s.useEffect(()=>{j&&(m.setFieldValue(I.BridgeFormikValuesEnum.secondAmount,"0"),k("0"))},[j]),s.useEffect(()=>{A&&(m.setFieldValue(I.BridgeFormikValuesEnum.firstAmount,A),u(A))},[]),s.useEffect(()=>{f&&(m.setFieldValue(I.BridgeFormikValuesEnum.secondAmount,f),g(f))},[f]),s.useEffect(()=>{if(U)try{const e=U;se({transactions:Y.map(_=>({..._,txHash:e,receiver:a.address})),provider:(r==null?void 0:r.provider)??lt.ProviderType.None,url:ct.getApiURL()??"",token:V??""}),d==null||d([e])}catch(e){console.error("Error while sending transactions:",e),q==null||q("An error occurred while sending the transaction");return}finally{S==null||S(),J([])}},[U,Y,r==null?void 0:r.provider,se]),t.jsx(t.Fragment,{children:t.jsxs("form",{ref:Be,noValidate:!0,className:"liq-flex liq-flex-col liq-gap-1 liq-relative",autoComplete:"off",onSubmit:Ze,children:[be&&t.jsx(ft.BridgeHistory,{mvxAddress:o,onClose:ze}),t.jsxs(me.AmountCard,{className:de.mxClsx("liq-pb-8 liq-pt-6 hover:liq-bg-neutral-700/50 sm:liq-pb-6",{"liq-pointer-events-none":O,"focus-within:liq-outline-neutral-700/75 hover:liq-outline-neutral-700/55 hover:focus-within:liq-outline-neutral-700/80":!O}),children:[t.jsxs("div",{className:"liq-flex liq-items-center liq-gap-1",children:[t.jsx("span",{children:"From"}),t.jsx(jt.MvxAccountDisplay,{accountAddress:o,chainIcon:$.safeImageUrl(h==null?void 0:h.pngUrl),username:pe,accountExplorerUrl:`${ee.mvxExplorerAddress}/accounts/${o}`,showTag:!0,onDisconnect:je,onConnect:z})]}),t.jsxs("div",{className:"liq-flex liq-justify-between liq-gap-1",children:[t.jsx(qe.AmountInput,{inputName:"firstAmount",inputValue:m.values.firstAmount,amountError:tt,disabled:!1,onInputDebounceChange:u,onInputChange:re,onBlur:w}),t.jsx(he.TokenSelector,{name:"firstToken",disabled:C,options:Se,areOptionsLoading:G,isMvxSelector:Xe,isDestination:!1,color:"neutral-850",onChange:Ge,onBlur:w,onMaxBtnClick:Ke,selectedOption:i,onTokenSelectorDisplay:e=>Ae(e)})]})]}),t.jsx("div",{className:"liq-absolute liq-left-[6%] liq-top-[40%] -liq-mt-1 liq-z-10",children:ke&&t.jsx(vt.ToggleDirection,{onChangeDirection:Pe})}),t.jsxs(me.AmountCard,{className:de.mxClsx("liq-pb-8 liq-pt-6 hover:liq-bg-neutral-700/50 sm:liq-pb-6",{"liq-pointer-events-none":O}),children:[t.jsxs("div",{className:"liq-flex liq-items-center liq-gap-1",children:[t.jsx("span",{children:"To"}),t.jsx(Ct.BridgeAccountDisplay,{disabled:C,activeChain:l})]}),t.jsxs("div",{className:"liq-flex liq-justify-between liq-gap-1",children:[t.jsx(qe.AmountInput,{inputName:"secondAmount",inputValue:m.values.secondAmount,amountError:st,disabled:!1,onInputDebounceChange:g,onInputChange:re,onBlur:w}),t.jsx(he.TokenSelector,{name:"secondToken",disabled:C,omitDisableClass:!0,options:Ue,areOptionsLoading:G,isMvxSelector:$e,color:"neutral-850",onChange:He,onBlur:w,selectedOption:n})]})]}),t.jsxs("div",{className:"liq-flex liq-items-center liq-justify-center",children:[!o&&t.jsx(bt.MvxConnectButton,{mvxAccountAddress:o,icon:$.safeImageUrl(h==null?void 0:h.pngUrl),onClick:z}),o&&!ne&&t.jsx(xt.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:C,activeChain:l}),o&&ne&&t.jsxs(_t.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",disabled:!H||C||!o||!a.address||et,children:[H&&t.jsxs("div",{className:"liq-flex liq-justify-center liq-items-center liq-gap-2",children:[t.jsx("div",{children:"Transfer to "}),t.jsx("img",{src:$.safeImageUrl(l==null?void 0:l.pngUrl),alt:"",className:"liq-h-[1.5rem] liq-w-[1.5rem] liq-rounded-lg"}),t.jsx("div",{children:l==null?void 0:l.networkName})]}),!H&&t.jsx("span",{className:"liq-text-neutral-100",children:"Enter amount"})]})]}),a.address&&R>0&&t.jsx("div",{className:"liq-flex liq-items-center liq-justify-center liq-text-neutral-300 liq-text-sm",children:t.jsxs("div",{children:["You will be asked to sign ",R," ",R>1?"transactions":"transaction"," ","on your wallet"]})})]})})};exports.Transfer=It;