@arcblock/nft-display 2.7.23 → 2.7.24

package/lib/color.d.ts

@@ -20,6 +20,7 @@ export declare const DEFAULT_COLORS: {
         end: string;
     };
 };
+export declare const MOTIF_COLORS: string[];
 /**
  * Convert RGB color to HSL color.
  * @param {string} rgbString - The RGB color value.

package/lib/color.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getNftBGColorFromDid = exports.getPassportColorFromDid = exports.getNftBGColor = exports.hslToRgb = exports.rgbToHsl = exports.DEFAULT_COLORS = void 0;
+exports.getNftBGColorFromDid = exports.getPassportColorFromDid = exports.getNftBGColor = exports.hslToRgb = exports.rgbToHsl = exports.MOTIF_COLORS = exports.DEFAULT_COLORS = void 0;
 const util_1 = require("@ocap/util");
 const mcrypto_1 = require("@ocap/mcrypto");
 exports.DEFAULT_COLORS = {
@@ -21,6 +21,40 @@ exports.DEFAULT_COLORS = {
         end: '#7AB2F6',
     },
 };
+exports.MOTIF_COLORS = [
+    '#E94E4E',
+    '#E41115',
+    '#E96B4E',
+    '#E5502E',
+    '#E98F4E',
+    '#E57A2E',
+    '#E98F4E',
+    '#E5A82E',
+    '#DACD5D',
+    '#DAC825',
+    '#BDD13D',
+    '#C8E31C',
+    '#AEE94E',
+    '#7FD558',
+    '#52CC19',
+    '#4FC469',
+    '#59DE9C',
+    '#19CC73',
+    '#5ED9D1',
+    '#19CCC0',
+    '#4ED7E9',
+    '#19B7CC',
+    '#45ACE8',
+    '#1C97DE',
+    '#4E68E9',
+    '#2E4DE5',
+    '#7F4EE9',
+    '#682EE5',
+    '#BE65E7',
+    '#AF40E2',
+    '#DF58C2',
+    '#E94E8F',
+];
 /**
  * Convert RGB color to HSL color.
  * @param {string} rgbString - The RGB color value.

package/lib/index.js

@@ -10,29 +10,27 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSvg = exports.nanoid = exports.getTagSvg = exports.getBadgesSvg = exports.getChainBadge = exports.getVerifiableBadge = exports.getDidSvg = exports.getExtraSvg = exports.getIssuerSvg = exports.getHeaderSvg = exports.getLayoutSvg = exports.formatDid = void 0;
-const DidMotif = __importStar(require("@arcblock/did-motif"));
+const did_motif_1 = require("@arcblock/did-motif");
 const color_1 = require("./color");
 __exportStar(require("./color"), exports);
 const getId = (id, suffix) => [id, suffix].join('-');
 const DEFAULT_WIDTH = 228;
 const DEFAULT_HEIGHT = 258;
+const isEthereumDid = (addr) => /^(0x)?[0-9a-f]{40}$/i.test(addr);
+const getEthereumColor = (did) => {
+    const index = Uint8Array.from(did
+        .slice(2)
+        .match(/.{1,2}/g)
+        .map((pair) => parseInt(pair, 16)))
+        .slice(0, 8)
+        .reduce((acc, val) => acc + val, 0) % color_1.MOTIF_COLORS.length;
+    return color_1.MOTIF_COLORS[index];
+};
 const formatDid = (did, length = 5) => did.length > 2 * length ? `${did.slice(0, length)}..${did.slice(-length)}` : did;
 exports.formatDid = formatDid;
 const getLayoutSvg = (variant, id, color) => {
@@ -507,7 +505,9 @@ const getExtraSvg = (extra, id, fontSize = 12) => {
 };
 exports.getExtraSvg = getExtraSvg;
 const getDidSvg = (did, id, fontSize = 10) => {
-    const { color } = DidMotif.getDIDMotifInfo(did);
+    const address = did.replace('did:abt:', '');
+    const isEth = isEthereumDid(address);
+    const color = isEth ? getEthereumColor(address) : (0, did_motif_1.getDIDMotifInfo)(address).color;
     const prefix = `<g id="${getId(id, 'did-prefix')}" transform="translate(24, 210)" height="14">
   <text
     x="0"
@@ -529,10 +529,13 @@ const getDidSvg = (did, id, fontSize = 10) => {
       dominant-baseline="middle">ABT:</tspan>
   </text>
 </g>`;
-    const motif = DidMotif.toSvg(did)
-        .replace('<svg ', `<g id="${getId(id, 'did-motif')}" transform="translate(67, 211) scale(0.12, 0.12)" width="12" height="12" `)
-        .replace('</svg>', '</g>');
-    const suffix = `<g id="${getId(id, 'did-suffix')}" transform="translate(80, 210)" height="14">
+    let motif = '';
+    if (isEth === false) {
+        motif = (0, did_motif_1.toSvg)(address)
+            .replace('<svg ', `<g id="${getId(id, 'did-motif')}" transform="translate(67, 211) scale(0.12, 0.12)" width="12" height="12" `)
+            .replace('</svg>', '</g>');
+    }
+    const suffix = `<g id="${getId(id, 'did-suffix')}" transform="translate(${isEth ? 67 : 80}, 210)" height="14">
   <text
     x="0"
     y="8"
@@ -542,10 +545,10 @@ const getDidSvg = (did, id, fontSize = 10) => {
     text-anchor="start"
     alignment-baseline="middle"
     dominant-baseline="middle">
-    ${(0, exports.formatDid)(did)}
+    ${(0, exports.formatDid)(address)}
   </text>
 </g>`;
-    return [prefix, motif, suffix].join('');
+    return [prefix, motif, suffix].filter(Boolean).join('');
 };
 exports.getDidSvg = getDidSvg;
 const getVerifiableBadge = (id) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/nft-display",
-  "version": "2.7.23",
+  "version": "2.7.24",
   "description": "arcblock's nft display generic component",
   "keywords": [
     "nft"
@@ -41,5 +41,5 @@
     "ts-node": "^10.9.1",
     "typescript": "^5.0.4"
   },
-  "gitHead": "3e0d9355dcc2aab2be1b5bd1fe9eb739f09f03be"
+  "gitHead": "a6e7be2c901fb69d0bbe7b350dab1d5af3fcd0af"
 }