@blocklet/ui-react 2.10.31 → 2.10.32

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

@@ -53,6 +53,8 @@ export type User = UserPublicInfo & {
     locale?: string;
     url: string;
     inviter?: string;
+    emailVerified?: boolean;
+    phoneVerified?: boolean;
 };
 export type UserCenterTab = {
     value: string;
@@ -95,13 +97,15 @@ export type CreatePassportProps = {
     issuerDid: string;
     issuerAvatarUrl: string;
     ownerDid: string;
-    ownerName: string;
+    ownerName?: string;
     ownerAvatarUrl: string;
     preferredColor?: string;
     revoked?: boolean;
     isDataUrl?: boolean;
     width?: string;
     height?: string;
+    scope?: string;
+    role?: string;
 };
 export type BlockletMetaProps = {
     appLogo?: React.ReactNode;

package/lib/UserCenter/components/config-inviter.d.ts

@@ -0,0 +1,4 @@
+import { User } from '../../@types';
+export default function ConfigInviter({ user }: {
+    user: User;
+}): import("react").JSX.Element | "-";

package/lib/UserCenter/components/config-inviter.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { Box, TextField } from "@mui/material";
+import { useMemoizedFn, useReactive } from "ahooks";
+import Toast from "@arcblock/ux/lib/Toast";
+import { client } from "../../libs/client.js";
+import { formatAxiosError } from "../libs/utils.js";
+export default function ConfigInviter({ user }) {
+  const currentState = useReactive({
+    inviter: user?.inviter,
+    loading: false
+  });
+  const handleChange = useMemoizedFn(async (e) => {
+    try {
+      const { value } = e.target;
+      currentState.loading = true;
+      await client.user.saveProfile({ inviter: value });
+      currentState.inviter = value;
+    } catch (err) {
+      Toast.error(formatAxiosError(err));
+    } finally {
+      currentState.loading = false;
+    }
+  });
+  if (!user) {
+    return "-";
+  }
+  const inviteEnabled = !!window.blocklet?.settings?.invite?.enabled;
+  if (!inviteEnabled) {
+    return "-";
+  }
+  const hasInviter = !!user.inviter;
+  if (hasInviter) {
+    return "-";
+  }
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(TextField, { size: "small", fullWidth: true, label: "", value: currentState.inviter, onChange: handleChange }) });
+}

package/lib/UserCenter/components/config-profile.js

@@ -3,12 +3,13 @@ import { Box, MenuItem, Select, LinearProgress } from "@mui/material";
 import { useMemoizedFn, useReactive } from "ahooks";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { sleep } from "@arcblock/ux/lib/Util";
+import Toast from "@arcblock/ux/lib/Toast";
 import { translations } from "../libs/locales.js";
 import { client } from "../../libs/client.js";
+import { formatAxiosError } from "../libs/utils.js";
 const languages = [
-  { label: "English", value: "en" },
-  { label: "\u4E2D\u6587", value: "zh" }
+  { name: "English", code: "en" },
+  { name: "\u4E2D\u6587", code: "zh" }
 ];
 export default function ConfigProfile({ user, onSave }) {
   const { locale, changeLocale } = useLocaleContext();
@@ -23,15 +24,14 @@ export default function ConfigProfile({ user, onSave }) {
     try {
       const { value } = e.target;
       currentState.loading = true;
-      await Promise.all([
-        client.user.saveProfile({
-          locale: value
-        }),
-        sleep(350)
-      ]);
+      await client.user.saveProfile({
+        locale: value
+      });
       await onSave("profile");
       changeLocale(value);
       currentState.locale = value;
+    } catch (err) {
+      Toast.error(formatAxiosError(err));
     } finally {
       currentState.loading = false;
     }
@@ -61,7 +61,7 @@ export default function ConfigProfile({ user, onSave }) {
               }
             }
           ),
