@blocklet/ui-react 2.9.35 → 2.9.37

package/es/UserCenter/components/user-basic-info.d.ts

@@ -8,4 +8,4 @@ export default function UserBasicInfo({ user, isMyself, showFullDid, switchPassp
     switchPassport: () => void;
     switchProfile: () => void;
     openSettings: () => void;
-} & BoxProps): import("react").JSX.Element;
+} & BoxProps): import("react").JSX.Element | null;

package/es/UserCenter/components/user-basic-info.js

@@ -31,6 +31,9 @@ export default function UserBasicInfo({
   );
   const theme = useTheme();
   const isSmallView = theme.breakpoints.down("md");
+  if (!user) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs(
     Box,
     {

package/es/UserCenter/components/user-center.js

@@ -6,6 +6,7 @@ import pWaitFor from "p-wait-for";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
 import Tabs from "@arcblock/ux/lib/Tabs";
 import Empty from "@arcblock/ux/lib/Empty";
+import Button from "@arcblock/ux/lib/Button";
 import { temp as colors } from "@arcblock/ux/lib/Colors";
 import { useConfirm } from "@arcblock/ux/lib/Dialog";
 import { translate } from "@arcblock/ux/lib/Locale/util";
@@ -61,17 +62,16 @@ export default function UserCenter({
   }, [currentDid, session?.user?.did]);
   const userState = useRequest(
     async () => {
-      await pWaitFor(() => session.initialized);
+      await pWaitFor(() => session?.initialized);
       if (isMyself) {
         return session.user;
       }
       if (currentDid) {
         return await client.user.getUserPublicInfo({ did: currentDid });
       }
-      throw new Error(t("noUserFound"));
     },
     {
-      refreshDeps: [currentDid, isMyself]
+      refreshDeps: [currentDid, isMyself, session?.initialized]
     }
   );
   const privacyState = useRequest(
@@ -128,7 +128,7 @@ export default function UserCenter({
         // icon: x.icon,
       };
     });
-  }, [formattedBlocklet, userState.data, privacyState?.data]);
+  }, [formattedBlocklet, userState.data, privacyState?.data, locale]);
   const currentActiveTab = useCreation(() => {
     return userCenterTabs.find((x) => x.value === currentTab);
   }, [userCenterTabs]);
@@ -177,6 +177,24 @@ export default function UserCenter({
       };
       return /* @__PURE__ */ jsx(Box, { sx: { width: "100%" }, children: /* @__PURE__ */ jsx(ErrorFallback, { error: formatError }) });
     }
