@blocklet/ui-react 2.10.5 → 2.10.7

package/lib/@types/index.d.ts

@@ -51,6 +51,7 @@ export type User = UserPublicInfo & {
     didSpace?: Record<string, any>;
     connectedAccounts?: any[];
     locale?: string;
+    url: string;
 };
 export type UserCenterTab = {
     value: string;
@@ -67,6 +68,7 @@ export type Session = {
     logout: any;
     switch: any;
     switchDid: any;
+    refreshProfile: () => Promise<void>;
     switchProfile: any;
     switchPassport: any;
     refresh: Function;

package/lib/Header/index.d.ts

@@ -1,11 +1,22 @@
+import { LiteralUnion } from 'type-fest';
+import type { BoxProps } from '@mui/material';
 import { BlockletMetaProps, SessionManagerProps } from '../@types';
-declare const _default: import("react").ComponentType<{
-    meta: BlockletMetaProps;
-    addons: Function | JSX.Element;
-    sessionManagerProps: SessionManagerProps;
-    homeLink: string;
-    theme: object;
-    hideNavMenu: boolean;
+type HeaderProps = {
+    meta?: BlockletMetaProps;
+    addons?: Function | React.ReactNode;
+    sessionManagerProps?: SessionManagerProps;
+    homeLink?: string | Function;
+    theme?: object;
+    hideNavMenu?: boolean;
     bordered?: boolean;
-}>;
+    logo?: React.ReactNode;
+    brand?: React.ReactNode;
+    brandAddon?: React.ReactNode;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+    prepend?: React.ReactNode;
+    align?: 'left' | 'right';
+    maxWidth?: false | LiteralUnion<'xs' | 'sm' | 'md' | 'lg' | 'xl', string>;
+};
+declare const _default: import("react").ComponentType<HeaderProps & Omit<BoxProps, keyof HeaderProps>>;
 export default _default;

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

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Chip, IconButton, Typography } from "@mui/material";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Box, Chip, CircularProgress, IconButton, Tooltip, Typography } from "@mui/material";
 import { Icon } from "@iconify/react";
 import SwapHorizRoundedIcon from "@iconify-icons/material-symbols/swap-horiz-rounded";
 import SettingsOutlineRoundedIcon from "@iconify-icons/material-symbols/settings-outline-rounded";
@@ -11,7 +11,13 @@ import { useCreation, useMemoizedFn } from "ahooks";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import noop from "lodash/noop";
+import RefreshOutlinedIcon from "@mui/icons-material/RefreshOutlined";
+import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import { useContext, useState } from "react";
+import Toast from "@arcblock/ux/lib/Toast";
+import isEmpty from "lodash/isEmpty";
 import { translations } from "../../libs/locales.js";
+import { formatAxiosError } from "../../libs/utils.js";
 export default function UserBasicInfo({
   user,
   isMyself = true,
@@ -22,6 +28,8 @@ export default function UserBasicInfo({
   ...rest
 }) {
   const { locale } = useLocaleContext();
+  const { session } = useContext(SessionContext);
+  const [loading, setLoading] = useState(false);
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, "en", data);
   });
