@cfx-kit/wallet-avatar
Advanced tools
Comparing version 0.0.3-beta to 0.0.3-beta-ODI3NzQ5NTM1
{ | ||
"name": "@cfx-kit/wallet-avatar", | ||
"version": "0.0.3-beta", | ||
"version": "0.0.3-beta-ODI3NzQ5NTM1", | ||
"main": "wallet-avatar.bundle.js", | ||
@@ -14,5 +14,8 @@ "module": "index.js", | ||
"keywords": [ | ||
"react", | ||
"web3", | ||
"metamask", | ||
"wallet", | ||
"avatar", | ||
"typescript", | ||
"fluent", | ||
@@ -22,5 +25,2 @@ "conflux" | ||
"author": "Lin Wang <843022618@qq.com>", | ||
"files": [ | ||
"dist/**/*" | ||
], | ||
"repository": { | ||
@@ -27,0 +27,0 @@ "type": "git", |
@@ -1,2 +0,42 @@ | ||
# 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 | ||
## 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. | ||
## 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) | ||
``` |
@@ -11,2 +11,48 @@ (function (global, factory) { | ||
function escapeHTML(html) { | ||
const map = { | ||
'&': '&', | ||
'<': '<', | ||
'>': '>', | ||
'"': '"', | ||
"'": ''', | ||
}; | ||
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 }); |
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
35925
9
478
43