@arcblock/ux 2.10.31 → 2.10.32

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 (5) hide show
  1. package/lib/Passport/passport.js +3 -1
  2. package/lib/Util/passport.js +44 -2
  3. package/package.json +5 -5
  4. package/src/Passport/passport.jsx +3 -1
  5. package/src/Util/passport.js +54 -2
package/lib/Passport/passport.js CHANGED
@@ -30,13 +30,15 @@ export default function Passport({
30
30
  ,
31
31
  dangerouslySetInnerHTML: {
32
32
  __html: createPassportSvg({
33
- title: passport.title || passport.name,
33
+ title: passport.scope === 'passport' ? passport.title : passport.name,
34
34
  issuer: passport.issuer && passport.issuer.name,
35
35
  issuerDid: passport.issuer && passport.issuer.id,
36
36
  ownerName: user.fullName,
37
37
  ownerDid: user.did,
38
38
  ownerAvatarUrl: user.avatar,
39
39
  revoked: passport.revoked,
40
+ scope: passport.scope,
41
+ role: passport.role,
40
42
  preferredColor: color,
41
43
  width
42
44
  })
package/lib/Util/passport.js CHANGED
@@ -23,7 +23,6 @@ export const createPassportSvg = ({
23
23
  issuerDid = '',
24
24
  issuerAvatarUrl = '',
25
25
  ownerDid = '',
26
- ownerName = '',
27
26
  ownerAvatarUrl = '',
28
27
  preferredColor = 'default',
29
28
  revoked = false,
@@ -39,7 +38,7 @@ export const createPassportSvg = ({
39
38
  tagVariant: revoked ? 'error' : 'info',
40
39
  color,
41
40
  did: ownerDid,
42
- variant: 'app-passport' || ownerName,
41
+ variant: 'app-passport',
43
42
  verifiable: true,
44
43
  issuer: {
45
44
  name: issuer,
@@ -59,4 +58,47 @@ export const createPassportSvg = ({
59
58
  return `data:image/svg+xml;utf8,${encodeURIComponent(svgXML)}`;
60
59
  }
61
60
  return svgXML;
61
+ };
62
+ export const createKycSvg = ({
63
+ issuer = '',
64
+ title = '',
65
+ issuerDid = '',
66
+ issuerAvatarUrl = '',
67
+ ownerDid = '',
68
+ ownerName = '',
69
+ ownerAvatarUrl = '',
70
+ preferredColor = 'default',
71
+ type = 'email',
72
+ revoked = false,
73
+ isDataUrl = false,
74
+ width = '100%',
75
+ height = '100%'
76
+ }) => {
77
+ const color = getPassportColor(preferredColor, issuerDid);
78
+ const svgXML = getSvg({
79
+ width,
80
+ height,
81
+ tag: revoked ? 'revoked' : '',
82
+ tagVariant: revoked ? 'error' : 'info',
83
+ color,
84
+ did: ownerDid,
85
+ variant: 'app-kyc',
86
+ verifiable: true,
87
+ issuer: {
88
+ name: issuer,
89
+ icon: issuerAvatarUrl
90
+ },
91
+ header: {
92
+ name: ownerName,
93
+ icon: ownerAvatarUrl
94
+ },
95
+ extra: {
96
+ key: type,
97
+ value: title
98
+ }
99
+ });
100
+ if (isDataUrl) {
101
+ return `data:image/svg+xml;utf8,${encodeURIComponent(svgXML)}`;
102
+ }
103
+ return svgXML;
62
104
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcblock/ux",
3
- "version": "2.10.31",
3
+ "version": "2.10.32",
4
4
  "description": "Common used react components for arcblock products",
5
5
  "keywords": [
6
6
  "react",
@@ -61,12 +61,12 @@
61
61
  "react": ">=18.2.0",
62
62
  "react-router-dom": ">=6.22.3"
63
63
  },
64
- "gitHead": "7936b9e4ade01bef0ca85658f9d44812d20b254c",
64
+ "gitHead": "0da245771d21b08f036d4c8f872b61995538c411",
65
65
  "dependencies": {
66
66
  "@arcblock/did-motif": "^1.1.13",
67
- "@arcblock/icons": "^2.10.31",
68
- "@arcblock/nft-display": "^2.10.31",
69
- "@arcblock/react-hooks": "^2.10.31",
67
+ "@arcblock/icons": "^2.10.32",
68
+ "@arcblock/nft-display": "^2.10.32",
69
+ "@arcblock/react-hooks": "^2.10.32",
70
70
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
71
71
  "@fontsource/inter": "^5.0.16",
72
72
  "@fontsource/ubuntu-mono": "^5.0.18",
package/src/Passport/passport.jsx CHANGED
@@ -19,13 +19,15 @@ export default function Passport({ passport, user, color, width, icon, children,
19
19
  // eslint-disable-next-line react/no-danger
20
20
  dangerouslySetInnerHTML={{
21
21
  __html: createPassportSvg({
22
- title: passport.title || passport.name,
22
+ title: passport.scope === 'passport' ? passport.title : passport.name,
23
23
  issuer: passport.issuer && passport.issuer.name,
24
24
  issuerDid: passport.issuer && passport.issuer.id,
25
25
  ownerName: user.fullName,
26
26
  ownerDid: user.did,
27
27
  ownerAvatarUrl: user.avatar,
28
28
  revoked: passport.revoked,
29
+ scope: passport.scope,
30
+ role: passport.role,
29
31
  preferredColor: color,
30
32
  width,
31
33
  }),
package/src/Util/passport.js CHANGED
@@ -27,7 +27,6 @@ export const createPassportSvg = ({
27
27
  issuerDid = '',
28
28
  issuerAvatarUrl = '',
29
29
  ownerDid = '',
30
- ownerName = '',
31
30
  ownerAvatarUrl = '',
32
31
  preferredColor = 'default',
33
32
  revoked = false,
@@ -47,7 +46,7 @@ export const createPassportSvg = ({
47
46
  color,
48
47
 
49
48
  did: ownerDid,
50
- variant: 'app-passport' || ownerName,
49
+ variant: 'app-passport',
51
50
  verifiable: true,
52
51
 
53
52
  issuer: {
@@ -73,3 +72,56 @@ export const createPassportSvg = ({
73
72
 
74
73
  return svgXML;
75
74
  };
75
+
76
+ export const createKycSvg = ({
77
+ issuer = '',
78
+ title = '',
79
+ issuerDid = '',
80
+ issuerAvatarUrl = '',
81
+ ownerDid = '',
82
+ ownerName = '',
83
+ ownerAvatarUrl = '',
84
+ preferredColor = 'default',
85
+ type = 'email',
86
+ revoked = false,
87
+ isDataUrl = false,
88
+ width = '100%',
89
+ height = '100%',
90
+ }) => {
91
+ const color = getPassportColor(preferredColor, issuerDid);
92
+
93
+ const svgXML = getSvg({
94
+ width,
95
+ height,
96
+
97
+ tag: revoked ? 'revoked' : '',
98
+ tagVariant: revoked ? 'error' : 'info',
99
+
100
+ color,
101
+
102
+ did: ownerDid,
103
+ variant: 'app-kyc',
104
+ verifiable: true,
105
+
106
+ issuer: {
107
+ name: issuer,
108
+ icon: issuerAvatarUrl,
109
+ },
110
+
111
+ header: {
112
+ name: ownerName,
113
+ icon: ownerAvatarUrl,
114
+ },
115
+
116
+ extra: {
117
+ key: type,
118
+ value: title,
119
+ },
120
+ });
121
+
122
+ if (isDataUrl) {
123
+ return `data:image/svg+xml;utf8,${encodeURIComponent(svgXML)}`;
124
+ }
125
+
126
+ return svgXML;
127
+ };