@arcblock/ux 2.9.45 → 2.9.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/es/SessionUser/components/session-user-item.js +6 -66
  2. package/es/Theme/theme.js +2 -9
  3. package/es/WalletOSIcon/index.js +80 -0
  4. package/lib/SessionUser/components/session-user-item.js +6 -66
  5. package/lib/Theme/theme.js +2 -9
  6. package/lib/WalletOSIcon/index.js +88 -0
  7. package/package.json +9 -5
  8. package/src/SessionUser/components/session-user-item.jsx +6 -31
  9. package/src/Theme/theme.js +2 -9
  10. package/src/WalletOSIcon/index.jsx +45 -0
package/es/SessionUser/components/session-user-item.js CHANGED
@@ -1,15 +1,9 @@
1
1
  import PropTypes from 'prop-types';
2
2
  import { forwardRef } from 'react';
3
3
  import { Box, IconButton, Typography } from '@mui/material';
4
- import { useCreation } from 'ahooks';
5
4
  import { Icon } from '@iconify/react';
6
- import ApiIcon from '@iconify-icons/mdi/api';
7
- import IOSRoundedIcon from '@iconify-icons/material-symbols/ios-rounded';
8
- import LanguageIcon from '@iconify-icons/material-symbols/language';
9
5
  import LensIcon from '@iconify-icons/material-symbols/lens';
10
- import AndroidIcon from '@iconify-icons/material-symbols/android';
11
- import QuestionMarkRoundedIcon from '@iconify-icons/material-symbols/question-mark-rounded';
12
- import Auth0Icon from '@iconify-icons/logos/auth0-icon';
6
+ import WalletOSIcon from '../../WalletOSIcon';
13
7
  import Avatar from '../../Avatar';
14
8
  import DID from '../../DID';
15
9
  import { temp as colors } from '../../Colors';
