@rainbow-me/rainbowkit/dist/components/chunk-V2PT3RNY.js

The best way to connect a wallet

"use client";
import {
  ExternalLinkIcon
} from "./chunk-2JJRYQVC.js";
import {
  SuccessIcon
} from "./chunk-V6B2SPQG.js";
import {
  CancelIcon
} from "./chunk-OAFCLPSG.js";
import {
  Text
} from "./chunk-32RBZPUM.js";
import {
  touchableStyles
} from "./chunk-2W63IDAD.js";
import {
  isMobile
} from "./chunk-N6EWR2LO.js";
import {
  SpinnerIcon
} from "./chunk-5NIYHKHP.js";
import {
  Box
} from "./chunk-ZKEPQLOV.js";

// src/components/Txs/TxItem.tsx
import React from "react";
import { useAccount } from "wagmi";

// src/utils/chainToExplorerUrl.ts
var chainToExplorerUrl = (chain) => chain?.blockExplorers?.default?.url;

// src/components/Txs/TxItem.tsx
var getTxStatusIcon = (status) => {
  switch (status) {
    case "pending":
      return SpinnerIcon;
    case "confirmed":
      return SuccessIcon;
    case "failed":
      return CancelIcon;
    default:
      return SpinnerIcon;
  }
};
function TxItem({ tx }) {
  const mobile = isMobile();
  const Icon = getTxStatusIcon(tx.status);
  const color = tx.status === "failed" ? "error" : "accentColor";
  const { chain: activeChain } = useAccount();
  const confirmationStatus = tx.status === "confirmed" ? "Confirmed" : tx.status === "failed" ? "Failed" : "Pending";
  const explorerLink = chainToExplorerUrl(activeChain);
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
    Box,
    {
      ...explorerLink ? {
        as: "a",
        background: { hover: "profileForeground" },
        borderRadius: "menuButton",
        className: touchableStyles({ active: "shrink" }),
        href: `${explorerLink}/tx/${tx.hash}`,
        rel: "noreferrer noopener",
        target: "_blank",
        transition: "default"
      } : {},
      color: "modalText",
      display: "flex",
      flexDirection: "row",
      justifyContent: "space-between",
      padding: "8",
      width: "full"
    },
    /* @__PURE__ */ React.createElement(
      Box,
      {
        alignItems: "center",
        display: "flex",
        flexDirection: "row",
        gap: mobile ? "16" : "14"
      },
      /* @__PURE__ */ React.createElement(Box, { color }, /* @__PURE__ */ React.createElement(Icon, null)),
      /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column", gap: mobile ? "3" : "1" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
        Text,
        {
          color: "modalText",
          font: "body",
          size: mobile ? "16" : "14",
          weight: "bold"
        },
        tx?.description
      )), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
        Text,
        {
          color: tx.status === "pending" ? "modalTextSecondary" : color,
          font: "body",
          size: "14",
          weight: mobile ? "medium" : "regular"
        },
        confirmationStatus
      )))
    ),
    explorerLink && /* @__PURE__ */ React.createElement(Box, { alignItems: "center", color: "modalTextDim", display: "flex" }, /* @__PURE__ */ React.createElement(ExternalLinkIcon, null))
  ));
}

export {
  chainToExplorerUrl,
  TxItem
};