Add jdenticon as Substrate default (#83)

packages/ui-identicon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/ui-identicon",
-  "version": "0.27.1",
+  "version": "0.28.0",
   "description": "Renders an SVG picture representing an address",
   "main": "index.js",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -10,10 +10,11 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.3.1",
-    "@polkadot/ui-settings": "^0.27.1",
+    "@polkadot/ui-settings": "^0.28.0",
     "@types/color": "^3.0.0",
     "@types/react-copy-to-clipboard": "^4.2.6",
     "color": "^3.0.0",
+    "jdenticon": "^2.1.1",
     "react-copy-to-clipboard": "^5.0.1"
   },
   "peerDependencies": {

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
 };

packages/ui-identicon/webpack.config.js

@@ -2,19 +2,24 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+const path = require('path');
+
 const ENV = process.env.NODE_ENV || 'development';
 const isProd = ENV === 'production';
 
 module.exports = {
   context: __dirname,
   devtool: isProd ? 'source-map' : 'cheap-eval-source-map',
-  entry: './src/demo.ts',
+  entry: './src/Demo.tsx',
   mode: ENV,
   output: {
     path: __dirname,
     filename: './demo.js'
   },
   resolve: {
+    alias: {
+      '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/src')
+    },
     extensions: ['.js', '.jsx', '.ts', '.tsx']
   },
   module: {