@pezkuwi/react-identicon 3.16.8 → 3.17.0

package/build/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, Pezkuwi } from './icons/index.js';
+import { styled } from './styled.js';
+const Fallback = Beachball;
+const DEFAULT_SIZE = 64;
+const Components = {
+    beachball: Beachball,
+    bizinikiwi: Jdenticon,
+    empty: Empty,
+    ethereum: Ethereum,
+    jdenticon: Jdenticon,
+    pezkuwi: Pezkuwi
+};
+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/README.md

@@ -0,0 +1,34 @@
+# @pezkuwi/react-identicon
+
+A generic identity icon that can render icons based on the theme, be it Substrate or Polkadot
+
+## Usage Examples
+
+To install the component, do `yarn add @pezkuwi/react-identicon`
+
+Inside a React component, you can now render any account with the associated icon -
+
+```javascript
+import Identicon from '@pezkuwi/react-identicon';
+
+...
+render () {
+  // address is an ss58-encoded address or publicKey (hex string or Uint8Array)
+  const { address } = this.props;
+  // size (optional) is a number, indicating the size (in pixels, 64 as default)
+  const size = 32;
+  // theme (optional), depicts the type of icon, one of
+  // 'polkadot', 'substrate' (default), 'beachball' or 'jdenticon'
+  const theme = 'polkadot';
+
+  // standard className & style props are also available
+  return (
+    <Identicon
+      value={address}
+      size={size}
+      theme={theme}
+    />
+  );
+}
+...
+```