@@ -34,6 +42,19 @@ export default function UserBasicInfo({
   if (!user) {
     return null;
   }
+  const refreshProfile = async () => {
+    try {
+      setLoading(true);
+      await session.refreshProfile();
+      session.refresh();
+      Toast.success(translate(translations, "refreshProfile.successfully", locale));
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatAxiosError(err));
+    } finally {
+      setLoading(false);
+    }
+  };
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -95,35 +116,48 @@ export default function UserBasicInfo({
             },
             children: [
               user?.fullName,
-              isMyself ? /* @__PURE__ */ jsx(
-                Chip,
-                {
-                  label: currentRole?.title || user?.role || "Guest",
-                  size: "small",
-                  variant: "outlined",
-                  sx: {
-                    flexShrink: 0,
-                    fontWeight: "bold",
-                    fontSize: "12px",
-                    color: colors.textBase,
-                    borderColor: colors.strokeBorderStrong,
-                    backgroundColor: "transparent",
-                    textTransform: "capitalize",
-                    pr: 1,
-                    pl: 0.5,
-                    "&:hover": {
-                      backgroundColor: "rgba(0, 0, 0, 0.04)"
+              isMyself ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  Chip,
+                  {
+                    label: currentRole?.title || user?.role || "Guest",
+                    size: "small",
+                    variant: "outlined",
+                    sx: {
+                      flexShrink: 0,
+                      fontWeight: "bold",
+                      fontSize: "12px",
+                      color: colors.textBase,
+                      borderColor: colors.strokeBorderStrong,
+                      backgroundColor: "transparent",
+                      textTransform: "capitalize",
+                      pr: 1,
+                      pl: 0.5,
+                      "&:hover": {
+                        backgroundColor: "rgba(0, 0, 0, 0.04)"
+                      },
+                      "&:active": {
+                        boxShadow: "none"
+                      }
                     },
-                    "&:active": {
-                      boxShadow: "none"
-                    }
-                  },
-                  clickable: true,
-                  deleteIcon: /* @__PURE__ */ jsx(Icon, { icon: SwapHorizRoundedIcon, color: colors.textBase }),
-                  onDelete: switchPassport,
-                  onClick: switchPassport
-                }
-              ) : null
+                    clickable: true,
+                    deleteIcon: /* @__PURE__ */ jsx(Icon, { icon: SwapHorizRoundedIcon, color: colors.textBase }),
+                    onDelete: switchPassport,
+                    onClick: switchPassport
+                  }
+                ),
+                !isEmpty(user.url) && /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    title: !loading && translate(translations, "refreshProfile.title", locale),
+                    sx: { display: "flex", alignItems: "center" },
+                    children: loading ? (
+                      // @ts-expect-error
+                      /* @__PURE__ */ jsx(CircularProgress, { size: "16px", sx: { color: theme?.colors?.primary, ml: 0.5 } })
+                    ) : /* @__PURE__ */ jsx(RefreshOutlinedIcon, { onClick: refreshProfile })
+                  }
+                )
+              ] }) : null
             ]
           }
         ),

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

@@ -39,6 +39,10 @@ export declare const translations: {
         };
         toPublic: string;
         currentPassport: string;
+        refreshProfile: {
+            title: string;
+            successfully: string;
+        };
         switchProfile: string;
         userInfo: string;
         myInfo: string;
@@ -125,6 +129,10 @@ export declare const translations: {
         };
         toPublic: string;
         currentPassport: string;
+        refreshProfile: {
+            title: string;
+            successfully: string;
+        };
         switchProfile: string;
         userInfo: string;
         myInfo: string;

package/lib/UserCenter/libs/locales.js

@@ -39,6 +39,10 @@ export const translations = {
     },
     toPublic: "\u516C\u5F00 \u201C{name}\u201D \u9875\u9762",
     currentPassport: "\u5F53\u524D\u4F7F\u7528\u7684\u901A\u884C\u8BC1",
+    refreshProfile: {
+      title: "\u5237\u65B0\u4E2A\u4EBA\u4FE1\u606F",
+      successfully: "\u5237\u65B0\u4E2A\u4EBA\u4FE1\u606F\u6210\u529F"
+    },
     switchProfile: "\u5207\u6362",
     userInfo: "\u4E2A\u4EBA\u4FE1\u606F",
     myInfo: "\u6211\u7684\u4FE1\u606F",
@@ -125,6 +129,10 @@ export const translations = {
     },
     toPublic: 'Public "{name}" page',
     currentPassport: "Passport currently in use",
+    refreshProfile: {
+      title: "Refresh profile",
+      successfully: "Refresh profile successfully"
+    },
     switchProfile: "Switch",
     userInfo: "User Info",
     myInfo: "My Info",

package/lib/UserSessions/components/user-sessions.js

@@ -187,7 +187,10 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          return x.createdAt ? /* @__PURE__ */ jsx(RelativeTime, { value: x.createdAt, relativeRange: 3 * 86400 * 1e3, locale }) : t("unknown");
+          return x.createdAt ? (
+            // @ts-expect-error
+            /* @__PURE__ */ jsx(RelativeTime, { value: x.createdAt, relativeRange: 3 * 86400 * 1e3, locale })
+          ) : t("unknown");
         }
       }
     },
@@ -197,7 +200,10 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          return x.status === "expired" ? t("expired") : /* @__PURE__ */ jsx(RelativeTime, { value: x.updatedAt, relativeRange: 3 * 86400 * 1e3, locale });
+          return x.status === "expired" ? t("expired") : (
+            // @ts-expect-error
+            /* @__PURE__ */ jsx(RelativeTime, { value: x.updatedAt, relativeRange: 3 * 86400 * 1e3, locale })
+          );
         }
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.10.5",
+  "version": "2.10.7",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -32,8 +32,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.10.5",
-    "@arcblock/react-hooks": "^2.10.5",
+    "@arcblock/bridge": "^2.10.7",
+    "@arcblock/react-hooks": "^2.10.7",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify/react": "^4.1.1",
@@ -50,6 +50,7 @@
     "prop-types": "^15.8.1",
     "react-error-boundary": "^3.1.4",
     "react-placeholder": "^4.1.0",
