From 16fb349f2a38c7e2c327ad073bc72bf1fd2e99b7 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Fri, 13 Sep 2019 20:28:34 +0200
Subject: [PATCH] Select icon type (#1614)

* Select icon type

* Fix edgeware node

* Fix node selection dropdown s/}/)/
---
 packages/app-accounts/package.json            |  2 +-
 packages/app-settings/src/General.tsx         | 18 +++----
 packages/app-settings/src/util.tsx            | 31 ++++++++++-
 packages/apps/package.json                    |  2 +-
 packages/react-components/package.json        |  6 +--
 packages/react-components/src/ChainImg.tsx    |  1 +
 .../react-components/src/IdentityIcon.tsx     | 50 +++++++++++++-----
 packages/react-signer/package.json            |  2 +-
 yarn.lock                                     | 52 +++++++++----------
 9 files changed, 109 insertions(+), 55 deletions(-)

diff --git a/packages/app-accounts/package.json b/packages/app-accounts/package.json
index 203f960937..63a51a2fbc 100644
--- a/packages/app-accounts/package.json
+++ b/packages/app-accounts/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@babel/runtime": "^7.6.0",
     "@polkadot/react-components": "^0.36.0-beta.7",
-    "@polkadot/react-qr": "^0.45.0-beta.2",
+    "@polkadot/react-qr": "^0.45.0-beta.5",
     "@types/file-saver": "^2.0.0",
     "@types/yargs": "^13.0.2",
     "babel-plugin-module-resolver": "^3.1.1",
diff --git a/packages/app-settings/src/General.tsx b/packages/app-settings/src/General.tsx
index cc1e4b93ce..4fb5d06c47 100644
--- a/packages/app-settings/src/General.tsx
+++ b/packages/app-settings/src/General.tsx
@@ -11,7 +11,7 @@ import { ActionStatus } from '@polkadot/react-components/Status/types';
 import uiSettings from '@polkadot/ui-settings';
 
 import translate from './translate';
