import { jsx, jsxs } from "react/jsx-runtime";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { Typography } from "@mui/material";
import { fromUnitToToken } from "@ocap/util";
import { usePaymentContext } from "../../contexts/payment.js";
import { getTxLink } from "../../libs/util.js";
export default function TxGas(props) {
  const { t } = useLocaleContext();
  const { settings } = usePaymentContext();
  const { gas } = getTxLink(props.method, props.details);
  const method = settings.paymentMethods.find((x) => x.id === props.method.id);
  if (gas && method) {
    const currency = method.payment_currencies.find((x) => x.id === method.default_currency_id);
    return /* @__PURE__ */ jsxs(Typography, { component: "span", children: [
      fromUnitToToken(gas, currency.decimal),
      " ",
      currency.symbol,
      " (",
      method.name,
      ")"
    ] });
  }
  return /* @__PURE__ */ jsx(
    Typography,
    {
      component: "small",
      sx: {
        color: "text.secondary"
      },
      children: t("common.none")
    }
  );
}