+    "type-fest": "^4.22.0",
     "ua-parser-js": "^1.0.37",
     "ufo": "^1.5.3"
   },
@@ -78,5 +79,5 @@
     "jest": "^28.1.3",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "b5740a02ed3bae848a586abe9cd8b35d507f0152"
+  "gitHead": "865d3f490c7148b8ef706768add621409198a3c1"
 }

package/src/@types/index.ts

@@ -57,6 +57,7 @@ export type User = UserPublicInfo & {
   didSpace?: Record<string, any>;
   connectedAccounts?: any[];
   locale?: string;
+  url: string;
 };
 
 export type UserCenterTab = {
@@ -75,6 +76,8 @@ export type Session = {
   logout: any;
   switch: any;
   switchDid: any;
+
+  refreshProfile: () => Promise<void>;
   switchProfile: any;
   switchPassport: any;
 

package/src/Header/index.tsx

@@ -7,6 +7,8 @@ import NavMenu from '@arcblock/ux/lib/NavMenu';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
 import omit from 'lodash/omit';
+import { LiteralUnion } from 'type-fest';
+import type { BoxProps } from '@mui/material';
 
 import Icon from '../Icon';
 import OverridableThemeProvider from '../common/overridable-theme-provider';
@@ -56,6 +58,24 @@ const parseNavigation = (navigation: any) => {
   return { navItems, activeId: matchedIndex >= 0 ? flattened[matchedIndex].id : null };
 };
 
+type HeaderProps = {
+  meta?: BlockletMetaProps;
+  addons?: Function | React.ReactNode;
+  sessionManagerProps?: SessionManagerProps;
+  homeLink?: string | Function;
+  theme?: object;
+  hideNavMenu?: boolean;
+  bordered?: boolean;
+  logo?: React.ReactNode;
+  brand?: React.ReactNode;
+  brandAddon?: React.ReactNode;
+  description?: React.ReactNode;
+  children?: React.ReactNode;
+  prepend?: React.ReactNode;
+  align?: 'left' | 'right';
+  maxWidth?: false | LiteralUnion<'xs' | 'sm' | 'md' | 'lg' | 'xl', string>;
+};
+
 /**
  * 专门用于 (composable) blocklet 的 Header 组件, 解析 blocklet meta 中的数据, 通过组合 UX 中的 Header & NavMenu 组件来渲染
  */
@@ -71,15 +91,7 @@ function Header({
   theme: themeOverrides,
   hideNavMenu = false,
   ...rest
-}: {
-  meta: BlockletMetaProps;
-  addons: Function | JSX.Element;
-  sessionManagerProps: SessionManagerProps;
-  homeLink: string;
-  theme: object;
-  hideNavMenu: boolean;
-  bordered?: boolean;
-}) {
+}: HeaderProps & Omit<BoxProps, keyof HeaderProps>) {
   useWalletHiddenTopbar();
   const { locale } = useLocaleContext() || {};
   const formattedBlocklet = useMemo(() => {

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

@@ -1,4 +1,4 @@
-import { Box, Chip, IconButton, Typography } from '@mui/material';
+import { Box, Chip, CircularProgress, IconButton, Tooltip, Typography } from '@mui/material';
 import type { BoxProps } from '@mui/material';
 import { Icon } from '@iconify/react';
 import SwapHorizRoundedIcon from '@iconify-icons/material-symbols/swap-horiz-rounded';
@@ -11,9 +11,17 @@ import { useCreation, useMemoizedFn } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import noop from 'lodash/noop';
+import RefreshOutlinedIcon from '@mui/icons-material/RefreshOutlined';
+import { SessionContext } from '@arcblock/did-connect/lib/Session';
+import { useContext, useState } from 'react';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { AxiosError } from 'axios';
+import isEmpty from 'lodash/isEmpty';
+import { SessionContext as TSessionContext } from '../../../@types';
 
 import { translations } from '../../libs/locales';
 import type { User } from '../../../@types';
+import { formatAxiosError } from '../../libs/utils';
 
 export default function UserBasicInfo({
   user,
@@ -32,6 +40,9 @@ export default function UserBasicInfo({
   openSettings: () => void;
 } & BoxProps) {
   const { locale } = useLocaleContext();
+  const { session } = useContext<TSessionContext>(SessionContext);
+  const [loading, setLoading] = useState(false);
+
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
@@ -47,6 +58,20 @@ export default function UserBasicInfo({
     return null;
   }
 
+  const refreshProfile = async () => {
+    try {
+      setLoading(true);
+      await session.refreshProfile();
+      session.refresh();
+      Toast.success(translate(translations, 'refreshProfile.successfully', locale));
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatAxiosError(err as AxiosError));
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <Box
       {...rest}
@@ -55,6 +80,7 @@ export default function UserBasicInfo({
         ...rest.sx,
       }}>
       <Avatar
+        //  @ts-ignore
         src={user?.avatar}
         did={user?.did}
         size={isSmallView ? 64 : 80}
@@ -103,32 +129,46 @@ export default function UserBasicInfo({
         }}>
         {user?.fullName}
         {isMyself ? (
-          <Chip
-            label={currentRole?.title || user?.role || 'Guest'}
-            size="small"
-            variant="outlined"
-            sx={{
-              flexShrink: 0,
-              fontWeight: 'bold',
-              fontSize: '12px',
-              color: colors.textBase,
-              borderColor: colors.strokeBorderStrong,
-              backgroundColor: 'transparent',
-              textTransform: 'capitalize',
-              pr: 1,
-              pl: 0.5,
-              '&:hover': {
-                backgroundColor: 'rgba(0, 0, 0, 0.04)',
-              },
-              '&:active': {
-                boxShadow: 'none',
-              },
-            }}
-            clickable
-            deleteIcon={<Icon icon={SwapHorizRoundedIcon} color={colors.textBase} />}
-            onDelete={switchPassport}
-            onClick={switchPassport}
-          />
+          <>
+            <Chip
+              label={currentRole?.title || user?.role || 'Guest'}
+              size="small"
+              variant="outlined"
+              sx={{
+                flexShrink: 0,
+                fontWeight: 'bold',
+                fontSize: '12px',
+                color: colors.textBase,
+                borderColor: colors.strokeBorderStrong,
+                backgroundColor: 'transparent',
+                textTransform: 'capitalize',
+                pr: 1,
+                pl: 0.5,
+                '&:hover': {
+                  backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                },
+                '&:active': {
+                  boxShadow: 'none',
+                },
+              }}
+              clickable
+              deleteIcon={<Icon icon={SwapHorizRoundedIcon} color={colors.textBase} />}
+              onDelete={switchPassport}
+              onClick={switchPassport}
+            />
+            {!isEmpty(user.url) && (
+              <Tooltip
+                title={!loading && translate(translations, 'refreshProfile.title', locale)}
+                sx={{ display: 'flex', alignItems: 'center' }}>
+                {loading ? (
+                  // @ts-expect-error
+                  <CircularProgress size="16px" sx={{ color: theme?.colors?.primary, ml: 0.5 }} />
+                ) : (
+                  <RefreshOutlinedIcon onClick={refreshProfile} />
+                )}
+              </Tooltip>
+            )}
+          </>
         ) : null}
       </Typography>
       <DID did={user.did} showQrcode copyable compact={!showFullDid} responsive={!showFullDid} locale={locale} />

package/src/UserCenter/libs/locales.ts

@@ -39,6 +39,10 @@ export const translations = {
     },
     toPublic: '公开 “{name}” 页面',
     currentPassport: '当前使用的通行证',
+    refreshProfile: {
+      title: '刷新个人信息',
+      successfully: '刷新个人信息成功',
+    },
     switchProfile: '切换',
     userInfo: '个人信息',
     myInfo: '我的信息',
@@ -126,6 +130,10 @@ export const translations = {
     },
     toPublic: 'Public "{name}" page',
     currentPassport: 'Passport currently in use',
+    refreshProfile: {
+      title: 'Refresh profile',
+      successfully: 'Refresh profile successfully',
+    },
     switchProfile: 'Switch',
     userInfo: 'User Info',
     myInfo: 'My Info',

package/src/UserSessions/components/user-session-info.tsx

@@ -21,6 +21,7 @@ export default function UserSessionInfo({ user, sessionUser }: { readonly user:
         size={40}
         variant="circle"
         shape="circle"
+        // @ts-expect-error
         src={sessionUser.avatar}
         did={sessionUser.did}
         sx={{ flexShrink: 0 }}

package/src/UserSessions/components/user-sessions.tsx

@@ -209,6 +209,7 @@ export default function UserSessions({
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
           return x.createdAt ? (
+            // @ts-expect-error
             <RelativeTime value={x.createdAt} relativeRange={3 * 86400 * 1000} locale={locale} />
           ) : (
             t('unknown')
@@ -225,6 +226,7 @@ export default function UserSessions({
           return x.status === 'expired' ? (
             t('expired')
           ) : (
+            // @ts-expect-error
             <RelativeTime value={x.updatedAt} relativeRange={3 * 86400 * 1000} locale={locale} />
           );
         },