Add jdenticon as Substrate default (#83)

packages/ui-identicon/src/Demo.tsx

@@ -3,6 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { encodeAddress } from '@polkadot/keyring';
 import { randomAsU8a } from '@polkadot/util-crypto';
 
@@ -12,7 +13,7 @@ export default class Demo extends React.PureComponent {
   render () {
     const identities: Array<string> = [];
 
-    while (identities.length !== 10) {
+    while (identities.length !== 50) {
       identities.push(
         encodeAddress(randomAsU8a(32))
       );
@@ -21,9 +22,17 @@ export default class Demo extends React.PureComponent {
     return identities.map((value) => (
       <IdentityIcon
         key={value.toString()}
+        theme='jdenticon'
         value={value}
       />
     ));
   }
-
 }
+
+const rootElement = document.getElementById('demo');
+
+if (!rootElement) {
+  throw new Error(`Unable to find element with id 'demo'`);
+}
+
+ReactDOM.render(<Demo />, rootElement);

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

@@ -2,13 +2,13 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { Props } from './types';
+import { Props } from '../types';
 
 import React from 'react';
 
-import identicon from './beachball';
+import identicon from '../beachball/index';
 
-export default class Substrate extends React.PureComponent<Props> {
+export default class Beachball extends React.PureComponent<Props> {
   render () {
     const { className, style } = this.props;
 

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

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { Props } from './types';
+import { Props } from '../types';
 
 import React from 'react';
 

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

@@ -0,0 +1,24 @@
+// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Props } from '../types';
+
+import React from 'react';
+import jdenticon from 'jdenticon';
+
+export default class Jdenticon extends React.PureComponent<Props> {
+  render () {
+    const { className, size, style, value } = this.props;
+
+    return (
+      <div
+        className={`container ${className}`}
+        style={style}
+        dangerouslySetInnerHTML={ {
+          __html: jdenticon.toSvg(value, size)
+        } }
+      />
+    );
+  }
+}

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

@@ -16,7 +16,7 @@
 //   - Move constants to file-level
 //   - Overall it is now just a static component, expecting an address as an input value
 
-import { Props as BaseProps } from './types';
+import { Props as BaseProps } from '../types';
 
 import React from 'react';
 import { decodeAddress } from '@polkadot/keyring';

packages/ui-identicon/src/icons/index.ts

@@ -0,0 +1,8 @@
+// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+export { default as Beachball } from './Beachball';
+export { default as Empty } from './Empty';
+export { default as Jdenticon } from './Jdenticon';
+export { default as Polkadot } from './Polkadot';

packages/ui-identicon/src/index.tsx

@@ -12,9 +12,9 @@ import { decodeAddress, encodeAddress } from '@polkadot/keyring';
 import settings from '@polkadot/ui-settings/index';
 import { isHex, isU8a } from '@polkadot/util';
 
-import Empty from './Empty';
-import Polkadot from './Polkadot';
-import Substrate from './Substrate';
+import { Beachball, Empty, Jdenticon, Polkadot } from './icons';
+
+const Fallback = Beachball;
 
 type State = {
   address?: string | null
@@ -22,8 +22,10 @@ type State = {
 
 const DEFAULT_SIZE = 64;
 const Components: { [index: string]: React.ComponentType<any> } = {
+  'beachball': Beachball,
+  'jdenticon': Jdenticon,
   'polkadot': Polkadot,
-  'substrate': Substrate
+  'substrate': Jdenticon
 };
 const Wrapper = styled.div`
   cursor: copy;
@@ -106,11 +108,11 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
     const { className, isHighlight = false, size = DEFAULT_SIZE, style, theme = settings.uiTheme } = this.props;
     const Component = !address
       ? Empty
-      : Components[theme] || Substrate;
+      : Components[theme] || Fallback;
 
     return (
       <Wrapper
-        className={['ui--IdentityIcon', className].join(' ')}
+        className={`ui--IdentityIcon ${className}`}
         key={address || ''}
         style={style}
       >

packages/ui-identicon/src/types.ts

@@ -21,6 +21,6 @@ export type IdentityProps = BaseProps & {
   onCopy?: (value: string) => void,
   prefix?: Prefix,
   size?: number,
-  theme?: string,
+  theme?: 'beachball' | 'jdenticon' | 'polkadot' | 'substrate',
   value?: string | Uint8Array | null
 };