@arcblock/ux 2.9.9 → 2.9.11

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 (16) hide show
  1. package/es/NFTDisplay/NFTBroken.svg +34 -0
  2. package/es/NFTDisplay/broken.js +125 -11
  3. package/es/NFTDisplay/index.js +8 -3
  4. package/es/NFTDisplay/loading.js +1 -1
  5. package/es/SessionUser/components/session-user-item.js +4 -4
  6. package/lib/NFTDisplay/NFTBroken.svg +34 -0
  7. package/lib/NFTDisplay/broken.js +102 -4
  8. package/lib/NFTDisplay/index.js +7 -3
  9. package/lib/NFTDisplay/loading.js +1 -1
  10. package/lib/SessionUser/components/session-user-item.js +3 -3
  11. package/package.json +4 -4
  12. package/src/NFTDisplay/NFTBroken.svg +34 -0
  13. package/src/NFTDisplay/broken.js +45 -11
  14. package/src/NFTDisplay/index.js +3 -1
  15. package/src/NFTDisplay/loading.js +1 -1
  16. package/src/SessionUser/components/session-user-item.jsx +4 -4
package/es/NFTDisplay/NFTBroken.svg ADDED
@@ -0,0 +1,34 @@
1
+ <svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_317_299)">
3
+ <rect x="60" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
4
+ <rect width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
5
+ <rect x="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
6
+ <rect x="120" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
7
+ <rect x="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
8
+ <rect y="60" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
9
+ <rect x="60" y="60" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
10
+ <rect x="120" y="60" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
11
+ <rect x="240" y="59.9999" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
12
+ <rect x="180" y="59.9999" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
13
+ <rect y="120" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
14
+ <rect y="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
15
+ <rect y="240" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
16
+ <rect x="60" y="120" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
17
+ <rect x="60" y="180" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
18
+ <rect x="60" y="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
19
+ <rect x="120" y="120" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
20
+ <rect x="180" y="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
21
+ <rect x="120" y="240" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
22
+ <rect x="240" y="120" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
23
+ <rect x="120" y="180" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
24
+ <rect x="180" y="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
25
+ <rect x="180" y="120" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
26
+ <rect x="240" y="180" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
27
+ <rect x="240" y="240" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
28
+ </g>
29
+ <defs>
30
+ <clipPath id="clip0_317_299">
31
+ <rect width="300" height="300" fill="white" style="fill:white;fill-opacity:1;"/>
32
+ </clipPath>
33
+ </defs>
34
+ </svg>
package/es/NFTDisplay/broken.js CHANGED
@@ -1,18 +1,132 @@
1
- import BrokenImage from '@mui/icons-material/BrokenImage';
1
+ import React from "react";
2
+ import Box from '@mui/material/Box';
3
+ import PropTypes from 'prop-types';
4
+ var NFTBroken = function NFTBroken(props) {
5
+ return /*#__PURE__*/_jsxs("svg", {
6
+ ...props,
7
+ children: [/*#__PURE__*/_jsxs("g", {
8
+ clipPath: "url(#a)",
9
+ children: [/*#__PURE__*/_jsx("path", {
10
+ fill: "color(display-p3 .9529 .9569 .9647)",
11
+ d: "M60 0h60v60H60z"
12
+ }), /*#__PURE__*/_jsx("path", {
13
+ fill: "color(display-p3 .9765 .9804 .9843)",
14
+ d: "M0 0h60v60H0zM180 0h60v60h-60z"
15
+ }), /*#__PURE__*/_jsx("path", {
16
+ fill: "color(display-p3 .898 .9059 .9216)",
17
+ d: "M120 0h60v60h-60zM240 0h60v60h-60zM0 60h60v60H0z"
18
+ }), /*#__PURE__*/_jsx("path", {
19
+ fill: "color(display-p3 .9765 .9804 .9843)",
20
+ d: "M60 60h60v60H60z"
21
+ }), /*#__PURE__*/_jsx("path", {
22
+ fill: "color(display-p3 .9529 .9569 .9647)",
23
+ d: "M120 60h60v60h-60zM240 60h60v60h-60z"
24
+ }), /*#__PURE__*/_jsx("path", {
25
+ fill: "color(display-p3 .898 .9059 .9216)",
26
+ d: "M180 60h60v60h-60z"
27
+ }), /*#__PURE__*/_jsx("path", {
28
+ fill: "color(display-p3 .9529 .9569 .9647)",
29
+ d: "M0 120h60v60H0z"
30
+ }), /*#__PURE__*/_jsx("path", {
31
+ fill: "color(display-p3 .9765 .9804 .9843)",
32
+ d: "M0 180h60v60H0z"
33
+ }), /*#__PURE__*/_jsx("path", {
34
+ fill: "color(display-p3 .9529 .9569 .9647)",
35
+ d: "M0 240h60v60H0z"
36
+ }), /*#__PURE__*/_jsx("path", {
37
+ fill: "color(display-p3 .898 .9059 .9216)",
38
+ d: "M60 120h60v60H60z"
39
+ }), /*#__PURE__*/_jsx("path", {
40
+ fill: "color(display-p3 .9529 .9569 .9647)",
41
+ d: "M60 180h60v60H60z"
42
+ }), /*#__PURE__*/_jsx("path", {
43
+ fill: "color(display-p3 .898 .9059 .9216)",
44
+ d: "M60 240h60v60H60z"
45
+ }), /*#__PURE__*/_jsx("path", {
46
+ fill: "color(display-p3 .9765 .9804 .9843)",
47
+ d: "M120 120h60v60h-60zM180 180h60v60h-60z"
48
+ }), /*#__PURE__*/_jsx("path", {
49
+ fill: "color(display-p3 .9529 .9569 .9647)",
50
+ d: "M120 240h60v60h-60z"
51
+ }), /*#__PURE__*/_jsx("path", {
52
+ fill: "color(display-p3 .9765 .9804 .9843)",
53
+ d: "M240 120h60v60h-60z"
54
+ }), /*#__PURE__*/_jsx("path", {
55
+ fill: "color(display-p3 .898 .9059 .9216)",
56
+ d: "M120 180h60v60h-60zM180 240h60v60h-60z"
57
+ }), /*#__PURE__*/_jsx("path", {
58
+ fill: "color(display-p3 .9529 .9569 .9647)",
59
+ d: "M180 120h60v60h-60zM240 180h60v60h-60z"
60
+ }), /*#__PURE__*/_jsx("path", {
61
+ fill: "color(display-p3 .9765 .9804 .9843)",
62
+ d: "M240 240h60v60h-60z"
63
+ })]
64
+ }), /*#__PURE__*/_jsx("defs", {
65
+ children: /*#__PURE__*/_jsx("clipPath", {
66
+ id: "a",
67
+ children: /*#__PURE__*/_jsx("path", {
68
+ fill: "#fff",
69
+ d: "M0 0h300v300H0z"
70
+ })
71
+ })
72
+ })]
73
+ });
74
+ };
75
+ NFTBroken.defaultProps = {
76
+ width: "300",
77
+ height: "300",
78
+ viewBox: "0 0 300 300",
79
+ fill: "none",
80
+ xmlns: "http://www.w3.org/2000/svg"
81
+ };
2
82
  import { styled } from '../Theme';
