@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
132 lines (131 loc) • 4.08 kB
JavaScript
import { jsxs as c, jsx as e, Fragment as h } from "react/jsx-runtime";
import { Box as a, Skeleton as f, Typography as u, Pagination as y } from "@mui/material";
import { useMemoizedFn as w, useReactive as k, useRequest as C, useCreation as b } from "ahooks";
import F from "axios";
import z from "@arcblock/ux/lib/NFTDisplay";
import N from "@arcblock/ux/lib/Empty";
import { WELLKNOWN_SERVICE_PATH_PREFIX as P } from "@abtnode/constant";
import { translate as R } from "@arcblock/ux/lib/Locale/util";
import { useLocaleContext as j } from "@arcblock/ux/lib/Locale/context";
import { translations as E } from "../libs/locales.js";
function q({ user: l }) {
const { locale: g } = j(), d = w((s, r = {}) => R(E, s, g, "en", r)), t = k({
page: 1,
size: 20
}), p = C(
async (s = t) => (await F.get(`${P}/ocap/listAssets`, {
params: {
ownerAddress: l.did,
...s
}
})).data,
{
defaultParams: [t],
refreshDeps: [l.did, t]
}
), { loading: n, data: o } = p, i = o?.page ?? { cursor: 0, next: !1, total: 0 }, m = (s, r) => {
t.page = r, p.run(t);
}, x = b(() => {
if (n) {
const s = ["skeleton-1", "skeleton-2", "skeleton-3", "skeleton-4", "skeleton-5"].map((r) => /* @__PURE__ */ e(f, { variant: "rectangular", width: "15%", height: 166, sx: { borderRadius: 1, flexShrink: 0 } }, r));
return /* @__PURE__ */ c(
a,
{
sx: {
display: "flex",
flexDirection: "column",
gap: 2
},
children: [
/* @__PURE__ */ e(f, { width: "20%" }),
/* @__PURE__ */ e(
a,
{
sx: {
display: "flex",
flexDirection: "row",
gap: 2,
flexWrap: "nowrap"
},
children: s
}
)
]
}
);
}
return /* @__PURE__ */ c(h, { children: [
/* @__PURE__ */ e(
u,
{
sx: {
color: "grey.A700",
fontWeight: 600,
mb: 2.5
},
children: d("common.nft")
}
),
o?.assets?.length === 0 && !n && /* @__PURE__ */ e(a, { sx: { display: "flex", justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, children: /* @__PURE__ */ e(N, { children: d("common.noNFT") }) }),
/* @__PURE__ */ e(
a,
{
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: o?.assets?.map((s) => /* @__PURE__ */ e(
a,
{
sx: {
flexShrink: 0,
width: { xs: 120, sm: 120, md: 120, lg: 166 },
height: { xs: 120, sm: 120, md: 120, lg: 166 }
},
children: /* @__PURE__ */ e(
z,
{
data: s.display,
address: s.address,
inset: !0,
imageFilter: {
imageFilter: "resize",
w: "500",
f: "webp"
}
}
)
},
s.address
))
}
),
i.next || t.page > 1 ? /* @__PURE__ */ e(
y,
{
sx: {
display: "flex",
justifyContent: "center",
mt: 2
},
page: t.page,
onChange: m,
count: Math.ceil(i.total / t.size),
size: "small"
}
) : null
] });
}, [n, i, t.page, t.size, m]);
return /* @__PURE__ */ e(a, { sx: { border: "1px solid", borderColor: "divider", borderRadius: 1, p: 2, mb: 5 }, children: x });
}
export {
q as default
};