import { jsxs as c, jsx as r } from "react/jsx-runtime";
import { bigDecimal as s, isEqualAddress as u, ETH_TOKEN_ADDRESS as d, prettifyTokenNumber as f, prettifyCurrencyValue as b } from "@argent/x-shared";
import { Flex as i } from "@chakra-ui/react";
import { useTranslation as p } from "react-i18next";
import { TokenIcon as y } from "./TokenIcon.js";
import "./Typography.js";
import { H5 as h, P3 as x, P4 as a } from "./typography.generated.js";
function E({ onClick: o, token: e, iconSize: n = "10", ...m }) {
  const { t } = p(), l = s.formatUnits({
    value: BigInt(e.balance ?? 0),
    decimals: e.decimals ?? 18
  });
  return /* @__PURE__ */ c(i, { p: "4", gap: "3", cursor: "pointer", bg: "surface-elevated", borderRadius: "lg", _hover: {
    bg: "surface-elevated-web"
  }, ...m, onClick: () => o(e), children: [
    /* @__PURE__ */ r(y, { iconUrl: e.iconUrl, name: e.name || "", size: n, borderRadius: "50%" }),
    /* @__PURE__ */ c(i, { flexDirection: "column", flex: "1", justifyContent: "center", children: [
      /* @__PURE__ */ r(h, { children: u(e.address, d) ? t("tokenRow.ethereum") : e.name }),
      e.symbol && /* @__PURE__ */ r(x, { color: "text-secondary", children: e.symbol })
    ] }),
    /* @__PURE__ */ c(i, { flexDirection: "column", alignItems: "flex-end", children: [
      Number(e.balance) > 0 && l && /* @__PURE__ */ r(a, { fontWeight: "bold", fontSize: "sm", gap: "0.5", children: f(l, l.length < 12 ? { minDecimalPlaces: 4, maxDecimalPlaces: 6 } : { minDecimalPlaces: 4, maxDecimalPlaces: 12 }) }),
      Number(e.currencyValue) > 0 && e.currencyValue && /* @__PURE__ */ r(a, { fontWeight: "bold", color: "text-secondary-web", children: b(e.currencyValue, e.currencySymbol) })
    ] })
  ] });
}
export {
  E as TokenRow
};
