@blocklet/payment-react
Version:
Reusable react components for payment kit v2
62 lines (61 loc) • 1.81 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { OpenInNewOutlined } from "@mui/icons-material";
import { Link, Stack, Typography } from "@mui/material";
import { styled } from "@mui/system";
import { getTxLink } from "../../libs/util.js";
export default function TxLink({
details,
method,
mode = "dashboard",
align = "left",
size = 20
}) {
const { t } = useLocaleContext();
if (!details || mode === "customer" && method.type === "stripe") {
return /* @__PURE__ */ jsx(
Typography,
{
component: "small",
sx: {
color: "text.secondary"
},
children: t("common.none")
}
);
}
const { text, link } = getTxLink(method, details);
if (link && text) {
return /* @__PURE__ */ jsx(Link, { href: link, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxs(
Root,
{
direction: "row",
alignItems: "center",
justifyContent: align === "left" ? "flex-start" : "flex-end",
sx: { color: "text.link" },
spacing: 1,
children: [
/* @__PURE__ */ jsx(Typography, { className: "tx-link-text", component: "span", sx: { color: "text.link" }, children: text.length > 40 ? [text.slice(0, 6), text.slice(-6)].join("...") : text }),
/* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small", sx: { width: size, height: size } })
]
}
) });
}
return /* @__PURE__ */ jsx(
Typography,
{
component: "small",
sx: {
color: "text.secondary"
},
children: t("common.none")
}
);
}
const Root = styled(Stack)`
@media (max-width: 600px) {
svg.MuiSvgIcon-root {
display: none !important;
}
}
`;