@arcblock/ux 2.11.16 → 2.11.18

package/lib/Locale/context.js

@@ -52,6 +52,7 @@ const getLanguages = arg => {
     name: '简体中文'
   }];
 };
+// FIXME: @wangshijun revert this before release
 const LocaleContext = /*#__PURE__*/createContext(null);
 const {
   Provider,

package/lib/SessionBlocklet/index.js

@@ -7,7 +7,7 @@ import WidgetsOutlineRoundedIcon from '@iconify-icons/material-symbols/widgets-o
 import { useMemoizedFn, useReactive } from 'ahooks';
 import Button from '../Button';
 import { temp as colors } from '../Colors';
-import { AUTH_SERVICE_PREFIX, NAVIGATION_URL } from '../Util/constant';
+import { BLOCKLET_SERVICE_PATH_PREFIX, NAVIGATION_URL } from '../Util/constant';
 import SessionPermission from '../SessionPermission';
 import { getTranslation } from '../Util';
 export default function SessionBlocklet({
@@ -111,7 +111,7 @@ export default function SessionBlocklet({
                   },
                   children: [item?.component?.did ? /*#__PURE__*/_jsx(Box, {
                     component: "img",
-                    src: `${AUTH_SERVICE_PREFIX}/blocklet/logo-bundle/${item.component.did}`,
+                    src: `${BLOCKLET_SERVICE_PATH_PREFIX}/blocklet/logo-bundle/${item.component.did}`,
                     sx: {
                       borderRadius: 2,
                       width: 50,

package/lib/SessionUser/components/logged-in.js

@@ -45,11 +45,22 @@ export default function LoggedIn({
   const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
     currentState.open = value;
   });
+
   // base64 img maybe have some blank char, need encodeURIComponent to transform it
   const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')));
+
+  // FIXME: @zhanghan this should be refactored into SessionContext
+  const oauth = session.useOAuth();
+  const passkey = typeof session.usePasskey === 'function' ? session.usePasskey() : null;
   const handleSwitchPassport = useMemoizedFn(() => {
     onTogglePopper(false);
-    session.switchPassport();
+    if (session?.user?.sourceProvider === 'passkey') {
+      passkey.switchPassport(session.user);
+    } else if (['google', 'apple', 'email', 'github'].includes(session?.user?.sourceProvider)) {
+      oauth.switchOAuthPassport(session.user);
+    } else {
+      session.switchPassport();
+    }
   });
   const handleSwitchAccount = useMemoizedFn(({
     userSession

package/lib/Util/constant.d.ts

@@ -1,7 +1,6 @@
 export declare const DEFAULT_TIMEOUT: number;
 export declare const DEFAULT_WINDOW_TIMEOUT: number;
-export declare const WELLKNOWN_SERVICE_PATH_PREFIX = "/.well-known/service";
-export declare const AUTH_SERVICE_PREFIX = "/.well-known/service";
+export declare const BLOCKLET_SERVICE_PATH_PREFIX = "/.well-known/service";
 export declare const SESSION_TOKEN_STORAGE_KEY = "login_token";
 export declare const REFRESH_TOKEN_STORAGE_KEY = "refresh_token";
 export declare const RELAY_SOCKET_PREFIX = "/.well-known/service";
@@ -22,6 +21,7 @@ export declare const LOGIN_PROVIDER: {
     GOOGLE: string;
     WALLET: string;
     NFT: string;
+    PASSKEY: string;
 };
 export declare const LOGIN_PROVIDER_NAME: {
     [x: string]: string;

package/lib/Util/constant.js

@@ -1,15 +1,14 @@
 export const DEFAULT_TIMEOUT = 5 * 60;
 export const DEFAULT_WINDOW_TIMEOUT = 30 * 60;
-export const WELLKNOWN_SERVICE_PATH_PREFIX = '/.well-known/service';
-export const AUTH_SERVICE_PREFIX = '/.well-known/service';
+export const BLOCKLET_SERVICE_PATH_PREFIX = '/.well-known/service';
 export const SESSION_TOKEN_STORAGE_KEY = 'login_token';
 export const REFRESH_TOKEN_STORAGE_KEY = 'refresh_token';
 export const RELAY_SOCKET_PREFIX = '/.well-known/service';
 export const API_DID_PREFIX = '/api/did';
-export const DASHBOARD_URL = `${AUTH_SERVICE_PREFIX}/admin`;
-export const PROFILE_URL = `${AUTH_SERVICE_PREFIX}/user`;
-export const DID_SPACE_URL = `${AUTH_SERVICE_PREFIX}/user/settings#storage`;
-export const NAVIGATION_URL = `${AUTH_SERVICE_PREFIX}/admin/navigation`;
+export const DASHBOARD_URL = `${BLOCKLET_SERVICE_PATH_PREFIX}/admin`;
+export const PROFILE_URL = `${BLOCKLET_SERVICE_PATH_PREFIX}/user`;
+export const DID_SPACE_URL = `${BLOCKLET_SERVICE_PATH_PREFIX}/user/settings#storage`;
+export const NAVIGATION_URL = `${BLOCKLET_SERVICE_PATH_PREFIX}/admin/navigation`;
 export const DID_PREFIX = 'did:abt:';
 export const PASSPORT_STATUS = {
   VALID: 'valid',
@@ -22,7 +21,8 @@ export const LOGIN_PROVIDER = {
   GITHUB: 'github',
   GOOGLE: 'google',
   WALLET: 'wallet',
-  NFT: 'nft'
+  NFT: 'nft',
+  PASSKEY: 'passkey'
 };
 export const LOGIN_PROVIDER_NAME = {
   // [LOGIN_PROVIDER.EMAIL]: 'Email',
@@ -31,7 +31,8 @@ export const LOGIN_PROVIDER_NAME = {
   [LOGIN_PROVIDER.GITHUB]: 'Github',
   [LOGIN_PROVIDER.GOOGLE]: 'Google',
   [LOGIN_PROVIDER.WALLET]: 'DID Wallet',
-  [LOGIN_PROVIDER.NFT]: 'NFT'
+  [LOGIN_PROVIDER.NFT]: 'NFT',
+  [LOGIN_PROVIDER.PASSKEY]: 'Passkey'
 };
 
 // HACK: 目前这里的键值不能使用 [LOGIN_PROVIDER.AUTH0] 形式，否则会影响 ts 的 keyof typeof OAUTH_PROVIDER 来获取键值作为类型的判断

package/lib/Util/index.js

@@ -4,7 +4,7 @@ import padStart from 'lodash/padStart';
 import { getDIDMotifInfo, colors } from '@arcblock/did-motif';
 import isNil from 'lodash/isNil';
 import pRetry from 'p-retry';
-import { DID_PREFIX, WELLKNOWN_SERVICE_PATH_PREFIX } from './constant';
+import { DID_PREFIX, BLOCKLET_SERVICE_PATH_PREFIX } from './constant';
 let dateTool = null;
 export function parseQuery(str) {
   return str.replace(/^\?/, '').split('&').map(x => x.split('=')).filter(([key]) => !!key).reduce((memo, x) => {
@@ -293,7 +293,7 @@ export const getUserAvatar = (avatar, size = 48) => {
   if (!avatar) {
     return avatar;
   }
-  if (avatar.indexOf(WELLKNOWN_SERVICE_PATH_PREFIX) >= 0) {
+  if (avatar.indexOf(BLOCKLET_SERVICE_PATH_PREFIX) >= 0) {
     return appendParams(avatar, {
       imageFilter: 'resize',
       w: size,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.11.16",
+  "version": "2.11.18",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,12 +68,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "1216fcd112e02c4135f5d748fe002cafaaebcfd9",
+  "gitHead": "68ac427a17804a71e469f6fc61b28c87ecb9e40d",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.11.16",
-    "@arcblock/nft-display": "^2.11.16",
-    "@arcblock/react-hooks": "^2.11.16",
+    "@arcblock/icons": "^2.11.18",
+    "@arcblock/nft-display": "^2.11.18",
+    "@arcblock/react-hooks": "^2.11.18",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Locale/context.tsx

@@ -78,6 +78,7 @@ export interface LocaleContextType {
   languages: { code: string; name: string }[];
 }
 
+// FIXME: @wangshijun revert this before release
 const LocaleContext = createContext<LocaleContextType>(null!);
 const { Provider, Consumer } = LocaleContext;
 

package/src/SessionBlocklet/index.tsx

@@ -18,7 +18,7 @@ import { useMemoizedFn, useReactive } from 'ahooks';
 
 import Button from '../Button';
 import { temp as colors } from '../Colors';
-import { AUTH_SERVICE_PREFIX, NAVIGATION_URL } from '../Util/constant';
+import { BLOCKLET_SERVICE_PATH_PREFIX, NAVIGATION_URL } from '../Util/constant';
 import SessionPermission from '../SessionPermission';
 import { getTranslation } from '../Util';
 import type { Locale } from '../type';
@@ -119,7 +119,7 @@ export default function SessionBlocklet({ session, locale = 'zh', size = 24 }: S
                         {item?.component?.did ? (
                           <Box
                             component="img"
-                            src={`${AUTH_SERVICE_PREFIX}/blocklet/logo-bundle/${item.component.did}`}
+                            src={`${BLOCKLET_SERVICE_PATH_PREFIX}/blocklet/logo-bundle/${item.component.did}`}
                             sx={{
                               borderRadius: 2,
                               width: 50,

package/src/SessionUser/components/logged-in.tsx

@@ -68,12 +68,24 @@ export default function LoggedIn({
   const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
     currentState.open = value;
   });
+
   // base64 img maybe have some blank char, need encodeURIComponent to transform it
   const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')));
+
+  // FIXME: @zhanghan this should be refactored into SessionContext
+  const oauth = session.useOAuth();
+  const passkey = typeof session.usePasskey === 'function' ? session.usePasskey() : null;
   const handleSwitchPassport = useMemoizedFn(() => {
     onTogglePopper(false);
-    session.switchPassport();
+    if (session?.user?.sourceProvider === 'passkey') {
+      passkey.switchPassport(session.user);
+    } else if (['google', 'apple', 'email', 'github'].includes(session?.user?.sourceProvider)) {
+      oauth.switchOAuthPassport(session.user);
+    } else {
+      session.switchPassport();
+    }
   });
+
   const handleSwitchAccount = useMemoizedFn(({ userSession } = {}) => {
     return new Promise<void>((resolve) => {
       const options: Record<string, any> = {};

package/src/Util/constant.ts

@@ -1,17 +1,16 @@
 export const DEFAULT_TIMEOUT = 5 * 60;
 export const DEFAULT_WINDOW_TIMEOUT = 30 * 60;
-export const WELLKNOWN_SERVICE_PATH_PREFIX = '/.well-known/service';
-export const AUTH_SERVICE_PREFIX = '/.well-known/service';
+export const BLOCKLET_SERVICE_PATH_PREFIX = '/.well-known/service';
 export const SESSION_TOKEN_STORAGE_KEY = 'login_token';
 export const REFRESH_TOKEN_STORAGE_KEY = 'refresh_token';
 
 export const RELAY_SOCKET_PREFIX = '/.well-known/service';
 export const API_DID_PREFIX = '/api/did';
 
-export const DASHBOARD_URL = `${AUTH_SERVICE_PREFIX}/admin`;
-export const PROFILE_URL = `${AUTH_SERVICE_PREFIX}/user`;
-export const DID_SPACE_URL = `${AUTH_SERVICE_PREFIX}/user/settings#storage`;
-export const NAVIGATION_URL = `${AUTH_SERVICE_PREFIX}/admin/navigation`;
+export const DASHBOARD_URL = `${BLOCKLET_SERVICE_PATH_PREFIX}/admin`;
+export const PROFILE_URL = `${BLOCKLET_SERVICE_PATH_PREFIX}/user`;
+export const DID_SPACE_URL = `${BLOCKLET_SERVICE_PATH_PREFIX}/user/settings#storage`;
+export const NAVIGATION_URL = `${BLOCKLET_SERVICE_PATH_PREFIX}/admin/navigation`;
 
 export const DID_PREFIX = 'did:abt:';
 
@@ -28,6 +27,7 @@ export const LOGIN_PROVIDER = {
   GOOGLE: 'google',
   WALLET: 'wallet',
   NFT: 'nft',
+  PASSKEY: 'passkey',
 };
 
 export const LOGIN_PROVIDER_NAME = {
@@ -38,6 +38,7 @@ export const LOGIN_PROVIDER_NAME = {
   [LOGIN_PROVIDER.GOOGLE]: 'Google',
   [LOGIN_PROVIDER.WALLET]: 'DID Wallet',
   [LOGIN_PROVIDER.NFT]: 'NFT',
+  [LOGIN_PROVIDER.PASSKEY]: 'Passkey',
 };
 
 // HACK: 目前这里的键值不能使用 [LOGIN_PROVIDER.AUTH0] 形式，否则会影响 ts 的 keyof typeof OAUTH_PROVIDER 来获取键值作为类型的判断

package/src/Util/index.ts

@@ -4,7 +4,7 @@ import padStart from 'lodash/padStart';
 import { getDIDMotifInfo, colors } from '@arcblock/did-motif';
 import isNil from 'lodash/isNil';
 import pRetry from 'p-retry';
-import { DID_PREFIX, WELLKNOWN_SERVICE_PATH_PREFIX } from './constant';
+import { DID_PREFIX, BLOCKLET_SERVICE_PATH_PREFIX } from './constant';
 import type { $TSFixMe, Locale } from '../type';
 
 let dateTool: $TSFixMe | null = null;
@@ -364,7 +364,7 @@ export const getUserAvatar = (avatar: string, size = 48) => {
     return avatar;
   }
 
-  if (avatar.indexOf(WELLKNOWN_SERVICE_PATH_PREFIX) >= 0) {
+  if (avatar.indexOf(BLOCKLET_SERVICE_PATH_PREFIX) >= 0) {
     return appendParams(avatar, {
       imageFilter: 'resize',
       w: size,