@@ -23,64 +17,6 @@ const SessionUserItem = /*#__PURE__*/forwardRef(({
23
17
  ...rest
24
18
  }, ref) => {
25
19
  const isRawWalletAccount = getSourceProvider(sessionItem?.user) === 'wallet';
26
- const walletIcon = useCreation(() => {
27
- if (sessionItem.__isDefault) {
28
- return /*#__PURE__*/_jsx(Icon, {
29
- icon: QuestionMarkRoundedIcon,
30
- style: {
31
- color: 'transparent'
32
- }
33
- });
34
- }
35
- const {
36
- walletOS,
37
- provider
38
- } = sessionItem?.extra || {};
39
- if (provider === 'auth0') {
40
- return /*#__PURE__*/_jsx(Icon, {
41
- icon: Auth0Icon,
42
- style: {
43
- color: 'black',
44
- transform: 'scale(0.85)'
45
- }
46
- });
47
- }
48
- if (walletOS === 'ios') {
49
- return /*#__PURE__*/_jsx(Icon, {
50
- icon: IOSRoundedIcon,
51
- style: {
52
- color: 'black',
53
- transform: 'scale(1.1)'
54
- }
55
- });
56
- }
57
- if (walletOS === 'android') {
58
- return /*#__PURE__*/_jsx(Icon, {
59
- icon: AndroidIcon,
60
- style: {
61
- color: 'black'
62
- }
63
- });
64
- }
65
- if (walletOS === 'web') {
66
- return /*#__PURE__*/_jsx(Icon, {
67
- icon: LanguageIcon,
68
- style: {
69
- color: 'black'
70
- }
71
- });
72
- }
73
- if (walletOS === 'api') {
74
- return /*#__PURE__*/_jsx(Icon, {
75
- icon: ApiIcon,
76
- style: {
77
- color: 'black',
78
- transform: 'scale(1.05)'
79
- }
80
- });
81
- }
82
- return null;
83
- }, [sessionItem?.extra?.walletOS, sessionItem?.extra?.provider]);
84
20
  return /*#__PURE__*/_jsxs(Box, {
85
21
  ...rest,
86
22
  ref: ref,
@@ -114,7 +50,11 @@ const SessionUserItem = /*#__PURE__*/forwardRef(({
114
50
  did: sessionItem.userDid,
115
51
  size: 36
116
52
  })
117
- }), walletIcon, isRawWalletAccount ? /*#__PURE__*/_jsx(DID, {
53
+ }), /*#__PURE__*/_jsx(WalletOSIcon, {
54
+ loading: sessionItem.__isDefault,
55
+ provider: sessionItem?.extra?.provider,
56
+ walletOS: sessionItem?.extra?.walletOS
57
+ }), isRawWalletAccount ? /*#__PURE__*/_jsx(DID, {
118
58
  did: sessionItem.userDid,
119
59
  copyable: false,
120
60
  size: 14,
package/es/Theme/theme.js CHANGED
@@ -1,16 +1,14 @@
1
1
  // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
2
2
  import { createTheme as _createTheme, responsiveFontSizes } from '@mui/material/styles';
3
3
  // 为了避免加载全量的字体导致打包后体积太大，目前只选择了 latin 语系的字体
4
+ import '@fontsource/inter/latin-300.css';
4
5
  import '@fontsource/inter/latin-400.css';
5
6
  import '@fontsource/inter/latin-500.css';
6
- import '@fontsource/inter/latin-600.css';
7
7
  import '@fontsource/inter/latin-700.css';
8
- import '@fontsource/inter/latin-900.css';
8
+ import '@fontsource/inter/latin-ext-300.css';
9
9
  import '@fontsource/inter/latin-ext-400.css';
10
10
  import '@fontsource/inter/latin-ext-500.css';
11
- import '@fontsource/inter/latin-ext-600.css';
12
11
  import '@fontsource/inter/latin-ext-700.css';
13
- import '@fontsource/inter/latin-ext-900.css';
14
12
  import colors from '../Colors';
15
13
  const muiDarkTheme = _createTheme({
16
14
  palette: {
@@ -60,11 +58,6 @@ export const create = ({
60
58
  gray: mode === 'light' ? colors.grey[500] : colors.grey[300]
61
59
  },
62
60
  fontFamily: ['Inter', 'Avenir', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(','),
63
- // 按最新设计规范, 只使用 400/700
64
- fontWeightLight: 400,
65
- fontWeightRegular: 400,
66
- fontWeightMedium: 700,
67
- fontWeightBold: 700,
68
61
  // button 默认使用粗体
69
62
  button: {
70
63
  fontWeight: 700
package/es/WalletOSIcon/index.js ADDED
@@ -0,0 +1,80 @@
1
+ import PropTypes from 'prop-types';
2
+ import { Icon } from '@iconify/react';
3
+ import ApiIcon from '@iconify-icons/mdi/api';
4
+ import IOSRoundedIcon from '@iconify-icons/material-symbols/ios-rounded';
5
+ import LanguageIcon from '@iconify-icons/material-symbols/language';
6
+ import AndroidIcon from '@iconify-icons/material-symbols/android';
7
+ import QuestionMarkRoundedIcon from '@iconify-icons/material-symbols/question-mark-rounded';
8
+ import Auth0Icon from '@iconify-icons/logos/auth0-icon';
9
+ import { jsx as _jsx } from "react/jsx-runtime";
10
+ export default function WalletOSIcon({
11
+ loading,
12
+ walletOS,
13
+ provider,
14
+ color
15
+ }) {
16
+ if (loading) {
17
+ return /*#__PURE__*/_jsx(Icon, {
18
+ icon: QuestionMarkRoundedIcon,
19
+ style: {
20
+ color: 'transparent'
21
+ }
22
+ });
23
+ }
24
+ if (provider === 'auth0') {
25
+ return /*#__PURE__*/_jsx(Icon, {
26
+ icon: Auth0Icon,
27
+ style: {
28
+ color,
29
+ transform: 'scale(0.85)'
30
+ }
31
+ });
32
+ }
33
+ if (walletOS === 'ios') {
34
+ return /*#__PURE__*/_jsx(Icon, {
35
+ icon: IOSRoundedIcon,
36
+ style: {
37
+ color,
38
+ transform: 'scale(1.1)'
39
+ }
40
+ });
41
+ }
42
+ if (walletOS === 'android') {
43
+ return /*#__PURE__*/_jsx(Icon, {
44
+ icon: AndroidIcon,
45
+ style: {
46
+ color
47
+ }
48
+ });
49
+ }
50
+ if (walletOS === 'web') {
51
+ return /*#__PURE__*/_jsx(Icon, {
52
+ icon: LanguageIcon,
53
+ style: {
54
+ color
55
+ }
56
+ });
57
+ }
58
+ if (walletOS === 'api') {
59
+ return /*#__PURE__*/_jsx(Icon, {
60
+ icon: ApiIcon,
61
+ style: {
62
+ color,
63
+ transform: 'scale(1.05)'
64
+ }
65
+ });
66
+ }
67
+ return null;
68
+ }
69
+ WalletOSIcon.propTypes = {
70
+ loading: PropTypes.bool,
71
+ walletOS: PropTypes.string,
72
+ provider: PropTypes.string,
73
+ color: PropTypes.string
74
+ };
75
+ WalletOSIcon.defaultProps = {
76
+ loading: false,
77
+ walletOS: null,
78
+ provider: null,
79
+ color: 'black'
80
+ };
package/lib/SessionUser/components/session-user-item.js CHANGED
@@ -7,15 +7,9 @@ exports.default = void 0;
7
7
  var _propTypes = _interopRequireDefault(require("prop-types"));
8
8
  var _react = require("react");
9
9
  var _material = require("@mui/material");
10
- var _ahooks = require("ahooks");
11
10
  var _react2 = require("@iconify/react");
12
- var _api = _interopRequireDefault(require("@iconify-icons/mdi/api"));
13
- var _iosRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/ios-rounded"));
14
- var _language = _interopRequireDefault(require("@iconify-icons/material-symbols/language"));
15
11
  var _lens = _interopRequireDefault(require("@iconify-icons/material-symbols/lens"));
16
- var _android = _interopRequireDefault(require("@iconify-icons/material-symbols/android"));
17
- var _questionMarkRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/question-mark-rounded"));
18
- var _auth0Icon = _interopRequireDefault(require("@iconify-icons/logos/auth0-icon"));
12
+ var _WalletOSIcon = _interopRequireDefault(require("../../WalletOSIcon"));
19
13
  var _Avatar = _interopRequireDefault(require("../../Avatar"));
20
14
  var _DID = _interopRequireDefault(require("../../DID"));
21
15
  var _Colors = require("../../Colors");
@@ -39,64 +33,6 @@ const SessionUserItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
39
33
  } = _ref,
40
34
  rest = _objectWithoutProperties(_ref, _excluded);
41
35
  const isRawWalletAccount = (0, _utils.getSourceProvider)(sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.user) === 'wallet';
42
- const walletIcon = (0, _ahooks.useCreation)(() => {
43
- if (sessionItem.__isDefault) {
44
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
45
- icon: _questionMarkRounded.default,
46
- style: {
47
- color: 'transparent'
48
- }
49
- });
50
- }
51
- const {
52
- walletOS,
53
- provider
54
- } = (sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.extra) || {};
55
- if (provider === 'auth0') {
56
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
57
- icon: _auth0Icon.default,
58
- style: {
59
- color: 'black',
60
- transform: 'scale(0.85)'
61
- }
62
- });
63
- }
64
- if (walletOS === 'ios') {
65
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
66
- icon: _iosRounded.default,
67
- style: {
68
- color: 'black',
69
- transform: 'scale(1.1)'
70
- }
71
- });
72
- }
73
- if (walletOS === 'android') {
74
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
75
- icon: _android.default,
76
- style: {
77
- color: 'black'
78
- }
79
- });
80
- }
81
- if (walletOS === 'web') {
82
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
83
- icon: _language.default,
84
- style: {
85
- color: 'black'
86
- }
87
- });
88
- }
89
- if (walletOS === 'api') {
90
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
91
- icon: _api.default,
92
- style: {
93
- color: 'black',
94
- transform: 'scale(1.05)'
95
- }
96
- });
97
- }
98
- return null;
99
- }, [sessionItem === null || sessionItem === void 0 ? void 0 : (_sessionItem$extra = sessionItem.extra) === null || _sessionItem$extra === void 0 ? void 0 : _sessionItem$extra.walletOS, sessionItem === null || sessionItem === void 0 ? void 0 : (_sessionItem$extra2 = sessionItem.extra) === null || _sessionItem$extra2 === void 0 ? void 0 : _sessionItem$extra2.provider]);
100
36
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, _objectSpread(_objectSpread({}, rest), {}, {
101
37
  ref: ref,
102
38
  sx: _objectSpread({
@@ -128,7 +64,11 @@ const SessionUserItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
128
64
  did: sessionItem.userDid,
129
65
  size: 36
130
66
  })
131
- }), walletIcon, isRawWalletAccount ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
67
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_WalletOSIcon.default, {
68
+ loading: sessionItem.__isDefault,
69
+ provider: sessionItem === null || sessionItem === void 0 ? void 0 : (_sessionItem$extra = sessionItem.extra) === null || _sessionItem$extra === void 0 ? void 0 : _sessionItem$extra.provider,
70
+ walletOS: sessionItem === null || sessionItem === void 0 ? void 0 : (_sessionItem$extra2 = sessionItem.extra) === null || _sessionItem$extra2 === void 0 ? void 0 : _sessionItem$extra2.walletOS
71
+ }), isRawWalletAccount ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
132
72
  did: sessionItem.userDid,
