Bump dev (incl. eslint fixes) (#2502)

i18next-scanner.config.js

@@ -42,28 +42,28 @@ module.exports = {
     '!packages/*/src/i18n/**',
     '!**/node_modules/**'
   ],
-  output: './',
   options: {
     debug: true,
+    defaultLng: 'en',
+    defaultNs: 'ui',
     func: {
-      list: ['t', 'i18next.t', 'i18n.t'],
-      extensions: ['.tsx', '.ts']
-    },
-    trans: {
-      component: 'Trans'
+      extensions: ['.tsx', '.ts'],
+      list: ['t', 'i18next.t', 'i18n.t']
     },
+    keySeparator: false, // key separator
     lngs: ['en'],
-    defaultLng: 'en',
     ns: findPackages().map(({ dir }) => dir.replace('page-', 'app-')),
-    defaultNs: 'ui',
+    nsSeparator: false, // namespace separator
     resource: {
-      loadPath: 'packages/apps/public/locales/{{lng}}/{{ns}}.json',
-      savePath: 'packages/apps/public/locales/{{lng}}/{{ns}}.json',
       jsonIndent: 2,
-      lineEnding: '\n'
+      lineEnding: '\n',
+      loadPath: 'packages/apps/public/locales/{{lng}}/{{ns}}.json',
+      savePath: 'packages/apps/public/locales/{{lng}}/{{ns}}.json'
     },
-    nsSeparator: false, // namespace separator
-    keySeparator: false // key separator
+    trans: {
+      component: 'Trans'
+    }
   },
+  output: './',
   transform
 };

jest.config.js

