Display logo based on node, prominent chain (#1494)
This commit is contained in:
Jaco Greeff
GitHub
parent
74305cecac
commit
3de65b60d2
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 />
|
||||
<BestNumber label='#' />
|
||||
</div>
|
||||
<div>
|
||||
<NodeName />
|
||||
<NodeVersion label='v' />
|
||||
</div>
|
||||
<div className='spacer' />
|
||||
</>
|
||||
<div>
|
||||
<NodeName />
|
||||
<NodeVersion label='v' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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'
|
||||
)
|
||||
);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
90
yarn.lock
90
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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user