@blocklet/ui-react 2.12.8 → 2.12.10

package/src/UserCenter/components/nft.tsx

@@ -0,0 +1,122 @@
+import { Box, Pagination, Skeleton, Typography } from '@mui/material';
+import { useCreation, useMemoizedFn, useReactive, useRequest } from 'ahooks';
+import axios from 'axios';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+import NFTDisplay from '@arcblock/ux/lib/NFTDisplay';
+import Empty from '@arcblock/ux/lib/Empty';
+import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { translations } from '../libs/locales';
+import { User } from '../../@types';
+
+interface NftInfo {
+  address: string;
+  data: Record<string, any>;
+  display: Record<string, any>;
+  issuer: string;
+}
+
+interface ResponseData {
+  assets: NftInfo[];
+  code: string;
+  page: { cursor: string; next: boolean; total: number };
+}
+
+interface PaginationProps {
+  page: number;
+  size: number;
+}
+
+export default function Nft({ user }: { user: User }) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const paging = useReactive<PaginationProps>({
+    page: 1,
+    size: 20,
+  });
+  const userState = useRequest<ResponseData, [PaginationProps]>(
+    async (pagination: PaginationProps = paging) => {
+      const response = await axios.get(`${WELLKNOWN_SERVICE_PATH_PREFIX}/ocap/listAssets`, {
+        params: {
+          ownerAddress: user.did,
+          ...pagination,
+        },
+      });
+      return response.data;
+    },
+    {
+      defaultParams: [paging],
+      refreshDeps: [user.did, paging],
+    }
+  );
+
+  const { loading, data } = userState;
+
+  const dataPage = data?.page ?? { cursor: 0, next: false, total: 0 };
+
+  const handlePageChange = (event: React.ChangeEvent<unknown>, value: number) => {
+    paging.page = value;
+    userState.run(paging);
+  };
+
+  const content = useCreation(() => {
+    if (loading) {
+      return (
+        <Box display="flex" flexDirection="column" gap={2}>
+          <Skeleton width="20%" />
+          <Skeleton variant="rectangular" height={200} sx={{ borderRadius: 2 }} />
+        </Box>
+      );
+    }
+    return (
+      <>
+        <Typography
+          sx={{
+            color: colors.foregroundsFgBase,
+            fontWeight: 600,
+            mb: 2.5,
+          }}>
+          {t('common.nft')}
+        </Typography>
+        <Box className="nft-list-wrapper" display="flex" flexDirection="row" gap={2}>
+          {data?.assets?.map((item) => (
+            <Box key={item.address} width={166} height={166}>
+              <NFTDisplay
+                data={item.display}
+                address={item.address}
+                inset
+                imageFilter={{
+                  imageFilter: 'resize',
+                  w: '500',
+                  f: 'webp',
+                }}
+              />
+            </Box>
+          ))}
+          {data?.assets?.length === 0 && !loading && (
+            <Box display="flex" justifyContent="center" alignItems="center" width="100%" height="100%">
+              <Empty>{t('common.noNFT')}</Empty>
+            </Box>
+          )}
+        </Box>
+        {dataPage.next || paging.page > 1 ? (
+          <Pagination
+            sx={{
+              display: 'flex',
+              justifyContent: 'end',
+            }}
+            page={paging.page}
+            onChange={handlePageChange}
+            count={Math.ceil(dataPage.total / paging.size)}
+            size="small"
+          />
+        ) : null}
+      </>
+    );
+  }, [loading, dataPage, paging.page, paging.size, handlePageChange]);
+
+  return <Box sx={{ border: `1px solid ${colors.dividerColor}`, borderRadius: 2, p: 2, mb: 5 }}>{content}</Box>;
+}

