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

package/reactjs/components/BridgeHistory/BridgeHistory.d.ts

@@ -0,0 +1,4 @@
+export declare const BridgeHistory: ({ mvxAddress, onClose }: {
+    mvxAddress?: string;
+    onClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/reactjs/components/BridgeHistory/BridgeHistory.js

@@ -0,0 +1,233 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+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 constants_index = require("../../../constants/index.js");
+const reactjs_context_useWeb3App = require("../../context/useWeb3App.js");
+const reactjs_hooks_useFetchBridgeData = require("../../hooks/useFetchBridgeData.js");
+const reactjs_queries_useGetHistory_query = require("../../queries/useGetHistory.query.js");
+const reactjs_utils_formatAmount = require("../../utils/formatAmount.js");
+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");
+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) => {
+    switch (transaction.status) {
+      case "success":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          reactFontawesome.FontAwesomeIcon,
+          {
+            icon: faCircleCheck.faCircleCheck,
+            size: "lg",
+            className: "liq-flex liq-items-center liq-justify-center liq-rounded-full liq-text-green-400"
+          }
+        );
+      case "failed":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          reactFontawesome.FontAwesomeIcon,
+          {
+            icon: faCircleXmark.faCircleXmark,
+            size: "lg",
+            className: "liq-flex liq-items-center liq-justify-center liq-rounded-full liq-text-red-400"
+          }
+        );
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          reactFontawesome.FontAwesomeIcon,
+          {
+            icon: faClock.faClock,
+            size: "lg",
+            className: "liq-flex liq-items-center liq-justify-center liq-rounded-full liq-text-yellow-400"
+          }
+        );
+    }
+  }, []);
+  const transactions = require$$0.useMemo(
+    () => data == null ? void 0 : data.map((transaction) => {
+      return {
+        ...transaction,
+        tokenDestination: transaction.tokenOut.toLowerCase(),
+        tokenSource: transaction.tokenIn.toLowerCase(),
+        sender: transaction.sender.toLowerCase(),
+        statusIcon: resolveTransactionIcon(transaction)
+      };
+    }),
+    [data, resolveTransactionIcon]
+  );
+  const {
+    evmTokensWithBalances,
+    mvxTokensWithBalances,
+    chains,
+    isTokensLoading: tokensLoading,
+    isChainsLoading
+  } = reactjs_hooks_useFetchBridgeData.useFetchBridgeData({
+    mvxAddress,
+    mvxApiURL: options.mvxApiURL
+  });
+  const tokensMap = require$$0.useMemo(() => {
+    return [
+      ...evmTokensWithBalances ?? [],
+      ...mvxTokensWithBalances ?? []
+    ].reduce(
+      (acc, token) => {
+        acc[token.address.toLowerCase()] = token;
+        return acc;
+      },
+      {}
+    );
+  }, [evmTokensWithBalances, mvxTokensWithBalances]);
+  const chainsMap = require$$0.useMemo(() => {
+    return (chains ?? []).reduce(
+      (acc, chain) => {
+        acc[chain.chainId.toString()] = chain;
+        return acc;
+      },
+      {}
+    );
+  }, [chains]);
+  const className = reactjs_utils_mxClsx.mxClsx(
+    "liq-flex liq-flex-col liq-absolute liq-left-0 liq-top-0 liq-order-1 liq-mx-auto liq-w-full liq-gap-1 liq-pt-12 lg:liq-order-2 lg:liq-max-w-[27.5rem] !liq-min-h-[26rem] !liq-h-[26rem] !lg:liq-pt-0 !liq-bg-neutral-850 !liq-z-[16] !liq-p-2 !liq-pointer-events-auto",
+    {
+      "!liq-disabled !liq-animate-pulse": isLoading || tokensLoading || isChainsLoading
+    }
+  );
+  if (isLoading && !transactions) {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactjs_components_base_MxCard_MxCard.MxCard, { className: reactjs_utils_mxClsx.mxClsx("liq-flex", className) });
+  }
+  if (isError && !transactions) {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactjs_components_base_MxCard_MxCard.MxCard, { className: reactjs_utils_mxClsx.mxClsx("liq-flex liq-flex-col liq-gap-1", className), children: "Something went wrong. Please try again later." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactjs_components_base_MxCard_MxCard.MxCard, { className: reactjs_utils_mxClsx.mxClsx("liq-flex liq-flex-col liq-gap-1", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "liq-flex liq-items-center liq-justify-between liq-py-1 liq-mt-0.5",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex liq-flex-1 liq-items-center liq-justify-center liq-text-center liq-text-lg", children: "History" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactjs_components_base_MxButton_MxButton.MxButton,
+            {
+              btnSize: "md",
+              className: "liq-border-none !liq-p-0 !liq-mr-2",
+              variant: "link-neutral-500",
+              onClick: onClose,
+              children: /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: faClose.faClose, size: "xl" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "scrollbar-thin liq-flex liq-flex-1 liq-flex-col liq-gap-1 liq-overflow-y-scroll", children: [
+      (transactions == null ? void 0 : transactions.length) === 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        reactjs_components_base_MxCard_MxCard.MxCard,
+        {
+          cardSize: "lg",
+          variant: "transparent",
+          className: "liq-align-center liq-flex liq-h-full liq-flex-col liq-justify-center liq-gap-4 liq-border-0 !liq-pb-8 !liq-pt-6 !sm:liq-pb-6 !lg:liq-p-4",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-align-center liq-flex liq-flex-col liq-justify-center liq-gap-8", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex liq-items-center liq-justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+              reactFontawesome.FontAwesomeIcon,
+              {
+                icon: faClock.faClock,
+                size: "6x",
+                className: "liq-rounded-full liq-bg-primary-400 liq-text-[#2b617a]"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reactjs_utils_mxClsx.mxClsx("liq-flex liq-flex-col liq-items-center"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-text-xl", children: "No deposit yet" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-text-neutral-400", children: "Your deposit history will appear here" })
+            ] })
+          ] })
+        }
+      ),
+      transactions && (transactions == null ? void 0 : transactions.length) > 0 && transactions.map((transaction, index) => {
+        var _a, _b, _c, _d, _e, _f;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          reactjs_components_base_MxCard_MxCard.MxCard,
+          {
+            cardSize: "lg",
+            variant: "neutral-750",
+            className: "liq-flex liq-flex-col liq-gap-4 !liq-outline liq-outline-transparent !liq-p-4 liq-border liq-border-neutral-750 liq-bg-neutral-850 hover:!liq-bg-neutral-700 !liq-rounded-lg",
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-align-center liq-flex liq-justify-between liq-gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: reactjs_utils_mxClsx.mxClsx("liq-flex liq-items-center liq-gap-1", {
+                    "liq-text-yellow-200": transaction.status === "pending",
+                    "liq-text-green-200": transaction.status === "success",
+                    "liq-text-red-200": transaction.status === "failed"
+                  }),
+                  children: [
+                    transaction.statusIcon,
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: constants_index.MVX_CHAIN_IDS.includes(Number(transaction.toChainId)) ? "Deposit" : "Transfer" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: constants_index.MVX_CHAIN_IDS.includes(Number(transaction.toChainId)) ? (_a = tokensMap[transaction.tokenDestination]) == null ? void 0 : _a.svgUrl : (_b = tokensMap[transaction.tokenSource]) == null ? void 0 : _b.svgUrl,
+                        alt: "",
+                        className: "liq-h-[1.5rem] liq-w-[1.5rem]"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-whitespace-nowrap liq-overflow-hidden liq-text-ellipsis", children: reactjs_utils_formatAmount.formatAmount({
+                      decimals: constants_index.MVX_CHAIN_IDS.includes(
+                        Number(transaction.toChainId)
+                      ) ? (_c = tokensMap[transaction.tokenSource]) == null ? void 0 : _c.decimals : (_d = tokensMap[transaction.tokenDestination]) == null ? void 0 : _d.decimals,
+                      amount: transaction.amountIn,
+                      addCommas: false,
+                      digits: 2
+                    }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-whitespace-nowrap", children: (_e = tokensMap[transaction.tokenSource]) == null ? void 0 : _e.symbol }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: constants_index.MVX_CHAIN_IDS.includes(Number(transaction.toChainId)) ? "from" : "to" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: ((_f = chainsMap[constants_index.MVX_CHAIN_IDS.includes(Number(transaction.toChainId)) ? transaction.fromChainId.toString() : transaction.toChainId.toString()]) == null ? void 0 : _f.svgUrl) ?? "",
+                        alt: "",
+                        className: "liq-z-10 liq-flex liq-h-[1.5rem] liq-w-[1.5rem] liq-p-1"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-ml-auto liq-mr-0 liq-flex liq-items-center liq-gap-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                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"
+                      }
+                    )
+                  ]
+                }
+              ) })
+            ] })
+          },
+          `${transaction.txHash}-${index}`
+        );
+      })
+    ] })
+  ] });
+};
+exports.BridgeHistory = BridgeHistory;

