neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Functional components (react-query, react-params, misc) (#1567)

Browse Source
This commit is contained in:
kwingram25 2019-09-01 14:24:14 +02:00 committed by Jaco Greeff
parent cdf1d88de5
commit 5f49e6c8d6
35 changed files with 829 additions and 928 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
packages/app-explorer/src/BlockInfo/Extrinsics.tsx
View File

@ -19,30 +19,28 @@ interface Props extends I18nProps {
value?: Extrinsic[] | null;
}
class Extrinsics extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, label, t } = this.props;
return (
<Column
className={className}
emptyText={t('No pending extrinsics are in the queue')}
headerText={label || t('extrinsics')}
>
{this.renderContent()}
</Column>
);
function renderSigner ({ t }: Props, extrinsic: Extrinsic): React.ReactNode {
if (!extrinsic.isSigned) {
return null;
}
private renderContent (): React.ReactNode {
const { value = [] } = this.props;
return (
<div className='explorer--BlockByHash-header'>
<div>
<AddressMini value={extrinsic.signer} />
</div>
<div className='explorer--BlockByHash-nonce'>
{t('index')} {formatNumber(extrinsic.nonce)}
</div>
</div>
);
}
return (value || []).map(this.renderExtrinsic);
}
// FIXME This is _very_ similar to what we have in democracy/Item
function renderExtrinsic (props: Props): (_: Extrinsic, __: number) => React.ReactNode {
const { blockNumber, t } = props;
// FIXME This is _very_ similar to what we have in democracy/Item
private renderExtrinsic = (extrinsic: Extrinsic, index: number): React.ReactNode => {
const { blockNumber, t } = this.props;
return function ExplorerExtrinsic (extrinsic: Extrinsic, index: number): React.ReactNode {
const { meta, method, section } = GenericCall.findFunction(extrinsic.callIndex);
const isMortal = extrinsic.era.isMortalEra;
let eraEnd;
@ -61,7 +59,7 @@ class Extrinsics extends React.PureComponent<Props> {
<h3>
{section}.{method}&nbsp;(#{formatNumber(index)})
</h3>
{this.renderSigner(extrinsic)}
{renderSigner(props, extrinsic)}
</div>
<details>
<summary>{
@ -95,26 +93,27 @@ class Extrinsics extends React.PureComponent<Props> {
}
</article>
);
}
};
}
private renderSigner (extrinsic: Extrinsic): React.ReactNode {
const { t } = this.props;
function renderContent (props: Props): React.ReactNode {
const { value = [] } = props;
if (!extrinsic.isSigned) {
return null;
}
return (value || []).map(renderExtrinsic(props));
}
return (
<div className='explorer--BlockByHash-header'>
<div>
<AddressMini value={extrinsic.signer} />
</div>
<div className='explorer--BlockByHash-nonce'>
{t('index')} {formatNumber(extrinsic.nonce)}
</div>
</div>
);
}
function Extrinsics (props: Props): React.ReactElement<Props> {
const { className, label, t } = props;
return (
<Column
className={className}
emptyText={t('No pending extrinsics are in the queue')}
headerText={label || t('extrinsics')}
>
{renderContent(props)}
</Column>
);
}
export default translate(styled(Extrinsics)`

171
packages/app-explorer/src/BlockInfo/Logs.tsx
View File

@ -17,33 +17,87 @@ interface Props extends I18nProps {
value?: DigestItem[];
}
class Logs extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { t, value } = this.props;
function formatU8a (value: U8a): React.ReactNode {
return (
<Params
isDisabled
params={[{ type: getTypeDef('Bytes') }]}
values={[{ isValid: true, value }]}
/>
);
}
if (!value || !value.length) {
return null;
}
function formatStruct (struct: Struct): React.ReactNode {
const types: Record<string, string> = struct.Type;
const params = Object.keys(types).map((name): { name: string; type: TypeDef } => ({
name,
type: getTypeDef(types[name])
}));
const values = struct.toArray().map((value): { isValid: boolean; value: Codec } => ({
isValid: true,
value
}));
return (
<Column headerText={t('logs')}>
{value.map(this.renderItem)}
</Column>
);
}
return (
<Params
isDisabled
params={params}
values={values}
/>
);
}
private renderItem = (item: DigestItem, index: number): React.ReactNode => {
const { t } = this.props;
function formatTuple (tuple: Tuple): React.ReactNode {
const types = tuple.Types;
const params = types.map((type): { type: TypeDef } => ({
type: getTypeDef(type)
}));
const values = tuple.toArray().map((value): { isValid: boolean; value: Codec } => ({
isValid: true,
value
}));
return (
<Params
isDisabled
params={params}
values={values}
/>
);
}
function formatVector (vector: Vec<any>): React.ReactNode {
const type = getTypeDef(vector.Type);
const values = vector.toArray().map((value): { isValid: boolean; value: Codec } => ({
isValid: true,
value
}));
const params = values.map((_, index): { name: string; type: TypeDef } => ({
name: `${index}`,
type
}));
return (
<Params
isDisabled
params={params}
values={values}
/>
);
}
function renderItem ({ t }: Props): (item: DigestItem, index: number) => React.ReactNode {
return function LogItem (item: DigestItem, index: number): React.ReactNode {
let content: React.ReactNode;
if (item.value instanceof Struct) {
content = this.formatStruct(item.value);
content = formatStruct(item.value);
} else if (item.value instanceof Tuple) {
content = this.formatTuple(item.value);
content = formatTuple(item.value);
} else if (item.value instanceof Vec) {
content = this.formatVector(item.value);
content = formatVector(item.value);
} else if (item.value instanceof U8a) {
content = this.formatU8a(item.value);
content = formatU8a(item.value);
} else {
content = <div>{item.value.toString().split(',').join(', ')}</div>;
}
@ -64,76 +118,21 @@ class Logs extends React.PureComponent<Props> {
</article>
</div>
);
};
}
function Logs (props: Props): React.ReactElement<Props> | null {
const { t, value } = props;
if (!value || !value.length) {
return null;
}
private formatU8a (value: U8a): React.ReactNode {
return (
<Params
isDisabled
params={[{ type: getTypeDef('Bytes') }]}
values={[{ isValid: true, value }]}
/>
);
}
private formatStruct (struct: Struct): React.ReactNode {
const types: Record<string, string> = struct.Type;
const params = Object.keys(types).map((name): { name: string; type: TypeDef } => ({
name,
type: getTypeDef(types[name])
}));
const values = struct.toArray().map((value): { isValid: boolean; value: Codec } => ({
isValid: true,
value
}));
return (
<Params
isDisabled
params={params}
values={values}
/>
);
}
private formatTuple (tuple: Tuple): React.ReactNode {
const types = tuple.Types;
const params = types.map((type): { type: TypeDef } => ({
type: getTypeDef(type)
}));
const values = tuple.toArray().map((value): { isValid: boolean; value: Codec } => ({
isValid: true,
value
}));
return (
<Params
isDisabled
params={params}
values={values}
/>
);
}
private formatVector (vector: Vec<any>): React.ReactNode {
const type = getTypeDef(vector.Type);
const values = vector.toArray().map((value): { isValid: boolean; value: Codec } => ({
isValid: true,
value
}));
const params = values.map((_, index): { name: string; type: TypeDef } => ({
name: `${index}`,
type
}));
return (
<Params
isDisabled
params={params}
values={values}
/>
);
}
return (
<Column headerText={t('logs')}>
{value.map(renderItem(props))}
</Column>
);
}
export default translate(Logs);

60
packages/react-params/src/Param/Account.tsx
View File

@ -10,36 +10,8 @@ import keyring from '@polkadot/ui-keyring';
import Bare from './Bare';
export default class Account extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = this.props;
const defaultValue = value && value.toString();
return (
<Bare
className={className}
style={style}
>
<InputAddress
className='full'
defaultValue={defaultValue}
isDisabled={isDisabled}
isError={isError}
isInput
label={label}
onChange={this.onChange}
placeholder='5...'
type='allPlus'
withEllipsis
withLabel={withLabel}
/>
</Bare>
);
}
private onChange = (value?: string): void => {
const { onChange } = this.props;
function onChange ({ onChange }: Props): (_?: string) => void {
return function (value?: string): void {
let isValid = false;
if (value) {
@ -56,5 +28,31 @@ export default class Account extends React.PureComponent<Props> {
isValid,
value
});
}
};
}
export default function Account (props: Props): React.ReactElement<Props> {
const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = props;
const defaultValue = value && value.toString();
return (
<Bare
className={className}
style={style}
>
<InputAddress
className='full'
defaultValue={defaultValue}
isDisabled={isDisabled}
isError={isError}
isInput
label={label}
onChange={onChange(props)}
placeholder='5...'
type='allPlus'
withEllipsis
withLabel={withLabel}
/>
</Bare>
);
}

80
packages/react-params/src/Param/Amount.tsx
View File

@ -12,49 +12,47 @@ import { bnToBn, formatNumber } from '@polkadot/util';
import Bare from './Bare';
export default class Amount extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = this.props;
const defaultValue = isDisabled
? (
value instanceof ClassOf('AccountIndex')
? value.toString()
: formatNumber(value)
)
: bnToBn((value as number) || 0).toString();
return (
<Bare
className={className}
style={style}
>
<Input
className='full'
defaultValue={defaultValue}
isDisabled={isDisabled}
isError={isError}
label={label}
min={0}
onChange={this.onChange}
onEnter={onEnter}
type={
isDisabled
? 'text'
: 'number'
}
withEllipsis
withLabel={withLabel}
/>
</Bare>
);
}
private onChange = (value: string): void => {
const { onChange } = this.props;
function onChange ({ onChange }: Props): (_: string) => void {
return function (value: string): void {
onChange && onChange({
isValid: true,
value: new BN(value || 0)
});
}
};
}
export default function Amount (props: Props): React.ReactElement<Props> {
const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = props;
const defaultValue = isDisabled
? (
value instanceof ClassOf('AccountIndex')
? value.toString()
: formatNumber(value)
)
: bnToBn((value as number) || 0).toString();
return (
<Bare
className={className}
style={style}
>
<Input
className='full'
defaultValue={defaultValue}
isDisabled={isDisabled}
isError={isError}
label={label}
min={0}
onChange={onChange(props)}
onEnter={onEnter}
type={
isDisabled
? 'text'
: 'number'
}
withEllipsis
withLabel={withLabel}
/>
</Bare>
);
}

56
packages/react-params/src/Param/Balance.tsx
View File

@ -12,34 +12,8 @@ import Bare from './Bare';
type Props = BareProps;
class Balance extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = this.props;
const defaultValue = new BN((value as BN || '0').toString()).toString(10);
return (
<Bare
className={className}
style={style}
>
<InputBalance
className='full'
defaultValue={defaultValue}
isDisabled={isDisabled}
isError={isError}
label={label}
onChange={this.onChange}
withEllipsis
onEnter={onEnter}
withLabel={withLabel}
/>
</Bare>
);
}
private onChange = (value?: BN): void => {
const { isError, onChange } = this.props;
function onChange ({ isError, onChange }: Props): (_?: BN) => void {
return function (value?: BN): void {
if (!onChange) {
return;
}
@ -48,7 +22,31 @@ class Balance extends React.PureComponent<Props> {
isValid: !isError && !!value,
value
});
}
};
}
function Balance (props: Props): React.ReactElement<Props> {
const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = props;
const defaultValue = new BN((value as BN || '0').toString()).toString(10);
return (
<Bare
className={className}
style={style}
>
<InputBalance
className='full'
defaultValue={defaultValue}
isDisabled={isDisabled}
isError={isError}
label={label}
onChange={onChange(props)}
withEllipsis
onEnter={onEnter}
withLabel={withLabel}
/>
</Bare>
);
}
export {

22
packages/react-params/src/Param/Bare.tsx
View File

@ -11,17 +11,13 @@ interface Props extends BareProps {
children: React.ReactNode;
}
export default class Bare extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { children, className, style } = this.props;
return (
<div
className={classes('ui--row', className)}
style={style}
>
{children}
</div>
);
}
export default function Bare ({ children, className, style }: Props): React.ReactElement<Props> {
return (
<div
className={classes('ui--row', className)}
style={style}
>
{children}
</div>
);
}

34
packages/react-params/src/Param/Base.tsx
View File

@ -18,24 +18,20 @@ interface Props extends BareProps {
withLabel?: boolean;
}
export default class Base extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { children, className, label, size = 'full', style, withLabel } = this.props;
return (
<Bare
className={className}
style={style}
export default function Base ({ children, className, label, size = 'full', style, withLabel }: Props): React.ReactElement<Props> {
return (
<Bare
className={className}
style={style}
>
<Labelled
className={size}
label={label}
withEllipsis
withLabel={withLabel}
>
<Labelled
className={size}
label={label}
withEllipsis
withLabel={withLabel}
>
{children}
</Labelled>
</Bare>
);
}
{children}
</Labelled>
</Bare>
);
}

78
packages/react-params/src/Param/BaseBytes.tsx
View File

@ -23,45 +23,8 @@ interface Props extends BaseProps {
const defaultValidate = (): boolean =>
true;
export default class BaseBytes extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { children, className, defaultValue: { value }, isDisabled, isError, label, onEnter, size = 'full', style, withLabel } = this.props;
const defaultValue = value
? (
isHex(value)
? value
: u8aToHex(value as Uint8Array, isDisabled ? 256 : -1)
)
: undefined;
return (
<Bare
className={className}
style={style}
>
<Input
className={size}
defaultValue={defaultValue}
isAction={!!children}
isDisabled={isDisabled}
isError={isError}
label={label}
onChange={this.onChange}
onEnter={onEnter}
placeholder='0x...'
type='text'
withEllipsis
withLabel={withLabel}
>
{children}
</Input>
</Bare>
);
}
private onChange = (hex: string): void => {
const { asHex, length = -1, onChange, validate = defaultValidate, withLength } = this.props;
function onChange ({ asHex, length = -1, onChange, validate = defaultValidate, withLength }: Props): (_: string) => void {
return function (hex: string): void {
let value: Uint8Array;
let isValid = true;
@ -88,5 +51,40 @@ export default class BaseBytes extends React.PureComponent<Props> {
? u8aToHex(value)
: value
});
}
};
}
export default function BaseBytes (props: Props): React.ReactElement<Props> {
const { children, className, defaultValue: { value }, isDisabled, isError, label, onEnter, size = 'full', style, withLabel } = props;
const defaultValue = value
? (
isHex(value)
? value
: u8aToHex(value as Uint8Array, isDisabled ? 256 : -1)
)
: undefined;
return (
<Bare
className={className}
style={style}
>
<Input
className={size}
defaultValue={defaultValue}
isAction={!!children}
isDisabled={isDisabled}
isError={isError}
label={label}
onChange={onChange(props)}
onEnter={onEnter}
placeholder='0x...'
type='text'
withEllipsis
withLabel={withLabel}
>
{children}
</Input>
</Bare>
);
}

60
packages/react-params/src/Param/Bool.tsx
View File

@ -14,39 +14,37 @@ const options = [
{ text: 'Yes', value: true }
];
export default class BoolParam extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = this.props;
const defaultValue = value instanceof Boolean
? value.valueOf()
: value as boolean;
return (
<Bare
className={className}
style={style}
>
<Dropdown
className='full'
defaultValue={defaultValue}
isDisabled={isDisabled}
isError={isError}
label={label}
options={options}
onChange={this.onChange}
withEllipsis
withLabel={withLabel}
/>
</Bare>
);
}
private onChange = (value: boolean): void => {
const { onChange } = this.props;
function onChange ({ onChange }: Props): (_: boolean) => void {
return function (value: boolean): void {
onChange && onChange({
isValid: true,
value
});
}
};
}
export default function BoolParam (props: Props): React.ReactElement<Props> {
const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = props;
const defaultValue = value instanceof Boolean
? value.valueOf()
: value as boolean;
return (
<Bare
className={className}
style={style}
>
<Dropdown
className='full'
defaultValue={defaultValue}
isDisabled={isDisabled}
isError={isError}
label={label}
options={options}
onChange={onChange(props)}
withEllipsis
withLabel={withLabel}
/>
</Bare>
);
}

86
packages/react-params/src/Param/Code.tsx
View File

@ -9,52 +9,52 @@ import React from 'react';
import Bytes from './Bytes';
import BytesFile from './File';
export default class Code extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, defaultValue, isDisabled, isError, label, style, withLabel } = this.props;
if (isDisabled) {
return this.renderDisabled();
}
return (
<BytesFile
className={className}
defaultValue={defaultValue}
isError={isError}
label={label}
onChange={this.onChange}
style={style}
withLabel={withLabel}
/>
);
}
private renderDisabled (): React.ReactNode {
const { className, defaultValue, isError, isOptional, label, onEnter, style, type, withLabel } = this.props;
return (
<Bytes
className={className}
defaultValue={defaultValue}
isError={isError}
isOptional={isOptional}
label={label}
onEnter={onEnter}
style={style}
type={type}
withLabel={withLabel}
/>
);
}
// TODO: Validate that we have actual proper WASM code
private onChange = (value: Uint8Array): void => {
const { onChange } = this.props;
function renderDisabled ({ className, defaultValue, isError, isOptional, label, onEnter, style, type, withLabel }: Props): React.ReactNode {
return (
<Bytes
className={className}
defaultValue={defaultValue}
isError={isError}
isOptional={isOptional}
label={label}
onEnter={onEnter}
style={style}
type={type}
withLabel={withLabel}
/>
);
}
// TODO: Validate that we have actual proper WASM code
function onChange ({ onChange }: Props): (_: Uint8Array) => void {
return function (value: Uint8Array): void {
onChange && onChange({
isValid: value.length !== 0,
value
});
}
};
}
export default function Code (props: Props): React.ReactElement<Props> {
const { className, defaultValue, isDisabled, isError, label, style, withLabel } = props;
if (isDisabled) {
return (
<>
{renderDisabled(props)}
</>
);
}
return (
<BytesFile
className={className}
defaultValue={defaultValue}
isError={isError}
label={label}
onChange={onChange(props)}
style={style}
withLabel={withLabel}
/>
);
}

61
packages/react-params/src/Param/Data.tsx
View File

@ -9,41 +9,40 @@ import { Input } from '@polkadot/react-components';
import Bare from './Bare';
export default class Data extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = this.props;
const defaultValue = value
? (value.toHex ? value.toHex() : value)
: '';
return (
<Bare
className={className}
style={style}
>
<Input
className='full'
defaultValue={defaultValue}
isDisabled={isDisabled}
isError={isError}
label={label}
onChange={this.onChange}
onEnter={onEnter}
placeholder='Hex data'
type='text'
withLabel={withLabel}
/>
</Bare>
);
}
private onChange = (value: string): void => {
const { onChange } = this.props;
function onChange ({ onChange }: Props): (_: string) => void {
return function (value: string): void {
const isValid = value.length !== 0;
onChange && onChange({
isValid,
value
});
}
};
}
export default function Data (props: Props): React.ReactElement<Props> {
const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = props;
const defaultValue = value
? (value.toHex ? value.toHex() : value)
: '';
return (
<Bare
className={className}
style={style}
>
<Input
className='full'
defaultValue={defaultValue}
isDisabled={isDisabled}
isError={isError}
label={label}
onChange={onChange(props)}
onEnter={onEnter}
placeholder='Hex data'
type='text'
withLabel={withLabel}
/>
</Bare>
);
}

38
packages/react-params/src/Param/File.tsx
View File

@ -19,25 +19,21 @@ interface Props extends BareProps {
withLabel?: boolean;
}
export default class File extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, isDisabled, isError = false, label, onChange, placeholder, style, withLabel } = this.props;
return (
<Bare
className={className}
style={style}
>
<InputFile
isDisabled={isDisabled}
isError={isError}
label={label}
onChange={onChange}
placeholder={placeholder}
withEllipsis
withLabel={withLabel}
/>
</Bare>
);
}
export default function File ({ className, isDisabled, isError = false, label, onChange, placeholder, style, withLabel }: Props): React.ReactElement<Props> {
return (
<Bare
className={className}
style={style}
>
<InputFile
isDisabled={isDisabled}
isError={isError}
label={label}
onChange={onChange}
placeholder={placeholder}
withEllipsis
withLabel={withLabel}
/>
</Bare>
);
}

40
packages/react-params/src/Param/Hash.tsx
View File

@ -8,26 +8,22 @@ import React from 'react';
import BaseBytes from './BaseBytes';
export default class Hash extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, defaultValue, isDisabled, isError, isOptional, label, name, onChange, onEnter, style, type, withLabel } = this.props;
return (
<BaseBytes
className={className}
defaultValue={defaultValue}
isDisabled={isDisabled}
isError={isError}
isOptional={isOptional}
label={label}
length={32}
name={name}
onChange={onChange}
onEnter={onEnter}
style={style}
type={type}
withLabel={withLabel}
/>
);
}
export default function Hash ({ className, defaultValue, isDisabled, isError, isOptional, label, name, onChange, onEnter, style, type, withLabel }: Props): React.ReactElement<Props> {
return (
<BaseBytes
className={className}
defaultValue={defaultValue}
isDisabled={isDisabled}
isError={isError}
isOptional={isOptional}
label={label}
length={32}
name={name}
onChange={onChange}
onEnter={onEnter}
style={style}
type={type}
withLabel={withLabel}
/>
);
}

100
packages/react-params/src/Param/Moment.tsx
View File

@ -9,54 +9,54 @@ import { Static } from '@polkadot/react-components';
import Amount from './Amount';
export default class Code extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, defaultValue, isDisabled, isError, label, onEnter, style, type, withLabel } = this.props;
if (isDisabled) {
return this.renderDisabled();
}
return (
<Amount
className={className}
defaultValue={defaultValue}
isDisabled={isDisabled}
isOptional={false}
isError={isError}
label={label}
onChange={this.onChange}
onEnter={onEnter}
style={style}
type={type}
withLabel={withLabel}
/>
);
}
private renderDisabled (): React.ReactNode {
const { className, defaultValue, isError, label, style, withLabel } = this.props;
return (
<Static
className={className}
defaultValue={
(defaultValue && defaultValue.value)
? defaultValue.value.toString()
: ''
}
isError={isError}
label={label}
style={style}
withLabel={withLabel}
/>
);
}
// TODO: Validate that we have actual proper WASM code
private onChange = (value: RawParamOnChangeValue): void => {
const { onChange } = this.props;
onChange && onChange(value);
}
function renderDisabled ({ className, defaultValue, isError, label, style, withLabel }: Props): React.ReactNode {
return (
<Static
className={className}
defaultValue={
(defaultValue && defaultValue.value)
? defaultValue.value.toString()
: ''
}
isError={isError}
label={label}
style={style}
withLabel={withLabel}
/>
);
}
// TODO: Validate that we have actual proper WASM code
function onChange ({ onChange }: Props): (_: RawParamOnChangeValue) => void {
return function (value: RawParamOnChangeValue): void {
onChange && onChange(value);
};
}
export default function Code (props: Props): React.ReactNode {
const { className, defaultValue, isDisabled, isError, label, onEnter, style, type, withLabel } = props;
if (isDisabled) {
return (
<>
{renderDisabled(props)}
</>
);
}
return (
<Amount
className={className}
defaultValue={defaultValue}
isDisabled={isDisabled}
isOptional={false}
isError={isError}
label={label}
onChange={onChange(props)}
onEnter={onEnter}
style={style}
type={type}
withLabel={withLabel}
/>
);
}

44
packages/react-params/src/Param/Proposal.tsx
View File

@ -13,31 +13,29 @@ import { classes } from '@polkadot/react-components/util';
import Bare from './Bare';
import Unknown from './Unknown';
export default class Proposal extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, defaultValue: { value }, isDisabled, label, style, withLabel } = this.props;
if (!isDisabled) {
return (
<Unknown {...this.props} />
);
}
const proposal = value as Extrinsic;
const { method, section } = GenericCall.findFunction(proposal.callIndex);
export default function Proposal (props: Props): React.ReactElement<Props> {
const { className, defaultValue: { value }, isDisabled, label, style, withLabel } = props;
if (!isDisabled) {
return (
<Bare>
<Static
className={classes(className, 'full')}
label={label}
style={style}
withLabel={withLabel}
>
{section}.{method}
</Static>
<Call value={proposal} />
</Bare>
<Unknown {...props} />
);
}
const proposal = value as Extrinsic;
const { method, section } = GenericCall.findFunction(proposal.callIndex);
return (
<Bare>
<Static
className={classes(className, 'full')}
label={label}
style={style}
withLabel={withLabel}
>
{section}.{method}
</Static>
<Call value={proposal} />
</Bare>
);
}

31
packages/react-params/src/Param/Static.tsx
View File

@ -17,24 +17,21 @@ interface Props extends BareProps, WithTranslation {
withLabel?: boolean;
}
class StaticParam extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { asHex, className, defaultValue, label, style, t } = this.props;
const value = defaultValue && defaultValue.value && defaultValue.value[asHex ? 'toHex' : 'toString']();
function StaticParam ({ asHex, className, defaultValue, label, style, t }: Props): React.ReactElement<Props> {
const value = defaultValue && defaultValue.value && defaultValue.value[asHex ? 'toHex' : 'toString']();
return (
<Bare
className={className}
style={style}
>
<Static
className='full'
label={label}
value={value || t('empty')}
/>
</Bare>
);
}
return (
<Bare
className={className}
style={style}
>
<Static
className='full'
label={label}
value={value || t('empty')}
/>
</Bare>
);
}
export default translate(StaticParam);

57
packages/react-params/src/Param/Text.tsx
View File

@ -9,39 +9,38 @@ import { Input } from '@polkadot/react-components';
import Bare from './Bare';
export default class Text extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = this.props;
const defaultValue = (value || '').toString();
return (
<Bare
className={className}
style={style}
>
<Input
className='full'
defaultValue={defaultValue}
isDisabled={isDisabled}
isError={isError}
label={label}
onChange={this.onChange}
onEnter={onEnter}
placeholder='<any string>'
type='text'
withLabel={withLabel}
/>
</Bare>
);
}
private onChange = (value: string): void => {
const { onChange } = this.props;
function onChange ({ onChange }: Props): (_: string) => void {
return function (value: string): void {
const isValid = value.length !== 0;
onChange && onChange({
isValid,
value
});
}
};
}
export default function Text (props: Props): React.ReactNode {
const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = props;
const defaultValue = (value || '').toString();
return (
<Bare
className={className}
style={style}
>
<Input
className='full'
defaultValue={defaultValue}
isDisabled={isDisabled}
isError={isError}
label={label}
onChange={onChange(props)}
onEnter={onEnter}
placeholder='<any string>'
type='text'
withLabel={withLabel}
/>
</Bare>
);
}

48
packages/react-params/src/Param/Unknown.tsx
View File

@ -14,31 +14,29 @@ interface Props extends BareProps {
withLabel?: boolean;
}
export default class Unknown extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, defaultValue, isDisabled, isError, isOptional, label, name, onChange, onEnter, style, type } = this.props;
export default function Unknown (props: Props): React.ReactElement<Props> {
const { className, defaultValue, isDisabled, isError, isOptional, label, name, onChange, onEnter, style, type } = props;
if (isDisabled) {
return <Static {...this.props} />;
}
return (
<BaseBytes
asHex
className={className}
defaultValue={defaultValue}
isDisabled={isDisabled}
isError={isError}
isOptional={isOptional}
label={label}
length={-1}
name={name}
onChange={onChange}
onEnter={onEnter}
style={style}
type={type}
withLength={false}
/>
);
if (isDisabled) {
return <Static {...props} />;
}
return (
<BaseBytes
asHex
className={className}
defaultValue={defaultValue}
isDisabled={isDisabled}
isError={isError}
isOptional={isOptional}
label={label}
length={-1}
name={name}
onChange={onChange}
onEnter={onEnter}
style={style}
type={type}
withLength={false}
/>
);
}

62
packages/react-params/src/Param/Vote.tsx
View File

@ -16,40 +16,38 @@ const options = [
{ text: 'Aye', value: -1 }
];
export default class Vote extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = this.props;
const defaultValue = value instanceof BN
? value.toNumber()
: value instanceof GenericVote
? (value.isAye ? -1 : 0)
: value as number;
return (
<Bare
className={className}
style={style}
>
<Dropdown
className='full'
defaultValue={defaultValue}
isDisabled={isDisabled}
isError={isError}
label={label}
options={options}
onChange={this.onChange}
withLabel={withLabel}
/>
</Bare>
);
}
private onChange = (value: number): void => {
const { onChange } = this.props;
function onChange ({ onChange }: Props): (_: number) => void {
return function (value: number): void {
onChange && onChange({
isValid: true,
value
});
}
};
}
export default function Vote (props: Props): React.ReactElement<Props> {
const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = props;
const defaultValue = value instanceof BN
? value.toNumber()
: value instanceof GenericVote
? (value.isAye ? -1 : 0)
: value as number;
return (
<Bare
className={className}
style={style}
>
<Dropdown
className='full'
defaultValue={defaultValue}
isDisabled={isDisabled}
isError={isError}
label={label}
options={options}
onChange={onChange(props)}
withLabel={withLabel}
/>
</Bare>
);
}

58
packages/react-params/src/Param/VoteThreshold.tsx
View File

@ -25,38 +25,36 @@ export const textMap = options.reduce((textMap, { text, value }): TextMap => {
return textMap;
}, {} as unknown as TextMap);
export default class VoteThresholdParam extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = this.props;
const defaultValue = value instanceof ClassOf('VoteThreshold')
? value.toNumber()
: bnToBn(value as number).toNumber();
return (
<Bare
className={className}
style={style}
>
<Dropdown
className='full'
defaultValue={defaultValue}
isDisabled={isDisabled}
isError={isError}
label={label}
options={options}
onChange={this.onChange}
withLabel={withLabel}
/>
</Bare>
);
}
private onChange = (value: number): void => {
const { onChange } = this.props;
function onChange ({ onChange }: Props): (_: number) => void {
return function (value: number): void {
onChange && onChange({
isValid: true,
value
});
}
};
}
export default function VoteThresholdParam (props: Props): React.ReactElement<Props> {
const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = props;
const defaultValue = value instanceof ClassOf('VoteThreshold')
? value.toNumber()
: bnToBn(value as number).toNumber();
return (
<Bare
className={className}
style={style}
>
<Dropdown
className='full'
defaultValue={defaultValue}
isDisabled={isDisabled}
isError={isError}
label={label}
options={options}
onChange={onChange(props)}
withLabel={withLabel}
/>
</Bare>
);
}

31
packages/react-query/src/AccountIndex.tsx
View File

@ -16,24 +16,21 @@ interface Props extends BareProps, CallProps {
accounts_idAndIndex?: [AccountId?, AccountIndex?];
}
export class AccountIndexDisplay extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { children, className, label = '', style, accounts_idAndIndex = [] } = this.props;
const [, accountIndex] = accounts_idAndIndex;
export function AccountIndexDisplay ({ children, className, label = '', style, accounts_idAndIndex = [] }: Props): React.ReactElement<Props> {
const [, accountIndex] = accounts_idAndIndex;
return (
<div
className={className}
style={style}
>
{label}{
accountIndex
? accountIndex.toString()
: '-'
}{children}
</div>
);
}
return (
<div
className={className}
style={style}
>
{label}{
accountIndex
? accountIndex.toString()
: '-'
}{children}
</div>
);
}
export default withCalls<Props>(

24
packages/react-query/src/Available.tsx
View File

@ -18,20 +18,16 @@ interface Props extends BareProps, CallProps {
params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
}
export class AvailableDisplay extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { balances_all, children, className, label = '' } = this.props;
return (
<div className={className}>
{label}{
balances_all
? formatBalance(balances_all.availableBalance)
: '0'
}{children}
</div>
);
}
export function AvailableDisplay ({ balances_all, children, className, label = '' }: Props): React.ReactElement<Props> {
return (
<div className={className}>
{label}{
balances_all
? formatBalance(balances_all.availableBalance)
: '0'
}{children}
</div>
);
}
export default withCalls<Props>(

24
packages/react-query/src/Balance.tsx
View File

@ -19,20 +19,16 @@ interface Props extends BareProps, CallProps {
balances_all?: DerivedBalances;
}
export class BalanceDisplay extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { children, className, label = '', balances_all } = this.props;
return (
<div className={className}>
{label}{
balances_all
? formatBalance(balances_all.freeBalance)
: '0'
}{children}
</div>
);
}
export function BalanceDisplay ({ children, className, label = '', balances_all }: Props): React.ReactElement<Props> {
return (
<div className={className}>
{label}{
balances_all
? formatBalance(balances_all.freeBalance)
: '0'
}{children}
</div>
);
}
export default withCalls<Props>(

30
packages/react-query/src/BestFinalized.tsx
View File

@ -16,23 +16,19 @@ interface Props extends BareProps, CallProps {
chain_bestNumberFinalized?: BlockNumber;
}
export class BestFinalized extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { children, className, label = '', style, chain_bestNumberFinalized } = this.props;
return (
<div
className={className}
style={style}
>
{label}{
chain_bestNumberFinalized
? formatNumber(chain_bestNumberFinalized)
: '-'
}{children}
</div>
);
}
export function BestFinalized ({ children, className, label = '', style, chain_bestNumberFinalized }: Props): React.ReactElement<Props> {
return (
<div
className={className}
style={style}
>
{label}{
chain_bestNumberFinalized
? formatNumber(chain_bestNumberFinalized)
: '-'
}{children}
</div>
);
}
export default withCalls<Props>('derive.chain.bestNumberFinalized')(BestFinalized);

30
packages/react-query/src/BestNumber.tsx
View File

@ -16,23 +16,19 @@ interface Props extends BareProps, CallProps {
chain_bestNumber?: BlockNumber;
}
export class BestNumber extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { children, className, label = '', style, chain_bestNumber } = this.props;
return (
<div
className={className}
style={style}
>
{label}{
chain_bestNumber
? formatNumber(chain_bestNumber)
: '-'
}{children}
</div>
);
}
export function BestNumber ({ children, className, label = '', style, chain_bestNumber }: Props): React.ReactElement<Props> {
return (
<div
className={className}
style={style}
>
{label}{
chain_bestNumber
? formatNumber(chain_bestNumber)
: '-'
}{children}
</div>
);
}
export default withCalls<Props>('derive.chain.bestNumber')(BestNumber);

24
packages/react-query/src/Bonded.tsx
View File

@ -18,20 +18,16 @@ interface Props extends BareProps, CallProps {
staking_ledger?: StakingLedger | null;
}
export class BondedDisplay extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { children, className, label = '', staking_ledger } = this.props;
return (
<div className={className}>
{label}{
staking_ledger
? formatBalance(staking_ledger.active)
: '0'
}{children}
</div>
);
}
export function BondedDisplay ({ children, className, label = '', staking_ledger }: Props): React.ReactElement<Props> {
return (
<div className={className}>
{label}{
staking_ledger
? formatBalance(staking_ledger.active)
: '0'
}{children}
</div>
);
}
export default withCalls<Props>(

22
packages/react-query/src/Chain.tsx
View File

@ -15,19 +15,15 @@ interface Props extends BareProps, CallProps {
system_chain?: Text;
}
export class Chain extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { children, className, label = '', style, system_chain = 'unknown' } = this.props;
return (
<div
className={className}
style={style}
>
{label}{system_chain.toString()}{children}
</div>
);
}
export function Chain ({ children, className, label = '', style, system_chain = new Text('unknown') }: Props): React.ReactElement<Props> {
return (
<div
className={className}
style={style}
>
{label}{system_chain.toString()}{children}
</div>
);
}
export default withCalls<Props>('rpc.system.chain')(Chain);

22
packages/react-query/src/NodeName.tsx
View File

@ -15,19 +15,15 @@ interface Props extends BareProps, CallProps {
system_name?: Text;
}
export class NodeName extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { children, className, label = '', style, system_name = 'unknown' } = this.props;
return (
<div
className={className}
style={style}
>
{label}{system_name.toString()}{children}
</div>
);
}
export function NodeName ({ children, className, label = '', style, system_name = new Text('unknown') }: Props): React.ReactElement<Props> {
return (
<div
className={className}
style={style}
>
{label}{system_name.toString()}{children}
</div>
);
}
export default withCalls<Props>('rpc.system.name')(NodeName);

22
packages/react-query/src/NodeVersion.tsx
View File

@ -15,19 +15,15 @@ interface Props extends BareProps, CallProps {
system_version?: Text;
}
export class NodeVersion extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { children, className, label = '', style, system_version = '-' } = this.props;
return (
<div
className={className}
style={style}
>
{label}{system_version.toString()}{children}
</div>
);
}
export function NodeVersion ({ children, className, label = '', style, system_version = new Text('-') }: Props): React.ReactElement<Props> {
return (
<div
className={className}
style={style}
>
{label}{system_version.toString()}{children}
</div>
);
}
export default withCalls<Props>('rpc.system.version')(NodeVersion);

24
packages/react-query/src/Nonce.tsx
View File

@ -18,20 +18,16 @@ interface Props extends BareProps, CallProps {
params?: string;
}
export class Nonce extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { accountNonce, children, className, label = '' } = this.props;
return (
<div className={className}>
{label}{
accountNonce
? formatNumber(accountNonce)
: '0'
}{children}
</div>
);
}
export function Nonce ({ accountNonce, children, className, label = '' }: Props): React.ReactElement<Props> {
return (
<div className={className}>
{label}{
accountNonce
? formatNumber(accountNonce)
: '0'
}{children}
</div>
);
}
export default withCalls<Props>(

31
packages/react-query/src/TimeNow.tsx
View File

@ -17,24 +17,21 @@ interface Props extends BareProps, CallProps {
timestamp_now?: Moment;
}
export class TimeNow extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { children, className, isSubstrateV2, label = '', style, timestamp_now } = this.props;
const value = isSubstrateV2 || !timestamp_now
? timestamp_now
: timestamp_now.muln(1000); // for 1.x, timestamps are in seconds
export function TimeNow ({ children, className, isSubstrateV2, label = '', style, timestamp_now }: Props): React.ReactElement<Props> {
const value = isSubstrateV2 || !timestamp_now
? timestamp_now
: timestamp_now.muln(1000); // for 1.x, timestamps are in seconds
return (
<div
className={className}
style={style}
>
{label}
<Elapsed value={value} />
{children}
</div>
);
}
return (
<div
className={className}
style={style}
>
{label}
<Elapsed value={value} />
{children}
</div>
);
}
export default withCalls<Props>('query.timestamp.now')(TimeNow);

33
packages/react-query/src/TimePeriod.tsx
View File

@ -17,24 +17,21 @@ interface Props extends BareProps, CallProps {
timestamp_minimumPeriod?: Moment;
}
export class TimePeriod extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { babe_expectedBlockTime, children, className, label = '', style, timestamp_minimumPeriod } = this.props;
return (
<div
className={className}
style={style}
>
{label}{
babe_expectedBlockTime
? `${formatNumber(babe_expectedBlockTime.toNumber() / 1000)}s`
: timestamp_minimumPeriod
? `${formatNumber(timestamp_minimumPeriod.toNumber() * 2)}s`
: '-'
}{children}
</div>
);
}
export function TimePeriod ({ babe_expectedBlockTime, children, className, label = '', style, timestamp_minimumPeriod }: Props): React.ReactElement<Props> {
return (
<div
className={className}
style={style}
>
{label}{
babe_expectedBlockTime
? `${formatNumber(babe_expectedBlockTime.toNumber() / 1000)}s`
: timestamp_minimumPeriod
? `${formatNumber(timestamp_minimumPeriod.toNumber() * 2)}s`
: '-'
}{children}
</div>
);
}
// NOTE we are not combining this into one with a fallback, it becomes slightly tricky.

35
packages/react-query/src/TotalIssuance.tsx
View File

@ -16,26 +16,23 @@ interface Props extends BareProps, CallProps {
balances_totalIssuance?: Balance;
}
export class TotalIssuance extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { children, className, label = '', style, balances_totalIssuance } = this.props;
const value = balances_totalIssuance
? balances_totalIssuance.toString()
: null;
export function TotalIssuance ({ children, className, label = '', style, balances_totalIssuance }: Props): React.ReactElement<Props> {
const value = balances_totalIssuance
? balances_totalIssuance.toString()
: null;
return (
<div
className={className}
style={style}
>
{label}{
value
? `${formatBalance(value, false)}${formatBalance.calcSi(value).value}`
: '-'
}{children}
</div>
);
}
return (
<div
className={className}
style={style}
>
{label}{
value
? `${formatBalance(value, false)}${formatBalance.calcSi(value).value}`
: '-'
}{children}
</div>
);
}
export default withCalls<Props>('query.balances.totalIssuance')(TotalIssuance);

106
packages/react-signer/src/Transaction.tsx
View File

@ -18,70 +18,64 @@ interface Props extends I18nProps {
value: QueueTx;
}
class Transaction extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { children, value: { extrinsic } } = this.props;
if (!extrinsic) {
return null;
}
const { meta, method, section } = GenericCall.findFunction(extrinsic.callIndex);
return (
<>
<Modal.Header>
{section}.{method}
<label><details><summary>{
meta && meta.documentation
? meta.documentation.join(' ')
: ''
}</summary></details></label>
</Modal.Header>
<Modal.Content className='ui--signer-Signer-Content'>
{this.renderAccount()}
<Call value={extrinsic} />
{this.renderChecks()}
{children}
</Modal.Content>
</>
);
function renderAccount ({ t, value: { accountId, isUnsigned } }: Props): React.ReactNode {
if (isUnsigned || !accountId) {
return null;
}
private renderAccount (): React.ReactNode {
const { t, value: { accountId, isUnsigned } } = this.props;
return (
<InputAddress
className='full'
defaultValue={accountId}
isDisabled
isInput
label={t('sending from my account')}
withLabel
/>
);
}
if (isUnsigned || !accountId) {
return null;
}
return (
<InputAddress
className='full'
defaultValue={accountId}
isDisabled
isInput
label={t('sending from my account')}
withLabel
/>
);
function renderChecks ({ isSendable, value: { accountId, extrinsic, isUnsigned } }: Props): React.ReactNode {
if (isUnsigned) {
return null;
}
private renderChecks (): React.ReactNode {
const { isSendable, value: { accountId, extrinsic, isUnsigned } } = this.props;
return (
<Checks
accountId={accountId}
extrinsic={extrinsic}
isSendable={isSendable}
/>
);
}
if (isUnsigned) {
return null;
}
function Transaction (props: Props): React.ReactElement<Props> | null {
const { children, value: { extrinsic } } = props;
return (
<Checks
accountId={accountId}
extrinsic={extrinsic}
isSendable={isSendable}
/>
);
if (!extrinsic) {
return null;
}
const { meta, method, section } = GenericCall.findFunction(extrinsic.callIndex);
return (
<>
<Modal.Header>
{section}.{method}
<label><details><summary>{
meta && meta.documentation
? meta.documentation.join(' ')
: ''
}</summary></details></label>
</Modal.Header>
<Modal.Content className='ui--signer-Signer-Content'>
{renderAccount(props)}
<Call value={extrinsic} />
{renderChecks(props)}
{children}
</Modal.Content>
</>
);
}
export default translate(Transaction);

38
packages/react-signer/src/index.tsx
View File

@ -16,25 +16,21 @@ interface Props extends BareProps {
children: React.ReactNode;
}
export default class Signer extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { children, className, style } = this.props;
return (
<>
{children}
<QueueConsumer>
{({ txqueue, queueSetTxStatus }: QueueProps): React.ReactNode => (
<Modal
className={className}
key='signer-modal'
queue={txqueue}
queueSetTxStatus={queueSetTxStatus}
style={style}
/>
)}
</QueueConsumer>
</>
);
}
export default function Signer ({ children, className, style }: Props): React.ReactElement<Props> {
return (
<>
{children}
<QueueConsumer>
{({ txqueue, queueSetTxStatus }: QueueProps): React.ReactNode => (
<Modal
className={className}
key='signer-modal'
queue={txqueue}
queueSetTxStatus={queueSetTxStatus}
style={style}
/>
)}
</QueueConsumer>
</>
);
}