@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
245 lines (244 loc) • 7.6 kB
JavaScript
import { jsxs as l, jsx as o, Fragment as R } from "react/jsx-runtime";
import { useState as y } from "react";
import { Box as s, Skeleton as w, Typography as F, alpha as C, Stack as j, IconButton as f, Pagination as T } from "@mui/material";
import { useMemoizedFn as L, useReactive as _, useRequest as A, useCreation as D } from "ahooks";
import H from "axios";
import { Icon as h } from "@iconify/react";
import W, { getNFTData as O } from "@arcblock/ux/lib/NFTDisplay";
import U from "@arcblock/ux/lib/Empty";
import { WELLKNOWN_SERVICE_PATH_PREFIX as B } from "@abtnode/constant";
import { translate as M } from "@arcblock/ux/lib/Locale/util";
import { useLocaleContext as V } from "@arcblock/ux/lib/Locale/context";
import { joinURL as v } from "ufo";
import X from "@arcblock/ux/lib/SocialShare";
import { translations as $ } from "../libs/locales.js";
import q from "./nft-preview.js";
const J = (a) => ({
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(0, 0, 0, 0.6)",
opacity: 0,
transition: "opacity 0.3s ease-in-out",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 1,
"& .mask-item": {
backgroundColor: C(a.palette.background.paper, 0.9),
color: "text.primary",
"&:hover": {
backgroundColor: C(a.palette.background.paper, 1)
}
}
}), P = "https://main.abtnetwork.io/explorer";
function ce({ user: a }) {
const { locale: N } = V(), u = L((t, e = {}) => M($, t, N, "en", e)), [n, g] = y({
visible: !1,
nft: null
}), [p, x] = y({
anchorEl: null,
props: null
}), S = (t) => {
const e = v(P, "assets", t);
window.open(e, "_blank");
}, z = (t, e) => {
let i = "";
typeof e.data?.value == "string" ? i = JSON.parse(e.data?.value)?.domain : i = e.data?.value?.domain, x({
anchorEl: t,
props: {
title: i ? `Hey, I just won an NFT at the ${i} event!` : "Hey, I just won an NFT!",
url: v(P, "assets", e.address)
}
});
}, E = (t) => {
g({
visible: !0,
nft: t
});
}, r = _({
page: 1,
size: 20
}), k = A(
async (t = r) => (await H.get(`${B}/ocap/listAssets`, {
params: {
ownerAddress: a.did,
...t
}
})).data,
{
defaultParams: [r],
refreshDeps: [a.did, r]
}
), { loading: c, data: d } = k, m = d?.page ?? { cursor: 0, next: !1, total: 0 }, b = (t, e) => {
r.page = e, k.run(r);
}, I = D(() => {
if (c) {
const t = ["skeleton-1", "skeleton-2", "skeleton-3", "skeleton-4", "skeleton-5"].map((e) => /* @__PURE__ */ o(w, { variant: "rectangular", width: "15%", height: 166, sx: { borderRadius: 1, flexShrink: 0 } }, e));
return /* @__PURE__ */ l(
s,
{
sx: {
display: "flex",
flexDirection: "column",
gap: 2
},
children: [
/* @__PURE__ */ o(w, { width: "20%" }),
/* @__PURE__ */ o(
s,
{
sx: {
display: "flex",
flexDirection: "row",
gap: 2,
flexWrap: "nowrap"
},
children: t
}
)
]
}
);
}
return /* @__PURE__ */ l(R, { children: [
/* @__PURE__ */ o(
F,
{
sx: {
color: "grey.A700",
fontWeight: 600,
mb: 2.5
},
children: u("common.nft")
}
),
d?.assets?.length === 0 && !c && /* @__PURE__ */ o(s, { sx: { display: "flex", justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, children: /* @__PURE__ */ o(U, { children: u("common.noNFT") }) }),
/* @__PURE__ */ o(
s,
{
className: "nft-list-wrapper",
sx: {
display: "grid",
justifyItems: "start",
gridTemplateColumns: {
xs: "repeat(2, 1fr)",
sm: "repeat(3, 1fr)",
md: "repeat(3, 1fr)",
lg: "repeat(5, 1fr)"
},
gap: 2.5
},
children: d?.assets?.map((t) => /* @__PURE__ */ l(
s,
{
sx: {
flexShrink: 0,
width: { xs: 120, sm: 120, md: 120, lg: 166 },
height: { xs: 120, sm: 120, md: 120, lg: 166 },
position: "relative",
borderRadius: 1,
overflow: "hidden",
cursor: "pointer",
"&:hover .mask": {
opacity: 1
}
},
children: [
/* @__PURE__ */ o(
W,
{
data: O(t),
address: t.address,
inset: !0,
imageFilter: {
imageFilter: "resize",
w: "500",
f: "webp"
}
}
),
/* @__PURE__ */ o(s, { className: "mask", sx: J, children: /* @__PURE__ */ l(j, { direction: "row", spacing: 1, children: [
/* @__PURE__ */ o(
f,
{
size: "small",
className: "mask-item",
onClick: (e) => {
e.stopPropagation(), S(t.address);
},
children: /* @__PURE__ */ o(h, { icon: "tabler:link", fontSize: 18 })
}
),
/* @__PURE__ */ o(
f,
{
size: "small",
onClick: (e) => {
e.stopPropagation(), z(e.currentTarget, t);
},
className: "mask-item",
children: /* @__PURE__ */ o(h, { icon: "tabler:share-2", fontSize: 18 })
}
),
/* @__PURE__ */ o(
f,
{
size: "small",
onClick: (e) => {
e.stopPropagation(), E(t);
},
className: "mask-item",
children: /* @__PURE__ */ o(h, { icon: "tabler:eye", fontSize: 18 })
}
)
] }) })
]
},
t.address
))
}
),
m.next || r.page > 1 ? /* @__PURE__ */ o(
T,
{
sx: {
display: "flex",
justifyContent: "center",
mt: 2
},
page: r.page,
onChange: b,
count: Math.ceil(m.total / r.size),
size: "small"
}
) : null,
/* @__PURE__ */ o(
q,
{
visible: n.visible && !!n.nft,
nft: n.nft,
onClose: () => {
g({ visible: !1, nft: null });
}
}
),
/* @__PURE__ */ o(
X,
{
anchorEl: p.anchorEl,
onClose: () => {
x({ anchorEl: null, props: null });
},
sharedProps: p.props || { title: "", url: "" }
}
)
] });
}, [c, m, r.page, r.size, b, p, n]);
return /* @__PURE__ */ o(s, { sx: { border: "1px solid", borderColor: "divider", borderRadius: 1, p: 2, mb: 5 }, children: I });
}
export {
ce as default
};