133
73
  copyable: false,
134
74
  size: 14,
package/lib/Theme/theme.js CHANGED
@@ -5,16 +5,14 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.createTheme = exports.create = void 0;
7
7
  var _styles = require("@mui/material/styles");
8
+ require("@fontsource/inter/latin-300.css");
8
9
  require("@fontsource/inter/latin-400.css");
9
10
  require("@fontsource/inter/latin-500.css");
10
- require("@fontsource/inter/latin-600.css");
11
11
  require("@fontsource/inter/latin-700.css");
12
- require("@fontsource/inter/latin-900.css");
12
+ require("@fontsource/inter/latin-ext-300.css");
13
13
  require("@fontsource/inter/latin-ext-400.css");
14
14
  require("@fontsource/inter/latin-ext-500.css");
15
- require("@fontsource/inter/latin-ext-600.css");
16
15
  require("@fontsource/inter/latin-ext-700.css");
17
- require("@fontsource/inter/latin-ext-900.css");
18
16
  var _Colors = _interopRequireDefault(require("../Colors"));
19
17
  const _excluded = ["mode", "pageWidth", "palette", "typography", "overrides"]; // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
20
18
  // 为了避免加载全量的字体导致打包后体积太大，目前只选择了 latin 语系的字体
@@ -74,11 +72,6 @@ const create = exports.create = function create() {
74
72
  gray: mode === 'light' ? _Colors.default.grey[500] : _Colors.default.grey[300]
75
73
  },
