@pezkuwi/react-identicon 3.16.6

package/build-tsc-esm/Identicon.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { ICON_DEFAULT_HOST, settings } from '@pezkuwi/ui-settings';
+import { isHex, isU8a, u8aToHex } from '@pezkuwi/util';
+import { decodeAddress, encodeAddress, ethereumEncode } from '@pezkuwi/util-crypto';
+import { Beachball, Empty, Ethereum, Jdenticon, Polkadot } from './icons/index.js';
+import { styled } from './styled.js';
+const Fallback = Beachball;
+const DEFAULT_SIZE = 64;
+const Components = {
+    beachball: Beachball,
+    empty: Empty,
+    ethereum: Ethereum,
+    jdenticon: Jdenticon,
+    polkadot: Polkadot,
+    substrate: Jdenticon
+};
+class BaseIcon extends React.PureComponent {
+    state = {
+        address: '',
+        publicKey: '0x'
+    };
+    static prefix = undefined;
+    static setDefaultPrefix(prefix) {
+        BaseIcon.prefix = prefix;
+    }
+    static getDerivedStateFromProps({ prefix = BaseIcon.prefix, theme, value }, prevState) {
+        if (theme === 'ethereum') {
+            const address = isU8a(value)
+                ? ethereumEncode(value)
+                : value || '';
+            return { address, publicKey: '' };
+        }
+        try {
+            const address = isU8a(value) || isHex(value)
+                ? encodeAddress(value, prefix)
+                : (value || '');
+            const publicKey = u8aToHex(decodeAddress(address, false, prefix));
+            return address === prevState.address
+                ? null
+                : {
+                    address,
+                    publicKey
+                };
+        }
+        catch {
+            return {
+                address: '',
+                publicKey: '0x'
+            };
+        }
+    }
+    render() {
+        const { address } = this.state;
+        const wrapped = this.getWrapped(this.state, this.props);
+        return !address
+            ? wrapped
+            : (_jsx(CopyToClipboard, { onCopy: this.onCopy, text: address, children: wrapped }));
+    }
+    getWrapped({ address, publicKey }, { Custom }) {
+        const { className = '', isAlternative, isHighlight, size = DEFAULT_SIZE, style = {}, theme = settings.icon } = this.props;
+        const Component = !address
+            ? Empty
+            : Custom || Components[theme === 'default' ? ICON_DEFAULT_HOST : theme] || Fallback;
+        return (_jsx(StyledDiv, { className: `ui--IdentityIcon  ${className}`, style: style, children: _jsx(Component, { address: address, className: isHighlight ? 'highlight' : '', isAlternative: isAlternative, publicKey: publicKey, size: size }) }, address));
+    }
+    onCopy = () => {
+        const { onCopy } = this.props;
+        const { address } = this.state;
+        if (address && onCopy) {
+            onCopy(address);
+        }
+    };
+}
+function Icon(props) {
+    return _jsx(BaseIcon, { ...props });
+}
+const StyledDiv = styled.div `
+  cursor: copy;
+  display: inline-block;
+  line-height: 0;
+
+  > .container {
+    position: relative;
+
+    > div,
+    > svg {
+      position: relative;
+    }
+
+    &.highlight:before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 50%;
+      box-shadow: 0 0 5px 2px #aaa;
+      content: '';
+    }
+  }
+`;
+export const Identicon = React.memo(Icon);

package/build-tsc-esm/bundle.js

@@ -0,0 +1,3 @@
+export * from './icons/index.js';
+export { Identicon } from './Identicon.js';
+export { packageInfo } from './packageInfo.js';

package/build-tsc-esm/icons/Beachball.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { beachballIcon } from '@pezkuwi/ui-shared';
+function Identicon({ address, className = '', size, style = {} }) {
+    const updateElem = useCallback((node) => {
+        if (node) {
+            node.innerHTML = '';
+            node.appendChild(beachballIcon(address, { isAlternative: false, size }));
+        }
+    }, [address, size]);
+    return (_jsx("div", { className: className, ref: updateElem, style: style }));
+}
+export const Beachball = React.memo(Identicon);

