@blocklet/ui-react/lib/common/notification-addon.js

Some useful front-end web components that can be used in Blocklets.

import { jsx as i } from "react/jsx-runtime";
import R from "prop-types";
import { useMemo as O, useCallback as h, useEffect as _ } from "react";
import { IconButton as $, Badge as g } from "@mui/material";
import { useSnackbar as B } from "notistack";
import D from "@arcblock/icons/lib/Notification";
import { useCreation as s } from "ahooks";
import { WELLKNOWN_SERVICE_PATH_PREFIX as S, EVENTS as y } from "@abtnode/constant";
import V from "@arcblock/react-hooks/lib/useBrowser";
import { joinURL as x, withQuery as U } from "ufo";
import { useListenWsClient as j } from "./ws.js";
import F from "../Notifications/Snackbar.js";
import { compareVersions as H } from "../utils.js";
const v = x(S, "user", "notifications"), K = (r) => U(v, {
  id: r.id,
  severity: r.severity || "all",
  componentDid: r.source === "system" ? "system" : r.componentDid || "all"
});
function P({ session: r = {} }) {
  const { unReadCount: b, user: w, setUnReadCount: n } = r, e = s(() => w?.did, [w]), { enqueueSnackbar: E } = B(), c = V(), k = O(() => c.arcSphere || c.wallet, [c]), N = s(() => window.blocklet?.serverVersion, []), t = j("user"), l = s(
    () => `${window.blocklet.did}/${e}/${y.NOTIFICATION_BLOCKLET_CREATE}`,
    [e]
  ), u = s(
    () => `${window.blocklet.did}/${e}/${y.NOTIFICATION_BLOCKLET_READ}`,
    [e]
  ), d = h(
    (o) => {
      const { receivers: m } = o ?? {}, { receiver: f } = m[0] ?? {};
      if (f === e) {
        n((C) => C + 1);
        const p = H(N, "1.16.42-beta-20250407");
        if (!k && o.source === "component" && p) {
          const C = K(o), { severity: T, description: I } = o || {}, L = ["error", "warning"].includes(T) || o.sticky;
          E(I, {
            variant: T,
            autoHideDuration: L ? null : 5e3,
            // eslint-disable-next-line react/no-unstable-nested-components
            content: (A) => /* @__PURE__ */ i(F, { viewAllUrl: C, keyId: A, notification: o })
          });
        }
      }
    },
    [e, n, E, N, k]
  ), a = h(
    (o) => {
      const { receiver: m, readCount: f } = o ?? {};
      m === e && n((p) => Math.max(p - f, 0));
    },
    [e, n]
  );
  return _(() => (t && (t.on(l, d), t.on(u, a)), () => {
    t && (t.off(l, d), t.off(u, a));
  }), [t, n, d, l, a, u]), !r.user || !v ? null : /* @__PURE__ */ i(
    $,
    {
      size: "medium",
      variant: "outlined",
      href: v,
      sx: {
        "&:hover": {
          borderRadius: "50%"
        }
      },
      children: /* @__PURE__ */ i(g, { badgeContent: b, color: "error", invisible: b === 0, children: /* @__PURE__ */ i(D, { style: { width: "auto", height: 24 } }) })
    }
  );
}
P.propTypes = {
  session: R.object
};
export {
  P as default
};