Use publicKey for icons (#118)

* Use publicKey for icons

* Hex value for jdenticon

packages/ui-identicon/src/Identicon.tsx

@@ -10,14 +10,15 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import styled from 'styled-components';
 import { decodeAddress, encodeAddress } from '@polkadot/keyring';
 import settings from '@polkadot/ui-settings';
-import { isHex, isU8a } from '@polkadot/util';
+import { isHex, isU8a, u8aToHex } from '@polkadot/util';
 
 import { Beachball, Empty, Jdenticon, Polkadot } from './icons';
 
 const Fallback = Beachball;
 
 type State = {
-  address?: string | null
+  address: string,
+  publicKey: string
 };
 
 const DEFAULT_SIZE = 64;
@@ -59,7 +60,8 @@ const Wrapper = styled.div`
 
 export default class IdentityIcon extends React.PureComponent<Props, State> {
   state: State = {
-    address: null
+    address: '',
+    publicKey: '0x'
   };
 
   private static prefix?: Prefix = undefined;
@@ -72,25 +74,26 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
     try {
       const address = isU8a(value) || isHex(value)
         ? encodeAddress(value, prefix)
-        : value;
-
-      decodeAddress(address as string, false, prefix);
+        : (value || '');
+      const publicKey = u8aToHex(decodeAddress(address, false, prefix));
 
       return address === prevState.address
         ? null
-        : { address };
+        : {
+          address,
+          publicKey
+        };
     } catch (error) {
-      // swallow,invalid address or input
+      return {
+        address: '',
+        publicKey: '0x'
+      };
     }
-
-    return {
-      address: null
-    };
   }
 
   render () {
     const { address } = this.state;
-    const wrapped = this.getWrapped(address);
+    const wrapped = this.getWrapped(this.state);
 
     return !address
       ? wrapped
@@ -104,7 +107,7 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
       );
   }
 
-  private getWrapped (address?: string | null) {
+  private getWrapped ({ address, publicKey }: State) {
     const { className, isHighlight = false, size = DEFAULT_SIZE, style, theme = settings.uiTheme } = this.props;
     const Component = !address
       ? Empty
@@ -113,13 +116,14 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
     return (
       <Wrapper
         className={`ui--IdentityIcon ${className}`}
-        key={address || ''}
+        key={address}
         style={style}
       >
         <Component
+          address={address}
           className={isHighlight ? 'highlight' : ''}
+          publicKey={publicKey}
           size={size}
-          value={address || ''}
         />
       </Wrapper>
     );

packages/ui-identicon/src/icons/Beachball.tsx

@@ -22,11 +22,11 @@ export default class Beachball extends React.PureComponent<Props> {
   }
 
   private appendIcon = (node: Element | null): void => {
-    const { size, value } = this.props;
+    const { address, size } = this.props;
 
     if (node) {
       node.appendChild(
-        identicon(value, size)
+        identicon(address, size)
       );
     }
   }

packages/ui-identicon/src/icons/Jdenticon.tsx

@@ -9,14 +9,14 @@ import jdenticon from 'jdenticon';
 
 export default class Jdenticon extends React.PureComponent<Props> {
   render () {
-    const { className, size, style, value } = this.props;
+    const { className, publicKey, size, style } = this.props;
 
     return (
       <div
         className={`container ${className}`}
         style={style}
         dangerouslySetInnerHTML={ {
-          __html: jdenticon.toSvg(value, size)
+          __html: jdenticon.toSvg(publicKey.substr(2), size)
         } }
       />
     );

packages/ui-identicon/src/icons/Polkadot.tsx

@@ -51,7 +51,7 @@ const schema: { [index: string]: Scheme } = {
 
 export default class Identicon extends React.PureComponent<Props> {
   render () {
-    const { className, size, style, value } = this.props;
+    const { address, className, size, style } = this.props;
     const xy = this.getCircleXY();
     const colors = this.getColors();
 
@@ -61,8 +61,8 @@ export default class Identicon extends React.PureComponent<Props> {
         style={style}
       >
         <svg
-          id={value}
-          name={value}
+          id={address}
+          name={address}
           width={size}
           height={size}
           viewBox='0 0 64 64'
@@ -131,9 +131,9 @@ export default class Identicon extends React.PureComponent<Props> {
   }
 
   private getColors () {
-    const { value } = this.props;
+    const { address } = this.props;
     const total = Object.keys(schema).map(k => schema[k].freq).reduce((a, b) => a + b);
-    const id = Array.from(blake2(decodeAddress(value))).map((x, i) => (x + 256 - zero[i]) % 256);
+    const id = Array.from(blake2(decodeAddress(address))).map((x, i) => (x + 256 - zero[i]) % 256);
     const d = Math.floor((id[30] + id[31] * 256) % total);
     const rot = (id[28] % 6) * 3;
     const sat = (Math.floor(id[29] * 70 / 256 + 26) % 80) + 30;

packages/ui-identicon/src/types.ts

@@ -12,8 +12,9 @@ export type BaseProps = {
 };
 
 export type Props = BaseProps & {
-  size: number,
-  value: string
+  address: string,
+  publicKey: string,
+  size: number
 };
 
 export type IdentityProps = BaseProps & {