@azuro-org/images-generator 2.0.2 → 2.0.4

package/dist/generator.d.ts

@@ -4,12 +4,27 @@ interface GeneratorOptions {
     timeout?: number;
     args?: string[];
 }
+/**
+ * Options for a single image generation.
+ */
 interface GenerateOptions {
+    /** JPEG quality 1–100 (ignored for PNG). Default 85. */
     quality?: number;
+    /** Screenshot the full scrollable page instead of just the viewport. Default false. */
     fullPage?: boolean;
+    /** Wait for document.fonts.ready before taking the screenshot so webfonts are applied. Default true. */
     waitForFonts?: boolean;
+    /** Max ms to wait for content/font loading. Default 2000. */
     waitTimeout?: number;
+    /**
+     * When to consider the page content "loaded" before screenshot.
+     * - `domcontentloaded` – DOM ready, resources (images, fonts) may still load. Fastest. Default.
+     * - `load` – load event fired (images, stylesheets, etc. loaded).
+     * - `networkidle0` – no network requests for 500ms.
+     * - `networkidle2` – at most 2 network requests for 500ms.
+     */
     waitUntil?: 'load' | 'domcontentloaded' | 'networkidle0' | 'networkidle2';
+    /** If true, do not add an extra delay for CSS animations. Default true. */
     skipAnimations?: boolean;
 }
 type GenerateProps<P> = {

package/dist/index.es.js

@@ -180,7 +180,7 @@ function __generator(thisArg, body) {
                             throw new Error('Invalid template: missing required properties');
                         }
                         width = template.width, height = template.height, type = template.type, getHtml = template.html;
-                        _d = options.quality, quality = _d === void 0 ? type === 'jpeg' ? 85 : undefined : _d, _e = options.fullPage, fullPage = _e === void 0 ? false : _e, _f = options.waitForFonts, waitForFonts = _f === void 0 ? true : _f, _g = options.waitTimeout, waitTimeout = _g === void 0 ? 2000 : _g, _h = options.waitUntil, waitUntil = _h === void 0 ? 'domcontentloaded' : _h, _j = options.skipAnimations, skipAnimations = _j === void 0 ? true : _j;
+                        _d = options.quality, quality = _d === void 0 ? type === 'jpeg' ? 85 : undefined : _d, _e = options.fullPage, fullPage = _e === void 0 ? false : _e, _f = options.waitForFonts, waitForFonts = _f === void 0 ? true : _f, _g = options.waitTimeout, waitTimeout = _g === void 0 ? 2000 : _g, _h = options.waitUntil, waitUntil = _h === void 0 ? 'load' : _h, _j = options.skipAnimations, skipAnimations = _j === void 0 ? true : _j;
                         _l.label = 7;
                     case 7:
                         _l.trys.push([7, 20, , 21]);

package/dist/templates/trendle-trading/index.d.ts

@@ -1,5 +1,6 @@
 import { type Template } from '../../utils';
 export type Props = {
+    accountAddress: string;
     trend: {
         image: string | undefined;
         title: string;
@@ -7,8 +8,8 @@ export type Props = {
     position: {
         leverage: number;
         isLong: boolean;
-        openLevel: number;
-        exitLevel: number | undefined;
+        openLevel: string;
+        exitLevel: string | undefined;
     };
     pnl: number;
 };

package/dist/templates/trendle-trading/index.html

@@ -7,7 +7,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link
-    href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Mona+Sans:ital,wdth,wght@0,125,200..900;1,125,200..900&display=swap"
+    href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;700&family=Inter:wght@500;600&family=Mona+Sans:wdth,wght@125,700&display=swap"
     rel="stylesheet">
   <style>
     html {
@@ -157,6 +157,7 @@
       height: 675px;
       padding: 40px 36px 30px;
       position: relative;
+      color: white;
     }
 
     .logo {
@@ -166,42 +167,12 @@
       margin-right: 45px;
     }
 
-    .trend {
-      /* margin-top: 108px; */
-    }
-
-    .trend__img {
-      margin-right: 20px;
-      width: 80px;
-      height: 80px;
-      border-radius: 100%;
-      overflow: hidden;
-    }
-
-    .trend__img>img {
-      width: 100%;
-    }
-
-    .trend__title {
-      font-size: 32px;
-      line-height: 100%;
-    }
-
-    .trend__badge {
-      background-color: rgba(0, 0, 0, 0.2);
-      padding: 6px 12px 8px 8px;
-      border-radius: 5px;
-      font-size: 24px;
-      line-height: 100%;
-      margin-top: 10px;
-      width: fit-content;
-    }
-
     .pnl {
-      margin-top: 22px;
-      font-size: 120px;
-      line-height: 100%;
+      font-size: 72px;
+      line-height: 90%;
       font-weight: 700;
+      font-stretch: 125%;
+      color: --card-bg-color;
     }
 
     .right-img {
@@ -214,8 +185,10 @@
     .arrow {
       width: 24px;
       height: 24px;
-      margin-top: 3px;
-      margin-bottom: -3px;
+      margin-top: -4px;
+      margin-bottom: -4px;
+      margin-right: -4px;
+      margin-left: -6px;
     }
 
     .person-img {
@@ -226,44 +199,74 @@
       mix-blend-mode: multiply;
     }
 
-    .bg-img {
-      position: absolute;
-      top: 0px;
-      left: 0px;
-      width: 100%;
+    .box {
+      background: #0F0F0F;
+      border-radius: 33px;
+      height: 100%;
+      width: fit-content;
+      padding: 30px 30px 55px;
+      min-width: 550px;
+      position: relative;
     }
 
-    .level-wrapper {
+    .box-bottom {
       margin-top: 30px;
     }
 
-    .level-title {
-      opacity: 50%;
-      color: #000000CC;
+    .wrapper {
+      width: 100%;
+      padding-top: 24px;
+      border-top: 1px solid #494949;
+    }
+
+    .wrapper+.wrapper {
+      margin-left: 24px;
+    }
+
+    .text {
       font-size: 24px;
       line-height: 100%;
     }
 
-    .level-content {
-      margin-top: 6px;
-      font-size: 28px;
-      line-height: 37.86px;
+    .text-gray {
+      color: #707070;
     }
 
-    .level-box {
-      margin-left: 125px;
+    .mt-45 {
+      margin-top: 45px;
     }
 
-    .box {
-      background: #0F0F0F;
-      border-radius: 33px;
-      height: 100%;
-      width: fit-content;
-      padding: 30px 30px 55px;
+    .mt-12 {
+      margin-top: 12px;
     }
 
-    .box-bottom {
-      margin-top: 30px;
+    .text-black {
+      color: #0F0F0F;
+    }
+
+    .account {
+      font-size: 30px;
+      line-height: 80%;
+    }
+
+    .avatar {
+      border: 1px solid #2A2A2A;
+      border-radius: 100%;
+      width: 64px;
+      height: 64px;
+      margin-right: 16px;
+    }
+
+    .avatar img {
+      width: 50%;
+    }
+
+    .text-semibold {
+      font-weight: 600;
+    }
+
+    .text-nowrap {
+      white-space: nowrap;
     }
   </style>
 </head>
@@ -271,10 +274,43 @@
 <body>
   <div class="card flex flex-col justify-between">
     <img class="person-img" src={trendImage} alt="">
-    <div class="box"></div>
+    <div class="box flex flex-col justify-between">
+      <div class="flex items-center">
+        <div class="avatar flex items-center justify-center">
+          <img src="{avatar}" alt="">
+        </div>
+        <div class="account">{account}</div>
+      </div>
+      <div>
+        <div class="wrapper flex justify-between">
+          <div class="pnl mona-sans">{pnl}%</div>
+          <div class="text text-gray">PnL</div>
+        </div>
+        <div class="flex mt-45 text">
+          <div class="wrapper">
+            <div class="text-semibold text-nowrap">{trendTitle}</div>
+            <div class="mt-12">
+              <img class="arrow" src="{arrowImage}" alt="">
+              <span class="text-gray">{positionInfo}</span>
+            </div>
+          </div>
+          <div class="wrapper">
+            <div class="flex justify-between">
+              <div class="text-gray">Entry:</div>
+              <div class="text-semibold">{openLevel}</div>
+            </div>
+            <div class="flex justify-between mt-12 {exitLevelClass}">
+              <div class="text-gray">Exit:</div>
+              <div class="text-semibold">{exitLevel}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <div class="box-bottom flex items-end">
       <img src="{logo}" class="logo" alt="">
-      <div class="text-upper geist-mono">trade attention on <span class="text-underline text-bold">Trendle.fi</span>
+      <div class="text-upper geist-mono text-black">trade attention on <span
+          class="text-underline text-bold">Trendle.fi</span>
       </div>
     </div>
   </div>

package/dist/templates/trendle-trading/index.js

@@ -1,4 +1,27 @@
-import {_ as __awaiter,a as __generator,b as getBase64Image,g as getFile,d as downloadImage}from'../../index-6ec143bc.js';import path from'path';import'fs';import'util';import'stream';import'http';import'https';import'url';import'crypto';import'http2';import'assert';import'tty';import'zlib';import'events';var cardTypes = {
+import {_ as __awaiter,a as __generator,b as getBase64Image,g as getFile,d as downloadImage}from'../../index-6ec143bc.js';import path from'path';import'fs';import'util';import'stream';import'http';import'https';import'url';import'crypto';import'http2';import'assert';import'tty';import'zlib';import'events';var hashCode = function (str) {
+    return Array.from(str).reduce(function (hash, c) { return (hash << 5) - hash + c.charCodeAt(0); }, 0);
+};
+var generateShapeAvatar = function (address, size, scale) {
+    if (size === void 0) { size = 6; }
+    if (scale === void 0) { scale = 10; }
+    var hash = Math.abs(hashCode(address.toLowerCase()));
+    var color = "hsl(".concat(hash % 360, ", 60%, 55%)");
+    var svg = "<svg xmlns='http://www.w3.org/2000/svg' width='".concat(size * scale, "' height='").concat(size * scale, "'>");
+    for (var y = 0; y < size; y++) {
+        for (var x = 0; x < Math.ceil(size / 2); x++) {
+            if (((hash >> (x + y * size)) & 1) === 1) {
+                var rx = x * scale;
+                var ry = y * scale;
+                var symX = (size - x - 1) * scale;
+                svg += "<rect x='".concat(rx, "' y='").concat(ry, "' width='").concat(scale, "' height='").concat(scale, "' fill='").concat(color, "'/>");
+                svg += "<rect x='".concat(symX, "' y='").concat(ry, "' width='").concat(scale, "' height='").concat(scale, "' fill='").concat(color, "'/>");
+            }
+        }
+    }
+    svg += '</svg>';
+    var avatar = "data:image/svg+xml;utf8,".concat(encodeURIComponent(svg));
+    return avatar;
+};var cardTypes = {
     'profit': {
         bgColor: '#72FF4B',
     },
@@ -11,11 +34,11 @@ var template = {
     height: 630,
     type: 'jpeg',
     html: function (props) { return __awaiter(void 0, void 0, void 0, function () {
-        var trend, pnl, position, isProfit, bgColor, leverage, isLong, openLevel, exitLevel, html, logo, arrowImage, trendImage, _a, positionInfo;
+        var accountAddress, trend, pnl, position, isProfit, bgColor, leverage, isLong, openLevel, exitLevel, html, logo, arrowImage, trendImage, _a, positionInfo, avatar;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    trend = props.trend, pnl = props.pnl, position = props.position;
+                    accountAddress = props.accountAddress, trend = props.trend, pnl = props.pnl, position = props.position;
                     isProfit = pnl > 0;
                     bgColor = (isProfit ? cardTypes.profit : cardTypes.loss).bgColor;
                     leverage = position.leverage, isLong = position.isLong, openLevel = position.openLevel, exitLevel = position.exitLevel;
@@ -32,10 +55,13 @@ var template = {
                     _b.label = 3;
                 case 3:
                     trendImage = _a;
-                    positionInfo = "".concat(isLong ? ' Up' : ' Down', ", Boost x").concat(leverage);
+                    positionInfo = "".concat(isLong ? 'Up' : 'Down', ", X").concat(leverage, " Boost");
+                    avatar = generateShapeAvatar(accountAddress);
                     return [2 /*return*/, html
                             .replace('{logo}', logo)
-                            .replace('--card-bg-color', bgColor)
+                            .replace('{account}', "".concat(accountAddress.substr(0, 6), "...").concat(accountAddress.substr(-1 * 6)))
+                            .replace('{avatar}', avatar)
+                            .replaceAll('--card-bg-color', bgColor)
                             .replace('{personImg}', trendImage)
                             .replace('{trendImage}', trendImage)
                             .replace('{trendTitle}', trend.title)

package/dist/templates/trendle-trading/utils/generateShapeAvatar.d.ts

@@ -0,0 +1,2 @@
+declare const generateShapeAvatar: (address: string, size?: number, scale?: number) => string;
+export default generateShapeAvatar;

package/lib/generator.d.ts

@@ -4,12 +4,27 @@ interface GeneratorOptions {
     timeout?: number;
     args?: string[];
 }
+/**
+ * Options for a single image generation.
+ */
 interface GenerateOptions {
+    /** JPEG quality 1–100 (ignored for PNG). Default 85. */
     quality?: number;
+    /** Screenshot the full scrollable page instead of just the viewport. Default false. */
     fullPage?: boolean;
+    /** Wait for document.fonts.ready before taking the screenshot so webfonts are applied. Default true. */
     waitForFonts?: boolean;
+    /** Max ms to wait for content/font loading. Default 2000. */
     waitTimeout?: number;
+    /**
+     * When to consider the page content "loaded" before screenshot.
+     * - `domcontentloaded` – DOM ready, resources (images, fonts) may still load. Fastest. Default.
+     * - `load` – load event fired (images, stylesheets, etc. loaded).
+     * - `networkidle0` – no network requests for 500ms.
+     * - `networkidle2` – at most 2 network requests for 500ms.
+     */
     waitUntil?: 'load' | 'domcontentloaded' | 'networkidle0' | 'networkidle2';
+    /** If true, do not add an extra delay for CSS animations. Default true. */
     skipAnimations?: boolean;
 }
 type GenerateProps<P> = {

package/lib/index.js

@@ -180,7 +180,7 @@ function __generator(thisArg, body) {
                             throw new Error('Invalid template: missing required properties');
                         }
                         width = template.width, height = template.height, type = template.type, getHtml = template.html;
-                        _d = options.quality, quality = _d === void 0 ? type === 'jpeg' ? 85 : undefined : _d, _e = options.fullPage, fullPage = _e === void 0 ? false : _e, _f = options.waitForFonts, waitForFonts = _f === void 0 ? true : _f, _g = options.waitTimeout, waitTimeout = _g === void 0 ? 2000 : _g, _h = options.waitUntil, waitUntil = _h === void 0 ? 'domcontentloaded' : _h, _j = options.skipAnimations, skipAnimations = _j === void 0 ? true : _j;
+                        _d = options.quality, quality = _d === void 0 ? type === 'jpeg' ? 85 : undefined : _d, _e = options.fullPage, fullPage = _e === void 0 ? false : _e, _f = options.waitForFonts, waitForFonts = _f === void 0 ? true : _f, _g = options.waitTimeout, waitTimeout = _g === void 0 ? 2000 : _g, _h = options.waitUntil, waitUntil = _h === void 0 ? 'load' : _h, _j = options.skipAnimations, skipAnimations = _j === void 0 ? true : _j;
                         _l.label = 7;
                     case 7:
                         _l.trys.push([7, 20, , 21]);

package/lib/templates/trendle-trading/index.d.ts

@@ -1,5 +1,6 @@
 import { type Template } from '../../utils';
 export type Props = {
+    accountAddress: string;
     trend: {
         image: string | undefined;
         title: string;
@@ -7,8 +8,8 @@ export type Props = {
     position: {
         leverage: number;
         isLong: boolean;
-        openLevel: number;
-        exitLevel: number | undefined;
+        openLevel: string;
+        exitLevel: string | undefined;
     };
     pnl: number;
 };

package/lib/templates/trendle-trading/index.html

@@ -7,7 +7,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link
-    href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Mona+Sans:ital,wdth,wght@0,125,200..900;1,125,200..900&display=swap"
+    href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;700&family=Inter:wght@500;600&family=Mona+Sans:wdth,wght@125,700&display=swap"
     rel="stylesheet">
   <style>
     html {
@@ -157,6 +157,7 @@
       height: 675px;
       padding: 40px 36px 30px;
       position: relative;
+      color: white;
     }
 
     .logo {
@@ -166,42 +167,12 @@
       margin-right: 45px;
     }
 
-    .trend {
-      /* margin-top: 108px; */
-    }
-
-    .trend__img {
-      margin-right: 20px;
-      width: 80px;
-      height: 80px;
-      border-radius: 100%;
-      overflow: hidden;
-    }
-
-    .trend__img>img {
-      width: 100%;
-    }
-
-    .trend__title {
-      font-size: 32px;
-      line-height: 100%;
-    }
-
-    .trend__badge {
-      background-color: rgba(0, 0, 0, 0.2);
-      padding: 6px 12px 8px 8px;
-      border-radius: 5px;
-      font-size: 24px;
-      line-height: 100%;
-      margin-top: 10px;
-      width: fit-content;
-    }
-
     .pnl {
-      margin-top: 22px;
-      font-size: 120px;
-      line-height: 100%;
+      font-size: 72px;
+      line-height: 90%;
       font-weight: 700;
+      font-stretch: 125%;
+      color: --card-bg-color;
     }
 
     .right-img {
@@ -214,8 +185,10 @@
     .arrow {
       width: 24px;
       height: 24px;
-      margin-top: 3px;
-      margin-bottom: -3px;
+      margin-top: -4px;
+      margin-bottom: -4px;
+      margin-right: -4px;
+      margin-left: -6px;
     }
 
     .person-img {
@@ -226,44 +199,74 @@
       mix-blend-mode: multiply;
     }
 
-    .bg-img {
-      position: absolute;
-      top: 0px;
-      left: 0px;
-      width: 100%;
+    .box {
+      background: #0F0F0F;
+      border-radius: 33px;
+      height: 100%;
+      width: fit-content;
+      padding: 30px 30px 55px;
+      min-width: 550px;
+      position: relative;
     }
 
-    .level-wrapper {
+    .box-bottom {
       margin-top: 30px;
     }
 
-    .level-title {
-      opacity: 50%;
-      color: #000000CC;
+    .wrapper {
+      width: 100%;
+      padding-top: 24px;
+      border-top: 1px solid #494949;
+    }
+
+    .wrapper+.wrapper {
+      margin-left: 24px;
+    }
+
+    .text {
       font-size: 24px;
       line-height: 100%;
     }
 
-    .level-content {
-      margin-top: 6px;
-      font-size: 28px;
-      line-height: 37.86px;
+    .text-gray {
+      color: #707070;
     }
 
-    .level-box {
-      margin-left: 125px;
+    .mt-45 {
+      margin-top: 45px;
     }
 
-    .box {
-      background: #0F0F0F;
-      border-radius: 33px;
-      height: 100%;
-      width: fit-content;
-      padding: 30px 30px 55px;
+    .mt-12 {
+      margin-top: 12px;
     }
 
-    .box-bottom {
-      margin-top: 30px;
+    .text-black {
+      color: #0F0F0F;
+    }
+
+    .account {
+      font-size: 30px;
+      line-height: 80%;
+    }
+
+    .avatar {
+      border: 1px solid #2A2A2A;
+      border-radius: 100%;
+      width: 64px;
+      height: 64px;
+      margin-right: 16px;
+    }
+
+    .avatar img {
+      width: 50%;
+    }
+
+    .text-semibold {
+      font-weight: 600;
+    }
+
+    .text-nowrap {
+      white-space: nowrap;
     }
   </style>
 </head>
@@ -271,10 +274,43 @@
 <body>
   <div class="card flex flex-col justify-between">
     <img class="person-img" src={trendImage} alt="">
-    <div class="box"></div>
+    <div class="box flex flex-col justify-between">
+      <div class="flex items-center">
+        <div class="avatar flex items-center justify-center">
+          <img src="{avatar}" alt="">
+        </div>
+        <div class="account">{account}</div>
+      </div>
+      <div>
+        <div class="wrapper flex justify-between">
+          <div class="pnl mona-sans">{pnl}%</div>
+          <div class="text text-gray">PnL</div>
+        </div>
+        <div class="flex mt-45 text">
+          <div class="wrapper">
+            <div class="text-semibold text-nowrap">{trendTitle}</div>
+            <div class="mt-12">
+              <img class="arrow" src="{arrowImage}" alt="">
+              <span class="text-gray">{positionInfo}</span>
+            </div>
+          </div>
+          <div class="wrapper">
+            <div class="flex justify-between">
+              <div class="text-gray">Entry:</div>
+              <div class="text-semibold">{openLevel}</div>
+            </div>
+            <div class="flex justify-between mt-12 {exitLevelClass}">
+              <div class="text-gray">Exit:</div>
+              <div class="text-semibold">{exitLevel}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <div class="box-bottom flex items-end">
       <img src="{logo}" class="logo" alt="">
-      <div class="text-upper geist-mono">trade attention on <span class="text-underline text-bold">Trendle.fi</span>
+      <div class="text-upper geist-mono text-black">trade attention on <span
+          class="text-underline text-bold">Trendle.fi</span>
       </div>
     </div>
   </div>

package/lib/templates/trendle-trading/index.js

@@ -1,4 +1,27 @@
-'use strict';var index=require('../../index-efa024cc.js'),path=require('path');require('fs'),require('util'),require('stream'),require('http'),require('https'),require('url'),require('crypto'),require('http2'),require('assert'),require('tty'),require('zlib'),require('events');function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var path__default=/*#__PURE__*/_interopDefaultLegacy(path);var cardTypes = {
+'use strict';var index=require('../../index-efa024cc.js'),path=require('path');require('fs'),require('util'),require('stream'),require('http'),require('https'),require('url'),require('crypto'),require('http2'),require('assert'),require('tty'),require('zlib'),require('events');function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var path__default=/*#__PURE__*/_interopDefaultLegacy(path);var hashCode = function (str) {
+    return Array.from(str).reduce(function (hash, c) { return (hash << 5) - hash + c.charCodeAt(0); }, 0);
+};
+var generateShapeAvatar = function (address, size, scale) {
+    if (size === void 0) { size = 6; }
+    if (scale === void 0) { scale = 10; }
+    var hash = Math.abs(hashCode(address.toLowerCase()));
+    var color = "hsl(".concat(hash % 360, ", 60%, 55%)");
+    var svg = "<svg xmlns='http://www.w3.org/2000/svg' width='".concat(size * scale, "' height='").concat(size * scale, "'>");
+    for (var y = 0; y < size; y++) {
+        for (var x = 0; x < Math.ceil(size / 2); x++) {
+            if (((hash >> (x + y * size)) & 1) === 1) {
+                var rx = x * scale;
+                var ry = y * scale;
+                var symX = (size - x - 1) * scale;
+                svg += "<rect x='".concat(rx, "' y='").concat(ry, "' width='").concat(scale, "' height='").concat(scale, "' fill='").concat(color, "'/>");
+                svg += "<rect x='".concat(symX, "' y='").concat(ry, "' width='").concat(scale, "' height='").concat(scale, "' fill='").concat(color, "'/>");
+            }
+        }
+    }
+    svg += '</svg>';
+    var avatar = "data:image/svg+xml;utf8,".concat(encodeURIComponent(svg));
+    return avatar;
+};var cardTypes = {
     'profit': {
         bgColor: '#72FF4B',
     },
@@ -11,11 +34,11 @@ var template = {
     height: 630,
     type: 'jpeg',
     html: function (props) { return index._(void 0, void 0, void 0, function () {
-        var trend, pnl, position, isProfit, bgColor, leverage, isLong, openLevel, exitLevel, html, logo, arrowImage, trendImage, _a, positionInfo;
+        var accountAddress, trend, pnl, position, isProfit, bgColor, leverage, isLong, openLevel, exitLevel, html, logo, arrowImage, trendImage, _a, positionInfo, avatar;
         return index.a(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    trend = props.trend, pnl = props.pnl, position = props.position;
+                    accountAddress = props.accountAddress, trend = props.trend, pnl = props.pnl, position = props.position;
                     isProfit = pnl > 0;
                     bgColor = (isProfit ? cardTypes.profit : cardTypes.loss).bgColor;
                     leverage = position.leverage, isLong = position.isLong, openLevel = position.openLevel, exitLevel = position.exitLevel;
@@ -32,10 +55,13 @@ var template = {
                     _b.label = 3;
                 case 3:
                     trendImage = _a;
-                    positionInfo = "".concat(isLong ? ' Up' : ' Down', ", Boost x").concat(leverage);
+                    positionInfo = "".concat(isLong ? 'Up' : 'Down', ", X").concat(leverage, " Boost");
+                    avatar = generateShapeAvatar(accountAddress);
                     return [2 /*return*/, html
                             .replace('{logo}', logo)
-                            .replace('--card-bg-color', bgColor)
+                            .replace('{account}', "".concat(accountAddress.substr(0, 6), "...").concat(accountAddress.substr(-1 * 6)))
+                            .replace('{avatar}', avatar)
+                            .replaceAll('--card-bg-color', bgColor)
                             .replace('{personImg}', trendImage)
                             .replace('{trendImage}', trendImage)
                             .replace('{trendTitle}', trend.title)

package/lib/templates/trendle-trading/utils/generateShapeAvatar.d.ts

@@ -0,0 +1,2 @@
+declare const generateShapeAvatar: (address: string, size?: number, scale?: number) => string;
+export default generateShapeAvatar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azuro-org/images-generator",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "license": "ISC",
   "engines": {
     "node": ">=16.15.1",

package/tsconfig.json

@@ -4,7 +4,12 @@
     "target": "es5",
     "module": "esnext",
     "moduleResolution": "node",
-    "lib": [ "es2017", "es7", "es6", "dom" ],
+    "lib": [
+      "es2021",
+      "es7",
+      "es6",
+      "dom"
+    ],
     "strict": true,
     "declaration": true,
     "esModuleInterop": true