@blocklet/ui-react 2.9.13 → 2.9.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.9.13",
+  "version": "2.9.15",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -20,11 +20,8 @@
   "scripts": {
     "lint": "eslint src tests --ext js --ext jsx",
     "lint:fix": "npm run lint -- --fix",
-    "build": "npm run build:lib && npm run build:es && npm run autoexports",
-    "build:lib": "babel src --out-dir lib --copy-files --no-copy-ignored",
-    "build:es": "babel --config-file ./babel.config.es.js src --out-dir es --copy-files --no-copy-ignored",
-    "autoexports": "node tools/auto-exports.js",
-    "watch": "babel src --out-dir lib -w --copy-files --no-copy-ignored",
+    "build": "unbuild && node tools/auto-exports.js",
+    "watch": "CONSOLA_LEVEL=1 nodemon -e .jsx,.js,.ts,.tsx -w src -x 'yalc publish --push'",
     "precommit": "CI=1 npm run lint",
     "prepush": "CI=1 npm run lint",
     "prepublish": "npm run build",
@@ -61,14 +58,23 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.9.13",
-    "@arcblock/ux": "^2.9.13",
+    "@abtnode/constant": "1.16.23-beta-aeb9f5bd",
+    "@arcblock/did-connect": "^2.9.15",
+    "@arcblock/ux": "^2.9.15",
+    "@blocklet/js-sdk": "1.16.23-beta-aeb9f5bd",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
+    "@iconify-icons/material-symbols": "^1.2.58",
+    "@iconify/react": "^4.1.1",
     "@mui/material": "^5.14.8",
+    "ahooks": "^3.7.8",
+    "axios": "^0.27.2",
     "core-js": "^3.25.5",
     "iconify-icon": "^1.0.8",
-    "react-error-boundary": "^3.1.4"
+    "iconify-icons-material-symbols-400": "^0.0.1",
+    "is-url": "^1.2.4",
+    "react-error-boundary": "^3.1.4",
+    "ufo": "^1.3.2"
   },
   "peerDependencies": {
     "react": ">=18.1.0"
@@ -83,7 +89,8 @@
     "@babel/preset-react": "^7.18.6",
     "eslint-plugin-react-hooks": "^4.6.0",
     "glob": "^10.3.3",
-    "jest": "^28.1.3"
+    "jest": "^28.1.3",
+    "unbuild": "^2.0.0"
   },
-  "gitHead": "c32202066e023e3ca91905f3d3292ac480325cd4"
+  "gitHead": "2402b2d3888dcac685215c373afd7651e6907acc"
 }

package/src/@types/index.ts

@@ -0,0 +1,70 @@
+import type { Axios } from 'axios';
+
+export type SessionContext = {
+  session: Session;
+  api: Axios;
+};
+
+export type User = {
+  did: string;
+  fullName: string;
+  role: string;
+  avatar: string;
+  email?: string;
+  phone?: string;
+  sourceProvider?: string;
+  lastLoginAt?: string;
+  lastLoginIp?: string;
+  createdAt?: string;
+  passports?: any[];
+};
+
+export type UserCenterTab = {
+  value: string;
+  label: string;
+  url: string;
+  protected: boolean;
+  icon?: string;
+};
+
+export type Session = {
+  loading: boolean;
+  user: User;
+  login: any;
+  logout: any;
+  switch: any;
+  switchDid: any;
+  switchProfile: any;
+  switchPassport: any;
+};
+
+export type WebhookType = 'slack' | 'api';
+export type WebhookItemData = {
+  type: WebhookType;
+  url: string;
+};
+
+export type WebhookItemProps = {
+  onTest: (params: WebhookItemData) => void;
+  onSave: (params: WebhookItemData) => void;
+  onDelete?: (params: WebhookItemData) => void;
+  onCancel?: () => void;
+  edit: boolean;
+  type?: WebhookType;
+  url?: string;
+};
+
+export type CreatePassportProps = {
+  issuer: string;
+  title: string;
+  issuerDid: string;
+  issuerAvatarUrl: string;
+  ownerDid: string;
+  ownerName: string;
+  ownerAvatarUrl: string;
+  preferredColor?: string;
+  revoked?: boolean;
+  isDataUrl?: boolean;
+  width?: string;
+  height?: string;
+};

package/src/@types/shims.d.ts

@@ -0,0 +1,12 @@
+declare module '@arcblock/ux/*';
+declare module '@arcblock/did-connect/*';
+
+declare module '@abtnode/constant';
+declare module 'is-url';
+declare module 'url-join';
+
+declare module '*.png';
+
+declare interface Window {
+  blocklet: any;
+}

package/src/Footer/index.jsx