-          /* @__PURE__ */ jsx(Select, { fullWidth: true, value: currentState.locale, onChange: handleChange, size: "small", children: languages.map((x) => /* @__PURE__ */ jsx(MenuItem, { value: x.value, children: x.label })) })
+          /* @__PURE__ */ jsx(Select, { fullWidth: true, value: currentState.locale, onChange: handleChange, size: "small", children: (window.blocklet.languages || languages).map((x) => /* @__PURE__ */ jsx(MenuItem, { value: x.code, children: x.name })) })
         ] })
       ]
     }

package/lib/UserCenter/components/user-info/user-info-item.d.ts

@@ -5,6 +5,7 @@ type TUserInfoItemProps = {
         title: string;
         content: any;
     };
+    verified?: boolean;
 };
-export default function UserInfoItem({ data, ...rest }: TUserInfoItemProps & BoxProps): import("react").JSX.Element;
+export default function UserInfoItem({ data, verified, ...rest }: TUserInfoItemProps & BoxProps): import("react").JSX.Element;
 export {};

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

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Typography } from "@mui/material";
+import VerifiedIcon from "@mui/icons-material/Verified";
 import { temp as colors } from "@arcblock/ux/lib/Colors";
-export default function UserInfoItem({ data, ...rest }) {
+export default function UserInfoItem({ data, verified, ...rest }) {
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -30,17 +31,20 @@ export default function UserInfoItem({ data, ...rest }) {
             ]
           }
         ),
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            sx: {
-              color: colors.textSubtitle,
-              whiteSpace: "pre-wrap",
-              fontSize: "14px"
-            },
-            children: data.content
-          }
-        )
+        /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              sx: {
+                color: colors.textSubtitle,
+                whiteSpace: "pre-wrap",
+                fontSize: "14px"
+              },
+              children: data.content
+            }
+          ),
+          verified && /* @__PURE__ */ jsx(VerifiedIcon, { color: "success", style: { fontSize: 16, marginLeft: 4 } })
+        ] })
       ]
     }
   );

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

@@ -4,6 +4,7 @@ import { Icon } from "@iconify/react";
 import { useMemoizedFn, useCreation } from "ahooks";
 import DID from "@arcblock/ux/lib/DID";
 import MailOutlineRoundedIcon from "@iconify-icons/material-symbols/mail-outline-rounded";
+import PhoneOutlineRoundedIcon from "@iconify-icons/material-symbols/phone-android-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";
@@ -31,7 +32,14 @@ export default function UserInfo({
     userInfoListData.push({
       icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: MailOutlineRoundedIcon }),
       title: t("email"),
-      content: user?.email || t("emptyField")
+      content: user?.email || t("emptyField"),
+      verified: user?.emailVerified
+    });
+    userInfoListData.push({
+      icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: PhoneOutlineRoundedIcon }),
+      title: t("phone"),
+      content: user?.phone || t("emptyField"),
+      verified: user?.phoneVerified
     });
     userInfoListData.push({
       icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: ScheduleOutlineRoundedIcon }),
@@ -75,7 +83,7 @@ export default function UserInfo({
         gap: 1.5,
         ...rest?.sx
       },
-      children: userInfoListData.map((item) => /* @__PURE__ */ jsx(UserInfoItem, { data: item, sx: { flex: 1 } }, item.title))
+      children: userInfoListData.map((item) => /* @__PURE__ */ jsx(UserInfoItem, { data: item, sx: { flex: 1 }, verified: item.verified }, item.title))
     }
   );
 }

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

