@pezkuwi/react-identicon 3.16.6

package/build/bundle.d.ts

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

package/build/bundle.js

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

package/build/cjs/Identicon.d.ts

@@ -0,0 +1,5 @@
+import type { IdentityProps as Props } from './types.js';
+import React from 'react';
+declare function Icon(props: Props): React.ReactElement<Props>;
+export declare const Identicon: React.MemoExoticComponent<typeof Icon>;
+export {};

package/build/cjs/Identicon.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Identicon = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_copy_to_clipboard_1 = tslib_1.__importDefault(require("react-copy-to-clipboard"));
+const ui_settings_1 = require("@pezkuwi/ui-settings");
+const util_1 = require("@pezkuwi/util");
+const util_crypto_1 = require("@pezkuwi/util-crypto");
+const index_js_1 = require("./icons/index.js");
+const styled_js_1 = require("./styled.js");
+const Fallback = index_js_1.Beachball;
+const DEFAULT_SIZE = 64;
+const Components = {
+    beachball: index_js_1.Beachball,
+    empty: index_js_1.Empty,
+    ethereum: index_js_1.Ethereum,
+    jdenticon: index_js_1.Jdenticon,
+    polkadot: index_js_1.Polkadot,
+    substrate: index_js_1.Jdenticon
+};
+class BaseIcon extends react_1.default.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 = (0, util_1.isU8a)(value)
+                ? (0, util_crypto_1.ethereumEncode)(value)
+                : value || '';
+            return { address, publicKey: '' };
+        }
+        try {
+            const address = (0, util_1.isU8a)(value) || (0, util_1.isHex)(value)
+                ? (0, util_crypto_1.encodeAddress)(value, prefix)
+                : (value || '');
+            const publicKey = (0, util_1.u8aToHex)((0, util_crypto_1.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
+            : ((0, jsx_runtime_1.jsx)(react_copy_to_clipboard_1.default, { onCopy: this.onCopy, text: address, children: wrapped }));
+    }
+    getWrapped({ address, publicKey }, { Custom }) {
+        const { className = '', isAlternative, isHighlight, size = DEFAULT_SIZE, style = {}, theme = ui_settings_1.settings.icon } = this.props;
+        const Component = !address
+            ? index_js_1.Empty
+            : Custom || Components[theme === 'default' ? ui_settings_1.ICON_DEFAULT_HOST : theme] || Fallback;
+        return ((0, jsx_runtime_1.jsx)(StyledDiv, { className: `ui--IdentityIcon  ${className}`, style: style, children: (0, jsx_runtime_1.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 (0, jsx_runtime_1.jsx)(BaseIcon, { ...props });
+}
+const StyledDiv = styled_js_1.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: '';
+    }
+  }
+`;
+exports.Identicon = react_1.default.memo(Icon);

package/build/cjs/bundle.d.ts

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

package/build/cjs/bundle.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.packageInfo = exports.Identicon = void 0;
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./icons/index.js"), exports);
+var Identicon_js_1 = require("./Identicon.js");
+Object.defineProperty(exports, "Identicon", { enumerable: true, get: function () { return Identicon_js_1.Identicon; } });
+var packageInfo_js_1 = require("./packageInfo.js");
+Object.defineProperty(exports, "packageInfo", { enumerable: true, get: function () { return packageInfo_js_1.packageInfo; } });

package/build/cjs/icons/Beachball.d.ts

@@ -0,0 +1,5 @@
+import type { Props } from '../types.js';
+import React from 'react';
+declare function Identicon({ address, className, size, style }: Props): React.ReactElement<Props>;
+export declare const Beachball: React.MemoExoticComponent<typeof Identicon>;
+export {};

package/build/cjs/icons/Beachball.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Beachball = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const ui_shared_1 = require("@pezkuwi/ui-shared");
+function Identicon({ address, className = '', size, style = {} }) {
+    const updateElem = (0, react_1.useCallback)((node) => {
+        if (node) {
+            node.innerHTML = '';
+            node.appendChild((0, ui_shared_1.beachballIcon)(address, { isAlternative: false, size }));
+        }
+    }, [address, size]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, ref: updateElem, style: style }));
+}
+exports.Beachball = react_1.default.memo(Identicon);

package/build/cjs/icons/Empty.d.ts

@@ -0,0 +1,5 @@
+import type { Props } from '../types.js';
+import React from 'react';
+declare function Identicon({ className, size, style }: Props): React.ReactElement<Props>;
+export declare const Empty: React.MemoExoticComponent<typeof Identicon>;
+export {};

package/build/cjs/icons/Empty.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Empty = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+function Identicon({ className = '', size, style = {} }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { className: className, height: size, style: style, viewBox: '0 0 64 64', width: size }));
+}
+exports.Empty = react_1.default.memo(Identicon);

package/build/cjs/icons/Ethereum.d.ts

@@ -0,0 +1,5 @@
+import type { Props } from '../types.js';
+import React from 'react';
+declare function Identicon({ address, className, size, style }: Props): React.ReactElement<Props>;
+export declare const Ethereum: React.MemoExoticComponent<typeof Identicon>;
+export {};

package/build/cjs/icons/Ethereum.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ethereum = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ethereum_blockies_base64_1 = tslib_1.__importDefault(require("ethereum-blockies-base64"));
+const react_1 = tslib_1.__importStar(require("react"));
+const styled_js_1 = require("../styled.js");
+function Identicon({ address, className = '', size, style = {} }) {
+    const imgSrc = (0, react_1.useMemo)(() => (0, ethereum_blockies_base64_1.default)(address), [address]);
+    return ((0, jsx_runtime_1.jsx)(StyledImg, { className: className, size: size, src: imgSrc, style: style }));
+}
+const StyledImg = styled_js_1.styled.img(({ size }) => `
+  display: block;
+  height: ${size}px;
+  width: ${size}px;
+`);
+exports.Ethereum = react_1.default.memo(Identicon);

package/build/cjs/icons/Jdenticon.d.ts

@@ -0,0 +1,5 @@
+import type { Props } from '../types.js';
+import React from 'react';
+declare function Identicon({ className, publicKey, size, style }: Props): React.ReactElement<Props>;
+export declare const Jdenticon: React.MemoExoticComponent<typeof Identicon>;
+export {};

package/build/cjs/icons/Jdenticon.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Jdenticon = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const jdenticon = tslib_1.__importStar(require("jdenticon"));
+const react_1 = tslib_1.__importStar(require("react"));
+function Identicon({ className = '', publicKey, size, style = {} }) {
+    const html = (0, react_1.useMemo)(() => ({ __html: jdenticon.toSvg(publicKey.substring(2), size) }), [publicKey, size]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, dangerouslySetInnerHTML: html, style: style }));
+}
+exports.Jdenticon = react_1.default.memo(Identicon);

package/build/cjs/icons/Polkadot.d.ts

@@ -0,0 +1,5 @@
+import type { Props } from '../types.js';
+import React from 'react';
+declare function Identicon({ address, className, isAlternative, size, style }: Props): React.ReactElement<Props>;
+export declare const Polkadot: React.MemoExoticComponent<typeof Identicon>;
+export {};

package/build/cjs/icons/Polkadot.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Polkadot = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const ui_shared_1 = require("@pezkuwi/ui-shared");
+function renderCircle({ cx, cy, fill, r }, key) {
+    return ((0, jsx_runtime_1.jsx)("circle", { cx: cx, cy: cy, fill: fill, r: r }, key));
+}
+function Identicon({ address, className = '', isAlternative = false, size, style = {} }) {
+    const circles = (0, react_1.useMemo)(() => (0, ui_shared_1.polkadotIcon)(address, { isAlternative }), [address, isAlternative]);
+    return ((0, jsx_runtime_1.jsx)("svg", { className: className, height: size, id: address, name: address, style: style, viewBox: '0 0 64 64', width: size, children: circles.map(renderCircle) }));
+}
+exports.Polkadot = react_1.default.memo(Identicon);

package/build/cjs/icons/index.d.ts

@@ -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/cjs/icons/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Polkadot = exports.Jdenticon = exports.Ethereum = exports.Empty = exports.Beachball = void 0;
+var Beachball_js_1 = require("./Beachball.js");
+Object.defineProperty(exports, "Beachball", { enumerable: true, get: function () { return Beachball_js_1.Beachball; } });
+var Empty_js_1 = require("./Empty.js");
+Object.defineProperty(exports, "Empty", { enumerable: true, get: function () { return Empty_js_1.Empty; } });
+var Ethereum_js_1 = require("./Ethereum.js");
+Object.defineProperty(exports, "Ethereum", { enumerable: true, get: function () { return Ethereum_js_1.Ethereum; } });
+var Jdenticon_js_1 = require("./Jdenticon.js");
+Object.defineProperty(exports, "Jdenticon", { enumerable: true, get: function () { return Jdenticon_js_1.Jdenticon; } });
+var Polkadot_js_1 = require("./Polkadot.js");
+Object.defineProperty(exports, "Polkadot", { enumerable: true, get: function () { return Polkadot_js_1.Polkadot; } });

package/build/cjs/index.d.ts

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

package/build/cjs/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+require("./packageDetect.js");
+const bundle_js_1 = require("./bundle.js");
+tslib_1.__exportStar(require("./bundle.js"), exports);
+exports.default = bundle_js_1.Identicon;

package/build/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/build/cjs/packageDetect.d.ts

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

package/build/cjs/packageDetect.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const packageInfo_1 = require("@pezkuwi/ui-settings/cjs/packageInfo");
+const packageInfo_2 = require("@pezkuwi/ui-shared/cjs/packageInfo");
+const util_1 = require("@pezkuwi/util");
+const packageInfo_js_1 = require("./packageInfo.js");
+(0, util_1.detectPackage)(packageInfo_js_1.packageInfo, null, [packageInfo_1.packageInfo, packageInfo_2.packageInfo]);

package/build/cjs/packageInfo.d.ts

@@ -0,0 +1,6 @@
+export declare const packageInfo: {
+    name: string;
+    path: string;
+    type: string;
+    version: string;
+};

package/build/cjs/packageInfo.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.packageInfo = void 0;
+exports.packageInfo = { name: '@pezkuwi/react-identicon', path: typeof __dirname === 'string' ? __dirname : 'auto', type: 'cjs', version: '3.16.6' };

package/build/cjs/styled.d.ts

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

package/build/cjs/styled.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styled = void 0;
+var styled_components_1 = require("styled-components");
+Object.defineProperty(exports, "styled", { enumerable: true, get: function () { return styled_components_1.styled; } });

package/build/cjs/types.d.ts

@@ -0,0 +1,23 @@
+import type React from 'react';
+import type { Prefix } from '@pezkuwi/util-crypto/address/types';
+export interface BaseProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface Props extends BaseProps {
+    address: string;
+    isAlternative?: boolean | undefined;
+    publicKey: string;
+    size: number;
+}
+export interface IdentityProps extends BaseProps {
+    Custom?: React.ComponentType<Props>;
+    isAlternative?: boolean;
+    isHighlight?: boolean;
+    onCopy?: (value: string) => void;
+    prefix?: Prefix;
+    size?: number;
+    theme?: IconTheme;
+    value?: string | Uint8Array | null;
+}
+export type IconTheme = 'beachball' | 'empty' | 'ethereum' | 'jdenticon' | 'polkadot' | 'substrate';

package/build/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/icons/Beachball.d.ts

@@ -0,0 +1,5 @@
+import type { Props } from '../types.js';
+import React from 'react';
+declare function Identicon({ address, className, size, style }: Props): React.ReactElement<Props>;
+export declare const Beachball: React.MemoExoticComponent<typeof Identicon>;
+export {};

package/build/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/icons/Empty.d.ts

@@ -0,0 +1,5 @@
+import type { Props } from '../types.js';
+import React from 'react';
+declare function Identicon({ className, size, style }: Props): React.ReactElement<Props>;
+export declare const Empty: React.MemoExoticComponent<typeof Identicon>;
+export {};

package/build/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/icons/Ethereum.d.ts

@@ -0,0 +1,5 @@
+import type { Props } from '../types.js';
+import React from 'react';
+declare function Identicon({ address, className, size, style }: Props): React.ReactElement<Props>;
+export declare const Ethereum: React.MemoExoticComponent<typeof Identicon>;
+export {};

package/build/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/icons/Jdenticon.d.ts

@@ -0,0 +1,5 @@
+import type { Props } from '../types.js';
+import React from 'react';
+declare function Identicon({ className, publicKey, size, style }: Props): React.ReactElement<Props>;
+export declare const Jdenticon: React.MemoExoticComponent<typeof Identicon>;
+export {};

package/build/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/icons/Polkadot.d.ts

@@ -0,0 +1,5 @@
+import type { Props } from '../types.js';
+import React from 'react';
+declare function Identicon({ address, className, isAlternative, size, style }: Props): React.ReactElement<Props>;
+export declare const Polkadot: React.MemoExoticComponent<typeof Identicon>;
+export {};

package/build/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/icons/index.d.ts

@@ -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/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/index.d.ts

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

package/build/index.js

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