package/build-tsc-esm/icons/Empty.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+function Identicon({ className = '', size, style = {} }) {
+    return (_jsx("svg", { className: className, height: size, style: style, viewBox: '0 0 64 64', width: size }));
+}
+export const Empty = React.memo(Identicon);

package/build-tsc-esm/icons/Ethereum.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import makeBlockie from 'ethereum-blockies-base64';
+import React, { useMemo } from 'react';
+import { styled } from '../styled.js';
+function Identicon({ address, className = '', size, style = {} }) {
+    const imgSrc = useMemo(() => makeBlockie(address), [address]);
+    return (_jsx(StyledImg, { className: className, size: size, src: imgSrc, style: style }));
+}
+const StyledImg = styled.img(({ size }) => `
+  display: block;
+  height: ${size}px;
+  width: ${size}px;
+`);
+export const Ethereum = React.memo(Identicon);

package/build-tsc-esm/icons/Jdenticon.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as jdenticon from 'jdenticon';
+import React, { useMemo } from 'react';
+function Identicon({ className = '', publicKey, size, style = {} }) {
+    const html = useMemo(() => ({ __html: jdenticon.toSvg(publicKey.substring(2), size) }), [publicKey, size]);
+    return (_jsx("div", { className: className, dangerouslySetInnerHTML: html, style: style }));
+}
+export const Jdenticon = React.memo(Identicon);

package/build-tsc-esm/icons/Polkadot.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { polkadotIcon } from '@pezkuwi/ui-shared';
+function renderCircle({ cx, cy, fill, r }, key) {
+    return (_jsx("circle", { cx: cx, cy: cy, fill: fill, r: r }, key));
+}
+function Identicon({ address, className = '', isAlternative = false, size, style = {} }) {
+    const circles = useMemo(() => polkadotIcon(address, { isAlternative }), [address, isAlternative]);
+    return (_jsx("svg", { className: className, height: size, id: address, name: address, style: style, viewBox: '0 0 64 64', width: size, children: circles.map(renderCircle) }));
+}
+export const Polkadot = React.memo(Identicon);

package/build-tsc-esm/icons/index.js

@@ -0,0 +1,5 @@
+export { Beachball } from './Beachball.js';
+export { Empty } from './Empty.js';
+export { Ethereum } from './Ethereum.js';
+export { Jdenticon } from './Jdenticon.js';
+export { Polkadot } from './Polkadot.js';

package/build-tsc-esm/index.js

@@ -0,0 +1,4 @@
+import './packageDetect.js';
+import { Identicon } from './bundle.js';
+export * from './bundle.js';
+export default Identicon;

package/build-tsc-esm/packageDetect.js

@@ -0,0 +1,5 @@
+import { packageInfo as settingsInfo } from '@pezkuwi/ui-settings/packageInfo';
+import { packageInfo as sharedInfo } from '@pezkuwi/ui-shared/packageInfo';
+import { detectPackage } from '@pezkuwi/util';
+import { packageInfo } from './packageInfo.js';
+detectPackage(packageInfo, null, [settingsInfo, sharedInfo]);

package/build-tsc-esm/packageInfo.js

