ensdomains · jwahdatehagh · Dec 11, 2021 · Dec 11, 2021 · Dec 11, 2021
diff --git a/src/avatar.ts b/src/avatar.ts
@@ -33,9 +33,11 @@ interface HostMeta {
 
 export interface AvatarMetadata {
   uri: string;
+  avatarURI: string;
   animation: string;
   animation_details: {};
   attributes: any[];
+  background_color: string;
   created_by: string;
   event: string;
   image_data: string;
@@ -188,6 +190,7 @@ export class AvatarMetadata {
       animation_details,
       animation_url,
       attributes,
+      background_color,
       created_by,
       description,
       event,
@@ -203,6 +206,7 @@ export class AvatarMetadata {
     this.animation_details = animation_details;
     this.animation_url     = animation_url;
     this.attributes        = attributes;
+    this.background_color  = background_color;
     this.created_by        = created_by;
     this.description       = description;
     this.event             = event;
@@ -218,20 +222,26 @@ export class AvatarMetadata {
     this.animation_url     = animation_url;
   }
 
-  async getImage() {
+  async load() {
     const uri = await this.getAvatarURI(this.uri);
     if (uri.match(/^eip155/)) {
       // means the background is an NFT
-      const spec = AvatarMetadata.parseNFT(uri);
-      await this._retrieveMetadata(spec);
+      await this.parseNFTAvatar(uri);
     }
+
+    this.avatarURI = uri;
+
+    return this;
+  }
+
+  async getImage() {
     if (!this.image) {
       if (this.image_url) {
         this.image = this.image_url;
       } else if (this.image_data) {
         this.image = this.image_data;
       } else {
-        this.image = uri;
+        this.image = this.avatarURI;
       }
     }
     assert(this.image, 'Image is not available');
@@ -269,23 +279,16 @@ export class AvatarMetadata {
   }
 
   async getMeta(networkName?: string) {
-    const uri = await this.getAvatarURI(this.uri);
-    if (uri.match(/^eip155/)) {
-      // means the background is an NFT
-      const spec = AvatarMetadata.parseNFT(uri);
-      this._setHostMeta(spec);
-      await this._retrieveMetadata(spec);
-    }
     if (!this.image) {
       if (this.image_url) {
         this.image = this.image_url;
       } else if (this.image_data) {
         this.image = `https://metadata.ens.domains/${networkName}/avatar/${this.uri}`;
       } else {
-        this.image = uri;
+        this.image = this.avatarURI;
       }
     }
-    const { defaultProvider, image_data, ...rest } = this;
+    const { avatarURI, defaultProvider, image_data, ...rest } = this;
     return rest;
   }
 
@@ -342,7 +345,7 @@ export class AvatarMetadata {
     }
   }
 
-  static parseNFT(uri: string, seperator: string = '/') {
+  parseNFTAvatar(uri: string, seperator: string = '/') {
     assert(uri, 'parameter URI cannot be empty');
     uri = uri.replace('did:nft:', '');
 
@@ -355,26 +358,25 @@ export class AvatarMetadata {
     assert(namespace, 'namespace is empty');
     assert(token_id, 'tokenID is empty');
 
-    return {
+    const spec = {
       chain_id: Number(chain_id),
       namespace,
       contract_address,
       token_id,
     };
+    this._setHostMeta(spec);
+    return this._retrieveMetadata(spec);
   }
 }
 
-export async function getAvatarMeta(provider: any, name: string, networkName?: string): Promise<any> {
-  const avatar = new AvatarMetadata(provider, name);
-  return await avatar.getMeta(networkName);
-}
-
-export async function getAvatarImage(
+export async function getAvatar(
   provider: any,
   name: string
 ): Promise<any> {
-  const avatar = new AvatarMetadata(provider, name);
-  return await avatar.getImage();
+  try {
+    const avatar = new AvatarMetadata(provider, name);
+    return await avatar.load();
+  } catch (e) {}
 }
 
 export function isCID(hash: any) {

diff --git a/src/domain.ts b/src/domain.ts
@@ -6,7 +6,7 @@ import {
   GET_DOMAINS_BY_LABELHASH,
 } from './subgraph';
 import { Metadata } from './metadata';
-import { getAvatarImage } from './avatar';
+import { getAvatar } from './avatar';
 import { Version } from './base';
 
 const eth =
@@ -49,16 +49,6 @@ export async function getDomain(
     version,
   });
 
-  async function requestAvatar() {
-    try {
-      const [buffer, mimeType] = await getAvatarImage(provider, name);
-      const base64 = buffer.toString('base64');
-      return [base64, mimeType];
-    } catch {
-      /* do nothing */
-    }
-  }
-
   async function requestNFTImage() {
     if (hasImageKey) {
       const r = await provider.getResolver(name);
@@ -70,15 +60,16 @@ export async function getDomain(
   async function requestMedia() {
     if (loadImages) {
       const [avatar, imageNFT] = await Promise.all([
-        requestAvatar(),
+        getAvatar(provider, name),
         requestNFTImage(),
       ]);
       if (imageNFT) {
         metadata.setImage(imageNFT);
       } else {
         if (avatar) {
-          const [base64, mimeType] = avatar;
-          metadata.setBackground(base64, mimeType);
+          const [buffer, mimeType] = await avatar.getImage();
+          metadata.setBackground(buffer.toString('base64'), mimeType);
+          metadata.setBackgroundColor(avatar.background_color);
         }
         metadata.generateImage();
       }

diff --git a/src/endpoint.ts b/src/endpoint.ts
@@ -3,8 +3,7 @@ import { FetchError } from 'node-fetch';
 import { getDomain } from './domain';
 import { checkContract, ContractMismatchError } from './contract';
 import {
-  getAvatarImage,
-  getAvatarMeta,
+  getAvatar,
   ResolverNotFound,
   RetrieveURIFailed,
   TextRecordNotFound,
@@ -131,7 +130,8 @@ export default function (app: Express) {
     const { name, networkName } = req.params;
     try {
       const { provider } = getNetwork(networkName);
-      const meta = await getAvatarMeta(provider, name, networkName);
+      const avatar = await getAvatar(provider, name);
+      const meta = await avatar.getMeta(networkName);
       if (meta) {
         res.status(200).json(meta);
       } else {
@@ -168,7 +168,8 @@ export default function (app: Express) {
     const { name, networkName } = req.params;
     try {
       const { provider } = getNetwork(networkName);
-      const [buffer, mimeType] = await getAvatarImage(provider, name);
+      const avatar = await getAvatar(provider, name);
+      const [buffer, mimeType] = await avatar.getImage();
       if (buffer) {
         res.writeHead(200, {
           'Content-Type': mimeType,

diff --git a/src/metadata.ts b/src/metadata.ts
@@ -24,6 +24,7 @@ export interface Metadata {
   name_length?: number;
   image_url?: string;
   is_normalized: boolean;
+  background_color?: string;
   background_image?: string;
   mimeType?: string;
   url?: string | null;
@@ -86,6 +87,12 @@ https://en.wikipedia.org/wiki/IDN_homograph_attack';
     this.image_url = image_url;
   }
 
+  setBackgroundColor(hex: string) {
+    if (hex) {
+      this.background_color = `#${hex}`;
+    }
+  }
+
   setBackground(base64: string, mimeType?: string) {
     if (this.is_normalized) {
       this.background_image = base64;
@@ -148,7 +155,7 @@ https://en.wikipedia.org/wiki/IDN_homograph_attack';
     <tspan x="32" dy="1.2em">${str.substring(index, str.length)}</tspan>
     `;
   }
-  
+
   private _generateByVersion(
     ...args: [
       domainFontSize: number,
@@ -216,6 +223,7 @@ https://en.wikipedia.org/wiki/IDN_homograph_attack';
     version: Version
   ) {
     return createSVGfromTemplate({
+      backgroundColor: this.background_color,
       backgroundImage: this.background_image,
       domain,
       domainFontSize,

diff --git a/src/svg-template.ts b/src/svg-template.ts