76
74
  fontFamily: ['Inter', 'Avenir', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(','),
77
- // 按最新设计规范, 只使用 400/700
78
- fontWeightLight: 400,
79
- fontWeightRegular: 400,
80
- fontWeightMedium: 700,
81
- fontWeightBold: 700,
82
75
  // button 默认使用粗体
83
76
  button: {
84
77
  fontWeight: 700
package/lib/WalletOSIcon/index.js ADDED
@@ -0,0 +1,88 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = WalletOSIcon;
7
+ var _propTypes = _interopRequireDefault(require("prop-types"));
8
+ var _react = require("@iconify/react");
9
+ var _api = _interopRequireDefault(require("@iconify-icons/mdi/api"));
10
+ var _iosRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/ios-rounded"));
11
+ var _language = _interopRequireDefault(require("@iconify-icons/material-symbols/language"));
12
+ var _android = _interopRequireDefault(require("@iconify-icons/material-symbols/android"));
13
+ var _questionMarkRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/question-mark-rounded"));
14
+ var _auth0Icon = _interopRequireDefault(require("@iconify-icons/logos/auth0-icon"));
15
+ var _jsxRuntime = require("react/jsx-runtime");
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
+ function WalletOSIcon(_ref) {
18
+ let {
19
+ loading,
20
+ walletOS,
21
+ provider,
22
+ color
23
+ } = _ref;
24
+ if (loading) {
25
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
26
+ icon: _questionMarkRounded.default,
27
+ style: {
28
+ color: 'transparent'
29
+ }
30
+ });
31
+ }
32
+ if (provider === 'auth0') {
33
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
34
+ icon: _auth0Icon.default,
35
+ style: {
36
+ color,
37
+ transform: 'scale(0.85)'
38
+ }
39
+ });
40
+ }
41
+ if (walletOS === 'ios') {
42
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
43
+ icon: _iosRounded.default,
44
+ style: {
45
+ color,
46
+ transform: 'scale(1.1)'
47
+ }
48
+ });
49
+ }
50
+ if (walletOS === 'android') {
51
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
52
+ icon: _android.default,
53
+ style: {
54
+ color
55
+ }
56
+ });
57
+ }
58
+ if (walletOS === 'web') {
59
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
60
+ icon: _language.default,
61
+ style: {
62
+ color
63
+ }
64
+ });
65
+ }
66
+ if (walletOS === 'api') {
67
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
68
+ icon: _api.default,
69
+ style: {
70
+ color,
71
+ transform: 'scale(1.05)'
72
+ }
73
+ });
74
+ }
75
+ return null;
76
+ }
77
+ WalletOSIcon.propTypes = {
78
+ loading: _propTypes.default.bool,
79
+ walletOS: _propTypes.default.string,
80
+ provider: _propTypes.default.string,
81
+ color: _propTypes.default.string
82
+ };
83
+ WalletOSIcon.defaultProps = {
84
+ loading: false,
85
+ walletOS: null,
86
+ provider: null,
87
+ color: 'black'
88
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcblock/ux",
3
- "version": "2.9.45",
3
+ "version": "2.9.47",
4
4
  "description": "Common used react components for arcblock products",
5
5
  "keywords": [
6
6
  "react",
@@ -319,6 +319,10 @@
319
319
  "import": "./es/Video/index.js",
320
320
  "require": "./lib/Video/index.js"
321
321
  },
322
+ "./lib/WalletOSIcon": {
323
+ "import": "./es/WalletOSIcon/index.js",
324
+ "require": "./lib/WalletOSIcon/index.js"
325
+ },
322
326
  "./lib/WebWalletSWKeeper": {
323
327
  "import": "./es/WebWalletSWKeeper/index.js",
324
328
  "require": "./lib/WebWalletSWKeeper/index.js"
@@ -354,12 +358,12 @@
354
358
  "@mui/material": "^5.15.0",
355
359
  "react": ">=18.2.0"
356
360
  },
357
- "gitHead": "8b32fcb561bce3aafb464458b0e0123668ef6f6f",
361
+ "gitHead": "c37f23c144ed8efbd9f23fe3000dac5dc1669e70",
358
362
  "dependencies": {
359
363
  "@arcblock/did-motif": "^1.1.13",
360
- "@arcblock/icons": "^2.9.45",
361
- "@arcblock/nft-display": "^2.9.45",
362
- "@arcblock/react-hooks": "^2.9.45",
364
+ "@arcblock/icons": "^2.9.47",
365
+ "@arcblock/nft-display": "^2.9.47",
366
+ "@arcblock/react-hooks": "^2.9.47",
363
367
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
364
368
  "@emotion/react": "^11.10.4",
365
369
  "@emotion/styled": "^11.10.4",
package/src/SessionUser/components/session-user-item.jsx CHANGED
@@ -1,16 +1,10 @@
1
1
  import PropTypes from 'prop-types';
2
2
  import { forwardRef } from 'react';
3
3
  import { Box, IconButton, Typography } from '@mui/material';
4
- import { useCreation } from 'ahooks';
5
4
  import { Icon } from '@iconify/react';
6
- import ApiIcon from '@iconify-icons/mdi/api';
7
- import IOSRoundedIcon from '@iconify-icons/material-symbols/ios-rounded';
8
- import LanguageIcon from '@iconify-icons/material-symbols/language';
9
5
  import LensIcon from '@iconify-icons/material-symbols/lens';
10
- import AndroidIcon from '@iconify-icons/material-symbols/android';
11
- import QuestionMarkRoundedIcon from '@iconify-icons/material-symbols/question-mark-rounded';
12
- import Auth0Icon from '@iconify-icons/logos/auth0-icon';
13
6
 
7
+ import WalletOSIcon from '../../WalletOSIcon';
14
8
  import Avatar from '../../Avatar';
15
9
  import DID from '../../DID';
16
10
  import { temp as colors } from '../../Colors';
@@ -18,29 +12,6 @@ import { getSourceProvider } from '../libs/utils';
18
12
 
19
13
  const SessionUserItem = forwardRef(({ sessionItem, statusContent, active, ...rest }, ref) => {
20
14
  const isRawWalletAccount = getSourceProvider(sessionItem?.user) === 'wallet';
21
- const walletIcon = useCreation(() => {
22
- if (sessionItem.__isDefault) {
23
- return <Icon icon={QuestionMarkRoundedIcon} style={{ color: 'transparent' }} />;
24
- }
25
-
26
- const { walletOS, provider } = sessionItem?.extra || {};
27
- if (provider === 'auth0') {
28
- return <Icon icon={Auth0Icon} style={{ color: 'black', transform: 'scale(0.85)' }} />;
29
- }
30
- if (walletOS === 'ios') {
31
- return <Icon icon={IOSRoundedIcon} style={{ color: 'black', transform: 'scale(1.1)' }} />;
32
- }
33
- if (walletOS === 'android') {
34
- return <Icon icon={AndroidIcon} style={{ color: 'black' }} />;
35
- }
36
- if (walletOS === 'web') {
37
- return <Icon icon={LanguageIcon} style={{ color: 'black' }} />;
38
- }
39
- if (walletOS === 'api') {
40
- return <Icon icon={ApiIcon} style={{ color: 'black', transform: 'scale(1.05)' }} />;
41
- }
42
- return null;
43
- }, [sessionItem?.extra?.walletOS, sessionItem?.extra?.provider]);
44
15
 
45
16
  return (
46
17
  <Box
@@ -70,7 +41,11 @@ const SessionUserItem = forwardRef(({ sessionItem, statusContent, active, ...res
70
41
  <Box sx={{ mr: 0.5, fontSize: 0 }}>
71
42
  <Avatar did={sessionItem.userDid} size={36} />
72
43
  </Box>
73
- {walletIcon}
44
+ <WalletOSIcon
45
+ loading={sessionItem.__isDefault}
46
+ provider={sessionItem?.extra?.provider}
47
+ walletOS={sessionItem?.extra?.walletOS}
48
+ />
74
49
  {isRawWalletAccount ? (
75
50
  <DID did={sessionItem.userDid} copyable={false} size={14} responsive={false} compact sx={{ lineHeight: 1 }} />
76
51
  ) : (
package/src/Theme/theme.js CHANGED
@@ -1,16 +1,14 @@
1
1
  // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
2
2
  import { createTheme as _createTheme, responsiveFontSizes } from '@mui/material/styles';
3
3
  // 为了避免加载全量的字体导致打包后体积太大，目前只选择了 latin 语系的字体
4
+ import '@fontsource/inter/latin-300.css';
4
5
  import '@fontsource/inter/latin-400.css';
5
6
  import '@fontsource/inter/latin-500.css';
6
- import '@fontsource/inter/latin-600.css';
7
7
  import '@fontsource/inter/latin-700.css';
8
- import '@fontsource/inter/latin-900.css';
8
+ import '@fontsource/inter/latin-ext-300.css';
9
9
  import '@fontsource/inter/latin-ext-400.css';
10
10
  import '@fontsource/inter/latin-ext-500.css';
11
- import '@fontsource/inter/latin-ext-600.css';
12
11
  import '@fontsource/inter/latin-ext-700.css';
13
- import '@fontsource/inter/latin-ext-900.css';
14
12
 
15
13
  import colors from '../Colors';
16
14
 
@@ -75,11 +73,6 @@ export const create = ({ mode = 'light', pageWidth = 'md', palette, typography,
75
73
  '"Segoe UI Emoji"',
76
74
  '"Segoe UI Symbol"',
77
75
  ].join(','),
78
- // 按最新设计规范, 只使用 400/700
79
- fontWeightLight: 400,
80
- fontWeightRegular: 400,
81
- fontWeightMedium: 700,
82
- fontWeightBold: 700,
83
76
  // button 默认使用粗体
84
77
  button: {
85
78
  fontWeight: 700,
package/src/WalletOSIcon/index.jsx ADDED
@@ -0,0 +1,45 @@
1
+ import PropTypes from 'prop-types';
2
+ import { Icon } from '@iconify/react';
3
+ import ApiIcon from '@iconify-icons/mdi/api';
4
+ import IOSRoundedIcon from '@iconify-icons/material-symbols/ios-rounded';
5
+ import LanguageIcon from '@iconify-icons/material-symbols/language';
6
+ import AndroidIcon from '@iconify-icons/material-symbols/android';
7
+ import QuestionMarkRoundedIcon from '@iconify-icons/material-symbols/question-mark-rounded';
8
+ import Auth0Icon from '@iconify-icons/logos/auth0-icon';
9
+
10
+ export default function WalletOSIcon({ loading, walletOS, provider, color }) {
11
+ if (loading) {
12
+ return <Icon icon={QuestionMarkRoundedIcon} style={{ color: 'transparent' }} />;
13
+ }
14
+
15
+ if (provider === 'auth0') {
16
+ return <Icon icon={Auth0Icon} style={{ color, transform: 'scale(0.85)' }} />;
17
+ }
18
+ if (walletOS === 'ios') {
19
+ return <Icon icon={IOSRoundedIcon} style={{ color, transform: 'scale(1.1)' }} />;
20
+ }
21
+ if (walletOS === 'android') {
22
+ return <Icon icon={AndroidIcon} style={{ color }} />;
23
+ }
24
+ if (walletOS === 'web') {
25
+ return <Icon icon={LanguageIcon} style={{ color }} />;
26
+ }
27
+ if (walletOS === 'api') {
28
+ return <Icon icon={ApiIcon} style={{ color, transform: 'scale(1.05)' }} />;
29
+ }
30
+ return null;
31
+ }
32
+
33
+ WalletOSIcon.propTypes = {
34
+ loading: PropTypes.bool,
35
+ walletOS: PropTypes.string,
36
+ provider: PropTypes.string,
37
+ color: PropTypes.string,
38
+ };
39
+
40
+ WalletOSIcon.defaultProps = {
41
+ loading: false,
42
+ walletOS: null,
43
+ provider: null,
44
+ color: 'black',
45
+ };