+    if (!currentDid && !userState.data) {
+      return /* @__PURE__ */ jsx(Box, { sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: 1
+          },
+          children: [
+            /* @__PURE__ */ jsx(Empty, { children: t("viewAfterLogin") }),
+            /* @__PURE__ */ jsx(Button, { size: "small", variant: "contained", onClick: () => session.login(), children: t("loginNow") })
+          ]
+        }
+      ) });
+    }
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, overflow: "hidden" }, children: [
         userState?.data?.fullName ? /* @__PURE__ */ jsx(
@@ -284,15 +302,15 @@ export default function UserCenter({
               md: 400
             },
             maxWidth: "100%",
-            display: "flex",
-            flexDirection: "column",
-            gap: 2.5,
             position: "relative"
           },
           children: /* @__PURE__ */ jsxs(
             Box,
             {
               sx: {
+                display: "flex",
+                flexDirection: "column",
+                gap: 2.5,
                 position: {
                   xs: "static",
                   md: stickySidebar ? "sticky" : "static"

package/es/UserCenter/components/user-info.js

@@ -25,7 +25,7 @@ export default function UserInfo({
       wallet: "DID Wallet",
       auth0: "Auth0"
     };
-    return nameMap[user.sourceProvider] || t("unknown");
+    return user?.sourceProvider && nameMap[user.sourceProvider] || t("unknown");
   }, [user?.sourceProvider]);
   const userInfoListData = [];
   userInfoListData.push({

package/es/UserCenter/libs/locales.d.ts

@@ -39,6 +39,8 @@ export declare const translations: {
         switchProfile: string;
         userInfo: string;
         myInfo: string;
+        loginNow: string;
+        viewAfterLogin: string;
     };
     en: {
         settings: string;
@@ -80,5 +82,7 @@ export declare const translations: {
         switchProfile: string;
         userInfo: string;
         myInfo: string;
+        loginNow: string;
+        viewAfterLogin: string;
     };
 };

package/es/UserCenter/libs/locales.js

@@ -38,7 +38,9 @@ export const translations = {
     currentPassport: "\u5F53\u524D\u4F7F\u7528\u7684\u901A\u884C\u8BC1",
     switchProfile: "\u5207\u6362",
     userInfo: "\u4E2A\u4EBA\u4FE1\u606F",
-    myInfo: "\u6211\u7684\u4FE1\u606F"
+    myInfo: "\u6211\u7684\u4FE1\u606F",
+    loginNow: "\u7ACB\u5373\u767B\u5F55",
+    viewAfterLogin: "\u767B\u5F55\u540E\u624D\u53EF\u4EE5\u67E5\u770B"
   },
   en: {
     settings: "Settings",
@@ -79,6 +81,8 @@ export const translations = {
     currentPassport: "Passport currently in use",
     switchProfile: "Switch",
     userInfo: "User Info",
-    myInfo: "My Info"
+    myInfo: "My Info",
+    loginNow: "Login",
+    viewAfterLogin: "View after login"
   }
 };

package/lib/UserCenter/components/user-basic-info.d.ts

@@ -8,4 +8,4 @@ export default function UserBasicInfo({ user, isMyself, showFullDid, switchPassp
     switchPassport: () => void;
     switchProfile: () => void;
     openSettings: () => void;
-} & BoxProps): import("react").JSX.Element;
+} & BoxProps): import("react").JSX.Element | null;

package/lib/UserCenter/components/user-basic-info.js

@@ -37,6 +37,9 @@ function UserBasicInfo({
   const currentRole = (0, _ahooks.useCreation)(() => (user?.passports || [])?.find(item => item.name === user.role), [user?.passports, user?.role]);
   const theme = (0, _Theme.useTheme)();
   const isSmallView = theme.breakpoints.down("md");
+  if (!user) {
+    return null;
+  }
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     ...rest,
     sx: {

package/lib/UserCenter/components/user-center.js

@@ -12,6 +12,7 @@ var _pWaitFor = _interopRequireDefault(require("p-wait-for"));
 var _Session = require("@arcblock/did-connect/lib/Session");
 var _Tabs = _interopRequireDefault(require("@arcblock/ux/lib/Tabs"));
 var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _Colors = require("@arcblock/ux/lib/Colors");
 var _Dialog = require("@arcblock/ux/lib/Dialog");
 var _util = require("@arcblock/ux/lib/Locale/util");
@@ -69,7 +70,7 @@ function UserCenter({
     return false;
   }, [currentDid, session?.user?.did]);
   const userState = (0, _ahooks.useRequest)(async () => {
-    await (0, _pWaitFor.default)(() => session.initialized);
+    await (0, _pWaitFor.default)(() => session?.initialized);
     if (isMyself) {
       return session.user;
     }
@@ -78,9 +79,8 @@ function UserCenter({
         did: currentDid
       });
     }
-    throw new Error(t("noUserFound"));
   }, {
-    refreshDeps: [currentDid, isMyself]
+    refreshDeps: [currentDid, isMyself, session?.initialized]
   });
   const privacyState = (0, _ahooks.useRequest)(async () => {
     if (userState.data && currentTab) {
@@ -138,7 +138,7 @@ function UserCenter({
         // icon: x.icon,
       };
     });
-  }, [formattedBlocklet, userState.data, privacyState?.data]);
+  }, [formattedBlocklet, userState.data, privacyState?.data, locale]);
   const currentActiveTab = (0, _ahooks.useCreation)(() => {
     return userCenterTabs.find(x => x.value === currentTab);
   }, [userCenterTabs]);
@@ -191,6 +191,30 @@ function UserCenter({
         })
       });
     }
+    if (!currentDid && !userState.data) {
+      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          width: "100%"
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: 1
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Empty.default, {
+            children: t("viewAfterLogin")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_Button.default, {
+            size: "small",
+            variant: "contained",
+            onClick: () => session.login(),
+            children: t("loginNow")
+          })]
+        })
+      });
+    }
     return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