@@ -14,8 +14,8 @@ const internalModules = findPackages()
 module.exports = Object.assign({}, config, {
   moduleNameMapper: {
     ...internalModules,
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'empty/object',
-    '\\.(css|less)$': 'empty/object'
+    '\\.(css|less)$': 'empty/object',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'empty/object'
   },
   transformIgnorePatterns: [
     '<rootDir>/node_modules/(?!edgeware-node-types/.*)'

package.json

@@ -36,7 +36,7 @@
     "@babel/core": "^7.9.0",
     "@babel/register": "^7.9.0",
     "@babel/runtime": "^7.9.2",
-    "@polkadot/dev": "^0.52.1",
+    "@polkadot/dev": "^0.52.3",
     "@polkadot/ts": "^0.3.14",
     "@types/bn.js": "^4.11.6",
     "@types/chart.js": "^2.9.16",

packages/apps-config/src/api/chain/westend.ts

@@ -4,9 +4,8 @@
 
 export default {
   Address: 'GenericAddress',
-  Keys: 'SessionKeys5',
-  // previous substrate versions
   BalanceLock: 'BalanceLockTo212',
+  Keys: 'SessionKeys5',
   ReferendumInfo: 'ReferendumInfoTo239',
   StakingLedger: 'StakingLedgerTo223'
 };

packages/apps-config/src/api/spec/centrifuge-chain.ts

@@ -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.
 
+// structs need to be in order
+/* eslint-disable sort-keys */
+
 export default {
   // chain-specific
   AnchorData: {

packages/apps-config/src/api/spec/kulupu.ts

@@ -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.
 
+// structs need to be in order
+/* eslint-disable sort-keys */
+
 export default {
   Address: 'GenericAddress',
   Difficulty: 'U256',

packages/apps-config/src/api/spec/kusama.ts

@@ -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.
 
+// structs need to be in order
+/* eslint-disable sort-keys */
+
 // technically these don't need to be here, the API injects them - however it does make
 // certain things easier such as providing metadata + types to external signers
 export default {

packages/apps-config/src/api/spec/node-template.ts

@@ -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.
 
+// structs need to be in order
+/* eslint-disable sort-keys */
+
 export default {
   Address: 'AccountId',
   LookupSource: 'AccountId'

packages/apps-config/src/extensions/index.ts

@@ -22,7 +22,7 @@ const availableExtensions: Record<Browser, Extension[]> = [
   }
 ].reduce((available: Record<Browser, Extension[]>, { browsers, desc, name }): Record<Browser, Extension[]> => {
   Object.entries(browsers).forEach(([browser, link]): void => {
-    available[browser as 'chrome'].push({ link, desc, name });
+    available[browser as 'chrome'].push({ desc, link, name });
   });
 
   return available;

packages/apps-config/src/links/commonwealth.ts

@@ -5,21 +5,21 @@
 import BN from 'bn.js';
 
 export default {
-  isActive: true,
   chains: {
     Edgeware: 'edgeware',
     Kusama: 'kusama',
     'Kusama CC3': 'kusama'
   },
+  create: (chain: string, path: string, data: BN | number | string, hash?: string): string => {
+    const withHash = path === 'proposal/councilmotion';
+
+    return `https://commonwealth.im/${chain}/${path}/${withHash ? hash : data.toString()}`;
+  },
+  isActive: true,
   paths: {
     council: 'proposal/councilmotion',
     proposal: 'proposal/democracyproposal',
     referendum: 'proposal/referendum',
     treasury: 'proposal/treasuryproposal'
-  },
-  create: (chain: string, path: string, data: BN | number | string, hash?: string): string => {
-    const withHash = path === 'proposal/councilmotion';
-
-    return `https://commonwealth.im/${chain}/${path}/${withHash ? hash : data.toString()}`;
   }
 };

packages/apps-config/src/links/polkascan.ts

@@ -5,7 +5,6 @@
 import BN from 'bn.js';
 
 export default {
-  isActive: true,
   chains: {
     Edgeware: 'edgeware',
     Kulupu: 'kulupu',
@@ -13,6 +12,9 @@ export default {
     'Kusama CC3': 'kusama',
     Westend: 'westend'
   },
+  create: (chain: string, path: string, data: BN | number | string): string =>
+    `https://polkascan.io/pre/${chain}/${path}/${data.toString()}`,
+  isActive: true,
   paths: {
     address: 'module/account',
     block: 'system/block',
@@ -21,7 +23,5 @@ export default {
     proposal: 'democracy/proposal',
     referendum: 'democracy/referendum',
     treasury: 'treasury/proposal'
-  },
-  create: (chain: string, path: string, data: BN | number | string): string =>
-    `https://polkascan.io/pre/${chain}/${path}/${data.toString()}`
+  }
 };

packages/apps-config/src/links/subscan.ts

@@ -5,16 +5,16 @@
 import BN from 'bn.js';
 
 export default {
-  isActive: false,
   chains: {
     Kusama: 'kusama',
     'Kusama CC3': 'kusama'
   },
+  create: (chain: string, path: string, data: BN | number | string): string =>
+    `https://${chain}.subscan.io/${path}/${data.toString()}`,
+  isActive: false,
   paths: {
     address: 'account',
     block: 'block',
     extrinsic: 'extrinsic'
-  },
-  create: (chain: string, path: string, data: BN | number | string): string =>
-    `https://${chain}.subscan.io/${path}/${data.toString()}`
+  }
 };

packages/apps-config/src/ui/logos/index.ts

@@ -41,10 +41,10 @@ const nodeLogos: Record<string, any> = [
 
 // overrides when we pass an explicit logo name
 const namedLogos: Record<string, any> = {
+  alexander: nodePolkadot,
   centrifuge: nodeCentrifuge,
-  empty: emptyLogo,
   edgeware: nodeEdgeware,
-  alexander: nodePolkadot,
+  empty: emptyLogo,
   kusama: chainKusama,
   polkadot: nodePolkadot,
   substrate: nodeSubstrate,

packages/apps-routing/src/council.ts

@@ -9,7 +9,6 @@ import Council, { useCounter } from '@polkadot/app-council';
 export default ([
   {
     Component: Council,
-    useCounter,
     display: {
       needsApi: [
         [
@@ -22,6 +21,7 @@ export default ([
       defaultValue: 'Council'
     },
     icon: 'building',
-    name: 'council'
+    name: 'council',
+    useCounter
   }
 ] as Routes);

packages/apps-routing/src/democracy.ts

@@ -9,7 +9,6 @@ import Democracy, { useCounter } from '@polkadot/app-democracy';
 export default ([
   {
     Component: Democracy,
-    useCounter,
     display: {
       needsApi: [
         'tx.democracy.notePreimage'
@@ -19,6 +18,7 @@ export default ([
       defaultValue: 'Democracy'
     },
     icon: 'calendar check',
-    name: 'democracy'
+    name: 'democracy',
+    useCounter
   }
 ] as Routes);

packages/apps-routing/src/staking.ts

@@ -10,7 +10,6 @@ import Staking, { useCounter } from '@polkadot/app-staking';
 export default ([
   {
     Component: Staking,
-    useCounter,
     display: {
       needsApi: [
         ['tx.staking.bond']
@@ -21,5 +20,6 @@ export default ([
     },
     icon: 'certificate',
     name: 'staking'
-  }
+  },
+  useCounter
 ] as Routes);

packages/apps-routing/src/techcomm.ts

@@ -9,7 +9,6 @@ import TechComm, { useCounter } from '@polkadot/app-tech-comm';
 export default ([
   {
     Component: TechComm,
-    useCounter,
     display: {
       needsApi: [
         'query.technicalCommittee.members'
@@ -19,6 +18,7 @@ export default ([
       defaultValue: 'Tech. comm.'
     },
     icon: 'microchip',
-    name: 'techcomm'
+    name: 'techcomm',
+    useCounter
   }
 ] as Routes);

packages/apps-routing/src/treasury.ts

@@ -9,7 +9,6 @@ import Treasury, { useCounter } from '@polkadot/app-treasury';
 export default ([
   {
     Component: Treasury,
-    useCounter,
     display: {
       needsAccounts: true,
       needsApi: [
@@ -20,6 +19,7 @@ export default ([
       defaultValue: 'Treasury'
     },
     icon: 'gem',
-    name: 'treasury'
+    name: 'treasury',
+    useCounter
   }
 ] as Routes);

packages/apps/package.json

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

packages/apps/src/Content/Status.tsx

@@ -41,8 +41,8 @@ function filterEvents (allAccounts: string[], t: (key: string, opts?: object) =>
           return {
             account,
             action: `${section}.${method}`,
-            status: 'event',
-            message: t('transfer received')
+            message: t('transfer received'),
+            status: 'event'
           };
         }
       } else if (section === 'democracy') {
@@ -50,12 +50,12 @@ function filterEvents (allAccounts: string[], t: (key: string, opts?: object) =>
 
         return {
           action: `${section}.${method}`,
-          status: 'event',
           message: t('update on #{{index}}', {
             replace: {
               index
             }
-          })
+          }),
+          status: 'event'
         };
       }
 

packages/apps/src/SideBar/Item.tsx

@@ -44,7 +44,7 @@ function hasEndpoint (api: ApiPromise, endpoint: string): boolean {
   }
 }
 
-function checkVisible (name: string, { api, isApiReady, isApiConnected }: ApiProps, hasAccounts: boolean, hasSudo: boolean, { isHidden, needsAccounts, needsApi, needsSudo }: Route['display']): boolean {
+function checkVisible (name: string, { api, isApiConnected, isApiReady }: ApiProps, hasAccounts: boolean, hasSudo: boolean, { isHidden, needsAccounts, needsApi, needsSudo }: Route['display']): boolean {
   if (isHidden) {
     return false;
   } else if (needsAccounts && !hasAccounts) {
@@ -73,7 +73,7 @@ function checkVisible (name: string, { api, isApiReady, isApiConnected }: ApiPro
   return notFound.length === 0;
 }
 
-function Item ({ route, isCollapsed, onClick }: Props): React.ReactElement<Props> | null {
+function Item ({ isCollapsed, onClick, route }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { allAccounts, hasAccounts } = useAccounts();
   const apiProps = useApi();

packages/apps/webpack.config.js

@@ -1,9 +1,9 @@
-/* eslint-disable @typescript-eslint/camelcase */
-/* eslint-disable @typescript-eslint/no-var-requires */
 // Copyright 2017-2020 @polkadot/apps authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+/* eslint-disable @typescript-eslint/camelcase */
+
 const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
@@ -39,21 +39,11 @@ function createWebpack ({ alias = {}, context, name = 'index' }) {
         : null // 'webpack-plugin-serve/client'
     ].filter((entry) => entry),
     mode: ENV,
-    output: {
-      chunkFilename: '[name].[chunkhash:8].js',
-      filename: '[name].[hash:8].js',
-      globalObject: '(typeof self !== \'undefined\' ? self : this)',
-      path: path.join(context, 'build')
-    },
-    resolve: {
-      alias,
-      extensions: ['.js', '.jsx', '.ts', '.tsx']
-    },
     module: {
       rules: [
         {
-          test: /\.css$/,
           exclude: /(node_modules)/,
+          test: /\.css$/,
           use: [
             isProd
               ? MiniCssExtractPlugin.loader
@@ -67,8 +57,8 @@ function createWebpack ({ alias = {}, context, name = 'index' }) {
           ]
         },
         {
-          test: /\.css$/,
           include: /node_modules/,
+          test: /\.css$/,
           use: [
             isProd
               ? MiniCssExtractPlugin.loader
@@ -77,8 +67,8 @@ function createWebpack ({ alias = {}, context, name = 'index' }) {
           ]
         },
         {
-          test: /\.(js|ts|tsx)$/,
           exclude: /(node_modules)/,
+          test: /\.(js|ts|tsx)$/,
           use: [
             require.resolve('thread-loader'),
             {
@@ -100,9 +90,9 @@ function createWebpack ({ alias = {}, context, name = 'index' }) {
             {
               loader: require.resolve('url-loader'),
               options: {
+                esModule: false,
                 limit: 10000,
-                name: 'static/[name].[hash:8].[ext]',
-                esModule: false
+                name: 'static/[name].[hash:8].[ext]'
               }
             }
           ]
@@ -113,8 +103,8 @@ function createWebpack ({ alias = {}, context, name = 'index' }) {
             {
               loader: require.resolve('file-loader'),
               options: {
-                name: 'static/[name].[hash:8].[ext]',
-                esModule: false
+                esModule: false,
+                name: 'static/[name].[hash:8].[ext]'
               }
             }
           ]
@@ -132,6 +122,12 @@ function createWebpack ({ alias = {}, context, name = 'index' }) {
       runtimeChunk: 'single',
       splitChunks: {
         cacheGroups: {
+          polkadotJs: {
+            chunks: 'initial',
+            enforce: true,
+            name: 'polkadotjs',
+            test: /node_modules\/(@polkadot\/wasm-crypto)/
+          },
           vendorOther: {
             chunks: 'initial',
             enforce: true,
@@ -143,16 +139,16 @@ function createWebpack ({ alias = {}, context, name = 'index' }) {
             enforce: true,
             name: 'react',
             test: /node_modules\/(chart|i18next|react|semantic-ui)/
-          },
-          polkadotJs: {
-            chunks: 'initial',
-            enforce: true,
-            name: 'polkadotjs',
-            test: /node_modules\/(@polkadot\/wasm-(crypto|dalek-ed25519|schnorrkel))/
           }
         }
       }
     },
+    output: {
+      chunkFilename: '[name].[chunkhash:8].js',
+      filename: '[name].[hash:8].js',
+      globalObject: '(typeof self !== \'undefined\' ? self : this)',
+      path: path.join(context, 'build')
+    },
     performance: {
       hints: false
     },
@@ -166,9 +162,9 @@ function createWebpack ({ alias = {}, context, name = 'index' }) {
         }
       }),
       new HtmlWebpackPlugin({
+        PAGE_TITLE: 'Polkadot/Substrate Portal',
         inject: true,
-        template: path.join(context, `${hasPublic ? 'public/' : ''}${name}.html`),
-        PAGE_TITLE: 'Polkadot/Substrate Portal'
+        template: path.join(context, `${hasPublic ? 'public/' : ''}${name}.html`)
       }),
       new webpack.optimize.SplitChunksPlugin(),
       new MiniCssExtractPlugin({
@@ -179,11 +175,15 @@ function createWebpack ({ alias = {}, context, name = 'index' }) {
         : new WebpackPluginServe({
           hmr: false, // switch off, Chrome WASM memory leak
           liveReload: false, // explict off, overrides hmr
-          progress: false, // since we have hmr off, disable
           port: 3000,
+          progress: false, // since we have hmr off, disable
           static: path.join(process.cwd(), '/build')
         })
     ]).filter((plugin) => plugin),
+    resolve: {
+      alias,
+      extensions: ['.js', '.jsx', '.ts', '.tsx']
+    },
     watch: !isProd,
     watchOptions: {
       ignored: ['.yarn', /build/, /node_modules/]
@@ -192,10 +192,10 @@ function createWebpack ({ alias = {}, context, name = 'index' }) {
 }
 
 module.exports = createWebpack({
-  context: __dirname,
   alias: findPackages().reduce((alias, { dir, name }) => {
     alias[name] = path.resolve(__dirname, `../${dir}/src`);
 
     return alias;
-  }, {})
+  }, {}),
+  context: __dirname
 });

packages/page-accounts/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@babel/runtime": "^7.9.2",
     "@polkadot/react-components": "0.40.0-beta.224",
-    "@polkadot/react-qr": "^0.52.0-beta.21",
+    "@polkadot/react-qr": "^0.52.0-beta.22",
     "@polkadot/vanitygen": "^0.11.0-beta.12",
     "detect-browser": "^5.0.0",
     "file-saver": "^2.0.2"

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

@@ -38,7 +38,7 @@ function Banner ({ className }: Props): React.ReactElement<Props> | null {
               yourBrowser: stringUpperFirst(browserName)
             }
           })}</p>
-          <ul>{availableExtensions[browserName].map(({ desc, name, link }): React.ReactNode => (
+          <ul>{availableExtensions[browserName].map(({ desc, link, name }): React.ReactNode => (
             <li key={name}>
               <a
                 href={link}

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

@@ -97,8 +97,8 @@ function generateSeed (_seed: string | undefined | null, derivePath: string, see
     derivePath,
     isSeedValid: true,
     pairType,
-    seedType,
-    seed
+    seed,
+    seedType
   };
 }
 
@@ -123,8 +123,8 @@ function updateAddress (seed: string, derivePath: string, seedType: SeedType, pa
     derivePath,
     isSeedValid,
     pairType,
-    seedType,
-    seed
+    seed,
+    seedType
   };
 }
 
@@ -167,11 +167,11 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
   const isValid = !!address && !deriveError && isNameValid && isPassValid && isPass2Valid && isSeedValid;
   const seedOpt = useMemo(() => (
     isDevelopment
-      ? [{ value: 'dev', text: t('Development') }]
+      ? [{ text: t('Development'), value: 'dev' }]
       : []
   ).concat(
-    { value: 'bip', text: t('Mnemonic') },
-    { value: 'raw', text: t('Raw seed') }
+    { text: t('Mnemonic'), value: 'bip' },
+    { text: t('Raw seed'), value: 'raw' }
   ), [isDevelopment, t]);
 
   const _onChangePass = (password: string): void =>

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

@@ -56,7 +56,7 @@ function Create ({ onClose, onStatusChange }: Props): React.ReactElement<Props>
     }
 
     try {
-      keyring.saveAddress(address, { name: name.trim(), genesisHash: keyring.genesisHash, tags: [] });
+      keyring.saveAddress(address, { genesisHash: keyring.genesisHash, name: name.trim(), tags: [] });
 
       status.account = address;
       status.status = address ? 'success' : 'error';

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

@@ -220,9 +220,9 @@ class VanityApp extends TxComponent<Props, State> {
 
         return {
           elapsed,
-          matches: newMatches,
           keyCount: newKeyCount,
-          keyTime: newKeyTime
+          keyTime: newKeyTime,
+          matches: newMatches
         };
       }
     );

packages/page-contracts/src/ABI.tsx

@@ -90,7 +90,7 @@ class ABI extends React.PureComponent<Props, State> {
 
   private renderInputFile (): React.ReactNode {
     const { className, help, isDisabled, isRequired, label, t } = this.props;
-    const { isAbiValid, isEmpty, isError, errorText } = this.state;
+    const { errorText, isAbiValid, isEmpty, isError } = this.state;
 
     return (
       <div className={className}>
@@ -168,10 +168,10 @@ class ABI extends React.PureComponent<Props, State> {
       console.error(error);
 
       this.setState({
+        errorText: error,
         isAbiValid: false,
         isEmpty: false,
-        isError: true,
-        errorText: error
+        isError: true
       }, (): void => onChange(null, null));
     }
   }

packages/page-contracts/src/CodeRow.tsx

@@ -56,7 +56,7 @@ class CodeRow extends Row<Props, State> {
     this.state = this.createState();
   }
 
-  public static getDerivedStateFromProps ({ code: { json }, accounts_info }: Props, prevState: State): State | null {
+  public static getDerivedStateFromProps ({ accounts_info, code: { json } }: Props, prevState: State): State | null {
     const codeHash = json.codeHash || DEFAULT_HASH;
     const name = json.name || DEFAULT_NAME;
     const tags = json.tags || [];

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

@@ -88,9 +88,10 @@ class Upload extends ContractModal<Props, State> {
   }
 
   private onAddWasm = (wasm: Uint8Array, name: string): void => {
-    const isWasmValid = wasm.subarray(0, 4).toString() === '0,97,115,109'; // '\0asm'
-
-    this.setState({ wasm: compactAddLength(wasm), isWasmValid });
+    this.setState({
+      isWasmValid: wasm.subarray(0, 4).toString() === '0,97,115,109', // '\0asm'
+      wasm: compactAddLength(wasm)
+    });
     this.onChangeName(name);
   }
 

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

@@ -30,8 +30,8 @@ interface State {
 class ValidateCode extends React.PureComponent<Props, State> {
   public state: State = {
     isStored: false,
-    isValidHex: false,
-    isValid: false
+    isValid: false,
+    isValidHex: false
   };
 
   public static getDerivedStateFromProps ({ codeHash, contracts_codeStorage, onChange }: Props): State {
@@ -44,8 +44,8 @@ class ValidateCode extends React.PureComponent<Props, State> {
 
     return {
       isStored,
-      isValidHex,
-      isValid
+      isValid,
+      isValidHex
     };
   }
 

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

@@ -29,9 +29,9 @@ class Add extends ContractModal<Props, State> {
     this.defaultState = {
       ...this.defaultState,
       address: null,
-      name: 'New Contract',
       isAddressValid: false,
-      isNameValid: true
+      isNameValid: true,
+      name: 'New Contract'
     };
     this.state = this.defaultState;
     this.headerText = props.t('Add an existing contract');
@@ -71,7 +71,7 @@ class Add extends ContractModal<Props, State> {
 
   protected renderButtons = (): React.ReactNode => {
     const { t } = this.props;
-    const { isAddressValid, isAbiValid, isNameValid } = this.state;
+    const { isAbiValid, isAddressValid, isNameValid } = this.state;
     const isValid = isNameValid && isAddressValid && isAbiValid;
 
     return (
@@ -96,7 +96,7 @@ class Add extends ContractModal<Props, State> {
   private onAdd = (): void => {
     const { api } = this.props;
     const status: Partial<ActionStatus> = { action: 'create' };
-    const { address, abi, name, tags } = this.state;
+    const { abi, address, name, tags } = this.state;
 
     if (!address || !abi || !name) {
       return;
@@ -104,12 +104,12 @@ class Add extends ContractModal<Props, State> {
 
     try {
       const json = {
-        name,
-        tags,
         contract: {
           abi,
           genesisHash: api.genesisHash.toHex()
-        }
+        },
+        name,
+        tags
       };
 
       keyring.saveContract(address, json);

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

@@ -32,7 +32,7 @@ interface Props extends BareProps {
 
 function Call (props: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
-  const { className, isOpen, callContract, callMessageIndex, onChangeCallContractAddress, onChangeCallMessageIndex, onClose } = props;
+  const { callContract, callMessageIndex, className, isOpen, onChangeCallContractAddress, onChangeCallMessageIndex, onClose } = props;
   const hasRpc = callContract?.hasRpcContractsCall;
   const callMessage = callContract?.getMessage(isNull(callMessageIndex) ? undefined : callMessageIndex);
 

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

@@ -17,7 +17,7 @@ interface Props {
 }
 
 function Outcome (props: Props): React.ReactElement<Props> | null {
-  const { className, onClear, outcome: { message, origin, output, params, isSuccess, time } } = props;
+  const { className, onClear, outcome: { isSuccess, message, origin, output, params, time } } = props;
   const dateTime = new Date(time);
 
   return (

packages/page-contracts/src/Deploy.tsx

@@ -50,8 +50,8 @@ class Deploy extends ContractModal<Props, State> {
 
     this.defaultState = {
       ...this.defaultState,
-      constructorIndex: -1,
       constructOptions: [],
+      constructorIndex: -1,
       endowment: new BN(ENDOWMENT),
       gasLimit: new BN(GAS_LIMIT),
       isHashValid: false,
@@ -80,9 +80,9 @@ class Deploy extends ContractModal<Props, State> {
       };
     } else {
       return {
-        constructorIndex: -1,
-        constructOptions: [] as ConstructOptions,
         abi: null,
+        constructOptions: [] as ConstructOptions,
+        constructorIndex: -1,
         contractAbi: null,
         isAbiSupplied: false,
         isAbiValid: false,
@@ -101,9 +101,9 @@ class Deploy extends ContractModal<Props, State> {
         return {
           codeHash,
           isAbiSupplied: !!contractAbi,
-          name: `${json.name} (instance)`,
           isHashValid: true,
           isNameValid: true,
+          name: `${json.name} (instance)`,
           ...Deploy.getContractAbiState(json.abi, contractAbi, Math.max(constructorIndex, 0))
         };
       }
@@ -116,8 +116,8 @@ class Deploy extends ContractModal<Props, State> {
     const constructorIndex = Math.max(ci, 0);
     if (!contractAbi || constructorIndex < 0 || constructorIndex >= contractAbi.constructors.length) {
       return {
-        constructorIndex: -1,
         constructOptions: [],
+        constructorIndex: -1,
         params: []
       };
     }
@@ -139,15 +139,15 @@ class Deploy extends ContractModal<Props, State> {
       });
 
     return {
-      constructorIndex,
       constructOptions,
+      constructorIndex,
       params: createValues(constructor.args)
     };
   }
 
   protected renderContent = (): React.ReactNode => {
     const { t } = this.props;
-    const { codeHash, constructorIndex, constructOptions, contractAbi, endowment, isAbiSupplied, isBusy, isHashValid } = this.state;
+    const { codeHash, constructOptions, constructorIndex, contractAbi, endowment, isAbiSupplied, isBusy, isHashValid } = this.state;
 
     const codeOptions = store.getAllCode().map(({ json: { codeHash, name } }): { text: string; value: string } => ({
       text: `${name} (${codeHash})`,
@@ -303,11 +303,11 @@ class Deploy extends ContractModal<Props, State> {
         }
 
         keyring.saveContract(address.toString(), {
-          name,
           contract: {
             abi,
             genesisHash: api.genesisHash.toHex()
           },
+          name,
           tags
         });
 

packages/page-contracts/src/MessageSignature.tsx

@@ -91,10 +91,10 @@ function MessageSignature ({ message: { args, mutates, name, returnType }, param
       {mutates && (
         <>
           <Icon
-            className="mutates"
+            className='mutates'
             data-for={`mutates-${name}`}
             data-tip
-            name="database"
+            name='database'
           />
           {withTooltip && (
             <Tooltip

packages/page-contracts/src/Modal.tsx

@@ -191,7 +191,7 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
   }
 
   protected onChangeName = (name: string): void => {
-    this.setState({ name, isNameValid: name.length !== 0 });
+    this.setState({ isNameValid: name.length !== 0, name });
   }
 
   protected onChangeGas = (gasLimit: BN | undefined): void => {

packages/page-contracts/src/store.ts

@@ -76,10 +76,10 @@ class Store extends EventEmitter {
     try {
       const abi = json.abi ? JSON.parse(json.abi) : null;
       this.allCode[json.codeHash] = {
-        json,
         contractAbi: abi
           ? new Abi(registry, abi)
-          : undefined
+          : undefined,
+        json
       };
 
       this.emit('new-code');

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

@@ -23,11 +23,11 @@ function ProposeExternal ({ className, isMember, members }: Props): React.ReactE
   const [isVisible, toggleVisible] = useToggle();
   const [accountId, setAcountId] = useState<string | null>(null);
   const [proposal, setProposal] = useState<SubmittableExtrinsic<'promise'> | null>(null);
-  const [{ isHashValid, hash }, setHash] = useState<{ isHashValid: boolean; hash?: string }>({ isHashValid: false, hash: '' });
+  const [{ hash, isHashValid }, setHash] = useState<{ hash?: string; isHashValid: boolean }>({ hash: '', isHashValid: false });
   const threshold = Math.ceil((members.length || 0) * 0.5);
 
   const _onChangeHash = useCallback(
-    (hash?: string): void => setHash({ isHashValid: isHex(hash, 256), hash }),
+    (hash?: string): void => setHash({ hash, isHashValid: isHex(hash, 256) }),
     []
   );
 

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

@@ -18,7 +18,7 @@ interface Props {
   voters?: AccountId[];
 }
 
-function Candidate ({ className, address, balance, isPrime, voters }: Props): React.ReactElement<Props> {
+function Candidate ({ address, balance, className, isPrime, voters }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (

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

@@ -12,7 +12,7 @@ function SubmitCandidacy (): React.ReactElement {
   const { api } = useApi();
   const { t } = useTranslation();
   const [accountId, setAcountId] = useState<string | null>(null);
-  const { isOpen, onOpen, onClose } = useModal();
+  const { isOpen, onClose, onOpen } = useModal();
 
   return (
     <>

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

@@ -23,7 +23,7 @@ function Summary ({ bestNumber, className, electionsInfo }: Props): React.ReactE
     return null;
   }
 
-  const { members, candidateCount, desiredSeats, runnersUp, termDuration, voteCount } = electionsInfo;
+  const { candidateCount, desiredSeats, members, runnersUp, termDuration, voteCount } = electionsInfo;
 
   return (
     <SummaryBox className={className}>

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

@@ -29,8 +29,8 @@ class Vote extends TxModal<Props, State> {
 
     this.defaultState = {
       ...this.defaultState,
-      votes: [],
-      voteValue: new BN(0)
+      voteValue: new BN(0),
+      votes: []
     };
 
     this.state = {
@@ -50,13 +50,13 @@ class Vote extends TxModal<Props, State> {
       : 'elections.vote';
 
   protected txParams = (): [boolean[] | null, VoteIndex, BN | null] | [string[], BN] => {
-    const { votes, voteValue } = this.state;
+    const { voteValue, votes } = this.state;
 
     return [votes, voteValue];
   }
 
   protected isDisabled = (): boolean => {
-    const { accountId, votes, voteValue } = this.state;
+    const { accountId, voteValue, votes } = this.state;
 
     return !accountId || votes.length === 0 || voteValue.lten(0);
   }

packages/page-council/src/useCouncilMembers.ts

@@ -15,8 +15,8 @@ function transform (allAccounts: string[], queryMembers: [AccountId, Balance][])
   const members = queryMembers.map((accountId): string => accountId.toString());
 
   return {
-    members,
-    isMember: members.some((accountId): boolean => allAccounts.includes(accountId))
+    isMember: members.some((accountId): boolean => allAccounts.includes(accountId)),
+    members
   };
 }
 

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

@@ -23,18 +23,18 @@ interface Props {
 
 const ZERO_HASH = blake2AsHex('');
 
-function PreImage ({ className, isImminent: propsIsImminent, imageHash, onClose }: Props): React.ReactElement<Props> {
+function PreImage ({ className, imageHash, isImminent: propsIsImminent, onClose }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { apiDefaultTxSudo } = useApi();
   const [accountId, setAccountId] = useState<string | null>(null);
   const [isImminent, setIsImminent] = useState(propsIsImminent || false);
-  const [{ encodedProposal, encodedHash }, setHash] = useState<{ encodedProposal: string; encodedHash: string }>({ encodedProposal: '', encodedHash: ZERO_HASH });
+  const [{ encodedHash, encodedProposal }, setHash] = useState<{ encodedHash: string; encodedProposal: string }>({ encodedHash: ZERO_HASH, encodedProposal: '' });
   const [proposal, setProposal] = useState<any>();
 
   useEffect((): void => {
     const encodedProposal = (proposal as SubmittableExtrinsic)?.method.toHex() || '';
 
-    setHash({ encodedProposal, encodedHash: blake2AsHex(encodedProposal) });
+    setHash({ encodedHash: blake2AsHex(encodedProposal), encodedProposal });
   }, [proposal]);
 
   const isMatched = imageHash

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

@@ -20,7 +20,7 @@ interface Props {
   value: DeriveProposal;
 }
 
-function Proposal ({ className, value: { balance, index, image, imageHash, proposer, seconds } }: Props): React.ReactElement<Props> {
+function Proposal ({ className, value: { balance, image, imageHash, index, proposer, seconds } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const seconding = seconds.filter((_address, index): boolean => index !== 0);
 

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

@@ -19,10 +19,10 @@ function Propose ({ className, onClose }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [accountId, setAccountId] = useState<string | null>(null);
   const [balance, setBalance] = useState<BN | undefined>();
-  const [{ isHashValid, hash }, setHash] = useState<{ isHashValid: boolean; hash?: string }>({ isHashValid: false, hash: '' });
+  const [{ hash, isHashValid }, setHash] = useState<{ hash?: string; isHashValid: boolean }>({ hash: '', isHashValid: false });
 
   const _onChangeHash = useCallback(
-    (hash?: string): void => setHash({ isHashValid: isHex(hash, 256), hash }),
+    (hash?: string): void => setHash({ hash, isHashValid: isHex(hash, 256) }),
     []
   );
 

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

@@ -23,7 +23,7 @@ interface Props {
   value: DeriveReferendumExt;
 }
 
-function Referendum ({ className, value: { allAye, allNay, image, imageHash, index, status, isPassing, voteCountAye, voteCountNay, votedAye, votedNay } }: Props): React.ReactElement<Props> | null {
+function Referendum ({ className, value: { allAye, allNay, image, imageHash, index, isPassing, status, voteCountAye, voteCountNay, votedAye, votedNay } }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []);

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

@@ -44,8 +44,8 @@ function Summary (): React.ReactElement<{}> {
           <CardSummary
             label={t('launch period')}
             progress={{
-              value: bestNumber.mod(api.consts.democracy.launchPeriod).addn(1),
               total: api.consts.democracy.launchPeriod,
+              value: bestNumber.mod(api.consts.democracy.launchPeriod).addn(1),
               withTime: true
             }}
           />

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

@@ -18,7 +18,7 @@ interface Props {
   value?: Extrinsic[] | null;
 }
 
-function Extrinsics ({ className, blockNumber, events, label, value }: Props): React.ReactElement<Props> {
+function Extrinsics ({ blockNumber, className, events, label, value }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (

packages/page-explorer/src/Forks.tsx

@@ -63,7 +63,7 @@ function calcWidth (children: LinkArray): number {
 
 // counts the height of a specific node
 function calcHeight (children: LinkArray): number {
-  return children.reduce((max, { hdr, arr }): number => {
+  return children.reduce((max, { arr, hdr }): number => {
     hdr.height = hdr.isEmpty
       ? 0
       : 1 + calcHeight(arr);

packages/page-explorer/src/Query.tsx

@@ -20,18 +20,15 @@ interface State {
 }
 
 function stateFromValue (value: string): State {
-  const isValidHex = isHex(value, 256);
-  const isNumber = !isValidHex && /^\d+$/.test(value);
-
   return {
-    value,
-    isValid: isValidHex || isNumber
+    isValid: isHex(value, 256) || /^\d+$/.test(value),
+    value
   };
 }
 
 function Query ({ className, value: propsValue }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const [{ value, isValid }, setState] = useState(stateFromValue(propsValue || ''));
+  const [{ isValid, value }, setState] = useState(stateFromValue(propsValue || ''));
 
   const _setHash = (value: string): void => setState(stateFromValue(value));
   const _onQuery = (): void => {

packages/page-extrinsics/src/Selection.tsx

@@ -34,7 +34,7 @@ class Selection extends TxComponent<Props, State> {
 
   public render (): React.ReactNode {
     const { apiDefaultTxSudo, t } = this.props;
-    const { isValid, isValidUnsigned, accountId } = this.state;
+    const { accountId, isValid, isValidUnsigned } = this.state;
     const extrinsic = this.getExtrinsic() || apiDefaultTxSudo('0x00');
 
     return (
@@ -91,10 +91,10 @@ class Selection extends TxComponent<Props, State> {
         );
 
         return {
-          method,
+          accountId,
           isValid,
           isValidUnsigned: !!method,
-          accountId
+          method
         };
       }
     );

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

@@ -16,7 +16,7 @@ interface Props extends I18nProps {
   onForget: (id: string) => void;
 }
 
-function AssetCard ({ className, assetId, name, onForget, onSaveName, t }: Props): React.ReactElement<Props> {
+function AssetCard ({ assetId, className, name, onForget, onSaveName, t }: Props): React.ReactElement<Props> {
   const _onForget = (): void => onForget(assetId);
   const _onSaveName = (name: string): void => onSaveName(assetId, name);
 

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

@@ -42,9 +42,9 @@ function Transfer ({ assets, className, onClose, recipientId: propRecipientId, s
 
   // build up our list of options via assets
   useEffect((): void => {
-    setOptions(Object.entries(assets || {}).map(([id, name]): Option => ({
-      value: id,
-      text: `${name} (${id})`
+    setOptions(Object.entries(assets || {}).map(([value, name]): Option => ({
+      text: `${name} (${value})`,
+      value
     })));
   }, [assets]);
 

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

@@ -26,8 +26,6 @@ subject.subscribe((assets): void =>
 );
 
 export default {
-  getAssets: (): AssetsSubjectInfo[] =>
-    Object.entries(subject.getValue()).map(([id, name]): AssetsSubjectInfo => ({ id, name })),
   add: (id: string, name: string): void => {
     const assets = subject.getValue();
     subject.next({
@@ -35,6 +33,8 @@ export default {
       [id]: name
     });
   },
+  getAssets: (): AssetsSubjectInfo[] =>
+    Object.entries(subject.getValue()).map(([id, name]): AssetsSubjectInfo => ({ id, name })),
   remove: (id: string): void => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { [id]: ignore, ...assets } = subject.getValue();

packages/page-js/src/constants.tsx

@@ -8,7 +8,7 @@ export const STORE_EXAMPLES = 'polkadot-app-js-examples';
 export const STORE_SELECTED = 'polkadot-app-js-selected';
 
 export const CUSTOM_LABEL: StrictLabelProps = {
-  color: 'orange',
   children: 'Custom',
+  color: 'orange',
   size: 'tiny'
 };

packages/page-js/src/snippets/consts-examples.ts

@@ -4,6 +4,9 @@
 
 import { Snippet } from '@polkadot/app-js/types';
 
+// We must fix this :(
+/* eslint-disable sort-keys */
+
 export const constsStakingParameters: Snippet = {
   value: 'constsStakingParameters',
   text: 'Get staking parameters',

packages/page-js/src/snippets/extrinsics-examples.ts

@@ -4,6 +4,9 @@
 
 import { Snippet } from '@polkadot/app-js/types';
 
+// We must fix this :(
+/* eslint-disable sort-keys */
+
 export const extrinsicMakeTransfer: Snippet = {
   value: 'extrinsicMakeTransfer',
   text: 'Make transfer and listen to events',

packages/page-js/src/snippets/rpc-examples.ts

@@ -4,6 +4,9 @@
 
 import { Snippet } from '@polkadot/app-js/types';
 
+// We must fix this :(
+/* eslint-disable sort-keys */
+
 export const rpcNetworkAuthoring: Snippet = {
   value: 'rpcNetworkAuthoring',
   text: 'Get authoring information',

packages/page-js/src/snippets/storage-examples.ts

@@ -4,6 +4,9 @@
 
 import { Snippet } from '@polkadot/app-js/types';
 
+// We must fix this :(
+/* eslint-disable sort-keys */
+
 export const storageGetInfo: Snippet = {
   value: 'storageGetInfo',
   text: 'Get chain state information',

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

@@ -35,7 +35,7 @@ const ONE_THOUSAND = new BN(1000);
 function Register ({ nextFreeId = ONE_THOUSAND, sudoKey }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
-  const { isOpen, onOpen, onClose } = useModal();
+  const { isOpen, onClose, onOpen } = useModal();
   const onSendRef = useRef<() => void>();
   const isWasmValidRef = useRef(false);
 

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

@@ -17,7 +17,7 @@ interface Props {
   parachain: DeriveParachainFull;
 }
 
-function Details ({ parachain: { heads, info, id } }: Props): React.ReactElement<Props> {
+function Details ({ parachain: { heads, id, info } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
 

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

@@ -31,7 +31,7 @@ function DispatchQueue ({ className, dispatchQueue = [] }: Props): React.ReactEl
           : (
             <>
               {
-                dispatchQueue.map(({ origin, data }): React.ReactNode => {
+                dispatchQueue.map(({ data, origin }): React.ReactNode => {
                   return (
                     <Card
                       className='queue-message'

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

@@ -24,13 +24,13 @@ interface Props extends ComponentProps {
   paraInfoRef: React.MutableRefObject<DeriveParachainInfo | null>;
 }
 
-function Parachain ({ className, basePath, isMine, paraInfoRef, sudoKey }: Props): React.ReactElement<Props> {
+function Parachain ({ basePath, className, isMine, paraInfoRef, sudoKey }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const history = useHistory();
   const { api } = useApi();
   const { id } = useParams();
   const [isMenuOpen, toggleMenu] = useToggle();
-  const { isOpen: isDeregisterOpen, onOpen: onDeregisterOpen, onClose: onDeregisterClose } = useModal();
+  const { isOpen: isDeregisterOpen, onClose: onDeregisterClose, onOpen: onDeregisterOpen } = useModal();
   const parachain = useCall<DeriveParachainFull | null>(api.derive.parachains.info as any, [id || null]);
 
   if (isUndefined(parachain)) {

packages/page-parachains/src/ParachainInfo.tsx

@@ -17,7 +17,7 @@ interface Props {
   isBig?: boolean;
 }
 
-function ParachainInfo ({ children, className, isBig, info }: Props): React.ReactElement<Props> {
+function ParachainInfo ({ children, className, info, isBig }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (

packages/page-settings/src/Developer.tsx

@@ -100,15 +100,15 @@ function Developer ({ className, onStatusChange }: Props): React.ReactElement<Pr
       store.set('types', types);
       setIsTypesValid(true);
       onStatusChange({
-        status: 'success',
-        action: t('Your custom types have been added')
+        action: t('Your custom types have been added'),
+        status: 'success'
       });
     } catch (error) {
       console.error(error);
       setIsTypesValid(false);
       onStatusChange({
-        status: 'error',
-        action: t(`Error saving your custom types. ${error.message}`)
+        action: t(`Error saving your custom types. ${error.message}`),
+        status: 'error'
       });
     }
   };

packages/page-settings/src/General.tsx

@@ -35,8 +35,8 @@ function General ({ className, isModalContent, onClose }: Props): React.ReactEle
   }, [t]);
   const translateLanguages = useMemo((): Option[] => {
     return availableLanguages.map(({ text, value, withI18n }) => ({
-      value,
-      text: withI18n ? t(text as string) : text
+      text: withI18n ? t(text as string) : text,
+      value
     }));
   }, [t]);
 
@@ -69,7 +69,7 @@ function General ({ className, isModalContent, onClose }: Props): React.ReactEle
     [settings]
   );
 
-  const { icon, i18nLang, ledgerConn, prefix, uiMode } = settings;
+  const { i18nLang, icon, ledgerConn, prefix, uiMode } = settings;
 
   return (
     <div className={className}>

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

@@ -11,7 +11,7 @@ interface Props extends BareProps {
   color: string;
 }
 
-function ChainColorIndicator ({ color, className }: Props): React.ReactElement<Props> {
+function ChainColorIndicator ({ className, color }: Props): React.ReactElement<Props> {
   return (
     <div
       className={className}

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

@@ -31,12 +31,12 @@ function getRandomColor (): string {
 }
 
 const initialState = {
+  color: '#FFFFFF',
   decimals: 0,
+  genesisHash: '',
   prefix: 0,
-  unit: 'UNIT',
   title: '',
-  color: '#FFFFFF',
-  genesisHash: ''
+  unit: 'UNIT'
 };
 
 function NetworkSpecs ({ chainInfo, className }: Props): React.ReactElement<Props> {
@@ -58,10 +58,10 @@ function NetworkSpecs ({ chainInfo, className }: Props): React.ReactElement<Prop
     chainInfo && setNetworkSpecs({
       color: chainInfo.color || getRandomColor(),
       decimals: chainInfo.tokenDecimals,
+      genesisHash: chainInfo.genesisHash,
       prefix: chainInfo.ss58Format,
-      unit: chainInfo.tokenSymbol,
       title: systemChain,
-      genesisHash: chainInfo.genesisHash
+      unit: chainInfo.tokenSymbol
     });
   }, [chainInfo, systemChain]);
 

packages/page-settings/src/useExtensions.ts

@@ -88,7 +88,7 @@ function filterAll (api: ApiPromise, all: ExtensionKnown[]): Extensions {
 }
 
 export default function useExtensions (): Extensions {
-  const { api, isApiReady, isDevelopment, extensions } = useApi();
+  const { api, extensions, isApiReady, isDevelopment } = useApi();
   const [all, setAll] = useState<ExtensionKnown[] | undefined>();
   const [state, setState] = useState<Extensions>({ count: 0 });
   const [trigger, setTrigger] = useState(0);

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

@@ -12,7 +12,7 @@ interface Props {
   value: Bid;
 }
 
-function BidRow ({ value: { who, kind, value } }: Props): React.ReactElement<Props> {
+function BidRow ({ value: { kind, value, who } }: Props): React.ReactElement<Props> {
   return (
     <tr>
       <td className='all top'>

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

@@ -60,7 +60,7 @@ function InjectKeys ({ onClose }: Props): React.ReactElement<Props> | null {
 
   const _onSubmit = useCallback(
     (): void => queueRpc({
-      rpc: { section: 'author', method: 'insertKey' } as any,
+      rpc: { method: 'insertKey', section: 'author' } as any,
       values: [keyType, suri, publicKey]
     }),
     [keyType, publicKey, queueRpc, suri]

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

@@ -24,7 +24,7 @@ interface Props {
 
 const MAX_NOMINEES = 16;
 
-function Nominate ({ className, controllerId, nominees, onClose, next, stakingOverview, stashId }: Props): React.ReactElement<Props> | null {
+function Nominate ({ className, controllerId, next, nominees, onClose, stakingOverview, stashId }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const [favorites] = useFavorites(STORE_FAVS_BASE);
   const [validators, setValidators] = useState<string[]>([]);

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

@@ -122,8 +122,8 @@ class Unbond extends TxComponent<Props, State> {
       const { maxUnbond = prevState.maxUnbond, maxBalance = prevState.maxBalance } = newState;
 
       return {
-        maxUnbond,
-        maxBalance
+        maxBalance,
+        maxUnbond
       };
     });
   }

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

@@ -120,7 +120,7 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar
   const balancesAll = useCall<DeriveBalancesAll>(api.derive.balances.all as any, [stashId]);
   const stakingAccount = useCall<DeriveStakingAccount>(api.derive.staking.account as any, [stashId]);
   const [[payoutRewards, payoutEras, payoutTotal], setStakingRewards] = useState<[DeriveStakerReward[], EraIndex[], BN]>([[], [], new BN(0)]);
-  const [{ controllerId, destination, destinationId, hexSessionIdQueue, hexSessionIdNext, isLoading, isOwnController, isStashNominating, isStashValidating, nominees, sessionIds, validatorPrefs }, setStakeState] = useState<StakeState>({ controllerId: null, destinationId: 0, hexSessionIdNext: null, hexSessionIdQueue: null, isLoading: true, isOwnController: false, isStashNominating: false, isStashValidating: false, sessionIds: [] });
+  const [{ controllerId, destination, destinationId, hexSessionIdNext, hexSessionIdQueue, isLoading, isOwnController, isStashNominating, isStashValidating, nominees, sessionIds, validatorPrefs }, setStakeState] = useState<StakeState>({ controllerId: null, destinationId: 0, hexSessionIdNext: null, hexSessionIdQueue: null, isLoading: true, isOwnController: false, isStashNominating: false, isStashValidating: false, sessionIds: [] });
   const [activeNoms, setActiveNoms] = useState<string[]>([]);
   const inactiveNoms = useInactives(stashId, nominees);
   const [isBondExtraOpen, toggleBondExtra] = useToggle();

packages/page-staking/src/Overview/Address/index.tsx

@@ -50,7 +50,7 @@ function expandInfo ({ exposure, validatorPrefs }: DeriveStakingQuery): StakingS
   let stakeOwn: BN | undefined;
 
   if (exposure) {
-    nominators = exposure.others.map(({ who, value }): [string, Balance] => [who.toString(), value.unwrap()]);
+    nominators = exposure.others.map(({ value, who }): [string, Balance] => [who.toString(), value.unwrap()]);
     stakeTotal = exposure.total.unwrap();
     stakeOwn = exposure.own.unwrap();
     stakeOther = stakeTotal.sub(stakeOwn);
@@ -75,7 +75,7 @@ function checkVisibility (api: ApiPromise, address: string, filterName: string,
 
   if (filterLower) {
     if (accountInfo) {
-      const { identity, nickname, accountId, accountIndex } = accountInfo;
+      const { accountId, accountIndex, identity, nickname } = accountInfo;
 
       if (accountId?.toString().includes(filterName) || accountIndex?.toString().includes(filterName)) {
         isVisible = true;
@@ -104,7 +104,7 @@ function Address ({ address, className, filterName, hasQueries, isAuthor, isElec
   const { api } = useApi();
   const accountInfo = useCall<DeriveAccountInfo>(api.derive.accounts.info as any, [address]);
   const stakingInfo = useCall<DeriveStakingQuery>(isMain && api.derive.staking.query as any, [address]);
-  const [{ commission, nominators, stakeOwn, stakeOther }, setStakingState] = useState<StakingState>({ nominators: [] });
+  const [{ commission, nominators, stakeOther, stakeOwn }, setStakingState] = useState<StakingState>({ nominators: [] });
   const [isVisible, setIsVisible] = useState(true);
 
   useEffect((): void => {

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

@@ -19,7 +19,7 @@ interface Props extends BareProps {
   stakingOverview?: DeriveStakingOverview;
 }
 
-function Overview ({ className, hasQueries, isIntentions, recentlyOnline, next, setNominators, stakingOverview }: Props): React.ReactElement<Props> {
+function Overview ({ className, hasQueries, isIntentions, next, recentlyOnline, setNominators, stakingOverview }: Props): React.ReactElement<Props> {
   const { byAuthor, lastBlockAuthors } = useContext(BlockAuthorsContext);
 
   return (

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

@@ -97,9 +97,9 @@ function extractInfo (allAccounts: string[], amount: BN = new BN(0), electedInfo
   const validators = sortValidators(
     electedInfo.info.map(({ accountId, exposure: _exposure, validatorPrefs }): ValidatorInfo => {
       const exposure = _exposure || {
-        total: createType(registry, 'Compact<Balance>'),
+        others: createType(registry, 'Vec<IndividualExposure>'),
         own: createType(registry, 'Compact<Balance>'),
-        others: createType(registry, 'Vec<IndividualExposure>')
+        total: createType(registry, 'Compact<Balance>')
       };
       const prefs = (validatorPrefs as (ValidatorPrefs | ValidatorPrefsTo196)) || {
         commission: createType(registry, 'Compact<Perbill>')
@@ -132,11 +132,11 @@ function extractInfo (allAccounts: string[], amount: BN = new BN(0), electedInfo
         bondOwn,
         bondShare: 0,
         bondTotal,
+        commissionPer: (((prefs as ValidatorPrefs).commission?.unwrap() || new BN(0)).toNumber() / 10_000_000),
         isCommission: !!(prefs as ValidatorPrefs).commission,
         isFavorite: favorites.includes(key),
         isNominating,
         key,
-        commissionPer: (((prefs as ValidatorPrefs).commission?.unwrap() || new BN(0)).toNumber() / 10_000_000),
         numNominators: exposure.others.length,
         rankBondOther: 0,
         rankBondOwn: 0,
@@ -183,11 +183,11 @@ function Targets ({ className }: Props): React.ReactElement<Props> {
   const [_amount, setAmount] = useState<BN | undefined>(new BN(1_000));
   const electedInfo = useCall<DeriveStakingElected>(api.derive.staking.electedInfo, []);
   const [favorites, toggleFavorite] = useFavorites(STORE_FAVS_BASE);
-  const [{ nominators, validators, sorted, totalStaked }, setWorkable] = useState<AllInfo>({ nominators: [], validators: [] });
+  const [{ nominators, sorted, totalStaked, validators }, setWorkable] = useState<AllInfo>({ nominators: [], validators: [] });
   const [{ sortBy, sortFromMax }, setSortBy] = useState<{ sortBy: SortBy; sortFromMax: boolean }>({ sortBy: 'rankOverall', sortFromMax: true });
   const amount = useDebounce(_amount);
   const labels = useMemo(
-    (): Record<string, string> => ({ rankComm: t('commission'), rankBondTotal: t('total stake'), rankBondOwn: t('own stake'), rankBondOther: t('other stake'), rankOverall: t('profit/era est') }),
+    (): Record<string, string> => ({ rankBondOther: t('other stake'), rankBondOwn: t('own stake'), rankBondTotal: t('total stake'), rankComm: t('commission'), rankOverall: t('profit/era est') }),
     [t]
   );
 
@@ -207,7 +207,7 @@ function Targets ({ className }: Props): React.ReactElement<Props> {
       const { nominators, totalStaked, validators } = extractInfo(allAccounts, amount, electedInfo, favorites, lastReward);
       const sorted = sort(sortBy, sortFromMax, validators);
 
-      setWorkable({ nominators, totalStaked, sorted, validators });
+      setWorkable({ nominators, sorted, totalStaked, validators });
     }
   }, [allAccounts, amount, electedInfo, favorites, lastReward, sortBy, sortFromMax]);
 

packages/page-storage/src/Query.tsx

@@ -61,16 +61,16 @@ function typeToString ({ creator: { meta: { modifier, type } } }: StorageEntryPr
 function createComponent (type: string, Component: React.ComponentType<any>, defaultProps: DefaultProps, renderHelper: ComponentRenderer): { Component: React.ComponentType<any>; render: (createComponent: RenderFn) => React.ComponentType<any>; refresh: (swallowErrors: boolean, contentShorten: boolean) => React.ComponentType<any> } {
   return {
     Component,
-    // In order to replace the default component during runtime we can provide a RenderFn to create a new 'plugged' component
-    render: (createComponent: RenderFn): React.ComponentType<any> =>
-      renderHelper(createComponent, defaultProps),
     // In order to modify the parameters which are used to render the default component, we can use this method
     refresh: (swallowErrors: boolean, contentShorten: boolean): React.ComponentType<any> =>
       renderHelper(
         (value: any): React.ReactNode =>
           <pre>{valueToText(type, value, swallowErrors, contentShorten)}</pre>,
         defaultProps
-      )
+      ),
+    // In order to replace the default component during runtime we can provide a RenderFn to create a new 'plugged' component
+    render: (createComponent: RenderFn): React.ComponentType<any> =>
+      renderHelper(createComponent, defaultProps)
   };
 }
 

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

@@ -87,7 +87,7 @@ function Modules ({ onAdd }: Props): React.ReactElement<Props> {
     _onChangeValues([]);
   };
 
-  const { creator: { method, section, meta } } = key;
+  const { creator: { meta, method, section } } = key;
 
   return (
     <section className='storage--actionrow'>

packages/page-sudo/src/Sudo.tsx

@@ -26,13 +26,13 @@ interface State {
 
 class Propose extends TxComponent<Props, State> {
   public state: State = {
-    method: null,
-    isValid: false
+    isValid: false,
+    method: null
   };
 
   public render (): React.ReactNode {
     const { apiDefaultTxSudo, isMine, sudoKey, t } = this.props;
-    const { method, isValid } = this.state;
+    const { isValid, method } = this.state;
 
     return isMine
       ? (
@@ -71,11 +71,10 @@ class Propose extends TxComponent<Props, State> {
     this.setState(
       (prevState: State): State => {
         const { method = prevState.method } = newState;
-        const isValid = !!method;
 
         return {
-          method,
-          isValid
+          isValid: !!method,
+          method
         };
       }
     );

packages/page-sudo/src/index.tsx

@@ -16,7 +16,7 @@ import { useTranslation } from './translate';
 
 function SudoApp ({ basePath }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { allAccounts, sudoKey, isMine } = useSudo();
+  const { allAccounts, isMine, sudoKey } = useSudo();
   const items = useMemo(() => [
     {
       isRoot: true,

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

@@ -19,7 +19,7 @@ interface Props {
 function Propose ({ isMember, members }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { apiDefaultTxSudo } = useApi();
-  const { isOpen, onOpen, onClose } = useModal();
+  const { isOpen, onClose, onOpen } = useModal();
   const [accountId, setAcountId] = useState<string | null>(null);
   const [proposal, setProposal] = useState<SubmittableExtrinsic<'promise'> | null>(null);
   const [[threshold, hasThreshold], setThreshold] = useState<[BN | null, boolean]>([

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

@@ -26,7 +26,7 @@ function Results ({ queue = [] }: Props): React.ReactElement<Props> | null {
 
   return (
     <section className='rpc--Results'>
-      {filtered.map(({ error, id, result, rpc: { section, method } }): React.ReactNode => (
+      {filtered.map(({ error, id, result, rpc: { method, section } }): React.ReactNode => (
         <Output
           isError={!!error}
           key={id}

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

@@ -31,8 +31,8 @@ const defaultMethod = jsonrpc.author.submitExtrinsic;
 
 class Selection extends TxComponent<Props, State> {
   public state: State = {
-    isValid: false,
     accountId: null,
+    isValid: false,
     rpc: defaultMethod,
     values: []
   };
@@ -75,16 +75,16 @@ class Selection extends TxComponent<Props, State> {
   private nextState (newState: Partial<State>): void {
     this.setState(
       (prevState: State): State => {
-        const { rpc = prevState.rpc, accountId = prevState.accountId, values = prevState.values } = newState;
+        const { accountId = prevState.accountId, rpc = prevState.rpc, values = prevState.values } = newState;
         const reqCount = rpc.params.reduce((count, { isOptional }): number => count + (isOptional ? 0 : 1), 0);
         const isValid = values.reduce((isValid, value): boolean => {
           return isValid && value.isValid === true;
         }, reqCount <= values.length);
 
         return {
+          accountId,
           isValid,
           rpc,
-          accountId,
           values
         };
       }

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

@@ -13,7 +13,7 @@ import Selection from './Selection';
 function RpcApp (): React.ReactElement {
   return (
     <QueueConsumer>
-      {({ txqueue, queueRpc }: QueueProps): React.ReactNode => (
+      {({ queueRpc, txqueue }: QueueProps): React.ReactNode => (
         <>
           <Selection queueRpc={queueRpc} />
           <Results queue={txqueue} />

packages/page-toolbox/src/Verify.tsx

@@ -37,9 +37,9 @@ function Verify (): React.ReactElement<{}> {
   const { t } = useTranslation();
   const [{ cryptoType, isValid }, setValidity] = useState<{ cryptoType: CryptoTypes; isValid: boolean }>({ cryptoType: 'unknown', isValid: false });
   const [{ data, isHexData }, setData] = useState<{ data: string; isHexData: boolean }>({ data: '', isHexData: false });
-  const [{ publicKey, isValidPk }, setPublicKey] = useState<{ publicKey: Uint8Array | null; isValidPk: boolean }>({ publicKey: null, isValidPk: false });
-  const [{ signature, isValidSignature }, setSignature] = useState<{ signature: string; isValidSignature: boolean }>({ signature: '', isValidSignature: false });
-  const [cryptoOptions] = useState([{ value: 'unknown', text: t('Crypto not detected') }].concat(uiSettings.availableCryptos as any[]));
+  const [{ isValidPk, publicKey }, setPublicKey] = useState<{ isValidPk: boolean; publicKey: Uint8Array | null }>({ isValidPk: false, publicKey: null });
+  const [{ isValidSignature, signature }, setSignature] = useState<{ isValidSignature: boolean; signature: string }>({ isValidSignature: false, signature: '' });
+  const [cryptoOptions] = useState([{ text: t('Crypto not detected'), value: 'unknown' }].concat(uiSettings.availableCryptos as any[]));
 
   useEffect((): void => {
     let cryptoType: CryptoTypes = 'unknown';
@@ -87,14 +87,14 @@ function Verify (): React.ReactElement<{}> {
       console.error(err);
     }
 
-    setPublicKey({ publicKey, isValidPk: !!publicKey && publicKey.length === 32 });
+    setPublicKey({ isValidPk: !!publicKey && publicKey.length === 32, publicKey });
   };
 
   const _onChangeData = (data: string): void =>
     setData({ data, isHexData: isHex(data) });
 
   const _onChangeSignature = (signature: string): void =>
-    setSignature({ signature, isValidSignature: isHex(signature) && signature.length === 130 });
+    setSignature({ isValidSignature: isHex(signature) && signature.length === 130, signature });
 
   return (
     <div className='toolbox--Verify'>
@@ -126,7 +126,7 @@ function Verify (): React.ReactElement<{}> {
           <AlignedIcon
             color={isValid ? 'green' : (isValidSignature ? 'red' : undefined)}
             name={isValid ? 'check circle' : (isValidSignature ? 'exclamation circle' : 'help circle')}
-            size="big"
+            size='big'
           />
         </div>
         <Input

packages/page-treasury/src/Overview/Submission.tsx

@@ -29,8 +29,8 @@ function Submission ({ councilProposals, id, isDisabled }: Props): React.ReactEl
   const [councilType, setCouncilType] = useState('reject');
   const [hasProposals, setHasProposals] = useState(true);
   const councilTypeOpt = useMemo(() => [
-    { value: 'accept', text: t('Acceptance proposal to council') },
-    { value: 'reject', text: t('Rejection proposal to council') }
+    { text: t('Acceptance proposal to council'), value: 'accept' },
+    { text: t('Rejection proposal to council'), value: 'reject' }
   ], [t]);
 
   useEffect((): void => {

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

@@ -28,7 +28,7 @@ function Voting ({ councilProposals, isDisabled }: Props): React.ReactElement<Pr
   const [councilOpts, setCouncilOpts] = useState<Option[]>([]);
   const [councilOptId, setCouncilOptId] = useState<number>(0);
   const [accountId, setAccountId] = useState<string | null>(null);
-  const [{ councilId, councilHash }, setCouncilInfo] = useState<{ councilId: ProposalIndex | null; councilHash: Hash | null }>({ councilId: null, councilHash: null });
+  const [{ councilHash, councilId }, setCouncilInfo] = useState<{ councilHash: Hash | null; councilId: ProposalIndex | null }>({ councilHash: null, councilId: null });
   const [isOpen, toggleOpen] = useToggle();
   const [voteValue, setVoteValue] = useState(true);
 
@@ -53,10 +53,10 @@ function Voting ({ councilProposals, isDisabled }: Props): React.ReactElement<Pr
     const councilProp = councilProposals.find(({ votes }): boolean => !!(votes?.index.eq(optionId)));
 
     if (councilProp && councilProp.votes) {
-      setCouncilInfo({ councilId: councilProp.votes.index, councilHash: councilProp.hash });
+      setCouncilInfo({ councilHash: councilProp.hash, councilId: councilProp.votes.index });
       setCouncilOptId(councilOptId);
     } else {
-      setCouncilInfo({ councilId: null, councilHash: null });
+      setCouncilInfo({ councilHash: null, councilId: null });
     }
   };
 

packages/react-api/package.json

@@ -32,7 +32,7 @@
   "dependencies": {
     "@babel/runtime": "^7.9.2",
     "@polkadot/api": "^1.9.1",
-    "@polkadot/extension-dapp": "^0.24.0-beta.3",
+    "@polkadot/extension-dapp": "^0.24.0-beta.4",
     "rxjs-compat": "^6.5.4"
   }
 }

packages/react-api/src/hoc/call.tsx

@@ -285,7 +285,7 @@ export default function withCall<P extends ApiProps> (endpoint: string, {
       }
 
       public render (): React.ReactNode {
-        const { callUpdated, callUpdatedAt, callResult } = this.state;
+        const { callResult, callUpdated, callUpdatedAt } = this.state;
         const _props = {
           ...this.props,
           callUpdated,

packages/react-api/src/hoc/observable.tsx

@@ -75,7 +75,7 @@ export default function withObservable<T, P> (observable: Observable<P>, { callO
 
       public render (): React.ReactNode {
         const { children } = this.props;
-        const { callUpdated, callUpdatedAt, callResult } = this.state;
+        const { callResult, callUpdated, callUpdatedAt } = this.state;
         const _props = {
           ...defaultProps,
           ...this.props,

packages/react-api/webpack.config.js

@@ -10,24 +10,24 @@ module.exports = {
   devtool: isProd ? 'source-map' : 'cheap-eval-source-map',
   entry: './src/demo.tsx',
   mode: ENV,
-  output: {
-    path: __dirname,
-    filename: './demo.js'
-  },
-  resolve: {
-    alias: {},
-    extensions: ['.js', '.jsx', '.ts', '.tsx']
-  },
   module: {
     rules: [
       {
-        test: /\.(js|ts|tsx)$/,
         exclude: /(node_modules)/,
+        test: /\.(js|ts|tsx)$/,
         use: {
           loader: 'babel-loader'
         }
       }
     ]
   },
-  plugins: []
+  output: {
+    filename: './demo.js',
+    path: __dirname
+  },
+  plugins: [],
+  resolve: {
+    alias: {},
+    extensions: ['.js', '.jsx', '.ts', '.tsx']
+  }
 };

packages/react-components/package.json

@@ -13,10 +13,10 @@
     "@babel/runtime": "^7.9.2",
     "@polkadot/keyring": "^2.7.1",
     "@polkadot/react-api": "0.40.0-beta.224",
-    "@polkadot/react-identicon": "^0.52.0-beta.21",
+    "@polkadot/react-identicon": "^0.52.0-beta.22",
     "@polkadot/react-query": "0.40.0-beta.224",
-    "@polkadot/ui-keyring": "^0.52.0-beta.21",
-    "@polkadot/ui-settings": "^0.52.0-beta.21",
+    "@polkadot/ui-keyring": "^0.52.0-beta.22",
+    "@polkadot/ui-settings": "^0.52.0-beta.22",
     "chart.js": "^2.9.3",
     "codeflask": "^1.4.1",
     "i18next": "^19.3.3",

packages/react-components/src/AccountNameJudgement.tsx

@@ -20,12 +20,12 @@ interface Props extends BareProps {
 }
 
 const JUDGEMENT_ENUM = [
-  { value: 0, text: 'Unknown' },
-  { value: 1, text: 'Fee paid' },
-  { value: 2, text: 'Reasonable' },
-  { value: 3, text: 'Known good' },
-  { value: 4, text: 'Out of date' },
-  { value: 5, text: 'Low quality' }
+  { text: 'Unknown', value: 0 },
+  { text: 'Fee paid', value: 1 },
+  { text: 'Reasonable', value: 2 },
+  { text: 'Known good', value: 3 },
+  { text: 'Out of date', value: 4 },
+  { text: 'Low quality', value: 5 }
 ];
 
 function AccountNameJudgement ({ address, registrars, toggleJudgement }: Props): React.ReactElement<Props> {

packages/react-components/src/ActionItem.tsx

@@ -26,7 +26,7 @@ export const styles = `
   ${proposedActionStyles}
 `;
 
-function ActionItem ({ className, children, accessory, idNumber, proposal, expandNested }: Props): React.ReactElement<Props> {
+function ActionItem ({ accessory, children, className, expandNested, idNumber, proposal }: Props): React.ReactElement<Props> {
   return (
     <Card className={className}>
       <div className='ui--Row'>

packages/react-components/src/AddressInfo.tsx

@@ -129,7 +129,7 @@ function calcBonded (stakingInfo?: DeriveStakingAccount, bonded?: boolean | BN[]
   return [own, other];
 }
 
-function renderExtended ({ balancesAll, address, withExtended }: Props, t: (key: string) => string): React.ReactNode {
+function renderExtended ({ address, balancesAll, withExtended }: Props, t: (key: string) => string): React.ReactNode {
   const extendedDisplay = withExtended === true
     ? DEFAULT_EXTENDED
     : withExtended || undefined;
@@ -343,7 +343,7 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) =
 function AddressInfo (props: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { allAccounts } = useAccounts();
-  const { className, children, extraInfo, withBalanceToggle, withHexSessionId } = props;
+  const { children, className, extraInfo, withBalanceToggle, withHexSessionId } = props;
 
   return (
     <div className={`ui--AddressInfo ${className} ${withBalanceToggle ? 'ui--AddressInfo-expander' : ''}`}>

packages/react-components/src/AddressRow.tsx

@@ -50,8 +50,8 @@ const EMPTY_INFO: DeriveAccountInfo = {
   },
   isCouncil: false,
   isSociety: false,
-  isTechCommittee: false,
-  isSudo: false
+  isSudo: false,
+  isTechCommittee: false
 };
 
 class AddressRow extends Row<ApiProps & Props, State> {

packages/react-components/src/Available.tsx

@@ -15,7 +15,7 @@ export interface Props extends BareProps {
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
 }
 
-function AvailableDisplay ({ params, className, label, style }: Props): React.ReactElement<Props> | null {
+function AvailableDisplay ({ className, label, params, style }: Props): React.ReactElement<Props> | null {
   if (!params) {
     return null;
   }