@xyo-network/react-chain-blockies 1.15.2 → 1.15.3

package/README.md

@@ -125,9 +125,7 @@ optional bgcolor: string;
 
 ### Inherited from
 
-```ts
-Partial.bgcolor
-```
+[`BlockiesOptions`](#BlockiesOptions).[`bgcolor`](BlockiesOptions.md#bgcolor)
 
 ***
 
@@ -139,9 +137,7 @@ optional color: string;
 
 ### Inherited from
 
-```ts
-Partial.color
-```
+[`BlockiesOptions`](#BlockiesOptions).[`color`](BlockiesOptions.md#color)
 
 ***
 
@@ -153,9 +149,7 @@ optional scale: number;
 
 ### Inherited from
 
-```ts
-Partial.scale
-```
+[`BlockiesOptions`](#BlockiesOptions).[`scale`](BlockiesOptions.md#scale)
 
 ***
 
@@ -167,9 +161,7 @@ optional seed: string;
 
 ### Inherited from
 
-```ts
-Partial.seed
-```
+[`BlockiesOptions`](#BlockiesOptions).[`seed`](BlockiesOptions.md#seed)
 
 ***
 
@@ -181,9 +173,7 @@ optional size: number;
 
 ### Inherited from
 
-```ts
-Partial.size
-```
+[`BlockiesOptions`](#BlockiesOptions).[`size`](BlockiesOptions.md#size)
 
 ***
 
@@ -195,9 +185,7 @@ optional spotcolor: string;
 
 ### Inherited from
 
-```ts
-Partial.spotcolor
-```
+[`BlockiesOptions`](#BlockiesOptions).[`spotcolor`](BlockiesOptions.md#spotcolor)
 
   ### <a id="BlockiesAvatarAddressProps"></a>BlockiesAvatarAddressProps
 

package/dist/browser/components/blockies/Avatar.d.ts

@@ -1,4 +1,4 @@
-import type { AvatarProps } from '@mui/material';
+import type { AvatarProps, BadgeProps } from '@mui/material';
 import React from 'react';
 import type { BlockiesOptions } from './blockies.ts';
 export interface BlockiesAvatarProps extends AvatarProps {
@@ -14,4 +14,10 @@ export interface BlockiesAvatarAddressProps extends AvatarProps {
     size?: number;
 }
 export declare const BlockiesAvatarAddress: React.FC<BlockiesAvatarAddressProps>;
+export interface BlockiesAvatarAddressApprovedProps extends BlockiesAvatarAddressProps {
+    /** Whether to show the approved badge */
+    approved?: boolean;
+    badgeVariant?: BadgeProps['variant'];
+}
+export declare const BlockiesAvatarAddressApproved: React.FC<BlockiesAvatarAddressApprovedProps>;
 //# sourceMappingURL=Avatar.d.ts.map

package/dist/browser/components/blockies/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/blockies/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAIhD,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAGpD,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;CAC3C;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAUxD,CAAA;AAED,MAAM,WAAW,0BAA2B,SAAQ,WAAW;IAC7D,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAsBtE,CAAA"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/blockies/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAM5D,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAGpD,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;CAC3C;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAUxD,CAAA;AAED,MAAM,WAAW,0BAA2B,SAAQ,WAAW;IAC7D,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAsBtE,CAAA;AAED,MAAM,WAAW,kCAAmC,SAAQ,0BAA0B;IACpF,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAA;CACrC;AAED,eAAO,MAAM,6BAA6B,EAAE,KAAK,CAAC,EAAE,CAAC,kCAAkC,CAyBtF,CAAA"}

package/dist/browser/index.mjs

@@ -112,7 +112,8 @@ var BlockiesAccount = /* @__PURE__ */ __name(({ ...options }) => {
 }, "BlockiesAccount");
 
 // src/components/blockies/Avatar.tsx
-import { Avatar, useTheme } from "@mui/material";
+import { Circle } from "@mui/icons-material";
+import { Avatar, Badge, useTheme } from "@mui/material";
 import { grey } from "@mui/material/colors";
 import { alphaCss } from "@xylabs/react-theme";
 import React2, { useMemo as useMemo2 } from "react";
@@ -152,10 +153,34 @@ var BlockiesAvatarAddress = /* @__PURE__ */ __name(({ address, borderSizeFactor
     ...props
   });
 }, "BlockiesAvatarAddress");
+var BlockiesAvatarAddressApproved = /* @__PURE__ */ __name(({ approved, badgeVariant, ...props }) => {
+  const sx = badgeVariant === "dot" ? {} : {
+    bgcolor: "white",
+    borderRadius: 12,
+    fontSize: "0.83333rem"
+  };
+  const dotPlacement = badgeVariant === "dot" ? 3 : 5;
+  return /* @__PURE__ */ React2.createElement(Badge, {
+    color: badgeVariant === "dot" ? "success" : "default",
+    variant: badgeVariant,
+    invisible: !approved,
+    badgeContent: approved ? /* @__PURE__ */ React2.createElement(Circle, {
+      color: "success",
+      sx
+    }) : "",
+    sx: {
+      "& .MuiBadge-badge": {
+        top: dotPlacement,
+        right: dotPlacement
+      }
+    }
+  }, /* @__PURE__ */ React2.createElement(BlockiesAvatarAddress, props));
+}, "BlockiesAvatarAddressApproved");
 export {
   BlockiesAccount,
   BlockiesAvatar,
   BlockiesAvatarAddress,
+  BlockiesAvatarAddressApproved,
   buildOpts,
   createIcon,
   renderIcon

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","/**\n * inspired by https://github.com/download13/blockies/blob/master/src/blockies.mjs\n */\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":";;;;AAAA,OAAOA,SAASC,eAAe;;;ACM/B,IAAMC,aAAoBC,MAAMC,KAAK;EAAEC,QAAQ;AAAE,CAAA;AAEjD,SAASC,WAAWC,MAAY;AAC9B,WAASC,IAAI,GAAGA,IAAIN,WAAWG,QAAQG,KAAK;AAC1CN,eAAWM,CAAAA,IAAK;EAClB;AACA,WAASA,IAAI,GAAGA,IAAID,KAAKF,QAAQG,KAAK;AACpCN,eAAWM,IAAI,CAAA,KAAON,WAAWM,IAAI,CAAA,KAAM,KAAKN,WAAWM,IAAI,CAAA,IAAMD,KAAKE,YAAYD,CAAAA;EACxF;AACF;AAPSF;AAST,SAASI,OAAAA;AAEP,QAAMC,IAAIT,WAAW,CAAA,IAAMA,WAAW,CAAA,KAAM;AAE5CA,aAAW,CAAA,IAAKA,WAAW,CAAA;AAC3BA,aAAW,CAAA,IAAKA,WAAW,CAAA;AAC3BA,aAAW,CAAA,IAAKA,WAAW,CAAA;AAC3BA,aAAW,CAAA,IAAMA,WAAW,CAAA,IAAMA,WAAW,CAAA,KAAM,KAAMS,IAAKA,KAAK;AAEnE,UAAQT,WAAW,CAAA,MAAO,MAAO,KAAK,OAAQ;AAChD;AAVSQ;AAYT,SAASE,cAAAA;AAEP,QAAMC,IAAIC,KAAKC,MAAML,KAAAA,IAAS,GAAA;AAE9B,QAAMM,IAAMN,KAAAA,IAAS,KAAM,KAAM;AAEjC,QAAMO,KAAMP,KAAAA,IAASA,KAAAA,IAASA,KAAAA,IAASA,KAAAA,KAAU,KAAM;AAEvD,SAAO,SAASG,IAAI,MAAMG,IAAI,MAAMC,IAAI;AAC1C;AATSL;AAWT,SAASM,gBAAgBC,MAAY;AACnC,QAAMC,QAAQD;AACd,QAAME,SAASF;AAEf,QAAMG,YAAYR,KAAKS,KAAKH,QAAQ,CAAA;AACpC,QAAMI,cAAcJ,QAAQE;AAE5B,QAAMG,OAAO,CAAA;AACb,WAASC,IAAI,GAAGA,IAAIL,QAAQK,KAAK;AAC/B,QAAIC,MAAM,CAAA;AACV,aAASC,IAAI,GAAGA,IAAIN,WAAWM,KAAK;AAGlCD,UAAIC,CAAAA,IAAKd,KAAKC,MAAML,KAAAA,IAAS,GAAA;IAC/B;AACA,UAAMmB,IAAIF,IAAIG,MAAM,GAAGN,WAAAA;AACvBK,MAAEE,QAAO;AACTJ,UAAM;SAAIA;SAAQE;;AAElB,eAAWG,WAAWL,KAAK;AACzBF,WAAKQ,KAAKD,OAAAA;IACZ;EACF;AAEA,SAAOP;AACT;AAzBSP;AAoCF,SAASgB,UAAUC,MAA8B;AACtD,QAAMC,UAAU,CAAC;AAEjBA,UAAQ7B,OAAO4B,KAAK5B,QAAQO,KAAKC,MAAOD,KAAKuB,OAAM,IAAKvB,KAAKwB,IAAI,IAAI,EAAA,CAAA,EAAMC,SAAS,EAAA;AAEpFjC,aAAW8B,QAAQ7B,IAAI;AAEvB6B,UAAQjB,OAAOgB,KAAKhB,QAAQ;AAC5BiB,UAAQI,QAAQL,KAAKK,SAAS;AAC9BJ,UAAQK,QAAQN,KAAKM,SAAS7B,YAAAA;AAC9BwB,UAAQM,UAAUP,KAAKO,WAAW9B,YAAAA;AAClCwB,UAAQO,YAAYR,KAAKQ,aAAa/B,YAAAA;AAEtC,SAAOwB;AACT;AAdgBF;AAgBT,SAASU,WAAWT,MAAgCU,QAAyB;AAClF,QAAMC,iBAAiBZ,UAAUC,QAAQ,CAAC,CAAA;AAC1C,QAAMY,YAAY7B,gBAAgB4B,eAAe3B,IAAI;AACrD,QAAMC,QAAQN,KAAKkC,KAAKD,UAAU1C,MAAM;AAExCwC,SAAOzB,QAAQyB,OAAOxB,SAASyB,eAAe3B,OAAO2B,eAAeN;AAEpE,QAAMS,KAAKJ,OAAOK,WAAW,IAAA;AAC7B,MAAID,OAAO,KAAM,OAAM,IAAIE,MAAM,0BAAA;AACjCF,KAAGG,YAAYN,eAAeJ;AAC9BO,KAAGI,SAAS,GAAG,GAAGR,OAAOzB,OAAOyB,OAAOxB,MAAM;AAC7C4B,KAAGG,YAAYN,eAAeL;AAE9B,aAAW,CAACjC,GAAG8C,UAAAA,KAAeP,UAAUQ,QAAO,GAAI;AAEjD,QAAID,aAAa,GAAG;AAClB,YAAM3B,MAAMb,KAAKC,MAAMP,IAAIY,KAAAA;AAC3B,YAAMoC,MAAMhD,IAAIY;AAGhB6B,SAAGG,YAAaE,cAAc,IAAKR,eAAeL,QAAQK,eAAeH;AAEzEM,SAAGI,SAASG,MAAMV,eAAeN,OAAOb,MAAMmB,eAAeN,OAAOM,eAAeN,OAAOM,eAAeN,KAAK;IAChH;EACF;AAEA,SAAOK;AACT;AA3BgBD;AA6BT,SAASa,WAAWtB,MAA8B;AACvD,MAAIU,SAASa,SAASC,cAAc,QAAA;AAEpCf,aAAWT,MAAMU,MAAAA;AAEjB,SAAOA;AACT;AANgBY;;;ADlHT,IAAMG,kBAAkD,wBAAC,EAAE,GAAGC,QAAAA,MAAS;AAC5E,QAAMC,MAAMC,QAAQ,MAAA;AAClB,QAAIF,QAAQG,SAASC,QAAW;AAC9B,aAAOC,WAAWL,OAAAA,EAASM,UAAS;IACtC;EACF,GAAG;IAACN;GAAQ;AAEZ,SAAO,sBAAA,cAACC,OAAAA;IAAIM,KAAKN;;AACnB,GAR+D;;;AEN/D,SAASO,QAAQC,gBAAgB;AACjC,SAASC,YAAY;AACrB,SAASC,gBAAgB;AACzB,OAAOC,UAASC,WAAAA,gBAAe;AASxB,IAAMC,iBAAgD,wBAAC,EAAEC,iBAAiB,GAAGC,MAAAA,MAAO;AACzF,QAAMC,MAAMC,SAAQ,MAAA;AAClB,QAAIH,iBAAiBI,SAASC,QAAW;AACvC,aAAOC,WAAWN,eAAAA,EAAiBO,UAAS;IAC9C;EACF,GAAG;IAACP;GAAgB;AAEpB,SACE,gBAAAQ,OAAA,cAACC,QAAAA;IAAOC,WAAU;IAAOC,KAAKT;IAAM,GAAGD;;AAE3C,GAV6D;AAqBtD,IAAMW,wBAA8D,wBAAC,EAC1EC,SAASC,mBAAmB,QAAQC,OAAO,IAAIC,IAAI,GAAGf,MAAAA,MACvD;AACC,QAAMgB,QAAQC,SAAAA;AACd,QAAMC,UAAUhB,SAAQ,MAAA;AACtB,QAAIU,YAAYR,QAAW;AACzB,aAAO;QAAED,MAAMS;MAAQ;IACzB;EACF,GAAG;IAACA;GAAQ;AAEZ,SACE,gBAAAL,OAAA,cAACT,gBAAAA;IACCC,iBAAiBmB;IACjBH,IAAI;MACFI,OAAOL;MACPM,QAAQN;MACRO,QAAQ,GAAGC,KAAKC,KAAKT,OAAOD,gBAAAA,CAAAA,YAA6BW,SAASR,MAAMS,MAAMC,QAAQC,KAAKC,WAAWC,KAAK,GAAA,GAAM,GAAA,CAAA;MACjH,GAAGd;IACL;IACC,GAAGf;;AAGV,GAtB2E;","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","/**\n * inspired by https://github.com/download13/blockies/blob/master/src/blockies.mjs\n */\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 { Circle } from '@mui/icons-material'\nimport type { AvatarProps, BadgeProps } from '@mui/material'\nimport {\n  Avatar, Badge, useTheme,\n} 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\nexport interface BlockiesAvatarAddressApprovedProps extends BlockiesAvatarAddressProps {\n  /** Whether to show the approved badge */\n  approved?: boolean\n  badgeVariant?: BadgeProps['variant']\n}\n\nexport const BlockiesAvatarAddressApproved: React.FC<BlockiesAvatarAddressApprovedProps> = ({\n  approved, badgeVariant, ...props\n}) => {\n  const sx = badgeVariant === 'dot'\n    ? {}\n    : {\n        bgcolor: 'white', borderRadius: 12, fontSize: '0.83333rem',\n      }\n  const dotPlacement = badgeVariant === 'dot' ? 3 : 5\n  return (\n    <Badge\n      color={badgeVariant === 'dot' ? 'success' : 'default'}\n      variant={badgeVariant}\n      invisible={!approved}\n      badgeContent={approved ? <Circle color=\"success\" sx={sx} /> : ''}\n      sx={{\n        '& .MuiBadge-badge': {\n          top: dotPlacement,\n          right: dotPlacement,\n        },\n      }}\n    >\n      <BlockiesAvatarAddress {...props} />\n    </Badge>\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","Circle","Avatar","Badge","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","BlockiesAvatarAddressApproved","approved","badgeVariant","bgcolor","borderRadius","fontSize","dotPlacement","Badge","color","variant","invisible","badgeContent","Circle","top","right"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/react-chain-blockies",
-  "version": "1.15.2",
+  "version": "1.15.3",
   "description": "XYO Layer One React SDK Blockies",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -41,22 +41,22 @@
     "src"
   ],
   "dependencies": {
-    "@xylabs/react-theme": "~7.1.1"
+    "@xylabs/react-theme": "~7.1.3"
   },
   "devDependencies": {
     "@emotion/react": "~11.14.0",
     "@emotion/styled": "~11.14.1",
-    "@mui/material": "~7.3.2",
-    "@storybook/react-vite": "~9.1.8",
-    "@types/react": "~19.1.15",
-    "@xylabs/ts-scripts-yarn3": "~7.1.7",
-    "@xylabs/tsconfig": "~7.1.7",
-    "@xylabs/tsconfig-dom": "~7.1.7",
-    "@xylabs/tsconfig-react": "~7.1.7",
-    "eslint": "^9.36.0",
-    "react": "~19.1.1",
-    "react-dom": "~19.1.1",
-    "typescript": "~5.9.2"
+    "@mui/material": "~7.3.4",
+    "@storybook/react-vite": "~9.1.10",
+    "@types/react": "~19.2.2",
+    "@xylabs/ts-scripts-yarn3": "~7.1.8",
+    "@xylabs/tsconfig": "~7.1.8",
+    "@xylabs/tsconfig-dom": "~7.1.8",
+    "@xylabs/tsconfig-react": "~7.1.8",
+    "eslint": "^9.37.0",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "typescript": "~5.9.3"
   },
   "peerDependencies": {
     "@emotion/react": "~11",

package/src/components/blockies/Avatar.tsx

@@ -1,5 +1,8 @@
-import type { AvatarProps } from '@mui/material'
-import { Avatar, useTheme } from '@mui/material'
+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'
@@ -55,3 +58,36 @@ export const BlockiesAvatarAddress: React.FC<BlockiesAvatarAddressProps> = ({
     />
   )
 }
+
+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>
+  )
+}