@blocklet/ui-react 2.9.17 → 2.9.19

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

@@ -1,38 +1,98 @@
-import { Box, Chip, Typography } from '@mui/material';
+import { Box, Chip, IconButton, 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';
+import SettingsOutlineRoundedIcon from '@iconify-icons/material-symbols/settings-outline-rounded';
+import Avatar from '@arcblock/ux/lib/Avatar';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
+import { useTheme } from '@arcblock/ux/lib/Theme';
 import DID from '@arcblock/ux/lib/DID';
-import { useCreation } from 'ahooks';
+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 { translations } from '../libs/locales';
 import type { User } from '../../@types';
 
 export default function UserBasicInfo({
   user,
   isMyself = true,
   switchPassport,
+  switchProfile,
+  openSettings,
   ...rest
 }: {
   user: User;
   isMyself: boolean;
   switchPassport: () => void;
+  switchProfile: () => void;
+  openSettings: () => void;
 } & BoxProps) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
   const currentRole = useCreation(
     () => (user?.passports || [])?.find((item) => item.name === user.role),
     [user?.passports, user?.role]
   );
+  const theme = useTheme();
+
+  const isSmallView = theme.breakpoints.down('md');
 
   return (
-    <Box {...rest}>
+    <Box
+      {...rest}
+      sx={{
+        position: 'relative',
+        ...rest.sx,
+      }}>
+      <Avatar
+        src={user?.avatar}
+        did={user?.did}
+        size={isSmallView ? 64 : 80}
+        variant="circle"
+        shape="circle"
+        sx={{
+          borderRadius: '100%',
+          backgroundColor: '#fff',
+          position: 'relative',
+          overflow: 'hidden',
+          ...(isMyself
+            ? {
+                cursor: 'pointer',
+                '&:hover': {
+                  '&::after': {
+                    content: `"${t('switchProfile')}"`,
+                  },
+                },
+                '&::after': {
+                  color: 'white',
+                  position: 'absolute',
+                  fontSize: '12px',
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  height: '50%',
+                  backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                },
+              }
+            : {}),
+        }}
+        onClick={isMyself ? switchProfile : noop}
+      />
       <Typography
-        variant="h4"
+        variant="h5"
         sx={{
           fontWeight: 'bold',
           display: 'flex',
           alignItems: 'center',
           gap: 1,
-          mb: 1,
+          fontSize: '24px !important',
         }}>
         {user?.fullName}
         {isMyself ? (
@@ -65,6 +125,29 @@ export default function UserBasicInfo({
         ) : null}
       </Typography>
       <DID did={user.did} copyable={false} />
+      {isMyself ? (
+        <IconButton
+          sx={{
+            borderRadius: 2,
+            color: colors.textBase,
+            backgroundColor: 'white',
+            border: `1px solid ${colors.strokeBorderBase}`,
+            position: 'absolute',
+            bottom: {
+              xs: 'unset',
+              md: 0,
+            },
+            top: {
+              xs: 0,
+              md: 'unset',
+            },
+            right: 0,
+          }}
+          disableFocusRipple
+          onClick={openSettings}>
+          <Icon icon={SettingsOutlineRoundedIcon} />
+        </IconButton>
+      ) : null}
     </Box>
   );
 }

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

@@ -1,11 +1,10 @@
 import { useContext } from 'react';
-import { Box, CircularProgress, IconButton, Paper, Typography } from '@mui/material';
+import { Box, CircularProgress, Paper, Typography } from '@mui/material';
 import type { PaperProps } from '@mui/material';
 import { useCreation, useMemoizedFn, useMount, useRequest } from 'ahooks';
-import { Icon } from '@iconify/react';
-import SettingsOutlineRoundedIcon from '@iconify-icons/material-symbols/settings-outline-rounded';
+
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
-import Avatar from '@arcblock/ux/lib/Avatar';
+
 import Tabs from '@arcblock/ux/lib/Tabs';
 import Empty from '@arcblock/ux/lib/Empty';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
@@ -17,10 +16,8 @@ import cloneDeep from 'lodash/cloneDeep';
 import { getQuery, withQuery } from 'ufo';
 import type { AxiosError } from 'axios';
 
-// @ts-ignore
-import Header from '../../Header';
+import { Header, Footer } from '../../';
 import { translations } from '../libs/locales';
-import banner from '../assets/banner.png';
 import UserInfo from './user-info';
 import UserBasicInfo from './user-basic-info';
 import type { SessionContext as TSessionContext, UserCenterTab } from '../../@types';
@@ -36,12 +33,18 @@ export default function UserCenter({
   contentProps = {},
   disableAutoRedirect = false,
   autoPopupSetting = false,
+  hideFooter = false,
+  headerProps = {},
+  footerProps = {},
 }: {
-  children: any;
-  currentTab: string;
-  contentProps?: PaperProps;
-  disableAutoRedirect?: boolean;
-  autoPopupSetting?: boolean;
+  readonly children: any;
+  readonly currentTab: string;
+  readonly contentProps?: PaperProps;
+  readonly disableAutoRedirect?: boolean;
+  readonly autoPopupSetting?: boolean;
+  readonly hideFooter?: boolean;
+  readonly headerProps?: object;
+  readonly footerProps?: object;
 }) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -157,27 +160,6 @@ export default function UserCenter({
       });
     }
   });
-  const xsGridTemplateAreas = useCreation(() => {
-    return [
-      '"avatar settings"',
-      '"basicInfo basicInfo"',
-      userCenterTabs.length > 0 || !isMyself ? '"tabs tabs"' : null,
-      isMyself ? '"passport passport"' : null,
-      isMyself ? '"extraInfo extraInfo"' : null,
-    ];
-  }, [userCenterTabs, isMyself]);
-
-  const mdGridTemplateAreas = useCreation(() => {
-    if (!isMyself) {
-      return ['"avatar"', '"basicInfo"', '"tabs"'];
-    }
-    return [
-      '"avatar settings"',
-      '"basicInfo extraInfo"',
-      userCenterTabs.length > 0 ? '"tabs extraInfo"' : null,
-      '"passport extraInfo"',
-    ];
-  }, [userCenterTabs, isMyself]);
 
   const openSettings = useMemoizedFn(() => {
     confirmApi.open({
@@ -226,69 +208,19 @@ export default function UserCenter({
     return (
       <Box
         sx={{
-          maxWidth: 1200,
+          maxWidth: 880,
           margin: '0 auto',
-          px: 3,
-          pb: 3,
-          display: 'grid',
+          p: 3,
+          display: 'flex',
           gap: 2.5,
-          gridTemplateAreas: {
-            xs: xsGridTemplateAreas.filter(Boolean).join(' '),
-            md: mdGridTemplateAreas.filter(Boolean).join(' '),
-          },
-          gridTemplateRows: {
-            xs: '64px auto auto auto',
-            md: '64px auto 1fr',
-          },
-          gridTemplateColumns: {
-            xs: '1fr',
-            md: isMyself ? '1fr 300px' : '1fr',
-          },
+          flexDirection: 'column',
         }}>
-        <Box>
-          <Avatar
-            src={userState.data?.avatar}
-            did={userState.data?.did}
-            size={120}
-            variant="circle"
-            shape="circle"
-            style={{
-              border: '4px solid #fff',
-              transform: 'translateY(-50%)',
-              borderRadius: '100%',
-              gridArea: 'avatar',
-              backgroundColor: '#fff',
-            }}
-          />
-        </Box>
-        {isMyself ? (
-          <Box
-            sx={{
-              gridArea: 'settings',
-              display: 'flex',
-              justifyContent: 'flex-end',
-              alignItems: 'center',
-            }}>
-            <IconButton
-              sx={{
-                borderRadius: 2,
-                color: colors.textBase,
-                backgroundColor: 'white',
-                border: `1px solid ${colors.strokeBorderBase}`,
-              }}
-              disableFocusRipple
-              onClick={openSettings}>
-              <Icon icon={SettingsOutlineRoundedIcon} />
-            </IconButton>
-          </Box>
-        ) : null}
         <UserBasicInfo
           isMyself={isMyself}
           switchPassport={session.switchPassport}
+          switchProfile={session.switchProfile}
+          openSettings={openSettings}
           user={userState.data}
-          sx={{
-            gridArea: 'basicInfo',
-          }}
         />
         {userCenterTabs.length > 0 && currentTab ? (
           <Box
@@ -351,19 +283,16 @@ export default function UserCenter({
         ) : null}
         {isMyself ? (
           <>
-            <Box
-              sx={{
-                gridArea: 'passport',
-              }}>
+            <Box>
               <Typography variant="h5" sx={{ fontWeight: 'bold', mb: 1.5 }}>
-                Passport
+                {t('passport')}
               </Typography>
               <Passport user={userState.data} />
             </Box>
-            <Box
-              sx={{
-                gridArea: 'extraInfo',
-              }}>
+            <Box>
+              <Typography variant="h5" sx={{ fontWeight: 'bold', mb: 1.5 }}>
+                {t('userInfo')}
+              </Typography>
               <UserInfo
                 user={userState.data}
                 sx={{
@@ -376,7 +305,7 @@ export default function UserCenter({
         ) : null}
       </Box>
     );
-  }, [userState, userCenterTabs, mdGridTemplateAreas, xsGridTemplateAreas]);
+  }, [userState, userCenterTabs]);
 
   if (!disableAutoRedirect && !currentTab && formattedBlocklet?.navigation?.userCenter?.length > 0) {
     window.location.replace(formattedBlocklet?.navigation?.userCenter[0]?.link);
@@ -388,23 +317,15 @@ export default function UserCenter({
       sx={{
         backgroundColor: colors.backgroundsBgSubtitle,
         minHeight: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
       }}>
-      <Header />
-      <Box
-        sx={{
-          pt: {
-            xs: `${(400 / 1280) * 100}%`,
-            sm: `${(300 / 1280) * 100}%`,
-            md: `${(200 / 1280) * 100}%`,
-          },
-          backgroundImage: `url(${banner})`,
-          backgroundSize: 'cover',
-          minHeight: '60px',
-        }}
-      />
-      {}
-      {content}
-      {confirmHolder}
+      <Header {...headerProps} />
+      <Box flex={1}>
+        {content}
+        {confirmHolder}
+      </Box>
+      {hideFooter ? null : <Footer {...footerProps} />}
     </Box>
   );
 }

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

@@ -1,4 +1,4 @@
-import { Box, Typography } from '@mui/material';
+import { Box, BoxProps, Typography } from '@mui/material';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
 
 type TUserInfoItemProps = {
@@ -9,9 +9,10 @@ type TUserInfoItemProps = {
   };
 };
 
-export default function UserInfoItem({ data }: TUserInfoItemProps) {
+export default function UserInfoItem({ data, ...rest }: TUserInfoItemProps & BoxProps) {
   return (
     <Box
+      {...rest}
       sx={{
         display: 'grid',
         gridTemplateColumns: 'auto 1fr',
@@ -19,6 +20,7 @@ export default function UserInfoItem({ data }: TUserInfoItemProps) {
         alignItems: 'center',
         rowGap: 0.75,
         columnGap: 1,
+        ...rest.sx,
       }}>
       <Box
         sx={{

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

@@ -73,12 +73,16 @@ export default function UserInfo({
       {...rest}
       sx={{
         display: 'flex',
-        flexDirection: 'column',
+        flexDirection: {
+          xs: 'column',
+          md: 'row',
+        },
+        alignItems: 'flex-start',
         gap: 3,
         ...rest?.sx,
       }}>
       {userInfoListData.map((item) => (
-        <UserInfoItem key={item.title} data={item} />
+        <UserInfoItem key={item.title} data={item} sx={{ flex: 1 }} />
       ))}
     </Paper>
   );

package/src/UserCenter/libs/api.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+axios.defaults.timeout = 10 * 1000; // 超时时间设为10s
+
+const api = axios.create();
+
+export { axios, api };

package/src/UserCenter/libs/locales.ts

@@ -23,6 +23,7 @@ export const translations = {
     noUserFound: '未找到指定的用户',
     notificationManagement: '通知管理',
     privacyManagement: '隐私管理',
+    storageManagement: "存储管理",
     webhook: {
       url: '自定义URL',
       slack: 'Slack',
@@ -33,6 +34,8 @@ export const translations = {
     },
     toPublic: '公开 “{name}” 页面',
     currentPassport: '当前使用的通行证',
+    switchProfile: '切换',
+    userInfo: '个人信息',
   },
   en: {
     settings: 'Settings',
@@ -55,6 +58,7 @@ export const translations = {
     emptyField: 'Empty field',
     notificationManagement: 'Notification',
     privacyManagement: 'Privacy',
+    storageManagement: 'Storage',
     emptyContent: 'Empty',
     underProtected: 'This page has protected privacy',
     noUserFound: 'No user found',
@@ -68,5 +72,7 @@ export const translations = {
     },
     toPublic: 'Public "{name}" page',
     currentPassport: 'Passport currently in use',
+    switchProfile: 'Switch',
+    userInfo: 'User Info',
   },
 };

package/src/contexts/config-user-space.tsx

@@ -0,0 +1,86 @@
+import { createContext, useContext, useMemo, useState, useEffect } from 'react';
+import { SessionContext as TSessionContext } from '../@types';
+import { SessionContext } from '@arcblock/did-connect/lib/Session';
+
+
+export interface SpaceGateway {
+  did: string;
+  name: string;
+  url: string;
+  endpoint: string;
+}
+
+export interface SettingStorageEndpoint {
+  (endpoint: string | undefined): void | Promise<void>;
+} 
+
+interface ConfigUserSpaceContextType {
+  loading: boolean;
+  spaceGateway: SpaceGateway | undefined;
+  deleteSpaceGateway: (spaceGateway: SpaceGateway) => Promise<void>;
+  updateSpaceGateway: (updateSpaceGateway: SpaceGateway) =>  Promise<void>;
+  storageEndpoint: string;
+  settingStorageEndpoint: SettingStorageEndpoint;
+  hasStorageEndpoint: boolean;
+}
+
+const ConfigUserSpaceContext = createContext<ConfigUserSpaceContextType>({} as ConfigUserSpaceContextType);
+const { Provider, Consumer } = ConfigUserSpaceContext;
+
+function ConfigUserSpaceProvider({ children }: {children: React.ReactNode }) {
+  const [loading] = useState(false);
+  const {session} = useContext<TSessionContext>(SessionContext);
+  const { user } = session;
+
+  const [spaceGateway, setSpaceGateway] = useState<SpaceGateway | undefined>();
+  const storageEndpoint = useMemo(() => {
+    return user?.didSpace?.endpoint;
+  }, [user?.didSpace]);
+
+  useEffect(() => {
+    setSpaceGateway(user?.didSpace as SpaceGateway)
+  }, [user?.didSpace])
+
+  const deleteSpaceGateway = async (): Promise<void> => {
+    setSpaceGateway(undefined);
+  };
+ 
+  const updateSpaceGateway = async (x: SpaceGateway) => {
+    setSpaceGateway(x);
+    session.refresh();
+    // eslint-disable-next-line no-use-before-define
+    await settingStorageEndpoint(x.endpoint);
+  };
+
+
+  const settingStorageEndpoint =  (endpoint: string | undefined) => {};
+
+  const hasStorageEndpoint = Boolean(storageEndpoint && spaceGateway);
+
+  return (
+    <Provider
+      value={{
+        loading,
+        spaceGateway,
+        deleteSpaceGateway,
+        updateSpaceGateway,
+        storageEndpoint,
+        settingStorageEndpoint,
+        hasStorageEndpoint,
+      }}>
+      {children}
+    </Provider>
+  );
+}
+
+function useConfigUserSpaceContext() {
+  const res = useContext(ConfigUserSpaceContext);
+  return res;
+}
+
+export {
+  ConfigUserSpaceContext,
+  ConfigUserSpaceProvider,
+  Consumer as ConfigUserSpaceConsumer,
+  useConfigUserSpaceContext,
+};

package/src/hooks/use-mobile.tsx

@@ -0,0 +1,6 @@
+import { Breakpoint, useTheme, useMediaQuery } from '@mui/material';
+
+export default function useMobile({ key = 'sm' }: { key?: number | Breakpoint }) {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.down(key));
+}

package/src/libs/spaces.tsx

@@ -0,0 +1,10 @@
+import { joinURL } from "ufo";
+
+export function getSpaceNftDisplayUrlFromEndpoint(endpoint: string): string {
+  const prefix = endpoint.replace(/\/api\/space\/.+/, '');
+
+  const strArray = endpoint.replace(/\/$/, '').split('/');
+  const spaceDid = strArray.at(-4);
+
+  return joinURL(prefix, `/api/space/nft/display?spaceDid=${spaceDid}`);
+}

package/babel.config.es.js

@@ -1,8 +0,0 @@
-module.exports = {
-  presets: [
-    ['@babel/preset-env', { modules: false, targets: 'chrome 114' }],
-    ['@babel/preset-react', { useBuiltIns: true, runtime: 'automatic' }],
-  ],
-  plugins: ['babel-plugin-inline-react-svg'],
-  ignore: ['src/**/*.stories.js', 'src/**/demo'],
-};