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

package/reactjs/components/BridgeForm/BridgeForm.mjs

@@ -5,8 +5,8 @@ import { formatAmount } from "@multiversx/sdk-dapp-utils/out/helpers/formatAmoun
 import debounce from "lodash/debounce";
 import { useRef, useState, useMemo, useCallback, useEffect } from "react";
 import { toast } from "react-toastify";
-import { useSwitchChain } from "wagmi";
 import { getApiURL } from "../../../helpers/getApiURL.mjs";
+import { ChainType } from "../../../types/chainType.mjs";
 import { safeWindow } from "../../constants/index.mjs";
 import { useWeb3App } from "../../context/useWeb3App.mjs";
 import { useAccount } from "../../hooks/useAccount.mjs";
@@ -33,15 +33,15 @@ import "react-popper";
 import "../base/MxTooltip/components/TooltipContainer/TooltipContainer.mjs";
 import { BridgeHistory } from "../BridgeHistory/BridgeHistory.mjs";
 import { BridgeConnectButton } from "../Connect/BridgeConnectButton.mjs";
-import "../../../index-iN9APQ6x.mjs";
-import { hexToString } from "viem";
-import "viem/chains";
+import "@reown/appkit/react";
+import "wagmi";
 import { MvxConnectButton } from "../Connect/MvxConnectButton.mjs";
 import { BridgeAccountDisplay } from "../Connect/BridgeAccountDisplay.mjs";
 import { MvxAccountDisplay } from "../Connect/MvxAccountDisplay.mjs";
 import { TokenSelector } from "../TokenSelector/TokenSelector.mjs";
+import { hexToString } from "viem";
 import { waitForTransactionReceipt as waitForTransactionReceipt$1, getTransaction, call } from "viem/actions";
