From 144c8bbd850c1c690528e97211056b4ca8aab8ac Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Mon, 15 Jul 2019 23:17:19 +0200 Subject: [PATCH] eslint fixes (round 2) (#1401) * eslint fixes (round 2) * ui-params converted * Tiny. * Classes fix * Some type cleanups * Cleanup traling , * < 1k * Small additions * <750 * Mini updates modifiers * More ui-app cleanups * 312 problems (182 errors, 130 warnings) --- packages/app-contracts/src/store.ts | 2 +- packages/app-council/src/Motions/Propose.tsx | 47 ++++++----- .../app-democracy/src/Overview/Referendum.tsx | 3 +- packages/app-explorer/src/BestHash.tsx | 3 +- packages/app-explorer/src/BlockInfo/Logs.tsx | 30 +++---- .../app-explorer/src/NodeInfo/Summary.tsx | 2 +- packages/app-explorer/src/NodeInfo/index.tsx | 11 +-- packages/app-explorer/src/index.tsx | 3 +- packages/app-extrinsics/src/Balance.tsx | 1 + packages/app-extrinsics/src/Selection.tsx | 17 ++-- packages/app-js/src/ActionButtons.tsx | 2 +- packages/app-js/src/Playground.tsx | 6 +- .../src/Actions/Account/BondExtra.tsx | 9 +- .../Account/InputValidationController.tsx | 2 +- .../Account/InputValidationSession.tsx | 2 +- .../InputValidationUnstakeThreshold.tsx | 2 +- .../src/Actions/Account/Nominate.tsx | 4 +- .../src/Actions/Account/SetSessionAccount.tsx | 6 +- .../src/Actions/Account/Unbond.tsx | 9 +- .../src/Actions/Account/Validate.tsx | 2 +- packages/app-staking/src/Actions/NewStake.tsx | 12 +-- packages/app-storage/src/Query.tsx | 6 +- .../app-storage/src/Selection/Modules.tsx | 19 ++--- packages/app-sudo/src/SetKey.tsx | 68 ++++++++------- packages/app-sudo/src/Sudo.tsx | 12 +-- packages/app-toolbox/src/Hash.tsx | 4 +- packages/app-toolbox/src/Rpc/Account.tsx | 2 +- packages/app-toolbox/src/Sign.tsx | 12 +-- packages/app-toolbox/src/Unlock.tsx | 4 +- packages/app-toolbox/src/index.tsx | 5 +- .../app-treasury/src/Overview/Approve.tsx | 16 ++-- .../app-treasury/src/Overview/Proposals.tsx | 16 ++-- .../app-treasury/src/Overview/Propose.tsx | 7 +- packages/app-treasury/src/Settings.tsx | 14 ++-- packages/apps/src/Apps.tsx | 18 ++-- packages/apps/src/Content/NotFound.tsx | 4 +- packages/apps/src/Content/index.tsx | 6 +- packages/apps/src/SideBar/Item.tsx | 4 +- packages/apps/src/SideBar/NodeInfo.tsx | 3 +- packages/apps/src/SideBar/logos.ts | 2 +- packages/apps/src/TopBar.tsx | 6 +- packages/apps/src/index.tsx | 2 +- packages/apps/src/overlays/Accounts.tsx | 6 +- packages/apps/src/overlays/Connecting.tsx | 4 +- packages/ui-api/src/ApiContext.ts | 2 +- packages/ui-api/src/transform/echo.ts | 1 + .../ui-api/src/util/intervalObservable.ts | 5 +- packages/ui-api/src/util/isEqual.ts | 2 +- packages/ui-api/src/util/triggerChange.ts | 2 +- packages/ui-api/src/with/api.tsx | 4 +- packages/ui-api/src/with/callDiv.tsx | 6 +- packages/ui-api/src/with/observable.tsx | 12 +-- packages/ui-api/src/with/types.ts | 40 ++++----- packages/ui-api/test/enzyme.js | 1 + packages/ui-api/test/observable.js | 1 + packages/ui-app/src/ActionItem.tsx | 18 ++-- packages/ui-app/src/AddressCard.tsx | 6 +- packages/ui-app/src/AddressInfo.tsx | 83 +++++++++---------- packages/ui-app/src/AddressMini.tsx | 34 ++++---- packages/ui-app/src/AddressRow.tsx | 25 +++--- packages/ui-app/src/Available.tsx | 8 +- packages/ui-app/src/Balance.tsx | 20 ++--- packages/ui-app/src/Bonded.tsx | 20 ++--- packages/ui-app/src/Bubble.tsx | 12 +-- packages/ui-app/src/Card.tsx | 8 +- packages/ui-app/src/CardGrid.tsx | 10 +-- packages/ui-app/src/CardSummary.tsx | 28 +++---- packages/ui-app/src/CodeRow.tsx | 21 ++--- packages/ui-app/src/Collection.tsx | 30 +++---- packages/ui-app/src/Columar.tsx | 8 +- packages/ui-app/src/Column.tsx | 2 +- packages/ui-app/src/CopyButton.tsx | 16 ++-- packages/ui-app/src/CryptoType.tsx | 8 +- packages/ui-app/src/Editor.tsx | 19 +++-- packages/ui-app/src/Event.tsx | 15 ++-- packages/ui-app/src/Extrinsic.tsx | 12 +-- packages/ui-app/src/FilterOverlay.tsx | 6 +- packages/ui-app/src/Forget.tsx | 13 +-- packages/ui-app/src/HelpOverlay.tsx | 4 +- packages/ui-app/src/IdentityIcon.tsx | 7 +- packages/ui-app/src/InfoForInput.tsx | 8 +- packages/ui-app/src/InputAddress.tsx | 50 +++++------ packages/ui-app/src/InputBalance.tsx | 32 +++---- packages/ui-app/src/InputBalanceBonded.tsx | 12 +-- packages/ui-app/src/InputError.tsx | 6 +- .../src/InputExtrinsic/SelectMethod.tsx | 14 ++-- .../src/InputExtrinsic/SelectSection.tsx | 14 ++-- packages/ui-app/src/InputExtrinsic/index.tsx | 8 +- .../src/InputExtrinsic/options/method.tsx | 8 +- .../src/InputExtrinsic/options/section.ts | 4 +- packages/ui-app/src/InputFile.tsx | 17 ++-- packages/ui-app/src/InputNumber.tsx | 49 +++++------ packages/ui-app/src/InputRpc/SelectMethod.tsx | 12 +-- .../ui-app/src/InputRpc/SelectSection.tsx | 14 ++-- .../ui-app/src/InputStorage/SelectKey.tsx | 8 +- .../ui-app/src/InputStorage/SelectSection.tsx | 14 ++-- packages/ui-app/src/InputTags.tsx | 4 +- packages/ui-app/src/Inset.tsx | 32 +++---- packages/ui-app/src/Label.tsx | 10 +-- packages/ui-app/src/LabelHelp.tsx | 12 +-- packages/ui-app/src/Labelled.tsx | 20 ++--- packages/ui-app/src/LinkPolkascan.tsx | 20 ++--- packages/ui-app/src/Menu.tsx | 2 +- packages/ui-app/src/Messages.tsx | 10 +-- packages/ui-app/src/Modal.tsx | 15 ++-- packages/ui-app/src/Nonce.tsx | 20 ++--- packages/ui-app/src/Output.tsx | 22 ++--- packages/ui-app/src/Params/Call.tsx | 3 +- packages/ui-app/src/Params/Extrinsic.tsx | 22 ++--- packages/ui-app/src/Params/Proposal.tsx | 2 +- packages/ui-app/src/Params/index.ts | 4 +- packages/ui-app/src/Password.tsx | 36 ++++---- packages/ui-app/src/Progress.tsx | 12 +-- packages/ui-app/src/ProposedAction.tsx | 20 ++--- packages/ui-app/src/RecentlyOffline.tsx | 10 +-- packages/ui-app/src/Row.tsx | 20 ++--- packages/ui-app/src/Static.tsx | 22 ++--- packages/ui-app/src/Status/Context.ts | 6 +- packages/ui-app/src/Status/Queue.tsx | 46 +++++----- packages/ui-app/src/Status/index.tsx | 12 +-- packages/ui-app/src/SummaryBox.tsx | 42 +++++----- packages/ui-app/src/Tabs.tsx | 38 ++++----- packages/ui-app/src/Toggle.tsx | 10 +-- packages/ui-app/src/Tooltip.tsx | 25 +++--- packages/ui-app/src/TreasuryProposal.tsx | 36 ++++---- packages/ui-app/src/TxButton.tsx | 16 ++-- packages/ui-app/src/TxComponent.tsx | 6 +- packages/ui-app/src/TxModal.tsx | 71 +++++++++------- packages/ui-app/src/Voting.tsx | 23 ++--- packages/ui-app/src/i18n.ts | 4 +- packages/ui-app/src/types.ts | 20 ++--- packages/ui-app/src/util/classes.ts | 4 +- .../ui-app/src/util/isTreasuryProposalVote.ts | 6 +- packages/ui-app/src/util/toAddress.ts | 7 +- packages/ui-params/src/Param/Bare.tsx | 6 +- packages/ui-params/src/Param/Base.tsx | 14 ++-- packages/ui-params/src/Param/BaseBytes.tsx | 16 ++-- packages/ui-params/src/Param/Bytes.tsx | 18 ++-- packages/ui-params/src/Param/Code.tsx | 2 +- packages/ui-params/src/Param/File.tsx | 18 ++-- packages/ui-params/src/Param/KeyValue.tsx | 32 +++---- .../ui-params/src/Param/KeyValueArray.tsx | 8 +- packages/ui-params/src/Param/Moment.tsx | 2 +- packages/ui-params/src/Param/Null.tsx | 2 +- packages/ui-params/src/Param/Static.tsx | 4 +- packages/ui-params/src/Param/Struct.tsx | 18 ++-- packages/ui-params/src/Param/Tuple.tsx | 26 +++--- packages/ui-params/src/Param/Unknown.tsx | 8 +- .../ui-params/src/Param/VoteThreshold.tsx | 6 +- 149 files changed, 1052 insertions(+), 1012 deletions(-) diff --git a/packages/app-contracts/src/store.ts b/packages/app-contracts/src/store.ts index b723de4623..e82fe68fc9 100644 --- a/packages/app-contracts/src/store.ts +++ b/packages/app-contracts/src/store.ts @@ -15,7 +15,7 @@ const KEY_CODE = 'code:'; const codeRegex = new RegExp(`^${KEY_CODE}`, ''); class Store extends EventEmitter { - private allCode: { [index: string]: CodeStored } = {}; + private allCode: Record = {}; public get hasCode (): boolean { return Object.keys(this.allCode).length !== 0; diff --git a/packages/app-council/src/Motions/Propose.tsx b/packages/app-council/src/Motions/Propose.tsx index 6be92d03c1..35c71bdef3 100644 --- a/packages/app-council/src/Motions/Propose.tsx +++ b/packages/app-council/src/Motions/Propose.tsx @@ -15,13 +15,13 @@ import { withApi, withCalls, withMulti } from '@polkadot/ui-api'; import translate from '../translate'; type Props = TxModalProps & ApiProps & { - memberCount: number + memberCount: number; }; -type State = TxModalState & { - method: Method | null, - threshold: BN | null -}; +interface State extends TxModalState { + method: Method | null; + threshold: BN | null; +} class Propose extends TxModal { constructor (props: Props) { @@ -35,18 +35,21 @@ class Propose extends TxModal { this.state = this.defaultState; } - static getDerivedStateFromProps ({ memberCount }: Props, { threshold }: State) { + public static getDerivedStateFromProps ({ memberCount }: Props, { threshold }: State): Pick | null { if (!threshold && memberCount > 0) { const simpleMajority = new BN((memberCount / 2) + 1); + return { threshold: simpleMajority }; } + return null; } - headerText = () => this.props.t('Propose a council motion'); + protected headerText = (): string => this.props.t('Propose a council motion'); - txMethod = () => 'collective.propose'; - txParams = () => { + protected txMethod = (): string => 'collective.propose'; + + protected txParams = (): [BN | null, ...Proposal[]] => { const { method, threshold } = this.state; return [ @@ -55,7 +58,7 @@ class Propose extends TxModal { ]; } - isDisabled = () => { + protected isDisabled = (): boolean => { const { memberCount = 0 } = this.props; const { accountId, method, threshold } = this.state; @@ -65,7 +68,7 @@ class Propose extends TxModal { return !accountId || !hasMethod || !hasThreshold; } - renderTrigger = () => { + protected renderTrigger = (): React.ReactNode => { const { t } = this.props; return ( @@ -80,7 +83,7 @@ class Propose extends TxModal { ); } - renderContent = () => { + protected renderContent = (): React.ReactNode => { const { apiDefaultTxSudo, memberCount = 0, t } = this.props; const { threshold } = this.state; @@ -111,12 +114,14 @@ class Propose extends TxModal { ); } - private onChangeThreshold = (threshold?: BN): void => { + private onChangeThreshold = (threshold: BN | null = null): void => { const { memberCount = 0 } = this.props; + if (memberCount > 0 && !this.defaultState.threshold) { this.defaultState.threshold = new BN((memberCount / 2) + 1); } - this.setState({ threshold } as State); + + this.setState({ threshold }); } private onChangeExtrinsic = (method: Method): void => { @@ -124,7 +129,7 @@ class Propose extends TxModal { return; } - this.setState({ method } as State); + this.setState({ method }); } } @@ -133,12 +138,10 @@ export default withMulti( translate, withApi, withCalls( - [ - 'query.elections.members', - { - propName: 'memberCount', - transform: (value: Array) => value.length - } - ] + ['query.elections.members', { + propName: 'memberCount', + transform: (value: any[]): number => + value.length + }] ) ); diff --git a/packages/app-democracy/src/Overview/Referendum.tsx b/packages/app-democracy/src/Overview/Referendum.tsx index 0feb8f22df..4898b450f9 100644 --- a/packages/app-democracy/src/Overview/Referendum.tsx +++ b/packages/app-democracy/src/Overview/Referendum.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/camelcase */ // Copyright 2017-2019 @polkadot/app-democracy authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. @@ -52,7 +53,7 @@ class Referendum extends React.PureComponent { votedTotal: new BN(0) }; - static getDerivedStateFromProps ({ democracy_referendumVotesFor }: Props, prevState: State): State | null { + public static getDerivedStateFromProps ({ democracy_referendumVotesFor }: Props, prevState: State): State | null { if (!democracy_referendumVotesFor) { return null; } diff --git a/packages/app-explorer/src/BestHash.tsx b/packages/app-explorer/src/BestHash.tsx index 9d2bd87d40..b431ab3505 100644 --- a/packages/app-explorer/src/BestHash.tsx +++ b/packages/app-explorer/src/BestHash.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/camelcase */ // Copyright 2017-2019 @polkadot/ui-reactive authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. @@ -26,7 +27,7 @@ class BestHash extends React.PureComponent { chain_subscribeNewHead ? chain_subscribeNewHead.hash.toHex() : undefined - } + } ); } diff --git a/packages/app-explorer/src/BlockInfo/Logs.tsx b/packages/app-explorer/src/BlockInfo/Logs.tsx index 2855aa20de..275917e83d 100644 --- a/packages/app-explorer/src/BlockInfo/Logs.tsx +++ b/packages/app-explorer/src/BlockInfo/Logs.tsx @@ -2,10 +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 { Codec } from '@polkadot/types/types'; import { I18nProps } from '@polkadot/ui-app/types'; import React from 'react'; -import { DigestItem, Struct, Tuple, U8a, Vector, getTypeDef } from '@polkadot/types'; +import { DigestItem, Struct, Tuple, TypeDef, U8a, Vector, getTypeDef } from '@polkadot/types'; import { Column } from '@polkadot/ui-app'; import Params from '@polkadot/ui-params'; @@ -30,7 +31,8 @@ class Logs extends React.PureComponent { ); } - private renderItem = (item: DigestItem, index: number) => { + private renderItem = (item: DigestItem, index: number): React.ReactNode => { + const { t } = this.props; let content: React.ReactNode; if (item.value instanceof Struct) { @@ -55,7 +57,7 @@ class Logs extends React.PureComponent {

{item.type.toString()}

- Details + {t('Details')} {content}
@@ -63,7 +65,7 @@ class Logs extends React.PureComponent { ); } - private formatU8a (value: U8a) { + private formatU8a (value: U8a): React.ReactNode { return ( { ); } - private formatStruct (struct: Struct) { - const types: { [index: string]: string } = struct.Type; - const params = Object.keys(types).map((name) => ({ + private formatStruct (struct: Struct): React.ReactNode { + const types: Record = struct.Type; + const params = Object.keys(types).map((name): { name: string; type: TypeDef } => ({ name, type: getTypeDef(types[name]) })); - const values = struct.toArray().map((value) => ({ + const values = struct.toArray().map((value): { isValid: boolean; value: Codec } => ({ isValid: true, value })); @@ -93,12 +95,12 @@ class Logs extends React.PureComponent { ); } - private formatTuple (tuple: Tuple) { + private formatTuple (tuple: Tuple): React.ReactNode { const types = tuple.Types; - const params = types.map((type) => ({ + const params = types.map((type): { type: TypeDef } => ({ type: getTypeDef(type) })); - const values = tuple.toArray().map((value) => ({ + const values = tuple.toArray().map((value): { isValid: boolean; value: Codec } => ({ isValid: true, value })); @@ -112,13 +114,13 @@ class Logs extends React.PureComponent { ); } - private formatVector (vector: Vector) { + private formatVector (vector: Vector): React.ReactNode { const type = getTypeDef(vector.Type); - const values = vector.toArray().map((value) => ({ + const values = vector.toArray().map((value): { isValid: boolean; value: Codec } => ({ isValid: true, value })); - const params = values.map((_, index) => ({ + const params = values.map((_, index): { name: string; type: TypeDef } => ({ name: `${index}`, type })); diff --git a/packages/app-explorer/src/NodeInfo/Summary.tsx b/packages/app-explorer/src/NodeInfo/Summary.tsx index aba196544e..291c9e7b2a 100644 --- a/packages/app-explorer/src/NodeInfo/Summary.tsx +++ b/packages/app-explorer/src/NodeInfo/Summary.tsx @@ -25,7 +25,7 @@ interface State { class Summary extends React.PureComponent { public state: State = {}; - static getDerivedStateFromProps ({ info = {} }: Props): State | null { + public static getDerivedStateFromProps ({ info = {} }: Props): State | null { if (!info.peers) { return null; } diff --git a/packages/app-explorer/src/NodeInfo/index.tsx b/packages/app-explorer/src/NodeInfo/index.tsx index b1e8c832d2..d4bbdbb1c3 100644 --- a/packages/app-explorer/src/NodeInfo/index.tsx +++ b/packages/app-explorer/src/NodeInfo/index.tsx @@ -29,17 +29,18 @@ interface State { class App extends React.PureComponent { private isActive: boolean = true; + public state: State = { nextRefresh: Date.now() }; - componentDidMount () { - this.getStatus().catch(() => { + public componentDidMount (): void { + this.getStatus().catch((): void => { // ignore }); } - componentWillUnmount () { + public componentWillUnmount (): void { const { timerId } = this.state; this.isActive = false; @@ -69,7 +70,7 @@ class App extends React.PureComponent { ); } - private setInfo (info?: Info) { + private setInfo (info?: Info): void { if (!this.isActive) { return; } @@ -81,7 +82,7 @@ class App extends React.PureComponent { }); } - private getStatus = async () => { + private getStatus = async (): Promise => { const { api } = this.props; try { diff --git a/packages/app-explorer/src/index.tsx b/packages/app-explorer/src/index.tsx index 706103fef8..758ff4aa98 100644 --- a/packages/app-explorer/src/index.tsx +++ b/packages/app-explorer/src/index.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/camelcase */ // Copyright 2017-2019 @polkadot/app-explorer authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. @@ -63,7 +64,7 @@ class ExplorerApp extends React.Component { // assign the events on the index - this way we keep a record of these, even when swapping // tabs withing this app, all the events as received will be shown - static getDerivedStateFromProps ({ system_events = [] }: Props, prevState: State): State | null { + public static getDerivedStateFromProps ({ system_events = [] }: Props, prevState: State): State | null { const prevEventHash = xxhashAsHex(stringToU8a(JSON.stringify(system_events))); if (prevEventHash === prevState.prevEventHash) { diff --git a/packages/app-extrinsics/src/Balance.tsx b/packages/app-extrinsics/src/Balance.tsx index 7957360140..dd48ca817d 100644 --- a/packages/app-extrinsics/src/Balance.tsx +++ b/packages/app-extrinsics/src/Balance.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/camelcase */ // Copyright 2017-2019 @polkadot/ui-reactive authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. diff --git a/packages/app-extrinsics/src/Selection.tsx b/packages/app-extrinsics/src/Selection.tsx index 436fb1a8a8..19b239155c 100644 --- a/packages/app-extrinsics/src/Selection.tsx +++ b/packages/app-extrinsics/src/Selection.tsx @@ -25,15 +25,16 @@ interface State { isValid: boolean; isValidUnsigned: boolean; method: Method | null; - accountNonce: BN; - accountId: string; + accountNonce?: BN; + accountId?: string; } class Selection extends TxComponent { public state: State = { isValid: false, - isValidUnsigned: false - } as State; + isValidUnsigned: false, + method: null + }; public render (): React.ReactNode { const { apiDefaultTxSudo, t } = this.props; @@ -94,7 +95,7 @@ class Selection extends TxComponent { ); } - private nextState (newState: State): void { + private nextState (newState: Partial): void { this.setState( (prevState: State): State => { const { method = prevState.method, accountNonce = prevState.accountNonce, accountId = prevState.accountId } = newState; @@ -116,15 +117,15 @@ class Selection extends TxComponent { } private onChangeExtrinsic = (method: Method | null = null): void => { - this.nextState({ method } as State); + this.nextState({ method }); } private onChangeNonce = (accountNonce: BN = new BN(0)): void => { - this.nextState({ accountNonce } as State); + this.nextState({ accountNonce }); } private onChangeSender = (accountId: string): void => { - this.nextState({ accountId, accountNonce: new BN(0) } as State); + this.nextState({ accountId, accountNonce: new BN(0) }); } private getExtrinsic (): SubmittableExtrinsic | null { diff --git a/packages/app-js/src/ActionButtons.tsx b/packages/app-js/src/ActionButtons.tsx index c8afb644b6..c5b25cd544 100644 --- a/packages/app-js/src/ActionButtons.tsx +++ b/packages/app-js/src/ActionButtons.tsx @@ -38,7 +38,7 @@ class ActionButtons extends React.PureComponent { const { props: { isCustomExample, isRunning, removeSnippet, runJs, stopJs, t }, state: { isOpen, shareText, snippetName } - } = this; + } = this; return (
diff --git a/packages/app-js/src/Playground.tsx b/packages/app-js/src/Playground.tsx index 676a5c1cc3..1a658e3e00 100644 --- a/packages/app-js/src/Playground.tsx +++ b/packages/app-js/src/Playground.tsx @@ -91,7 +91,7 @@ class Playground extends React.PureComponent { // There's a ticket and an ongoing process of updating SUI to the new lifecycle methods (here: componentDidMount). // Please check https://github.com/Semantic-Org/Semantic-UI-React/issues/2732 for details // This needs to change to componentDidMount() as soon as the original MUI component got updated - componentWillMount () { + public componentWillMount (): void { const { match: { params: { base64 } } } = this.props; const sharedExample = base64 ? this.decodeBase64(base64) : undefined; @@ -107,13 +107,13 @@ class Playground extends React.PureComponent { const selected = options.find(option => option.value === localData.selectedValue); - this.setState((prevState: State): State => ({ + this.setState((prevState: State): Pick => ({ customExamples, isCustomExample: (selected && selected.type === 'custom') || false, options, selected: sharedExample || selected || this.snippets[0], sharedExample - }) as State); + })); } public render (): React.ReactNode { diff --git a/packages/app-staking/src/Actions/Account/BondExtra.tsx b/packages/app-staking/src/Actions/Account/BondExtra.tsx index 249ed089e7..d2a54b2819 100644 --- a/packages/app-staking/src/Actions/Account/BondExtra.tsx +++ b/packages/app-staking/src/Actions/Account/BondExtra.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/camelcase */ // Copyright 2017-2019 @polkadot/ui-staking authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. @@ -36,7 +37,7 @@ class BondExtra extends TxComponent { extrinsic: null }; - componentDidUpdate (prevProps: Props, prevState: State) { + public componentDidUpdate (prevProps: Props, prevState: State): void { const { balances_fees } = this.props; const { extrinsic } = this.state; @@ -89,7 +90,7 @@ class BondExtra extends TxComponent { ); } - private renderContent () { + private renderContent (): React.ReactNode { const { stashId, t } = this.props; const { maxBalance } = this.state; const available = {t('available ')}; @@ -138,7 +139,7 @@ class BondExtra extends TxComponent { }); } - private setMaxBalance = () => { + private setMaxBalance = (): void => { const { api, system_accountNonce = ZERO, balances_fees = ZERO_FEES, balances_all = ZERO_BALANCE } = this.props; const { maxAdditional } = this.state; @@ -171,7 +172,7 @@ class BondExtra extends TxComponent { }); } - private onChangeValue = (maxAdditional?: BN) => { + private onChangeValue = (maxAdditional?: BN): void => { this.nextState({ maxAdditional }); } } diff --git a/packages/app-staking/src/Actions/Account/InputValidationController.tsx b/packages/app-staking/src/Actions/Account/InputValidationController.tsx index 4d258a7d06..1f52df06b8 100644 --- a/packages/app-staking/src/Actions/Account/InputValidationController.tsx +++ b/packages/app-staking/src/Actions/Account/InputValidationController.tsx @@ -29,7 +29,7 @@ class ValidateController extends React.PureComponent { error: null }; - static getDerivedStateFromProps ({ accountId, bondedId, controllerId, defaultController, onError, stashId, t }: Props, prevState: State): State { + public static getDerivedStateFromProps ({ accountId, bondedId, controllerId, defaultController, onError, stashId, t }: Props, prevState: State): State { const error = (() => { if (defaultController === controllerId) { // don't show an error if the selected controller is the default diff --git a/packages/app-staking/src/Actions/Account/InputValidationSession.tsx b/packages/app-staking/src/Actions/Account/InputValidationSession.tsx index b269e1a574..2fa62ff396 100644 --- a/packages/app-staking/src/Actions/Account/InputValidationSession.tsx +++ b/packages/app-staking/src/Actions/Account/InputValidationSession.tsx @@ -26,7 +26,7 @@ class ValidateSession extends React.PureComponent { error: null }; - static getDerivedStateFromProps ({ onError, sessionId, stashId, t }: Props, prevState: State): State | null { + public static getDerivedStateFromProps ({ onError, sessionId, stashId, t }: Props, prevState: State): State | null { let error = null; try { diff --git a/packages/app-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx b/packages/app-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx index 8e4ad7155e..e9f3f4b568 100644 --- a/packages/app-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx +++ b/packages/app-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx @@ -24,7 +24,7 @@ class InputValidationUnstakeThreshold extends React.PureComponent error: null }; - static getDerivedStateFromProps ({ onError, t, unstakeThreshold }: Props, prevState: State): State | null { + public static getDerivedStateFromProps ({ onError, t, unstakeThreshold }: Props, prevState: State): State | null { let error = null; if (!unstakeThreshold) { diff --git a/packages/app-staking/src/Actions/Account/Nominate.tsx b/packages/app-staking/src/Actions/Account/Nominate.tsx index 210b3e5cec..f47ac34a8b 100644 --- a/packages/app-staking/src/Actions/Account/Nominate.tsx +++ b/packages/app-staking/src/Actions/Account/Nominate.tsx @@ -48,7 +48,7 @@ class Nominate extends React.PureComponent { ); } - renderButtons () { + public renderButtons (): React.ReactNode { const { controllerId, onClose, t } = this.props; const { nominees } = this.state; @@ -75,7 +75,7 @@ class Nominate extends React.PureComponent { ); } - renderContent () { + public renderContent (): React.ReactNode { const { controllerId, stashId, stashOptions, t } = this.props; return ( diff --git a/packages/app-staking/src/Actions/Account/SetSessionAccount.tsx b/packages/app-staking/src/Actions/Account/SetSessionAccount.tsx index 3e6a0b47c1..5c6c3af93d 100644 --- a/packages/app-staking/src/Actions/Account/SetSessionAccount.tsx +++ b/packages/app-staking/src/Actions/Account/SetSessionAccount.tsx @@ -77,7 +77,7 @@ class SetSessionKey extends React.PureComponent { ); } - private renderContent () { + private renderContent (): React.ReactNode { const { controllerId, stashId, t } = this.props; const { sessionId } = this.state; @@ -112,11 +112,11 @@ class SetSessionKey extends React.PureComponent { ); } - private onChangeSession = (sessionId: string) => { + private onChangeSession = (sessionId: string): void => { this.setState({ sessionId }); } - private onSessionError = (sessionError: string | null) => { + private onSessionError = (sessionError: string | null): void => { this.setState({ sessionError }); } } diff --git a/packages/app-staking/src/Actions/Account/Unbond.tsx b/packages/app-staking/src/Actions/Account/Unbond.tsx index 2d696d9ecf..c8ea1e3776 100644 --- a/packages/app-staking/src/Actions/Account/Unbond.tsx +++ b/packages/app-staking/src/Actions/Account/Unbond.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/camelcase */ // Copyright 2017-2019 @polkadot/ui-staking authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. @@ -40,7 +41,7 @@ const BalanceWrapper = styled.div` class Unbond extends TxComponent { public state: State = {}; - componentDidUpdate (prevProps: Props) { + public componentDidUpdate (prevProps: Props): void { const { staking_ledger } = this.props; if (staking_ledger !== prevProps.staking_ledger) { @@ -89,7 +90,7 @@ class Unbond extends TxComponent { ); } - private renderContent () { + private renderContent (): React.ReactNode { const { controllerId, stashId, t } = this.props; const { maxBalance } = this.state; @@ -139,7 +140,7 @@ class Unbond extends TxComponent { }); } - private setMaxBalance = () => { + private setMaxBalance = (): void => { const { staking_ledger } = this.props; if (!staking_ledger || staking_ledger.isNone) { @@ -153,7 +154,7 @@ class Unbond extends TxComponent { }); } - private onChangeValue = (maxUnbond?: BN) => { + private onChangeValue = (maxUnbond?: BN): void => { this.nextState({ maxUnbond }); } } diff --git a/packages/app-staking/src/Actions/Account/Validate.tsx b/packages/app-staking/src/Actions/Account/Validate.tsx index 999ffb7088..6b4ac38449 100644 --- a/packages/app-staking/src/Actions/Account/Validate.tsx +++ b/packages/app-staking/src/Actions/Account/Validate.tsx @@ -35,7 +35,7 @@ class Validate extends TxComponent { // inject the preferences returned via RPC once into the state (from this // point forward it will be entirely managed by the actual inputs) - static getDerivedStateFromProps (props: Props, state: State): State | null { + public static getDerivedStateFromProps (props: Props, state: State): State | null { if (state.unstakeThreshold && state.validatorPayment) { return null; } diff --git a/packages/app-staking/src/Actions/NewStake.tsx b/packages/app-staking/src/Actions/NewStake.tsx index 1eccd1de8a..67ed778707 100644 --- a/packages/app-staking/src/Actions/NewStake.tsx +++ b/packages/app-staking/src/Actions/NewStake.tsx @@ -81,7 +81,7 @@ class NewStake extends TxComponent { ); } - private renderContent () { + private renderContent (): React.ReactNode { const { t } = this.props; const { controllerId, controllerError, bondValue, destination, stashId } = this.state; const hasValue = !!bondValue && bondValue.gtn(0); @@ -160,23 +160,23 @@ class NewStake extends TxComponent { }); } - private onChangeController = (controllerId: string) => { + private onChangeController = (controllerId: string): void => { this.nextState({ controllerId }); } - private onChangeDestination = (destination: number) => { + private onChangeDestination = (destination: number): void => { this.nextState({ destination }); } - private onChangeStash = (stashId: string) => { + private onChangeStash = (stashId: string): void => { this.nextState({ stashId }); } - private onChangeValue = (bondValue?: BN) => { + private onChangeValue = (bondValue?: BN): void => { this.nextState({ bondValue }); } - private onControllerError = (controllerError: string | null) => { + private onControllerError = (controllerError: string | null): void => { this.setState({ controllerError }); } } diff --git a/packages/app-storage/src/Query.tsx b/packages/app-storage/src/Query.tsx index 96188faac1..fbf1a5177d 100644 --- a/packages/app-storage/src/Query.tsx +++ b/packages/app-storage/src/Query.tsx @@ -39,7 +39,7 @@ const cache: CacheInstance[] = []; class Query extends React.PureComponent { public state: State = { spread: {} } as State; - static getCachedComponent (query: QueryTypes): CacheInstance { + public static getCachedComponent (query: QueryTypes): CacheInstance { const { id, key, params = [] } = query as StorageModuleQuery; if (!cache[id]) { @@ -66,7 +66,7 @@ class Query extends React.PureComponent { return cache[id]; } - static createComponent (type: string, Component: React.ComponentType, defaultProps: DefaultProps, renderHelper: ComponentRenderer) { + public static createComponent (type: string, Component: React.ComponentType, defaultProps: DefaultProps, renderHelper: ComponentRenderer) { return { Component, // In order to replace the default component during runtime we can provide a RenderFn to create a new 'plugged' component @@ -83,7 +83,7 @@ class Query extends React.PureComponent { }; } - static getDerivedStateFromProps ({ value }: Props) { + public static getDerivedStateFromProps ({ value }: Props) { const Component = Query.getCachedComponent(value).Component; const inputs: React.ReactNode[] = isU8a(value.key) ? [] diff --git a/packages/app-storage/src/Selection/Modules.tsx b/packages/app-storage/src/Selection/Modules.tsx index bb1f8a273f..2f39324ba5 100644 --- a/packages/app-storage/src/Selection/Modules.tsx +++ b/packages/app-storage/src/Selection/Modules.tsx @@ -28,6 +28,7 @@ interface State { class Modules extends TxComponent { private defaultValue: any; + public state: State; public constructor (props: Props) { @@ -55,10 +56,7 @@ class Modules extends TxComponent { defaultValue={this.defaultValue} label={t('selected state query')} onChange={this.onChangeKey} - help={ - meta && meta.documentation - && meta.documentation.join(' ') - } + help={meta && meta.documentation && meta.documentation.join(' ')} /> { private nextState (newState: State): void { this.setState( - (prevState: State) => { + (prevState: State): Pick => { const { key = prevState.key, values = prevState.values } = newState; const hasParam = key.creator.meta.type.isMap; const isValid = values.length === (hasParam ? 1 : 0) && - values.reduce((isValid, value) => - isValid && - !isUndefined(value) && - !isUndefined(value.value) && - value.isValid, + values.reduce( + (isValid, value): boolean => + isValid && + !isUndefined(value) && + !isUndefined(value.value) && + value.isValid, true ); diff --git a/packages/app-sudo/src/SetKey.tsx b/packages/app-sudo/src/SetKey.tsx index 187dbaf3c2..4bba79a663 100644 --- a/packages/app-sudo/src/SetKey.tsx +++ b/packages/app-sudo/src/SetKey.tsx @@ -33,10 +33,10 @@ class SetKey extends React.PureComponent { this.state = { selected: props.sudoKey - } as State; + }; } - componentWillReceiveProps ({ sudoKey = this.props.sudoKey }) { + public componentWillReceiveProps ({ sudoKey = this.props.sudoKey }): void { if (sudoKey !== this.props.sudoKey) { this.setState({ selected: sudoKey }); } @@ -49,25 +49,27 @@ class SetKey extends React.PureComponent { return (
- {isMine ? ( - <> - - - - ) : ( + {isMine + ? ( + <> + + + + ) + : ( { > - )} -
- {this.willLose() && ( -
-
- - {t('You will no longer have sudo access')} -
-
- )} + ) + }
+ {this.willLose() && ( +
+
+ + {t('You will no longer have sudo access')} +
+
+ )} + ); } @@ -96,12 +99,13 @@ class SetKey extends React.PureComponent { private willLose = (): boolean => { const { allAccounts, isMine, sudoKey } = this.props; const { selected } = this.state; + return ( isMine && !!Object.keys(allAccounts).length && !!selected && selected !== sudoKey && - !Object.keys(allAccounts).find(s => s === selected) + !Object.keys(allAccounts).find((s): boolean => s === selected) ); } } diff --git a/packages/app-sudo/src/Sudo.tsx b/packages/app-sudo/src/Sudo.tsx index 29b815218c..4515985616 100644 --- a/packages/app-sudo/src/Sudo.tsx +++ b/packages/app-sudo/src/Sudo.tsx @@ -14,7 +14,7 @@ import { withApi, withMulti } from '@polkadot/ui-api'; import translate from './translate'; type Props = I18nProps & ApiProps & ComponentProps & { - onChange: (accountId?: string) => void + onChange: (accountId?: string) => void; }; interface State { @@ -32,7 +32,8 @@ class Propose extends TxComponent { const { apiDefaultTxSudo, isMine, sudoKey, t } = this.props; const { method, isValid } = this.state; - return isMine ? ( + return isMine + ? (
{ />
- ) : ( + ) + : (
@@ -62,7 +64,7 @@ class Propose extends TxComponent { ); } - private nextState (newState: State): void { + private nextState (newState: Partial): void { this.setState( (prevState: State): State => { const { method = prevState.method } = newState; @@ -81,7 +83,7 @@ class Propose extends TxComponent { return; } - this.nextState({ method } as State); + this.nextState({ method }); } } diff --git a/packages/app-toolbox/src/Hash.tsx b/packages/app-toolbox/src/Hash.tsx index a8a9d2bd54..b824699cad 100644 --- a/packages/app-toolbox/src/Hash.tsx +++ b/packages/app-toolbox/src/Hash.tsx @@ -33,7 +33,7 @@ class Hash extends React.PureComponent { ); } - renderInput () { + public renderInput (): React.ReactNode { const { t } = this.props; const { data, isHexData } = this.state; @@ -65,7 +65,7 @@ class Hash extends React.PureComponent { ); } - renderOutput () { + public renderOutput (): React.ReactNode { const { t } = this.props; const { hash } = this.state; diff --git a/packages/app-toolbox/src/Rpc/Account.tsx b/packages/app-toolbox/src/Rpc/Account.tsx index 665c716ad1..68debfd3b2 100644 --- a/packages/app-toolbox/src/Rpc/Account.tsx +++ b/packages/app-toolbox/src/Rpc/Account.tsx @@ -55,7 +55,7 @@ class Account extends React.PureComponent { ); } - renderNonce () { + public renderNonce (): React.ReactNode { const { t } = this.props; const { accountId } = this.state; diff --git a/packages/app-toolbox/src/Sign.tsx b/packages/app-toolbox/src/Sign.tsx index 9250964baa..4e4945c845 100644 --- a/packages/app-toolbox/src/Sign.tsx +++ b/packages/app-toolbox/src/Sign.tsx @@ -68,7 +68,7 @@ class Sign extends React.PureComponent { ); } - renderAccount () { + public renderAccount (): React.ReactNode { const { t } = this.props; return ( @@ -85,7 +85,7 @@ class Sign extends React.PureComponent { ); } - renderUnlockWarning () { + public renderUnlockWarning (): React.ReactNode { const { t } = this.props; const { isLocked } = this.state; @@ -109,7 +109,7 @@ class Sign extends React.PureComponent { ); } - renderInput () { + public renderInput (): React.ReactNode { const { t } = this.props; const { data, isHexData } = this.state; @@ -141,7 +141,7 @@ class Sign extends React.PureComponent { ); } - renderSignature () { + public renderSignature (): React.ReactNode { const { t } = this.props; const { signature } = this.state; @@ -160,7 +160,7 @@ class Sign extends React.PureComponent { ); } - renderUnlock () { + public renderUnlock (): React.ReactNode { const { currentPair, isUnlockVisible } = this.state; if (!isUnlockVisible) { @@ -175,7 +175,7 @@ class Sign extends React.PureComponent { ); } - nextState = (newState: State): void => { + private nextState = (newState: State): void => { this.setState( (prevState: State): State => { const { currentPair = prevState.currentPair, data = prevState.data, isHexData = prevState.isHexData, isUnlockVisible = prevState.isUnlockVisible } = newState; diff --git a/packages/app-toolbox/src/Unlock.tsx b/packages/app-toolbox/src/Unlock.tsx index 851f6ef942..9e158c093f 100644 --- a/packages/app-toolbox/src/Unlock.tsx +++ b/packages/app-toolbox/src/Unlock.tsx @@ -28,10 +28,10 @@ class Unlock extends TxComponent { unlockError: null }; - static getDerivedStateFromProps ({ pair }: Props): State { + public static getDerivedStateFromProps ({ pair }: Props): Pick { return { address: (pair && pair.address) || '' - } as State; + }; } public render (): React.ReactNode { diff --git a/packages/app-toolbox/src/index.tsx b/packages/app-toolbox/src/index.tsx index 15fd40a734..b623210a17 100644 --- a/packages/app-toolbox/src/index.tsx +++ b/packages/app-toolbox/src/index.tsx @@ -53,15 +53,14 @@ class ToolboxApp extends React.PureComponent { ] }; } + public render (): React.ReactNode { const { allAccounts, basePath } = this.props; const { tabs } = this.state; const hasAccounts = allAccounts && Object.keys(allAccounts).length !== 0; const filteredTabs = hasAccounts ? tabs - : tabs.filter(({ name }) => - !['sign', 'verify'].includes(name) - ); + : tabs.filter(({ name }): boolean => !['sign', 'verify'].includes(name)); return (
diff --git a/packages/app-treasury/src/Overview/Approve.tsx b/packages/app-treasury/src/Overview/Approve.tsx index a1662c5773..dba8988b03 100644 --- a/packages/app-treasury/src/Overview/Approve.tsx +++ b/packages/app-treasury/src/Overview/Approve.tsx @@ -30,24 +30,26 @@ class Approve extends TxModal { isApproving: false }; - private approveOptions = () => [ + private approveOptions = (): { text: string; value: boolean }[] => [ { text: this.props.t('Aye, I approve'), value: true }, { text: this.props.t('Nay, I do not approve'), value: false } ] - headerText = () => this.props.t('Approve or reject proposal'); + protected headerText = (): string => this.props.t('Approve or reject proposal'); - txMethod = () => 'collective.propose'; - txParams = () => { + protected txMethod = (): string => 'collective.propose'; + + protected txParams = (): [number, any] => { const { api, proposalId, threshold } = this.props; const { isApproving } = this.state; const method = isApproving ? 'approveProposal' : 'rejectProposal'; const spendProposal = api.tx.treasury[method](proposalId); + return [threshold, spendProposal]; } - renderTrigger = () => { + protected renderTrigger = (): React.ReactNode => { const { t } = this.props; return (
@@ -63,7 +65,7 @@ class Approve extends TxModal { ); } - renderPreContent = () => { + protected renderPreContent = (): React.ReactNode => { const { proposalInfo = null } = this.props; if (!proposalInfo) { @@ -73,7 +75,7 @@ class Approve extends TxModal { return proposalInfo; } - renderContent = () => { + protected renderContent = (): React.ReactNode => { const { t } = this.props; const { isApproving } = this.state; diff --git a/packages/app-treasury/src/Overview/Proposals.tsx b/packages/app-treasury/src/Overview/Proposals.tsx index b0d7e4465b..b49db09aa8 100644 --- a/packages/app-treasury/src/Overview/Proposals.tsx +++ b/packages/app-treasury/src/Overview/Proposals.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/camelcase */ // Copyright 2017-2019 @polkadot/app-democracy authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. @@ -34,14 +35,14 @@ class ProposalsBase extends React.PureComponent { proposalIndices: [] as BN[] }; - static getDerivedStateFromProps ({ isApprovals = false, treasury_approvals = [] as BN[], treasury_proposalCount = new BN(0) }: Props) { + public static getDerivedStateFromProps ({ isApprovals = false, treasury_approvals = [] as BN[], treasury_proposalCount = new BN(0) }: Props): Pick { let proposalIndices: BN[] = []; if (isApprovals) { proposalIndices = treasury_approvals; } else { for (let i = 0; i < treasury_proposalCount.toNumber(); i++) { - if (!treasury_approvals.find(index => index.eqn(i))) { + if (!treasury_approvals.find((index): boolean => index.eqn(i))) { proposalIndices.push(new BN(i)); } } @@ -66,11 +67,11 @@ class ProposalsBase extends React.PureComponent { ); } - private renderProposals () { + private renderProposals (): React.ReactNode { const { isApprovals } = this.props; const { proposalIndices } = this.state; - return proposalIndices.map((proposalId) => ( + return proposalIndices.map((proposalId): React.ReactNode => ( { )); } - onRespond = () => { + protected onRespond = (): void => { const { history } = this.props; history.push('/council/motions'); } - private onPopulateProposal = () => { - this.setState(({ isEmpty }: State) => { + private onPopulateProposal = (): void => { + this.setState(({ isEmpty }: State): Pick | null => { if (isEmpty) { return { isEmpty: false }; } + return null; }); } diff --git a/packages/app-treasury/src/Overview/Propose.tsx b/packages/app-treasury/src/Overview/Propose.tsx index f59cd99d46..abc5f88511 100644 --- a/packages/app-treasury/src/Overview/Propose.tsx +++ b/packages/app-treasury/src/Overview/Propose.tsx @@ -26,6 +26,7 @@ class Propose extends TxModal { headerText = () => this.props.t('Submit a spend proposal'); txMethod = () => 'treasury.proposeSpend'; + txParams = () => { const { beneficiary, value } = this.state; @@ -34,7 +35,7 @@ class Propose extends TxModal { ]; } - isDisabled = () => { + protected isDisabled = (): boolean => { const { accountId, beneficiary, value } = this.state; const hasValue = !!value && value.gtn(0); const hasBeneficiary = !!beneficiary; @@ -42,7 +43,7 @@ class Propose extends TxModal { return !accountId || !hasValue || !hasBeneficiary; } - renderTrigger = () => { + protected renderTrigger = (): React.ReactNode => { const { t } = this.props; return ( @@ -57,7 +58,7 @@ class Propose extends TxModal { ); } - renderContent = () => { + protected renderContent = (): React.ReactNode => { const { t } = this.props; const { value } = this.state; const hasValue = !!value && value.gtn(0); diff --git a/packages/app-treasury/src/Settings.tsx b/packages/app-treasury/src/Settings.tsx index 09d831c29e..2625cd5a68 100644 --- a/packages/app-treasury/src/Settings.tsx +++ b/packages/app-treasury/src/Settings.tsx @@ -36,7 +36,7 @@ interface State { class Settings extends TxComponent { public state: State = {}; - static getDerivedStateFromProps ({ proposalBond, proposalBondMinimum, spendPeriod, burn, pot }: Props, state: State) { + public static getDerivedStateFromProps ({ proposalBond, proposalBondMinimum, spendPeriod, burn, pot }: Props, state: State): State { const newState: State = {}; if (proposalBond && !state.proposalBond) { @@ -173,27 +173,27 @@ class Settings extends TxComponent { } private onChangeAccount = (accountId: string): void => { - this.nextState({ accountId } as State); + this.nextState({ accountId }); } private onChangeProposalBond = (proposalBond?: BN): void => { - this.nextState({ proposalBond } as State); + this.nextState({ proposalBond }); } private onChangeProposalBondMinimum = (proposalBondMinimum?: BN): void => { - this.nextState({ proposalBondMinimum } as State); + this.nextState({ proposalBondMinimum }); } private onChangeSpendPeriod = (spendPeriod?: BN): void => { - this.nextState({ spendPeriod } as State); + this.nextState({ spendPeriod }); } private onChangeBurn = (burn?: BN): void => { - this.nextState({ burn } as State); + this.nextState({ burn }); } private onChangePot = (pot?: BN): void => { - this.nextState({ pot } as State); + this.nextState({ pot }); } } diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx index 7f2ba26b5e..e800ab0354 100644 --- a/packages/apps/src/Apps.tsx +++ b/packages/apps/src/Apps.tsx @@ -46,14 +46,14 @@ class Apps extends React.Component { }; } - componentDidMount () { + public componentDidMount (): void { this.setState({ menuOpen: false, - isMenu: window.innerWidth >= SIDEBAR_MENU_THRESHOLD ? false : true + isMenu: window.innerWidth < SIDEBAR_MENU_THRESHOLD }); } - componentDidUpdate () { + public componentDidUpdate (): void { this.handleMenuTransition(); } @@ -81,9 +81,9 @@ class Apps extends React.Component { } private collapse = (): void => { - this.setState(({ isCollapsed }: State) => ({ + this.setState(({ isCollapsed }: State): Pick => ({ isCollapsed: !isCollapsed - }), () => { + }), (): void => { store.set('sidebar', this.state); }); } @@ -110,7 +110,7 @@ class Apps extends React.Component { switch (transition) { case SideBarTransition.MINIMISED_AND_EXPANDED: - setTimeout(() => { + setTimeout((): void => { this.setState({ isMenu: true, isCollapsed: false, @@ -120,7 +120,7 @@ class Apps extends React.Component { break; case SideBarTransition.EXPANDED_AND_MAXIMISED: - setTimeout(() => { + setTimeout((): void => { this.setState({ isMenu: false, isCollapsed: store.get('sidebar').isCollapsed, @@ -134,7 +134,7 @@ class Apps extends React.Component { } } - private renderMenuBg = () => { + private renderMenuBg = (): React.ReactNode => { return (
{ break; default: - this.setState(({ isCollapsed }: State) => ({ + this.setState(({ isCollapsed }: State): Pick => ({ isCollapsed: !isCollapsed })); break; diff --git a/packages/apps/src/Content/NotFound.tsx b/packages/apps/src/Content/NotFound.tsx index d1d27e1149..c750da12eb 100644 --- a/packages/apps/src/Content/NotFound.tsx +++ b/packages/apps/src/Content/NotFound.tsx @@ -6,11 +6,9 @@ import React from 'react'; import { Redirect } from 'react-router'; import routing from '@polkadot/apps-routing'; -type Props = {}; - const defaultTo = `/${routing.default}`; -export default class NotFound extends React.PureComponent { +export default class NotFound extends React.PureComponent<{}> { public render (): React.ReactNode { return ( diff --git a/packages/apps/src/Content/index.tsx b/packages/apps/src/Content/index.tsx index 28a3587db5..46f468750d 100644 --- a/packages/apps/src/Content/index.tsx +++ b/packages/apps/src/Content/index.tsx @@ -18,7 +18,7 @@ import translate from '../translate'; import NotFound from './NotFound'; type Props = I18nProps & ApiProps & { - location: Location + location: Location; }; const Wrapper = styled.div` @@ -54,7 +54,7 @@ class Content extends React.Component { public render (): React.ReactNode { const { isApiConnected, isApiReady, location, t } = this.props; const app = location.pathname.slice(1) || ''; - const { Component, display: { needsApi }, name } = routing.routes.find((route) => + const { Component, display: { needsApi }, name } = routing.routes.find((route): boolean => !!(route && app.indexOf(route.name) === 0) ) || unknown; @@ -69,7 +69,7 @@ class Content extends React.Component { return ( - {({ queueAction, stqueue, txqueue }: QueueProps) => ( + {({ queueAction, stqueue, txqueue }: QueueProps): React.ReactNode => ( <> { private isVisible (): boolean { const { allAccounts = {}, isApiConnected, isApiReady, route: { display: { isHidden, needsAccounts, needsApi, needsSudo }, name }, sudo_key: sudoKey } = this.props; const hasAccounts = Object.keys(allAccounts).length !== 0; - const hasSudo = !!Object.keys(allAccounts).find(address => address === sudoKey); + const hasSudo = !!Object.keys(allAccounts).find((address): boolean => address === sudoKey); if (isHidden) { return false; diff --git a/packages/apps/src/SideBar/NodeInfo.tsx b/packages/apps/src/SideBar/NodeInfo.tsx index d535908248..179bcfc0a8 100644 --- a/packages/apps/src/SideBar/NodeInfo.tsx +++ b/packages/apps/src/SideBar/NodeInfo.tsx @@ -36,6 +36,7 @@ const Wrapper = styled.div` } `; +// eslint-disable-next-line @typescript-eslint/no-var-requires const pkgJson = require('../../package.json'); class NodeInfo extends React.PureComponent { @@ -52,7 +53,7 @@ class NodeInfo extends React.PureComponent { ); } - private renderNode () { + private renderNode (): React.ReactNode { const { isApiReady } = this.props; if (!isApiReady) { diff --git a/packages/apps/src/SideBar/logos.ts b/packages/apps/src/SideBar/logos.ts index 3eefe03c6b..33d591dbdf 100644 --- a/packages/apps/src/SideBar/logos.ts +++ b/packages/apps/src/SideBar/logos.ts @@ -20,7 +20,7 @@ const LOGOS_SMALL: LogoMap = new Map([ ['substrate', substrateSmall] ]); -export default function getLogo (isSmall: boolean) { +export default function getLogo (isSmall: boolean): any { return isSmall ? (LOGOS_SMALL.get(settings.uiTheme) || polkadotSmall) : (LOGOS_NORMAL.get(settings.uiTheme) || polkadotLogo); diff --git a/packages/apps/src/TopBar.tsx b/packages/apps/src/TopBar.tsx index b289f5fbf3..1afb10e4c1 100644 --- a/packages/apps/src/TopBar.tsx +++ b/packages/apps/src/TopBar.tsx @@ -8,9 +8,9 @@ import React from 'react'; import styled from 'styled-components'; import { BestNumber, Chain, NodeName, NodeVersion } from '@polkadot/ui-reactive'; -type Props = { - className?: string -}; +interface Props { + className?: string; +} class TopBar extends React.PureComponent { public render (): React.ReactNode { diff --git a/packages/apps/src/index.tsx b/packages/apps/src/index.tsx index d706e5ba90..97b3adca99 100644 --- a/packages/apps/src/index.tsx +++ b/packages/apps/src/index.tsx @@ -50,7 +50,7 @@ ReactDOM.render( - {({ queueExtrinsic, queueSetTxStatus }) => ( + {({ queueExtrinsic, queueSetTxStatus }): React.ReactNode => ( { isHidden: false }; - static getDerivedStateFromProps ({ allAccounts }: Props, prevState: State): State | null { + public static getDerivedStateFromProps ({ allAccounts }: Props, prevState: State): Pick | null { if (!allAccounts) { return null; } @@ -44,7 +44,7 @@ class Accounts extends React.PureComponent { return { hasAccounts - } as State; + }; } public render (): React.ReactNode { @@ -74,7 +74,7 @@ class Accounts extends React.PureComponent { ); } - private onClose = () => { + private onClose = (): void => { this.setState({ isHidden: true }); } } diff --git a/packages/apps/src/overlays/Connecting.tsx b/packages/apps/src/overlays/Connecting.tsx index 6f1671bb2f..6401a5fe34 100644 --- a/packages/apps/src/overlays/Connecting.tsx +++ b/packages/apps/src/overlays/Connecting.tsx @@ -22,7 +22,7 @@ class Connecting extends React.PureComponent { return this.renderExtension() || this.renderConnecting(); } - private renderExtension () { + private renderExtension (): React.ReactNode { const { className, isWaitingInjected, t } = this.props; if (!isWaitingInjected) { @@ -39,7 +39,7 @@ class Connecting extends React.PureComponent { ); } - private renderConnecting () { + private renderConnecting (): React.ReactNode { const { className, isApiConnected, t } = this.props; if (isApiConnected) { diff --git a/packages/ui-api/src/ApiContext.ts b/packages/ui-api/src/ApiContext.ts index f252fb431f..6cd5347aaf 100644 --- a/packages/ui-api/src/ApiContext.ts +++ b/packages/ui-api/src/ApiContext.ts @@ -6,7 +6,7 @@ import { ApiProps } from './types'; import React from 'react'; -const ApiContext: React.Context = React.createContext({} as ApiProps); +const ApiContext: React.Context = React.createContext({} as unknown as ApiProps); const ApiConsumer: React.Consumer = ApiContext.Consumer; const ApiProvider: React.Provider = ApiContext.Provider; diff --git a/packages/ui-api/src/transform/echo.ts b/packages/ui-api/src/transform/echo.ts index 8765bf86b6..72fe235575 100644 --- a/packages/ui-api/src/transform/echo.ts +++ b/packages/ui-api/src/transform/echo.ts @@ -2,6 +2,7 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. +// eslint-disable-next-line @typescript-eslint/no-unused-vars export default function echoTransform (x: T, index: number): T { return x; } diff --git a/packages/ui-api/src/util/intervalObservable.ts b/packages/ui-api/src/util/intervalObservable.ts index 50f6c55593..8cf872c80d 100644 --- a/packages/ui-api/src/util/intervalObservable.ts +++ b/packages/ui-api/src/util/intervalObservable.ts @@ -4,12 +4,13 @@ import { CallState } from '../types'; +import { Subscription } from 'rxjs'; import { interval } from 'rxjs/observable/interval'; const interval$ = interval(500); -export default function intervalSubscribe (that: React.Component) { - return interval$.subscribe(() => { +export default function intervalSubscribe (that: React.Component): Subscription { + return interval$.subscribe((): void => { const elapsed = Date.now() - ((that.state.callUpdatedAt as number) || 0); const callUpdated = elapsed <= 1500; diff --git a/packages/ui-api/src/util/isEqual.ts b/packages/ui-api/src/util/isEqual.ts index a56d4b6ce8..3937e4d571 100644 --- a/packages/ui-api/src/util/isEqual.ts +++ b/packages/ui-api/src/util/isEqual.ts @@ -12,7 +12,7 @@ function flatten (key: string | null, value: any): any { } if (Array.isArray(value)) { - return value.map((item) => + return value.map((item): any => flatten(null, item) ); } diff --git a/packages/ui-api/src/util/triggerChange.ts b/packages/ui-api/src/util/triggerChange.ts index 4022d176a3..07764a6238 100644 --- a/packages/ui-api/src/util/triggerChange.ts +++ b/packages/ui-api/src/util/triggerChange.ts @@ -11,7 +11,7 @@ export default function triggerChange (value?: any, ...callOnResult: (OnChangeCb return; } - callOnResult.forEach((callOnResult) => { + callOnResult.forEach((callOnResult): void => { if (isObservable(callOnResult)) { callOnResult.next(value); } else if (isFunction(callOnResult)) { diff --git a/packages/ui-api/src/with/api.tsx b/packages/ui-api/src/with/api.tsx index 535ac7b218..d1eae096b0 100644 --- a/packages/ui-api/src/with/api.tsx +++ b/packages/ui-api/src/with/api.tsx @@ -12,12 +12,12 @@ import { ApiConsumer } from '../ApiContext'; export default function withApi

(Inner: React.ComponentType

, defaultProps: DefaultProps = {}): React.ComponentType { return class WithApi extends React.PureComponent> { - component: any = React.createRef(); + private component: any = React.createRef(); public render (): React.ReactNode { return ( - {(apiProps?: ApiProps) => { + {(apiProps?: ApiProps): React.ReactNode => { assert(apiProps && apiProps.api, `Application root must be wrapped inside 'rx-react/Api' to provide API context`); return ( diff --git a/packages/ui-api/src/with/callDiv.tsx b/packages/ui-api/src/with/callDiv.tsx index 862e7eae5b..87b277ca6c 100644 --- a/packages/ui-api/src/with/callDiv.tsx +++ b/packages/ui-api/src/with/callDiv.tsx @@ -9,9 +9,9 @@ import React from 'react'; import withCall from './call'; -type Props = BaseProps & { - callResult?: T -}; +interface Props extends BaseProps { + callResult?: T; +} export default function withCallDiv (endpoint: string, options: Options = {}) { return (render: (value?: T) => React.ReactNode, defaultProps: DefaultProps = {}): React.ComponentType => { diff --git a/packages/ui-api/src/with/observable.tsx b/packages/ui-api/src/with/observable.tsx index 0189203c31..6fc18d897e 100644 --- a/packages/ui-api/src/with/observable.tsx +++ b/packages/ui-api/src/with/observable.tsx @@ -30,17 +30,17 @@ export default function withObservable (observable: Observable

, { callO subscriptions: [] }; - componentDidMount () { + public componentDidMount (): void { this.setState({ subscriptions: [ observable .pipe( map(transform), - catchError(() => + catchError((): Observable => of(undefined) ) ) - .subscribe((value: any) => + .subscribe((value: any): void => this.triggerUpdate(this.props, value) ), intervalObservable(this) @@ -48,13 +48,13 @@ export default function withObservable (observable: Observable

, { callO }); } - componentWillUnmount () { - this.state.subscriptions.forEach((subscription) => + public componentWillUnmount (): void { + this.state.subscriptions.forEach((subscription): void => subscription.unsubscribe() ); } - triggerUpdate = (props: any, callResult?: T): void => { + private triggerUpdate = (props: any, callResult?: T): void => { try { if (isEqual(callResult, this.state.callResult)) { return; diff --git a/packages/ui-api/src/with/types.ts b/packages/ui-api/src/with/types.ts index dacf6e946d..f243fa3d95 100644 --- a/packages/ui-api/src/with/types.ts +++ b/packages/ui-api/src/with/types.ts @@ -8,23 +8,23 @@ import React from 'react'; export type Transform = (value: any, index: number) => any; -export type DefaultProps = { - callOnResult?: OnChangeCb, - [index: string]: any -}; +export interface DefaultProps { + callOnResult?: OnChangeCb; + [index: string]: any; +} -export type Options = { - at?: Uint8Array | string, - atProp?: string, - callOnResult?: OnChangeCb, - isMulti?: boolean, - params?: any[], - paramName?: string, - paramPick?: (props: any) => any, - paramValid?: boolean, - propName?: string, - transform?: Transform -}; +export interface Options { + at?: Uint8Array | string; + atProp?: string; + callOnResult?: OnChangeCb; + isMulti?: boolean; + params?: any[]; + paramName?: string; + paramPick?: (props: any) => any; + paramValid?: boolean; + propName?: string; + transform?: Transform; +} export type RenderFn = (value?: any) => React.ReactNode; @@ -32,10 +32,10 @@ export type StorageTransform = (input: any, index: number) => any | null; export type HOC = (Component: React.ComponentType, defaultProps?: DefaultProps, render?: RenderFn) => React.ComponentType; -export type ApiMethod = { - name: string, - section?: string -}; +export interface ApiMethod { + name: string; + section?: string; +} export type ComponentRenderer = (render: RenderFn, defaultProps?: DefaultProps) => React.ComponentType; diff --git a/packages/ui-api/test/enzyme.js b/packages/ui-api/test/enzyme.js index b110d75efc..9b2ff5c4f3 100644 --- a/packages/ui-api/test/enzyme.js +++ b/packages/ui-api/test/enzyme.js @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ // Copyright 2017-2019 @polkadot/ui-reactive authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. diff --git a/packages/ui-api/test/observable.js b/packages/ui-api/test/observable.js index 488e4255c9..11aef86639 100644 --- a/packages/ui-api/test/observable.js +++ b/packages/ui-api/test/observable.js @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ // Copyright 2017-2019 @polkadot/ui-reactive authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. diff --git a/packages/ui-app/src/ActionItem.tsx b/packages/ui-app/src/ActionItem.tsx index 1d1b50668f..d1ace85f9e 100644 --- a/packages/ui-app/src/ActionItem.tsx +++ b/packages/ui-app/src/ActionItem.tsx @@ -14,14 +14,14 @@ import Card from './Card'; import ProposedAction, { styles as proposedActionStyles } from './ProposedAction'; import { styles as rowStyles } from './Row'; -type Props = RouteComponentProps & { - className?: string, - children?: React.ReactNode, - accessory?: React.ReactNode, - proposal?: Proposal | null, - idNumber: BN | number | string, - expandNested?: boolean -}; +interface Props extends RouteComponentProps { + className?: string; + children?: React.ReactNode; + accessory?: React.ReactNode; + proposal?: Proposal | null; + idNumber: BN | number | string; + expandNested?: boolean; +} export const styles = ` ${rowStyles} @@ -47,7 +47,7 @@ class ActionItem extends React.PureComponent { ); } - private renderProposal () { + private renderProposal (): React.ReactNode { const { idNumber, proposal, expandNested } = this.props; return ( diff --git a/packages/ui-app/src/AddressCard.tsx b/packages/ui-app/src/AddressCard.tsx index caab8290c2..80bceb7a7a 100644 --- a/packages/ui-app/src/AddressCard.tsx +++ b/packages/ui-app/src/AddressCard.tsx @@ -14,9 +14,9 @@ import LinkPolkascan from './LinkPolkascan'; import translate from './translate'; -type Props = AddressProps & { - withExplorer?: boolean -}; +interface Props extends AddressProps { + withExplorer?: boolean; +} class AddressCard extends React.PureComponent { public render (): React.ReactNode { diff --git a/packages/ui-app/src/AddressInfo.tsx b/packages/ui-app/src/AddressInfo.tsx index 8f6f511bd7..d7d6ef8ea0 100644 --- a/packages/ui-app/src/AddressInfo.tsx +++ b/packages/ui-app/src/AddressInfo.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/camelcase */ // Copyright 2017-2019 @polkadot/ui-app authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. @@ -17,33 +18,33 @@ import Label from './Label'; import translate from './translate'; // true to display, or (for bonded) provided values [own, ...all extras] -export type BalanceActiveType = { - available?: boolean, - bonded?: boolean | BN[], - free?: boolean, - redeemable?: boolean, - unlocking?: boolean -}; +export interface BalanceActiveType { + available?: boolean; + bonded?: boolean | BN[]; + free?: boolean; + redeemable?: boolean; + unlocking?: boolean; +} -export type CryptoActiveType = { - crypto?: boolean, - nonce?: boolean -}; +export interface CryptoActiveType { + crypto?: boolean; + nonce?: boolean; +} -export type ValidatorPrefsType = { - unstakeThreshold?: boolean, - validatorPayment?: boolean -}; +export interface ValidatorPrefsType { + unstakeThreshold?: boolean; + validatorPayment?: boolean; +} type Props = BareProps & I18nProps & { - address: string, - balances_all?: DerivedBalances, - children?: React.ReactNode, - staking_info?: DerivedStaking, - withBalance?: boolean | BalanceActiveType, - withRewardDestination?: boolean, - withExtended?: boolean | CryptoActiveType, - withValidatorPrefs?: boolean | ValidatorPrefsType + address: string; + balances_all?: DerivedBalances; + children?: React.ReactNode; + staking_info?: DerivedStaking; + withBalance?: boolean | BalanceActiveType; + withRewardDestination?: boolean; + withExtended?: boolean | CryptoActiveType; + withValidatorPrefs?: boolean | ValidatorPrefsType; }; class AddressInfo extends React.PureComponent { @@ -68,13 +69,11 @@ class AddressInfo extends React.PureComponent { ); } - private renderBalances () { + private renderBalances (): React.ReactNode { const { balances_all, staking_info, t, withBalance = true } = this.props; const balanceDisplay = withBalance === true ? { available: true, bonded: true, free: true, redeemable: true, unlocking: true } - : withBalance - ? withBalance - : undefined; + : withBalance || undefined; if (!balanceDisplay || !balances_all) { return null; @@ -117,15 +116,15 @@ class AddressInfo extends React.PureComponent { } // either true (filtered above already) or [own, ...all extras bonded funds from nominators] - private renderBonded (bonded: true | BN[]) { + private renderBonded (bonded: true | BN[]): React.ReactNode { const { staking_info, t } = this.props; - let value = undefined; + let value; if (Array.isArray(bonded)) { // Get the sum of funds bonded by any nominator (if available) - const extras = bonded.filter((value, index) => index !== 0); - const extra = extras.reduce((total, value) => total.add(value), new BN(0)).gtn(0) - ? `(+${extras.map((bonded) => formatBalance(bonded)).join(', ')})` + const extras = bonded.filter((value, index): boolean => index !== 0); + const extra = extras.reduce((total, value): BN => total.add(value), new BN(0)).gtn(0) + ? `(+${extras.map((bonded): string => formatBalance(bonded)).join(', ')})` : ''; value = `${formatBalance(bonded[0])} ${extra}`; @@ -143,13 +142,11 @@ class AddressInfo extends React.PureComponent { : undefined; } - private renderExtended () { + private renderExtended (): React.ReactNode { const { balances_all, t, address, withExtended } = this.props; const extendedDisplay = withExtended === true ? { crypto: true, nonce: true } - : withExtended - ? withExtended - : undefined; + : withExtended || undefined; if (!extendedDisplay || !balances_all) { return null; @@ -176,7 +173,7 @@ class AddressInfo extends React.PureComponent { ); } - private renderRewardDestination () { + private renderRewardDestination (): React.ReactNode { const { staking_info, withRewardDestination, t } = this.props; if (!withRewardDestination) { @@ -193,7 +190,7 @@ class AddressInfo extends React.PureComponent { ); } - private renderRedeemButton () { + private renderRedeemButton (): React.ReactNode { const { staking_info, t } = this.props; return (staking_info && staking_info.controllerId && ( @@ -211,13 +208,13 @@ class AddressInfo extends React.PureComponent { )); } - private renderUnlocking () { + private renderUnlocking (): React.ReactNode { const { staking_info, t } = this.props; return ( staking_info && staking_info.unlocking && - staking_info.unlocking.map(({ remainingBlocks, value }, index) => ( + staking_info.unlocking.map(({ remainingBlocks, value }, index): React.ReactNode => (

{formatBalance(value)} { ); } - private renderValidatorPrefs () { + private renderValidatorPrefs (): React.ReactNode { const { staking_info, t, withValidatorPrefs = false } = this.props; const validatorPrefsDisplay = withValidatorPrefs === true - ? { unstakeThreshold: true, validatorPayment: true } - : withValidatorPrefs; + ? { unstakeThreshold: true, validatorPayment: true } + : withValidatorPrefs; if (!validatorPrefsDisplay || !staking_info || !staking_info.validatorPrefs) { return null; diff --git a/packages/ui-app/src/AddressMini.tsx b/packages/ui-app/src/AddressMini.tsx index 7fef2512a7..4b06f83202 100644 --- a/packages/ui-app/src/AddressMini.tsx +++ b/packages/ui-app/src/AddressMini.tsx @@ -15,19 +15,19 @@ import BalanceDisplay from './Balance'; import BondedDisplay from './Bonded'; import IdentityIcon from './IdentityIcon'; -type Props = BareProps & { - balance?: BN | BN[], - bonded?: BN | BN[], - children?: React.ReactNode, - iconInfo?: React.ReactNode, - isPadded?: boolean, - isShort?: boolean, - type?: KeyringItemType, - value?: AccountId | AccountIndex | Address | string, - withAddress?: boolean, - withBalance?: boolean, - withBonded?: boolean -}; +interface Props extends BareProps { + balance?: BN | BN[]; + bonded?: BN | BN[]; + children?: React.ReactNode; + iconInfo?: React.ReactNode; + isPadded?: boolean; + isShort?: boolean; + type?: KeyringItemType; + value?: AccountId | AccountIndex | Address | string; + withAddress?: boolean; + withBalance?: boolean; + withBonded?: boolean; +} class AddressMini extends React.PureComponent { public render (): React.ReactNode { @@ -67,7 +67,7 @@ class AddressMini extends React.PureComponent { ); } - private renderAddressOrName (address: string) { + private renderAddressOrName (address: string): React.ReactNode { const { isShort = true, withAddress = true, type } = this.props; if (!withAddress) { @@ -78,7 +78,7 @@ class AddressMini extends React.PureComponent { return (
{ - name || ( + name || ( isShort ? toShortAddress(address) : address @@ -87,7 +87,7 @@ class AddressMini extends React.PureComponent { ); } - private renderBalance () { + private renderBalance (): React.ReactNode { const { balance, value, withBalance = false } = this.props; if (!withBalance || !value) { @@ -102,7 +102,7 @@ class AddressMini extends React.PureComponent { ); } - private renderBonded () { + private renderBonded (): React.ReactNode { const { bonded, value, withBonded = false } = this.props; if (!withBonded || !value) { diff --git a/packages/ui-app/src/AddressRow.tsx b/packages/ui-app/src/AddressRow.tsx index 442eaccdee..3596673f14 100644 --- a/packages/ui-app/src/AddressRow.tsx +++ b/packages/ui-app/src/AddressRow.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/camelcase */ // Copyright 2017-2019 @polkadot/ui-app authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. @@ -44,7 +45,7 @@ class AddressRow extends Row { this.state = this.createState(); } - static getDerivedStateFromProps ({ accounts_idAndIndex = [], defaultName, type, value }: Props, prevState: State) { + public static getDerivedStateFromProps ({ accounts_idAndIndex = [], defaultName, type, value }: Props, prevState: State): State | null { const [_accountId] = accounts_idAndIndex; const accountId = _accountId || value; const address = accountId @@ -52,7 +53,7 @@ class AddressRow extends Row { : DEFAULT_ADDR; const name = getAddressName(address, type, false, defaultName || '') || ''; const tags = getAddressTags(address, type); - const state = { tags } as State; + const state: Partial = { tags }; let hasChanged = false; if (address !== prevState.address) { @@ -66,7 +67,7 @@ class AddressRow extends Row { } return hasChanged - ? state + ? state as State : null; } @@ -96,7 +97,7 @@ class AddressRow extends Row { ); } - private createState () { + private createState (): State { const { accounts_idAndIndex = [], defaultName, type, value } = this.props; const [_accountId] = accounts_idAndIndex; const accountId = _accountId || value; @@ -114,7 +115,7 @@ class AddressRow extends Row { }; } - protected renderAddressAndName () { + protected renderAddressAndName (): React.ReactNode { const { withAddressOrName = false } = this.props; if (withAddressOrName) { @@ -129,7 +130,7 @@ class AddressRow extends Row { } } - private renderAddress () { + private renderAddress (): React.ReactNode { const { address } = this.state; return ( @@ -144,7 +145,7 @@ class AddressRow extends Row { ); } - private renderAccountIndex () { + private renderAccountIndex (): React.ReactNode { const { accounts_idAndIndex = [], withIndex } = this.props; const [, accountIndex] = accounts_idAndIndex; @@ -159,7 +160,7 @@ class AddressRow extends Row { ); } - private renderBalances () { + private renderBalances (): React.ReactNode { const { accounts_idAndIndex = [], withBalance } = this.props; const [accountId] = accounts_idAndIndex; @@ -177,7 +178,7 @@ class AddressRow extends Row { ); } - private renderIcon () { + private renderIcon (): React.ReactNode { const { accounts_idAndIndex = [], iconInfo, withIcon = true } = this.props; const { address } = this.state; const [accountId] = accounts_idAndIndex; @@ -207,7 +208,7 @@ class AddressRow extends Row { ); } - private renderLabel () { + private renderLabel (): React.ReactNode { const { label } = this.props; if (!label) { @@ -219,7 +220,7 @@ class AddressRow extends Row { ); } - protected saveName = () => { + protected saveName = (): void => { const { address, name } = this.state; const trimmedName = name.trim(); const meta = { @@ -241,7 +242,7 @@ class AddressRow extends Row { } } - protected saveTags = () => { + protected saveTags = (): void => { const { address, tags } = this.state; const meta = { tags, diff --git a/packages/ui-app/src/Available.tsx b/packages/ui-app/src/Available.tsx index 55d9bb44b4..d025227db1 100644 --- a/packages/ui-app/src/Available.tsx +++ b/packages/ui-app/src/Available.tsx @@ -10,10 +10,10 @@ import { Available } from '@polkadot/ui-reactive'; import { classes } from './util'; -export type Props = BareProps & { - label?: React.ReactNode, - params?: AccountId | AccountIndex | Address | string | Uint8Array | null -}; +export interface Props extends BareProps { + label?: React.ReactNode; + params?: AccountId | AccountIndex | Address | string | Uint8Array | null; +} export default class AvailableDisplay extends React.PureComponent { public render (): React.ReactNode { diff --git a/packages/ui-app/src/Balance.tsx b/packages/ui-app/src/Balance.tsx index fac909d9c3..0925c19393 100644 --- a/packages/ui-app/src/Balance.tsx +++ b/packages/ui-app/src/Balance.tsx @@ -12,12 +12,12 @@ import { Balance } from '@polkadot/ui-reactive'; import { classes } from './util'; -export type Props = BareProps & { - balance?: BN | BN[], - label?: React.ReactNode, - params?: AccountId | AccountIndex | Address | string | Uint8Array | null, - withLabel?: boolean -}; +export interface Props extends BareProps { + balance?: BN | BN[]; + label?: React.ReactNode; + params?: AccountId | AccountIndex | Address | string | Uint8Array | null; + withLabel?: boolean; +} export default class BalanceDisplay extends React.PureComponent { public render (): React.ReactNode { @@ -39,14 +39,14 @@ export default class BalanceDisplay extends React.PureComponent { ); } - private renderProvided () { + private renderProvided (): React.ReactNode { const { balance, className, label, style } = this.props; let value = `${formatBalance(Array.isArray(balance) ? balance[0] : balance)}`; if (Array.isArray(balance)) { - const totals = balance.filter((value, index) => index !== 0); - const total = totals.reduce((total, value) => total.add(value), new BN(0)).gtn(0) - ? `(+${totals.map((balance) => formatBalance(balance)).join(', ')})` + const totals = balance.filter((value, index): boolean => index !== 0); + const total = totals.reduce((total, value): BN => total.add(value), new BN(0)).gtn(0) + ? `(+${totals.map((balance): string => formatBalance(balance)).join(', ')})` : ''; value = `${value} ${total}`; diff --git a/packages/ui-app/src/Bonded.tsx b/packages/ui-app/src/Bonded.tsx index 63cb45a4cc..587e6f26b8 100644 --- a/packages/ui-app/src/Bonded.tsx +++ b/packages/ui-app/src/Bonded.tsx @@ -12,12 +12,12 @@ import { Bonded } from '@polkadot/ui-reactive'; import { classes } from './util'; -export type Props = BareProps & { - bonded?: BN | BN[], - label?: React.ReactNode, - params?: AccountId | AccountIndex | Address | string | Uint8Array | null, - withLabel?: boolean -}; +export interface Props extends BareProps { + bonded?: BN | BN[]; + label?: React.ReactNode; + params?: AccountId | AccountIndex | Address | string | Uint8Array | null; + withLabel?: boolean; +} export default class BondedDisplay extends React.PureComponent { public render (): React.ReactNode { @@ -39,14 +39,14 @@ export default class BondedDisplay extends React.PureComponent { ); } - private renderProvided () { + private renderProvided (): React.ReactNode { const { bonded, className, label, style } = this.props; let value = `${formatBalance(Array.isArray(bonded) ? bonded[0] : bonded)}`; if (Array.isArray(bonded)) { - const totals = bonded.filter((value, index) => index !== 0); - const total = totals.reduce((total, value) => total.add(value), new BN(0)).gtn(0) - ? `(+${totals.map((bonded) => formatBalance(bonded)).join(', ')})` + const totals = bonded.filter((value, index): boolean => index !== 0); + const total = totals.reduce((total, value): BN => total.add(value), new BN(0)).gtn(0) + ? `(+${totals.map((bonded): string => formatBalance(bonded)).join(', ')})` : ''; value = `${value} ${total}`; diff --git a/packages/ui-app/src/Bubble.tsx b/packages/ui-app/src/Bubble.tsx index a1e7688292..73de4814ac 100644 --- a/packages/ui-app/src/Bubble.tsx +++ b/packages/ui-app/src/Bubble.tsx @@ -13,12 +13,12 @@ import settings from '@polkadot/ui-settings'; import { classes } from './util'; import Icon from './Icon'; -type Props = BareProps & { - children: React.ReactNode, - color?: SemanticCOLORS, - icon?: SemanticICONS, - label?: React.ReactNode -}; +interface Props extends BareProps { + children: React.ReactNode; + color?: SemanticCOLORS; + icon?: SemanticICONS; + label?: React.ReactNode; +} class Bubble extends React.PureComponent { public render (): React.ReactNode { diff --git a/packages/ui-app/src/Card.tsx b/packages/ui-app/src/Card.tsx index 0e0dd6b189..238b98200a 100644 --- a/packages/ui-app/src/Card.tsx +++ b/packages/ui-app/src/Card.tsx @@ -5,10 +5,10 @@ import React from 'react'; import styled from 'styled-components'; -type Props = { - children: React.ReactNode, - className?: string -}; +interface Props { + children: React.ReactNode; + className?: string; +} class Card extends React.PureComponent { public render (): React.ReactNode { diff --git a/packages/ui-app/src/CardGrid.tsx b/packages/ui-app/src/CardGrid.tsx index ca79104c8c..1e10821349 100644 --- a/packages/ui-app/src/CardGrid.tsx +++ b/packages/ui-app/src/CardGrid.tsx @@ -14,14 +14,15 @@ type Props = CollectionProps; type State = CollectionState; class CardGrid extends Collection { - static getDerivedStateFromProps ({ children, headerText }: Props) { + public static getDerivedStateFromProps ({ children, headerText }: Props): State { if (!children || (children as any[]).length <= 0) { return { isEmpty: true, showHeader: !!headerText }; } + return { isEmpty: false, showHeader: true }; } - renderEmpty () { + protected renderEmpty (): React.ReactNode { const { buttons, headerText, t } = this.props; if (headerText) { @@ -45,7 +46,7 @@ class CardGrid extends Collection { ); } - renderCollection () { + public renderCollection (): React.ReactNode { const { children } = this.props; return ( @@ -96,5 +97,4 @@ export default translate( margin-bottom: 2rem; } } - } -`); + `); diff --git a/packages/ui-app/src/CardSummary.tsx b/packages/ui-app/src/CardSummary.tsx index 4a7d11084c..b30d87709e 100644 --- a/packages/ui-app/src/CardSummary.tsx +++ b/packages/ui-app/src/CardSummary.tsx @@ -13,20 +13,20 @@ import { isUndefined } from '@polkadot/util'; import Progress, { Colors as ProgressColors } from './Progress'; import Labelled from './Labelled'; -type ProgressProps = { - color?: ProgressColors, - hideValue?: boolean, - isPercent?: boolean, - total?: BN | UInt, - value?: BN | UInt -}; +interface ProgressProps { + color?: ProgressColors; + hideValue?: boolean; + isPercent?: boolean; + total?: BN | UInt; + value?: BN | UInt; +} -type Props = BareProps & { - children?: React.ReactNode, - help?: React.ReactNode, - label: React.ReactNode, - progress?: ProgressProps -}; +interface Props extends BareProps { + children?: React.ReactNode; + help?: React.ReactNode; + label: React.ReactNode; + progress?: ProgressProps; +} class CardSummary extends React.PureComponent { public render (): React.ReactNode { @@ -40,7 +40,7 @@ class CardSummary extends React.PureComponent { progress.isPercent ? '100' : total.toString() - }` + }` : ( progress.isPercent ? value.muln(100).div(total).toString() diff --git a/packages/ui-app/src/CodeRow.tsx b/packages/ui-app/src/CodeRow.tsx index a3ec27ebea..30db931378 100644 --- a/packages/ui-app/src/CodeRow.tsx +++ b/packages/ui-app/src/CodeRow.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/camelcase */ // Copyright 2017-2019 @polkadot/ui-app authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. @@ -56,7 +57,7 @@ class CodeRow extends Row { this.state = this.createState(); } - static getDerivedStateFromProps ({ code: { json }, accounts_idAndIndex = [] }: Props, prevState: State): State | null { + public static getDerivedStateFromProps ({ code: { json }, accounts_idAndIndex = [] }: Props, prevState: State): State | null { const codeHash = json.codeHash || DEFAULT_HASH; const name = json.name || DEFAULT_NAME; const tags = json.tags || []; @@ -66,7 +67,7 @@ class CodeRow extends Row { ? accountId.toString() : DEFAULT_ADDR; - const state = { tags } as State; + const state: Partial = { tags }; let hasChanged = false; if (codeHash !== prevState.codeHash) { @@ -85,7 +86,7 @@ class CodeRow extends Row { } return hasChanged - ? state + ? state as State : null; } @@ -112,7 +113,7 @@ class CodeRow extends Row { ); } - private createState () { + private createState (): State { const { code: { json: { codeHash = DEFAULT_HASH, name = DEFAULT_NAME, tags = [] } } } = this.props; return { @@ -125,7 +126,7 @@ class CodeRow extends Row { }; } - protected renderCodeHash () { + protected renderCodeHash (): React.ReactNode { const { codeHash } = this.state; return ( @@ -145,7 +146,7 @@ class CodeRow extends Row { ); } - protected renderButtons () { + protected renderButtons (): React.ReactNode { const { buttons } = this.props; if (!buttons) { @@ -159,7 +160,7 @@ class CodeRow extends Row { ); } - protected renderIcon () { + protected renderIcon (): React.ReactNode { return ( { ); } - protected renderMessages () { + protected renderMessages (): React.ReactNode { const { code: { contractAbi }, withMessages } = this.props; if (!withMessages || !contractAbi) { @@ -185,7 +186,7 @@ class CodeRow extends Row { ); } - protected saveName = async () => { + protected saveName = async (): Promise => { const { codeHash, name } = this.state; const trimmedName = name.trim(); @@ -197,7 +198,7 @@ class CodeRow extends Row { } } - protected saveTags = async () => { + protected saveTags = async (): Promise => { const { codeHash, tags } = this.state; if (codeHash) { diff --git a/packages/ui-app/src/Collection.tsx b/packages/ui-app/src/Collection.tsx index 09930ad886..4599fa70d1 100644 --- a/packages/ui-app/src/Collection.tsx +++ b/packages/ui-app/src/Collection.tsx @@ -6,19 +6,19 @@ import { I18nProps } from '@polkadot/ui-app/types'; import React from 'react'; -export type CollectionProps = I18nProps & { - buttons?: React.ReactNode, - children: React.ReactNode, - className?: string, - headerText?: React.ReactNode, - isEmpty?: boolean, - emptyText?: React.ReactNode -}; +export interface CollectionProps extends I18nProps { + buttons?: React.ReactNode; + children: React.ReactNode; + className?: string; + headerText?: React.ReactNode; + isEmpty?: boolean; + emptyText?: React.ReactNode; +} -export type CollectionState = { - isEmpty: boolean, - showHeader?: boolean -}; +export interface CollectionState { + isEmpty: boolean; + showHeader?: boolean; +} export const collectionStyles = ` .ui--Collection-header { @@ -51,7 +51,7 @@ export default class Collection

{ return { isEmpty: Collection.isEmpty(children) }; @@ -72,7 +72,7 @@ export default class Collection

{ public render (): React.ReactNode { diff --git a/packages/ui-app/src/Column.tsx b/packages/ui-app/src/Column.tsx index b0d25ef8e3..f652ca3674 100644 --- a/packages/ui-app/src/Column.tsx +++ b/packages/ui-app/src/Column.tsx @@ -27,7 +27,7 @@ class Column extends Collection { ); } - renderCollection () { + public renderCollection (): React.ReactNode { const { children } = this.props; return children; diff --git a/packages/ui-app/src/CopyButton.tsx b/packages/ui-app/src/CopyButton.tsx index 916497b418..4e64d83fb2 100644 --- a/packages/ui-app/src/CopyButton.tsx +++ b/packages/ui-app/src/CopyButton.tsx @@ -13,15 +13,15 @@ import Button from './Button'; import translate from './translate'; import styled from 'styled-components'; -type Props = BareProps & { - children?: React.ReactNode, - icon?: string, - isAddress?: boolean, - value?: any -}; +interface Props extends BareProps { + children?: React.ReactNode; + icon?: string; + isAddress?: boolean; + value?: any; +} type InnerProps = Props & I18nProps & { - queueAction: QueueAction$Add + queueAction: QueueAction$Add; }; class CopyButtonInner extends React.PureComponent { @@ -70,7 +70,7 @@ class CopyButton extends React.PureComponent { public render (): React.ReactNode { return ( - {({ queueAction }) => ( + {({ queueAction }): React.ReactNode => ( { public render (): React.ReactNode { diff --git a/packages/ui-app/src/Editor.tsx b/packages/ui-app/src/Editor.tsx index f0f073b679..3975e0b53e 100644 --- a/packages/ui-app/src/Editor.tsx +++ b/packages/ui-app/src/Editor.tsx @@ -9,11 +9,11 @@ import React from 'react'; import styled from 'styled-components'; import { classes } from '@polkadot/ui-app/util'; -type Props = BareProps & { - code: string, - isValid?: boolean, - onEdit: (code: string) => void -}; +interface Props extends BareProps { + code: string; + isValid?: boolean; + onEdit: (code: string) => void; +} /** * @name Editor @@ -36,9 +36,10 @@ type Props = BareProps & { */ class Editor extends React.Component { private id: string = `flask-${Date.now()}`; + private editor: any; - componentDidMount () { + public componentDidMount (): void { const { onEdit } = this.props; this.editor = new CodeFlask(`#${this.id}`, { @@ -48,18 +49,18 @@ class Editor extends React.Component { this.editor.updateCode(this.props.code); - this.editor.editorRoot.addEventListener('keydown', () => { + this.editor.editorRoot.addEventListener('keydown', (): void => { this.editor.onUpdate(onEdit); }); } - shouldComponentUpdate (nextProps: Props): boolean { + public shouldComponentUpdate (nextProps: Props): boolean { return ( nextProps.code !== this.props.code ); } - componentDidUpdate () { + public componentDidUpdate (): void { this.editor.updateCode(this.props.code); } diff --git a/packages/ui-app/src/Event.tsx b/packages/ui-app/src/Event.tsx index 2e4035f7c3..2f4ea451eb 100644 --- a/packages/ui-app/src/Event.tsx +++ b/packages/ui-app/src/Event.tsx @@ -2,26 +2,27 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. +import { Codec } from '@polkadot/types/types'; import { BareProps } from './types'; import React from 'react'; -import { Event, getTypeDef } from '@polkadot/types'; +import { Event, TypeDef, getTypeDef } from '@polkadot/types'; import Params from '@polkadot/ui-params'; import { classes } from './util'; -export type Props = BareProps & { - children?: React.ReactNode, - value: Event -}; +export interface Props extends BareProps { + children?: React.ReactNode; + value: Event; +} export default class EventDisplay extends React.PureComponent { public render (): React.ReactNode { const { children, className, style, value } = this.props; - const params = value.typeDef.map(({ type }) => ({ + const params = value.typeDef.map(({ type }): { type: TypeDef } => ({ type: getTypeDef(type) })); - const values = value.data.map((value) => ({ + const values = value.data.map((value): { isValid: boolean; value: Codec } => ({ isValid: true, value })); diff --git a/packages/ui-app/src/Extrinsic.tsx b/packages/ui-app/src/Extrinsic.tsx index b346926ee0..34c14cd605 100644 --- a/packages/ui-app/src/Extrinsic.tsx +++ b/packages/ui-app/src/Extrinsic.tsx @@ -30,7 +30,7 @@ type Props = BareProps & ApiProps & { interface State { methodfn: MethodFunction; - params: { name: string, type: TypeDef }[]; + params: { name: string; type: TypeDef }[]; values: RawParam[]; } @@ -74,12 +74,12 @@ class ExtrinsicDisplay extends React.PureComponent { ); } - private nextState (newState: State): void { - this.setState(newState, () => { + private nextState (newState: Pick< State, never>): void { + this.setState(newState, (): void => { const { onChange } = this.props; const { methodfn, params, values } = this.state; - const isValid = values.reduce((isValid, value) => + const isValid = values.reduce((isValid, value): boolean => isValid && !isUndefined(value) && !isUndefined(value.value) && @@ -91,7 +91,7 @@ class ExtrinsicDisplay extends React.PureComponent { if (isValid) { try { method = methodfn( - ...values.map(({ value }) => value) + ...values.map(({ value }): any => value) ); } catch (error) { // swallow @@ -111,7 +111,7 @@ class ExtrinsicDisplay extends React.PureComponent { } private onChangeValues = (values: RawParam[]): void => { - this.nextState({ values } as State); + this.nextState({ values }); } private getParams (methodfn: MethodFunction): { name: string; type: TypeDef }[] { diff --git a/packages/ui-app/src/FilterOverlay.tsx b/packages/ui-app/src/FilterOverlay.tsx index 32fccdbef6..281425e2f9 100644 --- a/packages/ui-app/src/FilterOverlay.tsx +++ b/packages/ui-app/src/FilterOverlay.tsx @@ -9,9 +9,9 @@ import styled from 'styled-components'; import media from './media'; -type Props = BareProps & { - children: React.ReactNode -}; +interface Props extends BareProps { + children: React.ReactNode; +} class FilterOverlay extends React.PureComponent { public render (): React.ReactNode { diff --git a/packages/ui-app/src/Forget.tsx b/packages/ui-app/src/Forget.tsx index 5acea99bd8..35e0c2ddb9 100644 --- a/packages/ui-app/src/Forget.tsx +++ b/packages/ui-app/src/Forget.tsx @@ -40,7 +40,7 @@ class Forget extends React.PureComponent { ); } - private headerText = () => { + private headerText = (): string => { const { mode = 'account', t } = this.props; switch (mode) { case 'account': @@ -54,8 +54,9 @@ class Forget extends React.PureComponent { } } - private content = () => { + private content = (): React.ReactNode => { const { mode = 'account', t } = this.props; + switch (mode) { case 'account': return ( @@ -88,7 +89,7 @@ class Forget extends React.PureComponent { } } - private renderButtons () { + private renderButtons (): React.ReactNode { const { onClose, onForget, t } = this.props; return ( @@ -110,7 +111,7 @@ class Forget extends React.PureComponent { ); } - private renderContent () { + private renderContent (): React.ReactNode { const { address, code, mode = 'account' } = this.props; switch (mode) { @@ -120,7 +121,7 @@ class Forget extends React.PureComponent { return ( {this.content()} @@ -129,7 +130,7 @@ class Forget extends React.PureComponent { return ( {this.content()} diff --git a/packages/ui-app/src/HelpOverlay.tsx b/packages/ui-app/src/HelpOverlay.tsx index 328e67054a..fa87475a6b 100644 --- a/packages/ui-app/src/HelpOverlay.tsx +++ b/packages/ui-app/src/HelpOverlay.tsx @@ -40,8 +40,8 @@ const Wrapper = styled.div` position: fixed; right: -50rem; top: 0; + transition-duration: .5s; transition-property: all; - transition-duration: .5s; z-index: 10; .help-button { @@ -80,7 +80,7 @@ export default class HelpOverlay extends React.PureComponent { ); } - private renderButton (name: 'close' | 'help circle') { + private renderButton (name: 'close' | 'help circle'): React.ReactNode { return (

{ isValidator: false }; - static getDerivedStateFromProps ({ session_validators = [], staking_bonded, value }: Props, prevState: State): State | null { + public static getDerivedStateFromProps ({ session_validators = [], staking_bonded, value }: Props, prevState: State): State | null { const address = value ? value.toString() : null; const bonded = staking_bonded && staking_bonded.isSome ? staking_bonded.unwrap().toString() : null; - const isValidator = !!session_validators.find((validator) => + const isValidator = !!session_validators.find((validator): boolean => [address, bonded].includes(validator.toString()) ); @@ -86,7 +87,7 @@ class IdentityIcon extends React.PureComponent { return ( - {({ queueAction }) => + {({ queueAction }): React.ReactNode => { : accountId; }; -const createOption = (address: string) => { +const createOption = (address: string): KeyringSectionOption => { let isRecent: boolean | undefined; const pair = keyring.getAccount(address); let name: string | undefined; @@ -91,30 +91,30 @@ const createOption = (address: string) => { class InputAddress extends React.PureComponent { public state: State = {}; - static getDerivedStateFromProps ({ value }: Props): State | null { + public static getDerivedStateFromProps ({ value }: Props): Pick | null { try { return { value: Array.isArray(value) ? value.map(addressToAddress) : (addressToAddress(value) || undefined) - } as State; + }; } catch (error) { return null; } } - static readOptions () { + public static readOptions () { return store.get(STORAGE_KEY) || { defaults: {} }; } - static getLastValue (type: KeyringOption$Type = DEFAULT_TYPE) { + public static getLastValue (type: KeyringOption$Type = DEFAULT_TYPE) { const options = InputAddress.readOptions(); return options.defaults[type]; } - static setLastValue (type: KeyringOption$Type = DEFAULT_TYPE, value: string) { + public static setLastValue (type: KeyringOption$Type = DEFAULT_TYPE, value: string): void { const options = InputAddress.readOptions(); options.defaults[type] = value; @@ -133,7 +133,7 @@ class InputAddress extends React.PureComponent { const lastValue = InputAddress.getLastValue(type); const lastOption = this.getLastOptionValue(); const actualValue = transformToAddress( - isDisabled || (defaultValue && this.hasValue(defaultValue)) + isDisabled || (defaultValue && this.hasValue(defaultValue)) ? defaultValue : ( this.hasValue(lastValue) @@ -141,13 +141,13 @@ class InputAddress extends React.PureComponent { : (lastOption && lastOption.value) ) ); - const actualOptions = options - ? options - : ( - isDisabled && actualValue - ? [createOption(actualValue)] - : (optionsAll ? optionsAll[type] : []) - ); + const actualOptions = options || ( + isDisabled && actualValue + ? [createOption(actualValue)] + : optionsAll + ? optionsAll[type] + : [] + ); let _defaultValue; if (value !== undefined) { @@ -208,9 +208,7 @@ class InputAddress extends React.PureComponent { return; } - const available = optionsAll[type].filter(({ value }) => - !!value - ); + const available = optionsAll[type].filter(({ value }): boolean => !!value); return available.length ? available[available.length - 1] @@ -224,12 +222,10 @@ class InputAddress extends React.PureComponent { return false; } - return !!optionsAll[type].find(({ value }) => - test === value - ); + return !!optionsAll[type].find(({ value }): boolean => test === value); } - private onChange = (address: string) => { + private onChange = (address: string): void => { const { onChange, type } = this.props; InputAddress.setLastValue(type, address); @@ -237,14 +233,14 @@ class InputAddress extends React.PureComponent { onChange && onChange(transformToAccountId(address)); } - private onChangeMulti = (addresses: string[]) => { + private onChangeMulti = (addresses: string[]): void => { const { onChangeMulti } = this.props; if (onChangeMulti) { onChangeMulti( addresses .map(transformToAccountId) - .filter((address) => address) as string[] + .filter((address): string => address as string) as string[] ); } } @@ -253,14 +249,14 @@ class InputAddress extends React.PureComponent { const { isInput = true } = this.props; const query = _query.trim(); const queryLower = query.toLowerCase(); - const matches = filteredOptions.filter((item) => + const matches = filteredOptions.filter((item): boolean => item.value !== null && ( item.name.toLowerCase().indexOf(queryLower) !== -1 || item.value.toLowerCase().indexOf(queryLower) !== -1 ) ); - const valueMatches = matches.filter((item) => + const valueMatches = matches.filter((item): boolean => item.value !== null ); @@ -276,12 +272,12 @@ class InputAddress extends React.PureComponent { } } - return matches.filter((item, index) => { + return matches.filter((item, index): boolean => { const isLast = index === matches.length - 1; const nextItem = matches[index + 1]; const hasNext = nextItem && nextItem.value; - return item.value !== null || (!isLast && hasNext); + return item.value !== null || (!isLast && !!hasNext); }); } } diff --git a/packages/ui-app/src/InputBalance.tsx b/packages/ui-app/src/InputBalance.tsx index e9a18c7e66..dc1b6d1c0d 100644 --- a/packages/ui-app/src/InputBalance.tsx +++ b/packages/ui-app/src/InputBalance.tsx @@ -9,22 +9,22 @@ import React from 'react'; import { BitLengthOption } from '@polkadot/ui-app/constants'; import { InputNumber } from '@polkadot/ui-app'; -type Props = BareProps & { - autoFocus?: boolean, - defaultValue?: BN | string, - help?: React.ReactNode, - isDisabled?: boolean, - isError?: boolean, - label?: any, - maxValue?: BN, - onChange?: (value?: BN) => void, - onEnter?: () => void, - placeholder?: string, - value?: BN | string, - withEllipsis?: boolean, - withLabel?: boolean, - withMax?: boolean -}; +interface Props extends BareProps { + autoFocus?: boolean; + defaultValue?: BN | string; + help?: React.ReactNode; + isDisabled?: boolean; + isError?: boolean; + label?: any; + maxValue?: BN; + onChange?: (value?: BN) => void; + onEnter?: () => void; + placeholder?: string; + value?: BN | string; + withEllipsis?: boolean; + withLabel?: boolean; + withMax?: boolean; +} const DEFAULT_BITLENGTH = BitLengthOption.CHAIN_SPEC as BitLength; diff --git a/packages/ui-app/src/InputBalanceBonded.tsx b/packages/ui-app/src/InputBalanceBonded.tsx index 2bc1bc1409..4aa5e4a559 100644 --- a/packages/ui-app/src/InputBalanceBonded.tsx +++ b/packages/ui-app/src/InputBalanceBonded.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/camelcase */ // Copyright 2017-2019 @polkadot/ui-app authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. @@ -57,8 +58,9 @@ class InputBalanceBonded extends React.PureComponent { maxBalance: ZERO }; } + public render (): React.ReactNode { - const { autoFocus, className, defaultValue, help, isDisabled, isError, label, onChange, onEnter, placeholder,style, value, withEllipsis, withLabel, withMax } = this.props; + const { autoFocus, className, defaultValue, help, isDisabled, isError, label, onChange, onEnter, placeholder, style, value, withEllipsis, withLabel, withMax } = this.props; const { maxBalance } = this.state; return ( @@ -85,7 +87,7 @@ class InputBalanceBonded extends React.PureComponent { ); } - componentDidUpdate (prevProps: Props, prevState: State) { + public componentDidUpdate (prevProps: Props, prevState: State): void { const { balances_all, balances_fees, controllerId, destination } = this.props; const { extrinsic } = this.state; const hasLengthChanged = ((extrinsic && extrinsic.encodedLength) || 0) !== ((prevState.extrinsic && prevState.extrinsic.encodedLength) || 0); @@ -100,7 +102,7 @@ class InputBalanceBonded extends React.PureComponent { } } - private setMaxBalance = () => { + private setMaxBalance = (): void => { const { api, balances_fees = ZERO_FEES, balances_all = ZERO_BALANCE, controllerId, destination, extrinsicProp, system_accountNonce = ZERO } = this.props; const { transactionBaseFee, transactionByteFee } = balances_fees; const { freeBalance } = balances_all; @@ -113,8 +115,8 @@ class InputBalanceBonded extends React.PureComponent { if (extrinsicProp === 'staking.bond') { extrinsic = controllerId && (destination || destination === 0) - ? api.tx.staking.bond(controllerId, prevMax, destination) - : null; + ? api.tx.staking.bond(controllerId, prevMax, destination) + : null; } else if (extrinsicProp === 'staking.unbond') { extrinsic = api.tx.staking.unbond(prevMax); } else if (extrinsicProp === 'staking.bondExtra') { diff --git a/packages/ui-app/src/InputError.tsx b/packages/ui-app/src/InputError.tsx index e6f868585f..44d2f32b4a 100644 --- a/packages/ui-app/src/InputError.tsx +++ b/packages/ui-app/src/InputError.tsx @@ -9,9 +9,9 @@ import Label from 'semantic-ui-react/dist/commonjs/elements/Label/Label'; import { classes } from './util'; -type Props = BareProps & { - label?: React.ReactNode -}; +interface Props extends BareProps { + label?: React.ReactNode; +} const defaultLabel: React.ReactNode = (
 
diff --git a/packages/ui-app/src/InputExtrinsic/SelectMethod.tsx b/packages/ui-app/src/InputExtrinsic/SelectMethod.tsx index d9ee310dcb..6a9dc9dfc7 100644 --- a/packages/ui-app/src/InputExtrinsic/SelectMethod.tsx +++ b/packages/ui-app/src/InputExtrinsic/SelectMethod.tsx @@ -12,13 +12,13 @@ import ApiPromise from '@polkadot/api/promise'; import Dropdown from '../Dropdown'; import { classes } from '../util'; -type Props = BareProps & { - api: ApiPromise, - isError?: boolean, - onChange: (value: MethodFunction) => void, - options: DropdownOptions, - value: MethodFunction -}; +interface Props extends BareProps { + api: ApiPromise; + isError?: boolean; + onChange: (value: MethodFunction) => void; + options: DropdownOptions; + value: MethodFunction; +} export default class SelectMethod extends React.PureComponent { public render (): React.ReactNode { diff --git a/packages/ui-app/src/InputExtrinsic/SelectSection.tsx b/packages/ui-app/src/InputExtrinsic/SelectSection.tsx index e4e49c68ba..5a6d2e71da 100644 --- a/packages/ui-app/src/InputExtrinsic/SelectSection.tsx +++ b/packages/ui-app/src/InputExtrinsic/SelectSection.tsx @@ -11,13 +11,13 @@ import React from 'react'; import Dropdown from '../Dropdown'; import { classes } from '../util'; -type Props = BareProps & { - defaultValue?: string, - isError?: boolean, - onChange: (value: string) => void, - options: DropdownOptions, - value: MethodFunction -}; +interface Props extends BareProps { + defaultValue?: string; + isError?: boolean; + onChange: (value: string) => void; + options: DropdownOptions; + value: MethodFunction; +} export default class SelectSection extends React.PureComponent { public render (): React.ReactNode { diff --git a/packages/ui-app/src/InputExtrinsic/index.tsx b/packages/ui-app/src/InputExtrinsic/index.tsx index 46ef3bc54a..3f42a800b4 100644 --- a/packages/ui-app/src/InputExtrinsic/index.tsx +++ b/packages/ui-app/src/InputExtrinsic/index.tsx @@ -47,11 +47,11 @@ class InputExtrinsic extends React.PureComponent { } as State; } - static getDerivedStateFromProps ({ api }: Props, { value }: State): State | null { + public static getDerivedStateFromProps ({ api }: Props, { value }: State): Pick { return { optionsMethod: methodOptions(api, value.section), optionsSection: sectionOptions(api) - } as State; + }; } public render (): React.ReactNode { @@ -96,7 +96,7 @@ class InputExtrinsic extends React.PureComponent { return; } - this.setState({ value: newValue }, () => + this.setState({ value: newValue }, (): void => onChange(newValue) ); } @@ -112,7 +112,7 @@ class InputExtrinsic extends React.PureComponent { const optionsMethod = methodOptions(api, newSection); const fn = api.tx[newSection][optionsMethod[0].value]; - this.setState({ optionsMethod }, () => + this.setState({ optionsMethod }, (): void => this.onKeyChange(fn) ); } diff --git a/packages/ui-app/src/InputExtrinsic/options/method.tsx b/packages/ui-app/src/InputExtrinsic/options/method.tsx index e6d109704e..fe9c5cc86f 100644 --- a/packages/ui-app/src/InputExtrinsic/options/method.tsx +++ b/packages/ui-app/src/InputExtrinsic/options/method.tsx @@ -2,7 +2,7 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { DropdownOptions } from '../../util/types'; +import { DropdownOption, DropdownOptions } from '../../util/types'; import React from 'react'; import ApiPromise from '@polkadot/api/promise'; @@ -17,11 +17,11 @@ export default function createOptions (api: ApiPromise, sectionName: string): Dr return Object .keys(section) .sort() - .map((value) => { + .map((value): DropdownOption => { const method = section[value]; const inputs = method.meta.args - .filter((arg) => arg.type.toString() !== 'Origin') - .map((arg) => arg.name.toString()) + .filter((arg): boolean => arg.type.toString() !== 'Origin') + .map((arg): string => arg.name.toString()) .join(', '); return { diff --git a/packages/ui-app/src/InputExtrinsic/options/section.ts b/packages/ui-app/src/InputExtrinsic/options/section.ts index 155cf496f7..340eb5c804 100644 --- a/packages/ui-app/src/InputExtrinsic/options/section.ts +++ b/packages/ui-app/src/InputExtrinsic/options/section.ts @@ -10,8 +10,8 @@ export default function createOptions (api: ApiPromise): DropdownOptions { return Object .keys(api.tx) .sort() - .filter((name) => Object.keys(api.tx[name]).length) - .map((name) => ({ + .filter((name): number => Object.keys(api.tx[name]).length) + .map((name): { text: string; value: string } => ({ text: name, value: name })); diff --git a/packages/ui-app/src/InputFile.tsx b/packages/ui-app/src/InputFile.tsx index 705c75f742..fd53642538 100644 --- a/packages/ui-app/src/InputFile.tsx +++ b/packages/ui-app/src/InputFile.tsx @@ -42,12 +42,13 @@ interface LoadEvent { } class InputFile extends React.PureComponent { - dropZone: any; - public state: State; + private dropZone: any; + + public state: State = {}; public constructor (props: Props) { super(props); - this.state = {} as State; + this.dropZone = React.createRef(); } @@ -88,22 +89,22 @@ class InputFile extends React.PureComponent { ) : dropZone; } - private onDrop = (files: File[]) => { + private onDrop = (files: File[]): void => { const { onChange } = this.props; - files.forEach((file) => { + files.forEach((file): void => { const reader = new FileReader(); - reader.onabort = () => { + reader.onabort = (): void => { // ignore }; - reader.onerror = () => { + reader.onerror = (): void => { // ignore }; // @ts-ignore ummm... events are not properly specified here? - reader.onload = ({ target: { result } }: LoadEvent) => { + reader.onload = ({ target: { result } }: LoadEvent): void => { const data = new Uint8Array(result); const name = file.name; diff --git a/packages/ui-app/src/InputNumber.tsx b/packages/ui-app/src/InputNumber.tsx index f2620949fc..4e8bc8b7bc 100644 --- a/packages/ui-app/src/InputNumber.tsx +++ b/packages/ui-app/src/InputNumber.tsx @@ -39,7 +39,7 @@ type Props = BareProps & I18nProps & { interface State { isPreKeyDown: boolean; isValid: boolean; - siOptions: { value: string, text: string }[]; + siOptions: { value: string; text: string }[]; siUnit: string; value: string; valueBN: BN; @@ -54,7 +54,7 @@ class InputNumber extends React.PureComponent { super(props); const { defaultValue, isSi, value } = this.props; - let valueBN = new BN(value || 0); + const valueBN = new BN(value || 0); const si = formatBalance.findSi('-'); this.state = { @@ -63,7 +63,7 @@ class InputNumber extends React.PureComponent { : (defaultValue || valueBN).toString(), isPreKeyDown: false, isValid: !isUndefined(value), - siOptions: formatBalance.getOptions().map(({ power, text, value }) => ({ + siOptions: formatBalance.getOptions().map(({ power, text, value }): { text: string; value: string } => ({ value, text: power === 0 ? InputNumber.units @@ -74,12 +74,13 @@ class InputNumber extends React.PureComponent { }; } - static units: string = 'Unit'; - static setUnit (units: string = InputNumber.units): void { + public static units: string = 'Unit'; + + public static setUnit (units: string = InputNumber.units): void { InputNumber.units = units; } - static getDerivedStateFromProps ({ isDisabled, isSi, defaultValue = '0' }: Props): Partial | null { + public static getDerivedStateFromProps ({ isDisabled, isSi, defaultValue = '0' }: Props): Partial | null { if (!isDisabled || !isSi) { return null; } @@ -120,7 +121,7 @@ class InputNumber extends React.PureComponent { ); } - private renderSiDropdown () { + private renderSiDropdown (): React.ReactNode { const { siOptions, siUnit } = this.state; return ( @@ -134,7 +135,7 @@ class InputNumber extends React.PureComponent { ); } - private renderMaxButton () { + private renderMaxButton (): React.ReactNode { const { valueBN } = this.state; const { maxValue } = this.props; @@ -179,9 +180,9 @@ class InputNumber extends React.PureComponent { private regex = (): RegExp => { const { isDecimal, isSi } = this.props; return new RegExp( - (isSi || isDecimal) ? - `^(0|[1-9]\\d*)(\\${KEYS.DECIMAL}\\d*)?$` : - `^(0|[1-9]\\d*)$` + (isSi || isDecimal) + ? `^(0|[1-9]\\d*)(\\${KEYS.DECIMAL}\\d*)?$` + : `^(0|[1-9]\\d*)$` ); } @@ -215,13 +216,7 @@ class InputNumber extends React.PureComponent { if (event.key.length === 1 && !isPreKeyDown) { const { selectionStart: i, selectionEnd: j, value } = event.target as HTMLInputElement; - const newValue = `${ - value.substring(0, i!) - }${ - event.key - }${ - value.substring(j!) - }`; + const newValue = `${value.substring(0, i || 0)}${event.key}${value.substring(j || 0)}`; if (!this.regex().test(newValue)) { event.preventDefault(); @@ -240,12 +235,11 @@ class InputNumber extends React.PureComponent { if (!this.regex().test(newValue)) { event.preventDefault(); - return; } } private selectSiUnit = (siUnit: string): void => { - this.setState((prevState: State) => { + this.setState((prevState: State): Pick => { const { bitLength, onChange } = this.props; const valueBN = this.inputValueToBn(prevState.value, siUnit); const isValid = this.isValidNumber(valueBN, bitLength); @@ -264,13 +258,13 @@ class InputNumber extends React.PureComponent { }); } - private setToMaxValue = () => { - this.setState((prevState: State) => { + private setToMaxValue = (): void => { + this.setState((prevState: State): Pick => { const { bitLength, maxValue, onChange } = this.props; const { siUnit = prevState.siUnit } = this.state; if (!maxValue) { - return {} as State; + return {}; } const isValid = this.isValidNumber(maxValue, bitLength); @@ -321,16 +315,17 @@ class InputNumber extends React.PureComponent { return `${ div.gt(ZERO) ? div.toString() : '0' }${ - mod.gt(ZERO) ? - (() => { + mod.gt(ZERO) + ? ((): string => { const padding = Math.max( mod.toString().length, base.toString().length - div.toString().length, bn.toString().length - div.toString().length ); + return `.${mod.toString(10, padding).replace(/0*$/, '')}`; - })() : - '' + })() + : '' }`; } diff --git a/packages/ui-app/src/InputRpc/SelectMethod.tsx b/packages/ui-app/src/InputRpc/SelectMethod.tsx index da4bd3c752..27eb877eda 100644 --- a/packages/ui-app/src/InputRpc/SelectMethod.tsx +++ b/packages/ui-app/src/InputRpc/SelectMethod.tsx @@ -13,12 +13,12 @@ import map from '@polkadot/jsonrpc'; import Dropdown from '../Dropdown'; import { classes } from '../util'; -type Props = BareProps & { - isError?: boolean, - onChange: (value: RpcMethod) => void, - options: DropdownOptions, - value: RpcMethod -}; +interface Props extends BareProps { + isError?: boolean; + onChange: (value: RpcMethod) => void; + options: DropdownOptions; + value: RpcMethod; +} export default class SelectMethod extends React.PureComponent { public render (): React.ReactNode { diff --git a/packages/ui-app/src/InputRpc/SelectSection.tsx b/packages/ui-app/src/InputRpc/SelectSection.tsx index cecfb41b08..07054855ba 100644 --- a/packages/ui-app/src/InputRpc/SelectSection.tsx +++ b/packages/ui-app/src/InputRpc/SelectSection.tsx @@ -11,13 +11,13 @@ import React from 'react'; import Dropdown from '../Dropdown'; import { classes } from '../util'; -type Props = BareProps & { - defaultValue?: string, - isError?: boolean, - onChange: (value: string) => void, - options: DropdownOptions, - value: RpcMethod -}; +interface Props extends BareProps { + defaultValue?: string; + isError?: boolean; + onChange: (value: string) => void; + options: DropdownOptions; + value: RpcMethod; +} export default class SelectSection extends React.PureComponent { public render (): React.ReactNode { diff --git a/packages/ui-app/src/InputStorage/SelectKey.tsx b/packages/ui-app/src/InputStorage/SelectKey.tsx index 61cb132ff7..6eec392f6a 100644 --- a/packages/ui-app/src/InputStorage/SelectKey.tsx +++ b/packages/ui-app/src/InputStorage/SelectKey.tsx @@ -14,10 +14,10 @@ import Dropdown from '../Dropdown'; import { classes } from '../util'; type Props = ApiProps & BareProps & { - isError?: boolean, - onChange: (value: StorageEntryPromise) => void, - options: DropdownOptions, - value: StorageEntryPromise + isError?: boolean; + onChange: (value: StorageEntryPromise) => void; + options: DropdownOptions; + value: StorageEntryPromise; }; class SelectKey extends React.PureComponent { diff --git a/packages/ui-app/src/InputStorage/SelectSection.tsx b/packages/ui-app/src/InputStorage/SelectSection.tsx index ce85a1a36d..93712d59e3 100644 --- a/packages/ui-app/src/InputStorage/SelectSection.tsx +++ b/packages/ui-app/src/InputStorage/SelectSection.tsx @@ -11,13 +11,13 @@ import React from 'react'; import Dropdown from '../Dropdown'; import { classes } from '../util'; -type Props = BareProps & { - defaultValue?: StorageEntryPromise, - isError?: boolean, - onChange: (value: string) => void, - options: DropdownOptions, - value: StorageEntryPromise -}; +interface Props extends BareProps { + defaultValue?: StorageEntryPromise; + isError?: boolean; + onChange: (value: string) => void; + options: DropdownOptions; + value: StorageEntryPromise; +} export default class SelectSection extends React.PureComponent { public render (): React.ReactNode { diff --git a/packages/ui-app/src/InputTags.tsx b/packages/ui-app/src/InputTags.tsx index 58ad059690..4425a782f9 100644 --- a/packages/ui-app/src/InputTags.tsx +++ b/packages/ui-app/src/InputTags.tsx @@ -48,7 +48,7 @@ const tags = loadTags(); export default class InputTags extends React.PureComponent { public state: State = { - options: tags.map((value) => ({ + options: tags.map((value): { key: string; text: string; value: string } => ({ key: value, text: value, value })) }; @@ -84,7 +84,7 @@ export default class InputTags extends React.PureComponent { tags.push(value); saveTags(tags); - this.setState(({ options }: State) => ({ + this.setState(({ options }: State): Pick => ({ options: [...options, { key: value, text: value, value }] })); } diff --git a/packages/ui-app/src/Inset.tsx b/packages/ui-app/src/Inset.tsx index 56535f52f0..0b1a06a2cb 100644 --- a/packages/ui-app/src/Inset.tsx +++ b/packages/ui-app/src/Inset.tsx @@ -10,19 +10,19 @@ import styled from 'styled-components'; import Icon from './Icon'; import { classes } from './util'; -export type InsetProps = RouteComponentProps & { - className?: string, - children?: React.ReactNode - isCollapsible?: boolean, - header?: React.ReactNode, - href?: string | null, - withTopMargin?: boolean, - withBottomMargin?: boolean -}; +export interface InsetProps extends RouteComponentProps { + className?: string; + children?: React.ReactNode; + isCollapsible?: boolean; + header?: React.ReactNode; + href?: string | null; + withTopMargin?: boolean; + withBottomMargin?: boolean; +} -type State = { - isCollapsed: boolean -}; +interface State { + isCollapsed: boolean; +} class Inset extends React.PureComponent { public state: State = { @@ -72,14 +72,14 @@ class Inset extends React.PureComponent { ); } - private onClick = () => { + private onClick = (): void => { const { history, href } = this.props; - history.push(href!); + href && history.push(href); } - private toggleCollapsed = () => { - this.setState(({ isCollapsed }: State) => { + private toggleCollapsed = (): void => { + this.setState(({ isCollapsed }: State): Pick => { return { isCollapsed: !isCollapsed }; diff --git a/packages/ui-app/src/Label.tsx b/packages/ui-app/src/Label.tsx index 79831d4e51..9c44de1f88 100644 --- a/packages/ui-app/src/Label.tsx +++ b/packages/ui-app/src/Label.tsx @@ -8,11 +8,11 @@ import React from 'react'; import LabelHelp from './LabelHelp'; -type Props = BareProps & { - help?: React.ReactNode, - label?: React.ReactNode, - withEllipsis?: boolean -}; +interface Props extends BareProps { + help?: React.ReactNode; + label?: React.ReactNode; + withEllipsis?: boolean; +} export default class Label extends React.PureComponent { public render (): React.ReactNode { diff --git a/packages/ui-app/src/LabelHelp.tsx b/packages/ui-app/src/LabelHelp.tsx index fae359d0db..7f7a7b3039 100644 --- a/packages/ui-app/src/LabelHelp.tsx +++ b/packages/ui-app/src/LabelHelp.tsx @@ -11,13 +11,13 @@ import Icon from './Icon'; import { classes } from './util'; import Tooltip from './Tooltip'; -type Props = BareProps & { - help: React.ReactNode -}; +interface Props extends BareProps { + help: React.ReactNode; +} -type State = { - tooltipOpen: boolean -}; +interface State { + tooltipOpen: boolean; +} const Wrapper = styled.div` cursor: help; diff --git a/packages/ui-app/src/Labelled.tsx b/packages/ui-app/src/Labelled.tsx index f84651492d..873b1eb060 100644 --- a/packages/ui-app/src/Labelled.tsx +++ b/packages/ui-app/src/Labelled.tsx @@ -10,16 +10,16 @@ import styled from 'styled-components'; import LabelHelp from './LabelHelp'; import { classes } from './util'; -type Props = BareProps & { - help?: React.ReactNode, - isHidden?: boolean, - isSmall?: boolean, - label?: React.ReactNode, - labelExtra?: React.ReactNode, - children: React.ReactNode, - withLabel?: boolean, - withEllipsis?: boolean -}; +interface Props extends BareProps { + help?: React.ReactNode; + isHidden?: boolean; + isSmall?: boolean; + label?: React.ReactNode; + labelExtra?: React.ReactNode; + children: React.ReactNode; + withLabel?: boolean; + withEllipsis?: boolean; +} const defaultLabel: React.ReactNode = (
 
diff --git a/packages/ui-app/src/LinkPolkascan.tsx b/packages/ui-app/src/LinkPolkascan.tsx index 4bd77199c1..d513a9af6e 100644 --- a/packages/ui-app/src/LinkPolkascan.tsx +++ b/packages/ui-app/src/LinkPolkascan.tsx @@ -14,21 +14,21 @@ import translate from './translate'; export type LinkTypes = 'address' | 'block' | 'extrinsic'; type Props = ApiProps & I18nProps & { - className?: string, - data: string, - type: LinkTypes + className?: string; + data: string; + type: LinkTypes; }; const BASE = 'https://polkascan.io/pre/'; -const CHAINS: { [index: string]: string } = { - 'Alexander': 'alexander' +const CHAINS: Record = { + Alexander: 'alexander' }; -const TYPES: { [index: string]: string } = { - 'address': '/module/account/', - 'block': '/system/block/', - 'extrinsic': '/system/extrinsic/' +const TYPES: Record = { + address: '/module/account/', + block: '/system/block/', + extrinsic: '/system/extrinsic/' }; class LinkPolkascan extends React.PureComponent { @@ -45,7 +45,7 @@ class LinkPolkascan extends React.PureComponent {
{t('View this {{type}} on Polkascan.io', { replace: { type } })} diff --git a/packages/ui-app/src/Menu.tsx b/packages/ui-app/src/Menu.tsx index c2ab3af99c..e674540480 100644 --- a/packages/ui-app/src/Menu.tsx +++ b/packages/ui-app/src/Menu.tsx @@ -6,7 +6,7 @@ import SUIDivider from 'semantic-ui-react/dist/commonjs/elements/Divider/Divider import SUIMenu from 'semantic-ui-react/dist/commonjs/collections/Menu/Menu'; type MenuDef = typeof SUIMenu & { - Divider: typeof SUIDivider + Divider: typeof SUIDivider; }; const Menu: MenuDef = SUIMenu as MenuDef; diff --git a/packages/ui-app/src/Messages.tsx b/packages/ui-app/src/Messages.tsx index e94d961865..994e817737 100644 --- a/packages/ui-app/src/Messages.tsx +++ b/packages/ui-app/src/Messages.tsx @@ -23,11 +23,11 @@ export interface Props extends I18nProps { class Messages extends React.PureComponent { public render (): React.ReactNode { - const { className, contractAbi: { abi: { messages } }, isLabelled, isRemovable, onRemove = () => null, onSelect, t } = this.props; + const { className, contractAbi: { abi: { messages } }, isLabelled, isRemovable, onRemove = (): void => { /* . */ }, onSelect, t } = this.props; return (
- {messages.map((_, index) => { + {messages.map((_, index): React.ReactNode => { return this.renderMessage(index); })} {isRemovable && ( @@ -44,7 +44,7 @@ class Messages extends React.PureComponent { ); } - renderMessage (index: number) { + private renderMessage (index: number): React.ReactNode { const { contractAbi: { abi: { messages } }, onSelect } = this.props; if (!messages[index]) { @@ -63,14 +63,14 @@ class Messages extends React.PureComponent { > {name} ( - {args.map(({ name, type }) => `${name}: ${type}`).join(', ')} + {args.map(({ name, type }): string => `${name}: ${type}`).join(', ')} ) {returnType && `: ${returnType}`} ); } - onSelect = (index: number) => () => { + private onSelect = (index: number): () => void => (): void => { const { address: callAddress, contractAbi: { abi: { messages } }, onSelect } = this.props; if (!callAddress || !messages || !messages[index]) { diff --git a/packages/ui-app/src/Modal.tsx b/packages/ui-app/src/Modal.tsx index 847598aee3..72e83cae90 100644 --- a/packages/ui-app/src/Modal.tsx +++ b/packages/ui-app/src/Modal.tsx @@ -11,15 +11,18 @@ import settings from '@polkadot/ui-settings'; import { classes } from './util'; type Props = BareProps & { - children: React.ReactNode, - [index: string]: any + children: React.ReactNode; + [index: string]: any; }; export default class Modal extends React.PureComponent { - static Actions = SUIModal.Actions; - static Content = SUIModal.Content; - static Header = SUIModal.Header; - static Description = SUIModal.Description; + public static Actions = SUIModal.Actions; + + public static Content = SUIModal.Content; + + public static Header = SUIModal.Header; + + public static Description = SUIModal.Description; public render (): React.ReactNode { const { className } = this.props; diff --git a/packages/ui-app/src/Nonce.tsx b/packages/ui-app/src/Nonce.tsx index 8eed2992ba..821b0f646c 100644 --- a/packages/ui-app/src/Nonce.tsx +++ b/packages/ui-app/src/Nonce.tsx @@ -10,10 +10,10 @@ import { Nonce } from '@polkadot/ui-reactive'; import { classes } from './util'; -export type Props = BareProps & { - label?: React.ReactNode, - params?: AccountId | AccountIndex | Address | string | Uint8Array | null -}; +export interface Props extends BareProps { + label?: React.ReactNode; + params?: AccountId | AccountIndex | Address | string | Uint8Array | null; +} export default class NonceDisplay extends React.PureComponent { public render (): React.ReactNode { @@ -24,12 +24,12 @@ export default class NonceDisplay extends React.PureComponent { } return ( - + ); } } diff --git a/packages/ui-app/src/Output.tsx b/packages/ui-app/src/Output.tsx index e10a80cf10..431d4c20ca 100644 --- a/packages/ui-app/src/Output.tsx +++ b/packages/ui-app/src/Output.tsx @@ -10,17 +10,17 @@ import CopyButton from './CopyButton'; import Labelled from './Labelled'; import { classes } from './util'; -type Props = BareProps & { - children?: React.ReactNode, - help?: React.ReactNode, - isError?: boolean, - isHidden?: boolean, - isMonospace?: boolean, - label?: any, // node? - value?: any, - withCopy?: boolean, - withLabel?: boolean -}; +interface Props extends BareProps { + children?: React.ReactNode; + help?: React.ReactNode; + isError?: boolean; + isHidden?: boolean; + isMonospace?: boolean; + label?: React.ReactNode; + value?: any; + withCopy?: boolean; + withLabel?: boolean; +} export default class Output extends React.PureComponent { public render (): React.ReactNode { diff --git a/packages/ui-app/src/Params/Call.tsx b/packages/ui-app/src/Params/Call.tsx index bc13f6f126..971c668644 100644 --- a/packages/ui-app/src/Params/Call.tsx +++ b/packages/ui-app/src/Params/Call.tsx @@ -2,6 +2,7 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. +import { SubmittableExtrinsicFunction } from '@polkadot/api/types'; import { Props as BaseProps } from '@polkadot/ui-params/types'; import { ApiProps } from '@polkadot/ui-api/types'; @@ -15,7 +16,7 @@ type Props = ApiProps & BaseProps; class Call extends React.PureComponent { public render (): React.ReactNode { const { apiDefaultTx, api, className, isDisabled, isError, label, onChange, onEnter, style, withLabel } = this.props; - const defaultValue = (() => { + const defaultValue = ((): SubmittableExtrinsicFunction<'promise'> => { try { return api.tx.balances.transfer; } catch (error) { diff --git a/packages/ui-app/src/Params/Extrinsic.tsx b/packages/ui-app/src/Params/Extrinsic.tsx index 8360d4b5db..e46bcdc24e 100644 --- a/packages/ui-app/src/Params/Extrinsic.tsx +++ b/packages/ui-app/src/Params/Extrinsic.tsx @@ -11,16 +11,16 @@ import { Method } from '@polkadot/types'; import BaseExtrinsic from '../Extrinsic'; -type Props = BareProps & { - defaultValue: MethodFunction, - isDisabled?: boolean, - isError?: boolean, - isPrivate: boolean, - label: React.ReactNode, - onChange?: RawParamOnChange, - onEnter?: RawParamOnEnter, - withLabel?: boolean -}; +interface Props extends BareProps { + defaultValue: MethodFunction; + isDisabled?: boolean; + isError?: boolean; + isPrivate: boolean; + label: React.ReactNode; + onChange?: RawParamOnChange; + onEnter?: RawParamOnEnter; + withLabel?: boolean; +} export default class ExtrinsicDisplay extends React.PureComponent { public render (): React.ReactNode { @@ -42,7 +42,7 @@ export default class ExtrinsicDisplay extends React.PureComponent { ); } - onChange = (method: Method): void => { + private onChange = (method: Method): void => { const { onChange } = this.props; onChange && onChange({ diff --git a/packages/ui-app/src/Params/Proposal.tsx b/packages/ui-app/src/Params/Proposal.tsx index c05a78eed7..ccf854ccc6 100644 --- a/packages/ui-app/src/Params/Proposal.tsx +++ b/packages/ui-app/src/Params/Proposal.tsx @@ -33,7 +33,7 @@ class ProposalDisplay extends React.PureComponent { ); } - private onChange = ({ isValid, value }: RawParam) => { + private onChange = ({ isValid, value }: RawParam): void => { const { onChange } = this.props; let proposal = null; diff --git a/packages/ui-app/src/Params/index.ts b/packages/ui-app/src/Params/index.ts index 3187ae1088..0be03a3492 100644 --- a/packages/ui-app/src/Params/index.ts +++ b/packages/ui-app/src/Params/index.ts @@ -8,8 +8,8 @@ import Call from './Call'; import Proposal from './Proposal'; const components: ComponentMap = { - 'Call': Call, - 'Proposal': Proposal + Call, + Proposal }; export default components; diff --git a/packages/ui-app/src/Password.tsx b/packages/ui-app/src/Password.tsx index 21dcd17a18..7739fb3521 100644 --- a/packages/ui-app/src/Password.tsx +++ b/packages/ui-app/src/Password.tsx @@ -11,25 +11,25 @@ import { classes } from './util'; import Button from './Button'; import Input from './Input'; -type Props = BareProps & { - autoFocus?: boolean, - children?: React.ReactNode, - defaultValue?: any, - help?: string, - isDisabled?: boolean, - isError?: boolean, - label?: string, - name?: string, - onChange: (value: string) => void, - onEnter?: () => void, - tabIndex?: number, - value: any, - withLabel?: boolean -}; +interface Props extends BareProps { + autoFocus?: boolean; + children?: React.ReactNode; + defaultValue?: any; + help?: string; + isDisabled?: boolean; + isError?: boolean; + label?: string; + name?: string; + onChange: (value: string) => void; + onEnter?: () => void; + tabIndex?: number; + value: any; + withLabel?: boolean; +} -type State = { - isVisible: boolean -}; +interface State { + isVisible: boolean; +} export default class Password extends React.PureComponent { public state: State = { diff --git a/packages/ui-app/src/Progress.tsx b/packages/ui-app/src/Progress.tsx index 87226d1d89..891168e95d 100644 --- a/packages/ui-app/src/Progress.tsx +++ b/packages/ui-app/src/Progress.tsx @@ -15,12 +15,12 @@ import { classes } from './util'; type BaseColors = 'blue' | 'green' | 'red' | 'orange'; export type Colors = 'auto' | 'autoReverse' | BaseColors; -type Props = BareProps & { - color?: Colors, - percent?: BN | number, - total?: UInt | BN | number, - value?: UInt | BN | number -}; +interface Props extends BareProps { + color?: Colors; + percent?: BN | number; + total?: UInt | BN | number; + value?: UInt | BN | number; +} export default class Progress extends React.PureComponent { public render (): React.ReactNode { diff --git a/packages/ui-app/src/ProposedAction.tsx b/packages/ui-app/src/ProposedAction.tsx index bb77f44a02..54e8dda5a8 100644 --- a/packages/ui-app/src/ProposedAction.tsx +++ b/packages/ui-app/src/ProposedAction.tsx @@ -14,16 +14,16 @@ import Inset, { InsetProps } from './Inset'; import TreasuryProposal from './TreasuryProposal'; import { isTreasuryProposalVote } from './util'; -type Props = { - className?: string, - asInset?: boolean, - insetProps?: Partial, - proposal?: Proposal | null, - idNumber: BN | number | string, - isCollapsible?: boolean, - withLinks?: boolean, - expandNested?: boolean -}; +interface Props { + className?: string; + asInset?: boolean; + insetProps?: Partial; + proposal?: Proposal | null; + idNumber: BN | number | string; + isCollapsible?: boolean; + withLinks?: boolean; + expandNested?: boolean; +} export const styles = ` .ui--ProposedAction-extrinsic { diff --git a/packages/ui-app/src/RecentlyOffline.tsx b/packages/ui-app/src/RecentlyOffline.tsx index dc2199924f..078f6d96f6 100644 --- a/packages/ui-app/src/RecentlyOffline.tsx +++ b/packages/ui-app/src/RecentlyOffline.tsx @@ -21,9 +21,9 @@ interface Props extends I18nProps { tooltip?: boolean; } -type State = { - isOpen: boolean -}; +interface State { + isOpen: boolean; +} class RecentlyOffline extends React.PureComponent { public state: State = { @@ -38,8 +38,8 @@ class RecentlyOffline extends React.PureComponent { return null; } - const count = offline.reduce((total, { count }) => total.add(count), new BN(0)); - const blockNumbers = offline.map(({ blockNumber }) => `#${formatNumber(blockNumber)}`); + const count = offline.reduce((total, { count }): BN => total.add(count), new BN(0)); + const blockNumbers = offline.map(({ blockNumber }): string => `#${formatNumber(blockNumber)}`); const text = t('Reported offline {{count}} times, last at {{blockNumber}}', { replace: { count, diff --git a/packages/ui-app/src/Row.tsx b/packages/ui-app/src/Row.tsx index 0854eea6da..c88c7391c0 100644 --- a/packages/ui-app/src/Row.tsx +++ b/packages/ui-app/src/Row.tsx @@ -209,7 +209,7 @@ class Row

extends React.PureComponent' }; @@ -221,7 +221,7 @@ class Row

extends React.PureComponent extends React.PureComponent child).length !== 0 + ? children.filter((child): boolean => !!child).length !== 0 : true; if (!hasChildren) { @@ -248,7 +248,7 @@ class Row

extends React.PureComponent

); } - private renderItem = ({ hasParams, isRoot, name, text, ...tab }: TabItem, index: number) => { + private renderItem = ({ hasParams, isRoot, name, text, ...tab }: TabItem, index: number): React.ReactNode => { const { basePath, isSequence, items } = this.props; const to = isRoot ? basePath @@ -77,7 +71,7 @@ export default class Tabs extends React.PureComponent { {text} {(isSequence && index < items.length - 1) && ( - + )} ); diff --git a/packages/ui-app/src/Toggle.tsx b/packages/ui-app/src/Toggle.tsx index 91d6bf72b0..eecfa5367b 100644 --- a/packages/ui-app/src/Toggle.tsx +++ b/packages/ui-app/src/Toggle.tsx @@ -8,11 +8,11 @@ import React from 'react'; import SUICheckbox from 'semantic-ui-react/dist/commonjs/modules/Checkbox'; import styled from 'styled-components'; -type Props = BareProps & { - defaultValue?: boolean, - label: React.ReactNode, - onChange?: (isChecked: boolean) => void -}; +interface Props extends BareProps { + defaultValue?: boolean; + label: React.ReactNode; + onChange?: (isChecked: boolean) => void; +} class Toggle extends React.PureComponent { public render (): React.ReactNode { diff --git a/packages/ui-app/src/Tooltip.tsx b/packages/ui-app/src/Tooltip.tsx index e74c0d9beb..be79fd02d0 100644 --- a/packages/ui-app/src/Tooltip.tsx +++ b/packages/ui-app/src/Tooltip.tsx @@ -12,14 +12,19 @@ import { classes } from './util'; const rootElement = document.getElementById('tooltips'); -type Props = BareProps & { - dataFor?: string, - effect?: 'solid' | 'float' - offset?: { bottom?: number, left?: number, right?: number, top?: number }, - place?: 'bottom' | 'top' | 'right' | 'left', - text: React.ReactNode, - trigger: string -}; +interface Props extends BareProps { + dataFor?: string; + effect?: 'solid' | 'float'; + offset?: { + bottom?: number; + left?: number; + right?: number; + top?: number; + }; + place?: 'bottom' | 'top' | 'right' | 'left'; + text: React.ReactNode; + trigger: string; +} export default class Tooltip extends React.PureComponent { private tooltipContainer: HTMLElement; @@ -30,13 +35,13 @@ export default class Tooltip extends React.PureComponent { this.tooltipContainer = document.createElement('div'); } - componentDidMount () { + public componentDidMount (): void { if (rootElement !== null) { rootElement.appendChild(this.tooltipContainer); } } - componentWillUnmount () { + public componentWillUnmount (): void { if (rootElement !== null) { rootElement.removeChild(this.tooltipContainer); } diff --git a/packages/ui-app/src/TreasuryProposal.tsx b/packages/ui-app/src/TreasuryProposal.tsx index 0e8622bfda..c37ab19a81 100644 --- a/packages/ui-app/src/TreasuryProposal.tsx +++ b/packages/ui-app/src/TreasuryProposal.tsx @@ -15,18 +15,18 @@ import Inset, { InsetProps } from './Inset'; import translate from './translate'; type Props = I18nProps & ApiProps & { - className?: string, - asInset?: boolean, - insetProps?: Partial, - onClick?: () => void, - proposalId: string, - proposal?: TreasuryProposalType | null, - withLink?: boolean + className?: string; + asInset?: boolean; + insetProps?: Partial; + onClick?: () => void; + proposalId: string; + proposal?: TreasuryProposalType | null; + withLink?: boolean; }; -type State = { - proposal?: TreasuryProposalType | null -}; +interface State { + proposal?: TreasuryProposalType | null; +} class TreasuryProposal extends React.PureComponent { public state: State = {}; @@ -39,14 +39,15 @@ class TreasuryProposal extends React.PureComponent { } } - static getDerivedStateFromProps ({ proposal }: Props, state: State) { + public static getDerivedStateFromProps ({ proposal }: Props, state: State): State | null { if (!state.proposal && proposal) { return { proposal }; } + return null; } - componentDidUpdate () { + public componentDidUpdate (): void { this.fetchProposal(); } @@ -108,17 +109,18 @@ class TreasuryProposal extends React.PureComponent { ); } - private fetchProposal = () => { + private fetchProposal = (): void => { const { api, proposalId } = this.props; if (!this.state.proposal && proposalId) { - api.query.treasury.proposals(proposalId) - .then((proposal) => { + api.query.treasury + .proposals>(proposalId) + .then((proposal): void => { this.setState({ - proposal: (proposal as Option).unwrapOr(null) + proposal: proposal.unwrapOr(null) }); }) - .catch(() => { + .catch((): void => { console.error('Error fetching proposal'); }); } diff --git a/packages/ui-app/src/TxButton.tsx b/packages/ui-app/src/TxButton.tsx index e618a4ff37..45864b9375 100644 --- a/packages/ui-app/src/TxButton.tsx +++ b/packages/ui-app/src/TxButton.tsx @@ -51,17 +51,17 @@ interface Props extends ApiProps { type InnerProps = Props & InjectedProps; interface State { - extrinsic: SubmittableExtrinsic; + extrinsic?: SubmittableExtrinsic; isSending: boolean; } class TxButtonInner extends React.PureComponent { - state = { + public state: State = { isSending: false - } as State; + }; public render (): React.ReactNode { - const { accountId, className, icon, iconSize , isBasic, isDisabled, isNegative, isPrimary, isUnsigned, label, tooltip } = this.props; + const { accountId, className, icon, iconSize, isBasic, isDisabled, isNegative, isPrimary, isUnsigned, label, tooltip } = this.props; const { isSending } = this.state; const needsAccount = isUnsigned ? false @@ -84,7 +84,7 @@ class TxButtonInner extends React.PureComponent { ); } - send = (): void => { + protected send = (): void => { const { accountId, api, extrinsic: propsExtrinsic, isUnsigned, onClick, onFailed, onStart, onSuccess, onUpdate, params = [], queueExtrinsic, tx = '', withSpinner = true } = this.props; let extrinsic: any; @@ -139,12 +139,12 @@ class TxButtonInner extends React.PureComponent { } class TxButton extends React.PureComponent { - button: any = React.createRef(); + protected button: any = React.createRef(); public render (): React.ReactNode { return ( - {({ queueExtrinsic, txqueue }) => ( + {({ queueExtrinsic, txqueue }): React.ReactNode => ( { ); } - send = () => { + protected send = (): void => { this.button.current.send(); } } diff --git a/packages/ui-app/src/TxComponent.tsx b/packages/ui-app/src/TxComponent.tsx index ac9a4a3184..5c16e621d4 100644 --- a/packages/ui-app/src/TxComponent.tsx +++ b/packages/ui-app/src/TxComponent.tsx @@ -5,21 +5,21 @@ import React from 'react'; export default class TxComponent extends React.PureComponent { - button: any; + protected button: any; public constructor (props: P) { super(props); this.button = React.createRef(); } - sendTx = (): void => { + protected sendTx = (): void => { const { component } = this.button.current; if (component) { component.current.send(); } } - submit = (): void => { + protected submit = (): void => { if (this.button && this.button.current && this.button.current.click) { this.button.current.click(); } diff --git a/packages/ui-app/src/TxModal.tsx b/packages/ui-app/src/TxModal.tsx index 14cb43c2c9..f49299e32f 100644 --- a/packages/ui-app/src/TxModal.tsx +++ b/packages/ui-app/src/TxModal.tsx @@ -7,27 +7,27 @@ import { I18nProps } from '@polkadot/ui-app/types'; import React from 'react'; import { Button, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/ui-app'; -export type TxModalProps = I18nProps & { - onSubmit?: () => void, - onClose?: () => void - onSuccess?: () => void, - onFailed?: () => void -}; +export interface TxModalProps extends I18nProps { + onSubmit?: () => void; + onClose?: () => void; + onSuccess?: () => void; + onFailed?: () => void; +} -export type TxModalState = { - accountId?: string | null, - isBusy: boolean, - isOpen: boolean -}; +export interface TxModalState { + accountId?: string | null; + isBusy: boolean; + isOpen: boolean; +} class TxModal

extends TxComponent { protected defaultState: S = { accountId: null, isOpen: false, isBusy: false - } as S; + } as unknown as S; - state: S = this.defaultState; + public state: S = this.defaultState; public render (): React.ReactNode { const { isOpen } = this.state; @@ -58,9 +58,13 @@ class TxModal

extends TxComponen } protected headerText = (): React.ReactNode => ''; + protected accountHelp = (): React.ReactNode => this.props.t('Select the account to use for this action.'); + protected accountLabel = (): React.ReactNode => this.props.t('using my account'); + protected submitLabel = (): React.ReactNode => this.props.t('Submit'); + protected cancelLabel = (): React.ReactNode => this.props.t('Cancel'); protected onChangeAccount = (accountId: string | null): void => { @@ -89,26 +93,30 @@ class TxModal

extends TxComponen onFailed && onFailed(); } - isDisabled = (): boolean => { + protected isDisabled = (): boolean => { const { accountId } = this.state; return !accountId; } - protected toggleBusy = (isBusy: boolean) => () => { - this.setState({ - isBusy - }); - } + protected toggleBusy = (isBusy: boolean): () => void => + (): void => { + this.setState({ + isBusy + }); + } - protected txMethod: () => string = () => ''; - protected txParams: () => any[] = () => []; + protected txMethod: () => string = (): string => ''; - protected renderContent: () => React.ReactNode | null = () => null; - protected renderPreContent: () => React.ReactNode | null = () => null; - protected renderTrigger?: () => React.ReactNode | null = () => null; + protected txParams: () => any[] = (): any[] => []; - protected renderButtons: () => React.ReactNode | null = () => { + protected renderContent: () => React.ReactNode = (): React.ReactNode => null; + + protected renderPreContent: () => React.ReactNode = (): React.ReactNode => null; + + protected renderTrigger?: () => React.ReactNode = (): React.ReactNode => null; + + protected renderButtons: () => React.ReactNode = (): React.ReactNode => { return ( {this.renderCancelButton()} @@ -117,7 +125,7 @@ class TxModal

extends TxComponen ); } - protected renderInputAccount () { + protected renderInputAccount (): React.ReactNode { const { accountId, isBusy } = this.state; return ( @@ -134,7 +142,7 @@ class TxModal

extends TxComponen ); } - protected renderTxButton () { + protected renderTxButton (): React.ReactNode { const { accountId } = this.state; return ( @@ -153,7 +161,7 @@ class TxModal

extends TxComponen ); } - protected renderCancelButton () { + protected renderCancelButton (): React.ReactNode { const { t } = this.props; return ( @@ -168,22 +176,23 @@ class TxModal

extends TxComponen ); } - protected reset = () => { + protected reset = (): void => { this.setState( this.defaultState ); } - protected showModal = () => { + protected showModal = (): void => { this.setState({ isOpen: true }); } - protected hideModal = () => { + protected hideModal = (): void => { const { onClose } = this.props; onClose && onClose(); + this.setState( this.defaultState ); diff --git a/packages/ui-app/src/Voting.tsx b/packages/ui-app/src/Voting.tsx index 6fddb18f35..090e9672e1 100644 --- a/packages/ui-app/src/Voting.tsx +++ b/packages/ui-app/src/Voting.tsx @@ -35,27 +35,28 @@ interface State extends TxModalState { class Voting extends TxModal { public state: State; - headerText = () => { + protected headerText = (): string => { const { isCouncil, t } = this.props; - return t(isCouncil ? 'Vote on council proposal' : 'Vote on proposal'); + return isCouncil ? t('Vote on council proposal') : t('Vote on proposal'); } - accountLabel = () => this.props.t('Vote with account'); - accountHelp = () => this.props.t('Select the account you wish to vote with. You can approve "aye" or deny "nay" the proposal.'); + protected accountLabel = (): string => this.props.t('Vote with account'); - txMethod = () => { + protected accountHelp = (): string => this.props.t('Select the account you wish to vote with. You can approve "aye" or deny "nay" the proposal.'); + + protected txMethod = (): string => { const { isCouncil } = this.props; return isCouncil ? 'collective.vote' : 'democracy.vote'; } - txParams = () => { + protected txParams = (): any[] => { const { hash, idNumber, isCouncil } = this.props; const { voteValue } = this.state; return isCouncil - ? [hash!, idNumber, voteValue] + ? [hash, idNumber, voteValue] : [idNumber, voteValue]; } @@ -74,7 +75,7 @@ class Voting extends TxModal { }; } - renderPreContent = () => { + protected renderPreContent = (): React.ReactNode => { const { idNumber, proposal } = this.props; return ( @@ -91,7 +92,7 @@ class Voting extends TxModal { ); } - renderContent = () => { + protected renderContent = (): React.ReactNode => { const { t } = this.props; const { voteOptions, voteValue } = this.state; @@ -106,7 +107,7 @@ class Voting extends TxModal { ); } - renderTrigger = () => { + protected renderTrigger = (): React.ReactNode => { const { t } = this.props; return ( @@ -121,7 +122,7 @@ class Voting extends TxModal { ); } - private onChangeVote = (voteValue: boolean) => { + private onChangeVote = (voteValue: boolean): void => { this.setState({ voteValue }); } } diff --git a/packages/ui-app/src/i18n.ts b/packages/ui-app/src/i18n.ts index 3f26013689..c5443368e0 100644 --- a/packages/ui-app/src/i18n.ts +++ b/packages/ui-app/src/i18n.ts @@ -27,7 +27,7 @@ i18n wait: true } }) - .then(() => console.log('i18n: success')) - .catch((error) => console.log('i18n: failure', error)); + .then((): void => console.log('i18n: success')) + .catch((error): void => console.log('i18n: failure', error)); export default i18n; diff --git a/packages/ui-app/src/types.ts b/packages/ui-app/src/types.ts index a2d64ebe2c..bf1de26014 100644 --- a/packages/ui-app/src/types.ts +++ b/packages/ui-app/src/types.ts @@ -8,18 +8,16 @@ import { LocationDescriptorObject } from 'history'; import { WithTranslation } from 'react-i18next'; import { ActionStatus } from '@polkadot/ui-app/Status/types'; -export type BareProps = { - className?: string, - style?: { - [index: string]: any - } -}; +export interface BareProps { + className?: string; + style?: Record; +} -export type AppProps = { - basePath: string, - location: LocationDescriptorObject, - onStatusChange: (status: ActionStatus) => void -}; +export interface AppProps { + basePath: string; + location: LocationDescriptorObject; + onStatusChange: (status: ActionStatus) => void; +} export type I18nProps = BareProps & WithTranslation; diff --git a/packages/ui-app/src/util/classes.ts b/packages/ui-app/src/util/classes.ts index b29ebff01f..61a25b0ffc 100644 --- a/packages/ui-app/src/util/classes.ts +++ b/packages/ui-app/src/util/classes.ts @@ -2,8 +2,8 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -export default function classes (...classNames: any[]): string { +export default function classes (...classNames: (boolean | null | string | undefined)[]): string { return classNames - .filter((className) => className) + .filter((className): boolean => !!className) .join(' '); } diff --git a/packages/ui-app/src/util/isTreasuryProposalVote.ts b/packages/ui-app/src/util/isTreasuryProposalVote.ts index 8eab5c32d4..8d0b2ff5ff 100644 --- a/packages/ui-app/src/util/isTreasuryProposalVote.ts +++ b/packages/ui-app/src/util/isTreasuryProposalVote.ts @@ -11,7 +11,7 @@ export default function isTreasuryProposalVote (proposal?: Proposal | null): boo const { method, section } = Method.findFunction(proposal.callIndex); - return section === 'treasury' - && ['approveProposal', 'rejectProposal'].includes(method) - && !!proposal.args[0]; + return section === 'treasury' && + ['approveProposal', 'rejectProposal'].includes(method) && + !!proposal.args[0]; } diff --git a/packages/ui-app/src/util/toAddress.ts b/packages/ui-app/src/util/toAddress.ts index cd842d47eb..e9d6de94cc 100644 --- a/packages/ui-app/src/util/toAddress.ts +++ b/packages/ui-app/src/util/toAddress.ts @@ -10,14 +10,17 @@ export default function toAddress (value?: string | Uint8Array): string | undefi return; } + let address: string | undefined; + try { - return keyring.encodeAddress( + address = keyring.encodeAddress( isHex(value) ? hexToU8a(value) : keyring.decodeAddress(value) ); } catch (error) { console.error('Unable to encode address', value); - return; } + + return address; } diff --git a/packages/ui-params/src/Param/Bare.tsx b/packages/ui-params/src/Param/Bare.tsx index 8c044755a1..caef22b684 100644 --- a/packages/ui-params/src/Param/Bare.tsx +++ b/packages/ui-params/src/Param/Bare.tsx @@ -7,9 +7,9 @@ import { BareProps } from '@polkadot/ui-app/types'; import React from 'react'; import { classes } from '@polkadot/ui-app/util'; -type Props = BareProps & { - children: React.ReactNode -}; +interface Props extends BareProps { + children: React.ReactNode; +} export default class Bare extends React.PureComponent { public render (): React.ReactNode { diff --git a/packages/ui-params/src/Param/Base.tsx b/packages/ui-params/src/Param/Base.tsx index 58e5fede58..a02ee68030 100644 --- a/packages/ui-params/src/Param/Base.tsx +++ b/packages/ui-params/src/Param/Base.tsx @@ -10,13 +10,13 @@ import { Labelled } from '@polkadot/ui-app'; import Bare from './Bare'; -type Props = BareProps & { - children: React.ReactNode, - isDisabled?: boolean, - label?: React.ReactNode, - size?: Size, - withLabel?: boolean -}; +interface Props extends BareProps { + children: React.ReactNode; + isDisabled?: boolean; + label?: React.ReactNode; + size?: Size; + withLabel?: boolean; +} export default class Base extends React.PureComponent { public render (): React.ReactNode { diff --git a/packages/ui-params/src/Param/BaseBytes.tsx b/packages/ui-params/src/Param/BaseBytes.tsx index 452e884895..73adea9b63 100644 --- a/packages/ui-params/src/Param/BaseBytes.tsx +++ b/packages/ui-params/src/Param/BaseBytes.tsx @@ -11,13 +11,13 @@ import { hexToU8a, isHex, u8aToHex } from '@polkadot/util'; import Bare from './Bare'; -type Props = BaseProps & { - children?: React.ReactNode, - length?: number, - size?: Size, - validate?: (u8a: Uint8Array) => boolean, - withLength?: boolean -}; +interface Props extends BaseProps { + children?: React.ReactNode; + length?: number; + size?: Size; + validate?: (u8a: Uint8Array) => boolean; + withLength?: boolean; +} const defaultValidate = (): boolean => true; @@ -62,7 +62,7 @@ export default class BaseBytes extends React.PureComponent { const { length = -1, onChange, validate = defaultValidate, withLength } = this.props; let value: Uint8Array; - let isValid: boolean = true; + let isValid = true; try { value = hexToU8a(hex); diff --git a/packages/ui-params/src/Param/Bytes.tsx b/packages/ui-params/src/Param/Bytes.tsx index 62617141ea..b8abcfa59c 100644 --- a/packages/ui-params/src/Param/Bytes.tsx +++ b/packages/ui-params/src/Param/Bytes.tsx @@ -11,9 +11,9 @@ import { Button } from '@polkadot/ui-app'; import BaseBytes from './BaseBytes'; import File from './File'; -type State = { - isFileDrop: boolean -}; +interface State { + isFileDrop: boolean; +} export default class Bytes extends React.PureComponent { public state: State = { @@ -29,7 +29,7 @@ export default class Bytes extends React.PureComponent { : this.renderInput(); } - private renderInput () { + private renderInput (): React.ReactNode { const { className, defaultValue, isDisabled, isError, label, name, onChange, onEnter, style, type, withLabel } = this.props; return ( @@ -54,7 +54,7 @@ export default class Bytes extends React.PureComponent { ); } - private renderFileButton () { + private renderFileButton (): React.ReactNode { const { isDisabled } = this.props; if (isDisabled) { @@ -70,7 +70,7 @@ export default class Bytes extends React.PureComponent { ); } - private renderFile () { + private renderFile (): React.ReactNode { const { className, isDisabled, isError, label, style, withLabel } = this.props; return ( @@ -86,10 +86,10 @@ export default class Bytes extends React.PureComponent { ); } - private toggleFile = () => { - this.setState(({ isFileDrop }: State) => ({ + private toggleFile = (): void => { + this.setState(({ isFileDrop }: State): State => ({ isFileDrop: !isFileDrop - })); + } as unknown as State)); } private onChangeFile = (value: Uint8Array): void => { diff --git a/packages/ui-params/src/Param/Code.tsx b/packages/ui-params/src/Param/Code.tsx index e16cb1341f..c0065eb4a6 100644 --- a/packages/ui-params/src/Param/Code.tsx +++ b/packages/ui-params/src/Param/Code.tsx @@ -30,7 +30,7 @@ export default class Code extends React.PureComponent { ); } - private renderDisabled () { + private renderDisabled (): React.ReactNode { const { className, defaultValue, isError, label, onEnter, style, type, withLabel } = this.props; return ( diff --git a/packages/ui-params/src/Param/File.tsx b/packages/ui-params/src/Param/File.tsx index abbf50716c..ef21748873 100644 --- a/packages/ui-params/src/Param/File.tsx +++ b/packages/ui-params/src/Param/File.tsx @@ -9,15 +9,15 @@ import { InputFile } from '@polkadot/ui-app'; import Bare from './Bare'; -type Props = BareProps & { - defaultValue?: any, - isDisabled?: boolean, - isError?: boolean, - label?: React.ReactNode, - onChange?: (contents: Uint8Array) => void, - placeholder?: string, - withLabel?: boolean -}; +interface Props extends BareProps { + defaultValue?: any; + isDisabled?: boolean; + isError?: boolean; + label?: React.ReactNode; + onChange?: (contents: Uint8Array) => void; + placeholder?: string; + withLabel?: boolean; +} export default class File extends React.PureComponent { public render (): React.ReactNode { diff --git a/packages/ui-params/src/Param/KeyValue.tsx b/packages/ui-params/src/Param/KeyValue.tsx index 04f7567e1c..eabcb264e7 100644 --- a/packages/ui-params/src/Param/KeyValue.tsx +++ b/packages/ui-params/src/Param/KeyValue.tsx @@ -11,15 +11,15 @@ import { hexToU8a, u8aConcat } from '@polkadot/util'; import Bare from './Bare'; -type State$Param = { - isValid: boolean, - u8a: Uint8Array -}; +interface StateParam { + isValid: boolean; + u8a: Uint8Array; +} -type State = { - key: State$Param, - value: State$Param -}; +interface State { + key: StateParam; + value: StateParam; +} export default class KeyValue extends React.PureComponent { public state: State = { @@ -66,7 +66,7 @@ export default class KeyValue extends React.PureComponent { ); } - static createParam (hex: string, length: number = -1): State$Param { + public static createParam (hex: string, length: number = -1): StateParam { let u8a; try { @@ -85,9 +85,9 @@ export default class KeyValue extends React.PureComponent { }; } - nextState (newState: State): void { + private nextState (newState: Partial): void { this.setState( - (prevState: State, { onChange }: Props) => { + (prevState: State, { onChange }: Props): State => { const { key = prevState.key, value = prevState.value } = newState; onChange && onChange({ @@ -98,16 +98,16 @@ export default class KeyValue extends React.PureComponent { ) }); - return newState; + return newState as State; } ); } - onChangeKey = (key: string): void => { - this.nextState({ key: KeyValue.createParam(key) } as State); + private onChangeKey = (key: string): void => { + this.nextState({ key: KeyValue.createParam(key) }); } - onChangeValue = (value: string): void => { - this.nextState({ value: KeyValue.createParam(value) } as State); + private onChangeValue = (value: string): void => { + this.nextState({ value: KeyValue.createParam(value) }); } } diff --git a/packages/ui-params/src/Param/KeyValueArray.tsx b/packages/ui-params/src/Param/KeyValueArray.tsx index a7afdd698a..cd7b9d3528 100644 --- a/packages/ui-params/src/Param/KeyValueArray.tsx +++ b/packages/ui-params/src/Param/KeyValueArray.tsx @@ -68,7 +68,7 @@ class KeyValueArray extends React.PureComponent { ); } - private renderReadOnly () { + private renderReadOnly (): React.ReactNode { const { className, defaultValue: { value }, label, onEnter, style } = this.props; const pairs = value as Vector; @@ -83,12 +83,12 @@ class KeyValueArray extends React.PureComponent {

- {pairs.map(({ key, value }) => { + {pairs.map(({ key, value }): React.ReactNode => { const keyHex = u8aToHex(key.toU8a(true)); return ( { const json = JSON.parse(u8aToString(raw)); const keys = Object.keys(json); let isValid = keys.length !== 0; - const value = keys.map((key) => { + const value = keys.map((key): { key: Uint8Array; value: Uint8Array } => { const value = json[key]; assert(isHex(key) && isHex(value), `Non-hex key/value pair found in ${key.toString()} => ${value.toString()}`); diff --git a/packages/ui-params/src/Param/Moment.tsx b/packages/ui-params/src/Param/Moment.tsx index ab9d576962..0279815905 100644 --- a/packages/ui-params/src/Param/Moment.tsx +++ b/packages/ui-params/src/Param/Moment.tsx @@ -33,7 +33,7 @@ export default class Code extends React.PureComponent { ); } - private renderDisabled () { + private renderDisabled (): React.ReactNode { const { className, defaultValue, isError, label, style, withLabel } = this.props; return ( diff --git a/packages/ui-params/src/Param/Null.tsx b/packages/ui-params/src/Param/Null.tsx index b869b3c391..a3d6162bbd 100644 --- a/packages/ui-params/src/Param/Null.tsx +++ b/packages/ui-params/src/Param/Null.tsx @@ -7,7 +7,7 @@ import { Props } from '../types'; import React from 'react'; export default class Null extends React.PureComponent { - componentDidMount () { + public componentDidMount (): void { const { onChange } = this.props; onChange && onChange({ diff --git a/packages/ui-params/src/Param/Static.tsx b/packages/ui-params/src/Param/Static.tsx index 07d6703d8a..04da43b8c1 100644 --- a/packages/ui-params/src/Param/Static.tsx +++ b/packages/ui-params/src/Param/Static.tsx @@ -12,8 +12,8 @@ import translate from '@polkadot/ui-app/translate'; import Bare from './Bare'; type Props = BareProps & WithTranslation & { - defaultValue: RawParam, - withLabel?: boolean + defaultValue: RawParam; + withLabel?: boolean; }; class StaticParam extends React.PureComponent { diff --git a/packages/ui-params/src/Param/Struct.tsx b/packages/ui-params/src/Param/Struct.tsx index bf73c1159d..4f695416a8 100644 --- a/packages/ui-params/src/Param/Struct.tsx +++ b/packages/ui-params/src/Param/Struct.tsx @@ -13,10 +13,10 @@ import Static from './Static'; type Props = BaseProps; -type State = { - defs: TypeDef[], - type: string | null -}; +interface State { + defs: TypeDef[]; + type: string | null; +} export default class StructParam extends React.PureComponent { public state: State = { @@ -24,7 +24,7 @@ export default class StructParam extends React.PureComponent { type: null }; - static getDerivedStateFromProps ({ type: { type } }: Props, prevState: State) { + public static getDerivedStateFromProps ({ type: { type } }: Props, prevState: State): State | null { if (prevState.type === type) { return null; } @@ -34,7 +34,7 @@ export default class StructParam extends React.PureComponent { return { defs, type - } as State; + } as unknown as State; } public render (): React.ReactNode { @@ -45,7 +45,7 @@ export default class StructParam extends React.PureComponent { } const { defs } = this.state; - const params = defs.map((type) => ({ name: type.name, type })); + const params = defs.map((type): { name?: string; type: TypeDef } => ({ name: type.name, type })); return (
@@ -74,11 +74,11 @@ export default class StructParam extends React.PureComponent { onChange({ isValid: values.reduce((result, { isValid }): boolean => result && isValid, true as boolean), - value: defs.reduce((value, { name }, index) => { + value: defs.reduce((value, { name }, index): Record => { value[name as string] = values[index].value; return value; - }, {} as Record) + }, {} as unknown as Record) }); } } diff --git a/packages/ui-params/src/Param/Tuple.tsx b/packages/ui-params/src/Param/Tuple.tsx index 2ee9590e00..0a35ddc917 100644 --- a/packages/ui-params/src/Param/Tuple.tsx +++ b/packages/ui-params/src/Param/Tuple.tsx @@ -2,10 +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 { TypeDef } from '@polkadot/types'; +import { Codec } from '@polkadot/types/types'; import { Props, RawParam } from '../types'; import React from 'react'; +import { TypeDef } from '@polkadot/types'; import { isUndefined } from '@polkadot/util'; import Bare from './Bare'; @@ -35,7 +36,7 @@ export default class Tuple extends React.PureComponent { const subTypes = sub && Array.isArray(sub) ? sub : []; - const values = (value as any[]).map((value) => + const values = (value as any[]).map((value): { isValid: boolean; value: Codec } => isUndefined(value) || isUndefined(value.isValid) ? { isValid: !isUndefined(value), @@ -45,8 +46,8 @@ export default class Tuple extends React.PureComponent { ); return { - Components: subTypes.map((type) => findComponent(type)), - sub: subTypes.map(({ type }) => type), + Components: subTypes.map((type): React.ComponentType => findComponent(type)), + sub: subTypes.map(({ type }): string => type), subTypes, type, values @@ -62,7 +63,7 @@ export default class Tuple extends React.PureComponent { className={className} style={style} > - {Components.map((Component, index) => ( + {Components.map((Component, index): React.ReactNode => ( { ); } - private onChange = (index: number) => { + private onChange = (index: number): (value: RawParam) => void => { return (value: RawParam): void => { this.setState( - ({ values }: State) => ({ - values: values.map((svalue, sindex) => + ({ values }: State): State => ({ + values: values.map((svalue, sindex): RawParam => (sindex === index) ? value : svalue - )}), - () => { + ) + } as unknown as State), + (): void => { const { values } = this.state; const { onChange } = this.props; onChange && onChange({ - isValid: values.reduce((result: boolean, { isValid }) => result && isValid, true), - value: values.map(({ value }) => value) + isValid: values.reduce((result: boolean, { isValid }): boolean => result && isValid, true), + value: values.map(({ value }): any => value) }); } ); diff --git a/packages/ui-params/src/Param/Unknown.tsx b/packages/ui-params/src/Param/Unknown.tsx index 3d48ad4837..a6f3231f87 100644 --- a/packages/ui-params/src/Param/Unknown.tsx +++ b/packages/ui-params/src/Param/Unknown.tsx @@ -9,10 +9,10 @@ import React from 'react'; import BaseBytes from './BaseBytes'; import Static from './Static'; -type Props = BareProps & { - defaultValue: RawParam, - withLabel?: boolean -}; +interface Props extends BareProps { + defaultValue: RawParam; + withLabel?: boolean; +} export default class Unknown extends React.PureComponent { public render (): React.ReactNode { diff --git a/packages/ui-params/src/Param/VoteThreshold.tsx b/packages/ui-params/src/Param/VoteThreshold.tsx index 02673933e2..44a38d605b 100644 --- a/packages/ui-params/src/Param/VoteThreshold.tsx +++ b/packages/ui-params/src/Param/VoteThreshold.tsx @@ -11,7 +11,7 @@ import { bnToBn } from '@polkadot/util'; import Bare from './Bare'; -type TextMap = { [index: number]: string }; +type TextMap = Record; const options = [ { text: 'Super majority approval', value: 0 }, @@ -19,11 +19,11 @@ const options = [ { text: 'Simple majority', value: 2 } ]; -export const textMap = options.reduce((textMap, { text, value }) => { +export const textMap = options.reduce((textMap, { text, value }): TextMap => { textMap[value] = text; return textMap; -}, {} as TextMap); +}, {} as unknown as TextMap); export default class VoteThresholdParam extends React.PureComponent { public render (): React.ReactNode {