@xyo-network/react-chain-blockies 1.12.0 → 1.12.2

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.
Files changed (3) hide show
  1. package/dist/browser/index.mjs +55 -37
  2. package/dist/browser/index.mjs.map +1 -1
  3. package/package.json +6 -6
package/dist/browser/index.mjs CHANGED
@@ -1,8 +1,13 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
+
1
4
  // src/components/blockies/Account.tsx
2
- import { useMemo } from "react";
5
+ import React, { useMemo } from "react";
3
6
 
4
7
  // src/components/blockies/blockies.ts
5
- var randomSeed = Array.from({ length: 4 });
8
+ var randomSeed = Array.from({
9
+ length: 4
10
+ });
6
11
  function seedRandom(seed) {
7
12
  for (let i = 0; i < randomSeed.length; i++) {
8
13
  randomSeed[i] = 0;
@@ -11,6 +16,7 @@ function seedRandom(seed) {
11
16
  randomSeed[i % 4] = (randomSeed[i % 4] << 5) - randomSeed[i % 4] + seed.codePointAt(i);
12
17
  }
13
18
  }
19
+ __name(seedRandom, "seedRandom");
14
20
  function rand() {
15
21
  const t = randomSeed[0] ^ randomSeed[0] << 11;
16
22
  randomSeed[0] = randomSeed[1];
@@ -19,12 +25,14 @@ function rand() {
19
25
  randomSeed[3] = randomSeed[3] ^ randomSeed[3] >> 19 ^ t ^ t >> 8;
20
26
  return (randomSeed[3] >>> 0) / (1 << 31 >>> 0);
21
27
  }
28
+ __name(rand, "rand");
22
29
  function createColor() {
23
30
  const h = Math.floor(rand() * 360);
24
31
  const s = rand() * 60 + 40 + "%";
25
32
  const l = (rand() + rand() + rand() + rand()) * 25 + "%";
26
33
  return "hsl(" + h + "," + s + "," + l + ")";
27
34
  }
35
+ __name(createColor, "createColor");
28
36
  function createImageData(size) {
29
37
  const width = size;
30
38
  const height = size;
@@ -38,13 +46,17 @@ function createImageData(size) {
38
46
  }
39
47
  const r = row.slice(0, mirrorWidth);
40
48
  r.reverse();
41
- row = [...row, ...r];
49
+ row = [
50
+ ...row,
51
+ ...r
52
+ ];
42
53
  for (const element of row) {
43
54
  data.push(element);
44
55
  }
45
56
  }
46
57
  return data;
47
58
  }
59
+ __name(createImageData, "createImageData");
48
60
  function buildOpts(opts) {
49
61
  const newOpts = {};
50
62
  newOpts.seed = opts.seed ?? Math.floor(Math.random() * Math.pow(10, 16)).toString(16);
@@ -56,6 +68,7 @@ function buildOpts(opts) {
56
68
  newOpts.spotcolor = opts.spotcolor ?? createColor();
57
69
  return newOpts;
58
70
  }
71
+ __name(buildOpts, "buildOpts");
59
72
  function renderIcon(opts, canvas) {
60
73
  const updatedOptions = buildOpts(opts ?? {});
61
74
  const imageData = createImageData(updatedOptions.size);
@@ -76,64 +89,69 @@ function renderIcon(opts, canvas) {
76
89
  }
77
90
  return canvas;
78
91
  }
92
+ __name(renderIcon, "renderIcon");
79
93
  function createIcon(opts) {
80
94
  var canvas = document.createElement("canvas");
81
95
  renderIcon(opts, canvas);
82
96
  return canvas;
83
97
  }
98
+ __name(createIcon, "createIcon");
84
99
 
85
100
  // src/components/blockies/Account.tsx
86
- import { jsx } from "react/jsx-runtime";
87
- var BlockiesAccount = ({ ...options }) => {
101
+ var BlockiesAccount = /* @__PURE__ */ __name(({ ...options }) => {
88
102
  const img = useMemo(() => {
89
103
  if (options.seed !== void 0) {
90
104
  return createIcon(options).toDataURL();
91
105
  }
92
- }, [options]);
93
- return /* @__PURE__ */ jsx("img", { src: img });
94
- };
106
+ }, [
107
+ options
108
+ ]);
109
+ return /* @__PURE__ */ React.createElement("img", {
110
+ src: img
111
+ });
112
+ }, "BlockiesAccount");
95
113
 
