Bump dev, JSX prop rules (#2499)

package.json

@@ -8,10 +8,10 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^1.9.0-beta.26",
-    "@polkadot/api-contract": "^1.9.0-beta.26",
+    "@polkadot/api": "^1.9.1",
+    "@polkadot/api-contract": "^1.9.1",
     "@polkadot/keyring": "^2.7.1",
-    "@polkadot/types": "^1.9.0-beta.26",
+    "@polkadot/types": "^1.9.1",
     "@polkadot/util": "^2.7.1",
     "@polkadot/util-crypto": "^2.7.1",
     "babel-core": "^7.0.0-bridge.0",
@@ -36,7 +36,7 @@
     "@babel/core": "^7.9.0",
     "@babel/register": "^7.9.0",
     "@babel/runtime": "^7.9.2",
-    "@polkadot/dev": "^0.51.9",
+    "@polkadot/dev": "^0.52.1",
     "@polkadot/ts": "^0.3.14",
     "@types/bn.js": "^4.11.6",
     "@types/chart.js": "^2.9.16",

packages/apps/package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@babel/polyfill": "^7.8.7",
     "@babel/runtime": "^7.9.2",
-    "@polkadot/dev": "^0.51.9",
+    "@polkadot/dev": "^0.52.1",
     "@polkadot/react-components": "0.40.0-beta.221",
     "@polkadot/react-signer": "0.40.0-beta.221",
     "query-string": "^6.11.1"

packages/apps/src/SideBar/Item.tsx

@@ -105,8 +105,8 @@ function Item ({ route, isCollapsed, onClick }: Props): React.ReactElement<Props
       <span className='text'>{t(`sidebar.${name}`, i18n)}</span>
       {count !== 0 && (
         <Badge
-          isInline
           info={count}
+          isInline
           type='counter'
         />
       )}

packages/apps/src/SideBar/index.tsx

@@ -49,8 +49,8 @@ function SideBar ({ className, collapse, handleResize, isCollapsed, isMenuOpen,
 
   return (
     <Responsive
-      onUpdate={handleResize}
       className={classes(className, 'apps--SideBar-Wrapper', isCollapsed ? 'collapsed' : 'expanded')}
+      onUpdate={handleResize}
     >
       <ChainImg
         className={`toggleImg ${isMenuOpen ? 'closed' : 'open delayed'}`}
@@ -84,12 +84,12 @@ function SideBar ({ className, collapse, handleResize, isCollapsed, isMenuOpen,
                   <Item
                     isCollapsed={isCollapsed}
                     key={route.name}
-                    route={route}
                     onClick={
                       route.Modal
                         ? _toggleModal(route.name)
                         : handleResize
                     }
+                    route={route}
                   />
                 )
                 : (

packages/apps/src/overlays/Accounts.tsx

@@ -32,8 +32,8 @@ function Accounts ({ className }: Props): React.ReactElement<Props> | null {
       <p>{t("You don't have any accounts. Some features are currently hidden and will only become available once you have accounts.")}</p>
       <p>
         <Link
-          to='/accounts'
           onClick={toggleHidden}
+          to='/accounts'
         >
           {t('Create an account now.')}
         </Link>

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

@@ -2,6 +2,9 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+// only here, needs to be available for the rest of the codebase
+/* eslint-disable react/jsx-max-props-per-line */
+
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { AccountIndex, Bubble, InputAddress } from '@polkadot/react-components';

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

@@ -2,6 +2,9 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+// only here, needs to be available for the rest of the codebase
+/* eslint-disable react/jsx-max-props-per-line */
+
 import { DeriveStakingValidators } from '@polkadot/api-derive/types';
 import { Balance, BlockNumber } from '@polkadot/types/interfaces';
 
@@ -35,7 +38,7 @@ function SummaryBar (): React.ReactElement {
         {validators && (
           <Bubble icon='chess queen' label='validators'>{
             validators.validators.map((accountId, index): React.ReactNode => (
-              <IdentityIcon key={index} value={accountId} size={20} />
+              <IdentityIcon key={index} size={20} value={accountId} />
             ))
           }</Bubble>
         )}

packages/page-accounts/src/Accounts/Account.tsx

@@ -229,12 +229,13 @@ function Account ({ address, className, filter, isFavorite, toggleFavorite }: Pr
       </td>
       <td className='address'>
         <AddressSmall
+          onClickName={toggleEditName}
           overrideName={
             isEditingName
               ? (
                 <Input
-                  className='name--input'
                   autoFocus
+                  className='name--input'
                   defaultValue={accName}
                   onBlur={_saveName}
                   onChange={setAccName}
@@ -244,7 +245,6 @@ function Account ({ address, className, filter, isFavorite, toggleFavorite }: Pr
               )
               : undefined
           }
-          onClickName={toggleEditName}
           toggle={isEditingName}
           value={address}
         />
@@ -265,9 +265,9 @@ function Account ({ address, className, filter, isFavorite, toggleFavorite }: Pr
         {isForgetOpen && (
           <Forget
             address={address}
-            onForget={_onForget}
             key='modal-forget-account'
             onClose={toggleForget}
+            onForget={_onForget}
           />
         )}
         {isIdentityOpen && (
@@ -313,21 +313,27 @@ function Account ({ address, className, filter, isFavorite, toggleFavorite }: Pr
         {isEditingTags
           ? (
             <InputTags
+              defaultValue={tags}
               onBlur={_saveTags}
               onChange={_setTags}
               onClose={_saveTags}
               openOnFocus
-              defaultValue={tags}
               searchInput={{ autoFocus: true }}
               value={tags}
               withLabel={false}
             />
           )
           : (
-            <div className='tags--toggle' onClick={toggleEditTags}>
+            <div
+              className='tags--toggle'
+              onClick={toggleEditTags}
+            >
               {tags.length
                 ? tags.map((tag): React.ReactNode => (
-                  <Tag key={tag} label={tag} />
+                  <Tag
+                    key={tag}
+                    label={tag}
+                  />
                 ))
                 : <label>{t('no tags')}</label>
               }
@@ -368,9 +374,9 @@ function Account ({ address, className, filter, isFavorite, toggleFavorite }: Pr
           }
         >
           <Menu
-            vertical
-            text
             onClick={toggleSettings}
+            text
+            vertical
           >
             <Menu.Item
               disabled={!api.api.tx.identity?.setIdentity}

packages/page-accounts/src/Accounts/index.tsx

@@ -128,7 +128,12 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
             />
           </div>
         }>
-          <th className='start' colSpan={3}><h1>{t('accounts')}</h1></th>
+          <th
+            className='start'
+            colSpan={3}
+          >
+            <h1>{t('accounts')}</h1>
+          </th>
           <th>{t('type')}</th>
           <th className='start'>{t('tags')}</th>
           <th>{t('transactions')}</th>

packages/page-accounts/src/Accounts/modals/Backup.tsx

@@ -68,8 +68,8 @@ function Backup ({ address, onClose }: Props): React.ReactElement<Props> {
         doBackup={_doBackup}
         isPassTouched={isPassTouched}
         isPassValid={isPassValid}
-        password={password}
         onChangePass={_onChangePass}
+        password={password}
       />
       <Modal.Actions onCancel={onClose}>
         <Button

packages/page-accounts/src/Accounts/modals/Create.tsx

@@ -214,8 +214,8 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
         <CreateConfirmation
           address={address}
           name={name}
-          onCommit={_onCommit}
           onClose={_toggleConfirmation}
+          onCommit={_onCommit}
         />
       )}
       <Modal.Content>
@@ -253,8 +253,8 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
             value={seed}
           >
             <Dropdown
-              isButton
               defaultValue={seedType}
+              isButton
               onChange={_selectSeedType}
               options={seedOpt}
             />

packages/page-accounts/src/Accounts/modals/Derive.tsx

@@ -148,8 +148,8 @@ function Derive ({ className, from, onClose }: Props): React.ReactElement {
         <CreateConfirmation
           address={address}
           name={name}
-          onCommit={_onCommit}
           onClose={_toggleConfirmation}
+          onCommit={_onCommit}
         />
       )}
       <Modal.Content>

packages/page-accounts/src/Accounts/modals/Identity.tsx

@@ -111,8 +111,8 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
           autoFocus
           help={t('The name that will be displayed in your accounts list.')}
           label={t('display name')}
-          onChange={setValDisplay}
           maxLength={32}
+          onChange={setValDisplay}
           value={valDisplay}
         />
         <WrapToggle
@@ -123,8 +123,8 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
             help={t('The legal name for this identity.')}
             isDisabled={!hasLegal}
             label={t('legal name')}
-            onChange={setValLegal}
             maxLength={32}
+            onChange={setValLegal}
             value={hasLegal ? valLegal : '<none>'}
           />
         </WrapToggle>
@@ -136,8 +136,8 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
             help={t('The email address associated with this identity.')}
             isDisabled={!hasEmail}
             label={t('email')}
-            onChange={setValEmail}
             maxLength={32}
+            onChange={setValEmail}
             value={hasEmail ? valEmail : '<none>'}
           />
         </WrapToggle>
@@ -149,8 +149,8 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
             help={t('An URL that is linked to this identity.')}
             isDisabled={!hasWeb}
             label={t('web')}
-            onChange={setValWeb}
             maxLength={32}
+            onChange={setValWeb}
             value={hasWeb ? valWeb : '<none>'}
           />
         </WrapToggle>
@@ -174,8 +174,8 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
             help={t('a riot name linked to this identity')}
             isDisabled={!hasRiot}
             label={t('riot name')}
-            onChange={setValRiot}
             maxLength={32}
+            onChange={setValRiot}
             value={hasRiot ? valRiot : '<none>'}
           />
         </WrapToggle>

packages/page-accounts/src/Accounts/modals/Import.tsx

@@ -45,8 +45,8 @@ class Import extends TxComponent<Props, State> {
             icon='sync'
             isDisabled={!isFileValid || !isPassValid}
             isPrimary
-            onClick={this.onSave}
             label={t('Restore')}
+            onClick={this.onSave}
           />
         </Modal.Actions>
       </Modal>

packages/page-accounts/src/Accounts/modals/Qr.tsx

@@ -93,8 +93,8 @@ function QrModal ({ className, onClose, onStatusChange }: Props): React.ReactEle
           icon='sign-in'
           isDisabled={!scanned || !isNameValid}
           isPrimary
-          onClick={_onSave}
           label={t('Create')}
+          onClick={_onSave}
         />
       </Modal.Actions>
     </Modal>

packages/page-accounts/src/Accounts/modals/RecoverSetup.tsx

@@ -51,8 +51,8 @@ function RecoverSetup ({ address, className, onClose }: Props): React.ReactEleme
           available={availableHelpers}
           availableLabel={t('available social recovery helpers')}
           help={t('The addresses that are able to help in recovery. You can select up to {{maxHelpers}} trusted helpers.', { replace: { maxHelpers: MAX_HELPERS } })}
-          onChange={setHelpers}
           maxCount={MAX_HELPERS}
+          onChange={setHelpers}
           value={helpers}
           valueLabel={t('trusted social recovery helpers')}
         />

packages/page-accounts/src/Accounts/modals/Transfer.tsx

@@ -52,7 +52,12 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
             help={t('The account you will send funds from.')}
             isDisabled={!!propSenderId}
             label={t('send from account')}
-            labelExtra={<Available label={transferrable} params={senderId} />}
+            labelExtra={
+              <Available
+                label={transferrable}
+                params={senderId}
+              />
+            }
             onChange={setSenderId}
             type='account'
           />
@@ -61,7 +66,12 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
             help={t('Select a contact or paste the address you want to send funds to.')}
             isDisabled={!!propRecipientId}
             label={t('send to address')}
-            labelExtra={<Available label={transferrable} params={recipientId} />}
+            labelExtra={
+              <Available
+                label={transferrable}
+                params={recipientId}
+              />
+            }
             onChange={setRecipientId}
             type='allPlus'
           />

packages/page-accounts/src/Contacts/Address.tsx

@@ -165,12 +165,13 @@ function Address ({ address, className, filter, isFavorite, toggleFavorite }: Pr
       </td>
       <td className='address'>
         <AddressSmall
+          onClickName={_toggleEditName}
           overrideName={
             isEditingName
               ? (
                 <Input
-                  className='name--input'
                   autoFocus
+                  className='name--input'
                   defaultValue={accName}
                   onBlur={_saveName}
                   onChange={setAccName}
@@ -180,7 +181,6 @@ function Address ({ address, className, filter, isFavorite, toggleFavorite }: Pr
               )
               : undefined
           }
-          onClickName={_toggleEditName}
           toggle={isEditingName}
           value={address}
         />
@@ -189,10 +189,10 @@ function Address ({ address, className, filter, isFavorite, toggleFavorite }: Pr
             {isForgetOpen && (
               <Forget
                 address={current.address}
-                onForget={_onForget}
                 key='modal-forget-account'
                 mode='address'
                 onClose={_toggleForget}
+                onForget={_onForget}
               />
             )}
             {isTransferOpen && (
@@ -209,21 +209,27 @@ function Address ({ address, className, filter, isFavorite, toggleFavorite }: Pr
         {isEditingTags
           ? (
             <InputTags
+              defaultValue={tags}
               onBlur={_saveTags}
               onChange={_setTags}
               onClose={_saveTags}
               openOnFocus
-              defaultValue={tags}
               searchInput={{ autoFocus: true }}
               value={tags}
               withLabel={false}
             />
           )
           : (
-            <div className='tags--toggle' onClick={_toggleEditTags}>
+            <div
+              className='tags--toggle'
+              onClick={_toggleEditTags}
+            >
               {tags.length
                 ? tags.map((tag): React.ReactNode => (
-                  <Tag key={tag} label={tag} />
+                  <Tag
+                    key={tag}
+                    label={tag}
+                  />
                 ))
                 : <label>{t('no tags')}</label>
               }
@@ -265,9 +271,9 @@ function Address ({ address, className, filter, isFavorite, toggleFavorite }: Pr
           }
         >
           <Menu
-            vertical
-            text
             onClick={_toggleSettingPopup}
+            text
+            vertical
           >
             <Menu.Item
               disabled={!isEditable}

packages/page-accounts/src/Contacts/index.tsx

@@ -66,7 +66,12 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
             />
           </div>
         }>
-          <th className='start' colSpan={2}><h1>{t('contacts')}</h1></th>
+          <th
+            className='start'
+            colSpan={2}
+          >
+            <h1>{t('contacts')}</h1>
+          </th>
           <th className='start'>{t('tags')}</th>
           <th>{t('transactions')}</th>
           <th>{t('balances')}</th>

packages/page-accounts/src/Contacts/modals/Create.tsx

@@ -109,8 +109,8 @@ function Create ({ onClose, onStatusChange }: Props): React.ReactElement<Props>
           icon='save'
           isDisabled={!isValid}
           isPrimary
-          onClick={_onCommit}
           label={t('Save')}
+          onClick={_onCommit}
         />
       </Modal.Actions>
     </Modal>

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

@@ -101,12 +101,12 @@ class VanityApp extends TxComponent<Props, State> {
               : 'sign-in'
           }
           isDisabled={!isMatchValid}
-          onClick={this.toggleStart}
           label={
             isRunning
               ? t('Stop generation')
               : t('Start generation')
           }
+          onClick={this.toggleStart}
         />
       </Button.Group>
     );
@@ -152,8 +152,8 @@ class VanityApp extends TxComponent<Props, State> {
             help={t('Should the search be case sensitive, e.g if you select "no" your search for "Some" may return addresses containing "somE" or "sOme"...')}
             isDisabled={isRunning}
             label={t('case sensitive')}
-            options={BOOL_OPTIONS}
             onChange={this.onChangeCase}
+            options={BOOL_OPTIONS}
             value={withCase}
           />
         </div>

packages/page-claims/src/index.tsx

@@ -133,8 +133,8 @@ class ClaimsApp extends TxModal<Props, State> {
                   <Button
                     icon='sign-in'
                     isPrimary
-                    onClick={this.setStep(Step.Sign)}
                     label={t('Continue')}
+                    onClick={this.setStep(Step.Sign)}
                   />
                 </Button.Group>
               )}
@@ -173,8 +173,8 @@ class ClaimsApp extends TxModal<Props, State> {
                       icon='sign-in'
                       isDisabled={!accountId || !signature}
                       isPrimary
-                      onClick={this.setStep(Step.Claim)}
                       label={t('Confirm claim')}
+                      onClick={this.setStep(Step.Claim)}
                     />
                   </Button.Group>
                 )}

packages/page-contracts/package.json

@@ -12,6 +12,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@polkadot/api-contract": "^1.9.0-beta.26"
+    "@polkadot/api-contract": "^1.9.1"
   }
 }

packages/page-contracts/src/ABI.tsx

@@ -130,15 +130,15 @@ class ABI extends React.PureComponent<Props, State> {
 
     return (
       <Labelled
-        label={label}
         help={help}
+        label={label}
         withLabel={!!label}
       >
         <Messages
           contractAbi={contractAbi}
-          onRemove={onRemove || this.onRemove}
           isLabelled={!!label}
           isRemovable={!isDisabled}
+          onRemove={onRemove || this.onRemove}
           onSelectConstructor={onSelectConstructor}
           withConstructors
         />

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

@@ -67,8 +67,8 @@ class Code extends React.PureComponent<Props, State> {
           {contractAbi
             ? (
               <Expander
-                onClick={this.toggleAbi}
                 isOpen={isAbiOpen}
+                onClick={this.toggleAbi}
                 summary={t('ABI')}
               >
                 {abi}
@@ -87,9 +87,9 @@ class Code extends React.PureComponent<Props, State> {
     return (
       <>
         <Button
+          icon='trash'
           isNegative
           onClick={this.toggleForget}
-          icon='trash'
           size='small'
           tooltip={t('Forget this code hash')}
         />
@@ -124,8 +124,8 @@ class Code extends React.PureComponent<Props, State> {
           onForget={this.onForget}
         >
           <CodeRow
-            isInline
             code={code || ''}
+            isInline
           >
             <p>{t('You are about to remove this code from your list of available code hashes. Once completed, should you need to access it again, you will have to manually add the code hash again.')}</p>
             <p>{t('This operation does not remove the uploaded code WASM and ABI from the chain, nor any deployed contracts. The forget operation only limits your access to the code on this browser.')}</p>

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

@@ -78,8 +78,8 @@ class Upload extends ContractModal<Props, State> {
         isPrimary
         label={t('Upload')}
         onClick={this.toggleBusy(true)}
-        onSuccess={this.onSuccess}
         onFailed={this.toggleBusy(false)}
+        onSuccess={this.onSuccess}
         params={[gasLimit, wasm]}
         tx={api.tx.contracts ? 'contracts.putCode' : 'contract.putCode'}
         withSpinner

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

@@ -35,7 +35,6 @@ class Codes extends React.PureComponent<Props, State> {
     return (
       <>
         <CardGrid
-          emptyText={t('No code hashes available')}
           buttons={
             <Button.Group>
               <Button
@@ -51,12 +50,13 @@ class Codes extends React.PureComponent<Props, State> {
               />
             </Button.Group>
           }
+          emptyText={t('No code hashes available')}
         >
           {contracts.getAllCode().map((code): React.ReactNode => {
             return (
               <Code
-                key={code.json.codeHash}
                 code={code}
+                key={code.json.codeHash}
                 showDeploy={showDeploy}
               />
             );
@@ -65,13 +65,13 @@ class Codes extends React.PureComponent<Props, State> {
         <Upload
           basePath={basePath}
           isNew
-          onClose={this.hideUpload}
           isOpen={isUploadOpen}
+          onClose={this.hideUpload}
         />
         <Add
           basePath={basePath}
-          onClose={this.hideAdd}
           isOpen={isAddOpen}
+          onClose={this.hideAdd}
         />
       </>
     );

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

@@ -64,10 +64,10 @@ function Contract (props: Props): React.ReactElement<Props> | null {
       {isForgetOpen && (
         <Forget
           address={address.toString()}
-          mode='contract'
-          onForget={_onForget}
           key='modal-forget-contract'
+          mode='contract'
           onClose={_toggleForget}
+          onForget={_onForget}
         />
       )}
       <AddressRow

packages/page-contracts/src/Contracts/Outcome.tsx

@@ -25,9 +25,9 @@ function Outcome (props: Props): React.ReactElement<Props> | null {
       <div className='info'>
         <AddressMini
           className='origin'
+          isPadded={false}
           value={origin}
           withAddress={false}
-          isPadded={false}
         />
         <MessageSignature
           message={message}
@@ -41,14 +41,14 @@ function Outcome (props: Props): React.ReactElement<Props> | null {
         <Button
           className='icon-button clear-btn'
           icon='close'
-          size='mini'
           isPrimary
           onClick={onClear}
+          size='mini'
         />
       </div>
       <Output
-        isError={!isSuccess}
         className='output'
+        isError={!isSuccess}
         value={(output || '()').toString()}
         withCopy
         withLabel={false}

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

@@ -68,7 +68,6 @@ function Contracts (props: Props): React.ReactElement<Props> {
   return (
     <>
       <CardGrid
-        emptyText={t('No contracts available')}
         buttons={
           <Button.Group>
             {hasCode && (
@@ -88,6 +87,7 @@ function Contracts (props: Props): React.ReactElement<Props> {
             />
           </Button.Group>
         }
+        emptyText={t('No contracts available')}
       >
         {contracts.map((contract: ApiContract, index): React.ReactNode => (
           <ContractCard

packages/page-contracts/src/MessageSignature.tsx

@@ -91,15 +91,15 @@ function MessageSignature ({ message: { args, mutates, name, returnType }, param
       {mutates && (
         <>
           <Icon
-            data-tip
+            className="mutates"
             data-for={`mutates-${name}`}
+            data-tip
             name="database"
-            className="mutates"
           />
           {withTooltip && (
             <Tooltip
-              trigger={`mutates-${name}`}
               text={t('Mutates contract state')}
+              trigger={`mutates-${name}`}
             />
           )}
         </>

packages/page-contracts/src/Messages.tsx

@@ -56,8 +56,8 @@ function renderItem (props: Props, message: ContractABIMessage, index: number, a
 
   return (
     <div
-      key={name}
       className={classes('message', !onSelect && 'exempt-hover', asConstructor && 'constructor')}
+      key={name}
     >
       <div className='info'>
         <MessageSignature
@@ -137,9 +137,9 @@ function Messages (props: Props): React.ReactElement<Props> {
       {messages.map((_, index): React.ReactNode => renderMessage(props, index, t))}
       {isRemovable && (
         <IconLink
-          label={t('Remove ABI')}
-          icon='remove'
           className='remove-abi'
+          icon='remove'
+          label={t('Remove ABI')}
           onClick={onRemove}
         />
       )}

packages/page-contracts/src/Modal.tsx

@@ -85,14 +85,14 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
             ? '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.'
         )}
+        isDisabled={isBusy}
+        isRequired={this.isContract}
         label={t(
           this.isContract
             ? 'contract ABI'
             : 'contract ABI (optional)'
         )}
         onChange={this.onAddAbi}
-        isDisabled={isBusy}
-        isRequired={this.isContract}
       />
     );
   }

packages/page-contracts/src/RemoveABI.tsx

@@ -41,10 +41,10 @@ function RemoveABI ({ code, onClose, onRemove }: Props): React.ReactElement<Prop
       </Modal.Content>
       <Modal.Actions onCancel={onClose}>
         <Button
+          icon='trash'
           isPrimary
-          onClick={_onRemove}
           label={t('Remove')}
-          icon='trash'
+          onClick={_onRemove}
         />
       </Modal.Actions>
     </Modal>

packages/page-contracts/src/index.tsx

@@ -89,8 +89,14 @@ class ContractsApp extends React.PureComponent<Props, State> {
           />
         </header>
         <Switch>
-          <Route path={`${basePath}/code`} render={this.renderComponent(Codes)} />
-          <Route render={this.renderComponent(Contracts)} exact />
+          <Route
+            path={`${basePath}/code`}
+            render={this.renderComponent(Codes)}
+          />
+          <Route
+            exact
+            render={this.renderComponent(Contracts)}
+          />
         </Switch>
         <Deploy
           basePath={basePath}

packages/page-council/src/Motions/ProposeMotion.tsx

@@ -73,9 +73,9 @@ class Propose extends TxModal<Props, State> {
 
     return (
       <Button
+        icon='add'
         isDisabled={!isMember}
         label={t('Propose motion')}
-        icon='add'
         onClick={this.showModal}
       />
     );
@@ -89,9 +89,9 @@ class Propose extends TxModal<Props, State> {
       <>
         <InputNumber
           className='medium'
-          label={t('threshold')}
           help={t('The minimum number of council votes required to approve this motion')}
           isError={!threshold || threshold.eqn(0) || threshold.gtn(members.length)}
+          label={t('threshold')}
           onChange={this.onChangeThreshold}
           onEnter={this.sendTx}
           placeholder={

packages/page-council/src/Overview/Candidates.tsx

@@ -23,7 +23,12 @@ function Candidates ({ allVotes = {}, electionsInfo }: Props): React.ReactElemen
     <>
       <Table>
         <Table.Head>
-          <th className='start' colSpan={2}><h1>{t('runners up')}</h1></th>
+          <th
+            className='start'
+            colSpan={2}
+          >
+            <h1>{t('runners up')}</h1>
+          </th>
           <th>{t('backing')}</th>
         </Table.Head>
         <Table.Body empty={electionsInfo && t('No runners up found')}>
@@ -39,7 +44,12 @@ function Candidates ({ allVotes = {}, electionsInfo }: Props): React.ReactElemen
       </Table>
       <Table>
         <Table.Head>
-          <th className='start' colSpan={2}><h1>{t('candidates')}</h1></th>
+          <th
+            className='start'
+            colSpan={2}
+          >
+            <h1>{t('candidates')}</h1>
+          </th>
           <th>{t('backing')}</th>
         </Table.Head>
         <Table.Body empty={electionsInfo && t('No candidates found')}>

packages/page-council/src/Overview/Members.tsx

@@ -23,7 +23,12 @@ function Members ({ allVotes = {}, className, electionsInfo, prime }: Props): Re
   return (
     <Table className={className}>
       <Table.Head>
-        <th className='start' colSpan={2}><h1>{t('members')}</h1></th>
+        <th
+          className='start'
+          colSpan={2}
+        >
+          <h1>{t('members')}</h1>
+        </th>
         <th>{t('backing')}</th>
       </Table.Head>
       <Table.Body empty={electionsInfo && t('No members found')}>

packages/page-council/src/Overview/SubmitCandidacy.tsx

@@ -43,8 +43,8 @@ function SubmitCandidacy (): React.ReactElement {
         </Modal>
       )}
       <Button
-        label={t('Submit candidacy')}
         icon='add'
+        label={t('Submit candidacy')}
         onClick={onOpen}
       />
     </>

packages/page-council/src/Overview/Vote.tsx

@@ -75,9 +75,9 @@ class Vote extends TxModal<Props, State> {
 
     return (
       <Button
+        icon='check'
         isDisabled={available.length === 0}
         label={this.props.t('Vote')}
-        icon='check'
         onClick={this.showModal}
       />
     );

packages/page-democracy/src/Overview/DispatchQueue.tsx

@@ -23,7 +23,12 @@ function DispatchQueue ({ className }: Props): React.ReactElement<Props> | null
   return (
     <Table className={className}>
       <Table.Head>
-        <th className='start' colSpan={2}><h1>{t('dispatch queue')}</h1></th>
+        <th
+          className='start'
+          colSpan={2}
+        >
+          <h1>{t('dispatch queue')}</h1>
+        </th>
         <th>{t('enact')}</th>
         <th colSpan={2}>&nbsp;</th>
       </Table.Head>

packages/page-democracy/src/Overview/Fasttrack.tsx

@@ -87,10 +87,10 @@ function Fasttrack ({ imageHash, threshold }: Props): React.ReactElement<Props>
           <Modal.Actions onCancel={toggleFasttrack}>
             <TxButton
               accountId={accountId}
+              icon='fast forward'
               isDisabled={!accountId || !proposal || !memberThreshold}
               isPrimary
               label={t('Fast track')}
-              icon='fast forward'
               onStart={toggleFasttrack}
               params={[memberThreshold, proposal]}
               tx='technicalCommittee.propose'

packages/page-democracy/src/Overview/PreImage.tsx

@@ -50,7 +50,12 @@ function PreImage ({ className, isImminent: propsIsImminent, imageHash, onClose
         <InputAddress
           help={t('The account you want to register the preimage from')}
           label={t('send from account')}
-          labelExtra={<Available label={<span className='label'>{t('transferrable')}</span>} params={accountId} />}
+          labelExtra={
+            <Available
+              label={<span className='label'>{t('transferrable')}</span>}
+              params={accountId}
+            />
+          }
           onChange={setAccountId}
           type='account'
         />
@@ -76,10 +81,10 @@ function PreImage ({ className, isImminent: propsIsImminent, imageHash, onClose
       <Modal.Actions onCancel={onClose}>
         <TxButton
           accountId={accountId}
+          icon='add'
           isDisabled={!proposal || !accountId || !isMatched || !encodedProposal}
           isPrimary
           label={t('Submit preimage')}
-          icon='add'
           onStart={onClose}
           params={[encodedProposal]}
           tx={isImminent ? 'democracy.noteImminentPreimage' : 'democracy.notePreimage'}

packages/page-democracy/src/Overview/PreImageButton.tsx

@@ -31,8 +31,8 @@ function PreImageButton ({ imageHash, isImminent, withoutOr }: Props): React.Rea
       />
       {isPreimageOpen && (
         <PreImage
-          isImminent={isImminent}
           imageHash={imageHash}
+          isImminent={isImminent}
           onClose={togglePreimage}
         />
       )}

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

@@ -23,7 +23,12 @@ function Proposals ({ className }: Props): React.ReactElement<Props> {
   return (
     <Table className={className}>
       <Table.Head>
-        <th className='start' colSpan={2}><h1>{t('proposals')}</h1></th>
+        <th
+          className='start'
+          colSpan={2}
+        >
+          <h1>{t('proposals')}</h1>
+        </th>
         <th className='address'>{t('proposer')}</th>
         <th>{t('locked')}</th>
         <th colSpan={3}>&nbsp;</th>

packages/page-democracy/src/Overview/Propose.tsx

@@ -35,7 +35,12 @@ function Propose ({ className, onClose }: Props): React.ReactElement<Props> {
         <InputAddress
           help={t('The account you want to register the proposal from')}
           label={t('send from account')}
-          labelExtra={<Available label={<span className='label'>{t('transferrable')}</span>} params={accountId} />}
+          labelExtra={
+            <Available
+              label={<span className='label'>{t('transferrable')}</span>}
+              params={accountId}
+            />
+          }
           onChange={setAccountId}
           type='account'
         />
@@ -55,10 +60,10 @@ function Propose ({ className, onClose }: Props): React.ReactElement<Props> {
       <Modal.Actions onCancel={onClose}>
         <TxButton
           accountId={accountId}
+          icon='add'
           isDisabled={!balance || balance.lten(0) || !isHashValid || !accountId}
           isPrimary
           label={t('Submit proposal')}
-          icon='add'
           onStart={onClose}
           params={[hash, balance]}
           tx='democracy.propose'

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

@@ -23,7 +23,12 @@ function Referendums ({ className }: Props): React.ReactElement<Props> {
   return (
     <Table className={className}>
       <Table.Head>
-        <th className='start' colSpan={2}><h1>{t('referenda')}</h1></th>
+        <th
+          className='start'
+          colSpan={2}
+        >
+          <h1>{t('referenda')}</h1>
+        </th>
         <th>{t('remaining')}</th>
         <th>{t('activate')}</th>
         <th>{t('aye')}</th>

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

@@ -54,10 +54,10 @@ function Seconding ({ depositors, image, proposalId }: Props): React.ReactElemen
           <Modal.Actions onCancel={toggleSeconding}>
             <TxButton
               accountId={accountId}
+              icon='sign-in'
               isDisabled={!accountId || isDepositor}
               isPrimary
               label={t('Second')}
-              icon='sign-in'
               onStart={toggleSeconding}
               params={[proposalId]}
               tx='democracy.second'
@@ -66,8 +66,8 @@ function Seconding ({ depositors, image, proposalId }: Props): React.ReactElemen
         </Modal>
       )}
       <Button
-        label={t('Second')}
         icon='toggle off'
+        label={t('Second')}
         onClick={toggleSeconding}
       />
     </>

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

@@ -92,8 +92,8 @@ function Voting ({ proposal, referendumId }: Props): React.ReactElement<Props> |
           </Modal.Content>
           <VoteActions
             accountId={accountId}
-            onClick={toggleVoting}
             isDisabled={isCurrentVote ? !balance : false}
+            onClick={toggleVoting}
             params={
               isCurrentVote
                 ? [referendumId, { Standard: { balance, vote: { aye, conviction } } }]

packages/page-explorer/src/BlockHeaders.tsx

@@ -19,7 +19,12 @@ function BlockHeaders ({ headers }: Props): React.ReactElement<Props> {
   return (
     <Table>
       <Table.Head>
-        <th className='start' colSpan={3}><h1>{t('recent blocks')}</h1></th>
+        <th
+          className='start'
+          colSpan={3}
+        >
+          <h1>{t('recent blocks')}</h1>
+        </th>
       </Table.Head>
       <Table.Body empty={t('No blocks available')}>
         {headers

packages/page-explorer/src/BlockInfo/ByHash.tsx

@@ -35,7 +35,12 @@ function BlockByHash ({ className, value }: Props): React.ReactElement<Props> {
     <div className={className}>
       <Table isFixed>
         <Table.Head>
-          <th className='start' colSpan={getHeader ? 1 : 6}><h1>{blockNumber ? formatNumber(blockNumber) : '...'}</h1></th>
+          <th
+            className='start'
+            colSpan={getHeader ? 1 : 6}
+          >
+            <h1>{blockNumber ? formatNumber(blockNumber) : '...'}</h1>
+          </th>
           {getHeader && (
             <>
               <th className='start'>{t('hash')}</th>
@@ -54,7 +59,12 @@ function BlockByHash ({ className, value }: Props): React.ReactElement<Props> {
               <td className='hash overflow'><Link to={`/explorer/query/${parentHash}`}>{parentHash}</Link></td>
               <td className='hash overflow'>{getHeader.extrinsicsRoot.toHex()}</td>
               <td className='hash overflow'>{getHeader.stateRoot.toHex()}</td>
-              <td><LinkExternal data={value} type='block' /></td>
+              <td>
+                <LinkExternal
+                  data={value}
+                  type='block'
+                />
+              </td>
             </tr>
           )}
         </Table.Body>

packages/page-explorer/src/BlockInfo/Extrinsic.tsx

@@ -46,7 +46,10 @@ function ExtrinsicDisplay ({ blockNumber, className, events, index, value }: Pro
       className={className}
       key={`extrinsic:${index}`}
     >
-      <td colSpan={2} className='top'>
+      <td
+        className='top'
+        colSpan={2}
+      >
         <Expander
           summary={`${section}.${method}`}
           summaryMeta={meta}
@@ -69,7 +72,10 @@ function ExtrinsicDisplay ({ blockNumber, className, events, index, value }: Pro
           />
         </Expander>
       </td>
-      <td colSpan={2} className='top'>
+      <td
+        className='top'
+        colSpan={2}
+      >
         {thisEvents.map((event, index) =>
           <Event
             className='explorer--BlockByHash-event'
@@ -86,7 +92,10 @@ function ExtrinsicDisplay ({ blockNumber, className, events, index, value }: Pro
               <div className='explorer--BlockByHash-nonce'>
                 {t('index')} {formatNumber(value.nonce)}
               </div>
-              <LinkExternal data={value.hash.toHex()} type='extrinsic' />
+              <LinkExternal
+                data={value.hash.toHex()}
+                type='extrinsic'
+              />
             </>
           )
           : <div className='explorer--BlockByHash-unsigned'>{t('not signed')}</div>

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

@@ -22,10 +22,23 @@ function Extrinsics ({ className, blockNumber, events, label, value }: Props): R
   const { t } = useTranslation();
 
   return (
-    <Table className={className} isFixed>
+    <Table
+      className={className}
+      isFixed
+    >
       <Table.Head>
-        <th colSpan={2} className='start'><h1>{label || t('extrinsics')}</h1></th>
-        <th colSpan={2} className='start'>{t('events')}</th>
+        <th
+          className='start'
+          colSpan={2}
+        >
+          <h1>{label || t('extrinsics')}</h1>
+        </th>
+        <th
+          className='start'
+          colSpan={2}
+        >
+          {t('events')}
+        </th>
         <th className='address'>{t('signer')}</th>
       </Table.Head>
       <Table.Body empty={t('No pending extrinsics are in the queue')}>

packages/page-explorer/src/Forks.tsx

@@ -183,7 +183,10 @@ function renderRows (rows: Row[]): React.ReactNode[] {
         return (
           <tr key={bn}>
             <td key='blockNumber' />
-            <td className='header isLink' colSpan={cols[0].width}>
+            <td
+              className='header isLink'
+              colSpan={cols[0].width}
+            >
               <div className='link'>&#8942;</div>
             </td>
           </tr>

packages/page-explorer/src/Query.tsx

@@ -46,9 +46,9 @@ function Query ({ className, value: propsValue }: Props): React.ReactElement<Pro
         className='explorer--query'
         defaultValue={propsValue}
         isError={!isValid && value.length !== 0}
-        placeholder={t('block hash or number to query')}
         onChange={_setHash}
         onEnter={_onQuery}
+        placeholder={t('block hash or number to query')}
         withLabel={false}
       >
         <Button

packages/page-explorer/src/index.tsx

@@ -63,10 +63,10 @@ function ExplorerApp ({ basePath, className }: Props): React.ReactElement<Props>
         />
       </header>
       <Switch>
-        <Route path={`${basePath}/forks`} component={Forks} />
-        <Route path={`${basePath}/query/:value`} component={BlockInfo} />
-        <Route path={`${basePath}/query`} component={BlockInfo} />
-        <Route path={`${basePath}/node`} component={NodeInfo} />
+        <Route path={`${basePath}/forks`}><Forks /></Route>
+        <Route path={`${basePath}/query/:value`}><BlockInfo /></Route>
+        <Route path={`${basePath}/query`}><BlockInfo /></Route>
+        <Route path={`${basePath}/node`}><NodeInfo /></Route>
         <Route>
           <Main
             events={events}

packages/page-extrinsics/src/Balance.tsx

@@ -21,10 +21,10 @@ function BalanceDisplay ({ className, label, params, style }: Props): React.Reac
   return (
     <InputBalance
       className={className}
+      defaultValue={allBalances?.freeBalance}
       isDisabled
       label={label}
       style={style}
-      defaultValue={allBalances?.freeBalance}
     />
   );
 }

packages/page-extrinsics/src/Selection.tsx

@@ -41,7 +41,12 @@ class Selection extends TxComponent<Props, State> {
       <div className='extrinsics--Selection'>
         <InputAddress
           label={t('using the selected account')}
-          labelExtra={<BalanceFree label={<label>{t('free balance')}</label>} params={accountId} />}
+          labelExtra={
+            <BalanceFree
+              label={<label>{t('free balance')}</label>}
+              params={accountId}
+            />
+          }
           onChange={this.onChangeSender}
           type='account'
         />
@@ -53,21 +58,21 @@ class Selection extends TxComponent<Props, State> {
         />
         <Button.Group>
           <TxButton
+            extrinsic={extrinsic}
+            icon='sign-in'
             isBasic
             isDisabled={!isValidUnsigned}
             isUnsigned
             label={t('Submit Unsigned')}
-            icon='sign-in'
-            extrinsic={extrinsic}
             withSpinner
           />
           <Button.Or />
           <TxButton
             accountId={accountId}
+            extrinsic={extrinsic}
             icon='sign-in'
             isDisabled={!isValid}
             isPrimary={false}
-            extrinsic={extrinsic}
             label={t('Submit Transaction')}
           />
         </Button.Group>

packages/page-generic-asset/src/AssetCard.tsx

@@ -24,19 +24,19 @@ function AssetCard ({ className, assetId, name, onForget, onSaveName, t }: Props
     <Card className={className}>
       <div>
         <AssetRow
-          isEditable
           assetId={assetId}
-          defaultName={name}
           buttons={(
             <Button
-              isNegative
-              onClick={_onForget}
               icon='trash'
+              isNegative
               key='forget'
+              onClick={_onForget}
               size='small'
               tooltip={t('Forget this asset')}
             />
           )}
+          defaultName={name}
+          isEditable
           onSaveName={_onSaveName}
         />
       </div>

packages/page-generic-asset/src/Assets.tsx

@@ -32,14 +32,14 @@ function Assets ({ assets, t }: Props): React.ReactElement<Props> {
       buttons={
         <Button.Group>
           <Button
-            label={t('Register Asset')}
             icon='registered'
+            label={t('Register Asset')}
             onClick={_toggleCreate}
           />
         </Button.Group>
       }
-      isEmpty={emptyScreen}
       emptyText={t('No assets found.')}
+      isEmpty={emptyScreen}
     >
       {isCreateOpen && (
         <CreateModal
@@ -49,11 +49,11 @@ function Assets ({ assets, t }: Props): React.ReactElement<Props> {
       )}
       {assets && Object.entries(assets).map(([id, name]): React.ReactNode => (
         <AssetCard
-          key={id}
           assetId={id}
+          key={id}
           name={name}
-          onSaveName={_onSaveName}
           onForget={_onForget}
+          onSaveName={_onSaveName}
         />
       ))}
     </CardGrid>

packages/page-generic-asset/src/Transfer.tsx

@@ -74,7 +74,12 @@ function Transfer ({ assets, className, onClose, recipientId: propRecipientId, s
           help={t('The account you will send funds from.')}
           isDisabled={!!propSenderId}
           label={t('send from account')}
-          labelExtra={<Available label={transferrable} params={senderId} />}
+          labelExtra={
+            <Available
+              label={transferrable}
+              params={senderId}
+            />
+          }
           onChange={setSenderId}
           type='account'
         />
@@ -83,7 +88,12 @@ function Transfer ({ assets, className, onClose, recipientId: propRecipientId, s
           help={t('Select a contact or paste the address you want to send funds to.')}
           isDisabled={!!propRecipientId}
           label={t('send to address')}
-          labelExtra={<Available label={transferrable} params={recipientId} />}
+          labelExtra={
+            <Available
+              label={transferrable}
+              params={recipientId}
+            />
+          }
           onChange={setRecipientId}
           type='allPlus'
         />
@@ -91,9 +101,9 @@ function Transfer ({ assets, className, onClose, recipientId: propRecipientId, s
           allowAdd
           help={t('Enter the Asset ID of the token you want to transfer.')}
           label={t('asset id')}
+          onAdd={_onAddAssetId}
           onChange={setAssetId}
           options={options}
-          onAdd={_onAddAssetId}
           value={assetId}
         />
         <InputBalance
@@ -113,10 +123,10 @@ function Transfer ({ assets, className, onClose, recipientId: propRecipientId, s
         <TxButton
           accountId={senderId}
           extrinsic={extrinsic}
+          icon='send'
           isDisabled={!hasAvailable}
           isPrimary
           label={t('Make Transfer')}
-          icon='send'
           onStart={onClose}
         />
       </Button.Group>

packages/page-generic-asset/src/index.tsx

@@ -38,8 +38,8 @@ function AssetApp ({ basePath }: Props): React.ReactElement<Props> {
         />
       </header>
       <Switch>
-        <Route path={`${basePath}/transfer`} component={Transfer} />
-        <Route component={Assets} />
+        <Route path={`${basePath}/transfer`}><Transfer /></Route>
+        <Route><Assets /></Route>
       </Switch>
     </main>
   );

packages/page-generic-asset/src/modals/Create.tsx

@@ -50,11 +50,11 @@ function Create ({ onClose, onRegister }: Props): React.ReactElement<Props> {
       </Modal.Content>
       <Modal.Actions onCancel={onClose}>
         <Button
+          icon='registered'
           isDisabled={!name}
           isPrimary
-          onClick={onClose}
           label={t('Register')}
-          icon='registered'
+          onClick={onClose}
         />
       </Modal.Actions>
     </Modal>

packages/page-js/src/ActionButtons.tsx

@@ -76,10 +76,10 @@ function ActionButtons ({ className, isCustomExample, isRunning, removeSnippet,
         >
           <Input
             autoFocus
-            onChange={_onChangeName}
-            onEnter={_saveSnippet}
             maxLength={50}
             min={1}
+            onChange={_onChangeName}
+            onEnter={_saveSnippet}
             placeholder={t('Name your example')}
             value={snippetName}
             withLabel={false}

packages/page-js/src/Output.tsx

@@ -31,7 +31,10 @@ const format = (value: any): string => {
 };
 
 const renderEntry = ({ args, type }: Log, index: number): React.ReactNode => (
-  <div className={`js--Log ${type}`} key={index}>
+  <div
+    className={`js--Log ${type}`}
+    key={index}
+  >
     {args.map((arg): string => format(arg)).join(' ')}
   </div>
 );

packages/page-js/src/Playground.tsx

@@ -200,8 +200,8 @@ function Playground ({ className }: Props): React.ReactElement<Props> {
         <Dropdown
           className='js--Dropdown'
           isFull
-          onChange={_selectExample}
           label={t('Select example')}
+          onChange={_selectExample}
           options={options}
           value={selected.value}
         />

packages/page-parachains/src/Overview/Register.tsx

@@ -79,8 +79,8 @@ function Register ({ nextFreeId = ONE_THOUSAND, sudoKey }: Props): React.ReactEl
     <>
       <div className='ui--Row-buttons'>
         <Button
-          label={t('Register a parachain')}
           icon='add'
+          label={t('Register a parachain')}
           onClick={onOpen}
         />
       </div>
@@ -93,9 +93,9 @@ function Register ({ nextFreeId = ONE_THOUSAND, sudoKey }: Props): React.ReactEl
           <Modal.Content>
             <InputNumber
               defaultValue={nextFreeId}
-              label={t('parachain id')}
               help={t('The id number to assign to this parachain.')}
               isError={!isIdValid}
+              label={t('parachain id')}
               onChange={setId}
               onEnter={onSendRef.current}
               onEscape={onClose}

packages/page-parachains/src/Parachain/Deregister.tsx

@@ -48,8 +48,8 @@ function Deregister ({ id, info, isOpen, onClose, onSubmit, sudoKey }: Props): R
   return (
     <Modal
       header={t('Deregister this parachain')}
-      open={isOpen}
       onClose={onClose}
+      open={isOpen}
       small
     >
       <Modal.Content>

packages/page-parachains/src/Parachain/index.tsx

@@ -65,8 +65,8 @@ function Parachain ({ className, basePath, isMine, paraInfoRef, sudoKey }: Props
       <SummaryBox>
         <section>
           <ParachainInfo
-            isBig
             info={parachain.info}
+            isBig
           >
             {(sudoKey && isMine) && (
               <Popup

packages/page-settings/src/Developer.tsx

@@ -115,6 +115,9 @@ function Developer ({ className, onStatusChange }: Props): React.ReactElement<Pr
 
   const typesHasNoEntries = Object.keys(types).length === 0;
 
+  // Trans component
+  /* eslint-disable react/jsx-max-props-per-line */
+
   return (
     <div className={className}>
       <div className='ui--row'>
@@ -146,16 +149,16 @@ function Developer ({ className, onStatusChange }: Props): React.ReactElement<Pr
       </div>
       <Button.Group>
         <Button
-          onClick={_clearTypes}
-          label={t('Reset')}
           icon='sync'
+          label={t('Reset')}
+          onClick={_clearTypes}
         />
         <Button.Or />
         <Button
+          icon='save'
           isDisabled={!isTypesValid || !isJsonValid}
-          onClick={_saveDeveloper}
           label={t('Save')}
-          icon='save'
+          onClick={_saveDeveloper}
         />
       </Button.Group>
     </div>

packages/page-settings/src/General.tsx

@@ -132,19 +132,19 @@ function General ({ className, isModalContent, onClose }: Props): React.ReactEle
           </>
         )}
         <Button
+          icon='save'
           isDisabled={changed === null}
           isPrimary={isModalContent}
-          onClick={
-            changed
-              ? _saveAndReload
-              : _save
-          }
           label={
             changed
               ? t('Save & Reload')
               : t('Save')
           }
-          icon='save'
+          onClick={
+            changed
+              ? _saveAndReload
+              : _save
+          }
         />
       </Button.Group>
     </div>

packages/page-settings/src/Metadata/ChainColorIndicator.tsx

@@ -12,7 +12,12 @@ interface Props extends BareProps {
 }
 
 function ChainColorIndicator ({ color, className }: Props): React.ReactElement<Props> {
-  return <div color={color} className={className}/>;
+  return (
+    <div
+      className={className}
+      color={color}
+    />
+  );
 }
 
 export default React.memo(styled(ChainColorIndicator)`

packages/page-settings/src/Metadata/NetworkSpecs.tsx

@@ -102,9 +102,9 @@ function NetworkSpecs ({ chainInfo, className }: Props): React.ReactElement<Prop
         >
           <div className='settings--networkSpecs-colorButton'>
             <Button
-              label={t('Random')}
               icon='sync'
               key='spread'
+              label={t('Random')}
               onClick={_onSetRandomColor}
             />
             <ChainColorIndicator color={networkSpecs.color}/>

packages/page-settings/src/util.tsx

@@ -13,8 +13,8 @@ export function createOption (t: (input: any) => string, { info, isHeader, text,
   if (isHeader) {
     return (
       <Dropdown.Header
-        key={text as string}
         content={withI18n ? t(text) : text}
+        key={text as string}
       />
     );
   }

packages/page-society/src/Overview/Members.tsx

@@ -31,7 +31,12 @@ function Members ({ className, info }: Props): React.ReactElement<Props> {
   return (
     <Table className={className}>
       <Table.Head>
-        <th colSpan={3} className='start'><h1>{t('members')}</h1></th>
+        <th
+          className='start'
+          colSpan={3}
+        >
+          <h1>{t('members')}</h1>
+        </th>
         <th>{t('strikes')}</th>
       </Table.Head>
       <Table.Body empty={info && t('No active members')}>

packages/page-staking/src/Actions/Account/BondExtra.tsx

@@ -57,12 +57,12 @@ class BondExtra extends TxComponent<Props, State> {
         <Modal.Actions onCancel={onClose}>
           <TxButton
             accountId={stashId}
+            extrinsic={extrinsic}
+            icon='sign-in'
             isDisabled={!canSubmit}
             isPrimary
             label={t('Bond more')}
-            icon='sign-in'
             onStart={onClose}
-            extrinsic={extrinsic}
             withSpinner
           />
         </Modal.Actions>
@@ -81,7 +81,12 @@ class BondExtra extends TxComponent<Props, State> {
           defaultValue={stashId}
           isDisabled
           label={t('stash account')}
-          labelExtra={<Available label={<span className='label'>{t('transferrable')}</span>} params={stashId} />}
+          labelExtra={
+            <Available
+              label={<span className='label'>{t('transferrable')}</span>}
+              params={stashId}
+            />
+          }
         />
         <InputBalance
           autoFocus

packages/page-staking/src/Actions/Account/Nominate.tsx

@@ -88,12 +88,12 @@ function Nominate ({ className, controllerId, nominees, onClose, next, stakingOv
       <Modal.Actions onCancel={onClose}>
         <TxButton
           accountId={controllerId}
+          icon='hand paper outline'
           isDisabled={!selection?.length}
           isPrimary
+          label={t('Nominate')}
           onStart={onClose}
           params={[selection]}
-          label={t('Nominate')}
-          icon='hand paper outline'
           tx='staking.nominate'
         />
       </Modal.Actions>

packages/page-staking/src/Actions/Account/SetControllerAccount.tsx

@@ -71,18 +71,18 @@ class SetControllerAccount extends TxComponent<Props, State> {
           />
           <InputValidationController
             accountId={stashId}
-            defaultController={defaultControllerId}
             controllerId={controllerId}
+            defaultController={defaultControllerId}
             onError={this.onControllerError}
           />
         </Modal.Content>
         <Modal.Actions onCancel={onClose}>
           <TxButton
             accountId={stashId}
+            icon='sign-in'
             isDisabled={!canSubmit}
             isPrimary
             label={t('Set controller')}
-            icon='sign-in'
             onStart={onClose}
             params={[controllerId]}
             tx='staking.setController'

packages/page-staking/src/Actions/Account/SetRewardDestination.tsx

@@ -45,10 +45,10 @@ class SetRewardDestination extends TxComponent<Props, State> {
         <Modal.Actions onCancel={onClose}>
           <TxButton
             accountId={controllerId}
+            icon='sign-in'
             isDisabled={!canSubmit}
             isPrimary
             label={t('Set reward destination')}
-            icon='sign-in'
             onStart={onClose}
             params={[destination]}
             tx={'staking.setPayee'}
@@ -67,9 +67,9 @@ class SetRewardDestination extends TxComponent<Props, State> {
       <Modal.Content className='ui--signer-Signer-Content'>
         <InputAddress
           className='medium'
-          isDisabled
           defaultValue={controllerId}
           help={t('The controller is the account that is be used to control any nominating or validating actions. I will sign this transaction.')}
+          isDisabled
           label={t('controller account')}
         />
         <Dropdown

packages/page-staking/src/Actions/Account/SetSessionKey.tsx

@@ -43,10 +43,10 @@ function SetSessionKey ({ controllerId, onClose }: Props): React.ReactElement<Pr
       <Modal.Actions onCancel={onClose}>
         <TxButton
           accountId={controllerId}
+          icon='sign-in'
           isDisabled={!keys}
           isPrimary
           label={t('Set Session Key')}
-          icon='sign-in'
           onStart={onClose}
           params={[keys, EMPTY_PROOF]}
           tx='session.setKeys'

packages/page-staking/src/Actions/Account/Unbond.tsx

@@ -69,10 +69,10 @@ class Unbond extends TxComponent<Props, State> {
         <Modal.Actions onCancel={onClose}>
           <TxButton
             accountId={controllerId}
+            icon='sign-out'
             isDisabled={!canSubmit}
             isPrimary
             label={t('Unbond')}
-            icon='sign-out'
             onStart={onClose}
             params={[maxUnbond]}
             tx='staking.unbond'

packages/page-staking/src/Actions/Account/Validate.tsx

@@ -58,9 +58,9 @@ class Validate extends TxComponent<Props, State> {
       <Modal.Actions onCancel={onClose}>
         <TxButton
           accountId={controllerId}
+          icon='check circle outline'
           isPrimary
           label={t('Validate')}
-          icon='check circle outline'
           onStart={onClose}
           params={[{ commission }]}
           tx='staking.validate'

packages/page-staking/src/Actions/Account/index.tsx

@@ -320,11 +320,11 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar
                 ? (
                   <TxButton
                     accountId={controllerId}
+                    icon='stop'
                     isDisabled={!isOwnController}
                     isPrimary={false}
-                    label={t('Stop')}
-                    icon='stop'
                     key='stop'
+                    label={t('Stop')}
                     tx='staking.chill'
                   />
                 )
@@ -333,30 +333,30 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar
                     {(!sessionIds.length || hexSessionIdNext === '0x')
                       ? (
                         <Button
+                          icon='sign-in'
                           isDisabled={!isOwnController}
                           key='set'
-                          onClick={toggleSetSession}
                           label={t('Session Key')}
-                          icon='sign-in'
+                          onClick={toggleSetSession}
                         />
                       )
                       : (
                         <Button
+                          icon='check circle outline'
                           isDisabled={!isOwnController}
                           key='validate'
-                          onClick={toggleValidate}
                           label={t('Validate')}
-                          icon='check circle outline'
+                          onClick={toggleValidate}
                         />
                       )
                     }
                     <Button.Or key='nominate.or' />
                     <Button
+                      icon='hand paper outline'
                       isDisabled={!isOwnController}
                       key='nominate'
-                      onClick={toggleNominate}
                       label={t('Nominate')}
-                      icon='hand paper outline'
+                      onClick={toggleNominate}
                     />
                   </Button.Group>
                 )
@@ -374,9 +374,9 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar
                 }
               >
                 <Menu
-                  vertical
-                  text
                   onClick={toggleSettings}
+                  text
+                  vertical
                 >
                   {api.query.staking.activeEra && (
                     <Menu.Item

packages/page-staking/src/Actions/NewStake.tsx

@@ -111,12 +111,12 @@ class NewStake extends TxComponent<Props, State> {
         <Modal.Actions onCancel={onClose}>
           <TxButton
             accountId={stashId}
+            extrinsic={extrinsic}
+            icon='sign-in'
             isDisabled={!canSubmit}
             isPrimary
             label={t('Bond')}
-            icon='sign-in'
             onStart={onClose}
-            extrinsic={extrinsic}
           />
         </Modal.Actions>
       </Modal>

packages/page-staking/src/Actions/index.tsx

@@ -68,9 +68,9 @@ function Actions ({ allRewards, allStashes, className, isVisible, next, stakingO
     <div className={`${className} ${!isVisible && 'staking--hidden'}`}>
       <Button.Group>
         <Button
+          icon='add'
           key='new-stake'
           label={t('New stake')}
-          icon='add'
           onClick={_toggleNewStake}
         />
       </Button.Group>
@@ -79,7 +79,12 @@ function Actions ({ allRewards, allStashes, className, isVisible, next, stakingO
       )}
       <Table>
         <Table.Head>
-          <th className='start' colSpan={2}><h1>{t('stashes')}</h1></th>
+          <th
+            className='start'
+            colSpan={2}
+          >
+            <h1>{t('stashes')}</h1>
+          </th>
           <th className='address'>{t('controller')}</th>
           <th className='number'>{t('rewards')}</th>
           <th className='number'>{t('bonded')}</th>

packages/page-staking/src/Overview/CurrentList.tsx

@@ -138,7 +138,12 @@ function CurrentList ({ authorsMap, hasQueries, isIntentions, lastAuthors, next,
     ? (
       <Table>
         <Table.Head>
-          <th colSpan={9}className='start'><h1>{t('intentions')}</h1></th>
+          <th
+            className='start'
+            colSpan={9}
+          >
+            <h1>{t('intentions')}</h1>
+          </th>
         </Table.Head>
         <Table.Body empty={waiting && t('No waiting validators found')}>
           {_renderRows(elected, false).concat(..._renderRows(waiting, false))}
@@ -157,7 +162,12 @@ function CurrentList ({ authorsMap, hasQueries, isIntentions, lastAuthors, next,
             value={nameFilter}
           />
         }>
-          <th colSpan={3} className='start'><h1>{t('validators')}</h1></th>
+          <th
+            className='start'
+            colSpan={3}
+          >
+            <h1>{t('validators')}</h1>
+          </th>
           <th>{t('other stake')}</th>
           <th>{t('own stake')}</th>
           <th>{t('commission')}</th>

packages/page-staking/src/Targets/index.tsx

@@ -230,7 +230,12 @@ function Targets ({ className }: Props): React.ReactElement<Props> {
             value={_amount}
           />
         }>
-          <th className='start' colSpan={3}><h1>{t('validators')}</h1></th>
+          <th
+            className='start'
+            colSpan={3}
+          >
+            <h1>{t('validators')}</h1>
+          </th>
           {['rankComm', 'rankBondTotal', 'rankBondOwn', 'rankBondOther', 'rankOverall'].map((header): React.ReactNode => (
             <th
               className={`isClickable ${sortBy === header && 'ui--highlight--border'} number`}

packages/page-staking/src/index.tsx

@@ -122,8 +122,8 @@ function StakingApp ({ basePath, className }: Props): React.ReactElement<Props>
           <Overview
             hasQueries={hasQueries}
             isIntentions
-            recentlyOnline={recentlyOnline}
             next={next}
+            recentlyOnline={recentlyOnline}
             setNominators={dispatchNominators}
             stakingOverview={stakingOverview}
           />
@@ -139,8 +139,8 @@ function StakingApp ({ basePath, className }: Props): React.ReactElement<Props>
       <Overview
         className={basePath === pathname ? '' : 'staking--hidden'}
         hasQueries={hasQueries}
-        recentlyOnline={recentlyOnline}
         next={next}
+        recentlyOnline={recentlyOnline}
         setNominators={dispatchNominators}
         stakingOverview={stakingOverview}
       />

packages/page-storage/src/Selection/Consts.tsx

@@ -37,9 +37,9 @@ function Consts ({ onAdd }: Props): React.ReactElement<Props> {
       <div className='storage--actionrow-value'>
         <InputConsts
           defaultValue={defaultValue}
+          help={meta?.documentation.join(' ')}
           label={t('selected constant query')}
           onChange={setValue}
-          help={meta?.documentation.join(' ')}
         />
       </div>
       <div className='storage--actionrow-buttons'>

packages/page-storage/src/Selection/Modules.tsx

@@ -94,9 +94,9 @@ function Modules ({ onAdd }: Props): React.ReactElement<Props> {
       <div className='storage--actionrow-value'>
         <InputStorage
           defaultValue={api.query.timestamp.now}
+          help={meta?.documentation.join(' ')}
           label={t('selected state query')}
           onChange={_onChangeKey}
-          help={meta?.documentation.join(' ')}
         />
         <Params
           key={`${section}.${method}:params` /* force re-render on change */}

packages/page-storage/src/Selection/index.tsx

@@ -2,9 +2,9 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { ComponentProps, QueryTypes, ParitalQueryTypes } from '../types';
+import { QueryTypes, ParitalQueryTypes } from '../types';
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Route, Switch } from 'react-router';
 import { Tabs } from '@polkadot/react-components';
 
@@ -38,10 +38,10 @@ function Selection ({ basePath, onAdd }: Props): React.ReactElement<Props> {
     }
   ], [t]);
 
-  const _onAdd = (query: ParitalQueryTypes): void => onAdd({ ...query, id: ++id });
-  const _renderComponent = (Component: React.ComponentType<ComponentProps>): () => React.ReactNode =>
-    // eslint-disable-next-line react/display-name
-    (): React.ReactNode => <Component onAdd={_onAdd} />;
+  const _onAdd = useCallback(
+    (query: ParitalQueryTypes): void => onAdd({ ...query, id: ++id }),
+    [onAdd]
+  );
 
   return (
     <>
@@ -52,9 +52,9 @@ function Selection ({ basePath, onAdd }: Props): React.ReactElement<Props> {
         />
       </header>
       <Switch>
-        <Route path={`${basePath}/constants`} render={_renderComponent(Consts)} />
-        <Route path={`${basePath}/raw`} render={_renderComponent(Raw)} />
-        <Route render={_renderComponent(Modules)} />
+        <Route path={`${basePath}/constants`}><Consts onAdd={_onAdd} /></Route>
+        <Route path={`${basePath}/raw`}><Raw onAdd={_onAdd} /></Route>
+        <Route><Modules onAdd={_onAdd} /></Route>
       </Switch>
     </>
   );

packages/page-sudo/src/SetKey.tsx

@@ -34,18 +34,18 @@ function SetKey ({ allAccounts, className, isMine, sudoKey }: Props): React.Reac
             <>
               <InputAddress
                 className='sudoInputAddress'
-                value={selected}
-                label={t('sudo key')}
                 isInput={true}
+                label={t('sudo key')}
                 onChange={setSelected}
                 type='all'
+                value={selected}
               />
               <TxButton
                 accountId={sudoKey}
+                icon='sign-in'
                 isDisabled={!isMine || sudoKey === selected}
                 isPrimary
                 label={t('Reassign')}
-                icon='sign-in'
                 params={[selected]}
                 tx='sudo.setKey'
               />

packages/page-sudo/src/Sudo.tsx

@@ -47,11 +47,11 @@ class Propose extends TxComponent<Props, State> {
           <Button.Group>
             <TxButton
               accountId={sudoKey}
-              label={t('Submit Sudo')}
               icon='sign-in'
-              tx='sudo.sudo'
               isDisabled={!method || !isValid}
+              label={t('Submit Sudo')}
               params={method ? [createType(registry, 'Proposal', method)] : []}
+              tx='sudo.sudo'
               withSpinner
             />
           </Button.Group>

packages/page-sudo/src/index.tsx

@@ -1,10 +1,8 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2020 @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.
 
 import { AppProps as Props } from '@polkadot/react-components/types';
-import { ComponentProps } from './types';
 
 import React, { useMemo } from 'react';
 import { Route, Switch } from 'react-router';
@@ -31,19 +29,6 @@ function SudoApp ({ basePath }: Props): React.ReactElement<Props> {
     }
   ], [t]);
 
-  const _renderComponent = (Component: React.ComponentType<ComponentProps>): () => React.ReactNode => {
-    // eslint-disable-next-line react/display-name
-    return (): React.ReactNode => {
-      return (
-        <Component
-          allAccounts={allAccounts}
-          sudoKey={sudoKey}
-          isMine={isMine}
-        />
-      );
-    };
-  };
-
   return (
     <main>
       <header>
@@ -55,8 +40,20 @@ function SudoApp ({ basePath }: Props): React.ReactElement<Props> {
       {isMine
         ? (
           <Switch>
-            <Route path={`${basePath}/key`} render={_renderComponent(SetKey)} />
-            <Route render={_renderComponent(Sudo)} />
+            <Route path={`${basePath}/key`}>
+              <SetKey
+                allAccounts={allAccounts}
+                isMine={isMine}
+                sudoKey={sudoKey}
+              />
+            </Route>
+            <Route>
+              <Sudo
+                allAccounts={allAccounts}
+                isMine={isMine}
+                sudoKey={sudoKey}
+              />
+            </Route>
           </Switch>
         )
         : (

packages/page-tech-comm/src/Overview/Members.tsx

@@ -21,7 +21,12 @@ function Members ({ className, members, prime }: Props): React.ReactElement<Prop
   return (
     <Table className={className}>
       <Table.Head>
-        <th className='start' colSpan={3}><h1>{t('members')}</h1></th>
+        <th
+          className='start'
+          colSpan={3}
+        >
+          <h1>{t('members')}</h1>
+        </th>
       </Table.Head>
       <Table.Body empty={members && t('No members found')}>
         {members?.map((accountId): React.ReactNode => (

packages/page-tech-comm/src/Proposals/Propose.tsx

@@ -46,8 +46,8 @@ function Propose ({ isMember, members }: Props): React.ReactElement<Props> {
     <>
       {isOpen && (
         <Modal
-          onClose={onClose}
           header={t('Propose a committee motion')}
+          onClose={onClose}
         >
           <Modal.Content>
             <InputAddress
@@ -60,9 +60,9 @@ function Propose ({ isMember, members }: Props): React.ReactElement<Props> {
             />
             <InputNumber
               className='medium'
-              label={t('threshold')}
               help={t('The minimum number of committee votes required to approve this motion')}
               isError={!hasThreshold}
+              label={t('threshold')}
               onChange={_onChangeThreshold}
               placeholder={t('Positive number between 1 and {{count}}', { replace: { count: members.length } })}
               value={threshold || undefined}

packages/page-tech-comm/src/Proposals/index.tsx

@@ -25,7 +25,12 @@ function Proposals ({ className, isMember, members, prime, proposals }: Props):
       </Button.Group>
       <Table>
         <Table.Head>
-          <th className='start' colSpan={2}><h1>{t('proposals')}</h1></th>
+          <th
+            className='start'
+            colSpan={2}
+          >
+            <h1>{t('proposals')}</h1>
+          </th>
           <th>{t('threshold')}</th>
           <th className='address'>{t('aye')}</th>
           <th className='address'>{t('nay')}</th>

packages/page-toolbox/src/Rpc/Account.tsx

@@ -49,8 +49,8 @@ function Account ({ className, defaultValue, isError, onChange }: Props): React.
           label={t('with an index of')}
         >
           <Nonce
-            className='ui disabled dropdown selection'
             callOnResult={_onChangeAccountNonce}
+            className='ui disabled dropdown selection'
             params={accountId}
           />
         </Labelled>

packages/page-toolbox/src/Rpc/Selection.tsx

@@ -61,10 +61,10 @@ class Selection extends TxComponent<Props, State> {
         />
         <Button.Group>
           <Button
+            icon='sign-in'
             isDisabled={!isValid}
-            onClick={this.onSubmit}
             label={t('Submit RPC call')}
-            icon='sign-in'
+            onClick={this.onSubmit}
             ref={this.button}
           />
         </Button.Group>

packages/page-toolbox/src/Sign.tsx

@@ -162,9 +162,9 @@ function Sign ({ className }: Props): React.ReactElement<Props> {
                 {t('You need to unlock this account to be able to sign data.')}<br/>
                 <Button.Group>
                   <Button
-                    onClick={_toggleUnlock}
-                    label={t('Unlock account')}
                     icon='unlock'
+                    label={t('Unlock account')}
+                    onClick={_toggleUnlock}
                   />
                 </Button.Group>
               </div>