Display logo based on node, prominent chain (#1494)

package.json

@@ -10,10 +10,10 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^0.90.0-beta.40",
-    "@polkadot/api-contract": "^0.90.0-beta.40",
+    "@polkadot/api": "^0.90.0-beta.43",
+    "@polkadot/api-contract": "^0.90.0-beta.43",
     "@polkadot/keyring": "^1.1.1",
-    "@polkadot/types": "^0.90.0-beta.40",
+    "@polkadot/types": "^0.90.0-beta.43",
     "@polkadot/util": "^1.1.1",
     "@polkadot/util-crypto": "^1.1.1",
     "@types/styled-components": "4.1.8",

packages/app-contracts/package.json

@@ -11,7 +11,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.5.5",
-    "@polkadot/api-contract": "^0.90.0-beta.40",
+    "@polkadot/api-contract": "^0.90.0-beta.43",
     "@polkadot/ui-app": "^0.34.0-beta.118"
   }
 }

packages/apps/src/SideBar/NodeInfo.tsx

@@ -8,7 +8,7 @@ import { BareProps } from '@polkadot/ui-app/types';
 import React from 'react';
 import styled from 'styled-components';
 import { withApi } from '@polkadot/ui-api/with';
-import { BestNumber, Chain, NodeName, NodeVersion } from '@polkadot/ui-reactive';
+import { NodeName, NodeVersion } from '@polkadot/ui-reactive';
 
 type Props = ApiProps & BareProps & {};
 
@@ -61,17 +61,10 @@ class NodeInfo extends React.PureComponent<Props> {
     }
 
     return (
-      <>
-        <div>
-          <Chain />&nbsp;
-          <BestNumber label='#' />
-        </div>
-        <div>
-          <NodeName />&nbsp;
-          <NodeVersion label='v' />
-        </div>
-        <div className='spacer' />
-      </>
+      <div>
+        <NodeName />&nbsp;
+        <NodeVersion label='v' />
+      </div>
     );
   }
 }

packages/apps/src/SideBar/SideBar.css

