@arcblock/ux 2.10.31 → 2.10.32

package/lib/Passport/passport.js

@@ -30,13 +30,15 @@ export default function Passport({
       ,
       dangerouslySetInnerHTML: {
         __html: createPassportSvg({
-          title: passport.title || passport.name,
+          title: passport.scope === 'passport' ? passport.title : passport.name,
           issuer: passport.issuer && passport.issuer.name,
           issuerDid: passport.issuer && passport.issuer.id,
           ownerName: user.fullName,
           ownerDid: user.did,
           ownerAvatarUrl: user.avatar,
           revoked: passport.revoked,
+          scope: passport.scope,
+          role: passport.role,
           preferredColor: color,
           width
         })

package/lib/Util/passport.js

@@ -23,7 +23,6 @@ export const createPassportSvg = ({
   issuerDid = '',
   issuerAvatarUrl = '',
   ownerDid = '',
-  ownerName = '',
   ownerAvatarUrl = '',
   preferredColor = 'default',
   revoked = false,
@@ -39,7 +38,7 @@ export const createPassportSvg = ({
     tagVariant: revoked ? 'error' : 'info',
     color,
     did: ownerDid,
-    variant: 'app-passport' || ownerName,
+    variant: 'app-passport',
     verifiable: true,
     issuer: {
       name: issuer,
@@ -59,4 +58,47 @@ export const createPassportSvg = ({
     return `data:image/svg+xml;utf8,${encodeURIComponent(svgXML)}`;
   }
   return svgXML;
+};
+export const createKycSvg = ({
+  issuer = '',
+  title = '',
+  issuerDid = '',
+  issuerAvatarUrl = '',
+  ownerDid = '',
+  ownerName = '',
+  ownerAvatarUrl = '',
+  preferredColor = 'default',
+  type = 'email',
+  revoked = false,
+  isDataUrl = false,
+  width = '100%',
+  height = '100%'
+}) => {
+  const color = getPassportColor(preferredColor, issuerDid);
+  const svgXML = getSvg({
+    width,
+    height,
+    tag: revoked ? 'revoked' : '',
+    tagVariant: revoked ? 'error' : 'info',
+    color,
+    did: ownerDid,
+    variant: 'app-kyc',
+    verifiable: true,
+    issuer: {
+      name: issuer,
+      icon: issuerAvatarUrl
+    },
+    header: {
+      name: ownerName,
+      icon: ownerAvatarUrl
+    },
+    extra: {
+      key: type,
+      value: title
+    }
+  });
+  if (isDataUrl) {
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svgXML)}`;
+  }
+  return svgXML;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.31",
+  "version": "2.10.32",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -61,12 +61,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "7936b9e4ade01bef0ca85658f9d44812d20b254c",
+  "gitHead": "0da245771d21b08f036d4c8f872b61995538c411",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.31",
-    "@arcblock/nft-display": "^2.10.31",
-    "@arcblock/react-hooks": "^2.10.31",
+    "@arcblock/icons": "^2.10.32",
+    "@arcblock/nft-display": "^2.10.32",
+    "@arcblock/react-hooks": "^2.10.32",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Passport/passport.jsx

@@ -19,13 +19,15 @@ export default function Passport({ passport, user, color, width, icon, children,
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{
           __html: createPassportSvg({
-            title: passport.title || passport.name,
+            title: passport.scope === 'passport' ? passport.title : passport.name,
             issuer: passport.issuer && passport.issuer.name,
             issuerDid: passport.issuer && passport.issuer.id,
             ownerName: user.fullName,
             ownerDid: user.did,
             ownerAvatarUrl: user.avatar,
             revoked: passport.revoked,
+            scope: passport.scope,
+            role: passport.role,
             preferredColor: color,
             width,
           }),

package/src/Util/passport.js

@@ -27,7 +27,6 @@ export const createPassportSvg = ({
   issuerDid = '',
   issuerAvatarUrl = '',
   ownerDid = '',
-  ownerName = '',
   ownerAvatarUrl = '',
   preferredColor = 'default',
   revoked = false,
@@ -47,7 +46,7 @@ export const createPassportSvg = ({
     color,
 
     did: ownerDid,
-    variant: 'app-passport' || ownerName,
+    variant: 'app-passport',
     verifiable: true,
 
     issuer: {
@@ -73,3 +72,56 @@ export const createPassportSvg = ({
 
   return svgXML;
 };
+
+export const createKycSvg = ({
+  issuer = '',
+  title = '',
+  issuerDid = '',
+  issuerAvatarUrl = '',
+  ownerDid = '',
+  ownerName = '',
+  ownerAvatarUrl = '',
+  preferredColor = 'default',
+  type = 'email',
+  revoked = false,
+  isDataUrl = false,
+  width = '100%',
+  height = '100%',
+}) => {
+  const color = getPassportColor(preferredColor, issuerDid);
+
+  const svgXML = getSvg({
+    width,
+    height,
+
+    tag: revoked ? 'revoked' : '',
+    tagVariant: revoked ? 'error' : 'info',
+
+    color,
+
+    did: ownerDid,
+    variant: 'app-kyc',
+    verifiable: true,
+
+    issuer: {
+      name: issuer,
+      icon: issuerAvatarUrl,
+    },
+
+    header: {
+      name: ownerName,
+      icon: ownerAvatarUrl,
+    },
+
+    extra: {
+      key: type,
+      value: title,
+    },
+  });
+
+  if (isDataUrl) {
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svgXML)}`;
+  }
+
+  return svgXML;
+};