diff --git a/package.json b/package.json
index 8f934c3310..dafbcf21f0 100644
--- a/package.json
+++ b/package.json
@@ -28,12 +28,12 @@
     }
   },
   "resolutions": {
-    "@polkadot/api": "^1.15.1",
-    "@polkadot/api-contract": "^1.15.1",
-    "@polkadot/keyring": "^2.10.1",
-    "@polkadot/types": "^1.15.1",
-    "@polkadot/util": "^2.10.1",
-    "@polkadot/util-crypto": "^2.10.1",
+    "@polkadot/api": "^1.16.0-beta.2",
+    "@polkadot/api-contract": "^1.16.0-beta.2",
+    "@polkadot/keyring": "^2.11.0-beta.2",
+    "@polkadot/types": "^1.16.0-beta.2",
+    "@polkadot/util": "^2.11.0-beta.2",
+    "@polkadot/util-crypto": "^2.11.0-beta.2",
     "babel-core": "^7.0.0-bridge.0"
   },
   "scripts": {
@@ -75,8 +75,8 @@
     "@babel/register": "^7.9.0",
     "@babel/runtime": "^7.9.6",
     "@pinata/sdk": "^1.1.9",
-    "@polkadot/dev": "^0.53.5",
-    "@polkadot/ts": "^0.3.22",
+    "@polkadot/dev": "^0.54.1",
+    "@polkadot/ts": "^0.3.23",
     "@types/bn.js": "^4.11.6",
     "@types/chart.js": "^2.9.21",
     "@types/file-saver": "^2.0.1",
diff --git a/packages/apps-config/src/api/chain/berlin.ts b/packages/apps-config/src/api/chain/berlin.ts
index 2ec4bdef22..f7acd231d7 100644
--- a/packages/apps-config/src/api/chain/berlin.ts
+++ b/packages/apps-config/src/api/chain/berlin.ts
@@ -9,7 +9,7 @@ import * as edgewareDefinitions from 'edgeware-node-types/dist/definitions';
 
 const edgTypes = Object
   .values(edgewareDefinitions)
-  .reduce((res, { default: { types } }): object => ({ ...res, ...types }), {});
+  .reduce((res, { default: { types } }) => ({ ...res, ...types }), {});
 
 export default {
   ...edgTypes,
diff --git a/packages/apps-config/src/api/index.ts b/packages/apps-config/src/api/index.ts
index 7231b05d25..e70c807a35 100644
--- a/packages/apps-config/src/api/index.ts
+++ b/packages/apps-config/src/api/index.ts
@@ -5,7 +5,7 @@
 import typesChain from './chain';
 import typesSpec from './spec';
 
-export function getChainTypes (specName: string, chainName: string): Record<string, string | object> {
+export function getChainTypes (specName: string, chainName: string): Record<string, string | Record<string, unknown>> {
   return {
     ...(typesSpec[specName as 'edgeware'] || {}),
     ...(typesChain[chainName as 'Berlin'] || {})
diff --git a/packages/apps-config/src/api/spec/edgeware.ts b/packages/apps-config/src/api/spec/edgeware.ts
index 2ec4bdef22..f7acd231d7 100644
--- a/packages/apps-config/src/api/spec/edgeware.ts
+++ b/packages/apps-config/src/api/spec/edgeware.ts
@@ -9,7 +9,7 @@ import * as edgewareDefinitions from 'edgeware-node-types/dist/definitions';
 
 const edgTypes = Object
   .values(edgewareDefinitions)
-  .reduce((res, { default: { types } }): object => ({ ...res, ...types }), {});
+  .reduce((res, { default: { types } }) => ({ ...res, ...types }), {});
 
 export default {
   ...edgTypes,
diff --git a/packages/apps-config/src/api/spec/encointer-node.ts b/packages/apps-config/src/api/spec/encointer-node.ts
index 7ffc0647e4..a37b4150a5 100644
--- a/packages/apps-config/src/api/spec/encointer-node.ts
+++ b/packages/apps-config/src/api/spec/encointer-node.ts
@@ -4,7 +4,7 @@
 
 // structs need to be in order
 /* eslint-disable sort-keys */
-/* eslint-disable @typescript-eslint/camelcase */
+/* eslint-disable camelcase */
 
 export default {
   Address: 'AccountId',
diff --git a/packages/apps-config/src/api/util.ts b/packages/apps-config/src/api/util.ts
index d83775cbd0..451b492788 100644
--- a/packages/apps-config/src/api/util.ts
+++ b/packages/apps-config/src/api/util.ts
@@ -2,10 +2,10 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-export function typesFromDefs (definitions: Record<string, { types: any }>): object {
+export function typesFromDefs (definitions: Record<string, { types: Record<string, any> }>): Record<string, any> {
   return Object
     .values(definitions)
-    .reduce((res, { types }): object => ({
+    .reduce((res: Record<string, any>, { types }): Record<string, any> => ({
       ...res,
       ...types
     }), {});
diff --git a/packages/apps-config/src/links/commonwealth.ts b/packages/apps-config/src/links/commonwealth.ts
index 4b3f240099..92c82dfeca 100644
--- a/packages/apps-config/src/links/commonwealth.ts
+++ b/packages/apps-config/src/links/commonwealth.ts
@@ -13,7 +13,7 @@ export default {
     'Kusama CC3': 'kusama'
   },
   create: (chain: string, path: string, data: BN | number | string, hash?: string): string =>
-    `https://commonwealth.im/${chain}/${path}/${HASH_PATHS.includes(path) ? hash : data.toString()}`,
+    `https://commonwealth.im/${chain}/${path}/${HASH_PATHS.includes(path) ? (hash || '') : data.toString()}`,
   isActive: true,
   paths: {
     council: 'proposal/councilmotion',
diff --git a/packages/apps-config/src/settings/endpoints.ts b/packages/apps-config/src/settings/endpoints.ts
index 1566f0233f..027640d734 100644
--- a/packages/apps-config/src/settings/endpoints.ts
+++ b/packages/apps-config/src/settings/endpoints.ts
@@ -4,66 +4,66 @@
 
 import { Option } from './types';
 
-function createDev (t: (key: string, text: string, options: { ns: string }) => string): Option[] {
+function createDev (t: <T= string> (key: string, text: string, options: { ns: string }) => T): Option[] {
   return [
     {
       info: 'local',
-      text: t('rpc.local', 'Local Node (Own, 127.0.0.1:9944)', { ns: 'apps-config' }),
+      text: t<string>('rpc.local', 'Local Node (Own, 127.0.0.1:9944)', { ns: 'apps-config' }),
       value: 'ws://127.0.0.1:9944/'
     }
   ];
 }
 
-function createLive (t: (key: string, text: string, options: { ns: string }) => string): Option[] {
+function createLive (t: <T= string> (key: string, text: string, options: { ns: string }) => T): Option[] {
   return [
     {
       info: 'kusama',
-      text: t('rpc.kusama.parity', 'Kusama (Polkadot Canary, hosted by Parity)', { ns: 'apps-config' }),
+      text: t<string>('rpc.kusama.parity', 'Kusama (Polkadot Canary, hosted by Parity)', { ns: 'apps-config' }),
       value: 'wss://kusama-rpc.polkadot.io/'
     },
     {
       info: 'kusama',
-      text: t('rpc.kusama.w3f', 'Kusama (Polkadot Canary, hosted by Web3 Foundation)', { ns: 'apps-config' }),
+      text: t<string>('rpc.kusama.w3f', 'Kusama (Polkadot Canary, hosted by Web3 Foundation)', { ns: 'apps-config' }),
       value: 'wss://cc3-5.kusama.network/'
     },
     {
       info: 'kusama',
-      text: t('rpc.kusama.ava', 'Kusama (Polkadot Canary, user-run public nodes; see https://status.cloud.ava.do/)', { ns: 'apps-config' }),
+      text: t<string>('rpc.kusama.ava', 'Kusama (Polkadot Canary, user-run public nodes; see https://status.cloud.ava.do/)', { ns: 'apps-config' }),
       value: 'wss://kusama.polkadot.cloud.ava.do/'
     },
     {
       info: 'edgeware',
-      text: t('rpc.edgeware', 'Edgeware (Edgeware Mainnet, hosted by Commonwealth Labs)', { ns: 'apps-config' }),
+      text: t<string>('rpc.edgeware', 'Edgeware (Edgeware Mainnet, hosted by Commonwealth Labs)', { ns: 'apps-config' }),
       value: 'wss://mainnet1.edgewa.re'
     },
     {
       info: 'substrate',
-      text: t('rpc.kulupu', 'Kulupu (Kulupu Mainnet, hosted by Kulupu)', { ns: 'apps-config' }),
+      text: t<string>('rpc.kulupu', 'Kulupu (Kulupu Mainnet, hosted by Kulupu)', { ns: 'apps-config' }),
       value: 'wss://rpc.kulupu.network/ws'
     }
   ];
 }
 
-function createTest (t: (key: string, text: string, options: { ns: string }) => string): Option[] {
+function createTest (t: <T= string> (key: string, text: string, options: { ns: string }) => T): Option[] {
   return [
     {
       info: 'westend',
-      text: t('rpc.westend', 'Westend (Polkadot Testnet, hosted by Parity)', { ns: 'apps-config' }),
+      text: t<string>('rpc.westend', 'Westend (Polkadot Testnet, hosted by Parity)', { ns: 'apps-config' }),
       value: 'wss://westend-rpc.polkadot.io'
     },
     {
       info: 'edgeware',
-      text: t('rpc.berlin', 'Berlin (Edgeware Testnet, hosted by Commonwealth Labs)', { ns: 'apps-config' }),
+      text: t<string>('rpc.berlin', 'Berlin (Edgeware Testnet, hosted by Commonwealth Labs)', { ns: 'apps-config' }),
       value: 'wss://berlin1.edgewa.re'
     },
     {
       info: 'substrate',
-      text: t('rpc.flamingfir', 'Flaming Fir (Substrate Testnet, hosted by Parity)', { ns: 'apps-config' }),
+      text: t<string>('rpc.flamingfir', 'Flaming Fir (Substrate Testnet, hosted by Parity)', { ns: 'apps-config' }),
       value: 'wss://substrate-rpc.parity.io/'
     },
     {
       info: 'nodle',
-      text: t('rpc.arcadia', 'Arcadia (Nodle Testnet, hosted by Nodle)', { ns: 'apps-config' }),
+      text: t<string>('rpc.arcadia', 'Arcadia (Nodle Testnet, hosted by Nodle)', { ns: 'apps-config' }),
       value: 'wss://arcadia1.nodleprotocol.io/'
     }
   ];
@@ -74,14 +74,15 @@ function createTest (t: (key: string, text: string, options: { ns: string }) =>
 //   info: The chain logo name as defined in ../logos, specifically in namedLogos
 //   text: The text to display on teh dropdown
 //   value: The actual hosted secure websocket endpoint
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Option[] {
+export default function create (t: <T= string> (key: string, text: string, options: { ns: string }) => T): Option[] {
   const ENV: Option[] = [];
-  const WS_URL = process.env.WS_URL || (window as any).process_env?.WS_URL;
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
+  const WS_URL = process.env.WS_URL || (window as any).process_env?.WS_URL as string;
 
   if (WS_URL) {
     ENV.push({
       info: 'WS_URL',
-      text: 'WS_URL: ' + WS_URL,
+      text: `WS_URL: ${WS_URL}`,
       value: WS_URL
     });
   }
@@ -89,19 +90,19 @@ export default function create (t: (key: string, text: string, options: { ns: st
   let endpoints = [
     {
       isHeader: true,
-      text: t('rpc.header.live', 'Live networks', { ns: 'apps-config' }),
+      text: t<string>('rpc.header.live', 'Live networks', { ns: 'apps-config' }),
       value: ''
     },
     ...createLive(t),
     {
       isHeader: true,
-      text: t('rpc.header.test', 'Test networks', { ns: 'apps-config' }),
+      text: t<string>('rpc.header.test', 'Test networks', { ns: 'apps-config' }),
       value: ''
     },
     ...createTest(t),
     {
       isHeader: true,
-      text: t('rpc.header.dev', 'Development', { ns: 'apps-config' }),
+      text: t<string>('rpc.header.dev', 'Development', { ns: 'apps-config' }),
       value: ''
     },
     ...createDev(t)
@@ -111,7 +112,7 @@ export default function create (t: (key: string, text: string, options: { ns: st
     endpoints = [
       {
         isHeader: true,
-        text: t('rpc.custom', 'Custom environment', { ns: 'apps-config' }),
+        text: t<string>('rpc.custom', 'Custom environment', { ns: 'apps-config' }),
         value: ''
       },
       ...ENV
diff --git a/packages/apps-config/src/settings/languages.ts b/packages/apps-config/src/settings/languages.ts
index 84c27ee24a..bfe5eae539 100644
--- a/packages/apps-config/src/settings/languages.ts
+++ b/packages/apps-config/src/settings/languages.ts
@@ -4,10 +4,10 @@
 
 import { Option } from './types';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Option[] {
+export default function create (t: <T= string> (key: string, text: string, options: { ns: string }) => T): Option[] {
   return [
     {
-      text: t('lng.detect', 'Default browser language (auto-detect)', { ns: 'apps-config' }),
+      text: t<string>('lng.detect', 'Default browser language (auto-detect)', { ns: 'apps-config' }),
       value: 'default'
     },
     {
diff --git a/packages/apps-config/src/settings/ss58.ts b/packages/apps-config/src/settings/ss58.ts
index ccdbe58371..4dc30649cd 100644
--- a/packages/apps-config/src/settings/ss58.ts
+++ b/packages/apps-config/src/settings/ss58.ts
@@ -8,36 +8,36 @@ import { Option } from './types';
 //   info: the name of a logo as defined in ../logos, specifically in namedLogos
 //   text: The text you wish to display in the dropdown
 //   value: The actual ss5Format value (as registered)
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Option[] {
+export default function create (t: <T= string> (key: string, text: string, options: { ns: string }) => T): Option[] {
   return [
     {
       info: 'default',
-      text: t('ss58.default', 'Default for the connected node', { ns: 'apps-config' }),
+      text: t<string>('ss58.default', 'Default for the connected node', { ns: 'apps-config' }),
       value: -1
     },
     {
       info: 'substrate',
-      text: t('ss58.substrate', 'Substrate (generic)', { ns: 'apps-config' }),
+      text: t<string>('ss58.substrate', 'Substrate (generic)', { ns: 'apps-config' }),
       value: 42
     },
     {
       info: 'polkadot',
-      text: t('ss58.polkadot', 'Polkadot (live)', { ns: 'apps-config' }),
+      text: t<string>('ss58.polkadot', 'Polkadot (live)', { ns: 'apps-config' }),
       value: 0
     },
     {
       info: 'kusama',
-      text: t('ss58.kusmaa', 'Kusama (canary)', { ns: 'apps-config' }),
+      text: t<string>('ss58.kusmaa', 'Kusama (canary)', { ns: 'apps-config' }),
       value: 2
     },
     {
       info: 'edgeware',
-      text: t('ss58.edgeware', 'Edgeware (live)', { ns: 'apps-config' }),
+      text: t<string>('ss58.edgeware', 'Edgeware (live)', { ns: 'apps-config' }),
       value: 7
     },
     {
       info: 'centrifuge',
-      text: t('ss58.centrifuge', 'Centrifuge (live)', { ns: 'apps-config' }),
+      text: t<string>('ss58.centrifuge', 'Centrifuge (live)', { ns: 'apps-config' }),
       value: 36
     }
   ];
diff --git a/packages/apps-config/src/ui/index.ts b/packages/apps-config/src/ui/index.ts
index 2af027ddec..c5b15d0661 100644
--- a/packages/apps-config/src/ui/index.ts
+++ b/packages/apps-config/src/ui/index.ts
@@ -14,5 +14,6 @@ export function getSystemIcon (systemName: string): 'beachball' | 'polkadot' | '
 }
 
 export const getSystemChainColor = (systemChain: string, systemName: string): string | undefined => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
   return chainColors[sanitize(systemChain)] || nodeColors[sanitize(systemName)];
 };
diff --git a/packages/apps-config/src/ui/logos/index.ts b/packages/apps-config/src/ui/logos/index.ts
index f0a00e4e38..768ddf3992 100644
--- a/packages/apps-config/src/ui/logos/index.ts
+++ b/packages/apps-config/src/ui/logos/index.ts
@@ -2,6 +2,8 @@
 // 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/no-unsafe-assignment */
+
 // anything for a specific chain, most would probably fit into the node category (but allow for chain-specific)
 import chainKusama from './chains/kusama-128.gif';
 
@@ -28,7 +30,7 @@ const chainLogos: Record<string, any> = [
   ['Kusama CC3', chainKusama]
 ].reduce((logos, [chain, logo]): Record<string, any> => ({
   ...logos,
-  [chain.toLowerCase()]: logo
+  [(chain as string).toLowerCase()]: logo
 }), {});
 
 // overrides based on the actual software node type (all '-' converted to ' ')
@@ -44,7 +46,7 @@ const nodeLogos: Record<string, any> = [
   ['substrate-node', nodeSubstrate]
 ].reduce((logos, [node, logo]): Record<string, any> => ({
   ...logos,
-  [node.toLowerCase().replace(/-/g, ' ')]: logo
+  [(node as string).toLowerCase().replace(/-/g, ' ')]: logo
 }), {});
 
 // overrides when we pass an explicit logo name
diff --git a/packages/apps-electron/package.json b/packages/apps-electron/package.json
index 84fcc6579c..a78c1bc83d 100644
--- a/packages/apps-electron/package.json
+++ b/packages/apps-electron/package.json
@@ -5,7 +5,7 @@
   "version": "0.43.0-beta.2",
   "dependencies": {
     "@babel/polyfill": "^7.8.7",
-    "@polkadot/dev": "^0.53.5",
+    "@polkadot/dev": "^0.54.1",
     "@polkadot/react-components": "0.43.0-beta.2"
   },
   "devDependencies": {
diff --git a/packages/apps-electron/src/electron.ts b/packages/apps-electron/src/electron.ts
index 2495645d42..ada4cbb2d3 100644
--- a/packages/apps-electron/src/electron.ts
+++ b/packages/apps-electron/src/electron.ts
@@ -7,7 +7,7 @@ import path from 'path';
 
 const environment = process.env.NODE_ENV || 'production';
 
-function createWindow (): void {
+function createWindow (): Promise<unknown> {
   // Create the browser window.
   const win = new BrowserWindow({
     height: 600,
@@ -18,13 +18,14 @@ function createWindow (): void {
   });
 
   if (environment === 'development') {
-    win.loadURL('http://0.0.0.0:9000/');
     win.webContents.openDevTools();
-  } else {
-    const mainFilePath = path.resolve(__dirname, 'index.html');
 
-    win.loadFile(mainFilePath);
+    return win.loadURL('http://0.0.0.0:9000/');
   }
+
+  const mainFilePath = path.resolve(__dirname, 'index.html');
+
+  return win.loadFile(mainFilePath);
 }
 
-app.whenReady().then(createWindow);
+app.whenReady().then(createWindow).catch(console.error);
diff --git a/packages/apps-electron/webpack.main.config.js b/packages/apps-electron/webpack.main.config.js
index 4e522aa556..5dee58cbe7 100644
--- a/packages/apps-electron/webpack.main.config.js
+++ b/packages/apps-electron/webpack.main.config.js
@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-/* eslint-disable @typescript-eslint/camelcase */
+/* eslint-disable camelcase */
 
 const TerserPlugin = require('terser-webpack-plugin');
 const path = require('path');
diff --git a/packages/apps-electron/webpack.renderer.config.js b/packages/apps-electron/webpack.renderer.config.js
index 17b0d504e4..bb68521d62 100644
--- a/packages/apps-electron/webpack.renderer.config.js
+++ b/packages/apps-electron/webpack.renderer.config.js
@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-/* eslint-disable @typescript-eslint/camelcase */
+/* eslint-disable camelcase */
 
 const merge = require('webpack-merge');
 const baseConfig = require('@polkadot/apps/webpack.base.config');
diff --git a/packages/apps-routing/src/123code.ts b/packages/apps-routing/src/123code.ts
index 176460eedd..8cd644f070 100644
--- a/packages/apps-routing/src/123code.ts
+++ b/packages/apps-routing/src/123code.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import Template from '@polkadot/app-123code';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: Template,
     display: {
@@ -18,6 +18,6 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'th',
     name: '123code',
-    text: t('nav.123-code', 'Template', { ns: 'apps-routing' })
+    text: t<string>('nav.123-code', 'Template', { ns: 'apps-routing' })
   };
 }
diff --git a/packages/apps-routing/src/accounts.ts b/packages/apps-routing/src/accounts.ts
index a1a61727b6..f673609635 100644
--- a/packages/apps-routing/src/accounts.ts
+++ b/packages/apps-routing/src/accounts.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import Accounts, { useCounter } from '@polkadot/app-accounts';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: Accounts,
     display: {
@@ -14,7 +14,7 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'users',
     name: 'accounts',
-    text: t('nav.accounts', 'Accounts', { ns: 'apps-routing' }),
+    text: t<string>('nav.accounts', 'Accounts', { ns: 'apps-routing' }),
     useCounter
   };
 }
diff --git a/packages/apps-routing/src/claims.ts b/packages/apps-routing/src/claims.ts
index 0e8bc587ca..1e6a144685 100644
--- a/packages/apps-routing/src/claims.ts
+++ b/packages/apps-routing/src/claims.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import Claims from '@polkadot/app-claims';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: Claims,
     display: {
@@ -17,6 +17,6 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'star',
     name: 'claims',
-    text: t('nav.claims', 'Claim Tokens', { ns: 'apps-routing' })
+    text: t<string>('nav.claims', 'Claim Tokens', { ns: 'apps-routing' })
   };
 }
diff --git a/packages/apps-routing/src/contracts.ts b/packages/apps-routing/src/contracts.ts
index 1203b1b48e..6d3c51f2d0 100644
--- a/packages/apps-routing/src/contracts.ts
+++ b/packages/apps-routing/src/contracts.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import Contracts from '@polkadot/app-contracts';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: Contracts,
     display: {
@@ -17,6 +17,6 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'compress',
     name: 'contracts',
-    text: t('nav.contracts', 'Contracts', { ns: 'apps-routing' })
+    text: t<string>('nav.contracts', 'Contracts', { ns: 'apps-routing' })
   };
 }
diff --git a/packages/apps-routing/src/council.ts b/packages/apps-routing/src/council.ts
index d50c8082df..fb227738cd 100644
--- a/packages/apps-routing/src/council.ts
+++ b/packages/apps-routing/src/council.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import Council, { useCounter } from '@polkadot/app-council';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: Council,
     display: {
@@ -19,7 +19,7 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'building',
     name: 'council',
-    text: t('nav.council', 'Council', { ns: 'apps-routing' }),
+    text: t<string>('nav.council', 'Council', { ns: 'apps-routing' }),
     useCounter
   };
 }
diff --git a/packages/apps-routing/src/dashboard.ts b/packages/apps-routing/src/dashboard.ts
index 43eff7b449..f5fcef7a18 100644
--- a/packages/apps-routing/src/dashboard.ts
+++ b/packages/apps-routing/src/dashboard.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import Dashboard from '@polkadot/app-dashboard';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: Dashboard,
     display: {
@@ -14,6 +14,6 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'th',
     name: 'dashboard',
-    text: t('nav.dashboard', 'Dashboard', { ns: 'apps-routing' })
+    text: t<string>('nav.dashboard', 'Dashboard', { ns: 'apps-routing' })
   };
 }
diff --git a/packages/apps-routing/src/democracy.ts b/packages/apps-routing/src/democracy.ts
index cbb4683669..e18ad35504 100644
--- a/packages/apps-routing/src/democracy.ts
+++ b/packages/apps-routing/src/democracy.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import Democracy, { useCounter } from '@polkadot/app-democracy';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: Democracy,
     display: {
@@ -16,7 +16,7 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'calendar check',
     name: 'democracy',
-    text: t('nav.democracy', 'Democracy', { ns: 'apps-routing' }),
+    text: t<string>('nav.democracy', 'Democracy', { ns: 'apps-routing' }),
     useCounter
   };
 }
diff --git a/packages/apps-routing/src/explorer.ts b/packages/apps-routing/src/explorer.ts
index 79768c6a7b..ca7fad2128 100644
--- a/packages/apps-routing/src/explorer.ts
+++ b/packages/apps-routing/src/explorer.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import Explorer from '@polkadot/app-explorer';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: Explorer,
     display: {
@@ -14,6 +14,6 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'braille',
     name: 'explorer',
-    text: t('nav.explorer', 'Explorer', { ns: 'apps-routing' })
+    text: t<string>('nav.explorer', 'Explorer', { ns: 'apps-routing' })
   };
 }
diff --git a/packages/apps-routing/src/extrinsics.ts b/packages/apps-routing/src/extrinsics.ts
index 9201030b17..36c72cbb37 100644
--- a/packages/apps-routing/src/extrinsics.ts
+++ b/packages/apps-routing/src/extrinsics.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import Extrinsics from '@polkadot/app-extrinsics';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: Extrinsics,
     display: {
@@ -15,6 +15,6 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'sync',
     name: 'extrinsics',
-    text: t('nav.extrinsics', 'Extrinsics', { ns: 'apps-routing' })
+    text: t<string>('nav.extrinsics', 'Extrinsics', { ns: 'apps-routing' })
   };
 }
diff --git a/packages/apps-routing/src/generic-asset.ts b/packages/apps-routing/src/generic-asset.ts
index e4d5c1e95e..70b59f4997 100644
--- a/packages/apps-routing/src/generic-asset.ts
+++ b/packages/apps-routing/src/generic-asset.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import GenericAsset from '@polkadot/app-generic-asset';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: GenericAsset,
     display: {
@@ -18,6 +18,6 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'cubes',
     name: 'generic-asset',
-    text: t('nav.generic-asset', 'Generic asset', { ns: 'apps-routing' })
+    text: t<string>('nav.generic-asset', 'Generic asset', { ns: 'apps-routing' })
   };
 }
diff --git a/packages/apps-routing/src/i18n.ts b/packages/apps-routing/src/i18n.ts
index d8e8ec5c14..6e752a52b9 100644
--- a/packages/apps-routing/src/i18n.ts
+++ b/packages/apps-routing/src/i18n.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import Translator from '@polkadot/app-i18n';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: Translator,
     display: {
@@ -14,6 +14,6 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'th',
     name: 'i18n',
-    text: t('nav.i18n', 'I18n Translator', { ns: 'apps-routing' })
+    text: t<string>('nav.i18n', 'I18n Translator', { ns: 'apps-routing' })
   };
 }
diff --git a/packages/apps-routing/src/index.ts b/packages/apps-routing/src/index.ts
index e1cad7ebdf..135845ac6f 100644
--- a/packages/apps-routing/src/index.ts
+++ b/packages/apps-routing/src/index.ts
@@ -31,7 +31,7 @@ import toolbox from './toolbox';
 import transfer from './transfer';
 import treasury from './treasury';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Routes {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Routes {
   return appSettings.uiMode === 'light'
     ? [
       // dashboard,
diff --git a/packages/apps-routing/src/js.ts b/packages/apps-routing/src/js.ts
index 7559469481..452e5b0ba7 100644
--- a/packages/apps-routing/src/js.ts
+++ b/packages/apps-routing/src/js.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import Js from '@polkadot/app-js';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: Js,
     display: {
@@ -14,6 +14,6 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'code',
     name: 'js',
-    text: t('nav.js', 'Javascript', { ns: 'apps-routing' })
+    text: t<string>('nav.js', 'Javascript', { ns: 'apps-routing' })
   };
 }
diff --git a/packages/apps-routing/src/parachains.ts b/packages/apps-routing/src/parachains.ts
index 2e26be07b5..f868cd988e 100644
--- a/packages/apps-routing/src/parachains.ts
+++ b/packages/apps-routing/src/parachains.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import Parachains from '@polkadot/app-parachains';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: Parachains,
     display: {
@@ -16,6 +16,6 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'chain',
     name: 'parachains',
-    text: t('nav.parachains', 'Parachains', { ns: 'apps-routing' })
+    text: t<string>('nav.parachains', 'Parachains', { ns: 'apps-routing' })
   };
 }
diff --git a/packages/apps-routing/src/settings.ts b/packages/apps-routing/src/settings.ts
index 7ac3c273ed..705789ebf1 100644
--- a/packages/apps-routing/src/settings.ts
+++ b/packages/apps-routing/src/settings.ts
@@ -6,13 +6,13 @@ import { Route } from './types';
 
 import Settings, { useCounter } from '@polkadot/app-settings';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: Settings,
     display: {},
     icon: 'settings',
     name: 'settings',
-    text: t('nav.settings', 'Settings', { ns: 'apps-routing' }),
+    text: t<string>('nav.settings', 'Settings', { ns: 'apps-routing' }),
     useCounter
   };
 }
diff --git a/packages/apps-routing/src/society.ts b/packages/apps-routing/src/society.ts
index 6dba631dde..8006919d2f 100644
--- a/packages/apps-routing/src/society.ts
+++ b/packages/apps-routing/src/society.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import Society from '@polkadot/app-society';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: Society,
     display: {
@@ -17,6 +17,6 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'grab',
     name: 'society',
-    text: t('nav.society', 'Society', { ns: 'apps-routing' })
+    text: t<string>('nav.society', 'Society', { ns: 'apps-routing' })
   };
 }
diff --git a/packages/apps-routing/src/staking.ts b/packages/apps-routing/src/staking.ts
index 03340fb62e..1aff88861d 100644
--- a/packages/apps-routing/src/staking.ts
+++ b/packages/apps-routing/src/staking.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import Staking from '@polkadot/app-staking';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: Staking,
     display: {
@@ -16,6 +16,6 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'certificate',
     name: 'staking',
-    text: t('nav.staking', 'Staking', { ns: 'apps-routing' })
+    text: t<string>('nav.staking', 'Staking', { ns: 'apps-routing' })
   };
 }
diff --git a/packages/apps-routing/src/storage.ts b/packages/apps-routing/src/storage.ts
index ced0a7b640..a259935eae 100644
--- a/packages/apps-routing/src/storage.ts
+++ b/packages/apps-routing/src/storage.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import Storage from '@polkadot/app-storage';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: Storage,
     display: {
@@ -14,6 +14,6 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'database',
     name: 'chainstate',
-    text: t('nav.storage', 'Chain state', { ns: 'apps-routing' })
+    text: t<string>('nav.storage', 'Chain state', { ns: 'apps-routing' })
   };
 }
diff --git a/packages/apps-routing/src/sudo.ts b/packages/apps-routing/src/sudo.ts
index a5c8266050..cc09008ef1 100644
--- a/packages/apps-routing/src/sudo.ts
+++ b/packages/apps-routing/src/sudo.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import Sudo from '@polkadot/app-sudo';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: Sudo,
     display: {
@@ -18,6 +18,6 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'unlock',
     name: 'sudo',
-    text: t('nav.sudo', 'Sudo', { ns: 'apps-routing' })
+    text: t<string>('nav.sudo', 'Sudo', { ns: 'apps-routing' })
   };
 }
diff --git a/packages/apps-routing/src/techcomm.ts b/packages/apps-routing/src/techcomm.ts
index 6235b18ecd..53e0677471 100644
--- a/packages/apps-routing/src/techcomm.ts
+++ b/packages/apps-routing/src/techcomm.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import TechComm, { useCounter } from '@polkadot/app-tech-comm';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: TechComm,
     display: {
@@ -17,7 +17,7 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'microchip',
     name: 'techcomm',
-    text: t('nav.tech-comm', 'Tech. comm.', { ns: 'apps-routing' }),
+    text: t<string>('nav.tech-comm', 'Tech. comm.', { ns: 'apps-routing' }),
     useCounter
   };
 }
diff --git a/packages/apps-routing/src/toolbox.ts b/packages/apps-routing/src/toolbox.ts
index d75d76073e..b8df520fdf 100644
--- a/packages/apps-routing/src/toolbox.ts
+++ b/packages/apps-routing/src/toolbox.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import Toolbox from '@polkadot/app-toolbox';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: Toolbox,
     display: {
@@ -14,6 +14,6 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'configure',
     name: 'toolbox',
-    text: t('nav.toolbox', 'Toolbox', { ns: 'apps-routing' })
+    text: t<string>('nav.toolbox', 'Toolbox', { ns: 'apps-routing' })
   };
 }
diff --git a/packages/apps-routing/src/transfer.ts b/packages/apps-routing/src/transfer.ts
index 22c85fa7c4..aab0643c7b 100644
--- a/packages/apps-routing/src/transfer.ts
+++ b/packages/apps-routing/src/transfer.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import TransferModal from '@polkadot/app-accounts/Accounts/modals/Transfer';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: TransferModal,
     Modal: TransferModal,
@@ -19,6 +19,6 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'send',
     name: 'transfer',
-    text: t('nav.transfer', 'Transfer', { ns: 'apps-routing' })
+    text: t<string>('nav.transfer', 'Transfer', { ns: 'apps-routing' })
   };
 }
diff --git a/packages/apps-routing/src/treasury.ts b/packages/apps-routing/src/treasury.ts
index f0ba4aa8da..269ec896cd 100644
--- a/packages/apps-routing/src/treasury.ts
+++ b/packages/apps-routing/src/treasury.ts
@@ -6,7 +6,7 @@ import { Route } from './types';
 
 import Treasury, { useCounter } from '@polkadot/app-treasury';
 
-export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {
     Component: Treasury,
     display: {
@@ -16,7 +16,7 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'gem',
     name: 'treasury',
-    text: t('nav.treasury', 'Treasury', { ns: 'apps-routing' }),
+    text: t<string>('nav.treasury', 'Treasury', { ns: 'apps-routing' }),
     useCounter
   };
 }
diff --git a/packages/apps/package.json b/packages/apps/package.json
index 0fa6c0617f..153a8ee678 100644
--- a/packages/apps/package.json
+++ b/packages/apps/package.json
@@ -15,7 +15,7 @@
   "dependencies": {
     "@babel/polyfill": "^7.8.7",
     "@babel/runtime": "^7.9.6",
-    "@polkadot/dev": "^0.53.5",
+    "@polkadot/dev": "^0.54.1",
     "@polkadot/react-components": "0.43.0-beta.2",
     "@polkadot/react-signer": "0.43.0-beta.2",
     "query-string": "^6.12.1"
diff --git a/packages/apps/public/locales/en/app-parachains.json b/packages/apps/public/locales/en/app-parachains.json
index f40c623146..0a5836dac2 100644
--- a/packages/apps/public/locales/en/app-parachains.json
+++ b/packages/apps/public/locales/en/app-parachains.json
@@ -5,6 +5,7 @@
   "Message data": "Message data",
   "Message origin.": "Message origin.",
   "Most recent head data": "Most recent head data",
+  "Not updated in the last block": "Not updated in the last block",
   "Parachains overview": "Parachains overview",
   "Positive number greater than or equal to {{nextFreeId}}": "Positive number greater than or equal to {{nextFreeId}}",
   "Register a parachain": "Register a parachain",
@@ -19,6 +20,7 @@
   "The scheduling setting for this parachain.": "The scheduling setting for this parachain.",
   "There are no registered parachains": "There are no registered parachains",
   "Unknown": "Unknown",
+  "Updated in the latest block": "Updated in the latest block",
   "best block": "best block",
   "code": "code",
   "data": "data",
diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx
index 8bc4869b98..f4de21f05a 100644
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@@ -29,10 +29,10 @@ interface SidebarState {
 export const PORTAL_ID = 'portals';
 
 function saveSidebar (sidebar: SidebarState): SidebarState {
-  return store.set('sidebar', sidebar);
+  return store.set('sidebar', sidebar) as SidebarState;
 }
 
-function Apps ({ className }: Props): React.ReactElement<Props> {
+function Apps ({ className = '' }: Props): React.ReactElement<Props> {
   const { systemChain, systemName } = useApi();
   const [sidebar, setSidebar] = useState<SidebarState>({
     isCollapsed: false,
@@ -75,7 +75,7 @@ function Apps ({ className }: Props): React.ReactElement<Props> {
   return (
     <>
       <GlobalStyle uiHighlight={defaultColor || uiHighlight} />
-      <div className={`apps--Wrapper ${isCollapsed ? 'collapsed' : 'expanded'} ${isMenu && 'fixed'} ${isMenuOpen && 'menu-open'} theme--default ${className}`}>
+      <div className={`apps--Wrapper ${isCollapsed ? 'collapsed' : 'expanded'} ${isMenu ? 'fixed' : ''} ${isMenuOpen ? 'menu-open' : ''} theme--default ${className}`}>
         <div
           className={`apps--Menu-bg ${isMenuOpen ? 'open' : 'closed'}`}
           onClick={_handleResize}
diff --git a/packages/apps/src/Content/NotFound.tsx b/packages/apps/src/Content/NotFound.tsx
index 873ccab3ca..f3addbaa45 100644
--- a/packages/apps/src/Content/NotFound.tsx
+++ b/packages/apps/src/Content/NotFound.tsx
@@ -5,9 +5,7 @@
 import React from 'react';
 import { Redirect } from 'react-router';
 
-type Props = {};
-
-function NotFound (): React.ReactElement<Props> {
+function NotFound (): React.ReactElement {
   return (
     <Redirect to='/explorer' />
   );
diff --git a/packages/apps/src/Content/Status.tsx b/packages/apps/src/Content/Status.tsx
index fdc3689591..9e5a19b2d1 100644
--- a/packages/apps/src/Content/Status.tsx
+++ b/packages/apps/src/Content/Status.tsx
@@ -23,7 +23,7 @@ interface Props {
 
 let prevEventHash: string;
 
-function filterEvents (allAccounts: string[], t: (key: string, opts?: object) => string, optionsAll?: KeyringOptions, events?: EventRecord[]): ActionStatus[] | null {
+function filterEvents (allAccounts: string[], t: <T = string> (key: string, opts?: Record<string, unknown>) => T, optionsAll?: KeyringOptions, events?: EventRecord[]): ActionStatus[] | null {
   const eventHash = xxhashAsHex(stringToU8a(JSON.stringify(events)));
 
   if (!optionsAll || !events || eventHash === prevEventHash) {
@@ -41,7 +41,7 @@ function filterEvents (allAccounts: string[], t: (key: string, opts?: object) =>
           return {
             account,
             action: `${section}.${method}`,
-            message: t('transfer received'),
+            message: t<string>('transfer received'),
             status: 'event'
           };
         }
@@ -50,7 +50,7 @@ function filterEvents (allAccounts: string[], t: (key: string, opts?: object) =>
 
         return {
           action: `${section}.${method}`,
-          message: t('update on #{{index}}', {
+          message: t<string>('update on #{{index}}', {
             replace: {
               index
             }
diff --git a/packages/apps/src/Content/index.tsx b/packages/apps/src/Content/index.tsx
index 09ae1b5a5c..5b74a35331 100644
--- a/packages/apps/src/Content/index.tsx
+++ b/packages/apps/src/Content/index.tsx
@@ -50,7 +50,7 @@ function Content ({ className }: Props): React.ReactElement<Props> {
       {needsApi && (!isApiReady || !isApiConnected)
         ? (
           <div className='connecting'>
-            <Spinner label={t('Initializing connection')} />
+            <Spinner label={t<string>('Initializing connection')} />
           </div>
         )
         : (
diff --git a/packages/apps/src/SideBar/ChainInfo.tsx b/packages/apps/src/SideBar/ChainInfo.tsx
index 8b4ce51f2d..183ba6b469 100644
--- a/packages/apps/src/SideBar/ChainInfo.tsx
+++ b/packages/apps/src/SideBar/ChainInfo.tsx
@@ -17,7 +17,7 @@ interface Props {
   onClick?: () => void;
 }
 
-function ChainInfo ({ className, onClick }: Props): React.ReactElement<Props> {
+function ChainInfo ({ className = '', onClick }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const runtimeVersion = useCall<RuntimeVersion>(api.rpc.state.subscribeRuntimeVersion, []);
@@ -32,7 +32,7 @@ function ChainInfo ({ className, onClick }: Props): React.ReactElement<Props> {
         <div className='info'>
           <Chain className='chain' />
           {runtimeVersion && (
-            <div className='runtimeVersion'>{t('version {{version}}', { replace: { version: runtimeVersion.specVersion.toNumber() } })}</div>
+            <div className='runtimeVersion'>{t<string>('version {{version}}', { replace: { version: runtimeVersion.specVersion.toNumber() } })}</div>
           )}
           <BestNumber label='#' />
         </div>
diff --git a/packages/apps/src/SideBar/Item.tsx b/packages/apps/src/SideBar/Item.tsx
index 5606bf884a..abea7b3355 100644
--- a/packages/apps/src/SideBar/Item.tsx
+++ b/packages/apps/src/SideBar/Item.tsx
@@ -21,7 +21,7 @@ interface Props {
   route: Route;
 }
 
-const disabledLog: Map<string, string> = new Map();
+const disabledLog = new Map<string, string>();
 const TOOLTIP_OFFSET = { right: -4 };
 
 function logDisabled (route: string, message: string): void {
@@ -36,6 +36,7 @@ function hasEndpoint (api: ApiPromise, endpoint: string): boolean {
   const [area, section, method] = endpoint.split('.');
 
   try {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     return isFunction((api as any)[area][section][method]);
   } catch (error) {
     return false;
@@ -66,7 +67,7 @@ function checkVisible (name: string, { api, isApiConnected, isApiReady }: ApiPro
   });
 
   if (notFound.length !== 0) {
-    logDisabled(name, `API not available: ${notFound}`);
+    logDisabled(name, `API not available: ${notFound.toString()}`);
   }
 
   return notFound.length === 0;
diff --git a/packages/apps/src/SideBar/NodeInfo.tsx b/packages/apps/src/SideBar/NodeInfo.tsx
index eb7d640292..787c3a2900 100644
--- a/packages/apps/src/SideBar/NodeInfo.tsx
+++ b/packages/apps/src/SideBar/NodeInfo.tsx
@@ -10,7 +10,7 @@ import { useApi } from '@polkadot/react-hooks';
 import { NodeName, NodeVersion } from '@polkadot/react-query';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const pkgJson = require('../../package.json');
+const pkgJson = require('../../package.json') as { version: string };
 
 const uiInfo = `apps v${pkgJson.version}`;
 
diff --git a/packages/apps/src/SideBar/index.tsx b/packages/apps/src/SideBar/index.tsx
index 3fc06a30d3..523bd4c2ba 100644
--- a/packages/apps/src/SideBar/index.tsx
+++ b/packages/apps/src/SideBar/index.tsx
@@ -9,7 +9,6 @@ import styled from 'styled-components';
 import { Responsive } from 'semantic-ui-react';
 import createRoutes from '@polkadot/apps-routing';
 import { Button, ChainImg, Icon, Menu, media } from '@polkadot/react-components';
-import { classes } from '@polkadot/react-components/util';
 
 import { SIDEBAR_MENU_THRESHOLD } from '../constants';
 import NetworkModal from '../modals/Network';
@@ -27,7 +26,7 @@ interface Props {
   toggleMenu: () => void;
 }
 
-function SideBar ({ className, collapse, handleResize, isCollapsed, isMenuOpen, toggleMenu }: Props): React.ReactElement<Props> {
+function SideBar ({ className = '', collapse, handleResize, isCollapsed, isMenuOpen, toggleMenu }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [modals, setModals] = useState<Record<string, boolean>>(
     createRoutes(t).reduce((result: Record<string, boolean>, route): Record<string, boolean> => {
@@ -55,7 +54,7 @@ function SideBar ({ className, collapse, handleResize, isCollapsed, isMenuOpen,
 
   return (
     <Responsive
-      className={classes(className, 'apps--SideBar-Wrapper', isCollapsed ? 'collapsed' : 'expanded')}
+      className={`apps--SideBar-Wrapper ${className} ${isCollapsed ? 'collapsed' : 'expanded'}`}
       onUpdate={handleResize}
     >
       <ChainImg
@@ -113,7 +112,7 @@ function SideBar ({ className, collapse, handleResize, isCollapsed, isMenuOpen,
                 rel='noopener noreferrer'
                 target='_blank'
               >
-                <Icon name='github' /><span className='text'>{t('nav.github', 'GitHub', { ns: 'apps-routing' })}</span>
+                <Icon name='github' /><span className='text'>{t<string>('nav.github', 'GitHub', { ns: 'apps-routing' })}</span>
               </a>
             </Menu.Item>
             <Menu.Item className='apps--SideBar-Item'>
@@ -123,7 +122,7 @@ function SideBar ({ className, collapse, handleResize, isCollapsed, isMenuOpen,
                 rel='noopener noreferrer'
                 target='_blank'
               >
-                <Icon name='book' /><span className='text'>{t('nav.wiki', 'Wiki', { ns: 'apps-routing' })}</span>
+                <Icon name='book' /><span className='text'>{t<string>('nav.wiki', 'Wiki', { ns: 'apps-routing' })}</span>
               </a>
             </Menu.Item>
             <Menu.Divider hidden />
diff --git a/packages/apps/src/WarmUp.tsx b/packages/apps/src/WarmUp.tsx
index 345c89e6a0..d35fa5118a 100644
--- a/packages/apps/src/WarmUp.tsx
+++ b/packages/apps/src/WarmUp.tsx
@@ -19,7 +19,7 @@ function WarmUp (): React.ReactElement {
   }, []);
 
   return (
-    <div className={`apps--api-warm ${hasValues}`} />
+    <div className={`apps--api-warm ${hasValues.toString()}`} />
   );
 }
 
diff --git a/packages/apps/src/initSettings.ts b/packages/apps/src/initSettings.ts
index 92deb2859f..86d6ca1ffc 100644
--- a/packages/apps/src/initSettings.ts
+++ b/packages/apps/src/initSettings.ts
@@ -12,13 +12,13 @@ import settings from '@polkadot/ui-settings';
 //  - http://localhost:3000/?rpc=wss://substrate-rpc.parity.io/#/explorer
 //  - http://localhost:3000/#/explorer?rpc=wss://substrate-rpc.parity.io
 const urlOptions = queryString.parse(location.href.split('?')[1]);
-const stored = store.get('settings') || {};
+const stored = store.get('settings') as Record<string, unknown> || {};
 
 if (Array.isArray(urlOptions.rpc)) {
   throw new Error('Invalid WS endpoint specified');
 }
 
-const fallbackUrl = createEndpoints(() => '').find(({ value }) => !!value) || { value: 'ws://127.0.0.1:9944' };
+const fallbackUrl = createEndpoints(<T = string>(): T => ('' as unknown as T)).find(({ value }) => !!value) || { value: 'ws://127.0.0.1:9944' };
 const apiUrl = urlOptions.rpc // we have a supplied value
   ? urlOptions.rpc.split('#')[0] // https://polkadot.js.org/apps/?rpc=ws://127.0.0.1:9944#/explorer
   : [stored.apiUrl, process.env.WS_URL].includes(settings.apiUrl) // overridden, or stored
@@ -31,7 +31,7 @@ settings.set({ apiUrl });
 console.log('WS endpoint=', apiUrl);
 
 try {
-  const types = store.get('types') || {};
+  const types = store.get('types') as Record<string, Record<string, string>> || {};
   const names = Object.keys(types);
 
   if (names.length) {
diff --git a/packages/apps/src/modals/Network.tsx b/packages/apps/src/modals/Network.tsx
index f35d74e7d5..7e1a2ed169 100644
--- a/packages/apps/src/modals/Network.tsx
+++ b/packages/apps/src/modals/Network.tsx
@@ -13,13 +13,13 @@ interface Props {
   onClose: () => void;
 }
 
-function NetworkModal ({ className, onClose }: Props): React.ReactElement<Props> {
+function NetworkModal ({ className = '', onClose }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
     <Modal
       className={className}
-      header={t('Select Network')}
+      header={t<string>('Select Network')}
       size='large'
     >
       <Modal.Content>
diff --git a/packages/apps/src/overlays/Base.tsx b/packages/apps/src/overlays/Base.tsx
index 7cbb8d8104..5c3b6bdf9e 100644
--- a/packages/apps/src/overlays/Base.tsx
+++ b/packages/apps/src/overlays/Base.tsx
@@ -14,7 +14,7 @@ interface Props {
   type: 'error' | 'info';
 }
 
-function BaseOverlay ({ children, className, icon, type }: Props): React.ReactElement<Props> | null {
+function BaseOverlay ({ children, className = '', icon, type }: Props): React.ReactElement<Props> | null {
   const [isHidden, toggleHidden] = useToggle();
 
   if (isHidden) {
@@ -26,7 +26,7 @@ function BaseOverlay ({ children, className, icon, type }: Props): React.ReactEl
       <div className='content'>
         <Icon
           className='contentIcon'
-          name={icon as any}
+          name={icon as 'send'}
           size='big'
         />
         <div className='contentItem'>
diff --git a/packages/apps/src/overlays/Connecting.tsx b/packages/apps/src/overlays/Connecting.tsx
index 4b3b18ab99..c377b237cb 100644
--- a/packages/apps/src/overlays/Connecting.tsx
+++ b/packages/apps/src/overlays/Connecting.tsx
@@ -29,7 +29,7 @@ function Connecting ({ className }: Props): React.ReactElement<Props> | null {
         icon='puzzle'
         type='info'
       >
-        <div>{t('Waiting for authorization from the extension. Please open the installed extension and approve or reject access.')}</div>
+        <div>{t<string>('Waiting for authorization from the extension. Please open the installed extension and approve or reject access.')}</div>
       </BaseOverlay>
     );
   } else if (!isApiConnected) {
@@ -39,10 +39,10 @@ function Connecting ({ className }: Props): React.ReactElement<Props> | null {
         icon='globe'
         type='error'
       >
-        <div>{t('You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.')}</div>
+        <div>{t<string>('You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.')}</div>
         {
           isWs && !isWsLocal && isHttps
-            ? <div>{t('You are connecting from a secure location to an insecure WebSocket ({{wsUrl}}). Due to browser mixed-content security policies this connection type is not allowed. Change the RPC service to a secure \'wss\' endpoint.', { replace: { wsUrl } })}</div>
+            ? <div>{t<string>('You are connecting from a secure location to an insecure WebSocket ({{wsUrl}}). Due to browser mixed-content security policies this connection type is not allowed. Change the RPC service to a secure \'wss\' endpoint.', { replace: { wsUrl } })}</div>
             : undefined
         }
       </BaseOverlay>
diff --git a/packages/apps/webpack.base.config.js b/packages/apps/webpack.base.config.js
index 7399a8ddf9..2d4a305926 100644
--- a/packages/apps/webpack.base.config.js
+++ b/packages/apps/webpack.base.config.js
@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-/* eslint-disable @typescript-eslint/camelcase */
+/* eslint-disable camelcase */
 
 const fs = require('fs');
 const path = require('path');
diff --git a/packages/apps/webpack.config.js b/packages/apps/webpack.config.js
index 4373911542..ca9daaf0ac 100644
--- a/packages/apps/webpack.config.js
+++ b/packages/apps/webpack.config.js
@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-/* eslint-disable @typescript-eslint/camelcase */
+/* eslint-disable camelcase */
 
 const fs = require('fs');
 const path = require('path');
diff --git a/packages/page-123code/src/AccountSelector.tsx b/packages/page-123code/src/AccountSelector.tsx
index eb1ad90340..f007e51f28 100644
--- a/packages/page-123code/src/AccountSelector.tsx
+++ b/packages/page-123code/src/AccountSelector.tsx
@@ -15,7 +15,7 @@ interface Props {
   onChange: (accountId: string | null) => void;
 }
 
-function AccountSelector ({ className, onChange }: Props): React.ReactElement<Props> {
+function AccountSelector ({ className = '', onChange }: Props): React.ReactElement<Props> {
   const [accountId, setAccountId] = useState<string | null>(null);
 
   useEffect(
diff --git a/packages/page-123code/src/Summary.tsx b/packages/page-123code/src/Summary.tsx
index 8bc14b5bfc..b9eb198cc5 100644
--- a/packages/page-123code/src/Summary.tsx
+++ b/packages/page-123code/src/Summary.tsx
@@ -11,12 +11,9 @@ interface Props extends BareProps {
   children: React.ReactNode;
 }
 
-function Summary ({ children, className, style }: Props): React.ReactElement<Props> {
+function Summary ({ children, className = '' }: Props): React.ReactElement<Props> {
   return (
-    <div
-      className={className}
-      style={style}
-    >
+    <div className={className}>
       {children}
     </div>
   );
diff --git a/packages/page-accounts/package.json b/packages/page-accounts/package.json
index feab032168..096aa69cea 100644
--- a/packages/page-accounts/package.json
+++ b/packages/page-accounts/package.json
@@ -13,8 +13,8 @@
   "dependencies": {
     "@babel/runtime": "^7.9.6",
     "@polkadot/react-components": "0.43.0-beta.2",
-    "@polkadot/react-qr": "^0.54.0-beta.1",
-    "@polkadot/vanitygen": "^0.12.1",
+    "@polkadot/react-qr": "^0.54.0-beta.2",
+    "@polkadot/vanitygen": "^0.13.0-beta.0",
     "detect-browser": "^5.1.0",
     "file-saver": "^2.0.2"
   }
diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx
index c988b42838..f1b34be5ec 100644
--- a/packages/page-accounts/src/Accounts/Account.tsx
+++ b/packages/page-accounts/src/Accounts/Account.tsx
@@ -61,7 +61,7 @@ function createClearDemocracyTx (api: ApiPromise, address: string, unlockableIds
   );
 }
 
-function Account ({ account: { address, meta }, className, filter, isFavorite, setBalance, toggleFavorite }: Props): React.ReactElement<Props> | null {
+function Account ({ account: { address, meta }, className = '', filter, isFavorite, setBalance, toggleFavorite }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { queueExtrinsic } = useContext(StatusContext);
   const api = useApi();
@@ -140,10 +140,10 @@ function Account ({ account: { address, meta }, className, filter, isFavorite, s
       try {
         keyring.forgetAccount(address);
         status.status = 'success';
-        status.message = t('account forgotten');
+        status.message = t<string>('account forgotten');
       } catch (error) {
         status.status = 'error';
-        status.message = error.message;
+        status.message = (error as Error).message;
       }
     },
     [address, t]
@@ -174,7 +174,7 @@ function Account ({ account: { address, meta }, className, filter, isFavorite, s
       getLedger()
         .getAddress(true)
         .catch((error): void => {
-          console.error(`ledger: ${error.message}`);
+          console.error(`ledger: ${(error as Error).message}`);
         });
     },
     []
@@ -188,7 +188,7 @@ function Account ({ account: { address, meta }, className, filter, isFavorite, s
     <tr className={className}>
       <td className='favorite'>
         <Icon
-          className={`${isFavorite && 'isSelected isColorHighlight'}`}
+          className={`${isFavorite ? 'isSelected isColorHighlight' : ''}`}
           name={isFavorite ? 'star' : 'star outline'}
           onClick={_onFavorite}
         />
@@ -198,7 +198,7 @@ function Account ({ account: { address, meta }, className, filter, isFavorite, s
           <Badge
             hover={
               <div>
-                <p>{t('This account is recoverable, with the following friends:')}</p>
+                <p>{t<string>('This account is recoverable, with the following friends:')}</p>
                 <div>
                   {recoveryInfo.friends.map((friend, index): React.ReactNode => (
                     <IdentityIcon
@@ -210,15 +210,15 @@ function Account ({ account: { address, meta }, className, filter, isFavorite, s
                 <table>
                   <tbody>
                     <tr>
-                      <td>{t('threshold')}</td>
+                      <td>{t<string>('threshold')}</td>
                       <td>{formatNumber(recoveryInfo.threshold)}</td>
                     </tr>
                     <tr>
-                      <td>{t('delay')}</td>
+                      <td>{t<string>('delay')}</td>
                       <td>{formatNumber(recoveryInfo.delayPeriod)}</td>
                     </tr>
                     <tr>
-                      <td>{t('deposit')}</td>
+                      <td>{t<string>('deposit')}</td>
                       <td>{formatBalance(recoveryInfo.deposit)}</td>
                     </tr>
                   </tbody>
@@ -283,8 +283,8 @@ function Account ({ account: { address, meta }, className, filter, isFavorite, s
             key='multisig-approve'
             onClose={_closeMultisig}
             ongoing={multiInfos}
-            threshold={meta.threshold}
-            who={meta.who}
+            threshold={meta.threshold as number}
+            who={meta.who as string[]}
           />
         )}
         {isRecoverAccountOpen && (
@@ -334,9 +334,9 @@ function Account ({ account: { address, meta }, className, filter, isFavorite, s
       <td className='button'>
         <Button
           icon='paper plane'
-          label={t('send')}
+          label={t<string>('send')}
           onClick={toggleTransfer}
-          tooltip={t('Send funds from this account')}
+          tooltip={t<string>('Send funds from this account')}
         />
         <Popup
           className='theme--default'
@@ -358,25 +358,25 @@ function Account ({ account: { address, meta }, className, filter, isFavorite, s
               disabled={!api.api.tx.identity?.setIdentity}
               onClick={toggleIdentity}
             >
-              {t('Set on-chain identity')}
+              {t<string>('Set on-chain identity')}
             </Menu.Item>
             <Menu.Item
               disabled={!democracyUnlockTx}
               onClick={_clearDemocracyLocks}
             >
-              {t('Clear expired democracy locks')}
+              {t<string>('Clear expired democracy locks')}
             </Menu.Item>
             <Menu.Divider />
             <Menu.Item
               disabled={isExternal || isInjected || isMultisig}
               onClick={toggleDerive}
             >
-              {t('Derive account via derivation path')}
+              {t<string>('Derive account via derivation path')}
             </Menu.Item>
             {isHardware && (
               <Menu.Item onClick={_showOnHardware}
               >
-                {t('Show address on hardware device')}
+                {t<string>('Show address on hardware device')}
               </Menu.Item>
             )}
             <Menu.Divider />
@@ -384,7 +384,7 @@ function Account ({ account: { address, meta }, className, filter, isFavorite, s
               disabled={isExternal || isInjected || isMultisig || isDevelopment}
               onClick={toggleBackup}
             >
-              {t('Create a backup file for this account')}
+              {t<string>('Create a backup file for this account')}
             </Menu.Item>
             <Menu.Item
               disabled={isExternal || isInjected || isMultisig || isDevelopment}
@@ -396,18 +396,18 @@ function Account ({ account: { address, meta }, className, filter, isFavorite, s
               disabled={isInjected || isDevelopment}
               onClick={toggleForget}
             >
-              {t('Forget this account')}
+              {t<string>('Forget this account')}
             </Menu.Item>
             {api.api.tx.recovery?.createRecovery && (
               <>
                 <Menu.Divider />
                 {!recoveryInfo && (
                   <Menu.Item onClick={toggleRecoverSetup}>
-                    {t('Make recoverable')}
+                    {t<string>('Make recoverable')}
                   </Menu.Item>
                 )}
                 <Menu.Item onClick={toggleRecoverAccount}>
-                  {t('Initiate recovery for another')}
+                  {t<string>('Initiate recovery for another')}
                 </Menu.Item>
               </>
             )}
@@ -418,7 +418,7 @@ function Account ({ account: { address, meta }, className, filter, isFavorite, s
                   disabled={!multiInfos || !multiInfos.length}
                   onClick={toggleMultisig}
                 >
-                  {t('Multisig approvals')}
+                  {t<string>('Multisig approvals')}
                 </Menu.Item>
               </>
             )}
diff --git a/packages/page-accounts/src/Accounts/Banner.tsx b/packages/page-accounts/src/Accounts/Banner.tsx
index 712e8d8877..4c123c5227 100644
--- a/packages/page-accounts/src/Accounts/Banner.tsx
+++ b/packages/page-accounts/src/Accounts/Banner.tsx
@@ -33,7 +33,7 @@ function Banner ({ className }: Props): React.ReactElement<Props> | null {
     <div className={className}>
       <div className='box'>
         <div className='info'>
-          <p>{t('It is recommended that you create/store your accounts securely and externally from the app. On {{yourBrowser}} the following browser extensions are available for use -', {
+          <p>{t<string>('It is recommended that you create/store your accounts securely and externally from the app. On {{yourBrowser}} the following browser extensions are available for use -', {
             replace: {
               yourBrowser: stringUpperFirst(browserName)
             }
@@ -50,11 +50,11 @@ function Banner ({ className }: Props): React.ReactElement<Props> | null {
             </li>
           ))
           }</ul>
-          <p>{t('Accounts injected from any of these extensions will appear in this application and be available for use. The above list is updated as more extensions with external signing capability become available.')}&nbsp;<a
+          <p>{t<string>('Accounts injected from any of these extensions will appear in this application and be available for use. The above list is updated as more extensions with external signing capability become available.')}&nbsp;<a
             href='https://github.com/polkadot-js/extension'
             rel='noopener noreferrer'
             target='_blank'
-          >{t('Learn more...')}</a></p>
+          >{t<string>('Learn more...')}</a></p>
         </div>
       </div>
     </div>
diff --git a/packages/page-accounts/src/Accounts/index.tsx b/packages/page-accounts/src/Accounts/index.tsx
index 3fedb60589..8befeed704 100644
--- a/packages/page-accounts/src/Accounts/index.tsx
+++ b/packages/page-accounts/src/Accounts/index.tsx
@@ -91,7 +91,7 @@ function sortAccounts (addresses: string[], favorites: string[]): SortedAccount[
     );
 }
 
-function Overview ({ className, onStatusChange }: Props): React.ReactElement<Props> {
+function Overview ({ className = '', onStatusChange }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const { allAccounts } = useAccounts();
@@ -150,7 +150,7 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
       <Input
         autoFocus
         isFull
-        label={t('filter by name or tags')}
+        label={t<string>('filter by name or tags')}
         onChange={setFilter}
         value={filterOn}
       />
@@ -188,25 +188,25 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
         <Button
           icon='add'
           isDisabled={isIpfs}
-          label={t('Add account')}
+          label={t<string>('Add account')}
           onClick={toggleCreate}
         />
         <Button
           icon='sync'
           isDisabled={isIpfs}
-          label={t('Restore JSON')}
+          label={t<string>('Restore JSON')}
           onClick={toggleImport}
         />
         <Button
           icon='qrcode'
-          label={t('Add via Qr')}
+          label={t<string>('Add via Qr')}
           onClick={toggleQr}
         />
         {isLedger() && (
           <>
             <Button
               icon='question'
-              label={t('Query Ledger')}
+              label={t<string>('Query Ledger')}
               onClick={queryLedger}
             />
           </>
@@ -214,12 +214,12 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
         <Button
           icon='add'
           isDisabled={!api.tx.utility}
-          label={t('Multisig')}
+          label={t<string>('Multisig')}
           onClick={toggleMultisig}
         />
       </Button.Group>
       <Table
-        empty={t("You don't have any accounts. Some features are currently hidden and will only become available once you have accounts.")}
+        empty={t<string>("You don't have any accounts. Some features are currently hidden and will only become available once you have accounts.")}
         filter={filter}
         footer={footer}
         header={header}
diff --git a/packages/page-accounts/src/Accounts/modals/Backup.tsx b/packages/page-accounts/src/Accounts/modals/Backup.tsx
index 87e8502b48..e750c6e32f 100644
--- a/packages/page-accounts/src/Accounts/modals/Backup.tsx
+++ b/packages/page-accounts/src/Accounts/modals/Backup.tsx
@@ -69,7 +69,7 @@ function Backup ({ address, onClose }: Props): React.ReactElement<Props> {
   return (
     <Modal
       className='app--accounts-Modal'
-      header={t('Backup account')}
+      header={t<string>('Backup account')}
     >
       <Content
         address={address}
@@ -83,7 +83,7 @@ function Backup ({ address, onClose }: Props): React.ReactElement<Props> {
         <Button
           icon='download'
           isDisabled={!isPassValid}
-          label={t('Download')}
+          label={t<string>('Download')}
           onClick={_doBackup}
         />
       </Modal.Actions>
@@ -100,14 +100,14 @@ function Content ({ address, doBackup, isPassTouched, isPassValid, onChangePass,
         isInline
         value={address}
       >
-        <p>{t('An encrypted backup file will be created once you have pressed the "Download" button. This can be used to re-import your account on any other machine.')}</p>
-        <p>{t('Save this backup file in a secure location. Additionally, the password associated with this account is needed together with this backup file in order to restore your account.')}</p>
+        <p>{t<string>('An encrypted backup file will be created once you have pressed the "Download" button. This can be used to re-import your account on any other machine.')}</p>
+        <p>{t<string>('Save this backup file in a secure location. Additionally, the password associated with this account is needed together with this backup file in order to restore your account.')}</p>
         <div>
           <Password
             autoFocus
-            help={t('The account password as specified when creating the account. This is used to encrypt the backup file and subsequently decrypt it when restoring the account.')}
+            help={t<string>('The account password as specified when creating the account. This is used to encrypt the backup file and subsequently decrypt it when restoring the account.')}
             isError={isPassTouched && !isPassValid}
-            label={t('password')}
+            label={t<string>('password')}
             onChange={onChangePass}
             onEnter={doBackup}
             tabIndex={0}
diff --git a/packages/page-accounts/src/Accounts/modals/ChangePass.tsx b/packages/page-accounts/src/Accounts/modals/ChangePass.tsx
index 68613009ce..3417a6b61c 100644
--- a/packages/page-accounts/src/Accounts/modals/ChangePass.tsx
+++ b/packages/page-accounts/src/Accounts/modals/ChangePass.tsx
@@ -24,7 +24,7 @@ interface OldPass {
   oldPass: string;
 }
 
-function ChangePass ({ address, className, onClose }: Props): React.ReactElement<Props> {
+function ChangePass ({ address, className = '', onClose }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [{ isNewValid, newPass }, setNewPass] = useState<NewPass>({ isNewValid: false, newPass: '' });
   const [{ isOldValid, oldPass }, setOldPass] = useState<OldPass>({ isOldValid: false, oldPass: '' });
@@ -77,28 +77,28 @@ function ChangePass ({ address, className, onClose }: Props): React.ReactElement
   return (
     <Modal
       className={`${className} app--accounts-Modal`}
-      header={t('Change account password')}
+      header={t<string>('Change account password')}
     >
       <Modal.Content>
         <AddressRow
           isInline
           value={address}
         >
-          <p>{t('This will apply to any future use of this account as stored on this browser. Ensure that you securely store this new password and that it is strong and unique to the account.')}</p>
+          <p>{t<string>('This will apply to any future use of this account as stored on this browser. Ensure that you securely store this new password and that it is strong and unique to the account.')}</p>
           <div>
             <Password
               autoFocus
-              help={t('The existing account password as specified when this account was created or when it was last changed.')}
+              help={t<string>('The existing account password as specified when this account was created or when it was last changed.')}
               isError={!isOldValid}
-              label={t('your current password')}
+              label={t<string>('your current password')}
               onChange={_onChangeOld}
               tabIndex={1}
               value={oldPass}
             />
             <Password
-              help={t('The new account password. Once set, all future account unlocks will be performed with this new password.')}
+              help={t<string>('The new account password. Once set, all future account unlocks will be performed with this new password.')}
               isError={!isNewValid}
-              label={t('your new password')}
+              label={t<string>('your new password')}
               onChange={_onChangeNew}
               onEnter={_doChange}
               tabIndex={2}
@@ -112,7 +112,7 @@ function ChangePass ({ address, className, onClose }: Props): React.ReactElement
           icon='sign-in'
           isDisabled={!isNewValid || !isOldValid}
           isPrimary
-          label={t('Change')}
+          label={t<string>('Change')}
           onClick={_doChange}
         />
       </Modal.Actions>
diff --git a/packages/page-accounts/src/Accounts/modals/Create.tsx b/packages/page-accounts/src/Accounts/modals/Create.tsx
index 2edc7e76dd..9bbcf7a816 100644
--- a/packages/page-accounts/src/Accounts/modals/Create.tsx
+++ b/packages/page-accounts/src/Accounts/modals/Create.tsx
@@ -56,7 +56,7 @@ function deriveValidate (seed: string, derivePath: string, pairType: KeypairType
       return 'Soft derivation paths are not allowed on ed25519';
     }
   } catch (error) {
-    return error.message;
+    return (error as Error).message;
   }
 
   return null;
@@ -150,13 +150,13 @@ function createAccount (suri: string, pairType: KeypairType, { genesisHash, name
     downloadAccount(result);
   } catch (error) {
     status.status = 'error';
-    status.message = error.message;
+    status.message = (error as Error).message;
   }
 
   return status;
 }
 
-function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: propsType }: Props): React.ReactElement<Props> {
+function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, type: propsType }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api, isDevelopment } = useApi();
   const [{ address, deriveError, derivePath, isSeedValid, pairType, seed, seedType }, setAddress] = useState<AddressState>(generateSeed(propsSeed, '', propsSeed ? 'raw' : 'bip', propsType));
@@ -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
-      ? [{ text: t('Development'), value: 'dev' }]
+      ? [{ text: t<string>('Development'), value: 'dev' }]
       : []
   ).concat(
-    { text: t('Mnemonic'), value: 'bip' },
-    { text: t('Raw seed'), value: 'raw' }
+    { text: t<string>('Mnemonic'), value: 'bip' },
+    { text: t<string>('Raw seed'), value: 'raw' }
   ), [isDevelopment, t]);
 
   const _onChangePass = useCallback(
@@ -220,7 +220,7 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
       }
 
       const options = { genesisHash: isDevelopment ? undefined : api.genesisHash.toString(), name: name.trim() };
-      const status = createAccount(`${seed}${derivePath}`, pairType, options, password, t('created account'));
+      const status = createAccount(`${seed}${derivePath}`, pairType, options, password, t<string>('created account'));
 
       toggleConfirmation();
       onStatusChange(status);
@@ -232,7 +232,7 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
   return (
     <Modal
       className={className}
-      header={t('Add an account via seed')}
+      header={t<string>('Add an account via seed')}
       size='large'
     >
       {address && isConfirmationOpen && (
@@ -258,33 +258,33 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
             <Input
               autoFocus
               className='full'
-              help={t('Name given to this account. You can edit it. To use the account to validate or nominate, it is a good practice to append the function of the account in the name, e.g "name_you_want - stash".')}
+              help={t<string>('Name given to this account. You can edit it. To use the account to validate or nominate, it is a good practice to append the function of the account in the name, e.g "name_you_want - stash".')}
               isError={!isNameValid}
-              label={t('name')}
+              label={t<string>('name')}
               onChange={_onChangeName}
               onEnter={_onCommit}
-              placeholder={t('new account')}
+              placeholder={t<string>('new account')}
               value={name}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The name for this account and how it will appear under your addresses. With an on-chain identity, it can be made available to others.')}</p>
+            <p>{t<string>('The name for this account and how it will appear under your addresses. With an on-chain identity, it can be made available to others.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Modal.Columns>
           <Modal.Column>
             <Input
               className='full'
-              help={t('The private key for your account is derived from this seed. This seed must be kept secret as anyone in its possession has access to the funds of this account. If you validate, use the seed of the session account as the "--key" parameter of your node.')}
+              help={t<string>('The private key for your account is derived from this seed. This seed must be kept secret as anyone in its possession has access to the funds of this account. If you validate, use the seed of the session account as the "--key" parameter of your node.')}
               isAction
               isError={!isSeedValid}
               isReadOnly={seedType === 'dev'}
               label={
                 seedType === 'bip'
-                  ? t('mnemonic seed')
+                  ? t<string>('mnemonic seed')
                   : seedType === 'dev'
-                    ? t('development seed')
-                    : t('seed (hex or string)')
+                    ? t<string>('development seed')
+                    : t<string>('seed (hex or string)')
               }
               onChange={_onChangeSeed}
               onEnter={_onCommit}
@@ -299,66 +299,66 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
             </Input>
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The secret seed value for this account. Ensure that you keep this in a safe place, with access to the seed you can re-create the account.')}</p>
+            <p>{t<string>('The secret seed value for this account. Ensure that you keep this in a safe place, with access to the seed you can re-create the account.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Modal.Columns>
           <Modal.Column>
             <Password
               className='full'
-              help={t('This password is used to encrypt your private key. It must be strong and unique! You will need it to sign transactions with this account. You can recover this account using this password together with the backup file (generated in the next step).')}
+              help={t<string>('This password is used to encrypt your private key. It must be strong and unique! You will need it to sign transactions with this account. You can recover this account using this password together with the backup file (generated in the next step).')}
               isError={!isPassValid}
-              label={t('password')}
+              label={t<string>('password')}
               onChange={_onChangePass}
               onEnter={_onCommit}
               value={password}
             />
             <Password
               className='full'
-              help={t('Verify the password entered above.')}
+              help={t<string>('Verify the password entered above.')}
               isError={!isPass2Valid}
-              label={t('password (repeat)')}
+              label={t<string>('password (repeat)')}
               onChange={_onChangePass2}
               onEnter={_onCommit}
               value={password2}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The password and password confirmation for this account. This is required to authenticate any transactions made and to encrypt the keypair.')}</p>
+            <p>{t<string>('The password and password confirmation for this account. This is required to authenticate any transactions made and to encrypt the keypair.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Expander
           className='accounts--Creator-advanced'
           isOpen
-          summary={t('Advanced creation options')}
+          summary={t<string>('Advanced creation options')}
         >
           <Modal.Columns>
             <Modal.Column>
               <Dropdown
                 defaultValue={pairType}
-                help={t('Determines what cryptography will be used to create this account. Note that to validate on Polkadot, the session account must use "ed25519".')}
-                label={t('keypair crypto type')}
+                help={t<string>('Determines what cryptography will be used to create this account. Note that to validate on Polkadot, the session account must use "ed25519".')}
+                label={t<string>('keypair crypto type')}
                 onChange={_onChangePairType}
                 options={uiSettings.availableCryptos}
               />
             </Modal.Column>
             <Modal.Column>
-              <p>{t('If you are moving accounts between applications, ensure that you use the correct type.')}</p>
+              <p>{t<string>('If you are moving accounts between applications, ensure that you use the correct type.')}</p>
             </Modal.Column>
           </Modal.Columns>
           <Modal.Columns>
             <Modal.Column>
               <Input
                 className='full'
-                help={t('You can set a custom derivation path for this account using the following syntax "/<soft-key>//<hard-key>///<password>". The "/<soft-key>" and "//<hard-key>" may be repeated and mixed`. The "///password" is optional and should only occur once.')}
+                help={t<string>('You can set a custom derivation path for this account using the following syntax "/<soft-key>//<hard-key>///<password>". The "/<soft-key>" and "//<hard-key>" may be repeated and mixed`. The "///password" is optional and should only occur once.')}
                 isError={!!deriveError}
-                label={t('secret derivation path')}
+                label={t<string>('secret derivation path')}
                 onChange={_onChangeDerive}
                 onEnter={_onCommit}
                 placeholder={
                   pairType === 'sr25519'
-                    ? t('//hard/soft///password')
-                    : t('//hard///password')
+                    ? t<string>('//hard/soft///password')
+                    : t<string>('//hard///password')
                 }
                 value={derivePath}
               />
@@ -367,7 +367,7 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
               )}
             </Modal.Column>
             <Modal.Column>
-              <p>{t('The derivation path allows you to create different accounts from the same base mnemonic.')}</p>
+              <p>{t<string>('The derivation path allows you to create different accounts from the same base mnemonic.')}</p>
             </Modal.Column>
           </Modal.Columns>
         </Expander>
@@ -377,7 +377,7 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
           icon='plus'
           isDisabled={!isValid}
           isPrimary
-          label={t('Save')}
+          label={t<string>('Save')}
           onClick={toggleConfirmation}
         />
       </Modal.Actions>
diff --git a/packages/page-accounts/src/Accounts/modals/CreateConfirmation.tsx b/packages/page-accounts/src/Accounts/modals/CreateConfirmation.tsx
index 0b4c9a447e..8e47437e01 100644
--- a/packages/page-accounts/src/Accounts/modals/CreateConfirmation.tsx
+++ b/packages/page-accounts/src/Accounts/modals/CreateConfirmation.tsx
@@ -18,7 +18,7 @@ function CreateConfirmation ({ address, name, onClose, onCommit }: Props): React
   const { t } = useTranslation();
 
   return (
-    <Modal header={t('Important notice')}>
+    <Modal header={t<string>('Important notice')}>
       <Modal.Content>
         <AddressRow
           defaultName={name}
@@ -26,15 +26,15 @@ function CreateConfirmation ({ address, name, onClose, onCommit }: Props): React
           noDefaultNameOpacity
           value={address}
         >
-          <p>{t('We will provide you with a generated backup file after your account is created. As long as you have access to your account you can always download this file later by clicking on "Backup" button from the Accounts section.')}</p>
-          <p>{t('Please make sure to save this file in a secure location as it is required, together with your password, to restore your account.')}</p>
+          <p>{t<string>('We will provide you with a generated backup file after your account is created. As long as you have access to your account you can always download this file later by clicking on "Backup" button from the Accounts section.')}</p>
+          <p>{t<string>('Please make sure to save this file in a secure location as it is required, together with your password, to restore your account.')}</p>
         </AddressRow>
       </Modal.Content>
       <Modal.Actions onCancel={onClose}>
         <Button
           icon='plus'
           isPrimary
-          label={t('Create and backup account')}
+          label={t<string>('Create and backup account')}
           onClick={onCommit}
         />
       </Modal.Actions>
diff --git a/packages/page-accounts/src/Accounts/modals/Derive.tsx b/packages/page-accounts/src/Accounts/modals/Derive.tsx
index 7c31948dc9..6fdf1bf0d0 100644
--- a/packages/page-accounts/src/Accounts/modals/Derive.tsx
+++ b/packages/page-accounts/src/Accounts/modals/Derive.tsx
@@ -36,7 +36,7 @@ function deriveValidate (suri: string, pairType: KeypairType): string | null {
       return 'Soft derivation paths are not allowed on ed25519';
     }
   } catch (error) {
-    return error.message;
+    return (error as Error).message;
   }
 
   return null;
@@ -61,13 +61,13 @@ function createAccount (source: KeyringPair, suri: string, name: string, passwor
     downloadAccount(result);
   } catch (error) {
     status.status = 'error';
-    status.message = error.message;
+    status.message = (error as Error).message;
   }
 
   return status;
 }
 
-function Derive ({ className, from, onClose }: Props): React.ReactElement {
+function Derive ({ className = '', from, onClose }: Props): React.ReactElement {
   const { t } = useTranslation();
   const { queueAction } = useContext(StatusContext);
   const [source] = useState(keyring.getPair(from));
@@ -135,7 +135,7 @@ function Derive ({ className, from, onClose }: Props): React.ReactElement {
         return;
       }
 
-      const status = createAccount(source, suri, name, password, t('created account'));
+      const status = createAccount(source, suri, name, password, t<string>('created account'));
 
       toggleConfirmation();
       queueAction(status);
@@ -146,9 +146,9 @@ function Derive ({ className, from, onClose }: Props): React.ReactElement {
 
   const sourceStatic = (
     <InputAddress
-      help={t('The selected account to perform the derivation on.')}
+      help={t<string>('The selected account to perform the derivation on.')}
       isDisabled
-      label={t('derive root account')}
+      label={t<string>('derive root account')}
       value={from}
     />
   );
@@ -156,7 +156,7 @@ function Derive ({ className, from, onClose }: Props): React.ReactElement {
   return (
     <Modal
       className={className}
-      header={t('Derive account from pair')}
+      header={t<string>('Derive account from pair')}
     >
       {address && isConfirmationOpen && (
         <CreateConfirmation
@@ -172,8 +172,8 @@ function Derive ({ className, from, onClose }: Props): React.ReactElement {
             {sourceStatic}
             <Password
               autoFocus
-              help={t('The password to unlock the selected account.')}
-              label={t('password')}
+              help={t<string>('The password to unlock the selected account.')}
+              label={t<string>('password')}
               onChange={setRootPass}
               value={rootPass}
             />
@@ -188,35 +188,35 @@ function Derive ({ className, from, onClose }: Props): React.ReactElement {
             {sourceStatic}
             <Input
               autoFocus
-              help={t('You can set a custom derivation path for this account using the following syntax "/<soft-key>//<hard-key>///<password>". The "/<soft-key>" and "//<hard-key>" may be repeated and mixed`. The "///password" is optional and should only occur once.')}
-              label={t('derivation path')}
+              help={t<string>('You can set a custom derivation path for this account using the following syntax "/<soft-key>//<hard-key>///<password>". The "/<soft-key>" and "//<hard-key>" may be repeated and mixed`. The "///password" is optional and should only occur once.')}
+              label={t<string>('derivation path')}
               onChange={setSuri}
-              placeholder={t('//hard/soft')}
+              placeholder={t<string>('//hard/soft')}
             />
             <Input
               className='full'
-              help={t('Name given to this account. You can edit it. To use the account to validate or nominate, it is a good practice to append the function of the account in the name, e.g "name_you_want - stash".')}
+              help={t<string>('Name given to this account. You can edit it. To use the account to validate or nominate, it is a good practice to append the function of the account in the name, e.g "name_you_want - stash".')}
               isError={!isNameValid}
-              label={t('name')}
+              label={t<string>('name')}
               onChange={_onChangeName}
               onEnter={_onCommit}
-              placeholder={t('new account')}
+              placeholder={t<string>('new account')}
               value={name}
             />
             <Password
               className='full'
-              help={t('This password is used to encrypt your private key. It must be strong and unique! You will need it to sign transactions with this account. You can recover this account using this password together with the backup file (generated in the next step).')}
+              help={t<string>('This password is used to encrypt your private key. It must be strong and unique! You will need it to sign transactions with this account. You can recover this account using this password together with the backup file (generated in the next step).')}
               isError={!isPassValid}
-              label={t('password')}
+              label={t<string>('password')}
               onChange={_onChangePass}
               onEnter={_onCommit}
               value={password}
             />
             <Password
               className='full'
-              help={t('Verify the password entered above.')}
+              help={t<string>('Verify the password entered above.')}
               isError={!isPass2Valid}
-              label={t('password (repeat)')}
+              label={t<string>('password (repeat)')}
               onChange={_onChangePass2}
               onEnter={_onCommit}
               value={password2}
@@ -231,7 +231,7 @@ function Derive ({ className, from, onClose }: Props): React.ReactElement {
               icon='lock'
               isDisabled={!rootPass}
               isPrimary
-              label={t('Unlock')}
+              label={t<string>('Unlock')}
               onClick={_onUnlock}
             />
           )
@@ -240,7 +240,7 @@ function Derive ({ className, from, onClose }: Props): React.ReactElement {
               icon='plus'
               isDisabled={!isValid}
               isPrimary
-              label={t('Save')}
+              label={t<string>('Save')}
               onClick={toggleConfirmation}
             />
           )
diff --git a/packages/page-accounts/src/Accounts/modals/Identity.tsx b/packages/page-accounts/src/Accounts/modals/Identity.tsx
index 8af0499ff5..1522deb48a 100644
--- a/packages/page-accounts/src/Accounts/modals/Identity.tsx
+++ b/packages/page-accounts/src/Accounts/modals/Identity.tsx
@@ -43,8 +43,8 @@ function WrapToggle ({ children, onChange, value }: WrapProps): React.ReactEleme
         className='toggle-Toggle'
         label={
           value
-            ? t('include value')
-            : t('exclude value')
+            ? t<string>('include value')
+            : t<string>('exclude value')
         }
         onChange={onChange}
         value={value}
@@ -53,11 +53,11 @@ function WrapToggle ({ children, onChange, value }: WrapProps): React.ReactEleme
   );
 }
 
-function Identity ({ address, className, onClose }: Props): React.ReactElement<Props> {
+function Identity ({ address, className = '', onClose }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const identityOpt = useCall<Option<Registration>>(api.query.identity.identityOf, [address]);
-  const [info, setInfo] = useState<any>({});
+  const [info, setInfo] = useState<Record<string, any>>({});
   const [hasEmail, setHasEmail] = useState(false);
   // const [hasImg, setHasImg] = useState(false);
   const [hasLegal, setHasLegal] = useState(false);
@@ -104,13 +104,13 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
   return (
     <Modal
       className={className}
-      header={t('Register identity')}
+      header={t<string>('Register identity')}
     >
       <Modal.Content>
         <Input
           autoFocus
-          help={t('The name that will be displayed in your accounts list.')}
-          label={t('display name')}
+          help={t<string>('The name that will be displayed in your accounts list.')}
+          label={t<string>('display name')}
           maxLength={32}
           onChange={setValDisplay}
           value={valDisplay}
@@ -120,9 +120,9 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
           value={hasLegal}
         >
           <Input
-            help={t('The legal name for this identity.')}
+            help={t<string>('The legal name for this identity.')}
             isDisabled={!hasLegal}
-            label={t('legal name')}
+            label={t<string>('legal name')}
             maxLength={32}
             onChange={setValLegal}
             value={hasLegal ? valLegal : '<none>'}
@@ -133,9 +133,9 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
           value={hasEmail}
         >
           <Input
-            help={t('The email address associated with this identity.')}
+            help={t<string>('The email address associated with this identity.')}
             isDisabled={!hasEmail}
-            label={t('email')}
+            label={t<string>('email')}
             maxLength={32}
             onChange={setValEmail}
             value={hasEmail ? valEmail : '<none>'}
@@ -146,9 +146,9 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
           value={hasWeb}
         >
           <Input
-            help={t('An URL that is linked to this identity.')}
+            help={t<string>('An URL that is linked to this identity.')}
             isDisabled={!hasWeb}
-            label={t('web')}
+            label={t<string>('web')}
             maxLength={32}
             onChange={setValWeb}
             value={hasWeb ? valWeb : '<none>'}
@@ -159,9 +159,9 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
           value={hasTwitter}
         >
           <Input
-            help={t('The twitter name for this identity.')}
+            help={t<string>('The twitter name for this identity.')}
             isDisabled={!hasTwitter}
-            label={t('twitter')}
+            label={t<string>('twitter')}
             onChange={setValTwitter}
             value={hasTwitter ? valTwitter : '<none>'}
           />
@@ -171,9 +171,9 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
           value={hasRiot}
         >
           <Input
-            help={t('a riot name linked to this identity')}
+            help={t<string>('a riot name linked to this identity')}
             isDisabled={!hasRiot}
-            label={t('riot name')}
+            label={t<string>('riot name')}
             maxLength={32}
             onChange={setValRiot}
             value={hasRiot ? valRiot : '<none>'}
@@ -186,9 +186,9 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
           <Input
             isDisabled={!hasImg}
             isError={hasImg && errImg}
-            label={t('sha2 image hash')}
+            label={t<string>('sha2 image hash')}
             onChange={_onChangeImg}
-            placeholder={t('0x...')}
+            placeholder={t<string>('0x...')}
             maxLength={66}
             value={hasImg ? valImg : '<none>'}
           />
@@ -200,9 +200,9 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
           <Input
             isDisabled={!hasPgp}
             isError={hasPgp && errPgp}
-            label={t('pgp hash')}
+            label={t<string>('pgp hash')}
             onChange={_onChangePgp}
-            placeholder={t('0x...')}
+            placeholder={t<string>('0x...')}
             maxLength={42}
             value={hasPgp ? valPgp : '<none>'}
           />
@@ -213,7 +213,7 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
           accountId={address}
           icon='send'
           isPrimary
-          label={t('Set Identity')}
+          label={t<string>('Set Identity')}
           onStart={onClose}
           params={[info]}
           tx='identity.setIdentity'
diff --git a/packages/page-accounts/src/Accounts/modals/Import.tsx b/packages/page-accounts/src/Accounts/modals/Import.tsx
index 280d3e9e2c..d0601b7869 100644
--- a/packages/page-accounts/src/Accounts/modals/Import.tsx
+++ b/packages/page-accounts/src/Accounts/modals/Import.tsx
@@ -32,7 +32,7 @@ const acceptedFormats = ['application/json', 'text/plain'].join(', ');
 
 function parseFile (file: Uint8Array): FileState {
   try {
-    const json = JSON.parse(u8aToString(file));
+    const json = JSON.parse(u8aToString(file)) as KeyringPair$Json;
     const publicKey = keyring.decodeAddress(json.address, true);
     const address = keyring.encodeAddress(publicKey);
     const isFileValid = publicKey.length === 32 && isHex(json.encoded) && isObject(json.meta) && (
@@ -49,7 +49,7 @@ function parseFile (file: Uint8Array): FileState {
   return { address: null, isFileValid: false, json: null };
 }
 
-function Import ({ className, onClose, onStatusChange }: Props): React.ReactElement<Props> {
+function Import ({ className = '', onClose, onStatusChange }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [{ address, isFileValid, json }, setFile] = useState<FileState>({ address: null, isFileValid: false, json: null });
   const [{ isPassValid, password }, setPass] = useState<PassState>({ isPassValid: false, password: '' });
@@ -80,14 +80,14 @@ function Import ({ className, onClose, onStatusChange }: Props): React.ReactElem
 
         status.status = pair ? 'success' : 'error';
         status.account = address;
-        status.message = t('account restored');
+        status.message = t<string>('account restored');
 
         InputAddress.setLastValue('account', address);
       } catch (error) {
         setPass((state: PassState) => ({ ...state, isPassValid: false }));
 
         status.status = 'error';
-        status.message = error.message;
+        status.message = (error as Error).message;
         console.error(error);
       }
 
@@ -103,14 +103,14 @@ function Import ({ className, onClose, onStatusChange }: Props): React.ReactElem
   return (
     <Modal
       className={className}
-      header={t('Add via backup file')}
+      header={t<string>('Add via backup file')}
       size='large'
     >
       <Modal.Content>
         <Modal.Columns>
           <Modal.Column>
             <AddressRow
-              defaultName={isFileValid && json ? json.meta.name : null}
+              defaultName={(isFileValid && json?.meta.name as string) || null}
               noDefaultNameOpacity
               value={isFileValid && address ? address : null}
             />
@@ -121,15 +121,15 @@ function Import ({ className, onClose, onStatusChange }: Props): React.ReactElem
             <InputFile
               accept={acceptedFormats}
               className='full'
-              help={t('Select the JSON key file that was downloaded when you created the account. This JSON file contains your private key encrypted with your password.')}
+              help={t<string>('Select the JSON key file that was downloaded when you created the account. This JSON file contains your private key encrypted with your password.')}
               isError={!isFileValid}
-              label={t('backup file')}
+              label={t<string>('backup file')}
               onChange={_onChangeFile}
               withLabel
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('Supply a backed-up JSON file, encrypted with your account-specific password.')}</p>
+            <p>{t<string>('Supply a backed-up JSON file, encrypted with your account-specific password.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Modal.Columns>
@@ -137,16 +137,16 @@ function Import ({ className, onClose, onStatusChange }: Props): React.ReactElem
             <Password
               autoFocus
               className='full'
-              help={t('Type the password chosen at the account creation. It was used to encrypt your account\'s private key in the backup file.')}
+              help={t<string>('Type the password chosen at the account creation. It was used to encrypt your account\'s private key in the backup file.')}
               isError={!isPassValid}
-              label={t('password')}
+              label={t<string>('password')}
               onChange={_onChangePass}
               onEnter={_onSave}
               value={password}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The password previously used to encrypt this account.')}</p>
+            <p>{t<string>('The password previously used to encrypt this account.')}</p>
           </Modal.Column>
         </Modal.Columns>
       </Modal.Content>
@@ -155,7 +155,7 @@ function Import ({ className, onClose, onStatusChange }: Props): React.ReactElem
           icon='sync'
           isDisabled={!isFileValid || !isPassValid}
           isPrimary
-          label={t('Restore')}
+          label={t<string>('Restore')}
           onClick={_onSave}
         />
       </Modal.Actions>
diff --git a/packages/page-accounts/src/Accounts/modals/MultisigApprove.tsx b/packages/page-accounts/src/Accounts/modals/MultisigApprove.tsx
index ee5859d8a2..fd1cc2b964 100644
--- a/packages/page-accounts/src/Accounts/modals/MultisigApprove.tsx
+++ b/packages/page-accounts/src/Accounts/modals/MultisigApprove.tsx
@@ -23,7 +23,7 @@ interface Option {
   value: string;
 }
 
-function MultisigApprove ({ className, onClose, ongoing, threshold, who }: Props): React.ReactElement<Props> {
+function MultisigApprove ({ className = '', onClose, ongoing, threshold, who }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [hash, setHash] = useState<string | null>(ongoing[0][0].toHex());
   const [multisig, setMultisig] = useState<[H256, Multisig] | null>(null);
@@ -31,8 +31,8 @@ function MultisigApprove ({ className, onClose, ongoing, threshold, who }: Props
   const [type, setType] = useState<string | null>('aye');
   const calltypes = useMemo<Option[]>(
     () => [
-      { text: t('Approve this call hash'), value: 'aye' },
-      { text: t('Cancel this call hash'), value: 'nay' }
+      { text: t<string>('Approve this call hash'), value: 'aye' },
+      { text: t<string>('Cancel this call hash'), value: 'nay' }
     ],
     [t]
   );
@@ -50,25 +50,25 @@ function MultisigApprove ({ className, onClose, ongoing, threshold, who }: Props
   return (
     <Modal
       className={className}
-      header={t('Pending call hashes')}
+      header={t<string>('Pending call hashes')}
     >
       <Modal.Content>
         <InputAddress
           filter={who}
-          help={t('The signatory to send the approval/cancel from')}
-          label={t('signatory')}
+          help={t<string>('The signatory to send the approval/cancel from')}
+          label={t<string>('signatory')}
           onChange={setSignatory}
         />
         <Dropdown
-          help={t('The call hashes that have not been executed as of yet.')}
-          label={t('pending hashes')}
+          help={t<string>('The call hashes that have not been executed as of yet.')}
+          label={t<string>('pending hashes')}
           onChange={setHash}
           options={hashes}
           value={hash}
         />
         <Dropdown
-          help={t('Either approve or reject this call.')}
-          label={t('approval type')}
+          help={t<string>('Either approve or reject this call.')}
+          label={t<string>('approval type')}
           onChange={setType}
           options={calltypes}
           value={type}
diff --git a/packages/page-accounts/src/Accounts/modals/MultisigCreate.tsx b/packages/page-accounts/src/Accounts/modals/MultisigCreate.tsx
index dfafed1e3a..b2d5927fd5 100644
--- a/packages/page-accounts/src/Accounts/modals/MultisigCreate.tsx
+++ b/packages/page-accounts/src/Accounts/modals/MultisigCreate.tsx
@@ -40,13 +40,13 @@ function createAccount (signatories: string[], threshold: BN | number, { genesis
     status.message = success;
   } catch (error) {
     status.status = 'error';
-    status.message = error.message;
+    status.message = (error as Error).message;
   }
 
   return status;
 }
 
-function Multisig ({ className, onClose, onStatusChange }: Props): React.ReactElement<Props> {
+function Multisig ({ className = '', onClose, onStatusChange }: Props): React.ReactElement<Props> {
   const { api, isDevelopment } = useApi();
   const { t } = useTranslation();
   const availableSignatories = useKnownAddresses();
@@ -57,7 +57,7 @@ function Multisig ({ className, onClose, onStatusChange }: Props): React.ReactEl
   const _createMultisig = useCallback(
     (): void => {
       const options = { genesisHash: isDevelopment ? undefined : api.genesisHash.toString(), name: name.trim() };
-      const status = createAccount(signatories, threshold, options, t('created multisig'));
+      const status = createAccount(signatories, threshold, options, t<string>('created multisig'));
 
       onStatusChange(status);
       onClose();
@@ -81,7 +81,7 @@ function Multisig ({ className, onClose, onStatusChange }: Props): React.ReactEl
   return (
     <Modal
       className={className}
-      header={t('Add multisig')}
+      header={t<string>('Add multisig')}
       size='large'
     >
       <Modal.Content>
@@ -90,45 +90,45 @@ function Multisig ({ className, onClose, onStatusChange }: Props): React.ReactEl
             <Input
               autoFocus
               className='full'
-              help={t('Name given to this multisig. You can edit it at any later point in time.')}
+              help={t<string>('Name given to this multisig. You can edit it at any later point in time.')}
               isError={!isNameValid}
-              label={t('name')}
+              label={t<string>('name')}
               onChange={_onChangeName}
-              placeholder={t('multisig name')}
+              placeholder={t<string>('multisig name')}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The name is for unique identification of the account in your owner lists.')}</p>
+            <p>{t<string>('The name is for unique identification of the account in your owner lists.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Modal.Columns>
           <Modal.Column>
             <InputAddressMulti
               available={availableSignatories}
-              availableLabel={t('available signatories')}
-              help={t('The addresses that are able to approve multisig transactions. You can select up to {{maxHelpers}} trusted addresses.', { replace: { maxHelpers: MAX_SIGNATORIES } })}
+              availableLabel={t<string>('available signatories')}
+              help={t<string>('The addresses that are able to approve multisig transactions. You can select up to {{maxHelpers}} trusted addresses.', { replace: { maxHelpers: MAX_SIGNATORIES } })}
               maxCount={MAX_SIGNATORIES}
               onChange={setSignatories}
               value={signatories}
-              valueLabel={t('selected signatories')}
+              valueLabel={t<string>('selected signatories')}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The signatories has the ability to create transactions using the multisig and approve transactions sent by others.Once the threshold is reached with approvals, the multisig transaction is enacted on-chain.')}</p>
-            <p>{t('Since the multisig function like any other account, once created it is available for selection anywhere accounts are used and needs to be funded before use.')}</p>
+            <p>{t<string>('The signatories has the ability to create transactions using the multisig and approve transactions sent by others.Once the threshold is reached with approvals, the multisig transaction is enacted on-chain.')}</p>
+            <p>{t<string>('Since the multisig function like any other account, once created it is available for selection anywhere accounts are used and needs to be funded before use.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Modal.Columns>
           <Modal.Column>
             <InputNumber
-              help={t('The threshold for this multisig')}
+              help={t<string>('The threshold for this multisig')}
               isError={!isThresholdValid}
-              label={t('threshold')}
+              label={t<string>('threshold')}
               onChange={_onChangeThreshold}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The threshold for approval should be less or equal to the number of signatories for this multisig.')}</p>
+            <p>{t<string>('The threshold for approval should be less or equal to the number of signatories for this multisig.')}</p>
           </Modal.Column>
         </Modal.Columns>
       </Modal.Content>
@@ -137,7 +137,7 @@ function Multisig ({ className, onClose, onStatusChange }: Props): React.ReactEl
           icon='plus'
           isDisabled={!isValid}
           isPrimary
-          label={t('Create')}
+          label={t<string>('Create')}
           onClick={_createMultisig}
         />
       </Modal.Actions>
diff --git a/packages/page-accounts/src/Accounts/modals/Qr.tsx b/packages/page-accounts/src/Accounts/modals/Qr.tsx
index 8350dd6d28..e1b8f54351 100644
--- a/packages/page-accounts/src/Accounts/modals/Qr.tsx
+++ b/packages/page-accounts/src/Accounts/modals/Qr.tsx
@@ -22,7 +22,7 @@ interface Props extends ModalProps {
   className?: string;
 }
 
-function QrModal ({ className, onClose, onStatusChange }: Props): React.ReactElement<Props> {
+function QrModal ({ className = '', onClose, onStatusChange }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [{ isNameValid, name }, setName] = useState({ isNameValid: false, name: '' });
   const [scanned, setScanned] = useState<Scanned | null>(null);
@@ -57,7 +57,7 @@ function QrModal ({ className, onClose, onStatusChange }: Props): React.ReactEle
       onStatusChange({
         account: address,
         action: 'create',
-        message: t('created account'),
+        message: t<string>('created account'),
         status: 'success'
       });
       onClose();
@@ -68,7 +68,7 @@ function QrModal ({ className, onClose, onStatusChange }: Props): React.ReactEle
   return (
     <Modal
       className={className}
-      header={t('Add account via Qr')}
+      header={t<string>('Add account via Qr')}
       size='large'
     >
       <Modal.Content>
@@ -89,16 +89,16 @@ function QrModal ({ className, onClose, onStatusChange }: Props): React.ReactEle
                   <Input
                     autoFocus
                     className='full'
-                    help={t('Name given to this account. You can change it at any point in the future.')}
+                    help={t<string>('Name given to this account. You can change it at any point in the future.')}
                     isError={!isNameValid}
-                    label={t('name')}
+                    label={t<string>('name')}
                     onChange={_onNameChange}
                     onEnter={_onSave}
                     value={name}
                   />
                 </Modal.Column>
                 <Modal.Column>
-                  <p>{t('The local name for this account. Changing this does not affect your on-line identity, so this is only used to indicate the name of the account locally.')}</p>
+                  <p>{t<string>('The local name for this account. Changing this does not affect your on-line identity, so this is only used to indicate the name of the account locally.')}</p>
                 </Modal.Column>
               </Modal.Columns>
             </>
@@ -111,7 +111,7 @@ function QrModal ({ className, onClose, onStatusChange }: Props): React.ReactEle
                 </div>
               </Modal.Column>
               <Modal.Column>
-                <p>{t('Provide the account QR from the module/external application for scanning. One detected as valid, you will be taken to the next step to add the account to your list.')}</p>
+                <p>{t<string>('Provide the account QR from the module/external application for scanning. One detected as valid, you will be taken to the next step to add the account to your list.')}</p>
               </Modal.Column>
             </Modal.Columns>
           )
@@ -122,7 +122,7 @@ function QrModal ({ className, onClose, onStatusChange }: Props): React.ReactEle
           icon='sign-in'
           isDisabled={!scanned || !isNameValid}
           isPrimary
-          label={t('Create')}
+          label={t<string>('Create')}
           onClick={_onSave}
         />
       </Modal.Actions>
diff --git a/packages/page-accounts/src/Accounts/modals/RecoverAccount.tsx b/packages/page-accounts/src/Accounts/modals/RecoverAccount.tsx
index 97f5258db6..f3b0027c8f 100644
--- a/packages/page-accounts/src/Accounts/modals/RecoverAccount.tsx
+++ b/packages/page-accounts/src/Accounts/modals/RecoverAccount.tsx
@@ -13,24 +13,24 @@ interface Props {
   onClose: () => void;
 }
 
-function RecoverAccount ({ address, className, onClose }: Props): React.ReactElement {
+function RecoverAccount ({ address, className = '', onClose }: Props): React.ReactElement {
   const { t } = useTranslation();
   const [recover, setRecover] = useState<string | null>(null);
 
   return (
     <Modal
       className={className}
-      header={t('Initiate account recovery')}
+      header={t<string>('Initiate account recovery')}
     >
       <Modal.Content>
         <InputAddress
           isDisabled
-          label={t('the account to recover to')}
+          label={t<string>('the account to recover to')}
           value={address}
         />
         <InputAddress
-          help={t('Select the account you wish to recover into this account.')}
-          label={t('recover this account')}
+          help={t<string>('Select the account you wish to recover into this account.')}
+          label={t<string>('recover this account')}
           onChange={setRecover}
           type='allPlus'
         />
@@ -40,7 +40,7 @@ function RecoverAccount ({ address, className, onClose }: Props): React.ReactEle
           accountId={address}
           icon='recycle'
           isDisabled={!recover || recover === address}
-          label={t('Start recovery')}
+          label={t<string>('Start recovery')}
           onStart={onClose}
           params={[recover]}
           tx='recovery.initiateRecovery'
diff --git a/packages/page-accounts/src/Accounts/modals/RecoverSetup.tsx b/packages/page-accounts/src/Accounts/modals/RecoverSetup.tsx
index 35a6ade97d..2046c4798d 100644
--- a/packages/page-accounts/src/Accounts/modals/RecoverSetup.tsx
+++ b/packages/page-accounts/src/Accounts/modals/RecoverSetup.tsx
@@ -17,7 +17,7 @@ interface Props {
 
 const MAX_HELPERS = 16;
 
-function RecoverSetup ({ address, className, onClose }: Props): React.ReactElement {
+function RecoverSetup ({ address, className = '', onClose }: Props): React.ReactElement {
   const { t } = useTranslation();
   const availableHelpers = useKnownAddresses(address);
   const [delay, setDelay] = useState<BN | undefined>();
@@ -31,7 +31,7 @@ function RecoverSetup ({ address, className, onClose }: Props): React.ReactEleme
   return (
     <Modal
       className={className}
-      header={t('Setup account as recoverable')}
+      header={t<string>('Setup account as recoverable')}
       size='large'
     >
       <Modal.Content>
@@ -39,49 +39,49 @@ function RecoverSetup ({ address, className, onClose }: Props): React.ReactEleme
           <Modal.Column>
             <InputAddress
               isDisabled
-              label={t('the account to make recoverable')}
+              label={t<string>('the account to make recoverable')}
               value={address}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The recoverable account is protected against the loss of seed/access by a social process.')}</p>
+            <p>{t<string>('The recoverable account is protected against the loss of seed/access by a social process.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Modal.Columns>
           <Modal.Column>
             <InputAddressMulti
               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 } })}
+              availableLabel={t<string>('available social recovery helpers')}
+              help={t<string>('The addresses that are able to help in recovery. You can select up to {{maxHelpers}} trusted helpers.', { replace: { maxHelpers: MAX_HELPERS } })}
               maxCount={MAX_HELPERS}
               onChange={setHelpers}
               value={helpers}
-              valueLabel={t('trusted social recovery helpers')}
+              valueLabel={t<string>('trusted social recovery helpers')}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('These are trusted individuals that can verify and approve any recovery actions. With recovery, once the threshold is reached, the funds associated with the account can be moved to a new destination.')}</p>
-            <p>{t('The helpers should be able to verify, via an off-chain mechanism, that the account owner indeed wishes to recover access and as such provide any approvals. In the cases of malicious recovery procedures, they will have the power to stop it.')}</p>
+            <p>{t<string>('These are trusted individuals that can verify and approve any recovery actions. With recovery, once the threshold is reached, the funds associated with the account can be moved to a new destination.')}</p>
+            <p>{t<string>('The helpers should be able to verify, via an off-chain mechanism, that the account owner indeed wishes to recover access and as such provide any approvals. In the cases of malicious recovery procedures, they will have the power to stop it.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Modal.Columns>
           <Modal.Column>
             <InputNumber
-              help={t('The threshold of vouches that is to be reached for the account to be recovered.')}
+              help={t<string>('The threshold of vouches that is to be reached for the account to be recovered.')}
               isError={isErrorThreshold}
-              label={t('recovery threshold')}
+              label={t<string>('recovery threshold')}
               onChange={setThreshold}
             />
             <InputNumber
-              help={t('The delay between vouching and the availability of the recovered account.')}
+              help={t<string>('The delay between vouching and the availability of the recovered account.')}
               isError={isErrorDelay}
               isZeroable
-              label={t('recovery block delay')}
+              label={t<string>('recovery block delay')}
               onChange={setDelay}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The threshold for approvals and the delay is the protection associated with the account. The delay should be such that any colluding recovery attempts does have a window to stop.')}</p>
+            <p>{t<string>('The threshold for approvals and the delay is the protection associated with the account. The delay should be such that any colluding recovery attempts does have a window to stop.')}</p>
           </Modal.Column>
         </Modal.Columns>
       </Modal.Content>
@@ -90,7 +90,7 @@ function RecoverSetup ({ address, className, onClose }: Props): React.ReactEleme
           accountId={address}
           icon='share alternate'
           isDisabled={isErrorHelpers || isErrorThreshold || isErrorDelay}
-          label={t('Make recoverable')}
+          label={t<string>('Make recoverable')}
           onStart={onClose}
           params={[helpers, threshold, delay]}
           tx='recovery.createRecovery'
diff --git a/packages/page-accounts/src/Accounts/modals/Transfer.tsx b/packages/page-accounts/src/Accounts/modals/Transfer.tsx
index 3be206c97f..14244b63ea 100644
--- a/packages/page-accounts/src/Accounts/modals/Transfer.tsx
+++ b/packages/page-accounts/src/Accounts/modals/Transfer.tsx
@@ -18,7 +18,7 @@ interface Props {
   senderId?: string;
 }
 
-function Transfer ({ className, onClose, recipientId: propRecipientId, senderId: propSenderId }: Props): React.ReactElement<Props> {
+function Transfer ({ className = '', onClose, recipientId: propRecipientId, senderId: propSenderId }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const [amount, setAmount] = useState<BN | undefined>(new BN(0));
@@ -27,12 +27,12 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
   const [recipientId, setRecipientId] = useState<string | null>(propRecipientId || null);
   const [senderId, setSenderId] = useState<string | null>(propSenderId || null);
 
-  const transferrable = <span className='label'>{t('transferrable')}</span>;
+  const transferrable = <span className='label'>{t<string>('transferrable')}</span>;
 
   return (
     <Modal
       className='app--accounts-Modal'
-      header={t('Send funds')}
+      header={t<string>('Send funds')}
       size='large'
     >
       <Modal.Content>
@@ -41,9 +41,9 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
             <Modal.Column>
               <InputAddress
                 defaultValue={propSenderId}
-                help={t('The account you will send funds from.')}
+                help={t<string>('The account you will send funds from.')}
                 isDisabled={!!propSenderId}
-                label={t('send from account')}
+                label={t<string>('send from account')}
                 labelExtra={
                   <Available
                     label={transferrable}
@@ -55,16 +55,16 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
               />
             </Modal.Column>
             <Modal.Column>
-              <p>{t('The transferred balance will be subtracted (along with fees) from the sender account.')}</p>
+              <p>{t<string>('The transferred balance will be subtracted (along with fees) from the sender account.')}</p>
             </Modal.Column>
           </Modal.Columns>
           <Modal.Columns>
             <Modal.Column>
               <InputAddress
                 defaultValue={propRecipientId}
-                help={t('Select a contact or paste the address you want to send funds to.')}
+                help={t<string>('Select a contact or paste the address you want to send funds to.')}
                 isDisabled={!!propRecipientId}
-                label={t('send to address')}
+                label={t<string>('send to address')}
                 labelExtra={
                   <Available
                     label={transferrable}
@@ -76,30 +76,30 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
               />
             </Modal.Column>
             <Modal.Column>
-              <p>{t('The beneficiary will have access to the transferred fees when the transaction is included in a block.')}</p>
+              <p>{t<string>('The beneficiary will have access to the transferred fees when the transaction is included in a block.')}</p>
             </Modal.Column>
           </Modal.Columns>
           <Modal.Columns>
             <Modal.Column>
               <InputBalance
                 autoFocus
-                help={t('Type the amount you want to transfer. Note that you can select the unit on the right e.g sending 1 milli is equivalent to sending 0.001.')}
+                help={t<string>('Type the amount you want to transfer. Note that you can select the unit on the right e.g sending 1 milli is equivalent to sending 0.001.')}
                 isError={!hasAvailable}
                 isZeroable
-                label={t('amount')}
+                label={t<string>('amount')}
                 maxValue={maxBalance}
                 onChange={setAmount}
                 withMax
               />
               <InputBalance
                 defaultValue={api.consts.balances.existentialDeposit}
-                help={t('The minimum amount that an account should have to be deemed active')}
+                help={t<string>('The minimum amount that an account should have to be deemed active')}
                 isDisabled
-                label={t('existential deposit')}
+                label={t<string>('existential deposit')}
               />
             </Modal.Column>
             <Modal.Column>
-              <p>{t('If the recipient account is new, the balance needs to be more than the existential deposit. Likewise if the sending account balance drops below the same value, the account will be removed from the state.')}</p>
+              <p>{t<string>('If the recipient account is new, the balance needs to be more than the existential deposit. Likewise if the sending account balance drops below the same value, the account will be removed from the state.')}</p>
             </Modal.Column>
           </Modal.Columns>
         </div>
@@ -110,7 +110,7 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
           icon='send'
           isDisabled={!hasAvailable || !recipientId || !amount}
           isPrimary
-          label={t('Make Transfer')}
+          label={t<string>('Make Transfer')}
           onStart={onClose}
           params={[recipientId, amount]}
           tx='balances.transfer'
diff --git a/packages/page-accounts/src/Contacts/Address.tsx b/packages/page-accounts/src/Contacts/Address.tsx
index 4736e23d18..5798626e14 100644
--- a/packages/page-accounts/src/Contacts/Address.tsx
+++ b/packages/page-accounts/src/Contacts/Address.tsx
@@ -28,7 +28,7 @@ const WITH_BALANCE = { available: true, bonded: true, free: true, locked: true,
 
 const isEditable = true;
 
-function Address ({ address, className, filter, isFavorite, toggleFavorite }: Props): React.ReactElement<Props> | null {
+function Address ({ address, className = '', filter, isFavorite, toggleFavorite }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const api = useApi();
   const info = useCall<DeriveAccountInfo>(api.api.derive.accounts.info, [address]);
@@ -70,7 +70,7 @@ function Address ({ address, className, filter, isFavorite, toggleFavorite }: Pr
   useEffect((): void => {
     const account = keyring.getAddress(address);
 
-    _setTags(account?.meta?.tags || []);
+    _setTags(account?.meta?.tags as string[] || []);
     setAccName(account?.meta?.name || '');
   }, [_setTags, address]);
 
@@ -132,10 +132,10 @@ function Address ({ address, className, filter, isFavorite, toggleFavorite }: Pr
         try {
           keyring.forgetAddress(address);
           status.status = 'success';
-          status.message = t('address forgotten');
+          status.message = t<string>('address forgotten');
         } catch (error) {
           status.status = 'error';
-          status.message = error.message;
+          status.message = (error as Error).message;
         }
       }
     },
@@ -150,7 +150,7 @@ function Address ({ address, className, filter, isFavorite, toggleFavorite }: Pr
     <tr className={className}>
       <td className='favorite'>
         <Icon
-          className={`${isFavorite && 'isSelected isColorHighlight'}`}
+          className={`${isFavorite ? 'isSelected isColorHighlight' : ''}`}
           name={isFavorite ? 'star' : 'star outline'}
           onClick={_onFavorite}
         />
@@ -203,9 +203,9 @@ function Address ({ address, className, filter, isFavorite, toggleFavorite }: Pr
         <Button
           icon='paper plane'
           key='deposit'
-          label={t('deposit')}
+          label={t<string>('deposit')}
           onClick={_toggleTransfer}
-          tooltip={t('Send funds to this address')}
+          tooltip={t<string>('Send funds to this address')}
         />
         <Popup
           className='theme--default'
@@ -227,7 +227,7 @@ function Address ({ address, className, filter, isFavorite, toggleFavorite }: Pr
               disabled={!isEditable}
               onClick={_toggleForget}
             >
-              {t('Forget this address')}
+              {t<string>('Forget this address')}
             </Menu.Item>
             {!api.isDevelopment && (
               <>
diff --git a/packages/page-accounts/src/Contacts/index.tsx b/packages/page-accounts/src/Contacts/index.tsx
index 56fce36efd..ca5e5c631e 100644
--- a/packages/page-accounts/src/Contacts/index.tsx
+++ b/packages/page-accounts/src/Contacts/index.tsx
@@ -17,7 +17,7 @@ type SortedAddress = { address: string; isFavorite: boolean };
 
 const STORE_FAVS = 'accounts:favorites';
 
-function Overview ({ className, onStatusChange }: Props): React.ReactElement<Props> {
+function Overview ({ className = '', onStatusChange }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { allAddresses } = useAddresses();
   const [isCreateOpen, toggleCreate] = useToggle(false);
@@ -53,7 +53,7 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
       <Input
         autoFocus
         isFull
-        label={t('filter by name or tags')}
+        label={t<string>('filter by name or tags')}
         onChange={setFilter}
         value={filterOn}
       />
@@ -65,7 +65,7 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
       <Button.Group>
         <Button
           icon='add'
-          label={t('Add contact')}
+          label={t<string>('Add contact')}
           onClick={toggleCreate}
         />
       </Button.Group>
@@ -76,7 +76,7 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
         />
       )}
       <Table
-        empty={t('no addresses saved yet, add any existing address')}
+        empty={t<string>('no addresses saved yet, add any existing address')}
         filter={filter}
         header={header}
       >
diff --git a/packages/page-accounts/src/Contacts/modals/Create.tsx b/packages/page-accounts/src/Contacts/modals/Create.tsx
index 65d4213e98..e16b50163d 100644
--- a/packages/page-accounts/src/Contacts/modals/Create.tsx
+++ b/packages/page-accounts/src/Contacts/modals/Create.tsx
@@ -70,13 +70,13 @@ function Create ({ onClose, onStatusChange }: Props): React.ReactElement<Props>
         status.account = address;
         status.status = address ? 'success' : 'error';
         status.message = isAddressExisting
-          ? t('address edited')
-          : t('address created');
+          ? t<string>('address edited')
+          : t<string>('address created');
 
         InputAddress.setLastValue('address', address);
       } catch (error) {
         status.status = 'error';
-        status.message = error.message;
+        status.message = (error as Error).message;
       }
 
       onStatusChange(status);
@@ -86,7 +86,7 @@ function Create ({ onClose, onStatusChange }: Props): React.ReactElement<Props>
   );
 
   return (
-    <Modal header={t('Add an address')}>
+    <Modal header={t<string>('Add an address')}>
       <Modal.Content>
         <AddressRow
           defaultName={name}
@@ -96,19 +96,19 @@ function Create ({ onClose, onStatusChange }: Props): React.ReactElement<Props>
           <Input
             autoFocus
             className='full'
-            help={t('Paste here the address of the contact you want to add to your address book.')}
+            help={t<string>('Paste here the address of the contact you want to add to your address book.')}
             isError={!isAddressValid}
-            label={t('address')}
+            label={t<string>('address')}
             onChange={_onChangeAddress}
             onEnter={_onCommit}
-            placeholder={t('new address')}
+            placeholder={t<string>('new address')}
             value={address}
           />
           <Input
             className='full'
-            help={t('Type the name of your contact. This name will be used across all the apps. It can be edited later on.')}
+            help={t<string>('Type the name of your contact. This name will be used across all the apps. It can be edited later on.')}
             isError={!isNameValid}
-            label={t('name')}
+            label={t<string>('name')}
             onChange={_onChangeName}
             onEnter={_onCommit}
             value={name}
@@ -120,7 +120,7 @@ function Create ({ onClose, onStatusChange }: Props): React.ReactElement<Props>
           icon='save'
           isDisabled={!isValid}
           isPrimary
-          label={t('Save')}
+          label={t<string>('Save')}
           onClick={_onCommit}
         />
       </Modal.Actions>
diff --git a/packages/page-accounts/src/Sidebar/Flags.tsx b/packages/page-accounts/src/Sidebar/Flags.tsx
index 6fb509d6f9..feb90605ed 100644
--- a/packages/page-accounts/src/Sidebar/Flags.tsx
+++ b/packages/page-accounts/src/Sidebar/Flags.tsx
@@ -28,14 +28,14 @@ function Flags ({ flags: { isCouncil, isDevelopment, isExternal, isInjected, isM
           ? (
             <Tag
               color='green'
-              label={t('Multisig')}
+              label={t<string>('Multisig')}
               size='tiny'
             />
           )
           : (
             <Tag
               color='grey'
-              label={t('External')}
+              label={t<string>('External')}
               size='tiny'
             />
           )
@@ -43,42 +43,42 @@ function Flags ({ flags: { isCouncil, isDevelopment, isExternal, isInjected, isM
       {isInjected && (
         <Tag
           color='grey'
-          label={t('Injected')}
+          label={t<string>('Injected')}
           size='tiny'
         />
       )}
       {isDevelopment && (
         <Tag
           color='grey'
-          label={t('Test account')}
+          label={t<string>('Test account')}
           size='tiny'
         />
       )}
       {isCouncil && (
         <Tag
           color='blue'
-          label={t('Council')}
+          label={t<string>('Council')}
           size='tiny'
         />
       )}
       {isSociety && (
         <Tag
           color='green'
-          label={t('Society')}
+          label={t<string>('Society')}
           size='tiny'
         />
       )}
       {isTechCommittee && (
         <Tag
           color='orange'
-          label={t('Technical committee')}
+          label={t<string>('Technical committee')}
           size='tiny'
         />
       )}
       {isSudo && (
         <Tag
           color='pink'
-          label={t('Sudo key')}
+          label={t<string>('Sudo key')}
           size='tiny'
         />
       )}
diff --git a/packages/page-accounts/src/Sidebar/Identity.tsx b/packages/page-accounts/src/Sidebar/Identity.tsx
index 949cfabae7..318c9ae6ca 100644
--- a/packages/page-accounts/src/Sidebar/Identity.tsx
+++ b/packages/page-accounts/src/Sidebar/Identity.tsx
@@ -34,7 +34,7 @@ function Identity ({ address, identity }: Props): React.ReactElement<Props> | nu
           <div>
             <Icon name='address card' />
             &nbsp;
-            {t('identity')}
+            {t<string>('identity')}
           </div>
           <Tag
             color={
@@ -51,10 +51,10 @@ function Identity ({ address, identity }: Props): React.ReactElement<Props> | nu
                 {
                   identity.judgements.length
                     ? (identity.isGood
-                      ? (identity.isKnownGood ? t('Known good') : t('Reasonable'))
-                      : (identity.isErroneous ? t('Erroneous') : t('Low quality'))
+                      ? (identity.isKnownGood ? t<string>('Known good') : t<string>('Reasonable'))
+                      : (identity.isErroneous ? t<string>('Erroneous') : t<string>('Low quality'))
                     )
-                    : t('No judgments')
+                    : t<string>('No judgments')
                 }
               </>
             }
@@ -77,7 +77,7 @@ function Identity ({ address, identity }: Props): React.ReactElement<Props> | nu
           <div className='ui--AddressMenu-identityTable'>
             {identity.parent && (
               <div className='tr parent'>
-                <div className='th'>{t('parent')}</div>
+                <div className='th'>{t<string>('parent')}</div>
                 <div className='td'>
                   <AddressMini
                     className='parent'
@@ -89,13 +89,13 @@ function Identity ({ address, identity }: Props): React.ReactElement<Props> | nu
             )}
             {identity.email && (
               <div className='tr'>
-                <div className='th'>{t('email')}</div>
+                <div className='th'>{t<string>('email')}</div>
                 <div className='td'>
                   {isHex(identity.email)
                     ? identity.email
                     : (
                       <a
-                        href={`mailto:${identity.email}`}
+                        href={`mailto:${identity.email as string}`}
                         rel='noopener noreferrer'
                         target='_blank'
                       >
@@ -107,7 +107,7 @@ function Identity ({ address, identity }: Props): React.ReactElement<Props> | nu
             )}
             {identity.web && (
               <div className='tr'>
-                <div className='th'>{t('website')}</div>
+                <div className='th'>{t<string>('website')}</div>
                 <div className='td'>
                   {isHex(identity.web)
                     ? identity.web
@@ -125,13 +125,13 @@ function Identity ({ address, identity }: Props): React.ReactElement<Props> | nu
             )}
             {identity.twitter && (
               <div className='tr'>
-                <div className='th'>{t('twitter')}</div>
+                <div className='th'>{t<string>('twitter')}</div>
                 <div className='td'>
                   {isHex(identity.twitter)
                     ? identity.twitter
                     : (
                       <a
-                        href={`https://twitter.com/${identity.twitter}`}
+                        href={`https://twitter.com/${identity.twitter as string}`}
                         rel='noopener noreferrer'
                         target='_blank'
                       >
@@ -143,7 +143,7 @@ function Identity ({ address, identity }: Props): React.ReactElement<Props> | nu
             )}
             {identity.riot && (
               <div className='tr'>
-                <div className='th'>{t('riot')}</div>
+                <div className='th'>{t<string>('riot')}</div>
                 <div className='td'>
                   {identity.riot}
                 </div>
@@ -159,7 +159,7 @@ function Identity ({ address, identity }: Props): React.ReactElement<Props> | nu
               <li>
                 <IconLink
                   icon='address card'
-                  label={t('Add identity judgment')}
+                  label={t<string>('Add identity judgment')}
                   onClick={toggleIsJudgementOpen}
                 />
               </li>
diff --git a/packages/page-accounts/src/Sidebar/Multisig.tsx b/packages/page-accounts/src/Sidebar/Multisig.tsx
index 64e700d84f..f2c7e8d445 100644
--- a/packages/page-accounts/src/Sidebar/Multisig.tsx
+++ b/packages/page-accounts/src/Sidebar/Multisig.tsx
@@ -29,20 +29,20 @@ function Multisig ({ isMultisig, meta }: Props): React.ReactElement<Props> | nul
         <div>
           <Icon name='handshake outline' />
           &nbsp;
-          {t('multisig')}
+          {t<string>('multisig')}
         </div>
       </div>
       <Static
         isFull
-        label={t('threshold')}
+        label={t<string>('threshold')}
       >
-        {threshold}/{who.length}
+        {threshold}/{(who as string[]).length}
       </Static>
       <Static
         isFull
-        label={t('signatories')}
+        label={t<string>('signatories')}
       >
-        {who?.map((address: string) => (
+        {(who as string[])?.map((address) => (
           <AddressMini
             key={address}
             value={address}
diff --git a/packages/page-accounts/src/Sidebar/RegistrarJudgement.tsx b/packages/page-accounts/src/Sidebar/RegistrarJudgement.tsx
index b90f2ed48b..1800dbe950 100644
--- a/packages/page-accounts/src/Sidebar/RegistrarJudgement.tsx
+++ b/packages/page-accounts/src/Sidebar/RegistrarJudgement.tsx
@@ -44,24 +44,24 @@ function RegistrarJudgement ({ address, registrars, toggleJudgement }: Props): R
 
   return (
     <Modal
-      header={t('Provide judgement')}
+      header={t<string>('Provide judgement')}
       onClose={toggleJudgement}
       size='small'
     >
       <Modal.Content>
         <InputAddress
           filter={addresses}
-          label={t('registrar account')}
+          label={t<string>('registrar account')}
           onChange={setJudgementAccountId}
           type='account'
         />
         <Input
           isDisabled
-          label={t('registrar index')}
-          value={registrarIndex === -1 ? t('invalid/unknown registrar account') : registrarIndex}
+          label={t<string>('registrar index')}
+          value={registrarIndex === -1 ? t<string>('invalid/unknown registrar account') : registrarIndex.toString()}
         />
         <Dropdown
-          label={t('judgement')}
+          label={t<string>('judgement')}
           onChange={setJudgementEnum}
           options={JUDGEMENT_ENUM}
           value={judgementEnum}
@@ -72,7 +72,7 @@ function RegistrarJudgement ({ address, registrars, toggleJudgement }: Props): R
           accountId={judgementAccountId}
           icon='check'
           isDisabled={registrarIndex === -1}
-          label={t('Judge')}
+          label={t<string>('Judge')}
           onStart={toggleJudgement}
           params={[registrarIndex, address, judgementEnum]}
           tx='identity.provideJudgement'
diff --git a/packages/page-accounts/src/Sidebar/Sidebar.tsx b/packages/page-accounts/src/Sidebar/Sidebar.tsx
index 0d9ab217a9..5a03942b63 100644
--- a/packages/page-accounts/src/Sidebar/Sidebar.tsx
+++ b/packages/page-accounts/src/Sidebar/Sidebar.tsx
@@ -26,7 +26,7 @@ const TAG_OPTS = {
   autoFocus: true
 };
 
-function Sidebar ({ address, className, onClose, onUpdateName }: Props): React.ReactElement<Props> {
+function Sidebar ({ address, className = '', onClose, onUpdateName }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { flags, identity, isEditingName, isEditingTags, meta, name, onForgetAddress, onSaveName, onSaveTags, setName, setTags, tags, toggleIsEditingName, toggleIsEditingTags } = useAccountInfo(address);
   const [isHoveringButton, toggleIsHoveringButton] = useToggle();
@@ -80,7 +80,7 @@ function Sidebar ({ address, className, onClose, onUpdateName }: Props): React.R
                 />
               )
               : flags.isEditable
-                ? (name.toUpperCase() || t('<unknown>'))
+                ? (name.toUpperCase() || t<string>('<unknown>'))
                 : undefined
           }
           value={address}
@@ -121,7 +121,7 @@ function Sidebar ({ address, className, onClose, onUpdateName }: Props): React.R
                       size='tiny'
                     />
                   ))
-                  : <label>{t('no tags')}</label>
+                  : <label>{t<string>('no tags')}</label>
                 }
               </div>
             )
@@ -139,7 +139,7 @@ function Sidebar ({ address, className, onClose, onUpdateName }: Props): React.R
           <Button.Group>
             <Button
               icon='send'
-              label={t('Deposit')}
+              label={t<string>('Deposit')}
               onClick={toggleIsTransferOpen}
             />
             {flags.isOwned && (
@@ -147,7 +147,7 @@ function Sidebar ({ address, className, onClose, onUpdateName }: Props): React.R
                 className='basic'
                 icon='check'
                 isPrimary
-                label={t('Owned')}
+                label={t<string>('Owned')}
                 onMouseEnter={toggleIsHoveringButton}
                 onMouseLeave={toggleIsHoveringButton}
                 size='tiny'
@@ -157,7 +157,7 @@ function Sidebar ({ address, className, onClose, onUpdateName }: Props): React.R
               <Button
                 icon='add'
                 isPositive
-                label={t('Save')}
+                label={t<string>('Save')}
                 onClick={_onUpdateName}
                 onMouseEnter={toggleIsHoveringButton}
                 onMouseLeave={toggleIsHoveringButton}
@@ -178,12 +178,12 @@ function Sidebar ({ address, className, onClose, onUpdateName }: Props): React.R
                 <Button.Content visible>
                   <Icon name='check' />
                   &nbsp;
-                  {t('Saved')}
+                  {t<string>('Saved')}
                 </Button.Content>
                 <Button.Content hidden>
                   <Icon name='ban' />
                   &nbsp;
-                  {t('Remove')}
+                  {t<string>('Remove')}
                 </Button.Content>
               </Button>
             )}
diff --git a/packages/page-accounts/src/Vanity/Match.tsx b/packages/page-accounts/src/Vanity/Match.tsx
index af4f741009..12962fc202 100644
--- a/packages/page-accounts/src/Vanity/Match.tsx
+++ b/packages/page-accounts/src/Vanity/Match.tsx
@@ -18,7 +18,7 @@ interface Props extends BareProps {
   seed: Uint8Array;
 }
 
-function Match ({ address, className, count, offset, onCreateToggle, onRemove, seed }: Props): React.ReactElement<Props> {
+function Match ({ address, className = '', count, offset, onCreateToggle, onRemove, seed }: Props): React.ReactElement<Props> {
   const hexSeed = useMemo(
     () => u8aToHex(seed),
     [seed]
diff --git a/packages/page-accounts/src/Vanity/index.tsx b/packages/page-accounts/src/Vanity/index.tsx
index d40d70b170..df8fcf0a02 100644
--- a/packages/page-accounts/src/Vanity/index.tsx
+++ b/packages/page-accounts/src/Vanity/index.tsx
@@ -39,7 +39,7 @@ const BOOL_OPTIONS = [
   { text: 'Yes', value: true }
 ];
 
-function VanityApp ({ className, onStatusChange }: Props): React.ReactElement<Props> {
+function VanityApp ({ className = '', onStatusChange }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const results = useRef<GeneratorResult[]>([]);
   const runningRef = useRef(false);
@@ -182,19 +182,19 @@ function VanityApp ({ className, onStatusChange }: Props): React.ReactElement<Pr
         <Input
           autoFocus
           className='medium'
-          help={t('Type here what you would like your address to contain. This tool will generate the keys and show the associated addresses that best match your search. You can use "?" as a wildcard for a character.')}
+          help={t<string>('Type here what you would like your address to contain. This tool will generate the keys and show the associated addresses that best match your search. You can use "?" as a wildcard for a character.')}
           isDisabled={isRunning}
           isError={!isMatchValid}
-          label={t('Search for')}
+          label={t<string>('Search for')}
           onChange={_onChangeMatch}
           onEnter={_toggleStart}
           value={match}
         />
         <Dropdown
           className='medium'
-          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"...')}
+          help={t<string>('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')}
+          label={t<string>('case sensitive')}
           onChange={setWithCase}
           options={BOOL_OPTIONS}
           value={withCase}
@@ -204,8 +204,8 @@ function VanityApp ({ className, onStatusChange }: Props): React.ReactElement<Pr
         <Dropdown
           className='medium'
           defaultValue={type}
-          help={t('Determines what cryptography will be used to create this account. Note that to validate on Polkadot, the session account must use "ed25519".')}
-          label={t('keypair crypto type')}
+          help={t<string>('Determines what cryptography will be used to create this account. Note that to validate on Polkadot, the session account must use "ed25519".')}
+          label={t<string>('keypair crypto type')}
           onChange={setType}
           options={uiSettings.availableCryptos}
         />
@@ -220,8 +220,8 @@ function VanityApp ({ className, onStatusChange }: Props): React.ReactElement<Pr
           isDisabled={!isMatchValid}
           label={
             isRunning
-              ? t('Stop generation')
-              : t('Start generation')
+              ? t<string>('Stop generation')
+              : t<string>('Start generation')
           }
           onClick={_toggleStart}
         />
@@ -229,7 +229,7 @@ function VanityApp ({ className, onStatusChange }: Props): React.ReactElement<Pr
       {matches.length !== 0 && (
         <Table
           className='vanity--App-matches'
-          empty={t('No matches found')}
+          empty={t<string>('No matches found')}
           header={header}
         >
           {matches.map((match): React.ReactNode => (
diff --git a/packages/page-accounts/src/index.tsx b/packages/page-accounts/src/index.tsx
index 1d56807c5d..c0b17c5d27 100644
--- a/packages/page-accounts/src/index.tsx
+++ b/packages/page-accounts/src/index.tsx
@@ -25,15 +25,15 @@ function AccountsApp ({ basePath, onStatusChange }: Props): React.ReactElement<P
     {
       isRoot: true,
       name: 'overview',
-      text: t('My accounts')
+      text: t<string>('My accounts')
     },
     {
       name: 'contacts',
-      text: t('My contacts')
+      text: t<string>('My contacts')
     },
     {
       name: 'vanity',
-      text: t('Vanity generator')
+      text: t<string>('Vanity generator')
     }
   ], [t]);
   const hidden = useMemo(
@@ -43,7 +43,7 @@ function AccountsApp ({ basePath, onStatusChange }: Props): React.ReactElement<P
 
   return (
     <main className='accounts--App'>
-      <HelpOverlay md={basicMd} />
+      <HelpOverlay md={basicMd as string} />
       <header>
         <Tabs
           basePath={basePath}
diff --git a/packages/page-accounts/src/types.ts b/packages/page-accounts/src/types.ts
index 9db0a77964..7a61fe5fcb 100644
--- a/packages/page-accounts/src/types.ts
+++ b/packages/page-accounts/src/types.ts
@@ -9,7 +9,6 @@ import { WithTranslation } from 'react-i18next';
 
 export interface BareProps {
   className?: string;
-  style?: Record<string, any>;
 }
 
 export type I18nProps = BareProps & WithTranslation;
diff --git a/packages/page-claims/src/Claim.tsx b/packages/page-claims/src/Claim.tsx
index 34a56435b2..ab2c6fa811 100644
--- a/packages/page-claims/src/Claim.tsx
+++ b/packages/page-claims/src/Claim.tsx
@@ -20,7 +20,7 @@ interface Props {
   ethereumAddress: EthereumAddress | null;
 }
 
-function Claim ({ button, className, ethereumAddress }: Props): React.ReactElement<Props> | null {
+function Claim ({ button, className = '', ethereumAddress }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const [claimValue, setClaimValue] = useState<BalanceOf | null>(null);
@@ -60,19 +60,19 @@ function Claim ({ button, className, ethereumAddress }: Props): React.ReactEleme
       isSuccess={!!hasClaim}
     >
       <div className={className}>
-        {t('Your Ethereum account')}
+        {t<string>('Your Ethereum account')}
         <h3>{addrToChecksum(claimAddress.toString())}</h3>
         {hasClaim && claimValue
           ? (
             <>
-              {t('has a valid claim for')}
+              {t<string>('has a valid claim for')}
               <h2><FormatBalance value={claimValue} /></h2>
               <Button.Group>{button}</Button.Group>
             </>
           )
           : (
             <>
-              {t('does not appear to have a valid claim. Please double check that you have signed the transaction correctly on the correct ETH account.')}
+              {t<string>('does not appear to have a valid claim. Please double check that you have signed the transaction correctly on the correct ETH account.')}
             </>
           )}
       </div>
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index e1e531a42a..b04cd7dc09 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -115,15 +115,15 @@ class ClaimsApp extends TxModal<Props, State> {
         <Columar>
           <Column>
             <Card withBottomMargin>
-              <h3>{t('1. Select your {{chain}} account', {
+              <h3>{t<string>('1. Select your {{chain}} account', {
                 replace: {
                   chain: systemChain
                 }
               })}</h3>
               <InputAddress
                 defaultValue={this.state.accountId}
-                help={t('The account you want to claim to.')}
-                label={t('claim to account')}
+                help={t<string>('The account you want to claim to.')}
+                label={t<string>('claim to account')}
                 onChange={this.onChangeAccount}
                 type='all'
               />
@@ -131,7 +131,7 @@ class ClaimsApp extends TxModal<Props, State> {
                 <Button.Group>
                   <Button
                     icon='sign-in'
-                    label={t('Continue')}
+                    label={t<string>('Continue')}
                     onClick={this.setStep(Step.Sign)}
                   />
                 </Button.Group>
@@ -139,7 +139,7 @@ class ClaimsApp extends TxModal<Props, State> {
             </Card>
             {(step >= Step.Sign && !!accountId) && (
               <Card>
-                <h3>{t('2. Sign ETH transaction')}</h3>
+                <h3>{t<string>('2. Sign ETH transaction')}</h3>
                 <CopyToClipboard
                   onCopy={this.onCopy}
                   text={payload}
@@ -153,11 +153,11 @@ class ClaimsApp extends TxModal<Props, State> {
                 </CopyToClipboard>
                 <Tooltip
                   place='right'
-                  text={didCopy ? t('copied') : t('click to copy')}
+                  text={didCopy ? t<string>('copied') : t<string>('click to copy')}
                   trigger='tx-payload'
                 />
                 <div>
-                  {t('Copy the above string and sign an Ethereum transaction with the account you used during the pre-sale in the wallet of your choice, using the string as the payload, and then paste the transaction signature object below')}
+                  {t<string>('Copy the above string and sign an Ethereum transaction with the account you used during the pre-sale in the wallet of your choice, using the string as the payload, and then paste the transaction signature object below')}
                   :
                 </div>
                 <Signature
@@ -170,7 +170,7 @@ class ClaimsApp extends TxModal<Props, State> {
                     <Button
                       icon='sign-in'
                       isDisabled={!accountId || !signature}
-                      label={t('Confirm claim')}
+                      label={t<string>('Confirm claim')}
                       onClick={this.setStep(Step.Claim)}
                     />
                   </Button.Group>
diff --git a/packages/page-claims/src/util.ts b/packages/page-claims/src/util.ts
index a8b453ea77..0cde08b2e2 100644
--- a/packages/page-claims/src/util.ts
+++ b/packages/page-claims/src/util.ts
@@ -85,7 +85,7 @@ export function recoverAddress (message: string, { recovery, signature }: Signat
 // recover an address from a signature JSON (as supplied by e.g. MyCrypto)
 export function recoverFromJSON (signatureJson: string | null): RecoveredSignature {
   try {
-    const { msg, sig } = JSON.parse(signatureJson || '{}');
+    const { msg, sig } = JSON.parse(signatureJson || '{}') as Record<string, string>;
 
     if (!msg || !sig) {
       throw new Error('Invalid signature object');
@@ -102,7 +102,7 @@ export function recoverFromJSON (signatureJson: string | null): RecoveredSignatu
     console.error(error);
 
     return {
-      error,
+      error: error as Error,
       ethereumAddress: null,
       signature: null
     };
diff --git a/packages/page-contracts/package.json b/packages/page-contracts/package.json
index 3f883acd4f..2f2b8b647e 100644
--- a/packages/page-contracts/package.json
+++ b/packages/page-contracts/package.json
@@ -12,6 +12,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.9.6",
-    "@polkadot/api-contract": "^1.15.1"
+    "@polkadot/api-contract": "^1.16.0-beta.2"
   }
 }
diff --git a/packages/page-contracts/src/ABI.tsx b/packages/page-contracts/src/ABI.tsx
index f31aa17812..4505ce6168 100644
--- a/packages/page-contracts/src/ABI.tsx
+++ b/packages/page-contracts/src/ABI.tsx
@@ -2,6 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { ContractABIPre } from '@polkadot/api-contract/types';
 import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
@@ -90,7 +91,7 @@ class ABI extends React.PureComponent<Props, State> {
   }
 
   private renderInputFile (): React.ReactNode {
-    const { className, help, isDisabled, isRequired, label, t } = this.props;
+    const { className = '', help, isDisabled, isRequired, label, t } = this.props;
     const { errorText, isAbiValid, isEmpty, isError } = this.state;
 
     return (
@@ -105,7 +106,7 @@ class ABI extends React.PureComponent<Props, State> {
             !isEmpty && !isAbiValid
               ? (
                 <>
-                  {t('invalid ABI file selected')}
+                  {t<string>('invalid ABI file selected')}
                   {!!errorText && (
                     <>
                       {' — '}
@@ -114,7 +115,7 @@ class ABI extends React.PureComponent<Props, State> {
                   )}
                 </>
               )
-              : t('click to select or drag and drop a JSON ABI file')
+              : t<string>('click to select or drag and drop a JSON ABI file')
           }
         />
       </div>
@@ -152,9 +153,9 @@ class ABI extends React.PureComponent<Props, State> {
     const json = u8aToString(u8a);
 
     try {
-      const abi = JSON.parse(json);
+      const abi = JSON.parse(json) as ContractABIPre;
 
-      if (abi.deploy || abi.messages) {
+      if ((abi as unknown as Record<string, unknown>).deploy || (abi as unknown as Record<string, unknown>).messages) {
         throw new Error(t('You are using an ABI with an outdated format. Please generate a new one.'));
       }
 
@@ -170,7 +171,7 @@ class ABI extends React.PureComponent<Props, State> {
       console.error(error);
 
       this.setState({
-        errorText: error,
+        errorText: error as string,
         isAbiValid: false,
         isEmpty: false,
         isError: true
diff --git a/packages/page-contracts/src/CodeRow.tsx b/packages/page-contracts/src/CodeRow.tsx
index 6ad1528dcd..f72f88c21f 100644
--- a/packages/page-contracts/src/CodeRow.tsx
+++ b/packages/page-contracts/src/CodeRow.tsx
@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-/* eslint-disable @typescript-eslint/camelcase */
+/* eslint-disable camelcase */
 
 import { I18nProps } from '@polkadot/react-components/types';
 import { CodeStored } from '@polkadot/app-contracts/types';
@@ -57,11 +57,11 @@ class CodeRow extends Row<Props, State> {
     this.state = this.createState();
   }
 
-  public static getDerivedStateFromProps ({ accounts_info, code: { json } }: Props, prevState: State): State | null {
+  public static getDerivedStateFromProps ({ accountsInfo, code: { json } }: Props, prevState: State): State | null {
     const codeHash = json.codeHash || DEFAULT_HASH;
     const name = json.name || DEFAULT_NAME;
     const tags = json.tags || [];
-    const { accountId } = accounts_info || {};
+    const { accountId } = accountsInfo || {};
     const address = accountId
       ? accountId.toString()
       : DEFAULT_ADDR;
@@ -90,13 +90,10 @@ class CodeRow extends Row<Props, State> {
   }
 
   public render (): React.ReactNode {
-    const { className, isInline, style } = this.props;
+    const { className = '', isInline } = this.props;
 
     return (
-      <div
-        className={classes('ui--Row', isInline && 'inline', className)}
-        style={style}
-      >
+      <div className={classes('ui--Row', isInline && 'inline', className)}>
         <div className='ui--Row-base'>
           {this.renderIcon()}
           <div className='ui--Row-details'>
diff --git a/packages/page-contracts/src/Codes/Add.tsx b/packages/page-contracts/src/Codes/Add.tsx
index 07663b413f..c2b89f0102 100644
--- a/packages/page-contracts/src/Codes/Add.tsx
+++ b/packages/page-contracts/src/Codes/Add.tsx
@@ -39,10 +39,10 @@ class Add extends ContractModal<Props, State> {
       <>
         <Input
           autoFocus
-          help={t('The code hash for the on-chain deployed code.')}
+          help={t<string>('The code hash for the on-chain deployed code.')}
           isDisabled={isBusy}
           isError={!isCodeValid}
-          label={t('code hash')}
+          label={t<string>('code hash')}
           onChange={this.onChangeHash}
           onEnter={this.submit}
           value={codeHash}
@@ -67,8 +67,9 @@ class Add extends ContractModal<Props, State> {
         icon='save'
         isDisabled={!isValid}
         isPrimary
-        label={t('Save')}
+        label={t<string>('Save')}
         onClick={this.onSave}
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         ref={this.button}
       />
     );
diff --git a/packages/page-contracts/src/Codes/Code.tsx b/packages/page-contracts/src/Codes/Code.tsx
index 17bfcc7410..f2114036e7 100644
--- a/packages/page-contracts/src/Codes/Code.tsx
+++ b/packages/page-contracts/src/Codes/Code.tsx
@@ -17,7 +17,7 @@ import RemoveABI from '../RemoveABI';
 import contracts from '../store';
 import translate from '../translate';
 
-interface Props extends I18nProps, RouteComponentProps<{}> {
+interface Props extends I18nProps, RouteComponentProps {
   code: CodeStored;
   showDeploy: (codeHash?: string, constructorIndex?: number) => () => void;
 }
@@ -69,7 +69,7 @@ class Code extends React.PureComponent<Props, State> {
               <Expander
                 isOpen={isAbiOpen}
                 onClick={this.toggleAbi}
-                summary={t('ABI')}
+                summary={t<string>('ABI')}
               >
                 {abi}
               </Expander>
@@ -90,14 +90,14 @@ class Code extends React.PureComponent<Props, State> {
           icon='trash'
           isNegative
           onClick={this.toggleForget}
-          tooltip={t('Forget this code hash')}
+          tooltip={t<string>('Forget this code hash')}
         />
         <Button
           icon='cloud upload'
           isPrimary
-          label={t('deploy')}
+          label={t<string>('deploy')}
           onClick={showDeploy(codeHash)}
-          tooltip={t('Deploy this code hash as a smart contract')}
+          tooltip={t<string>('Deploy this code hash as a smart contract')}
         />
       </>
     );
@@ -125,8 +125,8 @@ class Code extends React.PureComponent<Props, State> {
             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>
+            <p>{t<string>('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<string>('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>
           </CodeRow>
         </Forget>
       );
@@ -201,10 +201,7 @@ class Code extends React.PureComponent<Props, State> {
     this.setState(
       { isAbiOpen: true },
       (): void => {
-        contracts.saveCode(
-          codeHash,
-          { abi }
-        );
+        contracts.saveCode(codeHash, { abi }).catch(console.error);
       }
     );
   }
diff --git a/packages/page-contracts/src/Codes/Upload.tsx b/packages/page-contracts/src/Codes/Upload.tsx
index b03a0b58e4..ea86de995e 100644
--- a/packages/page-contracts/src/Codes/Upload.tsx
+++ b/packages/page-contracts/src/Codes/Upload.tsx
@@ -42,7 +42,7 @@ class Upload extends ContractModal<Props, State> {
       wasm: null
     };
     this.state = this.defaultState;
-    this.headerText = t('Upload WASM');
+    this.headerText = t<string>('Upload WASM');
   }
 
   protected renderContent = (): React.ReactNode => {
@@ -53,14 +53,14 @@ class Upload extends ContractModal<Props, State> {
       <>
         {this.renderInputAccount()}
         <InputFile
-          help={t('The compiled WASM for the contract that you wish to deploy. Each unique code blob will be attached with a code hash that can be used to create new instances.')}
+          help={t<string>('The compiled WASM for the contract that you wish to deploy. Each unique code blob will be attached with a code hash that can be used to create new instances.')}
           isDisabled={isBusy}
           isError={!isWasmValid}
-          label={t('compiled contract WASM')}
+          label={t<string>('compiled contract WASM')}
           onChange={this.onAddWasm}
           placeholder={
             wasm && !isWasmValid
-              ? t('The code is not recognized as being in valid WASM format')
+              ? t<string>('The code is not recognized as being in valid WASM format')
               : null
           }
         />
@@ -82,7 +82,7 @@ class Upload extends ContractModal<Props, State> {
         icon='upload'
         isDisabled={!isValid}
         isPrimary
-        label={t('Upload')}
+        label={t<string>('Upload')}
         onClick={this.toggleBusy(true)}
         onFailed={this.toggleBusy(false)}
         onSuccess={this.onSuccess}
diff --git a/packages/page-contracts/src/Codes/ValidateCode.tsx b/packages/page-contracts/src/Codes/ValidateCode.tsx
index b32c3a0fc7..cd74f41181 100644
--- a/packages/page-contracts/src/Codes/ValidateCode.tsx
+++ b/packages/page-contracts/src/Codes/ValidateCode.tsx
@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-/* eslint-disable @typescript-eslint/camelcase */
+/* eslint-disable camelcase */
 
 import { PrefabWasmModule } from '@polkadot/types/interfaces';
 import { I18nProps } from '@polkadot/react-components/types';
@@ -62,8 +62,8 @@ class ValidateCode extends React.PureComponent<Props, State> {
       <InfoForInput type='error'>
         {
           isValidHex
-            ? t('Unable to find on-chain WASM code for the supplied codeHash')
-            : t('The codeHash is not a valid hex hash')
+            ? t<string>('Unable to find on-chain WASM code for the supplied codeHash')
+            : t<string>('The codeHash is not a valid hex hash')
         }
       </InfoForInput>
     );
diff --git a/packages/page-contracts/src/Codes/index.tsx b/packages/page-contracts/src/Codes/index.tsx
index 9126e2b234..3cba30e2a0 100644
--- a/packages/page-contracts/src/Codes/index.tsx
+++ b/packages/page-contracts/src/Codes/index.tsx
@@ -39,17 +39,17 @@ class Codes extends React.PureComponent<Props, State> {
             <Button.Group>
               <Button
                 icon='upload'
-                label={t('Upload WASM')}
+                label={t<string>('Upload WASM')}
                 onClick={this.showUpload}
               />
               <Button
                 icon='add'
-                label={t('Add an existing code hash')}
+                label={t<string>('Add an existing code hash')}
                 onClick={this.showAdd}
               />
             </Button.Group>
           }
-          emptyText={t('No code hashes available')}
+          emptyText={t<string>('No code hashes available')}
         >
           {contracts.getAllCode().map((code): React.ReactNode => {
             return (
diff --git a/packages/page-contracts/src/Contracts/Add.tsx b/packages/page-contracts/src/Contracts/Add.tsx
index 211e8ee6db..abf048c9e7 100644
--- a/packages/page-contracts/src/Contracts/Add.tsx
+++ b/packages/page-contracts/src/Contracts/Add.tsx
@@ -51,10 +51,10 @@ class Add extends ContractModal<Props, State> {
       >
         <Input
           autoFocus
-          help={t('The address for the deployed contract instance.')}
+          help={t<string>('The address for the deployed contract instance.')}
           isDisabled={isBusy}
           isError={!isAddressValid}
-          label={t('contract address')}
+          label={t<string>('contract address')}
           onChange={this.onChangeAddress}
           onEnter={this.submit}
           value={address || ''}
@@ -79,7 +79,7 @@ class Add extends ContractModal<Props, State> {
         icon='save'
         isDisabled={!isValid}
         isPrimary
-        label={t('Save')}
+        label={t<string>('Save')}
         onClick={this.onAdd}
       />
     );
@@ -123,7 +123,7 @@ class Add extends ContractModal<Props, State> {
       console.error(error);
 
       status.status = 'error';
-      status.message = error.message;
+      status.message = (error as Error).message;
     }
   }
 }
diff --git a/packages/page-contracts/src/Contracts/Call.tsx b/packages/page-contracts/src/Contracts/Call.tsx
index edd0a9560a..0ed07fa67c 100644
--- a/packages/page-contracts/src/Contracts/Call.tsx
+++ b/packages/page-contracts/src/Contracts/Call.tsx
@@ -31,7 +31,7 @@ interface Props extends BareProps {
 
 function Call (props: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
-  const { callContract, callMessageIndex, className, isOpen, 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);
 
@@ -95,11 +95,10 @@ function Call (props: Props): React.ReactElement<Props> | null {
     callContract
       .call('rpc', callMessage.def.name, endowment, gasLimit, ...params)
       .send(accountId)
-      .then(
-        (outcome: ContractCallOutcome): void => {
-          setOutcomes([outcome, ...outcomes]);
-        }
-      );
+      .then((outcome: ContractCallOutcome): void => {
+        setOutcomes([outcome, ...outcomes]);
+      })
+      .catch(console.error);
   };
 
   const _onClearOutcomes = (): void => setOutcomes([]);
@@ -115,7 +114,7 @@ function Call (props: Props): React.ReactElement<Props> | null {
   return (
     <Modal
       className={[className || '', 'app--contracts-Modal'].join(' ')}
-      header={t('Call a contract')}
+      header={t<string>('Call a contract')}
       onClose={onClose}
       open={isOpen}
     >
@@ -124,17 +123,17 @@ function Call (props: Props): React.ReactElement<Props> | null {
           <div className='contracts--CallControls'>
             <InputAddress
               defaultValue={accountId}
-              help={t('Specify the user account to use for this contract call. And fees will be deducted from this account.')}
+              help={t<string>('Specify the user account to use for this contract call. And fees will be deducted from this account.')}
               isDisabled={isBusy}
-              label={t('call from account')}
+              label={t<string>('call from account')}
               onChange={_onChangeAccountId}
               type='account'
               value={accountId}
             />
             <InputAddress
-              help={t('A deployed contract that has either been deployed or attached. The address and ABI are used to construct the parameters.')}
+              help={t<string>('A deployed contract that has either been deployed or attached. The address and ABI are used to construct the parameters.')}
               isDisabled={isBusy}
-              label={t('contract to use')}
+              label={t<string>('contract to use')}
               onChange={onChangeCallContractAddress}
               type='contract'
               value={callContract.address.toString()}
@@ -143,10 +142,10 @@ function Call (props: Props): React.ReactElement<Props> | null {
               <>
                 <Dropdown
                   defaultValue={`${callMessage.index}`}
-                  help={t('The message to send to this contract. Parameters are adjusted based on the ABI provided.')}
+                  help={t<string>('The message to send to this contract. Parameters are adjusted based on the ABI provided.')}
                   isDisabled={isBusy}
                   isError={callMessage === null}
-                  label={t('message to send')}
+                  label={t<string>('message to send')}
                   onChange={_onChangeCallMessageIndexString}
                   options={getCallMessageOptions(callContract)}
                   value={`${callMessage.index}`}
@@ -163,21 +162,21 @@ function Call (props: Props): React.ReactElement<Props> | null {
               </>
             )}
             <InputBalance
-              help={t('The allotted value for this contract, i.e. the amount transferred to the contract as part of this call.')}
+              help={t<string>('The allotted value for this contract, i.e. the amount transferred to the contract as part of this call.')}
               isDisabled={isBusy}
               isError={!isEndowmentValid}
               isZeroable
-              label={t('value')}
+              label={t<string>('value')}
               onChange={_onChangeEndowment}
               value={endowment}
             />
             <InputNumber
               bitLength={128}
               defaultValue={DEFAULT_GAS_LIMIT}
-              help={t('The maximum amount of gas that can be used by this call. If the code requires more, the call will fail.')}
+              help={t<string>('The maximum amount of gas that can be used by this call. If the code requires more, the call will fail.')}
               isDisabled={isBusy}
               isError={!isGasValid}
-              label={t('maximum gas allowed')}
+              label={t<string>('maximum gas allowed')}
               onChange={_onChangeGasLimit}
               value={gasLimit}
             />
@@ -189,8 +188,8 @@ function Call (props: Props): React.ReactElement<Props> | null {
             isDisabled={!!callMessage && callMessage.def.mutates}
             label={
               useRpc
-                ? t('send as RPC call')
-                : t('send as transaction')
+                ? t<string>('send as RPC call')
+                : t<string>('send as transaction')
             }
             onChange={setUseRpc}
             value={useRpc || false}
@@ -204,7 +203,7 @@ function Call (props: Props): React.ReactElement<Props> | null {
                 icon='sign-in'
                 isDisabled={!isValid}
                 isPrimary
-                label={t('Call')}
+                label={t<string>('Call')}
                 onClick={_onSubmitRpc}
               />
             )
@@ -214,7 +213,7 @@ function Call (props: Props): React.ReactElement<Props> | null {
                 icon='sign-in'
                 isDisabled={!isValid}
                 isPrimary
-                label={t('Call')}
+                label={t<string>('Call')}
                 onClick={_toggleBusy}
                 onFailed={_toggleBusy}
                 onSuccess={_toggleBusy}
@@ -228,11 +227,11 @@ function Call (props: Props): React.ReactElement<Props> | null {
         {outcomes.length > 0 && (
           <>
             <h3>
-              {t('Call results')}
+              {t<string>('Call results')}
               <IconLink
                 className='clear-all'
                 icon='close'
-                label={t('Clear all')}
+                label={t<string>('Clear all')}
                 onClick={_onClearOutcomes}
               />
             </h3>
diff --git a/packages/page-contracts/src/Contracts/Contract.tsx b/packages/page-contracts/src/Contracts/Contract.tsx
index c7b4642364..8df0bf457c 100644
--- a/packages/page-contracts/src/Contracts/Contract.tsx
+++ b/packages/page-contracts/src/Contracts/Contract.tsx
@@ -52,10 +52,10 @@ function Contract (props: Props): React.ReactElement<Props> | null {
     try {
       keyring.forgetContract(address.toString());
       status.status = 'success';
-      status.message = t('address forgotten');
+      status.message = t<string>('address forgotten');
     } catch (error) {
       status.status = 'error';
-      status.message = error.message;
+      status.message = (error as Error).message;
     }
 
     _toggleForget();
@@ -79,14 +79,14 @@ function Contract (props: Props): React.ReactElement<Props> | null {
               icon='trash'
               isNegative
               onClick={_toggleForget}
-              tooltip={t('Forget this contract')}
+              tooltip={t<string>('Forget this contract')}
             />
             <Button
               icon='play'
               isPrimary
-              label={t('execute')}
+              label={t<string>('execute')}
               onClick={onCall()}
-              tooltip={t('Call a method on this contract')}
+              tooltip={t<string>('Call a method on this contract')}
             />
           </div>
         }
@@ -98,7 +98,7 @@ function Contract (props: Props): React.ReactElement<Props> | null {
         withNonce={false}
         withTags
       >
-        <Expander summary={t('Messages')}>
+        <Expander summary={t<string>('Messages')}>
           <Messages
             address={address.toString()}
             contractAbi={abi}
diff --git a/packages/page-contracts/src/Contracts/Outcome.tsx b/packages/page-contracts/src/Contracts/Outcome.tsx
index 3697bf555d..c1b30f1d97 100644
--- a/packages/page-contracts/src/Contracts/Outcome.tsx
+++ b/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: { isSuccess, message, origin, output, params, time } } = props;
+  const { className = '', onClear, outcome: { isSuccess, message, origin, output, params, time } } = props;
   const dateTime = new Date(time);
 
   return (
diff --git a/packages/page-contracts/src/Contracts/ValidateAddr.tsx b/packages/page-contracts/src/Contracts/ValidateAddr.tsx
index aeb5f32e90..44b9708a08 100644
--- a/packages/page-contracts/src/Contracts/ValidateAddr.tsx
+++ b/packages/page-contracts/src/Contracts/ValidateAddr.tsx
@@ -48,8 +48,8 @@ function ValidateAddr ({ address, onChange }: Props): React.ReactElement<Props>
   return (
     <InfoForInput type='error'>
       {isAddress
-        ? t('Unable to find deployed contract code at the specified address')
-        : t('The value is not in a valid address format')
+        ? t<string>('Unable to find deployed contract code at the specified address')
+        : t<string>('The value is not in a valid address format')
       }
     </InfoForInput>
   );
diff --git a/packages/page-contracts/src/Contracts/index.tsx b/packages/page-contracts/src/Contracts/index.tsx
index 24202aac61..d6923fb6a0 100644
--- a/packages/page-contracts/src/Contracts/index.tsx
+++ b/packages/page-contracts/src/Contracts/index.tsx
@@ -73,18 +73,18 @@ function Contracts (props: Props): React.ReactElement<Props> {
             {hasCode && (
               <Button
                 icon='cloud upload'
-                label={t('Deploy a code hash')}
+                label={t<string>('Deploy a code hash')}
                 onClick={showDeploy()}
               />
             )}
             <Button
               icon='add'
-              label={t('Add an existing contract')}
+              label={t<string>('Add an existing contract')}
               onClick={_toggleAdd}
             />
           </Button.Group>
         }
-        emptyText={t('No contracts available')}
+        emptyText={t<string>('No contracts available')}
       >
         {contracts.map((contract: ApiContract, index): React.ReactNode => (
           <ContractCard
diff --git a/packages/page-contracts/src/Deploy.tsx b/packages/page-contracts/src/Deploy.tsx
index 0637ba75f1..6d293677d8 100644
--- a/packages/page-contracts/src/Deploy.tsx
+++ b/packages/page-contracts/src/Deploy.tsx
@@ -165,10 +165,10 @@ class Deploy extends ContractModal<Props, State> {
         {this.renderInputAccount()}
         <Dropdown
           defaultValue={defaultCode}
-          help={t('The contract WASM previously deployed. Internally this is identified by the hash of the code, as either created or attached.')}
+          help={t<string>('The contract WASM previously deployed. Internally this is identified by the hash of the code, as either created or attached.')}
           isDisabled={isBusy}
           isError={!isHashValid}
-          label={t('code for this contract')}
+          label={t<string>('code for this contract')}
           onChange={this.onChangeCode}
           options={codeOptions}
           value={codeHash}
@@ -183,12 +183,11 @@ class Deploy extends ContractModal<Props, State> {
           contractAbi
             ? (
               <Dropdown
-                help={t('The deployment constructor information for this contract, as provided by the ABI.')}
+                help={t<string>('The deployment constructor information for this contract, as provided by the ABI.')}
                 isDisabled={contractAbi.abi.contract.constructors.length <= 1}
-                label={t('constructor')}
+                label={t<string>('constructor')}
                 onChange={this.onChangeConstructorIndex}
                 options={constructOptions}
-                style={{ fontFamily: 'monospace' }}
                 value={`${constructorIndex}`}
                 withLabel
               />
@@ -206,10 +205,10 @@ class Deploy extends ContractModal<Props, State> {
           }
         />
         <InputBalance
-          help={t('The allotted endowment for this contract, i.e. the amount transferred to the contract upon instantiation.')}
+          help={t<string>('The allotted endowment for this contract, i.e. the amount transferred to the contract upon instantiation.')}
           isDisabled={isBusy}
           isError={endowment.isZero()}
-          label={t('endowment')}
+          label={t<string>('endowment')}
           onChange={this.onChangeEndowment}
           onEnter={this.sendTx}
           value={endowment}
@@ -232,7 +231,7 @@ class Deploy extends ContractModal<Props, State> {
         icon='cloud upload'
         isDisabled={!isValid}
         isPrimary
-        label={t('Deploy')}
+        label={t<string>('Deploy')}
         onClick={this.toggleBusy(true)}
         onFailed={this.toggleBusy(false)}
         onSuccess={this.onSuccess}
diff --git a/packages/page-contracts/src/MessageSignature.tsx b/packages/page-contracts/src/MessageSignature.tsx
index c547292613..ed445825b2 100644
--- a/packages/page-contracts/src/MessageSignature.tsx
+++ b/packages/page-contracts/src/MessageSignature.tsx
@@ -67,12 +67,9 @@ function MessageSignature ({ message: { args, mutates, name, returnType }, param
             {' '}
             <Type>
               {params && params[index]
-                ? (
-                  <b>
-                    {truncate(params[index].toString())}
-                  </b>
-                )
-                : displayType(type)}
+                ? <b>{truncate((params as string[])[index].toString())}</b>
+                : displayType(type)
+              }
             </Type>
             {index < args.length - 1 && ', '}
           </React.Fragment>
@@ -98,7 +95,7 @@ function MessageSignature ({ message: { args, mutates, name, returnType }, param
           />
           {withTooltip && (
             <Tooltip
-              text={t('Mutates contract state')}
+              text={t<string>('Mutates contract state')}
               trigger={`mutates-${name}`}
             />
           )}
diff --git a/packages/page-contracts/src/Messages.tsx b/packages/page-contracts/src/Messages.tsx
index 315b7003f5..0214c7860b 100644
--- a/packages/page-contracts/src/Messages.tsx
+++ b/packages/page-contracts/src/Messages.tsx
@@ -51,7 +51,7 @@ function onSelectConstructor (props: Props, index: number): () => void {
   };
 }
 
-function renderItem (props: Props, message: ContractABIMessage, index: number, asConstructor: boolean, t: (key: string) => string): React.ReactNode {
+function renderItem (props: Props, message: ContractABIMessage, index: number, asConstructor: boolean, t: <T = string> (key: string) => T): React.ReactNode {
   const { docs = [], name } = message;
 
   return (
@@ -78,7 +78,7 @@ function renderItem (props: Props, message: ContractABIMessage, index: number, a
                   </React.Fragment>
                 )))
               : (
-                <i>{t('No documentation provided')}</i>
+                <i>{t<string>('No documentation provided')}</i>
               )
           }
         />
@@ -89,7 +89,7 @@ function renderItem (props: Props, message: ContractABIMessage, index: number, a
             className='execute'
             icon='play'
             onClick={onSelect(props, index)}
-            tooltip={t('Call this message')}
+            tooltip={t<string>('Call this message')}
           />
         </div>
       )}
@@ -99,7 +99,7 @@ function renderItem (props: Props, message: ContractABIMessage, index: number, a
             className='execute'
             icon='cloud upload'
             onClick={onSelectConstructor(props, index)}
-            tooltip={t('Deploy with this constructor')}
+            tooltip={t<string>('Deploy with this constructor')}
           />
         </div>
       )}
@@ -107,7 +107,7 @@ function renderItem (props: Props, message: ContractABIMessage, index: number, a
   );
 }
 
-function renderConstructor (props: Props, index: number, t: (key: string) => string): React.ReactNode {
+function renderConstructor (props: Props, index: number, t: <T = string> (key: string) => T): React.ReactNode {
   const { contractAbi: { abi: { contract: { constructors } } } } = props;
 
   if (!constructors[index]) {
@@ -117,7 +117,7 @@ function renderConstructor (props: Props, index: number, t: (key: string) => str
   return renderItem(props, constructors[index], index, true, t);
 }
 
-function renderMessage (props: Props, index: number, t: (key: string) => string): React.ReactNode {
+function renderMessage (props: Props, index: number, t: <T = string> (key: string) => T): React.ReactNode {
   const { contractAbi: { abi: { contract: { messages } } } } = props;
 
   if (!messages[index]) {
@@ -129,7 +129,7 @@ function renderMessage (props: Props, index: number, t: (key: string) => string)
 
 function Messages (props: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { className, contractAbi: { abi: { contract: { constructors, messages } } }, isLabelled, isRemovable, onRemove = NOOP, withConstructors } = props;
+  const { className = '', contractAbi: { abi: { contract: { constructors, messages } } }, isLabelled, isRemovable, onRemove = NOOP, withConstructors } = props;
 
   return (
     <div className={classes(className, 'ui--Messages', isLabelled && 'labelled')}>
@@ -139,7 +139,7 @@ function Messages (props: Props): React.ReactElement<Props> {
         <IconLink
           className='remove-abi'
           icon='remove'
-          label={t('Remove ABI')}
+          label={t<string>('Remove ABI')}
           onClick={onRemove}
         />
       )}
diff --git a/packages/page-contracts/src/Modal.tsx b/packages/page-contracts/src/Modal.tsx
index 4c8761d9e8..46e07b1e78 100644
--- a/packages/page-contracts/src/Modal.tsx
+++ b/packages/page-contracts/src/Modal.tsx
@@ -103,10 +103,10 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
 
     return (
       <InputAddress
-        help={t('Specify the user account to use for this deployment. And fees will be deducted from this account.')}
+        help={t<string>('Specify the user account to use for this deployment. And fees will be deducted from this account.')}
         isDisabled={isBusy}
         isInput={false}
-        label={t('deployment account')}
+        label={t<string>('deployment account')}
         onChange={this.onChangeAccount}
         type='account'
         value={accountId}
@@ -147,10 +147,10 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
     return (
       <InputNumber
         bitLength={128}
-        help={t('The maximum amount of gas that can be used by this deployment, if the code requires more, the deployment will fail.')}
+        help={t<string>('The maximum amount of gas that can be used by this deployment, if the code requires more, the deployment will fail.')}
         isDisabled={isBusy}
         isError={!isGasValid}
-        label={t('maximum gas allowed')}
+        label={t<string>('maximum gas allowed')}
         onChange={this.onChangeGas}
         onEnter={this.sendTx}
         value={gasLimit || ''}
diff --git a/packages/page-contracts/src/RemoveABI.tsx b/packages/page-contracts/src/RemoveABI.tsx
index 6e58a5ec83..9a9fa51bf5 100644
--- a/packages/page-contracts/src/RemoveABI.tsx
+++ b/packages/page-contracts/src/RemoveABI.tsx
@@ -30,7 +30,7 @@ function RemoveABI ({ code, onClose, onRemove }: Props): React.ReactElement<Prop
   return (
     <Modal
       className='app--accounts-Modal'
-      header={t('Confirm ABI removal')}
+      header={t<string>('Confirm ABI removal')}
       onClose={onClose}
     >
       <Modal.Content>
@@ -38,15 +38,15 @@ function RemoveABI ({ code, onClose, onRemove }: Props): React.ReactElement<Prop
           code={code}
           isInline
         >
-          <p>{t('You are about to remove this code\'s ABI. Once completed, should you need to access it again, you will have to manually re-upload it.')}</p>
-          <p>{t('This operation does not impact the associated on-chain code or any of its contracts.')}</p>
+          <p>{t<string>('You are about to remove this code\'s ABI. Once completed, should you need to access it again, you will have to manually re-upload it.')}</p>
+          <p>{t<string>('This operation does not impact the associated on-chain code or any of its contracts.')}</p>
         </CodeRow>
       </Modal.Content>
       <Modal.Actions onCancel={onClose}>
         <Button
           icon='trash'
           isPrimary
-          label={t('Remove')}
+          label={t<string>('Remove')}
           onClick={_onRemove}
         />
       </Modal.Actions>
diff --git a/packages/page-contracts/src/index.tsx b/packages/page-contracts/src/index.tsx
index fb3cbf70ab..f814704e12 100644
--- a/packages/page-contracts/src/index.tsx
+++ b/packages/page-contracts/src/index.tsx
@@ -69,7 +69,7 @@ class ContractsApp extends React.PureComponent<Props, State> {
 
     return (
       <main className='contracts--App'>
-        <HelpOverlay md={introMd} />
+        <HelpOverlay md={introMd as string} />
         <header>
           <Tabs
             basePath={basePath}
diff --git a/packages/page-contracts/src/store.ts b/packages/page-contracts/src/store.ts
index 565ab764a0..408594b7e3 100644
--- a/packages/page-contracts/src/store.ts
+++ b/packages/page-contracts/src/store.ts
@@ -2,6 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { ContractABIPre } from '@polkadot/api-contract/types';
 import { Hash } from '@polkadot/types/interfaces';
 import { CodeJson, CodeStored } from './types';
 
@@ -75,7 +76,7 @@ class Store extends EventEmitter {
   private addCode (json: CodeJson): void {
     try {
       const abi = json.abi
-        ? JSON.parse(json.abi)
+        ? JSON.parse(json.abi) as ContractABIPre
         : null;
 
       this.allCode[json.codeHash] = {
diff --git a/packages/page-council/src/Motions/Close.tsx b/packages/page-council/src/Motions/Close.tsx
index 638c7acdcb..15597b3cab 100644
--- a/packages/page-council/src/Motions/Close.tsx
+++ b/packages/page-council/src/Motions/Close.tsx
@@ -27,7 +27,7 @@ function Close ({ hash, idNumber, isDisabled, members, proposal }: Props): React
     <>
       {isOpen && (
         <Modal
-          header={t('Close proposal')}
+          header={t<string>('Close proposal')}
           size='large'
         >
           <Modal.Content>
@@ -39,21 +39,21 @@ function Close ({ hash, idNumber, isDisabled, members, proposal }: Props): React
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The proposal that will be affected. Once closed for the current voting round, it would need to be re-submitted to council for a subsequent voting round.')}</p>
+                <p>{t<string>('The proposal that will be affected. Once closed for the current voting round, it would need to be re-submitted to council for a subsequent voting round.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
               <Modal.Column>
                 <InputAddress
                   filter={members}
-                  help={t('Select the account you wish close the proposal with.')}
-                  label={t('sending account')}
+                  help={t<string>('Select the account you wish close the proposal with.')}
+                  label={t<string>('sending account')}
                   onChange={setAccountId}
                   type='account'
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The council account that will apply the close for the current round.')}</p>
+                <p>{t<string>('The council account that will apply the close for the current round.')}</p>
               </Modal.Column>
             </Modal.Columns>
           </Modal.Content>
@@ -70,7 +70,7 @@ function Close ({ hash, idNumber, isDisabled, members, proposal }: Props): React
       <Button
         icon='cancel'
         isDisabled={isDisabled}
-        label={t('Close')}
+        label={t<string>('Close')}
         onClick={toggleOpen}
       />
     </>
diff --git a/packages/page-council/src/Motions/Motion.tsx b/packages/page-council/src/Motions/Motion.tsx
index 4676703134..2db093011f 100644
--- a/packages/page-council/src/Motions/Motion.tsx
+++ b/packages/page-council/src/Motions/Motion.tsx
@@ -24,7 +24,7 @@ interface Props {
   prime: AccountId | null;
 }
 
-function Motion ({ className, isMember, members, motion: { hash, proposal, votes }, prime }: Props): React.ReactElement<Props> | null {
+function Motion ({ className = '', isMember, members, motion: { hash, proposal, votes }, prime }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
   const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []);
 
diff --git a/packages/page-council/src/Motions/ProposeExternal.tsx b/packages/page-council/src/Motions/ProposeExternal.tsx
index 5b95699268..2bc4cb7f39 100644
--- a/packages/page-council/src/Motions/ProposeExternal.tsx
+++ b/packages/page-council/src/Motions/ProposeExternal.tsx
@@ -17,7 +17,7 @@ interface Props {
   members: string[];
 }
 
-function ProposeExternal ({ className, isMember, members }: Props): React.ReactElement<Props> {
+function ProposeExternal ({ className = '', isMember, members }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const [isVisible, toggleVisible] = useToggle();
@@ -44,13 +44,13 @@ function ProposeExternal ({ className, isMember, members }: Props): React.ReactE
       <Button
         icon='add'
         isDisabled={!isMember}
-        label={t('Propose external')}
+        label={t<string>('Propose external')}
         onClick={toggleVisible}
       />
       {isVisible && (
         <Modal
           className={className}
-          header={t('Propose external (majority)')}
+          header={t<string>('Propose external (majority)')}
           size='large'
         >
           <Modal.Content>
@@ -58,29 +58,29 @@ function ProposeExternal ({ className, isMember, members }: Props): React.ReactE
               <Modal.Column>
                 <InputAddress
                   filter={members}
-                  help={t('Select the account you wish to make the proposal with.')}
-                  label={t('propose from account')}
+                  help={t<string>('Select the account you wish to make the proposal with.')}
+                  label={t<string>('propose from account')}
                   onChange={setAcountId}
                   type='account'
                   withLabel
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The council account for the proposal. The selection is filtered by the current members.')}</p>
+                <p>{t<string>('The council account for the proposal. The selection is filtered by the current members.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
               <Modal.Column>
                 <Input
                   autoFocus
-                  help={t('The preimage hash of the proposal')}
-                  label={t('preimage hash')}
+                  help={t<string>('The preimage hash of the proposal')}
+                  label={t<string>('preimage hash')}
                   onChange={_onChangeHash}
                   value={hash}
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The hash of the proposal image, either already submitted or valid for the specific call.')}</p>
+                <p>{t<string>('The hash of the proposal image, either already submitted or valid for the specific call.')}</p>
               </Modal.Column>
             </Modal.Columns>
           </Modal.Content>
@@ -90,7 +90,7 @@ function ProposeExternal ({ className, isMember, members }: Props): React.ReactE
               icon='plus'
               isDisabled={!threshold || !members.includes(accountId || '') || !proposal}
               isPrimary
-              label={t('Propose')}
+              label={t<string>('Propose')}
               onStart={toggleVisible}
               params={[threshold, proposal]}
               tx='council.propose'
diff --git a/packages/page-council/src/Motions/ProposeMotion.tsx b/packages/page-council/src/Motions/ProposeMotion.tsx
index 4c6356dc3b..8b442342d5 100644
--- a/packages/page-council/src/Motions/ProposeMotion.tsx
+++ b/packages/page-council/src/Motions/ProposeMotion.tsx
@@ -54,12 +54,12 @@ function Propose ({ isMember, members }: Props): React.ReactElement<Props> {
       <Button
         icon='add'
         isDisabled={!isMember}
-        label={t('Propose motion')}
+        label={t<string>('Propose motion')}
         onClick={toggleOpen}
       />
       {isOpen && (
         <Modal
-          header={t('Propose a council motion')}
+          header={t<string>('Propose a council motion')}
           size='large'
         >
           <Modal.Content>
@@ -67,43 +67,43 @@ function Propose ({ isMember, members }: Props): React.ReactElement<Props> {
               <Modal.Column>
                 <InputAddress
                   filter={members}
-                  help={t('Select the account you wish to make the proposal with.')}
-                  label={t('propose from account')}
+                  help={t<string>('Select the account you wish to make the proposal with.')}
+                  label={t<string>('propose from account')}
                   onChange={setAcountId}
                   type='account'
                   withLabel
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The council account for the proposal. The selection is filtered by the current members.')}</p>
+                <p>{t<string>('The council account for the proposal. The selection is filtered by the current members.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
               <Modal.Column>
                 <InputNumber
                   className='medium'
-                  help={t('The minimum number of council votes required to approve this motion')}
+                  help={t<string>('The minimum number of council votes required to approve this motion')}
                   isError={!threshold || threshold.eqn(0) || threshold.gtn(members.length)}
-                  label={t('threshold')}
+                  label={t<string>('threshold')}
                   onChange={_setThreshold}
-                  placeholder={t('Positive number between 1 and {{memberCount}}', { replace: { memberCount: members.length } })}
+                  placeholder={t<string>('Positive number between 1 and {{memberCount}}', { replace: { memberCount: members.length } })}
                   value={threshold || new BN(0)}
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The desired threshold. Here set to a default of 50%+1, as applicable for general proposals.')}</p>
+                <p>{t<string>('The desired threshold. Here set to a default of 50%+1, as applicable for general proposals.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
               <Modal.Column>
                 <Extrinsic
                   defaultValue={apiDefaultTxSudo}
-                  label={t('proposal')}
+                  label={t<string>('proposal')}
                   onChange={_setMethod}
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The actual proposal to make, based on the selected call and parameters thereof.')}</p>
+                <p>{t<string>('The actual proposal to make, based on the selected call and parameters thereof.')}</p>
               </Modal.Column>
             </Modal.Columns>
           </Modal.Content>
@@ -111,7 +111,7 @@ function Propose ({ isMember, members }: Props): React.ReactElement<Props> {
             <TxButton
               accountId={accountId}
               isDisabled={!method || !isThresholdValid}
-              label={t('Propose')}
+              label={t<string>('Propose')}
               params={[threshold, method]}
               tx='council.propose'
             />
diff --git a/packages/page-council/src/Motions/Slashing.tsx b/packages/page-council/src/Motions/Slashing.tsx
index 95a5ac49b7..134ab42add 100644
--- a/packages/page-council/src/Motions/Slashing.tsx
+++ b/packages/page-council/src/Motions/Slashing.tsx
@@ -22,7 +22,7 @@ interface Option {
   value: number;
 }
 
-function Slashing ({ className, isMember, members }: Props): React.ReactElement<Props> {
+function Slashing ({ className = '', isMember, members }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const slashes = useAvailableSlashes();
@@ -36,7 +36,7 @@ function Slashing ({ className, isMember, members }: Props): React.ReactElement<
   useEffect((): void => {
     setEras(
       (slashes || []).map(([era, slashes]): Option => ({
-        text: t('era {{era}}, {{count}} slashes', {
+        text: t<string>('era {{era}}, {{count}} slashes', {
           replace: {
             count: slashes.length,
             era: era.toNumber()
@@ -62,13 +62,13 @@ function Slashing ({ className, isMember, members }: Props): React.ReactElement<
       <Button
         icon='cancel'
         isDisabled={!isMember || !slashes.length}
-        label={t('Cancel slashes')}
+        label={t<string>('Cancel slashes')}
         onClick={toggleVisible}
       />
       {isVisible && (
         <Modal
           className={className}
-          header={t('Revert pending slashes')}
+          header={t<string>('Revert pending slashes')}
           size='large'
         >
           <Modal.Content>
@@ -76,15 +76,15 @@ function Slashing ({ className, isMember, members }: Props): React.ReactElement<
               <Modal.Column>
                 <InputAddress
                   filter={members}
-                  help={t('Select the account you wish to make the proposal with.')}
-                  label={t('propose from account')}
+                  help={t<string>('Select the account you wish to make the proposal with.')}
+                  label={t<string>('propose from account')}
                   onChange={setAcountId}
                   type='account'
                   withLabel
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The council account for the proposal. The selection is filtered by the current members.')}</p>
+                <p>{t<string>('The council account for the proposal. The selection is filtered by the current members.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
@@ -93,8 +93,8 @@ function Slashing ({ className, isMember, members }: Props): React.ReactElement<
                   ? (
                     <Dropdown
                       defaultValue={eras[0].value}
-                      help={t('The unapplied slashed era to cancel.')}
-                      label={t('the era to cancel for')}
+                      help={t<string>('The unapplied slashed era to cancel.')}
+                      label={t<string>('the era to cancel for')}
                       onChange={setSelectedEra}
                       options={eras}
                     />
@@ -102,14 +102,14 @@ function Slashing ({ className, isMember, members }: Props): React.ReactElement<
                   : (
                     <Input
                       isDisabled
-                      label={t('the era to cancel for')}
-                      value={t('no unapplied slashes found')}
+                      label={t<string>('the era to cancel for')}
+                      value={t<string>('no unapplied slashes found')}
                     />
                   )
                 }
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The specific eras on which there are unapplied slashes. For each era a separate proposal is to be made.')}</p>
+                <p>{t<string>('The specific eras on which there are unapplied slashes. For each era a separate proposal is to be made.')}</p>
               </Modal.Column>
             </Modal.Columns>
           </Modal.Content>
@@ -119,7 +119,7 @@ function Slashing ({ className, isMember, members }: Props): React.ReactElement<
               icon='repeat'
               isDisabled={!threshold || !members.includes(accountId || '') || !proposal}
               isPrimary
-              label={t('Revert')}
+              label={t<string>('Revert')}
               onStart={toggleVisible}
               params={[threshold, proposal]}
               tx='council.propose'
diff --git a/packages/page-council/src/Motions/Voting.tsx b/packages/page-council/src/Motions/Voting.tsx
index 4ed94f0ac8..2f8172e980 100644
--- a/packages/page-council/src/Motions/Voting.tsx
+++ b/packages/page-council/src/Motions/Voting.tsx
@@ -46,7 +46,7 @@ function Voting ({ hash, idNumber, isDisabled, members, prime, proposal }: Props
     <>
       {isVotingOpen && (
         <Modal
-          header={t('Vote on proposal')}
+          header={t<string>('Vote on proposal')}
           size='large'
         >
           <Modal.Content>
@@ -58,7 +58,7 @@ function Voting ({ hash, idNumber, isDisabled, members, prime, proposal }: Props
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The proposal that is being voted on. It will pass when the threshold is reached.')}</p>
+                <p>{t<string>('The proposal that is being voted on. It will pass when the threshold is reached.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
@@ -69,7 +69,7 @@ function Voting ({ hash, idNumber, isDisabled, members, prime, proposal }: Props
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The council account for this vote. The selection is filtered by the current members.')}</p>
+                <p>{t<string>('The council account for this vote. The selection is filtered by the current members.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
@@ -80,12 +80,12 @@ function Voting ({ hash, idNumber, isDisabled, members, prime, proposal }: Props
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The vote to record for this proposal, either for or against.')}</p>
+                <p>{t<string>('The vote to record for this proposal, either for or against.')}</p>
               </Modal.Column>
             </Modal.Columns>
             {isPrime && (
               <article className='warning'>
-                <div><Icon name='warning sign' />{t('You are voting with this collective\'s prime account. The vote will be the default outcome in case of any abstentions.')}</div>
+                <div><Icon name='warning sign' />{t<string>('You are voting with this collective\'s prime account. The vote will be the default outcome in case of any abstentions.')}</div>
               </article>
             )}
           </Modal.Content>
@@ -101,7 +101,7 @@ function Voting ({ hash, idNumber, isDisabled, members, prime, proposal }: Props
       <Button
         icon='check'
         isDisabled={isDisabled}
-        label={t('Vote')}
+        label={t<string>('Vote')}
         onClick={toggleVoting}
       />
     </>
diff --git a/packages/page-council/src/Motions/index.tsx b/packages/page-council/src/Motions/index.tsx
index 3380165f21..f4d3cf07a2 100644
--- a/packages/page-council/src/Motions/index.tsx
+++ b/packages/page-council/src/Motions/index.tsx
@@ -21,7 +21,7 @@ interface Props {
   prime: AccountId | null;
 }
 
-function Proposals ({ className, motions, prime }: Props): React.ReactElement<Props> {
+function Proposals ({ className = '', motions, prime }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { isMember, members } = useMembers();
 
@@ -51,7 +51,7 @@ function Proposals ({ className, motions, prime }: Props): React.ReactElement<Pr
         />
       </Button.Group>
       <Table
-        empty={motions && t('No council motions')}
+        empty={motions && t<string>('No council motions')}
         header={header}
       >
         {motions?.map((motion: DeriveCollectiveProposal): React.ReactNode => (
diff --git a/packages/page-council/src/Motions/useAvailableSlashes.ts b/packages/page-council/src/Motions/useAvailableSlashes.ts
index 5afc2738a4..d9a81f9912 100644
--- a/packages/page-council/src/Motions/useAvailableSlashes.ts
+++ b/packages/page-council/src/Motions/useAvailableSlashes.ts
@@ -41,7 +41,7 @@ export default function useAvailableSlashes (): [BN, UnappliedSlash[]][] {
                 .filter(([, slashes]): boolean => slashes.length !== 0)
             );
           });
-        })();
+        })().catch(console.error);
       }
     }
 
diff --git a/packages/page-council/src/Overview/Candidate.tsx b/packages/page-council/src/Overview/Candidate.tsx
index e3da6310a0..4f198f56b6 100644
--- a/packages/page-council/src/Overview/Candidate.tsx
+++ b/packages/page-council/src/Overview/Candidate.tsx
@@ -18,7 +18,7 @@ interface Props {
   voters?: AccountId[];
 }
 
-function Candidate ({ address, balance, className, isPrime, voters }: Props): React.ReactElement<Props> {
+function Candidate ({ address, balance, className = '', isPrime, voters }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
@@ -30,8 +30,8 @@ function Candidate ({ address, balance, className, isPrime, voters }: Props): Re
         {isPrime && (
           <Tag
             color='green'
-            hover={t('Current prime member, default voting')}
-            label={t('prime voter')}
+            hover={t<string>('Current prime member, default voting')}
+            label={t<string>('prime voter')}
           />
         )}
       </td>
diff --git a/packages/page-council/src/Overview/Candidates.tsx b/packages/page-council/src/Overview/Candidates.tsx
index d83d27c73e..6a58c5def2 100644
--- a/packages/page-council/src/Overview/Candidates.tsx
+++ b/packages/page-council/src/Overview/Candidates.tsx
@@ -32,7 +32,7 @@ function Candidates ({ allVotes = {}, electionsInfo }: Props): React.ReactElemen
   return (
     <>
       <Table
-        empty={electionsInfo && t('No runners up found')}
+        empty={electionsInfo && t<string>('No runners up found')}
         header={headerRunners}
       >
         {electionsInfo?.runnersUp.map(([accountId, balance]): React.ReactNode => (
@@ -45,7 +45,7 @@ function Candidates ({ allVotes = {}, electionsInfo }: Props): React.ReactElemen
         ))}
       </Table>
       <Table
-        empty={electionsInfo && t('No candidates found')}
+        empty={electionsInfo && t<string>('No candidates found')}
         header={headerCandidates}
       >
         {electionsInfo?.candidates.map((accountId): React.ReactNode => (
diff --git a/packages/page-council/src/Overview/Members.tsx b/packages/page-council/src/Overview/Members.tsx
index cb830b93d3..da71001602 100644
--- a/packages/page-council/src/Overview/Members.tsx
+++ b/packages/page-council/src/Overview/Members.tsx
@@ -17,7 +17,7 @@ interface Props extends ComponentProps {
   prime?: AccountId | null;
 }
 
-function Members ({ allVotes = {}, className, electionsInfo, prime }: Props): React.ReactElement<Props> {
+function Members ({ allVotes = {}, className = '', electionsInfo, prime }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const header = useMemo(() => [
@@ -28,7 +28,7 @@ function Members ({ allVotes = {}, className, electionsInfo, prime }: Props): Re
   return (
     <Table
       className={className}
-      empty={electionsInfo && t('No members found')}
+      empty={electionsInfo && t<string>('No members found')}
       header={header}
     >
       {electionsInfo?.members.map(([accountId, balance]): React.ReactNode => (
diff --git a/packages/page-council/src/Overview/SubmitCandidacy.tsx b/packages/page-council/src/Overview/SubmitCandidacy.tsx
index 7d6b3a31ea..03b91fe43d 100644
--- a/packages/page-council/src/Overview/SubmitCandidacy.tsx
+++ b/packages/page-council/src/Overview/SubmitCandidacy.tsx
@@ -21,7 +21,7 @@ function SubmitCandidacy ({ electionsInfo }: Props): React.ReactElement<Props> {
     <>
       {isOpen && (
         <Modal
-          header={t('Submit your council candidacy')}
+          header={t<string>('Submit your council candidacy')}
           onClose={onClose}
           size='large'
         >
@@ -29,14 +29,14 @@ function SubmitCandidacy ({ electionsInfo }: Props): React.ReactElement<Props> {
             <Modal.Columns>
               <Modal.Column>
                 <InputAddress
-                  help={t('Select the account you wish to submit for candidacy.')}
-                  label={t('candidate account')}
+                  help={t<string>('Select the account you wish to submit for candidacy.')}
+                  label={t<string>('candidate account')}
                   onChange={setAcountId}
                   type='account'
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('This account will appear in the list of candidates. With enough votes in an election, it will become either a runner-up or a council member.')}</p>
+                <p>{t<string>('This account will appear in the list of candidates. With enough votes in an election, it will become either a runner-up or a council member.')}</p>
               </Modal.Column>
             </Modal.Columns>
           </Modal.Content>
@@ -58,7 +58,7 @@ function SubmitCandidacy ({ electionsInfo }: Props): React.ReactElement<Props> {
       <Button
         icon='add'
         isDisabled={!electionsInfo}
-        label={t('Submit candidacy')}
+        label={t<string>('Submit candidacy')}
         onClick={onOpen}
       />
     </>
diff --git a/packages/page-council/src/Overview/Summary.tsx b/packages/page-council/src/Overview/Summary.tsx
index 579d55f627..525912bda3 100644
--- a/packages/page-council/src/Overview/Summary.tsx
+++ b/packages/page-council/src/Overview/Summary.tsx
@@ -16,7 +16,7 @@ interface Props extends ComponentProps {
   className?: string;
 }
 
-function Summary ({ bestNumber, className, electionsInfo }: Props): React.ReactElement<Props> | null {
+function Summary ({ bestNumber, className = '', electionsInfo }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
 
   if (!electionsInfo) {
@@ -28,19 +28,19 @@ function Summary ({ bestNumber, className, electionsInfo }: Props): React.ReactE
   return (
     <SummaryBox className={className}>
       <section>
-        <CardSummary label={t('seats')}>
+        <CardSummary label={t<string>('seats')}>
           {formatNumber(members.length)}/{formatNumber(desiredSeats)}
         </CardSummary>
-        <CardSummary label={t('runners up')}>
+        <CardSummary label={t<string>('runners up')}>
           {formatNumber(runnersUp.length)}
         </CardSummary>
-        <CardSummary label={t('candidates')}>
+        <CardSummary label={t<string>('candidates')}>
           {formatNumber(candidateCount)}
         </CardSummary>
       </section>
       {voteCount && (
         <section>
-          <CardSummary label={t('voting round')}>
+          <CardSummary label={t<string>('voting round')}>
             #{formatNumber(voteCount)}
           </CardSummary>
         </section>
@@ -48,7 +48,7 @@ function Summary ({ bestNumber, className, electionsInfo }: Props): React.ReactE
       {bestNumber && termDuration?.gtn(0) && (
         <section>
           <CardSummary
-            label={t('term progress')}
+            label={t<string>('term progress')}
             progress={{
               total: termDuration,
               value: bestNumber.mod(termDuration),
diff --git a/packages/page-council/src/Overview/Vote.tsx b/packages/page-council/src/Overview/Vote.tsx
index 438468c84c..eb43cb8a0a 100644
--- a/packages/page-council/src/Overview/Vote.tsx
+++ b/packages/page-council/src/Overview/Vote.tsx
@@ -56,26 +56,26 @@ function Vote ({ electionsInfo }: Props): React.ReactElement<Props> {
       <Button
         icon='check'
         isDisabled={available.length === 0}
-        label={t('Vote')}
+        label={t<string>('Vote')}
         onClick={toggleVisible}
       />
       {isVisible && (
         <Modal
-          header={t('Vote for current candidates')}
+          header={t<string>('Vote for current candidates')}
           size='large'
         >
           <Modal.Content>
             <Modal.Columns>
               <Modal.Column>
                 <InputAddress
-                  help={t('This account will be use to approve each candidate.')}
-                  label={t('voting account')}
+                  help={t<string>('This account will be use to approve each candidate.')}
+                  label={t<string>('voting account')}
                   onChange={setAccountId}
                   type='account'
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The vote will be recorded for the selected account.')}</p>
+                <p>{t<string>('The vote will be recorded for the selected account.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
@@ -86,24 +86,24 @@ function Vote ({ electionsInfo }: Props): React.ReactElement<Props> {
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The value associated with this vote. The amount will be locked (not available for transfer) and used in all subsequent elections.')}</p>
+                <p>{t<string>('The value associated with this vote. The amount will be locked (not available for transfer) and used in all subsequent elections.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
               <Modal.Column>
                 <InputAddressMulti
                   available={available}
-                  availableLabel={t('council candidates')}
+                  availableLabel={t<string>('council candidates')}
                   defaultValue={defaultVotes}
-                  help={t('Select and order council candidates you wish to vote for.')}
+                  help={t<string>('Select and order council candidates you wish to vote for.')}
                   maxCount={MAX_VOTES}
                   onChange={setVotes}
-                  valueLabel={t('my ordered votes')}
+                  valueLabel={t<string>('my ordered votes')}
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The votes for the members, runner-ups and candidates. These should be ordered based on your priority.')}</p>
-                <p>{t('In calculating the election outcome, this prioritized vote ordering will be used to determine the final score for the candidates.')}</p>
+                <p>{t<string>('The votes for the members, runner-ups and candidates. These should be ordered based on your priority.')}</p>
+                <p>{t<string>('In calculating the election outcome, this prioritized vote ordering will be used to determine the final score for the candidates.')}</p>
               </Modal.Column>
             </Modal.Columns>
           </Modal.Content>
diff --git a/packages/page-council/src/Overview/index.tsx b/packages/page-council/src/Overview/index.tsx
index d5411d1b09..c91490feda 100644
--- a/packages/page-council/src/Overview/index.tsx
+++ b/packages/page-council/src/Overview/index.tsx
@@ -36,7 +36,7 @@ function transformVotes (entries: DeriveCouncilVotes): Record<string, AccountId[
   }, {});
 }
 
-function Overview ({ className, prime }: Props): React.ReactElement<Props> {
+function Overview ({ className = '', prime }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []);
   const electionsInfo = useCall<DeriveElectionsInfo>(api.derive.elections.info, []);
diff --git a/packages/page-council/src/index.tsx b/packages/page-council/src/index.tsx
index 41baff6753..f057b42d4a 100644
--- a/packages/page-council/src/index.tsx
+++ b/packages/page-council/src/index.tsx
@@ -37,11 +37,11 @@ function CouncilApp ({ basePath, className }: Props): React.ReactElement<Props>
     {
       isRoot: true,
       name: 'overview',
-      text: t('Council overview')
+      text: t<string>('Council overview')
     },
     {
       name: 'motions',
-      text: t('Motions ({{count}})', { replace: { count: numMotions } })
+      text: t<string>('Motions ({{count}})', { replace: { count: numMotions } })
     }
   ], [numMotions, t]);
 
diff --git a/packages/page-dashboard/src/Entry.tsx b/packages/page-dashboard/src/Entry.tsx
index 0de4280e2f..330b784315 100644
--- a/packages/page-dashboard/src/Entry.tsx
+++ b/packages/page-dashboard/src/Entry.tsx
@@ -14,7 +14,7 @@ interface Props {
   route: Route;
 }
 
-function Entry ({ className, route: { icon, name, text } }: Props): React.ReactElement<Props> {
+function Entry ({ className = '', route: { icon, name, text } }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
       <Link to={`/${name}`}>
diff --git a/packages/page-dashboard/src/Spacer.tsx b/packages/page-dashboard/src/Spacer.tsx
index 78710aedcf..829a3d6e1a 100644
--- a/packages/page-dashboard/src/Spacer.tsx
+++ b/packages/page-dashboard/src/Spacer.tsx
@@ -4,9 +4,7 @@
 
 import React from 'react';
 
-type Props = {};
-
-function Spacer (): React.ReactElement<Props> {
+function Spacer (): React.ReactElement {
   return (
     <div />
   );
diff --git a/packages/page-democracy/src/Overview/DispatchQueue.tsx b/packages/page-democracy/src/Overview/DispatchQueue.tsx
index 863ea1144a..8444965857 100644
--- a/packages/page-democracy/src/Overview/DispatchQueue.tsx
+++ b/packages/page-democracy/src/Overview/DispatchQueue.tsx
@@ -30,7 +30,7 @@ function DispatchQueue ({ className }: Props): React.ReactElement<Props> | null
   return (
     <Table
       className={className}
-      empty={queued && t('Nothing queued for execution')}
+      empty={queued && t<string>('Nothing queued for execution')}
       header={header}
     >
       {queued?.map((entry): React.ReactNode => (
diff --git a/packages/page-democracy/src/Overview/External.tsx b/packages/page-democracy/src/Overview/External.tsx
index 4d53c092d3..dd4cb9b1d2 100644
--- a/packages/page-democracy/src/Overview/External.tsx
+++ b/packages/page-democracy/src/Overview/External.tsx
@@ -17,7 +17,7 @@ interface Props {
   value: DeriveProposalExternal;
 }
 
-function External ({ className, value: { image, imageHash, threshold } }: Props): React.ReactElement<Props> | null {
+function External ({ className = '', value: { image, imageHash, threshold } }: Props): React.ReactElement<Props> | null {
   return (
     <tr className={className}>
       <ProposalCell
diff --git a/packages/page-democracy/src/Overview/ExternalCell.tsx b/packages/page-democracy/src/Overview/ExternalCell.tsx
index 9f77ffc259..3af86cd300 100644
--- a/packages/page-democracy/src/Overview/ExternalCell.tsx
+++ b/packages/page-democracy/src/Overview/ExternalCell.tsx
@@ -17,7 +17,7 @@ interface Props {
   value: Hash;
 }
 
-function ExternalCell ({ className, value }: Props): React.ReactElement<Props> | null {
+function ExternalCell ({ className = '', value }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const preimage = useCall<DeriveProposalImage>(api.derive.democracy.preimage, [value]);
@@ -33,7 +33,7 @@ function ExternalCell ({ className, value }: Props): React.ReactElement<Props> |
       withPadding
     >
       <CallExpander
-        labelHash={t('proposal hash')}
+        labelHash={t<string>('proposal hash')}
         value={preimage.proposal}
         withHash
       />
diff --git a/packages/page-democracy/src/Overview/Externals.tsx b/packages/page-democracy/src/Overview/Externals.tsx
index 4dcf3fd0e6..478f6d72ba 100644
--- a/packages/page-democracy/src/Overview/Externals.tsx
+++ b/packages/page-democracy/src/Overview/Externals.tsx
@@ -30,7 +30,7 @@ function Externals ({ className }: Props): React.ReactElement<Props> | null {
   return (
     <Table
       className={className}
-      empty={external === null && t('No external proposal')}
+      empty={external === null && t<string>('No external proposal')}
       header={header}
     >
       {external && <External value={external} />}
diff --git a/packages/page-democracy/src/Overview/Fasttrack.tsx b/packages/page-democracy/src/Overview/Fasttrack.tsx
index b585467615..59fb5b7566 100644
--- a/packages/page-democracy/src/Overview/Fasttrack.tsx
+++ b/packages/page-democracy/src/Overview/Fasttrack.tsx
@@ -52,34 +52,34 @@ function Fasttrack ({ imageHash, threshold }: Props): React.ReactElement<Props>
     <>
       {isFasttrackOpen && (
         <Modal
-          header={t('Fast track proposal')}
+          header={t<string>('Fast track proposal')}
           size='small'
         >
           <Modal.Content>
             <InputAddress
               filter={members}
-              help={t('Select the account you wish to make the proposal with.')}
-              label={t('propose from account')}
+              help={t<string>('Select the account you wish to make the proposal with.')}
+              label={t<string>('propose from account')}
               onChange={setAcountId}
               type='account'
               withLabel
             />
             <Input
-              help={t('The external proposal to send to the technical committee')}
+              help={t<string>('The external proposal to send to the technical committee')}
               isDisabled
-              label={t('preimage hash')}
-              value={imageHash}
+              label={t<string>('preimage hash')}
+              value={imageHash.toHex()}
             />
             <InputNumber
               autoFocus
-              help={t('The voting period to apply in blocks')}
-              label={t('voting period')}
+              help={t<string>('The voting period to apply in blocks')}
+              label={t<string>('voting period')}
               onChange={setVotingBlocks}
               value={votingBlocks}
             />
             <InputNumber
-              help={t('The delay period to apply in blocks')}
-              label={t('delay')}
+              help={t<string>('The delay period to apply in blocks')}
+              label={t<string>('delay')}
               onChange={setDelayBlocks}
               value={delayBlocks}
             />
@@ -90,7 +90,7 @@ function Fasttrack ({ imageHash, threshold }: Props): React.ReactElement<Props>
               icon='fast forward'
               isDisabled={!accountId || !proposal || !memberThreshold}
               isPrimary
-              label={t('Fast track')}
+              label={t<string>('Fast track')}
               onStart={toggleFasttrack}
               params={[memberThreshold, proposal]}
               tx='technicalCommittee.propose'
@@ -101,7 +101,7 @@ function Fasttrack ({ imageHash, threshold }: Props): React.ReactElement<Props>
       <Button
         icon='fast forward'
         isDisabled={!allowFast}
-        label={t('Fast track')}
+        label={t<string>('Fast track')}
         onClick={toggleFasttrack}
       />
     </>
diff --git a/packages/page-democracy/src/Overview/PreImage.tsx b/packages/page-democracy/src/Overview/PreImage.tsx
index 5c1553c917..7923f82c95 100644
--- a/packages/page-democracy/src/Overview/PreImage.tsx
+++ b/packages/page-democracy/src/Overview/PreImage.tsx
@@ -23,13 +23,13 @@ interface Props {
 
 const ZERO_HASH = blake2AsHex('');
 
-function PreImage ({ className, imageHash, isImminent: propsIsImminent, 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 [{ encodedHash, encodedProposal }, setHash] = useState<{ encodedHash: string; encodedProposal: string }>({ encodedHash: ZERO_HASH, encodedProposal: '' });
-  const [proposal, setProposal] = useState<any>();
+  const [proposal, setProposal] = useState<SubmittableExtrinsic>();
 
   useEffect((): void => {
     const encodedProposal = (proposal as SubmittableExtrinsic)?.method.toHex() || '';
@@ -44,18 +44,18 @@ function PreImage ({ className, imageHash, isImminent: propsIsImminent, onClose
   return (
     <Modal
       className={className}
-      header={t('Submit preimage')}
+      header={t<string>('Submit preimage')}
       size='large'
     >
       <Modal.Content>
         <Modal.Columns>
           <Modal.Column>
             <InputAddress
-              help={t('The account you want to register the preimage from')}
-              label={t('send from account')}
+              help={t<string>('The account you want to register the preimage from')}
+              label={t<string>('send from account')}
               labelExtra={
                 <Available
-                  label={<span className='label'>{t('transferrable')}</span>}
+                  label={<span className='label'>{t<string>('transferrable')}</span>}
                   params={accountId}
                 />
               }
@@ -64,40 +64,40 @@ function PreImage ({ className, imageHash, isImminent: propsIsImminent, onClose
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('This account will pay the fees for the preimage, based on the size thereof.')}</p>
+            <p>{t<string>('This account will pay the fees for the preimage, based on the size thereof.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Modal.Columns>
           <Modal.Column>
             <Extrinsic
               defaultValue={apiDefaultTxSudo}
-              label={t('propose')}
+              label={t<string>('propose')}
               onChange={setProposal}
             />
             <Input
-              help={t('The hash of the selected proposal, use it for submitting the proposal')}
+              help={t<string>('The hash of the selected proposal, use it for submitting the proposal')}
               isDisabled
               isDisabledError={!isMatched}
-              label={t('preimage hash')}
+              label={t<string>('preimage hash')}
               value={encodedHash}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The image (proposal) will be stored on-chain against the hash of the contents.')}</p>
-            <p>{t('When submitting a proposal the hash needs to be known. Proposals can be submitted with hash-only, but upon dispatch the preimage needs to be available.')}</p>
+            <p>{t<string>('The image (proposal) will be stored on-chain against the hash of the contents.')}</p>
+            <p>{t<string>('When submitting a proposal the hash needs to be known. Proposals can be submitted with hash-only, but upon dispatch the preimage needs to be available.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Modal.Columns>
           <Modal.Column>
             <Toggle
               className='toggleImminent'
-              label={t('imminent preimage (proposal already passed)')}
+              label={t<string>('imminent preimage (proposal already passed)')}
               onChange={setIsImminent}
               value={isImminent}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('Only applicable if the proposal has already passed and is ready for dispatch.')}</p>
+            <p>{t<string>('Only applicable if the proposal has already passed and is ready for dispatch.')}</p>
           </Modal.Column>
         </Modal.Columns>
       </Modal.Content>
@@ -107,7 +107,7 @@ function PreImage ({ className, imageHash, isImminent: propsIsImminent, onClose
           icon='add'
           isDisabled={!proposal || !accountId || !isMatched || !encodedProposal}
           isPrimary
-          label={t('Submit preimage')}
+          label={t<string>('Submit preimage')}
           onStart={onClose}
           params={[encodedProposal]}
           tx={isImminent ? 'democracy.noteImminentPreimage' : 'democracy.notePreimage'}
diff --git a/packages/page-democracy/src/Overview/PreImageButton.tsx b/packages/page-democracy/src/Overview/PreImageButton.tsx
index 9e21e3bcec..b099208b37 100644
--- a/packages/page-democracy/src/Overview/PreImageButton.tsx
+++ b/packages/page-democracy/src/Overview/PreImageButton.tsx
@@ -24,7 +24,7 @@ function PreImageButton ({ imageHash, isImminent }: Props): React.ReactElement<P
     <>
       <Button
         icon='plus'
-        label={t('Preimage')}
+        label={t<string>('Preimage')}
         onClick={togglePreimage}
       />
       {isPreimageOpen && (
diff --git a/packages/page-democracy/src/Overview/Proposal.tsx b/packages/page-democracy/src/Overview/Proposal.tsx
index fe8415d498..eefc0f9608 100644
--- a/packages/page-democracy/src/Overview/Proposal.tsx
+++ b/packages/page-democracy/src/Overview/Proposal.tsx
@@ -20,7 +20,7 @@ interface Props {
   value: DeriveProposal;
 }
 
-function Proposal ({ className, value: { balance, image, imageHash, index, 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);
 
@@ -39,11 +39,11 @@ function Proposal ({ className, value: { balance, image, imageHash, index, propo
       </td>
       <td>
         {seconding.length !== 0 && (
-          <Expander summary={t('Seconds ({{count}})', { replace: { count: seconding.length } })}>
+          <Expander summary={t<string>('Seconds ({{count}})', { replace: { count: seconding.length } })}>
             {seconding.map((address, count): React.ReactNode => (
               <AddressMini
                 className='identityIcon'
-                key={`${count}:${address}`}
+                key={`${count}:${address.toHex()}`}
                 value={address}
                 withBalance={false}
                 withShrink
diff --git a/packages/page-democracy/src/Overview/ProposalCell.tsx b/packages/page-democracy/src/Overview/ProposalCell.tsx
index 8efcf4cc0d..594da3413c 100644
--- a/packages/page-democracy/src/Overview/ProposalCell.tsx
+++ b/packages/page-democracy/src/Overview/ProposalCell.tsx
@@ -22,13 +22,13 @@ interface Props {
 const METHOD_EXTE = ['externalPropose', 'externalProposeDefault', 'externalProposeMajority'];
 const METHOD_TREA = ['approveProposal', 'rejectProposal'];
 
-function ProposalCell ({ className, imageHash, proposal }: Props): React.ReactElement<Props> {
+function ProposalCell ({ className = '', imageHash, proposal }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   if (!proposal) {
     return (
       <td className={`${className} all`}>
-        <label>{t('preimage hash')}</label>
+        <label>{t<string>('preimage hash')}</label>
         {imageHash.toString()}
       </td>
     );
@@ -41,7 +41,7 @@ function ProposalCell ({ className, imageHash, proposal }: Props): React.ReactEl
   return (
     <td className={`${className} all`}>
       <CallExpander
-        labelHash={t('proposal hash')}
+        labelHash={t<string>('proposal hash')}
         value={proposal}
         withHash={!isTreasury && !isExternal}
       >
diff --git a/packages/page-democracy/src/Overview/Proposals.tsx b/packages/page-democracy/src/Overview/Proposals.tsx
index 65724c0411..82facf8454 100644
--- a/packages/page-democracy/src/Overview/Proposals.tsx
+++ b/packages/page-democracy/src/Overview/Proposals.tsx
@@ -31,7 +31,7 @@ function Proposals ({ className }: Props): React.ReactElement<Props> {
   return (
     <Table
       className={className}
-      empty={proposals && t('No active proposals')}
+      empty={proposals && t<string>('No active proposals')}
       header={header}
     >
       {proposals?.map((proposal): React.ReactNode => (
diff --git a/packages/page-democracy/src/Overview/Propose.tsx b/packages/page-democracy/src/Overview/Propose.tsx
index 89ed515d85..c9a8315650 100644
--- a/packages/page-democracy/src/Overview/Propose.tsx
+++ b/packages/page-democracy/src/Overview/Propose.tsx
@@ -16,7 +16,7 @@ interface Props {
   onClose: () => void;
 }
 
-function Propose ({ className, onClose }: Props): React.ReactElement<Props> {
+function Propose ({ className = '', onClose }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const [accountId, setAccountId] = useState<string | null>(null);
@@ -33,18 +33,18 @@ function Propose ({ className, onClose }: Props): React.ReactElement<Props> {
   return (
     <Modal
       className={className}
-      header={t('Submit proposal')}
+      header={t<string>('Submit proposal')}
       size='large'
     >
       <Modal.Content>
         <Modal.Columns>
           <Modal.Column>
             <InputAddress
-              help={t('The account you want to register the proposal from')}
-              label={t('send from account')}
+              help={t<string>('The account you want to register the proposal from')}
+              label={t<string>('send from account')}
               labelExtra={
                 <Available
-                  label={<span className='label'>{t('transferrable')}</span>}
+                  label={<span className='label'>{t<string>('transferrable')}</span>}
                   params={accountId}
                 />
               }
@@ -53,41 +53,41 @@ function Propose ({ className, onClose }: Props): React.ReactElement<Props> {
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The proposal will be registered from this account and the balance lock will be applied here.')}</p>
+            <p>{t<string>('The proposal will be registered from this account and the balance lock will be applied here.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Modal.Columns>
           <Modal.Column>
             <Input
               autoFocus
-              help={t('The preimage hash of the proposal')}
-              label={t('preimage hash')}
+              help={t<string>('The preimage hash of the proposal')}
+              label={t<string>('preimage hash')}
               onChange={_onChangeHash}
               value={hash}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The hash of the preimage for the proposal as previously submitted or intended.')}</p>
+            <p>{t<string>('The hash of the preimage for the proposal as previously submitted or intended.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Modal.Columns>
           <Modal.Column>
             <InputBalance
               defaultValue={api.consts.democracy.minimumDeposit}
-              help={t('The locked value for this proposal')}
+              help={t<string>('The locked value for this proposal')}
               isError={!hasMinLocked}
-              label={t('locked balance')}
+              label={t<string>('locked balance')}
               onChange={setBalance}
             />
             <InputBalance
               defaultValue={api.consts.democracy.minimumDeposit}
-              help={t('The minimum deposit required')}
+              help={t<string>('The minimum deposit required')}
               isDisabled
-              label={t('minimum deposit')}
+              label={t<string>('minimum deposit')}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The associated deposit for this proposal should be more then the minimum on-chain deposit required. It will be locked until the proposal passes.')}</p>
+            <p>{t<string>('The associated deposit for this proposal should be more then the minimum on-chain deposit required. It will be locked until the proposal passes.')}</p>
           </Modal.Column>
         </Modal.Columns>
       </Modal.Content>
@@ -97,7 +97,7 @@ function Propose ({ className, onClose }: Props): React.ReactElement<Props> {
           icon='add'
           isDisabled={!balance || !hasMinLocked || !isHashValid || !accountId}
           isPrimary
-          label={t('Submit proposal')}
+          label={t<string>('Submit proposal')}
           onStart={onClose}
           params={[hash, balance]}
           tx='democracy.propose'
diff --git a/packages/page-democracy/src/Overview/Referendum.tsx b/packages/page-democracy/src/Overview/Referendum.tsx
index 85fa1f4c51..d9c8376928 100644
--- a/packages/page-democracy/src/Overview/Referendum.tsx
+++ b/packages/page-democracy/src/Overview/Referendum.tsx
@@ -31,7 +31,7 @@ interface Percentages {
   turnout: string;
 }
 
-function Referendum ({ className, value: { allAye, allNay, image, imageHash, index, isPassing, status, voteCountAye, voteCountNay, votedAye, votedNay, votedTotal } }: Props): React.ReactElement<Props> | null {
+function Referendum ({ className = '', value: { allAye, allNay, image, imageHash, index, isPassing, status, voteCountAye, voteCountNay, votedAye, votedNay, votedTotal } }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []);
@@ -76,7 +76,7 @@ function Referendum ({ className, value: { allAye, allNay, image, imageHash, ind
       />
       <td className='number together ui--media-1200'>
         <BlockToTime blocks={remainBlock} />
-        {t('{{blocks}} blocks', { replace: { blocks: formatNumber(remainBlock) } })}
+        {t<string>('{{blocks}} blocks', { replace: { blocks: formatNumber(remainBlock) } })}
       </td>
       <td className='number together ui--media-1400'>
         <BlockToTime blocks={enactBlock.sub(bestNumber)} />
@@ -88,7 +88,7 @@ function Referendum ({ className, value: { allAye, allNay, image, imageHash, ind
             {/* <FormatBalance value={votedTotal} /> */}
             <div>{percentages.turnout}</div>
             {percentages.aye && (
-              <div>{t('{{percentage}} aye', { replace: { percentage: percentages.aye } })}</div>
+              <div>{t<string>('{{percentage}} aye', { replace: { percentage: percentages.aye } })}</div>
             )}
           </>
         )}
@@ -114,8 +114,8 @@ function Referendum ({ className, value: { allAye, allNay, image, imageHash, ind
           <Badge
             hover={
               isPassing
-                ? t('{{threshold}}, passing', { replace: { threshold } })
-                : t('{{threshold}}, not passing', { replace: { threshold } })
+                ? t<string>('{{threshold}}, passing', { replace: { threshold } })
+                : t<string>('{{threshold}}, not passing', { replace: { threshold } })
             }
             info={<Icon name={isPassing ? 'check' : 'cancel'} />}
             isTooltip
diff --git a/packages/page-democracy/src/Overview/ReferendumVotes.tsx b/packages/page-democracy/src/Overview/ReferendumVotes.tsx
index 923026bbb3..af6cb16403 100644
--- a/packages/page-democracy/src/Overview/ReferendumVotes.tsx
+++ b/packages/page-democracy/src/Overview/ReferendumVotes.tsx
@@ -28,9 +28,9 @@ const LOCKS = [1, 10, 20, 30, 40, 50, 60];
 
 let id = 0;
 
-function ReferendumVotes ({ change, className, count, index, isWinning, total, votes }: Props): React.ReactElement<Props> {
+function ReferendumVotes ({ change, className = '', count, index, isWinning, total, votes }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const [trigger] = useState(`votes-${index}-${++id}`);
+  const [trigger] = useState(`votes-${index.toString()}-${++id}`);
   const [sorted, setSorted] = useState<DeriveReferendumVote[]>([]);
 
   useEffect((): void => {
@@ -67,8 +67,8 @@ function ReferendumVotes ({ change, className, count, index, isWinning, total, v
                 <Tooltip
                   text={
                     isWinning
-                      ? t('The amount this total can be reduced by to change the referendum outcome. This assumes changes to the convictions of the existing votes, with no additional turnout.')
-                      : t('The amount this total should be increased by to change the referendum outcome. This assumes additional turnout with new votes at 1x conviction.')
+                      ? t<string>('The amount this total can be reduced by to change the referendum outcome. This assumes changes to the convictions of the existing votes, with no additional turnout.')
+                      : t<string>('The amount this total should be increased by to change the referendum outcome. This assumes additional turnout with new votes at 1x conviction.')
                   }
                   trigger={trigger}
                 />
diff --git a/packages/page-democracy/src/Overview/Referendums.tsx b/packages/page-democracy/src/Overview/Referendums.tsx
index 0fd732d9fe..5793fa4244 100644
--- a/packages/page-democracy/src/Overview/Referendums.tsx
+++ b/packages/page-democracy/src/Overview/Referendums.tsx
@@ -15,7 +15,7 @@ interface Props {
   referendums?: DeriveReferendumExt[];
 }
 
-function Referendums ({ className, referendums }: Props): React.ReactElement<Props> {
+function Referendums ({ className = '', referendums }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const header = useMemo(() => [
@@ -32,7 +32,7 @@ function Referendums ({ className, referendums }: Props): React.ReactElement<Pro
   return (
     <Table
       className={className}
-      empty={referendums && t('No active referendums')}
+      empty={referendums && t<string>('No active referendums')}
       header={header}
     >
       {referendums?.map((referendum): React.ReactNode => (
diff --git a/packages/page-democracy/src/Overview/Seconding.tsx b/packages/page-democracy/src/Overview/Seconding.tsx
index 77710b053e..a2f5e027cd 100644
--- a/packages/page-democracy/src/Overview/Seconding.tsx
+++ b/packages/page-democracy/src/Overview/Seconding.tsx
@@ -36,7 +36,7 @@ function Seconding ({ depositors, image, proposalId }: Props): React.ReactElemen
     <>
       {isSecondingOpen && (
         <Modal
-          header={t('Second proposal')}
+          header={t<string>('Second proposal')}
           size='large'
         >
           <Modal.Content>
@@ -48,21 +48,21 @@ function Seconding ({ depositors, image, proposalId }: Props): React.ReactElemen
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The proposal is in the queue for future referendums. One proposal from this list will move forward to voting.')}</p>
+                <p>{t<string>('The proposal is in the queue for future referendums. One proposal from this list will move forward to voting.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
               <Modal.Column>
                 <InputAddress
-                  help={t('Select the account you wish to second with. This will lock your funds until the proposal is either approved or rejected')}
-                  label={t('second with account')}
+                  help={t<string>('Select the account you wish to second with. This will lock your funds until the proposal is either approved or rejected')}
+                  label={t<string>('second with account')}
                   onChange={setAccountId}
                   type='account'
                   withLabel
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('Seconding a proposal that indicates your backing for the proposal. Proposals with greater interest moves up the queue for potential next referendums.')}</p>
+                <p>{t<string>('Seconding a proposal that indicates your backing for the proposal. Proposals with greater interest moves up the queue for potential next referendums.')}</p>
               </Modal.Column>
             </Modal.Columns>
           </Modal.Content>
@@ -72,7 +72,7 @@ function Seconding ({ depositors, image, proposalId }: Props): React.ReactElemen
               icon='sign-in'
               isDisabled={!accountId || isDepositor}
               isPrimary
-              label={t('Second')}
+              label={t<string>('Second')}
               onStart={toggleSeconding}
               params={
                 api.tx.democracy.second.meta.args.length === 2
@@ -86,7 +86,7 @@ function Seconding ({ depositors, image, proposalId }: Props): React.ReactElemen
       )}
       <Button
         icon='toggle off'
-        label={t('Second')}
+        label={t<string>('Second')}
         onClick={toggleSeconding}
       />
     </>
diff --git a/packages/page-democracy/src/Overview/Summary.tsx b/packages/page-democracy/src/Overview/Summary.tsx
index 84589c5961..ed92cbae23 100644
--- a/packages/page-democracy/src/Overview/Summary.tsx
+++ b/packages/page-democracy/src/Overview/Summary.tsx
@@ -25,25 +25,25 @@ function Summary ({ referendumCount }: Props): React.ReactElement<Props> {
   return (
     <SummaryBox>
       <section>
-        <CardSummary label={t('proposals')}>
+        <CardSummary label={t<string>('proposals')}>
           {formatNumber(activeProposals?.length)}
         </CardSummary>
-        <CardSummary label={t('total')}>
+        <CardSummary label={t<string>('total')}>
           {formatNumber(publicPropCount)}
         </CardSummary>
       </section>
       <section>
-        <CardSummary label={t('referenda')}>
+        <CardSummary label={t<string>('referenda')}>
           {formatNumber(referendumCount || 0)}
         </CardSummary>
-        <CardSummary label={t('total')}>
+        <CardSummary label={t<string>('total')}>
           {formatNumber(referendumTotal || 0)}
         </CardSummary>
       </section>
       {bestNumber && (
         <section className='ui--media-medium'>
           <CardSummary
-            label={t('launch period')}
+            label={t<string>('launch period')}
             progress={{
               total: api.consts.democracy.launchPeriod,
               value: bestNumber.mod(api.consts.democracy.launchPeriod).addn(1),
diff --git a/packages/page-democracy/src/Overview/TreasuryCell.tsx b/packages/page-democracy/src/Overview/TreasuryCell.tsx
index eb464de793..52890ffcdf 100644
--- a/packages/page-democracy/src/Overview/TreasuryCell.tsx
+++ b/packages/page-democracy/src/Overview/TreasuryCell.tsx
@@ -25,7 +25,7 @@ interface Value {
   value: TreasuryProposal;
 }
 
-function TreasuryCell ({ className, value }: Props): React.ReactElement<Props> | null {
+function TreasuryCell ({ className = '', value }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
   const [proposalId] = useState(value.unwrap());
   const proposal = useCall<TreasuryProposal | null>(api.query.treasury.proposals, [proposalId], {
diff --git a/packages/page-democracy/src/Overview/Voting.tsx b/packages/page-democracy/src/Overview/Voting.tsx
index ee840feb2a..8076dc5bce 100644
--- a/packages/page-democracy/src/Overview/Voting.tsx
+++ b/packages/page-democracy/src/Overview/Voting.tsx
@@ -43,9 +43,9 @@ function Voting ({ proposal, referendumId }: Props): React.ReactElement<Props> |
   );
 
   const convictionOpts = useMemo(() => [
-    { text: t('0.1x voting balance, no lockup period'), value: 0 },
+    { text: t<string>('0.1x voting balance, no lockup period'), value: 0 },
     ...CONVICTIONS.map(([value, lock]): { text: string; value: number } => ({
-      text: t('{{value}}x voting balance, locked for {{lock}}x enactment ({{period}} days)', {
+      text: t<string>('{{value}}x voting balance, locked for {{lock}}x enactment ({{period}} days)', {
         replace: {
           lock,
           period: (enact * lock).toFixed(2),
@@ -69,7 +69,7 @@ function Voting ({ proposal, referendumId }: Props): React.ReactElement<Props> |
     <>
       {isVotingOpen && (
         <Modal
-          header={t('Vote on proposal')}
+          header={t<string>('Vote on proposal')}
           size='large'
         >
           <Modal.Content>
@@ -81,7 +81,7 @@ function Voting ({ proposal, referendumId }: Props): React.ReactElement<Props> |
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('If this proposal is passed, the changes will be applied via dispatch and the deposit returned.')}</p>
+                <p>{t<string>('If this proposal is passed, the changes will be applied via dispatch and the deposit returned.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
@@ -89,7 +89,7 @@ function Voting ({ proposal, referendumId }: Props): React.ReactElement<Props> |
                 <VoteAccount onChange={setAccountId} />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The vote will be recorded for this account. If another account delegated to this one, the delegated votes will also be counted.')}</p>
+                <p>{t<string>('The vote will be recorded for this account. If another account delegated to this one, the delegated votes will also be counted.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
@@ -102,16 +102,16 @@ function Voting ({ proposal, referendumId }: Props): React.ReactElement<Props> |
                   />
                 )}
                 <Dropdown
-                  help={t('The conviction to use for this vote, with an appropriate lock period.')}
-                  label={t('conviction')}
+                  help={t<string>('The conviction to use for this vote, with an appropriate lock period.')}
+                  label={t<string>('conviction')}
                   onChange={setConviction}
                   options={convictionOpts}
                   value={conviction}
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The balance associated with the vote will be locked as per the conviction specified and will not be available for transfer during this period.')}</p>
-                <p>{t('Conviction locks do overlap and is additive, meaning that funds locked during a previous vote can be locked again.')}</p>
+                <p>{t<string>('The balance associated with the vote will be locked as per the conviction specified and will not be available for transfer during this period.')}</p>
+                <p>{t<string>('Conviction locks do overlap and is additive, meaning that funds locked during a previous vote can be locked again.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
@@ -122,7 +122,7 @@ function Voting ({ proposal, referendumId }: Props): React.ReactElement<Props> |
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('Register the vote for or against the proposal.')}</p>
+                <p>{t<string>('Register the vote for or against the proposal.')}</p>
               </Modal.Column>
             </Modal.Columns>
           </Modal.Content>
@@ -141,7 +141,7 @@ function Voting ({ proposal, referendumId }: Props): React.ReactElement<Props> |
       )}
       <Button
         icon='check'
-        label={t('Vote')}
+        label={t<string>('Vote')}
         onClick={toggleVoting}
       />
     </>
diff --git a/packages/page-democracy/src/Overview/index.tsx b/packages/page-democracy/src/Overview/index.tsx
index b46fc9032a..dacc7a97f9 100644
--- a/packages/page-democracy/src/Overview/index.tsx
+++ b/packages/page-democracy/src/Overview/index.tsx
@@ -35,12 +35,12 @@ function Overview ({ className }: Props): React.ReactElement<Props> {
       <Button.Group>
         <Button
           icon='add'
-          label={t('Submit preimage')}
+          label={t<string>('Submit preimage')}
           onClick={togglePreimage}
         />
         <Button
           icon='add'
-          label={t('Submit proposal')}
+          label={t<string>('Submit proposal')}
           onClick={togglePropose}
         />
       </Button.Group>
diff --git a/packages/page-democracy/src/index.tsx b/packages/page-democracy/src/index.tsx
index 95e1e07267..c2123da9cf 100644
--- a/packages/page-democracy/src/index.tsx
+++ b/packages/page-democracy/src/index.tsx
@@ -27,13 +27,13 @@ function DemocracyApp ({ basePath }: Props): React.ReactElement<Props> {
     {
       isRoot: true,
       name: 'overview',
-      text: t('Democracy overview')
+      text: t<string>('Democracy overview')
     }
   ], [t]);
 
   return (
     <main className='democracy--App'>
-      <HelpOverlay md={basicMd} />
+      <HelpOverlay md={basicMd as string} />
       <header>
         <Tabs
           basePath={basePath}
diff --git a/packages/page-explorer/src/BestHash.tsx b/packages/page-explorer/src/BestHash.tsx
index 034665b3cb..1db58847d3 100644
--- a/packages/page-explorer/src/BestHash.tsx
+++ b/packages/page-explorer/src/BestHash.tsx
@@ -12,15 +12,12 @@ interface Props extends BareProps, CallProps {
   label?: React.ReactNode;
 }
 
-function BestHash ({ className, label, style }: Props): React.ReactElement<Props> {
+function BestHash ({ className = '', label }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const newHead = useCall<Header>(api.rpc.chain.subscribeNewHeads, []);
 
   return (
-    <div
-      className={className}
-      style={style}
-    >
+    <div className={className}>
       {label || ''}{newHead?.hash.toHex()}
     </div>
   );
diff --git a/packages/page-explorer/src/BlockHeaders.tsx b/packages/page-explorer/src/BlockHeaders.tsx
index 586aa78346..30ce75fcb0 100644
--- a/packages/page-explorer/src/BlockHeaders.tsx
+++ b/packages/page-explorer/src/BlockHeaders.tsx
@@ -22,7 +22,7 @@ function BlockHeaders ({ headers }: Props): React.ReactElement<Props> {
 
   return (
     <Table
-      empty={t('No blocks available')}
+      empty={t<string>('No blocks available')}
       header={header}
     >
       {headers
diff --git a/packages/page-explorer/src/BlockInfo/ByHash.tsx b/packages/page-explorer/src/BlockInfo/ByHash.tsx
index 6e3e5f877a..2af43ef3df 100644
--- a/packages/page-explorer/src/BlockInfo/ByHash.tsx
+++ b/packages/page-explorer/src/BlockInfo/ByHash.tsx
@@ -22,7 +22,7 @@ interface Props {
   value: string;
 }
 
-function BlockByHash ({ className, value }: Props): React.ReactElement<Props> {
+function BlockByHash ({ className = '', value }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const events = useCall<KeyedEvent[]>(api.query.system.events.at, [value], {
@@ -64,7 +64,7 @@ function BlockByHash ({ className, value }: Props): React.ReactElement<Props> {
               )}
             </td>
             <td className='hash overflow'>{getHeader.hash.toHex()}</td>
-            <td className='hash overflow'><Link to={`/explorer/query/${parentHash}`}>{parentHash}</Link></td>
+            <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>
@@ -88,7 +88,7 @@ function BlockByHash ({ className, value }: Props): React.ReactElement<Props> {
               <Events
                 eventClassName='explorer--BlockByHash-block'
                 events={events?.filter(({ record: { phase } }) => !phase.isApplyExtrinsic)}
-                label={t('system events')}
+                label={t<string>('system events')}
               />
             </Column>
             <Column>
diff --git a/packages/page-explorer/src/BlockInfo/Extrinsic.tsx b/packages/page-explorer/src/BlockInfo/Extrinsic.tsx
index 14a6be4342..b4e00d6636 100644
--- a/packages/page-explorer/src/BlockInfo/Extrinsic.tsx
+++ b/packages/page-explorer/src/BlockInfo/Extrinsic.tsx
@@ -36,7 +36,7 @@ function filterEvents (index: number, events: KeyedEvent[] = []): KeyedEvent[] {
   return events.filter(({ record: { phase } }) => phase.isApplyExtrinsic && phase.asApplyExtrinsic.eq(index));
 }
 
-function ExtrinsicDisplay ({ blockNumber, className, events, index, value }: Props): React.ReactElement<Props> {
+function ExtrinsicDisplay ({ blockNumber, className = '', events, index, value }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { meta, method, section } = registry.findMetaCall(value.callIndex);
   const era = getEra(value, blockNumber);
@@ -59,13 +59,13 @@ function ExtrinsicDisplay ({ blockNumber, className, events, index, value }: Pro
             className='details'
             mortality={
               era
-                ? t('mortal, valid from #{{startAt}} to #{{endsAt}}', {
+                ? t<string>('mortal, valid from #{{startAt}} to #{{endsAt}}', {
                   replace: {
                     endsAt: formatNumber(era[1]),
                     startAt: formatNumber(era[0])
                   }
                 })
-                : t('immortal')
+                : t<string>('immortal')
             }
             tip={value.tip?.toBn()}
             value={value}
@@ -91,7 +91,7 @@ function ExtrinsicDisplay ({ blockNumber, className, events, index, value }: Pro
             <>
               <AddressMini value={value.signer} />
               <div className='explorer--BlockByHash-nonce'>
-                {t('index')} {formatNumber(value.nonce)}
+                {t<string>('index')} {formatNumber(value.nonce)}
               </div>
               <LinkExternal
                 data={value.hash.toHex()}
@@ -99,7 +99,7 @@ function ExtrinsicDisplay ({ blockNumber, className, events, index, value }: Pro
               />
             </>
           )
-          : <div className='explorer--BlockByHash-unsigned'>{t('not signed')}</div>
+          : <div className='explorer--BlockByHash-unsigned'>{t<string>('not signed')}</div>
         }
       </td>
     </tr>
diff --git a/packages/page-explorer/src/BlockInfo/Extrinsics.tsx b/packages/page-explorer/src/BlockInfo/Extrinsics.tsx
index 7fcc52e768..c43ae5f518 100644
--- a/packages/page-explorer/src/BlockInfo/Extrinsics.tsx
+++ b/packages/page-explorer/src/BlockInfo/Extrinsics.tsx
@@ -19,11 +19,11 @@ interface Props {
   value?: Extrinsic[] | null;
 }
 
-function Extrinsics ({ blockNumber, className, events, label, value }: Props): React.ReactElement<Props> {
+function Extrinsics ({ blockNumber, className = '', events, label, value }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const header = useMemo(() => [
-    [label || t('extrinsics'), 'start', 2],
+    [label || t<string>('extrinsics'), 'start', 2],
     [t('events'), 'start', 2],
     [t('signer'), 'address']
   ], [label, t]);
@@ -31,7 +31,7 @@ function Extrinsics ({ blockNumber, className, events, label, value }: Props): R
   return (
     <Table
       className={className}
-      empty={t('No pending extrinsics are in the queue')}
+      empty={t<string>('No pending extrinsics are in the queue')}
       header={header}
       isFixed
     >
diff --git a/packages/page-explorer/src/BlockInfo/Logs.tsx b/packages/page-explorer/src/BlockInfo/Logs.tsx
index c1f6df8780..402f83ba38 100644
--- a/packages/page-explorer/src/BlockInfo/Logs.tsx
+++ b/packages/page-explorer/src/BlockInfo/Logs.tsx
@@ -65,7 +65,7 @@ function formatTuple (tuple: Tuple): React.ReactNode {
   );
 }
 
-function formatVector (vector: Vec<any>): React.ReactNode {
+function formatVector (vector: Vec<Codec>): React.ReactNode {
   const type = getTypeDef(vector.Type);
   const values = vector.toArray().map((value): { isValid: boolean; value: Codec } => ({
     isValid: true,
@@ -107,7 +107,7 @@ function Logs (props: Props): React.ReactElement<Props> | null {
 
   return (
     <Table
-      empty={t('No logs available')}
+      empty={t<string>('No logs available')}
       header={header}
     >
       {value?.map((log, index) => (
diff --git a/packages/page-explorer/src/BlockInfo/index.tsx b/packages/page-explorer/src/BlockInfo/index.tsx
index 4eebbcb5fb..b830235037 100644
--- a/packages/page-explorer/src/BlockInfo/index.tsx
+++ b/packages/page-explorer/src/BlockInfo/index.tsx
@@ -13,10 +13,10 @@ import Query from '../Query';
 import BlockByHash from './ByHash';
 import BlockByNumber from './ByNumber';
 
-function Entry (): React.ReactElement<{}> | null {
+function Entry (): React.ReactElement | null {
   const { api } = useApi();
   const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []);
-  const { value } = useParams();
+  const { value } = useParams<{ value: string }>();
   const [stateValue, setStateValue] = useState<string | undefined>(value);
 
   useEffect((): void => {
diff --git a/packages/page-explorer/src/Event.tsx b/packages/page-explorer/src/Event.tsx
index ac03576294..0b9390ec9a 100644
--- a/packages/page-explorer/src/Event.tsx
+++ b/packages/page-explorer/src/Event.tsx
@@ -12,7 +12,7 @@ interface Props {
   value: EventRecord;
 }
 
-function Event ({ className, value: { event } }: Props): React.ReactElement<Props> {
+function Event ({ className = '', value: { event } }: Props): React.ReactElement<Props> {
   return (
     <Expander
       className={className}
diff --git a/packages/page-explorer/src/Events.tsx b/packages/page-explorer/src/Events.tsx
index 514a7de26d..ec0ffc2a0f 100644
--- a/packages/page-explorer/src/Events.tsx
+++ b/packages/page-explorer/src/Events.tsx
@@ -21,17 +21,17 @@ interface Props {
   label?: React.ReactNode;
 }
 
-function Events ({ className, emptyLabel, eventClassName, events, label }: Props): React.ReactElement<Props> {
+function Events ({ className = '', emptyLabel, eventClassName, events, label }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const header = useMemo(() => [
-    [label || t('recent events'), 'start']
+    [label || t<string>('recent events'), 'start']
   ], [label, t]);
 
   return (
     <Table
       className={className}
-      empty={emptyLabel || t('No events available')}
+      empty={emptyLabel || t<string>('No events available')}
       header={header}
     >
       {events && events
@@ -46,7 +46,7 @@ function Events ({ className, emptyLabel, eventClassName, events, label }: Props
               {blockNumber && (
                 <Link
                   className='event-link'
-                  to={`/explorer/query/${blockHash}`}>{formatNumber(blockNumber)}-{index}</Link>
+                  to={`/explorer/query/${blockHash || ''}`}>{formatNumber(blockNumber)}-{index}</Link>
               )}
             </td>
           </tr>
diff --git a/packages/page-explorer/src/Forks.tsx b/packages/page-explorer/src/Forks.tsx
index a3a13b7e66..20d18c7848 100644
--- a/packages/page-explorer/src/Forks.tsx
+++ b/packages/page-explorer/src/Forks.tsx
@@ -139,7 +139,7 @@ function isSingleRow (cols: Col[]): boolean {
 function renderCol ({ author, hash, isEmpty, isFinalized, parent, width }: Col, index: number): React.ReactNode {
   return (
     <td
-      className={`header ${isEmpty && 'isEmpty'} ${isFinalized && 'isFinalized'}`}
+      className={`header ${isEmpty ? 'isEmpty' : ''} ${isFinalized ? 'isFinalized' : ''}`}
       colSpan={width}
       key={`${hash}:${index}:${width}`}
     >
@@ -333,7 +333,7 @@ function Forks ({ className }: Props): React.ReactElement<Props> | null {
           if (firstNumRef.current !== bn) {
             console.warn(`Retrieving missing header ${header.parentHash.toHex()}`);
 
-            api.rpc.chain.getHeader(header.parentHash).then(_newHeader);
+            api.rpc.chain.getHeader(header.parentHash).then(_newHeader).catch(console.error);
 
             // catch the refresh on the result
             return;
@@ -361,7 +361,7 @@ function Forks ({ className }: Props): React.ReactElement<Props> | null {
     (async (): Promise<void> => {
       _subFinHead = await api.rpc.chain.subscribeFinalizedHeads(_newFinalized);
       _subNewHead = await api.rpc.chain.subscribeNewHeads(_newHeader);
-    })();
+    })().catch(console.error);
 
     return (): void => {
       _subFinHead && _subFinHead();
@@ -377,8 +377,8 @@ function Forks ({ className }: Props): React.ReactElement<Props> | null {
     <div className={className}>
       <SummaryBox>
         <section>
-          <CardSummary label={t('blocks')}>{formatNumber(countRef.current.numBlocks)}</CardSummary>
-          <CardSummary label={t('forks')}>{formatNumber(countRef.current.numForks)}</CardSummary>
+          <CardSummary label={t<string>('blocks')}>{formatNumber(countRef.current.numBlocks)}</CardSummary>
+          <CardSummary label={t<string>('forks')}>{formatNumber(countRef.current.numForks)}</CardSummary>
         </section>
       </SummaryBox>
       <table>
diff --git a/packages/page-explorer/src/NodeInfo/Peers.tsx b/packages/page-explorer/src/NodeInfo/Peers.tsx
index 763ed9ba84..934e8fe0de 100644
--- a/packages/page-explorer/src/NodeInfo/Peers.tsx
+++ b/packages/page-explorer/src/NodeInfo/Peers.tsx
@@ -16,7 +16,7 @@ interface Props {
   peers?: PeerInfo[] | null;
 }
 
-function Peers ({ className, peers }: Props): React.ReactElement<Props> {
+function Peers ({ className = '', peers }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const header = useMemo(() => [
@@ -29,7 +29,7 @@ function Peers ({ className, peers }: Props): React.ReactElement<Props> {
   return (
     <Table
       className={className}
-      empty={t('no peers connected')}
+      empty={t<string>('no peers connected')}
       header={header}
     >
       {peers?.sort((a, b): number => b.bestNumber.cmp(a.bestNumber)).map((peer) => (
diff --git a/packages/page-explorer/src/NodeInfo/Summary.tsx b/packages/page-explorer/src/NodeInfo/Summary.tsx
index 3e98588cf0..96fe0dcc35 100644
--- a/packages/page-explorer/src/NodeInfo/Summary.tsx
+++ b/packages/page-explorer/src/NodeInfo/Summary.tsx
@@ -39,12 +39,12 @@ function Summary ({ info: { extrinsics, health, peers } = EMPTY_INFO, nextRefres
   return (
     <SummaryBox>
       <section>
-        <CardSummary label={t('refresh in')}>
+        <CardSummary label={t<string>('refresh in')}>
           <Elapsed value={nextRefresh} />
         </CardSummary>
         <CardSummary
           className='ui--media-small'
-          label={t('total peers')}
+          label={t<string>('total peers')}
         >
           {
             health
@@ -54,21 +54,21 @@ function Summary ({ info: { extrinsics, health, peers } = EMPTY_INFO, nextRefres
         </CardSummary>
         <CardSummary
           className='ui--media-small'
-          label={t('syncing')}
+          label={t<string>('syncing')}
         >
           {
             health
               ? (
                 health.isSyncing.valueOf()
-                  ? t('yes')
-                  : t('no')
+                  ? t<string>('yes')
+                  : t<string>('no')
               )
               : '-'
           }
         </CardSummary>
       </section>
       <section className='ui--media-large'>
-        <CardSummary label={t('queued tx')}>
+        <CardSummary label={t<string>('queued tx')}>
           {
             extrinsics
               ? `${extrinsics.length}`
@@ -77,10 +77,10 @@ function Summary ({ info: { extrinsics, health, peers } = EMPTY_INFO, nextRefres
         </CardSummary>
       </section>
       <section>
-        <CardSummary label={t('peer best')}>
+        <CardSummary label={t<string>('peer best')}>
           {formatNumber(peerBest)}
         </CardSummary>
-        <CardSummary label={t('our best')}>
+        <CardSummary label={t<string>('our best')}>
           <BestNumber />
         </CardSummary>
       </section>
diff --git a/packages/page-explorer/src/NodeInfo/index.tsx b/packages/page-explorer/src/NodeInfo/index.tsx
index 67a2c871b4..09c9825586 100644
--- a/packages/page-explorer/src/NodeInfo/index.tsx
+++ b/packages/page-explorer/src/NodeInfo/index.tsx
@@ -30,7 +30,7 @@ async function retrieveInfo (api: ApiPromise): Promise<Partial<Info>> {
   }
 }
 
-function NodeInfo (): React.ReactElement<{}> {
+function NodeInfo (): React.ReactElement {
   const { t } = useTranslation();
   const { api } = useApi();
   const [info, setInfo] = useState<Partial<Info>>({});
@@ -38,7 +38,7 @@ function NodeInfo (): React.ReactElement<{}> {
 
   useEffect((): () => void => {
     const _getStatus = (): void => {
-      retrieveInfo(api).then(setInfo);
+      retrieveInfo(api).then(setInfo).catch(console.error);
     };
 
     _getStatus();
@@ -63,7 +63,7 @@ function NodeInfo (): React.ReactElement<{}> {
       <Peers peers={info.peers} />
       <Extrinsics
         blockNumber={info.blockNumber}
-        label={t('pending extrinsics')}
+        label={t<string>('pending extrinsics')}
         value={info.extrinsics}
       />
     </>
diff --git a/packages/page-explorer/src/Query.tsx b/packages/page-explorer/src/Query.tsx
index 60dc936f82..e52ec1e306 100644
--- a/packages/page-explorer/src/Query.tsx
+++ b/packages/page-explorer/src/Query.tsx
@@ -26,7 +26,7 @@ function stateFromValue (value: string): State {
   };
 }
 
-function Query ({ className, value: propsValue }: Props): React.ReactElement<Props> {
+function Query ({ className = '', value: propsValue }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [{ isValid, value }, setState] = useState(stateFromValue(propsValue || ''));
 
@@ -52,7 +52,7 @@ function Query ({ className, value: propsValue }: Props): React.ReactElement<Pro
         isError={!isValid && value.length !== 0}
         onChange={_setHash}
         onEnter={_onQuery}
-        placeholder={t('block hash or number to query')}
+        placeholder={t<string>('block hash or number to query')}
         withLabel={false}
       >
         <Button
diff --git a/packages/page-explorer/src/Summary.tsx b/packages/page-explorer/src/Summary.tsx
index b9a62d827e..3ae8380a7c 100644
--- a/packages/page-explorer/src/Summary.tsx
+++ b/packages/page-explorer/src/Summary.tsx
@@ -13,26 +13,26 @@ import { useTranslation } from './translate';
 
 const ONE_BLOCK = new BN(1);
 
-function Summary (): React.ReactElement<{}> {
+function Summary (): React.ReactElement {
   const { t } = useTranslation();
   const { api } = useApi();
 
   return (
     <SummaryBox>
       <section>
-        <CardSummary label={t('last block')}>
+        <CardSummary label={t<string>('last block')}>
           <TimeNow />
         </CardSummary>
         <CardSummary
           className='ui--media-small'
-          label={t('target')}
+          label={t<string>('target')}
         >
           <BlockToTime blocks={ONE_BLOCK} />
         </CardSummary>
         {api.query.balances && (
           <CardSummary
             className='ui--media-small'
-            label={t('total issuance')}
+            label={t<string>('total issuance')}
           >
             <TotalIssuance />
           </CardSummary>
@@ -42,10 +42,10 @@ function Summary (): React.ReactElement<{}> {
         <SummarySession withEra={false} />
       </section>
       <section>
-        <CardSummary label={t('finalized')}>
+        <CardSummary label={t<string>('finalized')}>
           <BestFinalized />
         </CardSummary>
-        <CardSummary label={t('best')}>
+        <CardSummary label={t<string>('best')}>
           <BestNumber />
         </CardSummary>
       </section>
diff --git a/packages/page-explorer/src/SummarySession.tsx b/packages/page-explorer/src/SummarySession.tsx
index cad8c0f3b4..359a1dbd71 100644
--- a/packages/page-explorer/src/SummarySession.tsx
+++ b/packages/page-explorer/src/SummarySession.tsx
@@ -21,12 +21,12 @@ function SummarySession ({ withEra = true, withSession = true }: Props): React.R
   const { api } = useApi();
   const sessionInfo = useCall<DeriveSessionProgress>(api.derive.session?.progress, []);
   const eraLabel = useMemo(() =>
-    t('era')
+    t<string>('era')
   , [t]);
   const sessionLabel = useMemo(() =>
     sessionInfo?.isEpoch
-      ? t('epoch')
-      : t('session')
+      ? t<string>('epoch')
+      : t<string>('session')
   , [sessionInfo?.isEpoch, t]);
 
   return (
diff --git a/packages/page-explorer/src/index.tsx b/packages/page-explorer/src/index.tsx
index d13260f023..0fa51c9953 100644
--- a/packages/page-explorer/src/index.tsx
+++ b/packages/page-explorer/src/index.tsx
@@ -32,20 +32,20 @@ function ExplorerApp ({ basePath, className }: Props): React.ReactElement<Props>
     {
       isRoot: true,
       name: 'chain',
-      text: t('Chain info')
+      text: t<string>('Chain info')
     },
     {
       hasParams: true,
       name: 'query',
-      text: t('Block details')
+      text: t<string>('Block details')
     },
     {
       name: 'forks',
-      text: t('Forks')
+      text: t<string>('Forks')
     },
     {
       name: 'node',
-      text: t('Node info')
+      text: t<string>('Node info')
     }
   ], [t]);
 
diff --git a/packages/page-extrinsics/src/Balance.tsx b/packages/page-extrinsics/src/Balance.tsx
index 59fedf77c4..7280e32a81 100644
--- a/packages/page-extrinsics/src/Balance.tsx
+++ b/packages/page-extrinsics/src/Balance.tsx
@@ -14,7 +14,7 @@ interface Props extends BareProps {
   params?: any;
 }
 
-function BalanceDisplay ({ className, label, params, style }: Props): React.ReactElement<Props> {
+function BalanceDisplay ({ className = '', label, params }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all, [params]);
 
@@ -24,7 +24,6 @@ function BalanceDisplay ({ className, label, params, style }: Props): React.Reac
       defaultValue={allBalances?.freeBalance}
       isDisabled
       label={label}
-      style={style}
     />
   );
 }
diff --git a/packages/page-extrinsics/src/Selection.tsx b/packages/page-extrinsics/src/Selection.tsx
index 8aa5143de1..edeee0cf2e 100644
--- a/packages/page-extrinsics/src/Selection.tsx
+++ b/packages/page-extrinsics/src/Selection.tsx
@@ -26,10 +26,10 @@ function Selection (): React.ReactElement {
   return (
     <div className='extrinsics--Selection'>
       <InputAddress
-        label={t('using the selected account')}
+        label={t<string>('using the selected account')}
         labelExtra={
           <BalanceFree
-            label={<label>{t('free balance')}</label>}
+            label={<label>{t<string>('free balance')}</label>}
             params={accountId}
           />
         }
@@ -38,7 +38,7 @@ function Selection (): React.ReactElement {
       />
       <Extrinsic
         defaultValue={apiDefaultTxSudo}
-        label={t('submit the following extrinsic')}
+        label={t<string>('submit the following extrinsic')}
         onChange={_onExtrinsicChange}
       />
       <Button.Group>
@@ -48,7 +48,7 @@ function Selection (): React.ReactElement {
           isBasic
           isDisabled={!extrinsic}
           isUnsigned
-          label={t('Submit Unsigned')}
+          label={t<string>('Submit Unsigned')}
           withSpinner
         />
         <TxButton
@@ -57,7 +57,7 @@ function Selection (): React.ReactElement {
           icon='sign-in'
           isDisabled={!extrinsic || !accountId}
           isPrimary={false}
-          label={t('Submit Transaction')}
+          label={t<string>('Submit Transaction')}
         />
       </Button.Group>
     </div>
diff --git a/packages/page-extrinsics/src/index.tsx b/packages/page-extrinsics/src/index.tsx
index 8c0416b7d0..83b4797ab0 100644
--- a/packages/page-extrinsics/src/index.tsx
+++ b/packages/page-extrinsics/src/index.tsx
@@ -15,7 +15,7 @@ function ExtrinsicsApp ({ basePath }: Props): React.ReactElement<Props> {
   const items = useMemo(() => [{
     isRoot: true,
     name: 'create',
-    text: t('Extrinsic submission')
+    text: t<string>('Extrinsic submission')
   }], [t]);
 
   return (
diff --git a/packages/page-generic-asset/src/AssetCard.tsx b/packages/page-generic-asset/src/AssetCard.tsx
index 3016869fdc..a2c4c902dd 100644
--- a/packages/page-generic-asset/src/AssetCard.tsx
+++ b/packages/page-generic-asset/src/AssetCard.tsx
@@ -16,7 +16,7 @@ interface Props {
   onForget: (id: string) => void;
 }
 
-function AssetCard ({ assetId, className, name, onForget, onSaveName }: Props): React.ReactElement<Props> {
+function AssetCard ({ assetId, className = '', name, onForget, onSaveName }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const _onForget = useCallback(
@@ -40,7 +40,7 @@ function AssetCard ({ assetId, className, name, onForget, onSaveName }: Props):
               isNegative
               key='forget'
               onClick={_onForget}
-              tooltip={t('Forget this asset')}
+              tooltip={t<string>('Forget this asset')}
             />
           )}
           defaultName={name}
diff --git a/packages/page-generic-asset/src/AssetRow.tsx b/packages/page-generic-asset/src/AssetRow.tsx
index 2096591b81..7bbed46187 100644
--- a/packages/page-generic-asset/src/AssetRow.tsx
+++ b/packages/page-generic-asset/src/AssetRow.tsx
@@ -23,7 +23,7 @@ class AssetRow extends Row<Props, RowState> {
   }
 
   public render (): React.ReactNode {
-    const { className } = this.props;
+    const { className = '' } = this.props;
 
     return (
       <div
@@ -56,7 +56,7 @@ class AssetRow extends Row<Props, RowState> {
     return (
       <div className='ui--Row-details'>
         <CopyButton value={assetId}>
-          <span>{t('Asset ID')}: {assetId}</span>
+          <span>{t<string>('Asset ID')}: {assetId}</span>
         </CopyButton>
       </div>
     );
diff --git a/packages/page-generic-asset/src/Assets.tsx b/packages/page-generic-asset/src/Assets.tsx
index c4268017f4..9636085649 100644
--- a/packages/page-generic-asset/src/Assets.tsx
+++ b/packages/page-generic-asset/src/Assets.tsx
@@ -33,12 +33,12 @@ function Assets ({ assets, t }: Props): React.ReactElement<Props> {
         <Button.Group>
           <Button
             icon='registered'
-            label={t('Register Asset')}
+            label={t<string>('Register Asset')}
             onClick={_toggleCreate}
           />
         </Button.Group>
       }
-      emptyText={t('No assets found.')}
+      emptyText={t<string>('No assets found.')}
       isEmpty={emptyScreen}
     >
       {isCreateOpen && (
diff --git a/packages/page-generic-asset/src/Transfer.tsx b/packages/page-generic-asset/src/Transfer.tsx
index d56b78ff56..3c869bf74c 100644
--- a/packages/page-generic-asset/src/Transfer.tsx
+++ b/packages/page-generic-asset/src/Transfer.tsx
@@ -30,7 +30,7 @@ interface Option {
   value: string;
 }
 
-function Transfer ({ assets, className, onClose, recipientId: propRecipientId, senderId: propSenderId, t }: Props): React.ReactElement<Props> {
+function Transfer ({ assets, className = '', onClose, recipientId: propRecipientId, senderId: propSenderId, t }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const [assetId, setAssetId] = useState('0');
   const [amount, setAmount] = useState<BN | undefined>(new BN(0));
@@ -64,16 +64,16 @@ function Transfer ({ assets, className, onClose, recipientId: propRecipientId, s
     }
   };
 
-  const transferrable = <span className='label'>{t('transferrable')}</span>;
+  const transferrable = <span className='label'>{t<string>('transferrable')}</span>;
 
   return (
     <div>
       <div className={className}>
         <InputAddress
           defaultValue={propSenderId}
-          help={t('The account you will send funds from.')}
+          help={t<string>('The account you will send funds from.')}
           isDisabled={!!propSenderId}
-          label={t('send from account')}
+          label={t<string>('send from account')}
           labelExtra={
             <Available
               label={transferrable}
@@ -85,9 +85,9 @@ function Transfer ({ assets, className, onClose, recipientId: propRecipientId, s
         />
         <InputAddress
           defaultValue={propRecipientId}
-          help={t('Select a contact or paste the address you want to send funds to.')}
+          help={t<string>('Select a contact or paste the address you want to send funds to.')}
           isDisabled={!!propRecipientId}
-          label={t('send to address')}
+          label={t<string>('send to address')}
           labelExtra={
             <Available
               label={transferrable}
@@ -99,17 +99,17 @@ function Transfer ({ assets, className, onClose, recipientId: propRecipientId, s
         />
         <Dropdown
           allowAdd
-          help={t('Enter the Asset ID of the token you want to transfer.')}
-          label={t('asset id')}
+          help={t<string>('Enter the Asset ID of the token you want to transfer.')}
+          label={t<string>('asset id')}
           onAdd={_onAddAssetId}
           onChange={setAssetId}
           options={options}
           value={assetId}
         />
         <InputBalance
-          help={t('Type the amount you want to transfer. Note that you can select the unit on the right e.g sending 1 milli is equivalent to sending 0.001.')}
+          help={t<string>('Type the amount you want to transfer. Note that you can select the unit on the right e.g sending 1 milli is equivalent to sending 0.001.')}
           isError={!hasAvailable}
-          label={t('amount')}
+          label={t<string>('amount')}
           onChange={setAmount}
         />
         <Checks
@@ -126,7 +126,7 @@ function Transfer ({ assets, className, onClose, recipientId: propRecipientId, s
           icon='send'
           isDisabled={!hasAvailable}
           isPrimary
-          label={t('Make Transfer')}
+          label={t<string>('Make Transfer')}
           onStart={onClose}
         />
       </Button.Group>
diff --git a/packages/page-generic-asset/src/assetsRegistry.tsx b/packages/page-generic-asset/src/assetsRegistry.tsx
index 68b7e68eb5..8357c88e92 100644
--- a/packages/page-generic-asset/src/assetsRegistry.tsx
+++ b/packages/page-generic-asset/src/assetsRegistry.tsx
@@ -14,7 +14,7 @@ try {
   const storedAsset = localStorage.getItem(ASSETS_KEY);
 
   if (storedAsset) {
-    initalAssets = JSON.parse(storedAsset);
+    initalAssets = JSON.parse(storedAsset) as AssetsSubjectInfo;
   }
 } catch (e) {
   // ignore error
diff --git a/packages/page-generic-asset/src/index.tsx b/packages/page-generic-asset/src/index.tsx
index 8f5e836dac..883ceb96af 100644
--- a/packages/page-generic-asset/src/index.tsx
+++ b/packages/page-generic-asset/src/index.tsx
@@ -21,11 +21,11 @@ function AssetApp ({ basePath }: Props): React.ReactElement<Props> {
     {
       isRoot: true,
       name: 'assets',
-      text: t('Assets')
+      text: t<string>('Assets')
     },
     {
       name: 'transfer',
-      text: t('Transfer')
+      text: t<string>('Transfer')
     }
   ], [t]);
 
diff --git a/packages/page-generic-asset/src/modals/Create.tsx b/packages/page-generic-asset/src/modals/Create.tsx
index 0985dbafe7..3641fd487f 100644
--- a/packages/page-generic-asset/src/modals/Create.tsx
+++ b/packages/page-generic-asset/src/modals/Create.tsx
@@ -30,20 +30,20 @@ function Create ({ onClose, onRegister }: Props): React.ReactElement<Props> {
   };
 
   return (
-    <Modal header={t('Register an Asset')}>
+    <Modal header={t<string>('Register an Asset')}>
       <Modal.Content>
         <InputNumber
-          help={t('Enter the Asset ID of the token you want to manage.')}
-          label={t('asset id')}
+          help={t<string>('Enter the Asset ID of the token you want to manage.')}
+          label={t<string>('asset id')}
           onChange={_onChangeAssetId}
           onEnter={_onCommit}
           value={assetId}
         />
         <Input
           className='full'
-          help={t('Type the name of this Asset. This name will be used across all the apps. It can be edited later on.')}
+          help={t<string>('Type the name of this Asset. This name will be used across all the apps. It can be edited later on.')}
           isError={!name}
-          label={t('name')}
+          label={t<string>('name')}
           onChange={setName}
           onEnter={_onCommit}
           value={name}
@@ -54,7 +54,7 @@ function Create ({ onClose, onRegister }: Props): React.ReactElement<Props> {
           icon='registered'
           isDisabled={!name}
           isPrimary
-          label={t('Register')}
+          label={t<string>('Register')}
           onClick={onClose}
         />
       </Modal.Actions>
diff --git a/packages/page-i18n/src/index.tsx b/packages/page-i18n/src/index.tsx
index 0f5bb5ee3f..a71b656860 100644
--- a/packages/page-i18n/src/index.tsx
+++ b/packages/page-i18n/src/index.tsx
@@ -5,7 +5,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-export default function TranslateApp (): React.ReactElement<{}> {
+export default function TranslateApp (): React.ReactElement {
   return (
     <main>This app has been moved to <Link to='/settings/i18n'>#/settings/i18n</Link></main>
   );
diff --git a/packages/page-js/src/ActionButtons.tsx b/packages/page-js/src/ActionButtons.tsx
index af15b763cd..d01e0dc94d 100644
--- a/packages/page-js/src/ActionButtons.tsx
+++ b/packages/page-js/src/ActionButtons.tsx
@@ -20,7 +20,7 @@ interface Props extends BareProps {
   stopJs: () => void;
 }
 
-function ActionButtons ({ className, isCustomExample, isRunning, removeSnippet, runJs, saveSnippet, stopJs }: Props): React.ReactElement<Props> {
+function ActionButtons ({ className = '', isCustomExample, isRunning, removeSnippet, runJs, saveSnippet, stopJs }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const [snippetName, setSnippetName] = useState('');
@@ -59,7 +59,7 @@ function ActionButtons ({ className, isCustomExample, isRunning, removeSnippet,
       }
       {isCustomExample && (
         <Popup
-          content={t('Delete this custom example')}
+          content={t<string>('Delete this custom example')}
           on='hover'
           trigger={
             <SUIB
@@ -91,7 +91,7 @@ function ActionButtons ({ className, isCustomExample, isRunning, removeSnippet,
             min={1}
             onChange={_onChangeName}
             onEnter={_saveSnippet}
-            placeholder={t('Name your example')}
+            placeholder={t<string>('Name your example')}
             value={snippetName}
             withLabel={false}
           />
@@ -99,7 +99,7 @@ function ActionButtons ({ className, isCustomExample, isRunning, removeSnippet,
             icon='save'
             isDisabled={!snippetName.length}
             isPrimary
-            label={t('Save snippet to local storage')}
+            label={t<string>('Save snippet to local storage')}
             onClick={_saveSnippet}
           />
         </Popup>
diff --git a/packages/page-js/src/Output.tsx b/packages/page-js/src/Output.tsx
index 07f7db1a13..d8a5ffa2d6 100644
--- a/packages/page-js/src/Output.tsx
+++ b/packages/page-js/src/Output.tsx
@@ -14,7 +14,7 @@ interface Props extends BareProps {
   logs: Log[];
 }
 
-const format = (value: any): string => {
+const format = (value: unknown): string => {
   if (isError(value)) {
     return value.stack ? value.stack : value.toString();
   } else if (isUndefined(value)) {
@@ -24,10 +24,10 @@ const format = (value: any): string => {
   } else if (Array.isArray(value)) {
     return `[${value.map((value): string => format(value)).join(', ')}]`;
   } else if (value instanceof Map) {
-    return `{${[...value.entries()].map(([key, value]): string => key + ': ' + format(value)).join(', ')}}`;
+    return `{${[...value.entries()].map(([key, value]): string => (key as string) + ': ' + format(value)).join(', ')}}`;
   }
 
-  return value.toString();
+  return (value as string).toString();
 };
 
 const renderEntry = ({ args, type }: Log, index: number): React.ReactNode => (
@@ -39,7 +39,7 @@ const renderEntry = ({ args, type }: Log, index: number): React.ReactNode => (
   </div>
 );
 
-function Output ({ children, className, logs }: Props): React.ReactElement<Props> {
+function Output ({ children, className = '', logs }: Props): React.ReactElement<Props> {
   return (
     <article className={`container ${className}`}>
       <div className='logs-wrapper'>
diff --git a/packages/page-js/src/Playground.tsx b/packages/page-js/src/Playground.tsx
index 1769fa43e1..82832623f2 100644
--- a/packages/page-js/src/Playground.tsx
+++ b/packages/page-js/src/Playground.tsx
@@ -40,7 +40,7 @@ interface Injected {
 }
 
 const ALLOWED_GLOBALS = ['atob', 'btoa'];
-const snippets: Snippet[] = JSON.parse(JSON.stringify(allSnippets));
+const snippets = JSON.parse(JSON.stringify(allSnippets)) as Snippet[];
 let hasSnippetWrappers = false;
 
 function setupInjected ({ api, isDevelopment }: ApiProps, setIsRunning: (isRunning: boolean) => void, hookConsole: (type: LogType, args: any[]) => void): Injected {
@@ -71,7 +71,7 @@ function setupInjected ({ api, isDevelopment }: ApiProps, setIsRunning: (isRunni
 }
 
 // FIXME This... ladies & gentlemen, is a mess that should be untangled
-function Playground ({ className }: Props): React.ReactElement<Props> {
+function Playground ({ className = '' }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const apiProps = useApi();
   const injectedRef = useRef<Injected | null>(null);
@@ -98,7 +98,7 @@ function Playground ({ className }: Props): React.ReactElement<Props> {
       examples: localStorage.getItem(STORE_EXAMPLES),
       selectedValue: localStorage.getItem(STORE_SELECTED)
     };
-    const customExamples = localData.examples ? JSON.parse(localData.examples) : [];
+    const customExamples = localData.examples ? JSON.parse(localData.examples) as Snippet[] : [];
     const options: Snippet[] = [...customExamples, ...snippets];
     const selected = options.find((option): boolean => option.value === localData.selectedValue);
 
@@ -153,7 +153,7 @@ function Playground ({ className }: Props): React.ReactElement<Props> {
         // TODO: Make the console.error here actually return the full stack
         const exec = `(async ({${Object.keys(injectedRef.current).sort().join(',')}}) => { try { ${code} \n } catch (error) { console.error(error); setIsRunning(false); } })(injected);`;
 
-        // eslint-disable-next-line no-new-func
+        // eslint-disable-next-line no-new-func,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-implied-eval
         new Function('injected', exec).bind({}, injectedRef.current)();
       } catch (error) {
         injectedRef.current.console.error(error);
@@ -227,7 +227,7 @@ function Playground ({ className }: Props): React.ReactElement<Props> {
         <Dropdown
           className='js--Dropdown'
           isFull
-          label={t('Select example')}
+          label={t<string>('Select example')}
           onChange={_selectExample}
           options={options}
           value={selected.value}
diff --git a/packages/page-parachains/src/Overview/Parachain.tsx b/packages/page-parachains/src/Overview/Parachain.tsx
index 1bddb92025..3e0718dadb 100644
--- a/packages/page-parachains/src/Overview/Parachain.tsx
+++ b/packages/page-parachains/src/Overview/Parachain.tsx
@@ -17,7 +17,7 @@ interface Props {
   parachain: DeriveParachain;
 }
 
-function Parachain ({ className, parachain: { didUpdate, id, info, pendingSwapId, relayDispatchQueueSize = 0 } }: Props): React.ReactElement<Props> {
+function Parachain ({ className = '', parachain: { didUpdate, id, info, pendingSwapId, relayDispatchQueueSize = 0 } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const history = useHistory();
 
@@ -40,7 +40,11 @@ function Parachain ({ className, parachain: { didUpdate, id, info, pendingSwapId
         <div>
           <Badge
             className='did-update'
-            hover={t(didUpdate ? 'Updated in the latest block' : 'Not updated in the last block')}
+            hover={
+              didUpdate
+                ? t<string>('Updated in the latest block')
+                : t<string>('Not updated in the last block')
+            }
             info={
               <Icon name='check' />
             }
@@ -50,14 +54,11 @@ function Parachain ({ className, parachain: { didUpdate, id, info, pendingSwapId
           />
           <Badge
             className='pending-messages'
-            hover={t(
-              '{{relayDispatchQueueSize}} dispatch messages pending',
-              {
-                replace: {
-                  relayDispatchQueueSize
-                }
+            hover={t<string>('{{relayDispatchQueueSize}} dispatch messages pending', {
+              replace: {
+                relayDispatchQueueSize
               }
-            )}
+            })}
             info={relayDispatchQueueSize}
             isGray={relayDispatchQueueSize <= 0}
             isTooltip
@@ -73,7 +74,7 @@ function Parachain ({ className, parachain: { didUpdate, id, info, pendingSwapId
         {pendingSwapId?.toString()}
       </td>
       <td className='number ui--media-small'>
-        {info?.scheduling?.toString() || t('<unknown>')}
+        {info?.scheduling?.toString() || t<string>('<unknown>')}
       </td>
     </tr>
   );
diff --git a/packages/page-parachains/src/Overview/Register.tsx b/packages/page-parachains/src/Overview/Register.tsx
index 2918f16235..348699f36b 100644
--- a/packages/page-parachains/src/Overview/Register.tsx
+++ b/packages/page-parachains/src/Overview/Register.tsx
@@ -81,22 +81,22 @@ function Register ({ nextFreeId = ONE_THOUSAND, sudoKey }: Props): React.ReactEl
       <div className='ui--Row-buttons'>
         <Button
           icon='add'
-          label={t('Register a parachain')}
+          label={t<string>('Register a parachain')}
           onClick={onOpen}
         />
       </div>
       {isOpen && (
         <Modal
-          header={t('Register a parachain')}
+          header={t<string>('Register a parachain')}
           onClose={onClose}
           small
         >
           <Modal.Content>
             <InputNumber
               defaultValue={nextFreeId.toString()}
-              help={t('The id number to assign to this parachain.')}
+              help={t<string>('The id number to assign to this parachain.')}
               isError={!isIdValid}
-              label={t('parachain id')}
+              label={t<string>('parachain id')}
               onChange={setId}
               onEnter={onSendRef.current}
               onEscape={onClose}
@@ -108,32 +108,32 @@ function Register ({ nextFreeId = ONE_THOUSAND, sudoKey }: Props): React.ReactEl
               }
             />
             <Dropdown
-              help={t('The scheduling preference for this parachain.')}
-              label={t('scheduling')}
+              help={t<string>('The scheduling preference for this parachain.')}
+              label={t<string>('scheduling')}
               onChange={setScheduling}
               options={schedulingOptions}
               value={scheduling}
             />
             <InputWasm
-              help={t('The compiled runtime WASM for the parachain you wish to register.')}
+              help={t<string>('The compiled runtime WASM for the parachain you wish to register.')}
               isError={!!code && code.length > 0 && !isCodeValid}
               isValidRef={isWasmValidRef}
-              label={t('code')}
+              label={t<string>('code')}
               onChange={setCode}
               placeholder={
                 code && code.length > 0 && !isCodeValid
-                  ? t('The code is not recognized as being in valid WASM format')
+                  ? t<string>('The code is not recognized as being in valid WASM format')
                   : null
               }
             />
             <InputFile
-              help={t('The initial head state for the parachain.')}
+              help={t<string>('The initial head state for the parachain.')}
               isError={!!initialHeadState && !isInitialHeadStateValid}
-              label={t('initial head state')}
+              label={t<string>('initial head state')}
               onChange={setInitialHeadState}
               placeholder={
                 initialHeadState && !isInitialHeadStateValid
-                  ? t('The initial head state is invalid.')
+                  ? t<string>('The initial head state is invalid.')
                   : null
               }
             />
diff --git a/packages/page-parachains/src/Overview/Summary.tsx b/packages/page-parachains/src/Overview/Summary.tsx
index 7f26041e63..3fd3c983af 100644
--- a/packages/page-parachains/src/Overview/Summary.tsx
+++ b/packages/page-parachains/src/Overview/Summary.tsx
@@ -20,11 +20,11 @@ function Summary ({ nextFreeId, parachainCount }: Props): React.ReactElement<Pro
   return (
     <SummaryBox>
       <section>
-        <CardSummary label={t('parachains')}>
+        <CardSummary label={t<string>('parachains')}>
           {parachainCount.toString()}
         </CardSummary>
         {nextFreeId && (
-          <CardSummary label={t('next id')}>
+          <CardSummary label={t<string>('next id')}>
             {nextFreeId.toString()}
           </CardSummary>
         )}
@@ -32,7 +32,7 @@ function Summary ({ nextFreeId, parachainCount }: Props): React.ReactElement<Pro
       <section>
         <CardSummary
           className='ui--media-small'
-          label={t('best block')}
+          label={t<string>('best block')}
         >
           <BestNumber withPound />
         </CardSummary>
diff --git a/packages/page-parachains/src/Overview/index.tsx b/packages/page-parachains/src/Overview/index.tsx
index 99d0592967..a0d32e7714 100644
--- a/packages/page-parachains/src/Overview/index.tsx
+++ b/packages/page-parachains/src/Overview/index.tsx
@@ -46,7 +46,7 @@ function Overview ({ isMine, sudoKey }: Props): React.ReactElement<Props> {
         <article className='error padded'>
           <div>
             <Icon name='ban' />
-            {t('There are no registered parachains')}
+            {t<string>('There are no registered parachains')}
           </div>
         </article>
       </>
diff --git a/packages/page-parachains/src/Parachain/Deregister.tsx b/packages/page-parachains/src/Parachain/Deregister.tsx
index 5c81384208..21a7ebb237 100644
--- a/packages/page-parachains/src/Parachain/Deregister.tsx
+++ b/packages/page-parachains/src/Parachain/Deregister.tsx
@@ -48,7 +48,7 @@ function Deregister ({ id, info, isOpen, onClose, onSubmit, sudoKey }: Props): R
 
   return (
     <Modal
-      header={t('Deregister this parachain')}
+      header={t<string>('Deregister this parachain')}
       onClose={onClose}
       open={isOpen}
       small
@@ -59,8 +59,8 @@ function Deregister ({ id, info, isOpen, onClose, onSubmit, sudoKey }: Props): R
         <br />
         <Static
           className='full label-small'
-          help={t('The id of the parachain to be deregistered.')}
-          label={t('parachain id')}
+          help={t<string>('The id of the parachain to be deregistered.')}
+          label={t<string>('parachain id')}
           value={id}
         />
       </Modal.Content>
diff --git a/packages/page-parachains/src/Parachain/Details.tsx b/packages/page-parachains/src/Parachain/Details.tsx
index 0217f9ad0b..88f04cd16d 100644
--- a/packages/page-parachains/src/Parachain/Details.tsx
+++ b/packages/page-parachains/src/Parachain/Details.tsx
@@ -23,14 +23,16 @@ function Details ({ parachain: { heads, id, info } }: Props): React.ReactElement
 
   const onDownload = (): void => {
     try {
-      api.query.parachains.code<Option<Bytes>>(id)
+      api.query.parachains
+        .code<Option<Bytes>>(id)
         .then((code) => {
-          if (code.unwrap()) {
+          if (code.isSome) {
             const blob = new Blob([code.unwrap().toU8a().buffer], { type: 'application/wasm' });
 
             FileSaver.saveAs(blob, `${id.toString()}_${parachainName(t, info)}.wasm`);
           }
-        });
+        })
+        .catch(console.error);
     } catch (error) {
       console.error(error);
     }
@@ -41,18 +43,18 @@ function Details ({ parachain: { heads, id, info } }: Props): React.ReactElement
       <div className='ui--row'>
         <Static
           className='full label-small'
-          help={t('The scheduling setting for this parachain.')}
-          label={t('scheduling')}
-          value={info?.scheduling?.toString() || t('Unknown')}
+          help={t<string>('The scheduling setting for this parachain.')}
+          label={t<string>('scheduling')}
+          value={info?.scheduling?.toString() || t<string>('Unknown')}
         />
       </div>
       {heads && (
         <div className='ui--row'>
           <Output
             className='full label-small'
-            help={t('Most recent head data')}
+            help={t<string>('Most recent head data')}
             isMonospace
-            label={t('heads')}
+            label={t<string>('heads')}
             value={heads.toHex()}
             withCopy
           />
@@ -61,8 +63,8 @@ function Details ({ parachain: { heads, id, info } }: Props): React.ReactElement
       <div className='ui--row'>
         <Labelled
           className='full label-small'
-          help={t('The compiled runtime WASM for this parachain.')}
-          label={t('code')}
+          help={t<string>('The compiled runtime WASM for this parachain.')}
+          label={t<string>('code')}
         >
           <div
             className='ui--Static ui selection dropdown'
@@ -70,7 +72,7 @@ function Details ({ parachain: { heads, id, info } }: Props): React.ReactElement
           >
             <IconLink
               icon='download'
-              label={t('Download')}
+              label={t<string>('Download')}
               onClick={onDownload}
             />
           </div>
diff --git a/packages/page-parachains/src/Parachain/DispatchQueue.tsx b/packages/page-parachains/src/Parachain/DispatchQueue.tsx
index 9afa6c3e91..6fd2eba42a 100644
--- a/packages/page-parachains/src/Parachain/DispatchQueue.tsx
+++ b/packages/page-parachains/src/Parachain/DispatchQueue.tsx
@@ -15,17 +15,17 @@ interface Props {
   dispatchQueue: UpwardMessage[];
 }
 
-function DispatchQueue ({ className, dispatchQueue = [] }: Props): React.ReactElement<Props> {
+function DispatchQueue ({ className = '', dispatchQueue = [] }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
     <div className={className}>
-      <h1>{t('relay dispatch queue')}</h1>
+      <h1>{t<string>('relay dispatch queue')}</h1>
       {
         dispatchQueue.length === 0
           ? (
             <>
-              {t('no messages')}
+              {t<string>('no messages')}
             </>
           )
           : (
@@ -40,17 +40,17 @@ function DispatchQueue ({ className, dispatchQueue = [] }: Props): React.ReactEl
                       <div className='ui--row'>
                         <Static
                           className='full label-small'
-                          help={t('Message origin.')}
-                          label={t('origin')}
+                          help={t<string>('Message origin.')}
+                          label={t<string>('origin')}
                           value={origin.toString()}
                         />
                       </div>
                       <div className='ui--row'>
                         <Output
                           className='full label-small'
-                          help={t('Message data')}
+                          help={t<string>('Message data')}
                           isMonospace
-                          label={t('data')}
+                          label={t<string>('data')}
                           value={data.toHex()}
                           withCopy
                         />
diff --git a/packages/page-parachains/src/Parachain/index.tsx b/packages/page-parachains/src/Parachain/index.tsx
index f0d7054960..de00878b53 100644
--- a/packages/page-parachains/src/Parachain/index.tsx
+++ b/packages/page-parachains/src/Parachain/index.tsx
@@ -24,11 +24,11 @@ interface Props extends ComponentProps {
   paraInfoRef: React.MutableRefObject<DeriveParachainInfo | null>;
 }
 
-function Parachain ({ basePath, className, 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 { id } = useParams<{ id: string }>();
   const [isMenuOpen, toggleMenu] = useToggle();
   const { isOpen: isDeregisterOpen, onClose: onDeregisterClose, onOpen: onDeregisterOpen } = useModal();
   const parachain = useCall<DeriveParachainFull | null>(api.derive.parachains.info, [id || null]);
@@ -93,7 +93,7 @@ function Parachain ({ basePath, className, isMine, paraInfoRef, sudoKey }: Props
                       onDeregisterOpen();
                     }}
                   >
-                    {t('Deregister this parachain')}
+                    {t<string>('Deregister this parachain')}
                   </Menu.Item>
                 </Menu>
               </Popup>
@@ -101,11 +101,11 @@ function Parachain ({ basePath, className, isMine, paraInfoRef, sudoKey }: Props
           </ParachainInfo>
         </section>
         <section>
-          <CardSummary label={t('parachain id')}>
+          <CardSummary label={t<string>('parachain id')}>
             {id.toString()}
           </CardSummary>
           {parachain.pendingSwapId && (
-            <CardSummary label={t('pending swap id')}>
+            <CardSummary label={t<string>('pending swap id')}>
               {parachain.pendingSwapId.toString()}
             </CardSummary>
           )}
diff --git a/packages/page-parachains/src/ParachainInfo.tsx b/packages/page-parachains/src/ParachainInfo.tsx
index ef77d1b12e..fd5a21c895 100644
--- a/packages/page-parachains/src/ParachainInfo.tsx
+++ b/packages/page-parachains/src/ParachainInfo.tsx
@@ -18,7 +18,7 @@ interface Props {
   isBig?: boolean;
 }
 
-function ParachainInfo ({ children, className, info, isBig }: Props): React.ReactElement<Props> {
+function ParachainInfo ({ children, className = '', info, isBig }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
diff --git a/packages/page-parachains/src/index.tsx b/packages/page-parachains/src/index.tsx
index c86540cbc6..93393b83b4 100644
--- a/packages/page-parachains/src/index.tsx
+++ b/packages/page-parachains/src/index.tsx
@@ -29,7 +29,7 @@ function ParachainsApp ({ basePath }: Props): React.ReactElement<Props> {
     {
       isRoot: true,
       name: 'overview',
-      text: t('Parachains overview')
+      text: t<string>('Parachains overview')
     },
     ...(
       match && match.params.id
diff --git a/packages/page-parachains/src/util.ts b/packages/page-parachains/src/util.ts
index 4e403d5dd2..df669f8ddb 100644
--- a/packages/page-parachains/src/util.ts
+++ b/packages/page-parachains/src/util.ts
@@ -6,9 +6,9 @@ import { TFunction } from 'i18next';
 import { DeriveParachainInfo } from '@polkadot/api-derive/types';
 
 export function parachainName (t: TFunction, info: DeriveParachainInfo | null): string {
-  return info?.name || t('Unknown Chain');
+  return info?.name || t<string>('Unknown Chain');
 }
 
 export function parachainOwner (t: TFunction, info: DeriveParachainInfo | null): string {
-  return info?.owner || t('Unknown Owner');
+  return info?.owner || t<string>('Unknown Owner');
 }
diff --git a/packages/page-settings/src/Developer.tsx b/packages/page-settings/src/Developer.tsx
index 25b7ae56e1..76adf4c8f7 100644
--- a/packages/page-settings/src/Developer.tsx
+++ b/packages/page-settings/src/Developer.tsx
@@ -25,7 +25,7 @@ interface AllState {
   typesPlaceholder: string | null;
 }
 
-function Developer ({ className, onStatusChange }: Props): React.ReactElement<Props> {
+function Developer ({ className = '', onStatusChange }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [code, setCode] = useState(EMPTY_CODE);
   const [isJsonValid, setIsJsonValid] = useState(true);
@@ -34,7 +34,7 @@ function Developer ({ className, onStatusChange }: Props): React.ReactElement<Pr
   const [typesPlaceholder, setTypesPlaceholder] = useState<string | null>(null);
 
   useEffect((): void => {
-    const types = store.get('types') || {};
+    const types = store.get('types') as Record<string, unknown> || {};
 
     if (Object.keys(types).length) {
       setCode(JSON.stringify(types, null, 2));
@@ -74,7 +74,7 @@ function Developer ({ className, onStatusChange }: Props): React.ReactElement<Pr
       const code = u8aToString(data);
 
       try {
-        const types = JSON.parse(code);
+        const types = JSON.parse(code) as Record<string, unknown>;
         const typesPlaceholder = Object.keys(types).join(', ');
 
         console.log('Detected types:', typesPlaceholder);
@@ -94,7 +94,7 @@ function Developer ({ className, onStatusChange }: Props): React.ReactElement<Pr
           isJsonValid: false,
           isTypesValid: false,
           types: {},
-          typesPlaceholder: error.message
+          typesPlaceholder: (error as Error).message
         });
       }
     },
@@ -109,10 +109,10 @@ function Developer ({ className, onStatusChange }: Props): React.ReactElement<Pr
         }
 
         _onChangeTypes(stringToU8a(code));
-      } catch (e) {
+      } catch (error) {
         setCode(code);
         setIsJsonValid(false);
-        setTypesPlaceholder(e.message);
+        setTypesPlaceholder((error as Error).message);
       }
     },
     [_onChangeTypes, t]
@@ -125,14 +125,14 @@ function Developer ({ className, onStatusChange }: Props): React.ReactElement<Pr
         store.set('types', types);
         setIsTypesValid(true);
         onStatusChange({
-          action: t('Your custom types have been added'),
+          action: t<string>('Your custom types have been added'),
           status: 'success'
         });
       } catch (error) {
         console.error(error);
         setIsTypesValid(false);
         onStatusChange({
-          action: t(`Error saving your custom types. ${error.message}`),
+          action: t(`Error saving your custom types. ${(error as Error).message}`),
           status: 'error'
         });
       }
@@ -151,9 +151,9 @@ function Developer ({ className, onStatusChange }: Props): React.ReactElement<Pr
         <div className='full'>
           <InputFile
             clearContent={typesHasNoEntries && isTypesValid}
-            help={t('Save the type definitions for your custom structures as key-value pairs in a valid JSON file. The key should be the name of your custom structure and the value an object containing your type definitions.')}
+            help={t<string>('Save the type definitions for your custom structures as key-value pairs in a valid JSON file. The key should be the name of your custom structure and the value an object containing your type definitions.')}
             isError={!isTypesValid}
-            label={t('Additional types as a JSON file (or edit below)')}
+            label={t<string>('Additional types as a JSON file (or edit below)')}
             onChange={_onChangeTypes}
             placeholder={typesPlaceholder}
           />
@@ -177,13 +177,13 @@ function Developer ({ className, onStatusChange }: Props): React.ReactElement<Pr
       <Button.Group>
         <Button
           icon='sync'
-          label={t('Reset')}
+          label={t<string>('Reset')}
           onClick={_clearTypes}
         />
         <Button
           icon='save'
           isDisabled={!isTypesValid || !isJsonValid}
-          label={t('Save')}
+          label={t<string>('Save')}
           onClick={_saveDeveloper}
         />
       </Button.Group>
diff --git a/packages/page-settings/src/General.tsx b/packages/page-settings/src/General.tsx
index f391576dd0..ee4208df3b 100644
--- a/packages/page-settings/src/General.tsx
+++ b/packages/page-settings/src/General.tsx
@@ -22,7 +22,7 @@ interface Props {
 
 const ledgerConnOptions = uiSettings.availableLedgerConn;
 
-function General ({ className, isModalContent, onClose }: Props): React.ReactElement<Props> {
+function General ({ className = '', isModalContent, onClose }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   // tri-state: null = nothing changed, false = no reload, true = reload required
   const [changed, setChanged] = useState<boolean | null>(null);
@@ -41,8 +41,8 @@ function General ({ className, isModalContent, onClose }: Props): React.ReactEle
   );
 
   useEffect((): void => {
-    const prev = uiSettings.get();
-    const hasChanges = Object.entries(settings).some(([key, value]): boolean => (prev as any)[key] !== value);
+    const prev = uiSettings.get() as unknown as Record<string, unknown>;
+    const hasChanges = Object.entries(settings).some(([key, value]) => prev[key] !== value);
     const needsReload = prev.apiUrl !== settings.apiUrl || prev.prefix !== settings.prefix;
 
     setChanged(
@@ -79,7 +79,7 @@ function General ({ className, isModalContent, onClose }: Props): React.ReactEle
           <Modal.Columns>
             <Modal.Column>{networkSelector}</Modal.Column>
             <Modal.Column>
-              {t('The RPC node can be selected from the pre-defined list or manually entered, depending on the chain you wish to connect to.')}
+              {t<string>('The RPC node can be selected from the pre-defined list or manually entered, depending on the chain you wish to connect to.')}
             </Modal.Column>
           </Modal.Columns>
         )
@@ -90,8 +90,8 @@ function General ({ className, isModalContent, onClose }: Props): React.ReactEle
           <div className='ui--row'>
             <Dropdown
               defaultValue={prefix}
-              help={t('Override the default ss58 prefix for address generation')}
-              label={t('address prefix')}
+              help={t<string>('Override the default ss58 prefix for address generation')}
+              label={t<string>('address prefix')}
               onChange={_handleChange('prefix')}
               options={prefixOptions}
             />
@@ -99,8 +99,8 @@ function General ({ className, isModalContent, onClose }: Props): React.ReactEle
           <div className='ui--row'>
             <Dropdown
               defaultValue={icon}
-              help={t('Override the default identity icon display with a specific theme')}
-              label={t('default icon theme')}
+              help={t<string>('Override the default identity icon display with a specific theme')}
+              label={t<string>('default icon theme')}
               onChange={_handleChange('icon')}
               options={iconOptions}
             />
@@ -108,8 +108,8 @@ function General ({ className, isModalContent, onClose }: Props): React.ReactEle
           <div className='ui--row'>
             <Dropdown
               defaultValue={uiMode}
-              help={t('Adjust the mode from basic (with a limited number of beginner-user-friendly apps) to full (with all basic & advanced apps available)')}
-              label={t('interface operation mode')}
+              help={t<string>('Adjust the mode from basic (with a limited number of beginner-user-friendly apps) to full (with all basic & advanced apps available)')}
+              label={t<string>('interface operation mode')}
               onChange={_handleChange('uiMode')}
               options={uiSettings.availableUIModes}
             />
@@ -118,8 +118,8 @@ function General ({ className, isModalContent, onClose }: Props): React.ReactEle
             <div className='ui--row'>
               <Dropdown
                 defaultValue={ledgerConn}
-                help={t('Manage your connection to Ledger S')}
-                label={t('manage hardware connections')}
+                help={t<string>('Manage your connection to Ledger S')}
+                label={t<string>('manage hardware connections')}
                 onChange={_handleChange('ledgerConn')}
                 options={ledgerConnOptions}
               />
@@ -128,7 +128,7 @@ function General ({ className, isModalContent, onClose }: Props): React.ReactEle
           <div className='ui--row'>
             <Dropdown
               defaultValue={i18nLang}
-              label={t('default interface language')}
+              label={t<string>('default interface language')}
               onChange={_handleChange('i18nLang')}
               options={translateLanguages}
             />
@@ -145,8 +145,8 @@ function General ({ className, isModalContent, onClose }: Props): React.ReactEle
           isPrimary={isModalContent}
           label={
             changed
-              ? t('Save & Reload')
-              : t('Save')
+              ? t<string>('Save & Reload')
+              : t<string>('Save')
           }
           onClick={
             changed
diff --git a/packages/page-settings/src/I18n/StringInput.tsx b/packages/page-settings/src/I18n/StringInput.tsx
index 3f79fc70fb..f0a8d7daf2 100644
--- a/packages/page-settings/src/I18n/StringInput.tsx
+++ b/packages/page-settings/src/I18n/StringInput.tsx
@@ -14,7 +14,7 @@ interface Props {
   tval: string;
 }
 
-function StringInput ({ className, onChange, original, tkey, tval }: Props): React.ReactElement<Props> {
+function StringInput ({ className = '', onChange, original, tkey, tval }: Props): React.ReactElement<Props> {
   const _onChange = useCallback(
     (value: string) => onChange(tkey, value),
     [onChange, tkey]
diff --git a/packages/page-settings/src/I18n/index.tsx b/packages/page-settings/src/I18n/index.tsx
index fcefa23733..dd5457ad32 100644
--- a/packages/page-settings/src/I18n/index.tsx
+++ b/packages/page-settings/src/I18n/index.tsx
@@ -39,8 +39,8 @@ async function retrieveJson (url: string): Promise<any> {
 }
 
 async function retrieveEnglish (): Promise<StringsMod> {
-  const paths: Array<string> = await retrieveJson('en/index.json');
-  const strings: Strings[] = await Promise.all(paths.map((path) => retrieveJson(`en/${path}`)));
+  const paths = await retrieveJson('en/index.json') as Array<string>;
+  const strings: Strings[] = await Promise.all(paths.map((path) => retrieveJson(`en/${path}`) as Promise<Strings>));
 
   return strings.reduce((language: StringsMod, strings, index): StringsMod => {
     language[paths[index]] = strings;
@@ -50,7 +50,7 @@ async function retrieveEnglish (): Promise<StringsMod> {
 }
 
 async function retrieveAll (): Promise<Defaults> {
-  const _keys: string[] = await retrieveJson('index.json');
+  const _keys = await retrieveJson('index.json') as string[];
   const keys = _keys.filter((lng) => lng !== 'en');
   const missing = keys.filter((lng) => !languageCache[lng]);
   const english = await retrieveEnglish();
@@ -60,7 +60,7 @@ async function retrieveAll (): Promise<Defaults> {
 
   missing.forEach((lng, index): void => {
     // setup the language cache
-    languageCache[lng] = translations[index];
+    languageCache[lng] = translations[index] as Record<string, string>;
 
     // fill in all empty values (useful for download, filling in)
     Object.keys(english).forEach((record): void => {
@@ -143,7 +143,7 @@ function Translate ({ className }: Props): React.ReactElement<Props> {
   const [strings, setStrings] = useState<Strings | null>(null);
 
   useEffect((): void => {
-    retrieveAll().then(setDefaults);
+    retrieveAll().then(setDefaults).catch(console.error);
   }, []);
 
   useEffect((): void => {
@@ -201,7 +201,7 @@ function Translate ({ className }: Props): React.ReactElement<Props> {
           <Column>
             <Dropdown
               isFull
-              label={t('the language to display translations for')}
+              label={t<string>('the language to display translations for')}
               onChange={setLng}
               options={keys}
               value={lng}
@@ -211,12 +211,12 @@ function Translate ({ className }: Props): React.ReactElement<Props> {
               total={modProgress[1]}
               value={modProgress[0]}
             />
-            {t('{{done}}/{{total}}, {{progress}}% done', { replace: progressDisplay(modProgress) })}
+            {t<string>('{{done}}/{{total}}, {{progress}}% done', { replace: progressDisplay(modProgress) })}
           </Column>
           <Column>
             <Dropdown
               isFull
-              label={t('the module to display strings for')}
+              label={t<string>('the module to display strings for')}
               onChange={setRecord}
               options={modules}
               value={record}
@@ -226,7 +226,7 @@ function Translate ({ className }: Props): React.ReactElement<Props> {
               total={allProgress[record]?.[1]}
               value={allProgress[record]?.[0]}
             />
-            {t('{{done}}/{{total}}, {{progress}}% done', { replace: progressDisplay(allProgress[record]) })}
+            {t<string>('{{done}}/{{total}}, {{progress}}% done', { replace: progressDisplay(allProgress[record]) })}
           </Column>
         </Columar>
       </header>
@@ -234,8 +234,8 @@ function Translate ({ className }: Props): React.ReactElement<Props> {
         <Toggle
           label={
             withEmpty
-              ? t('include all empty strings in the generated file')
-              : t('do not include empty strings in the generated file')
+              ? t<string>('include all empty strings in the generated file')
+              : t<string>('do not include empty strings in the generated file')
           }
           onChange={toggleWithEmpty}
           value={withEmpty}
@@ -244,7 +244,7 @@ function Translate ({ className }: Props): React.ReactElement<Props> {
       <Button.Group>
         <Button
           icon='download'
-          label={t('Generate {{lng}}/translation.json', { replace: { lng } })}
+          label={t<string>('Generate {{lng}}/translation.json', { replace: { lng } })}
           onClick={_onDownload}
         />
       </Button.Group>
diff --git a/packages/page-settings/src/Metadata/ChainColorIndicator.tsx b/packages/page-settings/src/Metadata/ChainColorIndicator.tsx
index 5e63bb8ef5..a9cbf5eebe 100644
--- a/packages/page-settings/src/Metadata/ChainColorIndicator.tsx
+++ b/packages/page-settings/src/Metadata/ChainColorIndicator.tsx
@@ -11,7 +11,7 @@ interface Props extends BareProps {
   color: string;
 }
 
-function ChainColorIndicator ({ className, color }: Props): React.ReactElement<Props> {
+function ChainColorIndicator ({ className = '', color }: Props): React.ReactElement<Props> {
   return (
     <div
       className={className}
diff --git a/packages/page-settings/src/Metadata/Extensions.tsx b/packages/page-settings/src/Metadata/Extensions.tsx
index 167944e6ad..e804105abf 100644
--- a/packages/page-settings/src/Metadata/Extensions.tsx
+++ b/packages/page-settings/src/Metadata/Extensions.tsx
@@ -36,7 +36,8 @@ function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props>
         extensions[selectedIndex]
           .update(chainInfo)
           .catch(() => false)
-          .then(() => toggleBusy());
+          .then(() => toggleBusy())
+          .catch(console.error);
       }
     },
     [chainInfo, extensions, selectedIndex, toggleBusy]
@@ -49,7 +50,7 @@ function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props>
           ? (
             <>
               <Dropdown
-                label={t('upgradable extensions')}
+                label={t<string>('upgradable extensions')}
                 onChange={setSelectedIndex}
                 options={options}
                 value={selectedIndex}
@@ -58,13 +59,13 @@ function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props>
                 <Button
                   icon='upload'
                   isDisabled={isBusy}
-                  label={t('Update metadata')}
+                  label={t<string>('Update metadata')}
                   onClick={_updateMeta}
                 />
               </Button.Group>
             </>
           )
-          : <div>{t('No upgradable extensions found')}</div>
+          : <div>{t<string>('No upgradable extensions found')}</div>
         : <Spinner />
       }
     </div>
diff --git a/packages/page-settings/src/Metadata/NetworkSpecs.tsx b/packages/page-settings/src/Metadata/NetworkSpecs.tsx
index 9febcd4203..d09469b2bd 100644
--- a/packages/page-settings/src/Metadata/NetworkSpecs.tsx
+++ b/packages/page-settings/src/Metadata/NetworkSpecs.tsx
@@ -92,18 +92,18 @@ function NetworkSpecs ({ chainInfo, className }: Props): React.ReactElement<Prop
         <div className='settings--networkSpecs-name'>
           <Input
             className='full'
-            help={t('Name of the network. It is only for display purposes.')}
+            help={t<string>('Name of the network. It is only for display purposes.')}
             isDisabled
-            label={t('Network Name')}
+            label={t<string>('Network Name')}
             value={networkSpecs.title}
           />
           <ChainImg className='settings--networkSpecs-logo' />
         </div>
         <Input
           className='full'
-          help={t('The color used to distinguish this network with others, use color code with 3 or 6 digits, like "#FFF" or "#111111"')}
+          help={t<string>('The color used to distinguish this network with others, use color code with 3 or 6 digits, like "#FFF" or "#111111"')}
           isError={!_checkColorValid()}
-          label={t('Color')}
+          label={t<string>('Color')}
           onChange={_onChangeColor}
           value={networkSpecs.color}
         >
@@ -111,7 +111,7 @@ function NetworkSpecs ({ chainInfo, className }: Props): React.ReactElement<Prop
             <Button
               icon='sync'
               key='spread'
-              label={t('Random')}
+              label={t<string>('Random')}
               onClick={_onSetRandomColor}
             />
             <ChainColorIndicator color={networkSpecs.color}/>
@@ -119,31 +119,31 @@ function NetworkSpecs ({ chainInfo, className }: Props): React.ReactElement<Prop
         </Input>
         <Input
           className='full'
-          help={t('Genesis Hash refers to initial state of the chain, it cannot be changed once the chain is launched')}
+          help={t<string>('Genesis Hash refers to initial state of the chain, it cannot be changed once the chain is launched')}
           isDisabled
-          label={t('Genesis Hash')}
+          label={t<string>('Genesis Hash')}
           value={networkSpecs.genesisHash}
         />
         <Input
           className='full'
-          help={t('Unit decides the name of 1 unit token, e.g. "DOT" for Polkadot')}
+          help={t<string>('Unit decides the name of 1 unit token, e.g. "DOT" for Polkadot')}
           isDisabled
-          label={t('Unit')}
+          label={t<string>('Unit')}
           value={networkSpecs.unit}
         />
         <Input
           className='full'
-          help={t('Prefix indicates the ss58 address format in this network, it is a number between 0 ~ 255 that describes the precise format of the bytes of the address')}
+          help={t<string>('Prefix indicates the ss58 address format in this network, it is a number between 0 ~ 255 that describes the precise format of the bytes of the address')}
           isDisabled
-          label={t('Address Prefix')}
-          value={networkSpecs.prefix}
+          label={t<string>('Address Prefix')}
+          value={networkSpecs.prefix.toString()}
         />
         <Input
           className='full'
-          help={t('Decimals decides the smallest unit of the token, which is 1/10^decimals')}
+          help={t<string>('Decimals decides the smallest unit of the token, which is 1/10^decimals')}
           isDisabled
-          label={t('Decimals')}
-          value={networkSpecs.decimals}
+          label={t<string>('Decimals')}
+          value={networkSpecs.decimals.toString()}
         />
       </Column>
       <Column>
diff --git a/packages/page-settings/src/Metadata/iconOption.tsx b/packages/page-settings/src/Metadata/iconOption.tsx
index 7bc5af72f8..fa04a1dfb0 100644
--- a/packages/page-settings/src/Metadata/iconOption.tsx
+++ b/packages/page-settings/src/Metadata/iconOption.tsx
@@ -9,7 +9,7 @@ interface Option {
   value: number | string;
 }
 
-export default function itemOption (label: string, value: string | number, img: any): Option {
+export default function itemOption (label: string, value: string | number, img: unknown): Option {
   return {
     text: (
       <div
@@ -19,7 +19,7 @@ export default function itemOption (label: string, value: string | number, img:
         <img
           alt={label}
           className='ui--Dropdown-icon'
-          src={img}
+          src={img as string}
         />
         <div className='ui--Dropdown-name'>{label}</div>
       </div>
diff --git a/packages/page-settings/src/Metadata/index.tsx b/packages/page-settings/src/Metadata/index.tsx
index 9f3c790c45..c692a36343 100644
--- a/packages/page-settings/src/Metadata/index.tsx
+++ b/packages/page-settings/src/Metadata/index.tsx
@@ -15,9 +15,9 @@ export default function Metadata (): React.ReactElement {
 
   return (
     <>
-      <h1>{t('Extensions')}</h1>
+      <h1>{t<string>('Extensions')}</h1>
       <Extensions chainInfo={chainInfo} />
-      <h1>{t('Chain specifications')}</h1>
+      <h1>{t<string>('Chain specifications')}</h1>
       <NetworkSpecs chainInfo={chainInfo} />
     </>
   );
diff --git a/packages/page-settings/src/SelectUrl.tsx b/packages/page-settings/src/SelectUrl.tsx
index 871851d6d0..d284d88ee9 100644
--- a/packages/page-settings/src/SelectUrl.tsx
+++ b/packages/page-settings/src/SelectUrl.tsx
@@ -45,7 +45,7 @@ function makeUrl (_url: string): StateUrl {
 
 // this allows us to retrieve the initial state by reading the settings and the applying
 // validation on-top of the values retrieved
-function getInitialState (t: (key: string) => string): State {
+function getInitialState (t: <T = string> (key: string) => T): State {
   const url = uiSettings.get().apiUrl;
 
   return {
@@ -57,9 +57,9 @@ function getInitialState (t: (key: string) => string): State {
   };
 }
 
-function SelectUrl ({ className, onChange }: Props): React.ReactElement<Props> {
+function SelectUrl ({ className = '', onChange }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const [info, setInfo] = useState(getInitialState(() => ''));
+  const [info, setInfo] = useState(getInitialState(t));
   const { isCustom, isValid, url } = info;
   const translatedEndpoints = useMemo(
     () => createEndpoints(t).map((option) => createOption(option, ['local'])),
@@ -84,15 +84,15 @@ function SelectUrl ({ className, onChange }: Props): React.ReactElement<Props> {
       ...makeUrl(
         isCustom
           ? info.url
-          : (createEndpoints(() => '').find(({ value }) => !!value) || { value: 'ws://127.0.0.1:9944' }).value as string
+          : (createEndpoints(t).find(({ value }) => !!value) || { value: 'ws://127.0.0.1:9944' }).value as string
       ),
       isCustom
     }),
-    [info]
+    [info, t]
   );
 
-  const help = t('Select the remote endpoint, either from the dropdown on manual entered via the custom toggle');
-  const label = t('remote node/endpoint to connect to');
+  const help = t<string>('Select the remote endpoint, either from the dropdown on manual entered via the custom toggle');
+  const label = t<string>('remote node/endpoint to connect to');
 
   return (
     <div className={className}>
@@ -116,7 +116,7 @@ function SelectUrl ({ className, onChange }: Props): React.ReactElement<Props> {
       <Toggle
         className='settings--customToggle'
         defaultValue={isCustom}
-        label={t('custom endpoint')}
+        label={t<string>('custom endpoint')}
         onChange={_onChangeCustom}
       />
     </div>
diff --git a/packages/page-settings/src/index.tsx b/packages/page-settings/src/index.tsx
index b75f94998e..43b3d00d20 100644
--- a/packages/page-settings/src/index.tsx
+++ b/packages/page-settings/src/index.tsx
@@ -30,11 +30,11 @@ function SettingsApp ({ basePath, onStatusChange }: Props): React.ReactElement<P
     {
       isRoot: true,
       name: 'general',
-      text: t('General')
+      text: t<string>('General')
     },
     {
       name: 'metadata',
-      text: t('Metadata {{count}}', {
+      text: t<string>('Metadata {{count}}', {
         replace: {
           count: numExtensions ? `(${numExtensions})` : ''
         }
@@ -42,17 +42,17 @@ function SettingsApp ({ basePath, onStatusChange }: Props): React.ReactElement<P
     },
     {
       name: 'developer',
-      text: t('Developer')
+      text: t<string>('Developer')
     },
     {
       name: 'i18n',
-      text: t('Translate')
+      text: t<string>('Translate')
     }
   ], [numExtensions, t]);
 
   return (
     <main className='settings--App'>
-      <HelpOverlay md={md} />
+      <HelpOverlay md={md as string} />
       <header>
         <Tabs
           basePath={basePath}
diff --git a/packages/page-settings/src/useChainInfo.ts b/packages/page-settings/src/useChainInfo.ts
index a6630e14a8..ba9f100813 100644
--- a/packages/page-settings/src/useChainInfo.ts
+++ b/packages/page-settings/src/useChainInfo.ts
@@ -26,7 +26,7 @@ export default function useChainInfo (): ChainInfo | null {
       ss58Format: api.registry.chainSS58 || 42,
       tokenDecimals: api.registry.chainDecimals || 12,
       tokenSymbol: api.registry.chainToken || 'Unit',
-      types: getSpecTypes(registry, systemChain, api.runtimeVersion.specName, api.runtimeVersion.specVersion)
+      types: getSpecTypes(registry, systemChain, api.runtimeVersion.specName, api.runtimeVersion.specVersion) as unknown as Record<string, string>
     });
   }, [api, isApiReady, systemChain, systemName]);
 
diff --git a/packages/page-society/src/Overview/Bids.tsx b/packages/page-society/src/Overview/Bids.tsx
index bd4872d5d8..f55f02459b 100644
--- a/packages/page-society/src/Overview/Bids.tsx
+++ b/packages/page-society/src/Overview/Bids.tsx
@@ -29,7 +29,7 @@ function Bids ({ className }: Props): React.ReactElement<Props> {
   return (
     <Table
       className={className}
-      empty={bids && t('No bids')}
+      empty={bids && t<string>('No bids')}
       header={header}
     >
       {bids?.map((bid): React.ReactNode => (
diff --git a/packages/page-society/src/Overview/CandidateVoting.tsx b/packages/page-society/src/Overview/CandidateVoting.tsx
index 8cadb88503..662bea727c 100644
--- a/packages/page-society/src/Overview/CandidateVoting.tsx
+++ b/packages/page-society/src/Overview/CandidateVoting.tsx
@@ -20,24 +20,24 @@ function CandidateVoting ({ candidateId, isMember, ownMembers }: Props): React.R
   const [vote, setVote] = useState(true);
   const [accountId, setAccountId] = useState<string | null>(null);
   const voteOpts = useMemo(() => [
-    { text: t('Aye, I approve'), value: true },
-    { text: t('Nay, I do not approve'), value: false }
+    { text: t<string>('Aye, I approve'), value: true },
+    { text: t<string>('Nay, I do not approve'), value: false }
   ], [t]);
 
   return (
     <>
       {isVisible && (
-        <Modal header={t('Vote for candidate')}>
+        <Modal header={t<string>('Vote for candidate')}>
           <Modal.Content>
             <InputAddress
               filter={ownMembers}
-              help={t('The address to vote from (must be a member)')}
-              label={t('vote from account')}
+              help={t<string>('The address to vote from (must be a member)')}
+              label={t<string>('vote from account')}
               onChange={setAccountId}
             />
             <Dropdown
-              help={t('Approve this candidacy.')}
-              label={t('vote for candidate')}
+              help={t<string>('Approve this candidacy.')}
+              label={t<string>('vote for candidate')}
               onChange={setVote}
               options={voteOpts}
               value={vote}
@@ -47,7 +47,7 @@ function CandidateVoting ({ candidateId, isMember, ownMembers }: Props): React.R
             <TxButton
               accountId={accountId}
               icon='check'
-              label={t('Vote')}
+              label={t<string>('Vote')}
               onStart={toggleVisible}
               params={[candidateId, vote]}
               tx='society.vote'
@@ -58,7 +58,7 @@ function CandidateVoting ({ candidateId, isMember, ownMembers }: Props): React.R
       <Button
         icon='check'
         isDisabled={!isMember}
-        label={t('Vote')}
+        label={t<string>('Vote')}
         onClick={toggleVisible}
       />
     </>
diff --git a/packages/page-society/src/Overview/Candidates.tsx b/packages/page-society/src/Overview/Candidates.tsx
index f9bb0fe17a..91db9eb5f0 100644
--- a/packages/page-society/src/Overview/Candidates.tsx
+++ b/packages/page-society/src/Overview/Candidates.tsx
@@ -16,7 +16,7 @@ interface Props extends OwnMembers {
   className?: string;
 }
 
-function Candidates ({ allMembers, className, isMember, ownMembers }: Props): React.ReactElement<Props> {
+function Candidates ({ allMembers, className = '', isMember, ownMembers }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const candidates = useCall<DeriveSocietyCandidate[]>(api.derive.society.candidates, []);
@@ -31,7 +31,7 @@ function Candidates ({ allMembers, className, isMember, ownMembers }: Props): Re
   return (
     <Table
       className={className}
-      empty={candidates && t('No candidates')}
+      empty={candidates && t<string>('No candidates')}
       header={header}
     >
       {candidates?.map((candidate): React.ReactNode => (
diff --git a/packages/page-society/src/Overview/Defender.tsx b/packages/page-society/src/Overview/Defender.tsx
index 498595c570..4f107388a1 100644
--- a/packages/page-society/src/Overview/Defender.tsx
+++ b/packages/page-society/src/Overview/Defender.tsx
@@ -19,7 +19,7 @@ interface Props extends OwnMembers {
   info?: DeriveSociety;
 }
 
-function Defender ({ className, info, isMember, ownMembers }: Props): React.ReactElement<Props> | null {
+function Defender ({ className = '', info, isMember, ownMembers }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const votes = useCall<VoteType[]>(api.derive.society.members, [], {
diff --git a/packages/page-society/src/Overview/DefenderVoting.tsx b/packages/page-society/src/Overview/DefenderVoting.tsx
index eaae74218b..ea446fcb97 100644
--- a/packages/page-society/src/Overview/DefenderVoting.tsx
+++ b/packages/page-society/src/Overview/DefenderVoting.tsx
@@ -19,24 +19,24 @@ function DefenderVoting ({ isMember, ownMembers }: Props): React.ReactElement<Pr
   const [vote, setVote] = useState(true);
   const [accountId, setAccountId] = useState<string | null>(null);
   const voteOpts = useMemo(() => [
-    { text: t('Aye, I approve'), value: true },
-    { text: t('Nay, I do not approve'), value: false }
+    { text: t<string>('Aye, I approve'), value: true },
+    { text: t<string>('Nay, I do not approve'), value: false }
   ], [t]);
 
   return (
     <>
       {isVisible && (
-        <Modal header={t('Vote for defender')}>
+        <Modal header={t<string>('Vote for defender')}>
           <Modal.Content>
             <InputAddress
               filter={ownMembers}
-              help={t('The address to vote from (must be a member)')}
-              label={t('vote from account')}
+              help={t<string>('The address to vote from (must be a member)')}
+              label={t<string>('vote from account')}
               onChange={setAccountId}
             />
             <Dropdown
-              help={t('Approve or reject this defender.')}
-              label={t('vote for defender')}
+              help={t<string>('Approve or reject this defender.')}
+              label={t<string>('vote for defender')}
               onChange={setVote}
               options={voteOpts}
               value={vote}
@@ -46,7 +46,7 @@ function DefenderVoting ({ isMember, ownMembers }: Props): React.ReactElement<Pr
             <TxButton
               accountId={accountId}
               icon='check'
-              label={t('Vote')}
+              label={t<string>('Vote')}
               onStart={toggleVisible}
               params={[vote]}
               tx='society.defenderVote'
@@ -57,7 +57,7 @@ function DefenderVoting ({ isMember, ownMembers }: Props): React.ReactElement<Pr
       <Button
         icon='check'
         isDisabled={!isMember}
-        label={t('Vote')}
+        label={t<string>('Vote')}
         onClick={toggleVisible}
       />
     </>
diff --git a/packages/page-society/src/Overview/Member.tsx b/packages/page-society/src/Overview/Member.tsx
index ea8f247cb1..15a5ff1012 100644
--- a/packages/page-society/src/Overview/Member.tsx
+++ b/packages/page-society/src/Overview/Member.tsx
@@ -15,7 +15,7 @@ interface Props {
   value: DeriveSocietyMember;
 }
 
-function Member ({ className, isHead, value: { accountId, strikes } }: Props): React.ReactElement<Props> {
+function Member ({ className = '', isHead, value: { accountId, strikes } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
@@ -27,8 +27,8 @@ function Member ({ className, isHead, value: { accountId, strikes } }: Props): R
         {isHead && (
           <Tag
             color='green'
-            hover={t('Current society head, exempt')}
-            label={t('society head')}
+            hover={t<string>('Current society head, exempt')}
+            label={t<string>('society head')}
           />
         )}
       </td>
diff --git a/packages/page-society/src/Overview/Members.tsx b/packages/page-society/src/Overview/Members.tsx
index 2c8d9a779d..352aa02466 100644
--- a/packages/page-society/src/Overview/Members.tsx
+++ b/packages/page-society/src/Overview/Members.tsx
@@ -16,7 +16,7 @@ interface Props {
   info?: DeriveSociety;
 }
 
-function Members ({ className, info }: Props): React.ReactElement<Props> {
+function Members ({ className = '', info }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const members = useCall<DeriveSocietyMember[]>(api.derive.society.members, []);
@@ -36,7 +36,7 @@ function Members ({ className, info }: Props): React.ReactElement<Props> {
   return (
     <Table
       className={className}
-      empty={info && t('No active members')}
+      empty={info && t<string>('No active members')}
       header={header}
     >
       {filtered.map((member): React.ReactNode => (
diff --git a/packages/page-society/src/Overview/Summary.tsx b/packages/page-society/src/Overview/Summary.tsx
index 734966445d..a980076844 100644
--- a/packages/page-society/src/Overview/Summary.tsx
+++ b/packages/page-society/src/Overview/Summary.tsx
@@ -18,7 +18,7 @@ interface Props {
   info?: DeriveSociety;
 }
 
-function Summary ({ className, info }: Props): React.ReactElement<Props> {
+function Summary ({ className = '', info }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const members = useCall<any[]>(api.derive.society.members, []);
@@ -34,7 +34,7 @@ function Summary ({ className, info }: Props): React.ReactElement<Props> {
     <SummaryBox className={className}>
       <section className='ui--media-medium'>
         {info && members && (
-          <CardSummary label={t('members')}>
+          <CardSummary label={t<string>('members')}>
             {members.length}/{info.maxMembers.toString()}
           </CardSummary>
         )}
@@ -43,7 +43,7 @@ function Summary ({ className, info }: Props): React.ReactElement<Props> {
         <>
           <section>
             <CardSummary
-              label={t('rotation')}
+              label={t<string>('rotation')}
               progress={{
                 total: api.consts.society.rotationPeriod as BlockNumber,
                 value: bestNumber.mod(api.consts.society.rotationPeriod as BlockNumber),
@@ -53,7 +53,7 @@ function Summary ({ className, info }: Props): React.ReactElement<Props> {
           </section>
           <section className='ui--media-large'>
             <CardSummary
-              label={t('challenge')}
+              label={t<string>('challenge')}
               progress={{
                 total: api.consts.society.challengePeriod as BlockNumber,
                 value: bestNumber.mod(api.consts.society.challengePeriod as BlockNumber),
@@ -65,7 +65,7 @@ function Summary ({ className, info }: Props): React.ReactElement<Props> {
       )}
       <section>
         {pot && (
-          <CardSummary label={t('pot')}>
+          <CardSummary label={t<string>('pot')}>
             <FormatBalance
               value={pot}
               withSi
diff --git a/packages/page-society/src/Overview/Votes.tsx b/packages/page-society/src/Overview/Votes.tsx
index e727c150b7..d33a970ef4 100644
--- a/packages/page-society/src/Overview/Votes.tsx
+++ b/packages/page-society/src/Overview/Votes.tsx
@@ -28,15 +28,15 @@ function Votes ({ votes }: Props): React.ReactElement<Props> {
   return (
     <td className='start'>
       <VotesExpander
-        label={t('Skeptics')}
+        label={t<string>('Skeptics')}
         votes={allSkeptic}
       />
       <VotesExpander
-        label={t('Approvals')}
+        label={t<string>('Approvals')}
         votes={allAye}
       />
       <VotesExpander
-        label={t('Rejections')}
+        label={t<string>('Rejections')}
         votes={allNay}
       />
     </td>
diff --git a/packages/page-society/src/index.tsx b/packages/page-society/src/index.tsx
index 192d801a13..7db4e75917 100644
--- a/packages/page-society/src/index.tsx
+++ b/packages/page-society/src/index.tsx
@@ -19,7 +19,7 @@ function SocietyApp ({ basePath, className }: Props): React.ReactElement<Props>
     {
       isRoot: true,
       name: 'overview',
-      text: t('Society overview')
+      text: t<string>('Society overview')
     }
   ], [t]);
 
diff --git a/packages/page-staking/src/Actions/Account/BondExtra.tsx b/packages/page-staking/src/Actions/Account/BondExtra.tsx
index 2b47f114be..fe7c9498ec 100644
--- a/packages/page-staking/src/Actions/Account/BondExtra.tsx
+++ b/packages/page-staking/src/Actions/Account/BondExtra.tsx
@@ -26,7 +26,7 @@ function BondExtra ({ onClose, stashId }: Props): React.ReactElement<Props> {
   return (
     <Modal
       className='staking--BondExtra'
-      header= {t('Bond more funds')}
+      header= {t<string>('Bond more funds')}
       size='large'
     >
       <Modal.Content className='ui--signer-Signer-Content'>
@@ -35,23 +35,23 @@ function BondExtra ({ onClose, stashId }: Props): React.ReactElement<Props> {
             <InputAddress
               defaultValue={stashId}
               isDisabled
-              label={t('stash account')}
+              label={t<string>('stash account')}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('Since this transaction deals with funding, the stash account will be used.')}</p>
+            <p>{t<string>('Since this transaction deals with funding, the stash account will be used.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Modal.Columns>
           <Modal.Column>
             <InputBalance
               autoFocus
-              help={t('Amount to add to the currently bonded funds. This is adjusted using the available funds on the account.')}
+              help={t<string>('Amount to add to the currently bonded funds. This is adjusted using the available funds on the account.')}
               isError={!!amountError || !maxAdditional || maxAdditional.eqn(0)}
-              label={t('additional bonded funds')}
+              label={t<string>('additional bonded funds')}
               labelExtra={
                 <Available
-                  label={<span className='label'>{t('available')}</span>}
+                  label={<span className='label'>{t<string>('available')}</span>}
                   params={stashId}
                 />
               }
@@ -65,7 +65,7 @@ function BondExtra ({ onClose, stashId }: Props): React.ReactElement<Props> {
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('Ensure that not all funds are locked, funds need to be available for fees.')}</p>
+            <p>{t<string>('Ensure that not all funds are locked, funds need to be available for fees.')}</p>
           </Modal.Column>
         </Modal.Columns>
       </Modal.Content>
@@ -75,7 +75,7 @@ function BondExtra ({ onClose, stashId }: Props): React.ReactElement<Props> {
           icon='sign-in'
           isDisabled={!maxAdditional?.gt(ZERO)}
           isPrimary
-          label={t('Bond more')}
+          label={t<string>('Bond more')}
           onStart={onClose}
           params={[maxAdditional]}
           tx='staking.bondExtra'
diff --git a/packages/page-staking/src/Actions/Account/InjectKeys.tsx b/packages/page-staking/src/Actions/Account/InjectKeys.tsx
index bd2dd5b621..9cc2793d25 100644
--- a/packages/page-staking/src/Actions/Account/InjectKeys.tsx
+++ b/packages/page-staking/src/Actions/Account/InjectKeys.tsx
@@ -35,11 +35,11 @@ function InjectKeys ({ onClose }: Props): React.ReactElement<Props> | null {
   const [suri, setSuri] = useState('');
   const [keyType, setKeyType] = useState('babe');
   const keyTypeOpt = useMemo(() => [
-    { text: t('Aura'), value: 'aura' },
-    { text: t('Babe'), value: 'babe' },
-    { text: t('Grandpa'), value: 'gran' },
-    { text: t('I\'m Online'), value: 'imon' },
-    { text: t('Parachains'), value: 'para' }
+    { text: t<string>('Aura'), value: 'aura' },
+    { text: t<string>('Babe'), value: 'babe' },
+    { text: t<string>('Grandpa'), value: 'gran' },
+    { text: t<string>('I\'m Online'), value: 'imon' },
+    { text: t<string>('Parachains'), value: 'para' }
   ], [t]);
 
   useEffect((): void => {
@@ -60,6 +60,7 @@ function InjectKeys ({ onClose }: Props): React.ReactElement<Props> | null {
 
   const _onSubmit = useCallback(
     (): void => queueRpc({
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       rpc: { method: 'insertKey', section: 'author' } as any,
       values: [keyType, suri, publicKey]
     }),
@@ -68,8 +69,8 @@ function InjectKeys ({ onClose }: Props): React.ReactElement<Props> | null {
   const _cryptoOptions = useMemo(
     () => CRYPTO_MAP[keyType].map((value): { text: string; value: KeypairType } => ({
       text: value === 'ed25519'
-        ? t('ed25519, Edwards')
-        : t('sr15519, Schnorrkel'),
+        ? t<string>('ed25519, Edwards')
+        : t<string>('sr15519, Schnorrkel'),
       value
     })),
     [keyType, t]
@@ -77,7 +78,7 @@ function InjectKeys ({ onClose }: Props): React.ReactElement<Props> | null {
 
   return (
     <Modal
-      header={t('Inject Keys')}
+      header={t<string>('Inject Keys')}
       size='large'
     >
       <Modal.Content>
@@ -86,48 +87,48 @@ function InjectKeys ({ onClose }: Props): React.ReactElement<Props> | null {
             <Input
               autoFocus
               isError={publicKey.length !== 66}
-              label={t('suri (seed & derivation)')}
+              label={t<string>('suri (seed & derivation)')}
               onChange={setSuri}
               value={suri}
             />
             <article className='warning'>
-              <div><Icon name='warning sign' />{t('This operation will submit the seed via an RPC call. Do not perform this operation on a public RPC node, but ensure that the node is local, connected to your validator and secure.')}</div>
+              <div><Icon name='warning sign' />{t<string>('This operation will submit the seed via an RPC call. Do not perform this operation on a public RPC node, but ensure that the node is local, connected to your validator and secure.')}</div>
             </article>
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The seed and derivation path will be submitted to the validator node. this is an advanced operation, only to be performed when you are sure of the security and connection risks.')}</p>
+            <p>{t<string>('The seed and derivation path will be submitted to the validator node. this is an advanced operation, only to be performed when you are sure of the security and connection risks.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Modal.Columns>
           <Modal.Column>
             <Dropdown
-              label={t('key type to set')}
+              label={t<string>('key type to set')}
               onChange={setKeyType}
               options={keyTypeOpt}
               value={keyType}
             />
             <Dropdown
               isDisabled={_cryptoOptions.length === 1}
-              label={t('crypto type to use')}
+              label={t<string>('crypto type to use')}
               onChange={setCrypto}
               options={_cryptoOptions}
               value={crypto}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The key type and crypto type to use for this key. Be aware that different keys have different crypto requirements. You should be familiar with the type requirements for the different keys.')}</p>
+            <p>{t<string>('The key type and crypto type to use for this key. Be aware that different keys have different crypto requirements. You should be familiar with the type requirements for the different keys.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Modal.Columns>
           <Modal.Column>
             <Input
               isDisabled
-              label={t('generated public key')}
+              label={t<string>('generated public key')}
               value={publicKey}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('This pubic key is what will be visible in your queued keys list. It is generated based on the seed and the crypto used.')}</p>
+            <p>{t<string>('This pubic key is what will be visible in your queued keys list. It is generated based on the seed and the crypto used.')}</p>
           </Modal.Column>
         </Modal.Columns>
       </Modal.Content>
@@ -135,7 +136,7 @@ function InjectKeys ({ onClose }: Props): React.ReactElement<Props> | null {
         <Button
           icon='sign-in'
           isPrimary
-          label={t('Submit key')}
+          label={t<string>('Submit key')}
           onClick={_onSubmit}
         />
       </Modal.Actions>
diff --git a/packages/page-staking/src/Actions/Account/InputValidateAmount.tsx b/packages/page-staking/src/Actions/Account/InputValidateAmount.tsx
index 33a2da78f5..24c431b0d0 100644
--- a/packages/page-staking/src/Actions/Account/InputValidateAmount.tsx
+++ b/packages/page-staking/src/Actions/Account/InputValidateAmount.tsx
@@ -30,7 +30,7 @@ function ValidateAmount ({ accountId, onError, value }: Props): React.ReactEleme
       let newError: string | null = null;
 
       if (value.gt(allBalances.freeBalance)) {
-        newError = t('The specified value is greater than your free balance. The node will bond the maximum amount available.');
+        newError = t<string>('The specified value is greater than your free balance. The node will bond the maximum amount available.');
       }
 
       onError(newError);
diff --git a/packages/page-staking/src/Actions/Account/InputValidationController.tsx b/packages/page-staking/src/Actions/Account/InputValidationController.tsx
index ae26474013..0abbf7b154 100644
--- a/packages/page-staking/src/Actions/Account/InputValidationController.tsx
+++ b/packages/page-staking/src/Actions/Account/InputValidationController.tsx
@@ -44,12 +44,12 @@ function ValidateController ({ accountId, controllerId, defaultController, onErr
 
       if (bondedId) {
         isFatal = true;
-        newError = t('A controller account should not map to another stash. This selected controller is a stash, controlled by {{bondedId}}', { replace: { bondedId } });
+        newError = t<string>('A controller account should not map to another stash. This selected controller is a stash, controlled by {{bondedId}}', { replace: { bondedId } });
       } else if (stashId) {
         isFatal = true;
-        newError = t('A controller account should not be set to manages multiple stashes. The selected controller is already controlling {{stashId}}', { replace: { stashId } });
+        newError = t<string>('A controller account should not be set to manages multiple stashes. The selected controller is already controlling {{stashId}}', { replace: { stashId } });
       } else if (controllerId === accountId) {
-        newError = t('Distinct stash and controller accounts are recommended to ensure fund security. You will be allowed to make the transaction, but take care to not tie up all funds, only use a portion of the available funds during this period.');
+        newError = t<string>('Distinct stash and controller accounts are recommended to ensure fund security. You will be allowed to make the transaction, but take care to not tie up all funds, only use a portion of the available funds during this period.');
       }
 
       onError(newError, isFatal);
diff --git a/packages/page-staking/src/Actions/Account/InputValidationSessionKey.tsx b/packages/page-staking/src/Actions/Account/InputValidationSessionKey.tsx
index 052635e145..87e364605f 100644
--- a/packages/page-staking/src/Actions/Account/InputValidationSessionKey.tsx
+++ b/packages/page-staking/src/Actions/Account/InputValidationSessionKey.tsx
@@ -24,7 +24,7 @@ function ValidateSessionEd25519 ({ onError, sessionId, stashId }: Props): React.
     let newError: string | null = null;
 
     if (sessionId === stashId) {
-      newError = t('For fund security, your session key should not match your stash key.');
+      newError = t<string>('For fund security, your session key should not match your stash key.');
     }
 
     onError(newError);
diff --git a/packages/page-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx b/packages/page-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx
index cb269544fa..e70f72a7cd 100644
--- a/packages/page-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx
+++ b/packages/page-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx
@@ -22,9 +22,9 @@ function InputValidationUnstakeThreshold ({ onError, unstakeThreshold }: Props):
       let newError: string | null = null;
 
       if (unstakeThreshold.ltn(0)) {
-        newError = t('The Threshold must be a positive number');
+        newError = t<string>('The Threshold must be a positive number');
       } else if (unstakeThreshold.gtn(10)) {
-        newError = t('The Threshold must lower than 11');
+        newError = t<string>('The Threshold must lower than 11');
       }
 
       onError(newError);
diff --git a/packages/page-staking/src/Actions/Account/ListNominees.tsx b/packages/page-staking/src/Actions/Account/ListNominees.tsx
index 4009429a49..9f032e4a03 100644
--- a/packages/page-staking/src/Actions/Account/ListNominees.tsx
+++ b/packages/page-staking/src/Actions/Account/ListNominees.tsx
@@ -20,7 +20,7 @@ function ListNominees ({ nominating, stashId }: Props): React.ReactElement<Props
   return (
     <>
       {nomsActive && nomsActive.length !== 0 && (
-        <Expander summary={t('Active nominations ({{count}})', { replace: { count: nomsActive.length } })}>
+        <Expander summary={t<string>('Active nominations ({{count}})', { replace: { count: nomsActive.length } })}>
           {nomsActive.map((nomineeId, index): React.ReactNode => (
             <AddressMini
               key={index}
@@ -31,7 +31,7 @@ function ListNominees ({ nominating, stashId }: Props): React.ReactElement<Props
         </Expander>
       )}
       {nomsInactive && nomsInactive.length !== 0 && (
-        <Expander summary={t('Inactive nominations ({{count}})', { replace: { count: nomsInactive.length } })}>
+        <Expander summary={t<string>('Inactive nominations ({{count}})', { replace: { count: nomsInactive.length } })}>
           {nomsInactive.map((nomineeId, index): React.ReactNode => (
             <AddressMini
               key={index}
@@ -42,7 +42,7 @@ function ListNominees ({ nominating, stashId }: Props): React.ReactElement<Props
         </Expander>
       )}
       {nomsWaiting && nomsWaiting.length !== 0 && (
-        <Expander summary={t('Waiting nominations ({{count}})', { replace: { count: nomsWaiting.length } })}>
+        <Expander summary={t<string>('Waiting nominations ({{count}})', { replace: { count: nomsWaiting.length } })}>
           {nomsWaiting.map((nomineeId, index): React.ReactNode => (
             <AddressMini
               key={index}
diff --git a/packages/page-staking/src/Actions/Account/Nominate.tsx b/packages/page-staking/src/Actions/Account/Nominate.tsx
index 0fd0832e24..4596f23e61 100644
--- a/packages/page-staking/src/Actions/Account/Nominate.tsx
+++ b/packages/page-staking/src/Actions/Account/Nominate.tsx
@@ -27,7 +27,7 @@ function Nominate ({ controllerId, next, nominating, onClose, stashId, targets,
 
   return (
     <Modal
-      header={t('Nominate Validators')}
+      header={t<string>('Nominate Validators')}
       size='large'
     >
       <Modal.Content>
@@ -49,7 +49,7 @@ function Nominate ({ controllerId, next, nominating, onClose, stashId, targets,
           icon='hand paper outline'
           isDisabled={!nominateTx}
           isPrimary
-          label={t('Nominate')}
+          label={t<string>('Nominate')}
           onStart={onClose}
         />
       </Modal.Actions>
diff --git a/packages/page-staking/src/Actions/Account/SetControllerAccount.tsx b/packages/page-staking/src/Actions/Account/SetControllerAccount.tsx
index 2dad9ae0c2..8632867b3d 100644
--- a/packages/page-staking/src/Actions/Account/SetControllerAccount.tsx
+++ b/packages/page-staking/src/Actions/Account/SetControllerAccount.tsx
@@ -21,7 +21,7 @@ function SetControllerAccount ({ defaultControllerId, onClose, stashId }: Props)
 
   return (
     <Modal
-      header={t('Change controller account')}
+      header={t<string>('Change controller account')}
       size='large'
     >
       <Modal.Content>
@@ -29,20 +29,20 @@ function SetControllerAccount ({ defaultControllerId, onClose, stashId }: Props)
           <Modal.Column>
             <InputAddress
               isDisabled
-              label={t('stash account')}
+              label={t<string>('stash account')}
               value={stashId}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The stash account that is used. This will allow the controller to perform all non-funds related operations on behalf of the account.')}</p>
+            <p>{t<string>('The stash account that is used. This will allow the controller to perform all non-funds related operations on behalf of the account.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Modal.Columns>
           <Modal.Column>
             <InputAddress
               defaultValue={defaultControllerId}
-              help={t('The controller is the account that will be used to control any nominating or validating actions. Should not match another stash or controller.')}
-              label={t('controller account')}
+              help={t<string>('The controller is the account that will be used to control any nominating or validating actions. Should not match another stash or controller.')}
+              label={t<string>('controller account')}
               onChange={setControllerId}
               type='account'
               value={controllerId}
@@ -55,7 +55,7 @@ function SetControllerAccount ({ defaultControllerId, onClose, stashId }: Props)
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The selected controller tied to this stash. Once set, this account will be able to control the actions performed by the stash account.')}</p>
+            <p>{t<string>('The selected controller tied to this stash. Once set, this account will be able to control the actions performed by the stash account.')}</p>
           </Modal.Column>
         </Modal.Columns>
       </Modal.Content>
@@ -65,7 +65,7 @@ function SetControllerAccount ({ defaultControllerId, onClose, stashId }: Props)
           icon='sign-in'
           isDisabled={!controllerId}
           isPrimary
-          label={t('Set controller')}
+          label={t<string>('Set controller')}
           onStart={onClose}
           params={[controllerId]}
           tx='staking.setController'
diff --git a/packages/page-staking/src/Actions/Account/SetRewardDestination.tsx b/packages/page-staking/src/Actions/Account/SetRewardDestination.tsx
index 7314194747..819a166a64 100644
--- a/packages/page-staking/src/Actions/Account/SetRewardDestination.tsx
+++ b/packages/page-staking/src/Actions/Account/SetRewardDestination.tsx
@@ -21,7 +21,7 @@ function SetRewardDestination ({ controllerId, defaultDestination, onClose, stas
 
   return (
     <Modal
-      header={t('Bonding Preferences')}
+      header={t<string>('Bonding Preferences')}
       size='large'
     >
       <Modal.Content>
@@ -30,32 +30,32 @@ function SetRewardDestination ({ controllerId, defaultDestination, onClose, stas
             <InputAddress
               defaultValue={stashId}
               isDisabled
-              label={t('stash account')}
+              label={t<string>('stash account')}
             />
             <InputAddress
               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.')}
+              help={t<string>('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')}
+              label={t<string>('controller account')}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The stash and controller pair as linked. This operation will be performed via the controller.')}</p>
+            <p>{t<string>('The stash and controller pair as linked. This operation will be performed via the controller.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Modal.Columns>
           <Modal.Column>
             <Dropdown
               defaultValue={defaultDestination}
-              help={t('The destination account for any payments as either a nominator or validator')}
-              label={t('payment destination')}
+              help={t<string>('The destination account for any payments as either a nominator or validator')}
+              label={t<string>('payment destination')}
               onChange={setDestination}
               options={rewardDestinationOptions}
               value={destination}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('All rewards will go towards the selected output destination when a payout is made.')}</p>
+            <p>{t<string>('All rewards will go towards the selected output destination when a payout is made.')}</p>
           </Modal.Column>
         </Modal.Columns>
       </Modal.Content>
@@ -65,7 +65,7 @@ function SetRewardDestination ({ controllerId, defaultDestination, onClose, stas
           icon='sign-in'
           isDisabled={!controllerId}
           isPrimary
-          label={t('Set reward destination')}
+          label={t<string>('Set reward destination')}
           onStart={onClose}
           params={[destination]}
           tx={'staking.setPayee'}
diff --git a/packages/page-staking/src/Actions/Account/SetSessionKey.tsx b/packages/page-staking/src/Actions/Account/SetSessionKey.tsx
index 0c752d9528..4d953f38c4 100644
--- a/packages/page-staking/src/Actions/Account/SetSessionKey.tsx
+++ b/packages/page-staking/src/Actions/Account/SetSessionKey.tsx
@@ -22,7 +22,7 @@ function SetSessionKey ({ controllerId, onClose, stashId }: Props): React.ReactE
 
   return (
     <Modal
-      header={t('Set Session Key')}
+      header={t<string>('Set Session Key')}
       size='large'
     >
       <Modal.Content>
@@ -40,7 +40,7 @@ function SetSessionKey ({ controllerId, onClose, stashId }: Props): React.ReactE
           icon='sign-in'
           isDisabled={!sessionTx}
           isPrimary
-          label={t('Set Session Key')}
+          label={t<string>('Set Session Key')}
           onStart={onClose}
         />
       </Modal.Actions>
diff --git a/packages/page-staking/src/Actions/Account/Unbond.tsx b/packages/page-staking/src/Actions/Account/Unbond.tsx
index 08bdce915a..669c9aa783 100644
--- a/packages/page-staking/src/Actions/Account/Unbond.tsx
+++ b/packages/page-staking/src/Actions/Account/Unbond.tsx
@@ -21,7 +21,7 @@ interface Props {
   stashId: string;
 }
 
-function Unbond ({ className, controllerId, onClose, stakingLedger, stashId }: Props): React.ReactElement<Props> {
+function Unbond ({ className = '', controllerId, onClose, stakingLedger, stashId }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const bondedBlocks = useUnbondDuration();
   const [maxBalance] = useState<BN | null>(stakingLedger?.active.unwrap() || null);
@@ -30,7 +30,7 @@ function Unbond ({ className, controllerId, onClose, stakingLedger, stashId }: P
   return (
     <Modal
       className={`staking--Unbond ${className}`}
-      header={t('Unbond funds')}
+      header={t<string>('Unbond funds')}
       size='large'
     >
       <Modal.Content className='ui--signer-Signer-Content'>
@@ -39,27 +39,27 @@ function Unbond ({ className, controllerId, onClose, stakingLedger, stashId }: P
             <InputAddress
               defaultValue={stashId}
               isDisabled
-              label={t('stash account')}
+              label={t<string>('stash account')}
             />
             <InputAddress
               defaultValue={controllerId}
               isDisabled
-              label={t('controller account')}
+              label={t<string>('controller account')}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The stash and controller pair, here the controller will be used to send the transaction.')}</p>
+            <p>{t<string>('The stash and controller pair, here the controller will be used to send the transaction.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Modal.Columns>
           <Modal.Column>
             <InputBalance
               autoFocus
-              help={t('The amount of funds to unbond, this is adjusted using the bonded funds on the stash account.')}
-              label={t('unbond amount')}
+              help={t<string>('The amount of funds to unbond, this is adjusted using the bonded funds on the stash account.')}
+              label={t<string>('unbond amount')}
               labelExtra={
                 <Bonded
-                  label={<span className='label'>{t('bonded')}</span>}
+                  label={<span className='label'>{t<string>('bonded')}</span>}
                   params={stashId}
                 />
               }
@@ -69,15 +69,15 @@ function Unbond ({ className, controllerId, onClose, stakingLedger, stashId }: P
             />
             {bondedBlocks?.gtn(0) && (
               <Static
-                help={t('The bonding duration for any staked funds. After this period needs to be withdrawn.')}
-                label={t('on-chain bonding duration')}
+                help={t<string>('The bonding duration for any staked funds. After this period needs to be withdrawn.')}
+                label={t<string>('on-chain bonding duration')}
               >
                 <BlockToTime blocks={bondedBlocks} />
               </Static>
             )}
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The funds will only be available for withdrawal after the unbonding period, however will not be part of the staked amount after the next validator election. You can follow the unlock countdown in the UI.')}</p>
+            <p>{t<string>('The funds will only be available for withdrawal after the unbonding period, however will not be part of the staked amount after the next validator election. You can follow the unlock countdown in the UI.')}</p>
           </Modal.Column>
         </Modal.Columns>
       </Modal.Content>
@@ -87,7 +87,7 @@ function Unbond ({ className, controllerId, onClose, stakingLedger, stashId }: P
           icon='sign-out'
           isDisabled={!maxUnbond?.gtn(0)}
           isPrimary
-          label={t('Unbond')}
+          label={t<string>('Unbond')}
           onStart={onClose}
           params={[maxUnbond]}
           tx='staking.unbond'
diff --git a/packages/page-staking/src/Actions/Account/Validate.tsx b/packages/page-staking/src/Actions/Account/Validate.tsx
index d793ab8629..e4bc243039 100644
--- a/packages/page-staking/src/Actions/Account/Validate.tsx
+++ b/packages/page-staking/src/Actions/Account/Validate.tsx
@@ -22,7 +22,7 @@ function Validate ({ controllerId, onClose, stashId }: Props): React.ReactElemen
 
   return (
     <Modal
-      header={t('Set validator preferences')}
+      header={t<string>('Set validator preferences')}
       size='large'
     >
       <Modal.Content className='ui--signer-Signer-Content'>
@@ -40,7 +40,7 @@ function Validate ({ controllerId, onClose, stashId }: Props): React.ReactElemen
           icon='check circle outline'
           isDisabled={!validateTx}
           isPrimary
-          label={t('Validate')}
+          label={t<string>('Validate')}
           onStart={onClose}
         />
       </Modal.Actions>
diff --git a/packages/page-staking/src/Actions/Account/index.tsx b/packages/page-staking/src/Actions/Account/index.tsx
index 21e9448cac..db7ead3fd9 100644
--- a/packages/page-staking/src/Actions/Account/index.tsx
+++ b/packages/page-staking/src/Actions/Account/index.tsx
@@ -34,7 +34,7 @@ interface Props {
   validators?: string[];
 }
 
-function Account ({ className, info: { controllerId, destination, destinationId, hexSessionIdNext, hexSessionIdQueue, isLoading, isOwnController, isOwnStash, isStashNominating, isStashValidating, nominating, sessionIds, stakingLedger, stashId }, isDisabled, next, targets, validators }: Props): React.ReactElement<Props> {
+function Account ({ className = '', info: { controllerId, destination, destinationId, hexSessionIdNext, hexSessionIdQueue, isLoading, isOwnController, isOwnStash, isStashNominating, isStashValidating, nominating, sessionIds, stakingLedger, stashId }, isDisabled, next, targets, validators }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const balancesAll = useCall<DeriveBalancesAll>(api.derive.balances.all, [stashId]);
@@ -155,7 +155,7 @@ function Account ({ className, info: { controllerId, destination, destinationId,
                     isDisabled={!isOwnController || isDisabled}
                     isPrimary={false}
                     key='stop'
-                    label={t('Stop')}
+                    label={t<string>('Stop')}
                     tx='staking.chill'
                   />
                 )
@@ -167,7 +167,7 @@ function Account ({ className, info: { controllerId, destination, destinationId,
                           icon='sign-in'
                           isDisabled={!isOwnController || isDisabled}
                           key='set'
-                          label={t('Session Key')}
+                          label={t<string>('Session Key')}
                           onClick={toggleSetSession}
                         />
                       )
@@ -176,7 +176,7 @@ function Account ({ className, info: { controllerId, destination, destinationId,
                           icon='check circle outline'
                           isDisabled={!isOwnController || isDisabled}
                           key='validate'
-                          label={t('Validate')}
+                          label={t<string>('Validate')}
                           onClick={toggleValidate}
                         />
                       )
@@ -185,7 +185,7 @@ function Account ({ className, info: { controllerId, destination, destinationId,
                       icon='hand paper outline'
                       isDisabled={!isOwnController || isDisabled}
                       key='nominate'
-                      label={t('Nominate')}
+                      label={t<string>('Nominate')}
                       onClick={toggleNominate}
                     />
                   </Button.Group>
@@ -212,33 +212,33 @@ function Account ({ className, info: { controllerId, destination, destinationId,
                     disabled={!isOwnStash && !balancesAll?.freeBalance.gtn(0)}
                     onClick={toggleBondExtra}
                   >
-                    {t('Bond more funds')}
+                    {t<string>('Bond more funds')}
                   </Menu.Item>
                   <Menu.Item
                     disabled={!isOwnController}
                     onClick={toggleUnbond}
                   >
-                    {t('Unbond funds')}
+                    {t<string>('Unbond funds')}
                   </Menu.Item>
                   <Menu.Divider />
                   <Menu.Item
                     disabled={!isOwnStash}
                     onClick={toggleSetController}
                   >
-                    {t('Change controller account')}
+                    {t<string>('Change controller account')}
                   </Menu.Item>
                   <Menu.Item
                     disabled={!isOwnController}
                     onClick={toggleRewardDestination}
                   >
-                    {t('Change reward destination')}
+                    {t<string>('Change reward destination')}
                   </Menu.Item>
                   {isStashValidating &&
                     <Menu.Item
                       disabled={!isOwnController}
                       onClick={toggleValidate}
                     >
-                      {t('Change validator preferences')}
+                      {t<string>('Change validator preferences')}
                     </Menu.Item>
                   }
                   <Menu.Divider />
@@ -247,7 +247,7 @@ function Account ({ className, info: { controllerId, destination, destinationId,
                       disabled={!isOwnController}
                       onClick={toggleSetSession}
                     >
-                      {t('Change session keys')}
+                      {t<string>('Change session keys')}
                     </Menu.Item>
                   }
                   {isStashNominating &&
@@ -255,12 +255,12 @@ function Account ({ className, info: { controllerId, destination, destinationId,
                       disabled={!isOwnController}
                       onClick={toggleNominate}
                     >
-                      {t('Set nominees')}
+                      {t<string>('Set nominees')}
                     </Menu.Item>
                   }
                   {!isStashNominating &&
                     <Menu.Item onClick={toggleInject}>
-                      {t('Inject session keys (advanced)')}
+                      {t<string>('Inject session keys (advanced)')}
                     </Menu.Item>
                   }
                 </Menu>
diff --git a/packages/page-staking/src/Actions/NewNominator.tsx b/packages/page-staking/src/Actions/NewNominator.tsx
index 6a2e2c81c3..45c6a32164 100644
--- a/packages/page-staking/src/Actions/NewNominator.tsx
+++ b/packages/page-staking/src/Actions/NewNominator.tsx
@@ -59,12 +59,12 @@ function NewNominator ({ isInElection, next, targets, validators }: Props): Reac
         icon='add'
         isDisabled={isDisabled}
         key='new-nominator'
-        label={t('Nominator')}
+        label={t<string>('Nominator')}
         onClick={_toggle}
       />
       {isVisible && (
         <Modal
-          header={t('Setup Nominator {{step}}/{{NUM_STEPS}}', {
+          header={t<string>('Setup Nominator {{step}}/{{NUM_STEPS}}', {
             replace: {
               NUM_STEPS,
               step
@@ -92,7 +92,7 @@ function NewNominator ({ isInElection, next, targets, validators }: Props): Reac
             <Button
               icon='step backward'
               isDisabled={step === 1}
-              label={t('prev')}
+              label={t<string>('prev')}
               onClick={_prevStep}
             />
             {step === NUM_STEPS
@@ -102,7 +102,7 @@ function NewNominator ({ isInElection, next, targets, validators }: Props): Reac
                   icon='sign-in'
                   isDisabled={!bondTx || !nominateTx || !stashId || !controllerId}
                   isPrimary
-                  label={t('Bond & Nominate')}
+                  label={t<string>('Bond & Nominate')}
                   onStart={_toggle}
                   params={[
                     stashId === controllerId
@@ -117,7 +117,7 @@ function NewNominator ({ isInElection, next, targets, validators }: Props): Reac
                   icon='step forward'
                   isDisabled={!bondTx}
                   isPrimary
-                  label={t('next')}
+                  label={t<string>('next')}
                   onClick={_nextStep}
                 />
               )
diff --git a/packages/page-staking/src/Actions/NewStash.tsx b/packages/page-staking/src/Actions/NewStash.tsx
index 47454c53db..0dfecffbbb 100644
--- a/packages/page-staking/src/Actions/NewStash.tsx
+++ b/packages/page-staking/src/Actions/NewStash.tsx
@@ -29,12 +29,12 @@ function NewStash (): React.ReactElement {
       <Button
         icon='add'
         key='new-stash'
-        label={t('Stash')}
+        label={t<string>('Stash')}
         onClick={_toggle}
       />
       {isVisible && (
         <Modal
-          header={t('Bonding Preferences')}
+          header={t<string>('Bonding Preferences')}
           size='large'
         >
           <Modal.Content>
@@ -47,7 +47,7 @@ function NewStash (): React.ReactElement {
               icon='sign-in'
               isDisabled={!bondTx || !stashId}
               isPrimary
-              label={t('Bond')}
+              label={t<string>('Bond')}
               onStart={_toggle}
             />
           </Modal.Actions>
diff --git a/packages/page-staking/src/Actions/NewValidator.tsx b/packages/page-staking/src/Actions/NewValidator.tsx
index 1bc550b2ec..c5871521f1 100644
--- a/packages/page-staking/src/Actions/NewValidator.tsx
+++ b/packages/page-staking/src/Actions/NewValidator.tsx
@@ -57,12 +57,12 @@ function NewValidator ({ isInElection }: Props): React.ReactElement<Props> {
         icon='add'
         isDisabled={isDisabled}
         key='new-validator'
-        label={t('Validator')}
+        label={t<string>('Validator')}
         onClick={_toggle}
       />
       {isVisible && (
         <Modal
-          header={t('Setup Validator {{step}}/{{NUM_STEPS}}', {
+          header={t<string>('Setup Validator {{step}}/{{NUM_STEPS}}', {
             replace: {
               NUM_STEPS,
               step
@@ -93,7 +93,7 @@ function NewValidator ({ isInElection }: Props): React.ReactElement<Props> {
             <Button
               icon='step backward'
               isDisabled={step === 1}
-              label={t('prev')}
+              label={t<string>('prev')}
               onClick={_prevStep}
             />
             {step === NUM_STEPS
@@ -103,7 +103,7 @@ function NewValidator ({ isInElection }: Props): React.ReactElement<Props> {
                   icon='sign-in'
                   isDisabled={!bondTx || !sessionTx || !validateTx}
                   isPrimary
-                  label={t('Bond & Validate')}
+                  label={t<string>('Bond & Validate')}
                   onStart={_toggle}
                   params={[
                     controllerId === stashId
@@ -118,7 +118,7 @@ function NewValidator ({ isInElection }: Props): React.ReactElement<Props> {
                   icon='step forward'
                   isDisabled={!bondTx}
                   isPrimary
-                  label={t('next')}
+                  label={t<string>('next')}
                   onClick={_nextStep}
                 />
               )}
diff --git a/packages/page-staking/src/Actions/index.tsx b/packages/page-staking/src/Actions/index.tsx
index b3c07e3c12..77f87f8d69 100644
--- a/packages/page-staking/src/Actions/index.tsx
+++ b/packages/page-staking/src/Actions/index.tsx
@@ -34,7 +34,7 @@ interface State {
   foundStashes?: StakerState[];
 }
 
-function Actions ({ className, isInElection, next, ownStashes, targets, validators }: Props): React.ReactElement<Props> {
+function Actions ({ className = '', isInElection, next, ownStashes, targets, validators }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const activeEra = useCall<EraIndex | undefined>(api.query.staking?.activeEra, [], {
@@ -87,7 +87,7 @@ function Actions ({ className, isInElection, next, ownStashes, targets, validato
       </Button.Group>
       <ElectionBanner isInElection={isInElection} />
       <Table
-        empty={foundStashes && t('No funds staked yet. Bond funds to validate or nominate a validator')}
+        empty={foundStashes && t<string>('No funds staked yet. Bond funds to validate or nominate a validator')}
         footer={footer}
         header={header}
       >
diff --git a/packages/page-staking/src/Actions/partials/Bond.tsx b/packages/page-staking/src/Actions/partials/Bond.tsx
index 9d52dc5cd7..70756bf4a9 100644
--- a/packages/page-staking/src/Actions/partials/Bond.tsx
+++ b/packages/page-staking/src/Actions/partials/Bond.tsx
@@ -21,7 +21,7 @@ interface Props {
   onChange: (info: BondInfo) => void;
 }
 
-function Bond ({ className, onChange }: Props): React.ReactElement<Props> {
+function Bond ({ className = '', onChange }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const [amount, setAmount] = useState<BN | undefined>();
@@ -65,14 +65,14 @@ function Bond ({ className, onChange }: Props): React.ReactElement<Props> {
       <Modal.Columns>
         <Modal.Column>
           <InputAddress
-            label={t('stash account')}
+            label={t<string>('stash account')}
             onChange={setStashId}
             type='account'
             value={stashId}
           />
           <InputAddress
-            help={t('The controller is the account that will be used to control any nominating or validating actions. Should not match another stash or controller.')}
-            label={t('controller account')}
+            help={t<string>('The controller is the account that will be used to control any nominating or validating actions. Should not match another stash or controller.')}
+            label={t<string>('controller account')}
             onChange={setControllerId}
             type='account'
             value={controllerId}
@@ -84,20 +84,20 @@ function Bond ({ className, onChange }: Props): React.ReactElement<Props> {
           />
         </Modal.Column>
         <Modal.Column>
-          <p>{t('Think of the stash as your cold wallet and the controller as your hot wallet. Funding operations are controlled by the stash, any other non-funding actions by the controller itself.')}</p>
-          <p>{t('To ensure optimal fund security using the same stash/controller is strongly discouraged, but not forbidden.')}</p>
+          <p>{t<string>('Think of the stash as your cold wallet and the controller as your hot wallet. Funding operations are controlled by the stash, any other non-funding actions by the controller itself.')}</p>
+          <p>{t<string>('To ensure optimal fund security using the same stash/controller is strongly discouraged, but not forbidden.')}</p>
         </Modal.Column>
       </Modal.Columns>
       <Modal.Columns>
         <Modal.Column>
           <InputBalance
             autoFocus
-            help={t('The total amount of the stash balance that will be at stake in any forthcoming rounds (should be less than the total amount available)')}
+            help={t<string>('The total amount of the stash balance that will be at stake in any forthcoming rounds (should be less than the total amount available)')}
             isError={!hasValue || !!amountError}
-            label={t('value bonded')}
+            label={t<string>('value bonded')}
             labelExtra={
               <Available
-                label={<span className='label'>{t('available')}</span>}
+                label={<span className='label'>{t<string>('available')}</span>}
                 params={stashId}
               />
             }
@@ -105,8 +105,8 @@ function Bond ({ className, onChange }: Props): React.ReactElement<Props> {
           />
           {bondedBlocks?.gtn(0) && (
             <Static
-              help={t('The bonding duration for any staked funds. Needs to be unlocked and withdrawn to become available.')}
-              label={t('on-chain bonding duration')}
+              help={t<string>('The bonding duration for any staked funds. Needs to be unlocked and withdrawn to become available.')}
+              label={t<string>('on-chain bonding duration')}
             >
               <BlockToTime blocks={bondedBlocks} />
             </Static>
@@ -118,23 +118,23 @@ function Bond ({ className, onChange }: Props): React.ReactElement<Props> {
           />
         </Modal.Column>
         <Modal.Column>
-          <p>{t('The amount placed at-stake should be no more that 95% of your available amount to protect against slashing events.')}</p>
-          <p>{t('Once bonded, it wil need to be unlocked/withdrawn and will be locked for at least the bonding duration.')}</p>
+          <p>{t<string>('The amount placed at-stake should be no more that 95% of your available amount to protect against slashing events.')}</p>
+          <p>{t<string>('Once bonded, it wil need to be unlocked/withdrawn and will be locked for at least the bonding duration.')}</p>
         </Modal.Column>
       </Modal.Columns>
       <Modal.Columns>
         <Modal.Column>
           <Dropdown
             defaultValue={0}
-            help={t('The destination account for any payments as either a nominator or validator')}
-            label={t('payment destination')}
+            help={t<string>('The destination account for any payments as either a nominator or validator')}
+            label={t<string>('payment destination')}
             onChange={setDestination}
             options={rewardDestinationOptions}
             value={destination}
           />
         </Modal.Column>
         <Modal.Column>
-          <p>{t('Rewards (once paid) can be deposited to either the stash or controller, with different effects.')}</p>
+          <p>{t<string>('Rewards (once paid) can be deposited to either the stash or controller, with different effects.')}</p>
         </Modal.Column>
       </Modal.Columns>
     </div>
diff --git a/packages/page-staking/src/Actions/partials/Nominate.tsx b/packages/page-staking/src/Actions/partials/Nominate.tsx
index b2ff48637e..3ed56ea890 100644
--- a/packages/page-staking/src/Actions/partials/Nominate.tsx
+++ b/packages/page-staking/src/Actions/partials/Nominate.tsx
@@ -53,7 +53,7 @@ function initialPick (targets: SortedTargets): Selected {
   };
 }
 
-function Nominate ({ className, controllerId, next, nominating, onChange, stashId, targets, validators, withSenders }: Props): React.ReactElement<Props> {
+function Nominate ({ className = '', controllerId, next, nominating, onChange, stashId, targets, validators, withSenders }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const [favorites] = useFavorites(STORE_FAVS_BASE);
@@ -114,16 +114,16 @@ function Nominate ({ className, controllerId, next, nominating, onChange, stashI
             <InputAddress
               defaultValue={stashId}
               isDisabled
-              label={t('stash account')}
+              label={t<string>('stash account')}
             />
             <InputAddress
               defaultValue={controllerId}
               isDisabled
-              label={t('controller account')}
+              label={t<string>('controller account')}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The stash that is to be affected. The transaction will be sent from the associated controller account.')}</p>
+            <p>{t<string>('The stash that is to be affected. The transaction will be sent from the associated controller account.')}</p>
           </Modal.Column>
         </Modal.Columns>
       )}
@@ -133,7 +133,7 @@ function Nominate ({ className, controllerId, next, nominating, onChange, stashI
             ? (
               <>
                 <Static
-                  label={t('auto-selected targets for nomination')}
+                  label={t<string>('auto-selected targets for nomination')}
                   value={
                     selected.map((validatorId) => (
                       <AddressMini
@@ -143,18 +143,18 @@ function Nominate ({ className, controllerId, next, nominating, onChange, stashI
                     ))
                   }
                 />
-                <article className='warning'>{t('The auto-selection is done on the current profitability of the validators taking your favorites into account. It is adjusted based on the commission and current range of backing for the validator. The calculation may and will change over time, so it is rather a selection based on the current state of the network, not a predictor of future profitability.')}</article>
+                <article className='warning'>{t<string>('The auto-selection is done on the current profitability of the validators taking your favorites into account. It is adjusted based on the commission and current range of backing for the validator. The calculation may and will change over time, so it is rather a selection based on the current state of the network, not a predictor of future profitability.')}</article>
               </>
             )
             : (
               <InputAddressMulti
                 available={available}
-                availableLabel={t('candidate accounts')}
+                availableLabel={t<string>('candidate accounts')}
                 defaultValue={nominating}
-                help={t('Filter available candidates based on name, address or short account index.')}
+                help={t<string>('Filter available candidates based on name, address or short account index.')}
                 maxCount={MAX_NOMINATIONS}
                 onChange={_setSelected}
-                valueLabel={t('nominated accounts')}
+                valueLabel={t<string>('nominated accounts')}
               />
             )
           }
@@ -164,8 +164,8 @@ function Nominate ({ className, controllerId, next, nominating, onChange, stashI
               isDisabled={!targets.validators?.length}
               label={
                 isAutoSelect
-                  ? t('Use an automatic selection of the currently most profitable validators')
-                  : t('Select targets manually (no auto-selection based on current profitability)')
+                  ? t<string>('Use an automatic selection of the currently most profitable validators')
+                  : t<string>('Select targets manually (no auto-selection based on current profitability)')
               }
               onChange={_toggleAutoSelect}
               value={isAutoSelect}
@@ -173,8 +173,8 @@ function Nominate ({ className, controllerId, next, nominating, onChange, stashI
           )}
         </Modal.Column>
         <Modal.Column>
-          <p>{t('Nominators can be selected automatically based on the current on-chain conditions or supplied manually as selected from the list of all currently available validators. In both cases, your favorites appear for the selection.')}</p>
-          <p>{t('Once transmitted the new selection will only take effect in 2 eras since the selection criteria for the next era was done at the end of the previous era. Until then, the nominations will show as inactive.')}</p>
+          <p>{t<string>('Nominators can be selected automatically based on the current on-chain conditions or supplied manually as selected from the list of all currently available validators. In both cases, your favorites appear for the selection.')}</p>
+          <p>{t<string>('Once transmitted the new selection will only take effect in 2 eras since the selection criteria for the next era was done at the end of the previous era. Until then, the nominations will show as inactive.')}</p>
         </Modal.Column>
       </Modal.Columns>
     </div>
diff --git a/packages/page-staking/src/Actions/partials/SessionKey.tsx b/packages/page-staking/src/Actions/partials/SessionKey.tsx
index 064cad6a63..327ee4784c 100644
--- a/packages/page-staking/src/Actions/partials/SessionKey.tsx
+++ b/packages/page-staking/src/Actions/partials/SessionKey.tsx
@@ -21,7 +21,7 @@ interface Props {
 
 const EMPTY_PROOF = new Uint8Array();
 
-function SessionKey ({ className, controllerId, onChange, stashId, withSenders }: Props): React.ReactElement<Props> {
+function SessionKey ({ className = '', controllerId, onChange, stashId, withSenders }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const [keys, setKeys] = useState<string | null>(null);
@@ -43,17 +43,17 @@ function SessionKey ({ className, controllerId, onChange, stashId, withSenders }
             <InputAddress
               defaultValue={stashId}
               isDisabled
-              label={t('stash account')}
+              label={t<string>('stash account')}
             />
             <InputAddress
               className='medium'
               defaultValue={controllerId}
               isDisabled
-              label={t('controller account')}
+              label={t<string>('controller account')}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The stash and controller pair. This transaction, setting the session keys, will be sent from the controller.')}</p>
+            <p>{t<string>('The stash and controller pair. This transaction, setting the session keys, will be sent from the controller.')}</p>
           </Modal.Column>
         </Modal.Columns>
       )}
@@ -61,15 +61,15 @@ function SessionKey ({ className, controllerId, onChange, stashId, withSenders }
         <Modal.Column>
           <Input
             autoFocus
-            help={t('Changing the key only takes effect at the start of the next session. The input here is generates from the author_rotateKeys command')}
+            help={t<string>('Changing the key only takes effect at the start of the next session. The input here is generates from the author_rotateKeys command')}
             isError={!keys}
-            label={t('Keys from rotateKeys')}
+            label={t<string>('Keys from rotateKeys')}
             onChange={setKeys}
             placeholder='0x...'
           />
         </Modal.Column>
         <Modal.Column>
-          <p>{t('The hex output from author_rotateKeys, as executed on the validator node. The keys will show as pending until applied at the start of a new session.')}</p>
+          <p>{t<string>('The hex output from author_rotateKeys, as executed on the validator node. The keys will show as pending until applied at the start of a new session.')}</p>
         </Modal.Column>
       </Modal.Columns>
     </div>
diff --git a/packages/page-staking/src/Actions/partials/Validate.tsx b/packages/page-staking/src/Actions/partials/Validate.tsx
index cffa4965f1..f3c326e41e 100644
--- a/packages/page-staking/src/Actions/partials/Validate.tsx
+++ b/packages/page-staking/src/Actions/partials/Validate.tsx
@@ -23,7 +23,7 @@ const COMM_MUL = new BN(10000000);
 const MAX_COMM = new BN(100);
 const ZERO = new BN(0);
 
-function Validate ({ className, controllerId, onChange, stashId, withSenders }: Props): React.ReactElement<Props> {
+function Validate ({ className = '', controllerId, onChange, stashId, withSenders }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
 
@@ -42,31 +42,31 @@ function Validate ({ className, controllerId, onChange, stashId, withSenders }:
             <InputAddress
               defaultValue={stashId}
               isDisabled
-              label={t('stash account')}
+              label={t<string>('stash account')}
             />
             <InputAddress
               defaultValue={controllerId}
               isDisabled
-              label={t('controller account')}
+              label={t<string>('controller account')}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The stash and controller pair. This transaction, managing preferences, will be sent from the controller.')}</p>
+            <p>{t<string>('The stash and controller pair. This transaction, managing preferences, will be sent from the controller.')}</p>
           </Modal.Column>
         </Modal.Columns>
       )}
       <Modal.Columns>
         <Modal.Column>
           <InputNumber
-            help={t('The percentage reward (0-100) that should be applied for the validator')}
+            help={t<string>('The percentage reward (0-100) that should be applied for the validator')}
             isZeroable
-            label={t('reward commission percentage')}
+            label={t<string>('reward commission percentage')}
             maxValue={MAX_COMM}
             onChange={_setCommission}
           />
         </Modal.Column>
         <Modal.Column>
-          <p>{t('The commission is deducted from all rewards before the remainder is split with nominators.')}</p>
+          <p>{t<string>('The commission is deducted from all rewards before the remainder is split with nominators.')}</p>
         </Modal.Column>
       </Modal.Columns>
     </div>
diff --git a/packages/page-staking/src/Actions/useInactives.ts b/packages/page-staking/src/Actions/useInactives.ts
index 98f22c8e37..0add96f71c 100644
--- a/packages/page-staking/src/Actions/useInactives.ts
+++ b/packages/page-staking/src/Actions/useInactives.ts
@@ -72,7 +72,7 @@ export default function useInactives (stashId: string, nominees?: string[]): Ina
         )
         .then((_unsub): void => {
           unsub = _unsub;
-        });
+        }).catch(console.error);
     }
 
     return (): void => {
diff --git a/packages/page-staking/src/ElectionBanner.tsx b/packages/page-staking/src/ElectionBanner.tsx
index 6e8ecee85e..8ce78a497d 100644
--- a/packages/page-staking/src/ElectionBanner.tsx
+++ b/packages/page-staking/src/ElectionBanner.tsx
@@ -19,7 +19,7 @@ function ElectionBanner ({ isInElection }: Props): React.ReactElement<Props> | n
 
   return (
     <article className='warning nomargin'>
-      {t('There is currently an ongoing election for new validator candidates. As such staking operations are not permitted.')}
+      {t<string>('There is currently an ongoing election for new validator candidates. As such staking operations are not permitted.')}
     </article>
   );
 }
diff --git a/packages/page-staking/src/Overview/Address/Favorite.tsx b/packages/page-staking/src/Overview/Address/Favorite.tsx
index e781814f38..fa6567e5c7 100644
--- a/packages/page-staking/src/Overview/Address/Favorite.tsx
+++ b/packages/page-staking/src/Overview/Address/Favorite.tsx
@@ -20,7 +20,7 @@ function Favorite ({ address, isFavorite, toggleFavorite }: Props): React.ReactE
   return (
     <td className='favorite'>
       <Icon
-        className={`${isFavorite && 'isSelected isColorHighlight'}`}
+        className={`${isFavorite ? 'isSelected isColorHighlight' : ''}`}
         name={isFavorite ? 'star' : 'star outline'}
         onClick={_onFavorite}
       />
diff --git a/packages/page-staking/src/Overview/Address/NominatedBy.tsx b/packages/page-staking/src/Overview/Address/NominatedBy.tsx
index 41a4258d0d..d5d6fb28a3 100644
--- a/packages/page-staking/src/Overview/Address/NominatedBy.tsx
+++ b/packages/page-staking/src/Overview/Address/NominatedBy.tsx
@@ -19,11 +19,11 @@ function NominatedBy ({ nominators }: Props): React.ReactElement<Props> {
     <td className='start all'>
       {nominators
         ? (nominators.length !== 0 && (
-          <Expander summary={t('Nominations ({{count}})', { replace: { count: formatNumber(nominators.length) } })}>
+          <Expander summary={t<string>('Nominations ({{count}})', { replace: { count: formatNumber(nominators.length) } })}>
             {nominators.map(([who, index]): React.ReactNode =>
               <AddressMini
                 key={who}
-                summary={t('priority {{index}}', { replace: { index } })}
+                summary={t<string>('priority {{index}}', { replace: { index } })}
                 value={who}
               />
             )}
diff --git a/packages/page-staking/src/Overview/Address/index.tsx b/packages/page-staking/src/Overview/Address/index.tsx
index 6f398a2925..faa5b31d8c 100644
--- a/packages/page-staking/src/Overview/Address/index.tsx
+++ b/packages/page-staking/src/Overview/Address/index.tsx
@@ -106,7 +106,7 @@ function checkVisibility (api: ApiPromise, address: string, filterName: string,
   return isVisible;
 }
 
-function Address ({ address, className, filterName, hasQueries, isAuthor, isElected, isFavorite, isMain, lastBlock, nominatedBy, onlineCount, onlineMessage, points, setNominators, toggleFavorite }: Props): React.ReactElement<Props> | null {
+function Address ({ address, className = '', filterName, hasQueries, isAuthor, isElected, isFavorite, isMain, lastBlock, nominatedBy, onlineCount, onlineMessage, points, setNominators, toggleFavorite }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
   const { allAccounts } = useAccounts();
   const accountInfo = useCall<DeriveAccountInfo>(isMain && api.derive.accounts.info, [address]);
@@ -145,7 +145,7 @@ function Address ({ address, className, filterName, hasQueries, isAuthor, isElec
   );
 
   return (
-    <tr className={`${className} ${(isAuthor || isNominating) && 'isHighlight'} ${!isVisible && 'staking--hidden'}`}>
+    <tr className={`${className} ${(isAuthor || isNominating) ? 'isHighlight' : ''} ${!isVisible ? 'staking--hidden' : ''}`}>
       <Favorite
         address={address}
         isFavorite={isFavorite}
diff --git a/packages/page-staking/src/Overview/CurrentList.tsx b/packages/page-staking/src/Overview/CurrentList.tsx
index 15f2312862..a1622bdd50 100644
--- a/packages/page-staking/src/Overview/CurrentList.tsx
+++ b/packages/page-staking/src/Overview/CurrentList.tsx
@@ -132,7 +132,7 @@ function CurrentList ({ hasQueries, isIntentions, next, setNominators, stakingOv
     <Input
       autoFocus
       isFull
-      label={t('filter by name, address or index')}
+      label={t<string>('filter by name, address or index')}
       onChange={setNameFilter}
       value={nameFilter}
     />
@@ -165,7 +165,7 @@ function CurrentList ({ hasQueries, isIntentions, next, setNominators, stakingOv
   return isIntentions
     ? (
       <Table
-        empty={waiting && t('No waiting validators found')}
+        empty={waiting && t<string>('No waiting validators found')}
         header={headerActive}
       >
         {_renderRows(elected, false).concat(..._renderRows(waiting, false))}
@@ -173,7 +173,7 @@ function CurrentList ({ hasQueries, isIntentions, next, setNominators, stakingOv
     )
     : (
       <Table
-        empty={validators && t('No active validators found')}
+        empty={validators && t<string>('No active validators found')}
         filter={filter}
         header={headerWaiting}
       >
diff --git a/packages/page-staking/src/Overview/Summary.tsx b/packages/page-staking/src/Overview/Summary.tsx
index e7cb72b32c..8657b0ba51 100644
--- a/packages/page-staking/src/Overview/Summary.tsx
+++ b/packages/page-staking/src/Overview/Summary.tsx
@@ -18,31 +18,27 @@ interface Props {
   next?: string[];
   nominators: string[];
   stakingOverview?: DeriveStakingOverview;
-  style?: any;
 }
 
-function Summary ({ className, isVisible, next, nominators, stakingOverview, style }: Props): React.ReactElement<Props> {
+function Summary ({ className = '', isVisible, next, nominators, stakingOverview }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { lastBlockAuthors, lastBlockNumber } = useContext(BlockAuthorsContext);
 
   return (
-    <SummaryBox
-      className={`${className} ${!isVisible && 'staking--hidden'}`}
-      style={style}
-    >
+    <SummaryBox className={`${className} ${!isVisible ? 'staking--hidden' : ''}`}>
       <section>
         {stakingOverview && (
-          <CardSummary label={t('validators')}>
+          <CardSummary label={t<string>('validators')}>
             {stakingOverview.validators.length}{`/${stakingOverview.validatorCount.toString()}`}
           </CardSummary>
         )}
         {!!next?.length && (
-          <CardSummary label={t('waiting')}>
+          <CardSummary label={t<string>('waiting')}>
             {next.length}
           </CardSummary>
         )}
         {!!nominators.length && (
-          <CardSummary label={t('nominators')}>
+          <CardSummary label={t<string>('nominators')}>
             {nominators.length}
           </CardSummary>
         )}
@@ -50,7 +46,7 @@ function Summary ({ className, isVisible, next, nominators, stakingOverview, sty
       <section>
         <CardSummary
           className='validator--Summary-authors'
-          label={t('last block')}
+          label={t<string>('last block')}
         >
           {lastBlockAuthors?.map((author): React.ReactNode => (
             <IdentityIcon
diff --git a/packages/page-staking/src/Overview/index.tsx b/packages/page-staking/src/Overview/index.tsx
index b9013da14f..e17b4509e1 100644
--- a/packages/page-staking/src/Overview/index.tsx
+++ b/packages/page-staking/src/Overview/index.tsx
@@ -17,7 +17,7 @@ interface Props extends BareProps {
   stakingOverview?: DeriveStakingOverview;
 }
 
-function Overview ({ className, hasQueries, isIntentions, next, setNominators, stakingOverview }: Props): React.ReactElement<Props> {
+function Overview ({ className = '', hasQueries, isIntentions, next, setNominators, stakingOverview }: Props): React.ReactElement<Props> {
   return (
     <div className={`staking--Overview ${className}`}>
       <CurrentList
diff --git a/packages/page-staking/src/Payouts/PayButton.tsx b/packages/page-staking/src/Payouts/PayButton.tsx
index 01e612d5d2..cfb5b56fd7 100644
--- a/packages/page-staking/src/Payouts/PayButton.tsx
+++ b/packages/page-staking/src/Payouts/PayButton.tsx
@@ -60,21 +60,21 @@ function PayButton ({ isAll, isDisabled, payout }: Props): React.ReactElement<Pr
     <>
       {payout && isVisible && (
         <Modal
-          header={t('Payout all stakers')}
+          header={t<string>('Payout all stakers')}
           size='large'
         >
           <Modal.Content>
             <Modal.Columns>
               <Modal.Column>
                 <InputAddress
-                  label={t('request payout from')}
+                  label={t<string>('request payout from')}
                   onChange={setAccount}
                   type='account'
                   value={accountId}
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('Any account can request payout for stakers, this is not limited to accounts that will be rewarded.')}</p>
+                <p>{t<string>('Any account can request payout for stakers, this is not limited to accounts that will be rewarded.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
@@ -82,7 +82,7 @@ function PayButton ({ isAll, isDisabled, payout }: Props): React.ReactElement<Pr
                 {Array.isArray(payout)
                   ? (
                     <Static
-                      label={t('payout stakers for (multiple)')}
+                      label={t<string>('payout stakers for (multiple)')}
                       value={
                         payout.map(({ validatorId }) => (
                           <AddressMini
@@ -97,13 +97,13 @@ function PayButton ({ isAll, isDisabled, payout }: Props): React.ReactElement<Pr
                     <InputAddress
                       defaultValue={payout.validatorId}
                       isDisabled
-                      label={t('payout stakers for (single)')}
+                      label={t<string>('payout stakers for (single)')}
                     />
                   )
                 }
               </Modal.Column>
               <Modal.Column>
-                <p>{t('All the listed validators and all their nominators will receive their rewards.')}</p>
+                <p>{t<string>('All the listed validators and all their nominators will receive their rewards.')}</p>
               </Modal.Column>
             </Modal.Columns>
           </Modal.Content>
@@ -113,7 +113,7 @@ function PayButton ({ isAll, isDisabled, payout }: Props): React.ReactElement<Pr
               extrinsic={extrinsic}
               icon='credit card outline'
               isDisabled={!extrinsic || !accountId}
-              label={t('Payout')}
+              label={t<string>('Payout')}
               onStart={togglePayout}
             />
           </Modal.Actions>
@@ -124,8 +124,8 @@ function PayButton ({ isAll, isDisabled, payout }: Props): React.ReactElement<Pr
         isDisabled={isDisabled || isPayoutEmpty}
         label={
           (isAll || Array.isArray(payout))
-            ? t('Payout all')
-            : t('Payout')
+            ? t<string>('Payout all')
+            : t<string>('Payout')
         }
         onClick={togglePayout}
       />
diff --git a/packages/page-staking/src/Payouts/Stash.tsx b/packages/page-staking/src/Payouts/Stash.tsx
index d6f8b24126..da8e4d8b80 100644
--- a/packages/page-staking/src/Payouts/Stash.tsx
+++ b/packages/page-staking/src/Payouts/Stash.tsx
@@ -43,7 +43,7 @@ function createPrevPayout (api: ApiPromise, payoutRewards: DeriveStakerReward[])
     : api.tx.utility.batch(payoutRewards.map((reward) => createPrevPayoutType(api, reward)));
 }
 
-function Stash ({ className, isDisabled, payout: { available, rewards, stashId }, stakerPayoutsAfter }: Props): React.ReactElement<Props> | null {
+function Stash ({ className = '', isDisabled, payout: { available, rewards, stashId }, stakerPayoutsAfter }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const [extrinsic, setExtrinsic] = useState<SubmittableExtrinsic<'promise'> | null>(null);
@@ -93,7 +93,7 @@ function Stash ({ className, isDisabled, payout: { available, rewards, stashId }
             icon='credit card outline'
             isDisabled={!extrinsic || isDisabled}
             isPrimary={false}
-            label={t('Payout')}
+            label={t<string>('Payout')}
           />
         )}
       </td>
diff --git a/packages/page-staking/src/Payouts/Validator.tsx b/packages/page-staking/src/Payouts/Validator.tsx
index 8deb071929..aa23b99f52 100644
--- a/packages/page-staking/src/Payouts/Validator.tsx
+++ b/packages/page-staking/src/Payouts/Validator.tsx
@@ -27,7 +27,7 @@ interface State {
   oldestEra?: BN;
 }
 
-function Validator ({ className, isDisabled, payout }: Props): React.ReactElement<Props> {
+function Validator ({ className = '', isDisabled, payout }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [{ eraStr, nominators, numNominators, oldestEra }, setState] = useState<State>({
     eraStr: '',
@@ -65,7 +65,7 @@ function Validator ({ className, isDisabled, payout }: Props): React.ReactElemen
         className='start'
         colSpan={2}
       >
-        <Expander summary={t('{{count}} own stashes', { replace: { count: numNominators } })}>
+        <Expander summary={t<string>('{{count}} own stashes', { replace: { count: numNominators } })}>
           {Object.entries(nominators).map(([stashId, balance]) =>
             <AddressMini
               balance={balance}
diff --git a/packages/page-staking/src/Payouts/index.tsx b/packages/page-staking/src/Payouts/index.tsx
index 2dde5395d0..4f3a16f341 100644
--- a/packages/page-staking/src/Payouts/index.tsx
+++ b/packages/page-staking/src/Payouts/index.tsx
@@ -90,7 +90,7 @@ function extractStashes (allRewards: Record<string, DeriveStakerReward[]>): Payo
     .sort((a, b) => b.available.cmp(a.available));
 }
 
-function Payouts ({ className, isInElection }: Props): React.ReactElement<Props> {
+function Payouts ({ className = '', isInElection }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const [{ stashTotal, stashes, validators }, setPayouts] = useState<Available>({});
   const stakerPayoutsAfter = useStakerPayouts();
@@ -152,8 +152,8 @@ function Payouts ({ className, isInElection }: Props): React.ReactElement<Props>
       )}
       <ElectionBanner isInElection={isInElection} />
       <Table
-        empty={stashes && t('No pending payouts for your stashes')}
-        emptySpinner={t('Retrieving info for all applicable eras, this will take some time')}
+        empty={stashes && t<string>('No pending payouts for your stashes')}
+        emptySpinner={t<string>('Retrieving info for all applicable eras, this will take some time')}
         footer={footer}
         header={headerStashes}
         isFixed
diff --git a/packages/page-staking/src/Query/ChartPoints.tsx b/packages/page-staking/src/Query/ChartPoints.tsx
index 955d5c69fe..d3673788b5 100644
--- a/packages/page-staking/src/Query/ChartPoints.tsx
+++ b/packages/page-staking/src/Query/ChartPoints.tsx
@@ -44,8 +44,8 @@ function ChartPoints ({ validatorId }: Props): React.ReactElement<Props> {
   const [{ chart, labels }, setChart] = useState<ChartInfo>({ chart: [], labels: [] });
   const stakerPoints = useCall<DeriveStakerPoints[]>(api.derive.staking.stakerPoints, [validatorId, true]);
   const legends = useMemo(() => [
-    t('points'),
-    t('average')
+    t<string>('points'),
+    t<string>('average')
   ], [t]);
 
   useEffect((): void => {
@@ -56,7 +56,7 @@ function ChartPoints ({ validatorId }: Props): React.ReactElement<Props> {
 
   return (
     <div className='staking--Chart'>
-      <h1>{t('era points')}</h1>
+      <h1>{t<string>('era points')}</h1>
       {chart.length
         ? (
           <Chart.Line
diff --git a/packages/page-staking/src/Query/ChartRewards.tsx b/packages/page-staking/src/Query/ChartRewards.tsx
index 1688cc12d5..6faef52c5d 100644
--- a/packages/page-staking/src/Query/ChartRewards.tsx
+++ b/packages/page-staking/src/Query/ChartRewards.tsx
@@ -64,9 +64,9 @@ function ChartRewards ({ validatorId }: Props): React.ReactElement<Props> {
     divisor: new BN('1'.padEnd(formatBalance.getDefaults().decimals + 1, '0'))
   }), []);
   const legends = useMemo(() => [
-    t('{{currency}} slashed', { replace: { currency } }),
-    t('{{currency}} rewards', { replace: { currency } }),
-    t('{{currency}} average', { replace: { currency } })
+    t<string>('{{currency}} slashed', { replace: { currency } }),
+    t<string>('{{currency}} rewards', { replace: { currency } }),
+    t<string>('{{currency}} average', { replace: { currency } })
   ], [currency, t]);
 
   useEffect((): void => {
@@ -77,7 +77,7 @@ function ChartRewards ({ validatorId }: Props): React.ReactElement<Props> {
 
   return (
     <div className='staking--Chart'>
-      <h1>{t('rewards & slashes')}</h1>
+      <h1>{t<string>('rewards & slashes')}</h1>
       {chart.length
         ? (
           <Chart.Line
diff --git a/packages/page-staking/src/Query/ChartStake.tsx b/packages/page-staking/src/Query/ChartStake.tsx
index 523e8178ad..cb842cb85f 100644
--- a/packages/page-staking/src/Query/ChartStake.tsx
+++ b/packages/page-staking/src/Query/ChartStake.tsx
@@ -56,9 +56,9 @@ function ChartStake ({ validatorId }: Props): React.ReactElement<Props> {
     divisor: new BN('1'.padEnd(formatBalance.getDefaults().decimals + 1, '0'))
   }), []);
   const legends = useMemo(() => [
-    t('{{currency}} clipped', { replace: { currency } }),
-    t('{{currency}} total', { replace: { currency } }),
-    t('{{currency}} average', { replace: { currency } })
+    t<string>('{{currency}} clipped', { replace: { currency } }),
+    t<string>('{{currency}} total', { replace: { currency } }),
+    t<string>('{{currency}} average', { replace: { currency } })
   ], [currency, t]);
 
   useEffect((): void => {
@@ -69,7 +69,7 @@ function ChartStake ({ validatorId }: Props): React.ReactElement<Props> {
 
   return (
     <div className='staking--Chart'>
-      <h1>{t('elected stake')}</h1>
+      <h1>{t<string>('elected stake')}</h1>
       {chart && !!chart[0]?.length
         ? (
           <Chart.Line
diff --git a/packages/page-staking/src/Query/Validator.tsx b/packages/page-staking/src/Query/Validator.tsx
index d7e0ca1be8..ada0e1ab12 100644
--- a/packages/page-staking/src/Query/Validator.tsx
+++ b/packages/page-staking/src/Query/Validator.tsx
@@ -11,7 +11,7 @@ import ChartPoints from './ChartPoints';
 import ChartRewards from './ChartRewards';
 import ChartStake from './ChartStake';
 
-function Validator ({ className, validatorId }: Props): React.ReactElement<Props> {
+function Validator ({ className = '', validatorId }: Props): React.ReactElement<Props> {
   return (
     <Columar className={className}>
       <Column>
diff --git a/packages/page-staking/src/Query/index.tsx b/packages/page-staking/src/Query/index.tsx
index 7dc85803f4..36c25563c5 100644
--- a/packages/page-staking/src/Query/index.tsx
+++ b/packages/page-staking/src/Query/index.tsx
@@ -15,7 +15,7 @@ interface Props {
 
 function Query ({ className }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { value } = useParams();
+  const { value } = useParams<{ value: string }>();
   const [validatorId, setValidatorId] = useState<string | null>(value || null);
 
   const _onQuery = useCallback(
@@ -32,8 +32,8 @@ function Query ({ className }: Props): React.ReactElement<Props> {
       <InputAddressSimple
         className='staking--queryInput'
         defaultValue={value}
-        help={t('Display overview information for the selected validator, including blocks produced.')}
-        label={t('validator to query')}
+        help={t<string>('Display overview information for the selected validator, including blocks produced.')}
+        label={t<string>('validator to query')}
         onChange={setValidatorId}
         onEnter={_onQuery}
       >
diff --git a/packages/page-staking/src/Query/useBlockCounts.tsx b/packages/page-staking/src/Query/useBlockCounts.tsx
index b2436bc05a..597ec99fc7 100644
--- a/packages/page-staking/src/Query/useBlockCounts.tsx
+++ b/packages/page-staking/src/Query/useBlockCounts.tsx
@@ -29,7 +29,7 @@ export default function useBlockCounts (accountId: string, sessionRewards: Sessi
           ))
           .then((historic): void => {
             mountedRef.current && setHistoric(historic);
-          });
+          }).catch(console.error);
       }
     }
   }, [accountId, api, mountedRef, sessionRewards]);
diff --git a/packages/page-staking/src/Targets/Nominate.tsx b/packages/page-staking/src/Targets/Nominate.tsx
index 8cb88375ba..15b4ce1c3e 100644
--- a/packages/page-staking/src/Targets/Nominate.tsx
+++ b/packages/page-staking/src/Targets/Nominate.tsx
@@ -17,7 +17,7 @@ interface Props {
   targets: string[];
 }
 
-function Nominate ({ className, ownNominators, targets }: Props): React.ReactElement<Props> {
+function Nominate ({ className = '', ownNominators, targets }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [ids, setIds] = useState<{ controllerId?: string | null; stashId: string } | null>(null);
   const [filter, setFilter] = useState<string[]>([]);
@@ -47,13 +47,13 @@ function Nominate ({ className, ownNominators, targets }: Props): React.ReactEle
       <Button
         icon='hand paper outline'
         isDisabled={!filter.length || !targets.length}
-        label={t('Nominate selected')}
+        label={t<string>('Nominate selected')}
         onClick={toggleOpen}
       />
       {isOpen && (
         <Modal
           className={className}
-          header={t('Nominate validators')}
+          header={t<string>('Nominate validators')}
           size='large'
         >
           <Modal.Content>
@@ -61,25 +61,25 @@ function Nominate ({ className, ownNominators, targets }: Props): React.ReactEle
               <Modal.Column>
                 <InputAddress
                   filter={filter}
-                  help={t('Your stash account. The transaction will be sent from the associated controller.')}
-                  label={t('the stash account to nominate with')}
+                  help={t<string>('Your stash account. The transaction will be sent from the associated controller.')}
+                  label={t<string>('the stash account to nominate with')}
                   onChange={_onChangeStash}
                   value={ids?.stashId}
                 />
                 <InputAddress
                   isDisabled
-                  label={t('the associated controller')}
+                  label={t<string>('the associated controller')}
                   value={ids?.controllerId}
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('One of your available nomination accounts, keyed by the stash. The transaction will be sent from the controller.')}</p>
+                <p>{t<string>('One of your available nomination accounts, keyed by the stash. The transaction will be sent from the controller.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
               <Modal.Column>
                 <Static
-                  label={t('selected validators')}
+                  label={t<string>('selected validators')}
                   value={
                     targets.map((validatorId) => (
                       <AddressMini
@@ -91,15 +91,15 @@ function Nominate ({ className, ownNominators, targets }: Props): React.ReactEle
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The selected validators to nominate, either via the "currently best algorithm" or via a manual selection.')}</p>
-                <p>{t('Once transmitted the new selection will only take effect in 2 eras since the selection criteria for the next era was done at the end of the previous era. Until then, the nominations will show as inactive.')}</p>
+                <p>{t<string>('The selected validators to nominate, either via the "currently best algorithm" or via a manual selection.')}</p>
+                <p>{t<string>('Once transmitted the new selection will only take effect in 2 eras since the selection criteria for the next era was done at the end of the previous era. Until then, the nominations will show as inactive.')}</p>
               </Modal.Column>
             </Modal.Columns>
           </Modal.Content>
           <Modal.Actions onCancel={toggleOpen}>
             <TxButton
               accountId={ids?.controllerId}
-              label={t('Nominate')}
+              label={t<string>('Nominate')}
               onStart={toggleOpen}
               params={[targets]}
               tx='staking.nominate'
diff --git a/packages/page-staking/src/Targets/Summary.tsx b/packages/page-staking/src/Targets/Summary.tsx
index 6fe622bb55..ad5a1ef744 100644
--- a/packages/page-staking/src/Targets/Summary.tsx
+++ b/packages/page-staking/src/Targets/Summary.tsx
@@ -35,7 +35,7 @@ function Summary ({ lastReward, numNominators, numValidators, totalStaked }: Pro
     <SummaryBox>
       <section className='ui--media-small'>
         {totalStaked && (
-          <CardSummary label={t('total staked')}>
+          <CardSummary label={t<string>('total staked')}>
             <FormatBalance
               value={totalStaked}
               withSi
@@ -46,7 +46,7 @@ function Summary ({ lastReward, numNominators, numValidators, totalStaked }: Pro
           <CardSummary label=''>/</CardSummary>
         )}
         {totalIssuance && (
-          <CardSummary label={t('total issuance')}>
+          <CardSummary label={t<string>('total issuance')}>
             <FormatBalance
               value={totalIssuance}
               withSi
@@ -55,17 +55,17 @@ function Summary ({ lastReward, numNominators, numValidators, totalStaked }: Pro
         )}
       </section>
       {percentage && (
-        <CardSummary label={t('staked')}>
+        <CardSummary label={t<string>('staked')}>
           {percentage}
         </CardSummary>
       )}
       {numValidators && numNominators && (
-        <CardSummary label={t('validators/nominators')}>
+        <CardSummary label={t<string>('validators/nominators')}>
           {numValidators}/{numNominators}
         </CardSummary>
       )}
       {lastReward?.gtn(0) && (
-        <CardSummary label={t('last reward')}>
+        <CardSummary label={t<string>('last reward')}>
           <FormatBalance
             value={lastReward}
             withSi
diff --git a/packages/page-staking/src/Targets/Validator.tsx b/packages/page-staking/src/Targets/Validator.tsx
index 4aacfd8edb..cf973a8084 100644
--- a/packages/page-staking/src/Targets/Validator.tsx
+++ b/packages/page-staking/src/Targets/Validator.tsx
@@ -34,7 +34,7 @@ function Validator ({ canSelect, info: { accountId, bondOther, bondOwn, bondTota
   );
 
   return (
-    <tr className={`${isNominating && 'isHighlight'}`}>
+    <tr className={`${isNominating ? 'isHighlight' : ''}`}>
       <Favorite
         address={key}
         isFavorite={isFavorite}
diff --git a/packages/page-staking/src/Targets/index.tsx b/packages/page-staking/src/Targets/index.tsx
index 189c22f5c3..88411abec3 100644
--- a/packages/page-staking/src/Targets/index.tsx
+++ b/packages/page-staking/src/Targets/index.tsx
@@ -36,7 +36,7 @@ function sort (sortBy: TargetSortBy, sortFromMax: boolean, validators: Validator
     );
 }
 
-function Targets ({ className, ownStashes, targets: { calcWith, lastReward, nominators, setCalcWith, toggleFavorite, totalStaked, validators } }: Props): React.ReactElement<Props> {
+function Targets ({ className = '', ownStashes, targets: { calcWith, lastReward, nominators, setCalcWith, toggleFavorite, totalStaked, validators } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const ownNominators = useOwnNominators(ownStashes);
   const [selected, setSelected] = useState<string[]>([]);
@@ -79,11 +79,11 @@ function Targets ({ className, ownStashes, targets: { calcWith, lastReward, nomi
 
   const labels = useMemo(
     (): Record<string, string> => ({
-      rankBondOther: t('other stake'),
-      rankBondOwn: t('own stake'),
-      rankBondTotal: t('total stake'),
-      rankComm: t('commission'),
-      rankOverall: t('profit/era est')
+      rankBondOther: t<string>('other stake'),
+      rankBondOwn: t<string>('own stake'),
+      rankBondTotal: t<string>('total stake'),
+      rankComm: t<string>('commission'),
+      rankOverall: t<string>('profit/era est')
     }),
     [t]
   );
@@ -92,7 +92,7 @@ function Targets ({ className, ownStashes, targets: { calcWith, lastReward, nomi
     [t('validators'), 'start', 4],
     ...['rankComm', 'rankBondTotal', 'rankBondOwn', 'rankBondOther', 'rankOverall'].map((header) => [
       <>{labels[header]}<Icon name={sortBy === header ? (sortFromMax ? 'chevron down' : 'chevron up') : 'minus'} /></>,
-      sorted ? `isClickable ${sortBy === header && 'ui--highlight--border'} number` : 'number',
+      sorted ? `isClickable ${sortBy === header ? 'ui--highlight--border' : ''} number` : 'number',
       1,
       (): void => _sort(header as 'rankComm')
     ]),
@@ -103,9 +103,9 @@ function Targets ({ className, ownStashes, targets: { calcWith, lastReward, nomi
     sorted && (
       <InputBalance
         className='balanceInput'
-        help={t('The amount that will be used on a per-validator basis to calculate profits for that validator.')}
+        help={t<string>('The amount that will be used on a per-validator basis to calculate profits for that validator.')}
         isFull
-        label={t('amount to use for estimation')}
+        label={t<string>('amount to use for estimation')}
         onChange={setCalcWith}
         value={calcWith}
       />
@@ -124,7 +124,7 @@ function Targets ({ className, ownStashes, targets: { calcWith, lastReward, nomi
         <Button
           icon='check'
           isDisabled={!validators?.length || !ownNominators?.length}
-          label={t('Select best')}
+          label={t<string>('Select best')}
           onClick={_selectProfitable}
         />
         <Nominate
@@ -133,7 +133,7 @@ function Targets ({ className, ownStashes, targets: { calcWith, lastReward, nomi
         />
       </Button.Group>
       <Table
-        empty={sorted && t('No active validators to check')}
+        empty={sorted && t<string>('No active validators to check')}
         filter={filter}
         header={header}
       >
diff --git a/packages/page-staking/src/index.tsx b/packages/page-staking/src/index.tsx
index 5117e609d5..19c0719ff9 100644
--- a/packages/page-staking/src/index.tsx
+++ b/packages/page-staking/src/index.tsx
@@ -34,7 +34,7 @@ function reduceNominators (nominators: string[], additional: string[]): string[]
   return nominators.concat(...additional.filter((nominator): boolean => !nominators.includes(nominator)));
 }
 
-function StakingApp ({ basePath, className }: Props): React.ReactElement<Props> {
+function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const { hasAccounts } = useAccounts();
@@ -57,11 +57,11 @@ function StakingApp ({ basePath, className }: Props): React.ReactElement<Props>
     {
       isRoot: true,
       name: 'overview',
-      text: t('Staking overview')
+      text: t<string>('Staking overview')
     },
     {
       name: 'actions',
-      text: t('Account actions')
+      text: t<string>('Account actions')
     },
     isFunction(api.query.staking.activeEra)
       ? {
@@ -72,16 +72,16 @@ function StakingApp ({ basePath, className }: Props): React.ReactElement<Props>
     {
       alias: 'returns',
       name: 'targets',
-      text: t('Targets')
+      text: t<string>('Targets')
     },
     {
       name: 'waiting',
-      text: t('Waiting')
+      text: t<string>('Waiting')
     },
     {
       hasParams: true,
       name: 'query',
-      text: t('Validator stats')
+      text: t<string>('Validator stats')
     }
   ].filter((q): q is { name: string; text: string } => !!q), [api, t]);
   const hiddenTabs = useMemo(
@@ -103,7 +103,7 @@ function StakingApp ({ basePath, className }: Props): React.ReactElement<Props>
 
   return (
     <main className={`staking--App ${className}`}>
-      <HelpOverlay md={basicMd} />
+      <HelpOverlay md={basicMd as string} />
       <header>
         <Tabs
           basePath={basePath}
diff --git a/packages/page-storage/src/Query.tsx b/packages/page-storage/src/Query.tsx
index 20176d8e30..d7ae1f764a 100644
--- a/packages/page-storage/src/Query.tsx
+++ b/packages/page-storage/src/Query.tsx
@@ -103,6 +103,7 @@ function getCachedComponent (query: QueryTypes): CacheInstance {
         renderHelper = withCallDiv('subscribe', {
           paramName: 'params',
           paramValid: true,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
           params: [key, ...values],
           withIndicator: true
         });
@@ -127,7 +128,7 @@ function getCachedComponent (query: QueryTypes): CacheInstance {
   return cache[id];
 }
 
-function Query ({ className, onRemove, value }: Props): React.ReactElement<Props> | null {
+function Query ({ className = '', onRemove, value }: Props): React.ReactElement<Props> | null {
   // const [inputs, setInputs] = useState<React.ReactNode[]>([]);
   const [{ Component }, setComponent] = useState<Partial<CacheInstance>>({});
   const [isSpreadable, setIsSpreadable] = useState(false);
diff --git a/packages/page-storage/src/Selection/Consts.tsx b/packages/page-storage/src/Selection/Consts.tsx
index 2afe21a2c9..904e307c90 100644
--- a/packages/page-storage/src/Selection/Consts.tsx
+++ b/packages/page-storage/src/Selection/Consts.tsx
@@ -41,7 +41,7 @@ function Consts ({ onAdd }: Props): React.ReactElement<Props> {
         <InputConsts
           defaultValue={defaultValue}
           help={meta?.documentation.join(' ')}
-          label={t('selected constant query')}
+          label={t<string>('selected constant query')}
           onChange={setValue}
         />
       </div>
diff --git a/packages/page-storage/src/Selection/Modules.tsx b/packages/page-storage/src/Selection/Modules.tsx
index db8b12ffe7..87922e0e18 100644
--- a/packages/page-storage/src/Selection/Modules.tsx
+++ b/packages/page-storage/src/Selection/Modules.tsx
@@ -106,7 +106,7 @@ function Modules ({ onAdd }: Props): React.ReactElement<Props> {
         <InputStorage
           defaultValue={api.query.timestamp.now}
           help={meta?.documentation.join(' ')}
-          label={t('selected state query')}
+          label={t<string>('selected state query')}
           onChange={_onChangeKey}
         />
         <Params
diff --git a/packages/page-storage/src/Selection/Raw.tsx b/packages/page-storage/src/Selection/Raw.tsx
index 1a438c496f..e1afa7f04f 100644
--- a/packages/page-storage/src/Selection/Raw.tsx
+++ b/packages/page-storage/src/Selection/Raw.tsx
@@ -39,7 +39,7 @@ function Raw ({ onAdd }: Props): React.ReactElement<Props> {
       <div className='storage--actionrow-value'>
         <Input
           autoFocus
-          label={t('hex-encoded storage key')}
+          label={t<string>('hex-encoded storage key')}
           onChange={_onChangeKey}
           onEnter={_onAdd}
         />
diff --git a/packages/page-storage/src/Selection/index.tsx b/packages/page-storage/src/Selection/index.tsx
index d1a35159e8..831b3f114b 100644
--- a/packages/page-storage/src/Selection/index.tsx
+++ b/packages/page-storage/src/Selection/index.tsx
@@ -26,15 +26,15 @@ function Selection ({ basePath, onAdd }: Props): React.ReactElement<Props> {
     {
       isRoot: true,
       name: 'modules',
-      text: t('Storage')
+      text: t<string>('Storage')
     },
     {
       name: 'constants',
-      text: t('Constants')
+      text: t<string>('Constants')
     },
     {
       name: 'raw',
-      text: t('Raw storage')
+      text: t<string>('Raw storage')
     }
   ], [t]);
 
diff --git a/packages/page-storage/src/index.tsx b/packages/page-storage/src/index.tsx
index 85ca038e25..531ba6bcd3 100644
--- a/packages/page-storage/src/index.tsx
+++ b/packages/page-storage/src/index.tsx
@@ -11,7 +11,7 @@ import styled from 'styled-components';
 import Queries from './Queries';
 import Selection from './Selection';
 
-function StorageApp ({ basePath, className }: Props): React.ReactElement<Props> {
+function StorageApp ({ basePath, className = '' }: Props): React.ReactElement<Props> {
   const [queue, setQueue] = useState<QueryTypes[]>([]);
 
   const _onAdd = useCallback(
diff --git a/packages/page-sudo/src/SetKey.tsx b/packages/page-sudo/src/SetKey.tsx
index 7a31cf50c8..63f04ba44f 100644
--- a/packages/page-sudo/src/SetKey.tsx
+++ b/packages/page-sudo/src/SetKey.tsx
@@ -13,7 +13,7 @@ import { useTranslation } from './translate';
 
 interface Props extends I18nProps, ComponentProps {}
 
-function SetKey ({ allAccounts, className, isMine, sudoKey }: Props): React.ReactElement<Props> {
+function SetKey ({ allAccounts, className = '', isMine, sudoKey }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [selected, setSelected] = useState<string | null>(null);
 
@@ -35,7 +35,7 @@ function SetKey ({ allAccounts, className, isMine, sudoKey }: Props): React.Reac
               <InputAddress
                 className='sudoInputAddress'
                 isInput={true}
-                label={t('sudo key')}
+                label={t<string>('sudo key')}
                 onChange={setSelected}
                 type='all'
                 value={selected}
@@ -45,7 +45,7 @@ function SetKey ({ allAccounts, className, isMine, sudoKey }: Props): React.Reac
                 icon='sign-in'
                 isDisabled={!isMine || sudoKey === selected}
                 isPrimary
-                label={t('Reassign')}
+                label={t<string>('Reassign')}
                 params={[selected]}
                 tx='sudo.setKey'
               />
@@ -54,7 +54,7 @@ function SetKey ({ allAccounts, className, isMine, sudoKey }: Props): React.Reac
           : (
             <Labelled
               className='ui--Dropdown sudoLabelled'
-              label={t('sudo key')}
+              label={t<string>('sudo key')}
               withLabel
             >
               <AddressMini value={sudoKey} />
@@ -66,7 +66,7 @@ function SetKey ({ allAccounts, className, isMine, sudoKey }: Props): React.Reac
         <article className='warning padded'>
           <div>
             <Icon name='warning' />
-            {t('You will no longer have sudo access')}
+            {t<string>('You will no longer have sudo access')}
           </div>
         </article>
       )}
diff --git a/packages/page-sudo/src/Sudo.tsx b/packages/page-sudo/src/Sudo.tsx
index 4f9a4bab67..b699627c9f 100644
--- a/packages/page-sudo/src/Sudo.tsx
+++ b/packages/page-sudo/src/Sudo.tsx
@@ -15,7 +15,7 @@ import { useTranslation } from './translate';
 
 const ZERO = new BN(0);
 
-function Propose ({ className, isMine, sudoKey }: Props): React.ReactElement<Props> {
+function Propose ({ className = '', isMine, sudoKey }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api, apiDefaultTxSudo } = useApi();
   const [withWeight, toggleWithWeight] = useToggle();
@@ -38,16 +38,16 @@ function Propose ({ className, isMine, sudoKey }: Props): React.ReactElement<Pro
       <section className={className}>
         <Extrinsic
           defaultValue={apiDefaultTxSudo}
-          label={t('submit the following change')}
+          label={t<string>('submit the following change')}
           onChange={_onChangeExtrinsic}
         />
         <br />
         {withWeight && (
           <InputNumber
-            help={t('The unchecked weight as specified for the sudoUncheckedWeight call.')}
+            help={t<string>('The unchecked weight as specified for the sudoUncheckedWeight call.')}
             isError={weight.eq(ZERO)}
             isZeroable={false}
-            label={t('unchecked weight for this call')}
+            label={t<string>('unchecked weight for this call')}
             onChange={_onChangeWeight}
             value={weight}
           />
@@ -57,8 +57,8 @@ function Propose ({ className, isMine, sudoKey }: Props): React.ReactElement<Pro
             className='sudoToggle'
             label={
               withWeight
-                ? t('sudo with unchecked weight parameter')
-                : t('sudo without unchecked weight parameter')
+                ? t<string>('sudo with unchecked weight parameter')
+                : t<string>('sudo without unchecked weight parameter')
             }
             onChange={toggleWithWeight}
             value={withWeight}
@@ -69,7 +69,7 @@ function Propose ({ className, isMine, sudoKey }: Props): React.ReactElement<Pro
             accountId={sudoKey}
             icon='sign-in'
             isDisabled={!method || (withWeight ? weight.eq(ZERO) : false)}
-            label={t('Submit Sudo')}
+            label={t<string>('Submit Sudo')}
             params={
               withWeight
                 ? [method, weight]
@@ -88,7 +88,7 @@ function Propose ({ className, isMine, sudoKey }: Props): React.ReactElement<Pro
       <article className='error padded'>
         <div>
           <Icon name='ban' />
-          {t('You do not have access to the current sudo key')}
+          {t<string>('You do not have access to the current sudo key')}
         </div>
       </article>
     );
diff --git a/packages/page-sudo/src/index.tsx b/packages/page-sudo/src/index.tsx
index acb6697538..fc1c644560 100644
--- a/packages/page-sudo/src/index.tsx
+++ b/packages/page-sudo/src/index.tsx
@@ -21,11 +21,11 @@ function SudoApp ({ basePath }: Props): React.ReactElement<Props> {
     {
       isRoot: true,
       name: 'index',
-      text: t('Sudo access')
+      text: t<string>('Sudo access')
     },
     {
       name: 'key',
-      text: t('Set sudo key')
+      text: t<string>('Set sudo key')
     }
   ], [t]);
 
@@ -60,7 +60,7 @@ function SudoApp ({ basePath }: Props): React.ReactElement<Props> {
           <article className='error padded'>
             <div>
               <Icon name='ban' />
-              {t('You do not have access to the current sudo key')}
+              {t<string>('You do not have access to the current sudo key')}
             </div>
           </article>
         )
diff --git a/packages/page-tech-comm/src/Overview/Members.tsx b/packages/page-tech-comm/src/Overview/Members.tsx
index d45bea5743..de921c3781 100644
--- a/packages/page-tech-comm/src/Overview/Members.tsx
+++ b/packages/page-tech-comm/src/Overview/Members.tsx
@@ -15,7 +15,7 @@ interface Props {
   prime?: AccountId | null;
 }
 
-function Members ({ className, members, prime }: Props): React.ReactElement<Props> {
+function Members ({ className = '', members, prime }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const header = useMemo(() => [
@@ -25,7 +25,7 @@ function Members ({ className, members, prime }: Props): React.ReactElement<Prop
   return (
     <Table
       className={className}
-      empty={members && t('No members found')}
+      empty={members && t<string>('No members found')}
       header={header}
     >
       {members?.map((accountId): React.ReactNode => (
@@ -37,8 +37,8 @@ function Members ({ className, members, prime }: Props): React.ReactElement<Prop
             {prime?.eq(accountId) && (
               <Tag
                 color='green'
-                hover={t('Committee prime member, default voting')}
-                label={t('prime member')}
+                hover={t<string>('Committee prime member, default voting')}
+                label={t<string>('prime member')}
               />
             )}
           </td>
diff --git a/packages/page-tech-comm/src/Overview/Summary.tsx b/packages/page-tech-comm/src/Overview/Summary.tsx
index 2e9c4348bc..e11b130312 100644
--- a/packages/page-tech-comm/src/Overview/Summary.tsx
+++ b/packages/page-tech-comm/src/Overview/Summary.tsx
@@ -12,21 +12,21 @@ import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 
-function Summary ({ className, members, proposals }: Props): React.ReactElement<Props> {
+function Summary ({ className = '', members, proposals }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const proposalCount = useCall<u32>(api.query.technicalCommittee.proposalCount, []);
 
   return (
     <SummaryBox className={className}>
-      <CardSummary label={t('members')}>
+      <CardSummary label={t<string>('members')}>
         {formatNumber(members.length)}
       </CardSummary>
       <section>
-        <CardSummary label={t('proposals')}>
+        <CardSummary label={t<string>('proposals')}>
           {formatNumber(proposals?.length)}
         </CardSummary>
-        <CardSummary label={t('total')}>
+        <CardSummary label={t<string>('total')}>
           {formatNumber(proposalCount)}
         </CardSummary>
       </section>
diff --git a/packages/page-tech-comm/src/Overview/index.tsx b/packages/page-tech-comm/src/Overview/index.tsx
index 9a32c9859b..29302522a3 100644
--- a/packages/page-tech-comm/src/Overview/index.tsx
+++ b/packages/page-tech-comm/src/Overview/index.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import Members from './Members';
 import Summary from './Summary';
 
-function Overview ({ className, isMember, members, prime, proposals }: Props): React.ReactElement<Props> {
+function Overview ({ className = '', isMember, members, prime, proposals }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
       <Summary
diff --git a/packages/page-tech-comm/src/Proposals/Proposal.tsx b/packages/page-tech-comm/src/Proposals/Proposal.tsx
index 0424b2463f..26449044f6 100644
--- a/packages/page-tech-comm/src/Proposals/Proposal.tsx
+++ b/packages/page-tech-comm/src/Proposals/Proposal.tsx
@@ -19,7 +19,7 @@ interface Props {
   prime?: AccountId | null;
 }
 
-function Proposal ({ className, imageHash, prime }: Props): React.ReactElement<Props> | null {
+function Proposal ({ className = '', imageHash, prime }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
   const optProposal = useCall<Option<ProposalType>>(api.query.technicalCommittee.proposalOf, [imageHash]);
   const votes = useCall<Option<Votes>>(api.query.technicalCommittee.voting, [imageHash]);
@@ -44,7 +44,7 @@ function Proposal ({ className, imageHash, prime }: Props): React.ReactElement<P
       <td className='address'>
         {ayes.map((address, index): React.ReactNode => (
           <AddressMini
-            key={`${index}:${address}`}
+            key={`${index}:${address.toHex()}`}
             value={address}
             withBalance={false}
           />
@@ -53,7 +53,7 @@ function Proposal ({ className, imageHash, prime }: Props): React.ReactElement<P
       <td className='address'>
         {nays.map((address, index): React.ReactNode => (
           <AddressMini
-            key={`${index}:${address}`}
+            key={`${index}:${address.toHex()}`}
             value={address}
             withBalance={false}
           />
diff --git a/packages/page-tech-comm/src/Proposals/Propose.tsx b/packages/page-tech-comm/src/Proposals/Propose.tsx
index fcfd5c881c..262c656912 100644
--- a/packages/page-tech-comm/src/Proposals/Propose.tsx
+++ b/packages/page-tech-comm/src/Proposals/Propose.tsx
@@ -46,30 +46,30 @@ function Propose ({ isMember, members }: Props): React.ReactElement<Props> {
     <>
       {isOpen && (
         <Modal
-          header={t('Propose a committee motion')}
+          header={t<string>('Propose a committee motion')}
           onClose={onClose}
         >
           <Modal.Content>
             <InputAddress
               filter={members}
-              help={t('Select the account you wish to make the proposal with.')}
-              label={t('propose from account')}
+              help={t<string>('Select the account you wish to make the proposal with.')}
+              label={t<string>('propose from account')}
               onChange={setAcountId}
               type='account'
               withLabel
             />
             <InputNumber
               className='medium'
-              help={t('The minimum number of committee votes required to approve this motion')}
+              help={t<string>('The minimum number of committee votes required to approve this motion')}
               isError={!hasThreshold}
-              label={t('threshold')}
+              label={t<string>('threshold')}
               onChange={_onChangeThreshold}
-              placeholder={t('Positive number between 1 and {{count}}', { replace: { count: members.length } })}
+              placeholder={t<string>('Positive number between 1 and {{count}}', { replace: { count: members.length } })}
               value={threshold || undefined}
             />
             <Extrinsic
               defaultValue={apiDefaultTxSudo}
-              label={t('proposal')}
+              label={t<string>('proposal')}
               onChange={_onChangeExtrinsic}
             />
           </Modal.Content>
@@ -87,7 +87,7 @@ function Propose ({ isMember, members }: Props): React.ReactElement<Props> {
       <Button
         icon='plus'
         isDisabled={!isMember}
-        label={t('Submit proposal')}
+        label={t<string>('Submit proposal')}
         onClick={onOpen}
       />
     </>
diff --git a/packages/page-tech-comm/src/Proposals/Voting.tsx b/packages/page-tech-comm/src/Proposals/Voting.tsx
index c264dd3c54..f732447b15 100644
--- a/packages/page-tech-comm/src/Proposals/Voting.tsx
+++ b/packages/page-tech-comm/src/Proposals/Voting.tsx
@@ -44,7 +44,7 @@ function Voting ({ hash, prime, proposalId }: Props): React.ReactElement<Props>
     <>
       {isVotingOpen && (
         <Modal
-          header={t('Vote on proposal')}
+          header={t<string>('Vote on proposal')}
           size='small'
         >
           <Modal.Content>
@@ -55,7 +55,7 @@ function Voting ({ hash, prime, proposalId }: Props): React.ReactElement<Props>
             />
             {isPrime && (
               <article className='warning'>
-                <div><Icon name='warning sign' />{t('You are voting with this collective\'s prime account. The vote will be the default outcome in case of any abstentions.')}</div>
+                <div><Icon name='warning sign' />{t<string>('You are voting with this collective\'s prime account. The vote will be the default outcome in case of any abstentions.')}</div>
               </article>
             )}
           </Modal.Content>
@@ -70,7 +70,7 @@ function Voting ({ hash, prime, proposalId }: Props): React.ReactElement<Props>
       )}
       <Button
         icon='check'
-        label={t('Vote')}
+        label={t<string>('Vote')}
         onClick={toggleVoting}
       />
     </>
diff --git a/packages/page-tech-comm/src/Proposals/index.tsx b/packages/page-tech-comm/src/Proposals/index.tsx
index 72fe7a9052..5fc353b578 100644
--- a/packages/page-tech-comm/src/Proposals/index.tsx
+++ b/packages/page-tech-comm/src/Proposals/index.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from '../translate';
 import Proposal from './Proposal';
 import Propose from './Propose';
 
-function Proposals ({ className, isMember, members, prime, proposals }: Props): React.ReactElement<Props> {
+function Proposals ({ className = '', isMember, members, prime, proposals }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const header = useMemo(() => [
@@ -32,7 +32,7 @@ function Proposals ({ className, isMember, members, prime, proposals }: Props):
         />
       </Button.Group>
       <Table
-        empty={proposals && t('No committee proposals')}
+        empty={proposals && t<string>('No committee proposals')}
         header={header}
       >
         {proposals?.map((hash: Hash): React.ReactNode => (
diff --git a/packages/page-tech-comm/src/index.tsx b/packages/page-tech-comm/src/index.tsx
index dff4dce09f..ecaa4fdc9d 100644
--- a/packages/page-tech-comm/src/index.tsx
+++ b/packages/page-tech-comm/src/index.tsx
@@ -31,11 +31,11 @@ function TechCommApp ({ basePath, className }: Props): React.ReactElement<Props>
     {
       isRoot: true,
       name: 'overview',
-      text: t('Tech. committee')
+      text: t<string>('Tech. committee')
     },
     {
       name: 'proposals',
-      text: t('Proposals ({{count}})', { replace: { count: (proposals && proposals.length) || 0 } })
+      text: t<string>('Proposals ({{count}})', { replace: { count: (proposals && proposals.length) || 0 } })
     }
   ], [proposals, t]);
 
diff --git a/packages/page-toolbox/src/Hash.tsx b/packages/page-toolbox/src/Hash.tsx
index 668eeb544f..981deee874 100644
--- a/packages/page-toolbox/src/Hash.tsx
+++ b/packages/page-toolbox/src/Hash.tsx
@@ -47,8 +47,8 @@ function Hash (): React.ReactElement {
         <Input
           autoFocus
           className='full'
-          help={t('The input data to hash. This can be either specified as a hex value (0x-prefix) or as a string.')}
-          label={t('from the following data')}
+          help={t<string>('The input data to hash. This can be either specified as a hex value (0x-prefix) or as a string.')}
+          label={t<string>('from the following data')}
           onChange={_onChangeData}
           value={data}
         />
@@ -56,22 +56,22 @@ function Hash (): React.ReactElement {
       <div className='ui--row'>
         <Static
           className='medium'
-          help={t('Detection on the input string to determine if it is hex or non-hex.')}
-          label={t('hex input data')}
+          help={t<string>('Detection on the input string to determine if it is hex or non-hex.')}
+          label={t<string>('hex input data')}
           value={
             isHexData
-              ? t('Yes')
-              : t('No')
+              ? t<string>('Yes')
+              : t<string>('No')
           }
         />
       </div>
       <div className='ui--row'>
         <Output
           className='full'
-          help={t('The blake2b 256-bit hash of the actual input data.')}
+          help={t<string>('The blake2b 256-bit hash of the actual input data.')}
           isHidden={hash.length === 0}
           isMonospace
-          label={t('the resulting hash is')}
+          label={t<string>('the resulting hash is')}
           value={hash}
           withCopy
         />
diff --git a/packages/page-toolbox/src/Rpc/Account.tsx b/packages/page-toolbox/src/Rpc/Account.tsx
index d59eced767..bd97cef878 100644
--- a/packages/page-toolbox/src/Rpc/Account.tsx
+++ b/packages/page-toolbox/src/Rpc/Account.tsx
@@ -17,7 +17,7 @@ interface Props {
   onChange: (accountId: string | undefined | null, accountNonce: BN) => void;
 }
 
-function Account ({ className, defaultValue, isError, onChange }: Props): React.ReactElement<Props> {
+function Account ({ className = '', defaultValue, isError, onChange }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [accountId, setAccountId] = useState<string | null | undefined>(defaultValue);
   const [accountNonce, setAccountNonce] = useState(new BN(0));
@@ -32,7 +32,7 @@ function Account ({ className, defaultValue, isError, onChange }: Props): React.
         <InputAddress
           defaultValue={defaultValue}
           isError={isError}
-          label={t('sign data from account')}
+          label={t<string>('sign data from account')}
           onChange={setAccountId}
           placeholder='0x...'
           type='account'
@@ -41,7 +41,7 @@ function Account ({ className, defaultValue, isError, onChange }: Props): React.
       {accountId && (
         <Labelled
           className='small'
-          label={t('with an index of')}
+          label={t<string>('with an index of')}
         >
           <Nonce
             callOnResult={setAccountNonce}
diff --git a/packages/page-toolbox/src/Rpc/Results.tsx b/packages/page-toolbox/src/Rpc/Results.tsx
index 50b3f0037d..f8de301502 100644
--- a/packages/page-toolbox/src/Rpc/Results.tsx
+++ b/packages/page-toolbox/src/Rpc/Results.tsx
@@ -4,6 +4,7 @@
 
 import { BareProps } from '@polkadot/react-components/types';
 import { QueueTx } from '@polkadot/react-components/Status/types';
+import { Codec } from '@polkadot/types/types';
 
 import React from 'react';
 import { Output } from '@polkadot/react-components';
@@ -32,7 +33,7 @@ function Results ({ queue = [] }: Props): React.ReactElement<Props> | null {
           value={
             error
               ? error.message
-              : <pre>{JSON.stringify(result.toHuman(), null, 2).replace(/"/g, '').replace(/\\/g, '').replace(/\],\[/g, '],\n[')}</pre>
+              : <pre>{JSON.stringify((result as Codec).toHuman(), null, 2).replace(/"/g, '').replace(/\\/g, '').replace(/\],\[/g, '],\n[')}</pre>
           }
         />
       ))}
diff --git a/packages/page-toolbox/src/Rpc/Selection.tsx b/packages/page-toolbox/src/Rpc/Selection.tsx
index a1918e7f09..31aefd0b9a 100644
--- a/packages/page-toolbox/src/Rpc/Selection.tsx
+++ b/packages/page-toolbox/src/Rpc/Selection.tsx
@@ -84,8 +84,8 @@ function Selection ({ queueRpc }: Props): React.ReactElement<Props> {
     <section className='rpc--Selection'>
       <InputRpc
         defaultValue={defaultMethod}
-        help={t('The actual JSONRPC module and function to make a call to.')}
-        label={t('call the selected endpoint')}
+        help={t<string>('The actual JSONRPC module and function to make a call to.')}
+        label={t<string>('call the selected endpoint')}
         onChange={_onChangeMethod}
       />
       <Params
@@ -97,7 +97,7 @@ function Selection ({ queueRpc }: Props): React.ReactElement<Props> {
         <Button
           icon='sign-in'
           isDisabled={!isValid}
-          label={t('Submit RPC call')}
+          label={t<string>('Submit RPC call')}
           onClick={_onSubmit}
         />
       </Button.Group>
diff --git a/packages/page-toolbox/src/Sign.tsx b/packages/page-toolbox/src/Sign.tsx
index a9fe252df8..79e43dfdd5 100644
--- a/packages/page-toolbox/src/Sign.tsx
+++ b/packages/page-toolbox/src/Sign.tsx
@@ -26,7 +26,7 @@ interface AccountState {
   isInjected: boolean;
 }
 
-function Sign ({ className }: Props): React.ReactElement<Props> {
+function Sign ({ className = '' }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [currentPair, setCurrentPair] = useState<KeyringPair | null>(keyring.getPairs()[0] || null);
   const [{ data, isHexData }, setData] = useState<{ data: string; isHexData: boolean }>({ data: '', isHexData: false });
@@ -42,9 +42,9 @@ function Sign ({ className }: Props): React.ReactElement<Props> {
 
   useEffect((): void => {
     const meta = (currentPair && currentPair.meta) || {};
-    const isExternal = meta.isExternal || false;
-    const isHardware = meta.isHardware || false;
-    const isInjected = meta.isInjected || false;
+    const isExternal = (meta.isExternal as boolean) || false;
+    const isHardware = (meta.isHardware as boolean) || false;
+    const isInjected = (meta.isInjected as boolean) || false;
     const isUsable = !(isExternal || isHardware || isInjected);
 
     setAccountState({
@@ -62,12 +62,13 @@ function Sign ({ className }: Props): React.ReactElement<Props> {
 
     // for injected, retrieve the signer
     if (meta.source && isInjected) {
-      web3FromSource(meta.source)
+      web3FromSource(meta.source as string)
         .catch((): null => null)
         .then((injected) => setSigner({
           isUsable: isFunction(injected?.signer?.signRaw),
           signer: injected?.signer || null
-        }));
+        }))
+        .catch(console.error);
     }
   }, [currentPair]);
 
@@ -98,7 +99,8 @@ function Sign ({ className }: Props): React.ReactElement<Props> {
               : stringToHex(data),
             type: 'bytes'
           })
-          .then(({ signature }) => setSignature(signature));
+          .then(({ signature }) => setSignature(signature))
+          .catch(console.error);
       } else {
         setSignature(u8aToHex(
           currentPair.sign(
@@ -125,9 +127,9 @@ function Sign ({ className }: Props): React.ReactElement<Props> {
       <div className='ui--row'>
         <InputAddress
           className='full'
-          help={t('select the account you wish to sign data with')}
+          help={t<string>('select the account you wish to sign data with')}
           isInput={false}
-          label={t('account')}
+          label={t<string>('account')}
           onChange={_onChangeAccount}
           type='account'
         />
@@ -137,8 +139,8 @@ function Sign ({ className }: Props): React.ReactElement<Props> {
           <Input
             autoFocus
             className='full'
-            help={t('The input data to sign. This can be either specified as a hex value (0x-prefix) or as a string.')}
-            label={t('sign the following data')}
+            help={t<string>('The input data to sign. This can be either specified as a hex value (0x-prefix) or as a string.')}
+            label={t<string>('sign the following data')}
             onChange={_onChangeData}
             value={data}
           />
@@ -146,22 +148,22 @@ function Sign ({ className }: Props): React.ReactElement<Props> {
         <div className='ui--row'>
           <Static
             className='medium'
-            help={t('Detection on the input string to determine if it is hex or non-hex.')}
-            label={t('hex input data')}
+            help={t<string>('Detection on the input string to determine if it is hex or non-hex.')}
+            label={t<string>('hex input data')}
             value={
               isHexData
-                ? t('Yes')
-                : t('No')
+                ? t<string>('Yes')
+                : t<string>('No')
             }
           />
         </div>
         <div className='ui--row'>
           <Output
             className='full'
-            help={t('The resulting signature of the input data, as done with the crypto algorithm from the account. (This could be non-deterministic for some types such as sr25519).')}
+            help={t<string>('The resulting signature of the input data, as done with the crypto algorithm from the account. (This could be non-deterministic for some types such as sr25519).')}
             isHidden={signature.length === 0}
             isMonospace
-            label={t('signature of supplied data')}
+            label={t<string>('signature of supplied data')}
             value={signature}
             withCopy
           />
@@ -173,11 +175,11 @@ function Sign ({ className }: Props): React.ReactElement<Props> {
           {isLocked && (
             <div className='unlock-overlay-warning'>
               <div className='unlock-overlay-content'>
-                {t('You need to unlock this account to be able to sign data.')}<br/>
+                {t<string>('You need to unlock this account to be able to sign data.')}<br/>
                 <Button.Group>
                   <Button
                     icon='unlock'
-                    label={t('Unlock account')}
+                    label={t<string>('Unlock account')}
                     onClick={toggleUnlock}
                   />
                 </Button.Group>
@@ -192,8 +194,8 @@ function Sign ({ className }: Props): React.ReactElement<Props> {
           <div className='unlock-overlay-warning'>
             <div className='unlock-overlay-content'>
               {isInjected
-                ? t('This injected account cannot be used to sign data since the extension does not support raw signing.')
-                : t('This external account cannot be used to sign data. Only Limited support is currently available for signing from any non-internal accounts.')}
+                ? t<string>('This injected account cannot be used to sign data since the extension does not support raw signing.')
+                : t<string>('This external account cannot be used to sign data. Only Limited support is currently available for signing from any non-internal accounts.')}
             </div>
           </div>
         </div>
@@ -209,7 +211,7 @@ function Sign ({ className }: Props): React.ReactElement<Props> {
         <Button
           icon='privacy'
           isDisabled={!(isUsable && !isLocked)}
-          label={t('Sign message')}
+          label={t<string>('Sign message')}
           onClick={_onSign}
         />
       </Button.Group>
diff --git a/packages/page-toolbox/src/Unlock.tsx b/packages/page-toolbox/src/Unlock.tsx
index cca3f67fbd..0e197a52e4 100644
--- a/packages/page-toolbox/src/Unlock.tsx
+++ b/packages/page-toolbox/src/Unlock.tsx
@@ -38,7 +38,7 @@ function Unlock ({ onClose, onUnlock, pair }: Props): React.ReactElement<Props>
       try {
         pair.decodePkcs8(password);
       } catch (error) {
-        return setUnlockError(error.message);
+        return setUnlockError((error as Error).message);
       }
 
       onUnlock();
@@ -53,37 +53,37 @@ function Unlock ({ onClose, onUnlock, pair }: Props): React.ReactElement<Props>
   return (
     <Modal
       className='toolbox--Unlock'
-      header={t('Unlock account')}
+      header={t<string>('Unlock account')}
       size='large'
     >
       <Modal.Content>
         <Modal.Columns>
           <Modal.Column>
             <InputAddress
-              help={t('The selected account to be unlocked.')}
+              help={t<string>('The selected account to be unlocked.')}
               isDisabled
-              label={t('account')}
+              label={t<string>('account')}
               value={address}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('This account that will perform the message signing.')}</p>
+            <p>{t<string>('This account that will perform the message signing.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Modal.Columns>
           <Modal.Column>
             <Password
               autoFocus
-              help={t('The account\'s password specified at the creation of this account.')}
+              help={t<string>('The account\'s password specified at the creation of this account.')}
               isError={!!unlockError}
-              label={t('password')}
+              label={t<string>('password')}
               onChange={setPassword}
               onEnter={_onUnlock}
               value={password}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('Unlock the account for signing. Once active the signature will be generated based on the content provided.')}</p>
+            <p>{t<string>('Unlock the account for signing. Once active the signature will be generated based on the content provided.')}</p>
           </Modal.Column>
         </Modal.Columns>
       </Modal.Content>
@@ -91,7 +91,7 @@ function Unlock ({ onClose, onUnlock, pair }: Props): React.ReactElement<Props>
         <Button
           icon='unlock'
           isPrimary
-          label={t('Unlock')}
+          label={t<string>('Unlock')}
           onClick={_onUnlock}
         />
       </Modal.Actions>
diff --git a/packages/page-toolbox/src/Verify.tsx b/packages/page-toolbox/src/Verify.tsx
index 26600e00d4..edb0247097 100644
--- a/packages/page-toolbox/src/Verify.tsx
+++ b/packages/page-toolbox/src/Verify.tsx
@@ -5,17 +5,21 @@
 import { KeypairType } from '@polkadot/util-crypto/types';
 
 import React, { useCallback, useEffect, useState } from 'react';
+import styled from 'styled-components';
 import { Dropdown, Icon, Input, InputAddress, Static } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 import uiSettings from '@polkadot/ui-settings';
 import { isHex } from '@polkadot/util';
 import { naclVerify, schnorrkelVerify } from '@polkadot/util-crypto';
-import styled from 'styled-components';
 
 import { useTranslation } from './translate';
 
 type CryptoTypes = KeypairType | 'unknown';
 
+interface Props {
+  className?: string;
+}
+
 const AlignedIcon = styled(Icon)`
   &&&::before {
     position: relative;
@@ -33,13 +37,13 @@ const AlignedIcon = styled(Icon)`
   }
 `;
 
-function Verify (): React.ReactElement<{}> {
+function Verify ({ className = '' }: Props): 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 [{ 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[]));
+  const [cryptoOptions] = useState([{ text: t<string>('Crypto not detected'), value: 'unknown' }].concat(uiSettings.availableCryptos as any[]));
 
   useEffect((): void => {
     let cryptoType: CryptoTypes = 'unknown';
@@ -104,14 +108,14 @@ function Verify (): React.ReactElement<{}> {
   );
 
   return (
-    <div className='toolbox--Verify'>
+    <div className={`toolbox--Verify ${className}`}>
       <div className='ui--row'>
         <InputAddress
           className='full'
-          help={t('The account that signed the input')}
+          help={t<string>('The account that signed the input')}
           isError={!isValidPk}
           isInput
-          label={t('verify using address')}
+          label={t<string>('verify using address')}
           onChange={_onChangeAddress}
         />
       </div>
@@ -119,17 +123,14 @@ function Verify (): React.ReactElement<{}> {
         <Input
           autoFocus
           className='full'
-          help={t('The data that was signed. This is used in combination with the signature for the verification. It can either be hex or a string.')}
-          label={t('using the following data')}
+          help={t<string>('The data that was signed. This is used in combination with the signature for the verification. It can either be hex or a string.')}
+          label={t<string>('using the following data')}
           onChange={_onChangeData}
           value={data}
         />
       </div>
       <div className='ui--row'>
-        <div
-          className='ui--AlignedIconContainer'
-          style={{ position: 'absolute', zIndex: 1 }}
-        >
+        <div className='ui--AlignedIconContainer'>
           <AlignedIcon
             color={isValid ? 'green' : (isValidSignature ? 'red' : undefined)}
             name={isValid ? 'check circle' : (isValidSignature ? 'exclamation circle' : 'help circle')}
@@ -138,9 +139,9 @@ function Verify (): React.ReactElement<{}> {
         </div>
         <Input
           className='full'
-          help={t('The signature as by the account being checked, supplied as a hex-formatted string.')}
+          help={t<string>('The signature as by the account being checked, supplied as a hex-formatted string.')}
           isError={!isValidSignature}
-          label={t('the supplied signature')}
+          label={t<string>('the supplied signature')}
           onChange={_onChangeSignature}
           value={signature}
         />
@@ -148,19 +149,19 @@ function Verify (): React.ReactElement<{}> {
       <div className='ui--row'>
         <Dropdown
           defaultValue={cryptoType}
-          help={t('Cryptography used to create this signature. It is auto-detected on valid signatures.')}
+          help={t<string>('Cryptography used to create this signature. It is auto-detected on valid signatures.')}
           isDisabled
-          label={t('signature crypto type')}
+          label={t<string>('signature crypto type')}
           options={cryptoOptions}
         />
         <Static
           className='medium'
-          help={t('Detection on the input string to determine if it is hex or non-hex.')}
-          label={t('hex input data')}
+          help={t<string>('Detection on the input string to determine if it is hex or non-hex.')}
+          label={t<string>('hex input data')}
           value={
             isHexData
-              ? t('Yes')
-              : t('No')
+              ? t<string>('Yes')
+              : t<string>('No')
           }
         />
       </div>
@@ -168,4 +169,9 @@ function Verify (): React.ReactElement<{}> {
   );
 }
 
-export default React.memo(Verify);
+export default React.memo(styled(Verify)`
+  .ui--AlignedIconContainer {
+    position: absolute;
+    z-index: 1;
+  }
+`);
diff --git a/packages/page-toolbox/src/index.tsx b/packages/page-toolbox/src/index.tsx
index 078ffc5268..9a5aa779c6 100644
--- a/packages/page-toolbox/src/index.tsx
+++ b/packages/page-toolbox/src/index.tsx
@@ -22,19 +22,19 @@ function ToolboxApp ({ basePath }: Props): React.ReactElement<Props> {
     {
       isRoot: true,
       name: 'rpc',
-      text: t('RPC calls')
+      text: t<string>('RPC calls')
     },
     {
       name: 'hash',
-      text: t('Hash data')
+      text: t<string>('Hash data')
     },
     {
       name: 'sign',
-      text: t('Sign message')
+      text: t<string>('Sign message')
     },
     {
       name: 'verify',
-      text: t('Verify signature')
+      text: t<string>('Verify signature')
     }
   ], [t]);
 
diff --git a/packages/page-treasury/src/Overview/Proposal.tsx b/packages/page-treasury/src/Overview/Proposal.tsx
index 1f3667624f..e3acaec2e8 100644
--- a/packages/page-treasury/src/Overview/Proposal.tsx
+++ b/packages/page-treasury/src/Overview/Proposal.tsx
@@ -21,7 +21,7 @@ interface Props {
   withSend: boolean;
 }
 
-function ProposalDisplay ({ className, isMember, members, proposal: { council, id, proposal }, withSend }: Props): React.ReactElement<Props> | null {
+function ProposalDisplay ({ className = '', isMember, members, proposal: { council, id, proposal }, withSend }: Props): React.ReactElement<Props> | null {
   return (
     <tr className={className}>
       <td className='number'>
diff --git a/packages/page-treasury/src/Overview/ProposalCreate.tsx b/packages/page-treasury/src/Overview/ProposalCreate.tsx
index 545b96ccd4..c72ccbf67d 100644
--- a/packages/page-treasury/src/Overview/ProposalCreate.tsx
+++ b/packages/page-treasury/src/Overview/ProposalCreate.tsx
@@ -31,61 +31,61 @@ function Propose ({ className }: Props): React.ReactElement<Props> | null {
       {isOpen && (
         <Modal
           className={className}
-          header={t('Submit treasury proposal')}
+          header={t<string>('Submit treasury proposal')}
           size='large'
         >
           <Modal.Content>
             <Modal.Columns>
               <Modal.Column>
                 <InputAddress
-                  help={t('Select the account you wish to submit the proposal from.')}
-                  label={t('submit with account')}
+                  help={t<string>('Select the account you wish to submit the proposal from.')}
+                  label={t<string>('submit with account')}
                   onChange={setAccountId}
                   type='account'
                   withLabel
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('This account will make the proposal and be responsible for the bond.')}</p>
+                <p>{t<string>('This account will make the proposal and be responsible for the bond.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
               <Modal.Column>
                 <InputAddress
-                  help={t('The account to which the proposed balance will be transferred if approved')}
-                  label={t('beneficiary')}
+                  help={t<string>('The account to which the proposed balance will be transferred if approved')}
+                  label={t<string>('beneficiary')}
                   onChange={setBeneficiary}
                   type='allPlus'
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The beneficiary will receive the full amount if the proposal passes.')}</p>
+                <p>{t<string>('The beneficiary will receive the full amount if the proposal passes.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
               <Modal.Column>
                 <InputBalance
-                  help={t('The amount that will be allocated from the treasury pot')}
+                  help={t<string>('The amount that will be allocated from the treasury pot')}
                   isError={!hasValue}
-                  label={t('value')}
+                  label={t<string>('value')}
                   onChange={setValue}
                 />
                 <Static
-                  help={t('The on-chain percentage for the treasury')}
-                  label={t('proposal bond')}
+                  help={t<string>('The on-chain percentage for the treasury')}
+                  label={t<string>('proposal bond')}
                 >
                   {bondPercentage}
                 </Static>
                 <InputBalance
                   defaultValue={api.consts.treasury.proposalBondMinimum.toString()}
-                  help={t('The minimum amount that will be bonded')}
+                  help={t<string>('The minimum amount that will be bonded')}
                   isDisabled
-                  label={t('minimum bond')}
+                  label={t<string>('minimum bond')}
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The value is the amount that is being asked for and that will be allocated to the beneficiary if the proposal is approved.')}</p>
-                <p>{t('Of the beneficiary amount, at least {{bondPercentage}} would need to be put up as collateral. The maximum of this and the minimum bond will be used to secure the proposal, refundable if it passes.', { replace: { bondPercentage } })}</p>
+                <p>{t<string>('The value is the amount that is being asked for and that will be allocated to the beneficiary if the proposal is approved.')}</p>
+                <p>{t<string>('Of the beneficiary amount, at least {{bondPercentage}} would need to be put up as collateral. The maximum of this and the minimum bond will be used to secure the proposal, refundable if it passes.', { replace: { bondPercentage } })}</p>
               </Modal.Column>
             </Modal.Columns>
           </Modal.Content>
@@ -95,7 +95,7 @@ function Propose ({ className }: Props): React.ReactElement<Props> | null {
               icon='add'
               isDisabled={!accountId || !hasValue}
               isPrimary
-              label={t('Submit proposal')}
+              label={t<string>('Submit proposal')}
               onStart={toggleOpen}
               params={[value, beneficiary]}
               tx='treasury.proposeSpend'
@@ -105,7 +105,7 @@ function Propose ({ className }: Props): React.ReactElement<Props> | null {
       )}
       <Button
         icon='plus'
-        label={t('Submit proposal')}
+        label={t<string>('Submit proposal')}
         onClick={toggleOpen}
       />
     </>
diff --git a/packages/page-treasury/src/Overview/Proposals.tsx b/packages/page-treasury/src/Overview/Proposals.tsx
index 4c4e235063..7fd50e63f3 100644
--- a/packages/page-treasury/src/Overview/Proposals.tsx
+++ b/packages/page-treasury/src/Overview/Proposals.tsx
@@ -19,7 +19,7 @@ interface Props {
   proposals?: DeriveTreasuryProposal[];
 }
 
-function ProposalsBase ({ className, isApprovals, isMember, members, proposals }: Props): React.ReactElement<Props> {
+function ProposalsBase ({ className = '', isApprovals, isMember, members, proposals }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const history = useHistory();
 
@@ -31,7 +31,7 @@ function ProposalsBase ({ className, isApprovals, isMember, members, proposals }
   );
 
   const header = useMemo(() => [
-    [isApprovals ? t('Approved') : t('Proposals'), 'start', 2],
+    [isApprovals ? t<string>('Approved') : t<string>('Proposals'), 'start', 2],
     [t('beneficiary'), 'address'],
     [t('payment')],
     [t('bond')],
@@ -41,7 +41,7 @@ function ProposalsBase ({ className, isApprovals, isMember, members, proposals }
   return (
     <Table
       className={className}
-      empty={proposals && (isApprovals ? t('No approved proposals') : t('No pending proposals'))}
+      empty={proposals && (isApprovals ? t<string>('No approved proposals') : t<string>('No pending proposals'))}
       header={header}
     >
       {proposals?.map((proposal): React.ReactNode => (
diff --git a/packages/page-treasury/src/Overview/Submission.tsx b/packages/page-treasury/src/Overview/Submission.tsx
index 95682ce5a6..0de32c5257 100644
--- a/packages/page-treasury/src/Overview/Submission.tsx
+++ b/packages/page-treasury/src/Overview/Submission.tsx
@@ -22,7 +22,7 @@ function Submission ({ councilProposals, id, isDisabled, members }: Props): Reac
   const { t } = useTranslation();
   const { api } = useApi();
   const councilThreshold = useCall<number>((api.query.electionsPhragmen || api.query.elections).members, [], {
-    transform: (value: any[]): number =>
+    transform: (value: unknown[]): number =>
       Math.ceil(value.length * 0.6)
   });
   const [isOpen, toggleOpen] = useToggle();
@@ -30,15 +30,15 @@ function Submission ({ councilProposals, id, isDisabled, members }: Props): Reac
   const [councilType, setCouncilType] = useState('reject');
   const [hasProposals, setHasProposals] = useState(true);
   const councilTypeOpt = useMemo(() => [
-    { text: t('Acceptance proposal to council'), value: 'accept' },
-    { text: t('Rejection proposal to council'), value: 'reject' }
+    { text: t<string>('Acceptance proposal to council'), value: 'accept' },
+    { text: t<string>('Rejection proposal to council'), value: 'reject' }
   ], [t]);
 
   useEffect((): void => {
     setHasProposals(
       !!councilProposals
-        .map(({ votes }): number => votes ? votes?.index.toNumber() : -1)
-        .filter((index): boolean => index !== -1)
+        .map(({ votes }): number => votes ? votes.index.toNumber() : -1)
+        .filter((index) => index !== -1)
         .length
     );
   }, [councilProposals]);
@@ -51,7 +51,7 @@ function Submission ({ councilProposals, id, isDisabled, members }: Props): Reac
     <>
       {isOpen && (
         <Modal
-          header={t('Send to council')}
+          header={t<string>('Send to council')}
           size='large'
         >
           <Modal.Content>
@@ -59,29 +59,29 @@ function Submission ({ councilProposals, id, isDisabled, members }: Props): Reac
               <Modal.Column>
                 <InputAddress
                   filter={members}
-                  help={t('Select the council account you wish to use to make the proposal.')}
-                  label={t('submit with council account')}
+                  help={t<string>('Select the council account you wish to use to make the proposal.')}
+                  label={t<string>('submit with council account')}
                   onChange={setAccountId}
                   type='account'
                   withLabel
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The council member that is proposing this, submission equates to an "aye" vote.')}</p>
+                <p>{t<string>('The council member that is proposing this, submission equates to an "aye" vote.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
               <Modal.Column>
                 <Dropdown
-                  help={t('The type of council proposal to submit.')}
-                  label={t('council proposal type')}
+                  help={t<string>('The type of council proposal to submit.')}
+                  label={t<string>('council proposal type')}
                   onChange={setCouncilType}
                   options={councilTypeOpt}
                   value={councilType}
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('Proposal can either be to approve or reject this spend. One approved, the change is applied by either removing the proposal or scheduling payout.')}</p>
+                <p>{t<string>('Proposal can either be to approve or reject this spend. One approved, the change is applied by either removing the proposal or scheduling payout.')}</p>
               </Modal.Column>
             </Modal.Columns>
           </Modal.Content>
@@ -91,7 +91,7 @@ function Submission ({ councilProposals, id, isDisabled, members }: Props): Reac
               icon='check'
               isDisabled={!accountId || !councilThreshold}
               isPrimary
-              label={t('Send to council')}
+              label={t<string>('Send to council')}
               onStart={toggleOpen}
               params={[
                 councilThreshold,
@@ -107,7 +107,7 @@ function Submission ({ councilProposals, id, isDisabled, members }: Props): Reac
       <Button
         icon='step forward'
         isDisabled={isDisabled}
-        label={t('To council')}
+        label={t<string>('To council')}
         onClick={toggleOpen}
       />
     </>
diff --git a/packages/page-treasury/src/Overview/Summary.tsx b/packages/page-treasury/src/Overview/Summary.tsx
index 66da8695e8..8e3a64b3d1 100644
--- a/packages/page-treasury/src/Overview/Summary.tsx
+++ b/packages/page-treasury/src/Overview/Summary.tsx
@@ -36,21 +36,21 @@ function Summary ({ approvalCount, proposalCount }: Props): React.ReactElement<P
   return (
     <SummaryBox>
       <section>
-        <CardSummary label={t('proposals')}>
+        <CardSummary label={t<string>('proposals')}>
           {formatNumber(proposalCount)}
         </CardSummary>
-        <CardSummary label={t('total')}>
+        <CardSummary label={t<string>('total')}>
           {formatNumber(totalProposals || 0)}
         </CardSummary>
       </section>
       <section>
-        <CardSummary label={t('approved')}>
+        <CardSummary label={t<string>('approved')}>
           {formatNumber(approvalCount)}
         </CardSummary>
       </section>
       <section>
         {value && (
-          <CardSummary label={t('available')}>
+          <CardSummary label={t<string>('available')}>
             <FormatBalance
               value={value}
               withSi
@@ -61,7 +61,7 @@ function Summary ({ approvalCount, proposalCount }: Props): React.ReactElement<P
       {bestNumber && spendPeriod?.gtn(0) && (
         <section>
           <CardSummary
-            label={t('spend period')}
+            label={t<string>('spend period')}
             progress={{
               total: spendPeriod,
               value: bestNumber.mod(spendPeriod),
diff --git a/packages/page-treasury/src/Overview/Tip.tsx b/packages/page-treasury/src/Overview/Tip.tsx
index 5bccc22a8d..686668979e 100644
--- a/packages/page-treasury/src/Overview/Tip.tsx
+++ b/packages/page-treasury/src/Overview/Tip.tsx
@@ -21,7 +21,7 @@ interface Props {
   members: string[];
 }
 
-function Tip ({ className, hash, isMember, members }: Props): React.ReactElement<Props> | null {
+function Tip ({ className = '', hash, isMember, members }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const tip = useCall<OpenTip | null>(api.query.treasury.tips, [hash], {
@@ -53,7 +53,7 @@ function Tip ({ className, hash, isMember, members }: Props): React.ReactElement
       <TipReason hash={reason} />
       <td className='start all'>
         {tips.length !== 0 && (
-          <Expander summary={t('Endorsements ({{count}})', { replace: { count: tips.length } })}>
+          <Expander summary={t<string>('Endorsements ({{count}})', { replace: { count: tips.length } })}>
             {tips.map(([tipper, balance]) => (
               <AddressMini
                 balance={balance}
diff --git a/packages/page-treasury/src/Overview/TipCreate.tsx b/packages/page-treasury/src/Overview/TipCreate.tsx
index 231478245f..9366b3092a 100644
--- a/packages/page-treasury/src/Overview/TipCreate.tsx
+++ b/packages/page-treasury/src/Overview/TipCreate.tsx
@@ -40,68 +40,68 @@ function TipCreate ({ members, refresh }: Props): React.ReactElement<Props> {
     <>
       <Button
         icon='plus'
-        label={t('Tip')}
+        label={t<string>('Tip')}
         onClick={toggleOpen}
       />
       {isOpen && (
         <Modal
-          header={t('Submit tip request')}
+          header={t<string>('Submit tip request')}
           size='large'
         >
           <Modal.Content>
             <Modal.Columns>
               <Modal.Column>
                 <InputAddress
-                  help={t('Select the account you wish to submit the tip from.')}
-                  label={t('submit with account')}
+                  help={t<string>('Select the account you wish to submit the tip from.')}
+                  label={t<string>('submit with account')}
                   onChange={setAccountId}
                   type='account'
                   withLabel
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('Use this account to request the tip from. This can be a normal or council account.')}</p>
+                <p>{t<string>('Use this account to request the tip from. This can be a normal or council account.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
               <Modal.Column>
                 <InputAddress
-                  help={t('The account to which the tip will be transferred if approved')}
-                  label={t('beneficiary')}
+                  help={t<string>('The account to which the tip will be transferred if approved')}
+                  label={t<string>('beneficiary')}
                   onChange={setBeneficiary}
                   type='allPlus'
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The beneficiary will received the tip as approved by council members.')}</p>
+                <p>{t<string>('The beneficiary will received the tip as approved by council members.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
               <Modal.Column>
                 <Input
                   autoFocus
-                  help={t('The reason why this tip should be paid.')}
+                  help={t<string>('The reason why this tip should be paid.')}
                   isError={!hasReason}
-                  label={t('tip reason')}
+                  label={t<string>('tip reason')}
                   onChange={setReason}
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('A reason (to be stored-on-chain) as to why the recipient deserves a tip payout.')}</p>
+                <p>{t<string>('A reason (to be stored-on-chain) as to why the recipient deserves a tip payout.')}</p>
               </Modal.Column>
             </Modal.Columns>
             {isMember && (
               <Modal.Columns>
                 <Modal.Column>
                   <InputBalance
-                    help={t('The suggested value for this tip')}
+                    help={t<string>('The suggested value for this tip')}
                     isError={!hasValue}
-                    label={t('tip value')}
+                    label={t<string>('tip value')}
                     onChange={setValue}
                   />
                 </Modal.Column>
                 <Modal.Column>
-                  <p>{t('As a council member, you can suggest an initial value for the tip, each other council member can suggest their own.')}</p>
+                  <p>{t<string>('As a council member, you can suggest an initial value for the tip, each other council member can suggest their own.')}</p>
                 </Modal.Column>
               </Modal.Columns>
             )}
@@ -112,7 +112,7 @@ function TipCreate ({ members, refresh }: Props): React.ReactElement<Props> {
               icon='add'
               isDisabled={!accountId || (isMember ? !hasValue : false) || !hasReason}
               isPrimary
-              label={t('Propose tip')}
+              label={t<string>('Propose tip')}
               onStart={toggleOpen}
               onSuccess={refresh}
               params={
diff --git a/packages/page-treasury/src/Overview/TipEndorse.tsx b/packages/page-treasury/src/Overview/TipEndorse.tsx
index 777bde2542..c84a248ee4 100644
--- a/packages/page-treasury/src/Overview/TipEndorse.tsx
+++ b/packages/page-treasury/src/Overview/TipEndorse.tsx
@@ -27,12 +27,12 @@ function TipEndorse ({ hash, isMember, members }: Props): React.ReactElement<Pro
       <Button
         icon='check'
         isDisabled={!isMember}
-        label={t('Endorse')}
+        label={t<string>('Endorse')}
         onClick={toggleOpen}
       />
       {isOpen && (
         <Modal
-          header={t('Submit tip endorsement')}
+          header={t<string>('Submit tip endorsement')}
           size='large'
         >
           <Modal.Content>
@@ -40,28 +40,28 @@ function TipEndorse ({ hash, isMember, members }: Props): React.ReactElement<Pro
               <Modal.Column>
                 <InputAddress
                   filter={members}
-                  help={t('Select the account you wish to submit the tip from.')}
-                  label={t('submit with account')}
+                  help={t<string>('Select the account you wish to submit the tip from.')}
+                  label={t<string>('submit with account')}
                   onChange={setAccountId}
                   type='account'
                   withLabel
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('Your endorsement will be applied for this account.')}</p>
+                <p>{t<string>('Your endorsement will be applied for this account.')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
               <Modal.Column>
                 <InputBalance
-                  help={t('The tip amount that should be allocated')}
+                  help={t<string>('The tip amount that should be allocated')}
                   isError={!hasValue}
-                  label={t('value')}
+                  label={t<string>('value')}
                   onChange={setValue}
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('Allocate a suggested tip amount. With enough endorsements, the suggested values are averaged and sent to the beneficiary.')}</p>
+                <p>{t<string>('Allocate a suggested tip amount. With enough endorsements, the suggested values are averaged and sent to the beneficiary.')}</p>
               </Modal.Column>
             </Modal.Columns>
           </Modal.Content>
@@ -71,7 +71,7 @@ function TipEndorse ({ hash, isMember, members }: Props): React.ReactElement<Pro
               icon='add'
               isDisabled={!accountId || !hasValue }
               isPrimary
-              label={t('Submit tip')}
+              label={t<string>('Submit tip')}
               onStart={toggleOpen}
               params={[hash, value]}
               tx='treasury.tip'
diff --git a/packages/page-treasury/src/Overview/Tips.tsx b/packages/page-treasury/src/Overview/Tips.tsx
index c767f469ad..620d34a7f6 100644
--- a/packages/page-treasury/src/Overview/Tips.tsx
+++ b/packages/page-treasury/src/Overview/Tips.tsx
@@ -15,7 +15,7 @@ interface Props {
   members: string[];
 }
 
-function Tips ({ className, hashes, isMember, members }: Props): React.ReactElement<Props> {
+function Tips ({ className = '', hashes, isMember, members }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const header = useMemo(() => [
@@ -30,7 +30,7 @@ function Tips ({ className, hashes, isMember, members }: Props): React.ReactElem
   return (
     <Table
       className={className}
-      empty={hashes && t('No open tips')}
+      empty={hashes && t<string>('No open tips')}
       header={header}
     >
       {hashes?.map((hash): React.ReactNode => (
diff --git a/packages/page-treasury/src/Overview/Voting.tsx b/packages/page-treasury/src/Overview/Voting.tsx
index c4cb59c3aa..40a1e87266 100644
--- a/packages/page-treasury/src/Overview/Voting.tsx
+++ b/packages/page-treasury/src/Overview/Voting.tsx
@@ -43,7 +43,7 @@ function Voting ({ councilProposals, isDisabled, members }: Props): React.ReactE
     const available = councilProposals
       .filter(({ votes }) => bestNumber && votes?.end.gt(bestNumber))
       .map(({ proposal: { methodName, sectionName }, votes }): Option => ({
-        text: `Council #${votes?.index.toNumber()}: ${sectionName}.${methodName} `,
+        text: `Council #${votes?.index.toNumber() || '-'}: ${sectionName}.${methodName} `,
         value: votes ? votes?.index.toNumber() : -1
       }))
       .filter(({ value }) => value !== -1);
@@ -79,7 +79,7 @@ function Voting ({ councilProposals, isDisabled, members }: Props): React.ReactE
     <>
       {isOpen && (
         <Modal
-          header={t('Vote on proposal')}
+          header={t<string>('Vote on proposal')}
           size='small'
         >
           <Modal.Content>
@@ -94,21 +94,21 @@ function Voting ({ councilProposals, isDisabled, members }: Props): React.ReactE
             <Modal.Columns>
               <Modal.Column>
                 <Dropdown
-                  help={t('The council proposal to make the vote on')}
-                  label={t('council proposal')}
+                  help={t<string>('The council proposal to make the vote on')}
+                  label={t<string>('council proposal')}
                   onChange={_onChangeProposal}
                   options={councilOpts}
                   value={councilOptId}
                 />
                 <Input
-                  help={t('The hash for the proposal this vote applies to')}
+                  help={t<string>('The hash for the proposal this vote applies to')}
                   isDisabled
-                  label={t('proposal hash')}
-                  value={councilHash}
+                  label={t<string>('proposal hash')}
+                  value={councilHash?.toString()}
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('Multiple council proposals could exist, both approval and rejection. Apply your vote to the correct council proposal (also available on council motions page)')}</p>
+                <p>{t<string>('Multiple council proposals could exist, both approval and rejection. Apply your vote to the correct council proposal (also available on council motions page)')}</p>
               </Modal.Column>
             </Modal.Columns>
             <Modal.Columns>
@@ -133,7 +133,7 @@ function Voting ({ councilProposals, isDisabled, members }: Props): React.ReactE
       <Button
         icon='check'
         isDisabled={isDisabled}
-        label={t('Vote')}
+        label={t<string>('Vote')}
         onClick={toggleOpen}
       />
     </>
diff --git a/packages/page-treasury/src/Overview/index.tsx b/packages/page-treasury/src/Overview/index.tsx
index 562936356b..2af5e94df8 100644
--- a/packages/page-treasury/src/Overview/index.tsx
+++ b/packages/page-treasury/src/Overview/index.tsx
@@ -30,7 +30,7 @@ function Overview ({ className }: Props): React.ReactElement<Props> {
         mountedRef.current && setHashes(
           keys.map((key) => key.args[0].toHex())
         )
-      );
+      ).catch(console.error);
     }
   }, [api, hashTrigger, mountedRef]);
 
diff --git a/packages/page-treasury/src/index.tsx b/packages/page-treasury/src/index.tsx
index 0197f1aa15..65db8b2858 100644
--- a/packages/page-treasury/src/index.tsx
+++ b/packages/page-treasury/src/index.tsx
@@ -23,13 +23,13 @@ function TreasuryApp ({ basePath }: Props): React.ReactElement<Props> {
     {
       isRoot: true,
       name: 'overview',
-      text: t('Treasury overview')
+      text: t<string>('Treasury overview')
     }
   ], [t]);
 
   return (
     <main className='treasury--App'>
-      <HelpOverlay md={basicMd} />
+      <HelpOverlay md={basicMd as string} />
       <header>
         <Tabs
           basePath={basePath}
diff --git a/packages/react-api/package.json b/packages/react-api/package.json
index 91e4ca245c..d48d7a177b 100644
--- a/packages/react-api/package.json
+++ b/packages/react-api/package.json
@@ -31,8 +31,8 @@
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-reactive#readme",
   "dependencies": {
     "@babel/runtime": "^7.9.6",
-    "@polkadot/api": "^1.15.1",
-    "@polkadot/extension-dapp": "^0.26.0-beta.2",
+    "@polkadot/api": "^1.16.0-beta.2",
+    "@polkadot/extension-dapp": "^0.26.0-beta.3",
     "rxjs-compat": "^6.5.5"
   }
 }
diff --git a/packages/react-api/src/Api.tsx b/packages/react-api/src/Api.tsx
index 8b1b6f9f15..f1cc2713e0 100644
--- a/packages/react-api/src/Api.tsx
+++ b/packages/react-api/src/Api.tsx
@@ -74,7 +74,7 @@ async function retrieve (api: ApiPromise): Promise<ChainData> {
         address,
         meta: {
           ...meta,
-          name: `${meta.name} (${meta.source === 'polkadot-js' ? 'extension' : meta.source})`
+          name: `${meta.name || 'unknown'} (${meta.source === 'polkadot-js' ? 'extension' : meta.source})`
         }
       })))
       .catch((error): InjectedAccountExt[] => {
@@ -103,7 +103,7 @@ async function loadOnReady (api: ApiPromise): Promise<ApiState> {
   const tokenDecimals = properties.tokenDecimals.unwrapOr(DEFAULT_DECIMALS).toNumber();
   const isDevelopment = systemChainType.isDevelopment || systemChainType.isLocal || isTestChain(systemChain);
 
-  console.log(`chain: ${systemChain} (${systemChainType}), ${JSON.stringify(properties)}`);
+  console.log(`chain: ${systemChain} (${systemChainType.toString()}), ${JSON.stringify(properties)}`);
 
   // explicitly override the ss58Format as specified
   registry.setChainProperties(registry.createType('ChainProperties', { ...properties, ss58Format }));
diff --git a/packages/react-api/src/hoc/api.tsx b/packages/react-api/src/hoc/api.tsx
index 9179597084..0284f2d0f4 100644
--- a/packages/react-api/src/hoc/api.tsx
+++ b/packages/react-api/src/hoc/api.tsx
@@ -25,6 +25,7 @@ export default function withApi <P extends ApiProps> (Inner: React.ComponentType
                 {...defaultProps}
                 {...(apiProps as any)}
                 {...this.props}
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                 ref={this.component}
               />
             );
diff --git a/packages/react-api/src/hoc/call.tsx b/packages/react-api/src/hoc/call.tsx
index e42b7c944c..32fc78afa4 100644
--- a/packages/react-api/src/hoc/call.tsx
+++ b/packages/react-api/src/hoc/call.tsx
@@ -2,6 +2,14 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+// SInce this file is deemed deprecated (and awaiting removal), we just don't care
+
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
 import { ApiProps, CallState as State, SubtractProps } from '../types';
 import { Options } from './types';
 
@@ -221,10 +229,10 @@ export default function withCall<P extends ApiProps> (endpoint: string, {
         } catch (error) {
           // don't flood the console with the same errors each time, just do it once, then
           // ignore it going forward
-          if (!errorred[error.message]) {
+          if (!errorred[(error as Error).message]) {
             console.warn(endpoint, '::', error);
 
-            errorred[error.message] = true;
+            errorred[(error as Error).message] = true;
           }
         }
 
@@ -281,7 +289,7 @@ export default function withCall<P extends ApiProps> (endpoint: string, {
             callUpdatedAt: Date.now()
           });
         } catch (error) {
-          // console.warn(endpoint, '::', error.message);
+          // console.warn(endpoint, '::', (error as Error).message);
         }
       }
 
diff --git a/packages/react-api/src/hoc/callDiv.tsx b/packages/react-api/src/hoc/callDiv.tsx
index a91afababc..8be6241cdb 100644
--- a/packages/react-api/src/hoc/callDiv.tsx
+++ b/packages/react-api/src/hoc/callDiv.tsx
@@ -16,12 +16,12 @@ interface Props<T> extends BaseProps<T> {
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export default function withCallDiv<T> (endpoint: string, options: Options = {}) {
   return (render: (value?: T) => React.ReactNode, defaultProps: DefaultProps = {}): React.ComponentType<any> => {
-    function Inner ({ callResult, callUpdated, children, className = defaultProps.className, label = '', style }: any): React.ReactElement<Props<T>> {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    function Inner ({ callResult, callUpdated, children, className = defaultProps.className, label = '' }: any): React.ReactElement<Props<T>> {
       return (
         <div
           {...defaultProps}
-          className={[className, callUpdated ? 'rx--updated' : undefined].join(' ')}
-          style={style}
+          className={[className || '', callUpdated ? 'rx--updated' : undefined].join(' ')}
         >
           {label}{render(callResult)}{children}
         </div>
diff --git a/packages/react-api/src/hoc/observable.tsx b/packages/react-api/src/hoc/observable.tsx
index 5bcac45867..c37f4938d7 100644
--- a/packages/react-api/src/hoc/observable.tsx
+++ b/packages/react-api/src/hoc/observable.tsx
@@ -15,7 +15,7 @@ import echoTransform from '../transform/echo';
 import { intervalObservable, isEqual, triggerChange } from '../util';
 
 interface State extends CallState {
-  subscriptions: any[]; // FIXME subscriptions
+  subscriptions: { unsubscribe: () => void }[];
 }
 
 export default function withObservable<T, P> (observable: Observable<P>, { callOnResult, propName = 'value', transform = echoTransform }: Options = {}): HOC {
@@ -55,13 +55,14 @@ export default function withObservable<T, P> (observable: Observable<P>, { callO
         );
       }
 
-      private triggerUpdate = (props: any, callResult?: T): void => {
+      private triggerUpdate = (props: P, callResult?: T): void => {
         try {
           if (!this.isActive || isEqual(callResult, this.state.callResult)) {
             return;
           }
 
-          triggerChange(callResult, callOnResult, props.callOnResult || defaultProps.callOnResult);
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          triggerChange(callResult, callOnResult, (props as any).callOnResult || defaultProps.callOnResult);
 
           this.setState({
             callResult,
@@ -75,6 +76,7 @@ export default function withObservable<T, P> (observable: Observable<P>, { callO
 
       public render (): React.ReactNode {
         const { children } = this.props;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         const { callResult, callUpdated, callUpdatedAt } = this.state;
         const _props = {
           ...defaultProps,
diff --git a/packages/react-api/src/types.ts b/packages/react-api/src/types.ts
index 50aa12fbb5..c7a7b8ef82 100644
--- a/packages/react-api/src/types.ts
+++ b/packages/react-api/src/types.ts
@@ -13,7 +13,6 @@ export type SubtractProps<T, K> = OmitProps<T, keyof K>;
 
 export interface BareProps {
   className?: string;
-  style?: Record<string, any>;
 }
 
 export interface ApiState {
@@ -47,7 +46,7 @@ export interface ChangeProps {
 }
 
 export interface CallState {
-  callResult?: any;
+  callResult?: unknown;
   callUpdated?: boolean;
   callUpdatedAt?: number;
 }
diff --git a/packages/react-api/src/util/isEqual.ts b/packages/react-api/src/util/isEqual.ts
index 3765bf3016..0e9f9411fe 100644
--- a/packages/react-api/src/util/isEqual.ts
+++ b/packages/react-api/src/util/isEqual.ts
@@ -2,19 +2,17 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-function flatten (key: string | null, value: any): any {
+function flatten (key: string | null, value?: unknown): unknown {
   if (!value) {
     return value;
   }
 
-  if (value.$$typeof) {
+  if ((value as Record<string, unknown>).$$typeof) {
     return '';
   }
 
   if (Array.isArray(value)) {
-    return value.map((item): any =>
-      flatten(null, item)
-    );
+    return value.map((item) => flatten(null, item));
   }
 
   return value;
diff --git a/packages/react-api/src/util/triggerChange.ts b/packages/react-api/src/util/triggerChange.ts
index c1b76966b5..0f371c4e74 100644
--- a/packages/react-api/src/util/triggerChange.ts
+++ b/packages/react-api/src/util/triggerChange.ts
@@ -6,7 +6,7 @@ import { OnChangeCb } from '../types';
 
 import { isFunction, isObservable } from '@polkadot/util';
 
-export default function triggerChange (value?: any, ...callOnResult: (OnChangeCb | undefined)[]): void {
+export default function triggerChange (value?: unknown, ...callOnResult: (OnChangeCb | undefined)[]): void {
   if (!callOnResult || !callOnResult.length) {
     return;
   }
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index cf472c8990..66de292fbc 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -11,12 +11,12 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.9.6",
-    "@polkadot/keyring": "^2.10.1",
+    "@polkadot/keyring": "^2.11.0-beta.2",
     "@polkadot/react-api": "0.43.0-beta.2",
-    "@polkadot/react-identicon": "^0.54.0-beta.1",
+    "@polkadot/react-identicon": "^0.54.0-beta.2",
     "@polkadot/react-query": "0.43.0-beta.2",
-    "@polkadot/ui-keyring": "^0.54.0-beta.1",
-    "@polkadot/ui-settings": "^0.54.0-beta.1",
+    "@polkadot/ui-keyring": "^0.54.0-beta.2",
+    "@polkadot/ui-settings": "^0.54.0-beta.2",
     "chart.js": "^2.9.3",
     "codeflask": "^1.4.1",
     "i18next": "^19.4.4",
@@ -27,7 +27,7 @@
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.13.1",
     "react-dropzone": "^11.0.1",
-    "react-i18next": "^11.4.0",
+    "react-i18next": "^11.5.0",
     "react-is": "^16.13.1",
     "react-markdown": "^4.3.1",
     "react-router": "^5.2.0",
@@ -37,5 +37,8 @@
     "semantic-ui-react": "^0.88.2",
     "store": "^2.0.12",
     "styled-theming": "^2.2.0"
+  },
+  "devDependencies": {
+    "@types/codeflask": "^1.4.1"
   }
 }
diff --git a/packages/react-components/src/AccountIndex.tsx b/packages/react-components/src/AccountIndex.tsx
index 09ba2387ff..1b4b930246 100644
--- a/packages/react-components/src/AccountIndex.tsx
+++ b/packages/react-components/src/AccountIndex.tsx
@@ -17,7 +17,7 @@ interface Props extends BareProps {
   value?: string | AccountId | Address | null | Uint8Array;
 }
 
-function AccountIndex ({ children, className, defaultValue, label, style, value }: Props): React.ReactElement<Props> | null {
+function AccountIndex ({ children, className = '', defaultValue, label, value }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
   const info = useCall<DeriveAccountInfo>(api.derive.accounts.info, [value]);
   const [accountIndex, setAccountIndex] = useState<string | null>(null);
@@ -35,10 +35,7 @@ function AccountIndex ({ children, className, defaultValue, label, style, value
   }
 
   return (
-    <div
-      className={`ui--AccountIndex ${className}`}
-      style={style}
-    >
+    <div className={`ui--AccountIndex ${className}`}>
       {label || ''}<div className='account-index'>{accountIndex || defaultValue || '-'}</div>{children}
     </div>
   );
diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx
index 0c6e3686a4..9ce3270472 100644
--- a/packages/react-components/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@@ -35,8 +35,8 @@ const KNOWN: [AccountId, string][] = [
   [registry.createType('AccountId', stringToU8a('modlpy/trsry'.padEnd(32, '\0'))), 'Treasury']
 ];
 
-const displayCache: Map<string, React.ReactNode> = new Map();
-const nameCache: Map<string, [boolean, [React.ReactNode, React.ReactNode | null]]> = new Map();
+const displayCache = new Map<string, React.ReactNode>();
+const nameCache = new Map<string, [boolean, [React.ReactNode, React.ReactNode | null]]>();
 
 function defaultOrAddr (defaultName = '', _address: AccountId | AccountIndex | Address | string | Uint8Array, _accountIndex?: AccountIndex | null): [[React.ReactNode, React.ReactNode | null], boolean, boolean, boolean] {
   const known = KNOWN.find(([known]) => known.eq(_address));
@@ -126,8 +126,8 @@ function extractIdentity (address: string, identity: DeriveAccountRegistration):
     )
     : undefined;
   const nameElem = displayParent
-    ? <span className={`name ${isGood && 'isGood'}`}><span className='top'>{displayParent}</span><span className='sub'>/{displayName}</span></span>
-    : <span className={`name ${isGood && 'isGood'}`}>{displayName}</span>;
+    ? <span className={`name ${isGood ? 'isGood' : ''}`}><span className='top'>{displayParent}</span><span className='sub'>/{displayName}</span></span>
+    : <span className={`name ${isGood ? 'isGood' : ''}`}>{displayName}</span>;
   const infoElem = <Icon name={identity.parent ? 'caret square up outline' : (isGood ? 'check' : 'minus')} />;
   const badgeType = isGood ? 'green' : (isBad ? 'brown' : 'gray');
 
@@ -137,7 +137,7 @@ function extractIdentity (address: string, identity: DeriveAccountRegistration):
   return createIdElem(badgeType, nameElem, infoElem);
 }
 
-function AccountName ({ children, className, defaultName, label, noLookup, onClick, override, toggle, value, withSidebar }: Props): React.ReactElement<Props> {
+function AccountName ({ children, className = '', defaultName, label, noLookup, onClick, override, toggle, value, withSidebar }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const info = useCall<DeriveAccountInfo>(!noLookup && api.derive.accounts.info, [value]);
   const [name, setName] = useState<React.ReactNode>(() => extractName((value || '').toString(), undefined, defaultName));
@@ -175,7 +175,7 @@ function AccountName ({ children, className, defaultName, label, noLookup, onCli
 
   return (
     <div
-      className={`ui--AccountName ${withSidebar && 'withSidebar'} ${className}`}
+      className={`ui--AccountName ${withSidebar ? 'withSidebar' : ''} ${className}`}
       onClick={
         withSidebar
           ? _onToggleSidebar
diff --git a/packages/react-components/src/ActionItem.tsx b/packages/react-components/src/ActionItem.tsx
index 37bbebfa59..029b9a16a7 100644
--- a/packages/react-components/src/ActionItem.tsx
+++ b/packages/react-components/src/ActionItem.tsx
@@ -26,7 +26,7 @@ export const styles = `
   ${proposedActionStyles}
 `;
 
-function ActionItem ({ accessory, children, className, expandNested, idNumber, proposal }: Props): React.ReactElement<Props> {
+function ActionItem ({ accessory, children, className = '', expandNested, idNumber, proposal }: Props): React.ReactElement<Props> {
   return (
     <Card className={className}>
       <div className='ui--Row'>
diff --git a/packages/react-components/src/AddressInfo.tsx b/packages/react-components/src/AddressInfo.tsx
index 14b8728c23..1577aa9922 100644
--- a/packages/react-components/src/AddressInfo.tsx
+++ b/packages/react-components/src/AddressInfo.tsx
@@ -143,7 +143,7 @@ function calcBonded (stakingInfo?: DeriveStakingAccount, bonded?: boolean | BN[]
   return [own, other];
 }
 
-function renderExtended ({ address, balancesAll, withExtended }: Props, t: (key: string) => string): React.ReactNode {
+function renderExtended ({ address, balancesAll, withExtended }: Props, t: <T = string> (key: string) => T): React.ReactNode {
   const extendedDisplay = withExtended === true
     ? DEFAULT_EXTENDED
     : withExtended || undefined;
@@ -156,13 +156,13 @@ function renderExtended ({ address, balancesAll, withExtended }: Props, t: (key:
     <div className='column'>
       {balancesAll && extendedDisplay.nonce && (
         <>
-          <Label label={t('transactions')} />
+          <Label label={t<string>('transactions')} />
           <div className='result'>{formatNumber(balancesAll.accountNonce)}</div>
         </>
       )}
       {extendedDisplay.crypto && (
         <>
-          <Label label={t('type')} />
+          <Label label={t<string>('type')} />
           <CryptoType
             accountId={address}
             className='result'
@@ -173,7 +173,7 @@ function renderExtended ({ address, balancesAll, withExtended }: Props, t: (key:
   );
 }
 
-function renderValidatorPrefs ({ stakingInfo, withValidatorPrefs = false }: Props, t: (key: string) => string): React.ReactNode {
+function renderValidatorPrefs ({ stakingInfo, withValidatorPrefs = false }: Props, t: <T = string> (key: string) => T): React.ReactNode {
   const validatorPrefsDisplay = withValidatorPrefs === true
     ? DEFAULT_PREFS
     : withValidatorPrefs;
@@ -187,7 +187,7 @@ function renderValidatorPrefs ({ stakingInfo, withValidatorPrefs = false }: Prop
       <div />
       {validatorPrefsDisplay.unstakeThreshold && (stakingInfo.validatorPrefs as any as ValidatorPrefsTo145).unstakeThreshold && (
         <>
-          <Label label={t('unstake threshold')} />
+          <Label label={t<string>('unstake threshold')} />
           <div className='result'>
             {(stakingInfo.validatorPrefs as any as ValidatorPrefsTo145).unstakeThreshold.toString()}
           </div>
@@ -197,7 +197,7 @@ function renderValidatorPrefs ({ stakingInfo, withValidatorPrefs = false }: Prop
         (stakingInfo.validatorPrefs as any as ValidatorPrefsTo145).validatorPayment
           ? (
             <>
-              <Label label={t('commission')} />
+              <Label label={t<string>('commission')} />
               <FormatBalance
                 className='result'
                 value={(stakingInfo.validatorPrefs as any as ValidatorPrefsTo145).validatorPayment}
@@ -206,7 +206,7 @@ function renderValidatorPrefs ({ stakingInfo, withValidatorPrefs = false }: Prop
           )
           : (
             <>
-              <Label label={t('commission')} />
+              <Label label={t<string>('commission')} />
               <span>{(stakingInfo.validatorPrefs.commission.unwrap().toNumber() / 10_000_000).toFixed(2)}%</span>
             </>
           )
@@ -215,7 +215,7 @@ function renderValidatorPrefs ({ stakingInfo, withValidatorPrefs = false }: Prop
   );
 }
 
-function renderBalances (props: Props, allAccounts: string[], t: (key: string) => string): React.ReactNode {
+function renderBalances (props: Props, allAccounts: string[], t: <T = string> (key: string) => T): React.ReactNode {
   const { address, balancesAll, democracyLocks, stakingInfo, withBalance = true, withBalanceToggle = false } = props;
   const balanceDisplay = withBalance === true
     ? DEFAULT_BALANCES
@@ -228,17 +228,17 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) =
   const [ownBonded, otherBonded] = calcBonded(stakingInfo, balanceDisplay.bonded);
   const isAllLocked = !!balancesAll && balancesAll.lockedBreakdown.some(({ amount }): boolean => amount.isMax());
   const lookup = {
-    democrac: t('via Democracy/Vote'),
-    phrelect: t('via Council/Vote'),
-    'staking ': t('via Staking/Bond'),
-    'vesting ': t('via Vesting')
+    democrac: t<string>('via Democracy/Vote'),
+    phrelect: t<string>('via Council/Vote'),
+    'staking ': t<string>('via Staking/Bond'),
+    'vesting ': t<string>('via Vesting')
   };
 
   const allItems = (
     <>
       {!withBalanceToggle && balancesAll && balanceDisplay.total && (
         <>
-          <Label label={t('total')} />
+          <Label label={t<string>('total')} />
           <FormatBalance
             className='result'
             value={balancesAll.votingBalance}
@@ -247,7 +247,7 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) =
       )}
       {balancesAll && balanceDisplay.available && (
         <>
-          <Label label={t('transferrable')} />
+          <Label label={t<string>('transferrable')} />
           <FormatBalance
             className='result'
             value={balancesAll.availableBalance}
@@ -256,7 +256,7 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) =
       )}
       {balanceDisplay.vested && balancesAll?.isVesting && (
         <>
-          <Label label={t('vested')} />
+          <Label label={t<string>('vested')} />
           <FormatBalance
             className='result'
             value={balancesAll.vestedBalance}
@@ -265,7 +265,7 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) =
       )}
       {balanceDisplay.locked && balancesAll && (isAllLocked || balancesAll.lockedBalance.gtn(0)) && (
         <>
-          <Label label={t('locked')} />
+          <Label label={t<string>('locked')} />
           <FormatBalance
             className='result'
             label={
@@ -281,7 +281,7 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) =
               text={balancesAll.lockedBreakdown.map(({ amount, id, reasons }, index): React.ReactNode => (
                 <div key={index}>
                   {amount.isMax()
-                    ? t('everything')
+                    ? t<string>('everything')
                     : formatBalance(amount, { forceUnit: '-' })
                   }{id && <div className='faded'>{lookupLock(lookup, id)}</div>}<div className='faded'>{reasons.toString()}</div>
                 </div>
@@ -293,7 +293,7 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) =
       )}
       {balanceDisplay.reserved && balancesAll?.reservedBalance?.gtn(0) && (
         <>
-          <Label label={t('reserved')} />
+          <Label label={t<string>('reserved')} />
           <FormatBalance
             className='result'
             value={balancesAll.reservedBalance}
@@ -302,7 +302,7 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) =
       )}
       {balanceDisplay.bonded && (ownBonded.gtn(0) || otherBonded.length !== 0) && (
         <>
-          <Label label={t('bonded')} />
+          <Label label={t<string>('bonded')} />
           <FormatBalance
             className='result'
             value={ownBonded}
@@ -320,7 +320,7 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) =
       )}
       {balanceDisplay.redeemable && stakingInfo?.redeemable?.gtn(0) && (
         <>
-          <Label label={t('redeemable')} />
+          <Label label={t<string>('redeemable')} />
           <StakingRedeemable
             className='result'
             stakingInfo={stakingInfo}
@@ -329,7 +329,7 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) =
       )}
       {balanceDisplay.unlocking && stakingInfo?.unlocking && (
         <>
-          <Label label={t('unbonding')} />
+          <Label label={t<string>('unbonding')} />
           <div className='result'>
             <StakingUnbonding value={stakingInfo} />
           </div>
@@ -337,7 +337,7 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) =
       )}
       {balanceDisplay.unlocking && democracyLocks && (democracyLocks.length !== 0) && (
         <>
-          <Label label={t('democracy')} />
+          <Label label={t<string>('democracy')} />
           <div className='result'>
             <DemocracyLocks value={democracyLocks} />
           </div>
@@ -368,7 +368,7 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) =
 function AddressInfo (props: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { allAccounts } = useAccounts();
-  const { children, className, extraInfo, withBalanceToggle, withHexSessionId } = props;
+  const { children, className = '', extraInfo, withBalanceToggle, withHexSessionId } = props;
 
   return (
     <div className={`ui--AddressInfo ${className} ${withBalanceToggle ? 'ui--AddressInfo-expander' : ''}`}>
@@ -376,13 +376,13 @@ function AddressInfo (props: Props): React.ReactElement<Props> {
         {renderBalances(props, allAccounts, t)}
         {withHexSessionId && withHexSessionId[0] && (
           <>
-            <Label label={t('session keys')} />
+            <Label label={t<string>('session keys')} />
             <div className='result'>{withHexSessionId[0]}</div>
           </>
         )}
         {withHexSessionId && withHexSessionId[0] !== withHexSessionId[1] && (
           <>
-            <Label label={t('session next')} />
+            <Label label={t<string>('session next')} />
             <div className='result'>{withHexSessionId[1]}</div>
           </>
         )}
diff --git a/packages/react-components/src/AddressMini.tsx b/packages/react-components/src/AddressMini.tsx
index cb4cb0dfe2..4b4bfc964e 100644
--- a/packages/react-components/src/AddressMini.tsx
+++ b/packages/react-components/src/AddressMini.tsx
@@ -39,7 +39,7 @@ interface Props extends BareProps {
   withShrink?: boolean;
 }
 
-function AddressMini ({ balance, bonded, children, className, iconInfo, isPadded = true, label, labelBalance, noLookup, summary, value, withAddress = true, withBalance = false, withBonded = false, withLockedVote = false, withName = true, withShrink = false, withSidebar = true }: Props): React.ReactElement<Props> | null {
+function AddressMini ({ balance, bonded, children, className = '', iconInfo, isPadded = true, label, labelBalance, noLookup, summary, value, withAddress = true, withBalance = false, withBonded = false, withLockedVote = false, withName = true, withShrink = false, withSidebar = true }: Props): React.ReactElement<Props> | null {
   if (!value) {
     return null;
   }
diff --git a/packages/react-components/src/AddressRow.tsx b/packages/react-components/src/AddressRow.tsx
index f8e7c6b702..5f0208db6d 100644
--- a/packages/react-components/src/AddressRow.tsx
+++ b/packages/react-components/src/AddressRow.tsx
@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-/* eslint-disable @typescript-eslint/camelcase */
+/* eslint-disable camelcase */
 
 import { DeriveAccountInfo, DeriveStakingAccount } from '@polkadot/api-derive/types';
 import { ApiProps } from '@polkadot/react-api/types';
@@ -29,7 +29,7 @@ export interface Props extends I18nProps, RowProps {
   isDisabled?: boolean;
   isValid?: boolean;
   label?: string;
-  accounts_info?: DeriveAccountInfo;
+  accountsInfo?: DeriveAccountInfo;
   noDefaultNameOpacity?: boolean;
   overlay?: React.ReactNode;
   stakingInfo?: DeriveStakingAccount;
@@ -60,13 +60,13 @@ class AddressRow extends Row<ApiProps & Props, State> {
     this.state = this.createState();
   }
 
-  public static getDerivedStateFromProps ({ accounts_info = EMPTY_INFO, defaultName, isEditable, noDefaultNameOpacity, type, value }: Props, prevState: State): State | null {
-    const accountId = accounts_info.accountId || value;
+  public static getDerivedStateFromProps ({ accountsInfo = EMPTY_INFO, defaultName, isEditable, noDefaultNameOpacity, type, value }: Props, prevState: State): State | null {
+    const accountId = accountsInfo.accountId || value;
     const address = accountId
       ? accountId.toString()
       : DEFAULT_ADDR;
-    const [, isDefault, nameInner] = accounts_info.nickname
-      ? [true, false, accounts_info.nickname.toUpperCase()]
+    const [, isDefault, nameInner] = accountsInfo.nickname
+      ? [true, false, accountsInfo.nickname.toUpperCase()]
       : getAddressName(address, type, defaultName || '<unknown>');
     const name = isDefault && !noDefaultNameOpacity && !isEditable
       ? <div className='ui--Row-placeholder'>{nameInner}</div>
@@ -91,15 +91,12 @@ class AddressRow extends Row<ApiProps & Props, State> {
   }
 
   public render (): React.ReactNode {
-    const { accounts_info = EMPTY_INFO, className, isContract, isDisabled, isInline, label, overlay, style } = this.props;
-    const { accountId, accountIndex } = accounts_info;
+    const { accountsInfo = EMPTY_INFO, className = '', isContract, isDisabled, isInline, label, overlay } = this.props;
+    const { accountId, accountIndex } = accountsInfo;
     const isValid = this.props.isValid || accountId || accountIndex;
 
     return (
-      <div
-        className={classes('ui--Row', isDisabled && 'isDisabled', !isValid && 'isInvalid', isInline && 'isInline', className)}
-        style={style}
-      >
+      <div className={classes('ui--Row', isDisabled && 'isDisabled', !isValid && 'isInvalid', isInline && 'isInline', className)}>
         <div className='ui--Row-base'>
           {this.renderIcon()}
           <div className='ui--Row-details'>
@@ -118,8 +115,8 @@ class AddressRow extends Row<ApiProps & Props, State> {
   }
 
   private createState (): State {
-    const { accounts_info = EMPTY_INFO, defaultName, type, value } = this.props;
-    const accountId = accounts_info.accountId || value;
+    const { accountsInfo = EMPTY_INFO, defaultName, type, value } = this.props;
+    const accountId = accountsInfo.accountId || value;
     const address = accountId
       ? accountId.toString()
       : DEFAULT_ADDR;
@@ -150,9 +147,9 @@ class AddressRow extends Row<ApiProps & Props, State> {
   }
 
   private renderAddress (): React.ReactNode {
-    const { accounts_info = EMPTY_INFO, withIndexOrAddress = true } = this.props;
+    const { accountsInfo = EMPTY_INFO, withIndexOrAddress = true } = this.props;
     const { address } = this.state;
-    const { accountIndex } = accounts_info;
+    const { accountIndex } = accountsInfo;
 
     if (accountIndex && withIndexOrAddress) {
       return null;
@@ -166,8 +163,8 @@ class AddressRow extends Row<ApiProps & Props, State> {
   }
 
   private renderAccountIndex (): React.ReactNode {
-    const { accounts_info = EMPTY_INFO, withIndex = true, withIndexOrAddress = true, withSmallIcon } = this.props;
-    const { accountIndex } = accounts_info;
+    const { accountsInfo = EMPTY_INFO, withIndex = true, withIndexOrAddress = true, withSmallIcon } = this.props;
+    const { accountIndex } = accountsInfo;
 
     if (withSmallIcon || !accountIndex || !(withIndex || withIndexOrAddress)) {
       return null;
@@ -181,8 +178,8 @@ class AddressRow extends Row<ApiProps & Props, State> {
   }
 
   private renderBalances (): React.ReactNode {
-    const { accounts_info = EMPTY_INFO, extraInfo, stakingInfo, withBalance, withValidatorPrefs } = this.props;
-    const { accountId } = accounts_info;
+    const { accountsInfo = EMPTY_INFO, extraInfo, stakingInfo, withBalance, withValidatorPrefs } = this.props;
+    const { accountId } = accountsInfo;
 
     if (!(withBalance || withValidatorPrefs) || !accountId) {
       return null;
@@ -202,9 +199,9 @@ class AddressRow extends Row<ApiProps & Props, State> {
   }
 
   private renderIcon (): React.ReactNode {
-    const { accounts_info = EMPTY_INFO, iconInfo, systemName, withIcon = true, withSmallIcon = false } = this.props;
+    const { accountsInfo = EMPTY_INFO, iconInfo, systemName, withIcon = true, withSmallIcon = false } = this.props;
     const { address } = this.state;
-    const { accountId } = accounts_info;
+    const { accountId } = accountsInfo;
 
     if (!withIcon) {
       return null;
@@ -296,6 +293,6 @@ export default withMulti(
   `,
   translate,
   withCalls<Props>(
-    ['derive.accounts.info', { paramName: 'value' }]
+    ['derive.accounts.info', { paramName: 'value', propName: 'accountsInfo' }]
   )
 );
diff --git a/packages/react-components/src/AddressSmall.tsx b/packages/react-components/src/AddressSmall.tsx
index de3012fd4d..62abca2a49 100644
--- a/packages/react-components/src/AddressSmall.tsx
+++ b/packages/react-components/src/AddressSmall.tsx
@@ -20,11 +20,11 @@ interface Props {
   overrideName?: React.ReactNode;
   withIndex?: boolean;
   withSidebar?: boolean;
-  toggle?: any;
+  toggle?: unknown;
   value?: string | Address | AccountId | null | Uint8Array;
 }
 
-function AddressSmall ({ children, className, defaultName, onClickName, overrideName, toggle, value, withIndex, withSidebar = true }: Props): React.ReactElement<Props> {
+function AddressSmall ({ children, className = '', defaultName, onClickName, overrideName, toggle, value, withIndex, withSidebar = true }: Props): React.ReactElement<Props> {
   return (
     <div className={`ui--AddressSmall ${className}`}>
       <IdentityIcon value={value as Uint8Array} />
diff --git a/packages/react-components/src/AddressToggle.tsx b/packages/react-components/src/AddressToggle.tsx
index 5c51628f0c..4bd26ca678 100644
--- a/packages/react-components/src/AddressToggle.tsx
+++ b/packages/react-components/src/AddressToggle.tsx
@@ -46,7 +46,7 @@ function getIsFiltered (address: string, filter?: string, info?: DeriveAccountIn
   return true;
 }
 
-function AddressToggle ({ address, className, filter, isHidden, noLookup, noToggle, onChange, value }: Props): React.ReactElement<Props> | null {
+function AddressToggle ({ address, className = '', filter, isHidden, noLookup, noToggle, onChange, value }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
   const info = useCall<DeriveAccountInfo>(!noLookup && api.derive.accounts.info, [address]);
   const [isFiltered, setIsFiltered] = useState(false);
diff --git a/packages/react-components/src/Available.tsx b/packages/react-components/src/Available.tsx
index 2daf8a2b61..02af902247 100644
--- a/packages/react-components/src/Available.tsx
+++ b/packages/react-components/src/Available.tsx
@@ -15,7 +15,7 @@ export interface Props extends BareProps {
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
 }
 
-function AvailableDisplay ({ className, label, params, style }: Props): React.ReactElement<Props> | null {
+function AvailableDisplay ({ className = '', label, params }: Props): React.ReactElement<Props> | null {
   if (!params) {
     return null;
   }
@@ -25,7 +25,6 @@ function AvailableDisplay ({ className, label, params, style }: Props): React.Re
       className={classes('ui--Available', className)}
       label={label}
       params={params}
-      style={style}
     />
   );
 }
diff --git a/packages/react-components/src/AvatarItem.tsx b/packages/react-components/src/AvatarItem.tsx
index 12b9545596..d9faabfd64 100644
--- a/packages/react-components/src/AvatarItem.tsx
+++ b/packages/react-components/src/AvatarItem.tsx
@@ -15,9 +15,9 @@ interface Props {
   subtitle: React.ReactNode;
 }
 
-function AvatarItem ({ children, className, icon, isBig, subtitle, title }: Props): React.ReactElement<Props> {
+function AvatarItem ({ children, className = '', icon, isBig, subtitle, title }: Props): React.ReactElement<Props> {
   return (
-    <div className={['ui--AvatarItem', className, isBig ? 'big' : ''].join(' ')}>
+    <div className={['ui--AvatarItem', className, isBig && 'big'].join(' ')}>
       <div className='ui--AvatarItem-icon'>
         {icon}
       </div>
diff --git a/packages/react-components/src/Badge.tsx b/packages/react-components/src/Badge.tsx
index 1cdd3f0d9d..3dfba5d6de 100644
--- a/packages/react-components/src/Badge.tsx
+++ b/packages/react-components/src/Badge.tsx
@@ -21,12 +21,12 @@ interface Props {
 
 let badgeId = 0;
 
-function Badge ({ className, hover, info, isGray, isInline, isSmall, isTooltip, onClick, type }: Props): React.ReactElement<Props> | null {
+function Badge ({ className = '', hover, info, isGray, isInline, isSmall, isTooltip, onClick, type }: Props): React.ReactElement<Props> | null {
   const [trigger] = useState(`badge-hover-${Date.now()}-${badgeId++}`);
 
   return (
     <div
-      className={`ui--Badge ${isGray && 'isGray'} ${isInline && 'isInline'} ${isTooltip && 'isTooltip'} ${isSmall && 'isSmall'} ${onClick && 'isClickable'} ${type} ${className}`}
+      className={`ui--Badge ${isGray ? 'isGray' : ''} ${isInline ? 'isInline' : ''} ${isTooltip ? 'isTooltip' : ''} ${isSmall ? 'isSmall' : ''} ${onClick ? 'isClickable' : ''} ${type} ${className}`}
       data-for={trigger}
       data-tip={true}
       data-tip-disable={!isTooltip}
diff --git a/packages/react-components/src/Balance.tsx b/packages/react-components/src/Balance.tsx
index ca481ec720..9f3eaffbda 100644
--- a/packages/react-components/src/Balance.tsx
+++ b/packages/react-components/src/Balance.tsx
@@ -24,7 +24,7 @@ export interface Props extends BareProps {
   withLabel?: boolean;
 }
 
-export function renderProvided ({ className, label, value }: RenderProps): React.ReactNode {
+export function renderProvided ({ className = '', label, value }: RenderProps): React.ReactNode {
   let others: undefined | React.ReactNode;
 
   if (Array.isArray(value)) {
@@ -55,24 +55,19 @@ export function renderProvided ({ className, label, value }: RenderProps): React
 }
 
 function BalanceDisplay (props: Props): React.ReactElement<Props> | null {
-  const { balance, className, label, params, style } = props;
+  const { balance, className = '', label, params } = props;
 
   if (!params) {
     return null;
   }
 
   return balance
-    ? (
-      <>
-        {renderProvided({ className, label, value: balance })}
-      </>
-    )
+    ? <>{renderProvided({ className, label, value: balance })}</>
     : (
       <Balance
         className={classes('ui--Balance', className)}
         label={label}
         params={params}
-        style={style}
       />
     );
 }
diff --git a/packages/react-components/src/Bonded.tsx b/packages/react-components/src/Bonded.tsx
index c03c037968..f73dfbadfe 100644
--- a/packages/react-components/src/Bonded.tsx
+++ b/packages/react-components/src/Bonded.tsx
@@ -20,24 +20,19 @@ export interface Props extends BareProps {
 }
 
 function BondedDisplay (props: Props): React.ReactElement<Props> | null {
-  const { bonded, className, label, params, style } = props;
+  const { bonded, className = '', label, params } = props;
 
   if (!params) {
     return null;
   }
 
   return bonded
-    ? (
-      <>
-        {renderProvided({ className, label, value: bonded })}
-      </>
-    )
+    ? <>{renderProvided({ className, label, value: bonded })}</>
     : (
       <Bonded
         className={classes('ui--Bonded', className)}
         label={label}
         params={params}
-        style={style}
       />
     );
 }
diff --git a/packages/react-components/src/Bubble.tsx b/packages/react-components/src/Bubble.tsx
index cb4162e393..350bfd88ac 100644
--- a/packages/react-components/src/Bubble.tsx
+++ b/packages/react-components/src/Bubble.tsx
@@ -19,7 +19,7 @@ interface Props extends BareProps {
   label?: React.ReactNode;
 }
 
-function Bubble ({ children, className, color, icon, label }: Props): React.ReactElement<Props> {
+function Bubble ({ children, className = '', color, icon, label }: Props): React.ReactElement<Props> {
   return (
     <SUILabel
       className={classes('theme--default', 'ui--Bubble', className)}
diff --git a/packages/react-components/src/Button/Button.tsx b/packages/react-components/src/Button/Button.tsx
index 33e54ed3f2..b99d7da906 100644
--- a/packages/react-components/src/Button/Button.tsx
+++ b/packages/react-components/src/Button/Button.tsx
@@ -14,14 +14,14 @@ import Tooltip from '../Tooltip';
 
 let idCounter = 0;
 
-function Button ({ children, className, floated, icon, isAnimated, isBasic = false, isCircular = false, isDisabled = false, isFluid = false, isIcon, isLoading = false, isNegative = false, isPositive = false, isPrimary = false, label, labelPosition, onClick, onMouseEnter, onMouseLeave, size, style, tabIndex, tooltip }: ButtonProps): React.ReactElement<ButtonProps> {
+function Button ({ children, className = '', floated, icon, isAnimated, isBasic = false, isCircular = false, isDisabled = false, isFluid = false, isIcon, isLoading = false, isNegative = false, isPositive = false, isPrimary = false, label, labelPosition, onClick, onMouseEnter, onMouseLeave, size, tabIndex, tooltip }: ButtonProps): React.ReactElement<ButtonProps> {
   const [triggerId] = useState(`button-${++idCounter}`);
   const props = {
     animate: 'fade',
     animated: isAnimated,
     basic: isBasic,
     circular: isCircular,
-    className: `${className} ${isIcon && 'isIcon'}`,
+    className: `${className} ${isIcon ? 'isIcon' : ''}`,
     'data-for': triggerId,
     'data-tip': !!tooltip,
     disabled: isDisabled,
@@ -37,7 +37,6 @@ function Button ({ children, className, floated, icon, isAnimated, isBasic = fal
     primary: isPrimary,
     secondary: !isBasic && !(isPositive || isPrimary || isNegative),
     size: size || (isIcon ? 'tiny' : undefined) || 'small',
-    style,
     tabIndex
   };
 
diff --git a/packages/react-components/src/Button/Divider.tsx b/packages/react-components/src/Button/Divider.tsx
index 8440e3bc28..f2c7833075 100644
--- a/packages/react-components/src/Button/Divider.tsx
+++ b/packages/react-components/src/Button/Divider.tsx
@@ -8,12 +8,9 @@ import React from 'react';
 
 import { classes } from '../util';
 
-function ButtonDivider ({ className, style }: DividerProps): React.ReactElement<DividerProps> {
+function ButtonDivider ({ className = '' }: DividerProps): React.ReactElement<DividerProps> {
   return (
-    <div
-      className={classes('ui button compact mini basic', className)}
-      style={style}
-    />
+    <div className={classes('ui button compact mini basic', className)} />
   );
 }
 
diff --git a/packages/react-components/src/Button/Group.tsx b/packages/react-components/src/Button/Group.tsx
index ad7a3a2ef1..91feb3cee3 100644
--- a/packages/react-components/src/Button/Group.tsx
+++ b/packages/react-components/src/Button/Group.tsx
@@ -10,21 +10,16 @@ import styled from 'styled-components';
 
 import Divider from './Divider';
 
-const DIVIDER_STYLE = { padding: '0em' };
-
-function ButtonGroup ({ children, className, isBasic, isCentered, style }: GroupProps): React.ReactElement<GroupProps> {
+function ButtonGroup ({ children, className = '', isBasic, isCentered }: GroupProps): React.ReactElement<GroupProps> {
   return (
-    <div
-      className={`ui--Button-Group ${isCentered && 'centered'} ${className}`}
-      style={style}
-    >
+    <div className={`ui--Button-Group ${isCentered ? 'centered' : ''} ${className}`}>
       <SUIButton.Group
         basic={isBasic}
         size='small'
       >
         {isBasic
           ? null
-          : <Divider style={DIVIDER_STYLE} />
+          : <Divider className='ui--Button-Group-Divider' />
         }
         {children}
       </SUIButton.Group>
@@ -51,6 +46,10 @@ const Memo = React.memo(styled(ButtonGroup)`
   &+.ui--Table {
     margin-top: 1.5rem;
   }
+
+  .ui--Buttn-Group-Divider {
+    padding: 0;
+  }
 `) as unknown as GroupType;
 
 Memo.Divider = Divider;
diff --git a/packages/react-components/src/ButtonCancel.tsx b/packages/react-components/src/ButtonCancel.tsx
index f46280eb4c..684560325b 100644
--- a/packages/react-components/src/ButtonCancel.tsx
+++ b/packages/react-components/src/ButtonCancel.tsx
@@ -15,7 +15,7 @@ interface Props {
   tabIndex?: number;
 }
 
-function ButtonCancel ({ className, isDisabled, label, onClick, tabIndex }: Props): React.ReactElement<Props> {
+function ButtonCancel ({ className = '', isDisabled, label, onClick, tabIndex }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
@@ -24,7 +24,7 @@ function ButtonCancel ({ className, isDisabled, label, onClick, tabIndex }: Prop
       icon='cancel'
       isDisabled={isDisabled}
       isNegative
-      label={label || t('Cancel')}
+      label={label || t<string>('Cancel')}
       onClick={onClick}
       tabIndex={tabIndex}
     />
diff --git a/packages/react-components/src/Call.tsx b/packages/react-components/src/Call.tsx
index 93e7177ddd..cbf1285b83 100644
--- a/packages/react-components/src/Call.tsx
+++ b/packages/react-components/src/Call.tsx
@@ -38,7 +38,7 @@ interface Value {
   value: Codec;
 }
 
-function Call ({ children, className, labelHash, mortality, onError, style, tip, value, withBorder, withHash }: Props): React.ReactElement<Props> {
+function Call ({ children, className = '', labelHash, mortality, onError, tip, value, withBorder, withHash }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [{ hash, params, values }, setExtracted] = useState<{ hash: Hash | null; params: Param[]; values: Value[] }>({ hash: null, params: [], values: [] });
 
@@ -59,10 +59,7 @@ function Call ({ children, className, labelHash, mortality, onError, style, tip,
   }, [value, withHash]);
 
   return (
-    <div
-      className={classes('ui--Extrinsic', className)}
-      style={style}
-    >
+    <div className={classes('ui--Extrinsic', className)}>
       <Params
         isDisabled
         onError={onError}
@@ -75,7 +72,7 @@ function Call ({ children, className, labelHash, mortality, onError, style, tip,
         {hash && (
           <Static
             className='hash'
-            label={labelHash || t('extrinsic hash')}
+            label={labelHash || t<string>('extrinsic hash')}
           >
             {hash.toHex()}
           </Static>
@@ -83,7 +80,7 @@ function Call ({ children, className, labelHash, mortality, onError, style, tip,
         {mortality && (
           <Static
             className='mortality'
-            label={t('lifetime')}
+            label={t<string>('lifetime')}
           >
             {mortality}
           </Static>
@@ -91,7 +88,7 @@ function Call ({ children, className, labelHash, mortality, onError, style, tip,
         {tip?.gtn(0) && (
           <Static
             className='tip'
-            label={t('tip')}
+            label={t<string>('tip')}
           >
             <FormatBalance value={tip} />
           </Static>
diff --git a/packages/react-components/src/CallExpander.tsx b/packages/react-components/src/CallExpander.tsx
index a6ec99ab6a..708745fe8f 100644
--- a/packages/react-components/src/CallExpander.tsx
+++ b/packages/react-components/src/CallExpander.tsx
@@ -18,7 +18,7 @@ interface Props {
   withHash?: boolean;
 }
 
-function CallExpander ({ children, className, labelHash, value, withHash }: Props): React.ReactElement<Props> {
+function CallExpander ({ children, className = '', labelHash, value, withHash }: Props): React.ReactElement<Props> {
   const { meta, method, section } = registry.findMetaCall(value.callIndex);
 
   return (
diff --git a/packages/react-components/src/Card.tsx b/packages/react-components/src/Card.tsx
index 8e0604525d..5ec26db061 100644
--- a/packages/react-components/src/Card.tsx
+++ b/packages/react-components/src/Card.tsx
@@ -5,8 +5,6 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { classes } from './util';
-
 interface Props {
   children: React.ReactNode;
   className?: string;
@@ -15,9 +13,9 @@ interface Props {
   withBottomMargin?: boolean;
 }
 
-function Card ({ children, className, isError, isSuccess, withBottomMargin }: Props): React.ReactElement<Props> {
+function Card ({ children, className = '', isError, isSuccess, withBottomMargin }: Props): React.ReactElement<Props> {
   return (
-    <article className={classes('ui--Card', className, (isError && !isSuccess) && 'error', (!isError && isSuccess) && 'success', withBottomMargin && 'withBottomMargin')}>
+    <article className={`ui--Card ${className} ${(isError && !isSuccess) ? 'error' : ''}, ${(!isError && isSuccess) ? 'success' : ''} ${withBottomMargin ? 'withBottomMargin' : ''}`}>
       {children}
     </article>
   );
diff --git a/packages/react-components/src/CardGrid.tsx b/packages/react-components/src/CardGrid.tsx
index 2a22d4b79f..3aa9fa21ff 100644
--- a/packages/react-components/src/CardGrid.tsx
+++ b/packages/react-components/src/CardGrid.tsx
@@ -28,7 +28,7 @@ class CardGrid extends Collection<Props, State> {
 
     return (
       <div className='ui--CardGrid-empty'>
-        <h1>{emptyText || t('No items')}</h1>
+        <h1>{emptyText || t<string>('No items')}</h1>
         {buttons && (
           <div className='ui--CardGrid-buttons'>
             {buttons}
diff --git a/packages/react-components/src/CardSummary.tsx b/packages/react-components/src/CardSummary.tsx
index 1886b70d88..b43e625c21 100644
--- a/packages/react-components/src/CardSummary.tsx
+++ b/packages/react-components/src/CardSummary.tsx
@@ -30,7 +30,7 @@ interface Props extends BareProps {
   progress?: ProgressProps;
 }
 
-function CardSummary ({ children, className, help, label, progress }: Props): React.ReactElement<Props> | null {
+function CardSummary ({ children, className = '', help, label, progress }: Props): React.ReactElement<Props> | null {
   const value = progress && progress.value;
   const total = progress && progress.total;
   const left = progress && !isUndefined(value) && !isUndefined(total) && value.gten(0) && total.gtn(0)
diff --git a/packages/react-components/src/ChainImg.tsx b/packages/react-components/src/ChainImg.tsx
index f6505c329b..68954893fd 100644
--- a/packages/react-components/src/ChainImg.tsx
+++ b/packages/react-components/src/ChainImg.tsx
@@ -17,10 +17,10 @@ function sanitize (value?: string): string {
   return value?.toLowerCase().replace('-', ' ') || '';
 }
 
-function ChainImg ({ className, logo, onClick }: Props): React.ReactElement<Props> {
+function ChainImg ({ className = '', logo, onClick }: Props): React.ReactElement<Props> {
   const { systemChain, systemName } = useApi();
-  const img = useMemo((): any => {
-    return namedLogos[logo || ''] || chainLogos[sanitize(systemChain)] || nodeLogos[sanitize(systemName)] || emptyLogo;
+  const img = useMemo((): string => {
+    return (namedLogos[logo || ''] || chainLogos[sanitize(systemChain)] || nodeLogos[sanitize(systemName)] || emptyLogo) as string;
   }, [logo, systemChain, systemName]);
 
   return (
diff --git a/packages/react-components/src/ChainLock.tsx b/packages/react-components/src/ChainLock.tsx
index a8dcb68d6e..a16ab8a6c2 100644
--- a/packages/react-components/src/ChainLock.tsx
+++ b/packages/react-components/src/ChainLock.tsx
@@ -29,7 +29,7 @@ function calcLock (apiGenesis: string, genesisHash: string | null): boolean {
   ).includes(genesisHash);
 }
 
-function ChainLock ({ className, genesisHash, isDisabled, onChange }: Props): React.ReactElement<Props> | null {
+function ChainLock ({ className = '', genesisHash, isDisabled, onChange }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api, isDevelopment } = useApi();
   const [isTiedToChain, setTied] = useState(calcLock(api.genesisHash.toHex(), genesisHash));
@@ -58,8 +58,8 @@ function ChainLock ({ className, genesisHash, isDisabled, onChange }: Props): Re
       isDisabled={isDisabled}
       label={
         isTiedToChain
-          ? t('only this network')
-          : t('use on any network')
+          ? t<string>('only this network')
+          : t<string>('use on any network')
       }
       onChange={_onChange}
       preventDefault
diff --git a/packages/react-components/src/Chart/Base.tsx b/packages/react-components/src/Chart/Base.tsx
index 4ce121d039..c10e28ef64 100644
--- a/packages/react-components/src/Chart/Base.tsx
+++ b/packages/react-components/src/Chart/Base.tsx
@@ -17,12 +17,9 @@ const Wrapper = styled.div`
   width: 15vw;
 `;
 
-function BaseChart ({ children, className, style }: BaseProps): React.ReactElement<BaseProps> {
+function BaseChart ({ children, className = '' }: BaseProps): React.ReactElement<BaseProps> {
   return (
-    <Wrapper
-      className={classes('ui--Chart', className)}
-      style={style}
-    >
+    <Wrapper className={classes('ui--Chart', className)}>
       {children}
     </Wrapper>
   );
diff --git a/packages/react-components/src/Chart/Doughnut.tsx b/packages/react-components/src/Chart/Doughnut.tsx
index ffd0a35dee..b732a7522f 100644
--- a/packages/react-components/src/Chart/Doughnut.tsx
+++ b/packages/react-components/src/Chart/Doughnut.tsx
@@ -17,7 +17,7 @@ interface Options {
   labels: string[];
 }
 
-function ChartDoughnut ({ className, size = 100, style, values }: DoughnutProps): React.ReactElement<DoughnutProps> {
+function ChartDoughnut ({ className = '', size = 100, values }: DoughnutProps): React.ReactElement<DoughnutProps> {
   const options: Options = {
     colorHover: [],
     colorNormal: [],
@@ -33,10 +33,7 @@ function ChartDoughnut ({ className, size = 100, style, values }: DoughnutProps)
   });
 
   return (
-    <Base
-      className={className}
-      style={style}
-    >
+    <Base className={className}>
       <Doughnut
         data={{
           datasets: [{
diff --git a/packages/react-components/src/Chart/HorizBar.tsx b/packages/react-components/src/Chart/HorizBar.tsx
index 699324bd09..c0215353f2 100644
--- a/packages/react-components/src/Chart/HorizBar.tsx
+++ b/packages/react-components/src/Chart/HorizBar.tsx
@@ -29,6 +29,7 @@ interface Config {
 }
 
 const alphaColor = (hexColor: string): string =>
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
   ChartJs.helpers.color(hexColor).alpha(0.65).rgbString();
 
 function calculateOptions (aspectRatio: number, values: HorizBarValue[], jsonValues: string, max: number, showLabels: boolean): State {
@@ -77,7 +78,7 @@ function calculateOptions (aspectRatio: number, values: HorizBarValue[], jsonVal
   };
 }
 
-function ChartHorizBar ({ aspectRatio = 8, className, max = 100, showLabels = false, style, values }: HorizBarProps): React.ReactElement<HorizBarProps> | null {
+function ChartHorizBar ({ aspectRatio = 8, className = '', max = 100, showLabels = false, values }: HorizBarProps): React.ReactElement<HorizBarProps> | null {
   const [{ chartData, chartOptions, jsonValues }, setState] = useState<State>({});
 
   useEffect((): void => {
@@ -94,15 +95,12 @@ function ChartHorizBar ({ aspectRatio = 8, className, max = 100, showLabels = fa
 
   // HACK on width/height to get the aspectRatio to work
   return (
-    <div
-      className={className}
-      style={style}
-    >
+    <div className={className}>
       <HorizontalBar
         data={chartData}
-        height={null as any}
+        height={null as unknown as number}
         options={chartOptions}
-        width={null as any}
+        width={null as unknown as number}
       />
     </div>
   );
diff --git a/packages/react-components/src/Chart/Line.tsx b/packages/react-components/src/Chart/Line.tsx
index 45138f4eee..a3596530fe 100644
--- a/packages/react-components/src/Chart/Line.tsx
+++ b/packages/react-components/src/Chart/Line.tsx
@@ -30,11 +30,9 @@ interface Config {
 
 // Ok, this does exists, but the export if not there in the typings - so it works,
 //  but we have to jiggle around here to get it to actually compile :(
+// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call
 (Chart as any).Chart.pluginService.register({
-  beforeDraw: (chart: any) => {
-    const ctx = chart.chart.ctx;
-    const chartArea = chart.chartArea;
-
+  beforeDraw: ({ chart: { ctx }, chartArea }: { chart: { ctx: { fillStyle: string; fillRect: (left: number, top: number, width: number, height: number) => void; restore: () => void; save: () => void } }; chartArea: { bottom: number; left: number; right: number; top: number } }) => {
     ctx.save();
     ctx.fillStyle = '#fff';
     ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
@@ -45,6 +43,7 @@ interface Config {
 const COLORS = ['#ff8c00', '#008c8c', '#8c008c'];
 
 const alphaColor = (hexColor: string): string =>
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
   ChartJs.helpers.color(hexColor).alpha(0.65).rgbString();
 
 const chartOptions = {
@@ -84,7 +83,7 @@ function calculateOptions (colors: (string | undefined)[] = [], legends: string[
   };
 }
 
-function LineChart ({ className, colors, labels, legends, style, values }: LineProps): React.ReactElement<LineProps> | null {
+function LineChart ({ className = '', colors, labels, legends, values }: LineProps): React.ReactElement<LineProps> | null {
   const [{ chartData, chartOptions }, setState] = useState<State>({});
 
   useEffect((): void => {
@@ -96,10 +95,7 @@ function LineChart ({ className, colors, labels, legends, style, values }: LineP
   }
 
   return (
-    <div
-      className={className}
-      style={style}
-    >
+    <div className={className}>
       <Chart.Line
         data={chartData}
         options={chartOptions}
diff --git a/packages/react-components/src/Columar.tsx b/packages/react-components/src/Columar.tsx
index 500816335c..fb7538d205 100644
--- a/packages/react-components/src/Columar.tsx
+++ b/packages/react-components/src/Columar.tsx
@@ -10,7 +10,7 @@ interface Props {
   className?: string;
 }
 
-function Columar ({ children, className }: Props): React.ReactElement<Props> {
+function Columar ({ children, className = '' }: Props): React.ReactElement<Props> {
   return (
     <div className={`ui--Columnar ${className}`}>
       {children}
diff --git a/packages/react-components/src/Column.tsx b/packages/react-components/src/Column.tsx
index 9554aefac7..1139ccbff5 100644
--- a/packages/react-components/src/Column.tsx
+++ b/packages/react-components/src/Column.tsx
@@ -11,7 +11,7 @@ import translate from './translate';
 
 class Column extends Collection<Props, State> {
   public render (): React.ReactNode {
-    const { className } = this.props;
+    const { className = '' } = this.props;
     const { isEmpty } = this.state;
 
     return (
diff --git a/packages/react-components/src/CopyButton.tsx b/packages/react-components/src/CopyButton.tsx
index 6ca1b29a36..b9c11c5d0f 100644
--- a/packages/react-components/src/CopyButton.tsx
+++ b/packages/react-components/src/CopyButton.tsx
@@ -17,10 +17,10 @@ interface Props extends BareProps {
   className?: string;
   icon?: string;
   isAddress?: boolean;
-  value?: any;
+  value?: string;
 }
 
-function CopyButton ({ children, className, icon = 'copy', isAddress = false, value }: Props): React.ReactElement<Props> {
+function CopyButton ({ children, className = '', icon = 'copy', isAddress = false, value = '' }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { queueAction } = useContext(StatusContext);
 
@@ -28,8 +28,8 @@ function CopyButton ({ children, className, icon = 'copy', isAddress = false, va
     (): void => {
       isAddress && queueAction && queueAction({
         account: value,
-        action: t('clipboard'),
-        message: t('address copied'),
+        action: t<string>('clipboard'),
+        message: t<string>('address copied'),
         status: 'queued'
       });
     },
diff --git a/packages/react-components/src/CryptoType.tsx b/packages/react-components/src/CryptoType.tsx
index 973c2cff73..11bb202a02 100644
--- a/packages/react-components/src/CryptoType.tsx
+++ b/packages/react-components/src/CryptoType.tsx
@@ -15,7 +15,7 @@ interface Props extends BareProps {
   label?: string;
 }
 
-function CryptoType ({ accountId, className, label = '' }: Props): React.ReactElement<Props> {
+function CryptoType ({ accountId, className = '', label = '' }: Props): React.ReactElement<Props> {
   const [type, setType] = useState('unknown');
 
   useEffect((): void => {
@@ -29,7 +29,7 @@ function CryptoType ({ accountId, className, label = '' }: Props): React.ReactEl
           current.meta.isInjected
             ? 'injected'
             : current.meta.isHardware
-              ? current.meta.hardwareType || 'hardware'
+              ? current.meta.hardwareType as string || 'hardware'
               : current.meta.isExternal
                 ? current.meta.isMultisig
                   ? 'multisig'
diff --git a/packages/react-components/src/DemocracyLocks.tsx b/packages/react-components/src/DemocracyLocks.tsx
index 6798bf1067..7ef03c2a38 100644
--- a/packages/react-components/src/DemocracyLocks.tsx
+++ b/packages/react-components/src/DemocracyLocks.tsx
@@ -24,7 +24,7 @@ const ZERO = new BN(0);
 
 let id = 0;
 
-function DemocracyLocks ({ className, value }: Props): React.ReactElement<Props> | null {
+function DemocracyLocks ({ className = '', value }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const bestNumber = useCall<BN>(api.derive.chain.bestNumber, []);
@@ -59,12 +59,12 @@ function DemocracyLocks ({ className, value }: Props): React.ReactElement<Props>
                 ? (
                   <BlockToTime
                     blocks={blocks}
-                    label={`${t('{{blocks}} blocks', { replace: { blocks: formatNumber(blocks) } })}, `}
+                    label={`${t<string>('{{blocks}} blocks', { replace: { blocks: formatNumber(blocks) } })}, `}
                   />
                 )
                 : isFinished
-                  ? t('lock expired')
-                  : t('ongoing referendum')
+                  ? t<string>('lock expired')
+                  : t<string>('ongoing referendum')
               }
             </div>
           </div>
diff --git a/packages/react-components/src/Dropdown.tsx b/packages/react-components/src/Dropdown.tsx
index 42a3ee117e..c072cecec5 100644
--- a/packages/react-components/src/Dropdown.tsx
+++ b/packages/react-components/src/Dropdown.tsx
@@ -44,12 +44,12 @@ export type IDropdown<Option> = React.ComponentType<Props<Option>> & {
   Header: React.ComponentType<{ content: React.ReactNode }>;
 }
 
-function BaseDropdown<Option> ({ allowAdd = false, className, defaultValue, dropdownClassName, help, isButton, isDisabled, isError, isFull, isMultiple, label, labelExtra, onAdd, onBlur, onChange, onClose, onSearch, options, placeholder, renderLabel, searchInput, style, transform, value, withEllipsis, withLabel }: Props<Option>): React.ReactElement<Props<Option>> {
+function BaseDropdown<Option> ({ allowAdd = false, className = '', defaultValue, dropdownClassName, help, isButton, isDisabled, isError, isFull, isMultiple, label, labelExtra, onAdd, onBlur, onChange, onClose, onSearch, options, placeholder, renderLabel, searchInput, transform, value, withEllipsis, withLabel }: Props<Option>): React.ReactElement<Props<Option>> {
   const lastUpdate = useRef<string>('');
-  const [stored, setStored] = useState<any>();
+  const [stored, setStored] = useState<string | undefined>();
 
   const _setStored = useCallback(
-    (value: any): void => {
+    (value: string): void => {
       const json = JSON.stringify({ v: value });
 
       if (lastUpdate.current !== json) {
@@ -79,7 +79,7 @@ function BaseDropdown<Option> ({ allowAdd = false, className, defaultValue, drop
 
   const _onChange = useCallback(
     (_: React.SyntheticEvent<HTMLElement> | null, { value }: DropdownProps): void =>
-      _setStored(value),
+      _setStored(value as string),
     [_setStored]
   );
 
@@ -120,7 +120,6 @@ function BaseDropdown<Option> ({ allowAdd = false, className, defaultValue, drop
         isFull={isFull}
         label={label}
         labelExtra={labelExtra}
-        style={style}
         withEllipsis={withEllipsis}
         withLabel={withLabel}
       >
@@ -167,6 +166,7 @@ const Dropdown = React.memo(styled(BaseDropdown)`
   }
 `) as unknown as IDropdown<any>;
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 (Dropdown as any).Header = SUIDropdown.Header;
 
 export default Dropdown;
diff --git a/packages/react-components/src/Editor.tsx b/packages/react-components/src/Editor.tsx
index 9bd79c8a8b..bcf1c08171 100644
--- a/packages/react-components/src/Editor.tsx
+++ b/packages/react-components/src/Editor.tsx
@@ -2,6 +2,12 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+// Something is seriously going wrong here...
+/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+
 import { BareProps } from '@polkadot/react-components/types';
 
 import CodeFlask from 'codeflask';
@@ -34,9 +40,9 @@ interface Props extends BareProps {
  *  />
  * ```
  */
-function Editor ({ className, code, isValid, onEdit }: Props): React.ReactElement<Props> {
+function Editor ({ className = '', code, isValid, onEdit }: Props): React.ReactElement<Props> {
   const [editorId] = useState(`flask-${Date.now()}`);
-  const editorRef = useRef<typeof CodeFlask | null>(null);
+  const editorRef = useRef<CodeFlask | null>(null);
 
   useEffect((): void => {
     const editor = new CodeFlask(`#${editorId}`, {
@@ -45,8 +51,8 @@ function Editor ({ className, code, isValid, onEdit }: Props): React.ReactElemen
     });
 
     editor.updateCode(code);
-    editor.editorRoot.addEventListener('keydown', (): void => {
-      editor.onUpdate(onEdit);
+    (editor as any).editorRoot.addEventListener('keydown', (): void => {
+      (editor as unknown as Record<string, (value: unknown) => void>).onUpdate(onEdit);
     });
 
     editorRef.current = editor;
diff --git a/packages/react-components/src/ErrorBoundary.tsx b/packages/react-components/src/ErrorBoundary.tsx
index a275025f9b..df00152cd1 100644
--- a/packages/react-components/src/ErrorBoundary.tsx
+++ b/packages/react-components/src/ErrorBoundary.tsx
@@ -12,7 +12,7 @@ interface Props extends I18nProps {
   children: React.ReactNode;
   doThrow?: boolean;
   onError?: () => void;
-  trigger?: any;
+  trigger?: unknown;
 }
 
 interface State {
@@ -53,10 +53,8 @@ class ErrorBoundary extends React.Component<Props> {
     return error
       ? (
         <article className='error'>
-          {t('Uncaught error. Something went wrong with the query and rendering of this component. {{message}}', {
-            replace: {
-              message: error.message
-            }
+          {t<string>('Uncaught error. Something went wrong with the query and rendering of this component. {{message}}', {
+            replace: { message: error.message }
           })}
         </article>
       )
diff --git a/packages/react-components/src/Event.tsx b/packages/react-components/src/Event.tsx
index 30cf597f28..38f882b4e7 100644
--- a/packages/react-components/src/Event.tsx
+++ b/packages/react-components/src/Event.tsx
@@ -17,7 +17,7 @@ export interface Props extends BareProps {
   value: Event;
 }
 
-function EventDisplay ({ children, className, style, value }: Props): React.ReactElement<Props> {
+function EventDisplay ({ children, className = '', value }: Props): React.ReactElement<Props> {
   const params = value.typeDef.map(({ type }): { type: TypeDef } => ({
     type: getTypeDef(type)
   }));
@@ -27,10 +27,7 @@ function EventDisplay ({ children, className, style, value }: Props): React.Reac
   }));
 
   return (
-    <div
-      className={classes('ui--Event', className)}
-      style={style}
-    >
+    <div className={classes('ui--Event', className)}>
       {children}
       <Params
         isDisabled
diff --git a/packages/react-components/src/Expander.tsx b/packages/react-components/src/Expander.tsx
index b517bd008f..bb62342a27 100644
--- a/packages/react-components/src/Expander.tsx
+++ b/packages/react-components/src/Expander.tsx
@@ -39,7 +39,7 @@ function formatMeta (meta?: Meta): React.ReactNode | null {
     : strings.slice(0, firstEmpty).join(' ');
 }
 
-function Expander ({ children, className, isOpen, summary, summaryMeta, summarySub, withDot, withHidden }: Props): React.ReactElement<Props> {
+function Expander ({ children, className = '', isOpen, summary, summaryMeta, summarySub, withDot, withHidden }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [isExpanded, toggleExpanded] = useToggle(isOpen);
   const headerMain = useMemo(
@@ -56,7 +56,7 @@ function Expander ({ children, className, isOpen, summary, summaryMeta, summaryS
   );
 
   return (
-    <div className={`ui--Expander ${isExpanded && 'isExpanded'} ${hasContent && 'hasContent'} ${className}`}>
+    <div className={`ui--Expander ${isExpanded ? 'isExpanded' : ''} ${hasContent ? 'hasContent' : ''} ${className}`}>
       <div
         className='ui--Expander-summary'
         onClick={toggleExpanded}
@@ -67,7 +67,7 @@ function Expander ({ children, className, isOpen, summary, summaryMeta, summaryS
             : withDot
               ? <Icon name='circle outline' />
               : undefined
-          }{headerMain || t('Details')}
+          }{headerMain || t<string>('Details')}
         </div>
         {headerSub && (
           <div className='ui--Expander-summary-sub'>{headerSub}</div>
diff --git a/packages/react-components/src/Forget.tsx b/packages/react-components/src/Forget.tsx
index c91b8d9b22..9317a778ef 100644
--- a/packages/react-components/src/Forget.tsx
+++ b/packages/react-components/src/Forget.tsx
@@ -18,27 +18,27 @@ interface Props {
   onForget: () => void;
 }
 
-function getContent (mode: Mode, t: (key: string) => string): React.ReactNode | null {
+function getContent (mode: Mode, t: <T = string> (key: string) => T): React.ReactNode | null {
   switch (mode) {
     case 'account':
       return (
         <>
-          <p>{t('You are about to remove this account from your list of available accounts. Once completed, should you need to access it again, you will have to re-create the account either via seed or via a backup file.')}</p>
-          <p>{t('This operation does not remove the history of the account from the chain, nor any associated funds from the account. The forget operation only limits your access to the account on this browser.')}</p>
+          <p>{t<string>('You are about to remove this account from your list of available accounts. Once completed, should you need to access it again, you will have to re-create the account either via seed or via a backup file.')}</p>
+          <p>{t<string>('This operation does not remove the history of the account from the chain, nor any associated funds from the account. The forget operation only limits your access to the account on this browser.')}</p>
         </>
       );
     case 'address':
       return (
         <>
-          <p>{t('You are about to remove this address from your address book. Once completed, should you need to access it again, you will have to re-add the address.')}</p>
-          <p>{t('This operation does not remove the history of the account from the chain, nor any associated funds from the account. The forget operation only limits your access to the address on this browser.')}</p>
+          <p>{t<string>('You are about to remove this address from your address book. Once completed, should you need to access it again, you will have to re-add the address.')}</p>
+          <p>{t<string>('This operation does not remove the history of the account from the chain, nor any associated funds from the account. The forget operation only limits your access to the address on this browser.')}</p>
         </>
       );
     case 'contract':
       return (
         <>
-          <p>{t('You are about to remove this contract from your list of available contracts. Once completed, should you need to access it again, you will have to manually add the contract\'s address in the Instantiate tab.')}</p>
-          <p>{t('This operation does not remove the history of the contract from the chain, nor any associated funds from its account. The forget operation only limits your access to the contract on this browser.')}</p>
+          <p>{t<string>('You are about to remove this contract from your list of available contracts. Once completed, should you need to access it again, you will have to manually add the contract\'s address in the Instantiate tab.')}</p>
+          <p>{t<string>('This operation does not remove the history of the contract from the chain, nor any associated funds from its account. The forget operation only limits your access to the contract on this browser.')}</p>
         </>
       );
     default:
@@ -46,20 +46,20 @@ function getContent (mode: Mode, t: (key: string) => string): React.ReactNode |
   }
 }
 
-function getHeaderText (mode: Mode, t: (key: string) => string): string {
+function getHeaderText (mode: Mode, t: <T = string> (key: string) => T): string {
   switch (mode) {
     case 'account':
-      return t('Confirm account removal');
+      return t<string>('Confirm account removal');
     case 'address':
-      return t('Confirm address removal');
+      return t<string>('Confirm address removal');
     case 'contract':
-      return t('Confirm contract removal');
+      return t<string>('Confirm contract removal');
     case 'code':
-      return t('Confirm code removal');
+      return t<string>('Confirm code removal');
   }
 }
 
-function renderContent (props: Props, t: (key: string) => string): React.ReactNode | null {
+function renderContent (props: Props, t: <T = string> (key: string) => T): React.ReactNode | null {
   const { address, mode = 'account' } = props;
 
   switch (mode) {
@@ -94,7 +94,7 @@ function Forget (props: Props): React.ReactElement<Props> {
         <Button
           icon='trash'
           isPrimary
-          label={t('Forget')}
+          label={t<string>('Forget')}
           onClick={onForget}
         />
       </Modal.Actions>
diff --git a/packages/react-components/src/HelpOverlay.tsx b/packages/react-components/src/HelpOverlay.tsx
index 30f6584e52..f0b50d372d 100644
--- a/packages/react-components/src/HelpOverlay.tsx
+++ b/packages/react-components/src/HelpOverlay.tsx
@@ -15,7 +15,7 @@ interface Props extends BareProps {
   md: string;
 }
 
-function HelpOverlay ({ className, md }: Props): React.ReactElement<Props> {
+function HelpOverlay ({ className = '', md }: Props): React.ReactElement<Props> {
   const [isVisible, toggleVisible] = useToggle();
 
   return (
diff --git a/packages/react-components/src/IconLink.tsx b/packages/react-components/src/IconLink.tsx
index c9ffd8b5cc..cafe65a72e 100644
--- a/packages/react-components/src/IconLink.tsx
+++ b/packages/react-components/src/IconLink.tsx
@@ -18,7 +18,7 @@ interface Props extends BareProps {
   onClick: () => void;
 }
 
-function IconLink ({ className, href, icon, label, onClick, rel, target }: Props): React.ReactElement<Props> {
+function IconLink ({ className = '', href, icon, label, onClick, rel, target }: Props): React.ReactElement<Props> {
   return (
     <a
       className={className}
diff --git a/packages/react-components/src/IdentityIcon.tsx b/packages/react-components/src/IdentityIcon.tsx
index d7727562ea..ec1b770db4 100644
--- a/packages/react-components/src/IdentityIcon.tsx
+++ b/packages/react-components/src/IdentityIcon.tsx
@@ -19,7 +19,7 @@ export function getIdentityTheme (systemName: string): 'substrate' {
   return ((uiSettings.icon === 'default' && getSystemIcon(systemName)) || uiSettings.icon) as 'substrate';
 }
 
-function IdentityIcon ({ className, onCopy, prefix, size = 24, theme, value }: Props): React.ReactElement<Props> {
+function IdentityIcon ({ className = '', onCopy, prefix, size = 24, theme, value }: Props): React.ReactElement<Props> {
   const { systemName } = useApi();
   const { t } = useTranslation();
   const { queueAction } = useContext(StatusContext);
@@ -40,8 +40,8 @@ function IdentityIcon ({ className, onCopy, prefix, size = 24, theme, value }: P
       onCopy && onCopy(account);
       queueAction && queueAction({
         account,
-        action: t('clipboard'),
-        message: t('address copied'),
+        action: t<string>('clipboard'),
+        message: t<string>('address copied'),
         status: 'queued'
       });
     },
diff --git a/packages/react-components/src/InfoForInput.tsx b/packages/react-components/src/InfoForInput.tsx
index f416dacb5f..c2276a1ead 100644
--- a/packages/react-components/src/InfoForInput.tsx
+++ b/packages/react-components/src/InfoForInput.tsx
@@ -5,7 +5,6 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { classes } from './util';
 import Labelled from './Labelled';
 
 interface Props {
@@ -14,10 +13,10 @@ interface Props {
   type?: 'error' | 'info' | 'warning';
 }
 
-function InfoForInput ({ children, className, type = 'info' }: Props): React.ReactElement<Props> {
+function InfoForInput ({ children, className = '', type = 'info' }: Props): React.ReactElement<Props> {
   return (
     <Labelled>
-      <div className={classes(className, type)}>{children}</div>
+      <div className={`${className} ${type}`}>{children}</div>
     </Labelled>
   );
 }
diff --git a/packages/react-components/src/Input.tsx b/packages/react-components/src/Input.tsx
index 864f62f3c7..5563c5e437 100644
--- a/packages/react-components/src/Input.tsx
+++ b/packages/react-components/src/Input.tsx
@@ -15,7 +15,7 @@ type Input$Type = 'number' | 'password' | 'text';
 interface Props extends BareProps {
   autoFocus?: boolean;
   children?: React.ReactNode;
-  defaultValue?: any;
+  defaultValue?: string | null;
   help?: React.ReactNode;
   icon?: React.ReactNode;
   inputClassName?: string;
@@ -29,9 +29,9 @@ interface Props extends BareProps {
   isReadOnly?: boolean;
   label?: React.ReactNode;
   labelExtra?: React.ReactNode;
-  max?: any;
+  max?: number;
   maxLength?: number;
-  min?: any;
+  min?: number;
   name?: string;
   onEnter?: boolean | VoidFn;
   onEscape?: () => void;
@@ -44,7 +44,7 @@ interface Props extends BareProps {
   placeholder?: string;
   tabIndex?: number;
   type?: Input$Type;
-  value?: any;
+  value?: string | null;
   withLabel?: boolean;
   withEllipsis?: boolean;
 }
@@ -90,7 +90,7 @@ const isSelectAll = (key: string, isPreKeyDown: boolean): boolean =>
 
 let counter = 0;
 
-function Input ({ autoFocus = false, children, className, defaultValue, help, icon, inputClassName, isAction = false, isDisabled = false, isDisabledError = false, isEditable = false, isError = false, isFull = false, isHidden = false, isReadOnly = false, label, labelExtra, max, maxLength, min, name, onBlur, onChange, onEnter, onEscape, onKeyDown, onKeyUp, onPaste, placeholder, style, tabIndex, type = 'text', value, withEllipsis, withLabel }: Props): React.ReactElement<Props> {
+function Input ({ autoFocus = false, children, className = '', defaultValue, help, icon, inputClassName, isAction = false, isDisabled = false, isDisabledError = false, isEditable = false, isError = false, isFull = false, isHidden = false, isReadOnly = false, label, labelExtra, max, maxLength, min, name, onBlur, onChange, onEnter, onEscape, onKeyDown, onKeyUp, onPaste, placeholder, tabIndex, type = 'text', value, withEllipsis, withLabel }: Props): React.ReactElement<Props> {
   const [stateName] = useState(`in_${counter++}_at_${Date.now()}`);
 
   const _onBlur = useCallback(
@@ -115,12 +115,12 @@ function Input ({ autoFocus = false, children, className, defaultValue, help, ic
       onKeyUp && onKeyUp(event);
 
       if (onEnter && event.keyCode === 13) {
-        (event.target as any).blur();
+        (event.target as HTMLInputElement).blur();
         isFunction(onEnter) && onEnter();
       }
 
       if (onEscape && event.keyCode === 27) {
-        (event.target as any).blur();
+        (event.target as HTMLInputElement).blur();
         onEscape();
       }
     },
@@ -140,7 +140,6 @@ function Input ({ autoFocus = false, children, className, defaultValue, help, ic
       isFull={isFull}
       label={label}
       labelExtra={labelExtra}
-      style={style}
       withEllipsis={withEllipsis}
       withLabel={withLabel}
     >
diff --git a/packages/react-components/src/InputAddress/KeyPair.tsx b/packages/react-components/src/InputAddress/KeyPair.tsx
index e9cc0f7967..2c2849bd17 100644
--- a/packages/react-components/src/InputAddress/KeyPair.tsx
+++ b/packages/react-components/src/InputAddress/KeyPair.tsx
@@ -16,12 +16,9 @@ interface Props {
   style?: Record<string, string>;
 }
 
-function KeyPair ({ address, className, style }: Props): React.ReactElement<Props> {
+function KeyPair ({ address, className = '' }: Props): React.ReactElement<Props> {
   return (
-    <div
-      className={['ui--KeyPair', className].join(' ')}
-      style={style}
-    >
+    <div className={['ui--KeyPair', className].join(' ')}>
       <IdentityIcon
         className='icon'
         value={address}
diff --git a/packages/react-components/src/InputAddress/index.tsx b/packages/react-components/src/InputAddress/index.tsx
index 1a4dc8cab9..4789dcf556 100644
--- a/packages/react-components/src/InputAddress/index.tsx
+++ b/packages/react-components/src/InputAddress/index.tsx
@@ -56,7 +56,7 @@ const STORAGE_KEY = 'options:InputAddress';
 const DEFAULT_TYPE = 'all';
 const MULTI_DEFAULT: string[] = [];
 
-function transformToAddress (value: string | Uint8Array): string | null {
+function transformToAddress (value?: string | Uint8Array | null): string | null {
   try {
     return addressToAddress(value) || null;
   } catch (error) {
@@ -99,11 +99,11 @@ function createOption (address: string): Option {
   return createItem(createKeyringItem(address, name), !isRecent);
 }
 
-function readOptions (): Record<string, any> {
-  return store.get(STORAGE_KEY) || { defaults: {} };
+function readOptions (): Record<string, Record<string, string>> {
+  return store.get(STORAGE_KEY) as Record<string, Record<string, string>> || { defaults: {} };
 }
 
-function getLastValue (type: KeyringOption$Type = DEFAULT_TYPE): any {
+function getLastValue (type: KeyringOption$Type = DEFAULT_TYPE): string {
   const options = readOptions();
 
   return options.defaults[type];
@@ -132,7 +132,7 @@ class InputAddress extends React.PureComponent<Props, State> {
   }
 
   public render (): React.ReactNode {
-    const { className, defaultValue, help, hideAddress = false, isDisabled = false, isError, isMultiple, label, labelExtra, options, optionsAll, placeholder, type = DEFAULT_TYPE, style, withEllipsis, withLabel } = this.props;
+    const { className = '', defaultValue, help, hideAddress = false, isDisabled = false, isError, isMultiple, label, labelExtra, options, optionsAll, placeholder, type = DEFAULT_TYPE, withEllipsis, withLabel } = this.props;
     const { value } = this.state;
     const hasOptions = (options && options.length !== 0) || (optionsAll && Object.keys(optionsAll[type]).length !== 0);
 
@@ -181,7 +181,6 @@ class InputAddress extends React.PureComponent<Props, State> {
             ? this.renderLabel
             : undefined
         }
-        style={style}
         value={
           isMultiple && !value
             ? MULTI_DEFAULT
@@ -209,8 +208,8 @@ class InputAddress extends React.PureComponent<Props, State> {
       : undefined;
   }
 
-  private hasValue (test?: Uint8Array | string): boolean {
-    return this.getFiltered().some(({ value }): boolean => test === value);
+  private hasValue (test?: Uint8Array | string | null): boolean {
+    return this.getFiltered().some(({ value }) => test === value);
   }
 
   private getFiltered (): Option[] {
@@ -218,7 +217,7 @@ class InputAddress extends React.PureComponent<Props, State> {
 
     return !optionsAll
       ? []
-      : optionsAll[type].filter(({ value }): boolean => !filter || (!!value && filter.includes(value)));
+      : optionsAll[type].filter(({ value }) => !filter || (!!value && filter.includes(value)));
   }
 
   private onChange = (address: string): void => {
diff --git a/packages/react-components/src/InputAddressMulti/index.tsx b/packages/react-components/src/InputAddressMulti/index.tsx
index b89f7d67d3..c2480bf006 100644
--- a/packages/react-components/src/InputAddressMulti/index.tsx
+++ b/packages/react-components/src/InputAddressMulti/index.tsx
@@ -77,7 +77,7 @@ interface Props {
 
 // NOTE Drag code above, disabled since it has massive performance implications
 
-function InputAddressMulti ({ available, availableLabel, className, defaultValue, maxCount, onChange, valueLabel }: Props): React.ReactElement<Props> {
+function InputAddressMulti ({ available, availableLabel, className = '', defaultValue, maxCount, onChange, valueLabel }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [_filter, setFilter] = useState<string>('');
   const [selected, setSelected] = useState<string[]>([]);
@@ -119,7 +119,7 @@ function InputAddressMulti ({ available, availableLabel, className, defaultValue
         autoFocus
         className='ui--InputAddressMulti-Input label-small'
         onChange={setFilter}
-        placeholder={t('filter by name, address, or account index')}
+        placeholder={t<string>('filter by name, address, or account index')}
         value={_filter}
         withLabel={false}
       />
diff --git a/packages/react-components/src/InputAddressSimple.tsx b/packages/react-components/src/InputAddressSimple.tsx
index f4aa49a84e..afd3056481 100644
--- a/packages/react-components/src/InputAddressSimple.tsx
+++ b/packages/react-components/src/InputAddressSimple.tsx
@@ -22,7 +22,7 @@ interface Props extends BareProps {
   onEscape?: () => void;
 }
 
-function InputAddressSimple ({ children, className, defaultValue, help, isFull, label, onChange, onEnter, onEscape }: Props): React.ReactElement<Props> {
+function InputAddressSimple ({ children, className = '', defaultValue, help, isFull, label, onChange, onEnter, onEscape }: Props): React.ReactElement<Props> {
   const [address, setAddress] = useState<string | null>(defaultValue || null);
 
   const _onChange = useCallback(
diff --git a/packages/react-components/src/InputBalance.tsx b/packages/react-components/src/InputBalance.tsx
index 4239fb379c..011527a20f 100644
--- a/packages/react-components/src/InputBalance.tsx
+++ b/packages/react-components/src/InputBalance.tsx
@@ -56,7 +56,7 @@ function reformat (value: string | BN, isDisabled?: boolean): string {
   return formatBalance(value, { forceUnit: '-', withSi: false }).replace(',', isDisabled ? ',' : '');
 }
 
-function InputBalance ({ autoFocus, className, defaultValue: inDefault, help, isDisabled, isError, isFull, isZeroable, label, labelExtra, maxValue, onChange, onEnter, onEscape, placeholder, style, value, withEllipsis, withLabel, withMax }: Props): React.ReactElement<Props> {
+function InputBalance ({ autoFocus, className = '', defaultValue: inDefault, help, isDisabled, isError, isFull, isZeroable, label, labelExtra, maxValue, onChange, onEnter, onEscape, placeholder, value, withEllipsis, withLabel, withMax }: Props): React.ReactElement<Props> {
   const [defaultValue, setDefaultValue] = useState<string | undefined>();
 
   useEffect((): void => {
@@ -84,7 +84,6 @@ function InputBalance ({ autoFocus, className, defaultValue: inDefault, help, is
       onEnter={onEnter}
       onEscape={onEscape}
       placeholder={placeholder}
-      style={style}
       value={value}
       withEllipsis={withEllipsis}
       withLabel={withLabel}
diff --git a/packages/react-components/src/InputConsts/SelectKey.tsx b/packages/react-components/src/InputConsts/SelectKey.tsx
index 8f66f236c6..30a7619326 100644
--- a/packages/react-components/src/InputConsts/SelectKey.tsx
+++ b/packages/react-components/src/InputConsts/SelectKey.tsx
@@ -30,7 +30,7 @@ function transform ({ value }: Props): (method: string) => ConstValueBase {
 }
 
 function SelectKey (props: Props): React.ReactElement<Props> | null {
-  const { className, isError, onChange, options, style, value } = props;
+  const { className = '', isError, onChange, options, value } = props;
 
   if (!options.length) {
     return null;
@@ -42,7 +42,6 @@ function SelectKey (props: Props): React.ReactElement<Props> | null {
       isError={isError}
       onChange={onChange}
       options={options}
-      style={style}
       transform={transform(props)}
       value={value.method}
       withLabel={false}
diff --git a/packages/react-components/src/InputConsts/SelectSection.tsx b/packages/react-components/src/InputConsts/SelectSection.tsx
index 1b2c69a971..4002a61fc2 100644
--- a/packages/react-components/src/InputConsts/SelectSection.tsx
+++ b/packages/react-components/src/InputConsts/SelectSection.tsx
@@ -19,7 +19,7 @@ interface Props extends BareProps {
   value: ConstValueBase;
 }
 
-function SelectSection ({ className, defaultValue, isError, onChange, options, style, value: { section } }: Props): React.ReactElement<Props> {
+function SelectSection ({ className = '', defaultValue, isError, onChange, options, value: { section } }: Props): React.ReactElement<Props> {
   return (
     <Dropdown
       className={classes('ui--DropdownLinked-Sections', className)}
@@ -27,7 +27,6 @@ function SelectSection ({ className, defaultValue, isError, onChange, options, s
       isError={isError}
       onChange={onChange}
       options={options}
-      style={style}
       value={section}
       withLabel={false}
     />
diff --git a/packages/react-components/src/InputConsts/index.tsx b/packages/react-components/src/InputConsts/index.tsx
index 13766e4d74..60a6a29ae1 100644
--- a/packages/react-components/src/InputConsts/index.tsx
+++ b/packages/react-components/src/InputConsts/index.tsx
@@ -23,7 +23,6 @@ interface Props {
   isError?: boolean;
   label: React.ReactNode;
   onChange?: (value: ConstValue) => void;
-  style?: any;
   withLabel?: boolean;
 }
 
@@ -40,7 +39,7 @@ function getValue (api: ApiPromise, { method, section }: ConstValueBase): ConstV
   };
 }
 
-function InputConsts ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
+function InputConsts ({ className = '', defaultValue, help, label, onChange, withLabel }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(keyOptions(api, defaultValue.section));
   const [optionsSection] = useState<DropdownOptions>(sectionOptions(api));
@@ -81,7 +80,6 @@ function InputConsts ({ className, defaultValue, help, label, onChange, style, w
       className={className}
       help={help}
       label={label}
-      style={style}
       withLabel={withLabel}
     >
       <SelectSection
diff --git a/packages/react-components/src/InputError.tsx b/packages/react-components/src/InputError.tsx
index 1c477f34d4..7d08059146 100644
--- a/packages/react-components/src/InputError.tsx
+++ b/packages/react-components/src/InputError.tsx
@@ -17,12 +17,9 @@ const defaultLabel: React.ReactNode = (
   <div>&nbsp;</div>
 );
 
-function InputError ({ className, label = defaultLabel, style }: Props): React.ReactElement<Props> {
+function InputError ({ className = '', label = defaultLabel }: Props): React.ReactElement<Props> {
   return (
-    <div
-      className={classes('ui--InputError', className)}
-      style={style}
-    >
+    <div className={classes('ui--InputError', className)}>
       <Label
         color='red'
         pointing='left'
diff --git a/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx b/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx
index aa827913eb..d2fc549797 100644
--- a/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx
+++ b/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx
@@ -12,16 +12,12 @@ interface Props {
   className?: string;
   help?: React.ReactNode;
   label: React.ReactNode;
-  style?: any;
   withLabel?: boolean;
 }
 
-function LinkedWrapper ({ children, className, help, label, style, withLabel }: Props): React.ReactElement<Props> {
+function LinkedWrapper ({ children, className = '', help, label, withLabel }: Props): React.ReactElement<Props> {
   return (
-    <div
-      className={className}
-      style={style}
-    >
+    <div className={className}>
       <Labelled
         help={help}
         label={label}
diff --git a/packages/react-components/src/InputExtrinsic/SelectMethod.tsx b/packages/react-components/src/InputExtrinsic/SelectMethod.tsx
index 7546ec6fe8..57fe0d5449 100644
--- a/packages/react-components/src/InputExtrinsic/SelectMethod.tsx
+++ b/packages/react-components/src/InputExtrinsic/SelectMethod.tsx
@@ -20,7 +20,7 @@ interface Props extends BareProps {
   value: SubmittableExtrinsicFunction<'promise'>;
 }
 
-function SelectMethod ({ api, className, isError, onChange, options, style, value }: Props): React.ReactElement<Props> | null {
+function SelectMethod ({ api, className = '', isError, onChange, options, value }: Props): React.ReactElement<Props> | null {
   const transform = useCallback(
     (method: string): SubmittableExtrinsicFunction<'promise'> =>
       api.tx[value.section][method],
@@ -37,7 +37,6 @@ function SelectMethod ({ api, className, isError, onChange, options, style, valu
       isError={isError}
       onChange={onChange}
       options={options}
-      style={style}
       transform={transform}
       value={value.method}
       withLabel={false}
diff --git a/packages/react-components/src/InputExtrinsic/SelectSection.tsx b/packages/react-components/src/InputExtrinsic/SelectSection.tsx
index dcc944a05d..10c6c8735e 100644
--- a/packages/react-components/src/InputExtrinsic/SelectSection.tsx
+++ b/packages/react-components/src/InputExtrinsic/SelectSection.tsx
@@ -19,7 +19,7 @@ interface Props extends BareProps {
   value: SubmittableExtrinsicFunction<'promise'>;
 }
 
-function SelectSection ({ className, defaultValue, isError, onChange, options, style, value }: Props): React.ReactElement<Props> {
+function SelectSection ({ className = '', defaultValue, isError, onChange, options, value }: Props): React.ReactElement<Props> {
   return (
     <Dropdown
       className={classes('ui--DropdownLinked-Sections', className)}
@@ -27,7 +27,6 @@ function SelectSection ({ className, defaultValue, isError, onChange, options, s
       isError={isError}
       onChange={onChange}
       options={options}
-      style={style}
       value={value.section}
       withLabel={false}
     />
diff --git a/packages/react-components/src/InputExtrinsic/index.tsx b/packages/react-components/src/InputExtrinsic/index.tsx
index e5e714becf..3fb832c261 100644
--- a/packages/react-components/src/InputExtrinsic/index.tsx
+++ b/packages/react-components/src/InputExtrinsic/index.tsx
@@ -23,11 +23,10 @@ interface Props {
   isPrivate?: boolean;
   label: React.ReactNode;
   onChange: (value: SubmittableExtrinsicFunction<'promise'>) => void;
-  style?: any;
   withLabel?: boolean;
 }
 
-function InputExtrinsic ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
+function InputExtrinsic ({ className = '', defaultValue, help, label, onChange, withLabel }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(methodOptions(api, defaultValue.section));
   const [optionsSection] = useState<DropdownOptions>(sectionOptions(api));
@@ -65,7 +64,6 @@ function InputExtrinsic ({ className, defaultValue, help, label, onChange, style
       className={className}
       help={help}
       label={label}
-      style={style}
       withLabel={withLabel}
     >
       <SelectSection
diff --git a/packages/react-components/src/InputFile.tsx b/packages/react-components/src/InputFile.tsx
index 842bfafea3..b789bdd5ac 100644
--- a/packages/react-components/src/InputFile.tsx
+++ b/packages/react-components/src/InputFile.tsx
@@ -53,7 +53,7 @@ function convertResult (result: ArrayBuffer, convertHex?: boolean): Uint8Array {
   return data;
 }
 
-function InputFile ({ accept, className, clearContent, convertHex, help, isDisabled, isError = false, label, onChange, placeholder, withEllipsis, withLabel }: InputFileProps): React.ReactElement<InputFileProps> {
+function InputFile ({ accept, className = '', clearContent, convertHex, help, isDisabled, isError = false, label, onChange, placeholder, withEllipsis, withLabel }: InputFileProps): React.ReactElement<InputFileProps> {
   const { t } = useTranslation();
   const dropRef = createRef<DropzoneRef>();
   const [file, setFile] = useState<FileState | undefined>();
@@ -99,8 +99,8 @@ function InputFile ({ accept, className, clearContent, convertHex, help, isDisab
           <em className='label' >
             {
               !file || clearContent
-                ? placeholder || t('click to select or drag and drop the file here')
-                : placeholder || t('{{name}} ({{size}} bytes)', {
+                ? placeholder || t<string>('click to select or drag and drop the file here')
+                : placeholder || t<string>('{{name}} ({{size}} bytes)', {
                   replace: {
                     name: file.name,
                     size: formatNumber(file.size)
diff --git a/packages/react-components/src/InputNumber.tsx b/packages/react-components/src/InputNumber.tsx
index cede830565..2a8793d801 100644
--- a/packages/react-components/src/InputNumber.tsx
+++ b/packages/react-components/src/InputNumber.tsx
@@ -161,7 +161,7 @@ function getValues (value: BN | string = ZERO, si: SiDef | null, bitLength: BitL
     : getValuesFromString(value, si, bitLength, isZeroable, maxValue);
 }
 
-function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, className, defaultValue, help, isDecimal, isFull, isSi, isDisabled, isError = false, isZeroable = true, label, labelExtra, maxLength, maxValue, onChange, onEnter, onEscape, placeholder, style, value: propsValue }: Props): React.ReactElement<Props> {
+function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, className = '', defaultValue, help, isDecimal, isFull, isSi, isDisabled, isError = false, isZeroable = true, label, labelExtra, maxLength, maxValue, onChange, onEnter, onEscape, placeholder, value: propsValue }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [si, setSi] = useState<SiDef | null>(isSi ? formatBalance.findSi('-') : null);
   const [isPreKeyDown, setIsPreKeyDown] = useState(false);
@@ -259,8 +259,7 @@ function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, className, def
       onKeyDown={_onKeyDown}
       onKeyUp={_onKeyUp}
       onPaste={_onPaste}
-      placeholder={placeholder || t('Positive number')}
-      style={style}
+      placeholder={placeholder || t<string>('Positive number')}
       type='text'
       value={value}
     >
diff --git a/packages/react-components/src/InputRpc/SelectMethod.tsx b/packages/react-components/src/InputRpc/SelectMethod.tsx
index c091f5f8c6..0d83e7f700 100644
--- a/packages/react-components/src/InputRpc/SelectMethod.tsx
+++ b/packages/react-components/src/InputRpc/SelectMethod.tsx
@@ -27,7 +27,7 @@ function transform ({ value: { section } }: Props): (method: string) => Definiti
 }
 
 function SelectMethod (props: Props): React.ReactElement<Props> | null {
-  const { className, isError, onChange, options, style, value } = props;
+  const { className = '', isError, onChange, options, value } = props;
 
   if (!options.length) {
     return null;
@@ -39,7 +39,6 @@ function SelectMethod (props: Props): React.ReactElement<Props> | null {
       isError={isError}
       onChange={onChange}
       options={options}
-      style={style}
       transform={transform(props)}
       value={value.method}
       withLabel={false}
diff --git a/packages/react-components/src/InputRpc/SelectSection.tsx b/packages/react-components/src/InputRpc/SelectSection.tsx
index 0ebea36315..e38e4df6c3 100644
--- a/packages/react-components/src/InputRpc/SelectSection.tsx
+++ b/packages/react-components/src/InputRpc/SelectSection.tsx
@@ -19,7 +19,7 @@ interface Props extends BareProps {
   value: DefinitionRpcExt;
 }
 
-function SelectSection ({ className, defaultValue, isError, onChange, options, style, value }: Props): React.ReactElement<Props> {
+function SelectSection ({ className = '', defaultValue, isError, onChange, options, value }: Props): React.ReactElement<Props> {
   return (
     <Dropdown
       className={classes('ui--DropdownLinked-Sections', className)}
@@ -27,7 +27,6 @@ function SelectSection ({ className, defaultValue, isError, onChange, options, s
       isError={isError}
       onChange={onChange}
       options={options}
-      style={style}
       value={value.section}
       withLabel={false}
     />
diff --git a/packages/react-components/src/InputRpc/index.tsx b/packages/react-components/src/InputRpc/index.tsx
index 43c39c18cd..2915a34151 100644
--- a/packages/react-components/src/InputRpc/index.tsx
+++ b/packages/react-components/src/InputRpc/index.tsx
@@ -24,11 +24,10 @@ interface Props {
   isError?: boolean;
   label: React.ReactNode;
   onChange?: (value: DefinitionRpcExt) => void;
-  style?: any;
   withLabel?: boolean;
 }
 
-function InputRpc ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
+function InputRpc ({ className = '', defaultValue, help, label, onChange, withLabel }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(methodOptions(api, defaultValue.section));
   const [optionsSection] = useState<DropdownOptions>(sectionOptions(api));
@@ -69,7 +68,6 @@ function InputRpc ({ className, defaultValue, help, label, onChange, style, with
       className={className}
       help={help}
       label={label}
-      style={style}
       withLabel={withLabel}
     >
       <SelectSection
diff --git a/packages/react-components/src/InputRpc/options/method.tsx b/packages/react-components/src/InputRpc/options/method.tsx
index a8cf7f2e6f..dfed8bd247 100644
--- a/packages/react-components/src/InputRpc/options/method.tsx
+++ b/packages/react-components/src/InputRpc/options/method.tsx
@@ -12,12 +12,12 @@ import jsonrpc from '@polkadot/types/interfaces/jsonrpc';
 export default function createOptions (api: ApiPromise, sectionName: string): DropdownOptions {
   const section = jsonrpc[sectionName];
 
-  if (!section || Object.keys((api.rpc as any)[sectionName]).length === 0) {
+  if (!section || Object.keys((api.rpc as Record<string, Record<string, unknown>>)[sectionName]).length === 0) {
     return [];
   }
 
   return Object
-    .keys((api.rpc as any)[sectionName])
+    .keys((api.rpc as Record<string, Record<string, unknown>>)[sectionName])
     .sort()
     .map((methodName) => section[methodName])
     .filter((ext): ext is DefinitionRpcExt => !!ext)
diff --git a/packages/react-components/src/InputRpc/options/section.ts b/packages/react-components/src/InputRpc/options/section.ts
index 324bacff75..9aefbf4236 100644
--- a/packages/react-components/src/InputRpc/options/section.ts
+++ b/packages/react-components/src/InputRpc/options/section.ts
@@ -10,7 +10,7 @@ export default function createOptions (api: ApiPromise): DropdownOptions {
   return Object
     .keys(api.rpc)
     .sort()
-    .filter((section): boolean => Object.keys((api.rpc as any)[section]).length !== 0)
+    .filter((section): boolean => Object.keys((api.rpc as Record<string, Record<string, unknown>>)[section]).length !== 0)
     .map((name): { text: string; value: string } => ({
       text: name,
       value: name
diff --git a/packages/react-components/src/InputStorage/SelectKey.tsx b/packages/react-components/src/InputStorage/SelectKey.tsx
index 492797961b..4b8616db2b 100644
--- a/packages/react-components/src/InputStorage/SelectKey.tsx
+++ b/packages/react-components/src/InputStorage/SelectKey.tsx
@@ -22,6 +22,7 @@ interface Props extends BareProps {
 
 function transform (api: ApiPromise, { value }: Props): (method: string) => StorageEntryPromise {
   return function (method: string): StorageEntryPromise {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return api.query[value.creator.section]
       ? api.query[value.creator.section][method] as any
       : value;
@@ -30,7 +31,7 @@ function transform (api: ApiPromise, { value }: Props): (method: string) => Stor
 
 function SelectKey (props: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
-  const { className, isError, onChange, options, style, value } = props;
+  const { className = '', isError, onChange, options, value } = props;
 
   if (!options.length) {
     return null;
@@ -42,7 +43,6 @@ function SelectKey (props: Props): React.ReactElement<Props> | null {
       isError={isError}
       onChange={onChange}
       options={options}
-      style={style}
       transform={transform(api, props)}
       value={value.creator.method}
       withLabel={false}
diff --git a/packages/react-components/src/InputStorage/SelectSection.tsx b/packages/react-components/src/InputStorage/SelectSection.tsx
index c8d3efa5f1..707dade1f7 100644
--- a/packages/react-components/src/InputStorage/SelectSection.tsx
+++ b/packages/react-components/src/InputStorage/SelectSection.tsx
@@ -19,7 +19,7 @@ interface Props extends BareProps {
   value: StorageEntryPromise;
 }
 
-function SelectSection ({ className, defaultValue, isError, onChange, options, style, value: { creator: { section } } }: Props): React.ReactElement<Props> {
+function SelectSection ({ className = '', defaultValue, isError, onChange, options, value: { creator: { section } } }: Props): React.ReactElement<Props> {
   return (
     <Dropdown
       className={classes('ui--DropdownLinked-Sections', className)}
@@ -27,7 +27,6 @@ function SelectSection ({ className, defaultValue, isError, onChange, options, s
       isError={isError}
       onChange={onChange}
       options={options}
-      style={style}
       value={section}
       withLabel={false}
     />
diff --git a/packages/react-components/src/InputStorage/index.tsx b/packages/react-components/src/InputStorage/index.tsx
index b940e37e3e..db0de931ec 100644
--- a/packages/react-components/src/InputStorage/index.tsx
+++ b/packages/react-components/src/InputStorage/index.tsx
@@ -23,11 +23,10 @@ interface Props {
   isError?: boolean;
   label: React.ReactNode;
   onChange?: (value: StorageEntryPromise) => void;
-  style?: any;
   withLabel?: boolean;
 }
 
-function InputStorage ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
+function InputStorage ({ className = '', defaultValue, help, label, onChange, withLabel }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(keyOptions(api, defaultValue.creator.section));
   const [optionsSection] = useState<DropdownOptions>(sectionOptions(api));
@@ -65,7 +64,6 @@ function InputStorage ({ className, defaultValue, help, label, onChange, style,
       className={className}
       help={help}
       label={label}
-      style={style}
       withLabel={withLabel}
     >
       <SelectSection
diff --git a/packages/react-components/src/InputStorage/options/key.tsx b/packages/react-components/src/InputStorage/options/key.tsx
index eb78e8c450..47be84c976 100644
--- a/packages/react-components/src/InputStorage/options/key.tsx
+++ b/packages/react-components/src/InputStorage/options/key.tsx
@@ -24,7 +24,7 @@ export default function createOptions (api: ApiPromise, sectionName: string): Dr
       const input = type.isMap
         ? type.asMap.key.toString()
         : type.isDoubleMap
-          ? `${type.asDoubleMap.key1}, ${type.asDoubleMap.key2}`
+          ? `${type.asDoubleMap.key1.toString()}, ${type.asDoubleMap.key2.toString()}`
           : '';
       const output = method.meta.modifier.isOptional
         ? `Option<${unwrapStorageType(type)}>`
diff --git a/packages/react-components/src/InputTags.tsx b/packages/react-components/src/InputTags.tsx
index 5f1bc1b122..c30a93c0c0 100644
--- a/packages/react-components/src/InputTags.tsx
+++ b/packages/react-components/src/InputTags.tsx
@@ -33,7 +33,7 @@ interface Props extends BareProps {
 }
 
 function loadTags (): string[] {
-  return (store.get('tags') || ['Default']).sort();
+  return ((store.get('tags') as string[]) || ['Default']).sort();
 }
 
 function valueToOption (value: string): Option {
@@ -55,7 +55,7 @@ function onAddTag (value: string): void {
   saveTags(tags);
 }
 
-function InputTags ({ allowAdd = true, className, defaultValue, help, isDisabled, isError, label, onBlur, onChange, onClose, placeholder, searchInput, value, withLabel }: Props): React.ReactElement<Props> {
+function InputTags ({ allowAdd = true, className = '', defaultValue, help, isDisabled, isError, label, onBlur, onChange, onClose, placeholder, searchInput, value, withLabel }: Props): React.ReactElement<Props> {
   return (
     <Dropdown
       allowAdd={allowAdd && !isDisabled}
diff --git a/packages/react-components/src/Inset.tsx b/packages/react-components/src/Inset.tsx
index c4bcabdee6..01b718f099 100644
--- a/packages/react-components/src/Inset.tsx
+++ b/packages/react-components/src/Inset.tsx
@@ -22,7 +22,7 @@ export interface InsetProps {
   withBottomMargin?: boolean;
 }
 
-function Inset ({ children, className, header, href, isCollapsible, isError, isSuccess, withBottomMargin, withTopMargin }: InsetProps): React.ReactElement<InsetProps> | null {
+function Inset ({ children, className = '', header, href, isCollapsible, isError, isSuccess, withBottomMargin, withTopMargin }: InsetProps): React.ReactElement<InsetProps> | null {
   const history = useHistory();
   const [isCollapsed, toggleCollapsed] = useToggle();
 
diff --git a/packages/react-components/src/Label.tsx b/packages/react-components/src/Label.tsx
index 908b828c7f..ad2b48567f 100644
--- a/packages/react-components/src/Label.tsx
+++ b/packages/react-components/src/Label.tsx
@@ -14,7 +14,7 @@ interface Props extends BareProps {
   withEllipsis?: boolean;
 }
 
-function Label ({ className, help, label, withEllipsis }: Props): React.ReactElement<Props> {
+function Label ({ className = '', help, label, withEllipsis }: Props): React.ReactElement<Props> {
   return (
     <label className={className}>
       {
diff --git a/packages/react-components/src/LabelHelp.tsx b/packages/react-components/src/LabelHelp.tsx
index 5e6c50e20e..2848910c73 100644
--- a/packages/react-components/src/LabelHelp.tsx
+++ b/packages/react-components/src/LabelHelp.tsx
@@ -18,15 +18,12 @@ interface Props extends BareProps {
 
 let id = 0;
 
-function LabelHelp ({ className, help, style }: Props): React.ReactElement<Props> {
+function LabelHelp ({ className = '', help }: Props): React.ReactElement<Props> {
   const [trigger] = useState(`label-help-${++id}`);
   const [isTooltipOpen, toggleTooltip] = useToggle();
 
   return (
-    <div
-      className={classes('ui--LabelHelp', className)}
-      style={style}
-    >
+    <div className={classes('ui--LabelHelp', className)}>
       <Icon
         data-for={trigger}
         data-tip
diff --git a/packages/react-components/src/Labelled.tsx b/packages/react-components/src/Labelled.tsx
index 253b912741..1d59d5c774 100644
--- a/packages/react-components/src/Labelled.tsx
+++ b/packages/react-components/src/Labelled.tsx
@@ -132,7 +132,7 @@ const Wrapper = styled.div`
   }
 `;
 
-function Labelled ({ className, children, help, isFull, isHidden, isOuter, isSmall, label = defaultLabel, labelExtra, style, withEllipsis, withLabel = true }: Props): React.ReactElement<Props> | null {
+function Labelled ({ className = '', children, help, isFull, isHidden, isOuter, isSmall, label = defaultLabel, labelExtra, withEllipsis, withLabel = true }: Props): React.ReactElement<Props> | null {
   if (isHidden) {
     return null;
   } else if (!withLabel) {
@@ -142,10 +142,7 @@ function Labelled ({ className, children, help, isFull, isHidden, isOuter, isSma
   }
 
   return (
-    <Wrapper
-      className={classes('ui--Labelled', isSmall && 'label-small', isFull && 'label-full', isOuter && 'label-outer', className)}
-      style={style}
-    >
+    <Wrapper className={classes('ui--Labelled', isSmall && 'label-small', isFull && 'label-full', isOuter && 'label-outer', className)}>
       <label>
         {
           withEllipsis
diff --git a/packages/react-components/src/LinkExternal.tsx b/packages/react-components/src/LinkExternal.tsx
index 99c868f266..33e0a94a62 100644
--- a/packages/react-components/src/LinkExternal.tsx
+++ b/packages/react-components/src/LinkExternal.tsx
@@ -36,7 +36,7 @@ function genLinks (systemChain: string, { data, hash, type, withShort }: Props):
         return null;
       }
 
-      const trigger = `${name}-${type}-${data}`;
+      const trigger = `${name}-${type}-${data.toString()}`;
       const link = create(extChain, extPath, data, hash);
 
       return (
@@ -63,7 +63,7 @@ function genLinks (systemChain: string, { data, hash, type, withShort }: Props):
     .filter((node): node is React.ReactNode => !!node);
 }
 
-function LinkExternal ({ className, data, hash, type, withShort }: Props): React.ReactElement<Props> | null {
+function LinkExternal ({ className = '', data, hash, type, withShort }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { systemChain } = useApi();
   const links = useMemo(
@@ -76,8 +76,8 @@ function LinkExternal ({ className, data, hash, type, withShort }: Props): React
   }
 
   return (
-    <div className={`${className} ${withShort && 'withShort'}`}>
-      {!withShort && <div>{t('View this externally')}</div>}
+    <div className={`${className} ${withShort ? 'withShort' : ''}`}>
+      {!withShort && <div>{t<string>('View this externally')}</div>}
       <div className='links'>{links.map((link, index) => <span key={index}>{link}</span>)}</div>
     </div>
   );
diff --git a/packages/react-components/src/LockedVote.tsx b/packages/react-components/src/LockedVote.tsx
index 019e16d843..811e5676b1 100644
--- a/packages/react-components/src/LockedVote.tsx
+++ b/packages/react-components/src/LockedVote.tsx
@@ -17,7 +17,7 @@ export interface Props extends BareProps {
 }
 
 function LockedVoteDisplay (props: Props): React.ReactElement<Props> | null {
-  const { className, label, params, style } = props;
+  const { className = '', label, params } = props;
 
   if (!params) {
     return null;
@@ -28,7 +28,6 @@ function LockedVoteDisplay (props: Props): React.ReactElement<Props> | null {
       className={classes('ui--LockedVote', className)}
       label={label}
       params={params}
-      style={style}
     />
   );
 }
diff --git a/packages/react-components/src/Modal/Actions.tsx b/packages/react-components/src/Modal/Actions.tsx
index 3605fe522b..86b9d1e4e3 100644
--- a/packages/react-components/src/Modal/Actions.tsx
+++ b/packages/react-components/src/Modal/Actions.tsx
@@ -10,7 +10,7 @@ import SUIModal from 'semantic-ui-react/dist/commonjs/modules/Modal/Modal';
 import Button from '../Button';
 import ButtonCancel from '../ButtonCancel';
 
-function Actions ({ cancelLabel, children, className, onCancel }: ActionsProps): React.ReactElement<ActionsProps> {
+function Actions ({ cancelLabel, children, className = '', onCancel }: ActionsProps): React.ReactElement<ActionsProps> {
   return (
     <SUIModal.Actions>
       <Button.Group className={className}>
diff --git a/packages/react-components/src/Modal/Column.tsx b/packages/react-components/src/Modal/Column.tsx
index 2b391ec28f..76d631c106 100644
--- a/packages/react-components/src/Modal/Column.tsx
+++ b/packages/react-components/src/Modal/Column.tsx
@@ -7,7 +7,7 @@ import { ColumnProps } from './types';
 import React from 'react';
 import styled from 'styled-components';
 
-function Column ({ children, className }: ColumnProps): React.ReactElement<ColumnProps> {
+function Column ({ children, className = '' }: ColumnProps): React.ReactElement<ColumnProps> {
   return (
     <div className={`ui--Modal-Column ${className}`}>{children}</div>
   );
diff --git a/packages/react-components/src/Modal/Columns.tsx b/packages/react-components/src/Modal/Columns.tsx
index fb9fcdd25b..48a048ba48 100644
--- a/packages/react-components/src/Modal/Columns.tsx
+++ b/packages/react-components/src/Modal/Columns.tsx
@@ -7,7 +7,7 @@ import { ColumnProps } from './types';
 import React from 'react';
 import styled from 'styled-components';
 
-function Columns ({ children, className }: ColumnProps): React.ReactElement<ColumnProps> {
+function Columns ({ children, className = '' }: ColumnProps): React.ReactElement<ColumnProps> {
   return (
     <div className={`ui--Modal-Columns ${className}`}>{children}</div>
   );
diff --git a/packages/react-components/src/Modal/index.tsx b/packages/react-components/src/Modal/index.tsx
index 0ecf5a0fee..677bdb996a 100644
--- a/packages/react-components/src/Modal/index.tsx
+++ b/packages/react-components/src/Modal/index.tsx
@@ -21,7 +21,7 @@ type ModalType = React.FC<ModalProps> & {
 };
 
 function ModalBase (props: ModalProps): React.ReactElement<ModalProps> {
-  const { children, className, header, open = true } = props;
+  const { children, className = '', header, open = true } = props;
 
   return (
     <SUIModal
diff --git a/packages/react-components/src/Nonce.tsx b/packages/react-components/src/Nonce.tsx
index b0a529feb4..98d88d652c 100644
--- a/packages/react-components/src/Nonce.tsx
+++ b/packages/react-components/src/Nonce.tsx
@@ -15,7 +15,7 @@ export interface Props extends BareProps {
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
 }
 
-function NonceDisplay ({ className, label, params, style }: Props): React.ReactElement<Props> | null {
+function NonceDisplay ({ className = '', label, params }: Props): React.ReactElement<Props> | null {
   if (!params) {
     return null;
   }
@@ -25,7 +25,6 @@ function NonceDisplay ({ className, label, params, style }: Props): React.ReactE
       className={classes('ui--Nonce', className)}
       label={label}
       params={params.toString()}
-      style={style}
     />
   );
 }
diff --git a/packages/react-components/src/Output.tsx b/packages/react-components/src/Output.tsx
index 470dfe7d10..2291f31420 100644
--- a/packages/react-components/src/Output.tsx
+++ b/packages/react-components/src/Output.tsx
@@ -18,33 +18,31 @@ interface Props extends BareProps {
   isHidden?: boolean;
   isMonospace?: boolean;
   label?: React.ReactNode;
-  value?: any;
+  value?: string;
   withCopy?: boolean;
   withLabel?: boolean;
 }
 
-function Output ({ children, className, help, isError, isHidden, isMonospace, label, style, value, withCopy = false, withLabel }: Props): React.ReactElement<Props> {
+function Output ({ children, className = '', help, isError, isHidden, isMonospace, label, value, withCopy = false, withLabel }: Props): React.ReactElement<Props> {
   return (
     <Labelled
       className={className}
       help={help}
       isHidden={isHidden}
       label={label}
-      style={style}
       withLabel={withLabel}
     >
       <div className={classes('ui--output', isError && 'error', isMonospace && 'monospace')}>
         {value}
         {children}
-        {
-          withCopy
-            ? (
-              <CopyButton
-                className='ui--output-button'
-                value={value}
-              />
-            )
-            : null
+        {withCopy
+          ? (
+            <CopyButton
+              className='ui--output-button'
+              value={value}
+            />
+          )
+          : null
         }
       </div>
     </Labelled>
diff --git a/packages/react-components/src/Params/Call.tsx b/packages/react-components/src/Params/Call.tsx
index 9af7750fc7..0f4c968108 100644
--- a/packages/react-components/src/Params/Call.tsx
+++ b/packages/react-components/src/Params/Call.tsx
@@ -10,7 +10,7 @@ import { useApi } from '@polkadot/react-hooks';
 
 import Extrinsic from './Extrinsic';
 
-function Call ({ className, isDisabled, isError, label, onChange, onEnter, onEscape, style, withLabel }: Props): React.ReactElement<Props> {
+function Call ({ className = '', isDisabled, isError, label, onChange, onEnter, onEscape, withLabel }: Props): React.ReactElement<Props> {
   const { api, apiDefaultTx } = useApi();
 
   const defaultValue = ((): SubmittableExtrinsicFunction<'promise'> => {
@@ -32,7 +32,6 @@ function Call ({ className, isDisabled, isError, label, onChange, onEnter, onEsc
       onChange={onChange}
       onEnter={onEnter}
       onEscape={onEscape}
-      style={style}
       withLabel={withLabel}
     />
   );
diff --git a/packages/react-components/src/Params/Extrinsic.tsx b/packages/react-components/src/Params/Extrinsic.tsx
index dbd3e048dc..e769d72d81 100644
--- a/packages/react-components/src/Params/Extrinsic.tsx
+++ b/packages/react-components/src/Params/Extrinsic.tsx
@@ -22,7 +22,7 @@ interface Props extends BareProps {
   withLabel?: boolean;
 }
 
-function ExtrinsicDisplay ({ className, defaultValue, isDisabled, isError, isPrivate, label, onChange, onEnter, onEscape, style, withLabel }: Props): React.ReactElement<Props> {
+function ExtrinsicDisplay ({ className = '', defaultValue, isDisabled, isError, isPrivate, label, onChange, onEnter, onEscape, withLabel }: Props): React.ReactElement<Props> {
   const _onChange = useCallback(
     (method?: SubmittableExtrinsic<'promise'>): void =>
       onChange && onChange({
@@ -43,7 +43,6 @@ function ExtrinsicDisplay ({ className, defaultValue, isDisabled, isError, isPri
       onChange={_onChange}
       onEnter={onEnter}
       onEscape={onEscape}
-      style={style}
       withLabel={withLabel}
     />
   );
diff --git a/packages/react-components/src/Params/Proposal.tsx b/packages/react-components/src/Params/Proposal.tsx
index 9f185b4031..f239ed4ad8 100644
--- a/packages/react-components/src/Params/Proposal.tsx
+++ b/packages/react-components/src/Params/Proposal.tsx
@@ -10,7 +10,7 @@ import { useApi } from '@polkadot/react-hooks';
 
 import ExtrinsicDisplay from './Extrinsic';
 
-function ProposalDisplay ({ className, isDisabled, isError, label, onChange, onEnter, onEscape, style, withLabel }: Props): React.ReactElement<Props> {
+function ProposalDisplay ({ className = '', isDisabled, isError, label, onChange, onEnter, onEscape, withLabel }: Props): React.ReactElement<Props> {
   const { apiDefaultTxSudo } = useApi();
   const _onChange = useCallback(
     ({ isValid, value }: RawParam): void => {
@@ -39,7 +39,6 @@ function ProposalDisplay ({ className, isDisabled, isError, label, onChange, onE
       onChange={_onChange}
       onEnter={onEnter}
       onEscape={onEscape}
-      style={style}
       withLabel={withLabel}
     />
   );
diff --git a/packages/react-components/src/Password.tsx b/packages/react-components/src/Password.tsx
index 6f22d55525..0f228a5b81 100644
--- a/packages/react-components/src/Password.tsx
+++ b/packages/react-components/src/Password.tsx
@@ -8,14 +8,13 @@ import React from 'react';
 import { MAX_PASS_LEN } from '@polkadot/ui-keyring/defaults';
 import { useToggle } from '@polkadot/react-hooks';
 
-import { classes } from './util';
 import Button from './Button';
 import Input from './Input';
 
 interface Props extends BareProps {
   autoFocus?: boolean;
   children?: React.ReactNode;
-  defaultValue?: any;
+  defaultValue?: string;
   help?: string;
   isDisabled?: boolean;
   isError?: boolean;
@@ -27,17 +26,17 @@ interface Props extends BareProps {
   onEnter?: () => void;
   onEscape?: () => void;
   tabIndex?: number;
-  value: any;
+  value: string;
   withLabel?: boolean;
 }
 
-function Password ({ autoFocus, children, className, defaultValue, help, isDisabled, isError, isFull, label, labelExtra, name, onChange, onEnter, onEscape, style, tabIndex, value, withLabel }: Props): React.ReactElement<Props> {
+function Password ({ autoFocus, children, className = '', defaultValue, help, isDisabled, isError, isFull, label, labelExtra, name, onChange, onEnter, onEscape, tabIndex, value, withLabel }: Props): React.ReactElement<Props> {
   const [isVisible, toggleVisible] = useToggle();
 
   return (
     <Input
       autoFocus={autoFocus}
-      className={classes('ui--Password', className)}
+      className={`ui--Password ${className}`}
       defaultValue={defaultValue}
       help={help}
       isAction
@@ -51,7 +50,6 @@ function Password ({ autoFocus, children, className, defaultValue, help, isDisab
       onChange={onChange}
       onEnter={onEnter}
       onEscape={onEscape}
-      style={style}
       tabIndex={tabIndex}
       type={
         isVisible
diff --git a/packages/react-components/src/Popup.tsx b/packages/react-components/src/Popup.tsx
index c936836443..fc61f2a0a9 100644
--- a/packages/react-components/src/Popup.tsx
+++ b/packages/react-components/src/Popup.tsx
@@ -15,7 +15,7 @@ interface Props {
   trigger?: React.ReactNode;
 }
 
-function Popup ({ children, className, isOpen, on = 'click', onClose, position = 'bottom right', trigger }: Props): React.ReactElement<Props> {
+function Popup ({ children, className = '', isOpen, on = 'click', onClose, position = 'bottom right', trigger }: Props): React.ReactElement<Props> {
   return (
     <SUIPopup
       className={className}
diff --git a/packages/react-components/src/Progress.tsx b/packages/react-components/src/Progress.tsx
index e974469c45..62d143b849 100644
--- a/packages/react-components/src/Progress.tsx
+++ b/packages/react-components/src/Progress.tsx
@@ -22,7 +22,7 @@ interface Props extends BareProps {
   value?: UInt | BN | number;
 }
 
-function Progress ({ className, color = 'blue', percent, style, total, value }: Props): React.ReactElement<Props> | null {
+function Progress ({ className = '', color = 'blue', percent, total, value }: Props): React.ReactElement<Props> | null {
   const _total = bnToBn(total);
   const _value = bnToBn(value);
   const calculated = _total.gtn(0)
@@ -53,7 +53,6 @@ function Progress ({ className, color = 'blue', percent, style, total, value }:
       color={rainbow}
       percent={calculated}
       size='tiny'
-      style={style}
     />
   );
 }
diff --git a/packages/react-components/src/ProposedAction.tsx b/packages/react-components/src/ProposedAction.tsx
index e3a2324982..61ac81e03c 100644
--- a/packages/react-components/src/ProposedAction.tsx
+++ b/packages/react-components/src/ProposedAction.tsx
@@ -40,7 +40,7 @@ export const styles = `
   }
 `;
 
-function ProposedAction ({ asInset, className, expandNested, idNumber, insetProps, proposal, withLinks }: Props): React.ReactElement<Props> {
+function ProposedAction ({ asInset, className = '', expandNested, idNumber, insetProps, proposal, withLinks }: Props): React.ReactElement<Props> {
   const stringId = isString(idNumber)
     ? idNumber
     : formatNumber(idNumber);
diff --git a/packages/react-components/src/Row.tsx b/packages/react-components/src/Row.tsx
index 619ef13312..b0663f741d 100644
--- a/packages/react-components/src/Row.tsx
+++ b/packages/react-components/src/Row.tsx
@@ -190,7 +190,7 @@ export const styles = `
 `;
 
 export interface RowProps {
-  accounts_info?: DeriveAccountInfo;
+  accountsInfo?: DeriveAccountInfo;
   buttons?: React.ReactNode;
   children?: React.ReactNode;
   className?: string;
diff --git a/packages/react-components/src/Spinner.tsx b/packages/react-components/src/Spinner.tsx
index 5bc5655584..ad174cefb6 100644
--- a/packages/react-components/src/Spinner.tsx
+++ b/packages/react-components/src/Spinner.tsx
@@ -14,7 +14,7 @@ interface Props {
   variant?: 'app' | 'push' | 'mini';
 }
 
-function Spinner ({ className, label, variant = 'app' }: Props): React.ReactElement<Props> | null {
+function Spinner ({ className = '', label, variant = 'app' }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
 
   return (
@@ -27,7 +27,7 @@ function Spinner ({ className, label, variant = 'app' }: Props): React.ReactElem
         size='medium'
       >
         {variant === 'app' && (
-          label || t('Retrieving data')
+          label || t<string>('Retrieving data')
         )}
       </Loader>
     </div>
diff --git a/packages/react-components/src/StakingBonded.tsx b/packages/react-components/src/StakingBonded.tsx
index bda8b39f6c..fb1fa2958b 100644
--- a/packages/react-components/src/StakingBonded.tsx
+++ b/packages/react-components/src/StakingBonded.tsx
@@ -12,7 +12,7 @@ interface Props {
   stakingInfo?: DeriveStakingAccount;
 }
 
-function StakingBonded ({ className, stakingInfo }: Props): React.ReactElement<Props> | null {
+function StakingBonded ({ className = '', stakingInfo }: Props): React.ReactElement<Props> | null {
   const balance = stakingInfo?.stakingLedger?.active.unwrap();
 
   if (!balance?.gtn(0)) {
diff --git a/packages/react-components/src/StakingRedeemable.tsx b/packages/react-components/src/StakingRedeemable.tsx
index 7143db4476..253747300d 100644
--- a/packages/react-components/src/StakingRedeemable.tsx
+++ b/packages/react-components/src/StakingRedeemable.tsx
@@ -16,7 +16,7 @@ interface Props {
   stakingInfo?: DeriveStakingAccount;
 }
 
-function StakingRedeemable ({ className, stakingInfo }: Props): React.ReactElement<Props> | null {
+function StakingRedeemable ({ className = '', stakingInfo }: Props): React.ReactElement<Props> | null {
   const { allAccounts } = useAccounts();
   const { t } = useTranslation();
 
@@ -34,7 +34,7 @@ function StakingRedeemable ({ className, stakingInfo }: Props): React.ReactEleme
             isIcon
             key='unlock'
             params={[]}
-            tooltip={t('Withdraw these unbonded funds')}
+            tooltip={t<string>('Withdraw these unbonded funds')}
             tx='staking.withdrawUnbonded'
           />
         )}
diff --git a/packages/react-components/src/StakingUnbonding.tsx b/packages/react-components/src/StakingUnbonding.tsx
index a33885f201..51574c958e 100644
--- a/packages/react-components/src/StakingUnbonding.tsx
+++ b/packages/react-components/src/StakingUnbonding.tsx
@@ -27,7 +27,7 @@ function remainingBlocks (remainingEras: BN, { eraLength, eraProgress }: DeriveS
     .add(eraLength.sub(eraProgress));
 }
 
-function StakingUnbonding ({ className, value }: Props): React.ReactElement<Props> | null {
+function StakingUnbonding ({ className = '', value }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
   const progress = useCall<DeriveSessionProgress>(api.derive.session.progress, []);
   const { t } = useTranslation();
@@ -44,7 +44,7 @@ function StakingUnbonding ({ className, value }: Props): React.ReactElement<Prop
 
   const mapped = filtered.map((unlock): [DeriveUnlocking, BN] => [unlock, remainingBlocks(unlock.remainingEras, progress)]);
   const total = mapped.reduce((total, [{ value }]) => total.add(value), new BN(0));
-  const trigger = `${value.accountId}-unlocking-trigger`;
+  const trigger = `${value.accountId.toHex()}-unlocking-trigger`;
 
   return (
     <div className={className}>
@@ -60,11 +60,11 @@ function StakingUnbonding ({ className, value }: Props): React.ReactElement<Prop
             className='row'
             key={index}
           >
-            <div>{t('Unbonding {{value}}, ', { replace: { value: formatBalance(value, { forceUnit: '-' }) } })}</div>
+            <div>{t<string>('Unbonding {{value}}, ', { replace: { value: formatBalance(value, { forceUnit: '-' }) } })}</div>
             <div className='faded'>
               <BlockToTime
                 blocks={blocks}
-                label={`${t('{{blocks}} blocks', { replace: { blocks: formatNumber(blocks) } })}, `}
+                label={`${t<string>('{{blocks}} blocks', { replace: { blocks: formatNumber(blocks) } })}, `}
               />
             </div>
           </div>
diff --git a/packages/react-components/src/Static.tsx b/packages/react-components/src/Static.tsx
index de252e0976..3c65f5a427 100644
--- a/packages/react-components/src/Static.tsx
+++ b/packages/react-components/src/Static.tsx
@@ -21,7 +21,7 @@ interface Props extends BareProps {
   withLabel?: boolean;
 }
 
-function Static ({ children, className, defaultValue, help, isFull, isHidden, label, style, value, withLabel }: Props): React.ReactElement<Props> {
+function Static ({ children, className = '', defaultValue, help, isFull, isHidden, label, value, withLabel }: Props): React.ReactElement<Props> {
   return (
     <Labelled
       className={className}
@@ -29,7 +29,6 @@ function Static ({ children, className, defaultValue, help, isFull, isHidden, la
       isFull={isFull}
       isHidden={isHidden}
       label={label}
-      style={style}
       withLabel={withLabel}
     >
       <div className='ui--Static ui dropdown selection disabled'>
diff --git a/packages/react-components/src/Status/Queue.tsx b/packages/react-components/src/Status/Queue.tsx
index 7eb85f491d..f464883a4b 100644
--- a/packages/react-components/src/Status/Queue.tsx
+++ b/packages/react-components/src/Status/Queue.tsx
@@ -187,7 +187,7 @@ function Queue ({ children }: Props): React.ReactElement<Props> {
               ? item.error
               : error,
             result: result === undefined
-              ? item.result
+              ? item.result as SubmittableResult
               : result,
             status: item.status === 'completed'
               ? item.status
diff --git a/packages/react-components/src/Status/index.tsx b/packages/react-components/src/Status/index.tsx
index 3ed3c52862..bb2a20f5c4 100644
--- a/packages/react-components/src/Status/index.tsx
+++ b/packages/react-components/src/Status/index.tsx
@@ -83,7 +83,7 @@ function renderStatus ({ account, action, id, message, removeItem, status }: Que
             onClick={removeItem}
           />
           <div className='short'>
-            <Icon name={iconName(status)} />
+            <Icon name={iconName(status) as 'send'} />
           </div>
           <div className='desc'>
             <div className='header'>
@@ -114,7 +114,7 @@ function renderItem ({ error, extrinsic, id, removeItem, rpc, status }: QueueTx)
     }
   }
 
-  const icon = signerIconName(status);
+  const icon = signerIconName(status) as 'ban' | 'spinner';
 
   return (
     <div
@@ -159,7 +159,7 @@ function filterTx (txqueue?: QueueTx[]): [QueueTx[], QueueTx[]] {
   return [allTx, allTx.filter(({ status }): boolean => STATUS_COMPLETE.includes(status))];
 }
 
-function Status ({ className, stqueue, txqueue }: Props): React.ReactElement<Props> | null {
+function Status ({ className = '', stqueue, txqueue }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const allSt = useMemo(
     (): QueueStatus[] => filterSt(stqueue),
@@ -189,7 +189,7 @@ function Status ({ className, stqueue, txqueue }: Props): React.ReactElement<Pro
             icon='cancel'
             isFluid
             isPrimary
-            label={t('Dismiss all notifications')}
+            label={t<string>('Dismiss all notifications')}
             onClick={_onDismiss}
           />
         </div>
diff --git a/packages/react-components/src/Table/Body.tsx b/packages/react-components/src/Table/Body.tsx
index 679d47e163..ed4d10a170 100644
--- a/packages/react-components/src/Table/Body.tsx
+++ b/packages/react-components/src/Table/Body.tsx
@@ -15,7 +15,7 @@ interface Props {
   emptySpinner?: React.ReactNode;
 }
 
-function Body ({ children, className, empty, emptySpinner }: Props): React.ReactElement<Props> {
+function Body ({ children, className = '', empty, emptySpinner }: Props): React.ReactElement<Props> {
   return (
     <tbody className={className}>
       {children || (
diff --git a/packages/react-components/src/Table/Foot.tsx b/packages/react-components/src/Table/Foot.tsx
index 607e31c245..a935376ef0 100644
--- a/packages/react-components/src/Table/Foot.tsx
+++ b/packages/react-components/src/Table/Foot.tsx
@@ -11,7 +11,7 @@ interface Props {
   isEmpty: boolean;
 }
 
-function Foot ({ className, footer, isEmpty }: Props): React.ReactElement<Props> | null {
+function Foot ({ className = '', footer, isEmpty }: Props): React.ReactElement<Props> | null {
   if (!footer || isEmpty) {
     return null;
   }
diff --git a/packages/react-components/src/Table/Head.tsx b/packages/react-components/src/Table/Head.tsx
index b26846b32e..0bec074afc 100644
--- a/packages/react-components/src/Table/Head.tsx
+++ b/packages/react-components/src/Table/Head.tsx
@@ -12,7 +12,7 @@ interface Props {
   isEmpty: boolean;
 }
 
-function Head ({ className, filter, header, isEmpty }: Props): React.ReactElement<Props> {
+function Head ({ className = '', filter, header, isEmpty }: Props): React.ReactElement<Props> {
   return (
     <thead className={className}>
       {filter && (
diff --git a/packages/react-components/src/Table/index.tsx b/packages/react-components/src/Table/index.tsx
index 586ae1aedd..e652a4e79f 100644
--- a/packages/react-components/src/Table/index.tsx
+++ b/packages/react-components/src/Table/index.tsx
@@ -31,12 +31,12 @@ function extractKids (children: React.ReactNode): [boolean, React.ReactNode] {
   return [isEmpty, isEmpty ? null : kids];
 }
 
-function Table ({ children, className, empty, emptySpinner, filter, footer, header, isFixed }: TableProps): React.ReactElement<TableProps> {
+function Table ({ children, className = '', empty, emptySpinner, filter, footer, header, isFixed }: TableProps): React.ReactElement<TableProps> {
   const [isEmpty, kids] = extractKids(children);
 
   return (
     <div className={`ui--Table ${className}`}>
-      <table className={`${isFixed && 'isFixed'}`}>
+      <table className={isFixed ? 'isFixed' : 'isNotFixed'}>
         <Head
           filter={filter}
           header={header}
diff --git a/packages/react-components/src/Tabs.tsx b/packages/react-components/src/Tabs.tsx
index 77f102a9b0..6bb4921f8a 100644
--- a/packages/react-components/src/Tabs.tsx
+++ b/packages/react-components/src/Tabs.tsx
@@ -64,7 +64,7 @@ function renderItem ({ basePath, isSequence, items }: Props): (tabItem: TabItem,
 
 function Tabs (props: Props): React.ReactElement<Props> {
   const location = useLocation();
-  const { className, basePath, hidden = [], items, style } = props;
+  const { className = '', basePath, hidden = [], items } = props;
 
   // redirect on invalid tabs
   useEffect((): void => {
@@ -84,10 +84,7 @@ function Tabs (props: Props): React.ReactElement<Props> {
   }, [basePath, hidden, items, location]);
 
   return (
-    <div
-      className={classes('ui--Menu ui menu tabular', className)}
-      style={style}
-    >
+    <div className={classes('ui--Menu ui menu tabular', className)}>
       {items
         .filter(({ name }): boolean => !hidden.includes(name))
         .map(renderItem(props))
diff --git a/packages/react-components/src/Tag.tsx b/packages/react-components/src/Tag.tsx
index 9a48511855..d126a75482 100644
--- a/packages/react-components/src/Tag.tsx
+++ b/packages/react-components/src/Tag.tsx
@@ -19,7 +19,7 @@ interface Props {
 
 let tagId = 0;
 
-function Tag ({ className, color, hover, isTag = true, label, size = 'small' }: Props): React.ReactElement<Props> {
+function Tag ({ className = '', color, hover, isTag = true, label, size = 'small' }: Props): React.ReactElement<Props> {
   const [trigger] = useState(`tag-hover-${Date.now()}-${tagId++}`);
   const tooltipProps = hover
     ? { 'data-for': trigger, 'data-tip': true }
diff --git a/packages/react-components/src/Toggle.tsx b/packages/react-components/src/Toggle.tsx
index 66c8726761..1a1abf4e72 100644
--- a/packages/react-components/src/Toggle.tsx
+++ b/packages/react-components/src/Toggle.tsx
@@ -18,7 +18,7 @@ interface Props extends BareProps {
   value?: boolean;
 }
 
-function Toggle ({ asSwitch = true, className, defaultValue, isDisabled, label, onChange, preventDefault, value }: Props): React.ReactElement<Props> {
+function Toggle ({ asSwitch = true, className = '', defaultValue, isDisabled, label, onChange, preventDefault, value }: Props): React.ReactElement<Props> {
   const _onChange = useCallback(
     (event: React.FormEvent<HTMLInputElement>, { checked }: any): void => {
       if (preventDefault) {
diff --git a/packages/react-components/src/Tooltip.tsx b/packages/react-components/src/Tooltip.tsx
index 2f1f5c2c17..11b4596c13 100644
--- a/packages/react-components/src/Tooltip.tsx
+++ b/packages/react-components/src/Tooltip.tsx
@@ -29,7 +29,7 @@ interface Props extends BareProps {
   trigger: string;
 }
 
-function Tooltip ({ className, effect = 'solid', offset, place = 'top', text, trigger }: Props): React.ReactElement<Props> | null {
+function Tooltip ({ className = '', effect = 'solid', offset, place = 'top', text, trigger }: Props): React.ReactElement<Props> | null {
   const [tooltipContainer] = useState(
     typeof document === 'undefined'
       ? {} as HTMLElement // This hack is required for server side rendering
diff --git a/packages/react-components/src/TreasuryProposal.tsx b/packages/react-components/src/TreasuryProposal.tsx
index ea27c5cd91..d689281d19 100644
--- a/packages/react-components/src/TreasuryProposal.tsx
+++ b/packages/react-components/src/TreasuryProposal.tsx
@@ -23,7 +23,7 @@ interface Props {
   withLink?: boolean;
 }
 
-function TreasuryProposal ({ asInset, className, insetProps, onClick, proposal, proposalId }: Props): React.ReactElement<Props> | null {
+function TreasuryProposal ({ asInset, className = '', insetProps, onClick, proposal, proposalId }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const [stateProposal, setProposal] = useState<TreasuryProposalType | null>(null);
   const { api } = useApi();
@@ -34,7 +34,8 @@ function TreasuryProposal ({ asInset, className, insetProps, onClick, proposal,
         .proposals<Option<TreasuryProposalType>>(proposalId)
         .then((proposal): TreasuryProposalType | null => proposal.unwrapOr(null))
         .catch((): null => null)
-        .then(setProposal);
+        .then(setProposal)
+        .catch(console.error);
     } else {
       setProposal(proposal || null);
     }
@@ -48,7 +49,7 @@ function TreasuryProposal ({ asInset, className, insetProps, onClick, proposal,
 
   const inner = (
     <>
-      <Labelled label={t('proposed by')}>
+      <Labelled label={t<string>('proposed by')}>
         <InputAddress
           defaultValue={proposer}
           isDisabled
@@ -56,7 +57,7 @@ function TreasuryProposal ({ asInset, className, insetProps, onClick, proposal,
           withLabel={false}
         />
       </Labelled>
-      <Labelled label={t('beneficiary')}>
+      <Labelled label={t<string>('beneficiary')}>
         <InputAddress
           defaultValue={beneficiary}
           isDisabled
@@ -64,10 +65,10 @@ function TreasuryProposal ({ asInset, className, insetProps, onClick, proposal,
           withLabel={false}
         />
       </Labelled>
-      <Static label={t('value')}>
+      <Static label={t<string>('value')}>
         <FormatBalance value={value} />
       </Static>
-      <Static label={t('bond')}>
+      <Static label={t<string>('bond')}>
         <FormatBalance value={bond} />
       </Static>
     </>
diff --git a/packages/react-components/src/TxButton.tsx b/packages/react-components/src/TxButton.tsx
index 6994c6eed9..0bee62c576 100644
--- a/packages/react-components/src/TxButton.tsx
+++ b/packages/react-components/src/TxButton.tsx
@@ -2,6 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { SubmittableExtrinsic } from '@polkadot/api/types';
 import { TxButtonProps as Props } from './types';
 
 import React, { useCallback, useContext } from 'react';
@@ -13,7 +14,7 @@ import Button from './Button';
 import { StatusContext } from './Status';
 import { useTranslation } from './translate';
 
-function TxButton ({ accountId, className, extrinsic: propsExtrinsic, icon, isBasic, isDisabled, isIcon, isNegative, isPrimary, isUnsigned, label, onClick, onFailed, onSendRef, onStart, onSuccess, onUpdate, params, size, tooltip, tx, withSpinner }: Props): React.ReactElement<Props> {
+function TxButton ({ accountId, className = '', extrinsic: propsExtrinsic, icon, isBasic, isDisabled, isIcon, isNegative, isPrimary, isUnsigned, label, onClick, onFailed, onSendRef, onStart, onSuccess, onUpdate, params, size, tooltip, tx, withSpinner }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const { queueExtrinsic } = useContext(StatusContext);
@@ -40,7 +41,7 @@ function TxButton ({ accountId, className, extrinsic: propsExtrinsic, icon, isBa
 
   const _onSend = useCallback(
     (): void => {
-      let extrinsic: any;
+      let extrinsic: SubmittableExtrinsic<'promise'>;
 
       if (propsExtrinsic) {
         extrinsic = propsExtrinsic;
@@ -95,7 +96,7 @@ function TxButton ({ accountId, className, extrinsic: propsExtrinsic, icon, isBa
           ? (!isNegative && !isBasic)
           : isPrimary
       }
-      label={label || (isIcon ? '' : t('Submit'))}
+      label={label || (isIcon ? '' : t<string>('Submit'))}
       onClick={_onSend}
       size={size}
       tooltip={tooltip}
diff --git a/packages/react-components/src/TxComponent.tsx b/packages/react-components/src/TxComponent.tsx
index e2118e2f55..3f9eeb4c49 100644
--- a/packages/react-components/src/TxComponent.tsx
+++ b/packages/react-components/src/TxComponent.tsx
@@ -14,15 +14,19 @@ export default class TxComponent<P, S> extends React.PureComponent<P, S> {
   }
 
   protected sendTx = (): void => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
     const { component } = this.button.current;
 
     if (component) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call
       component.current.send();
     }
   }
 
   protected submit = (): void => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
     if (this.button && this.button.current && this.button.current.click) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call
       this.button.current.click();
     }
   }
diff --git a/packages/react-components/src/TxModalNew.tsx b/packages/react-components/src/TxModalNew.tsx
index 36e481ff26..3ea8851101 100644
--- a/packages/react-components/src/TxModalNew.tsx
+++ b/packages/react-components/src/TxModalNew.tsx
@@ -18,18 +18,18 @@ function TxModal<P extends Props> ({
   sendTx,
   isSending,
   trigger: Trigger,
-  header = t('Submit signed extrinsic'),
+  header = t<string>('Submit signed extrinsic'),
   children,
   preContent,
   isDisabled = false,
   isSubmittable = true,
   modalProps = {},
   inputAddressExtra,
-  inputAddressLabel = t('using my account'),
-  inputAddressHelp = t('Select the account to use for this action.'),
+  inputAddressLabel = t<string>('using my account'),
+  inputAddressHelp = t<string>('Select the account to use for this action.'),
   inputAddressProps = {},
   submitButtonIcon = 'sign-in',
-  submitButtonLabel = t('Submit'),
+  submitButtonLabel = t<string>('Submit'),
   submitButtonProps = {},
   ...props
 }: P): React.ReactElement<P> | null {
diff --git a/packages/react-components/src/VoteAccount.tsx b/packages/react-components/src/VoteAccount.tsx
index cb0467f9b0..0596e03391 100644
--- a/packages/react-components/src/VoteAccount.tsx
+++ b/packages/react-components/src/VoteAccount.tsx
@@ -13,15 +13,15 @@ interface Props {
   onChange: (value: string | null) => void;
 }
 
-function VoteAccount ({ className, filter, onChange }: Props): React.ReactElement<Props> {
+function VoteAccount ({ className = '', filter, onChange }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
     <InputAddress
       className={className}
       filter={filter}
-      help={t('Select the account you wish to vote with. You can approve "aye" or deny "nay" the proposal.')}
-      label={t('vote with account')}
+      help={t<string>('Select the account you wish to vote with. You can approve "aye" or deny "nay" the proposal.')}
+      label={t<string>('vote with account')}
       onChange={onChange}
       type='account'
       withLabel
diff --git a/packages/react-components/src/VoteActions.tsx b/packages/react-components/src/VoteActions.tsx
index 4152f249fa..31026c30ca 100644
--- a/packages/react-components/src/VoteActions.tsx
+++ b/packages/react-components/src/VoteActions.tsx
@@ -18,7 +18,7 @@ interface Props {
   tx: string;
 }
 
-function VoteActions ({ accountId, aye, className, isDisabled, onClick, params, tx }: Props): React.ReactElement<Props> {
+function VoteActions ({ accountId, aye, className = '', isDisabled, onClick, params, tx }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
@@ -32,8 +32,8 @@ function VoteActions ({ accountId, aye, className, isDisabled, onClick, params,
         isDisabled={!accountId || isDisabled}
         isPrimary
         label={aye
-          ? t('Vote Aye')
-          : t('Vote Nay')}
+          ? t<string>('Vote Aye')
+          : t<string>('Vote Nay')}
         onStart={onClick}
         params={params}
         tx={tx}
diff --git a/packages/react-components/src/VoteToggle.tsx b/packages/react-components/src/VoteToggle.tsx
index 996509ecd0..41f2f1d26e 100644
--- a/packages/react-components/src/VoteToggle.tsx
+++ b/packages/react-components/src/VoteToggle.tsx
@@ -14,15 +14,16 @@ interface Props {
   value: boolean;
 }
 
-function VoteToggle ({ className, onChange, value }: Props): React.ReactElement<Props> {
+function VoteToggle ({ className = '', onChange, value }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
     <Toggle
       className={`${className}`}
-      label={value
-        ? t('Aye, I approve')
-        : t('Nay, I do not approve')
+      label={
+        value
+          ? t<string>('Aye, I approve')
+          : t<string>('Nay, I do not approve')
       }
       onChange={onChange}
       value={value}
diff --git a/packages/react-components/src/VoteValue.tsx b/packages/react-components/src/VoteValue.tsx
index 0691a355b5..d535d25d91 100644
--- a/packages/react-components/src/VoteValue.tsx
+++ b/packages/react-components/src/VoteValue.tsx
@@ -54,13 +54,13 @@ function VoteValue ({ accountId, autoFocus, onChange }: Props): React.ReactEleme
     <InputBalance
       autoFocus={autoFocus}
       defaultValue={accountId !== selectedId ? undefined : allBalances?.lockedBalance}
-      help={t('The amount that is associated with this vote. This value is is locked for the duration of the vote.')}
+      help={t<string>('The amount that is associated with this vote. This value is is locked for the duration of the vote.')}
       isDisabled={isDisabled}
       isZeroable
-      label={t('vote value')}
+      label={t<string>('vote value')}
       labelExtra={
         <BalanceVoting
-          label={<label>{t('voting balance')}</label>}
+          label={<label>{t<string>('voting balance')}</label>}
           params={accountId}
         />
       }
diff --git a/packages/react-components/src/codeflask.d.ts b/packages/react-components/src/codeflask.d.ts
deleted file mode 100644
index 788658373e..0000000000
--- a/packages/react-components/src/codeflask.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-declare module 'codeflask';
diff --git a/packages/react-components/src/constants.ts b/packages/react-components/src/constants.ts
index 1b5ef0fc7c..b81f71f2e7 100644
--- a/packages/react-components/src/constants.ts
+++ b/packages/react-components/src/constants.ts
@@ -7,11 +7,11 @@ export enum BitLengthOption {
   NORMAL_NUMBERS = 32
 }
 
-export enum ScreenSizes {
-  DESKTOP = 992,
-  TABLET = 768,
-  PHONE = 576
-}
+export const ScreenSizes = {
+  DESKTOP: 992,
+  PHONE: 576,
+  TABLET: 768
+};
 
 export const rewardDestinationOptions = [
   { text: 'Stash account (increase the amount at stake)', value: 0 },
diff --git a/packages/react-components/src/i18n/Backend.ts b/packages/react-components/src/i18n/Backend.ts
index 67c03f2f09..966a5de9f5 100644
--- a/packages/react-components/src/i18n/Backend.ts
+++ b/packages/react-components/src/i18n/Backend.ts
@@ -6,7 +6,7 @@ import languageCache from './cache';
 
 type Callback = (error: string | null, data: any) => void;
 
-type LoadResult = [string | null, any];
+type LoadResult = [string | null, Record<string, string> | boolean];
 
 const loaders: Record<string, Promise<LoadResult>> = {};
 
@@ -37,12 +37,12 @@ export default class Backend {
       if (!response.ok) {
         return [`i18n: failed loading ${lng}`, response.status >= 500 && response.status < 600];
       } else {
-        languageCache[lng] = await response.json();
+        languageCache[lng] = await response.json() as Record<string, string>;
 
         return [null, languageCache[lng]];
       }
     } catch (error) {
-      return [error.message, false];
+      return [(error as Error).message, false];
     }
   }
 }
diff --git a/packages/react-components/src/i18n/index.ts b/packages/react-components/src/i18n/index.ts
index 1f58e50ebe..9796166055 100644
--- a/packages/react-components/src/i18n/index.ts
+++ b/packages/react-components/src/i18n/index.ts
@@ -41,6 +41,7 @@ i18n
     ns: [
       'apps',
       'apps-config',
+      'apps-electron',
       'apps-routing',
       'app-123code',
       'app-accounts',
@@ -82,12 +83,13 @@ i18n
     console.log('i18n: failure', error)
   );
 
-uiSettings.on('change', (settings) => {
+uiSettings.on('change', (settings): void => {
   i18n.changeLanguage(
     settings.i18nLang === LANGUAGE_DEFAULT
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
       ? i18n.services.languageDetector.detect()
       : settings.i18nLang
-  );
+  ).catch(console.error);
 });
 
 export default i18n;
diff --git a/packages/react-components/src/media.ts b/packages/react-components/src/media.ts
index e886700b05..8951d5c50b 100644
--- a/packages/react-components/src/media.ts
+++ b/packages/react-components/src/media.ts
@@ -13,9 +13,9 @@ type MediaCss = {
 const media = Object
   .keys(ScreenSizes)
   .reduce((acc: MediaCss, label: any): MediaCss => {
-    const size: number = ScreenSizes[label] as any;
+    const size: number = ScreenSizes[label as 'TABLET'];
 
-    acc[label] = (values: TemplateStringsArray): unknown =>
+    acc[label as 'TABLET'] = (values: TemplateStringsArray): unknown =>
       css`
         @media (min-width: ${size / 16}em) {
           ${values}
diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts
index c89cd89d31..020ba229b1 100644
--- a/packages/react-components/src/styles/index.ts
+++ b/packages/react-components/src/styles/index.ts
@@ -17,57 +17,60 @@ interface Props {
 
 const defaultHighlight = '#f19135'; // #999
 
+const getHighlight = (props: Props): string =>
+  (props.uiHighlight || defaultHighlight);
+
 export default createGlobalStyle<Props>`
   .ui--highlight--all {
-    background: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
-    border-color: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
-    color: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
+    background: ${getHighlight} !important;
+    border-color: ${getHighlight} !important;
+    color: ${getHighlight} !important;
   }
 
   .ui--highlight--bg {
-    background: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
+    background: ${getHighlight} !important;
   }
 
   .ui--highlight--border {
     /* .theme--default .ui.menu.tabular > .item.active */
-    border-color: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
+    border-color: ${getHighlight} !important;
   }
 
   .ui--highlight--color {
-    color: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
+    color: ${getHighlight} !important;
   }
 
   .ui--highlight--fill {
-    fill: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
+    fill: ${getHighlight} !important;
   }
 
   .ui--highlight--gradient {
-    background: ${(props): string => `linear-gradient(90deg, ${props.uiHighlight}, transparent)`};
+    background: ${(props: Props): string => `linear-gradient(90deg, ${props.uiHighlight || defaultHighlight}, transparent)`};
   }
 
   .ui--highlight--icon {
     i.icon {
-      color: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
+      color: ${getHighlight} !important;
     }
   }
 
   .ui--highlight--spinner {
     &:after {
-      border-color: ${(props): string => (props.uiHighlight || defaultHighlight)} transparent transparent !important;
+      border-color: ${getHighlight} transparent transparent !important;
     }
   }
 
   .ui--highlight--stroke {
-    stroke: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
+    stroke: ${getHighlight} !important;
   }
 
   .theme--default {
     .ui.menu.tabular .item.active {
-      border-color: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
+      border-color: ${getHighlight} !important;
     }
 
     .ui.blue.progress > .bar {
-      background-color: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
+      background-color: ${getHighlight} !important;
     }
 
     .ui.negative.button,
@@ -77,20 +80,20 @@ export default createGlobalStyle<Props>`
 
     .ui.primary.button,
     .ui.buttons .primary.button {
-      background: ${(props): string => (props.uiHighlight || defaultHighlight)};
+      background: ${getHighlight};
 
       &.active,
       &:active,
       &:focus,
       &:hover {
-        background-color: ${(props): string => (props.uiHighlight || defaultHighlight)};
+        background-color: ${getHighlight};
       }
     }
 
     .ui.toggle.checkbox {
       input:checked~.box:before,
       input:checked~label:before {
-        background-color: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
+        background-color: ${getHighlight} !important;
       }
     }
   }
diff --git a/packages/react-components/src/types.ts b/packages/react-components/src/types.ts
index 9dff5edbb8..227fdd38ef 100644
--- a/packages/react-components/src/types.ts
+++ b/packages/react-components/src/types.ts
@@ -8,7 +8,6 @@ import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 import { Abi } from '@polkadot/api-contract';
 import { ActionStatus } from '@polkadot/react-components/Status/types';
 import { TxState } from '@polkadot/react-hooks/types';
-import { IExtrinsic } from '@polkadot/types/types';
 import { AccountId, Index } from '@polkadot/types/interfaces';
 import { ButtonProps } from './Button/types';
 import { InputAddressProps } from './InputAddress/types';
@@ -18,7 +17,6 @@ export type VoidFn = () => void;
 
 export interface BareProps {
   className?: string;
-  style?: Record<string, string | number>;
 }
 
 export interface AppProps {
@@ -38,7 +36,7 @@ export interface TxTriggerProps {
 }
 
 export interface TxProps {
-  extrinsic?: IExtrinsic | SubmittableExtrinsic | null;
+  extrinsic?: SubmittableExtrinsic | null;
   tx?: string;
   params?: any[] | ConstructTxFn;
 }
diff --git a/packages/react-components/src/util/getAddressTags.ts b/packages/react-components/src/util/getAddressTags.ts
index 88bed8458e..bb8761a47d 100644
--- a/packages/react-components/src/util/getAddressTags.ts
+++ b/packages/react-components/src/util/getAddressTags.ts
@@ -7,5 +7,5 @@ import { KeyringItemType } from '@polkadot/ui-keyring/types';
 import getAddressMeta from './getAddressMeta';
 
 export default function getAddressTags (address: string, type: KeyringItemType | null = null): string[] {
-  return getAddressMeta(address, type).tags || [];
+  return getAddressMeta(address, type).tags as string[] || [];
 }
diff --git a/packages/react-components/src/util/getContractAbi.ts b/packages/react-components/src/util/getContractAbi.ts
index 9f8e6ac8f0..991fb08a48 100644
--- a/packages/react-components/src/util/getContractAbi.ts
+++ b/packages/react-components/src/util/getContractAbi.ts
@@ -2,6 +2,8 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { ContractABIPre } from '@polkadot/api-contract/types';
+
 import { Abi } from '@polkadot/api-contract';
 import { registry } from '@polkadot/react-api';
 
@@ -16,9 +18,9 @@ export default function getContractAbi (address: string | null): Abi | null {
   const meta = getAddressMeta(address, 'contract');
 
   try {
-    const data = meta.contract && JSON.parse(meta.contract.abi);
+    const data = meta.contract && JSON.parse(meta.contract.abi) as ContractABIPre;
 
-    abi = new Abi(registry, data);
+    abi = new Abi(registry, data as ContractABIPre);
   } catch (error) {
     // invalid address, maybe
   }
diff --git a/packages/react-hooks/src/types.ts b/packages/react-hooks/src/types.ts
index 885810b9fc..faa94f9dc1 100644
--- a/packages/react-hooks/src/types.ts
+++ b/packages/react-hooks/src/types.ts
@@ -11,7 +11,7 @@ import { KeyringJson$Meta } from '@polkadot/ui-keyring/types';
 
 export type CallParam = any;
 
-export type CallParams = [] | [CallParam] | [CallParam, CallParam] | [CallParam, CallParam, CallParam] | any[];
+export type CallParams = [] | CallParam[];
 
 export interface CallOptions <T> {
   defaultValue?: T;
diff --git a/packages/react-hooks/src/useAccountInfo.ts b/packages/react-hooks/src/useAccountInfo.ts
index f229703a86..22aaab2530 100644
--- a/packages/react-hooks/src/useAccountInfo.ts
+++ b/packages/react-hooks/src/useAccountInfo.ts
@@ -99,18 +99,18 @@ export default function useAccountInfo (value: string): UseAccountInfo {
     setGenesisHash(accountOrAddress?.meta.genesisHash || null);
     setFlags((flags) => ({
       ...flags,
-      isDevelopment: accountOrAddress?.meta.isTesting || false,
-      isEditable: (!identity?.display && (isInContacts || accountOrAddress?.meta.isMultisig || (accountOrAddress && !(accountOrAddress.meta.isInjected || accountOrAddress.meta.isHardware)))) || false,
-      isExternal: accountOrAddress?.meta.isExternal || false,
-      isHardware: accountOrAddress?.meta.isHardware || false,
+      isDevelopment: (accountOrAddress?.meta.isTesting as boolean) || false,
+      isEditable: (!identity?.display && (isInContacts || (accountOrAddress?.meta.isMultisig as boolean) || (accountOrAddress && !(accountOrAddress.meta.isInjected || accountOrAddress.meta.isHardware)))) || false,
+      isExternal: (accountOrAddress?.meta.isExternal as boolean) || false,
+      isHardware: (accountOrAddress?.meta.isHardware as boolean) || false,
       isInContacts,
-      isInjected: accountOrAddress?.meta.isInjected || false,
-      isMultisig: accountOrAddress?.meta.isMultisig || false,
+      isInjected: (accountOrAddress?.meta.isInjected as boolean) || false,
+      isMultisig: (accountOrAddress?.meta.isMultisig as boolean) || false,
       isOwned
     }));
     setMeta(accountOrAddress?.meta);
     setName(accountOrAddress?.meta.name || '');
-    setSortedTags(accountOrAddress?.meta.tags ? accountOrAddress.meta.tags.sort() : []);
+    setSortedTags(accountOrAddress?.meta.tags ? (accountOrAddress.meta.tags as string[]).sort() : []);
   }, [identity?.display, isAccount, isAddress, value]);
 
   const onSaveName = useCallback(
diff --git a/packages/react-hooks/src/useCacheKey.ts b/packages/react-hooks/src/useCacheKey.ts
index faffbc17d9..184577a114 100644
--- a/packages/react-hooks/src/useCacheKey.ts
+++ b/packages/react-hooks/src/useCacheKey.ts
@@ -11,11 +11,11 @@ import useApi from './useApi';
 export default function useCacheKey <T> (storageKeyBase: string): [(defaultValue?: T) => T | undefined, (value: T) => T] {
   const { api, isDevelopment } = useApi();
   const storageKey = useMemo(
-    () => `${storageKeyBase}:${isDevelopment ? 'development' : api.genesisHash}`,
+    () => `${storageKeyBase}:${isDevelopment ? 'development' : api.genesisHash.toHex()}`,
     [api, isDevelopment, storageKeyBase]
   );
-  const getter = useCallback((): T | undefined => store.get(storageKey), [storageKey]);
-  const setter = useCallback((value: T): T => store.set(storageKey, value), [storageKey]);
+  const getter = useCallback((): T | undefined => store.get(storageKey) as T, [storageKey]);
+  const setter = useCallback((value: T): T => store.set(storageKey, value) as T, [storageKey]);
 
   return [getter, setter];
 }
diff --git a/packages/react-hooks/src/useCall.ts b/packages/react-hooks/src/useCall.ts
index 0c3a2cde82..4dcf909511 100644
--- a/packages/react-hooks/src/useCall.ts
+++ b/packages/react-hooks/src/useCall.ts
@@ -2,6 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { Codec } from '@polkadot/types/types';
 import { CallOptions, CallParam, CallParams } from './types';
 
 import { useEffect, useRef, useState } from 'react';
@@ -32,15 +33,15 @@ interface TrackerRef {
 }
 
 // the default transform, just returns what we have
-function transformIdentity (value: any): any {
-  return value;
+function transformIdentity <T> (value: unknown): T {
+  return value as T;
 }
 
 // extract the serialized and mapped params, all ready for use in our call
-function extractParams (fn: any, params: any[], paramMap: (params: any[]) => any): [string, CallParams | null] {
+function extractParams (fn: unknown, params: unknown[], paramMap: (params: unknown[]) => CallParams): [string, CallParams | null] {
   return [
-    JSON.stringify({ f: fn?.name, p: params }),
-    params.length === 0 || !params.some((param): boolean => isNull(param) || isUndefined(null))
+    JSON.stringify({ f: (fn as { name: string })?.name, p: params }),
+    params.length === 0 || !params.some((param) => isNull(param) || isUndefined(param))
       ? paramMap(params)
       : null
   ];
@@ -51,7 +52,7 @@ function unsubscribe (tracker: TrackerRef): void {
   tracker.current.isActive = false;
 
   if (tracker.current.subscriber) {
-    tracker.current.subscriber.then((unsubFn): void => unsubFn());
+    tracker.current.subscriber.then((unsubFn) => unsubFn()).catch(console.error);
     tracker.current.subscriber = null;
   }
 }
@@ -69,9 +70,7 @@ function subscribe <T> (mountedRef: MountedRef, tracker: TrackerRef, fn: TrackFn
         tracker.current.isActive = true;
         tracker.current.count = 0;
 
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore We tried to get the typings right, close but no cigar...
-        tracker.current.subscriber = fn(...params, (value: any): void => {
+        tracker.current.subscriber = (fn as (...params: unknown[]) => Promise<() => void>)(...params, (value: Codec): void => {
           // when we don't have an active sub, or single-shot, ignore (we use the isActive flag here
           // since .subscriber may not be set on immeditae callback)
           if (mountedRef.current && tracker.current.isActive && (!isSingle || !tracker.current.count)) {
diff --git a/packages/react-hooks/src/useOwnStashInfos.ts b/packages/react-hooks/src/useOwnStashInfos.ts
index 14736a8171..159a2265c2 100644
--- a/packages/react-hooks/src/useOwnStashInfos.ts
+++ b/packages/react-hooks/src/useOwnStashInfos.ts
@@ -86,7 +86,7 @@ export default function useOwnStashInfos (): StakerState[] | undefined {
           );
         }).then((_unsub): void => {
           unsub = _unsub;
-        });
+        }).catch(console.error);
       } else {
         mountedRef.current && setQueried({});
       }
diff --git a/packages/react-hooks/src/useSudo.ts b/packages/react-hooks/src/useSudo.ts
index 9117af4904..8c93db847a 100644
--- a/packages/react-hooks/src/useSudo.ts
+++ b/packages/react-hooks/src/useSudo.ts
@@ -2,6 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { Codec } from '@polkadot/types/types';
 import { UseSudo } from './types';
 
 import { useEffect, useState } from 'react';
@@ -14,8 +15,7 @@ export default function useSudo (): UseSudo {
   const { api } = useApi();
   const { allAccounts, hasAccounts } = useAccounts();
   const sudoKey = useCall<string>(hasAccounts && api.query.sudo?.key, [], {
-    transform: (k): string =>
-      k.toString()
+    transform: (k: Codec) => k.toString()
   });
   const [isMine, setIsMine] = useState(false);
 
diff --git a/packages/react-params/src/Holder.tsx b/packages/react-params/src/Holder.tsx
index 122439d842..e5b82702a1 100644
--- a/packages/react-params/src/Holder.tsx
+++ b/packages/react-params/src/Holder.tsx
@@ -12,9 +12,9 @@ interface Props {
   withPadding?: boolean;
 }
 
-function Holder ({ children, className, withBorder, withPadding }: Props): React.ReactElement<Props> {
+function Holder ({ children, className = '', withBorder, withPadding }: Props): React.ReactElement<Props> {
   return (
-    <div className={`ui--Params ${className} ${withBorder ? 'withBorder' : 'withoutBorder'} ${withPadding && 'withPadding'}`}>
+    <div className={`ui--Params ${className} ${withBorder ? 'withBorder' : 'withoutBorder'} ${withPadding ? 'withPadding' : ''}`}>
       {children}
     </div>
   );
diff --git a/packages/react-params/src/Param/Account.tsx b/packages/react-params/src/Param/Account.tsx
index 34f2a75e65..c39ce6a57f 100644
--- a/packages/react-params/src/Param/Account.tsx
+++ b/packages/react-params/src/Param/Account.tsx
@@ -10,8 +10,8 @@ import keyring from '@polkadot/ui-keyring';
 
 import Bare from './Bare';
 
-function Account ({ className, defaultValue: { value }, isDisabled, isError, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
-  const [defaultValue] = useState(value?.toString());
+function Account ({ className = '', defaultValue: { value }, isDisabled, isError, label, onChange, withLabel }: Props): React.ReactElement<Props> {
+  const [defaultValue] = useState((value as string)?.toString());
 
   const _onChange = useCallback(
     (value?: string | null): void => {
@@ -36,10 +36,7 @@ function Account ({ className, defaultValue: { value }, isDisabled, isError, lab
   );
 
   return (
-    <Bare
-      className={className}
-      style={style}
-    >
+    <Bare className={className}>
       <InputAddress
         className='full'
         defaultValue={defaultValue}
diff --git a/packages/react-params/src/Param/Amount.tsx b/packages/react-params/src/Param/Amount.tsx
index 81792f0b5c..2844bcc489 100644
--- a/packages/react-params/src/Param/Amount.tsx
+++ b/packages/react-params/src/Param/Amount.tsx
@@ -13,13 +13,13 @@ import { bnToBn, formatNumber } from '@polkadot/util';
 
 import Bare from './Bare';
 
-function Amount ({ className, defaultValue: { value }, isDisabled, isError, label, onChange, onEnter, style, withLabel }: Props): React.ReactElement<Props> {
+function Amount ({ className = '', defaultValue: { value }, isDisabled, isError, label, onChange, onEnter, withLabel }: Props): React.ReactElement<Props> {
   const [defaultValue] = useState(
     isDisabled
       ? (
         value instanceof ClassOf(registry, 'AccountIndex')
           ? value.toString()
-          : formatNumber(value)
+          : formatNumber(value as number)
       )
       : bnToBn((value as number) || 0).toString()
   );
@@ -34,10 +34,7 @@ function Amount ({ className, defaultValue: { value }, isDisabled, isError, labe
   );
 
   return (
-    <Bare
-      className={className}
-      style={style}
-    >
+    <Bare className={className}>
       <Input
         className='full'
         defaultValue={defaultValue}
diff --git a/packages/react-params/src/Param/Balance.tsx b/packages/react-params/src/Param/Balance.tsx
index fae959f40a..59f04fef30 100644
--- a/packages/react-params/src/Param/Balance.tsx
+++ b/packages/react-params/src/Param/Balance.tsx
@@ -10,7 +10,7 @@ import { InputBalance } from '@polkadot/react-components';
 
 import Bare from './Bare';
 
-function Balance ({ className, defaultValue: { value }, isDisabled, isError, label, onChange, onEnter, onEscape, style, withLabel }: Props): React.ReactElement<Props> {
+function Balance ({ className = '', defaultValue: { value }, isDisabled, isError, label, onChange, onEnter, onEscape, withLabel }: Props): React.ReactElement<Props> {
   const [isValid, setIsValid] = useState(false);
   const [defaultValue] = useState(new BN((value as BN || '0').toString()).toString(10));
 
@@ -28,10 +28,7 @@ function Balance ({ className, defaultValue: { value }, isDisabled, isError, lab
   );
 
   return (
-    <Bare
-      className={className}
-      style={style}
-    >
+    <Bare className={className}>
       <InputBalance
         className='full'
         defaultValue={defaultValue}
diff --git a/packages/react-params/src/Param/Bare.tsx b/packages/react-params/src/Param/Bare.tsx
index 4bc6942878..f6b2a13e7e 100644
--- a/packages/react-params/src/Param/Bare.tsx
+++ b/packages/react-params/src/Param/Bare.tsx
@@ -12,12 +12,9 @@ interface Props extends BareProps {
   children?: React.ReactNode;
 }
 
-function Bare ({ children, className, style }: Props): React.ReactElement<Props> {
+function Bare ({ children, className = '' }: Props): React.ReactElement<Props> {
   return (
-    <div
-      className={classes('ui--row', className)}
-      style={style}
-    >
+    <div className={classes('ui--row', className)}>
       {children}
     </div>
   );
diff --git a/packages/react-params/src/Param/Base.tsx b/packages/react-params/src/Param/Base.tsx
index 1bf42d4c8b..806c68f697 100644
--- a/packages/react-params/src/Param/Base.tsx
+++ b/packages/react-params/src/Param/Base.tsx
@@ -19,12 +19,9 @@ interface Props extends BareProps {
   withLabel?: boolean;
 }
 
-function Base ({ children, className, isOuter, label, size = 'full', style, withLabel }: Props): React.ReactElement<Props> {
+function Base ({ children, className = '', isOuter, label, size = 'full', withLabel }: Props): React.ReactElement<Props> {
   return (
-    <Bare
-      className={className}
-      style={style}
-    >
+    <Bare className={className}>
       <Labelled
         className={size}
         isOuter
diff --git a/packages/react-params/src/Param/BaseBytes.tsx b/packages/react-params/src/Param/BaseBytes.tsx
index a07c71d655..4b6c889a6e 100644
--- a/packages/react-params/src/Param/BaseBytes.tsx
+++ b/packages/react-params/src/Param/BaseBytes.tsx
@@ -42,7 +42,7 @@ function convertInput (value: string): [boolean, Uint8Array] {
   return [value === '0x', new Uint8Array([])];
 }
 
-function BaseBytes ({ asHex, children, className, defaultValue: { value }, isDisabled, isError, label, length = -1, onChange, onEnter, onEscape, size = 'full', style, validate = defaultValidate, withLabel, withLength }: Props): React.ReactElement<Props> {
+function BaseBytes ({ asHex, children, className = '', defaultValue: { value }, isDisabled, isError, label, length = -1, onChange, onEnter, onEscape, size = 'full', validate = defaultValidate, withLabel, withLength }: Props): React.ReactElement<Props> {
   const [defaultValue] = useState(
     value
       ? isHex(value)
@@ -79,13 +79,10 @@ function BaseBytes ({ asHex, children, className, defaultValue: { value }, isDis
   );
 
   return (
-    <Bare
-      className={className}
-      style={style}
-    >
+    <Bare className={className}>
       <Input
         className={size}
-        defaultValue={defaultValue}
+        defaultValue={defaultValue as string}
         isAction={!!children}
         isDisabled={isDisabled}
         isError={isError || !isValid}
diff --git a/packages/react-params/src/Param/Bool.tsx b/packages/react-params/src/Param/Bool.tsx
index c1657efa8c..a65847bc95 100644
--- a/packages/react-params/src/Param/Bool.tsx
+++ b/packages/react-params/src/Param/Bool.tsx
@@ -10,7 +10,7 @@ import { Dropdown } from '@polkadot/react-components';
 import { useTranslation } from '../translate';
 import Bare from './Bare';
 
-function BoolParam ({ className, defaultValue: { value }, isDisabled, isError, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
+function BoolParam ({ className = '', defaultValue: { value }, isDisabled, isError, label, onChange, withLabel }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [defaultValue] = useState(
     value instanceof Boolean
@@ -20,8 +20,8 @@ function BoolParam ({ className, defaultValue: { value }, isDisabled, isError, l
 
   const options = useMemo(
     () => [
-      { text: t('No'), value: false },
-      { text: t('Yes'), value: true }
+      { text: t<string>('No'), value: false },
+      { text: t<string>('Yes'), value: true }
     ],
     [t]
   );
@@ -36,10 +36,7 @@ function BoolParam ({ className, defaultValue: { value }, isDisabled, isError, l
   );
 
   return (
-    <Bare
-      className={className}
-      style={style}
-    >
+    <Bare className={className}>
       <Dropdown
         className='full'
         defaultValue={defaultValue}
diff --git a/packages/react-params/src/Param/Bytes.tsx b/packages/react-params/src/Param/Bytes.tsx
index 971952423b..baadabfc64 100644
--- a/packages/react-params/src/Param/Bytes.tsx
+++ b/packages/react-params/src/Param/Bytes.tsx
@@ -11,7 +11,7 @@ import { Button } from '@polkadot/react-components';
 import BaseBytes from './BaseBytes';
 import File from './File';
 
-function Bytes ({ className, defaultValue, isDisabled, isError, label, name, onChange, onEnter, onEscape, style, type, withLabel }: Props): React.ReactElement<Props> {
+function Bytes ({ className = '', defaultValue, isDisabled, isError, label, name, onChange, onEnter, onEscape, type, withLabel }: Props): React.ReactElement<Props> {
   const [isValid, setIsValid] = useState(false);
   const [isFileDrop, setIsFileDrop] = useState(false);
 
@@ -42,7 +42,6 @@ function Bytes ({ className, defaultValue, isDisabled, isError, label, name, onC
         isError={isError || !isValid}
         label={label}
         onChange={_onChangeFile}
-        style={style}
         withLabel={withLabel}
       />
     )
@@ -58,7 +57,6 @@ function Bytes ({ className, defaultValue, isDisabled, isError, label, name, onC
         onChange={onChange}
         onEnter={onEnter}
         onEscape={onEscape}
-        style={style}
         type={type}
         withLabel={withLabel}
         withLength
diff --git a/packages/react-params/src/Param/Call.tsx b/packages/react-params/src/Param/Call.tsx
index d343e44bf2..6482c4fe39 100644
--- a/packages/react-params/src/Param/Call.tsx
+++ b/packages/react-params/src/Param/Call.tsx
@@ -8,13 +8,12 @@ import { Props } from '../types';
 import React from 'react';
 import { registry } from '@polkadot/react-api';
 import { Call, Static } from '@polkadot/react-components';
-import { classes } from '@polkadot/react-components/util';
 
 import Bare from './Bare';
 import Unknown from './Unknown';
 
 function CallDisplay (props: Props): React.ReactElement<Props> {
-  const { className, defaultValue: { value }, isDisabled, label, style, withLabel } = props;
+  const { className = '', defaultValue: { value }, isDisabled, label, withLabel } = props;
 
   if (!isDisabled) {
     return (
@@ -28,9 +27,8 @@ function CallDisplay (props: Props): React.ReactElement<Props> {
   return (
     <Bare>
       <Static
-        className={classes(className, 'full')}
+        className={`${className} full`}
         label={label}
-        style={style}
         withLabel={withLabel}
       >
         {section}.{method}
diff --git a/packages/react-params/src/Param/Code.tsx b/packages/react-params/src/Param/Code.tsx
index cd3ca317f2..44385e9e88 100644
--- a/packages/react-params/src/Param/Code.tsx
+++ b/packages/react-params/src/Param/Code.tsx
@@ -9,7 +9,7 @@ import React, { useCallback, useState } from 'react';
 import Bytes from './Bytes';
 import BytesFile from './File';
 
-function Code ({ className, defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, style, type, withLabel }: Props): React.ReactElement<Props> {
+function Code ({ className = '', defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, type, withLabel }: Props): React.ReactElement<Props> {
   const [isValid, setIsValid] = useState(false);
 
   // TODO: Validate that we have actual proper WASM code
@@ -35,7 +35,6 @@ function Code ({ className, defaultValue, isDisabled, isError, label, onChange,
         label={label}
         onEnter={onEnter}
         onEscape={onEscape}
-        style={style}
         type={type}
         withLabel={withLabel}
       />
@@ -49,7 +48,6 @@ function Code ({ className, defaultValue, isDisabled, isError, label, onChange,
       isError={isError || !isValid}
       label={label}
       onChange={_onChange}
-      style={style}
       withLabel={withLabel}
     />
   );
diff --git a/packages/react-params/src/Param/DispatchError.tsx b/packages/react-params/src/Param/DispatchError.tsx
index 6aa8f47923..7a73f0439c 100644
--- a/packages/react-params/src/Param/DispatchError.tsx
+++ b/packages/react-params/src/Param/DispatchError.tsx
@@ -13,17 +13,17 @@ import { useTranslation } from '../translate';
 import Static from './Static';
 import Unknown from './Unknown';
 
+interface ModuleErrorDefault {
+  isModule?: boolean
+}
+
 interface Details {
   details?: string | null;
   type?: string;
 }
 
-interface RawModuleError {
-  value: DispatchError;
-}
-
-function isModuleError (defaultValue?: { value: any }): defaultValue is RawModuleError {
-  return !!defaultValue?.value?.isModule;
+function isModuleError (value?: ModuleErrorDefault): value is DispatchError {
+  return !!value?.isModule;
 }
 
 function ErrorDisplay (props: Props): React.ReactElement<Props> {
@@ -31,9 +31,11 @@ function ErrorDisplay (props: Props): React.ReactElement<Props> {
   const [{ details, type }, setDetails] = useState<Details>({});
 
   useEffect((): void => {
-    if (isModuleError(props.defaultValue)) {
+    const { value } = props.defaultValue || {};
+
+    if (isModuleError(value as ModuleErrorDefault)) {
       try {
-        const { documentation, name, section } = registry.findMetaError(props.defaultValue.value.asModule);
+        const { documentation, name, section } = registry.findMetaError((value as DispatchError).asModule);
 
         return setDetails({
           details: documentation.join(', '),
@@ -57,14 +59,14 @@ function ErrorDisplay (props: Props): React.ReactElement<Props> {
       <Input
         className='full'
         isDisabled
-        label={t('type')}
+        label={t<string>('type')}
         value={type}
       />
       {details && (
         <Input
           className='full'
           isDisabled
-          label={t('details')}
+          label={t<string>('details')}
           value={details}
         />
       )}
diff --git a/packages/react-params/src/Param/Enum.tsx b/packages/react-params/src/Param/Enum.tsx
index a4f8bc7561..cf11ebcdb3 100644
--- a/packages/react-params/src/Param/Enum.tsx
+++ b/packages/react-params/src/Param/Enum.tsx
@@ -20,13 +20,13 @@ interface Option {
 }
 
 function EnumParam (props: Props): React.ReactElement<Props> {
-  const { className, defaultValue, isDisabled, isError, label, onChange, overrides, style, type, withLabel } = props;
+  const { className = '', defaultValue, isDisabled, isError, label, onChange, overrides, type, withLabel } = props;
   const [current, setCurrent] = useState<ParamDef[] | null>(null);
   const [initialValue, setInitialValue] = useState<string | null>(null);
   const [{ options, subTypes }, setOptions] = useState<{ options: Option[]; subTypes: TypeDef[] }>({ options: [], subTypes: [] });
 
   useEffect((): void => {
-    const rawType = createType(registry, type.type as any).toRawType();
+    const rawType = createType(registry, type.type as 'u32').toRawType();
     const typeDef = getTypeDef(rawType);
     const subTypes = typeDef.sub as TypeDef[];
 
@@ -45,7 +45,7 @@ function EnumParam (props: Props): React.ReactElement<Props> {
       defaultValue && defaultValue.value
         ? defaultValue.value instanceof Enum
           ? defaultValue.value.type
-          : Object.keys(defaultValue.value)[0]
+          : Object.keys(defaultValue.value as Record<string, unknown>)[0]
         : null
     );
   }, [defaultValue]);
@@ -78,10 +78,7 @@ function EnumParam (props: Props): React.ReactElement<Props> {
   }
 
   return (
-    <Bare
-      className={className}
-      style={style}
-    >
+    <Bare className={className}>
       <Dropdown
         className='full'
         defaultValue={initialValue}
diff --git a/packages/react-params/src/Param/File.tsx b/packages/react-params/src/Param/File.tsx
index 0b3149b52c..5f91b1d5d7 100644
--- a/packages/react-params/src/Param/File.tsx
+++ b/packages/react-params/src/Param/File.tsx
@@ -19,12 +19,9 @@ interface Props extends BareProps {
   withLabel?: boolean;
 }
 
-function File ({ className, isDisabled, isError = false, label, onChange, placeholder, style, withLabel }: Props): React.ReactElement<Props> {
+function File ({ className = '', isDisabled, isError = false, label, onChange, placeholder, withLabel }: Props): React.ReactElement<Props> {
   return (
-    <Bare
-      className={className}
-      style={style}
-    >
+    <Bare className={className}>
       <InputFile
         convertHex
         isDisabled={isDisabled}
diff --git a/packages/react-params/src/Param/Hash256.tsx b/packages/react-params/src/Param/Hash256.tsx
index 4d9a9b85f2..442239776f 100644
--- a/packages/react-params/src/Param/Hash256.tsx
+++ b/packages/react-params/src/Param/Hash256.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 
 import BaseBytes from './BaseBytes';
 
-function Hash256 ({ className, defaultValue, isDisabled, isError, label, name, onChange, onEnter, onEscape, style, type, withLabel }: Props): React.ReactElement<Props> {
+function Hash256 ({ className = '', defaultValue, isDisabled, isError, label, name, onChange, onEnter, onEscape, type, withLabel }: Props): React.ReactElement<Props> {
   return (
     <BaseBytes
       className={className}
@@ -21,7 +21,6 @@ function Hash256 ({ className, defaultValue, isDisabled, isError, label, name, o
       onChange={onChange}
       onEnter={onEnter}
       onEscape={onEscape}
-      style={style}
       type={type}
       withLabel={withLabel}
     />
diff --git a/packages/react-params/src/Param/Hash512.tsx b/packages/react-params/src/Param/Hash512.tsx
index c0f3b45533..c29374fafb 100644
--- a/packages/react-params/src/Param/Hash512.tsx
+++ b/packages/react-params/src/Param/Hash512.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 
 import BaseBytes from './BaseBytes';
 
-function Hash512 ({ className, defaultValue, isDisabled, isError, label, name, onChange, onEnter, onEscape, style, type, withLabel }: Props): React.ReactElement<Props> {
+function Hash512 ({ className = '', defaultValue, isDisabled, isError, label, name, onChange, onEnter, onEscape, type, withLabel }: Props): React.ReactElement<Props> {
   return (
     <BaseBytes
       className={className}
@@ -21,7 +21,6 @@ function Hash512 ({ className, defaultValue, isDisabled, isError, label, name, o
       onChange={onChange}
       onEnter={onEnter}
       onEscape={onEscape}
-      style={style}
       type={type}
       withLabel={withLabel}
     />
diff --git a/packages/react-params/src/Param/KeyValue.tsx b/packages/react-params/src/Param/KeyValue.tsx
index 840c0bdfc0..e6442a9e6b 100644
--- a/packages/react-params/src/Param/KeyValue.tsx
+++ b/packages/react-params/src/Param/KeyValue.tsx
@@ -36,7 +36,7 @@ export function createParam (hex: string | String, length = -1): StateParam {
   };
 }
 
-function KeyValue ({ className, isDisabled, label, onChange, onEnter, style, withLabel }: Props): React.ReactElement<Props> {
+function KeyValue ({ className = '', isDisabled, label, onChange, onEnter, withLabel }: Props): React.ReactElement<Props> {
   const [, setIsValid] = useState(false);
   const [key, setKey] = useState<StateParam>({ isValid: false, u8a: new Uint8Array([]) });
   const [value, setValue] = useState<StateParam>({ isValid: false, u8a: new Uint8Array([]) });
@@ -64,10 +64,7 @@ function KeyValue ({ className, isDisabled, label, onChange, onEnter, style, wit
   );
 
   return (
-    <Bare
-      className={className}
-      style={style}
-    >
+    <Bare className={className}>
       <Input
         className='medium'
         isDisabled={isDisabled}
diff --git a/packages/react-params/src/Param/KeyValueArray.tsx b/packages/react-params/src/Param/KeyValueArray.tsx
index d33a91a80c..6181480854 100644
--- a/packages/react-params/src/Param/KeyValueArray.tsx
+++ b/packages/react-params/src/Param/KeyValueArray.tsx
@@ -31,7 +31,7 @@ const BYTES_TYPE = {
 const EMPTY_PLACEHOLDER = 'click to select or drag and drop JSON key/value (hex-encoded) file';
 
 function parseFile (raw: Uint8Array): Parsed {
-  const json = JSON.parse(u8aToString(raw));
+  const json = JSON.parse(u8aToString(raw)) as Record<string, string>;
   const keys = Object.keys(json);
   let isValid = keys.length !== 0;
   const value = keys.map((key): [Uint8Array, Uint8Array] => {
@@ -53,7 +53,7 @@ function parseFile (raw: Uint8Array): Parsed {
   };
 }
 
-function KeyValueArray ({ className, defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, style, withLabel }: Props): React.ReactElement<Props> {
+function KeyValueArray ({ className = '', defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, withLabel }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [placeholder, setPlaceholder] = useState<string>(t(EMPTY_PLACEHOLDER));
 
@@ -88,7 +88,6 @@ function KeyValueArray ({ className, defaultValue, isDisabled, isError, label, o
         <Base
           className={className}
           label={label}
-          style={style}
         >
           <div />
         </Base>
@@ -122,7 +121,6 @@ function KeyValueArray ({ className, defaultValue, isDisabled, isError, label, o
       label={label}
       onChange={_onChange}
       placeholder={placeholder}
-      style={style}
       withLabel={withLabel}
     />
   );
diff --git a/packages/react-params/src/Param/Moment.tsx b/packages/react-params/src/Param/Moment.tsx
index 386286020a..5469cbbe0e 100644
--- a/packages/react-params/src/Param/Moment.tsx
+++ b/packages/react-params/src/Param/Moment.tsx
@@ -9,7 +9,7 @@ import { Static } from '@polkadot/react-components';
 
 import Amount from './Amount';
 
-function Moment ({ className, defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, style, type, withLabel }: Props): React.ReactElement<Props> {
+function Moment ({ className = '', defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, type, withLabel }: Props): React.ReactElement<Props> {
   const _onChange = useCallback(
     (value: RawParamOnChangeValue) =>
       onChange && onChange(value),
@@ -22,12 +22,11 @@ function Moment ({ className, defaultValue, isDisabled, isError, label, onChange
         className={className}
         defaultValue={
           (defaultValue && defaultValue.value)
-            ? defaultValue.value.toString()
+            ? (defaultValue.value as string).toString()
             : ''
         }
         isError={isError}
         label={label}
-        style={style}
         withLabel={withLabel}
       />
     );
@@ -43,7 +42,6 @@ function Moment ({ className, defaultValue, isDisabled, isError, label, onChange
       onChange={_onChange}
       onEnter={onEnter}
       onEscape={onEscape}
-      style={style}
       type={type}
       withLabel={withLabel}
     />
diff --git a/packages/react-params/src/Param/Option.tsx b/packages/react-params/src/Param/Option.tsx
index eb23fa2f01..ad9081457e 100644
--- a/packages/react-params/src/Param/Option.tsx
+++ b/packages/react-params/src/Param/Option.tsx
@@ -12,7 +12,7 @@ import { Toggle } from '@polkadot/react-components';
 import { useTranslation } from '../translate';
 import Param from './index';
 
-function Option ({ className, defaultValue, isDisabled, name, onChange, onEnter, onEscape, type: { sub } }: Props): React.ReactElement<Props> {
+function Option ({ className = '', defaultValue, isDisabled, name, onChange, onEnter, onEscape, type: { sub } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [isActive, setIsActive] = useState(false);
 
@@ -40,8 +40,8 @@ function Option ({ className, defaultValue, isDisabled, name, onChange, onEnter,
           className='ui--Param-Option-toggle'
           label={
             isActive
-              ? t('include option')
-              : t('exclude option')
+              ? t<string>('include option')
+              : t<string>('exclude option')
           }
           onChange={setIsActive}
           value={isActive}
diff --git a/packages/react-params/src/Param/Raw.tsx b/packages/react-params/src/Param/Raw.tsx
index 4bf602be98..5e5b1132c3 100644
--- a/packages/react-params/src/Param/Raw.tsx
+++ b/packages/react-params/src/Param/Raw.tsx
@@ -2,6 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { Codec } from '@polkadot/types/types';
 import { Props } from '../types';
 
 import React, { useCallback, useState } from 'react';
@@ -9,7 +10,7 @@ import { Input } from '@polkadot/react-components';
 
 import Bare from './Bare';
 
-function Raw ({ className, defaultValue: { value }, isDisabled, isError, label, onChange, onEnter, onEscape, style, withLabel }: Props): React.ReactElement<Props> {
+function Raw ({ className = '', defaultValue: { value }, isDisabled, isError, label, onChange, onEnter, onEscape, withLabel }: Props): React.ReactElement<Props> {
   const [isValid, setIsValid] = useState(false);
 
   const _onChange = useCallback(
@@ -26,17 +27,14 @@ function Raw ({ className, defaultValue: { value }, isDisabled, isError, label,
   );
 
   const defaultValue = value
-    ? (value.toHex ? value.toHex() : value)
+    ? ((value as { toHex?: () => unknown }).toHex ? (value as Codec).toHex() : value)
     : '';
 
   return (
-    <Bare
-      className={className}
-      style={style}
-    >
+    <Bare className={className}>
       <Input
         className='full'
-        defaultValue={defaultValue}
+        defaultValue={defaultValue as string}
         isDisabled={isDisabled}
         isError={isError || !isValid}
         label={label}
diff --git a/packages/react-params/src/Param/Static.tsx b/packages/react-params/src/Param/Static.tsx
index 64adfb0452..2ef32d7645 100644
--- a/packages/react-params/src/Param/Static.tsx
+++ b/packages/react-params/src/Param/Static.tsx
@@ -2,6 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { Codec } from '@polkadot/types/types';
 import { Props as BareProps, RawParam } from '../types';
 
 import React from 'react';
@@ -18,25 +19,25 @@ interface Props extends BareProps {
   withLabel?: boolean;
 }
 
-function StaticParam ({ asHex, children, className, defaultValue, label, style }: Props): React.ReactElement<Props> {
+function StaticParam ({ asHex, children, className = '', defaultValue, label }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const value = defaultValue && defaultValue.value && (
     asHex
-      ? defaultValue.value.toHex()
+      ? (defaultValue.value as Codec).toHex()
       : JSON.stringify(
-        defaultValue.value.toHuman ? defaultValue.value.toHuman() : defaultValue.value, null, 2
+        (defaultValue.value as { toHuman?: () => unknown }).toHuman
+          ? (defaultValue.value as Codec).toHuman()
+          : defaultValue.value,
+        null, 2
       ).replace(/"/g, '').replace(/\\/g, '').replace(/\],\[/g, '],\n[')
   );
 
   return (
-    <Bare
-      className={className}
-      style={style}
-    >
+    <Bare className={className}>
       <Static
         className='full'
         label={label}
-        value={<pre>{value || t('<empty>')}</pre>}
+        value={<pre>{value || t<string>('<empty>')}</pre>}
       />
       {children}
     </Bare>
diff --git a/packages/react-params/src/Param/Struct.tsx b/packages/react-params/src/Param/Struct.tsx
index c812cf97e8..bd0e24b9c3 100644
--- a/packages/react-params/src/Param/Struct.tsx
+++ b/packages/react-params/src/Param/Struct.tsx
@@ -14,14 +14,14 @@ import Base from './Base';
 import Static from './Static';
 
 function StructParam (props: Props): React.ReactElement<Props> {
-  const { className, isDisabled, label, onChange, overrides, style, type, withLabel } = props;
+  const { className = '', isDisabled, label, onChange, overrides, type, withLabel } = props;
   const [params, setParams] = useState<ParamDef[]>([]);
 
   useEffect((): void => {
     let typeDef;
 
     try {
-      const rawType = createType(registry, type.type as any).toRawType();
+      const rawType = createType(registry, type.type as 'u32').toRawType();
 
       typeDef = getTypeDef(rawType);
     } catch (e) {
@@ -54,7 +54,6 @@ function StructParam (props: Props): React.ReactElement<Props> {
       <Base
         className={className}
         label={label}
-        style={style}
         withLabel={withLabel}
       />
       <Params
diff --git a/packages/react-params/src/Param/Text.tsx b/packages/react-params/src/Param/Text.tsx
index 4206662852..2b855140db 100644
--- a/packages/react-params/src/Param/Text.tsx
+++ b/packages/react-params/src/Param/Text.tsx
@@ -9,7 +9,7 @@ import { Input } from '@polkadot/react-components';
 
 import Bare from './Bare';
 
-function Text ({ className, defaultValue: { value }, isDisabled, isError, label, onChange, onEnter, onEscape, style, withLabel }: Props): React.ReactElement<Props> {
+function Text ({ className = '', defaultValue: { value }, isDisabled, isError, label, onChange, onEnter, onEscape, withLabel }: Props): React.ReactElement<Props> {
   const [isValid, setIsValid] = useState(false);
 
   const _onChange = useCallback(
@@ -25,13 +25,10 @@ function Text ({ className, defaultValue: { value }, isDisabled, isError, label,
     [onChange]
   );
 
-  const defaultValue = (value || '').toString();
+  const defaultValue = (value as string || '').toString();
 
   return (
-    <Bare
-      className={className}
-      style={style}
-    >
+    <Bare className={className}>
       <Input
         className='full'
         defaultValue={defaultValue}
diff --git a/packages/react-params/src/Param/Tuple.tsx b/packages/react-params/src/Param/Tuple.tsx
index 516158eaef..90b93bfd1f 100644
--- a/packages/react-params/src/Param/Tuple.tsx
+++ b/packages/react-params/src/Param/Tuple.tsx
@@ -15,11 +15,11 @@ import Static from './Static';
 
 function Tuple (props: Props): React.ReactElement<Props> {
   const [params, setParams] = useState<ParamDef[]>([]);
-  const { className, isDisabled, label, onChange, overrides, style, type, withLabel } = props;
+  const { className = '', isDisabled, label, onChange, overrides, type, withLabel } = props;
 
   useEffect((): void => {
     try {
-      const rawType = createType(registry, type.type as any).toRawType();
+      const rawType = createType(registry, type.type as 'u32').toRawType();
       const typeDef = getTypeDef(rawType);
 
       setParams((typeDef.sub as TypeDef[]).map((type): ParamDef => ({ name: type.name, type })));
@@ -47,7 +47,6 @@ function Tuple (props: Props): React.ReactElement<Props> {
       <Base
         className={className}
         label={label}
-        style={style}
         withLabel={withLabel}
       />
       <Params
diff --git a/packages/react-params/src/Param/Unknown.tsx b/packages/react-params/src/Param/Unknown.tsx
index 22d821b61f..c5c3c617df 100644
--- a/packages/react-params/src/Param/Unknown.tsx
+++ b/packages/react-params/src/Param/Unknown.tsx
@@ -15,7 +15,7 @@ interface Props extends BareProps {
 }
 
 function Unknown (props: Props): React.ReactElement<Props> {
-  const { className, defaultValue, isDisabled, isError, label, name, onChange, onEnter, onEscape, style, type } = props;
+  const { className = '', defaultValue, isDisabled, isError, label, name, onChange, onEnter, onEscape, type } = props;
 
   if (isDisabled) {
     return <Static {...props} />;
@@ -34,7 +34,6 @@ function Unknown (props: Props): React.ReactElement<Props> {
       onChange={onChange}
       onEnter={onEnter}
       onEscape={onEscape}
-      style={style}
       type={type}
       withLength={false}
     />
diff --git a/packages/react-params/src/Param/Vector.tsx b/packages/react-params/src/Param/Vector.tsx
index e02b86d94e..e638efb2e9 100644
--- a/packages/react-params/src/Param/Vector.tsx
+++ b/packages/react-params/src/Param/Vector.tsx
@@ -21,7 +21,7 @@ function generateParam (type: TypeDef, index: number): ParamDef {
   };
 }
 
-function Vector ({ className, defaultValue, isDisabled = false, label, onChange, overrides, style, type, withLabel }: Props): React.ReactElement<Props> | null {
+function Vector ({ className = '', defaultValue, isDisabled = false, label, onChange, overrides, type, withLabel }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const [count, setCount] = useState(0);
   const [params, setParams] = useState<ParamDef[]>([]);
@@ -58,7 +58,7 @@ function Vector ({ className, defaultValue, isDisabled = false, label, onChange,
       const params: ParamDef[] = [];
       const values: RawParam[] = [];
 
-      (defaultValue.value || []).forEach((value: RawParam, index: number): void => {
+      (defaultValue.value as RawParam[] || []).forEach((value: RawParam, index: number): void => {
         values.push(
           isUndefined(value) || isUndefined(value.isValid)
             ? { isValid: !isUndefined(value), value }
@@ -94,7 +94,6 @@ function Vector ({ className, defaultValue, isDisabled = false, label, onChange,
       className={className}
       isOuter
       label={label}
-      style={style}
       withLabel={withLabel}
     >
       {!isDisabled && (
@@ -102,14 +101,14 @@ function Vector ({ className, defaultValue, isDisabled = false, label, onChange,
           <Button
             icon='add'
             isPrimary
-            label={t('Add item')}
+            label={t<string>('Add item')}
             onClick={_rowAdd}
           />
           <Button
             icon='minus'
             isDisabled={values.length === 0}
             isNegative
-            label={t('Remove item')}
+            label={t<string>('Remove item')}
             onClick={_rowRemove}
           />
         </div>
diff --git a/packages/react-params/src/Param/Vote.tsx b/packages/react-params/src/Param/Vote.tsx
index c8ebb0abbf..442d6b0d5d 100644
--- a/packages/react-params/src/Param/Vote.tsx
+++ b/packages/react-params/src/Param/Vote.tsx
@@ -21,23 +21,23 @@ function doChange (onChange?: (value: any) => void): (_: number) => void {
   };
 }
 
-function Vote ({ className, defaultValue: { value }, isDisabled, isError, onChange, style, withLabel }: Props): React.ReactElement<Props> {
+function Vote ({ className = '', defaultValue: { value }, isDisabled, isError, onChange, withLabel }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const optAye = useMemo(() => {
     return [
-      { text: t('Nay'), value: 0 },
-      { text: t('Aye'), value: -1 }
+      { text: t<string>('Nay'), value: 0 },
+      { text: t<string>('Aye'), value: -1 }
     ];
   }, [t]);
   const optConv = useMemo(() => {
     return [
-      { text: t('None'), value: 0 },
-      { text: t('Locked1x'), value: 1 },
-      { text: t('Locked2x'), value: 2 },
-      { text: t('Locked3x'), value: 3 },
-      { text: t('Locked4x'), value: 4 },
-      { text: t('Locked5x'), value: 5 },
-      { text: t('Locked6x'), value: 6 }
+      { text: t<string>('None'), value: 0 },
+      { text: t<string>('Locked1x'), value: 1 },
+      { text: t<string>('Locked2x'), value: 2 },
+      { text: t<string>('Locked3x'), value: 3 },
+      { text: t<string>('Locked4x'), value: 4 },
+      { text: t<string>('Locked5x'), value: 5 },
+      { text: t<string>('Locked6x'), value: 6 }
     ];
   }, [t]);
   const defaultValue = value instanceof BN
@@ -50,16 +50,13 @@ function Vote ({ className, defaultValue: { value }, isDisabled, isError, onChan
     : 0;
 
   return (
-    <Bare
-      className={className}
-      style={style}
-    >
+    <Bare className={className}>
       <Dropdown
         className='full'
         defaultValue={defaultValue}
         isDisabled={isDisabled}
         isError={isError}
-        label={t('aye: bool')}
+        label={t<string>('aye: bool')}
         onChange={doChange(onChange)}
         options={optAye}
         withLabel={withLabel}
@@ -70,7 +67,7 @@ function Vote ({ className, defaultValue: { value }, isDisabled, isError, onChan
           defaultValue={defaultConv}
           isDisabled={isDisabled}
           isError={isError}
-          label={t('conviction: Conviction')}
+          label={t<string>('conviction: Conviction')}
           options={optConv}
           withLabel={withLabel}
         />
diff --git a/packages/react-params/src/Param/VoteThreshold.tsx b/packages/react-params/src/Param/VoteThreshold.tsx
index 2ee7426743..837d4a30aa 100644
--- a/packages/react-params/src/Param/VoteThreshold.tsx
+++ b/packages/react-params/src/Param/VoteThreshold.tsx
@@ -26,7 +26,7 @@ export const textMap = options.reduce((textMap, { text, value }): TextMap => {
   return textMap;
 }, {} as unknown as TextMap);
 
-function VoteThresholdParam ({ className, defaultValue: { value }, isDisabled, isError, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
+function VoteThresholdParam ({ className = '', defaultValue: { value }, isDisabled, isError, label, onChange, withLabel }: Props): React.ReactElement<Props> {
   const _onChange = useCallback(
     (value: number) =>
       onChange && onChange({
@@ -41,10 +41,7 @@ function VoteThresholdParam ({ className, defaultValue: { value }, isDisabled, i
     : bnToBn(value as number).toNumber();
 
   return (
-    <Bare
-      className={className}
-      style={style}
-    >
+    <Bare className={className}>
       <Dropdown
         className='full'
         defaultValue={defaultValue}
diff --git a/packages/react-params/src/Param/findComponent.ts b/packages/react-params/src/Param/findComponent.ts
index 730cbf2dcf..f3f47adbe0 100644
--- a/packages/react-params/src/Param/findComponent.ts
+++ b/packages/react-params/src/Param/findComponent.ts
@@ -122,7 +122,7 @@ export default function findComponent (def: TypeDef, overrides: ComponentMap = {
 
   if (!Component) {
     try {
-      const instance = createType(registry, type as any);
+      const instance = createType(registry, type as 'u32');
       const raw = getTypeDef(instance.toRawType());
 
       Component = findOne(raw.type);
@@ -135,7 +135,7 @@ export default function findComponent (def: TypeDef, overrides: ComponentMap = {
         return findComponent(raw, overrides);
       }
     } catch (error) {
-      // console.error(error.message);
+      // console.error((error as Error).message);
     }
 
     // we only want to want once, not spam
diff --git a/packages/react-params/src/Param/index.tsx b/packages/react-params/src/Param/index.tsx
index 92903177d7..18e01a0e99 100644
--- a/packages/react-params/src/Param/index.tsx
+++ b/packages/react-params/src/Param/index.tsx
@@ -18,7 +18,7 @@ interface Props extends BaseProps {
   overrides?: ComponentMap;
 }
 
-function Param ({ className, defaultValue, isDisabled, isOptional, name, onChange, onEnter, onEscape, overrides, style, type }: Props): React.ReactElement<Props> | null {
+function Param ({ className = '', defaultValue, isDisabled, isOptional, name, onChange, onEnter, onEscape, overrides, type }: Props): React.ReactElement<Props> | null {
   const compRef = useRef<React.ComponentType<CProps> | null>(findComponent(type, overrides));
 
   if (!compRef.current) {
@@ -42,14 +42,13 @@ function Param ({ className, defaultValue, isDisabled, isOptional, name, onChang
         className={classes('ui--Param', className)}
         defaultValue={defaultValue}
         isDisabled={isDisabled}
-        key={`${name}:${type}`}
+        key={`${name || 'unknown'}:${type.toString()}`}
         label={label}
         name={name}
         onChange={onChange}
         onEnter={onEnter}
         onEscape={onEscape}
         overrides={overrides}
-        style={style}
         type={type}
       />
     );
diff --git a/packages/react-params/src/index.tsx b/packages/react-params/src/index.tsx
index 35547fa652..602558bc71 100644
--- a/packages/react-params/src/index.tsx
+++ b/packages/react-params/src/index.tsx
@@ -76,7 +76,7 @@ class Params extends React.PureComponent<Props, State> {
   }
 
   public render (): React.ReactNode {
-    const { children, className, isDisabled, onEnter, onEscape, overrides, params, withBorder = true } = this.props;
+    const { children, className = '', isDisabled, onEnter, onEscape, overrides, params, withBorder = true } = this.props;
     const { values = this.props.values } = this.state;
 
     if (!values || !values.length) {
@@ -95,7 +95,7 @@ class Params extends React.PureComponent<Props, State> {
                 defaultValue={values[index]}
                 index={index}
                 isDisabled={isDisabled}
-                key={`${name}:${type}:${index}`}
+                key={`${name || ''}:${type.toString()}:${index}`}
                 name={name}
                 onChange={this.onChangeParam}
                 onEnter={onEnter}
diff --git a/packages/react-params/src/initValue.ts b/packages/react-params/src/initValue.ts
index 8320ff7dc5..32f0e34239 100644
--- a/packages/react-params/src/initValue.ts
+++ b/packages/react-params/src/initValue.ts
@@ -12,12 +12,12 @@ import { isBn } from '@polkadot/util';
 
 const warnList: string[] = [];
 
-export default function getInitValue (def: TypeDef): RawParamValue | RawParamValue[] {
+export default function getInitValue (def: TypeDef): unknown | unknown[] {
   if (def.info === TypeDefInfo.Vec) {
     return [getInitValue(def.sub as TypeDef)];
   } else if (def.info === TypeDefInfo.Tuple) {
     return Array.isArray(def.sub)
-      ? def.sub.map((def): any => getInitValue(def))
+      ? def.sub.map((def) => getInitValue(def))
       : [];
   } else if (def.info === TypeDefInfo.Struct) {
     return Array.isArray(def.sub)
@@ -119,7 +119,7 @@ export default function getInitValue (def: TypeDef): RawParamValue | RawParamVal
 
     default: {
       try {
-        const instance = createType(registry, type as any);
+        const instance = createType(registry, type as 'u32');
         const raw = getTypeDef(instance.toRawType());
 
         if (isBn(instance)) {
@@ -128,7 +128,7 @@ export default function getInitValue (def: TypeDef): RawParamValue | RawParamVal
           return getInitValue(raw);
         }
       } catch (error) {
-        // console.error(error.message);
+        // console.error((error as Error).message);
       }
 
       // we only want to want once, not spam
diff --git a/packages/react-params/src/types.ts b/packages/react-params/src/types.ts
index 9faf2479ed..1fdd86e709 100644
--- a/packages/react-params/src/types.ts
+++ b/packages/react-params/src/types.ts
@@ -7,7 +7,7 @@ import { BareProps } from '@polkadot/react-components/types';
 
 // FIXME Ideally, we want these as Base from api-codec - as a stop-gap, any this until we have
 // params returning types extending Base (i.e. anything from api-codec)
-export type RawParamValue = any | undefined;
+export type RawParamValue = unknown | undefined;
 
 export type RawParamValueArray = (RawParamValue | RawParamValue[])[];
 
@@ -22,6 +22,7 @@ export interface RawParamOnChangeValue {
   isValid: boolean;
   value: RawParamValues;
 }
+
 export type RawParamOnChange = (value: RawParamOnChangeValue) => void;
 export type RawParamOnEnter = () => void;
 export type RawParamOnEscape = () => void;
diff --git a/packages/react-params/src/valueToText.tsx b/packages/react-params/src/valueToText.tsx
index 8737bac267..974895ffc8 100644
--- a/packages/react-params/src/valueToText.tsx
+++ b/packages/react-params/src/valueToText.tsx
@@ -3,6 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { Keys, ValidatorId } from '@polkadot/types/interfaces';
+import { Codec } from '@polkadot/types/types';
 
 import React from 'react';
 import { classes } from '@polkadot/react-components/util';
@@ -11,10 +12,10 @@ import { Option, Raw } from '@polkadot/types';
 
 interface DivProps {
   className?: string;
-  key?: any;
+  key?: string;
 }
 
-function div ({ className, key }: DivProps, ...values: React.ReactNode[]): React.ReactNode {
+function div ({ className = '', key }: DivProps, ...values: React.ReactNode[]): React.ReactNode {
   return (
     <div
       className={classes('ui--Param-text', className)}
@@ -34,7 +35,7 @@ function formatKeys (keys: [ValidatorId, Keys][]): string {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default function valueToText (type: string, value: any, swallowError = true, contentShorten = true): React.ReactNode {
+export default function valueToText (type: string, value: Codec | undefined | null, swallowError = true, contentShorten = true): React.ReactNode {
   if (isNull(value) || isUndefined(value)) {
     return div({}, '<unknown>');
   }
@@ -46,7 +47,7 @@ export default function valueToText (type: string, value: any, swallowError = tr
       // HACK Handle Keys as hex-only (this should go away once the node value is
       // consistently swapped to `Bytes`)
       : type === 'Vec<(ValidatorId,Keys)>'
-        ? JSON.stringify(formatKeys(value as [ValidatorId, Keys][]), null, 2).replace(/"/g, '').replace(/\\/g, '').replace(/\],\[/g, '],\n[')
+        ? JSON.stringify(formatKeys(value as unknown as [ValidatorId, Keys][]), null, 2).replace(/"/g, '').replace(/\\/g, '').replace(/\],\[/g, '],\n[')
         : value instanceof Raw
           ? value.isEmpty
             ? '<empty>'
diff --git a/packages/react-query/src/Available.tsx b/packages/react-query/src/Available.tsx
index 057915ee61..82c008ea5e 100644
--- a/packages/react-query/src/Available.tsx
+++ b/packages/react-query/src/Available.tsx
@@ -17,7 +17,7 @@ interface Props extends BareProps {
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
 }
 
-function AvailableDisplay ({ children, className, label, params }: Props): React.ReactElement<Props> {
+function AvailableDisplay ({ children, className = '', label, params }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all, [params]);
 
diff --git a/packages/react-query/src/Balance.tsx b/packages/react-query/src/Balance.tsx
index e73aae7534..9c27047ebb 100644
--- a/packages/react-query/src/Balance.tsx
+++ b/packages/react-query/src/Balance.tsx
@@ -17,7 +17,7 @@ interface Props extends BareProps {
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
 }
 
-function BalanceDisplay ({ children, className, label, params }: Props): React.ReactElement<Props> {
+function BalanceDisplay ({ children, className = '', label, params }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all, [params]);
 
diff --git a/packages/react-query/src/BalanceFree.tsx b/packages/react-query/src/BalanceFree.tsx
index fb6eeb5688..130ce66387 100644
--- a/packages/react-query/src/BalanceFree.tsx
+++ b/packages/react-query/src/BalanceFree.tsx
@@ -17,7 +17,7 @@ interface Props extends BareProps {
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
 }
 
-function BalanceFree ({ children, className, label, params }: Props): React.ReactElement<Props> {
+function BalanceFree ({ children, className = '', label, params }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all, [params]);
 
diff --git a/packages/react-query/src/BalanceVoting.tsx b/packages/react-query/src/BalanceVoting.tsx
index deb60d5dc0..c69188612b 100644
--- a/packages/react-query/src/BalanceVoting.tsx
+++ b/packages/react-query/src/BalanceVoting.tsx
@@ -17,7 +17,7 @@ interface Props extends BareProps {
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
 }
 
-function BalanceVoting ({ children, className, label, params }: Props): React.ReactElement<Props> {
+function BalanceVoting ({ children, className = '', label, params }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all, [params]);
 
diff --git a/packages/react-query/src/BestFinalized.tsx b/packages/react-query/src/BestFinalized.tsx
index 845e828478..a4b7d95cbf 100644
--- a/packages/react-query/src/BestFinalized.tsx
+++ b/packages/react-query/src/BestFinalized.tsx
@@ -14,15 +14,12 @@ interface Props extends BareProps {
   label?: React.ReactNode;
 }
 
-function BestFinalized ({ children, className, label, style }: Props): React.ReactElement<Props> {
+function BestFinalized ({ children, className = '', label }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const bestNumberFinalized = useCall<BlockNumber>(api.derive.chain.bestNumberFinalized, []);
 
   return (
-    <div
-      className={className}
-      style={style}
-    >
+    <div className={className}>
       {label || ''}{
         bestNumberFinalized
           ? formatNumber(bestNumberFinalized)
diff --git a/packages/react-query/src/BestNumber.tsx b/packages/react-query/src/BestNumber.tsx
index f1457866b5..a32f04b4cb 100644
--- a/packages/react-query/src/BestNumber.tsx
+++ b/packages/react-query/src/BestNumber.tsx
@@ -15,15 +15,12 @@ interface Props extends BareProps {
   withPound?: boolean;
 }
 
-function BestNumber ({ children, className, label, style, withPound }: Props): React.ReactElement<Props> {
+function BestNumber ({ children, className = '', label, withPound }: Props): React.ReactElement<Props> {
   const { api, isApiReady } = useApi();
   const bestNumber = useCall<BlockNumber>(isApiReady && api.derive.chain.bestNumber, []);
 
   return (
-    <div
-      className={className}
-      style={style}
-    >
+    <div className={className}>
       {label || ''}{withPound && '#'}{
         bestNumber
           ? formatNumber(bestNumber)
diff --git a/packages/react-query/src/BlockAuthors.tsx b/packages/react-query/src/BlockAuthors.tsx
index 1c1a660a1d..1f930c2fa2 100644
--- a/packages/react-query/src/BlockAuthors.tsx
+++ b/packages/react-query/src/BlockAuthors.tsx
@@ -45,7 +45,7 @@ function BlockAuthorsBase ({ children }: Props): React.ReactElement<Props> {
       // subscribe to all validators
       api.query.session && api.query.session.validators((validatorIds): void => {
         setValidators(validatorIds.map((validatorId) => validatorId.toString()));
-      });
+      }).catch(console.error);
 
       // subscribe to new headers
       api.derive.chain.subscribeNewHeads((lastHeader): void => {
@@ -76,8 +76,8 @@ function BlockAuthorsBase ({ children }: Props): React.ReactElement<Props> {
 
           setState({ byAuthor, eraPoints, lastBlockAuthors: lastBlockAuthors.slice(), lastBlockNumber, lastHeader, lastHeaders });
         }
-      });
-    });
+      }).catch(console.error);
+    }).catch(console.error);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
diff --git a/packages/react-query/src/BlockToTime.tsx b/packages/react-query/src/BlockToTime.tsx
index 73de8af11c..4c92eb0fda 100644
--- a/packages/react-query/src/BlockToTime.tsx
+++ b/packages/react-query/src/BlockToTime.tsx
@@ -54,7 +54,7 @@ function extractTime (value?: number): Time {
   return addTime([round, 0, 0, 0], extractTime(value - (round * DAY)));
 }
 
-function BlockToTime ({ blocks, children, className, label, style }: Props): React.ReactElement<Props> | null {
+function BlockToTime ({ blocks, children, className = '', label }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const time = useMemo((): string => {
@@ -66,10 +66,10 @@ function BlockToTime ({ blocks, children, className, label, style }: Props): Rea
     const time = extractTime(blocks && blocks.mul(blockTime).toNumber());
 
     return [
-      time[0] ? (time[0] > 1) ? t('{{d}} days', { replace: { d: time[0] } }) : t('1 day') : null,
-      time[1] ? (time[1] > 1) ? t('{{h}} hrs', { replace: { h: time[1] } }) : t('1 hr') : null,
-      time[2] ? (time[2] > 1) ? t('{{m}} mins', { replace: { m: time[2] } }) : t('1 min') : null,
-      time[3] ? (time[3] > 1) ? t('{{s}} s', { replace: { s: time[3] } }) : t('1 s') : null
+      time[0] ? (time[0] > 1) ? t<string>('{{d}} days', { replace: { d: time[0] } }) : t<string>('1 day') : null,
+      time[1] ? (time[1] > 1) ? t<string>('{{h}} hrs', { replace: { h: time[1] } }) : t<string>('1 hr') : null,
+      time[2] ? (time[2] > 1) ? t<string>('{{m}} mins', { replace: { m: time[2] } }) : t<string>('1 min') : null,
+      time[3] ? (time[3] > 1) ? t<string>('{{s}} s', { replace: { s: time[3] } }) : t<string>('1 s') : null
     ].filter((value): value is string => !!value).slice(0, 2).join(' ');
   }, [api, blocks, t]);
 
@@ -78,10 +78,7 @@ function BlockToTime ({ blocks, children, className, label, style }: Props): Rea
   }
 
   return (
-    <div
-      className={className}
-      style={style}
-    >
+    <div className={className}>
       {label || ''}{time}{children}
     </div>
   );
diff --git a/packages/react-query/src/Bonded.tsx b/packages/react-query/src/Bonded.tsx
index 3b96e2ad46..167b8e570f 100644
--- a/packages/react-query/src/Bonded.tsx
+++ b/packages/react-query/src/Bonded.tsx
@@ -7,6 +7,7 @@ import { AccountId, AccountIndex, Address, StakingLedger } from '@polkadot/types
 
 import React from 'react';
 import { useApi, useCall } from '@polkadot/react-hooks';
+import { Option } from '@polkadot/types';
 
 import FormatBalance from './FormatBalance';
 
@@ -16,15 +17,13 @@ interface Props extends BareProps {
   label?: React.ReactNode;
 }
 
-function BondedDisplay ({ children, className, label, params }: Props): React.ReactElement<Props> {
+function BondedDisplay ({ children, className = '', label, params }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const controllerId = useCall<AccountId | null>(api.query.staking.bonded, [params], {
-    transform: (value): AccountId | null =>
-      value.unwrapOr(null)
+    transform: (value: Option<AccountId>) => value.unwrapOr(null)
   });
   const stakingLedger = useCall<StakingLedger | null>(controllerId && api.query.staking.ledger, [controllerId], {
-    transform: (value): StakingLedger | null =>
-      value.unwrapOr(null)
+    transform: (value: Option<StakingLedger>) => value.unwrapOr(null)
   });
 
   return (
diff --git a/packages/react-query/src/Chain.tsx b/packages/react-query/src/Chain.tsx
index 68dac360ba..7e029d1e60 100644
--- a/packages/react-query/src/Chain.tsx
+++ b/packages/react-query/src/Chain.tsx
@@ -12,14 +12,11 @@ interface Props extends BareProps {
   label?: React.ReactNode;
 }
 
-function Chain ({ children, className, label, style }: Props): React.ReactElement<Props> {
+function Chain ({ children, className = '', label }: Props): React.ReactElement<Props> {
   const { systemChain } = useApi();
 
   return (
-    <div
-      className={className}
-      style={style}
-    >
+    <div className={className}>
       {label || ''}{systemChain}{children}
     </div>
   );
diff --git a/packages/react-query/src/Elapsed.tsx b/packages/react-query/src/Elapsed.tsx
index 6e32dee9b2..d530a569fe 100644
--- a/packages/react-query/src/Elapsed.tsx
+++ b/packages/react-query/src/Elapsed.tsx
@@ -57,7 +57,7 @@ function getDisplayValue (now = 0, value: BN | Date | number = 0): string {
 
 tick();
 
-function Elapsed ({ className, style, value }: Props): React.ReactElement<Props> {
+function Elapsed ({ className = '', value }: Props): React.ReactElement<Props> {
   const [now, setNow] = useState(lastNow);
 
   useEffect((): () => void => {
@@ -71,10 +71,7 @@ function Elapsed ({ className, style, value }: Props): React.ReactElement<Props>
   }, []);
 
   return (
-    <div
-      className={['ui--Elapsed', className].join(' ')}
-      style={style}
-    >
+    <div className={['ui--Elapsed', className].join(' ')}>
       {getDisplayValue(now, value)}
     </div>
   );
diff --git a/packages/react-query/src/Events.tsx b/packages/react-query/src/Events.tsx
index eb6b0ce18e..76e99bb020 100644
--- a/packages/react-query/src/Events.tsx
+++ b/packages/react-query/src/Events.tsx
@@ -62,16 +62,16 @@ function EventsBase ({ children }: Props): React.ReactElement<Props> {
                   blockHash,
                   blockNumber,
                   index,
-                  key: `${blockNumber}-${blockHash}-${index}`,
+                  key: `${blockNumber.toNumber()}-${blockHash}-${index}`,
                   record
                 })),
                 ...events
               ].slice(0, MAX_EVENTS));
             }
-          });
+          }).catch(console.error);
         }
-      });
-    });
+      }).catch(console.error);
+    }).catch(console.error);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
diff --git a/packages/react-query/src/FormatBalance.tsx b/packages/react-query/src/FormatBalance.tsx
index 652f96c541..e5dc1fb2a2 100644
--- a/packages/react-query/src/FormatBalance.tsx
+++ b/packages/react-query/src/FormatBalance.tsx
@@ -49,7 +49,7 @@ function format (value: Compact<any> | BN | string, currency: string, withSi?: b
 //   return <>{prefix}.<span className='balance-postfix'>{`000${postfix || ''}`.slice(-3)}</span>{unit === '-' ? '' : unit}</>;
 // }
 
-function FormatBalance ({ children, className, isShort, label, labelPost, value, withSi }: Props): React.ReactElement<Props> {
+function FormatBalance ({ children, className = '', isShort, label, labelPost, value, withSi }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [currency] = useState(formatBalance.getDefaults().unit);
 
@@ -58,7 +58,7 @@ function FormatBalance ({ children, className, isShort, label, labelPost, value,
       {label || ''}<span className='ui--FormatBalance-value'>{
         value
           ? value === 'all'
-            ? t('everything')
+            ? t<string>('everything')
             : format(value, currency, withSi, isShort)
           : '-'
       }</span>{labelPost}{children}
diff --git a/packages/react-query/src/LockedVote.tsx b/packages/react-query/src/LockedVote.tsx
index beafb02683..7002db4e71 100644
--- a/packages/react-query/src/LockedVote.tsx
+++ b/packages/react-query/src/LockedVote.tsx
@@ -17,7 +17,7 @@ interface Props extends BareProps {
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
 }
 
-function LockedVote ({ children, className, label, params }: Props): React.ReactElement<Props> | null {
+function LockedVote ({ children, className = '', label, params }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
   const info = useCall<DeriveCouncilVote>(api.derive.council.votesOf, [params]);
 
diff --git a/packages/react-query/src/NodeName.tsx b/packages/react-query/src/NodeName.tsx
index ca1e50153c..63b96e5105 100644
--- a/packages/react-query/src/NodeName.tsx
+++ b/packages/react-query/src/NodeName.tsx
@@ -12,14 +12,11 @@ interface Props extends BareProps {
   label?: React.ReactNode;
 }
 
-function NodeName ({ children, className, label, style }: Props): React.ReactElement<Props> {
+function NodeName ({ children, className = '', label }: Props): React.ReactElement<Props> {
   const { systemName } = useApi();
 
   return (
-    <div
-      className={className}
-      style={style}
-    >
+    <div className={className}>
       {label || ''}{systemName}{children}
     </div>
   );
diff --git a/packages/react-query/src/NodeVersion.tsx b/packages/react-query/src/NodeVersion.tsx
index 12ad797e30..93543a19cf 100644
--- a/packages/react-query/src/NodeVersion.tsx
+++ b/packages/react-query/src/NodeVersion.tsx
@@ -12,14 +12,11 @@ interface Props extends BareProps {
   label?: React.ReactNode;
 }
 
-function NodeVersion ({ children, className, label, style }: Props): React.ReactElement<Props> {
+function NodeVersion ({ children, className = '', label }: Props): React.ReactElement<Props> {
   const { systemVersion } = useApi();
 
   return (
-    <div
-      className={className}
-      style={style}
-    >
+    <div className={className}>
       {label || ''}{systemVersion}{children}
     </div>
   );
diff --git a/packages/react-query/src/Nonce.tsx b/packages/react-query/src/Nonce.tsx
index eb83549cba..8d82ed6f5d 100644
--- a/packages/react-query/src/Nonce.tsx
+++ b/packages/react-query/src/Nonce.tsx
@@ -17,7 +17,7 @@ interface Props extends BareProps {
   params?: string | null;
 }
 
-function Nonce ({ children, className, label, params }: Props): React.ReactElement<Props> {
+function Nonce ({ children, className = '', label, params }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all, [params]);
 
diff --git a/packages/react-query/src/TimeNow.tsx b/packages/react-query/src/TimeNow.tsx
index da35e73dd7..d82e613d91 100644
--- a/packages/react-query/src/TimeNow.tsx
+++ b/packages/react-query/src/TimeNow.tsx
@@ -16,7 +16,7 @@ interface Props extends BareProps {
   label?: React.ReactNode;
 }
 
-function TimeNow ({ children, className, label, style }: Props): React.ReactElement<Props> {
+function TimeNow ({ children, className = '', label }: Props): React.ReactElement<Props> {
   const { api, isSubstrateV2 } = useApi();
   const timestamp = useCall<Moment>(api.query.timestamp.now, []);
   const [now, setNow] = useState<BN | undefined>();
@@ -30,10 +30,7 @@ function TimeNow ({ children, className, label, style }: Props): React.ReactElem
   }, [timestamp, isSubstrateV2]);
 
   return (
-    <div
-      className={className}
-      style={style}
-    >
+    <div className={className}>
       {label || ''}
       <Elapsed value={now} />
       {children}
diff --git a/packages/react-query/src/TotalIssuance.tsx b/packages/react-query/src/TotalIssuance.tsx
index b4e0e3ba68..76044850b3 100644
--- a/packages/react-query/src/TotalIssuance.tsx
+++ b/packages/react-query/src/TotalIssuance.tsx
@@ -13,15 +13,12 @@ interface Props extends BareProps {
   label?: React.ReactNode;
 }
 
-function TotalIssuance ({ children, className, label, style }: Props): React.ReactElement<Props> {
+function TotalIssuance ({ children, className = '', label }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const totalIssuance = useCall<string>(api.query.balances?.totalIssuance, []);
 
   return (
-    <div
-      className={className}
-      style={style}
-    >
+    <div className={className}>
       {label || ''}
       <FormatBalance
         value={totalIssuance}
diff --git a/packages/react-signer/package.json b/packages/react-signer/package.json
index ce9d40a23a..3f2837424a 100644
--- a/packages/react-signer/package.json
+++ b/packages/react-signer/package.json
@@ -12,6 +12,6 @@
   "dependencies": {
     "@babel/runtime": "^7.9.6",
     "@polkadot/react-components": "0.43.0-beta.2",
-    "@polkadot/react-qr": "^0.54.0-beta.1"
+    "@polkadot/react-qr": "^0.54.0-beta.2"
   }
 }
diff --git a/packages/react-signer/src/Checks/Proposal.tsx b/packages/react-signer/src/Checks/Proposal.tsx
index 9a74431494..8ceecc6ba8 100644
--- a/packages/react-signer/src/Checks/Proposal.tsx
+++ b/packages/react-signer/src/Checks/Proposal.tsx
@@ -17,7 +17,6 @@ import { useTranslation } from '../translate';
 interface Props {
   deposit: BN | Compact<UInt>;
   fees: DeriveFees;
-  democracy_minimumDeposit?: BN;
   onChange: (fees: ExtraFees) => void;
 }
 
@@ -64,7 +63,7 @@ function Proposal ({ deposit, onChange }: Props): React.ReactElement<Props> {
       {isBelowMinimum && (
         <div>
           <Icon name='warning sign' />
-          {t('The deposit is below the {{minimum}} minimum required for the proposal to be evaluated', {
+          {t<string>('The deposit is below the {{minimum}} minimum required for the proposal to be evaluated', {
             replace: {
               minimum: formatBalance(minDeposit, { forceUnit: '-' })
             }
@@ -74,7 +73,7 @@ function Proposal ({ deposit, onChange }: Props): React.ReactElement<Props> {
       {!extraAmount.isZero() && (
         <div>
           <Icon name='arrow right' />
-          {t('The deposit of {{deposit}} will be reserved until the proposal is completed', {
+          {t<string>('The deposit of {{deposit}} will be reserved until the proposal is completed', {
             replace: {
               deposit: formatBalance(extraAmount, { forceUnit: '-' })
             }
diff --git a/packages/react-signer/src/Checks/Transfer.tsx b/packages/react-signer/src/Checks/Transfer.tsx
index c371485afb..fc8c2778dd 100644
--- a/packages/react-signer/src/Checks/Transfer.tsx
+++ b/packages/react-signer/src/Checks/Transfer.tsx
@@ -68,7 +68,7 @@ function Transfer ({ amount, fees, onChange, recipientId }: Props): React.ReactE
       {isNoEffect && (
         <div>
           <Icon name='warning sign' />
-          {t('The final recipient balance is less or equal to {{existentialDeposit}} (the existential amount) and will not be reflected', {
+          {t<string>('The final recipient balance is less or equal to {{existentialDeposit}} (the existential amount) and will not be reflected', {
             replace: {
               existentialDeposit: formatBalance(fees.existentialDeposit)
             }
@@ -78,7 +78,7 @@ function Transfer ({ amount, fees, onChange, recipientId }: Props): React.ReactE
       {isCreation && (
         <div>
           <Icon name='warning sign' />
-          {t('A fee of {{creationFee}} will be deducted from the sender since the destination account does not exist', {
+          {t<string>('A fee of {{creationFee}} will be deducted from the sender since the destination account does not exist', {
             replace: {
               creationFee: formatBalance(fees.creationFee)
             }
diff --git a/packages/react-signer/src/Checks/index.tsx b/packages/react-signer/src/Checks/index.tsx
index 6b0401b3a5..a1e94c5b9e 100644
--- a/packages/react-signer/src/Checks/index.tsx
+++ b/packages/react-signer/src/Checks/index.tsx
@@ -21,7 +21,7 @@ interface Props {
   tip?: BN;
 }
 
-function Checks ({ accountId, className, extrinsic }: Props): React.ReactElement<Props> | null {
+function Checks ({ accountId, className = '', extrinsic }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
   const [dispatchInfo, setDispatchInfo] = useState<RuntimeDispatchInfo | null>(null);
 
diff --git a/packages/react-signer/src/Modal.tsx b/packages/react-signer/src/Modal.tsx
index 9ed7d87d6b..cb7a1184e3 100644
--- a/packages/react-signer/src/Modal.tsx
+++ b/packages/react-signer/src/Modal.tsx
@@ -91,12 +91,12 @@ function extractExternal (accountId?: string | null): AccountFlags {
   const pair = keyring.getPair(publicKey);
 
   return {
-    hardwareType: pair.meta.hardwareType,
+    hardwareType: pair.meta.hardwareType as string,
     isExternal: !!pair.meta.isExternal,
     isHardware: !!pair.meta.isHardware,
     isMultisig: !!pair.meta.isMultisig,
-    threshold: pair.meta.threshold || 0,
-    who: pair.meta.who || []
+    threshold: (pair.meta.threshold as number) || 0,
+    who: (pair.meta.who as string[]) || []
   };
 }
 
@@ -174,12 +174,12 @@ class Signer extends React.PureComponent<Props, State> {
     }
 
     if (!isSubmit && currentItem?.accountId && accountNonce == null) {
-      this.updateNonce();
+      this.updateNonce().catch(console.error);
     }
   }
 
   public render (): React.ReactNode {
-    const { className, t } = this.props;
+    const { className = '', t } = this.props;
     const { currentItem } = this.state;
 
     if (!currentItem) {
@@ -189,7 +189,7 @@ class Signer extends React.PureComponent<Props, State> {
     return (
       <Modal
         className={`ui--signer-Signer ${className}`}
-        header={t('Authorize transaction')}
+        header={t<string>('Authorize transaction')}
         size='large'
       >
         <ErrorBoundary onError={this.onRenderError}>{this.renderContent()}</ErrorBoundary>
@@ -210,7 +210,7 @@ class Signer extends React.PureComponent<Props, State> {
 
     return (
       <Modal.Actions
-        cancelLabel={signedTx ? t('Close') : undefined}
+        cancelLabel={signedTx ? t<string>('Close') : undefined}
         onCancel={
           isQrVisible
             ? this.onCancelQr
@@ -229,18 +229,18 @@ class Signer extends React.PureComponent<Props, State> {
               isPrimary
               label={
                 isQrVisible
-                  ? t('Scan Signature Qr')
+                  ? t<string>('Scan Signature Qr')
                   : currentItem.isUnsigned
-                    ? t('Submit (no signature)')
+                    ? t<string>('Submit (no signature)')
                     : isHardware
-                      ? t('Sign via {{hardwareType}}', { replace: { hardwareType: hardwareType || 'hardware' } })
+                      ? t<string>('Sign via {{hardwareType}}', { replace: { hardwareType: hardwareType || 'hardware' } })
                       : isExternal
                         ? isMultisig
-                          ? t('Sign for multisig')
-                          : t('Sign via Qr')
+                          ? t<string>('Sign for multisig')
+                          : t<string>('Sign via Qr')
                         : isSubmit
-                          ? t('Sign and Submit')
-                          : t('Sign (no submission)')
+                          ? t<string>('Sign and Submit')
+                          : t<string>('Sign (no submission)')
               }
               onClick={isQrVisible ? this.activateQrScanning : this.onSend}
               tabIndex={2}
@@ -281,8 +281,8 @@ class Signer extends React.PureComponent<Props, State> {
               </Modal.Column>
               <Modal.Column>
                 {isQrScanning
-                  ? <p>{t('Present the QR code containing the signature to the UI. Once scanned it will be submitted for on-chain processing and execution.')}</p>
-                  : <p>{t('Scan the QR code with your QR scanner. Once approved, you will be required to present the signed QR back to the UI for submission.')}</p>
+                  ? <p>{t<string>('Present the QR code containing the signature to the UI. Once scanned it will be submitted for on-chain processing and execution.')}</p>
+                  : <p>{t<string>('Scan the QR code with your QR scanner. Once approved, you will be required to present the signed QR back to the UI for submission.')}</p>
                 }
               </Modal.Column>
             </Modal.Columns>
@@ -316,14 +316,14 @@ class Signer extends React.PureComponent<Props, State> {
           <Modal.Column>
             <InputAddress
               filter={who}
-              help={t('The multisig signatory for this transaction.')}
-              label={t('signatory')}
+              help={t<string>('The multisig signatory for this transaction.')}
+              label={t<string>('signatory')}
               onChange={this.onChangeSignatory}
               type='account'
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('The signatory is one of the allowed accounts on the multisig, making a recorded approval for the transaction.')}</p>
+            <p>{t<string>('The signatory is one of the allowed accounts on the multisig, making a recorded approval for the transaction.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Modal.Columns>
@@ -332,15 +332,15 @@ class Signer extends React.PureComponent<Props, State> {
               className='tipToggle'
               label={
                 multiCall
-                  ? t('Multisig message with call (for final approval)')
-                  : t('Multisig approval with hash (non-final approval)')
+                  ? t<string>('Multisig message with call (for final approval)')
+                  : t<string>('Multisig approval with hash (non-final approval)')
               }
               onChange={this.onToggleMultiCall}
               value={multiCall}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('This could either be an approval for the hash or with full call details. The call as last approval triggers execution.')}</p>
+            <p>{t<string>('This could either be an approval for the hash or with full call details. The call as last approval triggers execution.')}</p>
           </Modal.Column>
         </Modal.Columns>
       </>
@@ -363,8 +363,8 @@ class Signer extends React.PureComponent<Props, State> {
             isDisabled={!!signedTx}
             label={
               showTip
-                ? t('Include an optional tip for faster processing')
-                : t('Do not include a tip for the block author')
+                ? t<string>('Include an optional tip for faster processing')
+                : t<string>('Do not include a tip for the block author')
             }
             onChange={this.onShowTip}
             value={showTip}
@@ -372,16 +372,16 @@ class Signer extends React.PureComponent<Props, State> {
           {showTip && (
             <InputBalance
               defaultValue={new BN(0)}
-              help={t('Add a tip to this extrinsic, paying the block author for greater priority')}
+              help={t<string>('Add a tip to this extrinsic, paying the block author for greater priority')}
               isDisabled={!!signedTx}
               isZeroable
-              label={t('Tip (optional)')}
+              label={t<string>('Tip (optional)')}
               onChange={this.onChangeTip}
             />
           )}
         </Modal.Column>
         <Modal.Column>
-          <p>{t('Adding an optional tip to the transaction could allow for higher priority, especially when the chain is busy.')}</p>
+          <p>{t<string>('Adding an optional tip to the transaction could allow for higher priority, especially when the chain is busy.')}</p>
         </Modal.Column>
       </Modal.Columns>
     );
@@ -397,8 +397,8 @@ class Signer extends React.PureComponent<Props, State> {
         isDisabled={isQrVisible || isQrScanning}
         label={
           isSubmit
-            ? t('Sign and Submit')
-            : t('Sign (no submission)')
+            ? t<string>('Sign and Submit')
+            : t<string>('Sign (no submission)')
         }
         onChange={this.onToggleSign}
         value={isSubmit}
@@ -421,27 +421,27 @@ class Signer extends React.PureComponent<Props, State> {
             <InputNumber
               isDisabled={!!signedTx}
               isZeroable
-              label={t('Nonce')}
-              labelExtra={t('Current account nonce: {{accountNonce}}', { replace: { accountNonce } })}
+              label={t<string>('Nonce')}
+              labelExtra={t<string>('Current account nonce: {{accountNonce}}', { replace: { accountNonce } })}
               onChange={this.onChangeNonce}
               value={accountNonce}
             />
             <InputNumber
               isDisabled={!!signedTx}
               isZeroable
-              label={t('Lifetime (# of blocks)')}
-              labelExtra={t('Set to 0 to make transaction immortal')}
+              label={t<string>('Lifetime (# of blocks)')}
+              labelExtra={t<string>('Set to 0 to make transaction immortal')}
               onChange={this.onChangeBlocks}
               value={blocks}
             />
           </Modal.Column>
           <Modal.Column>
-            <p>{t('Override any applicable values for the specific signed output. These will be used to construct and display the signed transaction.')}</p>
+            <p>{t<string>('Override any applicable values for the specific signed output. These will be used to construct and display the signed transaction.')}</p>
           </Modal.Column>
         </Modal.Columns>
         {!!signedTx && (
           <Output
-            label={t('Signed transaction')}
+            label={t<string>('Signed transaction')}
             value={signedTx}
             withCopy
           />
@@ -523,7 +523,7 @@ class Signer extends React.PureComponent<Props, State> {
     } catch (error) {
       console.error(error);
 
-      return error.message;
+      return (error as Error).message;
     }
 
     return null;
@@ -654,6 +654,7 @@ class Signer extends React.PureComponent<Props, State> {
 
     queueSetTxStatus(id, 'sending');
 
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const { error, result, status } = await this.submitRpc(rpc, values);
 
     queueSetTxStatus(id, status, result, error);
@@ -702,7 +703,7 @@ class Signer extends React.PureComponent<Props, State> {
     let tx = submittable;
 
     if (basePair.meta.isMultisig) {
-      const others = basePair.meta.who.filter((who: string) => who !== signatory);
+      const others = (basePair.meta.who as string[]).filter((who: string) => who !== signatory);
       const info = await api.query.utility.multisigs(accountId as string, submittable.method.hash);
       let timepoint: Timepoint | null = null;
 
@@ -712,8 +713,8 @@ class Signer extends React.PureComponent<Props, State> {
 
       pair = keyring.getPair(signatory as string);
       tx = multiCall
-        ? api.tx.utility.asMulti(basePair.meta.threshold, others, timepoint, submittable.method)
-        : api.tx.utility.approveAsMulti(basePair.meta.threshold, others, timepoint, submittable.method.hash);
+        ? api.tx.utility.asMulti(basePair.meta.threshold as number, others, timepoint, submittable.method)
+        : api.tx.utility.approveAsMulti(basePair.meta.threshold as number, others, timepoint, submittable.method.hash);
     }
 
     console.log('sendExtrinsic::', JSON.stringify(tx.method.toHuman()));
@@ -728,11 +729,11 @@ class Signer extends React.PureComponent<Props, State> {
 
     try {
       assert(
-        isFunction((api.rpc as any)[section] && (api.rpc as any)[section][method]),
+        isFunction((api.rpc as Record<string, unknown>)[section] && (api.rpc as Record<string, Record<string, unknown>>)[section][method]),
         `api.rpc.${section}.${method} does not exist`
       );
 
-      const result = await (api.rpc as any)[section][method](...values);
+      const result = await (api.rpc as Record<string, Record<string, (...params: unknown[]) => Promise<unknown>>>)[section][method](...values);
 
       console.log('submitRpc: result ::', format(result));
 
@@ -744,13 +745,13 @@ class Signer extends React.PureComponent<Props, State> {
       console.error(error);
 
       return {
-        error,
+        error: error as Error,
         status: 'error'
       };
     }
   }
 
-  private async makeExtrinsicCall (extrinsic: SubmittableExtrinsic, { id, txFailedCb, txStartCb, txSuccessCb, txUpdateCb }: QueueTx, extrinsicCall: (...params: any[]) => any, pair?: KeyringPair): Promise<void> {
+  private async makeExtrinsicCall (extrinsic: SubmittableExtrinsic, { id, txFailedCb, txStartCb, txSuccessCb, txUpdateCb }: QueueTx, extrinsicCall: (...params: any[]) => Promise<() => void>, pair?: KeyringPair): Promise<void> {
     const { api, queueSetTxStatus } = this.props;
     const { showTip, tip } = this.state;
 
@@ -772,7 +773,7 @@ class Signer extends React.PureComponent<Props, State> {
         api.setSigner({ signPayload: this.signQrPayload });
         params.push(address);
       } else if (isInjected) {
-        const injected = await web3FromSource(source);
+        const injected = await web3FromSource(source as string);
 
         assert(injected, `Unable to find a signer for ${address}`);
 
@@ -858,7 +859,7 @@ class Signer extends React.PureComponent<Props, State> {
       queueSetTxStatus(id, 'qr');
       signer = { signPayload: this.signQrPayload };
     } else if (isInjected) {
-      const injected = await web3FromSource(source);
+      const injected = await web3FromSource(source as string);
 
       signer = injected?.signer;
     }
@@ -866,9 +867,9 @@ class Signer extends React.PureComponent<Props, State> {
     assert(signer || pair, `Unable to find a signer for ${address}`);
 
     try {
-      await extrinsic.signAsync((signer ? address : pair) as any, {
-        era: +blocks as any,
-        nonce: +(nonce || 0),
+      await extrinsic.signAsync((signer ? address : pair), {
+        era: blocks.toNumber(),
+        nonce: nonce || 0,
         signer,
         tip: (showTip && tip) ? tip : undefined
       });
diff --git a/packages/react-signer/src/Qr.tsx b/packages/react-signer/src/Qr.tsx
index ffddb3f82d..c4329f4edf 100644
--- a/packages/react-signer/src/Qr.tsx
+++ b/packages/react-signer/src/Qr.tsx
@@ -18,7 +18,7 @@ interface Props extends BareProps {
 
 const CMD_MORTAL = 2;
 
-function Qr ({ address, className, isScanning, onSignature, payload }: Props): React.ReactElement<Props> {
+function Qr ({ address, className = '', isScanning, onSignature, payload }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
       {
diff --git a/packages/react-signer/src/Transaction.tsx b/packages/react-signer/src/Transaction.tsx
index 03acfef8ed..824a7b1eb5 100644
--- a/packages/react-signer/src/Transaction.tsx
+++ b/packages/react-signer/src/Transaction.tsx
@@ -23,7 +23,7 @@ interface Props {
   value: QueueTx;
 }
 
-function Transaction ({ children, className, hideDetails, isSendable, onError, tip, value: { accountId, extrinsic, isUnsigned } }: Props): React.ReactElement<Props> | null {
+function Transaction ({ children, className = '', hideDetails, isSendable, onError, tip, value: { accountId, extrinsic, isUnsigned } }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
 
   if (!extrinsic) {
@@ -44,12 +44,12 @@ function Transaction ({ children, className, hideDetails, isSendable, onError, t
                   defaultValue={accountId}
                   isDisabled
                   isInput
-                  label={t('sending from my account')}
+                  label={t<string>('sending from my account')}
                   withLabel
                 />
               </Modal.Column>
               <Modal.Column>
-                <p>{t('The sending account that will be used to send this transaction. Any applicable fees will be paid by this account.')}</p>
+                <p>{t<string>('The sending account that will be used to send this transaction. Any applicable fees will be paid by this account.')}</p>
               </Modal.Column>
             </Modal.Columns>
           )}
@@ -59,7 +59,7 @@ function Transaction ({ children, className, hideDetails, isSendable, onError, t
                 className='tx-details'
                 summary={
                   <>
-                    {t('Sending transaction')} <span className='highlight'>{section}.{method}({
+                    {t<string>('Sending transaction')} <span className='highlight'>{section}.{method}({
                       meta?.args.map(({ name }) => name).join(', ') || ''
                     })</span>
                   </>
@@ -83,7 +83,7 @@ function Transaction ({ children, className, hideDetails, isSendable, onError, t
               )}
             </Modal.Column>
             <Modal.Column>
-              <p>{t('The details of the transaction including the type, the description (as available from the chain metadata) as well as any parameters and fee estimations (as available) for the specific type of call.')}</p>
+              <p>{t<string>('The details of the transaction including the type, the description (as available from the chain metadata) as well as any parameters and fee estimations (as available) for the specific type of call.')}</p>
             </Modal.Column>
           </Modal.Columns>
         </>
diff --git a/packages/react-signer/src/Unlock.tsx b/packages/react-signer/src/Unlock.tsx
index 1fd948f6a5..d9e46bcb14 100644
--- a/packages/react-signer/src/Unlock.tsx
+++ b/packages/react-signer/src/Unlock.tsx
@@ -29,7 +29,7 @@ function getPair (address?: string | null): KeyringPair | null {
   }
 }
 
-function Unlock ({ className, error, onChange, onEnter, password, tabIndex, value }: Props): React.ReactElement<Props> | null {
+function Unlock ({ className = '', error, onChange, onEnter, password, tabIndex, value }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const [pair, setPair] = useState<KeyringPair | null>(null);
 
@@ -48,8 +48,8 @@ function Unlock ({ className, error, onChange, onEnter, password, tabIndex, valu
           <Password
             autoFocus
             isError={!!error}
-            label={t('unlock account with password')}
-            labelExtra={error && <div className='errorLabel'>{t('wrong password supplied')}</div>}
+            label={t<string>('unlock account with password')}
+            labelExtra={error && <div className='errorLabel'>{t<string>('wrong password supplied')}</div>}
             onChange={onChange}
             onEnter={onEnter}
             tabIndex={tabIndex}
@@ -57,7 +57,7 @@ function Unlock ({ className, error, onChange, onEnter, password, tabIndex, valu
           />
         </Modal.Column>
         <Modal.Column>
-          <p>{t('Unlock the sending account to allow signing of this transaction.')}</p>
+          <p>{t<string>('Unlock the sending account to allow signing of this transaction.')}</p>
         </Modal.Column>
       </Modal.Columns>
     </div>
diff --git a/packages/react-signer/src/index.tsx b/packages/react-signer/src/index.tsx
index ca44e64b83..d3df83a85b 100644
--- a/packages/react-signer/src/index.tsx
+++ b/packages/react-signer/src/index.tsx
@@ -14,7 +14,7 @@ interface Props extends BareProps {
   children: React.ReactNode;
 }
 
-function Signer ({ children, className, style }: Props): React.ReactElement<Props> {
+function Signer ({ children, className = '' }: Props): React.ReactElement<Props> {
   const { queueSetTxStatus, txqueue } = useContext(StatusContext);
 
   return (
@@ -25,7 +25,6 @@ function Signer ({ children, className, style }: Props): React.ReactElement<Prop
         key='signer-modal'
         queue={txqueue}
         queueSetTxStatus={queueSetTxStatus}
-        style={style}
       />
     </>
   );
diff --git a/scripts/ipfsUpload.js b/scripts/ipfsUpload.js
index 0b41c5f989..e7339afb5f 100644
--- a/scripts/ipfsUpload.js
+++ b/scripts/ipfsUpload.js
@@ -67,8 +67,7 @@ async function unpin (exclude) {
   const result = await pinata.pinList({ status: 'pinned' });
 
   if (result.count > 1) {
-    // eslint-disable-next-line @typescript-eslint/camelcase
-    const filtered = result.rows.map(({ ipfs_pin_hash }) => ipfs_pin_hash).filter((hash) => hash !== exclude);
+    const filtered = result.rows.map(({ ipfs_pin_hash: hash }) => hash).filter((hash) => hash !== exclude);
 
     if (filtered.length) {
       await Promise.all(
diff --git a/yarn.lock b/yarn.lock
index c25da25b38..1104a1c2e9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2840,8 +2840,8 @@ __metadata:
   linkType: hard
 
 "@octokit/request@npm:^5.2.0":
-  version: 5.4.2
-  resolution: "@octokit/request@npm:5.4.2"
+  version: 5.4.3
+  resolution: "@octokit/request@npm:5.4.3"
   dependencies:
     "@octokit/endpoint": ^6.0.1
     "@octokit/request-error": ^2.0.0
@@ -2851,7 +2851,7 @@ __metadata:
     node-fetch: ^2.3.0
     once: ^1.4.0
     universal-user-agent: ^5.0.0
-  checksum: 3/4e215376a466d20b6abdf3d48106acb88b18b17a667a53d69760cd6094e3f7ebdc8d7f952c1174c68916ca175c802c8ffef0d16f8dfc51356047a547346fe6db
+  checksum: 3/58b965548d67cf0fff6ea5b5b047d3979abf9c6e729574b28699776a4a2799b1a7ae55f21b180ed2edec635133e2d38a8931691f6044cae14353f9cb179562cd
   languageName: node
   linkType: hard
 
@@ -2910,57 +2910,57 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/api-contract@npm:^1.15.1":
-  version: 1.15.1
-  resolution: "@polkadot/api-contract@npm:1.15.1"
+"@polkadot/api-contract@npm:^1.16.0-beta.2":
+  version: 1.16.0-beta.2
+  resolution: "@polkadot/api-contract@npm:1.16.0-beta.2"
   dependencies:
     "@babel/runtime": ^7.9.6
-    "@polkadot/api": 1.15.1
-    "@polkadot/rpc-core": 1.15.1
-    "@polkadot/types": 1.15.1
+    "@polkadot/api": 1.16.0-beta.2
+    "@polkadot/rpc-core": 1.16.0-beta.2
+    "@polkadot/types": 1.16.0-beta.2
     "@polkadot/util": ^2.10.1
     bn.js: ^5.1.2
     rxjs: ^6.5.5
-  checksum: 3/fe531c8a2993837c67a7021f2cbe1cfc583da23d7bc997bb5d95a83bf458358ea3ba598d36e772d7cf2829ea5f89ea47c4960660ce465fdd3df5cf1482545fb0
+  checksum: 3/f17cc2c8aac3d54da5decab48e57f72d0463c66dd6c0d181589095f43f158f0ad8dc1f5803d94c4051d3f56886435cba0facc5e41fb29f0d386b7238126e12a4
   languageName: node
   linkType: hard
 
-"@polkadot/api-derive@npm:1.15.1":
-  version: 1.15.1
-  resolution: "@polkadot/api-derive@npm:1.15.1"
+"@polkadot/api-derive@npm:1.16.0-beta.2":
+  version: 1.16.0-beta.2
+  resolution: "@polkadot/api-derive@npm:1.16.0-beta.2"
   dependencies:
     "@babel/runtime": ^7.9.6
-    "@polkadot/api": 1.15.1
-    "@polkadot/rpc-core": 1.15.1
-    "@polkadot/rpc-provider": 1.15.1
-    "@polkadot/types": 1.15.1
+    "@polkadot/api": 1.16.0-beta.2
+    "@polkadot/rpc-core": 1.16.0-beta.2
+    "@polkadot/rpc-provider": 1.16.0-beta.2
+    "@polkadot/types": 1.16.0-beta.2
     "@polkadot/util": ^2.10.1
     "@polkadot/util-crypto": ^2.10.1
     bn.js: ^5.1.2
     memoizee: ^0.4.14
     rxjs: ^6.5.5
-  checksum: 3/0287eced68d422ef28ce19b587127117c0a679bc812b80138447f6b2250c026d9531763d99f9bd26c5672b155553ac19af6a6a8316d92ac51aac27b9257e379e
+  checksum: 3/24b9d2d07d2498a84adebc8361d10cc1ceb309e1abe3e424a3bae29a93819c59bc88d4a5c9c3bd0161f3befc66c96e4682dc7bc1cb8ca302ca2d40ee16fac422
   languageName: node
   linkType: hard
 
-"@polkadot/api@npm:^1.15.1":
-  version: 1.15.1
-  resolution: "@polkadot/api@npm:1.15.1"
+"@polkadot/api@npm:^1.16.0-beta.2":
+  version: 1.16.0-beta.2
+  resolution: "@polkadot/api@npm:1.16.0-beta.2"
   dependencies:
     "@babel/runtime": ^7.9.6
-    "@polkadot/api-derive": 1.15.1
+    "@polkadot/api-derive": 1.16.0-beta.2
     "@polkadot/keyring": ^2.10.1
-    "@polkadot/metadata": 1.15.1
-    "@polkadot/rpc-core": 1.15.1
-    "@polkadot/rpc-provider": 1.15.1
-    "@polkadot/types": 1.15.1
-    "@polkadot/types-known": 1.15.1
+    "@polkadot/metadata": 1.16.0-beta.2
+    "@polkadot/rpc-core": 1.16.0-beta.2
+    "@polkadot/rpc-provider": 1.16.0-beta.2
+    "@polkadot/types": 1.16.0-beta.2
+    "@polkadot/types-known": 1.16.0-beta.2
     "@polkadot/util": ^2.10.1
     "@polkadot/util-crypto": ^2.10.1
     bn.js: ^5.1.2
     eventemitter3: ^4.0.4
     rxjs: ^6.5.5
-  checksum: 3/b424cabacb89dd68cda1565fd62be4ce45b3522a28ddb5ceec5b2891b4632ee453c1c7cc7211b92f2834e8245bd398eebf5b1d1244b118262a2a23c67660e6c1
+  checksum: 3/3e2b50b14fc82776cfd4359d5489b1561c15e67b56b31d381b94f50d057b3c0e33e0c3402ed6b2f97f5df2a308701a1253af9c4c1dd6432b4693b46fc2d09ea2
   languageName: node
   linkType: hard
 
@@ -2979,8 +2979,8 @@ __metadata:
   dependencies:
     "@babel/runtime": ^7.9.6
     "@polkadot/react-components": 0.43.0-beta.2
-    "@polkadot/react-qr": ^0.54.0-beta.1
-    "@polkadot/vanitygen": ^0.12.1
+    "@polkadot/react-qr": ^0.54.0-beta.2
+    "@polkadot/vanitygen": ^0.13.0-beta.0
     detect-browser: ^5.1.0
     file-saver: ^2.0.2
   languageName: unknown
@@ -3001,7 +3001,7 @@ __metadata:
   resolution: "@polkadot/app-contracts@workspace:packages/page-contracts"
   dependencies:
     "@babel/runtime": ^7.9.6
-    "@polkadot/api-contract": ^1.15.1
+    "@polkadot/api-contract": ^1.16.0-beta.2
   languageName: unknown
   linkType: soft
 
@@ -3186,7 +3186,7 @@ __metadata:
   resolution: "@polkadot/apps-electron@workspace:packages/apps-electron"
   dependencies:
     "@babel/polyfill": ^7.8.7
-    "@polkadot/dev": ^0.53.5
+    "@polkadot/dev": ^0.54.1
     "@polkadot/react-components": 0.43.0-beta.2
     "@types/react": ^16.9.35
     "@types/react-dom": ^16.9.8
@@ -3214,7 +3214,7 @@ __metadata:
   dependencies:
     "@babel/polyfill": ^7.8.7
     "@babel/runtime": ^7.9.6
-    "@polkadot/dev": ^0.53.5
+    "@polkadot/dev": ^0.54.1
     "@polkadot/react-components": 0.43.0-beta.2
     "@polkadot/react-signer": 0.43.0-beta.2
     babel-loader: ^8.1.0
@@ -3233,9 +3233,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@polkadot/dev@npm:^0.53.5":
-  version: 0.53.5
-  resolution: "@polkadot/dev@npm:0.53.5"
+"@polkadot/dev@npm:^0.54.1":
+  version: 0.54.1
+  resolution: "@polkadot/dev@npm:0.54.1"
   dependencies:
     "@babel/cli": ^7.8.4
     "@babel/core": ^7.9.6
@@ -3257,8 +3257,8 @@ __metadata:
     "@babel/preset-typescript": ^7.9.0
     "@babel/register": ^7.9.0
     "@babel/runtime": ^7.9.6
-    "@typescript-eslint/eslint-plugin": 2.33.0
-    "@typescript-eslint/parser": 2.33.0
+    "@typescript-eslint/eslint-plugin": 3.0.0
+    "@typescript-eslint/parser": 3.0.0
     "@vue/component-compiler-utils": ^3.1.2
     babel-core: ^7.0.0-bridge.0
     babel-jest: ^26.0.1
@@ -3267,7 +3267,7 @@ __metadata:
     browserslist: ^4.12.0
     coveralls: ^3.1.0
     cpx: ^1.5.0
-    eslint: ^7.0.0
+    eslint: ^7.1.0
     eslint-config-standard: ^14.1.1
     eslint-import-resolver-node: ^0.3.3
     eslint-plugin-header: ^3.0.0
@@ -3289,10 +3289,10 @@ __metadata:
     madge: ^3.9.0
     mkdirp: ^1.0.4
     rimraf: ^3.0.2
-    typedoc: ^0.17.6
+    typedoc: ^0.17.7
     typedoc-plugin-markdown: ^2.2.17
     typedoc-plugin-no-inherit: ^1.1.10
-    typescript: ^3.9.2
+    typescript: ^3.9.3
     vuepress: ^1.5.0
     webpack: ^4.43.0
     webpack-cli: ^3.3.11
@@ -3316,55 +3316,55 @@ __metadata:
     polkadot-exec-typedoc: scripts/polkadot-exec-typedoc.js
     polkadot-exec-vuepress: scripts/polkadot-exec-vuepress.js
     polkadot-exec-webpack: scripts/polkadot-exec-webpack.js
-  checksum: 3/f22c87387f6e82b85689d4a0738e165820dd844cc903bd1fd80d9e0c14258483003322ba007d11f41120618f1f0dc83f533d9855906130aa10ef1caee59e6b1b
+  checksum: 3/395fd6527f4be34a6790c00b499bab470b3349156d312e3ff23f932bb408b54f363d4aacf35b61ad3cc3f1a93f9f60096a791e9ee757943faf7952703b7fd849
   languageName: node
   linkType: hard
 
-"@polkadot/extension-dapp@npm:^0.26.0-beta.2":
-  version: 0.26.0-beta.2
-  resolution: "@polkadot/extension-dapp@npm:0.26.0-beta.2"
+"@polkadot/extension-dapp@npm:^0.26.0-beta.3":
+  version: 0.26.0-beta.3
+  resolution: "@polkadot/extension-dapp@npm:0.26.0-beta.3"
   dependencies:
     "@babel/runtime": ^7.9.6
-    "@polkadot/extension-inject": 0.26.0-beta.2
+    "@polkadot/extension-inject": 0.26.0-beta.3
   peerDependencies:
     "@polkadot/api": "*"
-  checksum: 3/8d31313c71da178b10b62cd706ea1e05e2f809b8a26ed6cf6a1a33a27faba168694bdc162f8f79f05e45355ba708294cf99aba498d13e79a203103a9fdd84406
+  checksum: 3/e322047a2153eb60882b611927d1e295d40fd8527d0cd90ab61b3c0340ed570451694b1c94a898a3faf502714a85572f9792f0fb307e5d3617c5dadc7c4e063f
   languageName: node
   linkType: hard
 
-"@polkadot/extension-inject@npm:0.26.0-beta.2":
-  version: 0.26.0-beta.2
-  resolution: "@polkadot/extension-inject@npm:0.26.0-beta.2"
+"@polkadot/extension-inject@npm:0.26.0-beta.3":
+  version: 0.26.0-beta.3
+  resolution: "@polkadot/extension-inject@npm:0.26.0-beta.3"
   dependencies:
     "@babel/runtime": ^7.9.6
   peerDependencies:
     "@polkadot/api": "*"
-  checksum: 3/2ff8e39fca28a07dec1968fd1923ea2c4ead7447eb66b508f42bfca19ee62899bed470535b63cbf5be585ccef15d04752fb67df44f323870099dc5d0f0c3fb06
+  checksum: 3/e73db0b9c9ab7d8913cc62b3f7b0fc5b5c0fcec006a874d65b8f9ce30c7f80408096271775e4bcf09bba9bc932065e7a680551ab802e14584369b5d1f9704424
   languageName: node
   linkType: hard
 
-"@polkadot/keyring@npm:^2.10.1":
-  version: 2.10.1
-  resolution: "@polkadot/keyring@npm:2.10.1"
+"@polkadot/keyring@npm:^2.11.0-beta.2":
+  version: 2.11.0-beta.2
+  resolution: "@polkadot/keyring@npm:2.11.0-beta.2"
   dependencies:
     "@babel/runtime": ^7.9.6
-    "@polkadot/util": 2.10.1
-    "@polkadot/util-crypto": 2.10.1
-  checksum: 3/62807d8eae0ccdecf9a640839f1da8a5f44a96e91e8aaaf079c2329e396cccfc026931ccaffc4e88789a5d709bb14114e6e471db531b1093963a675af4cf276b
+    "@polkadot/util": 2.11.0-beta.2
+    "@polkadot/util-crypto": 2.11.0-beta.2
+  checksum: 3/f5bf0117757b32138a1c7f26f7f22ef5c9ddf934f184ecf36385121c44a6295b492d6da5260f5e33a086075019c6d724fc3e24710d920931f88149fb8a94a094
   languageName: node
   linkType: hard
 
-"@polkadot/metadata@npm:1.15.1":
-  version: 1.15.1
-  resolution: "@polkadot/metadata@npm:1.15.1"
+"@polkadot/metadata@npm:1.16.0-beta.2":
+  version: 1.16.0-beta.2
+  resolution: "@polkadot/metadata@npm:1.16.0-beta.2"
   dependencies:
     "@babel/runtime": ^7.9.6
-    "@polkadot/types": 1.15.1
-    "@polkadot/types-known": 1.15.1
+    "@polkadot/types": 1.16.0-beta.2
+    "@polkadot/types-known": 1.16.0-beta.2
     "@polkadot/util": ^2.10.1
     "@polkadot/util-crypto": ^2.10.1
     bn.js: ^5.1.2
-  checksum: 3/b899a605b3b8f8e42691e03d8ea31b1baab61b5e37064711101a0c96af7f03ea0bda0395c4c3fdbc71fb1611d000a6738616ff7f1444eb1b4b367f1b3f0d9564
+  checksum: 3/e7659ad2e63801bf169e306226c28d517c06946a4e72df76faae4f9fbe1660da8c52cc7176561caa1d3c66c470356f4e65853465ac028bf95f662df55ff238e2
   languageName: node
   linkType: hard
 
@@ -3373,8 +3373,8 @@ __metadata:
   resolution: "@polkadot/react-api@workspace:packages/react-api"
   dependencies:
     "@babel/runtime": ^7.9.6
-    "@polkadot/api": ^1.15.1
-    "@polkadot/extension-dapp": ^0.26.0-beta.2
+    "@polkadot/api": ^1.16.0-beta.2
+    "@polkadot/extension-dapp": ^0.26.0-beta.3
     rxjs-compat: ^6.5.5
   languageName: unknown
   linkType: soft
@@ -3384,12 +3384,13 @@ __metadata:
   resolution: "@polkadot/react-components@workspace:packages/react-components"
   dependencies:
     "@babel/runtime": ^7.9.6
-    "@polkadot/keyring": ^2.10.1
+    "@polkadot/keyring": ^2.11.0-beta.2
     "@polkadot/react-api": 0.43.0-beta.2
-    "@polkadot/react-identicon": ^0.54.0-beta.1
+    "@polkadot/react-identicon": ^0.54.0-beta.2
     "@polkadot/react-query": 0.43.0-beta.2
-    "@polkadot/ui-keyring": ^0.54.0-beta.1
-    "@polkadot/ui-settings": ^0.54.0-beta.1
+    "@polkadot/ui-keyring": ^0.54.0-beta.2
+    "@polkadot/ui-settings": ^0.54.0-beta.2
+    "@types/codeflask": ^1.4.1
     chart.js: ^2.9.3
     codeflask: ^1.4.1
     i18next: ^19.4.4
@@ -3400,7 +3401,7 @@ __metadata:
     react-copy-to-clipboard: ^5.0.2
     react-dom: ^16.13.1
     react-dropzone: ^11.0.1
-    react-i18next: ^11.4.0
+    react-i18next: ^11.5.0
     react-is: ^16.13.1
     react-markdown: ^4.3.1
     react-router: ^5.2.0
@@ -3423,13 +3424,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@polkadot/react-identicon@npm:^0.54.0-beta.1":
-  version: 0.54.0-beta.1
-  resolution: "@polkadot/react-identicon@npm:0.54.0-beta.1"
+"@polkadot/react-identicon@npm:^0.54.0-beta.2":
+  version: 0.54.0-beta.2
+  resolution: "@polkadot/react-identicon@npm:0.54.0-beta.2"
   dependencies:
     "@babel/runtime": ^7.9.6
-    "@polkadot/ui-settings": 0.54.0-beta.1
-    "@polkadot/ui-shared": 0.54.0-beta.1
+    "@polkadot/ui-settings": 0.54.0-beta.2
+    "@polkadot/ui-shared": 0.54.0-beta.2
     color: ^3.1.2
     jdenticon: 2.2.0
     react-copy-to-clipboard: ^5.0.2
@@ -3441,7 +3442,7 @@ __metadata:
     react: "*"
     react-dom: "*"
     react-is: "*"
-  checksum: 3/0b7420e09ee0137bdcbaa3ae984e7be64afca2a256e30374b58fe5f6da66cf6b5cab8327d06d635ba7238d3142afedc4de5b5fd41d5ea03c7fd086f083425e93
+  checksum: 3/9185d5d3995bb35f093fca7aeb62c03d0f46ca23f66804c29adac19fa872ae558b7d6b48e6be0e1d70923ba3762b5f2af2fdea29a99c1ee4acd370e3bb4eed02
   languageName: node
   linkType: hard
 
@@ -3454,9 +3455,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@polkadot/react-qr@npm:^0.54.0-beta.1":
-  version: 0.54.0-beta.1
-  resolution: "@polkadot/react-qr@npm:0.54.0-beta.1"
+"@polkadot/react-qr@npm:^0.54.0-beta.2":
+  version: 0.54.0-beta.2
+  resolution: "@polkadot/react-qr@npm:0.54.0-beta.2"
   dependencies:
     "@babel/runtime": ^7.9.6
     qrcode-generator: ^1.4.4
@@ -3467,7 +3468,7 @@ __metadata:
     react: "*"
     react-dom: "*"
     styled-components: "*"
-  checksum: 3/189a859f9d577b8ba2c7d13378120e6e9f56ac3a97ce353cb4f42ab2b80dc88b96e7507e730cd3e3a2b99e3dd54f536b010cb75a07d94563921e4a9b61353566
+  checksum: 3/15592540000ef7a8f959814bff4d46828062611ab89e733a1ccd7c1e7fc14063820e169e8bcb97d0d536a196c89af64f92d31166d114fcf5a12d6cc3cfbaca8f
   languageName: node
   linkType: hard
 
@@ -3485,82 +3486,82 @@ __metadata:
   dependencies:
     "@babel/runtime": ^7.9.6
     "@polkadot/react-components": 0.43.0-beta.2
-    "@polkadot/react-qr": ^0.54.0-beta.1
+    "@polkadot/react-qr": ^0.54.0-beta.2
   languageName: unknown
   linkType: soft
 
-"@polkadot/rpc-core@npm:1.15.1":
-  version: 1.15.1
-  resolution: "@polkadot/rpc-core@npm:1.15.1"
+"@polkadot/rpc-core@npm:1.16.0-beta.2":
+  version: 1.16.0-beta.2
+  resolution: "@polkadot/rpc-core@npm:1.16.0-beta.2"
   dependencies:
     "@babel/runtime": ^7.9.6
-    "@polkadot/metadata": 1.15.1
-    "@polkadot/rpc-provider": 1.15.1
-    "@polkadot/types": 1.15.1
+    "@polkadot/metadata": 1.16.0-beta.2
+    "@polkadot/rpc-provider": 1.16.0-beta.2
+    "@polkadot/types": 1.16.0-beta.2
     "@polkadot/util": ^2.10.1
     memoizee: ^0.4.14
     rxjs: ^6.5.5
-  checksum: 3/b0e10dd6430aafa6cc32f05f8dbc2a92365ceed4c469aff4b15cc0bb5227c2a3f04e755a38097a79192152479ee6ec61bafe3fd1bf4f623142d4836f373c4f3f
+  checksum: 3/f8847f3aea1ddbcde1dbc7e9d3927008782ed240c5ac87dd06390748c177709ca18fb17014601500807f24175d5ec5bad3b79a9d4fc8d2fa8a55358d412e6f4e
   languageName: node
   linkType: hard
 
-"@polkadot/rpc-provider@npm:1.15.1":
-  version: 1.15.1
-  resolution: "@polkadot/rpc-provider@npm:1.15.1"
+"@polkadot/rpc-provider@npm:1.16.0-beta.2":
+  version: 1.16.0-beta.2
+  resolution: "@polkadot/rpc-provider@npm:1.16.0-beta.2"
   dependencies:
     "@babel/runtime": ^7.9.6
-    "@polkadot/metadata": 1.15.1
-    "@polkadot/types": 1.15.1
+    "@polkadot/metadata": 1.16.0-beta.2
+    "@polkadot/types": 1.16.0-beta.2
     "@polkadot/util": ^2.10.1
     "@polkadot/util-crypto": ^2.10.1
     bn.js: ^5.1.2
     eventemitter3: ^4.0.4
     isomorphic-fetch: ^2.2.1
     websocket: ^1.0.31
-  checksum: 3/378a8084232d427eed1ba7cbd8366d9e26a1dd197645b35f6dd9cb412a8deb327cd481593ff58cc97e1071fca8540fbe55cbc9e7051c3889c44c1dff718b5166
+  checksum: 3/57c90f30f7714a1a9979d13277e7bc2ca7b48ad54519d2b7ff55890bfbcf215c2927a7d9a9cd77d0612196ebbbaf0e1916e0659296a8a41540e8c0cf31d3ed4d
   languageName: node
   linkType: hard
 
-"@polkadot/ts@npm:^0.3.22":
-  version: 0.3.22
-  resolution: "@polkadot/ts@npm:0.3.22"
+"@polkadot/ts@npm:^0.3.23":
+  version: 0.3.23
+  resolution: "@polkadot/ts@npm:0.3.23"
   dependencies:
-    "@types/chrome": ^0.0.112
-  checksum: 3/d8a0531723e5822e28ca06c08b41f7803be4833b2a4640dfb431ae66967cb7e20af057d92983e8bcc17db060e23e95f7a726d759a962a6f98c0ebfaf87bc3afb
+    "@types/chrome": ^0.0.114
+  checksum: 3/ad4b5faf5346e090407549800f5c1aac4be32d89b83af8fbb47ea3643cb34127619602acc8a0b934bb809cff320a603f0ca3136ca7e8aa29a48d42ee140e7e1a
   languageName: node
   linkType: hard
 
-"@polkadot/types-known@npm:1.15.1":
-  version: 1.15.1
-  resolution: "@polkadot/types-known@npm:1.15.1"
+"@polkadot/types-known@npm:1.16.0-beta.2":
+  version: 1.16.0-beta.2
+  resolution: "@polkadot/types-known@npm:1.16.0-beta.2"
   dependencies:
     "@babel/runtime": ^7.9.6
-    "@polkadot/types": 1.15.1
+    "@polkadot/types": 1.16.0-beta.2
     "@polkadot/util": ^2.10.1
     bn.js: ^5.1.2
-  checksum: 3/bf5d4b8b5b4e0e4d708e602c912384dcacbef328dc1c751a53573735a11c866479c4c00b3298ac648de21e88a7a612bb156c138d0d1134c29e10892e0c0eb3e1
+  checksum: 3/aea478adb8b42e492809d836d99f9f4c1ec317921068f828e3cfcffc5468287eac38bb41f519d63883ed59d66cd51b830d466d9253726d3a79466c66dcaa8ac5
   languageName: node
   linkType: hard
 
-"@polkadot/types@npm:^1.15.1":
-  version: 1.15.1
-  resolution: "@polkadot/types@npm:1.15.1"
+"@polkadot/types@npm:^1.16.0-beta.2":
+  version: 1.16.0-beta.2
+  resolution: "@polkadot/types@npm:1.16.0-beta.2"
   dependencies:
     "@babel/runtime": ^7.9.6
-    "@polkadot/metadata": 1.15.1
+    "@polkadot/metadata": 1.16.0-beta.2
     "@polkadot/util": ^2.10.1
     "@polkadot/util-crypto": ^2.10.1
     "@types/bn.js": ^4.11.6
     bn.js: ^5.1.2
     memoizee: ^0.4.14
     rxjs: ^6.5.5
-  checksum: 3/42a64391fac4d437befbaa94ffb3e2df6060d06dcc65635a1f2ceb03cd60111763e8d1eaf9397e34929c571a2aaf4a82e01b758fbc2cbd799d48ef832948976f
+  checksum: 3/fdbc9f27e1c92593538adb2c4ddba51143ca1bae45139dff200e5729e4462f7b4da2ee6c4779cda03bb5abcdcd1059108a2aa047c9f0389e3816b1dd95eea6ac
   languageName: node
   linkType: hard
 
-"@polkadot/ui-keyring@npm:^0.54.0-beta.1":
-  version: 0.54.0-beta.1
-  resolution: "@polkadot/ui-keyring@npm:0.54.0-beta.1"
+"@polkadot/ui-keyring@npm:^0.54.0-beta.2":
+  version: 0.54.0-beta.2
+  resolution: "@polkadot/ui-keyring@npm:0.54.0-beta.2"
   dependencies:
     "@babel/runtime": ^7.9.6
     "@ledgerhq/hw-transport-node-hid": ^5.15.0
@@ -3576,74 +3577,74 @@ __metadata:
   dependenciesMeta:
     "@ledgerhq/hw-transport-node-hid":
       optional: true
-  checksum: 3/d21c4cc52d3294958df5689432286e96aade27276b665c17771d1c2bee2d9fc0472b7319c5c92a98d84724a1e388abcec430400bc22ec3d61f2ec20ad15fba4c
+  checksum: 3/ce1527b7ba031dacef5dae6b3f2bd0435c4dafd70d8209561b0146b191a62f467b5b030c2cf9b5a7262df93ce99714b297d97b9063160e833531f01af3f093a9
   languageName: node
   linkType: hard
 
-"@polkadot/ui-settings@npm:0.54.0-beta.1, @polkadot/ui-settings@npm:^0.54.0-beta.1":
-  version: 0.54.0-beta.1
-  resolution: "@polkadot/ui-settings@npm:0.54.0-beta.1"
+"@polkadot/ui-settings@npm:0.54.0-beta.2, @polkadot/ui-settings@npm:^0.54.0-beta.2":
+  version: 0.54.0-beta.2
+  resolution: "@polkadot/ui-settings@npm:0.54.0-beta.2"
   dependencies:
     "@babel/runtime": ^7.9.6
     eventemitter3: ^4.0.4
     store: ^2.0.12
   peerDependencies:
     "@polkadot/util": "*"
-  checksum: 3/d1c9c201648030170e53f948d1ba0d17ad7e8f4d56b577a10da2c67f5e6f6a0b336c879e2371af48799ff49f3c62d854b23e276dd4e9a9a280af212b1a0b3356
+  checksum: 3/8a82862985e0b1ab2f77dc21152ca026eb594babb9e6bc0add7d54897733b600e5fce337d7d6e89e31cc98980cfba0bc0eba99b1016526f9e273c37dd34750ca
   languageName: node
   linkType: hard
 
-"@polkadot/ui-shared@npm:0.54.0-beta.1":
-  version: 0.54.0-beta.1
-  resolution: "@polkadot/ui-shared@npm:0.54.0-beta.1"
+"@polkadot/ui-shared@npm:0.54.0-beta.2":
+  version: 0.54.0-beta.2
+  resolution: "@polkadot/ui-shared@npm:0.54.0-beta.2"
   dependencies:
     "@babel/runtime": ^7.9.6
     color: ^3.1.2
   peerDependencies:
     "@polkadot/util": "*"
     "@polkadot/util-crypto": "*"
-  checksum: 3/830e91f33d7d23d60834c842d9a0fdb7cabe44280ab1ec8cfea1de1226e1ea6e0aa59778b6785d12e56aa9ad92aa33a35a458066bb4458a991a99ee6bc31c212
+  checksum: 3/c39383fb3cad5ed53c04e45765a24b8d210e71a85db33cd43bc594b72e65e8d2c2866b205a17b85bc1f1e688cdda06316ff853972177e17abc3eff95e40e9584
   languageName: node
   linkType: hard
 
-"@polkadot/util-crypto@npm:^2.10.1":
-  version: 2.10.1
-  resolution: "@polkadot/util-crypto@npm:2.10.1"
+"@polkadot/util-crypto@npm:^2.11.0-beta.2":
+  version: 2.11.0-beta.2
+  resolution: "@polkadot/util-crypto@npm:2.11.0-beta.2"
   dependencies:
     "@babel/runtime": ^7.9.6
-    "@polkadot/util": 2.10.1
+    "@polkadot/util": 2.11.0-beta.2
     "@polkadot/wasm-crypto": ^1.2.1
     base-x: ^3.0.8
     bip39: ^3.0.2
     blakejs: ^1.1.0
-    bn.js: ^5.1.1
+    bn.js: ^5.1.2
     bs58: ^4.0.1
     elliptic: ^6.5.2
     js-sha3: ^0.8.0
     pbkdf2: ^3.0.17
     tweetnacl: ^1.0.3
     xxhashjs: ^0.2.2
-  checksum: 3/aab12e16fa9e614d54ce00b5cce4d469af19575ab2a2807c703442cf14f7f307b3a2bfddfbe22bcc265480fb11f62cf013f90669c81cbda86f94e35b2af40f4e
+  checksum: 3/72c814d7d1950ae2bbdd1fb68a7a77261315f94a7f3c76b017be9fd386c38dc4edb6812c753aa7162aecb7352785ede14d5af96c7e89f2f1fe52412776f1cf1a
   languageName: node
   linkType: hard
 
-"@polkadot/util@npm:^2.10.1":
-  version: 2.10.1
-  resolution: "@polkadot/util@npm:2.10.1"
+"@polkadot/util@npm:^2.11.0-beta.2":
+  version: 2.11.0-beta.2
+  resolution: "@polkadot/util@npm:2.11.0-beta.2"
   dependencies:
     "@babel/runtime": ^7.9.6
     "@types/bn.js": ^4.11.6
-    bn.js: ^5.1.1
+    bn.js: ^5.1.2
     camelcase: ^5.3.1
     chalk: ^4.0.0
     ip-regex: ^4.1.0
-  checksum: 3/8c496025e38a5b959dc2601feb2802016163a46adff8bb3df1e94b152635a3b83181d9d570f3f37c2af83243839d0b7265e16f7b783c3c3fbaa73088f0660fdd
+  checksum: 3/7d0d6222983984d39441dc68113439a178b90ab3670fe8e145180adf6f80f9952b175949154a6f725913d41888194641afe4e158a95a1bd7479e7d1757cb8b2d
   languageName: node
   linkType: hard
 
-"@polkadot/vanitygen@npm:^0.12.1":
-  version: 0.12.1
-  resolution: "@polkadot/vanitygen@npm:0.12.1"
+"@polkadot/vanitygen@npm:^0.13.0-beta.0":
+  version: 0.13.0-beta.0
+  resolution: "@polkadot/vanitygen@npm:0.13.0-beta.0"
   dependencies:
     "@babel/core": ^7.9.6
     "@babel/runtime": ^7.9.6
@@ -3653,7 +3654,7 @@ __metadata:
     yargs: ^15.3.1
   bin:
     polkadot-js-vanitygen: index.js
-  checksum: 3/acdf7e2e2abc9e4ec09b7eda4da1dd0f55c649f6bb6c17faa3a7cb122b4c479f1dc8dc8d1fde6adee5ec355b35f2cd971fdd86d3bd4b77b3c375e9e761837c22
+  checksum: 3/70c52d3e2e113b25e39dc94c7f70eb5c95d96399493a7291c9dc0990c714f83663fa66bc8b88dd47ca8168773e1cbcf8daf519e2b1d3a4bac617a2654a4e82ee
   languageName: node
   linkType: hard
 
@@ -3831,13 +3832,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/chrome@npm:^0.0.112":
-  version: 0.0.112
-  resolution: "@types/chrome@npm:0.0.112"
+"@types/chrome@npm:^0.0.114":
+  version: 0.0.114
+  resolution: "@types/chrome@npm:0.0.114"
   dependencies:
     "@types/filesystem": "*"
     "@types/har-format": "*"
-  checksum: 3/51d4dda4b2665bffa97fb5a4b20613685b02e1078c73a2824450f89408f814b46f7a54746dd99de03698d12519758b25d4231cee0ae9fe55d0cb6be46f1870ad
+  checksum: 3/c03b1579ada5fd3bff88da145790a439417bd2fa8e7cb63e889d3391a54e4076147c9df915bc789c313ff5809357e7f357e1d07f9740f2c636405add2d7a8411
+  languageName: node
+  linkType: hard
+
+"@types/codeflask@npm:^1.4.1":
+  version: 1.4.1
+  resolution: "@types/codeflask@npm:1.4.1"
+  dependencies:
+    "@types/prismjs": "*"
+  checksum: 3/3e21124d4b6ea360dd88db2807ddc83fc8fee6e21f4c68dba9322a56b8140295205339b825a3eea31b0dc90164e1d85d94abeab8ccd467e3ab58753510a2a1fe
   languageName: node
   linkType: hard
 
@@ -4044,9 +4054,9 @@ __metadata:
   linkType: hard
 
 "@types/node@npm:*, @types/node@npm:>= 8, @types/node@npm:^12.0.12":
-  version: 12.12.41
-  resolution: "@types/node@npm:12.12.41"
-  checksum: 3/18bc615621df9a03da4f34f056028ee8718ccbee96b2cd51a5ca6d5afa35b11e1470216499885e31ca04d00fe6a0aa5b294da4a376f4fb424d9ecfd7a58a2345
+  version: 12.12.42
+  resolution: "@types/node@npm:12.12.42"
+  checksum: 3/5ac01be407e37ceea0819f6787756d3446cf1b7747ed54342094dc14a0909231dad61380e2961e07f1cfaaf1f5310092822d48517d5cb7e4c0a64bd9752832ee
   languageName: node
   linkType: hard
 
@@ -4072,13 +4082,13 @@ __metadata:
   linkType: hard
 
 "@types/prettier@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "@types/prettier@npm:2.0.0"
-  checksum: 3/aee539015e8c815b211ffdb1a4b6e6aab24bd5665b3c71cc1aa95b9b65b3452f3e2b8541146577ba25535317532e6c8d9626e27568a89fad1888f248142a19bb
+  version: 2.0.1
+  resolution: "@types/prettier@npm:2.0.1"
+  checksum: 3/fba408d98574b9790446bd5d5f1200a1baf164beea676eaad139320a1d1cdf54f2e411a865b253fc75fbadd1a096bb7eacbf13083fa7d26785e98dca57932b47
   languageName: node
   linkType: hard
 
-"@types/prismjs@npm:^1.9.1":
+"@types/prismjs@npm:*, @types/prismjs@npm:^1.9.1":
   version: 1.16.1
   resolution: "@types/prismjs@npm:1.16.1"
   checksum: 3/f3807984ec5df53c37a83d315851e620ff5038f37e748f18e68075c0184485abcf1b5de5fde94f5640922a24e3c0eb6f4ea424c27650322a25ab0f3de73d6ec1
@@ -4127,11 +4137,11 @@ __metadata:
   linkType: hard
 
 "@types/react-native@npm:*":
-  version: 0.62.10
-  resolution: "@types/react-native@npm:0.62.10"
+  version: 0.62.11
+  resolution: "@types/react-native@npm:0.62.11"
   dependencies:
     "@types/react": "*"
-  checksum: 3/90f38f4090579038c2d671b106e6c05451ec7d00cabb6996c5f8891fcd49e405b058bd113d035b7b6126e650d5a54512f1d5f4c95584760ba1653249bbdcc010
+  checksum: 3/9fda9d072ed74803fd233fb5590fffd9b8f52758364cc16f9e17cd266f7ac5d1f9162e1b1320b821de167a521c522d9b6efdab81b0666127479261e5bacf86bb
   languageName: node
   linkType: hard
 
@@ -4291,60 +4301,61 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:2.33.0":
-  version: 2.33.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:2.33.0"
+"@typescript-eslint/eslint-plugin@npm:3.0.0":
+  version: 3.0.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:3.0.0"
   dependencies:
-    "@typescript-eslint/experimental-utils": 2.33.0
+    "@typescript-eslint/experimental-utils": 3.0.0
     functional-red-black-tree: ^1.0.1
     regexpp: ^3.0.0
+    semver: ^7.3.2
     tsutils: ^3.17.1
   peerDependencies:
-    "@typescript-eslint/parser": ^2.0.0
-    eslint: ^5.0.0 || ^6.0.0
+    "@typescript-eslint/parser": ^3.0.0
+    eslint: ^5.0.0 || ^6.0.0 || ^7.0.0
     typescript: "*"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 3/fbac64a9ebf0c7dd61fb2b7bb8cd721116560d78aa5edfed517eea2d68e5e93f86953f99733f0db203a9b5363a53bf6944b23df63242d74ea7184fd2a0f76b3b
+  checksum: 3/986b1c8f02f2230fff8a45b9302383a140852df17915d41584c8bfe01bf908b2e63c186873312784e0d9e60788ce986c255abe7ceec7251bda93410b06f19fca
   languageName: node
   linkType: hard
 
-"@typescript-eslint/experimental-utils@npm:2.33.0":
-  version: 2.33.0
-  resolution: "@typescript-eslint/experimental-utils@npm:2.33.0"
+"@typescript-eslint/experimental-utils@npm:3.0.0":
+  version: 3.0.0
+  resolution: "@typescript-eslint/experimental-utils@npm:3.0.0"
   dependencies:
     "@types/json-schema": ^7.0.3
-    "@typescript-eslint/typescript-estree": 2.33.0
+    "@typescript-eslint/typescript-estree": 3.0.0
     eslint-scope: ^5.0.0
     eslint-utils: ^2.0.0
   peerDependencies:
     eslint: "*"
-  checksum: 3/d4e084287045b2c7bb9b0762010e7c538fec45492d6e83464181a7f73d1616644655e09eb30948c6e82a908b6859cbec85e3da27b4d5914218030485a99e5252
+  checksum: 3/ccaa9b2aea4a7148d301f2384271e35b39ff8d526beb076705140290b497aa75e032c9efac6492a7d03fac65857d999f555534a186e90601059ee295a3cb9d58
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:2.33.0":
-  version: 2.33.0
-  resolution: "@typescript-eslint/parser@npm:2.33.0"
+"@typescript-eslint/parser@npm:3.0.0":
+  version: 3.0.0
+  resolution: "@typescript-eslint/parser@npm:3.0.0"
   dependencies:
     "@types/eslint-visitor-keys": ^1.0.0
-    "@typescript-eslint/experimental-utils": 2.33.0
-    "@typescript-eslint/typescript-estree": 2.33.0
+    "@typescript-eslint/experimental-utils": 3.0.0
+    "@typescript-eslint/typescript-estree": 3.0.0
     eslint-visitor-keys: ^1.1.0
   peerDependencies:
-    eslint: ^5.0.0 || ^6.0.0
+    eslint: ^5.0.0 || ^6.0.0 || ^7.0.0
     typescript: "*"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 3/dfbe4d5bd7187d98c95a33a8875222af550fd690f5b4d922f6b8ac27dc3113349d81144dc1a6ad7d737289eaf183162eeae2b5a62cf724bf415ed574af99cc67
+  checksum: 3/c4388d1a217a026acf9b8ab07e2cf182670e3f3c5b96ef28033a114b794e4ee0d018e63f8c3ef0e9677c075436950afddb886649ca3f0e74e3500389ca307549
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:2.33.0, @typescript-eslint/typescript-estree@npm:^2.29.0":
-  version: 2.33.0
-  resolution: "@typescript-eslint/typescript-estree@npm:2.33.0"
+"@typescript-eslint/typescript-estree@npm:3.0.0":
+  version: 3.0.0
+  resolution: "@typescript-eslint/typescript-estree@npm:3.0.0"
   dependencies:
     debug: ^4.1.1
     eslint-visitor-keys: ^1.1.0
@@ -4358,7 +4369,27 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 3/d917169d05f709fd5ae4e5b7b336b832f59eeb4a5ecd2a812f63a5c68dd4212366ff321c8c8444cad687047a37454feafa2400652d87022e51d85e6b9cb1621f
+  checksum: 3/12020a20f0b181204f4287c6b86d12d450cd88d2c788d22502880e364647cbe34213ca81a13265cd010755f8509dc39578b8354b8d0f738014d4a096dde0ef89
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/typescript-estree@npm:^2.29.0":
+  version: 2.34.0
+  resolution: "@typescript-eslint/typescript-estree@npm:2.34.0"
+  dependencies:
+    debug: ^4.1.1
+    eslint-visitor-keys: ^1.1.0
+    glob: ^7.1.6
+    is-glob: ^4.0.1
+    lodash: ^4.17.15
+    semver: ^7.3.2
+    tsutils: ^3.17.1
+  peerDependencies:
+    typescript: "*"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 3/77d1a758dfd4a2813fb51d6102aa79d7eccb006c66db8cff49a10706c8cf64cae6b256b8ec6694058c1c333775e1dbc6ca7501769138fc89165b9c10f8201e40
   languageName: node
   linkType: hard
 
@@ -4897,13 +4928,13 @@ __metadata:
   linkType: hard
 
 "acorn-class-fields@npm:^0.3.1":
-  version: 0.3.3
-  resolution: "acorn-class-fields@npm:0.3.3"
+  version: 0.3.4
+  resolution: "acorn-class-fields@npm:0.3.4"
   dependencies:
     acorn-private-class-elements: ^0.2.5
   peerDependencies:
     acorn: ^6.0.0 || ^7.0.0
-  checksum: 3/4ce268726ad5ae34e2b9972314a385378c739108cf24bbf6d7663a59bc107f2b0cddc590b3e4a93d43262dff67a356ac90e208252148d8e4f0a5f44de58ceeb6
+  checksum: 3/9f115faf70c2ecc182b75c8c5f268dc0ffd327e32dd94abbab87f958dfa80ed44e24faf6b26eec9cd6f0728efb68f96219e52137a8bdf0e6280f6687f092d3db
   languageName: node
   linkType: hard
 
@@ -5011,13 +5042,13 @@ __metadata:
   linkType: hard
 
 "acorn-static-class-features@npm:^0.2.0":
-  version: 0.2.1
-  resolution: "acorn-static-class-features@npm:0.2.1"
+  version: 0.2.2
+  resolution: "acorn-static-class-features@npm:0.2.2"
   dependencies:
     acorn-private-class-elements: ^0.2.3
   peerDependencies:
     acorn: ^6.1.0 || ^7.0.0
-  checksum: 3/ac7754eb1436be213c4b717b167b9729f0730e3c78501551932968a6ff222758bd0b29013cd361668c092c3fbdf76783a0f37e57028e3dd7ba8c83d43988b47e
+  checksum: 3/5a3994b498c5d96ac2e2ee09b7c10c5e5fcd1aee90d31a5f33e9d251586fe05b11879d2b00259fffb5d0a3160264cf97b54e4fc1799723beb86db3521dcf4127
   languageName: node
   linkType: hard
 
@@ -5715,9 +5746,9 @@ __metadata:
   linkType: hard
 
 "aws4@npm:^1.8.0":
-  version: 1.9.1
-  resolution: "aws4@npm:1.9.1"
-  checksum: 3/d59822631844f9da1caf966cfab90ffafa22cc6c50835f9f5ebff83acdbcffc24eca44fa50d4aa191a6cee81747df38b9880547cc1df8a1380c80dd507b8e6ce
+  version: 1.10.0
+  resolution: "aws4@npm:1.10.0"
+  checksum: 3/f8c20a0031a2ae88bb29a89d5e5f8139eb0cc8aa964d0a8d69a476a4b0f6cf3954e3dd40bd08cea69c95ee31e2e69226d82e804628261a2375223ac67582009d
   languageName: node
   linkType: hard
 
@@ -6705,9 +6736,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001043, caniuse-lite@npm:^1.0.30001061":
-  version: 1.0.30001062
-  resolution: "caniuse-lite@npm:1.0.30001062"
-  checksum: 3/53711c8c75be1d09c166b80f355a6ec4e15af1ddaaa24808aa89cae89d7f0dc87292392e31fdcc103d37eab59e02184bb764d1e01fa1d6ac3b3ba8a405739651
+  version: 1.0.30001064
+  resolution: "caniuse-lite@npm:1.0.30001064"
+  checksum: 3/5287759ddd5bf00c272d5224d7eaf06996be6f671fce49c33484d2ee8a0403b7eb729ed1ea06e7c3c0d1ba6ad702ffa0948f378dde5c0d985c8c5a4a7b9da9e7
   languageName: node
   linkType: hard
 
@@ -6983,15 +7014,15 @@ __metadata:
   linkType: hard
 
 "cids@npm:~0.8.0":
-  version: 0.8.0
-  resolution: "cids@npm:0.8.0"
+  version: 0.8.1
+  resolution: "cids@npm:0.8.1"
   dependencies:
     buffer: ^5.5.0
     class-is: ^1.1.0
     multibase: ~0.7.0
     multicodec: ^1.0.1
     multihashes: ~0.4.17
-  checksum: 3/c5414c0dbeb6143f8768d38f81ab0c29811d0db1f8cec4d02595f9e9401afe1cb37e53a4340721c1512e5c0adfc0727b92a17457beff82078bbe3f5b84b1b181
+  checksum: 3/d699462ec86eefa2952fb099e2b25f8c0548cb2a91466c28cda067d4dd0bbce9630957f0d85ea36c9d28c896bc4950fd786b13dd8bf6dbd046fbe8673bb2a65e
   languageName: node
   linkType: hard
 
@@ -9270,9 +9301,9 @@ __metadata:
   linkType: hard
 
 "electron-to-chromium@npm:^1.3.413":
-  version: 1.3.448
-  resolution: "electron-to-chromium@npm:1.3.448"
-  checksum: 3/7a96f1bb805bddf15d58e0dc2d95bbcd8bd3d344815300c6e7123ba41c5df1213d17335d245fc19d14d68c97a56518c0b3254e51bc9e198a3b1d7d305c970782
+  version: 1.3.451
+  resolution: "electron-to-chromium@npm:1.3.451"
+  checksum: 3/5cd94ad18dd4bef3d1854fbff0d70364424953b03776f3962b1a23767ac106bc27132df4dde5acf01822e4333920afc8f753946dd39bc3ec9d0bcebd769088b9
   languageName: node
   linkType: hard
 
@@ -9833,9 +9864,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:^7.0.0":
-  version: 7.0.0
-  resolution: "eslint@npm:7.0.0"
+"eslint@npm:^7.1.0":
+  version: 7.1.0
+  resolution: "eslint@npm:7.1.0"
   dependencies:
     "@babel/code-frame": ^7.0.0
     ajv: ^6.10.0
@@ -9875,7 +9906,7 @@ __metadata:
     v8-compile-cache: ^2.0.3
   bin:
     eslint: bin/eslint.js
-  checksum: 3/6f5b92b843767f459b60f52312da7ba31c34b8d958f29c1fa96d1c564c270ebe272250f81fe8f1368ddfe2ec2fd3d89c6a160b18effe1269853f7e35c7010317
+  checksum: 3/26b8bc7947b9b8c42f05965a24cd9ea261f0d7b2b5993135bdac403bc65df7812338a2a0999810cae865ff877ec0e17eb818534179d765b7ed36a3a90c3a69b3
   languageName: node
   linkType: hard
 
@@ -10065,8 +10096,8 @@ __metadata:
   linkType: hard
 
 "execa@npm:^4.0.0":
-  version: 4.0.1
-  resolution: "execa@npm:4.0.1"
+  version: 4.0.2
+  resolution: "execa@npm:4.0.2"
   dependencies:
     cross-spawn: ^7.0.0
     get-stream: ^5.0.0
@@ -10077,7 +10108,7 @@ __metadata:
     onetime: ^5.1.0
     signal-exit: ^3.0.2
     strip-final-newline: ^2.0.0
-  checksum: 3/334a54e5a07290f1b988069db52ff4525e992e1ac6fc7449495635f773ff57aea0d0110b4544796e640f9a47cc14291273ff607dae4534feb31d353203b5b56f
+  checksum: 3/c48f3d6a044daa1bb5d93486e1c8eee12a8724b439b7f8c270c556a37cf7e2ffd528a86d2ef08adcbe78b485956cfca56c6027ec15d8370bef959097b9ba23ba
   languageName: node
   linkType: hard
 
@@ -11985,16 +12016,16 @@ __metadata:
   linkType: hard
 
 "html-to-react@npm:^1.3.4":
-  version: 1.4.2
-  resolution: "html-to-react@npm:1.4.2"
+  version: 1.4.3
+  resolution: "html-to-react@npm:1.4.3"
   dependencies:
     domhandler: ^3.0
-    htmlparser2: ^4.0
+    htmlparser2: ^4.1.0
     lodash.camelcase: ^4.3.0
-    ramda: ^0.26
+    ramda: ^0.27
   peerDependencies:
     react: ^16.0
-  checksum: 3/599a6b23cb83553c8fecb7d53f2bb9f9e2fa682b916873d1f05b2b3add1370bdb14d356fe1b654121785ced53c88ce8b642bcaa5fe5e3933ff66410b8a5068da
+  checksum: 3/7a1545316ad888b218fdc7a45a409a693ecab812e7a155642a2ec44f6277e104928abc5fe1cea9b14c5cba1e100a320cb18f93435e3c40f70e80dfedf15b5dd9
   languageName: node
   linkType: hard
 
@@ -12031,7 +12062,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"htmlparser2@npm:^4.0, htmlparser2@npm:^4.1.0":
+"htmlparser2@npm:^4.1.0":
   version: 4.1.0
   resolution: "htmlparser2@npm:4.1.0"
   dependencies:
@@ -12332,9 +12363,9 @@ __metadata:
   linkType: hard
 
 "ignore@npm:^5.1.1, ignore@npm:^5.1.4":
-  version: 5.1.4
-  resolution: "ignore@npm:5.1.4"
-  checksum: 3/215721af976442f3836b5baa3c1e212c946aadb15609940f851d058b283c84950659bceb245faee7f5476a50d32999af4cdccb7f1c1e4446a728133584938e6c
+  version: 5.1.6
+  resolution: "ignore@npm:5.1.6"
+  checksum: 3/e7167d699477a44d6065b3ddfaada5f3f7dcc522ea8d702b21b983b2eaadefed2f2b63614e2697446dd2d875ce4c64ce4c1cc80eac2c068d6c5598eddd7d31ce
   languageName: node
   linkType: hard
 
@@ -13500,8 +13531,8 @@ __metadata:
   linkType: hard
 
 "jake@npm:^10.6.1":
-  version: 10.6.1
-  resolution: "jake@npm:10.6.1"
+  version: 10.7.1
+  resolution: "jake@npm:10.7.1"
   dependencies:
     async: 0.9.x
     chalk: ^2.4.2
@@ -13509,7 +13540,7 @@ __metadata:
     minimatch: ^3.0.4
   bin:
     jake: ./bin/cli.js
-  checksum: 3/c49eda175dcb1c6e959a42840df7f6da79db7b585fb374ac322520070e4b21ec6e26b99de76acc66218015347e9e40f1907ba5409e55be1a7c52dcf83af84904
+  checksum: 3/20cf9588b6e47a842ee3fe7654fdc64a2a641a8be0274b4edf2cfad8f33f5ee82e1e862872ede9487a28ba6ea776ef93b2899aa802d8e2807b98c3a86fd04a49
   languageName: node
   linkType: hard
 
@@ -14009,14 +14040,14 @@ __metadata:
   linkType: hard
 
 "js-yaml@npm:^3.11.0, js-yaml@npm:^3.13.1":
-  version: 3.13.1
-  resolution: "js-yaml@npm:3.13.1"
+  version: 3.14.0
+  resolution: "js-yaml@npm:3.14.0"
   dependencies:
     argparse: ^1.0.7
     esprima: ^4.0.0
   bin:
     js-yaml: bin/js-yaml.js
-  checksum: 3/277157fdf235757b71cfbf24f6bef57576a26d9b4cf89b63d89c9044da7b0f9d16c3629c8b5fd549ae343523727a0df1598794e9a4429763cee4e17056ff8523
+  checksum: 3/2eb95464e5263aedc20ae2d9280f0e29b00adab15ece080ec42473d7055efaab24b904108644d115f687efe05a5bde02972b883aafa93607c4c108f667a56fa7
   languageName: node
   linkType: hard
 
@@ -15672,7 +15703,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimist@npm:^1.1.0, minimist@npm:^1.1.1, minimist@npm:^1.1.3, minimist@npm:^1.2.0, minimist@npm:^1.2.5":
+"minimist@npm:^1.1.0, minimist@npm:^1.1.1, minimist@npm:^1.1.3, minimist@npm:^1.2.0, minimist@npm:^1.2.3, minimist@npm:^1.2.5":
   version: 1.2.5
   resolution: "minimist@npm:1.2.5"
   checksum: 3/b77b8590147a4e217ff34266236bc39de23b52e6e33054076991ff674c7397a1380a7bde11111916f16f003a94aaa7e4f3d92595a32189644ff607fabc65a5b6
@@ -16279,8 +16310,8 @@ __metadata:
   linkType: hard
 
 "node-notifier@npm:^7.0.0":
-  version: 7.0.0
-  resolution: "node-notifier@npm:7.0.0"
+  version: 7.0.1
+  resolution: "node-notifier@npm:7.0.1"
   dependencies:
     growly: ^1.3.0
     is-wsl: ^2.1.1
@@ -16288,7 +16319,7 @@ __metadata:
     shellwords: ^0.1.1
     uuid: ^7.0.3
     which: ^2.0.2
-  checksum: 3/1f47316d572bb0e448525a62334605bf51c7768998dbe9b93ad1fa1b3b10285664ed5cff9817fe043854442a632d77ce3978c6b4f77074696622ed03565ff65a
+  checksum: 3/d851b89ba6e6cbab7803370516ff25424b95d2fa0d0a15c01c199447502cd959f2153d2976674eb297a01faff64a85598297e54da362c933c3fb199ecfc39118
   languageName: node
   linkType: hard
 
@@ -17597,8 +17628,8 @@ __metadata:
     "@babel/register": ^7.9.0
     "@babel/runtime": ^7.9.6
     "@pinata/sdk": ^1.1.9
-    "@polkadot/dev": ^0.53.5
-    "@polkadot/ts": ^0.3.22
+    "@polkadot/dev": ^0.54.1
+    "@polkadot/ts": ^0.3.23
     "@types/bn.js": ^4.11.6
     "@types/chart.js": ^2.9.21
     "@types/file-saver": ^2.0.1
@@ -18184,13 +18215,13 @@ __metadata:
   linkType: hard
 
 "prebuild-install@npm:^5.3.3":
-  version: 5.3.3
-  resolution: "prebuild-install@npm:5.3.3"
+  version: 5.3.4
+  resolution: "prebuild-install@npm:5.3.4"
   dependencies:
     detect-libc: ^1.0.3
     expand-template: ^2.0.3
     github-from-package: 0.0.0
-    minimist: ^1.2.0
+    minimist: ^1.2.3
     mkdirp: ^0.5.1
     napi-build-utils: ^1.0.1
     node-abi: ^2.7.0
@@ -18204,7 +18235,7 @@ __metadata:
     which-pm-runs: ^1.0.0
   bin:
     prebuild-install: ./bin.js
-  checksum: 3/1a266151ec485c79a0cfabd3275ecc477913f6eef3de456ac24f05154a966862f935fdf1f7e3011a9edc755b8530f4b7376e842c41587eacd541ef15d21647ea
+  checksum: 3/34c354c1d3c887b9d6f599f0838d1ca104c5f6ff7fed417556e7945d5b38c0858365e4573aed21faa2f430618dc5ab98858474c55f5697e11fc6440237bac9e0
   languageName: node
   linkType: hard
 
@@ -18643,10 +18674,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ramda@npm:^0.26":
-  version: 0.26.1
-  resolution: "ramda@npm:0.26.1"
-  checksum: 3/22e3fbfabdf45d7f7e8e0ff198be6c1f94d1cc16dd68f4c1786436b4583f8f1ef610a3bf0e8e8984c11346791da6ebadbe5b63dd29f2939bdfed7362d277c07b
+"ramda@npm:^0.27":
+  version: 0.27.0
+  resolution: "ramda@npm:0.27.0"
+  checksum: 3/27b2346803bb30acdde0afa25a364c99280a7fbf480ad959cfb5237371d0dd4719c7fb5052b2cbae4c92790c90ee9086e6cbb677500f3f8b4c338144cb71ecce
   languageName: node
   linkType: hard
 
@@ -18784,16 +18815,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-i18next@npm:^11.4.0":
-  version: 11.4.0
-  resolution: "react-i18next@npm:11.4.0"
+"react-i18next@npm:^11.5.0":
+  version: 11.5.0
+  resolution: "react-i18next@npm:11.5.0"
   dependencies:
     "@babel/runtime": ^7.3.1
     html-parse-stringify2: 2.0.1
   peerDependencies:
     i18next: ">= 19.0.0"
     react: ">= 16.8.0"
-  checksum: 3/b20b897274f8b0a598f40f9946afb4c985e9553ffc45eca927a3c3f2457396d332ed0531a8db782e3f2f2085a52ca9d7a440d62713816d6e1aac6e911a3fbd28
+  checksum: 3/09fe7c4bb6f154750e808473aa31fea6901359dfb53e9244f86c45e54f0fbb461aaa44359d4fd2ae77e9b4389c866d824e03ff9f31c908662b7e7710b05d6b32
   languageName: node
   linkType: hard
 
@@ -19339,9 +19370,9 @@ __metadata:
   linkType: hard
 
 "regjsgen@npm:^0.5.1":
-  version: 0.5.1
-  resolution: "regjsgen@npm:0.5.1"
-  checksum: 3/6c032a9cbbf735793e6a80621f2434fa08b9a59f27419133c3e3c01663b0e7687ec16c42acaeb193c07cbb4249cd42fa0398217007036a90dbb827910826fcb3
+  version: 0.5.2
+  resolution: "regjsgen@npm:0.5.2"
+  checksum: 3/629afab3d9ce61e104064cda66aca74ec9a1921151cc985d93c5cb58453ed7f7c23479bdb1a4a0826d200ed28c3871a7b8a8938e634ab00194195012893bccbc
   languageName: node
   linkType: hard
 
@@ -20678,12 +20709,12 @@ __metadata:
   linkType: hard
 
 "spdx-correct@npm:^3.0.0":
-  version: 3.1.0
-  resolution: "spdx-correct@npm:3.1.0"
+  version: 3.1.1
+  resolution: "spdx-correct@npm:3.1.1"
   dependencies:
     spdx-expression-parse: ^3.0.0
     spdx-license-ids: ^3.0.0
-  checksum: 3/3b0874df2bb18f7bd1f7e1308b5bd5f1184b55c23753eb0ae4d4f4cd9e9006ce4ec800df7b3f438fdd64b4dc7e923d46787e7f7bda2abae4c1d6f161dd93163b
+  checksum: 3/f3413eb225ef9f13aa2ec05230ff7669bffad055a7f62ec85164dd27f00a9f1e19880554a8fa5350fc434764ff895836c207f98813511a0180b0e929581bfe01
   languageName: node
   linkType: hard
 
@@ -22364,7 +22395,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typedoc@npm:^0.17.6":
+"typedoc@npm:^0.17.7":
   version: 0.17.7
   resolution: "typedoc@npm:0.17.7"
   dependencies:
@@ -22386,7 +22417,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@^3.0.3, typescript@^3.7.5, typescript@^3.8.3, typescript@^3.9.2":
+"typescript@^3.0.3, typescript@^3.7.5, typescript@^3.8.3, typescript@^3.9.3":
   version: 3.9.3
   resolution: "typescript@npm:3.9.3"
   bin:
@@ -22396,7 +22427,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@^3.0.3#builtin<compat/typescript>, typescript@patch:typescript@^3.7.5#builtin<compat/typescript>, typescript@patch:typescript@^3.8.3#builtin<compat/typescript>, typescript@patch:typescript@^3.9.2#builtin<compat/typescript>":
+"typescript@patch:typescript@^3.0.3#builtin<compat/typescript>, typescript@patch:typescript@^3.7.5#builtin<compat/typescript>, typescript@patch:typescript@^3.8.3#builtin<compat/typescript>, typescript@patch:typescript@^3.9.3#builtin<compat/typescript>":
   version: 3.9.3
   resolution: "typescript@patch:typescript@npm%3A3.9.3#builtin<compat/typescript>::version=3.9.3&hash=8cac75"
   bin: