@blocklet/payment-react
Version:
Reusable react components for payment kit v2
49 lines (48 loc) • 2.24 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import HelpOutline from "@mui/icons-material/HelpOutline";
import { Stack, Tooltip, Typography } from "@mui/material";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { formatTrialText, whiteTooltipSx } from "../../utils/format.js";
export default function StakingBreakdown({
staking,
paymentAmount,
trialActive,
trialDays,
afterTrialInterval
}) {
const { t } = useLocaleContext();
return /* @__PURE__ */ jsxs(Stack, { spacing: 1, sx: { mb: 1 }, children: [
/* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
/* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [
/* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontSize: 14 }, children: t("payment.checkout.paymentRequired") }),
/* @__PURE__ */ jsx(
Tooltip,
{
title: t("payment.checkout.stakingConfirm"),
placement: "top",
arrow: true,
slotProps: { popper: { sx: whiteTooltipSx } },
children: /* @__PURE__ */ jsx(HelpOutline, { sx: { fontSize: 16, color: "text.disabled" } })
}
)
] }),
/* @__PURE__ */ jsx(Typography, { children: trialActive ? formatTrialText(t, trialDays, afterTrialInterval || "day") : paymentAmount })
] }),
/* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
/* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [
/* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontSize: 14 }, children: t("payment.checkout.staking.title") }),
/* @__PURE__ */ jsx(
Tooltip,
{
title: t("payment.checkout.staking.tooltip"),
placement: "top",
arrow: true,
slotProps: { popper: { sx: whiteTooltipSx } },
children: /* @__PURE__ */ jsx(HelpOutline, { sx: { fontSize: 16, color: "text.disabled" } })
}
)
] }),
/* @__PURE__ */ jsx(Typography, { children: staking })
] })
] });
}