Select icon type (#1614)
* Select icon type * Fix edgeware node * Fix node selection dropdown s/}/)/
This commit is contained in:
Jaco Greeff
GitHub
parent
a682dc4de1
commit
16fb349f2a
@ -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",
|
||||
|
||||
@ -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'>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
52
yarn.lock
52
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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user