Socket
Socket
Sign inDemoInstall

@cfx-kit/wallet-avatar

Package Overview
Dependencies
2
Maintainers
4
Versions
14
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.0.3-beta to 0.0.3-beta-ODI3NzQ5NTM1

html.d.ts

8

package.json
{
"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 = {
'&': '&amp;',
'<': '&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 });

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc