@blocklet/payment-react
Version:
Reusable react components for payment kit v2
127 lines (126 loc) • 4.28 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { Avatar, Box, Stack, Typography } from "@mui/material";
import { BN } from "@ocap/util";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import DID from "@arcblock/ux/lib/DID";
import { formatBNStr, formatLinkWithLocale } from "../libs/util.js";
export default function PaymentBeneficiaries({ data, currency, totalAmount = "0" }) {
const { t, locale } = useLocaleContext();
return /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
/* @__PURE__ */ jsx(
Typography,
{
variant: "subtitle2",
sx: {
color: "text.secondary"
},
children: t("benefits.title", { count: data.length })
}
),
data.map((item) => {
const amount = item.amount || (totalAmount ? new BN(totalAmount).mul(new BN(Number(item.percent))).div(new BN(100)).toString() : "0");
return /* @__PURE__ */ jsxs(
Stack,
{
direction: "row",
sx: {
alignItems: "center",
justifyContent: "space-between",
px: 0.5,
borderRadius: 1,
bgcolor: "background.paper",
"&:hover": {
bgcolor: "action.hover"
}
},
children: [
/* @__PURE__ */ jsxs(
Stack,
{
direction: "row",
spacing: 1.5,
sx: {
alignItems: "center",
width: { xs: "100%", sm: "auto" }
},
children: [
/* @__PURE__ */ jsx(
Avatar,
{
src: item.avatar,
alt: item.name,
sx: { width: 32, height: 32 },
variant: item.type === "dapp" ? "square" : "circular"
}
),
/* @__PURE__ */ jsxs(Box, { children: [
/* @__PURE__ */ jsx(
Typography,
{
variant: "subtitle2",
onClick: () => {
if (item.url) {
window.open(formatLinkWithLocale(item.url, locale), "_blank");
}
},
sx: {
cursor: item.url ? "pointer" : "default",
"&:hover": {
color: item.url ? "text.link" : "inherit"
}
},
children: item.name
}
),
/* @__PURE__ */ jsx(
DID,
{
did: item.address,
compact: true,
responsive: false,
sx: { whiteSpace: "nowrap", fontSize: "0.875rem !important" },
copyable: false
}
)
] })
]
}
),
/* @__PURE__ */ jsxs(
Stack,
{
sx: {
alignItems: "flex-end",
width: { xs: "100%", sm: "auto" },
mt: { xs: 1, sm: 0 }
},
children: [
/* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", children: [
formatBNStr(amount, currency.decimal, currency?.maximum_precision ?? 6),
" ",
currency.symbol
] }),
/* @__PURE__ */ jsxs(
Typography,
{
variant: "caption",
sx: {
color: "text.secondary",
fontSize: "0.875rem"
},
children: [
Number(item.percent),
"%"
]
}
)
]
}
)
]
},
item.address
);
})
] });
}