@@ -5,6 +5,7 @@ export declare const translations: {
         passport: string;
         notification: string;
         email: string;
+        phone: string;
         lastLogin: string;
         lastLoginAt: string;
         lastLoginIp: string;
@@ -96,6 +97,7 @@ export declare const translations: {
         passport: string;
         notification: string;
         email: string;
+        phone: string;
         lastLogin: string;
         lastLoginAt: string;
         lastLoginIp: string;

package/lib/UserCenter/libs/locales.js

@@ -5,6 +5,7 @@ export const translations = {
     passport: "\u901A\u884C\u8BC1",
     notification: "\u901A\u77E5",
     email: "\u90AE\u7BB1\u5730\u5740",
+    phone: "\u7535\u8BDD\u53F7\u7801",
     lastLogin: "\u4E0A\u6B21\u767B\u5F55",
     lastLoginAt: "\u4E0A\u6B21\u767B\u5F55\u65F6\u95F4",
     lastLoginIp: "\u4E0A\u6B21\u767B\u5F55\u5730\u5740",
@@ -92,10 +93,11 @@ export const translations = {
   },
   en: {
     settings: "Settings",
-    noPassport: "No passport founded",
+    noPassport: "No passport yet",
     passport: "Passport",
     notification: "Notification",
     email: "Email",
+    phone: "Phone",
     lastLogin: "Last Login & IP",
     lastLoginAt: "Last Login",
     lastLoginIp: "Last IP",
@@ -112,7 +114,7 @@ export const translations = {
     saveFailed: "Save failed",
     webhookTested: "Test message sent",
     done: "Done",
-    emptyField: "Empty field",
+    emptyField: "None",
     notificationManagement: "Notification",
     privacyManagement: "Privacy",
     storageManagement: "Storage",

package/lib/UserCenter/libs/utils.js

@@ -1,5 +1,5 @@
 import { joinURL } from "ufo";
-import { createPassportSvg as _createPassportSvg } from "@arcblock/ux/lib/Util/passport";
+import { createPassportSvg as _createPassportSvg, createKycSvg as _createKycSvg } from "@arcblock/ux/lib/Util/passport";
 import { AUTH_SERVICE_PREFIX } from "@arcblock/ux/lib/Util/constant";
 export const formatAxiosError = (err) => {
   const { response } = err;
@@ -8,7 +8,16 @@ export const formatAxiosError = (err) => {
   }
   return err.message;
 };
-export const createPassportSvg = (props) => _createPassportSvg({
-  ...props,
-  issuerAvatarUrl: joinURL(window.location.origin, AUTH_SERVICE_PREFIX, "/blocklet/logo")
-});
+export const createPassportSvg = (props) => {
+  if (props.scope === "kyc") {
+    return _createKycSvg({
+      ...props,
+      issuerAvatarUrl: joinURL(window.location.origin, AUTH_SERVICE_PREFIX, "/blocklet/logo"),
+      type: props.role
+    });
+  }
+  return _createPassportSvg({
+    ...props,
+    issuerAvatarUrl: joinURL(window.location.origin, AUTH_SERVICE_PREFIX, "/blocklet/logo")
+  });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.10.31",
+  "version": "2.10.32",
   "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.31",
-    "@arcblock/react-hooks": "^2.10.31",
+    "@arcblock/bridge": "^2.10.32",
+    "@arcblock/react-hooks": "^2.10.32",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify/react": "^4.1.1",
@@ -79,5 +79,5 @@
     "jest": "^28.1.3",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "7936b9e4ade01bef0ca85658f9d44812d20b254c"
+  "gitHead": "0da245771d21b08f036d4c8f872b61995538c411"
 }

package/src/@types/index.ts

@@ -59,6 +59,8 @@ export type User = UserPublicInfo & {
   locale?: string;
   url: string;
   inviter?: string;
+  emailVerified?: boolean;
+  phoneVerified?: boolean;
 };
 
 export type UserCenterTab = {
@@ -108,13 +110,15 @@ export type CreatePassportProps = {
   issuerDid: string;
   issuerAvatarUrl: string;
   ownerDid: string;
-  ownerName: string;
+  ownerName?: string;
   ownerAvatarUrl: string;
   preferredColor?: string;
   revoked?: boolean;
   isDataUrl?: boolean;
   width?: string;
   height?: string;
+  scope?: string;
+  role?: string;
 };
 
 export type BlockletMetaProps = {

package/src/UserCenter/components/config-inviter.tsx

@@ -0,0 +1,47 @@
+import { Box, TextField } from '@mui/material';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import Toast from '@arcblock/ux/lib/Toast';
+
+import { client } from '../../libs/client';
+import { User } from '../../@types';
+import { formatAxiosError } from '../libs/utils';
+
+export default function ConfigInviter({ user }: { user: User }) {
+  const currentState = useReactive({
+    inviter: user?.inviter,
+    loading: false,
+  });
+
+  const handleChange = useMemoizedFn(async (e) => {
+    try {
+      const { value } = e.target;
+      currentState.loading = true;
+      await client.user.saveProfile({ inviter: value });
+      currentState.inviter = value;
+    } catch (err) {
+      Toast.error(formatAxiosError(err as any));
+    } finally {
+      currentState.loading = false;
+    }
+  });
+
+  if (!user) {
+    return '-';
+  }
+
+  const inviteEnabled = !!window.blocklet?.settings?.invite?.enabled;
+  if (!inviteEnabled) {
+    return '-';
+  }
+
+  const hasInviter = !!user.inviter;
+  if (hasInviter) {
+    return '-';
+  }
+
+  return (
+    <Box>
+      <TextField size="small" fullWidth label="" value={currentState.inviter} onChange={handleChange} />
+    </Box>
+  );
+}

package/src/UserCenter/components/config-profile.tsx

@@ -2,16 +2,16 @@ import { Box, MenuItem, Select, SelectChangeEvent, LinearProgress } from '@mui/m
 import { useMemoizedFn, useReactive } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { sleep } from '@arcblock/ux/lib/Util';
+import Toast from '@arcblock/ux/lib/Toast';
 
 import { translations } from '../libs/locales';
 import { client } from '../../libs/client';
 import { User } from '../../@types';
+import { formatAxiosError } from '../libs/utils';
 
-// FIXME: @zhanghan 目前仅支持中英文，后续需要支持更多语言（从 blocklet.languages 中获取）
 const languages = [
-  { label: 'English', value: 'en' },
-  { label: '中文', value: 'zh' },
+  { name: 'English', code: 'en' },
+  { name: '中文', code: 'zh' },
 ];
 
 export default function ConfigProfile({ user, onSave }: { user: User; onSave: (type: 'profile') => void }) {
@@ -28,15 +28,14 @@ export default function ConfigProfile({ user, onSave }: { user: User; onSave: (t
     try {
       const { value } = e.target;
       currentState.loading = true;
-      await Promise.all([
-        client.user.saveProfile({
-          locale: value,
-        }),
-        sleep(350),
-      ]);
+      await client.user.saveProfile({
+        locale: value,
+      });
       await onSave('profile');
       changeLocale(value);
       currentState.locale = value;
+    } catch (err) {
+      Toast.error(formatAxiosError(err as any));
     } finally {
       currentState.loading = false;
     }
@@ -62,8 +61,8 @@ export default function ConfigProfile({ user, onSave }: { user: User; onSave: (t
           }}
         />
         <Select fullWidth value={currentState.locale} onChange={handleChange} size="small">
-          {languages.map((x) => (
-            <MenuItem value={x.value}>{x.label}</MenuItem>
+          {(window.blocklet.languages || languages).map((x: { name: string; code: string }) => (
+            <MenuItem value={x.code}>{x.name}</MenuItem>
           ))}
         </Select>
       </Box>

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

@@ -1,4 +1,5 @@
 import { Box, BoxProps, Typography } from '@mui/material';
+import VerifiedIcon from '@mui/icons-material/Verified';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
 
 type TUserInfoItemProps = {
@@ -7,9 +8,10 @@ type TUserInfoItemProps = {
     title: string;
     content: any;
   };
+  verified?: boolean;
 };
 
-export default function UserInfoItem({ data, ...rest }: TUserInfoItemProps & BoxProps) {
+export default function UserInfoItem({ data, verified, ...rest }: TUserInfoItemProps & BoxProps) {
   return (
     <Box
       {...rest}
@@ -31,14 +33,17 @@ export default function UserInfoItem({ data, ...rest }: TUserInfoItemProps & Box
         {data.icon}
         {data.title}
       </Typography>
-      <Typography
-        sx={{
-          color: colors.textSubtitle,
-          whiteSpace: 'pre-wrap',
-          fontSize: '14px',
-        }}>
-        {data.content}
-      </Typography>
+      <Box display="flex" flexDirection="row" alignItems="center">
+        <Typography
+          sx={{
+            color: colors.textSubtitle,
+            whiteSpace: 'pre-wrap',
+            fontSize: '14px',
+          }}>
+          {data.content}
+        </Typography>
+        {verified && <VerifiedIcon color="success" style={{ fontSize: 16, marginLeft: 4 }} />}
+      </Box>
     </Box>
   );
 }

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

@@ -4,6 +4,7 @@ import { Icon } from '@iconify/react';
 import { useMemoizedFn, useCreation } from 'ahooks';
 import DID from '@arcblock/ux/lib/DID';
 import MailOutlineRoundedIcon from '@iconify-icons/material-symbols/mail-outline-rounded';
+import PhoneOutlineRoundedIcon from '@iconify-icons/material-symbols/phone-android-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';
@@ -40,6 +41,13 @@ export default function UserInfo({
       icon: <Icon fontSize={16} icon={MailOutlineRoundedIcon} />,
       title: t('email'),
       content: user?.email || t('emptyField'),
+      verified: user?.emailVerified,
+    });
+    userInfoListData.push({
+      icon: <Icon fontSize={16} icon={PhoneOutlineRoundedIcon} />,
+      title: t('phone'),
+      content: user?.phone || t('emptyField'),
+      verified: user?.phoneVerified,
     });
     userInfoListData.push({
       icon: <Icon fontSize={16} icon={ScheduleOutlineRoundedIcon} />,
@@ -86,7 +94,7 @@ export default function UserInfo({
         ...rest?.sx,
       }}>
       {userInfoListData.map((item) => (
-        <UserInfoItem key={item.title} data={item} sx={{ flex: 1 }} />
+        <UserInfoItem key={item.title} data={item} sx={{ flex: 1 }} verified={item.verified} />
       ))}
     </Box>
   );

package/src/UserCenter/libs/locales.ts

@@ -5,6 +5,7 @@ export const translations = {
     passport: '通行证',
     notification: '通知',
     email: '邮箱地址',
+    phone: '电话号码',
     lastLogin: '上次登录',
     lastLoginAt: '上次登录时间',
     lastLoginIp: '上次登录地址',
@@ -93,10 +94,11 @@ export const translations = {
   },
   en: {
     settings: 'Settings',
-    noPassport: 'No passport founded',
+    noPassport: 'No passport yet',
     passport: 'Passport',
     notification: 'Notification',
     email: 'Email',
+    phone: 'Phone',
     lastLogin: 'Last Login & IP',
     lastLoginAt: 'Last Login',
     lastLoginIp: 'Last IP',
@@ -113,7 +115,7 @@ export const translations = {
     saveFailed: 'Save failed',
     webhookTested: 'Test message sent',
     done: 'Done',
-    emptyField: 'Empty field',
+    emptyField: 'None',
     notificationManagement: 'Notification',
     privacyManagement: 'Privacy',
     storageManagement: 'Storage',

package/src/UserCenter/libs/utils.ts

@@ -1,6 +1,6 @@
 import type { AxiosError } from 'axios';
 import { joinURL } from 'ufo';
-import { createPassportSvg as _createPassportSvg } from '@arcblock/ux/lib/Util/passport';
+import { createPassportSvg as _createPassportSvg, createKycSvg as _createKycSvg } from '@arcblock/ux/lib/Util/passport';
 import { AUTH_SERVICE_PREFIX } from '@arcblock/ux/lib/Util/constant';
 import { CreatePassportProps } from '../../@types';
 
@@ -14,8 +14,17 @@ export const formatAxiosError = (err: AxiosError) => {
   return err.message;
 };
 
-export const createPassportSvg = (props: CreatePassportProps) =>
-  _createPassportSvg({
+export const createPassportSvg = (props: CreatePassportProps) => {
+  if (props.scope === 'kyc') {
+    return _createKycSvg({
+      ...props,
+      issuerAvatarUrl: joinURL(window.location.origin, AUTH_SERVICE_PREFIX, '/blocklet/logo'),
+      type: props.role,
+    });
+  }
+
+  return _createPassportSvg({
     ...props,
     issuerAvatarUrl: joinURL(window.location.origin, AUTH_SERVICE_PREFIX, '/blocklet/logo'),
   });
+};