@arcblock/ux 2.9.45 → 2.9.46
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.
- package/es/SessionUser/components/session-user-item.js +6 -66
- package/es/WalletOSIcon/index.js +80 -0
- package/lib/SessionUser/components/session-user-item.js +6 -66
- package/lib/WalletOSIcon/index.js +88 -0
- package/package.json +9 -5
- package/src/SessionUser/components/session-user-item.jsx +6 -31
- package/src/WalletOSIcon/index.jsx +45 -0
|
@@ -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
|
|
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
|
-
}),
|
|
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,
|
|
@@ -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
|
+
};
|
|
@@ -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
|
|
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
|
-
}),
|
|
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,
|
|
@@ -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.
|
|
3
|
+
"version": "2.9.46",
|
|
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": "
|
|
361
|
+
"gitHead": "a82d6d3ccae838268f9e64b5bc60e6734ecffd89",
|
|
358
362
|
"dependencies": {
|
|
359
363
|
"@arcblock/did-motif": "^1.1.13",
|
|
360
|
-
"@arcblock/icons": "^2.9.
|
|
361
|
-
"@arcblock/nft-display": "^2.9.
|
|
362
|
-
"@arcblock/react-hooks": "^2.9.
|
|
364
|
+
"@arcblock/icons": "^2.9.46",
|
|
365
|
+
"@arcblock/nft-display": "^2.9.46",
|
|
366
|
+
"@arcblock/react-hooks": "^2.9.46",
|
|
363
367
|
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
|
364
368
|
"@emotion/react": "^11.10.4",
|
|
365
369
|
"@emotion/styled": "^11.10.4",
|
|
@@ -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
|
-
|
|
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
|
) : (
|
|
@@ -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
|
+
};
|