@xyo-network/react-chain-blockies 1.8.4 → 1.10.0

package/dist/browser/index.mjs

@@ -1,13 +1,8 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
 // src/components/blockies/Account.tsx
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 
 // src/components/blockies/blockies.ts
-var randomSeed = Array.from({
-  length: 4
-});
+var randomSeed = Array.from({ length: 4 });
 function seedRandom(seed) {
   for (let i = 0; i < randomSeed.length; i++) {
     randomSeed[i] = 0;
@@ -16,7 +11,6 @@ function seedRandom(seed) {
     randomSeed[i % 4] = (randomSeed[i % 4] << 5) - randomSeed[i % 4] + seed.codePointAt(i);
   }
 }
-__name(seedRandom, "seedRandom");
 function rand() {
   const t = randomSeed[0] ^ randomSeed[0] << 11;
   randomSeed[0] = randomSeed[1];
@@ -25,14 +19,12 @@ function rand() {
   randomSeed[3] = randomSeed[3] ^ randomSeed[3] >> 19 ^ t ^ t >> 8;
   return (randomSeed[3] >>> 0) / (1 << 31 >>> 0);
 }
-__name(rand, "rand");
 function createColor() {
   const h = Math.floor(rand() * 360);
   const s = rand() * 60 + 40 + "%";
   const l = (rand() + rand() + rand() + rand()) * 25 + "%";
   return "hsl(" + h + "," + s + "," + l + ")";
 }
-__name(createColor, "createColor");
 function createImageData(size) {
   const width = size;
   const height = size;
@@ -46,17 +38,13 @@ function createImageData(size) {
     }
     const r = row.slice(0, mirrorWidth);
     r.reverse();
-    row = [
-      ...row,
-      ...r
-    ];
+    row = [...row, ...r];
     for (const element of row) {
       data.push(element);
     }
   }
   return data;
 }
-__name(createImageData, "createImageData");
 function buildOpts(opts) {
   const newOpts = {};
   newOpts.seed = opts.seed ?? Math.floor(Math.random() * Math.pow(10, 16)).toString(16);
@@ -68,7 +56,6 @@ function buildOpts(opts) {
   newOpts.spotcolor = opts.spotcolor ?? createColor();
   return newOpts;
 }
-__name(buildOpts, "buildOpts");
 function renderIcon(opts, canvas) {
   const updatedOptions = buildOpts(opts ?? {});
   const imageData = createImageData(updatedOptions.size);
@@ -89,69 +76,64 @@ function renderIcon(opts, canvas) {
   }
   return canvas;
 }
-__name(renderIcon, "renderIcon");
 function createIcon(opts) {
   var canvas = document.createElement("canvas");
   renderIcon(opts, canvas);
   return canvas;
 }
-__name(createIcon, "createIcon");
 
 // src/components/blockies/Account.tsx
-var BlockiesAccount = /* @__PURE__ */ __name(({ ...options }) => {
+import { jsx } from "react/jsx-runtime";
+var BlockiesAccount = ({ ...options }) => {
   const img = useMemo(() => {
     if (options.seed !== void 0) {
       return createIcon(options).toDataURL();
     }
-  }, [
-    options
-  ]);
-  return /* @__PURE__ */ React.createElement("img", {
-    src: img
-  });
-}, "BlockiesAccount");
+  }, [options]);
+  return /* @__PURE__ */ jsx("img", { src: img });
+};
 
 // src/components/blockies/Avatar.tsx
 import { Avatar, useTheme } from "@mui/material";
 import { grey } from "@mui/material/colors";
 import { alphaCss } from "@xylabs/react-theme";
-import React2, { useMemo as useMemo2 } from "react";
-var BlockiesAvatar = /* @__PURE__ */ __name(({ blockiesOptions, ...props }) => {
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var BlockiesAvatar = ({ blockiesOptions, ...props }) => {
   const img = useMemo2(() => {
     if (blockiesOptions?.seed !== void 0) {
       return createIcon(blockiesOptions).toDataURL();
     }
-  }, [
-    blockiesOptions
-  ]);
-  return /* @__PURE__ */ React2.createElement(Avatar, {
-    component: "span",
-    src: img,
-    ...props
-  });
-}, "BlockiesAvatar");
-var BlockiesAvatarAddress = /* @__PURE__ */ __name(({ address, borderSizeFactor = 0.0833, size = 24, sx, ...props }) => {
+  }, [blockiesOptions]);
+  return /* @__PURE__ */ jsx2(Avatar, { component: "span", src: img, ...props });
+};
+var BlockiesAvatarAddress = ({
+  address,
+  borderSizeFactor = 0.0833,
+  size = 24,
+  sx,
+  ...props
+}) => {
   const theme = useTheme();
   const options = useMemo2(() => {
     if (address !== void 0) {
-      return {
-        seed: address
-      };
+      return { seed: address };
     }
-  }, [
-    address
-  ]);
-  return /* @__PURE__ */ React2.createElement(BlockiesAvatar, {
-    blockiesOptions: options,
-    sx: {
-      width: size,
-      height: size,
-      border: `${Math.ceil(size * borderSizeFactor)}px solid ${alphaCss(theme.vars?.palette.text.primary ?? grey[500], 0.8)}`,
-      ...sx
-    },
-    ...props
-  });
-}, "BlockiesAvatarAddress");
+  }, [address]);
+  return /* @__PURE__ */ jsx2(
+    BlockiesAvatar,
+    {
+      blockiesOptions: options,
+      sx: {
+        width: size,
+        height: size,
+        border: `${Math.ceil(size * borderSizeFactor)}px solid ${alphaCss(theme.vars?.palette.text.primary ?? grey[500], 0.8)}`,
+        ...sx
+      },
+      ...props
+    }
+  );
+};
 export {
   BlockiesAccount,
   BlockiesAvatar,

package/dist/browser/index.mjs.map

@@ -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":["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"]}
+{"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"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/react-chain-blockies",
-  "version": "1.8.4",
+  "version": "1.10.0",
   "description": "XYO Layer One React SDK Blockies",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -41,28 +41,29 @@
     "src"
   ],
   "dependencies": {
-    "@xylabs/react-theme": "^6.4.0"
+    "@xylabs/react-theme": "~7.0.0"
   },
   "devDependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/material": "^7.2.0",
-    "@storybook/react-vite": "^9.0.18",
-    "@types/react": "^19.1.9",
-    "@xylabs/ts-scripts-yarn3": "^7.0.2",
-    "@xylabs/tsconfig-react": "^7.0.2",
-    "knip": "^5.62.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "typescript": "^5.8.3"
+    "@emotion/react": "~11.14.0",
+    "@emotion/styled": "~11.14.1",
+    "@mui/material": "~7.3.0",
+    "@storybook/react-vite": "~9.1.1",
+    "@types/react": "~19.1.9",
+    "@xylabs/ts-scripts-yarn3": "~7.0.3",
+    "@xylabs/tsconfig": "~7.0.3",
+    "@xylabs/tsconfig-dom": "~7.0.3",
+    "@xylabs/tsconfig-react": "~7.0.3",
+    "react": "~19.1.1",
+    "react-dom": "~19.1.1",
+    "typescript": "~5.9.2"
   },
   "peerDependencies": {
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
+    "@emotion/react": "~11",
+    "@emotion/styled": "~11",
     "@mui/icons-material": ">=6 <8",
     "@mui/material": ">=6 <8",
-    "react": "^19",
-    "react-dom": "^19"
+    "react": "~19",
+    "react-dom": "~19"
   },
   "publishConfig": {
     "access": "restricted"