package/reactjs/components/BridgeHistory/BridgeHistory.mjs

@@ -0,0 +1,232 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { faCircleCheck } from "@fortawesome/free-solid-svg-icons/faCircleCheck";
+import { faCircleXmark } from "@fortawesome/free-solid-svg-icons/faCircleXmark";
+import { faClock } from "@fortawesome/free-solid-svg-icons/faClock";
+import { faClose } from "@fortawesome/free-solid-svg-icons/faClose";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useCallback, useMemo } from "react";
+import { MVX_CHAIN_IDS } from "../../../constants/index.mjs";
+import { useWeb3App } from "../../context/useWeb3App.mjs";
+import { useFetchBridgeData } from "../../hooks/useFetchBridgeData.mjs";
+import { useGetHistoryQuery } from "../../queries/useGetHistory.query.mjs";
+import { formatAmount } from "../../utils/formatAmount.mjs";
+import { mxClsx } from "../../utils/mxClsx.mjs";
+import { MxButton } from "../base/MxButton/MxButton.mjs";
+import { MxCard } from "../base/MxCard/MxCard.mjs";
+import { MxLink } from "../base/MxLink/MxLink.mjs";
+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 } = useWeb3App();
+  const { data, isLoading, isError } = useGetHistoryQuery();
+  const resolveTransactionIcon = useCallback((transaction) => {
+    switch (transaction.status) {
+      case "success":
+        return /* @__PURE__ */ jsx(
+          FontAwesomeIcon,
+          {
+            icon: faCircleCheck,
+            size: "lg",
+            className: "liq-flex liq-items-center liq-justify-center liq-rounded-full liq-text-green-400"
+          }
+        );
+      case "failed":
+        return /* @__PURE__ */ jsx(
+          FontAwesomeIcon,
+          {
+            icon: faCircleXmark,
+            size: "lg",
+            className: "liq-flex liq-items-center liq-justify-center liq-rounded-full liq-text-red-400"
+          }
+        );
+      default:
+        return /* @__PURE__ */ jsx(
+          FontAwesomeIcon,
+          {
+            icon: faClock,
+            size: "lg",
+            className: "liq-flex liq-items-center liq-justify-center liq-rounded-full liq-text-yellow-400"
+          }
+        );
+    }
+  }, []);
+  const transactions = useMemo(
+    () => data == null ? void 0 : data.map((transaction) => {
+      return {
+        ...transaction,
+        tokenDestination: transaction.tokenOut.toLowerCase(),
+        tokenSource: transaction.tokenIn.toLowerCase(),
+        sender: transaction.sender.toLowerCase(),
+        statusIcon: resolveTransactionIcon(transaction)
+      };
+    }),
+    [data, resolveTransactionIcon]
+  );
+  const {
+    evmTokensWithBalances,
+    mvxTokensWithBalances,
+    chains,
+    isTokensLoading: tokensLoading,
+    isChainsLoading
+  } = useFetchBridgeData({
+    mvxAddress,
+    mvxApiURL: options.mvxApiURL
+  });
+  const tokensMap = useMemo(() => {
+    return [
+      ...evmTokensWithBalances ?? [],
+      ...mvxTokensWithBalances ?? []
+    ].reduce(
+      (acc, token) => {
+        acc[token.address.toLowerCase()] = token;
+        return acc;
+      },
+      {}
+    );
+  }, [evmTokensWithBalances, mvxTokensWithBalances]);
+  const chainsMap = useMemo(() => {
+    return (chains ?? []).reduce(
+      (acc, chain) => {
+        acc[chain.chainId.toString()] = chain;
+        return acc;
+      },
+      {}
+    );
+  }, [chains]);
+  const className = mxClsx(
+    "liq-flex liq-flex-col liq-absolute liq-left-0 liq-top-0 liq-order-1 liq-mx-auto liq-w-full liq-gap-1 liq-pt-12 lg:liq-order-2 lg:liq-max-w-[27.5rem] !liq-min-h-[26rem] !liq-h-[26rem] !lg:liq-pt-0 !liq-bg-neutral-850 !liq-z-[16] !liq-p-2 !liq-pointer-events-auto",
+    {
+      "!liq-disabled !liq-animate-pulse": isLoading || tokensLoading || isChainsLoading
+    }
+  );
+  if (isLoading && !transactions) {
+    return /* @__PURE__ */ jsx(MxCard, { className: mxClsx("liq-flex", className) });
+  }
+  if (isError && !transactions) {
+    return /* @__PURE__ */ jsx(MxCard, { className: mxClsx("liq-flex liq-flex-col liq-gap-1", className), children: "Something went wrong. Please try again later." });
+  }
+  return /* @__PURE__ */ jsxs(MxCard, { className: mxClsx("liq-flex liq-flex-col liq-gap-1", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "liq-flex liq-items-center liq-justify-between liq-py-1 liq-mt-0.5",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "liq-flex liq-flex-1 liq-items-center liq-justify-center liq-text-center liq-text-lg", children: "History" }),
+          /* @__PURE__ */ jsx(
+            MxButton,
+            {
+              btnSize: "md",
+              className: "liq-border-none !liq-p-0 !liq-mr-2",
+              variant: "link-neutral-500",
+              onClick: onClose,
+              children: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faClose, size: "xl" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "scrollbar-thin liq-flex liq-flex-1 liq-flex-col liq-gap-1 liq-overflow-y-scroll", children: [
+      (transactions == null ? void 0 : transactions.length) === 0 && /* @__PURE__ */ jsx(
+        MxCard,
+        {
+          cardSize: "lg",
+          variant: "transparent",
+          className: "liq-align-center liq-flex liq-h-full liq-flex-col liq-justify-center liq-gap-4 liq-border-0 !liq-pb-8 !liq-pt-6 !sm:liq-pb-6 !lg:liq-p-4",
+          children: /* @__PURE__ */ jsxs("div", { className: "liq-align-center liq-flex liq-flex-col liq-justify-center liq-gap-8", children: [
+            /* @__PURE__ */ jsx("div", { className: "liq-flex liq-items-center liq-justify-center", children: /* @__PURE__ */ jsx(
+              FontAwesomeIcon,
+              {
+                icon: faClock,
+                size: "6x",
+                className: "liq-rounded-full liq-bg-primary-400 liq-text-[#2b617a]"
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: mxClsx("liq-flex liq-flex-col liq-items-center"), children: [
+              /* @__PURE__ */ jsx("div", { className: "liq-text-xl", children: "No deposit yet" }),
+              /* @__PURE__ */ jsx("div", { className: "liq-text-neutral-400", children: "Your deposit history will appear here" })
+            ] })
+          ] })
+        }
+      ),
+      transactions && (transactions == null ? void 0 : transactions.length) > 0 && transactions.map((transaction, index) => {
+        var _a, _b, _c, _d, _e, _f;
+        return /* @__PURE__ */ jsx(
+          MxCard,
+          {
+            cardSize: "lg",
+            variant: "neutral-750",
+            className: "liq-flex liq-flex-col liq-gap-4 !liq-outline liq-outline-transparent !liq-p-4 liq-border liq-border-neutral-750 liq-bg-neutral-850 hover:!liq-bg-neutral-700 !liq-rounded-lg",
+            children: /* @__PURE__ */ jsxs("div", { className: "liq-align-center liq-flex liq-justify-between liq-gap-1", children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: mxClsx("liq-flex liq-items-center liq-gap-1", {
+                    "liq-text-yellow-200": transaction.status === "pending",
+                    "liq-text-green-200": transaction.status === "success",
+                    "liq-text-red-200": transaction.status === "failed"
+                  }),
+                  children: [
+                    transaction.statusIcon,
+                    /* @__PURE__ */ jsx("span", { children: MVX_CHAIN_IDS.includes(Number(transaction.toChainId)) ? "Deposit" : "Transfer" }),
+                    /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: MVX_CHAIN_IDS.includes(Number(transaction.toChainId)) ? (_a = tokensMap[transaction.tokenDestination]) == null ? void 0 : _a.svgUrl : (_b = tokensMap[transaction.tokenSource]) == null ? void 0 : _b.svgUrl,
+                        alt: "",
+                        className: "liq-h-[1.5rem] liq-w-[1.5rem]"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "liq-whitespace-nowrap liq-overflow-hidden liq-text-ellipsis", children: formatAmount({
+                      decimals: MVX_CHAIN_IDS.includes(
+                        Number(transaction.toChainId)
+                      ) ? (_c = tokensMap[transaction.tokenSource]) == null ? void 0 : _c.decimals : (_d = tokensMap[transaction.tokenDestination]) == null ? void 0 : _d.decimals,
+                      amount: transaction.amountIn,
+                      addCommas: false,
+                      digits: 2
+                    }) }),
+                    /* @__PURE__ */ jsx("span", { className: "liq-whitespace-nowrap", children: (_e = tokensMap[transaction.tokenSource]) == null ? void 0 : _e.symbol }),
+                    /* @__PURE__ */ jsx("span", { children: MVX_CHAIN_IDS.includes(Number(transaction.toChainId)) ? "from" : "to" }),
+                    /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: ((_f = chainsMap[MVX_CHAIN_IDS.includes(Number(transaction.toChainId)) ? transaction.fromChainId.toString() : transaction.toChainId.toString()]) == null ? void 0 : _f.svgUrl) ?? "",
+                        alt: "",
+                        className: "liq-z-10 liq-flex liq-h-[1.5rem] liq-w-[1.5rem] liq-p-1"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "liq-ml-auto liq-mr-0 liq-flex liq-items-center liq-gap-1", children: /* @__PURE__ */ jsxs(
+                MxLink,
+                {
+                  to: `${options.bridgeURL}/status/${transaction.txHash}`,
+                  target: "_blank",
+                  showExternalIcon: false,
+                  className: "liq-flex",
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "max-sm:liq-hidden", children: "View" }),
+                    /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: ArrowUpRight,
+                        alt: "",
+                        className: "liq-flex liq-items-center liq-justify-center liq-rounded-full liq-text-neutral-200"
+                      }
+                    )
+                  ]
+                }
+              ) })
+            ] })
+          },
+          `${transaction.txHash}-${index}`
+        );
+      })
+    ] })
+  ] });
+};
+export {
+  BridgeHistory
+};

