@cfx-kit/wallet-avatar - npm Package Compare versions

Comparing version 0.0.4-beta to 0.0.4

index.d.ts

@@ -6,3 +6,5 @@ import MersenneTwister from 'mersenne-twister';
     generateAvatarSvg(address: string): SVGSVGElement;
-    genShape(remainingColors: Array<string>, i: number, total: number, svg: Element): void;
+    generateAvatarURL(address: string): string;
+    generateAvatarHTML(address: string): string;
+    genShape(remainingColors: Array<string>, i: number, total: number): import("./html").HTMLTemplate;
     genColor(colors: Array<string>): string;
@@ -17,3 +19,5 @@ hueShift(colors: Array<string>): string[];
 }
-declare function generateSVGIcon(address: string): SVGSVGElement;
-export default generateSVGIcon;
+export declare function generateAvatarSVG(address: string): SVGSVGElement;
+export declare function generateAvatarURL(address: string): string;
+export declare function generateAvatarHTML(address: string): string;
+export default generateAvatarSVG;

index.js

 import MersenneTwister from 'mersenne-twister';
+import html from './html';
 const colors = [
@@ -72,31 +73,27 @@ '#01888C',
     generateAvatarSvg(address) {
+        const html = this.generateAvatarHTML(address);
+        const temp = document.createElement('template');
+        temp.innerHTML = html;
+        return temp.content.firstChild;
+    }
+    generateAvatarURL(address) {
+        const html = this.generateAvatarHTML(address);
+        return `data:image/svg+xml;base64,${btoa(html)}`;
+    }
+    generateAvatarHTML(address) {
         this.mt.init_seed(addressToNumber(address));
         const remainingColors = this.hueShift(colors.slice());
         const bgColor = this.genColor(remainingColors);
-        const svg = document.createElementNS(svgNamespaceURI, 'svg');
-        svg.setAttributeNS(null, 'x', '0');
-        svg.setAttributeNS(null, 'y', '0');
-        svg.setAttributeNS(null, 'width', '100%');
-        svg.setAttributeNS(null, 'height', '100%');
-        svg.setAttribute('viewBox', '0 0 100 100');
-        const bgRect = document.createElementNS(svgNamespaceURI, 'rect');
-        bgRect.setAttribute('x', '0');
-        bgRect.setAttribute('y', '0');
-        bgRect.setAttribute('width', '100');
-        bgRect.setAttribute('height', '100');
-        bgRect.setAttribute('fill', bgColor);
-        svg.appendChild(bgRect);
-        for (var i = 0; i < shapeCount - 1; i++) {
-            this.genShape(remainingColors, i, shapeCount - 1, svg);
-        }
-        return svg;
+        const bgRectHTML = html `<rect x="0" y="0" width="100" height="100" fill="${bgColor}"></rect>`;
+        const items = Array(shapeCount - 1)
+            .fill('$')
+            .map((_, i) => {
+            return this.genShape(remainingColors, i, shapeCount - 1);
+        });
+        const svgHTML = html `<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="${svgNamespaceURI}">${bgRectHTML}${items}</svg>`;
+        return svgHTML.getHTML();
     }
-    genShape(remainingColors, i, total, svg) {
+    genShape(remainingColors, i, total) {
         const diameter = 100;
         const center = diameter / 2;
-        const shape = document.createElementNS(svgNamespaceURI, 'rect');
-        shape.setAttributeNS(null, 'x', '0');
-        shape.setAttributeNS(null, 'y', '0');
-        shape.setAttributeNS(null, 'width', diameter.toString());
-        shape.setAttributeNS(null, 'height', diameter.toString());
         const firstRot = this.mt.random();
@@ -108,3 +105,2 @@ const angle = Math.PI * 2 * firstRot;
         const translate = 'translate(' + tx + ' ' + ty + ')';
-        // Third random is a shape rotation on top of all of that.
         const secondRot = this.mt.random();
@@ -114,6 +110,5 @@ const rot = firstRot * 360 + secondRot * 180;
         const transform = translate + ' ' + rotate;
-        shape.setAttributeNS(null, 'transform', transform);
         const fill = this.genColor(remainingColors);
-        shape.setAttributeNS(null, 'fill', fill);
-        svg.appendChild(shape);
+        const rectHTML = html `<rect x="0" y="0" width="${diameter}" height="${diameter}" transform="${transform}" fill="${fill}"></rect>`;
+        return rectHTML;
     }
@@ -169,7 +164,15 @@ genColor(colors) {
 }
-function generateSVGIcon(address) {
+export function generateAvatarSVG(address) {
     const wag = new WalletAvatarGenerate(new MersenneTwister());
     return wag.generateAvatarSvg(address);
 }
-export default generateSVGIcon;
+export function generateAvatarURL(address) {
+    const wag = new WalletAvatarGenerate(new MersenneTwister());
+    return wag.generateAvatarURL(address);
+}
+export function generateAvatarHTML(address) {
+    const wag = new WalletAvatarGenerate(new MersenneTwister());
+    return wag.generateAvatarHTML(address);
+}
+export default generateAvatarSVG;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@cfx-kit/wallet-avatar",
-  "version": "0.0.4-beta",
+  "version": "0.0.4",
   "main": "wallet-avatar.bundle.js",
@@ -14,5 +14,9 @@ "module": "index.js",
   "keywords": [
+    "react",
+    "web3",
     "metamask",
+    "jazzicon",
     "wallet",
     "avatar",
+    "typescript",
     "fluent",
@@ -19,0 +23,0 @@ "conflux"

README.md

@@ -1,2 +0,48 @@
-# avatar
-avatar for wallet and dapp
+| Statements                  | Branches                | Functions                 | Lines             |
+| --------------------------- | ----------------------- | ------------------------- | ----------------- |
+| ![Statements](https://img.shields.io/badge/statements-99.22%25-brightgreen.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-93.9%25-brightgreen.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-100%25-brightgreen.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-96.96%25-brightgreen.svg?style=flat) |
+
+# @cfx-kit/wallet-avatar
+
+![https://img.shields.io/npm/v/@cfx-kit/wallet-avatar](https://img.shields.io/npm/v/@cfx-kit/wallet-avatar)
+![https://img.shields.io/github/issues-raw/ssbarbee/@cfx-kit/wallet-avatar](https://img.shields.io/github/issues-raw/ssbarbee/@cfx-kit/wallet-avatar)
+![https://img.shields.io/npm/dw/@cfx-kit/wallet-avatar](https://img.shields.io/npm/dw/@cfx-kit/wallet-avatar)
+
+🤡 A library for generate MetaMask avatars based on account address.
+
+✨ For example, use the metamask account to generate an avatar. You can get the same avatar as metamask. Of course you don't have to use metamask account.
+
+🤣 Say goodbye to boring blocky identicons that look like they came out of the 70s, and replace them with jazzy, colorful collages that more likely came out of the 80's.
+
+## Overview 🧐
+
+The `@cfx-kit/wallet-avatar` library is a collection of functions that can help you generate the same avatar as metamask. Install it and look at its definition and you'll be up and running in no time.
+
+![example](./doc//example.png)
+
+## Installation 📦
+
+### npm
+
+```npm install @cfx-kit/wallet-avatar```
+
+### yarn
+
+```yarn add @cfx-kit/wallet-avatar```
+
+## Demo
+
+For React [codesandbox/@cfx-kit/wallet-avatar](https://codesandbox.io/s/cfx-kit-wallet-avatar-demo-beqzvz?file=/src/App.js)
+
+## Usage 📚
+
+```tsx
+import { generateAvatarURL } from '@cfx-kit/wallet-avatar';
+
+const img = document.createElement('img')
+
+img.src = generateAvatarURL('0x368d31aeB0aBc22E4a020B1ceba386089fc3aCc6')
+
+document.body.appendChild(img)
+
+```

wallet-avatar.bundle.js

@@ -11,2 +11,48 @@ (function (global, factory) {
 
+    function escapeHTML(html) {
+        const map = {
+            '&': '&',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#039;',
+        };
+        return `${html}`.replace(/[&<>"']/g, (i) => {
+            return map[i] || i;
+        });
+    }
+    function valueToHTML(v) {
+        if (v instanceof HTMLTemplate) {
+            return v.toString();
+        }
+        if (Array.isArray(v)) {
+            return v.map((i) => valueToHTML(i)).join('');
+        }
+        if ((typeof v === 'boolean' && v === false) || v === undefined || v === null) {
+            return '';
+        }
+        return escapeHTML(v);
+    }
+    class HTMLTemplate {
+        constructor(strings, values) {
+            this.strings = strings;
+            this.values = values;
+        }
+        getHTML() {
+            const { strings, values } = this;
+            let str = strings[0];
+            for (let i = 1; i < strings.length; i++) {
+                const v = values[i - 1];
+                str += `${valueToHTML(v)}${strings[i]}`;
+            }
+            return str;
+        }
+        toString() {
+            return this.getHTML();
+        }
+    }
+    function html(strings, ...values) {
+        return new HTMLTemplate(strings, values);
+    }
+
     const colors = [
@@ -82,31 +128,27 @@ '#01888C',
         generateAvatarSvg(address) {
+            const html = this.generateAvatarHTML(address);
+            const temp = document.createElement('template');
+            temp.innerHTML = html;
+            return temp.content.firstChild;
+        }
+        generateAvatarURL(address) {
+            const html = this.generateAvatarHTML(address);
+            return `data:image/svg+xml;base64,${btoa(html)}`;
+        }
+        generateAvatarHTML(address) {
             this.mt.init_seed(addressToNumber(address));
             const remainingColors = this.hueShift(colors.slice());
             const bgColor = this.genColor(remainingColors);
-            const svg = document.createElementNS(svgNamespaceURI, 'svg');
-            svg.setAttributeNS(null, 'x', '0');
-            svg.setAttributeNS(null, 'y', '0');
-            svg.setAttributeNS(null, 'width', '100%');
-            svg.setAttributeNS(null, 'height', '100%');
-            svg.setAttribute('viewBox', '0 0 100 100');
-            const bgRect = document.createElementNS(svgNamespaceURI, 'rect');
-            bgRect.setAttribute('x', '0');
-            bgRect.setAttribute('y', '0');
-            bgRect.setAttribute('width', '100');
-            bgRect.setAttribute('height', '100');
-            bgRect.setAttribute('fill', bgColor);
-            svg.appendChild(bgRect);
-            for (var i = 0; i < shapeCount - 1; i++) {
-                this.genShape(remainingColors, i, shapeCount - 1, svg);
-            }
-            return svg;
+            const bgRectHTML = html `<rect x="0" y="0" width="100" height="100" fill="${bgColor}"></rect>`;
+            const items = Array(shapeCount - 1)
+                .fill('$')
+                .map((_, i) => {
+                return this.genShape(remainingColors, i, shapeCount - 1);
+            });
+            const svgHTML = html `<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="${svgNamespaceURI}">${bgRectHTML}${items}</svg>`;
+            return svgHTML.getHTML();
         }
-        genShape(remainingColors, i, total, svg) {
+        genShape(remainingColors, i, total) {
             const diameter = 100;
             const center = diameter / 2;
-            const shape = document.createElementNS(svgNamespaceURI, 'rect');
-            shape.setAttributeNS(null, 'x', '0');
-            shape.setAttributeNS(null, 'y', '0');
-            shape.setAttributeNS(null, 'width', diameter.toString());
-            shape.setAttributeNS(null, 'height', diameter.toString());
             const firstRot = this.mt.random();
@@ -118,3 +160,2 @@ const angle = Math.PI * 2 * firstRot;
             const translate = 'translate(' + tx + ' ' + ty + ')';
-            // Third random is a shape rotation on top of all of that.
             const secondRot = this.mt.random();
@@ -124,6 +165,5 @@ const rot = firstRot * 360 + secondRot * 180;
             const transform = translate + ' ' + rotate;
-            shape.setAttributeNS(null, 'transform', transform);
             const fill = this.genColor(remainingColors);
-            shape.setAttributeNS(null, 'fill', fill);
-            svg.appendChild(shape);
+            const rectHTML = html `<rect x="0" y="0" width="${diameter}" height="${diameter}" transform="${transform}" fill="${fill}"></rect>`;
+            return rectHTML;
         }
@@ -179,9 +219,20 @@ genColor(colors) {
     }
-    function generateSVGIcon(address) {
+    function generateAvatarSVG(address) {
         const wag = new WalletAvatarGenerate(new MersenneTwister__default["default"]());
         return wag.generateAvatarSvg(address);
     }
+    function generateAvatarURL(address) {
+        const wag = new WalletAvatarGenerate(new MersenneTwister__default["default"]());
+        return wag.generateAvatarURL(address);
+    }
+    function generateAvatarHTML(address) {
+        const wag = new WalletAvatarGenerate(new MersenneTwister__default["default"]());
+        return wag.generateAvatarHTML(address);
+    }
 
     exports.WalletAvatarGenerate = WalletAvatarGenerate;
-    exports["default"] = generateSVGIcon;
+    exports["default"] = generateAvatarSVG;
+    exports.generateAvatarHTML = generateAvatarHTML;
+    exports.generateAvatarSVG = generateAvatarSVG;
+    exports.generateAvatarURL = generateAvatarURL;
 
@@ -188,0 +239,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

No alert changes

Improved metrics

Total package byte prevSize

36286

increased by29.82%

Number of package files

9

increased by50%

Lines of code

478

increased by30.6%

Number of lines in readme file

49

increased by1533.33%

No dependency changes