@@ -290,13 +314,13 @@ function UserCenter({
             md: 400
           },
           maxWidth: "100%",
-          display: "flex",
-          flexDirection: "column",
-          gap: 2.5,
           position: "relative"
         },
         children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
           sx: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 2.5,
             position: {
               xs: "static",
               md: stickySidebar ? "sticky" : "static"

package/lib/UserCenter/components/user-info.js

@@ -34,7 +34,7 @@ function UserInfo({
       wallet: "DID Wallet",
       auth0: "Auth0"
     };
-    return nameMap[user.sourceProvider] || t("unknown");
+    return user?.sourceProvider && nameMap[user.sourceProvider] || t("unknown");
   }, [user?.sourceProvider]);
   const userInfoListData = [];
   userInfoListData.push({

package/lib/UserCenter/libs/locales.d.ts

@@ -39,6 +39,8 @@ export declare const translations: {
         switchProfile: string;
         userInfo: string;
         myInfo: string;
+        loginNow: string;
+        viewAfterLogin: string;
     };
     en: {
         settings: string;
@@ -80,5 +82,7 @@ export declare const translations: {
         switchProfile: string;
         userInfo: string;
         myInfo: string;
+        loginNow: string;
+        viewAfterLogin: string;
     };
 };

package/lib/UserCenter/libs/locales.js

@@ -44,7 +44,9 @@ const translations = exports.translations = {
     currentPassport: "\u5F53\u524D\u4F7F\u7528\u7684\u901A\u884C\u8BC1",
     switchProfile: "\u5207\u6362",
     userInfo: "\u4E2A\u4EBA\u4FE1\u606F",
-    myInfo: "\u6211\u7684\u4FE1\u606F"
+    myInfo: "\u6211\u7684\u4FE1\u606F",
+    loginNow: "\u7ACB\u5373\u767B\u5F55",
+    viewAfterLogin: "\u767B\u5F55\u540E\u624D\u53EF\u4EE5\u67E5\u770B"
   },
   en: {
     settings: "Settings",
@@ -85,6 +87,8 @@ const translations = exports.translations = {
     currentPassport: "Passport currently in use",
     switchProfile: "Switch",
     userInfo: "User Info",
-    myInfo: "My Info"
+    myInfo: "My Info",
+    loginNow: "Login",
+    viewAfterLogin: "View after login"
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.9.35",
+  "version": "2.9.37",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -63,8 +63,8 @@
   },
   "dependencies": {
     "@abtnode/constant": "1.16.23",
-    "@arcblock/did-connect": "^2.9.35",
-    "@arcblock/ux": "^2.9.35",
+    "@arcblock/did-connect": "^2.9.37",
+    "@arcblock/ux": "^2.9.37",
     "@blocklet/js-sdk": "1.16.23",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
@@ -100,5 +100,5 @@
     "jest": "^28.1.3",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "a57ad56484ed0f59f2877f9519a9ab7861b65d9d"
+  "gitHead": "ec1e42a275b8869259b4a5763e398dbcbc61fe2a"
 }

package/src/UserCenter/components/user-basic-info.tsx

@@ -43,6 +43,10 @@ export default function UserBasicInfo({
 
   const isSmallView = theme.breakpoints.down('md');
 
+  if (!user) {
+    return null;
+  }
+
   return (
     <Box
       {...rest}

package/src/UserCenter/components/user-center.tsx

@@ -7,6 +7,7 @@ import pWaitFor from 'p-wait-for';
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
 import Tabs from '@arcblock/ux/lib/Tabs';
 import Empty from '@arcblock/ux/lib/Empty';
+import Button from '@arcblock/ux/lib/Button';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
 import { useConfirm } from '@arcblock/ux/lib/Dialog';
 import { translate } from '@arcblock/ux/lib/Locale/util';
@@ -82,18 +83,16 @@ export default function UserCenter({
 
   const userState = useRequest(
     async () => {
-      await pWaitFor(() => session.initialized);
+      await pWaitFor(() => session?.initialized);
       if (isMyself) {
         return session.user;
       }
       if (currentDid) {
         return await client.user.getUserPublicInfo({ did: currentDid });
       }
-
-      throw new Error(t('noUserFound'));
     },
     {
-      refreshDeps: [currentDid, isMyself],
+      refreshDeps: [currentDid, isMyself, session?.initialized],
     }
   );
 
@@ -155,7 +154,7 @@ export default function UserCenter({
         // icon: x.icon,
       };
     });
-  }, [formattedBlocklet, userState.data, privacyState?.data]);
+  }, [formattedBlocklet, userState.data, privacyState?.data, locale]);
 
   const currentActiveTab = useCreation(() => {
     return userCenterTabs.find((x) => x.value === currentTab);
@@ -217,6 +216,26 @@ export default function UserCenter({
       );
     }
 
+    if (!currentDid && !userState.data) {
+      return (
+        <Box sx={{ width: '100%' }}>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center',
+              gap: 1,
+            }}>
+            <Empty>{t('viewAfterLogin')}</Empty>
+            <Button size="small" variant="contained" onClick={() => session.login()}>
+              {t('loginNow')}
+            </Button>
+          </Box>
+        </Box>
+      );
+    }
+
     return (
       <>
         <Box sx={{ flex: 1, overflow: 'hidden' }}>
@@ -318,13 +337,13 @@ export default function UserCenter({
               md: 400,
             },
             maxWidth: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 2.5,
             position: 'relative',
           }}>
           <Box
             sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 2.5,
               position: {
                 xs: 'static',
                 md: stickySidebar ? 'sticky' : 'static',

package/src/UserCenter/components/user-info.tsx

@@ -31,7 +31,7 @@ export default function UserInfo({
       wallet: 'DID Wallet',
       auth0: 'Auth0',
     };
-    return nameMap[user.sourceProvider as keyof typeof nameMap] || t('unknown');
+    return (user?.sourceProvider && nameMap[user.sourceProvider as keyof typeof nameMap]) || t('unknown');
   }, [user?.sourceProvider]);
 
   const userInfoListData = [];

package/src/UserCenter/libs/locales.ts

@@ -39,6 +39,8 @@ export const translations = {
     switchProfile: '切换',
     userInfo: '个人信息',
     myInfo: '我的信息',
+    loginNow: '立即登录',
+    viewAfterLogin: '登录后才可以查看',
   },
   en: {
     settings: 'Settings',
@@ -80,5 +82,7 @@ export const translations = {
     switchProfile: 'Switch',
     userInfo: 'User Info',
     myInfo: 'My Info',
+    loginNow: 'Login',
+    viewAfterLogin: 'View after login',
   },
 };