@blocklet/ui-react 2.9.13 → 2.9.14

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

@@ -0,0 +1,70 @@
+import { Box, Chip, 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 { temp as colors } from '@arcblock/ux/lib/Colors';
+import DID from '@arcblock/ux/lib/DID';
+import { useCreation } from 'ahooks';
+
+import type { User } from '../../@types';
+
+export default function UserBasicInfo({
+  user,
+  isMyself = true,
+  switchPassport,
+  ...rest
+}: {
+  user: User;
+  isMyself: boolean;
+  switchPassport: () => void;
+} & BoxProps) {
+  const currentRole = useCreation(
+    () => (user?.passports || [])?.find((item) => item.name === user.role),
+    [user?.passports, user?.role]
+  );
+
+  return (
+    <Box {...rest}>
+      <Typography
+        variant="h4"
+        sx={{
+          fontWeight: 'bold',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+          mb: 1,
+        }}>
+        {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: 'white',
+              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}
+          />
+        ) : null}
+      </Typography>
+      <DID did={user.did} copyable={false} />
+    </Box>
+  );
+}

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

@@ -0,0 +1,410 @@
+import { useContext } from 'react';
+import { Box, CircularProgress, IconButton, 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';
+import { useConfirm } from '@arcblock/ux/lib/Dialog';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
+import cloneDeep from 'lodash/cloneDeep';
+import { getQuery, withQuery } from 'ufo';
+import type { AxiosError } from 'axios';
+
+// @ts-ignore
+import Header from '../../Header';
+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';
+// @ts-ignore
+import { formatBlockletInfo, getLocalizedNavigation } from '../../blocklets';
+import Passport from './passport';
+import Settings from './settings';
+import { client } from '../libs/client';
+
+export default function UserCenter({
+  children,
+  currentTab,
+  contentProps = {},
+  disableAutoRedirect = false,
+  autoPopupSetting = false,
+}: {
+  children: any;
+  currentTab: string;
+  contentProps?: PaperProps;
+  disableAutoRedirect?: boolean;
+  autoPopupSetting?: boolean;
+}) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const sessionCtx: TSessionContext = useContext(SessionContext);
+  const session = sessionCtx?.session;
+
+  const currentDid = useCreation(() => {
+    const currentUrl = window.location.href;
+    const query = getQuery(currentUrl);
+    if (query?.did) {
+      if (Array.isArray(query.did)) {
+        return query.did[0];
+      }
+      return query.did;
+    }
+    return session?.user?.did;
+  }, [session?.user?.did]);
+
+  const isMyself = useCreation(() => {
+    if (session?.user) {
+      return currentDid === session?.user?.did;
+    }
+    return false;
+  }, [currentDid, session?.user?.did]);
+
+  const userState = useRequest(
+    async () => {
+      if (isMyself) {
+        return session.user;
+      }
+      if (currentDid) {
+        return await client.user.getUserPublicInfo({ did: currentDid });
+      }
+
+      throw new Error(t('noUserFound'));
+    },
+    {
+      refreshDeps: [currentDid, isMyself],
+    }
+  );
+
+  const privacyState = useRequest(
+    async () => {
+      if (userState.data && currentTab) {
+        const config = await client.user.getUserPrivacyConfig({ did: currentDid });
+        return config;
+      }
+      return null;
+    },
+    {
+      refreshDeps: [currentDid, userState.data, currentTab],
+      loadingDelay: 300,
+    }
+  );
+
+  const { confirmHolder, confirmApi } = useConfirm({
+    sx: {
+      '.MuiDialog-paper': {
+        borderRadius: 2,
+      },
+      '.ux-dialog_title': {
+        fontWeight: 600,
+      },
+      '.ux-dialog_closeButton': {
+        p: 1,
+      },
+      '.MuiDialogActions-root': {
+        display: {
+          xs: 'none',
+          md: 'flex',
+        },
+      },
+    },
+  });
+
+  const formattedBlocklet = useCreation(() => {
+    const blocklet = cloneDeep(window.blocklet);
+    try {
+      return formatBlockletInfo(blocklet);
+    } catch (e) {
+      console.error('Failed to format blocklet info', e, blocklet);
+      return blocklet;
+    }
+  }, []);
+
+  const userCenterTabs = useCreation<UserCenterTab[]>(() => {
+    const menus = formattedBlocklet?.navigation?.userCenter || [];
+    const localizedMenus = getLocalizedNavigation(menus, locale) || [];
+    return localizedMenus.map((x: any) => {
+      const value = x._rawLink ?? x.link;
+
+      return {
+        value,
+        label: x.title,
+        url: x.link,
+        protected: privacyState?.data?.[value] ?? false,
+        // icon: x.icon,
+      };
+    });
+  }, [formattedBlocklet, userState.data, privacyState?.data]);
+
+  const currentActiveTab = useCreation(() => {
+    return userCenterTabs.find((x) => x.value === currentTab);
+  }, [userCenterTabs]);
+
+  const handleChangeTab = useMemoizedFn((value) => {
+    const findTab = userCenterTabs.find((x) => x.value === value);
+    if (findTab) {
+      window.location.href = withQuery(findTab.url, {
+        did: isMyself ? undefined : currentDid,
+      });
+    }
+  });
+  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({
+      title: t('settings'),
+      content: (
+        <Settings
+          user={userState.data}
+          settings={{
+            userCenterTabs,
+          }}
+          sx={{ mt: -2 }}
+          onSave={async () => {
+            await privacyState.runAsync();
+            return privacyState.data;
+          }}
+        />
+      ),
+      showCancelButton: false,
+      confirmButtonText: t('done'),
+      onConfirm: confirmApi.close,
+    });
+  });
+
+  useMount(() => {
+    if (autoPopupSetting) {
+      openSettings();
+    }
+  });
+
+  const content = useCreation(() => {
+    if (userState.loading || session.loading) {
+      return null;
+    }
+    if (userState.error) {
+      const errorMessage =
+        (userState.error as AxiosError<{ error: string }>).response?.data?.error ||
+        userState.error.message ||
+        'error occurred';
+
+      const formatError = {
+        message: errorMessage,
+      };
+      return <ErrorFallback error={formatError} />;
+    }
+
+    return (
+      <Box
+        sx={{
+          maxWidth: 1200,
+          margin: '0 auto',
+          px: 3,
+          pb: 3,
+          display: 'grid',
+          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',
+          },
+        }}>
+        <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}
+          user={userState.data}
+          sx={{
+            gridArea: 'basicInfo',
+          }}
+        />
+        {userCenterTabs.length > 0 && currentTab ? (
+          <Box
+            sx={{
+              gridArea: 'tabs',
+              overflow: 'auto',
+              padding: '1px',
+            }}>
+            <Tabs variant="card" tabs={userCenterTabs} current={currentTab} onChange={handleChangeTab} />
+            {!privacyState.data || privacyState.loading ? (
+              <Box
+                sx={{
+                  height: '100%',
+                  minWidth: '160px',
+                  minHeight: '160px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}>
+                <CircularProgress sx={{ color: colors.primary100 }} />
+              </Box>
+            ) : (
+              <>
+                {currentActiveTab?.protected && !isMyself ? (
+                  <Paper variant="outlined" sx={{ mt: 2, borderRadius: 2, p: 2 }}>
+                    <Empty>{t('underProtected')}</Empty>
+                  </Paper>
+                ) : (
+                  <>
+                    {children && (
+                      <Paper
+                        {...contentProps}
+                        variant="outlined"
+                        sx={{ mt: 2, borderRadius: 2, p: 2, ...contentProps?.sx }}>
+                        {children}
+                      </Paper>
+                    )}
+                  </>
+                )}
+              </>
+            )}
+          </Box>
+        ) : null}
+        {!isMyself && userCenterTabs.length === 0 ? (
+          <Box
+            sx={{
+              gridArea: 'tabs',
+              overflow: 'auto',
+              padding: '1px',
+            }}>
+            <Paper
+              variant="outlined"
+              sx={{
+                borderRadius: 2,
+                p: 2,
+              }}>
+              <Empty>{t('emptyContent')}</Empty>
+            </Paper>
+          </Box>
+        ) : null}
+        {isMyself ? (
+          <>
+            <Box
+              sx={{
+                gridArea: 'passport',
+              }}>
+              <Typography variant="h5" sx={{ fontWeight: 'bold', mb: 1.5 }}>
+                Passport
+              </Typography>
+              <Passport user={userState.data} />
+            </Box>
+            <Box
+              sx={{
+                gridArea: 'extraInfo',
+              }}>
+              <UserInfo
+                user={userState.data}
+                sx={{
+                  padding: 3,
+                  borderRadius: 3,
+                }}
+              />
+            </Box>
+          </>
+        ) : null}
+      </Box>
+    );
+  }, [userState, userCenterTabs, mdGridTemplateAreas, xsGridTemplateAreas]);
+
+  if (!disableAutoRedirect && !currentTab && formattedBlocklet?.navigation?.userCenter?.length > 0) {
+    window.location.replace(formattedBlocklet?.navigation?.userCenter[0]?.link);
+    return null;
+  }
+
+  return (
+    <Box
+      sx={{
+        backgroundColor: colors.backgroundsBgSubtitle,
+        minHeight: '100vh',
+      }}>
+      <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}
+    </Box>
+  );
+}

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

