@arcblock/ux 2.9.7 → 2.9.9

package/es/BlockletContext/index.js

@@ -17,7 +17,8 @@ const {
  */
 function BlockletProvider({
   children,
-  baseUrl
+  baseUrl,
+  loading
 }) {
   const [blockletData, setBlockletData] = useState(null);
   const getBlockleData = useMemoizedFn(async () => {
@@ -43,7 +44,7 @@ function BlockletProvider({
   }, [baseUrl]);
   return /*#__PURE__*/_jsx(Provider, {
     value: blockletData,
-    children: blockletData ? children : null
+    children: blockletData ? children : loading || null
   });
 }
 function useBlockletContext() {
@@ -54,9 +55,11 @@ function useBlockletContext() {
 }
 BlockletProvider.propTypes = {
   baseUrl: PropTypes.string,
-  children: PropTypes.any.isRequired
+  children: PropTypes.any.isRequired,
+  loading: PropTypes.any
 };
 BlockletProvider.defaultProps = {
-  baseUrl: ''
+  baseUrl: '',
+  loading: null
 };
 export { BlockletContext, BlockletProvider, Consumer as BlockletConsumer, useBlockletContext };

package/es/SessionBlocklet/index.js

@@ -39,7 +39,7 @@ export default function SessionBlocklet({
   const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
     currentState.open = value;
   });
-  if (sessionMenuList.length === 0) {
+  if (sessionMenuList.length === 0 || !session?.user) {
     return null;
   }
   return /*#__PURE__*/_jsxs(_Fragment, {

package/es/SessionUser/components/session-user-item.js

@@ -8,11 +8,12 @@ import IOSRoundedIcon from '@iconify-icons/material-symbols/ios-rounded';
 import LanguageIcon from '@iconify-icons/material-symbols/language';
 import LensIcon from '@iconify-icons/material-symbols/lens';
 import AndroidIcon from '@iconify-icons/material-symbols/android';
+import QuestionMarkRoundedIcon from '@iconify-icons/material-symbols/question-mark-rounded';
 import Auth0Icon from '@iconify-icons/logos/auth0-icon';
 import Avatar from '../../Avatar';
 import DID from '../../DID';
 import { temp as colors } from '../../Colors';
-import { getSourceProvider } from '../libs/utils';
+import { getWalletDid } from '../libs/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SessionUserItem = /*#__PURE__*/forwardRef(({
@@ -21,8 +22,16 @@ const SessionUserItem = /*#__PURE__*/forwardRef(({
   active,
   ...rest
 }, ref) => {
-  const isRawWalletAccount = getSourceProvider(sessionItem?.user) === 'wallet';
+  const walletDid = getWalletDid(sessionItem?.user);
   const walletIcon = useCreation(() => {
+    if (sessionItem.__isDefault) {
+      return /*#__PURE__*/_jsx(Icon, {
+        icon: QuestionMarkRoundedIcon,
+        style: {
+          color: 'transparent'
+        }
+      });
+    }
     const {
       walletOS,
       provider
@@ -30,28 +39,24 @@ const SessionUserItem = /*#__PURE__*/forwardRef(({
     if (provider === 'auth0') {
       return /*#__PURE__*/_jsx(Icon, {
         icon: Auth0Icon,
-        width: 10,
-        height: 10,
         style: {
-          color: 'black'
+          color: 'black',
+          transform: 'scale(0.85)'
         }
       });
     }
     if (walletOS === 'ios') {
       return /*#__PURE__*/_jsx(Icon, {
         icon: IOSRoundedIcon,
-        width: 16,
-        height: 16,
         style: {
-          color: 'black'
+          color: 'black',
+          transform: 'scale(1.1)'
         }
       });
     }
     if (walletOS === 'android') {
       return /*#__PURE__*/_jsx(Icon, {
         icon: AndroidIcon,
-        width: 14,
-        height: 14,
         style: {
           color: 'black'
         }
@@ -68,10 +73,9 @@ const SessionUserItem = /*#__PURE__*/forwardRef(({
     if (walletOS === 'api') {
       return /*#__PURE__*/_jsx(Icon, {
         icon: ApiIcon,
-        width: 14,
-        height: 14,
         style: {
-          color: 'black'
+          color: 'black',
+          transform: 'scale(1.05)'
         }
       });
     }
@@ -110,8 +114,8 @@ const SessionUserItem = /*#__PURE__*/forwardRef(({
           did: sessionItem.userDid,
           size: 36
         })
-      }), walletIcon, isRawWalletAccount ? /*#__PURE__*/_jsx(DID, {
-        did: sessionItem.userDid,
+      }), walletIcon, walletDid ? /*#__PURE__*/_jsx(DID, {
+        did: walletDid,
         copyable: false,
         size: 14,
         responsive: false,
@@ -119,7 +123,7 @@ const SessionUserItem = /*#__PURE__*/forwardRef(({
         sx: {
           lineHeight: 1
         }
-      }) : /*#__PURE__*/_jsx(Typography, {
+      }) : sessionItem.user.email && /*#__PURE__*/_jsx(Typography, {
         sx: {
           fontSize: 14
         },

package/es/SessionUser/components/session-user-switch.js

@@ -42,6 +42,7 @@ export default function SessionUserSwitch({
       return matchSession;
     }
     return {
+      __isDefault: true,
       appName: globalThis?.blocklet?.appName || globalThis?.env?.appName,
       appPid: globalThis?.blocklet?.appPid || globalThis?.env?.appPid,
       userDid: session?.user?.did,

package/es/SessionUser/components/user-info.js

@@ -9,7 +9,7 @@ import DidAvatar from '../../Avatar';
 import { getUserAvatar } from '../../Util';
 import SessionUserSwitch from './session-user-switch';
 import { temp as colors } from '../../Colors';
-import { getSourceProvider } from '../libs/utils';
+import { getWallet } from '../libs/utils';
 import { translations } from '../libs/translation';
 import { translate } from '../../Locale/util';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -28,7 +28,9 @@ export default function UserInfo({
   });
   const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')), 64);
   const currentRole = useCreation(() => session.user?.passports?.find(item => item.name === session.user.role), [session?.user?.passports, session?.user?.role]);
-  const isRawWalletAccount = getSourceProvider(session.user) === 'wallet';
+  const hasBindWallet = useCreation(() => {
+    return getWallet(session?.user);
+  }, [session?.user]);
   return /*#__PURE__*/_jsxs(Box, {
     sx: {
       p: 2,
@@ -123,7 +125,7 @@ export default function UserInfo({
       onSwitch: onSwitchAccount,
       isBlocklet: isBlocklet,
       locale: locale
-    }), isRawWalletAccount ? null : /*#__PURE__*/_jsxs(Box, {
+    }), !hasBindWallet ? /*#__PURE__*/_jsxs(Box, {
       sx: {
         color: colors.primaryBase,
         backgroundColor: colors.surfacePrimarySubtitle,
@@ -144,7 +146,7 @@ export default function UserInfo({
         color: colors.primaryBase,
         fontSize: 16
       })]
-    })]
+    }) : null]
   });
 }
 UserInfo.propTypes = {

package/es/SessionUser/libs/utils.js

@@ -1,4 +1,29 @@
-export const getSourceProvider = user => user?.sourceProvider || user?.extraConfigs?.sourceProvider || 'wallet';
 export const getSourceAppPid = user => user?.sourceAppPid;
 export const getCurrentAppPid = user => user?.sourceAppPid || window?.blocklet?.appPid;
-export const getConnectedAccounts = user => user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
+export function getPermanentDid(user) {
+  return user?.did;
+}
+export function getConnectedAccounts(user) {
+  return user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
+}
+export function getSourceProvider(user) {
+  return user?.sourceProvider || user?.extraConfigs?.sourceProvider || 'wallet';
+}
+export function getSourceProviders(user) {
+  const connectedAccounts = getConnectedAccounts(user);
+  return connectedAccounts.map(item => item.provider);
+}
+export function getConnectedDids(user) {
+  const connectedAccounts = getConnectedAccounts(user);
+  const didList = connectedAccounts.map(item => item.did);
+  return didList;
+}
+export function getWallet(user) {
+  const connectedAccounts = getConnectedAccounts(user);
+  const walletAccount = connectedAccounts.find(item => item.provider === 'wallet');
+  return walletAccount;
+}
+export function getWalletDid(user) {
+  const walletAccount = getWallet(user);
+  return walletAccount?.did;
+}

package/lib/BlockletContext/index.js

@@ -29,7 +29,8 @@ exports.BlockletConsumer = Consumer;
 function BlockletProvider(_ref) {
   let {
     children,
-    baseUrl
+    baseUrl,
+    loading
   } = _ref;
   const [blockletData, setBlockletData] = (0, _react.useState)(null);
   const getBlockleData = (0, _ahooks.useMemoizedFn)(async () => {
@@ -55,7 +56,7 @@ function BlockletProvider(_ref) {
   }, [baseUrl]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
     value: blockletData,
-    children: blockletData ? children : null
+    children: blockletData ? children : loading || null
   });
 }
 function useBlockletContext() {
@@ -66,8 +67,10 @@ function useBlockletContext() {
 }
 BlockletProvider.propTypes = {
   baseUrl: _propTypes.default.string,
-  children: _propTypes.default.any.isRequired
+  children: _propTypes.default.any.isRequired,
+  loading: _propTypes.default.any
 };
 BlockletProvider.defaultProps = {
-  baseUrl: ''
+  baseUrl: '',
+  loading: null
 };

package/lib/SessionBlocklet/index.js

@@ -52,7 +52,7 @@ function SessionBlocklet(_ref) {
     let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !currentState.open;
     currentState.open = value;
   });
-  if (sessionMenuList.length === 0) {
+  if (sessionMenuList.length === 0 || !(session !== null && session !== void 0 && session.user)) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

package/lib/SessionUser/components/session-user-item.js

@@ -14,6 +14,7 @@ var _iosRounded = _interopRequireDefault(require("@iconify-icons/material-symbol
 var _language = _interopRequireDefault(require("@iconify-icons/material-symbols/language"));
 var _lens = _interopRequireDefault(require("@iconify-icons/material-symbols/lens"));
 var _android = _interopRequireDefault(require("@iconify-icons/material-symbols/android"));
+var _questionMarkRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/question-mark-rounded"));
 var _auth0Icon = _interopRequireDefault(require("@iconify-icons/logos/auth0-icon"));
 var _Avatar = _interopRequireDefault(require("../../Avatar"));
 var _DID = _interopRequireDefault(require("../../DID"));
@@ -37,8 +38,16 @@ const SessionUserItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       active
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  const isRawWalletAccount = (0, _utils.getSourceProvider)(sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.user) === 'wallet';
+  const walletDid = (0, _utils.getWalletDid)(sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.user);
   const walletIcon = (0, _ahooks.useCreation)(() => {
+    if (sessionItem.__isDefault) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+        icon: _questionMarkRounded.default,
+        style: {
+          color: 'transparent'
+        }
+      });
+    }
     const {
       walletOS,
       provider
@@ -46,28 +55,24 @@ const SessionUserItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     if (provider === 'auth0') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
         icon: _auth0Icon.default,
-        width: 10,
-        height: 10,
         style: {
-          color: 'black'
+          color: 'black',
+          transform: 'scale(0.85)'
         }
       });
     }
     if (walletOS === 'ios') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
         icon: _iosRounded.default,
-        width: 16,
-        height: 16,
         style: {
-          color: 'black'
+          color: 'black',
+          transform: 'scale(1.1)'
         }
       });
     }
     if (walletOS === 'android') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
         icon: _android.default,
-        width: 14,
-        height: 14,
         style: {
           color: 'black'
         }
@@ -84,10 +89,9 @@ const SessionUserItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     if (walletOS === 'api') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
         icon: _api.default,
-        width: 14,
-        height: 14,
         style: {
-          color: 'black'
+          color: 'black',
+          transform: 'scale(1.05)'
         }
       });
     }
@@ -124,8 +128,8 @@ const SessionUserItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           did: sessionItem.userDid,
           size: 36
         })
-      }), walletIcon, isRawWalletAccount ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
-        did: sessionItem.userDid,
+      }), walletIcon, walletDid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
+        did: walletDid,
         copyable: false,
         size: 14,
         responsive: false,
@@ -133,7 +137,7 @@ const SessionUserItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         sx: {
           lineHeight: 1
         }
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      }) : sessionItem.user.email && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
         sx: {
           fontSize: 14
         },

package/lib/SessionUser/components/session-user-switch.js

@@ -58,6 +58,7 @@ function SessionUserSwitch(_ref) {
       return matchSession;
     }
     return {
+      __isDefault: true,
       appName: (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$blocklet2 = globalThis.blocklet) === null || _globalThis$blocklet2 === void 0 ? void 0 : _globalThis$blocklet2.appName) || (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$env = globalThis.env) === null || _globalThis$env === void 0 ? void 0 : _globalThis$env.appName),
       appPid: (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$blocklet3 = globalThis.blocklet) === null || _globalThis$blocklet3 === void 0 ? void 0 : _globalThis$blocklet3.appPid) || (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$env2 = globalThis.env) === null || _globalThis$env2 === void 0 ? void 0 : _globalThis$env2.appPid),
       userDid: session === null || session === void 0 ? void 0 : (_session$user2 = session.user) === null || _session$user2 === void 0 ? void 0 : _session$user2.did,

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

@@ -40,7 +40,9 @@ function UserInfo(_ref) {
     var _session$user2, _session$user2$passpo;
     return (_session$user2 = session.user) === null || _session$user2 === void 0 ? void 0 : (_session$user2$passpo = _session$user2.passports) === null || _session$user2$passpo === void 0 ? void 0 : _session$user2$passpo.find(item => item.name === session.user.role);
   }, [session === null || session === void 0 ? void 0 : (_session$user3 = session.user) === null || _session$user3 === void 0 ? void 0 : _session$user3.passports, session === null || session === void 0 ? void 0 : (_session$user4 = session.user) === null || _session$user4 === void 0 ? void 0 : _session$user4.role]);
-  const isRawWalletAccount = (0, _utils.getSourceProvider)(session.user) === 'wallet';
+  const hasBindWallet = (0, _ahooks.useCreation)(() => {
+    return (0, _utils.getWallet)(session === null || session === void 0 ? void 0 : session.user);
+  }, [session === null || session === void 0 ? void 0 : session.user]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
     sx: {
       p: 2,
@@ -135,7 +137,7 @@ function UserInfo(_ref) {
       onSwitch: onSwitchAccount,
       isBlocklet: isBlocklet,
       locale: locale
-    }), isRawWalletAccount ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    }), !hasBindWallet ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
       sx: {
         color: _Colors.temp.primaryBase,
         backgroundColor: _Colors.temp.surfacePrimarySubtitle,
@@ -156,7 +158,7 @@ function UserInfo(_ref) {
         color: _Colors.temp.primaryBase,
         fontSize: 16
       })]
-    })]
+    }) : null]
   });
 }
 UserInfo.propTypes = {

package/lib/SessionUser/libs/utils.js

@@ -3,12 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSourceProvider = exports.getSourceAppPid = exports.getCurrentAppPid = exports.getConnectedAccounts = void 0;
-const getSourceProvider = user => {
-  var _user$extraConfigs;
-  return (user === null || user === void 0 ? void 0 : user.sourceProvider) || (user === null || user === void 0 ? void 0 : (_user$extraConfigs = user.extraConfigs) === null || _user$extraConfigs === void 0 ? void 0 : _user$extraConfigs.sourceProvider) || 'wallet';
-};
+exports.getConnectedAccounts = getConnectedAccounts;
+exports.getConnectedDids = getConnectedDids;
+exports.getCurrentAppPid = void 0;
+exports.getPermanentDid = getPermanentDid;
+exports.getSourceAppPid = void 0;
 exports.getSourceProvider = getSourceProvider;
+exports.getSourceProviders = getSourceProviders;
+exports.getWallet = getWallet;
+exports.getWalletDid = getWalletDid;
 const getSourceAppPid = user => user === null || user === void 0 ? void 0 : user.sourceAppPid;
 exports.getSourceAppPid = getSourceAppPid;
 const getCurrentAppPid = user => {
@@ -16,8 +19,32 @@ const getCurrentAppPid = user => {
   return (user === null || user === void 0 ? void 0 : user.sourceAppPid) || ((_window = window) === null || _window === void 0 ? void 0 : (_window$blocklet = _window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.appPid);
 };
 exports.getCurrentAppPid = getCurrentAppPid;
-const getConnectedAccounts = user => {
+function getPermanentDid(user) {
+  return user === null || user === void 0 ? void 0 : user.did;
+}
+function getConnectedAccounts(user) {
+  var _user$extraConfigs;
+  return (user === null || user === void 0 ? void 0 : user.connectedAccounts) || (user === null || user === void 0 ? void 0 : (_user$extraConfigs = user.extraConfigs) === null || _user$extraConfigs === void 0 ? void 0 : _user$extraConfigs.connectedAccounts) || [];
+}
+function getSourceProvider(user) {
   var _user$extraConfigs2;
-  return (user === null || user === void 0 ? void 0 : user.connectedAccounts) || (user === null || user === void 0 ? void 0 : (_user$extraConfigs2 = user.extraConfigs) === null || _user$extraConfigs2 === void 0 ? void 0 : _user$extraConfigs2.connectedAccounts) || [];
-};
-exports.getConnectedAccounts = getConnectedAccounts;
+  return (user === null || user === void 0 ? void 0 : user.sourceProvider) || (user === null || user === void 0 ? void 0 : (_user$extraConfigs2 = user.extraConfigs) === null || _user$extraConfigs2 === void 0 ? void 0 : _user$extraConfigs2.sourceProvider) || 'wallet';
+}
+function getSourceProviders(user) {
+  const connectedAccounts = getConnectedAccounts(user);
+  return connectedAccounts.map(item => item.provider);
+}
+function getConnectedDids(user) {
+  const connectedAccounts = getConnectedAccounts(user);
+  const didList = connectedAccounts.map(item => item.did);
+  return didList;
+}
+function getWallet(user) {
+  const connectedAccounts = getConnectedAccounts(user);
+  const walletAccount = connectedAccounts.find(item => item.provider === 'wallet');
+  return walletAccount;
+}
+function getWalletDid(user) {
+  const walletAccount = getWallet(user);
+  return walletAccount === null || walletAccount === void 0 ? void 0 : walletAccount.did;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.9.7",
+  "version": "2.9.9",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -340,11 +340,11 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "362c78d98c51f7f4297f019cf2a01c2dae919870",
+  "gitHead": "518ea493a3b47e8411ea1e9045a9ad14d453eb3c",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.9.7",
-    "@arcblock/react-hooks": "^2.9.7",
+    "@arcblock/icons": "^2.9.9",
+    "@arcblock/react-hooks": "^2.9.9",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/BlockletContext/index.jsx

@@ -13,7 +13,7 @@ const { Provider, Consumer } = BlockletContext;
  * @param {any} props.children
  * @returns
  */
-function BlockletProvider({ children, baseUrl }) {
+function BlockletProvider({ children, baseUrl, loading }) {
   const [blockletData, setBlockletData] = useState(null);
   const getBlockleData = useMemoizedFn(async () => {
     if (!baseUrl || window.location.href.startsWith(baseUrl)) {
@@ -37,7 +37,7 @@ function BlockletProvider({ children, baseUrl }) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [baseUrl]);
-  return <Provider value={blockletData}>{blockletData ? children : null}</Provider>;
+  return <Provider value={blockletData}>{blockletData ? children : loading || null}</Provider>;
 }
 
 function useBlockletContext() {
@@ -48,9 +48,11 @@ function useBlockletContext() {
 BlockletProvider.propTypes = {
   baseUrl: PropTypes.string,
   children: PropTypes.any.isRequired,
+  loading: PropTypes.any,
 };
 BlockletProvider.defaultProps = {
   baseUrl: '',
+  loading: null,
 };
 
 export { BlockletContext, BlockletProvider, Consumer as BlockletConsumer, useBlockletContext };

package/src/SessionBlocklet/index.jsx

@@ -48,7 +48,7 @@ export default function SessionBlocklet({ session, locale, size }) {
     currentState.open = value;
   });
 
-  if (sessionMenuList.length === 0) {
+  if (sessionMenuList.length === 0 || !session?.user) {
     return null;
   }
 

package/src/SessionUser/components/session-user-item.jsx

@@ -8,31 +8,36 @@ import IOSRoundedIcon from '@iconify-icons/material-symbols/ios-rounded';
 import LanguageIcon from '@iconify-icons/material-symbols/language';
 import LensIcon from '@iconify-icons/material-symbols/lens';
 import AndroidIcon from '@iconify-icons/material-symbols/android';
+import QuestionMarkRoundedIcon from '@iconify-icons/material-symbols/question-mark-rounded';
 import Auth0Icon from '@iconify-icons/logos/auth0-icon';
 
 import Avatar from '../../Avatar';
 import DID from '../../DID';
 import { temp as colors } from '../../Colors';
-import { getSourceProvider } from '../libs/utils';
+import { getWalletDid } from '../libs/utils';
 
 const SessionUserItem = forwardRef(({ sessionItem, statusContent, active, ...rest }, ref) => {
-  const isRawWalletAccount = getSourceProvider(sessionItem?.user) === 'wallet';
+  const walletDid = getWalletDid(sessionItem?.user);
   const walletIcon = useCreation(() => {
+    if (sessionItem.__isDefault) {
+      return <Icon icon={QuestionMarkRoundedIcon} style={{ color: 'transparent' }} />;
+    }
+
     const { walletOS, provider } = sessionItem?.extra || {};
     if (provider === 'auth0') {
-      return <Icon icon={Auth0Icon} width={10} height={10} style={{ color: 'black' }} />;
+      return <Icon icon={Auth0Icon} style={{ color: 'black', transform: 'scale(0.85)' }} />;
     }
     if (walletOS === 'ios') {
-      return <Icon icon={IOSRoundedIcon} width={16} height={16} style={{ color: 'black' }} />;
+      return <Icon icon={IOSRoundedIcon} style={{ color: 'black', transform: 'scale(1.1)' }} />;
     }
     if (walletOS === 'android') {
-      return <Icon icon={AndroidIcon} width={14} height={14} style={{ color: 'black' }} />;
+      return <Icon icon={AndroidIcon} style={{ color: 'black' }} />;
     }
     if (walletOS === 'web') {
       return <Icon icon={LanguageIcon} style={{ color: 'black' }} />;
     }
     if (walletOS === 'api') {
-      return <Icon icon={ApiIcon} width={14} height={14} style={{ color: 'black' }} />;
+      return <Icon icon={ApiIcon} style={{ color: 'black', transform: 'scale(1.05)' }} />;
     }
     return null;
   }, [sessionItem?.extra?.walletOS, sessionItem?.extra?.provider]);
@@ -66,10 +71,10 @@ const SessionUserItem = forwardRef(({ sessionItem, statusContent, active, ...res
           <Avatar did={sessionItem.userDid} size={36} />
         </Box>
         {walletIcon}
-        {isRawWalletAccount ? (
-          <DID did={sessionItem.userDid} copyable={false} size={14} responsive={false} compact sx={{ lineHeight: 1 }} />
+        {walletDid ? (
+          <DID did={walletDid} copyable={false} size={14} responsive={false} compact sx={{ lineHeight: 1 }} />
         ) : (
-          <Typography sx={{ fontSize: 14 }}>{sessionItem.user.email}</Typography>
+          sessionItem.user.email && <Typography sx={{ fontSize: 14 }}>{sessionItem.user.email}</Typography>
         )}
       </Box>
       {statusContent ||

package/src/SessionUser/components/session-user-switch.jsx

@@ -52,6 +52,7 @@ export default function SessionUserSwitch({ session, onSwitch, isBlocklet, local
     }
 
     return {
+      __isDefault: true,
       appName: globalThis?.blocklet?.appName || globalThis?.env?.appName,
       appPid: globalThis?.blocklet?.appPid || globalThis?.env?.appPid,
       userDid: session?.user?.did,

package/src/SessionUser/components/user-info.jsx

@@ -10,7 +10,7 @@ import DidAvatar from '../../Avatar';
 import { getUserAvatar } from '../../Util';
 import SessionUserSwitch from './session-user-switch';
 import { temp as colors } from '../../Colors';
-import { getSourceProvider } from '../libs/utils';
+import { getWallet } from '../libs/utils';
 import { translations } from '../libs/translation';
 import { translate } from '../../Locale/util';
 
@@ -31,7 +31,10 @@ export default function UserInfo({
     () => session.user?.passports?.find((item) => item.name === session.user.role),
     [session?.user?.passports, session?.user?.role]
   );
-  const isRawWalletAccount = getSourceProvider(session.user) === 'wallet';
+
+  const hasBindWallet = useCreation(() => {
+    return getWallet(session?.user);
+  }, [session?.user]);
 
   return (
     <Box
@@ -123,7 +126,7 @@ export default function UserInfo({
         />
       </Box>
       <SessionUserSwitch session={session} onSwitch={onSwitchAccount} isBlocklet={isBlocklet} locale={locale} />
-      {isRawWalletAccount ? null : (
+      {!hasBindWallet ? (
         <Box
           sx={{
             color: colors.primaryBase,
@@ -143,7 +146,7 @@ export default function UserInfo({
           {t('connectDIDWallet')}
           <Icon icon={ArrowRightAltRoundedIcon} color={colors.primaryBase} fontSize={16} />
         </Box>
-      )}
+      ) : null}
     </Box>
   );
 }

package/src/SessionUser/libs/utils.js

@@ -1,7 +1,37 @@
-export const getSourceProvider = (user) => user?.sourceProvider || user?.extraConfigs?.sourceProvider || 'wallet';
-
 export const getSourceAppPid = (user) => user?.sourceAppPid;
 
 export const getCurrentAppPid = (user) => user?.sourceAppPid || window?.blocklet?.appPid;
 
-export const getConnectedAccounts = (user) => user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
+export function getPermanentDid(user) {
+  return user?.did;
+}
+
+export function getConnectedAccounts(user) {
+  return user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
+}
+
+export function getSourceProvider(user) {
+  return user?.sourceProvider || user?.extraConfigs?.sourceProvider || 'wallet';
+}
+
+export function getSourceProviders(user) {
+  const connectedAccounts = getConnectedAccounts(user);
+  return connectedAccounts.map((item) => item.provider);
+}
+
+export function getConnectedDids(user) {
+  const connectedAccounts = getConnectedAccounts(user);
+  const didList = connectedAccounts.map((item) => item.did);
+  return didList;
+}
+
+export function getWallet(user) {
+  const connectedAccounts = getConnectedAccounts(user);
+  const walletAccount = connectedAccounts.find((item) => item.provider === 'wallet');
+  return walletAccount;
+}
+
+export function getWalletDid(user) {
+  const walletAccount = getWallet(user);
+  return walletAccount?.did;
+}