feat: add support for custom suffix

package.json

@@ -40,13 +40,12 @@
     "das-ui-shared": "^0.2.1",
     "emoji-regex": "^10.2.1",
     "ethers": "^5.6.8",
-    "gl": "^4.4.0",
     "node-canvas-webgl": "^0.2.7",
     "qrcode": "^1.4.4",
     "reflect-metadata": "^0.1.13",
     "rimraf": "^3.0.2",
     "rxjs": "^6.6.6",
-    "spritejs": "^3.8.2",
+    "spritejs": "3.8.2",
     "word-list-json": "^0.2.0"
   },
   "devDependencies": {

src/app.service.ts

@@ -275,8 +275,8 @@ export class AppService {
     return canvas.toBuffer()
   }
 
-  async identicon (name: string): Promise<Canvas> {
-    const nameMd5 = md5(name)
+  async identicon (account: string): Promise<Canvas> {
+    const nameMd5 = md5(account)
     const _colors: number[] = getColors(nameMd5)
     const _positions: PositionsObject = getPositions(nameMd5)
     const _figurePaths: number[] = getFigurePaths(nameMd5)

src/erc721/erc721.service.ts

@@ -9,6 +9,7 @@ import { LocalCache } from '../decorators/cache.decorator'
 import { getCategory, getCharacterSet, tokenIdToAccountId } from '../modules/tools'
 import abi from './abi.json'
 import { Domain, NetConfig } from '../constants'
+import { getTextWidth } from './text-width'
 const cheerio = require('cheerio') // requiring in cjs to avoid ts error
 
 const das = new Das({
@@ -74,6 +75,11 @@ const accountFormats: Format[] = [{
   lines: 4,
 }]
 
+const suffix2Logo = {
+  '.max': 'static/suffix/logo.max.png',
+  // '.max': 'static/suffix/logo.max.black.png',
+}
+
 function getCharWeight (char: string) {
   return char.match(/\ud83d[\ude00-\ude4f]/g) ? 2 : 1
 }
@@ -162,7 +168,7 @@ export class Erc721Service {
     key: function (tokenId: string) {
       return `${tokenId}.json`
     }
-    })
+  })
   async erc721Metadata (tokenId: string) {
     if (!tokenId.match(/^\d{30,50}$/)) {
       throw new Error(`${tokenId} is not valid`)
@@ -200,35 +206,68 @@ export class Erc721Service {
   @LocalCache({
     dir: 'erc721card',
     key: function (tokenId: string) {
-    return `${tokenId}.${arguments.length}.svg`
+      return `${tokenId}.${arguments.length}.svg`
     }
-    })
+  })
   async erc721Card (tokenId: string, textDesc = 'Web3 Identity', textLoc: string) {
     let account = ''
+    let suffix = '.bit'
 
     // we can handle both account and account_id here
     if (tokenId.match(/\.bit$/)) {
       account = tokenId
     }
+    else if (tokenId.includes('.')) {
+      account = tokenId
+      suffix = tokenId.match(/\.[^.]+$/)[0]
+    }
     else {
       const accountId = tokenIdToAccountId(tokenId)
       const accountInfo = await das.accountById(accountId)
       account = accountInfo.account
     }
 
-    const name = account.replace(/\.bit$/, '')
-    const nameDisplay = generateNameDisplay(name)
-    const $nameText = generateNameSvg(nameDisplay)
+    let avatarBuffer: Buffer
+
+    if (suffix2Logo[suffix]) {
+      avatarBuffer = fs.readFileSync(suffix2Logo[suffix])
+    }
+    // .bit or no logo
+    else {
+      avatarBuffer = await this.appService.identiconBuffer(account)
+    }
 
-    const avatarBuffer = await this.appService.identiconBuffer(account)
     const avatar = avatarBuffer.toString('base64')
 
-    const color = accountColor(account)
+    const name = account.replace(suffix, '')
+    const nameDisplay = generateNameDisplay(name)
+    const $nameText = generateNameSvg(nameDisplay)
+
+    const bgColor = accountColor(account)
+    const suffixWidth = getTextWidth(suffix, 66) + 80
 
     const $ = cheerio.load(svgTemplate)
-    $('#account').prepend($nameText)
+
+    if (suffix !== '.bit') {
+      $('#rounded_square').attr('height', 420)
+      $('#bit-logo').remove()
+      $('#text-desc').text('')
+      $('#text-loc')
+        .attr('x', (500 - 30 - getTextWidth(account, 18)) / 2)
+        .attr('y', 472)
+        .text(`d.id/${account}`)
+    }
+    else {
+      $('#text-desc').text('Web3 Identity')
+    }
+
+    $('#rounded_square').attr('fill', bgColor.color)
     $('#avatarImage').attr('xlink:href', `data:image/png;base64,${avatar}`)
-    $('#rounded_square').attr('fill', color.color)
+    $('#account').prepend($nameText)
+    $('#account_suffix').text(suffix)
+    $('#account_suffix_container')
+      .attr('width', suffixWidth)
+      .attr('x', (500 - suffixWidth) / 2)
     $('#text-desc').text(textDesc)
     $('#text-loc').text(textLoc)
 

src/erc721/text-width.ts

@@ -0,0 +1,111 @@
+// forked from here: https://juejin.cn/post/7149456104127528974
+const LetterMap = {
+  ' ': 0.3329986572265625,
+  a: 0.5589996337890625,
+  A: 0.6569992065429687,
+  b: 0.58599853515625,
+  B: 0.6769989013671875,
+  c: 0.5469985961914062,
+  C: 0.7279998779296875,
+  d: 0.58599853515625,
+  D: 0.705999755859375,
+  e: 0.554998779296875,
+  E: 0.63699951171875,
+  f: 0.30299957275390627,
+  F: 0.5769989013671875,
+  g: 0.5909988403320312,
+  G: 0.7479995727539063,
+  h: 0.555999755859375,
+  H: 0.7199996948242188,
+  i: 0.255999755859375,
+  I: 0.23699951171875,
+  j: 0.26699981689453123,
+  J: 0.5169998168945312,
+  k: 0.5289993286132813,
+  K: 0.6899993896484375,
+  l: 0.23499908447265624,
+  L: 0.5879989624023437,
+  m: 0.854998779296875,
+  M: 0.8819992065429687,
+  n: 0.5589996337890625,
+  N: 0.7189987182617188,
+  o: 0.58599853515625,
+  O: 0.7669998168945312,
+  p: 0.58599853515625,
+  P: 0.6419998168945312,
+  q: 0.58599853515625,
+  Q: 0.7669998168945312,
+  r: 0.3649993896484375,
+  R: 0.6759994506835938,
+  s: 0.504998779296875,
+  S: 0.6319992065429687,
+  t: 0.354998779296875,
+  T: 0.6189987182617187,
+  u: 0.5599990844726562,
+  U: 0.7139999389648437,
+  v: 0.48199920654296874,
+  V: 0.6389999389648438,
+  w: 0.754998779296875,
+  W: 0.929998779296875,
+  x: 0.5089996337890625,
+  X: 0.63699951171875,
+  y: 0.4959991455078125,
+  Y: 0.66199951171875,
+  z: 0.48699951171875,
+  Z: 0.6239990234375,
+  0: 0.6,
+  1: 0.40099945068359377,
+  2: 0.6,
+  3: 0.6,
+  4: 0.6,
+  5: 0.6,
+  6: 0.6,
+  7: 0.5469985961914062,
+  8: 0.6,
+  9: 0.6,
+  '[': 0.3329986572265625,
+  ']': 0.3329986572265625,
+  ',': 0.26399993896484375,
+  '.': 0.26399993896484375,
+  ';': 0.26399993896484375,
+  ':': 0.26399993896484375,
+  '{': 0.3329986572265625,
+  '}': 0.3329986572265625,
+  '\\': 0.5,
+  '|': 0.19499969482421875,
+  '=': 0.604998779296875,
+  '+': 0.604998779296875,
+  '-': 0.604998779296875,
+  _: 0.5,
+  '`': 0.3329986572265625,
+  ' ~': 0.8329986572265625,
+  '!': 0.3329986572265625,
+  '@': 0.8579986572265625,
+  '#': 0.6,
+  $: 0.6,
+  '%': 0.9699996948242188,
+  '^': 0.517999267578125,
+  '&': 0.7259994506835937,
+  '*': 0.505999755859375,
+  '(': 0.3329986572265625,
+  ')': 0.3329986572265625,
+  '<': 0.604998779296875,
+  '>': 0.604998779296875,
+  '/': 0.5,
+  '?': 0.53699951171875,
+  '"': 0.33699951171875
+}
+
+// Calculate non-chinese width
+const getLetterWidth = (letter, fontSize): number => fontSize * (LetterMap[letter] || 1)
+
+// calculate text width
+export const getTextWidth = (text: string, fontSize: number): number => {
+  // Chinese regexp
+  const chineseRegExp = /[\u4E00-\u9FA5]+/
+  const textWidth = text.split('').reduce((pre, curLetter) => {
+    const letterWidth = chineseRegExp.test(curLetter) ? fontSize : getLetterWidth(curLetter, fontSize)
+    return pre + letterWidth
+  }, 0)
+  return textWidth
+}

tsconfig.json

@@ -18,6 +18,7 @@
   "exclude": [
     "node_modules",
     "./node_modules",
-    "./node_modules/*"
+    "./node_modules/*",
+    "dist"
   ]
 }