updated settings > metadata layout to be more consistent with the rest (#4492)
* lighter read to make it more readable on dark mode * added missing themeprops ref * ran linter * undo opacity 1 on non red 'other stake' to keep the focus on the whle number' * ran linter * isolate opacity change to format balance error text * updated settings > metadata layout to be more consistent with the rest * ran linter * Update packages/page-settings/src/Metadata/Extensions.tsx Co-authored-by: Jaco Greeff <jacogr@gmail.com> * updated ternary condition to get rid of empty string at the end as well as fixed weird indentation on styled components Co-authored-by: Jaco Greeff <jacogr@gmail.com>
This commit is contained in:
Jhon
GitHub
parent
481b1d5764
commit
a59a06a747
@ -3,10 +3,10 @@
|
||||
|
||||
import type { ChainInfo } from '../types';
|
||||
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
import React, { useCallback, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import { extensionLogos } from '@polkadot/apps-config';
|
||||
import { Button, Dropdown, Spinner } from '@polkadot/react-components';
|
||||
import { Button, Dropdown, Spinner, Table } from '@polkadot/react-components';
|
||||
import { useToggle } from '@polkadot/react-hooks';
|
||||
|
||||
import { useTranslation } from '../translate';
|
||||
@ -43,32 +43,49 @@ function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props>
|
||||
[chainInfo, extensions, selectedIndex, toggleBusy]
|
||||
);
|
||||
|
||||
const headerRef = useRef([
|
||||
[t('Extensions'), 'start']
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<Table
|
||||
className={className}
|
||||
empty={t<string>('No Upgradable extensions')}
|
||||
header={headerRef.current}
|
||||
>
|
||||
|
||||
{extensions
|
||||
? options.length
|
||||
? (
|
||||
<>
|
||||
<Dropdown
|
||||
label={t<string>('upgradable extensions')}
|
||||
onChange={setSelectedIndex}
|
||||
options={options}
|
||||
value={selectedIndex}
|
||||
/>
|
||||
<Button.Group>
|
||||
<Button
|
||||
icon='upload'
|
||||
isDisabled={isBusy}
|
||||
label={t<string>('Update metadata')}
|
||||
onClick={_updateMeta}
|
||||
? options.length !== 0 && (
|
||||
<>
|
||||
<tr>
|
||||
<td>
|
||||
<Dropdown
|
||||
label={t<string>('upgradable extensions')}
|
||||
onChange={setSelectedIndex}
|
||||
options={options}
|
||||
value={selectedIndex}
|
||||
/>
|
||||
</Button.Group>
|
||||
</>
|
||||
)
|
||||
: <div>{t<string>('No upgradable extensions found')}</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr className='isOdd'>
|
||||
<td>
|
||||
<Button.Group>
|
||||
<Button
|
||||
icon='upload'
|
||||
isDisabled={isBusy}
|
||||
label={t<string>('Update metadata')}
|
||||
onClick={_updateMeta}
|
||||
/>
|
||||
</Button.Group>
|
||||
</td>
|
||||
</tr>
|
||||
</>
|
||||
)
|
||||
: <Spinner />
|
||||
}
|
||||
</div>
|
||||
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
import type { NetworkSpecsStruct } from '@polkadot/ui-settings/types';
|
||||
import type { ChainInfo } from '../types';
|
||||
|
||||
import React, { useCallback, useEffect, useReducer, useState } from 'react';
|
||||
import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Button, ChainImg, Columar, Input, QrNetworkSpecs, Spinner } from '@polkadot/react-components';
|
||||
import { ChainImg, Input, QrNetworkSpecs, Spinner, Table } from '@polkadot/react-components';
|
||||
import { useApi, useDebounce } from '@polkadot/react-hooks';
|
||||
|
||||
import { useTranslation } from '../translate';
|
||||
@ -81,108 +81,183 @@ function NetworkSpecs ({ chainInfo, className }: Props): React.ReactElement<Prop
|
||||
[networkSpecs]
|
||||
);
|
||||
|
||||
const headerRef = useRef([
|
||||
[t('chain specificiations'), 'start', '2']
|
||||
]);
|
||||
|
||||
if (!isApiReady) {
|
||||
return <Spinner />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Columar className={className}>
|
||||
<Columar.Column>
|
||||
<div className='settings--networkSpecs-name'>
|
||||
<Table
|
||||
className={className}
|
||||
empty={t<string>('No open tips')}
|
||||
header={headerRef.current}
|
||||
>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div className='settings--networkSpecs-name'>
|
||||
<Input
|
||||
className='full'
|
||||
help={t<string>('Name of the network. It is only for display purposes.')}
|
||||
isDisabled
|
||||
label={t<string>('Network Name')}
|
||||
value={networkSpecs.title}
|
||||
/>
|
||||
<ChainImg className='settings--networkSpecs-logo' />
|
||||
</div>
|
||||
</td>
|
||||
<td rowSpan={6}>
|
||||
{qrData.genesisHash && (
|
||||
<QrNetworkSpecs
|
||||
className='settings--networkSpecs-qr'
|
||||
networkSpecs={debouncedQrData}
|
||||
/>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div className='settings--networkSpecs-color'>
|
||||
<div>
|
||||
<Input
|
||||
className='full settings--networkSpecs-colorInput'
|
||||
help={t<string>('The color used to distinguish this network with others, use color code with 3 or 6 digits, like "#FFF" or "#111111"')}
|
||||
isError={!_checkColorValid()}
|
||||
label={t<string>('Color')}
|
||||
onChange={_onChangeColor}
|
||||
value={networkSpecs.color}
|
||||
/>
|
||||
<a className='settings--networkSpecs-colorChangeButton'
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
_onSetRandomColor();
|
||||
}}>
|
||||
generate random color
|
||||
</a>
|
||||
</div>
|
||||
<ChainColorIndicator
|
||||
className='settings--networkSpecs-colorBar'
|
||||
color={networkSpecs.color} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<Input
|
||||
className='full'
|
||||
help={t<string>('Name of the network. It is only for display purposes.')}
|
||||
help={t<string>('Genesis Hash refers to initial state of the chain, it cannot be changed once the chain is launched')}
|
||||
isDisabled
|
||||
label={t<string>('Network Name')}
|
||||
value={networkSpecs.title}
|
||||
label={t<string>('Genesis Hash')}
|
||||
value={networkSpecs.genesisHash}
|
||||
/>
|
||||
<ChainImg className='settings--networkSpecs-logo' />
|
||||
</div>
|
||||
<Input
|
||||
className='full'
|
||||
help={t<string>('The color used to distinguish this network with others, use color code with 3 or 6 digits, like "#FFF" or "#111111"')}
|
||||
isError={!_checkColorValid()}
|
||||
label={t<string>('Color')}
|
||||
onChange={_onChangeColor}
|
||||
value={networkSpecs.color}
|
||||
>
|
||||
<div className='settings--networkSpecs-colorButton'>
|
||||
<Button
|
||||
icon='sync'
|
||||
key='spread'
|
||||
label={t<string>('Random')}
|
||||
onClick={_onSetRandomColor}
|
||||
/>
|
||||
<ChainColorIndicator color={networkSpecs.color}/>
|
||||
</div>
|
||||
</Input>
|
||||
<Input
|
||||
className='full'
|
||||
help={t<string>('Genesis Hash refers to initial state of the chain, it cannot be changed once the chain is launched')}
|
||||
isDisabled
|
||||
label={t<string>('Genesis Hash')}
|
||||
value={networkSpecs.genesisHash}
|
||||
/>
|
||||
<Input
|
||||
className='full'
|
||||
help={t<string>('Unit decides the name of 1 unit token, e.g. "DOT" for Polkadot')}
|
||||
isDisabled
|
||||
label={t<string>('Unit')}
|
||||
value={networkSpecs.unit}
|
||||
/>
|
||||
<Input
|
||||
className='full'
|
||||
help={t<string>('Prefix indicates the ss58 address format in this network, it is a number between 0 ~ 255 that describes the precise format of the bytes of the address')}
|
||||
isDisabled
|
||||
label={t<string>('Address Prefix')}
|
||||
value={networkSpecs.prefix.toString()}
|
||||
/>
|
||||
<Input
|
||||
className='full'
|
||||
help={t<string>('Decimals decides the smallest unit of the token, which is 1/10^decimals')}
|
||||
isDisabled
|
||||
label={t<string>('Decimals')}
|
||||
value={networkSpecs.decimals.toString()}
|
||||
/>
|
||||
</Columar.Column>
|
||||
<Columar.Column>
|
||||
{qrData.genesisHash && (
|
||||
<QrNetworkSpecs
|
||||
className='settings--networkSpecs-qr'
|
||||
networkSpecs={debouncedQrData}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
<Input
|
||||
className='full'
|
||||
help={t<string>('Unit decides the name of 1 unit token, e.g. "DOT" for Polkadot')}
|
||||
isDisabled
|
||||
label={t<string>('Unit')}
|
||||
value={networkSpecs.unit}
|
||||
/>
|
||||
)}
|
||||
</Columar.Column>
|
||||
</Columar>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<Input
|
||||
className='full'
|
||||
help={t<string>('Prefix indicates the ss58 address format in this network, it is a number between 0 ~ 255 that describes the precise format of the bytes of the address')}
|
||||
isDisabled
|
||||
label={t<string>('Address Prefix')}
|
||||
value={networkSpecs.prefix.toString()}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<Input
|
||||
className='full'
|
||||
help={t<string>('Decimals decides the smallest unit of the token, which is 1/10^decimals')}
|
||||
isDisabled
|
||||
label={t<string>('Decimals')}
|
||||
value={networkSpecs.decimals.toString()}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(NetworkSpecs)`
|
||||
top: .3rem;
|
||||
|
||||
.settings--networkSpecs-colorButton {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
td {
|
||||
padding: 0;
|
||||
|
||||
.settings--networkSpecs-qr {
|
||||
margin: 0.25rem auto;
|
||||
max-width: 15rem;
|
||||
|
||||
img {
|
||||
border: 1px solid white;
|
||||
}
|
||||
.input.ui--Input input {
|
||||
border: none !important;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.settings--networkSpecs-name {
|
||||
position: relative;
|
||||
position: relative;
|
||||
|
||||
.settings--networkSpecs-logo {
|
||||
height: 32px;
|
||||
left: 12px;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
width: 32px;
|
||||
}
|
||||
.settings--networkSpecs-logo {
|
||||
height: 32px;
|
||||
left: 12px;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.settings--networkSpecs-color {
|
||||
position: relative;
|
||||
|
||||
> div:first-child {
|
||||
|
||||
display: flex;
|
||||
|
||||
.settings--networkSpecs-colorInput {
|
||||
min-width: 124px;
|
||||
}
|
||||
|
||||
.settings--networkSpecs-colorChangeButton {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
align-self: flex-end;
|
||||
padding-bottom: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.settings--networkSpecs-colorBar {
|
||||
border-radius: 50%;
|
||||
border: 1px solid grey;
|
||||
height: 32px;
|
||||
left: 12px;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.settings--networkSpecs-qr {
|
||||
margin: 0.25rem auto;
|
||||
max-width: 15rem;
|
||||
|
||||
img {
|
||||
border: 1px solid white;
|
||||
}
|
||||
}
|
||||
|
||||
`);
|
||||
|
||||
@ -5,13 +5,11 @@ import React from 'react';
|
||||
|
||||
import { useApi } from '@polkadot/react-hooks';
|
||||
|
||||
import { useTranslation } from '../translate';
|
||||
import useChainInfo from '../useChainInfo';
|
||||
import Extensions from './Extensions';
|
||||
import NetworkSpecs from './NetworkSpecs';
|
||||
|
||||
export default function Metadata (): React.ReactElement {
|
||||
const { t } = useTranslation();
|
||||
const { isDevelopment } = useApi();
|
||||
const chainInfo = useChainInfo();
|
||||
|
||||
@ -19,11 +17,9 @@ export default function Metadata (): React.ReactElement {
|
||||
<>
|
||||
{!isDevelopment && (
|
||||
<>
|
||||
<h1>{t<string>('Extensions')}</h1>
|
||||
<Extensions chainInfo={chainInfo} />
|
||||
</>
|
||||
)}
|
||||
<h1>{t<string>('Chain specifications')}</h1>
|
||||
<NetworkSpecs chainInfo={chainInfo} />
|
||||
</>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user