@arcblock/ux 2.13.70 → 3.0.1

package/lib/SessionUser/components/logged-in.js

@@ -1,308 +1,231 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
-import bridge from '@arcblock/bridge';
-import { Box, ClickAwayListener, Divider, Fade, IconButton, MenuItem, MenuList, Paper, Popper } from '@mui/material';
-import { Icon } from '@iconify/react';
-import PersonOutlineRoundedIcon from '@iconify-icons/material-symbols/person-outline-rounded';
-import FilterVintageOutlineRoundedIcon from '@iconify-icons/material-symbols/filter-vintage-outline-rounded';
-import AccountCircleOffOutlineRoundedIcon from '@iconify-icons/material-symbols/account-circle-off-outline-rounded';
-import InviteIcon from '@iconify-icons/material-symbols/featured-seasonal-and-gifts-rounded';
-import Copy from 'copy-to-clipboard';
-import noop from 'lodash/noop';
-import Toast from '../../Toast';
-import DidAvatar from '../../Avatar';
-import { getUserAvatar } from '../../Util';
-import UserInfo from './user-info';
-import { DASHBOARD_URL, PROFILE_URL } from '../../Util/constant';
-import SessionPermission from '../../SessionPermission';
-import { translations } from '../libs/translation';
-import { translate } from '../../Locale/util';
-import DidSpace from './did-space';
-import { mergeSx } from '../../Util/style';
-import { createDebug } from '../../Util/logger';
-const getInviteLink = inviter => {
-  const url = new URL(window.location.href);
-  url.searchParams.set('inviter', inviter);
-  return url.toString();
-};
-const debug = createDebug('did-connect');
-export default function LoggedIn({
-  session,
-  dark = false,
-  onBindWallet = noop,
-  isBlocklet = true,
-  locale = 'en',
-  size = 24,
-  popperType = 'click',
-  sx,
-  ...rest
+import { jsxs as m, jsx as t, Fragment as j } from "react/jsx-runtime";
+import { useRef as T, useEffect as _ } from "react";
+import { useMemoizedFn as n, useCreation as H, useReactive as N } from "ahooks";
+import g from "@arcblock/bridge";
+import { Box as y, IconButton as Q, Popper as V, ClickAwayListener as q, Fade as G, Paper as J, Divider as I, MenuList as K, MenuItem as X } from "@mui/material";
+import { Icon as Y } from "@iconify/react";
+import Z from "@iconify-icons/material-symbols/person-outline-rounded";
+import $ from "@iconify-icons/material-symbols/filter-vintage-outline-rounded";
+import ee from "@iconify-icons/material-symbols/account-circle-off-outline-rounded";
+import re from "@iconify-icons/material-symbols/featured-seasonal-and-gifts-rounded";
+import te from "copy-to-clipboard";
+import P from "lodash/noop";
+import oe from "../../Toast/index.js";
+import ie from "../../Avatar/index.js";
+import { getUserAvatar as ne } from "../../Util/index.js";
+import ce from "./user-info.js";
+import { DASHBOARD_URL as ae, PROFILE_URL as le } from "../../Util/constant.js";
+import pe from "../../SessionPermission/index.js";
+import { translations as ue } from "../libs/translation.js";
+import { translate as de } from "../../Locale/util.js";
+import me from "./did-space.js";
+import { mergeSx as se } from "../../Util/style.js";
+import { createDebug as fe } from "../../Util/logger.js";
+const he = (e) => {
+  const l = new URL(window.location.href);
+  return l.searchParams.set("inviter", e), l.toString();
+}, v = fe("did-connect");
+function je({
+  session: e,
+  onBindWallet: l = P,
+  isBlocklet: c = !0,
+  locale: f = "en",
+  size: R = 24,
+  popperType: C = "click",
+  sx: B,
+  ...D
 }) {
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const isInviteEnabled = useCreation(() => {
-    return !!globalThis?.blocklet?.settings?.invite?.enabled;
-  }, []);
-  const popperAnchorRef = useRef(null);
-  const currentState = useReactive({
-    open: false
-  });
-  const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
-    currentState.open = value;
-  });
-  const handleEventProps = popperType === 'hover' ? {
-    onMouseEnter: () => onTogglePopper(true),
-    onMouseLeave: () => onTogglePopper(false)
-  } : {
-    onClick: () => onTogglePopper()
-  };
-
-  // base64 img maybe have some blank char, need encodeURIComponent to transform it
-  const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')));
-
-  // FIXME: @zhanghan this should be refactored into SessionContext
-  const oauth = session.useOAuth();
-  const passkey = typeof session.usePasskey === 'function' ? session.usePasskey() : null;
-  const handleSwitchPassport = useMemoizedFn(({
-    inArcSphere = false
-  } = {}) => {
-    const extraParams = {};
-    if (inArcSphere) {
-      if (session?.user?.sourceAppPid) {
-        extraParams.sourceAppPid = session.user.sourceAppPid;
-      }
-    }
-    onTogglePopper(false);
-    if (session?.user?.sourceProvider === 'passkey') {
-      passkey.switchPassport(session.user);
-    } else if (['google', 'apple', 'email', 'github'].includes(session?.user?.sourceProvider)) {
-      oauth.switchOAuthPassport(session.user);
-    } else {
-      session.switchPassport(noop, extraParams);
-    }
-  });
-  const handleSwitchAccount = useMemoizedFn(({
-    userSession,
-    inArcSphere = false
-  } = {}) => {
-    return new Promise(resolve => {
-      const extraParams = {};
-      if (inArcSphere) {
-        if (session.user.sourceAppPid) {
-          extraParams.sourceAppPid = session.user.sourceAppPid;
-        }
-      }
-      const options = {};
-      if (!userSession) {
-        onTogglePopper(false);
-        options.showQuickConnect = false;
-      } else {
-        options.userSession = userSession;
-      }
-      session.switchDid(() => {
-        onTogglePopper(false);
-        resolve();
-      }, extraParams, options);
-    });
-  });
-  const handleSwitchProfile = useMemoizedFn(({
-    inArcSphere = false
-  } = {}) => {
-    const extraParams = {};
-    if (inArcSphere) {
-      if (session.user.sourceAppPid) {
-        extraParams.sourceAppPid = session.user.sourceAppPid;
-      }
-    }
-    onTogglePopper(false);
-    session.switchProfile(noop, extraParams);
-  });
-  const onLogout = useMemoizedFn(() => {
-    onTogglePopper(false);
-    session.logout();
-  });
-  const handleBindWallet = useMemoizedFn(() => {
-    onTogglePopper(false);
-    session.bindWallet(onBindWallet);
-  });
-  const handleOpenInvite = useMemoizedFn(() => {
-    onTogglePopper(false);
-    const link = getInviteLink(session.user.did);
-    Copy(link);
-    Toast.success(t('inviteCopied'));
+  var S, b;
+  const u = n((r, o = {}) => de(ue, r, f, "en", o)), L = H(() => {
+    var r, o, a;
+    return !!((a = (o = (r = globalThis == null ? void 0 : globalThis.blocklet) == null ? void 0 : r.settings) == null ? void 0 : o.invite) != null && a.enabled);
+  }, []), x = T(null), h = N({
+    open: !1
+  }), i = n((r = !h.open) => {
+    h.open = r;
+  }), O = C === "hover" ? { onMouseEnter: () => i(!0), onMouseLeave: () => i(!1) } : { onClick: () => i() }, M = ne((b = (S = e.user) == null ? void 0 : S.avatar) == null ? void 0 : b.replace(/\s/g, encodeURIComponent(" "))), E = e.useOAuth(), U = typeof e.usePasskey == "function" ? e.usePasskey() : null, w = n(({ inArcSphere: r = !1 } = {}) => {
+    var a, d, p;
+    const o = {};
+    r && (a = e == null ? void 0 : e.user) != null && a.sourceAppPid && (o.sourceAppPid = e.user.sourceAppPid), i(!1), ((d = e == null ? void 0 : e.user) == null ? void 0 : d.sourceProvider) === "passkey" ? U.switchPassport(e.user) : ["google", "apple", "email", "github"].includes((p = e == null ? void 0 : e.user) == null ? void 0 : p.sourceProvider) ? E.switchOAuthPassport(e.user) : e.switchPassport(P, o);
+  }), A = n(({ userSession: r, inArcSphere: o = !1 } = {}) => new Promise((a) => {
+    const d = {};
+    o && e.user.sourceAppPid && (d.sourceAppPid = e.user.sourceAppPid);
+    const p = {};
+    r ? p.userSession = r : (i(!1), p.showQuickConnect = !1), e.switchDid(
+      () => {
+        i(!1), a();
+      },
+      d,
+      p
+    );
+  })), k = n(({ inArcSphere: r = !1 } = {}) => {
+    const o = {};
+    r && e.user.sourceAppPid && (o.sourceAppPid = e.user.sourceAppPid), i(!1), e.switchProfile(P, o);
+  }), F = n(() => {
+    i(!1), e.logout();
+  }), W = n(() => {
+    i(!1), e.bindWallet(l);
+  }), z = n(() => {
+    i(!1);
+    const r = he(e.user.did);
+    te(r), oe.success(u("inviteCopied"));
   });
-  useEffect(() => {
-    bridge.registerBlocklet('callSwitchPassport', () => {
-      debug('bridge registerBlocklet: callSwitchPassport');
-      handleSwitchPassport({
-        inArcSphere: true
-      });
-    });
-    bridge.registerBlocklet('callSwitchDid', () => {
-      debug('bridge registerBlocklet: callSwitchDid');
-      handleSwitchAccount({
-        inArcSphere: true
-      });
+  return _(() => {
+    g.registerBlocklet("callSwitchPassport", () => {
+      v("bridge registerBlocklet: callSwitchPassport"), w({ inArcSphere: !0 });
+    }), g.registerBlocklet("callSwitchDid", () => {
+      v("bridge registerBlocklet: callSwitchDid"), A({ inArcSphere: !0 });
+    }), g.registerBlocklet("callSwitchProfile", () => {
+      v("bridge registerBlocklet: callSwitchProfile"), k({ inArcSphere: !0 });
     });
-    bridge.registerBlocklet('callSwitchProfile', () => {
-      debug('bridge registerBlocklet: callSwitchProfile');
-      handleSwitchProfile({
-        inArcSphere: true
-      });
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: mergeSx({
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    // @ts-ignore
-    sx),
-    ...rest,
-    children: [/*#__PURE__*/_jsx(IconButton, {
-      ref: popperAnchorRef,
-      size: "medium",
-      "data-cy": "sessionManager-logout-popup",
-      className: "arc-session-user-logged-in",
-      "aria-label": "User info button",
-      ...handleEventProps,
-      children: /*#__PURE__*/_jsx(DidAvatar, {
-        variant: "circle",
-        did: session.user.did,
-        src: avatar,
-        size: size,
-        shape: "circle"
-      })
-    }), /*#__PURE__*/_jsx(Popper, {
-      open: currentState.open,
-      anchorEl: popperAnchorRef.current,
-      transition: true,
-      placement: "bottom-end",
-      sx: {
-        zIndex: 1600
-      },
-      children: ({
-        TransitionProps
-      }) => /*#__PURE__*/_jsx(ClickAwayListener, {
-        onClickAway: e => {
-          e.preventDefault();
-          e.stopPropagation();
-          onTogglePopper(false);
+  }, []), /* @__PURE__ */ m(
+    y,
+    {
+      sx: se(
+        {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center"
         },
-        children: /*#__PURE__*/_jsx(Fade, {
-          ...TransitionProps,
-          timeout: 350,
-          children: /*#__PURE__*/_jsxs(Paper, {
-            variant: "outlined",
+        // @ts-ignore
+        B
+      ),
+      ...D,
+      children: [
+        /* @__PURE__ */ t(
+          Q,
+          {
+            ref: x,
+            size: "medium",
+            "data-cy": "sessionManager-logout-popup",
+            className: "arc-session-user-logged-in",
+            "aria-label": "User info button",
+            ...O,
+            children: /* @__PURE__ */ t(ie, { variant: "circle", did: e.user.did, src: M, size: R, shape: "circle" })
+          }
+        ),
+        /* @__PURE__ */ t(
+          V,
+          {
+            open: h.open,
+            anchorEl: x.current,
+            transition: !0,
+            placement: "bottom-end",
             sx: {
-              borderRadius: 1.5,
-              width: 350,
-              maxWidth: '90vw'
+              zIndex: 1600
             },
-            children: [/*#__PURE__*/_jsx(UserInfo, {
-              locale: locale,
-              isBlocklet: isBlocklet,
-              session: session,
-              onSwitchPassport: handleSwitchPassport,
-              onSwitchAccount: handleSwitchAccount,
-              onSwitchProfile: handleSwitchProfile,
-              onBindWallet: handleBindWallet
-            }), /*#__PURE__*/_jsx(Divider, {
-              sx: {
-                m: '0 !important'
-              }
-            }), /*#__PURE__*/_jsxs(MenuList, {
-              sx: {
-                p: 0
-              },
-              children: [isBlocklet ? /*#__PURE__*/_jsxs(_Fragment, {
-                children: [/*#__PURE__*/_jsx(SessionPermission, {
-                  session: session,
-                  children: /*#__PURE__*/_jsx(SessionMenuItem, {
-                    icon: FilterVintageOutlineRoundedIcon,
-                    title: t('dashboard'),
-                    component: "a",
-                    href: DASHBOARD_URL,
+            children: ({ TransitionProps: r }) => /* @__PURE__ */ t(
+              q,
+              {
+                onClickAway: (o) => {
+                  o.preventDefault(), o.stopPropagation(), i(!1);
+                },
+                children: /* @__PURE__ */ t(G, { ...r, timeout: 350, children: /* @__PURE__ */ m(
+                  J,
+                  {
+                    variant: "outlined",
                     sx: {
-                      display: 'block',
-                      textDecoration: 'none',
-                      color: 'inherit'
-                    }
-                  })
-                }), /*#__PURE__*/_jsx(SessionMenuItem, {
-                  icon: PersonOutlineRoundedIcon,
-                  title: t('profile'),
-                  component: "a",
-                  href: PROFILE_URL,
-                  sx: {
-                    display: 'block',
-                    textDecoration: 'none',
-                    color: 'inherit'
-                  }
-                }), isInviteEnabled && /*#__PURE__*/_jsx(SessionMenuItem, {
-                  icon: InviteIcon,
-                  title: t('invite'),
-                  component: "div",
-                  onClick: handleOpenInvite,
-                  sx: {
-                    display: 'block',
-                    color: 'inherit'
+                      borderRadius: 1.5,
+                      width: 350,
+                      maxWidth: "90vw"
+                    },
+                    children: [
+                      /* @__PURE__ */ t(
+                        ce,
+                        {
+                          locale: f,
+                          isBlocklet: c,
+                          session: e,
+                          onSwitchPassport: w,
+                          onSwitchAccount: A,
+                          onSwitchProfile: k,
+                          onBindWallet: W
+                        }
+                      ),
+                      /* @__PURE__ */ t(I, { sx: { m: "0 !important" } }),
+                      /* @__PURE__ */ m(K, { sx: { p: 0 }, children: [
+                        c ? /* @__PURE__ */ m(j, { children: [
+                          /* @__PURE__ */ t(pe, { session: e, children: /* @__PURE__ */ t(
+                            s,
+                            {
+                              icon: $,
+                              title: u("dashboard"),
+                              component: "a",
+                              href: ae,
+                              sx: { display: "block", textDecoration: "none", color: "inherit" }
+                            }
+                          ) }),
+                          /* @__PURE__ */ t(
+                            s,
+                            {
+                              icon: Z,
+                              title: u("profile"),
+                              component: "a",
+                              href: le,
+                              sx: { display: "block", textDecoration: "none", color: "inherit" }
+                            }
+                          ),
+                          L && /* @__PURE__ */ t(
+                            s,
+                            {
+                              icon: re,
+                              title: u("invite"),
+                              component: "div",
+                              onClick: z,
+                              sx: { display: "block", color: "inherit" }
+                            }
+                          ),
+                          /* @__PURE__ */ t(I, { sx: { m: "0 !important" } }),
+                          /* @__PURE__ */ t(me, { session: e, locale: f })
+                        ] }) : null,
+                        /* @__PURE__ */ t(
+                          s,
+                          {
+                            icon: ee,
+                            title: u("logout"),
+                            component: "div",
+                            sx: { color: "error.main" },
+                            onClick: F,
+                            "data-cy": "sessionManager-logout-trigger"
+                          }
+                        )
+                      ] })
+                    ]
                   }
-                }), /*#__PURE__*/_jsx(Divider, {
-                  sx: {
-                    m: '0 !important'
-                  }
-                }), /*#__PURE__*/_jsx(DidSpace, {
-                  session: session,
-                  locale: locale
-                })]
-              }) : null, /*#__PURE__*/_jsx(SessionMenuItem, {
-                icon: AccountCircleOffOutlineRoundedIcon,
-                title: t('logout'),
-                component: "div",
-                sx: {
-                  color: 'error.main'
-                },
-                onClick: onLogout,
-                "data-cy": "sessionManager-logout-trigger"
-              })]
-            })]
-          })
-        })
-      })
-    })]
-  });
+                ) })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 }
-// prop component is required
-function SessionMenuItem({
-  icon,
-  title,
-  ...rest
+function s({
+  icon: e,
+  title: l,
+  ...c
 }) {
-  return /*#__PURE__*/_jsx(Box, {
-    ...rest,
-    sx: {
-      p: 0.5,
-      ...rest?.sx
-    },
-    children: /*#__PURE__*/_jsxs(MenuItem, {
+  return /* @__PURE__ */ t(y, { ...c, sx: { p: 0.5, ...c == null ? void 0 : c.sx }, children: /* @__PURE__ */ m(
+    X,
+    {
       sx: {
-        display: 'flex',
+        display: "flex",
         gap: 1,
-        alignItems: 'center',
+        alignItems: "center",
         borderRadius: 1,
-        '&:hover': {
-          backgroundColor: 'action.hover'
+        "&:hover": {
+          backgroundColor: "action.hover"
         },
         py: 1
       },
-      children: [/*#__PURE__*/_jsx(Icon, {
-        icon: icon,
-        fontSize: 24
-      }), title]
-    })
-  });
-}
+      children: [
+        /* @__PURE__ */ t(Y, { icon: e, fontSize: 24 }),
+        l
+      ]
+    }
+  ) });
+}
+export {
+  je as default
+};