@arcblock/nft-display 2.10.31 → 2.10.32

package/lib/color.d.ts

@@ -19,6 +19,10 @@ export declare const DEFAULT_COLORS: {
         start: string;
         end: string;
     };
+    'app-kyc': {
+        start: string;
+        end: string;
+    };
 };
 export declare const MOTIF_COLORS: string[];
 /**

package/lib/color.js

@@ -25,6 +25,10 @@ exports.DEFAULT_COLORS = {
         start: '#3882C7',
         end: '#7AB2F6',
     },
+    'app-kyc': {
+        start: '#3882C7',
+        end: '#7AB2F6',
+    },
 };
 exports.MOTIF_COLORS = [
     '#E94E4E',

package/lib/index.d.ts

@@ -2,7 +2,7 @@ import type { LiteralUnion } from 'type-fest';
 import { NFTColor } from './color';
 export * from './color';
 export type NFTLayout = (data: string, width: any, height: any) => string;
-export type NFTVariant = LiteralUnion<'did-space' | 'app-space' | 'app-passport' | 'app-purchase', string>;
+export type NFTVariant = LiteralUnion<'did-space' | 'app-space' | 'app-passport' | 'app-purchase' | 'app-kyc', string>;
 export type NFTTagVariant = LiteralUnion<'info' | 'success' | 'error' | 'warning', string>;
 export type NFTChain = LiteralUnion<'arcblock' | 'ethereum' | '', string>;
 export type NFTSubject = {
@@ -31,8 +31,8 @@ export type NFTProps = {
 export declare const formatDid: (did: string, length?: number) => string;
 export declare const getLayoutSvg: (variant: NFTVariant, id: string, color: NFTColor) => NFTLayout;
 export declare const getHeaderSvg: (variant: NFTVariant, id: string, header?: NFTSubject) => string;
-export declare const getIssuerSvg: (issuer: NFTSubject, id: string, fontSize?: number) => string;
-export declare const getExtraSvg: (extra: NFTExtra, id: string, fontSize?: number) => string;
+export declare const getIssuerSvg: (issuer: NFTSubject, id: string, variant: NFTVariant, fontSize?: number) => string;
+export declare const getExtraSvg: (extra: NFTExtra, id: string, variant: NFTVariant, fontSize?: number) => string;
 export declare const getDidSvg: (did: string, id: string, fontSize?: number) => string;
 export declare const getVerifiableBadge: (id: string) => string;
 export declare const getChainBadge: (chain: NFTChain, only: boolean, id: string) => string;

package/lib/index.js

@@ -333,6 +333,46 @@ const getLayoutSvg = (variant, id, color) => {
     </defs>
     ${content}
   </svg>`;
+    }
+    if (variant === 'app-kyc') {
+        return (content, width, height) => `<svg width="${width}" height="${height}" viewBox="0 0 228 258" fill="none" xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g clip-path="url(#${getId(id, 'border-top')})">
+    <g clip-path="url(#${getId(id, 'border-bottom')})">
+      <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M224 2H4V127H224V2ZM102 12C99.7909 12 98 13.7909 98 16C98 18.2091 99.7909 20 102 20H126C128.209 20 130 18.2091 130 16C130 13.7909 128.209 12 126 12H102Z"
+        style="fill:${color.start};fill-opacity:1;" />
+      <g clip-path="url(#${getId(id, 'header-icon')})">
+        <path
+          d="M96.5 61C96.5 59.5413 97.0795 58.1424 98.1109 57.1109C99.1424 56.0795 100.541 55.5 102 55.5H104.5C105.952 55.4992 107.345 54.924 108.375 53.9L110.125 52.15C110.636 51.636 111.244 51.2281 111.913 50.9498C112.582 50.6714 113.3 50.5281 114.025 50.5281C114.75 50.5281 115.468 50.6714 116.137 50.9498C116.806 51.2281 117.414 51.636 117.925 52.15L119.675 53.9C120.705 54.925 122.1 55.5 123.55 55.5H126.05C127.509 55.5 128.908 56.0795 129.939 57.1109C130.971 58.1424 131.55 59.5413 131.55 61V63.5C131.55 64.95 132.125 66.345 133.15 67.375L134.9 69.125C135.414 69.6361 135.822 70.2438 136.1 70.9131C136.379 71.5824 136.522 72.3001 136.522 73.025C136.522 73.7499 136.379 74.4676 136.1 75.1369C135.822 75.8062 135.414 76.4139 134.9 76.925L133.15 78.675C132.126 79.7048 131.551 81.0977 131.55 82.55V85.05C131.55 86.5087 130.971 87.9076 129.939 88.9391C128.908 89.9705 127.509 90.55 126.05 90.55H123.55C122.098 90.5508 120.705 91.126 119.675 92.15L117.925 93.9C117.414 94.414 116.806 94.8219 116.137 95.1002C115.468 95.3786 114.75 95.5219 114.025 95.5219C113.3 95.5219 112.582 95.3786 111.913 95.1002C111.244 94.8219 110.636 94.414 110.125 93.9L108.375 92.15C107.345 91.126 105.952 90.5508 104.5 90.55H102C100.541 90.55 99.1424 89.9705 98.1109 88.9391C97.0795 87.9076 96.5 86.5087 96.5 85.05V82.55C96.4992 81.0977 95.924 79.7048 94.9 78.675L93.15 76.925C92.636 76.4139 92.2281 75.8062 91.9498 75.1369C91.6714 74.4676 91.5281 73.7499 91.5281 73.025C91.5281 72.3001 91.6714 71.5824 91.9498 70.9131C92.2281 70.2438 92.636 69.6361 93.15 69.125L94.9 67.375C95.924 66.3452 96.4992 64.9522 96.5 63.5V61Z"
+          stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="3" stroke-linecap="round"
+          stroke-linejoin="round" />
+        <path d="M106.5 73L111.5 78L121.5 68" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="3"
+          stroke-linecap="round" stroke-linejoin="round" />
+      </g>
+    </g>
+    <rect width="220" height="125" transform="translate(4 126)" fill="url(#${getId(id, 'body-paint')})" style="" />
+    ${content}
+  </g>
+  <defs>
+    <linearGradient id="${getId(id, 'body-paint')}" x1="220" y1="30.7377" x2="-2.99999" y2="30.7377"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#101010"
+        style="stop-color:#101010;stop-color:color(display-p3 0.0625 0.0625 0.0625);stop-opacity:1;" />
+      <stop offset="1" stop-color="#272727"
+        style="stop-color:#272727;stop-color:color(display-p3 0.1542 0.1542 0.1542);stop-opacity:1;" />
+    </linearGradient>
+    <clipPath id="${getId(id, 'border-top')}">
+      <rect x="4" y="2" width="220" height="250" rx="8" fill="white" style="fill:white;fill-opacity:1;" />
+    </clipPath>
+    <clipPath id="${getId(id, 'border-bottom')}">
+      <rect width="220" height="125" fill="white" style="fill:white;fill-opacity:1;" transform="translate(4 2)" />
+    </clipPath>
+    <clipPath id="${getId(id, 'header-icon')}">
+      <rect width="60" height="60" fill="white" style="fill:white;fill-opacity:1;" transform="translate(84 43)" />
+    </clipPath>
+  </defs>
+</svg>`;
     }
     return () => '';
 };
@@ -424,20 +464,62 @@ const getHeaderSvg = (variant, id, header) => {
     <circle cx="114" cy="15" r="20" fill="#D9D9D9"/>
     <text x="50%" y="55" width="228" font-size="14" fill="#FFFFFF" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica, Arial, sans-serif">${header.name}</text>
   </g>`;
+    }
+    if (variant === 'app-kyc') {
+        return `<g id="${getId(id, 'holder')}" transform="translate(24, 151)" width="180" height="24">
+  <circle cx="12" cy="12" r="12" fill="url(#${getId(id, 'holder-image')})" />
+  <foreignObject x="32" y="0" width="156" height="24">
+    <div
+      xmlns="http://www.w3.org/1999/xhtml"
+      style="font-size: 18px; line-height: 24px; color: #FFFFFF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
+    >
+      ${header.name}
+    </div>
+  </foreignObject>
+  <defs>
+    <pattern id="${getId(id, 'holder-image')}" width="24" height="24" patternUnits="userSpaceOnUse">
+      <image
+        xlink:href="${header.icon}"
+        x="0"
+        y="0"
+        width="24"
+        height="24" />
+    </pattern>
+  </defs>
+</g>`;
     }
     return '';
 };
 exports.getHeaderSvg = getHeaderSvg;
-const getIssuerSvg = (issuer, id, fontSize = 12) => {
+const getIssuerSvg = (issuer, id, variant, fontSize = 12) => {
+    const translateX = variant === 'app-kyc' ? 24 : 24;
+    const translateY = variant === 'app-kyc' ? 188 : 151;
+    if (variant === 'app-kyc') {
+        return `<g id="${getId(id, 'issuer')}" transform="translate(${translateX}, ${translateY})" width="180" height="14">
+  <g id="${getId(id, 'issuer-badge')}">
+    <path
+      d="M11.3727 8.65674L12.5195 10.6436C12.5667 10.7254 12.5933 10.8174 12.5972 10.9118C12.601 11.0061 12.5818 11.1 12.5414 11.1854C12.501 11.2707 12.4404 11.345 12.365 11.4018C12.2895 11.4586 12.2014 11.4963 12.1083 11.5116L12.0423 11.518L11.977 11.5174L10.2661 11.4066L9.506 12.9442C9.46474 13.0275 9.4042 13.0997 9.32941 13.1549C9.25463 13.21 9.16775 13.2465 9.07602 13.2614C8.98428 13.2762 8.89033 13.2689 8.80198 13.2402C8.71362 13.2114 8.6334 13.1619 8.568 13.0959L8.52017 13.0411L8.47817 12.9769L7.33017 10.9895C8.13831 10.939 8.92378 10.7021 9.6251 10.2974C10.3264 9.89269 10.9246 9.33115 11.3727 8.65674Z"
+      style="fill:white;fill-opacity:1;" />
+    <path
+      d="M6.6675 10.9895L5.52066 12.9775C5.47419 13.0581 5.40916 13.1263 5.33097 13.1767C5.25279 13.227 5.16371 13.2579 5.07116 13.2669C4.9786 13.2759 4.88525 13.2626 4.79886 13.2282C4.71247 13.1938 4.63555 13.1392 4.5745 13.0691L4.53016 13.0108L4.49283 12.9443L3.73216 11.4072L2.02241 11.518C1.92823 11.5241 1.83399 11.5072 1.74775 11.4689C1.66151 11.4306 1.58585 11.3719 1.52725 11.2979C1.46864 11.2239 1.42884 11.1369 1.41125 11.0441C1.39366 10.9514 1.3988 10.8558 1.42625 10.7655L1.44958 10.7031L1.47875 10.6448L2.62675 8.65619C3.07456 9.33059 3.67236 9.89221 4.37336 10.2971C5.07437 10.702 5.85956 10.9386 6.6675 10.9895Z"
+      style="fill:white;fill-opacity:1;" />
+    <path
+      d="M7 1.66669L7.14 1.66902C8.19811 1.70532 9.20077 2.15118 9.93645 2.91255C10.6721 3.67393 11.0833 4.69128 11.0833 5.75002L11.0816 5.8626L11.0775 5.9746L11.067 6.11752L11.0518 6.25869L11.0378 6.36252C10.9994 6.61431 10.9375 6.86195 10.8529 7.10219L10.7852 7.28185L10.696 7.48485C10.3658 8.18835 9.84165 8.78301 9.18521 9.19901C8.52878 9.61501 7.76728 9.83507 6.99013 9.83335C6.21298 9.83164 5.45246 9.60822 4.79787 9.18933C4.14328 8.77043 3.6218 8.17346 3.29466 7.46852L3.21883 7.29527L3.1885 7.21769L3.14183 7.0911L3.08641 6.9196C3.06662 6.85319 3.04853 6.78628 3.03216 6.71894L2.99716 6.56085L2.96858 6.40277L2.95691 6.32169L2.93416 6.13327L2.92016 5.92035L2.91666 5.75002C2.91665 4.69128 3.32785 3.67393 4.06354 2.91255C4.79923 2.15118 5.80188 1.70532 6.86 1.66902L7 1.66669Z"
+      style="fill:white;fill-opacity:1;" />
+  </g>
+  <foreignObject x="18" y="-2" width="156" height="18">
+    <div
+      xmlns="http://www.w3.org/1999/xhtml"
+      style="font-size: ${fontSize}px; line-height: 18px; color: #D1D1D1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
+    >
+      ${issuer.name}
+    </div>
+  </foreignObject>
+</g>`;
+    }
     if (issuer.icon) {
-        return `<g id="${getId(id, 'issuer')}" transform="translate(24, 151)" width="180" height="14">
+        return `<g id="${getId(id, 'issuer')}" transform="translate(${translateX}, ${translateY})" width="180" height="14">
   <rect x="0" y="0" width="14" height="14" rx="2" fill="url(#${getId(id, 'issuer-image')})" />
-  <image
-    xlink:href="${issuer.icon}"
-    x="0"
-    y="0"
-    width="14"
-    height="14" />
   <foreignObject x="20" y="-2" width="156" height="18">
     <div
       xmlns="http://www.w3.org/1999/xhtml"
@@ -458,7 +540,7 @@ const getIssuerSvg = (issuer, id, fontSize = 12) => {
   </defs>
 </g>`;
     }
-    return `<g id="${getId(id, 'issuer')}" transform="translate(24, 151)" width="180" height="14">
+    return `<g id="${getId(id, 'issuer')}" transform="translate(${translateX}, ${translateY})" width="180" height="14">
   <rect x="0" y="0" width="14" height="14" rx="2" fill="#6D6D6D"/>
   <foreignObject x="0" y="-2" width="176" height="18">
     <div
@@ -471,8 +553,33 @@ const getIssuerSvg = (issuer, id, fontSize = 12) => {
 </g>`;
 };
 exports.getIssuerSvg = getIssuerSvg;
-const getExtraSvg = (extra, id, fontSize = 12) => {
-    return `<g id="${getId(id, 'extra')}" transform="translate(24, 181)" width="180" height="14">
+const getExtraSvg = (extra, id, variant, fontSize = 12) => {
+    const translateX = variant === 'app-kyc' ? 24 : 24;
+    const translateY = variant === 'app-kyc' ? 211 : 181;
+    if (variant === 'app-kyc' && extra.key === 'email') {
+        return `<g id="${getId(id, 'extra')}" transform="translate(${translateX}, ${translateY})" width="180" height="15">
+  <g id="${getId(id, 'extra-badge')}">
+    <path
+      d="M12.8333 4.89545V10.4167C12.8334 10.8631 12.6628 11.2926 12.3566 11.6173C12.0504 11.9421 11.6316 12.1376 11.186 12.1638L11.0833 12.1667H2.91666C2.47029 12.1667 2.04078 11.9962 1.71601 11.6899C1.39124 11.3837 1.19577 10.965 1.16958 10.5194L1.16666 10.4167V4.89545L6.67625 8.5687L6.74391 8.6072C6.82366 8.64616 6.91124 8.66641 7 8.66641C7.08875 8.66641 7.17634 8.64616 7.25608 8.6072L7.32375 8.5687L12.8333 4.89545Z"
+      style="fill:white;fill-opacity:1;" />
+    <path
+      d="M11.0833 2.83331C11.7133 2.83331 12.2657 3.16581 12.5737 3.66573L7 7.38156L1.42625 3.66573C1.57251 3.42818 1.77345 3.22905 2.01233 3.08495C2.2512 2.94086 2.52107 2.85598 2.79941 2.8374L2.91666 2.83331H11.0833Z"
+      style="fill:white;fill-opacity:1;" />
+  </g>
+  <text
+    x="18"
+    y="8"
+    font-size="${fontSize}"
+    font-family="Helvetica, Arial, sans-serif"
+    fill="#D1D1D1"
+    text-anchor="start"
+    alignment-baseline="middle"
+    dominant-baseline="middle">
+    ${extra.value}
+  </text>
+</g>`;
+    }
+    return `<g id="${getId(id, 'extra')}" transform="translate(${translateX}, ${translateY})" width="180" height="14">
   <text
     x="0"
     y="8"
@@ -816,10 +923,10 @@ const getSvg = (props) => {
     const color = props.color || color_1.DEFAULT_COLORS[props.variant] || color_1.DEFAULT_COLORS['app-passport'];
     const layout = (0, exports.getLayoutSvg)(props.variant, id, color);
     const header = (0, exports.getHeaderSvg)(props.variant, id, props.header);
-    const issuer = (0, exports.getIssuerSvg)(props.issuer, id);
-    const extra = (0, exports.getExtraSvg)(props.extra, id);
+    const issuer = (0, exports.getIssuerSvg)(props.issuer, id, props.variant);
+    const extra = (0, exports.getExtraSvg)(props.extra, id, props.variant);
     const badges = (0, exports.getBadgesSvg)(props.verifiable, props.chain, id);
-    const identity = (0, exports.getDidSvg)(props.did, id);
+    const identity = props.variant !== 'app-kyc' ? (0, exports.getDidSvg)(props.did, id) : '';
     const tag = (0, exports.getTagSvg)(props.tag, props.tagVariant, id);
     return layout([header, issuer, extra, badges, identity, tag].filter(Boolean).join(''), width, height);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/nft-display",
-  "version": "2.10.31",
+  "version": "2.10.32",
   "description": "arcblock's nft display generic component",
   "keywords": [
     "nft"
@@ -41,5 +41,5 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.5.2"
   },
-  "gitHead": "7936b9e4ade01bef0ca85658f9d44812d20b254c"
+  "gitHead": "0da245771d21b08f036d4c8f872b61995538c411"
 }