@@ -0,0 +1 @@
+export const packageInfo = { name: '@pezkuwi/react-identicon', path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto', type: 'esm', version: '3.16.6' };

package/build-tsc-esm/styled.js

@@ -0,0 +1 @@
+export { styled } from 'styled-components';

package/build-tsc-esm/types.js

@@ -0,0 +1 @@
+export {};

package/index.html

@@ -0,0 +1,17 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
+    <style>
+      #demo {
+        padding: 0.5em;
+      }
+      .padded {
+        margin: 0.5em !important;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="demo"></div>
+    <script src="./build/Demo.js"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,48 @@
+{
+  "author": "Jaco Greeff <jacogr@gmail.com>",
+  "bugs": "https://github.com/pezkuwichain/ui/issues",
+  "description": "Renders an SVG picture representing an address",
+  "engines": {
+    "node": ">=18"
+  },
+  "homepage": "https://github.com/pezkuwichain/ui/tree/master/packages/react-identicon#readme",
+  "license": "Apache-2.0",
+  "name": "@pezkuwi/react-identicon",
+  "repository": {
+    "directory": "packages/react-identicon",
+    "type": "git",
+    "url": "https://github.com/pezkuwichain/ui.git"
+  },
+  "sideEffects": [
+    "./packageDetect.js",
+    "./packageDetect.cjs"
+  ],
+  "type": "module",
+  "version": "3.16.6",
+  "main": "index.js",
+  "dependencies": {
+    "@pezkuwi/keyring": "^14.0.5",
+    "@pezkuwi/ui-settings": "3.16.6",
+    "@pezkuwi/ui-shared": "3.16.6",
+    "@pezkuwi/util": "^14.0.5",
+    "@pezkuwi/util-crypto": "^14.0.5",
+    "ethereum-blockies-base64": "^1.0.2",
+    "jdenticon": "3.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
+    "styled-components": "^6.1.1",
+    "tslib": "^2.8.1"
+  },
+  "devDependencies": {
+    "@types/react-copy-to-clipboard": "^5.0.7",
+    "@types/react-dom": "^18.2.18",
+    "xmlserializer": "^0.6.1"
+  },
+  "peerDependencies": {
+    "@pezkuwi/keyring": "*",
+    "@pezkuwi/util": "*",
+    "@pezkuwi/util-crypto": "*",
+    "react": "*",
+    "react-dom": "*",
+    "react-is": "*"
+  }
+}

package/src/Identicon.tsx

@@ -0,0 +1,154 @@
+// Copyright 2017-2025 @pezkuwi/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Prefix } from '@pezkuwi/util-crypto/address/types';
+import type { IdentityProps as Props, Props as ComponentProps } from './types.js';
+
+import React from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+
+import { ICON_DEFAULT_HOST, settings } from '@pezkuwi/ui-settings';
+import { isHex, isU8a, u8aToHex } from '@pezkuwi/util';
+import { decodeAddress, encodeAddress, ethereumEncode } from '@pezkuwi/util-crypto';
+
+import { Beachball, Empty, Ethereum, Jdenticon, Polkadot } from './icons/index.js';
+import { styled } from './styled.js';
+
+const Fallback = Beachball;
+
+interface State {
+  address: string;
+  publicKey: string;
+}
+
+const DEFAULT_SIZE = 64;
+const Components: Record<string, React.ComponentType<ComponentProps>> = {
+  beachball: Beachball,
+  empty: Empty,
+  ethereum: Ethereum,
+  jdenticon: Jdenticon,
+  polkadot: Polkadot,
+  substrate: Jdenticon
+};
+
+class BaseIcon extends React.PureComponent<Props, State> {
+  public override state: State = {
+    address: '',
+    publicKey: '0x'
+  };
+
+  private static prefix?: Prefix = undefined;
+
+  public static setDefaultPrefix (prefix: Prefix): void {
+    BaseIcon.prefix = prefix;
+  }
+
+  public static getDerivedStateFromProps ({ prefix = BaseIcon.prefix, theme, value }: Props, prevState: State): State | null {
+    if (theme === 'ethereum') {
+      const address = isU8a(value)
+        ? ethereumEncode(value)
+        : value || '';
+
+      return { address, publicKey: '' };
+    }
+
+    try {
+      const address = isU8a(value) || isHex(value)
+        ? encodeAddress(value, prefix)
+        : (value || '');
+      const publicKey = u8aToHex(decodeAddress(address, false, prefix));
+
+      return address === prevState.address
+        ? null
+        : {
+          address,
+          publicKey
+        };
+    } catch {
+      return {
+        address: '',
+        publicKey: '0x'
+      };
+    }
+  }
+
+  public override render (): React.ReactNode {
+    const { address } = this.state;
+    const wrapped = this.getWrapped(this.state, this.props);
+
+    return !address
+      ? wrapped
+      : (
+        <CopyToClipboard
+          onCopy={this.onCopy}
+          text={address}
+        >
+          {wrapped}
+        </CopyToClipboard>
+      );
+  }
+
+  private getWrapped ({ address, publicKey }: State, { Custom }: Props): React.ReactNode {
+    const { className = '', isAlternative, isHighlight, size = DEFAULT_SIZE, style = {}, theme = settings.icon } = this.props;
+    const Component = !address
+      ? Empty
+      : Custom || Components[theme === 'default' ? ICON_DEFAULT_HOST : theme] || Fallback;
+
+    return (
+      <StyledDiv
+        className={`ui--IdentityIcon  ${className}`}
+        key={address}
+        style={style}
+      >
+        <Component
+          address={address}
+          className={isHighlight ? 'highlight' : ''}
+          isAlternative={isAlternative}
+          publicKey={publicKey}
+          size={size}
+        />
+      </StyledDiv>
+    );
+  }
+
+  private onCopy = (): void => {
+    const { onCopy } = this.props;
+    const { address } = this.state;
+
+    if (address && onCopy) {
+      onCopy(address);
+    }
+  };
+}
+
+function Icon (props: Props): React.ReactElement<Props> {
+  return <BaseIcon {...props} />;
+}
+
+const StyledDiv = styled.div`
+  cursor: copy;
+  display: inline-block;
+  line-height: 0;
+
+  > .container {
+    position: relative;
+
+    > div,
+    > svg {
+      position: relative;
+    }
+
+    &.highlight:before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 50%;
+      box-shadow: 0 0 5px 2px #aaa;
+      content: '';
+    }
+  }
+`;
+
+export const Identicon = React.memo(Icon);

package/src/bundle.ts

@@ -0,0 +1,6 @@
+// Copyright 2017-2025 @pezkuwi/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './icons/index.js';
+export { Identicon } from './Identicon.js';
+export { packageInfo } from './packageInfo.js';

package/src/icons/Beachball.tsx

@@ -0,0 +1,32 @@
+// Copyright 2017-2025 @pezkuwi/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Props } from '../types.js';
+
+import React, { useCallback } from 'react';
+
+import { beachballIcon } from '@pezkuwi/ui-shared';
+
+function Identicon ({ address, className = '', size, style = {} }: Props): React.ReactElement<Props> {
+  const updateElem = useCallback(
+    (node: HTMLDivElement): void => {
+      if (node) {
+        node.innerHTML = '';
+        node.appendChild(
+          beachballIcon(address, { isAlternative: false, size })
+        );
+      }
+    },
+    [address, size]
+  );
+
+  return (
+    <div
+      className={className}
+      ref={updateElem}
+      style={style}
+    />
+  );
+}
+
+export const Beachball = React.memo(Identicon);

package/src/icons/Empty.tsx

@@ -0,0 +1,20 @@
+// Copyright 2017-2025 @pezkuwi/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Props } from '../types.js';
+
+import React from 'react';
+
+function Identicon ({ className = '', size, style = {} }: Props): React.ReactElement<Props> {
+  return (
+    <svg
+      className={className}
+      height={size}
+      style={style}
+      viewBox='0 0 64 64'
+      width={size}
+    />
+  );
+}
+
+export const Empty = React.memo(Identicon);

package/src/icons/Ethereum.tsx

@@ -0,0 +1,37 @@
+// Copyright 2017-2025 @pezkuwi/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Props } from '../types.js';
+
+import makeBlockie from 'ethereum-blockies-base64';
+import React, { useMemo } from 'react';
+
+import { styled } from '../styled.js';
+
+interface ImgProps {
+  size: number;
+}
+
+function Identicon ({ address, className = '', size, style = {} }: Props): React.ReactElement<Props> {
+  const imgSrc = useMemo(
+    () => makeBlockie(address),
+    [address]
+  );
+
+  return (
+    <StyledImg
+      className={className}
+      size={size}
+      src={imgSrc}
+      style={style}
+    />
+  );
+}
+
+const StyledImg = styled.img<ImgProps>(({ size }) => `
+  display: block;
+  height: ${size}px;
+  width: ${size}px;
+`);
+
+export const Ethereum = React.memo(Identicon);

package/src/icons/Jdenticon.tsx

@@ -0,0 +1,24 @@
+// Copyright 2017-2025 @pezkuwi/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Props } from '../types.js';
+
+import * as jdenticon from 'jdenticon';
+import React, { useMemo } from 'react';
+
+function Identicon ({ className = '', publicKey, size, style = {} }: Props): React.ReactElement<Props> {
+  const html = useMemo(
+    () => ({ __html: jdenticon.toSvg(publicKey.substring(2), size) }),
+    [publicKey, size]
+  );
+
+  return (
+    <div
+      className={className}
+      dangerouslySetInnerHTML={html}
+      style={style}
+    />
+  );
+}
+
+export const Jdenticon = React.memo(Identicon);

package/src/icons/Polkadot.tsx

@@ -0,0 +1,59 @@
+// Copyright 2018-2025 @pezkuwi/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Copyright 2018 Paritytech via paritytech/oo7/polkadot-identicon
+
+// This has been converted from the original version that can be found at
+//
+// https://github.com/paritytech/oo7/blob/251ba2b7c45503b68eab4320c270b5afa9bccb60/packages/polkadot-identicon/src/index.jsx
+//
+// Here we have done the following to convert the component -
+//   - Converted the code to TypeScript
+//   - Removed the oo7 dependencies (since not initialised properly, it makes calls to wrong endpoints)
+//   - Remove encoding functionality, these are catered for in the base
+//   - Remove copy functionality (this is catered from in the base components)
+//   - Split calculations into relevant functions
+//   - Move constants to file-level
+//   - Overall it is now just a static component, expecting an address as an input value
+
+import type { Circle } from '@pezkuwi/ui-shared/icons/types';
+import type { Props } from '../types.js';
+
+import React, { useMemo } from 'react';
+
+import { polkadotIcon } from '@pezkuwi/ui-shared';
+
+function renderCircle ({ cx, cy, fill, r }: Circle, key: number): React.ReactNode {
+  return (
+    <circle
+      cx={cx}
+      cy={cy}
+      fill={fill}
+      key={key}
+      r={r}
+    />
+  );
+}
+
+function Identicon ({ address, className = '', isAlternative = false, size, style = {} }: Props): React.ReactElement<Props> {
+  const circles = useMemo(
+    () => polkadotIcon(address, { isAlternative }),
+    [address, isAlternative]
+  );
+
+  return (
+    <svg
+      className={className}
+      height={size}
+      id={address}
+      name={address}
+      style={style}
+      viewBox='0 0 64 64'
+      width={size}
+    >
+      {circles.map(renderCircle)}
+    </svg>
+  );
+}
+
+export const Polkadot = React.memo(Identicon);

package/src/icons/index.ts

@@ -0,0 +1,8 @@
+// Copyright 2017-2025 @pezkuwi/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export { Beachball } from './Beachball.js';
+export { Empty } from './Empty.js';
+export { Ethereum } from './Ethereum.js';
+export { Jdenticon } from './Jdenticon.js';
+export { Polkadot } from './Polkadot.js';

package/src/index.ts

@@ -0,0 +1,10 @@
+// Copyright 2017-2025 @pezkuwi/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import './packageDetect.js';
+
+import { Identicon } from './bundle.js';
+
+export * from './bundle.js';
+
+export default Identicon;

package/src/packageDetect.ts

@@ -0,0 +1,13 @@
+// Copyright 2017-2026 @pezkuwi/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Do not edit, auto-generated by @pezkuwi/dev
+// (packageInfo imports will be kept as-is, user-editable)
+
+import { packageInfo as settingsInfo } from '@pezkuwi/ui-settings/packageInfo';
+import { packageInfo as sharedInfo } from '@pezkuwi/ui-shared/packageInfo';
+import { detectPackage } from '@pezkuwi/util';
+
+import { packageInfo } from './packageInfo.js';
+
+detectPackage(packageInfo, null, [settingsInfo, sharedInfo]);

package/src/packageInfo.ts

@@ -0,0 +1,6 @@
+// Copyright 2017-2026 @pezkuwi/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Do not edit, auto-generated by @pezkuwi/dev
+
+export const packageInfo = { name: '@pezkuwi/react-identicon', path: 'auto', type: 'auto', version: '3.16.6' };

package/src/styled.ts

@@ -0,0 +1,4 @@
+// Copyright 2017-2025 @pezkuwi/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export { styled } from 'styled-components';