package/src/UserCenter/components/settings.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { Box, Divider, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import type { BoxProps } from '@mui/material';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
@@ -85,13 +85,26 @@ export default function Settings({
       {...rest}
       sx={{
         ...rest?.sx,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2.5,
         minWidth: {
           md: 500,
         },
         maxWidth: '100%',
       }}>
-      {tabs.map((tab, index) => (
-        <Box id={tab.value} key={tab.value}>
+      {tabs.map((tab) => (
+        <Box
+          id={tab.value}
+          key={tab.value}
+          sx={{
+            border: `1px solid ${colors.dividerColor}`,
+            borderRadius: 2,
+            p: 2,
+            '&:last-child': {
+              mb: 5,
+            },
+          }}>
           <Typography
             sx={{
               color: colors.foregroundsFgBase,
@@ -100,7 +113,6 @@ export default function Settings({
             {tab.label}
           </Typography>
           <Box mt={2.5}>{tab.content}</Box>
-          {index < tabs.length - 1 ? <Divider sx={{ mt: 2.5, mb: 2.5, borderColor: colors.dividerColor }} /> : null}
         </Box>
       ))}
     </Box>

package/src/UserCenter/components/status-selector/duration-menu.tsx

@@ -0,0 +1,87 @@
+import { Menu, Typography } from '@mui/material';
+import styled from '@emotion/styled';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+import { useState } from 'react';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { useMemoizedFn } from 'ahooks';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { translations } from '../../libs/locales';
+import { DurationEnum } from '../../../@types';
+import StatusMenuItem, { BaseStatusProps, StatusItem, StyledMenu } from './menu-item';
+
+interface StatusDurationMenuProps extends BaseStatusProps {
+  data: StatusItem;
+}
+function DurationMenu({ data, selected, onSelect }: StatusDurationMenuProps) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, _data = {}) => {
+    return translate(translations, key, locale, 'en', _data);
+  });
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const open = Boolean(anchorEl);
+
+  const openSubMenu = (e: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(e.currentTarget);
+  };
+
+  const closeSubMenu = () => {
+    setAnchorEl(null);
+  };
+
+  const onSelectStatus = (e: React.MouseEvent<HTMLElement>) => {
+    openSubMenu(e);
+  };
+
+  const onSelectDuration = (e: React.MouseEvent<HTMLElement>, item: StatusItem) => {
+    onSelect({
+      ...(selected ?? {}),
+      value: data.id,
+      duration: item.id as DurationEnum,
+    });
+    closeSubMenu();
+  };
+  return (
+    <>
+      <StatusMenuItem icon={data.icon} selected={selected?.value === data.id} onClick={onSelectStatus}>
+        {data.name}
+      </StatusMenuItem>
+
+      <StyledMenu
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        open={open}
+        onClose={closeSubMenu}
+        anchorEl={anchorEl}>
+        <Typography component="span" color="text.secondary" pl={2} fontSize="14px">
+          {t('profile.removeStatusAfter')}
+        </Typography>
+        {data.children?.map((item) => (
+          <StatusMenuItem
+            key={item.id}
+            selected={selected?.duration === item.id}
+            onClick={(e) => onSelectDuration(e, item)}>
+            {item.name}
+          </StatusMenuItem>
+        ))}
+      </StyledMenu>
+    </>
+  );
+}
+
+export default DurationMenu;
+
+export const MenuDiv = styled(Menu)`
+  .MuiList-root {
+    min-width: 160px;
+  }
+  .selected {
+    background-color: ${colors.backgroundsBgSubtitle};
+  }
+`;

package/src/UserCenter/components/status-selector/index.tsx

@@ -0,0 +1,52 @@
+import { PopoverProps, Typography } from '@mui/material';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useMemoizedFn } from 'ahooks';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { UserMetadata } from '../../../@types';
+import StatusDurationMenu from './duration-menu';
+import StatusMenuItem, { BaseStatusProps, StatusItem, StyledMenu } from './menu-item';
+import { translations } from '../../libs/locales';
+
+interface StatusSelectorProps extends BaseStatusProps {
+  data: Array<StatusItem>;
+  open: boolean;
+  anchorEl?: PopoverProps['anchorEl'];
+}
+
+function StatusSelector({ data, open, onSelect, anchorEl, selected }: StatusSelectorProps) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, _data = {}) => {
+    return translate(translations, key, locale, 'en', _data);
+  });
+  const onSelectStatus = (v?: UserMetadata['status']) => {
+    onSelect(v);
+  };
+
+  const renderMenuItems = () => {
+    return data.map((item) => {
+      if (item.children) {
+        return <StatusDurationMenu key={item.id} data={item} selected={selected} onSelect={onSelectStatus} />;
+      }
+      return (
+        <StatusMenuItem
+          key={item.id}
+          icon={item.icon}
+          selected={selected?.value === item.id}
+          onClick={() => onSelectStatus({ value: item.id })}>
+          {item.name}
+        </StatusMenuItem>
+      );
+    });
+  };
+
+  return (
+    <StyledMenu open={open} onClose={() => onSelectStatus()} anchorEl={anchorEl}>
+      <Typography component="span" color="text.secondary" pl={2} fontSize="14px">
+        {t('profile.setStatus')}
+      </Typography>
+      {renderMenuItems()}
+    </StyledMenu>
+  );
+}
+
+export default StatusSelector;

package/src/UserCenter/components/status-selector/menu-item.tsx

@@ -0,0 +1,52 @@
+import { ListItemIcon, MenuItem, Menu } from '@mui/material';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import React from 'react';
+import styled from '@emotion/styled';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+import { UserMetadata } from '../../../@types';
+
+interface StatusMenuItemProps {
+  icon?: React.FC<SvgIconProps>;
+  selected?: boolean;
+  onClick: (e: React.MouseEvent<HTMLElement>) => void;
+  children: React.ReactNode;
+}
+
+export default function StatusMenuItem({ icon, selected, onClick, children }: StatusMenuItemProps) {
+  return (
+    <MenuItem onClick={onClick} className={selected ? 'selected' : ''}>
+      {icon && (
+        <ListItemIcon style={{ minWidth: '24px' }}>
+          {React.createElement(icon, {
+            style: { fontSize: '16px', width: '16px', height: '16px' },
+          })}
+        </ListItemIcon>
+      )}
+      {children}
+    </MenuItem>
+  );
+}
+
+export const StyledMenu = styled(Menu)`
+  .MuiPaper-root {
+    box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.15);
+  }
+  .MuiList-root {
+    min-width: 160px;
+  }
+  .selected {
+    background-color: ${colors.backgroundsBgSubtitle};
+  }
+`;
+
+export interface StatusItem {
+  id: string;
+  name: string;
+  icon?: React.FC<SvgIconProps>;
+  children?: Array<StatusItem>;
+}
+
+export interface BaseStatusProps {
+  selected: UserMetadata['status'];
+  onSelect: (v: UserMetadata['status']) => void;
+}

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

@@ -24,7 +24,7 @@ import { PROFILE_URL } from '@arcblock/ux/lib/Util/constant';
 import Footer from '../../Footer';
 import Header from '../../Header';
 import { translations } from '../libs/locales';
-import { UserInfo, UserBasicInfo, SwitchRole } from './user-info';
+import { UserBasicInfo } from './user-info';
 import type { SessionContext as TSessionContext, User, UserCenterTab } from '../../@types';
 // @ts-ignore
 import { formatBlockletInfo, getLink, getLocalizedNavigation } from '../../blocklets';
@@ -34,17 +34,18 @@ import { client } from '../../libs/client';
 import useMobile from '../../hooks/use-mobile';
 import { ConfigUserSpaceProvider } from '../../contexts/config-user-space';
 import DidSpace from './storage';
+import Nft from './nft';
 
-const profileLink = joinURL(PROFILE_URL, '/profile');
+const nftsLink = joinURL(PROFILE_URL, '/nfts');
 const settingsLink = joinURL(PROFILE_URL, '/settings');
 const didSpacesLink = joinURL(PROFILE_URL, '/did-spaces');
 
 const Main = styled(Box)(({ theme }) => ({
   flex: 1,
   boxSizing: 'border-box',
-  padding: theme.spacing(3),
+  padding: '0 16px',
   width: '100%',
-  maxWidth: 1200,
+  maxWidth: 1600,
   margin: '0 auto',
   display: 'flex',
   alignItems: 'stretch',
@@ -184,29 +185,31 @@ export default function UserCenter({
   }, []);
 
   const defaultTabs = useCreation((): any => {
-    const tabs: any = [
-      {
-        label: t('common.profile'),
-        protected: false,
-        value: profileLink,
-        url: getLink(profileLink, locale),
-      },
-    ];
+    let tabs: any = [];
     if (isMyself) {
-      tabs.push({
-        label: t('common.setting'),
-        protected: true,
-        isPrivate: true,
-        value: settingsLink,
-        url: getLink(settingsLink, locale),
-      });
-      tabs.push({
-        label: t('storageManagement'),
-        protected: true,
-        isPrivate: true,
-        value: didSpacesLink,
-        url: getLink(didSpacesLink, locale),
-      });
+      tabs = [
+        {
+          label: t('common.nft'),
+          protected: true,
+          isPrivate: true, // 隐私数据，仅自己可见
+          value: nftsLink,
+          url: getLink(nftsLink, locale),
+        },
+        {
+          label: t('common.setting'),
+          protected: true,
+          isPrivate: true,
+          value: settingsLink,
+          url: getLink(settingsLink, locale),
+        },
+        {
+          label: t('storageManagement'),
+          protected: true,
+          isPrivate: true,
+          value: didSpacesLink,
+          url: getLink(didSpacesLink, locale),
+        },
+      ];
     }
     return tabs;
   }, [isMyself, locale]);
@@ -224,7 +227,7 @@ export default function UserCenter({
           label: x.title || x.label,
           url: x.link || x.url,
           protected: privacyState?.data?.[value] ?? false,
-          isPrivate: x.isPrivate,
+          isPrivate: x.isPrivate || x._rawLink === '/payment-kit/customer', // FIXME: HACK: 隐藏 payment-kit/customer 菜单, 需要一个通用的解决方案，在嵌入的时候就决定是否是私有的
           // icon: x.icon,
         };
       })
@@ -268,8 +271,11 @@ export default function UserCenter({
     return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, '/settings');
   }, [currentActiveTab]);
 
-  const isProfileTab = useCreation(() => {
-    return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, '/profile');
+  const isNftsTab = useCreation(() => {
+    return (
+      (currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, '/profile')) ||
+      currentActiveTab?.value === joinURL(PROFILE_URL, '/nfts')
+    );
   }, [currentActiveTab]);
 
   const isDidSpaceTab = useCreation(() => {
@@ -289,44 +295,26 @@ export default function UserCenter({
   });
 
   const renderDefaultTab = useCreation(() => {
-    if (isProfileTab) {
+    if (isNftsTab && isMyself) {
       return (
         <Box
           sx={{
-            maxWidth: '100%',
-            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2.5,
           }}>
-          <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 2.5,
-              position: {
-                xs: 'static',
-                md: stickySidebar ? 'sticky' : 'static',
-              },
-              top: (theme) => (stickySidebar ? theme.spacing(3) : 'unset'),
-            }}>
-            <Box
+          <Box sx={{ border: `1px solid ${colors.dividerColor}`, borderRadius: 2, p: 2 }}>
+            <Typography
               sx={{
-                width: {
-                  sx: '100%',
-                  md: 420,
-                },
+                color: colors.foregroundsFgBase,
+                fontWeight: 600,
+                mb: 2.5,
               }}>
-              <Box display="flex" justifyContent="space-between">
-                <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{isMyself ? t('myInfo') : t('hisInfo')}</Typography>
-                {isMyself ? <SwitchRole user={userState.data as User} switchPassport={handleSwitchPassport} /> : null}
-              </Box>
-              <UserInfo user={userState.data as User} isMySelf={isMyself} />
-            </Box>
-            {isMyself ? (
-              <Box>
-                <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{t('passport')}</Typography>
-                <Passport user={userState.data as User} />
-              </Box>
-            ) : null}
+              {t('passport')}
+            </Typography>
+            <Passport user={userState.data as User} />
           </Box>
+          <Nft user={userState.data as User} />
         </Box>
       );
     }
@@ -341,7 +329,7 @@ export default function UserCenter({
       );
     }
     return null;
-  }, [isSettingTab, isProfileTab, userState, isMyself, stickySidebar, settingContent]);
+  }, [isSettingTab, isNftsTab, userState, isMyself, stickySidebar, settingContent]);
 
   const emptyContent = useCreation(() => {
     return (
@@ -464,57 +452,70 @@ export default function UserCenter({
     }
 
     return (
-      <ContentWrapper>
+      <ContentWrapper display="flex" flexDirection={isMobile ? 'column' : 'row'}>
+        <Box flex="1" order={isMobile ? 2 : 'unset'}>
+          {userCenterTabs.length > 0 && currentTab ? (
+            <Box
+              display="flex"
+              flexDirection="column"
+              sx={{
+                height: '100%',
+                overflow: 'auto',
+                padding: '1px',
+              }}>
+              <Tabs
+                orientation="horizontal"
+                variant="line"
+                tabs={userCenterTabs}
+                current={currentActiveTab?.value ?? currentTab}
+                onChange={handleChangeTab}
+                sx={{
+                  mb: 2,
+                  '.MuiTabs-flexContainer': {
+                    gap: 3,
+                    '.MuiButtonBase-root': {
+                      padding: '40px 4px 32px 4px',
+                      fontSize: 16,
+                    },
+                    '.MuiTab-root': {
+                      display: 'block',
+                      textAlign: 'left',
+                      alignItems: 'flex-start',
+                      justifyContent: 'flex-start',
+                      fontWeight: 400,
+                    },
+                  },
+                  '.MuiTabs-scroller': {
+                    '&:after': {
+                      content: '""',
+                      display: 'block',
+                      width: '100%',
+                      height: '1px',
+                      backgroundColor: `${colors.dividerColor} !important`,
+                    },
+                  },
+                }}
+              />
+              {tabContent}
+            </Box>
+          ) : null}
+          {userCenterTabs.length === 0 && emptyContent}
+        </Box>
+        {!isMobile && <Divider orientation="vertical" sx={{ borderColor: colors.dividerColor, ml: 5 }} />}
         <UserBasicInfo
+          isMobile={isMobile}
+          order={isMobile ? 1 : 'unset'}
           isMyself={isMyself}
           switchPassport={handleSwitchPassport}
           switchProfile={session.switchProfile}
           user={userState.data as User}
           showFullDid={false}
           sx={{
-            display: 'flex',
-            gap: 3,
-            mt: 2,
+            padding: !isMobile ? '40px 24px 24px 40px' : '24px 0',
+            ...(!isMobile ? { width: 320, maxWidth: 320, flexShrink: 0 } : {}),
+            boxSizing: 'content-box',
           }}
         />
-        <Divider sx={{ mt: 3, mb: 3, borderColor: colors.dividerColor }} />
-        {userCenterTabs.length > 0 && currentTab ? (
-          <Box
-            display={isMobile ? 'block' : 'flex'}
-            sx={{
-              height: '100%',
-              overflow: 'auto',
-              padding: '1px',
-            }}>
-            <Tabs
-              orientation={isMobile ? 'horizontal' : 'vertical'}
-              variant="line"
-              tabs={userCenterTabs}
-              current={currentActiveTab?.value ?? currentTab}
-              onChange={handleChangeTab}
-              sx={{
-                width: isMobile ? '100%' : 160,
-                marginBottom: isMobile ? '8px' : 0,
-                flexShrink: 0,
-                '.MuiTabs-flexContainer': {
-                  gap: 1.5,
-                  '.MuiButtonBase-root': {
-                    fontSize: 16,
-                  },
-                  '.MuiTab-root': {
-                    display: 'block',
-                    textAlign: 'left',
-                    alignItems: 'flex-start',
-                    justifyContent: 'flex-start',
-                  },
-                },
-              }}
-            />
-            <Divider orientation="vertical" sx={{ height: '100%', mr: 3, borderColor: colors.dividerColor }} />
-            {tabContent}
-          </Box>
-        ) : null}
-        {userCenterTabs.length === 0 && emptyContent}
       </ContentWrapper>
     );
   }, [

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

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezonePlugin from 'dayjs/plugin/timezone';
+import { formatToDatetime } from '@arcblock/ux/lib/Util';
+import { useCreation } from 'ahooks';
+
+dayjs.extend(utc);
+dayjs.extend(timezonePlugin);
+
+export default function Clock({ timezone = 'utc', locale = 'zh' }: { timezone?: string; locale?: string }) {
+  const [time, setTime] = useState(dayjs().tz(timezone));
+
+  useEffect(() => {
+    const timerId = setInterval(() => {
+      setTime(dayjs().tz(timezone));
+    }, 6000); // 每分钟更新一次
+
+    // 清除定时器
+    return () => clearInterval(timerId);
+  }, [timezone]);
+
+  const formatTime = useCreation(() => {
+    const localeOption = locale === 'zh' ? 'zh-cn' : 'en-us';
+    return formatToDatetime(time.toDate(), { tz: timezone, locale: localeOption });
+  }, [time, timezone, locale]);
+
+  return <div>{formatTime}</div>;
+}