From 86a32683b310f951edfc758eff112f0d846a584e Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Fri, 14 Sep 2018 16:32:40 +0200
Subject: [PATCH] Substrate theme with different Identicon (#313)

* Substrate theme with different Identicon

* Typo
---
 .../ui-react/src/IdentityIcon/Polkadot.tsx    | 26 ++++++++++
 .../ui-react/src/IdentityIcon/Substrate.tsx   | 51 +++++++++++++++++++
 packages/ui-react/src/IdentityIcon/index.tsx  | 12 +++--
 3 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 packages/ui-react/src/IdentityIcon/Polkadot.tsx
 create mode 100644 packages/ui-react/src/IdentityIcon/Substrate.tsx

diff --git a/packages/ui-react/src/IdentityIcon/Polkadot.tsx b/packages/ui-react/src/IdentityIcon/Polkadot.tsx
new file mode 100644
index 0000000000..5561f065fa
--- /dev/null
+++ b/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}
+      />
+    );
+  }
+}
diff --git a/packages/ui-react/src/IdentityIcon/Substrate.tsx b/packages/ui-react/src/IdentityIcon/Substrate.tsx
new file mode 100644
index 0000000000..e828afb6e4
--- /dev/null
+++ b/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)
+      );
+    }
+  }
+}
diff --git a/packages/ui-react/src/IdentityIcon/index.tsx b/packages/ui-react/src/IdentityIcon/index.tsx
index b9308a1f1e..30b0e0a135 100644
--- a/packages/ui-react/src/IdentityIcon/index.tsx
+++ b/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>
     );