-import { createOption, saveAndReload } from './util';
+import { createIdenticon, createOption, saveAndReload } from './util';
 import SelectUrl from './SelectUrl';
 
 interface Props extends AppProps, I18nProps {
@@ -19,16 +19,16 @@ interface Props extends AppProps, I18nProps {
 }
 
 const prefixOptions = uiSettings.availablePrefixes.map((o): Option => createOption(o, ['default']));
-const themeOptions = uiSettings.availableUIThemes; // .map((o): Option => createOption(o));
+const iconOptions = uiSettings.availableIcons.map((o): Option => createIdenticon(o, ['default']));
 
 function General ({ className, t }: Props): React.ReactElement<Props> {
   const [settings, setSettings] = useState(uiSettings.get());
-  const { i18nLang, prefix, uiMode, uiTheme } = settings;
+  const { icon, i18nLang, prefix, uiMode } = settings;
 
   const _onChangeApiUrl = (apiUrl: string): void => setSettings({ ...settings, apiUrl });
+  const _onChangeIcon = (icon: string): void => setSettings({ ...settings, icon });
   const _onChangePrefix = (prefix: number): void => setSettings({ ...settings, prefix });
   const _onChangeUiMode = (uiMode: string): void => setSettings({ ...settings, uiMode });
-  const _onChangeUiTheme = (uiTheme: string): void => setSettings({ ...settings, uiTheme });
   const _saveAndReload = (): void => saveAndReload(settings);
 
   return (
@@ -48,11 +48,11 @@ function General ({ className, t }: Props): React.ReactElement<Props> {
       <div className='ui--row'>
         <div className='medium'>
           <Dropdown
-            defaultValue={uiTheme}
-            help={t('The logo and colors for the app along with the identity icon theme.')}
-            label={t('default interface theme')}
-            onChange={_onChangeUiTheme}
-            options={themeOptions}
+            defaultValue={icon}
+            help={t('Override the default identity icon display with a specific theme')}
+            label={t('default icon theme')}
+            onChange={_onChangeIcon}
+            options={iconOptions}
           />
         </div>
         <div className='medium'>
diff --git a/packages/app-settings/src/util.tsx b/packages/app-settings/src/util.tsx
index c7f6e02cfa..200c23d60c 100644
--- a/packages/app-settings/src/util.tsx
+++ b/packages/app-settings/src/util.tsx
@@ -6,13 +6,16 @@ import { SettingsStruct } from '@polkadot/ui-settings/types';
 import { Option, SetOption } from './types';
 
 import React from 'react';
-import { ChainImg } from '@polkadot/react-components';
+import { ChainImg, IdentityIcon } from '@polkadot/react-components';
 import uiSettings from '@polkadot/ui-settings';
 
 export function createOption ({ info, text, value }: SetOption, overrides: string[] = [], override = 'empty'): Option {
   return {
     text: (
-      <div className='ui--Dropdown-item'>
+      <div
+        className='ui--Dropdown-item'
+        key={value}
+      >
         <ChainImg
           className='ui--Dropdown-icon'
           logo={
@@ -28,6 +31,30 @@ export function createOption ({ info, text, value }: SetOption, overrides: strin
   };
 }
 
+export function createIdenticon ({ info, text, value }: SetOption, overrides: string[] = [], override = 'empty'): Option {
+  return {
+    text: (
+      <div
+        className='ui--Dropdown-item'
+        key={value}
+      >
+        <IdentityIcon
+          className='ui--Dropdown-icon'
+          size={32}
+          theme={
+            overrides.includes(info)
+              ? override as 'empty'
+              : info as 'substrate'
+          }
+          value='5F9999K9UgTUgSsbXZQcEmRMvQqwJoBUHMv9e1k2MdgghuRA'
+        />
+        <div className='ui--Dropdown-name'>{text}</div>
+      </div>
+    ),
+    value
+  };
+}
+
 export function saveAndReload (settings: SettingsStruct | null): void {
   if (!settings) {
     return;
diff --git a/packages/apps/package.json b/packages/apps/package.json
index 6bc290f8d4..e8378164c0 100644
--- a/packages/apps/package.json
+++ b/packages/apps/package.json
@@ -15,7 +15,7 @@
     "@babel/runtime": "^7.6.0",
     "@polkadot/react-components": "^0.36.0-beta.7",
     "@polkadot/react-signer": "^0.36.0-beta.7",
-    "@polkadot/ui-assets": "^0.45.0-beta.2",
+    "@polkadot/ui-assets": "^0.45.0-beta.5",
     "query-string": "^6.8.2"
   }
 }
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index 04abb934f5..6f0154fe41 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -13,10 +13,10 @@
     "@babel/runtime": "^7.6.0",
     "@polkadot/keyring": "^1.4.1",
     "@polkadot/react-api": "^0.36.0-beta.7",
-    "@polkadot/react-identicon": "^0.45.0-beta.2",
+    "@polkadot/react-identicon": "^0.45.0-beta.5",
     "@polkadot/react-query": "^0.36.0-beta.7",
-    "@polkadot/ui-keyring": "^0.45.0-beta.2",
-    "@polkadot/ui-settings": "^0.45.0-beta.2",
+    "@polkadot/ui-keyring": "^0.45.0-beta.5",
+    "@polkadot/ui-settings": "^0.45.0-beta.5",
     "@types/chart.js": "^2.8.5",
     "@types/i18next": "^13.0.0",
     "@types/react-copy-to-clipboard": "^4.2.6",
diff --git a/packages/react-components/src/ChainImg.tsx b/packages/react-components/src/ChainImg.tsx
index 740bfbc0f8..5698f52d15 100644
--- a/packages/react-components/src/ChainImg.tsx
+++ b/packages/react-components/src/ChainImg.tsx
@@ -42,6 +42,7 @@ const NODES: Record<string, any> = {
 // overrides as specified
 const LOGOS: Record<string, any> = {
   empty: EMPTY,
+  edgeware,
   alexander: polkadot,
   kusama: chainKusama,
   polkadot,
diff --git a/packages/react-components/src/IdentityIcon.tsx b/packages/react-components/src/IdentityIcon.tsx
index d6285d6f26..2e08359f3e 100644
--- a/packages/react-components/src/IdentityIcon.tsx
+++ b/packages/react-components/src/IdentityIcon.tsx
@@ -12,6 +12,7 @@ import React from 'react';
 import { Option } from '@polkadot/types';
 import { withCalls } from '@polkadot/react-api/with';
 import BaseIdentityIcon from '@polkadot/react-identicon';
+import uiSettings, { ICON_DEFAULT_HOST } from '@polkadot/ui-settings';
 
 import { QueueConsumer } from './Status/Context';
 import translate from './translate';
@@ -22,15 +23,32 @@ interface CopyProps extends IdentityProps, I18nProps {
 
 interface IconProps extends IdentityProps {
   session_validators?: AccountId[];
-  staking_bonded?: Option<AccountId>;
+  staking_bonded?: string | null;
+  system_name?: string;
 }
 
 interface Props extends IconProps, IdentityProps {}
 
 interface State {
   isValidator: boolean;
+  theme: string;
 }
 
+// overrides based on the actual software node type
+const NODES: Record<string, string> = {
+  'edgeware-node': 'substrate',
+  'joystream-node': 'beachball',
+  'node-template': 'substrate',
+  'parity-polkadot': 'polkadot',
+  'polkadot-js': 'polkadot',
+  'substrate-node': 'substrate'
+};
+
+// toString() => null
+const NULL_TOSTRING = {
+  toString: (): null => null
+};
+
 class CopyIcon extends React.PureComponent<CopyProps> {
   public render (): React.ReactNode {
     return (
@@ -63,33 +81,33 @@ const CopyIconI18N = translate(CopyIcon);
 
 class IdentityIcon extends React.PureComponent<Props, State> {
   public state: State = {
-    isValidator: false
+    isValidator: false,
+    theme: ICON_DEFAULT_HOST
   };
 
-  public static getDerivedStateFromProps ({ session_validators = [], staking_bonded, value }: Props, prevState: State): State | null {
+  public static getDerivedStateFromProps ({ session_validators = [], staking_bonded, system_name, value }: Props): State {
     const address = value
       ? value.toString()
       : null;
-    const bonded = staking_bonded && staking_bonded.isSome
-      ? staking_bonded.unwrap().toString()
-      : null;
     const isValidator = !!session_validators.find((validator): boolean =>
-      [address, bonded].includes(validator.toString())
+      [address, staking_bonded].includes(validator.toString())
     );
 
-    return prevState.isValidator !== isValidator
-      ? { isValidator }
-      : null;
+    return {
+      isValidator,
+      theme: (system_name && uiSettings.icon === 'default' && NODES[system_name]) || uiSettings.icon
+    };
   }
 
   public render (): React.ReactNode {
-    const { isValidator } = this.state;
+    const { isValidator, theme } = this.state;
 
     return (
       <QueueConsumer>
         {({ queueAction }): React.ReactNode =>
           <CopyIconI18N
             isHighlight={isValidator}
+            theme={theme as 'substrate'}
             {...this.props}
             queueAction={queueAction}
           />
@@ -101,5 +119,13 @@ class IdentityIcon extends React.PureComponent<Props, State> {
 
 export default withCalls<Props>(
   'query.session.validators',
-  ['query.staking.bonded', { paramName: 'value' }]
+  ['query.staking.bonded', {
+    paramName: 'value',
+    transform: (bonded: Option<AccountId>): string | null =>
+      bonded.unwrapOr(NULL_TOSTRING).toString()
+  }],
+  ['rpc.system.name', {
+    transform: (node: Text): string =>
+      node.toString()
+  }]
 )(IdentityIcon);
diff --git a/packages/react-signer/package.json b/packages/react-signer/package.json
index 51ebd06396..f46e98c842 100644
--- a/packages/react-signer/package.json
+++ b/packages/react-signer/package.json
@@ -12,6 +12,6 @@
   "dependencies": {
     "@babel/runtime": "^7.6.0",
     "@polkadot/react-components": "^0.36.0-beta.7",
-    "@polkadot/react-qr": "^0.45.0-beta.2"
+    "@polkadot/react-qr": "^0.45.0-beta.5"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 494b644f72..ae2e23239f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2084,14 +2084,14 @@
     "@polkadot/util" "^1.4.1"
     "@polkadot/util-crypto" "^1.4.1"
 
-"@polkadot/react-identicon@^0.45.0-beta.2":
-  version "0.45.0-beta.2"
-  resolved "https://registry.yarnpkg.com/@polkadot/react-identicon/-/react-identicon-0.45.0-beta.2.tgz#1e8b421171082f3c232cae6b4ccf4322685faaf3"
-  integrity sha512-agLfEkwjvWoxKmIN0AR3BFG/0pwTrcB0ucQh8/y4zIx6SRAZD9QB1udtg7zp73VCFIRfeEhvpgZArXfJvKrX/g==
+"@polkadot/react-identicon@^0.45.0-beta.5":
+  version "0.45.0-beta.5"
+  resolved "https://registry.yarnpkg.com/@polkadot/react-identicon/-/react-identicon-0.45.0-beta.5.tgz#264d16f839a98bbf253c408f4007d35b1eba6efc"
+  integrity sha512-poJhZz0utVw/vgDbRh/rPYdXDjo4OlyrTlvACY4t+tSh8QWTz6OG0ODaHeOR5pH5VVYYQnID9wRNVbR+zfXrbQ==
   dependencies:
     "@babel/runtime" "^7.6.0"
-    "@polkadot/ui-settings" "^0.45.0-beta.2"
-    "@polkadot/ui-shared" "^0.45.0-beta.2"
+    "@polkadot/ui-settings" "^0.45.0-beta.5"
+    "@polkadot/ui-shared" "^0.45.0-beta.5"
     "@types/color" "^3.0.0"
     "@types/react-copy-to-clipboard" "^4.2.6"
     color "^3.1.2"
@@ -2099,10 +2099,10 @@
     react-copy-to-clipboard "^5.0.1"
     styled-components "^4.3.1"
 
-"@polkadot/react-qr@^0.45.0-beta.2":
-  version "0.45.0-beta.2"
-  resolved "https://registry.yarnpkg.com/@polkadot/react-qr/-/react-qr-0.45.0-beta.2.tgz#12cf8594a6189b32320b42f7414be9a262f7e5d2"
-  integrity sha512-GmA5NcjgbuvklSKrg+qNRsh9KDaEi2ZHAUqEcoiVp6vNDrPWX7UcAvvJ+nAej56bH9fmb1R/fBUHPuxH6V6oag==
+"@polkadot/react-qr@^0.45.0-beta.5":
+  version "0.45.0-beta.5"
+  resolved "https://registry.yarnpkg.com/@polkadot/react-qr/-/react-qr-0.45.0-beta.5.tgz#ac6ea8f4077ee6e014136eab66d5ea7d47b3f3b9"
+  integrity sha512-7pfhqCjFfNy7sy3suC7q50gU35a1OIvq9cHyJj6VBIgV2CNvyGCZWgbv+fa5YlXfC0+HVconqtz8NsVoqb+8Qw==
   dependencies:
     "@babel/runtime" "^7.6.0"
     "@types/react-qr-reader" "^2.1.1"
@@ -2153,17 +2153,17 @@
     "@types/memoizee" "^0.4.3"
     memoizee "^0.4.14"
 
-"@polkadot/ui-assets@^0.45.0-beta.2":
-  version "0.45.0-beta.2"
-  resolved "https://registry.yarnpkg.com/@polkadot/ui-assets/-/ui-assets-0.45.0-beta.2.tgz#9921acba2dfb86c8c95580044f683ad4fc617bc2"
-  integrity sha512-WuzZEonQkTsPPaPKCzfY4CRRX9lsqGeyhMA+HWMoq25fZMQMCN7rjPwk1qA9+F263Q080ZDRCywYG9N2edaURQ==
+"@polkadot/ui-assets@^0.45.0-beta.5":
+  version "0.45.0-beta.5"
+  resolved "https://registry.yarnpkg.com/@polkadot/ui-assets/-/ui-assets-0.45.0-beta.5.tgz#2173a6891537539672a55132a3a4e3129b3dfa29"
+  integrity sha512-6CvDxZzBbj18oOsZVrWbTizFNx2Nrj6f7E4IYTxLXE807GhYUShKPKWjHWJIvlr8OS1oYk1nkNCjHN332ZG1Ow==
   dependencies:
     "@babel/runtime" "^7.6.0"
 
-"@polkadot/ui-keyring@^0.45.0-beta.2":
-  version "0.45.0-beta.2"
-  resolved "https://registry.yarnpkg.com/@polkadot/ui-keyring/-/ui-keyring-0.45.0-beta.2.tgz#4f9d100f2fe459acf3410aadd9532ee65ab7c321"
-  integrity sha512-cfk82IhmkLaUUAqBuOo2ndHt0Hhxz8o6A/lk9tXSVHcnHIL0fcKETwMWon+9Wjy+iqFSzz8Gy/OYPBWqpQ1Mxw==
+"@polkadot/ui-keyring@^0.45.0-beta.5":
+  version "0.45.0-beta.5"
+  resolved "https://registry.yarnpkg.com/@polkadot/ui-keyring/-/ui-keyring-0.45.0-beta.5.tgz#7855f6270175725fee2ce412b3eaf3ab1240302b"
+  integrity sha512-L1kbkcpjMhSyfL3yzf7dAPnCmTU8VZuKbmMJopG7Pl2ZZBMSd5AJtwk5inVPVSddBNsS+j58BHr6JAno94Kl2w==
   dependencies:
     "@babel/runtime" "^7.6.0"
     "@types/mkdirp" "^0.5.2"
@@ -2173,19 +2173,19 @@
     store "^2.0.12"
     styled-components "^4.3.1"
 
-"@polkadot/ui-settings@^0.45.0-beta.2":
-  version "0.45.0-beta.2"
-  resolved "https://registry.yarnpkg.com/@polkadot/ui-settings/-/ui-settings-0.45.0-beta.2.tgz#2979862b325996d1abb50d0293b7507a2c2dcf9a"
-  integrity sha512-9P5KpWTus+dvk96WJEiNUScnI9XgmF7xBMJFlJBhWJ9PqYu2SgA5aUDz+VOQcfmMwrx60agmWtctAdVTevkprg==
+"@polkadot/ui-settings@^0.45.0-beta.5":
+  version "0.45.0-beta.5"
+  resolved "https://registry.yarnpkg.com/@polkadot/ui-settings/-/ui-settings-0.45.0-beta.5.tgz#30f17062d5dd1fb3e826ac7c193c0e6673c3fefc"
+  integrity sha512-7ZiuxWYgpG6lyFQlXSiL6qDA6kKLYCAzL4b+hWkVs+iGIB2D/0M7wWiEp4uCtSYpfRTCvlG6n5oNsrjjJqOOUA==
   dependencies:
     "@babel/runtime" "^7.6.0"
     "@types/store" "^2.0.2"
     store "^2.0.12"
 
-"@polkadot/ui-shared@^0.45.0-beta.2":
-  version "0.45.0-beta.2"
-  resolved "https://registry.yarnpkg.com/@polkadot/ui-shared/-/ui-shared-0.45.0-beta.2.tgz#fe186fc1c6207e6e2c82b515d54d1913e9022e05"
-  integrity sha512-z5aDKqrKcfz3WBg94ybs+HXJUfm88aiF1OWdVKh6QCvsORwEry/oDluieSGvBBbFP3HjaGAtz0KcIWFY5VwbtQ==
+"@polkadot/ui-shared@^0.45.0-beta.5":
+  version "0.45.0-beta.5"
+  resolved "https://registry.yarnpkg.com/@polkadot/ui-shared/-/ui-shared-0.45.0-beta.5.tgz#3d5d0b76d3000e361099426df056172bf4f93ea0"
+  integrity sha512-stIUHVPhF0XOcmJqsZxwYvEwUN5wlpAEOxQ7VcrFdpommVIN9fSl4UuPQ6MD9/3xY6blCADZFAwG6tmXLuzkxg==
   dependencies:
     "@babel/runtime" "^7.6.0"
     "@types/color" "^3.0.0"