package/reactjs/components/BridgeHistory/index.d.ts

@@ -0,0 +1 @@
+export * from './BridgeHistory';

package/reactjs/components/BridgeHistory/index.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const reactjs_components_BridgeHistory_BridgeHistory = require("./BridgeHistory.js");
+exports.BridgeHistory = reactjs_components_BridgeHistory_BridgeHistory.BridgeHistory;

package/reactjs/components/BridgeHistory/index.mjs

@@ -0,0 +1,4 @@
+import { BridgeHistory } from "./BridgeHistory.mjs";
+export {
+  BridgeHistory
+};

package/reactjs/components/Connect/BridgeAccountDisplay.d.ts

@@ -0,0 +1,6 @@
+import { ChainDTO } from '../../../dto/Chain.dto';
+
+export declare const BridgeAccountDisplay: ({ activeChain, disabled }: {
+    activeChain?: ChainDTO;
+    disabled: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/reactjs/components/Connect/BridgeAccountDisplay.js

@@ -0,0 +1,85 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const faPowerOff = require("@fortawesome/free-solid-svg-icons/faPowerOff");
+const reactFontawesome = require("@fortawesome/react-fontawesome");
+require("../../../index-cvy2-uZ_.js");
+const react = require("../../../react-CNXJSTCv.js");
+require("viem");
+require("viem/chains");
+require("react");
+const reactjs_components_Connect_SwitchChainButton = require("./SwitchChainButton.js");
+const reactjs_hooks_useAccount = require("../../hooks/useAccount.js");
+require("tailwind-merge");
+require("../base/MxCard/MxCard.js");
+const reactjs_components_base_MxLink_MxLink = 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_CopyButton_CopyButton = require("../CopyButton/CopyButton.js");
+const reactjs_components_TrimAddress_TrimAddress = require("../TrimAddress/TrimAddress.js");
+const BridgeAccountDisplay = ({
+  activeChain,
+  disabled
+}) => {
+  var _a;
+  const account = reactjs_hooks_useAccount.useAccount();
+  const { disconnect } = react.useDisconnect();
+  const handleDisconnect = async (e) => {
+    try {
+      e.preventDefault();
+      await disconnect();
+    } catch (error) {
+      console.error("Failed to disconnect:", error);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    account.address && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("img", { src: activeChain == null ? void 0 : activeChain.svgUrl, alt: "", className: "liq-w-6" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-truncate liq-text-gray-400", children: activeChain == null ? void 0 : activeChain.networkName }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-ml-[-5px]", children: ":" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex liq-items-center liq-justify-between", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-max-w-[10rem] liq-items-center liq-gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactjs_components_base_MxLink_MxLink.MxLink,
+          {
+            to: `${(_a = activeChain == null ? void 0 : activeChain.blockExplorerUrls) == null ? void 0 : _a[0]}/address/${account.address}`,
+            target: "_blank",
+            showExternalIcon: false,
+            className: "!liq-relative",
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex liq-min-w-0 liq-flex-grow liq-overflow-hidden liq-leading-none liq-max-w-[10rem]", children: /* @__PURE__ */ jsxRuntime.jsx(reactjs_components_TrimAddress_TrimAddress.TrimAddress, { address: account.address }) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(reactjs_components_CopyButton_CopyButton.CopyButton, { text: account.address, className: "liq-text-sm" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-ml-auto liq-mr-0 liq-flex liq-items-center liq-gap-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "focus-primary liq-flex liq-items-center liq-gap-1 liq-rounded-xl liq-px-0 liq-py-2 liq-text-sm liq-font-semibold liq-text-neutral-400 liq-transition-colors liq-duration-200 hover:enabled:liq-text-white disabled:liq-opacity-50",
+          onClick: handleDisconnect,
+          children: /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: faPowerOff.faPowerOff })
+        }
+      ) })
+    ] }),
+    !account.address && /* @__PURE__ */ jsxRuntime.jsx(
+      reactjs_components_Connect_SwitchChainButton.SwitchChainButton,
+      {
+        disabled,
+        className: "liq-rounded-lg liq-font-semibold liq-transition-colors liq-duration-200 disabled:liq-opacity-50 liq-bg-neutral-750 !liq-text-primary-200 hover:enabled:liq-bg-primary liq-px-2",
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex liq-items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-justify-center liq-gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            " ",
+            account.isConnecting ? "Connecting..." : "Connect",
+            " "
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("img", { src: activeChain == null ? void 0 : activeChain.svgUrl, alt: "", className: "liq-w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-truncate md:liq-text-clip", children: activeChain == null ? void 0 : activeChain.networkName })
+        ] }) })
+      }
+    )
+  ] });
+};
+exports.BridgeAccountDisplay = BridgeAccountDisplay;