-import { g as getAction } from "../../../useBalances-C_69CFoa.mjs";
+import { g as getAction } from "../../../useBalances-Bom1mw1J.mjs";
 function deepEqual(a, b) {
   if (a === b)
     return true;
@@ -120,6 +120,8 @@ const BridgeForm = ({
   username,
   nativeAuthToken,
   callbackRoute = "/",
+  firstTokenIdentifier,
+  secondTokenIdentifier,
   refetchTrigger,
   showHistory,
   onSuccessfullySentTransaction,
@@ -131,12 +133,12 @@ const BridgeForm = ({
 }) => {
   var _a, _b, _c, _d, _e, _f;
   const ref = useRef(null);
+  const initializedInitialTokensRef = useRef(false);
   const [isTokenSelectorVisible, setIsTokenSelectorVisible] = useState(false);
   const [pendingSigning, setPendingSigning] = useState(false);
   const [siginingTransactionsCount, setSigningTransactionsCount] = useState(0);
   const account = useAccount();
-  const { chains: sdkChains } = useSwitchChain();
-  const { config, options } = useWeb3App();
+  const { config, options, supportedChains: sdkChains } = useWeb3App();
   const chainId = useGetChainId();
   const {
     evmTokensWithBalances,
@@ -162,7 +164,7 @@ const BridgeForm = ({
       (chain) => chain.chainId.toString() === mvxChainId.toString()
     );
   }, [chainId, chains]);
-  const { signTransaction } = useSignTransaction();
+  const { evm, solana, bitcoin } = useSignTransaction();
   const sendTransactions = useSendTransactions();
   const {
     mutate: getRate,
@@ -187,15 +189,33 @@ const BridgeForm = ({
     })) ?? [],
     [evmTokensWithBalances]
   );
+  const getAvailableTokens = 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 = useMemo(
-    () => (mvxTokensWithBalances && mvxTokensWithBalances.map((token) => {
+    () => ((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 = useMemo(
     () => (chains == null ? void 0 : chains.find(
@@ -203,9 +223,11 @@ const BridgeForm = ({
     )) ?? (chains == null ? void 0 : chains[0]),
     [activeChain == null ? void 0 : activeChain.id, chains]
   );
-  const defaultReceivingToken = useMemo(
-    () => toOptions.find((x) => x.symbol.toLowerCase().includes("usdc")),
-    [toOptions]
+  const getDefaultReceivingToken = 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 = useCallback(
@@ -268,7 +290,7 @@ const BridgeForm = ({
   );
   const updateUrlParams = useCallback(
     ({ firstTokenId, secondTokenId }) => {
-      if (isTokensLoading || !bridgeAddress) {
+      if (isTokensLoading) {
         return;
       }
       const currentUrl = getCompletePathname();
@@ -285,8 +307,14 @@ const BridgeForm = ({
       }
       onNavigate == null ? void 0 : onNavigate(newUrl, { replace: true });
     },
-    [bridgeAddress, callbackRoute, isTokensLoading, onNavigate]
+    [callbackRoute, isTokensLoading, onNavigate]
   );
+  console.log("BridgeForm", {
+    firstToken,
+    secondToken,
+    fromOptions,
+    toOptions
+  });
   const onChangeFirstSelect = useCallback(
     (option) => {
       if (!option) {
@@ -294,9 +322,13 @@ const BridgeForm = ({
       }
       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;
       }
@@ -325,10 +357,13 @@ const BridgeForm = ({
   );
   const setInitialSelectedTokens = () => {
     var _a2, _b2, _c2, _d2;
-    if (isTokensLoading) {
+    if (isTokensLoading || initializedInitialTokensRef.current) {
       return;
     }
-    const initialTokens = getInitialTokens();
+    const initialTokens = getInitialTokens({
+      firstTokenId: firstTokenIdentifier,
+      secondTokenId: secondTokenIdentifier
+    });
     const firstOption = (fromOptions == null ? void 0 : fromOptions.find(
       ({ identifier }) => (initialTokens == null ? void 0 : initialTokens.firstTokenId) === identifier
     )) ?? fromOptions.find(
@@ -336,25 +371,37 @@ 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 = useCallback(
     async ({
@@ -369,30 +416,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 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 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 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:
+                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) {
             toast.dismiss();
             toast.error("Transaction aborted");
@@ -429,7 +522,7 @@ const BridgeForm = ({
       nativeAuthToken,
       onSuccess,
       sendTransactions,
-      signTransaction
+      evm.signTransaction
     ]
   );
   const {
@@ -483,7 +576,7 @@ const BridgeForm = ({
       setSecondAmount("0");
     }
   }, [rateValidationError]);
-  useEffect(setInitialSelectedTokens, [isTokensLoading, chainId]);
+  useEffect(setInitialSelectedTokens, [isTokensLoading, fromOptions]);
   useEffect(() => {
     const selectedTokenOption = evmTokensWithBalances == null ? void 0 : evmTokensWithBalances.find(
       (x) => x.address === (firstToken == null ? void 0 : firstToken.address)
@@ -569,6 +662,7 @@ const BridgeForm = ({
                     disabled: isPendingRate,
                     options: fromOptions,
                     areOptionsLoading: isTokensLoading,
+                    isMvxSelector: false,
                     color: "neutral-850",
                     onChange: onChangeFirstSelect,
                     onBlur: handleBlur,
@@ -623,10 +717,11 @@ const BridgeForm = ({
                   TokenSelector,
                   {
                     name: "secondToken",
-                    disabled: true,
+                    disabled: isPendingRate,
                     omitDisableClass: true,
                     options: toOptions,
                     areOptionsLoading: isTokensLoading,
+                    isMvxSelector: true,
                     color: "neutral-850",
                     onChange: onChangeSecondSelect,
                     onBlur: handleBlur,
@@ -642,7 +737,7 @@ const BridgeForm = ({
             MvxConnectButton,
             {
               mvxAccountAddress: mvxAddress,
-              chain: mvxChain,
+              icon: mvxChain == null ? void 0 : mvxChain.svgUrl,
               onClick: onMvxConnect
             }
           ),

package/reactjs/components/BridgeHistory/BridgeHistory.js

@@ -2,12 +2,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const faArrowDownShortWide = require("@fortawesome/free-solid-svg-icons/faArrowDownShortWide");
+const faArrowUpShortWide = require("@fortawesome/free-solid-svg-icons/faArrowUpShortWide");
 const faCircleCheck = require("@fortawesome/free-solid-svg-icons/faCircleCheck");
 const faCircleXmark = require("@fortawesome/free-solid-svg-icons/faCircleXmark");
 const faClock = require("@fortawesome/free-solid-svg-icons/faClock");
 const faClose = require("@fortawesome/free-solid-svg-icons/faClose");
 const reactFontawesome = require("@fortawesome/react-fontawesome");
-const require$$0 = require("react");
+const React = require("react");
 const constants_index = require("../../../constants/index.js");
 const types_providerType = require("../../../types/providerType.js");
 const reactjs_context_useWeb3App = require("../../context/useWeb3App.js");
@@ -18,14 +20,19 @@ const reactjs_utils_mxClsx = require("../../utils/mxClsx.js");
 const reactjs_components_base_MxButton_MxButton = require("../base/MxButton/MxButton.js");
 const reactjs_components_base_MxCard_MxCard = require("../base/MxCard/MxCard.js");
 const reactjs_components_base_MxLink_MxLink = require("../base/MxLink/MxLink.js");
+require("../base/MxSearch/MxSearch.js");
+require("@headlessui/react");
+const reactjs_components_base_MxTooltip_MxTooltip = require("../base/MxTooltip/MxTooltip.js");
 const ArrowUpRight = "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M15%206V13C15%2013.5625%2014.5312%2014%2014%2014C13.4375%2014%2013%2013.5625%2013%2013V8.4375L6.6875%2014.7188C6.3125%2015.125%205.65625%2015.125%205.28125%2014.7188C4.875%2014.3438%204.875%2013.6875%205.28125%2013.3125L11.5625%207H7C6.4375%207%206%206.5625%206%206C6%205.46875%206.4375%205%207%205H14C14.5312%205%2015%205.46875%2015%206Z'%20fill='%23CDD0DB'/%3e%3c/svg%3e";
 const BridgeHistory = ({
   mvxAddress,
   onClose
 }) => {
   const { options } = reactjs_context_useWeb3App.useWeb3App();
-  const { data, isLoading, isError } = reactjs_queries_useGetHistory_query.useGetHistoryQuery();
-  const resolveTransactionIcon = require$$0.useCallback((transaction) => {
+  const { data, isLoading, isError } = reactjs_queries_useGetHistory_query.useGetHistoryQuery({
+    address: mvxAddress
+  });
+  const resolveTransactionIcon = React.useCallback((transaction) => {
     switch (transaction.status) {
       case "success":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -56,7 +63,7 @@ const BridgeHistory = ({
         );
     }
   }, []);
-  const transactions = require$$0.useMemo(
+  const transactions = React.useMemo(
     () => data == null ? void 0 : data.map((transaction) => {
       return {
         ...transaction,
@@ -78,7 +85,7 @@ const BridgeHistory = ({
     mvxAddress,
     mvxApiURL: options.mvxApiURL
   });
-  const tokensMap = require$$0.useMemo(() => {
+  const tokensMap = React.useMemo(() => {
     return [
       ...evmTokensWithBalances ?? [],
       ...mvxTokensWithBalances ?? []
@@ -90,7 +97,7 @@ const BridgeHistory = ({
       {}
     );
   }, [evmTokensWithBalances, mvxTokensWithBalances]);
-  const chainsMap = require$$0.useMemo(() => {
+  const chainsMap = React.useMemo(() => {
     return (chains ?? []).reduce(
       (acc, chain) => {
         acc[chain.chainId.toString()] = chain;
@@ -172,10 +179,32 @@ const BridgeHistory = ({
                     "liq-text-red-200": transaction.status === "failed"
                   }),
                   children: [
-                    transaction.statusIcon,
-                    constants_index.MVX_CHAIN_IDS.includes(Number(transaction.toChainId)) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Deposit " }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-whitespace-nowrap liq-overflow-hidden liq-text-ellipsis", children: reactjs_utils_formatAmount.formatAmount({
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      reactjs_components_base_MxTooltip_MxTooltip.MxTooltip,
+                      {
+                        placement: "top",
+                        buttonText: transaction.statusIcon,
+                        children: new Date(
+                          transaction.depositTimestamp * 1e3
+                        ).toLocaleString()
+                      }
+                    ),
+                    constants_index.MVX_CHAIN_IDS.includes(transaction.toChainId) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        reactjs_components_base_MxTooltip_MxTooltip.MxTooltip,
+                        {
+                          placement: "top",
+                          buttonText: /* @__PURE__ */ jsxRuntime.jsx(
+                            reactFontawesome.FontAwesomeIcon,
+                            {
+                              icon: faArrowDownShortWide.faArrowDownShortWide,
+                              className: "liq-mx-1 liq-flex liq-items-center"
+                            }
+                          ),
+                          children: "Deposit"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-text-wrap", children: reactjs_utils_formatAmount.formatAmount({
                         decimals: (_a = tokensMap[transaction.tokenDestination]) == null ? void 0 : _a.decimals,
                         amount: transaction.amountOut,
                         addCommas: false,
@@ -191,7 +220,7 @@ const BridgeHistory = ({
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-whitespace-nowrap", children: "from" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-whitespace-nowrap liq-overflow-hidden liq-text-ellipsis", children: reactjs_utils_formatAmount.formatAmount({
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-text-wrap", children: reactjs_utils_formatAmount.formatAmount({
                         decimals: (_d = tokensMap[transaction.tokenSource]) == null ? void 0 : _d.decimals,
                         amount: transaction.amountIn,
                         addCommas: false,
@@ -217,8 +246,22 @@ const BridgeHistory = ({
                         )
                       ] })
                     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Transfer " }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-whitespace-nowrap liq-overflow-hidden liq-text-ellipsis", children: reactjs_utils_formatAmount.formatAmount({
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        reactjs_components_base_MxTooltip_MxTooltip.MxTooltip,
+                        {
+                          placement: "top",
+                          buttonText: /* @__PURE__ */ jsxRuntime.jsx(
+                            reactFontawesome.FontAwesomeIcon,
+                            {
+                              icon: faArrowUpShortWide.faArrowUpShortWide,
+                              spin: true,
+                              className: "liq-mx-1 liq-flex liq-items-center"
+                            }
+                          ),
+                          children: "Transfer"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-text-wrap", children: reactjs_utils_formatAmount.formatAmount({
                         decimals: (_h = tokensMap[transaction.tokenSource]) == null ? void 0 : _h.decimals,
                         amount: transaction.amountIn,
                         addCommas: false,
@@ -234,7 +277,7 @@ const BridgeHistory = ({
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-whitespace-nowrap", children: "to" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-whitespace-nowrap liq-overflow-hidden liq-text-ellipsis", children: reactjs_utils_formatAmount.formatAmount({
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-text-wrap", children: reactjs_utils_formatAmount.formatAmount({
                         decimals: (_k = tokensMap[transaction.tokenDestination]) == null ? void 0 : _k.decimals,
                         amount: transaction.amountOut,
                         addCommas: false,
@@ -263,24 +306,28 @@ const BridgeHistory = ({
                   ]
                 }
               ),
-              transaction.provider === types_providerType.ProviderType.MultiversxBridge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-ml-auto liq-mr-0 liq-flex liq-items-center liq-gap-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
+              transaction.provider === types_providerType.ProviderType.MultiversxBridge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-ml-auto liq-mr-0 liq-flex liq-items-center liq-gap-1", children: /* @__PURE__ */ jsxRuntime.jsx(
                 reactjs_components_base_MxLink_MxLink.MxLink,
                 {
                   to: `${options.bridgeURL}/status/${transaction.txHash}`,
                   target: "_blank",
                   showExternalIcon: false,
                   className: "liq-flex",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-sm:liq-hidden", children: "View" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "img",
-                      {
-                        src: ArrowUpRight,
-                        alt: "",
-                        className: "liq-flex liq-items-center liq-justify-center liq-rounded-full liq-text-neutral-200"
-                      }
-                    )
-                  ]
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    reactjs_components_base_MxTooltip_MxTooltip.MxTooltip,
+                    {
+                      placement: "top",
+                      buttonText: /* @__PURE__ */ jsxRuntime.jsx(
+                        "img",
+                        {
+                          src: ArrowUpRight,
+                          alt: "",
+                          className: "liq-flex liq-items-center liq-justify-center liq-rounded-full liq-text-neutral-200"
+                        }
+                      ),
+                      children: "View"
+                    }
+                  )
                 }
               ) })
             ] })