3
83
  import { jsx as _jsx } from "react/jsx-runtime";
4
- export default function Broken() {
5
- return /*#__PURE__*/_jsx(Root, {
6
- className: "nft-display-broken"
84
+ import { jsxs as _jsxs } from "react/jsx-runtime";
85
+ export default function Broken({
86
+ children
87
+ } = {}) {
88
+ return /*#__PURE__*/_jsxs(Root, {
89
+ children: [/*#__PURE__*/_jsx(NFTBroken, {
90
+ className: "nft-display-broken-background"
91
+ }), children && /*#__PURE__*/_jsx(Box, {
92
+ className: "nft-display-broken-content",
93
+ children: children
94
+ })]
7
95
  });
8
96
  }
9
- const Root = styled(BrokenImage)`
10
- && {
97
+ Broken.propTypes = {
98
+ children: PropTypes.node
99
+ };
100
+ Broken.defaultProps = {
101
+ children: 'Non-publicly accessible NFT'
102
+ };
103
+ const Root = styled(Box)`
104
+ width: 100%;
105
+ height: 100%;
106
+ position: relative;
107
+
108
+ .nft-display-broken-background {
109
+ width: 100%;
110
+ height: 100%;
111
+ }
112
+
113
+ .nft-display-broken-content {
114
+ display: flex;
11
115
  width: 100%;
12
- max-width: 200px;
13
- height: auto;
14
- max-width: 100%;
15
- max-height: 100%;
16
- fill: #ddd;
116
+ height: 100%;
117
+ justify-content: center;
118
+ align-items: center;
119
+ position: absolute;
120
+ top: 0;
121
+ left: 0;
122
+ right: 0;
123
+ bottom: 0;
124
+ margin: auto;
125
+ mix-blend-mode: plus-darker;
126
+ font-size: 13px;
127
+ color: #9aa3b0;
128
+ text-align: center;
129
+ text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
130
+ user-select: none;
17
131
  }
18
132
  `;
package/es/NFTDisplay/index.js CHANGED
@@ -163,9 +163,14 @@ function NFTDisplay({
163
163
  // eslint-disable-next-line jsx-a11y/alt-text
164
164
  _jsx("object", {
165
165
  type: objectType,
166
- data: url
167
- // onError={() => setState({ ...state, error: true })}
168
- ,
166
+ data: url,
167
+ onErrorCapture: () => {
168
+ setState({
169
+ ...state,
170
+ error: true,
171
+ loading: false
172
+ });
173
+ },
169
174
  onLoad: safeOnLoad,
170
175
  style: {
171
176
  width: 'auto',
package/es/NFTDisplay/loading.js CHANGED
@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
3
3
  export default function Loading() {
4
4
  return /*#__PURE__*/_jsx(Root, {
5
5
  className: "nft-display__loading",
6
- children: "loading..."
6
+ children: "Loading..."
7
7
  });
8
8
  }
9
9
  const Root = styled('span')`
package/es/SessionUser/components/session-user-item.js CHANGED
@@ -13,7 +13,7 @@ import Auth0Icon from '@iconify-icons/logos/auth0-icon';
13
13
  import Avatar from '../../Avatar';
14
14
  import DID from '../../DID';
15
15
  import { temp as colors } from '../../Colors';
16
- import { getWalletDid } from '../libs/utils';
16
+ import { getSourceProvider } from '../libs/utils';
17
17
  import { jsx as _jsx } from "react/jsx-runtime";
18
18
  import { jsxs as _jsxs } from "react/jsx-runtime";
19
19
  const SessionUserItem = /*#__PURE__*/forwardRef(({
@@ -22,7 +22,7 @@ const SessionUserItem = /*#__PURE__*/forwardRef(({
22
22
  active,
23
23
  ...rest
24
24
  }, ref) => {
25
- const walletDid = getWalletDid(sessionItem?.user);
25
+ const isRawWalletAccount = getSourceProvider(sessionItem?.user) === 'wallet';
26
26
  const walletIcon = useCreation(() => {
27
27
  if (sessionItem.__isDefault) {
28
28
  return /*#__PURE__*/_jsx(Icon, {
@@ -114,8 +114,8 @@ const SessionUserItem = /*#__PURE__*/forwardRef(({
114
114
  did: sessionItem.userDid,
115
115
  size: 36
116
116
  })
117
- }), walletIcon, walletDid ? /*#__PURE__*/_jsx(DID, {
118
- did: walletDid,
117
+ }), walletIcon, isRawWalletAccount ? /*#__PURE__*/_jsx(DID, {
118
+ did: sessionItem.userDid,
119
119
  copyable: false,
120
120
  size: 14,
121
121
  responsive: false,
package/lib/NFTDisplay/NFTBroken.svg ADDED
@@ -0,0 +1,34 @@
1
+ <svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_317_299)">
3
+ <rect x="60" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
4
+ <rect width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
5
+ <rect x="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
6
+ <rect x="120" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
7
+ <rect x="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
8
+ <rect y="60" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
9
+ <rect x="60" y="60" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
10
+ <rect x="120" y="60" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
11
+ <rect x="240" y="59.9999" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
12
+ <rect x="180" y="59.9999" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
13
+ <rect y="120" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
14
+ <rect y="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
15
+ <rect y="240" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
16
+ <rect x="60" y="120" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
17
+ <rect x="60" y="180" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
18
+ <rect x="60" y="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
19
+ <rect x="120" y="120" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
20
+ <rect x="180" y="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
21
+ <rect x="120" y="240" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
22
+ <rect x="240" y="120" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
23
+ <rect x="120" y="180" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
24
+ <rect x="180" y="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
25
+ <rect x="180" y="120" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
26
+ <rect x="240" y="180" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
27
+ <rect x="240" y="240" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
28
+ </g>
29
+ <defs>
30
+ <clipPath id="clip0_317_299">
31
+ <rect width="300" height="300" fill="white" style="fill:white;fill-opacity:1;"/>
32
+ </clipPath>
33
+ </defs>
34
+ </svg>
package/lib/NFTDisplay/broken.js CHANGED
@@ -4,15 +4,113 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = Broken;
7
- var _BrokenImage = _interopRequireDefault(require("@mui/icons-material/BrokenImage"));
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _Box = _interopRequireDefault(require("@mui/material/Box"));
9
+ var _propTypes = _interopRequireDefault(require("prop-types"));
8
10
  var _Theme = require("../Theme");
9
11
  var _jsxRuntime = require("react/jsx-runtime");
10
12
  var _templateObject;
11
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
15
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
16
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
17
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
18
+ function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
12
19
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
20
+ var NFTBroken = function NFTBroken(props) {
21
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({}, props), {}, {
22
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
23
+ clipPath: "url(#a)",
24
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
25
+ fill: "color(display-p3 .9529 .9569 .9647)",
26
+ d: "M60 0h60v60H60z"
27
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
28
+ fill: "color(display-p3 .9765 .9804 .9843)",
29
+ d: "M0 0h60v60H0zM180 0h60v60h-60z"
30
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
31
+ fill: "color(display-p3 .898 .9059 .9216)",
32
+ d: "M120 0h60v60h-60zM240 0h60v60h-60zM0 60h60v60H0z"
33
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
34
+ fill: "color(display-p3 .9765 .9804 .9843)",
35
+ d: "M60 60h60v60H60z"
36
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
37
+ fill: "color(display-p3 .9529 .9569 .9647)",
38
+ d: "M120 60h60v60h-60zM240 60h60v60h-60z"
39
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
40
+ fill: "color(display-p3 .898 .9059 .9216)",
41
+ d: "M180 60h60v60h-60z"
42
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
43
+ fill: "color(display-p3 .9529 .9569 .9647)",
44
+ d: "M0 120h60v60H0z"
45
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
46
+ fill: "color(display-p3 .9765 .9804 .9843)",
47
+ d: "M0 180h60v60H0z"
48
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
49
+ fill: "color(display-p3 .9529 .9569 .9647)",
50
+ d: "M0 240h60v60H0z"
51
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
52
+ fill: "color(display-p3 .898 .9059 .9216)",
53
+ d: "M60 120h60v60H60z"
54
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
55
+ fill: "color(display-p3 .9529 .9569 .9647)",
56
+ d: "M60 180h60v60H60z"
57
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
58
+ fill: "color(display-p3 .898 .9059 .9216)",
59
+ d: "M60 240h60v60H60z"
60
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
61
+ fill: "color(display-p3 .9765 .9804 .9843)",
62
+ d: "M120 120h60v60h-60zM180 180h60v60h-60z"
63
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
64
+ fill: "color(display-p3 .9529 .9569 .9647)",
65
+ d: "M120 240h60v60h-60z"
66
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
67
+ fill: "color(display-p3 .9765 .9804 .9843)",
68
+ d: "M240 120h60v60h-60z"
69
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
70
+ fill: "color(display-p3 .898 .9059 .9216)",
71
+ d: "M120 180h60v60h-60zM180 240h60v60h-60z"
72
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
73
+ fill: "color(display-p3 .9529 .9569 .9647)",
74
+ d: "M180 120h60v60h-60zM240 180h60v60h-60z"
75
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
76
+ fill: "color(display-p3 .9765 .9804 .9843)",
77
+ d: "M240 240h60v60h-60z"
78
+ })]
79
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("defs", {
80
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
81
+ id: "a",
82
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
83
+ fill: "#fff",
84
+ d: "M0 0h300v300H0z"
85
+ })
86
+ })
87
+ })]
88
+ }));
89
+ };
90
+ NFTBroken.defaultProps = {
91
+ width: "300",
92
+ height: "300",
93
+ viewBox: "0 0 300 300",
94
+ fill: "none",
95
+ xmlns: "http://www.w3.org/2000/svg"
96
+ };
13
97
  function Broken() {
14
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
15
- className: "nft-display-broken"
98
+ let {
99
+ children
100
+ } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
101
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
102
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NFTBroken, {
103
+ className: "nft-display-broken-background"
104
+ }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
105
+ className: "nft-display-broken-content",
106
+ children: children
107
+ })]
16
108
  });
