@xyo-network/react-chain-blockies 1.20.15 → 1.20.17

package/README.md

@@ -1,448 +1,24 @@
 # @xyo-network/react-chain-blockies
 
-[![logo][]](https://xyo.network)
+[![npm][npm-badge]][npm-link]
+[![license][license-badge]][license-link]
 
-[![npm-badge][]][npm-link]
-[![npm-downloads-badge][]][npm-link]
-[![jsdelivr-badge][]][jsdelivr-link]
-[![npm-license-badge][]](LICENSE)
-[![socket-badge][]][socket-link]
+> XYO Layer One React SDK Blockies
 
-XYO Layer One React SDK Blockies
+## Install
 
-
-
-## Reference
-
-**@xyo-network/react-chain-blockies**
-
-***
-
-## Interfaces
-
-- [BlockiesAccountProps](#interfaces/BlockiesAccountProps)
-- [BlockiesAvatarProps](#interfaces/BlockiesAvatarProps)
-- [BlockiesAvatarAddressProps](#interfaces/BlockiesAvatarAddressProps)
-- [BlockiesAvatarAddressApprovedProps](#interfaces/BlockiesAvatarAddressApprovedProps)
-- [BlockiesOptions](#interfaces/BlockiesOptions)
-
-## Variables
-
-- [BlockiesAccount](#variables/BlockiesAccount)
-- [BlockiesAvatar](#variables/BlockiesAvatar)
-- [BlockiesAvatarAddress](#variables/BlockiesAvatarAddress)
-- [BlockiesAvatarAddressApproved](#variables/BlockiesAvatarAddressApproved)
-
-## Functions
-
-- [buildOpts](#functions/buildOpts)
-- [renderIcon](#functions/renderIcon)
-- [createIcon](#functions/createIcon)
-
-### functions
-
-  ### <a id="buildOpts"></a>buildOpts
-
-[**@xyo-network/react-chain-blockies**](#../README)
-
-***
-
-```ts
-function buildOpts(opts): BlockiesOptions;
-```
-
-## Parameters
-
-### opts
-
-`Partial`\<[`BlockiesOptions`](#../interfaces/BlockiesOptions)\>
-
-## Returns
-
-[`BlockiesOptions`](#../interfaces/BlockiesOptions)
-
-  ### <a id="createIcon"></a>createIcon
-
-[**@xyo-network/react-chain-blockies**](#../README)
-
-***
-
-```ts
-function createIcon(opts): HTMLCanvasElement;
-```
-
-## Parameters
-
-### opts
-
-`Partial`\<[`BlockiesOptions`](#../interfaces/BlockiesOptions)\>
-
-## Returns
-
-`HTMLCanvasElement`
-
-  ### <a id="renderIcon"></a>renderIcon
-
-[**@xyo-network/react-chain-blockies**](#../README)
-
-***
-
-```ts
-function renderIcon(opts, canvas): HTMLCanvasElement;
-```
-
-## Parameters
-
-### opts
-
-`Partial`\<[`BlockiesOptions`](#../interfaces/BlockiesOptions)\>
-
-### canvas
-
-`HTMLCanvasElement`
-
-## Returns
-
-`HTMLCanvasElement`
-
-### interfaces
-
-  ### <a id="BlockiesAccountProps"></a>BlockiesAccountProps
-
-[**@xyo-network/react-chain-blockies**](#../README)
-
-***
-
-## Extends
-
-- `Partial`\<[`BlockiesOptions`](#BlockiesOptions)\>
-
-## Properties
-
-### bgcolor?
-
-```ts
-optional bgcolor: string;
-```
-
-### Inherited from
-
-[`BlockiesOptions`](#BlockiesOptions).[`bgcolor`](BlockiesOptions.md#bgcolor)
-
-***
-
-### color?
-
-```ts
-optional color: string;
-```
-
-### Inherited from
-
-[`BlockiesOptions`](#BlockiesOptions).[`color`](BlockiesOptions.md#color)
-
-***
-
-### scale?
-
-```ts
-optional scale: number;
-```
-
-### Inherited from
-
-[`BlockiesOptions`](#BlockiesOptions).[`scale`](BlockiesOptions.md#scale)
-
-***
-
-### seed?
-
-```ts
-optional seed: string;
-```
-
-### Inherited from
-
-[`BlockiesOptions`](#BlockiesOptions).[`seed`](BlockiesOptions.md#seed)
-
-***
-
-### size?
-
-```ts
-optional size: number;
-```
-
-### Inherited from
-
-[`BlockiesOptions`](#BlockiesOptions).[`size`](BlockiesOptions.md#size)
-
-***
-
-### spotcolor?
-
-```ts
-optional spotcolor: string;
-```
-
-### Inherited from
-
-[`BlockiesOptions`](#BlockiesOptions).[`spotcolor`](BlockiesOptions.md#spotcolor)
-
-  ### <a id="BlockiesAvatarAddressApprovedProps"></a>BlockiesAvatarAddressApprovedProps
-
-[**@xyo-network/react-chain-blockies**](#../README)
-
-***
-
-## Extends
-
-- [`BlockiesAvatarAddressProps`](#BlockiesAvatarAddressProps)
-
-## Properties
-
-### address?
-
-```ts
-optional address: string;
-```
-
-The Address to display
-
-### Inherited from
-
-[`BlockiesAvatarAddressProps`](#BlockiesAvatarAddressProps).[`address`](BlockiesAvatarAddressProps.md#address)
-
-***
-
-### borderSizeFactor?
-
-```ts
-optional borderSizeFactor: number;
-```
-
-Size of the border is the size prop * borderSizeFactor and rounded up
-
-### Inherited from
-
-[`BlockiesAvatarAddressProps`](#BlockiesAvatarAddressProps).[`borderSizeFactor`](BlockiesAvatarAddressProps.md#bordersizefactor)
-
-***
-
-### size?
-
-```ts
-optional size: number;
-```
-
-The size of the avatar in pixels, defaults to 24
-
-### Inherited from
-
-[`BlockiesAvatarAddressProps`](#BlockiesAvatarAddressProps).[`size`](BlockiesAvatarAddressProps.md#size)
-
-***
-
-### approved?
-
-```ts
-optional approved: boolean;
-```
-
-Whether to show the approved badge
-
-***
-
-### badgeVariant?
-
-```ts
-optional badgeVariant: OverridableStringUnion<"standard" | "dot", BadgePropsVariantOverrides>;
-```
-
-  ### <a id="BlockiesAvatarAddressProps"></a>BlockiesAvatarAddressProps
-
-[**@xyo-network/react-chain-blockies**](#../README)
-
-***
-
-## Extends
-
-- `AvatarProps`
-
-## Extended by
-
-- [`BlockiesAvatarAddressApprovedProps`](#BlockiesAvatarAddressApprovedProps)
-
-## Properties
-
-### address?
-
-```ts
-optional address: string;
-```
-
-The Address to display
-
-***
-
-### borderSizeFactor?
-
-```ts
-optional borderSizeFactor: number;
-```
-
-Size of the border is the size prop * borderSizeFactor and rounded up
-
-***
-
-### size?
-
-```ts
-optional size: number;
-```
-
-The size of the avatar in pixels, defaults to 24
-
-  ### <a id="BlockiesAvatarProps"></a>BlockiesAvatarProps
-
-[**@xyo-network/react-chain-blockies**](#../README)
-
-***
-
-## Extends
-
-- `AvatarProps`
-
-## Properties
-
-### blockiesOptions?
-
-```ts
-optional blockiesOptions: Partial<BlockiesOptions>;
-```
-
-  ### <a id="BlockiesOptions"></a>BlockiesOptions
-
-[**@xyo-network/react-chain-blockies**](#../README)
-
-***
-
-## Properties
-
-### bgcolor
-
-```ts
-bgcolor: string;
-```
-
-***
-
-### color
-
-```ts
-color: string;
-```
-
-***
-
-### scale
-
-```ts
-scale: number;
-```
-
-***
-
-### seed
-
-```ts
-seed: string;
-```
-
-***
-
-### size
-
-```ts
-size: number;
+```sh
+{{pm}} add {{name}}
 ```
 
-***
-
-### spotcolor
-
-```ts
-spotcolor: string;
-```
-
-### variables
-
-  ### <a id="BlockiesAccount"></a>BlockiesAccount
-
-[**@xyo-network/react-chain-blockies**](#../README)
-
-***
-
-```ts
-const BlockiesAccount: React.FC<BlockiesAccountProps>;
-```
-
-  ### <a id="BlockiesAvatar"></a>BlockiesAvatar
-
-[**@xyo-network/react-chain-blockies**](#../README)
-
-***
-
-```ts
-const BlockiesAvatar: React.FC<BlockiesAvatarProps>;
-```
-
-  ### <a id="BlockiesAvatarAddress"></a>BlockiesAvatarAddress
-
-[**@xyo-network/react-chain-blockies**](#../README)
-
-***
-
-```ts
-const BlockiesAvatarAddress: React.FC<BlockiesAvatarAddressProps>;
-```
-
-  ### <a id="BlockiesAvatarAddressApproved"></a>BlockiesAvatarAddressApproved
-
-[**@xyo-network/react-chain-blockies**](#../README)
-
-***
-
-```ts
-const BlockiesAvatarAddressApproved: React.FC<BlockiesAvatarAddressApprovedProps>;
-```
-
-
-## Maintainers
-
--   [Arie Trouw](https://github.com/arietrouw) ([arietrouw.com](https://arietrouw.com))
--   [Matt Jones](https://github.com/jonesmac)
--   [Joel Carter](https://github.com/JoelBCarter)
--   [Jordan Trouw](https://github.com/jordantrouw)
 
 ## License
 
-> See the [LICENSE](LICENSE) file for license details
-
-## Credits
+See the [LICENSE](LICENSE) file for license rights and limitations (LGPL-3.0-only).
 
-[Made with 🔥 and ❄️ by XYO](https://xyo.network)
 
-[logo]: https://cdn.xy.company/img/brand/XYO_full_colored.png
 
 [npm-badge]: https://img.shields.io/npm/v/@xyo-network/react-chain-blockies.svg
 [npm-link]: https://www.npmjs.com/package/@xyo-network/react-chain-blockies
-
-[npm-downloads-badge]: https://img.shields.io/npm/dw/@xyo-network/react-chain-blockies
-[npm-license-badge]: https://img.shields.io/npm/l/@xyo-network/react-chain-blockies
-
-[jsdelivr-badge]: https://data.jsdelivr.com/v1/package/npm/@xyo-network/react-chain-blockies/badge
-[jsdelivr-link]: https://www.jsdelivr.com/package/npm/@xyo-network/react-chain-blockies
-
-[socket-badge]: https://socket.dev/api/badge/npm/package/@xyo-network/react-chain-blockies
-[socket-link]: https://socket.dev/npm/package/@xyo-network/react-chain-blockies
+[license-badge]: https://img.shields.io/npm/l/@xyo-network/react-chain-blockies.svg
+[license-link]: https://github.com/xylabs/sdk-js/blob/main/LICENSE

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/react-chain-blockies",
-  "version": "1.20.15",
+  "version": "1.20.17",
   "description": "XYO Layer One React SDK Blockies",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -25,58 +25,58 @@
       "types": "./dist/browser/index.d.ts",
       "browser": {
         "types": "./dist/browser/index.d.ts",
-        "source": "./src/index.ts",
         "default": "./dist/browser/index.mjs"
       },
-      "source": "./src/index.ts",
       "default": "./dist/browser/index.mjs"
     },
     "./package.json": "./package.json"
   },
   "module": "./dist/browser/index.mjs",
-  "source": "./src/index.ts",
   "types": "./dist/browser/index.d.ts",
   "files": [
     "dist",
-    "src",
     "!**/*.bench.*",
     "!**/*.spec.*",
-    "!**/*.test.*"
+    "!**/*.test.*",
+    "README.md"
   ],
   "dependencies": {
     "@mui/icons-material": "~7.3.9",
-    "@xylabs/react-theme": "~7.1.17"
+    "@xylabs/react-theme": "~7.1.20"
   },
   "devDependencies": {
     "@emotion/react": "~11.14.0",
     "@emotion/styled": "~11.14.1",
     "@mui/material": "~7.3.9",
-    "@storybook/react-vite": "^10.3.3",
+    "@opentelemetry/api": "^1",
+    "@storybook/react-vite": "^10.3.5",
+    "@types/node": "^25.5.2",
     "@types/react": "~19.2.14",
-    "@xylabs/ts-scripts-common": "~7.5.11",
-    "@xylabs/ts-scripts-yarn3": "~7.5.11",
-    "@xylabs/tsconfig": "~7.5.11",
-    "@xylabs/tsconfig-dom": "~7.5.11",
-    "@xylabs/tsconfig-react": "~7.5.11",
-    "react": "~19.2.4",
-    "react-dom": "~19.2.4",
-    "react-router-dom": "^7.13.2",
-    "storybook": "^10.3.3",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-promise": "~7.1.20",
+    "@xylabs/ts-scripts-common": "~7.9.6",
+    "@xylabs/ts-scripts-pnpm": "~7.9.6",
+    "@xylabs/tsconfig": "~7.9.6",
+    "@xylabs/tsconfig-dom": "~7.9.6",
+    "@xylabs/tsconfig-react": "~7.9.6",
+    "axios": "^1.15.0",
+    "esbuild": "*",
+    "pako": "~2.1.0",
+    "react": "~19.2.5",
+    "react-dom": "~19.2.5",
+    "storybook": "^10.3.5",
     "typescript": "~5.9.3",
-    "vite": "^8.0.3",
+    "vite": "^8.0.8",
     "zod": "~4.3.6"
   },
   "peerDependencies": {
-    "@emotion/react": "~11",
-    "@emotion/styled": "~11",
-    "@mui/icons-material": ">=6 <8",
-    "@mui/material": ">=6 <8",
-    "react": "~19",
-    "react-dom": "~19",
-    "zod": "^4"
+    "@mui/material": "~7.3.9",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "pako": "~2.1.0",
+    "react": "~19.2.4"
   },
   "publishConfig": {
     "access": "public"
   },
   "docs": "dist/docs.json"
-}
+}

package/src/components/blockies/Account.tsx

@@ -1,16 +0,0 @@
-import React, { useMemo } from 'react'
-
-import type { BlockiesOptions } from './blockies.ts'
-import { createIcon } from './blockies.ts'
-
-export interface BlockiesAccountProps extends Partial<BlockiesOptions> {}
-
-export const BlockiesAccount: React.FC<BlockiesAccountProps> = ({ ...options }) => {
-  const img = useMemo(() => {
-    if (options.seed !== undefined) {
-      return createIcon(options).toDataURL()
-    }
-  }, [options])
-
-  return <img src={img} />
-}

package/src/components/blockies/Avatar.stories.tsx

@@ -1,21 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-
-import { BlockiesAvatarAddress } from './Avatar.tsx'
-
-const address = '0x1234567890abcdef1234567890abcdef12345678'
-
-export default {
-  title: 'Blockies/Avatar/Address',
-  component: BlockiesAvatarAddress,
-} as Meta
-
-const Template: StoryFn<typeof BlockiesAvatarAddress> = args => <BlockiesAvatarAddress {...args} />
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithValue = Template.bind({})
-WithValue.args = { address }
-
-export { Default, WithValue }

package/src/components/blockies/Avatar.tsx

@@ -1,93 +0,0 @@
-import { Circle } from '@mui/icons-material'
-import type { AvatarProps, BadgeProps } from '@mui/material'
-import {
-  Avatar, Badge, useTheme,
-} from '@mui/material'
-import { grey } from '@mui/material/colors'
-import { alphaCss } from '@xylabs/react-theme'
-import React, { useMemo } from 'react'
-
-import type { BlockiesOptions } from './blockies.ts'
-import { createIcon } from './blockies.ts'
-
-export interface BlockiesAvatarProps extends AvatarProps {
-  blockiesOptions?: Partial<BlockiesOptions>
-}
-
-export const BlockiesAvatar: React.FC<BlockiesAvatarProps> = ({ blockiesOptions, ...props }) => {
-  const img = useMemo(() => {
-    if (blockiesOptions?.seed !== undefined) {
-      return createIcon(blockiesOptions).toDataURL()
-    }
-  }, [blockiesOptions])
-
-  return (
-    <Avatar component="span" src={img} {...props} />
-  )
-}
-
-export interface BlockiesAvatarAddressProps extends AvatarProps {
-  /** The Address to display */
-  address?: string
-  /** Size of the border is the size prop * borderSizeFactor and rounded up */
-  borderSizeFactor?: number
-  /** The size of the avatar in pixels, defaults to 24 */
-  size?: number
-}
-
-export const BlockiesAvatarAddress: React.FC<BlockiesAvatarAddressProps> = ({
-  address, borderSizeFactor = 0.0833, size = 24, sx, ...props
-}) => {
-  const theme = useTheme()
-  const options = useMemo(() => {
-    if (address !== undefined) {
-      return { seed: address }
-    }
-  }, [address])
-
-  return (
-    <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 interface BlockiesAvatarAddressApprovedProps extends BlockiesAvatarAddressProps {
-  /** Whether to show the approved badge */
-  approved?: boolean
-  badgeVariant?: BadgeProps['variant']
-}
-
-export const BlockiesAvatarAddressApproved: React.FC<BlockiesAvatarAddressApprovedProps> = ({
-  approved, badgeVariant, ...props
-}) => {
-  const sx = badgeVariant === 'dot'
-    ? {}
-    : {
-        bgcolor: 'white', borderRadius: 12, fontSize: '0.83333rem',
-      }
-  const dotPlacement = badgeVariant === 'dot' ? 3 : 5
-  return (
-    <Badge
-      color={badgeVariant === 'dot' ? 'success' : 'default'}
-      variant={badgeVariant}
-      invisible={!approved}
-      badgeContent={approved ? <Circle color="success" sx={sx} /> : ''}
-      sx={{
-        '& .MuiBadge-badge': {
-          top: dotPlacement,
-          right: dotPlacement,
-        },
-      }}
-    >
-      <BlockiesAvatarAddress {...props} />
-    </Badge>
-  )
-}

package/src/components/blockies/blockies.ts

@@ -1,128 +0,0 @@
-/**
- * inspired by https://github.com/download13/blockies/blob/master/src/blockies.mjs
- */
-
-// The random number is a js implementation of the Xorshift PRNG
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const randomSeed: any[] = Array.from({ length: 4 }) // Xorshift: [x, y, z, w] 32 bit values
-
-function seedRandom(seed: string) {
-  for (let i = 0; i < randomSeed.length; i++) {
-    randomSeed[i] = 0
-  }
-  for (let i = 0; i < seed.length; i++) {
-    randomSeed[i % 4] = ((randomSeed[i % 4] << 5) - randomSeed[i % 4]) + seed.codePointAt(i)!
-  }
-}
-
-function rand() {
-  // based on Java's String.hashCode(), expanded to 4 32bit values
-  const t = randomSeed[0] ^ (randomSeed[0] << 11)
-
-  randomSeed[0] = randomSeed[1]
-  randomSeed[1] = randomSeed[2]
-  randomSeed[2] = randomSeed[3]
-  randomSeed[3] = (randomSeed[3] ^ (randomSeed[3] >> 19) ^ t ^ (t >> 8))
-
-  return (randomSeed[3] >>> 0) / ((1 << 31) >>> 0)
-}
-
-function createColor() {
-  // saturation is the whole color spectrum
-  const h = Math.floor(rand() * 360)
-  // saturation goes from 40 to 100, it avoids greyish colors
-  const s = ((rand() * 60) + 40) + '%'
-  // lightness can be anything from 0 to 100, but probabilities are a bell curve around 50%
-  const l = ((rand() + rand() + rand() + rand()) * 25) + '%'
-
-  return 'hsl(' + h + ',' + s + ',' + l + ')'
-}
-
-function createImageData(size: number) {
-  const width = size // Only support square icons for now
-  const height = size
-
-  const dataWidth = Math.ceil(width / 2)
-  const mirrorWidth = width - dataWidth
-
-  const data = []
-  for (let y = 0; y < height; y++) {
-    let row = []
-    for (let x = 0; x < dataWidth; x++) {
-      // this makes foreground and background color to have a 43% (1/2.3) probability
-      // spot color has 13% chance
-      row[x] = Math.floor(rand() * 2.3)
-    }
-    const r = row.slice(0, mirrorWidth)
-    r.reverse()
-    row = [...row, ...r]
-
-    for (const element of row) {
-      data.push(element)
-    }
-  }
-
-  return data
-}
-
-export interface BlockiesOptions {
-  bgcolor: string
-  color: string
-  scale: number
-  seed: string
-  size: number
-  spotcolor: string
-}
-
-export function buildOpts(opts: Partial<BlockiesOptions>): BlockiesOptions {
-  const newOpts = {} as BlockiesOptions
-
-  newOpts.seed = opts.seed ?? Math.floor((Math.random() * Math.pow(10, 16))).toString(16)
-
-  seedRandom(newOpts.seed)
-
-  newOpts.size = opts.size ?? 8
-  newOpts.scale = opts.scale ?? 4
-  newOpts.color = opts.color ?? createColor()
-  newOpts.bgcolor = opts.bgcolor ?? createColor()
-  newOpts.spotcolor = opts.spotcolor ?? createColor()
-
-  return newOpts
-}
-
-export function renderIcon(opts: Partial<BlockiesOptions>, canvas: HTMLCanvasElement) {
-  const updatedOptions = buildOpts(opts ?? {})
-  const imageData = createImageData(updatedOptions.size)
-  const width = Math.sqrt(imageData.length)
-
-  canvas.width = canvas.height = updatedOptions.size * updatedOptions.scale
-
-  const cc = canvas.getContext('2d')
-  if (cc === null) throw new Error('unable to get 2d context')
-  cc.fillStyle = updatedOptions.bgcolor
-  cc.fillRect(0, 0, canvas.width, canvas.height)
-  cc.fillStyle = updatedOptions.color
-
-  for (const [i, imageDatum] of imageData.entries()) {
-    // if data is 0, leave the background
-    if (imageDatum > 0) {
-      const row = Math.floor(i / width)
-      const col = i % width
-
-      // if data is 2, choose spot color, if 1 choose foreground
-      cc.fillStyle = (imageDatum == 1) ? updatedOptions.color : updatedOptions.spotcolor
-
-      cc.fillRect(col * updatedOptions.scale, row * updatedOptions.scale, updatedOptions.scale, updatedOptions.scale)
-    }
-  }
-
-  return canvas
-}
-
-export function createIcon(opts: Partial<BlockiesOptions>) {
-  var canvas = document.createElement('canvas')
-
-  renderIcon(opts, canvas)
-
-  return canvas
-}

package/src/components/blockies/index.ts

@@ -1,3 +0,0 @@
-export * from './Account.tsx'
-export * from './Avatar.tsx'
-export * from './blockies.ts'

package/src/components/index.ts

@@ -1 +0,0 @@
-export * from './blockies/index.ts'

package/src/index.ts

@@ -1 +0,0 @@
-export * from './components/index.ts'