import { jsx as t, jsxs as e, Fragment as x } from "react/jsx-runtime";
import { cn as g } from "../../utils/cn.js";
import { Card as w } from "../../components/Card.js";
import { formatRelativeTime as f } from "../../utils/formatters/formatRelativeTime.js";
import { TinyNumber as a } from "../../components/TinyNumber.js";
import { getTransactionStatusLabel as u } from "../../utils/transactions/getTransactionStatusLabel.js";
import { findTransactionToken as o } from "../../utils/transactions/findTransactionToken.js";
import { TransactionStatusBadge as b } from "./TransactionStatusBadge.js";
import "react";
import "@material-symbols-svg/react-rounded/icons/chevron-left";
import "@material-symbols-svg/react-rounded/icons/close";
import "@material-symbols-svg/react-rounded/icons/emergency";
import "@material-symbols-svg/react-rounded/icons/error";
import "@material-symbols-svg/react-rounded/icons/verified";
import "@material-symbols-svg/react-rounded/icons/cached";
import "@headlessui/react";
import "@material-symbols-svg/react-rounded/icons/progress-activity";
import "../../config-BDnHptBC.js";
import "copy-text-to-clipboard";
import "@material-symbols-svg/react-rounded/icons/content-copy";
import "@material-symbols-svg/react-rounded/icons/check";
import "@material-symbols-svg/react-rounded/icons/arrow-downward";
import "../../components/Input.js";
import "../../components/InputAmount.js";
import "../../components/Notes.js";
import { TokenIcon as n } from "../../components/TokenIcon.js";
import "@material-symbols-svg/react-rounded/icons/graphic-eq";
import "../../localisation.js";
import "../../constants/chains.js";
import "ethers";
import "../../logger.js";
import "../../components/ChainShortcut.js";
import "@radix-ui/react-tooltip";
import "@material-symbols-svg/react-rounded/icons/info";
import "chroma-js";
import "hsluv";
import "../../components/Steps.js";
const rt = ({
  tokens: i,
  transaction: r,
  className: l,
  onClick: p
}) => {
  const c = u(r.status), d = f(r.createdAt), s = o(i, r, "source"), m = o(i, r, "destination");
  return /* @__PURE__ */ t(
    w,
    {
      isClickable: !0,
      padding: "none",
      onClick: p,
      className: g("hover:bg-sw-gray-800 group", l),
      children: /* @__PURE__ */ e("div", { className: "p-sw-xl flex flex-col gap-x-sw-md", children: [
        /* @__PURE__ */ e("div", { className: "flex items-center justify-between mb-sw-lg", children: [
          /* @__PURE__ */ t("div", { className: "flex items-center gap-x-sw-sm", children: /* @__PURE__ */ t("span", { className: "text-sw-label-md text-sw-gray-200", children: "Swap" }) }),
          /* @__PURE__ */ t("span", { className: "text-sw-label-sm text-sw-gray-400", children: d })
        ] }),
        /* @__PURE__ */ e("div", { className: "flex items-center justify-between", children: [
          /* @__PURE__ */ e("div", { className: "flex items-center gap-x-[10px]", children: [
            !!s && /* @__PURE__ */ e("div", { className: "flex items-center gap-x-sw-md", children: [
              /* @__PURE__ */ t(
                n,
                {
                  token: s,
                  className: "border-sw-gray-900 group-hover:border-sw-gray-800 transition-colors"
                }
              ),
              /* @__PURE__ */ e("span", { className: "text-sw-label-md text-sw-gray-50", children: [
                /* @__PURE__ */ t(a, { value: r.amountInFormatted }),
                " ",
                s.symbol
              ] })
            ] }),
            !!m && /* @__PURE__ */ e(x, { children: [
              /* @__PURE__ */ t("span", { className: "text-sw-gray-200 text-sw-label-md", children: "→" }),
              /* @__PURE__ */ e("div", { className: "flex items-center gap-x-sw-md", children: [
                /* @__PURE__ */ t(n, { token: m }),
                /* @__PURE__ */ e("span", { className: "text-sw-label-md text-sw-gray-50", children: [
                  /* @__PURE__ */ t(a, { value: r.amountOutFormatted }),
                  " ",
                  m.symbol
                ] })
              ] })
            ] })
          ] }),
          /* @__PURE__ */ t(b, { status: c })
        ] })
      ] })
    }
  );
};
export {
  rt as TransactionCard
};
//# sourceMappingURL=TransactionCard.js.map