17
109
  }
18
- const Root = (0, _Theme.styled)(_BrokenImage.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n && {\n width: 100%;\n max-width: 200px;\n height: auto;\n max-width: 100%;\n max-height: 100%;\n fill: #ddd;\n }\n"])));
110
+ Broken.propTypes = {
111
+ children: _propTypes.default.node
112
+ };
113
+ Broken.defaultProps = {
114
+ children: 'Non-publicly accessible NFT'
115
+ };
116
+ const Root = (0, _Theme.styled)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n position: relative;\n\n .nft-display-broken-background {\n width: 100%;\n height: 100%;\n }\n\n .nft-display-broken-content {\n display: flex;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n mix-blend-mode: plus-darker;\n font-size: 13px;\n color: #9aa3b0;\n text-align: center;\n text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;\n user-select: none;\n }\n"])));
package/lib/NFTDisplay/index.js CHANGED
@@ -182,9 +182,13 @@ function NFTDisplay(_ref) {
182
182
  // eslint-disable-next-line jsx-a11y/alt-text
183
183
  (0, _jsxRuntime.jsx)("object", {
184
184
  type: objectType,
185
- data: url
186
- // onError={() => setState({ ...state, error: true })}
187
- ,
185
+ data: url,
186
+ onErrorCapture: () => {
187
+ setState(_objectSpread(_objectSpread({}, state), {}, {
188
+ error: true,
189
+ loading: false
190
+ }));
191
+ },
188
192
  onLoad: safeOnLoad,
189
193
  style: {
190
194
  width: 'auto',
package/lib/NFTDisplay/loading.js CHANGED
@@ -11,7 +11,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
11
11
  function Loading() {
12
12
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
13
13
  className: "nft-display__loading",
14
- children: "loading..."
14
+ children: "Loading..."
15
15
  });
16
16
  }
17
17
  const Root = (0, _Theme.styled)('span')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n width: 100%;\n height: 100%;\n color: #ccc;\n background-color: #eee;\n"])));
package/lib/SessionUser/components/session-user-item.js CHANGED
@@ -38,7 +38,7 @@ const SessionUserItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
38
38
  active
39
39
  } = _ref,
40
40
  rest = _objectWithoutProperties(_ref, _excluded);
41
- const walletDid = (0, _utils.getWalletDid)(sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.user);
41
+ const isRawWalletAccount = (0, _utils.getSourceProvider)(sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.user) === 'wallet';
42
42
  const walletIcon = (0, _ahooks.useCreation)(() => {
43
43
  if (sessionItem.__isDefault) {
44
44
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
@@ -128,8 +128,8 @@ const SessionUserItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
128
128
  did: sessionItem.userDid,
129
129
  size: 36
130
130
  })
131
- }), walletIcon, walletDid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
132
- did: walletDid,
131
+ }), walletIcon, isRawWalletAccount ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
132
+ did: sessionItem.userDid,
133
133
  copyable: false,
134
134
  size: 14,
135
135
  responsive: false,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcblock/ux",
3
- "version": "2.9.9",
3
+ "version": "2.9.11",
4
4
  "description": "Common used react components for arcblock products",
5
5
  "keywords": [
6
6
  "react",
@@ -340,11 +340,11 @@
340
340
  "peerDependencies": {
341
341
  "react": ">=18.1.0"
342
342
  },
343
- "gitHead": "518ea493a3b47e8411ea1e9045a9ad14d453eb3c",
343
+ "gitHead": "75e1303dc4a712eddea6c4aa74a4ee9edc1bc06d",
344
344
  "dependencies": {
345
345
  "@arcblock/did-motif": "^1.1.13",
346
- "@arcblock/icons": "^2.9.9",
347
- "@arcblock/react-hooks": "^2.9.9",
346
+ "@arcblock/icons": "^2.9.11",
347
+ "@arcblock/react-hooks": "^2.9.11",
348
348
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
349
349
  "@emotion/react": "^11.10.4",
350
350
  "@emotion/styled": "^11.10.4",
package/src/NFTDisplay/NFTBroken.svg ADDED
@@ -0,0 +1,34 @@
1
+ <svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_317_299)">
3
+ <rect x="60" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
4
+ <rect width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
5
+ <rect x="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
6
+ <rect x="120" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
7
+ <rect x="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
8
+ <rect y="60" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
9
+ <rect x="60" y="60" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
10
+ <rect x="120" y="60" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
11
+ <rect x="240" y="59.9999" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
12
+ <rect x="180" y="59.9999" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
13
+ <rect y="120" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
14
+ <rect y="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
15
+ <rect y="240" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
16
+ <rect x="60" y="120" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
17
+ <rect x="60" y="180" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
18
+ <rect x="60" y="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
19
+ <rect x="120" y="120" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
20
+ <rect x="180" y="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
21
+ <rect x="120" y="240" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
22
+ <rect x="240" y="120" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
23
+ <rect x="120" y="180" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
24
+ <rect x="180" y="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
25
+ <rect x="180" y="120" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
26
+ <rect x="240" y="180" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
27
+ <rect x="240" y="240" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
28
+ </g>
29
+ <defs>
30
+ <clipPath id="clip0_317_299">
31
+ <rect width="300" height="300" fill="white" style="fill:white;fill-opacity:1;"/>
32
+ </clipPath>
33
+ </defs>
34
+ </svg>
package/src/NFTDisplay/broken.js CHANGED
@@ -1,18 +1,52 @@
1
- import BrokenImage from '@mui/icons-material/BrokenImage';
2
-
1
+ import Box from '@mui/material/Box';
2
+ import PropTypes from 'prop-types';
3
+ import NFTBroken from './NFTBroken.svg';
3
4
  import { styled } from '../Theme';
4
5
 
5
- export default function Broken() {
6
- return <Root className="nft-display-broken" />;
6
+ export default function Broken({ children } = {}) {
7
+ return (
8
+ <Root>
9
+ <NFTBroken className="nft-display-broken-background" />
10
+ {children && <Box className="nft-display-broken-content">{children}</Box>}
11
+ </Root>
12
+ );
7
13
  }
8
14
 
9
- const Root = styled(BrokenImage)`
10
- && {
15
+ Broken.propTypes = {
16
+ children: PropTypes.node,
17
+ };
18
+
19
+ Broken.defaultProps = {
20
+ children: 'Non-publicly accessible NFT',
21
+ };
22
+
23
+ const Root = styled(Box)`
24
+ width: 100%;
25
+ height: 100%;
26
+ position: relative;
27
+
28
+ .nft-display-broken-background {
29
+ width: 100%;
30
+ height: 100%;
31
+ }
32
+
33
+ .nft-display-broken-content {
34
+ display: flex;
11
35
  width: 100%;
12
- max-width: 200px;
13
- height: auto;
14
- max-width: 100%;
15
- max-height: 100%;
16
- fill: #ddd;
36
+ height: 100%;
37
+ justify-content: center;
38
+ align-items: center;
39
+ position: absolute;
40
+ top: 0;
41
+ left: 0;
42
+ right: 0;
43
+ bottom: 0;
44
+ margin: auto;
45
+ mix-blend-mode: plus-darker;
46
+ font-size: 13px;
47
+ color: #9aa3b0;
48
+ text-align: center;
49
+ text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
50
+ user-select: none;
17
51
  }
18
52
  `;
package/src/NFTDisplay/index.js CHANGED
@@ -162,7 +162,9 @@ function NFTDisplay({
162
162
  key={url}
163
163
  type={objectType}
164
164
  data={url}
165
- // onError={() => setState({ ...state, error: true })}
165
+ onErrorCapture={() => {
166
+ setState({ ...state, error: true, loading: false });
167
+ }}
166
168
  onLoad={safeOnLoad}
167
169
  style={{ width: 'auto', height: 'auto', pointerEvents: 'none' }}
168
170
  />
package/src/NFTDisplay/loading.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { styled } from '../Theme';
2
2
 
3
3
  export default function Loading() {
4
- return <Root className="nft-display__loading">loading...</Root>;
4
+ return <Root className="nft-display__loading">Loading...</Root>;
5
5
  }
6
6
 
7
7
  const Root = styled('span')`
package/src/SessionUser/components/session-user-item.jsx CHANGED
@@ -14,10 +14,10 @@ import Auth0Icon from '@iconify-icons/logos/auth0-icon';
14
14
  import Avatar from '../../Avatar';
15
15
  import DID from '../../DID';
16
16
  import { temp as colors } from '../../Colors';
17
- import { getWalletDid } from '../libs/utils';
17
+ import { getSourceProvider } from '../libs/utils';
18
18
 
19
19
  const SessionUserItem = forwardRef(({ sessionItem, statusContent, active, ...rest }, ref) => {
20
- const walletDid = getWalletDid(sessionItem?.user);
20
+ const isRawWalletAccount = getSourceProvider(sessionItem?.user) === 'wallet';
21
21
  const walletIcon = useCreation(() => {
22
22
  if (sessionItem.__isDefault) {
23
23
  return <Icon icon={QuestionMarkRoundedIcon} style={{ color: 'transparent' }} />;
@@ -71,8 +71,8 @@ const SessionUserItem = forwardRef(({ sessionItem, statusContent, active, ...res
71
71
  <Avatar did={sessionItem.userDid} size={36} />
72
72
  </Box>
73
73
  {walletIcon}
74
- {walletDid ? (
75
- <DID did={walletDid} copyable={false} size={14} responsive={false} compact sx={{ lineHeight: 1 }} />
74
+ {isRawWalletAccount ? (
75
+ <DID did={sessionItem.userDid} copyable={false} size={14} responsive={false} compact sx={{ lineHeight: 1 }} />
76
76
  ) : (
77
77
  sessionItem.user.email && <Typography sx={{ fontSize: 14 }}>{sessionItem.user.email}</Typography>
78
78
  )}