@blocklet/ui-react 2.11.16 → 2.11.18

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

@@ -77,6 +77,7 @@ export type Session = {
     switchPassport: any;
     refresh: Function;
     useOAuth: Function;
+    usePasskey: Function;
 };
 export type WebhookType = 'slack' | 'api';
 export type WebhookItemData = {

package/lib/BlockletStudio/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { WELLKNOWN_SERVICE_PATH_PREFIX } from "@arcblock/ux/lib/Util/constant";
+import { BLOCKLET_SERVICE_PATH_PREFIX } from "@arcblock/ux/lib/Util/constant";
 import { useEffect, useRef, useState } from "react";
 import { joinURL } from "ufo";
 function parseUrl(uri, params) {
@@ -71,7 +71,7 @@ function BlockletStudio({
     return null;
   }
   const src = parseUrl(
-    joinURL(window.location.origin, WELLKNOWN_SERVICE_PATH_PREFIX, "/embed/resources", componentDid, "/publish"),
+    joinURL(window.location.origin, BLOCKLET_SERVICE_PATH_PREFIX, "/embed/resources", componentDid, "/publish"),
     {
       title,
       logo,

package/lib/ComponentInstaller/use-component-installed.js

@@ -1,4 +1,4 @@
-import { AUTH_SERVICE_PREFIX } from '@arcblock/did-connect/lib/constant';
+import { BLOCKLET_SERVICE_PATH_PREFIX } from '@arcblock/did-connect/lib/constant';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { joinURL } from 'ufo';
 
@@ -39,7 +39,7 @@ function useComponentInstalled({ did, onInstalled, onError }) {
     item.storeUrl = joinURL(item.meta.homepage, 'blocklets', item.meta.did);
     item.installUrl = joinURL(
       window.blocklet.appUrl,
-      AUTH_SERVICE_PREFIX,
+      BLOCKLET_SERVICE_PATH_PREFIX,
       `/admin/components?install-component=${item.meta.did}`
     );
   });

package/lib/ComponentManager/components/add-component.js

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useContext } from "react";
 import Button from "@arcblock/ux/lib/Button";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { WELLKNOWN_SERVICE_PATH_PREFIX } from "@arcblock/ux/lib/Util/constant";
+import { BLOCKLET_SERVICE_PATH_PREFIX } from "@arcblock/ux/lib/Util/constant";
 import { useMemoizedFn, useReactive } from "ahooks";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { joinURL, withQuery } from "ufo";
@@ -32,7 +32,7 @@ export default function AddComponent({
     loading: false,
     showDialog: false
   });
-  const importUrl = withQuery(joinURL(WELLKNOWN_SERVICE_PATH_PREFIX, "embed/resources", componentDid, "add"), {
+  const importUrl = withQuery(joinURL(BLOCKLET_SERVICE_PATH_PREFIX, "embed/resources", componentDid, "add"), {
     resourceDid,
     resourceType,
     mode: "dialog",

package/lib/ComponentManager/components/publish-component.js

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import Button from "@arcblock/ux/lib/Button";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { WELLKNOWN_SERVICE_PATH_PREFIX } from "@arcblock/ux/lib/Util/constant";
+import { BLOCKLET_SERVICE_PATH_PREFIX } from "@arcblock/ux/lib/Util/constant";
 import { useMemoizedFn, useReactive } from "ahooks";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
@@ -24,7 +24,7 @@ export default function PublishComponent({
     showDialog: false,
     loading: false
   });
-  const exportUrl = `${WELLKNOWN_SERVICE_PATH_PREFIX}/embed/resources/${componentDid}/publish?mode=dialog`;
+  const exportUrl = `${BLOCKLET_SERVICE_PATH_PREFIX}/embed/resources/${componentDid}/publish?mode=dialog`;
   const handleClose = useMemoizedFn(() => {
     currentState.showDialog = false;
     onClose?.();

package/lib/UserCenter/components/storage/action.d.ts

@@ -1,4 +1,4 @@
-import { SpaceGateway, SpaceStatus } from '@blocklet/did-space-react';
+import { SpaceGateway } from '@blocklet/did-space-react';
 import { Session } from '../../../@types';
 declare function Action({ session, spaceGateway, spaceStatus, refresh, }: {
     session: Session;

package/lib/UserCenter/components/third-party-login/index.js

@@ -1,11 +1,12 @@
-import { Fragment, jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import noop from "lodash/noop";
 import { useContext, useState } from "react";
 import { Box } from "@mui/material";
 import { useAsyncEffect, useCreation } from "ahooks";
 import { getConnectedAccounts, getSourceProvider } from "@arcblock/ux/lib/SessionUser/libs/utils";
 import { LOGIN_PROVIDER } from "@arcblock/ux/lib/Util/constant";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
-import Empty from "@arcblock/ux/lib/Empty";
+import { PasskeyActions } from "@arcblock/did-connect/lib/Passkey";
 import ThirdPartyItem from "./third-party-item.js";
 export default function ThirdPartyLogin({ user }) {
   const { session } = useContext(SessionContext);
@@ -26,7 +27,7 @@ export default function ThirdPartyLogin({ user }) {
     }).filter((x) => x.enabled);
     return oauthList;
   }, [oauthConfigs]);
-  const normalizedAccounts = useCreation(() => {
+  const oauthAccounts = useCreation(() => {
     const connectedAccounts = getConnectedAccounts(user);
     let removeAuth0 = false;
     let patchProvider = "";
@@ -95,6 +96,30 @@ export default function ThirdPartyLogin({ user }) {
     });
     return transformedProviders;
   }, [user?.connectedAccounts, availableProviders]);
+  const passkeyAccounts = useCreation(() => {
+    const connectedAccounts = getConnectedAccounts(user);
+    const passkeyConnectedAccount = connectedAccounts.filter(
+      (x) => x.provider === LOGIN_PROVIDER.PASSKEY && x.did !== user?.did
+    );
+    return passkeyConnectedAccount.map((x) => {
+      return {
+        ...x,
+        _bind: true
+      };
+    });
+  }, [user]);
+  const walletAccounts = useCreation(() => {
+    const connectedAccounts = getConnectedAccounts(user);
+    const walletConnectedAccount = connectedAccounts.filter(
+      (x) => x.provider === LOGIN_PROVIDER.WALLET && x.did !== user?.did
+    );
+    return walletConnectedAccount.map((x) => {
+      return {
+        ...x,
+        _mainProvider: true
+      };
+    });
+  }, [user]);
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -103,9 +128,40 @@ export default function ThirdPartyLogin({ user }) {
         display: "grid",
         gridTemplateColumns: "1fr min-content"
       },
-      children: !normalizedAccounts.length ? /* @__PURE__ */ jsx(Empty, {}) : /* @__PURE__ */ jsx(Fragment, { children: normalizedAccounts.map((account) => {
-        return /* @__PURE__ */ jsx(ThirdPartyItem, { item: account }, account?.provider);
-      }) })
+      children: !oauthAccounts.length && !passkeyAccounts.length && !walletAccounts.length ? /* @__PURE__ */ jsx(
+        PasskeyActions,
+        {
+          behavior: "only-new",
+          action: "connect",
+          createMode: "connect",
+          createButtonText: "Add Passkey",
+          onSuccess: noop,
+          onError: noop,
+          dense: true
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        oauthAccounts.map((account) => {
+          return /* @__PURE__ */ jsx(ThirdPartyItem, { item: account }, account?.provider);
+        }),
+        passkeyAccounts.map((account) => {
+          return /* @__PURE__ */ jsx(ThirdPartyItem, { item: account }, account.id);
+        }),
+        walletAccounts.map((account) => {
+          return /* @__PURE__ */ jsx(ThirdPartyItem, { item: account }, account.id);
+        }),
+        /* @__PURE__ */ jsx(
+          PasskeyActions,
+          {
+            behavior: "only-new",
+            action: "connect",
+            createMode: "connect",
+            createButtonText: "Add Passkey",
+            onSuccess: noop,
+            onError: noop,
+            dense: true
+          }
+        )
+      ] })
     }
   );
 }

package/lib/UserCenter/components/third-party-login/third-party-item.d.ts

@@ -5,6 +5,7 @@ export default function ThirdPartyItem({ item, }: {
         did: string;
         pk: string;
         userInfo?: OAuthAccount['userInfo'];
+        id: string;
         _bind?: boolean;
         _rawProvider?: string;
         _mainProvider?: boolean;

package/lib/UserCenter/components/third-party-login/third-party-item.js

@@ -11,6 +11,8 @@ import { useConfirm } from "@arcblock/ux/lib/Dialog";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import MailOutlineRoundedIcon from "@iconify-icons/material-symbols/mail-outline-rounded";
 import InfoOutlineRoundedIcon from "@iconify-icons/material-symbols/info-outline-rounded";
+import PasskeyIcon from "@iconify-icons/material-symbols/passkey";
+import WalletIcon from "@iconify-icons/material-symbols/wallet-sharp";
 import AppleIcon from "@iconify-icons/logos/apple";
 import GithubIcon from "@iconify-icons/logos/github-icon";
 import GoogleIcon from "@iconify-icons/logos/google-icon";
@@ -18,7 +20,7 @@ import { SessionContext } from "@arcblock/did-connect/lib/Session";
 import { useContext } from "react";
 import pick from "lodash/pick";
 import { getFederatedEnabled, getMaster } from "@arcblock/ux/lib/Util/federated";
-import { LOGIN_PROVIDER, OAUTH_PROVIDER } from "@arcblock/ux/lib/Util/constant";
+import { LOGIN_PROVIDER, LOGIN_PROVIDER_NAME } from "@arcblock/ux/lib/Util/constant";
 import { translations } from "../../libs/locales.js";
 export default function ThirdPartyItem({
   item
@@ -33,20 +35,43 @@ export default function ThirdPartyItem({
   });
   const { session } = useContext(SessionContext);
   const { bindOAuth, unbindOAuth, setBaseUrl, baseUrl: oauthBaseUrl } = session.useOAuth();
+  const { disconnectPasskey } = session.usePasskey();
   const iconMap = {
     // email: MailOutlineRoundedIcon,
     [LOGIN_PROVIDER.AUTH0]: MailOutlineRoundedIcon,
     [LOGIN_PROVIDER.APPLE]: AppleIcon,
     [LOGIN_PROVIDER.GITHUB]: GithubIcon,
-    [LOGIN_PROVIDER.GOOGLE]: GoogleIcon
+    [LOGIN_PROVIDER.GOOGLE]: GoogleIcon,
+    [LOGIN_PROVIDER.PASSKEY]: PasskeyIcon,
+    [LOGIN_PROVIDER.WALLET]: WalletIcon
   };
   const icon = useCreation(() => {
     return iconMap[item?.provider];
   }, [item?.provider]);
   const title = useCreation(() => {
-    return OAUTH_PROVIDER[item?.provider] || "unknown";
+    return LOGIN_PROVIDER_NAME[item?.provider] || "unknown";
   }, [item?.provider]);
   const toggleBind = useMemoizedFn(async () => {
+    if (item?.provider === LOGIN_PROVIDER.PASSKEY) {
+      await new Promise((resolve, reject) => {
+        confirmApi.open({
+          title: t("thirdPartyLogin.disconnectPasskey", { name: title }),
+          content: t("thirdPartyLogin.disconnectPasskeyDescription", { name: title }),
+          confirmButtonText: t("common.confirm"),
+          confirmButtonProps: {
+            color: "error"
+          },
+          cancelButtonText: t("common.cancel"),
+          onConfirm(close) {
+            disconnectPasskey({ session, connectedAccount: item }).then(resolve).catch(reject);
+            close();
+          },
+          // @ts-ignore
+          onCancel: resolve
+        });
+      });
+      return;
+    }
     try {
       currentState.loading = true;
       await new Promise((resolve, reject) => {

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

@@ -196,6 +196,17 @@ export default function UserCenter({
   const isProfileTab = useCreation(() => {
     return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, "/profile");
   }, [currentActiveTab]);
+  const oauth = session.useOAuth();
+  const passkey = session.usePasskey();
+  const handleSwitchPassport = useMemoizedFn(() => {
+    if (session?.user?.sourceProvider === "passkey") {
+      passkey.switchPassport(session.user);
+    } else if (["google", "apple", "email", "github"].includes(session?.user?.sourceProvider)) {
+      oauth.switchOAuthPassport(session.user);
+    } else if (session) {
+      session.switchPassport();
+    }
+  });
   const renderDefaultTab = useCreation(() => {
     if (isProfileTab) {
       return /* @__PURE__ */ jsx(
@@ -231,7 +242,7 @@ export default function UserCenter({
                     children: [
                       /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", children: [
                         /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: isMyself ? t("myInfo") : t("hisInfo") }),
-                        isMyself ? /* @__PURE__ */ jsx(SwitchRole, { user: userState.data, switchPassport: session.switchPassport }) : null
+                        isMyself ? /* @__PURE__ */ jsx(SwitchRole, { user: userState.data, switchPassport: handleSwitchPassport }) : null
                       ] }),
                       /* @__PURE__ */ jsx(UserInfo, { user: userState.data, isMySelf: isMyself })
                     ]
@@ -305,7 +316,7 @@ export default function UserCenter({
             UserBasicInfo,
             {
               isMyself,
-              switchPassport: session.switchPassport,
+              switchPassport: handleSwitchPassport,
               switchProfile: session.switchProfile,
               user: userState.data,
               showFullDid: false,

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

@@ -87,6 +87,8 @@ export declare const translations: {
             mainProviderCantRemove: string;
             confirmUnbind: string;
             confirmUnbindDescription: string;
+            disconnectPasskey: string;
+            disconnectPasskeyDescription: string;
         };
         commonSetting: {
             title: string;
@@ -181,6 +183,8 @@ export declare const translations: {
             mainProviderCantRemove: string;
             confirmUnbind: string;
             confirmUnbindDescription: string;
+            disconnectPasskey: string;
+            disconnectPasskeyDescription: string;
         };
         commonSetting: {
             title: string;

package/lib/UserCenter/libs/locales.js

@@ -81,12 +81,14 @@ export const translations = {
       }
     },
     thirdPartyLogin: {
-      title: "\u7B2C\u4E09\u65B9\u767B\u5F55",
+      title: "\u5DF2\u8FDE\u63A5\u7684\u8D26\u6237",
       connect: "\u7ED1\u5B9A",
       disconnect: "\u89E3\u7ED1",
       mainProviderCantRemove: "\u4E3B\u8D26\u53F7\u4E0D\u5141\u8BB8\u89E3\u7ED1",
       confirmUnbind: "\u786E\u5B9A\u8981\u89E3\u7ED1 {name} \u5417?",
-      confirmUnbindDescription: "\u89E3\u7ED1\u540E\u60A8\u5C06\u65E0\u6CD5\u4F7F\u7528 {name} \u767B\u5F55\u81F3\u8BE5\u8D26\u6237\u3002\u5982\u679C\u89E3\u7ED1\u540E\uFF0C\u60A8\u4ECD\u4F7F\u7528 {name} \u767B\u5F55\uFF0C\u4F1A\u81EA\u52A8\u521B\u5EFA\u4E00\u4E2A\u65B0\u8D26\u6237"
+      confirmUnbindDescription: "\u89E3\u7ED1\u540E\u60A8\u5C06\u65E0\u6CD5\u4F7F\u7528 {name} \u767B\u5F55\u81F3\u8BE5\u8D26\u6237\u3002\u5982\u679C\u89E3\u7ED1\u540E\uFF0C\u60A8\u4ECD\u4F7F\u7528 {name} \u767B\u5F55\uFF0C\u4F1A\u81EA\u52A8\u521B\u5EFA\u4E00\u4E2A\u65B0\u8D26\u6237",
+      disconnectPasskey: "\u786E\u5B9A\u8981\u79FB\u9664 Passkey \u5417?",
+      disconnectPasskeyDescription: "\u79FB\u9664\u540E\u60A8\u5C06\u65E0\u6CD5\u4F7F\u7528\u6B64 Passkey \u767B\u5F55\u3002\u5982\u679C\u79FB\u9664\u540E\uFF0C\u60A8\u4ECD\u4F7F\u7528\u6B64 Passkey \u767B\u5F55\uFF0C\u4F1A\u81EA\u52A8\u521B\u5EFA\u4E00\u4E2A\u65B0\u8D26\u6237"
     },
     commonSetting: {
       title: "\u901A\u7528\u8BBE\u7F6E",
@@ -117,7 +119,7 @@ export const translations = {
     webhookTested: "Test message sent",
     done: "Done",
     emptyField: "None",
-    notificationManagement: "Notification",
+    notificationManagement: "Notifications",
     privacyManagement: "Privacy",
     storageManagement: "Storage",
     emptyContent: "Empty",
@@ -175,12 +177,14 @@ export const translations = {
       }
     },
     thirdPartyLogin: {
-      title: "Third Party Login",
+      title: "Connected Accounts",
       connect: "Connect",
       disconnect: "Disconnect",
       mainProviderCantRemove: "Main account not allowed to remove",
       confirmUnbind: "Are you sure to unbind {name}?",
-      confirmUnbindDescription: "You will not be able to log in to this account using {name} after unbundling. If you are still logged in with {name} after unbundling, a new account will be created automatically!"
+      confirmUnbindDescription: "You will not be able to log in to this account using {name} after unbundling. If you are still logged in with {name} after unbundling, a new account will be created automatically!",
+      disconnectPasskey: "Are you sure to remove {name}?",
+      disconnectPasskeyDescription: "You will not be able to log in with this passkey upon removing. If you are still logged in with this passkey after removing, a new account will be created automatically!"
     },
     commonSetting: {
       title: "Common Settings",

package/lib/UserCenter/libs/utils.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.11.16",
+  "version": "2.11.18",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -32,9 +32,9 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.11.16",
-    "@arcblock/react-hooks": "^2.11.16",
-    "@blocklet/did-space-react": "^0.6.0",
+    "@arcblock/bridge": "^2.11.18",
+    "@arcblock/react-hooks": "^2.11.18",
+    "@blocklet/did-space-react": "^1.0.1",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify/react": "^4.1.1",
@@ -81,5 +81,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "1216fcd112e02c4135f5d748fe002cafaaebcfd9"
+  "gitHead": "68ac427a17804a71e469f6fc61b28c87ecb9e40d"
 }

package/src/@types/index.ts

@@ -87,6 +87,7 @@ export type Session = {
 
   refresh: Function;
   useOAuth: Function;
+  usePasskey: Function;
 };
 
 export type WebhookType = 'slack' | 'api';

package/src/BlockletStudio/index.tsx

@@ -1,4 +1,4 @@
-import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@arcblock/ux/lib/Util/constant';
+import { BLOCKLET_SERVICE_PATH_PREFIX } from '@arcblock/ux/lib/Util/constant';
 import { useEffect, useRef, useState } from 'react';
 import { joinURL } from 'ufo';
 
@@ -101,7 +101,7 @@ function BlockletStudio({
   }
 
   const src = parseUrl(
-    joinURL(window.location.origin, WELLKNOWN_SERVICE_PATH_PREFIX, '/embed/resources', componentDid, '/publish'),
+    joinURL(window.location.origin, BLOCKLET_SERVICE_PATH_PREFIX, '/embed/resources', componentDid, '/publish'),
     {
       title,
       logo,

package/src/ComponentInstaller/use-component-installed.js

@@ -1,4 +1,4 @@
-import { AUTH_SERVICE_PREFIX } from '@arcblock/did-connect/lib/constant';
+import { BLOCKLET_SERVICE_PATH_PREFIX } from '@arcblock/did-connect/lib/constant';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { joinURL } from 'ufo';
 
@@ -39,7 +39,7 @@ function useComponentInstalled({ did, onInstalled, onError }) {
     item.storeUrl = joinURL(item.meta.homepage, 'blocklets', item.meta.did);
     item.installUrl = joinURL(
       window.blocklet.appUrl,
-      AUTH_SERVICE_PREFIX,
+      BLOCKLET_SERVICE_PATH_PREFIX,
       `/admin/components?install-component=${item.meta.did}`
     );
   });

package/src/ComponentManager/components/add-component.tsx

@@ -1,7 +1,7 @@
 import { useEffect, ReactElement, useRef, useContext } from 'react';
 import Button from '@arcblock/ux/lib/Button';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@arcblock/ux/lib/Util/constant';
+import { BLOCKLET_SERVICE_PATH_PREFIX } from '@arcblock/ux/lib/Util/constant';
 import { useMemoizedFn, useReactive } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { joinURL, withQuery } from 'ufo';
@@ -46,7 +46,7 @@ export default function AddComponent({
     loading: false,
     showDialog: false,
   });
-  const importUrl = withQuery(joinURL(WELLKNOWN_SERVICE_PATH_PREFIX, 'embed/resources', componentDid, 'add'), {
+  const importUrl = withQuery(joinURL(BLOCKLET_SERVICE_PATH_PREFIX, 'embed/resources', componentDid, 'add'), {
     resourceDid,
     resourceType,
     mode: 'dialog',

package/src/ComponentManager/components/publish-component.tsx

@@ -1,7 +1,7 @@
 import { ReactElement, useContext } from 'react';
 import Button from '@arcblock/ux/lib/Button';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@arcblock/ux/lib/Util/constant';
+import { BLOCKLET_SERVICE_PATH_PREFIX } from '@arcblock/ux/lib/Util/constant';
 import { useMemoizedFn, useReactive } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
@@ -32,7 +32,7 @@ export default function PublishComponent({
     loading: false,
   });
 
-  const exportUrl = `${WELLKNOWN_SERVICE_PATH_PREFIX}/embed/resources/${componentDid}/publish?mode=dialog`;
+  const exportUrl = `${BLOCKLET_SERVICE_PATH_PREFIX}/embed/resources/${componentDid}/publish?mode=dialog`;
 
   const handleClose = useMemoizedFn(() => {
     currentState.showDialog = false;

package/src/UserCenter/components/third-party-login/index.tsx

@@ -1,11 +1,12 @@
+import noop from 'lodash/noop';
 import { useContext, useState } from 'react';
 import { Box } from '@mui/material';
 import { useAsyncEffect, useCreation } from 'ahooks';
 import { getConnectedAccounts, getSourceProvider } from '@arcblock/ux/lib/SessionUser/libs/utils';
 import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
+import { PasskeyActions } from '@arcblock/did-connect/lib/Passkey';
 
-import Empty from '@arcblock/ux/lib/Empty';
 import type { ConnectedAccount, OAuthAccount, User, SessionContext as TSessionContext } from '../../../@types';
 import ThirdPartyItem from './third-party-item';
 
@@ -17,6 +18,7 @@ export default function ThirdPartyLogin({ user }: { user: User }) {
   const { session } = useContext<TSessionContext>(SessionContext);
   const [oauthConfigs, setOauthConfigs] = useState<Record<string, ConnectedAccountProps>>({});
   const { getOAuthConfigs } = session.useOAuth();
+
   useAsyncEffect(async () => {
     const data = await getOAuthConfigs({
       sourceAppPid: user?.sourceAppPid,
@@ -41,7 +43,7 @@ export default function ThirdPartyLogin({ user }: { user: User }) {
    * 2. 如果标记移除了 auth0，则还需要对 sourceProvider 进行转换，转换的值为 google, apple, github 中的一种
    * 3. 如果标记移除了 auth0，还需要将 auth0 的 userInfo 数据添加到转换后的 provider 上
    */
-  const normalizedAccounts = useCreation(() => {
+  const oauthAccounts = useCreation(() => {
     const connectedAccounts: ConnectedAccount[] = getConnectedAccounts(user);
     let removeAuth0 = false;
     let patchProvider = '';
@@ -118,6 +120,32 @@ export default function ThirdPartyLogin({ user }: { user: User }) {
     return transformedProviders;
   }, [user?.connectedAccounts, availableProviders]);
 
+  const passkeyAccounts = useCreation(() => {
+    const connectedAccounts: ConnectedAccount[] = getConnectedAccounts(user);
+    const passkeyConnectedAccount = connectedAccounts.filter(
+      (x) => x.provider === LOGIN_PROVIDER.PASSKEY && x.did !== user?.did
+    ) as OAuthAccount[];
+    return passkeyConnectedAccount.map((x) => {
+      return {
+        ...x,
+        _bind: true,
+      };
+    });
+  }, [user]);
+
+  const walletAccounts = useCreation(() => {
+    const connectedAccounts: ConnectedAccount[] = getConnectedAccounts(user);
+    const walletConnectedAccount = connectedAccounts.filter(
+      (x) => x.provider === LOGIN_PROVIDER.WALLET && x.did !== user?.did
+    ) as OAuthAccount[];
+    return walletConnectedAccount.map((x) => {
+      return {
+        ...x,
+        _mainProvider: true,
+      };
+    });
+  }, [user]);
+
   return (
     <Box
       sx={{
@@ -125,13 +153,36 @@ export default function ThirdPartyLogin({ user }: { user: User }) {
         display: 'grid',
         gridTemplateColumns: '1fr min-content',
       }}>
-      {!normalizedAccounts.length ? (
-        <Empty />
+      {!oauthAccounts.length && !passkeyAccounts.length && !walletAccounts.length ? (
+        <PasskeyActions
+          behavior="only-new"
+          action="connect"
+          createMode="connect"
+          createButtonText="Add Passkey"
+          onSuccess={noop}
+          onError={noop}
+          dense
+        />
       ) : (
         <>
-          {normalizedAccounts.map((account) => {
+          {oauthAccounts.map((account) => {
             return <ThirdPartyItem key={account?.provider} item={account as OAuthAccount} />;
           })}
+          {passkeyAccounts.map((account) => {
+            return <ThirdPartyItem key={account.id} item={account as OAuthAccount} />;
+          })}
+          {walletAccounts.map((account) => {
+            return <ThirdPartyItem key={account.id} item={account as OAuthAccount} />;
+          })}
+          <PasskeyActions
+            behavior="only-new"
+            action="connect"
+            createMode="connect"
+            createButtonText="Add Passkey"
+            onSuccess={noop}
+            onError={noop}
+            dense
+          />
         </>
       )}
     </Box>

package/src/UserCenter/components/third-party-login/third-party-item.tsx

@@ -10,6 +10,8 @@ import { useConfirm } from '@arcblock/ux/lib/Dialog';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import MailOutlineRoundedIcon from '@iconify-icons/material-symbols/mail-outline-rounded';
 import InfoOutlineRoundedIcon from '@iconify-icons/material-symbols/info-outline-rounded';
+import PasskeyIcon from '@iconify-icons/material-symbols/passkey';
+import WalletIcon from '@iconify-icons/material-symbols/wallet-sharp';
 import AppleIcon from '@iconify-icons/logos/apple';
 import GithubIcon from '@iconify-icons/logos/github-icon';
 import GoogleIcon from '@iconify-icons/logos/google-icon';
@@ -18,7 +20,7 @@ import { SessionContext } from '@arcblock/did-connect/lib/Session';
 import { useContext } from 'react';
 import pick from 'lodash/pick';
 import { getFederatedEnabled, getMaster } from '@arcblock/ux/lib/Util/federated';
-import { LOGIN_PROVIDER, OAUTH_PROVIDER } from '@arcblock/ux/lib/Util/constant';
+import { LOGIN_PROVIDER, LOGIN_PROVIDER_NAME, OAUTH_PROVIDER } from '@arcblock/ux/lib/Util/constant';
 
 import { translations } from '../../libs/locales';
 import type { OAuthAccount, SessionContext as TSessionContext } from '../../../@types';
@@ -31,6 +33,7 @@ export default function ThirdPartyItem({
     did: string;
     pk: string;
     userInfo?: OAuthAccount['userInfo'];
+    id: string;
     _bind?: boolean;
     _rawProvider?: string;
     _mainProvider?: boolean;
@@ -46,6 +49,7 @@ export default function ThirdPartyItem({
   });
   const { session } = useContext<TSessionContext>(SessionContext);
   const { bindOAuth, unbindOAuth, setBaseUrl, baseUrl: oauthBaseUrl } = session.useOAuth();
+  const { disconnectPasskey } = session.usePasskey();
 
   const iconMap = {
     // email: MailOutlineRoundedIcon,
@@ -53,16 +57,39 @@ export default function ThirdPartyItem({
     [LOGIN_PROVIDER.APPLE]: AppleIcon,
     [LOGIN_PROVIDER.GITHUB]: GithubIcon,
     [LOGIN_PROVIDER.GOOGLE]: GoogleIcon,
+    [LOGIN_PROVIDER.PASSKEY]: PasskeyIcon,
+    [LOGIN_PROVIDER.WALLET]: WalletIcon,
   };
 
   const icon = useCreation(() => {
     return iconMap[item?.provider];
   }, [item?.provider]);
   const title = useCreation(() => {
-    return OAUTH_PROVIDER[item?.provider as keyof typeof OAUTH_PROVIDER] || 'unknown';
+    return LOGIN_PROVIDER_NAME[item?.provider as keyof typeof OAUTH_PROVIDER] || 'unknown';
   }, [item?.provider]);
 
   const toggleBind = useMemoizedFn(async () => {
+    if (item?.provider === LOGIN_PROVIDER.PASSKEY) {
+      await new Promise((resolve, reject) => {
+        confirmApi.open({
+          title: t('thirdPartyLogin.disconnectPasskey', { name: title }),
+          content: t('thirdPartyLogin.disconnectPasskeyDescription', { name: title }),
+          confirmButtonText: t('common.confirm'),
+          confirmButtonProps: {
+            color: 'error',
+          },
+          cancelButtonText: t('common.cancel'),
+          onConfirm(close: () => void) {
+            disconnectPasskey({ session, connectedAccount: item }).then(resolve).catch(reject);
+            close();
+          },
+          // @ts-ignore
+          onCancel: resolve,
+        });
+      });
+      return;
+    }
+
     try {
       currentState.loading = true;
       await new Promise((resolve, reject) => {

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

@@ -235,6 +235,18 @@ export default function UserCenter({
     return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, '/profile');
   }, [currentActiveTab]);
 
+  const oauth = session.useOAuth();
+  const passkey = session.usePasskey();
+  const handleSwitchPassport = useMemoizedFn(() => {
+    if (session?.user?.sourceProvider === 'passkey') {
+      passkey.switchPassport(session.user);
+    } else if (['google', 'apple', 'email', 'github'].includes(session?.user?.sourceProvider)) {
+      oauth.switchOAuthPassport(session.user);
+    } else if (session) {
+      session.switchPassport();
+    }
+  });
+
   const renderDefaultTab = useCreation(() => {
     if (isProfileTab) {
       return (
@@ -263,7 +275,7 @@ export default function UserCenter({
               }}>
               <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={session.switchPassport} /> : null}
+                {isMyself ? <SwitchRole user={userState.data as User} switchPassport={handleSwitchPassport} /> : null}
               </Box>
               <UserInfo user={userState.data as User} isMySelf={isMyself} />
             </Box>
@@ -348,7 +360,7 @@ export default function UserCenter({
         ]}>
         <UserBasicInfo
           isMyself={isMyself}
-          switchPassport={session.switchPassport}
+          switchPassport={handleSwitchPassport}
           switchProfile={session.switchProfile}
           user={userState.data as User}
           showFullDid={false}

package/src/UserCenter/libs/locales.ts

@@ -81,13 +81,16 @@ export const translations = {
       },
     },
     thirdPartyLogin: {
-      title: '第三方登录',
+      title: '已连接的账户',
       connect: '绑定',
       disconnect: '解绑',
       mainProviderCantRemove: '主账号不允许解绑',
       confirmUnbind: '确定要解绑 {name} 吗?',
       confirmUnbindDescription:
         '解绑后您将无法使用 {name} 登录至该账户。如果解绑后，您仍使用 {name} 登录，会自动创建一个新账户',
+      disconnectPasskey: '确定要移除 Passkey 吗?',
+      disconnectPasskeyDescription:
+        '移除后您将无法使用此 Passkey 登录。如果移除后，您仍使用此 Passkey 登录，会自动创建一个新账户',
     },
     commonSetting: {
       title: '通用设置',
@@ -118,7 +121,7 @@ export const translations = {
     webhookTested: 'Test message sent',
     done: 'Done',
     emptyField: 'None',
-    notificationManagement: 'Notification',
+    notificationManagement: 'Notifications',
     privacyManagement: 'Privacy',
     storageManagement: 'Storage',
     emptyContent: 'Empty',
@@ -176,13 +179,16 @@ export const translations = {
       },
     },
     thirdPartyLogin: {
-      title: 'Third Party Login',
+      title: 'Connected Accounts',
       connect: 'Connect',
       disconnect: 'Disconnect',
       mainProviderCantRemove: 'Main account not allowed to remove',
       confirmUnbind: 'Are you sure to unbind {name}?',
       confirmUnbindDescription:
         'You will not be able to log in to this account using {name} after unbundling. If you are still logged in with {name} after unbundling, a new account will be created automatically!',
+      disconnectPasskey: 'Are you sure to remove {name}?',
+      disconnectPasskeyDescription:
+        'You will not be able to log in with this passkey upon removing. If you are still logged in with this passkey after removing, a new account will be created automatically!',
     },
     commonSetting: {
       title: 'Common Settings',

package/src/UserCenter/libs/utils.ts

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