@@ -91,9 +91,22 @@
     }
 
     .apps--SideBar-logo {
-      margin: 0.5rem 1.5rem 1.5rem 0.75rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 0.5rem 1rem 1.5rem 0;
       padding-top: 0.75em;
-      width: 9rem;
+      width: 10rem;
+
+      img {
+        width: 3rem;
+      }
+
+      > div.info {
+        color: white;
+        opacity: 0.75;
+        text-align: right;
+      }
     }
 
     .apps--SideBar-collapse {
@@ -157,6 +170,10 @@
       margin: 0.875rem auto;
       padding: 0;
       width: 3rem;
+
+      > div.info {
+        display: none;
+      }
     }
 
     .apps--SideBar-collapse .ui.basic.secondary.button {

packages/apps/src/SideBar/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/apps authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
@@ -12,9 +13,11 @@ import React from 'react';
 import styled from 'styled-components';
 import { Responsive } from 'semantic-ui-react';
 import routing from '@polkadot/apps-routing';
+import { withCalls, withMulti } from '@polkadot/ui-api';
 import { Button, Icon, Menu, media } from '@polkadot/ui-app';
 import { classes } from '@polkadot/ui-app/util';
 import { logoBackground, logoPadding } from '@polkadot/ui-app/styles/theme';
+import { BestNumber, Chain } from '@polkadot/ui-reactive';
 
 import translate from '../translate';
 import Item from './Item';
@@ -26,6 +29,7 @@ interface Props extends I18nProps {
   handleResize: () => void;
   isCollapsed: boolean;
   menuOpen: boolean;
+  system_name?: string;
   toggleMenu: () => void;
 }
 
@@ -78,8 +82,8 @@ class SideBar extends React.PureComponent<Props, State> {
   }
 
   public render (): React.ReactNode {
-    const { handleResize, isCollapsed, toggleMenu, menuOpen } = this.props;
-    const logo = getLogo(true);
+    const { handleResize, isCollapsed, system_name, toggleMenu, menuOpen } = this.props;
+    const logo = getLogo(system_name);
 
     return (
       <Responsive
@@ -143,15 +147,20 @@ class SideBar extends React.PureComponent<Props, State> {
   }
 
   private renderLogo (): React.ReactNode {
-    const { isCollapsed } = this.props;
-    const logo = getLogo(isCollapsed);
+    const { system_name } = this.props;
+    const logo = getLogo(system_name);
 
     return (
-      <img
-        alt='polkadot'
-        className='apps--SideBar-logo'
-        src={logo}
-      />
+      <div className='apps--SideBar-logo'>
+        <img
+          alt='polkadot'
+          src={logo}
+        />
+        <div className='info'>
+          <Chain />
+          <BestNumber label='#' />
+        </div>
+      </div>
     );
   }
 
@@ -250,4 +259,10 @@ class SideBar extends React.PureComponent<Props, State> {
   }
 }
 
-export default translate(SideBar);
+export default withMulti(
+  SideBar,
+  translate,
+  withCalls<Props>(
+    'rpc.system.name'
+  )
+);

packages/apps/src/SideBar/logos.ts

@@ -2,26 +2,11 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import polkadotLogo from '@polkadot/ui-assets/polkadot-white.svg';
 import polkadotSmall from '@polkadot/ui-assets/notext-polkadot.svg';
-import substrateLogo from '@polkadot/ui-assets/parity-substrate-white.svg';
 import substrateSmall from '@polkadot/ui-assets/notext-parity-substrate-white.svg';
-import settings from '@polkadot/ui-settings';
 
-type LogoMap = Map<string, any>;
-
-const LOGOS_NORMAL: LogoMap = new Map([
-  ['polkadot', polkadotLogo],
-  ['substrate', substrateLogo]
-]);
-
-const LOGOS_SMALL: LogoMap = new Map([
-  ['polkadot', polkadotSmall],
-  ['substrate', substrateSmall]
-]);
-
-export default function getLogo (isSmall: boolean): any {
-  return isSmall
-    ? (LOGOS_SMALL.get(settings.uiTheme) || polkadotSmall)
-    : (LOGOS_NORMAL.get(settings.uiTheme) || polkadotLogo);
+export default function getLogo (node?: string): any {
+  return (node || '').indexOf('polkadot') !== -1
+    ? polkadotSmall
+    : substrateSmall;
 }

packages/ui-api/package.json

@@ -31,7 +31,7 @@
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-reactive#readme",
   "dependencies": {
     "@babel/runtime": "^7.5.5",
-    "@polkadot/api": "^0.90.0-beta.40",
+    "@polkadot/api": "^0.90.0-beta.43",
     "@polkadot/extension-dapp": "^0.7.0-beta.1",
     "rxjs-compat": "^6.4.0"
   }

yarn.lock

@@ -1931,44 +1931,44 @@
     universal-user-agent "^3.0.0"
     url-template "^2.0.8"
 
-"@polkadot/api-contract@^0.90.0-beta.40":
-  version "0.90.0-beta.40"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-contract/-/api-contract-0.90.0-beta.40.tgz#11a52f635edce32e8d052e53f31447ddb4a4d5b4"
-  integrity sha512-ewotZ+zn6a34GXd7HcR+QU7GregGb/x0tQoCOb3O4vs79cm3lZK994pgM2e1HNnqhF38gmtFabGuhLFxeD/QUg==
+"@polkadot/api-contract@^0.90.0-beta.43":
+  version "0.90.0-beta.43"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-contract/-/api-contract-0.90.0-beta.43.tgz#1b34f1d6125b79daaca49194dc8abcb0f26dccde"
+  integrity sha512-zWRokR2nHxeIcVifmyQmJBWfoiQsabDf31bn5a5n0vSbTnL+jYSDkrflG0p7OboXolNemj/ksTUPocCUYXkJqA==
   dependencies:
     "@babel/runtime" "^7.5.5"
-    "@polkadot/types" "^0.90.0-beta.40"
+    "@polkadot/types" "^0.90.0-beta.43"
 
-"@polkadot/api-derive@^0.90.0-beta.40":
-  version "0.90.0-beta.40"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-0.90.0-beta.40.tgz#fef744f03e1bcfc0fbda5658bb71ea890ac39d00"
-  integrity sha512-N6Sz9ZzxZI7F0I6da2rOFFAOD7wJ9vqurc+6g/hculp1Reh5OJL/BE9Ue4ZGxdFFI9xtTBsfpq1uD6ve6AorzA==
+"@polkadot/api-derive@^0.90.0-beta.43":
+  version "0.90.0-beta.43"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-0.90.0-beta.43.tgz#cfd63a5206d318314dff507f43167e2782c93448"
+  integrity sha512-tgBb1w0NWjbUilxzoO1Iu5Tj5oB4rl3z2Yk1JI6cwHrb2nNQSFnEQEVvo2A/frBi2J+icryJ630wWW+/sXcK/g==
   dependencies:
     "@babel/runtime" "^7.5.5"
-    "@polkadot/api" "^0.90.0-beta.40"
-    "@polkadot/types" "^0.90.0-beta.40"
+    "@polkadot/api" "^0.90.0-beta.43"
+    "@polkadot/types" "^0.90.0-beta.43"
 
-"@polkadot/api-metadata@^0.90.0-beta.40":
-  version "0.90.0-beta.40"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-metadata/-/api-metadata-0.90.0-beta.40.tgz#a6aca2c13e68068c510cf41469a8173b7532d2d2"
-  integrity sha512-RhwcPmj/oenVw8MZw5dSpqDS4mIGCBlAVJtgpNw78HxeRObM7zmTo5FgQpikSO2SHnRzsxHd05cxaGw6oQEjsQ==
+"@polkadot/api-metadata@^0.90.0-beta.43":
+  version "0.90.0-beta.43"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-metadata/-/api-metadata-0.90.0-beta.43.tgz#534a9ddff4e5ab09284497510f2f45fc94244e74"
+  integrity sha512-0vxGJCzYCYAW0NNLl0SoilfruBbP2APYVpJEupmfgD7OoIT//AACBcnn0a2GgH4ELSGMvUUASiZMpveMjZzknw==
   dependencies:
     "@babel/runtime" "^7.5.5"
-    "@polkadot/types" "^0.90.0-beta.40"
+    "@polkadot/types" "^0.90.0-beta.43"
     "@polkadot/util" "^1.1.1"
     "@polkadot/util-crypto" "^1.1.1"
 
-"@polkadot/api@^0.90.0-beta.40":
-  version "0.90.0-beta.40"
-  resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.90.0-beta.40.tgz#e3b3965bbd00c8a8b23204757669a53802b58f1c"
-  integrity sha512-6PbrQigmQOHS6lKAE26U1dP+gkOvbx1CAb+FL4Ts6tWnZwD6IuahJCMNXZ2QVcVUG2BPKXSQT/7Ya8cEVQnXdg==
+"@polkadot/api@^0.90.0-beta.43":
+  version "0.90.0-beta.43"
+  resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.90.0-beta.43.tgz#0588a54973edc2e6138e9124648823ca0176ea79"
+  integrity sha512-UEntWHhmldQE35x2hfv2m9GIj+jHupttwdzF0SrY3tCir2R6JE6Eor0D8yyyADHafVfFwaH/FzM6jJtX26gAcQ==
   dependencies:
     "@babel/runtime" "^7.5.5"
-    "@polkadot/api-derive" "^0.90.0-beta.40"
-    "@polkadot/api-metadata" "^0.90.0-beta.40"
-    "@polkadot/rpc-core" "^0.90.0-beta.40"
-    "@polkadot/rpc-provider" "^0.90.0-beta.40"
-    "@polkadot/types" "^0.90.0-beta.40"
+    "@polkadot/api-derive" "^0.90.0-beta.43"
+    "@polkadot/api-metadata" "^0.90.0-beta.43"
+    "@polkadot/rpc-core" "^0.90.0-beta.43"
+    "@polkadot/rpc-provider" "^0.90.0-beta.43"
+    "@polkadot/types" "^0.90.0-beta.43"
     "@polkadot/util-crypto" "^1.1.1"
 
 "@polkadot/dev-react@^0.31.0-beta.1":
@@ -2071,10 +2071,10 @@
   dependencies:
     "@babel/runtime" "^7.5.5"
 
-"@polkadot/jsonrpc@^0.90.0-beta.40":
-  version "0.90.0-beta.40"
-  resolved "https://registry.yarnpkg.com/@polkadot/jsonrpc/-/jsonrpc-0.90.0-beta.40.tgz#d5fb18b15e00d21694e658160b8b1cc3f46036bb"
-  integrity sha512-hARH54iLFdU/WQ2DJs1Uism0F/GvJ2eQwHV7tZA+LgxQkROcqd/OE1zdpG4EhfDO8bxarA2b+ZNTXwvdbsQ1pA==
+"@polkadot/jsonrpc@^0.90.0-beta.43":
+  version "0.90.0-beta.43"
+  resolved "https://registry.yarnpkg.com/@polkadot/jsonrpc/-/jsonrpc-0.90.0-beta.43.tgz#fdae30e3a42cc0841c915d9d0224c5ecfd6be758"
+  integrity sha512-9sGrxtx8UE590HQhU6CKTqYTyNz3r2QDLnmkOXZd2SKgni3jzc3FcKZ0lSnvqK8uiwCv0izwQCnOp2Fpw3dyLg==
   dependencies:
     "@babel/runtime" "^7.5.5"
 
@@ -2102,25 +2102,25 @@
     react-copy-to-clipboard "^5.0.1"
     styled-components "^4.3.1"
 
-"@polkadot/rpc-core@^0.90.0-beta.40":
-  version "0.90.0-beta.40"
-  resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-0.90.0-beta.40.tgz#3d779355558e1fad3ecffba2b489a62d0ef56a20"
-  integrity sha512-Iw7LZHo3kaEstRu3iDyT2N9JrGj30VJr0my1TkziAstlZzxuvgNibcmUxAfYlM4Izh8SXghnwzIWe31Btcag3w==
+"@polkadot/rpc-core@^0.90.0-beta.43":
+  version "0.90.0-beta.43"
+  resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-0.90.0-beta.43.tgz#de11b22d3d674e1280b1c2e368be7ba743ac5ced"
+  integrity sha512-le5Ko0mqklXu0fhqqn0uE5HEggidFxA3U9J8qRKc02zYyfMhGiZ4aO59B45Xi+cNugFJ345cNlqn69GvpUd9rw==
   dependencies:
     "@babel/runtime" "^7.5.5"
-    "@polkadot/jsonrpc" "^0.90.0-beta.40"
-    "@polkadot/rpc-provider" "^0.90.0-beta.40"
-    "@polkadot/types" "^0.90.0-beta.40"
+    "@polkadot/jsonrpc" "^0.90.0-beta.43"
+    "@polkadot/rpc-provider" "^0.90.0-beta.43"
+    "@polkadot/types" "^0.90.0-beta.43"
     "@polkadot/util" "^1.1.1"
     rxjs "^6.5.2"
 
-"@polkadot/rpc-provider@^0.90.0-beta.40":
-  version "0.90.0-beta.40"
-  resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-0.90.0-beta.40.tgz#8e7db2ef81d5ac5e9ea99c77c98824233545b7fe"
-  integrity sha512-SA0NWA0zLLzy6n0aK0GZpwdJAVksM4Ha+M3MzQE2QkbZfyXscLsDE5g+FkdFGXM98bbOw6/2O1B1rBKjh5bVoA==
+"@polkadot/rpc-provider@^0.90.0-beta.43":
+  version "0.90.0-beta.43"
+  resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-0.90.0-beta.43.tgz#2771aefbb3a0899514c8d97a190fc9ebe9857cdd"
+  integrity sha512-lcELmO9BeYFmeSRCYQPdP3N/cnl/RX6UUXLkodxg770NGzc4mzB76bQvlfuwnPx4cexxtZ3q9kfEh6XZe+4NZQ==
   dependencies:
     "@babel/runtime" "^7.5.5"
-    "@polkadot/api-metadata" "^0.90.0-beta.40"
+    "@polkadot/api-metadata" "^0.90.0-beta.43"
     "@polkadot/util" "^1.1.1"
     "@polkadot/util-crypto" "^1.1.1"
     "@types/nock" "^10.0.3"
@@ -2135,10 +2135,10 @@
   dependencies:
     "@types/chrome" "^0.0.86"
 
-"@polkadot/types@^0.90.0-beta.40":
-  version "0.90.0-beta.40"
-  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.90.0-beta.40.tgz#5a4acc9543844d13e3fe5dbcd3237f6f06470eba"
-  integrity sha512-tCfARPCEqXTLUsgj+Sy53p4SbgElHC3mo5M6jByTI1QYMNfilIfVSXW35Q7W4wJF+6mixEOeq+cTYJwjgdZLVA==
+"@polkadot/types@^0.90.0-beta.43":
+  version "0.90.0-beta.43"
+  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.90.0-beta.43.tgz#92006a78c183785a2849817fc7848d757448ebd0"
+  integrity sha512-F6pVN+FP672oao/x5MYicorxM92QUaW6xjJ47dzhLEZEcPpEFmEyALZQEl+5E45AXDn0Ad4nE9VpZwHcpJnrAg==
   dependencies:
     "@babel/runtime" "^7.5.5"
     "@polkadot/util" "^1.1.1"