RoboHash icon theme (#3795)

* RoboHash icon theme

* Move to react-components

* Enable RoboHash

* Use full hash for generation

* Conversions

* Stream bytes

* background opacity

* Optimize images

package.json

@@ -52,6 +52,7 @@
     "build:release:ipfs": "node scripts/ipfsUpload.js",
     "build:release:ghpages": "yarn polkadot-ci-ghact-docs",
     "build:release:www": "yarn polkadot-ci-ghact-build && yarn build:release:ipfs && yarn build:release:ghpages",
+    "build:robohash": "node scripts/robohash.js",
     "build:www": "rm -rf packages/apps/build && mkdir -p packages/apps/build && yarn run build:i18n && cd packages/apps && NODE_ENV=production webpack --config webpack.config.js",
     "build:electron": "yarn clean:electronBuild && yarn build:electronMain && yarn build:electronRenderer",
     "build:devElectronRenderer": "cd packages/apps-electron && NODE_ENV=development webpack --config webpack.renderer.config.js",

packages/page-settings/src/General.tsx

@@ -25,7 +25,9 @@ function General ({ className = '' }: Props): React.ReactElement<Props> {
   const [settings, setSettings] = useState(uiSettings.get());
 
   const iconOptions = useMemo(
-    () => uiSettings.availableIcons.map((o): Option => createIdenticon(o, ['default'])),
+    () => uiSettings.availableIcons
+      .map((o): Option => createIdenticon(o, ['default']))
+      .concat(createIdenticon({ info: 'robohash', text: 'RoboHash', value: 'robohash' })),
     []
   );
 

packages/react-components/src/IdentityIcon/RoboHash/backgrounds/index.ts

@@ -0,0 +1,29 @@
+// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Automatically generated, do not edit
+
+import b000 from './bg1/011-final1.png';
+import b001 from './bg1/008-final10.png';
+import b002 from './bg1/003-final2.png';
+import b003 from './bg1/002-final3.png';
+import b004 from './bg1/004-final4.png';
+import b005 from './bg1/005-final5.png';
+import b006 from './bg1/009-final6.png';
+import b007 from './bg1/007-final7.png';
+import b008 from './bg1/010-final8.png';
+import b009 from './bg1/006-final9.png';
+import b010 from './bg1/000-robotBG-11.png';
+import b011 from './bg1/001-robotBG-12.png';
+import b012 from './bg1/012-robotBG-10.png';
+import b013 from './bg2/000-robotBG-06.png';
+import b014 from './bg2/001-robotBG-08.png';
+import b015 from './bg2/002-robotBG-04.png';
+import b016 from './bg2/003-robotBG-03.png';
+import b017 from './bg2/004-robotBG-01.png';
+import b018 from './bg2/005-robotBG-02.png';
+import b019 from './bg2/006-robotBG-07.png';
+
+const backgrounds: any[] = [b000, b001, b002, b003, b004, b005, b006, b007, b008, b009, b010, b011, b012, b013, b014, b015, b016, b017, b018, b019];
+
+export default backgrounds;

packages/react-components/src/IdentityIcon/RoboHash/index.tsx

@@ -0,0 +1,104 @@
+// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Robots lovingly delivered by Robohash.org
+// https://github.com/e1ven/Robohash
+//
+// The "set1" artwork (and robohash backgrounds) were created by Zikri Kader. They are available under CC-BY-3.0 or CC-BY-4.0 license.
+// The "set2" artwork was created by Hrvoje Novakovic. They are available under CC-BY-3.0 license.
+// The "set3" artwork was created by Julian Peter Arias. They are available under CC-BY-3.0 license.
+// The Cats/"set4" were created by David Revoy, used under CC-BY-4.0 https://www.peppercarrot.com/en/article391/cat-avatar-generator
+// The avatars used in "set5" were created by Pablo Stanley, for https://avataaars.com/ They are "Free for personal and commercial use. 😇"
+
+import { ImageInfo } from './types';
+
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import { blake2AsU8a } from '@polkadot/util-crypto';
+
+import backgrounds from './backgrounds';
+import sets from './sets';
+
+interface Props {
+  className?: string;
+  publicKey: string;
+  size: number;
+}
+
+interface HashRef {
+  hash: Uint8Array;
+  index: number;
+}
+
+function getIndex <T> (list: T[], hash: HashRef): T {
+  let value = 0;
+
+  // grab 48 bits worth of data (last increment before max int)
+  // (6 also doesn't divide into 32, so we have a rolling window)
+  for (let i = 0; i < 6; i++) {
+    value = (value * 256) + hash.hash[hash.index];
+    hash.index++;
+
+    if (hash.index === 32) {
+      hash.index = 0;
+    }
+  }
+
+  return list[value % list.length];
+}
+
+function createInfo (value: string): ImageInfo {
+  const hash = {
+    hash: blake2AsU8a(value),
+    index: 0
+  };
+
+  return {
+    background: getIndex(backgrounds, hash) as string,
+    parts: getIndex(sets, hash).map((section) => getIndex(section, hash) as string)
+  };
+}
+
+function RoboHash ({ className, publicKey, size }: Props): React.ReactElement<Props> | null {
+  const info = useMemo(
+    () => createInfo(publicKey),
+    [publicKey]
+  );
+  const style = useMemo(
+    () => ({ height: `${size}px`, width: `${size}px` }),
+    [size]
+  );
+
+  return (
+    <div
+      className={className}
+      style={style}
+    >
+      <img src={info.background} />
+      {info.parts.map((src, index) =>
+        <img
+          key={index}
+          src={src}
+        />
+      )}
+    </div>
+  );
+}
+
+export default React.memo(styled(RoboHash)`
+  border-radius: 50%;
+  position: relative;
+  overflow: hidden;
+
+  img {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+
+    &:first-child {
+      opacity: 0.5;
+    }
+  }
+`);