@@ -0,0 +1,50 @@
+import { Box, Typography } from '@mui/material';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+
+type TUserInfoItemProps = {
+  data: {
+    icon: any;
+    title: string;
+    content: any;
+  };
+};
+
+export default function UserInfoItem({ data }: TUserInfoItemProps) {
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        gridTemplateColumns: 'auto 1fr',
+        gridTemplateAreas: `"icon title" ". content"`,
+        alignItems: 'center',
+        rowGap: 0.75,
+        columnGap: 1,
+      }}>
+      <Box
+        sx={{
+          gridArea: 'icon',
+          display: 'flex',
+          alignItems: 'center',
+        }}>
+        {data.icon}
+      </Box>
+      <Typography
+        sx={{
+          color: colors.textBase,
+          gridArea: 'title',
+          fontSize: '14px',
+        }}>
+        {data.title}
+      </Typography>
+      <Typography
+        sx={{
+          color: colors.textSubtitle,
+          whiteSpace: 'pre-wrap',
+          gridArea: 'content',
+          fontSize: '14px',
+        }}>
+        {data.content}
+      </Typography>
+    </Box>
+  );
+}

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

@@ -0,0 +1,85 @@
+import { Paper } from '@mui/material';
+import type { PaperProps } from '@mui/material';
+import { Icon } from '@iconify/react';
+import { useMemoizedFn, useCreation } from 'ahooks';
+import MailOutlineRoundedIcon from '@iconify-icons/material-symbols/mail-outline-rounded';
+import ScheduleOutlineRoundedIcon from '@iconify-icons/material-symbols/schedule-outline-rounded';
+import MoreTimeRoundedIcon from '@iconify-icons/material-symbols/more-time-rounded';
+import CaptivePortalRoundedIcon from '@iconify-icons/material-symbols/captive-portal-rounded';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import RelativeTime from '@arcblock/ux/lib/RelativeTime';
+
+import UserInfoItem from './user-info-item';
+import type { User } from '../../@types';
+import { translations } from '../libs/locales';
+
+export default function UserInfo({
+  user,
+  ...rest
+}: {
+  user: User;
+} & PaperProps) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  const readableProvider = useCreation(() => {
+    const nameMap = {
+      wallet: 'DID Wallet',
+      auth0: 'Auth0',
+    };
+    return nameMap[user.sourceProvider as keyof typeof nameMap] || t('unknown');
+  }, [user?.sourceProvider]);
+
+  const userInfoListData = [];
+  userInfoListData.push({
+    icon: <Icon fontSize={16} icon={MailOutlineRoundedIcon} />,
+    title: t('email'),
+    content: user?.email || t('emptyField'),
+  });
+  userInfoListData.push({
+    icon: <Icon fontSize={16} icon={ScheduleOutlineRoundedIcon} />,
+    title: t('lastLogin'),
+    content: (
+      <>
+        {user?.lastLoginAt || user?.lastLoginIp ? (
+          <>
+            {user?.lastLoginAt ? <RelativeTime locale={locale} value={user?.lastLoginAt} /> : null}
+            {user?.lastLoginAt && user?.lastLoginIp ? <br /> : null}
+            {user?.lastLoginIp}
+          </>
+        ) : (
+          t('unknown')
+        )}
+      </>
+    ),
+  });
+  userInfoListData.push({
+    icon: <Icon fontSize={16} icon={MoreTimeRoundedIcon} />,
+    title: t('createdAt'),
+    content: user?.createdAt ? <RelativeTime locale={locale} value={user?.createdAt} /> : t('unknown'),
+  });
+  userInfoListData.push({
+    icon: <Icon fontSize={16} icon={CaptivePortalRoundedIcon} />,
+    title: t('registerFrom'),
+    content: readableProvider,
+  });
+
+  return (
+    <Paper
+      variant="outlined"
+      {...rest}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 3,
+        ...rest?.sx,
+      }}>
+      {userInfoListData.map((item) => (
+        <UserInfoItem key={item.title} data={item} />
+      ))}
+    </Paper>
+  );
+}