96
114
  // src/components/blockies/Avatar.tsx
97
115
  import { Avatar, useTheme } from "@mui/material";
98
116
  import { grey } from "@mui/material/colors";
99
117
  import { alphaCss } from "@xylabs/react-theme";
100
- import { useMemo as useMemo2 } from "react";
101
- import { jsx as jsx2 } from "react/jsx-runtime";
102
- var BlockiesAvatar = ({ blockiesOptions, ...props }) => {
118
+ import React2, { useMemo as useMemo2 } from "react";
119
+ var BlockiesAvatar = /* @__PURE__ */ __name(({ blockiesOptions, ...props }) => {
103
120
  const img = useMemo2(() => {
104
121
  if (blockiesOptions?.seed !== void 0) {
105
122
  return createIcon(blockiesOptions).toDataURL();
106
123
  }
107
- }, [blockiesOptions]);
108
- return /* @__PURE__ */ jsx2(Avatar, { component: "span", src: img, ...props });
109
- };
110
- var BlockiesAvatarAddress = ({
111
- address,
112
- borderSizeFactor = 0.0833,
113
- size = 24,
114
- sx,
115
- ...props
116
- }) => {
124
+ }, [
125
+ blockiesOptions
126
+ ]);
127
+ return /* @__PURE__ */ React2.createElement(Avatar, {
128
+ component: "span",
129
+ src: img,
130
+ ...props
131
+ });
132
+ }, "BlockiesAvatar");
133
+ var BlockiesAvatarAddress = /* @__PURE__ */ __name(({ address, borderSizeFactor = 0.0833, size = 24, sx, ...props }) => {
117
134
  const theme = useTheme();
118
135
  const options = useMemo2(() => {
119
136
  if (address !== void 0) {
120
- return { seed: address };
137
+ return {
138
+ seed: address
139
+ };
121
140
  }
122
- }, [address]);
123
- return /* @__PURE__ */ jsx2(
124
- BlockiesAvatar,
125
- {
126
- blockiesOptions: options,
127
- sx: {
128
- width: size,
129
- height: size,
130
- border: `${Math.ceil(size * borderSizeFactor)}px solid ${alphaCss(theme.vars?.palette.text.primary ?? grey[500], 0.8)}`,
131
- ...sx
132
- },
133
- ...props
134
- }
135
- );
136
- };
141
+ }, [
142
+ address
143
+ ]);
144
+ return /* @__PURE__ */ React2.createElement(BlockiesAvatar, {
145
+ blockiesOptions: options,
146
+ sx: {
147
+ width: size,
148
+ height: size,
149
+ border: `${Math.ceil(size * borderSizeFactor)}px solid ${alphaCss(theme.vars?.palette.text.primary ?? grey[500], 0.8)}`,
150
+ ...sx
151
+ },
152
+ ...props
153
+ });
154
+ }, "BlockiesAvatarAddress");
137
155
  export {
138
156
  BlockiesAccount,
139
157
  BlockiesAvatar,
package/dist/browser/index.mjs.map CHANGED
@@ -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 !== 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, useTheme } from '@mui/material'\nimport { grey } from '@mui/material/colors'\nimport { alphaCss } from '@xylabs/react-theme'\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\nexport interface BlockiesAvatarAddressProps extends AvatarProps {\n /** The Address to display */\n address?: string\n /** Size of the border is the size prop * borderSizeFactor and rounded up */\n borderSizeFactor?: number\n /** The size of the avatar in pixels, defaults to 24 */\n size?: number\n}\n\nexport const BlockiesAvatarAddress: React.FC<BlockiesAvatarAddressProps> = ({\n address, borderSizeFactor = 0.0833, size = 24, sx, ...props\n}) => {\n const theme = useTheme()\n const options = useMemo(() => {\n if (address !== undefined) {\n return { seed: address }\n }\n }, [address])\n\n return (\n <BlockiesAvatar\n blockiesOptions={options}\n sx={{\n width: size,\n height: size,\n border: `${Math.ceil(size * borderSizeFactor)}px solid ${alphaCss(theme.vars?.palette.text.primary ?? grey[500], 0.8)}`,\n ...sx,\n }}\n {...props}\n />\n )\n}\n"],"mappings":"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","names":["useMemo","jsx","useMemo"]}
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, useTheme } from '@mui/material'\nimport { grey } from '@mui/material/colors'\nimport { alphaCss } from '@xylabs/react-theme'\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\nexport interface BlockiesAvatarAddressProps extends AvatarProps {\n /** The Address to display */\n address?: string\n /** Size of the border is the size prop * borderSizeFactor and rounded up */\n borderSizeFactor?: number\n /** The size of the avatar in pixels, defaults to 24 */\n size?: number\n}\n\nexport const BlockiesAvatarAddress: React.FC<BlockiesAvatarAddressProps> = ({\n address, borderSizeFactor = 0.0833, size = 24, sx, ...props\n}) => {\n const theme = useTheme()\n const options = useMemo(() => {\n if (address !== undefined) {\n return { seed: address }\n }\n }, [address])\n\n return (\n <BlockiesAvatar\n blockiesOptions={options}\n sx={{\n width: size,\n height: size,\n border: `${Math.ceil(size * borderSizeFactor)}px solid ${alphaCss(theme.vars?.palette.text.primary ?? grey[500], 0.8)}`,\n ...sx,\n }}\n {...props}\n />\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","useTheme","grey","alphaCss","React","useMemo","BlockiesAvatar","blockiesOptions","props","img","useMemo","seed","undefined","createIcon","toDataURL","React","Avatar","component","src","BlockiesAvatarAddress","address","borderSizeFactor","size","sx","theme","useTheme","options","width","height","border","Math","ceil","alphaCss","vars","palette","text","primary","grey"]}
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.12.0",
4
+ "version": "1.12.2",
5
5
  "description": "XYO Layer One React SDK Blockies",
6
6
  "homepage": "https://xylabs.com",
7
7
  "bugs": {
@@ -41,7 +41,7 @@
41
41
  "src"
42
42
  ],
43
43
  "dependencies": {
44
- "@xylabs/react-theme": "~7.0.0"
44
+ "@xylabs/react-theme": "~7.0.4"
45
45
  },
46
46
  "devDependencies": {
47
47
  "@emotion/react": "~11.14.0",
@@ -49,10 +49,10 @@
49
49
  "@mui/material": "~7.3.1",
50
50
  "@storybook/react-vite": "~9.1.2",
51
51
  "@types/react": "~19.1.10",
52
- "@xylabs/ts-scripts-yarn3": "~7.1.0",
53
- "@xylabs/tsconfig": "~7.1.0",
54
- "@xylabs/tsconfig-dom": "~7.1.0",
55
- "@xylabs/tsconfig-react": "~7.1.0",
52
+ "@xylabs/ts-scripts-yarn3": "~7.1.3",
53
+ "@xylabs/tsconfig": "~7.1.3",
54
+ "@xylabs/tsconfig-dom": "~7.1.3",
55
+ "@xylabs/tsconfig-react": "~7.1.3",
56
56
  "react": "~19.1.1",
57
57
  "react-dom": "~19.1.1",
58
58
  "typescript": "~5.9.2"