Some initial pre-eslint cleanups (#1383)

* Some initial cleanups

* Make it lint

* Small s/type/interface/ additions

* Small minor s/type/interface/

* More type -> interface

* Add lint:new rule

* Some small updates

* Cleanup dangling tslint  issues

* Small updates

* ui-signer cleanups

* ui-reactive updated

* Make lint:new run

* Mini ui-params cleanups

* Some additions

* Tiny... and done for now.

* 1950 problems (1241 errors, 709 warnings)

* 1829 problems (1181 errors, 648 warnings)

* 1674 problems (1181 errors, 493 warnings) (no any... for now)

* Small additions.

* Array<T> -> T[] (all)

.eslintignore

@@ -0,0 +1,3 @@
+**/build/*
+**/coverage/*
+**/node_modules/*

.eslintrc.js

@@ -0,0 +1,10 @@
+const base = require('@polkadot/dev-react/config/eslint');
+
+// add override for any (a metric ton of them, initial conversion)
+module.exports = {
+  ...base,
+  rules: {
+    ...base.rules,
+    '@typescript-eslint/no-explicit-any': 'off'
+  }
+};

jest.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const config = require('@polkadot/dev-react/config/jest');
 const findPackages = require('./scripts/findPackages');
 

package.json

@@ -24,8 +24,9 @@
     "analyze": "yarn run build && cd packages/apps && yarn run source-map-explorer build/main.*.js",
     "build": "NODE_ENV=production polkadot-dev-build-ts",
     "check": "yarn lint",
-    "lint": "tslint --project . && tsc --noEmit --pretty",
     "clean": "polkadot-dev-clean-build",
+    "lint": "tslint --project . && tsc --noEmit --pretty",
+    "lint:new": "eslint --ext .js,.jsx,.ts,.tsx . && tsc --noEmit --pretty",
     "postinstall": "polkadot-dev-yarn-only",
     "test": "echo \"skipping tests\"",
     "vanitygen": "node packages/app-accounts/scripts/vanitygen.js",

packages/app-123code/src/AccountSelector.tsx

@@ -7,19 +7,19 @@ import styled from 'styled-components';
 import { Bubble, InputAddress } from '@polkadot/ui-app';
 import { AccountIndex, Balance, Nonce } from '@polkadot/ui-reactive';
 
-type Props = {
-  className?: string,
-  onChange: (accountId?: string) => void
-};
+interface Props {
+  className?: string;
+  onChange: (accountId?: string) => void;
+}
 
-type State = {
-  accountId?: string
-};
+interface State {
+  accountId?: string;
+}
 
 class AccountSelector extends React.PureComponent<Props, State> {
-  state: State = {};
+  public state: State = {};
 
-  render () {
+  public render (): React.ReactNode {
     const { className } = this.props;
     const { accountId } = this.state;
 
@@ -49,7 +49,7 @@ class AccountSelector extends React.PureComponent<Props, State> {
   private onChange = (accountId?: string): void => {
     const { onChange } = this.props;
 
-    this.setState({ accountId }, () =>
+    this.setState({ accountId }, (): void =>
       onChange(accountId)
     );
   }

packages/app-123code/src/Summary.tsx

@@ -7,12 +7,12 @@ import { BareProps } from '@polkadot/ui-app/types';
 import React from 'react';
 import styled from 'styled-components';
 
-type Props = BareProps & {
-  children: React.ReactNode
-};
+interface Props extends BareProps {
+  children: React.ReactNode;
+}
 
 class Summary extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { children, className, style } = this.props;
 
     return (

packages/app-123code/src/SummaryBar.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/app-123code authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
@@ -15,38 +16,40 @@ import { formatBalance, formatNumber } from '@polkadot/util';
 import translate from './translate';
 
 type Props = ApiProps & BareProps & I18nProps & {
-  balances_totalIssuance?: BN,
-  chain_bestNumber?: BN,
-  chain_bestNumberLag?: BN,
-  chain_getRuntimeVersion?: RuntimeVersion,
-  session_validators?: Array<AccountId>,
-  staking_intentions?: Array<AccountId>,
-  system_chain?: string,
-  system_name?: string,
-  system_version?: string
-};
-type State = {
-  nextUp: Array<AccountId>
+  balances_totalIssuance?: BN;
+  chain_bestNumber?: BN;
+  chain_bestNumberLag?: BN;
+  chain_getRuntimeVersion?: RuntimeVersion;
+  session_validators?: AccountId[];
+  staking_intentions?: AccountId[];
+  system_chain?: string;
+  system_name?: string;
+  system_version?: string;
 };
+interface State {
+  nextUp: AccountId[];
+}
 
 class SummaryBar extends React.PureComponent<Props, State> {
-  state: State = {
+  public state: State = {
     nextUp: []
   };
 
-  static getDerivedStateFromProps ({ staking_intentions, session_validators }: Props): State | null {
+  public static getDerivedStateFromProps ({ staking_intentions, session_validators }: Props): State | null {
     if (!staking_intentions || !session_validators) {
       return null;
     }
 
     return {
-      nextUp: staking_intentions.filter((accountId) =>
-        !session_validators.find((validatorId) => validatorId.eq(accountId))
+      nextUp: staking_intentions.filter((accountId): boolean =>
+        !session_validators.find((validatorId): boolean =>
+          validatorId.eq(accountId)
+        )
       )
     };
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { balances_totalIssuance, chain_bestNumber, chain_bestNumberLag, chain_getRuntimeVersion, session_validators = [], system_chain, system_name, system_version } = this.props;
     const { nextUp } = this.state;
 
@@ -68,12 +71,12 @@ class SummaryBar extends React.PureComponent<Props, State> {
             {formatNumber(chain_bestNumber)} ({formatNumber(chain_bestNumberLag)} lag)
           </Bubble>
           <Bubble icon='chess queen' label='validators'>{
-            session_validators.map((accountId, index) => (
+            session_validators.map((accountId, index): React.ReactNode => (
               <IdentityIcon key={index} value={accountId} size={20} />
             ))
           }</Bubble>
           <Bubble icon='chess bishop' label='next up'>{
-            nextUp.map((accountId, index) => (
+            nextUp.map((accountId, index): React.ReactNode => (
               <IdentityIcon key={index} value={accountId} size={20} />
             ))
           }</Bubble>

packages/app-123code/src/Transfer.tsx

@@ -8,18 +8,18 @@ import { Button, InputAddress, InputBalance, TxButton, TxComponent } from '@polk
 
 import Summary from './Summary';
 
-type Props = {
-  accountId?: string
-};
-type State = {
+interface Props {
+  accountId?: string;
+}
+interface State {
   amount?: BN;
   recipientId?: string;
-};
+}
 
 export default class Transfer extends TxComponent<Props, State> {
-  state: State = {};
+  public state: State = {};
 
-  render () {
+  public render (): React.ReactNode {
     const { accountId } = this.props;
     const { amount, recipientId } = this.state;
 

packages/app-123code/src/index.tsx

@@ -20,14 +20,14 @@ import translate from './translate';
 
 // define out internal types
 type Props = AppProps & I18nProps;
-type State = {
-  accountId?: string
-};
+interface State {
+  accountId?: string;
+}
 
 class App extends React.PureComponent<Props, State> {
-  state: State = {};
+  public state: State = {};
 
-  render () {
+  public render (): React.ReactNode {
     const { accountId } = this.state;
 
     return (

packages/app-accounts/scripts/vanitygen.js

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+/* eslint-disable @typescript-eslint/no-var-requires */
 // Copyright 2017-2019 @polkadot/app-accounts authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.

packages/app-accounts/src/Account.tsx

@@ -15,22 +15,22 @@ import Transfer from './modals/Transfer';
 
 import translate from './translate';
 
-type Props = I18nProps & {
-  address: string
-};
+interface Props extends I18nProps {
+  address: string;
+}
 
-type State = {
-  isBackupOpen: boolean,
-  isEditable: boolean,
-  isForgetOpen: boolean,
-  isPasswordOpen: boolean,
-  isTransferOpen: boolean
-};
+interface State {
+  isBackupOpen: boolean;
+  isEditable: boolean;
+  isForgetOpen: boolean;
+  isPasswordOpen: boolean;
+  isTransferOpen: boolean;
+}
 
 class Account extends React.PureComponent<Props> {
-  state: State;
+  public state: State;
 
-  constructor (props: Props) {
+  public constructor (props: Props) {
     super(props);
 
     const account = keyring.getAccount(props.address);
@@ -46,7 +46,7 @@ class Account extends React.PureComponent<Props> {
     };
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { address } = this.props;
     const { isEditable } = this.state;
 
@@ -72,7 +72,7 @@ class Account extends React.PureComponent<Props> {
     );
   }
 
-  private renderModals () {
+  private renderModals (): React.ReactNode {
     const { address } = this.props;
     const { isBackupOpen, isForgetOpen, isPasswordOpen, isTransferOpen } = this.state;
 
@@ -165,10 +165,10 @@ class Account extends React.PureComponent<Props> {
       return;
     }
 
-    const status = {
+    const status: Partial<ActionStatus> = {
       account: address,
       action: 'forget'
-    } as ActionStatus;
+    };
 
     try {
       keyring.forgetAccount(address);
@@ -180,7 +180,7 @@ class Account extends React.PureComponent<Props> {
     }
   }
 
-  private renderButtons () {
+  private renderButtons (): React.ReactNode {
     const { t } = this.props;
     const { isEditable } = this.state;
 

packages/app-accounts/src/Overview.tsx

@@ -17,19 +17,19 @@ import Account from './Account';
 import translate from './translate';
 
 type Props = ComponentProps & I18nProps & {
-  accounts?: SubjectInfo[]
+  accounts?: SubjectInfo[];
 };
 
-type State = {
-  isCreateOpen: boolean,
-  isImportOpen: boolean
-};
+interface State {
+  isCreateOpen: boolean;
+  isImportOpen: boolean;
+}
 
 class Overview extends React.PureComponent<Props, State> {
-  constructor (props: Props) {
+  public constructor (props: Props) {
     super(props);
 
-    const { state : { isCreateOpen = false } = {} } = this.props.location;
+    const { state: { isCreateOpen = false } = {} } = this.props.location;
 
     this.state = {
       isCreateOpen,
@@ -37,7 +37,7 @@ class Overview extends React.PureComponent<Props, State> {
     };
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { accounts, t } = this.props;
     const { isCreateOpen, isImportOpen } = this.state;
     const emptyScreen = !isCreateOpen && !isImportOpen && (!accounts || Object.keys(accounts).length === 0);
@@ -64,7 +64,7 @@ class Overview extends React.PureComponent<Props, State> {
       >
         {this.renderCreate()}
         {this.renderImport()}
-        {accounts && Object.keys(accounts).map((address) => (
+        {accounts && Object.keys(accounts).map((address): React.ReactNode => (
           <Account
             address={address}
             key={address}
@@ -74,7 +74,7 @@ class Overview extends React.PureComponent<Props, State> {
     );
   }
 
-  private renderCreate () {
+  private renderCreate (): React.ReactNode {
     const { isCreateOpen } = this.state;
     const { onStatusChange } = this.props;
 
@@ -90,7 +90,7 @@ class Overview extends React.PureComponent<Props, State> {
     );
   }
 
-  private renderImport () {
+  private renderImport (): React.ReactNode {
     const { isImportOpen } = this.state;
     const { onStatusChange } = this.props;
 
@@ -107,15 +107,15 @@ class Overview extends React.PureComponent<Props, State> {
   }
 
   private toggleCreate = (): void => {
-    this.setState(({ isCreateOpen }) => ({
+    this.setState(({ isCreateOpen }): State => ({
       isCreateOpen: !isCreateOpen
-    }));
+    }) as unknown as State);
   }
 
   private toggleImport = (): void => {
-    this.setState(({ isImportOpen }) => ({
+    this.setState(({ isImportOpen }): State => ({
       isImportOpen: !isImportOpen
-    }));
+    }) as unknown as State);
   }
 }
 

packages/app-accounts/src/Vanity/Match.tsx

@@ -9,29 +9,29 @@ import styled from 'styled-components';
 import { Button, IdentityIcon } from '@polkadot/ui-app';
 import { u8aToHex } from '@polkadot/util';
 
-type Props = BareProps & {
+interface Props extends BareProps {
   address: string;
   count: number;
   offset: number;
-  onCreateToggle: (seed: string) => void,
-  onRemove: (address: string) => void,
+  onCreateToggle: (seed: string) => void;
+  onRemove: (address: string) => void;
   seed: Uint8Array;
-};
+}
 
-type State = {
-  hexSeed: string
-};
+interface State {
+  hexSeed: string;
+}
 
 class Match extends React.PureComponent<Props, State> {
-  state: State = {} as State;
+  public state: State = { hexSeed: '' };
 
-  static getDerivedStateFromProps ({ seed }: Props): State {
+  public static getDerivedStateFromProps ({ seed }: Props): State {
     return {
       hexSeed: u8aToHex(seed)
     };
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { address, className, count, offset } = this.props;
     const { hexSeed } = this.state;
 

packages/app-accounts/src/Vanity/index.tsx

@@ -4,7 +4,7 @@
 
 import { I18nProps } from '@polkadot/ui-app/types';
 import { KeypairType } from '@polkadot/util-crypto/types';
-import { Generator$Matches, Generator$Result } from '../vanitygen/types';
+import { GeneratorMatches, GeneratorMatch, GeneratorResult } from '../vanitygen/types';
 import { ComponentProps } from '../types';
 
 import React from 'react';
@@ -29,7 +29,7 @@ interface State {
   keyCount: 0;
   keyTime: 0;
   match: string;
-  matches: Generator$Matches;
+  matches: GeneratorMatches;
   startAt: number;
   type: KeypairType;
   withCase: boolean;
@@ -43,7 +43,8 @@ const BOOL_OPTIONS = [
 ];
 
 class VanityApp extends TxComponent<Props, State> {
-  private results: Generator$Result[] = [];
+  private results: GeneratorResult[] = [];
+
   public state: State = {
     createSeed: null,
     elapsed: 0,
@@ -61,7 +62,7 @@ class VanityApp extends TxComponent<Props, State> {
 
   private _isActive: boolean = false;
 
-  componentWillUnmount () {
+  public componentWillUnmount (): void {
     this._isActive = false;
   }
 
@@ -87,7 +88,7 @@ class VanityApp extends TxComponent<Props, State> {
     );
   }
 
-  private renderButtons () {
+  private renderButtons (): React.ReactNode {
     const { t } = this.props;
     const { isMatchValid, isRunning } = this.state;
 
@@ -108,12 +109,12 @@ class VanityApp extends TxComponent<Props, State> {
     );
   }
 
-  private renderMatches () {
+  private renderMatches (): React.ReactNode {
     const { matches } = this.state;
 
     return (
       <div className='vanity--App-matches'>
-        {matches.map((match) => (
+        {matches.map((match): React.ReactNode => (
           <Match
             {...match}
             key={match.address}
@@ -125,7 +126,7 @@ class VanityApp extends TxComponent<Props, State> {
     );
   }
 
-  private renderOptions () {
+  private renderOptions (): React.ReactNode {
     const { t } = this.props;
     const { isMatchValid, isRunning, match, type, withCase } = this.state;
 
@@ -167,7 +168,7 @@ class VanityApp extends TxComponent<Props, State> {
     );
   }
 
-  private renderStats () {
+  private renderStats (): React.ReactNode {
     const { t } = this.props;
     const { elapsed, keyCount } = this.state;
 
@@ -204,7 +205,7 @@ class VanityApp extends TxComponent<Props, State> {
         let newKeyCount = keyCount;
         let newKeyTime = keyTime;
         const newMatches = results
-          .reduce((result, { elapsed, found }) => {
+          .reduce((result, { elapsed, found }): GeneratorMatch[] => {
             newKeyCount += found.length;
             newKeyTime += elapsed;
 
@@ -231,7 +232,7 @@ class VanityApp extends TxComponent<Props, State> {
       return;
     }
 
-    setTimeout(() => {
+    setTimeout((): void => {
       if (this._isActive) {
         if (this.results.length === 25) {
           this.checkMatches();
@@ -254,7 +255,7 @@ class VanityApp extends TxComponent<Props, State> {
     }, 0);
   }
 
-  private onCreateToggle = (createSeed: string) => {
+  private onCreateToggle = (createSeed: string): void => {
     this.setState({ createSeed });
   }
 
@@ -273,13 +274,13 @@ class VanityApp extends TxComponent<Props, State> {
   }
 
   private onChangeType = (type: KeypairType): void => {
-    this.setState({ type } as State);
+    this.setState({ type });
   }
 
   private onRemove = (address: string): void => {
     this.setState(
       ({ matches }: State) => ({
-        matches: matches.filter((item) =>
+        matches: matches.filter((item): boolean =>
           item.address !== address
         )
       })
@@ -302,7 +303,7 @@ class VanityApp extends TxComponent<Props, State> {
     );
   }
 
-  private closeCreate = () => {
+  private closeCreate = (): void => {
     this.setState({ createSeed: null });
   }
 }

packages/app-accounts/src/bipWorker.ts

@@ -4,13 +4,13 @@
 
 import { cryptoWaitReady, mnemonicGenerate, mnemonicToMiniSecret, naclKeypairFromSeed, schnorrkelKeypairFromSeed } from '@polkadot/util-crypto';
 
-const ctx: Worker = self as any;
+const ctx: Worker = self as unknown as Worker;
 
-cryptoWaitReady().catch(() => {
+cryptoWaitReady().catch((): void => {
   // ignore
 });
 
-ctx.onmessage = async ({ data: { pairType } }) => {
+ctx.onmessage = async ({ data: { pairType } }): Promise<void> => {
   await cryptoWaitReady();
 
   const seed = mnemonicGenerate();

packages/app-accounts/src/index.tsx

@@ -19,18 +19,18 @@ import translate from './translate';
 import Vanity from './Vanity';
 
 type Props = AppProps & I18nProps & {
-  allAccounts?: SubjectInfo
+  allAccounts?: SubjectInfo;
 };
 
-type State = {
-  hidden: Array<string>,
-  tabs: Array<TabItem>
-};
+interface State {
+  hidden: string[];
+  tabs: TabItem[];
+}
 
 class AccountsApp extends React.PureComponent<Props, State> {
-  state: State;
+  public state: State;
 
-  constructor (props: Props) {
+  public constructor (props: Props) {
     super(props);
 
     const { allAccounts = {}, t } = props;
@@ -39,7 +39,7 @@ class AccountsApp extends React.PureComponent<Props, State> {
       : AccountsApp.hideTabsState();
 
     this.state = {
-      ...baseState,
+      ...(baseState as State),
       tabs: [
         {
           isRoot: true,
@@ -54,14 +54,13 @@ class AccountsApp extends React.PureComponent<Props, State> {
     };
   }
 
-  static showTabsState () {
-
+  private static showTabsState (): Partial<State> {
     return {
-      hidden: []
+      hidden: [] as string[]
     };
   }
 
-  static hideTabsState () {
+  private static hideTabsState (): Partial<State> {
     // Hide vanity as well - since the route order and matching changes, the
     // /create/:seed route become problematic, so don't allow that option
     return {
@@ -69,21 +68,21 @@ class AccountsApp extends React.PureComponent<Props, State> {
     };
   }
 
-  static getDerivedStateFromProps ({ allAccounts = {} }: Props, { hidden }: State) {
+  public static getDerivedStateFromProps ({ allAccounts = {} }: Props, { hidden }: State): State | null {
     const hasAddresses = Object.keys(allAccounts).length !== 0;
 
     if (hidden.length === 0) {
       return hasAddresses
         ? null
-        : AccountsApp.hideTabsState();
+        : AccountsApp.hideTabsState() as State;
     }
 
     return hasAddresses
-      ? AccountsApp.showTabsState()
+      ? AccountsApp.showTabsState() as State
       : null;
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { basePath } = this.props;
     const { hidden, tabs } = this.state;
 
@@ -105,8 +104,8 @@ class AccountsApp extends React.PureComponent<Props, State> {
     );
   }
 
-  private renderComponent (Component: React.ComponentType<ComponentProps>) {
-    return ({ match }: LocationProps) => {
+  private renderComponent (Component: React.ComponentType<ComponentProps>): (props: LocationProps) => React.ReactNode {
+    return ({ match }: LocationProps): React.ReactNode => {
       const { basePath, location, onStatusChange } = this.props;
 
       return (

packages/app-accounts/src/modals/Backup.tsx

@@ -12,23 +12,23 @@ import keyring from '@polkadot/ui-keyring';
 
 import translate from '../translate';
 
-type Props = I18nProps & {
-  onClose: () => void,
-  address: string
-};
+interface Props extends I18nProps {
+  onClose: () => void;
+  address: string;
+}
 
-type State = {
-  isPassValid: boolean,
-  password: string
-};
+interface State {
+  isPassValid: boolean;
+  password: string;
+}
 
 class Backup extends TxComponent<Props, State> {
-  state: State = {
+  public state: State = {
     isPassValid: false,
     password: ''
   };
 
-  render () {
+  public render (): React.ReactNode {
     const { t } = this.props;
 
     return (
@@ -44,7 +44,7 @@ class Backup extends TxComponent<Props, State> {
     );
   }
 
-  private renderButtons () {
+  private renderButtons (): React.ReactNode {
     const { onClose, t } = this.props;
     const { isPassValid } = this.state;
 
@@ -69,7 +69,7 @@ class Backup extends TxComponent<Props, State> {
     );
   }
 
-  private renderContent () {
+  private renderContent (): React.ReactNode {
     const { address, t } = this.props;
     const { isPassValid, password } = this.state;
 
@@ -105,9 +105,9 @@ class Backup extends TxComponent<Props, State> {
       return;
     }
 
-    const status = {
+    const status: Partial<ActionStatus> = {
       action: 'backup'
-    } as ActionStatus;
+    };
 
     try {
       const addressKeyring = address && keyring.getPair(address);
@@ -131,7 +131,7 @@ class Backup extends TxComponent<Props, State> {
     onClose();
   }
 
-  private onChangePass = (password: string) => {
+  private onChangePass = (password: string): void => {
     this.setState({
       isPassValid: keyring.isPassValid(password),
       password

packages/app-accounts/src/modals/ChangePass.tsx

@@ -11,27 +11,27 @@ import keyring from '@polkadot/ui-keyring';
 
 import translate from '../translate';
 
-type Props = I18nProps & {
-  address: string,
-  onClose: () => void
-};
+interface Props extends I18nProps {
+  address: string;
+  onClose: () => void;
+}
 
-type State = {
-  isNewValid: boolean,
-  isOldValid: boolean,
-  newPass: string,
-  oldPass: string
-};
+interface State {
+  isNewValid: boolean;
+  isOldValid: boolean;
+  newPass: string;
+  oldPass: string;
+}
 
 class ChangePass extends TxComponent<Props, State> {
-  state: State = {
+  public state: State = {
     isNewValid: false,
     isOldValid: false,
     newPass: '',
     oldPass: ''
   };
 
-  render () {
+  public render (): React.ReactNode {
     const { t } = this.props;
 
     return (
@@ -47,7 +47,7 @@ class ChangePass extends TxComponent<Props, State> {
     );
   }
 
-  private renderButtons () {
+  private renderButtons (): React.ReactNode {
     const { onClose, t } = this.props;
     const { isNewValid, isOldValid } = this.state;
 
@@ -72,7 +72,7 @@ class ChangePass extends TxComponent<Props, State> {
     );
   }
 
-  private renderContent () {
+  private renderContent (): React.ReactNode {
     const { address, t } = this.props;
     const { isNewValid, isOldValid, newPass, oldPass } = this.state;
 
@@ -111,9 +111,9 @@ class ChangePass extends TxComponent<Props, State> {
   private doChange = (): void => {
     const { address, onClose, t } = this.props;
     const { newPass, oldPass } = this.state;
-    const status = {
+    const status: Partial<ActionStatus> = {
       action: 'changePassword'
-    } as ActionStatus;
+    };
 
     try {
       const account = address && keyring.getPair(address);
@@ -158,14 +158,14 @@ class ChangePass extends TxComponent<Props, State> {
     onClose();
   }
 
-  private onChangeNew = (newPass: string) => {
+  private onChangeNew = (newPass: string): void => {
     this.setState({
       isNewValid: this.validatePass(newPass),
       newPass
     });
   }
 
-  private onChangeOld = (oldPass: string) => {
+  private onChangeOld = (oldPass: string): void => {
     this.setState({
       isOldValid: this.validatePass(oldPass),
       oldPass
@@ -173,7 +173,6 @@ class ChangePass extends TxComponent<Props, State> {
   }
 
   private validatePass (password: string): boolean {
-
     return keyring.isPassValid(password);
   }
 }

packages/app-accounts/src/modals/Create.tsx

@@ -23,34 +23,34 @@ import { keyExtractPath, mnemonicGenerate, mnemonicValidate, randomAsU8a } from
 import translate from '../translate';
 
 type Props = ModalProps & ApiProps & I18nProps & {
-  seed?: string,
-  type?: KeypairType
+  seed?: string;
+  type?: KeypairType;
 };
 
 type SeedType = 'bip' | 'raw' | 'dev';
 
-type SeedOption = {
-  text: string,
-  value: SeedType
-};
+interface SeedOption {
+  text: string;
+  value: SeedType;
+}
 
-type State = {
-  address: string,
-  deriveError: string | null,
-  derivePath: string,
-  isNameValid: boolean,
-  isSeedValid: boolean,
-  isPassValid: boolean,
-  isValid: boolean,
-  name: string,
-  pairType: KeypairType,
-  password: string,
-  seed: string,
-  seedOptions: Array<SeedOption>,
-  seedType: SeedType,
-  showWarning: boolean,
-  tags: Array<string>
-};
+interface State {
+  address: string;
+  deriveError: string | null;
+  derivePath: string;
+  isNameValid: boolean;
+  isSeedValid: boolean;
+  isPassValid: boolean;
+  isValid: boolean;
+  name: string;
+  pairType: KeypairType;
+  password: string;
+  seed: string;
+  seedOptions: SeedOption[];
+  seedType: SeedType;
+  showWarning: boolean;
+  tags: string[];
+}
 
 const DEFAULT_TYPE = 'sr25519';
 
@@ -60,7 +60,7 @@ function deriveValidate (derivePath: string, pairType: KeypairType): string | nu
 
     // we don't allow soft for ed25519
     if (pairType === 'ed25519') {
-      const firstSoft = path.find(({ isSoft }) => isSoft);
+      const firstSoft = path.find(({ isSoft }): boolean => isSoft);
 
       if (firstSoft) {
         return 'Soft derivation paths are not allowed on ed25519';
@@ -88,13 +88,13 @@ function addressFromSeed (phrase: string, derivePath: string, pairType: KeypairT
 }
 
 class Create extends React.PureComponent<Props, State> {
-  state: State = { seedType: 'bip' } as State;
+  public state: State;
 
-  constructor (props: Props) {
+  public constructor (props: Props) {
     super(props);
 
     const { isDevelopment, seed, t, type } = this.props;
-    const seedOptions: Array<SeedOption> = [
+    const seedOptions: SeedOption[] = [
       { value: 'bip', text: t('Mnemonic') },
       { value: 'raw', text: t('Raw seed') }
     ];
@@ -104,12 +104,12 @@ class Create extends React.PureComponent<Props, State> {
     }
 
     this.state = {
-      ...this.emptyState(seed || null, '', type || DEFAULT_TYPE),
+      ...(this.emptyState(seed || null, '', type || DEFAULT_TYPE) as State),
       seedOptions
     };
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { className, t } = this.props;
 
     return (
@@ -126,7 +126,7 @@ class Create extends React.PureComponent<Props, State> {
     );
   }
 
-  private renderButtons () {
+  private renderButtons (): React.ReactNode {
     const { t } = this.props;
     const { isValid } = this.state;
 
@@ -149,11 +149,11 @@ class Create extends React.PureComponent<Props, State> {
     );
   }
 
-  private renderInput () {
+  private renderInput (): React.ReactNode {
     const { t } = this.props;
     const { address, deriveError, derivePath, isNameValid, isPassValid, isSeedValid, name, pairType, password, seed, seedOptions, seedType } = this.state;
     const isDevSeed = seedType === 'dev';
-    const seedLabel = (() => {
+    const seedLabel = ((): string => {
       switch (seedType) {
         case 'bip':
           return t('mnemonic seed');
@@ -239,7 +239,7 @@ class Create extends React.PureComponent<Props, State> {
     );
   }
 
-  private renderModal () {
+  private renderModal (): React.ReactNode {
     const { t } = this.props;
     const { address, name, showWarning } = this.state;
 
@@ -280,8 +280,8 @@ class Create extends React.PureComponent<Props, State> {
     );
   }
 
-  private generateSeed (_seed: string | null, derivePath: string, seedType: SeedType, pairType: KeypairType): State {
-    const seed = (() => {
+  private generateSeed (_seed: string | null, derivePath: string, seedType: SeedType, pairType: KeypairType): Partial<State> {
+    const seed = ((): string => {
       switch (seedType) {
         case 'bip':
           return mnemonicGenerate();
@@ -298,13 +298,13 @@ class Create extends React.PureComponent<Props, State> {
       deriveError: null,
       derivePath,
       seed
-    } as State;
+    };
   }
 
-  private emptyState (seed: string | null, derivePath: string, pairType: KeypairType): State {
+  private emptyState (seed: string | null, derivePath: string, pairType: KeypairType): Partial<State> {
     const seedType = seed
       ? 'raw'
-      : this.state.seedType;
+      : this.state ? this.state.seedType : 'bip';
 
     return {
       ...this.generateSeed(seed, derivePath, seedType, pairType),
@@ -321,7 +321,7 @@ class Create extends React.PureComponent<Props, State> {
     };
   }
 
-  private nextState (newState: State): void {
+  private nextState (newState: Partial<State>): void {
     this.setState(
       (prevState: State): State => {
         const { derivePath = prevState.derivePath, name = prevState.name, pairType = prevState.pairType, password = prevState.password, seed = prevState.seed, seedOptions = prevState.seedOptions, seedType = prevState.seedType, showWarning = prevState.showWarning, tags = prevState.tags } = newState;
@@ -363,37 +363,37 @@ class Create extends React.PureComponent<Props, State> {
   }
 
   private onChangeDerive = (derivePath: string): void => {
-    this.nextState({ derivePath } as State);
+    this.nextState({ derivePath });
   }
 
   private onChangeName = (name: string): void => {
-    this.nextState({ name } as State);
+    this.nextState({ name });
   }
 
   private onChangePairType = (pairType: KeypairType): void => {
-    this.nextState({ pairType } as State);
+    this.nextState({ pairType });
   }
 
   private onChangePass = (password: string): void => {
-    this.nextState({ password } as State);
+    this.nextState({ password });
   }
 
   private onChangeSeed = (seed: string): void => {
-    this.nextState({ seed } as State);
+    this.nextState({ seed });
   }
 
   private onShowWarning = (): void => {
-    this.nextState({ showWarning: true } as State);
+    this.nextState({ showWarning: true });
   }
 
   private onHideWarning = (): void => {
-    this.nextState({ showWarning: false } as State);
+    this.nextState({ showWarning: false });
   }
 
   private onCommit = (): void => {
     const { onClose, onStatusChange, t } = this.props;
     const { derivePath, isValid, name, pairType, password, seed, tags } = this.state;
-    const status = { action: 'create' } as ActionStatus;
+    const status: Partial<ActionStatus> = { action: 'create' };
 
     if (!isValid) {
       return;
@@ -418,7 +418,7 @@ class Create extends React.PureComponent<Props, State> {
 
     this.onHideWarning();
 
-    onStatusChange(status);
+    onStatusChange(status as ActionStatus);
     onClose();
   }
 
@@ -433,8 +433,8 @@ class Create extends React.PureComponent<Props, State> {
       return;
     }
 
-    this.setState(({ derivePath, pairType }: State) => ({
-      ...this.generateSeed(null, derivePath, seedType, pairType),
+    this.setState(({ derivePath, pairType }: State): State => ({
+      ...(this.generateSeed(null, derivePath, seedType, pairType) as State),
       seedType
     }));
   }

packages/app-accounts/src/modals/Import.tsx

@@ -17,16 +17,16 @@ import translate from '../translate';
 
 type Props = ModalProps & I18nProps;
 
-type State = {
-  address: string | null,
-  isFileValid: boolean,
-  isPassValid: boolean,
-  json: KeyringPair$Json | null,
-  password: string
-};
+interface State {
+  address: string | null;
+  isFileValid: boolean;
+  isPassValid: boolean;
+  json: KeyringPair$Json | null;
+  password: string;
+}
 
 class Import extends TxComponent<Props, State> {
-  state: State = {
+  public state: State = {
     address: null,
     isFileValid: false,
     isPassValid: false,
@@ -34,7 +34,7 @@ class Import extends TxComponent<Props, State> {
     password: ''
   };
 
-  render () {
+  public render (): React.ReactNode {
     const { onClose, t } = this.props;
     const { isFileValid, isPassValid } = this.state;
 
@@ -65,7 +65,7 @@ class Import extends TxComponent<Props, State> {
     );
   }
 
-  private renderInput () {
+  private renderInput (): React.ReactNode {
     const { t } = this.props;
     const { address, isFileValid, isPassValid, json, password } = this.state;
     const acceptedFormats = ['application/json', 'text/plain'].join(', ');
@@ -141,7 +141,7 @@ class Import extends TxComponent<Props, State> {
       return;
     }
 
-    const status = { action: 'restore' } as ActionStatus;
+    const status: Partial<ActionStatus> = { action: 'restore' };
 
     try {
       const pair = keyring.restoreAccount(json, password);
@@ -160,7 +160,7 @@ class Import extends TxComponent<Props, State> {
       console.error(error);
     }
 
-    onStatusChange(status);
+    onStatusChange(status as ActionStatus);
 
     if (status.status !== 'error') {
       onClose();

packages/app-accounts/src/modals/Transfer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/app-accounts authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
@@ -20,29 +21,29 @@ import { ZERO_FEES } from '@polkadot/ui-signer/Checks/constants';
 import translate from '../translate';
 
 type Props = ApiProps & I18nProps & {
-  balances_fees?: DerivedFees,
-  className?: string,
-  onClose: () => void,
-  recipientId?: string,
-  senderId?: string,
-  system_accountNonce?: BN
+  balances_fees?: DerivedFees;
+  className?: string;
+  onClose: () => void;
+  recipientId?: string;
+  senderId?: string;
+  system_accountNonce?: BN;
 };
 
-type State = {
-  amount: BN,
-  extrinsic: SubmittableExtrinsic | null,
-  hasAvailable: boolean,
-  maxBalance?: BN,
-  recipientId?: string | null,
-  senderId?: string | null
-};
+interface State {
+  amount: BN;
+  extrinsic: SubmittableExtrinsic | null;
+  hasAvailable: boolean;
+  maxBalance?: BN;
+  recipientId?: string | null;
+  senderId?: string | null;
+}
 
 const ZERO = new BN(0);
 
 class Transfer extends React.PureComponent<Props> {
-  state: State;
+  public state: State;
 
-  constructor (props: Props) {
+  public constructor (props: Props) {
     super(props);
 
     this.state = {
@@ -55,7 +56,7 @@ class Transfer extends React.PureComponent<Props> {
     };
   }
 
-  componentDidUpdate (prevProps: Props, prevState: State) {
+  public componentDidUpdate (prevProps: Props, prevState: State): void {
     const { balances_fees } = this.props;
     const { extrinsic, recipientId, senderId } = this.state;
     const hasLengthChanged = ((extrinsic && extrinsic.encodedLength) || 0) !== ((prevState.extrinsic && prevState.extrinsic.encodedLength) || 0);
@@ -68,7 +69,7 @@ class Transfer extends React.PureComponent<Props> {
     }
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { t } = this.props;
 
     return (
@@ -103,7 +104,7 @@ class Transfer extends React.PureComponent<Props> {
     });
   }
 
-  private renderButtons () {
+  private renderButtons (): React.ReactNode {
     const { onClose, t } = this.props;
     const { extrinsic, hasAvailable, senderId } = this.state;
 
@@ -130,7 +131,7 @@ class Transfer extends React.PureComponent<Props> {
     );
   }
 
-  private renderContent () {
+  private renderContent (): React.ReactNode {
     const { className, recipientId: propRecipientId, senderId: propSenderId, t } = this.props;
     const { extrinsic, hasAvailable, maxBalance, recipientId, senderId } = this.state;
     const available = <span className='label'>{t('available ')}</span>;
@@ -175,23 +176,23 @@ class Transfer extends React.PureComponent<Props> {
     );
   }
 
-  private onChangeAmount = (amount: BN = new BN(0)) => {
+  private onChangeAmount = (amount: BN = new BN(0)): void => {
     this.nextState({ amount });
   }
 
-  private onChangeFrom = (senderId: string) => {
+  private onChangeFrom = (senderId: string): void => {
     this.nextState({ senderId });
   }
 
-  private onChangeTo = (recipientId: string) => {
+  private onChangeTo = (recipientId: string): void => {
     this.nextState({ recipientId });
   }
 
-  private onChangeFees = (hasAvailable: boolean) => {
+  private onChangeFees = (hasAvailable: boolean): void => {
     this.setState({ hasAvailable });
   }
 
-  private setMaxBalance = async () => {
+  private setMaxBalance = async (): Promise<void> => {
     const { api, balances_fees = ZERO_FEES } = this.props;
     const { senderId, recipientId } = this.state;
 
@@ -200,10 +201,6 @@ class Transfer extends React.PureComponent<Props> {
     }
 
     const { transferFee, transactionBaseFee, transactionByteFee, creationFee } = balances_fees;
-
-    // FIXME The any casts here are irritating, but they are basically caused by the derive
-    // not really returning an actual `class implements Codec`
-    // (if casting to DerivedBalance it would be `as any as DerivedBalance`)
     const accountNonce = await api.query.system.accountNonce<Index>(senderId);
     const senderBalance = (await api.derive.balances.all(senderId)).availableBalance;
     const recipientBalance = (await api.derive.balances.all(recipientId)).availableBalance;

packages/app-accounts/src/types.ts

@@ -7,24 +7,22 @@ import { ActionStatus } from '@polkadot/ui-app/Status/types';
 
 import { WithTranslation } from 'react-i18next';
 
-export type LocationProps = {
+export interface LocationProps {
   match: {
-    params: { [index: string]: any }
-  }
-};
+    params: Record<string, string>;
+  };
+}
 
-export type BareProps = {
-  className?: string,
-  style?: {
-    [index: string]: any
-  }
-};
+export interface BareProps {
+  className?: string;
+  style?: Record<string, any>;
+}
 
 export type I18nProps = BareProps & WithTranslation;
 
 export type ComponentProps = AppProps & LocationProps;
 
-export type ModalProps = {
-  onClose: () => void,
-  onStatusChange: (status: ActionStatus) => void
-};
+export interface ModalProps {
+  onClose: () => void;
+  onStatusChange: (status: ActionStatus) => void;
+}

packages/app-accounts/src/vanitygen/calculate.ts

@@ -2,11 +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 { Generator$Calculation, Generator$Options } from './types';
+import { GeneratorCalculation, GeneratorOptions } from './types';
 
-function calculateAtOne (atOffset: number, test: string[], address: string): Generator$Calculation {
+function calculateAtOne (atOffset: number, test: string[], address: string): GeneratorCalculation {
   return {
-    count: test.reduce((count, c, index) => {
+    count: test.reduce((count, c, index): number => {
       if (index === count) {
         count += (c === '?' || c === address.charAt(index + atOffset)) ? 1 : 0;
       }
@@ -17,7 +17,7 @@ function calculateAtOne (atOffset: number, test: string[], address: string): Gen
   };
 }
 
-function calculateAt (atOffset: number, test: string[][], address: string): Generator$Calculation {
+function calculateAt (atOffset: number, test: string[][], address: string): GeneratorCalculation {
   let bestCount = 0;
   let bestOffset = 1;
 
@@ -36,7 +36,7 @@ function calculateAt (atOffset: number, test: string[][], address: string): Gene
   };
 }
 
-export default function calculate (test: string[][], _address: string, { atOffset = -1, withCase = false }: Generator$Options): Generator$Calculation {
+export default function calculate (test: string[][], _address: string, { atOffset = -1, withCase = false }: GeneratorOptions): GeneratorCalculation {
   const address = withCase
     ? _address
     : _address.toLowerCase();

packages/app-accounts/src/vanitygen/cli.ts

@@ -4,7 +4,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { KeypairType } from '@polkadot/util-crypto/types';
-import { Generator$Options } from './types';
+import { GeneratorOptions } from './types';
 
 import yargs from 'yargs';
 import chalk from 'chalk';
@@ -38,7 +38,7 @@ const { match, mnemonic, type } = yargs
 const INDICATORS = ['|', '/', '-', '\\'];
 const NUMBER_REGEX = new RegExp('(\\d+?)(?=(\\d{3})+(?!\\d)|$)', 'g');
 
-const options: Generator$Options = {
+const options: GeneratorOptions = {
   match: `${match}`,
   runs: 50,
   type: type as KeypairType,
@@ -51,7 +51,7 @@ let best: Best = {
   count: -1,
   offset: 65536
 };
-let total: number = 0;
+let total = 0;
 let indicator = -1;
 const tests = match.split(',');
 
@@ -83,9 +83,9 @@ function showBest (): void {
 }
 
 cryptoWaitReady()
-  .then(() => {
+  .then((): void => {
     while (true) {
-      const nextBest = generator(options).found.reduce((best, match) => {
+      const nextBest = generator(options).found.reduce((best, match): Best => {
         if ((match.count > best.count) || ((match.count === best.count) && (match.offset <= best.offset))) {
           return match;
         }

packages/app-accounts/src/vanitygen/generate.ts

@@ -2,13 +2,13 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { Generator$Match, Generator$Options } from './types';
+import { GeneratorMatch, GeneratorOptions } from './types';
 
 import { encodeAddress, mnemonicGenerate, naclKeypairFromSeed, randomAsU8a, schnorrkelKeypairFromSeed, mnemonicToMiniSecret } from '@polkadot/util-crypto';
 
 import calculate from './calculate';
 
-export default function generator (test: string[][], options: Generator$Options): Generator$Match {
+export default function generator (test: string[][], options: GeneratorOptions): GeneratorMatch {
   const mnemonic = options.withHex
     ? undefined
     : mnemonicGenerate(12);

packages/app-accounts/src/vanitygen/index.ts

@@ -2,15 +2,15 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { Generator$Matches, Generator$Result, Generator$Options } from './types';
+import { GeneratorMatches, GeneratorResult, GeneratorOptions } from './types';
 
 import generate from './generate';
 
-export default function generator (options: Generator$Options): Generator$Result {
+export default function generator (options: GeneratorOptions): GeneratorResult {
   const { match, runs = 10, withCase = false } = options;
   const test = (withCase ? match : match.toLowerCase()).split(',').map((c) => c.split(''));
   const startAt = Date.now();
-  const found: Generator$Matches = [];
+  const found: GeneratorMatches = [];
 
   while (found.length !== runs) {
     found.push(generate(test, options));

packages/app-accounts/src/vanitygen/sort.ts

@@ -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 { Generator$Match } from './types';
+import { GeneratorMatch } from './types';
 
 function numberSort (a: number, b: number): number {
   if (a > b) {
@@ -14,7 +14,7 @@ function numberSort (a: number, b: number): number {
   return 0;
 }
 
-export default function sort (a: Generator$Match, b: Generator$Match): number {
+export default function sort (a: GeneratorMatch, b: GeneratorMatch): number {
   const countResult = numberSort(a.count, b.count);
 
   if (countResult !== 0) {

packages/app-accounts/src/vanitygen/types.d.ts

@@ -4,20 +4,20 @@
 
 import { KeypairType } from '@polkadot/util-crypto/types';
 
-export interface Generator$Calculation {
+export interface GeneratorCalculation {
   count: number;
   offset: number;
 }
 
-export interface Generator$Match extends Generator$Calculation {
+export interface GeneratorMatch extends GeneratorCalculation {
   address: string;
   mnemonic?: string;
   seed: Uint8Array;
 }
 
-export type Generator$Matches = Generator$Match[];
+export type GeneratorMatches = GeneratorMatch[];
 
-export interface Generator$Options {
+export interface GeneratorOptions {
   atOffset?: number;
   match: string;
   runs: number;
@@ -26,7 +26,7 @@ export interface Generator$Options {
   withHex?: boolean;
 }
 
-export interface Generator$Result {
+export interface GeneratorResult {
   elapsed: number;
-  found: Generator$Matches;
+  found: GeneratorMatches;
 }

packages/app-accounts/src/worker-loader.d.ts

@@ -1,8 +0,0 @@
-declare module 'worker-loader!*' {
-  class WebpackWorker extends Worker {
-    constructor();
-  }
-
-  // @ts-ignore valid according to integration instructions: https://github.com/webpack-contrib/worker-loader#integrating-with-typescript
-  export = WebpackWorker;
-}

packages/app-address-book/src/Address.tsx

@@ -14,21 +14,21 @@ import Transfer from '@polkadot/app-accounts/modals/Transfer';
 
 import translate from './translate';
 
-type Props = I18nProps & {
-  address: string
-};
+interface Props extends I18nProps {
+  address: string;
+}
 
-type State = {
-  current?: KeyringAddress,
-  isEditable: boolean,
-  isForgetOpen: boolean,
-  isTransferOpen: boolean
-};
+interface State {
+  current?: KeyringAddress;
+  isEditable: boolean;
+  isForgetOpen: boolean;
+  isTransferOpen: boolean;
+}
 
 class Address extends React.PureComponent<Props, State> {
-  state: State;
+  public state: State;
 
-  constructor (props: Props) {
+  public constructor (props: Props) {
     super(props);
 
     const { address } = this.props;
@@ -41,7 +41,7 @@ class Address extends React.PureComponent<Props, State> {
     };
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { address } = this.props;
     const { isEditable } = this.state;
 
@@ -65,7 +65,7 @@ class Address extends React.PureComponent<Props, State> {
     );
   }
 
-  private renderModals () {
+  private renderModals (): React.ReactNode {
     const { address } = this.props;
     const { isForgetOpen, isTransferOpen, current } = this.state;
 
@@ -101,15 +101,15 @@ class Address extends React.PureComponent<Props, State> {
   }
 
   private toggleForget = (): void => {
-    this.setState(({ isForgetOpen }) => ({
+    this.setState(({ isForgetOpen }): State => ({
       isForgetOpen: !isForgetOpen
-    }));
+    }) as unknown as State);
   }
 
   private toggleTransfer = (): void => {
-    this.setState(({ isTransferOpen }) => ({
+    this.setState(({ isTransferOpen }): State => ({
       isTransferOpen: !isTransferOpen
-    }));
+    }) as unknown as State);
   }
 
   private onForget = (): void => {
@@ -119,10 +119,10 @@ class Address extends React.PureComponent<Props, State> {
       return;
     }
 
-    const status = {
+    const status: Partial<ActionStatus> = {
       account: address,
       action: 'forget'
-    } as ActionStatus;
+    };
 
     try {
       keyring.forgetAddress(address);
@@ -134,7 +134,7 @@ class Address extends React.PureComponent<Props, State> {
     }
   }
 
-  private renderButtons () {
+  private renderButtons (): React.ReactNode {
     const { t } = this.props;
     const { isEditable } = this.state;
 

packages/app-address-book/src/Overview.tsx

@@ -16,19 +16,19 @@ import Address from './Address';
 import translate from './translate';
 
 type Props = ComponentProps & I18nProps & {
-  addresses?: SubjectInfo[]
+  addresses?: SubjectInfo[];
 };
 
-type State = {
-  isCreateOpen: boolean
-};
+interface State {
+  isCreateOpen: boolean;
+}
 
 class Overview extends React.PureComponent<Props, State> {
-  state: State = {
+  public state: State = {
     isCreateOpen: false
   };
 
-  render () {
+  public render (): React.ReactNode {
     const { addresses, onStatusChange, t } = this.props;
     const { isCreateOpen } = this.state;
     const emptyScreen = !isCreateOpen && (!addresses || Object.keys(addresses).length === 0);
@@ -53,7 +53,7 @@ class Overview extends React.PureComponent<Props, State> {
             onStatusChange={onStatusChange}
           />
         )}
-        {addresses && Object.keys(addresses).map((address) => (
+        {addresses && Object.keys(addresses).map((address): React.ReactNode => (
           <Address
             address={address}
             key={address}
@@ -64,7 +64,7 @@ class Overview extends React.PureComponent<Props, State> {
   }
 
   private toggleCreate = (): void => {
-    this.setState(({ isCreateOpen }) => ({
+    this.setState(({ isCreateOpen }): State => ({
       isCreateOpen: !isCreateOpen
     }));
   }

packages/app-address-book/src/index.tsx

@@ -18,19 +18,19 @@ import Overview from './Overview';
 import translate from './translate';
 
 type Props = AppProps & I18nProps & {
-  allAddresses?: SubjectInfo
+  allAddresses?: SubjectInfo;
 };
 
-type State = {
-  hidden: Array<string>,
-  items: Array<TabItem>,
-  isCreateOpen: boolean
-};
+interface State {
+  hidden: string[];
+  items: TabItem[];
+  isCreateOpen: boolean;
+}
 
 class AddressBookApp extends React.PureComponent<Props, State> {
-  state: State;
+  public state: State;
 
-  constructor (props: Props) {
+  public constructor (props: Props) {
     super(props);
 
     const { allAddresses = {}, t } = props;
@@ -39,7 +39,7 @@ class AddressBookApp extends React.PureComponent<Props, State> {
       : AddressBookApp.hideEditState();
 
     this.state = {
-      ...baseState,
+      ...(baseState as State),
       isCreateOpen: false,
       items: [
         {
@@ -51,33 +51,33 @@ class AddressBookApp extends React.PureComponent<Props, State> {
     };
   }
 
-  static showEditState () {
+  private static showEditState (): Partial<State> {
     return {
       hidden: []
     };
   }
 
-  static hideEditState () {
+  private static hideEditState (): Partial<State> {
     return {
       hidden: ['edit']
     };
   }
 
-  static getDerivedStateFromProps ({ allAddresses = {} }: Props, { hidden }: State) {
+  public static getDerivedStateFromProps ({ allAddresses = {} }: Props, { hidden }: State): State | null {
     const hasAddresses = Object.keys(allAddresses).length !== 0;
 
     if (hidden.length === 0) {
       return hasAddresses
         ? null
-        : AddressBookApp.hideEditState();
+        : AddressBookApp.hideEditState() as State;
     }
 
     return hasAddresses
-      ? AddressBookApp.showEditState()
+      ? AddressBookApp.showEditState() as State
       : null;
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { basePath } = this.props;
     const { hidden, items } = this.state;
 
@@ -98,8 +98,8 @@ class AddressBookApp extends React.PureComponent<Props, State> {
     );
   }
 
-  private renderComponent (Component: React.ComponentType<ComponentProps>) {
-    return () => {
+  private renderComponent (Component: React.ComponentType<ComponentProps>): () => React.ReactNode {
+    return (): React.ReactNode => {
       const { basePath, location, onStatusChange } = this.props;
 
       return (

packages/app-address-book/src/modals/Create.tsx

@@ -16,26 +16,26 @@ import translate from '../translate';
 
 type Props = ModalProps & I18nProps;
 
-type State = {
-  address: string,
-  isAddressExisting: boolean,
-  isAddressValid: boolean,
-  isNameValid: boolean,
-  isValid: boolean,
-  name: string,
-  tags: Array<string>
-};
+interface State {
+  address: string;
+  isAddressExisting: boolean;
+  isAddressValid: boolean;
+  isNameValid: boolean;
+  isValid: boolean;
+  name: string;
+  tags: string[];
+}
 
 class Create extends React.PureComponent<Props, State> {
-  state: State;
+  public state: State;
 
-  constructor (props: Props) {
+  public constructor (props: Props) {
     super(props);
 
     this.state = this.emptyState();
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { t } = this.props;
 
     return (
@@ -50,7 +50,7 @@ class Create extends React.PureComponent<Props, State> {
     );
   }
 
-  private renderButtons () {
+  private renderButtons (): React.ReactNode {
     const { t } = this.props;
     const { isValid } = this.state;
 
@@ -74,7 +74,7 @@ class Create extends React.PureComponent<Props, State> {
     );
   }
 
-  private renderContent () {
+  private renderContent (): React.ReactNode {
     const { t } = this.props;
     const { address, isAddressValid, isNameValid, name } = this.state;
 
@@ -120,7 +120,7 @@ class Create extends React.PureComponent<Props, State> {
     };
   }
 
-  private nextState (newState: State, allowEdit: boolean = false): void {
+  private nextState (newState: Partial<State>, allowEdit: boolean = false): void {
     this.setState(
       (prevState: State): State => {
         let { address = prevState.address, name = prevState.name, tags = prevState.tags } = newState;
@@ -166,17 +166,17 @@ class Create extends React.PureComponent<Props, State> {
   }
 
   private onChangeAddress = (address: string): void => {
-    this.nextState({ address } as State);
+    this.nextState({ address });
   }
 
   private onChangeName = (name: string): void => {
-    this.nextState({ name } as State, true);
+    this.nextState({ name }, true);
   }
 
   private onCommit = (): void => {
     const { onClose, onStatusChange, t } = this.props;
     const { address, isAddressExisting, isValid, name, tags } = this.state;
-    const status = { action: 'create' } as ActionStatus;
+    const status: Partial<ActionStatus> = { action: 'create' };
 
     if (!isValid) {
       return;
@@ -197,7 +197,7 @@ class Create extends React.PureComponent<Props, State> {
       status.message = error.message;
     }
 
-    onStatusChange(status);
+    onStatusChange(status as ActionStatus);
     onClose();
   }
 

packages/app-address-book/src/types.ts

@@ -7,7 +7,7 @@ import { ActionStatus } from '@polkadot/ui-app/Status/types';
 
 export type ComponentProps = AppProps;
 
-export type ModalProps = {
-  onClose: () => void,
-  onStatusChange: (status: ActionStatus) => void
-};
+export interface ModalProps {
+  onClose: () => void;
+  onStatusChange: (status: ActionStatus) => void;
+}

packages/app-collective/src/Overview/Candidate.tsx

@@ -5,12 +5,12 @@
 import React from 'react';
 import { AddressCard } from '@polkadot/ui-app';
 
-type Props = {
-  address: string
-};
+interface Props {
+  address: string;
+}
 
 export default class Candidate extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { address } = this.props;
 
     return (

packages/app-collective/src/Overview/Member.tsx

@@ -11,13 +11,13 @@ import { formatNumber } from '@polkadot/util';
 
 import translate from '../translate';
 
-type Props = I18nProps & {
-  address: string,
-  block: BN
-};
+interface Props extends I18nProps {
+  address: string;
+  block: BN;
+}
 
 class Member extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { address, block, t } = this.props;
 
     return (

packages/app-collective/src/Overview/Members.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.
@@ -13,13 +14,13 @@ import translate from '../translate';
 import Candidate from './Candidate';
 import Member from './Member';
 
-type Props = I18nProps & {
-  elections_members?: Array<[string, BlockNumber]>
-  elections_candidates?: Array<string>
-};
+interface Props extends I18nProps {
+  elections_members?: [string, BlockNumber][];
+  elections_candidates?: string[];
+}
 
 class Members extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { elections_members = [], elections_candidates = [], t } = this.props;
 
     return (
@@ -28,7 +29,7 @@ class Members extends React.PureComponent<Props> {
           emptyText={t('No members found')}
           headerText={t('members')}
         >
-          {elections_members.map(([address, block]) => (
+          {elections_members.map(([address, block]): React.ReactNode => (
             <Member
               address={address}
               block={block}
@@ -40,7 +41,7 @@ class Members extends React.PureComponent<Props> {
           emptyText={t('No members found')}
           headerText={t('candidates')}
         >
-          {elections_candidates.map((address) => (
+          {elections_candidates.map((address): React.ReactNode => (
             <Candidate
               address={address}
               key={address}
@@ -55,12 +56,14 @@ class Members extends React.PureComponent<Props> {
 export default translate(
   withCalls<Props>(
     ['query.elections.members', {
-      transform: (active: Array<[AccountId, BlockNumber]>) =>
-        active.map(([accountId, blockNumber]) => [accountId.toString(), blockNumber])
+      transform: (active: [AccountId, BlockNumber][]): [string, BlockNumber][] =>
+        active.map(([accountId, blockNumber]): [string, BlockNumber] =>
+          [accountId.toString(), blockNumber]
+        )
     }],
     ['query.elections.candidates', {
-      transform: (candidates: Array<AccountId>) =>
-        candidates.map((accountId) => accountId.toString())
+      transform: (candidates: AccountId[]): string[] =>
+        candidates.map((accountId): string => accountId.toString())
     }]
   )(Members)
 );

packages/app-collective/src/Overview/Summary.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.
@@ -13,16 +14,16 @@ import { formatNumber } from '@polkadot/util';
 
 import translate from '../translate';
 
-type Props = I18nProps & {
-  elections_members?: Array<[AccountId, BlockNumber]>
-  elections_candidateCount?: BN,
-  elections_desiredSeats?: BN,
-  elections_termDuration?: BN,
-  elections_voteCount?: BN
-};
+interface Props extends I18nProps {
+  elections_members?: [AccountId, BlockNumber][];
+  elections_candidateCount?: BN;
+  elections_desiredSeats?: BN;
+  elections_termDuration?: BN;
+  elections_voteCount?: BN;
+}
 
 class Summary extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { elections_members = [], elections_candidateCount = new BN(0), elections_desiredSeats = new BN(1), elections_termDuration = new BN(0), elections_voteCount = new BN(0), t } = this.props;
 
     return (
@@ -43,8 +44,8 @@ class Summary extends React.PureComponent<Props> {
 
         <section>
           <CardSummary label={t('term duration')}>
-              {formatNumber(elections_termDuration)}
-           </CardSummary>
+            {formatNumber(elections_termDuration)}
+          </CardSummary>
         </section>
       </SummaryBox>
     );

packages/app-collective/src/Overview/index.tsx

@@ -7,10 +7,10 @@ import React from 'react';
 import Members from './Members';
 import Summary from './Summary';
 
-type Props = {};
+interface Props {}
 
 export default class Overview extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     return (
       <>
         <Summary />

packages/app-collective/src/Proposals/Proposal.tsx

@@ -13,27 +13,27 @@ import { withCalls, withMulti } from '@polkadot/ui-api';
 
 import translate from '../translate';
 
-type Props = I18nProps & {
-  chain_bestNumber?: BN,
-  hash: string,
-  proposal: ProposalType | null,
-  votes: Votes | null
-};
+interface Props extends I18nProps {
+  chain_bestNumber?: BN;
+  hash: string;
+  proposal: ProposalType | null;
+  votes: Votes | null;
+}
 
-type State = {
-  votedTotal: number,
-  votedNay: number,
-  votedAye: number
-};
+interface State {
+  votedTotal: number;
+  votedNay: number;
+  votedAye: number;
+}
 
 class Proposal extends React.PureComponent<Props, State> {
-  state: State = {
+  public state: State = {
     votedTotal: 0,
     votedAye: 0,
     votedNay: 0
   };
 
-  static getDerivedStateFromProps ({ votes }: Props): State | null {
+  public static getDerivedStateFromProps ({ votes }: Props): State | null {
     if (!votes) {
       return null;
     }
@@ -49,7 +49,7 @@ class Proposal extends React.PureComponent<Props, State> {
     return newState;
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { className, hash, proposal, votes } = this.props;
 
     if (!proposal || !votes) {
@@ -78,7 +78,7 @@ class Proposal extends React.PureComponent<Props, State> {
     );
   }
 
-  private renderInfo () {
+  private renderInfo (): React.ReactNode {
     const { votes, t } = this.props;
 
     if (!votes) {
@@ -100,7 +100,7 @@ class Proposal extends React.PureComponent<Props, State> {
             }
           )}
         </h4>
-        {ayes.map((address, index) => (
+        {ayes.map((address, index): React.ReactNode => (
           <Labelled
             key={`${index}:${address}`}
             label={t('Aye')}
@@ -122,7 +122,7 @@ class Proposal extends React.PureComponent<Props, State> {
             }
           )}
         </h4>
-        {nays.map((address, index) => (
+        {nays.map((address, index): React.ReactNode => (
           <Labelled
             key={`${index}:${address}`}
             label={t('Nay')}
@@ -156,7 +156,8 @@ export default withMulti(
       {
         paramName: 'hash',
         propName: 'proposal',
-        transform: (value: Option<ProposalType>) => value.unwrapOr(null)
+        transform: (value: Option<ProposalType>): ProposalType | null =>
+          value.unwrapOr(null)
       }
     ],
     [
@@ -164,7 +165,8 @@ export default withMulti(
       {
         paramName: 'hash',
         propName: 'votes',
-        transform: (value: Option<Votes>) => value.unwrapOr(null)
+        transform: (value: Option<Votes>): Votes | null =>
+          value.unwrapOr(null)
       }
     ]
   )

packages/app-collective/src/Proposals/Propose.tsx

@@ -15,16 +15,16 @@ 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<Props, State> {
-  constructor (props: Props) {
+  public constructor (props: Props) {
     super(props);
 
     this.defaultState = {
@@ -137,7 +137,7 @@ export default withMulti(
       'query.elections.members',
       {
         propName: 'memberCount',
-        transform: (value: Array<any>) => value.length
+        transform: (value: any[]) => value.length
       }
     ]
   )

packages/app-collective/src/Proposals/index.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.
@@ -13,12 +14,12 @@ import Proposal from './Proposal';
 import Propose from './Propose';
 import translate from '../translate';
 
-type Props = I18nProps & {
-  collective_proposals?: Array<Hash>
-};
+interface Props extends I18nProps {
+  collective_proposals?: Hash[];
+}
 
 class Proposals extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { t } = this.props;
 
     return (
@@ -34,10 +35,10 @@ class Proposals extends React.PureComponent<Props> {
     );
   }
 
-  private renderProposals () {
+  private renderProposals (): React.ReactNode {
     const { collective_proposals = [] } = this.props;
 
-    return collective_proposals.map((hash) => (
+    return collective_proposals.map((hash: Hash): React.ReactNode => (
       <Proposal
         hash={hash.toHex()}
         key={hash.toHex()}

packages/app-collective/src/index.tsx

@@ -15,12 +15,12 @@ import translate from './translate';
 
 type Props = AppProps & BareProps & I18nProps;
 
-type State = {
-  tabs: Array<TabItem>
-};
+interface State {
+  tabs: TabItem[];
+}
 
 class App extends React.PureComponent<Props, State> {
-  constructor (props: Props) {
+  public constructor (props: Props) {
     super(props);
 
     const { t } = props;
@@ -40,7 +40,7 @@ class App extends React.PureComponent<Props, State> {
     };
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { basePath } = this.props;
     const { tabs } = this.state;
 

packages/app-contracts/src/ABI.tsx

@@ -12,36 +12,36 @@ import { u8aToString } from '@polkadot/util';
 
 import translate from './translate';
 
-type Props = I18nProps & {
-  className?: string,
-  contractAbi?: Abi | null,
-  help?: React.ReactNode,
-  isError?: boolean,
-  isDisabled?: boolean,
-  isRequired?: boolean,
-  label?: React.ReactNode,
-  onChange: (json: string | null, contractAbi: Abi | null) => void,
-  onRemove?: () => void,
-  onRemoved?: () => void,
-  onSelect?: () => void
-};
+interface Props extends I18nProps {
+  className?: string;
+  contractAbi?: Abi | null;
+  help?: React.ReactNode;
+  isError?: boolean;
+  isDisabled?: boolean;
+  isRequired?: boolean;
+  label?: React.ReactNode;
+  onChange: (json: string | null, contractAbi: Abi | null) => void;
+  onRemove?: () => void;
+  onRemoved?: () => void;
+  onSelect?: () => void;
+}
 
-type State = {
-  contractAbi: Abi | null,
-  isAbiValid: boolean,
-  isEmpty: boolean,
-  isError: boolean
-};
+interface State {
+  contractAbi: Abi | null;
+  isAbiValid: boolean;
+  isEmpty: boolean;
+  isError: boolean;
+}
 
 class ABI extends React.PureComponent<Props, State> {
-  state: State = {
+  public state: State = {
     contractAbi: null,
     isAbiValid: false,
     isEmpty: true,
     isError: false
   };
 
-  constructor (props: Props) {
+  public constructor (props: Props) {
     super(props);
 
     const { contractAbi, isError, isRequired } = this.props;
@@ -55,7 +55,7 @@ class ABI extends React.PureComponent<Props, State> {
     };
   }
 
-  componentWillReceiveProps ({ contractAbi, isError, isRequired }: Props) {
+  public componentWillReceiveProps ({ contractAbi, isError, isRequired }: Props): void {
     if (contractAbi) {
       this.setState({
         contractAbi,
@@ -71,7 +71,7 @@ class ABI extends React.PureComponent<Props, State> {
     }
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { className } = this.props;
     const { contractAbi, isAbiValid } = this.state;
 
@@ -86,7 +86,7 @@ class ABI extends React.PureComponent<Props, State> {
     );
   }
 
-  private renderInputFile () {
+  private renderInputFile (): React.ReactNode {
     const { className, help, isDisabled, isRequired, label, t } = this.props;
     const { isAbiValid, isEmpty, isError } = this.state;
 
@@ -108,7 +108,7 @@ class ABI extends React.PureComponent<Props, State> {
     );
   }
 
-  private renderMessages () {
+  private renderMessages (): React.ReactNode {
     const { help, isDisabled, label, onRemove } = this.props;
     const { contractAbi } = this.state;
 
@@ -140,7 +140,7 @@ class ABI extends React.PureComponent<Props, State> {
         isAbiValid: true,
         isEmpty: false,
         isError: false
-      }, () => onChange(json, contractAbi));
+      }, (): void => onChange(json, contractAbi));
     } catch (error) {
       console.error(error);
 
@@ -148,7 +148,7 @@ class ABI extends React.PureComponent<Props, State> {
         isAbiValid: false,
         isEmpty: false,
         isError: true
-      }, () => onChange(null, null));
+      }, (): void => onChange(null, null));
     }
   }
 
@@ -161,7 +161,7 @@ class ABI extends React.PureComponent<Props, State> {
         isAbiValid: false,
         isEmpty: true
       },
-      () => {
+      (): void => {
         onChange(null, null);
         onRemoved && onRemoved();
       }

packages/app-contracts/src/Codes/Add.tsx

@@ -13,14 +13,14 @@ import translate from '../translate';
 
 type Props = ContractModalProps;
 
-type State = ContractModalState & {
-  codeHash: string,
-  isBusy: boolean,
-  isCodeValid: boolean
-};
+interface State extends ContractModalState {
+  codeHash: string;
+  isBusy: boolean;
+  isCodeValid: boolean;
+}
 
 class Add extends ContractModal<Props, State> {
-  constructor (props: Props) {
+  public constructor (props: Props) {
     super(props);
     this.defaultState = {
       ...this.defaultState,
@@ -32,7 +32,7 @@ class Add extends ContractModal<Props, State> {
     this.headerText = props.t('Add an existing code hash');
   }
 
-  renderContent = () => {
+  protected renderContent = (): React.ReactNode => {
     const { t } = this.props;
     const { codeHash, isBusy, isCodeValid } = this.state;
 
@@ -58,7 +58,7 @@ class Add extends ContractModal<Props, State> {
     );
   }
 
-  renderButtons = () => {
+  protected renderButtons = (): React.ReactNode => {
     const { t } = this.props;
     const { isBusy, isCodeValid, isNameValid } = this.state;
     const isValid = !isBusy && isCodeValid && isNameValid;
@@ -92,22 +92,20 @@ class Add extends ContractModal<Props, State> {
       return;
     }
 
-    this.setState(
-      { isBusy: true },
-      () => {
-        store.saveCode(new Hash(codeHash), { abi, name, tags })
-          .then(() => {
-            this.setState(
-              { isBusy: false },
-              () => this.onClose()
-            );
-          })
-          .catch((error) => {
-            console.error('Unable to save code', error);
-            this.setState({ isBusy: false });
-          });
-      }
-    );
+    this.setState({ isBusy: true }, (): void => {
+      store
+        .saveCode(new Hash(codeHash), { abi, name, tags })
+        .then((): void => {
+          this.setState(
+            { isBusy: false },
+            (): void => this.onClose()
+          );
+        })
+        .catch((error): void => {
+          console.error('Unable to save code', error);
+          this.setState({ isBusy: false });
+        });
+    });
 
     // this.redirect();
   }

packages/app-contracts/src/Codes/Code.tsx

@@ -19,15 +19,15 @@ import contracts from '../store';
 import translate from '../translate';
 
 type Props = I18nProps & RouteComponentProps & {
-  basePath: string,
-  code: CodeStored,
-  showDeploy: (codeHash?: string) => () => void
+  basePath: string;
+  code: CodeStored;
+  showDeploy: (codeHash?: string) => () => void;
 };
 
-type State = {
-  isForgetOpen: boolean,
-  isRemoveABIOpen: boolean
-};
+interface State {
+  isForgetOpen: boolean;
+  isRemoveABIOpen: boolean;
+}
 
 const CodeCard = styled(Card)`
   && {
@@ -36,12 +36,12 @@ const CodeCard = styled(Card)`
 `;
 
 class Contract extends React.PureComponent<Props> {
-  state: State = {
+  public state: State = {
     isForgetOpen: false,
     isRemoveABIOpen: false
   };
 
-  render () {
+  public render (): React.ReactNode {
     const { code, code: { contractAbi } } = this.props;
 
     return (
@@ -63,7 +63,7 @@ class Contract extends React.PureComponent<Props> {
     );
   }
 
-  private renderButtons () {
+  private renderButtons (): React.ReactNode {
     const { code: { json: { codeHash } }, showDeploy, t } = this.props;
 
     return (
@@ -87,7 +87,7 @@ class Contract extends React.PureComponent<Props> {
     );
   }
 
-  private renderModals () {
+  private renderModals (): React.ReactNode {
     const { code } = this.props;
     const { isForgetOpen, isRemoveABIOpen } = this.state;
 
@@ -115,7 +115,7 @@ class Contract extends React.PureComponent<Props> {
           code={code}
           key='modal-remove-abi'
           onClose={this.toggleRemoveABI}
-          onRemove={() => this.onChangeABI(null)}
+          onRemove={this.onChangeABI}
         />
       );
     }
@@ -155,7 +155,7 @@ class Contract extends React.PureComponent<Props> {
     }
   }
 
-  private onChangeABI = async (abi: string | null) => {
+  private onChangeABI = async (abi: string | null = null): Promise<void> => {
     const { code: { json: { codeHash } } } = this.props;
 
     await contracts.saveCode(

packages/app-contracts/src/Codes/Upload.tsx

@@ -18,14 +18,14 @@ import translate from '../translate';
 
 type Props = ContractModalProps & ApiProps;
 
-type State = ContractModalState & {
-  gasLimit: BN,
-  isWasmValid: boolean,
-  wasm?: Uint8Array | null
-};
+interface State extends ContractModalState {
+  gasLimit: BN;
+  isWasmValid: boolean;
+  wasm?: Uint8Array | null;
+}
 
 class Upload extends ContractModal<Props, State> {
-  constructor (props: Props) {
+  public constructor (props: Props) {
     super(props);
 
     this.defaultState = {
@@ -37,7 +37,7 @@ class Upload extends ContractModal<Props, State> {
     this.headerText = props.t('Upload WASM');
   }
 
-  renderContent = () => {
+  protected renderContent = (): React.ReactNode => {
     const { t } = this.props;
     const { isBusy, isWasmValid, wasm } = this.state;
 
@@ -63,7 +63,7 @@ class Upload extends ContractModal<Props, State> {
     );
   }
 
-  renderButtons = () => {
+  protected renderButtons = (): React.ReactNode => {
     const { api, t } = this.props;
     const { accountId, gasLimit, isBusy, isNameValid, isWasmValid, wasm } = this.state;
     const isValid = !isBusy && accountId && isNameValid && isWasmValid && !gasLimit.isZero() && !!accountId;
@@ -96,8 +96,8 @@ class Upload extends ContractModal<Props, State> {
 
   private onSuccess = (result: SubmittableResult): void => {
     const { api } = this.props;
-    this.setState(({ abi, name, tags }) => {
 
+    this.setState(({ abi, name, tags }): State | null => {
       const section = api.tx.contracts ? 'contracts' : 'contract';
       const record = result.findRecord(section, 'CodeStored');
 
@@ -105,16 +105,17 @@ class Upload extends ContractModal<Props, State> {
         const codeHash = record.event.data[0];
 
         if (!codeHash || !name) {
-          return;
+          return null;
         }
 
         store.saveCode(codeHash as Hash, { abi, name, tags })
-          .then(() => this.onClose())
-          .catch((error: any) => {
+          .then((): void => this.onClose())
+          .catch((error: any): void => {
             console.error('Unable to save code', error);
           });
       }
-      return { isBusy: false } as State;
+
+      return { isBusy: false } as unknown as State;
     });
   }
 }

packages/app-contracts/src/Codes/ValidateCode.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/app-contracts authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
@@ -14,25 +15,25 @@ import { isHex } from '@polkadot/util';
 import translate from '../translate';
 
 type Props = ApiProps & I18nProps & {
-  codeHash?: string | null,
-  contract_codeStorage?: Option<PrefabWasmModule>,
-  onChange: (isValid: boolean) => void
+  codeHash?: string | null;
+  contract_codeStorage?: Option<PrefabWasmModule>;
+  onChange: (isValid: boolean) => void;
 };
 
-type State = {
-  isStored: boolean,
-  isValidHex: boolean,
-  isValid: boolean
-};
+interface State {
+  isStored: boolean;
+  isValidHex: boolean;
+  isValid: boolean;
+}
 
 class ValidateCode extends React.PureComponent<Props> {
-  state: State = {
+  public state: State = {
     isStored: false,
     isValidHex: false,
     isValid: false
   };
 
-  static getDerivedStateFromProps ({ codeHash, contract_codeStorage, onChange }: Props): State {
+  public static getDerivedStateFromProps ({ codeHash, contract_codeStorage, onChange }: Props): State {
     const isValidHex = !!codeHash && isHex(codeHash) && codeHash.length === 66;
     const isStored = !!contract_codeStorage && contract_codeStorage.isSome;
     const isValid = isValidHex && isStored;
@@ -47,7 +48,7 @@ class ValidateCode extends React.PureComponent<Props> {
     };
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { t } = this.props;
     const { isValid, isValidHex } = this.state;
 

packages/app-contracts/src/Codes/index.tsx

@@ -17,18 +17,18 @@ import Add from './Add';
 
 type Props = ComponentProps & I18nProps;
 
-type State = {
-  isAddOpen: boolean,
-  isUploadOpen: boolean
-};
+interface State {
+  isAddOpen: boolean;
+  isUploadOpen: boolean;
+}
 
 class Codes extends React.PureComponent<Props> {
-  state = {
+  public state: State = {
     isAddOpen: false,
     isUploadOpen: false
-  } as State;
+  };
 
-  render () {
+  public render (): React.ReactNode {
     const { basePath, showDeploy, t } = this.props;
     const { isAddOpen, isUploadOpen } = this.state;
 
@@ -53,7 +53,7 @@ class Codes extends React.PureComponent<Props> {
             </Button.Group>
           }
         >
-          {contracts.getAllCode().map((code) => {
+          {contracts.getAllCode().map((code): React.ReactNode => {
             return (
               <Code
                 key={code.json.codeHash}
@@ -78,19 +78,19 @@ class Codes extends React.PureComponent<Props> {
     );
   }
 
-  private showUpload = () => {
+  private showUpload = (): void => {
     this.setState({ isUploadOpen: true });
   }
 
-  private hideUpload = () => {
+  private hideUpload = (): void => {
     this.setState({ isUploadOpen: false });
   }
 
-  private showAdd = () => {
+  private showAdd = (): void => {
     this.setState({ isAddOpen: true });
   }
 
-  private hideAdd = () => {
+  private hideAdd = (): void => {
     this.setState({ isAddOpen: false });
   }
 }

packages/app-contracts/src/Contracts/Add.tsx

@@ -18,13 +18,13 @@ import translate from '../translate';
 
 type Props = ContractModalProps & ApiProps & I18nProps;
 
-type State = ContractModalState & {
-  address?: string | null,
-  isAddressValid: boolean
-};
+interface State extends ContractModalState {
+  address?: string | null;
+  isAddressValid: boolean;
+}
 
 class Add extends ContractModal<Props, State> {
-  constructor (props: Props) {
+  public constructor (props: Props) {
     super(props);
     this.defaultState = {
       ...this.defaultState,
@@ -37,9 +37,9 @@ class Add extends ContractModal<Props, State> {
     this.headerText = props.t('Add an existing contract');
   }
 
-  isContract = true;
+  public isContract = true;
 
-  renderContent = () => {
+  protected renderContent = (): React.ReactNode => {
     const { t } = this.props;
     const { address, isAddressValid, isBusy, name } = this.state;
 
@@ -69,7 +69,7 @@ class Add extends ContractModal<Props, State> {
     );
   }
 
-  renderButtons = () => {
+  protected renderButtons = (): React.ReactNode => {
     const { t } = this.props;
     const { isAddressValid, isAbiValid, isNameValid } = this.state;
     const isValid = isNameValid && isAddressValid && isAbiValid;
@@ -96,9 +96,9 @@ class Add extends ContractModal<Props, State> {
     this.setState({ isAddressValid });
   }
 
-  private onAdd = async () => {
+  private onAdd = async (): Promise<void> => {
     const { api } = this.props;
-    const status = { action: 'create' } as ActionStatus;
+    const status: Partial<ActionStatus> = { action: 'create' };
     const { address, abi, name, tags } = this.state;
 
     if (!address || !abi || !name) {
@@ -120,10 +120,11 @@ class Add extends ContractModal<Props, State> {
       status.account = address;
       status.status = address ? 'success' : 'error';
       status.message = 'contract added';
-      this.onClose();
 
+      this.onClose();
     } catch (error) {
       console.error(error);
+
       status.status = 'error';
       status.message = error.message;
     }

packages/app-contracts/src/Contracts/Call.tsx

@@ -17,26 +17,26 @@ import translate from '../translate';
 import Params from '../Params';
 
 type Props = BareProps & I18nProps & ApiProps & {
-  address: string | null,
-  isOpen: boolean,
-  method: string | null
-  onClose: () => void
+  address: string | null;
+  isOpen: boolean;
+  method: string | null;
+  onClose: () => void;
 };
 
-type State = {
-  accountId: string | null,
-  address: string | null,
-  contractAbi?: Abi | null,
-  endowment: BN,
-  gasLimit: BN,
-  isAddressValid: boolean,
-  isBusy: boolean,
-  method: string | null,
-  params: Array<any>
-};
+interface State {
+  accountId: string | null;
+  address: string | null;
+  contractAbi?: Abi | null;
+  endowment: BN;
+  gasLimit: BN;
+  isAddressValid: boolean;
+  isBusy: boolean;
+  method: string | null;
+  params: any[];
+}
 
 class Call extends TxComponent<Props, State> {
-  defaultState: State = {
+  public defaultState: State = {
     address: null,
     accountId: null,
     endowment: new BN(0),
@@ -47,24 +47,25 @@ class Call extends TxComponent<Props, State> {
     params: []
   };
 
-  state: State = this.defaultState;
+  public state: State = this.defaultState;
 
-  static getDerivedStateFromProps ({ address: propsAddress, method: propsMethod, isOpen }: Props, { address, method }: State) {
+  public static getDerivedStateFromProps ({ address: propsAddress, method: propsMethod, isOpen }: Props, { address, method }: State): State | null {
     if (!isOpen) {
       return {
         address: null,
         method: null,
         contractAbi: null,
-        isValidAddress: false
-      };
+        isAddressValid: false
+      } as unknown as State;
     }
+
     return {
       ...(
         !address
           ? {
             address: propsAddress,
             contractAbi: propsAddress ? getContractAbi(propsAddress) : null,
-            isValidAddress: !!propsAddress
+            isAddressValid: !!propsAddress
           }
           : {}
       ),
@@ -73,10 +74,10 @@ class Call extends TxComponent<Props, State> {
           ? { method: propsMethod }
           : {}
       )
-    };
+    } as unknown as State;
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { isOpen, t } = this.props;
 
     return (
@@ -99,11 +100,11 @@ class Call extends TxComponent<Props, State> {
     );
   }
 
-  renderContent = () => {
+  public renderContent (): React.ReactNode {
     const { t } = this.props;
     const { gasLimit } = this.state;
 
-    const [ address, contractAbi, method ] = this.getCallProps();
+    const [address, contractAbi, method] = this.getCallProps();
     const isEndowValid = true;
     const isGasValid = !gasLimit.isZero();
 
@@ -177,7 +178,7 @@ class Call extends TxComponent<Props, State> {
     );
   }
 
-  private renderButtons = () => {
+  private renderButtons (): React.ReactNode {
     const { api, t } = this.props;
     const { accountId, gasLimit, isAddressValid } = this.state;
     const isEndowValid = true; // !endowment.isZero();
@@ -218,12 +219,12 @@ class Call extends TxComponent<Props, State> {
     } else {
       address = this.state.address;
       contractAbi = this.state.contractAbi || getContractAbi(address);
-      method = contractAbi && this.state.method && contractAbi.messages[this.state.method] ?
-        this.state.method :
-        (
-          contractAbi ?
-            Object.keys(contractAbi.messages)[0] :
-            null
+      method = contractAbi && this.state.method && contractAbi.messages[this.state.method]
+        ? this.state.method
+        : (
+          contractAbi
+            ? Object.keys(contractAbi.messages)[0]
+            : null
         );
     }
 
@@ -234,12 +235,12 @@ class Call extends TxComponent<Props, State> {
     ];
   }
 
-  private constructCall = (): Array<any> => {
+  private constructCall = (): any[] => {
     const {
       endowment, gasLimit, params
     } = this.state;
 
-    const [ address, contractAbi, method ] = this.getCallProps();
+    const [address, contractAbi, method] = this.getCallProps();
 
     if (!contractAbi || !method) {
       return [];
@@ -270,29 +271,30 @@ class Call extends TxComponent<Props, State> {
     this.setState({ method, params: [] });
   }
 
-  private onChangeParams = (params: Array<any>): void => {
+  private onChangeParams = (params: any[]): void => {
     this.setState({ params });
   }
 
   private toggleBusy = (): void => {
-    this.setState(({ isBusy }) => ({
+    this.setState(({ isBusy }): State => ({
       isBusy: !isBusy
-    }));
+    }) as unknown as State);
   }
 
-  private reset = () => {
-    this.setState((state: State) => {
+  private reset = (): void => {
+    this.setState((state: State): State => {
       if (!state.isBusy) {
         return {
           ...state,
           ...this.defaultState
         };
       }
-      return {} as State;
+
+      return {} as unknown as State;
     });
   }
 
-  private onClose = () => {
+  private onClose = (): void => {
     const { onClose } = this.props;
 
     this.reset();

packages/app-contracts/src/Contracts/Contract.tsx

@@ -16,21 +16,21 @@ import { withMulti } from '@polkadot/ui-api';
 import translate from '../translate';
 
 type Props = I18nProps & RouteComponentProps & {
-  basePath: string,
-  address: string,
-  onCall: (callAddress?: string, callMethod?: string) => void
+  basePath: string;
+  address: string;
+  onCall: (callAddress?: string, callMethod?: string) => void;
 };
 
-type State = {
-  isBackupOpen: boolean,
-  isForgetOpen: boolean,
-  isPasswordOpen: boolean
-};
+interface State {
+  isBackupOpen: boolean;
+  isForgetOpen: boolean;
+  isPasswordOpen: boolean;
+}
 
 class Contract extends React.PureComponent<Props> {
-  state: State;
+  public state: State;
 
-  constructor (props: Props) {
+  public constructor (props: Props) {
     super(props);
     this.state = {
       isBackupOpen: false,
@@ -39,7 +39,7 @@ class Contract extends React.PureComponent<Props> {
     };
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { address, onCall } = this.props;
 
     const contractAbi = getContractAbi(address);
@@ -72,7 +72,7 @@ class Contract extends React.PureComponent<Props> {
     );
   }
 
-  private renderModals () {
+  private renderModals (): React.ReactNode {
     const { address } = this.props;
     const { isForgetOpen } = this.state;
 
@@ -112,10 +112,10 @@ class Contract extends React.PureComponent<Props> {
       return;
     }
 
-    const status = {
+    const status: Partial<ActionStatus> = {
       account: address,
       action: 'forget'
-    } as ActionStatus;
+    };
 
     try {
       keyring.forgetContract(address);
@@ -128,7 +128,7 @@ class Contract extends React.PureComponent<Props> {
     this.toggleForget();
   }
 
-  private renderButtons () {
+  private renderButtons (): React.ReactNode {
     const { address, onCall, t } = this.props;
 
     return (
@@ -144,7 +144,7 @@ class Contract extends React.PureComponent<Props> {
           isPrimary
           label={t('execute')}
           labelIcon='play'
-          onClick={() => onCall(address)}
+          onClick={(): void => onCall(address)}
           size='small'
           tooltip={t('Call a method on this contract')}
         />

packages/app-contracts/src/Contracts/ValidateAddr.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/app-contracts authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
@@ -14,25 +15,25 @@ import keyring from '@polkadot/ui-keyring';
 import translate from '../translate';
 
 type Props = ApiProps & I18nProps & {
-  address?: string | null,
-  contract_contractInfoOf?: Option<ContractInfo>,
-  onChange: (isValid: boolean) => void
+  address?: string | null;
+  contract_contractInfoOf?: Option<ContractInfo>;
+  onChange: (isValid: boolean) => void;
 };
 
-type State = {
-  isStored: boolean,
-  isValidAddr: boolean,
-  isValid: boolean
-};
+interface State {
+  isStored: boolean;
+  isValidAddr: boolean;
+  isValid: boolean;
+}
 
 class ValidateAddr extends React.PureComponent<Props> {
-  state: State = {
+  public state: State = {
     isStored: false,
     isValidAddr: false,
     isValid: false
   };
 
-  static getDerivedStateFromProps ({ address, contract_contractInfoOf, onChange }: Props): State {
+  public static getDerivedStateFromProps ({ address, contract_contractInfoOf, onChange }: Props): State {
     let isValidAddr = false;
 
     try {
@@ -59,7 +60,7 @@ class ValidateAddr extends React.PureComponent<Props> {
     };
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { t } = this.props;
     const { isValid, isValidAddr } = this.state;
 

packages/app-contracts/src/Contracts/index.tsx

@@ -18,22 +18,22 @@ import Call from './Call';
 
 type Props = ComponentProps & I18nProps & RouteComponentProps;
 
-type State = {
-  isAddOpen: boolean,
-  isCallOpen: boolean,
-  callAddress: string | null,
-  callMethod: string | null
-};
+interface State {
+  isAddOpen: boolean;
+  isCallOpen: boolean;
+  callAddress: string | null;
+  callMethod: string | null;
+}
 
 class Contracts extends React.PureComponent<Props, State> {
-  state: State = {
+  public state: State = {
     callAddress: null,
     callMethod: null,
     isAddOpen: false,
     isCallOpen: false
   };
 
-  render () {
+  public render (): React.ReactNode {
     const { accounts, basePath, contracts, hasCode, showDeploy, t } = this.props;
     const { callAddress, callMethod, isAddOpen, isCallOpen } = this.state;
 
@@ -62,7 +62,7 @@ class Contracts extends React.PureComponent<Props, State> {
             </Button.Group>
           }
         >
-          {accounts && contracts && Object.keys(contracts).map((address) => {
+          {accounts && contracts && Object.keys(contracts).map((address): React.ReactNode => {
             return (
               <Contract
                 basePath={basePath}
@@ -88,19 +88,19 @@ class Contracts extends React.PureComponent<Props, State> {
     );
   }
 
-  private showAdd = () => {
+  private showAdd = (): void => {
     this.setState({
       isAddOpen: true
     });
   }
 
-  private hideAdd = () => {
+  private hideAdd = (): void => {
     this.setState({
       isAddOpen: false
     });
   }
 
-  private showCall = (callAddress?: string, callMethod?: string) => {
+  private showCall = (callAddress?: string, callMethod?: string): void => {
     this.setState({
       isCallOpen: true,
       callAddress: callAddress || null,
@@ -108,7 +108,7 @@ class Contracts extends React.PureComponent<Props, State> {
     });
   }
 
-  private hideCall = () => {
+  private hideCall = (): void => {
     this.setState({
       isCallOpen: false,
       callAddress: null,

packages/app-contracts/src/Deploy.tsx

@@ -22,25 +22,26 @@ import Params from './Params';
 import store from './store';
 import translate from './translate';
 
-type ConstructOptions = Array<{key: string, text: string, value: string}>;
+type ConstructOptions = { key: string; text: string; value: string }[];
 
 type Props = ContractModalProps & ApiProps & I18nProps & RouteComponentProps & {
-  codeHash?: string
+  codeHash?: string;
 };
 
-type State = ContractModalState & {
-  codeHash?: string,
-  constructOptions: ConstructOptions,
-  endowment: BN,
-  isHashValid: boolean,
-  params: Array<any>
-};
+interface State extends ContractModalState {
+  codeHash?: string;
+  constructOptions: ConstructOptions;
+  endowment: BN;
+  isHashValid: boolean;
+  params: any[];
+}
 
 class Deploy extends ContractModal<Props, State> {
-  headerText = 'Deploy a new contract';
-  isContract = true;
+  protected headerText = 'Deploy a new contract';
 
-  constructor (props: Props) {
+  public isContract = true;
+
+  public constructor (props: Props) {
     super(props);
 
     this.defaultState = {
@@ -54,7 +55,7 @@ class Deploy extends ContractModal<Props, State> {
     this.state = this.defaultState;
   }
 
-  componentWillReceiveProps (nextProps: Props, nextState: State) {
+  public componentWillReceiveProps (nextProps: Props, nextState: State): void {
     super.componentWillReceiveProps(nextProps, nextState);
 
     if (nextProps.codeHash && nextProps.codeHash !== this.props.codeHash) {
@@ -64,7 +65,7 @@ class Deploy extends ContractModal<Props, State> {
     }
   }
 
-  renderContent = () => {
+  protected renderContent = (): React.ReactNode => {
     const { t } = this.props;
     const { codeHash, constructOptions, contractAbi, endowment, isAbiSupplied, isBusy, isHashValid } = this.state;
 
@@ -137,7 +138,7 @@ class Deploy extends ContractModal<Props, State> {
     );
   }
 
-  renderButtons = () => {
+  protected renderButtons = (): React.ReactNode => {
     const { api, t } = this.props;
     const { accountId, endowment, gasLimit, isAbiValid, isHashValid, isNameValid } = this.state;
     const isEndowValid = !endowment.isZero();
@@ -163,9 +164,9 @@ class Deploy extends ContractModal<Props, State> {
     );
   }
 
-  private getContractAbiState = (abi: string | null | undefined, contractAbi: Abi | null = null): State => {
+  private getContractAbiState = (abi: string | null | undefined, contractAbi: Abi | null = null): Partial<State> => {
     if (contractAbi) {
-      const args = contractAbi.deploy.args.map(({ name, type }) => name + ': ' + type);
+      const args = contractAbi.deploy.args.map(({ name, type }): string => `${name}: ${type}`);
       const text = `deploy(${args.join(', ')})`;
 
       return {
@@ -182,7 +183,7 @@ class Deploy extends ContractModal<Props, State> {
             type: getTypeDef(type, name)
           }))
         )
-      } as State;
+      };
     } else {
       return {
         constructOptions: [] as ConstructOptions,
@@ -190,8 +191,8 @@ class Deploy extends ContractModal<Props, State> {
         contractAbi: null,
         isAbiSupplied: false,
         isAbiValid: false,
-        params: [] as Array<any>
-      } as State;
+        params: [] as unknown[]
+      };
     }
   }
 
@@ -209,14 +210,14 @@ class Deploy extends ContractModal<Props, State> {
           isHashValid: true,
           isNameValid: true,
           ...this.getContractAbiState(json.abi, contractAbi)
-        } as State;
+        } as unknown as State;
       }
     }
 
-    return {} as State;
+    return {} as unknown as State;
   }
 
-  private constructCall = (): Array<any> => {
+  private constructCall = (): any[] => {
     const { codeHash, contractAbi, endowment, gasLimit, params } = this.state;
 
     if (!contractAbi) {
@@ -228,7 +229,7 @@ class Deploy extends ContractModal<Props, State> {
 
   protected onAddAbi = (abi: string | null | undefined, contractAbi?: Abi | null): void => {
     this.setState({
-      ...this.getContractAbiState(abi, contractAbi)
+      ...(this.getContractAbiState(abi, contractAbi) as State)
     });
   }
 
@@ -242,20 +243,20 @@ class Deploy extends ContractModal<Props, State> {
     this.setState({ endowment: endowment || new BN(0) });
   }
 
-  private onChangeParams = (params: Array<any>): void => {
+  private onChangeParams = (params: any[]): void => {
     this.setState({ params });
   }
 
-  private onSuccess = async (result: SubmittableResult) => {
+  private onSuccess = async (result: SubmittableResult): Promise<void> => {
     const { api, history } = this.props;
 
     const section = api.tx.contracts ? 'contracts' : 'contract';
     const record = result.findRecord(section, 'Instantiated');
 
     if (record) {
-      const address = record.event.data[1] as any as AccountId;
+      const address = record.event.data[1] as unknown as AccountId;
 
-      this.setState(({ abi, name, tags }) => {
+      this.setState(({ abi, name, tags }): State | unknown => {
         if (!abi || !name) {
           return;
         }
@@ -273,10 +274,9 @@ class Deploy extends ContractModal<Props, State> {
 
         this.onClose();
 
-        return { isBusy: false } as State;
+        return { isBusy: false } as unknown as State;
       });
     }
-
   }
 }
 

packages/app-contracts/src/Modal.tsx

@@ -11,25 +11,25 @@ import { Button, Input, InputAddress, InputNumber, Modal, TxComponent } from '@p
 
 import ABI from './ABI';
 
-export type ContractModalProps = I18nProps & {
-  basePath: string,
-  isNew?: boolean,
-  isOpen: boolean,
-  onClose?: () => void
-};
+export interface ContractModalProps extends I18nProps {
+  basePath: string;
+  isNew?: boolean;
+  isOpen: boolean;
+  onClose?: () => void;
+}
 
-export type ContractModalState = {
-  abi?: string | null,
-  accountId?: string | null,
-  contractAbi?: Abi | null,
-  gasLimit: BN,
-  isAbiSupplied: boolean,
-  isAbiValid: boolean,
-  isBusy: boolean,
-  isNameValid: boolean,
-  name?: string | null,
-  tags: Array<string>
-};
+export interface ContractModalState {
+  abi?: string | null;
+  accountId?: string | null;
+  contractAbi?: Abi | null;
+  gasLimit: BN;
+  isAbiSupplied: boolean;
+  isAbiValid: boolean;
+  isBusy: boolean;
+  isNameValid: boolean;
+  name?: string | null;
+  tags: string[];
+}
 
 class ContractModal<P extends ContractModalProps, S extends ContractModalState> extends TxComponent<P, S> {
   protected defaultState: S = {
@@ -40,20 +40,20 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
     isBusy: false,
     isNameValid: false,
     name: null,
-    tags: [] as Array<string>
+    tags: [] as string[]
   } as S;
 
-  state: S = this.defaultState;
+  public state: S = this.defaultState;
 
-  isContract?: boolean;
+  protected isContract?: boolean;
 
-  componentWillReceiveProps ({ isOpen }: P, _: S) {
+  public componentWillReceiveProps ({ isOpen }: P, _: S): void {
     if (isOpen && !this.props.isOpen && !this.state.isBusy) {
       this.reset();
     }
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { isOpen, t } = this.props;
 
     return (
@@ -77,24 +77,26 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
   }
 
   protected headerText: string = '';
+
   protected renderContent: () => React.ReactNode | null = () => null;
+
   protected renderButtons: () => React.ReactNode | null = () => null;
 
-  protected renderInputAbi () {
+  protected renderInputAbi (): React.ReactNode {
     const { t } = this.props;
     const { isBusy } = this.state;
 
     return (
       <ABI
         help={t(
-          this.isContract ?
-            'The ABI for the WASM code. Since we will be making a call into the code, the ABI is required and stored for future operations such as sending messages.' :
-            'The ABI for the WASM code. In this step it is optional, but setting it here simplifies the setup of contract instances.'
+          this.isContract
+            ? 'The ABI for the WASM code. Since we will be making a call into the code, the ABI is required and stored for future operations such as sending messages.'
+            : 'The ABI for the WASM code. In this step it is optional, but setting it here simplifies the setup of contract instances.'
         )}
         label={t(
-          this.isContract ?
-            'contract ABI' :
-            'contract ABI (optional)'
+          this.isContract
+            ? 'contract ABI'
+            : 'contract ABI (optional)'
         )}
         onChange={this.onAddAbi}
         isDisabled={isBusy}
@@ -103,7 +105,7 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
     );
   }
 
-  protected renderInputAccount () {
+  protected renderInputAccount (): React.ReactNode {
     const { t } = this.props;
     const { accountId, isBusy } = this.state;
 
@@ -121,7 +123,7 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
     );
   }
 
-  protected renderInputName () {
+  protected renderInputName (): React.ReactNode {
     const { isNew, t } = this.props;
     const { isBusy, isNameValid, name } = this.state;
 
@@ -129,16 +131,16 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
       <Input
         defaultValue={name}
         help={t(
-          this.isContract ?
-            'A name for the deployed contract to help users distinguish. Only used for display purposes.' :
-            'A name for this WASM code to help users distinguish. Only used for display purposes.'
+          this.isContract
+            ? 'A name for the deployed contract to help users distinguish. Only used for display purposes.'
+            : 'A name for this WASM code to help users distinguish. Only used for display purposes.'
         )}
         isDisabled={isBusy}
         isError={!isNameValid}
         label={t(
-          this.isContract ?
-            'contract name' :
-            'code bundle name'
+          this.isContract
+            ? 'contract name'
+            : 'code bundle name'
         )}
         onChange={this.onChangeName}
         onEnter={this[isNew ? 'sendTx' : 'submit']}
@@ -147,7 +149,7 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
     );
   }
 
-  protected renderInputGas () {
+  protected renderInputGas (): React.ReactNode {
     const { t } = this.props;
     const { gasLimit, isBusy } = this.state;
     const isGasValid = !gasLimit.isZero();
@@ -166,7 +168,7 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
     );
   }
 
-  protected renderCancelButton () {
+  protected renderCancelButton (): React.ReactNode {
     const { t } = this.props;
 
     return (
@@ -181,21 +183,22 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
     );
   }
 
-  protected reset = () => {
+  protected reset = (): void => {
     this.setState(
       this.defaultState
     );
   }
 
-  protected toggleBusy = (isBusy?: boolean) => () => {
-    this.setState((state: S) => {
-      return {
-        isBusy: isBusy === undefined ? !state.isBusy : isBusy
-      };
-    });
-  }
+  protected toggleBusy = (isBusy?: boolean): () => void =>
+    (): void => {
+      this.setState((state: S): S => {
+        return {
+          isBusy: isBusy === undefined ? !state.isBusy : isBusy
+        } as unknown as S;
+      });
+    }
 
-  protected onClose = () => {
+  protected onClose = (): void => {
     const { onClose } = this.props;
 
     onClose && onClose();

packages/app-contracts/src/Params.tsx

@@ -16,27 +16,32 @@ interface Props {
   onEnter?: () => void;
 }
 
+interface ParamDef {
+  name: string;
+  type: TypeDef;
+}
+
 interface State {
-  params: { name: string; type: TypeDef }[];
+  params: ParamDef[];
 }
 
 export default class Params extends React.PureComponent<Props, State> {
-  state: State = { params: [] };
+  public state: State = { params: [] };
 
-  static getDerivedStateFromProps ({ params }: Props): State | null {
+  public static getDerivedStateFromProps ({ params }: Props): State | null {
     if (!params) {
       return { params: [] };
     }
 
     return {
-      params: params.map(({ name, type }) => ({
+      params: params.map(({ name, type }): ParamDef => ({
         name,
         type: getTypeDef(type, name)
       }))
-    } as State;
+    } as unknown as State;
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { isDisabled, onEnter } = this.props;
     const { params } = this.state;
 
@@ -57,6 +62,6 @@ export default class Params extends React.PureComponent<Props, State> {
   private onChange = (values: RawParams): void => {
     const { onChange } = this.props;
 
-    onChange(values.map(({ value }) => value));
+    onChange(values.map(({ value }): any => value));
   }
 }

packages/app-contracts/src/RemoveABI.tsx

@@ -10,14 +10,14 @@ import { Button, CodeRow, Modal } from '@polkadot/ui-app';
 
 import translate from './translate';
 
-type Props = I18nProps & {
-  code: CodeStored,
-  onClose: () => void,
-  onRemove: () => void
-};
+interface Props extends I18nProps {
+  code: CodeStored;
+  onClose: () => void;
+  onRemove: () => void;
+}
 
 class RemoveABI extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { onClose, t } = this.props;
     return (
       <Modal
@@ -37,7 +37,7 @@ class RemoveABI extends React.PureComponent<Props> {
     );
   }
 
-  private content = () => {
+  private content = (): React.ReactNode => {
     const { t } = this.props;
 
     return (
@@ -48,7 +48,7 @@ class RemoveABI extends React.PureComponent<Props> {
     );
   }
 
-  private renderButtons () {
+  private renderButtons (): React.ReactNode {
     const { onClose, t } = this.props;
 
     return (
@@ -70,7 +70,7 @@ class RemoveABI extends React.PureComponent<Props> {
     );
   }
 
-  private renderContent () {
+  private renderContent (): React.ReactNode {
     const { code } = this.props;
 
     return (
@@ -83,7 +83,7 @@ class RemoveABI extends React.PureComponent<Props> {
     );
   }
 
-  private onRemove = () => {
+  private onRemove = (): void => {
     const { onClose, onRemove } = this.props;
 
     onClose && onClose();

packages/app-contracts/src/index.tsx

@@ -21,48 +21,48 @@ import Codes from './Codes';
 import Deploy from './Deploy';
 
 type Props = AppProps & I18nProps & RouteComponentProps & {
-  accounts: SubjectInfo[],
-  contracts: SubjectInfo[]
+  accounts: SubjectInfo[];
+  contracts: SubjectInfo[];
 };
 
-type State = {
-  codeHash?: string,
-  hasContracts: boolean,
-  isDeployOpen: boolean,
-  updated: number
-};
+interface State {
+  codeHash?: string;
+  hasContracts: boolean;
+  isDeployOpen: boolean;
+  updated: number;
+}
 
 class App extends React.PureComponent<Props, State> {
-  state: State = {
+  public state: State = {
     hasContracts: false,
     isDeployOpen: false,
     updated: 0
   };
 
-  constructor (props: Props) {
+  public constructor (props: Props) {
     super(props);
 
     store.on('new-code', this.triggerUpdate);
     store.on('removed-code', this.triggerUpdate);
 
     // since we have a dep on the async API, we load here
-    store.loadAll().catch(() => {
+    store.loadAll().catch((): void => {
       // noop, handled internally
     });
   }
 
-  static getDerivedStateFromProps ({ contracts }: Props): State {
+  public static getDerivedStateFromProps ({ contracts }: Props): State {
     const hasContracts = !!contracts && Object.keys(contracts).length >= 1;
 
     return {
       hasContracts
-    } as State;
+    } as unknown as State;
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { basePath, t } = this.props;
     const { codeHash, isDeployOpen } = this.state;
-    const hidden: Array<string> = [];
+    const hidden: string[] = [];
 
     return (
       <main className='contracts--App'>
@@ -81,7 +81,7 @@ class App extends React.PureComponent<Props, State> {
                 name: 'contracts',
                 text: 'Contracts'
               }
-            ].map(tab => ({ ...tab, text: t(tab.text) }))
+            ].map((tab) => ({ ...tab, text: t(tab.text) }))
             }
           />
         </header>
@@ -99,8 +99,8 @@ class App extends React.PureComponent<Props, State> {
     );
   }
 
-  private renderComponent (Component: React.ComponentType<ComponentProps>) {
-    return ({ match }: LocationProps) => {
+  private renderComponent (Component: React.ComponentType<ComponentProps>): (p: LocationProps) => React.ReactNode {
+    return ({ match }: LocationProps): React.ReactNode => {
       const { accounts, basePath, contracts, location, onStatusChange } = this.props;
 
       if (!contracts) {
@@ -122,14 +122,15 @@ class App extends React.PureComponent<Props, State> {
     };
   }
 
-  private showDeploy = (codeHash?: string) => () => {
-    this.setState({
-      codeHash: codeHash || undefined,
-      isDeployOpen: true
-    });
-  }
+  private showDeploy = (codeHash?: string): () => void =>
+    (): void => {
+      this.setState({
+        codeHash: codeHash || undefined,
+        isDeployOpen: true
+      });
+    }
 
-  private hideDeploy = () => {
+  private hideDeploy = (): void => {
     this.setState({ isDeployOpen: false });
   }
 
@@ -137,6 +138,7 @@ class App extends React.PureComponent<Props, State> {
     this.setState({ updated: Date.now() });
   }
 }
+
 export default withMulti(
   App,
   translate,

packages/app-contracts/src/store.ts

@@ -17,19 +17,19 @@ const codeRegex = new RegExp(`^${KEY_CODE}`, '');
 class Store extends EventEmitter {
   private allCode: { [index: string]: CodeStored } = {};
 
-  get hasCode (): boolean {
+  public get hasCode (): boolean {
     return Object.keys(this.allCode).length !== 0;
   }
 
-  getAllCode (): Array<CodeStored> {
+  public getAllCode (): CodeStored[] {
     return Object.values(this.allCode);
   }
 
-  getCode (codeHash: string): CodeStored {
+  public getCode (codeHash: string): CodeStored {
     return this.allCode[codeHash];
   }
 
-  async saveCode (codeHash: string | Hash, partial: Partial<CodeJson>) {
+  public async saveCode (codeHash: string | Hash, partial: Partial<CodeJson>): Promise<void> {
     const hex = (typeof codeHash === 'string' ? new Hash(codeHash) : codeHash).toHex();
 
     const existing = this.getCode(hex);
@@ -39,26 +39,26 @@ class Store extends EventEmitter {
       ...partial,
       codeHash: hex,
       genesisHash: api.genesisHash.toHex()
-    } as CodeJson;
+    };
 
     store.set(`${KEY_CODE}${json.codeHash}`, json);
 
-    this.addCode(json);
+    this.addCode(json as CodeJson);
   }
 
-  forgetCode (codeHash: string) {
+  public forgetCode (codeHash: string): void {
     store.remove(`${KEY_CODE}${codeHash}`);
 
     this.removeCode(codeHash);
   }
 
-  async loadAll () {
+  public async loadAll (): Promise<void> {
     try {
       await api.isReady;
 
       const genesisHash = api.genesisHash.toHex();
 
-      store.each((json: CodeJson, key: string) => {
+      store.each((json: CodeJson, key: string): void => {
         if (json && json.genesisHash !== genesisHash) {
           return;
         }
@@ -72,7 +72,7 @@ class Store extends EventEmitter {
     }
   }
 
-  private addCode (json: CodeJson) {
+  private addCode (json: CodeJson): void {
     try {
       this.allCode[json.codeHash] = {
         json,
@@ -87,7 +87,7 @@ class Store extends EventEmitter {
     }
   }
 
-  private removeCode (codeHash: string) {
+  private removeCode (codeHash: string): void {
     try {
       delete this.allCode[codeHash];
       this.emit('removed-code');

packages/app-contracts/src/types.ts

@@ -6,32 +6,35 @@ import { Abi } from '@polkadot/api-contract';
 import { AppProps } from '@polkadot/ui-app/types';
 import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 
-export type LocationProps = {
+export interface LocationProps {
   match: {
-    params: { [index: string]: any }
-  }
-};
+    params: Record<string, any>;
+  };
+}
 
 export type ComponentProps = AppProps & LocationProps & {
-  accounts: SubjectInfo[],
-  contracts: SubjectInfo[],
-  hasCode: boolean,
-  showDeploy: (codeHash?: string) => () => void
+  accounts: SubjectInfo[];
+  contracts: SubjectInfo[];
+  hasCode: boolean;
+  showDeploy: (codeHash?: string) => () => void;
 };
 
-export type CodeJson = {
-  abi?: string | null,
-  codeHash: string
-  name: string,
-  genesisHash: string,
-  tags: Array<string>
-};
+export interface CodeJson {
+  abi?: string | null;
+  codeHash: string;
+  name: string;
+  genesisHash: string;
+  tags: string[];
+}
 
-export type CodeStored = { json: CodeJson , contractAbi?: Abi };
+export interface CodeStored {
+  json: CodeJson;
+  contractAbi?: Abi;
+}
 
-export type ContractJsonOld = {
-  genesisHash: string,
-  abi: string,
-  address: string,
-  name: string
-};
+export interface ContractJsonOld {
+  genesisHash: string;
+  abi: string;
+  address: string;
+  name: string;
+}

packages/app-dashboard/src/Entry.tsx

@@ -12,12 +12,12 @@ import { Icon } from '@polkadot/ui-app';
 
 import translate from './translate';
 
-type Props = I18nProps & {
-  route: Route
-};
+interface Props extends I18nProps {
+  route: Route;
+}
 
 class Entry extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { className, route: { i18n, icon, name }, t } = this.props;
 
     return (

packages/app-dashboard/src/Spacer.tsx

@@ -4,10 +4,10 @@
 
 import React from 'react';
 
-type Props = {};
+interface Props {}
 
 export default class Spacer extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     return (
       <div />
     );

packages/app-dashboard/src/index.tsx

@@ -12,25 +12,25 @@ import routing from '@polkadot/apps-routing';
 import Entry from './Entry';
 import Spacer from './Spacer';
 
-type Props = AppProps & {
+interface Props extends AppProps {
   className?: string;
-};
+}
 
-type State = {
-  routes: Array<Route>
-};
+interface State {
+  routes: Route[];
+}
 
 class App extends React.PureComponent<Props, State> {
   // FIXME Atm we are not applying all the logic around should this be hidden or not, i.e.
   // is the api available, are there accounts, etc. (That logic should also be extracted so
   // it can be used in a proper way here)
-  state: State = {
-    routes: routing.routes.filter((route) =>
-      route && !route.display.isHidden && route.name !== 'dashboard'
-    ) as Array<Route>
+  public state: State = {
+    routes: routing.routes.filter((route): boolean =>
+      !!route && !route.display.isHidden && route.name !== 'dashboard'
+    ) as Route[]
   };
 
-  render () {
+  public render (): React.ReactNode {
     const { className } = this.props;
     const { routes } = this.state;
 

packages/app-democracy/src/Overview/Proposal.tsx

@@ -14,14 +14,14 @@ import { formatBalance } from '@polkadot/util';
 import translate from '../translate';
 import Seconding from './Seconding';
 
-type Props = I18nProps & {
-  democracy_depositOf?: [Balance, Vector<AccountId>] | null,
-  idNumber: BN,
-  value: Proposal
-};
+interface Props extends I18nProps {
+  democracy_depositOf?: [Balance, Vector<AccountId>] | null;
+  idNumber: BN;
+  value: Proposal;
+}
 
 class ProposalDisplay extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { className, democracy_depositOf, idNumber, value } = this.props;
     const depositors = democracy_depositOf
       ? democracy_depositOf[1]

packages/app-democracy/src/Overview/Proposals.tsx

@@ -13,20 +13,20 @@ import { Column } from '@polkadot/ui-app';
 import ProposalDisplay from './Proposal';
 import translate from '../translate';
 
-type Props = I18nProps & {
-  democracy_publicProps?: Array<[BN, Proposal]>
-};
+interface Props extends I18nProps {
+  democracy_publicProps?: [BN, Proposal][];
+}
 
-type State = {
-  isProposeOpen: boolean
-};
+interface State {
+  isProposeOpen: boolean;
+}
 
 class Proposals extends React.PureComponent<Props> {
-  state: State = {
+  public state: State = {
     isProposeOpen: false
   };
 
-  render () {
+  public render (): React.ReactNode {
     const { t } = this.props;
 
     return (

packages/app-democracy/src/Overview/Referendum.tsx

@@ -25,25 +25,25 @@ const COLORS_NAY = settings.uiTheme === 'substrate'
   ? ['#d44', '#e44']
   : ['#d75ea1', '#e189ba'];
 
-type Props = I18nProps & {
-  idNumber: BN,
-  chain_bestNumber?: BN,
-  democracy_referendumVotesFor?: Array<DerivedReferendumVote>,
-  democracy_publicDelay?: BN,
-  value: ReferendumInfoExtended
-};
+interface Props extends I18nProps {
+  idNumber: BN;
+  chain_bestNumber?: BN;
+  democracy_referendumVotesFor?: DerivedReferendumVote[];
+  democracy_publicDelay?: BN;
+  value: ReferendumInfoExtended;
+}
 
-type State = {
-  voteCount: number,
-  voteCountAye: number,
-  voteCountNay: number,
-  votedAye: BN,
-  votedNay: BN,
-  votedTotal: BN
-};
+interface State {
+  voteCount: number;
+  voteCountAye: number;
+  voteCountNay: number;
+  votedAye: BN;
+  votedNay: BN;
+  votedTotal: BN;
+}
 
 class Referendum extends React.PureComponent<Props, State> {
-  state: State = {
+  public state: State = {
     voteCount: 0,
     voteCountAye: 0,
     voteCountNay: 0,
@@ -86,7 +86,7 @@ class Referendum extends React.PureComponent<Props, State> {
     return newState;
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { chain_bestNumber, className, value } = this.props;
 
     if (!chain_bestNumber || value.end.sub(chain_bestNumber).lten(0)) {

packages/app-democracy/src/Overview/Referendums.tsx

@@ -13,12 +13,12 @@ import { Column } from '@polkadot/ui-app';
 import Referendum from './Referendum';
 import translate from '../translate';
 
-type Props = I18nProps & {
-  democracy_referendums?: Array<Option<ReferendumInfoExtended>>
-};
+interface Props extends I18nProps {
+  democracy_referendums?: Option<ReferendumInfoExtended>[];
+}
 
 class Referendums extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { t } = this.props;
 
     return (

packages/app-democracy/src/Overview/Seconding.tsx

@@ -14,23 +14,23 @@ import { withMulti, withObservable } from '@polkadot/ui-api';
 
 import translate from '../translate';
 
-type Props = I18nProps & {
-  allAccounts?: SubjectInfo,
-  depositors: Array<AccountId>,
-  proposalId: BN | number
-};
+interface Props extends I18nProps {
+  allAccounts?: SubjectInfo;
+  depositors: AccountId[];
+  proposalId: BN | number;
+}
 
-type State = {
-  accountId?: string,
-  isSecondingOpen: boolean
-};
+interface State {
+  accountId?: string;
+  isSecondingOpen: boolean;
+}
 
 class Seconding extends React.PureComponent<Props, State> {
-  state: State = {
+  public state: State = {
     isSecondingOpen: false
   };
 
-  render () {
+  public render (): React.ReactNode {
     const { allAccounts, t } = this.props;
     const hasAccounts = allAccounts && Object.keys(allAccounts).length !== 0;
 
@@ -101,12 +101,12 @@ class Seconding extends React.PureComponent<Props, State> {
     );
   }
 
-  private onChangeAccount = (accountId?: string) => {
+  private onChangeAccount = (accountId?: string): void => {
     this.setState({ accountId });
   }
 
   private toggleSeconding = (): void => {
-    this.setState(({ isSecondingOpen }) => ({
+    this.setState(({ isSecondingOpen }): State => ({
       isSecondingOpen: !isSecondingOpen
     }));
   }

packages/app-democracy/src/Overview/Summary.tsx

@@ -12,17 +12,17 @@ import { formatNumber } from '@polkadot/util';
 
 import translate from '../translate';
 
-type Props = I18nProps & {
-  chain_bestNumber?: BN,
-  democracy_launchPeriod?: BN,
-  democracy_nextTally?: BN,
-  democracy_publicDelay?: BN,
-  democracy_publicPropCount?: BN,
-  democracy_referendumCount?: BN
-};
+interface Props extends I18nProps {
+  chain_bestNumber?: BN;
+  democracy_launchPeriod?: BN;
+  democracy_nextTally?: BN;
+  democracy_publicDelay?: BN;
+  democracy_publicPropCount?: BN;
+  democracy_referendumCount?: BN;
+}
 
 class Summary extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { chain_bestNumber = new BN(0), democracy_launchPeriod = new BN(1), democracy_nextTally = new BN(0), democracy_publicPropCount, democracy_referendumCount = new BN(0), t } = this.props;
 
     return (

packages/app-democracy/src/Overview/Voting.tsx

@@ -13,22 +13,22 @@ import { withMulti, withObservable } from '@polkadot/ui-api';
 
 import translate from '../translate';
 
-type Props = I18nProps & {
-  allAccounts?: SubjectInfo,
-  referendumId: BN | number
-};
+interface Props extends I18nProps {
+  allAccounts?: SubjectInfo;
+  referendumId: BN | number;
+}
 
-type State = {
-  accountId?: string,
-  isVotingOpen: boolean,
-  voteOptions: Array<{ text: React.ReactNode, value: boolean }>,
-  voteValue: boolean
-};
+interface State {
+  accountId?: string;
+  isVotingOpen: boolean;
+  voteOptions: { text: React.ReactNode, value: boolean }[];
+  voteValue: boolean;
+}
 
 class Voting extends React.PureComponent<Props, State> {
-  state: State;
+  public state: State;
 
-  constructor (props: Props) {
+  public constructor (props: Props) {
     super(props);
 
     const { t } = props;
@@ -43,7 +43,7 @@ class Voting extends React.PureComponent<Props, State> {
     };
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { allAccounts, t } = this.props;
     const hasAccounts = allAccounts && Object.keys(allAccounts).length !== 0;
 
@@ -119,18 +119,18 @@ class Voting extends React.PureComponent<Props, State> {
     );
   }
 
-  private onChangeAccount = (accountId?: string) => {
+  private onChangeAccount = (accountId?: string): void => {
     this.setState({ accountId });
   }
 
-  private onChangeVote = (voteValue: boolean) => {
+  private onChangeVote = (voteValue: boolean): void => {
     this.setState({ voteValue });
   }
 
   private toggleVoting = (): void => {
-    this.setState(({ isVotingOpen }) => ({
+    this.setState(({ isVotingOpen }): State => ({
       isVotingOpen: !isVotingOpen
-    }));
+    }) as unknown as State);
   }
 }
 

packages/app-democracy/src/Overview/index.tsx

@@ -14,7 +14,7 @@ import Summary from './Summary';
 type Props = AppProps & BareProps & I18nProps;
 
 export default class Overview extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     return (
       <>
         <Summary />

packages/app-democracy/src/Propose.tsx

@@ -17,24 +17,24 @@ import { withApi, withMulti } from '@polkadot/ui-api';
 import translate from './translate';
 
 type Props = I18nProps & ApiProps & RouteComponentProps & {
-  basePath: string
+  basePath: string;
 };
 
-type State = {
-  accountId?: string,
-  method: Method | null,
-  value: BN,
-  isValid: boolean
-};
+interface State {
+  accountId?: string;
+  method: Method | null;
+  value: BN;
+  isValid: boolean;
+}
 
 class Propose extends TxComponent<Props, State> {
-  state: State = {
+  public state: State = {
     method: null,
     value: new BN(0),
     isValid: false
   };
 
-  render () {
+  public render (): React.ReactNode {
     const { apiDefaultTxSudo, t } = this.props;
     const { isValid, accountId, method, value } = this.state;
     const hasValue = !!value && value.gtn(0);

packages/app-democracy/src/index.tsx

@@ -17,12 +17,12 @@ import translate from './translate';
 
 type Props = AppProps & BareProps & I18nProps;
 
-type State = {
-  tabs: Array<TabItem>
-};
+interface State {
+  tabs: TabItem[];
+}
 
 class App extends React.PureComponent<Props, State> {
-  constructor (props: Props) {
+  public constructor (props: Props) {
     super(props);
 
     const { t } = props;
@@ -42,7 +42,7 @@ class App extends React.PureComponent<Props, State> {
     };
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { basePath } = this.props;
     const { tabs } = this.state;
     const hidden = uiSettings.uiMode === 'full'

packages/app-explorer/src/BestHash.tsx

@@ -9,12 +9,12 @@ import { Header } from '@polkadot/types';
 import { withCalls } from '@polkadot/ui-api';
 
 type Props = BareProps & CallProps & {
-  label?: string,
-  chain_subscribeNewHead?: Header
+  label?: string;
+  chain_subscribeNewHead?: Header;
 };
 
 class BestHash extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { className, label = '', style, chain_subscribeNewHead } = this.props;
 
     return (

packages/app-explorer/src/BlockHeader/index.tsx

@@ -12,15 +12,15 @@ import { HeaderExtended } from '@polkadot/api-derive';
 import { AddressMini, LinkPolkascan } from '@polkadot/ui-app';
 import { formatNumber } from '@polkadot/util';
 
-type Props = BareProps & {
-  isSummary?: boolean,
-  value?: HeaderExtended,
-  withExplorer?: boolean,
-  withLink?: boolean
-};
+interface Props extends BareProps {
+  isSummary?: boolean;
+  value?: HeaderExtended;
+  withExplorer?: boolean;
+  withLink?: boolean;
+}
 
 export default class BlockHeader extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { isSummary, value, withExplorer, withLink } = this.props;
 
     if (!value) {

packages/app-explorer/src/BlockHeaders.tsx

@@ -12,38 +12,38 @@ import BlockHeader from './BlockHeader';
 
 export const MAX_ITEMS = 15;
 
-let blockHeaders: Array<HeaderExtended> = [];
+let blockHeaders: HeaderExtended[] = [];
 
-const transform = (header: HeaderExtended): Array<HeaderExtended> => {
+const transform = (header: HeaderExtended): HeaderExtended[] => {
   if (!header) {
     return blockHeaders;
   }
 
   blockHeaders = blockHeaders
-    .filter((old, index) =>
+    .filter((old, index): boolean =>
       index < MAX_ITEMS && old.blockNumber.lt(header.blockNumber)
     )
-    .reduce((next, header) => {
+    .reduce((next, header): HeaderExtended[] => {
       next.push(header);
 
       return next;
     }, [header])
-    .sort((a, b) =>
+    .sort((a, b): number =>
       b.blockNumber.cmp(a.blockNumber)
     );
 
   return blockHeaders;
 };
 
-type Props = CallProps & {
-  headers?: Array<HeaderExtended>
-};
+interface Props extends CallProps {
+  headers?: HeaderExtended[];
+}
 
 class BlockHeaders extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { headers = [] } = this.props;
 
-    return headers.map((header, index) => (
+    return headers.map((header, index): React.ReactNode => (
       <BlockHeader
         isSummary={!!index}
         key={header.blockNumber.toString()}

packages/app-explorer/src/BlockInfo/ByHash.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.
@@ -18,14 +19,14 @@ import Extrinsics from './Extrinsics';
 import Logs from './Logs';
 
 type Props = ApiProps & I18nProps & {
-  system_events?: Array<EventRecord>,
-  chain_getBlock?: SignedBlock,
-  chain_getHeader?: HeaderExtended,
-  value: string
+  system_events?: EventRecord[];
+  chain_getBlock?: SignedBlock;
+  chain_getHeader?: HeaderExtended;
+  value: string;
 };
 
 class BlockByHash extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { system_events, chain_getBlock, chain_getHeader } = this.props;
 
     if (!chain_getBlock || chain_getBlock.isEmpty || !chain_getHeader || chain_getHeader.isEmpty) {

packages/app-explorer/src/BlockInfo/ByNumber.tsx

@@ -10,13 +10,13 @@ import { withCalls } from '@polkadot/ui-api';
 
 import BlockByHash from './ByHash';
 
-type Props = ApiProps & {
-  chain_getBlockHash?: Hash,
-  value: string
-};
+interface Props extends ApiProps {
+  chain_getBlockHash?: Hash;
+  value: string;
+}
 
 class BlockByNumber extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { chain_getBlockHash } = this.props;
 
     if (!chain_getBlockHash) {

packages/app-explorer/src/BlockInfo/Events.tsx

@@ -11,12 +11,12 @@ import { Column } from '@polkadot/ui-app';
 import EventsDisplay from '../Events';
 import translate from '../translate';
 
-type Props = I18nProps & {
-  value?: Array<EventRecord>
-};
+interface Props extends I18nProps {
+  value?: EventRecord[];
+}
 
 class Events extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { t, value } = this.props;
 
     if (!value || !value.length) {

packages/app-explorer/src/BlockInfo/Extrinsics.tsx

@@ -12,14 +12,14 @@ import { BlockNumber, Extrinsic, Method } from '@polkadot/types';
 
 import translate from '../translate';
 
-type Props = I18nProps & {
-  blockNumber?: BlockNumber,
-  label?: React.ReactNode,
-  value?: Array<Extrinsic> | null
-};
+interface Props extends I18nProps {
+  blockNumber?: BlockNumber;
+  label?: React.ReactNode;
+  value?: Extrinsic[] | null;
+}
 
 class Extrinsics extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { className, label, t } = this.props;
 
     return (

packages/app-explorer/src/BlockInfo/Logs.tsx

@@ -11,12 +11,12 @@ import Params from '@polkadot/ui-params';
 
 import translate from '../translate';
 
-type Props = I18nProps & {
-  value?: Array<DigestItem>
-};
+interface Props extends I18nProps {
+  value?: DigestItem[];
+}
 
 class Logs extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { t, value } = this.props;
 
     if (!value || !value.length) {

packages/app-explorer/src/BlockInfo/index.tsx

@@ -13,25 +13,25 @@ import Query from '../Query';
 import BlockByHash from './ByHash';
 import BlockByNumber from './ByNumber';
 
-type Props = BareProps & {
-  chain_bestNumber?: BlockNumber,
+interface Props extends BareProps {
+  chain_bestNumber?: BlockNumber;
   match: {
     params: {
-      value: string
-    }
-  }
-};
+      value: string;
+    };
+  };
+}
 
-type State = {
-  value?: string
-};
+interface State {
+  value?: string;
+}
 
 class Entry extends React.Component<Props, State> {
-  state: State = {
+  public state: State = {
     value: undefined
   };
 
-  static getDerivedStateFromProps ({ chain_bestNumber, match: { params } }: Props): State {
+  public static getDerivedStateFromProps ({ chain_bestNumber, match: { params } }: Props): State {
     let { value } = params;
     if ((!value || !value.length) && chain_bestNumber) {
       value = chain_bestNumber.toString();
@@ -47,7 +47,7 @@ class Entry extends React.Component<Props, State> {
       !this.state.value;
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { value } = this.state;
 
     if (!value) {

packages/app-explorer/src/Events.tsx

@@ -11,15 +11,15 @@ import { formatNumber } from '@polkadot/util';
 
 import translate from './translate';
 
-type Props = I18nProps & {
-  emptyLabel?: React.ReactNode,
-  events: Array<KeyedEvent>,
-  eventClassName?: string,
-  withoutIndex?: boolean
-};
+interface Props extends I18nProps {
+  emptyLabel?: React.ReactNode;
+  events: KeyedEvent[];
+  eventClassName?: string;
+  withoutIndex?: boolean;
+}
 
 class Events extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { emptyLabel, events, t } = this.props;
 
     if (!events || events.length === 0) {
@@ -29,7 +29,7 @@ class Events extends React.PureComponent<Props> {
     return events.map(this.renderEvent);
   }
 
-  private renderEvent = ({ key, record: { event, phase } }: KeyedEvent) => {
+  private renderEvent = ({ key, record: { event, phase } }: KeyedEvent): React.ReactNode => {
     const { eventClassName, withoutIndex } = this.props;
     const extIndex = !withoutIndex && phase.type === 'ApplyExtrinsic'
       ? phase.asApplyExtrinsic

packages/app-explorer/src/Main.tsx

@@ -14,12 +14,12 @@ import Query from './Query';
 import Summary from './Summary';
 import translate from './translate';
 
-type Props = I18nProps & {
-  events: Array<KeyedEvent>
-};
+interface Props extends I18nProps {
+  events: KeyedEvent[];
+}
 
 class Main extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { events, t } = this.props;
 
     return (

packages/app-explorer/src/NodeInfo/Peers.tsx

@@ -10,12 +10,12 @@ import { formatNumber } from '@polkadot/util';
 
 import translate from './translate';
 
-type Props = I18nProps & {
-  peers?: Array<PeerInfo> | null
-};
+interface Props extends I18nProps {
+  peers?: PeerInfo[] | null;
+}
 
 class Peers extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { t } = this.props;
 
     return (
@@ -26,7 +26,7 @@ class Peers extends React.PureComponent<Props> {
     );
   }
 
-  private renderPeers () {
+  private renderPeers (): React.ReactNode {
     const { peers, t } = this.props;
 
     if (!peers || !peers.length) {
@@ -50,9 +50,7 @@ class Peers extends React.PureComponent<Props> {
           </thead>
           <tbody>
             {peers
-              .sort((a, b) =>
-                b.bestNumber.cmp(a.bestNumber)
-              )
+              .sort((a, b): number => b.bestNumber.cmp(a.bestNumber))
               .map(this.renderPeer)
             }
           </tbody>
@@ -61,7 +59,7 @@ class Peers extends React.PureComponent<Props> {
     );
   }
 
-  private renderPeer = (peer: PeerInfo) => {
+  private renderPeer = (peer: PeerInfo): React.ReactNode => {
     const peerId = peer.peerId.toString();
 
     return (

packages/app-explorer/src/NodeInfo/Summary.tsx

@@ -13,17 +13,17 @@ import { BestNumber, Elapsed } from '@polkadot/ui-reactive';
 
 import translate from './translate';
 
-type Props = I18nProps & {
+interface Props extends I18nProps {
   nextRefresh: number;
   info: Info;
-};
+}
 
-type State = {
-  peerBest?: BN
-};
+interface State {
+  peerBest?: BN;
+}
 
 class Summary extends React.PureComponent<Props, State> {
-  state: State = {};
+  public state: State = {};
 
   static getDerivedStateFromProps ({ info = {} }: Props): State | null {
     if (!info.peers) {
@@ -39,7 +39,7 @@ class Summary extends React.PureComponent<Props, State> {
     };
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { info = {}, nextRefresh, t } = this.props;
     const { peerBest } = this.state;
 

packages/app-explorer/src/NodeInfo/index.tsx

@@ -21,15 +21,15 @@ const POLL_TIMEOUT = 9900;
 
 type Props = ApiProps & AppProps & I18nProps;
 
-type State = {
-  info?: Info,
-  nextRefresh: number,
+interface State {
+  info?: Info;
+  nextRefresh: number;
   timerId?: number;
-};
+}
 
 class App extends React.PureComponent<Props, State> {
   private isActive: boolean = true;
-  state: State = {
+  public state: State = {
     nextRefresh: Date.now()
   };
 
@@ -49,7 +49,7 @@ class App extends React.PureComponent<Props, State> {
     }
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { t } = this.props;
     const { info = {}, nextRefresh } = this.state;
 

packages/app-explorer/src/NodeInfo/types.ts

@@ -4,9 +4,9 @@
 
 import { BlockNumber, Health, PeerInfo, PendingExtrinsics } from '@polkadot/types';
 
-export type Info = {
-  blockNumber?: BlockNumber,
-  health?: Health | null,
-  peers?: Array<PeerInfo> | null,
-  extrinsics?: PendingExtrinsics | null
-};
+export interface Info {
+  blockNumber?: BlockNumber;
+  health?: Health | null;
+  peers?: PeerInfo[] | null;
+  extrinsics?: PendingExtrinsics | null;
+}

packages/app-explorer/src/Query.tsx

@@ -11,18 +11,18 @@ import { isHex } from '@polkadot/util';
 
 import translate from './translate';
 
-type Props = I18nProps & {
-  value?: string
-};
+interface Props extends I18nProps {
+  value?: string;
+}
 
-type State = {
-  value: string
-  isNumber: boolean,
-  isValid: boolean
-};
+interface State {
+  value: string;
+  isNumber: boolean;
+  isValid: boolean;
+}
 
 class Query extends TxComponent<Props, State> {
-  constructor (props: Props) {
+  public constructor (props: Props) {
     super(props);
 
     const { value } = this.props;
@@ -30,7 +30,7 @@ class Query extends TxComponent<Props, State> {
     this.state = this.stateFromValue(value || '');
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { className, t } = this.props;
     const { value, isValid } = this.state;
 

packages/app-explorer/src/Summary.tsx

@@ -11,10 +11,10 @@ import { BestFinalized, BestNumber, TimeNow, TimePeriod, TotalIssuance } from '@
 import SummarySession from './SummarySession';
 import translate from './translate';
 
-type Props = I18nProps & {};
+interface Props extends I18nProps {}
 
 class Summary extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { t } = this.props;
 
     return (

packages/app-explorer/src/SummarySession.tsx

@@ -12,14 +12,14 @@ import { withCalls } from '@polkadot/ui-api';
 import translate from './translate';
 import { formatNumber } from '@polkadot/util';
 
-type Props = I18nProps & {
-  session_info?: DerivedSessionInfo,
-  withEra?: boolean,
-  withSession?: boolean
-};
+interface Props extends I18nProps {
+  session_info?: DerivedSessionInfo;
+  withEra?: boolean;
+  withSession?: boolean;
+}
 
 class SummarySession extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     return (
       <>
         {this.renderSession()}

packages/app-explorer/src/index.tsx

@@ -24,17 +24,17 @@ import NodeInfo from './NodeInfo';
 import translate from './translate';
 
 type Props = AppProps & BareProps & I18nProps & {
-  system_events?: Array<EventRecord>
+  system_events?: EventRecord[];
 };
 
-type State = {
-  items: Array<TabItem>,
+interface State {
+  items: TabItem[];
   prevEventHash: string;
-  recentEvents: Array<KeyedEvent>;
-};
+  recentEvents: KeyedEvent[];
+}
 
 class ExplorerApp extends React.Component<Props, State> {
-  constructor (props: Props) {
+  public constructor (props: Props) {
     super(props);
 
     const { t } = this.props;
@@ -83,7 +83,7 @@ class ExplorerApp extends React.Component<Props, State> {
     };
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { basePath, className } = this.props;
     const { items } = this.state;
     const hidden = uiSettings.uiMode === 'full'

packages/app-explorer/src/types.ts

@@ -4,7 +4,7 @@
 
 import { EventRecord } from '@polkadot/types';
 
-export type KeyedEvent = {
-  key: string,
-  record: EventRecord
-};
+export interface KeyedEvent {
+  key: string;
+  record: EventRecord;
+}

packages/app-extrinsics/src/Balance.tsx

@@ -10,12 +10,12 @@ import { withCalls, withMulti } from '@polkadot/ui-api';
 import { InputBalance } from '@polkadot/ui-app';
 
 type Props = BareProps & CallProps & {
-  balances_all?: DerivedBalances,
-  label?: React.ReactNode
+  balances_all?: DerivedBalances;
+  label?: React.ReactNode;
 };
 
 class BalanceDisplay extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { className, label, style, balances_all } = this.props;
 
     return (

packages/app-extrinsics/src/Selection.tsx

@@ -4,7 +4,7 @@
 
 import BN from 'bn.js';
 import { I18nProps } from '@polkadot/ui-app/types';
-import { QueueTx$ExtrinsicAdd } from '@polkadot/ui-app/Status/types';
+import { QueueTxExtrinsicAdd } from '@polkadot/ui-app/Status/types';
 import { ApiProps } from '@polkadot/ui-api/types';
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 
@@ -18,24 +18,24 @@ import Balance from './Balance';
 import translate from './translate';
 
 type Props = ApiProps & I18nProps & {
-  queueExtrinsic: QueueTx$ExtrinsicAdd
+  queueExtrinsic: QueueTxExtrinsicAdd;
 };
 
-type State = {
-  isValid: boolean,
-  isValidUnsigned: boolean,
-  method: Method | null,
-  accountNonce: BN,
-  accountId: string
-};
+interface State {
+  isValid: boolean;
+  isValidUnsigned: boolean;
+  method: Method | null;
+  accountNonce: BN;
+  accountId: string;
+}
 
 class Selection extends TxComponent<Props, State> {
-  state: State = {
+  public state: State = {
     isValid: false,
     isValidUnsigned: false
   } as State;
 
-  render () {
+  public render (): React.ReactNode {
     const { apiDefaultTxSudo, t } = this.props;
     const { isValid, isValidUnsigned, accountId } = this.state;
     const extrinsic = this.getExtrinsic() || apiDefaultTxSudo;

packages/app-extrinsics/src/index.tsx

@@ -13,7 +13,7 @@ import translate from './translate';
 type Props = AppProps & I18nProps;
 
 class ExtrinsicsApp extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { basePath, t } = this.props;
 
     return (

packages/app-js/src/ActionButtons.tsx

@@ -11,30 +11,30 @@ import { Button, Input } from '@polkadot/ui-app';
 import translate from './translate';
 
 type Props = BareProps & I18nProps & {
-  isCustomExample: boolean,
-  isRunning: boolean,
-  generateLink: () => void,
-  removeSnippet: () => void,
-  runJs: () => void,
-  saveSnippet: (snippetName: string) => void,
-  snippetName?: string,
-  stopJs: () => void
+  isCustomExample: boolean;
+  isRunning: boolean;
+  generateLink: () => void;
+  removeSnippet: () => void;
+  runJs: () => void;
+  saveSnippet: (snippetName: string) => void;
+  snippetName?: string;
+  stopJs: () => void;
 };
 
-type State = {
-  isOpen: boolean,
-  shareText: string,
-  snippetName: string
-};
+interface State {
+  isOpen: boolean;
+  shareText: string;
+  snippetName: string;
+}
 
 class ActionButtons extends React.PureComponent<Props, State> {
-  state: State = {
+  public state: State = {
     isOpen: false,
     shareText: this.props.t('Generate link to share code example'),
     snippetName: ''
   };
 
-  render () {
+  public render (): React.ReactNode {
     const {
       props: { isCustomExample, isRunning, removeSnippet, runJs, stopJs, t },
       state: { isOpen, shareText, snippetName }

packages/app-js/src/Output.tsx

@@ -8,10 +8,10 @@ import { Log } from './types';
 import React from 'react';
 import { isError, isNull, isUndefined } from '@polkadot/util';
 
-type Props = BareProps & {
-  children?: React.ReactNode,
-  logs: Array<Log>
-};
+interface Props extends BareProps {
+  children?: React.ReactNode;
+  logs: Log[];
+}
 
 const format = (value: any): string => {
   if (isError(value)) {
@@ -21,9 +21,9 @@ const format = (value: any): string => {
   } else if (isNull(value)) {
     return 'null';
   } else if (Array.isArray(value)) {
-    return `[${value.map((value) => format(value)).join(', ')}]`;
+    return `[${value.map((value): string => format(value)).join(', ')}]`;
   } else if (value instanceof Map) {
-    return `{${[...value.entries()].map(([key, value]) => key + ': ' + format(value)).join(', ')}}`;
+    return `{${[...value.entries()].map(([key, value]): string => key + ': ' + format(value)).join(', ')}}`;
   }
 
   return value.toString();
@@ -31,12 +31,12 @@ const format = (value: any): string => {
 
 const renderEntry = ({ args, type }: Log, index: number): React.ReactNode => (
   <div className={`js--Log ${type}`} key={index}>
-    {args.map((arg) => format(arg)).join(' ')}
+    {args.map((arg): string => format(arg)).join(' ')}
   </div>
 );
 
 export default class Output extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { children, logs } = this.props;
 
     return (

packages/app-js/src/Playground.tsx

@@ -28,49 +28,50 @@ import { STORE_EXAMPLES, STORE_SELECTED, CUSTOM_LABEL } from './constants';
 import Output from './Output';
 import ActionButtons from './ActionButtons';
 
-type Injected = {
-  api: ApiPromise,
+interface Injected {
+  api: ApiPromise;
   console: {
-    error: (...args: Array<any>) => void,
-    log: (...args: Array<any>) => void
-  },
-  global: null,
-  hashing: typeof hashing,
-  keyring: KeyringInstance | null,
-  types: typeof types,
-  util: typeof util,
-  window: null
-};
+    error: (...args: any[]) => void;
+    log: (...args: any[]) => void;
+  };
+  global: null;
+  hashing: typeof hashing;
+  keyring: KeyringInstance | null;
+  types: typeof types;
+  util: typeof util;
+  window: null;
+}
 
 type Props = ApiProps & AppProps & I18nProps & {
   match: {
     params: {
-      base64?: string
-    }
-  },
+      base64?: string;
+    };
+  };
   // FIXME wait for proper eslint integration in tslint, then hopefully remove this
-  history: any
+  history: any;
 };
 
-type State = {
-  animated: boolean,
-  customExamples: Array<Snippet>,
-  isCustomExample: boolean,
-  isRunning: boolean,
-  logs: Array<Log>,
-  options: Array<Snippet>,
-  sharedExample?: Snippet,
-  selected: Snippet
-};
+interface State {
+  animated: boolean;
+  customExamples: Snippet[];
+  isCustomExample: boolean;
+  isRunning: boolean;
+  logs: Log[];
+  options: Snippet[];
+  sharedExample?: Snippet;
+  selected: Snippet;
+}
 
 class Playground extends React.PureComponent<Props, State> {
-  injected: Injected | null = null;
-  snippets: Array<Snippet> = JSON.parse(JSON.stringify(snippets));
+  private injected: Injected | null = null;
 
-  constructor (props: Props) {
+  private snippets: Snippet[] = JSON.parse(JSON.stringify(snippets));
+
+  public constructor (props: Props) {
     super(props);
 
-    this.snippets.forEach((snippet) => {
+    this.snippets.forEach((snippet): void => {
       snippet.code = `${makeWrapper(this.props.isDevelopment)}${snippet.code}`;
     });
 
@@ -100,7 +101,7 @@ class Playground extends React.PureComponent<Props, State> {
     };
     const customExamples = localData.examples ? JSON.parse(localData.examples) : [];
 
-    const options: Array<Snippet> = sharedExample
+    const options: Snippet[] = sharedExample
       ? [sharedExample, ...customExamples, ...this.snippets]
       : [...customExamples, ...this.snippets];
 
@@ -115,7 +116,7 @@ class Playground extends React.PureComponent<Props, State> {
     }) as State);
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { t } = this.props;
     const { animated, isCustomExample, isRunning, logs, options, selected } = this.state;
     const snippetName = selected.type === 'custom' ? selected.text : undefined;
@@ -286,7 +287,7 @@ class Playground extends React.PureComponent<Props, State> {
   }
 
   private hookConsole = (type: LogType) => {
-    return (...args: Array<any>): void => {
+    return (...args: any[]): void => {
       this.setState(({ logs }: State) => {
         logs.push({ args, type });