@xyo-network/react-chain-blockies 1.3.15 → 1.3.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/browser/index.mjs
CHANGED
|
@@ -59,18 +59,18 @@ function createImageData(size) {
|
|
|
59
59
|
__name(createImageData, "createImageData");
|
|
60
60
|
function buildOpts(opts) {
|
|
61
61
|
const newOpts = {};
|
|
62
|
-
newOpts.seed = opts.seed
|
|
62
|
+
newOpts.seed = opts.seed ?? Math.floor(Math.random() * Math.pow(10, 16)).toString(16);
|
|
63
63
|
seedRandom(newOpts.seed);
|
|
64
|
-
newOpts.size = opts.size
|
|
65
|
-
newOpts.scale = opts.scale
|
|
66
|
-
newOpts.color = opts.color
|
|
67
|
-
newOpts.bgcolor = opts.bgcolor
|
|
68
|
-
newOpts.spotcolor = opts.spotcolor
|
|
64
|
+
newOpts.size = opts.size ?? 8;
|
|
65
|
+
newOpts.scale = opts.scale ?? 4;
|
|
66
|
+
newOpts.color = opts.color ?? createColor();
|
|
67
|
+
newOpts.bgcolor = opts.bgcolor ?? createColor();
|
|
68
|
+
newOpts.spotcolor = opts.spotcolor ?? createColor();
|
|
69
69
|
return newOpts;
|
|
70
70
|
}
|
|
71
71
|
__name(buildOpts, "buildOpts");
|
|
72
72
|
function renderIcon(opts, canvas) {
|
|
73
|
-
const updatedOptions = buildOpts(opts
|
|
73
|
+
const updatedOptions = buildOpts(opts ?? {});
|
|
74
74
|
const imageData = createImageData(updatedOptions.size);
|
|
75
75
|
const width = Math.sqrt(imageData.length);
|
|
76
76
|
canvas.width = canvas.height = updatedOptions.size * updatedOptions.scale;
|
|
@@ -80,7 +80,7 @@ function renderIcon(opts, canvas) {
|
|
|
80
80
|
cc.fillRect(0, 0, canvas.width, canvas.height);
|
|
81
81
|
cc.fillStyle = updatedOptions.color;
|
|
82
82
|
for (const [i, imageDatum] of imageData.entries()) {
|
|
83
|
-
if (imageDatum) {
|
|
83
|
+
if (imageDatum > 0) {
|
|
84
84
|
const row = Math.floor(i / width);
|
|
85
85
|
const col = i % width;
|
|
86
86
|
cc.fillStyle = imageDatum == 1 ? updatedOptions.color : updatedOptions.spotcolor;
|
|
@@ -100,7 +100,7 @@ __name(createIcon, "createIcon");
|
|
|
100
100
|
// src/components/blockies/Account.tsx
|
|
101
101
|
var BlockiesAccount = /* @__PURE__ */ __name(({ ...options }) => {
|
|
102
102
|
const img = useMemo(() => {
|
|
103
|
-
if (options.seed) {
|
|
103
|
+
if (options.seed !== void 0) {
|
|
104
104
|
return createIcon(options).toDataURL();
|
|
105
105
|
}
|
|
106
106
|
}, [
|
|
@@ -116,7 +116,7 @@ import { Avatar } from "@mui/material";
|
|
|
116
116
|
import React2, { useMemo as useMemo2 } from "react";
|
|
117
117
|
var BlockiesAvatar = /* @__PURE__ */ __name(({ blockiesOptions, ...props }) => {
|
|
118
118
|
const img = useMemo2(() => {
|
|
119
|
-
if (blockiesOptions?.seed) {
|
|
119
|
+
if (blockiesOptions?.seed !== void 0) {
|
|
120
120
|
return createIcon(blockiesOptions).toDataURL();
|
|
121
121
|
}
|
|
122
122
|
}, [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/blockies/Account.tsx","../../src/components/blockies/blockies.ts","../../src/components/blockies/Avatar.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\n\nimport type { BlockiesOptions } from './blockies.ts'\nimport { createIcon } from './blockies.ts'\n\nexport interface BlockiesAccountProps extends Partial<BlockiesOptions> {}\n\nexport const BlockiesAccount: React.FC<BlockiesAccountProps> = ({ ...options }) => {\n const img = useMemo(() => {\n if (options.seed) {\n return createIcon(options).toDataURL()\n }\n }, [options])\n\n return <img src={img} />\n}\n","// The random number is a js implementation of the Xorshift PRNG\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst randomSeed: any[] = Array.from({ length: 4 }) // Xorshift: [x, y, z, w] 32 bit values\n\nfunction seedRandom(seed: string) {\n for (let i = 0; i < randomSeed.length; i++) {\n randomSeed[i] = 0\n }\n for (let i = 0; i < seed.length; i++) {\n randomSeed[i % 4] = ((randomSeed[i % 4] << 5) - randomSeed[i % 4]) + seed.codePointAt(i)!\n }\n}\n\nfunction rand() {\n // based on Java's String.hashCode(), expanded to 4 32bit values\n const t = randomSeed[0] ^ (randomSeed[0] << 11)\n\n randomSeed[0] = randomSeed[1]\n randomSeed[1] = randomSeed[2]\n randomSeed[2] = randomSeed[3]\n randomSeed[3] = (randomSeed[3] ^ (randomSeed[3] >> 19) ^ t ^ (t >> 8))\n\n return (randomSeed[3] >>> 0) / ((1 << 31) >>> 0)\n}\n\nfunction createColor() {\n // saturation is the whole color spectrum\n const h = Math.floor(rand() * 360)\n // saturation goes from 40 to 100, it avoids greyish colors\n const s = ((rand() * 60) + 40) + '%'\n // lightness can be anything from 0 to 100, but probabilities are a bell curve around 50%\n const l = ((rand() + rand() + rand() + rand()) * 25) + '%'\n\n return 'hsl(' + h + ',' + s + ',' + l + ')'\n}\n\nfunction createImageData(size: number) {\n const width = size // Only support square icons for now\n const height = size\n\n const dataWidth = Math.ceil(width / 2)\n const mirrorWidth = width - dataWidth\n\n const data = []\n for (let y = 0; y < height; y++) {\n let row = []\n for (let x = 0; x < dataWidth; x++) {\n // this makes foreground and background color to have a 43% (1/2.3) probability\n // spot color has 13% chance\n row[x] = Math.floor(rand() * 2.3)\n }\n const r = row.slice(0, mirrorWidth)\n r.reverse()\n row = [...row, ...r]\n\n for (const element of row) {\n data.push(element)\n }\n }\n\n return data\n}\n\nexport interface BlockiesOptions {\n bgcolor: string\n color: string\n scale: number\n seed: string\n size: number\n spotcolor: string\n}\n\nexport function buildOpts(opts: Partial<BlockiesOptions>): BlockiesOptions {\n const newOpts = {} as BlockiesOptions\n\n newOpts.seed = opts.seed
|
|
1
|
+
{"version":3,"sources":["../../src/components/blockies/Account.tsx","../../src/components/blockies/blockies.ts","../../src/components/blockies/Avatar.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\n\nimport type { BlockiesOptions } from './blockies.ts'\nimport { createIcon } from './blockies.ts'\n\nexport interface BlockiesAccountProps extends Partial<BlockiesOptions> {}\n\nexport const BlockiesAccount: React.FC<BlockiesAccountProps> = ({ ...options }) => {\n const img = useMemo(() => {\n if (options.seed !== undefined) {\n return createIcon(options).toDataURL()\n }\n }, [options])\n\n return <img src={img} />\n}\n","// The random number is a js implementation of the Xorshift PRNG\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst randomSeed: any[] = Array.from({ length: 4 }) // Xorshift: [x, y, z, w] 32 bit values\n\nfunction seedRandom(seed: string) {\n for (let i = 0; i < randomSeed.length; i++) {\n randomSeed[i] = 0\n }\n for (let i = 0; i < seed.length; i++) {\n randomSeed[i % 4] = ((randomSeed[i % 4] << 5) - randomSeed[i % 4]) + seed.codePointAt(i)!\n }\n}\n\nfunction rand() {\n // based on Java's String.hashCode(), expanded to 4 32bit values\n const t = randomSeed[0] ^ (randomSeed[0] << 11)\n\n randomSeed[0] = randomSeed[1]\n randomSeed[1] = randomSeed[2]\n randomSeed[2] = randomSeed[3]\n randomSeed[3] = (randomSeed[3] ^ (randomSeed[3] >> 19) ^ t ^ (t >> 8))\n\n return (randomSeed[3] >>> 0) / ((1 << 31) >>> 0)\n}\n\nfunction createColor() {\n // saturation is the whole color spectrum\n const h = Math.floor(rand() * 360)\n // saturation goes from 40 to 100, it avoids greyish colors\n const s = ((rand() * 60) + 40) + '%'\n // lightness can be anything from 0 to 100, but probabilities are a bell curve around 50%\n const l = ((rand() + rand() + rand() + rand()) * 25) + '%'\n\n return 'hsl(' + h + ',' + s + ',' + l + ')'\n}\n\nfunction createImageData(size: number) {\n const width = size // Only support square icons for now\n const height = size\n\n const dataWidth = Math.ceil(width / 2)\n const mirrorWidth = width - dataWidth\n\n const data = []\n for (let y = 0; y < height; y++) {\n let row = []\n for (let x = 0; x < dataWidth; x++) {\n // this makes foreground and background color to have a 43% (1/2.3) probability\n // spot color has 13% chance\n row[x] = Math.floor(rand() * 2.3)\n }\n const r = row.slice(0, mirrorWidth)\n r.reverse()\n row = [...row, ...r]\n\n for (const element of row) {\n data.push(element)\n }\n }\n\n return data\n}\n\nexport interface BlockiesOptions {\n bgcolor: string\n color: string\n scale: number\n seed: string\n size: number\n spotcolor: string\n}\n\nexport function buildOpts(opts: Partial<BlockiesOptions>): BlockiesOptions {\n const newOpts = {} as BlockiesOptions\n\n newOpts.seed = opts.seed ?? Math.floor((Math.random() * Math.pow(10, 16))).toString(16)\n\n seedRandom(newOpts.seed)\n\n newOpts.size = opts.size ?? 8\n newOpts.scale = opts.scale ?? 4\n newOpts.color = opts.color ?? createColor()\n newOpts.bgcolor = opts.bgcolor ?? createColor()\n newOpts.spotcolor = opts.spotcolor ?? createColor()\n\n return newOpts\n}\n\nexport function renderIcon(opts: Partial<BlockiesOptions>, canvas: HTMLCanvasElement) {\n const updatedOptions = buildOpts(opts ?? {})\n const imageData = createImageData(updatedOptions.size)\n const width = Math.sqrt(imageData.length)\n\n canvas.width = canvas.height = updatedOptions.size * updatedOptions.scale\n\n const cc = canvas.getContext('2d')\n if (cc === null) throw new Error('unable to get 2d context')\n cc.fillStyle = updatedOptions.bgcolor\n cc.fillRect(0, 0, canvas.width, canvas.height)\n cc.fillStyle = updatedOptions.color\n\n for (const [i, imageDatum] of imageData.entries()) {\n // if data is 0, leave the background\n if (imageDatum > 0) {\n const row = Math.floor(i / width)\n const col = i % width\n\n // if data is 2, choose spot color, if 1 choose foreground\n cc.fillStyle = (imageDatum == 1) ? updatedOptions.color : updatedOptions.spotcolor\n\n cc.fillRect(col * updatedOptions.scale, row * updatedOptions.scale, updatedOptions.scale, updatedOptions.scale)\n }\n }\n\n return canvas\n}\n\nexport function createIcon(opts: Partial<BlockiesOptions>) {\n var canvas = document.createElement('canvas')\n\n renderIcon(opts, canvas)\n\n return canvas\n}\n","import type { AvatarProps } from '@mui/material'\nimport { Avatar } from '@mui/material'\nimport React, { useMemo } from 'react'\n\nimport type { BlockiesOptions } from './blockies.ts'\nimport { createIcon } from './blockies.ts'\n\nexport interface BlockiesAvatarProps extends AvatarProps {\n blockiesOptions?: Partial<BlockiesOptions>\n}\n\nexport const BlockiesAvatar: React.FC<BlockiesAvatarProps> = ({ blockiesOptions, ...props }) => {\n const img = useMemo(() => {\n if (blockiesOptions?.seed !== undefined) {\n return createIcon(blockiesOptions).toDataURL()\n }\n }, [blockiesOptions])\n\n return (\n <Avatar component=\"span\" src={img} {...props} />\n )\n}\n"],"mappings":"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","names":["React","useMemo","randomSeed","Array","from","length","seedRandom","seed","i","codePointAt","rand","t","createColor","h","Math","floor","s","l","createImageData","size","width","height","dataWidth","ceil","mirrorWidth","data","y","row","x","r","slice","reverse","element","push","buildOpts","opts","newOpts","random","pow","toString","scale","color","bgcolor","spotcolor","renderIcon","canvas","updatedOptions","imageData","sqrt","cc","getContext","Error","fillStyle","fillRect","imageDatum","entries","col","createIcon","document","createElement","BlockiesAccount","options","img","useMemo","seed","undefined","createIcon","toDataURL","src","Avatar","React","useMemo","BlockiesAvatar","blockiesOptions","props","img","useMemo","seed","undefined","createIcon","toDataURL","React","Avatar","component","src"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "http://json.schemastore.org/package.json",
|
|
3
3
|
"name": "@xyo-network/react-chain-blockies",
|
|
4
|
-
"version": "1.3.
|
|
4
|
+
"version": "1.3.16",
|
|
5
5
|
"description": "XYO Layer One React SDK Blockies",
|
|
6
6
|
"homepage": "https://xylabs.com",
|
|
7
7
|
"bugs": {
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@emotion/react": "^11.14.0",
|
|
38
38
|
"@emotion/styled": "^11.14.0",
|
|
39
|
-
"@mui/material": "^7.0
|
|
40
|
-
"@types/react": "^19.1.
|
|
39
|
+
"@mui/material": "^7.1.0",
|
|
40
|
+
"@types/react": "^19.1.3",
|
|
41
41
|
"@xylabs/ts-scripts-yarn3": "^6.5.5",
|
|
42
42
|
"@xylabs/tsconfig-react": "^6.5.5",
|
|
43
|
-
"knip": "^5.
|
|
43
|
+
"knip": "^5.54.1",
|
|
44
44
|
"react": "^19.1.0",
|
|
45
45
|
"react-dom": "^19.1.0",
|
|
46
46
|
"typescript": "^5.8.3"
|
|
@@ -7,7 +7,7 @@ export interface BlockiesAccountProps extends Partial<BlockiesOptions> {}
|
|
|
7
7
|
|
|
8
8
|
export const BlockiesAccount: React.FC<BlockiesAccountProps> = ({ ...options }) => {
|
|
9
9
|
const img = useMemo(() => {
|
|
10
|
-
if (options.seed) {
|
|
10
|
+
if (options.seed !== undefined) {
|
|
11
11
|
return createIcon(options).toDataURL()
|
|
12
12
|
}
|
|
13
13
|
}, [options])
|
|
@@ -11,7 +11,7 @@ export interface BlockiesAvatarProps extends AvatarProps {
|
|
|
11
11
|
|
|
12
12
|
export const BlockiesAvatar: React.FC<BlockiesAvatarProps> = ({ blockiesOptions, ...props }) => {
|
|
13
13
|
const img = useMemo(() => {
|
|
14
|
-
if (blockiesOptions?.seed) {
|
|
14
|
+
if (blockiesOptions?.seed !== undefined) {
|
|
15
15
|
return createIcon(blockiesOptions).toDataURL()
|
|
16
16
|
}
|
|
17
17
|
}, [blockiesOptions])
|
|
@@ -73,21 +73,21 @@ export interface BlockiesOptions {
|
|
|
73
73
|
export function buildOpts(opts: Partial<BlockiesOptions>): BlockiesOptions {
|
|
74
74
|
const newOpts = {} as BlockiesOptions
|
|
75
75
|
|
|
76
|
-
newOpts.seed = opts.seed
|
|
76
|
+
newOpts.seed = opts.seed ?? Math.floor((Math.random() * Math.pow(10, 16))).toString(16)
|
|
77
77
|
|
|
78
78
|
seedRandom(newOpts.seed)
|
|
79
79
|
|
|
80
|
-
newOpts.size = opts.size
|
|
81
|
-
newOpts.scale = opts.scale
|
|
82
|
-
newOpts.color = opts.color
|
|
83
|
-
newOpts.bgcolor = opts.bgcolor
|
|
84
|
-
newOpts.spotcolor = opts.spotcolor
|
|
80
|
+
newOpts.size = opts.size ?? 8
|
|
81
|
+
newOpts.scale = opts.scale ?? 4
|
|
82
|
+
newOpts.color = opts.color ?? createColor()
|
|
83
|
+
newOpts.bgcolor = opts.bgcolor ?? createColor()
|
|
84
|
+
newOpts.spotcolor = opts.spotcolor ?? createColor()
|
|
85
85
|
|
|
86
86
|
return newOpts
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
export function renderIcon(opts: Partial<BlockiesOptions>, canvas: HTMLCanvasElement) {
|
|
90
|
-
const updatedOptions = buildOpts(opts
|
|
90
|
+
const updatedOptions = buildOpts(opts ?? {})
|
|
91
91
|
const imageData = createImageData(updatedOptions.size)
|
|
92
92
|
const width = Math.sqrt(imageData.length)
|
|
93
93
|
|
|
@@ -101,7 +101,7 @@ export function renderIcon(opts: Partial<BlockiesOptions>, canvas: HTMLCanvasEle
|
|
|
101
101
|
|
|
102
102
|
for (const [i, imageDatum] of imageData.entries()) {
|
|
103
103
|
// if data is 0, leave the background
|
|
104
|
-
if (imageDatum) {
|
|
104
|
+
if (imageDatum > 0) {
|
|
105
105
|
const row = Math.floor(i / width)
|
|
106
106
|
const col = i % width
|
|
107
107
|
|