@multiversx/sdk-dapp-liquidity 1.1.0-alpha.2 → 1.1.0-alpha.21

package/reactjs/components/BridgeForm/BridgeForm.js

@@ -6,10 +6,10 @@ 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 React = require("react");
 const reactToastify = require("react-toastify");
-const wagmi = require("wagmi");
 const helpers_getApiURL = require("../../../helpers/getApiURL.js");
+const types_chainType = require("../../../types/chainType.js");
 const reactjs_constants_index = require("../../constants/index.js");
 const reactjs_context_useWeb3App = require("../../context/useWeb3App.js");
 const reactjs_hooks_useAccount = require("../../hooks/useAccount.js");
@@ -36,15 +36,15 @@ 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-Ben8n3bd.js");
-const viem = require("viem");
-require("viem/chains");
+require("@reown/appkit/react");
+require("wagmi");
 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 viem = require("viem");
 const actions = require("viem/actions");
-const reactjs_hooks_useBalances = require("../../../useBalances-C4YhEYxy.js");
+const reactjs_hooks_useBalances = require("../../../useBalances-gZTsFZHe.js");
 function deepEqual(a, b) {
   if (a === b)
     return true;
@@ -123,6 +123,8 @@ const BridgeForm = ({
   username,
   nativeAuthToken,
   callbackRoute = "/",
+  firstTokenIdentifier,
+  secondTokenIdentifier,
   refetchTrigger,
   showHistory,
   onSuccessfullySentTransaction,
@@ -133,13 +135,13 @@ const BridgeForm = ({
   onNavigate
 }) => {
   var _a, _b, _c, _d, _e, _f;
-  const ref = require$$0.useRef(null);
-  const [isTokenSelectorVisible, setIsTokenSelectorVisible] = require$$0.useState(false);
-  const [pendingSigning, setPendingSigning] = require$$0.useState(false);
-  const [siginingTransactionsCount, setSigningTransactionsCount] = require$$0.useState(0);
+  const ref = React.useRef(null);
+  const initializedInitialTokensRef = React.useRef(false);
+  const [isTokenSelectorVisible, setIsTokenSelectorVisible] = React.useState(false);
+  const [pendingSigning, setPendingSigning] = React.useState(false);
+  const [siginingTransactionsCount, setSigningTransactionsCount] = React.useState(0);
   const account = reactjs_hooks_useAccount.useAccount();
-  const { chains: sdkChains } = wagmi.useSwitchChain();
-  const { config, options } = reactjs_context_useWeb3App.useWeb3App();
+  const { config, options, supportedChains: sdkChains } = reactjs_context_useWeb3App.useWeb3App();
   const chainId = reactjs_hooks_useGetChainId.useGetChainId();
   const {
     evmTokensWithBalances,
@@ -155,17 +157,17 @@ const BridgeForm = ({
     mvxApiURL: options.mvxApiURL
   });
   const isTokensLoading = tokensLoading || isLoadingEvmTokensBalances || isLoadingMvxTokensBalances || isChainsLoading;
-  const activeChain = require$$0.useMemo(() => {
+  const activeChain = React.useMemo(() => {
     return sdkChains.find(
       (chain) => chain.id.toString() === (chainId == null ? void 0 : chainId.toString())
     );
   }, [chainId, sdkChains]);
-  const mvxChain = require$$0.useMemo(() => {
+  const mvxChain = React.useMemo(() => {
     return chains.find(
       (chain) => chain.chainId.toString() === mvxChainId.toString()
     );
   }, [chainId, chains]);
-  const { signTransaction } = reactjs_hooks_useSignTransaction.useSignTransaction();
+  const { evm, solana, bitcoin } = reactjs_hooks_useSignTransaction.useSignTransaction();
   const sendTransactions = reactjs_hooks_useSendTransactions.useSendTransactions();
   const {
     mutate: getRate,
@@ -174,13 +176,13 @@ const BridgeForm = ({
     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 [firstToken, setFirstToken] = require$$0.useState();
-  const [firstAmount, setFirstAmount] = require$$0.useState("");
-  const [secondToken, setSecondToken] = require$$0.useState();
-  const [secondAmount, setSecondAmount] = require$$0.useState("");
+  const [firstToken, setFirstToken] = React.useState();
+  const [firstAmount, setFirstAmount] = React.useState("");
+  const [secondToken, setSecondToken] = React.useState();
+  const [secondAmount, setSecondAmount] = React.useState("");
   const bridgeAddress = account.address;
   const isAuthenticated = account.isConnected && Boolean(bridgeAddress);
-  const fromOptions = require$$0.useMemo(
+  const fromOptions = React.useMemo(
     () => (evmTokensWithBalances && evmTokensWithBalances.map((token) => {
       return {
         ...token,
@@ -190,28 +192,48 @@ const BridgeForm = ({
     })) ?? [],
     [evmTokensWithBalances]
   );
-  const toOptions = require$$0.useMemo(
-    () => (mvxTokensWithBalances && mvxTokensWithBalances.map((token) => {
+  const getAvailableTokens = React.useCallback(
+    (option) => {
+      if (!(option == null ? void 0 : option.availableTokens)) {
+        return [];
+      }
+      const foundTokens = [];
+      for (const availableToken of option.availableTokens) {
+        const foundToken = mvxTokensWithBalances == null ? void 0 : mvxTokensWithBalances.find(
+          (mvxToken) => mvxToken.address === availableToken.address
+        );
+        if (foundToken) {
+          foundTokens.push(foundToken);
+        }
+      }
+      return foundTokens;
+    },
+    [mvxTokensWithBalances]
+  );
+  const toOptions = React.useMemo(
+    () => ((firstToken == null ? void 0 : firstToken.availableTokens) && getAvailableTokens(firstToken).map((token) => {
       return {
         ...token,
         identifier: token.address,
         ticker: token.symbol
       };
     })) ?? [],
-    [mvxTokensWithBalances]
+    [firstToken == null ? void 0 : firstToken.availableTokens]
   );
-  const selectedChainOption = require$$0.useMemo(
+  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 defaultReceivingToken = require$$0.useMemo(
-    () => toOptions.find((x) => x.symbol.toLowerCase().includes("usdc")),
-    [toOptions]
+  const getDefaultReceivingToken = React.useCallback(
+    (values) => values.find((x) => x.symbol.toLowerCase().includes("usdc")) ?? (mvxTokensWithBalances == null ? void 0 : mvxTokensWithBalances.find(
+      (x) => x.symbol.toLowerCase().includes("usdc")
+    )),
+    [mvxTokensWithBalances]
   );
   const hasAmounts = firstAmount !== "" && secondAmount !== "";
-  const fetchRateDebounced = require$$0.useCallback(
+  const fetchRateDebounced = React.useCallback(
     debounce(async (amount) => {
       if (!amount || !account.address || !(firstToken == null ? void 0 : firstToken.address) || !(secondToken == null ? void 0 : secondToken.address) || !selectedChainOption || !chainId) {
         return;
@@ -234,18 +256,18 @@ const BridgeForm = ({
       selectedChainOption
     ]
   );
-  const handleOnChangeFirstAmount = require$$0.useCallback((amount) => {
+  const handleOnChangeFirstAmount = React.useCallback((amount) => {
     setFirstAmount(() => amount);
     setLastChangedField(reactjs_hooks_useBridgeFormik.BridgeFormikValuesEnum.firstAmount);
   }, []);
-  const handleOnChangeSecondAmount = require$$0.useCallback((amount) => {
+  const handleOnChangeSecondAmount = React.useCallback((amount) => {
     setSecondAmount(() => amount);
     setLastChangedField(reactjs_hooks_useBridgeFormik.BridgeFormikValuesEnum.secondAmount);
   }, []);
-  const handleHistoryClose = require$$0.useCallback(() => {
+  const handleHistoryClose = React.useCallback(() => {
     onHistoryClose == null ? void 0 : onHistoryClose();
   }, [onHistoryClose]);
-  const handleOnFirstMaxBtnChange = require$$0.useCallback(() => {
+  const handleOnFirstMaxBtnChange = React.useCallback(() => {
     const formattedBalance = formatAmount.formatAmount({
       decimals: firstToken == null ? void 0 : firstToken.decimals,
       input: (firstToken == null ? void 0 : firstToken.balance) ?? "0",
@@ -255,7 +277,7 @@ const BridgeForm = ({
     formik.setFieldValue("firstAmount", formattedBalance);
     handleOnChangeFirstAmount(formattedBalance);
   }, [firstToken == null ? void 0 : firstToken.balance, firstToken == null ? void 0 : firstToken.decimals, handleOnChangeFirstAmount]);
-  const onSuccess = require$$0.useCallback(
+  const onSuccess = React.useCallback(
     async (txHashes) => {
       handleOnChangeFirstAmount("");
       handleOnChangeSecondAmount("");
@@ -269,9 +291,9 @@ const BridgeForm = ({
       onSuccessfullySentTransaction
     ]
   );
-  const updateUrlParams = require$$0.useCallback(
+  const updateUrlParams = React.useCallback(
     ({ firstTokenId, secondTokenId }) => {
-      if (isTokensLoading || !bridgeAddress) {
+      if (isTokensLoading) {
         return;
       }
       const currentUrl = reactjs_utils_getCompletePathname.getCompletePathname();
@@ -288,18 +310,28 @@ const BridgeForm = ({
       }
       onNavigate == null ? void 0 : onNavigate(newUrl, { replace: true });
     },
-    [bridgeAddress, callbackRoute, isTokensLoading, onNavigate]
+    [callbackRoute, isTokensLoading, onNavigate]
   );
-  const onChangeFirstSelect = require$$0.useCallback(
+  console.log("BridgeForm", {
+    firstToken,
+    secondToken,
+    fromOptions,
+    toOptions
+  });
+  const onChangeFirstSelect = React.useCallback(
     (option) => {
       if (!option) {
         return;
       }
       setFirstToken(() => option);
       updateUrlParams({ firstTokenId: option == null ? void 0 : option.address });
-      const secondOption = toOptions.find(
-        (x) => x.symbol.toLowerCase() === (option == null ? void 0 : option.symbol.toLowerCase())
-      ) ?? defaultReceivingToken;
+      const availableTokens = getAvailableTokens(option);
+      const secondOption = availableTokens.find(
+        (x) => {
+          var _a2;
+          return x.symbol.toLowerCase() === ((_a2 = availableTokens == null ? void 0 : availableTokens[0]) == null ? void 0 : _a2.symbol.toLowerCase());
+        }
+      ) ?? getDefaultReceivingToken(availableTokens);
       if (!secondOption) {
         return;
       }
@@ -308,7 +340,7 @@ const BridgeForm = ({
     },
     [toOptions, updateUrlParams]
   );
-  const onChangeSecondSelect = require$$0.useCallback(
+  const onChangeSecondSelect = React.useCallback(
     (option) => {
       if (!option) {
         return;
@@ -328,10 +360,13 @@ const BridgeForm = ({
   );
   const setInitialSelectedTokens = () => {
     var _a2, _b2, _c2, _d2;
-    if (isTokensLoading) {
+    if (isTokensLoading || initializedInitialTokensRef.current) {
       return;
     }
-    const initialTokens = reactjs_utils_getInitialTokens.getInitialTokens();
+    const initialTokens = reactjs_utils_getInitialTokens.getInitialTokens({
+      firstTokenId: firstTokenIdentifier,
+      secondTokenId: secondTokenIdentifier
+    });
     const firstOption = (fromOptions == null ? void 0 : fromOptions.find(
       ({ identifier }) => (initialTokens == null ? void 0 : initialTokens.firstTokenId) === identifier
     )) ?? fromOptions.find(
@@ -339,27 +374,39 @@ const BridgeForm = ({
         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.toLowerCase() === ((firstOption == null ? void 0 : firstOption.symbol) ?? (initialTokens == null ? void 0 : initialTokens.secondTokenId)).toLowerCase()
-    )) ?? toOptions.find(
+    ) ?? (fromOptions == null ? void 0 : fromOptions[0]);
+    const availableTokens = getAvailableTokens(firstOption);
+    const secondOption = (availableTokens == null ? void 0 : availableTokens.find(
+      ({ address }) => {
+        var _a3;
+        return address.toLowerCase() === ((_a3 = (firstOption == null ? void 0 : firstOption.symbol) ?? (initialTokens == null ? void 0 : initialTokens.secondTokenId)) == null ? void 0 : _a3.toLowerCase());
+      }
+    )) ?? availableTokens.find(
       (x) => x.symbol.toLowerCase() === (firstOption == null ? void 0 : firstOption.symbol.toLowerCase())
-    ) ?? defaultReceivingToken;
+    ) ?? getDefaultReceivingToken(availableTokens);
     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;
+    let initializedFirstToken = false;
+    if (firstOption) {
+      setFirstToken(firstOption);
+      updateUrlParams({
+        firstTokenId: firstOption == null ? void 0 : firstOption.address
+      });
+      initializedFirstToken = true;
     }
-    setFirstToken(firstOption);
-    setSecondToken(secondOption);
-    updateUrlParams({
-      firstTokenId: firstOption == null ? void 0 : firstOption.address,
-      secondTokenId: secondOption == null ? void 0 : secondOption.address
-    });
+    let initializedSecondToken = false;
+    if (secondOption) {
+      setSecondToken(secondOption);
+      updateUrlParams({
+        secondTokenId: secondOption == null ? void 0 : secondOption.address
+      });
+      initializedSecondToken = true;
+    }
+    initializedInitialTokensRef.current = initializedFirstToken && initializedSecondToken;
   };
-  const onSubmit = require$$0.useCallback(
+  const onSubmit = React.useCallback(
     async ({
       transactions,
       provider
@@ -372,30 +419,76 @@ const BridgeForm = ({
         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
-            });
+            switch (selectedChainOption == null ? void 0 : selectedChainOption.chainType) {
+              case types_chainType.ChainType.evm:
+                const hash = await evm.signTransaction({
+                  ...transaction,
+                  value: BigInt(transaction.value),
+                  gas: BigInt(transaction.gasLimit),
+                  account: bridgeAddress
+                });
+                if (!hash) {
+                  break;
+                }
+                signedTransactions.push({
+                  ...transaction,
+                  txHash: hash
+                });
+                if (txIndex === transactions.length - 1 || !hash) {
+                  break;
+                }
+                const transactionReceipt = await waitForTransactionReceipt(
+                  config,
+                  {
+                    confirmations: 1,
+                    hash
+                  }
+                );
+                console.info({
+                  transactionReceipt,
+                  hash
+                });
+                break;
+              case types_chainType.ChainType.sol:
+                if (!transaction.instructions || !transaction.feePayer) {
+                  break;
+                }
+                const txHash = await solana.signTransaction({
+                  feePayer: transaction.feePayer,
+                  instructions: transaction.instructions
+                });
+                if (!txHash) {
+                  break;
+                }
+                signedTransactions.push({
+                  ...transaction,
+                  txHash
+                });
+                break;
+              case types_chainType.ChainType.btc:
+                if (!transaction.bitcoinParams) {
+                  console.error("No bitcoin params");
+                  break;
+                }
+                console.log({
+                  transaction
+                });
+                const psbt = await bitcoin.signTransaction(
+                  transaction.bitcoinParams
+                );
+                signedTransactions.push({
+                  ...transaction,
+                  txHash: psbt
+                });
+                break;
+              default:
+                reactToastify.toast.error("Provider not supported");
+                setPendingSigning(false);
+                return;
+            }
             setSigningTransactionsCount(
               () => transactions.length - 1 - txIndex
             );
-            if (txIndex === transactions.length - 1) {
-              continue;
-            }
-            const transactionReceipt = await waitForTransactionReceipt(config, {
-              confirmations: 1,
-              hash: txHash
-            });
-            console.info({
-              transactionReceipt,
-              hash: txHash
-            });
           } catch (e) {
             reactToastify.toast.dismiss();
             reactToastify.toast.error("Transaction aborted");
@@ -432,7 +525,7 @@ const BridgeForm = ({
       nativeAuthToken,
       onSuccess,
       sendTransactions,
-      signTransaction
+      evm.signTransaction
     ]
   );
   const {
@@ -460,7 +553,7 @@ const BridgeForm = ({
   const hasError = Boolean(
     firstAmountError || secondAmountError || fromChainError || rateValidationError
   );
-  require$$0.useEffect(() => {
+  React.useEffect(() => {
     if (!firstAmount) {
       setSecondAmount("");
     }
@@ -473,21 +566,21 @@ const BridgeForm = ({
     }, 60 * 1e3);
     return () => clearInterval(fetchRateInterval);
   }, [firstAmount, fetchRateDebounced]);
-  require$$0.useEffect(() => {
+  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]);
-  require$$0.useEffect(() => {
+  React.useEffect(() => {
     if (rateValidationError) {
       formik.setFieldValue(reactjs_hooks_useBridgeFormik.BridgeFormikValuesEnum.secondAmount, "0");
       setSecondAmount("0");
     }
   }, [rateValidationError]);
-  require$$0.useEffect(setInitialSelectedTokens, [isTokensLoading, chainId]);
-  require$$0.useEffect(() => {
+  React.useEffect(setInitialSelectedTokens, [isTokensLoading, fromOptions]);
+  React.useEffect(() => {
     const selectedTokenOption = evmTokensWithBalances == null ? void 0 : evmTokensWithBalances.find(
       (x) => x.address === (firstToken == null ? void 0 : firstToken.address)
     );
@@ -504,7 +597,7 @@ const BridgeForm = ({
       };
     });
   }, [evmTokensWithBalances, firstToken == null ? void 0 : firstToken.address]);
-  require$$0.useEffect(() => {
+  React.useEffect(() => {
     const selectedTokenOption = mvxTokensWithBalances == null ? void 0 : mvxTokensWithBalances.find(
       (x) => x.address === (secondToken == null ? void 0 : secondToken.address)
     );
@@ -572,6 +665,7 @@ const BridgeForm = ({
                     disabled: isPendingRate,
                     options: fromOptions,
                     areOptionsLoading: isTokensLoading,
+                    isMvxSelector: false,
                     color: "neutral-850",
                     onChange: onChangeFirstSelect,
                     onBlur: handleBlur,
@@ -626,10 +720,11 @@ const BridgeForm = ({
                   reactjs_components_TokenSelector_TokenSelector.TokenSelector,
                   {
                     name: "secondToken",
-                    disabled: true,
+                    disabled: isPendingRate,
                     omitDisableClass: true,
                     options: toOptions,
                     areOptionsLoading: isTokensLoading,
+                    isMvxSelector: true,
                     color: "neutral-850",
                     onChange: onChangeSecondSelect,
                     onBlur: handleBlur,
@@ -645,7 +740,7 @@ const BridgeForm = ({
             reactjs_components_Connect_MvxConnectButton.MvxConnectButton,
             {
               mvxAccountAddress: mvxAddress,
-              chain: mvxChain,
+              icon: mvxChain == null ? void 0 : mvxChain.svgUrl,
               onClick: onMvxConnect
             }
           ),