@@ -80,7 +80,7 @@ const StyledInternalFooter = styled(InternalFooter)`
   border-top: 1px solid #eee;
   color: ${(props) => props.theme.palette.grey[600]};
   ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
-  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
+  font-family: Inter, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 `;
 

package/src/Header/index.jsx

@@ -138,7 +138,7 @@ Header.defaultProps = {
 
 const StyledUxHeader = styled(ResponsiveHeader)`
   ${({ $bgcolor }) => `background-color: ${$bgcolor || '#fff'};`}
-  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
+  font-family: Inter, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   .header-logo {
     min-width: 44px;

package/src/UserCenter/components/notification.tsx

@@ -0,0 +1,275 @@
+import { ChangeEvent } from 'react';
+import { Alert, Box, CircularProgress, Divider, Stack, Typography } from '@mui/material';
+import { useCreation, useMemoizedFn, useReactive, useRequest } from 'ahooks';
+import { Icon } from '@iconify/react';
+import AddRoundedIcon from '@iconify-icons/material-symbols/add-rounded';
+import Switch from '@arcblock/ux/lib/Switch';
+import Button from '@arcblock/ux/lib/Button';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+import Toast from '@arcblock/ux/lib/Toast';
+import { getWalletDid } from '@arcblock/ux/lib/SessionUser/libs/utils';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+import { translations } from '../libs/locales';
+import WebhookItem from './webhook-item';
+import { User, WebhookItemData } from '../../@types';
+import { formatAxiosError } from '../libs/utils';
+import { client } from '../libs/client';
+import { AxiosError } from 'axios';
+
+export default function Notification({ user }: { user: User }) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const currentState = useReactive({
+    showAdd: false,
+  });
+
+  const notificationConfigState = useRequest(
+    async () => {
+      const data = await client.user.getUserNotificationConfig();
+      return data;
+    },
+    {
+      refreshDeps: [user],
+      loadingDelay: 300,
+    }
+  );
+  const notifications = useCreation(() => {
+    return {
+      wallet: true,
+      email: true,
+      phone: false,
+      ...(notificationConfigState?.data?.notifications || {}),
+    };
+  }, [notificationConfigState?.data?.notifications]);
+
+  const webhooks = useCreation(() => {
+    return notificationConfigState?.data?.webhooks || [];
+  }, [notificationConfigState?.data?.webhooks]);
+
+  const onSaveChanges = useMemoizedFn(async (values) => {
+    try {
+      await client.user.saveUserNotificationConfig(values);
+      Toast.success(t('saveSuccess'));
+      notificationConfigState.run();
+    } catch (err) {
+      Toast.error(formatAxiosError(err as AxiosError));
+    }
+  });
+
+  const handleChangeSwitch = useMemoizedFn(async (channel, value) => {
+    await onSaveChanges({
+      notifications: {
+        [channel]: value,
+      },
+    });
+  });
+  const handleTestWebhook = async (data: WebhookItemData) => {
+    try {
+      await client.user.testNotificationWebhook(data);
+      Toast.success(t('webhookTested'));
+    } catch (err) {
+      Toast.error(formatAxiosError(err as AxiosError));
+    }
+  };
+  const handleDeleteWebhook = useMemoizedFn(async (index) => {
+    await onSaveChanges({
+      webhooks: webhooks.filter((_: WebhookItemData, i: number) => i !== index),
+    });
+  });
+  const handleEditWebhook = useMemoizedFn(async (index, webhook) => {
+    await onSaveChanges({
+      webhooks: webhooks.map((item: WebhookItemData, i: number) => (i === index ? webhook : item)),
+    });
+  });
+  const handleAddWebhook = useMemoizedFn(async (webhook) => {
+    await onSaveChanges({
+      webhooks: [...webhooks, webhook],
+    });
+    currentState.showAdd = false;
+  });
+
+  if (notificationConfigState.error) {
+    return <Alert severity="error">{notificationConfigState.error.message}</Alert>;
+  }
+
+  if (notificationConfigState.loading || !notificationConfigState.data) {
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100px',
+        }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 1,
+          alignItems: 'start',
+          '.MuiFormControlLabel-root': {
+            gap: 1,
+            m: 0,
+            flexDirection: {
+              xs: 'row-reverse',
+              md: 'row',
+            },
+            width: {
+              xs: '100%',
+              md: 'unset',
+            },
+          },
+
+          '.MuiSwitch-track': {
+            borderRadius: '100vw',
+          },
+          '.MuiSwitch-thumb': {
+            borderRadius: '100%',
+          },
+          '.MuiSwitch-root.MuiSwitch-sizeSmall': {
+            height: '20px',
+            width: '36px',
+            '.MuiSwitch-thumb': {
+              width: '16px',
+              height: '16px',
+            },
+          },
+        }}>
+        <Switch
+          checked={notifications.wallet}
+          labelProps={{
+            label: (
+              <Typography
+                color="text.primary"
+                sx={{
+                  fontSize: 14,
+                  display: 'flex',
+                  flexFlow: 'wrap',
+                  columnGap: 1,
+                  flex: 1,
+                }}>
+                {t('walletNotification')}
+                {getWalletDid(user) && (
+                  <Typography component="span" color="text.secondary" fontSize={13}>
+                    {getWalletDid(user)}
+                  </Typography>
+                )}
+              </Typography>
+            ),
+          }}
+          size="small"
+          onChange={(event: ChangeEvent<HTMLInputElement>) => handleChangeSwitch('wallet', event.target.checked)}
+        />
+        <Switch
+          checked={notifications.email}
+          labelProps={{
+            label: (
+              <Typography
+                color="text.primary"
+                sx={{
+                  fontSize: 14,
+                  display: 'flex',
+                  flexFlow: 'wrap',
+                  columnGap: 1,
+                  flex: 1,
+                }}>
+                {t('emailNotification')}
+                {user?.email && (
+                  <Typography component="span" color="text.secondary" fontSize={13}>
+                    {user?.email}
+                  </Typography>
+                )}
+              </Typography>
+            ),
+          }}
+          size="small"
+          onChange={(event: ChangeEvent<HTMLInputElement>) => handleChangeSwitch('email', event.target.checked)}
+        />
+        <Switch
+          disabled
+          checked={notifications.phone}
+          labelProps={{
+            label: (
+              <Typography
+                color="text.primary"
+                sx={{
+                  fontSize: 14,
+                  display: 'flex',
+                  flexFlow: 'wrap',
+                  columnGap: 1,
+                  flex: 1,
+                }}>
+                {t('phoneNotification')}
+                {user?.phone && (
+                  <Typography component="span" color="text.secondary" fontSize={13}>
+                    {user?.phone}
+                  </Typography>
+                )}
+              </Typography>
+            ),
+          }}
+          size="small"
+          onChange={(event: ChangeEvent<HTMLInputElement>) => handleChangeSwitch('phone', event.target.checked)}
+        />
+      </Box>
+      <Divider />
+      <Stack spacing={1.5} useFlexGap direction="column" alignItems="start">
+        {webhooks.map((item: WebhookItemData, index: number) => (
+          <WebhookItem
+            // eslint-disable-next-line react/no-array-index-key
+            key={`${index}_${item.url}`}
+            onTest={handleTestWebhook}
+            onDelete={() => handleDeleteWebhook(index)}
+            onSave={(...args) => handleEditWebhook(index, ...args)}
+            type={item.type}
+            url={item.url}
+            edit={false}
+          />
+        ))}
+        {currentState.showAdd && (
+          <WebhookItem
+            key="add"
+            onTest={handleTestWebhook}
+            onCancel={() => {
+              currentState.showAdd = false;
+            }}
+            onSave={(...args) => handleAddWebhook(...args)}
+            edit
+          />
+        )}
+
+        <Button
+          variant="outlined"
+          size="small"
+          sx={{
+            color: colors.foregroundsFgBase,
+            borderColor: colors.strokeBorderBase,
+            backgroundColor: colors.buttonsButtonNeutral,
+            '&:hover': {
+              borderColor: colors.strokeBorderBase,
+              backgroundColor: colors.buttonsButtonNeutralHover,
+            },
+            py: 0.5,
+            borderRadius: 2,
+          }}
+          startIcon={<Icon icon={AddRoundedIcon} />}
+          onClick={() => {
+            currentState.showAdd = true;
+          }}>
+          {t('addWebhook')}
+        </Button>
+      </Stack>
+    </Box>
+  );
+}

package/src/UserCenter/components/passport.tsx

@@ -0,0 +1,83 @@
+import { Stack } from '@mui/material';
+import type { StackProps } from '@mui/material';
+import Empty from '@arcblock/ux/lib/Empty';
+import { useTheme } from '@arcblock/ux/lib/Theme';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import PassportItem from '@arcblock/ux/lib/Passport';
+import { PASSPORT_STATUS } from '@abtnode/constant';
+import { useCreation } from 'ahooks';
+import uniqBy from 'lodash/uniqBy';
+
+import { createPassportSvg } from '../libs/utils';
+import type { User } from '../../@types';
+
+export default function Passport({ user, ...rest }: { user: User } & StackProps) {
+  const { t } = useLocaleContext();
+  const theme = useTheme();
+  const passports = useCreation(() => {
+    const passportList = (user?.passports || []).map((x) => ({
+      ...x,
+      revoked: x.status === PASSPORT_STATUS.REVOKED,
+    }));
+    passportList.sort((a, b) => {
+      if (a.revoked === b.revoked) {
+        return 0;
+      }
+      if (a.revoked) {
+        return 1;
+      } else {
+        return -1;
+      }
+    });
+
+    return uniqBy(passportList, 'role');
+  }, [user?.passports]);
+
+  const currentRole = useCreation(() => passports?.find((item) => item.name === user.role), [passports, user?.role]);
+
+  const activeColor = useCreation(() => {
+    return theme?.palette?.primary?.main || colors.textBase;
+  }, [theme?.palette?.primary?.main]);
+
+  if (passports.length === 0) {
+    return <Empty>{t('noPassport')}</Empty>;
+  }
+
+  return (
+    <Stack direction="row" spacing={3} flexWrap="wrap" useFlexGap {...rest}>
+      {passports.map((x) => (
+        <PassportItem
+          key={x.id}
+          passport={x}
+          user={user}
+          width={200}
+          color={window.blocklet.passportColor}
+          createPassportSvg={createPassportSvg}
+          title={currentRole && currentRole.role === x.role ? t('currentPassport') : ''}
+          sx={{
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 1,
+            '.passport-item__display': {
+              width: 166,
+              height: 166,
+              borderRadius: 2,
+              px: 2,
+              display: 'flex',
+              justifyContent: 'center',
+              backgroundColor: 'white',
+              boxShadow:
+                currentRole && currentRole.role === x.role
+                  ? `0px 2px 4px 0px ${activeColor}, 0px 1px 2px -1px ${activeColor}, 0px 0px 0px 1px ${activeColor} !important`
+                  : '0px 2px 4px 0px rgba(2, 7, 19, 0.04), 0px 1px 2px -1px rgba(2, 7, 19, 0.08), 0px 0px 0px 1px rgba(2, 7, 19, 0.08) !important',
+            },
+            '.passport-item__body': {
+              marginLeft: '0 !important',
+            },
+          }}
+        />
+      ))}
+    </Stack>
+  );
+}

package/src/UserCenter/components/privacy.tsx

@@ -0,0 +1,107 @@
+import { Box, Typography } from '@mui/material';
+import Switch from '@arcblock/ux/lib/Switch';
+import { ChangeEvent, useState } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { AxiosError } from 'axios';
+
+import { translations } from '../libs/locales';
+import { client } from '../libs/client';
+import { formatAxiosError } from '../libs/utils';
+
+type PrivacyConfig = {
+  key: string;
+  name: string;
+  value: boolean;
+};
+
+export default function Privacy({ configList, onSave }: { configList: PrivacyConfig[]; onSave: () => void }) {
+  const [dataList, setDataList] = useState(configList);
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const handleChangeSwitch = useMemoizedFn(async (type: string, value: boolean) => {
+    try {
+      const result = await client.user.saveUserPrivacyConfig({
+        [type]: !value,
+      });
+
+      setDataList(
+        dataList.map((item) => {
+          return {
+            ...item,
+            value: result?.[item.key] ?? item.value,
+          };
+        })
+      );
+      Toast.success(t('saveSuccess'));
+      onSave();
+    } catch (err) {
+      Toast.error(formatAxiosError(err as AxiosError));
+    }
+  });
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1,
+        alignItems: 'start',
+        '.MuiFormControlLabel-root': {
+          gap: 1,
+          m: 0,
+          flexDirection: {
+            xs: 'row-reverse',
+            md: 'row',
+          },
+          width: {
+            xs: '100%',
+            md: 'unset',
+          },
+        },
+
+        '.MuiSwitch-track': {
+          borderRadius: '100vw',
+        },
+        '.MuiSwitch-thumb': {
+          borderRadius: '100%',
+        },
+        '.MuiSwitch-root.MuiSwitch-sizeSmall': {
+          height: '20px',
+          width: '36px',
+          '.MuiSwitch-thumb': {
+            width: '16px',
+            height: '16px',
+          },
+        },
+      }}>
+      {dataList.map((item) => (
+        <Switch
+          key={item.key}
+          checked={!item.value}
+          labelProps={{
+            label: (
+              <Typography
+                color="text.primary"
+                sx={{
+                  fontSize: 14,
+                  display: 'flex',
+                  flexFlow: 'wrap',
+                  columnGap: 1,
+                  flex: 1,
+                }}>
+                {t('toPublic', { name: item.name })}
+              </Typography>
+            ),
+          }}
+          size="small"
+          onChange={(event: ChangeEvent<HTMLInputElement>) => handleChangeSwitch(item.key, event.target.checked)}
+        />
+      ))}
+    </Box>
+  );
+}