From 3de65b60d23309ec36eb8984422f753f5b282391 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Mon, 12 Aug 2019 12:11:46 +0200 Subject: [PATCH] Display logo based on node, prominent chain (#1494) --- package.json | 6 +- packages/app-contracts/package.json | 2 +- packages/apps/src/SideBar/NodeInfo.tsx | 17 ++--- packages/apps/src/SideBar/SideBar.css | 21 +++++- packages/apps/src/SideBar/index.tsx | 35 +++++++--- packages/apps/src/SideBar/logos.ts | 23 ++----- packages/ui-api/package.json | 2 +- yarn.lock | 90 +++++++++++++------------- 8 files changed, 103 insertions(+), 93 deletions(-) diff --git a/package.json b/package.json index 891ae455d0..40f2dc7125 100644 --- a/package.json +++ b/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", diff --git a/packages/app-contracts/package.json b/packages/app-contracts/package.json index b97fdcb3d9..472e265c56 100644 --- a/packages/app-contracts/package.json +++ b/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" } } diff --git a/packages/apps/src/SideBar/NodeInfo.tsx b/packages/apps/src/SideBar/NodeInfo.tsx index 179bcfc0a8..bd0327b6df 100644 --- a/packages/apps/src/SideBar/NodeInfo.tsx +++ b/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 { } return ( - <> -
-   - -
-
-   - -
-
- +
+   + +
); } } diff --git a/packages/apps/src/SideBar/SideBar.css b/packages/apps/src/SideBar/SideBar.css index a5d9f850ce..291d022bec 100644 --- a/packages/apps/src/SideBar/SideBar.css +++ b/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 { diff --git a/packages/apps/src/SideBar/index.tsx b/packages/apps/src/SideBar/index.tsx index 425ffab096..68e58e1e16 100644 --- a/packages/apps/src/SideBar/index.tsx +++ b/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 { } 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 ( { } private renderLogo (): React.ReactNode { - const { isCollapsed } = this.props; - const logo = getLogo(isCollapsed); + const { system_name } = this.props; + const logo = getLogo(system_name); return ( - polkadot +
+ polkadot +
+ + +
+
); } @@ -250,4 +259,10 @@ class SideBar extends React.PureComponent { } } -export default translate(SideBar); +export default withMulti( + SideBar, + translate, + withCalls( + 'rpc.system.name' + ) +); diff --git a/packages/apps/src/SideBar/logos.ts b/packages/apps/src/SideBar/logos.ts index 33d591dbdf..6d2a433152 100644 --- a/packages/apps/src/SideBar/logos.ts +++ b/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; - -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; } diff --git a/packages/ui-api/package.json b/packages/ui-api/package.json index 233bf80b87..66af835be8 100644 --- a/packages/ui-api/package.json +++ b/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" } diff --git a/yarn.lock b/yarn.lock index b62d93559d..395c26209a 100644 --- a/yarn.lock +++ b/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"