Substrate theme with different Identicon (#313)

* Substrate theme with different Identicon

* Typo

packages/ui-react/src/IdentityIcon/Polkadot.tsx

@@ -0,0 +1,26 @@
+// Copyright 2017-2018 @polkadot/ui-react authors & contributors
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+
+import { BaseProps } from '../types';
+
+import React from 'react';
+import Identicon from 'polkadot-identicon';
+
+type Props = BaseProps & {
+  size: number,
+  value: string | Uint8Array
+};
+
+export default class Polkadot extends React.PureComponent<Props> {
+  render () {
+    const { size, value } = this.props;
+
+    return (
+      <Identicon
+        id={value}
+        size={size}
+      />
+    );
+  }
+}

packages/ui-react/src/IdentityIcon/Substrate.tsx

@@ -0,0 +1,51 @@
+// Copyright 2017-2018 @polkadot/ui-react authors & contributors
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+
+import { BaseProps } from '../types';
+
+import React from 'react';
+import identicon from '@polkadot/ui-identicon/index';
+import encodeAddress from '@polkadot/util-keyring/address/encode';
+import isHex from '@polkadot/util/is/hex';
+import isU8a from '@polkadot/util/is/u8a';
+
+type Props = BaseProps & {
+  size: number,
+  value: string | Uint8Array
+};
+
+type State = {
+  address: string
+};
+
+export default class Substrate extends React.PureComponent<Props> {
+  state: State = {} as State;
+
+  static getDerivedStateFromProps ({ value }: Props, prevState: State): State | null {
+    const address = isU8a(value) || isHex(value)
+      ? encodeAddress(value)
+      : value;
+
+    return address === prevState.address
+      ? null
+      : { address };
+  }
+
+  render () {
+    return (
+      <div ref={this.appendIcon} />
+    );
+  }
+
+  private appendIcon = (node: Element | null): void => {
+    const { size } = this.props;
+    const { address } = this.state;
+
+    if (node) {
+      node.appendChild(
+        identicon(address, size)
+      );
+    }
+  }
+}

packages/ui-react/src/IdentityIcon/index.tsx

@@ -7,7 +7,9 @@ import { BaseProps } from '../types';
 import './IdentityIcon.css';
 
 import React from 'react';
-import PolkadotIdenticon from 'polkadot-identicon';
+
+import Polkadot from './Polkadot';
+import Substrate from './Substrate';
 
 type Props = BaseProps & {
   size?: number,
@@ -15,21 +17,23 @@ type Props = BaseProps & {
 };
 
 const DEFAULT_SIZE = 64;
+const Component = process.env.UI_THEME === 'substrate'
+  ? Substrate
+  : Polkadot;
 
 export default class IdentityIcon extends React.PureComponent<Props> {
   render () {
     const { className, size = DEFAULT_SIZE, style, value } = this.props;
 
-    // FIXME For UI_THEME=substrate we want to change the icon
     return (
       <div
         className={['ui--IdentityIcon', className].join(' ')}
         key={value.toString()}
         style={style}
       >
-        <PolkadotIdenticon
-          id={value}
+        <Component
           size={size}
+          value={value}
         />
       </div>
     );