diff --git a/package.json b/package.json
index ee24adaf31..6041097fc5 100644
--- a/package.json
+++ b/package.json
@@ -20,12 +20,7 @@
     "devops/eslint-config",
     "devops/prettier-config",
     "pioneer",
-    "pioneer/packages/apps*",
-    "pioneer/packages/page*",
-    "pioneer/packages/react*",
-    "pioneer/packages/joy-utils",
-    "pioneer/packages/joy-members",
-    "pioneer/packages/joy-pages",
+    "pioneer/packages/*",
     "utils/api-examples"
   ],
   "resolutions": {
@@ -37,7 +32,8 @@
     "@polkadot/util-crypto": "3.0.1",
     "@polkadot/wasm-crypto": "1.2.1",
     "babel-core": "^7.0.0-bridge.0",
-    "typescript": "^3.9.7"
+    "typescript": "^3.9.7",
+    "bn.js": "^5.1.2"
   },
   "devDependencies": {
     "husky": "^4.2.5",
diff --git a/pioneer/.eslintignore b/pioneer/.eslintignore
index 42a2471efd..50caaf3056 100644
--- a/pioneer/.eslintignore
+++ b/pioneer/.eslintignore
@@ -1,14 +1,5 @@
 **/build/*
 **/coverage/*
 **/node_modules/*
-packages/old-apps/*
-packages/joy-election/*
-packages/joy-forum/*
-packages/joy-help/*
-packages/joy-media/*
-packages/joy-proposals/*
-packages/joy-roles/*
-packages/joy-settings/*
-packages/joy-utils-old/*
 .eslintrc.js
 i18next-scanner.config.js
diff --git a/pioneer/.eslintrc.js b/pioneer/.eslintrc.js
index a909f51bfc..4b3de541bd 100644
--- a/pioneer/.eslintrc.js
+++ b/pioneer/.eslintrc.js
@@ -27,6 +27,8 @@ module.exports = {
     'react/jsx-max-props-per-line': 'off',
     'sort-destructure-keys/sort-destructure-keys': 'off',
     '@typescript-eslint/unbound-method': 'warn', // Doesn't work well with our version of Formik, see: https://github.com/formium/formik/issues/2589
+    'react-hooks/exhaustive-deps': 'warn', // Causes more issues than it solves currently
+    'no-void': 'off' // Otherwise we cannot mark unhandles promises
   },
   // isolate pioneer from monorepo eslint rules
   root: true
diff --git a/pioneer/.storybook/webpack.config.js b/pioneer/.storybook/webpack.config.js
index 6c02952773..32d03f6c6a 100644
--- a/pioneer/.storybook/webpack.config.js
+++ b/pioneer/.storybook/webpack.config.js
@@ -1,81 +1,47 @@
 const path = require('path')
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 module.exports = ({ config }) => {
+  // Styles (replace the provided rule):
+  const originalCssRuleIndex = config.module.rules.findIndex(rule => rule.test.source.includes('.css'));
+  config.module.rules[originalCssRuleIndex] = {
+    test: /\.(sa|sc|c)ss$/i,
+    use: [
+      // Creates `style` nodes from JS strings
+      'style-loader',
+      // Translates CSS into CommonJS
+      'css-loader',
+      // Compiles Sass to CSS
+      'sass-loader'
+    ]
+  };
 
-// Post CSS loader for sources:
-config.module.rules.push({
-  test: /\.css$/,
-  include: path.resolve(__dirname, '../packages'),
-  exclude: /(node_modules)/,
-  use: [
-    {
-      loader: require.resolve('postcss-loader'),
-      options: {
-        // Set postcss.config.js config path && ctx
-        config: {
-          path: '../postcss.config.js',
-        },
-        ident: 'postcss',
-        plugins: () => [
-          require('precss'),
-          require('autoprefixer'),
-          require('postcss-simple-vars'),
-          require('postcss-nested'),
-          require('postcss-import'),
-          require('postcss-clean')(),
-          require('postcss-flexbugs-fixes')
-        ]
-      }
-    }
-  ]
-});
+  // TypeScript loader (via Babel to match polkadot/apps)
+  config.module.rules.push({
+    test: /\.(js|ts|tsx)$/,
+    exclude: /(node_modules)/,
+    use: [
+      {
+        loader: require.resolve('babel-loader'),
+        options: require('@polkadot/dev/config/babel')
+      },
+    ],
+  });
+  config.resolve.extensions.push('.js', '.ts', '.tsx');
 
-// TypeScript loader (via Babel to match polkadot/apps)
-config.module.rules.push({
-  test: /\.(js|ts|tsx)$/,
-  exclude: /(node_modules)/,
-  use: [
-    {
-      loader: require.resolve('babel-loader'),
-      options: require('@polkadot/dev-react/config/babel')
-    },
-  ],
-});
-config.resolve.extensions.push('.js', '.ts', '.tsx');
+  // TSConfig, uses the same file as packages
+  config.resolve.plugins = config.resolve.plugins || [];
+  config.resolve.plugins.push(
+    new TsconfigPathsPlugin({
+      configFile: path.resolve(__dirname, '../tsconfig.json'),
+    })
+  );
 
-// TSConfig, uses the same file as packages
-config.resolve.plugins = config.resolve.plugins || [];
-config.resolve.plugins.push(
-  new TsconfigPathsPlugin({
-    configFile: path.resolve(__dirname, '../tsconfig.json'),
-  })
-);
+  // Stories parser
+  config.module.rules.push({
+      test: /\.stories\.tsx?$/,
+      loaders: [require.resolve('@storybook/source-loader')],
+      enforce: 'pre',
+  });
 
-// Stories parser
-config.module.rules.push({
-    test: /\.stories\.tsx?$/,
-    loaders: [require.resolve('@storybook/source-loader')],
-    enforce: 'pre',
-});
-
-// CSS preprocessors
-config.module.rules.push(
-    {
-        test: /\.s[ac]ss$/i,
-        use: [
-            // Creates `style` nodes from JS strings
-            'style-loader',
-            // Translates CSS into CommonJS
-            'css-loader',
-            // Compiles Sass to CSS
-            'sass-loader',
-        ],
-    },
-    {
-        test: /\.less$/,
-        loaders: [ 'style-loader', 'css-loader', 'less-loader' ]
-    }
-);
-
-return config;
+  return config;
 };
diff --git a/pioneer/package.json b/pioneer/package.json
index b050147ce3..91a97d68d7 100644
--- a/pioneer/package.json
+++ b/pioneer/package.json
@@ -25,7 +25,6 @@
     "test": "echo \"skipping tests\"",
     "vanitygen": "node packages/app-accounts/scripts/vanitygen.js",
     "start": "yarn clean && cd packages/apps && webpack --config webpack.config.js",
-    "generate-schemas": "json2ts -i packages/joy-types/src/schemas/role.schema.json -o packages/joy-types/src/schemas/role.schema.ts",
     "build-storybook": "build-storybook -c .storybook",
     "storybook": "start-storybook -s ./packages/apps/public -p 3001"
   },
@@ -40,7 +39,7 @@
     "@types/chart.js": "^2.9.23",
     "@types/file-saver": "^2.0.1",
     "@types/i18next": "^13.0.0",
-    "@types/jest": "^26.0.7",
+    "@types/jest": "^26.0.10",
     "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-copy-to-clipboard": "^4.3.0",
     "@types/react-dom": "^16.9.8",
@@ -74,11 +73,13 @@
     "@storybook/addon-actions": "^5.2.5",
     "@storybook/addon-console": "^1.2.1",
     "@storybook/react": "^5.2.5",
-    "json-schema-to-typescript": "^7.1.0",
     "storybook-react-router": "^1.0.8",
     "typescript": "^3.9.7",
     "eslint-plugin-header": "^3.0.0",
-    "eslint-plugin-sort-destructure-keys": "^1.3.5"
+    "eslint-plugin-sort-destructure-keys": "^1.3.5",
+    "jest": "^26.4.1",
+    "ts-jest": "^26.2.0",
+    "tsconfig-paths-webpack-plugin": "^3.2.0"
   },
   "dependencies": {
     "@types/lodash": "^4.14.138",
diff --git a/pioneer/packages/apps-config/src/settings/endpoints.ts b/pioneer/packages/apps-config/src/settings/endpoints.ts
index c7d662f519..88118e3f55 100644
--- a/pioneer/packages/apps-config/src/settings/endpoints.ts
+++ b/pioneer/packages/apps-config/src/settings/endpoints.ts
@@ -33,94 +33,94 @@ function createLive (t: TFunction): LinkOption[] {
       info: 'joystream',
       text: t<string>('rpc.joystream', 'Joystream (Current Testnet, hosted by Jsgenesis)', { ns: 'apps-config' }),
       value: 'wss://rome-rpc-endpoint.joystream.org:9944'
-    },
-    {
-      dnslink: 'polkadot',
-      info: 'polkadot',
-      text: t<string>('rpc.polkadot.parity', 'Polkadot (Live, hosted by Parity)', { ns: 'apps-config' }),
-      value: 'wss://rpc.polkadot.io'
-    },
-    {
-      dnslink: 'polkadot',
-      info: 'polkadot',
-      text: t<string>('rpc.polkadot.w3f', 'Polkadot (Live, hosted by Web3 Foundation)', { ns: 'apps-config' }),
-      value: 'wss://cc1-1.polkadot.network'
-    },
-    {
-      dnslink: 'kusama',
-      info: 'kusama',
-      text: t<string>('rpc.kusama.parity', 'Kusama (Polkadot Canary, hosted by Parity)', { ns: 'apps-config' }),
-      value: 'wss://kusama-rpc.polkadot.io/'
-    },
-    {
-      dnslink: 'kusama',
-      info: 'kusama',
-      text: t<string>('rpc.kusama.w3f', 'Kusama (Polkadot Canary, hosted by Web3 Foundation)', { ns: 'apps-config' }),
-      value: 'wss://cc3-5.kusama.network/'
-    },
-    {
-      dnslink: 'kusama',
-      info: 'kusama',
-      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/'
-    },
-    {
-      dnslink: 'centrifuge',
-      info: 'centrifuge',
-      text: t<string>('rpc.centrifuge', 'Centrifuge (Mainnet, hosted by Centrifuge)', { ns: 'apps-config' }),
-      value: 'wss://fullnode.centrifuge.io'
-    },
-    {
-      dnslink: 'edgeware',
-      info: 'edgeware',
-      text: t<string>('rpc.edgeware', 'Edgeware (Mainnet, hosted by Commonwealth Labs)', { ns: 'apps-config' }),
-      value: 'wss://mainnet1.edgewa.re'
-    },
-    {
-      dnslink: 'kulupu',
-      info: 'substrate',
-      text: t<string>('rpc.kulupu', 'Kulupu (Kulupu Mainnet, hosted by Kulupu)', { ns: 'apps-config' }),
-      value: 'wss://rpc.kulupu.network/ws'
     }
+    // {
+    //   dnslink: 'polkadot',
+    //   info: 'polkadot',
+    //   text: t<string>('rpc.polkadot.parity', 'Polkadot (Live, hosted by Parity)', { ns: 'apps-config' }),
+    //   value: 'wss://rpc.polkadot.io'
+    // },
+    // {
+    //   dnslink: 'polkadot',
+    //   info: 'polkadot',
+    //   text: t<string>('rpc.polkadot.w3f', 'Polkadot (Live, hosted by Web3 Foundation)', { ns: 'apps-config' }),
+    //   value: 'wss://cc1-1.polkadot.network'
+    // },
+    // {
+    //   dnslink: 'kusama',
+    //   info: 'kusama',
+    //   text: t<string>('rpc.kusama.parity', 'Kusama (Polkadot Canary, hosted by Parity)', { ns: 'apps-config' }),
+    //   value: 'wss://kusama-rpc.polkadot.io/'
+    // },
+    // {
+    //   dnslink: 'kusama',
+    //   info: 'kusama',
+    //   text: t<string>('rpc.kusama.w3f', 'Kusama (Polkadot Canary, hosted by Web3 Foundation)', { ns: 'apps-config' }),
+    //   value: 'wss://cc3-5.kusama.network/'
+    // },
+    // {
+    //   dnslink: 'kusama',
+    //   info: 'kusama',
+    //   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/'
+    // },
+    // {
+    //   dnslink: 'centrifuge',
+    //   info: 'centrifuge',
+    //   text: t<string>('rpc.centrifuge', 'Centrifuge (Mainnet, hosted by Centrifuge)', { ns: 'apps-config' }),
+    //   value: 'wss://fullnode.centrifuge.io'
+    // },
+    // {
+    //   dnslink: 'edgeware',
+    //   info: 'edgeware',
+    //   text: t<string>('rpc.edgeware', 'Edgeware (Mainnet, hosted by Commonwealth Labs)', { ns: 'apps-config' }),
+    //   value: 'wss://mainnet1.edgewa.re'
+    // },
+    // {
+    //   dnslink: 'kulupu',
+    //   info: 'substrate',
+    //   text: t<string>('rpc.kulupu', 'Kulupu (Kulupu Mainnet, hosted by Kulupu)', { ns: 'apps-config' }),
+    //   value: 'wss://rpc.kulupu.network/ws'
+    // }
   ];
 }
 
-function createTest (t: TFunction): LinkOption[] {
-  return [
-    {
-      dnslink: 'westend',
-      info: 'westend',
-      text: t<string>('rpc.westend', 'Westend (Polkadot Testnet, hosted by Parity)', { ns: 'apps-config' }),
-      value: 'wss://westend-rpc.polkadot.io'
-    },
-    {
-      info: 'acala',
-      text: t<string>('rpc.mandala', 'Mandala (Acala Testnet, hosted by Acala)', { ns: 'apps-config' }),
-      value: 'wss://node-6684611762228215808.jm.onfinality.io/ws'
-    },
-    {
-      info: 'edgeware',
-      text: t<string>('rpc.berlin', 'Berlin (Edgeware Testnet, hosted by Commonwealth Labs)', { ns: 'apps-config' }),
-      value: 'wss://berlin1.edgewa.re'
-    },
-    {
-      info: 'substrate',
-      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<string>('rpc.arcadia', 'Arcadia (Nodle Testnet, hosted by Nodle)', { ns: 'apps-config' }),
-      value: 'wss://arcadia1.nodleprotocol.io/'
-    },
-    {
-      info: 'datahighway',
-      isDisabled: true,
-      text: t<string>('rpc.datahighway.harbour', 'Harbour (DataHighway Testnet, hosted by MXC)', { ns: 'apps-config' }),
-      value: 'wss://testnet-harbour.datahighway.com'
-    }
-  ];
-}
+// function createTest (t: TFunction): LinkOption[] {
+//   return [
+//     {
+//       dnslink: 'westend',
+//       info: 'westend',
+//       text: t<string>('rpc.westend', 'Westend (Polkadot Testnet, hosted by Parity)', { ns: 'apps-config' }),
+//       value: 'wss://westend-rpc.polkadot.io'
+//     },
+//     {
+//       info: 'acala',
+//       text: t<string>('rpc.mandala', 'Mandala (Acala Testnet, hosted by Acala)', { ns: 'apps-config' }),
+//       value: 'wss://node-6684611762228215808.jm.onfinality.io/ws'
+//     },
+//     {
+//       info: 'edgeware',
+//       text: t<string>('rpc.berlin', 'Berlin (Edgeware Testnet, hosted by Commonwealth Labs)', { ns: 'apps-config' }),
+//       value: 'wss://berlin1.edgewa.re'
+//     },
+//     {
+//       info: 'substrate',
+//       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<string>('rpc.arcadia', 'Arcadia (Nodle Testnet, hosted by Nodle)', { ns: 'apps-config' }),
+//       value: 'wss://arcadia1.nodleprotocol.io/'
+//     },
+//     {
+//       info: 'datahighway',
+//       isDisabled: true,
+//       text: t<string>('rpc.datahighway.harbour', 'Harbour (DataHighway Testnet, hosted by MXC)', { ns: 'apps-config' }),
+//       value: 'wss://testnet-harbour.datahighway.com'
+//     }
+//   ];
+// }
 
 function createCustom (t: TFunction): LinkOption[] {
   const WS_URL = (
@@ -158,12 +158,12 @@ export default function create (t: TFunction): LinkOption[] {
       value: ''
     },
     ...createLive(t),
-    {
-      isHeader: true,
-      text: t<string>('rpc.header.test', 'Test networks', { ns: 'apps-config' }),
-      value: ''
-    },
-    ...createTest(t),
+    // {
+    //   isHeader: true,
+    //   text: t<string>('rpc.header.test', 'Test networks', { ns: 'apps-config' }),
+    //   value: ''
+    // },
+    // ...createTest(t),
     {
       isHeader: true,
       text: t<string>('rpc.header.dev', 'Development', { ns: 'apps-config' }),
diff --git a/pioneer/packages/apps-routing/src/index.ts b/pioneer/packages/apps-routing/src/index.ts
index 47899c3931..3534b8d050 100644
--- a/pioneer/packages/apps-routing/src/index.ts
+++ b/pioneer/packages/apps-routing/src/index.ts
@@ -18,29 +18,47 @@ import storage from './storage';
 import sudo from './sudo';
 import toolbox from './toolbox';
 import transfer from './transfer';
+import memo from './memo';
 // Joy packages
 import members from './joy-members';
 import { terms, privacyPolicy } from './joy-pages';
+import election from './joy-election';
+import proposals from './joy-proposals';
+import roles from './joy-roles';
+import media from './joy-media';
+import forum from './joy-forum';
 
 export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Routes {
   return appSettings.uiMode === 'light'
     ? [
+      media(t),
       members(t),
+      roles(t),
+      election(t),
+      proposals(t),
+      forum(t),
       staking(t),
       null,
       transfer(t),
       accounts(t),
+      memo(t),
       settings(t),
       // Those are hidden
       terms(t),
       privacyPolicy(t)
     ]
     : [
+      media(t),
       members(t),
+      roles(t),
+      election(t),
+      proposals(t),
+      forum(t),
       staking(t),
       null,
       transfer(t),
       accounts(t),
+      memo(t),
       settings(t),
       null,
       explorer(t),
diff --git a/pioneer/packages/apps-routing/src/joy-election.ts b/pioneer/packages/apps-routing/src/joy-election.ts
new file mode 100644
index 0000000000..cbff554d99
--- /dev/null
+++ b/pioneer/packages/apps-routing/src/joy-election.ts
@@ -0,0 +1,17 @@
+import { Route } from './types';
+
+import Election from '@polkadot/joy-election/index';
+import SidebarSubtitle from '@polkadot/joy-election/SidebarSubtitle';
+
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
+  return {
+    Component: Election,
+    display: {
+      needsApi: ['query.council.activeCouncil', 'query.councilElection.stage']
+    },
+    text: t<string>('nav.election', 'Council', { ns: 'apps-routing' }),
+    icon: 'university',
+    name: 'council',
+    SubtitleComponent: SidebarSubtitle
+  };
+}
diff --git a/pioneer/packages/apps-routing/src/joy-forum.ts b/pioneer/packages/apps-routing/src/joy-forum.ts
new file mode 100644
index 0000000000..d7a293ca34
--- /dev/null
+++ b/pioneer/packages/apps-routing/src/joy-forum.ts
@@ -0,0 +1,15 @@
+import { Route } from './types';
+
+import Forum from '@polkadot/joy-forum/index';
+
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
+  return {
+    Component: Forum,
+    display: {
+      needsApi: ['query.forum.threadById']
+    },
+    text: t<string>('nav.forum', 'Forum', { ns: 'apps-routing' }),
+    icon: 'comment-dots',
+    name: 'forum'
+  };
+}
diff --git a/pioneer/packages/apps-routing/src/joy-media.ts b/pioneer/packages/apps-routing/src/joy-media.ts
new file mode 100644
index 0000000000..befff152ad
--- /dev/null
+++ b/pioneer/packages/apps-routing/src/joy-media.ts
@@ -0,0 +1,15 @@
+import Media from '@polkadot/joy-media/index';
+
+import { Route } from './types';
+
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
+  return {
+    Component: Media,
+    display: {
+      needsApi: ['query.storageWorkingGroup.workerById', 'query.dataObjectStorageRegistry.relationshipsByContentId']
+    },
+    text: t<string>('nav.media', 'Media', { ns: 'apps-routing' }),
+    icon: 'play-circle',
+    name: 'media'
+  };
+}
diff --git a/pioneer/packages/apps-routing/src/joy-proposals.ts b/pioneer/packages/apps-routing/src/joy-proposals.ts
new file mode 100644
index 0000000000..4c76e21eb8
--- /dev/null
+++ b/pioneer/packages/apps-routing/src/joy-proposals.ts
@@ -0,0 +1,16 @@
+import { Route } from './types';
+
+import Proposals from '@polkadot/joy-proposals/index';
+
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
+  return {
+    Component: Proposals,
+    display: {
+      needsApi: ['query.proposalsEngine.proposalCount']
+    },
+    text: t<string>('nav.proposals', 'Proposals', { ns: 'apps-routing' }),
+    icon: 'tasks',
+    name: 'proposals'
+    // TODO: useCounter with active proposals count? (could be a nice addition)
+  };
+}
diff --git a/pioneer/packages/old-apps/apps-routing/src/joy-roles.ts b/pioneer/packages/apps-routing/src/joy-roles.ts
similarity index 50%
rename from pioneer/packages/old-apps/apps-routing/src/joy-roles.ts
rename to pioneer/packages/apps-routing/src/joy-roles.ts
index 7131a2fce8..8664da1e52 100644
--- a/pioneer/packages/old-apps/apps-routing/src/joy-roles.ts
+++ b/pioneer/packages/apps-routing/src/joy-roles.ts
@@ -1,9 +1,9 @@
-import { Routes } from './types';
+import { Route } from './types';
 
 import Roles from '@polkadot/joy-roles/index';
 
-export default ([
-  {
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
+  return {
     Component: Roles,
     display: {
       needsApi: [
@@ -11,10 +11,8 @@ export default ([
         'query.storageWorkingGroup.mint'
       ]
     },
-    i18n: {
-      defaultValue: 'Working groups'
-    },
+    text: t<string>('nav.roles', 'Working groups', { ns: 'apps-routing' }),
     icon: 'users',
     name: 'working-groups'
-  }
-] as Routes);
+  };
+}
diff --git a/pioneer/packages/apps-routing/src/memo.ts b/pioneer/packages/apps-routing/src/memo.ts
new file mode 100644
index 0000000000..d1a7b9fee0
--- /dev/null
+++ b/pioneer/packages/apps-routing/src/memo.ts
@@ -0,0 +1,20 @@
+import { Route } from './types';
+
+import { MemoModal } from '@polkadot/joy-utils/react/components/Memo';
+
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
+  return {
+    // Assert to get around the uncecessary requirement for RouteProps
+    Component: MemoModal as React.ComponentType<any>,
+    Modal: MemoModal,
+    display: {
+      isHidden: false,
+      needsApi: [
+        'tx.memo.updateMemo'
+      ]
+    },
+    icon: 'sticky-note',
+    name: 'memo',
+    text: t<string>('nav.memo', 'My memo', { ns: 'apps-routing' })
+  };
+}
diff --git a/pioneer/packages/apps-routing/src/types.ts b/pioneer/packages/apps-routing/src/types.ts
index 6dce432d8c..4a6695fef2 100644
--- a/pioneer/packages/apps-routing/src/types.ts
+++ b/pioneer/packages/apps-routing/src/types.ts
@@ -24,6 +24,8 @@ export interface Route {
   name: string;
   text: string;
   useCounter?: () => number | string | null;
+  // Joystream-specific
+  SubtitleComponent?: React.ComponentType<any>;
 }
 
 export type Routes = (Route | null)[];
diff --git a/pioneer/packages/old-apps/apps/public/images/default-thumbnail.png b/pioneer/packages/apps/public/images/default-thumbnail.png
similarity index 100%
rename from pioneer/packages/old-apps/apps/public/images/default-thumbnail.png
rename to pioneer/packages/apps/public/images/default-thumbnail.png
diff --git a/pioneer/packages/apps/public/locales/en/index.json b/pioneer/packages/apps/public/locales/en/index.json
index 962b58bcc3..eec63e3079 100644
--- a/pioneer/packages/apps/public/locales/en/index.json
+++ b/pioneer/packages/apps/public/locales/en/index.json
@@ -25,6 +25,7 @@
   "joy-media.json",
   "joy-members.json",
   "joy-roles.json",
+  "joy-utils.json",
   "react-components.json",
   "react-params.json",
   "react-query.json",
diff --git a/pioneer/packages/apps/public/locales/en/joy-settings.json b/pioneer/packages/apps/public/locales/en/joy-settings.json
deleted file mode 100644
index 9e26dfeeb6..0000000000
--- a/pioneer/packages/apps/public/locales/en/joy-settings.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/pioneer/packages/apps/public/locales/en/joy-utils-old.json b/pioneer/packages/apps/public/locales/en/joy-utils-old.json
deleted file mode 100644
index 9e26dfeeb6..0000000000
--- a/pioneer/packages/apps/public/locales/en/joy-utils-old.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/pioneer/packages/apps/public/locales/en/joy-utils.json b/pioneer/packages/apps/public/locales/en/joy-utils.json
index 9e26dfeeb6..d094e35b91 100644
--- a/pioneer/packages/apps/public/locales/en/joy-utils.json
+++ b/pioneer/packages/apps/public/locales/en/joy-utils.json
@@ -1 +1,4 @@
-{}
\ No newline at end of file
+{
+  "click to select or drag and drop the file here": "click to select or drag and drop the file here",
+  "{{name}} ({{size}} bytes)": "{{name}} ({{size}} bytes)"
+}
\ No newline at end of file
diff --git a/pioneer/packages/apps/src/Content/NotFound.tsx b/pioneer/packages/apps/src/Content/NotFound.tsx
index f2c58785c9..71c4a1fd95 100644
--- a/pioneer/packages/apps/src/Content/NotFound.tsx
+++ b/pioneer/packages/apps/src/Content/NotFound.tsx
@@ -7,7 +7,7 @@ import { Redirect } from 'react-router';
 
 function NotFound (): React.ReactElement {
   return (
-    <Redirect to='/staking' />
+    <Redirect to='/media' />
   );
 }
 
diff --git a/pioneer/packages/apps/src/Content/index.tsx b/pioneer/packages/apps/src/Content/index.tsx
index 63f0238535..a375b8b91c 100644
--- a/pioneer/packages/apps/src/Content/index.tsx
+++ b/pioneer/packages/apps/src/Content/index.tsx
@@ -16,6 +16,11 @@ import { useTranslation } from '../translate';
 import NotFound from './NotFound';
 import Status from './Status';
 
+// Joystream-specific
+// We must use transport provider here instead of /apps/src/index
+// to avoid "Cannot create Transport: The Substrate API is not ready yet." error
+import { TransportProvider } from '@polkadot/joy-utils/react/context';
+
 interface Props {
   className?: string;
 }
@@ -60,11 +65,25 @@ function Content ({ className }: Props): React.ReactElement<Props> {
                 ? <NotFound />
                 : (
                   <ErrorBoundary trigger={name}>
-                    <Component
-                      basePath={`/${name}`}
-                      location={location}
-                      onStatusChange={queueAction}
-                    />
+                    { needsApi
+                      // Add transport provider for routes that need the api
+                      // (the above condition makes sure it's aleady initialized at this point)
+                      ? (
+                        <TransportProvider>
+                          <Component
+                            basePath={`/${name}`}
+                            location={location}
+                            onStatusChange={queueAction}
+                          />
+                        </TransportProvider>
+                      )
+                      : (
+                        <Component
+                          basePath={`/${name}`}
+                          location={location}
+                          onStatusChange={queueAction}
+                        />
+                      ) }
                   </ErrorBoundary>
                 )
               }
@@ -78,7 +97,6 @@ function Content ({ className }: Props): React.ReactElement<Props> {
 }
 
 export default React.memo(styled(Content)`
-  background: rgba(250, 250, 250);
   padding: 0 1.5rem;
   position: relative;
   width: 100%;
diff --git a/pioneer/packages/apps/src/SideBar/Item.tsx b/pioneer/packages/apps/src/SideBar/Item.tsx
index abcd801144..629f9c9c19 100644
--- a/pioneer/packages/apps/src/SideBar/Item.tsx
+++ b/pioneer/packages/apps/src/SideBar/Item.tsx
@@ -79,12 +79,15 @@ function Item ({ isCollapsed, onClick, route }: Props): React.ReactElement<Props
     return null;
   }
 
-  const { Modal, icon, name, text } = route;
+  const { Modal, SubtitleComponent, icon, name, text } = route;
 
   const body = (
     <>
       <Icon icon={icon} />
-      <span className='text'>{text}</span>
+      <span className='text'>
+        {text}
+        { SubtitleComponent && <SubtitleComponent/> }
+      </span>
       {!!count && (
         <Badge
           color='counter'
diff --git a/pioneer/packages/apps/src/SideBar/index.tsx b/pioneer/packages/apps/src/SideBar/index.tsx
index 5496e93255..48e1cf0dc3 100644
--- a/pioneer/packages/apps/src/SideBar/index.tsx
+++ b/pioneer/packages/apps/src/SideBar/index.tsx
@@ -14,7 +14,6 @@ import NetworkModal from '../modals/Network';
 import { useTranslation } from '../translate';
 import ChainInfo from './ChainInfo';
 import Item from './Item';
-import NodeInfo from './NodeInfo';
 
 interface Props {
   className?: string;
@@ -101,7 +100,6 @@ function SideBar ({ className = '', collapse, handleResize, isCollapsed, isMenuO
                 )
             ))}
             <Menu.Divider hidden />
-            {!isCollapsed && <NodeInfo />}
           </div>
           <div className={`apps--SideBar-collapse ${isCollapsed ? 'collapsed' : 'expanded'}`}>
             <Button
diff --git a/pioneer/packages/apps/src/initSettings.ts b/pioneer/packages/apps/src/initSettings.ts
index 0c1cafb675..6c6bd633b6 100644
--- a/pioneer/packages/apps/src/initSettings.ts
+++ b/pioneer/packages/apps/src/initSettings.ts
@@ -8,11 +8,17 @@ import { createEndpoints } from '@polkadot/apps-config/settings';
 import { extractIpfsDetails } from '@polkadot/react-hooks/useIpfs';
 import settings from '@polkadot/ui-settings';
 
-function getApiUrl (): string {
+// Joystream-specific override in order to include default UIMODE
+function getInitSettings () {
   // we split here so that both these forms are allowed
   //  - 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') as Record<string, unknown> || {};
+
+  // uiMode - set to "light" if not in storage
+  const uiMode = stored.uiMode ? stored.uiMode as string : 'light';
+  let apiUrl: string;
 
   // if specified, this takes priority
   if (urlOptions.rpc) {
@@ -20,7 +26,7 @@ function getApiUrl (): string {
       throw new Error('Invalid WS endpoint specified');
     }
 
-    return urlOptions.rpc.split('#')[0]; // https://polkadot.js.org/apps/?rpc=ws://127.0.0.1:9944#/explorer;
+    apiUrl = urlOptions.rpc.split('#')[0]; // https://polkadot.js.org/apps/?rpc=ws://127.0.0.1:9944#/explorer;
   }
 
   const endpoints = createEndpoints(<T = string>(): T => ('' as unknown as T));
@@ -31,24 +37,25 @@ function getApiUrl (): string {
     const option = endpoints.find(({ dnslink }) => dnslink === ipnsChain);
 
     if (option) {
-      return option.value as string;
+      apiUrl = option.value as string;
     }
   }
 
-  const stored = store.get('settings') as Record<string, unknown> || {};
   const fallbackUrl = endpoints.find(({ value }) => !!value);
 
   // via settings, or the default chain
-  return [stored.apiUrl, process.env.WS_URL].includes(settings.apiUrl)
+  apiUrl = [stored.apiUrl, process.env.WS_URL].includes(settings.apiUrl)
     ? settings.apiUrl // keep as-is
     : fallbackUrl
       ? fallbackUrl.value as string // grab the fallback
       : 'ws://127.0.0.1:9944'; // nothing found, go local
+
+  return { apiUrl, uiMode };
 }
 
-const apiUrl = getApiUrl();
+const { apiUrl, uiMode } = getInitSettings();
 
 // set the default as retrieved here
-settings.set({ apiUrl });
+settings.set({ apiUrl, uiMode });
 
 console.log('WS endpoint=', apiUrl);
diff --git a/pioneer/packages/apps/webpack.base.config.js b/pioneer/packages/apps/webpack.base.config.js
index c0f79a4010..c033fa6565 100644
--- a/pioneer/packages/apps/webpack.base.config.js
+++ b/pioneer/packages/apps/webpack.base.config.js
@@ -48,6 +48,9 @@ function createWebpack (ENV, context) {
     return alias;
   }, {});
 
+  // Add @joystream/types as alias to automatically process any changes:
+  alias['@joystream/types'] = path.resolve(context, '../../../types/src');
+
   return {
     context,
     entry: ['@babel/polyfill', './src/index.tsx'],
@@ -69,6 +72,17 @@ function createWebpack (ENV, context) {
             }
           ]
         },
+        {
+          test: /\.s[ac]ss$/i,
+          use: [
+            // Creates `style` nodes from JS strings
+            'style-loader',
+            // Translates CSS into CommonJS
+            'css-loader',
+            // Compiles Sass to CSS
+            'sass-loader'
+          ]
+        },
         {
           include: /node_modules/,
           test: /\.css$/,
diff --git a/pioneer/packages/joy-election/.skip-build b/pioneer/packages/joy-election/.skip-build
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/pioneer/packages/joy-election/package.json b/pioneer/packages/joy-election/package.json
index 2bee08d3ff..17c74cd58c 100644
--- a/pioneer/packages/joy-election/package.json
+++ b/pioneer/packages/joy-election/package.json
@@ -7,9 +7,9 @@
   "author": "Joystream contributors",
   "maintainers": [],
   "dependencies": {
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/react-components": "0.37.0-beta.63",
-    "@polkadot/react-query": "0.37.0-beta.63",
+    "@babel/runtime": "^7.10.5",
+    "@polkadot/react-components": "0.51.1",
+    "@polkadot/react-query": "0.51.1",
     "@polkadot/joy-utils": "^0.1.1"
   }
 }
diff --git a/pioneer/packages/joy-election/src/Applicant.tsx b/pioneer/packages/joy-election/src/Applicant.tsx
index b48c3291f3..0626c53e1e 100644
--- a/pioneer/packages/joy-election/src/Applicant.tsx
+++ b/pioneer/packages/joy-election/src/Applicant.tsx
@@ -4,24 +4,25 @@ import { Table } from 'semantic-ui-react';
 
 import { I18nProps } from '@polkadot/react-components/types';
 import { ApiProps } from '@polkadot/react-api/types';
-import { withCalls } from '@polkadot/react-api/with';
+import { withCalls } from '@polkadot/react-api/hoc';
 import { AccountId } from '@polkadot/types/interfaces';
 import { formatBalance } from '@polkadot/util';
 import CandidatePreview from './CandidatePreview';
 
 import translate from './translate';
-import { calcTotalStake } from '@polkadot/joy-utils/index';
+import { calcTotalStake } from '@polkadot/joy-utils/functions/misc';
 import { ElectionStake } from '@joystream/types/council';
 
 type Props = ApiProps & I18nProps & {
   index: number;
   accountId: AccountId;
   stake?: ElectionStake;
+  isVotingStage: boolean;
 };
 
 class Applicant extends React.PureComponent<Props> {
   render () {
-    const { index, accountId, stake } = this.props;
+    const { index, accountId, stake, isVotingStage } = this.props;
     const voteUrl = `/council/votes?applicantId=${accountId.toString()}`;
 
     return (
@@ -33,9 +34,11 @@ class Applicant extends React.PureComponent<Props> {
         <Table.Cell style={{ textAlign: 'right' }}>
           {formatBalance(calcTotalStake(stake))}
         </Table.Cell>
-        <Table.Cell>
-          <Link to={voteUrl} className='ui button primary inverted'>Vote</Link>
-        </Table.Cell>
+        { isVotingStage && (
+          <Table.Cell>
+            <Link to={voteUrl} className='ui button primary inverted'>Vote</Link>
+          </Table.Cell>
+        ) }
       </Table.Row>
     );
   }
diff --git a/pioneer/packages/joy-election/src/Applicants.tsx b/pioneer/packages/joy-election/src/Applicants.tsx
index e84c85f3d5..3ee84db4d7 100644
--- a/pioneer/packages/joy-election/src/Applicants.tsx
+++ b/pioneer/packages/joy-election/src/Applicants.tsx
@@ -1,49 +1,68 @@
 import React from 'react';
-import { Table } from 'semantic-ui-react';
+import { Table, Message } from 'semantic-ui-react';
 import BN from 'bn.js';
 
 import { I18nProps } from '@polkadot/react-components/types';
 import { ApiProps } from '@polkadot/react-api/types';
-import { withCalls } from '@polkadot/react-api/with';
+import { withCalls } from '@polkadot/react-api/hoc';
 import { AccountId } from '@polkadot/types/interfaces';
+import { Option } from '@polkadot/types';
 import { formatNumber } from '@polkadot/util';
 
 import translate from './translate';
 import Applicant from './Applicant';
 import ApplyForm from './ApplyForm';
-import Section from '@polkadot/joy-utils/Section';
-import { queryToProp } from '@polkadot/joy-utils/index';
-import { withMyAccount, MyAccountProps } from '@polkadot/joy-utils/MyAccount';
+import Section from '@polkadot/joy-utils/react/components/Section';
+import { queryToProp } from '@polkadot/joy-utils/functions/misc';
+import { withMyAccount, MyAccountProps } from '@polkadot/joy-utils/react/hocs/accounts';
+import { ElectionStage } from '@joystream/types/src/council';
+import { RouteProps } from 'react-router-dom';
 
-type Props = ApiProps & I18nProps & MyAccountProps & {
+type Props = RouteProps & ApiProps & I18nProps & MyAccountProps & {
   candidacyLimit?: BN;
   applicants?: Array<AccountId>;
+  stage?: Option<ElectionStage>;
 };
 
 class Applicants extends React.PureComponent<Props> {
-  private renderTable = (applicants: Array<AccountId>) => (
-    <Table celled selectable compact>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>#</Table.HeaderCell>
-          <Table.HeaderCell>Applicant</Table.HeaderCell>
-          <Table.HeaderCell>Total stake</Table.HeaderCell>
-          <Table.HeaderCell style={{ width: '1%' }}>Actions</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>{applicants.map((accountId, index) => (
-        <Applicant key={index} index={index} accountId={accountId} />
-      ))}</Table.Body>
-    </Table>
-  )
+  private renderTable = (applicants: Array<AccountId>) => {
+    const isVotingStage = this.props.stage?.unwrapOr(undefined)?.isOfType('Voting') || false;
+
+    return (
+      <Table celled selectable compact>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>#</Table.HeaderCell>
+            <Table.HeaderCell>Applicant</Table.HeaderCell>
+            <Table.HeaderCell>Total stake</Table.HeaderCell>
+            { isVotingStage && (
+              <Table.HeaderCell style={{ width: '1%' }}>Actions</Table.HeaderCell>
+            ) }
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>{applicants.map((accountId, index) => (
+          <Applicant key={index} index={index} accountId={accountId} isVotingStage={isVotingStage}/>
+        ))}</Table.Body>
+      </Table>
+    );
+  }
 
   render () {
-    const { myAddress, applicants = [], candidacyLimit = new BN(0) } = this.props;
+    const { myAddress, applicants = [], candidacyLimit = new BN(0), stage } = this.props;
     const title = <span>Applicants <sup>{applicants.length}/{formatNumber(candidacyLimit)}</sup></span>;
 
     return <>
       <Section title='My application'>
-        <ApplyForm myAddress={myAddress} />
+        { stage?.unwrapOr(undefined)?.isOfType('Announcing')
+          ? (
+            <ApplyForm myAddress={myAddress} />
+          )
+          : (
+            <Message warning>
+              Applying to council is only possible during <i><b>Announcing</b></i> stage.
+            </Message>
+          )
+        }
       </Section>
       <Section title={title}>
         {!applicants.length
@@ -59,6 +78,7 @@ class Applicants extends React.PureComponent<Props> {
 export default translate(
   withCalls<Props>(
     queryToProp('query.councilElection.candidacyLimit'),
-    queryToProp('query.councilElection.applicants')
+    queryToProp('query.councilElection.applicants'),
+    queryToProp('query.councilElection.stage')
   )(withMyAccount(Applicants))
 );
diff --git a/pioneer/packages/joy-election/src/ApplyForm.tsx b/pioneer/packages/joy-election/src/ApplyForm.tsx
index f058fc992c..518d95ce51 100644
--- a/pioneer/packages/joy-election/src/ApplyForm.tsx
+++ b/pioneer/packages/joy-election/src/ApplyForm.tsx
@@ -3,21 +3,21 @@ import React from 'react';
 
 import { I18nProps } from '@polkadot/react-components/types';
 import { ApiProps } from '@polkadot/react-api/types';
-import { withCalls, withMulti } from '@polkadot/react-api/with';
+import { withCalls, withMulti } from '@polkadot/react-api/hoc';
 import { Labelled } from '@polkadot/react-components/index';
 import { Balance } from '@polkadot/types/interfaces';
 
 import translate from './translate';
-import TxButton from '@polkadot/joy-utils/TxButton';
-import InputStake from '@polkadot/joy-utils/InputStake';
+import TxButton from '@polkadot/joy-utils/react/components/TxButton';
+import InputStake from '@polkadot/joy-utils/react/components/InputStake';
 import { ElectionStake } from '@joystream/types/council';
-import { calcTotalStake, ZERO } from '@polkadot/joy-utils/index';
-import { MyAddressProps, withOnlyMembers } from '@polkadot/joy-utils/MyAccount';
+import { calcTotalStake, ZERO } from '@polkadot/joy-utils/functions/misc';
+import { MyAddressProps } from '@polkadot/joy-utils/react/hocs/accounts';
+import { withOnlyMembers } from '@polkadot/joy-utils/react/hocs/guards';
 
 type Props = ApiProps & I18nProps & MyAddressProps & {
   minStake?: Balance;
   alreadyStaked?: ElectionStake;
-  myBalance?: Balance;
 };
 
 type State = {
@@ -48,15 +48,16 @@ class ApplyForm extends React.PureComponent<Props, State> {
           isValid={isStakeValid}
           onChange={this.onChangeStake}
         />
-        <Labelled style={{ marginTop: '.5rem' }}>
-          <TxButton
-            size='large'
-            isDisabled={!isStakeValid}
-            label={buttonLabel}
-            params={[stake]}
-            tx='councilElection.apply'
-          />
-        </Labelled>
+        <div style={{ marginTop: '.5rem' }}>
+          <Labelled>
+            <TxButton
+              isDisabled={!isStakeValid}
+              label={buttonLabel}
+              params={[stake]}
+              tx='councilElection.apply'
+            />
+          </Labelled>
+        </div>
       </div>
     );
   }
@@ -71,10 +72,9 @@ class ApplyForm extends React.PureComponent<Props, State> {
 
   private onChangeStake = (stake?: BN): void => {
     stake = stake || ZERO;
-    const { myBalance = ZERO } = this.props;
-    const isStakeLteBalance = stake.lte(myBalance);
     const isStakeGteMinStake = stake.add(this.alreadyStaked()).gte(this.minStake());
-    const isStakeValid = !stake.isZero() && isStakeGteMinStake && isStakeLteBalance;
+    const isStakeValid = !stake.isZero() && isStakeGteMinStake;
+
     this.setState({ stake, isStakeValid });
   }
 }
@@ -88,8 +88,6 @@ export default withMulti(
     ['query.councilElection.minCouncilStake',
       { propName: 'minStake' }],
     ['query.councilElection.applicantStakes',
-      { paramName: 'myAddress', propName: 'alreadyStaked' }],
-    ['query.balances.freeBalance',
-      { paramName: 'myAddress', propName: 'myBalance' }]
+      { paramName: 'myAddress', propName: 'alreadyStaked' }]
   )
 );
diff --git a/pioneer/packages/joy-election/src/CandidatePreview.tsx b/pioneer/packages/joy-election/src/CandidatePreview.tsx
index 9e6571efb6..bab07182e7 100644
--- a/pioneer/packages/joy-election/src/CandidatePreview.tsx
+++ b/pioneer/packages/joy-election/src/CandidatePreview.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import AddressMini from '@polkadot/react-components/AddressMiniJoy';
-import MemberByAccount from '@polkadot/joy-utils/MemberByAccountPreview';
+import AddressMini from '@polkadot/react-components/AddressMini';
+import MemberByAccount from '@polkadot/joy-utils/react/components/MemberByAccountPreview';
 import { AccountId } from '@polkadot/types/interfaces';
 
 import styled from 'styled-components';
diff --git a/pioneer/packages/joy-election/src/Council.tsx b/pioneer/packages/joy-election/src/Council.tsx
index b81c144883..f4e9e9597d 100644
--- a/pioneer/packages/joy-election/src/Council.tsx
+++ b/pioneer/packages/joy-election/src/Council.tsx
@@ -2,22 +2,22 @@ import React from 'react';
 
 import { ApiProps } from '@polkadot/react-api/types';
 import { I18nProps } from '@polkadot/react-components/types';
-import { withCalls } from '@polkadot/react-api/with';
+import { withCalls } from '@polkadot/react-api/hoc';
 import { Table } from 'semantic-ui-react';
 import { formatBalance } from '@polkadot/util';
 import CouncilCandidate from './CandidatePreview';
 
-import { calcBackersStake } from '@polkadot/joy-utils/index';
+import { calcBackersStake } from '@polkadot/joy-utils/functions/misc';
 import { Seat } from '@joystream/types/council';
 import translate from './translate';
-import Section from '@polkadot/joy-utils/Section';
+import Section from '@polkadot/joy-utils/react/components/Section';
+import { RouteProps } from 'react-router-dom';
 
-type Props = ApiProps &
-I18nProps & {
+type Props = RouteProps & ApiProps & I18nProps & {
   council?: Seat[];
 };
 
-type State = {};
+type State = Record<any, never>;
 
 class Council extends React.PureComponent<Props, State> {
   state: State = {};
@@ -53,9 +53,10 @@ class Council extends React.PureComponent<Props, State> {
 
   render () {
     const { council = [] } = this.props;
+
     // console.log({ council });
     return (
-      <Section title="Active council members">
+      <Section title='Active council members'>
         {!council.length ? <em>Council is not elected yet</em> : this.renderTable(council)}
       </Section>
     );
diff --git a/pioneer/packages/joy-election/src/Dashboard.tsx b/pioneer/packages/joy-election/src/Dashboard.tsx
index c7f64ef811..da6fffbd9c 100644
--- a/pioneer/packages/joy-election/src/Dashboard.tsx
+++ b/pioneer/packages/joy-election/src/Dashboard.tsx
@@ -3,18 +3,19 @@ import React from 'react';
 
 import { ApiProps } from '@polkadot/react-api/types';
 import { I18nProps } from '@polkadot/react-components/types';
-import { withCalls } from '@polkadot/react-api/with';
+import { withCalls } from '@polkadot/react-api/hoc';
 import { Option } from '@polkadot/types';
 import { BlockNumber, Balance } from '@polkadot/types/interfaces';
-import { Bubble } from '@polkadot/react-components/index';
+import { Label, Icon } from 'semantic-ui-react';
 import { formatNumber, formatBalance } from '@polkadot/util';
 
-import Section from '@polkadot/joy-utils/Section';
-import { queryToProp } from '@polkadot/joy-utils/index';
+import Section from '@polkadot/joy-utils/react/components/Section';
+import { queryToProp } from '@polkadot/joy-utils/functions/misc';
 import { ElectionStage, Seat } from '@joystream/types/council';
 import translate from './translate';
+import { RouteProps } from 'react-router-dom';
 
-type Props = ApiProps & I18nProps & {
+type Props = RouteProps & ApiProps & I18nProps & {
   bestNumber?: BN;
 
   activeCouncil?: Seat[];
@@ -34,7 +35,7 @@ type Props = ApiProps & I18nProps & {
   stage?: Option<ElectionStage>;
 };
 
-type State = {};
+type State = Record<any, never>;
 
 class Dashboard extends React.PureComponent<Props, State> {
   state: State = {};
@@ -45,12 +46,17 @@ class Dashboard extends React.PureComponent<Props, State> {
     const title = `Council ${activeCouncil.length > 0 ? '' : '(not elected)'}`;
 
     return <Section title={title}>
-      <Bubble label='Council members'>
-        {activeCouncil.length}
-      </Bubble>
-      <Bubble icon='flag checkered' label='Term ends at block #'>
-        {formatNumber(p.termEndsAt)}
-      </Bubble>
+      <Label.Group color='grey' size='large'>
+        <Label>
+          Council members
+          <Label.Detail>{activeCouncil.length}</Label.Detail>
+        </Label>
+        <Label>
+          <Icon name='flag checkered'/>
+          Term ends at block #
+          <Label.Detail>{formatNumber(p.termEndsAt)}</Label.Detail>
+        </Label>
+      </Label.Group>
     </Section>;
   }
 
@@ -59,13 +65,16 @@ class Dashboard extends React.PureComponent<Props, State> {
 
     let stageName: string | undefined;
     let stageEndsAt: BlockNumber | undefined;
+
     if (stage && stage.isSome) {
       const stageValue = stage.value as ElectionStage;
+
       stageEndsAt = stageValue.value as BlockNumber; // contained value
       stageName = stageValue.type; // name of Enum variant
     }
 
     let leftBlocks: BN | undefined;
+
     if (stageEndsAt && bestNumber) {
       leftBlocks = stageEndsAt.sub(bestNumber);
     }
@@ -76,20 +85,28 @@ class Dashboard extends React.PureComponent<Props, State> {
     const title = <>Election (<span className={stateClass}>{stateText}</span>)</>;
 
     return <Section title={title}>
-      <Bubble icon='target' label='Election round #'>
-        {formatNumber(round)}
-      </Bubble>
-      {isRunning && <>
-        <Bubble label='Stage'>
-          {stageName}
-        </Bubble>
-        <Bubble label='Blocks left'>
-          {formatNumber(leftBlocks)}
-        </Bubble>
-        <Bubble icon='flag checkered' label='Stage ends at block #'>
-          {formatNumber(stageEndsAt)}
-        </Bubble>
-      </>}
+      <Label.Group color='grey' size='large'>
+        <Label>
+          <Icon name='target'/>
+          Election round #
+          <Label.Detail>{formatNumber(round)}</Label.Detail>
+        </Label>
+        {isRunning && <>
+          <Label>
+            Stage
+            <Label.Detail>{stageName}</Label.Detail>
+          </Label>
+          <Label>
+            Blocks left
+            <Label.Detail>{formatNumber(leftBlocks)}</Label.Detail>
+          </Label>
+          <Label>
+            <Icon name='flag checkered'/>
+            Stage ends at block #
+            <Label.Detail>{formatNumber(stageEndsAt)}</Label.Detail>
+          </Label>
+        </>}
+      </Label.Group>
     </Section>;
   }
 
@@ -98,33 +115,46 @@ class Dashboard extends React.PureComponent<Props, State> {
     const isAutoStart = (p.autoStart || false).valueOf();
 
     return <Section title='Configuration'>
-      <Bubble label='Auto-start elections'>
-        {isAutoStart ? 'Yes' : 'No'}
-      </Bubble>
-      <Bubble label='New term duration'>
-        {formatNumber(p.newTermDuration)}
-      </Bubble>
-      <Bubble label='Candidacy limit'>
-        {formatNumber(p.candidacyLimit)}
-      </Bubble>
-      <Bubble label='Council size'>
-        {formatNumber(p.councilSize)}
-      </Bubble>
-      <Bubble label='Min. council stake'>
-        {formatBalance(p.minCouncilStake)}
-      </Bubble>
-      <Bubble label='Min. voting stake'>
-        {formatBalance(p.minVotingStake)}
-      </Bubble>
-      <Bubble label='Announcing period'>
-        {formatNumber(p.announcingPeriod)} blocks
-      </Bubble>
-      <Bubble label='Voting period'>
-        {formatNumber(p.votingPeriod)} blocks
-      </Bubble>
-      <Bubble label='Revealing period'>
-        {formatNumber(p.revealingPeriod)} blocks
-      </Bubble>
+      <Label.Group color='grey' size='large'>
+        <Label>
+          Auto-start elections
+          <Label.Detail>{isAutoStart ? 'Yes' : 'No'}</Label.Detail>
+        </Label>
+        <Label>
+          New term duration
+          <Label.Detail>{formatNumber(p.newTermDuration)}</Label.Detail>
+        </Label>
+        <Label>
+          Candidacy limit
+          <Label.Detail>{formatNumber(p.candidacyLimit)}</Label.Detail>
+        </Label>
+        <Label>
+          Council size
+          <Label.Detail>{formatNumber(p.councilSize)}</Label.Detail>
+        </Label>
+        <Label>
+          Min. council stake
+          <Label.Detail>{formatBalance(p.minCouncilStake)}</Label.Detail>
+        </Label>
+        <Label>
+          Min. voting stake
+          <Label.Detail>{formatBalance(p.minVotingStake)}</Label.Detail>
+        </Label>
+      </Label.Group>
+      <Label.Group color='grey' size='large'>
+        <Label>
+          Announcing period
+          <Label.Detail>{formatNumber(p.announcingPeriod)} blocks</Label.Detail>
+        </Label>
+        <Label>
+          Voting period
+          <Label.Detail>{formatNumber(p.votingPeriod)} blocks</Label.Detail>
+        </Label>
+        <Label>
+          Revealing period
+          <Label.Detail>{formatNumber(p.revealingPeriod)} blocks</Label.Detail>
+        </Label>
+      </Label.Group>
     </Section>;
   }
 
diff --git a/pioneer/packages/joy-election/src/Reveals.tsx b/pioneer/packages/joy-election/src/Reveals.tsx
index 6a20dad6f9..7b51d2cb0c 100644
--- a/pioneer/packages/joy-election/src/Reveals.tsx
+++ b/pioneer/packages/joy-election/src/Reveals.tsx
@@ -1,23 +1,23 @@
 import React from 'react';
 
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
+import { I18nProps } from '@polkadot/react-components/types';
 import { ApiProps } from '@polkadot/react-api/types';
-import { withCalls, withMulti } from '@polkadot/react-api/with';
+import { withCalls, withMulti } from '@polkadot/react-api/hoc';
 import { AccountId } from '@polkadot/types/interfaces';
 import { Input, Labelled, InputAddress } from '@polkadot/react-components/index';
 
 import translate from './translate';
-import { nonEmptyStr, queryToProp, getUrlParam } from '@polkadot/joy-utils/index';
+import { nonEmptyStr, queryToProp, getUrlParam } from '@polkadot/joy-utils/functions/misc';
 import { accountIdsToOptions, hashVote } from './utils';
-import TxButton from '@polkadot/joy-utils/TxButton';
+import TxButton from '@polkadot/joy-utils/react/components/TxButton';
 import { findVoteByHash } from './myVotesStore';
-import { withOnlyMembers } from '@polkadot/joy-utils/MyAccount';
+import { withOnlyMembers } from '@polkadot/joy-utils/react/hocs/guards';
+import { RouteProps } from 'react-router-dom';
 
 // AppsProps is needed to get a location from the route.
-type Props = AppProps & ApiProps & I18nProps & {
+type Props = RouteProps & ApiProps & I18nProps & {
   applicantId?: string | null;
   applicants?: AccountId[];
-  location: any;
 };
 
 type State = {
@@ -30,8 +30,9 @@ class RevealVoteForm extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props);
     let { applicantId, location } = this.props;
-    applicantId = applicantId || getUrlParam(location, 'applicantId');
-    const hashedVote = getUrlParam(location, 'hashedVote');
+
+    applicantId = applicantId || (location && getUrlParam(location, 'applicantId'));
+    const hashedVote = location && getUrlParam(location, 'hashedVote');
 
     this.state = {
       applicantId,
@@ -45,6 +46,7 @@ class RevealVoteForm extends React.PureComponent<Props, State> {
     const applicantOpts = accountIdsToOptions(this.props.applicants || []);
 
     const myVote = hashedVote ? findVoteByHash(hashedVote) : undefined;
+
     if (myVote) {
       // Try to substitue applicantId and salt from local sotre:
       if (!applicantId) applicantId = myVote.applicantId;
@@ -81,15 +83,16 @@ class RevealVoteForm extends React.PureComponent<Props, State> {
             onChange={this.onChangeSalt}
           />
         </div>}
-        <Labelled style={{ marginTop: '.5rem' }}>
-          <TxButton
-            size='large'
-            isDisabled={!isVoteRevealed}
-            label='Reveal this vote'
-            params={[hashedVote, applicantId, salt]}
-            tx='councilElection.reveal'
-          />
-        </Labelled>
+        <div style={{ marginTop: '.5rem' }}>
+          <Labelled>
+            <TxButton
+              isDisabled={!isVoteRevealed}
+              label='Reveal this vote'
+              params={[hashedVote, applicantId, salt]}
+              tx='councilElection.reveal'
+            />
+          </Labelled>
+        </div>
       </div>
     );
   }
diff --git a/pioneer/packages/joy-election/src/SealedVote.tsx b/pioneer/packages/joy-election/src/SealedVote.tsx
index 54650328c1..769a884e4a 100644
--- a/pioneer/packages/joy-election/src/SealedVote.tsx
+++ b/pioneer/packages/joy-election/src/SealedVote.tsx
@@ -1,38 +1,47 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Table } from 'semantic-ui-react';
+import { Table, Message } from 'semantic-ui-react';
 
 import { I18nProps } from '@polkadot/react-components/types';
 import { ApiProps } from '@polkadot/react-api/types';
-import { withCalls } from '@polkadot/react-api/with';
+import { withCalls } from '@polkadot/react-api/hoc';
 import { Hash } from '@polkadot/types/interfaces';
 import { formatBalance } from '@polkadot/util';
 
 import translate from './translate';
-import { calcTotalStake } from '@polkadot/joy-utils/index';
+import { calcTotalStake } from '@polkadot/joy-utils/functions/misc';
 import { SealedVote } from '@joystream/types/council';
-import AddressMini from '@polkadot/react-components/AddressMiniJoy';
+import AddressMini from '@polkadot/react-components/AddressMini';
 import CandidatePreview from './CandidatePreview';
 import { findVoteByHash } from './myVotesStore';
 
 type Props = ApiProps & I18nProps & {
   hash: Hash;
   sealedVote?: SealedVote;
+  isStageRevealing: boolean;
+  isMyVote: boolean;
 };
 
 class Comp extends React.PureComponent<Props> {
   renderCandidateOrAction () {
-    const { hash, sealedVote } = this.props;
+    const { hash, sealedVote, isStageRevealing, isMyVote } = this.props;
+
     if (!sealedVote) {
       return <em>Unknown hashed vote: {hash.toHex()}</em>;
     }
 
     if (sealedVote.vote.isSome) {
       const candidateId = sealedVote.vote.unwrap();
+
       return <CandidatePreview accountId={candidateId} />;
-    } else {
+    } else if (isStageRevealing && isMyVote) {
       const revealUrl = `/council/reveals?hashedVote=${hash.toHex()}`;
+
       return <Link to={revealUrl} className='ui button primary inverted'>Reveal this vote</Link>;
+    } else if (isMyVote) {
+      return <Message warning>Wait until <i><b>Revealing</b></i> stage in order to reveal this vote.</Message>;
+    } else {
+      return <Message info>This vote has not been revealed yet.</Message>;
     }
   }
 
diff --git a/pioneer/packages/joy-election/src/SealedVotes.tsx b/pioneer/packages/joy-election/src/SealedVotes.tsx
index 1f03b66ac0..5effd2b117 100644
--- a/pioneer/packages/joy-election/src/SealedVotes.tsx
+++ b/pioneer/packages/joy-election/src/SealedVotes.tsx
@@ -1,36 +1,43 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Button } from 'semantic-ui-react';
+import { Button, Message } from 'semantic-ui-react';
 
 import { I18nProps } from '@polkadot/react-components/types';
 import { ApiProps } from '@polkadot/react-api/types';
-import { withCalls } from '@polkadot/react-api/with';
+import { withCalls } from '@polkadot/react-api/hoc';
 import { Hash } from '@polkadot/types/interfaces';
 
 import translate from './translate';
 import SealedVote from './SealedVote';
-import { queryToProp } from '@polkadot/joy-utils/index';
-import { MyAddressProps } from '@polkadot/joy-utils/MyAccount';
+import { queryToProp } from '@polkadot/joy-utils/functions/misc';
+import { MyAddressProps } from '@polkadot/joy-utils/react/hocs/accounts';
 import { SavedVote } from './myVotesStore';
-import Section from '@polkadot/joy-utils/Section';
+import Section from '@polkadot/joy-utils/react/components/Section';
 
 type Props = ApiProps & I18nProps & MyAddressProps & {
   myVotes?: SavedVote[];
   commitments?: Hash[];
+  isStageRevealing: boolean;
 };
 
 class Comp extends React.PureComponent<Props> {
   private filterVotes = (myVotesOnly: boolean): Hash[] => {
     const { myVotes = [], commitments = [] } = this.props;
+
     const isMyVote = (hash: string): boolean => {
-      return myVotes.find(x => x.hash === hash) !== undefined;
+      return myVotes.find((x) => x.hash === hash) !== undefined;
     };
-    return commitments.filter(x => myVotesOnly === isMyVote(x.toHex()));
+
+    return commitments.filter((x) => myVotesOnly === isMyVote(x.toHex()));
   }
 
-  private renderVotes = (votes: Hash[]) => {
+  private renderVotes = (votes: Hash[], areVotesMine: boolean) => {
     return votes.map((hash, index) =>
-      <SealedVote key={index} hash={hash} />
+      <SealedVote
+        key={index}
+        hash={hash}
+        isStageRevealing={this.props.isStageRevealing}
+        isMyVote={areVotesMine}/>
     );
   }
 
@@ -39,17 +46,19 @@ class Comp extends React.PureComponent<Props> {
     const otherVotes = this.filterVotes(false);
 
     return <>
-      <Section title={`My previous votes (${myVotes.length})`}>{
-        !myVotes.length
-          ? <em>No votes by the current account found on the current browser.</em>
-          : this.renderVotes(myVotes)
-      }</Section>
+      <Section title={`My previous votes (${myVotes.length})`}>
+        {
+          !myVotes.length
+            ? <Message info>No votes by the current account found on the current browser.</Message>
+            : this.renderVotes(myVotes, true)
+        }
+        { this.props.isStageRevealing && <Button primary as={Link} to='reveals'>Reveal other vote</Button> }
+      </Section>
       <Section title={`Other votes (${otherVotes.length})`}>
-        <Button primary as={Link} to="reveals">Reveal a vote</Button>
         {
           !otherVotes.length
             ? <em>No votes submitted by other accounts yet.</em>
-            : this.renderVotes(otherVotes)
+            : this.renderVotes(otherVotes, false)
         }
       </Section>
     </>;
diff --git a/pioneer/packages/joy-election/src/SidebarSubtitle.tsx b/pioneer/packages/joy-election/src/SidebarSubtitle.tsx
new file mode 100644
index 0000000000..82e63d39bf
--- /dev/null
+++ b/pioneer/packages/joy-election/src/SidebarSubtitle.tsx
@@ -0,0 +1,35 @@
+/** Component providing election stage subtitle for SideBar menu **/
+import React from 'react';
+import { ElectionStage } from '@joystream/types/council';
+import { Option } from '@polkadot/types/codec';
+import { useApi, useCall } from '@polkadot/react-hooks';
+import styled from 'styled-components';
+
+const colorByStage = {
+  Announcing: '#4caf50',
+  Voting: '#2196f3',
+  Revealing: '#ff5722'
+} as const;
+
+type StyledSubtitleProps = {
+  stage?: keyof typeof colorByStage;
+}
+const StyledSubtitle = styled.div`
+  display: block;
+  font-size: 0.85rem;
+  color: ${(props: StyledSubtitleProps) => props.stage ? colorByStage[props.stage] : 'grey'};
+`;
+
+export default function SidebarSubtitle () {
+  const apiProps = useApi();
+  const electionStage = useCall<Option<ElectionStage>>(apiProps.isApiReady && apiProps.api.query.councilElection.stage, []);
+
+  if (electionStage) {
+    const stageName = electionStage.unwrapOr(undefined)?.type;
+    const text = stageName ? `${stageName} stage` : 'No active election';
+
+    return <StyledSubtitle stage={stageName}>{text}</StyledSubtitle>;
+  }
+
+  return null;
+}
diff --git a/pioneer/packages/joy-election/src/VoteForm.tsx b/pioneer/packages/joy-election/src/VoteForm.tsx
index 63fbb78b17..418c4bd6d0 100644
--- a/pioneer/packages/joy-election/src/VoteForm.tsx
+++ b/pioneer/packages/joy-election/src/VoteForm.tsx
@@ -4,9 +4,9 @@ import uuid from 'uuid/v4';
 import React from 'react';
 import { Message, Table } from 'semantic-ui-react';
 
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
+import { I18nProps } from '@polkadot/react-components/types';
 import { ApiProps } from '@polkadot/react-api/types';
-import { withCalls, withMulti } from '@polkadot/react-api/with';
+import { withCalls, withMulti } from '@polkadot/react-api/hoc';
 import { AccountId, Balance } from '@polkadot/types/interfaces';
 import { Button, Input, Labelled } from '@polkadot/react-components/index';
 import { SubmittableResult } from '@polkadot/api';
@@ -14,14 +14,16 @@ import { formatBalance } from '@polkadot/util';
 
 import translate from './translate';
 import { hashVote } from './utils';
-import { queryToProp, ZERO, getUrlParam, nonEmptyStr } from '@polkadot/joy-utils/index';
-import TxButton from '@polkadot/joy-utils/TxButton';
-import InputStake from '@polkadot/joy-utils/InputStake';
+import { queryToProp, ZERO, getUrlParam, nonEmptyStr } from '@polkadot/joy-utils/functions/misc';
+import TxButton from '@polkadot/joy-utils/react/components/TxButton';
+import InputStake from '@polkadot/joy-utils/react/components/InputStake';
 import CandidatePreview from './CandidatePreview';
-import { MyAccountProps, withOnlyMembers } from '@polkadot/joy-utils/MyAccount';
-import MembersDropdown from '@polkadot/joy-utils/MembersDropdown';
+import { MyAccountProps } from '@polkadot/joy-utils/react/hocs/accounts';
+import { withOnlyMembers } from '@polkadot/joy-utils/react/hocs/guards';
+import MembersDropdown from '@polkadot/joy-utils/react/components/MembersDropdown';
 import { saveVote, NewVote } from './myVotesStore';
 import { TxFailedCallback } from '@polkadot/react-components/Status/types';
+import { RouteProps } from 'react-router-dom';
 
 // TODO use a crypto-prooven generator instead of UUID 4.
 function randomSalt () {
@@ -29,11 +31,10 @@ function randomSalt () {
 }
 
 // AppsProps is needed to get a location from the route.
-type Props = AppProps & ApiProps & I18nProps & MyAccountProps & {
+type Props = RouteProps & ApiProps & I18nProps & MyAccountProps & {
   applicantId?: string | null;
   minVotingStake?: Balance;
   applicants?: AccountId[];
-  location?: any;
 };
 
 type State = {
@@ -49,7 +50,8 @@ class Component extends React.PureComponent<Props, State> {
     super(props);
 
     let { applicantId, location } = this.props;
-    applicantId = applicantId || getUrlParam(location, 'applicantId');
+
+    applicantId = applicantId || (location && getUrlParam(location, 'applicantId'));
 
     this.state = {
       applicantId,
@@ -103,14 +105,11 @@ class Component extends React.PureComponent<Props, State> {
               </Table.Row>
             </Table.Body>
           </Table>
-          <Labelled style={{ marginTop: '.5rem' }}>
-            <Button
-              size='large'
-              label='Submit another vote'
-              onClick={this.resetForm}
-              icon=''
-            />
-          </Labelled>
+          <Button
+            label='Submit another vote'
+            onClick={this.resetForm}
+            icon='arrow-left'
+          />
         </div>
 
       // New vote form:
@@ -120,7 +119,7 @@ class Component extends React.PureComponent<Props, State> {
               onChange={ (event, data) => this.onChangeApplicant(data.value as string) }
               accounts={this.props.applicants || []}
               value={applicantId || ''}
-              placeholder="Select an applicant you support"
+              placeholder='Select an applicant you support'
             />
           </div>
           <InputStake
@@ -137,7 +136,7 @@ class Component extends React.PureComponent<Props, State> {
               onChange={this.onChangeSalt}
             />
             <div className='medium' style={{ margin: '.5rem' }}>
-              <Button onClick={this.newRandomSalt} icon=''>Generate</Button>
+              <Button onClick={this.newRandomSalt} icon='cubes' label='Generate' />
               <Message compact warning size='tiny' content='You need to remember this salt!' />
             </div>
           </div>
@@ -148,18 +147,19 @@ class Component extends React.PureComponent<Props, State> {
               value={hashedVote}
             />
           </div>
-          <Labelled style={{ marginTop: '.5rem' }}>
-            <TxButton
-              size='large'
-              isDisabled={!isFormValid}
-              label='Submit my vote'
-              params={[hashedVote, stake]}
-              tx='councilElection.vote'
-              txStartCb={this.onFormSubmitted}
-              txFailedCb={this.onTxFailed}
-              txSuccessCb={(txResult: SubmittableResult) => this.onTxSuccess(buildNewVote() as NewVote, txResult)}
-            />
-          </Labelled>
+          <div style={{ marginTop: '.5rem' }}>
+            <Labelled>
+              <TxButton
+                isDisabled={!isFormValid}
+                label='Submit my vote'
+                params={[hashedVote, stake]}
+                tx='councilElection.vote'
+                txStartCb={this.onFormSubmitted}
+                txFailedCb={this.onTxFailed}
+                txSuccessCb={(txResult: SubmittableResult) => this.onTxSuccess(buildNewVote() as NewVote, txResult)}
+              />
+            </Labelled>
+          </div>
         </div>}
       </>
     );
@@ -181,12 +181,15 @@ class Component extends React.PureComponent<Props, State> {
 
   private onTxSuccess = (vote: NewVote, txResult: SubmittableResult): void => {
     let hasVotedEvent = false;
+
     txResult.events.forEach((event, i) => {
       const { section, method } = event.event;
+
       if (section === 'councilElection' && method === 'Voted') {
         hasVotedEvent = true;
       }
     });
+
     if (hasVotedEvent) {
       saveVote(vote);
       this.setState({ isFormSubmitted: true });
@@ -203,6 +206,7 @@ class Component extends React.PureComponent<Props, State> {
 
   private onChangeStake = (stake?: BN) => {
     const isStakeValid = stake && stake.gte(this.minStake());
+
     this.setState({ stake, isStakeValid });
   }
 
diff --git a/pioneer/packages/joy-election/src/Votes.tsx b/pioneer/packages/joy-election/src/Votes.tsx
index a1558406e6..7890d30781 100644
--- a/pioneer/packages/joy-election/src/Votes.tsx
+++ b/pioneer/packages/joy-election/src/Votes.tsx
@@ -1,31 +1,53 @@
 import React from 'react';
 
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
+import { I18nProps } from '@polkadot/react-components/types';
 import { ApiProps } from '@polkadot/react-api/types';
+import { withCalls } from '@polkadot/react-api/hoc';
+import { Message } from 'semantic-ui-react';
+import { Option } from '@polkadot/types';
 
 import translate from './translate';
 import SealedVotes from './SealedVotes';
-import Section from '@polkadot/joy-utils/Section';
-import { withMyAccount, MyAccountProps } from '@polkadot/joy-utils/MyAccount';
+import Section from '@polkadot/joy-utils/react/components/Section';
+import { withMyAccount, MyAccountProps } from '@polkadot/joy-utils/react/hocs/accounts';
 import { getVotesByVoter } from './myVotesStore';
 import VoteForm from './VoteForm';
+import { queryToProp } from '@polkadot/joy-utils/functions/misc';
+import { ElectionStage } from '@joystream/types/src/council';
+import { RouteProps } from 'react-router-dom';
 
-type Props = AppProps & ApiProps & I18nProps & MyAccountProps & {};
+type Props = RouteProps & ApiProps & I18nProps & MyAccountProps & {
+  stage?: Option<ElectionStage>;
+};
 
 class Component extends React.PureComponent<Props> {
   render () {
-    const { myAddress } = this.props;
+    const { myAddress, stage } = this.props;
     const myVotes = myAddress ? getVotesByVoter(myAddress) : [];
 
     return <>
       <Section title='My vote'>
-        <VoteForm {...this.props} myAddress={myAddress} />
+        { stage?.unwrapOr(undefined)?.isOfType('Voting')
+          ? (
+            <VoteForm {...this.props} myAddress={myAddress} />
+          )
+          : (
+            <Message warning>
+              Voting is only possible during <i><b>Voting</b></i> stage.
+            </Message>
+          )
+        }
       </Section>
-      <SealedVotes myAddress={myAddress} myVotes={myVotes} />
+      <SealedVotes
+        isStageRevealing={stage?.unwrapOr(undefined)?.isOfType('Revealing') || false}
+        myAddress={myAddress}
+        myVotes={myVotes} />
     </>;
   }
 }
 
 export default translate(
-  withMyAccount(Component)
+  withCalls<Props>(
+    queryToProp('query.councilElection.stage')
+  )(withMyAccount(Component))
 );
diff --git a/pioneer/packages/joy-election/src/index.css b/pioneer/packages/joy-election/src/index.css
deleted file mode 100644
index 5ad24c8384..0000000000
--- a/pioneer/packages/joy-election/src/index.css
+++ /dev/null
@@ -1,28 +0,0 @@
-
-.JoyElection--NotRunning {
-  /* nothing yet */
-}
-.JoyElection--Running {
-  font-style: italic;
-  color: green;
-}
-.SealedVoteTable {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(34,36,38,.15) !important;
-  box-shadow: 0 1px 2px 0 rgba(34,36,38,.15) !important;
-  tr td:first-child {
-    color: #999 !important;
-    font-weight: normal !important;
-  }
-}
-
-.SidebarSubtitle {
-  &.Announcing {
-    color: #4caf50; /* green */
-  }
-  &.Voting {
-    color: #2196f3; /* blue */
-  }
-  &.Revealing {
-    color: #ff5722; /* red */
-  }
-}
\ No newline at end of file
diff --git a/pioneer/packages/joy-election/src/index.tsx b/pioneer/packages/joy-election/src/index.tsx
index c4206c3aeb..7e6be023af 100644
--- a/pioneer/packages/joy-election/src/index.tsx
+++ b/pioneer/packages/joy-election/src/index.tsx
@@ -1,14 +1,16 @@
 import React from 'react';
 import { Route, Switch } from 'react-router';
 
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
-import { ApiProps } from '@polkadot/react-api/types';
-import { withCalls } from '@polkadot/react-api/with';
+import { I18nProps } from '@polkadot/react-components/types';
+import { RouteProps as AppMainRouteProps } from '@polkadot/apps-routing/types';
+import { withCalls } from '@polkadot/react-api/hoc';
 import { AccountId, Hash } from '@polkadot/types/interfaces';
-import Tabs, { TabItem } from '@polkadot/react-components/Tabs';
+import Tabs from '@polkadot/react-components/Tabs';
+import { TabItem } from '@polkadot/react-components/Tabs/types';
 
 // our app-specific styles
-import './index.css';
+import style from './style';
+import styled from 'styled-components';
 
 // local imports and components
 import translate from './translate';
@@ -17,23 +19,27 @@ import Council from './Council';
 import Applicants from './Applicants';
 import Votes from './Votes';
 import Reveals from './Reveals';
-import { queryToProp } from '@polkadot/joy-utils/index';
+import { queryToProp } from '@polkadot/joy-utils/functions/misc';
 import { Seat } from '@joystream/types/council';
+import { ApiProps } from '@polkadot/react-api/types';
+
+const ElectionMain = styled.main`${style}`;
 
 // define out internal types
-type Props = AppProps & ApiProps & I18nProps & {
+type Props = AppMainRouteProps & ApiProps & I18nProps & {
   activeCouncil?: Seat[];
   applicants?: AccountId[];
   commitments?: Hash[];
 };
 
-type State = {};
+type State = Record<any, never>;
 
 class App extends React.PureComponent<Props, State> {
   state: State = {};
 
   private buildTabs (): TabItem[] {
     const { t, activeCouncil = [], applicants = [], commitments = [] } = this.props;
+
     return [
       {
         isRoot: true,
@@ -58,8 +64,9 @@ class App extends React.PureComponent<Props, State> {
   render () {
     const { basePath } = this.props;
     const tabs = this.buildTabs();
+
     return (
-      <main className='election--App'>
+      <ElectionMain className='election--App'>
         <header>
           <Tabs basePath={basePath} items={tabs} />
         </header>
@@ -70,7 +77,7 @@ class App extends React.PureComponent<Props, State> {
           <Route path={`${basePath}/reveals`} component={Reveals} />
           <Route component={Dashboard} />
         </Switch>
-      </main>
+      </ElectionMain>
     );
   }
 }
diff --git a/pioneer/packages/joy-election/src/myVotesStore.ts b/pioneer/packages/joy-election/src/myVotesStore.ts
index 46a500780f..16921a8b72 100644
--- a/pioneer/packages/joy-election/src/myVotesStore.ts
+++ b/pioneer/packages/joy-election/src/myVotesStore.ts
@@ -1,5 +1,5 @@
 import store from 'store';
-import { nonEmptyArr } from '@polkadot/joy-utils/index';
+import { nonEmptyArr } from '@polkadot/joy-utils/functions/misc';
 
 const MY_VOTES = 'joy.myVotes';
 
@@ -19,23 +19,26 @@ export type SavedVote = NewVote & {
 
 /** Get all votes that are stored in a local sotrage.  */
 export const getAllVotes = (): SavedVote[] => {
-  const votes = store.get(MY_VOTES);
+  const votes = store.get(MY_VOTES) as unknown;
+
   return nonEmptyArr(votes) ? votes as SavedVote[] : [];
 };
 
 export const getVotesByVoter = (voterId: string): SavedVote[] => {
-  return getAllVotes().filter(v => v.voterId === voterId);
+  return getAllVotes().filter((v) => v.voterId === voterId);
 };
 
 export const findVoteByHash = (hash: string): SavedVote | undefined => {
-  return getAllVotes().find(v => v.hash === hash);
+  return getAllVotes().find((v) => v.hash === hash);
 };
 
 export const saveVote = (vote: NewVote): void => {
   const votes = getAllVotes();
-  const similarVote = votes.find(v => v.hash === vote.hash);
+  const similarVote = votes.find((v) => v.hash === vote.hash);
+
   if (similarVote) {
     console.log('There is a vote with the same hash in a storage:', similarVote);
+
     return;
   }
 
@@ -45,7 +48,8 @@ export const saveVote = (vote: NewVote): void => {
 
 export const revealVote = (hash: string): void => {
   const votes = getAllVotes();
-  const savedVote = votes.find(v => v.hash === hash);
+  const savedVote = votes.find((v) => v.hash === hash);
+
   if (savedVote && !savedVote.isRevealed) {
     savedVote.isRevealed = true;
     savedVote.revealedOnTime = Date.now();
diff --git a/pioneer/packages/joy-election/src/style.ts b/pioneer/packages/joy-election/src/style.ts
new file mode 100644
index 0000000000..74bc548645
--- /dev/null
+++ b/pioneer/packages/joy-election/src/style.ts
@@ -0,0 +1,21 @@
+import { css } from 'styled-components';
+
+const style = css`
+  .JoyElection--NotRunning {
+    /* nothing yet */
+  }
+  .JoyElection--Running {
+    font-style: italic;
+    color: green;
+  }
+  .SealedVoteTable {
+    -webkit-box-shadow: 0 1px 2px 0 rgba(34,36,38,.15) !important;
+    box-shadow: 0 1px 2px 0 rgba(34,36,38,.15) !important;
+    tr td:first-child {
+      color: #999 !important;
+      font-weight: normal !important;
+    }
+  }
+`;
+
+export default style;
diff --git a/pioneer/packages/joy-election/src/utils.tsx b/pioneer/packages/joy-election/src/utils.tsx
index 1a82754ee0..812fa652ad 100644
--- a/pioneer/packages/joy-election/src/utils.tsx
+++ b/pioneer/packages/joy-election/src/utils.tsx
@@ -1,10 +1,11 @@
+// TODO: Move to joy-utils?
 import { AccountId } from '@polkadot/types/interfaces';
 
 // Keyring / identicon / address
 // -----------------------------------
 
 import createItem from '@polkadot/ui-keyring/options/item';
-import { findNameByAddress } from '@polkadot/joy-utils/index';
+import { findNameByAddress } from '@polkadot/joy-utils/functions/misc';
 
 // Hash
 // -----------------------------------
@@ -21,16 +22,19 @@ export type HashedVote = {
 
 const createAddressOption = (address: string) => {
   const name = findNameByAddress(address);
+
   return createItem(address, name);
 };
 
-export const accountIdsToOptions = (applicants: Array<AccountId>): any => {
+export const accountIdsToOptions = (applicants: Array<AccountId>) => {
   if (applicants && applicants.length) {
-    return applicants.map(a => {
+    return applicants.map((a) => {
       const addr = a.toString();
+
       return createAddressOption(addr);
     });
   }
+
   return [];
 };
 
@@ -44,10 +48,12 @@ export const hashVote = (accountId?: string | null, salt?: string): string | nul
   const accountU8a = decodeAddress(accountId);
   const saltU8a = stringToU8a(salt);
   const voteU8a = new Uint8Array(accountU8a.length + saltU8a.length);
+
   voteU8a.set(accountU8a);
   voteU8a.set(saltU8a, accountU8a.length);
 
   const hash = blake2AsHex(voteU8a, 256);
+
   // console.log('Vote hash:', hash, 'for', { accountId, salt });
   return hash;
 };
diff --git a/pioneer/packages/joy-forum/.skip-build b/pioneer/packages/joy-forum/.skip-build
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/pioneer/packages/joy-forum/package.json b/pioneer/packages/joy-forum/package.json
index 77cc47c4a2..0836939d24 100644
--- a/pioneer/packages/joy-forum/package.json
+++ b/pioneer/packages/joy-forum/package.json
@@ -7,10 +7,10 @@
   "author": "Joystream contributors",
   "maintainers": [],
   "dependencies": {
-    "@babel/runtime": "^7.7.1",
+    "@babel/runtime": "^7.10.5",
+    "@polkadot/react-components": "0.51.1",
+    "@polkadot/react-query": "0.51.1",
     "@polkadot/joy-utils": "^0.1.1",
-    "@polkadot/react-components": "0.37.0-beta.63",
-    "@polkadot/react-query": "0.37.0-beta.63",
     "lodash": "^4.17.15"
   }
 }
diff --git a/pioneer/packages/joy-forum/src/CategoryList.tsx b/pioneer/packages/joy-forum/src/CategoryList.tsx
index d2a1fb7d1d..e31d865a6d 100644
--- a/pioneer/packages/joy-forum/src/CategoryList.tsx
+++ b/pioneer/packages/joy-forum/src/CategoryList.tsx
@@ -1,26 +1,22 @@
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown';
-import { Table, Dropdown, Button, Segment, Label } from 'semantic-ui-react';
+import { Table, Dropdown, Button, Segment, Label, SemanticICONS, Icon } from 'semantic-ui-react';
 import styled from 'styled-components';
 import orderBy from 'lodash/orderBy';
 import BN from 'bn.js';
-
-import { Option, bool } from '@polkadot/types';
 import { ThreadId } from '@joystream/types/common';
 import { CategoryId, Category, Thread } from '@joystream/types/forum';
 import { ViewThread } from './ViewThread';
-import { MutedSpan } from '@polkadot/joy-utils/MutedText';
+import { MutedSpan, Section, JoyWarn, SemanticTxButton } from '@polkadot/joy-utils/react/components';
 import { UrlHasIdProps, CategoryCrumbs, Pagination, ThreadsPerPage, usePagination } from './utils';
-import Section from '@polkadot/joy-utils/Section';
-import { JoyWarn } from '@polkadot/joy-utils/JoyStatus';
 import { withForumCalls } from './calls';
 import { withMulti, withApi } from '@polkadot/react-api';
 import { ApiProps } from '@polkadot/react-api/types';
-import { bnToStr, isEmptyArr } from '@polkadot/joy-utils/index';
-import TxButton from '@polkadot/joy-utils/TxButton';
+import { bnToStr, isEmptyArr } from '@polkadot/joy-utils/functions/misc';
 import { IfIAmForumSudo } from './ForumSudo';
-import { MemberPreview } from '@polkadot/joy-members/MemberPreview';
+import MemberPreview from '@polkadot/joy-utils/react/components/MemberByAccountPreview';
+import { useApi } from '@polkadot/react-hooks';
 
 type CategoryActionsProps = {
   id: CategoryId;
@@ -29,23 +25,25 @@ type CategoryActionsProps = {
 
 function CategoryActions (props: CategoryActionsProps) {
   const { id, category } = props;
+  const { api } = useApi();
   const className = 'ui button ActionButton';
 
   type BtnProps = {
     label: string;
-    icon?: string;
+    icon?: SemanticICONS;
     archive?: boolean;
     delete?: boolean;
   };
 
   const UpdateCategoryButton = (btnProps: BtnProps) => {
-    return <TxButton
+    return <SemanticTxButton
       className='item'
-      isPrimary={false}
-      label={<><i className={`${btnProps.icon} icon`} />{btnProps.label}</>}
-      params={[id, new Option(bool, btnProps.archive), new Option(bool, btnProps.delete)]}
+      params={[id, api.createType('Option<bool>', btnProps.archive), api.createType('Option<bool>', btnProps.delete)]}
       tx={'forum.updateCategory'}
-    />;
+    >
+      <Icon name={btnProps.icon}/>
+      { btnProps.label }
+    </SemanticTxButton>;
   };
 
   if (category.archived) {
@@ -160,8 +158,9 @@ function InnerViewCategory (props: InnerViewCategoryProps) {
     }
 
     <Segment>
-      <div>
-        <MemberPreview accountId={category.moderator_id} prefixLabel='Creator:' />
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <div style={{ marginRight: '0.5em', color: '#777' }}>Creator:</div>
+        <MemberPreview accountId={category.moderator_id} showCouncilBadge showId={false}/>
       </div>
       <div style={{ marginTop: '1rem' }}>
         <ReactMarkdown className='JoyMemo--full' source={category.description} linkTarget='_blank' />
@@ -207,13 +206,8 @@ type CategoryThreadsProps = ApiProps & InnerCategoryThreadsProps & {
 
 function InnerCategoryThreads (props: CategoryThreadsProps) {
   const { api, category, nextThreadId } = props;
-  const [currentPage, setCurrentPage] = usePagination();
-
-  if (!category.hasUnmoderatedThreads) {
-    return <em>No threads in this category</em>;
-  }
-
   const threadCount = category.num_threads_created.toNumber();
+  const [currentPage, setCurrentPage] = usePagination();
   const [loaded, setLoaded] = useState(false);
   const [threads, setThreads] = useState(new Array<Thread>());
 
@@ -221,16 +215,17 @@ function InnerCategoryThreads (props: CategoryThreadsProps) {
     const loadThreads = async () => {
       if (!nextThreadId || threadCount === 0) return;
 
-      const newId = (id: number | BN) => new ThreadId(id);
+      const newId = (id: number | BN) => api.createType('ThreadId', id);
       const apiCalls: Promise<Thread>[] = [];
       let id = newId(1);
+
       while (nextThreadId.gt(id)) {
         apiCalls.push(api.query.forum.threadById(id) as Promise<Thread>);
         id = newId(id.add(newId(1)));
       }
 
       const allThreads = await Promise.all<Thread>(apiCalls);
-      const threadsInThisCategory = allThreads.filter(item =>
+      const threadsInThisCategory = allThreads.filter((item) =>
         !item.isEmpty &&
         item.category_id.eq(category.id)
       );
@@ -238,9 +233,9 @@ function InnerCategoryThreads (props: CategoryThreadsProps) {
         threadsInThisCategory,
         // TODO UX: Replace sort by id with sort by blocktime of the last reply.
         [
-          x => x.moderated,
+          (x) => x.moderated,
           // x => x.pinned,
-          x => x.nr_in_category.toNumber()
+          (x) => x.nr_in_category.toNumber()
         ],
         [
           'asc',
@@ -253,9 +248,12 @@ function InnerCategoryThreads (props: CategoryThreadsProps) {
       setLoaded(true);
     };
 
-    loadThreads();
+    void loadThreads();
   }, [bnToStr(category.id), bnToStr(nextThreadId)]);
 
+  if (!category.hasUnmoderatedThreads) {
+    return <em>No threads in this category</em>;
+  }
   // console.log({ nextThreadId: bnToStr(nextThreadId), loaded, threads });
 
   if (!loaded) {
@@ -319,8 +317,10 @@ type ViewCategoryByIdProps = UrlHasIdProps & {
 
 export function ViewCategoryById (props: ViewCategoryByIdProps) {
   const { match: { params: { id } } } = props;
+  const { api } = useApi();
+
   try {
-    return <ViewCategory id={new CategoryId(id)} />;
+    return <ViewCategory id={api.createType('CategoryId', id)} />;
   } catch (err) {
     return <em>Invalid category ID: {id}</em>;
   }
@@ -340,16 +340,17 @@ function InnerCategoryList (props: CategoryListProps) {
     const loadCategories = async () => {
       if (!nextCategoryId) return;
 
-      const newId = (id: number | BN) => new CategoryId(id);
+      const newId = (id: number | BN) => api.createType('CategoryId', id);
       const apiCalls: Promise<Category>[] = [];
       let id = newId(1);
+
       while (nextCategoryId.gt(id)) {
         apiCalls.push(api.query.forum.categoryById(id) as Promise<Category>);
         id = newId(id.add(newId(1)));
       }
 
       const allCats = await Promise.all<Category>(apiCalls);
-      const filteredCats = allCats.filter(cat =>
+      const filteredCats = allCats.filter((cat) =>
         !cat.isEmpty &&
         !cat.deleted && // TODO show deleted categories if current user is forum sudo
         (parentId ? parentId.eq(cat.parent_id) : cat.isRoot)
@@ -359,7 +360,7 @@ function InnerCategoryList (props: CategoryListProps) {
       setLoaded(true);
     };
 
-    loadCategories();
+    void loadCategories();
   }, [bnToStr(parentId), bnToStr(nextCategoryId)]);
 
   // console.log({ nextCategoryId: bnToStr(nextCategoryId), loaded, categories });
diff --git a/pioneer/packages/joy-forum/src/Context.tsx b/pioneer/packages/joy-forum/src/Context.tsx
index 02d1495960..9abb71260d 100644
--- a/pioneer/packages/joy-forum/src/Context.tsx
+++ b/pioneer/packages/joy-forum/src/Context.tsx
@@ -2,9 +2,8 @@
 // NOTE: The purpose of this context is to immitate a Substrate storage for the forum until it's implemented as a substrate runtime module.
 
 import React, { useReducer, createContext, useContext } from 'react';
-import { Category, Thread, Reply, ModerationAction } from '@joystream/types/forum';
-import { BlockAndTime } from '@joystream/types/common';
-import { Option, Text, GenericAccountId } from '@polkadot/types';
+import { Category, Thread, Reply } from '@joystream/types/forum';
+import { createType } from '@joystream/types';
 
 type CategoryId = number;
 type ThreadId = number;
@@ -31,17 +30,17 @@ const initialState: ForumState = {
   sudo: undefined,
 
   nextCategoryId: 1,
-  categoryById: new Map(),
+  categoryById: new Map<CategoryId, Category>(),
   rootCategoryIds: [],
-  categoryIdsByParentId: new Map(),
+  categoryIdsByParentId: new Map<CategoryId, CategoryId[]>(),
 
   nextThreadId: 1,
-  threadById: new Map(),
-  threadIdsByCategoryId: new Map(),
+  threadById: new Map<ThreadId, Thread>(),
+  threadIdsByCategoryId: new Map<CategoryId, ThreadId[]>(),
 
   nextReplyId: 1,
-  replyById: new Map(),
-  replyIdsByThreadId: new Map()
+  replyById: new Map<ReplyId, Reply>(),
+  replyIdsByThreadId: new Map<ThreadId, ReplyId[]>()
 };
 
 type SetForumSudo = {
@@ -114,6 +113,7 @@ function reducer (state: ForumState, action: ForumAction): ForumState {
   switch (action.type) {
     case 'SetForumSudo': {
       const { sudo } = action;
+
       return {
         ...state,
         sudo
@@ -133,19 +133,23 @@ function reducer (state: ForumState, action: ForumAction): ForumState {
 
       if (parent_id) {
         let childrenIds = categoryIdsByParentId.get(parent_id.toNumber());
+
         if (!childrenIds) {
           childrenIds = [];
         }
+
         childrenIds.push(nextCategoryId);
         categoryIdsByParentId.set(parent_id.toNumber(), childrenIds);
       } else {
         if (!rootCategoryIds) {
           rootCategoryIds = [];
         }
+
         rootCategoryIds.push(nextCategoryId);
       }
 
       const newId = nextCategoryId;
+
       categoryById.set(newId, category);
       nextCategoryId = nextCategoryId + 1;
 
@@ -183,13 +187,16 @@ function reducer (state: ForumState, action: ForumAction): ForumState {
       } = state;
 
       let threadIds = threadIdsByCategoryId.get(category_id.toNumber());
+
       if (!threadIds) {
         threadIds = [];
         threadIdsByCategoryId.set(category_id.toNumber(), threadIds);
       }
+
       threadIds.push(nextThreadId);
 
       const newId = nextThreadId;
+
       threadById.set(newId, thread);
       nextThreadId = nextThreadId + 1;
 
@@ -220,15 +227,16 @@ function reducer (state: ForumState, action: ForumAction): ForumState {
       const { threadById } = state;
 
       const thread = threadById.get(id) as Thread;
-      const moderation = new ModerationAction({
-        moderated_at: BlockAndTime.newEmpty(),
-        moderator_id: new GenericAccountId(moderator),
-        rationale: new Text(rationale)
+      const moderation = createType('ModerationAction', {
+        moderated_at: createType('BlockAndTime', {}),
+        moderator_id: createType('AccountId', moderator),
+        rationale: createType('Text', rationale)
       });
-      const threadUpd = new Thread(Object.assign(
+      const threadUpd = createType('Thread', Object.assign(
         thread.cloneValues(),
-        { moderation: new Option(ModerationAction, moderation) }
+        { moderation: createType('Option<ModerationAction>', moderation) }
       ));
+
       threadById.set(id, threadUpd);
 
       return {
@@ -248,13 +256,16 @@ function reducer (state: ForumState, action: ForumAction): ForumState {
       } = state;
 
       let replyIds = replyIdsByThreadId.get(thread_id.toNumber());
+
       if (!replyIds) {
         replyIds = [];
         replyIdsByThreadId.set(thread_id.toNumber(), replyIds);
       }
+
       replyIds.push(nextReplyId);
 
       const newId = nextReplyId;
+
       replyById.set(newId, reply);
       nextReplyId = nextReplyId + 1;
 
@@ -285,15 +296,16 @@ function reducer (state: ForumState, action: ForumAction): ForumState {
       const { replyById } = state;
 
       const reply = replyById.get(id) as Reply;
-      const moderation = new ModerationAction({
-        moderated_at: BlockAndTime.newEmpty(),
-        moderator_id: new GenericAccountId(moderator),
-        rationale: new Text(rationale)
+      const moderation = createType('ModerationAction', {
+        moderated_at: createType('BlockAndTime', {}),
+        moderator_id: createType('AccountId', moderator),
+        rationale: createType('Text', rationale)
       });
-      const replyUpd = new Reply(Object.assign(
+      const replyUpd = createType('Reply', Object.assign(
         reply.cloneValues(),
-        { moderation: new Option(ModerationAction, moderation) }
+        { moderation: createType('Option<ModerationAction>', moderation) }
       ));
+
       replyById.set(id, replyUpd);
 
       return {
@@ -323,8 +335,9 @@ const contextStub: ForumContextProps = {
 
 export const ForumContext = createContext<ForumContextProps>(contextStub);
 
-export function ForumProvider (props: React.PropsWithChildren<{}>) {
+export function ForumProvider (props: React.PropsWithChildren<Record<any, unknown>>) {
   const [state, dispatch] = useReducer(reducer, initialState);
+
   return (
     <ForumContext.Provider value={{ state, dispatch }}>
       {props.children}
diff --git a/pioneer/packages/joy-forum/src/EditCategory.tsx b/pioneer/packages/joy-forum/src/EditCategory.tsx
index 96216f2040..d078dc3cc9 100644
--- a/pioneer/packages/joy-forum/src/EditCategory.tsx
+++ b/pioneer/packages/joy-forum/src/EditCategory.tsx
@@ -4,21 +4,20 @@ import { Form, Field, withFormik, FormikProps } from 'formik';
 import * as Yup from 'yup';
 import { History } from 'history';
 
-import TxButton from '@polkadot/joy-utils/TxButton';
+import { TxButton, Section } from '@polkadot/joy-utils/react/components';
 import { SubmittableResult } from '@polkadot/api';
-import { withMulti } from '@polkadot/react-api/with';
+import { withMulti } from '@polkadot/react-api/hoc';
 
-import * as JoyForms from '@polkadot/joy-utils/forms';
-import { Text } from '@polkadot/types';
-import { Option } from '@polkadot/types/codec';
+import * as JoyForms from '@polkadot/joy-utils/react/components/forms';
 import { CategoryId, Category } from '@joystream/types/forum';
-import Section from '@polkadot/joy-utils/Section';
-import { useMyAccount } from '@polkadot/joy-utils/MyAccountContext';
+import { useMyAccount } from '@polkadot/joy-utils/react/hooks';
 import { UrlHasIdProps, CategoryCrumbs } from './utils';
 import { withOnlyForumSudo } from './ForumSudo';
 import { withForumCalls } from './calls';
 import { ValidationProps, withCategoryValidation } from './validation';
 import { TxFailedCallback, TxCallback } from '@polkadot/react-components/Status/types';
+import { createType } from '@joystream/types';
+import { useApi } from '@polkadot/react-hooks';
 
 const buildSchema = (props: ValidationProps) => {
   const {
@@ -92,6 +91,7 @@ const InnerForm = (props: FormProps) => {
 
   const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | null) => {
     setSubmitting(false);
+
     if (txResult == null) {
       // Tx cancelled.
 
@@ -104,12 +104,15 @@ const InnerForm = (props: FormProps) => {
 
     // Get id of newly created category:
     let _id = id;
+
     if (!_id) {
-      _txResult.events.find(event => {
+      _txResult.events.find((event) => {
         const { event: { data, method } } = event;
+
         if (method === 'CategoryCreated') {
           _id = data.toArray()[0] as CategoryId;
         }
+
         return true;
       });
     }
@@ -128,9 +131,9 @@ const InnerForm = (props: FormProps) => {
 
     if (isNew) {
       return [
-        new Option(CategoryId, parentId),
-        new Text(title),
-        new Text(description)
+        createType('Option<CategoryId>', parentId),
+        title,
+        description
       ];
     } else {
       // NOTE: currently update_category doesn't support title and description updates.
@@ -149,10 +152,9 @@ const InnerForm = (props: FormProps) => {
         <Field component='textarea' id='description' name='description' disabled={isSubmitting} rows={3} placeholder={`Describe your ${categoryWord}. You can use Markdown.`} />
       </LabelledField>
 
-      <LabelledField {...props}>
+      <LabelledField {...props} flex>
         <TxButton
           type='submit'
-          size='large'
           label={isNew
             ? `Create a ${categoryWord}`
             : 'Update a category'
@@ -192,7 +194,7 @@ const InnerForm = (props: FormProps) => {
 const EditForm = withFormik<OuterProps, FormValues>({
 
   // Transform outer props into form values
-  mapPropsToValues: props => {
+  mapPropsToValues: (props) => {
     const { parentId, struct } = props;
 
     return {
@@ -204,7 +206,7 @@ const EditForm = withFormik<OuterProps, FormValues>({
 
   validationSchema: buildSchema,
 
-  handleSubmit: values => {
+  handleSubmit: (values) => {
     // do submitting things
   }
 })(InnerForm);
@@ -222,6 +224,7 @@ function FormOrLoading (props: OuterProps) {
   }
 
   const isMyStruct = address === struct.moderator_id.toString();
+
   if (isMyStruct) {
     return <EditForm {...props} />;
   }
@@ -232,8 +235,10 @@ function FormOrLoading (props: OuterProps) {
 function withIdFromUrl (Component: React.ComponentType<OuterProps>) {
   return function (props: UrlHasIdProps) {
     const { match: { params: { id } } } = props;
+    const { api } = useApi();
+
     try {
-      return <Component id={new CategoryId(id)} />;
+      return <Component id={api.createType('CategoryId', id)} />;
     } catch (err) {
       return <em>Invalid category ID: {id}</em>;
     }
@@ -242,8 +247,10 @@ function withIdFromUrl (Component: React.ComponentType<OuterProps>) {
 
 function NewSubcategoryForm (props: UrlHasIdProps & OuterProps) {
   const { match: { params: { id } } } = props;
+  const { api } = useApi();
+
   try {
-    return <EditForm {...props} parentId={new CategoryId(id)} />;
+    return <EditForm {...props} parentId={api.createType('CategoryId', id)} />;
   } catch (err) {
     return <em>Invalid parent category id: {id}</em>;
   }
diff --git a/pioneer/packages/joy-forum/src/EditReply.tsx b/pioneer/packages/joy-forum/src/EditReply.tsx
index 6fd46c994f..8fba9230ef 100644
--- a/pioneer/packages/joy-forum/src/EditReply.tsx
+++ b/pioneer/packages/joy-forum/src/EditReply.tsx
@@ -4,17 +4,16 @@ import styled from 'styled-components';
 import { Form, Field, withFormik, FormikProps } from 'formik';
 import * as Yup from 'yup';
 
-import TxButton from '@polkadot/joy-utils/TxButton';
+import { TxButton, Section } from '@polkadot/joy-utils/react/components';
 import { SubmittableResult } from '@polkadot/api';
-import { withMulti } from '@polkadot/react-api/with';
+import { withMulti } from '@polkadot/react-api/hoc';
 
-import * as JoyForms from '@polkadot/joy-utils/forms';
-import { Text } from '@polkadot/types';
+import * as JoyForms from '@polkadot/joy-utils/react/components/forms';
 import { PostId, ThreadId } from '@joystream/types/common';
 import { Post } from '@joystream/types/forum';
-import { withOnlyMembers } from '@polkadot/joy-utils/MyAccount';
-import Section from '@polkadot/joy-utils/Section';
-import { useMyAccount } from '@polkadot/joy-utils/MyAccountContext';
+import { withOnlyMembers } from '@polkadot/joy-utils/react/hocs/guards';
+
+import { useMyAccount } from '@polkadot/joy-utils/react/hooks';
 import { withForumCalls } from './calls';
 import { ValidationProps, withReplyValidation } from './validation';
 import { TxFailedCallback, TxCallback } from '@polkadot/react-components/Status/types';
@@ -88,6 +87,7 @@ const InnerForm = (props: FormProps) => {
 
   const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | null) => {
     setSubmitting(false);
+
     if (txResult == null) {
       // Tx cancelled.
 
@@ -97,6 +97,7 @@ const InnerForm = (props: FormProps) => {
   const onTxSuccess: TxCallback = (_txResult: SubmittableResult) => {
     setSubmitting(false);
     resetForm();
+
     if (!isNew && onEditSuccess) {
       onEditSuccess();
     }
@@ -105,11 +106,10 @@ const InnerForm = (props: FormProps) => {
   const buildTxParams = () => {
     if (!isValid) return [];
 
-    const textParam = new Text(text);
     if (!id) {
-      return [threadId, textParam];
+      return [threadId, text];
     } else {
-      return [id, textParam];
+      return [id, text];
     }
   };
 
@@ -122,10 +122,9 @@ const InnerForm = (props: FormProps) => {
 
       <LabelledField {...props}>
         <FormActionsContainer>
-          <div>
+          <div style={{ display: 'flex' }}>
             <TxButton
               type='submit'
-              size='large'
               label={isNew
                 ? 'Post a reply'
                 : 'Update a reply'
@@ -165,7 +164,7 @@ const InnerForm = (props: FormProps) => {
 
   const sectionTitle = isNew
     ? 'New reply'
-    : `Edit my reply #${struct?.nr_in_thread}`;
+    : `Edit my reply #${struct?.nr_in_thread.toString() || ''}`;
 
   return (
     <Section className='EditEntityBox' title={sectionTitle}>
@@ -176,6 +175,7 @@ const InnerForm = (props: FormProps) => {
 
 const getQuotedPostString = (post: Post) => {
   const lines = post.current_text.split('\n');
+
   return lines.reduce((acc, line) => {
     return `${acc}> ${line}\n`;
   }, '');
@@ -184,8 +184,9 @@ const getQuotedPostString = (post: Post) => {
 const EditForm = withFormik<OuterProps, FormValues>({
 
   // Transform outer props into form values
-  mapPropsToValues: props => {
+  mapPropsToValues: (props) => {
     const { struct, quotedPost } = props;
+
     return {
       text: struct
         ? struct.current_text
@@ -197,7 +198,7 @@ const EditForm = withFormik<OuterProps, FormValues>({
 
   validationSchema: buildSchema,
 
-  handleSubmit: values => {
+  handleSubmit: (values) => {
     // do submitting things
   }
 })(InnerForm);
@@ -215,6 +216,7 @@ function FormOrLoading (props: OuterProps) {
   }
 
   const isMyStruct = address === struct.author_id.toString();
+
   if (isMyStruct) {
     return <EditForm {...props} threadId={struct.thread_id} />;
   }
diff --git a/pioneer/packages/joy-forum/src/EditThread.tsx b/pioneer/packages/joy-forum/src/EditThread.tsx
index c9c510eed2..546529767c 100644
--- a/pioneer/packages/joy-forum/src/EditThread.tsx
+++ b/pioneer/packages/joy-forum/src/EditThread.tsx
@@ -6,21 +6,21 @@ import { Form, Field, withFormik, FormikProps } from 'formik';
 import * as Yup from 'yup';
 import { History } from 'history';
 
-import TxButton from '@polkadot/joy-utils/TxButton';
+import { TxButton, Section } from '@polkadot/joy-utils/react/components';
 import { SubmittableResult } from '@polkadot/api';
-import { withMulti } from '@polkadot/react-api/with';
+import { withMulti } from '@polkadot/react-api/hoc';
 
-import * as JoyForms from '@polkadot/joy-utils/forms';
-import { Text } from '@polkadot/types';
+import * as JoyForms from '@polkadot/joy-utils/react/components/forms';
 import { ThreadId } from '@joystream/types/common';
 import { Thread, CategoryId } from '@joystream/types/forum';
-import { withOnlyMembers } from '@polkadot/joy-utils/MyAccount';
-import Section from '@polkadot/joy-utils/Section';
-import { useMyAccount } from '@polkadot/joy-utils/MyAccountContext';
+import { withOnlyMembers } from '@polkadot/joy-utils/react/hocs/guards';
+
+import { useMyAccount } from '@polkadot/joy-utils/react/hooks';
 import { UrlHasIdProps, CategoryCrumbs } from './utils';
 import { withForumCalls } from './calls';
 import { ValidationProps, withThreadValidation } from './validation';
 import { TxFailedCallback, TxCallback } from '@polkadot/react-components/Status/types';
+import { useApi } from '@polkadot/react-hooks';
 
 const buildSchema = (props: ValidationProps) => {
   const {
@@ -96,6 +96,7 @@ const InnerForm = (props: FormProps) => {
 
   const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | null) => {
     setSubmitting(false);
+
     if (txResult == null) {
       // Tx cancelled.
 
@@ -108,12 +109,15 @@ const InnerForm = (props: FormProps) => {
 
     // Get id of newly created thread:
     let _id = id;
+
     if (!_id) {
-      _txResult.events.find(event => {
+      _txResult.events.find((event) => {
         const { event: { data, method } } = event;
+
         if (method === 'ThreadCreated') {
           _id = data.toArray()[0] as ThreadId;
         }
+
         return true;
       });
     }
@@ -141,8 +145,8 @@ const InnerForm = (props: FormProps) => {
     if (isNew) {
       return [
         resolvedCategoryId,
-        new Text(title),
-        new Text(text)
+        title,
+        text
       ];
     } else {
       // NOTE: currently forum SRML doesn't support thread update.
@@ -179,10 +183,9 @@ const InnerForm = (props: FormProps) => {
         <Field component='textarea' id='text' name='text' disabled={isSubmitting} rows={5} placeholder='Type here. You can use Markdown.' />
       </LabelledField>
 
-      <LabelledField {...props}>
+      <LabelledField {...props} flex>
         <TxButton
           type='submit'
-          size='large'
           label={isNew
             ? 'Create a thread'
             : 'Update a thread'
@@ -222,7 +225,7 @@ const InnerForm = (props: FormProps) => {
 const EditForm = withFormik<OuterProps, FormValues>({
 
   // Transform outer props into form values
-  mapPropsToValues: props => {
+  mapPropsToValues: (props) => {
     return {
       // pinned: struct && struct.pinned || false,
       title: '',
@@ -232,7 +235,7 @@ const EditForm = withFormik<OuterProps, FormValues>({
 
   validationSchema: buildSchema,
 
-  handleSubmit: values => {
+  handleSubmit: (values) => {
     // do submitting things
   }
 })(InnerForm);
@@ -250,6 +253,7 @@ function FormOrLoading (props: OuterProps) {
   }
 
   const isMyStruct = address === struct.author_id.toString();
+
   if (isMyStruct) {
     return <EditForm {...props} />;
   }
@@ -260,8 +264,10 @@ function FormOrLoading (props: OuterProps) {
 function withCategoryIdFromUrl (Component: React.ComponentType<OuterProps>) {
   return function (props: UrlHasIdProps) {
     const { match: { params: { id } } } = props;
+    const { api } = useApi();
+
     try {
-      return <Component {...props} categoryId={new CategoryId(id)} />;
+      return <Component {...props} categoryId={api.createType('CategoryId', id)} />;
     } catch (err) {
       return <em>Invalid category ID: {id}</em>;
     }
@@ -271,8 +277,10 @@ function withCategoryIdFromUrl (Component: React.ComponentType<OuterProps>) {
 function withIdFromUrl (Component: React.ComponentType<OuterProps>) {
   return function (props: UrlHasIdProps) {
     const { match: { params: { id } } } = props;
+    const { api } = useApi();
+
     try {
-      return <Component {...props} id={new ThreadId(id)} />;
+      return <Component {...props} id={api.createType('ThreadId', id)} />;
     } catch (err) {
       return <em>Invalid thread ID: {id}</em>;
     }
diff --git a/pioneer/packages/joy-forum/src/ForumRoot.tsx b/pioneer/packages/joy-forum/src/ForumRoot.tsx
index 0345417730..18850c256f 100644
--- a/pioneer/packages/joy-forum/src/ForumRoot.tsx
+++ b/pioneer/packages/joy-forum/src/ForumRoot.tsx
@@ -4,13 +4,13 @@ import styled from 'styled-components';
 import { orderBy } from 'lodash';
 import BN from 'bn.js';
 
-import Section from '@polkadot/joy-utils/Section';
+import { Section } from '@polkadot/joy-utils/react/components';
 import { withMulti, withApi } from '@polkadot/react-api';
 import { PostId } from '@joystream/types/common';
 import { Post, Thread } from '@joystream/types/forum';
-import { bnToStr } from '@polkadot/joy-utils/';
+import { bnToStr } from '@polkadot/joy-utils/functions/misc';
 import { ApiProps } from '@polkadot/react-api/types';
-import { MemberPreview } from '@polkadot/joy-members/MemberPreview';
+import MemberPreview from '@polkadot/joy-utils/react/components/MemberByAccountPreview';
 
 import { CategoryCrumbs, RecentActivityPostsCount, ReplyIdxQueryParam, TimeAgoDate } from './utils';
 import { withForumCalls } from './calls';
@@ -21,7 +21,7 @@ const ForumRoot: React.FC = () => {
     <>
       <CategoryCrumbs root />
       <RecentActivity />
-      <Section title="Top categories">
+      <Section title='Top categories'>
         <CategoryList />
       </Section>
     </>
@@ -62,9 +62,10 @@ const InnerRecentActivity: React.FC<RecentActivityProps> = ({ nextPostId, api })
     const loadPosts = async () => {
       if (!nextPostId) return;
 
-      const newId = (id: number | BN) => new PostId(id);
+      const newId = (id: number | BN) => api.createType('PostId', id);
       const apiCalls: Promise<Post>[] = [];
       let id = newId(1);
+
       while (nextPostId.gt(id)) {
         apiCalls.push(api.query.forum.postById(id) as Promise<Post>);
         id = newId(id.add(newId(1)));
@@ -73,16 +74,18 @@ const InnerRecentActivity: React.FC<RecentActivityProps> = ({ nextPostId, api })
       const allPosts = await Promise.all(apiCalls);
       const sortedPosts = orderBy(
         allPosts,
-        [x => x.id.toNumber()],
+        [(x) => x.id.toNumber()],
         ['desc']
       );
 
       const threadsIdsLookup = {} as Record<number, boolean>;
       const postsWithUniqueThreads = sortedPosts.reduce((acc, post) => {
         const threadId = post.thread_id.toNumber();
+
         if (threadsIdsLookup[threadId]) return acc;
 
         threadsIdsLookup[threadId] = true;
+
         return [
           ...acc,
           post
@@ -90,22 +93,24 @@ const InnerRecentActivity: React.FC<RecentActivityProps> = ({ nextPostId, api })
       }, [] as Post[]);
 
       const recentUniquePosts = postsWithUniqueThreads.slice(0, RecentActivityPostsCount);
+
       setRecentPosts(recentUniquePosts);
       setLoaded(true);
     };
 
-    loadPosts();
+    void loadPosts();
   }, [bnToStr(nextPostId)]);
 
   useEffect(() => {
     const loadThreads = async () => {
       const apiCalls: Promise<Thread>[] = recentPosts
-        .filter(p => !threadsLookup[p.thread_id.toNumber()])
-        .map(p => api.query.forum.threadById(p.thread_id) as Promise<Thread>);
+        .filter((p) => !threadsLookup[p.thread_id.toNumber()])
+        .map((p) => api.query.forum.threadById(p.thread_id) as Promise<Thread>);
 
       const threads = await Promise.all(apiCalls);
       const newThreadsLookup = threads.reduce((acc, thread) => {
         acc[thread.id.toNumber()] = thread;
+
         return acc;
       }, {} as Record<number, Thread>);
       const newLookup = {
@@ -116,21 +121,23 @@ const InnerRecentActivity: React.FC<RecentActivityProps> = ({ nextPostId, api })
       setThreadsLookup(newLookup);
     };
 
-    loadThreads();
+    void loadThreads();
   }, [recentPosts]);
 
   const renderSectionContent = () => {
     if (!loaded) {
       return <i>Loading recent activity...</i>;
     }
+
     if (loaded && !recentPosts.length) {
       return <span>No recent activity</span>;
     }
 
-    return recentPosts.map(p => {
+    return recentPosts.map((p) => {
       const threadId = p.thread_id.toNumber();
 
       const postLinkSearch = new URLSearchParams();
+
       postLinkSearch.set(ReplyIdxQueryParam, p.nr_in_thread.toString());
       const postLinkPathname = `/forum/threads/${threadId}`;
 
@@ -138,7 +145,7 @@ const InnerRecentActivity: React.FC<RecentActivityProps> = ({ nextPostId, api })
 
       return (
         <RecentActivityEntry key={p.id.toNumber()}>
-          <StyledMemberPreview accountId={p.author_id} inline />
+          <StyledMemberPreview accountId={p.author_id} size='small' showId={false}/>
           posted in
           {thread && (
             <StyledPostLink to={{ pathname: postLinkPathname, search: postLinkSearch.toString() }}>{thread.title}</StyledPostLink>
@@ -150,7 +157,7 @@ const InnerRecentActivity: React.FC<RecentActivityProps> = ({ nextPostId, api })
   };
 
   return (
-    <Section title="Recent activity">
+    <Section title='Recent activity'>
       {renderSectionContent()}
     </Section>
   );
diff --git a/pioneer/packages/joy-forum/src/ForumSudo.tsx b/pioneer/packages/joy-forum/src/ForumSudo.tsx
index c0edbc19ef..5a335eb603 100644
--- a/pioneer/packages/joy-forum/src/ForumSudo.tsx
+++ b/pioneer/packages/joy-forum/src/ForumSudo.tsx
@@ -1,169 +1,15 @@
-import React, { useState, useContext, createContext } from 'react';
-import { Button } from 'semantic-ui-react';
-import { Form, Field, withFormik, FormikProps, FieldProps } from 'formik';
-import * as Yup from 'yup';
+import React, { useContext, createContext } from 'react';
 
-import TxButton from '@polkadot/joy-utils/TxButton';
-import { SubmittableResult } from '@polkadot/api';
-import { InputAddress } from '@polkadot/react-components/index';
-import { withMulti } from '@polkadot/react-api/with';
+import { JoyError } from '@polkadot/joy-utils/react/components';
+import { withMulti } from '@polkadot/react-api/hoc';
 
-import * as JoyForms from '@polkadot/joy-utils/forms';
 import { Option } from '@polkadot/types/codec';
-import Section from '@polkadot/joy-utils/Section';
-import { useMyAccount } from '@polkadot/joy-utils/MyAccountContext';
-import { withOnlySudo } from '@polkadot/joy-utils/Sudo';
-import { AccountId } from '@polkadot/types/interfaces';
-import { JoyError } from '@polkadot/joy-utils/JoyStatus';
-import AddressMini from '@polkadot/react-components/AddressMiniJoy';
-import { withForumCalls } from './calls';
-import { TxFailedCallback, TxCallback } from '@polkadot/react-components/Status/types';
-
-const buildSchema = () => Yup.object().shape({});
-
-type OuterProps = {
-  currentSudo?: string;
-};
-
-type FormValues = {
-  sudo?: string;
-};
-
-type FormProps = OuterProps & FormikProps<FormValues>;
-
-const LabelledField = JoyForms.LabelledField<FormValues>();
-
-const InnerForm = (props: FormProps) => {
-  const {
-    currentSudo,
-    values,
-    dirty,
-    isValid,
-    isSubmitting,
-    setSubmitting
-  } = props;
-
-  const {
-    sudo
-  } = values;
-
-  const [showSelector, setShowSelector] = useState(false);
-
-  const resetForm = () => {
-    setShowSelector(false);
-    props.resetForm();
-  };
-
-  const onSubmit = (sendTx: () => void) => {
-    if (isValid) sendTx();
-  };
-
-  const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | null) => {
-    setSubmitting(false);
-    if (txResult == null) {
-      // Tx cancelled.
-
-    }
-  };
-
-  const onTxSuccess: TxCallback = (_txResult: SubmittableResult) => {
-    setSubmitting(false);
-    resetForm();
-  };
-
-  const isNotSet = currentSudo === undefined;
-
-  const buildTxParams = () => {
-    if (!isValid) return [];
-    return [new Option('AccountId', sudo)];
-  };
-
-  type SudoInputAddressProps = FieldProps<FormValues>; /* & InputAddressProps */
-
-  const SudoInputAddress = ({ field, form, ...props }: SudoInputAddressProps) => {
-    const { name, value } = field;
-
-    const onChange = (address: string | null) => {
-      address !== value && form.setFieldValue(name, address);
-    };
-
-    return (
-      <InputAddress
-        {...props}
-        // name={name}
-        value={value}
-        onChange={onChange}
-        withLabel={false}
-      />
-    );
-  };
-
-  const form = () => (
-    <Form className='ui form JoyForm EditEntityForm'>
-
-      <LabelledField name='sudo' {...props}>
-        <Field component={SudoInputAddress} id='sudo' name='sudo' disabled={isSubmitting} />
-      </LabelledField>
-
-      <LabelledField {...props}>
-        <TxButton
-          type='submit'
-          size='large'
-          label={isNotSet
-            ? 'Set forum sudo'
-            : 'Update forum sudo'
-          }
-          isDisabled={!dirty || isSubmitting}
-          params={buildTxParams()}
-          tx={'forum.setForumSudo'}
-          onClick={onSubmit}
-          txFailedCb={onTxFailed}
-          txSuccessCb={onTxSuccess}
-        />
-        <Button
-          type='button'
-          size='large'
-          disabled={!dirty || isSubmitting}
-          onClick={resetForm}
-          content='Reset form'
-        />
-      </LabelledField>
-    </Form>
-  );
-
-  return showSelector
-    ? (
-      <Section className='EditEntityBox'>
-        {form()}
-      </Section>
-    )
-    : (<>
-      {currentSudo && <p><AddressMini value={currentSudo} /></p>}
-      <Button
-        type='button'
-        size='large'
-        onClick={() => setShowSelector(true)}
-        content={`${currentSudo ? 'Edit' : 'Set'} forum sudo`}
-      />
-    </>);
-};
-
-const EditForm = withFormik<OuterProps, FormValues>({
-
-  // Transform outer props into form values
-  mapPropsToValues: props => {
-    const { currentSudo } = props;
-    return {
-      sudo: currentSudo
-    };
-  },
 
-  validationSchema: buildSchema,
+import { useMyAccount } from '@polkadot/joy-utils/react/hooks';
+import { AccountId } from '@polkadot/types/interfaces';
 
-  handleSubmit: values => {
-    // do submitting things
-  }
-})(InnerForm);
+import AddressMini from '@polkadot/react-components/AddressMini';
+import { withForumCalls } from './calls';
 
 type LoadStructProps = {
   structOpt: Option<AccountId>;
@@ -173,25 +19,10 @@ const withLoadForumSudo = withForumCalls<LoadStructProps>(
   ['forumSudo', { propName: 'structOpt' }]
 );
 
-function InjectCurrentSudo (props: LoadStructProps) {
-  const { structOpt } = props;
-  if (!structOpt) {
-    return <em>Loading forum sudo...</em>;
-  }
-
-  const sudo = structOpt.isSome ? structOpt.unwrap().toString() : undefined;
-  return <EditForm currentSudo={sudo} />;
-}
-
-export const EditForumSudo = withMulti(
-  InjectCurrentSudo,
-  withOnlySudo,
-  withLoadForumSudo
-);
-
 function innerWithOnlyForumSudo<P extends LoadStructProps> (Component: React.ComponentType<P>) {
   return function (props: P) {
     const { structOpt } = props;
+
     if (!structOpt) {
       return <em>Loading forum sudo...</em>;
     }
@@ -213,7 +44,7 @@ function innerWithOnlyForumSudo<P extends LoadStructProps> (Component: React.Com
   };
 }
 
-export function withOnlyForumSudo<P extends {}> (Component: React.ComponentType<P>) {
+export function withOnlyForumSudo<P extends Record<string, unknown>> (Component: React.ComponentType<P>) {
   return withMulti(
     Component,
     withLoadForumSudo,
@@ -230,6 +61,7 @@ export const ForumSudoContext = createContext<ForumSudoContextProps>({});
 export function InnerForumSudoProvider (props: React.PropsWithChildren<LoadStructProps>) {
   const { structOpt } = props;
   const forumSudo = structOpt ? structOpt.unwrapOr(undefined) : undefined;
+
   return (
     <ForumSudoContext.Provider value={{ forumSudo }}>
       {props.children}
@@ -246,9 +78,10 @@ export function useForumSudo () {
   return useContext(ForumSudoContext);
 }
 
-export const IfIAmForumSudo = (props: React.PropsWithChildren<any>) => {
+export const IfIAmForumSudo = (props: React.PropsWithChildren<Record<any, unknown>>) => {
   const { forumSudo } = useForumSudo();
   const { state: { address: myAddress } } = useMyAccount();
   const iAmForumSudo: boolean = forumSudo !== undefined && forumSudo.eq(myAddress);
-  return iAmForumSudo ? props.children : null;
+
+  return iAmForumSudo ? <>{props.children}</> : null;
 };
diff --git a/pioneer/packages/joy-forum/src/LegacyPagingRedirect.tsx b/pioneer/packages/joy-forum/src/LegacyPagingRedirect.tsx
index e2d5949807..eb39ce3894 100644
--- a/pioneer/packages/joy-forum/src/LegacyPagingRedirect.tsx
+++ b/pioneer/packages/joy-forum/src/LegacyPagingRedirect.tsx
@@ -5,6 +5,7 @@ export const LegacyPagingRedirect: React.FC = () => {
   const { pathname } = useLocation();
   const parsingRegexp = /(.+)\/page\/(\d+)/;
   const groups = parsingRegexp.exec(pathname);
+
   if (!groups) {
     return <em>Failed to parse the URL</em>;
   }
@@ -12,6 +13,8 @@ export const LegacyPagingRedirect: React.FC = () => {
   const basePath = groups[1];
   const page = groups[2];
   const search = new URLSearchParams();
+
   search.set('page', page);
+
   return <Redirect to={{ pathname: basePath, search: search.toString() }} />;
 };
diff --git a/pioneer/packages/joy-forum/src/Moderate.tsx b/pioneer/packages/joy-forum/src/Moderate.tsx
index e8843c199a..e6a54e0617 100644
--- a/pioneer/packages/joy-forum/src/Moderate.tsx
+++ b/pioneer/packages/joy-forum/src/Moderate.tsx
@@ -3,15 +3,14 @@ import { Button } from 'semantic-ui-react';
 import { Form, Field, withFormik, FormikProps } from 'formik';
 import * as Yup from 'yup';
 
-import TxButton from '@polkadot/joy-utils/TxButton';
+import { TxButton, Section } from '@polkadot/joy-utils/react/components';
 import { SubmittableResult } from '@polkadot/api';
-import { withMulti } from '@polkadot/react-api/with';
+import { withMulti } from '@polkadot/react-api/hoc';
 
-import * as JoyForms from '@polkadot/joy-utils/forms';
-import { Text } from '@polkadot/types';
+import * as JoyForms from '@polkadot/joy-utils/react/components/forms';
 import { ThreadId } from '@joystream/types/common';
 import { ReplyId } from '@joystream/types/forum';
-import Section from '@polkadot/joy-utils/Section';
+
 import { withOnlyForumSudo } from './ForumSudo';
 import { ValidationProps, withPostModerationValidation } from './validation';
 import { TxFailedCallback, TxCallback } from '@polkadot/react-components/Status/types';
@@ -74,6 +73,7 @@ const InnerForm = (props: FormProps) => {
 
   const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | null) => {
     setSubmitting(false);
+
     if (txResult == null) {
       // Tx cancelled.
 
@@ -90,11 +90,10 @@ const InnerForm = (props: FormProps) => {
   const buildTxParams = () => {
     if (!isValid) return [];
 
-    const rationaleParam = new Text(rationale);
     if (isThread) {
-      return [id, rationaleParam];
+      return [id, rationale];
     } else {
-      return [id, rationaleParam];
+      return [id, rationale];
     }
   };
 
@@ -105,10 +104,9 @@ const InnerForm = (props: FormProps) => {
         <Field component='textarea' id='rationale' name='rationale' disabled={isSubmitting} rows={5} placeholder='Type a retionale here. You can use Markdown.' />
       </LabelledField>
 
-      <LabelledField {...props}>
+      <LabelledField {...props} flex>
         <TxButton
           type='submit'
-          size='large'
           label={'Moderate'}
           isDisabled={!dirty || isSubmitting}
           params={buildTxParams()}
@@ -144,7 +142,7 @@ const InnerForm = (props: FormProps) => {
 const EditForm = withFormik<OuterProps, FormValues>({
 
   // Transform outer props into form values
-  mapPropsToValues: _props => {
+  mapPropsToValues: (_props) => {
     return {
       rationale: ''
     };
@@ -152,7 +150,7 @@ const EditForm = withFormik<OuterProps, FormValues>({
 
   validationSchema: buildSchema,
 
-  handleSubmit: values => {
+  handleSubmit: (values) => {
     // do submitting things
   }
 })(InnerForm);
diff --git a/pioneer/packages/joy-forum/src/ViewReply.tsx b/pioneer/packages/joy-forum/src/ViewReply.tsx
index edb1ea75e6..f87db33aa8 100644
--- a/pioneer/packages/joy-forum/src/ViewReply.tsx
+++ b/pioneer/packages/joy-forum/src/ViewReply.tsx
@@ -6,10 +6,10 @@ import { Button, Icon } from 'semantic-ui-react';
 
 import { Post, Category, Thread } from '@joystream/types/forum';
 import { Moderate } from './Moderate';
-import { JoyWarn } from '@polkadot/joy-utils/JoyStatus';
-import { useMyAccount } from '@polkadot/joy-utils/MyAccountContext';
+import { JoyWarn } from '@polkadot/joy-utils/react/components';
+import { useMyAccount } from '@polkadot/joy-utils/react/hooks';
 import { IfIAmForumSudo } from './ForumSudo';
-import { MemberPreview } from '@polkadot/joy-members/MemberPreview';
+import MemberPreview from '@polkadot/joy-utils/react/components/MemberByAccountPreview';
 import { TimeAgoDate, ReplyIdxQueryParam } from './utils';
 
 const HORIZONTAL_PADDING = '1em';
@@ -96,43 +96,46 @@ export const ViewReply = React.forwardRef((props: ViewReplyProps, ref: React.Ref
     if (reply.moderated || thread.moderated || category.archived || category.deleted) {
       return null;
     }
+
     const isMyPost = reply.author_id.eq(myAddress);
+
     return <ReplyFooterActionsRow>
       <div>
         {isMyPost &&
-          <Button onClick={onEdit} size="mini">
-            <Icon name="pencil" />
+          <Button onClick={onEdit} size='mini'>
+            <Icon name='pencil' />
             Edit
           </Button>
         }
 
         <IfIAmForumSudo>
           <Button
-            size="mini"
+            size='mini'
             onClick={() => setShowModerateForm(!showModerateForm)}
           >
             Moderate
           </Button>
         </IfIAmForumSudo>
       </div>
-      <Button onClick={onQuote} size="mini">
-        <Icon name="quote left" />
+      <Button onClick={onQuote} size='mini'>
+        <Icon name='quote left' />
         Quote
       </Button>
     </ReplyFooterActionsRow>;
   };
 
   const replyLinkSearch = new URLSearchParams(search);
+
   replyLinkSearch.set(ReplyIdxQueryParam, reply.nr_in_thread.toString());
 
   return (
-    <ReplyContainer className="ui segment" ref={ref} selected={selected}>
+    <ReplyContainer className='ui segment' ref={ref} selected={selected}>
       <ReplyHeader>
         <ReplyHeaderAuthorRow>
-          <MemberPreview accountId={reply.author_id} />
+          <MemberPreview accountId={reply.author_id} showCouncilBadge showId={false}/>
         </ReplyHeaderAuthorRow>
         <ReplyHeaderDetailsRow>
-          <TimeAgoDate date={reply.created_at.momentDate} id={reply.id} />
+          <TimeAgoDate date={reply.created_at.momentDate} id={reply.id.toString()} />
           <Link to={{ pathname, search: replyLinkSearch.toString() }}>
             #{reply.nr_in_thread.toNumber()}
           </Link>
diff --git a/pioneer/packages/joy-forum/src/ViewThread.tsx b/pioneer/packages/joy-forum/src/ViewThread.tsx
index 95130a6cd5..bc49862253 100644
--- a/pioneer/packages/joy-forum/src/ViewThread.tsx
+++ b/pioneer/packages/joy-forum/src/ViewThread.tsx
@@ -1,26 +1,27 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, RouteComponentProps } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown';
 import styled from 'styled-components';
 import { Table, Button, Label, Icon } from 'semantic-ui-react';
 import BN from 'bn.js';
 
-import { ThreadId, PostId } from '@joystream/types/common';
+import { ThreadId } from '@joystream/types/common';
 import { Category, Thread, Post } from '@joystream/types/forum';
 import { Pagination, RepliesPerPage, CategoryCrumbs, TimeAgoDate, usePagination, useQueryParam, ReplyIdxQueryParam, ReplyEditIdQueryParam } from './utils';
 import { ViewReply } from './ViewReply';
 import { Moderate } from './Moderate';
-import { MutedSpan } from '@polkadot/joy-utils/MutedText';
-import { JoyWarn } from '@polkadot/joy-utils/JoyStatus';
+import { MutedSpan, JoyWarn } from '@polkadot/joy-utils/react/components';
+
 import { withForumCalls } from './calls';
 import { withApi, withMulti } from '@polkadot/react-api';
 import { ApiProps } from '@polkadot/react-api/types';
 import { orderBy } from 'lodash';
-import { bnToStr } from '@polkadot/joy-utils/index';
+import { bnToStr } from '@polkadot/joy-utils/functions/misc';
 import { IfIAmForumSudo } from './ForumSudo';
-import { MemberPreview } from '@polkadot/joy-members/MemberPreview';
+import MemberPreview from '@polkadot/joy-utils/react/components/MemberByAccountPreview';
 import { formatDate } from '@polkadot/joy-utils/functions/date';
 import { NewReply, EditReply } from './EditReply';
+import { useApi } from '@polkadot/react-hooks';
 
 type ThreadTitleProps = {
   thread: Thread;
@@ -29,6 +30,7 @@ type ThreadTitleProps = {
 
 function ThreadTitle (props: ThreadTitleProps) {
   const { thread, className } = props;
+
   return <span className={className}>
     {/* {thread.pinned && <i
       className='star icon'
@@ -68,14 +70,7 @@ const ThreadInfo = styled.span`
 `;
 
 const ThreadInfoMemberPreview = styled(MemberPreview)`
-  && {
-    margin: 0 .2rem;
-
-    .PrefixLabel {
-      color: inherit;
-      margin-right: .2rem;
-    }
-  }
+  margin: 0 .5rem;
 `;
 
 const ReplyEditContainer = styled.div`
@@ -110,7 +105,7 @@ const ThreadPreview: React.FC<ThreadPreviewProps> = ({ thread, repliesCount }) =
         {repliesCount}
       </Table.Cell>
       <Table.Cell>
-        <MemberPreview accountId={thread.author_id} />
+        <MemberPreview accountId={thread.author_id} showCouncilBadge showId={false}/>
       </Table.Cell>
       <Table.Cell>
         {formatDate(thread.created_at.momentDate)}
@@ -144,72 +139,47 @@ function InnerViewThread (props: ViewThreadProps) {
   const parsedSelectedPostIdx = rawSelectedPostIdx ? parseInt(rawSelectedPostIdx) : null;
   const selectedPostIdx = (parsedSelectedPostIdx && !Number.isNaN(parsedSelectedPostIdx)) ? parsedSelectedPostIdx : null;
 
-  const { category, thread, preview = false } = props;
+  const { category, thread, preview = false, api, nextPostId } = props;
 
-  const editedPostId = rawEditedPostId && new PostId(rawEditedPostId);
-
-  if (!thread) {
-    return <em>Loading thread details...</em>;
-  }
-
-  const renderThreadNotFound = () => (
-    preview ? null : <em>Thread not found</em>
-  );
-
-  if (thread.isEmpty) {
-    return renderThreadNotFound();
-  }
+  const editedPostId = rawEditedPostId && api.createType('PostId', rawEditedPostId);
 
   const { id } = thread;
   const totalPostsInThread = thread.num_posts_ever_created.toNumber();
 
-  const changePageAndClearSelectedPost = (page?: number | string) => {
-    setSelectedPostIdx(null);
-    setCurrentPage(page, [ReplyIdxQueryParam]);
-  };
-
-  if (!category) {
-    return <em>{'Thread\'s category was not found.'}</em>;
-  } else if (category.deleted) {
-    return renderThreadNotFound();
-  }
-
-  if (preview) {
-    return <ThreadPreview thread={thread} repliesCount={totalPostsInThread - 1} />;
-  }
-
-  const { api, nextPostId } = props;
   const [loaded, setLoaded] = useState(false);
   const [posts, setPosts] = useState(new Array<Post>());
 
   // fetch posts
   useEffect(() => {
     const loadPosts = async () => {
-      if (!nextPostId || totalPostsInThread === 0) return;
+      if (!nextPostId || totalPostsInThread === 0 || thread.isEmpty) return;
 
-      const newId = (id: number | BN) => new PostId(id);
+      const newId = (id: number | BN) => api.createType('PostId', id);
       const apiCalls: Promise<Post>[] = [];
       let id = newId(1);
+
       while (nextPostId.gt(id)) {
         apiCalls.push(api.query.forum.postById(id) as Promise<Post>);
         id = newId(id.add(newId(1)));
       }
 
       const allPosts = await Promise.all<Post>(apiCalls);
-      const postsInThisThread = allPosts.filter(item =>
+      const postsInThisThread = allPosts.filter((item) =>
         !item.isEmpty &&
         item.thread_id.eq(thread.id)
       );
       const sortedPosts = orderBy(
         postsInThisThread,
-        [x => x.nr_in_thread.toNumber()],
+        [(x) => x.nr_in_thread.toNumber()],
         ['asc']
       );
 
       // initialize refs for posts
       postsRefs.current = sortedPosts.reduce((acc, reply) => {
         const refKey = reply.nr_in_thread.toNumber();
+
         acc[refKey] = React.createRef();
+
         return acc;
       }, postsRefs.current);
 
@@ -217,7 +187,7 @@ function InnerViewThread (props: ViewThreadProps) {
       setLoaded(true);
     };
 
-    loadPosts();
+    void loadPosts();
   }, [bnToStr(thread.id), bnToStr(nextPostId)]);
 
   // handle selected post
@@ -225,14 +195,17 @@ function InnerViewThread (props: ViewThreadProps) {
     if (!selectedPostIdx) return;
 
     const selectedPostPage = Math.ceil(selectedPostIdx / RepliesPerPage);
+
     if (currentPage !== selectedPostPage) {
       setCurrentPage(selectedPostPage);
     }
 
     if (!loaded) return;
+
     if (selectedPostIdx > posts.length) {
       // eslint-disable-next-line no-console
       console.warn(`Tried to open nonexistent reply with idx: ${selectedPostIdx}`);
+
       return;
     }
 
@@ -255,9 +228,33 @@ function InnerViewThread (props: ViewThreadProps) {
     const minIdx = (currentPage - 1) * RepliesPerPage;
     const maxIdx = minIdx + RepliesPerPage - 1;
     const postsToDisplay = posts.filter((_id, i) => i >= minIdx && i <= maxIdx);
+
     setDisplayedPosts(postsToDisplay);
   }, [loaded, posts, currentPage]);
 
+  const renderThreadNotFound = () => (
+    preview ? null : <em>Thread not found</em>
+  );
+
+  if (thread.isEmpty) {
+    return renderThreadNotFound();
+  }
+
+  if (!category) {
+    return <em>{'Thread\'s category was not found.'}</em>;
+  } else if (category.deleted) {
+    return renderThreadNotFound();
+  }
+
+  if (preview) {
+    return <ThreadPreview thread={thread} repliesCount={totalPostsInThread - 1} />;
+  }
+
+  const changePageAndClearSelectedPost = (page?: number | string) => {
+    setSelectedPostIdx(null);
+    setCurrentPage(page, [ReplyIdxQueryParam]);
+  };
+
   const scrollToReplyForm = () => {
     if (!replyFormRef.current) return;
     replyFormRef.current.scrollIntoView();
@@ -277,11 +274,12 @@ function InnerViewThread (props: ViewThreadProps) {
     if (!editedPostId) {
       // eslint-disable-next-line no-console
       console.error('editedPostId not set!');
+
       return;
     }
 
     const updatedPost = await api.query.forum.postById(editedPostId) as Post;
-    const updatedPosts = posts.map(post => post.id.eq(editedPostId) ? updatedPost : post);
+    const updatedPosts = posts.map((post) => post.id.eq(editedPostId) ? updatedPost : post);
 
     setPosts(updatedPosts);
     clearEditedPost();
@@ -340,9 +338,10 @@ function InnerViewThread (props: ViewThreadProps) {
     if (thread.moderated || category.archived || category.deleted) {
       return null;
     }
+
     return <span className='JoyInlineActions'>
       <Button onClick={onThreadReplyClick}>
-        <Icon name="reply" />
+        <Icon name='reply' />
         Reply
       </Button>
 
@@ -384,9 +383,9 @@ function InnerViewThread (props: ViewThreadProps) {
       </h1>
       <ThreadInfoAndActions>
         <ThreadInfo>
-          Created
-          <ThreadInfoMemberPreview accountId={thread.author_id} inline prefixLabel="by" />
-          <TimeAgoDate date={thread.created_at.momentDate} id="thread" />
+          Created by
+          <ThreadInfoMemberPreview accountId={thread.author_id} size='small' showId={false}/>
+          <TimeAgoDate date={thread.created_at.momentDate} id='thread' />
         </ThreadInfo>
         {renderActions()}
       </ThreadInfoAndActions>
@@ -424,29 +423,23 @@ export const ViewThread = withMulti(
   )
 );
 
-type ViewThreadByIdProps = ApiProps & {
-  match: {
-    params: {
-      id: string;
-    };
-  };
-};
+type ViewThreadByIdProps = RouteComponentProps<{ id: string }>;
 
-function InnerViewThreadById (props: ViewThreadByIdProps) {
-  const { api, match: { params: { id } } } = props;
+export function ViewThreadById (props: ViewThreadByIdProps) {
+  const { api } = useApi();
+  const { match: { params: { id } } } = props;
+  const [loaded, setLoaded] = useState(false);
+  const [thread, setThread] = useState(api.createType('Thread', {}));
+  const [category, setCategory] = useState(api.createType('Category', {}));
+
+  let threadId: ThreadId | undefined;
 
-  let threadId: ThreadId;
   try {
-    threadId = new ThreadId(id);
+    threadId = api.createType('ThreadId', id);
   } catch (err) {
     console.log('Failed to parse thread id form URL');
-    return <em>Invalid thread ID: {id}</em>;
   }
 
-  const [loaded, setLoaded] = useState(false);
-  const [thread, setThread] = useState(Thread.newEmpty());
-  const [category, setCategory] = useState(Category.newEmpty());
-
   useEffect(() => {
     const loadThreadAndCategory = async () => {
       if (!threadId) return;
@@ -459,9 +452,13 @@ function InnerViewThreadById (props: ViewThreadByIdProps) {
       setLoaded(true);
     };
 
-    loadThreadAndCategory();
+    void loadThreadAndCategory();
   }, [id]);
 
+  if (threadId === undefined) {
+    return <em>Invalid thread ID: {id}</em>;
+  }
+
   // console.log({ threadId: id, page });
 
   if (!loaded) {
@@ -478,5 +475,3 @@ function InnerViewThreadById (props: ViewThreadByIdProps) {
 
   return <ViewThread id={threadId} category={category} thread={thread} />;
 }
-
-export const ViewThreadById = withApi(InnerViewThreadById);
diff --git a/pioneer/packages/joy-forum/src/calls.tsx b/pioneer/packages/joy-forum/src/calls.tsx
index 34c462205a..ac183bf870 100644
--- a/pioneer/packages/joy-forum/src/calls.tsx
+++ b/pioneer/packages/joy-forum/src/calls.tsx
@@ -1,14 +1,12 @@
 
 import React from 'react';
 import { ApiProps, SubtractProps } from '@polkadot/react-api/types';
-import { Options } from '@polkadot/react-api/with/types';
-import { withApi, withCall as withSubstrateCall } from '@polkadot/react-api';
-import { Option } from '@polkadot/types/codec';
-import { AccountId } from '@polkadot/types/interfaces';
+import { Options } from '@polkadot/react-api/hoc/types';
+import { withApi, withCall as withSubstrateCall } from '@polkadot/react-api/hoc';
 import { u64 } from '@polkadot/types';
-import { Constructor } from '@polkadot/types/types';
-import { Category, Thread, Reply } from '@joystream/types/forum';
+import { InterfaceTypes } from '@polkadot/types/types/registry';
 import { useForum, ForumState } from './Context';
+import { createType } from '@joystream/types';
 
 type Call = string | [string, Options];
 
@@ -18,18 +16,20 @@ const storage: StorageType = 'substrate';
 
 type EntityMapName = 'categoryById' | 'threadById' | 'replyById';
 
-const getReactValue = (state: ForumState, endpoint: string, paramValue: any): any => {
-  const getEntityById = (mapName: EntityMapName, constructor: Constructor): any => {
+const getReactValue = (state: ForumState, endpoint: string, paramValue: any) => {
+  function getEntityById<T extends keyof InterfaceTypes>
+  (mapName: EntityMapName, type: T): InterfaceTypes[T] {
     const id = (paramValue as u64).toNumber();
     const entity = state[mapName].get(id);
-    return new constructor(entity);
-  };
+
+    return createType(type, entity);
+  }
 
   switch (endpoint) {
-    case 'forumSudo': return new Option<AccountId>('AccountId', state.sudo);
-    case 'categoryById': return getEntityById(endpoint, Category);
-    case 'threadById': return getEntityById(endpoint, Thread);
-    case 'replyById': return getEntityById(endpoint, Reply);
+    case 'forumSudo': return createType('Option<AccountId>', state.sudo);
+    case 'categoryById': return getEntityById(endpoint, 'Category');
+    case 'threadById': return getEntityById(endpoint, 'Thread');
+    case 'replyById': return getEntityById(endpoint, 'Reply');
     default: throw new Error('Unknown endpoint for Forum storage');
   }
 };
@@ -38,13 +38,14 @@ function withReactCall<P extends ApiProps> (endpoint: string, { paramName, propN
   return (Inner: React.ComponentType<ApiProps>): React.ComponentType<SubtractProps<P, ApiProps>> => {
     const SetProp = (props: P) => {
       const { state } = useForum();
-      const paramValue = paramName ? (props as any)[paramName] : undefined;
+      const paramValue = paramName ? (props as Record<string, unknown>)[paramName] : undefined;
       const propValue = getReactValue(state, endpoint, paramValue);
       const _propName = propName || endpoint;
       const _props = {
         ...props,
         [_propName]: propValue
       };
+
       return <Inner {..._props} />;
     };
 
@@ -56,10 +57,12 @@ function withForumCall<P extends ApiProps> (endpoint: string, opts: Options = {}
   if (!opts.propName) {
     opts.propName = endpoint;
   }
+
   if (storage === 'react') {
     return withReactCall(endpoint, opts);
   } else {
     endpoint = 'query.forum.' + endpoint;
+
     return withSubstrateCall(endpoint, opts);
   }
 }
diff --git a/pioneer/packages/joy-forum/src/index.tsx b/pioneer/packages/joy-forum/src/index.tsx
index b29b909fbe..a4dd6131c4 100644
--- a/pioneer/packages/joy-forum/src/index.tsx
+++ b/pioneer/packages/joy-forum/src/index.tsx
@@ -3,42 +3,39 @@ import React from 'react';
 import { Route, Switch } from 'react-router';
 import styled from 'styled-components';
 
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
-
-import './index.css';
+import { RouteProps as AppMainRouteProps } from '@polkadot/apps-routing/types';
+import { I18nProps } from '@polkadot/react-components/types';
 
+import style from './style';
 import translate from './translate';
 import { ForumProvider } from './Context';
 import { ForumSudoProvider } from './ForumSudo';
-import { NewSubcategory, EditCategory } from './EditCategory';
+import { NewSubcategory, NewCategory, EditCategory } from './EditCategory';
 import { NewThread, EditThread } from './EditThread';
 import { CategoryList, ViewCategoryById } from './CategoryList';
 import { ViewThreadById } from './ViewThread';
 import { LegacyPagingRedirect } from './LegacyPagingRedirect';
 import ForumRoot from './ForumRoot';
 
-const ForumContentWrapper = styled.main`
-  padding-top: 1.5rem;
-`;
+const ForumMain = styled.main`${style}`;
 
-type Props = AppProps & I18nProps & {};
+type Props = AppMainRouteProps & I18nProps;
 
 class App extends React.PureComponent<Props> {
   render () {
     const { basePath } = this.props;
+
     return (
       <ForumProvider>
         <ForumSudoProvider>
-          <ForumContentWrapper className='forum--App'>
+          <ForumMain className='forum--App'>
             <Switch>
+              <Route path={`${basePath}/categories/new`} component={NewCategory} />
               {/* routes for handling legacy format of forum paging within the routing path */}
               {/* translate page param to search query */}
               <Route path={`${basePath}/categories/:id/page/:page`} component={LegacyPagingRedirect} />
               <Route path={`${basePath}/threads/:id/page/:page`} component={LegacyPagingRedirect} />
 
-              {/* <Route path={`${basePath}/sudo`} component={EditForumSudo} /> */}
-              {/* <Route path={`${basePath}/categories/new`} component={NewCategory} /> */}
-
               <Route path={`${basePath}/categories/:id/newSubcategory`} component={NewSubcategory} />
               <Route path={`${basePath}/categories/:id/newThread`} component={NewThread} />
               <Route path={`${basePath}/categories/:id/edit`} component={EditCategory} />
@@ -50,7 +47,7 @@ class App extends React.PureComponent<Props> {
 
               <Route component={ForumRoot} />
             </Switch>
-          </ForumContentWrapper>
+          </ForumMain>
         </ForumSudoProvider>
       </ForumProvider>
     );
diff --git a/pioneer/packages/joy-forum/src/index.css b/pioneer/packages/joy-forum/src/style.ts
similarity index 51%
rename from pioneer/packages/joy-forum/src/index.css
rename to pioneer/packages/joy-forum/src/style.ts
index 63d4f32640..0b4a7ed873 100644
--- a/pioneer/packages/joy-forum/src/index.css
+++ b/pioneer/packages/joy-forum/src/style.ts
@@ -1,4 +1,8 @@
-.forum--App {
+import { css } from 'styled-components';
+
+export default css`
+  padding-top: 1.5rem;
+
   .ui.segment {
     background-color: #fff;
   }
@@ -11,13 +15,13 @@
       margin-right: 1rem;
     }
   }
-}
-
-.EditEntityBox {
-  width: 100%;
-  max-width: 600px;
 
-  .EditEntityForm {
+  .EditEntityBox {
     width: 100%;
+    max-width: 600px;
+
+    .EditEntityForm {
+      width: 100%;
+    }
   }
-}
+`;
diff --git a/pioneer/packages/joy-forum/src/utils.tsx b/pioneer/packages/joy-forum/src/utils.tsx
index 1b38c35a05..41591b0f94 100644
--- a/pioneer/packages/joy-forum/src/utils.tsx
+++ b/pioneer/packages/joy-forum/src/utils.tsx
@@ -54,9 +54,10 @@ function InnerCategoryCrumb (p: CategoryCrumbsProps) {
   if (category) {
     try {
       const url = `/forum/categories/${category.id.toString()}`;
+
       return <>
         {category.parent_id ? <CategoryCrumb categoryId={category.parent_id} /> : null}
-        <Breadcrumb.Divider icon="right angle" />
+        <Breadcrumb.Divider icon='right angle' />
         <Breadcrumb.Section as={Link} to={url}>{category.title}</Breadcrumb.Section>
       </>;
     } catch (err) {
@@ -80,9 +81,10 @@ function InnerThreadCrumb (p: CategoryCrumbsProps) {
   if (thread) {
     try {
       const url = `/forum/threads/${thread.id.toString()}`;
+
       return <>
         <CategoryCrumb categoryId={thread.category_id} />
-        <Breadcrumb.Divider icon="right angle" />
+        <Breadcrumb.Divider icon='right angle' />
         <Breadcrumb.Section as={Link} to={url}>{thread.title}</Breadcrumb.Section>
       </>;
     } catch (err) {
@@ -113,8 +115,8 @@ export const CategoryCrumbs = ({ categoryId, threadId, root }: CategoryCrumbsPro
       <Breadcrumb.Section>Forum</Breadcrumb.Section>
       {!root && (
         <>
-          <Breadcrumb.Divider icon="right angle" />
-          <Breadcrumb.Section as={Link} to="/forum">Top categories</Breadcrumb.Section>
+          <Breadcrumb.Divider icon='right angle' />
+          <Breadcrumb.Section as={Link} to='/forum'>Top categories</Breadcrumb.Section>
           <CategoryCrumb categoryId={categoryId} />
           <ThreadCrumb threadId={threadId} />
         </>
@@ -125,7 +127,7 @@ export const CategoryCrumbs = ({ categoryId, threadId, root }: CategoryCrumbsPro
 
 type TimeAgoDateProps = {
   date: moment.Moment;
-  id: any;
+  id: string | number;
 };
 
 export const TimeAgoDate: React.FC<TimeAgoDateProps> = ({ date, id }) => (
@@ -133,7 +135,7 @@ export const TimeAgoDate: React.FC<TimeAgoDateProps> = ({ date, id }) => (
     <span data-tip data-for={`${id}-date-tooltip`}>
       {date.fromNow()}
     </span>
-    <Tooltip id={`${id}-date-tooltip`} place="top" effect="solid">
+    <Tooltip id={`${id}-date-tooltip`} place='top' effect='solid'>
       {date.toLocaleString()}
     </Tooltip>
   </>
@@ -164,6 +166,7 @@ export const useQueryParam = (queryParam: string): QueryReturnType => {
   useEffect(() => {
     const params = new URLSearchParams(search);
     const paramValue = params.get(queryParam);
+
     if (paramValue !== value) {
       setValue(paramValue);
     }
@@ -171,6 +174,7 @@ export const useQueryParam = (queryParam: string): QueryReturnType => {
 
   const setParam: QuerySetValueType = (rawValue, paramsToReset = []) => {
     let parsedValue: string | null;
+
     if (!rawValue && rawValue !== 0) {
       parsedValue = null;
     } else {
@@ -178,13 +182,14 @@ export const useQueryParam = (queryParam: string): QueryReturnType => {
     }
 
     const params = new URLSearchParams(search);
+
     if (parsedValue) {
       params.set(queryParam, parsedValue);
     } else {
       params.delete(queryParam);
     }
 
-    paramsToReset.forEach(p => params.delete(p));
+    paramsToReset.forEach((p) => params.delete(p));
 
     setValue(parsedValue);
     history.push({ pathname, search: params.toString() });
@@ -197,8 +202,10 @@ export const usePagination = (): [number, QuerySetValueType] => {
   const [rawCurrentPage, setCurrentPage] = useQueryParam(PagingQueryParam);
 
   let currentPage = 1;
+
   if (rawCurrentPage) {
     const parsedPage = Number.parseInt(rawCurrentPage);
+
     if (!Number.isNaN(parsedPage)) {
       currentPage = parsedPage;
     } else {
diff --git a/pioneer/packages/joy-forum/src/validation.tsx b/pioneer/packages/joy-forum/src/validation.tsx
index 9179bb1f16..e2693509f7 100644
--- a/pioneer/packages/joy-forum/src/validation.tsx
+++ b/pioneer/packages/joy-forum/src/validation.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { withMulti } from '@polkadot/react-api/with';
+import { withMulti } from '@polkadot/react-api/hoc';
 import { InputValidationLengthConstraint } from '@joystream/types/common';
 import { withForumCalls } from './calls';
 import { componentName } from '@polkadot/joy-utils/react/helpers';
@@ -28,14 +28,18 @@ function waitForRequiredConstraints (
   return function (Component: React.ComponentType<any>) {
     const ResultComponent: React.FunctionComponent<ValidationProps> = (props: ValidationProps) => {
       const nonEmptyProps = requiredConstraintNames
-        .filter(name => props[name] !== undefined)
+        .filter((name) => props[name] !== undefined)
         .length;
+
       if (nonEmptyProps !== requiredConstraintNames.length) {
         return <em>Loading validation constraints...</em>;
       }
+
       return <Component {...props} />;
     };
+
     ResultComponent.displayName = `waitForRequiredConstraints(${componentName(Component)})`;
+
     return ResultComponent;
   };
 }
diff --git a/pioneer/packages/joy-media/.skip-build b/pioneer/packages/joy-media/.skip-build
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/pioneer/packages/joy-media/aplayer.d.ts b/pioneer/packages/joy-media/aplayer.d.ts
new file mode 100644
index 0000000000..87c1fa0b95
--- /dev/null
+++ b/pioneer/packages/joy-media/aplayer.d.ts
@@ -0,0 +1,2 @@
+// No offical definitions available
+declare module 'react-aplayer';
diff --git a/pioneer/packages/joy-media/dplayer.d.ts b/pioneer/packages/joy-media/dplayer.d.ts
new file mode 100644
index 0000000000..675b3837c3
--- /dev/null
+++ b/pioneer/packages/joy-media/dplayer.d.ts
@@ -0,0 +1,2 @@
+// No offical definitions available
+declare module 'react-dplayer';
diff --git a/pioneer/packages/joy-media/package.json b/pioneer/packages/joy-media/package.json
index 45056f41c3..d4d5541bba 100644
--- a/pioneer/packages/joy-media/package.json
+++ b/pioneer/packages/joy-media/package.json
@@ -7,14 +7,14 @@
   "author": "Joystream contributors",
   "maintainers": [],
   "dependencies": {
-    "@babel/runtime": "^7.7.1",
+    "@babel/runtime": "^7.10.5",
     "@polkadot/joy-utils": "^0.1.1",
-    "@polkadot/react-components": "0.37.0-beta.63",
-    "@polkadot/react-query": "0.37.0-beta.63",
+    "@polkadot/react-components": "0.51.1",
+    "@polkadot/react-query": "0.51.1",
     "@types/mime-types": "^2.1.0",
     "@types/react-beautiful-dnd": "^11.0.3",
     "aplayer": "^1.10.1",
-    "dplayer": "^1.25.0",
+    "dplayer": "1.25.0",
     "ipfs-only-hash": "^1.0.2",
     "iso-639-1": "^2.1.0",
     "lodash": "^4.17.11",
diff --git a/pioneer/packages/joy-media/src/DiscoveryProvider.tsx b/pioneer/packages/joy-media/src/DiscoveryProvider.tsx
index 35ea333c42..0b4c165e21 100644
--- a/pioneer/packages/joy-media/src/DiscoveryProvider.tsx
+++ b/pioneer/packages/joy-media/src/DiscoveryProvider.tsx
@@ -7,8 +7,9 @@ import { Vec } from '@polkadot/types';
 import { Url } from '@joystream/types/discovery';
 import ApiContext from '@polkadot/react-api/ApiContext';
 import { ApiProps } from '@polkadot/react-api/types';
-import { JoyInfo } from '@polkadot/joy-utils/JoyStatus';
+import { JoyInfo } from '@polkadot/joy-utils/react/components';
 import { componentName } from '@polkadot/joy-utils/react/helpers';
+import { isObjectWithProperties } from '@polkadot/joy-utils/functions/misc';
 
 export type BootstrapNodes = {
   bootstrapNodes?: Url[];
@@ -26,9 +27,11 @@ export type DiscoveryProviderProps = {
 // return string Url with last `/` removed
 function normalizeUrl (url: string | Url): string {
   const st: string = url.toString();
+
   if (st.endsWith('/')) {
     return st.substring(0, st.length - 1);
   }
+
   return st.toString();
 }
 
@@ -39,7 +42,7 @@ type ProviderStats = {
 }
 
 function newDiscoveryProvider ({ bootstrapNodes }: BootstrapNodes): DiscoveryProvider {
-  const stats: Map<string, ProviderStats> = new Map();
+  const stats = new Map<string, ProviderStats>();
 
   const resolveAssetEndpoint = async (storageProvider: StorageProviderId, contentId?: string, cancelToken?: CancelToken) => {
     const providerKey = storageProvider.toString();
@@ -65,23 +68,41 @@ function newDiscoveryProvider ({ bootstrapNodes }: BootstrapNodes): DiscoveryPro
         try {
           console.log(`Resolving ${providerKey} using ${discoveryUrl}`);
 
-          const serviceInfo = await axios.get(serviceInfoQuery, { cancelToken }) as any;
+          const serviceInfo = await axios.get<unknown>(serviceInfoQuery, { cancelToken });
 
           if (!serviceInfo) {
             continue;
           }
 
+          const { data } = serviceInfo;
+
+          if (!isObjectWithProperties(data, 'serialized') || typeof data.serialized !== 'string') {
+            continue;
+          }
+
+          const dataParsed = JSON.parse(data.serialized) as unknown;
+
+          if (
+            !isObjectWithProperties(dataParsed, 'asset') ||
+            !isObjectWithProperties(dataParsed.asset, 'endpoint') ||
+            typeof dataParsed.asset.endpoint !== 'string'
+          ) {
+            continue;
+          }
+
           stats.set(providerKey, {
-            assetApiEndpoint: normalizeUrl(JSON.parse(serviceInfo.data.serialized).asset.endpoint),
+            assetApiEndpoint: normalizeUrl(dataParsed.asset.endpoint),
             unreachableReports: 0,
             resolvedAt: Date.now()
           });
           break;
         } catch (err) {
           console.log(err);
+
           if (axios.isCancel(err)) {
             throw err;
           }
+
           continue;
         }
       }
@@ -101,6 +122,7 @@ function newDiscoveryProvider ({ bootstrapNodes }: BootstrapNodes): DiscoveryPro
   const reportUnreachable = (provider: StorageProviderId) => {
     const key = provider.toString();
     const stat = stats.get(key);
+
     if (stat) {
       stat.unreachableReports = stat.unreachableReports + 1;
     }
@@ -111,7 +133,7 @@ function newDiscoveryProvider ({ bootstrapNodes }: BootstrapNodes): DiscoveryPro
 
 const DiscoveryProviderContext = createContext<DiscoveryProvider>(undefined as unknown as DiscoveryProvider);
 
-export const DiscoveryProviderProvider = (props: React.PropsWithChildren<{}>) => {
+export const DiscoveryProviderProvider = (props: React.PropsWithChildren<Record<any, unknown>>) => {
   const api: ApiProps = useContext(ApiContext);
   const [provider, setProvider] = useState<DiscoveryProvider | undefined>();
   const [loaded, setLoaded] = useState<boolean | undefined>();
@@ -122,12 +144,13 @@ export const DiscoveryProviderProvider = (props: React.PropsWithChildren<{}>) =>
 
       console.log('Discovery Provider: Loading bootstrap node from Substrate...');
       const bootstrapNodes = await api.api.query.discovery.bootstrapEndpoints() as Vec<Url>;
+
       setProvider(newDiscoveryProvider({ bootstrapNodes }));
       setLoaded(true);
       console.log('Discovery Provider: Initialized');
     };
 
-    load();
+    void load();
   }, [loaded]);
 
   if (!api || !api.isApiReady) {
@@ -157,8 +180,9 @@ export const useDiscoveryProvider = () =>
   useContext(DiscoveryProviderContext);
 
 export function withDiscoveryProvider (Component: React.ComponentType<DiscoveryProviderProps>) {
-  const ResultComponent: React.FunctionComponent<{}> = (props: React.PropsWithChildren<{}>) => {
+  const ResultComponent: React.FunctionComponent<Record<any, unknown>> = (props: React.PropsWithChildren<Record<any, unknown>>) => {
     const discoveryProvider = useDiscoveryProvider();
+
     if (!discoveryProvider) {
       return <JoyInfo title={'Please wait...'}>Loading discovery provider.</JoyInfo>;
     }
@@ -169,6 +193,8 @@ export function withDiscoveryProvider (Component: React.ComponentType<DiscoveryP
       </Component>
     );
   };
+
   ResultComponent.displayName = `withDiscoveryProvider(${componentName(Component)})`;
+
   return ResultComponent;
 }
diff --git a/pioneer/packages/joy-media/src/IterableFile.ts b/pioneer/packages/joy-media/src/IterableFile.ts
index 5b7885fd60..6d9c4cd2e2 100644
--- a/pioneer/packages/joy-media/src/IterableFile.ts
+++ b/pioneer/packages/joy-media/src/IterableFile.ts
@@ -32,10 +32,11 @@ export class IterableFile implements AsyncIterable<Buffer> {
 
   readBlobAsBuffer (blob: Blob): Promise<Buffer> {
     return new Promise((resolve, reject) => {
-      this.reader.onload = (e: any) => {
-        e.target.result && resolve(Buffer.from(e.target.result));
-        e.target.error && reject(e.target.error);
+      this.reader.onload = (e) => {
+        e.target?.result && resolve(typeof e.target.result === 'string' ? Buffer.from(e.target.result) : Buffer.from(e.target.result));
+        e.target?.error && reject(e.target.error);
       };
+
       this.reader.readAsArrayBuffer(blob);
     });
   }
diff --git a/pioneer/packages/joy-media/src/MediaView.tsx b/pioneer/packages/joy-media/src/MediaView.tsx
index d5968d2326..31c4932500 100644
--- a/pioneer/packages/joy-media/src/MediaView.tsx
+++ b/pioneer/packages/joy-media/src/MediaView.tsx
@@ -1,9 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { MediaTransport } from './transport';
 import { MemberId } from '@joystream/types/members';
-import { useMyMembership } from '@polkadot/joy-utils/MyMembershipContext';
+import { useMyMembership } from '@polkadot/joy-utils/react/hooks';
 import { useTransportContext } from './TransportContext';
-import { withMembershipRequired } from '@polkadot/joy-utils/MyAccount';
+import { withMembershipRequired } from '@polkadot/joy-utils/react/hocs/guards';
+import { useApi } from '@polkadot/react-hooks';
+import { ApiPromise } from '@polkadot/api';
+import { isObjectWithProperties } from '@polkadot/joy-utils/functions/misc';
 
 type InitialPropsWithMembership<A> = A & {
   myAddress?: string;
@@ -12,6 +15,7 @@ type InitialPropsWithMembership<A> = A & {
 
 type ResolverProps<A> = InitialPropsWithMembership<A> & {
   transport: MediaTransport;
+  api: ApiPromise;
 }
 
 type BaseProps<A, B> = {
@@ -29,28 +33,29 @@ type BaseProps<A, B> = {
   membersOnly?: boolean;
 }
 
-function serializeTrigger (val: any): any {
+function serializeTrigger (val: unknown): number | boolean | string | undefined {
   if (['number', 'boolean', 'string'].includes(typeof val)) {
-    return val;
-  } else if (typeof val === 'object' && typeof val.toString === 'function') {
-    return val.toString();
+    return val as number | boolean | string;
+  } else if (isObjectWithProperties(val, 'toString') && typeof val.toString === 'function') {
+    return val.toString() as string;
   } else {
     return undefined;
   }
 }
 
-export function MediaView<A = {}, B = {}> (baseProps: BaseProps<A, B>) {
+export function MediaView<A extends Record<string, unknown> = Record<string, unknown>, B extends Record<string, unknown> = Record<string, unknown>> (baseProps: BaseProps<A, B>) {
   function InnerView (initialProps: A & B) {
     const { component: Component, resolveProps, triggers = [], unresolvedView = null } = baseProps;
 
     const transport = useTransportContext();
     const { myAddress, myMemberId } = useMyMembership();
-    const resolverProps = { ...initialProps, transport, myAddress, myMemberId };
+    const { api } = useApi();
+    const resolverProps = { ...initialProps, transport, api, myAddress, myMemberId };
 
     const [resolvedProps, setResolvedProps] = useState({} as B);
     const [propsResolved, setPropsResolved] = useState(false);
 
-    const initialDeps = triggers.map(propName => serializeTrigger(initialProps[propName]));
+    const initialDeps = triggers.map((propName) => serializeTrigger(initialProps[propName]));
     const rerenderDeps = [...initialDeps, myAddress];
 
     useEffect(() => {
@@ -70,7 +75,7 @@ export function MediaView<A = {}, B = {}> (baseProps: BaseProps<A, B>) {
       if (!transport) {
         console.error('Transport is not defined');
       } else {
-        doResolveProps();
+        void doResolveProps();
       }
     }, rerenderDeps);
 
diff --git a/pioneer/packages/joy-media/src/TransportContext.tsx b/pioneer/packages/joy-media/src/TransportContext.tsx
index aed0b34fed..ad628c4aa2 100644
--- a/pioneer/packages/joy-media/src/TransportContext.tsx
+++ b/pioneer/packages/joy-media/src/TransportContext.tsx
@@ -10,12 +10,12 @@ export const TransportContext = createContext<MediaTransport>(undefined as unkno
 export const useTransportContext = () =>
   useContext(TransportContext);
 
-export const MockTransportProvider = (props: React.PropsWithChildren<{}>) =>
+export const MockTransportProvider = (props: React.PropsWithChildren<Record<any, unknown>>) =>
   <TransportContext.Provider value={new MockTransport()}>
     {props.children}
   </TransportContext.Provider>;
 
-export const SubstrateTransportProvider = (props: React.PropsWithChildren<{}>) => {
+export const SubstrateTransportProvider = (props: React.PropsWithChildren<Record<any, unknown>>) => {
   const api: ApiProps = useContext(ApiContext);
   const [transport, setTransport] = useState<SubstrateTransport>();
   const [loaded, setLoaded] = useState<boolean>();
diff --git a/pioneer/packages/joy-media/src/Upload.tsx b/pioneer/packages/joy-media/src/Upload.tsx
index b2b91b0a49..df3600d2f5 100644
--- a/pioneer/packages/joy-media/src/Upload.tsx
+++ b/pioneer/packages/joy-media/src/Upload.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import BN from 'bn.js';
-import axios, { CancelTokenSource } from 'axios';
+import axios, { CancelTokenSource, AxiosError, AxiosRequestConfig } from 'axios';
 import { History } from 'history';
 import { Progress, Message } from 'semantic-ui-react';
 
-import { InputFileAsync } from '@polkadot/react-components/index';
+import { registry } from '@joystream/types';
+import { InputFileAsync, TxButton, JoyInfo, Loading } from '@polkadot/joy-utils/react/components';
 import { ApiProps } from '@polkadot/react-api/types';
 import { I18nProps } from '@polkadot/react-components/types';
 import { SubmittableResult } from '@polkadot/api';
@@ -15,15 +16,17 @@ import { formatNumber } from '@polkadot/util';
 import translate from './translate';
 import { fileNameWoExt } from './utils';
 import { ContentId, DataObject } from '@joystream/types/media';
-import { withOnlyMembers, MyAccountProps } from '@polkadot/joy-utils/MyAccount';
+import { MyAccountProps } from '@polkadot/joy-utils/react/hocs/accounts';
+import { withOnlyMembers } from '@polkadot/joy-utils/react/hocs/guards';
 import { DiscoveryProviderProps, withDiscoveryProvider } from './DiscoveryProvider';
-import TxButton from '@polkadot/joy-utils/TxButton';
+
 import IpfsHash from 'ipfs-only-hash';
 import { ChannelId } from '@joystream/types/content-working-group';
 import { EditVideoView } from './upload/EditVideo.view';
-import { JoyInfo } from '@polkadot/joy-utils/JoyStatus';
+
 import { IterableFile } from './IterableFile';
 import { StorageProviderId } from '@joystream/types/working-group';
+import { normalizeError, isObjectWithProperties } from '@polkadot/joy-utils/functions/misc';
 
 const MAX_FILE_SIZE_MB = 500;
 const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024;
@@ -39,13 +42,14 @@ type Props = ApiProps & I18nProps & DiscoveryProviderProps & MyAccountProps & {
 };
 
 type State = {
-  error?: any;
+  error?: string;
   file?: File;
   computingHash: boolean;
   ipfs_cid?: string;
   newContentId: ContentId;
   discovering: boolean;
   uploading: boolean;
+  sendingTx: boolean;
   progress: number;
   cancelSource: CancelTokenSource;
 };
@@ -55,9 +59,10 @@ const defaultState = (): State => ({
   file: undefined,
   computingHash: false,
   ipfs_cid: undefined,
-  newContentId: ContentId.generate(),
+  newContentId: ContentId.generate(registry),
   discovering: false,
   uploading: false,
+  sendingTx: false,
   progress: 0,
   cancelSource: axios.CancelToken.source()
 });
@@ -72,6 +77,7 @@ class Upload extends React.PureComponent<Props, State> {
     });
 
     const { cancelSource } = this.state;
+
     cancelSource.cancel('unmounting');
   }
 
@@ -84,21 +90,21 @@ class Upload extends React.PureComponent<Props, State> {
   }
 
   private renderContent () {
-    const { error, uploading, discovering, computingHash } = this.state;
+    const { error, uploading, discovering, computingHash, sendingTx } = this.state;
 
-    if (error) return this.renderError();
+    if (error) return this.renderError(error);
     else if (discovering) return this.renderDiscovering();
     else if (uploading) return this.renderUploading();
     else if (computingHash) return this.renderComputingHash();
+    else if (sendingTx) return this.renderSendingTx();
     else return this.renderFileInput();
   }
 
-  private renderError () {
-    const { error } = this.state;
+  private renderError (error: string) {
     return (
       <Message error className='JoyMainStatus'>
         <Message.Header>Failed to upload your file</Message.Header>
-        <p>{error.toString()}</p>
+        <p>{error}</p>
         <button className='ui button' onClick={this.resetForm}>Start over</button>
       </Message>
     );
@@ -106,6 +112,7 @@ class Upload extends React.PureComponent<Props, State> {
 
   private resetForm = () => {
     const { cancelSource } = this.state;
+
     this.setState({
       ...defaultState(),
       cancelSource
@@ -114,16 +121,17 @@ class Upload extends React.PureComponent<Props, State> {
 
   private renderUploading () {
     const { file, newContentId, progress, error } = this.state;
+
     if (!file || !file.name) return <JoyInfo title='Loading...' />;
 
     const success = !error && progress >= 100;
-    const { history, match: { params: { channelId } } } = this.props;
+    const { history, match: { params: { channelId } }, api } = this.props;
 
     return <div style={{ width: '100%' }}>
       {this.renderProgress()}
       {success &&
         <EditVideoView
-          channelId={new ChannelId(channelId)}
+          channelId={api.createType('ChannelId', channelId)}
           contentId={newContentId}
           fileName={fileNameWoExt(file.name)}
           history={history}
@@ -132,6 +140,10 @@ class Upload extends React.PureComponent<Props, State> {
     </div>;
   }
 
+  private renderSendingTx () {
+    return <JoyInfo title='Please wait...'><Loading text='Waiting for the transaction confirmation...' /></JoyInfo>;
+  }
+
   private renderDiscovering () {
     return <JoyInfo title={'Please wait...'}>Contacting storage provider.</JoyInfo>;
   }
@@ -142,6 +154,7 @@ class Upload extends React.PureComponent<Props, State> {
     const success = !error && progress >= 100;
 
     let label = '';
+
     if (active) {
       label = 'Your file is uploading. Please keep this page open until it\'s done.';
     } else if (success) {
@@ -165,7 +178,7 @@ class Upload extends React.PureComponent<Props, State> {
 
     return <div className='UploadSelectForm'>
       <InputFileAsync
-        label=""
+        label=''
         withLabel={false}
         className={`UploadInputFile ${file_name ? 'FileSelected' : ''}`}
         placeholder={
@@ -184,12 +197,16 @@ class Upload extends React.PureComponent<Props, State> {
       />
       {file_name && <div className='UploadButtonBox'>
         <TxButton
-          size='large'
           label={'Upload'}
           isDisabled={!file_name}
           tx={'dataDirectory.addContent'}
           params={this.buildTxParams()}
-          txSuccessCb={this.onDataObjectCreated}
+          onClick={(sendTx) => {
+            this.setState({ sendingTx: true });
+            sendTx();
+          }}
+          txSuccessCb={ this.onDataObjectCreated }
+          txFailedCb={() => { this.setState({ sendingTx: false }); }}
         />
       </div>}
     </div>;
@@ -205,7 +222,7 @@ class Upload extends React.PureComponent<Props, State> {
       });
     } else {
       this.setState({ file, computingHash: true });
-      this.startComputingHash();
+      void this.startComputingHash();
     }
   }
 
@@ -218,7 +235,8 @@ class Upload extends React.PureComponent<Props, State> {
 
     try {
       const iterableFile = new IterableFile(file, { chunkSize: 65535 });
-      const ipfs_cid = await IpfsHash.of(iterableFile);
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call
+      const ipfs_cid = (await IpfsHash.of(iterableFile)) as string;
 
       this.hashComputationComplete(ipfs_cid);
     } catch (err) {
@@ -244,27 +262,31 @@ class Upload extends React.PureComponent<Props, State> {
 
   private buildTxParams = () => {
     const { file, newContentId, ipfs_cid } = this.state;
+
     if (!file || !ipfs_cid) return [];
 
     // TODO get corresponding data type id based on file content
     const dataObjectTypeId = new BN(1);
     const { myMemberId } = this.props;
+
     return [myMemberId, newContentId, dataObjectTypeId, new BN(file.size), ipfs_cid];
   }
 
   private onDataObjectCreated = async (_txResult: SubmittableResult) => {
-    this.setState({ discovering: true });
+    this.setState({ sendingTx: false, discovering: true });
 
     const { api } = this.props;
     const { newContentId } = this.state;
     let dataObject: Option<DataObject>;
+
     try {
       dataObject = await api.query.dataDirectory.dataObjectByContentId(newContentId) as Option<DataObject>;
     } catch (err) {
       this.setState({
-        error: err,
+        error: normalizeError(err),
         discovering: false
       });
+
       return;
     }
 
@@ -276,10 +298,11 @@ class Upload extends React.PureComponent<Props, State> {
 
     if (dataObject.isSome) {
       const storageProvider = dataObject.unwrap().liaison;
-      this.uploadFileTo(storageProvider);
+
+      void this.uploadFileTo(storageProvider);
     } else {
       this.setState({
-        error: new Error('No Storage Provider assigned to process upload'),
+        error: 'No Storage Provider assigned to process upload',
         discovering: false
       });
     }
@@ -287,16 +310,18 @@ class Upload extends React.PureComponent<Props, State> {
 
   private uploadFileTo = async (storageProvider: StorageProviderId) => {
     const { file, newContentId, cancelSource } = this.state;
+
     if (!file || !file.size) {
       this.setState({
-        error: new Error('No file to upload!'),
+        error: 'No file to upload!',
         discovering: false
       });
+
       return;
     }
 
     const contentId = newContentId.encode();
-    const config = {
+    const config: AxiosRequestConfig = {
       headers: {
         // TODO uncomment this once the issue fixed:
         // https://github.com/Joystream/storage-node-joystream/issues/16
@@ -304,8 +329,17 @@ class Upload extends React.PureComponent<Props, State> {
         'Content-Type': '' // <-- this is a temporary hack
       },
       cancelToken: cancelSource.token,
-      onUploadProgress: (progressEvent: any) => {
+      onUploadProgress: (progressEvent: unknown) => {
+        if (
+          !isObjectWithProperties(progressEvent, 'loaded', 'total') ||
+          typeof progressEvent.loaded !== 'number' ||
+          typeof progressEvent.total !== 'number'
+        ) {
+          return;
+        }
+
         const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+
         this.setState({
           progress: percentCompleted
         });
@@ -314,11 +348,12 @@ class Upload extends React.PureComponent<Props, State> {
 
     const { discoveryProvider } = this.props;
     let url: string;
+
     try {
       url = await discoveryProvider.resolveAssetEndpoint(storageProvider, contentId, cancelSource.token);
     } catch (err) {
       return this.setState({
-        error: new Error(`Failed to contact storage provider: ${err.message}`),
+        error: `Failed to contact storage provider: ${normalizeError(err)}`,
         discovering: false
       });
     }
@@ -335,12 +370,20 @@ class Upload extends React.PureComponent<Props, State> {
 
     try {
       await axios.put<{ message: string }>(url, file, config);
-    } catch (err) {
-      this.setState({ progress: 0, error: err, uploading: false });
+    } catch (e) {
+      const err = e as unknown;
+
+      this.setState({ progress: 0, error: normalizeError(err), uploading: false });
+
       if (axios.isCancel(err)) {
         return;
       }
-      if (!err.response || (err.response.status >= 500 && err.response.status <= 504)) {
+
+      const response = isObjectWithProperties(err, 'response')
+        ? (err as AxiosError).response
+        : undefined;
+
+      if (!response || (response.status >= 500 && response.status <= 504)) {
         // network connection error
         discoveryProvider.reportUnreachable(storageProvider);
       }
diff --git a/pioneer/packages/joy-media/src/channels/ChannelAvatar.tsx b/pioneer/packages/joy-media/src/channels/ChannelAvatar.tsx
index f1416df962..48d3d59f35 100644
--- a/pioneer/packages/joy-media/src/channels/ChannelAvatar.tsx
+++ b/pioneer/packages/joy-media/src/channels/ChannelAvatar.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { ChannelEntity } from '../entities/ChannelEntity';
 import { BgImg } from '../common/BgImg';
-import { DEFAULT_THUMBNAIL_URL } from '@polkadot/joy-utils/images';
+import { DEFAULT_THUMBNAIL_URL } from '../common/images';
 
 const defaultSizePx = 75;
 
diff --git a/pioneer/packages/joy-media/src/channels/ChannelAvatarAndName.tsx b/pioneer/packages/joy-media/src/channels/ChannelAvatarAndName.tsx
index ca553c6b1f..16f9f06aac 100644
--- a/pioneer/packages/joy-media/src/channels/ChannelAvatarAndName.tsx
+++ b/pioneer/packages/joy-media/src/channels/ChannelAvatarAndName.tsx
@@ -9,6 +9,7 @@ type Props = {
 
 export const ChannelAvatarAndName = (props: Props) => {
   const { channel } = props;
+
   return (
     <div className={'ChannelPreview small'}>
       <ChannelAvatar channel={channel} size='small' />
diff --git a/pioneer/packages/joy-media/src/channels/ChannelHelpers.ts b/pioneer/packages/joy-media/src/channels/ChannelHelpers.ts
index 9e3558e5bf..6ea47c8253 100644
--- a/pioneer/packages/joy-media/src/channels/ChannelHelpers.ts
+++ b/pioneer/packages/joy-media/src/channels/ChannelHelpers.ts
@@ -4,7 +4,7 @@ import { ChannelPublicationStatusAllValues } from '@joystream/types/content-work
 
 export const ChannelPublicationStatusDropdownOptions =
   ChannelPublicationStatusAllValues
-    .map(x => ({ key: x, value: x, text: x }));
+    .map((x) => ({ key: x, value: x, text: x }));
 
 export const isVideoChannel = (channel: ChannelType) => {
   return channel.content === 'Video';
diff --git a/pioneer/packages/joy-media/src/channels/ChannelNameAsLink.tsx b/pioneer/packages/joy-media/src/channels/ChannelNameAsLink.tsx
index d794b57602..884516a00d 100644
--- a/pioneer/packages/joy-media/src/channels/ChannelNameAsLink.tsx
+++ b/pioneer/packages/joy-media/src/channels/ChannelNameAsLink.tsx
@@ -10,6 +10,7 @@ type Props = {
 
 export const ChannelNameAsLink = (props: Props) => {
   const { channel, className, style } = props;
+
   return (
     <Link to={`/media/channels/${channel.id}`} className={className} style={style}>
       {channel.title || channel.handle}
diff --git a/pioneer/packages/joy-media/src/channels/ChannelPreview.tsx b/pioneer/packages/joy-media/src/channels/ChannelPreview.tsx
index 7c0e19372a..98e0369e37 100644
--- a/pioneer/packages/joy-media/src/channels/ChannelPreview.tsx
+++ b/pioneer/packages/joy-media/src/channels/ChannelPreview.tsx
@@ -6,8 +6,8 @@ import { ChannelEntity } from '../entities/ChannelEntity';
 import { ChannelAvatar, ChannelAvatarSize } from './ChannelAvatar';
 import { isPublicChannel, isMusicChannel, isVideoChannel, isAccountAChannelOwner, isVerifiedChannel } from './ChannelHelpers';
 
-import { useMyMembership } from '@polkadot/joy-utils/MyMembershipContext';
-import { nonEmptyStr } from '@polkadot/joy-utils/index';
+import { useMyMembership } from '@polkadot/joy-utils/react/hooks';
+import { nonEmptyStr } from '@polkadot/joy-utils/functions/misc';
 import { CurationPanel } from './CurationPanel';
 import { ChannelNameAsLink } from './ChannelNameAsLink';
 
@@ -52,8 +52,6 @@ export const ChannelPreview = (props: ChannelPreviewProps) => {
         <h3 className='ChannelTitle' style={{ display: 'block' }}>
           <ChannelNameAsLink channel={channel} style={{ marginRight: '1rem' }} />
 
-          <CurationPanel channel={channel} />
-
           {isAccountAChannelOwner(channel, myAccountId) &&
             <div style={{ float: 'right' }}>
 
@@ -101,6 +99,8 @@ export const ChannelPreview = (props: ChannelPreviewProps) => {
           }
         </div>
 
+        <CurationPanel channel={channel} />
+
         {withDescription && nonEmptyStr(channel.description) &&
           <ReactMarkdown className='JoyMemo--full ChannelDesc' source={channel.description} linkTarget='_blank' />
         }
diff --git a/pioneer/packages/joy-media/src/channels/ChannelPreviewStats.tsx b/pioneer/packages/joy-media/src/channels/ChannelPreviewStats.tsx
index cee1016479..12835cd3b8 100644
--- a/pioneer/packages/joy-media/src/channels/ChannelPreviewStats.tsx
+++ b/pioneer/packages/joy-media/src/channels/ChannelPreviewStats.tsx
@@ -13,6 +13,7 @@ export const ChannelPreviewStats = (props: Props) => {
   const statSize = 'tiny';
 
   let itemsPublishedLabel = '';
+
   if (channel.content === 'Video') {
     itemsPublishedLabel = 'Videos';
   } else if (channel.content === 'Music') {
diff --git a/pioneer/packages/joy-media/src/channels/ChannelsByOwner.tsx b/pioneer/packages/joy-media/src/channels/ChannelsByOwner.tsx
index 4e29d3420f..08d1d60a0d 100644
--- a/pioneer/packages/joy-media/src/channels/ChannelsByOwner.tsx
+++ b/pioneer/packages/joy-media/src/channels/ChannelsByOwner.tsx
@@ -19,7 +19,8 @@ const TabsAndChannels = (props: ChannelsByOwnerProps) => {
 
   let videoChannelsCount = 0;
   let musicChannelsCount = 0;
-  allChannels.forEach(x => {
+
+  allChannels.forEach((x) => {
     if (x.content === 'Video') {
       videoChannelsCount++;
     } else if (x.content === 'Music') {
@@ -38,6 +39,7 @@ const TabsAndChannels = (props: ChannelsByOwnerProps) => {
 
   const switchTab = (activeIndex: number) => {
     const activeContentType = contentTypeByTabIndex[activeIndex];
+
     if (activeContentType === undefined) {
       setChannels(allChannels);
     } else {
diff --git a/pioneer/packages/joy-media/src/channels/ChannelsByOwner.view.tsx b/pioneer/packages/joy-media/src/channels/ChannelsByOwner.view.tsx
index 9200d6d778..a60863e7ef 100644
--- a/pioneer/packages/joy-media/src/channels/ChannelsByOwner.view.tsx
+++ b/pioneer/packages/joy-media/src/channels/ChannelsByOwner.view.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { RouteComponentProps } from 'react-router';
 
-import { GenericAccountId } from '@polkadot/types';
 import { MediaView } from '../MediaView';
 import { ChannelsByOwnerProps, ChannelsByOwner } from './ChannelsByOwner';
-import { JoyError } from '@polkadot/joy-utils/JoyStatus';
+import { JoyError } from '@polkadot/joy-utils/react/components';
+import { useApi } from '@polkadot/react-hooks';
 
 type Props = ChannelsByOwnerProps;
 
@@ -13,16 +13,18 @@ export const ChannelsByOwnerView = MediaView<Props>({
   resolveProps: async (props) => {
     const { transport, accountId } = props;
     const channels = await transport.channelsByAccount(accountId);
+
     return { channels };
   }
 });
 
-export const ChannelsByOwnerWithRouter = (props: Props & RouteComponentProps<any>) => {
+export const ChannelsByOwnerWithRouter = (props: Props & RouteComponentProps<Record<string, string | undefined>>) => {
   const { match: { params: { account } } } = props;
+  const { api } = useApi();
 
   if (account) {
     try {
-      return <ChannelsByOwnerView {...props} accountId={new GenericAccountId(account)} />;
+      return <ChannelsByOwnerView {...props} accountId={api.createType('AccountId', account)} />;
     } catch (err) {
       console.log('ChannelsByOwnerWithRouter failed:', err);
     }
diff --git a/pioneer/packages/joy-media/src/channels/CurationPanel.tsx b/pioneer/packages/joy-media/src/channels/CurationPanel.tsx
index ce2279a537..145341b799 100644
--- a/pioneer/packages/joy-media/src/channels/CurationPanel.tsx
+++ b/pioneer/packages/joy-media/src/channels/CurationPanel.tsx
@@ -1,16 +1,18 @@
 import React from 'react';
 import { ChannelEntity } from '../entities/ChannelEntity';
 import { isVerifiedChannel, isCensoredChannel } from './ChannelHelpers';
-import { useMyMembership } from '@polkadot/joy-utils/MyMembershipContext';
-import TxButton from '@polkadot/joy-utils/TxButton';
-import { ChannelCurationStatus } from '@joystream/types/content-working-group';
+import { useMyMembership } from '@polkadot/joy-utils/react/hooks';
+import { SemanticTxButton } from '@polkadot/joy-utils/react/components/TxButton';
 import { AccountId } from '@polkadot/types/interfaces';
+import { useApi } from '@polkadot/react-hooks';
+import { Icon } from 'semantic-ui-react';
 
 type ChannelCurationPanelProps = {
   channel: ChannelEntity;
 };
 
 export const CurationPanel = (props: ChannelCurationPanelProps) => {
+  const { api } = useApi();
   const { curationActor, allAccounts } = useMyMembership();
   const { channel } = props;
 
@@ -34,17 +36,16 @@ export const CurationPanel = (props: ChannelCurationPanelProps) => {
 
     const isCensored = isCensoredChannel(channel);
 
-    const new_curation_status = new ChannelCurationStatus(
+    const new_curation_status = api.createType('ChannelCurationStatus',
       isCensored ? 'Normal' : 'Censored'
     );
 
-    return <TxButton
+    return <SemanticTxButton
       accountId={role_account.toString()}
       type='submit'
-      size='medium'
-      icon={isCensored ? 'x' : 'warning'}
-      isDisabled={!accountAvailable}
-      label={isCensored ? 'Un-Censor' : 'Censor'}
+      size='small'
+      color={isCensored ? undefined : 'red'}
+      disabled={!accountAvailable}
       params={[
         curation_actor,
         channel.id,
@@ -52,7 +53,10 @@ export const CurationPanel = (props: ChannelCurationPanelProps) => {
         new_curation_status // toggled curation status
       ]}
       tx={'contentWorkingGroup.updateChannelAsCurationActor'}
-    />;
+    >
+      <Icon name={isCensored ? 'x' : 'warning'}/>
+      { isCensored ? 'Un-Censor' : 'Censor' }
+    </SemanticTxButton>;
   };
 
   const renderToggleVerifiedButton = () => {
@@ -62,13 +66,12 @@ export const CurationPanel = (props: ChannelCurationPanelProps) => {
     const accountAvailable = canUseAccount(role_account);
     const isVerified = isVerifiedChannel(channel);
 
-    return <TxButton
+    return <SemanticTxButton
       accountId={role_account.toString()}
       type='submit'
-      size='medium'
-      icon={isVerified ? 'x' : 'checkmark'}
-      isDisabled={!accountAvailable}
-      label={isVerified ? 'Remove Verification' : 'Verify'}
+      size='small'
+      color={isVerified ? undefined : 'green'}
+      disabled={!accountAvailable}
       params={[
         curation_actor,
         channel.id,
@@ -76,11 +79,14 @@ export const CurationPanel = (props: ChannelCurationPanelProps) => {
         null // not changing curation status
       ]}
       tx={'contentWorkingGroup.updateChannelAsCurationActor'}
-    />;
+    >
+      <Icon name={isVerified ? 'x' : 'checkmark'}/>
+      { isVerified ? 'Remove Verification' : 'Verify' }
+    </SemanticTxButton>;
   };
 
   return <>
-    <div style={{ float: 'right' }}>
+    <div style={{ display: 'flex', float: 'right', margin: '0.5em', marginRight: 0 }}>
       {renderToggleCensorshipButton()}
       {renderToggleVerifiedButton()}
     </div>
diff --git a/pioneer/packages/joy-media/src/channels/EditChannel.tsx b/pioneer/packages/joy-media/src/channels/EditChannel.tsx
index b0f1b4f068..29fc3e64c2 100644
--- a/pioneer/packages/joy-media/src/channels/EditChannel.tsx
+++ b/pioneer/packages/joy-media/src/channels/EditChannel.tsx
@@ -3,21 +3,21 @@ import { Button } from 'semantic-ui-react';
 import { Form, withFormik } from 'formik';
 import { History } from 'history';
 
-import { Text, Option } from '@polkadot/types';
-import TxButton from '@polkadot/joy-utils/TxButton';
-import { onImageError } from '@polkadot/joy-utils/images';
+import { Option } from '@polkadot/types';
+import { TxButton, JoyError, Section } from '@polkadot/joy-utils/react/components';
+import { onImageError } from '../common/images';
 import { withMediaForm, MediaFormProps } from '../common/MediaForms';
 import { ChannelType, ChannelClass as Fields, buildChannelValidationSchema, ChannelFormValues, ChannelToFormValues, ChannelGenericProp } from '../schemas/channel/Channel';
 import { MediaDropdownOptions } from '../common/MediaDropdownOptions';
-import { ChannelId, ChannelContentType, ChannelPublicationStatus, OptionalText } from '@joystream/types/content-working-group';
-import { newOptionalText, findFirstParamOfSubstrateEvent } from '@polkadot/joy-utils/index';
-import { useMyMembership } from '@polkadot/joy-utils/MyMembershipContext';
+import { ChannelId, OptionalText } from '@joystream/types/content-working-group';
+import { findFirstParamOfSubstrateEvent } from '@polkadot/joy-utils/functions/misc';
+import { useMyMembership } from '@polkadot/joy-utils/react/hooks';
 import { ChannelPublicationStatusDropdownOptions, isAccountAChannelOwner } from './ChannelHelpers';
 import { TxCallback } from '@polkadot/react-components/Status/types';
 import { SubmittableResult } from '@polkadot/api';
 import { ChannelValidationConstraints } from '../transport';
-import { JoyError } from '@polkadot/joy-utils/JoyStatus';
-import Section from '@polkadot/joy-utils/Section';
+
+import { useApi } from '@polkadot/react-hooks';
 
 export type OuterProps = {
   history?: History;
@@ -56,6 +56,7 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
   } = props;
 
   const { myAccountId, myMemberId } = useMyMembership();
+  const { api } = useApi();
 
   if (entity && !isAccountAChannelOwner(entity, myAccountId)) {
     return <JoyError title={'Only owner can edit channel'} />;
@@ -83,52 +84,49 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
   const buildTxParams = () => {
     if (!isValid) return [];
 
-    // TODO get value from the form:
-    const publicationStatus = new ChannelPublicationStatus('Public');
-
     if (!entity) {
       // Create a new channel
 
       const channelOwner = myMemberId;
       const roleAccount = myAccountId;
-      const contentType = new ChannelContentType(values.content);
+      const contentType = api.createType('ChannelContentType', values.content);
 
       return [
         channelOwner,
         roleAccount,
         contentType,
-        new Text(values.handle),
-        newOptionalText(values.title),
-        newOptionalText(values.description),
-        newOptionalText(values.avatar),
-        newOptionalText(values.banner),
-        publicationStatus
+        values.handle,
+        values.title || null,
+        values.description || null,
+        values.avatar || null,
+        values.banner || null,
+        values.publicationStatus
       ];
     } else {
       // Update an existing channel
 
       const updOptText = (field: ChannelGenericProp): Option<OptionalText> => {
-        return new Option(OptionalText,
+        return api.createType('Option<OptionalText>',
           isFieldChanged(field)
-            ? newOptionalText(values[field.id])
+            ? api.createType('Option<Text>', values[field.id])
             : null
         );
       };
 
-      const updHandle = new Option(Text,
+      const updHandle = api.createType('Option<Text>',
         isFieldChanged(Fields.handle)
           ? values[Fields.handle.id]
           : null
       );
 
-      const updPublicationStatus = new Option(ChannelPublicationStatus,
+      const updPublicationStatus = api.createType('Option<ChannelPublicationStatus>',
         isFieldChanged(Fields.publicationStatus)
-          ? new ChannelPublicationStatus(values[Fields.publicationStatus.id] as any)
+          ? api.createType('ChannelPublicationStatus', values[Fields.publicationStatus.id])
           : null
       );
 
       return [
-        new ChannelId(entity.id),
+        entity.id,
         updHandle,
         updOptText(Fields.title),
         updOptText(Fields.description),
@@ -156,7 +154,6 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
   const renderMainButton = () =>
     <TxButton
       type='submit'
-      size='large'
       isDisabled={!dirty || isSubmitting}
       label={isNew
         ? 'Create channel'
@@ -182,7 +179,7 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
 
         {formFields()}
 
-        <LabelledField style={{ marginTop: '1rem' }} {...props}>
+        <LabelledField style={{ marginTop: '1rem' }} {...props} flex>
           {renderMainButton()}
           <Button
             type='button'
@@ -202,11 +199,13 @@ export const EditForm = withFormik<OuterProps, FormValues>({
   // Transform outer props into form values
   mapPropsToValues: (props): FormValues => {
     const { entity } = props;
+
     return ChannelToFormValues(entity);
   },
 
   validationSchema: (props: OuterProps): any => {
     const { constraints } = props;
+
     if (!constraints) return null;
 
     return buildChannelValidationSchema(constraints);
diff --git a/pioneer/packages/joy-media/src/channels/EditChannel.view.tsx b/pioneer/packages/joy-media/src/channels/EditChannel.view.tsx
index b05582a965..3776a0155a 100644
--- a/pioneer/packages/joy-media/src/channels/EditChannel.view.tsx
+++ b/pioneer/packages/joy-media/src/channels/EditChannel.view.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { RouteComponentProps } from 'react-router';
 import { MediaView } from '../MediaView';
 import { OuterProps, EditForm } from './EditChannel';
-import { ChannelId } from '@joystream/types/content-working-group';
-import { JoyError } from '@polkadot/joy-utils/JoyStatus';
+import { JoyError } from '@polkadot/joy-utils/react/components';
+import { useApi } from '@polkadot/react-hooks';
 
 type Props = OuterProps;
 
@@ -15,18 +15,20 @@ export const EditChannelView = MediaView<Props>({
     const { transport, id } = props;
     const entity = id && await transport.channelById(id);
     const constraints = await transport.channelValidationConstraints();
+
     return { entity, constraints };
   }
 });
 
-type WithRouterProps = Props & RouteComponentProps<any>
+type WithRouterProps = Props & RouteComponentProps<Record<string, string | undefined>>
 
 export const EditChannelWithRouter = (props: WithRouterProps) => {
   const { match: { params: { id } } } = props;
+  const { api } = useApi();
 
   if (id) {
     try {
-      return <EditChannelView {...props} id={new ChannelId(id)} />;
+      return <EditChannelView {...props} id={api.createType('ChannelId', id)} />;
     } catch (err) {
       console.log('EditChannelWithRouter failed:', err);
     }
diff --git a/pioneer/packages/joy-media/src/channels/ViewChannel.tsx b/pioneer/packages/joy-media/src/channels/ViewChannel.tsx
index f55af16abf..7f35b05331 100644
--- a/pioneer/packages/joy-media/src/channels/ViewChannel.tsx
+++ b/pioneer/packages/joy-media/src/channels/ViewChannel.tsx
@@ -8,7 +8,7 @@ import { ViewVideoChannel } from './ViewVideoChannel';
 import { ViewMusicChannel } from './ViewMusicChannel';
 import { toVideoPreviews } from '../video/VideoPreview';
 import { isVideoChannel, isMusicChannel } from './ChannelHelpers';
-import { JoyError } from '@polkadot/joy-utils/JoyStatus';
+import { JoyError } from '@polkadot/joy-utils/react/components';
 
 export type ViewChannelProps = {
   id: ChannelId;
@@ -31,6 +31,7 @@ export function ViewChannel (props: ViewChannelProps) {
 
   if (isVideoChannel(channel)) {
     const previews = toVideoPreviews(videos);
+
     return <ViewVideoChannel channel={channel} videos={previews} />;
   } else if (isMusicChannel(channel)) {
     return <ViewMusicChannel channel={channel} albums={albums} tracks={tracks} />;
diff --git a/pioneer/packages/joy-media/src/channels/ViewChannel.view.tsx b/pioneer/packages/joy-media/src/channels/ViewChannel.view.tsx
index d44432c73a..8a05504706 100644
--- a/pioneer/packages/joy-media/src/channels/ViewChannel.view.tsx
+++ b/pioneer/packages/joy-media/src/channels/ViewChannel.view.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { RouteComponentProps } from 'react-router';
 import { MediaView } from '../MediaView';
 import { ViewChannelProps, ViewChannel } from './ViewChannel';
-import { ChannelId } from '@joystream/types/content-working-group';
-import { JoyError } from '@polkadot/joy-utils/JoyStatus';
+import { JoyError } from '@polkadot/joy-utils/react/components';
+import { useApi } from '@polkadot/react-hooks';
 
 type Props = ViewChannelProps;
 
@@ -14,16 +14,18 @@ export const ViewChannelView = MediaView<Props>({
     const { transport, id } = props;
     const channel = await transport.channelById(id);
     const videos = await transport.videosByChannelId(id);
+
     return { channel, videos };
   }
 });
 
-export const ViewChannelWithRouter = (props: Props & RouteComponentProps<any>) => {
+export const ViewChannelWithRouter = (props: Props & RouteComponentProps<Record<string, string | undefined>>) => {
   const { match: { params: { id } } } = props;
+  const { api } = useApi();
 
   if (id) {
     try {
-      return <ViewChannelView {...props} id={new ChannelId(id)} />;
+      return <ViewChannelView {...props} id={api.createType('ChannelId', id)} />;
     } catch (err) {
       console.log('ViewChannelWithRouter failed:', err);
     }
diff --git a/pioneer/packages/joy-media/src/channels/ViewMusicChannel.tsx b/pioneer/packages/joy-media/src/channels/ViewMusicChannel.tsx
index f3526e7b49..3fd24d1c1c 100644
--- a/pioneer/packages/joy-media/src/channels/ViewMusicChannel.tsx
+++ b/pioneer/packages/joy-media/src/channels/ViewMusicChannel.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChannelEntity } from '../entities/ChannelEntity';
-import Section from '@polkadot/joy-utils/Section';
+import { Section } from '@polkadot/joy-utils/react/components';
 import { ChannelHeader } from './ChannelHeader';
 import { MusicAlbumPreviewProps, MusicAlbumPreview } from '../music/MusicAlbumPreview';
 import { MusicTrackReaderPreview, MusicTrackReaderPreviewProps } from '../music/MusicTrackReaderPreview';
@@ -27,7 +27,7 @@ export function ViewMusicChannel (props: Props) {
     !albums.length
       ? <NoAlbums />
       : <Section title={'Music albums'}>
-        {albums.map(x => <MusicAlbumPreview key={x.id} {...x} />)}
+        {albums.map((x) => <MusicAlbumPreview key={x.id} {...x} />)}
       </Section>
   );
 
@@ -35,7 +35,7 @@ export function ViewMusicChannel (props: Props) {
     !tracks.length
       ? <NoTracks />
       : <Section title={'Music tracks'}>
-        {tracks.map(x => <MusicTrackReaderPreview key={x.id} {...x} />)}
+        {tracks.map((x) => <MusicTrackReaderPreview key={x.id} {...x} />)}
       </Section>
   );
 
diff --git a/pioneer/packages/joy-media/src/channels/ViewVideoChannel.tsx b/pioneer/packages/joy-media/src/channels/ViewVideoChannel.tsx
index 0d330f7810..ad089ed4c0 100644
--- a/pioneer/packages/joy-media/src/channels/ViewVideoChannel.tsx
+++ b/pioneer/packages/joy-media/src/channels/ViewVideoChannel.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Section from '@polkadot/joy-utils/Section';
+import { Section } from '@polkadot/joy-utils/react/components';
 import { ChannelEntity } from '../entities/ChannelEntity';
 import { ChannelHeader } from './ChannelHeader';
 import { VideoPreview, VideoPreviewProps } from '../video/VideoPreview';
diff --git a/pioneer/packages/joy-media/src/common/BgImg.tsx b/pioneer/packages/joy-media/src/common/BgImg.tsx
index 6913c7e2ec..9b73866f22 100644
--- a/pioneer/packages/joy-media/src/common/BgImg.tsx
+++ b/pioneer/packages/joy-media/src/common/BgImg.tsx
@@ -13,7 +13,7 @@ type Props = {
 export function BgImg (props: Props) {
   let { url, width, height, size, circle, className, style } = props;
 
-  const fullClass = 'JoyBgImg ' + className;
+  const fullClass = `JoyBgImg ${className || ''}`;
 
   let fullStyle: CSSProperties = {
     backgroundImage: `url(${url})`
diff --git a/pioneer/packages/joy-media/src/common/FormTabs.tsx b/pioneer/packages/joy-media/src/common/FormTabs.tsx
index 1d1b32c1df..01610afb20 100644
--- a/pioneer/packages/joy-media/src/common/FormTabs.tsx
+++ b/pioneer/packages/joy-media/src/common/FormTabs.tsx
@@ -20,7 +20,7 @@ export function FormTabs <FormValues> (props: FormTabsProps<FormValues>) {
 
   return <Tab
     menu={{ secondary: true, pointing: true, color: 'blue' }}
-    panes={panes.map(tab => {
+    panes={panes.map((tab) => {
       const {
         id,
         fields = [],
@@ -29,8 +29,10 @@ export function FormTabs <FormValues> (props: FormTabsProps<FormValues>) {
       } = tab;
 
       const tabErrors: any[] = [];
-      fields.forEach(f => {
+
+      fields.forEach((f) => {
         const err = errors[f.id];
+
         if (err) {
           tabErrors.push(err);
         }
diff --git a/pioneer/packages/joy-media/src/common/MediaDropdownOptions.tsx b/pioneer/packages/joy-media/src/common/MediaDropdownOptions.tsx
index 0fd9b77b0b..a9ec671ba0 100644
--- a/pioneer/packages/joy-media/src/common/MediaDropdownOptions.tsx
+++ b/pioneer/packages/joy-media/src/common/MediaDropdownOptions.tsx
@@ -5,10 +5,10 @@ import { TextValueEntity } from '@joystream/types/versioned-store/EntityCodec';
 import { InternalEntities } from '../transport';
 
 const buildOptions = (entities: TextValueEntity[]): DropdownItemProps[] =>
-  entities.map(x => ({ key: x.id, value: x.id, text: x.value }));
+  entities.map((x) => ({ key: x.id, value: x.id, text: x.value }));
 
 const buildLanguageOptions = (entities: LanguageType[]): DropdownItemProps[] =>
-  entities.map(x => ({ key: x.id, value: x.id, text: ISO6391.getName(x.value) }));
+  entities.map((x) => ({ key: x.id, value: x.id, text: ISO6391.getName(x.value) }));
 
 export class MediaDropdownOptions {
   public languageOptions: DropdownItemProps[]
diff --git a/pioneer/packages/joy-media/src/common/MediaForms.tsx b/pioneer/packages/joy-media/src/common/MediaForms.tsx
index 0607e27095..fc7e0fced7 100644
--- a/pioneer/packages/joy-media/src/common/MediaForms.tsx
+++ b/pioneer/packages/joy-media/src/common/MediaForms.tsx
@@ -1,16 +1,21 @@
 import React from 'react';
 import { Dropdown, DropdownItemProps, DropdownProps } from 'semantic-ui-react';
 import { FormikProps, Field } from 'formik';
-import * as JoyForms from '@polkadot/joy-utils/forms';
+import * as JoyForms from '@polkadot/joy-utils/react/components/forms';
 import { SubmittableResult } from '@polkadot/api';
 import { TxFailedCallback, TxCallback } from '@polkadot/react-components/Status/types';
 import { MediaDropdownOptions } from './MediaDropdownOptions';
-import { OnTxButtonClick } from '@polkadot/joy-utils/TxButton';
+import { OnTxButtonClick } from '@polkadot/joy-utils/react/components/TxButton';
 import isEqual from 'lodash/isEqual';
 import { componentName } from '@polkadot/joy-utils/react/helpers';
 
 export const datePlaceholder = 'Date in format yyyy-mm-dd';
 
+export const boolOptions: DropdownItemProps[] = [
+  { value: 'true', text: 'Yes' },
+  { value: 'false', text: 'No' }
+];
+
 export type FormCallbacks = {
   onSubmit: OnTxButtonClick;
   onTxSuccess: TxCallback;
@@ -40,7 +45,7 @@ type MediaTextProps<OuterProps, FormValues> =
 type MediaFieldProps<OuterProps, FormValues> =
   BaseFieldProps<OuterProps, FormValues> &
   JoyForms.LabelledProps<FormValues> & {
-    fieldProps: any;
+    fieldProps: Record<string, unknown>;
   }
 
 type MediaDropdownProps<OuterProps, FormValues> =
@@ -78,6 +83,7 @@ export function withMediaForm<OuterProps, FormValues>
 
   function MediaText (props: MediaTextProps<OuterProps, FormValues>) {
     const { field: f } = props;
+
     return !f ? null : <LabelledText name={f.id} label={f.name} tooltip={f.description} required={f.required} {...props} />;
   }
 
@@ -105,8 +111,8 @@ export function withMediaForm<OuterProps, FormValues>
 
   const MediaDropdown = (props: MediaDropdownProps<OuterProps, FormValues>) => {
     const { field: f, options = [] } = props;
-    const id = f.id as string;
-    const value = (props.values as any)[id] || '';
+    const id = f.id;
+    const value = props.values[id] || '';
 
     return <MediaField {...props} fieldProps={{
       component: Dropdown,
@@ -115,10 +121,10 @@ export function withMediaForm<OuterProps, FormValues>
       options,
       value,
       onBlur: (_event: any, _data: DropdownProps) => {
-        props.setFieldTouched(id, true);
+        props.setFieldTouched(id as string, true);
       },
       onChange: (_event: any, data: DropdownProps) => {
-        props.setFieldValue(id, data.value);
+        props.setFieldValue(id as string, data.value);
       }
     }} />;
   };
@@ -138,6 +144,7 @@ export function withMediaForm<OuterProps, FormValues>
 
       const isFieldChanged = (field: FieldName | FieldObject): boolean => {
         const fieldName = typeof field === 'string' ? field : (field as FieldObject).id;
+
         return (
           dirty &&
           touched[fieldName] === true &&
@@ -159,6 +166,7 @@ export function withMediaForm<OuterProps, FormValues>
 
       const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | null) => {
         setSubmitting(false);
+
         if (txResult === null) {
           // Tx cancelled
 
@@ -187,6 +195,8 @@ export function withMediaForm<OuterProps, FormValues>
 
       return <Component {...allProps} />;
     };
+
   ResultComponent.displayName = `withMediaForm(${componentName(Component)})`;
+
   return ResultComponent;
 }
diff --git a/pioneer/packages/joy-media/src/common/MediaPlayerView.tsx b/pioneer/packages/joy-media/src/common/MediaPlayerView.tsx
index ff0d7a2193..959b18f1fc 100644
--- a/pioneer/packages/joy-media/src/common/MediaPlayerView.tsx
+++ b/pioneer/packages/joy-media/src/common/MediaPlayerView.tsx
@@ -5,7 +5,7 @@ import APlayer from 'react-aplayer';
 
 import { ApiProps } from '@polkadot/react-api/types';
 import { I18nProps } from '@polkadot/react-components/types';
-import { withCalls, withMulti } from '@polkadot/react-api/with';
+import { withCalls, withMulti } from '@polkadot/react-api/hoc';
 import { Option } from '@polkadot/types/codec';
 
 import translate from '../translate';
@@ -14,8 +14,8 @@ import { DataObject, ContentId } from '@joystream/types/media';
 import { VideoType } from '../schemas/video/Video';
 import { isAccountAChannelOwner } from '../channels/ChannelHelpers';
 import { ChannelEntity } from '../entities/ChannelEntity';
-import { useMyMembership } from '@polkadot/joy-utils/MyMembershipContext';
-import { JoyError } from '@polkadot/joy-utils/JoyStatus';
+import { useMyMembership } from '@polkadot/joy-utils/react/hooks';
+import { JoyError } from '@polkadot/joy-utils/react/components';
 
 const PLAYER_COMMON_PARAMS = {
   lang: 'en',
@@ -41,7 +41,7 @@ export type RequiredMediaPlayerProps = {
 type ContentProps = {
   contentType?: string;
   dataObjectOpt?: Option<DataObject>;
-  resolvedAssetUrl?: string;
+  resolvedAssetUrl: string;
 }
 
 type MediaPlayerViewProps = ApiProps & I18nProps &
@@ -78,6 +78,7 @@ function Player (props: PlayerProps) {
 
   if (prefix === 'video') {
     const video = { url, name, pic: cover };
+
     return <DPlayer
       video={video}
       {...PLAYER_COMMON_PARAMS}
@@ -86,6 +87,7 @@ function Player (props: PlayerProps) {
     />;
   } else if (prefix === 'audio') {
     const audio = { url, name, cover };
+
     return <APlayer
       audio={audio}
       {...PLAYER_COMMON_PARAMS}
@@ -101,14 +103,14 @@ function InnerComponent (props: MediaPlayerViewProps) {
   const { video, resolvedAssetUrl: url } = props;
 
   const { dataObjectOpt, channel } = props;
+  const { myAccountId } = useMyMembership();
+
   if (!dataObjectOpt || dataObjectOpt.isNone) {
     return null;
   }
 
   // TODO extract and show the next info from dataObject:
   // {"owner":"5GSMNn8Sy8k64mGUWPDafjMZu9bQNX26GujbBQ1LeJpNbrfg","added_at":{"block":2781,"time":1582750854000},"type_id":1,"size":3664485,"liaison":"5HN528fspu4Jg3KXWm7Pu7aUK64RSBz2ZSbwo1XKR9iz3hdY","liaison_judgement":1,"ipfs_content_id":"QmNk4QczoJyPTAKdfoQna6KhAz3FwfjpKyRBXAZHG5djYZ"}
-
-  const { myAccountId } = useMyMembership();
   const iAmOwner = isAccountAChannelOwner(channel, myAccountId);
 
   return (
diff --git a/pioneer/packages/joy-media/src/common/MediaPlayerWithResolver.tsx b/pioneer/packages/joy-media/src/common/MediaPlayerWithResolver.tsx
index 73c32612ff..101f305322 100644
--- a/pioneer/packages/joy-media/src/common/MediaPlayerWithResolver.tsx
+++ b/pioneer/packages/joy-media/src/common/MediaPlayerWithResolver.tsx
@@ -1,20 +1,20 @@
 import React, { useState, useEffect } from 'react';
-import axios, { CancelTokenSource } from 'axios';
+import axios, { CancelTokenSource, AxiosError } from 'axios';
 import _ from 'lodash';
 
 import { ApiProps } from '@polkadot/react-api/types';
 import { I18nProps } from '@polkadot/react-components/types';
-import { withMulti } from '@polkadot/react-api/with';
-import { Option } from '@polkadot/types/codec';
-import { StorageProviderId, Worker } from '@joystream/types/working-group';
+import { withMulti } from '@polkadot/react-api/hoc';
+import { Option, Vec } from '@polkadot/types/codec';
 
 import translate from '../translate';
 import { DiscoveryProviderProps, withDiscoveryProvider } from '../DiscoveryProvider';
 import { DataObjectStorageRelationshipId, DataObjectStorageRelationship } from '@joystream/types/media';
 import { Message } from 'semantic-ui-react';
 import { MediaPlayerView, RequiredMediaPlayerProps } from './MediaPlayerView';
-import { JoyInfo } from '@polkadot/joy-utils/JoyStatus';
-import { MultipleLinkedMapEntry } from '@polkadot/joy-utils/index';
+import { JoyInfo } from '@polkadot/joy-utils/react/components';
+import { useTransport } from '@polkadot/joy-utils/react/hooks';
+import { isObjectWithProperties } from '@polkadot/joy-utils/functions/misc';
 
 type Props = ApiProps & I18nProps & DiscoveryProviderProps & RequiredMediaPlayerProps;
 
@@ -24,56 +24,46 @@ function newCancelSource (): CancelTokenSource {
 
 function InnerComponent (props: Props) {
   const { contentId, api, discoveryProvider } = props;
+  const transport = useTransport();
 
   const [error, setError] = useState<Error>();
   const [resolvedAssetUrl, setResolvedAssetUrl] = useState<string>();
   const [contentType, setContentType] = useState<string>();
   const [cancelSource, setCancelSource] = useState<CancelTokenSource>(newCancelSource());
 
-  const getActiveStorageProviderIds = async (): Promise<StorageProviderId[]> => {
-    const nextId = await api.query.storageWorkingGroup.nextWorkerId() as StorageProviderId;
-    // This is chain specfic, but if next id is still 0, it means no workers have been added,
-    // so the workerById is empty
-    if (nextId.eq(0)) {
-      return [];
-    }
-
-    const workers = new MultipleLinkedMapEntry<StorageProviderId, Worker>(
-      StorageProviderId,
-      Worker,
-      await api.query.storageWorkingGroup.workerById()
-    );
-
-    return workers.linked_keys;
-  };
-
   const resolveAsset = async () => {
     setError(undefined);
     setCancelSource(newCancelSource());
 
-    const rids: DataObjectStorageRelationshipId[] = await api.query.dataObjectStorageRegistry.relationshipsByContentId(contentId) as any;
+    const rids = await api.query.dataObjectStorageRegistry.relationshipsByContentId<Vec<DataObjectStorageRelationshipId>>(contentId);
 
-    const allRelationships: Option<DataObjectStorageRelationship>[] = await Promise.all(rids.map((id) => api.query.dataObjectStorageRegistry.relationships(id))) as any;
+    const allRelationships = await Promise.all(
+      rids.map((id) =>
+        api.query.dataObjectStorageRegistry.relationships<Option<DataObjectStorageRelationship>>(id)
+      )
+    );
 
     // Providers that have signalled onchain that they have the asset
-    let readyProviders = allRelationships.filter(r => r.isSome).map(r => r.unwrap())
-      .filter(r => r.ready)
-      .map(r => r.storage_provider);
+    let readyProviders = allRelationships.filter((r) => r.isSome).map((r) => r.unwrap())
+      .filter((r) => r.ready)
+      .map((r) => r.storage_provider);
 
     // runtime doesn't currently guarantee unique set
-    readyProviders = _.uniqBy(readyProviders, provider => provider.toString());
+    readyProviders = _.uniqBy(readyProviders, (provider) => provider.toString());
 
     if (!readyProviders.length) {
       setError(new Error('No Storage Providers found storing this content'));
+
       return;
     }
 
+    const activeProviders = (await transport.workingGroups.allWorkers('Storage')).map(([id]) => id);
+
     // filter out providers no longer active - relationships of providers that have left
     // are not pruned onchain.
-    const activeProviders = await getActiveStorageProviderIds();
-    readyProviders = _.intersectionBy(activeProviders, readyProviders, provider => provider.toString());
+    readyProviders = _.intersectionBy(activeProviders, readyProviders, (provider) => provider.toString());
 
-    console.log(`Found ${readyProviders.length} providers ready to serve content: ${readyProviders}`);
+    console.log(`Found ${readyProviders.length} providers ready to serve content: ${readyProviders.join(', ')}`);
 
     // shuffle to spread the load
     readyProviders = _.shuffle(readyProviders);
@@ -84,9 +74,11 @@ function InnerComponent (props: Props) {
     // loop over providers until we find one that responds
     while (readyProviders.length) {
       const provider = readyProviders.shift();
+
       if (!provider) continue;
 
       let assetUrl: string | undefined;
+
       try {
         assetUrl = await discoveryProvider.resolveAssetEndpoint(provider, contentId.encode(), cancelSource.token);
       } catch (err) {
@@ -100,16 +92,23 @@ function InnerComponent (props: Props) {
       try {
         console.log('Check URL of resolved asset:', assetUrl);
         const response = await axios.head(assetUrl, { cancelToken: cancelSource.token });
+        const headers = response.headers as Record<string, string | undefined>;
 
-        setContentType(response.headers['content-type'] || 'video/video');
+        setContentType(headers['content-type'] || 'video/video');
         setResolvedAssetUrl(assetUrl);
 
         return;
-      } catch (err) {
+      } catch (e) {
+        const err = e as unknown;
+
         if (axios.isCancel(err)) {
           return;
         } else {
-          if (!err.response || (err.response.status >= 500 && err.response.status <= 504)) {
+          const response = isObjectWithProperties(err, 'response')
+            ? (err as AxiosError).response
+            : undefined;
+
+          if (!response || (response.status >= 500 && response.status <= 504)) {
             // network connection error
             discoveryProvider.reportUnreachable(provider);
           }
@@ -124,7 +123,7 @@ function InnerComponent (props: Props) {
   };
 
   useEffect(() => {
-    resolveAsset();
+    void resolveAsset();
 
     return () => {
       cancelSource.cancel();
@@ -149,6 +148,7 @@ function InnerComponent (props: Props) {
   }
 
   const playerProps = { ...props, contentType, resolvedAssetUrl };
+
   return <MediaPlayerView {...playerProps} />;
 }
 
diff --git a/pioneer/packages/joy-media/src/common/TypeHelpers.ts b/pioneer/packages/joy-media/src/common/TypeHelpers.ts
index 4feaa33d92..8a83388b4f 100644
--- a/pioneer/packages/joy-media/src/common/TypeHelpers.ts
+++ b/pioneer/packages/joy-media/src/common/TypeHelpers.ts
@@ -1,4 +1,5 @@
 import BN from 'bn.js';
+import { createType } from '@joystream/types';
 import { ChannelId } from '@joystream/types/content-working-group';
 import { EntityId, ClassId } from '@joystream/types/versioned-store';
 
@@ -16,9 +17,9 @@ export function asChannelId (id: AnyChannelId): ChannelId {
   if (id instanceof ChannelId) {
     return id;
   } else if (canBeId(id)) {
-    return new ChannelId(id);
+    return createType('ChannelId', id);
   } else {
-    throw new Error(`Not supported format for Channel id: ${id}`);
+    throw new Error(`Not supported format for Channel id: ${typeof id === 'object' ? id.constructor.name : id}`);
   }
 }
 
@@ -26,9 +27,9 @@ export function asEntityId (id: AnyEntityId): EntityId {
   if (id instanceof EntityId) {
     return id;
   } else if (canBeId(id)) {
-    return new EntityId(id);
+    return createType('EntityId', id);
   } else {
-    throw new Error(`Not supported format for Entity id: ${id}`);
+    throw new Error(`Not supported format for Entity id: ${typeof id === 'object' ? id.constructor.name : id}`);
   }
 }
 
@@ -36,8 +37,8 @@ export function asClassId (id: AnyClassId): ClassId {
   if (id instanceof ClassId) {
     return id;
   } else if (canBeId(id)) {
-    return new ClassId(id);
+    return createType('ClassId', id);
   } else {
-    throw new Error(`Not supported format for Class id: ${id}`);
+    throw new Error(`Not supported format for Class id: ${typeof id === 'object' ? id.constructor.name : id}`);
   }
 }
diff --git a/pioneer/packages/joy-utils-old/src/images.ts b/pioneer/packages/joy-media/src/common/images.tsx
similarity index 94%
rename from pioneer/packages/joy-utils-old/src/images.ts
rename to pioneer/packages/joy-media/src/common/images.tsx
index c246b7bbd5..859dedbe78 100644
--- a/pioneer/packages/joy-utils-old/src/images.ts
+++ b/pioneer/packages/joy-media/src/common/images.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const DEFAULT_THUMBNAIL_URL = 'images/default-thumbnail.png';
 
 // This is a hack to just satisfy TypeScript compiler.
@@ -8,6 +10,7 @@ type ImageOnErrorEvent = EventTarget & {
 
 export function onImageError (event: React.SyntheticEvent<HTMLImageElement, Event>) {
   const target = event.target as ImageOnErrorEvent;
+
   // Set onerror callback to undefined to prevent infinite callbacks when image src path fails:
   target.onerror = undefined;
   target.src = DEFAULT_THUMBNAIL_URL;
diff --git a/pioneer/packages/joy-media/src/common/index.css b/pioneer/packages/joy-media/src/common/index.scss
similarity index 100%
rename from pioneer/packages/joy-media/src/common/index.css
rename to pioneer/packages/joy-media/src/common/index.scss
diff --git a/pioneer/packages/joy-media/src/explore/AllChannels.tsx b/pioneer/packages/joy-media/src/explore/AllChannels.tsx
index 86a3cf5046..dffbf7d14d 100644
--- a/pioneer/packages/joy-media/src/explore/AllChannels.tsx
+++ b/pioneer/packages/joy-media/src/explore/AllChannels.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Section from '@polkadot/joy-utils/Section';
+import { Section } from '@polkadot/joy-utils/react/components';
 import { MediaView } from '../MediaView';
 import { ChannelEntity } from '../entities/ChannelEntity';
 import { ChannelPreview } from '../channels/ChannelPreview';
diff --git a/pioneer/packages/joy-media/src/explore/AllVideos.tsx b/pioneer/packages/joy-media/src/explore/AllVideos.tsx
index 588981f2d5..83fdda698d 100644
--- a/pioneer/packages/joy-media/src/explore/AllVideos.tsx
+++ b/pioneer/packages/joy-media/src/explore/AllVideos.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Section from '@polkadot/joy-utils/Section';
+import { Section } from '@polkadot/joy-utils/react/components';
 import { VideoPreviewProps, VideoPreview } from '../video/VideoPreview';
 import { MediaView } from '../MediaView';
 
diff --git a/pioneer/packages/joy-media/src/explore/ExploreContent.tsx b/pioneer/packages/joy-media/src/explore/ExploreContent.tsx
index b8a1aba49e..286d92e828 100644
--- a/pioneer/packages/joy-media/src/explore/ExploreContent.tsx
+++ b/pioneer/packages/joy-media/src/explore/ExploreContent.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import Section from '@polkadot/joy-utils/Section';
+import { Section } from '@polkadot/joy-utils/react/components';
 import { VideoPreviewProps, VideoPreview } from '../video/VideoPreview';
 import { ChannelEntity } from '../entities/ChannelEntity';
 import { ChannelPreview } from '../channels/ChannelPreview';
diff --git a/pioneer/packages/joy-media/src/explore/PlayContent.tsx b/pioneer/packages/joy-media/src/explore/PlayContent.tsx
index 96f28b7cf3..dd5e86225b 100644
--- a/pioneer/packages/joy-media/src/explore/PlayContent.tsx
+++ b/pioneer/packages/joy-media/src/explore/PlayContent.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { MusicAlbumPreviewProps, MusicAlbumPreview } from '../music/MusicAlbumPreview';
 import { MusicTrackReaderPreviewProps, MusicTrackReaderPreview } from '../music/MusicTrackReaderPreview';
-import { Pluralize } from '@polkadot/joy-utils/Pluralize';
+import { Pluralize } from '@polkadot/joy-utils/react/components';
 import { Table } from 'semantic-ui-react';
 import { ChannelEntity } from '../entities/ChannelEntity';
 import { ChannelPreview } from '../channels/ChannelPreview';
@@ -85,7 +85,7 @@ export function PlayContent (props: Props) {
     {featuredAlbums.length > 0 &&
       <div className='JoyPlayAlbum_RightSidePanel'>
         <h3>Featured albums</h3>
-        {featuredAlbums.map(x => <MusicAlbumPreview key={x.id} {...x} size={170} />)}
+        {featuredAlbums.map((x) => <MusicAlbumPreview key={x.id} {...x} size={170} />)}
       </div>
     }
   </div>;
diff --git a/pioneer/packages/joy-media/src/index.css b/pioneer/packages/joy-media/src/index.scss
similarity index 96%
rename from pioneer/packages/joy-media/src/index.css
rename to pioneer/packages/joy-media/src/index.scss
index 2b7395c214..6b4a55e972 100644
--- a/pioneer/packages/joy-media/src/index.css
+++ b/pioneer/packages/joy-media/src/index.scss
@@ -41,6 +41,11 @@
     width: 100%;
     max-width: 600px;
   }
+
+  .EditMetaForm {
+    flex-grow: 1;
+    max-width: 600px;
+  }
 }
 
 .PlayBox {
@@ -72,9 +77,6 @@
   .MediaCell {
     width: 25%;
 
-    &.MyContent {
-      /* background-color: #fff8e1; */
-    }
     &:hover {
       background-color: #deeffc;
     }
diff --git a/pioneer/packages/joy-media/src/index.tsx b/pioneer/packages/joy-media/src/index.tsx
index c499fa2529..5a2fd2b17e 100644
--- a/pioneer/packages/joy-media/src/index.tsx
+++ b/pioneer/packages/joy-media/src/index.tsx
@@ -3,15 +3,16 @@ import React from 'react';
 import { Route, Switch } from 'react-router';
 
 import { AppProps, I18nProps } from '@polkadot/react-components/types';
-import Tabs, { TabItem } from '@polkadot/react-components/Tabs';
+import Tabs from '@polkadot/react-components/Tabs';
+import { TabItem } from '@polkadot/react-components/Tabs/types';
 import { ApiProps } from '@polkadot/react-api/types';
-import { withMulti } from '@polkadot/react-api/with';
+import { withMulti } from '@polkadot/react-api/hoc';
 
-import './index.css';
-import './common/index.css';
+import './index.scss';
+import './common/index.scss';
 
 import translate from './translate';
-import { useMyAccount } from '@polkadot/joy-utils/MyAccountContext';
+import { useMyAccount } from '@polkadot/joy-utils/react/hooks';
 import { UploadWithRouter } from './Upload';
 import { DiscoveryProviderProps, DiscoveryProviderProvider } from './DiscoveryProvider';
 import { SubstrateTransportProvider } from './TransportContext';
@@ -25,7 +26,7 @@ import { AllVideosView } from './explore/AllVideos';
 import { AllChannelsView } from './explore/AllChannels';
 // import { VideosByOwner } from './video/VideosByOwner';
 
-type Props = AppProps & I18nProps & ApiProps & DiscoveryProviderProps & {};
+type Props = AppProps & I18nProps & ApiProps & DiscoveryProviderProps;
 
 function App (props: Props) {
   const { t, basePath } = props;
@@ -45,7 +46,7 @@ function App (props: Props) {
     //   name: `account/${myAddress}/videos`,
     //   text: t('My videos')
     // }
-  ].filter(x => x !== undefined) as TabItem[];
+  ].filter((x) => x !== undefined) as TabItem[];
 
   return (
     <SubstrateTransportProvider>
diff --git a/pioneer/packages/joy-media/src/mocks/ContentLicense.mock.ts b/pioneer/packages/joy-media/src/mocks/ContentLicense.mock.ts
index e9c5ffc99d..09eb0f4525 100644
--- a/pioneer/packages/joy-media/src/mocks/ContentLicense.mock.ts
+++ b/pioneer/packages/joy-media/src/mocks/ContentLicense.mock.ts
@@ -9,6 +9,6 @@ const values = [
 ];
 
 export const AllContentLicenses: ContentLicenseType[] =
-  values.map(value => ({ id: newEntityId(), value })) as unknown as ContentLicenseType[]; // A hack to fix TS compilation.
+  values.map((value) => ({ id: newEntityId(), value })) as unknown as ContentLicenseType[]; // A hack to fix TS compilation.
 
 export const ContentLicense = AllContentLicenses[0];
diff --git a/pioneer/packages/joy-media/src/mocks/Language.mock.ts b/pioneer/packages/joy-media/src/mocks/Language.mock.ts
index 70ebd051fe..c4ecfc380f 100644
--- a/pioneer/packages/joy-media/src/mocks/Language.mock.ts
+++ b/pioneer/packages/joy-media/src/mocks/Language.mock.ts
@@ -6,6 +6,6 @@ const values = [
 ];
 
 export const AllLanguages: LanguageType[] =
-  values.map(value => ({ id: newEntityId(), value })) as unknown as LanguageType[]; // A hack to fix TS compilation.
+  values.map((value) => ({ id: newEntityId(), value })) as unknown as LanguageType[]; // A hack to fix TS compilation.
 
 export const Language = AllLanguages[0];
diff --git a/pioneer/packages/joy-media/src/mocks/MediaObject.mock.ts b/pioneer/packages/joy-media/src/mocks/MediaObject.mock.ts
index 7fce1ed0ee..bfd0cac211 100644
--- a/pioneer/packages/joy-media/src/mocks/MediaObject.mock.ts
+++ b/pioneer/packages/joy-media/src/mocks/MediaObject.mock.ts
@@ -12,6 +12,6 @@ const values = [
 ];
 
 export const AllMediaObjects: MediaObjectType[] =
-  values.map(value => ({ id: newEntityId(), value })) as unknown as MediaObjectType[]; // A hack to fix TS compilation.
+  values.map((value) => ({ id: newEntityId(), value })) as unknown as MediaObjectType[]; // A hack to fix TS compilation.
 
 export const MediaObject = AllMediaObjects[0];
diff --git a/pioneer/packages/joy-media/src/mocks/MusicGenre.mock.ts b/pioneer/packages/joy-media/src/mocks/MusicGenre.mock.ts
index 9c005ed01d..c412d95ed9 100644
--- a/pioneer/packages/joy-media/src/mocks/MusicGenre.mock.ts
+++ b/pioneer/packages/joy-media/src/mocks/MusicGenre.mock.ts
@@ -26,6 +26,6 @@ const values = [
 ];
 
 export const AllMusicGenres: MusicGenreType[] =
-  values.map(value => ({ id: newEntityId(), value })) as unknown as MusicGenreType[]; // A hack to fix TS compilation.
+  values.map((value) => ({ id: newEntityId(), value })) as unknown as MusicGenreType[]; // A hack to fix TS compilation.
 
 export const MusicGenre = AllMusicGenres[0];
diff --git a/pioneer/packages/joy-media/src/mocks/MusicMood.mock.ts b/pioneer/packages/joy-media/src/mocks/MusicMood.mock.ts
index b2624c0176..b7c871ad61 100644
--- a/pioneer/packages/joy-media/src/mocks/MusicMood.mock.ts
+++ b/pioneer/packages/joy-media/src/mocks/MusicMood.mock.ts
@@ -294,6 +294,6 @@ const values = [
 ];
 
 export const AllMusicMoods: MusicMoodType[] =
-  values.map(value => ({ id: newEntityId(), value })) as unknown as MusicMoodType[]; // A hack to fix TS compilation.
+  values.map((value) => ({ id: newEntityId(), value })) as unknown as MusicMoodType[]; // A hack to fix TS compilation.
 
 export const MusicMood = AllMusicMoods[0];
diff --git a/pioneer/packages/joy-media/src/mocks/MusicTheme.mock.ts b/pioneer/packages/joy-media/src/mocks/MusicTheme.mock.ts
index 20373fb812..af1db48ad6 100644
--- a/pioneer/packages/joy-media/src/mocks/MusicTheme.mock.ts
+++ b/pioneer/packages/joy-media/src/mocks/MusicTheme.mock.ts
@@ -187,6 +187,6 @@ const values = [
 ];
 
 export const AllMusicThemes: MusicThemeType[] =
-  values.map(value => ({ id: newEntityId(), value })) as unknown as MusicThemeType[]; // A hack to fix TS compilation.
+  values.map((value) => ({ id: newEntityId(), value })) as unknown as MusicThemeType[]; // A hack to fix TS compilation.
 
 export const MusicTheme = AllMusicThemes[0];
diff --git a/pioneer/packages/joy-media/src/mocks/PublicationStatus.mock.ts b/pioneer/packages/joy-media/src/mocks/PublicationStatus.mock.ts
index 084b3dcfbd..acd9fe0937 100644
--- a/pioneer/packages/joy-media/src/mocks/PublicationStatus.mock.ts
+++ b/pioneer/packages/joy-media/src/mocks/PublicationStatus.mock.ts
@@ -6,7 +6,7 @@ function newEntity (value: string): PublicationStatusType {
 }
 
 export const PublicationStatus = {
-  Publiс: newEntity('Publiс'),
+  Publiс: newEntity('Public'),
   Unlisted: newEntity('Unlisted')
 };
 
diff --git a/pioneer/packages/joy-media/src/mocks/VideoCategory.mock.ts b/pioneer/packages/joy-media/src/mocks/VideoCategory.mock.ts
index d235004232..8eada98733 100644
--- a/pioneer/packages/joy-media/src/mocks/VideoCategory.mock.ts
+++ b/pioneer/packages/joy-media/src/mocks/VideoCategory.mock.ts
@@ -20,6 +20,6 @@ const values = [
 ];
 
 export const AllVideoCategories: VideoCategoryType[] =
-  values.map(value => ({ id: newEntityId(), value })) as unknown as VideoCategoryType[]; // A hack to fix TS compilation.
+  values.map((value) => ({ id: newEntityId(), value })) as unknown as VideoCategoryType[]; // A hack to fix TS compilation.
 
 export const VideoCategory = AllVideoCategories[0];
diff --git a/pioneer/packages/joy-media/src/music/EditMusicAlbum.tsx b/pioneer/packages/joy-media/src/music/EditMusicAlbum.tsx
index 4d8cd00f27..67c11868a1 100644
--- a/pioneer/packages/joy-media/src/music/EditMusicAlbum.tsx
+++ b/pioneer/packages/joy-media/src/music/EditMusicAlbum.tsx
@@ -3,8 +3,8 @@ import { Button, Tab } from 'semantic-ui-react';
 import { Form, withFormik } from 'formik';
 import { History } from 'history';
 
-import TxButton from '@polkadot/joy-utils/TxButton';
-import { onImageError } from '@polkadot/joy-utils/images';
+import { TxButton } from '@polkadot/joy-utils/react/components';
+import { onImageError } from '../common/images';
 import { ReorderableTracks } from './ReorderableTracks';
 import { MusicAlbumValidationSchema, MusicAlbumType, MusicAlbumClass as Fields, MusicAlbumFormValues, MusicAlbumToFormValues } from '../schemas/music/MusicAlbum';
 import { withMediaForm, MediaFormProps, datePlaceholder } from '../common/MediaForms';
@@ -123,7 +123,6 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
   const renderMainButton = () =>
     <TxButton
       type='submit'
-      size='large'
       isDisabled={!dirty || isSubmitting}
       label={isNew
         ? 'Publish'
@@ -148,7 +147,7 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
 
       {tabs}
 
-      <LabelledField style={{ marginTop: '1rem' }} {...props}>
+      <LabelledField style={{ marginTop: '1rem' }} {...props} flex>
         {renderMainButton()}
         <Button
           type='button'
@@ -167,6 +166,7 @@ export const EditForm = withFormik<OuterProps, FormValues>({
   // Transform outer props into form values
   mapPropsToValues: (props): FormValues => {
     const { entity } = props;
+
     return MusicAlbumToFormValues(entity);
   },
 
diff --git a/pioneer/packages/joy-media/src/music/EditMusicAlbum.view.tsx b/pioneer/packages/joy-media/src/music/EditMusicAlbum.view.tsx
index 4e52b8657c..7ba8eb9154 100644
--- a/pioneer/packages/joy-media/src/music/EditMusicAlbum.view.tsx
+++ b/pioneer/packages/joy-media/src/music/EditMusicAlbum.view.tsx
@@ -8,6 +8,7 @@ export const EditMusicAlbumView = MediaView<OuterProps>({
     const { transport, id } = props;
     const entity = id ? await transport.musicAlbumById(id) : undefined;
     const opts = await transport.dropdownOptions();
+
     return { entity, opts };
   }
 });
diff --git a/pioneer/packages/joy-media/src/music/MusicAlbumPreview.tsx b/pioneer/packages/joy-media/src/music/MusicAlbumPreview.tsx
index 3281bdf322..0acc51fc0f 100644
--- a/pioneer/packages/joy-media/src/music/MusicAlbumPreview.tsx
+++ b/pioneer/packages/joy-media/src/music/MusicAlbumPreview.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from 'semantic-ui-react';
-import { Pluralize } from '@polkadot/joy-utils/Pluralize';
+import { Pluralize } from '@polkadot/joy-utils/react/components';
 import { BgImg } from '../common/BgImg';
 import { ChannelEntity } from '../entities/ChannelEntity';
 
diff --git a/pioneer/packages/joy-media/src/music/MusicAlbumTracks.tsx b/pioneer/packages/joy-media/src/music/MusicAlbumTracks.tsx
index ff48a86e2e..9fa63c7a27 100644
--- a/pioneer/packages/joy-media/src/music/MusicAlbumTracks.tsx
+++ b/pioneer/packages/joy-media/src/music/MusicAlbumTracks.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Button, CheckboxProps } from 'semantic-ui-react';
-import { Pluralize } from '@polkadot/joy-utils/Pluralize';
+import { Pluralize } from '@polkadot/joy-utils/react/components';
 import { EditableMusicTrackPreviewProps, MusicTrackPreview } from './MusicTrackPreview';
 import { MusicAlbumPreviewProps, MusicAlbumPreview } from './MusicAlbumPreview';
 
@@ -21,6 +21,7 @@ export function TracksOfMyMusicAlbum (props: TracksOfMyMusicAlbumProps) {
     data: CheckboxProps
   ) => {
     const set = new Set(idxsOfSelectedTracks);
+
     data.checked
       ? set.add(trackIdx)
       : set.delete(trackIdx)
diff --git a/pioneer/packages/joy-media/src/music/MusicTrackPreview.tsx b/pioneer/packages/joy-media/src/music/MusicTrackPreview.tsx
index 09b980fe71..200374860e 100644
--- a/pioneer/packages/joy-media/src/music/MusicTrackPreview.tsx
+++ b/pioneer/packages/joy-media/src/music/MusicTrackPreview.tsx
@@ -35,10 +35,11 @@ export function MusicTrackPreview (props: EditableMusicTrackPreviewProps) {
     } catch (err) {
       console.log('Error during checkbox change:', err);
     }
+
     setChecked(d.checked || false);
   };
 
-  return <div className={`JoyMusicTrackPreview ${checked && 'SelectedItem'} ${props.isDraggable && 'DraggableItem'}`}>
+  return <div className={`JoyMusicTrackPreview ${checked ? 'SelectedItem' : ''} ${props.isDraggable ? 'DraggableItem' : ''}`}>
     {props.onSelect && <div className='CheckboxCell'>
       <Checkbox checked={checked} onChange={onChange} />
     </div>}
diff --git a/pioneer/packages/joy-media/src/music/MusicTrackReaderPreview.tsx b/pioneer/packages/joy-media/src/music/MusicTrackReaderPreview.tsx
index caccabf532..9a834a5423 100644
--- a/pioneer/packages/joy-media/src/music/MusicTrackReaderPreview.tsx
+++ b/pioneer/packages/joy-media/src/music/MusicTrackReaderPreview.tsx
@@ -14,6 +14,7 @@ export function MusicTrackReaderPreview (props: MusicTrackReaderPreviewProps) {
   const { size = 200, orientation = 'vertical' } = props;
 
   const descStyle: CSSProperties = {};
+
   if (orientation === 'vertical') {
     descStyle.maxWidth = size;
   }
diff --git a/pioneer/packages/joy-media/src/music/MyMusicTracks.tsx b/pioneer/packages/joy-media/src/music/MyMusicTracks.tsx
index 2f5a964617..ecd6f1b1ac 100644
--- a/pioneer/packages/joy-media/src/music/MyMusicTracks.tsx
+++ b/pioneer/packages/joy-media/src/music/MyMusicTracks.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { Button, CheckboxProps, Dropdown, Message } from 'semantic-ui-react';
 
-import { Pluralize } from '@polkadot/joy-utils/Pluralize';
-import Section from '@polkadot/joy-utils/Section';
+import { Pluralize, Section } from '@polkadot/joy-utils/react/components';
+
 import { EditableMusicTrackPreviewProps, MusicTrackPreview } from './MusicTrackPreview';
 import { ReorderableTracks } from './ReorderableTracks';
 import { MusicAlbumPreviewProps } from './MusicAlbumPreview';
@@ -36,14 +36,16 @@ export function MyMusicTracks (props: MyMusicTracksProps) {
   const selectedCount = idsOfSelectedTracks.size;
 
   let longestAlbumName = '';
-  albums.forEach(x => {
+
+  albums.forEach((x) => {
     if (longestAlbumName.length < x.title.length) {
       longestAlbumName = x.title;
     }
   });
 
-  const albumsDropdownOptions = albums.map(x => {
+  const albumsDropdownOptions = albums.map((x) => {
     const { id } = x;
+
     return {
       key: id,
       value: id,
@@ -67,7 +69,8 @@ export function MyMusicTracks (props: MyMusicTracksProps) {
     return <div style={style}>
       <Dropdown
         onChange={(_e, { value: id }) => {
-          const selectedAlbum = albums.find(x => x.id === id);
+          const selectedAlbum = albums.find((x) => x.id === id);
+
           if (selectedAlbum) {
             setAlbumName(selectedAlbum.title);
             setShowSecondScreen(true);
@@ -125,10 +128,10 @@ export function MyMusicTracks (props: MyMusicTracksProps) {
     </Section>;
   };
 
-  const selectedTracks = tracks.filter(track => idsOfSelectedTracks.has(track.id));
+  const selectedTracks = tracks.filter((track) => idsOfSelectedTracks.has(track.id));
 
   const renderReorderTracks = () => {
-    return <Section title={`Add tracks to album "${albumName}"`}>
+    return <Section title={`Add tracks to album "${albumName || ''}"`}>
 
       <Message
         info
@@ -138,8 +141,9 @@ export function MyMusicTracks (props: MyMusicTracksProps) {
 
       <ReorderableTracks
         tracks={selectedTracks}
-        onRemove={track => {
+        onRemove={(track) => {
           const set = new Set(idsOfSelectedTracks);
+
           set.delete(track.id);
           setIdsOfSelectedTracks(set);
         }}
diff --git a/pioneer/packages/joy-media/src/music/ReorderableTracks.tsx b/pioneer/packages/joy-media/src/music/ReorderableTracks.tsx
index 258885b955..717b2765d6 100644
--- a/pioneer/packages/joy-media/src/music/ReorderableTracks.tsx
+++ b/pioneer/packages/joy-media/src/music/ReorderableTracks.tsx
@@ -6,6 +6,7 @@ import { EditableMusicTrackPreviewProps, MusicTrackPreview } from './MusicTrackP
 const reorder = (list: OrderableItem[], startIndex: number, endIndex: number) => {
   const result = Array.from(list);
   const [removed] = result.splice(startIndex, 1);
+
   result.splice(endIndex, 0, removed);
 
   return result;
@@ -72,7 +73,8 @@ export const ReorderableTracks = (props: Props) => {
                       withRemoveButton
                       onRemove={() => {
                         onRemove(item);
-                        const lessItems = items.filter(x => x.id !== item.id);
+                        const lessItems = items.filter((x) => x.id !== item.id);
+
                         setItems(lessItems);
                       }}
                     />
diff --git a/pioneer/packages/joy-media/src/schemas/channel/Channel.ts b/pioneer/packages/joy-media/src/schemas/channel/Channel.ts
index 26820320fa..d66922de8c 100644
--- a/pioneer/packages/joy-media/src/schemas/channel/Channel.ts
+++ b/pioneer/packages/joy-media/src/schemas/channel/Channel.ts
@@ -4,7 +4,7 @@ import { BlockNumber, AccountId } from '@polkadot/types/interfaces';
 import { ChannelContentTypeValue, PrincipalId, Channel, ChannelId, ChannelPublicationStatusValue, ChannelCurationStatusValue } from '@joystream/types/content-working-group';
 import { MemberId } from '@joystream/types/members';
 import { ChannelValidationConstraints } from '@polkadot/joy-media/transport';
-import { ValidationConstraint } from '@polkadot/joy-utils/ValidationConstraint';
+import { ValidationConstraint } from '@polkadot/joy-utils/types/ValidationConstraint';
 
 function textValidation (constraint?: ValidationConstraint) {
   if (!constraint) {
@@ -12,10 +12,12 @@ function textValidation (constraint?: ValidationConstraint) {
   }
 
   const { min, max } = constraint;
+
   return Yup.string()
     .min(min, `Text is too short. Minimum length is ${min} chars.`)
     .max(max, `Text is too long. Maximum length is ${max} chars.`);
 }
+
 export const buildChannelValidationSchema = (constraints?: ChannelValidationConstraints) =>
   Yup.object().shape({
     handle: textValidation(constraints?.handle).required('This field is required'),
@@ -56,19 +58,19 @@ export class ChannelCodec {
   static fromSubstrate (id: ChannelId, sub: Channel): ChannelType {
     return {
       id: id.toNumber(),
-      verified: sub.getBoolean('verified'),
-      handle: sub.getString('handle'),
-      title: sub.getOptionalString('title'),
-      description: sub.getOptionalString('description'),
-      avatar: sub.getOptionalString('avatar'),
-      banner: sub.getOptionalString('banner'),
-      content: sub.getEnumAsString<ChannelContentTypeValue>('content'),
-      owner: sub.getField('owner'),
-      roleAccount: sub.getField('role_account'),
-      publicationStatus: sub.getEnumAsString<ChannelPublicationStatusValue>('publication_status'),
-      curationStatus: sub.getEnumAsString<ChannelCurationStatusValue>('curation_status'),
-      created: sub.getField('created'),
-      principalId: sub.getField('principal_id')
+      verified: sub.verified.valueOf(),
+      handle: sub.handle.toString(),
+      title: sub.title.unwrapOr(undefined)?.toString(),
+      description: sub.description.unwrapOr(undefined)?.toString(),
+      avatar: sub.avatar.unwrapOr(undefined)?.toString(),
+      banner: sub.banner.unwrapOr(undefined)?.toString(),
+      content: sub.content.type,
+      owner: sub.owner,
+      roleAccount: sub.role_account,
+      publicationStatus: sub.publication_status.type,
+      curationStatus: sub.curation_status.type,
+      created: sub.created,
+      principalId: sub.principal_id
     };
   }
 }
diff --git a/pioneer/packages/joy-media/src/schemas/general/FeaturedContent.ts b/pioneer/packages/joy-media/src/schemas/general/FeaturedContent.ts
index a6e55ca28c..0712605dc0 100644
--- a/pioneer/packages/joy-media/src/schemas/general/FeaturedContent.ts
+++ b/pioneer/packages/joy-media/src/schemas/general/FeaturedContent.ts
@@ -30,8 +30,8 @@ export class FeaturedContentCodec extends EntityCodec<FeaturedContentType> { }
 export function FeaturedContentToFormValues (entity?: FeaturedContentType): FeaturedContentFormValues {
   return {
     topVideo: (entity && entity.topVideo?.id) || 0,
-    featuredVideos: (entity && entity.featuredVideos?.map(x => x.id)) || [],
-    featuredAlbums: (entity && entity.featuredAlbums?.map(x => x.id)) || []
+    featuredVideos: (entity && entity.featuredVideos?.map((x) => x.id)) || [],
+    featuredAlbums: (entity && entity.featuredAlbums?.map((x) => x.id)) || []
   };
 }
 
diff --git a/pioneer/packages/joy-media/src/schemas/music/MusicAlbum.ts b/pioneer/packages/joy-media/src/schemas/music/MusicAlbum.ts
index 78f8881a18..8780a6937e 100644
--- a/pioneer/packages/joy-media/src/schemas/music/MusicAlbum.ts
+++ b/pioneer/packages/joy-media/src/schemas/music/MusicAlbum.ts
@@ -102,7 +102,7 @@ export function MusicAlbumToFormValues (entity?: MusicAlbumType): MusicAlbumForm
     genre: (entity && entity.genre?.id) || 0,
     mood: (entity && entity.mood?.id) || 0,
     theme: (entity && entity.theme?.id) || 0,
-    tracks: (entity && entity.tracks?.map(x => x.id)) || [],
+    tracks: (entity && entity.tracks?.map((x) => x.id)) || [],
     language: (entity && entity.language?.id) || 0,
     links: (entity && entity.links) || [],
     lyrics: (entity && entity.lyrics) || '',
diff --git a/pioneer/packages/joy-media/src/schemas/video/Video.ts b/pioneer/packages/joy-media/src/schemas/video/Video.ts
index 7131d3fde7..b16e7cd3c7 100644
--- a/pioneer/packages/joy-media/src/schemas/video/Video.ts
+++ b/pioneer/packages/joy-media/src/schemas/video/Video.ts
@@ -42,7 +42,7 @@ export type VideoFormValues = {
   object: number;
   publicationStatus: number;
   curationStatus: number;
-  explicit: boolean;
+  explicit: 'true' | 'false';
   license: number;
   attribution: string;
   channelId: number;
@@ -83,7 +83,7 @@ export function VideoToFormValues (entity?: VideoType): VideoFormValues {
     object: (entity && entity.object?.id) || 0,
     publicationStatus: (entity && entity.publicationStatus?.id) || 0,
     curationStatus: (entity && entity.curationStatus?.id) || 0,
-    explicit: (entity && entity.explicit) || false,
+    explicit: (entity && entity.explicit) ? 'true' : 'false',
     license: (entity && entity.license?.id) || 0,
     attribution: (entity && entity.attribution) || '',
     channelId: (entity && entity.channelId) || 0
diff --git a/pioneer/packages/joy-media/src/stories/ExploreContent.stories.tsx b/pioneer/packages/joy-media/src/stories/ExploreContent.stories.tsx
index f446771f75..1e0feed190 100644
--- a/pioneer/packages/joy-media/src/stories/ExploreContent.stories.tsx
+++ b/pioneer/packages/joy-media/src/stories/ExploreContent.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import '../common/index.css';
+import '../common/index.scss';
 
-import { ExploreContent } from '../explore/ExploreContent';
+import ExploreContent from '../explore/ExploreContent.view';
 import { withMockTransport } from './withMockTransport';
 
 export default {
diff --git a/pioneer/packages/joy-media/src/stories/MusicAlbumTracks.stories.tsx b/pioneer/packages/joy-media/src/stories/MusicAlbumTracks.stories.tsx
index f45d00a1c6..42f5a30a53 100644
--- a/pioneer/packages/joy-media/src/stories/MusicAlbumTracks.stories.tsx
+++ b/pioneer/packages/joy-media/src/stories/MusicAlbumTracks.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import '../common/index.css';
+import '../common/index.scss';
 
 import { EditForm } from '../music/EditMusicAlbum';
 import { MyMusicTracks } from '../music/MyMusicTracks';
@@ -7,7 +7,7 @@ import { MusicAlbumSamples } from './data/MusicAlbumSamples';
 import { albumTracks, AllMusicTrackSamples } from './data/MusicTrackSamples';
 import { withMockTransport } from './withMockTransport';
 import { EditMusicAlbumView } from '../music/EditMusicAlbum.view';
-import EntityId from '@joystream/types/versioned-store/EntityId';
+import { createType } from '@joystream/types';
 
 export default {
   title: 'Media | My music tracks',
@@ -19,7 +19,7 @@ export const DefaultState = () =>
 
 export const MockEditAlbumView = () =>
   <EditMusicAlbumView
-    id={new EntityId(1)}
+    id={createType('EntityId', 1)}
     tracks={albumTracks}
   />;
 
diff --git a/pioneer/packages/joy-media/src/stories/MusicChannel.stories.tsx b/pioneer/packages/joy-media/src/stories/MusicChannel.stories.tsx
index eff4f344e7..d7004e7879 100644
--- a/pioneer/packages/joy-media/src/stories/MusicChannel.stories.tsx
+++ b/pioneer/packages/joy-media/src/stories/MusicChannel.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import '../common/index.css';
+import '../common/index.scss';
 
 import { MockMusicChannel } from './data/ChannelSamples';
 import { ViewMusicChannel } from '../channels/ViewMusicChannel';
diff --git a/pioneer/packages/joy-media/src/stories/MyChannels.stories.tsx b/pioneer/packages/joy-media/src/stories/MyChannels.stories.tsx
index d3ab3fe063..fcd3c9c746 100644
--- a/pioneer/packages/joy-media/src/stories/MyChannels.stories.tsx
+++ b/pioneer/packages/joy-media/src/stories/MyChannels.stories.tsx
@@ -1,14 +1,13 @@
 import React from 'react';
-import '../common/index.css';
+import '../common/index.scss';
 
-import { GenericAccountId } from '@polkadot/types';
 import { ChannelsByOwner } from '../channels/ChannelsByOwner';
 import { AllMockChannels } from './data/ChannelSamples';
 import { withMockTransport } from './withMockTransport';
 import EditForm from '../channels/EditChannel';
 import { EditChannelView } from '../channels/EditChannel.view';
-import { ChannelId } from '@joystream/types/content-working-group';
 import { AccountIdSamples } from './data/AccountIdSamples';
+import { createType } from '@joystream/types';
 
 export default {
   title: 'Media | My channels',
@@ -16,7 +15,7 @@ export default {
 };
 
 // TODO pass to mocked MyMembershipContext provider via Stories decorators:
-const accountId = new GenericAccountId(AccountIdSamples.Alice);
+const accountId = createType('AccountId', AccountIdSamples.Alice);
 
 export const DefaultState = () =>
   <ChannelsByOwner accountId={accountId} />;
@@ -31,4 +30,4 @@ export const DefaultEditForm = () =>
   <EditForm />;
 
 export const MockEditFormView = () =>
-  <EditChannelView id={new ChannelId(1)} />;
+  <EditChannelView id={createType('ChannelId', 1)} />;
diff --git a/pioneer/packages/joy-media/src/stories/MyMusicAlbums.stories.tsx b/pioneer/packages/joy-media/src/stories/MyMusicAlbums.stories.tsx
index 90e711f10e..1c8dee2751 100644
--- a/pioneer/packages/joy-media/src/stories/MyMusicAlbums.stories.tsx
+++ b/pioneer/packages/joy-media/src/stories/MyMusicAlbums.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import '../common/index.css';
+import '../common/index.scss';
 
 import { MyMusicAlbums } from '../music/MyMusicAlbums';
 import { MusicAlbumSamples } from './data/MusicAlbumSamples';
diff --git a/pioneer/packages/joy-media/src/stories/Playback.stories.tsx b/pioneer/packages/joy-media/src/stories/Playback.stories.tsx
index d6f2efe5bd..c9bb66f50c 100644
--- a/pioneer/packages/joy-media/src/stories/Playback.stories.tsx
+++ b/pioneer/packages/joy-media/src/stories/Playback.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import '../common/index.css';
+import '../common/index.scss';
 
 import { PlayContent } from '../explore/PlayContent';
 import { PlayVideo } from '../video/PlayVideo';
@@ -8,7 +8,7 @@ import { Album1TrackSamples } from './data/MusicTrackSamples';
 import { MockMusicChannel, MockVideoChannel } from './data/ChannelSamples';
 import { withMockTransport } from './withMockTransport';
 import { Video } from '../mocks';
-import { EntityId } from '@joystream/types/versioned-store';
+import { createType } from '@joystream/types';
 
 export default {
   title: 'Media | Playback',
@@ -17,7 +17,7 @@ export default {
 
 export const PlayVideoStory = () =>
   <PlayVideo
-    id={new EntityId(Video.id)}
+    id={createType('EntityId', Video.id)}
     video={Video}
     channel={MockVideoChannel}
   />;
diff --git a/pioneer/packages/joy-media/src/stories/UploadAudio.stories.tsx b/pioneer/packages/joy-media/src/stories/UploadAudio.stories.tsx
index a770d2d711..6220ada3e4 100644
--- a/pioneer/packages/joy-media/src/stories/UploadAudio.stories.tsx
+++ b/pioneer/packages/joy-media/src/stories/UploadAudio.stories.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
 import { EditForm } from '../upload/UploadAudio';
-import '../index.css';
+import '../index.scss';
 
 import { ContentId } from '@joystream/types/media';
-import EntityId from '@joystream/types/versioned-store/EntityId';
 import { UploadAudioView } from '../upload/UploadAudio.view';
 import { withMockTransport } from './withMockTransport';
+import { registry, createType } from '@joystream/types';
 
 export default {
   title: 'Media | Upload audio',
   decorators: [withMockTransport]
 };
 
-const contentId = ContentId.generate();
+const contentId = ContentId.generate(registry);
 
 export const DefaultState = () =>
   <EditForm
@@ -22,5 +22,5 @@ export const DefaultState = () =>
 export const MockEditFormView = () =>
   <UploadAudioView
     contentId={contentId}
-    id={new EntityId(1)}
+    id={createType('EntityId', 1)}
   />;
diff --git a/pioneer/packages/joy-media/src/stories/UploadVideo.stories.tsx b/pioneer/packages/joy-media/src/stories/UploadVideo.stories.tsx
index 5c2913b575..53d4374039 100644
--- a/pioneer/packages/joy-media/src/stories/UploadVideo.stories.tsx
+++ b/pioneer/packages/joy-media/src/stories/UploadVideo.stories.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
 import { EditForm } from '../upload/UploadVideo';
-import '../index.css';
+import '../index.scss';
 
 import { ContentId } from '@joystream/types/media';
 import { withMockTransport } from './withMockTransport';
 import EditVideoView from '../upload/EditVideo.view';
-import EntityId from '@joystream/types/versioned-store/EntityId';
+import { createType, registry } from '@joystream/types';
 
 export default {
   title: 'Media | Upload video',
   decorators: [withMockTransport]
 };
 
-const contentId = ContentId.generate();
+const contentId = ContentId.generate(registry);
 
 export const DefaultState = () =>
   <EditForm
@@ -22,5 +22,5 @@ export const DefaultState = () =>
 export const MockEditFormView = () =>
   <EditVideoView
     contentId={contentId}
-    id={new EntityId(1)}
+    id={createType('EntityId', 1)}
   />;
diff --git a/pioneer/packages/joy-media/src/stories/data/AccountIdSamples.ts b/pioneer/packages/joy-media/src/stories/data/AccountIdSamples.ts
index d10e2a4fdd..f92637e53d 100644
--- a/pioneer/packages/joy-media/src/stories/data/AccountIdSamples.ts
+++ b/pioneer/packages/joy-media/src/stories/data/AccountIdSamples.ts
@@ -1,7 +1,7 @@
-import { GenericAccountId } from '@polkadot/types';
+import { createType } from '@joystream/types';
 
 export const AccountIdSamples = {
-  Alice: new GenericAccountId('5GNJqTPyNqANBkUVMN1LPPrxXnFouWXoe2wNSmmEoLctxiZY'),
-  Bob: new GenericAccountId('5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty'),
-  Charlie: new GenericAccountId('5FLSigC9HGRKVhB9FiEo4Y3koPsNmBmLJbpXg2mp1hXcS59Y')
+  Alice: createType('AccountId', '5GNJqTPyNqANBkUVMN1LPPrxXnFouWXoe2wNSmmEoLctxiZY'),
+  Bob: createType('AccountId', '5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty'),
+  Charlie: createType('AccountId', '5FLSigC9HGRKVhB9FiEo4Y3koPsNmBmLJbpXg2mp1hXcS59Y')
 };
diff --git a/pioneer/packages/joy-media/src/stories/data/ChannelSamples.ts b/pioneer/packages/joy-media/src/stories/data/ChannelSamples.ts
index 8afa50661d..fa0d8b541f 100644
--- a/pioneer/packages/joy-media/src/stories/data/ChannelSamples.ts
+++ b/pioneer/packages/joy-media/src/stories/data/ChannelSamples.ts
@@ -1,9 +1,7 @@
 import BN from 'bn.js';
 import { ChannelEntity } from '@polkadot/joy-media/entities/ChannelEntity';
-import { u32 } from '@polkadot/types';
 import { AccountIdSamples } from './AccountIdSamples';
-import { MemberId } from '@joystream/types/members';
-import { PrincipalId } from '@joystream/types/content-working-group';
+import { createType } from '@joystream/types';
 
 let id = 0;
 const nextId = () => ++id;
@@ -22,10 +20,10 @@ export const MockMusicChannel: ChannelEntity =
 
   publicationStatus: 'Unlisted',
   curationStatus: 'Censored',
-  owner: new MemberId(1),
+  owner: createType('MemberId', 1),
   roleAccount: AccountIdSamples.Alice,
-  principalId: new PrincipalId(1),
-  created: new u32(123456),
+  principalId: createType('PrincipalId', 1),
+  created: createType('u32', 123456),
 
   rewardEarned: new BN('4587'),
   contentItemsCount: 57
@@ -45,10 +43,10 @@ export const MockVideoChannel: ChannelEntity =
 
   publicationStatus: 'Public',
   curationStatus: 'Normal',
-  owner: new MemberId(1),
+  owner: createType('MemberId', 1),
   roleAccount: AccountIdSamples.Alice,
-  principalId: new PrincipalId(1),
-  created: new u32(123456),
+  principalId: createType('PrincipalId', 1),
+  created: createType('u32', 123456),
 
   rewardEarned: new BN('1820021'),
   contentItemsCount: 1529
diff --git a/pioneer/packages/joy-media/src/transport.mock.ts b/pioneer/packages/joy-media/src/transport.mock.ts
index a79f776ea5..febefef6e9 100644
--- a/pioneer/packages/joy-media/src/transport.mock.ts
+++ b/pioneer/packages/joy-media/src/transport.mock.ts
@@ -17,6 +17,7 @@ import { PublicationStatusType } from './schemas/general/PublicationStatus';
 import { VideoCategoryType } from './schemas/video/VideoCategory';
 import { ChannelEntity } from './entities/ChannelEntity';
 import { AllMockChannels } from './stories/data/ChannelSamples';
+import { mockPromise } from '@polkadot/joy-utils/transport/mock/base';
 
 export class MockTransport extends MediaTransport {
   constructor () {
@@ -29,7 +30,7 @@ export class MockTransport extends MediaTransport {
   }
 
   allChannels (): Promise<ChannelEntity[]> {
-    return this.promise(AllMockChannels);
+    return mockPromise(AllMockChannels);
   }
 
   channelValidationConstraints (): Promise<ChannelValidationConstraints> {
@@ -45,54 +46,54 @@ export class MockTransport extends MediaTransport {
   }
 
   allVideos (): Promise<VideoType[]> {
-    return this.promise(mocks.AllVideos);
+    return mockPromise(mocks.AllVideos);
   }
 
   allMusicTracks (): Promise<MusicTrackType[]> {
-    return this.promise(mocks.AllMusicTracks);
+    return mockPromise(mocks.AllMusicTracks);
   }
 
   allMusicAlbums (): Promise<MusicAlbumType[]> {
-    return this.promise(mocks.AllMusicAlbums);
+    return mockPromise(mocks.AllMusicAlbums);
   }
 
   featuredContent (): Promise<FeaturedContentType | undefined> {
-    return this.promise(mocks.FeaturedContent);
+    return mockPromise(mocks.FeaturedContent);
   }
 
   allContentLicenses (): Promise<ContentLicenseType[]> {
-    return this.promise(mocks.AllContentLicenses);
+    return mockPromise(mocks.AllContentLicenses);
   }
 
   allCurationStatuses (): Promise<CurationStatusType[]> {
-    return this.promise(mocks.AllCurationStatuses);
+    return mockPromise(mocks.AllCurationStatuses);
   }
 
   allLanguages (): Promise<LanguageType[]> {
-    return this.promise(mocks.AllLanguages);
+    return mockPromise(mocks.AllLanguages);
   }
 
   allMediaObjects (): Promise<MediaObjectType[]> {
-    return this.promise(mocks.AllMediaObjects);
+    return mockPromise(mocks.AllMediaObjects);
   }
 
   allMusicGenres (): Promise<MusicGenreType[]> {
-    return this.promise(mocks.AllMusicGenres);
+    return mockPromise(mocks.AllMusicGenres);
   }
 
   allMusicMoods (): Promise<MusicMoodType[]> {
-    return this.promise(mocks.AllMusicMoods);
+    return mockPromise(mocks.AllMusicMoods);
   }
 
   allMusicThemes (): Promise<MusicThemeType[]> {
-    return this.promise(mocks.AllMusicThemes);
+    return mockPromise(mocks.AllMusicThemes);
   }
 
   allPublicationStatuses (): Promise<PublicationStatusType[]> {
-    return this.promise(mocks.AllPublicationStatuses);
+    return mockPromise(mocks.AllPublicationStatuses);
   }
 
   allVideoCategories (): Promise<VideoCategoryType[]> {
-    return this.promise(mocks.AllVideoCategories);
+    return mockPromise(mocks.AllVideoCategories);
   }
 }
diff --git a/pioneer/packages/joy-media/src/transport.substrate.ts b/pioneer/packages/joy-media/src/transport.substrate.ts
index 64396c35f6..9a97c6bd05 100644
--- a/pioneer/packages/joy-media/src/transport.substrate.ts
+++ b/pioneer/packages/joy-media/src/transport.substrate.ts
@@ -19,17 +19,12 @@ import { ChannelEntity } from './entities/ChannelEntity';
 import { ChannelId, Channel } from '@joystream/types/content-working-group';
 import { ApiPromise } from '@polkadot/api/index';
 import { ApiProps } from '@polkadot/react-api/types';
-import { Vec } from '@polkadot/types';
-import { LinkageResult } from '@polkadot/types/codec/Linkage';
 import { ChannelCodec } from './schemas/channel/Channel';
 import { FeaturedContentType } from './schemas/general/FeaturedContent';
-import { AnyChannelId, asChannelId, AnyClassId, AnyEntityId } from './common/TypeHelpers';
-import { SimpleCache } from '@polkadot/joy-utils/SimpleCache';
-import { ValidationConstraint } from '@polkadot/joy-utils/ValidationConstraint';
-
-const FIRST_CHANNEL_ID = 1;
-const FIRST_CLASS_ID = 1;
-const FIRST_ENTITY_ID = 1;
+import { AnyChannelId, AnyClassId, AnyEntityId, asChannelId } from './common/TypeHelpers';
+import { SimpleCache } from '@polkadot/joy-utils/transport/SimpleCache';
+import { ValidationConstraint } from '@polkadot/joy-utils/types/ValidationConstraint';
+import { ids } from '@polkadot/joy-utils/transport/base';
 
 /**
  * There are entities that refer to other entities.
@@ -120,27 +115,14 @@ export class SubstrateTransport extends MediaTransport {
   // Channels (Content Working Group module)
   // -----------------------------------------------------------------
 
-  async nextChannelId (): Promise<ChannelId> {
-    return await this.cwgQuery().nextChannelId<ChannelId>();
-  }
-
   async allChannelIds (): Promise<ChannelId[]> {
-    let nextId = (await this.nextChannelId()).toNumber();
-    if (nextId < 1) nextId = 1;
-
-    const allIds: ChannelId[] = [];
-    for (let id = FIRST_CHANNEL_ID; id < nextId; id++) {
-      allIds.push(new ChannelId(id));
-    }
-
-    return allIds;
+    return ids<ChannelId>(this.cwgQuery().channelById);
   }
 
   async loadChannelsByIds (ids: AnyChannelId[]): Promise<ChannelEntity[]> {
-    const channelTuples = await this.cwgQuery().channelById.multi<LinkageResult>(ids);
+    const channels = await this.cwgQuery().channelById.multi<Channel>(ids);
 
-    return channelTuples.map((tuple, i) => {
-      const channel = tuple[0] as Channel;
+    return channels.map((channel, i) => {
       const id = asChannelId(ids[i]);
       const plain = ChannelCodec.fromSubstrate(id, channel);
 
@@ -154,11 +136,13 @@ export class SubstrateTransport extends MediaTransport {
 
   async allChannels (): Promise<ChannelEntity[]> {
     const ids = await this.allChannelIds();
+
     return await this.channelCache.getOrLoadByIds(ids);
   }
 
   protected async getValidationConstraint (constraintName: string): Promise<ValidationConstraint> {
     const constraint = await this.cwgQuery()[constraintName]<InputValidationLengthConstraint>();
+
     return {
       min: constraint.min.toNumber(),
       max: constraint.max.toNumber()
@@ -179,6 +163,7 @@ export class SubstrateTransport extends MediaTransport {
       this.getValidationConstraint('channelAvatarConstraint'),
       this.getValidationConstraint('channelBannerConstraint')
     ]);
+
     return {
       handle,
       title,
@@ -190,79 +175,61 @@ export class SubstrateTransport extends MediaTransport {
 
   // Classes (Versioned Store module)
   // -----------------------------------------------------------------
-
-  async nextClassId (): Promise<ClassId> {
-    return await this.vsQuery().nextClassId<ClassId>();
-  }
-
   async allClassIds (): Promise<ClassId[]> {
-    const nextId = (await this.nextClassId()).toNumber();
-
-    const allIds: ClassId[] = [];
-    for (let id = FIRST_CLASS_ID; id < nextId; id++) {
-      allIds.push(new ClassId(id));
-    }
-
-    return allIds;
+    return ids<ClassId>(this.vsQuery().classById);
   }
 
   async loadClassesByIds (ids: AnyClassId[]): Promise<Class[]> {
-    return await this.vsQuery().classById.multi<Vec<Class>>(ids) as unknown as Class[];
+    return await this.vsQuery().classById.multi<Class>(ids);
   }
 
   async allClasses (): Promise<Class[]> {
     const ids = await this.allClassIds();
+
     return await this.classCache.getOrLoadByIds(ids);
   }
 
   async getEntityCodecResolver (): Promise<EntityCodecResolver> {
     if (!this.entityCodecResolver) {
       const classes = await this.allClasses();
+
       this.entityCodecResolver = new EntityCodecResolver(classes);
     }
+
     return this.entityCodecResolver;
   }
 
   async classNamesToIdSet (classNames: ClassName[]): Promise<Set<string>> {
     const classNameToIdMap = await this.classIdByNameMap();
+
     return new Set(classNames
-      .map(name => {
+      .map((name) => {
         const classId = classNameToIdMap[name];
+
         return classId ? classId.toString() : undefined;
       })
-      .filter(classId => typeof classId !== 'undefined') as string[]
+      .filter((classId) => typeof classId !== 'undefined') as string[]
     );
   }
 
   // Entities (Versioned Store module)
   // -----------------------------------------------------------------
-
-  async nextEntityId (): Promise<EntityId> {
-    return await this.vsQuery().nextEntityId<EntityId>();
-  }
-
   async allEntityIds (): Promise<EntityId[]> {
-    const nextId = (await this.nextEntityId()).toNumber();
-
-    const allIds: EntityId[] = [];
-    for (let id = FIRST_ENTITY_ID; id < nextId; id++) {
-      allIds.push(new EntityId(id));
-    }
-
-    return allIds;
+    return ids<EntityId>(this.vsQuery().entityById);
   }
 
   private async loadEntitiesByIds (ids: AnyEntityId[]): Promise<Entity[]> {
     if (!ids || ids.length === 0) return [];
 
-    return await this.vsQuery().entityById.multi<Vec<Entity>>(ids) as unknown as Entity[];
+    return await this.vsQuery().entityById.multi<Entity>(ids);
   }
 
   // TODO try to cache this func
   private async loadPlainEntitiesByIds (ids: AnyEntityId[]): Promise<PlainEntity[]> {
     const entities = await this.loadEntitiesByIds(ids);
     const cacheClassIds = await this.classNamesToIdSet(ClassNamesThatCanBeCached);
-    entities.forEach(e => {
+
+    entities.forEach((e) => {
       if (cacheClassIds.has(e.class_id.toString())) {
         this.idsOfEntitiesToKeepInCache.add(e.id.toString());
       }
@@ -277,20 +244,23 @@ export class SubstrateTransport extends MediaTransport {
 
   async allPlainEntities (): Promise<PlainEntity[]> {
     const ids = await this.allEntityIds();
+
     return await this.entityCache.getOrLoadByIds(ids);
   }
 
   async findPlainEntitiesByClassName<T extends PlainEntity> (className: ClassName): Promise<T[]> {
     const res: T[] = [];
     const clazz = await this.classByName(className);
+
     if (!clazz) {
       console.warn(`No class found by name '${className}'`);
+
       return res;
     }
 
     const allIds = await this.allEntityIds();
     const filteredEntities = (await this.entityCache.getOrLoadByIds(allIds))
-      .filter(entity => clazz.id.eq(entity.classId)) as T[];
+      .filter((entity) => clazz.id.eq(entity.classId)) as T[];
 
     console.log(`Found ${filteredEntities.length} plain entities by class name '${className}'`);
 
@@ -305,6 +275,7 @@ export class SubstrateTransport extends MediaTransport {
     const loadableClassIds = await this.classNamesToIdSet(ClassNamesThatRequireLoadingInternals);
 
     const converted: PlainEntity[] = [];
+
     for (const entity of entities) {
       const classIdStr = entity.class_id.toString();
       const codec = entityCodecResolver.getCodecByClassId(entity.class_id);
@@ -337,6 +308,7 @@ export class SubstrateTransport extends MediaTransport {
 
   async featuredContent (): Promise<FeaturedContentType | undefined> {
     const arr = await this.findPlainEntitiesByClassName('FeaturedContent');
+
     return arr && arr.length ? arr[0] : undefined;
   }
 
diff --git a/pioneer/packages/joy-media/src/transport.ts b/pioneer/packages/joy-media/src/transport.ts
index 788a4c7562..f7d05a872a 100644
--- a/pioneer/packages/joy-media/src/transport.ts
+++ b/pioneer/packages/joy-media/src/transport.ts
@@ -1,4 +1,3 @@
-import { Transport } from '@polkadot/joy-utils/index';
 import { AccountId } from '@polkadot/types/interfaces';
 import { EntityId, Class, ClassName, unifyClassName, ClassIdByNameMap } from '@joystream/types/versioned-store';
 import { MusicTrackType, MusicTrackCodec } from './schemas/music/MusicTrack';
@@ -18,7 +17,8 @@ import { MediaDropdownOptions } from './common/MediaDropdownOptions';
 import { ChannelEntity } from './entities/ChannelEntity';
 import { ChannelId } from '@joystream/types/content-working-group';
 import { isVideoChannel, isPublicChannel } from './channels/ChannelHelpers';
-import { ValidationConstraint } from '@polkadot/joy-utils/ValidationConstraint';
+import { ValidationConstraint } from '@polkadot/joy-utils/types/ValidationConstraint';
+import { createType } from '@joystream/types';
 
 export interface ChannelValidationConstraints {
   handle: ValidationConstraint;
@@ -57,10 +57,11 @@ export const EntityCodecByClassNameMap = {
 
 function insensitiveEq (text1: string, text2: string): boolean {
   const prepare = (txt: string) => txt.replace(/[\s]+/mg, '').toLowerCase();
+
   return prepare(text1) === prepare(text2);
 }
 
-export abstract class MediaTransport extends Transport {
+export abstract class MediaTransport {
   protected cachedClassIdByNameMap: ClassIdByNameMap | undefined
 
   protected sessionId = 0
@@ -83,9 +84,12 @@ export abstract class MediaTransport extends Transport {
     if (typeof operation !== 'function') {
       throw new Error('Operation is not a function');
     }
+
     this.openSession();
     const res = await operation();
+
     this.closeSession();
+
     return res;
   }
 
@@ -93,12 +97,12 @@ export abstract class MediaTransport extends Transport {
 
   async channelById (id: ChannelId): Promise<ChannelEntity | undefined> {
     return (await this.allChannels())
-      .find(x => id && id.eq(x.id));
+      .find((x) => id && id.eq(x.id));
   }
 
   async channelsByAccount (accountId: AccountId): Promise<ChannelEntity[]> {
     return (await this.allChannels())
-      .filter(x => accountId && accountId.eq(x.roleAccount));
+      .filter((x) => accountId && accountId.eq(x.roleAccount));
   }
 
   abstract channelValidationConstraints(): Promise<ChannelValidationConstraints>
@@ -114,12 +118,15 @@ export abstract class MediaTransport extends Transport {
     if (!this.cachedClassIdByNameMap) {
       const map: ClassIdByNameMap = {};
       const classes = await this.allClasses();
+
       classes.forEach((c) => {
         const className = unifyClassName(c.name);
+
         map[className] = c.id;
       });
       this.cachedClassIdByNameMap = map;
     }
+
     return this.cachedClassIdByNameMap;
   }
 
@@ -128,23 +135,26 @@ export abstract class MediaTransport extends Transport {
   async topVideo (): Promise<VideoType | undefined> {
     const content = await this.featuredContent();
     const topVideoId = content?.topVideo as unknown as number | undefined;
-    return !topVideoId ? undefined : await this.videoById(new EntityId(topVideoId));
+
+    return !topVideoId ? undefined : await this.videoById(createType('EntityId', topVideoId));
   }
 
   async featuredVideos (): Promise<VideoType[]> {
     const content = await this.featuredContent();
     const videoIds = (content?.featuredVideos || []) as unknown as number[];
     const videos = await Promise.all(videoIds.map((id) =>
-      this.videoById(new EntityId(id))));
-    return videos.filter(x => x !== undefined) as VideoType[];
+      this.videoById(createType('EntityId', id))));
+
+    return videos.filter((x) => x !== undefined) as VideoType[];
   }
 
   async featuredAlbums (): Promise<MusicAlbumType[]> {
     const content = await this.featuredContent();
     const albumIds = (content?.featuredAlbums || []) as unknown as EntityId[];
     const albums = await Promise.all(albumIds.map((id) =>
-      this.musicAlbumById(new EntityId(id))));
-    return albums.filter(x => x !== undefined) as MusicAlbumType[];
+      this.musicAlbumById(createType('EntityId', id))));
+
+    return albums.filter((x) => x !== undefined) as MusicAlbumType[];
   }
 
   abstract allMediaObjects(): Promise<MediaObjectType[]>
@@ -157,8 +167,8 @@ export abstract class MediaTransport extends Transport {
 
   async videosByChannelId (channelId: ChannelId, limit?: number, additionalFilter?: (x: VideoType) => boolean): Promise<VideoType[]> {
     let videos = (await this.allVideos())
-      .filter(x => channelId && channelId.eq(x.channelId) && (additionalFilter || (() => true))(x))
-      .sort(x => -1 * x.id);
+      .filter((x) => channelId && channelId.eq(x.channelId) && (additionalFilter || (() => true))(x))
+      .sort((x) => -1 * x.id);
 
     if (limit && limit > 0) {
       videos = videos.slice(0, limit);
@@ -169,30 +179,30 @@ export abstract class MediaTransport extends Transport {
 
   async videosByAccount (accountId: AccountId): Promise<VideoType[]> {
     const accountChannels = await this.channelsByAccount(accountId);
-    const accountChannelIds = new Set(accountChannels.map(x => x.id));
+    const accountChannelIds = new Set(accountChannels.map((x) => x.id));
 
     return (await this.allVideos())
-      .filter(x => x.channelId && accountChannelIds.has(x.channelId));
+      .filter((x) => x.channelId && accountChannelIds.has(x.channelId));
   }
 
   async mediaObjectById (id: EntityId): Promise<MediaObjectType | undefined> {
     return (await this.allMediaObjects())
-      .find(x => id && id.eq(x.id));
+      .find((x) => id && id.eq(x.id));
   }
 
   async videoById (id: EntityId): Promise<VideoType | undefined> {
     return (await this.allVideos())
-      .find(x => id && id.eq(x.id));
+      .find((x) => id && id.eq(x.id));
   }
 
   async musicTrackById (id: EntityId): Promise<MusicTrackType | undefined> {
     return (await this.allMusicTracks())
-      .find(x => id && id.eq(x.id));
+      .find((x) => id && id.eq(x.id));
   }
 
   async musicAlbumById (id: EntityId): Promise<MusicAlbumType | undefined> {
     return (await this.allMusicAlbums())
-      .find(x => id && id.eq(x.id));
+      .find((x) => id && id.eq(x.id));
   }
 
   async allPublicChannels (): Promise<ChannelEntity[]> {
@@ -208,7 +218,7 @@ export abstract class MediaTransport extends Transport {
   async allPublicVideoChannels (): Promise<ChannelEntity[]> {
     return (await this.allVideoChannels())
       .filter(isPublicChannel)
-      .sort(x => -1 * x.id);
+      .sort((x) => -1 * x.id);
   }
 
   async latestPublicVideoChannels (limit = 6): Promise<ChannelEntity[]> {
@@ -217,26 +227,27 @@ export abstract class MediaTransport extends Transport {
 
   async allPublicVideos (): Promise<VideoType[]> {
     const idOfPublicPS = (await this.allPublicationStatuses())
-      .find(x =>
+      .find((x) =>
         insensitiveEq(x.value, 'Public')
       )?.id;
 
     const idsOfCuratedCS = (await this.allCurationStatuses())
-      .filter(x =>
+      .filter((x) =>
         insensitiveEq(x.value, 'Under review') ||
         insensitiveEq(x.value, 'Removed')
-      ).map(x => x.id);
+      ).map((x) => x.id);
 
     const isPublicAndNotCurated = (video: VideoType) => {
       const isPublic = video.publicationStatus.id === idOfPublicPS;
       const isNotCurated = !idsOfCuratedCS.includes(video.curationStatus?.id || -1);
       const isPubChannel = video.channel ? isPublicChannel(video.channel) : true;
+
       return isPublic && isNotCurated && isPubChannel;
     };
 
     return (await this.allVideos())
       .filter(isPublicAndNotCurated)
-      .sort(x => -1 * x.id);
+      .sort((x) => -1 * x.id);
   }
 
   async latestPublicVideos (limit = 12): Promise<VideoType[]> {
@@ -285,6 +296,7 @@ export abstract class MediaTransport extends Transport {
     const res = new MediaDropdownOptions(
       await this.allInternalEntities()
     );
+
     // console.log('Transport.dropdownOptions', res)
     return res;
   }
diff --git a/pioneer/packages/joy-media/src/upload/EditVideo.view.tsx b/pioneer/packages/joy-media/src/upload/EditVideo.view.tsx
index 4bcba0a122..f58c793402 100644
--- a/pioneer/packages/joy-media/src/upload/EditVideo.view.tsx
+++ b/pioneer/packages/joy-media/src/upload/EditVideo.view.tsx
@@ -2,9 +2,8 @@ import React from 'react';
 import { RouteComponentProps } from 'react-router';
 import { MediaView } from '../MediaView';
 import { OuterProps, EditForm } from './UploadVideo';
-import EntityId from '@joystream/types/versioned-store/EntityId';
-import { ChannelId } from '@joystream/types/content-working-group';
-import { JoyError } from '@polkadot/joy-utils/JoyStatus';
+import { JoyError } from '@polkadot/joy-utils/react/components';
+import { useApi } from '@polkadot/react-hooks';
 
 type Props = OuterProps;
 
@@ -19,18 +18,20 @@ export const EditVideoView = MediaView<Props>({
     const entityClass = await transport.videoClass();
     const entity = id && await transport.videoById(id);
     const opts = await transport.dropdownOptions();
+
     return { channel, mediaObjectClass, entityClass, entity, opts };
   }
 });
 
-type WithRouterProps = Props & RouteComponentProps<any>
+type WithRouterProps = Props & RouteComponentProps<Record<string, string | undefined>>
 
 export const UploadVideoWithRouter = (props: WithRouterProps) => {
   const { match: { params: { channelId } } } = props;
+  const { api } = useApi();
 
   if (channelId) {
     try {
-      return <EditVideoView {...props} channelId={new ChannelId(channelId)} />;
+      return <EditVideoView {...props} channelId={api.createType('ChannelId', channelId)} />;
     } catch (err) {
       console.log('UploadVideoWithRouter failed:', err);
     }
@@ -41,10 +42,11 @@ export const UploadVideoWithRouter = (props: WithRouterProps) => {
 
 export const EditVideoWithRouter = (props: WithRouterProps) => {
   const { match: { params: { id } } } = props;
+  const { api } = useApi();
 
   if (id) {
     try {
-      return <EditVideoView {...props} id={new EntityId(id)} />;
+      return <EditVideoView {...props} id={api.createType('EntityId', id)} />;
     } catch (err) {
       console.log('EditVideoWithRouter failed:', err);
     }
diff --git a/pioneer/packages/joy-media/src/upload/UploadAudio.tsx b/pioneer/packages/joy-media/src/upload/UploadAudio.tsx
index 331ad77f5f..f74ab1a28f 100644
--- a/pioneer/packages/joy-media/src/upload/UploadAudio.tsx
+++ b/pioneer/packages/joy-media/src/upload/UploadAudio.tsx
@@ -3,9 +3,9 @@ import { Button, Tab } from 'semantic-ui-react';
 import { Form, withFormik } from 'formik';
 import { History } from 'history';
 
-import TxButton from '@polkadot/joy-utils/TxButton';
+import { TxButton } from '@polkadot/joy-utils/react/components';
 import { ContentId } from '@joystream/types/media';
-import { onImageError } from '@polkadot/joy-utils/images';
+import { onImageError } from '../common/images';
 import { MusicTrackValidationSchema, MusicTrackType, MusicTrackClass as Fields, MusicTrackFormValues, MusicTrackToFormValues } from '../schemas/music/MusicTrack';
 import { withMediaForm, MediaFormProps, datePlaceholder } from '../common/MediaForms';
 import EntityId from '@joystream/types/versioned-store/EntityId';
@@ -113,7 +113,6 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
   const renderMainButton = () =>
     <TxButton
       type='submit'
-      size='large'
       isDisabled={!dirty || isSubmitting}
       label={isNew
         ? 'Publish'
@@ -158,9 +157,11 @@ export const EditForm = withFormik<OuterProps, FormValues>({
   mapPropsToValues: (props): FormValues => {
     const { entity, fileName } = props;
     const res = MusicTrackToFormValues(entity);
+
     if (!res.title && fileName) {
       res.title = fileName;
     }
+
     return res;
   },
 
diff --git a/pioneer/packages/joy-media/src/upload/UploadAudio.view.tsx b/pioneer/packages/joy-media/src/upload/UploadAudio.view.tsx
index b83a3e4a76..592c1186a3 100644
--- a/pioneer/packages/joy-media/src/upload/UploadAudio.view.tsx
+++ b/pioneer/packages/joy-media/src/upload/UploadAudio.view.tsx
@@ -7,6 +7,7 @@ export const UploadAudioView = MediaView<OuterProps>({
     const { transport, id } = props;
     const entity = id ? await transport.musicTrackById(id) : undefined;
     const opts = await transport.dropdownOptions();
+
     return { entity, opts };
   }
 });
diff --git a/pioneer/packages/joy-media/src/upload/UploadVideo.tsx b/pioneer/packages/joy-media/src/upload/UploadVideo.tsx
index ad0bfceb58..58585c3c6a 100644
--- a/pioneer/packages/joy-media/src/upload/UploadVideo.tsx
+++ b/pioneer/packages/joy-media/src/upload/UploadVideo.tsx
@@ -4,33 +4,31 @@ import { Form, withFormik } from 'formik';
 import { History } from 'history';
 import moment from 'moment';
 
-import TxButton, { OnTxButtonClick } from '@polkadot/joy-utils/TxButton';
+import TxButton, { OnTxButtonClick } from '@polkadot/joy-utils/react/components/TxButton';
 import { ContentId } from '@joystream/types/media';
-import { onImageError } from '@polkadot/joy-utils/images';
+import { onImageError } from '../common/images';
+import { nonEmptyStr, filterSubstrateEventsAndExtractData } from '@polkadot/joy-utils/functions/misc';
 import { VideoValidationSchema, VideoType, VideoClass as Fields, VideoFormValues, VideoToFormValues, VideoCodec, VideoPropId } from '../schemas/video/Video';
-import { MediaFormProps, withMediaForm, datePlaceholder } from '../common/MediaForms';
+import { MediaFormProps, withMediaForm, datePlaceholder, boolOptions } from '../common/MediaForms';
 import EntityId from '@joystream/types/versioned-store/EntityId';
 import { MediaDropdownOptions } from '../common/MediaDropdownOptions';
 import { FormTabs } from '../common/FormTabs';
 import { ChannelId } from '@joystream/types/content-working-group';
 import { ChannelEntity } from '../entities/ChannelEntity';
-import { Credential } from '@joystream/types/common';
 import { Class, VecClassPropertyValue } from '@joystream/types/versioned-store';
 import { TxCallback } from '@polkadot/react-components/Status/types';
 import { SubmittableResult } from '@polkadot/api';
-import { nonEmptyStr, filterSubstrateEventsAndExtractData } from '@polkadot/joy-utils/index';
-import { u16, u32, bool, Option, Vec } from '@polkadot/types';
 import { isInternalProp } from '@joystream/types/versioned-store/EntityCodec';
 import { MediaObjectCodec } from '../schemas/general/MediaObject';
-import { Operation } from '@joystream/types/versioned-store/permissions/batching';
 import { OperationType } from '@joystream/types/versioned-store/permissions/batching/operation-types';
 import { ParametrizedEntity } from '@joystream/types/versioned-store/permissions/batching/parametrized-entity';
 import ParametrizedClassPropertyValue from '@joystream/types/versioned-store/permissions/batching/ParametrizedClassPropertyValue';
 import { ParametrizedPropertyValue } from '@joystream/types/versioned-store/permissions/batching/parametrized-property-value';
 import { ParameterizedClassPropertyValues } from '@joystream/types/versioned-store/permissions/batching/operations';
-import { useMyMembership } from '@polkadot/joy-utils/MyMembershipContext';
+import { useMyMembership } from '@polkadot/joy-utils/react/hooks';
 import { isAccountAChannelOwner } from '../channels/ChannelHelpers';
-import { JoyError } from '@polkadot/joy-utils/JoyStatus';
+import { JoyError } from '@polkadot/joy-utils/react/components';
+import { useApi } from '@polkadot/react-hooks';
 
 /** Example: "2019-01-23" -> 1548201600 */
 function humanDateToUnixTs (humanFriendlyDate: string): number | undefined {
@@ -87,6 +85,7 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
   } = props;
 
   const { myAccountId } = useMyMembership();
+  const { api } = useApi();
 
   const { thumbnail } = values;
 
@@ -103,9 +102,9 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
   }
 
   // Next consts are used in tx params:
-  const with_credential = new Option<Credential>(Credential, new Credential(2));
-  const as_entity_maintainer = new bool(false);
-  const schema_id = new u16(0);
+  const with_credential = api.createType('Option<Credential>', 2);
+  const as_entity_maintainer = api.createType('bool', false);
+  const schema_id = api.createType('u16', 0);
 
   const entityCodec = new VideoCodec(entityClass);
   const mediaObjectCodec = new MediaObjectCodec(mediaObjectClass);
@@ -116,9 +115,10 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
     Object.keys(values).forEach((prop) => {
       const fieldName = prop as VideoPropId;
       const field = Fields[fieldName];
-      let fieldValue = values[fieldName] as any;
+      let fieldValue = values[fieldName];
 
       let shouldIncludeValue = true;
+
       if (entity) {
         // If we updating existing entity, then update only changed props:
         shouldIncludeValue = isFieldChanged(fieldName);
@@ -145,35 +145,41 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
         if (typeof fieldValue === 'string') {
           fieldValue = fieldValue.trim();
         }
+
         if (isDateField(fieldName)) {
-          fieldValue = humanDateToUnixTs(fieldValue);
+          fieldValue = typeof fieldValue === 'string' ? (humanDateToUnixTs(fieldValue) || '') : '';
         }
-        res[fieldName] = fieldValue;
+
+        // FIXME: Temporary solution, since fixing this would require a bigger refactorization
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        res[fieldName] = fieldValue as any;
       }
     });
 
     return res;
   };
 
-  const indexOfCreateMediaObjectOperation = new u32(0);
+  const indexOfCreateMediaObjectOperation = api.createType('u32', 0);
 
-  const indexOfCreateVideoEntityOperation = new u32(2);
+  const indexOfCreateVideoEntityOperation = api.createType('u32', 2);
 
   const referToIdOfCreatedMediaObjectEntity = () =>
-    ParametrizedEntity.InternalEntityJustAdded(indexOfCreateMediaObjectOperation);
+    ParametrizedEntity.InternalEntityJustAdded(api.registry, indexOfCreateMediaObjectOperation);
 
   const referToIdOfCreatedVideoEntity = () =>
-    ParametrizedEntity.InternalEntityJustAdded(indexOfCreateVideoEntityOperation);
+    ParametrizedEntity.InternalEntityJustAdded(api.registry, indexOfCreateVideoEntityOperation);
 
   const newlyCreatedMediaObjectProp = () => {
     const inClassIndexOfMediaObject = entityCodec.inClassIndexOfProp(Fields.object.id);
+
     if (!inClassIndexOfMediaObject) {
       throw new Error('Cannot not find an in-class index of "object" prop on Video entity.');
     }
 
-    return new ParametrizedClassPropertyValue({
-      in_class_index: new u16(inClassIndexOfMediaObject),
+    return api.createType('ParametrizedClassPropertyValue', {
+      in_class_index: inClassIndexOfMediaObject,
       value: ParametrizedPropertyValue.InternalEntityJustAdded(
+        api.registry,
         indexOfCreateMediaObjectOperation
       )
     });
@@ -183,23 +189,24 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
     props: VecClassPropertyValue,
     extra: ParametrizedClassPropertyValue[] = []
   ): ParameterizedClassPropertyValues => {
-    const parametrizedProps = props.map(p => {
+    const parametrizedProps = props.map((p) => {
       const { in_class_index, value } = p;
-      return new ParametrizedClassPropertyValue({
+
+      return api.createType('ParametrizedClassPropertyValue', {
         in_class_index,
-        value: new ParametrizedPropertyValue({ PropertyValue: value })
+        value: api.createType('ParametrizedPropertyValue', { PropertyValue: value })
       });
     });
 
     if (extra && extra.length) {
-      extra.forEach(x => parametrizedProps.push(x));
+      extra.forEach((x) => parametrizedProps.push(x));
     }
 
-    return new ParameterizedClassPropertyValues(parametrizedProps);
+    return api.createType('Vec<ParametrizedClassPropertyValue>', parametrizedProps);
   };
 
   const newEntityOperation = (operation_type: OperationType) => {
-    return new Operation({
+    return api.createType('Operation', {
       with_credential,
       as_entity_maintainer,
       operation_type
@@ -209,6 +216,7 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
   const prepareTxParamsForCreateMediaObject = () => {
     return newEntityOperation(
       OperationType.CreateEntity(
+        api.registry,
         mediaObjectClass.id
       )
     );
@@ -224,6 +232,7 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
 
     return newEntityOperation(
       OperationType.AddSchemaSupportToEntity(
+        api.registry,
         referToIdOfCreatedMediaObjectEntity(),
         schema_id,
         propValues
@@ -234,6 +243,7 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
   const prepareTxParamsForCreateEntity = () => {
     return newEntityOperation(
       OperationType.CreateEntity(
+        api.registry,
         entityClass.id
       )
     );
@@ -249,6 +259,7 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
 
     return newEntityOperation(
       OperationType.AddSchemaSupportToEntity(
+        api.registry,
         referToIdOfCreatedVideoEntity(),
         schema_id,
         propValues
@@ -272,7 +283,7 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
     // Use for debug:
     // console.log('Batch entity operations:', ops)
 
-    return [new Vec(Operation, ops)];
+    return [api.createType('Vec<Operation>', ops)];
   };
 
   const buildUpdateEntityTxParams = () => {
@@ -292,6 +303,7 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
 
   const redirectToPlaybackPage = (newEntityId?: EntityId) => {
     const entityId = newEntityId || id;
+
     if (history && entityId) {
       history.push('/media/videos/' + entityId.toString());
     }
@@ -312,6 +324,7 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
 
     // Extract id from from event:
     const newId = videoEntityCreatedEvent[0] as EntityId;
+
     console.log('New video entity id:', newId && newId.toString());
 
     redirectToPlaybackPage(newId);
@@ -328,7 +341,7 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
     <MediaText field={Fields.description} textarea {...props} />
     <MediaDropdown field={Fields.language} options={opts.languageOptions} {...props} />
     <MediaText field={Fields.firstReleased} placeholder={datePlaceholder} {...props} />
-    <MediaText field={Fields.explicit} {...props} />
+    <MediaDropdown field={Fields.explicit} options={boolOptions} {...props} />
     <MediaDropdown field={Fields.license} options={opts.contentLicenseOptions} {...props} />
     <MediaDropdown field={Fields.publicationStatus} options={opts.publicationStatusOptions} {...props} />
   </Tab.Pane>;
@@ -376,7 +389,6 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
   const renderTransactionButton = () =>
     <TxButton
       type='submit'
-      size='large'
       isDisabled={!canSubmitTx()}
       label='Publish video'
       tx='versionedStorePermissions.transaction'
@@ -389,7 +401,6 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
   const renderUpdateEntityButton = () =>
     <TxButton
       type='submit'
-      size='large'
       isDisabled={!canSubmitTx()}
       label='Update video'
       tx='versionedStorePermissions.updateEntityPropertyValues'
@@ -406,7 +417,7 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
 
     <Form className='ui form JoyForm EditMetaForm'>
       {tabs}
-      <LabelledField style={{ marginTop: '1rem' }} {...props}>
+      <LabelledField style={{ marginTop: '1rem' }} {...props} flex>
         {!entity
           ? renderTransactionButton()
           : renderUpdateEntityButton()
@@ -429,12 +440,15 @@ export const EditForm = withFormik<OuterProps, FormValues>({
   mapPropsToValues: (props): FormValues => {
     const { entity, channelId, fileName } = props;
     const res = VideoToFormValues(entity);
+
     if (!res.title && fileName) {
       res.title = fileName;
     }
+
     if (channelId) {
       res.channelId = channelId.toNumber();
     }
+
     return res;
   },
 
diff --git a/pioneer/packages/joy-media/src/utils.ts b/pioneer/packages/joy-media/src/utils.ts
index 91d876568f..c2d4935742 100644
--- a/pioneer/packages/joy-media/src/utils.ts
+++ b/pioneer/packages/joy-media/src/utils.ts
@@ -1,4 +1,5 @@
 export function fileNameWoExt (fileName: string): string {
   const lastDotIdx = fileName.lastIndexOf('.');
+
   return fileName.substring(0, lastDotIdx);
 }
diff --git a/pioneer/packages/joy-media/src/video/PlayVideo.tsx b/pioneer/packages/joy-media/src/video/PlayVideo.tsx
index 757b2b6dd7..d1dd34357f 100644
--- a/pioneer/packages/joy-media/src/video/PlayVideo.tsx
+++ b/pioneer/packages/joy-media/src/video/PlayVideo.tsx
@@ -12,7 +12,8 @@ import { printExplicit, printReleaseDate, printLanguage } from '../entities/Enti
 import { MediaObjectType } from '../schemas/general/MediaObject';
 import { MediaPlayerWithResolver } from '../common/MediaPlayerWithResolver';
 import { ContentId } from '@joystream/types/media';
-import { JoyError } from '@polkadot/joy-utils/JoyStatus';
+import { JoyError } from '@polkadot/joy-utils/react/components';
+import { useApi } from '@polkadot/react-hooks';
 
 export type PlayVideoProps = {
   channel?: ChannelEntity;
@@ -29,6 +30,7 @@ type ListOfVideoPreviewProps = {
 
 function VertialListOfVideoPreviews (props: ListOfVideoPreviewProps) {
   const { videos = [] } = props;
+
   return <>{videos.map((video) =>
     <VideoPreview key={`VideoPreview-${video.id}`} {...video} size='small' orientation='horizontal' withChannel />
   )}</>;
@@ -36,6 +38,7 @@ function VertialListOfVideoPreviews (props: ListOfVideoPreviewProps) {
 
 export function PlayVideo (props: PlayVideoProps) {
   const { channel, mediaObject, video, moreChannelVideos = [], featuredVideos = [] } = props;
+  const { api } = useApi();
 
   if (!mediaObject || !video) {
     return <JoyError title={'Video was not found'} />;
@@ -80,7 +83,7 @@ export function PlayVideo (props: PlayVideoProps) {
   // TODO show video only to its owner, if the video is not public.
   // see isPublicVideo() function.
 
-  const contentId = ContentId.decode(mediaObject.value);
+  const contentId = ContentId.decode(api.registry, mediaObject.value);
 
   // console.log('PlayVideo: props', props)
 
diff --git a/pioneer/packages/joy-media/src/video/PlayVideo.view.tsx b/pioneer/packages/joy-media/src/video/PlayVideo.view.tsx
index 501abcd8ae..84ba65408d 100644
--- a/pioneer/packages/joy-media/src/video/PlayVideo.view.tsx
+++ b/pioneer/packages/joy-media/src/video/PlayVideo.view.tsx
@@ -2,9 +2,8 @@ import React from 'react';
 import { RouteComponentProps } from 'react-router';
 import { MediaView } from '../MediaView';
 import { PlayVideoProps, PlayVideo } from './PlayVideo';
-import { ChannelId } from '@joystream/types/content-working-group';
-import { EntityId } from '@joystream/types/versioned-store';
-import { JoyError } from '@polkadot/joy-utils/JoyStatus';
+import { JoyError } from '@polkadot/joy-utils/react/components';
+import { useApi } from '@polkadot/react-hooks';
 
 type Props = PlayVideoProps;
 
@@ -12,14 +11,15 @@ export const PlayVideoView = MediaView<Props>({
   component: PlayVideo,
   triggers: ['id'],
   resolveProps: async (props) => {
-    const { transport, id } = props;
+    const { transport, api, id } = props;
 
     const video = await transport.videoById(id);
+
     if (!video) return {};
 
-    const channelId = new ChannelId(video.channelId);
+    const channelId = api.createType('ChannelId', video.channelId);
     const channel = await transport.channelById(channelId);
-    const moreChannelVideos = (await transport.videosByChannelId(channelId, 5, x => x.id !== video.id));
+    const moreChannelVideos = (await transport.videosByChannelId(channelId, 5, (x) => x.id !== video.id));
     const featuredVideos = await transport.featuredVideos();
     const mediaObject = video.object;
 
@@ -27,12 +27,13 @@ export const PlayVideoView = MediaView<Props>({
   }
 });
 
-export const PlayVideoWithRouter = (props: Props & RouteComponentProps<any>) => {
+export const PlayVideoWithRouter = (props: Props & RouteComponentProps<Record<string, string | undefined>>) => {
   const { match: { params: { id } } } = props;
+  const { api } = useApi();
 
   if (id) {
     try {
-      return <PlayVideoView {...props} id={new EntityId(id)} />;
+      return <PlayVideoView {...props} id={api.createType('EntityId', id)} />;
     } catch (err) {
       console.log('PlayVideoWithRouter failed:', err);
     }
diff --git a/pioneer/packages/joy-media/src/video/VideoPreview.tsx b/pioneer/packages/joy-media/src/video/VideoPreview.tsx
index f07a559696..53f723c115 100644
--- a/pioneer/packages/joy-media/src/video/VideoPreview.tsx
+++ b/pioneer/packages/joy-media/src/video/VideoPreview.tsx
@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
 import { Link } from 'react-router-dom';
 import { BgImg } from '../common/BgImg';
 import { VideoType } from '../schemas/video/Video';
-import { useMyMembership } from '@polkadot/joy-utils/MyMembershipContext';
+import { useMyMembership } from '@polkadot/joy-utils/react/hooks';
 import { ChannelEntity } from '../entities/ChannelEntity';
 import { isAccountAChannelOwner } from '../channels/ChannelHelpers';
 import { ChannelAvatarAndName } from '../channels/ChannelAvatarAndName';
@@ -64,7 +64,7 @@ export function VideoPreview (props: VideoPreviewProps) {
         }
 
         {iAmOwner &&
-          <div>
+          <div style={{ marginTop: '0.5em' }}>
             <Link to={`/media/videos/${id}/edit`} className='ui button basic small'>
               <i className='icon pencil' />
               Edit
@@ -77,7 +77,7 @@ export function VideoPreview (props: VideoPreviewProps) {
 }
 
 export function toVideoPreviews (items: VideoType[]): VideoPreviewProps[] {
-  return items.map(x => ({
+  return items.map((x) => ({
     id: x.id,
     title: x.title,
     thumbnail: x.thumbnail
diff --git a/pioneer/packages/joy-members/src/EditForm.tsx b/pioneer/packages/joy-members/src/EditForm.tsx
index 9d0c229173..58525d9ba4 100644
--- a/pioneer/packages/joy-members/src/EditForm.tsx
+++ b/pioneer/packages/joy-members/src/EditForm.tsx
@@ -172,7 +172,6 @@ const InnerForm = (props: FormProps) => {
           <div style={{ display: 'flex' }}>
             <TxButton
               type='submit'
-              size='large'
               label={profile ? 'Update my profile' : 'Register'}
               isDisabled={!dirty || isSubmitting}
               params={buildTxParams()}
diff --git a/pioneer/packages/joy-members/src/MemberPreview.tsx b/pioneer/packages/joy-members/src/MemberPreview.tsx
index 7af4e59633..f3b2be84ea 100644
--- a/pioneer/packages/joy-members/src/MemberPreview.tsx
+++ b/pioneer/packages/joy-members/src/MemberPreview.tsx
@@ -93,7 +93,7 @@ function setMemberIdByAccountId (Component: React.ComponentType<MemberPreviewPro
     const { memberIdsByRootAccountId, memberIdsByControllerAccountId } = props;
 
     if (memberIdsByRootAccountId && memberIdsByControllerAccountId) {
-      memberIdsByRootAccountId.concat(memberIdsByControllerAccountId);
+      memberIdsByRootAccountId.toArray().concat(memberIdsByControllerAccountId.toArray());
 
       if (memberIdsByRootAccountId.length) {
         return <Component {...props} memberId={memberIdsByRootAccountId[0]} />;
diff --git a/pioneer/packages/joy-proposals/.skip-build b/pioneer/packages/joy-proposals/.skip-build
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/pioneer/packages/joy-proposals/package.json b/pioneer/packages/joy-proposals/package.json
index 145902f003..22c5cb01ee 100644
--- a/pioneer/packages/joy-proposals/package.json
+++ b/pioneer/packages/joy-proposals/package.json
@@ -7,10 +7,10 @@
   "author": "Joystream contributors",
   "maintainers": [],
   "dependencies": {
-    "@babel/runtime": "^7.7.1",
+    "@babel/runtime": "^7.10.5",
     "@polkadot/joy-utils": "^0.1.1",
-    "@polkadot/react-components": "0.37.0-beta.63",
-    "@polkadot/react-query": "0.37.0-beta.63",
-    "react-dropzone": "^10.2.2"
+    "@polkadot/react-components": "0.51.1",
+    "@polkadot/react-query": "0.51.1",
+    "react-dropzone": "^11.0.2"
   }
 }
diff --git a/pioneer/packages/joy-proposals/src/Proposal/Body.tsx b/pioneer/packages/joy-proposals/src/Proposal/Body.tsx
index 1989d2b698..b2fe335721 100644
--- a/pioneer/packages/joy-proposals/src/Proposal/Body.tsx
+++ b/pioneer/packages/joy-proposals/src/Proposal/Body.tsx
@@ -1,35 +1,32 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Card, Header, Button, Icon, Message } from 'semantic-ui-react';
-import { ProposalType } from '@polkadot/joy-utils/types/proposals';
+import { Card, Header, Message, Icon } from 'semantic-ui-react';
+import { ProposalType, ParsedProposalDetails, SpecificProposalDetails, RuntimeUpgradeProposalDetails } from '@polkadot/joy-utils/types/proposals';
 import { bytesToString } from '@polkadot/joy-utils/functions/misc';
 import styled from 'styled-components';
-import AddressMini from '@polkadot/react-components/AddressMiniJoy';
-import TxButton from '@polkadot/joy-utils/TxButton';
-import { ProposalId, TerminateRoleParameters } from '@joystream/types/proposals';
+import AddressMini from '@polkadot/react-components/AddressMini';
+import { SemanticTxButton } from '@polkadot/joy-utils/react/components/TxButton';
+import { ProposalId, ProposalDetails } from '@joystream/types/proposals';
 import { MemberId, Membership } from '@joystream/types/members';
-import ProfilePreview from '@polkadot/joy-utils/MemberProfilePreview';
+import ProfilePreview from '@polkadot/joy-utils/react/components/MemberProfilePreview';
 import { useTransport, usePromise } from '@polkadot/joy-utils/react/hooks';
-import { Option, Bytes } from '@polkadot/types/';
-import { BlockNumber } from '@polkadot/types/interfaces';
+import { Option } from '@polkadot/types/';
+import { BlockNumber, Balance, AccountId } from '@polkadot/types/interfaces';
 import { formatBalance } from '@polkadot/util';
-import { PromiseComponent } from '@polkadot/joy-utils/react/components';
+import PromiseComponent from '@polkadot/joy-utils/react/components/PromiseComponent';
 import ReactMarkdown from 'react-markdown';
-import { WorkingGroupOpeningPolicyCommitment, RewardPolicy } from '@joystream/types/working-group';
-import {
-  ActivateOpeningAt,
-  ActivateOpeningAtKeys,
-  StakingPolicy
-} from '@joystream/types/hiring';
-import { WorkingGroup, WorkingGroupKey } from '@joystream/types/common';
+import { StakingPolicy } from '@joystream/types/hiring';
+import { WorkingGroup } from '@joystream/types/common';
 import { ApplicationsDetailsByOpening } from '@polkadot/joy-utils/react/components/working-groups/ApplicationDetails';
 import { LeadInfoFromId } from '@polkadot/joy-utils/react/components/working-groups/LeadInfo';
 import { formatReward } from '@polkadot/joy-utils/functions/format';
+import BN from 'bn.js';
+import { WorkerId } from '@joystream/types/src/working-group';
 
 type BodyProps = {
   title: string;
   description: string;
-  params: any[];
+  params: ParsedProposalDetails;
   type: ProposalType;
   iAmProposer: boolean;
   proposalId: number | ProposalId;
@@ -38,31 +35,32 @@ type BodyProps = {
   cancellationFee: number;
 };
 
-function ProposedAddress (props: { address?: string | null }) {
-  if (props.address === null || props.address === undefined) {
+function ProposedAddress (props: { accountId?: AccountId }) {
+  if (!props.accountId) {
     return <>NONE</>;
   }
 
   return (
-    <AddressMini value={props.address} isShort={false} isPadded={false} withAddress={true} style={{ padding: 0 }} />
+    <AddressMini
+      value={props.accountId.toString()}
+      isShort={false}
+      isPadded={false}
+      withAddress={true}
+      style={{ padding: 0 }} />
   );
 }
 
-function ProposedMember (props: { memberId?: MemberId | number | null }) {
-  if (props.memberId === null || props.memberId === undefined) {
-    return <>NONE</>;
-  }
-  const memberId: MemberId | number = props.memberId;
-
+function ProposedMember (props: { memberId: MemberId | number }) {
   const transport = useTransport();
+
   const [member, error, loading] = usePromise<Membership | null>(
-    () => transport.members.membershipById(memberId),
+    () => transport.members.membershipById(props.memberId),
     null
   );
 
   return (
-    <PromiseComponent error={error} loading={loading} message="Fetching profile...">
-      { (member && !member.handle.isEmpty) ? (
+    <PromiseComponent error={error} loading={loading} message='Fetching profile...'>
+      { (member && !member.isEmpty) ? (
         <ProfilePreview
           avatar_uri={ member.avatar_uri.toString() }
           root_account={ member.root_account.toString() }
@@ -99,75 +97,83 @@ class ParsedParam {
 }
 
 // The methods for parsing params by Proposal type.
-const paramParsers: { [x in ProposalType]: (params: any[]) => ParsedParam[]} = {
-  Text: ([content]) => [
+const paramParsers: { [k in ProposalType]: (params: SpecificProposalDetails<k>) => ParsedParam[]} = {
+  Text: (content) => [
     new ParsedParam(
       'Content',
-      <ReactMarkdown className='TextProposalContent' source={content} linkTarget='_blank' />,
+      <ReactMarkdown className='TextProposalContent' source={content.toString()} linkTarget='_blank' />,
       true
     )
   ],
   RuntimeUpgrade: ([hash, filesize]) => [
     new ParsedParam('Blake2b256 hash of WASM code', hash, true),
-    new ParsedParam('File size', filesize + ' bytes')
+    new ParsedParam('File size', `${filesize} bytes`)
   ],
-  SetElectionParameters: ([params]) => [
-    new ParsedParam('Announcing period', params.announcing_period + ' blocks'),
-    new ParsedParam('Voting period', params.voting_period + ' blocks'),
-    new ParsedParam('Revealing period', params.revealing_period + ' blocks'),
-    new ParsedParam('Council size', params.council_size + ' members'),
-    new ParsedParam('Candidacy limit', params.candidacy_limit + ' members'),
-    new ParsedParam('New term duration', params.new_term_duration + ' blocks'),
+  SetElectionParameters: (params) => [
+    new ParsedParam('Announcing period', `${params.announcing_period.toString()} blocks`),
+    new ParsedParam('Voting period', `${params.voting_period.toString()} blocks`),
+    new ParsedParam('Revealing period', `${params.revealing_period.toString()} blocks`),
+    new ParsedParam('Council size', `${params.council_size.toString()} members`),
+    new ParsedParam('Candidacy limit', `${params.candidacy_limit.toString()} members`),
+    new ParsedParam('New term duration', `${params.new_term_duration.toString()} blocks`),
     new ParsedParam('Min. council stake', formatBalance(params.min_council_stake)),
     new ParsedParam('Min. voting stake', formatBalance(params.min_voting_stake))
   ],
   Spending: ([amount, account]) => [
-    new ParsedParam('Amount', formatBalance(amount)),
-    new ParsedParam('Account', <ProposedAddress address={account} />)
+    new ParsedParam('Amount', formatBalance(amount as Balance)),
+    new ParsedParam('Account', <ProposedAddress accountId={account as AccountId} />)
   ],
-  SetLead: ([memberId, accountId]) => [
-    new ParsedParam('Member', <ProposedMember memberId={ memberId } />),
-    new ParsedParam('Account id', <ProposedAddress address={accountId} />)
+  SetLead: (params) => [
+    new ParsedParam(
+      'Member',
+      params.isSome ? <ProposedMember memberId={params.unwrap()[0] as MemberId} /> : 'NONE'
+    ),
+    new ParsedParam('Account id', <ProposedAddress accountId={params.unwrapOr([])[1] as AccountId | undefined} />)
   ],
-  SetContentWorkingGroupMintCapacity: ([capacity]) => [
+  SetContentWorkingGroupMintCapacity: (capacity) => [
     new ParsedParam('Mint capacity', formatBalance(capacity))
   ],
-  EvictStorageProvider: ([accountId]) => [
-    new ParsedParam('Storage provider account', <ProposedAddress address={accountId} />)
+  EvictStorageProvider: (accountId) => [
+    new ParsedParam('Storage provider account', <ProposedAddress accountId={accountId} />)
   ],
-  SetValidatorCount: ([count]) => [
-    new ParsedParam('Validator count', count)
+  SetValidatorCount: (count) => [
+    new ParsedParam('Validator count', count.toString())
   ],
-  SetStorageRoleParameters: ([params]) => [
+  SetStorageRoleParameters: (params) => [
     new ParsedParam('Min. stake', formatBalance(params.min_stake)),
     // "Min. actors": params.min_actors,
-    new ParsedParam('Max. actors', params.max_actors),
+    new ParsedParam('Max. actors', params.max_actors.toString()),
     new ParsedParam('Reward', formatBalance(params.reward)),
-    new ParsedParam('Reward period', params.reward_period + ' blocks'),
+    new ParsedParam('Reward period', `${params.reward_period.toString()} blocks`),
     // "Bonding period": params.bonding_period + " blocks",
-    new ParsedParam('Unbonding period', params.unbonding_period + ' blocks'),
+    new ParsedParam('Unbonding period', `${params.unbonding_period.toString()} blocks`),
     // "Min. service period": params.min_service_period + " blocks",
     // "Startup grace period": params.startup_grace_period + " blocks",
     new ParsedParam('Entry request fee', formatBalance(params.entry_request_fee))
   ],
-  AddWorkingGroupLeaderOpening: ([{ activate_at, commitment, human_readable_text, working_group }]) => {
-    const workingGroup = new WorkingGroup(working_group);
-    const activateAt = new ActivateOpeningAt(activate_at);
-    const activateAtBlock = activateAt.type === ActivateOpeningAtKeys.ExactBlock ? activateAt.value : null;
-    const OPCommitment = new WorkingGroupOpeningPolicyCommitment(commitment);
+  AddWorkingGroupLeaderOpening: ({
+    activate_at: activateAt,
+    commitment,
+    human_readable_text: humanReadableText,
+    working_group: workingGroup
+  }) => {
+    const activateAtBlock = activateAt.isOfType('ExactBlock') ? activateAt.asType('ExactBlock') : null;
     const {
       application_staking_policy: applicationSP,
       role_staking_policy: roleSP,
       application_rationing_policy: rationingPolicy
-    } = OPCommitment;
-    let HRT = bytesToString(new Bytes(human_readable_text));
+    } = commitment;
+    let HRT = bytesToString(humanReadableText);
+
     try { HRT = JSON.stringify(JSON.parse(HRT), undefined, 4); } catch (e) { /* Do nothing */ }
+
     const formatStake = (stake: Option<StakingPolicy>) => (
-      stake.isSome ? stake.unwrap().amount_mode.type + `(${stake.unwrap().amount})` : 'NONE'
+      stake.isSome ? stake.unwrap().amount_mode.type + `(${stake.unwrap().amount.toString()})` : 'NONE'
     );
     const formatPeriod = (unstakingPeriod: Option<BlockNumber>) => (
-      unstakingPeriod.unwrapOr(0) + ' blocks'
+      `${unstakingPeriod.unwrapOr(new BN(0)).toString()} blocks`
     );
+
     return [
       new ParsedParam('Working group', workingGroup.type),
       new ParsedParam('Activate at', `${activateAt.type}${activateAtBlock ? `(${activateAtBlock.toString()})` : ''}`),
@@ -177,34 +183,35 @@ const paramParsers: { [x in ProposalType]: (params: any[]) => ParsedParam[]} = {
         'Max. applications',
         rationingPolicy.isSome ? rationingPolicy.unwrap().max_active_applicants.toNumber() : 'UNLIMITED'
       ),
+      new ParsedParam('Max. review period length', `${commitment.max_review_period_length.toString()} blocks`),
       new ParsedParam(
         'Terminate unstaking period (role stake)',
-        formatPeriod(OPCommitment.terminate_role_stake_unstaking_period)
+        formatPeriod(commitment.terminate_role_stake_unstaking_period)
       ),
       new ParsedParam(
         'Exit unstaking period (role stake)',
-        formatPeriod(OPCommitment.exit_role_stake_unstaking_period)
+        formatPeriod(commitment.exit_role_stake_unstaking_period)
       ),
       // <required_to_prevent_sneaking>
       new ParsedParam(
         'Terminate unstaking period (appl. stake)',
-        formatPeriod(OPCommitment.terminate_application_stake_unstaking_period)
+        formatPeriod(commitment.terminate_application_stake_unstaking_period)
       ),
       new ParsedParam(
         'Exit unstaking period (appl. stake)',
-        formatPeriod(OPCommitment.exit_role_application_stake_unstaking_period)
+        formatPeriod(commitment.exit_role_application_stake_unstaking_period)
       ),
       new ParsedParam(
         'Appl. accepted unstaking period (appl. stake)',
-        formatPeriod(OPCommitment.fill_opening_successful_applicant_application_stake_unstaking_period)
+        formatPeriod(commitment.fill_opening_successful_applicant_application_stake_unstaking_period)
       ),
       new ParsedParam(
         'Appl. failed unstaking period (role stake)',
-        formatPeriod(OPCommitment.fill_opening_failed_applicant_role_stake_unstaking_period)
+        formatPeriod(commitment.fill_opening_failed_applicant_role_stake_unstaking_period)
       ),
       new ParsedParam(
         'Appl. failed unstaking period (appl. stake)',
-        formatPeriod(OPCommitment.fill_opening_failed_applicant_application_stake_unstaking_period)
+        formatPeriod(commitment.fill_opening_failed_applicant_application_stake_unstaking_period)
       ),
       new ParsedParam(
         'Crowded out unstaking period (role stake)',
@@ -227,55 +234,76 @@ const paramParsers: { [x in ProposalType]: (params: any[]) => ParsedParam[]} = {
     ];
   },
   SetWorkingGroupMintCapacity: ([capacity, group]) => [
-    new ParsedParam('Working group', (new WorkingGroup(group)).type),
-    new ParsedParam('Mint capacity', formatBalance(capacity))
+    new ParsedParam('Working group', (group as WorkingGroup).type),
+    new ParsedParam('Mint capacity', formatBalance((capacity as Balance)))
   ],
   BeginReviewWorkingGroupLeaderApplication: ([id, group]) => [
-    new ParsedParam('Working group', (new WorkingGroup(group)).type),
+    new ParsedParam('Working group', (group as WorkingGroup).type),
     // TODO: Adjust the link to work with multiple groups after working-groups are normalized!
-    new ParsedParam('Opening id', <Link to={`/working-groups/opportunities/storageProviders/${id}`}>#{id}</Link>)
+    new ParsedParam(
+      'Opening id',
+      <Link to={`/working-groups/opportunities/storageProviders/${id.toString()}`}>#{id.toString()}</Link>
+    )
+  ],
+  FillWorkingGroupLeaderOpening: ({
+    opening_id: openingId,
+    successful_application_id: succesfulApplicationId,
+    reward_policy: rewardPolicy,
+    working_group: workingGroup
+  }) => [
+    new ParsedParam('Working group', workingGroup.type),
+    // TODO: Adjust the link to work with multiple groups after working-groups are normalized!
+    new ParsedParam(
+      'Opening id',
+      <Link to={`/working-groups/opportunities/storageProviders/${openingId.toString()}`}>#{openingId.toString()}</Link>),
+    new ParsedParam('Reward policy', rewardPolicy.isSome ? formatReward(rewardPolicy.unwrap(), true) : 'NONE'),
+    new ParsedParam(
+      'Result',
+      <ApplicationsDetailsByOpening
+        openingId={openingId.toNumber()}
+        acceptedIds={[succesfulApplicationId.toNumber()]}
+        group={workingGroup.type}/>,
+      true
+    )
   ],
-  FillWorkingGroupLeaderOpening: ([params]) => {
-    const { opening_id, successful_application_id, reward_policy, working_group } = params;
-    const rewardPolicy = reward_policy && new RewardPolicy(reward_policy);
-    return [
-      new ParsedParam('Working group', (new WorkingGroup(working_group)).type),
-      // TODO: Adjust the link to work with multiple groups after working-groups are normalized!
-      new ParsedParam('Opening id', <Link to={`/working-groups/opportunities/storageProviders/${opening_id}`}>#{opening_id}</Link>),
-      new ParsedParam('Reward policy', rewardPolicy ? formatReward(rewardPolicy, true) : 'NONE'),
-      new ParsedParam(
-        'Result',
-        <ApplicationsDetailsByOpening
-          openingId={opening_id}
-          acceptedIds={[successful_application_id]}
-          group={(new WorkingGroup(working_group)).type as WorkingGroupKey}/>,
-        true
-      )
-    ];
-  },
   SlashWorkingGroupLeaderStake: ([leadId, amount, group]) => [
-    new ParsedParam('Working group', (new WorkingGroup(group)).type),
-    new ParsedParam('Slash amount', formatBalance(amount)),
-    new ParsedParam('Lead', <LeadInfoFromId group={(new WorkingGroup(group).type as WorkingGroupKey)} leadId={leadId}/>, true)
+    new ParsedParam('Working group', (group as WorkingGroup).type),
+    new ParsedParam('Slash amount', formatBalance(amount as Balance)),
+    new ParsedParam(
+      'Lead',
+      <LeadInfoFromId group={(group as WorkingGroup).type} leadId={(leadId as WorkerId).toNumber()}/>,
+      true
+    )
   ],
   DecreaseWorkingGroupLeaderStake: ([leadId, amount, group]) => [
-    new ParsedParam('Working group', (new WorkingGroup(group)).type),
-    new ParsedParam('Decrease amount', formatBalance(amount)),
-    new ParsedParam('Lead', <LeadInfoFromId group={(new WorkingGroup(group).type as WorkingGroupKey)} leadId={leadId}/>, true)
+    new ParsedParam('Working group', (group as WorkingGroup).type),
+    new ParsedParam('Decrease amount', formatBalance(amount as Balance)),
+    new ParsedParam(
+      'Lead',
+      <LeadInfoFromId group={(group as WorkingGroup).type} leadId={(leadId as WorkerId).toNumber()}/>,
+      true
+    )
   ],
   SetWorkingGroupLeaderReward: ([leadId, amount, group]) => [
-    new ParsedParam('Working group', (new WorkingGroup(group)).type),
-    new ParsedParam('New reward amount', formatBalance(amount)),
-    new ParsedParam('Lead', <LeadInfoFromId group={(new WorkingGroup(group).type as WorkingGroupKey)} leadId={leadId}/>, true)
+    new ParsedParam('Working group', (group as WorkingGroup).type),
+    new ParsedParam('New reward amount', formatBalance(amount as Balance)),
+    new ParsedParam(
+      'Lead',
+      <LeadInfoFromId group={(group as WorkingGroup).type} leadId={(leadId as WorkerId).toNumber()}/>,
+      true
+    )
   ],
-  TerminateWorkingGroupLeaderRole: ([params]) => {
-    const paramsObj = new TerminateRoleParameters(params);
-    const { working_group: workingGroup, rationale, worker_id: leadId, slash } = paramsObj;
+  TerminateWorkingGroupLeaderRole: ({
+    working_group: workingGroup,
+    rationale,
+    worker_id: leadId,
+    slash
+  }) => {
     return [
       new ParsedParam('Working group', workingGroup.type),
       new ParsedParam('Rationale', bytesToString(rationale), true),
       new ParsedParam('Slash stake', slash.isTrue ? 'YES' : 'NO'),
-      new ParsedParam('Lead', <LeadInfoFromId group={workingGroup.type as WorkingGroupKey} leadId={leadId.toNumber()}/>, true)
+      new ParsedParam('Lead', <LeadInfoFromId group={workingGroup.type} leadId={leadId.toNumber()}/>, true)
     ];
   }
 };
@@ -305,6 +333,7 @@ const ParamsHeader = styled.h4`
   padding: 0.3rem;
   left: 0.5rem;
 `;
+
 type ProposalParamProps = { fullWidth?: boolean };
 const ProposalParam = ({ fullWidth, children }: React.PropsWithChildren<ProposalParamProps>) => (
   <div style={{ gridColumn: (fullWidth || undefined) && '1/3' }}>
@@ -330,20 +359,26 @@ export default function Body ({
   type,
   title,
   description,
-  params = [],
+  params,
   iAmProposer,
   proposalId,
   proposerId,
   isCancellable,
   cancellationFee
 }: BodyProps) {
-  const parseParams = paramParsers[type];
-  const parsedParams = parseParams(params);
+  // Assert more generic type (since TypeScript cannot possibly know the value of "type" here yet)
+  const parseParams = paramParsers[type] as (params: SpecificProposalDetails<ProposalType>) => ParsedParam[];
+  const parsedParams = parseParams(
+    type === 'RuntimeUpgrade'
+      ? params as RuntimeUpgradeProposalDetails
+      : (params as ProposalDetails).asType(type)
+  );
+
   return (
     <Card fluid>
       <Card.Content>
         <Card.Header>
-          <Header as="h1">{title}</Header>
+          <Header as='h1'>{title}</Header>
         </Card.Header>
         <StyledProposalDescription>
           <ReactMarkdown source={description} linkTarget='_blank' />
@@ -368,20 +403,20 @@ export default function Body ({
                 The cancellation fee for this type of proposal is:&nbsp;
                 <b>{ cancellationFee ? formatBalance(cancellationFee) : 'NONE' }</b>
               </p>
-              <Button.Group color="red">
-                <TxButton
-                  params={ [proposerId, proposalId] }
-                  tx={ 'proposalsEngine.cancelProposal' }
-                  onClick={ sendTx => { sendTx(); } }
-                  className={'icon left labeled'}
-                >
-                  <Icon name="cancel" inverted />
-                  Withdraw proposal
-                </TxButton>
-              </Button.Group>
+              <SemanticTxButton
+                params={ [proposerId, proposalId] }
+                tx={ 'proposalsEngine.cancelProposal' }
+                onClick={ (sendTx) => { sendTx(); } }
+                icon
+                color={ 'red' }
+                labelPosition={ 'left' }
+              >
+                <Icon name='cancel' inverted />
+                Withdraw proposal
+              </SemanticTxButton>
             </Message.Content>
           </Message>
-          </>) }
+        </>) }
       </Card.Content>
     </Card>
   );
diff --git a/pioneer/packages/joy-proposals/src/Proposal/ChooseProposalType.tsx b/pioneer/packages/joy-proposals/src/Proposal/ChooseProposalType.tsx
index fbd8194ab6..09645da010 100644
--- a/pioneer/packages/joy-proposals/src/Proposal/ChooseProposalType.tsx
+++ b/pioneer/packages/joy-proposals/src/Proposal/ChooseProposalType.tsx
@@ -4,7 +4,7 @@ import { Item, Dropdown } from 'semantic-ui-react';
 
 import { useTransport, usePromise } from '@polkadot/joy-utils/react/hooks';
 import { Categories } from '@polkadot/joy-utils/types/proposals';
-import { PromiseComponent } from '@polkadot/joy-utils/react/components';
+import PromiseComponent from '@polkadot/joy-utils/react/components/PromiseComponent';
 import './ChooseProposalType.css';
 import { RouteComponentProps } from 'react-router-dom';
 
@@ -15,12 +15,12 @@ export default function ChooseProposalType (props: RouteComponentProps) {
   const [category, setCategory] = useState('');
 
   return (
-    <div className="ChooseProposalType">
+    <div className='ChooseProposalType'>
       <PromiseComponent error={error} loading={loading} message={'Fetching proposals\' parameters...'}>
-        <div className="filters">
+        <div className='filters'>
           <Dropdown
-            placeholder="Category"
-            options={Object.values(Categories).map(category => ({ value: category, text: category }))}
+            placeholder='Category'
+            options={Object.values(Categories).map((category) => ({ value: category, text: category }))}
             value={category}
             onChange={(e, data) => setCategory((data.value || '').toString())}
             clearable
@@ -29,9 +29,9 @@ export default function ChooseProposalType (props: RouteComponentProps) {
         </div>
         <Item.Group>
           {proposalTypes
-            .filter(typeInfo => (!category || typeInfo.category === category) && !typeInfo.outdated)
-            .map((typeInfo, idx) => (
-              <ProposalTypePreview key={`${typeInfo} - ${idx}`} typeInfo={typeInfo} history={props.history} />
+            .filter((typeInfo) => (!category || typeInfo.category === category) && !typeInfo.outdated)
+            .map((typeInfo) => (
+              <ProposalTypePreview key={typeInfo.type} typeInfo={typeInfo} history={props.history} />
             ))}
         </Item.Group>
       </PromiseComponent>
diff --git a/pioneer/packages/joy-proposals/src/Proposal/Details.tsx b/pioneer/packages/joy-proposals/src/Proposal/Details.tsx
index 3289f0037b..328431064d 100644
--- a/pioneer/packages/joy-proposals/src/Proposal/Details.tsx
+++ b/pioneer/packages/joy-proposals/src/Proposal/Details.tsx
@@ -5,7 +5,7 @@ import { metadata as proposalConsts } from '@polkadot/joy-utils/consts/proposals
 import { ExtendedProposalStatus } from './ProposalDetails';
 import styled from 'styled-components';
 
-import ProfilePreview from '@polkadot/joy-utils/MemberProfilePreview';
+import ProfilePreview from '@polkadot/joy-utils/react/components/MemberProfilePreview';
 
 const DetailsContainer = styled(Item.Group)`
   display: grid;
@@ -57,7 +57,7 @@ const Detail: React.FunctionComponent<DetailProps> = ({ name, value, children })
   <Item>
     <Item.Content>
       <Item.Extra>{ name }:</Item.Extra>
-      { value && <Header as="h4">{value}</Header> }
+      { value && <Header as='h4'>{value}</Header> }
       { children }
     </Item.Content>
   </Item>
@@ -72,9 +72,10 @@ type DetailsProps = {
 export default function Details ({ proposal, extendedStatus, proposerLink = false }: DetailsProps) {
   const { type, createdAt, createdAtBlock, proposer } = proposal;
   const { displayStatus, periodStatus, expiresIn, finalizedAtBlock, executedAtBlock, executionFailReason } = extendedStatus;
+
   return (
     <DetailsContainer>
-      <Detail name="Proposed By">
+      <Detail name='Proposed By'>
         <ProfilePreview
           avatar_uri={proposer.avatar_uri}
           root_account={proposer.root_account}
@@ -83,10 +84,10 @@ export default function Details ({ proposal, extendedStatus, proposerLink = fals
         />
         <Item.Extra>{ `${createdAt.toLocaleString()}` }</Item.Extra>
       </Detail>
-      <Detail name="Proposal type" value={type}>
-        <Item.Extra>{ proposalConsts[type].outdated && <Label size="small">Outdated proposal type</Label> }</Item.Extra>
+      <Detail name='Proposal type' value={type}>
+        <Item.Extra>{ proposalConsts[type].outdated && <Label size='small'>Outdated proposal type</Label> }</Item.Extra>
       </Detail>
-      <Detail name="Stage" value={displayStatus}>
+      <Detail name='Stage' value={displayStatus}>
         <Item.Extra>
           { createdAtBlock && <BlockInfo>Created at block <b>#{ createdAtBlock }</b></BlockInfo> }
           { finalizedAtBlock && <BlockInfo>Finalized at block <b>#{ finalizedAtBlock }</b></BlockInfo> }
@@ -98,13 +99,13 @@ export default function Details ({ proposal, extendedStatus, proposerLink = fals
           ) }
         </Item.Extra>
       </Detail>
-      { (periodStatus !== null) && <Detail name="Substage" value={periodStatus} /> }
+      { (periodStatus !== null) && <Detail name='Substage' value={periodStatus} /> }
       {expiresIn !== null && (
         <Detail
           name={ periodStatus === 'Grace period' ? 'Executes in' : 'Expires in' }
           value={`${expiresIn.toLocaleString('en-US')} blocks`} />
       ) }
-      {executionFailReason && <Detail name="Execution error" value={ executionFailReason } /> }
+      {executionFailReason && <Detail name='Execution error' value={ executionFailReason } /> }
     </DetailsContainer>
   );
 }
diff --git a/pioneer/packages/joy-proposals/src/Proposal/ProposalDetails.tsx b/pioneer/packages/joy-proposals/src/Proposal/ProposalDetails.tsx
index 075f87843a..bb419b680f 100644
--- a/pioneer/packages/joy-proposals/src/Proposal/ProposalDetails.tsx
+++ b/pioneer/packages/joy-proposals/src/Proposal/ProposalDetails.tsx
@@ -4,13 +4,11 @@ import Details from './Details';
 import Body from './Body';
 import VotingSection from './VotingSection';
 import Votes from './Votes';
-import { MyAccountProps, withMyAccount } from '@polkadot/joy-utils/MyAccount';
+import { MyAccountProps, withMyAccount } from '@polkadot/joy-utils/react/hocs/accounts';
 import { ParsedProposal } from '@polkadot/joy-utils/types/proposals';
 import { withCalls } from '@polkadot/react-api';
-import { withMulti } from '@polkadot/react-api/with';
-
-import './Proposal.css';
-import { ProposalId, ProposalDecisionStatuses, ApprovedProposalStatuses, ExecutionFailedStatus } from '@joystream/types/proposals';
+import { withMulti } from '@polkadot/react-api/hoc';
+import { ProposalId, ProposalDecisionStatuses, ApprovedProposalStatuses } from '@joystream/types/proposals';
 import { BlockNumber } from '@polkadot/types/interfaces';
 import { MemberId } from '@joystream/types/members';
 import { Seat } from '@joystream/types/council';
@@ -59,7 +57,7 @@ export type ExtendedProposalStatus = {
 }
 
 export function getExtendedStatus (proposal: ParsedProposal, bestNumber: BlockNumber | undefined): ExtendedProposalStatus {
-  const basicStatus = Object.keys(proposal.status)[0] as BasicProposalStatus;
+  const basicStatus: BasicProposalStatus = proposal.status.type;
   let expiresIn: number | null = null;
 
   let displayStatus: ProposalDisplayStatus = basicStatus;
@@ -75,26 +73,32 @@ export function getExtendedStatus (proposal: ParsedProposal, bestNumber: BlockNu
 
   if (basicStatus === 'Active') {
     periodStatus = 'Voting period';
-    expiresIn = Math.max(votingPeriod - blockAge, 0) || null;
+    expiresIn = Math.max(votingPeriod.toNumber() - blockAge, 0) || null;
   }
 
   if (basicStatus === 'Finalized') {
-    const { finalizedAt, proposalStatus } = proposal.status.Finalized;
-    const decisionStatus: ProposalDecisionStatuses = Object.keys(proposalStatus)[0] as ProposalDecisionStatuses;
+    const { finalizedAt, proposalStatus } = proposal.status.asType('Finalized');
+    const decisionStatus: ProposalDecisionStatuses = proposalStatus.type;
+
     displayStatus = decisionStatus;
-    finalizedAtBlock = finalizedAt as number;
+    finalizedAtBlock = finalizedAt.toNumber();
+
     if (decisionStatus === 'Approved') {
-      const approvedStatus: ApprovedProposalStatuses = Object.keys(proposalStatus.Approved)[0] as ApprovedProposalStatuses;
+      const approvedStatus: ApprovedProposalStatuses = proposalStatus.asType('Approved').type;
+
       if (approvedStatus === 'PendingExecution') {
-        const finalizedAge = best - finalizedAt;
+        const finalizedAge = best - finalizedAt.toNumber();
+
         periodStatus = 'Grace period';
-        expiresIn = Math.max(gracePeriod - finalizedAge, 0) || null;
+        expiresIn = Math.max(gracePeriod.toNumber() - finalizedAge, 0) || null;
       } else {
         // Executed / ExecutionFailed
         displayStatus = approvedStatus;
-        executedAtBlock = finalizedAtBlock + gracePeriod;
+        executedAtBlock = finalizedAtBlock + gracePeriod.toNumber();
+
         if (approvedStatus === 'ExecutionFailed') {
-          const executionFailedStatus = proposalStatus.Approved.ExecutionFailed as ExecutionFailedStatus;
+          const executionFailedStatus = proposalStatus.asType('Approved').asType('ExecutionFailed');
+
           executionFailReason = Buffer.from(executionFailedStatus.error.toString().replace('0x', ''), 'hex').toString();
         }
       }
@@ -127,12 +131,13 @@ function ProposalDetails ({
   council,
   bestNumber
 }: ProposalDetailsProps) {
-  const iAmCouncilMember = Boolean(iAmMember && council && council.some(seat => seat.member.toString() === myAddress));
+  const iAmCouncilMember = Boolean(iAmMember && council && council.some((seat) => seat.member.toString() === myAddress));
   const iAmProposer = Boolean(iAmMember && myMemberId !== undefined && proposal.proposerId === myMemberId.toNumber());
   const extendedStatus = getExtendedStatus(proposal, bestNumber);
   const isVotingPeriod = extendedStatus.periodStatus === 'Voting period';
+
   return (
-    <div className="Proposal">
+    <div className='Proposal'>
       <Details proposal={proposal} extendedStatus={extendedStatus} proposerLink={ true }/>
       <ProposalDetailsMain>
         <Body
diff --git a/pioneer/packages/joy-proposals/src/Proposal/ProposalFromId.tsx b/pioneer/packages/joy-proposals/src/Proposal/ProposalFromId.tsx
index 4ddfa58251..763029002b 100644
--- a/pioneer/packages/joy-proposals/src/Proposal/ProposalFromId.tsx
+++ b/pioneer/packages/joy-proposals/src/Proposal/ProposalFromId.tsx
@@ -2,17 +2,20 @@ import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import ProposalDetails from './ProposalDetails';
 import { useProposalSubscription } from '@polkadot/joy-utils/react/hooks';
-import { PromiseComponent } from '@polkadot/joy-utils/react/components';
-import { ProposalId } from '@joystream/types/proposals';
+import PromiseComponent from '@polkadot/joy-utils/react/components/PromiseComponent';
+import { useApi } from '@polkadot/react-hooks';
 
-export default function ProposalFromId (props: RouteComponentProps<any>) {
+type RouteParams = { id?: string | undefined };
+
+export default function ProposalFromId (props: RouteComponentProps<RouteParams>) {
   const {
     match: {
       params: { id }
     }
   } = props;
+  const { api } = useApi();
 
-  const proposalState = useProposalSubscription(new ProposalId(id));
+  const proposalState = useProposalSubscription(api.createType('ProposalId', id));
 
   return (
     <PromiseComponent
diff --git a/pioneer/packages/joy-proposals/src/Proposal/ProposalPreview.tsx b/pioneer/packages/joy-proposals/src/Proposal/ProposalPreview.tsx
index c562d634f6..5ef4be2cf2 100644
--- a/pioneer/packages/joy-proposals/src/Proposal/ProposalPreview.tsx
+++ b/pioneer/packages/joy-proposals/src/Proposal/ProposalPreview.tsx
@@ -7,8 +7,6 @@ import { BlockNumber } from '@polkadot/types/interfaces';
 import styled from 'styled-components';
 import ReactMarkdown from 'react-markdown';
 
-import './Proposal.css';
-
 const ProposalIdBox = styled.div`
   position: absolute;
   top: 0;
@@ -28,17 +26,18 @@ export type ProposalPreviewProps = {
   proposal: ParsedProposal;
   bestNumber?: BlockNumber;
 };
+
 export default function ProposalPreview ({ proposal, bestNumber }: ProposalPreviewProps) {
   const extendedStatus = getExtendedStatus(proposal, bestNumber);
+
   return (
     <Card
       fluid
-      className="Proposal"
-      href={`#/proposals/${proposal.id}`}>
+      href={`#/proposals/${proposal.id.toString()}`}>
       <ProposalIdBox>{ `#${proposal.id.toString()}` }</ProposalIdBox>
       <Card.Content>
         <Card.Header>
-          <Header as="h1">{proposal.title}</Header>
+          <Header as='h1'>{proposal.title}</Header>
         </Card.Header>
         <Card.Description>
           <ProposalDesc>
diff --git a/pioneer/packages/joy-proposals/src/Proposal/ProposalPreviewList.tsx b/pioneer/packages/joy-proposals/src/Proposal/ProposalPreviewList.tsx
index 22df3b8803..e160532267 100644
--- a/pioneer/packages/joy-proposals/src/Proposal/ProposalPreviewList.tsx
+++ b/pioneer/packages/joy-proposals/src/Proposal/ProposalPreviewList.tsx
@@ -6,7 +6,7 @@ import { Link, useLocation } from 'react-router-dom';
 import ProposalPreview from './ProposalPreview';
 import { ParsedProposal, proposalStatusFilters, ProposalStatusFilter, ProposalsBatch } from '@polkadot/joy-utils/types/proposals';
 import { useTransport, usePromise } from '@polkadot/joy-utils/react/hooks';
-import { PromiseComponent } from '@polkadot/joy-utils/react/components';
+import PromiseComponent from '@polkadot/joy-utils/react/components/PromiseComponent';
 import { withCalls } from '@polkadot/react-api';
 import { BlockNumber } from '@polkadot/types/interfaces';
 import { Dropdown } from '@polkadot/react-components';
@@ -41,7 +41,7 @@ function ProposalPreviewList ({ bestNumber }: ProposalPreviewListProps) {
     [activeFilter, currentPage]
   );
 
-  const filterOptions = proposalStatusFilters.map(filter => ({
+  const filterOptions = proposalStatusFilters.map((filter) => ({
     text: filter,
     value: filter
   }));
@@ -52,20 +52,20 @@ function ProposalPreviewList ({ bestNumber }: ProposalPreviewListProps) {
   };
 
   return (
-    <Container className="Proposal" fluid>
+    <Container className='Proposal' fluid>
       <FilterContainer>
         <Button primary as={Link} to={`${pathname}/new`}>
-          <Icon name="add" />
+          <Icon name='add' />
           New proposal
         </Button>
         <StyledDropdown
-          label="Proposal state"
+          label='Proposal state'
           options={filterOptions}
           value={activeFilter}
           onChange={_onChangePrefix}
         />
       </FilterContainer>
-      <PromiseComponent error={ error } loading={ loading } message="Fetching proposals...">
+      <PromiseComponent error={ error } loading={ loading } message='Fetching proposals...'>
         { proposalsBatch && (<>
           <PaginationBox>
             { proposalsBatch.totalBatches > 1 && (
@@ -81,16 +81,16 @@ function ProposalPreviewList ({ bestNumber }: ProposalPreviewListProps) {
               />
             ) }
           </PaginationBox>
-           { proposalsBatch.proposals.length
-             ? (
-               <Card.Group>
-                 {proposalsBatch.proposals.map((prop: ParsedProposal, idx: number) => (
-                   <ProposalPreview key={`${prop.title}-${idx}`} proposal={prop} bestNumber={bestNumber} />
-                 ))}
-               </Card.Group>
-             )
-             : `There are currently no ${activeFilter !== 'All' ? activeFilter.toLocaleLowerCase() : 'submitted'} proposals.`
-           }
+          { proposalsBatch.proposals.length
+            ? (
+              <Card.Group>
+                {proposalsBatch.proposals.map((prop: ParsedProposal, idx: number) => (
+                  <ProposalPreview key={`${prop.title}-${idx}`} proposal={prop} bestNumber={bestNumber} />
+                ))}
+              </Card.Group>
+            )
+            : `There are currently no ${activeFilter !== 'All' ? activeFilter.toLocaleLowerCase() : 'submitted'} proposals.`
+          }
         </>) }
       </PromiseComponent>
     </Container>
diff --git a/pioneer/packages/joy-proposals/src/Proposal/ProposalTypePreview.tsx b/pioneer/packages/joy-proposals/src/Proposal/ProposalTypePreview.tsx
index 092848a77b..994faf34bf 100644
--- a/pioneer/packages/joy-proposals/src/Proposal/ProposalTypePreview.tsx
+++ b/pioneer/packages/joy-proposals/src/Proposal/ProposalTypePreview.tsx
@@ -6,7 +6,7 @@ import { Item, Icon, Button, Label } from 'semantic-ui-react';
 import { ProposalType, Category } from '@polkadot/joy-utils/types/proposals';
 import _ from 'lodash';
 import styled from 'styled-components';
-import useVoteStyles from './useVoteStyles';
+import getVoteStyles from './getVoteStyles';
 import { formatBalance } from '@polkadot/util';
 
 import './ProposalType.css';
@@ -62,9 +62,9 @@ type ProposalTypePreviewProps = {
 };
 
 const ProposalTypeDetail = (props: { title: string; value: string }) => (
-  <div className="proposal-detail">
-    <div className="detail-title">{ `${props.title}:` }</div>
-    <div className="detail-value">{ props.value }</div>
+  <div className='proposal-detail'>
+    <div className='detail-title'>{ `${props.title}:` }</div>
+    <div className='detail-value'>{ props.value }</div>
   </div>
 );
 
@@ -90,7 +90,7 @@ export default function ProposalTypePreview (props: ProposalTypePreviewProps) {
   };
 
   return (
-    <Item className="ProposalType">
+    <Item className='ProposalType'>
       {/*
         TODO: We can add it once we have the actual assets
         <Item.Image size="tiny" src={image} />
@@ -98,51 +98,51 @@ export default function ProposalTypePreview (props: ProposalTypePreviewProps) {
       <Item.Content>
         <Item.Header>{_.startCase(type)}</Item.Header>
         <Item.Description>{description}</Item.Description>
-        <div className="proposal-details">
+        <div className='proposal-details'>
           <ProposalTypeDetail
-            title="Stake"
+            title='Stake'
             value={ formatBalance(stake) } />
           <ProposalTypeDetail
-            title="Cancellation fee"
+            title='Cancellation fee'
             value={ cancellationFee ? formatBalance(cancellationFee) : 'NONE' } />
           <ProposalTypeDetail
-            title="Grace period"
+            title='Grace period'
             value={ gracePeriod ? `${gracePeriod} block${gracePeriod > 1 ? 's' : ''}` : 'NONE' } />
           <ProposalTypeDetail
-            title="Voting period"
+            title='Voting period'
             value={ votingPeriod ? `${votingPeriod} block${votingPeriod > 1 ? 's' : ''}` : 'NONE' } />
         </div>
         <QuorumsAndThresholds>
           { approvalQuorum && (
-            <QuorumThresholdLabel color={ useVoteStyles('Approve').color }>
-              <Icon name={ useVoteStyles('Approve').icon } />
+            <QuorumThresholdLabel color={ getVoteStyles('Approve').color }>
+              <Icon name={ getVoteStyles('Approve').icon } />
               Approval Quorum: <b>{ approvalQuorum }%</b>
             </QuorumThresholdLabel>
           ) }
           { approvalThreshold && (
-            <QuorumThresholdLabel color={ useVoteStyles('Approve').color }>
-              <Icon name={ useVoteStyles('Approve').icon } />
+            <QuorumThresholdLabel color={ getVoteStyles('Approve').color }>
+              <Icon name={ getVoteStyles('Approve').icon } />
               Approval Threshold: <b>{ approvalThreshold }%</b>
             </QuorumThresholdLabel>
           ) }
           { slashingQuorum && (
-            <QuorumThresholdLabel color={ useVoteStyles('Slash').color }>
-              <Icon name={ useVoteStyles('Slash').icon } />
+            <QuorumThresholdLabel color={ getVoteStyles('Slash').color }>
+              <Icon name={ getVoteStyles('Slash').icon } />
               Slashing Quorum: <b>{ slashingQuorum }%</b>
             </QuorumThresholdLabel>
           ) }
           { slashingThreshold && (
-            <QuorumThresholdLabel color={ useVoteStyles('Slash').color }>
-              <Icon name={ useVoteStyles('Slash').icon } />
+            <QuorumThresholdLabel color={ getVoteStyles('Slash').color }>
+              <Icon name={ getVoteStyles('Slash').icon } />
               Slashing Threshold: <b>{ slashingThreshold }%</b>
             </QuorumThresholdLabel>
           ) }
         </QuorumsAndThresholds>
       </Item.Content>
-      <div className="actions">
-        <CreateButton primary size="medium" onClick={handleClick}>
+      <div className='actions'>
+        <CreateButton primary size='medium' onClick={handleClick}>
           Create
-          <Icon name="chevron right" />
+          <Icon name='chevron right' />
         </CreateButton>
       </div>
     </Item>
diff --git a/pioneer/packages/joy-proposals/src/Proposal/Votes.tsx b/pioneer/packages/joy-proposals/src/Proposal/Votes.tsx
index 6eec0b42c8..20cea5011d 100644
--- a/pioneer/packages/joy-proposals/src/Proposal/Votes.tsx
+++ b/pioneer/packages/joy-proposals/src/Proposal/Votes.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Header, Divider, Table, Icon } from 'semantic-ui-react';
-import useVoteStyles from './useVoteStyles';
+import getVoteStyles from './getVoteStyles';
 import { VoteKind } from '@joystream/types/proposals';
 import { VoteKindStr } from './VotingSection';
-import ProfilePreview from '@polkadot/joy-utils/MemberProfilePreview';
+import ProfilePreview from '@polkadot/joy-utils/react/components/MemberProfilePreview';
 import { useTransport, usePromise } from '@polkadot/joy-utils/react/hooks';
 import { ParsedProposal, ProposalVotes } from '@polkadot/joy-utils/types/proposals';
-import { PromiseComponent } from '@polkadot/joy-utils/react/components';
+import PromiseComponent from '@polkadot/joy-utils/react/components/PromiseComponent';
 
 type VotesProps = {
   proposal: ParsedProposal;
@@ -24,20 +24,21 @@ export default function Votes ({ proposal: { id, votingResults } }: VotesProps)
     <PromiseComponent
       error={error}
       loading={loading}
-      message="Fetching the votes...">
+      message='Fetching the votes...'>
       { (votes && votes.votes.length > 0)
         ? (
           <>
-            <Header as="h3">
+            <Header as='h3'>
               All Votes: ({votes.votes.length}/{votes.councilMembersLength})
             </Header>
             <Divider />
-            <Table basic="very">
+            <Table basic='very'>
               <Table.Body>
                 {votes.votes.map((proposalVote, idx) => {
                   const { vote, member } = proposalVote;
                   const voteStr = (vote as VoteKind).type.toString() as VoteKindStr;
-                  const { icon, textColor } = useVoteStyles(voteStr);
+                  const { icon, textColor } = getVoteStyles(voteStr);
+
                   return (
                     <Table.Row key={`${member.handle}-${idx}`}>
                       <Table.Cell className={textColor}>
@@ -59,7 +60,7 @@ export default function Votes ({ proposal: { id, votingResults } }: VotesProps)
           </>
         )
         : (
-          <Header as="h4">No votes have been submitted!</Header>
+          <Header as='h4'>No votes have been submitted!</Header>
         )
       }
     </PromiseComponent>
diff --git a/pioneer/packages/joy-proposals/src/Proposal/VotingSection.tsx b/pioneer/packages/joy-proposals/src/Proposal/VotingSection.tsx
index 7e10d4b1fb..2908792788 100644
--- a/pioneer/packages/joy-proposals/src/Proposal/VotingSection.tsx
+++ b/pioneer/packages/joy-proposals/src/Proposal/VotingSection.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 
-import { Icon, Button, Message, Divider, Header } from 'semantic-ui-react';
-import useVoteStyles from './useVoteStyles';
-import TxButton from '@polkadot/joy-utils/TxButton';
+import { Icon, Message, Divider, Header } from 'semantic-ui-react';
+import getVoteStyles from './getVoteStyles';
+import { SemanticTxButton } from '@polkadot/joy-utils/react/components/TxButton';
 import { MemberId } from '@joystream/types/members';
 import { ProposalId, VoteKind, VoteKinds } from '@joystream/types/proposals';
 import { useTransport, usePromise } from '@polkadot/joy-utils/react/hooks';
@@ -32,27 +32,28 @@ type VoteButtonProps = {
   proposalId: ProposalId;
   onSuccess: () => void;
 }
+
 function VoteButton ({ voteKind, proposalId, memberId, onSuccess }: VoteButtonProps) {
-  const { icon, color } = useVoteStyles(voteKind);
+  const { icon, color } = getVoteStyles(voteKind);
+
   return (
-    // Button.Group "cheat" to force TxButton color
-    <Button.Group color={color} style={{ marginRight: '5px' }}>
-      <TxButton
-        // isDisabled={ isSubmitting }
-        params={[
-          memberId,
-          proposalId,
-          voteKind
-        ]}
-        tx={ 'proposalsEngine.vote' }
-        onClick={ sendTx => sendTx() }
-        txFailedCb={ () => null }
-        txSuccessCb={ onSuccess }
-        className={'icon left labeled'}>
-        <Icon name={icon} inverted />
-        { voteKind }
-      </TxButton>
-    </Button.Group>
+    <SemanticTxButton
+      params={[
+        memberId,
+        proposalId,
+        voteKind
+      ]}
+      tx={ 'proposalsEngine.vote' }
+      onClick={ (sendTx) => sendTx() }
+      txFailedCb={ () => null }
+      txSuccessCb={ onSuccess }
+      color={color}
+      style={{ marginRight: '5px' }}
+      icon
+      labelPosition={ 'left' }>
+      <Icon name={icon} inverted />
+      { voteKind }
+    </SemanticTxButton>
   );
 }
 
@@ -82,13 +83,13 @@ export default function VotingSection ({
   const voteStr: VoteKindStr | null = voted || (vote && vote.type.toString() as VoteKindStr);
 
   if (voteStr) {
-    const { icon, color } = useVoteStyles(voteStr);
+    const { icon, color } = getVoteStyles(voteStr);
 
     return (
       <Message icon color={color}>
         <Icon name={icon} />
         <Message.Content>
-          You voted <span className="bold">{`"${voteStr}"`}</span>
+          You voted <span className='bold'>{`"${voteStr}"`}</span>
         </Message.Content>
       </Message>
     );
@@ -98,7 +99,7 @@ export default function VotingSection ({
 
   return (
     <>
-      <Header as="h3">Sumbit your vote</Header>
+      <Header as='h3'>Sumbit your vote</Header>
       <Divider />
       <VoteButtons>
         { VoteKinds.map((voteKind) =>
diff --git a/pioneer/packages/joy-proposals/src/Proposal/discussion/DiscussionPost.tsx b/pioneer/packages/joy-proposals/src/Proposal/discussion/DiscussionPost.tsx
index 40d3125e22..b1c26fdea5 100644
--- a/pioneer/packages/joy-proposals/src/Proposal/discussion/DiscussionPost.tsx
+++ b/pioneer/packages/joy-proposals/src/Proposal/discussion/DiscussionPost.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Button, Icon } from 'semantic-ui-react';
 import { ParsedPost } from '@polkadot/joy-utils/types/proposals';
-import MemberProfilePreview from '@polkadot/joy-utils/MemberProfilePreview';
+import MemberProfilePreview from '@polkadot/joy-utils/react/components/MemberProfilePreview';
 import DiscussionPostForm from './DiscussionPostForm';
 import { MemberId } from '@joystream/types/members';
 import { useTransport } from '@polkadot/joy-utils/react/hooks';
@@ -61,6 +61,7 @@ export default function DiscussionPost ({
     authorId.toNumber() === memberId.toNumber() &&
     editsCount < constraints.maxPostEdits
   );
+
   const onEditSuccess = () => {
     setEditing(false);
     refreshDiscussion();
@@ -98,9 +99,9 @@ export default function DiscussionPost ({
               <CommentAction
                 onClick={() => setEditing(true)}
                 primary
-                size="tiny"
+                size='tiny'
                 icon>
-                <Icon name="pencil" />
+                <Icon name='pencil' />
               </CommentAction>
             </CommentActions>
           ) }
diff --git a/pioneer/packages/joy-proposals/src/Proposal/discussion/DiscussionPostForm.tsx b/pioneer/packages/joy-proposals/src/Proposal/discussion/DiscussionPostForm.tsx
index 5b7ff204fd..b57bd7f48c 100644
--- a/pioneer/packages/joy-proposals/src/Proposal/discussion/DiscussionPostForm.tsx
+++ b/pioneer/packages/joy-proposals/src/Proposal/discussion/DiscussionPostForm.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { Form, Field, withFormik, FormikProps } from 'formik';
 import * as Yup from 'yup';
 
-import TxButton from '@polkadot/joy-utils/TxButton';
-import * as JoyForms from '@polkadot/joy-utils/forms';
+import TxButton from '@polkadot/joy-utils/react/components/TxButton';
+import * as JoyForms from '@polkadot/joy-utils/react/components/forms';
 import { SubmittableResult } from '@polkadot/api';
 import { Button } from 'semantic-ui-react';
 import { TxFailedCallback, TxCallback } from '@polkadot/react-components/Status/types';
@@ -76,7 +76,7 @@ const DiscussionPostFormInner = (props: InnerProps) => {
   };
 
   return (
-    <Form className="ui form JoyForm">
+    <Form className='ui form JoyForm'>
       <LabelledField name='text' {...props}>
         <Field
           component='textarea'
@@ -86,10 +86,9 @@ const DiscussionPostFormInner = (props: InnerProps) => {
           rows={5}
           placeholder='Content of the post...' />
       </LabelledField>
-      <LabelledField invisibleLabel {...props}>
+      <LabelledField invisibleLabel {...props} flex>
         <TxButton
-          type="submit"
-          size="large"
+          type='submit'
           label={isEditForm ? 'Update' : 'Add Post'}
           isDisabled={isSubmitting || !isValid}
           params={buildTxParams()}
@@ -100,20 +99,20 @@ const DiscussionPostFormInner = (props: InnerProps) => {
         />
         { isEditForm ? (
           <Button
-            type="button"
-            size="large"
+            type='button'
+            size='large'
             disabled={isSubmitting}
-            color="red"
+            color='red'
             onClick={() => onSuccess()}
-            content="Cancel"
+            content='Cancel'
           />
         ) : (
           <Button
-            type="button"
-            size="large"
+            type='button'
+            size='large'
             disabled={isSubmitting}
             onClick={() => resetForm()}
-            content="Clear"
+            content='Clear'
           />
         ) }
       </LabelledField>
@@ -123,8 +122,9 @@ const DiscussionPostFormInner = (props: InnerProps) => {
 
 const DiscussionPostFormOuter = withFormik<OuterProps, FormValues>({
   // Transform outer props into form values
-  mapPropsToValues: props => {
+  mapPropsToValues: (props) => {
     const { post } = props;
+
     return { text: post && post.postId ? post.text : '' };
   },
   validationSchema: ({ constraints: c }: OuterProps) => (Yup.object().shape({
@@ -133,7 +133,7 @@ const DiscussionPostFormOuter = withFormik<OuterProps, FormValues>({
       .required('Post content is required')
       .max(c.maxPostLength, `The content cannot be longer than ${c.maxPostLength} characters`)
   })),
-  handleSubmit: values => {
+  handleSubmit: (values) => {
     // do submitting things
   }
 })(DiscussionPostFormInner);
diff --git a/pioneer/packages/joy-proposals/src/Proposal/discussion/ProposalDiscussion.tsx b/pioneer/packages/joy-proposals/src/Proposal/discussion/ProposalDiscussion.tsx
index 7c7ed77038..e17f3ee142 100644
--- a/pioneer/packages/joy-proposals/src/Proposal/discussion/ProposalDiscussion.tsx
+++ b/pioneer/packages/joy-proposals/src/Proposal/discussion/ProposalDiscussion.tsx
@@ -3,7 +3,7 @@ import { Divider, Header } from 'semantic-ui-react';
 import { useTransport, usePromise } from '@polkadot/joy-utils/react/hooks';
 import { ProposalId } from '@joystream/types/proposals';
 import { ParsedDiscussion } from '@polkadot/joy-utils/types/proposals';
-import { PromiseComponent } from '@polkadot/joy-utils/react/components';
+import PromiseComponent from '@polkadot/joy-utils/react/components/PromiseComponent';
 import DiscussionPost from './DiscussionPost';
 import DiscussionPostForm from './DiscussionPostForm';
 import { MemberId } from '@joystream/types/members';
@@ -28,7 +28,7 @@ export default function ProposalDiscussion ({
     <PromiseComponent error={error} loading={loading} message={'Fetching discussion posts...'}>
       { discussion && (
         <>
-          <Header as="h3">Discussion ({ discussion.posts.length})</Header>
+          <Header as='h3'>Discussion ({ discussion.posts.length})</Header>
           <Divider />
           { discussion.posts.length ? (
             discussion.posts.map((post, key) => (
@@ -40,7 +40,7 @@ export default function ProposalDiscussion ({
             ))
           )
             : (
-              <Header as="h4" style={{ margin: '1rem 0' }}>Nothing has been posted here yet!</Header>
+              <Header as='h4' style={{ margin: '1rem 0' }}>Nothing has been posted here yet!</Header>
             )
           }
           { memberId && (
diff --git a/pioneer/packages/joy-proposals/src/Proposal/useVoteStyles.tsx b/pioneer/packages/joy-proposals/src/Proposal/getVoteStyles.tsx
similarity index 94%
rename from pioneer/packages/joy-proposals/src/Proposal/useVoteStyles.tsx
rename to pioneer/packages/joy-proposals/src/Proposal/getVoteStyles.tsx
index 0c5de83079..a39f463534 100644
--- a/pioneer/packages/joy-proposals/src/Proposal/useVoteStyles.tsx
+++ b/pioneer/packages/joy-proposals/src/Proposal/getVoteStyles.tsx
@@ -1,6 +1,6 @@
 import { SemanticCOLORS, SemanticICONS } from 'semantic-ui-react';
 
-export default function useVoteStyles (
+export default function getVoteStyles (
   value: 'Approve' | 'Abstain' | 'Reject' | 'Slash'
 ): { textColor: string; icon: SemanticICONS; color: SemanticCOLORS } {
   let textColor;
@@ -14,18 +14,21 @@ export default function useVoteStyles (
       textColor = 'text-green';
       break;
     }
+
     case 'Abstain': {
       icon = 'meh';
       color = 'grey';
       textColor = 'text-grey';
       break;
     }
+
     case 'Reject': {
       icon = 'frown';
       color = 'orange';
       textColor = 'text-orange';
       break;
     }
+
     case 'Slash': {
       icon = 'times';
       color = 'red';
diff --git a/pioneer/packages/joy-proposals/src/forms/AddWorkingGroupOpeningForm.tsx b/pioneer/packages/joy-proposals/src/forms/AddWorkingGroupOpeningForm.tsx
index e65d0e628e..28df203d5c 100644
--- a/pioneer/packages/joy-proposals/src/forms/AddWorkingGroupOpeningForm.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/AddWorkingGroupOpeningForm.tsx
@@ -1,21 +1,15 @@
 import React, { useEffect } from 'react';
 import { getFormErrorLabelsProps, FormErrorLabelsProps } from './errorHandling';
 import * as Yup from 'yup';
-import {
-  withProposalFormData,
+import { withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps,
-  genericFormDefaultOptions
-} from './GenericProposalForm';
-import {
-  GenericWorkingGroupProposalForm,
+  ProposalFormInnerProps } from './GenericProposalForm';
+import { GenericWorkingGroupProposalForm,
   FormValues as WGFormValues,
-  defaultValues as wgFromDefaultValues
-} from './GenericWorkingGroupProposalForm';
+  defaultValues as wgFromDefaultValues } from './GenericWorkingGroupProposalForm';
 import { FormField, InputFormField, TextareaFormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
-import './forms.css';
 import { ActivateOpeningAtKey, ActivateOpeningAtDef, StakingAmountLimitModeKeys, IApplicationRationingPolicy, IStakingPolicy } from '@joystream/types/hiring';
 import { GenericJoyStreamRoleSchema } from '@joystream/types/hiring/schemas/role.schema.typings';
 import { Dropdown, Grid, Message, Checkbox } from 'semantic-ui-react';
@@ -97,7 +91,7 @@ const HRTDefault: (memberHandle: string, group: WorkingGroupKey) => GenericJoySt
     }
   });
 
-type FormAdditionalProps = {}; // Aditional props coming all the way from export component into the inner form.
+type FormAdditionalProps = Record<any, never>; // Aditional props coming all the way from export component into the inner form.
 type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormValues>;
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps> & {
   currentBlock?: BlockNumber;
@@ -109,6 +103,7 @@ type StakeFieldsProps = Pick<FormInnerProps, 'values' | 'handleChange' | 'setFie
   errorLabelsProps: FormErrorLabelsProps<FormValues>;
   stakeType: 'role' | 'application';
 };
+
 const StakeFields: React.FunctionComponent<StakeFieldsProps> = ({
   values,
   errorLabelsProps,
@@ -117,35 +112,35 @@ const StakeFields: React.FunctionComponent<StakeFieldsProps> = ({
   setFieldValue
 }) => {
   return (
-  <>
-    <FormField label={`${_.startCase(stakeType)} stake` }>
-      <Checkbox
-        toggle
-        onChange={(e, data) => { setFieldValue(`${stakeType}StakeRequired`, data.checked); }}
-        label={ `Require ${stakeType} stake` }
-        checked={ stakeType === 'role' ? values.roleStakeRequired : values.applicationStakeRequired }/>
-    </FormField>
-    { (stakeType === 'role' ? values.roleStakeRequired : values.applicationStakeRequired) && (<>
-      <FormField label="Stake mode">
-        <Dropdown
+    <>
+      <FormField label={`${_.startCase(stakeType)} stake` }>
+        <Checkbox
+          toggle
+          onChange={(e, data) => { setFieldValue(`${stakeType}StakeRequired`, data.checked); }}
+          label={ `Require ${stakeType} stake` }
+          checked={ stakeType === 'role' ? values.roleStakeRequired : values.applicationStakeRequired }/>
+      </FormField>
+      { (stakeType === 'role' ? values.roleStakeRequired : values.applicationStakeRequired) && (<>
+        <FormField label='Stake mode'>
+          <Dropdown
+            onChange={handleChange}
+            name={ `${stakeType}StakeMode` }
+            selection
+            options={[StakingAmountLimitModeKeys.Exact, StakingAmountLimitModeKeys.AtLeast].map((mode) => ({ text: mode, value: mode }))}
+            value={ stakeType === 'role' ? values.roleStakeMode : values.applicationStakeMode }
+          />
+        </FormField>
+        <InputFormField
+          label='Stake value'
+          unit={formatBalance.getDefaults().unit}
           onChange={handleChange}
-          name={ `${stakeType}StakeMode` }
-          selection
-          options={[StakingAmountLimitModeKeys.Exact, StakingAmountLimitModeKeys.AtLeast].map(mode => ({ text: mode, value: mode }))}
-          value={ stakeType === 'role' ? values.roleStakeMode : values.applicationStakeMode }
+          name={ `${stakeType}StakeValue` }
+          error={ stakeType === 'role' ? errorLabelsProps.roleStakeValue : errorLabelsProps.applicationStakeValue}
+          value={ stakeType === 'role' ? values.roleStakeValue : values.applicationStakeValue}
+          placeholder={'ie. 100'}
         />
-      </FormField>
-      <InputFormField
-        label="Stake value"
-        unit={formatBalance.getDefaults().unit}
-        onChange={handleChange}
-        name={ `${stakeType}StakeValue` }
-        error={ stakeType === 'role' ? errorLabelsProps.roleStakeValue : errorLabelsProps.applicationStakeValue}
-        value={ stakeType === 'role' ? values.roleStakeValue : values.applicationStakeValue}
-        placeholder={'ie. 100'}
-      />
-    </>) }
-  </>
+      </>) }
+    </>
   );
 };
 
@@ -153,32 +148,41 @@ const valuesToAddOpeningParams = (values: FormValues): SimplifiedTypeInterface<I
   const commitment: SimplifiedTypeInterface<IWorkingGroupOpeningPolicyCommitment> = {
     max_review_period_length: parseInt(values.maxReviewPeriodLength)
   };
+
   if (parseInt(values.terminateRoleUnstakingPeriod) > 0) {
     commitment.terminate_role_stake_unstaking_period = parseInt(values.terminateRoleUnstakingPeriod);
   }
+
   if (parseInt(values.leaveRoleUnstakingPeriod) > 0) {
     commitment.exit_role_stake_unstaking_period = parseInt(values.leaveRoleUnstakingPeriod);
   }
+
   if (values.applicationsLimited) {
     const rationingPolicy: SimplifiedTypeInterface<IApplicationRationingPolicy> = {
       max_active_applicants: parseInt(values.maxApplications)
     };
+
     commitment.application_rationing_policy = rationingPolicy;
   }
+
   if (values.applicationStakeRequired) {
     const applicationStakingPolicy: SimplifiedTypeInterface<IStakingPolicy> = {
       amount: parseInt(values.applicationStakeValue),
       amount_mode: values.applicationStakeMode
     };
+
     commitment.application_staking_policy = applicationStakingPolicy;
   }
+
   if (values.roleStakeRequired) {
     const roleStakingPolicy: SimplifiedTypeInterface<IStakingPolicy> = {
       amount: parseInt(values.roleStakeValue),
       amount_mode: values.roleStakeMode
     };
+
     commitment.role_staking_policy = roleStakingPolicy;
   }
+
   return {
     activate_at: { [values.activateAt]: values.activateAt === 'ExactBlock' ? parseInt(values.activateAtBlock) : null },
     commitment: commitment,
@@ -187,8 +191,9 @@ const valuesToAddOpeningParams = (values: FormValues): SimplifiedTypeInterface<I
   };
 };
 
-const AddWorkingGroupOpeningForm: React.FunctionComponent<FormInnerProps> = props => {
-  const { handleChange, errors, touched, values, setFieldValue, myMemberId, myMembership } = props;
+const AddWorkingGroupOpeningForm: React.FunctionComponent<FormInnerProps> = (props) => {
+  const { handleChange, errors, touched, values, setFieldValue, myMembership } = props;
+
   useEffect(() => {
     if (myMembership && !touched.humanReadableText) {
       setFieldValue(
@@ -196,31 +201,26 @@ const AddWorkingGroupOpeningForm: React.FunctionComponent<FormInnerProps> = prop
         JSON.stringify(HRTDefault(myMembership.handle.toString(), values.workingGroup), undefined, 4)
       );
     }
-  }, [values.workingGroup, myMembership]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [values.workingGroup, myMembership, touched.humanReadableText]);
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
 
   return (
     <GenericWorkingGroupProposalForm
       {...props}
-      txMethod="createAddWorkingGroupLeaderOpeningProposal"
-      proposalType="AddWorkingGroupLeaderOpening"
-      submitParams={[
-        myMemberId,
-        values.title,
-        values.rationale,
-        '{STAKE}',
-        valuesToAddOpeningParams(values)
-      ]}
+      txMethod='createAddWorkingGroupLeaderOpeningProposal'
+      proposalType='AddWorkingGroupLeaderOpening'
+      submitParams={[valuesToAddOpeningParams(values)]}
     >
-      <Grid columns="4" doubling stackable verticalAlign="bottom">
+      <Grid columns='4' doubling stackable verticalAlign='bottom'>
         <Grid.Row>
           <Grid.Column>
-            <FormField label="Activate opening at">
+            <FormField label='Activate opening at'>
               <Dropdown
                 onChange={handleChange}
-                name="activateAt"
+                name='activateAt'
                 selection
-                options={Object.keys(ActivateOpeningAtDef).map(wgKey => ({ text: wgKey, value: wgKey }))}
+                options={Object.keys(ActivateOpeningAtDef).map((wgKey) => ({ text: wgKey, value: wgKey }))}
                 value={values.activateAt}
               />
             </FormField>
@@ -229,7 +229,7 @@ const AddWorkingGroupOpeningForm: React.FunctionComponent<FormInnerProps> = prop
             { values.activateAt === 'ExactBlock' && (
               <InputFormField
                 onChange={handleChange}
-                name="activateAtBlock"
+                name='activateAtBlock'
                 error={errorLabelsProps.activateAtBlock}
                 value={values.activateAtBlock}
                 placeholder={'Provide the block number'}
@@ -244,35 +244,35 @@ const AddWorkingGroupOpeningForm: React.FunctionComponent<FormInnerProps> = prop
           but no applicants will be able to apply yet) until current block number will equal the specified number.
         </Message>
       ) }
-      <Grid columns="4" doubling stackable verticalAlign="bottom">
+      <Grid columns='4' doubling stackable verticalAlign='bottom'>
         <Grid.Row>
           <Grid.Column>
             <InputFormField
-              label="Max. review period"
+              label='Max. review period'
               onChange={handleChange}
-              name="maxReviewPeriodLength"
+              name='maxReviewPeriodLength'
               error={errorLabelsProps.maxReviewPeriodLength}
               value={values.maxReviewPeriodLength}
               placeholder={'ie. 72000'}
-              unit="blocks"
+              unit='blocks'
             />
           </Grid.Column>
         </Grid.Row>
       </Grid>
-      <Grid columns="4" doubling stackable verticalAlign="bottom">
+      <Grid columns='4' doubling stackable verticalAlign='bottom'>
         <Grid.Row>
           <Grid.Column>
-            <FormField label="Applications limit">
+            <FormField label='Applications limit'>
               <Checkbox
                 toggle
                 onChange={(e, data) => { setFieldValue('applicationsLimited', data.checked); }}
-                label="Limit applications"
+                label='Limit applications'
                 checked={values.applicationsLimited}/>
             </FormField>
             { values.applicationsLimited && (
               <InputFormField
                 onChange={handleChange}
-                name="maxApplications"
+                name='maxApplications'
                 error={errorLabelsProps.maxApplications}
                 value={values.maxApplications}
                 placeholder={'Max. number of applications'}
@@ -281,27 +281,27 @@ const AddWorkingGroupOpeningForm: React.FunctionComponent<FormInnerProps> = prop
           </Grid.Column>
         </Grid.Row>
       </Grid>
-      <Grid columns="2" stackable style={{ marginBottom: 0 }}>
+      <Grid columns='2' stackable style={{ marginBottom: 0 }}>
         <Grid.Row>
           <Grid.Column>
-            <StakeFields stakeType="application" {...{ errorLabelsProps, values, handleChange, setFieldValue }}/>
+            <StakeFields stakeType='application' {...{ errorLabelsProps, values, handleChange, setFieldValue }}/>
           </Grid.Column>
           <Grid.Column>
-            <StakeFields stakeType="role" {...{ errorLabelsProps, values, handleChange, setFieldValue }}/>
+            <StakeFields stakeType='role' {...{ errorLabelsProps, values, handleChange, setFieldValue }}/>
           </Grid.Column>
         </Grid.Row>
       </Grid>
-      <Grid columns="2" stackable style={{ marginBottom: 0 }}>
+      <Grid columns='2' stackable style={{ marginBottom: 0 }}>
         <Grid.Row>
           <Grid.Column>
             <InputFormField
               onChange={handleChange}
-              name="terminateRoleUnstakingPeriod"
+              name='terminateRoleUnstakingPeriod'
               error={errorLabelsProps.terminateRoleUnstakingPeriod}
               value={values.terminateRoleUnstakingPeriod}
               label={'Terminate role unstaking period'}
               placeholder={'ie. 14400'}
-              unit="blocks"
+              unit='blocks'
               help={
                 'In case leader role or application is terminated - this will be the unstaking period for the role stake (in blocks).'
               }
@@ -310,12 +310,12 @@ const AddWorkingGroupOpeningForm: React.FunctionComponent<FormInnerProps> = prop
           <Grid.Column>
             <InputFormField
               onChange={handleChange}
-              name="leaveRoleUnstakingPeriod"
+              name='leaveRoleUnstakingPeriod'
               error={errorLabelsProps.leaveRoleUnstakingPeriod}
               value={values.leaveRoleUnstakingPeriod}
               label={'Leave role unstaking period'}
               placeholder={'ie. 14400'}
-              unit="blocks"
+              unit='blocks'
               help={
                 'In case leader leaves/exits his role - this will be the unstaking period for his role stake (in blocks). ' +
                 'It also applies when user is withdrawing an active leader application.'
@@ -325,11 +325,11 @@ const AddWorkingGroupOpeningForm: React.FunctionComponent<FormInnerProps> = prop
         </Grid.Row>
       </Grid>
       <TextareaFormField
-        label="Opening schema (human_readable_text)"
-        help="JSON schema that describes some characteristics of the opening presented in the UI (headers, content, application form etc.)"
+        label='Opening schema (human_readable_text)'
+        help='JSON schema that describes some characteristics of the opening presented in the UI (headers, content, application form etc.)'
         onChange={handleChange}
-        name="humanReadableText"
-        placeholder="Paste the JSON schema here..."
+        name='humanReadableText'
+        placeholder='Paste the JSON schema here...'
         error={errorLabelsProps.humanReadableText}
         value={values.humanReadableText}
         rows={20}
@@ -344,13 +344,13 @@ const FormContainer = withFormContainer<FormContainerProps, FormValues>({
     ...(props.initialData || {})
   }),
   validationSchema: (props: FormContainerProps) => Yup.object().shape({
-    ...genericFormDefaultOptions.validationSchema,
+    ...Validation.All(),
     ...Validation.AddWorkingGroupLeaderOpening(
       props.currentBlock?.toNumber() || 0,
-      props.HRTConstraint || InputValidationLengthConstraint.createWithMaxAllowed()
+      props.HRTConstraint
     )
   }),
-  handleSubmit: genericFormDefaultOptions.handleSubmit,
+  handleSubmit: () => null,
   displayName: 'AddWorkingGroupOpeningForm'
 })(AddWorkingGroupOpeningForm);
 
diff --git a/pioneer/packages/joy-proposals/src/forms/BeginReviewLeaderApplicationsForm.tsx b/pioneer/packages/joy-proposals/src/forms/BeginReviewLeaderApplicationsForm.tsx
index 22431c13a1..e35f9011ad 100644
--- a/pioneer/packages/joy-proposals/src/forms/BeginReviewLeaderApplicationsForm.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/BeginReviewLeaderApplicationsForm.tsx
@@ -1,26 +1,20 @@
 import React from 'react';
 import * as Yup from 'yup';
-import {
-  withProposalFormData,
+import { withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps,
-  genericFormDefaultOptions
-} from './GenericProposalForm';
-import {
-  GenericWorkingGroupProposalForm,
+  ProposalFormInnerProps } from './GenericProposalForm';
+import { GenericWorkingGroupProposalForm,
   FormValues as WGFormValues,
-  defaultValues as wgFromDefaultValues
-} from './GenericWorkingGroupProposalForm';
+  defaultValues as wgFromDefaultValues } from './GenericWorkingGroupProposalForm';
 import FormField from './FormFields';
 import { withFormContainer } from './FormContainer';
-import './forms.css';
 import { Dropdown, Message } from 'semantic-ui-react';
 import _ from 'lodash';
 import Validation from '../validationSchema';
 import { useTransport, usePromise } from '@polkadot/joy-utils/react/hooks';
 import { OpeningData } from '@polkadot/joy-utils/types/workingGroups';
-import { PromiseComponent } from '@polkadot/joy-utils/react/components';
+import PromiseComponent from '@polkadot/joy-utils/react/components/PromiseComponent';
 import { getFormErrorLabelsProps } from './errorHandling';
 
 export type FormValues = WGFormValues & {
@@ -32,13 +26,13 @@ const defaultValues: FormValues = {
   openingId: ''
 };
 
-type FormAdditionalProps = {}; // Aditional props coming all the way from export component into the inner form.
+type FormAdditionalProps = Record<any, never>; // Aditional props coming all the way from export component into the inner form.
 type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormValues>;
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const BeginReviewLeadeApplicationsForm: React.FunctionComponent<FormInnerProps> = props => {
-  const { handleChange, values, myMemberId, errors, touched } = props;
+const BeginReviewLeadeApplicationsForm: React.FunctionComponent<FormInnerProps> = (props) => {
+  const { handleChange, values, errors, touched } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
   const transport = useTransport();
   const [openings, openingsError, openingsLoading] = usePromise(
@@ -48,8 +42,9 @@ const BeginReviewLeadeApplicationsForm: React.FunctionComponent<FormInnerProps>
   );
   const openingsOptions = openings
     // Map to options
-    .map(od => {
+    .map((od) => {
       const hrt = od.hiringOpening.parse_human_readable_text_with_fallback();
+
       return {
         text: `${od.id.toString()}: ${hrt.headline} (${hrt.job.title})`,
         value: od.id.toString()
@@ -59,19 +54,15 @@ const BeginReviewLeadeApplicationsForm: React.FunctionComponent<FormInnerProps>
   return (
     <GenericWorkingGroupProposalForm
       {...props}
-      txMethod="createBeginReviewWorkingGroupLeaderApplicationsProposal"
-      proposalType="BeginReviewWorkingGroupLeaderApplication"
+      txMethod='createBeginReviewWorkingGroupLeaderApplicationsProposal'
+      proposalType='BeginReviewWorkingGroupLeaderApplication'
       disabled={!openingsOptions.length}
       submitParams={[
-        myMemberId,
-        values.title,
-        values.rationale,
-        '{STAKE}',
         values.openingId,
         values.workingGroup
       ]}
     >
-      <PromiseComponent error={openingsError} loading={openingsLoading} message="Fetching openings...">
+      <PromiseComponent error={openingsError} loading={openingsLoading} message='Fetching openings...'>
         { !openingsOptions.length
           ? (
             <Message error visible>
@@ -84,7 +75,7 @@ const BeginReviewLeadeApplicationsForm: React.FunctionComponent<FormInnerProps>
           )
           : (
             <FormField
-              label="Working Group Opening"
+              label='Working Group Opening'
               error={errorLabelsProps.openingId}
               showErrorMsg>
               <Dropdown
@@ -108,10 +99,10 @@ const FormContainer = withFormContainer<FormContainerProps, FormValues>({
     ...(props.initialData || {})
   }),
   validationSchema: Yup.object().shape({
-    ...genericFormDefaultOptions.validationSchema,
+    ...Validation.All(),
     ...Validation.BeginReviewWorkingGroupLeaderApplication()
   }),
-  handleSubmit: genericFormDefaultOptions.handleSubmit,
+  handleSubmit: () => null,
   displayName: 'BeginReviewLeadeApplicationsForm'
 })(BeginReviewLeadeApplicationsForm);
 
diff --git a/pioneer/packages/joy-proposals/src/forms/DecreaseWorkingGroupLeadStakeForm.tsx b/pioneer/packages/joy-proposals/src/forms/DecreaseWorkingGroupLeadStakeForm.tsx
index 735a57275f..59da084f52 100644
--- a/pioneer/packages/joy-proposals/src/forms/DecreaseWorkingGroupLeadStakeForm.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/DecreaseWorkingGroupLeadStakeForm.tsx
@@ -1,21 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import { getFormErrorLabelsProps } from './errorHandling';
 import * as Yup from 'yup';
-import {
-  withProposalFormData,
+import { withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps,
-  genericFormDefaultOptions
-} from './GenericProposalForm';
-import {
-  GenericWorkingGroupProposalForm,
+  ProposalFormInnerProps } from './GenericProposalForm';
+import { GenericWorkingGroupProposalForm,
   FormValues as WGFormValues,
-  defaultValues as wgFromDefaultValues
-} from './GenericWorkingGroupProposalForm';
+  defaultValues as wgFromDefaultValues } from './GenericWorkingGroupProposalForm';
 import { InputFormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
-import './forms.css';
 import { Grid } from 'semantic-ui-react';
 import { formatBalance } from '@polkadot/util';
 import _ from 'lodash';
@@ -31,13 +25,13 @@ const defaultValues: FormValues = {
   amount: ''
 };
 
-type FormAdditionalProps = {}; // Aditional props coming all the way from export component into the inner form.
+type FormAdditionalProps = Record<any, never>; // Aditional props coming all the way from export component into the inner form.
 type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormValues>;
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const DecreaseWorkingGroupLeadStakeForm: React.FunctionComponent<FormInnerProps> = props => {
-  const { handleChange, errors, touched, values, myMemberId, setFieldError } = props;
+const DecreaseWorkingGroupLeadStakeForm: React.FunctionComponent<FormInnerProps> = (props) => {
+  const { handleChange, errors, touched, values, setFieldError } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
   const [lead, setLead] = useState<WorkerData | null>(null);
 
@@ -53,28 +47,24 @@ const DecreaseWorkingGroupLeadStakeForm: React.FunctionComponent<FormInnerProps>
   return (
     <GenericWorkingGroupProposalForm
       {...props}
-      txMethod="createDecreaseWorkingGroupLeaderStakeProposal"
-      proposalType="DecreaseWorkingGroupLeaderStake"
+      txMethod='createDecreaseWorkingGroupLeaderStakeProposal'
+      proposalType='DecreaseWorkingGroupLeaderStake'
       leadRequired={true}
       leadStakeRequired={true}
       onLeadChange={(lead: WorkerData | null) => setLead(lead)}
       submitParams={[
-        myMemberId,
-        values.title,
-        values.rationale,
-        '{STAKE}',
         lead?.workerId,
         values.amount,
         values.workingGroup
       ]}
     >
       { (lead && lead.stake) && (
-        <Grid columns="4" doubling stackable verticalAlign="bottom">
+        <Grid columns='4' doubling stackable verticalAlign='bottom'>
           <Grid.Column>
             <InputFormField
-              label="Amount to decrease"
+              label='Amount to decrease'
               onChange={handleChange}
-              name="amount"
+              name='amount'
               error={errorLabelsProps.amount}
               value={values.amount}
               unit={formatBalance.getDefaults().unit}
@@ -92,10 +82,10 @@ const FormContainer = withFormContainer<FormContainerProps, FormValues>({
     ...(props.initialData || {})
   }),
   validationSchema: Yup.object().shape({
-    ...genericFormDefaultOptions.validationSchema,
+    ...Validation.All(),
     ...Validation.DecreaseWorkingGroupLeaderStake()
   }),
-  handleSubmit: genericFormDefaultOptions.handleSubmit,
+  handleSubmit: () => null,
   displayName: 'DecreaseWorkingGroupLeadStakeForm'
 })(DecreaseWorkingGroupLeadStakeForm);
 
diff --git a/pioneer/packages/joy-proposals/src/forms/FileDropdown.tsx b/pioneer/packages/joy-proposals/src/forms/FileDropdown.tsx
index efbe211f31..d2c5d994ce 100644
--- a/pioneer/packages/joy-proposals/src/forms/FileDropdown.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/FileDropdown.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { FormikProps } from 'formik';
 import { Icon, Loader } from 'semantic-ui-react';
-import Dropzone from 'react-dropzone';
+import Dropzone, { FileRejection } from 'react-dropzone';
 
 enum Status {
   Accepted = 'accepted',
@@ -13,13 +13,13 @@ enum Status {
 
 const determineStatus = (
   acceptedFiles: File[],
-  rejectedFiles: File[],
+  fileRejections: FileRejection[],
   error: string | undefined,
   isDragActive: boolean,
   parsing: boolean
 ): Status => {
   if (parsing) return Status.Parsing;
-  if (error || rejectedFiles.length) return Status.Rejected;
+  if (error || fileRejections.length) return Status.Rejected;
   if (acceptedFiles.length) return Status.Accepted;
   if (isDragActive) return Status.Active;
 
@@ -71,14 +71,15 @@ const innerSpanStyle = (): React.CSSProperties => {
 
 // Interpret the file as a UTF-8 string
 // https://developer.mozilla.org/en-US/docs/Web/API/Blob/text
-const parseFileAsUtf8 = async (file: any): Promise<string> => {
+const parseFileAsUtf8 = async (file: File): Promise<string> => {
   const text = await file.text();
+
   return text;
 };
 
 // Interpret the file as containing binary data. This will load the entire
 // file into memory which may crash the brower with very large files.
-const parseFileAsBinary = async (file: any): Promise<ArrayBuffer> => {
+const parseFileAsBinary = async (file: File): Promise<ArrayBuffer> => {
   // return file.arrayBuffer();
   // This newer API not fully supported yet in all browsers
   // https://developer.mozilla.org/en-US/docs/Web/API/Blob/arrayBuffer
@@ -106,19 +107,22 @@ type FileDropdownProps<FormValuesT> = {
   interpretAs: 'utf-8' | 'binary';
 };
 
-export default function FileDropdown<ValuesT = {}> (props: FileDropdownProps<ValuesT>) {
+export default function FileDropdown<ValuesT = Record<string, any>> (props: FileDropdownProps<ValuesT>) {
   const [parsing, setParsing] = useState(false);
   const { error, name, setFieldValue, setFieldTouched, acceptedFormats, defaultText, interpretAs } = props;
+
   return (
     <Dropzone
-      onDropAccepted={async acceptedFiles => {
+      onDropAccepted={async (acceptedFiles: File[]) => {
         setParsing(true);
         let contents;
+
         if (interpretAs === 'utf-8') {
           contents = await parseFileAsUtf8(acceptedFiles[0]);
         } else {
           contents = await parseFileAsBinary(acceptedFiles[0]);
         }
+
         setFieldValue(name, contents, true);
         setFieldTouched(name, true);
         setParsing(false);
@@ -126,19 +130,20 @@ export default function FileDropdown<ValuesT = {}> (props: FileDropdownProps<Val
       multiple={false}
       accept={acceptedFormats}
     >
-      {({ getRootProps, getInputProps, acceptedFiles, rejectedFiles, isDragActive }) => {
-        const status = determineStatus(acceptedFiles, rejectedFiles, error, isDragActive, parsing);
+      {({ getRootProps, getInputProps, acceptedFiles, fileRejections, isDragActive }) => {
+        const status = determineStatus(acceptedFiles, fileRejections, error, isDragActive, parsing);
+
         return (
           <section>
             <div {...getRootProps({ style: dropdownDivStyle(status) })}>
               <input {...getInputProps()} />
               {
                 <span style={innerSpanStyle()}>
-                  <Icon name="cloud upload" size="huge" style={dropdownIconStyle()} />
+                  <Icon name='cloud upload' size='huge' style={dropdownIconStyle()} />
                   <p>
                     {status === Status.Parsing && (
                       <>
-                        <Loader style={{ marginRight: '0.5em' }} size="small" inline active /> Uploading...
+                        <Loader style={{ marginRight: '0.5em' }} size='small' inline active /> Uploading...
                       </>
                     )}
                     {status === Status.Rejected && (
diff --git a/pioneer/packages/joy-proposals/src/forms/FillWorkingGroupLeaderOpeningForm.tsx b/pioneer/packages/joy-proposals/src/forms/FillWorkingGroupLeaderOpeningForm.tsx
index 527ace5488..1a47924dab 100644
--- a/pioneer/packages/joy-proposals/src/forms/FillWorkingGroupLeaderOpeningForm.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/FillWorkingGroupLeaderOpeningForm.tsx
@@ -1,37 +1,27 @@
 import React from 'react';
 import * as Yup from 'yup';
-import {
-  withProposalFormData,
+import { withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps,
-  genericFormDefaultOptions
-} from './GenericProposalForm';
-import {
-  GenericWorkingGroupProposalForm,
+  ProposalFormInnerProps } from './GenericProposalForm';
+import { GenericWorkingGroupProposalForm,
   FormValues as WGFormValues,
-  defaultValues as wgFromDefaultValues
-} from './GenericWorkingGroupProposalForm';
+  defaultValues as wgFromDefaultValues } from './GenericWorkingGroupProposalForm';
 import { FormField, RewardPolicyFields } from './FormFields';
 import { withFormContainer } from './FormContainer';
-import './forms.css';
-import { Dropdown, DropdownItemProps, Header, Checkbox, Message } from 'semantic-ui-react';
+import { Dropdown, DropdownItemProps, DropdownProps, Header, Checkbox, Message } from 'semantic-ui-react';
 import _ from 'lodash';
 import Validation from '../validationSchema';
 import { useTransport, usePromise } from '@polkadot/joy-utils/react/hooks';
 import { OpeningData, ParsedApplication } from '@polkadot/joy-utils/types/workingGroups';
-import { PromiseComponent } from '@polkadot/joy-utils/react/components';
+import PromiseComponent from '@polkadot/joy-utils/react/components/PromiseComponent';
 import { formatBalance } from '@polkadot/util';
 import { withCalls } from '@polkadot/react-api';
-import { Option } from '@polkadot/types';
 import { BlockNumber } from '@polkadot/types/interfaces';
-import { u32 as U32, u128 as U128 } from '@polkadot/types/primitive';
 import { getFormErrorLabelsProps } from './errorHandling';
-import { RewardPolicy } from '@joystream/types/working-group';
-import { FillOpeningParameters } from '@joystream/types/proposals';
-import { WorkingGroup } from '@joystream/types/common';
-import { OpeningId, ApplicationId } from '@joystream/types/hiring';
 import { ApplicationsDetails } from '@polkadot/joy-utils/react/components/working-groups/ApplicationDetails';
+import { SimplifiedTypeInterface } from '@polkadot/joy-utils/types/common';
+import { IFillOpeningParameters } from '@joystream/types/src/proposals';
 
 export type FormValues = WGFormValues & {
   openingId: string;
@@ -54,34 +44,31 @@ const defaultValues: FormValues = {
   rewardInterval: ''
 };
 
-type FormAdditionalProps = {}; // Aditional props coming all the way from export component into the inner form.
+type FormAdditionalProps = Record<any, never>; // Aditional props coming all the way from export component into the inner form.
 type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormValues>;
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps> & {
   currentBlock?: BlockNumber;
 };
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const valuesToFillOpeningParams = (values: FormValues): FillOpeningParameters => (
-  new FillOpeningParameters({
-    working_group: new WorkingGroup(values.workingGroup),
-    successful_application_id: new ApplicationId(values.successfulApplicant),
-    opening_id: new OpeningId(values.openingId),
-    reward_policy: new (Option.with(RewardPolicy))(
+const valuesToFillOpeningParams = (values: FormValues): SimplifiedTypeInterface<IFillOpeningParameters> => (
+  {
+    working_group: values.workingGroup,
+    successful_application_id: values.successfulApplicant,
+    opening_id: values.openingId,
+    reward_policy:
       values.includeReward
-        ? new RewardPolicy({
-          amount_per_payout: new U128(values.rewardAmount),
-          next_payment_at_block: new U32(values.rewardNextBlock),
-          payout_interval: new (Option.with('BlockNumber'))(
-            values.rewardRecurring ? values.rewardInterval : null
-          ) as Option<BlockNumber>
-        })
-        : null
-    ) as Option<RewardPolicy>
-  })
+        ? {
+          amount_per_payout: values.rewardAmount,
+          next_payment_at_block: values.rewardNextBlock,
+          payout_interval: values.rewardRecurring ? values.rewardInterval : undefined
+        }
+        : undefined
+  }
 );
 
-const FillWorkingGroupLeaderOpeningForm: React.FunctionComponent<FormInnerProps> = props => {
-  const { handleChange, setFieldValue, values, myMemberId, errors, touched } = props;
+const FillWorkingGroupLeaderOpeningForm: React.FunctionComponent<FormInnerProps> = (props) => {
+  const { handleChange, setFieldValue, values, errors, touched } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
   const transport = useTransport();
   const [openings, openingsError, openingsLoading] = usePromise<OpeningData[]>(
@@ -91,8 +78,9 @@ const FillWorkingGroupLeaderOpeningForm: React.FunctionComponent<FormInnerProps>
   );
   const openingsOptions: DropdownItemProps[] = openings
     // Map to options
-    .map(od => {
+    .map((od) => {
       const hrt = od.hiringOpening.parse_human_readable_text_with_fallback();
+
       return {
         text: `${od.id.toString()}: ${hrt.headline} (${hrt.job.title})`,
         value: od.id.toString()
@@ -106,13 +94,13 @@ const FillWorkingGroupLeaderOpeningForm: React.FunctionComponent<FormInnerProps>
     [values.workingGroup, values.openingId]
   );
   const applicationsOptions = activeApplications
-    .map(a => {
+    .map((a) => {
       return {
-        text: `${a.wgApplicationId}: ${a.member.handle}`,
+        text: `${a.wgApplicationId}: ${a.member.handle.toString()}`,
         image: a.member.avatar_uri.toString() ? { avatar: true, src: a.member.avatar_uri.toString() } : undefined,
         description:
           (a.stakes.application ? `Appl. stake: ${formatBalance(a.stakes.application)}` : '') +
-          (a.stakes.role ? (a.stakes.application && ', ') + `Role stake: ${formatBalance(a.stakes.role)}` : ''),
+          (a.stakes.role ? `${(a.stakes.application && ', ')} Role stake: ${formatBalance(a.stakes.role)}` : ''),
         value: a.wgApplicationId.toString()
       };
     });
@@ -120,18 +108,12 @@ const FillWorkingGroupLeaderOpeningForm: React.FunctionComponent<FormInnerProps>
   return (
     <GenericWorkingGroupProposalForm
       {...props}
-      txMethod="createFillWorkingGroupLeaderOpeningProposal"
-      proposalType="FillWorkingGroupLeaderOpening"
+      txMethod='createFillWorkingGroupLeaderOpeningProposal'
+      proposalType='FillWorkingGroupLeaderOpening'
       disabled={!openingsOptions.length || !applicationsOptions.length}
-      submitParams={[
-        myMemberId,
-        values.title,
-        values.rationale,
-        '{STAKE}',
-        valuesToFillOpeningParams(values)
-      ]}
+      submitParams={[valuesToFillOpeningParams(values)]}
     >
-      <PromiseComponent error={openingsError} loading={openingsLoading} message="Fetching openings...">
+      <PromiseComponent error={openingsError} loading={openingsLoading} message='Fetching openings...'>
         { !openingsOptions.length
           ? (
             <Message error visible>
@@ -144,13 +126,14 @@ const FillWorkingGroupLeaderOpeningForm: React.FunctionComponent<FormInnerProps>
           )
           : (
             <FormField
-              label="Working Group Opening"
+              label='Working Group Opening'
               error={errorLabelsProps.openingId}>
               <Dropdown
                 onChange={(...args) => {
                   setFieldValue('successfulApplicants', []);
-                  // "as any" assert is required due to some invalid typing of Formik's "handleChange" function (it takes 2 args, not 1)
-                  return (handleChange as any)(...args);
+
+                  // This assert is required due to some invalid typing of Formik's "handleChange" function (it takes 2 args, not 1)
+                  return (handleChange as Exclude<DropdownProps['onChange'], undefined>)(...args);
                 }}
                 placeholder={'Select an opening'}
                 name={'openingId'}
@@ -163,7 +146,7 @@ const FillWorkingGroupLeaderOpeningForm: React.FunctionComponent<FormInnerProps>
         }
       </PromiseComponent>
       { values.openingId && (
-        <PromiseComponent error={applError} loading={applLoading} message="Fetching applications...">
+        <PromiseComponent error={applError} loading={applLoading} message='Fetching applications...'>
           { !applicationsOptions.length
             ? (
               <Message error visible>
@@ -177,23 +160,23 @@ const FillWorkingGroupLeaderOpeningForm: React.FunctionComponent<FormInnerProps>
             : (
               <>
                 <FormField
-                  label="Successful applicant"
+                  label='Successful applicant'
                   error={errorLabelsProps.successfulApplicant}>
                   <Dropdown
-                    placeholder="Select successful applicant"
+                    placeholder='Select successful applicant'
                     fluid
                     selection
                     options={applicationsOptions}
                     value={values.successfulApplicant}
                     onChange={handleChange}
-                    name="successfulApplicant"/>
+                    name='successfulApplicant'/>
                 </FormField>
                 {values.successfulApplicant && (<>
-                  <Header as="h3">Selected applicant:</Header>
+                  <Header as='h3'>Selected applicant:</Header>
                   <ApplicationsDetails applications={
-                    [activeApplications.find(a => a.wgApplicationId.toString() === values.successfulApplicant)!]
+                    [activeApplications.find((a) => a.wgApplicationId.toString() === values.successfulApplicant)!]
                   }/>
-                  <Header as="h3">Reward policy:</Header>
+                  <Header as='h3'>Reward policy:</Header>
                   <FormField>
                     <Checkbox
                       toggle
@@ -218,10 +201,10 @@ const FormContainer = withFormContainer<FormContainerProps, FormValues>({
     ...(props.initialData || {})
   }),
   validationSchema: (props: FormContainerProps) => Yup.object().shape({
-    ...genericFormDefaultOptions.validationSchema,
+    ...Validation.All(),
     ...Validation.FillWorkingGroupLeaderOpening(props.currentBlock?.toNumber() || 0)
   }),
-  handleSubmit: genericFormDefaultOptions.handleSubmit,
+  handleSubmit: () => null,
   displayName: 'FillWorkingGroupLeaderOpeningForm'
 })(FillWorkingGroupLeaderOpeningForm);
 
diff --git a/pioneer/packages/joy-proposals/src/forms/FormContainer.tsx b/pioneer/packages/joy-proposals/src/forms/FormContainer.tsx
index 5db8ad55ab..380eef2e49 100644
--- a/pioneer/packages/joy-proposals/src/forms/FormContainer.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/FormContainer.tsx
@@ -1,16 +1,17 @@
 import React from 'react';
-import { withFormik } from 'formik';
+import { withFormik, WithFormikConfig } from 'formik';
 
-export function withFormContainer<MyFormProps, FormValues> (formikProps: any) {
+export function withFormContainer<MyFormProps, FormValues> (formikProps: WithFormikConfig<MyFormProps, FormValues>) {
   return function (InnerForm: React.ComponentType<any>) {
     return withFormik<MyFormProps, FormValues>(formikProps)(function (props) {
-      const handleBlur = (e: React.FocusEvent<HTMLInputElement>, data: any): void => {
+      const handleBlur = (e: React.FocusEvent<HTMLInputElement>, data?: { name: string, value: any }): void => {
         if (data && data.name) {
           props.setFieldValue(data.name, data.value);
           props.setFieldTouched(data.name);
         }
       };
-      const handleChange = (e: React.ChangeEvent<HTMLInputElement>, data: any): void => {
+
+      const handleChange = (e: React.ChangeEvent<HTMLInputElement>, data?: { name: string, value: any }): void => {
         if (data && data.name) {
           props.setFieldValue(data.name, data.value);
           props.setFieldTouched(data.name);
diff --git a/pioneer/packages/joy-proposals/src/forms/FormFields.tsx b/pioneer/packages/joy-proposals/src/forms/FormFields.tsx
index f4bbbcb97e..d98f252575 100644
--- a/pioneer/packages/joy-proposals/src/forms/FormFields.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/FormFields.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Form, FormInputProps, FormTextAreaProps, Label, LabelProps, Checkbox } from 'semantic-ui-react';
+import { Form, StrictFormInputProps, StrictFormTextAreaProps, Label, LabelProps, Checkbox } from 'semantic-ui-react';
 import { FormikProps } from 'formik';
 import LabelWithHelp from './LabelWithHelp';
 import { FormErrorLabelsProps } from './errorHandling';
@@ -14,15 +14,16 @@ import styled from 'styled-components';
  * and to easily switch the structure/display of a typical form field.
 */
 
-type InputFormFieldProps = Omit<FormInputProps, 'error'> & {
+type StrictInputFormFieldProps = Omit<StrictFormInputProps, 'error'> & {
   help?: string;
   unit?: string;
   error?: LabelProps;
 };
 
-export function InputFormField (props: InputFormFieldProps) {
+export function InputFormField (props: { [key: string]: any } & StrictInputFormFieldProps) {
   const { unit } = props;
   const fieldProps = { ...props, label: undefined, error: undefined };
+
   return (
     <FormField {...props} showErrorMsg={true}>
       <Form.Input
@@ -35,13 +36,14 @@ export function InputFormField (props: InputFormFieldProps) {
   );
 }
 
-type TextareaFormFieldProps = Omit<FormTextAreaProps, 'error'> & {
+type StrictTextareaFormFieldProps = Omit<StrictFormTextAreaProps, 'error'> & {
   help?: string;
   error?: LabelProps;
 };
 
-export function TextareaFormField (props: TextareaFormFieldProps) {
+export function TextareaFormField (props: { [key: string]: any } & StrictTextareaFormFieldProps) {
   const fieldProps = { ...props, label: undefined, error: undefined };
+
   return (
     <FormField {...props} showErrorMsg={true}>
       <Form.TextArea {...fieldProps}/>
@@ -49,7 +51,7 @@ export function TextareaFormField (props: TextareaFormFieldProps) {
   );
 }
 
-type FormFieldProps = Omit<(InputFormFieldProps | TextareaFormFieldProps), 'error'> & {
+type StrictFormFieldProps = Omit<(StrictInputFormFieldProps | StrictTextareaFormFieldProps), 'error'> & {
   error?: LabelProps;
   showErrorMsg?: boolean;
 };
@@ -60,8 +62,9 @@ const StyledFormField = styled(Form.Field)`
   }
 `;
 
-export function FormField (props: React.PropsWithChildren<FormFieldProps>) {
+export function FormField (props: React.PropsWithChildren<{ [key: string]: any } & StrictFormFieldProps>) {
   const { error, showErrorMsg = false, label, help, children } = props;
+
   return (
     <StyledFormField error={!!error}>
       { (label && help)
@@ -84,6 +87,7 @@ type RewardPolicyFieldsProps<ValuesT extends ReawrdPolicyFieldsType> =
   Pick<FormikProps<ValuesT>, 'values' | 'handleChange' | 'setFieldValue'> & {
     errorLabelsProps: FormErrorLabelsProps<ValuesT>;
   };
+
 export function RewardPolicyFields<ValuesT extends ReawrdPolicyFieldsType> ({
   values,
   errorLabelsProps,
@@ -93,7 +97,7 @@ export function RewardPolicyFields<ValuesT extends ReawrdPolicyFieldsType> ({
   return (
     <>
       <InputFormField
-        label="Amount per payout"
+        label='Amount per payout'
         unit={formatBalance.getDefaults().unit}
         onChange={handleChange}
         name={'rewardAmount'}
@@ -102,7 +106,7 @@ export function RewardPolicyFields<ValuesT extends ReawrdPolicyFieldsType> ({
         placeholder={'ie. 100'}
       />
       <InputFormField
-        label="Next payment at block"
+        label='Next payment at block'
         onChange={handleChange}
         name={'rewardNextBlock'}
         error={errorLabelsProps.rewardNextBlock}
@@ -117,7 +121,7 @@ export function RewardPolicyFields<ValuesT extends ReawrdPolicyFieldsType> ({
       </FormField>
       { values.rewardRecurring && (
         <InputFormField
-          label="Reward interval"
+          label='Reward interval'
           onChange={handleChange}
           name={'rewardInterval'}
           error={errorLabelsProps.rewardInterval}
diff --git a/pioneer/packages/joy-proposals/src/forms/GenericProposalForm.tsx b/pioneer/packages/joy-proposals/src/forms/GenericProposalForm.tsx
index 3c0aca1c8a..1a317b6471 100644
--- a/pioneer/packages/joy-proposals/src/forms/GenericProposalForm.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/GenericProposalForm.tsx
@@ -1,14 +1,14 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { FormikProps, WithFormikConfig } from 'formik';
+import { FormikProps } from 'formik';
 import { Form, Icon, Button, Message } from 'semantic-ui-react';
 import { getFormErrorLabelsProps } from './errorHandling';
-import Validation from '../validationSchema';
 import { InputFormField, TextareaFormField } from './FormFields';
-import TxButton from '@polkadot/joy-utils/TxButton';
+import TxButton from '@polkadot/joy-utils/react/components/TxButton';
 import { SubmittableResult } from '@polkadot/api';
 import { TxFailedCallback, TxCallback } from '@polkadot/react-components/Status/types';
-import { MyAccountProps, withOnlyMembers } from '@polkadot/joy-utils/MyAccount';
-import { withMulti } from '@polkadot/react-api/with';
+import { MyAccountProps } from '@polkadot/joy-utils/react/hocs/accounts';
+import { withOnlyMembers } from '@polkadot/joy-utils/react/hocs/guards';
+import { withMulti } from '@polkadot/react-api/hoc';
 import { withCalls } from '@polkadot/react-api';
 import { CallProps } from '@polkadot/react-api/types';
 import { Balance, Event } from '@polkadot/types/interfaces';
@@ -16,8 +16,8 @@ import { RouteComponentProps } from 'react-router';
 import { ProposalType } from '@polkadot/joy-utils/types/proposals';
 import proposalsConsts from '@polkadot/joy-utils/consts/proposals';
 import { formatBalance } from '@polkadot/util';
-import './forms.css';
 import { ProposalId } from '@joystream/types/proposals';
+import styled from 'styled-components';
 
 // Generic form values
 export type GenericFormValues = {
@@ -46,9 +46,9 @@ export type ProposalFormInnerProps<ContainerPropsT, FormValuesT> = ContainerProp
 
 // Types only used in this file
 type GenericProposalFormAdditionalProps = {
-  txMethod?: string;
+  txMethod: string;
   submitParams?: any[];
-  proposalType?: ProposalType;
+  proposalType: ProposalType;
   disabled?: boolean;
 };
 
@@ -58,26 +58,36 @@ ProposalFormExportProps<GenericProposalFormAdditionalProps, GenericFormValues>
 
 >;
 type GenericFormInnerProps = ProposalFormInnerProps<GenericFormContainerProps, GenericFormValues>;
-type GenericFormDefaultOptions = WithFormikConfig<GenericFormContainerProps, GenericFormValues>;
-
-// Default "withFormik" options that can be extended in specific forms
-export const genericFormDefaultOptions: GenericFormDefaultOptions = {
-  mapPropsToValues: (props: GenericFormContainerProps) => ({
-    ...genericFormDefaultValues,
-    ...(props.initialData || {})
-  }),
-  validationSchema: {
-    ...Validation.All()
-  },
-  handleSubmit: (values, { setSubmitting, resetForm }) => {
-    // This is handled via TxButton
+
+const StyledGenericProposalForm = styled.div`
+  .proposal-form {
+    margin: 0 auto;
+  }
+
+  .ui.form.proposal-form {
+    & label {
+      font-size: 1rem;
+    }
+
+    & input[name="tokens"] {
+      max-width: 16rem;
+    }
   }
-};
+
+  .form-buttons {
+    display: flex;
+  }
+
+  .ui.dropdown .ui.avatar.image {
+    width: 2em !important;
+  }
+`;
 
 // Generic proposal form with basic structure, "Title" and "Rationale" fields
 // Other fields can be passed as children
-export const GenericProposalForm: React.FunctionComponent<GenericFormInnerProps> = props => {
+export const GenericProposalForm: React.FunctionComponent<GenericFormInnerProps> = (props) => {
   const {
+    myMemberId,
     handleChange,
     handleSubmit,
     errors,
@@ -93,7 +103,6 @@ export const GenericProposalForm: React.FunctionComponent<GenericFormInnerProps>
     submitParams,
     setSubmitting,
     history,
-    balances_totalIssuance,
     proposalType,
     disabled = false
   } = props;
@@ -111,9 +120,12 @@ export const GenericProposalForm: React.FunctionComponent<GenericFormInnerProps>
       if (isValid) {
         afterSubmit();
       }
+
       setAfterSubmit(null);
       setSubmitting(false);
     }
+    // setSubmitting shouldn't change, so we don't specify it as dependency to avoid complications
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isValidating, isValid, afterSubmit]);
 
   // Focus first error field when isValidating changes to false (which happens after form is validated)
@@ -121,9 +133,11 @@ export const GenericProposalForm: React.FunctionComponent<GenericFormInnerProps>
   useEffect(() => {
     if (!isValidating && formContainerRef.current !== null) {
       const [errorField] = formContainerRef.current.getElementsByClassName('error field');
+
       if (errorField) {
         errorField.scrollIntoView({ behavior: 'smooth' });
         const [errorInput] = errorField.querySelectorAll('input,textarea');
+
         if (errorInput) {
           (errorInput as (HTMLInputElement | HTMLTextAreaElement)).focus();
         }
@@ -145,82 +159,91 @@ export const GenericProposalForm: React.FunctionComponent<GenericFormInnerProps>
     if (!history) return;
     // Determine proposal id
     let createdProposalId: number | null = null;
+
     for (const e of txResult.events) {
       const event = e.get('event') as Event | undefined;
+
       if (event !== undefined && event.method === 'ProposalCreated') {
         createdProposalId = (event.data[1] as ProposalId).toNumber();
         break;
       }
     }
+
     setSubmitting(false);
-    history.push(`/proposals/${createdProposalId}`);
+
+    if (createdProposalId !== null) {
+      history.push(`/proposals/${createdProposalId}`);
+    }
   };
 
-  const requiredStake: number | undefined =
-    balances_totalIssuance &&
-    proposalType &&
-    proposalsConsts[proposalType].stake;
+  const requiredStake = proposalType && proposalsConsts[proposalType].stake;
 
   return (
-    <div className="Forms" ref={formContainerRef}>
+    <StyledGenericProposalForm ref={formContainerRef}>
       <Form
-        className="proposal-form"
+        className='proposal-form'
         onSubmit={txMethod
           ? () => { /* Do nothing. Tx button uses custom submit handler - "onTxButtonClick" */ }
           : handleSubmit
         }>
         <InputFormField
-          label="Title"
-          help="The title of your proposal"
+          label='Title'
+          help='The title of your proposal'
           onChange={handleChange}
-          name="title"
-          placeholder="Title for your awesome proposal..."
+          name='title'
+          placeholder='Title for your awesome proposal...'
           error={errorLabelsProps.title}
           value={values.title}
         />
         <TextareaFormField
-          label="Rationale"
-          help="The rationale behind your proposal"
+          label='Rationale'
+          help='The rationale behind your proposal'
           onChange={handleChange}
-          name="rationale"
-          placeholder="This proposal is awesome because..."
+          name='rationale'
+          placeholder='This proposal is awesome because...'
           error={errorLabelsProps.rationale}
           value={values.rationale}
         />
         {children}
         <Message warning visible>
           <Message.Content>
-            <Icon name="warning circle" />
+            <Icon name='warning circle' />
             Required stake: <b>{ formatBalance(requiredStake) }</b>
           </Message.Content>
         </Message>
-        <div className="form-buttons">
+        <div className='form-buttons'>
           {txMethod ? (
             <TxButton
-              type="button" // Tx button uses custom submit handler - "onTxButtonClick"
-              label="Submit proposal"
-              icon="paper plane"
+              type='button' // Tx button uses custom submit handler - "onTxButtonClick"
+              label='Submit proposal'
               isDisabled={disabled || isSubmitting}
-              params={(submitParams || []).map(p => (p === '{STAKE}' ? requiredStake : p))}
+              params={[
+                myMemberId,
+                values.title,
+                values.rationale,
+                requiredStake,
+                // submitParams is any[], but it's not much of an issue (params can vary a lot)
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                ...(submitParams || [])
+              ]}
               tx={`proposalsCodex.${txMethod}`}
               txFailedCb={onTxFailed}
               txSuccessCb={onTxSuccess}
               onClick={onTxButtonClick} // This replaces standard submit
             />
           ) : (
-            <Button type="submit" color="blue" loading={isSubmitting}>
-              <Icon name="paper plane" />
+            <Button type='submit' size='large' color='blue' loading={isSubmitting}>
+              <Icon name='paper plane' />
               Submit
             </Button>
           )}
 
-          <Button type="button" color="grey" onClick={handleReset}>
-            <Icon name="times" />
-            Clear
+          <Button type='button' size='large' onClick={handleReset}>
+            Reset form
           </Button>
         </div>
       </Form>
-    </div>
+    </StyledGenericProposalForm>
   );
 };
 
diff --git a/pioneer/packages/joy-proposals/src/forms/GenericWorkingGroupProposalForm.tsx b/pioneer/packages/joy-proposals/src/forms/GenericWorkingGroupProposalForm.tsx
index 4c228e15dd..98bc9dfaa3 100644
--- a/pioneer/packages/joy-proposals/src/forms/GenericWorkingGroupProposalForm.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/GenericWorkingGroupProposalForm.tsx
@@ -1,20 +1,17 @@
 import React from 'react';
 import { getFormErrorLabelsProps } from './errorHandling';
-import {
-  GenericProposalForm,
+import { GenericProposalForm,
   GenericFormValues,
   genericFormDefaultValues,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps
-} from './GenericProposalForm';
+  ProposalFormInnerProps } from './GenericProposalForm';
 import { FormField } from './FormFields';
 import { ProposalType } from '@polkadot/joy-utils/types/proposals';
 import { WorkingGroupKey, WorkingGroupDef } from '@joystream/types/common';
-import './forms.css';
 import { Dropdown, Message } from 'semantic-ui-react';
 import { usePromise, useTransport } from '@polkadot/joy-utils/react/hooks';
-import { PromiseComponent } from '@polkadot/joy-utils/react/components';
+import PromiseComponent from '@polkadot/joy-utils/react/components/PromiseComponent';
 import { WorkerData } from '@polkadot/joy-utils/types/workingGroups';
 import { LeadInfo } from '@polkadot/joy-utils/react/components/working-groups/LeadInfo';
 
@@ -46,7 +43,7 @@ type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormVal
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 export type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-export const GenericWorkingGroupProposalForm: React.FunctionComponent<FormInnerProps> = props => {
+export const GenericWorkingGroupProposalForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const {
     handleChange,
     errors,
@@ -70,20 +67,21 @@ export const GenericWorkingGroupProposalForm: React.FunctionComponent<FormInnerP
   const leadMissing = leadRequired && (!leadRes.loading && !leadRes.error) && !leadRes.lead;
   const stakeMissing = leadStakeRequired && (!leadRes.loading && !leadRes.error) && (leadRes.lead && !leadRes.lead.stake);
   const rewardMissing = leadRewardRequired && (!leadRes.loading && !leadRes.error) && (leadRes.lead && !leadRes.lead.reward);
-  const isDisabled = disabled || leadMissing || stakeMissing || rewardMissing || leadRes.error;
+  const isDisabled = disabled || leadMissing || stakeMissing || rewardMissing || Boolean(leadRes.error);
 
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
+
   return (
     <GenericProposalForm {...props} disabled={isDisabled}>
       <FormField
         error={errorLabelsProps.workingGroup}
-        label="Working group"
+        label='Working group'
       >
         <Dropdown
-          name="workingGroup"
-          placeholder="Select the working group"
+          name='workingGroup'
+          placeholder='Select the working group'
           selection
-          options={Object.keys(WorkingGroupDef).map(wgKey => ({ text: wgKey + ' Working Group', value: wgKey }))}
+          options={Object.keys(WorkingGroupDef).map((wgKey) => ({ text: wgKey + ' Working Group', value: wgKey }))}
           value={values.workingGroup}
           onChange={ handleChange }
         />
diff --git a/pioneer/packages/joy-proposals/src/forms/LabelWithHelp.tsx b/pioneer/packages/joy-proposals/src/forms/LabelWithHelp.tsx
index d8880ba5bc..deb9be8c0d 100644
--- a/pioneer/packages/joy-proposals/src/forms/LabelWithHelp.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/LabelWithHelp.tsx
@@ -5,6 +5,7 @@ type LabelWithHelpProps = { text: string; help: string };
 
 export default function LabelWithHelp (props: LabelWithHelpProps) {
   const [open, setOpen] = useState(false);
+
   return (
     <label
       style={{ position: 'relative', cursor: 'pointer', padding: '0.25em 0' }}
@@ -15,10 +16,10 @@ export default function LabelWithHelp (props: LabelWithHelpProps) {
       <span style={{ position: 'absolute', display: 'inline-flex', flexWrap: 'wrap', marginTop: '-0.25em' }}>
         <Icon
           style={{ margin: '0.25em 0.1em 0.5em 0.25em' }}
-          name="help circle"
-          color="grey"/>
-        <Transition animation="fade" visible={open} duration={500}>
-          <Label basic style={{ minWidth: '150px' }} color="grey" content={props.help}/>
+          name='help circle'
+          color='grey'/>
+        <Transition animation='fade' visible={open} duration={500}>
+          <Label basic style={{ minWidth: '150px' }} color='grey' content={props.help}/>
         </Transition>
       </span>
     </label>
diff --git a/pioneer/packages/joy-proposals/src/forms/MintCapacityForm.tsx b/pioneer/packages/joy-proposals/src/forms/MintCapacityForm.tsx
index 8c6c0296cc..81372f8796 100644
--- a/pioneer/packages/joy-proposals/src/forms/MintCapacityForm.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/MintCapacityForm.tsx
@@ -1,22 +1,18 @@
 import React from 'react';
 import * as Yup from 'yup';
 import { getFormErrorLabelsProps } from './errorHandling';
-import {
-  GenericProposalForm,
+import { GenericProposalForm,
   GenericFormValues,
-  genericFormDefaultOptions,
   genericFormDefaultValues,
   withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps
-} from './GenericProposalForm';
+  ProposalFormInnerProps } from './GenericProposalForm';
 import Validation from '../validationSchema';
 import { InputFormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
 import { ProposalType } from '@polkadot/joy-utils/types/proposals';
 import { formatBalance } from '@polkadot/util';
-import './forms.css';
 
 export type FormValues = GenericFormValues & {
   capacity: string;
@@ -39,20 +35,21 @@ type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormVal
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const MintCapacityForm: React.FunctionComponent<FormInnerProps> = props => {
+const MintCapacityForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const { handleChange, errors, touched, mintCapacityGroup, values, txMethod, initialData, proposalType } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
+
   return (
     <GenericProposalForm
       {...props}
       txMethod={txMethod}
       proposalType={proposalType}
-      submitParams={[props.myMemberId, values.title, values.rationale, '{STAKE}', values.capacity]}
+      submitParams={[values.capacity]}
     >
       <InputFormField
         error={errorLabelsProps.capacity}
         onChange={handleChange}
-        name="capacity"
+        name='capacity'
         placeholder={ (initialData && initialData.capacity) }
         label={`${mintCapacityGroup} Mint Capacity`}
         help={`The new mint capacity you propse for ${mintCapacityGroup}`}
@@ -69,10 +66,10 @@ const FormContainer = withFormContainer<FormContainerProps, FormValues>({
     ...(props.initialData || {})
   }),
   validationSchema: Yup.object().shape({
-    ...genericFormDefaultOptions.validationSchema,
+    ...Validation.All(),
     ...Validation.SetContentWorkingGroupMintCapacity()
   }),
-  handleSubmit: genericFormDefaultOptions.handleSubmit,
+  handleSubmit: () => null,
   displayName: 'MintCapacityForm'
 })(MintCapacityForm);
 
diff --git a/pioneer/packages/joy-proposals/src/forms/RuntimeUpgradeForm.tsx b/pioneer/packages/joy-proposals/src/forms/RuntimeUpgradeForm.tsx
index ea16a093b7..5cd1022047 100644
--- a/pioneer/packages/joy-proposals/src/forms/RuntimeUpgradeForm.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/RuntimeUpgradeForm.tsx
@@ -1,20 +1,18 @@
 import React from 'react';
 import { Form } from 'semantic-ui-react';
 import * as Yup from 'yup';
-import {
-  GenericProposalForm,
+import { GenericProposalForm,
   GenericFormValues,
-  genericFormDefaultOptions,
   genericFormDefaultValues,
   withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps
-} from './GenericProposalForm';
+  ProposalFormInnerProps } from './GenericProposalForm';
 import Validation from '../validationSchema';
 import { withFormContainer } from './FormContainer';
-import './forms.css';
 import FileDropdown from './FileDropdown';
+import { u32 } from '@polkadot/types/primitive';
+import { withCalls } from '@polkadot/react-api';
 
 export type FormValues = GenericFormValues & {
   // wasm blob as ArrayBuffer, or an Error string
@@ -26,27 +24,30 @@ const defaultValues: FormValues = {
   WASM: new ArrayBuffer(0)
 };
 
-type FormAdditionalProps = {}; // Aditional props coming all the way from export comonent into the inner form.
+type FormAdditionalProps = Record<any, never>; // Aditional props coming all the way from export comonent into the inner form.
 type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormValues>;
-type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
+type FormContainerProps = ProposalFormContainerProps<ExportComponentProps> & {
+  maxFileSize: u32;
+};
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const RuntimeUpgradeForm: React.FunctionComponent<FormInnerProps> = props => {
+const RuntimeUpgradeForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const { errors, setFieldValue, setFieldTouched, values, touched } = props;
+
   return (
     <GenericProposalForm
       {...props}
-      txMethod="createRuntimeUpgradeProposal"
-      proposalType="RuntimeUpgrade"
-      submitParams={[props.myMemberId, values.title, values.rationale, '{STAKE}', values.WASM]}
+      txMethod='createRuntimeUpgradeProposal'
+      proposalType='RuntimeUpgrade'
+      submitParams={[values.WASM]}
     >
       <Form.Field>
         <FileDropdown<FormValues>
           setFieldValue={setFieldValue}
           setFieldTouched={setFieldTouched}
-          defaultText="Drag-n-drop WASM bytecode of a runtime upgrade (*.wasm)"
-          acceptedFormats=".wasm"
-          name="WASM"
+          defaultText='Drag-n-drop WASM bytecode of a runtime upgrade (*.wasm)'
+          acceptedFormats='.wasm'
+          name='WASM'
           error={touched.WASM ? errors.WASM : undefined}
           interpretAs='binary'
         />
@@ -60,12 +61,16 @@ const FormContainer = withFormContainer<FormContainerProps, FormValues>({
     ...defaultValues,
     ...(props.initialData || {})
   }),
-  validationSchema: Yup.object().shape({
-    ...genericFormDefaultOptions.validationSchema,
-    ...Validation.RuntimeUpgrade()
+  validationSchema: (props: FormContainerProps) => Yup.object().shape({
+    ...Validation.All(),
+    ...Validation.RuntimeUpgrade(props.maxFileSize.toNumber())
   }),
-  handleSubmit: genericFormDefaultOptions.handleSubmit,
+  handleSubmit: () => null,
   displayName: 'RuntimeUpgradeForm'
 })(RuntimeUpgradeForm);
 
-export default withProposalFormData(FormContainer);
+export default withCalls<ExportComponentProps>(
+  ['consts.proposalsCodex.runtimeUpgradeWasmProposalMaxLength', { propName: 'maxFileSize' }]
+)(
+  withProposalFormData<FormContainerProps, ExportComponentProps>(FormContainer)
+);
diff --git a/pioneer/packages/joy-proposals/src/forms/SetContentWorkingGroupLeadForm.tsx b/pioneer/packages/joy-proposals/src/forms/SetContentWorkingGroupLeadForm.tsx
index 17bb481874..91d7b008aa 100644
--- a/pioneer/packages/joy-proposals/src/forms/SetContentWorkingGroupLeadForm.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/SetContentWorkingGroupLeadForm.tsx
@@ -2,27 +2,23 @@ import React, { useEffect, useState } from 'react';
 import { Dropdown, Label, Loader, Message, Icon, DropdownItemProps, DropdownOnSearchChangeData, DropdownProps } from 'semantic-ui-react';
 import { getFormErrorLabelsProps } from './errorHandling';
 import * as Yup from 'yup';
-import {
-  GenericProposalForm,
+import { GenericProposalForm,
   GenericFormValues,
-  genericFormDefaultOptions,
   genericFormDefaultValues,
   withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps
-} from './GenericProposalForm';
+  ProposalFormInnerProps } from './GenericProposalForm';
 import Validation from '../validationSchema';
 import { FormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
 import { useTransport, usePromise } from '@polkadot/joy-utils/react/hooks';
 import { Membership } from '@joystream/types/members';
-import { PromiseComponent } from '@polkadot/joy-utils/react/components';
+import PromiseComponent from '@polkadot/joy-utils/react/components/PromiseComponent';
 import _ from 'lodash';
-import './forms.css';
 
 export type FormValues = GenericFormValues & {
-  workingGroupLead: any;
+  workingGroupLead: string;
 };
 
 const defaultValues: FormValues = {
@@ -30,7 +26,7 @@ const defaultValues: FormValues = {
   workingGroupLead: ''
 };
 
-type FormAdditionalProps = {}; // Aditional props coming all the way from export comonent into the inner form.
+type FormAdditionalProps = Record<any, never>; // Aditional props coming all the way from export comonent into the inner form.
 type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormValues>;
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
@@ -51,7 +47,7 @@ function membersToOptions (members: { id: number; profile: Membership }[]) {
     members
       .map(({ id, profile }) => ({
         key: profile.handle,
-        text: `${profile.handle} (id:${id})`,
+        text: `${profile.handle.toString()} (id:${id})`,
         value: memberOptionKey(id, profile),
         image: profile.avatar_uri.toString() ? { avatar: true, src: profile.avatar_uri } : null
       }))
@@ -62,13 +58,15 @@ function filterMembers (options: DropdownItemProps[], query: string) {
   if (query.length < MEMBERS_QUERY_MIN_LENGTH) {
     return [MEMBERS_NONE_OPTION];
   }
+
   const regexp = new RegExp(_.escapeRegExp(query));
+
   return options.filter((opt) => regexp.test((opt.text || '').toString()));
 }
 
 type MemberWithId = { id: number; profile: Membership };
 
-const SetContentWorkingGroupsLeadForm: React.FunctionComponent<FormInnerProps> = props => {
+const SetContentWorkingGroupsLeadForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const { handleChange, errors, touched, values } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
   // State
@@ -85,6 +83,7 @@ const SetContentWorkingGroupsLeadForm: React.FunctionComponent<FormInnerProps> =
     () => transport.contentWorkingGroup.currentLead(),
     null
   );
+
   // Generate members options array on load
   useEffect(() => {
     if (members.length) {
@@ -94,19 +93,15 @@ const SetContentWorkingGroupsLeadForm: React.FunctionComponent<FormInnerProps> =
   // Filter options on search query change (we "pulled-out" this logic here to avoid lags)
   useEffect(() => {
     setFilteredOptions(filterMembers(membersOptions, membersSearchQuery));
-  }, [membersSearchQuery]);
+  }, [membersSearchQuery, membersOptions]);
 
   return (
-    <PromiseComponent error={clError} loading={clLoading} message="Fetching current lead...">
+    <PromiseComponent error={clError} loading={clLoading} message='Fetching current lead...'>
       <GenericProposalForm
         {...props}
-        txMethod="createSetLeadProposal"
-        proposalType="SetLead"
+        txMethod='createSetLeadProposal'
+        proposalType='SetLead'
         submitParams={[
-          props.myMemberId,
-          values.title,
-          values.rationale,
-          '{STAKE}',
           values.workingGroupLead !== MEMBERS_NONE_OPTION.value ? values.workingGroupLead.split(':') : undefined
         ]}
       >
@@ -117,7 +112,7 @@ const SetContentWorkingGroupsLeadForm: React.FunctionComponent<FormInnerProps> =
         ) : (<>
           <FormField
             error={errorLabelsProps.workingGroupLead}
-            label="New Content Working Group Lead"
+            label='New Content Working Group Lead'
             help={
               'The member you propose to set as a new Content Working Group Lead. ' +
               'Start typing handle or use "id:[ID]" query. ' +
@@ -141,7 +136,7 @@ const SetContentWorkingGroupsLeadForm: React.FunctionComponent<FormInnerProps> =
               onSearchChange={ (e: React.SyntheticEvent, data: DropdownOnSearchChangeData) => {
                 setMembersSearchQuery(data.searchQuery);
               } }
-              name="workingGroupLead"
+              name='workingGroupLead'
               placeholder={ 'Start typing member handle or "id:[ID]" query...' }
               fluid
               selection
@@ -150,7 +145,9 @@ const SetContentWorkingGroupsLeadForm: React.FunctionComponent<FormInnerProps> =
                 (e: React.ChangeEvent<any>, data: DropdownProps) => {
                   // Fix TypeScript issue
                   const originalHandler = handleChange as (e: React.ChangeEvent<any>, data: DropdownProps) => void;
+
                   originalHandler(e, data);
+
                   if (!data.value) {
                     setMembersSearchQuery('');
                   }
@@ -162,7 +159,7 @@ const SetContentWorkingGroupsLeadForm: React.FunctionComponent<FormInnerProps> =
           </FormField>
           <Message info active={1}>
             <Message.Content>
-              <Icon name="info circle"/>
+              <Icon name='info circle'/>
               Current Content Working Group lead: <b>{ (currentLead && currentLead.profile.handle) || 'NONE' }</b>
             </Message.Content>
           </Message>
@@ -178,10 +175,10 @@ const FormContainer = withFormContainer<FormContainerProps, FormValues>({
     ...(props.initialData || {})
   }),
   validationSchema: Yup.object().shape({
-    ...genericFormDefaultOptions.validationSchema,
+    ...Validation.All(),
     ...Validation.SetLead()
   }),
-  handleSubmit: genericFormDefaultOptions.handleSubmit,
+  handleSubmit: () => null,
   displayName: 'SetContentWorkingGroupLeadForm'
 })(SetContentWorkingGroupsLeadForm);
 
diff --git a/pioneer/packages/joy-proposals/src/forms/SetContentWorkingGroupMintCapForm.tsx b/pioneer/packages/joy-proposals/src/forms/SetContentWorkingGroupMintCapForm.tsx
index be7f149cb1..331695584f 100644
--- a/pioneer/packages/joy-proposals/src/forms/SetContentWorkingGroupMintCapForm.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/SetContentWorkingGroupMintCapForm.tsx
@@ -2,18 +2,18 @@ import React from 'react';
 import MintCapacityForm from './MintCapacityForm';
 import { RouteComponentProps } from 'react-router';
 import { useTransport, usePromise } from '@polkadot/joy-utils/react/hooks';
-import { PromiseComponent } from '@polkadot/joy-utils/react/components';
+import PromiseComponent from '@polkadot/joy-utils/react/components/PromiseComponent';
 
 const ContentWorkingGroupMintCapForm = (props: RouteComponentProps) => {
   const transport = useTransport();
   const [mintCapacity, error, loading] = usePromise<number>(() => transport.contentWorkingGroup.currentMintCap(), 0);
 
   return (
-    <PromiseComponent error={error} loading={loading} message="Fetching current mint capacity...">
+    <PromiseComponent error={error} loading={loading} message='Fetching current mint capacity...'>
       <MintCapacityForm
-        mintCapacityGroup="Content Working Group"
-        txMethod="createSetContentWorkingGroupMintCapacityProposal"
-        proposalType="SetContentWorkingGroupMintCapacity"
+        mintCapacityGroup='Content Working Group'
+        txMethod='createSetContentWorkingGroupMintCapacityProposal'
+        proposalType='SetContentWorkingGroupMintCapacity'
         initialData={{ capacity: mintCapacity.toString() }}
         {...props} />
     </PromiseComponent>
diff --git a/pioneer/packages/joy-proposals/src/forms/SetCouncilParamsForm.tsx b/pioneer/packages/joy-proposals/src/forms/SetCouncilParamsForm.tsx
index 1cafa3f9c8..7e111490b4 100644
--- a/pioneer/packages/joy-proposals/src/forms/SetCouncilParamsForm.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/SetCouncilParamsForm.tsx
@@ -2,25 +2,21 @@ import React, { useEffect, useState } from 'react';
 import { getFormErrorLabelsProps } from './errorHandling';
 import { Divider, Form } from 'semantic-ui-react';
 import * as Yup from 'yup';
-import {
-  GenericProposalForm,
+import { GenericProposalForm,
   GenericFormValues,
-  genericFormDefaultOptions,
   genericFormDefaultValues,
   withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps
-} from './GenericProposalForm';
+  ProposalFormInnerProps } from './GenericProposalForm';
 import Validation from '../validationSchema';
 import { InputFormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
-import { createType } from '@polkadot/types';
-import './forms.css';
 import { useTransport, usePromise } from '@polkadot/joy-utils/react/hooks';
 import _ from 'lodash';
-import { ElectionParameters } from '@joystream/types/council';
-import { PromiseComponent } from '@polkadot/joy-utils/react/components';
+import PromiseComponent from '@polkadot/joy-utils/react/components/PromiseComponent';
+import { IElectionParameters } from '@joystream/types/src/council';
+import { SimplifiedTypeInterface } from '@polkadot/joy-utils/types/common';
 
 export type FormValues = GenericFormValues & {
   announcingPeriod: string;
@@ -45,31 +41,32 @@ const defaultValues: FormValues = {
   councilSize: ''
 };
 
-type FormAdditionalProps = {}; // Aditional props coming all the way from export comonent into the inner form.
+type FormAdditionalProps = Record<any, never>; // Aditional props coming all the way from export comonent into the inner form.
 type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormValues>;
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-function createElectionParameters (values: FormValues): ElectionParameters {
-  return new ElectionParameters({
-    announcing_period: createType('BlockNumber', parseInt(values.announcingPeriod)),
-    voting_period: createType('BlockNumber', parseInt(values.votingPeriod)),
-    revealing_period: createType('BlockNumber', parseInt(values.revealingPeriod)),
-    council_size: createType('u32', values.councilSize),
-    candidacy_limit: createType('u32', values.candidacyLimit),
-    new_term_duration: createType('BlockNumber', parseInt(values.newTermDuration)),
-    min_council_stake: createType('Balance', values.minCouncilStake),
-    min_voting_stake: createType('Balance', values.minVotingStake)
-  });
+function createElectionParameters (values: FormValues): SimplifiedTypeInterface<IElectionParameters> {
+  return {
+    announcing_period: parseInt(values.announcingPeriod),
+    voting_period: parseInt(values.votingPeriod),
+    revealing_period: parseInt(values.revealingPeriod),
+    council_size: values.councilSize,
+    candidacy_limit: values.candidacyLimit,
+    new_term_duration: parseInt(values.newTermDuration),
+    min_council_stake: values.minCouncilStake,
+    min_voting_stake: values.minVotingStake
+  };
 }
 
-const SetCouncilParamsForm: React.FunctionComponent<FormInnerProps> = props => {
+const SetCouncilParamsForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const { handleChange, errors, touched, values, setFieldValue, setFieldError } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
   const [placeholders, setPlaceholders] = useState<{ [k in keyof FormValues]: string }>(defaultValues);
 
   const transport = useTransport();
-  const [councilParams, error, loading] = usePromise<ElectionParameters | null>(() => transport.council.electionParameters(), null);
+  const [councilParams, error, loading] = usePromise<IElectionParameters | null>(() => transport.council.electionParameters(), null);
+
   useEffect(() => {
     if (councilParams) {
       const fetchedPlaceholders = { ...placeholders };
@@ -83,13 +80,17 @@ const SetCouncilParamsForm: React.FunctionComponent<FormInnerProps> = props => {
         'candidacy_limit',
         'council_size'
       ] as const;
-      fieldsToPopulate.forEach(field => {
+
+      fieldsToPopulate.forEach((field) => {
         const camelCaseField = _.camelCase(field) as keyof FormValues;
+
         setFieldValue(camelCaseField, councilParams[field].toString());
         fetchedPlaceholders[camelCaseField] = councilParams[field].toString();
       });
       setPlaceholders(fetchedPlaceholders);
     }
+    // We don't need dependency on "placeholders"
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [councilParams]);
 
   // This logic may be moved somewhere else in the future, but it's quite easy to enforce it here:
@@ -98,49 +99,49 @@ const SetCouncilParamsForm: React.FunctionComponent<FormInnerProps> = props => {
   }
 
   return (
-    <PromiseComponent error={error} loading={loading} message="Fetching current parameters...">
+    <PromiseComponent error={error} loading={loading} message='Fetching current parameters...'>
       <GenericProposalForm
         {...props}
-        txMethod="createSetElectionParametersProposal"
-        proposalType="SetElectionParameters"
-        submitParams={[props.myMemberId, values.title, values.rationale, '{STAKE}', createElectionParameters(values)]}
+        txMethod='createSetElectionParametersProposal'
+        proposalType='SetElectionParameters'
+        submitParams={[createElectionParameters(values)]}
       >
         <Divider horizontal>Voting </Divider>
-        <Form.Group widths="equal" style={{ marginBottom: '8rem' }}>
+        <Form.Group widths='equal' style={{ marginBottom: '8rem' }}>
           <InputFormField
-            label="Announcing Period"
-            help="Announcing period in blocks"
+            label='Announcing Period'
+            help='Announcing period in blocks'
             onChange={handleChange}
-            name="announcingPeriod"
+            name='announcingPeriod'
             error={errorLabelsProps.announcingPeriod}
             value={values.announcingPeriod}
             placeholder={ placeholders.announcingPeriod }
           />
           <InputFormField
-            label="Voting Period"
-            help="Voting period in blocks"
+            label='Voting Period'
+            help='Voting period in blocks'
             onChange={handleChange}
-            name="votingPeriod"
+            name='votingPeriod'
             error={errorLabelsProps.votingPeriod}
             value={values.votingPeriod}
             placeholder={ placeholders.votingPeriod }
           />
           <InputFormField
-            label="Revealing Period"
-            help="Revealing period in blocks"
+            label='Revealing Period'
+            help='Revealing period in blocks'
             fluid
             onChange={handleChange}
-            name="revealingPeriod"
+            name='revealingPeriod'
             error={errorLabelsProps.revealingPeriod}
             value={values.revealingPeriod}
             placeholder={ placeholders.revealingPeriod }
           />
           <InputFormField
-            label="Minimum Voting Stake"
-            help="The minimum voting stake"
+            label='Minimum Voting Stake'
+            help='The minimum voting stake'
             fluid
             onChange={handleChange}
-            name="minVotingStake"
+            name='minVotingStake'
             error={errorLabelsProps.minVotingStake}
             value={values.minVotingStake}
             placeholder={ placeholders.minVotingStake }
@@ -148,44 +149,44 @@ const SetCouncilParamsForm: React.FunctionComponent<FormInnerProps> = props => {
           />
         </Form.Group>
         <Divider horizontal>Council</Divider>
-        <Form.Group widths="equal" style={{ marginBottom: '8rem' }}>
+        <Form.Group widths='equal' style={{ marginBottom: '8rem' }}>
           <InputFormField
-            label="Minimum Council Stake"
-            help="The minimum council stake"
+            label='Minimum Council Stake'
+            help='The minimum council stake'
             fluid
             onChange={handleChange}
-            name="minCouncilStake"
+            name='minCouncilStake'
             error={errorLabelsProps.minCouncilStake}
             value={values.minCouncilStake}
             placeholder={ placeholders.minCouncilStake }
             disabled
           />
           <InputFormField
-            label="New Term Duration"
-            help="Duration of the new term in blocks"
+            label='New Term Duration'
+            help='Duration of the new term in blocks'
             fluid
             onChange={handleChange}
-            name="newTermDuration"
+            name='newTermDuration'
             error={errorLabelsProps.newTermDuration}
             value={values.newTermDuration}
             placeholder={ placeholders.newTermDuration }
           />
           <InputFormField
-            label="Council Size"
-            help="The size of the council (number of seats)"
+            label='Council Size'
+            help='The size of the council (number of seats)'
             fluid
             onChange={handleChange}
-            name="councilSize"
+            name='councilSize'
             error={errorLabelsProps.councilSize}
             value={values.councilSize}
             placeholder={ placeholders.councilSize }
           />
           <InputFormField
-            label="Candidacy Limit"
-            help="How many candidates that will be allowed in to the voting stage"
+            label='Candidacy Limit'
+            help='How many candidates that will be allowed in to the voting stage'
             fluid
             onChange={handleChange}
-            name="candidacyLimit"
+            name='candidacyLimit'
             error={errorLabelsProps.candidacyLimit}
             value={values.candidacyLimit}
             placeholder={ placeholders.candidacyLimit }
@@ -202,10 +203,10 @@ const FormContainer = withFormContainer<FormContainerProps, FormValues>({
     ...(props.initialData || {})
   }),
   validationSchema: Yup.object().shape({
-    ...genericFormDefaultOptions.validationSchema,
+    ...Validation.All(),
     ...Validation.SetElectionParameters()
   }),
-  handleSubmit: genericFormDefaultOptions.handleSubmit,
+  handleSubmit: () => null,
   displayName: 'SetCouncilParamsForm'
 })(SetCouncilParamsForm);
 
diff --git a/pioneer/packages/joy-proposals/src/forms/SetMaxValidatorCountForm.tsx b/pioneer/packages/joy-proposals/src/forms/SetMaxValidatorCountForm.tsx
index e274d2dff6..da7766d817 100644
--- a/pioneer/packages/joy-proposals/src/forms/SetMaxValidatorCountForm.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/SetMaxValidatorCountForm.tsx
@@ -1,21 +1,17 @@
 import React, { useEffect } from 'react';
 import { getFormErrorLabelsProps } from './errorHandling';
 import * as Yup from 'yup';
-import {
-  GenericProposalForm,
+import { GenericProposalForm,
   GenericFormValues,
-  genericFormDefaultOptions,
   genericFormDefaultValues,
   withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps
-} from './GenericProposalForm';
+  ProposalFormInnerProps } from './GenericProposalForm';
 import Validation from '../validationSchema';
 import { InputFormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
 import { useTransport, usePromise } from '@polkadot/joy-utils/react/hooks';
-import './forms.css';
 
 export type FormValues = GenericFormValues & {
   maxValidatorCount: string;
@@ -26,12 +22,12 @@ const defaultValues: FormValues = {
   maxValidatorCount: ''
 };
 
-type FormAdditionalProps = {}; // Aditional props coming all the way from export comonent into the inner form.
+type FormAdditionalProps = Record<any, never>; // Aditional props coming all the way from export comonent into the inner form.
 type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormValues>;
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const SetMaxValidatorCountForm: React.FunctionComponent<FormInnerProps> = props => {
+const SetMaxValidatorCountForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const transport = useTransport();
   const [validatorCount] = usePromise<number>(() => transport.validators.maxCount(), 20);
   const { handleChange, errors, touched, values, setFieldValue } = props;
@@ -41,20 +37,22 @@ const SetMaxValidatorCountForm: React.FunctionComponent<FormInnerProps> = props
     if (validatorCount) {
       setFieldValue('maxValidatorCount', validatorCount);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [validatorCount]);
+
   return (
     <GenericProposalForm
       {...props}
-      txMethod="createSetValidatorCountProposal"
-      proposalType="SetValidatorCount"
-      submitParams={[props.myMemberId, values.title, values.rationale, '{STAKE}', values.maxValidatorCount]}
+      txMethod='createSetValidatorCountProposal'
+      proposalType='SetValidatorCount'
+      submitParams={[values.maxValidatorCount]}
     >
       <InputFormField
         error={errorLabelsProps.maxValidatorCount}
-        label="Max Validator Count"
-        help="The new value for maximum number of Validators that you propose"
+        label='Max Validator Count'
+        help='The new value for maximum number of Validators that you propose'
         onChange={handleChange}
-        name="maxValidatorCount"
+        name='maxValidatorCount'
         placeholder={validatorCount}
         value={values.maxValidatorCount}
       />
@@ -68,10 +66,10 @@ const FormContainer = withFormContainer<FormContainerProps, FormValues>({
     ...(props.initialData || {})
   }),
   validationSchema: Yup.object().shape({
-    ...genericFormDefaultOptions.validationSchema,
+    ...Validation.All(),
     ...Validation.SetValidatorCount()
   }),
-  handleSubmit: genericFormDefaultOptions.handleSubmit,
+  handleSubmit: () => null,
   displayName: 'SetMaxValidatorCountForm'
 })(SetMaxValidatorCountForm);
 
diff --git a/pioneer/packages/joy-proposals/src/forms/SetWorkingGroupLeadRewardForm.tsx b/pioneer/packages/joy-proposals/src/forms/SetWorkingGroupLeadRewardForm.tsx
index 39f15b2a13..3e9e7333bf 100644
--- a/pioneer/packages/joy-proposals/src/forms/SetWorkingGroupLeadRewardForm.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/SetWorkingGroupLeadRewardForm.tsx
@@ -1,21 +1,15 @@
 import React, { useState } from 'react';
 import { getFormErrorLabelsProps } from './errorHandling';
 import * as Yup from 'yup';
-import {
-  withProposalFormData,
+import { withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps,
-  genericFormDefaultOptions
-} from './GenericProposalForm';
-import {
-  GenericWorkingGroupProposalForm,
+  ProposalFormInnerProps } from './GenericProposalForm';
+import { GenericWorkingGroupProposalForm,
   FormValues as WGFormValues,
-  defaultValues as wgFromDefaultValues
-} from './GenericWorkingGroupProposalForm';
+  defaultValues as wgFromDefaultValues } from './GenericWorkingGroupProposalForm';
 import { InputFormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
-import './forms.css';
 import { Grid } from 'semantic-ui-react';
 import { formatBalance } from '@polkadot/util';
 import _ from 'lodash';
@@ -31,41 +25,37 @@ const defaultValues: FormValues = {
   amount: ''
 };
 
-type FormAdditionalProps = {}; // Aditional props coming all the way from export component into the inner form.
+type FormAdditionalProps = Record<any, never>; // Aditional props coming all the way from export component into the inner form.
 type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormValues>;
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const SetWorkingGroupLeadRewardForm: React.FunctionComponent<FormInnerProps> = props => {
-  const { handleChange, errors, touched, values, myMemberId } = props;
+const SetWorkingGroupLeadRewardForm: React.FunctionComponent<FormInnerProps> = (props) => {
+  const { handleChange, errors, touched, values } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
   const [lead, setLead] = useState<WorkerData | null>(null);
 
   return (
     <GenericWorkingGroupProposalForm
       {...props}
-      txMethod="createSetWorkingGroupLeaderRewardProposal"
-      proposalType="SetWorkingGroupLeaderReward"
+      txMethod='createSetWorkingGroupLeaderRewardProposal'
+      proposalType='SetWorkingGroupLeaderReward'
       leadRequired={true}
       leadRewardRequired={true}
       onLeadChange={(lead: WorkerData | null) => setLead(lead)}
       submitParams={[
-        myMemberId,
-        values.title,
-        values.rationale,
-        '{STAKE}',
         lead?.workerId,
         values.amount,
         values.workingGroup
       ]}
     >
       { (lead && lead.reward) && (
-        <Grid columns="4" doubling stackable verticalAlign="bottom">
+        <Grid columns='4' doubling stackable verticalAlign='bottom'>
           <Grid.Column>
             <InputFormField
-              label="New reward amount"
+              label='New reward amount'
               onChange={handleChange}
-              name="amount"
+              name='amount'
               error={errorLabelsProps.amount}
               value={values.amount}
               unit={formatBalance.getDefaults().unit}
@@ -83,10 +73,10 @@ const FormContainer = withFormContainer<FormContainerProps, FormValues>({
     ...(props.initialData || {})
   }),
   validationSchema: Yup.object().shape({
-    ...genericFormDefaultOptions.validationSchema,
+    ...Validation.All(),
     ...Validation.SetWorkingGroupLeaderReward()
   }),
-  handleSubmit: genericFormDefaultOptions.handleSubmit,
+  handleSubmit: () => null,
   displayName: 'SetWorkingGroupLeadRewardForm'
 })(SetWorkingGroupLeadRewardForm);
 
diff --git a/pioneer/packages/joy-proposals/src/forms/SetWorkingGroupMintCapacityForm.tsx b/pioneer/packages/joy-proposals/src/forms/SetWorkingGroupMintCapacityForm.tsx
index a53006273f..3f2ab3931c 100644
--- a/pioneer/packages/joy-proposals/src/forms/SetWorkingGroupMintCapacityForm.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/SetWorkingGroupMintCapacityForm.tsx
@@ -1,21 +1,15 @@
 import React from 'react';
 import { getFormErrorLabelsProps } from './errorHandling';
 import * as Yup from 'yup';
-import {
-  withProposalFormData,
+import { withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps,
-  genericFormDefaultOptions
-} from './GenericProposalForm';
-import {
-  GenericWorkingGroupProposalForm,
+  ProposalFormInnerProps } from './GenericProposalForm';
+import { GenericWorkingGroupProposalForm,
   FormValues as WGFormValues,
-  defaultValues as wgFromDefaultValues
-} from './GenericWorkingGroupProposalForm';
+  defaultValues as wgFromDefaultValues } from './GenericWorkingGroupProposalForm';
 import { InputFormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
-import './forms.css';
 import { Grid } from 'semantic-ui-react';
 import { formatBalance } from '@polkadot/util';
 import _ from 'lodash';
@@ -30,35 +24,31 @@ const defaultValues: FormValues = {
   capacity: ''
 };
 
-type FormAdditionalProps = {}; // Aditional props coming all the way from export component into the inner form.
+type FormAdditionalProps = Record<any, never>; // Aditional props coming all the way from export component into the inner form.
 type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormValues>;
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const SetWorkingGroupMintCapacityForm: React.FunctionComponent<FormInnerProps> = props => {
-  const { handleChange, errors, touched, values, myMemberId } = props;
+const SetWorkingGroupMintCapacityForm: React.FunctionComponent<FormInnerProps> = (props) => {
+  const { handleChange, errors, touched, values } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
 
   return (
     <GenericWorkingGroupProposalForm
       {...props}
-      txMethod="createSetWorkingGroupMintCapacityProposal"
-      proposalType="SetWorkingGroupMintCapacity"
+      txMethod='createSetWorkingGroupMintCapacityProposal'
+      proposalType='SetWorkingGroupMintCapacity'
       submitParams={[
-        myMemberId,
-        values.title,
-        values.rationale,
-        '{STAKE}',
         values.capacity,
         values.workingGroup
       ]}
     >
-      <Grid columns="4" doubling stackable verticalAlign="bottom">
+      <Grid columns='4' doubling stackable verticalAlign='bottom'>
         <Grid.Column>
           <InputFormField
-            label="Mint capacity"
+            label='Mint capacity'
             onChange={handleChange}
-            name="capacity"
+            name='capacity'
             error={errorLabelsProps.capacity}
             value={values.capacity}
             placeholder={'ie. 100000'}
@@ -76,10 +66,10 @@ const FormContainer = withFormContainer<FormContainerProps, FormValues>({
     ...(props.initialData || {})
   }),
   validationSchema: Yup.object().shape({
-    ...genericFormDefaultOptions.validationSchema,
+    ...Validation.All(),
     ...Validation.SetWorkingGroupMintCapacity()
   }),
-  handleSubmit: genericFormDefaultOptions.handleSubmit,
+  handleSubmit: () => null,
   displayName: 'SetWorkingGroupMintCapacityForm'
 })(SetWorkingGroupMintCapacityForm);
 
diff --git a/pioneer/packages/joy-proposals/src/forms/SignalForm.tsx b/pioneer/packages/joy-proposals/src/forms/SignalForm.tsx
index 1163346db8..5efdb2a8e5 100644
--- a/pioneer/packages/joy-proposals/src/forms/SignalForm.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/SignalForm.tsx
@@ -1,20 +1,18 @@
 import React from 'react';
 import { getFormErrorLabelsProps } from './errorHandling';
 import * as Yup from 'yup';
-import {
-  GenericProposalForm,
+import { GenericProposalForm,
   GenericFormValues,
-  genericFormDefaultOptions,
   genericFormDefaultValues,
   withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps
-} from './GenericProposalForm';
+  ProposalFormInnerProps } from './GenericProposalForm';
 import Validation from '../validationSchema';
 import { TextareaFormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
-import './forms.css';
+import { u32 } from '@polkadot/types/primitive';
+import { withCalls } from '@polkadot/react-api';
 
 export type FormValues = GenericFormValues & {
   description: string;
@@ -25,28 +23,30 @@ const defaultValues: FormValues = {
   description: ''
 };
 
-type FormAdditionalProps = {}; // Aditional props coming all the way from export comonent into the inner form.
+type FormAdditionalProps = Record<any, never>; // Aditional props coming all the way from export comonent into the inner form.
 type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormValues>;
-type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
+type FormContainerProps = ProposalFormContainerProps<ExportComponentProps> & {
+  textMaxLength: u32;
+};
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const SignalForm: React.FunctionComponent<FormInnerProps> = props => {
+const SignalForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const { handleChange, errors, touched, values } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
 
   return (
     <GenericProposalForm
       {...props}
-      txMethod="createTextProposal"
-      proposalType="Text"
-      submitParams={[props.myMemberId, values.title, values.rationale, '{STAKE}', values.description]}
+      txMethod='createTextProposal'
+      proposalType='Text'
+      submitParams={[values.description]}
     >
       <TextareaFormField
-        label="Description"
-        help="The extensive description of your proposal"
+        label='Description'
+        help='The extensive description of your proposal'
         onChange={handleChange}
-        name="description"
-        placeholder="What I would like to propose is..."
+        name='description'
+        placeholder='What I would like to propose is...'
         error={errorLabelsProps.description}
         value={values.description}
       />
@@ -59,12 +59,16 @@ const FormContainer = withFormContainer<FormContainerProps, FormValues>({
     ...defaultValues,
     ...(props.initialData || {})
   }),
-  validationSchema: Yup.object().shape({
-    ...genericFormDefaultOptions.validationSchema,
-    ...Validation.Text()
+  validationSchema: (props: FormContainerProps) => Yup.object().shape({
+    ...Validation.All(),
+    ...Validation.Text(props.textMaxLength.toNumber())
   }),
-  handleSubmit: genericFormDefaultOptions.handleSubmit,
+  handleSubmit: () => null,
   displayName: 'SignalForm'
 })(SignalForm);
 
-export default withProposalFormData<FormContainerProps, ExportComponentProps>(FormContainer);
+export default withCalls<ExportComponentProps>(
+  ['consts.proposalsCodex.textProposalMaxLength', { propName: 'textMaxLength' }]
+)(
+  withProposalFormData<FormContainerProps, ExportComponentProps>(FormContainer)
+);
diff --git a/pioneer/packages/joy-proposals/src/forms/SlashWorkingGroupLeadStakeForm.tsx b/pioneer/packages/joy-proposals/src/forms/SlashWorkingGroupLeadStakeForm.tsx
index c9e4692a62..50f4ecb46c 100644
--- a/pioneer/packages/joy-proposals/src/forms/SlashWorkingGroupLeadStakeForm.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/SlashWorkingGroupLeadStakeForm.tsx
@@ -1,21 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import { getFormErrorLabelsProps } from './errorHandling';
 import * as Yup from 'yup';
-import {
-  withProposalFormData,
+import { withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps,
-  genericFormDefaultOptions
-} from './GenericProposalForm';
-import {
-  GenericWorkingGroupProposalForm,
+  ProposalFormInnerProps } from './GenericProposalForm';
+import { GenericWorkingGroupProposalForm,
   FormValues as WGFormValues,
-  defaultValues as wgFromDefaultValues
-} from './GenericWorkingGroupProposalForm';
+  defaultValues as wgFromDefaultValues } from './GenericWorkingGroupProposalForm';
 import { InputFormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
-import './forms.css';
 import { Grid } from 'semantic-ui-react';
 import { formatBalance } from '@polkadot/util';
 import _ from 'lodash';
@@ -31,15 +25,16 @@ const defaultValues: FormValues = {
   amount: ''
 };
 
-type FormAdditionalProps = {}; // Aditional props coming all the way from export component into the inner form.
+type FormAdditionalProps = Record<any, never>; // Aditional props coming all the way from export component into the inner form.
 type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormValues>;
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const SlashWorkingGroupLeadStakeForm: React.FunctionComponent<FormInnerProps> = props => {
-  const { handleChange, errors, touched, values, myMemberId, setFieldError } = props;
+const SlashWorkingGroupLeadStakeForm: React.FunctionComponent<FormInnerProps> = (props) => {
+  const { handleChange, errors, touched, values, setFieldError } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
   const [lead, setLead] = useState<WorkerData | null>(null);
+
   // Here we validate if stake <= current lead stake.
   // Because it depends on selected working group,
   // there's no easy way to do it using validationSchema
@@ -52,28 +47,24 @@ const SlashWorkingGroupLeadStakeForm: React.FunctionComponent<FormInnerProps> =
   return (
     <GenericWorkingGroupProposalForm
       {...props}
-      txMethod="createSlashWorkingGroupLeaderStakeProposal"
-      proposalType="SlashWorkingGroupLeaderStake"
+      txMethod='createSlashWorkingGroupLeaderStakeProposal'
+      proposalType='SlashWorkingGroupLeaderStake'
       leadRequired={true}
       leadStakeRequired={true}
       onLeadChange={(lead: WorkerData | null) => setLead(lead)}
       submitParams={[
-        myMemberId,
-        values.title,
-        values.rationale,
-        '{STAKE}',
         lead?.workerId,
         values.amount,
         values.workingGroup
       ]}
     >
       { (lead && lead.stake) && (
-        <Grid columns="4" doubling stackable verticalAlign="bottom">
+        <Grid columns='4' doubling stackable verticalAlign='bottom'>
           <Grid.Column>
             <InputFormField
-              label="Amount to slash"
+              label='Amount to slash'
               onChange={handleChange}
-              name="amount"
+              name='amount'
               error={errorLabelsProps.amount}
               value={values.amount}
               unit={formatBalance.getDefaults().unit}
@@ -91,10 +82,10 @@ const FormContainer = withFormContainer<FormContainerProps, FormValues>({
     ...(props.initialData || {})
   }),
   validationSchema: Yup.object().shape({
-    ...genericFormDefaultOptions.validationSchema,
+    ...Validation.All(),
     ...Validation.SlashWorkingGroupLeaderStake()
   }),
-  handleSubmit: genericFormDefaultOptions.handleSubmit,
+  handleSubmit: () => null,
   displayName: 'SlashWorkingGroupLeadStakeForm'
 })(SlashWorkingGroupLeadStakeForm);
 
diff --git a/pioneer/packages/joy-proposals/src/forms/SpendingProposalForm.tsx b/pioneer/packages/joy-proposals/src/forms/SpendingProposalForm.tsx
index 125e2535d9..550a4f4b0c 100644
--- a/pioneer/packages/joy-proposals/src/forms/SpendingProposalForm.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/SpendingProposalForm.tsx
@@ -2,25 +2,21 @@ import React from 'react';
 import { getFormErrorLabelsProps } from './errorHandling';
 import * as Yup from 'yup';
 import { Label } from 'semantic-ui-react';
-import {
-  GenericProposalForm,
+import { GenericProposalForm,
   GenericFormValues,
-  genericFormDefaultOptions,
   genericFormDefaultValues,
   withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps
-} from './GenericProposalForm';
+  ProposalFormInnerProps } from './GenericProposalForm';
 import Validation from '../validationSchema';
 import { InputFormField, FormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
 import { InputAddress } from '@polkadot/react-components/index';
 import { formatBalance } from '@polkadot/util';
-import './forms.css';
 
 export type FormValues = GenericFormValues & {
-  destinationAccount: any;
+  destinationAccount: string;
   tokens: string;
 };
 
@@ -30,47 +26,44 @@ const defaultValues: FormValues = {
   tokens: ''
 };
 
-type FormAdditionalProps = {}; // Aditional props coming all the way from export comonent into the inner form.
+type FormAdditionalProps = Record<any, never>; // Aditional props coming all the way from export comonent into the inner form.
 type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormValues>;
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const SpendingProposalForm: React.FunctionComponent<FormInnerProps> = props => {
+const SpendingProposalForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const { handleChange, errors, touched, values, setFieldValue } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
+
   return (
     <GenericProposalForm
       {...props}
-      txMethod="createSpendingProposal"
-      proposalType="Spending"
+      txMethod='createSpendingProposal'
+      proposalType='Spending'
       submitParams={[
-        props.myMemberId,
-        values.title,
-        values.rationale,
-        '{STAKE}',
         values.tokens,
         values.destinationAccount
       ]}
     >
       <InputFormField
-        label="Amount of tokens"
-        help="The amount of tokens you propose to spend"
+        label='Amount of tokens'
+        help='The amount of tokens you propose to spend'
         onChange={handleChange}
-        name="tokens"
-        placeholder="100"
+        name='tokens'
+        placeholder='100'
         error={errorLabelsProps.tokens}
         unit={ formatBalance.getDefaults().unit }
         value={values.tokens}
       />
       <FormField
         error={errorLabelsProps.destinationAccount}
-        label="Destination account"
-        help="The account you propose to send the tokens into"
+        label='Destination account'
+        help='The account you propose to send the tokens into'
       >
         <InputAddress
-          onChange={address => setFieldValue('destinationAccount', address)}
-          type="all"
-          placeholder="Select Destination Account"
+          onChange={(address) => setFieldValue('destinationAccount', address)}
+          type='all'
+          placeholder='Select Destination Account'
           value={values.destinationAccount}
         />
         {errorLabelsProps.destinationAccount && <Label {...errorLabelsProps.destinationAccount} prompt />}
@@ -85,10 +78,10 @@ const FormContainer = withFormContainer<FormContainerProps, FormValues>({
     ...(props.initialData || {})
   }),
   validationSchema: Yup.object().shape({
-    ...genericFormDefaultOptions.validationSchema,
+    ...Validation.All(),
     ...Validation.Spending()
   }),
-  handleSubmit: genericFormDefaultOptions.handleSubmit,
+  handleSubmit: () => null,
   displayName: 'SpendingProposalsForm'
 })(SpendingProposalForm);
 
diff --git a/pioneer/packages/joy-proposals/src/forms/TerminateWorkingGroupLeaderForm.tsx b/pioneer/packages/joy-proposals/src/forms/TerminateWorkingGroupLeaderForm.tsx
index c44b225042..476f0ed37b 100644
--- a/pioneer/packages/joy-proposals/src/forms/TerminateWorkingGroupLeaderForm.tsx
+++ b/pioneer/packages/joy-proposals/src/forms/TerminateWorkingGroupLeaderForm.tsx
@@ -1,32 +1,24 @@
 import React, { useState } from 'react';
 import * as Yup from 'yup';
-import {
-  withProposalFormData,
+import { withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps,
-  genericFormDefaultOptions
-} from './GenericProposalForm';
-import {
-  GenericWorkingGroupProposalForm,
+  ProposalFormInnerProps } from './GenericProposalForm';
+import { GenericWorkingGroupProposalForm,
   FormValues as WGFormValues,
-  defaultValues as wgFromDefaultValues
-} from './GenericWorkingGroupProposalForm';
+  defaultValues as wgFromDefaultValues } from './GenericWorkingGroupProposalForm';
 import { withFormContainer } from './FormContainer';
-import './forms.css';
 import _ from 'lodash';
 import Validation from '../validationSchema';
 import { WorkerData } from '@polkadot/joy-utils/types/workingGroups';
 import { getFormErrorLabelsProps } from './errorHandling';
 import FormField, { TextareaFormField } from './FormFields';
 import { Checkbox } from 'semantic-ui-react';
-import { TerminateRoleParameters } from '@joystream/types/proposals';
-import { WorkerId } from '@joystream/types/working-group';
-import { Bytes } from '@polkadot/types';
-import { WorkingGroup, InputValidationLengthConstraint } from '@joystream/types/common';
-import { bool as Bool } from '@polkadot/types/primitive';
+import { InputValidationLengthConstraint } from '@joystream/types/common';
 import { withCalls } from '@polkadot/react-api';
 import { formatBalance } from '@polkadot/util';
+import { SimplifiedTypeInterface } from '@polkadot/joy-utils/types/common';
+import { ITerminateRoleParameters } from '@joystream/types/src/proposals';
 
 export type FormValues = WGFormValues & {
   terminationRationale: string;
@@ -39,53 +31,47 @@ const defaultValues: FormValues = {
   slashStake: false
 };
 
-type FormAdditionalProps = {}; // Aditional props coming all the way from export component into the inner form.
+type FormAdditionalProps = Record<any, never>; // Aditional props coming all the way from export component into the inner form.
 type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormValues>;
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps> & {
   terminationRationaleConstraint?: InputValidationLengthConstraint;
 };
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const valuesToTerminateRoleParams = (values: FormValues, lead: WorkerData): TerminateRoleParameters => {
-  return new TerminateRoleParameters({
-    worker_id: new WorkerId(lead.workerId),
-    rationale: new Bytes(values.terminationRationale),
-    slash: lead.stake ? new Bool(values.slashStake) : new Bool(false),
-    working_group: new WorkingGroup(values.workingGroup)
-  });
+const valuesToTerminateRoleParams = (values: FormValues, lead: WorkerData): SimplifiedTypeInterface<ITerminateRoleParameters> => {
+  return {
+    worker_id: lead.workerId,
+    rationale: values.terminationRationale,
+    slash: lead.stake ? values.slashStake : false,
+    working_group: values.workingGroup
+  };
 };
 
-const TerminateWorkingGroupLeaderForm: React.FunctionComponent<FormInnerProps> = props => {
-  const { handleChange, errors, touched, values, myMemberId, setFieldValue } = props;
+const TerminateWorkingGroupLeaderForm: React.FunctionComponent<FormInnerProps> = (props) => {
+  const { handleChange, errors, touched, values, setFieldValue } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
   const [lead, setLead] = useState<WorkerData | null>(null);
 
   return (
     <GenericWorkingGroupProposalForm
       {...props}
-      txMethod="createTerminateWorkingGroupLeaderRoleProposal"
-      proposalType="TerminateWorkingGroupLeaderRole"
+      txMethod='createTerminateWorkingGroupLeaderRoleProposal'
+      proposalType='TerminateWorkingGroupLeaderRole'
       leadRequired={true}
       onLeadChange={(lead: WorkerData | null) => setLead(lead)}
-      submitParams={[
-        myMemberId,
-        values.title,
-        values.rationale,
-        '{STAKE}',
-        lead && valuesToTerminateRoleParams(values, lead)
-      ]}
+      submitParams={[lead && valuesToTerminateRoleParams(values, lead)]}
     >
       { lead && (<>
         <TextareaFormField
-          label="Termination rationale"
+          label='Termination rationale'
           help={
             'This rationale is an required argument of "terminateWorkerRole" extrinsic, ' +
             'it may differ from proposal rationale and has different length constraints. ' +
             'If the propsal gets executed, this rationale will become part of "TerminatedLeader" event.'
           }
           onChange={handleChange}
-          name="terminationRationale"
-          placeholder="Provide a clear rationale for terminating the leader role..."
+          name='terminationRationale'
+          placeholder='Provide a clear rationale for terminating the leader role...'
           error={errorLabelsProps.terminationRationale}
           value={values.terminationRationale}
         />
@@ -109,12 +95,12 @@ const FormContainer = withFormContainer<FormContainerProps, FormValues>({
     ...(props.initialData || {})
   }),
   validationSchema: (props: FormContainerProps) => Yup.object().shape({
-    ...genericFormDefaultOptions.validationSchema,
+    ...Validation.All(),
     ...Validation.TerminateWorkingGroupLeaderRole(
-      props.terminationRationaleConstraint || InputValidationLengthConstraint.createWithMaxAllowed()
+      props.terminationRationaleConstraint
     )
   }),
-  handleSubmit: genericFormDefaultOptions.handleSubmit,
+  handleSubmit: () => null,
   displayName: 'TerminateWorkingGroupLeaderForm'
 })(TerminateWorkingGroupLeaderForm);
 
diff --git a/pioneer/packages/joy-proposals/src/forms/errorHandling.ts b/pioneer/packages/joy-proposals/src/forms/errorHandling.ts
index 8e5c1ea272..f70b3094a2 100644
--- a/pioneer/packages/joy-proposals/src/forms/errorHandling.ts
+++ b/pioneer/packages/joy-proposals/src/forms/errorHandling.ts
@@ -27,6 +27,7 @@ export function getFormErrorLabelsProps<ValuesT> (
   touched: FormikTouched<ValuesT>
 ): FormErrorLabelsProps<ValuesT> {
   const errorStates: Partial<FormErrorLabelsProps<ValuesT>> = {};
+
   for (const fieldName in errors) {
     errorStates[fieldName] = getErrorLabelProps<ValuesT>(errors, touched, fieldName);
   }
diff --git a/pioneer/packages/joy-proposals/src/forms/forms.css b/pioneer/packages/joy-proposals/src/forms/forms.css
deleted file mode 100644
index d800c9c497..0000000000
--- a/pioneer/packages/joy-proposals/src/forms/forms.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.Forms {
-  .proposal-form {
-    margin: 0 auto;
-  }
-
-  .ui.form.proposal-form {
-    & label {
-      font-size: 1rem;
-    }
-
-    & input[name="tokens"] {
-      max-width: 16rem;
-    }
-  }
-
-  .form-buttons {
-    display: flex;
-  }
-
-  .ui.dropdown .ui.avatar.image {
-    width: 2em !important;
-  }
-}
diff --git a/pioneer/packages/joy-proposals/src/index.css b/pioneer/packages/joy-proposals/src/index.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/pioneer/packages/joy-proposals/src/index.tsx b/pioneer/packages/joy-proposals/src/index.tsx
index ffa06eae0a..f94335421b 100644
--- a/pioneer/packages/joy-proposals/src/index.tsx
+++ b/pioneer/packages/joy-proposals/src/index.tsx
@@ -1,20 +1,16 @@
 import React from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Switch, RouteComponentProps } from 'react-router';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { Breadcrumb } from 'semantic-ui-react';
 
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
-import { TransportProvider } from '@polkadot/joy-utils/react/context';
+import { I18nProps } from '@polkadot/react-components/types';
 import { ProposalPreviewList, ProposalFromId, ChooseProposalType } from './Proposal';
 import _ from 'lodash';
 
-import './index.css';
-
 import translate from './translate';
 import NotDone from './NotDone';
-import {
-  SignalForm,
+import { SignalForm,
   SpendingProposalForm,
   SetContentWorkingGroupLeadForm,
   SetContentWorkingGroupMintCapForm,
@@ -28,10 +24,13 @@ import {
   DecreaseWorkingGroupLeadStakeFrom,
   SlashWorkingGroupLeadStakeForm,
   SetWorkingGroupLeadRewardForm,
-  TerminateWorkingGroupLeaderForm
-} from './forms';
+  TerminateWorkingGroupLeaderForm } from './forms';
+import { RouteProps as AppMainRouteProps } from '@polkadot/apps-routing/types';
+import style from './style';
+
+const ProposalsMain = styled.main`${style}`;
 
-interface Props extends AppProps, I18nProps {}
+interface Props extends AppMainRouteProps, I18nProps {}
 
 const StyledHeader = styled.header`
   text-align: left;
@@ -46,59 +45,57 @@ function App (props: Props): React.ReactElement<Props> {
   const { basePath } = props;
 
   return (
-    <TransportProvider>
-      <main className="proposal--App">
-        <StyledHeader>
-          <Breadcrumb>
-            <Switch>
-              <Route path={`${basePath}/new/:type`} render={props => (
-                <>
-                  <Breadcrumb.Section link as={Link} to={basePath}>Proposals</Breadcrumb.Section>
-                  <Breadcrumb.Divider icon="right angle" />
-                  <Breadcrumb.Section link as={Link} to={`${basePath}/new`}>New proposal</Breadcrumb.Section>
-                  <Breadcrumb.Divider icon="right angle" />
-                  <Breadcrumb.Section active>{_.startCase(props.match.params.type)}</Breadcrumb.Section>
-                </>
-              )} />
-              <Route path={`${basePath}/new`}>
+    <ProposalsMain className='proposal--App'>
+      <StyledHeader>
+        <Breadcrumb>
+          <Switch>
+            <Route path={`${basePath}/new/:type`} render={(props: RouteComponentProps<{ type?: string }>) => (
+              <>
                 <Breadcrumb.Section link as={Link} to={basePath}>Proposals</Breadcrumb.Section>
-                <Breadcrumb.Divider icon="right angle" />
-                <Breadcrumb.Section active>New proposal</Breadcrumb.Section>
-              </Route>
-              <Route>
-                <Breadcrumb.Section active>Proposals</Breadcrumb.Section>
-              </Route>
-            </Switch>
-          </Breadcrumb>
-        </StyledHeader>
-        <Switch>
-          <Route exact path={`${basePath}/new`} component={ChooseProposalType} />
-          <Route exact path={`${basePath}/new/text`} component={SignalForm} />
-          <Route exact path={`${basePath}/new/runtime-upgrade`} component={RuntimeUpgradeForm} />
-          <Route exact path={`${basePath}/new/set-election-parameters`} component={SetCouncilParamsForm} />
-          <Route exact path={`${basePath}/new/spending`} component={SpendingProposalForm} />
-          <Route exact path={`${basePath}/new/set-lead`} component={SetContentWorkingGroupLeadForm} />
-          <Route
-            exact
-            path={`${basePath}/new/set-content-working-group-mint-capacity`}
-            component={SetContentWorkingGroupMintCapForm}
-          />
-          <Route exact path={`${basePath}/new/set-validator-count`} component={SetMaxValidatorCountForm} />
-          <Route exact path={`${basePath}/new/add-working-group-leader-opening`} component={AddWorkingGroupOpeningForm} />
-          <Route exact path={`${basePath}/new/set-working-group-mint-capacity`} component={SetWorkingGroupMintCapacityForm} />
-          <Route exact path={`${basePath}/new/begin-review-working-group-leader-application`} component={BeginReviewLeaderApplicationsForm} />
-          <Route exact path={`${basePath}/new/fill-working-group-leader-opening`} component={FillWorkingGroupLeaderOpeningForm} />
-          <Route exact path={`${basePath}/new/decrease-working-group-leader-stake`} component={DecreaseWorkingGroupLeadStakeFrom} />
-          <Route exact path={`${basePath}/new/slash-working-group-leader-stake`} component={SlashWorkingGroupLeadStakeForm} />
-          <Route exact path={`${basePath}/new/set-working-group-leader-reward`} component={SetWorkingGroupLeadRewardForm} />
-          <Route exact path={`${basePath}/new/terminate-working-group-leader-role`} component={TerminateWorkingGroupLeaderForm} />
-          <Route exact path={`${basePath}/active`} component={NotDone} />
-          <Route exact path={`${basePath}/finalized`} component={NotDone} />
-          <Route exact path={`${basePath}/:id`} component={ProposalFromId} />
-          <Route component={ProposalPreviewList} />
-        </Switch>
-      </main>
-    </TransportProvider>
+                <Breadcrumb.Divider icon='right angle' />
+                <Breadcrumb.Section link as={Link} to={`${basePath}/new`}>New proposal</Breadcrumb.Section>
+                <Breadcrumb.Divider icon='right angle' />
+                <Breadcrumb.Section active>{_.startCase(props.match.params.type)}</Breadcrumb.Section>
+              </>
+            )} />
+            <Route path={`${basePath}/new`}>
+              <Breadcrumb.Section link as={Link} to={basePath}>Proposals</Breadcrumb.Section>
+              <Breadcrumb.Divider icon='right angle' />
+              <Breadcrumb.Section active>New proposal</Breadcrumb.Section>
+            </Route>
+            <Route>
+              <Breadcrumb.Section active>Proposals</Breadcrumb.Section>
+            </Route>
+          </Switch>
+        </Breadcrumb>
+      </StyledHeader>
+      <Switch>
+        <Route exact path={`${basePath}/new`} component={ChooseProposalType} />
+        <Route exact path={`${basePath}/new/text`} component={SignalForm} />
+        <Route exact path={`${basePath}/new/runtime-upgrade`} component={RuntimeUpgradeForm} />
+        <Route exact path={`${basePath}/new/set-election-parameters`} component={SetCouncilParamsForm} />
+        <Route exact path={`${basePath}/new/spending`} component={SpendingProposalForm} />
+        <Route exact path={`${basePath}/new/set-lead`} component={SetContentWorkingGroupLeadForm} />
+        <Route
+          exact
+          path={`${basePath}/new/set-content-working-group-mint-capacity`}
+          component={SetContentWorkingGroupMintCapForm}
+        />
+        <Route exact path={`${basePath}/new/set-validator-count`} component={SetMaxValidatorCountForm} />
+        <Route exact path={`${basePath}/new/add-working-group-leader-opening`} component={AddWorkingGroupOpeningForm} />
+        <Route exact path={`${basePath}/new/set-working-group-mint-capacity`} component={SetWorkingGroupMintCapacityForm} />
+        <Route exact path={`${basePath}/new/begin-review-working-group-leader-application`} component={BeginReviewLeaderApplicationsForm} />
+        <Route exact path={`${basePath}/new/fill-working-group-leader-opening`} component={FillWorkingGroupLeaderOpeningForm} />
+        <Route exact path={`${basePath}/new/decrease-working-group-leader-stake`} component={DecreaseWorkingGroupLeadStakeFrom} />
+        <Route exact path={`${basePath}/new/slash-working-group-leader-stake`} component={SlashWorkingGroupLeadStakeForm} />
+        <Route exact path={`${basePath}/new/set-working-group-leader-reward`} component={SetWorkingGroupLeadRewardForm} />
+        <Route exact path={`${basePath}/new/terminate-working-group-leader-role`} component={TerminateWorkingGroupLeaderForm} />
+        <Route exact path={`${basePath}/active`} component={NotDone} />
+        <Route exact path={`${basePath}/finalized`} component={NotDone} />
+        <Route exact path={`${basePath}/:id`} component={ProposalFromId} />
+        <Route component={ProposalPreviewList} />
+      </Switch>
+    </ProposalsMain>
   );
 }
 
diff --git a/pioneer/packages/joy-proposals/src/stories/ProposalDetails.stories.tsx b/pioneer/packages/joy-proposals/src/stories/ProposalDetails.stories.tsx
index 4a7f3246cf..2481a25b45 100644
--- a/pioneer/packages/joy-proposals/src/stories/ProposalDetails.stories.tsx
+++ b/pioneer/packages/joy-proposals/src/stories/ProposalDetails.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import '../index.css';
+import withMock from './withMock';
 
 import MockProposalDetails from './data/ProposalDetails.mock';
 import { ProposalDetails } from '../Proposal';
@@ -8,18 +8,18 @@ export default {
   title: 'Proposals | Details'
 };
 
-export const HasToVote = () => <ProposalDetails {...MockProposalDetails} />;
+export const HasToVote = withMock(() => <ProposalDetails {...MockProposalDetails} />);
 
-export const VotedApproved = () => (
+export const VotedApproved = withMock(() => (
   <ProposalDetails {...MockProposalDetails} vote={{ hasVoted: true, value: 'Approve' }} />
-);
+));
 
-export const VotedAbstain = () => (
+export const VotedAbstain = withMock(() => (
   <ProposalDetails {...MockProposalDetails} vote={{ hasVoted: true, value: 'Abstain' }} />
-);
+));
 
-export const VotedReject = () => (
+export const VotedReject = withMock(() => (
   <ProposalDetails {...MockProposalDetails} vote={{ hasVoted: true, value: 'Reject' }} />
-);
+));
 
-export const VotedSlash = () => <ProposalDetails {...MockProposalDetails} vote={{ hasVoted: true, value: 'Slash' }} />;
+export const VotedSlash = withMock(() => <ProposalDetails {...MockProposalDetails} vote={{ hasVoted: true, value: 'Slash' }} />);
diff --git a/pioneer/packages/joy-proposals/src/stories/ProposalForms.stories.tsx b/pioneer/packages/joy-proposals/src/stories/ProposalForms.stories.tsx
index 8741642416..3ec5670d0c 100644
--- a/pioneer/packages/joy-proposals/src/stories/ProposalForms.stories.tsx
+++ b/pioneer/packages/joy-proposals/src/stories/ProposalForms.stories.tsx
@@ -1,14 +1,11 @@
-import '../index.css';
-import {
-  SignalForm,
+import { SignalForm,
   SpendingProposalForm,
   SetCouncilParamsForm,
   SetContentWorkingGroupLeadForm,
   RuntimeUpgradeForm,
   SetContentWorkingGroupMintCapForm,
   SetCouncilMintCapForm,
-  SetMaxValidatorCountForm
-} from '../forms';
+  SetMaxValidatorCountForm } from '../forms';
 import withMock from './withMock';
 
 export default {
diff --git a/pioneer/packages/joy-proposals/src/stories/ProposalPreview.stories.tsx b/pioneer/packages/joy-proposals/src/stories/ProposalPreview.stories.tsx
index bd24681372..007bcdbf24 100644
--- a/pioneer/packages/joy-proposals/src/stories/ProposalPreview.stories.tsx
+++ b/pioneer/packages/joy-proposals/src/stories/ProposalPreview.stories.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
-import '../index.css';
-
 import MockProposalPreview from './data/ProposalPreview.mock';
 import { ProposalPreview } from '../Proposal';
+import withMock from './withMock';
 
 export default {
   title: 'Proposals | Preview'
 };
 
-export const Default = () => <ProposalPreview {...MockProposalPreview} />;
+export const Default = withMock(() => <ProposalPreview {...MockProposalPreview} />);
diff --git a/pioneer/packages/joy-proposals/src/stories/ProposalPreviewList.stories.tsx b/pioneer/packages/joy-proposals/src/stories/ProposalPreviewList.stories.tsx
index dcd08b3f8a..a02ce87c5e 100644
--- a/pioneer/packages/joy-proposals/src/stories/ProposalPreviewList.stories.tsx
+++ b/pioneer/packages/joy-proposals/src/stories/ProposalPreviewList.stories.tsx
@@ -1,4 +1,3 @@
-import '../index.css';
 import { ProposalPreviewList } from '../Proposal';
 import withMock from './withMock';
 
diff --git a/pioneer/packages/joy-proposals/src/stories/ProposalTypes.stories.tsx b/pioneer/packages/joy-proposals/src/stories/ProposalTypes.stories.tsx
index fd64981595..db9b940493 100644
--- a/pioneer/packages/joy-proposals/src/stories/ProposalTypes.stories.tsx
+++ b/pioneer/packages/joy-proposals/src/stories/ProposalTypes.stories.tsx
@@ -1,4 +1,3 @@
-import '../index.css';
 import { ChooseProposalType } from '../Proposal';
 import withMock from './withMock';
 
diff --git a/pioneer/packages/joy-proposals/src/stories/data/ProposalDetails.mock.ts b/pioneer/packages/joy-proposals/src/stories/data/ProposalDetails.mock.ts
index 474db8c862..69ab92266d 100644
--- a/pioneer/packages/joy-proposals/src/stories/data/ProposalDetails.mock.ts
+++ b/pioneer/packages/joy-proposals/src/stories/data/ProposalDetails.mock.ts
@@ -1,14 +1,14 @@
 import { ParsedProposal } from '@polkadot/joy-utils/types/proposals';
-import { ProposalId } from '@joystream/types/proposals';
+import { createType } from '@joystream/types';
 
 const mockedProposal: ParsedProposal = {
-  id: new ProposalId(100),
+  id: createType('ProposalId', 100),
   title: 'Awesome Proposal',
   description: 'Please send me some tokens for coffee',
   createdAtBlock: 36,
   type: 'Text',
-  details: ['Ciao'],
-  parameters: {
+  details: createType('ProposalDetails', { Text: 'Ciao' }),
+  parameters: createType('ProposalParameters', {
     approvalQuorumPercentage: 66,
     approvalThresholdPercentage: 80,
     gracePeriod: 0,
@@ -16,14 +16,14 @@ const mockedProposal: ParsedProposal = {
     slashingQuorumPercentage: 60,
     slashingThresholdPercentage: 80,
     votingPeriod: 7200
-  },
+  }),
   proposerId: 303,
-  status: {
+  status: createType('ProposalStatus', {
     Active: {
       stakeId: 0,
       sourceAccountId: '5C4hrfkRjSLwQSFVtCvtbV6wctV1WFnkiexUZWLAh4Bc7jib'
     }
-  },
+  }),
   proposer: {
     about: 'Bob',
     avatar_uri: 'https://react.semantic-ui.com/images/avatar/large/steve.jpg',
@@ -38,12 +38,12 @@ const mockedProposal: ParsedProposal = {
     subscription: null,
     suspended: false
   },
-  votingResults: {
+  votingResults: createType('VotingResults', {
     abstensions: 3,
     approvals: 0,
     rejections: 1,
     slashes: 0
-  },
+  }),
   createdAt: new Date('Mar 25, 2020 at 14:20'),
   cancellationFee: 5
 };
diff --git a/pioneer/packages/joy-proposals/src/stories/data/ProposalPreviewList.mock.ts b/pioneer/packages/joy-proposals/src/stories/data/ProposalPreviewList.mock.ts
index 4cf5485ca6..e6f8242fec 100644
--- a/pioneer/packages/joy-proposals/src/stories/data/ProposalPreviewList.mock.ts
+++ b/pioneer/packages/joy-proposals/src/stories/data/ProposalPreviewList.mock.ts
@@ -92,4 +92,5 @@ import mockedProposal from './ProposalDetails.mock';
 //   }
 // ];
 const MockProposalPreviewList = Array.from({ length: 5 }, (_, i) => mockedProposal);
+
 export default MockProposalPreviewList;
diff --git a/pioneer/packages/joy-proposals/src/stories/withMock.tsx b/pioneer/packages/joy-proposals/src/stories/withMock.tsx
index 23d921e795..6e26b527fd 100644
--- a/pioneer/packages/joy-proposals/src/stories/withMock.tsx
+++ b/pioneer/packages/joy-proposals/src/stories/withMock.tsx
@@ -1,10 +1,14 @@
 import React from 'react';
 import { createMemoryHistory, createLocation } from 'history';
 import { match, RouteComponentProps } from 'react-router';
+import style from '../style';
+import styled from 'styled-components';
+
+const StyledContainer = styled.div`${style}`;
 
 const history = createMemoryHistory();
 const path = '/';
-const matchObj: match<{}> = {
+const matchObj: match<Record<string, string | undefined>> = {
   isExact: false,
   path,
   url: path,
@@ -20,5 +24,9 @@ const MockRouteProps: RouteComponentProps = {
 
 export default function withMock (Component: React.ComponentType<any>) {
   // TODO: Use mock transport
-  return <Component {...MockRouteProps} />;
+  return (
+    <StyledContainer>
+      <Component {...MockRouteProps} />
+    </StyledContainer>
+  );
 }
diff --git a/pioneer/packages/joy-proposals/src/Proposal/Proposal.css b/pioneer/packages/joy-proposals/src/style.ts
similarity index 80%
rename from pioneer/packages/joy-proposals/src/Proposal/Proposal.css
rename to pioneer/packages/joy-proposals/src/style.ts
index d3dd08ab20..3802a35c76 100644
--- a/pioneer/packages/joy-proposals/src/Proposal/Proposal.css
+++ b/pioneer/packages/joy-proposals/src/style.ts
@@ -1,7 +1,7 @@
-.Proposal {
-  position: relative;
+import { css } from 'styled-components';
 
-  .description {
+export default css`
+  .ui.card .description {
     word-wrap: break-word;
     word-break: break-word;
   }
@@ -26,4 +26,4 @@
   .ui.tabular.list-menu {
     margin-bottom: 2rem;
   }
-}
+`;
diff --git a/pioneer/packages/joy-proposals/src/validationSchema.ts b/pioneer/packages/joy-proposals/src/validationSchema.ts
index 7b3c68c28c..6028193c3f 100644
--- a/pioneer/packages/joy-proposals/src/validationSchema.ts
+++ b/pioneer/packages/joy-proposals/src/validationSchema.ts
@@ -30,12 +30,8 @@ const CURRENCY_UNIT = undefined;
 const TITLE_MAX_LENGTH = 40;
 const RATIONALE_MAX_LENGTH = 3000;
 
-// Text
-const DESCRIPTION_MAX_LENGTH = 5000;
-
 // Runtime Upgrade
 const FILE_SIZE_BYTES_MIN = 1;
-const FILE_SIZE_BYTES_MAX = 2000000;
 
 // Set Election Parameters
 const ANNOUNCING_PERIOD_MAX = 43200;
@@ -105,7 +101,7 @@ const DECREASE_LEAD_STAKE_MIN = 1;
 const SLASH_LEAD_STAKE_MIN = 1;
 // Max is validated in form component, because it depends on selected working group's leader stake
 
-function errorMessage (name: string, min?: number | string, max?: number | string, unit?: string): string {
+function errorMessage (name: string, min: number | string, max: number | string, unit?: string): string {
   return `${name} should be at least ${min} and no more than ${max}${unit ? ` ${unit}.` : '.'}`;
 }
 
@@ -119,7 +115,7 @@ Ex:
 import Validation from 'path/to/validationSchema'
 ...
   validationSchema: Yup.object().shape({
-    ...genericFormDefaultOptions.validationSchema,
+    ...Validation.All()
     ...Validation.Text()
   }),
 
@@ -152,14 +148,16 @@ type FormValuesByType<T extends ValidationTypeKeys> =
   never;
 
 type ValidationSchemaFuncParamsByType<T extends ValidationTypeKeys> =
-  T extends 'AddWorkingGroupLeaderOpening' ? [number, InputValidationLengthConstraint] :
+  T extends 'Text' ? [number] :
+  T extends 'RuntimeUpgrade' ? [number] :
+  T extends 'AddWorkingGroupLeaderOpening' ? [number, InputValidationLengthConstraint | undefined] :
   T extends 'FillWorkingGroupLeaderOpening' ? [number] :
-  T extends 'TerminateWorkingGroupLeaderRole' ? [InputValidationLengthConstraint] :
+  T extends 'TerminateWorkingGroupLeaderRole' ? [InputValidationLengthConstraint | undefined] :
   [];
 
 /* eslint-enable @typescript-eslint/indent */
 
-type ValidationSchemaFunc<FieldValuesT extends {}, ParamsT extends any[] = []> = (...params: ParamsT) =>
+type ValidationSchemaFunc<FieldValuesT extends Record<string, any>, ParamsT extends any[] = []> = (...params: ParamsT) =>
 ({ [fieldK in keyof FieldValuesT]: Yup.Schema<any> });
 
 type ValidationType = {
@@ -178,6 +176,24 @@ function minMaxInt (min: number, max: number, fieldName: string) {
     .max(max, errorMessage(fieldName, min, max));
 }
 
+function minMaxStrFromConstraint (constraint: InputValidationLengthConstraint | undefined, fieldName: string) {
+  const schema = Yup.string().required(`${fieldName} is required!`);
+
+  return constraint
+    ? (
+      schema
+        .min(
+          constraint.min.toNumber(),
+          `${fieldName} must be at least ${constraint.min.toNumber()} character(s) long`
+        )
+        .max(
+          constraint.max.toNumber(),
+          `${fieldName} cannot be more than ${constraint.max.toNumber()} character(s) long`
+        )
+    )
+    : schema;
+}
+
 const Validation: ValidationType = {
   All: () => ({
     title: Yup.string()
@@ -187,16 +203,16 @@ const Validation: ValidationType = {
       .required('Rationale is required!')
       .max(RATIONALE_MAX_LENGTH, `Rationale should be under ${RATIONALE_MAX_LENGTH} characters.`)
   }),
-  Text: () => ({
+  Text: (maxLength: number) => ({
     description: Yup.string()
       .required('Description is required!')
-      .max(DESCRIPTION_MAX_LENGTH, `Description should be under ${DESCRIPTION_MAX_LENGTH}`)
+      .max(maxLength, `Description should be under ${maxLength}`)
   }),
-  RuntimeUpgrade: () => ({
+  RuntimeUpgrade: (maxFileSize: number) => ({
     WASM: Yup.mixed()
-      .test('fileArrayBuffer', 'Unexpected data format, file cannot be processed.', value => typeof value.byteLength !== 'undefined')
-      .test('fileSizeMin', `Minimum file size is ${FILE_SIZE_BYTES_MIN} bytes.`, value => value.byteLength >= FILE_SIZE_BYTES_MIN)
-      .test('fileSizeMax', `Maximum file size is ${FILE_SIZE_BYTES_MAX} bytes.`, value => value.byteLength <= FILE_SIZE_BYTES_MAX)
+      .test('fileArrayBuffer', 'Unexpected data format, file cannot be processed.', (value) => value instanceof ArrayBuffer)
+      .test('fileSizeMin', `Minimum file size is ${FILE_SIZE_BYTES_MIN} bytes.`, (value: ArrayBuffer) => value.byteLength >= FILE_SIZE_BYTES_MIN)
+      .test('fileSizeMax', `Maximum file size is ${maxFileSize} bytes.`, (value: ArrayBuffer) => value.byteLength <= maxFileSize)
   }),
   SetElectionParameters: () => ({
     announcingPeriod: Yup.number()
@@ -303,7 +319,7 @@ const Validation: ValidationType = {
         errorMessage('The max validator count', MAX_VALIDATOR_COUNT_MIN, MAX_VALIDATOR_COUNT_MAX)
       )
   }),
-  AddWorkingGroupLeaderOpening: (currentBlock: number, { min: HRTMin, max: HRTMax }: InputValidationLengthConstraint) => ({
+  AddWorkingGroupLeaderOpening: (currentBlock: number, HRTConstraint?: InputValidationLengthConstraint) => ({
     workingGroup: Yup.string(),
     activateAt: Yup.string().required(),
     activateAtBlock: Yup.number()
@@ -346,30 +362,31 @@ const Validation: ValidationType = {
       LEAVE_ROLE_UNSTAKING_MAX,
       'Leave role unstaking period'
     ),
-    humanReadableText: Yup.string()
-      .required()
+    humanReadableText: minMaxStrFromConstraint(HRTConstraint, 'human_readable_text')
       .test(
         'schemaIsValid',
         'Schema validation failed!',
-        function (val) {
-          let schemaObj: any;
+        function (val: string) {
+          let schemaObj: Record<string, unknown>;
+
           try {
-            schemaObj = JSON.parse(val);
+            schemaObj = JSON.parse(val) as Record<string, unknown>;
           } catch (e) {
             return this.createError({ message: 'Schema validation failed: Invalid JSON' });
           }
+
           const isValid = schemaValidator(schemaObj);
           const errors = schemaValidator.errors || [];
+
           if (!isValid) {
             return this.createError({
-              message: 'Schema validation failed: ' + errors.map(e => `${e.message}${e.dataPath && ` (${e.dataPath})`}`).join(', ')
+              message: 'Schema validation failed: ' + errors.map((e) => `${e.message || ''}${e.dataPath && ` (${e.dataPath})`}`).join(', ')
             });
           }
+
           return true;
         }
       )
-      .min(HRTMin.toNumber(), `human_readable_text must be at least ${HRTMin.toNumber()} character(s) long`)
-      .max(HRTMax.toNumber(), `human_readable_text cannot be more than ${HRTMax.toNumber()} character(s) long`)
   }),
   SetWorkingGroupMintCapacity: () => ({
     workingGroup: Yup.string(),
@@ -421,12 +438,9 @@ const Validation: ValidationType = {
     workingGroup: Yup.string(),
     amount: minMaxInt(MIN_REWARD_AMOUNT, MAX_REWARD_AMOUNT, 'Reward amount')
   }),
-  TerminateWorkingGroupLeaderRole: ({ min, max }: InputValidationLengthConstraint) => ({
+  TerminateWorkingGroupLeaderRole: (rationaleConstraint?: InputValidationLengthConstraint) => ({
     workingGroup: Yup.string(),
-    terminationRationale: Yup.string()
-      .required('Termination rationale is required')
-      .min(min.toNumber(), `Termination rationale must be at least ${min.toNumber()} character(s) long`)
-      .max(max.toNumber(), `Termination rationale cannot be more than ${max.toNumber()} character(s) long`),
+    terminationRationale: minMaxStrFromConstraint(rationaleConstraint, 'Termination rationale'),
     slashStake: Yup.boolean()
   })
 };
diff --git a/pioneer/packages/joy-roles/.skip-build b/pioneer/packages/joy-roles/.skip-build
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/pioneer/packages/joy-roles/package.json b/pioneer/packages/joy-roles/package.json
index 07bbeba30d..3abbab493e 100644
--- a/pioneer/packages/joy-roles/package.json
+++ b/pioneer/packages/joy-roles/package.json
@@ -11,10 +11,10 @@
   "author": "Joystream contributors",
   "maintainers": [],
   "dependencies": {
-    "@babel/runtime": "^7.7.1",
+    "@babel/runtime": "^7.10.5",
     "@polkadot/joy-utils": "^0.1.1",
-    "@polkadot/react-components": "0.37.0-beta.63",
-    "@polkadot/react-query": "0.37.0-beta.63",
+    "@polkadot/react-components": "0.51.1",
+    "@polkadot/react-query": "0.51.1",
     "@types/faker": "^4.1.8",
     "faker": "^4.1.0",
     "marked": "^0.7.0",
diff --git a/pioneer/packages/joy-roles/src/StakeRequirement.tsx b/pioneer/packages/joy-roles/src/StakeRequirement.tsx
index 31a025295c..2a766e645f 100644
--- a/pioneer/packages/joy-roles/src/StakeRequirement.tsx
+++ b/pioneer/packages/joy-roles/src/StakeRequirement.tsx
@@ -34,6 +34,7 @@ export abstract class StakeRequirement {
     if (this.type === StakeType.AtLeast) {
       return 'at least';
     }
+
     return null;
   }
 
diff --git a/pioneer/packages/joy-roles/src/balances.spec.ts b/pioneer/packages/joy-roles/src/balances.spec.ts
index efd406b784..9d78e63e01 100644
--- a/pioneer/packages/joy-roles/src/balances.spec.ts
+++ b/pioneer/packages/joy-roles/src/balances.spec.ts
@@ -1,12 +1,13 @@
 import { Balance } from '@polkadot/types/interfaces';
-import { u128 } from '@polkadot/types';
+import { createType } from '@joystream/types';
 import { Avg, AvgDelta, Min, Step, Sum } from './balances';
 
 describe('Balance arithmetic', (): void => {
   it('Can calculate a sum', (): void => {
     const input: Balance[] = [];
+
     for (let i = 0; i < 10; i++) {
-      input.push(new u128(i));
+      input.push(createType('Balance', i));
     }
 
     expect(Sum(input).toNumber()).toEqual(45);
@@ -14,8 +15,9 @@ describe('Balance arithmetic', (): void => {
 
   it('Can calculate an average', (): void => {
     const input: Balance[] = [];
+
     for (let i = 0; i < 10; i++) {
-      input.push(new u128(i));
+      input.push(createType('Balance', i));
     }
 
     expect(Avg(input).toNumber()).toEqual(4);
@@ -23,8 +25,9 @@ describe('Balance arithmetic', (): void => {
 
   it('Can calculate an average delta', (): void => {
     const input: Balance[] = [];
+
     for (let i = 0; i < 10; i++) {
-      input.push(new u128(i));
+      input.push(createType('Balance', i));
     }
 
     expect(AvgDelta(input).toNumber()).toEqual(1);
@@ -32,8 +35,9 @@ describe('Balance arithmetic', (): void => {
 
   it('Can calculate a step value with large numbers', (): void => {
     const input: Balance[] = [];
+
     for (let i = 0; i < 10; i++) {
-      input.push(new u128(i * 10));
+      input.push(createType('Balance', i * 10));
     }
 
     expect(Step(input).toNumber()).toEqual(4);
@@ -41,8 +45,9 @@ describe('Balance arithmetic', (): void => {
 
   it('Can calculate a step value with small numbers', (): void => {
     const input: Balance[] = [];
+
     for (let i = 0; i < 10; i++) {
-      input.push(new u128(i));
+      input.push(createType('Balance', i));
     }
 
     expect(Min(Step(input)).toNumber()).toEqual(1);
diff --git a/pioneer/packages/joy-roles/src/balances.ts b/pioneer/packages/joy-roles/src/balances.ts
index d0c85731ce..e66c7e063a 100644
--- a/pioneer/packages/joy-roles/src/balances.ts
+++ b/pioneer/packages/joy-roles/src/balances.ts
@@ -1,15 +1,15 @@
 import { Balance } from '@polkadot/types/interfaces';
-import { u128 } from '@polkadot/types';
+import { createType } from '@joystream/types';
 
-export const Zero = new u128(0);
-export const One = new u128(1);
+export const Zero = createType('Balance', 0);
+export const One = createType('Balance', 1);
 
-export const Add = (x: Balance, y: Balance): Balance => new u128(x.add(y));
-export const Sub = (x: Balance, y: Balance): Balance => new u128(x.sub(y));
+export const Add = (x: Balance, y: Balance): Balance => createType('Balance', x.add(y));
+export const Sub = (x: Balance, y: Balance): Balance => createType('Balance', x.sub(y));
 export const Sum = (balances: Balance[]): Balance => balances.reduce(Add, Zero);
 
 export const Avg = (xs: Balance[]): Balance =>
-  xs[0] === undefined ? Zero : new u128(Sum(xs).divn(xs.length));
+  xs[0] === undefined ? Zero : createType('Balance', Sum(xs).divn(xs.length));
 
 export const AvgDelta = (xs: Balance[]): Balance => {
   if (xs.length < 2) {
@@ -28,8 +28,9 @@ export const AvgDelta = (xs: Balance[]): Balance => {
 };
 
 // An average value to 'step' up balances, like on the nudge controls for a slider
-export const Step = (xs: Balance[], ticks = 10): Balance => new u128(Avg(xs).divn(ticks));
+export const Step = (xs: Balance[], ticks = 10): Balance => createType('Balance', Avg(xs).divn(ticks));
 export const Min = (x: Balance, min: Balance = One): Balance => x.gte(min) ? x : min;
+
 export const Sort = (xs: Balance[]): Balance[] => {
   xs.sort((a, b): number => {
     if (a.eq(b)) {
@@ -37,7 +38,9 @@ export const Sort = (xs: Balance[]): Balance[] => {
     } else if (a.gt(b)) {
       return 1;
     }
+
     return -1;
   });
+
   return xs;
 };
diff --git a/pioneer/packages/joy-roles/src/classifiers.spec.ts b/pioneer/packages/joy-roles/src/classifiers.spec.ts
index 8d0e18c730..e84129e17a 100644
--- a/pioneer/packages/joy-roles/src/classifiers.spec.ts
+++ b/pioneer/packages/joy-roles/src/classifiers.spec.ts
@@ -1,18 +1,9 @@
-import { Option, Text, u32 } from '@polkadot/types';
-import {
-  AcceptingApplications,
-  ActiveOpeningStage,
-  ApplicationRationingPolicy,
-  StakingPolicy,
-  Opening, OpeningStage,
-  ReviewPeriod
-} from '@joystream/types/hiring';
+import { Opening } from '@joystream/types/hiring';
 
-import {
-  OpeningState,
+import { OpeningState,
   IBlockQueryer,
-  classifyOpeningStage, OpeningStageClassification
-} from './classifiers';
+  classifyOpeningStage, OpeningStageClassification } from './classifiers';
+import { createType } from '@joystream/types';
 
 class MockBlockQueryer {
   hash: string
@@ -36,8 +27,7 @@ class MockBlockQueryer {
     return this.timestamp;
   }
 
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async expectedBlockTime (): Promise<number> {
+  expectedBlockTime (): number {
     return 6;
   }
 }
@@ -58,18 +48,15 @@ describe('hiring.Opening-> OpeningStageClassification', (): void => {
     {
       description: 'WaitingToBegin',
       input: {
-        opening: new Opening({
-          created: new u32(100),
-          stage: new OpeningStage({
+        opening: createType('Opening', {
+          created: 100,
+          stage: createType('OpeningStage', {
             WaitingToBegin: {
-              begins_at_block: new u32(100)
+              begins_at_block: 100
             }
           }),
-          max_review_period_length: new u32(100),
-          application_rationing_policy: new Option(ApplicationRationingPolicy),
-          application_staking_policy: new Option(StakingPolicy),
-          role_staking_policy: new Option(StakingPolicy),
-          human_readable_text: new Text()
+          max_review_period_length: 100,
+          human_readable_text: ''
         }),
         queryer: new MockBlockQueryer('somehash', now)
       },
@@ -83,22 +70,19 @@ describe('hiring.Opening-> OpeningStageClassification', (): void => {
     {
       description: 'Accepting applications',
       input: {
-        opening: new Opening({
-          created: new u32(100),
-          stage: new OpeningStage({
+        opening: createType('Opening', {
+          created: 100,
+          stage: createType('OpeningStage', {
             Active: {
-              stage: new ActiveOpeningStage({
-                acceptingApplications: new AcceptingApplications({
-                  started_accepting_applicants_at_block: new u32(100)
-                })
+              stage: createType('ActiveOpeningStage', {
+                acceptingApplications: {
+                  started_accepting_applicants_at_block: 100
+                }
               })
             }
           }),
-          max_review_period_length: new u32(100),
-          application_rationing_policy: new Option(ApplicationRationingPolicy),
-          application_staking_policy: new Option(StakingPolicy),
-          role_staking_policy: new Option(StakingPolicy),
-          human_readable_text: new Text()
+          max_review_period_length: 100,
+          human_readable_text: ''
         }),
         queryer: new MockBlockQueryer('somehash', now)
       },
@@ -112,23 +96,20 @@ describe('hiring.Opening-> OpeningStageClassification', (): void => {
     {
       description: 'In review period',
       input: {
-        opening: new Opening({
-          created: new u32(100),
-          stage: new OpeningStage({
+        opening: createType('Opening', {
+          created: 100,
+          stage: createType('OpeningStage', {
             Active: {
-              stage: new ActiveOpeningStage({
-                reviewPeriod: new ReviewPeriod({
-                  started_accepting_applicants_at_block: new u32(100),
-                  started_review_period_at_block: new u32(100)
-                })
+              stage: createType('ActiveOpeningStage', {
+                reviewPeriod: {
+                  started_accepting_applicants_at_block: 100,
+                  started_review_period_at_block: 100
+                }
               })
             }
           }),
-          max_review_period_length: new u32(14400),
-          application_rationing_policy: new Option(ApplicationRationingPolicy),
-          application_staking_policy: new Option(StakingPolicy),
-          role_staking_policy: new Option(StakingPolicy),
-          human_readable_text: new Text()
+          max_review_period_length: 14400,
+          human_readable_text: ''
         }),
         queryer: new MockBlockQueryer('somehash', now)
       },
@@ -141,43 +122,6 @@ describe('hiring.Opening-> OpeningStageClassification', (): void => {
         review_end_time: new Date('2020-01-24T11:47:04.433Z')
       }
     }
-    /*
-     * jest is having trouble with the enum type
-    {
-      description: "Deactivated: cancelled",
-      input: {
-        opening: new Opening({
-          created: new u32(100),
-          stage: new OpeningStage({
-            'Active': {
-              stage: new ActiveOpeningStage({
-                reviewPeriod: new Deactivated({
-                  cause: new OpeningDeactivationCause(
-        OpeningDeactivationCauseKeys.CancelledBeforeActivation,
-                  ),
-                  deactivated_at_block: new u32(123),
-                  started_accepting_applicants_at_block: new u32(100),
-                  started_review_period_at_block: new Option(u32, 100),
-                })
-              })
-            }
-          }),
-          max_review_period_length: new u32(100),
-          application_rationing_policy: new Option(ApplicationRationingPolicy),
-          application_staking_policy: new Option(StakingPolicy),
-          role_staking_policy: new Option(StakingPolicy),
-          human_readable_text: new Text(),
-        }),
-        queryer: new MockBlockQueryer("somehash", now),
-      },
-      output: {
-        state: OpeningState.Cancelled,
-        starting_block: 123,
-        starting_block_hash: "somehash",
-        starting_time: now,
-      },
-    },
-    */
   ];
 
   cases.forEach((test: Test) => {
diff --git a/pioneer/packages/joy-roles/src/classifiers.ts b/pioneer/packages/joy-roles/src/classifiers.ts
index e8c4695c5e..247eb41781 100644
--- a/pioneer/packages/joy-roles/src/classifiers.ts
+++ b/pioneer/packages/joy-roles/src/classifiers.ts
@@ -1,10 +1,9 @@
 import moment from 'moment';
 
-import { Option, u128 } from '@polkadot/types';
+import { Option } from '@polkadot/types';
 import { Balance } from '@polkadot/types/interfaces';
 
-import {
-  Application,
+import { Application,
   AcceptingApplications, ReviewPeriod,
   WaitingToBeingOpeningStageVariant,
   ActiveOpeningStageVariant,
@@ -16,15 +15,13 @@ import {
   ApplicationStageKeys,
   ApplicationDeactivationCause, ApplicationDeactivationCauseKeys,
   UnstakingApplicationStage,
-  InactiveApplicationStage
-} from '@joystream/types/hiring';
+  InactiveApplicationStage } from '@joystream/types/hiring';
 
-import {
-  StakeRequirement,
+import { StakeRequirement,
   ApplicationStakeRequirement,
   RoleStakeRequirement,
-  StakeType
-} from './StakeRequirement';
+  StakeType } from './StakeRequirement';
+import { createType } from '@joystream/types';
 
 export enum CancelledReason {
   ApplicantCancelled = 0,
@@ -53,7 +50,7 @@ export interface OpeningStageClassification {
 export interface IBlockQueryer {
   blockHash(height: number): Promise<string>;
   blockTimestamp(height: number): Promise<Date>;
-  expectedBlockTime: () => Promise<number>;
+  expectedBlockTime: () => number;
 }
 
 async function classifyActiveOpeningStageAcceptingApplications (
@@ -61,6 +58,7 @@ async function classifyActiveOpeningStageAcceptingApplications (
   stage: AcceptingApplications
 ): Promise<OpeningStageClassification> {
   const blockNumber = stage.started_accepting_applicants_at_block.toNumber();
+
   return {
     state: OpeningState.AcceptingApplications,
     starting_block: blockNumber,
@@ -76,10 +74,8 @@ async function classifyActiveOpeningStageReviewPeriod (
 ): Promise<OpeningStageClassification> {
   const blockNumber = stage.started_review_period_at_block.toNumber();
   const maxReviewLengthInBlocks = opening.max_review_period_length.toNumber();
-  const [startDate, blockTime] = await Promise.all([
-    queryer.blockTimestamp(blockNumber),
-    queryer.expectedBlockTime()
-  ]);
+  const startDate = await queryer.blockTimestamp(blockNumber);
+  const blockTime = queryer.expectedBlockTime();
   const endDate = moment(startDate).add(maxReviewLengthInBlocks * blockTime, 's');
 
   return {
@@ -139,6 +135,7 @@ async function classifyActiveOpeningStage (
       stage.stage.asType('AcceptingApplications')
     );
   }
+
   if (stage.stage.isOfType('ReviewPeriod')) {
     return classifyActiveOpeningStageReviewPeriod(
       opening,
@@ -146,6 +143,7 @@ async function classifyActiveOpeningStage (
       stage.stage.asType('ReviewPeriod')
     );
   }
+
   if (stage.stage.isOfType('Deactivated')) {
     return classifyActiveOpeningStageDeactivated(
       queryer,
@@ -162,6 +160,7 @@ async function classifyWaitingToBeginStage (
   stage: WaitingToBeingOpeningStageVariant
 ): Promise<OpeningStageClassification> {
   const blockNumber = opening.created.toNumber();
+
   return {
     state: OpeningState.WaitingToBegin,
     starting_block: blockNumber,
@@ -216,7 +215,7 @@ function classifyStakeRequirement<T extends StakeRequirement> (
   option: Option<StakingPolicy>
 ): T {
   if (option.isNone) {
-    return new constructor(new u128(0));
+    return new constructor(createType('Balance', 0));
   }
 
   const policy = option.unwrap();
@@ -242,6 +241,7 @@ export function classifyOpeningStakes (opening: Opening): StakeRequirementSetCla
 
 function classifyApplicationCancellationFromCause (cause: ApplicationDeactivationCause): CancelledReason | undefined {
   console.log(cause.type);
+
   switch (cause.type) {
     case ApplicationDeactivationCauseKeys.External:
       return CancelledReason.ApplicantCancelled;
diff --git a/pioneer/packages/joy-roles/src/elements.tsx b/pioneer/packages/joy-roles/src/elements.tsx
index 5af9089c51..66a3b9e54a 100644
--- a/pioneer/packages/joy-roles/src/elements.tsx
+++ b/pioneer/packages/joy-roles/src/elements.tsx
@@ -21,7 +21,7 @@ type BalanceProps = {
 
 export function BalanceView (props: BalanceProps) {
   return (
-    <div className="balance">
+    <div className='balance'>
       <span>Balance:</span> {formatBalance(props.balance)}
     </div>
   );
@@ -65,6 +65,7 @@ export type GroupLead = {
 
 export function GroupLeadView (props: GroupLead) {
   let avatar = <Identicon value={props.roleAccount.toString()} size={50} />;
+
   if (typeof props.profile.avatar_uri !== 'undefined' && props.profile.avatar_uri.toString() !== '') {
     avatar = <Image src={props.profile.avatar_uri.toString()} circular className='avatar' />;
   }
@@ -72,7 +73,7 @@ export function GroupLeadView (props: GroupLead) {
   const { stake, rewardRelationship } = props;
 
   return (
-    <Card color='grey' className="staked-card">
+    <Card color='grey' className='staked-card'>
       <Card.Content>
         <Image floated='right'>
           {avatar}
@@ -86,7 +87,7 @@ export function GroupLeadView (props: GroupLead) {
         </Card.Meta>
         <Card.Description>
           <Label color='teal'>
-            <Icon name="shield" />
+            <Icon name='shield' />
             { props.title }
             <Label.Detail>{/* ... */}</Label.Detail>
           </Label>
@@ -115,8 +116,8 @@ export function GroupMemberDetails (props: GroupMemberDetailsProps) {
 
   if (props.stake && props.stake.toNumber() > 0) {
     details.push(
-      <Label color="green">
-        <Icon name="shield" />
+      <Label color='green'>
+        <Icon name='shield' />
         Staked
         <Label.Detail>{formatBalance(props.stake)}</Label.Detail>
       </Label>
@@ -129,6 +130,7 @@ export function GroupMemberDetails (props: GroupMemberDetailsProps) {
 
   if (props.rewardRelationship) {
     const reward = props.rewardRelationship;
+
     details.push(
       <Label>Reward <Label.Detail>{formatReward(reward)}</Label.Detail></Label>
     );
@@ -159,7 +161,7 @@ export function GroupMemberDetails (props: GroupMemberDetailsProps) {
           </StakeAndReward>
         </Card.Description>
       ) }
-      <Button onClick={ () => setShowDetails(v => !v) } size="tiny" fluid>
+      <Button onClick={ () => setShowDetails((v) => !v) } size='tiny' fluid>
         { showDetails ? 'Hide' : 'Show'} details
       </Button>
     </Card.Content>
@@ -168,6 +170,7 @@ export function GroupMemberDetails (props: GroupMemberDetailsProps) {
 
 export function GroupMemberView (props: GroupMember) {
   let avatar = <Identicon value={props.roleAccount.toString()} size={50} />;
+
   if (typeof props.profile.avatar_uri !== 'undefined' && props.profile.avatar_uri.toString() !== '') {
     avatar = <Image src={props.profile.avatar_uri.toString()} circular className='avatar' />;
   }
@@ -175,7 +178,7 @@ export function GroupMemberView (props: GroupMember) {
   const { stake, rewardRelationship } = props;
 
   return (
-    <Card color='grey' className="staked-card">
+    <Card color='grey' className='staked-card'>
       <Card.Content>
         <Image floated='right'>
           {avatar}
@@ -198,8 +201,6 @@ type CountdownProps = {
 }
 
 export function Countdown (props: CountdownProps) {
-  let interval = -1;
-
   const [days, setDays] = useState<number | undefined>(undefined);
   const [hours, setHours] = useState<number | undefined>(undefined);
   const [minutes, setMinutes] = useState<number | undefined>(undefined);
@@ -209,16 +210,18 @@ export function Countdown (props: CountdownProps) {
     const then = moment(props.end);
     const now = moment();
     const d = moment.duration(then.diff(now));
+
     setDays(d.days());
     setHours(d.hours());
     setMinutes(d.minutes());
     setSeconds(d.seconds());
   };
 
-  interval = window.setInterval(update, 1000);
-
   useEffect(() => {
+    const interval = window.setInterval(update, 1000);
+
     update();
+
     return () => {
       clearInterval(interval);
     };
@@ -230,19 +233,19 @@ export function Countdown (props: CountdownProps) {
 
   return (
     <div className='countdown wrapper'>
-      <Statistic size="tiny">
+      <Statistic size='tiny'>
         <Statistic.Value>{days}</Statistic.Value>
         <Statistic.Label>Days</Statistic.Label>
       </Statistic>
-      <Statistic size="tiny">
+      <Statistic size='tiny'>
         <Statistic.Value>{hours}</Statistic.Value>
         <Statistic.Label>hours</Statistic.Label>
       </Statistic>
-      <Statistic size="tiny">
+      <Statistic size='tiny'>
         <Statistic.Value>{minutes}</Statistic.Value>
         <Statistic.Label>minutes</Statistic.Label>
       </Statistic>
-      <Statistic size="tiny">
+      <Statistic size='tiny'>
         <Statistic.Value>{seconds}</Statistic.Value>
         <Statistic.Label>seconds</Statistic.Label>
       </Statistic>
diff --git a/pioneer/packages/joy-roles/src/flows/apply.controller.tsx b/pioneer/packages/joy-roles/src/flows/apply.controller.tsx
index 7455ce0617..6e89a039cd 100644
--- a/pioneer/packages/joy-roles/src/flows/apply.controller.tsx
+++ b/pioneer/packages/joy-roles/src/flows/apply.controller.tsx
@@ -1,16 +1,14 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { formatBalance } from '@polkadot/util';
-import { u128 } from '@polkadot/types';
 import { Balance } from '@polkadot/types/interfaces';
-import AccountId from '@polkadot/types/primitive/Generic/AccountId';
+import AccountId from '@polkadot/types/generic/AccountId';
 
-import { Controller, View } from '@polkadot/joy-utils/index';
+import { Controller } from '@polkadot/joy-utils/react/helpers';
+import { View } from '@polkadot/joy-utils/react/hocs';
 
 import { GenericJoyStreamRoleSchema } from '@joystream/types/hiring/schemas/role.schema.typings';
 
-import { Container } from 'semantic-ui-react';
-
 import { ITransport } from '../transport';
 
 import { keyPairDetails, FlowModal, ProgressSteps } from './apply';
@@ -18,6 +16,8 @@ import { keyPairDetails, FlowModal, ProgressSteps } from './apply';
 import { OpeningStakeAndApplicationStatus } from '../tabs/Opportunities';
 import { Min, Step, Sum } from '../balances';
 import { WorkingGroups, AvailableGroups } from '../working_groups';
+import { createType } from '@joystream/types';
+import { ApplicationDetailsData } from '@polkadot/joy-utils/types/workingGroups';
 
 type State = {
   // Input data from state
@@ -31,7 +31,7 @@ type State = {
   // Data captured from form
   applicationStake: Balance;
   roleStake: Balance;
-  appDetails: any;
+  appDetails: ApplicationDetailsData;
   txKeyAddress: AccountId;
   activeStep: ProgressSteps;
   txInProgress: boolean;
@@ -48,14 +48,14 @@ type State = {
 
 const newEmptyState = (): State => {
   return {
-    applicationStake: new u128(0),
-    roleStake: new u128(0),
+    applicationStake: createType('Balance', 0),
+    roleStake: createType('Balance', 0),
     appDetails: {},
     hasError: false,
     transactionDetails: new Map<string, string>(),
     roleKeyNameBase: '',
     roleKeyName: '',
-    txKeyAddress: new AccountId(),
+    txKeyAddress: createType('AccountId', undefined),
     activeStep: 0,
     txInProgress: false,
     complete: false
@@ -76,7 +76,7 @@ export class ApplyController extends Controller<State, ITransport> {
   }
 
   protected parseGroup (group: string | undefined): WorkingGroups | undefined {
-    return AvailableGroups.find(availableGroup => availableGroup === group);
+    return AvailableGroups.find((availableGroup) => availableGroup === group);
   }
 
   protected updateAccounts (keys: keyPairDetails[]) {
@@ -88,6 +88,7 @@ export class ApplyController extends Controller<State, ITransport> {
     if (!rawId) {
       return this.onError('ApplyController: no ID provided in params');
     }
+
     const id = parseInt(rawId);
     const group = this.parseGroup(rawGroup);
 
@@ -123,6 +124,7 @@ export class ApplyController extends Controller<State, ITransport> {
           this.state.activeStep = this.state.hasConfirmStep
             ? ProgressSteps.ConfirmStakes
             : ProgressSteps.ApplicationDetails;
+          this.state.complete = false;
 
           this.state.roleKeyNameBase = hrt.job.title + ' role key';
 
@@ -152,12 +154,12 @@ export class ApplyController extends Controller<State, ITransport> {
     this.dispatch();
   }
 
-  setAppDetails (v: any): void {
+  setAppDetails (v: ApplicationDetailsData): void {
     this.state.appDetails = v;
     this.dispatch();
   }
 
-  setTxKeyAddress (v: any): void {
+  setTxKeyAddress (v: AccountId): void {
     this.state.txKeyAddress = v;
     this.dispatch();
   }
@@ -194,14 +196,16 @@ export class ApplyController extends Controller<State, ITransport> {
     this.state.transactionDetails.set('Total commitment', formatBalance(totalCommitment));
 
     this.dispatch();
+
     return true;
   }
 
   private updateRoleKeyName () {
     let roleKeyNamePrefix = 0;
+
     do {
       this.state.roleKeyName = `${this.state.roleKeyNameBase}${(++roleKeyNamePrefix > 1 ? ` ${roleKeyNamePrefix}` : '')}`;
-    } while (this.state.keypairs?.some(k => (
+    } while (this.state.keypairs?.some((k) => (
       k.shortName.toLowerCase() === this.state.roleKeyName.toLowerCase()
     )));
   }
@@ -210,7 +214,9 @@ export class ApplyController extends Controller<State, ITransport> {
     if (!this.currentGroup || this.currentOpeningId < 0) {
       throw new Error('Trying to apply to unfetched opening');
     }
+
     this.updateRoleKeyName();
+
     return this.transport.applyToOpening(
       this.currentGroup,
       this.currentOpeningId,
@@ -224,38 +230,38 @@ export class ApplyController extends Controller<State, ITransport> {
 }
 
 export const ApplyView = View<ApplyController, State>(
-  (state, controller, params) => {
-    controller.findOpening(params.get('id'), params.get('group'));
+  ({ state, controller, params }) => {
+    useEffect(() => {
+      controller.findOpening(params.get('id'), params.get('group'));
+    }, [params]);
+
     return (
-      <Container className="apply-flow">
-        <div className="dimmer"></div>
-        <FlowModal
-          role={state.role!}
-          applications={state.applications!}
-          keypairs={state.keypairs!}
-          hasConfirmStep={state.hasConfirmStep!}
-          step={state.step!}
-          slots={state.slots!}
-          transactionDetails={state.transactionDetails}
-          roleKeyName={state.roleKeyName}
-          prepareApplicationTransaction={(...args) => controller.prepareApplicationTransaction(...args)}
-          makeApplicationTransaction={() => controller.makeApplicationTransaction()}
-          applicationStake={state.applicationStake}
-          setApplicationStake={(v) => controller.setApplicationStake(v)}
-          roleStake={state.roleStake}
-          setRoleStake={(v) => controller.setRoleStake(v)}
-          appDetails={state.appDetails}
-          setAppDetails={(v) => controller.setAppDetails(v)}
-          txKeyAddress={state.txKeyAddress}
-          setTxKeyAddress={(v) => controller.setTxKeyAddress(v)}
-          activeStep={state.activeStep}
-          setActiveStep={(v) => controller.setActiveStep(v)}
-          txInProgress={state.txInProgress}
-          setTxInProgress={(v) => controller.setTxInProgress(v)}
-          complete={state.complete}
-          setComplete={(v) => controller.setComplete(v)}
-        />
-      </Container>
+      <FlowModal
+        role={state.role!}
+        applications={state.applications!}
+        keypairs={state.keypairs!}
+        hasConfirmStep={state.hasConfirmStep!}
+        step={state.step!}
+        slots={state.slots!}
+        transactionDetails={state.transactionDetails}
+        roleKeyName={state.roleKeyName}
+        prepareApplicationTransaction={controller.prepareApplicationTransaction.bind(controller)}
+        makeApplicationTransaction={controller.makeApplicationTransaction.bind(controller)}
+        applicationStake={state.applicationStake}
+        setApplicationStake={controller.setApplicationStake.bind(controller)}
+        roleStake={state.roleStake}
+        setRoleStake={controller.setRoleStake.bind(controller)}
+        appDetails={state.appDetails}
+        setAppDetails={controller.setAppDetails.bind(controller)}
+        txKeyAddress={state.txKeyAddress}
+        setTxKeyAddress={controller.setTxKeyAddress.bind(controller)}
+        activeStep={state.activeStep}
+        setActiveStep={controller.setActiveStep.bind(controller)}
+        txInProgress={state.txInProgress}
+        setTxInProgress={controller.setTxInProgress.bind(controller)}
+        complete={state.complete}
+        setComplete={controller.setComplete.bind(controller)}
+      />
     );
   }
 );
diff --git a/pioneer/packages/joy-roles/src/flows/apply.elements.stories.tsx b/pioneer/packages/joy-roles/src/flows/apply.elements.stories.FIXME.tsx
similarity index 95%
rename from pioneer/packages/joy-roles/src/flows/apply.elements.stories.tsx
rename to pioneer/packages/joy-roles/src/flows/apply.elements.stories.FIXME.tsx
index 916876029d..0af5a914a5 100644
--- a/pioneer/packages/joy-roles/src/flows/apply.elements.stories.tsx
+++ b/pioneer/packages/joy-roles/src/flows/apply.elements.stories.FIXME.tsx
@@ -1,5 +1,5 @@
-// TODO: FIXME: Remove the ts-nocheck and fix errors!
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// TODO: FIXME: Remove those and fix errors!
+/* eslint-disable */
 // @ts-nocheck
 import React, { useState } from 'react';
 import { number, object, withKnobs } from '@storybook/addon-knobs';
@@ -8,27 +8,19 @@ import { Card, Container, Message } from 'semantic-ui-react';
 import { u128, GenericAccountId } from '@polkadot/types';
 import { Balance } from '@polkadot/types/interfaces';
 
-import {
-  ApplicationDetails
-} from '@joystream/types/schemas/role.schema';
-import {
-  ConfirmStakesStage, ConfirmStakesStageProps,
+import { ApplicationDetails } from '@joystream/types/schemas/role.schema';
+import { ConfirmStakesStage, ConfirmStakesStageProps,
   ProgressStepsView, ProgressStepsProps, ProgressSteps,
   ApplicationDetailsStage, ApplicationDetailsStageProps,
   SubmitApplicationStage, SubmitApplicationStageProps,
   DoneStage, DoneStageProps,
   FundSourceSelector,
   StakeRankSelector, StakeRankSelectorProps,
-  ConfirmStakes2Up, ConfirmStakes2UpProps
-} from './apply';
-import {
-  OpeningStakeAndApplicationStatus
-} from '../tabs/Opportunities';
-import {
-  ApplicationStakeRequirement,
+  ConfirmStakes2Up, ConfirmStakes2UpProps } from './apply';
+import { OpeningStakeAndApplicationStatus } from '../tabs/Opportunities';
+import { ApplicationStakeRequirement,
   RoleStakeRequirement,
-  StakeType
-} from '../StakeRequirement';
+  StakeType } from '../StakeRequirement';
 
 import 'semantic-ui-css/semantic.min.css';
 import '@polkadot/joy-roles/index.sass';
@@ -89,7 +81,7 @@ export function ProgressIndicator () {
   return (
     <Container>
       {permutations.map((permutation, key) => (
-        <Container className="outer" key={key}>
+        <Container className='outer' key={key}>
           <h4>{permutation._description}</h4>
           <Card fluid>
             <ProgressStepsView {...permutation} />
@@ -126,7 +118,7 @@ export function FundSourceSelectorFragment () {
   };
 
   return (
-    <Container className="apply-flow">
+    <Container className='apply-flow'>
       <Card fluid>
         <Card.Content>
           <FundSourceSelector {...props}
@@ -148,6 +140,7 @@ export function StakeRankSelectorFragment () {
 
   // List of the minimum stake required to beat each rank
   const slots: Balance[] = [];
+
   for (let i = 0; i < 10; i++) {
     slots.push(new u128((i * 100) + 10 + i + 1));
   }
@@ -160,7 +153,7 @@ export function StakeRankSelectorFragment () {
   };
 
   return (
-    <Container className="apply-flow">
+    <Container className='apply-flow'>
       <Card fluid>
         <Message info>
           <StakeRankSelector {...props} />
@@ -180,6 +173,7 @@ export function SelectTwoMinimumStakes () {
 
   // List of the minimum stake required to beat each rank
   const slots: Balance[] = [];
+
   for (let i = 0; i < 20; i++) {
     slots.push(new u128((i * 100) + 10 + i + 1));
   }
@@ -202,7 +196,7 @@ export function SelectTwoMinimumStakes () {
   };
 
   return (
-    <Container className="apply-flow">
+    <Container className='apply-flow'>
       <Card fluid>
         <Card.Content>
           <ConfirmStakes2Up {...props} />
@@ -392,11 +386,13 @@ export function StageAConfirmStakes () {
 
   // List of the minimum stake required to beat each rank
   const slots: Balance[] = [];
+
   for (let i = 0; i < 20; i++) {
     slots.push(new u128((i * 100) + 10 + i + 1));
   }
 
   const renders = [];
+
   permutations.map((permutation, key) => {
     const [applicationStake, setApplicationStake] = useState(new u128(0));
     const [roleStake, setRoleStake] = useState<Balance>(new u128(0));
@@ -411,7 +407,7 @@ export function StageAConfirmStakes () {
 
     renders.push(
       (
-        <Container className="outer" key={key}>
+        <Container className='outer' key={key}>
           <h4>{key}. {permutation._description}</h4>
           <Card fluid>
             <ConfirmStakesStage {...permutation}
@@ -436,7 +432,7 @@ export function StageAConfirmStakes () {
   });
 
   return (
-    <Container className="apply-flow">
+    <Container className='apply-flow'>
       {renders.map((render, key) => (
         <div key={key}>{render}</div>
       ))}
@@ -484,7 +480,7 @@ export function StageBApplicationDetails () {
   };
 
   return (
-    <Container className="apply-flow">
+    <Container className='apply-flow'>
       <Card fluid>
         <Card.Content>
           <ApplicationDetailsStage {...props} />
@@ -526,7 +522,7 @@ export function StageCSubmitApplication () {
   };
 
   return (
-    <Container className="apply-flow">
+    <Container className='apply-flow'>
       <Card fluid>
         <Card.Content>
           <SubmitApplicationStage {...props} />
@@ -543,7 +539,7 @@ export function StageDDone () {
   };
 
   return (
-    <Container className="apply-flow">
+    <Container className='apply-flow'>
       <Card fluid>
         <DoneStage {...props} />
       </Card>
diff --git a/pioneer/packages/joy-roles/src/flows/apply.stories.tsx b/pioneer/packages/joy-roles/src/flows/apply.stories.FIXME.tsx
similarity index 95%
rename from pioneer/packages/joy-roles/src/flows/apply.stories.tsx
rename to pioneer/packages/joy-roles/src/flows/apply.stories.FIXME.tsx
index 16c8d5d303..d12e128468 100644
--- a/pioneer/packages/joy-roles/src/flows/apply.stories.tsx
+++ b/pioneer/packages/joy-roles/src/flows/apply.stories.FIXME.tsx
@@ -9,10 +9,8 @@ import { u128, GenericAccountId } from '@polkadot/types';
 import { Balance } from '@polkadot/types/interfaces';
 
 import { FlowModal } from './apply';
-import {
-  ApplicationStakeRequirement, RoleStakeRequirement,
-  StakeType
-} from '../StakeRequirement';
+import { ApplicationStakeRequirement, RoleStakeRequirement,
+  StakeType } from '../StakeRequirement';
 
 import 'semantic-ui-css/semantic.min.css';
 import '@polkadot/joy-roles/index.sass';
@@ -50,9 +48,11 @@ function mockPromise<T = any> (): () => Promise<T> {
 export const ApplicationSandbox = () => {
   // List of the minimum stake required to beat each rank
   const slots: Balance[] = [];
+
   for (let i = 0; i < 20; i++) {
     slots.push(new u128((i * 100) + 10 + i + 1));
   }
+
   const props = {
     role: {
       version: 1,
@@ -112,7 +112,11 @@ export const ApplicationSandbox = () => {
       ),
       defactoMinimumStake: new u128(0)
     },
-    creator: creator,
+    creator: {
+      membership: {
+        handle: text('Creator handle', 'ben', 'Role')
+      }
+    },
     transactionFee: new u128(number('Transaction fee', 499, moneySliderOptions, 'Application Tx')),
     keypairs: [
       {
diff --git a/pioneer/packages/joy-roles/src/flows/apply.tsx b/pioneer/packages/joy-roles/src/flows/apply.tsx
index 4d59aa96ed..28f12af807 100644
--- a/pioneer/packages/joy-roles/src/flows/apply.tsx
+++ b/pioneer/packages/joy-roles/src/flows/apply.tsx
@@ -3,15 +3,10 @@ import { useHistory, Link } from 'react-router-dom';
 
 import { formatBalance } from '@polkadot/util';
 import { Balance } from '@polkadot/types/interfaces';
-import {
-  GenericAccountId,
-  u128
-} from '@polkadot/types';
 
-import { useMyAccount } from '@polkadot/joy-utils/MyAccountContext';
+import { useMyAccount } from '@polkadot/joy-utils/react/hooks';
 
-import {
-  Accordion,
+import { Accordion,
   Button,
   Container,
   Form,
@@ -24,28 +19,27 @@ import {
   Segment,
   SemanticICONS,
   Step,
-  Table
-} from 'semantic-ui-react';
+  Table,
+  InputOnChangeData,
+  TextAreaProps } from 'semantic-ui-react';
 
 import Identicon from '@polkadot/react-identicon';
-import AccountId from '@polkadot/types/primitive/Generic/AccountId';
+import AccountId from '@polkadot/types/generic/AccountId';
 
-import {
-  GenericJoyStreamRoleSchema,
+import { GenericJoyStreamRoleSchema,
   ApplicationDetails,
   QuestionField,
-  QuestionSection
-} from '@joystream/types/hiring/schemas/role.schema.typings';
+  QuestionSection } from '@joystream/types/hiring/schemas/role.schema.typings';
 
-import {
-  OpeningBodyApplicationsStatus, OpeningStakeAndApplicationStatus,
+import { OpeningBodyApplicationsStatus, OpeningStakeAndApplicationStatus,
   ApplicationCount,
-  StakeRequirementProps
-} from '../tabs/Opportunities';
+  StakeRequirementProps } from '../tabs/Opportunities';
 import { IStakeRequirement } from '../StakeRequirement';
 
-import { Loadable } from '@polkadot/joy-utils/index';
+import { Loadable } from '@polkadot/joy-utils/react/hocs';
 import { Add } from '../balances';
+import { createType } from '@joystream/types';
+import { ApplicationDetailsData, ApplicationQuestionAnswers } from '@polkadot/joy-utils/types/workingGroups';
 
 type accordionProps = {
   title: string;
@@ -53,6 +47,7 @@ type accordionProps = {
 
 function ModalAccordion (props: React.PropsWithChildren<accordionProps>) {
   const [open, setOpen] = useState(false);
+
   return (
     <Accordion>
       <Accordion.Title index={0} active={open} onClick={() => { setOpen(!open); }} >
@@ -64,7 +59,16 @@ function ModalAccordion (props: React.PropsWithChildren<accordionProps>) {
   );
 }
 
-function KeyPair ({ address, className, style, isUppercase, name, balance }: any): any {
+type KeyPairProps = {
+  address: string;
+  className?: string;
+  style?: React.CSSProperties;
+  isUppercase: boolean;
+  name: string;
+  balance: Balance;
+}
+
+function KeyPair ({ address, className, style, isUppercase, name, balance }: KeyPairProps) {
   return (
     <div
       className={['keypair', className].join(' ')}
@@ -92,6 +96,7 @@ export type keyPairDetails = {
 
 export type FundSourceSelectorProps = {
   keypairs: keyPairDetails[];
+  selected?: AccountId;
   totalStake?: Balance;
 }
 
@@ -105,7 +110,7 @@ export function FundSourceSelector (props: FundSourceSelectorProps & FundSourceC
 
   const onChangeDropdown = (e: any, { value }: any) => {
     if (typeof props.addressCallback !== 'undefined') {
-      props.addressCallback(new GenericAccountId(value));
+      props.addressCallback(createType('AccountId', value));
     }
   };
 
@@ -115,7 +120,7 @@ export function FundSourceSelector (props: FundSourceSelectorProps & FundSourceC
     }
   };
 
-  props.keypairs.map((v) => {
+  props.keypairs.forEach((v) => {
     if (props.totalStake && v.balance.lt(props.totalStake)) {
       return;
     }
@@ -134,20 +139,14 @@ export function FundSourceSelector (props: FundSourceSelectorProps & FundSourceC
     });
   });
 
-  useEffect(() => {
-    if (pairs.length > 0 && typeof props.addressCallback !== 'undefined') {
-      props.addressCallback(new GenericAccountId(pairs[0].accountId));
-    }
-  }, []);
-
-  const accCtx = useMyAccount();
   let passphraseCallback = null;
+
   if (props.passphraseCallback) {
     passphraseCallback = (
       <Form.Field>
         <label>Unlock key with passphrase</label>
         <Input placeholder='Passphrase'
-          type="password"
+          type='password'
           onChange={onChangeInput}
         />
       </Form.Field>
@@ -155,7 +154,7 @@ export function FundSourceSelector (props: FundSourceSelectorProps & FundSourceC
   }
 
   return (
-    <Form className="fund-source-selector">
+    <Form className='fund-source-selector'>
       <Form.Field>
         <label>Select source of funds</label>
         <Form.Dropdown
@@ -164,7 +163,7 @@ export function FundSourceSelector (props: FundSourceSelectorProps & FundSourceC
           selection
           options={pairs}
           onChange={onChangeDropdown}
-          defaultValue={accCtx.state.inited ? accCtx.state.address : undefined}
+          value={props.selected && props.selected.toString()}
         />
       </Form.Field>
       {passphraseCallback}
@@ -182,6 +181,7 @@ function rankIcon (estimatedSlot: number, slots: number): SemanticICONS {
   } else if (estimatedSlot <= slots) { // Places 67-100 if slotsCount == 100
     return 'thermometer quarter';
   }
+
   return 'thermometer empty'; // Places >100 for slotsCount == 100
 }
 
@@ -203,27 +203,31 @@ export function StakeRankSelector (props: StakeRankSelectorProps) {
   const stakeSufficient = props.stake.gte(minStake);
 
   const ticks = [];
+
   for (let i = 0; i < slotCount; i++) {
-    ticks.push(<div key={i} className="tick" style={{ width: (100 / slotCount) + '%' }}>{slotCount - i}</div>);
+    ticks.push(<div key={i} className='tick' style={{ width: `${(100 / slotCount)}%` }}>{slotCount - i}</div>);
   }
 
   let estimatedSlot = slotCount + 1;
-  props.slots.forEach(slotStake => props.stake.gt(slotStake.sub(props.otherStake)) && --estimatedSlot);
+
+  props.slots.forEach((slotStake) => props.stake.gt(slotStake.sub(props.otherStake)) && --estimatedSlot);
 
   const changeValue = (e: any, { value }: any) => {
-    const newStake = new u128(value);
+    const newStake = createType('Balance', value);
+
     props.setStake(newStake);
   };
 
   const slider = null;
+
   return (
-    <Container className="stake-rank-selector">
+    <Container className='stake-rank-selector'>
       <h4>Choose a stake</h4>
-      <Container className="controls">
-        <Input label="JOY"
-          labelPosition="right"
+      <Container className='controls'>
+        <Input label='JOY'
+          labelPosition='right'
           onChange={changeValue}
-          type="number"
+          type='number'
           step={slotCount > 1 ? props.step.toNumber() : 1}
           value={props.stake.toNumber() > 0 ? props.stake.toNumber() : 0}
           min={minStake}
@@ -237,14 +241,14 @@ export function StakeRankSelector (props: StakeRankSelectorProps) {
           </Label>
         ) }
         <Label size='large' color={stakeSufficient ? 'green' : 'red'}>
-          <Icon name="shield" />
+          <Icon name='shield' />
           Your stake
           <Label.Detail>{formatBalance(props.stake)}</Label.Detail>
         </Label>
       </Container>
       {slider}
       { !stakeSufficient && (
-        <Label color="red">Currently you need to stake at least {formatBalance(minStake)} to be considered for this position!</Label>
+        <Label color='red'>Currently you need to stake at least {formatBalance(minStake)} to be considered for this position!</Label>
       ) }
     </Container>
   );
@@ -304,6 +308,7 @@ export function ProgressStepsView (props: ProgressStepsProps) {
       display: true
     }
   ];
+
   return (
     <Step.Group stackable='tablet'>
       {steps.map((step, key) => (
@@ -331,7 +336,7 @@ type CTAProps = {
 
 function CTA (props: CTAProps) {
   return (
-    <Container className="cta">
+    <Container className='cta'>
       <Button
         content={props.negativeLabel}
         icon={props.negativeIcon}
@@ -357,6 +362,7 @@ function stakeCount (props: StakeRequirementProps): number {
 
 function zeroOrTwoStakes (props: StakeRequirementProps): boolean {
   const count = stakeCount(props);
+
   return (count === 0 || count === 2);
 }
 
@@ -398,7 +404,7 @@ export function ConfirmStakesStage (props: ConfirmStakesStageProps & StageTransi
   };
 
   return (
-    <Container className="content">
+    <Container className='content'>
       <ConfirmStakes {...props} />
       <CTA
         negativeLabel='Cancel'
@@ -424,11 +430,12 @@ function ConfirmStakes (props: StakeSelectorProps) {
 
 function ConfirmStakes1Up (props: StakeSelectorProps) {
   let applicationStake = null;
+
   if (props.applications.requiredApplicationStake.anyRequirement()) {
     applicationStake = <CaptureStake1Up
-      name="application stake"
-      stakeReturnPolicy="after the opening is resolved or your application ends"
-      colour="yellow"
+      name='application stake'
+      stakeReturnPolicy='after the opening is resolved or your application ends'
+      colour='yellow'
       requirement={props.applications.requiredApplicationStake}
       value={props.selectedApplicationStake}
       setValue={props.setSelectedApplicationStake}
@@ -440,11 +447,12 @@ function ConfirmStakes1Up (props: StakeSelectorProps) {
   }
 
   let roleStake = null;
+
   if (props.applications.requiredRoleStake.anyRequirement()) {
     roleStake = <CaptureStake1Up
-      name="role stake"
-      stakeReturnPolicy="after the opening is resolved or your application ends"
-      colour="red"
+      name='role stake'
+      stakeReturnPolicy='after the opening is resolved or your application ends'
+      colour='red'
       requirement={props.applications.requiredRoleStake}
       value={props.selectedRoleStake}
       setValue={props.setSelectedRoleStake}
@@ -456,7 +464,7 @@ function ConfirmStakes1Up (props: StakeSelectorProps) {
   }
 
   return (
-    <Container className="stakes 1-up">
+    <Container className='stakes 1-up'>
       {applicationStake}
       {roleStake}
     </Container>
@@ -483,24 +491,27 @@ export function ConfirmStakes2Up (props: ConfirmStakes2UpProps) {
   const valid = combined.gte(minStake);
 
   let estimatedSlot = slotCount + 1;
-  props.slots.forEach(slotStake => combined.gt(slotStake) && --estimatedSlot);
+
+  props.slots.forEach((slotStake) => combined.gt(slotStake) && --estimatedSlot);
 
   const ticks = [];
+
   for (let i = 0; i < slotCount; i++) {
-    ticks.push(<div key={i} className="tick" style={{ width: (100 / slotCount) + '%' }}>{i + 1}</div>);
+    ticks.push(<div key={i} className='tick' style={{ width: `${(100 / slotCount)}%` }}>{i + 1}</div>);
   }
 
-  const tickLabel = <div className="ui pointing below label" style={{ left: ((100 / slotCount) * (estimatedSlot - 1)) + '%' }}>
+  const tickLabel = <div className='ui pointing below label' style={{ left: `${((100 / slotCount) * (estimatedSlot - 1))}%` }}>
     Your rank
-    <div className="detail">{estimatedSlot}/{props.applications.maxNumberOfApplications}</div>
+    <div className='detail'>{estimatedSlot}/{props.applications.maxNumberOfApplications}</div>
   </div>;
 
   let tickContainer = null;
+
   if (slotCount > 3) {
     tickContainer = (
-      <div className="ticks">
+      <div className='ticks'>
         {tickLabel}
-        <div className="scale">
+        <div className='scale'>
           {ticks}
         </div>
       </div>
@@ -508,6 +519,7 @@ export function ConfirmStakes2Up (props: ConfirmStakes2UpProps) {
   }
 
   let defactoMinStakeMessage = null;
+
   if (props.applications.numberOfApplications >= props.applications.maxNumberOfApplications) {
     defactoMinStakeMessage = (
       <span>However, in order to be in the top {props.applications.maxNumberOfApplications} applications, you wil need to stake a combined total of more than <strong>{formatBalance(minStake)}</strong>.</span>
@@ -515,6 +527,7 @@ export function ConfirmStakes2Up (props: ConfirmStakes2UpProps) {
   }
 
   let rankExplanation = <p>This role requires a combined stake (application stake plus role stake) of {formatBalance(minStake)}.</p>;
+
   if (props.applications.maxNumberOfApplications > 0) {
     rankExplanation = (
       <Container>
@@ -530,12 +543,12 @@ export function ConfirmStakes2Up (props: ConfirmStakes2UpProps) {
   }
 
   return (
-    <Container className="confirm-stakes-2up">
+    <Container className='confirm-stakes-2up'>
       <Message info>
-        <Message.Header><Icon name="shield" /> This role requires a minimum combined stake</Message.Header>
+        <Message.Header><Icon name='shield' /> This role requires a minimum combined stake</Message.Header>
         <Message.Content>
           {rankExplanation}
-          <Grid stackable className="two-up">
+          <Grid stackable className='two-up'>
             <Grid.Row columns={2}>
               <Grid.Column>
                 <h5>Application stake</h5>
@@ -575,7 +588,7 @@ export function ConfirmStakes2Up (props: ConfirmStakes2UpProps) {
               </Grid.Column>
             </Grid.Row>
             <Grid.Row columns={1}>
-              <Grid.Column className="center">
+              <Grid.Column className='center'>
                 <Label color='teal'>
                   <Icon name='shield' />
                   Minimum required stake
@@ -584,7 +597,7 @@ export function ConfirmStakes2Up (props: ConfirmStakes2UpProps) {
                 <Label color={valid ? 'green' : 'red'}>
                   <Icon name='times circle' />
                   Your current combined stake
-                  <Label.Detail>{formatBalance(new u128(props.selectedApplicationStake.add(props.selectedRoleStake)))}</Label.Detail>
+                  <Label.Detail>{formatBalance(props.selectedApplicationStake.add(props.selectedRoleStake))}</Label.Detail>
                 </Label>
                 { maxNumberOfApplications > 0 && (
                   <Label color='grey'>
@@ -613,19 +626,22 @@ type StakeRankMiniSelectorProps = {
 function StakeRankMiniSelector (props: StakeRankMiniSelectorProps) {
   const changeValue = (e: any, { value }: any) => {
     if (value < 0) {
-      props.setValue(new u128(0));
+      props.setValue(createType('Balance', 0));
+
       return;
     }
-    const newStake = new u128(value);
+
+    const newStake = createType('Balance', value);
+
     props.setValue(newStake);
   };
 
   return (
-    <Container className="controls">
-      <Input label="JOY" fluid
-        labelPosition="right"
+    <Container className='controls'>
+      <Input label='JOY' fluid
+        labelPosition='right'
         onChange={changeValue}
-        type="number"
+        type='number'
         min={props.min.toNumber()}
         step={props.step.toNumber()}
         value={props.value.toNumber() > 0 ? props.value.toNumber() : null}
@@ -655,11 +671,13 @@ type CaptureStake1UpProps = {
 // this context, so let's just go with it.
 function indefiniteArticle (noun: string): 'a' | 'an' {
   const startsWithVowel = /^([aeiou])/i;
+
   return startsWithVowel.test(noun) ? 'an' : 'a';
 }
 
 function CaptureStake1Up (props: CaptureStake1UpProps) {
   let limit = null;
+
   if (props.maxNumberOfApplications > 0) {
     limit = (
       <p>
@@ -671,6 +689,7 @@ function CaptureStake1Up (props: CaptureStake1UpProps) {
 
   let slider = null;
   let atLeast = null;
+
   if (props.requirement.atLeast()) {
     slider = <StakeRankSelector
       {...props}
@@ -682,7 +701,7 @@ function CaptureStake1Up (props: CaptureStake1UpProps) {
 
   return (
     <Message info={props.colour === 'yellow'} warning={props.colour === 'red'} className={props.name}>
-      <Message.Header><Icon name="shield" /> {props.name}</Message.Header>
+      <Message.Header><Icon name='shield' /> {props.name}</Message.Header>
       <Message.Content>
         <p>
           <span>This role requires {indefiniteArticle(props.name)} <strong>{props.name}</strong> of {atLeast}<strong>{formatBalance(props.requirement.value)}</strong>.</span>
@@ -701,51 +720,53 @@ function questionHash (section: QuestionSection, question: QuestionField): strin
   return section.title + '|' + question.title;
 }
 
-interface FinalDataMap {
-  [k: string]: FinalDataMap;
-}
+interface AnswersByHash { [hash: string]: string; }
+
+function applicationDetailsDataToAnswersByHash (input: ApplicationDetails, data: ApplicationDetailsData): AnswersByHash {
+  const output: AnswersByHash = {};
 
-function applicationDetailsToObject (input: ApplicationDetails, data: FinalDataMap): any {
-  const output: any = {};
   if (!input.sections) {
     return {};
   }
+
   input.sections.map((section) => {
     section.questions.map((question) => {
-      let value: any = '';
-      if (data[section.title] && data[section.title][question.title]) {
-        value = data[section.title][question.title];
-      }
-      output[questionHash(section, question)] = value;
+      const sectionAnswers = data[section.title];
+      const answer = (sectionAnswers && sectionAnswers[question.title]) || '';
+
+      output[questionHash(section, question)] = answer;
     });
   });
+
   return output;
 }
 
-interface QuestionDataMap {
-  [k: string]: any;
-}
+function answersByHashToApplicationDetailsData (input: ApplicationDetails, data: AnswersByHash): ApplicationDetailsData {
+  const output: ApplicationDetailsData = {};
 
-function applicationDetailsToDataObject (input: ApplicationDetails, data: QuestionDataMap): any {
-  const output: any = {};
   if (!input.sections) {
     return {};
   }
+
   input.sections.map((section) => {
-    output[section.title] = {};
+    const sectionAnswers: ApplicationQuestionAnswers = {};
+
     section.questions.map((question) => {
       const hash = questionHash(section, question);
-      output[section.title][question.title] = data[hash];
+
+      sectionAnswers[question.title] = data[hash];
     });
+    output[section.title] = sectionAnswers;
   });
+
   return output;
 }
 
-function questionReducer (state: any, action: any) {
+function answersReducer (state: AnswersByHash, action: { key: string, value: string }) {
   return { ...state, [action.key]: action.value };
 }
 
-function questionFieldValueIsValid (question: QuestionField, value: any): boolean {
+function questionFieldValueIsValid (question: QuestionField, value: string): boolean {
   switch (question.type) {
     case 'text':
     case 'text area':
@@ -757,42 +778,42 @@ function questionFieldValueIsValid (question: QuestionField, value: any): boolea
 
 export type ApplicationDetailsStageProps = {
   applicationDetails: ApplicationDetails;
-  data: object;
-  setData: (o: object) => void;
+  data: ApplicationDetailsData;
+  setData: (o: ApplicationDetailsData) => void;
 }
 
 export function ApplicationDetailsStage (props: ApplicationDetailsStageProps & StageTransitionProps) {
-  const initialForm = applicationDetailsToObject(props.applicationDetails, props.data as FinalDataMap);
+  const initialForm = applicationDetailsDataToAnswersByHash(props.applicationDetails, props.data);
 
-  const [data, setData] = useReducer(questionReducer, initialForm);
+  const [answers, updateAnswers] = useReducer(answersReducer, initialForm);
   const [completed, setCompleted] = useState(false);
   const [valid, setValid] = useState(false);
 
-  const handleChange = (e: any, { name, value }: any) => {
+  const handleChange = (e: any, { name, value }: InputOnChangeData | TextAreaProps) => {
     setCompleted(false);
-    setData({ key: name, value: value });
+    updateAnswers({ key: name as string, value: value?.toString() || '' });
   };
 
-  const questionField = (section: QuestionSection, question: QuestionField, key: any) => {
+  const questionField = (section: QuestionSection, question: QuestionField) => {
     switch (question.type) {
       case 'text':
-        return <Form.Input value={data[questionHash(section, question)]}
+        return <Form.Input value={answers[questionHash(section, question)]}
           name={questionHash(section, question)}
           label={question.title}
           onChange={handleChange}
           required
-          error={completed && !questionFieldValueIsValid(question, data[questionHash(section, question)])}
-          key={key}
+          error={completed && !questionFieldValueIsValid(question, answers[questionHash(section, question)])}
+          key={questionHash(section, question)}
         />;
 
       case 'text area':
-        return <Form.TextArea value={data[questionHash(section, question)]}
+        return <Form.TextArea value={answers[questionHash(section, question)]}
           name={questionHash(section, question)}
           label={question.title}
           onChange={handleChange}
           required
-          error={completed && !questionFieldValueIsValid(question, data[questionHash(section, question)])}
-          key={key}
+          error={completed && !questionFieldValueIsValid(question, answers[questionHash(section, question)])}
+          key={questionHash(section, question)}
         />;
     }
 
@@ -808,7 +829,7 @@ export function ApplicationDetailsStage (props: ApplicationDetailsStageProps & S
 
     props.applicationDetails.sections.map((section) => {
       section.questions.map((question) => {
-        if (!questionFieldValueIsValid(question, data[questionHash(section, question)])) {
+        if (!questionFieldValueIsValid(question, answers[questionHash(section, question)])) {
           valid = false;
         }
       });
@@ -819,13 +840,13 @@ export function ApplicationDetailsStage (props: ApplicationDetailsStageProps & S
 
   useEffect(() => {
     setValid(isFormValid());
-  }, [data]);
+  }, [answers]);
 
   useEffect(() => {
     if (completed === true && valid === true) {
       props.nextTransition();
     }
-  }, [completed]);
+  }, [completed, valid]);
 
   const onSubmit = (): void => {
     setCompleted(true);
@@ -834,22 +855,22 @@ export function ApplicationDetailsStage (props: ApplicationDetailsStageProps & S
       return;
     }
 
-    props.setData(applicationDetailsToDataObject(props.applicationDetails, data));
+    props.setData(answersByHashToApplicationDetailsData(props.applicationDetails, answers));
   };
 
   const onCancel = () => {
-    props.setData(applicationDetailsToDataObject(props.applicationDetails, data));
+    props.setData(answersByHashToApplicationDetailsData(props.applicationDetails, answers));
     props.prevTransition();
   };
 
   return (
-    <Container className="content application-questions">
+    <Container className='content application-questions'>
       <Form error={completed && !valid}>
         {props.applicationDetails && props.applicationDetails.sections && props.applicationDetails.sections.map((section, key) => (
-          <Segment padded className="section" key={key}>
+          <Segment padded className='section' key={key}>
             <h4><Label attached='top'>{section.title}</Label></h4>
-            {section.questions.map((question, key) =>
-              questionField(section, question, key)
+            {section.questions.map((question) =>
+              questionField(section, question)
             )}
           </Segment>
         ))}
@@ -887,14 +908,16 @@ export const SubmitApplicationStage = (props: SubmitApplicationStageProps) => {
     }
 
     const idx = props.keypairs.findIndex((a: keyPairDetails) => a.accountId.eq(props.keyAddress));
+
     if (idx === -1) {
       return false;
     }
+
     return props.keypairs[idx].balance.gte(props.totalStake);
   };
 
   return (
-    <Container className="content">
+    <Container className='content'>
       <p>
         You need to make a transaction to apply for this role.
       </p>
@@ -902,7 +925,7 @@ export const SubmitApplicationStage = (props: SubmitApplicationStageProps) => {
         Before the transaction, a new account key, called a <em>role key</em>, will be generated and downloaded automatically.
         You will need this role key to perform any duties in the role, so be sure to keep a backup.
       </p>
-      <ModalAccordion title="Transaction details">
+      <ModalAccordion title='Transaction details'>
         <Table basic='very'>
           <Table.Body>
             {[...props.transactionDetails].map((v, k) => (
@@ -919,6 +942,7 @@ export const SubmitApplicationStage = (props: SubmitApplicationStageProps) => {
         <Label attached='top'>Source of funds</Label>
         <p>Please select the account that will be used as the source of funds.</p>
         <FundSourceSelector {...props}
+          selected={props.keyAddress}
           addressCallback={props.setKeyAddress}
         />
       </Segment>
@@ -942,7 +966,7 @@ export type DoneStageProps = {
 
 export function DoneStage (props: DoneStageProps) {
   return (
-    <Container className="content">
+    <Container className='content'>
       <h4>Application submitted!</h4>
       <p>
         Your application is <strong>#<ApplicationCount {...props.applications} applied={true} /></strong>.
@@ -950,8 +974,8 @@ export function DoneStage (props: DoneStageProps) {
       </p>
       <p>
         You can track the progress of your
-        application in the <Link to="#working-group/my-roles">My roles and applications</Link> section. Note that your application is attached
-        to your role key (see below).  If you have any issues, you can message the group lead in in the <Link to="#forum">Forum</Link> or contact them directly.
+        application in the <Link to='#working-group/my-roles'>My roles and applications</Link> section. Note that your application is attached
+        to your role key (see below).  If you have any issues, you can message the group lead in in the <Link to='#forum'>Forum</Link> or contact them directly.
       </p>
 
       <h4>Your new role key</h4>
@@ -961,7 +985,7 @@ export function DoneStage (props: DoneStageProps) {
       <p>
         {'We\'ve generated a new role key, '}<strong>{props.roleKeyName}</strong>, automatically.
         A copy of the backup file should have been downloaded, or you can
-        get a backup from the <Link to="/accounts">My account</Link> section.
+        get a backup from the <Link to='/accounts'>My account</Link> section.
       </p>
       <p>
         You can also switch your role key using the Accounts selector in the top right of the screen. It works like
@@ -977,7 +1001,7 @@ export function DoneStage (props: DoneStageProps) {
         <Icon name='unlock' />
         <strong>
           This role key has been generated with no password!
-          We strongly recommend that you set a password for it in the <Link to="/accounts">My account</Link> section.
+          We strongly recommend that you set a password for it in the <Link to='/accounts'>My account</Link> section.
         </strong>
       </Message>
     </Container>
@@ -1003,8 +1027,8 @@ export type FlowModalProps = Pick<StakeRankSelectorProps, 'slots' | 'step'> & Fu
   setApplicationStake: (b: Balance) => void;
   roleStake: Balance;
   setRoleStake: (b: Balance) => void;
-  appDetails: any;
-  setAppDetails: (v: any) => void;
+  appDetails: ApplicationDetailsData;
+  setAppDetails: (v: ApplicationDetailsData) => void;
   txKeyAddress: AccountId;
   setTxKeyAddress: (v: AccountId) => void;
   activeStep: ProgressSteps;
@@ -1022,7 +1046,7 @@ export const FlowModal = Loadable<FlowModalProps>(
     'keypairs',
     'slots'
   ],
-  props => {
+  (props) => {
     const {
       applicationStake, setApplicationStake,
       roleStake, setRoleStake,
@@ -1033,17 +1057,23 @@ export const FlowModal = Loadable<FlowModalProps>(
       complete, setComplete
     } = props;
 
-    const accCtx = useMyAccount();
-    if (txKeyAddress.isEmpty) {
-      setTxKeyAddress(new AccountId(accCtx.state.address));
-    }
+    const accContext = useMyAccount();
+
+    useEffect(() => {
+      if (txKeyAddress.isEmpty) {
+        setTxKeyAddress(createType('AccountId', accContext.state.address));
+      }
+    }, [txKeyAddress]);
 
     const history = useHistory();
+
     const cancel = () => {
       if (history.length > 1) {
         history.goBack();
+
         return;
       }
+
       history.push('/working-groups/');
     };
 
@@ -1095,63 +1125,59 @@ export const FlowModal = Loadable<FlowModalProps>(
       setSelectedRoleStake: setRoleStake
     };
 
-    const stages: { [k in ProgressSteps]: JSX.Element } = {
-      [ProgressSteps.ConfirmStakes]: (<ConfirmStakesStage
-        {...props}
-        nextTransition={enterApplicationDetailsState}
-        prevTransition={cancel}
-        {...setStakeProps}
-      />),
-
-      [ProgressSteps.ApplicationDetails]: (<ApplicationDetailsStage
-        setData={setAppDetails}
-        data={appDetails}
-        applicationDetails={props.role.application}
-        nextTransition={enterSubmitApplicationState}
-        prevTransition={() => { props.hasConfirmStep ? enterConfirmStakeState() : cancel(); }}
-      />),
-
-      [ProgressSteps.SubmitApplication]: (<SubmitApplicationStage
-        {...props}
-        nextTransition={enterDoneState}
-        prevTransition={enterApplicationDetailsState}
-        keyAddress={txKeyAddress}
-        setKeyAddress={setTxKeyAddress}
-        transactionDetails={props.transactionDetails}
-        totalStake={Add(applicationStake, roleStake)}
-      />),
-
-      [ProgressSteps.Done]: (<DoneStage {...props} roleKeyName={props.roleKeyName} />)
-    };
-
     const cancelText = complete ? 'Close' : 'Cancel application';
 
     return (
-      <Container className="apply-flow">
-        <div className="dimmer"></div>
-        <Container className="content">
-          <Grid columns="equal">
-            <Grid.Column width={11} className="title">
+      <Container className='apply-flow'>
+        <div className='dimmer'></div>
+        <Container className='content'>
+          <Grid columns='equal'>
+            <Grid.Column width={11} className='title'>
               <Label as='h1' color='green' size='huge' ribbon>
                 <Icon name='heart' />
                 Applying for
                 <Label.Detail>{props.role.job.title}</Label.Detail>
               </Label>
             </Grid.Column>
-            <Grid.Column width={5} className="cancel">
+            <Grid.Column width={5} className='cancel'>
               <a onClick={() => cancel()}>
                 <Icon name='cancel' /> {cancelText}
               </a>
             </Grid.Column>
           </Grid>
-          <Grid columns="equal">
-            <Grid.Column width={11} className="main">
+          <Grid columns='equal'>
+            <Grid.Column width={11} className='main'>
               <ProgressStepsView activeStep={activeStep} hasConfirmStep={props.hasConfirmStep} />
-              {stages[activeStep]}
+              { activeStep === ProgressSteps.ConfirmStakes && (<ConfirmStakesStage
+                {...props}
+                nextTransition={enterApplicationDetailsState}
+                prevTransition={cancel}
+                {...setStakeProps}
+              />
+              ) }
+              { activeStep === ProgressSteps.ApplicationDetails && (<ApplicationDetailsStage
+                setData={setAppDetails}
+                data={appDetails}
+                applicationDetails={props.role.application}
+                nextTransition={enterSubmitApplicationState}
+                prevTransition={() => { props.hasConfirmStep ? enterConfirmStakeState() : cancel(); }}
+              />
+              ) }
+              { activeStep === ProgressSteps.SubmitApplication && (<SubmitApplicationStage
+                {...props}
+                nextTransition={enterDoneState}
+                prevTransition={enterApplicationDetailsState}
+                keyAddress={txKeyAddress}
+                setKeyAddress={setTxKeyAddress}
+                transactionDetails={props.transactionDetails}
+                totalStake={Add(applicationStake, roleStake)}
+              />
+              ) }
+              { activeStep === ProgressSteps.Done && (<DoneStage {...props} roleKeyName={props.roleKeyName} />) }
             </Grid.Column>
-            <Grid.Column width={5} className="summary">
+            <Grid.Column width={5} className='summary'>
               <Header as='h3'>{props.role.headline}</Header>
-              <Label as='h1' size='large' ribbon='right' className="fluid standout">
+              <Label as='h1' size='large' ribbon='right' className='fluid standout'>
                 Reward
                 <Label.Detail>{props.role.reward}</Label.Detail>
               </Label>
@@ -1160,8 +1186,8 @@ export const FlowModal = Loadable<FlowModalProps>(
           </Grid>
         </Container>
         {txInProgress &&
-          <div className="loading">
-            <div className="spinner"></div>
+          <div className='loading'>
+            <div className='spinner'></div>
           </div>
         }
       </Container>
diff --git a/pioneer/packages/joy-roles/src/index.tsx b/pioneer/packages/joy-roles/src/index.tsx
index aeabe4a4df..e231d2d5eb 100644
--- a/pioneer/packages/joy-roles/src/index.tsx
+++ b/pioneer/packages/joy-roles/src/index.tsx
@@ -8,9 +8,7 @@ import { Route, Switch, RouteComponentProps } from 'react-router';
 import Tabs from '@polkadot/react-components/Tabs';
 import { withMulti } from '@polkadot/react-api/index';
 import QueueContext from '@polkadot/react-components/Status/Context';
-import { withMyAccount, MyAccountProps } from '@polkadot/joy-utils/MyAccount';
-
-import { ViewComponent } from '@polkadot/joy-utils/index';
+import { withMyAccount, MyAccountProps } from '@polkadot/joy-utils/react/hocs/accounts';
 
 import { Transport } from './transport.substrate';
 
@@ -25,17 +23,10 @@ import './index.sass';
 
 import translate from './translate';
 
-const renderViewComponent = (Component: ViewComponent<any>, props?: RouteComponentProps) => {
-  let params = new Map<string, string>();
-  if (props && props.match.params) {
-    params = new Map<string, string>(Object.entries(props.match.params));
-  }
-
-  return <Component params={params} />;
-};
-
 type Props = AppProps & ApiProps & I18nProps & MyAccountProps
 
+type DefaultRouteProps = RouteComponentProps<Record<string, string | undefined>>;
+
 export const App: React.FC<Props> = (props: Props) => {
   const { t } = props;
   const tabs: Array<any> = [
@@ -53,20 +44,26 @@ export const App: React.FC<Props> = (props: Props) => {
 
   const { api } = useContext(ApiContext);
   const { queueExtrinsic } = useContext(QueueContext);
-  const transport = new Transport(api, queueExtrinsic);
+  const [transport] = useState(() => new Transport(api, queueExtrinsic));
 
-  const [wgCtrl] = useState(new WorkingGroupsController(transport));
-  const oppCtrl = new OpportunityController(transport, props.myMemberId);
-  const oppsCtrl = new OpportunitiesController(transport, props.myMemberId);
-  const [applyCtrl] = useState(new ApplyController(transport));
-  const myRolesCtrl = new MyRolesController(transport, props.myAddress);
-  const [adminCtrl] = useState(new AdminController(transport, api, queueExtrinsic));
+  const [wgCtrl] = useState(() => new WorkingGroupsController(transport));
+  const [oppCtrl] = useState(() => new OpportunityController(transport));
+  const [oppsCtrl] = useState(() => new OpportunitiesController(transport));
+  const [applyCtrl] = useState(() => new ApplyController(transport));
+  const [myRolesCtrl] = useState(() => new MyRolesController(transport));
+  const [adminCtrl] = useState(() => new AdminController(transport, api, queueExtrinsic));
 
   useEffect(() => {
     return () => {
       transport.unsubscribe();
     };
-  });
+  }, []);
+
+  useEffect(() => {
+    oppCtrl.setMemberId(props.myMemberId);
+    oppsCtrl.setMemberId(props.myMemberId);
+    myRolesCtrl.setMyAddress(props.myAddress);
+  }, [props.myMemberId, props.myAddress]);
 
   const { basePath } = props;
 
@@ -86,13 +83,26 @@ export const App: React.FC<Props> = (props: Props) => {
         />
       </header>
       <Switch>
-        <Route path={`${basePath}/opportunities/:group/:id([0-9]+)/apply`} render={(props) => renderViewComponent(ApplyView(applyCtrl), props)} />
-        <Route path={`${basePath}/opportunities/:group/:id([0-9]+)`} render={(props) => renderViewComponent(OpportunityView(oppCtrl), props)} />
-        <Route path={`${basePath}/opportunities/:group/:lead(lead)?`} render={(props) => renderViewComponent(OpportunitiesView(oppsCtrl), props)} />
-        <Route path={`${basePath}/opportunities`} render={() => renderViewComponent(OpportunitiesView(oppsCtrl))} />
-        <Route path={`${basePath}/my-roles`} render={() => renderViewComponent(MyRolesView(myRolesCtrl))} />
-        <Route path={`${basePath}/admin`} render={() => renderViewComponent(AdminView(adminCtrl))} />
-        <Route render={() => renderViewComponent(WorkingGroupsView(wgCtrl))} />
+        <Route
+          path={`${basePath}/opportunities/:group/:id([0-9]+)/apply`}
+          render={(props: DefaultRouteProps) => <ApplyView controller={applyCtrl} params={props.match.params}/>} />
+        <Route
+          path={`${basePath}/opportunities/:group/:id([0-9]+)`}
+          render={(props: DefaultRouteProps) => <OpportunityView controller={oppCtrl} params={props.match.params}/>} />
+        <Route
+          path={`${basePath}/opportunities/:group/:lead(lead)?`}
+          render={(props: DefaultRouteProps) => <OpportunitiesView controller={oppsCtrl} params={props.match.params}/>} />
+        <Route
+          path={`${basePath}/opportunities`}
+          render={(props: DefaultRouteProps) => <OpportunitiesView controller={oppsCtrl} params={props.match.params}/>} />
+        <Route
+          path={`${basePath}/my-roles`}
+          render={(props: DefaultRouteProps) => <MyRolesView controller={myRolesCtrl} params={props.match.params}/>} />
+        <Route
+          path={`${basePath}/admin`}
+          render={(props: DefaultRouteProps) => <AdminView controller={adminCtrl} params={props.match.params}/>} />
+        <Route
+          render={(props: DefaultRouteProps) => <WorkingGroupsView controller={wgCtrl} params={props.match.params}/> } />
       </Switch>
     </main>
   );
diff --git a/pioneer/packages/joy-roles/src/mocks.ts b/pioneer/packages/joy-roles/src/mocks.ts
index 1ec3ac28da..2c3ca70d1b 100644
--- a/pioneer/packages/joy-roles/src/mocks.ts
+++ b/pioneer/packages/joy-roles/src/mocks.ts
@@ -1,41 +1,22 @@
-import { bool, Option, Text, u32, u64, Vec } from '@polkadot/types';
-import AccountId from '@polkadot/types/primitive/Generic/AccountId';
+import { IMembership } from '@joystream/types/members';
 
-import { IMembership, EntryMethod } from '@joystream/types/members';
-
-import {
-  AcceptingApplications,
-  ActiveOpeningStage,
-  OpeningStage,
-  ActiveOpeningStageVariant,
-  ApplicationId
-} from '@joystream/types/hiring';
+import { createType } from '@joystream/types';
 
 export function mockProfile (name: string, avatar_uri = ''): IMembership {
-  return {
-    handle: new Text(name),
-    avatar_uri: new Text(avatar_uri),
-    about: new Text(''),
-    registered_at_block: new u32(0),
-    registered_at_time: new u64(0),
-    entry: new EntryMethod(),
-    suspended: new bool(false),
-    subscription: new Option(u64),
-    root_account: new AccountId('5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp'),
-    controller_account: new AccountId('5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp')
-  };
+  return createType('Membership', {
+    handle: name,
+    avatar_uri: avatar_uri,
+    root_account: '5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp',
+    controller_account: '5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp'
+  });
 }
 
-export const mockStage = new OpeningStage({
-  Active: new ActiveOpeningStageVariant({
-    applications_added: new (Vec.with(ApplicationId))([]),
-    active_application_count: new u32(0),
-    unstaking_application_count: new u32(0),
-    deactivated_application_count: new u32(0),
-    stage: new ActiveOpeningStage({
-      AcceptingApplications: new AcceptingApplications({
-        started_accepting_applicants_at_block: new u32(100)
-      })
+export const mockStage = createType('OpeningStage', {
+  Active: {
+    stage: createType('ActiveOpeningStage', {
+      AcceptingApplications: {
+        started_accepting_applicants_at_block: 100
+      }
     })
-  })
+  }
 });
diff --git a/pioneer/packages/joy-roles/src/openingStateMarkup.tsx b/pioneer/packages/joy-roles/src/openingStateMarkup.tsx
index 9a2fb9912e..3136049179 100644
--- a/pioneer/packages/joy-roles/src/openingStateMarkup.tsx
+++ b/pioneer/packages/joy-roles/src/openingStateMarkup.tsx
@@ -10,56 +10,52 @@ export type headerMarkup = {
   iconSpin?: boolean;
 }
 
-export const stateMarkup = new Map<OpeningState, headerMarkup>([
-  [OpeningState.WaitingToBegin, {
+export const stateMarkup: Record<OpeningState, headerMarkup> = {
+  [OpeningState.WaitingToBegin]: {
     class: 'waiting-to-begin',
     description: 'Waiting to begin',
     icon: 'spinner',
     iconSpin: true
-  }],
-  [OpeningState.AcceptingApplications, {
+  },
+  [OpeningState.AcceptingApplications]: {
     class: 'active',
     description: 'Accepting applications',
     icon: 'heart'
-  }],
-  [OpeningState.InReview, {
+  },
+  [OpeningState.InReview]: {
     class: 'in-review',
     description: 'Applications in review',
     icon: 'hourglass half'
-  }],
-  [OpeningState.Complete, {
+  },
+  [OpeningState.Complete]: {
     class: 'complete',
     description: 'Hiring complete',
     icon: 'thumbs up'
-  }],
-  [OpeningState.Cancelled, {
+  },
+  [OpeningState.Cancelled]: {
     class: 'cancelled',
     description: 'Cancelled',
     icon: 'ban'
-  }]
-]);
-
-export function openingStateMarkup<T> (state: OpeningState, key: string): T {
-  const markup = stateMarkup.get(state);
-
-  if (typeof markup === 'undefined') {
-    return null as unknown as T;
   }
+};
+
+export function openingStateMarkup<K extends keyof headerMarkup> (state: OpeningState, key: K): headerMarkup[K] {
+  const markup = stateMarkup[state];
 
-  return (markup as any)[key];
+  return markup[key];
 }
 
 export function openingClass (state: OpeningState): string {
-  return 'status-' + openingStateMarkup<string>(state, 'class');
+  return `status-${openingStateMarkup(state, 'class') || ''}`;
 }
 
 export function openingDescription (state: OpeningState): string {
-  return openingStateMarkup<string>(state, 'description');
+  return openingStateMarkup(state, 'description') || '';
 }
 
 export function openingIcon (state: OpeningState) {
-  const icon = openingStateMarkup<SemanticICONS>(state, 'icon');
-  const spin = openingStateMarkup<boolean>(state, 'iconSpin');
+  const icon = openingStateMarkup(state, 'icon');
+  const spin = openingStateMarkup(state, 'iconSpin');
 
   return <Icon name={icon} loading={spin} />;
 }
diff --git a/pioneer/packages/joy-roles/src/tabs.stories.tsx b/pioneer/packages/joy-roles/src/tabs.stories.tsx
index 03c5640628..241c92c813 100644
--- a/pioneer/packages/joy-roles/src/tabs.stories.tsx
+++ b/pioneer/packages/joy-roles/src/tabs.stories.tsx
@@ -3,7 +3,7 @@ import { withKnobs } from '@storybook/addon-knobs';
 import { Container, Tab } from 'semantic-ui-react';
 import { ContentCuratorsSection } from './tabs/WorkingGroup.stories';
 import { OpportunitySandbox } from './tabs/Opportunities.stories';
-import { ApplicationSandbox } from './flows/apply.stories';
+// import { ApplicationSandbox } from './flows/apply.stories';
 import { MyRolesSandbox } from './tabs/MyRoles.stories';
 
 export default {
@@ -14,7 +14,7 @@ export default {
 export const RolesPage = () => {
   const tab = (
     <Container>
-      <Container className="outer">
+      <Container className='outer'>
         <ContentCuratorsSection />
       </Container>
     </Container>
@@ -38,4 +38,4 @@ export const RolesPage = () => {
   );
 };
 
-export const ApplicationLightbox = ApplicationSandbox;
+// export const ApplicationLightbox = ApplicationSandbox;
diff --git a/pioneer/packages/joy-roles/src/tabs/Admin.controller.tsx b/pioneer/packages/joy-roles/src/tabs/Admin.controller.tsx
index 5a5d40a5cd..10e7deeec9 100644
--- a/pioneer/packages/joy-roles/src/tabs/Admin.controller.tsx
+++ b/pioneer/packages/joy-roles/src/tabs/Admin.controller.tsx
@@ -3,16 +3,15 @@ import { Link } from 'react-router-dom';
 import { formatBalance } from '@polkadot/util';
 
 import { ApiPromise } from '@polkadot/api';
-import { GenericAccountId, Option, Text, Vec, u32, u128 } from '@polkadot/types';
+import { Option, Text, Vec } from '@polkadot/types';
 import { Balance } from '@polkadot/types/interfaces';
 
-import { SingleLinkedMapEntry, Controller, View } from '@polkadot/joy-utils/index';
-import { useMyAccount } from '@polkadot/joy-utils/MyAccountContext';
-import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
+import { Controller } from '@polkadot/joy-utils/react/helpers';
+import { View } from '@polkadot/joy-utils/react/hocs';
+import { useMyAccount } from '@polkadot/joy-utils/react/hooks';
 import { QueueTxExtrinsicAdd } from '@polkadot/react-components/Status/types';
 
-import {
-  Accordion,
+import { Accordion,
   Button,
   Card,
   Checkbox,
@@ -26,48 +25,37 @@ import {
   Message,
   Modal,
   Table,
-  TextArea
-} from 'semantic-ui-react';
+  TextArea,
+  InputOnChangeData } from 'semantic-ui-react';
 
 import { ITransport } from '../transport';
 
-import {
-  Application,
+import { Application,
   ApplicationStage,
   ActivateOpeningAt,
-  ApplicationRationingPolicy,
-  CurrentBlock,
   Opening,
   OpeningStage,
   StakingPolicy,
   StakingAmountLimitModeKeys,
-  StakingAmountLimitMode
-} from '@joystream/types/hiring';
+  StakingAmountLimitMode } from '@joystream/types/hiring';
 
-import {
-  Membership,
-  MemberId
-} from '@joystream/types/members';
+import { Membership,
+  MemberId } from '@joystream/types/members';
 
 import { Stake, StakeId } from '@joystream/types/stake';
 
-import {
-  CuratorApplication, CuratorApplicationId,
+import { CuratorApplication, CuratorApplicationId,
   CuratorOpening,
-  IOpeningPolicyCommitment, CuratorOpeningId
-} from '@joystream/types/content-working-group';
+  IOpeningPolicyCommitment, CuratorOpeningId } from '@joystream/types/content-working-group';
 
-import {
-  classifyOpeningStage,
+import { classifyOpeningStage,
   OpeningStageClassification,
-  OpeningState
-} from '../classifiers';
+  OpeningState } from '../classifiers';
 
-import {
-  openingDescription
-} from '../openingStateMarkup';
+import { openingDescription } from '../openingStateMarkup';
 
 import { Add, Zero } from '../balances';
+import { createType } from '@joystream/types';
 
 type ids = {
   curatorId: number;
@@ -110,7 +98,7 @@ type State = {
 }
 
 function newHRT (title: string): Text {
-  return new Text(JSON.stringify({
+  return createType('Text', JSON.stringify({
     version: 1,
     headline: 'some headline',
     job: {
@@ -155,57 +143,49 @@ function newHRT (title: string): Text {
 }
 
 const createRationingPolicyOpt = (maxApplicants: number) =>
-  new Option<ApplicationRationingPolicy>(
-    ApplicationRationingPolicy,
-    new ApplicationRationingPolicy({
-      max_active_applicants: new u32(maxApplicants)
-    })
-  );
+  createType('Option<ApplicationRationingPolicy>', {
+    max_active_applicants: maxApplicants
+  });
 const createStakingPolicyOpt = (amount: number, amount_mode: StakingAmountLimitMode): Option<StakingPolicy> =>
-  new Option(
-    StakingPolicy,
-    new StakingPolicy({
-      amount: new u128(amount),
-      amount_mode,
-      crowded_out_unstaking_period_length: new Option('BlockNumber', null),
-      review_period_expired_unstaking_period_length: new Option('BlockNumber', null)
-    })
-  );
+  createType('Option<StakingPolicy>', {
+    amount,
+    amount_mode
+  });
 
-const STAKING_MODE_EXACT = new StakingAmountLimitMode(StakingAmountLimitModeKeys.Exact);
-const STAKING_MODE_AT_LEAST = new StakingAmountLimitMode(StakingAmountLimitModeKeys.AtLeast);
+const STAKING_MODE_EXACT = createType('StakingAmountLimitMode', StakingAmountLimitModeKeys.Exact);
+const STAKING_MODE_AT_LEAST = createType('StakingAmountLimitMode', StakingAmountLimitModeKeys.AtLeast);
 
 const stockOpenings: openingDescriptor[] = [
   {
     title: 'Test config A: no application stake, no role stake, no applicant limit',
-    start: new ActivateOpeningAt(CurrentBlock),
+    start: createType('ActivateOpeningAt', 'CurrentBlock'),
     policy: {
-      max_review_period_length: new u32(99999)
+      max_review_period_length: createType('u32', 99999)
     },
     text: newHRT('Test configuration A')
   },
   {
     title: 'Test config B: no application stake, no role stake, 10 applicant limit',
-    start: new ActivateOpeningAt(CurrentBlock),
+    start: createType('ActivateOpeningAt', 'CurrentBlock'),
     policy: {
-      max_review_period_length: new u32(99999)
+      max_review_period_length: createType('u32', 99999)
     },
     text: newHRT('Test configuration B')
   },
   {
     title: 'Test config C: fixed application stake (100), no role stake, no applicant limit',
-    start: new ActivateOpeningAt(CurrentBlock),
+    start: createType('ActivateOpeningAt', 'CurrentBlock'),
     policy: {
-      max_review_period_length: new u32(99999),
+      max_review_period_length: createType('u32', 99999),
       application_staking_policy: createStakingPolicyOpt(100, STAKING_MODE_EXACT)
     },
     text: newHRT('Test configuration C')
   },
   {
     title: 'Test config D: fixed application stake (100), no role stake, 10 applicant limit',
-    start: new ActivateOpeningAt(CurrentBlock),
+    start: createType('ActivateOpeningAt', 'CurrentBlock'),
     policy: {
-      max_review_period_length: new u32(99999),
+      max_review_period_length: createType('u32', 99999),
       application_rationing_policy: createRationingPolicyOpt(10),
       application_staking_policy: createStakingPolicyOpt(100, STAKING_MODE_EXACT)
     },
@@ -213,18 +193,18 @@ const stockOpenings: openingDescriptor[] = [
   },
   {
     title: 'Test config E: no application stake, fixed role stake (100), no applicant limit',
-    start: new ActivateOpeningAt(CurrentBlock),
+    start: createType('ActivateOpeningAt', 'CurrentBlock'),
     policy: {
-      max_review_period_length: new u32(99999),
+      max_review_period_length: createType('u32', 99999),
       role_staking_policy: createStakingPolicyOpt(100, STAKING_MODE_EXACT)
     },
     text: newHRT('Test configuration E')
   },
   {
     title: 'Test config F: no application stake, fixed role stake (100), 10 applicant limit',
-    start: new ActivateOpeningAt(CurrentBlock),
+    start: createType('ActivateOpeningAt', 'CurrentBlock'),
     policy: {
-      max_review_period_length: new u32(99999),
+      max_review_period_length: createType('u32', 99999),
       application_rationing_policy: createRationingPolicyOpt(10),
       role_staking_policy: createStakingPolicyOpt(100, STAKING_MODE_EXACT)
     },
@@ -232,18 +212,18 @@ const stockOpenings: openingDescriptor[] = [
   },
   {
     title: 'Test config G: minimum application stake (100), no role stake, no applicant limit',
-    start: new ActivateOpeningAt(CurrentBlock),
+    start: createType('ActivateOpeningAt', 'CurrentBlock'),
     policy: {
-      max_review_period_length: new u32(99999),
+      max_review_period_length: createType('u32', 99999),
       application_staking_policy: createStakingPolicyOpt(100, STAKING_MODE_AT_LEAST)
     },
     text: newHRT('Test configuration G')
   },
   {
     title: 'Test config H: minimum application stake (100), no role stake, 10 applicant limit',
-    start: new ActivateOpeningAt(CurrentBlock),
+    start: createType('ActivateOpeningAt', 'CurrentBlock'),
     policy: {
-      max_review_period_length: new u32(99999),
+      max_review_period_length: createType('u32', 99999),
       application_rationing_policy: createRationingPolicyOpt(10),
       application_staking_policy: createStakingPolicyOpt(100, STAKING_MODE_AT_LEAST)
     },
@@ -251,18 +231,18 @@ const stockOpenings: openingDescriptor[] = [
   },
   {
     title: 'Test config I: no application stake, minimum role stake (100), no applicant limit',
-    start: new ActivateOpeningAt(CurrentBlock),
+    start: createType('ActivateOpeningAt', 'CurrentBlock'),
     policy: {
-      max_review_period_length: new u32(99999),
+      max_review_period_length: createType('u32', 99999),
       role_staking_policy: createStakingPolicyOpt(100, STAKING_MODE_AT_LEAST)
     },
     text: newHRT('Test configuration I')
   },
   {
     title: 'Test config J: no application stake, minimum role stake (100), 10 applicant limit',
-    start: new ActivateOpeningAt(CurrentBlock),
+    start: createType('ActivateOpeningAt', 'CurrentBlock'),
     policy: {
-      max_review_period_length: new u32(99999),
+      max_review_period_length: createType('u32', 99999),
       application_rationing_policy: createRationingPolicyOpt(10),
       role_staking_policy: createStakingPolicyOpt(100, STAKING_MODE_AT_LEAST)
     },
@@ -270,9 +250,9 @@ const stockOpenings: openingDescriptor[] = [
   },
   {
     title: 'Test config K: fixed application stake (100), fixed role stake (200), no applicant limit',
-    start: new ActivateOpeningAt(CurrentBlock),
+    start: createType('ActivateOpeningAt', 'CurrentBlock'),
     policy: {
-      max_review_period_length: new u32(99999),
+      max_review_period_length: createType('u32', 99999),
       application_staking_policy: createStakingPolicyOpt(100, STAKING_MODE_EXACT),
       role_staking_policy: createStakingPolicyOpt(200, STAKING_MODE_EXACT)
     },
@@ -280,9 +260,9 @@ const stockOpenings: openingDescriptor[] = [
   },
   {
     title: 'Test config L: fixed application stake (100), fixed role stake (200), 10 applicant limit',
-    start: new ActivateOpeningAt(CurrentBlock),
+    start: createType('ActivateOpeningAt', 'CurrentBlock'),
     policy: {
-      max_review_period_length: new u32(99999),
+      max_review_period_length: createType('u32', 99999),
       application_rationing_policy: createRationingPolicyOpt(10),
       application_staking_policy: createStakingPolicyOpt(100, STAKING_MODE_EXACT),
       role_staking_policy: createStakingPolicyOpt(200, STAKING_MODE_EXACT)
@@ -291,9 +271,9 @@ const stockOpenings: openingDescriptor[] = [
   },
   {
     title: 'Test config M: Minimum application stake (100), minimum role stake (200), no applicant limit',
-    start: new ActivateOpeningAt(CurrentBlock),
+    start: createType('ActivateOpeningAt', 'CurrentBlock'),
     policy: {
-      max_review_period_length: new u32(99999),
+      max_review_period_length: createType('u32', 99999),
       application_staking_policy: createStakingPolicyOpt(100, STAKING_MODE_AT_LEAST),
       role_staking_policy: createStakingPolicyOpt(200, STAKING_MODE_AT_LEAST)
     },
@@ -301,9 +281,9 @@ const stockOpenings: openingDescriptor[] = [
   },
   {
     title: 'Test config N: Minimum application stake (100), minimum role stake (200), 10 applicant limit',
-    start: new ActivateOpeningAt(CurrentBlock),
+    start: createType('ActivateOpeningAt', 'CurrentBlock'),
     policy: {
-      max_review_period_length: new u32(99999),
+      max_review_period_length: createType('u32', 99999),
       application_rationing_policy: createRationingPolicyOpt(10),
       application_staking_policy: createStakingPolicyOpt(100, STAKING_MODE_AT_LEAST),
       role_staking_policy: createStakingPolicyOpt(200, STAKING_MODE_AT_LEAST)
@@ -312,9 +292,9 @@ const stockOpenings: openingDescriptor[] = [
   },
   {
     title: 'Test config O: Fixed application stake (100), minimum role stake (200), no applicant limit',
-    start: new ActivateOpeningAt(CurrentBlock),
+    start: createType('ActivateOpeningAt', 'CurrentBlock'),
     policy: {
-      max_review_period_length: new u32(99999),
+      max_review_period_length: createType('u32', 99999),
       application_staking_policy: createStakingPolicyOpt(100, STAKING_MODE_EXACT),
       role_staking_policy: createStakingPolicyOpt(200, STAKING_MODE_AT_LEAST)
     },
@@ -322,15 +302,10 @@ const stockOpenings: openingDescriptor[] = [
   },
   {
     title: 'Test config P: Fixed application stake (100), minimum role stake (200), 10 applicant limit',
-    start: new ActivateOpeningAt(CurrentBlock),
+    start: createType('ActivateOpeningAt', 'CurrentBlock'),
     policy: {
-      max_review_period_length: new u32(99999),
-      application_rationing_policy: new Option<ApplicationRationingPolicy>(
-        ApplicationRationingPolicy,
-        new ApplicationRationingPolicy({
-          max_active_applicants: new u32(10)
-        })
-      ),
+      max_review_period_length: createType('u32', 99999),
+      application_rationing_policy: createRationingPolicyOpt(10),
       application_staking_policy: createStakingPolicyOpt(100, STAKING_MODE_EXACT),
       role_staking_policy: createStakingPolicyOpt(200, STAKING_MODE_AT_LEAST)
     },
@@ -338,9 +313,9 @@ const stockOpenings: openingDescriptor[] = [
   },
   {
     title: 'Test config Q: Minimum application stake (100), fixed role stake (200), no applicant limit',
-    start: new ActivateOpeningAt(CurrentBlock),
+    start: createType('ActivateOpeningAt', 'CurrentBlock'),
     policy: {
-      max_review_period_length: new u32(99999),
+      max_review_period_length: createType('u32', 99999),
       application_staking_policy: createStakingPolicyOpt(100, STAKING_MODE_AT_LEAST),
       role_staking_policy: createStakingPolicyOpt(200, STAKING_MODE_EXACT)
     },
@@ -348,9 +323,9 @@ const stockOpenings: openingDescriptor[] = [
   },
   {
     title: 'Test config R: Minimum application stake (100), fixed role stake (200), 10 applicant limit',
-    start: new ActivateOpeningAt(CurrentBlock),
+    start: createType('ActivateOpeningAt', 'CurrentBlock'),
     policy: {
-      max_review_period_length: new u32(99999),
+      max_review_period_length: createType('u32', 99999),
       application_rationing_policy: createRationingPolicyOpt(10),
       application_staking_policy: createStakingPolicyOpt(100, STAKING_MODE_AT_LEAST),
       role_staking_policy: createStakingPolicyOpt(200, STAKING_MODE_EXACT)
@@ -376,48 +351,51 @@ export class AdminController extends Controller<State, ITransport> {
     this.api = api;
     this.queueExtrinsic = queueExtrinsic;
     this.state.currentDescriptor = stockOpenings[0];
-    this.updateState();
+    void this.refreshState();
   }
 
-  onTxSuccess = () => { this.updateState(); }
+  onTxSuccess = () => { this.closeModal(); void this.refreshState(); }
 
   newOpening (accountId: string, desc: openingDescriptor) {
     const tx = this.api.tx.contentWorkingGroup.addCuratorOpening(
       desc.start,
       desc.policy,
       desc.text
-    ) as unknown as SubmittableExtrinsic;
+    );
 
-    // FIXME: Normally we would keep it open in case of errror, but due to bad design
-    // the values in the form are reset at this point anyway, so there is no point
-    this.closeModal();
     this.queueExtrinsic({ extrinsic: tx, txSuccessCb: this.onTxSuccess, accountId });
   }
 
   startAcceptingApplications (accountId: string, id = 0) {
     const tx = this.api.tx.contentWorkingGroup.acceptCuratorApplications(id);
+
     this.queueExtrinsic({ extrinsic: tx, txSuccessCb: this.onTxSuccess, accountId });
   }
 
   async applyAsACurator (creatorAddress: string, openingId: number) {
     const membershipIds = (await this.api.query.members.memberIdsByControllerAccountId(creatorAddress)) as Vec<MemberId>;
+
     if (membershipIds.length === 0) {
       console.error('No membship ID associated with this address');
+
       return;
     }
+
     const tx = this.api.tx.contentWorkingGroup.applyOnCuratorOpening(
       membershipIds[0],
       openingId,
-      new GenericAccountId(creatorAddress),
-      new Option(u128, 400),
-      new Option(u128, 400),
-      new Text('This is my application')
-    ) as unknown as SubmittableExtrinsic;
+      creatorAddress,
+      400,
+      400,
+      'This is my application'
+    );
+
     this.queueExtrinsic({ extrinsic: tx, txSuccessCb: this.onTxSuccess, accountId: creatorAddress });
   }
 
   beginApplicantReview (accountId: string, openingId: number) {
     const tx = this.api.tx.contentWorkingGroup.beginCuratorApplicantReview(openingId);
+
     this.queueExtrinsic({ extrinsic: tx, txSuccessCb: this.onTxSuccess, accountId });
   }
 
@@ -426,26 +404,25 @@ export class AdminController extends Controller<State, ITransport> {
       openingId,
       applications,
       null
-    ) as unknown as SubmittableExtrinsic;
+    );
+
     this.queueExtrinsic({ extrinsic: tx, txSuccessCb: this.onTxSuccess, accountId });
   }
 
   protected async profile (id: MemberId): Promise<Membership> {
     const member = (await this.api.query.members.membershipById(id)) as Membership;
-    if (member.handle.isEmpty) {
+
+    if (member.isEmpty) {
       throw new Error(`Expected member profile not found! (id: ${id.toString()}`);
     }
+
     return member;
   }
 
   protected async stakeValue (stakeId: StakeId): Promise<Balance> {
-    const stake = new SingleLinkedMapEntry<Stake>(
-      Stake,
-      await this.api.query.stake.stakes(
-        stakeId
-      )
-    );
-    return stake.value.value;
+    const stake = await this.api.query.stake.stakes(stakeId) as Stake;
+
+    return stake.value;
   }
 
   protected async roleStake (application: Application): Promise<Balance> {
@@ -464,67 +441,51 @@ export class AdminController extends Controller<State, ITransport> {
     return this.stakeValue(application.active_application_staking_id.unwrap());
   }
 
-  async updateState () {
+  async refreshState () {
     this.state.openings = new Map<number, opening>();
 
     const nextOpeningId = await this.api.query.contentWorkingGroup.nextCuratorOpeningId() as CuratorOpeningId;
+
     for (let i = nextOpeningId.toNumber() - 1; i >= 0; i--) {
-      const curatorOpening = new SingleLinkedMapEntry<CuratorOpening>(
-        CuratorOpening,
-        await this.api.query.contentWorkingGroup.curatorOpeningById(i)
-      );
+      const curatorOpening = await this.api.query.contentWorkingGroup.curatorOpeningById(i) as CuratorOpening;
 
-      const openingId = curatorOpening.value.opening_id;
+      const openingId = curatorOpening.opening_id;
 
-      const baseOpening = new SingleLinkedMapEntry<Opening>(
-        Opening,
-        await this.api.query.hiring.openingById(
-          openingId
-        )
-      );
+      const baseOpening = await this.api.query.hiring.openingById(openingId) as Opening;
 
-      const hrt = baseOpening.value.parse_human_readable_text_with_fallback();
+      const hrt = baseOpening.parse_human_readable_text_with_fallback();
       const title = hrt.job.title;
 
       this.state.openings.set(i, {
         openingId: openingId.toNumber(),
         curatorId: i,
         applications: new Array<application>(),
-        state: baseOpening.value.stage,
+        state: baseOpening.stage,
         title: title,
-        classification: await classifyOpeningStage(this.transport, baseOpening.value)
+        classification: await classifyOpeningStage(this.transport, baseOpening)
       });
     }
 
     const nextAppid = await this.api.query.contentWorkingGroup.nextCuratorApplicationId() as CuratorApplicationId;
+
     for (let i = 0; i < nextAppid.toNumber(); i++) {
-      const cApplication = new SingleLinkedMapEntry<CuratorApplication>(
-        CuratorApplication,
-        await this.api.query.contentWorkingGroup.curatorApplicationById(i)
-      );
+      const cApplication = await this.api.query.contentWorkingGroup.curatorApplicationById(i) as CuratorApplication;
 
-      const appId = cApplication.value.application_id;
-      const baseApplications = new SingleLinkedMapEntry<Application>(
-        Application,
-        await this.api.query.hiring.applicationById(
-          appId
-        )
-      );
+      const appId = cApplication.application_id;
+      const baseApplications = await this.api.query.hiring.applicationById(appId) as Application;
 
-      const curatorOpening = this.state.openings.get(
-        cApplication.value.curator_opening_id.toNumber()
-      ) as opening;
+      const curatorOpening = this.state.openings.get(cApplication.curator_opening_id.toNumber()) as opening;
 
       curatorOpening.applications.push({
         openingId: appId.toNumber(),
         curatorId: i,
-        stage: baseApplications.value.stage,
-        account: cApplication.value.role_account_id.toString(),
-        memberId: cApplication.value.member_id.toNumber(),
-        profile: (await this.profile(cApplication.value.member_id)),
-        applicationStake: await this.applicationStake(baseApplications.value),
-        roleStake: await this.roleStake(baseApplications.value),
-        application: baseApplications.value
+        stage: baseApplications.stage,
+        account: cApplication.role_account_id.toString(),
+        memberId: cApplication.member_id.toNumber(),
+        profile: (await this.profile(cApplication.member_id)),
+        applicationStake: await this.applicationStake(baseApplications),
+        roleStake: await this.roleStake(baseApplications),
+        application: baseApplications
       });
     }
 
@@ -547,12 +508,14 @@ type AdminContainerProps = {
   state: State;
   controller: AdminController;
 }
+
 const AdminContainer = ({ state, controller }: AdminContainerProps) => {
   const address = useMyAccount().state.address;
   const containerRef = useRef<HTMLDivElement>(null);
+
   return (
     <div ref={containerRef}>
-      <Container className="admin">
+      <Container className='admin'>
         <Card fluid color='orange'>
           <Card.Content>
             <Dropdown text='Create new opening...'>
@@ -573,7 +536,7 @@ const AdminContainer = ({ state, controller }: AdminContainerProps) => {
             <Modal
               open={state.modalOpen}
               onClose={() => controller.closeModal()}
-              mountNode={containerRef.current} // Prevent conflicts with tx-modal (after form values reset issue is fixed, see FIXME: above)
+              mountNode={containerRef.current} // Prevent conflicts with tx-modal
             >
               <Modal.Content image>
                 <Modal.Description>
@@ -584,7 +547,7 @@ const AdminContainer = ({ state, controller }: AdminContainerProps) => {
           </Card.Content>
         </Card>
         {
-          [...state.openings.keys()].map(key => <OpeningView key={key} opening={state.openings.get(key) as opening} controller={controller} />)
+          [...state.openings.keys()].map((key) => <OpeningView key={key} opening={state.openings.get(key) as opening} controller={controller} />)
         }
         <br />
       </Container>
@@ -593,7 +556,7 @@ const AdminContainer = ({ state, controller }: AdminContainerProps) => {
 };
 
 export const AdminView = View<AdminController, State>(
-  (state, controller) => {
+  ({ state, controller }) => {
     return (
       <AdminContainer state={state} controller={controller} />
     );
@@ -627,25 +590,26 @@ const NewOpening = (props: NewOpeningProps) => {
     switch (value) {
       case 'CurrentBlock':
         setShowExactBlock(false);
-        setStart(new ActivateOpeningAt(CurrentBlock));
+        setStart(createType('ActivateOpeningAt', 'CurrentBlock'));
         break;
 
       case 'ExactBlock':
-        setStart(new ActivateOpeningAt({ ExactBlock: exactBlock }));
+        setStart(createType('ActivateOpeningAt', { ExactBlock: exactBlock }));
         setShowExactBlock(true);
         break;
     }
   };
 
-  const onChangeExactBlock = (e: any, { value }: any) => {
-    setExactBlock(value);
-    setStart(new ActivateOpeningAt({ ExactBlock: value }));
+  const onChangeExactBlock = (e: any, { value }: InputOnChangeData) => {
+    setExactBlock(typeof value === 'number' ? value : (parseInt(value) || 0));
+    setStart(createType('ActivateOpeningAt', { ExactBlock: value }));
   };
 
   const [policy, setPolicy] = useState(props.desc.policy);
 
   const onChangePolicyField = <PolicyKey extends keyof policyDescriptor>(fieldName: PolicyKey, value: policyDescriptor[PolicyKey]) => {
     const newState = { ...policy };
+
     newState[fieldName] = value;
     setPolicy(newState);
   };
@@ -682,14 +646,17 @@ const NewOpening = (props: NewOpeningProps) => {
   ) => {
     if (mode === '') {
       const policyField = policy[fieldName];
+
       mode = policyField && policyField.isSome
         ? (policyField.unwrap().amount_mode.type as StakingAmountLimitModeKeys)
         : StakingAmountLimitModeKeys.Exact; // Default
     }
+
     const value = createStakingPolicyOpt(
       stakeValue,
       mode === StakingAmountLimitModeKeys.Exact ? STAKING_MODE_EXACT : STAKING_MODE_AT_LEAST
     );
+
     onChangePolicyField(fieldName, value);
   };
 
@@ -709,7 +676,7 @@ const NewOpening = (props: NewOpeningProps) => {
     props.fn({
       start: start,
       policy: policy,
-      text: new Text(text),
+      text: createType('Text', text),
       title: ''
     });
   };
@@ -726,7 +693,7 @@ const NewOpening = (props: NewOpeningProps) => {
         />
         {showExactBlock === true &&
           <Input
-            type="number"
+            type='number'
             value={exactBlock}
             onChange={onChangeExactBlock}
           />
@@ -736,15 +703,15 @@ const NewOpening = (props: NewOpeningProps) => {
       <Form.Field>
         <label>Max review period length (in blocks)</label>
         <Input
-          type="number"
+          type='number'
           value={policy.max_review_period_length.toNumber()}
-          onChange={(e: any, { value }: any) => onChangePolicyField('max_review_period_length', new u32(value))}
+          onChange={(e: any, { value }: any) => onChangePolicyField('max_review_period_length', createType('u32', value))}
         />
       </Form.Field>
 
       <Form.Field>
         <label>Application staking policy</label>
-        <Checkbox label="Require an application stake" checked={requireAppStakingPolicy} onChange={(e, { checked }: any) => onStakeModeCheckboxChange(setRequireAppStakingPolicy, 'application_staking_policy', checked, 0)} />
+        <Checkbox label='Require an application stake' checked={requireAppStakingPolicy} onChange={(e, { checked }: any) => onStakeModeCheckboxChange(setRequireAppStakingPolicy, 'application_staking_policy', checked, 0)} />
         {requireAppStakingPolicy && (
           <Message>
             <label>Stake mode</label>
@@ -757,7 +724,7 @@ const NewOpening = (props: NewOpeningProps) => {
 
             <label>Stake value</label>
             <Input
-              type="number"
+              type='number'
               value={policy.application_staking_policy?.unwrap().amount.toNumber()}
               onChange={(e: any, { value }: any) => changeStakingMode('application_staking_policy', '', value)}
             />
@@ -767,7 +734,7 @@ const NewOpening = (props: NewOpeningProps) => {
 
       <Form.Field>
         <label>Role staking policy</label>
-        <Checkbox label="Require a role stake" checked={requireRoleStakingPolicy} onChange={(e, { checked }: any) => onStakeModeCheckboxChange(setRequireRoleStakingPolicy, 'role_staking_policy', checked, 0)} />
+        <Checkbox label='Require a role stake' checked={requireRoleStakingPolicy} onChange={(e, { checked }: any) => onStakeModeCheckboxChange(setRequireRoleStakingPolicy, 'role_staking_policy', checked, 0)} />
         {requireRoleStakingPolicy && (
           <Message>
             <label>Stake mode</label>
@@ -780,7 +747,7 @@ const NewOpening = (props: NewOpeningProps) => {
 
             <label>Stake value</label>
             <Input
-              type="number"
+              type='number'
               value={policy.role_staking_policy?.unwrap().amount.toNumber()}
               onChange={(e: any, { value }: any) => changeStakingMode('role_staking_policy', '', value)}
             />
@@ -792,7 +759,7 @@ const NewOpening = (props: NewOpeningProps) => {
         <TextArea value={text} rows={10} onChange={(e: any, { value }: any) => setText(value)} />
       </Form.Field>
 
-      <Form.Field align="right">
+      <Form.Field align='right'>
         <Button positive onClick={() => submit()}>Create opening</Button>
       </Form.Field>
     </Form>
@@ -811,7 +778,7 @@ const OpeningView = (props: OpeningViewProps) => {
 
   const toggleApplication = (id: number) => {
     if (selected.includes(id)) {
-      setSelected(selected.filter(v => v !== id));
+      setSelected(selected.filter((v) => v !== id));
     } else {
       setSelected([...selected, id]);
     }
@@ -822,7 +789,7 @@ const OpeningView = (props: OpeningViewProps) => {
   switch (props.opening.classification.state) {
     case OpeningState.InReview:
       CTAs = (
-        <Container align="right">
+        <Container align='right'>
           <Button onClick={() => { props.controller.acceptCuratorApplications(address, props.opening.curatorId, selected.sort()); }}>Accept curator applications</Button>
         </Container>
       );
@@ -832,8 +799,8 @@ const OpeningView = (props: OpeningViewProps) => {
     <Card fluid>
       <Card.Content>
         <Card.Header>
-          <Label attached="top right">Opening</Label>
-          <Link to={'/working-groups/opportunities/curators/' + props.opening.curatorId}>
+          <Label attached='top right'>Opening</Label>
+          <Link to={`/working-groups/opportunities/curators/${props.opening.curatorId}`}>
             {props.opening.title}
           </Link>
 
@@ -876,7 +843,7 @@ const OpeningView = (props: OpeningViewProps) => {
                     <Table.Cell>{app.curatorId}</Table.Cell>
                     <Table.Cell>{app.openingId}</Table.Cell>
                     <Table.Cell>
-                      <Link to={'/members/' + app.profile.handle}>
+                      <Link to={`/members/${app.profile.handle.toString()}`}>
                         {app.profile.handle}
                       </Link>
                     </Table.Cell>
@@ -930,7 +897,7 @@ const OpeningView = (props: OpeningViewProps) => {
                 </Dropdown.Menu>
               </Dropdown>
             </Grid.Column>
-            <Grid.Column align="right">
+            <Grid.Column align='right'>
             </Grid.Column>
           </Grid.Row>
         </Grid>
diff --git a/pioneer/packages/joy-roles/src/tabs/MyRoles.controller.tsx b/pioneer/packages/joy-roles/src/tabs/MyRoles.controller.tsx
index a1859810a9..b8c0e14324 100644
--- a/pioneer/packages/joy-roles/src/tabs/MyRoles.controller.tsx
+++ b/pioneer/packages/joy-roles/src/tabs/MyRoles.controller.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
 
 import { Container } from 'semantic-ui-react';
-import { Controller, View } from '@polkadot/joy-utils/index';
+import { Controller } from '@polkadot/joy-utils/react/helpers';
+import { View } from '@polkadot/joy-utils/react/hocs';
 import { ITransport } from '../transport';
-import {
-  Applications, OpeningApplication,
-  CurrentRoles, ActiveRole, ActiveRoleWithCTAs
-} from './MyRoles';
+import { Applications, OpeningApplication,
+  CurrentRoles, ActiveRole, ActiveRoleWithCTAs } from './MyRoles';
 
 type State = {
   applications: OpeningApplication[];
@@ -23,13 +22,24 @@ const newEmptyState = (): State => {
 };
 
 export class MyRolesController extends Controller<State, ITransport> {
-  constructor (transport: ITransport, myAddress: string | undefined, initialState: State = newEmptyState()) {
+  constructor (transport: ITransport, initialState: State = newEmptyState()) {
     super(transport, initialState);
+  }
+
+  refreshState () {
+    if (!this.state.myAddress) {
+      return;
+    }
+
+    // Set actual data
+    void this.updateCurationGroupRoles(this.state.myAddress);
+    void this.updateApplications(this.state.myAddress);
+  }
 
+  setMyAddress (myAddress: string | undefined) {
     if (typeof myAddress === 'string') {
       this.state.myAddress = myAddress;
-      this.updateCurationGroupRoles(myAddress);
-      this.updateApplications(myAddress);
+      this.refreshState();
     }
   }
 
@@ -40,7 +50,8 @@ export class MyRolesController extends Controller<State, ITransport> {
 
   protected async updateCurationGroupRoles (myAddress: string) {
     const roles = await this.transport.myRoles(myAddress);
-    this.state.currentRoles = roles.map(role => ({
+
+    this.state.currentRoles = roles.map((role) => ({
       ...role,
       CTAs: [
         {
@@ -54,17 +65,21 @@ export class MyRolesController extends Controller<State, ITransport> {
   }
 
   leaveRole (role: ActiveRole, rationale: string) {
-    this.transport.leaveRole(role.group, this.state.myAddress, role.workerId.toNumber(), rationale);
+    const successCb = this.refreshState.bind(this);
+
+    this.transport.leaveRole(role.group, this.state.myAddress, role.workerId.toNumber(), rationale, successCb);
   }
 
   cancelApplication (application: OpeningApplication) {
-    this.transport.withdrawApplication(application.meta.group, this.state.myAddress, application.id);
+    const successCb = this.refreshState.bind(this);
+
+    this.transport.withdrawApplication(application.meta.group, this.state.myAddress, application.id, successCb);
   }
 }
 
 export const MyRolesView = View<MyRolesController, State>(
-  (state, controller) => (
-    <Container className="my-roles">
+  ({ state, controller }) => (
+    <Container className='my-roles'>
       <CurrentRoles currentRoles={state.currentRoles} />
       <Applications applications={state.applications} cancelCallback={(a) => controller.cancelApplication(a)} />
     </Container>
diff --git a/pioneer/packages/joy-roles/src/tabs/MyRoles.elements.stories.tsx b/pioneer/packages/joy-roles/src/tabs/MyRoles.elements.stories.tsx
index d44954aa70..19d682df2d 100644
--- a/pioneer/packages/joy-roles/src/tabs/MyRoles.elements.stories.tsx
+++ b/pioneer/packages/joy-roles/src/tabs/MyRoles.elements.stories.tsx
@@ -1,36 +1,24 @@
 import React from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
+import { createType } from '@joystream/types';
 
-import {
-  Container
-} from 'semantic-ui-react';
+import { Container } from 'semantic-ui-react';
 
-import {
-  u128
-} from '@polkadot/types';
-
-import {
-  CurrentRoles, CurrentRolesProps,
+import { CurrentRoles, CurrentRolesProps,
   Application, ApplicationProps,
   ApplicationStatus, ApplicationStatusProps,
-  Applications
-} from './MyRoles';
+  Applications } from './MyRoles';
 
-import {
-  CancelledReason
-  , OpeningState
-} from '../classifiers';
+import { CancelledReason
+  , OpeningState } from '../classifiers';
 
 import 'semantic-ui-css/semantic.min.css';
 import '@polkadot/joy-roles/index.sass';
 
-import {
-  opening,
+import { opening,
   tomorrow,
-  yesterday
-} from './Opportunities.stories';
+  yesterday } from './Opportunities.stories';
 
-import { CuratorId } from '@joystream/types/content-working-group';
 import { WorkingGroups, workerRoleNameByGroup } from '../working_groups';
 
 export default {
@@ -46,10 +34,10 @@ export function CurrentRolesFragment () {
   const props: CurrentRolesProps = {
     currentRoles: [
       {
-        workerId: new CuratorId(1),
+        workerId: createType('CuratorId', 1),
         name: workerRoleNameByGroup[WorkingGroups.StorageProviders],
-        reward: new u128(321),
-        stake: new u128(100),
+        reward: createType('Balance', 321),
+        stake: createType('Balance', 100),
         group: WorkingGroups.StorageProviders,
         CTAs: [
           {
@@ -59,11 +47,11 @@ export function CurrentRolesFragment () {
         ]
       },
       {
-        workerId: new CuratorId(1),
+        workerId: createType('CuratorId', 1),
         name: 'Some other role',
         url: 'some URL',
-        reward: new u128(321),
-        stake: new u128(12343200),
+        reward: createType('Balance', 321),
+        stake: createType('Balance', 12343200),
         group: WorkingGroups.ContentCurators,
         CTAs: [
           {
@@ -75,6 +63,7 @@ export function CurrentRolesFragment () {
 
     ]
   };
+
   return (
     <CurrentRoles {...props} />
   );
@@ -150,9 +139,9 @@ export function ApplicationStatusFragment () {
   ];
 
   return (
-    <Container className="outer">
+    <Container className='outer'>
       {permutations.map((permutation, key) => (
-        <Container key={key} className="current-applications outer">
+        <Container key={key} className='current-applications outer'>
           <h4>{permutation._description}</h4>
           <ApplicationStatus {...permutation} />
         </Container>
@@ -176,8 +165,8 @@ const permutations: (ApplicationProps & TestProps)[] = [
       starting_time: yesterday()
     },
     opening: opening,
-    applicationStake: new u128(5),
-    roleStake: new u128(15),
+    applicationStake: createType('Balance', 5),
+    roleStake: createType('Balance', 15),
     cancelCallback: () => { /* do nothing */ },
     rank: 15,
     capacity: 20
@@ -196,8 +185,8 @@ const permutations: (ApplicationProps & TestProps)[] = [
       starting_time: yesterday()
     },
     opening: opening,
-    applicationStake: new u128(5),
-    roleStake: new u128(15),
+    applicationStake: createType('Balance', 5),
+    roleStake: createType('Balance', 15),
     cancelCallback: () => { /* do nothing */ },
     rank: 21,
     capacity: 20
@@ -218,8 +207,8 @@ const permutations: (ApplicationProps & TestProps)[] = [
       review_end_block: 12345
     },
     opening: opening,
-    applicationStake: new u128(5),
-    roleStake: new u128(15),
+    applicationStake: createType('Balance', 5),
+    roleStake: createType('Balance', 15),
     cancelCallback: () => { /* do nothing */ },
     rank: 15,
     capacity: 20
@@ -240,8 +229,8 @@ const permutations: (ApplicationProps & TestProps)[] = [
       review_end_block: 12345
     },
     opening: opening,
-    applicationStake: new u128(5),
-    roleStake: new u128(15),
+    applicationStake: createType('Balance', 5),
+    roleStake: createType('Balance', 15),
     cancelCallback: () => { /* do nothing */ },
     rank: 21,
     capacity: 20
@@ -260,8 +249,8 @@ const permutations: (ApplicationProps & TestProps)[] = [
       starting_time: yesterday()
     },
     opening: opening,
-    applicationStake: new u128(5),
-    roleStake: new u128(15),
+    applicationStake: createType('Balance', 5),
+    roleStake: createType('Balance', 15),
     cancelCallback: () => { /* do nothing */ },
     rank: 21,
     capacity: 20
@@ -280,8 +269,8 @@ const permutations: (ApplicationProps & TestProps)[] = [
       starting_time: yesterday()
     },
     opening: opening,
-    applicationStake: new u128(5),
-    roleStake: new u128(15),
+    applicationStake: createType('Balance', 5),
+    roleStake: createType('Balance', 15),
     cancelCallback: () => { /* do nothing */ },
     rank: 21,
     capacity: 20,
@@ -291,9 +280,9 @@ const permutations: (ApplicationProps & TestProps)[] = [
 
 export function ApplicationFragment () {
   return (
-    <Container className="outer my-roles">
+    <Container className='outer my-roles'>
       {permutations.map((permutation, key) => (
-        <Container key={key} className="current-applications outer">
+        <Container key={key} className='current-applications outer'>
           <h4>{permutation._description}</h4>
           <Application {...permutation} />
         </Container>
@@ -304,8 +293,9 @@ export function ApplicationFragment () {
 
 export function ApplicationsFragment () {
   const cancelCallback = () => { /* do nothing */ };
+
   return (
-    <Container className="outer my-roles">
+    <Container className='outer my-roles'>
       <Applications applications={permutations} cancelCallback={cancelCallback} />
     </Container>
   );
diff --git a/pioneer/packages/joy-roles/src/tabs/MyRoles.stories.tsx b/pioneer/packages/joy-roles/src/tabs/MyRoles.stories.tsx
index a8cafac226..382c7ccee0 100644
--- a/pioneer/packages/joy-roles/src/tabs/MyRoles.stories.tsx
+++ b/pioneer/packages/joy-roles/src/tabs/MyRoles.stories.tsx
@@ -1,17 +1,13 @@
 import React from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
 
-import {
-  Container
-} from 'semantic-ui-react';
+import { Container } from 'semantic-ui-react';
 
 import 'semantic-ui-css/semantic.min.css';
 import '@polkadot/joy-roles/index.sass';
 
-import {
-  ApplicationsFragment,
-  CurrentRolesFragment
-} from './MyRoles.elements.stories';
+import { ApplicationsFragment,
+  CurrentRolesFragment } from './MyRoles.elements.stories';
 
 export default {
   title: 'Roles / Components / My roles tab',
@@ -20,7 +16,7 @@ export default {
 
 export function MyRolesSandbox () {
   return (
-    <Container className="my-roles">
+    <Container className='my-roles'>
       <CurrentRolesFragment />
       <ApplicationsFragment />
     </Container>
diff --git a/pioneer/packages/joy-roles/src/tabs/MyRoles.tsx b/pioneer/packages/joy-roles/src/tabs/MyRoles.tsx
index ef1ff8e9f3..79b499be59 100644
--- a/pioneer/packages/joy-roles/src/tabs/MyRoles.tsx
+++ b/pioneer/packages/joy-roles/src/tabs/MyRoles.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-import {
-  Button,
+import { Button,
   Container,
   Icon,
   Form,
@@ -13,23 +12,18 @@ import {
   Segment,
   Statistic,
   Table,
-  SemanticICONS
-} from 'semantic-ui-react';
+  SemanticICONS,
+  TextAreaProps } from 'semantic-ui-react';
 
 import { formatBalance } from '@polkadot/util';
-import { u128 } from '@polkadot/types';
 import { Balance } from '@polkadot/types/interfaces';
 
-import { Loadable } from '@polkadot/joy-utils/index';
+import { Loadable } from '@polkadot/joy-utils/react/hocs';
 import { Opening } from '@joystream/types/hiring';
 
-import {
-  OpeningBodyReviewInProgress
-} from './Opportunities';
-import {
-  openingIcon,
-  openingDescription
-} from '../openingStateMarkup';
+import { OpeningBodyReviewInProgress } from './Opportunities';
+import { openingIcon,
+  openingDescription } from '../openingStateMarkup';
 import { CancelledReason, OpeningStageClassification, OpeningState } from '../classifiers';
 import { OpeningMetadata } from '../OpeningMetadata';
 import { CuratorId } from '@joystream/types/content-working-group';
@@ -50,11 +44,13 @@ function CTAButton (props: CTA) {
   const [rationale, setRationale] = useState<string>('');
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
+
   const leaveRole = () => {
     props.callback(rationale);
     handleClose();
   };
-  const handleChange = (e: any, value: any) => setRationale(value.value);
+
+  const handleChange = (e: any, { value }: TextAreaProps) => setRationale(value?.toString() || '');
 
   return (
     <Modal trigger={
@@ -100,6 +96,7 @@ function RoleName (props: NameAndURL) {
   if (typeof props.url !== 'undefined') {
     return <Link to={props.url}>{props.name}</Link>;
   }
+
   return <span>{props.name}</span>;
 }
 
@@ -120,9 +117,9 @@ export type CurrentRolesProps = {
 
 export const CurrentRoles = Loadable<CurrentRolesProps>(
   ['currentRoles'],
-  props => {
+  (props) => {
     return (
-      <Container className="current-roles">
+      <Container className='current-roles'>
         <h2>Current roles</h2>
         {props.currentRoles.length > 0 &&
           <Table basic='very'>
@@ -173,15 +170,18 @@ type RankAndCapacityProps = {
 }
 
 function RankAndCapacity (props: RankAndCapacityProps) {
-  let capacity = null;
+  let capacity = '';
+
   if (props.capacity > 0) {
-    capacity = '/ ' + props.capacity;
+    capacity = `/${props.capacity}`;
   }
 
   let iconName: SemanticICONS = 'check circle';
+
   if (props.capacity > 0 && props.rank > props.capacity) {
     iconName = 'times circle';
   }
+
   return (
     <span>
       <Icon name={iconName} />
@@ -214,7 +214,8 @@ function ApplicationCancelledStatus (props: ApplicationStatusProps) {
     </Message>
   );
 }
-type statusRenderer = (p: ApplicationStatusProps) => any
+
+type statusRenderer = React.ComponentType<ApplicationStatusProps>
 
 function ApplicationStatusAcceptingApplications (props: ApplicationStatusProps): any {
   let positive = true;
@@ -228,6 +229,7 @@ function ApplicationStatusAcceptingApplications (props: ApplicationStatusProps):
       <p>You have been crowded out of this role, and will not be considered.</p>
     );
   }
+
   return (
     <Message positive={positive} negative={!positive}>
       <Message.Header>
@@ -250,6 +252,7 @@ function ApplicationStatusInReview (props: ApplicationStatusProps): any {
       <p>You have been crowded out of this role, and will not be considered.</p>
     );
   }
+
   return (
     <Message positive={positive} negative={!positive}>
       <Message.Header>
@@ -297,7 +300,9 @@ export function ApplicationStatus (props: ApplicationStatusProps) {
     return ApplicationCancelledStatus(props);
   }
 
-  return (applicationStatusRenderers.get(props.openingStatus) as statusRenderer)(props);
+  const StatusRenderer = (applicationStatusRenderers.get(props.openingStatus) as statusRenderer);
+
+  return <StatusRenderer {...props} />;
 }
 
 enum ApplicationState {
@@ -318,6 +323,7 @@ function applicationState (props: OpeningApplication): ApplicationState {
   } else if (props.capacity > 0 && props.rank > props.capacity) {
     return ApplicationState.Negative;
   }
+
   return ApplicationState.Positive;
 }
 
@@ -346,6 +352,7 @@ function CancelButton (props: ApplicationProps) {
   const [open, setOpen] = useState<boolean>(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
+
   const cancelApplication = () => {
     props.cancelCallback(props);
     handleClose();
@@ -393,6 +400,7 @@ const ApplicationLabel = styled(Label)`
 
 export function Application (props: ApplicationProps) {
   let countdown = null;
+
   if (props.stage.state === OpeningState.InReview) {
     countdown = <OpeningBodyReviewInProgress {...props.stage} />;
   }
@@ -402,33 +410,34 @@ export function Application (props: ApplicationProps) {
   const isLeadApplication = props.meta.type?.isOfType('Leader');
 
   let CTA = null;
+
   if (appState === ApplicationState.Positive && props.stage.state !== OpeningState.Complete) {
     CTA = <CancelButton {...props} />;
   }
 
   return (
-    <Segment className={'application status-' + applicationClass.get(appState)}>
+    <Segment className={`application status-${applicationClass.get(appState) || ''}`}>
       <Label attached='top'>
         {application.job.title}
-        <Label.Detail className="right">
+        <Label.Detail className='right'>
           {openingIcon(props.stage.state)}
           {openingDescription(props.stage.state)}
-          <Icon name="hashtag" style={{ marginLeft: '0.75em' }}/>
+          <Icon name='hashtag' style={{ marginLeft: '0.75em' }}/>
           { props.id }
           <ApplicationLabel>
             {_.startCase(props.meta.group) + (isLeadApplication ? ' Lead' : '')}
           </ApplicationLabel>
         </Label.Detail>
       </Label>
-      <Grid columns="equal">
+      <Grid columns='equal'>
         <Grid.Column width={10}>
-          <Label ribbon className="masthead">
+          <Label ribbon className='masthead'>
             <Statistic size='tiny'>
               <Statistic.Label>Reward</Statistic.Label>
               <Statistic.Value>{application.reward}</Statistic.Value>
             </Statistic>
           </Label>
-          <div className="summary">
+          <div className='summary'>
             <p>{application.headline}</p>
           </div>
 
@@ -451,28 +460,28 @@ export function Application (props: ApplicationProps) {
                   {formatBalance(props.roleStake)}
                 </Table.Cell>
               </Table.Row>
-              <Table.Row className="sum">
+              <Table.Row className='sum'>
                 <Table.Cell>
                   Total stake
                 </Table.Cell>
                 <Table.Cell>
-                  {formatBalance(new u128(props.roleStake.add(props.applicationStake)))}
+                  {formatBalance(props.roleStake.add(props.applicationStake))}
                 </Table.Cell>
               </Table.Row>
             </Table.Body>
           </Table>
           <h4>Hiring process details</h4>
           <List bulleted>
-            {application.process && application.process.details.map((detail: string, key: any) => (
+            {application.process && application.process.details.map((detail, key) => (
               <List.Item key={key}>
-                <List.Icon name="info circle" />
+                <List.Icon name='info circle' />
                 <List.Content>{detail}</List.Content>
               </List.Item>
             ))}
           </List>
 
         </Grid.Column>
-        <Grid.Column width={6} className="details">
+        <Grid.Column width={6} className='details'>
           <ApplicationStatus
             openingStatus={props.stage.state}
             rank={props.rank}
@@ -495,8 +504,8 @@ export type ApplicationsProps = CancelCallback & {
 
 export const Applications = Loadable<ApplicationsProps>(
   ['applications'],
-  props => (
-    <Container className="current-applications">
+  (props) => (
+    <Container className='current-applications'>
       <h2>Applications</h2>
       {props.applications.map((app, key) => (
         <Application key={key} cancelCallback={props.cancelCallback} {...app} />
diff --git a/pioneer/packages/joy-roles/src/tabs/Opportunities.controller.tsx b/pioneer/packages/joy-roles/src/tabs/Opportunities.controller.tsx
index 22dd966b81..25a2daecef 100644
--- a/pioneer/packages/joy-roles/src/tabs/Opportunities.controller.tsx
+++ b/pioneer/packages/joy-roles/src/tabs/Opportunities.controller.tsx
@@ -1,15 +1,14 @@
 import React from 'react';
 
-import { Controller, View } from '@polkadot/joy-utils/index';
+import { Controller } from '@polkadot/joy-utils/react/helpers';
+import { View } from '@polkadot/joy-utils/react/hocs';
 
 import { ITransport } from '../transport';
 
 import { MemberId } from '@joystream/types/members';
 
-import {
-  WorkingGroupOpening,
-  OpeningsView
-} from './Opportunities';
+import { WorkingGroupOpening,
+  OpeningsView } from './Opportunities';
 
 import { AvailableGroups, WorkingGroups } from '../working_groups';
 
@@ -20,26 +19,28 @@ type State = {
 }
 
 export class OpportunitiesController extends Controller<State, ITransport> {
-  constructor (transport: ITransport, memberId?: MemberId, initialState: State = {}) {
+  constructor (transport: ITransport, initialState: State = {}) {
     super(transport, initialState);
-    this.state.memberId = memberId;
-    this.getOpportunities();
-    this.getBlocktime();
+    this.state.blockTime = this.transport.expectedBlockTime();
   }
 
-  async getOpportunities () {
-    this.state.opportunities = await this.transport.currentOpportunities();
+  refreshState () {
+    void this.getOpportunities();
+  }
+
+  setMemberId (memberId?: MemberId) {
+    this.state.memberId = memberId;
     this.dispatch();
   }
 
-  async getBlocktime () {
-    this.state.blockTime = await this.transport.expectedBlockTime();
+  async getOpportunities () {
+    this.state.opportunities = await this.transport.currentOpportunities();
     this.dispatch();
   }
 }
 
 export const OpportunitiesView = View<OpportunitiesController, State>(
-  (state, controller, params) => (
+  ({ state, controller, params }) => (
     <OpeningsView
       group={AvailableGroups.includes(params.get('group') as any) ? params.get('group') as WorkingGroups : undefined}
       lead={!!params.get('lead')}
diff --git a/pioneer/packages/joy-roles/src/tabs/Opportunities.elements.stories.tsx b/pioneer/packages/joy-roles/src/tabs/Opportunities.elements.stories.tsx
index e73ebbce7f..07b155b2fe 100644
--- a/pioneer/packages/joy-roles/src/tabs/Opportunities.elements.stories.tsx
+++ b/pioneer/packages/joy-roles/src/tabs/Opportunities.elements.stories.tsx
@@ -2,17 +2,11 @@ import React from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
 import { Card, Container } from 'semantic-ui-react';
 
-import { u128 } from '@polkadot/types';
-
-import {
-  OpeningBodyApplicationsStatus, OpeningStakeAndApplicationStatus,
+import { OpeningBodyApplicationsStatus, OpeningStakeAndApplicationStatus,
   OpeningBodyReviewInProgress,
   OpeningBodyStakeRequirement, StakeRequirementProps,
-  OpeningHeader
-} from './Opportunities';
-import {
-  openingClass
-} from '../openingStateMarkup';
+  OpeningHeader } from './Opportunities';
+import { openingClass } from '../openingStateMarkup';
 import { ApplicationStakeRequirement, RoleStakeRequirement, StakeType } from '../StakeRequirement';
 
 import { tomorrow, yesterday } from './Opportunities.stories';
@@ -23,6 +17,7 @@ import { OpeningMetadata } from '../OpeningMetadata';
 import 'semantic-ui-css/semantic.min.css';
 import '@polkadot/joy-roles/index.sass';
 import { WorkingGroups } from '../working_groups';
+import { createType } from '@joystream/types';
 
 export default {
   title: 'Roles / Components / Opportunities groups tab / Elements',
@@ -76,8 +71,8 @@ export function OpeningHeaderByState () {
     <Container>
       {stages.map((stage, key) => (
         <Container className={'inner opening ' + openingClass(stage.state)} key={key}>
-          <Card fluid className="container">
-            <Card.Content className="header">
+          <Card fluid className='container'>
+            <Card.Content className='header'>
               <OpeningHeader stage={stage} meta={meta} />
             </Card.Content>
           </Card>
@@ -93,90 +88,90 @@ export function OpeningApplicationsStatusByState () {
       _description: 'No limit, no applications, no stake',
       numberOfApplications: 0,
       maxNumberOfApplications: 0,
-      requiredApplicationStake: new ApplicationStakeRequirement(new u128(0)),
-      requiredRoleStake: new RoleStakeRequirement(new u128(0)),
-      defactoMinimumStake: new u128(0)
+      requiredApplicationStake: new ApplicationStakeRequirement(createType('Balance', 0)),
+      requiredRoleStake: new RoleStakeRequirement(createType('Balance', 0)),
+      defactoMinimumStake: createType('Balance', 0)
     },
     {
       _description: 'No limit, some applications, no stake',
       numberOfApplications: 15,
       maxNumberOfApplications: 0,
-      requiredApplicationStake: new ApplicationStakeRequirement(new u128(0)),
-      requiredRoleStake: new RoleStakeRequirement(new u128(0)),
-      defactoMinimumStake: new u128(0)
+      requiredApplicationStake: new ApplicationStakeRequirement(createType('Balance', 0)),
+      requiredRoleStake: new RoleStakeRequirement(createType('Balance', 0)),
+      defactoMinimumStake: createType('Balance', 0)
     },
     {
       _description: 'Limit, no applications, no stake',
       numberOfApplications: 0,
       maxNumberOfApplications: 20,
-      requiredApplicationStake: new ApplicationStakeRequirement(new u128(0)),
-      requiredRoleStake: new RoleStakeRequirement(new u128(0)),
-      defactoMinimumStake: new u128(0)
+      requiredApplicationStake: new ApplicationStakeRequirement(createType('Balance', 0)),
+      requiredRoleStake: new RoleStakeRequirement(createType('Balance', 0)),
+      defactoMinimumStake: createType('Balance', 0)
     },
     {
       _description: 'Limit, some applications, no stake',
       numberOfApplications: 10,
       maxNumberOfApplications: 20,
-      requiredApplicationStake: new ApplicationStakeRequirement(new u128(0)),
-      requiredRoleStake: new RoleStakeRequirement(new u128(0)),
-      defactoMinimumStake: new u128(0)
+      requiredApplicationStake: new ApplicationStakeRequirement(createType('Balance', 0)),
+      requiredRoleStake: new RoleStakeRequirement(createType('Balance', 0)),
+      defactoMinimumStake: createType('Balance', 0)
     },
     {
       _description: 'Limit, full applications, no stake (application impossible)',
       numberOfApplications: 20,
       maxNumberOfApplications: 20,
-      requiredApplicationStake: new ApplicationStakeRequirement(new u128(0)),
-      requiredRoleStake: new RoleStakeRequirement(new u128(0)),
-      defactoMinimumStake: new u128(0)
+      requiredApplicationStake: new ApplicationStakeRequirement(createType('Balance', 0)),
+      requiredRoleStake: new RoleStakeRequirement(createType('Balance', 0)),
+      defactoMinimumStake: createType('Balance', 0)
     },
     {
       _description: 'No limit, no applications, some stake',
       numberOfApplications: 0,
       maxNumberOfApplications: 0,
-      requiredApplicationStake: new ApplicationStakeRequirement(new u128(10)),
-      requiredRoleStake: new RoleStakeRequirement(new u128(0)),
-      defactoMinimumStake: new u128(0)
+      requiredApplicationStake: new ApplicationStakeRequirement(createType('Balance', 10)),
+      requiredRoleStake: new RoleStakeRequirement(createType('Balance', 0)),
+      defactoMinimumStake: createType('Balance', 0)
     },
     {
       _description: 'No limit, some applications, some stake',
       numberOfApplications: 15,
       maxNumberOfApplications: 0,
-      requiredApplicationStake: new ApplicationStakeRequirement(new u128(10)),
-      requiredRoleStake: new RoleStakeRequirement(new u128(0)),
-      defactoMinimumStake: new u128(0)
+      requiredApplicationStake: new ApplicationStakeRequirement(createType('Balance', 10)),
+      requiredRoleStake: new RoleStakeRequirement(createType('Balance', 0)),
+      defactoMinimumStake: createType('Balance', 0)
     },
     {
       _description: 'Limit, no applications, some stake',
       numberOfApplications: 0,
       maxNumberOfApplications: 20,
-      requiredApplicationStake: new ApplicationStakeRequirement(new u128(10)),
-      requiredRoleStake: new RoleStakeRequirement(new u128(0)),
-      defactoMinimumStake: new u128(0)
+      requiredApplicationStake: new ApplicationStakeRequirement(createType('Balance', 10)),
+      requiredRoleStake: new RoleStakeRequirement(createType('Balance', 0)),
+      defactoMinimumStake: createType('Balance', 0)
     },
     {
       _description: 'Limit, some applications, some stake',
       numberOfApplications: 10,
       maxNumberOfApplications: 20,
-      requiredApplicationStake: new ApplicationStakeRequirement(new u128(10)),
-      requiredRoleStake: new RoleStakeRequirement(new u128(0)),
-      defactoMinimumStake: new u128(0)
+      requiredApplicationStake: new ApplicationStakeRequirement(createType('Balance', 10)),
+      requiredRoleStake: new RoleStakeRequirement(createType('Balance', 0)),
+      defactoMinimumStake: createType('Balance', 0)
     },
     {
       _description: 'Limit, full applications, some stake',
       numberOfApplications: 20,
       maxNumberOfApplications: 20,
-      requiredApplicationStake: new ApplicationStakeRequirement(new u128(10)),
-      requiredRoleStake: new RoleStakeRequirement(new u128(0)),
-      defactoMinimumStake: new u128(0)
+      requiredApplicationStake: new ApplicationStakeRequirement(createType('Balance', 10)),
+      requiredRoleStake: new RoleStakeRequirement(createType('Balance', 0)),
+      defactoMinimumStake: createType('Balance', 0)
     }
   ];
 
   return (
     <Container>
       {permutations.map((permutation, key) => (
-        <Container className="outer opening" key={key}>
+        <Container className='outer opening' key={key}>
           <h4>{permutation._description}</h4>
-          <Container className="main">
+          <Container className='main'>
             <OpeningBodyApplicationsStatus {...permutation} />
           </Container>
         </Container>
@@ -189,51 +184,51 @@ export function OpeningApplicationsStakeRequirementByStake () {
   const permutations: (StakeRequirementProps & TestProps)[] = [
     {
       _description: 'No stakes required (should be empty)',
-      requiredApplicationStake: new ApplicationStakeRequirement(new u128(0)),
-      requiredRoleStake: new RoleStakeRequirement(new u128(0)),
-      defactoMinimumStake: new u128(0),
+      requiredApplicationStake: new ApplicationStakeRequirement(createType('Balance', 0)),
+      requiredRoleStake: new RoleStakeRequirement(createType('Balance', 0)),
+      defactoMinimumStake: createType('Balance', 0),
       maxNumberOfApplications: 0
     },
     {
       _description: 'App stake required; no role stake required',
-      requiredApplicationStake: new ApplicationStakeRequirement(new u128(500)),
-      requiredRoleStake: new RoleStakeRequirement(new u128(0)),
-      defactoMinimumStake: new u128(0),
+      requiredApplicationStake: new ApplicationStakeRequirement(createType('Balance', 500)),
+      requiredRoleStake: new RoleStakeRequirement(createType('Balance', 0)),
+      defactoMinimumStake: createType('Balance', 0),
       maxNumberOfApplications: 0
     },
     {
       _description: 'App stake required >; no role stake required',
-      requiredApplicationStake: new ApplicationStakeRequirement(new u128(500), StakeType.AtLeast),
-      requiredRoleStake: new RoleStakeRequirement(new u128(0)),
-      defactoMinimumStake: new u128(0),
+      requiredApplicationStake: new ApplicationStakeRequirement(createType('Balance', 500), StakeType.AtLeast),
+      requiredRoleStake: new RoleStakeRequirement(createType('Balance', 0)),
+      defactoMinimumStake: createType('Balance', 0),
       maxNumberOfApplications: 0
     },
     {
       _description: 'No app stake required; role stake required',
-      requiredApplicationStake: new ApplicationStakeRequirement(new u128(0)),
-      requiredRoleStake: new RoleStakeRequirement(new u128(101)),
-      defactoMinimumStake: new u128(0),
+      requiredApplicationStake: new ApplicationStakeRequirement(createType('Balance', 0)),
+      requiredRoleStake: new RoleStakeRequirement(createType('Balance', 101)),
+      defactoMinimumStake: createType('Balance', 0),
       maxNumberOfApplications: 0
     },
     {
       _description: 'No app stake required; role stake required',
-      requiredApplicationStake: new ApplicationStakeRequirement(new u128(0), StakeType.AtLeast),
-      requiredRoleStake: new RoleStakeRequirement(new u128(102)),
-      defactoMinimumStake: new u128(0),
+      requiredApplicationStake: new ApplicationStakeRequirement(createType('Balance', 0), StakeType.AtLeast),
+      requiredRoleStake: new RoleStakeRequirement(createType('Balance', 102)),
+      defactoMinimumStake: createType('Balance', 0),
       maxNumberOfApplications: 0
     },
     {
       _description: '>= App stake required; role stake required',
-      requiredApplicationStake: new ApplicationStakeRequirement(new u128(101), StakeType.AtLeast),
-      requiredRoleStake: new RoleStakeRequirement(new u128(102)),
-      defactoMinimumStake: new u128(0),
+      requiredApplicationStake: new ApplicationStakeRequirement(createType('Balance', 101), StakeType.AtLeast),
+      requiredRoleStake: new RoleStakeRequirement(createType('Balance', 102)),
+      defactoMinimumStake: createType('Balance', 0),
       maxNumberOfApplications: 0
     },
     {
       _description: 'App stake required; no role stake required; dynamic minimum > 0',
-      requiredApplicationStake: new ApplicationStakeRequirement(new u128(500)),
-      requiredRoleStake: new RoleStakeRequirement(new u128(0)),
-      defactoMinimumStake: new u128(1000),
+      requiredApplicationStake: new ApplicationStakeRequirement(createType('Balance', 500)),
+      requiredRoleStake: new RoleStakeRequirement(createType('Balance', 0)),
+      defactoMinimumStake: createType('Balance', 1000),
       maxNumberOfApplications: 20
     }
   ];
@@ -241,11 +236,11 @@ export function OpeningApplicationsStakeRequirementByStake () {
   return (
     <Container>
       {permutations.map((permutation, key) => (
-        <Container className="outer opening" key={key}>
+        <Container className='outer opening' key={key}>
           <h4>{permutation._description}</h4>
           <Card fluid>
             <Card.Content>
-              <Container className="main">
+              <Container className='main'>
                 <OpeningBodyStakeRequirement {...permutation} />
               </Container>
             </Card.Content>
@@ -272,11 +267,11 @@ export function ReviewInProgress () {
   return (
     <Container>
       {permutations.map((permutation, key) => (
-        <Container className="outer opening" key={key}>
+        <Container className='outer opening' key={key}>
           <h4>{permutation._description}</h4>
           <Card fluid>
             <Card.Content>
-              <Container className="main">
+              <Container className='main'>
                 <OpeningBodyReviewInProgress {...permutation} />
               </Container>
             </Card.Content>
diff --git a/pioneer/packages/joy-roles/src/tabs/Opportunities.stories.tsx b/pioneer/packages/joy-roles/src/tabs/Opportunities.stories.tsx
index 10e9daf4a2..94e90ceff9 100644
--- a/pioneer/packages/joy-roles/src/tabs/Opportunities.stories.tsx
+++ b/pioneer/packages/joy-roles/src/tabs/Opportunities.stories.tsx
@@ -2,23 +2,13 @@ import React from 'react';
 import { number, select, text, withKnobs } from '@storybook/addon-knobs';
 import * as faker from 'faker';
 
-import { Option, Text, u32, u128 } from '@polkadot/types';
 import { Balance } from '@polkadot/types/interfaces';
 
-import {
-  Opening,
-  ApplicationRationingPolicy,
-  StakingPolicy
-} from '@joystream/types/hiring';
 import { mockStage } from '../mocks';
-import {
-  OpeningView,
-  OpeningStakeAndApplicationStatus
-} from './Opportunities';
+import { OpeningView,
+  OpeningStakeAndApplicationStatus } from './Opportunities';
 
-import {
-  stateMarkup
-} from '../openingStateMarkup';
+import { stateMarkup } from '../openingStateMarkup';
 
 import { ApplicationStakeRequirement, RoleStakeRequirement } from '../StakeRequirement';
 import { OpeningStageClassification, OpeningState } from '../classifiers';
@@ -27,6 +17,7 @@ import { OpeningMetadata } from '../OpeningMetadata';
 import 'semantic-ui-css/semantic.min.css';
 import '@polkadot/joy-roles/index.sass';
 import { WorkingGroups } from '../working_groups';
+import { createType } from '@joystream/types';
 
 export default {
   title: 'Roles / Components / Opportunities groups tab',
@@ -42,27 +33,28 @@ export default {
 
 export function tomorrow (): Date {
   const d = new Date();
+
   d.setDate(d.getDate() + 1);
+
   return d;
 }
 
 export function yesterday (): Date {
   const d = new Date();
+
   d.setDate(d.getDate() - 1);
+
   return d;
 }
 
 export function newMockHumanReadableText (obj: any) {
-  return new Text(JSON.stringify(obj));
+  return createType('Text', JSON.stringify(obj));
 }
 
-export const opening = new Opening({
-  created: new u32(100),
+export const opening = createType('Opening', {
+  created: 100,
   stage: mockStage,
-  max_review_period_length: new u32(100),
-  application_rationing_policy: new Option(ApplicationRationingPolicy),
-  application_staking_policy: new Option(StakingPolicy),
-  role_staking_policy: new Option(StakingPolicy),
+  max_review_period_length: 100,
   human_readable_text: newMockHumanReadableText({
     version: 1,
     headline: text('Headline', 'Help us curate awesome content', 'Role'),
@@ -102,10 +94,12 @@ export const opening = new Opening({
 });
 
 const stateOptions: any = (function () {
-  const options: any = {};
-  stateMarkup.forEach((value, key) => {
-    options[value.description] = key;
+  const options: Record<string, OpeningState> = {};
+
+  Object.entries(stateMarkup).forEach(([key, value]) => {
+    options[value.description] = parseInt(key) as OpeningState;
   });
+
   return options;
 }());
 
@@ -137,15 +131,15 @@ export function OpportunitySandbox () {
     numberOfApplications: number('Applications count', 0, applicationSliderOptions, 'Role rationing policy'),
     maxNumberOfApplications: number('Application max', 0, applicationSliderOptions, 'Role rationing policy'),
     requiredApplicationStake: new ApplicationStakeRequirement(
-      new u128(number('Application stake', 500, moneySliderOptions, 'Role stakes'))
+      createType('Balance', number('Application stake', 500, moneySliderOptions, 'Role stakes'))
     ),
     requiredRoleStake: new RoleStakeRequirement(
-      new u128(number('Role stake', 0, moneySliderOptions, 'Role stakes'))
+      createType('Balance', number('Role stake', 0, moneySliderOptions, 'Role stakes'))
     ),
-    defactoMinimumStake: new u128(0)
+    defactoMinimumStake: createType('Balance', 0)
   };
 
-  const defactoMinimumStake: Balance = new u128(number('Dynamic min stake', 0, moneySliderOptions, 'Role stakes'));
+  const defactoMinimumStake: Balance = createType('Balance', number('Dynamic min stake', 0, moneySliderOptions, 'Role stakes'));
 
   const meta: OpeningMetadata = {
     id: '1',
diff --git a/pioneer/packages/joy-roles/src/tabs/Opportunities.tsx b/pioneer/packages/joy-roles/src/tabs/Opportunities.tsx
index b85d67de8c..fcec5b6bf2 100644
--- a/pioneer/packages/joy-roles/src/tabs/Opportunities.tsx
+++ b/pioneer/packages/joy-roles/src/tabs/Opportunities.tsx
@@ -5,8 +5,7 @@ import marked from 'marked';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
 import { Link, useHistory, useLocation } from 'react-router-dom';
-import {
-  Button,
+import { Button,
   Card,
   Container,
   Grid,
@@ -16,13 +15,12 @@ import {
   Message,
   Statistic,
   Dropdown,
-  DropdownProps
-} from 'semantic-ui-react';
+  DropdownProps } from 'semantic-ui-react';
 
 import { formatBalance } from '@polkadot/util';
 import { Balance } from '@polkadot/types/interfaces';
 
-import { useMyAccount } from '@polkadot/joy-utils/MyAccountContext';
+import { useMyAccount } from '@polkadot/joy-utils/react/hooks';
 
 import { Countdown } from '../elements';
 import { ApplicationStakeRequirement, RoleStakeRequirement } from '../StakeRequirement';
@@ -32,13 +30,11 @@ import { MemberId } from '@joystream/types/members';
 
 import { OpeningStageClassification, OpeningState } from '../classifiers';
 import { OpeningMetadataProps } from '../OpeningMetadata';
-import {
-  openingIcon,
+import { openingIcon,
   openingClass,
-  openingDescription
-} from '../openingStateMarkup';
+  openingDescription } from '../openingStateMarkup';
 
-import { Loadable } from '@polkadot/joy-utils/index';
+import { Loadable } from '@polkadot/joy-utils/react/hocs';
 import styled from 'styled-components';
 import _ from 'lodash';
 import { WorkingGroups, AvailableGroups, workerRoleNameByGroup } from '../working_groups';
@@ -65,38 +61,40 @@ function classificationDescription (state: OpeningState): string {
 
 export function OpeningHeader (props: OpeningStage) {
   let time = null;
+
   if (props.stage.starting_time.getTime() > 0) {
-    time = <Moment unix format="DD/MM/YYYY, hh:mm A">{props.stage.starting_time.getTime() / 1000}</Moment>;
+    time = <Moment unix format='DD/MM/YYYY, hh:mm A'>{props.stage.starting_time.getTime() / 1000}</Moment>;
   }
+
   return (
-    <Grid columns="equal">
-      <Grid.Column className="status">
-        <Label ribbon size="large">
+    <Grid columns='equal'>
+      <Grid.Column className='status'>
+        <Label ribbon size='large'>
           {openingIcon(props.stage.state)}
           {openingDescription(props.stage.state)}
         </Label>
       </Grid.Column>
-      <Grid.Column className="meta" textAlign="right">
+      <Grid.Column className='meta' textAlign='right'>
         <Label>
-          <Icon name="history" /> {classificationDescription(props.stage.state)}&nbsp;
+          <Icon name='history' /> {classificationDescription(props.stage.state)}&nbsp;
           {time}
           <Label.Detail>
             <Link to={`/explorer/query/${props.stage.starting_block_hash}`}>
-              <Icon name="cube" />
+              <Icon name='cube' />
               <NumberFormat value={props.stage.starting_block}
-                displayType="text"
+                displayType='text'
                 thousandSeparator={true}
               />
             </Link>
           </Label.Detail>
           <Label.Detail>
-            <Icon name="hashtag" /> {props.meta.id}
+            <Icon name='hashtag' /> {props.meta.id}
           </Label.Detail>
         </Label>
         <a>
           <CopyToClipboard text={window.location.origin + '/#/working-groups/opportunities/' + props.meta.group + '/' + props.meta.id}>
             <Label>
-              <Icon name="copy" /> Copy link
+              <Icon name='copy' /> Copy link
             </Label>
           </CopyToClipboard>
         </a>
@@ -153,11 +151,11 @@ export function OpeningBodyStakeRequirement (props: StakeRequirementProps) {
   }
 
   const plural = (props.requiredApplicationStake.anyRequirement() && props.requiredRoleStake.anyRequirement()) ? 's' : null;
-  let title = <Message.Header color="orange" as='h5'><Icon name="shield" /> Stake{plural} required!</Message.Header>;
+  let title = <Message.Header color='orange' as='h5'><Icon name='shield' /> Stake{plural} required!</Message.Header>;
   let explanation = null;
 
   if (!props.defactoMinimumStake.isZero()) {
-    title = <Message.Header color="orange" as='h5'><Icon name="shield" /> Increased stake{plural} required!</Message.Header>;
+    title = <Message.Header color='orange' as='h5'><Icon name='shield' /> Increased stake{plural} required!</Message.Header>;
     explanation = (
       <p>
         However, in order to be in the top {props.maxNumberOfApplications} candidates, you wil need to stake at least <strong>{formatBalance(props.defactoMinimumStake)} in total</strong>.
@@ -166,7 +164,7 @@ export function OpeningBodyStakeRequirement (props: StakeRequirementProps) {
   }
 
   return (
-    <Message className="stake-requirements" warning>
+    <Message className='stake-requirements' warning>
       {title}
       {props.requiredApplicationStake.describe()}
       {props.requiredRoleStake.describe()}
@@ -197,12 +195,13 @@ function applicationPossibleWithIncresedStake (props: OpeningStakeAndApplication
 
 export function ApplicationCount (props: ApplicationCountProps) {
   let max_applications = null;
+
   if (props.maxNumberOfApplications > 0) {
     max_applications = (
       <span>
         /
         <NumberFormat value={props.maxNumberOfApplications}
-          displayType="text"
+          displayType='text'
           thousandSeparator={true}
         />
       </span>
@@ -212,7 +211,7 @@ export function ApplicationCount (props: ApplicationCountProps) {
   return (
     <span>
       <NumberFormat value={props.numberOfApplications + (props.applied ? 1 : 0)}
-        displayType="text"
+        displayType='text'
         thousandSeparator={true}
       />
       {max_applications}
@@ -223,22 +222,25 @@ export function ApplicationCount (props: ApplicationCountProps) {
 type OpeningBodyCTAProps = OpeningStakeAndApplicationStatus & OpeningStage & OpeningBodyProps & MemberIdProps
 
 function OpeningBodyCTAView (props: OpeningBodyCTAProps) {
+  const accountCtx = useMyAccount();
+
   if (props.stage.state !== OpeningState.AcceptingApplications || applicationImpossible(props.applications)) {
     return null;
   }
 
   let message = (
     <Message positive>
-      <Icon name="check circle" /> No stake required
+      <Icon name='check circle' /> No stake required
     </Message>
   );
 
   if (hasAnyStake(props)) {
     const balance = !props.defactoMinimumStake.isZero() ? props.defactoMinimumStake : props.requiredApplicationStake.hard.add(props.requiredRoleStake.hard);
     const plural = (props.requiredApplicationStake.anyRequirement() && props.requiredRoleStake.anyRequirement()) ? 's totalling' : ' of';
+
     message = (
       <Message warning icon>
-        <Icon name="warning sign" />
+        <Icon name='warning sign' />
         <Message.Content>
           Stake{plural} at least <strong>{formatBalance(balance)}</strong> required!
         </Message.Content>
@@ -248,20 +250,19 @@ function OpeningBodyCTAView (props: OpeningBodyCTAProps) {
 
   let applyButton = (
     <Link to={'/working-groups/opportunities/' + props.meta.group + '/' + props.meta.id + '/apply'}>
-      <Button icon fluid positive size="huge">
+      <Button icon fluid positive size='huge'>
         APPLY NOW
-        <Icon name="angle right" />
+        <Icon name='angle right' />
       </Button>
     </Link>
   );
 
-  const accountCtx = useMyAccount();
   if (!accountCtx.state.address) {
     applyButton = (
       <Message error icon>
-        <Icon name="info circle" />
+        <Icon name='info circle' />
         <Message.Content>
-          You will need an account to apply for this role. You can generate one in the <Link to="/accounts">Accounts</Link> section.
+          You will need an account to apply for this role. You can generate one in the <Link to='/accounts'>Accounts</Link> section.
         </Message.Content>
       </Message>
     );
@@ -269,9 +270,9 @@ function OpeningBodyCTAView (props: OpeningBodyCTAProps) {
   } else if (!props.member_id) {
     applyButton = (
       <Message error icon>
-        <Icon name="info circle" />
+        <Icon name='info circle' />
         <Message.Content>
-          You will need a membership to apply for this role. You can sign up in the <Link to="/members">Membership</Link> section.
+          You will need a membership to apply for this role. You can sign up in the <Link to='/members'>Membership</Link> section.
         </Message.Content>
       </Message>
     );
@@ -289,6 +290,7 @@ function OpeningBodyCTAView (props: OpeningBodyCTAProps) {
 export function OpeningBodyApplicationsStatus (props: OpeningStakeAndApplicationStatus) {
   const impossible = applicationImpossible(props);
   const msg = new MessageState();
+
   if (impossible) {
     msg.setNegative();
   } else if (applicationPossibleWithIncresedStake(props)) {
@@ -296,6 +298,7 @@ export function OpeningBodyApplicationsStatus (props: OpeningStakeAndApplication
   }
 
   let order = null;
+
   if (hasAnyStake(props)) {
     order = ', ordered by total stake,';
   }
@@ -308,13 +311,14 @@ export function OpeningBodyApplicationsStatus (props: OpeningStakeAndApplication
       <span>
         /
         <NumberFormat value={props.maxNumberOfApplications}
-          displayType="text"
+          displayType='text'
           thousandSeparator={true}
         />
       </span>
     );
 
     let disclaimer = null;
+
     if (impossible) {
       disclaimer = 'No futher applications will be considered.';
     }
@@ -326,10 +330,10 @@ export function OpeningBodyApplicationsStatus (props: OpeningStakeAndApplication
 
   return (
     <Message positive={msg.positive} warning={msg.warning} negative={msg.negative}>
-      <Statistic size="small">
+      <Statistic size='small'>
         <Statistic.Value>
           <NumberFormat value={props.numberOfApplications + (props.applied ? 1 : 0)}
-            displayType="text"
+            displayType='text'
             thousandSeparator={true}
           />
           {max_applications}
@@ -344,13 +348,14 @@ export function OpeningBodyApplicationsStatus (props: OpeningStakeAndApplication
 export function OpeningBodyReviewInProgress (props: OpeningStageClassification) {
   let countdown = null;
   let expected = null;
+
   if (props.review_end_time && props.starting_time.getTime() > 0) {
     countdown = <Countdown end={props.review_end_time} />;
     expected = (
       <span>
         &nbsp;(expected on&nbsp;
         <strong>
-          <Moment format="MMM DD, YYYY  HH:mm:ss" date={props.review_end_time} interval={0} />
+          <Moment format='MMM DD, YYYY  HH:mm:ss' date={props.review_end_time} interval={0} />
         </strong>
         )
       </span>
@@ -358,7 +363,7 @@ export function OpeningBodyReviewInProgress (props: OpeningStageClassification)
   }
 
   return (
-    <Message info className="countdown">
+    <Message info className='countdown'>
       <h4>Review process has begun</h4>
       {countdown}
 
@@ -366,7 +371,7 @@ export function OpeningBodyReviewInProgress (props: OpeningStageClassification)
         <span>Candidates will be selected by block&nbsp;
           <strong>
             <NumberFormat value={props.review_end_block}
-              displayType="text"
+              displayType='text'
               thousandSeparator={true}
             />
           </strong>
@@ -385,7 +390,9 @@ type BlockTimeProps = {
 function timeInHumanFormat (block_time_in_seconds: number, blocks: number) {
   const d1 = new Date();
   const d2 = new Date(d1.getTime());
+
   d2.setSeconds(d2.getSeconds() + (block_time_in_seconds * blocks));
+
   return <Moment duration={d1} date={d2} interval={0} />;
 }
 
@@ -399,10 +406,11 @@ export type OpeningBodyProps = DefactoMinimumStake & StakeRequirementProps & Blo
 export function OpeningBody (props: OpeningBodyProps) {
   const jobDesc = marked(props.text.job.description || '');
   const blockNumber = <NumberFormat value={props.opening.max_review_period_length.toNumber()}
-    displayType="text"
+    displayType='text'
     thousandSeparator={true} />;
 
   let stakeRequirements = null;
+
   switch (props.stage.state) {
     case OpeningState.WaitingToBegin:
     case OpeningState.AcceptingApplications:
@@ -415,31 +423,31 @@ export function OpeningBody (props: OpeningBodyProps) {
   }
 
   return (
-    <Grid columns="equal">
-      <Grid.Column width={10} className="summary">
+    <Grid columns='equal'>
+      <Grid.Column width={10} className='summary'>
         <Card.Header>
           <OpeningReward text={props.text.reward} />
         </Card.Header>
-        <h4 className="headline">{props.text.headline}</h4>
+        <h4 className='headline'>{props.text.headline}</h4>
         <h5>Role description</h5>
         <div dangerouslySetInnerHTML={{ __html: jobDesc }} />
         <h5>Hiring process details</h5>
         <List>
           <List.Item>
-            <List.Icon name="clock" />
+            <List.Icon name='clock' />
             <List.Content>
               The maximum review period for this opening is <strong>{blockNumber} blocks</strong> (approximately <strong>{timeInHumanFormat(props.block_time_in_seconds, props.opening.max_review_period_length.toNumber())}</strong>).
             </List.Content>
           </List.Item>
           {props.text.process && props.text.process.details.map((detail, key) => (
             <List.Item key={key}>
-              <List.Icon name="info circle" />
+              <List.Icon name='info circle' />
               <List.Content>{detail}</List.Content>
             </List.Item>
           ))}
         </List>
       </Grid.Column>
-      <Grid.Column width={6} className="details">
+      <Grid.Column width={6} className='details'>
         <OpeningBodyApplicationsStatus {...props.applications} />
         {stakeRequirements}
         <OpeningBodyCTAView {...props} {...props.applications} />
@@ -454,7 +462,7 @@ type OpeningRewardProps = {
 
 function OpeningReward (props: OpeningRewardProps) {
   return (
-    <Statistic size="small">
+    <Statistic size='small'>
       <Statistic.Label>Reward</Statistic.Label>
       <Statistic.Value>{props.text}</Statistic.Value>
     </Statistic>
@@ -478,7 +486,7 @@ type OpeningViewProps = WorkingGroupOpening & BlockTimeProps & MemberIdProps
 
 export const OpeningView = Loadable<OpeningViewProps>(
   ['opening', 'block_time_in_seconds'],
-  props => {
+  (props) => {
     const text = props.opening.parse_human_readable_text_with_fallback();
     const isLeadOpening = props.meta.type?.isOfType('Leader');
 
@@ -490,11 +498,11 @@ export const OpeningView = Loadable<OpeningViewProps>(
             { _.startCase(props.meta.group) }{ isLeadOpening ? ' Lead' : '' }
           </OpeningLabel>
         </OpeningTitle>
-        <Card fluid className="container">
-          <Card.Content className="header">
+        <Card fluid className='container'>
+          <Card.Content className='header'>
             <OpeningHeader stage={props.stage} meta={props.meta} />
           </Card.Content>
-          <Card.Content className="main">
+          <Card.Content className='main'>
             <OpeningBody
               {...props.applications}
               text={text}
@@ -532,21 +540,24 @@ export type OpeningsViewProps = MemberIdProps & {
 
 export const OpeningsView = Loadable<OpeningsViewProps>(
   ['openings', 'block_time_in_seconds'],
-  props => {
+  (props) => {
     const history = useHistory();
     const location = useLocation();
     const basePath = '/working-groups/opportunities';
     const { group = null, lead = false } = props;
+
     const onFilterChange: DropdownProps['onChange'] = (e, data) => {
       const newPath = data.value || basePath;
+
       if (newPath !== location.pathname) { history.push(newPath as string); }
     };
+
     const groupOption = (group: WorkingGroups | null, lead = false) => ({
       value: `${basePath}${group ? `/${group}` : ''}${lead ? '/lead' : ''}`,
       text: _.startCase(`${group || 'All opportunities'}`) + (lead ? ' (Lead)' : '')
     });
     // Can assert "props.openings!" because we're using "Loadable" which prevents them from beeing undefined
-    const filteredOpenings = props.openings!.filter(o =>
+    const filteredOpenings = props.openings!.filter((o) =>
       (!group || o.meta.group === group) &&
       (!group || !o.meta.type || (lead === o.meta.type.isOfType('Leader')))
     );
@@ -555,12 +566,12 @@ export const OpeningsView = Loadable<OpeningsViewProps>(
       <Container>
         <FilterOpportunities>
           <FilterOpportunitiesDropdown
-            placeholder="All opportunities"
+            placeholder='All opportunities'
             options={
               [groupOption(null, false)]
-                .concat(AvailableGroups.map(g => groupOption(g)))
+                .concat(AvailableGroups.map((g) => groupOption(g)))
                 // Currently we filter-out content curators, because they don't use the new working-group module yet
-                .concat(AvailableGroups.filter(g => g !== WorkingGroups.ContentCurators).map(g => groupOption(g, true)))
+                .concat(AvailableGroups.filter((g) => g !== WorkingGroups.ContentCurators).map((g) => groupOption(g, true)))
             }
             value={groupOption(group, lead).value}
             onChange={onFilterChange}
@@ -571,7 +582,7 @@ export const OpeningsView = Loadable<OpeningsViewProps>(
           filteredOpenings.length
             ? filteredOpenings.map((opening, key) => (
               <OpeningView
-                key={key}
+                key={`${opening.meta.group}-${opening.meta.id}`}
                 {...opening}
                 block_time_in_seconds={props.block_time_in_seconds as number}
                 member_id={props.member_id} />
diff --git a/pioneer/packages/joy-roles/src/tabs/Opportunity.controller.tsx b/pioneer/packages/joy-roles/src/tabs/Opportunity.controller.tsx
index 420c7037c6..e7d60b2a0e 100644
--- a/pioneer/packages/joy-roles/src/tabs/Opportunity.controller.tsx
+++ b/pioneer/packages/joy-roles/src/tabs/Opportunity.controller.tsx
@@ -1,16 +1,15 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
-import { Controller, memoize, View, Params } from '@polkadot/joy-utils/index';
+import { Controller } from '@polkadot/joy-utils/react/helpers';
+import { View, RenderComponentProps } from '@polkadot/joy-utils/react/hocs/View';
 
 import { ITransport } from '../transport';
 
 import { MemberId } from '@joystream/types/members';
 
-import {
-  WorkingGroupOpening,
+import { WorkingGroupOpening,
   OpeningError,
-  OpeningView
-} from './Opportunities';
+  OpeningView } from './Opportunities';
 
 import { WorkingGroups, AvailableGroups } from '../working_groups';
 
@@ -21,40 +20,41 @@ type State = {
 }
 
 export class OpportunityController extends Controller<State, ITransport> {
-  constructor (transport: ITransport, memberId?: MemberId, initialState: State = {}) {
+  constructor (transport: ITransport, initialState: State = {}) {
     super(transport, initialState);
+    this.state.blockTime = this.transport.expectedBlockTime();
+  }
+
+  setMemberId (memberId?: MemberId) {
     this.state.memberId = memberId;
-    this.getBlocktime();
+    this.dispatch();
   }
 
-  @memoize()
   async getOpportunity (group: string | undefined, id: string | undefined) {
-    if (!id) {
-      return this.onError('OpportunityController: no ID provided in params');
+    if (!id || !group) {
+      return;
     }
 
-    if (!group || !AvailableGroups.includes(group as any)) {
+    if (!AvailableGroups.includes(group as any)) {
       return this.onError('OppportunityController: invalid group provided in params');
     }
 
     this.state.opportunity = await this.transport.groupOpening(group as WorkingGroups, parseInt(id));
     this.dispatch();
   }
-
-  async getBlocktime () {
-    this.state.blockTime = await this.transport.expectedBlockTime();
-    this.dispatch();
-  }
 }
 
-const renderOpeningView = (state: State, controller: OpportunityController, params: Params) => {
-  controller.getOpportunity(params.get('group'), params.get('id'));
+function OpportunityRenderer ({ state, controller, params }: RenderComponentProps<OpportunityController, State>) {
+  useEffect(() => {
+    void controller.getOpportunity(params.get('group'), params.get('id'));
+  }, [params]);
+
   return (
     <OpeningView {...state.opportunity!} block_time_in_seconds={state.blockTime!} member_id={state.memberId} />
   );
-};
+}
 
 export const OpportunityView = View<OpportunityController, State>({
   errorComponent: OpeningError,
-  render: renderOpeningView
+  renderComponent: OpportunityRenderer
 });
diff --git a/pioneer/packages/joy-roles/src/tabs/WorkingGroup.controller.tsx b/pioneer/packages/joy-roles/src/tabs/WorkingGroup.controller.tsx
index feff90daf4..66a0b08193 100644
--- a/pioneer/packages/joy-roles/src/tabs/WorkingGroup.controller.tsx
+++ b/pioneer/packages/joy-roles/src/tabs/WorkingGroup.controller.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 
-import { Controller, View } from '@polkadot/joy-utils/index';
+import { Controller } from '@polkadot/joy-utils/react/helpers';
+import { View } from '@polkadot/joy-utils/react/hocs';
 
 import { ITransport } from '../transport';
 
-import {
-  ContentCurators,
+import { ContentCurators,
   WorkingGroupMembership,
-  StorageProviders
-} from './WorkingGroup';
+  StorageProviders } from './WorkingGroup';
 
 import styled from 'styled-components';
+import { normalizeError } from '@polkadot/joy-utils/functions/misc';
 
 type State = {
   contentCurators?: WorkingGroupMembership;
@@ -20,22 +20,29 @@ type State = {
 export class WorkingGroupsController extends Controller<State, ITransport> {
   constructor (transport: ITransport, initialState: State = {}) {
     super(transport, {});
+  }
+
+  refreshState () {
     this.getCurationGroup();
     this.getStorageGroup();
   }
 
   getCurationGroup () {
-    this.transport.curationGroup().then((value: WorkingGroupMembership) => {
-      this.setState({ contentCurators: value });
-      this.dispatch();
-    });
+    this.transport.curationGroup()
+      .then((value: WorkingGroupMembership) => {
+        this.setState({ contentCurators: value });
+        this.dispatch();
+      })
+      .catch((e) => this.onError(normalizeError(e)));
   }
 
   getStorageGroup () {
-    this.transport.storageGroup().then((value: WorkingGroupMembership) => {
-      this.setState({ storageProviders: value });
-      this.dispatch();
-    });
+    this.transport.storageGroup()
+      .then((value: WorkingGroupMembership) => {
+        this.setState({ storageProviders: value });
+        this.dispatch();
+      })
+      .catch((e) => this.onError(normalizeError(e)));
   }
 }
 
@@ -49,7 +56,7 @@ const WorkingGroupsOverview = styled.div`
 `;
 
 export const WorkingGroupsView = View<WorkingGroupsController, State>(
-  (state) => (
+  ({ state }) => (
     <WorkingGroupsOverview>
       <ContentCurators {...state.contentCurators}/>
       <StorageProviders {...state.storageProviders}/>
diff --git a/pioneer/packages/joy-roles/src/tabs/WorkingGroup.stories.tsx b/pioneer/packages/joy-roles/src/tabs/WorkingGroup.stories.tsx
index 5b066e8ebc..712524f7b1 100644
--- a/pioneer/packages/joy-roles/src/tabs/WorkingGroup.stories.tsx
+++ b/pioneer/packages/joy-roles/src/tabs/WorkingGroup.stories.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 import { boolean, number, text, withKnobs } from '@storybook/addon-knobs';
 
-import { u128, GenericAccountId } from '@polkadot/types';
-
-import { MemberId } from '@joystream/types/members';
+import { createType } from '@joystream/types';
 
 import { ContentCurators } from '@polkadot/joy-roles/tabs/WorkingGroup';
 import { GroupMember } from '../elements';
@@ -22,59 +20,59 @@ export default {
 export function ContentCuratorsSection () {
   const members: GroupMember[] = [
     {
-      memberId: new MemberId(1),
-      roleAccount: new GenericAccountId('5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp'),
+      memberId: createType('MemberId', 1),
+      roleAccount: createType('AccountId', '5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp'),
       profile: mockProfile(
         text('Handle', 'benholdencrowther', 'Ben'),
         text('Avatar URL', 'https://www.benholdencrowther.com/wp-content/uploads/2019/03/Hanging_Gardens_of_Babylon.jpg', 'Ben')
       ),
       title: text('Title', 'Curation lead', 'Ben'),
-      stake: new u128(number('Stake', 10101, {}, 'Ben')),
+      stake: createType('Balance', number('Stake', 10101, {}, 'Ben')),
       workerId: 1,
       group: WorkingGroups.ContentCurators
     },
     {
-      memberId: new MemberId(2),
-      roleAccount: new GenericAccountId('5DfJWGbBAH8hLAg8rcRYZW5BEZbE4BJeCQKoxUeqoyewLSew'),
+      memberId: createType('MemberId', 2),
+      roleAccount: createType('AccountId', '5DfJWGbBAH8hLAg8rcRYZW5BEZbE4BJeCQKoxUeqoyewLSew'),
       profile: mockProfile(text('Handle', 'bwhm0', 'Martin')),
       title: text('Title', 'Content curator', 'Martin'),
-      stake: new u128(number('Stake', 10101, {}, 'Martin')),
+      stake: createType('Balance', number('Stake', 10101, {}, 'Martin')),
       workerId: 2,
       group: WorkingGroups.ContentCurators
     },
     {
-      memberId: new MemberId(3),
-      roleAccount: new GenericAccountId('5DQqNWRFPruFs9YKheVMqxUbqoXeMzAWfVfcJgzuia7NA3D3'),
+      memberId: createType('MemberId', 3),
+      roleAccount: createType('AccountId', '5DQqNWRFPruFs9YKheVMqxUbqoXeMzAWfVfcJgzuia7NA3D3'),
       profile: mockProfile(
         'yourheropaul',
         'https://yhp.io/img/paul.svg'
       ),
       title: text('Title', 'Content curator', 'Paul'),
-      stake: new u128(number('Stake', 10101, {}, 'Paul')),
+      stake: createType('Balance', number('Stake', 10101, {}, 'Paul')),
       workerId: 3,
       group: WorkingGroups.ContentCurators
     },
     {
-      memberId: new MemberId(4),
-      roleAccount: new GenericAccountId('5GSMNn8Sy8k64mGUWPDafjMZu9bQNX26GujbBQ1LeJpNbrfg'),
+      memberId: createType('MemberId', 4),
+      roleAccount: createType('AccountId', '5GSMNn8Sy8k64mGUWPDafjMZu9bQNX26GujbBQ1LeJpNbrfg'),
       profile: mockProfile(
         'alex_joystream',
         'https://avatars2.githubusercontent.com/u/153928?s=200&v=4'
       ),
       title: text('Title', 'Content curator', 'Alex'),
-      stake: new u128(number('Stake', 10101, {}, 'Alex')),
+      stake: createType('Balance', number('Stake', 10101, {}, 'Alex')),
       workerId: 4,
       group: WorkingGroups.ContentCurators
     },
     {
-      memberId: new MemberId(5),
-      roleAccount: new GenericAccountId('5Gn9n7SDJ7VgHqHQWYzkSA4vX6DCmS5TFWdHxikTXp9b4L32'),
+      memberId: createType('MemberId', 5),
+      roleAccount: createType('AccountId', '5Gn9n7SDJ7VgHqHQWYzkSA4vX6DCmS5TFWdHxikTXp9b4L32'),
       profile: mockProfile(
         'mokhtar',
         'https://avatars2.githubusercontent.com/u/1621012?s=460&v=4'
       ),
       title: text('Title', 'Content curator', 'Mokhtar'),
-      stake: new u128(number('Stake', 10101, {}, 'Mokhtar')),
+      stake: createType('Balance', number('Stake', 10101, {}, 'Mokhtar')),
       workerId: 5,
       group: WorkingGroups.ContentCurators
     }
diff --git a/pioneer/packages/joy-roles/src/tabs/WorkingGroup.tsx b/pioneer/packages/joy-roles/src/tabs/WorkingGroup.tsx
index 156cfda5dc..14f765426f 100644
--- a/pioneer/packages/joy-roles/src/tabs/WorkingGroup.tsx
+++ b/pioneer/packages/joy-roles/src/tabs/WorkingGroup.tsx
@@ -3,7 +3,7 @@ import { Button, Card, Icon, Message, SemanticICONS } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 
 import { GroupLeadView, GroupMember, GroupMemberView, GroupLead } from '../elements';
-import { Loadable } from '@polkadot/joy-utils/index';
+import { Loadable } from '@polkadot/joy-utils/react/hocs';
 
 import { WorkingGroups } from '../working_groups';
 import styled from 'styled-components';
@@ -35,7 +35,7 @@ const JoinRole = ({ group, lead = false, title, description }: JoinRoleProps) =>
     <Message.Header>{title}</Message.Header>
     <p>{description}</p>
     <Link to={`/working-groups/opportunities/${group}${lead ? '/lead' : ''}`}>
-      <Button icon labelPosition="right" color="green" positive>
+      <Button icon labelPosition='right' color='green' positive>
         Find out more
         <Icon name={'right arrow' as SemanticICONS} />
       </Button>
@@ -93,6 +93,7 @@ const GroupOverview = Loadable<GroupOverviewProps>(
     const joinDesc = customJoinDesc || `There are openings for new ${groupName}. This is a great way to support Joystream!`;
     const becomeLeadTitle = customBecomeLeadTitle || `Become ${groupName} Lead!`;
     const becomeLeadDesc = customBecomeLeadDesc || `An opportunity to become ${groupName} Leader is currently available! This is a great way to support Joystream!`;
+
     return (
       <GroupOverviewSection>
         <h2>{ groupName }</h2>
@@ -151,6 +152,7 @@ export const CurrentLead = Loadable<CurrentLeadProps>(
   ['loaded'],
   ({ customLeadDesc, groupName, lead }: CurrentLeadProps) => {
     const leadDesc = customLeadDesc || `This role is responsible for hiring ${groupName}.`;
+
     return (
       <LeadSection>
         <Message>
diff --git a/pioneer/packages/joy-roles/src/transport.mock.ts b/pioneer/packages/joy-roles/src/transport.mock.ts
index c66cf19a40..b6893396fb 100644
--- a/pioneer/packages/joy-roles/src/transport.mock.ts
+++ b/pioneer/packages/joy-roles/src/transport.mock.ts
@@ -1,20 +1,14 @@
 import { Observable } from 'rxjs';
 import { Balance } from '@polkadot/types/interfaces';
-import { Option, u32, u128, GenericAccountId } from '@polkadot/types';
 
-import { Subscribable, Transport as TransportBase } from '@polkadot/joy-utils/index';
+import { Subscribable } from '@polkadot/joy-utils/react/helpers';
+import MockTransportBase from '@polkadot/joy-utils/transport/mock/base';
 
 import { ITransport } from './transport';
 
-import { MemberId } from '@joystream/types/members';
-import {
-  Opening,
-  ApplicationRationingPolicy,
-  StakingPolicy
-} from '@joystream/types/hiring';
+import { createType } from '@joystream/types';
 
 import { WorkingGroupMembership, GroupLeadStatus } from './tabs/WorkingGroup';
-import { CuratorId } from '@joystream/types/content-working-group';
 import { WorkingGroupOpening } from './tabs/Opportunities';
 import { ActiveRole, OpeningApplication } from './tabs/MyRoles';
 import { ApplicationStakeRequirement, RoleStakeRequirement, StakeType } from './StakeRequirement';
@@ -27,15 +21,7 @@ import * as faker from 'faker';
 import { mockProfile, mockStage } from './mocks';
 import { WorkingGroups, workerRoleNameByGroup } from './working_groups';
 
-export class Transport extends TransportBase implements ITransport {
-  protected simulateApiResponse<T> (value: T): Promise<T> {
-    return this.promise<T>(value, this.randomTimeout());
-  }
-
-  protected randomTimeout (min = 1, max = 20): number {
-    return Math.random() * (max - min) + min;
-  }
-
+export class Transport extends MockTransportBase implements ITransport {
   groupLeadStatus (group: WorkingGroups = WorkingGroups.ContentCurators): Promise<GroupLeadStatus> {
     return this.simulateApiResponse<GroupLeadStatus>({
       loaded: true
@@ -49,59 +35,59 @@ export class Transport extends TransportBase implements ITransport {
       leadRolesAvailable: false,
       workers: [
         {
-          memberId: new MemberId(1),
-          roleAccount: new GenericAccountId('5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp'),
+          memberId: createType('MemberId', 1),
+          roleAccount: createType('AccountId', '5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp'),
           profile: mockProfile(
             'benholdencrowther',
             'https://www.benholdencrowther.com/wp-content/uploads/2019/03/Hanging_Gardens_of_Babylon.jpg'
           ),
           title: 'Content curator',
-          stake: new u128(10101),
+          stake: createType('Balance', 10101),
           workerId: 1,
           group: WorkingGroups.ContentCurators
         },
         {
-          memberId: new MemberId(2),
-          roleAccount: new GenericAccountId('5DfJWGbBAH8hLAg8rcRYZW5BEZbE4BJeCQKoxUeqoyewLSew'),
+          memberId: createType('MemberId', 2),
+          roleAccount: createType('AccountId', '5DfJWGbBAH8hLAg8rcRYZW5BEZbE4BJeCQKoxUeqoyewLSew'),
           profile: mockProfile('bwhm0'),
           title: 'Content curator',
-          stake: new u128(10101),
+          stake: createType('Balance', 10101),
           workerId: 2,
           group: WorkingGroups.ContentCurators
         },
         {
-          memberId: new MemberId(3),
-          roleAccount: new GenericAccountId('5DQqNWRFPruFs9YKheVMqxUbqoXeMzAWfVfcJgzuia7NA3D3'),
+          memberId: createType('MemberId', 3),
+          roleAccount: createType('AccountId', '5DQqNWRFPruFs9YKheVMqxUbqoXeMzAWfVfcJgzuia7NA3D3'),
           profile: mockProfile(
             'yourheropaul',
             'https://yhp.io/img/paul.svg'
           ),
           title: 'Content curator',
-          stake: new u128(10101),
+          stake: createType('Balance', 10101),
           workerId: 3,
           group: WorkingGroups.ContentCurators
         },
         {
-          memberId: new MemberId(4),
-          roleAccount: new GenericAccountId('5GSMNn8Sy8k64mGUWPDafjMZu9bQNX26GujbBQ1LeJpNbrfg'),
+          memberId: createType('MemberId', 4),
+          roleAccount: createType('AccountId', '5GSMNn8Sy8k64mGUWPDafjMZu9bQNX26GujbBQ1LeJpNbrfg'),
           profile: mockProfile(
             'alex_joystream',
             'https://avatars2.githubusercontent.com/u/153928?s=200&v=4'
           ),
           title: 'Content curator',
-          stake: new u128(10101),
+          stake: createType('Balance', 10101),
           workerId: 4,
           group: WorkingGroups.ContentCurators
         },
         {
-          memberId: new MemberId(3),
-          roleAccount: new GenericAccountId('5Gn9n7SDJ7VgHqHQWYzkSA4vX6DCmS5TFWdHxikTXp9b4L32'),
+          memberId: createType('MemberId', 3),
+          roleAccount: createType('AccountId', '5Gn9n7SDJ7VgHqHQWYzkSA4vX6DCmS5TFWdHxikTXp9b4L32'),
           profile: mockProfile(
             'mokhtar',
             'https://avatars2.githubusercontent.com/u/1621012?s=460&v=4'
           ),
           title: 'Content curator',
-          stake: new u128(10101),
+          stake: createType('Balance', 10101),
           workerId: 5,
           group: WorkingGroups.ContentCurators
         }
@@ -116,14 +102,14 @@ export class Transport extends TransportBase implements ITransport {
       leadRolesAvailable: true,
       workers: [
         {
-          memberId: new MemberId(1),
-          roleAccount: new GenericAccountId('5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp'),
+          memberId: createType('MemberId', 1),
+          roleAccount: createType('AccountId', '5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp'),
           profile: mockProfile(
             'benholdencrowther',
             'https://www.benholdencrowther.com/wp-content/uploads/2019/03/Hanging_Gardens_of_Babylon.jpg'
           ),
           title: 'Storage provider',
-          stake: new u128(10101),
+          stake: createType('Balance', 10101),
           workerId: 1,
           group: WorkingGroups.StorageProviders
         }
@@ -135,13 +121,10 @@ export class Transport extends TransportBase implements ITransport {
     return this.simulateApiResponse<Array<WorkingGroupOpening>>(
       [
         {
-          opening: new Opening({
-            created: new u32(50000),
+          opening: createType('Opening', {
+            created: 50000,
             stage: mockStage,
-            max_review_period_length: new u32(100),
-            application_rationing_policy: new Option(ApplicationRationingPolicy),
-            application_staking_policy: new Option(StakingPolicy),
-            role_staking_policy: new Option(StakingPolicy),
+            max_review_period_length: 100,
             human_readable_text: newMockHumanReadableText({
               version: 1,
               headline: 'Help us curate awesome content',
@@ -195,14 +178,14 @@ export class Transport extends TransportBase implements ITransport {
             numberOfApplications: 0,
             maxNumberOfApplications: 0,
             requiredApplicationStake: new ApplicationStakeRequirement(
-              new u128(500)
+              createType('Balance', 500)
             ),
             requiredRoleStake: new RoleStakeRequirement(
-              new u128(0)
+              createType('Balance', 0)
             ),
-            defactoMinimumStake: new u128(0)
+            defactoMinimumStake: createType('Balance', 0)
           },
-          defactoMinimumStake: new u128(0)
+          defactoMinimumStake: createType('Balance', 0)
         }
       ]
     );
@@ -212,13 +195,10 @@ export class Transport extends TransportBase implements ITransport {
   async groupOpening (group: WorkingGroups, id: number): Promise<WorkingGroupOpening> {
     return this.simulateApiResponse<WorkingGroupOpening>(
       {
-        opening: new Opening({
-          created: new u32(50000),
+        opening: createType('Opening', {
+          created: 50000,
           stage: mockStage,
-          max_review_period_length: new u32(100),
-          application_rationing_policy: new Option(ApplicationRationingPolicy),
-          application_staking_policy: new Option(StakingPolicy),
-          role_staking_policy: new Option(StakingPolicy),
+          max_review_period_length: 100,
           human_readable_text: newMockHumanReadableText({
             version: 1,
             headline: 'Help us curate awesome content',
@@ -276,30 +256,31 @@ export class Transport extends TransportBase implements ITransport {
           numberOfApplications: 0,
           maxNumberOfApplications: 0,
           requiredApplicationStake: new ApplicationStakeRequirement(
-            new u128(501),
+            createType('Balance', 501),
             StakeType.AtLeast
           ),
           requiredRoleStake: new RoleStakeRequirement(
-            new u128(502)
+            createType('Balance', 502)
           ),
-          defactoMinimumStake: new u128(0)
+          defactoMinimumStake: createType('Balance', 0)
         },
-        defactoMinimumStake: new u128(0)
+        defactoMinimumStake: createType('Balance', 0)
       }
     );
   }
 
   openingApplicationRanks (group: WorkingGroups, openingId: number): Promise<Balance[]> {
     const slots: Balance[] = [];
+
     for (let i = 0; i < 20; i++) {
-      slots.push(new u128((i * 100) + 10 + i + 1));
+      slots.push(createType('Balance', (i * 100) + 10 + i + 1));
     }
 
     return this.simulateApiResponse<Balance[]>(slots);
   }
 
-  expectedBlockTime (): Promise<number> {
-    return this.promise<number>(6);
+  expectedBlockTime (): number {
+    return 6;
   }
 
   blockHash (height: number): Promise<string> {
@@ -310,28 +291,24 @@ export class Transport extends TransportBase implements ITransport {
     return this.promise<Date>(new Date());
   }
 
-  transactionFee (): Promise<Balance> {
-    return this.simulateApiResponse<Balance>(new u128(5));
-  }
-
   accounts (): Subscribable<keyPairDetails[]> {
-    return new Observable<keyPairDetails[]>(observer => {
+    return new Observable<keyPairDetails[]>((observer) => {
       observer.next(
         [
           {
             shortName: 'KP1',
-            accountId: new GenericAccountId('5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp'),
-            balance: new u128(23342)
+            accountId: createType('AccountId', '5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp'),
+            balance: createType('Balance', 23342)
           },
           {
             shortName: 'KP2',
-            accountId: new GenericAccountId('5DQqNWRFPruFs9YKheVMqxUbqoXeMzAWfVfcJgzuia7NA3D3'),
-            balance: new u128(993342)
+            accountId: createType('AccountId', '5DQqNWRFPruFs9YKheVMqxUbqoXeMzAWfVfcJgzuia7NA3D3'),
+            balance: createType('Balance', 993342)
           },
           {
             shortName: 'KP3',
-            accountId: new GenericAccountId('5DBaczGTDhcHgwsZzNE5qW15GrQxxdyros4pYkcKrSUovFQ9'),
-            balance: new u128(242)
+            accountId: createType('AccountId', '5DBaczGTDhcHgwsZzNE5qW15GrQxxdyros4pYkcKrSUovFQ9'),
+            balance: createType('Balance', 242)
           }
         ]
       );
@@ -352,13 +329,10 @@ export class Transport extends TransportBase implements ITransport {
         starting_block_hash: 'somehash',
         starting_time: yesterday()
       },
-      opening: new Opening({
-        created: new u32(50000),
+      opening: createType('Opening', {
+        created: 50000,
         stage: mockStage,
-        max_review_period_length: new u32(100),
-        application_rationing_policy: new Option(ApplicationRationingPolicy),
-        application_staking_policy: new Option(StakingPolicy),
-        role_staking_policy: new Option(StakingPolicy),
+        max_review_period_length: 100,
         human_readable_text: newMockHumanReadableText({
           version: 1,
           headline: 'Help us curate awesome content',
@@ -400,8 +374,8 @@ export class Transport extends TransportBase implements ITransport {
           }
         })
       }),
-      applicationStake: new u128(5),
-      roleStake: new u128(15),
+      applicationStake: createType('Balance', 5),
+      roleStake: createType('Balance', 15),
       rank: 21,
       capacity: 20
     }];
@@ -411,12 +385,12 @@ export class Transport extends TransportBase implements ITransport {
   async myRoles (address: string): Promise<ActiveRole[]> {
     return [
       {
-        workerId: new CuratorId(1),
+        workerId: createType('CuratorId', 1),
         name: workerRoleNameByGroup[WorkingGroups.ContentCurators],
         group: WorkingGroups.ContentCurators,
         url: 'some URL',
-        reward: new u128(321),
-        stake: new u128(12343200)
+        reward: createType('Balance', 321),
+        stake: createType('Balance', 12343200)
       }
     ];
   }
diff --git a/pioneer/packages/joy-roles/src/transport.substrate.ts b/pioneer/packages/joy-roles/src/transport.substrate.ts
index a975b6dc4e..89923fd3b9 100644
--- a/pioneer/packages/joy-roles/src/transport.substrate.ts
+++ b/pioneer/packages/joy-roles/src/transport.substrate.ts
@@ -2,38 +2,35 @@ import { map, switchMap } from 'rxjs/operators';
 
 import ApiPromise from '@polkadot/api/promise';
 import { Balance } from '@polkadot/types/interfaces';
-import { GenericAccountId, Option, u128, Vec } from '@polkadot/types';
+import { Option, Vec } from '@polkadot/types';
 import { Constructor } from '@polkadot/types/types';
 import { Moment } from '@polkadot/types/interfaces/runtime';
 import { QueueTxExtrinsicAdd } from '@polkadot/react-components/Status/types';
-import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 import keyringOption from '@polkadot/ui-keyring/options';
 
-import { APIQueryCache, MultipleLinkedMapEntry, SingleLinkedMapEntry, Subscribable, Transport as TransportBase } from '@polkadot/joy-utils/index';
+import { APIQueryCache } from '@polkadot/joy-utils/transport/APIQueryCache';
+import { Subscribable } from '@polkadot/joy-utils/react/helpers';
+import BaseTransport from '@polkadot/joy-utils/transport/base';
 
 import { ITransport } from './transport';
 import { GroupMember } from './elements';
 
-import {
-  Curator, CuratorId,
+import { Curator, CuratorId,
   CuratorApplication, CuratorApplicationId,
   CuratorRoleStakeProfile,
   CuratorOpening, CuratorOpeningId,
-  Lead, LeadId
-} from '@joystream/types/content-working-group';
+  Lead, LeadId } from '@joystream/types/content-working-group';
 
-import {
-  Application as WGApplication,
+import { Application as WGApplication,
   Opening as WGOpening,
   Worker, WorkerId,
-  RoleStakeProfile
-} from '@joystream/types/working-group';
+  RoleStakeProfile } from '@joystream/types/working-group';
 
 import { Application, Opening, OpeningId, ApplicationId, ActiveApplicationStage } from '@joystream/types/hiring';
 import { Stake, StakeId } from '@joystream/types/stake';
 import { RewardRelationship, RewardRelationshipId } from '@joystream/types/recurring-rewards';
-import { Membership, MemberId, ActorId } from '@joystream/types/members';
-import { createAccount, generateSeed } from '@polkadot/joy-utils/accounts';
+import { Membership, MemberId } from '@joystream/types/members';
+import { createAccount, generateSeed } from '@polkadot/joy-utils/functions/accounts';
 
 import { WorkingGroupMembership, GroupLeadStatus } from './tabs/WorkingGroup';
 import { WorkingGroupOpening } from './tabs/Opportunities';
@@ -41,12 +38,10 @@ import { ActiveRole, OpeningApplication } from './tabs/MyRoles';
 
 import { keyPairDetails } from './flows/apply';
 
-import {
-  classifyApplicationCancellation,
+import { classifyApplicationCancellation,
   classifyOpeningStage,
   classifyOpeningStakes,
-  isApplicationHired
-} from './classifiers';
+  isApplicationHired } from './classifiers';
 import { WorkingGroups, AvailableGroups, workerRoleNameByGroup } from './working_groups';
 import { Sort, Sum, Zero } from './balances';
 import _ from 'lodash';
@@ -146,23 +141,26 @@ const workingGroupsApiMapping: WGApiMapping = {
   }
 };
 
-export class Transport extends TransportBase implements ITransport {
-  protected api: ApiPromise
-  protected cachedApi: APIQueryCache
+export class Transport extends BaseTransport implements ITransport {
   protected queueExtrinsic: QueueTxExtrinsicAdd
 
   constructor (api: ApiPromise, queueExtrinsic: QueueTxExtrinsicAdd) {
-    super();
-    this.api = api;
-    this.cachedApi = new APIQueryCache(api);
+    super(api, new APIQueryCache(api));
     this.queueExtrinsic = queueExtrinsic;
   }
 
+  apiMethodByGroup (group: WorkingGroups, method: WGApiMethodType) {
+    const apiModule = workingGroupsApiMapping[group].module;
+    const apiMethod = workingGroupsApiMapping[group].methods.query[method];
+
+    return this.api.query[apiModule][apiMethod];
+  }
+
   cachedApiMethodByGroup (group: WorkingGroups, method: WGApiMethodType) {
     const apiModule = workingGroupsApiMapping[group].module;
     const apiMethod = workingGroupsApiMapping[group].methods.query[method];
 
-    return this.cachedApi.query[apiModule][apiMethod];
+    return this.cacheApi.query[apiModule][apiMethod];
   }
 
   apiExtrinsicByGroup (group: WorkingGroups, method: WGApiTxMethodType) {
@@ -173,17 +171,13 @@ export class Transport extends TransportBase implements ITransport {
   }
 
   unsubscribe () {
-    this.cachedApi.unsubscribe();
+    this.cacheApi.unsubscribe();
   }
 
   protected async stakeValue (stakeId: StakeId): Promise<Balance> {
-    const stake = new SingleLinkedMapEntry<Stake>(
-      Stake,
-      await this.cachedApi.query.stake.stakes(
-        stakeId
-      )
-    );
-    return stake.value.value;
+    const stake = await this.cacheApi.query.stake.stakes(stakeId) as Stake;
+
+    return stake.value;
   }
 
   protected async workerStake (stakeProfile: GroupWorkerStakeProfile): Promise<Balance> {
@@ -191,25 +185,21 @@ export class Transport extends TransportBase implements ITransport {
   }
 
   protected async rewardRelationshipById (id: RewardRelationshipId): Promise<RewardRelationship | undefined> {
-    const rewardRelationship = new SingleLinkedMapEntry<RewardRelationship>(
-      RewardRelationship,
-      await this.cachedApi.query.recurringRewards.rewardRelationships(id)
-    ).value;
+    const rewardRelationship = await this.cacheApi.query.recurringRewards.rewardRelationships(id) as RewardRelationship;
 
     return rewardRelationship.isEmpty ? undefined : rewardRelationship;
   }
 
   protected async workerTotalReward (relationshipId: RewardRelationshipId): Promise<Balance> {
     const relationship = await this.rewardRelationshipById(relationshipId);
-    return relationship?.total_reward_received || new u128(0);
+
+    return relationship?.total_reward_received || this.api.createType('Balance', 0);
   }
 
   protected async curatorMemberId (curator: Curator): Promise<MemberId> {
     const curatorApplicationId = curator.induction.curator_application_id;
-    const curatorApplication = new SingleLinkedMapEntry<CuratorApplication>(
-      CuratorApplication,
-      await this.cachedApi.query.contentWorkingGroup.curatorApplicationById(curatorApplicationId)
-    ).value;
+    const curatorApplication =
+      await this.cacheApi.query.contentWorkingGroup.curatorApplicationById(curatorApplicationId) as CuratorApplication;
 
     return curatorApplication.member_id;
   }
@@ -218,6 +208,7 @@ export class Transport extends TransportBase implements ITransport {
     const rewardRelationship = worker.reward_relationship.isSome
       ? await this.rewardRelationshipById(worker.reward_relationship.unwrap())
       : undefined;
+
     return rewardRelationship;
   }
 
@@ -231,12 +222,14 @@ export class Transport extends TransportBase implements ITransport {
       ? await this.curatorMemberId(worker as Curator)
       : (worker as Worker).member_id;
 
-    const profile = await this.cachedApi.query.members.membershipById(memberId) as Membership;
+    const profile = await this.cacheApi.query.members.membershipById(memberId) as Membership;
+
     if (profile.handle.isEmpty) {
       throw new Error('No group member profile found!');
     }
 
-    let stakeValue: Balance = new u128(0);
+    let stakeValue: Balance = this.api.createType('Balance', 0);
+
     if (worker.role_stake_profile && worker.role_stake_profile.isSome) {
       stakeValue = await this.workerStake(worker.role_stake_profile.unwrap());
     }
@@ -256,27 +249,19 @@ export class Transport extends TransportBase implements ITransport {
   }
 
   protected async areGroupRolesOpen (group: WorkingGroups, lead = false): Promise<boolean> {
-    const nextId = await this.cachedApiMethodByGroup(group, 'nextOpeningId')() as GroupOpeningId;
-
-    // This is chain specfic, but if next id is still 0, it means no openings have been added yet
-    if (nextId.eq(0)) {
-      return false;
-    }
-
-    const groupOpenings = new MultipleLinkedMapEntry<GroupOpeningId, GroupOpening>(
-      OpeningId,
-      workingGroupsApiMapping[group].openingType,
-      await this.cachedApiMethodByGroup(group, 'openingById')()
+    const groupOpenings = await this.entriesByIds<GroupOpeningId, GroupOpening>(
+      this.apiMethodByGroup(group, 'openingById')
     );
 
-    for (const groupOpening of groupOpenings.linked_values) {
+    for (const [/* id */, groupOpening] of groupOpenings) {
       const opening = await this.opening(groupOpening.hiring_opening_id.toNumber());
+
       if (
         opening.is_active &&
         (
           groupOpening instanceof WGOpening
             ? (lead === groupOpening.opening_type.isOfType('Leader'))
-            : !lead // Lead opening are never available for content working group currently
+            : !lead // Lead openings are never available for content working group currently
         )
       ) {
         return true;
@@ -287,41 +272,35 @@ export class Transport extends TransportBase implements ITransport {
   }
 
   protected async currentCuratorLead (): Promise<GroupLeadWithMemberId | null> {
-    const optLeadId = (await this.cachedApi.query.contentWorkingGroup.currentLeadId()) as Option<LeadId>;
+    const optLeadId = (await this.cacheApi.query.contentWorkingGroup.currentLeadId()) as Option<LeadId>;
 
     if (!optLeadId.isSome) {
       return null;
     }
 
     const leadId = optLeadId.unwrap();
-    const lead = new SingleLinkedMapEntry<Lead>(
-      Lead,
-      await this.cachedApi.query.contentWorkingGroup.leadById(leadId)
-    );
+    const lead = await this.cacheApi.query.contentWorkingGroup.leadById(leadId) as Lead;
 
-    const memberId = lead.value.member_id;
+    if (lead.isEmpty || !lead.stage.isOfType('Active')) {
+      return null;
+    }
 
-    return {
-      lead: lead.value,
-      memberId
-    };
+    const memberId = lead.member_id;
+
+    return { lead, memberId };
   }
 
   protected async currentStorageLead (): Promise <GroupLeadWithMemberId | null> {
-    const optLeadId = (await this.cachedApi.query.storageWorkingGroup.currentLead()) as Option<WorkerId>;
+    const optLeadId = (await this.cacheApi.query.storageWorkingGroup.currentLead()) as Option<WorkerId>;
 
     if (!optLeadId.isSome) {
       return null;
     }
 
     const leadWorkerId = optLeadId.unwrap();
-    const leadWorkerLink = new SingleLinkedMapEntry(
-      Worker,
-      await this.cachedApi.query.storageWorkingGroup.workerById(leadWorkerId)
-    );
-    const leadWorker = leadWorkerLink.value;
+    const leadWorker = await this.cacheApi.query.storageWorkingGroup.workerById(leadWorkerId) as Worker;
 
-    if (!leadWorker.is_active) {
+    if (leadWorker.isEmpty) {
       return null;
     }
 
@@ -338,7 +317,7 @@ export class Transport extends TransportBase implements ITransport {
       : await this.currentStorageLead();
 
     if (currentLead !== null) {
-      const profile = await this.cachedApi.query.members.membershipById(currentLead.memberId) as Membership;
+      const profile = await this.cacheApi.query.members.membershipById(currentLead.memberId) as Membership;
 
       if (profile.handle.isEmpty) {
         throw new Error(`${group} lead profile not found!`);
@@ -377,29 +356,14 @@ export class Transport extends TransportBase implements ITransport {
     const leadRolesAvailable = await this.areGroupRolesOpen(group, true);
     const leadStatus = await this.groupLeadStatus(group);
 
-    const nextId = await this.cachedApiMethodByGroup(group, 'nextWorkerId')() as GroupWorkerId;
-
-    let workersWithIds: { worker: GroupWorker; id: GroupWorkerId }[] = [];
-    // This is chain specfic, but if next id is still 0, it means no workers have been added yet
-    if (!nextId.eq(0)) {
-      const values = new MultipleLinkedMapEntry<GroupWorkerId, GroupWorker>(
-        ActorId,
-        workingGroupsApiMapping[group].workerType,
-        await this.cachedApiMethodByGroup(group, 'workerById')() as GroupWorker
-      );
-
-      workersWithIds = values.linked_values
-        // First bind workers with ids
-        .map((worker, i) => ({ worker, id: values.linked_keys[i] }))
-        // Filter by: active and "not lead"
-        .filter(({ worker, id }) => worker.is_active && (!leadStatus.lead?.workerId || !id.eq(leadStatus.lead.workerId)));
-    }
+    const workers = (await this.entriesByIds<GroupWorkerId, GroupWorker>(
+      this.apiMethodByGroup(group, 'workerById')
+    ))
+      .filter(([id, worker]) => worker.is_active && (!leadStatus.lead?.workerId || !id.eq(leadStatus.lead.workerId)));
 
     return {
       leadStatus,
-      workers: await Promise.all(
-        workersWithIds.map(({ worker, id }) => this.groupMember(group, id, worker))
-      ),
+      workers: await Promise.all(workers.map(([id, worker]) => this.groupMember(group, id, worker))),
       workerRolesAvailable,
       leadRolesAvailable
     };
@@ -440,55 +404,39 @@ export class Transport extends TransportBase implements ITransport {
   }
 
   protected async opening (id: number): Promise<Opening> {
-    const opening = new SingleLinkedMapEntry<Opening>(
-      Opening,
-      await this.cachedApi.query.hiring.openingById(id)
-    );
+    const opening = await this.cacheApi.query.hiring.openingById(id) as Opening;
 
-    return opening.value;
+    return opening;
   }
 
   protected async groupOpeningApplications (group: WorkingGroups, groupOpeningId: number): Promise<WorkingGroupPair<Application, GroupApplication>[]> {
-    const output = new Array<WorkingGroupPair<Application, GroupApplication>>();
-
-    const nextAppid = (await this.cachedApiMethodByGroup(group, 'nextApplicationId')()) as GroupApplicationId;
-    for (let i = 0; i < nextAppid.toNumber(); i++) {
-      const cApplication = new SingleLinkedMapEntry<GroupApplication>(
-        workingGroupsApiMapping[group].applicationType,
-        await this.cachedApiMethodByGroup(group, 'applicationById')(i)
-      );
-
-      if (cApplication.value.opening_id.toNumber() !== groupOpeningId) {
-        continue;
-      }
+    const groupApplications = await this.entriesByIds<GroupApplicationId, GroupApplication>(
+      this.apiMethodByGroup(group, 'applicationById')
+    );
 
-      const appId = cApplication.value.application_id;
-      const baseApplications = new SingleLinkedMapEntry<Application>(
-        Application,
-        await this.cachedApi.query.hiring.applicationById(
-          appId
-        )
-      );
+    const openingGroupApplications = groupApplications
+      .filter(([id, groupApplication]) => groupApplication.opening_id.toNumber() === groupOpeningId);
 
-      output.push({
-        hiringModule: baseApplications.value,
-        workingGroup: cApplication.value
-      });
-    }
+    const openingHiringApplications = (await Promise.all(
+      openingGroupApplications.map(
+        ([id, groupApplication]) => this.cacheApi.query.hiring.applicationById(groupApplication.application_id)
+      )
+    )) as Application[];
 
-    return output;
+    return openingHiringApplications.map((hiringApplication, index) => ({
+      hiringModule: hiringApplication,
+      workingGroup: openingGroupApplications[index][1]
+    }));
   }
 
   async groupOpening (group: WorkingGroups, id: number): Promise<WorkingGroupOpening> {
     const nextId = (await this.cachedApiMethodByGroup(group, 'nextOpeningId')() as GroupOpeningId).toNumber();
+
     if (id < 0 || id >= nextId) {
       throw new Error('invalid id');
     }
 
-    const groupOpening = new SingleLinkedMapEntry<GroupOpening>(
-      workingGroupsApiMapping[group].openingType,
-      await this.cachedApiMethodByGroup(group, 'openingById')(id)
-    ).value;
+    const groupOpening = await this.cachedApiMethodByGroup(group, 'openingById')(id) as GroupOpening;
 
     const opening = await this.opening(
       groupOpening.hiring_opening_id.toNumber()
@@ -510,9 +458,9 @@ export class Transport extends TransportBase implements ITransport {
         maxNumberOfApplications: opening.max_applicants,
         requiredApplicationStake: stakes.application,
         requiredRoleStake: stakes.role,
-        defactoMinimumStake: new u128(0)
+        defactoMinimumStake: this.api.createType('Balance', 0)
       },
-      defactoMinimumStake: new u128(0)
+      defactoMinimumStake: this.api.createType('Balance', 0)
     });
   }
 
@@ -532,52 +480,48 @@ export class Transport extends TransportBase implements ITransport {
 
   async openingApplicationRanks (group: WorkingGroups, openingId: number): Promise<Balance[]> {
     const applications = await this.groupOpeningApplications(group, openingId);
+
     return Sort(
       (await Promise.all(
         applications
-          .filter(a => a.hiringModule.stage.value instanceof ActiveApplicationStage)
-          .map(application => this.openingApplicationTotalStake(application.hiringModule))
+          .filter((a) => a.hiringModule.stage.value instanceof ActiveApplicationStage)
+          .map((application) => this.openingApplicationTotalStake(application.hiringModule))
       ))
     );
   }
 
-  expectedBlockTime (): Promise<number> {
-    return this.promise<number>(
-      (this.api.consts.babe.expectedBlockTime as Moment).toNumber() / 1000
-    );
+  expectedBlockTime (): number {
+    return (this.api.consts.babe.expectedBlockTime as Moment).toNumber() / 1000;
   }
 
   async blockHash (height: number): Promise<string> {
     const blockHash = await this.api.rpc.chain.getBlockHash(height);
+
     return blockHash.toString();
   }
 
   async blockTimestamp (height: number): Promise<Date> {
     const blockTime = await this.api.query.timestamp.now.at(
       await this.blockHash(height)
-    ) as Moment;
+    );
 
     return new Date(blockTime.toNumber());
   }
 
-  transactionFee (): Promise<Balance> {
-    return this.promise<Balance>(new u128(5));
-  }
-
   accounts (): Subscribable<keyPairDetails[]> {
     return keyringOption.optionsSubject.pipe(
-      map(accounts => {
+      map((accounts) => {
         return accounts.all
-          .filter(x => x.value)
+          .filter((x) => x.value)
           .map(async (result, k) => {
             return {
               shortName: result.name,
-              accountId: new GenericAccountId(result.value as string),
-              balance: await this.cachedApi.query.balances.freeBalance(result.value as string)
+              accountId: this.api.createType('AccountId', result.value),
+              balance: (await this.api.derive.balances.account(result.value as string)).freeBalance
             };
           });
       }),
-      switchMap(async x => Promise.all(x))
+      switchMap(async (x) => Promise.all(x))
     ) as Subscribable<keyPairDetails[]>;
   }
 
@@ -588,11 +532,13 @@ export class Transport extends TransportBase implements ITransport {
     };
 
     const appStake = app.active_application_staking_id;
+
     if (appStake.isSome) {
       stakes.application = await this.stakeValue(appStake.unwrap());
     }
 
     const roleStake = app.active_role_staking_id;
+
     if (roleStake.isSome) {
       stakes.role = await this.stakeValue(roleStake.unwrap());
     }
@@ -601,9 +547,9 @@ export class Transport extends TransportBase implements ITransport {
   }
 
   protected async myApplicationRank (myApp: Application, applications: Array<Application>): Promise<number> {
-    const activeApplications = applications.filter(app => app.stage.value instanceof ActiveApplicationStage);
+    const activeApplications = applications.filter((app) => app.stage.value instanceof ActiveApplicationStage);
     const stakes = await Promise.all(
-      activeApplications.map(app => this.openingApplicationTotalStake(app))
+      activeApplications.map((app) => this.openingApplicationTotalStake(app))
     );
 
     const appvalues = activeApplications.map((app, key) => {
@@ -623,55 +569,44 @@ export class Transport extends TransportBase implements ITransport {
       return 1;
     });
 
-    return appvalues.findIndex(v => v.app.eq(myApp)) + 1;
+    return appvalues.findIndex((v) => v.app.eq(myApp)) + 1;
   }
 
   async openingApplicationsByAddressAndGroup (group: WorkingGroups, roleKey: string): Promise<OpeningApplication[]> {
-    const applications = new MultipleLinkedMapEntry<GroupApplicationId, GroupApplication>(
-      ApplicationId,
-      workingGroupsApiMapping[group].applicationType,
-      await this.cachedApiMethodByGroup(group, 'applicationById')()
-    );
-
-    const myApps = applications.linked_values.filter(app => app.role_account_id.eq(roleKey));
-    const myAppIds = applications.linked_keys.filter((id, key) => applications.linked_values[key].role_account_id.eq(roleKey));
-
-    const hiringAppPairs = await Promise.all(
-      myApps.map(
-        async app => new SingleLinkedMapEntry<Application>(
-          Application,
-          await this.cachedApi.query.hiring.applicationById(
-            app.application_id
-          )
-        )
+    const myGroupApplications = (await this.entriesByIds<GroupApplicationId, GroupApplication>(
+      this.apiMethodByGroup(group, 'applicationById')
+    ))
+      .filter(([id, groupApplication]) => groupApplication.role_account_id.eq(roleKey));
+
+    const myHiringApplications = await Promise.all(
+      myGroupApplications.map(
+        ([id, groupApplication]) => this.cacheApi.query.hiring.applicationById(groupApplication.application_id)
       )
-    );
-
-    const hiringApps = hiringAppPairs.map(app => app.value);
+    ) as Application[];
 
     const stakes = await Promise.all(
-      hiringApps.map(app => this.applicationStakes(app))
+      myHiringApplications.map((app) => this.applicationStakes(app))
     );
 
     const openings = await Promise.all(
-      myApps.map(application => {
-        return this.groupOpening(group, application.opening_id.toNumber());
+      myGroupApplications.map(([id, groupApplication]) => {
+        return this.groupOpening(group, groupApplication.opening_id.toNumber());
       })
     );
 
     const allAppsByOpening = (await Promise.all(
-      myApps.map(application => {
-        return this.groupOpeningApplications(group, application.opening_id.toNumber());
-      })
+      myGroupApplications.map(([id, groupApplication]) => (
+        this.groupOpeningApplications(group, groupApplication.opening_id.toNumber())
+      ))
     ));
 
     return await Promise.all(
       openings.map(async (o, key) => {
         return {
-          id: myAppIds[key].toNumber(),
-          hired: isApplicationHired(hiringApps[key]),
-          cancelledReason: classifyApplicationCancellation(hiringApps[key]),
-          rank: await this.myApplicationRank(hiringApps[key], allAppsByOpening[key].map(a => a.hiringModule)),
+          id: myGroupApplications[key][0].toNumber(),
+          hired: isApplicationHired(myHiringApplications[key]),
+          cancelledReason: classifyApplicationCancellation(myHiringApplications[key]),
+          rank: await this.myApplicationRank(myHiringApplications[key], allAppsByOpening[key].map((a) => a.hiringModule)),
           capacity: o.applications.maxNumberOfApplications,
           stage: o.stage,
           opening: o.opening,
@@ -688,6 +623,7 @@ export class Transport extends TransportBase implements ITransport {
   // Get opening applications for all groups by address
   async openingApplicationsByAddress (roleKey: string): Promise<OpeningApplication[]> {
     let applications: OpeningApplication[] = [];
+
     for (const group of AvailableGroups) {
       applications = applications.concat(await this.openingApplicationsByAddressAndGroup(group, roleKey));
     }
@@ -696,30 +632,24 @@ export class Transport extends TransportBase implements ITransport {
   }
 
   async myRolesByGroup (group: WorkingGroups, roleKeyId: string): Promise<ActiveRole[]> {
-    const workers = new MultipleLinkedMapEntry<GroupWorkerId, GroupWorker>(
-      ActorId,
-      workingGroupsApiMapping[group].workerType,
-      await this.cachedApiMethodByGroup(group, 'workerById')()
+    const workers = await this.entriesByIds<GroupWorkerId, GroupWorker>(
+      this.apiMethodByGroup(group, 'workerById')
     );
 
     const groupLead = (await this.groupLeadStatus(group)).lead;
 
     return Promise.all(
       workers
-        .linked_values
-        .toArray()
-        // We need to associate worker ids with workers BEFORE filtering the array
-        .map((worker, index) => ({ worker, id: workers.linked_keys[index] }))
-        .filter(({ worker }) => worker.role_account_id.eq(roleKeyId) && worker.is_active)
-        .map(async workerWithId => {
-          const { worker, id } = workerWithId;
-
-          let stakeValue: Balance = new u128(0);
+        .filter(([id, worker]) => worker.role_account_id.eq(roleKeyId) && worker.is_active)
+        .map(async ([id, worker]) => {
+          let stakeValue: Balance = this.api.createType('Balance', 0);
+
           if (worker.role_stake_profile && worker.role_stake_profile.isSome) {
             stakeValue = await this.workerStake(worker.role_stake_profile.unwrap());
           }
 
-          let earnedValue: Balance = new u128(0);
+          let earnedValue: Balance = this.api.createType('Balance', 0);
+
           if (worker.reward_relationship && worker.reward_relationship.isSome) {
             earnedValue = await this.workerTotalReward(worker.reward_relationship.unwrap());
           }
@@ -740,6 +670,7 @@ export class Transport extends TransportBase implements ITransport {
   // All groups roles by key
   async myRoles (roleKey: string): Promise<ActiveRole[]> {
     let roles: ActiveRole[] = [];
+
     for (const group of AvailableGroups) {
       roles = roles.concat(await this.myRolesByGroup(group, roleKey));
     }
@@ -751,11 +682,13 @@ export class Transport extends TransportBase implements ITransport {
     const { address, deriveError, derivePath, isSeedValid, pairType, seed } = generateSeed(null, '', 'bip');
 
     const isValid = !!address && !deriveError && isSeedValid;
+
     if (!isValid) {
       return null;
     }
 
     const status = createAccount(`${seed}${derivePath}`, pairType, name, password, 'created account');
+
     return status.account as string;
   }
 
@@ -768,16 +701,18 @@ export class Transport extends TransportBase implements ITransport {
     roleStake: Balance,
     applicationText: string): Promise<number> {
     return new Promise<number>((resolve, reject) => {
-      (this.cachedApi.query.members.memberIdsByControllerAccountId(sourceAccount) as Promise<Vec<MemberId>>)
-        .then(membershipIds => {
+      (this.cacheApi.query.members.memberIdsByControllerAccountId(sourceAccount) as Promise<Vec<MemberId>>)
+        .then((membershipIds) => {
           if (membershipIds.length === 0) {
             reject(new Error('No membship ID associated with this address'));
           }
 
           const roleAccount = this.generateRoleAccount(roleAccountName);
+
           if (!roleAccount) {
             reject(new Error('failed to create role account'));
           }
+
           const tx = this.apiExtrinsicByGroup(group, 'applyOnOpening')(
             membershipIds[0], // Member id
             id, // Worker/Curator opening id
@@ -786,7 +721,7 @@ export class Transport extends TransportBase implements ITransport {
             roleStake.eq(Zero) ? null : roleStake, // Role stake
             appStake.eq(Zero) ? null : appStake, // Application stake
             applicationText // Human readable text
-          ) as unknown as SubmittableExtrinsic;
+          );
 
           const txFailedCb = () => {
             reject(new Error('transaction failed'));
@@ -802,30 +737,33 @@ export class Transport extends TransportBase implements ITransport {
             txFailedCb,
             txSuccessCb
           });
-        });
+        })
+        .catch((e) => { reject(e); });
     });
   }
 
-  leaveRole (group: WorkingGroups, sourceAccount: string, id: number, rationale: string) {
+  leaveRole (group: WorkingGroups, sourceAccount: string, id: number, rationale: string, txSuccessCb?: () => void) {
     const tx = this.apiExtrinsicByGroup(group, 'leaveRole')(
       id,
       rationale
-    ) as unknown as SubmittableExtrinsic;
+    );
 
     this.queueExtrinsic({
       accountId: sourceAccount,
-      extrinsic: tx
+      extrinsic: tx,
+      txSuccessCb
     });
   }
 
-  withdrawApplication (group: WorkingGroups, sourceAccount: string, id: number) {
+  withdrawApplication (group: WorkingGroups, sourceAccount: string, id: number, txSuccessCb?: () => void) {
     const tx = this.apiExtrinsicByGroup(group, 'withdrawApplication')(
       id
-    ) as unknown as SubmittableExtrinsic;
+    );
 
     this.queueExtrinsic({
       accountId: sourceAccount,
-      extrinsic: tx
+      extrinsic: tx,
+      txSuccessCb
     });
   }
 }
diff --git a/pioneer/packages/joy-roles/src/transport.ts b/pioneer/packages/joy-roles/src/transport.ts
index 66c5bb0429..b3ad7ab15a 100644
--- a/pioneer/packages/joy-roles/src/transport.ts
+++ b/pioneer/packages/joy-roles/src/transport.ts
@@ -1,4 +1,4 @@
-import { Subscribable } from '@polkadot/joy-utils/index';
+import { Subscribable } from '@polkadot/joy-utils/react/helpers';
 import { Balance } from '@polkadot/types/interfaces';
 
 import { WorkingGroupMembership, GroupLeadStatus } from './tabs/WorkingGroup';
@@ -14,10 +14,9 @@ export interface ITransport {
   currentOpportunities: () => Promise<Array<WorkingGroupOpening>>;
   groupOpening: (group: WorkingGroups, id: number) => Promise<WorkingGroupOpening>;
   openingApplicationRanks: (group: WorkingGroups, openingId: number) => Promise<Balance[]>;
-  expectedBlockTime: () => Promise<number>;
+  expectedBlockTime: () => number;
   blockHash: (height: number) => Promise<string>;
   blockTimestamp: (height: number) => Promise<Date>;
-  transactionFee: () => Promise<Balance>;
   accounts: () => Subscribable<keyPairDetails[]>;
   openingApplicationsByAddress: (address: string) => Promise<OpeningApplication[]>;
   myRoles: (address: string) => Promise<ActiveRole[]>;
@@ -30,6 +29,6 @@ export interface ITransport {
     roleStake: Balance,
     applicationText: string
   ) => Promise<number>;
-  leaveRole: (group: WorkingGroups, sourceAccount: string, id: number, rationale: string) => void;
-  withdrawApplication: (group: WorkingGroups, sourceAccount: string, id: number) => void;
+  leaveRole: (group: WorkingGroups, sourceAccount: string, id: number, rationale: string, successCb?: () => void) => void;
+  withdrawApplication: (group: WorkingGroups, sourceAccount: string, id: number, successCb?: () => void) => void;
 }
diff --git a/pioneer/packages/joy-settings/.skip-build b/pioneer/packages/joy-settings/.skip-build
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/pioneer/packages/joy-settings/LICENSE b/pioneer/packages/joy-settings/LICENSE
deleted file mode 100644
index 0d381b2e97..0000000000
--- a/pioneer/packages/joy-settings/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/pioneer/packages/joy-settings/README.md b/pioneer/packages/joy-settings/README.md
deleted file mode 100644
index 7887372a33..0000000000
--- a/pioneer/packages/joy-settings/README.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# @polkadot/ui-settings
-
-Manages app settings including endpoints, themes and prefixes
-
-### Usage Example
-User preferences are set as a settings object in the browser's local storage.
-```
-import settings from '@polkadot/ui-settings';
-
-render () {
-  // get api endpoint for the selected chain
-  const WS_URL = settings.apiUrl();
-
-  // get the selected il8n language
-  const language = settings.il8nLang();
-
-  // get all available il8n languages
-  const languages = settings.availableLanguages();
-
-  // update settings
-  const updatedSettings = {
-    ...settings,
-    i18nLang: 'Arabic'
-  }
-  settings.set(updatedSettings);
-
-  // NOTE: API currently does not handle hot reconnecting properly,
-  so you need to manually reload the page after updating settings.
-  window.location.reload();
-}
-```
-
-### Used by
-Apps that currently use the settings package
-* [polkadot-js/apps]('https://www.github.com/polkadot-js/apps')
-* [paritytech/substrate-light-ui](https://github.com/paritytech/substrate-light-ui)
diff --git a/pioneer/packages/joy-settings/package.json b/pioneer/packages/joy-settings/package.json
deleted file mode 100644
index 9f40f2e1cd..0000000000
--- a/pioneer/packages/joy-settings/package.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "@polkadot/joy-settings",
-  "version": "1.0.0",
-  "description": "Manages app settings",
-  "main": "index.js",
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.7.1",
-    "@types/store": "^2.0.1",
-    "store": "^2.0.12"
-  }
-}
diff --git a/pioneer/packages/joy-settings/src/Settings.ts b/pioneer/packages/joy-settings/src/Settings.ts
deleted file mode 100644
index eed3416d54..0000000000
--- a/pioneer/packages/joy-settings/src/Settings.ts
+++ /dev/null
@@ -1,180 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-settings authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import EventEmitter from 'eventemitter3';
-import store from 'store';
-import { isUndefined } from '@polkadot/util';
-
-import { CRYPTOS, ENDPOINT_DEFAULT, ENDPOINTS, ICON_DEFAULT, ICONS, LANGUAGE_DEFAULT, LANGUAGES, LEDGER_CONN, LEDGER_CONN_DEFAULT, LOCKING_DEFAULT, LOCKING, PREFIX_DEFAULT, PREFIXES, UIMODE_DEFAULT, UIMODES, UITHEME_DEFAULT, UITHEMES, CAMERA, CAMERA_DEFAULT } from './defaults';
-import { Option, SettingsStruct } from './types';
-
-type ChangeCallback = (settings: SettingsStruct) => void;
-type OnTypes = 'change';
-
-export class Settings implements SettingsStruct {
-  private _apiUrl: string;
-
-  private _emitter: EventEmitter;
-
-  private _i18nLang: string;
-
-  private _icon: string;
-
-  private _ledgerConn: string;
-
-  private _locking: string;
-
-  private _prefix: number;
-
-  private _uiMode: string;
-
-  private _uiTheme: string;
-
-  private _camera: string;
-
-  public constructor () {
-    const settings = store.get('settings') || {};
-
-    this._emitter = new EventEmitter();
-
-    // Transition from acropolis - since visitors are coming to the same domain they most likely
-    // have the endpoint url saved in local storage. Replace it with new rome default endpoint.
-    if (settings.apiUrl === 'wss://testnet.joystream.org/acropolis/rpc/') {
-      this._apiUrl = process.env.WS_URL || ENDPOINT_DEFAULT || 'wss://rome-rpc-endpoint.joystream.org:9944/';
-    } else {
-      this._apiUrl = settings.apiUrl || process.env.WS_URL || ENDPOINT_DEFAULT;
-    }
-
-    this._ledgerConn = settings.ledgerConn || LEDGER_CONN_DEFAULT;
-    this._i18nLang = settings.i18nLang || LANGUAGE_DEFAULT;
-    this._icon = settings.icon || ICON_DEFAULT;
-    this._locking = settings.locking || LOCKING_DEFAULT;
-    this._prefix = isUndefined(settings.prefix) ? PREFIX_DEFAULT : settings.prefix;
-    this._uiMode = settings.uiMode || UIMODE_DEFAULT;
-    this._uiTheme = settings.uiTheme || UITHEME_DEFAULT;
-    this._camera = settings.camera || CAMERA_DEFAULT;
-  }
-
-  public get apiUrl (): string {
-    return this._apiUrl;
-  }
-
-  public get i18nLang (): string {
-    return this._i18nLang;
-  }
-
-  public get icon (): string {
-    return this._icon;
-  }
-
-  public get ledgerConn (): string {
-    return this._ledgerConn;
-  }
-
-  public get locking (): string {
-    return this._locking;
-  }
-
-  public get prefix (): number {
-    return this._prefix;
-  }
-
-  public get uiMode (): string {
-    return this._uiMode;
-  }
-
-  get isBasicMode (): boolean {
-    return this._uiMode === 'light';
-  }
-
-  get isFullMode (): boolean {
-    return this._uiMode === 'full';
-  }
-
-  public get uiTheme (): string {
-    return this._uiTheme;
-  }
-
-  public get availableCryptos (): Option[] {
-    return CRYPTOS;
-  }
-
-  public get availableIcons (): Option[] {
-    return ICONS;
-  }
-
-  public get availableLanguages (): Option[] {
-    return LANGUAGES;
-  }
-
-  public get availableLedgerConn (): Option[] {
-    return LEDGER_CONN;
-  }
-
-  public get availableLocking (): Option[] {
-    return LOCKING;
-  }
-
-  public get availableNodes (): Option[] {
-    return ENDPOINTS;
-  }
-
-  public get availablePrefixes (): Option[] {
-    return PREFIXES;
-  }
-
-  public get availableUIModes (): Option[] {
-    return UIMODES;
-  }
-
-  public get availableUIThemes (): Option[] {
-    return UITHEMES;
-  }
-
-  public get camera (): string {
-    return this._camera;
-  }
-
-  public get availableCamera (): Option[] {
-    return CAMERA;
-  }
-
-  public get (): SettingsStruct {
-    return {
-      apiUrl: this._apiUrl,
-      i18nLang: this._i18nLang,
-      icon: this._icon,
-      ledgerConn: this._ledgerConn,
-      locking: this._locking,
-      prefix: this._prefix,
-      uiMode: this._uiMode,
-      uiTheme: this._uiTheme,
-      camera: this._camera
-    };
-  }
-
-  public set (settings: Partial<SettingsStruct>): void {
-    this._apiUrl = settings.apiUrl || this._apiUrl;
-    this._ledgerConn = settings.ledgerConn || this._ledgerConn;
-    this._i18nLang = settings.i18nLang || this._i18nLang;
-    this._icon = settings.icon || this._icon;
-    this._locking = settings.locking || this._locking;
-    this._prefix = isUndefined(settings.prefix) ? this._prefix : settings.prefix;
-    this._uiMode = settings.uiMode || this._uiMode;
-    this._uiTheme = settings.uiTheme || this._uiTheme;
-
-    const newValues = this.get();
-
-    store.set('settings', newValues);
-    this._emitter.emit('change', newValues);
-  }
-
-  public on (type: OnTypes, cb: ChangeCallback): void {
-    this._emitter.on(type, cb);
-  }
-}
-
-const settings = new Settings();
-
-export default settings;
diff --git a/pioneer/packages/joy-settings/src/defaults/crypto.ts b/pioneer/packages/joy-settings/src/defaults/crypto.ts
deleted file mode 100644
index 4618256bd4..0000000000
--- a/pioneer/packages/joy-settings/src/defaults/crypto.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-settings authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Option } from '../types';
-
-export const CRYPTOS: Option[] = [
-  {
-    info: 'ed25519',
-    text: 'Edwards (ed25519)',
-    value: 'ed25519'
-  },
-  {
-    info: 'sr25519',
-    text: 'Schnorrkel (sr25519)',
-    value: 'sr25519'
-  }
-];
diff --git a/pioneer/packages/joy-settings/src/defaults/endpoints.ts b/pioneer/packages/joy-settings/src/defaults/endpoints.ts
deleted file mode 100644
index caec087afb..0000000000
--- a/pioneer/packages/joy-settings/src/defaults/endpoints.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-settings authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Option } from '../types';
-
-// type ChainName = 'alexander' | 'edgeware' | 'edgewareTest' | 'flamingFir' | 'kusama';
-type ChainName = 'testnet';
-
-interface ChainData {
-  chainDisplay: string;
-  logo: 'joystream';
-  type: string;
-}
-
-// type ProviderName = 'commonwealth' | 'parity' | 'unfrastructure' | 'w3f';
-type ProviderName = 'joystream_org';
-
-interface PoviderData {
-  providerDisplay: string;
-  nodes: Partial<Record<ChainName, string>>;
-}
-
-// we use this to give an ordering to the chains available
-const ORDER_CHAINS: ChainName[] = ['testnet'];
-
-// we use this to order the providers inside the chains
-const ORDER_PROVIDERS: ProviderName[] = ['joystream_org'];
-
-// some suplementary info on a per-chain basis
-const CHAIN_INFO: Record<ChainName, ChainData> = {
-  testnet: {
-    chainDisplay: 'Joystream',
-    logo: 'joystream',
-    type: 'Current Testnet'
-  }
-};
-
-// the actual providers with all  the nodes they provide
-const PROVIDERS: Record<ProviderName, PoviderData> = {
-  joystream_org: {
-    providerDisplay: 'Joystream.org',
-    nodes: {
-      testnet: 'wss://rome-rpc-endpoint.joystream.org:9944/'
-    }
-  }
-};
-
-export const ENDPOINT_DEFAULT = PROVIDERS.joystream_org.nodes.testnet;
-
-export const ENDPOINTS: Option[] = ORDER_CHAINS.reduce((endpoints: Option[], chainName): Option[] => {
-  const { chainDisplay, logo, type } = CHAIN_INFO[chainName];
-
-  return ORDER_PROVIDERS.reduce((endpoints: Option[], providerName): Option[] => {
-    const { providerDisplay, nodes } = PROVIDERS[providerName];
-    const wssUrl = nodes[chainName];
-
-    if (wssUrl) {
-      endpoints.push({
-        info: logo,
-        text: `${chainDisplay} (${type}, hosted by ${providerDisplay})`,
-        value: wssUrl
-      });
-    }
-
-    return endpoints;
-  }, endpoints);
-}, []);
-
-// add a local node right at the end
-ENDPOINTS.push({
-  info: 'local',
-  text: 'Local Node (Own, 127.0.0.1:9944)',
-  value: 'ws://127.0.0.1:9944/'
-});
diff --git a/pioneer/packages/joy-settings/src/defaults/index.ts b/pioneer/packages/joy-settings/src/defaults/index.ts
deleted file mode 100644
index 3b22bde9b4..0000000000
--- a/pioneer/packages/joy-settings/src/defaults/index.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-settings authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Option } from '../types';
-
-import { CRYPTOS } from './crypto';
-import { ENDPOINTS, ENDPOINT_DEFAULT } from './endpoints';
-import { LEDGER_CONN, LEDGER_CONN_DEFAULT } from './ledger';
-import { PREFIXES, PREFIX_DEFAULT } from './ss58';
-import { ICON_DEFAULT, ICON_DEFAULT_HOST, ICONS, UIMODE_DEFAULT, UIMODES, UITHEME_DEFAULT, UITHEMES } from './ui';
-
-const LANGUAGE_DEFAULT = 'default';
-
-const LANGUAGES: Option[] = [
-  {
-    info: 'detect',
-    text: 'Default browser language (auto-detect)',
-    value: LANGUAGE_DEFAULT
-  }
-];
-
-const LOCKING_DEFAULT = 'session';
-
-const LOCKING: Option[] = [
-  {
-    info: 'session',
-    text: 'Once per session',
-    value: 'session'
-  },
-  {
-    info: 'tx',
-    text: 'On each transaction',
-    value: 'tx'
-  }
-];
-
-const CAMERA_DEFAULT = 'on';
-
-const CAMERA: Option[] = [
-  {
-    info: 'on',
-    text: 'Allow camera access',
-    value: 'on'
-  },
-  {
-    info: 'off',
-    text: 'Do not allow camera access',
-    value: 'off'
-  }
-];
-
-export {
-  CRYPTOS,
-  ENDPOINT_DEFAULT,
-  ENDPOINTS,
-  ICON_DEFAULT,
-  ICON_DEFAULT_HOST,
-  ICONS,
-  LANGUAGE_DEFAULT,
-  LANGUAGES,
-  LEDGER_CONN_DEFAULT,
-  LEDGER_CONN,
-  LOCKING_DEFAULT,
-  LOCKING,
-  PREFIX_DEFAULT,
-  PREFIXES,
-  UIMODE_DEFAULT,
-  UIMODES,
-  UITHEME_DEFAULT,
-  UITHEMES,
-  CAMERA,
-  CAMERA_DEFAULT
-};
diff --git a/pioneer/packages/joy-settings/src/defaults/ledger.ts b/pioneer/packages/joy-settings/src/defaults/ledger.ts
deleted file mode 100644
index 39109484d4..0000000000
--- a/pioneer/packages/joy-settings/src/defaults/ledger.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-settings authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Option } from '../types';
-
-export const LEDGER_CONN_DEFAULT = 'none';
-
-export const LEDGER_CONN: Option[] = [
-  {
-    info: 'none',
-    text: 'Do not attach Ledger devices',
-    value: 'none'
-  },
-  {
-    info: 'u2f',
-    text: 'Attach Ledger via U2F',
-    value: 'u2f'
-  },
-  {
-    info: 'webusb',
-    text: 'Attach Ledger via WebUSB',
-    value: 'webusb'
-  }
-];
diff --git a/pioneer/packages/joy-settings/src/defaults/ss58.ts b/pioneer/packages/joy-settings/src/defaults/ss58.ts
deleted file mode 100644
index 2c6d3782e9..0000000000
--- a/pioneer/packages/joy-settings/src/defaults/ss58.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-settings authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Option } from '../types';
-
-export const PREFIX_DEFAULT = -1;
-
-export const PREFIXES: Option[] = [
-  {
-    info: 'default',
-    text: 'Default for the connected node',
-    value: -1
-  },
-  {
-    info: 'substrate',
-    text: 'Substrate (development)',
-    value: 42
-  }
-  /*
-  {
-    info: 'kusama',
-    text: 'Kusama (canary)',
-    value: 2
-  },
-  {
-    info: 'polkadot',
-    text: 'Polkadot (live)',
-    value: 0
-  }
-  */
-];
diff --git a/pioneer/packages/joy-settings/src/defaults/type.ts b/pioneer/packages/joy-settings/src/defaults/type.ts
deleted file mode 100644
index 0c09a39e3f..0000000000
--- a/pioneer/packages/joy-settings/src/defaults/type.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-settings authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-// matches https://polkadot.js.org & https://*.polkadot.io
-export const isPolkadot = typeof window !== 'undefined' && window.location.host.includes('polkadot');
diff --git a/pioneer/packages/joy-settings/src/defaults/ui.ts b/pioneer/packages/joy-settings/src/defaults/ui.ts
deleted file mode 100644
index 2f3ddba153..0000000000
--- a/pioneer/packages/joy-settings/src/defaults/ui.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-settings authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Option } from '../types';
-
-import { isPolkadot } from './type';
-
-const LANGUAGE_DEFAULT = 'default';
-
-const UIMODE_DEFAULT = 'light';
-
-const UIMODES: Option[] = [
-  {
-    info: 'full',
-    text: 'Fully featured',
-    value: 'full'
-  },
-  {
-    info: 'light',
-    text: 'Basic features only',
-    value: 'light'
-  }
-];
-
-const UITHEME_DEFAULT = isPolkadot
-  ? 'polkadot'
-  : 'substrate';
-
-const UITHEMES: Option[] = [
-  {
-    info: 'polkadot',
-    text: 'Polkadot',
-    value: 'polkadot'
-  },
-  {
-    info: 'substrate',
-    text: 'Substrate',
-    value: 'substrate'
-  }
-];
-
-const ICON_DEFAULT = 'default';
-
-const ICON_DEFAULT_HOST = isPolkadot
-  ? 'polkadot'
-  : 'substrate';
-
-const ICONS: Option[] = [
-  {
-    info: 'default',
-    text: 'Default for the connected node',
-    value: 'default'
-  },
-  {
-    info: 'polkadot',
-    text: 'Polkadot',
-    value: 'polkadot'
-  },
-  {
-    info: 'substrate',
-    text: 'Substrate',
-    value: 'substrate'
-  },
-  {
-    info: 'beachball',
-    text: 'Beachball',
-    value: 'beachball'
-  }
-];
-
-export {
-  ICON_DEFAULT,
-  ICON_DEFAULT_HOST,
-  ICONS,
-  LANGUAGE_DEFAULT,
-  UIMODE_DEFAULT,
-  UIMODES,
-  UITHEME_DEFAULT,
-  UITHEMES
-};
diff --git a/pioneer/packages/joy-settings/src/index.ts b/pioneer/packages/joy-settings/src/index.ts
deleted file mode 100644
index 4b7be4de1e..0000000000
--- a/pioneer/packages/joy-settings/src/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-settings authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import settings, { Settings } from './Settings';
-export { ENDPOINT_DEFAULT, ICON_DEFAULT, ICON_DEFAULT_HOST, LANGUAGE_DEFAULT, LOCKING_DEFAULT, PREFIX_DEFAULT, UIMODE_DEFAULT, UITHEME_DEFAULT, CAMERA, CAMERA_DEFAULT } from './defaults';
-
-export default settings;
-
-export {
-  Settings
-};
diff --git a/pioneer/packages/joy-settings/src/types.ts b/pioneer/packages/joy-settings/src/types.ts
deleted file mode 100644
index 20307ce2b8..0000000000
--- a/pioneer/packages/joy-settings/src/types.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-settings authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-export type Option = {
-  disabled?: boolean;
-  info: string;
-  text: string;
-  value: string | number;
-}
-
-export interface SettingsStruct {
-  apiUrl: string;
-  i18nLang: string;
-  icon: string;
-  ledgerConn: string;
-  locking: string;
-  prefix: number;
-  uiMode: string;
-  uiTheme: string;
-  camera: string;
-}
diff --git a/pioneer/packages/joy-utils-old/.skip-build b/pioneer/packages/joy-utils-old/.skip-build
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/pioneer/packages/joy-utils-old/src/AccountSelector.tsx b/pioneer/packages/joy-utils-old/src/AccountSelector.tsx
deleted file mode 100644
index 62bab33e51..0000000000
--- a/pioneer/packages/joy-utils-old/src/AccountSelector.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import { Bubble, InputAddress, Labelled, Balance, Nonce } from '@polkadot/react-components/index';
-
-type Props = {
-  label?: string;
-  onChange: (accountId?: string | null) => void;
-};
-
-type State = {
-  accountId?: string | null;
-};
-
-export default class AccountSelector extends React.PureComponent<Props, State> {
-  state: State = {};
-
-  render () {
-    const { label } = this.props;
-    const { accountId } = this.state;
-
-    return <section>
-      <InputAddress
-        label={ label || 'My account' }
-        onChange={this.onChange}
-        type='account'
-      />
-      <Labelled>
-        <Bubble label='Balance'>
-          <Balance params={accountId} />
-        </Bubble>
-        <Bubble label='Transactions'>
-          <Nonce params={accountId} />
-        </Bubble>
-      </Labelled>
-    </section>;
-  }
-
-  private onChange = (accountId: string | null): void => {
-    const { onChange } = this.props;
-    this.setState({ accountId }, () => onChange(accountId));
-  }
-}
diff --git a/pioneer/packages/joy-utils-old/src/IdLike.ts b/pioneer/packages/joy-utils-old/src/IdLike.ts
deleted file mode 100644
index a1fdd57971..0000000000
--- a/pioneer/packages/joy-utils-old/src/IdLike.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type IdLike = { toString: () => string } | number
-
-export type HasId = { id: IdLike }
-
-export type MayHaveId = { id?: IdLike }
diff --git a/pioneer/packages/joy-utils-old/src/InputStake.tsx b/pioneer/packages/joy-utils-old/src/InputStake.tsx
deleted file mode 100644
index a6385a19e4..0000000000
--- a/pioneer/packages/joy-utils-old/src/InputStake.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import BN from 'bn.js';
-import React from 'react';
-import { InputBalance, Bubble } from '@polkadot/react-components/index';
-import { formatBalance } from '@polkadot/util';
-
-type Props = {
-  label?: string;
-  min?: BN;
-  isValid?: boolean;
-  onChange: (stake?: BN) => void;
-};
-
-export default class Component extends React.PureComponent<Props> {
-  render () {
-    const { min, label, isValid, onChange } = this.props;
-    return (
-      <div className='ui--row'>
-        <InputBalance
-          className='medium'
-          label={label || 'Amount to be staked:'}
-          onChange={onChange}
-        />
-        {min && !min.isZero() && <div className='medium' style={{ marginLeft: '.5rem' }}>
-          <Bubble
-            className={`left pointing ${isValid ? 'ok' : 'warn'}`}
-            icon={isValid ? 'check' : 'warning sign'}
-            label='Minimum stake'
-          >
-            {formatBalance(min)}
-          </Bubble>
-        </div>}
-      </div>
-    );
-  }
-}
diff --git a/pioneer/packages/joy-utils-old/src/LinkedMapEntry.ts b/pioneer/packages/joy-utils-old/src/LinkedMapEntry.ts
deleted file mode 100644
index 6d484e60bd..0000000000
--- a/pioneer/packages/joy-utils-old/src/LinkedMapEntry.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Tuple, Vec } from '@polkadot/types';
-import { Codec, Constructor } from '@polkadot/types/types';
-import Linkage from '@polkadot/types/codec/Linkage';
-
-export class SingleLinkedMapEntry<T extends Codec> extends Tuple {
-  constructor (Type: Constructor<T>, value?: any) {
-    super({
-      value: Type,
-      linkage: Linkage.withKey(Type)
-    }, value);
-  }
-
-  static withType<O extends Codec> (Type: Constructor<O>): Constructor<SingleLinkedMapEntry<O>> {
-    return class extends SingleLinkedMapEntry<O> {
-      constructor (value?: Constructor<O>) {
-        super(Type, value);
-      }
-    };
-  }
-
-  get value (): T {
-    return this[0] as unknown as T;
-  }
-
-  get linkage (): Linkage<T> {
-    return this[1] as unknown as Linkage<T>;
-  }
-}
-
-export class MultipleLinkedMapEntry<K extends Codec, V extends Codec> extends Tuple {
-  constructor (KeyType: Constructor<K>, ValueType: Constructor<V>, value?: any) {
-    super({
-      keys: Vec.with(KeyType),
-      values: Vec.with(ValueType)
-    }, value);
-  }
-
-  static withType<O extends Codec> (Type: Constructor<O>): Constructor<SingleLinkedMapEntry<O>> {
-    return class extends SingleLinkedMapEntry<O> {
-      constructor (value?: any) {
-        super(Type, value);
-      }
-    };
-  }
-
-  get linked_keys (): Vec<K> {
-    return this[0] as unknown as Vec<K>;
-  }
-
-  get linked_values (): Vec<V> {
-    return this[1] as unknown as Vec<V>;
-  }
-}
diff --git a/pioneer/packages/joy-utils-old/src/Loadable.tsx b/pioneer/packages/joy-utils-old/src/Loadable.tsx
deleted file mode 100644
index 3f3f78d875..0000000000
--- a/pioneer/packages/joy-utils-old/src/Loadable.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-
-export function Loadable<P extends {[index: string]: any}> (required: string[], f: (props: P) => React.ReactNode | void): (props: P) => any {
-  const loading = <div className="spinner"></div>;
-
-  return (props: P) => {
-    if (!props) {
-      return loading;
-    }
-
-    for (const requirement of required) {
-      if (typeof props[requirement] === 'undefined') {
-        return loading;
-      }
-    }
-    return f(props);
-  };
-}
diff --git a/pioneer/packages/joy-utils-old/src/MemberByAccountPreview.tsx b/pioneer/packages/joy-utils-old/src/MemberByAccountPreview.tsx
deleted file mode 100644
index 7eeb618a24..0000000000
--- a/pioneer/packages/joy-utils-old/src/MemberByAccountPreview.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { useEffect, useState, useContext } from 'react';
-
-import { Loader } from 'semantic-ui-react';
-import { ApiContext } from '@polkadot/react-api';
-import ProfilePreview from './MemberProfilePreview';
-import { AccountId } from '@polkadot/types/interfaces';
-import { memberFromAccount, MemberFromAccount } from './accounts';
-
-import styled from 'styled-components';
-
-const MemberByAccount = styled.div``;
-
-type Props = {
-  accountId: AccountId | string;
-};
-
-const MemberByAccountPreview: React.FunctionComponent<Props> = ({ accountId }) => {
-  const { api } = useContext(ApiContext);
-  const [member, setMember] = useState(null as MemberFromAccount | null);
-  useEffect(
-    () => {
-      let isSubscribed = true;
-      memberFromAccount(api, accountId).then(member => isSubscribed && setMember(member));
-      return () => { isSubscribed = false; };
-    },
-    [accountId]
-  );
-
-  return (
-    <MemberByAccount>
-      { member
-        ? (
-          member.profile
-            ? <ProfilePreview
-              avatar_uri={member.profile.avatar_uri.toString()}
-              root_account={member.profile.root_account.toString()}
-              handle={member.profile.handle.toString()}
-              id={member.id}
-              link={true}/>
-            : 'Member profile not found!'
-        )
-        : <Loader inline active>Fetching member profile...</Loader>
-      }
-    </MemberByAccount>
-  );
-};
-
-export default MemberByAccountPreview;
diff --git a/pioneer/packages/joy-utils-old/src/MemberProfilePreview.tsx b/pioneer/packages/joy-utils-old/src/MemberProfilePreview.tsx
deleted file mode 100644
index af503bc575..0000000000
--- a/pioneer/packages/joy-utils-old/src/MemberProfilePreview.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-import { Image } from 'semantic-ui-react';
-import { IdentityIcon } from '@polkadot/react-components';
-import { Link } from 'react-router-dom';
-import { Text } from '@polkadot/types';
-import { AccountId } from '@polkadot/types/interfaces';
-import { MemberId, Membership } from '@joystream/types/members';
-import styled from 'styled-components';
-
-type ProfileItemProps = {
-  avatar_uri: string | Text;
-  root_account: string | AccountId;
-  handle: string | Text;
-  link?: boolean;
-  id?: number | MemberId;
-};
-
-const StyledProfilePreview = styled.div`
-  display: flex;
-  align-items: center;
-  & .ui.avatar.image {
-    margin: 0 !important;
-    width: 40px !important;
-    height: 40px !important;
-  }
-`;
-
-const Details = styled.div`
-  margin-left: 1rem;
-  display: grid;
-  grid-row-gap: 0.25rem;
-  grid-template-columns: 100%;
-`;
-
-const DetailsHandle = styled.h4`
-  margin: 0;
-  font-weight: bold;
-  color: #333;
-`;
-
-const DetailsID = styled.div`
-  color: #777;
-`;
-
-export default function ProfilePreview (
-  { id, avatar_uri, root_account, handle, link = false, children }: React.PropsWithChildren<ProfileItemProps>
-) {
-  const Preview = (
-    <StyledProfilePreview>
-      {avatar_uri.toString() ? (
-        <Image src={avatar_uri.toString()} avatar floated="left" />
-      ) : (
-        <IdentityIcon className="image" value={root_account.toString()} size={40} />
-      )}
-      <Details>
-        <DetailsHandle>{handle.toString()}</DetailsHandle>
-        { id !== undefined && <DetailsID>ID: {id.toString()}</DetailsID> }
-        { children }
-      </Details>
-    </StyledProfilePreview>
-  );
-
-  if (link) {
-    return <Link to={ `/members/${handle.toString()}` }>{ Preview }</Link>;
-  }
-
-  return Preview;
-}
-
-type ProfilePreviewFromStructProps = {
-  profile: Membership;
-  link?: boolean;
-  id?: number | MemberId;
-};
-
-export function ProfilePreviewFromStruct (
-  { profile, link, id, children }: React.PropsWithChildren<ProfilePreviewFromStructProps>
-) {
-  const { avatar_uri, root_account, handle } = profile;
-  return (
-    <ProfilePreview {...{ avatar_uri, root_account, handle, link, id }}>
-      {children}
-    </ProfilePreview>
-  );
-}
diff --git a/pioneer/packages/joy-utils-old/src/MyAccount.tsx b/pioneer/packages/joy-utils-old/src/MyAccount.tsx
deleted file mode 100644
index 32adcab82d..0000000000
--- a/pioneer/packages/joy-utils-old/src/MyAccount.tsx
+++ /dev/null
@@ -1,284 +0,0 @@
-import React from 'react';
-import { Message } from 'semantic-ui-react';
-import { Link } from 'react-router-dom';
-
-import { AccountId } from '@polkadot/types/interfaces';
-import { Vec, GenericAccountId, Option } from '@polkadot/types';
-import accountObservable from '@polkadot/ui-keyring/observable/accounts';
-import { withCalls, withMulti, withObservable } from '@polkadot/react-api/index';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-
-import { MemberId, Membership } from '@joystream/types/members';
-import { CuratorId, LeadId, Lead, CurationActor, Curator } from '@joystream/types/content-working-group';
-
-import { queryMembershipToProp } from '@polkadot/joy-members/utils';
-import { useMyAccount } from '@polkadot/joy-utils/MyAccountContext';
-import { queryToProp, MultipleLinkedMapEntry, SingleLinkedMapEntry } from '@polkadot/joy-utils/index';
-import { useMyMembership } from './MyMembershipContext';
-
-import { componentName } from '@polkadot/joy-utils/react/helpers';
-
-export type MyAddressProps = {
-  myAddress?: string;
-};
-
-export type MyAccountProps = MyAddressProps & {
-  myAccountId?: AccountId;
-  myMemberId?: MemberId;
-  memberIdsByRootAccountId?: Vec<MemberId>;
-  memberIdsByControllerAccountId?: Vec<MemberId>;
-  myMemberIdChecked?: boolean;
-  iAmMember?: boolean;
-  myMembership?: Membership | null;
-
-  // Content Working Group
-  curatorEntries?: any; // entire linked_map: CuratorId => Curator
-  isLeadSet?: Option<LeadId>;
-  contentLeadId?: LeadId;
-  contentLeadEntry?: any; // linked_map value
-
-  curationActor?: any;
-  allAccounts?: SubjectInfo;
-};
-
-function withMyAddress<P extends MyAccountProps> (Component: React.ComponentType<P>) {
-  const ResultComponent: React.FunctionComponent<P> = (props: P) => {
-    const {
-      state: { address }
-    } = useMyAccount();
-    const myAccountId = address ? new GenericAccountId(address) : undefined;
-    return <Component myAddress={address} myAccountId={myAccountId} {...props} />;
-  };
-  ResultComponent.displayName = `withMyAddress(${componentName(Component)})`;
-  return ResultComponent;
-}
-
-const withMyMemberIds = withCalls<MyAccountProps>(
-  queryMembershipToProp('memberIdsByRootAccountId', 'myAddress'),
-  queryMembershipToProp('memberIdsByControllerAccountId', 'myAddress')
-);
-
-function withMyMembership<P extends MyAccountProps> (Component: React.ComponentType<P>) {
-  const ResultComponent: React.FunctionComponent<P> = (props: P) => {
-    const { memberIdsByRootAccountId, memberIdsByControllerAccountId } = props;
-
-    const myMemberIdChecked = memberIdsByRootAccountId && memberIdsByControllerAccountId;
-
-    let myMemberId: MemberId | undefined;
-    if (memberIdsByRootAccountId && memberIdsByControllerAccountId) {
-      memberIdsByRootAccountId.concat(memberIdsByControllerAccountId);
-      if (memberIdsByRootAccountId.length) {
-        myMemberId = memberIdsByRootAccountId[0];
-      }
-    }
-
-    const iAmMember = myMemberId !== undefined;
-
-    const newProps = {
-      myMemberIdChecked,
-      myMemberId,
-      iAmMember
-    };
-
-    return <Component {...props} {...newProps} />;
-  };
-  ResultComponent.displayName = `withMyMembership(${componentName(Component)})`;
-  return ResultComponent;
-}
-
-function resolveMyProfile<P extends { myMembership?: Membership | null }> (Component: React.ComponentType<P>) {
-  const ResultComponent: React.FunctionComponent<P> = (props: P) => {
-    let { myMembership } = props;
-    myMembership = (!myMembership || myMembership.handle.isEmpty) ? null : myMembership;
-    return <Component {...props} myMembership={ myMembership } />;
-  };
-  ResultComponent.displayName = `resolveMyProfile(${componentName(Component)})`;
-  return ResultComponent;
-}
-
-const withMyProfileCall = withCalls<MyAccountProps>(queryMembershipToProp('membershipById', {
-  paramName: 'myMemberId',
-  propName: 'myMembership'
-}));
-
-const withMyProfile = <P extends MyAccountProps>(Component: React.ComponentType<P>) =>
-  withMulti(Component, withMyProfileCall, resolveMyProfile);
-
-const withContentWorkingGroupDetails = withCalls<MyAccountProps>(
-  queryToProp('query.contentWorkingGroup.currentLeadId', { propName: 'isLeadSet' }),
-  queryToProp('query.contentWorkingGroup.curatorById', { propName: 'curatorEntries' })
-);
-
-function resolveLead<P extends MyAccountProps> (Component: React.ComponentType<P>) {
-  const ResultComponent: React.FunctionComponent<P> = (props: P) => {
-    const { isLeadSet } = props;
-
-    let contentLeadId;
-
-    if (isLeadSet && isLeadSet.isSome) {
-      contentLeadId = isLeadSet.unwrap();
-    }
-
-    const newProps = {
-      contentLeadId
-    };
-
-    return <Component {...props} {...newProps} />;
-  };
-  ResultComponent.displayName = `resolveLead(${componentName(Component)})`;
-  return ResultComponent;
-}
-
-const resolveLeadEntry = withCalls<MyAccountProps>(
-  queryToProp('query.contentWorkingGroup.leadById', { propName: 'contentLeadEntry', paramName: 'contentLeadId' })
-);
-
-const withContentWorkingGroup = <P extends MyAccountProps>(Component: React.ComponentType<P>) =>
-  withMulti(Component, withContentWorkingGroupDetails, resolveLead, resolveLeadEntry);
-
-function withCurationActor<P extends MyAccountProps> (Component: React.ComponentType<P>) {
-  const ResultComponent: React.FunctionComponent<P> = (props: P) => {
-    const {
-      myAccountId,
-      isLeadSet,
-      contentLeadEntry,
-      curatorEntries,
-      allAccounts
-    } = props;
-
-    if (!myAccountId || !isLeadSet || !contentLeadEntry || !curatorEntries || !allAccounts) {
-      return <Component {...props} />;
-    }
-
-    let lead = isLeadSet.isSome
-      ? new SingleLinkedMapEntry<Lead>(Lead, contentLeadEntry).value
-      : null;
-
-    // Ignore lead if he's not active
-    // TODO: Does if ever happen if we query currentLeadById?
-    if (!(lead?.stage.isOfType('Active'))) {
-      lead = null;
-    }
-
-    const curators = new MultipleLinkedMapEntry(CuratorId, Curator, curatorEntries);
-
-    const curationActorByAccount = (accountId: AccountId | string) => {
-      if (lead && lead.role_account.toString() === accountId.toString()) {
-        return new CurationActor({ Lead: null });
-      }
-
-      const matchingCuratorIndex = curators.linked_values.findIndex(curator =>
-        curator.is_active && accountId.toString() === curator.role_account.toString()
-      );
-
-      return matchingCuratorIndex >= 0
-        ? new CurationActor({
-          Curator: curators.linked_keys[matchingCuratorIndex]
-        })
-        : null;
-    };
-
-    // First priority - currently selected account
-    let actor = curationActorByAccount(myAccountId);
-    let actorKey: AccountId | null = myAccountId;
-    // Second priority - check other keys and find best role
-    // TODO: Prioritize current member?
-    // TODO: Perhaps just don't do that at all and force the user to select the correct key to avoid confision?
-    if (!actor) {
-      const allActorsWithKeys = Object.keys(allAccounts).map(accKey => ({
-        actor: curationActorByAccount(allAccounts[accKey].json.address),
-        key: new GenericAccountId(allAccounts[accKey].json.address)
-      }));
-      let actorWithKey = allActorsWithKeys.find(({ actor }) => actor?.isOfType('Lead'));
-      if (!actorWithKey) {
-        actorWithKey = allActorsWithKeys.find(({ actor }) => actor?.isOfType('Curator'));
-      }
-      actor = actorWithKey?.actor || null;
-      actorKey = actorWithKey?.key || null;
-    }
-
-    if (actor && actorKey) {
-      return <Component {...props} curationActor={[actor, actorKey]} />;
-    } else {
-      // we don't have any key that can fulfill a curation action
-      return <Component {...props} />;
-    }
-  };
-  ResultComponent.displayName = `withCurationActor(${componentName(Component)})`;
-  return ResultComponent;
-}
-
-export const withMyAccount = <P extends MyAccountProps>(Component: React.ComponentType<P>) =>
-  withMulti(
-    Component,
-    withObservable(accountObservable.subject, { propName: 'allAccounts' }),
-    withMyAddress,
-    withMyMemberIds,
-    withMyMembership,
-    withMyProfile,
-    withContentWorkingGroup,
-    withCurationActor
-  );
-
-export function MembershipRequired<P extends {}> (Component: React.ComponentType<P>): React.ComponentType<P> {
-  const ResultComponent: React.FunctionComponent<P> = (props: P) => {
-    const { myMemberIdChecked, iAmMember } = useMyMembership();
-
-    if (!myMemberIdChecked) {
-      return <em>Loading...</em>;
-    } else if (iAmMember) {
-      return <Component {...props} />;
-    }
-
-    return (
-      <Message warning className="JoyMainStatus">
-        <Message.Header>Only members can access this functionality.</Message.Header>
-        <div style={{ marginTop: '1rem' }}>
-          <Link to={'/members/edit'} className="ui button orange">
-            Register here
-          </Link>
-          <span style={{ margin: '0 .5rem' }}> or </span>
-          <Link to={'/accounts'} className="ui button">
-            Change key
-          </Link>
-        </div>
-      </Message>
-    );
-  };
-  ResultComponent.displayName = `MembershipRequired(${componentName(Component)})`;
-  return ResultComponent;
-}
-
-export function AccountRequired<P extends {}> (Component: React.ComponentType<P>): React.ComponentType<P> {
-  const ResultComponent: React.FunctionComponent<P> = (props: P) => {
-    const { allAccounts } = useMyMembership();
-
-    if (allAccounts && !Object.keys(allAccounts).length) {
-      return (
-        <Message warning className="JoyMainStatus">
-          <Message.Header>Please create a key to get started.</Message.Header>
-          <div style={{ marginTop: '1rem' }}>
-            <Link to={'/accounts'} className="ui button orange">
-              Create key
-            </Link>
-          </div>
-        </Message>
-      );
-    }
-
-    return <Component {...props} />;
-  };
-  ResultComponent.displayName = `AccountRequired(${componentName(Component)})`;
-  return ResultComponent;
-}
-
-// TODO: We could probably use withAccountRequired, which wouldn't pass any addiotional props, just like withMembershipRequired.
-// Just need to make sure those passed props are not used in the extended components (they probably aren't).
-export const withOnlyAccounts = <P extends MyAccountProps>(Component: React.ComponentType<P>): React.ComponentType<P> =>
-  withMulti(Component, withMyAccount, AccountRequired);
-
-export const withMembershipRequired = <P extends {}> (Component: React.ComponentType<P>): React.ComponentType<P> =>
-  withMulti(Component, AccountRequired, MembershipRequired);
-
-export const withOnlyMembers = <P extends MyAccountProps>(Component: React.ComponentType<P>): React.ComponentType<P> =>
-  withMulti(Component, withMyAccount, withMembershipRequired);
diff --git a/pioneer/packages/joy-utils-old/src/Sudo.tsx b/pioneer/packages/joy-utils-old/src/Sudo.tsx
deleted file mode 100644
index e3cb978e56..0000000000
--- a/pioneer/packages/joy-utils-old/src/Sudo.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import { Message } from 'semantic-ui-react';
-
-import { AccountId } from '@polkadot/types/interfaces';
-import { withCalls, withMulti } from '@polkadot/react-api/with';
-import { useMyAccount } from '@polkadot/joy-utils/MyAccountContext';
-
-type OnlySudoProps = {
-  sudo?: AccountId;
-};
-
-function OnlySudo<P extends OnlySudoProps> (Component: React.ComponentType<P>) {
-  return function (props: P) {
-    const { sudo } = props;
-    if (!sudo) {
-      return <em>Loading sudo key...</em>;
-    }
-
-    const { state: { address: myAddress } } = useMyAccount();
-    const iAmSudo = myAddress === sudo.toString();
-
-    if (iAmSudo) {
-      return <Component {...props} />;
-    } else {
-      return (
-        <Message warning className='JoyMainStatus'>
-          <Message.Header>Only sudo can access this functionality.</Message.Header>
-        </Message>
-      );
-    }
-  };
-}
-
-export const withOnlySudo = <P extends OnlySudoProps> (Component: React.ComponentType<P>) =>
-  withMulti(
-    Component,
-    withCalls(['query.sudo.key', { propName: 'sudo' }]),
-    OnlySudo
-  );
diff --git a/pioneer/packages/joy-utils-old/src/TextArea.tsx b/pioneer/packages/joy-utils-old/src/TextArea.tsx
deleted file mode 100644
index d3d1fd4868..0000000000
--- a/pioneer/packages/joy-utils-old/src/TextArea.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import { TextArea } from 'semantic-ui-react';
-import { Labelled } from '@polkadot/react-components/index';
-
-type Props = {
-  // TextArea
-  as?: any;
-  autoHeight?: boolean;
-  rows?: number | string;
-  style?: Record<string, any>;
-  value?: number | string;
-  placeholder?: string;
-
-  // Label
-  onChange?: (value: string) => void;
-  labelClass?: string;
-  labelStyle?: {
-    [index: string]: any;
-  };
-  label?: string;
-  withLabel?: boolean;
-};
-
-export default class Component extends React.PureComponent<Props> {
-  render () {
-    const { as, autoHeight, rows, style, value, label, labelClass, labelStyle, withLabel = true, onChange, ...otherProps } = this.props;
-    return (
-      <Labelled
-        className={labelClass}
-        style={labelStyle}
-        label={label}
-        withLabel={withLabel}
-      >
-        <div className='ui form'>
-          <TextArea
-            {...otherProps}
-            as={as}
-            autoHeight={autoHeight}
-            rows={rows}
-            style={style}
-            value={value}
-            onChange={this.onChange}
-          />
-        </div>
-      </Labelled>
-    );
-  }
-
-  private onChange = (event: React.SyntheticEvent<Element>): void => {
-    const { onChange } = this.props;
-    const { value } = event.target as HTMLInputElement;
-
-    onChange && onChange(value);
-  }
-}
diff --git a/pioneer/packages/joy-utils-old/src/Transport.ts b/pioneer/packages/joy-utils-old/src/Transport.ts
deleted file mode 100644
index fa212fe350..0000000000
--- a/pioneer/packages/joy-utils-old/src/Transport.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export abstract class Transport {
-  protected promise<T> (value: T, timeout?: number): Promise<T> {
-    return new Promise<T>((resolve, reject) => {
-      if (timeout) {
-        (new Promise(resolve => setTimeout(resolve, timeout))).then(() => resolve(value));
-      } else {
-        resolve(value);
-      }
-    });
-  }
-}
diff --git a/pioneer/packages/joy-utils-old/src/View.tsx b/pioneer/packages/joy-utils-old/src/View.tsx
deleted file mode 100644
index bd56d5df2d..0000000000
--- a/pioneer/packages/joy-utils-old/src/View.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react';
-
-import { Controller } from './Controller';
-
-export type Params = Map<string, string>
-
-const newParams = (): Params => {
-  return new Map<string, string>();
-};
-
-type viewProps = {
-  params?: Params;
-}
-
-type renderFn<C, S> = (state: S, controller: C, params: Params) => React.ReactElement | null
-
-export type ViewComponent<C, P = any, S = any> = React.FC<viewProps>
-export type ViewComponentFactory<C, P = any, S = any> = (controller: C) => React.FC<viewProps>
-
-type ViewPropsExplicit<C, S> = {
-  errorComponent?: React.ComponentType;
-  render: renderFn<C, S>;
-}
-
-type ViewProps<C, S> = ViewPropsExplicit<C, S> | renderFn<C, S>
-
-function DefaultError () {
-  return <p>There has been an error</p>;
-}
-
-export function View<C extends Controller<S, any>, S> (args: ViewProps<C, S>): ViewComponentFactory<C, S> {
-  return (controller: C) => {
-    return (props: viewProps, ctx: any): React.ReactElement | null => {
-      const [state, setState] = useState<S>(controller.state);
-
-      const onUpdate = (newState: S) => {
-        setState({ ...newState });
-      };
-
-      useEffect(() => {
-        controller.subscribe(onUpdate);
-        controller.dispatch(); // Dispatch on first subscription (in case there's was a re-render of the View)
-
-        return () => {
-          controller.unsubscribe(onUpdate);
-        };
-      }, []);
-
-      let context: Params;
-      if (typeof props.params !== 'undefined') {
-        context = props.params;
-      } else {
-        context = newParams();
-      }
-
-      let renderFn: renderFn<C, S>;
-      let Err: React.ComponentType = DefaultError;
-      if (typeof args === 'function') {
-        renderFn = args;
-      } else {
-        renderFn = args.render;
-
-        if (typeof args.errorComponent !== 'undefined') {
-          Err = args.errorComponent;
-        }
-      }
-
-      return useMemo(() => {
-        if (controller.hasError()) {
-          return Err ? <Err /> : null;
-        }
-        return renderFn(state, controller, context);
-      }, [state]);
-    };
-  };
-}
diff --git a/pioneer/packages/joy-utils-old/src/index.ts b/pioneer/packages/joy-utils-old/src/index.ts
deleted file mode 100644
index cad14437ab..0000000000
--- a/pioneer/packages/joy-utils-old/src/index.ts
+++ /dev/null
@@ -1,202 +0,0 @@
-import BN from 'bn.js';
-import { Text, Option } from '@polkadot/types';
-import { OptionalText } from '@joystream/types/content-working-group';
-
-import keyring from '@polkadot/ui-keyring';
-
-// Joystream Stake utils
-// --------------------------------------
-
-import { ElectionStake, Backer } from '@joystream/types/council';
-
-// Substrate/Polkadot API utils
-// --------------------------------------
-
-import { Options as QueryOptions } from '@polkadot/react-api/with/types';
-
-import { APIQueryCache } from './APIQueryCache';
-
-// Parse URLs
-// --------------------------------------
-
-import queryString from 'query-string';
-
-// Business logic middleware
-// --------------------------------------
-import { MultipleLinkedMapEntry, SingleLinkedMapEntry } from './LinkedMapEntry';
-
-// Business logic middleware
-// --------------------------------------
-
-import { Controller } from './Controller';
-import { Loadable } from './Loadable';
-import { Observable } from './Observable';
-import { Observer, Subscribable, Subscription } from './Subscribable';
-import { Transport } from './Transport';
-import { View, ViewComponent, Params } from './View';
-
-// Memoization
-// --------------------------------------
-
-import { memoize } from './memoize';
-
-// Substrate events
-// --------------------------------------
-
-import { SubmittableResult } from '@polkadot/api';
-import { Codec } from '@polkadot/types/types';
-
-export const ZERO = new BN(0);
-
-export function bnToStr (bn?: BN, dflt = ''): string {
-  return bn ? bn.toString() : dflt;
-}
-
-// String, Numbers, Object
-// --------------------------------------
-
-export const notDefined = (x: any): boolean =>
-  x === null || typeof x === 'undefined';
-
-export const isDefined = (x: any): boolean =>
-  !notDefined(x);
-
-export const isDef = isDefined;
-
-export const notDef = notDefined;
-
-export const isObj = (x: any): boolean =>
-  x !== null && typeof x === 'object';
-
-export const isStr = (x: any): boolean =>
-  typeof x === 'string';
-
-export const isNum = (x: any): boolean =>
-  typeof x === 'number';
-
-export const isEmptyStr = (x: any): boolean =>
-  notDefined(x) || (isStr(x) && x.trim().length === 0);
-
-export const nonEmptyStr = (x?: any) =>
-  isStr(x) && x.trim().length > 0;
-
-export const parseNumStr = (num: string): number | undefined => {
-  try {
-    return parseInt(num, undefined);
-  } catch (err) {
-    return undefined;
-  }
-};
-
-export const nonEmptyArr = (x: any): boolean =>
-  Array.isArray(x) && x.length > 0;
-
-export const isEmptyArr = (x: any): boolean =>
-  !nonEmptyArr(x);
-
-export function findNameByAddress (address: string): string | undefined {
-  let keyring_address;
-  try {
-    keyring_address = keyring.getAccount(address);
-  } catch (error) {
-    try {
-      keyring_address = keyring.getAddress(address);
-    } catch (error) {
-      // do nothing
-    }
-  }
-  return keyring_address ? keyring_address.meta.name : undefined;
-}
-
-export function isKnownAddress (address: string): boolean {
-  return isDefined(findNameByAddress(address));
-}
-
-export function newOptionalText (str?: string): OptionalText {
-  const text = isEmptyStr(str) ? null : str;
-  return new Option(Text, text);
-}
-
-export function calcTotalStake (stakes: ElectionStake | ElectionStake[] | undefined): BN {
-  if (typeof stakes === 'undefined') {
-    return ZERO;
-  }
-  const total = (stake: ElectionStake) => stake.new.add(stake.transferred);
-  try {
-    if (Array.isArray(stakes)) {
-      return stakes.reduce((accum, stake) => {
-        return accum.add(total(stake));
-      }, ZERO);
-    } else {
-      return total(stakes);
-    }
-  } catch (err) {
-    console.log('Failed to calculate a total stake', stakes, err);
-    return ZERO;
-  }
-}
-
-export function calcBackersStake (backers: Backer[]): BN {
-  return backers.map(b => b.stake).reduce((accum, stake) => {
-    return accum.add(stake);
-  }, ZERO);
-}
-
-/** Example of apiQuery: 'query.councilElection.round' */
-export function queryToProp (
-  apiQuery: string,
-  paramNameOrOpts?: string | QueryOptions
-): [string, QueryOptions] {
-  let paramName: string | undefined;
-  let propName: string | undefined;
-
-  if (typeof paramNameOrOpts === 'string') {
-    paramName = paramNameOrOpts;
-  } else if (paramNameOrOpts) {
-    paramName = paramNameOrOpts.paramName;
-    propName = paramNameOrOpts.propName;
-  }
-
-  // If prop name is still undefined, derive it from the name of storage item:
-  if (!propName) {
-    propName = apiQuery.split('.').slice(-1)[0];
-  }
-
-  return [apiQuery, { paramName, propName }];
-}
-export { APIQueryCache };
-
-export function getUrlParam (location: Location, paramName: string, deflt: string | null = null): string | null {
-  const params = queryString.parse(location.search);
-  return params[paramName] ? params[paramName] as string : deflt;
-}
-export { MultipleLinkedMapEntry, SingleLinkedMapEntry };
-
-export {
-  Controller,
-  Loadable,
-  Observer, Observable,
-  Subscribable, Subscription,
-  Transport,
-  View, ViewComponent, Params
-};
-export { memoize };
-
-export function filterSubstrateEventsAndExtractData (txResult: SubmittableResult, eventName: string): Codec[][] {
-  const res: Codec[][] = [];
-  txResult.events.forEach((event) => {
-    const { event: { method, data } } = event;
-    if (method === eventName) {
-      res.push(data.toArray());
-    }
-  });
-  return res;
-}
-
-export function findFirstParamOfSubstrateEvent<T extends Codec> (txResult: SubmittableResult, eventName: string): T | undefined {
-  const data = filterSubstrateEventsAndExtractData(txResult, eventName);
-  if (data && data.length) {
-    return data[0][0] as T;
-  }
-  return undefined;
-}
diff --git a/pioneer/packages/joy-utils-old/src/memo/Memo.css b/pioneer/packages/joy-utils-old/src/memo/Memo.css
deleted file mode 100644
index ae25539827..0000000000
--- a/pioneer/packages/joy-utils-old/src/memo/Memo.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.JoyMemo--preview {
-  margin-right: .5rem;
-}
-
-.JoyMemo--empty {
-  color: #999;
-}
\ No newline at end of file
diff --git a/pioneer/packages/joy-utils-old/src/memo/MemoEdit.tsx b/pioneer/packages/joy-utils-old/src/memo/MemoEdit.tsx
deleted file mode 100644
index a86e4b279b..0000000000
--- a/pioneer/packages/joy-utils-old/src/memo/MemoEdit.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import BN from 'bn.js';
-import React from 'react';
-
-import { withCalls } from '@polkadot/react-api/with';
-
-import { nonEmptyStr } from '../index';
-import TextArea from '../TextArea';
-
-type Props = {
-  accountId: string;
-  onChange: (memo: string) => void;
-  onReset: (memo: string) => void;
-  maxLen?: BN;
-  storedMemo?: Text;
-};
-
-type State = {
-  memo: string;
-  loadedMemo: boolean;
-};
-
-class Component extends React.PureComponent<Props, State> {
-  static getDerivedStateFromProps (props: Props, currentState: State) {
-    const { storedMemo } = props;
-    const { memo, loadedMemo } = currentState;
-    if (storedMemo && !memo && !loadedMemo) {
-      // only set loaded memo once
-      return {
-        memo: storedMemo.toString(),
-        loadedMemo: true
-      };
-    }
-    return null;
-  }
-
-  state: State = {
-    memo: '',
-    loadedMemo: false
-  };
-
-  render () {
-    const { memo } = this.state;
-    return (
-      <TextArea
-        rows={3}
-        autoHeight={true}
-        label='Memo (supports Markdown):'
-        placeholder='Here you can type any public information relevant to your account.'
-        value={memo}
-        onChange={this.onChange}
-      />
-    );
-  }
-
-  private onChange = (memo: string) => {
-    const { maxLen, onChange, onReset, storedMemo } = this.props;
-    if (maxLen && nonEmptyStr(memo)) {
-      memo = memo.substring(0, maxLen.toNumber());
-    }
-    this.setState({ memo });
-
-    if (storedMemo && memo === storedMemo.toString()) {
-      if (onReset) {
-        onReset(memo);
-      }
-    } else {
-      if (onChange) {
-        onChange(memo);
-      }
-    }
-  }
-}
-
-// inject the actual API calls automatically into props
-export default withCalls<Props>(
-  ['query.memo.maxMemoLength', { propName: 'maxLen' }],
-  ['query.memo.memo', { paramName: 'accountId', propName: 'storedMemo' }]
-)(Component);
diff --git a/pioneer/packages/joy-utils-old/src/memo/MemoView.tsx b/pioneer/packages/joy-utils-old/src/memo/MemoView.tsx
deleted file mode 100644
index 9780e4b435..0000000000
--- a/pioneer/packages/joy-utils-old/src/memo/MemoView.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-import ReactMarkdown from 'react-markdown';
-import { truncate } from 'lodash';
-
-import { withCalls } from '@polkadot/react-api/index';
-
-import { nonEmptyStr } from '../index';
-import './Memo.css';
-import { Link } from 'react-router-dom';
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const remark = require('remark');
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const strip = require('strip-markdown');
-const mdStripper = remark().use(strip);
-
-type Props = {
-  accountId: string;
-  memo?: Text;
-  preview?: boolean;
-  showEmpty?: boolean;
-  className?: string;
-  style?: any;
-};
-
-class Component extends React.PureComponent<Props> {
-  private mdToPlainText = (md: string): string => {
-    if (nonEmptyStr(md)) {
-      try {
-        return mdStripper.processSync(md).toString().trim();
-      } catch (err) {
-        console.log('Failed to convert markdown to plain text', err);
-      }
-    }
-    return md;
-  }
-
-  private isMemoEmpty (): boolean {
-    const { memo } = this.props;
-    return !memo;
-  }
-
-  renderMemo () {
-    const { memo, preview = true, accountId } = this.props;
-    if (this.isMemoEmpty()) {
-      return <em className='JoyMemo--empty'>Memo is empty.</em>;
-    } else {
-      const md = memo ? memo.toString().trim() : '';
-      if (preview) {
-        const plainText = this.mdToPlainText(md);
-        const previewText = truncate(plainText, { length: 80, omission: '…' });
-        return (
-          <span className='JoyMemo--preview'>
-            {previewText}
-            <Link to={`/addressbook/memo/${accountId}`}>{' view full memo'}</Link>
-          </span>
-        );
-      } else {
-        return <ReactMarkdown className='JoyViewMD' source={md} linkTarget='_blank' />;
-      }
-    }
-  }
-
-  render () {
-    const { showEmpty = true, className, style } = this.props;
-    return this.isMemoEmpty() && !showEmpty ? null : <div className={className} style={style}>{this.renderMemo()}</div>;
-  }
-}
-
-export default withCalls<Props>(
-  ['query.memo.memo',
-    { paramName: 'accountId', propName: 'memo' }]
-)(Component);
diff --git a/pioneer/packages/joy-utils-old/src/memoize.ts b/pioneer/packages/joy-utils-old/src/memoize.ts
deleted file mode 100644
index 480a4b6197..0000000000
--- a/pioneer/packages/joy-utils-old/src/memoize.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-let counter = 0;
-
-function getNewFunction (originalMethod: () => void) {
-  const identifier = ++counter;
-
-  return function (this: any, ...args: any[]) {
-    const propValName = `__memoized_value_${identifier}`;
-    const propMapName = `__memoized_map_${identifier}`;
-
-    let returnedValue: any;
-
-    if (args.length > 0) {
-      if (!Object.prototype.hasOwnProperty.call(this, propMapName)) {
-        Object.defineProperty(this, propMapName, {
-          configurable: false,
-          enumerable: false,
-          writable: false,
-          value: new Map<any, any>()
-        });
-      }
-      const myMap: Map<any, any> = this[propMapName];
-      const hashKey = args[0];
-
-      if (myMap.has(hashKey)) {
-        returnedValue = myMap.get(hashKey);
-      } else {
-        returnedValue = originalMethod.apply(this, args as []);
-        myMap.set(hashKey, returnedValue);
-      }
-    } else {
-      if (Object.prototype.hasOwnProperty.call(this, propValName)) {
-        returnedValue = this[propValName];
-      } else {
-        returnedValue = originalMethod.apply(this, args as []);
-        Object.defineProperty(this, propValName, {
-          configurable: false,
-          enumerable: false,
-          writable: false,
-          value: returnedValue
-        });
-      }
-    }
-
-    return returnedValue;
-  };
-}
-
-export function memoize () {
-  return (target: Record<string, any>, propertyKey: string, descriptor: TypedPropertyDescriptor<any>) => {
-    descriptor.value = getNewFunction(descriptor.value);
-  };
-}
diff --git a/pioneer/packages/joy-utils-old/src/react/hooks/index.tsx b/pioneer/packages/joy-utils-old/src/react/hooks/index.tsx
deleted file mode 100644
index c2a217e3d0..0000000000
--- a/pioneer/packages/joy-utils-old/src/react/hooks/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as usePromise } from './usePromise';
-export { default as useTransport } from './useTransport';
-export { default as useProposalSubscription } from './proposals/useProposalSubscription';
diff --git a/pioneer/packages/joy-utils-old/src/react/hooks/usePromise.tsx b/pioneer/packages/joy-utils-old/src/react/hooks/usePromise.tsx
deleted file mode 100644
index 67f4d679ff..0000000000
--- a/pioneer/packages/joy-utils-old/src/react/hooks/usePromise.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-
-export type UsePromiseReturnValues<T> = [T, any, boolean, () => Promise<void|null>];
-
-export default function usePromise<T> (
-  promise: () => Promise<T>,
-  defaultValue: T,
-  dependsOn: any[] = [],
-  onUpdate?: (newValue: T) => void
-): UsePromiseReturnValues<T> {
-  const [state, setState] = useState<{
-    value: T;
-    error: any;
-    isPending: boolean;
-  }>({ value: defaultValue, error: null, isPending: true });
-
-  let isSubscribed = true;
-  const execute = useCallback(() => {
-    setState({ value: state.value, error: null, isPending: true });
-    return promise()
-      .then(value => {
-        if (isSubscribed) {
-          setState({ value, error: null, isPending: false });
-          if (onUpdate) {
-            onUpdate(value);
-          }
-        }
-      })
-      .catch(error => {
-        if (isSubscribed) {
-          setState({ value: defaultValue, error: error, isPending: false });
-          if (onUpdate) {
-            onUpdate(defaultValue); // This should represent an empty value in most cases
-          }
-        }
-      });
-  }, [promise]);
-
-  useEffect(() => {
-    execute();
-    return () => {
-      isSubscribed = false;
-    };
-  }, dependsOn);
-
-  const { value, error, isPending } = state;
-  return [value, error, isPending, execute];
-}
diff --git a/pioneer/packages/joy-utils-old/src/transport/base.ts b/pioneer/packages/joy-utils-old/src/transport/base.ts
deleted file mode 100644
index 9375f99c14..0000000000
--- a/pioneer/packages/joy-utils-old/src/transport/base.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import { ApiPromise } from '@polkadot/api';
-import { Codec } from '@polkadot/types/types';
-import { APIQueryCache } from '../APIQueryCache';
-
-export default abstract class BaseTransport {
-  protected api: ApiPromise;
-  protected cacheApi: APIQueryCache;
-
-  constructor (api: ApiPromise, cacheApi: APIQueryCache) {
-    this.api = api;
-    this.cacheApi = cacheApi;
-  }
-
-  protected get proposalsEngine () {
-    return this.cacheApi.query.proposalsEngine;
-  }
-
-  protected get proposalsCodex () {
-    return this.cacheApi.query.proposalsCodex;
-  }
-
-  protected get proposalsDiscussion () {
-    return this.cacheApi.query.proposalsDiscussion;
-  }
-
-  protected get members () {
-    return this.cacheApi.query.members;
-  }
-
-  protected get council () {
-    return this.cacheApi.query.council;
-  }
-
-  protected get councilElection () {
-    return this.cacheApi.query.councilElection;
-  }
-
-  protected get actors () {
-    return this.cacheApi.query.actors;
-  }
-
-  protected get contentWorkingGroup () {
-    return this.cacheApi.query.contentWorkingGroup;
-  }
-
-  protected get minting () {
-    return this.cacheApi.query.minting;
-  }
-
-  protected get hiring () {
-    return this.cacheApi.query.hiring;
-  }
-
-  protected get stake () {
-    return this.cacheApi.query.stake;
-  }
-
-  protected get recurringRewards () {
-    return this.cacheApi.query.recurringRewards;
-  }
-
-  protected queryMethodByName (name: string) {
-    const [module, method] = name.split('.');
-    return this.api.query[module][method];
-  }
-
-  // Fetch all double map entries using only the first key
-  //
-  // TODO: FIXME: This may be a risky implementation, because it relies on a few assumptions about how the data is stored etc.
-  // With the current runtime version we can rely on the fact that all storage keys for double-map values start with the same
-  // 32-bytes prefix assuming a given (fixed) value of the first key (ie. for all values like map[x][y], the storage key starts
-  // with the same prefix as long as x remains the same. Changing y will not affect this prefix)
-  protected async doubleMapEntries<T extends Codec> (
-    methodName: string,
-    firstKey: Codec,
-    valueConverter: (hex: string) => T,
-    getEntriesCount: () => Promise<number>,
-    secondKeyStart = 1
-  ): Promise<{ secondKey: number; value: T}[]> {
-    // Get prefix and storage keys of all entries
-    const firstEntryStorageKey = this.queryMethodByName(methodName).key(firstKey, secondKeyStart);
-    const entryStorageKeyPrefix = firstEntryStorageKey.substr(0, 66); // "0x" + 64 hex characters (32 bytes)
-    const allEntriesStorageKeys = await this.api.rpc.state.getKeys(entryStorageKeyPrefix);
-
-    // Create storageKey-to-secondKey map
-    const maxSecondKey = (await getEntriesCount()) - 1 + secondKeyStart;
-    const storageKeyToSecondKey: { [key: string]: number } = {};
-    for (let secondKey = secondKeyStart; secondKey <= maxSecondKey; ++secondKey) {
-      const storageKey = this.queryMethodByName(methodName).key(firstKey, secondKey);
-      storageKeyToSecondKey[storageKey] = secondKey;
-    }
-
-    // Create the resulting entries array
-    const entries: { secondKey: number; value: T }[] = [];
-    for (const key of allEntriesStorageKeys) {
-      const value: any = await this.api.rpc.state.getStorage(key);
-      if (typeof value === 'object' && value !== null && value.raw) {
-        entries.push({
-          secondKey: storageKeyToSecondKey[key.toString()],
-          value: valueConverter(value.raw.toString())
-        });
-      }
-    }
-
-    return entries;
-  }
-}
diff --git a/pioneer/packages/joy-utils-old/src/transport/members.ts b/pioneer/packages/joy-utils-old/src/transport/members.ts
deleted file mode 100644
index 8263d87d59..0000000000
--- a/pioneer/packages/joy-utils-old/src/transport/members.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import BaseTransport from './base';
-import { MemberId, Membership } from '@joystream/types/members';
-
-export default class MembersTransport extends BaseTransport {
-  async membershipById (id: MemberId | number): Promise<Membership | null> {
-    const member = (await this.members.membershipById(id)) as Membership;
-    // Can't just use member.isEmpty because member.suspended is Bool (which isEmpty method always returns false)
-    return member.handle.isEmpty ? null : member;
-  }
-
-  // Throws if profile not found
-  async expectedMembership (id: MemberId | number): Promise<Membership> {
-    const member = await this.membershipById(id);
-    if (!member) {
-      throw new Error(`Expected member profile not found! ID: ${id.toString()}`);
-    }
-
-    return member;
-  }
-
-  async nextMemberId (): Promise<number> {
-    return (await this.members.nextMemberId() as MemberId).toNumber();
-  }
-}
diff --git a/pioneer/packages/joy-utils-old/src/consts/members.ts b/pioneer/packages/joy-utils/src/consts/members.ts
similarity index 100%
rename from pioneer/packages/joy-utils-old/src/consts/members.ts
rename to pioneer/packages/joy-utils/src/consts/members.ts
diff --git a/pioneer/packages/joy-utils-old/src/consts/proposals.ts b/pioneer/packages/joy-utils/src/consts/proposals.ts
similarity index 100%
rename from pioneer/packages/joy-utils-old/src/consts/proposals.ts
rename to pioneer/packages/joy-utils/src/consts/proposals.ts
diff --git a/pioneer/packages/joy-utils-old/src/consts/workingGroups.ts b/pioneer/packages/joy-utils/src/consts/workingGroups.ts
similarity index 100%
rename from pioneer/packages/joy-utils-old/src/consts/workingGroups.ts
rename to pioneer/packages/joy-utils/src/consts/workingGroups.ts
diff --git a/pioneer/packages/joy-utils-old/src/accounts.ts b/pioneer/packages/joy-utils/src/functions/accounts.ts
similarity index 77%
rename from pioneer/packages/joy-utils-old/src/accounts.ts
rename to pioneer/packages/joy-utils/src/functions/accounts.ts
index ece7d35c8c..a446efe76a 100644
--- a/pioneer/packages/joy-utils-old/src/accounts.ts
+++ b/pioneer/packages/joy-utils/src/functions/accounts.ts
@@ -4,15 +4,10 @@ import { KeypairType } from '@polkadot/util-crypto/types';
 
 import FileSaver from 'file-saver';
 import { DEV_PHRASE } from '@polkadot/keyring/defaults';
-import { InputAddress } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 import { isHex, u8aToHex } from '@polkadot/util';
 import { keyExtractSuri, mnemonicGenerate, mnemonicValidate, randomAsU8a } from '@polkadot/util-crypto';
-
-import { ApiPromise } from '@polkadot/api';
-import { MemberId, Membership } from '@joystream/types/members';
-import { AccountId } from '@polkadot/types/interfaces';
-import { Vec } from '@polkadot/types/codec';
+import { normalizeError } from './misc';
 
 export type SeedType = 'bip' | 'raw' | 'dev';
 
@@ -37,7 +32,7 @@ function deriveValidate (seed: string, derivePath: string, pairType: KeypairType
       return 'Soft derivation paths are not allowed on ed25519';
     }
   } catch (error) {
-    return error.message;
+    return normalizeError(error);
   }
 
   return null;
@@ -113,7 +108,6 @@ export function downloadAccount ({ json, pair }: CreateResult): void {
   const blob = new Blob([JSON.stringify(json)], { type: 'application/json; charset=utf-8' });
 
   FileSaver.saveAs(blob, `${pair.address}.json`);
-  InputAddress.setLastValue('account', pair.address);
 }
 
 export function createAccount (suri: string, pairType: KeypairType, name: string, password: string, success: string): ActionStatus {
@@ -131,7 +125,7 @@ export function createAccount (suri: string, pairType: KeypairType, name: string
     downloadAccount(result);
   } catch (error) {
     status.status = 'error';
-    status.message = error.message;
+    status.message = normalizeError(error);
   }
 
   return status;
@@ -140,19 +134,3 @@ export function createAccount (suri: string, pairType: KeypairType, name: string
 export function isPasswordValid (password: string): boolean {
   return password.length === 0 || keyring.isPassValid(password);
 }
-
-export type MemberFromAccount = { account: string; id: number; profile?: Membership };
-
-// TODO: Use transport instead (now that it's available in joy-utils)
-export async function memberFromAccount (api: ApiPromise, accountId: AccountId | string): Promise<MemberFromAccount> {
-  const [memberId] =
-    ((await api.query.members.memberIdsByRootAccountId(accountId)) as Vec<MemberId>)
-      .concat((await api.query.members.memberIdsByControllerAccountId(accountId)) as Vec<MemberId>);
-  const member = (await api.query.members.membershipById(memberId)) as Membership;
-
-  return {
-    account: accountId.toString(),
-    id: memberId.toNumber(),
-    profile: member.handle.isEmpty ? undefined : member
-  };
-}
diff --git a/pioneer/packages/joy-utils/src/functions/misc.ts b/pioneer/packages/joy-utils/src/functions/misc.ts
index 5f9deaf90e..0a6761fcb7 100644
--- a/pioneer/packages/joy-utils/src/functions/misc.ts
+++ b/pioneer/packages/joy-utils/src/functions/misc.ts
@@ -6,6 +6,7 @@ import { Options as QueryOptions } from '@polkadot/react-api/hoc/types';
 import queryString from 'query-string';
 import { SubmittableResult } from '@polkadot/api';
 import { Codec } from '@polkadot/types/types';
+import { Location } from 'history';
 
 export const ZERO = new BN(0);
 
@@ -165,3 +166,25 @@ export function includeKeys<T extends { [k: string]: any }> (obj: T, ...allowedK
 export function bytesToString (bytes: Bytes) {
   return Buffer.from(bytes.toString().substr(2), 'hex').toString();
 }
+
+// Based on: https://fettblog.eu/typescript-hasownproperty/
+export function isObjectWithProperties<X extends unknown, Y extends PropertyKey[]> (input: X, ...props: Y): input is X & Record<Y[number], unknown> {
+  return typeof input === 'object' && input !== null && props.every((prop) => prop in input);
+}
+
+export function normalizeError (e: unknown): string {
+  let message: string;
+
+  if (e instanceof Error) {
+    message = e.message;
+  } else if (isObjectWithProperties(e, 'toString') && typeof e.toString === 'function') {
+    message = e.toString() as string;
+  } else if (typeof e === 'string') {
+    message = e;
+  } else {
+    message = JSON.stringify(e);
+  }
+
+  // Prevent returning falsely value
+  return message || 'Unexpected error';
+}
diff --git a/pioneer/packages/old-apps/react-components/src/InputFileAsync.tsx b/pioneer/packages/joy-utils/src/react/components/InputFileAsync.tsx
similarity index 92%
rename from pioneer/packages/old-apps/react-components/src/InputFileAsync.tsx
rename to pioneer/packages/joy-utils/src/react/components/InputFileAsync.tsx
index 4ab3437c10..3343abe6e8 100644
--- a/pioneer/packages/old-apps/react-components/src/InputFileAsync.tsx
+++ b/pioneer/packages/joy-utils/src/react/components/InputFileAsync.tsx
@@ -3,16 +3,16 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { WithTranslation } from 'react-i18next';
-import { BareProps } from './types';
+import { BareProps } from '@polkadot/react-components/types';
 
 import React, { useState, createRef } from 'react';
 import Dropzone, { DropzoneRef } from 'react-dropzone';
 import styled from 'styled-components';
 import { formatNumber } from '@polkadot/util';
 
-import { classes } from './util';
-import Labelled from './Labelled';
-import translate from './translate';
+import { classes } from '@polkadot/react-components/util';
+import Labelled from '@polkadot/react-components/Labelled';
+import translate from '@polkadot/react-components/translate';
 
 interface Props extends BareProps, WithTranslation {
   // Reference Example Usage: https://github.com/react-dropzone/react-dropzone/tree/master/examples/Accept
@@ -42,6 +42,7 @@ function InputFileAsync ({ accept, className, clearContent, help, isDisabled, is
   const _onDrop = (files: File[]): void => {
     if (!files.length) return;
     const blob = files[0];
+
     onChange && onChange(blob);
     dropRef && setFile({
       ...blob
diff --git a/pioneer/packages/joy-utils/src/react/components/InputStake.tsx b/pioneer/packages/joy-utils/src/react/components/InputStake.tsx
new file mode 100644
index 0000000000..5c18e525ee
--- /dev/null
+++ b/pioneer/packages/joy-utils/src/react/components/InputStake.tsx
@@ -0,0 +1,47 @@
+import BN from 'bn.js';
+import React from 'react';
+import { InputBalance } from '@polkadot/react-components/index';
+import { Label } from 'semantic-ui-react';
+import { formatBalance } from '@polkadot/util';
+
+type Props = {
+  label?: string;
+  min?: BN;
+  isValid?: boolean;
+  onChange: (stake?: BN) => void;
+};
+
+export default class Component extends React.PureComponent<Props> {
+  render () {
+    const { min, label, isValid, onChange } = this.props;
+
+    return (
+      <div className='ui--row' style={{ display: 'flex' }}>
+        <InputBalance
+          className='medium'
+          label={label || 'Amount to be staked:'}
+          onChange={onChange}
+        />
+        {min && !min.isZero() && (
+          <div
+            className='medium'
+            style={{
+              marginLeft: '.5rem',
+              display: 'flex',
+              alignItems: 'center'
+            }}>
+            <Label
+              color={ isValid ? 'green' : 'red' }
+              icon={isValid ? 'check' : 'warning sign'}
+              label='Minimum stake'
+              pointing='left'
+            >
+              Minimum stake
+              <Label.Detail>{formatBalance(min)}</Label.Detail>
+            </Label>
+          </div>
+        ) }
+      </div>
+    );
+  }
+}
diff --git a/pioneer/packages/joy-utils-old/src/JoyStatus.tsx b/pioneer/packages/joy-utils/src/react/components/JoyStatus.tsx
similarity index 94%
rename from pioneer/packages/joy-utils-old/src/JoyStatus.tsx
rename to pioneer/packages/joy-utils/src/react/components/JoyStatus.tsx
index 1429f30449..e6457429fb 100644
--- a/pioneer/packages/joy-utils-old/src/JoyStatus.tsx
+++ b/pioneer/packages/joy-utils/src/react/components/JoyStatus.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Message } from 'semantic-ui-react';
-import { nonEmptyStr } from '.';
+import { nonEmptyStr } from '../../functions/misc';
 
 type BaseProps = {
   title?: React.ReactNode;
diff --git a/pioneer/packages/joy-utils/src/react/components/MemberByAccountPreview.tsx b/pioneer/packages/joy-utils/src/react/components/MemberByAccountPreview.tsx
new file mode 100644
index 0000000000..7ea745fdc6
--- /dev/null
+++ b/pioneer/packages/joy-utils/src/react/components/MemberByAccountPreview.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+
+import { ProfilePreviewFromStruct } from './MemberProfilePreview';
+import { AccountId } from '@polkadot/types/interfaces';
+import { MemberFromAccount } from '../../types/members';
+import { useTransport, usePromise } from '../hooks';
+import styled from 'styled-components';
+
+import PromiseComponent from './PromiseComponent';
+
+type Props = {
+  accountId: AccountId | string;
+  className?: string;
+  showId?: boolean;
+  showCouncilBadge?: boolean;
+  link?: boolean;
+  size?: 'small' | 'medium';
+};
+
+const MemberByAccountPreview: React.FunctionComponent<Props> = ({
+  accountId,
+  showId = true,
+  showCouncilBadge = false,
+  link = true,
+  size,
+  className
+}) => {
+  const transport = useTransport();
+  const [member, error, loading] = usePromise<MemberFromAccount | null>(
+    () => transport.members.membershipFromAccount(accountId),
+    null,
+    [accountId]
+  );
+
+  return (
+    // Span required to allow styled(MemberByAccountPreview)
+    <span className={className}>
+      <PromiseComponent inline={true} error={error} loading={loading} message='Fetching member profile...'>
+        { member && (
+          member.profile
+            ? (
+              <ProfilePreviewFromStruct
+                profile={member.profile}
+                id={showId ? member.memberId : undefined}
+                link={link}
+                size={size}>
+                { showCouncilBadge && <CouncilBadge memberId={member.memberId!}/> }
+              </ProfilePreviewFromStruct>
+            )
+            : 'Member profile not found!'
+        ) }
+      </PromiseComponent>
+    </span>
+  );
+};
+
+type CouncilBadgeProps = {
+  memberId: number;
+}
+
+export function CouncilBadge ({ memberId }: CouncilBadgeProps) {
+  const transport = useTransport();
+  const [councilMembers] = usePromise(() => transport.council.councilMembers(), []);
+
+  if (councilMembers && councilMembers.find((cm) => cm.memberId.toNumber() === memberId)) {
+    return (
+      <b style={{ color: '#607d8b' }}>
+        <i className='university icon'></i>
+        Council member
+      </b>
+    );
+  } else {
+    return null;
+  }
+}
+
+export default styled(MemberByAccountPreview)``; // Allow extending the styles
diff --git a/pioneer/packages/joy-utils/src/react/components/MemberProfilePreview.tsx b/pioneer/packages/joy-utils/src/react/components/MemberProfilePreview.tsx
new file mode 100644
index 0000000000..eb9a6e95ae
--- /dev/null
+++ b/pioneer/packages/joy-utils/src/react/components/MemberProfilePreview.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { Image, Label } from 'semantic-ui-react';
+import { IdentityIcon } from '@polkadot/react-components';
+import { Link } from 'react-router-dom';
+import { Text } from '@polkadot/types';
+import { AccountId } from '@polkadot/types/interfaces';
+import { MemberId, Membership } from '@joystream/types/members';
+import styled, { css } from 'styled-components';
+
+type ProfilePreviewSize = 'small' | 'medium';
+
+const AVATAR_SIZES_PX: { [k in ProfilePreviewSize]: number } = {
+  small: 20,
+  medium: 40
+};
+
+type ProfileItemProps = {
+  avatar_uri: string | Text;
+  root_account: string | AccountId;
+  handle: string | Text;
+  id?: number | MemberId;
+  link?: boolean;
+  size?: ProfilePreviewSize;
+};
+
+type StyledPartProps = {
+  size: ProfilePreviewSize;
+}
+
+const StyledProfilePreview = styled.div<StyledPartProps>`
+  display: flex;
+  align-items: center;
+  & .ui.avatar.image {
+    margin: 0 !important;
+    width: ${(props) => `${AVATAR_SIZES_PX[props.size]}px`} !important;
+    height: ${(props) => `${AVATAR_SIZES_PX[props.size]}px`} !important;
+  }
+`;
+
+const Details = styled.div<StyledPartProps>`
+  margin-left: ${(props) => props.size === 'small' ? '0.5rem' : '1rem'};
+  display: grid;
+  grid-row-gap: 0.25rem;
+  grid-template-columns: 100%;
+`;
+
+const DetailsHandle = styled.h4<StyledPartProps>`
+  ${(props) => props.size === 'small' && css`font-size: 1em;`};
+  margin: 0;
+  font-weight: bold;
+  color: #333;
+`;
+
+export default function ProfilePreview (
+  { id, avatar_uri, root_account, handle, link = false, children, size = 'medium' }: React.PropsWithChildren<ProfileItemProps>
+) {
+  const Preview = (
+    <StyledProfilePreview size={size}>
+      {avatar_uri.toString() ? (
+        <Image src={avatar_uri.toString()} avatar floated='left' />
+      ) : (
+        <IdentityIcon className='image' value={root_account.toString()} size={AVATAR_SIZES_PX[size]} />
+      )}
+      <Details size={size}>
+        <DetailsHandle size={size}>{handle.toString()}</DetailsHandle>
+        { id !== undefined && <div><Label size={'small'}>ID <Label.Detail>{id.toString()}</Label.Detail></Label></div> }
+        { children }
+      </Details>
+    </StyledProfilePreview>
+  );
+
+  if (link) {
+    return <Link to={ `/members/${handle.toString()}` }>{ Preview }</Link>;
+  }
+
+  return Preview;
+}
+
+type ProfilePreviewFromStructProps = {
+  profile: Membership;
+  id?: number | MemberId;
+  link?: boolean;
+  size?: ProfilePreviewSize;
+};
+
+export function ProfilePreviewFromStruct (
+  { profile, children, ...passedProps }: React.PropsWithChildren<ProfilePreviewFromStructProps>
+) {
+  const { avatar_uri, root_account, handle } = profile;
+
+  return (
+    <ProfilePreview {...{ avatar_uri, root_account, handle, ...passedProps }}>
+      {children}
+    </ProfilePreview>
+  );
+}
diff --git a/pioneer/packages/joy-utils-old/src/MembersDropdown.tsx b/pioneer/packages/joy-utils/src/react/components/MembersDropdown.tsx
similarity index 59%
rename from pioneer/packages/joy-utils-old/src/MembersDropdown.tsx
rename to pioneer/packages/joy-utils/src/react/components/MembersDropdown.tsx
index a547bbd406..d53a4ba490 100644
--- a/pioneer/packages/joy-utils-old/src/MembersDropdown.tsx
+++ b/pioneer/packages/joy-utils/src/react/components/MembersDropdown.tsx
@@ -1,9 +1,8 @@
-import React, { useEffect, useState, useContext } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Dropdown, DropdownItemProps, DropdownProps } from 'semantic-ui-react';
-import { Membership } from '@joystream/types/members';
-import { memberFromAccount, MemberFromAccount } from './accounts';
+import { MemberFromAccount } from '../../types/members';
+import { useTransport } from '../hooks';
 import { AccountId } from '@polkadot/types/interfaces';
-import { ApiContext } from '@polkadot/react-api';
 import styled from 'styled-components';
 
 const StyledMembersDropdown = styled(Dropdown)`
@@ -14,13 +13,15 @@ const StyledMembersDropdown = styled(Dropdown)`
 `;
 
 function membersToOptions (members: MemberFromAccount[]) {
-  const validMembers = members.filter(m => m.profile !== undefined) as (MemberFromAccount & { profile: Membership })[];
+  const validMembers = members.filter((m) => m.profile !== undefined);
+
+  // Here we can assert "profile!" and "memberId!", because we filtered out those that don't have it.
   return validMembers
-    .map(({ id, profile, account }) => ({
-      key: profile.handle,
-      text: `${profile.handle} (id:${id})`,
+    .map(({ memberId, profile, account }) => ({
+      key: profile!.handle.toString(),
+      text: `${profile!.handle.toString()} (id:${memberId!})`,
       value: account,
-      image: profile.avatar_uri.toString() ? { avatar: true, src: profile.avatar_uri } : null
+      image: profile!.avatar_uri.toString() ? { avatar: true, src: profile!.avatar_uri } : null
     }));
 }
 
@@ -33,22 +34,28 @@ type Props = {
 };
 
 const MembersDropdown: React.FunctionComponent<Props> = ({ accounts, ...passedProps }) => {
-  const { api } = useContext(ApiContext);
+  const transport = useTransport();
   // State
   const [loading, setLoading] = useState(true);
   const [membersOptions, setMembersOptions] = useState([] as DropdownItemProps[]);
+
   // Generate members options array on load
   useEffect(() => {
     let isSubscribed = true;
+
     Promise
-      .all(accounts.map(acc => memberFromAccount(api, acc)))
-      .then(members => {
+      .all(accounts.map((acc) => transport.members.membershipFromAccount(acc)))
+      .then((members) => {
         if (isSubscribed) {
           setMembersOptions(membersToOptions(members));
           setLoading(false);
         }
-      });
+      })
+      .catch((e) => { throw e; });
+
     return () => { isSubscribed = false; };
+    // We don't need transport.members as dependency here, because we assume it's always the same, so:
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [accounts]);
 
   return (
diff --git a/pioneer/packages/joy-utils/src/react/components/Memo.tsx b/pioneer/packages/joy-utils/src/react/components/Memo.tsx
new file mode 100644
index 0000000000..1cca7bf671
--- /dev/null
+++ b/pioneer/packages/joy-utils/src/react/components/Memo.tsx
@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from 'react';
+import { useApi, useCall } from '@polkadot/react-hooks';
+import { Text } from '@polkadot/types';
+import { u32 } from '@polkadot/types/primitive';
+import { Form, TextArea, Modal } from 'semantic-ui-react';
+import { Loading } from './PromiseComponent';
+import TxButton from './TxButton';
+import { useMyAccount } from '../hooks';
+
+export function MemoForm () {
+  const { isApiReady, api } = useApi();
+  const { state: { address } } = useMyAccount();
+  const storedMemo = useCall<Text>(isApiReady && api.query.memo.memo, [address]);
+  const maxMemoLength = useCall<u32>(isApiReady && api.query.memo.maxMemoLength, []);
+  const [memo, setMemo] = useState<string | undefined>(undefined);
+  const isMemoDifferent = memo?.toString() !== storedMemo?.toString();
+
+  useEffect(() => {
+    if (storedMemo) {
+      setMemo(storedMemo.toString());
+    }
+  }, [storedMemo?.toString()]);
+
+  return memo !== undefined
+    ? (
+      <Form style={{ width: '100%' }}>
+        <Form.Field>
+          <TextArea
+            rows={3}
+            label='Memo (supports Markdown):'
+            placeholder='Here you can type any public information relevant to your account.'
+            value={memo}
+            onChange={(e, props) => setMemo(props.value?.toString() || '')}
+            maxLength={maxMemoLength}
+          />
+        </Form.Field>
+        <TxButton
+          isDisabled={!isMemoDifferent}
+          label='Update memo'
+          params={[memo]}
+          tx='memo.updateMemo'
+        />
+      </Form>
+    )
+    : <Loading text={'Fetching current memo...'} />;
+}
+
+interface MemoModalProps {
+  onClose: () => void;
+}
+
+export function MemoModal ({ onClose }: MemoModalProps) {
+  return (
+    <Modal
+      size='small'
+      open
+      closeIcon
+      closeOnDimmerClick={true}
+      style={{ marginTop: '30px' }}
+      onClose={onClose}>
+      <Modal.Header>Update memo</Modal.Header>
+      <Modal.Content>
+        <MemoForm />
+      </Modal.Content>
+    </Modal>
+  );
+}
diff --git a/pioneer/packages/joy-utils-old/src/Pluralize.tsx b/pioneer/packages/joy-utils/src/react/components/Pluralize.tsx
similarity index 100%
rename from pioneer/packages/joy-utils-old/src/Pluralize.tsx
rename to pioneer/packages/joy-utils/src/react/components/Pluralize.tsx
diff --git a/pioneer/packages/joy-utils-old/src/react/components/PromiseComponent.tsx b/pioneer/packages/joy-utils/src/react/components/PromiseComponent.tsx
similarity index 58%
rename from pioneer/packages/joy-utils-old/src/react/components/PromiseComponent.tsx
rename to pioneer/packages/joy-utils/src/react/components/PromiseComponent.tsx
index 18395aa101..237276e668 100644
--- a/pioneer/packages/joy-utils-old/src/react/components/PromiseComponent.tsx
+++ b/pioneer/packages/joy-utils/src/react/components/PromiseComponent.tsx
@@ -2,16 +2,17 @@ import React from 'react';
 import { Container, Message, Loader } from 'semantic-ui-react';
 
 type ErrorProps = {
-  error: any;
+  error: string | null;
 };
 
 export function Error ({ error }: ErrorProps) {
   console.error(error);
+
   return (
     <Container style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
       <Message negative>
         <Message.Header>Oops! We got an error!</Message.Header>
-        <p>{error.message}</p>
+        <p>{error}</p>
       </Message>
     </Container>
   );
@@ -19,24 +20,31 @@ export function Error ({ error }: ErrorProps) {
 
 type LoadingProps = {
   text: string;
+  inline?: boolean;
 };
 
-export function Loading ({ text }: LoadingProps) {
+export function Loading ({ text, inline }: LoadingProps) {
   return (
-    <Container style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-      <Loader active inline>{text}</Loader>
-    </Container>
+    inline
+      ? <Loader active inline size='small'>{text}</Loader>
+      : (
+        <Container style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+          <Loader active inline>{text}</Loader>
+        </Container>
+      )
   );
 }
 
 type PromiseComponentProps = {
   loading: boolean;
-  error: any;
+  error: string | null;
   message: string;
+  inline?: boolean;
 }
-const PromiseComponent: React.FunctionComponent<PromiseComponentProps> = ({ loading, error, message, children }) => {
+
+const PromiseComponent: React.FunctionComponent<PromiseComponentProps> = ({ loading, error, message, children, inline }) => {
   if (loading && !error) {
-    return <Loading text={ message }/>;
+    return <Loading text={ message } inline={inline}/>;
   } else if (error) {
     return <Error error={error} />;
   }
diff --git a/pioneer/packages/joy-utils/src/react/components/TxButton.tsx b/pioneer/packages/joy-utils/src/react/components/TxButton.tsx
index 73eb3b3bbe..29496c5ec9 100644
--- a/pioneer/packages/joy-utils/src/react/components/TxButton.tsx
+++ b/pioneer/packages/joy-utils/src/react/components/TxButton.tsx
@@ -1,67 +1,55 @@
-import React from 'react';
-import { BareProps, ApiProps } from '@polkadot/react-api/types';
-import { QueueTxExtrinsicAdd, PartialQueueTxExtrinsic, TxFailedCallback, TxCallback } from '@polkadot/react-components/Status/types';
+import React, { useContext } from 'react';
+import { TxFailedCallback, TxCallback } from '@polkadot/react-components/Status/types';
 import { Button } from '@polkadot/react-components/index';
-import { QueueConsumer } from '@polkadot/react-components/Status/Context';
-import { withApi } from '@polkadot/react-api/index';
+import QueueContext from '@polkadot/react-components/Status/Context';
 import { assert } from '@polkadot/util';
-import { withMyAccount, MyAccountProps } from '../hocs/accounts';
-import { IconName } from '@fortawesome/fontawesome-svg-core';
-
-type InjectedProps = {
-  queueExtrinsic: QueueTxExtrinsicAdd;
-};
+import { ButtonProps as DefaultButtonProps } from '@polkadot/react-components/Button/types';
+import { StrictButtonProps as SemanticButtonStrictProps, Button as SemanticButton } from 'semantic-ui-react';
+import { useApi } from '@polkadot/react-hooks';
+import { useMyAccount } from '../hooks';
+import _ from 'lodash';
 
 export type OnTxButtonClick = (sendTx: () => void) => void;
 
-type BasicButtonProps = {
+type TxButtonBaseProps = {
   accountId?: string;
   type?: 'submit' | 'button';
-  isBasic?: boolean;
-  isDisabled?: boolean;
-  label?: React.ReactNode;
   params: Array<any>;
   tx: string;
-
-  className?: string;
-  style?: Record<string, string | number>;
-  children?: React.ReactNode;
-  compact?: boolean;
-  icon?: IconName;
-
   onClick?: OnTxButtonClick;
   txFailedCb?: TxFailedCallback;
   txSuccessCb?: TxCallback;
   txStartCb?: () => void;
   txUpdateCb?: TxCallback;
-};
+}
 
-type PropsWithApi = BareProps & ApiProps & MyAccountProps & PartialQueueTxExtrinsic & BasicButtonProps
-
-class TxButtonInner extends React.PureComponent<PropsWithApi & InjectedProps> {
-  render () {
-    const { myAddress, accountId, isDisabled, icon = 'check', onClick } = this.props;
-    const origin = accountId || myAddress;
-
-    return (
-      <Button
-        {...this.props}
-        isDisabled={isDisabled || !origin}
-        icon={icon}
-        onClick={() => {
-          if (onClick) onClick(this.send);
-          else this.send();
-        }}
-      />
-    );
-  }
-
-  private send = (): void => {
-    const {
-      myAddress, accountId, api, params, queueExtrinsic, tx,
-      txFailedCb, txSuccessCb, txStartCb, txUpdateCb
-    } = this.props;
-    const origin = accountId || myAddress;
+// Allows us to exclude those from button props
+const txButtonNotPassedProps: readonly (keyof TxButtonBaseProps)[] = [
+  'accountId',
+  'params',
+  'tx',
+  'onClick',
+  'txFailedCb',
+  'txSuccessCb',
+  'txStartCb',
+  'txUpdateCb'
+] as const;
+
+type SemanticButtonProps = SemanticButtonStrictProps & { style?: React.CSSProperties };
+
+type TxButtonProps<ButtonComponentProps extends Record<string, any>> = Omit<ButtonComponentProps, 'onClick'> & TxButtonBaseProps;
+
+function useTxButton (props: TxButtonBaseProps) {
+  const { queueExtrinsic } = useContext(QueueContext);
+  const { api } = useApi();
+  const { state: { address: myAddress } } = useMyAccount();
+  const {
+    accountId, params, tx,
+    txFailedCb, txSuccessCb, txStartCb, txUpdateCb
+  } = props;
+  const origin = accountId || myAddress;
+
+  const sendTx = () => {
     const [section, method] = tx.split('.');
 
     assert(api.tx[section] && api.tx[section][method], `Unable to find api.tx.${section}.${method}`);
@@ -74,25 +62,52 @@ class TxButtonInner extends React.PureComponent<PropsWithApi & InjectedProps> {
       txStartCb,
       txUpdateCb
     });
-  }
-}
+  };
 
-class TxButton extends React.PureComponent<PropsWithApi> {
-  render () {
-    return (
-      <QueueConsumer>
-        {({ queueExtrinsic }) => (
-          <TxButtonInner
-            {...this.props}
-            queueExtrinsic={queueExtrinsic}
-          />
-        )}
-      </QueueConsumer>
-    );
-  }
+  return { origin, sendTx };
 }
 
-export default withApi(withMyAccount(TxButton));
+// Make icon optional since we provide default value
+type DefaultTxButtonProps = TxButtonProps<Omit<DefaultButtonProps, 'icon'> & { icon?: DefaultButtonProps['icon'] }>;
+
+export const DefaultTxButton = (props: DefaultTxButtonProps) => {
+  const { origin, sendTx } = useTxButton(props);
+  const { isDisabled, icon = 'check', onClick } = props;
+  const buttonProps = _.omit(props, txButtonNotPassedProps);
+
+  return (
+    <Button
+      {...buttonProps}
+      isDisabled={isDisabled || !origin}
+      icon={icon}
+      onClick={() => {
+        if (onClick) onClick(sendTx);
+        else sendTx();
+      }}
+    />
+  );
+};
+
+type SemanticTxButtonProps = TxButtonProps<SemanticButtonProps>;
+
+export const SemanticTxButton = (props: SemanticTxButtonProps) => {
+  const { origin, sendTx } = useTxButton(props);
+  const { disabled, onClick } = props;
+  const buttonProps = _.omit(props, txButtonNotPassedProps);
+
+  return (
+    <SemanticButton
+      {...buttonProps}
+      disabled={disabled || !origin}
+      onClick={() => {
+        if (onClick) onClick(sendTx);
+        else sendTx();
+      }}
+    />
+  );
+};
+
+export default DefaultTxButton;
 
 // const SubstrateTxButton = withApi(withMyAccount(TxButton));
 
diff --git a/pioneer/packages/joy-utils/src/react/components/forms.tsx b/pioneer/packages/joy-utils/src/react/components/forms.tsx
index 4badc9706c..41699a4c42 100644
--- a/pioneer/packages/joy-utils/src/react/components/forms.tsx
+++ b/pioneer/packages/joy-utils/src/react/components/forms.tsx
@@ -14,6 +14,7 @@ export type LabelledProps<FormValues> = {
   className?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode;
+  flex?: boolean;
   errors: FormikErrors<FormValues>;
   touched: FormikTouched<FormValues>;
   isSubmitting: boolean;
@@ -22,7 +23,7 @@ export type LabelledProps<FormValues> = {
 export function LabelledField<FormValues> () {
   const LabelledFieldInner: React.FunctionComponent<LabelledProps<FormValues>> =
     (props: LabelledProps<FormValues>) => {
-      const { name, label, invisibleLabel = false, tooltip, required = false, touched, errors, children, style } = props;
+      const { name, label, invisibleLabel = false, tooltip, required = false, touched, errors, children, style, flex } = props;
 
       const hasError = name && touched[name] && errors[name];
 
@@ -30,7 +31,7 @@ export function LabelledField<FormValues> () {
 
       const fieldWithError =
         <>
-          <div>{children}</div>
+          <div style={{ display: flex ? 'flex' : 'block' }}>{children}</div>
           {name && hasError && <div className='ui pointing red label'>{errors[name]}</div>}
         </>;
 
diff --git a/pioneer/packages/joy-utils/src/react/components/index.tsx b/pioneer/packages/joy-utils/src/react/components/index.tsx
index 0ead2f86e7..ba45d3322b 100644
--- a/pioneer/packages/joy-utils/src/react/components/index.tsx
+++ b/pioneer/packages/joy-utils/src/react/components/index.tsx
@@ -1,4 +1,14 @@
 export { default as Section } from './Section';
-export { default as TxButton } from './TxButton';
+export { default as TxButton, SemanticTxButton } from './TxButton';
 export { MutedSpan, MutedDiv } from './MutedText';
 export { FlexCenter } from './FlexCenter';
+export { default as PromiseComponent, Error, Loading } from './PromiseComponent';
+export { default as MemberByAccountPreview } from './MemberByAccountPreview';
+export { default as MemberProfilePreview } from './MemberProfilePreview';
+export { default as MembersDropdown } from './MembersDropdown';
+export { default as InputStake } from './InputStake';
+export { ApplicationsDetails, ApplicationsDetailsByIds } from './working-groups/ApplicationDetails';
+export { LeadInfo, LeadInfoFromId } from './working-groups/LeadInfo';
+export { JoyStatus, JoyError, JoyInfo, JoySuccess, JoyWarn } from './JoyStatus';
+export { Pluralize } from './Pluralize';
+export { default as InputFileAsync } from './InputFileAsync';
diff --git a/pioneer/packages/joy-utils-old/src/react/components/working-groups/ApplicationDetails.tsx b/pioneer/packages/joy-utils/src/react/components/working-groups/ApplicationDetails.tsx
similarity index 85%
rename from pioneer/packages/joy-utils-old/src/react/components/working-groups/ApplicationDetails.tsx
rename to pioneer/packages/joy-utils/src/react/components/working-groups/ApplicationDetails.tsx
index 5fc74ad45a..c0e4f9f532 100644
--- a/pioneer/packages/joy-utils-old/src/react/components/working-groups/ApplicationDetails.tsx
+++ b/pioneer/packages/joy-utils/src/react/components/working-groups/ApplicationDetails.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { ParsedApplication } from '../../../types/workingGroups';
-import { ProfilePreviewFromStruct as MemberPreview } from '../../../MemberProfilePreview';
+import { ProfilePreviewFromStruct as MemberPreview } from '../MemberProfilePreview';
 import { useTransport, usePromise } from '../../hooks';
 import { Item, Label, Button } from 'semantic-ui-react';
 import { formatBalance } from '@polkadot/util';
@@ -13,16 +13,19 @@ type ApplicationsDetailsProps = {
 }
 
 export const ApplicationsDetails = ({ applications, acceptedIds }: ApplicationsDetailsProps) => {
-  const rejectedApplications = acceptedIds !== undefined ? applications.filter(a => !acceptedIds.includes(a.wgApplicationId)) : [];
+  const rejectedApplications = acceptedIds !== undefined ? applications.filter((a) => !acceptedIds.includes(a.wgApplicationId)) : [];
   const [showAll, setShowAll] = useState(!rejectedApplications.length);
-  const shownApplications = applications.filter(a => showAll || acceptedIds?.includes(a.wgApplicationId));
+  const shownApplications = applications.filter((a) => showAll || acceptedIds?.includes(a.wgApplicationId));
+
   return (<>
     <Item.Group>
       {
         shownApplications.map(({ member, stakes, wgApplicationId, humanReadableText }) => {
           let HRT = humanReadableText.toString();
           const accepted = acceptedIds?.includes(wgApplicationId);
+
           try { HRT = JSON.stringify(JSON.parse(HRT), undefined, 4); } catch (e) { /* Do nothing */ }
+
           return (
             <Item key={wgApplicationId} style={{
               background: 'white',
@@ -51,7 +54,7 @@ export const ApplicationsDetails = ({ applications, acceptedIds }: ApplicationsD
       }
     </Item.Group>
     {rejectedApplications.length > 0 && (
-      <Button fluid onClick={() => setShowAll(current => !current)}>
+      <Button fluid onClick={() => setShowAll((current) => !current)}>
         { showAll ? 'Hide rejected applications' : 'Show rejected applications' }
       </Button>
     )}
@@ -67,13 +70,13 @@ type ApplicationsDetailsByIdsProps = {
 export const ApplicationsDetailsByIds = ({ group, ids, acceptedIds }: ApplicationsDetailsByIdsProps) => {
   const transport = useTransport();
   const [applications, error, loading] = usePromise<ParsedApplication[]>(
-    () => Promise.all(ids.map(id => transport.workingGroups.parsedApplicationById(group, id))),
+    () => Promise.all(ids.map((id) => transport.workingGroups.parsedApplicationById(group, id))),
     [],
     [ids]
   );
 
   return (
-    <PromiseComponent {...{ error, loading }} message="Fetching application(s)...">
+    <PromiseComponent {...{ error, loading }} message='Fetching application(s)...'>
       <ApplicationsDetails applications={applications} acceptedIds={acceptedIds}/>
     </PromiseComponent>
   );
@@ -95,7 +98,7 @@ export const ApplicationsDetailsByOpening = ({ group, openingId, acceptedIds }:
   );
 
   return (
-    <PromiseComponent {...{ error, loading }} message="Fetching applications...">
+    <PromiseComponent {...{ error, loading }} message='Fetching applications...'>
       <ApplicationsDetails applications={applications} acceptedIds={acceptedIds}/>
     </PromiseComponent>
   );
diff --git a/pioneer/packages/joy-utils-old/src/react/components/working-groups/LeadInfo.tsx b/pioneer/packages/joy-utils/src/react/components/working-groups/LeadInfo.tsx
similarity index 88%
rename from pioneer/packages/joy-utils-old/src/react/components/working-groups/LeadInfo.tsx
rename to pioneer/packages/joy-utils/src/react/components/working-groups/LeadInfo.tsx
index 23f9bbbc2a..e6e32a3fb7 100644
--- a/pioneer/packages/joy-utils-old/src/react/components/working-groups/LeadInfo.tsx
+++ b/pioneer/packages/joy-utils/src/react/components/working-groups/LeadInfo.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { WorkerData } from '../../../types/workingGroups';
-import { ProfilePreviewFromStruct as MemberPreview } from '../../../MemberProfilePreview';
+import { ProfilePreviewFromStruct as MemberPreview } from '../MemberProfilePreview';
 import { Label, Message } from 'semantic-ui-react';
 import { formatBalance } from '@polkadot/util';
 import { WorkingGroupKey } from '@joystream/types/common';
@@ -49,8 +49,8 @@ export const LeadInfoFromId = ({ leadId, group }: LeadInfoFromIdProps) => {
   );
 
   return (
-    <PromiseComponent error={error} loading={loading} message="Fetching current lead...">
-      <LeadInfo lead={lead} group={group} header={false} emptyMessage="Leader no longer active!"/>
+    <PromiseComponent error={error} loading={loading} message='Fetching current lead...'>
+      <LeadInfo lead={lead} group={group} header={false} emptyMessage='Leader no longer active!'/>
     </PromiseComponent>
   );
 };
diff --git a/pioneer/packages/joy-utils/src/react/context/index.tsx b/pioneer/packages/joy-utils/src/react/context/index.tsx
index 7f1069a262..b3cfe458cc 100644
--- a/pioneer/packages/joy-utils/src/react/context/index.tsx
+++ b/pioneer/packages/joy-utils/src/react/context/index.tsx
@@ -1,2 +1,3 @@
 export { MyAccountContext, MyAccountProvider } from './account';
 export { MyMembershipContext, MyMembershipProvider } from './membership';
+export { TransportContext, TransportProvider } from './transport';
diff --git a/pioneer/packages/joy-utils-old/src/react/context/transport.tsx b/pioneer/packages/joy-utils/src/react/context/transport.tsx
similarity index 96%
rename from pioneer/packages/joy-utils-old/src/react/context/transport.tsx
rename to pioneer/packages/joy-utils/src/react/context/transport.tsx
index 29acbdae87..91a599572a 100644
--- a/pioneer/packages/joy-utils-old/src/react/context/transport.tsx
+++ b/pioneer/packages/joy-utils/src/react/context/transport.tsx
@@ -6,7 +6,7 @@ import Transport from '../../transport/index';
 
 export const TransportContext = createContext<Transport>((null as unknown) as Transport);
 
-export function TransportProvider ({ children }: { children: React.PropsWithChildren<{}> }) {
+export function TransportProvider ({ children }: { children: React.PropsWithChildren<unknown> }) {
   const api: ApiProps = useContext(ApiContext);
 
   if (!api) {
diff --git a/pioneer/packages/joy-utils-old/src/Controller.tsx b/pioneer/packages/joy-utils/src/react/helpers/Controller.tsx
similarity index 92%
rename from pioneer/packages/joy-utils-old/src/Controller.tsx
rename to pioneer/packages/joy-utils/src/react/helpers/Controller.tsx
index 42de82b760..ba0a1bcbe0 100644
--- a/pioneer/packages/joy-utils-old/src/Controller.tsx
+++ b/pioneer/packages/joy-utils/src/react/helpers/Controller.tsx
@@ -7,7 +7,7 @@ type errorProps = {
 export class Controller<S, T> extends Observable<S & errorProps, T> {
   onError (desc: any) {
     this.state._hasError = true;
-    console.log(desc);
+    console.error(desc);
     this.dispatch();
   }
 
diff --git a/pioneer/packages/joy-utils-old/src/Observable.ts b/pioneer/packages/joy-utils/src/react/helpers/Observable.ts
similarity index 71%
rename from pioneer/packages/joy-utils-old/src/Observable.ts
rename to pioneer/packages/joy-utils/src/react/helpers/Observable.ts
index 2a948b55ff..735e6647c1 100644
--- a/pioneer/packages/joy-utils-old/src/Observable.ts
+++ b/pioneer/packages/joy-utils/src/react/helpers/Observable.ts
@@ -4,23 +4,26 @@ export abstract class Observable<S extends { [key: string ]: any }, T> implement
   state: S
   protected transport: T
   protected observers: Observer<S>[] = []
+  protected initialState: S
 
   constructor (transport: T, initialState: S) {
-    this.state = initialState;
+    this.initialState = initialState;
+    this.state = { ...initialState };
     this.transport = transport;
   }
 
   public subscribe (observer: Observer<S>): IUnsubscribable<S> {
     this.observers.push(observer);
+
     return this;
   }
 
   public unsubscribe (observerToRemove: Observer<S>) {
-    this.observers = this.observers.filter(observer => observerToRemove !== observer);
+    this.observers = this.observers.filter((observer) => observerToRemove !== observer);
   }
 
   public dispatch () {
-    this.observers.forEach(observer => observer(this.state));
+    this.observers.forEach((observer) => observer(this.state));
   }
 
   public setState (updatedState: Partial<S>) {
@@ -29,6 +32,11 @@ export abstract class Observable<S extends { [key: string ]: any }, T> implement
     } else {
       this.state = updatedState as S;
     }
+
+    this.dispatch();
+  }
+
+  public refreshState () {
     this.dispatch();
   }
 }
diff --git a/pioneer/packages/joy-utils-old/src/Subscribable.ts b/pioneer/packages/joy-utils/src/react/helpers/Subscribable.ts
similarity index 78%
rename from pioneer/packages/joy-utils-old/src/Subscribable.ts
rename to pioneer/packages/joy-utils/src/react/helpers/Subscribable.ts
index 966cbfac12..f7e776dee5 100644
--- a/pioneer/packages/joy-utils-old/src/Subscribable.ts
+++ b/pioneer/packages/joy-utils/src/react/helpers/Subscribable.ts
@@ -1,7 +1,5 @@
-import {
-  Subscribable as RxjsSubscribable,
-  Unsubscribable as RxjsUnsubscribable
-} from 'rxjs';
+import { Subscribable as RxjsSubscribable,
+  Unsubscribable as RxjsUnsubscribable } from 'rxjs';
 
 export type Observer<S> = (v: S) => void
 
diff --git a/pioneer/packages/joy-utils/src/react/helpers/index.ts b/pioneer/packages/joy-utils/src/react/helpers/index.ts
index f919989560..b38b7cf26c 100644
--- a/pioneer/packages/joy-utils/src/react/helpers/index.ts
+++ b/pioneer/packages/joy-utils/src/react/helpers/index.ts
@@ -3,3 +3,7 @@ import React from 'react';
 export function componentName (WrappedComponent: React.ComponentType<any>) {
   return WrappedComponent.displayName || WrappedComponent.name || 'Component';
 }
+
+export { Controller } from './Controller';
+export { Observable } from './Observable';
+export { Subscribable } from './Subscribable';
diff --git a/pioneer/packages/joy-utils-old/src/JoyEasyForms.tsx b/pioneer/packages/joy-utils/src/react/hocs/JoyEasyForms.tsx
similarity index 95%
rename from pioneer/packages/joy-utils-old/src/JoyEasyForms.tsx
rename to pioneer/packages/joy-utils/src/react/hocs/JoyEasyForms.tsx
index e41a90a14f..519aff9f71 100644
--- a/pioneer/packages/joy-utils-old/src/JoyEasyForms.tsx
+++ b/pioneer/packages/joy-utils/src/react/hocs/JoyEasyForms.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Dropdown, DropdownItemProps, DropdownProps } from 'semantic-ui-react';
 import { FormikProps, Field } from 'formik';
-import * as JoyForms from '@polkadot/joy-utils/forms';
+import * as JoyForms from '../components/forms';
 import { SubmittableResult } from '@polkadot/api';
 import { TxFailedCallback, TxCallback } from '@polkadot/react-components/Status/types';
-import { OnTxButtonClick } from '@polkadot/joy-utils/TxButton';
+import { OnTxButtonClick } from '../components/TxButton';
 import isEqual from 'lodash/isEqual';
-import { componentName } from '@polkadot/joy-utils/react/helpers';
+import { componentName } from '../helpers';
 
 export type FormCallbacks = {
   onSubmit: OnTxButtonClick;
@@ -37,7 +37,7 @@ type EasyTextProps<OuterProps, FormValues> =
 type EasyFieldProps<OuterProps, FormValues> =
   BaseFieldProps<OuterProps, FormValues> &
   JoyForms.LabelledProps<FormValues> & {
-    fieldProps: any;
+    fieldProps: Record<string, unknown>;
   }
 
 type EasyDropdownProps<OuterProps, FormValues> =
@@ -74,6 +74,7 @@ export function withEasyForm<OuterProps, FormValues>
 
   function EasyText (props: EasyTextProps<OuterProps, FormValues>) {
     const { field: f } = props;
+
     return !f ? null : <LabelledText name={f.id} label={f.name} tooltip={f.description} required={f.required} {...props} />;
   }
 
@@ -102,7 +103,7 @@ export function withEasyForm<OuterProps, FormValues>
   const EasyDropdown = (props: EasyDropdownProps<OuterProps, FormValues>) => {
     const { field: f, options = [] } = props;
     const id = f.id as string;
-    const value = (props.values as any)[id] || '';
+    const value = (props.values as Record<string, unknown>)[id] || '';
 
     return <EasyField {...props} fieldProps={{
       component: Dropdown,
@@ -133,6 +134,7 @@ export function withEasyForm<OuterProps, FormValues>
 
       const isFieldChanged = (field: FieldName | FieldObject): boolean => {
         const fieldName = typeof field === 'string' ? field : (field as FieldObject).id;
+
         return (
           dirty &&
           touched[fieldName] === true &&
@@ -154,6 +156,7 @@ export function withEasyForm<OuterProps, FormValues>
 
       const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | null) => {
         setSubmitting(false);
+
         if (txResult === null) {
           // Tx cancelled
 
@@ -181,6 +184,8 @@ export function withEasyForm<OuterProps, FormValues>
 
       return <Component {...allProps} />;
     };
+
   ResultComponent.displayName = `withEasyForm(${componentName(Component)})`;
+
   return ResultComponent;
 }
diff --git a/pioneer/packages/joy-utils/src/react/hocs/Loadable.tsx b/pioneer/packages/joy-utils/src/react/hocs/Loadable.tsx
new file mode 100644
index 0000000000..fc779628c6
--- /dev/null
+++ b/pioneer/packages/joy-utils/src/react/hocs/Loadable.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { componentName } from '../helpers';
+
+export function Loadable<P extends {[index: string]: any}>
+(required: string[], Component: React.FC<P>): React.FC<P> {
+  const ResultComponent: React.FunctionComponent<P> = (props: P) => {
+    if (!props) {
+      return <div className='spinner'></div>;
+    }
+
+    for (const requirement of required) {
+      if (typeof props[requirement] === 'undefined') {
+        return <div className='spinner'></div>;
+      }
+    }
+
+    return <Component {...props} />;
+  };
+
+  ResultComponent.displayName = `Loadable(${componentName(Component)})`;
+
+  return ResultComponent;
+}
diff --git a/pioneer/packages/joy-utils/src/react/hocs/View.tsx b/pioneer/packages/joy-utils/src/react/hocs/View.tsx
new file mode 100644
index 0000000000..aca0b0d76a
--- /dev/null
+++ b/pioneer/packages/joy-utils/src/react/hocs/View.tsx
@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from 'react';
+
+import { Controller, componentName } from '../helpers';
+
+export type ParamsMap = Map<string, string | undefined>
+
+type ViewRendererProps<C> = {
+  params?: Record<string, string | undefined>;
+  controller: C;
+}
+
+export type RenderComponentProps<C, S> = {
+  state: S,
+  controller: C,
+  params: ParamsMap
+}
+type RenderComponent<C, S> = React.ComponentType<RenderComponentProps<C, S>>
+
+export type ViewRenderer<C> = React.FC<ViewRendererProps<C>>
+
+type ViewArgsExplicit<C, S> = {
+  errorComponent?: React.ComponentType;
+  renderComponent: RenderComponent<C, S>;
+}
+
+type ViewArgs<C, S> = ViewArgsExplicit<C, S> | RenderComponent<C, S>
+
+function DefaultError () {
+  return <p>There has been an error</p>;
+}
+
+export function View<C extends Controller<S, any>, S> (args: ViewArgs<C, S>): ViewRenderer<C> {
+  let RenderComponent: RenderComponent<C, S>;
+  let ErrorComponent: React.ComponentType = DefaultError;
+
+  if (typeof args === 'function') {
+    RenderComponent = args;
+  } else {
+    RenderComponent = args.renderComponent;
+
+    if (typeof args.errorComponent !== 'undefined') {
+      ErrorComponent = args.errorComponent;
+    }
+  }
+
+  const ResultComponent: React.FunctionComponent<ViewRendererProps<C>> = (props) => {
+    const { controller } = props;
+    const [state, setState] = useState<S>(controller.state);
+
+    const onUpdate = (newState: S) => {
+      setState({ ...newState });
+    };
+
+    useEffect(() => {
+      controller.subscribe(onUpdate);
+      controller.refreshState(); // Refresh controller state on View mount
+
+      return () => {
+        controller.unsubscribe(onUpdate);
+      };
+    }, []);
+
+    const params = props.params ? new Map(Object.entries(props.params)) : new Map<string, string | undefined>();
+
+    if (controller.hasError()) {
+      return ErrorComponent ? <ErrorComponent /> : null;
+    } else {
+      return <RenderComponent { ...{ state, controller, params } } />;
+    }
+  };
+
+  ResultComponent.displayName = `View(${componentName(RenderComponent)})`;
+
+  return ResultComponent;
+}
diff --git a/pioneer/packages/joy-utils/src/react/hocs/accounts.tsx b/pioneer/packages/joy-utils/src/react/hocs/accounts.tsx
index 96a4363e40..9c1955ba20 100644
--- a/pioneer/packages/joy-utils/src/react/hocs/accounts.tsx
+++ b/pioneer/packages/joy-utils/src/react/hocs/accounts.tsx
@@ -7,11 +7,17 @@ import { withCalls, withMulti, withObservable, ApiContext } from '@polkadot/reac
 import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 
 import { MemberId, Membership } from '@joystream/types/members';
-import { LeadId } from '@joystream/types/content-working-group';
+import { LeadId, Lead, CuratorId, Curator, CurationActor } from '@joystream/types/content-working-group';
 
 import { queryMembershipToProp } from '@polkadot/joy-members/utils';
 import useMyAccount from '../hooks/useMyAccount';
 import { componentName } from '../helpers';
+import { queryToProp } from '@polkadot/joy-utils/functions/misc';
+import { entriesByIds } from '@polkadot/joy-utils/transport/base';
+
+import { useApi } from '@polkadot/react-hooks';
+import usePromise from '../hooks/usePromise';
+import { Error } from '../components/PromiseComponent';
 
 export type MyAddressProps = {
   myAddress?: string;
@@ -27,12 +33,11 @@ export type MyAccountProps = MyAddressProps & {
   myMembership?: Membership | null;
 
   // Content Working Group
-  curatorEntries?: any; // entire linked_map: CuratorId => Curator
   isLeadSet?: Option<LeadId>;
   contentLeadId?: LeadId;
-  contentLeadEntry?: any; // linked_map value
+  contentLead?: Lead;
 
-  curationActor?: any;
+  curationActor?: [CurationActor, AccountId];
   allAccounts?: SubjectInfo;
 };
 
@@ -103,6 +108,112 @@ function resolveMyProfile<P extends { myMembership?: Membership | null }> (Compo
   return ResultComponent;
 }
 
+/* Content Working Group */
+function resolveLead<P extends MyAccountProps> (Component: React.ComponentType<P>) {
+  const ResultComponent: React.FunctionComponent<P> = (props: P) => {
+    const { isLeadSet } = props;
+
+    const newProps = {
+      contentLeadId: isLeadSet?.unwrapOr(undefined)
+    };
+
+    return <Component {...props} {...newProps} />;
+  };
+
+  ResultComponent.displayName = `resolveLead(${componentName(Component)})`;
+
+  return ResultComponent;
+}
+
+const resolveLeadEntry = withCalls<MyAccountProps>(
+  queryToProp('query.contentWorkingGroup.leadById', { propName: 'contentLead', paramName: 'contentLeadId' })
+);
+
+const withContentWorkingGroupDetails = withCalls<MyAccountProps>(
+  queryToProp('query.contentWorkingGroup.currentLeadId', { propName: 'isLeadSet' })
+);
+
+const withContentWorkingGroup = <P extends MyAccountProps>(Component: React.ComponentType<P>) =>
+  withMulti(Component, withContentWorkingGroupDetails, resolveLead, resolveLeadEntry);
+
+function withCurationActor<P extends MyAccountProps> (Component: React.ComponentType<P>) {
+  const ResultComponent: React.FunctionComponent<P> = (props: P) => {
+    const {
+      myAccountId,
+      isLeadSet,
+      contentLead,
+      allAccounts
+    } = props;
+    const { isApiReady, api } = useApi();
+    const [curatorEntries, curatorsError, curatorsLoading] = usePromise<[CuratorId, Curator][]>(
+      () => isApiReady
+        ? entriesByIds<CuratorId, Curator>(api.query.contentWorkingGroup.curatorById)
+        : new Promise((resolve) => resolve([])),
+      [],
+      [isApiReady]
+    );
+
+    if (curatorsError) {
+      return <Error error={curatorsError} />;
+    }
+
+    if (!isApiReady || curatorsLoading || !myAccountId || !isLeadSet || !allAccounts) {
+      return <Component {...props} />;
+    }
+
+    const lead = isLeadSet.isSome && contentLead?.stage.isOfType('Active') ? contentLead : null;
+
+    const curationActorByAccount = (accountId: AccountId | string) => {
+      if (lead && lead.role_account.toString() === accountId.toString()) {
+        return api.createType('CurationActor', { Lead: null });
+      }
+
+      const matchingCuratorEntry = curatorEntries.find(([id, curator]) =>
+        curator.is_active && accountId.toString() === curator.role_account.toString()
+      );
+
+      return matchingCuratorEntry
+        ? api.createType('CurationActor', {
+          Curator: matchingCuratorEntry[0]
+        })
+        : null;
+    };
+
+    // First priority - currently selected account
+    let actor = curationActorByAccount(myAccountId);
+    let actorKey: AccountId | null = myAccountId;
+
+    // Second priority - check other keys and find best role
+    // TODO: Prioritize current member?
+    // TODO: Perhaps just don't do that at all and force the user to select the correct key to avoid confision?
+    if (!actor) {
+      const allActorsWithKeys = Object.keys(allAccounts).map((accKey) => ({
+        actor: curationActorByAccount(allAccounts[accKey].json.address),
+        key: api.createType('AccountId', allAccounts[accKey].json.address)
+      }));
+      let actorWithKey = allActorsWithKeys.find(({ actor }) => actor?.isOfType('Lead'));
+
+      if (!actorWithKey) {
+        actorWithKey = allActorsWithKeys.find(({ actor }) => actor?.isOfType('Curator'));
+      }
+
+      actor = actorWithKey?.actor || null;
+      actorKey = actorWithKey?.key || null;
+    }
+
+    if (actor && actorKey) {
+      return <Component {...props} curationActor={[actor, actorKey]} />;
+    } else {
+      // we don't have any key that can fulfill a curation action
+      return <Component {...props} />;
+    }
+  };
+
+  ResultComponent.displayName = `withCurationActor(${componentName(Component)})`;
+
+  return ResultComponent;
+}
+
 const withMyProfileCall = withCalls<MyAccountProps>(queryMembershipToProp('membershipById', {
   paramName: 'myMemberId',
   propName: 'myMembership'
@@ -118,7 +229,7 @@ export const withMyAccount = <P extends MyAccountProps>(Component: React.Compone
     withMyAddress,
     withMyMemberIds,
     withMyMembership,
-    withMyProfile
-    // withContentWorkingGroup,
-    // withCurationActor
+    withMyProfile,
+    withContentWorkingGroup,
+    withCurationActor
   );
diff --git a/pioneer/packages/joy-utils/src/react/hocs/guards.tsx b/pioneer/packages/joy-utils/src/react/hocs/guards.tsx
index 399052167f..71b3a4b4e6 100644
--- a/pioneer/packages/joy-utils/src/react/hocs/guards.tsx
+++ b/pioneer/packages/joy-utils/src/react/hocs/guards.tsx
@@ -1,40 +1,11 @@
 import React from 'react';
 import { Message } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
-
 import { AccountId } from '@polkadot/types/interfaces';
-import { Vec, Option } from '@polkadot/types';
-import { withMulti } from '@polkadot/react-api/index';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-
-import { MemberId, Membership } from '@joystream/types/members';
-import { LeadId } from '@joystream/types/content-working-group';
-import { useMyMembership } from '../hooks';
+import { withMulti, withCalls } from '@polkadot/react-api/index';
+import { useMyMembership, useMyAccount } from '../hooks';
 import { componentName } from '../helpers';
-import { withMyAccount } from './accounts';
-
-export type MyAddressProps = {
-  myAddress?: string;
-};
-
-export type MyAccountProps = MyAddressProps & {
-  myAccountId?: AccountId;
-  myMemberId?: MemberId;
-  memberIdsByRootAccountId?: Vec<MemberId>;
-  memberIdsByControllerAccountId?: Vec<MemberId>;
-  myMemberIdChecked?: boolean;
-  iAmMember?: boolean;
-  myMembership?: Membership | null;
-
-  // Content Working Group
-  curatorEntries?: any; // entire linked_map: CuratorId => Curator
-  isLeadSet?: Option<LeadId>;
-  contentLeadId?: LeadId;
-  contentLeadEntry?: any; // linked_map value
-
-  curationActor?: any;
-  allAccounts?: SubjectInfo;
-};
+import { withMyAccount, MyAccountProps } from './accounts';
 
 export function MembershipRequired<P extends Record<string, unknown>> (Component: React.ComponentType<P>): React.ComponentType<P> {
   const ResultComponent: React.FunctionComponent<P> = (props: P) => {
@@ -92,6 +63,37 @@ export function AccountRequired<P extends Record<string, unknown>> (Component: R
   return ResultComponent;
 }
 
+type OnlySudoProps = {
+  sudo?: AccountId;
+};
+
+function OnlySudo<P extends OnlySudoProps> (Component: React.ComponentType<P>) {
+  const ResultComponent: React.FunctionComponent<P> = (props: P) => {
+    const { sudo } = props;
+    const { state: { address: myAddress } } = useMyAccount();
+
+    if (!sudo) {
+      return <em>Loading sudo key...</em>;
+    }
+
+    const iAmSudo = myAddress === sudo.toString();
+
+    if (iAmSudo) {
+      return <Component {...props} />;
+    } else {
+      return (
+        <Message warning className='JoyMainStatus'>
+          <Message.Header>Only sudo can access this functionality.</Message.Header>
+        </Message>
+      );
+    }
+  };
+
+  ResultComponent.displayName = `OnlySudo(${componentName(Component)})`;
+
+  return ResultComponent;
+}
+
 // TODO: We could probably use withAccountRequired, which wouldn't pass any addiotional props, just like withMembershipRequired.
 // Just need to make sure those passed props are not used in the extended components (they probably aren't).
 export const withOnlyAccounts = <P extends MyAccountProps>(Component: React.ComponentType<P>): React.ComponentType<P> =>
@@ -102,3 +104,10 @@ export const withMembershipRequired = <P extends Record<string, unknown>> (Compo
 
 export const withOnlyMembers = <P extends MyAccountProps>(Component: React.ComponentType<P>): React.ComponentType<P> =>
   withMulti(Component, withMyAccount, withMembershipRequired);
+
+export const withOnlySudo = <P extends OnlySudoProps> (Component: React.ComponentType<P>) =>
+  withMulti(
+    Component,
+    withCalls(['query.sudo.key', { propName: 'sudo' }]),
+    OnlySudo
+  );
diff --git a/pioneer/packages/joy-utils/src/react/hocs/index.ts b/pioneer/packages/joy-utils/src/react/hocs/index.ts
new file mode 100644
index 0000000000..96a9ce4c92
--- /dev/null
+++ b/pioneer/packages/joy-utils/src/react/hocs/index.ts
@@ -0,0 +1,2 @@
+export { Loadable } from './Loadable';
+export { View } from './View';
diff --git a/pioneer/packages/joy-utils/src/react/hooks/index.ts b/pioneer/packages/joy-utils/src/react/hooks/index.ts
index f95a7d97e0..6b3b582558 100644
--- a/pioneer/packages/joy-utils/src/react/hooks/index.ts
+++ b/pioneer/packages/joy-utils/src/react/hooks/index.ts
@@ -1,2 +1,5 @@
 export { default as useMyAccount } from './useMyAccount';
 export { default as useMyMembership } from './useMyMembership';
+export { default as usePromise } from './usePromise';
+export { default as useTransport } from './useTransport';
+export { default as useProposalSubscription } from './proposals/useProposalSubscription';
diff --git a/pioneer/packages/joy-utils-old/src/react/hooks/proposals/useProposalSubscription.tsx b/pioneer/packages/joy-utils/src/react/hooks/proposals/useProposalSubscription.tsx
similarity index 78%
rename from pioneer/packages/joy-utils-old/src/react/hooks/proposals/useProposalSubscription.tsx
rename to pioneer/packages/joy-utils/src/react/hooks/proposals/useProposalSubscription.tsx
index 554d7c4026..8be148a3ae 100644
--- a/pioneer/packages/joy-utils-old/src/react/hooks/proposals/useProposalSubscription.tsx
+++ b/pioneer/packages/joy-utils/src/react/hooks/proposals/useProposalSubscription.tsx
@@ -1,7 +1,8 @@
 import { useState, useEffect } from 'react';
-import { useTransport } from '../';
+import useTransport from '../useTransport';
 import { ProposalId } from '@joystream/types/proposals';
 import { ParsedProposal } from '@polkadot/joy-utils/types/proposals';
+import { normalizeError } from '@polkadot/joy-utils/functions/misc';
 
 // Take advantage of polkadot api subscriptions to re-fetch proposal data and votes
 // each time there is some runtime change in the proposal
@@ -9,45 +10,51 @@ const useProposalSubscription = (id: ProposalId) => {
   const transport = useTransport();
   // State holding current proposal data
   const [data, setData] = useState<ParsedProposal | null>(null);
-  const [error, setError] = useState<any>(null);
+  const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
 
   useEffect(() => {
     // onMount...
     let unmounted = false;
     let unsubscribeProposal: (() => void) | undefined;
+
     const refreshProposalData = () => {
       transport.proposals.proposalById(id)
-        .then(newData => {
+        .then((newData) => {
           if (!unmounted) {
             setData(newData);
             setLoading(false);
           }
         })
-        .catch(error => {
+        .catch((error) => {
           if (!unmounted) {
-            setError(error);
+            setError(normalizeError(error));
             setLoading(false);
           }
         });
     };
+
     // Create the subscription
     transport.proposals.subscribeProposal(id, refreshProposalData)
-      .then(unsubscribe => {
+      .then((unsubscribe) => {
         if (!unmounted) {
           unsubscribeProposal = unsubscribe;
         } else {
           unsubscribe(); // If already unmounted - unsubscribe immedietally!
         }
-      });
+      })
+      .catch((e) => { throw e; });
+
     return () => {
       // onUnmount...
       // Clean the subscription
       unmounted = true;
+
       if (unsubscribeProposal) {
         unsubscribeProposal();
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return { data, error, loading };
diff --git a/pioneer/packages/joy-utils/src/react/hooks/usePromise.tsx b/pioneer/packages/joy-utils/src/react/hooks/usePromise.tsx
new file mode 100644
index 0000000000..db5d6e8c2c
--- /dev/null
+++ b/pioneer/packages/joy-utils/src/react/hooks/usePromise.tsx
@@ -0,0 +1,69 @@
+import { useState, useEffect, useRef } from 'react';
+import { normalizeError } from '../../functions/misc';
+import { randomBytes } from 'crypto';
+
+export type UsePromiseReturnValues<T> = [T, string | null, boolean, () => void];
+
+export default function usePromise<T> (
+  promise: () => Promise<T>,
+  defaultValue: T,
+  dependsOn: any[] = [],
+  onUpdate?: (newValue: T) => void
+): UsePromiseReturnValues<T> {
+  const [state, setState] = useState<{
+    value: T;
+    error: string | null;
+    isPending: boolean;
+  }>({ value: defaultValue, error: null, isPending: true });
+
+  const subscribedPromiseToken = useRef<string | null>(null);
+
+  const executeAndSubscribePromise = () => {
+    setState((state) => ({ ...state, error: null, isPending: true }));
+
+    const thisPromiseToken = randomBytes(32).toString('hex');
+
+    subscribedPromiseToken.current = thisPromiseToken;
+
+    promise()
+      .then((value) => {
+        if (subscribedPromiseToken.current === thisPromiseToken) {
+          setState({ value, error: null, isPending: false });
+
+          if (onUpdate) {
+            onUpdate(value);
+          }
+        } else {
+          console.warn('usePromise: Token didn\'t match on .then()');
+          console.warn(`Subscribed promise: ${subscribedPromiseToken.current || 'NONE'}. Resolved promise: ${thisPromiseToken}.`);
+        }
+      })
+      .catch((error) => {
+        if (subscribedPromiseToken.current === thisPromiseToken) {
+          setState({ value: defaultValue, error: normalizeError(error), isPending: false });
+
+          if (onUpdate) {
+            onUpdate(defaultValue); // This should represent an empty value in most cases
+          }
+        } else {
+          console.warn('usePromise: Token didn\'t match on .catch()');
+          console.warn(`Subscribed promise: ${subscribedPromiseToken.current || 'NONE'}. Rejected promise: ${thisPromiseToken}.`);
+        }
+      });
+  };
+
+  useEffect(() => {
+    executeAndSubscribePromise();
+
+    return () => {
+      subscribedPromiseToken.current = null;
+    };
+    // Silence "React Hook useEffect was passed a dependency list that is not an array literal",
+    // since we want to preserve the ability to pass custom "depnendencies".
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, dependsOn);
+
+  const { value, error, isPending } = state;
+
+  return [value, error, isPending, executeAndSubscribePromise];
+}
diff --git a/pioneer/packages/joy-utils-old/src/react/hooks/useTransport.tsx b/pioneer/packages/joy-utils/src/react/hooks/useTransport.tsx
similarity index 100%
rename from pioneer/packages/joy-utils-old/src/react/hooks/useTransport.tsx
rename to pioneer/packages/joy-utils/src/react/hooks/useTransport.tsx
diff --git a/pioneer/packages/joy-utils-old/src/APIQueryCache.ts b/pioneer/packages/joy-utils/src/transport/APIQueryCache.ts
similarity index 76%
rename from pioneer/packages/joy-utils-old/src/APIQueryCache.ts
rename to pioneer/packages/joy-utils/src/transport/APIQueryCache.ts
index 8643a7b7e1..d04b9579f2 100644
--- a/pioneer/packages/joy-utils-old/src/APIQueryCache.ts
+++ b/pioneer/packages/joy-utils/src/transport/APIQueryCache.ts
@@ -24,15 +24,17 @@ export class APIQueryCache {
     this.api = api;
     this.buildQuery();
     this.cache = new Map<string, Codec>();
-    this.breakCacheOnNewBlocks();
+    this.breakCacheOnNewBlocks()
+      .then((unsub) => { this.unsubscribeFn = unsub; })
+      .catch((e) => { throw e; });
   }
 
   unsubscribe () {
     this.unsubscribeFn();
   }
 
-  protected async breakCacheOnNewBlocks () {
-    this.unsubscribeFn = await this.api.rpc.chain.subscribeNewHeads((header) => {
+  protected breakCacheOnNewBlocks () {
+    return this.api.rpc.chain.subscribeNewHeads((header) => {
       this.cache = new Map<string, Codec>();
       // console.log("cache hits in this block", this.cacheHits)
       this.cacheHits = 0;
@@ -40,22 +42,28 @@ export class APIQueryCache {
   }
 
   protected buildQuery () {
-    const modules = Object.keys(this.api.query).map(key => ({ name: key, storage: this.api.query[key] }));
+    const modules = Object.keys(this.api.query).map((key) => ({ name: key, storage: this.api.query[key] }));
+
     modules.map((module) => {
       this.query[module.name] = {};
 
-      const funcs = Object.keys(module.storage).map(key => ({ name: key, storage: module.storage[key] }));
+      const funcs = Object.keys(module.storage).map((key) => ({ name: key, storage: module.storage[key] }));
+
       funcs.map((func) => {
         this.query[module.name][func.name] = async (...args: any): Promise<Codec> => {
           const cacheKey = module.name + func.name + JSON.stringify(args);
           const cacheValue = this.cache.get(cacheKey);
+
           if (cacheValue) {
             this.cacheHits++;
+
             return cacheValue;
           }
 
           const toCache = await this.api.query[module.name][func.name](...args);
+
           this.cache.set(cacheKey, toCache);
+
           return toCache;
         };
       });
diff --git a/pioneer/packages/joy-utils-old/src/SimpleCache.ts b/pioneer/packages/joy-utils/src/transport/SimpleCache.ts
similarity index 83%
rename from pioneer/packages/joy-utils-old/src/SimpleCache.ts
rename to pioneer/packages/joy-utils/src/transport/SimpleCache.ts
index 5abf3fec9c..7754d8e462 100644
--- a/pioneer/packages/joy-utils-old/src/SimpleCache.ts
+++ b/pioneer/packages/joy-utils/src/transport/SimpleCache.ts
@@ -1,5 +1,8 @@
 import BN from 'bn.js';
-import { IdLike, HasId } from './IdLike';
+
+export type IdLike = { toString: () => string } | number
+export type HasId = { id: IdLike }
+export type MayHaveId = { id?: IdLike }
 
 type LoadObjectsByIdsFn<Id extends IdLike, Obj extends HasId> =
   (ids: Id[]) => Promise<Obj[]>
@@ -13,7 +16,7 @@ function anyIdToString (id: IdLike): string {
 export class SimpleCache<Id extends IdLike, Obj extends HasId> {
   private cacheName: string
   private loadByIds: LoadObjectsByIdsFn<Id, Obj>
-  private cache: Map<string, Obj> = new Map()
+  private cache = new Map<string, Obj>()
 
   constructor (cacheName: string, loadByIds: LoadObjectsByIdsFn<Id, Obj>) {
     this.cacheName = cacheName;
@@ -26,7 +29,8 @@ export class SimpleCache<Id extends IdLike, Obj extends HasId> {
 
   clear (): void {
     const prevCacheSize = this.cache.size;
-    this.cache = new Map();
+
+    this.cache = new Map<string, Obj>();
     console.info(`Removed all ${prevCacheSize} entries from ${this.cacheName}`);
   }
 
@@ -34,14 +38,16 @@ export class SimpleCache<Id extends IdLike, Obj extends HasId> {
     const prevCacheSize = this.cache.size;
     const keepIdsSet = keepIds instanceof Set
       ? keepIds
-      : new Set(keepIds.map(id => id.toString()));
+      : new Set(keepIds.map((id) => id.toString()));
+
+    const newCache = new Map<string, Obj>();
 
-    const newCache: Map<string, Obj> = new Map();
     for (const [id, o] of this.cache.entries()) {
       if (keepIdsSet.has(id)) {
         newCache.set(id, o);
       }
     }
+
     this.cache = newCache;
     console.info(`Removed ${prevCacheSize - newCache.size} entries out of ${prevCacheSize} from ${this.cacheName}`);
   }
@@ -54,8 +60,9 @@ export class SimpleCache<Id extends IdLike, Obj extends HasId> {
     const idsNoFoundInCache: Id[] = [];
     const cachedObjects: Obj[] = [];
 
-    ids.map(id => {
+    ids.map((id) => {
       const fromCache = this.cache.get(id.toString());
+
       if (fromCache) {
         cachedObjects.push(fromCache);
       } else {
@@ -64,10 +71,12 @@ export class SimpleCache<Id extends IdLike, Obj extends HasId> {
     });
 
     let loadedObjects: Obj[] = [];
+
     if (idsNoFoundInCache.length > 0) {
       loadedObjects = await this.loadByIds(idsNoFoundInCache);
-      loadedObjects.map(o => {
+      loadedObjects.map((o) => {
         const id = anyIdToString(o.id);
+
         this.cache.set(id, o);
       });
     }
diff --git a/pioneer/packages/joy-utils/src/transport/base.ts b/pioneer/packages/joy-utils/src/transport/base.ts
new file mode 100644
index 0000000000..d0cb7e7a6a
--- /dev/null
+++ b/pioneer/packages/joy-utils/src/transport/base.ts
@@ -0,0 +1,94 @@
+import { ApiPromise } from '@polkadot/api';
+import { UInt } from '@polkadot/types/codec';
+import { Codec, CodecArg } from '@polkadot/types/types';
+import { QueryableStorageEntry } from '@polkadot/api/types/storage';
+import { APIQueryCache } from './APIQueryCache';
+
+export async function entriesByIds<IDType extends UInt, ValueType extends Codec> (
+  apiMethod: QueryableStorageEntry<'promise'>,
+  firstKey?: CodecArg // First key in case of double maps
+): Promise<[IDType, ValueType][]> {
+  const entries: [IDType, ValueType][] = (await apiMethod.entries<ValueType>(firstKey))
+    .map(([storageKey, value]) => ([
+      // If double-map (first key is provided), we map entries by second key
+      storageKey.args[firstKey !== undefined ? 1 : 0] as IDType,
+      value
+    ]));
+
+  return entries.sort((a, b) => a[0].toNumber() - b[0].toNumber());
+}
+
+export async function ids<IDType extends UInt> (
+  apiMethod: QueryableStorageEntry<'promise'>
+): Promise<IDType[]> {
+  const storageKeys = await apiMethod.keys();
+
+  return storageKeys.map((key) => key.args[0] as IDType).sort((a, b) => a.toNumber() - b.toNumber());
+}
+
+export default class BaseTransport {
+  protected api: ApiPromise;
+  protected cacheApi: APIQueryCache;
+
+  constructor (api: ApiPromise, cacheApi: APIQueryCache) {
+    this.api = api;
+    this.cacheApi = cacheApi;
+  }
+
+  protected get proposalsEngine () {
+    return this.cacheApi.query.proposalsEngine;
+  }
+
+  protected get proposalsCodex () {
+    return this.cacheApi.query.proposalsCodex;
+  }
+
+  protected get proposalsDiscussion () {
+    return this.cacheApi.query.proposalsDiscussion;
+  }
+
+  protected get members () {
+    return this.cacheApi.query.members;
+  }
+
+  protected get council () {
+    return this.cacheApi.query.council;
+  }
+
+  protected get councilElection () {
+    return this.cacheApi.query.councilElection;
+  }
+
+  protected get actors () {
+    return this.cacheApi.query.actors;
+  }
+
+  protected get contentWorkingGroup () {
+    return this.cacheApi.query.contentWorkingGroup;
+  }
+
+  protected get minting () {
+    return this.cacheApi.query.minting;
+  }
+
+  protected get hiring () {
+    return this.cacheApi.query.hiring;
+  }
+
+  protected get stake () {
+    return this.cacheApi.query.stake;
+  }
+
+  protected get recurringRewards () {
+    return this.cacheApi.query.recurringRewards;
+  }
+
+  protected queryMethodByName (name: string) {
+    const [module, method] = name.split('.');
+
+    return this.api.query[module][method];
+  }
+
+  protected entriesByIds = entriesByIds
+  protected ids = ids
+}
diff --git a/pioneer/packages/joy-utils-old/src/transport/chain.ts b/pioneer/packages/joy-utils/src/transport/chain.ts
similarity index 84%
rename from pioneer/packages/joy-utils-old/src/transport/chain.ts
rename to pioneer/packages/joy-utils/src/transport/chain.ts
index 0d249cb38a..9a6d8dc8bb 100644
--- a/pioneer/packages/joy-utils-old/src/transport/chain.ts
+++ b/pioneer/packages/joy-utils/src/transport/chain.ts
@@ -1,5 +1,4 @@
 import BaseTransport from './base';
-import { Moment } from '@polkadot/types/interfaces';
 
 export default class ChainTransport extends BaseTransport {
   async blockHash (height: number): Promise<string> {
@@ -9,7 +8,7 @@ export default class ChainTransport extends BaseTransport {
   }
 
   async blockTimestamp (height: number): Promise<Date> {
-    const blockTime = (await this.api.query.timestamp.now.at(await this.blockHash(height))) as Moment;
+    const blockTime = (await this.api.query.timestamp.now.at(await this.blockHash(height)));
 
     return new Date(blockTime.toNumber());
   }
diff --git a/pioneer/packages/joy-utils-old/src/transport/contentWorkingGroup.ts b/pioneer/packages/joy-utils/src/transport/contentWorkingGroup.ts
similarity index 72%
rename from pioneer/packages/joy-utils-old/src/transport/contentWorkingGroup.ts
rename to pioneer/packages/joy-utils/src/transport/contentWorkingGroup.ts
index b6500c3d95..19e1fe36b6 100644
--- a/pioneer/packages/joy-utils-old/src/transport/contentWorkingGroup.ts
+++ b/pioneer/packages/joy-utils/src/transport/contentWorkingGroup.ts
@@ -1,12 +1,11 @@
 import { Membership } from '@joystream/types/members';
-import { u128, Vec, Option } from '@polkadot/types/';
+import { u128, Option } from '@polkadot/types/';
 import BaseTransport from './base';
 import { MintId, Mint } from '@joystream/types/mint';
 import { LeadId, Lead } from '@joystream/types/content-working-group';
 import { ApiPromise } from '@polkadot/api';
 import MembersTransport from './members';
-import { APIQueryCache } from '../APIQueryCache';
-import { SingleLinkedMapEntry } from '..';
+import { APIQueryCache } from './APIQueryCache';
 
 export default class ContentWorkingGroupTransport extends BaseTransport {
   private membersT: MembersTransport;
@@ -18,8 +17,9 @@ export default class ContentWorkingGroupTransport extends BaseTransport {
 
   async currentMintCap (): Promise<number> {
     const WGMintId = (await this.contentWorkingGroup.mint()) as MintId;
-    const WGMint = (await this.minting.mints(WGMintId)) as Vec<Mint>;
-    return (WGMint[0].get('capacity') as u128).toNumber();
+    const WGMint = (await this.minting.mints(WGMintId)) as Mint;
+
+    return (WGMint.get('capacity') as u128).toNumber();
   }
 
   async currentLead (): Promise<{ id: number; profile: Membership } | null> {
@@ -28,9 +28,9 @@ export default class ContentWorkingGroupTransport extends BaseTransport {
 
     if (!leadId) return null;
 
-    const lead = new SingleLinkedMapEntry(Lead, await this.contentWorkingGroup.leadById(leadId)).value;
+    const lead = await this.contentWorkingGroup.leadById(leadId) as Lead;
 
-    if (!lead.stage.isOfType('Active')) {
+    if (lead.isEmpty || !lead.stage.isOfType('Active')) {
       return null;
     }
 
diff --git a/pioneer/packages/joy-utils-old/src/transport/council.ts b/pioneer/packages/joy-utils/src/transport/council.ts
similarity index 71%
rename from pioneer/packages/joy-utils-old/src/transport/council.ts
rename to pioneer/packages/joy-utils/src/transport/council.ts
index f962450f20..0dc79dff62 100644
--- a/pioneer/packages/joy-utils-old/src/transport/council.ts
+++ b/pioneer/packages/joy-utils/src/transport/council.ts
@@ -1,14 +1,13 @@
 import { ParsedMember } from '../types/members';
 import BaseTransport from './base';
-import { Seats, ElectionParameters } from '@joystream/types/council';
+import { Seats, IElectionParameters } from '@joystream/types/council';
 import { MemberId, Membership } from '@joystream/types/members';
 import { u32, Vec } from '@polkadot/types/';
 import { Balance, BlockNumber } from '@polkadot/types/interfaces';
-import { FIRST_MEMBER_ID } from '../consts/members';
 import { ApiPromise } from '@polkadot/api';
 import MembersTransport from './members';
 import ChainTransport from './chain';
-import { APIQueryCache } from '../APIQueryCache';
+import { APIQueryCache } from './APIQueryCache';
 
 export default class CouncilTransport extends BaseTransport {
   private membersT: MembersTransport;
@@ -23,7 +22,9 @@ export default class CouncilTransport extends BaseTransport {
   async councilMembersLength (atBlock?: number): Promise<number> {
     if (atBlock) {
       const blockHash = await this.chainT.blockHash(atBlock);
-      return ((await this.api.query.council.activeCouncil.at(blockHash)) as Seats).length;
+      const seats = await this.api.query.council.activeCouncil.at<Seats>(blockHash);
+
+      return seats.length;
     }
 
     return ((await this.council.activeCouncil()) as Seats).length;
@@ -31,10 +32,12 @@ export default class CouncilTransport extends BaseTransport {
 
   async councilMembers (): Promise<(ParsedMember & { memberId: MemberId })[]> {
     const council = (await this.council.activeCouncil()) as Seats;
+
     return Promise.all(
-      council.map(async seat => {
+      council.map(async (seat) => {
         const memberIds = (await this.members.memberIdsByControllerAccountId(seat.member)) as Vec<MemberId>;
         const member = (await this.membersT.expectedMembership(memberIds[0])).toJSON() as ParsedMember;
+
         return {
           ...member,
           memberId: memberIds[0]
@@ -46,28 +49,21 @@ export default class CouncilTransport extends BaseTransport {
   async membersExceptCouncil (): Promise<{ id: number; profile: Membership }[]> {
     // Council members to filter out
     const activeCouncil = (await this.council.activeCouncil()) as Seats;
-    const membersCount = ((await this.members.nextMemberId()) as MemberId).toNumber();
-    const profiles: { id: number; profile: Membership }[] = [];
-    for (let id = FIRST_MEMBER_ID.toNumber(); id < membersCount; ++id) {
-      const profile = (await this.membersT.membershipById(new MemberId(id)));
-      if (
-        !profile ||
+
+    return (await this.membersT.allMembers())
+      .filter(([memberId, member]) => (
         // Filter out council members
-        activeCouncil.some(
-          seat =>
-            seat.member.toString() === profile.controller_account.toString() ||
-            seat.member.toString() === profile.root_account.toString()
+        !activeCouncil.some((seat) =>
+          seat.member.eq(member.controller_account) ||
+            seat.member.eq(member.root_account)
         )
-      ) {
-        continue;
-      }
-      profiles.push({ id, profile });
-    }
-
-    return profiles;
+      ))
+      .map(([memberId, member]) => (
+        { id: memberId.toNumber(), profile: member }
+      ));
   }
 
-  async electionParameters (): Promise<ElectionParameters> {
+  async electionParameters (): Promise<IElectionParameters> {
     const announcing_period = (await this.councilElection.announcingPeriod()) as BlockNumber;
     const voting_period = (await this.councilElection.votingPeriod()) as BlockNumber;
     const revealing_period = (await this.councilElection.revealingPeriod()) as BlockNumber;
@@ -77,7 +73,7 @@ export default class CouncilTransport extends BaseTransport {
     const candidacy_limit = (await this.councilElection.candidacyLimit()) as u32;
     const council_size = (await this.councilElection.councilSize()) as u32;
 
-    return new ElectionParameters({
+    return {
       announcing_period,
       voting_period,
       revealing_period,
@@ -86,6 +82,6 @@ export default class CouncilTransport extends BaseTransport {
       min_voting_stake,
       candidacy_limit,
       council_size
-    });
+    };
   }
 }
diff --git a/pioneer/packages/joy-utils-old/src/transport/index.ts b/pioneer/packages/joy-utils/src/transport/index.ts
similarity index 96%
rename from pioneer/packages/joy-utils-old/src/transport/index.ts
rename to pioneer/packages/joy-utils/src/transport/index.ts
index a4296adc40..d57b303400 100644
--- a/pioneer/packages/joy-utils-old/src/transport/index.ts
+++ b/pioneer/packages/joy-utils/src/transport/index.ts
@@ -6,7 +6,7 @@ import MembersTransport from './members';
 import CouncilTransport from './council';
 import ValidatorsTransport from './validators';
 import WorkingGroupsTransport from './workingGroups';
-import { APIQueryCache } from '../APIQueryCache';
+import { APIQueryCache } from './APIQueryCache';
 
 export default class Transport {
   protected api: ApiPromise;
diff --git a/pioneer/packages/joy-utils/src/transport/members.ts b/pioneer/packages/joy-utils/src/transport/members.ts
new file mode 100644
index 0000000000..0c5d8f8a29
--- /dev/null
+++ b/pioneer/packages/joy-utils/src/transport/members.ts
@@ -0,0 +1,45 @@
+import BaseTransport from './base';
+import { MemberId, Membership } from '@joystream/types/members';
+import { Vec } from '@polkadot/types/codec';
+import { AccountId } from '@polkadot/types/interfaces';
+import { MemberFromAccount } from '../types/members';
+
+export default class MembersTransport extends BaseTransport {
+  async membershipById (id: MemberId | number): Promise<Membership | null> {
+    const member = (await this.members.membershipById(id)) as Membership;
+
+    return member.isEmpty ? null : member;
+  }
+
+  // Throws if profile not found
+  async expectedMembership (id: MemberId | number): Promise<Membership> {
+    const member = await this.membershipById(id);
+
+    if (!member) {
+      throw new Error(`Expected member profile not found! ID: ${id.toString()}`);
+    }
+
+    return member;
+  }
+
+  async nextMemberId (): Promise<number> {
+    return (await this.members.nextMemberId() as MemberId).toNumber();
+  }
+
+  async membershipFromAccount (accountId: AccountId | string): Promise<MemberFromAccount> {
+    const memberIdsRoot = (await this.members.memberIdsByRootAccountId(accountId)) as Vec<MemberId>;
+    const memberIdsController = (await this.members.memberIdsByControllerAccountId(accountId)) as Vec<MemberId>;
+    const memberId: MemberId | undefined = memberIdsRoot.toArray().concat(memberIdsController.toArray())[0];
+    const profile = memberId ? await this.expectedMembership(memberId) : undefined;
+
+    return {
+      account: accountId.toString(),
+      memberId: memberId && memberId.toNumber(),
+      profile
+    };
+  }
+
+  async allMembers (): Promise<[MemberId, Membership][]> {
+    return this.entriesByIds<MemberId, Membership>(this.api.query.members.membershipById);
+  }
+}
diff --git a/pioneer/packages/joy-utils/src/transport/mock/base.ts b/pioneer/packages/joy-utils/src/transport/mock/base.ts
new file mode 100644
index 0000000000..24ea40fc38
--- /dev/null
+++ b/pioneer/packages/joy-utils/src/transport/mock/base.ts
@@ -0,0 +1,23 @@
+export function mockPromise<T> (value: T, timeout?: number): Promise<T> {
+  return new Promise<T>((resolve, reject) => {
+    if (timeout) {
+      (new Promise((resolve) => setTimeout(resolve, timeout)))
+        .then(() => resolve(value))
+        .catch((e) => { throw e; });
+    } else {
+      resolve(value);
+    }
+  });
+}
+
+export default class BaseTransport {
+  protected promise = mockPromise
+
+  protected simulateApiResponse<T> (value: T): Promise<T> {
+    return this.promise<T>(value, this.randomTimeout());
+  }
+
+  protected randomTimeout (min = 1, max = 20): number {
+    return Math.random() * (max - min) + min;
+  }
+}
diff --git a/pioneer/packages/joy-utils-old/src/transport/proposals.ts b/pioneer/packages/joy-utils/src/transport/proposals.ts
similarity index 71%
rename from pioneer/packages/joy-utils-old/src/transport/proposals.ts
rename to pioneer/packages/joy-utils/src/transport/proposals.ts
index d3e088ee37..dc78670ec5 100644
--- a/pioneer/packages/joy-utils-old/src/transport/proposals.ts
+++ b/pioneer/packages/joy-utils/src/transport/proposals.ts
@@ -1,5 +1,4 @@
-import {
-  ParsedProposal,
+import { ParsedProposal,
   ProposalType,
   ProposalTypes,
   ProposalVote,
@@ -8,22 +7,21 @@ import {
   ParsedDiscussion,
   DiscussionContraints,
   ProposalStatusFilter,
-  ProposalsBatch
-} from '../types/proposals';
+  ProposalsBatch,
+  ParsedProposalDetails } from '../types/proposals';
 import { ParsedMember } from '../types/members';
 
 import BaseTransport from './base';
 
 import { ThreadId, PostId } from '@joystream/types/common';
-import { Proposal, ProposalId, VoteKind, DiscussionThread, DiscussionPost, ProposalDetails, Finalized, ProposalDecisionStatus } from '@joystream/types/proposals';
+import { Proposal, ProposalId, VoteKind, DiscussionThread, DiscussionPost, ProposalDetails } from '@joystream/types/proposals';
 import { MemberId } from '@joystream/types/members';
-import { u32, u64, Bytes, Null } from '@polkadot/types/';
+import { u32, Bytes, Null } from '@polkadot/types/';
 import { BalanceOf } from '@polkadot/types/interfaces';
 
 import { bytesToString } from '../functions/misc';
 import _ from 'lodash';
 import { metadata as proposalsConsts, apiMethods as proposalsApiMethods } from '../consts/proposals';
-import { FIRST_MEMBER_ID } from '../consts/members';
 
 import { ApiPromise } from '@polkadot/api';
 import MembersTransport from './members';
@@ -31,12 +29,11 @@ import ChainTransport from './chain';
 import CouncilTransport from './council';
 
 import { blake2AsHex } from '@polkadot/util-crypto';
-import { APIQueryCache } from '../APIQueryCache';
-import { MultipleLinkedMapEntry } from '../LinkedMapEntry';
+import { APIQueryCache } from './APIQueryCache';
 
 type ProposalDetailsCacheEntry = {
   type: ProposalType;
-  details: any[];
+  details: ParsedProposalDetails;
 }
 type ProposalDetailsCache = {
   [id: number]: ProposalDetailsCacheEntry | undefined;
@@ -79,23 +76,23 @@ export default class ProposalsTransport extends BaseTransport {
 
   async typeAndDetails (id: ProposalId) {
     const cachedProposalDetails = this.proposalDetailsCache[id.toNumber()];
+
     // Avoid fetching runtime upgrade proposal details if we already have them cached
     if (cachedProposalDetails) {
       return cachedProposalDetails;
     } else {
-      // TODO: The right typesafe handling with JoyEnum would be very useful here
       const rawDetails = await this.rawProposalDetails(id);
-      const type = rawDetails.type as ProposalType;
-      let details: any[];
+      const type = rawDetails.type;
+      let details: ParsedProposalDetails = rawDetails;
+
       if (type === 'RuntimeUpgrade') {
         // In case of RuntimeUpgrade proposal we override details to just contain the hash and filesize
         // (instead of full WASM bytecode)
         const wasm = rawDetails.value as Bytes;
+
         details = [blake2AsHex(wasm, 256), wasm.length];
-      } else {
-        const detailsJSON = rawDetails.value.toJSON();
-        details = Array.isArray(detailsJSON) ? detailsJSON : [detailsJSON];
       }
+
       // Save entry in cache
       this.proposalDetailsCache[id.toNumber()] = { type, details };
 
@@ -105,29 +102,28 @@ export default class ProposalsTransport extends BaseTransport {
 
   async proposalById (id: ProposalId, rawProposal?: Proposal): Promise<ParsedProposal> {
     const { type, details } = await this.typeAndDetails(id);
+
     if (!rawProposal) {
       rawProposal = await this.rawProposalById(id);
     }
+
     const proposer = (await this.membersT.expectedMembership(rawProposal.proposerId)).toJSON() as ParsedMember;
-    const proposal = rawProposal.toJSON() as {
-      title: string;
-      description: string;
-      parameters: any;
-      votingResults: any;
-      proposerId: number;
-      status: any;
-    };
     const createdAtBlock = rawProposal.createdAt;
     const createdAt = await this.chainT.blockTimestamp(createdAtBlock.toNumber());
     const cancellationFee = this.cancellationFee();
 
     return {
       id,
-      ...proposal,
+      title: rawProposal.title.toString(),
+      description: rawProposal.description.toString(),
+      parameters: rawProposal.parameters,
+      votingResults: rawProposal.votingResults,
+      proposerId: rawProposal.proposerId.toNumber(),
+      status: rawProposal.status,
       details,
       type,
       proposer,
-      createdAtBlock: createdAtBlock.toJSON(),
+      createdAtBlock: createdAtBlock.toNumber(),
       createdAt,
       cancellationFee
     };
@@ -135,37 +131,36 @@ export default class ProposalsTransport extends BaseTransport {
 
   async proposalsIds () {
     const total: number = (await this.proposalCount()).toNumber();
-    return Array.from({ length: total }, (_, i) => new ProposalId(i + 1));
+
+    return Array.from({ length: total }, (_, i) => this.api.createType('ProposalId', i + 1));
   }
 
   async activeProposalsIds () {
-    const result = new MultipleLinkedMapEntry(ProposalId, Null, await this.proposalsEngine.activeProposalIds());
-    // linked_keys will be [0] if there are no active proposals!
-    return result.linked_keys.join('') !== '0' ? result.linked_keys : [];
-  }
+    const result = await this.entriesByIds<ProposalId, Null>(
+      this.api.query.proposalsEngine.activeProposalIds
+    );
 
-  async proposals () {
-    const ids = await this.proposalsIds();
-    return Promise.all(ids.map(id => this.proposalById(id)));
+    return result.map(([proposalId]) => proposalId);
   }
 
   async proposalsBatch (status: ProposalStatusFilter, batchNumber = 1, batchSize = 5): Promise<ProposalsBatch> {
     const ids = (status === 'Active' ? await this.activeProposalsIds() : await this.proposalsIds())
       .sort((id1, id2) => id2.cmp(id1)); // Sort by newest
-    let rawProposalsWithIds = (await Promise.all(ids.map(id => this.rawProposalById(id))))
+    let rawProposalsWithIds = (await Promise.all(ids.map((id) => this.rawProposalById(id))))
       .map((proposal, index) => ({ id: ids[index], proposal }));
 
     if (status !== 'All' && status !== 'Active') {
       rawProposalsWithIds = rawProposalsWithIds.filter(({ proposal }) => {
-        if (proposal.status.type !== 'Finalized') {
+        if (!proposal.status.isOfType('Finalized')) {
           return false;
         }
-        const finalStatus = ((proposal.status.value as Finalized).get('proposalStatus') as ProposalDecisionStatus);
-        return finalStatus.type === status;
+
+        return proposal.status.asType('Finalized').proposalStatus.type === status;
       });
     }
 
     const totalBatches = Math.ceil(rawProposalsWithIds.length / batchSize);
+
     rawProposalsWithIds = rawProposalsWithIds.slice((batchNumber - 1) * batchSize, batchNumber * batchSize);
     const proposals = await Promise.all(rawProposalsWithIds.map(({ proposal, id }) => this.proposalById(id, proposal)));
 
@@ -177,35 +172,28 @@ export default class ProposalsTransport extends BaseTransport {
     };
   }
 
-  async proposedBy (member: MemberId) {
-    const proposals = await this.proposals();
-    return proposals.filter(({ proposerId }) => member.eq(proposerId));
-  }
-
   async voteByProposalAndMember (proposalId: ProposalId, voterId: MemberId): Promise<VoteKind | null> {
     const vote = (await this.proposalsEngine.voteExistsByProposalByVoter(proposalId, voterId)) as VoteKind;
     const hasVoted = (await this.api.query.proposalsEngine.voteExistsByProposalByVoter.size(proposalId, voterId)).toNumber();
+
     return hasVoted ? vote : null;
   }
 
   async votes (proposalId: ProposalId): Promise<ProposalVotes> {
-    const voteEntries = await this.doubleMapEntries(
-      'proposalsEngine.voteExistsByProposalByVoter', // Double map of intrest
-      proposalId, // First double-map key value
-      (v) => new VoteKind(v), // Converter from hex
-      async () => (await this.membersT.nextMemberId()), // A function that returns the number of iterations to go through when chekcing possible values for the second double-map key (memberId)
-      FIRST_MEMBER_ID.toNumber() // Min. possible value for second double-map key (memberId)
+    const voteEntries = await this.entriesByIds<MemberId, VoteKind>(
+      this.api.query.proposalsEngine.voteExistsByProposalByVoter,
+      proposalId
     );
 
     const votesWithMembers: ProposalVote[] = [];
-    for (const voteEntry of voteEntries) {
-      const memberId = voteEntry.secondKey;
-      const vote = voteEntry.value;
+
+    for (const [memberId, vote] of voteEntries) {
       const parsedMember = (await this.membersT.expectedMembership(memberId)).toJSON() as ParsedMember;
+
       votesWithMembers.push({
         vote,
         member: {
-          memberId: new MemberId(memberId),
+          memberId,
           ...parsedMember
         }
       });
@@ -223,12 +211,15 @@ export default class ProposalsTransport extends BaseTransport {
     const methods = proposalsApiMethods[type];
     let votingPeriod = 0;
     let gracePeriod = 0;
+
     if (methods) {
       votingPeriod = ((await this.proposalsCodex[methods.votingPeriod]()) as u32).toNumber();
       gracePeriod = ((await this.proposalsCodex[methods.gracePeriod]()) as u32).toNumber();
     }
+
     // Currently it's same for all types, but this will change soon (?)
     const cancellationFee = this.cancellationFee();
+
     return {
       type,
       votingPeriod,
@@ -239,7 +230,7 @@ export default class ProposalsTransport extends BaseTransport {
   }
 
   async proposalsTypesParameters () {
-    return Promise.all(ProposalTypes.map(type => this.parametersFromProposalType(type)));
+    return Promise.all(ProposalTypes.map((type) => this.parametersFromProposalType(type)));
   }
 
   async subscribeProposal (id: number|ProposalId, callback: () => void) {
@@ -248,21 +239,22 @@ export default class ProposalsTransport extends BaseTransport {
 
   async discussion (id: number|ProposalId): Promise<ParsedDiscussion | null> {
     const threadId = (await this.proposalsCodex.threadIdByProposalId(id)) as ThreadId;
+
     if (!threadId.toNumber()) {
       return null;
     }
+
     const thread = (await this.proposalsDiscussion.threadById(threadId)) as DiscussionThread;
-    const postEntries = await this.doubleMapEntries(
-      'proposalsDiscussion.postThreadIdByPostId',
-      threadId,
-      (v) => new DiscussionPost(v),
-      async () => ((await this.proposalsDiscussion.postCount()) as u64).toNumber()
+    const postEntries = await this.entriesByIds<PostId, DiscussionPost>(
+      this.api.query.proposalsDiscussion.postThreadIdByPostId,
+      threadId
     );
 
     const parsedPosts: ParsedPost[] = [];
-    for (const { secondKey: postId, value: post } of postEntries) {
+
+    for (const [postId, post] of postEntries) {
       parsedPosts.push({
-        postId: new PostId(postId),
+        postId: postId,
         threadId: post.thread_id,
         text: bytesToString(post.text),
         createdAt: await this.chainT.blockTimestamp(post.created_at.toNumber()),
diff --git a/pioneer/packages/joy-utils-old/src/transport/validators.ts b/pioneer/packages/joy-utils/src/transport/validators.ts
similarity index 78%
rename from pioneer/packages/joy-utils-old/src/transport/validators.ts
rename to pioneer/packages/joy-utils/src/transport/validators.ts
index dbe06c8a9a..0afb763b5e 100644
--- a/pioneer/packages/joy-utils-old/src/transport/validators.ts
+++ b/pioneer/packages/joy-utils/src/transport/validators.ts
@@ -1,9 +1,9 @@
 import BaseTransport from './base';
-import { u32 } from '@polkadot/types/';
 
 export default class ValidatorsTransport extends BaseTransport {
   async maxCount (): Promise<number> {
-    const count = ((await this.api.query.staking.validatorCount()) as u32).toNumber();
+    const count = ((await this.api.query.staking.validatorCount())).toNumber();
+
     return count;
   }
 }
diff --git a/pioneer/packages/joy-utils-old/src/transport/workingGroups.ts b/pioneer/packages/joy-utils/src/transport/workingGroups.ts
similarity index 59%
rename from pioneer/packages/joy-utils-old/src/transport/workingGroups.ts
rename to pioneer/packages/joy-utils/src/transport/workingGroups.ts
index afeaad6590..7731ffd0b7 100644
--- a/pioneer/packages/joy-utils-old/src/transport/workingGroups.ts
+++ b/pioneer/packages/joy-utils/src/transport/workingGroups.ts
@@ -3,16 +3,14 @@ import { Balance } from '@polkadot/types/interfaces';
 import BaseTransport from './base';
 import { ApiPromise } from '@polkadot/api';
 import MembersTransport from './members';
-import { SingleLinkedMapEntry } from '../index';
 import { Worker, WorkerId, Opening as WGOpening, Application as WGApplication, OpeningTypeKey } from '@joystream/types/working-group';
 import { apiModuleByGroup } from '../consts/workingGroups';
 import { WorkingGroupKey } from '@joystream/types/common';
 import { WorkerData, OpeningData, ParsedApplication } from '../types/workingGroups';
 import { OpeningId, ApplicationId, Opening, Application, ActiveOpeningStageKey } from '@joystream/types/hiring';
-import { MultipleLinkedMapEntry } from '../LinkedMapEntry';
 import { Stake, StakeId } from '@joystream/types/stake';
-import { RewardRelationshipId, RewardRelationship } from '@joystream/types/recurring-rewards';
-import { APIQueryCache } from '../APIQueryCache';
+import { RewardRelationship } from '@joystream/types/recurring-rewards';
+import { APIQueryCache } from './APIQueryCache';
 
 export default class WorkingGroupsTransport extends BaseTransport {
   private membersT: MembersTransport;
@@ -22,19 +20,22 @@ export default class WorkingGroupsTransport extends BaseTransport {
     this.membersT = membersTransport;
   }
 
+  protected apiQueryByGroup (group: WorkingGroupKey) {
+    const module = apiModuleByGroup[group];
+
+    return this.api.query[module];
+  }
+
   protected queryByGroup (group: WorkingGroupKey) {
     const module = apiModuleByGroup[group];
+
     return this.cacheApi.query[module];
   }
 
   public async groupMemberById (group: WorkingGroupKey, workerId: number): Promise<WorkerData | null> {
-    const workerLink = new SingleLinkedMapEntry(
-      Worker,
-      await this.queryByGroup(group).workerById(workerId)
-    );
-    const worker = workerLink.value;
+    const worker = await this.queryByGroup(group).workerById(workerId) as Worker;
 
-    if (!worker.is_active) {
+    if (worker.isEmpty) {
       return null;
     }
 
@@ -43,7 +44,7 @@ export default class WorkingGroupsTransport extends BaseTransport {
       : undefined;
 
     const reward = worker.reward_relationship.isSome
-      ? (await this.rewardRelationship(worker.reward_relationship.unwrap()))
+      ? (await this.recurringRewards.rewardRelationships(worker.reward_relationship.unwrap()) as RewardRelationship)
       : undefined;
 
     const profile = await this.membersT.expectedMembership(worker.member_id);
@@ -64,71 +65,50 @@ export default class WorkingGroupsTransport extends BaseTransport {
   }
 
   public async allOpenings (group: WorkingGroupKey, type?: OpeningTypeKey): Promise<OpeningData[]> {
-    const nextId = (await this.queryByGroup(group).nextOpeningId()) as OpeningId;
-
-    if (nextId.eq(0)) {
-      return [];
-    }
-
-    const query = this.queryByGroup(group).openingById();
-    const result = new MultipleLinkedMapEntry(OpeningId, WGOpening, await query);
+    const wgOpeningEntries = await this.entriesByIds<OpeningId, WGOpening>(this.apiQueryByGroup(group).openingById);
+    const hiringOpenings = await Promise.all(
+      wgOpeningEntries.map(
+        ([wgOpeningId, wgOpening]) => this.hiring.openingById(wgOpening.hiring_opening_id)
+      )
+    ) as Opening[];
+
+    return hiringOpenings
+      .map((hiringOpening, index) => {
+        const id = wgOpeningEntries[index][0];
+        const opening = wgOpeningEntries[index][1];
 
-    const { linked_keys: openingIds, linked_values: openings } = result;
-    return (await Promise.all(openings.map(opening => this.hiring.openingById(opening.hiring_opening_id))))
-      .map((hiringOpeningRes, index) => {
-        const id = openingIds[index];
-        const opening = openings[index];
-        const hiringOpening = (new SingleLinkedMapEntry(Opening, hiringOpeningRes)).value;
         return { id, opening, hiringOpening };
       })
-      .filter(openingData => !type || openingData.opening.opening_type.isOfType(type));
+      .filter((openingData) => !type || openingData.opening.opening_type.isOfType(type));
   }
 
   public async activeOpenings (group: WorkingGroupKey, substage?: ActiveOpeningStageKey, type?: OpeningTypeKey) {
     return (await this.allOpenings(group, type))
-      .filter(od =>
+      .filter((od) =>
         od.hiringOpening.stage.isOfType('Active') &&
         (!substage || od.hiringOpening.stage.asType('Active').stage.isOfType(substage))
       );
   }
 
   async wgApplicationById (group: WorkingGroupKey, wgApplicationId: number | ApplicationId): Promise<WGApplication> {
-    const nextAppId = await this.queryByGroup(group).nextApplicationId() as ApplicationId;
+    const wgApplication = (await this.queryByGroup(group).applicationById(wgApplicationId)) as WGApplication;
 
-    if (wgApplicationId < 0 || wgApplicationId >= nextAppId.toNumber()) {
-      throw new Error(`Invalid working group application ID (${wgApplicationId})!`);
+    if (wgApplication.isEmpty) {
+      throw new Error(`Working group application not found (ID: ${wgApplicationId.toString()})!`);
     }
 
-    return new SingleLinkedMapEntry(
-      WGApplication,
-      await this.queryByGroup(group).applicationById(wgApplicationId)
-    ).value;
-  }
-
-  protected async hiringApplicationById (id: number | ApplicationId): Promise<Application> {
-    return new SingleLinkedMapEntry(
-      Application,
-      await this.hiring.applicationById(id)
-    ).value;
+    return wgApplication;
   }
 
   protected async stakeValue (stakeId: StakeId): Promise<Balance> {
-    return new SingleLinkedMapEntry(
-      Stake,
-      await this.stake.stakes(stakeId)
-    ).value.value;
-  }
+    const stake = await this.stake.stakes(stakeId) as Stake;
 
-  protected async rewardRelationship (relationshipId: RewardRelationshipId): Promise<RewardRelationship> {
-    return new SingleLinkedMapEntry(
-      RewardRelationship,
-      await this.recurringRewards.rewardRelationships(relationshipId)
-    ).value;
+    return stake.value;
   }
 
   protected async parseApplication (wgApplicationId: number, wgApplication: WGApplication): Promise<ParsedApplication> {
     const appId = wgApplication.application_id;
-    const application = await this.hiringApplicationById(appId);
+    const application = await this.hiring.applicationById(appId) as Application;
 
     const { active_role_staking_id: roleStakingId, active_application_staking_id: appStakingId } = application;
 
@@ -148,26 +128,33 @@ export default class WorkingGroupsTransport extends BaseTransport {
 
   async parsedApplicationById (group: WorkingGroupKey, wgApplicationId: number): Promise<ParsedApplication> {
     const wgApplication = await this.wgApplicationById(group, wgApplicationId);
+
     return this.parseApplication(wgApplicationId, wgApplication);
   }
 
   async openingApplications (group: WorkingGroupKey, wgOpeningId: number): Promise<ParsedApplication[]> {
-    const applications: ParsedApplication[] = [];
-
-    const nextAppId = await this.queryByGroup(group).nextApplicationId() as ApplicationId;
-    for (let i = 0; i < nextAppId.toNumber(); i++) {
-      const wgApplication = await this.wgApplicationById(group, i);
-      if (wgApplication.opening_id.toNumber() !== wgOpeningId) {
-        continue;
-      }
-      applications.push(await this.parseApplication(i, wgApplication));
-    }
-
-    return applications;
+    const wgApplicationsEntries =
+      await this.entriesByIds<ApplicationId, WGApplication>(this.apiQueryByGroup(group).applicationById);
+
+    return Promise.all(
+      wgApplicationsEntries
+        .filter(
+          ([wgApplicationById, wgApplication]) => wgApplication.opening_id.eq(wgOpeningId)
+        )
+        .map(
+          ([wgApplicationId, wgApplication]) => (
+            this.parseApplication(wgApplicationId.toNumber(), wgApplication)
+          )
+        )
+    );
   }
 
   async openingActiveApplications (group: WorkingGroupKey, wgOpeningId: number): Promise<ParsedApplication[]> {
     return (await this.openingApplications(group, wgOpeningId))
-      .filter(a => a.stage.isOfType('Active'));
+      .filter((a) => a.stage.isOfType('Active'));
+  }
+
+  async allWorkers (group: WorkingGroupKey) {
+    return this.entriesByIds<WorkerId, Worker>(this.apiQueryByGroup(group).workerById);
   }
 }
diff --git a/pioneer/packages/joy-utils-old/src/ValidationConstraint.ts b/pioneer/packages/joy-utils/src/types/ValidationConstraint.ts
similarity index 100%
rename from pioneer/packages/joy-utils-old/src/ValidationConstraint.ts
rename to pioneer/packages/joy-utils/src/types/ValidationConstraint.ts
diff --git a/pioneer/packages/joy-utils-old/src/types/common.ts b/pioneer/packages/joy-utils/src/types/common.ts
similarity index 100%
rename from pioneer/packages/joy-utils-old/src/types/common.ts
rename to pioneer/packages/joy-utils/src/types/common.ts
diff --git a/pioneer/packages/joy-utils-old/src/types/members.ts b/pioneer/packages/joy-utils/src/types/members.ts
similarity index 64%
rename from pioneer/packages/joy-utils-old/src/types/members.ts
rename to pioneer/packages/joy-utils/src/types/members.ts
index 76f5882de1..1528222ebe 100644
--- a/pioneer/packages/joy-utils-old/src/types/members.ts
+++ b/pioneer/packages/joy-utils/src/types/members.ts
@@ -1,3 +1,5 @@
+import { Membership } from '@joystream/types/members';
+
 export type ParsedMember = {
   about: string;
   avatar_uri: string;
@@ -10,3 +12,5 @@ export type ParsedMember = {
   subscription: any;
   suspended: boolean;
 };
+
+export type MemberFromAccount = { account: string; memberId?: number; profile?: Membership };
diff --git a/pioneer/packages/joy-utils-old/src/types/proposals.ts b/pioneer/packages/joy-utils/src/types/proposals.ts
similarity index 77%
rename from pioneer/packages/joy-utils-old/src/types/proposals.ts
rename to pioneer/packages/joy-utils/src/types/proposals.ts
index c6d9f44110..d3414aa491 100644
--- a/pioneer/packages/joy-utils-old/src/types/proposals.ts
+++ b/pioneer/packages/joy-utils/src/types/proposals.ts
@@ -2,6 +2,7 @@ import { ProposalId, VoteKind } from '@joystream/types/proposals';
 import { MemberId, Membership } from '@joystream/types/members';
 import { ThreadId, PostId } from '@joystream/types/common';
 import { ParsedMember } from './members';
+import { ProposalDetails, ProposalStatus, VotingResults, ProposalParameters } from '@joystream/types/src/proposals';
 
 export const ProposalTypes = [
   'Text',
@@ -28,27 +29,31 @@ export type ProposalType = typeof ProposalTypes[number];
 export const proposalStatusFilters = ['All', 'Active', 'Canceled', 'Approved', 'Rejected', 'Slashed', 'Expired'] as const;
 export type ProposalStatusFilter = typeof proposalStatusFilters[number];
 
+// Overriden for better optimalization
+export type RuntimeUpgradeProposalDetails = [
+  string, // hash as hex
+  number // file size in bytes
+]
+
+export type ParsedProposalDetails = ProposalDetails | RuntimeUpgradeProposalDetails;
+
+export type SpecificProposalDetails<T extends keyof ProposalDetails['typeDefinitions']> =
+  T extends 'RuntimeUpgrade' ? RuntimeUpgradeProposalDetails :
+    InstanceType<ProposalDetails['typeDefinitions'][Exclude<T, 'RuntimeUpgrade'>]>;
+
 export type ParsedProposal = {
   id: ProposalId;
   type: ProposalType;
   title: string;
   description: string;
-  status: any;
+  status: ProposalStatus;
   proposer: ParsedMember;
   proposerId: number;
   createdAtBlock: number;
   createdAt: Date;
-  details: any[];
-  votingResults: any;
-  parameters: {
-    approvalQuorumPercentage: number;
-    approvalThresholdPercentage: number;
-    gracePeriod: number;
-    requiredStake: number;
-    slashingQuorumPercentage: number;
-    slashingThresholdPercentage: number;
-    votingPeriod: number;
-  };
+  details: ParsedProposalDetails;
+  votingResults: VotingResults;
+  parameters: ProposalParameters;
   cancellationFee: number;
 };
 
diff --git a/pioneer/packages/joy-utils-old/src/types/storageProviders.ts b/pioneer/packages/joy-utils/src/types/storageProviders.ts
similarity index 100%
rename from pioneer/packages/joy-utils-old/src/types/storageProviders.ts
rename to pioneer/packages/joy-utils/src/types/storageProviders.ts
diff --git a/pioneer/packages/joy-utils-old/src/types/workingGroups.ts b/pioneer/packages/joy-utils/src/types/workingGroups.ts
similarity index 82%
rename from pioneer/packages/joy-utils-old/src/types/workingGroups.ts
rename to pioneer/packages/joy-utils/src/types/workingGroups.ts
index 25f0cfbf82..cbab4a9c30 100644
--- a/pioneer/packages/joy-utils-old/src/types/workingGroups.ts
+++ b/pioneer/packages/joy-utils/src/types/workingGroups.ts
@@ -32,3 +32,6 @@ export type ParsedApplication = {
   humanReadableText: string;
   stage: ApplicationStage;
 }
+
+export type ApplicationQuestionAnswers = { [questionTitle: string]: string | undefined };
+export type ApplicationDetailsData = { [sectionTitle: string]: ApplicationQuestionAnswers | undefined };
diff --git a/pioneer/packages/old-apps/.skip-build b/pioneer/packages/old-apps/.skip-build
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/pioneer/packages/old-apps/app-accounts/LICENSE b/pioneer/packages/old-apps/app-accounts/LICENSE
deleted file mode 100644
index 0d381b2e97..0000000000
--- a/pioneer/packages/old-apps/app-accounts/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/pioneer/packages/old-apps/app-accounts/README.md b/pioneer/packages/old-apps/app-accounts/README.md
deleted file mode 100644
index 6adfe80b58..0000000000
--- a/pioneer/packages/old-apps/app-accounts/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# @polkadot/app-accounts
-
-## vanity
-
-Running `yarn run vanitygen --match <string>` runs the generator as a Node CLI app. (Orders of a magnitude faster due to the use of libsoldium bindings)
diff --git a/pioneer/packages/old-apps/app-accounts/package.json b/pioneer/packages/old-apps/app-accounts/package.json
deleted file mode 100644
index b878755133..0000000000
--- a/pioneer/packages/old-apps/app-accounts/package.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "@polkadot/app-accounts",
-  "version": "0.37.0-beta.63",
-  "main": "index.js",
-  "repository": "https://github.com/polkadot-js/apps.git",
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "contributors": [],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/react-components": "^0.37.0-beta.63",
-    "@polkadot/react-qr": "^0.47.0-beta.3",
-    "@types/file-saver": "^2.0.0",
-    "@types/yargs": "^13.0.2",
-    "babel-plugin-module-resolver": "^3.1.1",
-    "detect-browser": "^4.8.0",
-    "file-saver": "^2.0.0",
-    "yargs": "^14.2.0"
-  }
-}
diff --git a/pioneer/packages/old-apps/app-accounts/scripts/vanitygen.js b/pioneer/packages/old-apps/app-accounts/scripts/vanitygen.js
deleted file mode 100755
index 32fc07b1d3..0000000000
--- a/pioneer/packages/old-apps/app-accounts/scripts/vanitygen.js
+++ /dev/null
@@ -1,26 +0,0 @@
-#!/usr/bin/env node
-/* eslint-disable @typescript-eslint/no-var-requires */
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-const fs = require('fs');
-const path = require('path');
-
-const [compiled] = ['../vanitygen/cli.js']
-  .map((file) => path.join(__dirname, file))
-  .filter((file) => fs.existsSync(file));
-
-if (compiled) {
-  require(compiled);
-} else {
-  require('@babel/register')({
-    extensions: ['.js', '.ts'],
-    plugins: [
-      ['module-resolver', {
-        alias: {}
-      }]
-    ]
-  });
-  require('../src/vanitygen/cli.ts');
-}
diff --git a/pioneer/packages/old-apps/app-accounts/src/Account.tsx b/pioneer/packages/old-apps/app-accounts/src/Account.tsx
deleted file mode 100644
index 91529679a9..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/Account.tsx
+++ /dev/null
@@ -1,227 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ActionStatus } from '@polkadot/react-components/Status/types';
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React, { useState, useEffect } from 'react';
-import { Popup } from 'semantic-ui-react';
-import styled from 'styled-components';
-import { AddressCard, AddressInfo, Button, ChainLock, Forget, Menu } from '@polkadot/react-components';
-import keyring from '@polkadot/ui-keyring';
-
-import Backup from './modals/Backup';
-import ChangePass from './modals/ChangePass';
-import Derive from './modals/Derive';
-import Transfer from './modals/Transfer';
-import translate from './translate';
-
-interface Props extends I18nProps {
-  address: string;
-  className?: string;
-}
-
-function Account ({ address, className, t }: Props): React.ReactElement<Props> {
-  const [genesisHash, setGenesisHash] = useState<string | null>(null);
-  const [isBackupOpen, setIsBackupOpen] = useState(false);
-  const [{ isDevelopment, isEditable, isExternal }, setFlags] = useState({ isDevelopment: false, isEditable: false, isExternal: false });
-  const [isDeriveOpen, setIsDeriveOpen] = useState(false);
-  const [isForgetOpen, setIsForgetOpen] = useState(false);
-  const [isPasswordOpen, setIsPasswordOpen] = useState(false);
-  const [isSettingPopupOpen, setIsSettingPopupOpen] = useState(false);
-  const [isTransferOpen, setIsTransferOpen] = useState(false);
-
-  useEffect((): void => {
-    const account = keyring.getAccount(address);
-
-    setGenesisHash((account && account.meta.genesisHash) || null);
-    setFlags({
-      isDevelopment: (account && account.meta.isTesting) || false,
-      isEditable: (account && !(account.meta.isInjected || account.meta.isHardware)) || false,
-      isExternal: (account && account.meta.isExternal) || false
-    });
-  }, [address]);
-
-  const _toggleBackup = (): void => setIsBackupOpen(!isBackupOpen);
-  const _toggleDerive = (): void => setIsDeriveOpen(!isDeriveOpen);
-  const _toggleForget = (): void => setIsForgetOpen(!isForgetOpen);
-  const _togglePass = (): void => setIsPasswordOpen(!isPasswordOpen);
-  const _toggleTransfer = (): void => setIsTransferOpen(!isTransferOpen);
-  const _toggleSettingPopup = (): void => setIsSettingPopupOpen(!isSettingPopupOpen);
-  const _onForget = (): void => {
-    if (!address) {
-      return;
-    }
-
-    const status: Partial<ActionStatus> = {
-      account: address,
-      action: 'forget'
-    };
-
-    try {
-      keyring.forgetAccount(address);
-      status.status = 'success';
-      status.message = t('account forgotten');
-    } catch (error) {
-      status.status = 'error';
-      status.message = error.message;
-    }
-  };
-  const _onGenesisChange = (genesisHash: string | null): void => {
-    const account = keyring.getPair(address);
-
-    account && keyring.saveAccountMeta(account, { ...account.meta, genesisHash });
-
-    setGenesisHash(genesisHash);
-  };
-
-  // FIXME It is a bit heavy-handled switching of being editable here completely
-  // (and removing the tags, however the keyring cannot save these)
-  return (
-    <AddressCard
-      buttons={
-        <div className='accounts--Account-buttons buttons'>
-          <div className='actions'>
-            {isEditable && !isDevelopment && (
-              <Button
-                isNegative
-                onClick={_toggleForget}
-                icon='trash'
-                size='small'
-                tooltip={t('Forget this account')}
-              />
-            )}
-            {isEditable && !isExternal && !isDevelopment && (
-              <>
-                <Button
-                  icon='cloud download'
-                  isPrimary
-                  onClick={_toggleBackup}
-                  size='small'
-                  tooltip={t('Create a backup file for this account')}
-                />
-                <Button
-                  icon='key'
-                  isPrimary
-                  onClick={_togglePass}
-                  size='small'
-                  tooltip={t("Change this account's password")}
-                />
-              </>
-            )}
-            <Button
-              icon='paper plane'
-              isPrimary
-              label={t('send')}
-              onClick={_toggleTransfer}
-              size='small'
-              tooltip={t('Send funds from this account')}
-            />
-            {isEditable && !isExternal && (
-              <Popup
-                onClose={_toggleSettingPopup}
-                open={isSettingPopupOpen}
-                position='bottom left'
-                trigger={
-                  <Button
-                    icon='setting'
-                    onClick={_toggleSettingPopup}
-                    size='small'
-                  />
-                }
-              >
-                <Menu
-                  vertical
-                  text
-                  onClick={_toggleSettingPopup}
-                >
-                  <Menu.Item onClick={_toggleDerive}>
-                    {t('Derive account from source')}
-                  </Menu.Item>
-                  <Menu.Item disabled>
-                    {t('Change on-chain nickname')}
-                  </Menu.Item>
-                </Menu>
-              </Popup>
-            )}
-          </div>
-          {isEditable && !isExternal && (
-            <div className='others'>
-              <ChainLock
-                genesisHash={genesisHash}
-                onChange={_onGenesisChange}
-              />
-            </div>
-          )}
-        </div>
-      }
-      className={className}
-      isEditable={isEditable}
-      type='account'
-      value={address}
-      withExplorer
-      withIndexOrAddress={false}
-      withTags
-    >
-      {address && (
-        <>
-          {isBackupOpen && (
-            <Backup
-              address={address}
-              key='modal-backup-account'
-              onClose={_toggleBackup}
-            />
-          )}
-          {isDeriveOpen && (
-            <Derive
-              from={address}
-              key='modal-derive-account'
-              onClose={_toggleDerive}
-            />
-          )}
-          {isForgetOpen && (
-            <Forget
-              address={address}
-              onForget={_onForget}
-              key='modal-forget-account'
-              onClose={_toggleForget}
-            />
-          )}
-          {isPasswordOpen && (
-            <ChangePass
-              address={address}
-              key='modal-change-pass'
-              onClose={_togglePass}
-            />
-          )}
-          {isTransferOpen && (
-            <Transfer
-              key='modal-transfer'
-              onClose={_toggleTransfer}
-              senderId={address}
-            />
-          )}
-        </>
-      )}
-      <AddressInfo
-        address={address}
-        withBalance
-        withExtended
-      />
-    </AddressCard>
-  );
-}
-
-export default translate(
-  styled(Account)`
-    .accounts--Account-buttons {
-      text-align: right;
-
-      .others {
-        margin-right: 0.125rem;
-        margin-top: 0.25rem;
-      }
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/app-accounts/src/Banner.tsx b/pioneer/packages/old-apps/app-accounts/src/Banner.tsx
deleted file mode 100644
index d2dad1eeb9..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/Banner.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-
-import { detect } from 'detect-browser';
-import React from 'react';
-import styled from 'styled-components';
-import { isWeb3Injected } from '@polkadot/extension-dapp';
-import { stringUpperFirst } from '@polkadot/util';
-
-import translate from './translate';
-
-// it would have been really good to import this from detect, however... not exported
-type Browser = 'chrome' | 'firefox';
-
-interface Extension {
-  desc: string;
-  link: string;
-  name: string;
-}
-
-interface Props extends I18nProps {
-  className?: string;
-}
-
-const available: Record<Browser, Extension[]> = {
-  chrome: [],
-  firefox: []
-};
-
-[
-  {
-    browsers: {
-      chrome: 'https://chrome.google.com/webstore/detail/polkadot%7Bjs%7D-extension/mopnmbcafieddcagagdcbnhejhlodfdd',
-      firefox: 'https://addons.mozilla.org/en-US/firefox/addon/polkadot-js-extension/'
-    },
-    desc: 'Basic account injection and signer',
-    name: 'polkadot-js extension'
-  }
-].forEach(({ browsers, desc, name }): void => {
-  Object.entries(browsers).forEach(([browser, link]): void => {
-    available[browser as Browser].push({ link, desc, name });
-  });
-});
-
-const browserInfo = detect();
-const browserName: Browser | null = (browserInfo && (browserInfo.name as Browser)) || null;
-const isSupported = browserName && Object.keys(available).includes(browserName);
-
-function Banner ({ className, t }: Props): React.ReactElement<Props> | null {
-  if (isWeb3Injected || !isSupported || !browserName) {
-    return null;
-  }
-
-  return (
-    <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 -', {
-            replace: {
-              yourBrowser: stringUpperFirst(browserName)
-            }
-          })}</p>
-          <ul>{available[browserName].map(({ desc, name, link }): React.ReactNode => (
-            <li key={name}>
-              <a
-                href={link}
-                rel='noopener noreferrer'
-                target='_blank'
-              >
-                {name}
-              </a> ({desc})
-            </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
-            href='https://github.com/polkadot-js/extension'
-            rel='noopener noreferrer'
-            target='_blank'
-          >{t('Learn more...')}</a></p>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default translate(
-  styled(Banner)`
-    padding: 0 0.5rem 0.5rem;
-
-    .box {
-      background: #fff6e5;
-      border-left: 0.25rem solid darkorange;
-      border-radius: 0 0.25rem 0.25rem 0;
-      box-sizing: border-box;
-      padding: 1rem 1.5rem;
-
-      .info {
-        max-width: 50rem;
-      }
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/app-accounts/src/MemoForm.tsx b/pioneer/packages/old-apps/app-accounts/src/MemoForm.tsx
deleted file mode 100644
index 7775641cf9..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/MemoForm.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import { Labelled } from '@polkadot/react-components/index';
-
-import MemoEdit from '@polkadot/joy-utils/memo/MemoEdit';
-import TxButton from '@polkadot/joy-utils/TxButton';
-import { withMyAccount, MyAccountProps } from '@polkadot/joy-utils/MyAccount';
-import { Text } from '@polkadot/types';
-
-type Props = MyAccountProps & {};
-
-type State = {
-  memo: string;
-  modified: boolean;
-};
-
-class Component extends React.PureComponent<Props, State> {
-  state: State = {
-    memo: '',
-    modified: false
-  };
-
-  render () {
-    const { myAddress } = this.props;
-    const { memo, modified } = this.state;
-    return (
-      <>
-        <MemoEdit accountId={myAddress || ''} onChange={this.onChangeMemo} onReset={this.onResetMemo} />
-        <Labelled style={{ marginTop: '.5rem' }}>
-          <TxButton
-            size='large'
-            isDisabled={!modified}
-            label='Update memo'
-            params={[new Text(memo)]}
-            tx='memo.updateMemo'
-          />
-        </Labelled>
-      </>
-    );
-  }
-
-  onChangeMemo = (memo: string): void => {
-    this.setState({ memo, modified: true });
-  }
-
-  onResetMemo = (memo: string): void => {
-    this.setState({ memo, modified: false });
-  }
-}
-
-export default withMyAccount(Component);
diff --git a/pioneer/packages/old-apps/app-accounts/src/Overview.tsx b/pioneer/packages/old-apps/app-accounts/src/Overview.tsx
deleted file mode 100644
index 4db207cd67..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/Overview.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-import { ComponentProps } from './types';
-
-import React, { useState } from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import { Button as SUIButton } from 'semantic-ui-react';
-import keyring from '@polkadot/ui-keyring';
-import accountObservable from '@polkadot/ui-keyring/observable/accounts';
-import { getLedger, isLedger, withMulti, withObservable } from '@polkadot/react-api';
-import { Button, CardGrid } from '@polkadot/react-components';
-
-import CreateModal from './modals/Create';
-import ImportModal from './modals/Import';
-import Account from './Account';
-import translate from './translate';
-
-interface Props extends ComponentProps, I18nProps {
-  accounts?: SubjectInfo[];
-}
-
-// query the ledger for the address, adding it to the keyring
-async function queryLedger (): Promise<void> {
-  const ledger = getLedger();
-
-  try {
-    const { address } = await ledger.getAddress();
-
-    keyring.addHardware(address, 'ledger', { name: 'ledger' });
-  } catch (error) {
-    console.error(error);
-  }
-}
-
-function Overview ({ accounts, onStatusChange, t }: Props): React.ReactElement<Props> {
-  const { pathname } = useLocation();
-  const [isCreateOpen, setIsCreateOpen] = useState(false);
-  const [isImportOpen, setIsImportOpen] = useState(false);
-  const emptyScreen = !(isCreateOpen || isImportOpen) && accounts && (Object.keys(accounts).length === 0);
-
-  const _toggleCreate = (): void => setIsCreateOpen(!isCreateOpen);
-  const _toggleImport = (): void => setIsImportOpen(!isImportOpen);
-
-  return (
-    <CardGrid
-      topButtons={
-        !emptyScreen && <SUIButton as={Link} to={`${pathname}/vanity`}>Generate a vanity address</SUIButton>
-      }
-      buttons={
-        <Button.Group>
-          <Button
-            icon='add'
-            isPrimary
-            label={t('Add account')}
-            onClick={_toggleCreate}
-          />
-          <Button.Or />
-          <Button
-            icon='sync'
-            isPrimary
-            label={t('Restore JSON')}
-            onClick={_toggleImport}
-          />
-          {isLedger() && (
-            <>
-              <Button.Or />
-              <Button
-                icon='question'
-                isPrimary
-                label={t('Query Ledger')}
-                onClick={queryLedger}
-              />
-            </>
-          )}
-        </Button.Group>
-      }
-      isEmpty={emptyScreen}
-      emptyText={t('No account yet?')}
-    >
-      {isCreateOpen && (
-        <CreateModal
-          onClose={_toggleCreate}
-          onStatusChange={onStatusChange}
-        />
-      )}
-      {isImportOpen && (
-        <ImportModal
-          onClose={_toggleImport}
-          onStatusChange={onStatusChange}
-        />
-      )}
-      {accounts && Object.keys(accounts).map((address): React.ReactNode => (
-        <Account
-          address={address}
-          key={address}
-        />
-      ))}
-    </CardGrid>
-  );
-}
-
-export default withMulti(
-  Overview,
-  translate,
-  withObservable(accountObservable.subject, { propName: 'accounts' })
-);
diff --git a/pioneer/packages/old-apps/app-accounts/src/Vanity/Match.tsx b/pioneer/packages/old-apps/app-accounts/src/Vanity/Match.tsx
deleted file mode 100644
index 3c7510715f..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/Vanity/Match.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps } from '@polkadot/react-components/types';
-
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { Button, IdentityIcon } from '@polkadot/react-components';
-import { u8aToHex } from '@polkadot/util';
-
-interface Props extends BareProps {
-  address: string;
-  count: number;
-  offset: number;
-  onCreateToggle: (seed: string) => void;
-  onRemove: (address: string) => void;
-  seed: Uint8Array;
-}
-
-function Match ({ address, className, count, offset, onCreateToggle, onRemove, seed }: Props): React.ReactElement<Props> {
-  const [hexSeed, setHexSeed] = useState('');
-  const _onCreate = (): void => onCreateToggle(hexSeed);
-  const _onRemove = (): void => onRemove(address);
-
-  useEffect((): void => {
-    setHexSeed(u8aToHex(seed));
-  }, [seed]);
-
-  return (
-    <div className={className}>
-      <div className='vanity--Match-item'>
-        <IdentityIcon
-          className='vanity--Match-icon'
-          size={48}
-          value={address}
-        />
-        <div className='vanity--Match-data'>
-          <div className='vanity--Match-addr'>
-            <span className='no'>{address.slice(0, offset)}</span><span className='yes'>{address.slice(offset, count + offset)}</span><span className='no'>{address.slice(count + offset)}</span>
-          </div>
-          <div className='vanity--Match-seed'>
-            {hexSeed}
-          </div>
-        </div>
-        <div className='vanity--Match-buttons'>
-          <Button
-            icon='plus'
-            isPrimary
-            onClick={_onCreate}
-            size='tiny'
-          />
-          <Button
-            icon='close'
-            isNegative
-            onClick={_onRemove}
-            size='tiny'
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default styled(Match)`
-  text-align: center;
-
-  &:hover {
-    background: #f9f9f9;
-  }
-
-  .vanity--Match-addr {
-    font-size: 1.5rem;
-    padding: 0 1rem;
-
-    .no {
-      color: inherit;
-    }
-
-    .yes {
-      color: red;
-    }
-  }
-
-  .vanity--Match-buttons,
-  .vanity--Match-data,
-  .vanity--Match-icon {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  .vanity--Match-item {
-    display: inline-block;
-    font-family: monospace;
-    margin: 0 auto;
-    padding: 0.5em;
-    position: relative;
-  }
-
-  .vanity--Match-seed {
-    opacity: 0.45;
-    padding: 0 1rem;
-  }
-`;
diff --git a/pioneer/packages/old-apps/app-accounts/src/Vanity/index.tsx b/pioneer/packages/old-apps/app-accounts/src/Vanity/index.tsx
deleted file mode 100644
index 550651d91f..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/Vanity/index.tsx
+++ /dev/null
@@ -1,337 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { KeypairType } from '@polkadot/util-crypto/types';
-import { GeneratorMatches, GeneratorMatch, GeneratorResult } from '../vanitygen/types';
-import { ComponentProps } from '../types';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Button, Dropdown, Input, TxComponent } from '@polkadot/react-components';
-import uiSettings from '@polkadot/ui-settings';
-
-import CreateModal from '../modals/Create';
-import generator from '../vanitygen';
-import matchRegex from '../vanitygen/regex';
-import generatorSort from '../vanitygen/sort';
-import Match from './Match';
-import translate from './translate';
-import Section from '@polkadot/joy-utils/Section';
-
-interface Props extends ComponentProps, I18nProps {}
-
-interface State {
-  createSeed: string | null;
-  elapsed: number;
-  isMatchValid: boolean;
-  isRunning: boolean;
-  keyCount: 0;
-  keyTime: 0;
-  match: string;
-  matches: GeneratorMatches;
-  startAt: number;
-  type: KeypairType;
-  withCase: boolean;
-  withHex: boolean;
-}
-
-const DEFAULT_MATCH = 'Some';
-const BOOL_OPTIONS = [
-  { text: 'No', value: false },
-  { text: 'Yes', value: true }
-];
-
-const SectionContentWrapper = styled.div`
-  margin-left: -2rem;
-`;
-
-class VanityApp extends TxComponent<Props, State> {
-  private results: GeneratorResult[] = [];
-
-  public state: State = {
-    createSeed: null,
-    elapsed: 0,
-    isMatchValid: true,
-    isRunning: false,
-    keyCount: 0,
-    keyTime: 0,
-    match: DEFAULT_MATCH,
-    matches: [],
-    startAt: 0,
-    type: 'ed25519',
-    withCase: true,
-    withHex: true
-  };
-
-  private _isActive = false;
-
-  public componentWillUnmount (): void {
-    this._isActive = false;
-  }
-
-  public render (): React.ReactNode {
-    const { className, onStatusChange } = this.props;
-    const { createSeed, type } = this.state;
-
-    return (
-      <div className={className}>
-        <Section title="Generate a vanity address">
-          <SectionContentWrapper>
-            {this.renderOptions()}
-            {this.renderButtons()}
-            {this.renderStats()}
-            {this.renderMatches()}
-            {createSeed && (
-              <CreateModal
-                onClose={this.closeCreate}
-                onStatusChange={onStatusChange}
-                seed={createSeed}
-                type={type}
-              />
-            )}
-          </SectionContentWrapper>
-        </Section>
-      </div>
-    );
-  }
-
-  private renderButtons (): React.ReactNode {
-    const { t } = this.props;
-    const { isMatchValid, isRunning } = this.state;
-
-    return (
-      <Button.Group>
-        <Button
-          icon={
-            isRunning
-              ? 'stop'
-              : 'sign-in'
-          }
-          isDisabled={!isMatchValid}
-          isPrimary={!isRunning}
-          onClick={this.toggleStart}
-          label={
-            isRunning
-              ? t('Stop generation')
-              : t('Start generation')
-          }
-          ref={this.button}
-        />
-      </Button.Group>
-    );
-  }
-
-  private renderMatches (): React.ReactNode {
-    const { matches } = this.state;
-
-    return (
-      <div className='vanity--App-matches'>
-        {matches.map((match): React.ReactNode => (
-          <Match
-            {...match}
-            key={match.address}
-            onCreateToggle={this.onCreateToggle}
-            onRemove={this.onRemove}
-          />
-        ))}
-      </div>
-    );
-  }
-
-  private renderOptions (): React.ReactNode {
-    const { t } = this.props;
-    const { isMatchValid, isRunning, match, type, withCase } = this.state;
-
-    return (
-      <>
-        <div className='ui--row'>
-          <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.')}
-            isDisabled={isRunning}
-            isError={!isMatchValid}
-            label={t('Search for')}
-            onChange={this.onChangeMatch}
-            onEnter={this.submit}
-            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"...')}
-            isDisabled={isRunning}
-            label={t('case sensitive')}
-            options={BOOL_OPTIONS}
-            onChange={this.onChangeCase}
-            value={withCase}
-          />
-        </div>
-        <div className='ui--row'>
-          <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')}
-            onChange={this.onChangeType}
-            options={uiSettings.availableCryptos}
-          />
-        </div>
-      </>
-    );
-  }
-
-  private renderStats (): React.ReactNode {
-    const { t } = this.props;
-    const { elapsed, keyCount } = this.state;
-
-    if (!keyCount) {
-      return null;
-    }
-
-    const secs = elapsed / 1000;
-
-    return (
-      <div className='vanity--App-stats'>
-        {t('Evaluated {{count}} keys in {{elapsed}}s ({{avg}} keys/s)', {
-          replace: {
-            avg: (keyCount / secs).toFixed(3),
-            count: keyCount,
-            elapsed: secs.toFixed(2)
-          }
-        })}
-      </div>
-    );
-  }
-
-  private checkMatches (): void {
-    const results = this.results;
-
-    this.results = [];
-
-    if (results.length === 0 || !this._isActive) {
-      return;
-    }
-
-    this.setState(
-      ({ keyCount, keyTime, matches, startAt }: State): Pick<State, never> => {
-        let newKeyCount = keyCount;
-        let newKeyTime = keyTime;
-        const newMatches = results
-          .reduce((result, { elapsed, found }): GeneratorMatch[] => {
-            newKeyCount += found.length;
-            newKeyTime += elapsed;
-
-            return result.concat(found);
-          }, matches)
-          .sort(generatorSort)
-          .slice(0, 25);
-        const elapsed = Date.now() - startAt;
-
-        return {
-          elapsed,
-          matches: newMatches,
-          keyCount: newKeyCount,
-          keyTime: newKeyTime
-        };
-      }
-    );
-  }
-
-  private executeGeneration = (): void => {
-    if (!this.state.isRunning) {
-      this.checkMatches();
-
-      return;
-    }
-
-    setTimeout((): void => {
-      if (this._isActive) {
-        if (this.results.length === 25) {
-          this.checkMatches();
-        }
-
-        const { match, type, withCase, withHex } = this.state;
-
-        this.results.push(
-          generator({
-            match,
-            runs: 10,
-            type,
-            withCase,
-            withHex
-          })
-        );
-
-        this.executeGeneration();
-      }
-    }, 0);
-  }
-
-  private onCreateToggle = (createSeed: string): void => {
-    this.setState({ createSeed });
-  }
-
-  private onChangeCase = (withCase: boolean): void => {
-    this.setState({ withCase });
-  }
-
-  private onChangeMatch = (match: string): void => {
-    this.setState({
-      isMatchValid:
-        matchRegex.test(match) &&
-        (match.length !== 0) &&
-        (match.length < 31),
-      match
-    });
-  }
-
-  private onChangeType = (type: KeypairType): void => {
-    this.setState({ type });
-  }
-
-  private onRemove = (address: string): void => {
-    this.setState(
-      ({ matches }: State): Pick<State, never> => ({
-        matches: matches.filter((item): boolean =>
-          item.address !== address
-        )
-      })
-    );
-  }
-
-  private toggleStart = (): void => {
-    this.setState(
-      ({ isRunning, keyCount, keyTime, startAt }: State): Pick<State, never> => {
-        this._isActive = !isRunning;
-
-        return {
-          isRunning: this._isActive,
-          keyCount: this._isActive ? 0 : keyCount,
-          keyTime: this._isActive ? 0 : keyTime,
-          startAt: this._isActive ? Date.now() : startAt
-        };
-      },
-      this.executeGeneration
-    );
-  }
-
-  private closeCreate = (): void => {
-    this.setState({ createSeed: null });
-  }
-}
-
-export default translate(
-  styled(VanityApp)`
-    .vanity--App-matches {
-      padding: 1em 0;
-    }
-
-    .vanity--App-stats {
-      padding: 1em 0 0 0;
-      opacity: 0.45;
-      text-align: center;
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/app-accounts/src/Vanity/translate.ts b/pioneer/packages/old-apps/app-accounts/src/Vanity/translate.ts
deleted file mode 100644
index 196d037c1e..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/Vanity/translate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { withTranslation } from 'react-i18next';
-
-export default withTranslation(['app-accounts']);
diff --git a/pioneer/packages/old-apps/app-accounts/src/bipWorker.ts b/pioneer/packages/old-apps/app-accounts/src/bipWorker.ts
deleted file mode 100644
index a4bf5c1ac0..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/bipWorker.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { cryptoWaitReady, mnemonicGenerate, mnemonicToMiniSecret, naclKeypairFromSeed, schnorrkelKeypairFromSeed } from '@polkadot/util-crypto';
-
-const ctx: Worker = self as unknown as Worker;
-
-cryptoWaitReady().catch((): void => {
-  // ignore
-});
-
-ctx.onmessage = async ({ data: { pairType } }): Promise<void> => {
-  await cryptoWaitReady();
-
-  const seed = mnemonicGenerate();
-  const miniSecret = mnemonicToMiniSecret(seed);
-  const { publicKey } = pairType === 'sr25519'
-    ? schnorrkelKeypairFromSeed(miniSecret)
-    : naclKeypairFromSeed(miniSecret);
-
-  ctx.postMessage({
-    publicKey,
-    seed
-  });
-};
diff --git a/pioneer/packages/old-apps/app-accounts/src/index.tsx b/pioneer/packages/old-apps/app-accounts/src/index.tsx
deleted file mode 100644
index 24edfa527d..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
-import { ComponentProps, LocationProps } from './types';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-
-import React, { useEffect, useState } from 'react';
-import { Route, Switch } from 'react-router';
-import accountObservable from '@polkadot/ui-keyring/observable/accounts';
-import { HelpOverlay, Tabs } from '@polkadot/react-components';
-import { withMulti, withObservable } from '@polkadot/react-api';
-
-import basicMd from './md/basic.md';
-import Overview from './Overview';
-import translate from './translate';
-import Vanity from './Vanity';
-
-import MemoForm from './MemoForm';
-
-interface Props extends AppProps, I18nProps {
-  allAccounts?: SubjectInfo;
-  location: any;
-}
-
-function AccountsApp ({ allAccounts = {}, basePath, location, onStatusChange, t }: Props): React.ReactElement<Props> {
-  const [hidden, setHidden] = useState<string[]>(['vanity']);
-
-  useEffect((): void => {
-    setHidden(
-      Object.keys(allAccounts).length !== 0
-        ? []
-        : ['vanity']
-    );
-  }, [allAccounts]);
-
-  const _renderComponent = (Component: React.ComponentType<ComponentProps>): (props: LocationProps) => React.ReactNode => {
-    // eslint-disable-next-line react/display-name
-    return ({ match }: LocationProps): React.ReactNode => {
-      return (
-        <Component
-          basePath={basePath}
-          location={location}
-          match={match}
-          onStatusChange={onStatusChange}
-        />
-      );
-    };
-  };
-
-  return (
-    <main className='accounts--App'>
-      <HelpOverlay md={basicMd} />
-      <header>
-        <Tabs
-          basePath={basePath}
-          hidden={hidden}
-          items={[
-            {
-              isRoot: true,
-              name: 'overview',
-              text: t('My accounts')
-            },
-            {
-              name: 'memo',
-              text: t('My memo')
-            }
-          ]}
-        />
-      </header>
-      <Switch>
-        <Route path={`${basePath}/vanity`} render={_renderComponent(Vanity)} />
-        <Route path={`${basePath}/memo`} component={MemoForm} />
-        <Route render={_renderComponent(Overview)} />
-      </Switch>
-    </main>
-  );
-}
-
-export default withMulti(
-  AccountsApp,
-  translate,
-  withObservable(accountObservable.subject, { propName: 'allAccounts' })
-);
diff --git a/pioneer/packages/old-apps/app-accounts/src/md/basic.md b/pioneer/packages/old-apps/app-accounts/src/md/basic.md
deleted file mode 100644
index 4386aad6d7..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/md/basic.md
+++ /dev/null
@@ -1,44 +0,0 @@
-# Account
-
-An account is identified by its public address on the network. It is totally fine to give away this address, this is also the only information needed to receive funds. The network will **not** know about the name you give to this account in this application.
-
-# Balances
-
-The balances for each account is broken down into a number of areas, giving an overview of the totals, transferable and bonded funds as well as the funds currently being unbonded or redeemable. These are -
-
-- **total**: The overall amount of funds in the account, this includes the vested balance, available for transfer and locked.
-- **available**: The funds that can be transferred or bonded, i.e. the funds that are available for any transaction.
-- **bonded**: The funds bonded for validating or nominating. They are locked and cannot be transferred, although it can be unlocked for future actions.
-- **redeemable**: The funds that can get redeemed, e.g made available for withdrawal, by clicking on the "lock" icon.
-- **unbonding**: The funds that are being unbonded. The funds will be redeemable after the bonding period has passed. These funds can still be slashed. The information icon tells the amount of blocks left before the funds can be redeemed.
-
-# Security
-
-The public address is generated from a private key, itself generated from a seed or a mnemonic phrase. The seed or the mnemonic phrase should **never be shared with anybody** as they give access to your funds. It must be stored securely.
-The password needed to create an account is used to encrypt your private key. You must choose a strong and unique password.
-This password is also used to encrypt the private key in the backup file downloaded upon account creation. Thanks to this file together with your account password, you can recover your account.
-
-# Account recovery
-
-You can recover an account from its:
-- seed or mnemonic:
-  Click on the "Add account" button, type your seed or mnemonic in the associated field.
-
-- backup file (also called JSON keystore file) and the account's password:
-  Click on "Restore JSON" button. Upload your backup file and type in the password associated.
-
-# Minimum allowed balance
-
-Accounts with a balance lower than the minimal amount, 100 milliUnits (miliDOTs for Polkadot) as of writing are considered as nonexistent for the network. If an account's balance ever drops below this amount, it is removed from the network. In this application, it will still be visible, but with a balance of 0.
-
-For a fund transfer to a **new account** (read an account with a balance of 0), if the amount transferred is less than the minimum allowed balance, then the transfer will "succeed" but the destination account will not be created (read its balance will remain 0); this essentially burns the transfer balance from the sender, because the receiver's balance never exceed the minimum allowed balance.
-
-If the receiver already exists (read it has a balance greater than 0), it is perfectly possible to transfer very low amounts.
-
-# Cryptography
-
-Substrate and Polkadot use Schnorrkel/Ristretto x25519 ("sr25519") as its key derivation and signing algorithm.
-
-Sr25519 is based on the same underlying Curve25519 as its EdDSA counterpart, Ed25519. However, it uses Schnorr signatures instead of the EdDSA scheme. Schnorr signatures bring some noticeable benefits over the ECDSA/EdDSA schemes. For one, it is more efficient and still retains the same feature set and security assumptions. Additionally, it allows for native multisignature through signature aggregation.
-
-If you wish to validate, the `session` account needs to use "ed25519" cryptography.
diff --git a/pioneer/packages/old-apps/app-accounts/src/modals/Backup.tsx b/pioneer/packages/old-apps/app-accounts/src/modals/Backup.tsx
deleted file mode 100644
index 2df60c3ae2..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/modals/Backup.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-
-import FileSaver from 'file-saver';
-import React from 'react';
-import { AddressRow, Button, Modal, Password, TxComponent } from '@polkadot/react-components';
-import { ActionStatus } from '@polkadot/react-components/Status/types';
-import keyring from '@polkadot/ui-keyring';
-import { isPasswordValid } from '@polkadot/joy-utils/accounts';
-
-import translate from '../translate';
-
-interface Props extends I18nProps {
-  onClose: () => void;
-  address: string;
-}
-
-interface State {
-  isPassValid: boolean;
-  password: string;
-}
-
-class Backup extends TxComponent<Props, State> {
-  public state: State = {
-    isPassValid: true,
-    password: ''
-  };
-
-  public render (): React.ReactNode {
-    const { t } = this.props;
-
-    return (
-      <Modal
-        className='app--accounts-Modal'
-        dimmer='inverted'
-        open
-      >
-        <Modal.Header>{t('Backup account')}</Modal.Header>
-        {this.renderContent()}
-        {this.renderButtons()}
-      </Modal>
-    );
-  }
-
-  private renderButtons (): React.ReactNode {
-    const { onClose, t } = this.props;
-    const { isPassValid } = this.state;
-
-    return (
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
-          <Button.Or />
-          <Button
-            icon='download'
-            isDisabled={!isPassValid}
-            label={t('Download')}
-            onClick={this.doBackup}
-            ref={this.button}
-          />
-        </Button.Group>
-      </Modal.Actions>
-    );
-  }
-
-  private renderContent (): React.ReactNode {
-    const { address, t } = this.props;
-    const { isPassValid, password } = this.state;
-
-    return (
-      <Modal.Content>
-        <AddressRow
-          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>
-          <div>
-            <Password
-              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.')}
-              isError={!isPassValid}
-              label={t('password')}
-              onChange={this.onChangePass}
-              onEnter={this.submit}
-              tabIndex={0}
-              value={password}
-            />
-          </div>
-        </AddressRow>
-      </Modal.Content>
-    );
-  }
-
-  private doBackup = (): void => {
-    const { onClose, address, t } = this.props;
-    const { password } = this.state;
-
-    if (!address) {
-      return;
-    }
-
-    const status: Partial<ActionStatus> = {
-      action: 'backup'
-    };
-
-    try {
-      const addressKeyring = address && keyring.getPair(address);
-      const json = addressKeyring && keyring.backupAccount(addressKeyring, password);
-      const blob = new Blob([JSON.stringify(json)], { type: 'application/json; charset=utf-8' });
-
-      status.account = address;
-      status.status = blob ? 'success' : 'error';
-      status.message = t('account backed up');
-
-      FileSaver.saveAs(blob, `${address}.json`);
-    } catch (error) {
-      this.setState({ isPassValid: true });
-      console.error(error);
-
-      status.status = 'error';
-      status.message = error.message;
-      return;
-    }
-
-    onClose();
-  }
-
-  private onChangePass = (password: string): void => {
-    this.setState({
-      isPassValid: isPasswordValid(password),
-      password
-    });
-  }
-}
-
-export default translate(Backup);
diff --git a/pioneer/packages/old-apps/app-accounts/src/modals/ChangePass.tsx b/pioneer/packages/old-apps/app-accounts/src/modals/ChangePass.tsx
deleted file mode 100644
index 50f32f3382..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/modals/ChangePass.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import { AddressRow, Button, Modal, Password, TxComponent } from '@polkadot/react-components';
-import { ActionStatus } from '@polkadot/react-components/Status/types';
-import keyring from '@polkadot/ui-keyring';
-import { isPasswordValid } from '@polkadot/joy-utils/accounts';
-
-import translate from '../translate';
-
-interface Props extends I18nProps {
-  address: string;
-  onClose: () => void;
-}
-
-interface State {
-  isNewValid: boolean;
-  isOldValid: boolean;
-  newPass: string;
-  oldPass: string;
-}
-
-class ChangePass extends TxComponent<Props, State> {
-  public state: State = {
-    isNewValid: false,
-    isOldValid: false,
-    newPass: '',
-    oldPass: ''
-  };
-
-  public render (): React.ReactNode {
-    const { t } = this.props;
-
-    return (
-      <Modal
-        className='app--accounts-Modal'
-        dimmer='inverted'
-        open
-      >
-        <Modal.Header>{t('Change account password')}</Modal.Header>
-        {this.renderContent()}
-        {this.renderButtons()}
-      </Modal>
-    );
-  }
-
-  private renderButtons (): React.ReactNode {
-    const { onClose, t } = this.props;
-    const { isNewValid, isOldValid } = this.state;
-
-    return (
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
-          <Button.Or />
-          <Button
-            icon='sign-in'
-            isDisabled={!isNewValid || !isOldValid}
-            isPrimary
-            label={t('Change')}
-            onClick={this.doChange}
-            ref={this.button}
-          />
-        </Button.Group>
-      </Modal.Actions>
-    );
-  }
-
-  private renderContent (): React.ReactNode {
-    const { address, t } = this.props;
-    const { isNewValid, isOldValid, newPass, oldPass } = this.state;
-
-    return (
-      <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>
-          <div>
-            <Password
-              autoFocus
-              help={t('The existing account password as specified when this account was created or when it was last changed.')}
-              isError={!isOldValid}
-              label={t('your current password')}
-              onChange={this.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.')}
-              isError={!isNewValid}
-              label={t('your new password')}
-              onChange={this.onChangeNew}
-              onEnter={this.submit}
-              tabIndex={2}
-              value={newPass}
-            />
-          </div>
-        </AddressRow>
-      </Modal.Content>
-    );
-  }
-
-  private doChange = (): void => {
-    const { address, onClose, t } = this.props;
-    const { newPass, oldPass } = this.state;
-    const status: Partial<ActionStatus> = {
-      action: 'changePassword'
-    };
-
-    try {
-      const account = address && keyring.getPair(address);
-
-      if (!account) {
-        status.message = t(`No keypair found for this address ${address}`);
-
-        return;
-      }
-
-      try {
-        if (!account.isLocked) {
-          account.lock();
-        }
-
-        account.decodePkcs8(oldPass);
-      } catch (error) {
-        this.setState({ isOldValid: false });
-        status.message = error.message;
-
-        return;
-      }
-
-      try {
-        keyring.encryptAccount(account, newPass);
-        status.account = address;
-        status.status = 'success';
-        status.message = t('password changed');
-      } catch (error) {
-        this.setState({ isNewValid: false });
-        status.status = 'error';
-        status.message = error.message;
-
-        return;
-      }
-    } catch (error) {
-      status.message = error.message;
-
-      return;
-    }
-
-    onClose();
-  }
-
-  private onChangeNew = (newPass: string): void => {
-    this.setState({
-      isNewValid: this.validatePass(newPass),
-      newPass
-    });
-  }
-
-  private onChangeOld = (oldPass: string): void => {
-    this.setState({
-      isOldValid: this.validatePass(oldPass),
-      oldPass
-    });
-  }
-
-  private validatePass (password: string): boolean {
-    return isPasswordValid(password);
-  }
-}
-
-export default translate(ChangePass);
diff --git a/pioneer/packages/old-apps/app-accounts/src/modals/Create.tsx b/pioneer/packages/old-apps/app-accounts/src/modals/Create.tsx
deleted file mode 100644
index c8c50f8266..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/modals/Create.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { KeypairType } from '@polkadot/util-crypto/types';
-import { ModalProps } from '../types';
-
-import { useMyAccount } from '@polkadot/joy-utils/MyAccountContext';
-import { generateSeed, updateAddress, createAccount, isPasswordValid, AddressState, SeedType } from '@polkadot/joy-utils/accounts';
-import React, { useContext, useState } from 'react';
-import styled from 'styled-components';
-import { ApiContext } from '@polkadot/react-api';
-import { AddressRow, Button, Dropdown, Input, Modal, Password } from '@polkadot/react-components';
-import uiSettings from '@polkadot/ui-settings';
-
-import translate from '../translate';
-import CreateConfirmation from './CreateConfirmation';
-
-interface Props extends ModalProps, I18nProps {
-  seed?: string;
-  type?: KeypairType;
-}
-
-function Create ({ className, onClose, onStatusChange, seed: propsSeed, t, type: propsType }: Props): React.ReactElement<Props> {
-  const { isDevelopment } = useContext(ApiContext);
-  const [{ address, deriveError, derivePath, isSeedValid, pairType, seed, seedType }, setAddress] = useState<AddressState>(generateSeed(propsSeed, '', propsSeed ? 'raw' : 'bip', propsType));
-  const [isConfirmationOpen, setIsConfirmationOpen] = useState(false);
-  const [{ isNameValid, name }, setName] = useState({ isNameValid: false, name: '' });
-  const [{ isPassValid, password }, setPassword] = useState({ isPassValid: false, password: '' });
-  const isValid = !!address && !deriveError && isNameValid && isPassValid && isSeedValid;
-
-  const _onChangePass = (password: string): void =>
-    setPassword({ isPassValid: isPasswordValid(password), password });
-  const _onChangeDerive = (newDerivePath: string): void =>
-    setAddress(updateAddress(seed, newDerivePath, seedType, pairType));
-  const _onChangeSeed = (newSeed: string): void =>
-    setAddress(updateAddress(newSeed, derivePath, seedType, pairType));
-  const _onChangePairType = (newPairType: KeypairType): void =>
-    setAddress(updateAddress(seed, derivePath, seedType, newPairType));
-  const _selectSeedType = (newSeedType: SeedType): void => {
-    if (newSeedType !== seedType) {
-      setAddress(generateSeed(null, derivePath, newSeedType, pairType));
-    }
-  };
-  const _onChangeName = (name: string): void => setName({ isNameValid: !!name.trim(), name });
-  const _toggleConfirmation = (): void => setIsConfirmationOpen(!isConfirmationOpen);
-  const context = useMyAccount();
-
-  const _onCommit = (): void => {
-    if (!isValid) {
-      return;
-    }
-
-    const status = createAccount(`${seed}${derivePath}`, pairType, name, password, t('created account'));
-    context.set(status.account as string);
-
-    _toggleConfirmation();
-    onStatusChange(status);
-    onClose();
-  };
-
-  return (
-    <Modal
-      className={className}
-      dimmer='inverted'
-      open
-    >
-      <Modal.Header>{t('Add an account via seed')}</Modal.Header>
-      {address && isConfirmationOpen && (
-        <CreateConfirmation
-          address={address}
-          name={name}
-          onCommit={_onCommit}
-          onClose={_toggleConfirmation}
-        />
-      )}
-      <Modal.Content>
-        <AddressRow
-          defaultName={name}
-          noDefaultNameOpacity
-          value={isSeedValid ? address : ''}
-        >
-          <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".')}
-            isError={!isNameValid}
-            label={t('name')}
-            onChange={_onChangeName}
-            onEnter={_onCommit}
-            placeholder={t('new account')}
-            value={name}
-          />
-          <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.')}
-            isAction
-            isError={!isSeedValid}
-            isReadOnly={seedType === 'dev'}
-            label={
-              seedType === 'bip'
-                ? t('mnemonic seed')
-                : seedType === 'dev'
-                  ? t('development seed')
-                  : t('seed (hex or string)')
-            }
-            onChange={_onChangeSeed}
-            onEnter={_onCommit}
-            value={seed}
-          >
-            <Dropdown
-              isButton
-              defaultValue={seedType}
-              onChange={_selectSeedType}
-              options={
-                (
-                  isDevelopment
-                    ? [{ value: 'dev', text: t('Development') }]
-                    : []
-                ).concat(
-                  { value: 'bip', text: t('Mnemonic') },
-                  { value: 'raw', text: t('Raw seed') }
-                )
-              }
-            />
-          </Input>
-          <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).')}
-            isError={!isPassValid}
-            label={t('password')}
-            onChange={_onChangePass}
-            onEnter={_onCommit}
-            value={password}
-          />
-          <details
-            className='accounts--Creator-advanced'
-            open
-          >
-            <summary>{t('Advanced creation options')}</summary>
-            <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')}
-              onChange={_onChangePairType}
-              options={uiSettings.availableCryptos}
-            />
-            <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.')}
-              isError={!!deriveError}
-              label={t('secret derivation path')}
-              onChange={_onChangeDerive}
-              onEnter={_onCommit}
-              placeholder={t('//hard/soft///password')}
-              value={derivePath}
-            />
-            {deriveError && (
-              <article className='error'>{deriveError}</article>
-            )}
-          </details>
-        </AddressRow>
-      </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
-          <Button.Or />
-          <Button
-            icon='plus'
-            isDisabled={!isValid}
-            isPrimary
-            label={t('Save')}
-            onClick={_toggleConfirmation}
-          />
-        </Button.Group>
-      </Modal.Actions>
-    </Modal>
-  );
-}
-
-export default translate(
-  styled(Create)`
-    .accounts--Creator-advanced {
-      margin-top: 1rem;
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/app-accounts/src/modals/CreateConfirmation.tsx b/pioneer/packages/old-apps/app-accounts/src/modals/CreateConfirmation.tsx
deleted file mode 100644
index 5a664a732d..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/modals/CreateConfirmation.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import { AddressRow, Button, Modal } from '@polkadot/react-components';
-
-import translate from '../translate';
-
-interface Props extends I18nProps {
-  address: string;
-  name: string;
-  onClose: () => void;
-  onCommit: () => void;
-}
-
-function CreateConfirmation ({ address, name, onClose, onCommit, t }: Props): React.ReactElement<Props> | null {
-  return (
-    <Modal
-      dimmer='inverted'
-      open
-    >
-      <Modal.Header>
-        {t('Important notice')}
-      </Modal.Header>
-      <Modal.Content>
-        <AddressRow
-          defaultName={name}
-          isInline
-          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>
-        </AddressRow>
-      </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
-          <Button.Or />
-          <Button
-            icon='plus'
-            isPrimary
-            label={t('Create and backup account')}
-            onClick={onCommit}
-          />
-        </Button.Group>
-      </Modal.Actions>
-    </Modal>
-  );
-}
-
-export default translate(CreateConfirmation);
diff --git a/pioneer/packages/old-apps/app-accounts/src/modals/Derive.tsx b/pioneer/packages/old-apps/app-accounts/src/modals/Derive.tsx
deleted file mode 100644
index 57c7424e59..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/modals/Derive.tsx
+++ /dev/null
@@ -1,240 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { KeyringPair } from '@polkadot/keyring/types';
-import { ActionStatus } from '@polkadot/react-components/Status/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { KeypairType } from '@polkadot/util-crypto/types';
-
-import React, { useContext, useEffect, useState } from 'react';
-import { AddressRow, Button, Input, InputAddress, Modal, Password, StatusContext } from '@polkadot/react-components';
-import { useDebounce } from '@polkadot/react-components/hooks';
-import keyring from '@polkadot/ui-keyring';
-import { isPasswordValid, downloadAccount } from '@polkadot/joy-utils/accounts';
-import { keyExtractPath } from '@polkadot/util-crypto';
-
-import { useMyAccount } from '@polkadot/joy-utils/MyAccountContext';
-
-import translate from '../translate';
-
-import CreateConfirmation from './CreateConfirmation';
-
-interface Props extends I18nProps {
-  from: string;
-  onClose: () => void;
-}
-
-interface DerivedAddress {
-  address: string | null;
-  deriveError: string | null;
-}
-
-function deriveValidate (suri: string, pairType: KeypairType): string | null {
-  try {
-    const { path } = keyExtractPath(suri);
-
-    // we don't allow soft for ed25519
-    if (pairType === 'ed25519' && path.some(({ isSoft }): boolean => isSoft)) {
-      return 'Soft derivation paths are not allowed on ed25519';
-    }
-  } catch (error) {
-    return error.message;
-  }
-
-  return null;
-}
-
-function createAccount (source: KeyringPair, suri: string, name: string, password: string, success: string): ActionStatus {
-  // we will fill in all the details below
-  const status = { action: 'create' } as ActionStatus;
-
-  try {
-    const derived = source.derive(suri);
-
-    derived.setMeta({ ...derived.meta, name, tags: [] });
-
-    const result = keyring.addPair(derived, password || '');
-    const { address } = result.pair;
-
-    status.account = address;
-    status.status = 'success';
-    status.message = success;
-
-    downloadAccount(result);
-  } catch (error) {
-    status.status = 'error';
-    status.message = error.message;
-  }
-
-  return status;
-}
-
-function Derive ({ className, from, onClose, t }: Props): React.ReactElement {
-  const { queueAction } = useContext(StatusContext);
-  const [source] = useState(keyring.getPair(from));
-  const [{ address, deriveError }, setDerived] = useState<DerivedAddress>({ address: null, deriveError: null });
-  const [isConfirmationOpen, setIsConfirmationOpen] = useState(false);
-  const [isLocked, setIsLocked] = useState(source.isLocked);
-  const [{ isNameValid, name }, setName] = useState({ isNameValid: false, name: '' });
-  const [{ isPassValid, password }, setPassword] = useState({ isPassValid: true, password: '' });
-  const [rootPass, setRootPass] = useState('');
-  const [suri, setSuri] = useState('');
-  const debouncedSuri = useDebounce(suri);
-  const isValid = !!address && !deriveError && isNameValid && isPassValid;
-  const context = useMyAccount();
-
-  useEffect((): void => {
-    setIsLocked(source.isLocked);
-  }, [source]);
-
-  useEffect((): void => {
-    setDerived((): DerivedAddress => {
-      let address: string | null = null;
-      const deriveError = deriveValidate(debouncedSuri, source.type);
-
-      if (!deriveError) {
-        const result = source.derive(suri);
-
-        address = result.address;
-      }
-
-      return { address, deriveError };
-    });
-  }, [debouncedSuri]);
-
-  const _onChangeName = (name: string): void => setName({ isNameValid: !!name.trim(), name });
-  const _onChangePass = (password: string): void => setPassword({ isPassValid: isPasswordValid(password), password });
-  const _toggleConfirmation = (): void => setIsConfirmationOpen(!isConfirmationOpen);
-  const _onUnlock = (): void => {
-    try {
-      source.decodePkcs8(rootPass);
-    } catch (error) {
-      console.error(error);
-    }
-
-    setIsLocked(source.isLocked);
-  };
-
-  const _onCommit = (): void => {
-    if (!isValid) {
-      return;
-    }
-
-    const status = createAccount(source, suri, name, password, t('created account'));
-    context.set(status.account as string);
-
-    _toggleConfirmation();
-    queueAction(status);
-    onClose();
-  };
-
-  const sourceStatic = (
-    <InputAddress
-      help={t('The selected account to perform the derivation on.')}
-      isDisabled
-      label={t('derive root account')}
-      value={from}
-    />
-  );
-
-  return (
-    <Modal
-      className={className}
-      dimmer='inverted'
-      open
-    >
-      <Modal.Header>{t('Derive account from pair')}</Modal.Header>
-      {address && isConfirmationOpen && (
-        <CreateConfirmation
-          address={address}
-          name={name}
-          onCommit={_onCommit}
-          onClose={_toggleConfirmation}
-        />
-      )}
-      <Modal.Content>
-        {isLocked && (
-          <>
-            {sourceStatic}
-            <Password
-              autoFocus
-              help={t('The password to unlock the selected account.')}
-              label={t('password')}
-              onChange={setRootPass}
-              value={rootPass}
-            />
-          </>
-        )}
-        {!isLocked && (
-          <AddressRow
-            defaultName={name}
-            noDefaultNameOpacity
-            value={deriveError ? '' : address}
-          >
-            {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')}
-              onChange={setSuri}
-              placeholder={t('//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".')}
-              isError={!isNameValid}
-              label={t('name')}
-              onChange={_onChangeName}
-              onEnter={_onCommit}
-              placeholder={t('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).')}
-              isError={!isPassValid}
-              label={t('password')}
-              onChange={_onChangePass}
-              onEnter={_onCommit}
-              value={password}
-            />
-          </AddressRow>
-        )}
-      </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
-          <Button.Or />
-          {isLocked
-            ? (
-              <Button
-                icon='lock'
-                isDisabled={!rootPass}
-                isPrimary
-                label={t('Unlock')}
-                onClick={_onUnlock}
-              />
-            )
-            : (
-              <Button
-                icon='plus'
-                isDisabled={!isValid}
-                isPrimary
-                label={t('Save')}
-                onClick={_toggleConfirmation}
-              />
-            )
-          }
-        </Button.Group>
-      </Modal.Actions>
-    </Modal>
-  );
-}
-
-export default translate(Derive);
diff --git a/pioneer/packages/old-apps/app-accounts/src/modals/Import.tsx b/pioneer/packages/old-apps/app-accounts/src/modals/Import.tsx
deleted file mode 100644
index 384bfcc61e..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/modals/Import.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { KeyringPair$Json } from '@polkadot/keyring/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { ActionStatus } from '@polkadot/react-components/Status/types';
-import { ModalProps } from '../types';
-
-import React from 'react';
-import { MyAccountContext } from '@polkadot/joy-utils/MyAccountContext';
-import { isPasswordValid } from '@polkadot/joy-utils/accounts';
-import { AddressRow, Button, InputAddress, InputFile, Modal, Password, TxComponent } from '@polkadot/react-components';
-import { isHex, isObject, u8aToString } from '@polkadot/util';
-import keyring from '@polkadot/ui-keyring';
-
-import translate from '../translate';
-
-interface Props extends ModalProps, I18nProps {}
-
-interface State {
-  address: string | null;
-  isFileValid: boolean;
-  isPassValid: boolean;
-  json: KeyringPair$Json | null;
-  password: string;
-}
-
-class Import extends TxComponent<Props, State> {
-  static contextType = MyAccountContext;
-  context!: React.ContextType<typeof MyAccountContext>;
-
-  public state: State = {
-    address: null,
-    isFileValid: false,
-    isPassValid: true,
-    json: null,
-    password: ''
-  };
-
-  public render (): React.ReactNode {
-    const { onClose, t } = this.props;
-    const { isFileValid, isPassValid } = this.state;
-
-    return (
-      <Modal
-        dimmer='inverted'
-        open
-      >
-        <Modal.Header>{t('Add via backup file')}</Modal.Header>
-        {this.renderInput()}
-        <Modal.Actions>
-          <Button.Group>
-            <Button
-              icon='cancel'
-              isNegative
-              label={t('Cancel')}
-              onClick={onClose}
-            />
-            <Button.Or />
-            <Button
-              icon='sync'
-              isDisabled={!isFileValid || !isPassValid}
-              isPrimary
-              onClick={this.onSave}
-              label={t('Restore')}
-              ref={this.button}
-            />
-          </Button.Group>
-        </Modal.Actions>
-      </Modal>
-    );
-  }
-
-  private renderInput (): React.ReactNode {
-    const { t } = this.props;
-    const { address, isFileValid, isPassValid, json, password } = this.state;
-    const acceptedFormats = ['application/json', 'text/plain'].join(', ');
-
-    return (
-      <Modal.Content>
-        <AddressRow
-          defaultName={isFileValid && json ? json.meta.name : null}
-          noDefaultNameOpacity
-          value={isFileValid && address ? address : null}
-        >
-          <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.')}
-            isError={!isFileValid}
-            label={t('backup file')}
-            onChange={this.onChangeFile}
-            withLabel
-          />
-          <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.')}
-            isError={!isPassValid}
-            label={t('password')}
-            onChange={this.onChangePass}
-            onEnter={this.submit}
-            value={password}
-          />
-        </AddressRow>
-      </Modal.Content>
-    );
-  }
-
-  private onChangeFile = (file: Uint8Array): void => {
-    try {
-      const json = JSON.parse(u8aToString(file));
-      const publicKey = keyring.decodeAddress(json.address, true);
-      const address = keyring.encodeAddress(publicKey);
-      const isFileValid = publicKey.length === 32 && isHex(json.encoded) && isObject(json.meta) && (
-        Array.isArray(json.encoding.content)
-          ? json.encoding.content[0] === 'pkcs8'
-          : json.encoding.content === 'pkcs8'
-      );
-
-      this.setState({
-        address,
-        isFileValid,
-        json
-      });
-    } catch (error) {
-      this.setState({
-        address: null,
-        isFileValid: false,
-        json: null
-      });
-      console.error(error);
-    }
-  }
-
-  private onChangePass = (password: string): void => {
-    this.setState({
-      isPassValid: isPasswordValid(password),
-      password
-    });
-  }
-
-  private onSave = (): void => {
-    const { onClose, onStatusChange, t } = this.props;
-    const { json, password } = this.state;
-
-    if (!json) {
-      return;
-    }
-
-    const status: Partial<ActionStatus> = { action: 'restore' };
-
-    try {
-      const pair = keyring.restoreAccount(json, password);
-      const { address } = pair;
-
-      status.status = pair ? 'success' : 'error';
-      status.account = address;
-      status.message = t('account restored');
-
-      InputAddress.setLastValue('account', address);
-      this.context.set(address);
-    } catch (error) {
-      this.setState({ isPassValid: true });
-
-      status.status = 'error';
-      status.message = error.message;
-      console.error(error);
-    }
-
-    onStatusChange(status as ActionStatus);
-
-    if (status.status !== 'error') {
-      onClose();
-    }
-  }
-}
-
-export default translate(Import);
diff --git a/pioneer/packages/old-apps/app-accounts/src/modals/Qr.tsx b/pioneer/packages/old-apps/app-accounts/src/modals/Qr.tsx
deleted file mode 100644
index f8a2991c83..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/modals/Qr.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { ModalProps } from '../types';
-
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { AddressRow, Button, Input, InputAddress, Modal } from '@polkadot/react-components';
-import { QrScanAddress } from '@polkadot/react-qr';
-import keyring from '@polkadot/ui-keyring';
-
-import { useMyAccount } from '@polkadot/joy-utils/MyAccountContext';
-
-import translate from '../translate';
-
-interface Scanned {
-  address: string;
-  genesisHash: string;
-}
-
-interface Props extends I18nProps, ModalProps {
-  className?: string;
-}
-
-function QrModal ({ className, onClose, onStatusChange, t }: Props): React.ReactElement<Props> {
-  const [{ isNameValid, name }, setName] = useState({ isNameValid: false, name: '' });
-  const [scanned, setScanned] = useState<Scanned | null>(null);
-  const context = useMyAccount();
-
-  const _onNameChange = (name: string): void => setName({ isNameValid: !!name.trim(), name });
-
-  const _onSave = (): void => {
-    if (!scanned || !isNameValid) {
-      return;
-    }
-
-    const { address, genesisHash } = scanned;
-
-    keyring.addExternal(address, { genesisHash, name: name.trim() });
-    InputAddress.setLastValue('account', address);
-    context.set(address);
-
-    onStatusChange({
-      account: address,
-      action: 'create',
-      message: t('created account'),
-      status: 'success'
-    });
-    onClose();
-  };
-
-  return (
-    <Modal
-      className={className}
-      dimmer='inverted'
-      open
-    >
-      <Modal.Header>{t('Add account via Qr')}</Modal.Header>
-      <Modal.Content>
-        {
-          scanned
-            ? (
-              <>
-                <AddressRow
-                  defaultName={name}
-                  noDefaultNameOpacity
-                  value={scanned.address}
-                />
-                <Input
-                  autoFocus
-                  className='full'
-                  help={t('Name given to this account. You can change it at any point in the future.')}
-                  isError={!isNameValid}
-                  label={t('name')}
-                  onChange={_onNameChange}
-                  onEnter={_onSave}
-                  value={name}
-                />
-              </>
-            )
-            : (
-              <div className='qr-wrapper'>
-                <QrScanAddress onScan={setScanned} />
-              </div>
-            )
-        }
-      </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
-          <Button.Or />
-          <Button
-            icon='sign-in'
-            isDisabled={!scanned || !isNameValid}
-            isPrimary
-            onClick={_onSave}
-            label={t('Create')}
-          />
-        </Button.Group>
-      </Modal.Actions>
-    </Modal>
-  );
-}
-
-export default translate(
-  styled(QrModal)`
-    .qr-wrapper {
-      margin: 0 auto;
-      max-width: 30rem;
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/app-accounts/src/modals/Transfer.tsx b/pioneer/packages/old-apps/app-accounts/src/modals/Transfer.tsx
deleted file mode 100644
index b0ffc9bb47..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/modals/Transfer.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-import { DerivedFees } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
-
-import BN from 'bn.js';
-import React, { useContext, useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
-import { Available } from '@polkadot/react-query';
-import Checks from '@polkadot/react-signer/Checks';
-import { ApiContext } from '@polkadot/react-api';
-
-import translate from '../translate';
-
-interface Props extends I18nProps {
-  balances_fees?: DerivedFees;
-  className?: string;
-  onClose: () => void;
-  recipientId?: string;
-  senderId?: string;
-}
-
-const ZERO = new BN(0);
-
-// TODO Re-enable when we have proper fee calculation (incl. weights)
-// async function calcMax (api: ApiPromise, balances_fees: DerivedFees | undefined, senderId: string, recipientId: string): Promise<BN> {
-//   let maxBalance = new BN(1);
-
-//   if (!balances_fees) {
-//     return maxBalance;
-//   }
-
-//   const { transferFee, transactionBaseFee, transactionByteFee, creationFee } = balances_fees;
-
-//   const [senderNonce, senderBalances, recipientBalances] = await Promise.all([
-//     api.query.system.accountNonce<Index>(senderId),
-//     api.derive.balances.all(senderId),
-//     api.derive.balances.all(recipientId)
-//   ]);
-
-//   let prevMax = new BN(0);
-
-//   // something goes screwy here when we move this out of the component :(
-//   let extrinsic: any;
-
-//   while (!prevMax.eq(maxBalance)) {
-//     prevMax = maxBalance;
-//     extrinsic = api.tx.balances.transfer(senderNonce, prevMax);
-
-//     const txLength = calcTxLength(extrinsic, senderNonce);
-//     const fees = transactionBaseFee
-//       .add(transactionByteFee.mul(txLength))
-//       .add(transferFee)
-//       .add(recipientBalances.availableBalance.isZero() ? creationFee : ZERO);
-
-//     maxBalance = bnMax(senderBalances.availableBalance.sub(fees), ZERO);
-//   }
-
-//   return maxBalance;
-// }
-
-function Transfer ({ className, onClose, recipientId: propRecipientId, senderId: propSenderId, t }: Props): React.ReactElement<Props> {
-  const { api } = useContext(ApiContext);
-  const [amount, setAmount] = useState<BN | undefined>(new BN(0));
-  const [extrinsic, setExtrinsic] = useState<SubmittableExtrinsic | null>(null);
-  const [hasAvailable, setHasAvailable] = useState(true);
-  const [maxBalance] = useState(new BN(0));
-  const [recipientId, setRecipientId] = useState<string | null>(propRecipientId || null);
-  const [senderId, setSenderId] = useState<string | null>(propSenderId || null);
-
-  useEffect((): void => {
-    if (senderId && recipientId) {
-      setExtrinsic(api.tx.balances.transfer(recipientId, amount || ZERO));
-
-      // We currently have not enabled the max functionality - we don't take care of weights
-      // calcMax(api, balances_fees, senderId, recipientId)
-      //   .then(([maxBalance]): void => setMaxBalance(maxBalance))
-      //   .catch((error: Error): void => console.error(error));
-    }
-  }, [amount, recipientId, senderId]);
-
-  const transferrable = <span className='label'>{t('transferrable ')}</span>;
-
-  return (
-    <Modal
-      className='app--accounts-Modal'
-      dimmer='inverted'
-      open
-    >
-      <Modal.Header>{t('Send funds')}</Modal.Header>
-      <Modal.Content>
-        <div className={className}>
-          <InputAddress
-            defaultValue={propSenderId}
-            help={t('The account you will send funds from.')}
-            isDisabled={!!propSenderId}
-            label={t('send from account')}
-            labelExtra={<Available label={transferrable} params={senderId} />}
-            onChange={setSenderId}
-            type='account'
-          />
-          <InputAddress
-            defaultValue={propRecipientId}
-            help={t('Select a contact or paste the address you want to send funds to.')}
-            isDisabled={!!propRecipientId}
-            label={t('send to address')}
-            labelExtra={<Available label={transferrable} params={recipientId} />}
-            onChange={setRecipientId}
-            type='allPlus'
-          />
-          <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.')}
-            isError={!hasAvailable}
-            label={t('amount')}
-            maxValue={maxBalance}
-            onChange={setAmount}
-            withMax
-          />
-          <Checks
-            accountId={senderId}
-            extrinsic={extrinsic}
-            isSendable
-            onChange={setHasAvailable}
-          />
-        </div>
-      </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
-          <Button.Or />
-          <TxButton
-            accountId={senderId}
-            extrinsic={extrinsic}
-            icon='send'
-            isDisabled={!hasAvailable}
-            isPrimary
-            label={t('Make Transfer')}
-            onStart={onClose}
-            withSpinner={false}
-          />
-        </Button.Group>
-      </Modal.Actions>
-    </Modal>
-  );
-}
-
-export default translate(
-  styled(Transfer)`
-    article.padded {
-      box-shadow: none;
-      margin-left: 2rem;
-    }
-
-    .balance {
-      margin-bottom: 0.5rem;
-      text-align: right;
-      padding-right: 1rem;
-
-      .label {
-        opacity: 0.7;
-      }
-    }
-
-    label.with-help {
-      flex-basis: 10rem;
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/app-accounts/src/translate.ts b/pioneer/packages/old-apps/app-accounts/src/translate.ts
deleted file mode 100644
index 196d037c1e..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/translate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { withTranslation } from 'react-i18next';
-
-export default withTranslation(['app-accounts']);
diff --git a/pioneer/packages/old-apps/app-accounts/src/types.ts b/pioneer/packages/old-apps/app-accounts/src/types.ts
deleted file mode 100644
index 81962b9590..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/types.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { AppProps } from '@polkadot/react-components/types';
-import { ActionStatus } from '@polkadot/react-components/Status/types';
-
-import { WithTranslation } from 'react-i18next';
-
-export interface LocationProps {
-  location: any;
-  match: {
-    params: Record<string, string>;
-  };
-}
-
-export interface BareProps {
-  className?: string;
-  style?: Record<string, any>;
-}
-
-export type I18nProps = BareProps & WithTranslation;
-
-export type ComponentProps = AppProps & LocationProps;
-
-export interface ModalProps {
-  onClose: () => void;
-  onStatusChange: (status: ActionStatus) => void;
-}
diff --git a/pioneer/packages/old-apps/app-accounts/src/vanitygen/calculate.ts b/pioneer/packages/old-apps/app-accounts/src/vanitygen/calculate.ts
deleted file mode 100644
index cfaaa92b88..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/vanitygen/calculate.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { GeneratorCalculation, GeneratorOptions } from './types';
-
-const MAX_OFFSET = 5;
-
-function calculateAtOne (atOffset: number, test: string[], address: string): GeneratorCalculation {
-  return {
-    count: test.reduce((count, c, index): number => {
-      if (index === count) {
-        count += (c === '?' || c === address.charAt(index + atOffset)) ? 1 : 0;
-      }
-
-      return count;
-    }, 0),
-    offset: atOffset
-  };
-}
-
-function calculateAt (atOffset: number, test: string[][], address: string): GeneratorCalculation {
-  let bestCount = 0;
-  let bestOffset = 1;
-
-  for (let i = 0; i < test.length; i++) {
-    const { count, offset } = calculateAtOne(atOffset, test[i], address);
-
-    if (count > bestCount) {
-      bestCount = count;
-      bestOffset = offset;
-    }
-  }
-
-  return {
-    count: bestCount,
-    offset: bestOffset
-  };
-}
-
-export default function calculate (test: string[][], _address: string, { atOffset = -1, withCase = false }: GeneratorOptions): GeneratorCalculation {
-  const address = withCase
-    ? _address
-    : _address.toLowerCase();
-
-  if (atOffset > 0) {
-    return calculateAt(atOffset, test, address);
-  }
-
-  let bestCount = 0;
-  let bestOffset = 1;
-
-  for (let index = 0; index < MAX_OFFSET; index++) {
-    const { count, offset } = calculateAt(index, test, address);
-
-    if (count > bestCount) {
-      bestCount = count;
-      bestOffset = offset;
-    }
-  }
-
-  return {
-    count: bestCount,
-    offset: bestOffset
-  };
-}
diff --git a/pioneer/packages/old-apps/app-accounts/src/vanitygen/cli.ts b/pioneer/packages/old-apps/app-accounts/src/vanitygen/cli.ts
deleted file mode 100644
index 736e3a83d4..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/vanitygen/cli.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-#!/usr/bin/env node
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { KeypairType } from '@polkadot/util-crypto/types';
-import { GeneratorOptions } from './types';
-
-import yargs from 'yargs';
-import chalk from 'chalk';
-import { u8aToHex } from '@polkadot/util';
-import { cryptoWaitReady, setSS58Format } from '@polkadot/util-crypto';
-
-import generator from '.';
-import matchRegex from './regex';
-
-interface Best {
-  address: string;
-  count: number;
-  mnemonic?: string;
-  offset: number;
-  seed?: Uint8Array;
-  withCase?: boolean;
-}
-
-const { match, mnemonic, network, type, withCase } = yargs
-  .option('match', {
-    default: 'Test',
-    type: 'string'
-  })
-  .option('mnemonic', {
-    default: false,
-    type: 'boolean'
-  })
-  .option('network', {
-    choices: ['substrate', 'polkadot', 'kusama'],
-    default: 'substrate'
-  })
-  .option('type', {
-    choices: ['ed25519', 'sr25519'],
-    default: 'sr25519'
-  })
-  .option('withCase', {
-    default: false,
-    type: 'boolean'
-  })
-  .argv;
-
-const INDICATORS = ['|', '/', '-', '\\'];
-const NUMBER_REGEX = new RegExp('(\\d+?)(?=(\\d{3})+(?!\\d)|$)', 'g');
-
-const options: GeneratorOptions = {
-  match,
-  network,
-  runs: 50,
-  type: type as KeypairType,
-  withCase,
-  withHex: !mnemonic
-};
-const startAt = Date.now();
-let best: Best = {
-  address: '',
-  count: -1,
-  offset: 65536
-};
-let total = 0;
-let indicator = -1;
-const tests = options.match.split(',');
-
-tests.forEach((test): void => {
-  if (!matchRegex.test(test)) {
-    console.error("Invalid character found in match string, allowed is '1-9' (no '0'), 'A-H, J-N & P-Z' (no 'I' or 'O'), 'a-k & m-z' (no 'l') and '?' (wildcard)");
-    process.exit(-1);
-  }
-});
-
-switch (network) {
-  case 'kusama':
-    setSS58Format(2);
-    break;
-
-  case 'polkadot':
-    setSS58Format(0);
-    break;
-
-  default:
-    setSS58Format(42);
-    break;
-}
-
-console.log(options);
-
-function showProgress (): void {
-  const elapsed = (Date.now() - startAt) / 1000;
-
-  indicator++;
-
-  if (indicator === INDICATORS.length) {
-    indicator = 0;
-  }
-
-  process.stdout.write(`\r[${INDICATORS[indicator]}] ${(total.toString().match(NUMBER_REGEX) || []).join(',')} keys in ${(elapsed).toFixed(2)}s (${(total / elapsed).toFixed(0)} keys/s)`);
-}
-
-function showBest (): void {
-  const { address, count, mnemonic, offset, seed } = best;
-
-  console.log(`\r::: ${address.slice(0, offset)}${chalk.cyan(address.slice(offset, count + offset))}${address.slice(count + offset)} <= ${u8aToHex(seed)} (count=${count}, offset=${offset})${mnemonic ? '\n                                                        ' + mnemonic : ''}`);
-}
-
-cryptoWaitReady()
-  .then((): void => {
-    while (true) {
-      const nextBest = generator(options).found.reduce((best, match): Best => {
-        if ((match.count > best.count) || ((match.count === best.count) && (match.offset <= best.offset))) {
-          return match;
-        }
-
-        return best;
-      }, best);
-
-      total += options.runs;
-
-      if (nextBest.address !== best.address) {
-        best = nextBest;
-        showBest();
-        showProgress();
-      } else if ((total % (options.withHex ? 1000 : 100)) === 0) {
-        showProgress();
-      }
-    }
-  })
-  .catch((error: Error): void => console.error(error));
diff --git a/pioneer/packages/old-apps/app-accounts/src/vanitygen/generate.ts b/pioneer/packages/old-apps/app-accounts/src/vanitygen/generate.ts
deleted file mode 100644
index 617552aa45..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/vanitygen/generate.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { GeneratorMatch, GeneratorOptions } from './types';
-
-import { encodeAddress, mnemonicGenerate, naclKeypairFromSeed, randomAsU8a, schnorrkelKeypairFromSeed, mnemonicToMiniSecret } from '@polkadot/util-crypto';
-
-import calculate from './calculate';
-
-export default function generator (test: string[][], options: GeneratorOptions): GeneratorMatch {
-  const mnemonic = options.withHex
-    ? undefined
-    : mnemonicGenerate(12);
-  const seed = mnemonic
-    ? mnemonicToMiniSecret(mnemonic)
-    : randomAsU8a();
-  const pair = options.type === 'sr25519'
-    ? schnorrkelKeypairFromSeed(seed)
-    : naclKeypairFromSeed(seed);
-  const address = encodeAddress(pair.publicKey);
-  const { count, offset } = calculate(test, address, options);
-
-  return {
-    address,
-    count,
-    mnemonic,
-    offset,
-    seed
-  };
-}
diff --git a/pioneer/packages/old-apps/app-accounts/src/vanitygen/index.ts b/pioneer/packages/old-apps/app-accounts/src/vanitygen/index.ts
deleted file mode 100644
index 269b3dab5f..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/vanitygen/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { GeneratorMatches, GeneratorResult, GeneratorOptions } from './types';
-
-import generate from './generate';
-
-export default function generator (options: GeneratorOptions): GeneratorResult {
-  const { match, runs = 10, withCase = false } = options;
-  const test = (withCase ? match : match.toLowerCase()).split(',').map((c): string[] => c.split(''));
-  const startAt = Date.now();
-  const found: GeneratorMatches = [];
-
-  while (found.length !== runs) {
-    found.push(generate(test, options));
-  }
-
-  return {
-    elapsed: Date.now() - startAt,
-    found
-  };
-}
diff --git a/pioneer/packages/old-apps/app-accounts/src/vanitygen/regex.ts b/pioneer/packages/old-apps/app-accounts/src/vanitygen/regex.ts
deleted file mode 100644
index 65cd0b7f56..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/vanitygen/regex.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-const regex = new RegExp('^[1-9A-HJ-NP-Za-km-z]*$', '');
-
-export default regex;
diff --git a/pioneer/packages/old-apps/app-accounts/src/vanitygen/sort.ts b/pioneer/packages/old-apps/app-accounts/src/vanitygen/sort.ts
deleted file mode 100644
index ca44f72813..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/vanitygen/sort.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { GeneratorMatch } from './types';
-
-function numberSort (a: number, b: number): number {
-  if (a > b) {
-    return -1;
-  } else if (a < b) {
-    return 1;
-  }
-
-  return 0;
-}
-
-export default function sort (a: GeneratorMatch, b: GeneratorMatch): number {
-  const countResult = numberSort(a.count, b.count);
-
-  if (countResult !== 0) {
-    return countResult;
-  }
-
-  const positionResult = numberSort(b.offset, a.offset);
-
-  if (positionResult !== 0) {
-    return positionResult;
-  }
-
-  return a.address.localeCompare(b.address);
-}
diff --git a/pioneer/packages/old-apps/app-accounts/src/vanitygen/types.d.ts b/pioneer/packages/old-apps/app-accounts/src/vanitygen/types.d.ts
deleted file mode 100644
index 9ecc8f1f80..0000000000
--- a/pioneer/packages/old-apps/app-accounts/src/vanitygen/types.d.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { KeypairType } from '@polkadot/util-crypto/types';
-
-export interface GeneratorCalculation {
-  count: number;
-  offset: number;
-}
-
-export interface GeneratorMatch extends GeneratorCalculation {
-  address: string;
-  mnemonic?: string;
-  seed: Uint8Array;
-}
-
-export type GeneratorMatches = GeneratorMatch[];
-
-export interface GeneratorOptions {
-  atOffset?: number;
-  match: string;
-  network?: string;
-  runs: number;
-  type: KeypairType;
-  withCase?: boolean;
-  withHex?: boolean;
-}
-
-export interface GeneratorResult {
-  elapsed: number;
-  found: GeneratorMatches;
-}
diff --git a/pioneer/packages/old-apps/app-address-book/LICENSE b/pioneer/packages/old-apps/app-address-book/LICENSE
deleted file mode 100644
index 0d381b2e97..0000000000
--- a/pioneer/packages/old-apps/app-address-book/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/pioneer/packages/old-apps/app-address-book/README.md b/pioneer/packages/old-apps/app-address-book/README.md
deleted file mode 100644
index 096a780148..0000000000
--- a/pioneer/packages/old-apps/app-address-book/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# @polkadot/app-address-book
diff --git a/pioneer/packages/old-apps/app-address-book/package.json b/pioneer/packages/old-apps/app-address-book/package.json
deleted file mode 100644
index ca862705f4..0000000000
--- a/pioneer/packages/old-apps/app-address-book/package.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "@polkadot/app-address-book",
-  "version": "0.37.0-beta.63",
-  "main": "index.js",
-  "repository": "https://github.com/polkadot-js/apps.git",
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "contributors": [],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/react-components": "^0.37.0-beta.63"
-  }
-}
diff --git a/pioneer/packages/old-apps/app-address-book/src/Address.tsx b/pioneer/packages/old-apps/app-address-book/src/Address.tsx
deleted file mode 100644
index 8ae133d642..0000000000
--- a/pioneer/packages/old-apps/app-address-book/src/Address.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { KeyringAddress } from '@polkadot/ui-keyring/types';
-import { ActionStatus } from '@polkadot/react-components/Status/types';
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { AddressCard, AddressInfo, Button, ChainLock, Forget } from '@polkadot/react-components';
-import keyring from '@polkadot/ui-keyring';
-
-import Transfer from '@polkadot/app-accounts/modals/Transfer';
-
-import translate from './translate';
-
-interface Props extends I18nProps {
-  address: string;
-  className?: string;
-}
-
-const WITH_BALANCE = { available: true, bonded: true, free: true, locked: true, reserved: true, total: true };
-const WITH_EXTENDED = { nonce: true };
-
-const isEditable = true;
-
-function Address ({ address, className, t }: Props): React.ReactElement<Props> {
-  const [current, setCurrent] = useState<KeyringAddress | null>(null);
-  const [genesisHash, setGenesisHash] = useState<string | null>(null);
-  const [isForgetOpen, setIsForgetOpen] = useState(false);
-  const [isTransferOpen, setIsTransferOpen] = useState(false);
-
-  useEffect((): void => {
-    const current = keyring.getAddress(address);
-
-    setCurrent(current || null);
-    setGenesisHash((current && current.meta.genesisHash) || null);
-  }, []);
-
-  const _toggleForget = (): void => setIsForgetOpen(!isForgetOpen);
-  const _toggleTransfer = (): void => setIsTransferOpen(!isTransferOpen);
-  const _onForget = (): void => {
-    if (address) {
-      const status: Partial<ActionStatus> = {
-        account: address,
-        action: 'forget'
-      };
-
-      try {
-        keyring.forgetAddress(address);
-        status.status = 'success';
-        status.message = t('address forgotten');
-      } catch (error) {
-        status.status = 'error';
-        status.message = error.message;
-      }
-    }
-  };
-  const _onGenesisChange = (genesisHash: string | null): void => {
-    setGenesisHash(genesisHash);
-
-    const account = keyring.getAddress(address);
-
-    account && keyring.saveAddress(address, { ...account.meta, genesisHash });
-
-    setGenesisHash(genesisHash);
-  };
-
-  return (
-    <AddressCard
-      buttons={
-        <div className='addresses--Address-buttons buttons'>
-          <div className='actions'>
-            {isEditable && (
-              <Button
-                isNegative
-                onClick={_toggleForget}
-                icon='trash'
-                key='forget'
-                size='small'
-                tooltip={t('Forget this address')}
-              />
-            )}
-            <Button
-              icon='paper plane'
-              isPrimary
-              key='deposit'
-              label={t('deposit')}
-              onClick={_toggleTransfer}
-              size='small'
-              tooltip={t('Send funds to this address')}
-            />
-          </div>
-          {isEditable && (
-            <div className='others'>
-              <ChainLock
-                genesisHash={genesisHash}
-                onChange={_onGenesisChange}
-              />
-            </div>
-          )}
-        </div>
-      }
-      className={className}
-      isEditable={isEditable}
-      type='address'
-      value={address}
-      withExplorer
-      withIndexOrAddress={false}
-      withTags
-    >
-      {address && current && (
-        <>
-          {isForgetOpen && (
-            <Forget
-              address={current.address}
-              onForget={_onForget}
-              key='modal-forget-account'
-              mode='address'
-              onClose={_toggleForget}
-            />
-          )}
-          {isTransferOpen && (
-            <Transfer
-              key='modal-transfer'
-              onClose={_toggleTransfer}
-              recipientId={address}
-            />
-          )}
-        </>
-      )}
-      <AddressInfo
-        address={address}
-        withBalance={WITH_BALANCE}
-        withExtended={WITH_EXTENDED}
-      />
-    </AddressCard>
-  );
-}
-
-export default translate(
-  styled(Address)`
-    .addresses--Address-buttons {
-      text-align: right;
-
-      .others {
-        margin-right: 0.125rem;
-        margin-top: 0.25rem;
-      }
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/app-address-book/src/MemoByAccount.tsx b/pioneer/packages/old-apps/app-address-book/src/MemoByAccount.tsx
deleted file mode 100644
index a8ede0e154..0000000000
--- a/pioneer/packages/old-apps/app-address-book/src/MemoByAccount.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-import { Form } from 'semantic-ui-react';
-import { History } from 'history';
-
-import MemoView from '@polkadot/joy-utils/memo/MemoView';
-import { RouteComponentProps } from 'react-router';
-
-type Props = RouteComponentProps & {
-  history: History;
-  match: {
-    params: {
-      accountId?: string;
-    };
-  };
-};
-
-type State = {
-  loaded: boolean;
-  accountInput?: string;
-};
-
-export default class Component extends React.PureComponent<Props, State> {
-  static getDerivedStateFromProps (props: Props, currentState: State): State | null {
-    const { match: { params: { accountId } } } = props;
-    const { loaded } = currentState;
-    // console.log('getDerivedStateFromProps', props);
-    if (!loaded && accountId) {
-      return { loaded: true, accountInput: accountId };
-    }
-    return null;
-  }
-
-  state: State = {
-    loaded: false,
-    accountInput: ''
-  };
-
-  render () {
-    const { match: { params: { accountId } } } = this.props;
-    const { accountInput } = this.state;
-    return <>
-      <Form onSubmit={this.findMemo}>
-        <Form.Input
-          value={accountInput}
-          placeholder='Key address'
-          onChange={e => this.onChangeAccount(e.target.value)}
-          action={{ icon: 'search', content: 'Find memo', onClick: this.findMemo }}
-        />
-      </Form>
-      {accountId && <MemoView accountId={accountId} preview={false} style={{ marginTop: '1rem' }} />}
-    </>;
-  }
-
-  private onChangeAccount = (accountInput: string): void => {
-    this.setState({ accountInput });
-  }
-
-  private findMemo = () => {
-    this.props.history.push('/addressbook/memo/' + this.state.accountInput);
-  }
-}
diff --git a/pioneer/packages/old-apps/app-address-book/src/Overview.tsx b/pioneer/packages/old-apps/app-address-book/src/Overview.tsx
deleted file mode 100644
index a827b76bf3..0000000000
--- a/pioneer/packages/old-apps/app-address-book/src/Overview.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-address-book authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-import { ComponentProps } from './types';
-
-import React, { useState } from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import { Button, CardGrid } from '@polkadot/react-components';
-import { Button as SUIButton, Icon } from 'semantic-ui-react';
-import addressObservable from '@polkadot/ui-keyring/observable/addresses';
-import { withMulti, withObservable } from '@polkadot/react-api';
-
-import CreateModal from './modals/Create';
-import Address from './Address';
-import translate from './translate';
-
-interface Props extends ComponentProps, I18nProps {
-  addresses?: SubjectInfo[];
-}
-
-function Overview ({ addresses, onStatusChange, t }: Props): React.ReactElement<Props> {
-  const { pathname } = useLocation();
-  const [isCreateOpen, setIsCreateOpen] = useState(false);
-  const emptyScreen = !isCreateOpen && (!addresses || Object.keys(addresses).length === 0);
-
-  const _toggleCreate = (): void => setIsCreateOpen(!isCreateOpen);
-
-  return (
-    <CardGrid
-      topButtons={
-        <SUIButton as={Link} to={`${pathname}/memo`}>
-          <Icon name="search" />
-          View memo
-        </SUIButton>
-      }
-      buttons={
-        <Button
-          icon='add'
-          isPrimary
-          label={t('Add contact')}
-          onClick={_toggleCreate}
-        />
-      }
-      isEmpty={emptyScreen}
-      emptyText={t('No contacts found.')}
-    >
-      {isCreateOpen && (
-        <CreateModal
-          onClose={_toggleCreate}
-          onStatusChange={onStatusChange}
-        />
-      )}
-      {addresses && Object.keys(addresses).map((address): React.ReactNode => (
-        <Address
-          address={address}
-          key={address}
-        />
-      ))}
-    </CardGrid>
-  );
-}
-
-export default withMulti(
-  Overview,
-  translate,
-  withObservable(addressObservable.subject, { propName: 'addresses' })
-);
diff --git a/pioneer/packages/old-apps/app-address-book/src/index.tsx b/pioneer/packages/old-apps/app-address-book/src/index.tsx
deleted file mode 100644
index 93993d5817..0000000000
--- a/pioneer/packages/old-apps/app-address-book/src/index.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-address-book authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-import { ComponentProps } from './types';
-
-import React from 'react';
-import { Route, Switch } from 'react-router';
-import { Link } from 'react-router-dom';
-import styled from 'styled-components';
-import { Breadcrumb } from 'semantic-ui-react';
-import { HelpOverlay } from '@polkadot/react-components';
-
-import basicMd from './md/basic.md';
-import Overview from './Overview';
-import translate from './translate';
-import MemoByAccount from './MemoByAccount';
-
-interface Props extends AppProps, I18nProps {
-  allAddresses?: SubjectInfo;
-  location: any;
-}
-
-const StyledHeader = styled.header`
-  text-align: left;
-
-  .ui.breadcrumb {
-    padding: 1.4rem 0 0 .4rem;
-    font-size: 1.4rem;
-  }
-`;
-
-function AddressBookApp ({ basePath, onStatusChange }: Props): React.ReactElement<Props> {
-  const _renderComponent = (Component: React.ComponentType<ComponentProps>): () => React.ReactNode => {
-    // eslint-disable-next-line react/display-name
-    return (): React.ReactNode =>
-      <Component
-        basePath={basePath}
-        location={location}
-        onStatusChange={onStatusChange}
-      />;
-  };
-
-  const viewMemoPath = `${basePath}/memo/:accountId?`;
-
-  return (
-    <main className='address-book--App'>
-      <HelpOverlay md={basicMd} />
-      <StyledHeader>
-        <Breadcrumb>
-          <Switch>
-            <Route path={viewMemoPath}>
-              <Breadcrumb.Section link as={Link} to={basePath}>Contacts</Breadcrumb.Section>
-              <Breadcrumb.Divider icon="right angle" />
-              <Breadcrumb.Section active>View memo</Breadcrumb.Section>
-            </Route>
-            <Route>
-              <Breadcrumb.Section active>Contacts</Breadcrumb.Section>
-            </Route>
-          </Switch>
-        </Breadcrumb>
-      </StyledHeader>
-      <Switch>
-        <Route path={viewMemoPath} component={MemoByAccount} />
-        <Route render={_renderComponent(Overview)} />
-      </Switch>
-    </main>
-  );
-}
-
-export default translate(AddressBookApp);
diff --git a/pioneer/packages/old-apps/app-address-book/src/md/basic.md b/pioneer/packages/old-apps/app-address-book/src/md/basic.md
deleted file mode 100644
index 88a17043c2..0000000000
--- a/pioneer/packages/old-apps/app-address-book/src/md/basic.md
+++ /dev/null
@@ -1,6 +0,0 @@
-# Address book
-
-You can store and get quick access to the most commonly used address, such as a friends' account.
-Any contact you create in this interface will be reflected in the application.
-
-You can edit the name of a contact by clicking on it. To remove a contact from the list, click on the trash icon to "Forget" it.
\ No newline at end of file
diff --git a/pioneer/packages/old-apps/app-address-book/src/modals/Create.tsx b/pioneer/packages/old-apps/app-address-book/src/modals/Create.tsx
deleted file mode 100644
index 5c4570a834..0000000000
--- a/pioneer/packages/old-apps/app-address-book/src/modals/Create.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-address-book authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { ActionStatus } from '@polkadot/react-components/Status/types';
-import { ModalProps } from '../types';
-
-import React, { useState } from 'react';
-
-import { AddressRow, Button, Input, InputAddress, Modal } from '@polkadot/react-components';
-import keyring from '@polkadot/ui-keyring';
-
-import translate from '../translate';
-
-interface Props extends ModalProps, I18nProps {}
-
-function Create ({ onClose, onStatusChange, t }: Props): React.ReactElement<Props> {
-  const [{ isNameValid, name }, setName] = useState<{ isNameValid: boolean; name: string }>({ isNameValid: false, name: '' });
-  const [{ address, isAddressExisting, isAddressValid }, setAddress] = useState<{ address: string; isAddressExisting: boolean; isAddressValid: boolean }>({ address: '', isAddressExisting: false, isAddressValid: false });
-  const isValid = isAddressValid && isNameValid;
-
-  const _onChangeAddress = (input: string): void => {
-    let address = '';
-    let isAddressValid = true;
-    let isAddressExisting = false;
-
-    try {
-      address = keyring.encodeAddress(
-        keyring.decodeAddress(input)
-      );
-      isAddressValid = keyring.isAvailable(address);
-
-      if (!isAddressValid) {
-        const old = keyring.getAddress(address);
-
-        if (old) {
-          const newName = old.meta.name || name;
-
-          isAddressExisting = true;
-          isAddressValid = true;
-
-          setName({ isNameValid: !!(newName || '').trim(), name: newName });
-        }
-      }
-    } catch (error) {
-      isAddressValid = false;
-    }
-
-    setAddress({ address: address || input, isAddressExisting, isAddressValid });
-  };
-  const _onChangeName = (name: string): void => setName({ isNameValid: !!name.trim(), name });
-  const _onCommit = (): void => {
-    const status = { action: 'create' } as ActionStatus;
-
-    if (!isValid) {
-      return;
-    }
-
-    try {
-      keyring.saveAddress(address, { name: name.trim(), genesisHash: keyring.genesisHash, tags: [] });
-
-      status.account = address;
-      status.status = address ? 'success' : 'error';
-      status.message = isAddressExisting
-        ? t('address edited')
-        : t('address created');
-
-      InputAddress.setLastValue('address', address);
-    } catch (error) {
-      status.status = 'error';
-      status.message = error.message;
-    }
-
-    onStatusChange(status);
-    onClose();
-  };
-
-  return (
-    <Modal
-      dimmer='inverted'
-      open
-    >
-      <Modal.Header>{t('Add an address')}</Modal.Header>
-      <Modal.Content>
-        <AddressRow
-          defaultName={name}
-          noDefaultNameOpacity
-          value={address}
-        >
-          <Input
-            autoFocus
-            className='full'
-            help={t('Paste here the address of the contact you want to add to your address book.')}
-            isError={!isAddressValid}
-            label={t('address')}
-            onChange={_onChangeAddress}
-            onEnter={_onCommit}
-            placeholder={t('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.')}
-            isError={!isNameValid}
-            label={t('name')}
-            onChange={_onChangeName}
-            onEnter={_onCommit}
-            value={name}
-          />
-        </AddressRow>
-      </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            onClick={onClose}
-            label={t('Cancel')}
-          />
-          <Button.Or />
-          <Button
-            icon='save'
-            isDisabled={!isValid}
-            isPrimary
-            onClick={_onCommit}
-            label={t('Save')}
-          />
-        </Button.Group>
-      </Modal.Actions>
-    </Modal>
-  );
-}
-
-export default translate(Create);
diff --git a/pioneer/packages/old-apps/app-address-book/src/translate.ts b/pioneer/packages/old-apps/app-address-book/src/translate.ts
deleted file mode 100644
index a0baa8dbf7..0000000000
--- a/pioneer/packages/old-apps/app-address-book/src/translate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-address-book authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { withTranslation } from 'react-i18next';
-
-export default withTranslation(['app-address-book']);
diff --git a/pioneer/packages/old-apps/app-address-book/src/types.ts b/pioneer/packages/old-apps/app-address-book/src/types.ts
deleted file mode 100644
index e9d25f094f..0000000000
--- a/pioneer/packages/old-apps/app-address-book/src/types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-address-book authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { AppProps } from '@polkadot/react-components/types';
-import { ActionStatus } from '@polkadot/react-components/Status/types';
-
-export interface ComponentProps extends AppProps {
-  location: any;
-}
-
-export interface ModalProps {
-  onClose: () => void;
-  onStatusChange: (status: ActionStatus) => void;
-}
diff --git a/pioneer/packages/old-apps/app-contracts/LICENSE b/pioneer/packages/old-apps/app-contracts/LICENSE
deleted file mode 100644
index 0d381b2e97..0000000000
--- a/pioneer/packages/old-apps/app-contracts/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/pioneer/packages/old-apps/app-contracts/README.md b/pioneer/packages/old-apps/app-contracts/README.md
deleted file mode 100644
index 9cc27d777d..0000000000
--- a/pioneer/packages/old-apps/app-contracts/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# @polkadot/app-contracts
-
-Substrate contracts - code deployment, instance creation and messages.
diff --git a/pioneer/packages/old-apps/app-contracts/package.json b/pioneer/packages/old-apps/app-contracts/package.json
deleted file mode 100644
index 2f50e63d3c..0000000000
--- a/pioneer/packages/old-apps/app-contracts/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "name": "@polkadot/app-contracts",
-  "version": "0.37.0-beta.63",
-  "description": "Deployment and management of substrate contracts",
-  "main": "index.js",
-  "scripts": {},
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/api-contract": "^0.96.1",
-    "@polkadot/react-components": "^0.37.0-beta.63"
-  }
-}
diff --git a/pioneer/packages/old-apps/app-contracts/src/ABI.tsx b/pioneer/packages/old-apps/app-contracts/src/ABI.tsx
deleted file mode 100644
index 8c0f3345d2..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/ABI.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-contracts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Abi } from '@polkadot/api-contract';
-import { InputFile, Labelled, Messages } from '@polkadot/react-components';
-import { u8aToString } from '@polkadot/util';
-
-import translate from './translate';
-
-interface Props extends I18nProps {
-  className?: string;
-  contractAbi?: Abi | null;
-  errorText?: string | null;
-  help?: React.ReactNode;
-  isError?: boolean;
-  isDisabled?: boolean;
-  isRequired?: boolean;
-  label?: React.ReactNode;
-  onChange: (json: string | null, contractAbi: Abi | null) => void;
-  onRemove?: () => void;
-  onRemoved?: () => void;
-  onSelect?: () => void;
-  onSelectConstructor?: (constructorIndex?: number) => void;
-}
-
-interface State {
-  contractAbi: Abi | null;
-  errorText: string | null;
-  isAbiValid: boolean;
-  isEmpty: boolean;
-  isError: boolean;
-}
-
-class ABI extends React.PureComponent<Props, State> {
-  public state: State = {
-    contractAbi: null,
-    errorText: null,
-    isAbiValid: false,
-    isEmpty: true,
-    isError: false
-  };
-
-  constructor (props: Props) {
-    super(props);
-
-    const { contractAbi, isError, isRequired } = this.props;
-    const isAbiValid = !!contractAbi;
-
-    this.state = {
-      contractAbi: contractAbi || null,
-      errorText: null,
-      isAbiValid,
-      isEmpty: !isAbiValid,
-      isError: isError || (isRequired && !isAbiValid) || false
-    };
-  }
-
-  public static getDerivedStateFromProps ({ contractAbi }: Props): Pick<State, never> | null {
-    if (contractAbi) {
-      return {
-        contractAbi,
-        isAbiValid: true,
-        isError: false
-      };
-    }
-    return null;
-  }
-
-  public render (): React.ReactNode {
-    const { className } = this.props;
-    const { contractAbi, isAbiValid } = this.state;
-
-    return (
-      <div className={className}>
-        {
-          (contractAbi && isAbiValid)
-            ? this.renderMessages()
-            : this.renderInputFile()
-        }
-      </div>
-    );
-  }
-
-  private renderInputFile (): React.ReactNode {
-    const { className, help, isDisabled, isRequired, label, t } = this.props;
-    const { isAbiValid, isEmpty, isError, errorText } = this.state;
-
-    return (
-      <div className={className}>
-        <InputFile
-          help={help}
-          isDisabled={isDisabled}
-          isError={!isAbiValid && (isRequired || isError)}
-          label={label}
-          onChange={this.onChange}
-          placeholder={
-            !isEmpty && !isAbiValid
-              ? (
-                <>
-                  {t('invalid ABI file selected')}
-                  {!!errorText && (
-                    <>
-                      {' — '}
-                      {t(errorText)}
-                    </>
-                  )}
-                </>
-              )
-              : t('click to select or drag and drop a JSON ABI file')
-          }
-        />
-      </div>
-    );
-  }
-
-  private renderMessages (): React.ReactNode {
-    const { help, isDisabled, label, onRemove, onSelectConstructor } = this.props;
-    const { contractAbi } = this.state;
-
-    if (!contractAbi) {
-      return null;
-    }
-
-    return (
-      <Labelled
-        label={label}
-        help={help}
-        withLabel={!!label}
-      >
-        <Messages
-          contractAbi={contractAbi}
-          onRemove={onRemove || this.onRemove}
-          isLabelled={!!label}
-          isRemovable={!isDisabled}
-          onSelectConstructor={onSelectConstructor}
-          withConstructors
-        />
-      </Labelled>
-    );
-  }
-
-  private onChange = (u8a: Uint8Array): void => {
-    const { onChange, t } = this.props;
-    const json = u8aToString(u8a);
-    try {
-      const abi = JSON.parse(json);
-
-      if (abi.deploy || abi.messages) {
-        throw new Error(t('You are using an ABI with an outdated format. Please generate a new one.'));
-      }
-
-      const contractAbi = new Abi(abi);
-
-      this.setState({
-        contractAbi,
-        isAbiValid: true,
-        isEmpty: false,
-        isError: false
-      }, (): void => onChange(json, contractAbi));
-    } catch (error) {
-      console.error(error);
-
-      this.setState({
-        isAbiValid: false,
-        isEmpty: false,
-        isError: true,
-        errorText: error
-      }, (): void => onChange(null, null));
-    }
-  }
-
-  private onRemove = (): void => {
-    const { onChange, onRemoved } = this.props;
-
-    this.setState(
-      {
-        contractAbi: null,
-        isAbiValid: false,
-        isEmpty: true
-      },
-      (): void => {
-        onChange(null, null);
-        onRemoved && onRemoved();
-      }
-    );
-  }
-}
-
-export default translate(styled(ABI as React.ComponentClass<Props, State>)`
-  min-height: 4rem;
-`);
diff --git a/pioneer/packages/old-apps/app-contracts/src/Codes/Add.tsx b/pioneer/packages/old-apps/app-contracts/src/Codes/Add.tsx
deleted file mode 100644
index 0a6dfdb278..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/Codes/Add.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-contracts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import React from 'react';
-import { createType } from '@polkadot/types';
-import { Button, Input } from '@polkadot/react-components';
-
-import ContractModal, { ContractModalProps as Props, ContractModalState } from '../Modal';
-import ValidateCode from './ValidateCode';
-import store from '../store';
-import translate from '../translate';
-
-interface State extends ContractModalState {
-  codeHash: string;
-  isBusy: boolean;
-  isCodeValid: boolean;
-}
-
-class Add extends ContractModal<Props, State> {
-  constructor (props: Props) {
-    super(props);
-    this.defaultState = {
-      ...this.defaultState,
-      codeHash: '',
-      isBusy: false,
-      isCodeValid: false
-    };
-    this.state = this.defaultState;
-    this.headerText = props.t('Add an existing code hash');
-  }
-
-  protected renderContent = (): React.ReactNode => {
-    const { t } = this.props;
-    const { codeHash, isBusy, isCodeValid } = this.state;
-
-    return (
-      <>
-        <Input
-          autoFocus
-          help={t('The code hash for the on-chain deployed code.')}
-          isDisabled={isBusy}
-          isError={!isCodeValid}
-          label={t('code hash')}
-          onChange={this.onChangeHash}
-          onEnter={this.submit}
-          value={codeHash}
-        />
-        <ValidateCode
-          codeHash={codeHash}
-          onChange={this.onValidateCode}
-        />
-        {this.renderInputName()}
-        {this.renderInputAbi()}
-      </>
-    );
-  }
-
-  protected renderButtons = (): React.ReactNode => {
-    const { t } = this.props;
-    const { isBusy, isCodeValid, isNameValid } = this.state;
-    const isValid = !isBusy && isCodeValid && isNameValid;
-
-    return (
-      <Button.Group>
-        {this.renderCancelButton()}
-        <Button
-          icon='save'
-          isDisabled={!isValid}
-          isPrimary
-          label={t('Save')}
-          onClick={this.onSave}
-          ref={this.button}
-        />
-      </Button.Group>
-    );
-  }
-
-  private onChangeHash = (codeHash: string): void => {
-    this.setState({ codeHash, isCodeValid: false });
-  }
-
-  private onValidateCode = (isCodeValid: boolean): void => {
-    this.setState({ isCodeValid });
-  }
-
-  private onSave = (): void => {
-    const { abi, codeHash, name, tags } = this.state;
-
-    if (!codeHash || !name) {
-      return;
-    }
-
-    this.setState({ isBusy: true }, (): void => {
-      store
-        .saveCode(createType('Hash', codeHash), { abi, name, tags })
-        .then((): void => {
-          this.setState(
-            { isBusy: false },
-            (): void => this.onClose()
-          );
-        })
-        .catch((error): void => {
-          console.error('Unable to save code', error);
-          this.setState({ isBusy: false });
-        });
-    });
-
-    // this.redirect();
-  }
-}
-
-export default translate(Add);
diff --git a/pioneer/packages/old-apps/app-contracts/src/Codes/Code.tsx b/pioneer/packages/old-apps/app-contracts/src/Codes/Code.tsx
deleted file mode 100644
index a2eefad088..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/Codes/Code.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { CodeStored } from '../types';
-
-import React from 'react';
-import styled from 'styled-components';
-import { RouteComponentProps } from 'react-router';
-import { withRouter } from 'react-router-dom';
-import { Button, Card, CodeRow, Forget } from '@polkadot/react-components';
-
-import ABI from '../ABI';
-import RemoveABI from '../RemoveABI';
-
-import contracts from '../store';
-import translate from '../translate';
-
-interface Props extends I18nProps, RouteComponentProps<{}> {
-  code: CodeStored;
-  showDeploy: (codeHash?: string, constructorIndex?: number) => () => void;
-}
-
-interface State {
-  isAbiOpen: boolean;
-  isForgetOpen: boolean;
-  isRemoveABIOpen: boolean;
-}
-
-const CodeCard = styled(Card)`
-  && {
-    max-width: 100%;
-    min-width: 100%;
-  }
-`;
-
-class Code extends React.PureComponent<Props, State> {
-  public state: State = {
-    isAbiOpen: false,
-    isForgetOpen: false,
-    isRemoveABIOpen: false
-  };
-
-  public render (): React.ReactNode {
-    const { code, code: { contractAbi }, t } = this.props;
-    const { isAbiOpen } = this.state;
-
-    const abi = (
-      <ABI
-        contractAbi={contractAbi}
-        onChange={this.onChangeABI}
-        onRemove={this.toggleRemoveABI}
-        onSelectConstructor={this.onDeployConstructor}
-      />
-    );
-
-    return (
-      <CodeCard>
-        {this.renderModals()}
-        <CodeRow
-          buttons={this.renderButtons()}
-          code={code}
-          isEditable
-          withTags
-        >
-          {contractAbi
-            ? (
-              <details
-                onClick={this.toggleAbi}
-                open={isAbiOpen}
-              >
-                <summary>{t('ABI')}</summary>
-                {abi}
-              </details>
-            )
-            : abi
-          }
-        </CodeRow>
-      </CodeCard>
-    );
-  }
-
-  private renderButtons (): React.ReactNode {
-    const { code: { json: { codeHash } }, showDeploy, t } = this.props;
-
-    return (
-      <>
-        <Button
-          isNegative
-          onClick={this.toggleForget}
-          icon='trash'
-          size='small'
-          tooltip={t('Forget this code hash')}
-        />
-        <Button
-          icon='cloud upload'
-          isPrimary
-          label={t('deploy')}
-          onClick={showDeploy(codeHash)}
-          size='small'
-          tooltip={t('Deploy this code hash as a smart contract')}
-        />
-      </>
-    );
-  }
-
-  private renderModals (): React.ReactNode {
-    const { code } = this.props;
-    const { isForgetOpen, isRemoveABIOpen } = this.state;
-
-    if (!code) {
-      return null;
-    }
-
-    const modals = [];
-
-    if (isForgetOpen) {
-      modals.push(
-        <Forget
-          code={code}
-          key='modal-forget-account'
-          mode='code'
-          onClose={this.toggleForget}
-          onForget={this.onForget}
-        />
-      );
-    }
-
-    if (isRemoveABIOpen) {
-      modals.push(
-        <RemoveABI
-          code={code}
-          key='modal-remove-abi'
-          onClose={this.toggleRemoveABI}
-          onRemove={this.onChangeABI}
-        />
-      );
-    }
-
-    return modals;
-  }
-
-  private toggleAbi = (event: React.MouseEvent): () => void => {
-    return (): void => {
-      event.preventDefault();
-      const { isAbiOpen } = this.state;
-
-      this.setState({
-        isAbiOpen: !isAbiOpen
-      });
-    };
-  }
-
-  private toggleForget = (): void => {
-    const { isForgetOpen } = this.state;
-
-    this.setState({
-      isForgetOpen: !isForgetOpen
-    });
-  }
-
-  private toggleRemoveABI = (): void => {
-    const { isRemoveABIOpen } = this.state;
-
-    this.setState({
-      isRemoveABIOpen: !isRemoveABIOpen
-    });
-  }
-
-  private onDeployConstructor = (constructorIndex = 0): void => {
-    const { code: { json: { codeHash } }, showDeploy } = this.props;
-
-    codeHash && showDeploy && showDeploy(codeHash, constructorIndex)();
-  }
-
-  private onForget = (): void => {
-    const { code: { json: { codeHash } } } = this.props;
-
-    if (!codeHash) {
-      return;
-    }
-
-    try {
-      contracts.forgetCode(codeHash);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      this.toggleForget();
-    }
-  }
-
-  private onChangeABI = (abi: string | null = null): void => {
-    const { code: { json: { codeHash } } } = this.props;
-
-    this.setState(
-      { isAbiOpen: true },
-      (): void => {
-        contracts.saveCode(
-          codeHash,
-          { abi }
-        );
-      }
-    );
-  }
-}
-
-export default translate(withRouter(Code));
diff --git a/pioneer/packages/old-apps/app-contracts/src/Codes/Upload.tsx b/pioneer/packages/old-apps/app-contracts/src/Codes/Upload.tsx
deleted file mode 100644
index 9871836bff..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/Codes/Upload.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-contracts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Hash } from '@polkadot/types/interfaces';
-import { ApiProps } from '@polkadot/react-api/types';
-
-import BN from 'bn.js';
-import React from 'react';
-import { SubmittableResult } from '@polkadot/api';
-import { withApi, withMulti } from '@polkadot/react-api';
-import { Button, InputFile, TxButton } from '@polkadot/react-components';
-import { compactAddLength } from '@polkadot/util';
-
-import ContractModal, { ContractModalProps, ContractModalState } from '../Modal';
-import store from '../store';
-import translate from '../translate';
-import { GAS_LIMIT } from '../constants';
-
-interface Props extends ContractModalProps, ApiProps {}
-
-interface State extends ContractModalState {
-  gasLimit: BN;
-  isWasmValid: boolean;
-  wasm?: Uint8Array | null;
-}
-
-class Upload extends ContractModal<Props, State> {
-  constructor (props: Props) {
-    super(props);
-
-    this.defaultState = {
-      ...this.defaultState,
-      gasLimit: new BN(GAS_LIMIT),
-      isWasmValid: false,
-      wasm: null
-    };
-    this.state = this.defaultState;
-    this.headerText = props.t('Upload WASM');
-  }
-
-  protected renderContent = (): React.ReactNode => {
-    const { t } = this.props;
-    const { isBusy, isWasmValid, wasm } = this.state;
-
-    return (
-      <>
-        {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.')}
-          isDisabled={isBusy}
-          isError={!isWasmValid}
-          label={t('compiled contract WASM')}
-          onChange={this.onAddWasm}
-          placeholder={
-            wasm && !isWasmValid
-              ? t('The code is not recognized as being in valid WASM format')
-              : null
-          }
-        />
-        {this.renderInputName()}
-        {this.renderInputAbi()}
-        {this.renderInputGas()}
-      </>
-    );
-  }
-
-  protected renderButtons = (): React.ReactNode => {
-    const { api, t } = this.props;
-    const { accountId, gasLimit, isBusy, isNameValid, isWasmValid, wasm } = this.state;
-    const isValid = !isBusy && accountId && isNameValid && isWasmValid && !gasLimit.isZero() && !!accountId;
-
-    return (
-      <Button.Group>
-        {this.renderCancelButton()}
-        <TxButton
-          accountId={accountId}
-          icon='upload'
-          isDisabled={!isValid}
-          isPrimary
-          label={t('Upload')}
-          onClick={this.toggleBusy(true)}
-          onSuccess={this.onSuccess}
-          onFailed={this.toggleBusy(false)}
-          params={[gasLimit, wasm]}
-          tx={api.tx.contracts ? 'contracts.putCode' : 'contract.putCode'}
-          ref={this.button}
-        />
-      </Button.Group>
-    );
-  }
-
-  private onAddWasm = (wasm: Uint8Array, name: string): void => {
-    const isWasmValid = wasm.subarray(0, 4).toString() === '0,97,115,109'; // '\0asm'
-
-    this.setState({ wasm: compactAddLength(wasm), isWasmValid });
-    this.onChangeName(name);
-  }
-
-  private onSuccess = (result: SubmittableResult): void => {
-    const { api } = this.props;
-
-    this.setState(({ abi, name, tags }): Pick<State, never> | null => {
-      const section = api.tx.contracts ? 'contracts' : 'contract';
-      const record = result.findRecord(section, 'CodeStored');
-
-      if (record) {
-        const codeHash = record.event.data[0];
-
-        if (!codeHash || !name) {
-          return null;
-        }
-
-        store.saveCode(codeHash as Hash, { abi, name, tags })
-          .then((): void => this.onClose())
-          .catch((error: any): void => {
-            console.error('Unable to save code', error);
-          });
-      }
-
-      return { isBusy: false };
-    });
-  }
-}
-
-export default withMulti(
-  Upload,
-  translate,
-  withApi
-);
diff --git a/pioneer/packages/old-apps/app-contracts/src/Codes/ValidateCode.tsx b/pioneer/packages/old-apps/app-contracts/src/Codes/ValidateCode.tsx
deleted file mode 100644
index 15717efdfa..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/Codes/ValidateCode.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/app-contracts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { PrefabWasmModule } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
-import { ApiProps } from '@polkadot/react-api/types';
-
-import React from 'react';
-import { Option } from '@polkadot/types';
-import { withCalls } from '@polkadot/react-api';
-import { InfoForInput } from '@polkadot/react-components';
-import { isHex } from '@polkadot/util';
-
-import translate from '../translate';
-
-interface Props extends ApiProps, I18nProps {
-  codeHash?: string | null;
-  contracts_codeStorage?: Option<PrefabWasmModule>;
-  onChange: (isValid: boolean) => void;
-}
-
-interface State {
-  isStored: boolean;
-  isValidHex: boolean;
-  isValid: boolean;
-}
-
-class ValidateCode extends React.PureComponent<Props, State> {
-  public state: State = {
-    isStored: false,
-    isValidHex: false,
-    isValid: false
-  };
-
-  public static getDerivedStateFromProps ({ codeHash, contracts_codeStorage, onChange }: Props): State {
-    const isValidHex = !!codeHash && isHex(codeHash) && codeHash.length === 66;
-    const isStored = !!contracts_codeStorage && contracts_codeStorage.isSome;
-    const isValid = isValidHex && isStored;
-
-    // FIXME Really not convinced this is the correct place to do this type of callback?
-    onChange(isValid);
-
-    return {
-      isStored,
-      isValidHex,
-      isValid
-    };
-  }
-
-  public render (): React.ReactNode {
-    const { t } = this.props;
-    const { isValid, isValidHex } = this.state;
-
-    if (isValid || !isValidHex) {
-      return null;
-    }
-
-    return (
-      <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')
-        }
-      </InfoForInput>
-    );
-  }
-}
-
-export default translate(
-  withCalls<Props>(
-    ['query.contracts.codeStorage', { fallbacks: ['query.contract.codeStorage'], paramName: 'codeHash' }]
-  )(ValidateCode)
-);
diff --git a/pioneer/packages/old-apps/app-contracts/src/Codes/index.tsx b/pioneer/packages/old-apps/app-contracts/src/Codes/index.tsx
deleted file mode 100644
index 865e4242b0..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/Codes/index.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { ComponentProps } from '../types';
-
-import React from 'react';
-import { Button, CardGrid } from '@polkadot/react-components';
-
-import contracts from '../store';
-import translate from '../translate';
-
-import Code from './Code';
-import Upload from './Upload';
-import Add from './Add';
-
-interface Props extends ComponentProps, I18nProps {}
-
-interface State {
-  isAddOpen: boolean;
-  isUploadOpen: boolean;
-}
-
-class Codes extends React.PureComponent<Props, State> {
-  public state: State = {
-    isAddOpen: false,
-    isUploadOpen: false
-  };
-
-  public render (): React.ReactNode {
-    const { basePath, showDeploy, t } = this.props;
-    const { isAddOpen, isUploadOpen } = this.state;
-
-    return (
-      <>
-        <CardGrid
-          emptyText={t('No code hashes available')}
-          buttons={
-            <Button.Group>
-              <Button
-                icon='upload'
-                isPrimary
-                label={t('Upload WASM')}
-                onClick={this.showUpload}
-              />
-              <Button.Or />
-              <Button
-                icon='add'
-                label={t('Add an existing code hash')}
-                onClick={this.showAdd}
-              />
-            </Button.Group>
-          }
-        >
-          {contracts.getAllCode().map((code): React.ReactNode => {
-            return (
-              <Code
-                key={code.json.codeHash}
-                code={code}
-                showDeploy={showDeploy}
-              />
-            );
-          })}
-        </CardGrid>
-        <Upload
-          basePath={basePath}
-          isNew
-          onClose={this.hideUpload}
-          isOpen={isUploadOpen}
-        />
-        <Add
-          basePath={basePath}
-          onClose={this.hideAdd}
-          isOpen={isAddOpen}
-        />
-      </>
-    );
-  }
-
-  private showUpload = (): void => {
-    this.setState({ isUploadOpen: true });
-  }
-
-  private hideUpload = (): void => {
-    this.setState({ isUploadOpen: false });
-  }
-
-  private showAdd = (): void => {
-    this.setState({ isAddOpen: true });
-  }
-
-  private hideAdd = (): void => {
-    this.setState({ isAddOpen: false });
-  }
-}
-
-export default translate(Codes);
diff --git a/pioneer/packages/old-apps/app-contracts/src/Contracts/Add.tsx b/pioneer/packages/old-apps/app-contracts/src/Contracts/Add.tsx
deleted file mode 100644
index 196e8a6148..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/Contracts/Add.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-contracts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ApiProps } from '@polkadot/react-api/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { ActionStatus } from '@polkadot/react-components/Status/types';
-
-import React from 'react';
-import { withApi } from '@polkadot/react-api';
-import { AddressRow, Button, Input } from '@polkadot/react-components';
-import keyring from '@polkadot/ui-keyring';
-
-import ContractModal, { ContractModalProps, ContractModalState } from '../Modal';
-import ValidateAddr from './ValidateAddr';
-
-import translate from '../translate';
-
-interface Props extends ContractModalProps, ApiProps, I18nProps {}
-
-interface State extends ContractModalState {
-  address?: string | null;
-  isAddressValid: boolean;
-}
-
-class Add extends ContractModal<Props, State> {
-  constructor (props: Props) {
-    super(props);
-    this.defaultState = {
-      ...this.defaultState,
-      address: null,
-      name: 'New Contract',
-      isAddressValid: false,
-      isNameValid: true
-    };
-    this.state = this.defaultState;
-    this.headerText = props.t('Add an existing contract');
-  }
-
-  public isContract = true;
-
-  protected renderContent = (): React.ReactNode => {
-    const { t } = this.props;
-    const { address, isAddressValid, isBusy, name } = this.state;
-
-    return (
-      <AddressRow
-        defaultName={name}
-        isValid
-        value={address || null}
-      >
-        <Input
-          autoFocus
-          help={t('The address for the deployed contract instance.')}
-          isDisabled={isBusy}
-          isError={!isAddressValid}
-          label={t('contract address')}
-          onChange={this.onChangeAddress}
-          onEnter={this.submit}
-          value={address || ''}
-        />
-        <ValidateAddr
-          address={address}
-          onChange={this.onValidateAddr}
-        />
-        {this.renderInputName()}
-        {this.renderInputAbi()}
-      </AddressRow>
-    );
-  }
-
-  protected renderButtons = (): React.ReactNode => {
-    const { t } = this.props;
-    const { isAddressValid, isAbiValid, isNameValid } = this.state;
-    const isValid = isNameValid && isAddressValid && isAbiValid;
-
-    return (
-      <Button.Group>
-        {this.renderCancelButton()}
-        <Button
-          icon='save'
-          isDisabled={!isValid}
-          isPrimary
-          label={t('Save')}
-          onClick={this.onAdd}
-          ref={this.button}
-        />
-      </Button.Group>
-    );
-  }
-
-  private onChangeAddress = (address: string): void => {
-    this.setState({ address, isAddressValid: false });
-  }
-
-  private onValidateAddr = (isAddressValid: boolean): void => {
-    this.setState({ isAddressValid });
-  }
-
-  private onAdd = (): void => {
-    const { api } = this.props;
-    const status: Partial<ActionStatus> = { action: 'create' };
-    const { address, abi, name, tags } = this.state;
-
-    if (!address || !abi || !name) {
-      return;
-    }
-
-    try {
-      const json = {
-        name,
-        tags,
-        contract: {
-          abi,
-          genesisHash: api.genesisHash.toHex()
-        }
-      };
-
-      keyring.saveContract(address, json);
-
-      status.account = address;
-      status.status = address ? 'success' : 'error';
-      status.message = 'contract added';
-
-      this.onClose();
-    } catch (error) {
-      console.error(error);
-
-      status.status = 'error';
-      status.message = error.message;
-    }
-  }
-}
-
-export default translate(withApi(Add));
diff --git a/pioneer/packages/old-apps/app-contracts/src/Contracts/Call.tsx b/pioneer/packages/old-apps/app-contracts/src/Contracts/Call.tsx
deleted file mode 100644
index 09fe72e10e..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/Contracts/Call.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-contracts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ContractCallOutcome } from '@polkadot/api-contract/types';
-import { ApiProps } from '@polkadot/react-api/types';
-import { BareProps, I18nProps, StringOrNull } from '@polkadot/react-components/types';
-import { ContractExecResult } from '@polkadot/types/interfaces/contracts';
-
-import BN from 'bn.js';
-import React, { useState, useEffect } from 'react';
-import styled from 'styled-components';
-import { Button, Dropdown, IconLink, InputAddress, InputBalance, InputNumber, Modal, Toggle, TxButton } from '@polkadot/react-components';
-import { PromiseContract as ApiContract } from '@polkadot/api-contract';
-import { withApi, withMulti } from '@polkadot/react-api';
-import { createValue } from '@polkadot/react-params/values';
-import { isNull } from '@polkadot/util';
-
-import Params from '../Params';
-import Outcome from './Outcome';
-
-import translate from '../translate';
-import { GAS_LIMIT } from '../constants';
-import { getCallMessageOptions } from './util';
-
-interface Props extends BareProps, I18nProps, ApiProps {
-  callContract: ApiContract | null;
-  callMessageIndex: number | null;
-  callResults: ContractExecResult[];
-  isOpen: boolean;
-  onChangeCallContractAddress: (callContractAddress: StringOrNull) => void;
-  onChangeCallMessageIndex: (callMessageIndex: number) => void;
-  onClose: () => void;
-}
-
-function Call (props: Props): React.ReactElement<Props> | null {
-  const { className, isOpen, callContract, callMessageIndex, onChangeCallContractAddress, onChangeCallMessageIndex, onClose, api, t } = props;
-
-  if (isNull(callContract) || isNull(callMessageIndex)) {
-    return null;
-  }
-
-  const hasRpc = api.rpc.contracts && api.rpc.contracts.call;
-  let callMessage = callContract.getMessage(callMessageIndex);
-
-  const [accountId, setAccountId] = useState<StringOrNull>(null);
-  const [endowment, setEndowment] = useState<BN>(new BN(0));
-  const [gasLimit, setGasLimit] = useState<BN>(new BN(GAS_LIMIT));
-  const [isBusy, setIsBusy] = useState(false);
-  const [outcomes, setOutcomes] = useState<ContractCallOutcome[]>([]);
-  const [params, setParams] = useState<any[]>(callMessage ? callMessage.def.args.map(({ type }): any => createValue({ type })) : []);
-  const [useRpc, setUseRpc] = useState(callMessage && !callMessage.def.mutates);
-
-  useEffect((): void => {
-    callMessage = callContract.getMessage(callMessageIndex);
-
-    setParams(callMessage ? callMessage.def.args.map(({ type }): any => createValue({ type })) : []);
-    if (!callMessage || callMessage.def.mutates) {
-      setUseRpc(false);
-    } else {
-      setUseRpc(true);
-    }
-  }, [callContract, callMessageIndex]);
-
-  useEffect((): void => {
-    setOutcomes([]);
-  }, [callContract]);
-
-  const _onChangeAccountId = (accountId: StringOrNull): void => setAccountId(accountId);
-
-  const _onChangeCallMessageIndexString = (callMessageIndexString: string): void => {
-    onChangeCallMessageIndex && onChangeCallMessageIndex(
-      parseInt(callMessageIndexString, 10) || 0
-    );
-  };
-
-  const _onChangeEndowment = (endowment?: BN): void => endowment && setEndowment(endowment);
-  const _onChangeGasLimit = (gasLimit?: BN): void => gasLimit && setGasLimit(gasLimit);
-
-  const _onChangeParams = (params: any[]): void => setParams(params);
-  const _toggleBusy = (): void => setIsBusy(!isBusy);
-
-  const _constructTx = (): any[] => {
-    if (!accountId || !callMessage || !callMessage.fn || !callContract || !callContract.address) {
-      return [];
-    }
-
-    return [callContract.address.toString(), endowment, gasLimit, callMessage.fn(...params)];
-  };
-
-  const _onSubmitRpc = (): void => {
-    if (!accountId) return;
-
-    callContract
-      .call('rpc', callMessage.def.name, endowment, gasLimit, ...params)
-      .send(accountId)
-      .then(
-        (outcome: ContractCallOutcome): void => {
-          setOutcomes([outcome, ...outcomes]);
-        }
-      );
-  };
-
-  const _onClearOutcomes = (): void => setOutcomes([]);
-  const _onClearOutcome = (outcomeIndex: number) => (): void => {
-    setOutcomes(outcomes.slice(0, outcomeIndex).concat(outcomes.slice(outcomeIndex + 1)));
-  };
-
-  const isEndowmentValid = true;
-  const isGasValid = !gasLimit.isZero();
-  const isValid = !!accountId && isEndowmentValid && isGasValid && callContract && callContract.address && callContract.abi;
-
-  return (
-    <Modal
-      className={[className || '', 'app--contracts-Modal'].join(' ')}
-      dimmer='inverted'
-      onClose={onClose}
-      open={isOpen}
-    >
-      <Modal.Header>
-        {t('Call a contract')}
-      </Modal.Header>
-      <Modal.Content>
-        {callContract && (
-          <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.')}
-              isDisabled={isBusy}
-              label={t('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.')}
-              isDisabled={isBusy}
-              label={t('contract to use')}
-              onChange={onChangeCallContractAddress}
-              type='contract'
-              value={callContract.address.toString()}
-            />
-            {callMessageIndex !== null && (
-              <>
-                <Dropdown
-                  defaultValue={`${callMessage.index}`}
-                  help={t('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')}
-                  onChange={_onChangeCallMessageIndexString}
-                  options={getCallMessageOptions(callContract)}
-                  value={`${callMessage.index}`}
-                />
-                <Params
-                  isDisabled={isBusy}
-                  onChange={_onChangeParams}
-                  params={
-                    callMessage
-                      ? callMessage.def.args
-                      : undefined
-                  }
-                />
-              </>
-            )}
-            <InputBalance
-              help={t('The allotted value for this contract, i.e. the amount transferred to the contract as part of this call.')}
-              isDisabled={isBusy}
-              isError={!isEndowmentValid}
-              label={t('value')}
-              onChange={_onChangeEndowment}
-              value={endowment}
-            />
-            <InputNumber
-              defaultValue={gasLimit}
-              help={t('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')}
-              onChange={_onChangeGasLimit}
-              value={gasLimit}
-            />
-          </div>
-        )}
-        {hasRpc && (
-          <Toggle
-            className='rpc-toggle'
-            isDisabled={!!callMessage && callMessage.def.mutates}
-            label={
-              useRpc
-                ? t('send as RPC call')
-                : t('send as transaction')
-            }
-            onChange={setUseRpc}
-            value={useRpc || false}
-          />
-        )}
-        <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            onClick={onClose}
-            label={t('Cancel')}
-          />
-          <Button.Or />
-          {useRpc
-            ? (
-              <Button
-                icon='sign-in'
-                isDisabled={!isValid}
-                isPrimary
-                label={t('Call')}
-                onClick={_onSubmitRpc}
-              />
-            )
-            : (
-              <TxButton
-                accountId={accountId}
-                icon='sign-in'
-                isDisabled={!isValid}
-                isPrimary
-                label={t('Call')}
-                onClick={_toggleBusy}
-                onFailed={_toggleBusy}
-                onSuccess={_toggleBusy}
-                params={_constructTx}
-                tx={api.tx.contracts ? 'contracts.call' : 'contract.call'}
-              />
-            )
-          }
-        </Button.Group>
-        {outcomes.length > 0 && (
-          <>
-            <h3>
-              {t('Call results')}
-              <IconLink
-                className='clear-all'
-                icon='close'
-                label={t('Clear all')}
-                onClick={_onClearOutcomes}
-              />
-            </h3>
-            <div>
-              {outcomes.map((outcome, index): React.ReactNode => (
-                <Outcome
-                  key={`outcome-${index}`}
-                  onClear={_onClearOutcome(index)}
-                  outcome={outcome}
-                />
-              ))}
-            </div>
-          </>
-        )}
-      </Modal.Content>
-    </Modal>
-  );
-}
-
-export default withMulti(
-  styled(Call)`
-    .rpc-toggle {
-      margin-top: 1rem;
-      display: flex;
-      justify-content: flex-end;
-    }
-
-    .clear-all {
-      float: right;
-    }
-  `,
-  translate,
-  withApi
-);
diff --git a/pioneer/packages/old-apps/app-contracts/src/Contracts/Contract.tsx b/pioneer/packages/old-apps/app-contracts/src/Contracts/Contract.tsx
deleted file mode 100644
index 8cdfba65b4..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/Contracts/Contract.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ActionStatus } from '@polkadot/react-components/Status/types';
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { RouteComponentProps } from 'react-router';
-import { withRouter } from 'react-router-dom';
-import keyring from '@polkadot/ui-keyring';
-import { PromiseContract as ApiContract } from '@polkadot/api-contract';
-import { AddressRow, Button, Card, Forget, Messages } from '@polkadot/react-components';
-
-import translate from '../translate';
-
-interface Props extends I18nProps, RouteComponentProps {
-  basePath: string;
-  contract: ApiContract;
-  onCall: (_?: number) => () => void;
-}
-
-const ContractCard = styled(Card)`
-  && {
-    min-width: 100%;
-    max-width: 100%;
-  }
-`;
-
-function Contract (props: Props): React.ReactElement<Props> | null {
-  const { contract: { abi, address }, onCall, t } = props;
-
-  if (!address || !abi) {
-    return null;
-  }
-
-  const [isForgetOpen, setIsForgetOpen] = useState(false);
-
-  const _toggleForget = (): void => setIsForgetOpen(!isForgetOpen);
-  const _onForget = (): void => {
-    if (!address) {
-      return;
-    }
-
-    const status: Partial<ActionStatus> = {
-      account: address,
-      action: 'forget'
-    };
-
-    try {
-      keyring.forgetContract(address.toString());
-      status.status = 'success';
-      status.message = t('address forgotten');
-    } catch (error) {
-      status.status = 'error';
-      status.message = error.message;
-    }
-    _toggleForget();
-  };
-
-  return (
-    <ContractCard>
-      {
-        isForgetOpen && (
-          <Forget
-            address={address.toString()}
-            mode='contract'
-            onForget={_onForget}
-            key='modal-forget-contract'
-            onClose={_toggleForget}
-          />
-        )
-      }
-      <AddressRow
-        buttons={
-          <div className='contracts--Contract-buttons'>
-            <Button
-              icon='trash'
-              isNegative
-              onClick={_toggleForget}
-              size='small'
-              tooltip={t('Forget this contract')}
-            />
-            <Button
-              icon='play'
-              isPrimary
-              label={t('execute')}
-              onClick={onCall()}
-              size='small'
-              tooltip={t('Call a method on this contract')}
-            />
-          </div>
-        }
-        isContract
-        isEditable
-        type='contract'
-        value={address}
-        withBalance={false}
-        withNonce={false}
-        withTags
-      >
-        <details>
-          <summary>{t('Messages')}</summary>
-          <Messages
-            address={address.toString()}
-            contractAbi={abi}
-            isRemovable={false}
-            onSelect={onCall}
-          />
-        </details>
-      </AddressRow>
-    </ContractCard>
-  );
-}
-
-export default translate(withRouter(Contract));
diff --git a/pioneer/packages/old-apps/app-contracts/src/Contracts/Outcome.tsx b/pioneer/packages/old-apps/app-contracts/src/Contracts/Outcome.tsx
deleted file mode 100644
index 76e7022c11..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/Contracts/Outcome.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-contracts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ContractCallOutcome } from '@polkadot/api-contract/types';
-
-import React from 'react';
-import styled from 'styled-components';
-import { AddressMini, Button, MessageSignature, Output } from '@polkadot/react-components';
-
-interface Props {
-  className?: string;
-  onClear?: () => void;
-  outcome: ContractCallOutcome;
-}
-
-function Outcome (props: Props): React.ReactElement<Props> | null {
-  const { className, onClear, outcome: { message, origin, output, params, isSuccess, time } } = props;
-  const dateTime = new Date(time);
-
-  return (
-    <div className={className}>
-      <div className='info'>
-        <AddressMini
-          className='origin'
-          value={origin}
-          withAddress={false}
-          isPadded={false}
-        />
-        <MessageSignature
-          message={message}
-          params={params}
-        />
-        <span className='date-time'>
-          {dateTime.toLocaleDateString()}
-          {' '}
-          {dateTime.toLocaleTimeString()}
-        </span>
-        <Button
-          className='icon-button clear-btn'
-          icon='close'
-          size='mini'
-          isPrimary
-          onClick={onClear}
-        />
-      </div>
-      <Output
-        isError={!isSuccess}
-        className='output'
-        value={(output || '()').toString()}
-        withCopy
-        withLabel={false}
-      />
-    </div>
-  );
-}
-
-export default styled(Outcome)`
-  & {
-    .info {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      padding: 0.5rem;
-
-      & > *:not(:first-child) {
-        padding-left: 1.5rem !important;
-      }
-    }
-
-    .clear-btn {
-      opacity: 0;
-    }
-
-    .date-time {
-      color: #aaa;
-      white-space: nowrap;
-    }
-
-    .origin {
-      padding-left: 0 !important;
-
-      * {
-        margin-left: 0 !important;
-      }
-    }
-
-    .output {
-      font-family: monospace;
-      margin-left: 3.5rem;
-
-      .ui--output {
-        border-color: #aaa;
-        margin: 0;
-      }
-    }
-
-    &:hover {
-      .clear-btn {
-        opacity: 1;
-      }
-    }
-  }
-`;
diff --git a/pioneer/packages/old-apps/app-contracts/src/Contracts/ValidateAddr.tsx b/pioneer/packages/old-apps/app-contracts/src/Contracts/ValidateAddr.tsx
deleted file mode 100644
index e977a9f4cc..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/Contracts/ValidateAddr.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/app-contracts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ContractInfo } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
-import { ApiProps } from '@polkadot/react-api/types';
-
-import React, { useEffect, useState } from 'react';
-import { Option } from '@polkadot/types';
-import { withCalls } from '@polkadot/react-api';
-import { InfoForInput } from '@polkadot/react-components';
-import keyring from '@polkadot/ui-keyring';
-
-import translate from '../translate';
-
-interface Props extends ApiProps, I18nProps {
-  address?: string | null;
-  contracts_contractInfoOf?: Option<ContractInfo>;
-  onChange: (isValid: boolean) => void;
-}
-
-function ValidateAddr ({ address, contracts_contractInfoOf, onChange, t }: Props): React.ReactElement<Props> | null {
-  const [isAddress, setIsAddress] = useState(false);
-  const [isStored, setIsStored] = useState(false);
-
-  useEffect((): void => {
-    try {
-      keyring.decodeAddress(address || '');
-      setIsAddress(true);
-    } catch (error) {
-      setIsAddress(false);
-    }
-  }, [address]);
-
-  useEffect((): void => {
-    setIsStored(!!contracts_contractInfoOf && contracts_contractInfoOf.isSome);
-  }, [contracts_contractInfoOf]);
-
-  useEffect((): void => {
-    onChange(isAddress && isStored);
-  }, [isAddress, isStored]);
-
-  if (isStored || !isAddress) {
-    return null;
-  }
-
-  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')
-      }
-    </InfoForInput>
-  );
-}
-
-export default translate(
-  withCalls<Props>(
-    ['query.contracts.contractInfoOf', {
-      fallbacks: ['query.contract.contractInfoOf'],
-      paramName: 'address'
-    }]
-  )(ValidateAddr)
-);
diff --git a/pioneer/packages/old-apps/app-contracts/src/Contracts/index.tsx b/pioneer/packages/old-apps/app-contracts/src/Contracts/index.tsx
deleted file mode 100644
index a83c2dbf61..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/Contracts/index.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ApiProps } from '@polkadot/react-api/types';
-import { I18nProps, StringOrNull } from '@polkadot/react-components/types';
-import { ComponentProps } from '../types';
-
-import React, { useState, useEffect } from 'react';
-import { PromiseContract as ApiContract } from '@polkadot/api-contract';
-import { withApi, withMulti } from '@polkadot/react-api';
-import { Button, CardGrid } from '@polkadot/react-components';
-
-import translate from '../translate';
-import Add from './Add';
-import ContractCard from './Contract';
-import Call from './Call';
-import { getContractForAddress } from './util';
-
-interface Props extends ComponentProps, I18nProps, ApiProps {}
-
-function filterContracts ({ api, accounts, contracts: keyringContracts }: Props): ApiContract[] {
-  return accounts && keyringContracts && Object.keys(keyringContracts)
-    .map((address): ApiContract | null => getContractForAddress(api, address))
-    .filter((contract: ApiContract | null): boolean => !!contract) as ApiContract[];
-}
-
-function Contracts (props: Props): React.ReactElement<Props> {
-  const { accounts, basePath, contracts: keyringContracts, hasCode, showDeploy, t } = props;
-  // const { callAddress, callMessage, isAddOpen, isCallOpen } = this.state;
-
-  const [contracts, setContracts] = useState<ApiContract[]>(filterContracts(props));
-  const [callContractIndex, setCallContractIndex] = useState<number>(0);
-  const [callMessageIndex, setCallMessageIndex] = useState<number>(0);
-  const [isAddOpen, setIsAddOpen] = useState(false);
-  const [isCallOpen, setIsCallOpen] = useState(false);
-
-  useEffect((): void => {
-    setContracts(filterContracts(props));
-  }, [accounts, keyringContracts]);
-
-  let callContract = contracts[callContractIndex] || null;
-
-  useEffect((): void => {
-    callContract = contracts[callContractIndex];
-  }, [callContractIndex]);
-
-  const _toggleAdd = (): void => setIsAddOpen(!isAddOpen);
-  const _toggleCall = (): void => setIsCallOpen(!isCallOpen);
-
-  const _onChangeCallContractAddress = (newCallContractAddress: StringOrNull): void => {
-    const index = contracts.findIndex(({ address }: ApiContract): boolean => newCallContractAddress === address.toString());
-
-    if (index > -1) {
-      index !== callContractIndex && setCallMessageIndex(0);
-      setCallContractIndex(index);
-    }
-  };
-
-  const _onChangeCallMessageIndex = (callMessageIndex: number): void => {
-    !!callContract && setCallMessageIndex(callMessageIndex);
-  };
-
-  const _onCall = (callContractIndex: number): (_?: number) => () => void => {
-    return function (callMessageIndex?: number): () => void {
-      return function (): void {
-        setCallContractIndex(callContractIndex);
-        setCallMessageIndex(callMessageIndex || 0);
-        setIsCallOpen(true);
-      };
-    };
-  };
-
-  return (
-    <>
-      <CardGrid
-        emptyText={t('No contracts available')}
-        buttons={
-          <Button.Group>
-            {hasCode && (
-              <>
-                <Button
-                  icon='cloud upload'
-                  isPrimary
-                  label={t('Deploy a code hash')}
-                  onClick={showDeploy()}
-                />
-                <Button.Or />
-              </>
-            )}
-            <Button
-              icon='add'
-              isPrimary
-              label={t('Add an existing contract')}
-              onClick={_toggleAdd}
-            />
-          </Button.Group>
-        }
-      >
-        {contracts
-          .map((contract: ApiContract, index): React.ReactNode => {
-            return (
-              <ContractCard
-                basePath={basePath}
-                contract={contract}
-                key={contract.address.toString()}
-                onCall={_onCall(index)}
-              />
-            );
-          })}
-      </CardGrid>
-      <Add
-        basePath={basePath}
-        isOpen={isAddOpen}
-        onClose={_toggleAdd}
-      />
-      <Call
-        callContract={callContract}
-        callMessageIndex={callMessageIndex}
-        isOpen={isCallOpen}
-        onChangeCallContractAddress={_onChangeCallContractAddress}
-        onChangeCallMessageIndex={_onChangeCallMessageIndex}
-        onClose={_toggleCall}
-      />
-    </>
-  );
-}
-
-export default withMulti(
-  Contracts,
-  translate,
-  withApi
-);
diff --git a/pioneer/packages/old-apps/app-contracts/src/Contracts/util.tsx b/pioneer/packages/old-apps/app-contracts/src/Contracts/util.tsx
deleted file mode 100644
index fe67d19dd0..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/Contracts/util.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-contracts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ContractABIFn, ContractABIMessage } from '@polkadot/api-contract/types';
-import { StringOrNull } from '@polkadot/react-components/types';
-
-import React from 'react';
-import { ApiPromise } from '@polkadot/api';
-import { PromiseContract as Contract } from '@polkadot/api-contract';
-import { MessageSignature } from '@polkadot/react-components';
-import { getContractAbi } from '@polkadot/react-components/util';
-
-export function findCallMethod (callContract: Contract | null, callMethodIndex = 0): ContractABIMessage | null {
-  const message = callContract && callContract.abi.abi.contract.messages[callMethodIndex];
-
-  return message || null;
-}
-
-export function getContractMethodFn (callContract: Contract | null, callMethodIndex: number | null): ContractABIFn | null {
-  const fn = callContract && callContract.abi && callMethodIndex !== null && callContract.abi.messages[callMethodIndex];
-
-  return fn || null;
-}
-
-export function getContractForAddress (api: ApiPromise, address: StringOrNull): Contract | null {
-  if (!address) {
-    return null;
-  } else {
-    const abi = getContractAbi(address);
-    return abi
-      ? new Contract(api, abi, address)
-      : null;
-  }
-}
-
-export function getCallMessageOptions (callContract: Contract | null): any[] {
-  return callContract
-    ? callContract.messages.map(({ def: message, def: { name }, index }): { key: string; text: React.ReactNode; value: string } => {
-      return {
-        key: name,
-        text: (
-          <MessageSignature message={message} />
-        ),
-        value: `${index}`
-      };
-    })
-    : [];
-}
diff --git a/pioneer/packages/old-apps/app-contracts/src/Deploy.tsx b/pioneer/packages/old-apps/app-contracts/src/Deploy.tsx
deleted file mode 100644
index 7ec70be5f2..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/Deploy.tsx
+++ /dev/null
@@ -1,330 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-contracts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { AccountId } from '@polkadot/types/interfaces';
-import { ApiProps } from '@polkadot/react-api/types';
-import { I18nProps } from '@polkadot/react-components/types';
-
-import BN from 'bn.js';
-import React from 'react';
-import { RouteComponentProps } from 'react-router';
-import { withRouter } from 'react-router-dom';
-import { SubmittableResult } from '@polkadot/api';
-import { Abi } from '@polkadot/api-contract';
-import { withApi, withMulti } from '@polkadot/react-api';
-import keyring from '@polkadot/ui-keyring';
-import { Button, Dropdown, InputBalance, MessageSignature, TxButton } from '@polkadot/react-components';
-import createValues from '@polkadot/react-params/values';
-
-import ContractModal, { ContractModalProps, ContractModalState } from './Modal';
-import Params from './Params';
-import store from './store';
-import translate from './translate';
-import { GAS_LIMIT } from './constants';
-
-type ConstructOptions = { key: string; text: React.ReactNode; value: string }[];
-
-interface Props extends ContractModalProps, ApiProps, I18nProps, RouteComponentProps {
-  codeHash?: string;
-  constructorIndex?: number;
-}
-
-interface State extends ContractModalState {
-  codeHash?: string;
-  constructorIndex: number;
-  constructOptions: ConstructOptions;
-  endowment: BN;
-  isHashValid: boolean;
-  params: any[];
-}
-
-class Deploy extends ContractModal<Props, State> {
-  protected headerText = 'Deploy a new contract';
-
-  public isContract = true;
-
-  constructor (props: Props) {
-    super(props);
-
-    this.defaultState = {
-      ...this.defaultState,
-      constructorIndex: -1,
-      constructOptions: [],
-      endowment: new BN(0),
-      gasLimit: new BN(GAS_LIMIT),
-      isHashValid: false,
-      params: [],
-      ...Deploy.getCodeState(props.codeHash)
-    };
-    this.state = this.defaultState;
-  }
-
-  public static getDerivedStateFromProps (props: Props, state: State): Pick<State, never> {
-    if (props.codeHash && (!state.codeHash || state.codeHash !== props.codeHash)) {
-      return Deploy.getCodeState(props.codeHash, Math.max(props.constructorIndex || 0));
-    }
-
-    return {};
-  }
-
-  private static getContractAbiState = (abi: string | null | undefined, contractAbi: Abi | null = null, constructorIndex = 0): Partial<State> => {
-    if (contractAbi) {
-      return {
-        abi,
-        constructorIndex,
-        contractAbi,
-        isAbiValid: !!contractAbi,
-        ...Deploy.getConstructorState(contractAbi, Math.max(constructorIndex, 0))
-      };
-    } else {
-      return {
-        constructorIndex: -1,
-        constructOptions: [] as ConstructOptions,
-        abi: null,
-        contractAbi: null,
-        isAbiSupplied: false,
-        isAbiValid: false,
-        ...Deploy.getConstructorState()
-      };
-    }
-  }
-
-  private static getCodeState = (codeHash: string | null = null, constructorIndex = 0): Pick<State, never> => {
-    if (codeHash) {
-      const code = store.getCode(codeHash);
-
-      if (code) {
-        const { contractAbi, json } = code;
-
-        return {
-          codeHash,
-          isAbiSupplied: !!contractAbi,
-          name: `${json.name} (instance)`,
-          isHashValid: true,
-          isNameValid: true,
-          ...Deploy.getContractAbiState(json.abi, contractAbi, Math.max(constructorIndex, 0))
-        };
-      }
-    }
-
-    return {};
-  }
-
-  private static getConstructorState = (contractAbi: Abi | null = null, ci = 0): Pick<State, never> => {
-    const constructorIndex = Math.max(ci, 0);
-    if (!contractAbi || constructorIndex < 0 || constructorIndex >= contractAbi.constructors.length) {
-      return {
-        constructorIndex: -1,
-        constructOptions: [],
-        params: []
-      };
-    }
-
-    const { abi: { contract: { constructors } } } = contractAbi;
-    const constructor = constructors[constructorIndex];
-    const constructOptions: ConstructOptions = constructors.map(
-      (constr, index) => {
-        return {
-          key: `${index}`,
-          text: (
-            <MessageSignature
-              asConstructor
-              message={constr}
-            />
-          ),
-          value: `${index}`
-        };
-      });
-
-    return {
-      constructorIndex,
-      constructOptions,
-      params: createValues(constructor.args)
-    };
-  }
-
-  protected renderContent = (): React.ReactNode => {
-    const { t } = this.props;
-    const { codeHash, constructorIndex, constructOptions, contractAbi, endowment, isAbiSupplied, isBusy, isHashValid } = this.state;
-
-    const codeOptions = store.getAllCode().map(({ json: { codeHash, name } }): { text: string; value: string } => ({
-      text: `${name} (${codeHash})`,
-      value: codeHash
-    }));
-
-    const defaultCode = codeOptions.length
-      ? codeOptions[codeOptions.length - 1].value
-      : undefined;
-
-    return (
-      <>
-        {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.')}
-          isDisabled={isBusy}
-          isError={!isHashValid}
-          label={t('code for this contract')}
-          onChange={this.onChangeCode}
-          options={codeOptions}
-          value={codeHash}
-        />
-        {this.renderInputName()}
-        {
-          isAbiSupplied
-            ? null
-            : this.renderInputAbi()
-        }
-        {
-          contractAbi
-            ? (
-              <Dropdown
-                help={t('The deployment constructor information for this contract, as provided by the ABI.')}
-                isDisabled={contractAbi.abi.contract.constructors.length <= 1}
-                label={t('constructor ')}
-                onChange={this.onChangeConstructorIndex}
-                options={constructOptions}
-                style={{ fontFamily: 'monospace' }}
-                value={`${constructorIndex}`}
-                withLabel
-              />
-            )
-            : null
-        }
-        <Params
-          isDisabled={isBusy}
-          onChange={this.onChangeParams}
-          onEnter={this.sendTx}
-          params={
-            contractAbi && constructorIndex >= 0
-              ? contractAbi.abi.contract.constructors[constructorIndex].args
-              : []
-          }
-        />
-        <InputBalance
-          help={t('The allotted endowment for this contract, i.e. the amount transferred to the contract upon instantiation.')}
-          isDisabled={isBusy}
-          isError={endowment.isZero()}
-          label={t('endowment')}
-          onChange={this.onChangeEndowment}
-          onEnter={this.sendTx}
-          value={endowment}
-        />
-        {this.renderInputGas()}
-      </>
-    );
-  }
-
-  protected renderButtons = (): React.ReactNode => {
-    const { api, t } = this.props;
-    const { accountId, endowment, gasLimit, isAbiValid, isHashValid, isNameValid } = this.state;
-    const isEndowValid = !endowment.isZero();
-    const isGasValid = !gasLimit.isZero();
-    const isValid = isAbiValid && isHashValid && isEndowValid && isGasValid && !!accountId && isNameValid;
-
-    return (
-      <Button.Group>
-        {this.renderCancelButton()}
-        <TxButton
-          accountId={accountId}
-          icon='cloud upload'
-          isDisabled={!isValid}
-          isPrimary
-          label={t('Deploy')}
-          onClick={this.toggleBusy(true)}
-          onFailed={this.toggleBusy(false)}
-          onSuccess={this.onSuccess}
-          params={this.constructCall}
-          tx={
-            api.tx.contracts
-              ? api.tx.contracts.instantiate
-                ? 'contracts.instantiate' // V2 (new)
-                : 'contracts.create' // V2 (old)
-              : 'contract.create' // V1
-          }
-          ref={this.button}
-        />
-      </Button.Group>
-    );
-  }
-
-  private constructCall = (): any[] => {
-    const { codeHash, constructorIndex, contractAbi, endowment, gasLimit, params } = this.state;
-
-    if (!contractAbi || constructorIndex < 0) {
-      return [];
-    }
-
-    return [endowment, gasLimit, codeHash, contractAbi.constructors[constructorIndex](...params)];
-  }
-
-  protected onAddAbi = (abi: string | null | undefined, contractAbi?: Abi | null): void => {
-    this.setState({
-      ...(Deploy.getContractAbiState(abi, contractAbi) as State)
-    });
-  }
-
-  private onChangeCode = (codeHash: string): void => {
-    this.setState(
-      Deploy.getCodeState(codeHash)
-    );
-  }
-
-  private onChangeConstructorIndex = (constructorIndexString: string): void => {
-    const { contractAbi } = this.state;
-    const constructorIndex = Math.max(0, parseInt(constructorIndexString, 10) || 0);
-
-    this.setState(
-      Deploy.getConstructorState(contractAbi, constructorIndex)
-    );
-  };
-
-  private onChangeEndowment = (endowment?: BN | null): void => {
-    this.setState({ endowment: endowment || new BN(0) });
-  }
-
-  private onChangeParams = (params: any[]): void => {
-    this.setState({ params });
-  }
-
-  private onSuccess = (result: SubmittableResult): void => {
-    const { api, history } = this.props;
-
-    const section = api.tx.contracts ? 'contracts' : 'contract';
-    const records = result.filterRecords(section, 'Instantiated');
-
-    if (records.length) {
-      // find the last EventRecord (in the case of multiple contracts deployed - we should really be
-      // more clever here to find the exact contract deployed, this works for eg. Delegator)
-      const address = records[records.length - 1].event.data[1] as unknown as AccountId;
-
-      this.setState(({ abi, name, tags }): Pick<State, never> | unknown => {
-        if (!abi || !name) {
-          return;
-        }
-
-        keyring.saveContract(address.toString(), {
-          name,
-          contract: {
-            abi,
-            genesisHash: api.genesisHash.toHex()
-          },
-          tags
-        });
-
-        history.push(this.props.basePath);
-
-        this.onClose();
-
-        return { isBusy: false };
-      });
-    }
-  }
-}
-
-export default withMulti(
-  withRouter(Deploy),
-  translate,
-  withApi
-);
diff --git a/pioneer/packages/old-apps/app-contracts/src/Modal.tsx b/pioneer/packages/old-apps/app-contracts/src/Modal.tsx
deleted file mode 100644
index b45ecf3482..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/Modal.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-contracts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-
-import BN from 'bn.js';
-import React from 'react';
-import { Abi } from '@polkadot/api-contract';
-import { Button, Input, InputAddress, InputNumber, Modal, TxComponent } from '@polkadot/react-components';
-
-import ABI from './ABI';
-
-export interface ContractModalProps extends I18nProps {
-  basePath: string;
-  isNew?: boolean;
-  isOpen: boolean;
-  onClose?: () => void;
-}
-
-export interface ContractModalState {
-  abi?: string | null;
-  accountId?: string | null;
-  contractAbi?: Abi | null;
-  gasLimit: BN;
-  isAbiSupplied: boolean;
-  isAbiValid: boolean;
-  isBusy: boolean;
-  isNameValid: boolean;
-  name?: string | null;
-  tags: string[];
-}
-
-class ContractModal<P extends ContractModalProps, S extends ContractModalState> extends TxComponent<P, S> {
-  // horrible :(
-  protected defaultState: S = {
-    accountId: null,
-    gasLimit: new BN(0),
-    isAbiSupplied: false,
-    isAbiValid: false,
-    isBusy: false,
-    isNameValid: false,
-    name: null,
-    tags: [] as string[]
-  } as S;
-
-  public state: S = this.defaultState;
-
-  protected isContract?: boolean;
-
-  public render (): React.ReactNode {
-    const { isOpen, t } = this.props;
-
-    return (
-      <Modal
-        className='app--contracts-Modal'
-        dimmer='inverted'
-        onClose={this.onClose}
-        open={isOpen}
-      >
-        <Modal.Header>
-          {t(this.headerText)}
-        </Modal.Header>
-        <Modal.Content>
-          {this.renderContent()}
-        </Modal.Content>
-        <Modal.Actions>
-          {this.renderButtons()}
-        </Modal.Actions>
-      </Modal>
-    );
-  }
-
-  protected headerText = '';
-
-  protected renderContent: () => React.ReactNode | null = (): React.ReactNode => null;
-
-  protected renderButtons: () => React.ReactNode | null = (): React.ReactNode => null;
-
-  protected renderInputAbi (): React.ReactNode {
-    const { t } = this.props;
-    const { isBusy } = this.state;
-
-    return (
-      <ABI
-        help={t(
-          this.isContract
-            ? 'The ABI for the WASM code. Since we will be making a call into the code, the ABI is required and stored for future operations such as sending messages.'
-            : 'The ABI for the WASM code. In this step it is optional, but setting it here simplifies the setup of contract instances.'
-        )}
-        label={t(
-          this.isContract
-            ? 'contract ABI'
-            : 'contract ABI (optional)'
-        )}
-        onChange={this.onAddAbi}
-        isDisabled={isBusy}
-        isRequired={this.isContract}
-      />
-    );
-  }
-
-  protected renderInputAccount (): React.ReactNode {
-    const { t } = this.props;
-    const { accountId, isBusy } = this.state;
-
-    return (
-      <InputAddress
-        help={t('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')}
-        onChange={this.onChangeAccount}
-        type='account'
-        value={accountId}
-      />
-    );
-  }
-
-  protected renderInputName (): React.ReactNode {
-    const { isNew, t } = this.props;
-    const { isBusy, isNameValid, name } = this.state;
-
-    return (
-      <Input
-        help={t(
-          this.isContract
-            ? 'A name for the deployed contract to help users distinguish. Only used for display purposes.'
-            : 'A name for this WASM code to help users distinguish. Only used for display purposes.'
-        )}
-        isDisabled={isBusy}
-        isError={!isNameValid}
-        label={t(
-          this.isContract
-            ? 'contract name'
-            : 'code bundle name'
-        )}
-        onChange={this.onChangeName}
-        onEnter={this[isNew ? 'sendTx' : 'submit']}
-        value={name || ''}
-      />
-    );
-  }
-
-  protected renderInputGas (): React.ReactNode {
-    const { t } = this.props;
-    const { gasLimit, isBusy } = this.state;
-    const isGasValid = !gasLimit.isZero();
-
-    return (
-      <InputNumber
-        help={t('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')}
-        onChange={this.onChangeGas}
-        onEnter={this.sendTx}
-        value={gasLimit || ''}
-      />
-    );
-  }
-
-  protected renderCancelButton (): React.ReactNode {
-    const { t } = this.props;
-
-    return (
-      <>
-        <Button
-          icon='cancel'
-          isNegative
-          onClick={this.onClose}
-          label={t('Cancel')}
-        />
-        <Button.Or />
-      </>
-    );
-  }
-
-  protected reset = (): void => {
-    this.setState(
-      this.defaultState
-    );
-  }
-
-  protected toggleBusy = (isBusy?: boolean): () => void =>
-    (): void => {
-      this.setState((state: S): S => {
-        return {
-          isBusy: isBusy === undefined ? !state.isBusy : isBusy
-        } as unknown as S;
-      });
-    }
-
-  protected onClose = (): void => {
-    const { onClose } = this.props;
-    const { isBusy } = this.state;
-
-    onClose && onClose();
-    if (!isBusy) {
-      this.reset();
-    }
-  }
-
-  protected onAddAbi = (abi: string | null | undefined, contractAbi: Abi | null = null, isAbiSupplied = false): void => {
-    this.setState({ abi, contractAbi, isAbiSupplied, isAbiValid: !!abi });
-  }
-
-  protected onChangeAccount = (accountId: string | null): void => {
-    this.setState({ accountId });
-  }
-
-  protected onChangeName = (name: string): void => {
-    this.setState({ name, isNameValid: name.length !== 0 });
-  }
-
-  protected onChangeGas = (gasLimit: BN | undefined): void => {
-    this.setState({ gasLimit: gasLimit || new BN(0) });
-  }
-}
-
-export default ContractModal;
diff --git a/pioneer/packages/old-apps/app-contracts/src/Params.tsx b/pioneer/packages/old-apps/app-contracts/src/Params.tsx
deleted file mode 100644
index fecd0de5a0..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/Params.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-contracts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ContractABIFnArg } from '@polkadot/api-contract/types';
-import { TypeDef } from '@polkadot/types/types';
-import { RawParams } from '@polkadot/react-params/types';
-
-import React, { useEffect, useState } from 'react';
-import UIParams from '@polkadot/react-params';
-
-interface Props {
-  isDisabled?: boolean;
-  params?: ContractABIFnArg[];
-  onChange: (values: any[]) => void;
-  onEnter?: () => void;
-}
-
-interface ParamDef {
-  name: string;
-  type: TypeDef;
-}
-
-export default function Params ({ isDisabled, onChange, onEnter, params: propParams }: Props): React.ReactElement<Props> | null {
-  const [params, setParams] = useState<ParamDef[]>([]);
-
-  useEffect((): void => {
-    if (propParams) {
-      setParams(propParams);
-    }
-  }, [propParams]);
-
-  if (!params.length) {
-    return null;
-  }
-
-  const _onChange = (values: RawParams): void => {
-    onChange(values.map(({ value }): any => value));
-  };
-
-  return (
-    <UIParams
-      isDisabled={isDisabled}
-      onChange={_onChange}
-      onEnter={onEnter}
-      params={params}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/app-contracts/src/RemoveABI.tsx b/pioneer/packages/old-apps/app-contracts/src/RemoveABI.tsx
deleted file mode 100644
index d2f1f7a6dd..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/RemoveABI.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { CodeStored } from '@polkadot/app-contracts/types';
-
-import React from 'react';
-import { Button, CodeRow, Modal } from '@polkadot/react-components';
-
-import translate from './translate';
-
-interface Props extends I18nProps {
-  code: CodeStored;
-  onClose: () => void;
-  onRemove: () => void;
-}
-
-function RemoveABI ({ code, onClose, onRemove, t }: Props): React.ReactElement<Props> {
-  const _onRemove = (): void => {
-    onClose && onClose();
-    onRemove();
-  };
-  return (
-    <Modal
-      className='app--accounts-Modal'
-      dimmer='inverted'
-      onClose={onClose}
-      open
-    >
-      <Modal.Header>
-        {t('Confirm ABI removal')}
-      </Modal.Header>
-      <Modal.Content>
-        <CodeRow
-          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>
-        </CodeRow>
-      </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            isNegative
-            onClick={onClose}
-            label={t('Cancel')}
-            icon='cancel'
-          />
-          <Button.Or />
-          <Button
-            isPrimary
-            onClick={_onRemove}
-            label={t('Remove')}
-            icon='trash'
-          />
-        </Button.Group>
-      </Modal.Actions>
-    </Modal>
-  );
-}
-
-export default translate(RemoveABI);
diff --git a/pioneer/packages/old-apps/app-contracts/src/constants.ts b/pioneer/packages/old-apps/app-contracts/src/constants.ts
deleted file mode 100644
index 616a624eda..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/constants.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-export const ENDOWMENT = 1000;
-export const GAS_LIMIT = 500000;
-export const CONTRACT_NULL = {
-  abi: null,
-  address: null
-};
diff --git a/pioneer/packages/old-apps/app-contracts/src/index.tsx b/pioneer/packages/old-apps/app-contracts/src/index.tsx
deleted file mode 100644
index ad23819c30..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/index.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-contracts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
-import { TabItem } from '@polkadot/react-components/Tabs';
-import { ComponentProps } from './types';
-
-import React from 'react';
-import { Route, Switch, RouteComponentProps } from 'react-router';
-import { withRouter } from 'react-router-dom';
-import { HelpOverlay, Tabs } from '@polkadot/react-components';
-import { withMulti, withObservable } from '@polkadot/react-api';
-import keyring from '@polkadot/ui-keyring';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-
-import introMd from './md/intro.md';
-import store from './store';
-import translate from './translate';
-import Contracts from './Contracts';
-import Codes from './Codes';
-import Deploy from './Deploy';
-
-interface Props extends AppProps, I18nProps, RouteComponentProps {
-  accounts: SubjectInfo[];
-  contracts: SubjectInfo[];
-}
-
-interface State {
-  codeHash?: string;
-  constructorIndex: number;
-  hasContracts: boolean;
-  isDeployOpen: boolean;
-  updated: number;
-}
-
-class App extends React.PureComponent<Props, State> {
-  public state: State = {
-    constructorIndex: 0,
-    hasContracts: false,
-    isDeployOpen: false,
-    updated: 0
-  };
-
-  constructor (props: Props) {
-    super(props);
-
-    store.on('new-code', this.triggerUpdate);
-    store.on('removed-code', this.triggerUpdate);
-
-    // since we have a dep on the async API, we load here
-    store.loadAll().catch((): void => {
-      // noop, handled internally
-    });
-  }
-
-  public static getDerivedStateFromProps ({ contracts }: Props): Pick<State, never> {
-    const hasContracts = !!contracts && Object.keys(contracts).length >= 1;
-
-    return {
-      hasContracts
-    };
-  }
-
-  public render (): React.ReactNode {
-    const { basePath, t } = this.props;
-    const { codeHash, constructorIndex, isDeployOpen } = this.state;
-    const hidden: string[] = [];
-
-    return (
-      <main className='contracts--App'>
-        <HelpOverlay md={introMd} />
-        <header>
-          <Tabs
-            basePath={basePath}
-            hidden={hidden}
-            items={[
-              {
-                name: 'code',
-                text: 'Code'
-              },
-              {
-                isRoot: true,
-                name: 'contracts',
-                text: 'Contracts'
-              }
-            ].map((tab): TabItem => ({ ...tab, text: t(tab.text) }))
-            }
-          />
-        </header>
-        <Switch>
-          <Route path={`${basePath}/code`} render={this.renderComponent(Codes)} />
-          <Route render={this.renderComponent(Contracts)} exact />
-        </Switch>
-        <Deploy
-          basePath={basePath}
-          codeHash={codeHash}
-          constructorIndex={constructorIndex}
-          isOpen={isDeployOpen}
-          onClose={this.hideDeploy}
-        />
-      </main>
-    );
-  }
-
-  private renderComponent (Component: React.ComponentType<ComponentProps>): () => React.ReactNode {
-    return (): React.ReactNode => {
-      const { accounts, basePath, contracts, onStatusChange } = this.props;
-      const { updated } = this.state;
-
-      if (!contracts) {
-        return null;
-      }
-
-      return (
-        <Component
-          accounts={accounts}
-          basePath={basePath}
-          contracts={contracts}
-          hasCode={store.hasCode}
-          onStatusChange={onStatusChange}
-          showDeploy={this.showDeploy}
-          updated={updated}
-        />
-      );
-    };
-  }
-
-  private showDeploy = (codeHash?: string, constructorIndex = 0): () => void =>
-    (): void => {
-      this.setState({
-        codeHash: codeHash || undefined,
-        constructorIndex,
-        isDeployOpen: true
-      });
-    }
-
-  private hideDeploy = (): void => {
-    this.setState({ isDeployOpen: false });
-  }
-
-  private triggerUpdate = (): void => {
-    this.setState({ updated: Date.now() });
-  }
-}
-
-export default withMulti(
-  withRouter(App),
-  translate,
-  withObservable(keyring.accounts.subject, { propName: 'accounts' }),
-  withObservable(keyring.contracts.subject, { propName: 'contracts' })
-);
diff --git a/pioneer/packages/old-apps/app-contracts/src/md/intro.md b/pioneer/packages/old-apps/app-contracts/src/md/intro.md
deleted file mode 100644
index 55c1290c8b..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/md/intro.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# contracts
-
-This contract management interface allows you to deploy WASM code for contracts, deploy contracts based on on-chain code and allows you to interact with contracts by sending messages.
-
-## warning
-
-Please be aware that this interface is very new and has not been thoroughly tested against all kinds of combinations of inputs - there are no doubt bugs lurking inside these sections. Additionally, the substrate contracts ABI is a very recent addition, and while stabilizing there may be changes and or-breakages while using this UI to interact.
-
-With all that said - if you do find issues, please log them.
-
-## basic operations
-
-The interface has 3 main areas -
-
-- **Code** This allows you to deploy WASM code on-chain or attach on-chain code into your local registry. Each code blob is identified by a unique hash, when deploying this will be saved, when attaching you would need to know the unique hash. From these bundles you can then move to the next step,
-- **Instance** This allows you to create contract instances using on-chain WASM code. Select the code to use, attach the ABI, specify the contract values and the contract can be deployed. As with the Code section, you can also attach on-chain instances when you know the address.
-- **Call** This allows you to send messages to contracts, via the address and attached ABIs.
diff --git a/pioneer/packages/old-apps/app-contracts/src/store.ts b/pioneer/packages/old-apps/app-contracts/src/store.ts
deleted file mode 100644
index faf6a5c119..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/store.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-contracts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Hash } from '@polkadot/types/interfaces';
-import { CodeJson, CodeStored } from './types';
-
-import EventEmitter from 'eventemitter3';
-import store from 'store';
-import { Abi } from '@polkadot/api-contract';
-import { createType } from '@polkadot/types';
-import { api } from '@polkadot/react-api';
-
-const KEY_CODE = 'code:';
-
-class Store extends EventEmitter {
-  private allCode: Record<string, CodeStored> = {};
-
-  public get hasCode (): boolean {
-    return Object.keys(this.allCode).length !== 0;
-  }
-
-  public getAllCode (): CodeStored[] {
-    return Object.values(this.allCode);
-  }
-
-  public getCode (codeHash: string): CodeStored {
-    return this.allCode[codeHash];
-  }
-
-  // eslint-disable-next-line @typescript-eslint/require-await
-  public async saveCode (codeHash: string | Hash, partial: Partial<CodeJson>): Promise<void> {
-    const hex = (typeof codeHash === 'string' ? createType('Hash', codeHash) : codeHash).toHex();
-
-    const existing = this.getCode(hex);
-
-    const json = {
-      ...(existing ? existing.json : {}),
-      ...partial,
-      codeHash: hex,
-      genesisHash: api.genesisHash.toHex()
-    };
-
-    store.set(`${KEY_CODE}${json.codeHash}`, json);
-
-    this.addCode(json as CodeJson);
-  }
-
-  public forgetCode (codeHash: string): void {
-    store.remove(`${KEY_CODE}${codeHash}`);
-
-    this.removeCode(codeHash);
-  }
-
-  public async loadAll (): Promise<void> {
-    try {
-      await api.isReady;
-
-      const genesisHash = api.genesisHash.toHex();
-
-      store.each((json: CodeJson, key: string): void => {
-        if (json && json.genesisHash !== genesisHash) {
-          return;
-        }
-
-        if (key.startsWith(KEY_CODE)) {
-          this.addCode(json);
-        }
-      });
-    } catch (error) {
-      console.error('Unable to load code', error);
-    }
-  }
-
-  private addCode (json: CodeJson): void {
-    try {
-      const abi = json.abi ? JSON.parse(json.abi) : null;
-      this.allCode[json.codeHash] = {
-        json,
-        contractAbi: abi
-          ? new Abi(abi)
-          : undefined
-      };
-
-      this.emit('new-code');
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
-  private removeCode (codeHash: string): void {
-    try {
-      delete this.allCode[codeHash];
-      this.emit('removed-code');
-    } catch (error) {
-      console.error(error);
-    }
-  }
-}
-
-export default new Store();
diff --git a/pioneer/packages/old-apps/app-contracts/src/translate.ts b/pioneer/packages/old-apps/app-contracts/src/translate.ts
deleted file mode 100644
index fbd789d271..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/translate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-contracts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { withTranslation } from 'react-i18next';
-
-export default withTranslation(['app-contracts']);
diff --git a/pioneer/packages/old-apps/app-contracts/src/types.ts b/pioneer/packages/old-apps/app-contracts/src/types.ts
deleted file mode 100644
index c595daaf77..0000000000
--- a/pioneer/packages/old-apps/app-contracts/src/types.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-contracts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Abi } from '@polkadot/api-contract';
-import { AppProps } from '@polkadot/react-components/types';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-
-// export interface LocationProps extends RouteComponentProps {}
-
-export interface ComponentProps extends AppProps {
-  accounts: SubjectInfo[];
-  contracts: SubjectInfo[];
-  hasCode: boolean;
-  showDeploy: (codeHash?: string, constructorIndex?: number) => () => void;
-  updated: number;
-}
-
-export interface CodeJson {
-  abi?: string | null;
-  codeHash: string;
-  name: string;
-  genesisHash: string;
-  tags: string[];
-}
-
-export interface CodeStored {
-  json: CodeJson;
-  contractAbi?: Abi;
-}
-
-export interface ContractJsonOld {
-  genesisHash: string;
-  abi: string;
-  address: string;
-  name: string;
-}
diff --git a/pioneer/packages/old-apps/app-explorer/LICENSE b/pioneer/packages/old-apps/app-explorer/LICENSE
deleted file mode 100644
index 0d381b2e97..0000000000
--- a/pioneer/packages/old-apps/app-explorer/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/pioneer/packages/old-apps/app-explorer/README.md b/pioneer/packages/old-apps/app-explorer/README.md
deleted file mode 100644
index 8aca29bcaa..0000000000
--- a/pioneer/packages/old-apps/app-explorer/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# @polkadot/app-explorer
diff --git a/pioneer/packages/old-apps/app-explorer/package.json b/pioneer/packages/old-apps/app-explorer/package.json
deleted file mode 100644
index a7de2b0841..0000000000
--- a/pioneer/packages/old-apps/app-explorer/package.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "@polkadot/app-explorer",
-  "version": "0.37.0-beta.63",
-  "main": "index.js",
-  "repository": "https://github.com/polkadot-js/apps.git",
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "contributors": [],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/react-components": "^0.37.0-beta.63"
-  }
-}
diff --git a/pioneer/packages/old-apps/app-explorer/src/BestHash.tsx b/pioneer/packages/old-apps/app-explorer/src/BestHash.tsx
deleted file mode 100644
index 90fc3fbe47..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/BestHash.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Header } from '@polkadot/types/interfaces';
-import { BareProps, CallProps } from '@polkadot/react-api/types';
-
-import React from 'react';
-import { withCalls } from '@polkadot/react-api';
-
-interface Props extends BareProps, CallProps {
-  label?: string;
-  chain_subscribeNewHeads?: Header;
-}
-
-function BestHash ({ className, label = '', style, chain_subscribeNewHeads }: Props): React.ReactElement<Props> {
-  return (
-    <div
-      className={className}
-      style={style}
-    >
-      {label}{
-        chain_subscribeNewHeads
-          ? chain_subscribeNewHeads.hash.toHex()
-          : undefined
-      }
-    </div>
-  );
-}
-
-export default withCalls<Props>('rpc.chain.subscribeNewHeads')(BestHash);
diff --git a/pioneer/packages/old-apps/app-explorer/src/BlockHeader.tsx b/pioneer/packages/old-apps/app-explorer/src/BlockHeader.tsx
deleted file mode 100644
index 4beb0fe00a..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/BlockHeader.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-explorer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import { Link } from 'react-router-dom';
-import styled from 'styled-components';
-import { HeaderExtended } from '@polkadot/api-derive';
-import { AddressMini, LinkPolkascan } from '@polkadot/react-components';
-import { formatNumber } from '@polkadot/util';
-
-interface Props extends BareProps {
-  isSummary?: boolean;
-  value?: HeaderExtended;
-  withExplorer?: boolean;
-  withLink?: boolean;
-}
-
-const renderDetails = ({ number: blockNumber, extrinsicsRoot, parentHash, stateRoot }: HeaderExtended): React.ReactNode => {
-  const parentHex = parentHash.toHex();
-
-  return (
-    <div className='contains'>
-      <div className='info'>
-        <label>parentHash</label>
-        <span className='hash'>{
-          blockNumber.unwrap().gtn(1)
-            ? <Link to={`/explorer/query/${parentHex}`}>{parentHex}</Link>
-            : parentHex
-        }</span>
-      </div>
-      <div className='info'>
-        <label>extrinsicsRoot</label>
-        <span className='hash'>{extrinsicsRoot.toHex()}</span>
-      </div>
-      <div className='info'>
-        <label>stateRoot</label>
-        <span className='hash'>{stateRoot.toHex()}</span>
-      </div>
-    </div>
-  );
-};
-
-function BlockHeader ({ className, isSummary, value, withExplorer, withLink }: Props): React.ReactElement<Props> | null {
-  if (!value) {
-    return null;
-  }
-
-  const hashHex = value.hash.toHex();
-  const textNumber = formatNumber(value.number);
-
-  return (
-    <article className={`explorer--BlockHeader ${className}`}>
-      <div className='header-outer'>
-        <div className='header'>
-          <div className='number'>{
-            withLink
-              ? <Link to={`/explorer/query/${hashHex}`}>{textNumber}</Link>
-              : textNumber
-          }&nbsp;</div>
-          <div className='hash'>{hashHex}</div>
-          <div className='author ui--media-small'>{
-            value.author
-              ? <AddressMini value={value.author} />
-              : undefined
-          }</div>
-        </div>
-      </div>
-      {
-        isSummary
-          ? undefined
-          : renderDetails(value)
-      }
-      {
-        withExplorer
-          ? <LinkPolkascan data={hashHex} type='block' />
-          : undefined
-      }
-    </article>
-  );
-}
-
-export default styled(BlockHeader)`
-  .author {
-    font-size: 1rem;
-    text-align: right;
-    vertical-align: middle;
-
-    > .ui--AddressMini.padded {
-      padding: 0;
-    }
-  }
-
-  .header {
-    color: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    vertical-align: middle;
-
-    > div {
-      display: inline-block;
-      font-weight: 100;
-      vertical-align: middle;
-      white-space: nowrap;
-    }
-
-    > .number {
-      font-size: 2.25rem;
-    }
-
-    .hash {
-      font-size: 1.5rem;
-      font-family: sans-serif;
-    }
-  }
-
-  .hash {
-    font-family: monospace;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .number {
-    align-items: center;
-    box-sizing: border-box;
-  }
-
-  .contains {
-    border: 0;
-    margin-top: 0.5rem;
-    text-align: center;
-
-    > .info {
-      margin-bottom: 0.125em;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
-      .ui--Labelled {
-        text-align: center;
-      }
-
-      > label {
-        display: inline-block;
-      }
-
-      > span,
-      > label {
-        vertical-align: middle;
-      }
-
-      label {
-        margin-right: 0.5rem;
-        min-width: 10rem;
-        text-align: right;
-      }
-    }
-  }
-`;
diff --git a/pioneer/packages/old-apps/app-explorer/src/BlockHeaders.tsx b/pioneer/packages/old-apps/app-explorer/src/BlockHeaders.tsx
deleted file mode 100644
index e140d16002..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/BlockHeaders.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-explorer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import React from 'react';
-import { HeaderExtended } from '@polkadot/api-derive';
-
-import BlockHeader from './BlockHeader';
-
-interface Props {
-  headers: HeaderExtended[];
-}
-
-export default function BlockHeaders ({ headers }: Props): React.ReactElement<Props> {
-  return (
-    <>
-      {headers.map((header, index): React.ReactNode => (
-        <BlockHeader
-          isSummary={!!index}
-          key={header.number.toString()}
-          value={header}
-          withLink={!header.number.isEmpty}
-        />
-      ))}
-    </>
-  );
-}
diff --git a/pioneer/packages/old-apps/app-explorer/src/BlockInfo/ByHash.tsx b/pioneer/packages/old-apps/app-explorer/src/BlockInfo/ByHash.tsx
deleted file mode 100644
index a331882e59..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/BlockInfo/ByHash.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/app-explorer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { EventRecord, SignedBlock } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import styled from 'styled-components';
-import { HeaderExtended } from '@polkadot/api-derive';
-import { withCalls } from '@polkadot/react-api';
-import { Columar } from '@polkadot/react-components';
-
-import BlockHeader from '../BlockHeader';
-import translate from '../translate';
-import Events from './Events';
-import Extrinsics from './Extrinsics';
-import Logs from './Logs';
-
-interface Props extends I18nProps {
-  system_events?: EventRecord[];
-  chain_getBlock?: SignedBlock;
-  chain_getHeader?: HeaderExtended;
-  value: string;
-}
-
-function BlockByHash ({ className, system_events, chain_getBlock, chain_getHeader }: Props): React.ReactElement<Props> | null {
-  if (!chain_getBlock || chain_getBlock.isEmpty || !chain_getHeader || chain_getHeader.isEmpty) {
-    return null;
-  }
-
-  return (
-    <div className={className}>
-      <header>
-        <BlockHeader
-          className='exporer--BlockByHash-BlockHeader'
-          value={chain_getHeader}
-          withExplorer
-        />
-      </header>
-      <Columar>
-        <Extrinsics
-          blockNumber={chain_getHeader.number.unwrap()}
-          value={chain_getBlock.block.extrinsics}
-        />
-        <Events value={system_events} />
-        <Logs value={chain_getHeader.digest.logs} />
-      </Columar>
-    </div>
-  );
-}
-
-export default translate(
-  withCalls<Props>(
-    ['rpc.chain.getBlock', { paramName: 'value' }],
-    ['derive.chain.getHeader', { paramName: 'value' }],
-    ['query.system.events', { atProp: 'value' }]
-  )(styled(BlockByHash)`
-    .exporer--BlockByHash-BlockHeader {
-      border: none;
-      box-shadow: none;
-    }
-  `)
-);
diff --git a/pioneer/packages/old-apps/app-explorer/src/BlockInfo/ByNumber.tsx b/pioneer/packages/old-apps/app-explorer/src/BlockInfo/ByNumber.tsx
deleted file mode 100644
index b8a7f90d63..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/BlockInfo/ByNumber.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/app-explorer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Hash } from '@polkadot/types/interfaces';
-
-import React from 'react';
-import { withCalls } from '@polkadot/react-api';
-
-import BlockByHash from './ByHash';
-
-interface Props {
-  chain_getBlockHash?: Hash;
-  value: string;
-}
-
-function BlockByNumber ({ chain_getBlockHash }: Props): React.ReactElement<Props> | null {
-  if (!chain_getBlockHash) {
-    return null;
-  }
-
-  return (
-    <BlockByHash value={chain_getBlockHash.toHex()} />
-  );
-}
-
-export default withCalls<Props>(
-  ['rpc.chain.getBlockHash', { paramName: 'value' }]
-)(BlockByNumber);
diff --git a/pioneer/packages/old-apps/app-explorer/src/BlockInfo/Events.tsx b/pioneer/packages/old-apps/app-explorer/src/BlockInfo/Events.tsx
deleted file mode 100644
index 1b2e6125ab..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/BlockInfo/Events.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-explorer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { EventRecord } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import { Column } from '@polkadot/react-components';
-
-import EventsDisplay from '../Events';
-import translate from '../translate';
-
-interface Props extends I18nProps {
-  value?: EventRecord[];
-}
-
-function Events ({ value, t }: Props): React.ReactElement<Props> | null {
-  if (!value || !value.length) {
-    return null;
-  }
-
-  return (
-    <Column headerText={t('events')}>
-      <EventsDisplay
-        eventClassName='explorer--BlockByHash-block'
-        events={
-          value.map((record, index): { key: string; record: EventRecord } => ({
-            key: `${index}`, record
-          }))
-        }
-      />
-    </Column>
-  );
-}
-
-export default translate(Events);
diff --git a/pioneer/packages/old-apps/app-explorer/src/BlockInfo/Extrinsics.tsx b/pioneer/packages/old-apps/app-explorer/src/BlockInfo/Extrinsics.tsx
deleted file mode 100644
index 19e5f2e036..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/BlockInfo/Extrinsics.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-explorer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BlockNumber, Extrinsic } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import styled from 'styled-components';
-import { GenericCall } from '@polkadot/types';
-import { AddressMini, Call, Column, LinkPolkascan } from '@polkadot/react-components';
-import { formatNumber } from '@polkadot/util';
-
-import translate from '../translate';
-
-interface Props extends I18nProps {
-  blockNumber?: BlockNumber;
-  label?: React.ReactNode;
-  value?: Extrinsic[] | null;
-}
-
-function renderSigner ({ t }: Props, extrinsic: Extrinsic): React.ReactNode {
-  if (!extrinsic.isSigned) {
-    return null;
-  }
-
-  return (
-    <div className='explorer--BlockByHash-header'>
-      <div>
-        <AddressMini value={extrinsic.signer} />
-      </div>
-      <div className='explorer--BlockByHash-nonce'>
-        {t('index')} {formatNumber(extrinsic.nonce)}
-      </div>
-    </div>
-  );
-}
-
-// FIXME This is _very_ similar to what we have in democracy/Item
-function renderExtrinsic (props: Props): (_: Extrinsic, __: number) => React.ReactNode {
-  const { blockNumber, t } = props;
-
-  return function ExplorerExtrinsic (extrinsic: Extrinsic, index: number): React.ReactNode {
-    const { meta, method, section } = GenericCall.findFunction(extrinsic.callIndex);
-    const isMortal = extrinsic.era.isMortalEra;
-    let eraEnd;
-    let eraStart;
-
-    if (blockNumber && isMortal) {
-      const mortalEra = extrinsic.era.asMortalEra;
-
-      eraEnd = mortalEra.death(blockNumber.toNumber());
-      eraStart = mortalEra.birth(blockNumber.toNumber());
-    }
-
-    return (
-      <article key={`extrinsic:${index}`}>
-        <div className='header'>
-          <h3>
-            {section}.{method}&nbsp;(#{formatNumber(index)})
-          </h3>
-          {renderSigner(props, extrinsic)}
-        </div>
-        <details>
-          <summary>{
-            meta && meta.documentation
-              ? meta.documentation.join(' ')
-              : t('Details')
-          }</summary>
-          <Call
-            className='details'
-            mortality={
-              isMortal
-                ? blockNumber
-                  ? t('mortal, valid from #{{startAt}} to #{{endsAt}}', {
-                    replace: {
-                      endsAt: formatNumber(eraEnd),
-                      startAt: formatNumber(eraStart)
-                    }
-                  })
-                  : t('mortal')
-                : t('immortal')
-            }
-            tip={extrinsic.tip.toBn()}
-            value={extrinsic}
-            withHash
-          />
-        </details>
-        {
-          extrinsic.isSigned
-            ? <LinkPolkascan data={extrinsic.hash.toHex()} type='extrinsic' />
-            : null
-        }
-      </article>
-    );
-  };
-}
-
-function renderContent (props: Props): React.ReactNode {
-  const { value = [] } = props;
-
-  return (value || []).map(renderExtrinsic(props));
-}
-
-function Extrinsics (props: Props): React.ReactElement<Props> {
-  const { className, label, t } = props;
-
-  return (
-    <Column
-      className={className}
-      emptyText={t('No pending extrinsics are in the queue')}
-      headerText={label || t('extrinsics')}
-    >
-      {renderContent(props)}
-    </Column>
-  );
-}
-
-export default translate(styled(Extrinsics)`
-  .explorer--BlockByHash-header {
-    position: absolute;
-    top: 0.25rem;
-    right: 0.75rem;
-  }
-
-  .explorer--BlockByHash-nonce {
-    font-size: 0.75rem;
-    margin-right: 2.25rem;
-    margin-top: -0.625rem;
-    opacity: 0.45;
-    text-align: right;
-  }
-`);
diff --git a/pioneer/packages/old-apps/app-explorer/src/BlockInfo/Logs.tsx b/pioneer/packages/old-apps/app-explorer/src/BlockInfo/Logs.tsx
deleted file mode 100644
index 65ff5bc9e0..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/BlockInfo/Logs.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-explorer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { DigestItem } from '@polkadot/types/interfaces';
-import { Codec, TypeDef } from '@polkadot/types/types';
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import { Struct, Tuple, U8a, Vec, getTypeDef } from '@polkadot/types';
-import { Column } from '@polkadot/react-components';
-import Params from '@polkadot/react-params';
-
-import translate from '../translate';
-
-interface Props extends I18nProps {
-  value?: DigestItem[];
-}
-
-function formatU8a (value: U8a): React.ReactNode {
-  return (
-    <Params
-      isDisabled
-      params={[{ type: getTypeDef('Bytes') }]}
-      values={[{ isValid: true, value }]}
-    />
-  );
-}
-
-function formatStruct (struct: Struct): React.ReactNode {
-  const types: Record<string, string> = struct.Type;
-  const params = Object.keys(types).map((name): { name: string; type: TypeDef } => ({
-    name,
-    type: getTypeDef(types[name])
-  }));
-  const values = struct.toArray().map((value): { isValid: boolean; value: Codec } => ({
-    isValid: true,
-    value
-  }));
-
-  return (
-    <Params
-      isDisabled
-      params={params}
-      values={values}
-    />
-  );
-}
-
-function formatTuple (tuple: Tuple): React.ReactNode {
-  const types = tuple.Types;
-  const params = types.map((type): { type: TypeDef } => ({
-    type: getTypeDef(type)
-  }));
-  const values = tuple.toArray().map((value): { isValid: boolean; value: Codec } => ({
-    isValid: true,
-    value
-  }));
-
-  return (
-    <Params
-      isDisabled
-      params={params}
-      values={values}
-    />
-  );
-}
-
-function formatVector (vector: Vec<any>): React.ReactNode {
-  const type = getTypeDef(vector.Type);
-  const values = vector.toArray().map((value): { isValid: boolean; value: Codec } => ({
-    isValid: true,
-    value
-  }));
-  const params = values.map((_, index): { name: string; type: TypeDef } => ({
-    name: `${index}`,
-    type
-  }));
-
-  return (
-    <Params
-      isDisabled
-      params={params}
-      values={values}
-    />
-  );
-}
-
-function renderItem ({ t }: Props): (item: DigestItem, index: number) => React.ReactNode {
-  return function LogItem (item: DigestItem, index: number): React.ReactNode {
-    let content: React.ReactNode;
-
-    if (item.value instanceof Struct) {
-      content = formatStruct(item.value);
-    } else if (item.value instanceof Tuple) {
-      content = formatTuple(item.value);
-    } else if (item.value instanceof Vec) {
-      content = formatVector(item.value);
-    } else if (item.value instanceof U8a) {
-      content = formatU8a(item.value);
-    } else {
-      content = <div>{item.value.toString().split(',').join(', ')}</div>;
-    }
-
-    return (
-      <div
-        className='explorer--BlockByHash-block'
-        key={index}
-      >
-        <article className='explorer--Container'>
-          <div className='header'>
-            <h3>{item.type.toString()}</h3>
-          </div>
-          <details>
-            <summary>{t('Details')}</summary>
-            {content}
-          </details>
-        </article>
-      </div>
-    );
-  };
-}
-
-function Logs (props: Props): React.ReactElement<Props> | null {
-  const { t, value } = props;
-
-  if (!value || !value.length) {
-    return null;
-  }
-
-  return (
-    <Column headerText={t('logs')}>
-      {value.map(renderItem(props))}
-    </Column>
-  );
-}
-
-export default translate(Logs);
diff --git a/pioneer/packages/old-apps/app-explorer/src/BlockInfo/index.tsx b/pioneer/packages/old-apps/app-explorer/src/BlockInfo/index.tsx
deleted file mode 100644
index a886603a2f..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/BlockInfo/index.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/app-explorer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BlockNumber } from '@polkadot/types/interfaces';
-import { BareProps } from '@polkadot/react-components/types';
-
-import React, { useEffect, useState } from 'react';
-import { withRouter } from 'react-router-dom';
-import { withCalls, withMulti } from '@polkadot/react-api';
-import { isHex } from '@polkadot/util';
-
-import Query from '../Query';
-import BlockByHash from './ByHash';
-import BlockByNumber from './ByNumber';
-
-interface Props extends BareProps {
-  chain_bestNumber?: BlockNumber;
-  match: {
-    params: {
-      value: string;
-    };
-  };
-}
-
-function Entry ({ chain_bestNumber, match: { params: { value } } }: Props): React.ReactElement<Props> | null {
-  const [stateValue, setStateValue] = useState<string>(value);
-
-  useEffect((): void => {
-    if (value && value !== stateValue) {
-      setStateValue(value);
-    } else if (!stateValue && chain_bestNumber) {
-      setStateValue(chain_bestNumber.toString());
-    }
-  }, [chain_bestNumber, value]);
-
-  if (!stateValue) {
-    return null;
-  }
-
-  const Component = isHex(stateValue)
-    ? BlockByHash
-    : BlockByNumber;
-
-  return (
-    <>
-      <Query />
-      <Component
-        key={stateValue}
-        value={stateValue}
-      />
-    </>
-  );
-}
-
-export default withMulti(
-  withRouter(Entry),
-  withCalls<Props>('derive.chain.bestNumber')
-);
diff --git a/pioneer/packages/old-apps/app-explorer/src/Events.tsx b/pioneer/packages/old-apps/app-explorer/src/Events.tsx
deleted file mode 100644
index d08997bcdd..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/Events.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-explorer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { KeyedEvent } from './types';
-
-import React from 'react';
-import { Event as EventDisplay } from '@polkadot/react-components';
-import { formatNumber } from '@polkadot/util';
-
-import translate from './translate';
-
-interface Props extends I18nProps {
-  emptyLabel?: React.ReactNode;
-  events: KeyedEvent[];
-  eventClassName?: string;
-  withoutIndex?: boolean;
-}
-
-function Events ({ emptyLabel, eventClassName, events, withoutIndex, t }: Props): React.ReactElement<Props> {
-  if (!events || events.length === 0) {
-    return (
-      <article>
-        {emptyLabel || t('no events available')}
-      </article>
-    );
-  }
-
-  return (
-    <>
-      {events.map(({ key, record: { event, phase } }: KeyedEvent): React.ReactNode => {
-        const extIndex = !withoutIndex && phase.isApplyExtrinsic
-          ? phase.asApplyExtrinsic
-          : -1;
-
-        if (!event.method || !event.section) {
-          return null;
-        }
-
-        return (
-          <article
-            className={`explorer--Container ${eventClassName}`}
-            key={key}
-          >
-            <div className='header'>
-              <h3>
-                {event.section}.{event.method}&nbsp;{
-                  extIndex !== -1
-                    ? `(#${formatNumber(extIndex)})`
-                    : ''
-                }
-              </h3>
-            </div>
-            <details>
-              <summary>
-                {
-                  event.meta && event.meta.documentation
-                    ? event.meta.documentation.join(' ')
-                    : 'Details'
-                }
-              </summary>
-              <EventDisplay
-                className='details'
-                value={event}
-              />
-            </details>
-          </article>
-        );
-      })}
-    </>
-  );
-}
-
-export default translate(Events);
diff --git a/pioneer/packages/old-apps/app-explorer/src/Forks.tsx b/pioneer/packages/old-apps/app-explorer/src/Forks.tsx
deleted file mode 100644
index c1ecce814c..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/Forks.tsx
+++ /dev/null
@@ -1,477 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/app-explorer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ApiProps } from '@polkadot/react-api/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { Header } from '@polkadot/types/interfaces';
-
-import React, { useContext, useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
-import { ApiContext } from '@polkadot/react-api';
-import { CardSummary, IdentityIcon, SummaryBox } from '@polkadot/react-components';
-import { formatNumber } from '@polkadot/util';
-
-import translate from './translate';
-
-interface LinkHeader {
-  author: string | null;
-  bn: string;
-  hash: string;
-  height: number;
-  isEmpty: boolean;
-  isFinalized: boolean;
-  parent: string;
-  width: number;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface LinkArray extends Array<Link> {}
-interface Link {
-  arr: LinkArray;
-  hdr: LinkHeader;
-}
-
-interface Props extends ApiProps, I18nProps {
-  className?: string;
-  finHead?: Header;
-  newHead?: Header;
-}
-
-type UnsubFn = () => void;
-
-interface Col {
-  author: string | null;
-  hash: string;
-  isEmpty: boolean;
-  isFinalized: boolean;
-  parent: string;
-  width: number;
-}
-
-interface Row {
-  bn: string;
-  cols: Col[];
-}
-
-// adjust the number of columns in a cell based on the children and tree depth
-function calcWidth (children: LinkArray): number {
-  return Math.max(1, children.reduce((total, { hdr: { width } }): number => {
-    return total + width;
-  }, 0));
-}
-
-// counts the height of a specific node
-function calcHeight (children: LinkArray): number {
-  return children.reduce((max, { hdr, arr }): number => {
-    hdr.height = hdr.isEmpty
-      ? 0
-      : 1 + calcHeight(arr);
-
-    return Math.max(max, hdr.height);
-  }, 0);
-}
-
-// a single column in a row, it just has the details for the entry
-function createCol ({ hdr: { author, hash, isEmpty, isFinalized, parent, width } }: Link): Col {
-  return { author, hash, isEmpty, isFinalized, parent, width };
-}
-
-// create a simplified structure that allows for easy rendering
-function createRows (arr: LinkArray): Row[] {
-  if (!arr.length) {
-    return [];
-  }
-
-  return createRows(
-    arr.reduce((children: LinkArray, { arr }: Link): LinkArray =>
-      children.concat(...arr), [])
-  ).concat({
-    bn: arr.reduce((result, { hdr: { bn } }): string =>
-      result || bn, ''),
-    cols: arr.map(createCol)
-  });
-}
-
-// fills in a header based on the supplied data
-function createHdr (bn: string, hash: string, parent: string, author: string | null, isEmpty = false): LinkHeader {
-  return { author, bn, hash, height: 0, isEmpty, isFinalized: false, parent, width: 0 };
-}
-
-// empty link helper
-function createLink (): Link {
-  return {
-    arr: [],
-    hdr: createHdr('', ' ', ' ', null, true)
-  };
-}
-
-// even out the columns, i.e. add empty spacers as applicable to get tree rendering right
-function addColumnSpacers (arr: LinkArray): void {
-  // check is any of the children has a non-empty set
-  const hasChildren = arr.some(({ arr }): boolean => arr.length !== 0);
-
-  if (hasChildren) {
-    // ok, non-empty found - iterate through an add at least an empty cell to all
-    arr
-      .filter(({ arr }): boolean => arr.length === 0)
-      .forEach(({ arr }): number => arr.push(createLink()));
-
-    const newArr = arr.reduce((flat: LinkArray, { arr }): LinkArray => flat.concat(...arr), []);
-
-    // go one level deeper, ensure that the full tree has empty spacers
-    addColumnSpacers(newArr);
-  }
-}
-
-// checks to see if a row has a single non-empty entry, i.e. it is a candidate for collapsing
-function isSingleRow (cols: Col[]): boolean {
-  if (!cols[0] || cols[0].isEmpty) {
-    return false;
-  }
-
-  return cols.reduce((result: boolean, col, index): boolean => {
-    return index === 0
-      ? result
-      : (!col.isEmpty ? false : result);
-  }, true);
-}
-
-function renderCol ({ author, hash, isEmpty, isFinalized, parent, width }: Col, index: number): React.ReactNode {
-  return (
-    <td
-      className={`header ${isEmpty && 'isEmpty'} ${isFinalized && 'isFinalized'}`}
-      colSpan={width}
-      key={`${hash}:${index}:${width}`}
-    >
-      {isEmpty
-        ? <div className='empty' />
-        : (
-          <>
-            {author && (
-              <IdentityIcon
-                className='author'
-                size={28}
-                value={author}
-              />
-            )}
-            <div className='contents'>
-              <div className='hash'>{hash}</div>
-              <div className='parent'>{parent}</div>
-            </div>
-          </>
-        )
-      }
-    </td>
-  );
-}
-
-// render the rows created by createRows to React nodes
-function renderRows (rows: Row[]): React.ReactNode[] {
-  const lastIndex = rows.length - 1;
-  let isPrevShort = false;
-
-  return rows.map(({ bn, cols }, index): React.ReactNode => {
-    // if not first, not last and single only, see if we can collapse
-    if (index !== 0 && index !== lastIndex && isSingleRow(cols)) {
-      if (isPrevShort) {
-        // previous one was already a link, this one as well - skip it
-        return null;
-      } else if (isSingleRow(rows[index - 1].cols)) {
-        isPrevShort = true;
-
-        return (
-          <tr key={bn}>
-            <td key='blockNumber' />
-            <td className='header isLink' colSpan={cols[0].width}>
-              <div className='link'>&#8942;</div>
-            </td>
-          </tr>
-        );
-      }
-    }
-
-    isPrevShort = false;
-
-    return (
-      <tr key={bn}>
-        <td key='blockNumber'>{`#${bn}`}</td>
-        {cols.map(renderCol)}
-      </tr>
-    );
-  });
-}
-
-function Forks ({ className, t }: Props): React.ReactElement<Props> | null {
-  const { api } = useContext(ApiContext);
-  const [tree, setTree] = useState<Link | null>(null);
-  const childrenRef = useRef<Map<string, string[]>>(new Map([['root', []]]));
-  const countRef = useRef({ numBlocks: 0, numForks: 0 });
-  const headersRef = useRef<Map<string, LinkHeader>>(new Map());
-  const firstNumRef = useRef('');
-
-  const _finalize = (hash: string): void => {
-    const hdr = headersRef.current.get(hash);
-
-    if (hdr && !hdr.isFinalized) {
-      hdr.isFinalized = true;
-
-      _finalize(hdr.parent);
-    }
-  };
-
-  // adds children for a specific header, retrieving based on matching parent
-  const _addChildren = (base: LinkHeader, children: LinkArray): LinkArray => {
-    const hdrs = (childrenRef.current.get(base.hash) || [])
-      .map((hash): LinkHeader | null => headersRef.current.get(hash) || null)
-      .filter((hdr): boolean => !!hdr) as LinkHeader[];
-
-    hdrs.forEach((hdr): void => {
-      children.push({ arr: _addChildren(hdr, []), hdr });
-    });
-
-    // caclulate the max height/width for this entry
-    base.height = calcHeight(children);
-    base.width = calcWidth(children);
-
-    // place the active (larger, finalized) columns first for the pyramid display
-    children.sort((a, b): number => {
-      if (a.hdr.width > b.hdr.width || a.hdr.height > b.hdr.height || a.hdr.isFinalized) {
-        return -1;
-      } else if (a.hdr.width < b.hdr.width || a.hdr.height < b.hdr.height || b.hdr.isFinalized) {
-        return 1;
-      }
-
-      return 0;
-    });
-
-    return children;
-  };
-
-  // create a tree list from the available headers
-  const _generateTree = (): Link => {
-    const root = createLink();
-
-    // add all the root entries first, we iterate from these
-    // We add the root entry explicitly, it exists as per init
-    (childrenRef.current.get('root') as string[]).forEach((hash): void => {
-      const hdr = headersRef.current.get(hash);
-
-      // if this fails, well, we have a bigger issue :(
-      if (hdr) {
-        root.arr.push({ arr: [], hdr: { ...hdr } });
-      }
-    });
-
-    // iterate through, adding the children for each of the root nodes
-    root.arr.forEach(({ arr, hdr }): void => {
-      _addChildren(hdr, arr);
-    });
-
-    // align the columns with empty spacers - this aids in display
-    addColumnSpacers(root.arr);
-
-    root.hdr.height = calcHeight(root.arr);
-    root.hdr.width = calcWidth(root.arr);
-
-    return root;
-  };
-
-  useEffect((): () => void => {
-    let _subFinHead: UnsubFn | null = null;
-    let _subNewHead: UnsubFn | null = null;
-
-    // callback when finalized
-    const _newFinalized = (header: Header): void => {
-      _finalize(header.hash.toHex());
-    };
-
-    // callback for the subscribe headers sub
-    const _newHeader = (header: Header): void => {
-      // formatted block info
-      const bn = formatNumber(header.number);
-      const hash = header.hash.toHex();
-      const parent = header.parentHash.toHex();
-      let isFork = false;
-
-      // if this the first one?
-      if (!firstNumRef.current) {
-        firstNumRef.current = bn;
-      }
-
-      if (!headersRef.current.has(hash)) {
-        // if this is the first, add to the root entry
-        if (firstNumRef.current === bn) {
-          (childrenRef.current.get('root') as any[]).push(hash);
-        }
-
-        // add to the header map
-        // also for HeaderExtended header.author ? header.author.toString() : null
-        headersRef.current.set(hash, createHdr(bn, hash, parent, null));
-
-        // check to see if the children already has a entry
-        if (childrenRef.current.has(parent)) {
-          isFork = true;
-          (childrenRef.current.get(parent) as any[]).push(hash);
-        } else {
-          childrenRef.current.set(parent, [hash]);
-        }
-
-        // if we don't have the parent of this one, retrieve it
-        if (!headersRef.current.has(parent)) {
-          // just make sure we are not first in the list, we don't want to full chain
-          if (firstNumRef.current !== bn) {
-            console.warn(`Retrieving missing header ${header.parentHash.toHex()}`);
-
-            api.rpc.chain.getHeader(header.parentHash).then(_newHeader);
-
-            // catch the refresh on the result
-            return;
-          }
-        }
-
-        // update our counters
-        countRef.current.numBlocks++;
-
-        if (isFork) {
-          countRef.current.numForks++;
-        }
-
-        // do the magic, extract the info into something useful and add to state
-        setTree(_generateTree());
-      }
-    };
-
-    (async (): Promise<void> => {
-      _subFinHead = await api.rpc.chain.subscribeFinalizedHeads(_newFinalized);
-      _subNewHead = await api.rpc.chain.subscribeNewHeads(_newHeader);
-    })();
-
-    return (): void => {
-      _subFinHead && _subFinHead();
-      _subNewHead && _subNewHead();
-    };
-  }, []);
-
-  if (!tree) {
-    return null;
-  }
-
-  return (
-    <div className={className}>
-      <SummaryBox>
-        <section>
-          <CardSummary label={t('blocks')}>{formatNumber(countRef.current.numBlocks)}</CardSummary>
-          <CardSummary label={t('forks')}>{formatNumber(countRef.current.numForks)}</CardSummary>
-        </section>
-      </SummaryBox>
-      <table>
-        <tbody>
-          {renderRows(createRows(tree.arr))}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
-export default translate(
-  styled(Forks)`
-    margin-bottom: 1.5rem;
-
-    table {
-      border-collapse: separate;
-      border-spacing: 0.25rem;
-      font-family: monospace;
-
-      /* tr {
-        opacity: 0.05;
-
-        &:nth-child(1) { opacity: 1; }
-        &:nth-child(2) { opacity: 0.95; }
-        &:nth-child(3) { opacity: 0.9; }
-        &:nth-child(4) { opacity: 0.85; }
-        &:nth-child(5) { opacity: 0.8; }
-        &:nth-child(6) { opacity: 0.75; }
-        &:nth-child(7) { opacity: 0.70; }
-        &:nth-child(8) { opacity: 0.65; }
-        &:nth-child(9) { opacity: 0.6; }
-        &:nth-child(10) { opacity: 0.55; }
-        &:nth-child(11) { opacity: 0.6; }
-        &:nth-child(12) { opacity: 0.55; }
-        &:nth-child(13) { opacity: 0.5; }
-        &:nth-child(14) { opacity: 0.45; }
-        &:nth-child(15) { opacity: 0.4; }
-        &:nth-child(16) { opacity: 0.35; }
-        &:nth-child(17) { opacity: 0.3; }
-        &:nth-child(18) { opacity: 0.25; }
-        &:nth-child(19) { opacity: 0.2; }
-        &:nth-child(20) { opacity: 0.15; }
-        &:nth-child(21) { opacity: 0.1; }
-      } */
-
-      td {
-        padding: 0.25rem 0.5rem;
-        text-align: center;
-
-        .author,
-        .contents {
-          display: inline-block;
-          vertical-align: middle;
-        }
-
-        .author {
-          margin-right: 0.25rem;
-        }
-
-        .contents {
-          .hash, .parent {
-            margin: 0 auto;
-            max-width: 6rem;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-
-          .parent {
-            font-size: 0.75rem;
-            line-height: 0.75rem;
-            max-width: 4.5rem;
-          }
-        }
-
-        &.blockNumber {
-          font-size: 1.25rem;
-        }
-
-        &.header {
-          background: #f5f5f5;
-          border: 1px solid #eee;
-          border-radius: 0.25rem;
-
-          &.isEmpty {
-            background: transparent;
-            border-color: transparent;
-          }
-
-          &.isFinalized {
-            background: rgba(0, 255, 0, 0.1);
-            border-color: rgba(0, 255, 0, 0.17);
-          }
-
-          &.isLink {
-            background: transparent;
-            border-color: transparent;
-            line-height: 1rem;
-            padding: 0;
-          }
-
-          &.isMissing {
-            background: rgba(255, 0, 0, 0.05);
-            border-color: rgba(255, 0, 0, 0.06);
-          }
-        }
-      }
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/app-explorer/src/Main.tsx b/pioneer/packages/old-apps/app-explorer/src/Main.tsx
deleted file mode 100644
index ddab0cc239..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/Main.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-explorer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { KeyedEvent } from './types';
-
-import React from 'react';
-import { HeaderExtended } from '@polkadot/api-derive';
-import { Columar, Column } from '@polkadot/react-components';
-
-import BlockHeaders from './BlockHeaders';
-import Events from './Events';
-import Query from './Query';
-import Summary from './Summary';
-import translate from './translate';
-
-interface Props extends I18nProps {
-  events: KeyedEvent[];
-  headers: HeaderExtended[];
-}
-
-function Main ({ events, headers, t }: Props): React.ReactElement<Props> {
-  return (
-    <>
-      <Query />
-      <Summary />
-      <Columar>
-        <Column headerText={t('recent blocks')}>
-          <BlockHeaders headers={headers} />
-        </Column>
-        <Column headerText={t('recent events')}>
-          <Events events={events} />
-        </Column>
-      </Columar>
-    </>
-  );
-}
-
-export default translate(Main);
diff --git a/pioneer/packages/old-apps/app-explorer/src/NodeInfo/Peers.tsx b/pioneer/packages/old-apps/app-explorer/src/NodeInfo/Peers.tsx
deleted file mode 100644
index 59c2bd8756..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/NodeInfo/Peers.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-nodeinfo authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { PeerInfo } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import styled from 'styled-components';
-import { formatNumber } from '@polkadot/util';
-
-import translate from './translate';
-
-interface Props extends I18nProps {
-  peers?: PeerInfo[] | null;
-}
-
-const renderPeer = (peer: PeerInfo): React.ReactNode => {
-  const peerId = peer.peerId.toString();
-
-  return (
-    <tr key={peerId}>
-      <td className='roles'>{peer.roles.toString().toLowerCase()}</td>
-      <td className='peerid ui--media-medium'>{peerId}</td>
-      <td className='number'>{formatNumber(peer.bestNumber)}</td>
-      <td className='hash'>{peer.bestHash.toHex()}</td>
-    </tr>
-  );
-};
-
-function Peers ({ className, peers, t }: Props): React.ReactElement<Props> {
-  return (
-    <section className={`status--Peers ${className}`}>
-      <h1>{t('connected peers')}</h1>
-      {peers && peers.length
-        ? (
-          <article>
-            <table>
-              <thead>
-                <tr>
-                  <th className='roles'>{t('role')}</th>
-                  <th className='peerid ui--media-medium'>{t('peer id')}</th>
-                  <th className='number'>{t('best #')}</th>
-                  <th className='hash'>{t('best hash')}</th>
-                </tr>
-              </thead>
-              <tbody>
-                {peers
-                  .sort((a, b): number => b.bestNumber.cmp(a.bestNumber))
-                  .map(renderPeer)
-                }
-              </tbody>
-            </table>
-          </article>
-        )
-        : (
-          <div className='ui disabled'>
-            {t('no peers connected')}
-          </div>
-        )
-      }
-    </section>
-  );
-}
-
-export default translate(
-  styled(Peers)`
-    table {
-      width: 100%;
-
-      td, th {
-        padding: 0.25rem 0.5rem;
-        text-align: left;
-        white-space: nowrap;
-
-        &.hash {
-          font-family: monospace;
-          max-width: 0;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          width: 100%;
-        }
-
-        &.number {
-          text-align: right;
-        }
-
-        &.peerid {
-          font-style: italic;
-          text-align: left;
-        }
-
-        &.roles {
-          text-align: center;
-        }
-      }
-    }
-
-    tbody {
-      tr {
-        width: 100%;
-
-        &:nth-child(odd) {
-          background-color: #f2f2f2;
-        }
-      }
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/app-explorer/src/NodeInfo/Summary.tsx b/pioneer/packages/old-apps/app-explorer/src/NodeInfo/Summary.tsx
deleted file mode 100644
index 3fd8f1396c..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/NodeInfo/Summary.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-nodeinfo authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { Info } from './types';
-
-import BN from 'bn.js';
-import React, { useState, useEffect } from 'react';
-import { SummaryBox, CardSummary } from '@polkadot/react-components';
-import { formatNumber } from '@polkadot/util';
-import { BestNumber, Elapsed } from '@polkadot/react-query';
-
-import translate from './translate';
-
-interface Props extends I18nProps {
-  nextRefresh: number;
-  info: Info;
-}
-
-const ZERO = new BN(0);
-const EMPTY_INFO = { extrinsics: null, health: null, peers: null };
-
-function Summary ({ info: { extrinsics, health, peers } = EMPTY_INFO, nextRefresh, t }: Props): React.ReactElement<Props> {
-  const [peerBest, setPeerBest] = useState(ZERO);
-
-  useEffect((): void => {
-    if (!peers) {
-      return;
-    }
-
-    const bestPeer = peers.sort((a, b): number => b.bestNumber.cmp(a.bestNumber))[0];
-
-    setPeerBest(
-      bestPeer
-        ? bestPeer.bestNumber
-        : new BN(0)
-    );
-  }, [peers]);
-
-  return (
-    <SummaryBox>
-      <section>
-        <CardSummary label={t('refresh in')}>
-          <Elapsed value={nextRefresh} />
-        </CardSummary>
-        <CardSummary
-          className='ui--media-small'
-          label={t('total peers')}
-        >
-          {
-            health
-              ? `${health.peers.toNumber()}`
-              : '-'
-          }
-        </CardSummary>
-        <CardSummary
-          className='ui--media-small'
-          label={t('syncing')}
-        >
-          {
-            health
-              ? (
-                health.isSyncing.valueOf()
-                  ? t('yes')
-                  : t('no')
-              )
-              : '-'
-          }
-        </CardSummary>
-      </section>
-      <section className='ui--media-large'>
-        <CardSummary label={t('queued tx')}>
-          {
-            extrinsics
-              ? `${extrinsics.length}`
-              : '-'
-          }
-        </CardSummary>
-      </section>
-      <section>
-        <CardSummary label={t('peer best')}>
-          {formatNumber(peerBest)}
-        </CardSummary>
-        <CardSummary label={t('our best')}>
-          <BestNumber />
-        </CardSummary>
-      </section>
-    </SummaryBox>
-  );
-}
-
-export default translate(Summary);
diff --git a/pioneer/packages/old-apps/app-explorer/src/NodeInfo/index.tsx b/pioneer/packages/old-apps/app-explorer/src/NodeInfo/index.tsx
deleted file mode 100644
index 4ee86b19e7..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/NodeInfo/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-nodeinfo authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps as Props } from '@polkadot/react-components/types';
-import { Info } from './types';
-
-import React, { useContext, useEffect, useState } from 'react';
-import { ApiPromise } from '@polkadot/api';
-import { ApiContext } from '@polkadot/react-api';
-
-import Extrinsics from '../BlockInfo/Extrinsics';
-import Peers from './Peers';
-import Summary from './Summary';
-import translate from './translate';
-
-const POLL_TIMEOUT = 9900;
-
-async function retrieveInfo (api: ApiPromise): Promise<Partial<Info>> {
-  try {
-    const [blockNumber, health, peers, extrinsics] = await Promise.all([
-      api.derive.chain.bestNumber(),
-      api.rpc.system.health(),
-      api.rpc.system.peers(),
-      api.rpc.author.pendingExtrinsics()
-    ]);
-
-    return { blockNumber, extrinsics, health, peers };
-  } catch (error) {
-    return {};
-  }
-}
-
-function NodeInfo ({ t }: Props): React.ReactElement<Props> {
-  const { api } = useContext(ApiContext);
-  const [info, setInfo] = useState<Partial<Info>>({});
-  const [nextRefresh, setNextRefresh] = useState(Date.now());
-
-  useEffect((): () => void => {
-    const _getStatus = (): void => {
-      retrieveInfo(api).then(setInfo);
-    };
-
-    _getStatus();
-
-    const timerId = window.setInterval((): void => {
-      setNextRefresh(Date.now() + POLL_TIMEOUT);
-      _getStatus();
-    }, POLL_TIMEOUT);
-
-    return (): void => {
-      window.clearInterval(timerId);
-    };
-  }, []);
-
-  return (
-    <>
-      <Summary
-        info={info}
-        nextRefresh={nextRefresh}
-      />
-      <Peers peers={info.peers} />
-      <Extrinsics
-        blockNumber={info.blockNumber}
-        label={t('pending extrinsics')}
-        value={info.extrinsics}
-      />
-    </>
-  );
-}
-
-export default translate(NodeInfo);
diff --git a/pioneer/packages/old-apps/app-explorer/src/NodeInfo/translate.ts b/pioneer/packages/old-apps/app-explorer/src/NodeInfo/translate.ts
deleted file mode 100644
index 920fd80316..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/NodeInfo/translate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-nodeinfo authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { withTranslation } from 'react-i18next';
-
-export default withTranslation(['app-explorer']);
diff --git a/pioneer/packages/old-apps/app-explorer/src/NodeInfo/types.ts b/pioneer/packages/old-apps/app-explorer/src/NodeInfo/types.ts
deleted file mode 100644
index ae3350bfdd..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/NodeInfo/types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-nodeinfo authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BlockNumber, Extrinsic, Health, PeerInfo } from '@polkadot/types/interfaces';
-
-import { Vec } from '@polkadot/types';
-
-export interface Info {
-  blockNumber?: BlockNumber;
-  extrinsics?: Vec<Extrinsic> | null;
-  health?: Health | null;
-  peers?: PeerInfo[] | null;
-}
diff --git a/pioneer/packages/old-apps/app-explorer/src/Query.tsx b/pioneer/packages/old-apps/app-explorer/src/Query.tsx
deleted file mode 100644
index 9333f8789d..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/Query.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-explorer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { Button, FilterOverlay, Input } from '@polkadot/react-components';
-import { isHex } from '@polkadot/util';
-
-import translate from './translate';
-
-interface Props extends I18nProps {
-  value?: string;
-}
-
-interface State {
-  value: string;
-  isValid: boolean;
-}
-
-function stateFromValue (value: string): State {
-  const isValidHex = isHex(value, 256);
-  const isNumber = !isValidHex && /^\d+$/.test(value);
-
-  return {
-    value,
-    isValid: isValidHex || isNumber
-  };
-}
-
-function Query ({ className, t, value: propsValue }: Props): React.ReactElement<Props> {
-  const [{ value, isValid }, setState] = useState(stateFromValue(propsValue || ''));
-
-  const _setHash = (value: string): void => setState(stateFromValue(value));
-  const _onQuery = (): void => {
-    if (isValid && value.length !== 0) {
-      window.location.hash = `/explorer/query/${value}`;
-    }
-  };
-
-  return (
-    <FilterOverlay className={className}>
-      <Input
-        className='explorer--query'
-        defaultValue={propsValue}
-        isError={!isValid && value.length !== 0}
-        placeholder={t('block hash or number to query')}
-        onChange={_setHash}
-        onEnter={_onQuery}
-        withLabel={false}
-      >
-        <Button
-          icon='play'
-          onClick={_onQuery}
-        />
-      </Input>
-    </FilterOverlay>
-  );
-}
-
-export default translate(styled(Query)`
-  .explorer--query {
-    width: 20em;
-  }
-`);
diff --git a/pioneer/packages/old-apps/app-explorer/src/Summary.tsx b/pioneer/packages/old-apps/app-explorer/src/Summary.tsx
deleted file mode 100644
index be7886e4ed..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/Summary.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-explorer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps as Props } from '@polkadot/react-components/types';
-
-import React from 'react';
-import { SummaryBox, CardSummary } from '@polkadot/react-components';
-import { BestFinalized, BestNumber, TimeNow, TimePeriod, TotalIssuance } from '@polkadot/react-query';
-
-import SummarySession from './SummarySession';
-import translate from './translate';
-
-function Summary ({ t }: Props): React.ReactElement<Props> {
-  return (
-    <SummaryBox>
-      <section>
-        <CardSummary label={t('last block')}>
-          <TimeNow />
-        </CardSummary>
-        <CardSummary
-          className='ui--media-small'
-          label={t('target')}
-        >
-          <TimePeriod />
-        </CardSummary>
-        <CardSummary
-          className='ui--media-small'
-          label={t('total issuance')}
-        >
-          <TotalIssuance />
-        </CardSummary>
-      </section>
-      <section className='ui--media-large'>
-        <SummarySession withEra={false} />
-      </section>
-      <section>
-        <CardSummary label={t('finalized')}>
-          <BestFinalized />
-        </CardSummary>
-        <CardSummary label={t('best')}>
-          <BestNumber />
-        </CardSummary>
-      </section>
-    </SummaryBox>
-  );
-}
-
-export default translate(Summary);
diff --git a/pioneer/packages/old-apps/app-explorer/src/SummarySession.tsx b/pioneer/packages/old-apps/app-explorer/src/SummarySession.tsx
deleted file mode 100644
index 6f7288eac2..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/SummarySession.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-explorer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { DerivedSessionInfo } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import { CardSummary } from '@polkadot/react-components';
-import { withCalls } from '@polkadot/react-api';
-
-import translate from './translate';
-import { formatNumber } from '@polkadot/util';
-
-import { SessionIndex } from '@polkadot/types/interfaces';
-import { u64 } from '@polkadot/types/primitive';
-
-interface Props extends I18nProps {
-  sessionInfo?: DerivedSessionInfo;
-  withEra?: boolean;
-  withSession?: boolean;
-  epochIndex?: u64;
-  currentEraStartSessionIndex?: SessionIndex;
-}
-
-function renderSession ({ sessionInfo, t, withSession = true }: Props): React.ReactNode {
-  if (!withSession || !sessionInfo) {
-    return null;
-  }
-
-  const label = sessionInfo.isEpoch && sessionInfo.sessionLength.gtn(1)
-    ? t('epoch')
-    : t('session');
-
-  return sessionInfo.sessionLength.gtn(0)
-    ? (
-      <CardSummary
-        label={label}
-        progress={{
-          total: sessionInfo.sessionLength,
-          value: sessionInfo.sessionProgress
-        }}
-      />
-    )
-    : (
-      <CardSummary label={label}>
-        {formatNumber(sessionInfo.currentIndex)}
-      </CardSummary>
-    );
-}
-
-function renderEra ({ sessionInfo, t, withEra = true, epochIndex, currentEraStartSessionIndex }: Props): React.ReactNode {
-  if (!withEra || !sessionInfo || !epochIndex || !currentEraStartSessionIndex) {
-    return null;
-  }
-
-  const label = t('era');
-  const { sessionLength, sessionProgress } = sessionInfo;
-  // eraProgress is calculated the wrong way in polkadot/api v0.96.1 (fixed in v0.97.1)
-  const eraProgress = epochIndex.sub(currentEraStartSessionIndex).mul(sessionLength).add(sessionProgress);
-
-  return sessionInfo.sessionLength.gtn(0)
-    ? (
-      <CardSummary
-        label={label}
-        progress={{
-          total: sessionInfo.eraLength,
-          value: eraProgress
-        }}
-      />
-    )
-    : (
-      <CardSummary label={label}>
-        {formatNumber(sessionInfo.currentEra)}
-      </CardSummary>
-    );
-}
-
-function SummarySession (props: Props): React.ReactElement<Props> {
-  return (
-    <>
-      {renderSession(props)}
-      {renderEra(props)}
-    </>
-  );
-}
-
-export default translate(
-  withCalls<Props>(
-    ['derive.session.info', { propName: 'sessionInfo' }],
-    ['query.babe.epochIndex', { propName: 'epochIndex' }],
-    ['query.staking.currentEraStartSessionIndex', { propName: 'currentEraStartSessionIndex' }]
-  )(SummarySession)
-);
diff --git a/pioneer/packages/old-apps/app-explorer/src/index.css b/pioneer/packages/old-apps/app-explorer/src/index.css
deleted file mode 100644
index 0cfccc63a1..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/index.css
+++ /dev/null
@@ -1,29 +0,0 @@
-/* Copyright 2017-2019 @polkadot/app-explorer authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-.explorer--Container {
-  color: inherit;
-
-  .header {
-    position: relative;
-    vertical-align: middle;
-
-    h3 {
-      margin: 0;
-    }
-  }
-
-  .description {
-    color: rgba(0, 0, 0, 0.6);
-    margin: 0rem 0 0.5rem 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    vertical-align: middle;
-    white-space: nowrap;
-  }
-
-  > .details {
-    word-break: break-all;
-  }
-}
diff --git a/pioneer/packages/old-apps/app-explorer/src/index.tsx b/pioneer/packages/old-apps/app-explorer/src/index.tsx
deleted file mode 100644
index 971db4f5a8..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/index.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-explorer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import uiSettings from '@polkadot/joy-settings/';
-import { AppProps, BareProps, I18nProps } from '@polkadot/react-components/types';
-import { KeyedEvent } from './types';
-
-import React, { useContext } from 'react';
-import { Route, Switch } from 'react-router';
-import styled from 'styled-components';
-import { ApiContext } from '@polkadot/react-api';
-import Tabs from '@polkadot/react-components/Tabs';
-
-import { BlockAuthorsContext, EventsContext } from '@polkadot/react-query';
-
-import BlockInfo from './BlockInfo';
-import Forks from './Forks';
-import Main from './Main';
-import NodeInfo from './NodeInfo';
-import translate from './translate';
-
-interface Props extends AppProps, BareProps, I18nProps {
-  newEvents?: KeyedEvent[];
-}
-
-function ExplorerApp ({ basePath, className, t }: Props): React.ReactElement<Props> {
-  const { api } = useContext(ApiContext);
-  const { lastHeaders } = useContext(BlockAuthorsContext);
-  const events = useContext(EventsContext);
-
-  return (
-    <main className={className}>
-      <header>
-        <Tabs
-          basePath={basePath}
-          hidden={
-            uiSettings.uiMode === 'full'
-              ? api.query.babe ? [] : ['forks']
-              : ['node', 'forks']
-          }
-          items={[
-            {
-              isRoot: true,
-              name: 'chain',
-              text: t('Chain info')
-            },
-            {
-              hasParams: true,
-              name: 'query',
-              text: t('Block details')
-            },
-            {
-              name: 'forks',
-              text: t('Forks')
-            },
-            {
-              name: 'node',
-              text: t('Node info')
-            }
-          ]}
-        />
-      </header>
-      <Switch>
-        <Route path={`${basePath}/forks`} component={Forks} />
-        <Route path={`${basePath}/query/:value`} component={BlockInfo} />
-        <Route path={`${basePath}/query`} component={BlockInfo} />
-        <Route path={`${basePath}/node`} component={NodeInfo} />
-        <Route render={(): React.ReactElement<{}> => (
-          <Main
-            events={events}
-            headers={lastHeaders}
-          />
-        )} />
-      </Switch>
-    </main>
-  );
-}
-
-export default translate(
-  styled(ExplorerApp)`
-    .rx--updated {
-      background: transparent !important;
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/app-explorer/src/translate.ts b/pioneer/packages/old-apps/app-explorer/src/translate.ts
deleted file mode 100644
index 83ed9b1130..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/translate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-explorer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { withTranslation } from 'react-i18next';
-
-export default withTranslation(['app-explorer']);
diff --git a/pioneer/packages/old-apps/app-explorer/src/types.ts b/pioneer/packages/old-apps/app-explorer/src/types.ts
deleted file mode 100644
index ca9251ce89..0000000000
--- a/pioneer/packages/old-apps/app-explorer/src/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-explorer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { EventRecord } from '@polkadot/types/interfaces';
-
-export interface KeyedEvent {
-  key: string;
-  record: EventRecord;
-}
diff --git a/pioneer/packages/old-apps/app-extrinsics/LICENSE b/pioneer/packages/old-apps/app-extrinsics/LICENSE
deleted file mode 100644
index 0d381b2e97..0000000000
--- a/pioneer/packages/old-apps/app-extrinsics/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/pioneer/packages/old-apps/app-extrinsics/README.md b/pioneer/packages/old-apps/app-extrinsics/README.md
deleted file mode 100644
index 6a655bc3da..0000000000
--- a/pioneer/packages/old-apps/app-extrinsics/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# @polkadot/app-extrinsics
diff --git a/pioneer/packages/old-apps/app-extrinsics/package.json b/pioneer/packages/old-apps/app-extrinsics/package.json
deleted file mode 100644
index b80afad9d5..0000000000
--- a/pioneer/packages/old-apps/app-extrinsics/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "@polkadot/app-extrinsics",
-  "version": "0.37.0-beta.63",
-  "main": "index.js",
-  "repository": "https://github.com/polkadot-js/apps.git",
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "contributors": [],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/react-components": "^0.37.0-beta.63",
-    "@polkadot/react-params": "^0.37.0-beta.63",
-    "@polkadot/react-signer": "^0.37.0-beta.63"
-  }
-}
diff --git a/pioneer/packages/old-apps/app-extrinsics/src/Balance.tsx b/pioneer/packages/old-apps/app-extrinsics/src/Balance.tsx
deleted file mode 100644
index 58722abe9e..0000000000
--- a/pioneer/packages/old-apps/app-extrinsics/src/Balance.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps, CallProps } from '@polkadot/react-api/types';
-
-import React from 'react';
-import { DerivedBalances } from '@polkadot/api-derive/types';
-import { withCalls, withMulti } from '@polkadot/react-api';
-import { InputBalance } from '@polkadot/react-components';
-
-interface Props extends BareProps, CallProps {
-  balances_all?: DerivedBalances;
-  label?: React.ReactNode;
-}
-
-function BalanceDisplay ({ className, label, style, balances_all }: Props): React.ReactElement<Props> {
-  return (
-    <InputBalance
-      className={className}
-      isDisabled
-      label={label}
-      style={style}
-      defaultValue={balances_all && balances_all.freeBalance}
-    />
-  );
-}
-
-export default withMulti(
-  BalanceDisplay,
-  withCalls<Props>(
-    ['derive.balances.all', { paramName: 'params' }]
-  )
-);
diff --git a/pioneer/packages/old-apps/app-extrinsics/src/Selection.tsx b/pioneer/packages/old-apps/app-extrinsics/src/Selection.tsx
deleted file mode 100644
index ccf216493b..0000000000
--- a/pioneer/packages/old-apps/app-extrinsics/src/Selection.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-extrinsics authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Call } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
-import { QueueTxExtrinsicAdd } from '@polkadot/react-components/Status/types';
-import { ApiProps } from '@polkadot/react-api/types';
-import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-
-import BN from 'bn.js';
-import React from 'react';
-import { Button, Extrinsic, InputAddress, Labelled, TxButton, TxComponent } from '@polkadot/react-components';
-import { withApi, withMulti } from '@polkadot/react-api';
-import { Nonce } from '@polkadot/react-query';
-
-import Balance from './Balance';
-import translate from './translate';
-
-interface Props extends ApiProps, I18nProps {
-  queueExtrinsic: QueueTxExtrinsicAdd;
-}
-
-interface State {
-  isValid: boolean;
-  isValidUnsigned: boolean;
-  method: Call | null;
-  accountNonce?: BN;
-  accountId?: string | null;
-}
-
-class Selection extends TxComponent<Props, State> {
-  public state: State = {
-    isValid: false,
-    isValidUnsigned: false,
-    method: null
-  };
-
-  public render (): React.ReactNode {
-    const { apiDefaultTxSudo, t } = this.props;
-    const { isValid, isValidUnsigned, accountId } = this.state;
-    const extrinsic = this.getExtrinsic() || apiDefaultTxSudo;
-
-    return (
-      <div className='extrinsics--Selection'>
-        <InputAddress
-          label={t('using the selected account')}
-          onChange={this.onChangeSender}
-          type='account'
-        />
-        <div className='ui--row'>
-          <Balance
-            className='medium'
-            label={t('with an account balance')}
-            params={accountId}
-          />
-          <Labelled
-            className='medium'
-            label={t('with a transaction nonce')}
-          >
-            <Nonce
-              className='ui disabled dropdown selection'
-              callOnResult={this.onChangeNonce}
-              params={accountId}
-            />
-          </Labelled>
-        </div>
-        <br></br>
-        <Extrinsic
-          defaultValue={apiDefaultTxSudo}
-          label={t('submit the following extrinsic')}
-          onChange={this.onChangeExtrinsic}
-          onEnter={this.sendTx}
-        />
-        <br></br>
-        <Button.Group>
-          <TxButton
-            isBasic
-            isDisabled={!isValidUnsigned}
-            isUnsigned
-            label={t('Submit Unsigned')}
-            icon='sign-in'
-            extrinsic={extrinsic}
-          />
-          <Button.Or />
-          <TxButton
-            accountId={accountId}
-            isDisabled={!isValid}
-            isPrimary
-            label={t('Submit Transaction')}
-            icon='sign-in'
-            extrinsic={extrinsic}
-            ref={this.button}
-          />
-        </Button.Group>
-      </div>
-    );
-  }
-
-  private nextState (newState: Partial<State>): void {
-    this.setState(
-      (prevState: State): State => {
-        const { method = prevState.method, accountNonce = prevState.accountNonce, accountId = prevState.accountId } = newState;
-        const isValid = !!(
-          accountId &&
-          accountId.length &&
-          method
-        );
-
-        return {
-          method,
-          isValid,
-          isValidUnsigned: !!method,
-          accountNonce,
-          accountId
-        };
-      }
-    );
-  }
-
-  private onChangeExtrinsic = (method: Call | null = null): void => {
-    this.nextState({ method });
-  }
-
-  private onChangeNonce = (accountNonce: BN = new BN(0)): void => {
-    this.nextState({ accountNonce });
-  }
-
-  private onChangeSender = (accountId: string | null): void => {
-    this.nextState({ accountId, accountNonce: new BN(0) });
-  }
-
-  private getExtrinsic (): SubmittableExtrinsic | null {
-    const { api } = this.props;
-    const { method } = this.state;
-
-    if (!method) {
-      return null;
-    }
-
-    const fn = api.findCall(method.callIndex);
-
-    return api.tx[fn.section][fn.method](...method.args);
-  }
-}
-
-export default withMulti(
-  Selection,
-  translate,
-  withApi
-);
diff --git a/pioneer/packages/old-apps/app-extrinsics/src/index.tsx b/pioneer/packages/old-apps/app-extrinsics/src/index.tsx
deleted file mode 100644
index 7ba6d41cca..0000000000
--- a/pioneer/packages/old-apps/app-extrinsics/src/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-extrinsics authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import { Tabs } from '@polkadot/react-components';
-
-import Selection from './Selection';
-import translate from './translate';
-
-interface Props extends AppProps, I18nProps {}
-
-function ExtrinsicsApp ({ basePath, t }: Props): React.ReactElement<Props> {
-  return (
-    <main className='extrinsics--App'>
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={[{
-            isRoot: true,
-            name: 'create',
-            text: t('Extrinsic submission')
-          }]}
-        />
-      </header>
-      <Selection />
-    </main>
-  );
-}
-
-export { ExtrinsicsApp };
-
-export default translate(ExtrinsicsApp);
diff --git a/pioneer/packages/old-apps/app-extrinsics/src/translate.ts b/pioneer/packages/old-apps/app-extrinsics/src/translate.ts
deleted file mode 100644
index f82a301b4c..0000000000
--- a/pioneer/packages/old-apps/app-extrinsics/src/translate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-extrinsics authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { withTranslation } from 'react-i18next';
-
-export default withTranslation(['app-extrinsics']);
diff --git a/pioneer/packages/old-apps/app-js/LICENSE b/pioneer/packages/old-apps/app-js/LICENSE
deleted file mode 100644
index 0d381b2e97..0000000000
--- a/pioneer/packages/old-apps/app-js/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/pioneer/packages/old-apps/app-js/README.md b/pioneer/packages/old-apps/app-js/README.md
deleted file mode 100644
index 721f11615e..0000000000
--- a/pioneer/packages/old-apps/app-js/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# @polkadot/app-js
diff --git a/pioneer/packages/old-apps/app-js/package.json b/pioneer/packages/old-apps/app-js/package.json
deleted file mode 100644
index 02e6db61b5..0000000000
--- a/pioneer/packages/old-apps/app-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "name": "@polkadot/app-js",
-  "version": "0.37.0-beta.63",
-  "description": "A simple JavaScript console for playing with the API",
-  "main": "index.js",
-  "scripts": {},
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/react-components": "^0.37.0-beta.63",
-    "snappyjs": "^0.6.0"
-  }
-}
diff --git a/pioneer/packages/old-apps/app-js/src/ActionButtons.tsx b/pioneer/packages/old-apps/app-js/src/ActionButtons.tsx
deleted file mode 100644
index a514f409db..0000000000
--- a/pioneer/packages/old-apps/app-js/src/ActionButtons.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-js authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps, I18nProps } from '@polkadot/react-components/types';
-
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { Button as SUIB, Popup } from 'semantic-ui-react';
-import { Button, Input } from '@polkadot/react-components';
-
-import translate from './translate';
-
-interface Props extends BareProps, I18nProps {
-  isCustomExample: boolean;
-  isRunning: boolean;
-  generateLink: () => void;
-  removeSnippet: () => void;
-  runJs: () => void;
-  saveSnippet: (snippetName: string) => void;
-  snippetName?: string;
-  stopJs: () => void;
-}
-
-function ActionButtons ({ className, generateLink, isCustomExample, isRunning, removeSnippet, runJs, saveSnippet, stopJs, t }: Props): React.ReactElement<Props> {
-  const [isOpen, setIsOpen] = useState(false);
-  const [shareText, setShareText] = useState(t('Generate link to share code example'));
-  const [snippetName, setSnippetName] = useState('');
-
-  const _generateLink = (): void => {
-    setShareText(t('Copied to clipboard'));
-    generateLink();
-  };
-  const _onShareClose = (): void => {
-    setShareText(t('Generate link to share code example'));
-  };
-  const _onChangeName = (snippetName: string): void => {
-    setSnippetName(snippetName);
-  };
-  const _onPopupOpen = (): void => {
-    setIsOpen(true);
-  };
-  const _onPopupClose = (): void => {
-    setSnippetName('');
-    setIsOpen(false);
-  };
-  const _saveSnippet = (): void => {
-    saveSnippet(snippetName);
-    _onPopupClose();
-  };
-
-  return (
-    <div className={`${className} action-button`}>
-      <Popup
-        content={shareText}
-        on='hover'
-        onClose={_onShareClose}
-        trigger={
-          <SUIB
-            circular
-            icon='share alternate'
-            onClick={_generateLink}
-          />
-        }
-        wide='very'
-      />
-      {
-      // FIXME: The <Popup /> event trigger on='hover' does not work together with the ui-app'
-      // <Button /> component. That's why the original Semantic UI component is being used here.
-      }
-      {isCustomExample && (
-        <Popup
-          content={t('Delete this custom example')}
-          on='hover'
-          trigger={
-            <SUIB
-              circular
-              icon='trash alternate outline'
-              negative
-              onClick={removeSnippet}
-            />
-          }
-        />
-      )}
-      {!(isCustomExample) && (
-        <Popup
-          className='popup-local'
-          on='click'
-          onClose={_onPopupClose}
-          open={isOpen}
-          trigger={
-            <SUIB
-              circular
-              icon='save'
-              onClick={_onPopupOpen}
-            />
-          }
-        >
-          <Input
-            autoFocus
-            onChange={_onChangeName}
-            onEnter={_saveSnippet}
-            maxLength={50}
-            min={1}
-            placeholder={t('Name your example')}
-            value={snippetName}
-            withLabel={false}
-          />
-          <Button
-            icon='save'
-            isDisabled={!snippetName.length}
-            isPrimary
-            label={t('Save snippet to local storage')}
-            onClick={_saveSnippet}
-          />
-        </Popup>
-      )}
-      {isRunning
-        ? (
-          <Button
-            icon='close'
-            isCircular
-            isNegative
-            onClick={stopJs}
-          />
-        )
-        : (
-          <Button
-            className='play-button'
-            icon='play'
-            isCircular
-            isPrimary
-            onClick={runJs}
-          />
-        )
-      }
-    </div>
-  );
-}
-
-export default translate(
-  styled(ActionButtons)``
-);
diff --git a/pioneer/packages/old-apps/app-js/src/Output.tsx b/pioneer/packages/old-apps/app-js/src/Output.tsx
deleted file mode 100644
index 6815066df2..0000000000
--- a/pioneer/packages/old-apps/app-js/src/Output.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-js authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps } from '@polkadot/react-components/types';
-import { Log } from './types';
-
-import React from 'react';
-import styled from 'styled-components';
-import { isError, isNull, isUndefined } from '@polkadot/util';
-
-interface Props extends BareProps {
-  children?: React.ReactNode;
-  logs: Log[];
-}
-
-const format = (value: any): string => {
-  if (isError(value)) {
-    return value.stack ? value.stack : value.toString();
-  } else if (isUndefined(value)) {
-    return 'undefined';
-  } else if (isNull(value)) {
-    return 'null';
-  } 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.toString();
-};
-
-const renderEntry = ({ args, type }: Log, index: number): React.ReactNode => (
-  <div className={`js--Log ${type}`} key={index}>
-    {args.map((arg): string => format(arg)).join(' ')}
-  </div>
-);
-
-function Output ({ children, className, logs }: Props): React.ReactElement<Props> {
-  return (
-    <article className={`container ${className}`}>
-      <div className='logs-wrapper'>
-        <div className='logs-container'>
-          <pre className='logs-content'>
-            {logs.map(renderEntry)}
-          </pre>
-        </div>
-      </div>
-      {children}
-    </article>
-  );
-}
-
-export default styled(Output)`
-  background-color: #4e4e4e;
-  color: #ffffff;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  font-family: monospace;
-  font-size: 12px;
-  font-variant-ligatures: common-ligatures;
-  line-height: 18px;
-  padding: 50px 10px 10px;
-  position: relative;
-  width: 40%;
-
-  .logs-wrapper {
-    display: flex;
-    flex: 1;
-    min-height: 0px;
-  }
-
-  .logs-container {
-    flex: 1;
-    overflow: auto;;
-  }
-
-  .logs-content {
-    height: auto;
-  }
-
-  .js--Log {
-    animation: fadein 0.2s;
-    margin: 0 0 5px 0;
-    word-break: break-all;
-
-    &.error {
-      color: #f88;
-    }
-  }
-`;
diff --git a/pioneer/packages/old-apps/app-js/src/Playground.tsx b/pioneer/packages/old-apps/app-js/src/Playground.tsx
deleted file mode 100644
index 6add217585..0000000000
--- a/pioneer/packages/old-apps/app-js/src/Playground.tsx
+++ /dev/null
@@ -1,445 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-js authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ApiPromise } from '@polkadot/api';
-import { KeyringInstance } from '@polkadot/keyring/types';
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
-import { Log, LogType, Snippet } from './types';
-
-import React, { useContext, useRef, useState, useEffect } from 'react';
-import { withRouter, RouteComponentProps } from 'react-router';
-import { Transition } from 'semantic-ui-react';
-import snappy from 'snappyjs';
-import styled from 'styled-components';
-import { ApiContext } from '@polkadot/react-api';
-import { Button, Dropdown, Editor } from '@polkadot/react-components';
-import uiKeyring from '@polkadot/ui-keyring';
-import * as types from '@polkadot/types';
-import * as util from '@polkadot/util';
-import * as hashing from '@polkadot/util-crypto';
-import * as joy_types from '@joystream/types';
-
-import makeWrapper from './snippets/wrapping';
-import allSnippets from './snippets';
-import translate from './translate';
-import { STORE_EXAMPLES, STORE_SELECTED, CUSTOM_LABEL } from './constants';
-
-import Output from './Output';
-import ActionButtons from './ActionButtons';
-
-interface Injected {
-  api: ApiPromise;
-  console: {
-    error: (...args: any[]) => void;
-    log: (...args: any[]) => void;
-  };
-  global: null;
-  hashing: typeof hashing;
-  keyring: KeyringInstance | null;
-  types: typeof types;
-  util: typeof util;
-  window: null;
-  joy: {
-    types: typeof joy_types;
-  };
-}
-
-interface Props extends AppProps, I18nProps, RouteComponentProps<{}> {
-  match: {
-    isExact: boolean;
-    params: {
-      base64?: string;
-    };
-    path: string;
-    url: string;
-  };
-  // FIXME wait for proper eslint integration in tslint, then hopefully remove this
-  history: any;
-}
-
-const snippets: Snippet[] = JSON.parse(JSON.stringify(allSnippets));
-let hasSnippetWrappers = false;
-
-function decodeBase64 (base64: string): Snippet {
-  const sharedExample: Snippet = {
-    code: '',
-    label: { basic: true, children: 'URL', size: 'tiny' },
-    text: 'Shared code example (unsaved)',
-    type: 'shared',
-    value: `custom-${Date.now()}`
-  };
-
-  try {
-    const compStr = atob(base64);
-    const compU8a = new Uint8Array(compStr.length);
-
-    compU8a.forEach((_, i): void => {
-      compU8a[i] = compStr.charCodeAt(i);
-    });
-
-    const u8a = snappy.uncompress(compU8a);
-    const code = util.u8aToString(u8a);
-
-    sharedExample.code = code;
-  } catch (error) {
-    const errorMessage = 'ERROR: Unable to decode code example from URL';
-
-    console.error(`${errorMessage}: \n${error}`);
-    sharedExample.code = `// ${errorMessage}`;
-  }
-
-  return sharedExample;
-}
-
-// FIXME This... ladies & gentlemen, is a mess that should be untangled
-function Playground ({ className, history, match: { params: { base64 } }, t }: Props): React.ReactElement<Props> {
-  const { api, isDevelopment } = useContext(ApiContext);
-  const injectedRef = useRef<Injected | null>(null);
-  const [code, setCode] = useState('');
-  const [isAnimated, setIsAnimated] = useState(true);
-  const [isCustomExample, setIsCustomExample] = useState(false);
-  const [isRunning, setIsRunning] = useState(false);
-  const [customExamples, setCustomExamples] = useState<Snippet[]>([]);
-  const [logs, setLogs] = useState<Log[]>([]);
-  const [options, setOptions] = useState<Snippet[]>([]);
-  const [selected, setSelected] = useState(snippets[0]);
-  const [sharedExample, setSharedExample] = useState<Snippet | undefined>();
-
-  // add snippet wrappers
-  useEffect((): void => {
-    if (!hasSnippetWrappers) {
-      snippets.forEach((snippet): void => {
-        snippet.code = `${makeWrapper(isDevelopment)}${snippet.code}`;
-      });
-
-      hasSnippetWrappers = true;
-    }
-  }, []);
-
-  // initialize all options
-  useEffect((): void => {
-    const sharedExample = base64 ? decodeBase64(base64) : undefined;
-    const localData = {
-      examples: localStorage.getItem(STORE_EXAMPLES),
-      selectedValue: localStorage.getItem(STORE_SELECTED)
-    };
-    const customExamples = localData.examples ? JSON.parse(localData.examples) : [];
-
-    const options: Snippet[] = sharedExample
-      ? [sharedExample, ...customExamples, ...snippets]
-      : [...customExamples, ...snippets];
-
-    const selected = options.find((option): boolean => option.value === localData.selectedValue);
-
-    setCustomExamples(customExamples);
-    setIsCustomExample((selected && selected.type === 'custom') || false);
-    setOptions(options);
-    setSelected(sharedExample || selected || snippets[0]);
-    setSharedExample(sharedExample);
-  }, []);
-
-  useEffect((): void => {
-    setCode(selected.code);
-  }, [selected]);
-
-  const _clearConsole = (): void => setLogs([]);
-  const _hookConsole = (type: LogType, args: any[]): void => {
-    logs.push({ args, type });
-    setLogs(logs.slice(0));
-  };
-  const _copyToClipboard = (link: string): void => {
-    // See https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f
-    const el = document.createElement('textarea');
-
-    el.value = link;
-    el.setAttribute('readonly', '');
-    el.style.position = 'absolute';
-    el.style.left = '-9999px';
-    document.body.appendChild(el);
-
-    const existingSelection = document.getSelection();
-    const selected = existingSelection && existingSelection.rangeCount > 0
-      ? existingSelection.getRangeAt(0)
-      : undefined;
-
-    el.select();
-    document.execCommand('copy');
-    document.body.removeChild(el);
-
-    if (existingSelection && selected) {
-      existingSelection.removeAllRanges();
-      existingSelection.addRange(selected);
-    }
-
-    setIsAnimated(!isAnimated);
-  };
-  const _stopJs = (): void => {
-    if (injectedRef.current) {
-      injectedRef.current.api.disconnect();
-      injectedRef.current = null;
-    }
-
-    setIsRunning(false);
-  };
-  const _runJs = async (): Promise<void> => {
-    setIsRunning(true);
-    _clearConsole();
-
-    injectedRef.current = {
-      api: api.clone(),
-      console: {
-        error: (...args: any[]): void => _hookConsole('error', args),
-        log: (...args: any[]): void => _hookConsole('log', args)
-      },
-      global: null,
-      hashing,
-      keyring: isDevelopment
-        ? uiKeyring.keyring
-        : null,
-      types,
-      util,
-      window: null,
-      joy: {
-        types: joy_types
-      }
-    };
-
-    await injectedRef.current.api.isReady;
-
-    // squash into a single line so exceptions (with line numbers) maps to the same line/origin
-    // as we have in the editor view (TODO: Make the console.error here actually return the full stack)
-    const exec = `(async ({${Object.keys(injectedRef.current).join(',')}}) => { try { ${code} \n } catch (error) { console.error(error); } })(injected);`;
-
-    // eslint-disable-next-line no-new-func
-    new Function('injected', exec)(injectedRef.current);
-
-    setIsRunning(false);
-  };
-  const _selectExample = (value: string): void => {
-    _stopJs();
-
-    if (value.length) {
-      const option = options.find((option): boolean => option.value === value);
-
-      if (option) {
-        localStorage.setItem(STORE_SELECTED, value);
-
-        _clearConsole();
-        setIsCustomExample(option.type === 'custom');
-        setSelected(option);
-      }
-    }
-  };
-  const _generateLink = (): void => {
-    const u8a = util.stringToU8a(code);
-    const compU8a = snappy.compress(u8a);
-    const compStr = compU8a.reduce((str: string, ch: number): string => {
-      return str + String.fromCharCode(ch);
-    }, '');
-
-    const base64code = btoa(compStr);
-    const path = `/js/share/${base64code}`;
-
-    if (base64code !== base64) {
-      history.push(path);
-    }
-
-    const basePath = window.location.pathname.replace('/', '').length > 0
-      ? `${window.location.origin}/${window.location.pathname.replace('/', '')}`
-      : `${window.location.origin}`;
-
-    _copyToClipboard(`${basePath}/#${path}`);
-  };
-  const _removeSnippet = (): void => {
-    const filtered = customExamples.filter((value): boolean => value.value !== selected.value);
-    const nextOptions = [...filtered, ...snippets];
-
-    setCustomExamples(filtered);
-    setIsCustomExample(nextOptions[0].type === 'custom');
-    setOptions(sharedExample ? [sharedExample, ...nextOptions] : nextOptions);
-
-    _selectExample(nextOptions[0].value);
-    localStorage.setItem(STORE_EXAMPLES, JSON.stringify(filtered));
-  };
-  const _saveSnippet = (snippetName: string): void => {
-    // The <Dropdown> component doesn't take boolean custom props and no
-    // camelCase keys, that's why 'custom' is passed as a string here
-    const snapshot: Snippet = {
-      code,
-      label: CUSTOM_LABEL,
-      text: snippetName,
-      type: 'custom',
-      value: `custom-${Date.now()}`
-    };
-    const nextOptions = [snapshot, ...customExamples, ...snippets];
-    const options = selected.type === 'shared'
-      ? nextOptions
-      : sharedExample
-        ? [sharedExample, ...nextOptions]
-        : nextOptions;
-
-    localStorage.setItem(STORE_EXAMPLES, JSON.stringify([snapshot, ...customExamples]));
-
-    setCustomExamples([snapshot, ...customExamples]);
-    setIsCustomExample(true);
-    setOptions(options);
-    setSelected(snapshot);
-    setSharedExample(selected.type === 'shared' ? undefined : sharedExample);
-  };
-
-  const snippetName = selected.type === 'custom' ? selected.text : undefined;
-
-  return (
-    <main className={`js--App ${className}`}>
-      <header className='container'>
-        <Dropdown
-          className='js--Dropdown'
-          onChange={_selectExample}
-          label={t('Select example')}
-          options={options}
-          value={selected.value}
-        />
-      </header>
-      <section className='js--Content'>
-        <Transition
-          animation='glow'
-          duration={700}
-          visible={isAnimated}
-        >
-          <article className='container js--Editor'>
-            <ActionButtons
-              generateLink={_generateLink}
-              isCustomExample={isCustomExample}
-              isRunning={isRunning}
-              removeSnippet={_removeSnippet}
-              runJs={_runJs}
-              saveSnippet={_saveSnippet}
-              snippetName={snippetName}
-              stopJs={_stopJs}
-            />
-            <Editor
-              code={code}
-              onEdit={setCode}
-            />
-          </article>
-        </Transition>
-        <Output
-          className='js--Output'
-          logs={logs}
-        >
-          <Button
-            className='action-button'
-            icon='erase'
-            isCircular
-            isNegative
-            onClick={_clearConsole}
-          />
-        </Output>
-      </section>
-    </main>
-  );
-}
-
-const Routed = withRouter(Playground);
-
-export default translate(
-  styled(Routed)`
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    padding: 1rem 0 0;
-
-    .js--Content {
-      align-content: stretch;
-      align-items: stretch;
-      display: flex;
-      height: 100%;
-      justify-content: space-between;
-      margin-bottom: 0;
-    }
-
-    .js--Dropdown {
-      margin-right: 100px;
-      position: relative;
-      z-index: 200;
-
-      .dropdown .menu > .item {
-        display: flex;
-        flex-direction: row-reverse;
-        justify-content: space-between;
-      }
-    }
-
-    .js--Editor,
-    .js--Output {
-      min-width: 200px;
-
-      .action-button {
-        position: absolute;
-        right: 0.25rem;
-        top: 0.5rem;
-        z-index: 100;
-      }
-    }
-
-    .js--Editor {
-      flex-grow: 1;
-      overflow: auto;
-      padding: 0;
-      position: relative;
-      resize: horizontal;
-      width: 60%;
-
-      textarea {
-        outline: 0;
-      }
-
-      .codeflask {
-        background: transparent;
-      }
-
-      .codeflask--has-line-numbers {
-        z-index: 0;
-      }
-
-      .codeflask--has-line-numbers .codeflask__flatten {
-        font-size: 12px;
-        line-height: 18px;
-        min-width: calc(100% - 40px);
-        padding-top: 50px;
-        width: auto;
-      }
-
-      .codeflask__lines {
-        background: #fafafa;
-        line-height: 18px;
-        padding-top: 50px;
-        z-index: 100;
-      }
-
-      &::after {
-        bottom: 0;
-        content: '↔';
-        cursor: col-resize;
-        font-size: 20px;
-        height: 20px;
-        line-height: 18px;
-        position: absolute;
-        right: 0;
-        width: 22px;
-        z-index: 1;
-      }
-    }
-
-    .ui.popup.popup-local {
-      display: flex;
-      flex: 1 1 100%;
-      max-width: 300px;
-
-      .button {
-        margin: 0;
-      }
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/app-js/src/constants.tsx b/pioneer/packages/old-apps/app-js/src/constants.tsx
deleted file mode 100644
index 10a03f386c..0000000000
--- a/pioneer/packages/old-apps/app-js/src/constants.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-js authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { StrictLabelProps } from 'semantic-ui-react/dist/commonjs/elements/Label';
-
-export const STORE_EXAMPLES = 'polkadot-app-js-examples';
-export const STORE_SELECTED = 'polkadot-app-js-selected';
-
-export const CUSTOM_LABEL: StrictLabelProps = {
-  color: 'orange',
-  children: 'Custom',
-  size: 'tiny'
-};
diff --git a/pioneer/packages/old-apps/app-js/src/index.tsx b/pioneer/packages/old-apps/app-js/src/index.tsx
deleted file mode 100644
index 1b7684b384..0000000000
--- a/pioneer/packages/old-apps/app-js/src/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-js authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { AppProps, BareProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import { Route, Switch } from 'react-router';
-
-import Playground from './Playground';
-
-interface Props extends AppProps, BareProps {}
-
-export default function AppJs ({ basePath }: Props): React.ReactElement<Props> {
-  return (
-    <Switch>
-      <Route path={`${basePath}/share/:base64`} component={Playground} />
-      <Route component={Playground} />
-    </Switch>
-  );
-}
diff --git a/pioneer/packages/old-apps/app-js/src/snappyjs.d.ts b/pioneer/packages/old-apps/app-js/src/snappyjs.d.ts
deleted file mode 100644
index 6a2e910563..0000000000
--- a/pioneer/packages/old-apps/app-js/src/snappyjs.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-js 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 'snappyjs';
diff --git a/pioneer/packages/old-apps/app-js/src/snippets/consts-examples.ts b/pioneer/packages/old-apps/app-js/src/snippets/consts-examples.ts
deleted file mode 100644
index 42addad201..0000000000
--- a/pioneer/packages/old-apps/app-js/src/snippets/consts-examples.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-js authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Snippet } from '@polkadot/app-js/types';
-
-export const constsStakingParameters: Snippet = {
-  value: 'constsStakingParameters',
-  text: 'Get staking parameters',
-  label: { color: 'green', children: 'Consts', size: 'tiny' },
-  code: `// Get SRML staking parameters as consts
-// 'parameter_types' were added to substrate with spec_version: 101.
-// This example will throw an error if used with versions before that.
-
-const bondingDuration = api.consts.staking.bondingDuration;
-const sessionsPerEra = api.consts.staking.sessionsPerEra;
-
-console.log('Staking bonding duration: ' + bondingDuration);
-console.log('Staking sessions per era: ' + sessionsPerEra);`
-};
diff --git a/pioneer/packages/old-apps/app-js/src/snippets/extrinsics-examples.ts b/pioneer/packages/old-apps/app-js/src/snippets/extrinsics-examples.ts
deleted file mode 100644
index bd38b8827b..0000000000
--- a/pioneer/packages/old-apps/app-js/src/snippets/extrinsics-examples.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-js authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Snippet } from '@polkadot/app-js/types';
-
-export const extrinsicMakeTransfer: Snippet = {
-  value: 'extrinsicMakeTransfer',
-  text: 'Make transfer and listen to events',
-  label: { color: 'grey', children: 'Extrinsics', size: 'tiny' },
-  code: `// Make a transfer from Alice to Bob and listen to system events.
-// You need to be connected to a development chain for this example to work.
-const ALICE = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY';
-const BOB = '5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty';
-
-// Get a random number between 1 and 100000
-const randomAmount = Math.floor((Math.random() * 100000) + 1);
-
-// Create a extrinsic, transferring randomAmount units to Bob.
-const transfer = api.tx.balances.transfer(BOB, randomAmount);
-
-// Sign and Send the transaction
-transfer.signAndSend(ALICE, ({ events = [], status }) => {
-  if (status.isFinalized) {
-    console.log('Successful transfer of ' + randomAmount + ' with hash ' + status.asFinalized.toHex());
-  } else {
-    console.log('Status of transfer: ' + status.type);
-  }
-
-  events.forEach(({ phase, event: { data, method, section } }) => {
-    console.log(phase.toString() + ' : ' + section + '.' + method + ' ' + data.toString());
-  });
-});`
-};
diff --git a/pioneer/packages/old-apps/app-js/src/snippets/index.ts b/pioneer/packages/old-apps/app-js/src/snippets/index.ts
deleted file mode 100644
index d915681de0..0000000000
--- a/pioneer/packages/old-apps/app-js/src/snippets/index.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-123code authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Snippet } from './../types';
-
-import {
-  rpcNetworkAuthoring,
-  rpcNewHead,
-  rpcQueryState,
-  rpcSysthemInfo
-} from './rpc-examples';
-
-import {
-  storageGetInfo,
-  storageSystemEvents,
-  storageListenToBalanceChange,
-  storageListenToMultipleBalancesChange,
-  storageRetrieveInfoOnQueryKeys
-} from './storage-examples';
-
-import {
-  constsStakingParameters
-} from './consts-examples';
-
-import {
-  extrinsicMakeTransfer
-} from './extrinsics-examples';
-
-const snippets: Snippet[] = [
-  rpcNetworkAuthoring,
-  rpcNewHead,
-  rpcQueryState,
-  rpcSysthemInfo,
-  storageGetInfo,
-  storageSystemEvents,
-  storageListenToBalanceChange,
-  storageListenToMultipleBalancesChange,
-  storageRetrieveInfoOnQueryKeys,
-  constsStakingParameters,
-  extrinsicMakeTransfer
-];
-
-export default snippets;
diff --git a/pioneer/packages/old-apps/app-js/src/snippets/rpc-examples.ts b/pioneer/packages/old-apps/app-js/src/snippets/rpc-examples.ts
deleted file mode 100644
index 2c396f61fe..0000000000
--- a/pioneer/packages/old-apps/app-js/src/snippets/rpc-examples.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-js authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Snippet } from '@polkadot/app-js/types';
-
-export const rpcNetworkAuthoring: Snippet = {
-  value: 'rpcNetworkAuthoring',
-  text: 'Get authoring information',
-  label: { color: 'pink', children: 'RPC', size: 'tiny' },
-  code: `// Returns all pending extrinsics, potentially grouped by sender
-const unsub = await api.rpc.author.pendingExtrinsics((extrinsics) => {
-  if(extrinsics.length === 0){
-    console.log('No pending extrinsics');
-    return;
-  }
-  console.log(extrinsics);
-});`
-};
-
-export const rpcNewHead: Snippet = {
-  value: 'rpcListenToHead',
-  text: 'Listen to new Head',
-  label: { color: 'pink', children: 'RPC', size: 'tiny' },
-  code: `// subscribe to new headers, printing the full info for 5 Blocks
-let count = 0;
-const unsub = await api.rpc.chain.subscribeNewHeads((header) => {
-  console.log(\`#\${header.number}:\`, header);
-
-  if (++count === 5) {
-    console.log('5 headers retrieved, unsubscribing');
-    unsub();
-  }
-});`
-};
-
-export const rpcQueryState: Snippet = {
-  value: 'rpcQueryState',
-  text: 'Get state metadata',
-  label: { color: 'pink', children: 'RPC', size: 'tiny' },
-  code: `// retrieve and log the complete metadata of your node
-const { magicNumber,metadata } = await api.rpc.state.getMetadata();
-
-console.log( 'Magic number: ' + magicNumber );
-console.log( 'Metadata: ' + metadata.raw );
-`
-};
-
-export const rpcSysthemInfo: Snippet = {
-  value: 'rpcSysthemInfo',
-  text: 'Get system information',
-  label: { color: 'pink', children: 'RPC', size: 'tiny' },
-  code: `// Retrieve the chain & node information information via rpc calls
-const [chain, nodeName, nodeVersion, properties] = await Promise.all([
-  api.rpc.system.chain(),
-  api.rpc.system.name(),
-  api.rpc.system.version(),
-  api.rpc.system.properties()
-]);
-console.log('You are connected to chain ' + chain)
-console.log('You are using: ' + nodeName + ' v' + nodeVersion);
-
-if (properties.size > 0) {
-  console.log('Node specific properties:');
-  properties.forEach((value, key) => {
-    console.log(key, value);
-  });
-} else {
-  console.log('No specific chain properties found.');
-}`
-};
diff --git a/pioneer/packages/old-apps/app-js/src/snippets/storage-examples.ts b/pioneer/packages/old-apps/app-js/src/snippets/storage-examples.ts
deleted file mode 100644
index 625a18c908..0000000000
--- a/pioneer/packages/old-apps/app-js/src/snippets/storage-examples.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-js authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Snippet } from '@polkadot/app-js/types';
-
-export const storageGetInfo: Snippet = {
-  value: 'storageGetInfo',
-  text: 'Get chain state information',
-  label: { color: 'blue', children: 'Storage', size: 'tiny' },
-  code: `// Get chain state information
-// Make our basic chain state / storage queries, all in one go
-
-const [now, minimumValidatorCount, validators] = await Promise.all([
-  api.query.timestamp.now(),
-  api.query.staking.minimumValidatorCount(),
-  api.query.session.validators()
-]);
-
-console.log('The current date is: ' + now);
-console.log('The minimum validator count: ' + minimumValidatorCount);
-
-if (validators && validators.length > 0) {
-  // Retrieve the balances for all validators
-  console.log('Validators');
-
-  const validatorBalances = await Promise.all(
-    validators.map(authorityId => api.query.balances.freeBalance(authorityId))
-  );
-
-  validators.forEach((authorityId, index) => {
-    console.log('Validator: ' + authorityId.toString() )
-    console.log('Balance: ' + validatorBalances[index].toString() );
-  });
-}
-`
-};
-
-export const storageSystemEvents: Snippet = {
-  value: 'storageSystemEvents',
-  text: 'Listen to system events',
-  label: { color: 'blue', children: 'Storage', size: 'tiny' },
-  code: `// Subscribe to system events via storage
-api.query.system.events((events) => {
-  console.log('----- Received ' + events.length + ' event(s): -----');
-  // loop through the Vec<EventRecord>
-  events.forEach((record) => {
-  // extract the phase, event and the event types
-    const { event, phase } = record;
-    const types = event.typeDef;
-    // show what we are busy with
-    console.log(event.section + ':' + event.method + '::' + 'phase=' + phase.toString());
-    console.log(event.meta.documentation.toString());
-    // loop through each of the parameters, displaying the type and data
-    event.data.forEach((data, index) => {
-      console.log(types[index].type + ';' + data.toString());
-    });
-  });
-});`
-};
-
-export const storageListenToBalanceChange: Snippet = {
-  value: 'storageListenToBalanceChange',
-  text: 'Listen to balance changes',
-  label: { color: 'blue', children: 'Storage', size: 'tiny' },
-  code: `// You may leave this example running and make a transfer
-// of any value from or to Alice address in the 'Transfer' App
-const ALICE = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY';
-
-// Retrieve the initial balance.
-let previous = await api.query.balances.freeBalance(ALICE);
-
-console.log('ALICE has a balance of ' + previous);
-
-// Subscribe and listen to balance changes
-api.query.balances.freeBalance(ALICE, (balance) => {
-  // Calculate the delta
-  const change = balance.sub(previous);
-  // Only display positive value changes (Since we are pulling 'previous' above already,
-  // the initial balance change will also be zero)
-  if (!change.isZero()) {
-    previous = balance;
-    console.log('New transaction of: '+ change);
-  }
-});`
-};
-
-export const storageListenToMultipleBalancesChange: Snippet = {
-  value: 'storageListenToMultipleBalancesChange',
-  text: 'Listen to multiple balances changes',
-  label: { color: 'blue', children: 'Storage', size: 'tiny' },
-  code: `// You may leave this example running and make a transfer
-// of any value from or to Alice/Bob address in the 'Transfer' App
-const ALICE = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY';
-const BOB = '5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty';
-
-console.log('Tracking balances for:', [ALICE, BOB])
-
-// Subscribe and listen to several balance changes
-api.query.balances.freeBalance.multi([ALICE, BOB], (balances) => {
-  console.log('Change detected, new balances: ', balances)
-});`
-};
-
-export const storageRetrieveInfoOnQueryKeys: Snippet = {
-  value: 'storageRetrieveInfoOnQueryKeys',
-  text: 'Retrieve Info on query keys',
-  label: { color: 'blue', children: 'Storage', size: 'tiny' },
-  code: `// This example set shows how to make queries and retrieve info on query keys
-const ALICE = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY';
-
-// retrieve the balance, once-off at the latest block
-const currBalance = await api.query.balances.freeBalance(ALICE);
-
-console.log('Alice has a current balance of', currBalance);
-
-// retrieve balance updates with an optional value callback
-const balanceUnsub = await api.query.balances.freeBalance(ALICE, (balance) => {
-  console.log('Alice has an updated balance of', balance);
-});
-
-// retrieve the balance at a block hash in the past
-const header = await api.rpc.chain.getHeader();
-const prevHash = await api.rpc.chain.getBlockHash(header.blockNumber.subn(42));
-const prevBalance = await api.query.balances.freeBalance.at(prevHash, ALICE);
-
-console.log('Alice had a balance of', prevBalance, '(42 blocks ago)');
-
-// useful in some situations - the value hash and storage entry size
-const currHash = await api.query.balances.freeBalance.hash(ALICE);
-const currSize = await api.query.balances.freeBalance.size(ALICE);
-
-console.log('Alice balance entry has a value hash of', currHash, 'with a size of', currSize);`
-};
diff --git a/pioneer/packages/old-apps/app-js/src/snippets/transfer.ts b/pioneer/packages/old-apps/app-js/src/snippets/transfer.ts
deleted file mode 100644
index 6b0705d0dd..0000000000
--- a/pioneer/packages/old-apps/app-js/src/snippets/transfer.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-123code authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-export default `// transfer
-const sender = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY';
-const recipient = '5F2PCyGDWGDJyLRV15NrBsEa9Y61BS1dfAwzbfk7yR6DBm7P';
-
-const nonce = await api.query.system.accountNonce(ALICE),
-
-console.log('Current nonce', nonce);
-
-const unsub = await api.tx.balances
-  .transfer(recipient,12345)
-  .signAndSend(sender, ({ events = [], status }) => {
-    console.log('Transaction status:', status.type);
-
-    if (status.isFinalized) {
-      console.log('Completed at block hash', status.asFinalized.toHex());
-      console.log('Events:');
-
-      events.forEach(({ phase, event: { data, method, section } }) => {
-        console.log('\t', phase.toString(), \`: \${section}.\${method}\`, data.toString());
-      });
-
-      unsub();
-    }
-  });`;
diff --git a/pioneer/packages/old-apps/app-js/src/snippets/wrapping.ts b/pioneer/packages/old-apps/app-js/src/snippets/wrapping.ts
deleted file mode 100644
index 840e402c63..0000000000
--- a/pioneer/packages/old-apps/app-js/src/snippets/wrapping.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-js authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-export default function makeWrapper (isDevelopment: boolean): string {
-  const args = `api, hashing, ${isDevelopment ? 'keyring, ' : ''}types, util`;
-
-  return `// All code is wrapped within an async closure,
-// allowing access to ${args}.
-// (async ({ ${args} }) => {
-//   ... any user code is executed here ...
-// })();
-
-`;
-}
diff --git a/pioneer/packages/old-apps/app-js/src/translate.ts b/pioneer/packages/old-apps/app-js/src/translate.ts
deleted file mode 100644
index a33fc587e1..0000000000
--- a/pioneer/packages/old-apps/app-js/src/translate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-js authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { withTranslation } from 'react-i18next';
-
-export default withTranslation(['app-js']);
diff --git a/pioneer/packages/old-apps/app-js/src/types.ts b/pioneer/packages/old-apps/app-js/src/types.ts
deleted file mode 100644
index 246370d7a3..0000000000
--- a/pioneer/packages/old-apps/app-js/src/types.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-js authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { SemanticShorthandItem } from 'semantic-ui-react/dist/commonjs/generic';
-import { LabelProps } from 'semantic-ui-react/dist/commonjs/elements/Label';
-
-export type LogType = 'error' | 'log';
-
-export interface Log {
-  args: any[];
-  type: LogType;
-}
-
-export interface Snippet {
-  text: string;
-  value: string;
-  code: string;
-  label?: SemanticShorthandItem<LabelProps>;
-  type?: 'custom' | 'shared';
-}
diff --git a/pioneer/packages/old-apps/app-settings/LICENSE b/pioneer/packages/old-apps/app-settings/LICENSE
deleted file mode 100644
index 0d381b2e97..0000000000
--- a/pioneer/packages/old-apps/app-settings/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/pioneer/packages/old-apps/app-settings/README.md b/pioneer/packages/old-apps/app-settings/README.md
deleted file mode 100644
index a7a30148e9..0000000000
--- a/pioneer/packages/old-apps/app-settings/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# @polkadot/app-settings
-
-Allows you to change the basic settings for the application, such as language, the node to connect to and theme
diff --git a/pioneer/packages/old-apps/app-settings/package.json b/pioneer/packages/old-apps/app-settings/package.json
deleted file mode 100644
index 21860ca556..0000000000
--- a/pioneer/packages/old-apps/app-settings/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "@polkadot/app-settings",
-  "version": "0.37.0-beta.63",
-  "description": "Settings management",
-  "main": "index.js",
-  "scripts": {},
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/react-components": "^0.37.0-beta.63",
-    "@polkadot/react-query": "^0.37.0-beta.63",
-    "query-string": "^6.8.3"
-  }
-}
diff --git a/pioneer/packages/old-apps/app-settings/src/Developer.tsx b/pioneer/packages/old-apps/app-settings/src/Developer.tsx
deleted file mode 100644
index b60fe27e86..0000000000
--- a/pioneer/packages/old-apps/app-settings/src/Developer.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-settings authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
-
-import React, { useEffect, useState } from 'react';
-import store from 'store';
-import styled from 'styled-components';
-import { getTypeRegistry } from '@polkadot/types';
-import { Button, Editor, InputFile } from '@polkadot/react-components';
-import { isJsonObject, stringToU8a, u8aToString } from '@polkadot/util';
-
-import translate from './translate';
-
-interface Props extends AppProps, I18nProps {}
-
-const EMPTY_CODE = '{\n\n}';
-const EMPTY_TYPES = {};
-
-function Developer ({ className, onStatusChange, t }: Props): React.ReactElement<Props> {
-  const [code, setCode] = useState(EMPTY_CODE);
-  const [isJsonValid, setIsJsonValid] = useState(true);
-  const [isTypesValid, setIsTypesValid] = useState(true);
-  const [types, setTypes] = useState<Record<string, any>>(EMPTY_TYPES);
-  const [typesPlaceholder, setTypesPlaceholder] = useState<string | null>(null);
-
-  useEffect((): void => {
-    const types = store.get('types') || {};
-
-    if (Object.keys(types).length) {
-      setCode(JSON.stringify(types, null, 2));
-      setTypes({});
-      setTypesPlaceholder(Object.keys(types).join(', '));
-    }
-  }, []);
-
-  const _setState = ({ code, isJsonValid, isTypesValid, types, typesPlaceholder }: { code: string; isJsonValid: boolean; isTypesValid: boolean; types: Record<string, any>; typesPlaceholder: string | null }): void => {
-    setCode(code);
-    setIsJsonValid(isJsonValid);
-    setIsTypesValid(isTypesValid);
-    setTypes(types);
-    setTypesPlaceholder(typesPlaceholder);
-  };
-  const _clearTypes = (): void => {
-    store.remove('types');
-
-    _setState({
-      code: EMPTY_CODE,
-      isJsonValid: true,
-      isTypesValid: true,
-      types: EMPTY_TYPES,
-      typesPlaceholder: null
-    });
-  };
-  const _onChangeTypes = (data: Uint8Array): void => {
-    const code = u8aToString(data);
-
-    try {
-      const types = JSON.parse(code);
-      const typesPlaceholder = Object.keys(types).join(', ');
-
-      console.log('Detected types:', typesPlaceholder);
-
-      _setState({
-        code,
-        isJsonValid: true,
-        isTypesValid: true,
-        types: Object.keys(types).length === 0 ? {} : types,
-        typesPlaceholder
-      });
-    } catch (error) {
-      console.error('Error registering types:', error);
-
-      _setState({
-        code,
-        isJsonValid: false,
-        isTypesValid: false,
-        types: {},
-        typesPlaceholder: error.message
-      });
-    }
-  };
-  const _onEditTypes = (code: string): void => {
-    try {
-      if (!isJsonObject(code)) {
-        throw Error(t('This is not a valid JSON object.'));
-      }
-
-      _onChangeTypes(stringToU8a(code));
-    } catch (e) {
-      setCode(code);
-      setIsJsonValid(false);
-      setTypesPlaceholder(e.message);
-    }
-  };
-  const _saveDeveloper = (): void => {
-    try {
-      getTypeRegistry().register(types);
-      store.set('types', types);
-      setIsTypesValid(true);
-      onStatusChange({
-        status: 'success',
-        action: t('Your custom types have been added')
-      });
-    } catch (error) {
-      console.error(error);
-      setIsTypesValid(false);
-      onStatusChange({
-        status: 'error',
-        action: t(`Error saving your custom types. ${error.message}`)
-      });
-    }
-  };
-
-  const typesHasNoEntries = Object.keys(types).length === 0;
-
-  return (
-    <div className={className}>
-      <div className='ui--row'>
-        <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.')}
-            isError={!isTypesValid}
-            label={t('Additional types as a JSON file (or edit below)')}
-            onChange={_onChangeTypes}
-            placeholder={typesPlaceholder}
-          />
-        </div>
-      </div>
-      <div className='ui--row'>
-        <div className='full'>
-          <Editor
-            className='editor'
-            code={code}
-            isValid={isJsonValid}
-            onEdit={_onEditTypes}
-          />
-        </div>
-      </div>
-      <Button.Group>
-        <Button
-          isDisabled={typesHasNoEntries}
-          isNegative
-          onClick={_clearTypes}
-          label={t('Reset')}
-          icon='sync'
-        />
-        <Button.Or />
-        <Button
-          isDisabled={!isTypesValid || !isJsonValid || typesHasNoEntries}
-          isPrimary
-          onClick={_saveDeveloper}
-          label={t('Save')}
-          icon='save'
-        />
-      </Button.Group>
-    </div>
-  );
-}
-
-export default translate(
-  styled(Developer)`
-    .editor {
-      height: 21rem;
-      margin-left: 2rem;
-      position: relative;
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/app-settings/src/General.tsx b/pioneer/packages/old-apps/app-settings/src/General.tsx
deleted file mode 100644
index fd71710327..0000000000
--- a/pioneer/packages/old-apps/app-settings/src/General.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-settings authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { Option } from './types';
-
-import React, { useEffect, useState } from 'react';
-import { isLedgerCapable } from '@polkadot/react-api';
-import { Button, Dropdown } from '@polkadot/react-components';
-import uiSettings from '@polkadot/joy-settings/';
-
-import translate from './translate';
-import { createIdenticon, createOption, save, saveAndReload } from './util';
-import SelectUrl from './SelectUrl';
-
-interface Props extends I18nProps{
-  isModalContent?: boolean;
-  onClose?: () => void;
-}
-
-const prefixOptions = uiSettings.availablePrefixes.map((o): Option => createOption(o, ['default']));
-const iconOptions = uiSettings.availableIcons.map((o): Option => createIdenticon(o, ['default']));
-const ledgerConnOptions = uiSettings.availableLedgerConn;
-
-function General ({ className, isModalContent, onClose, t }: Props): React.ReactElement<Props> {
-  // tri-state: null = nothing  changed, false = no reload, true = reload required
-  const [changed, setChanged] = useState<boolean | null>(null);
-  const [settings, setSettings] = useState(uiSettings.get());
-
-  useEffect((): void => {
-    const prev = uiSettings.get();
-    const hasChanges = Object.entries(settings).some(([key, value]): boolean => (prev as any)[key] !== value);
-    const needsReload = prev.apiUrl !== settings.apiUrl || prev.prefix !== settings.prefix;
-
-    setChanged(
-      hasChanges
-        ? needsReload
-        : null
-    );
-  }, [settings]);
-
-  const _onChangeApiUrl = (apiUrl: string): void => setSettings({ ...settings, apiUrl });
-  const _onChangeIcon = (icon: string): void => setSettings({ ...settings, icon });
-  const _onChangeLedgerConn = (ledgerConn: string): void => setSettings({ ...settings, ledgerConn });
-  const _onChangePrefix = (prefix: number): void => setSettings({ ...settings, prefix });
-  const _onChangeUiMode = (uiMode: string): void => setSettings({ ...settings, uiMode });
-  const _saveAndReload = (): void => saveAndReload(settings);
-  const _save = (): void => {
-    save(settings);
-    setChanged(null);
-  };
-
-  const { icon, i18nLang, ledgerConn, prefix, uiMode } = settings;
-
-  return (
-    <div className={className}>
-      <SelectUrl onChange={_onChangeApiUrl} />
-      {!isModalContent && (
-        <>
-          <div className='ui--row'>
-            <Dropdown
-              defaultValue={prefix}
-              help={t('Override the default ss58 prefix for address generation')}
-              label={t('address prefix')}
-              onChange={_onChangePrefix}
-              options={prefixOptions}
-            />
-          </div>
-          <div className='ui--row'>
-            <Dropdown
-              defaultValue={icon}
-              help={t('Override the default identity icon display with a specific theme')}
-              label={t('default icon theme')}
-              onChange={_onChangeIcon}
-              options={iconOptions}
-            />
-          </div>
-          <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')}
-              onChange={_onChangeUiMode}
-              options={uiSettings.availableUIModes}
-            />
-          </div>
-          {isLedgerCapable() && (
-            <div className='ui--row'>
-              <Dropdown
-                defaultValue={ledgerConn}
-                help={t('Manage your connection to Ledger S')}
-                label={t('manage hardware connections')}
-                onChange={_onChangeLedgerConn}
-                options={ledgerConnOptions}
-              />
-            </div>
-          )}
-          <div className='ui--row'>
-            <Dropdown
-              defaultValue={i18nLang}
-              isDisabled
-              label={t('default interface language')}
-              options={uiSettings.availableLanguages}
-            />
-          </div>
-        </>
-      )}
-      <Button.Group>
-        {isModalContent && (
-          <>
-            <Button
-              isNegative
-              label={t('Cancel')}
-              icon='cancel'
-              onClick={onClose}
-            />
-            <Button.Or />
-          </>
-        )}
-        <Button
-          isDisabled={changed === null}
-          isPrimary
-          onClick={
-            changed
-              ? _saveAndReload
-              : _save
-          }
-          label={
-            changed
-              ? t('Save & Reload')
-              : t('Save')
-          }
-          icon='save'
-        />
-      </Button.Group>
-    </div>
-  );
-}
-
-export default translate(General);
diff --git a/pioneer/packages/old-apps/app-settings/src/SelectUrl.tsx b/pioneer/packages/old-apps/app-settings/src/SelectUrl.tsx
deleted file mode 100644
index b449828607..0000000000
--- a/pioneer/packages/old-apps/app-settings/src/SelectUrl.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-settings authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { Option } from './types';
-
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { Dropdown, Input, Toggle } from '@polkadot/react-components';
-import uiSettings from '@polkadot/joy-settings/';
-
-import translate from './translate';
-import { createOption } from './util';
-
-interface Props extends I18nProps {
-  className?: string;
-  onChange: (url: string) => void;
-}
-
-interface StateUrl {
-  isValid: boolean;
-  url: string;
-}
-
-interface State extends StateUrl {
-  isCustom: boolean;
-}
-
-const endpointOptions = uiSettings.availableNodes.map((o): Option => createOption(o, ['local']));
-
-// check the validity of the url
-function isValidUrl (url: string): boolean {
-  return (
-    // some random length... we probably want to parse via some lib
-    (url.length >= 7) &&
-    // check that it starts with a valid ws identifier
-    (url.startsWith('ws://') || url.startsWith('wss://'))
-  );
-}
-
-// sanitize a url and check it for validity
-function makeUrl (_url: string): StateUrl {
-  const url = _url.trim();
-  const isValid = isValidUrl(url);
-
-  return { isValid, url };
-}
-
-// this allows us to retrieve the initial state by reading the settings and the applying
-// validation on-top of the values retrieved
-function getInitialState (): State {
-  const url = uiSettings.get().apiUrl;
-  const isCustom = uiSettings.availableNodes.reduce((isCustom: boolean, { value }): boolean => {
-    return isCustom && value !== url;
-  }, true);
-  const isValid = isValidUrl(url);
-
-  return { isCustom, isValid, url };
-}
-
-function SelectUrl ({ className, onChange, t }: Props): React.ReactElement<Props> {
-  const [info, setInfo] = useState(getInitialState());
-  const { isCustom, isValid, url } = info;
-  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 _onChangeUrl = (url: string): void => setInfo({ ...info, ...makeUrl(url) });
-  const _onChangeCustom = (isCustom: boolean): void =>
-    setInfo({
-      ...makeUrl(
-        isCustom
-          ? info.url
-          : uiSettings.availableNodes[0].value as string
-      ),
-      isCustom
-    });
-
-  useEffect((): void => {
-    if (onChange && info.isValid) {
-      onChange(info.url);
-    }
-  }, [info]);
-
-  return (
-    <div className={className}>
-      <div className='ui--row'>{
-        isCustom
-          ? <Input
-            defaultValue={url}
-            help={help}
-            isError={!isValid}
-            label={label}
-            onChange={_onChangeUrl}
-          />
-          : <Dropdown
-            defaultValue={url}
-            help={help}
-            label={label}
-            onChange={_onChangeUrl}
-            options={endpointOptions}
-          />
-      }</div>
-      <Toggle
-        className='settings--customToggle'
-        defaultValue={isCustom}
-        label={t('custom endpoint')}
-        onChange={_onChangeCustom}
-      />
-    </div>
-  );
-}
-
-export default translate(
-  styled(SelectUrl)`
-    position: relative;
-
-    .settings--customToggle {
-      position: absolute;
-      top: .5rem;
-      right: 3.5rem;
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/app-settings/src/index.tsx b/pioneer/packages/old-apps/app-settings/src/index.tsx
deleted file mode 100644
index 16035df88a..0000000000
--- a/pioneer/packages/old-apps/app-settings/src/index.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-settings authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import { Route, Switch } from 'react-router';
-
-import { HelpOverlay, Tabs } from '@polkadot/react-components';
-import uiSettings from '@polkadot/joy-settings/';
-
-import md from './md/basics.md';
-import translate from './translate';
-import Developer from './Developer';
-import General from './General';
-
-interface Props extends AppProps, I18nProps {}
-
-const hidden = uiSettings.uiMode === 'full'
-  ? []
-  : ['developer'];
-
-function App (props: Props): React.ReactElement<Props> {
-  const _renderDeveloper = (): React.ReactNode => {
-    return (
-      <Developer {...props} />
-    );
-  };
-  const { basePath, t } = props;
-
-  return (
-    <main className='settings--App'>
-      <HelpOverlay md={md} />
-      <header>
-        <Tabs
-          basePath={basePath}
-          hidden={hidden}
-          items={[
-            {
-              isRoot: true,
-              name: 'general',
-              text: t('General')
-            },
-            {
-              name: 'developer',
-              text: t('Developer')
-            }
-          ]}
-        />
-      </header>
-      <Switch>
-        <Route path={`${basePath}/developer`} render={_renderDeveloper} />
-        <Route component={General} />
-      </Switch>
-    </main>
-  );
-}
-
-export default translate(App);
diff --git a/pioneer/packages/old-apps/app-settings/src/md/basics.md b/pioneer/packages/old-apps/app-settings/src/md/basics.md
deleted file mode 100644
index de52631814..0000000000
--- a/pioneer/packages/old-apps/app-settings/src/md/basics.md
+++ /dev/null
@@ -1,61 +0,0 @@
-# Settings
-
-Here you are able to tweak a number of the settings for your interface - where it connects to, the actual theme and if you are a developer, have access to some additional features to allow for a stress-free connection to a (possibly) custom chain.
-
-# General
-
-In the general section you can setup the basic operation for your UI.
-
-- **endpoint** Defines the node to connect to. Select from one of the available hosted RPCs or connect to your own by specifying a custom URL. (Be aware that custom URLs should be behind secure WebSockets if you are using a UI hosted on a https endpoint)
-- **theme** Swap between a Polkadot or Substrate themed interface.
-- **mode** By default the UI appears in a fully-featured mode. You can select to only have the core features (which provides all the basics, unless you are a power user).
-
-# Developer
-
-In this section, you are able to define custom types to be added to the underlying API. When developing a custom chain, it is typical that additional types are added. Defining them here allows the underlying API (and therefore the UI) have an understanding how to encode and decode these types.
-
-Types are saved across refreshes, so it is a single operation for all future usages of the UI. For the definitions, a simple JSON format is used, and example could be -
-
-```
-{
-  "TransactionInput": {
-    "parent_output": "Hash",
-    "signature": "Signature"
-  },
-  "TransactionOutput": {
-    "value": "u128",
-    "pubkey": "Hash",
-    "sale": "u32"
-  },
-  "Transaction": {
-    "inputs": "Vec<TransactionInput>",
-    "outputs": "Vec<TransactionOutput>"
-  }
-}
-```
-
-Be aware that the types are registered in the order they appear here, however it does support resolution independent of the order. (Circular deps are not supported here). For a slightly more complex example, using both types, enums, tuples and Compact numbers, the following would be used -
-
-```
-{
-  "ArrayThing": "Vec<Thing>",
-  "MyNumber": "u32",
-  "Thing": {
-    "count_enum": "SimpleEnum",
-    "type_enum": "TypeEnum",
-    "counter": "MyNumber",
-    "tuple": "(u32, u64)",
-    "ids": "Vec<AccountId>"
-  },
-  "SimpleEnum": {
-    "_enum": ["One", "Two", "Three"]
-  },
-  "TypeEnum": {
-    "_enum": {
-      "One": "u32",
-      "Two": "Compact<u64>",
-      "Three": null
-    }
-  }
-}
-```
diff --git a/pioneer/packages/old-apps/app-settings/src/translate.ts b/pioneer/packages/old-apps/app-settings/src/translate.ts
deleted file mode 100644
index 1bc2fdcb3a..0000000000
--- a/pioneer/packages/old-apps/app-settings/src/translate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-settings authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { withTranslation } from 'react-i18next';
-
-export default withTranslation(['app-settings']);
diff --git a/pioneer/packages/old-apps/app-settings/src/types.ts b/pioneer/packages/old-apps/app-settings/src/types.ts
deleted file mode 100644
index 897cf11ffb..0000000000
--- a/pioneer/packages/old-apps/app-settings/src/types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-settings authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-export interface Option {
-  text: React.ReactNode;
-  value: string | number;
-}
-
-export interface SetOption {
-  info: string;
-  text: string;
-  value: string | number;
-}
diff --git a/pioneer/packages/old-apps/app-settings/src/util.tsx b/pioneer/packages/old-apps/app-settings/src/util.tsx
deleted file mode 100644
index b503084149..0000000000
--- a/pioneer/packages/old-apps/app-settings/src/util.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-settings authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { SettingsStruct } from '@polkadot/ui-settings/types';
-import { Option, SetOption } from './types';
-
-import React from 'react';
-import { ChainImg, IdentityIcon } from '@polkadot/react-components';
-import uiSettings from '@polkadot/joy-settings/';
-
-export function createOption ({ info, text, value }: SetOption, overrides: string[] = [], override = 'empty'): Option {
-  return {
-    text: (
-      <div
-        className='ui--Dropdown-item'
-        key={value}
-      >
-        <ChainImg
-          className='ui--Dropdown-icon'
-          logo={
-            overrides.includes(info)
-              ? override
-              : info
-          }
-        />
-        <div className='ui--Dropdown-name'>{text}</div>
-      </div>
-    ),
-    value
-  };
-}
-
-export function createIdenticon ({ info, text, value }: SetOption, overrides: string[] = [], override = 'empty'): Option {
-  return {
-    text: (
-      <div
-        className='ui--Dropdown-item'
-        key={value}
-      >
-        <IdentityIcon
-          className='ui--Dropdown-icon'
-          size={32}
-          theme={
-            overrides.includes(info)
-              ? override as 'empty'
-              : info as 'substrate'
-          }
-          value='5F9999K9UgTUgSsbXZQcEmRMvQqwJoBUHMv9e1k2MdgghuRA'
-        />
-        <div className='ui--Dropdown-name'>{text}</div>
-      </div>
-    ),
-    value
-  };
-}
-
-export function save (settings: SettingsStruct): void {
-  uiSettings.set(settings);
-}
-
-export function saveAndReload (settings: SettingsStruct): void {
-  save(settings);
-
-  // HACK This is terribe, but since the API needs to re-connect, but since
-  // the API does not yet handle re-connections properly, it is what it is
-  window.location.reload();
-}
diff --git a/pioneer/packages/old-apps/app-staking/LICENSE b/pioneer/packages/old-apps/app-staking/LICENSE
deleted file mode 100644
index 0d381b2e97..0000000000
--- a/pioneer/packages/old-apps/app-staking/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/pioneer/packages/old-apps/app-staking/README.md b/pioneer/packages/old-apps/app-staking/README.md
deleted file mode 100644
index 8023b83d57..0000000000
--- a/pioneer/packages/old-apps/app-staking/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# @polkadot/app-staking
diff --git a/pioneer/packages/old-apps/app-staking/package.json b/pioneer/packages/old-apps/app-staking/package.json
deleted file mode 100644
index 4bcea3a6d6..0000000000
--- a/pioneer/packages/old-apps/app-staking/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "@polkadot/app-staking",
-  "version": "0.37.0-beta.63",
-  "description": "A basic staking app",
-  "main": "index.js",
-  "scripts": {},
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/app-explorer": "^0.37.0-beta.63",
-    "@polkadot/react-components": "^0.37.0-beta.63",
-    "@polkadot/react-query": "^0.37.0-beta.63"
-  }
-}
diff --git a/pioneer/packages/old-apps/app-staking/src/Actions/Account/BondExtra.tsx b/pioneer/packages/old-apps/app-staking/src/Actions/Account/BondExtra.tsx
deleted file mode 100644
index 31e5e46228..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/Actions/Account/BondExtra.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/ui-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { ApiProps } from '@polkadot/react-api/types';
-import { CalculateBalanceProps } from '../../types';
-
-import BN from 'bn.js';
-import React from 'react';
-import { Available, Button, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/react-components';
-import { calcTxLength } from '@polkadot/react-signer/Checks';
-import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-import { withCalls, withApi, withMulti } from '@polkadot/react-api';
-import { ZERO_BALANCE, ZERO_FEES } from '@polkadot/react-signer/Checks/constants';
-import { bnMax } from '@polkadot/util';
-
-import translate from '../../translate';
-import detectUnsafe from '../../unsafeChains';
-import ValidateAmount from './InputValidateAmount';
-
-interface Props extends I18nProps, ApiProps, CalculateBalanceProps {
-  controllerId: string;
-  isOpen: boolean;
-  onClose: () => void;
-  stashId: string;
-}
-
-interface State {
-  amountError: string | null;
-  extrinsic: SubmittableExtrinsic | null;
-  maxAdditional?: BN;
-  maxBalance?: BN;
-}
-
-const ZERO = new BN(0);
-
-class BondExtra extends TxComponent<Props, State> {
-  public state: State = {
-    amountError: null,
-    extrinsic: null
-  };
-
-  public componentDidUpdate (prevProps: Props, prevState: State): void {
-    const { balances_fees } = this.props;
-    const { extrinsic } = this.state;
-
-    const hasLengthChanged = ((extrinsic && extrinsic.encodedLength) || 0) !== ((prevState.extrinsic && prevState.extrinsic.encodedLength) || 0);
-
-    if ((balances_fees !== prevProps.balances_fees) ||
-      hasLengthChanged
-    ) {
-      this.setMaxBalance();
-    }
-  }
-
-  public render (): React.ReactNode {
-    const { isOpen, onClose, stashId, t } = this.props;
-    const { extrinsic, maxAdditional } = this.state;
-    const canSubmit = !!maxAdditional && maxAdditional.gtn(0);
-
-    if (!isOpen) {
-      return null;
-    }
-
-    return (
-      <Modal
-        className='staking--BondExtra'
-        dimmer='inverted'
-        open
-        size='small'
-      >
-        {this.renderContent()}
-        <Modal.Actions>
-          <Button.Group>
-            <Button
-              isNegative
-              onClick={onClose}
-              label={t('Cancel')}
-              icon='cancel'
-            />
-            <Button.Or />
-            <TxButton
-              accountId={stashId}
-              isDisabled={!canSubmit}
-              isPrimary
-              label={t('Bond more')}
-              icon='sign-in'
-              onClick={onClose}
-              extrinsic={extrinsic}
-              ref={this.button}
-            />
-          </Button.Group>
-        </Modal.Actions>
-      </Modal>
-    );
-  }
-
-  private renderContent (): React.ReactNode {
-    const { stashId, systemChain, t } = this.props;
-    const { amountError, maxAdditional, maxBalance } = this.state;
-    const transferrable = <span className='label'>{t('transferrable ')}</span>;
-    const isUnsafeChain = detectUnsafe(systemChain);
-
-    return (
-      <>
-        <Modal.Header>
-          {t('Bond more funds')}
-        </Modal.Header>
-        <Modal.Content className='ui--signer-Signer-Content'>
-          <InputAddress
-            className='medium'
-            defaultValue={stashId}
-            isDisabled
-            label={t('stash account')}
-            labelExtra={<Available label={transferrable} params={stashId} />}
-          />
-          <InputBalance
-            autoFocus
-            className='medium'
-            help={t('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')}
-            maxValue={maxBalance}
-            onChange={this.onChangeValue}
-            onEnter={this.sendTx}
-            withMax={!isUnsafeChain}
-          />
-          <ValidateAmount
-            accountId={stashId}
-            onError={this.setAmountError}
-            value={maxAdditional}
-          />
-        </Modal.Content>
-      </>
-    );
-  }
-
-  private nextState (newState: Partial<State>): void {
-    this.setState((prevState: State): State => {
-      const { api } = this.props;
-      const { amountError = prevState.amountError, maxAdditional = prevState.maxAdditional, maxBalance = prevState.maxBalance } = newState;
-      const extrinsic = (maxAdditional && maxAdditional.gte(ZERO))
-        ? api.tx.staking.bondExtra(maxAdditional)
-        : null;
-
-      return {
-        amountError,
-        extrinsic,
-        maxAdditional,
-        maxBalance
-      };
-    });
-  }
-
-  private setMaxBalance = (): void => {
-    const { api, balances_fees = ZERO_FEES, balances_all = ZERO_BALANCE } = this.props;
-    const { maxAdditional } = this.state;
-
-    const { transactionBaseFee, transactionByteFee } = balances_fees;
-    const { accountNonce, freeBalance } = balances_all;
-
-    let prevMax = new BN(0);
-    let maxBalance = new BN(1);
-    let extrinsic;
-
-    while (!prevMax.eq(maxBalance)) {
-      prevMax = maxBalance;
-      extrinsic = (maxAdditional && maxAdditional.gte(ZERO))
-        ? api.tx.staking.bondExtra(maxAdditional)
-        : null;
-
-      const txLength = calcTxLength(extrinsic, accountNonce);
-      const fees = transactionBaseFee.add(transactionByteFee.mul(txLength));
-
-      maxBalance = bnMax(freeBalance.sub(fees), ZERO);
-    }
-
-    this.nextState({
-      extrinsic,
-      maxAdditional,
-      maxBalance
-    });
-  }
-
-  private onChangeValue = (maxAdditional?: BN): void => {
-    this.nextState({ maxAdditional });
-  }
-
-  private setAmountError = (amountError: string | null): void => {
-    this.setState({ amountError });
-  }
-}
-
-export default withMulti(
-  BondExtra,
-  translate,
-  withApi,
-  withCalls<Props>(
-    'derive.balances.fees'
-  )
-);
diff --git a/pioneer/packages/old-apps/app-staking/src/Actions/Account/InjectKeys.tsx b/pioneer/packages/old-apps/app-staking/src/Actions/Account/InjectKeys.tsx
deleted file mode 100644
index fde36a3ae8..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/Actions/Account/InjectKeys.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { KeypairType } from '@polkadot/util-crypto/types';
-
-import React, { useContext, useEffect, useState } from 'react';
-import { Button, Dropdown, Icon, Input, Modal, StatusContext } from '@polkadot/react-components';
-import keyring from '@polkadot/ui-keyring';
-import { assert, u8aToHex } from '@polkadot/util';
-import { keyExtractSuri, mnemonicValidate } from '@polkadot/util-crypto';
-
-import translate from '../../translate';
-
-interface Props extends I18nProps {
-  isOpen?: boolean;
-  onClose: () => void;
-}
-
-const CRYPTO_MAP: Record<string, KeypairType[]> = {
-  aura: ['ed25519', 'sr25519'],
-  babe: ['sr25519'],
-  gran: ['ed25519'],
-  imon: ['ed25519', 'sr25519'],
-  para: ['sr25519']
-};
-
-const EMPTY_KEY = '0x';
-
-function InjectKeys ({ isOpen = true, onClose, t }: Props): React.ReactElement<Props> | null {
-  const { queueRpc } = useContext(StatusContext);
-  // this needs to align with what is set as the first value in `type`
-  const [crypto, setCrypto] = useState<KeypairType>('sr25519');
-  const [publicKey, setPublicKey] = useState(EMPTY_KEY);
-  const [suri, setSuri] = useState('');
-  const [type, setType] = useState('babe');
-
-  useEffect((): void => {
-    setCrypto(CRYPTO_MAP[type][0]);
-  }, [type]);
-
-  useEffect((): void => {
-    try {
-      const { phrase } = keyExtractSuri(suri);
-
-      assert(mnemonicValidate(phrase), 'Invalid mnemonic phrase');
-
-      setPublicKey(u8aToHex(keyring.createFromUri(suri, {}, crypto).publicKey));
-    } catch (error) {
-      setPublicKey(EMPTY_KEY);
-    }
-  }, [crypto, suri]);
-
-  if (!isOpen) {
-    return null;
-  }
-
-  const _onSubmit = (): void => {
-    queueRpc({
-      rpc: { section: 'author', method: 'insertKey' } as any,
-      values: [type, suri, publicKey]
-    });
-  };
-  const _cryptoOptions = CRYPTO_MAP[type].map((value): { text: string; value: KeypairType } => ({
-    text: value === 'ed25519'
-      ? t('ed25519, Edwards')
-      : t('sr15519, Schnorrkel'),
-    value
-  }));
-
-  return (
-    <Modal
-      dimmer='inverted'
-      open
-      size='small'
-    >
-      <Modal.Header>
-        {t('Inject Keys')}
-      </Modal.Header>
-      <Modal.Content>
-        <Input
-          isError={publicKey.length !== 66}
-          label={t('suri (seed & derivation)')}
-          onChange={setSuri}
-          value={suri}
-        />
-        <Dropdown
-          label={t('key type to set')}
-          onChange={setType}
-          options={[
-            { 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' }
-          ]}
-          value={type}
-        />
-        <Dropdown
-          isDisabled={_cryptoOptions.length === 1}
-          label={t('crypto type to use')}
-          onChange={setCrypto}
-          options={_cryptoOptions}
-          value={crypto}
-        />
-        <Input
-          isDisabled
-          label={t('generated public key')}
-          value={publicKey}
-        />
-        <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>
-        </article>
-      </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
-          <Button.Or />
-          <Button
-            icon='sign-in'
-            isPrimary
-            label={t('Submit key')}
-            onClick={_onSubmit}
-          />
-        </Button.Group>
-      </Modal.Actions>
-    </Modal>
-  );
-}
-
-export default translate(InjectKeys);
diff --git a/pioneer/packages/old-apps/app-staking/src/Actions/Account/InputValidateAmount.tsx b/pioneer/packages/old-apps/app-staking/src/Actions/Account/InputValidateAmount.tsx
deleted file mode 100644
index 595151cc47..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/Actions/Account/InputValidateAmount.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { DerivedBalances } from '@polkadot/api-derive/types';
-import { ApiProps } from '@polkadot/react-api/types';
-import { I18nProps } from '@polkadot/react-components/types';
-
-import BN from 'bn.js';
-import React, { useEffect, useState } from 'react';
-import { Icon } from '@polkadot/react-components';
-import { withCalls } from '@polkadot/react-api';
-
-import translate from '../../translate';
-
-interface Props extends ApiProps, I18nProps {
-  allBalances?: DerivedBalances;
-  accountId: string | null;
-  onError: (error: string | null) => void;
-  value?: BN | null;
-}
-
-function ValidateAmount ({ allBalances, onError, value, t }: Props): React.ReactElement<Props> | null {
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect((): void => {
-    // don't show an error if the selected controller is the default
-    // this applies when changing controller
-    if (allBalances && value) {
-      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.');
-      }
-
-      if (error !== newError) {
-        onError(newError);
-        setError(newError);
-      }
-    }
-  }, [allBalances, value]);
-
-  if (!error) {
-    return null;
-  }
-
-  return (
-    <article className='warning'>
-      <div><Icon name='warning sign' />{error}</div>
-    </article>
-  );
-}
-
-export default translate(
-  withCalls<Props>(
-    ['derive.balances.all', {
-      paramName: 'accountId',
-      propName: 'allBalances'
-    }]
-  )(ValidateAmount)
-);
diff --git a/pioneer/packages/old-apps/app-staking/src/Actions/Account/InputValidationController.tsx b/pioneer/packages/old-apps/app-staking/src/Actions/Account/InputValidationController.tsx
deleted file mode 100644
index 4b5b5450f6..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/Actions/Account/InputValidationController.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ApiProps } from '@polkadot/react-api/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { AccountId, StakingLedger } from '@polkadot/types/interfaces';
-
-import React, { useEffect, useState } from 'react';
-import { Icon } from '@polkadot/react-components';
-import { Option } from '@polkadot/types';
-import { withCalls } from '@polkadot/react-api';
-
-import translate from '../../translate';
-
-interface Props extends ApiProps, I18nProps {
-  accountId: string | null;
-  bondedId?: string | null;
-  controllerId: string | null;
-  defaultController?: string;
-  isUnsafeChain?: boolean;
-  onError: (error: string | null) => void;
-  stashId?: string | null;
-}
-
-const DISTINCT = 'Distinct stash and controller accounts are recommended to ensure fund security.';
-
-function ValidateController ({ accountId, bondedId, controllerId, defaultController, isUnsafeChain, onError, stashId, t }: Props): React.ReactElement<Props> | null {
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect((): void => {
-    // don't show an error if the selected controller is the default
-    // this applies when changing controller
-    if (defaultController !== controllerId) {
-      let newError: string | null = null;
-
-      if (controllerId === accountId) {
-        newError = isUnsafeChain
-          ? t(`${DISTINCT} 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.`)
-          : t(DISTINCT);
-      } else if (bondedId) {
-        newError = t('A controller account should not map to another stash. This selected controller is a stash, controlled by {{bondedId}}', { replace: { bondedId } });
-      } else if (stashId) {
-        newError = t('A controller account should not be set to manages multiple stashes. The selected controller is already controlling {{stashId}}', { replace: { stashId } });
-      }
-
-      if (error !== newError) {
-        onError(newError);
-        setError(newError);
-      }
-    }
-  }, [accountId, bondedId, controllerId, defaultController, stashId]);
-
-  if (!error || !accountId) {
-    return null;
-  }
-
-  return (
-    <article className='warning'>
-      <div><Icon name='warning sign' />{error}</div>
-    </article>
-  );
-}
-
-export default translate(
-  withCalls<Props>(
-    ['query.staking.bonded', {
-      paramName: 'controllerId',
-      propName: 'bondedId',
-      transform: (value: Option<AccountId>): string | null => {
-        const extracted = value.unwrapOr(null);
-
-        return extracted
-          ? extracted.toString()
-          : null;
-      }
-    }],
-    ['query.staking.ledger', {
-      paramName: 'controllerId',
-      propName: 'stashId',
-      transform: (value: Option<StakingLedger>): string | null => {
-        const extracted = value.unwrapOr({ stash: null }).stash;
-
-        return extracted
-          ? extracted.toString()
-          : null;
-      }
-
-    }]
-  )(ValidateController)
-);
diff --git a/pioneer/packages/old-apps/app-staking/src/Actions/Account/InputValidationSessionKey.tsx b/pioneer/packages/old-apps/app-staking/src/Actions/Account/InputValidationSessionKey.tsx
deleted file mode 100644
index 8708f666cc..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/Actions/Account/InputValidationSessionKey.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React, { useEffect, useState } from 'react';
-import { Icon } from '@polkadot/react-components';
-
-import translate from '../../translate';
-
-interface Props extends I18nProps {
-  controllerId: string;
-  onError: (error: string | null) => void;
-  sessionId: string | null;
-  stashId: string;
-}
-
-function ValidateSessionEd25519 ({ onError, sessionId, stashId, t }: Props): React.ReactElement<Props> | null {
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect((): void => {
-    let newError = null;
-
-    if (sessionId === stashId) {
-      newError = t('For fund security, your session key should not match your stash key.');
-    }
-
-    if (error !== newError) {
-      onError(newError);
-      setError(newError);
-    }
-  }, [sessionId, stashId]);
-
-  if (!error) {
-    return null;
-  }
-
-  return (
-    <article className='warning'>
-      <div><Icon name='warning sign' />{error}</div>
-    </article>
-  );
-}
-
-export default translate(ValidateSessionEd25519);
diff --git a/pioneer/packages/old-apps/app-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx b/pioneer/packages/old-apps/app-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx
deleted file mode 100644
index 42e381035b..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-
-import BN from 'bn.js';
-import React, { useEffect, useState } from 'react';
-import { Icon } from '@polkadot/react-components';
-
-import translate from '../../translate';
-
-interface Props extends I18nProps {
-  unstakeThreshold: BN | undefined;
-  onError: (error: string | null) => void;
-}
-
-function InputValidationUnstakeThreshold ({ onError, t, unstakeThreshold }: Props): React.ReactElement<Props> | null {
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect((): void => {
-    if (unstakeThreshold) {
-      let newError = null;
-
-      if (unstakeThreshold.ltn(0)) {
-        newError = t('The Threshold must be a positive number');
-      } else if (unstakeThreshold.gtn(10)) {
-        newError = t('The Threshold must lower than 11');
-      }
-
-      if (newError !== error) {
-        onError(newError);
-        setError(newError);
-      }
-    }
-  }, [unstakeThreshold]);
-
-  if (!error) {
-    return null;
-  }
-
-  return (
-    <article className='warning'>
-      <div><Icon name='warning sign' />{error}</div>
-    </article>
-  );
-}
-
-export default translate(InputValidationUnstakeThreshold);
diff --git a/pioneer/packages/old-apps/app-staking/src/Actions/Account/Nominate.tsx b/pioneer/packages/old-apps/app-staking/src/Actions/Account/Nominate.tsx
deleted file mode 100644
index fdbc81790a..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/Actions/Account/Nominate.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { KeyringSectionOption } from '@polkadot/ui-keyring/options/types';
-
-import React, { useState } from 'react';
-import { Button, InputAddress, Modal, TxButton } from '@polkadot/react-components';
-
-import translate from '../../translate';
-
-interface Props extends I18nProps {
-  controllerId: string;
-  isOpen: boolean;
-  nominees?: string[];
-  onClose: () => void;
-  stashId: string;
-  stashOptions: KeyringSectionOption[];
-}
-
-// We only allow a maximum of 16 nominees, negative to slice
-const MAX_NOMINEES = -16;
-
-function Nominate ({ controllerId, isOpen, onClose, stashId, stashOptions, t }: Props): React.ReactElement<Props> | null {
-  const [nominees, setNominees] = useState<string[]>([]);
-
-  if (!isOpen) {
-    return null;
-  }
-
-  const _onChangeNominees = (_nominees: string[]): void => {
-    const newNominees = _nominees.slice(MAX_NOMINEES);
-
-    if (JSON.stringify(newNominees) !== JSON.stringify(nominees)) {
-      setNominees(newNominees);
-    }
-  };
-
-  return (
-    <Modal
-      className='staking--Nominating'
-      dimmer='inverted'
-      open
-      size='small'
-    >
-      <Modal.Header>
-        {t('Nominate Validators')}
-      </Modal.Header>
-      <Modal.Content className='ui--signer-Signer-Content'>
-        <InputAddress
-          className='medium'
-          defaultValue={controllerId}
-          isDisabled
-          label={t('controller account')}
-        />
-        <InputAddress
-          className='medium'
-          defaultValue={stashId}
-          isDisabled
-          label={t('stash account')}
-        />
-        <InputAddress
-          className='medium'
-          help={t('Stash accounts that are to be nominated. Block rewards are split between validators and nominators. Only 16 nominees will be taken into account.')}
-          isInput={false}
-          isMultiple
-          label={t('nominate the following addresses')}
-          onChangeMulti={_onChangeNominees}
-          options={stashOptions}
-          placeholder={t('select accounts(s) nominate')}
-          type='account'
-          value={nominees}
-        />
-      </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            isNegative
-            onClick={onClose}
-            label={t('Cancel')}
-            icon='cancel'
-          />
-          <Button.Or />
-          <TxButton
-            accountId={controllerId}
-            isDisabled={nominees.length === 0}
-            isPrimary
-            onClick={onClose}
-            params={[nominees]}
-            label={t('Nominate')}
-            icon='hand paper outline'
-            tx='staking.nominate'
-          />
-        </Button.Group>
-      </Modal.Actions>
-    </Modal>
-  );
-}
-
-export default translate(Nominate);
diff --git a/pioneer/packages/old-apps/app-staking/src/Actions/Account/SetControllerAccount.tsx b/pioneer/packages/old-apps/app-staking/src/Actions/Account/SetControllerAccount.tsx
deleted file mode 100644
index c019b6dfc5..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/Actions/Account/SetControllerAccount.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ApiProps } from '@polkadot/react-api/types';
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import { Button, Icon, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
-import { withApi, withMulti } from '@polkadot/react-api';
-
-import translate from '../../translate';
-import detectUnsafe from '../../unsafeChains';
-import InputValidationController from '../Account/InputValidationController';
-
-interface Props extends ApiProps, I18nProps {
-  defaultControllerId: string;
-  isValidating?: boolean;
-  onClose: () => void;
-  stashId: string;
-}
-
-interface State {
-  controllerError: string | null;
-  controllerId: string | null;
-}
-
-class SetControllerAccount extends TxComponent<Props, State> {
-  constructor (props: Props) {
-    super(props);
-
-    this.state = {
-      controllerError: null,
-      controllerId: null
-    };
-  }
-
-  public render (): React.ReactNode {
-    const { defaultControllerId, isValidating, onClose, stashId, systemChain, t } = this.props;
-    const { controllerError, controllerId } = this.state;
-    const isUnsafeChain = detectUnsafe(systemChain);
-    const canSubmit = isUnsafeChain || (!controllerError && !!controllerId && (defaultControllerId !== controllerId));
-
-    return (
-      <Modal
-        className='staking--SetControllerAccount'
-        dimmer='inverted'
-        open
-        size='small'
-      >
-        <Modal.Header>
-          {t('Change controller account')}
-        </Modal.Header>
-        <Modal.Content className='ui--signer-Signer-Content'>
-          {isValidating && (
-            <article className='warning'>
-              <div className='warning'>
-                <Icon name='warning sign' />
-                {t('Warning - Changing the controller while validating will modify the associated session account. It is advised to stop validating before changing the controller account.')}
-              </div>
-            </article>
-          )}
-          <InputAddress
-            className='medium'
-            isDisabled
-            label={t('stash account')}
-            value={stashId}
-          />
-          <InputAddress
-            className='medium'
-            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.')}
-            isError={!isUnsafeChain && !!controllerError}
-            label={t('controller account')}
-            onChange={this.onChangeController}
-            type='account'
-            value={controllerId}
-          />
-          <InputValidationController
-            accountId={stashId}
-            defaultController={defaultControllerId}
-            controllerId={controllerId}
-            isUnsafeChain={isUnsafeChain}
-            onError={this.onControllerError}
-          />
-        </Modal.Content>
-        <Modal.Actions>
-          <Button.Group>
-            <Button
-              isNegative
-              onClick={onClose}
-              label={t('Cancel')}
-              icon='cancel'
-            />
-            <Button.Or />
-            <TxButton
-              accountId={stashId}
-              isDisabled={!canSubmit}
-              isPrimary
-              label={t('Set controller')}
-              icon='sign-in'
-              onClick={onClose}
-              params={[controllerId]}
-              tx='staking.setController'
-              ref={this.button}
-            />
-          </Button.Group>
-        </Modal.Actions>
-      </Modal>
-    );
-  }
-
-  private onChangeController = (controllerId: string | null): void => {
-    this.setState({ controllerId });
-  }
-
-  private onControllerError = (controllerError: string | null): void => {
-    this.setState({ controllerError });
-  }
-}
-
-export default withMulti(
-  SetControllerAccount,
-  translate,
-  withApi
-);
diff --git a/pioneer/packages/old-apps/app-staking/src/Actions/Account/SetRewardDestination.tsx b/pioneer/packages/old-apps/app-staking/src/Actions/Account/SetRewardDestination.tsx
deleted file mode 100644
index 1a63d84ce7..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/Actions/Account/SetRewardDestination.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import { Button, Dropdown, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
-import { withMulti } from '@polkadot/react-api';
-
-import translate from '../../translate';
-import { rewardDestinationOptions } from '../constants';
-
-interface Props extends I18nProps {
-  defaultDestination?: number;
-  controllerId: string;
-  onClose: () => void;
-}
-
-interface State {
-  destination: number;
-}
-
-class SetRewardDestination extends TxComponent<Props, State> {
-  constructor (props: Props) {
-    super(props);
-
-    this.state = {
-      destination: 0
-    };
-  }
-
-  public render (): React.ReactNode {
-    const { controllerId, onClose, t } = this.props;
-    const { destination } = this.state;
-    const canSubmit = !!controllerId;
-
-    return (
-      <Modal
-        className='staking--Bonding'
-        dimmer='inverted'
-        open
-        size='small'
-      >
-        {this.renderContent()}
-        <Modal.Actions>
-          <Button.Group>
-            <Button
-              isNegative
-              onClick={onClose}
-              label={t('Cancel')}
-              icon='cancel'
-            />
-            <Button.Or />
-            <TxButton
-              accountId={controllerId}
-              isDisabled={!canSubmit}
-              isPrimary
-              label={t('Set reward destination')}
-              icon='sign-in'
-              onClick={onClose}
-              params={[destination]}
-              tx={'staking.setPayee'}
-              ref={this.button}
-            />
-          </Button.Group>
-        </Modal.Actions>
-      </Modal>
-    );
-  }
-
-  private renderContent (): React.ReactNode {
-    const { controllerId, defaultDestination, t } = this.props;
-    const { destination } = this.state;
-
-    return (
-      <>
-        <Modal.Header>
-          {t('Bonding Preferences')}
-        </Modal.Header>
-        <Modal.Content className='ui--signer-Signer-Content'>
-          <InputAddress
-            className='medium'
-            isDisabled
-            defaultValue={controllerId}
-            help={t('The controller is the account that is be used to control any nominating or validating actions. I will sign this transaction.')}
-            label={t('controller account')}
-          />
-          <Dropdown
-            className='medium'
-            defaultValue={defaultDestination}
-            help={t('The destination account for any payments as either a nominator or validator')}
-            label={t('payment destination')}
-            onChange={this.onChangeDestination}
-            options={rewardDestinationOptions}
-            value={destination}
-          />
-        </Modal.Content>
-      </>
-    );
-  }
-
-  private onChangeDestination = (destination: number): void => {
-    this.setState({ destination });
-  }
-}
-
-export default withMulti(
-  SetRewardDestination,
-  translate
-);
diff --git a/pioneer/packages/old-apps/app-staking/src/Actions/Account/SetSessionKey.tsx b/pioneer/packages/old-apps/app-staking/src/Actions/Account/SetSessionKey.tsx
deleted file mode 100644
index 365be7bb9e..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/Actions/Account/SetSessionKey.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React, { useContext, useState } from 'react';
-import { Button, InputAddress, Input, Modal, TxButton } from '@polkadot/react-components';
-import { ApiContext } from '@polkadot/react-api';
-
-import ValidationSessionKey from './InputValidationSessionKey';
-import translate from '../../translate';
-
-interface Props extends I18nProps {
-  controllerId: string;
-  isOpen: boolean;
-  onClose: () => void;
-  sessionIds: string[];
-  stashId: string;
-}
-
-const EMPTY_PROOF = new Uint8Array();
-
-function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId, t }: Props): React.ReactElement<Props> | null {
-  const { isSubstrateV2 } = useContext(ApiContext);
-  const [keysError, setKeysError] = useState<string | null>(null);
-  const [keys, setKeys] = useState<string | null>(
-    isSubstrateV2
-      ? null
-      : sessionIds[0] || controllerId
-  );
-
-  if (!isOpen) {
-    return null;
-  }
-
-  const hasError = isSubstrateV2
-    ? !keys
-    : (!keys || !!keysError);
-
-  return (
-    <Modal
-      className='staking--SetSessionAccount'
-      dimmer='inverted'
-      open
-      size='small'
-    >
-      <Modal.Header>
-        {t('Set Session Key')}
-      </Modal.Header>
-      <Modal.Content className='ui--signer-Signer-Content'>
-        <InputAddress
-          className='medium'
-          defaultValue={controllerId}
-          isDisabled
-          label={t('controller account')}
-        />
-        {isSubstrateV2
-          ? (
-            <Input
-              className='medium'
-              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')}
-              isError={!keys}
-              label={t('Keys from rotateKeys')}
-              onChange={setKeys}
-            />
-          )
-          : (
-            <>
-              <InputAddress
-                className='medium'
-                help={t('Changing the key only takes effect at the start of the next session. If validating, it must be an ed25519 key.')}
-                isError={!!keysError}
-                label={t('Session key (ed25519)')}
-                onChange={setKeys}
-                value={keys}
-              />
-              <ValidationSessionKey
-                controllerId={controllerId}
-                onError={setKeysError}
-                sessionId={keys}
-                stashId={stashId}
-              />
-            </>
-          )
-        }
-      </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            isNegative
-            onClick={onClose}
-            label={t('Cancel')}
-            icon='cancel'
-          />
-          <Button.Or />
-          <TxButton
-            accountId={controllerId}
-            isDisabled={hasError}
-            isPrimary
-            label={t('Set Session Key')}
-            icon='sign-in'
-            onClick={onClose}
-            params={
-              isSubstrateV2
-                ? [keys, EMPTY_PROOF]
-                : [keys]
-            }
-            tx={
-              isSubstrateV2
-                ? 'session.setKeys'
-                : 'session.setKey'
-            }
-          />
-        </Button.Group>
-      </Modal.Actions>
-    </Modal>
-  );
-}
-
-export default translate(SetSessionKey);
diff --git a/pioneer/packages/old-apps/app-staking/src/Actions/Account/Unbond.tsx b/pioneer/packages/old-apps/app-staking/src/Actions/Account/Unbond.tsx
deleted file mode 100644
index d832b3172e..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/Actions/Account/Unbond.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/ui-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { AccountId, StakingLedger } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
-import { ApiProps } from '@polkadot/react-api/types';
-
-import BN from 'bn.js';
-import React from 'react';
-import styled from 'styled-components';
-import { Option } from '@polkadot/types';
-import { AddressInfo, Button, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/react-components';
-import { withCalls, withApi, withMulti } from '@polkadot/react-api';
-
-import translate from '../../translate';
-
-interface Props extends I18nProps, ApiProps {
-  controllerId?: AccountId | null;
-  isOpen: boolean;
-  onClose: () => void;
-  stashId: string;
-  staking_ledger?: Option<StakingLedger>;
-}
-
-interface State {
-  maxBalance?: BN;
-  maxUnbond?: BN;
-}
-
-const BalanceWrapper = styled.div`
-  & > div {
-    justify-content: flex-end;
-
-    & .column {
-      flex: 0;
-    }
-  }
-`;
-
-class Unbond extends TxComponent<Props, State> {
-  public state: State = {};
-
-  public componentDidUpdate (prevProps: Props): void {
-    const { staking_ledger } = this.props;
-
-    if (staking_ledger !== prevProps.staking_ledger) {
-      this.setMaxBalance();
-    }
-  }
-
-  public render (): React.ReactNode {
-    const { controllerId, isOpen, onClose, t } = this.props;
-    const { maxUnbond } = this.state;
-    const canSubmit = !!maxUnbond && maxUnbond.gtn(0);
-
-    if (!isOpen) {
-      return null;
-    }
-
-    return (
-      <Modal
-        className='staking--Unbond'
-        dimmer='inverted'
-        open
-        size='small'
-      >
-        {this.renderContent()}
-        <Modal.Actions>
-          <Button.Group>
-            <Button
-              isNegative
-              onClick={onClose}
-              label={t('Cancel')}
-              icon='cancel'
-            />
-            <Button.Or />
-            <TxButton
-              accountId={controllerId}
-              isDisabled={!canSubmit}
-              isPrimary
-              label={t('Unbond')}
-              icon='sign-out'
-              onClick={onClose}
-              params={[maxUnbond]}
-              tx='staking.unbond'
-              ref={this.button}
-            />
-          </Button.Group>
-        </Modal.Actions>
-      </Modal>
-    );
-  }
-
-  private renderContent (): React.ReactNode {
-    const { controllerId, stashId, t } = this.props;
-    const { maxBalance } = this.state;
-
-    return (
-      <>
-        <Modal.Header>
-          {t('Unbond funds')}
-        </Modal.Header>
-        <Modal.Content className='ui--signer-Signer-Content'>
-          <InputAddress
-            className='medium'
-            defaultValue={controllerId}
-            isDisabled
-            label={t('controller account')}
-          />
-          <BalanceWrapper>
-            <AddressInfo
-              accountId={stashId}
-              withBalance={{
-                bonded: true
-              }}
-            />
-          </BalanceWrapper>
-          <InputBalance
-            autoFocus
-            className='medium'
-            help={t('The amount of funds to unbond, this is adjusted using the bonded funds on the stash account.')}
-            label={t('unbond amount')}
-            maxValue={maxBalance}
-            onChange={this.onChangeValue}
-            onEnter={this.sendTx}
-            withMax
-          />
-        </Modal.Content>
-      </>
-    );
-  }
-
-  private nextState (newState: Partial<State>): void {
-    this.setState((prevState: State): State => {
-      const { maxUnbond = prevState.maxUnbond, maxBalance = prevState.maxBalance } = newState;
-
-      return {
-        maxUnbond,
-        maxBalance
-      };
-    });
-  }
-
-  private setMaxBalance = (): void => {
-    const { staking_ledger } = this.props;
-
-    if (!staking_ledger || staking_ledger.isNone) {
-      return;
-    }
-
-    const { active } = staking_ledger.unwrap();
-
-    this.nextState({
-      maxBalance: active.unwrap()
-    });
-  }
-
-  private onChangeValue = (maxUnbond?: BN): void => {
-    this.nextState({ maxUnbond });
-  }
-}
-
-export default withMulti(
-  Unbond,
-  translate,
-  withApi,
-  withCalls<Props>(
-    ['query.staking.ledger', { paramName: 'controllerId' }]
-  )
-);
diff --git a/pioneer/packages/old-apps/app-staking/src/Actions/Account/Validate.tsx b/pioneer/packages/old-apps/app-staking/src/Actions/Account/Validate.tsx
deleted file mode 100644
index 8464975ae7..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/Actions/Account/Validate.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ValidatorPrefs, ValidatorPrefs0to145 } from '@polkadot/types/interfaces';
-import { ApiProps } from '@polkadot/react-api/types';
-import { I18nProps } from '@polkadot/react-components/types';
-
-import BN from 'bn.js';
-import React from 'react';
-import { withApi, withMulti } from '@polkadot/react-api';
-import { Button, InputAddress, InputBalance, InputNumber, Modal, TxButton, TxComponent } from '@polkadot/react-components';
-
-import InputValidationUnstakeThreshold from './InputValidationUnstakeThreshold';
-import translate from '../../translate';
-
-interface Props extends ApiProps, I18nProps {
-  controllerId: string;
-  isOpen: boolean;
-  onClose: () => void;
-  stashId: string;
-  validatorPrefs?: ValidatorPrefs | ValidatorPrefs0to145;
-}
-
-interface State {
-  unstakeThreshold?: BN;
-  unstakeThresholdError: string | null;
-  validatorPayment?: BN;
-}
-
-class Validate extends TxComponent<Props, State> {
-  public state: State = {
-    unstakeThreshold: new BN(3),
-    unstakeThresholdError: null,
-    validatorPayment: new BN(0)
-  };
-
-  // inject the preferences returned via RPC once into the state (from this
-  // point forward it will be entirely managed by the actual inputs)
-  public static getDerivedStateFromProps ({ isSubstrateV2, validatorPrefs }: Props, state: State): Pick<State, never> | null {
-    if (state.unstakeThreshold && state.validatorPayment) {
-      return null;
-    }
-
-    if (validatorPrefs) {
-      // 1.x, it has both values
-      if (isSubstrateV2) {
-        const { validatorPayment } = validatorPrefs as ValidatorPrefs;
-
-        return {
-          validatorPayment: validatorPayment.toBn()
-        };
-      } else {
-        const { unstakeThreshold, validatorPayment } = validatorPrefs as ValidatorPrefs0to145;
-
-        return {
-          unstakeThreshold: unstakeThreshold.toBn(),
-          unstakeThresholdError: null,
-          validatorPayment: validatorPayment.toBn()
-        };
-      }
-    }
-
-    return null;
-  }
-
-  public render (): React.ReactNode {
-    const { isOpen } = this.props;
-
-    if (!isOpen) {
-      return null;
-    }
-
-    return (
-      <Modal
-        className='staking--Staking'
-        dimmer='inverted'
-        open
-        size='small'
-      >
-        {this.renderContent()}
-        {this.renderButtons()}
-      </Modal>
-    );
-  }
-
-  private renderButtons (): React.ReactNode {
-    const { controllerId, isSubstrateV2, onClose, t } = this.props;
-    const { unstakeThreshold, unstakeThresholdError, validatorPayment } = this.state;
-
-    return (
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            isNegative
-            label={t('Cancel')}
-            icon='cancel'
-            onClick={onClose}
-          />
-          <Button.Or />
-          <TxButton
-            accountId={controllerId}
-            isDisabled={!!unstakeThresholdError}
-            isPrimary
-            label={t('Validate')}
-            icon='check circle outline'
-            onClick={onClose}
-            params={[
-              isSubstrateV2
-                ? { validatorPayment }
-                : { unstakeThreshold, validatorPayment }
-            ]}
-            tx='staking.validate'
-            ref={this.button}
-          />
-        </Button.Group>
-      </Modal.Actions>
-    );
-  }
-
-  private renderContent (): React.ReactNode {
-    const { controllerId, isSubstrateV2, stashId, t, validatorPrefs } = this.props;
-    const { unstakeThreshold, unstakeThresholdError, validatorPayment } = this.state;
-    const defaultThreshold = validatorPrefs && (validatorPrefs as ValidatorPrefs0to145).unstakeThreshold && (validatorPrefs as ValidatorPrefs0to145).unstakeThreshold.toBn();
-
-    return (
-      <>
-        <Modal.Header>
-          {t('Set validator preferences')}
-        </Modal.Header>
-        <Modal.Content className='ui--signer-Signer-Content'>
-          <InputAddress
-            className='medium'
-            defaultValue={stashId.toString()}
-            isDisabled
-            label={t('stash account')}
-          />
-          <InputAddress
-            className='medium'
-            defaultValue={controllerId}
-            isDisabled
-            label={t('controller account')}
-          />
-          {!isSubstrateV2 && (
-            <>
-              <InputNumber
-                autoFocus
-                bitLength={32}
-                className='medium'
-                defaultValue={defaultThreshold}
-                help={t('The number of time this validator can get slashed before being automatically unstaked (maximum of 10 allowed)')}
-                isError={!!unstakeThresholdError}
-                label={t('automatic unstake threshold')}
-                onChange={this.onChangeThreshold}
-                onEnter={this.sendTx}
-                value={
-                  unstakeThreshold
-                    ? unstakeThreshold.toString()
-                    : '3'
-                }
-              />
-              <InputValidationUnstakeThreshold
-                onError={this.onUnstakeThresholdError}
-                unstakeThreshold={unstakeThreshold}
-              />
-            </>
-          )}
-          <InputBalance
-            className='medium'
-            defaultValue={validatorPrefs && validatorPrefs.validatorPayment && validatorPrefs.validatorPayment.toBn()}
-            help={t('Amount taken up-front from the reward by the validator before splitting the remainder between themselves and the nominators')}
-            label={t('reward commission')}
-            onChange={this.onChangePayment}
-            onEnter={this.sendTx}
-            value={
-              validatorPayment
-                ? validatorPayment.toString()
-                : '0'
-            }
-          />
-        </Modal.Content>
-      </>
-    );
-  }
-
-  private onChangePayment = (validatorPayment?: BN): void => {
-    if (validatorPayment) {
-      this.setState({ validatorPayment });
-    }
-  }
-
-  private onChangeThreshold = (unstakeThreshold?: BN): void => {
-    if (unstakeThreshold) {
-      this.setState({ unstakeThreshold });
-    }
-  }
-
-  private onUnstakeThresholdError = (unstakeThresholdError: string | null): void => {
-    this.setState({ unstakeThresholdError });
-  }
-}
-
-export default withMulti(
-  Validate,
-  translate,
-  withApi
-);
diff --git a/pioneer/packages/old-apps/app-staking/src/Actions/Account/index.tsx b/pioneer/packages/old-apps/app-staking/src/Actions/Account/index.tsx
deleted file mode 100644
index e1bb4083fa..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/Actions/Account/index.tsx
+++ /dev/null
@@ -1,623 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { DerivedBalances, DerivedStaking, DerivedStakingOnlineStatus, DerivedHeartbeats } from '@polkadot/api-derive/types';
-import { ApiProps } from '@polkadot/react-api/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { AccountId, Exposure, StakingLedger, ValidatorPrefs } from '@polkadot/types/interfaces';
-import { KeyringSectionOption } from '@polkadot/ui-keyring/options/types';
-
-import { Popup } from 'semantic-ui-react';
-import React from 'react';
-import styled from 'styled-components';
-import { AddressCard, AddressInfo, AddressMini, AddressRow, Button, Menu, OnlineStatus, TxButton } from '@polkadot/react-components';
-import { withCalls, withMulti } from '@polkadot/react-api';
-
-import BondExtra from './BondExtra';
-import InjectKeys from './InjectKeys';
-import Nominate from './Nominate';
-import SetControllerAccount from './SetControllerAccount';
-import SetRewardDestination from './SetRewardDestination';
-import SetSessionKey from './SetSessionKey';
-import translate from '../../translate';
-import Unbond from './Unbond';
-import Validate from './Validate';
-import { u8aToHex, u8aConcat } from '@polkadot/util';
-
-interface Props extends ApiProps, I18nProps {
-  accountId: string;
-  allStashes?: string[];
-  balances_all?: DerivedBalances;
-  className?: string;
-  recentlyOnline?: DerivedHeartbeats;
-  staking_info?: DerivedStaking;
-  stashOptions: KeyringSectionOption[];
-}
-
-interface State {
-  controllerId: string | null;
-  destination: number;
-  hexSessionId: string | null;
-  isBondExtraOpen: boolean;
-  isInjectOpen: boolean;
-  isNominateOpen: boolean;
-  isSetControllerAccountOpen: boolean;
-  isSetRewardDestinationOpen: boolean;
-  isSetSessionAccountOpen: boolean;
-  isSettingPopupOpen: boolean;
-  isStashNominating: boolean;
-  isStashValidating: boolean;
-  isUnbondOpen: boolean;
-  isValidateOpen: boolean;
-  nominees?: string[];
-  onlineStatus: DerivedStakingOnlineStatus;
-  sessionIds: string[];
-  stakers?: Exposure;
-  stakingLedger?: StakingLedger;
-  stashId: string | null;
-  validatorPrefs?: ValidatorPrefs;
-}
-
-const DEFAULT_BALANCES = {
-  available: true,
-  bonded: false,
-  total: false,
-  redeemable: false,
-  unlocking: false
-};
-
-const CONTROLLER_BALANCES = {
-  available: true,
-  bonded: false,
-  free: false,
-  redeemable: false,
-  unlocking: false
-};
-
-function toIdString (id?: AccountId | null): string | null {
-  return id
-    ? id.toString()
-    : null;
-}
-
-class Account extends React.PureComponent<Props, State> {
-  public state: State = {
-    controllerId: null,
-    destination: 0,
-    hexSessionId: null,
-    isBondExtraOpen: false,
-    isInjectOpen: false,
-    isNominateOpen: false,
-    isSetControllerAccountOpen: false,
-    isSettingPopupOpen: false,
-    isSetRewardDestinationOpen: false,
-    isSetSessionAccountOpen: false,
-    isStashNominating: false,
-    isStashValidating: false,
-    isUnbondOpen: false,
-    isValidateOpen: false,
-    onlineStatus: {},
-    sessionIds: [],
-    stashId: null
-  };
-
-  public static getDerivedStateFromProps ({ allStashes, staking_info }: Props): Pick<State, never> | null {
-    if (!staking_info) {
-      return null;
-    }
-
-    const { controllerId, nextSessionIds, nominators, rewardDestination, sessionIds, stakers, stakingLedger, stashId, validatorPrefs } = staking_info;
-    const isStashNominating = nominators && !!nominators.length;
-    const _stashId = toIdString(stashId);
-    const isStashValidating = !!allStashes && !!_stashId && allStashes.includes(_stashId);
-
-    return {
-      controllerId: toIdString(controllerId),
-      destination: rewardDestination && rewardDestination.toNumber(),
-      hexSessionId: u8aToHex(u8aConcat(...(
-        nextSessionIds.length
-          ? nextSessionIds
-          : sessionIds
-      ).map((id): Uint8Array => id.toU8a())), 48),
-      isStashNominating,
-      isStashValidating,
-      nominees: nominators && nominators.map(toIdString),
-      sessionIds: (
-        nextSessionIds.length
-          ? nextSessionIds
-          : sessionIds
-      ).map(toIdString),
-      stakers,
-      stakingLedger,
-      stashId: _stashId,
-      validatorPrefs
-    };
-  }
-
-  public render (): React.ReactNode {
-    const { className, isSubstrateV2, t } = this.props;
-    const { controllerId, hexSessionId, isBondExtraOpen, isInjectOpen, isStashValidating, isUnbondOpen, nominees, onlineStatus, sessionIds, stashId } = this.state;
-
-    if (!stashId) {
-      return null;
-    }
-
-    // Each component is rendered and gets a `is[Component]Open` passed in a `isOpen` props.
-    // These components will be loaded and return null at the first load (because is[Component]Open === false).
-    // This is deliberate in order to display the Component modals in a performant matter later on
-    // because their state will already be loaded.
-    return (
-      <AddressCard
-        buttons={this.renderButtons()}
-        iconInfo={onlineStatus && (
-          <OnlineStatus
-            isTooltip
-            value={onlineStatus}
-          />
-        )}
-        label={t('stash')}
-        type='account'
-        value={stashId}
-        withAddressOrName
-        withBalance={DEFAULT_BALANCES}
-      >
-        <BondExtra
-          controllerId={controllerId}
-          isOpen={isBondExtraOpen}
-          onClose={this.toggleBondExtra}
-          stashId={stashId}
-        />
-        <Unbond
-          controllerId={controllerId}
-          isOpen={isUnbondOpen}
-          onClose={this.toggleUnbond}
-          stashId={stashId}
-        />
-        {isInjectOpen && (
-          <InjectKeys onClose={this.toggleInject} />
-        )}
-        {this.renderSetValidatorPrefs()}
-        {this.renderNominate()}
-        {this.renderSetControllerAccount()}
-        {this.renderSetRewardDestination()}
-        {this.renderSetSessionAccount()}
-        {this.renderValidate()}
-        <div className={className}>
-          <div className='staking--Accounts'>
-            {controllerId && (
-              <div className='staking--Account-detail actions'>
-                <AddressRow
-                  label={t('controller')}
-                  value={controllerId}
-                  withAddressOrName
-                  withBalance={CONTROLLER_BALANCES}
-                />
-              </div>
-            )}
-            {!isSubstrateV2 && !!sessionIds.length && (
-              <div className='staking--Account-detail actions'>
-                <AddressRow
-                  label={t('session')}
-                  value={sessionIds[0]}
-                  withAddressOrName
-                  withBalance={{
-                    available: true,
-                    bonded: false,
-                    free: false,
-                    redeemable: false,
-                    unlocking: false
-                  }}
-                />
-              </div>
-            )}
-          </div>
-          <div className='staking--Infos'>
-            <div className='staking--balances'>
-              <AddressInfo
-                address={stashId}
-                withBalance={{
-                  available: false,
-                  bonded: true,
-                  free: false,
-                  redeemable: true,
-                  unlocking: true
-                }}
-                withRewardDestination
-                withHexSessionId={ isSubstrateV2 && hexSessionId !== '0x' && hexSessionId}
-                withValidatorPrefs={isStashValidating}
-              />
-            </div>
-            {nominees && !!nominees.length && (
-              <div className='staking--Account-Nominee'>
-                <label className='staking--label'>{t('nominating')}</label>
-                {nominees.map((nomineeId, index): React.ReactNode => (
-                  <AddressMini
-                    key={index}
-                    value={nomineeId}
-                    withBalance={false}
-                    withBonded
-                  />
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-      </AddressCard>
-    );
-  }
-
-  private renderNominate (): React.ReactNode {
-    const { stashOptions } = this.props;
-    const { controllerId, isNominateOpen, nominees, stashId } = this.state;
-
-    if (!stashId || !controllerId) {
-      return null;
-    }
-
-    return (
-      <Nominate
-        controllerId={controllerId}
-        isOpen={isNominateOpen}
-        nominees={nominees}
-        onClose={this.toggleNominate}
-        stashId={stashId}
-        stashOptions={stashOptions}
-      />
-    );
-  }
-
-  private renderValidate (): React.ReactNode {
-    const { controllerId, isValidateOpen, stashId, validatorPrefs } = this.state;
-
-    if (!stashId || !controllerId) {
-      return null;
-    }
-
-    return (
-      <Validate
-        controllerId={controllerId}
-        isOpen={isValidateOpen}
-        onClose={this.toggleValidate}
-        stashId={stashId}
-        validatorPrefs={validatorPrefs}
-      />
-    );
-  }
-
-  private renderButtons (): React.ReactNode {
-    const { isSubstrateV2, t } = this.props;
-    const { controllerId, hexSessionId, isSettingPopupOpen, isStashNominating, isStashValidating, sessionIds } = this.state;
-    const buttons = [];
-
-    // if we are validating/nominating show stop
-    if (isStashNominating || isStashValidating) {
-      buttons.push(
-        <TxButton
-          accountId={controllerId}
-          isNegative
-          label={
-            isStashNominating
-              ? t('Stop Nominating')
-              : t('Stop Validating')
-          }
-          icon='stop'
-          key='stop'
-          tx='staking.chill'
-        />
-      );
-    } else {
-      if (!sessionIds.length || (isSubstrateV2 && hexSessionId === '0x')) {
-        buttons.push(
-          <Button
-            isPrimary
-            key='set'
-            onClick={this.toggleSetSessionAccount}
-            label={t('Set Session Key')}
-            icon='sign-in'
-          />
-        );
-      } else {
-        buttons.push(
-          <Button
-            isPrimary
-            key='validate'
-            onClick={this.toggleValidate}
-            label={t('Validate')}
-            icon='check circle outline'
-          />
-        );
-      }
-
-      buttons.push(<Button.Or key='nominate.or' />);
-      buttons.push(
-        <Button
-          isPrimary
-          key='nominate'
-          onClick={this.toggleNominate}
-          label={t('Nominate')}
-          icon='hand paper outline'
-        />
-      );
-    }
-
-    buttons.push(
-      <Popup
-        key='settings'
-        onClose={this.toggleSettingPopup}
-        open={isSettingPopupOpen}
-        position='bottom left'
-        trigger={
-          <Button
-            icon='setting'
-            onClick={this.toggleSettingPopup}
-            size='tiny'
-          />
-        }
-      >
-        {this.renderPopupMenu()}
-      </Popup>
-    );
-
-    return (
-      <>
-        <Button.Group>
-          {buttons}
-        </Button.Group>
-      </>
-    );
-  }
-
-  private renderPopupMenu (): React.ReactNode {
-    const { balances_all, isSubstrateV2, t } = this.props;
-    const { hexSessionId, isStashNominating, isStashValidating, sessionIds } = this.state;
-
-    // only show a "Bond Additional" button if this stash account actually doesn't bond everything already
-    // staking_ledger.total gives the total amount that can be slashed (any active amount + what is being unlocked)
-    const canBondExtra = balances_all && balances_all.freeBalance.gtn(0);
-
-    return (
-      <Menu
-        vertical
-        text
-        onClick={this.toggleSettingPopup}
-      >
-        {canBondExtra &&
-          <Menu.Item onClick={this.toggleBondExtra}>
-            {t('Bond more funds')}
-          </Menu.Item>
-        }
-        <Menu.Item onClick={this.toggleUnbond}>
-          {t('Unbond funds')}
-        </Menu.Item>
-        <Menu.Item onClick={this.toggleSetControllerAccount}>
-          {t('Change controller account')}
-        </Menu.Item>
-        <Menu.Item onClick={this.toggleSetRewardDestination}>
-          {t('Change reward destination')}
-        </Menu.Item>
-        {isStashValidating &&
-          <Menu.Item onClick={this.toggleValidate}>
-            {t('Change validator preferences')}
-          </Menu.Item>
-        }
-        {!isStashNominating && (!!sessionIds.length || (isSubstrateV2 && hexSessionId !== '0x')) &&
-          <Menu.Item onClick={this.toggleSetSessionAccount}>
-            {isSubstrateV2 ? t('Change session keys') : t('Change session account')}
-          </Menu.Item>
-        }
-        {isStashNominating &&
-          <Menu.Item onClick={this.toggleNominate}>
-            {t('Change nominee(s)')}
-          </Menu.Item>
-        }
-        {!isStashNominating && isSubstrateV2 &&
-          <Menu.Item onClick={this.toggleInject}>
-            {t('Inject session keys (advanced)')}
-          </Menu.Item>
-        }
-      </Menu>
-    );
-  }
-
-  private renderSetValidatorPrefs (): React.ReactNode {
-    const { controllerId, isValidateOpen, stashId, validatorPrefs } = this.state;
-
-    if (!controllerId || !validatorPrefs || !stashId) {
-      return null;
-    }
-
-    return (
-      <Validate
-        controllerId={controllerId}
-        isOpen={isValidateOpen}
-        onClose={this.toggleValidate}
-        stashId={stashId}
-        validatorPrefs={validatorPrefs}
-      />
-    );
-  }
-
-  private renderSetControllerAccount (): React.ReactNode {
-    const { controllerId, isSetControllerAccountOpen, isStashValidating, stashId } = this.state;
-
-    if (!isSetControllerAccountOpen || !stashId) {
-      return null;
-    }
-
-    return (
-      <SetControllerAccount
-        defaultControllerId={controllerId}
-        isValidating={isStashValidating}
-        onClose={this.toggleSetControllerAccount}
-        stashId={stashId}
-      />
-    );
-  }
-
-  private renderSetRewardDestination (): React.ReactNode {
-    const { controllerId, destination, isSetRewardDestinationOpen } = this.state;
-
-    if (!isSetRewardDestinationOpen || !controllerId) {
-      return null;
-    }
-
-    return (
-      <SetRewardDestination
-        controllerId={controllerId}
-        defaultDestination={destination}
-        onClose={this.toggleSetRewardDestination}
-      />
-    );
-  }
-
-  private renderSetSessionAccount (): React.ReactNode {
-    const { controllerId, isSetSessionAccountOpen, stashId, sessionIds } = this.state;
-
-    if (!controllerId || !stashId) {
-      return null;
-    }
-
-    return (
-      <SetSessionKey
-        controllerId={controllerId}
-        isOpen={isSetSessionAccountOpen}
-        onClose={this.toggleSetSessionAccount}
-        sessionIds={sessionIds}
-        stashId={stashId}
-      />
-    );
-  }
-
-  private toggleBondExtra = (): void => {
-    this.setState(({ isBondExtraOpen }): Pick<State, never> => ({
-      isBondExtraOpen: !isBondExtraOpen
-    }));
-  }
-
-  private toggleInject = (): void => {
-    this.setState(({ isInjectOpen }): Pick<State, never> => ({
-      isInjectOpen: !isInjectOpen
-    }));
-  }
-
-  private toggleNominate = (): void => {
-    this.setState(({ isNominateOpen }): Pick<State, never> => ({
-      isNominateOpen: !isNominateOpen
-    }));
-  }
-
-  private toggleSetControllerAccount = (): void => {
-    this.setState(({ isSetControllerAccountOpen }): Pick<State, never> => ({
-      isSetControllerAccountOpen: !isSetControllerAccountOpen
-    }));
-  }
-
-  private toggleSetRewardDestination = (): void => {
-    this.setState(({ isSetRewardDestinationOpen }): Pick<State, never> => ({
-      isSetRewardDestinationOpen: !isSetRewardDestinationOpen
-    }));
-  }
-
-  private toggleSetSessionAccount = (): void => {
-    this.setState(({ isSetSessionAccountOpen }): Pick<State, never> => ({
-      isSetSessionAccountOpen: !isSetSessionAccountOpen
-    }));
-  }
-
-  private toggleSettingPopup = (): void => {
-    this.setState(({ isSettingPopupOpen }): Pick<State, never> => ({
-      isSettingPopupOpen: !isSettingPopupOpen
-    }));
-  }
-
-  private toggleUnbond = (): void => {
-    this.setState(({ isUnbondOpen }): Pick<State, never> => ({
-      isUnbondOpen: !isUnbondOpen
-    }));
-  }
-
-  private toggleValidate = (): void => {
-    this.setState(({ isValidateOpen }): Pick<State, never> => ({
-      isValidateOpen: !isValidateOpen
-    }));
-  }
-}
-
-export default withMulti(
-  styled(Account as React.ComponentClass<Props>)`
-    display: flex;
-
-    .staking--Accounts {
-      flex: 3;
-      display: flex;
-      flex-direction: column;
-      width: 0px;
-    }
-
-    .staking--Account-detail {
-      text-align: right;
-
-      &.actions{
-        display: inline-block;
-        vertical-align: top;
-        margin-top: .5rem;
-        margin-bottom: 1.5rem;
-
-        &:last-child {
-          margin: 0;
-        }
-      }
-
-      .staking--label {
-        margin: 0 1.75rem -0.75rem 0;
-      }
-    }
-
-    .staking--Infos {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-
-      .staking--balances {
-        div {
-          justify-content: flex-end;
-        }
-
-        .column {
-          flex:0;
-        }
-      }
-
-      .staking--Account-Nominee {
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-        padding-top: 1em;
-        flex: 1;
-      }
-    }
-
-    .staking--Account-Nominee {
-      text-align: right;
-
-      .staking--label {
-        margin: 0 2.25rem -.75rem 0;
-      }
-    }
-
-    .ui--Row-buttons .ui--Button-Group {
-      margin-right: .25rem;
-
-      .ui.tiny.icon.button {
-        visibility: visible;
-      }
-    }
-  `,
-  translate,
-  withCalls<Props>(
-    ['derive.staking.info', { paramName: 'accountId' }],
-    ['derive.balances.all', { paramName: 'accountId' }]
-  )
-);
diff --git a/pioneer/packages/old-apps/app-staking/src/Actions/Accounts.tsx b/pioneer/packages/old-apps/app-staking/src/Actions/Accounts.tsx
deleted file mode 100644
index 883e1e4122..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/Actions/Accounts.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ApiProps } from '@polkadot/react-api/types';
-import { ComponentProps } from '../types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-import { KeyringSectionOption } from '@polkadot/ui-keyring/options/types';
-import { withCalls, withMulti } from '@polkadot/react-api/with';
-import { withOnlyAccounts } from '@polkadot/joy-utils/MyAccount';
-
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { Button, CardGrid } from '@polkadot/react-components';
-import { AccountName } from '@polkadot/react-query';
-import createOption from '@polkadot/ui-keyring/options/item';
-
-import Account from './Account';
-import StartStaking from './NewStake';
-import translate from '../translate';
-
-interface Props extends I18nProps, ComponentProps, ApiProps {
-  myControllers?: string[];
-}
-
-function getMyStashes (myControllers?: string[], allAccounts?: SubjectInfo): string[] | null {
-  const result: string[] = [];
-
-  if (!myControllers) {
-    return null;
-  }
-
-  myControllers.forEach((value, index): void => {
-    if (value.toString() !== '') {
-      allAccounts && result.push(Object.keys(allAccounts)[index]);
-    }
-  });
-
-  return result;
-}
-
-function Accounts ({
-  allAccounts,
-  allStashes,
-  className,
-  myControllers,
-  recentlyOnline,
-  t
-}: Props): React.ReactElement<Props> {
-  const [isNewStakeOpen, setIsNewStateOpen] = useState(false);
-  const myStashes = getMyStashes(myControllers, allAccounts);
-  const stashOptions = allStashes.map(
-    (stashId): KeyringSectionOption => createOption(stashId, (<AccountName params={stashId} />) as any)
-  );
-  const isEmpty = !isNewStakeOpen && (!myStashes || myStashes.length === 0);
-
-  const _toggleNewStake = (): void => setIsNewStateOpen(!isNewStakeOpen);
-
-  return (
-    <CardGrid
-      buttons={<Button isPrimary key="new-stake" label={t('New stake')} icon="add" onClick={_toggleNewStake} />}
-      className={className}
-      emptyText={t('No funds staked yet.')}
-      isEmpty={isEmpty}
-    >
-      {isNewStakeOpen && <StartStaking onClose={_toggleNewStake} />}
-      {myStashes &&
-        myStashes.map(
-          (address, index): React.ReactNode =>
-            address && (
-              <Account
-                allStashes={allStashes}
-                accountId={address}
-                key={index}
-                recentlyOnline={recentlyOnline}
-                stashOptions={stashOptions}
-              />
-            )
-        )}
-    </CardGrid>
-  );
-}
-
-export default withMulti(
-  withOnlyAccounts(
-    styled(Accounts)`
-      .ui--CardGrid-buttons {
-        text-align: right;
-      }
-    `
-  ),
-  translate,
-  withCalls<Props>([
-    'query.staking.bonded',
-    {
-      isMulti: true,
-      paramPick: ({ allAccounts }: Props): undefined | string[] => {
-        return allAccounts && Object.keys(allAccounts);
-      },
-      propName: 'myControllers'
-    }
-  ])
-);
diff --git a/pioneer/packages/old-apps/app-staking/src/Actions/NewStake.tsx b/pioneer/packages/old-apps/app-staking/src/Actions/NewStake.tsx
deleted file mode 100644
index b8ad0006a1..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/Actions/NewStake.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { ApiProps } from '@polkadot/react-api/types';
-import { CalculateBalanceProps } from '../types';
-
-import BN from 'bn.js';
-import React from 'react';
-import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-import { Button, Dropdown, InputAddress, InputBalanceBonded, Modal, TxButton, TxComponent } from '@polkadot/react-components';
-import { withApi, withMulti } from '@polkadot/react-api';
-
-import translate from '../translate';
-import detectUnsafe from '../unsafeChains';
-import InputValidateAmount from './Account/InputValidateAmount';
-import InputValidationController from './Account/InputValidationController';
-import { rewardDestinationOptions } from './constants';
-
-interface Props extends ApiProps, I18nProps, CalculateBalanceProps {
-  onClose: () => void;
-}
-
-interface State {
-  amountError: string | null;
-  bondValue?: BN;
-  controllerError: string | null;
-  controllerId: string | null;
-  destination: number;
-  extrinsic: SubmittableExtrinsic | null;
-  stashId: string | null;
-}
-
-class NewStake extends TxComponent<Props, State> {
-  public state: State;
-
-  constructor (props: Props) {
-    super(props);
-
-    this.state = {
-      amountError: null,
-      controllerError: null,
-      controllerId: null,
-      destination: 0,
-      extrinsic: null,
-      stashId: null
-    };
-  }
-
-  public render (): React.ReactNode {
-    const { onClose, systemChain, t } = this.props;
-    const { amountError, bondValue, controllerError, controllerId, destination, extrinsic, stashId } = this.state;
-    const hasValue = !!bondValue && bondValue.gtn(0);
-    const isUnsafeChain = detectUnsafe(systemChain);
-    const canSubmit = (hasValue && (isUnsafeChain || (!controllerError && !!controllerId)));
-
-    return (
-      <Modal
-        className='staking--Bonding'
-        dimmer='inverted'
-        open
-        size='small'
-      >
-        <Modal.Header>
-          {t('Bonding Preferences')}
-        </Modal.Header>
-        <Modal.Content className='ui--signer-Signer-Content'>
-          <InputAddress
-            className='medium'
-            label={t('stash account')}
-            onChange={this.onChangeStash}
-            type='account'
-            value={stashId}
-          />
-          <InputAddress
-            className='medium'
-            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.')}
-            isError={!isUnsafeChain && !!controllerError}
-            label={t('controller account')}
-            onChange={this.onChangeController}
-            type='account'
-            value={controllerId}
-          />
-          <InputValidationController
-            accountId={stashId}
-            controllerId={controllerId}
-            isUnsafeChain={isUnsafeChain}
-            onError={this.onControllerError}
-          />
-          <InputBalanceBonded
-            autoFocus
-            className='medium'
-            controllerId={controllerId}
-            destination={destination}
-            extrinsicProp={'staking.bond'}
-            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)')}
-            isError={!hasValue || !!amountError}
-            label={t('value bonded')}
-            onChange={this.onChangeValue}
-            onEnter={this.sendTx}
-            stashId={stashId}
-            withMax={!isUnsafeChain}
-          />
-          <InputValidateAmount
-            accountId={stashId}
-            onError={this.onAmountError}
-            value={bondValue}
-          />
-          <Dropdown
-            className='medium'
-            defaultValue={0}
-            help={t('The destination account for any payments as either a nominator or validator')}
-            label={t('payment destination')}
-            onChange={this.onChangeDestination}
-            options={rewardDestinationOptions}
-            value={destination}
-          />
-        </Modal.Content>
-        <Modal.Actions>
-          <Button.Group>
-            <Button
-              isNegative
-              onClick={onClose}
-              label={t('Cancel')}
-              icon='cancel'
-            />
-            <Button.Or />
-            <TxButton
-              accountId={stashId}
-              isDisabled={!canSubmit}
-              isPrimary
-              label={t('Bond')}
-              icon='sign-in'
-              onClick={onClose}
-              extrinsic={extrinsic}
-              ref={this.button}
-            />
-          </Button.Group>
-        </Modal.Actions>
-      </Modal>
-    );
-  }
-
-  private nextState (newState: Partial<State>): void {
-    this.setState((prevState: State): State => {
-      const { api } = this.props;
-      const { amountError = prevState.amountError, bondValue = prevState.bondValue, controllerError = prevState.controllerError, controllerId = prevState.controllerId, destination = prevState.destination, stashId = prevState.stashId } = newState;
-      const extrinsic = (bondValue && controllerId)
-        ? api.tx.staking.bond(controllerId, bondValue, destination)
-        : null;
-
-      return {
-        amountError,
-        bondValue,
-        controllerError,
-        controllerId,
-        destination,
-        extrinsic,
-        stashId
-      };
-    });
-  }
-
-  private onAmountError = (amountError: string | null): void => {
-    this.nextState({ amountError });
-  }
-
-  private onChangeController = (controllerId: string | null): void => {
-    this.nextState({ controllerId });
-  }
-
-  private onChangeDestination = (destination: number): void => {
-    this.nextState({ destination });
-  }
-
-  private onChangeStash = (stashId: string | null): void => {
-    this.nextState({ stashId });
-  }
-
-  private onChangeValue = (bondValue?: BN): void => {
-    this.nextState({ bondValue });
-  }
-
-  private onControllerError = (controllerError: string | null): void => {
-    this.setState({ controllerError });
-  }
-}
-
-export default withMulti(
-  NewStake,
-  translate,
-  withApi
-);
diff --git a/pioneer/packages/old-apps/app-staking/src/Actions/constants.tsx b/pioneer/packages/old-apps/app-staking/src/Actions/constants.tsx
deleted file mode 100644
index 3e40b6044d..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/Actions/constants.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-// Copyright 2017-2019 @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.
-
-export const rewardDestinationOptions = [
-  { text: 'Stash account (increase the amount at stake)', value: 0 },
-  { text: 'Stash account (do not increase the amount at stake)', value: 1 },
-  { text: 'Controller account', value: 2 }
-];
diff --git a/pioneer/packages/old-apps/app-staking/src/Overview/Address.tsx b/pioneer/packages/old-apps/app-staking/src/Overview/Address.tsx
deleted file mode 100644
index bff78b9460..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/Overview/Address.tsx
+++ /dev/null
@@ -1,259 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { AccountId, Balance, Points } from '@polkadot/types/interfaces';
-import { DerivedStaking, DerivedHeartbeats } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { ValidatorFilter } from '../types';
-
-import BN from 'bn.js';
-import React, { useContext, useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { ApiContext, withCalls, withMulti } from '@polkadot/react-api';
-import { AddressCard, AddressMini, Badge, Expander, Icon } from '@polkadot/react-components';
-import { classes } from '@polkadot/react-components/util';
-import { formatNumber } from '@polkadot/util';
-
-import translate from '../translate';
-
-interface Props extends I18nProps {
-  address: AccountId | string;
-  authorsMap: Record<string, string>;
-  className?: string;
-  defaultName: string;
-  filter: ValidatorFilter;
-  isElected: boolean;
-  lastAuthors?: string[];
-  myAccounts: string[];
-  points?: Points;
-  recentlyOnline?: DerivedHeartbeats;
-  stakingInfo?: DerivedStaking;
-  withNominations?: boolean;
-}
-
-interface StakingState {
-  balanceOpts: { bonded: boolean | BN[] };
-  controllerId?: string;
-  hasNominators: boolean;
-  isNominatorMe: boolean;
-  nominators: [AccountId, Balance][];
-  sessionId?: string;
-  stashId?: string;
-}
-
-const WITH_VALIDATOR_PREFS = { validatorPayment: true };
-
-function Address ({ address, authorsMap, className, defaultName, filter, isElected, lastAuthors, myAccounts, points, recentlyOnline, stakingInfo, t, withNominations = true }: Props): React.ReactElement<Props> | null {
-  const { isSubstrateV2 } = useContext(ApiContext);
-  const [extraInfo, setExtraInfo] = useState<[React.ReactNode, React.ReactNode][] | undefined>();
-  const [hasActivity, setHasActivity] = useState(true);
-  const [{ balanceOpts, controllerId, hasNominators, isNominatorMe, nominators, sessionId, stashId }, setStakingState] = useState<StakingState>({
-    balanceOpts: { bonded: true },
-    hasNominators: false,
-    isNominatorMe: false,
-    nominators: []
-  });
-
-  useEffect((): void => {
-    if (points) {
-      const formatted = formatNumber(points);
-
-      if (!extraInfo || extraInfo[0][1] !== formatted) {
-        setExtraInfo([[t('era points'), formatted]]);
-      }
-    }
-  }, [extraInfo, points]);
-
-  useEffect((): void => {
-    if (stakingInfo) {
-      const { controllerId, nextSessionIds, stakers, stashId } = stakingInfo;
-      const nominators = withNominations && stakers
-        ? stakers.others.map(({ who, value }): [AccountId, Balance] => [who, value.unwrap()])
-        : [];
-      const stakersOwn = stakers && !stakers.own.isEmpty && stakers.own.unwrap();
-
-      setStakingState({
-        balanceOpts: stakers && stakersOwn
-          ? { bonded: [stakersOwn, stakers.total.unwrap().sub(stakersOwn)] }
-          : { bonded: true },
-        controllerId: controllerId?.toString(),
-        hasNominators: nominators.length !== 0,
-        isNominatorMe: nominators.some(([who]): boolean =>
-          myAccounts.includes(who.toString())
-        ),
-        nominators,
-        sessionId: nextSessionIds && nextSessionIds[0]?.toString(),
-        stashId: stashId?.toString()
-      });
-    }
-  }, [stakingInfo]);
-
-  useEffect((): void => {
-    setHasActivity(
-      recentlyOnline && recentlyOnline[stashId || '']
-        ? recentlyOnline[stashId || ''].isOnline
-        : true
-    );
-  }, [recentlyOnline, stashId]);
-
-  if ((filter === 'hasNominators' && !hasNominators) ||
-    (filter === 'noNominators' && hasNominators) ||
-    (filter === 'hasWarnings' && hasActivity) ||
-    (filter === 'noWarnings' && !hasActivity) ||
-    (filter === 'iNominated' && !isNominatorMe) ||
-    (filter === 'nextSet' && !isElected)) {
-    return null;
-  }
-
-  if (!stashId) {
-    return (
-      <AddressCard
-        className={className}
-        defaultName={defaultName}
-        isDisabled
-        value={address}
-        withBalance={false}
-      />
-    );
-  }
-
-  const lastBlockNumber = authorsMap[stashId];
-  const isAuthor = lastAuthors && lastAuthors.includes(stashId);
-
-  return (
-    <AddressCard
-      buttons={
-        <div className='staking--Address-info'>
-          {lastBlockNumber && (
-            <div className={`blockNumberV${isSubstrateV2 ? '2' : '1'} ${isAuthor && 'isCurrent'}`}>#{lastBlockNumber}</div>
-          )}
-          {controllerId && (
-            <div>
-              <label className={classes('staking--label', isSubstrateV2 && !lastBlockNumber && 'controllerSpacer')}>{t('controller')}</label>
-              <AddressMini value={controllerId} />
-            </div>
-          )}
-          {!isSubstrateV2 && sessionId && (
-            <div>
-              <label className='staking--label'>{t('session')}</label>
-              <AddressMini value={sessionId} />
-            </div>
-          )}
-        </div>
-      }
-      className={className}
-      defaultName={defaultName}
-      extraInfo={extraInfo}
-      iconInfo={
-        <>
-          {isElected && (
-            <Badge
-              hover={t('Selected for the next session')}
-              info={<Icon name='chevron right' />}
-              isTooltip
-              type='next'
-            />
-          )}
-          {recentlyOnline && hasActivity && recentlyOnline[stashId] && (
-            <Badge
-              hover={t('Active with {{blocks}} blocks authored{{hasMessage}} heartbeat message', {
-                replace: {
-                  blocks: formatNumber(recentlyOnline[stashId].blockCount),
-                  hasMessage: recentlyOnline[stashId].hasMessage ? ' and a' : ', no'
-                }
-              })}
-              info={<Icon name='check' />}
-              isTooltip
-              type='online'
-            />
-          )}
-        </>
-      }
-      isDisabled={isSubstrateV2 && !hasActivity}
-      stakingInfo={stakingInfo}
-      value={stashId}
-      withBalance={balanceOpts}
-      withValidatorPrefs={WITH_VALIDATOR_PREFS}
-    >
-      {withNominations && hasNominators && (
-        <Expander
-          summary={t('Nominators ({{count}})', {
-            replace: {
-              count: nominators.length
-            }
-          })}
-        >
-          {nominators.map(([who, bonded]): React.ReactNode =>
-            <AddressMini
-              bonded={bonded}
-              key={who.toString()}
-              value={who}
-              withBonded
-            />
-          )}
-        </Expander>
-      )}
-    </AddressCard>
-  );
-}
-
-export default withMulti(
-  styled(Address)`
-    .blockNumberV1,
-    .blockNumberV2 {
-      border-radius: 0.25rem;
-      font-size: 1.5rem;
-      font-weight: 100;
-      line-height: 1.5rem;
-      opacity: 0.5;
-      vertical-align: middle;
-      z-index: 1;
-
-      &.isCurrent {
-        background: #3f3f3f;
-        box-shadow: 0 3px 3px rgba(0,0,0,.2);
-        color: #eee;
-        opacity: 1;
-      }
-    }
-
-    .blockNumberV2 {
-      display: inline-block;
-      margin-bottom: 0.75rem;
-      padding: 0.25rem 0;
-
-      &.isCurrent {
-        margin-right: -0.25rem;
-        padding: 0.25rem 0.75rem;
-      }
-    }
-
-    .blockNumberV1 {
-      padding: 0.25rem 0.5rem;
-      position: absolute;
-      right: 0;
-    }
-
-    .staking--Address-info {
-      /* Small additional margin to take care of validator highlights */
-      margin-right: 0.25rem;
-      text-align: right;
-
-      .staking--label {
-        margin: 0 2.25rem -0.75rem 0;
-      }
-    }
-
-    .staking--label.controllerSpacer {
-      margin-top: 2.75rem;
-    }
-  `,
-  translate,
-  withCalls<Props>(
-    ['derive.staking.info', {
-      paramName: 'address',
-      propName: 'stakingInfo'
-    }]
-  )
-);
diff --git a/pioneer/packages/old-apps/app-staking/src/Overview/CurrentList.tsx b/pioneer/packages/old-apps/app-staking/src/Overview/CurrentList.tsx
deleted file mode 100644
index f27a5d10c0..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/Overview/CurrentList.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { AccountId } from '@polkadot/types/interfaces';
-import { DerivedHeartbeats, DerivedStakingOverview } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { ValidatorFilter } from '../types';
-
-import React, { useContext, useEffect, useState } from 'react';
-import { ApiContext } from '@polkadot/react-api';
-import { Columar, Column, Dropdown, FilterOverlay } from '@polkadot/react-components';
-import keyring from '@polkadot/ui-keyring';
-
-import translate from '../translate';
-import Address from './Address';
-
-interface Props extends I18nProps {
-  authorsMap: Record<string, string>;
-  lastAuthors?: string[];
-  next: string[];
-  recentlyOnline?: DerivedHeartbeats;
-  stakingOverview?: DerivedStakingOverview;
-}
-
-function renderColumn (
-  myAccounts: string[],
-  addresses: AccountId[] | string[],
-  defaultName: string,
-  withOnline: boolean,
-  filter: string,
-  { authorsMap, lastAuthors, recentlyOnline, stakingOverview }: Props,
-  pointIndexes?: number[]
-): React.ReactNode {
-  return (addresses as AccountId[]).map(
-    (address, index): React.ReactNode => (
-      <Address
-        address={address}
-        authorsMap={authorsMap}
-        defaultName={defaultName}
-        filter={filter}
-        isElected={
-          stakingOverview && stakingOverview.currentElected.some((accountId): boolean => accountId.eq(address))
-        }
-        lastAuthors={lastAuthors}
-        key={address.toString()}
-        myAccounts={myAccounts}
-        points={
-          stakingOverview && pointIndexes && pointIndexes[index] !== -1
-            ? stakingOverview.eraPoints.individual[pointIndexes[index]]
-            : undefined
-        }
-        recentlyOnline={withOnline ? recentlyOnline : undefined}
-      />
-    )
-  );
-}
-
-function filterAccounts (list: string[] = [], without: AccountId[] | string[]): string[] {
-  return list.filter((accountId): boolean => !without.includes(accountId as any));
-}
-
-function CurrentList (props: Props): React.ReactElement<Props> {
-  const { isSubstrateV2 } = useContext(ApiContext);
-  const [filter, setFilter] = useState<ValidatorFilter>('all');
-  const [myAccounts] = useState(keyring.getAccounts().map(({ address }): string => address));
-  const [{ electedFiltered, nextFiltered, pointIndexes }, setFiltered] = useState<{
-    electedFiltered: string[];
-    nextFiltered: string[];
-    pointIndexes: number[];
-  }>({ electedFiltered: [], nextFiltered: [], pointIndexes: [] });
-  const { next, stakingOverview, t } = props;
-
-  useEffect((): void => {
-    if (stakingOverview) {
-      const elected = stakingOverview.currentElected.map((accountId): string => accountId.toString());
-
-      setFiltered({
-        electedFiltered: isSubstrateV2 ? filterAccounts(elected, stakingOverview.validators) : [],
-        nextFiltered: filterAccounts(next, elected),
-        pointIndexes: stakingOverview.validators.map((validator): number => elected.indexOf(validator.toString()))
-      });
-    }
-  }, [next, stakingOverview]);
-
-  return (
-    <div>
-      <FilterOverlay>
-        <Dropdown
-          onChange={setFilter}
-          options={[
-            { text: t('Show all validators and intentions'), value: 'all' },
-            { text: t('Show only my nominations'), value: 'iNominated' },
-            { text: t('Show only with nominators'), value: 'hasNominators' },
-            { text: t('Show only without nominators'), value: 'noNominators' },
-            { text: t('Show only with warnings'), value: 'hasWarnings' },
-            { text: t('Show only without warnings'), value: 'noWarnings' },
-            { text: t('Show only elected for next session'), value: 'nextSet' }
-          ]}
-          value={filter}
-          withLabel={false}
-        />
-      </FilterOverlay>
-      <Columar className="validator--ValidatorsList">
-        <Column emptyText={t('No addresses found')} headerText={t('validators')}>
-          {stakingOverview &&
-            renderColumn(myAccounts, stakingOverview.validators, t('validator'), true, filter, props, pointIndexes)}
-        </Column>
-        <Column emptyText={t('No addresses found')} headerText={t('next up')}>
-          {(electedFiltered.length !== 0 || nextFiltered.length !== 0) && (
-            <>
-              {renderColumn(myAccounts, electedFiltered, t('intention'), false, filter, props)}
-              {renderColumn(myAccounts, nextFiltered, t('intention'), false, filter, props)}
-            </>
-          )}
-        </Column>
-      </Columar>
-    </div>
-  );
-}
-
-export default translate(CurrentList);
diff --git a/pioneer/packages/old-apps/app-staking/src/Overview/Summary.tsx b/pioneer/packages/old-apps/app-staking/src/Overview/Summary.tsx
deleted file mode 100644
index 5f9da001eb..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/Overview/Summary.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { DerivedStakingOverview } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import styled from 'styled-components';
-import SummarySession from '@polkadot/app-explorer/SummarySession';
-import { CardSummary, IdentityIcon, SummaryBox } from '@polkadot/react-components';
-
-import translate from '../translate';
-
-interface Props extends I18nProps {
-  allControllers: string[];
-  className?: string;
-  lastAuthors?: string[];
-  lastBlock?: string;
-  next: string[];
-  stakingOverview?: DerivedStakingOverview;
-}
-
-function Summary ({ className, lastAuthors, lastBlock, next, stakingOverview, style, t }: Props): React.ReactElement<Props> {
-  return (
-    <SummaryBox
-      className={className}
-      style={style}
-    >
-      <section>
-        {stakingOverview && (
-          <CardSummary label={t('validators')}>
-            {stakingOverview.validators.length}{`/${stakingOverview.validatorCount.toString()}`}
-          </CardSummary>
-        )}
-        {next && (
-          <CardSummary label={t('waiting')}>
-            {next.length}
-          </CardSummary>
-        )}
-      </section>
-      <section>
-        <CardSummary
-          className='validator--Summary-authors'
-          label={t('last block')}
-        >
-          {lastAuthors && lastAuthors.map((author): React.ReactNode => (
-            <IdentityIcon
-              className='validator--Account-block-icon'
-              key={author}
-              size={24}
-              value={author}
-            />
-          ))}
-          {lastBlock}
-        </CardSummary>
-      </section>
-      <section>
-        <SummarySession />
-      </section>
-    </SummaryBox>
-  );
-}
-
-export default translate(
-  styled(Summary)`
-    .validator--Account-block-icon {
-      margin-right: 0.75rem;
-      margin-top: -0.25rem;
-      vertical-align: middle;
-    }
-
-    .validator--Summary-authors {
-      .validator--Account-block-icon+.validator--Account-block-icon {
-        margin-left: -1.5rem;
-      }
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/app-staking/src/Overview/index.tsx b/pioneer/packages/old-apps/app-staking/src/Overview/index.tsx
deleted file mode 100644
index 8ed55dab9f..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/Overview/index.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps } from '@polkadot/react-components/types';
-import { ComponentProps } from '../types';
-
-import React, { useContext, useEffect, useState } from 'react';
-import { ApiContext } from '@polkadot/react-api';
-import { BlockAuthorsContext } from '@polkadot/react-query';
-
-import CurrentList from './CurrentList';
-import Summary from './Summary';
-
-interface Props extends BareProps, ComponentProps {}
-
-export default function Overview ({
-  allControllers,
-  allStashes,
-  recentlyOnline,
-  stakingOverview
-}: Props): React.ReactElement<Props> {
-  const { isSubstrateV2 } = useContext(ApiContext);
-  const { byAuthor, lastBlockAuthors, lastBlockNumber } = useContext(BlockAuthorsContext);
-  const [next, setNext] = useState<string[]>([]);
-  const validators = stakingOverview && stakingOverview.validators;
-
-  useEffect((): void => {
-    validators &&
-      setNext(
-        isSubstrateV2
-          // this is a V2 node currentValidators is a list of stashes
-          ? allStashes.filter((address): boolean => !validators.includes(address as any))
-          // this is a V1 node currentValidators is a list of controllers
-          : allControllers.filter((address): boolean => !validators.includes(address as any))
-      );
-  }, [allControllers, allStashes, validators]);
-
-  return (
-    <div className="staking--Overview">
-      <Summary
-        allControllers={allControllers}
-        lastBlock={lastBlockNumber}
-        lastAuthors={lastBlockAuthors}
-        next={next}
-        stakingOverview={stakingOverview}
-      />
-      <CurrentList
-        authorsMap={byAuthor}
-        lastAuthors={lastBlockAuthors}
-        next={next}
-        recentlyOnline={recentlyOnline}
-        stakingOverview={stakingOverview}
-      />
-    </div>
-  );
-}
diff --git a/pioneer/packages/old-apps/app-staking/src/index.tsx b/pioneer/packages/old-apps/app-staking/src/index.tsx
deleted file mode 100644
index 908656f8d9..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/index.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { DerivedHeartbeats, DerivedStakingOverview } from '@polkadot/api-derive/types';
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
-import { ApiProps } from '@polkadot/react-api/types';
-import { AccountId, BlockNumber } from '@polkadot/types/interfaces';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-import { ComponentProps } from './types';
-
-import React from 'react';
-import { Route, Switch } from 'react-router';
-import styled from 'styled-components';
-import { Option } from '@polkadot/types';
-import { HelpOverlay } from '@polkadot/react-components';
-import Tabs from '@polkadot/react-components/Tabs';
-import { withCalls, withMulti, withObservable } from '@polkadot/react-api';
-import accountObservable from '@polkadot/ui-keyring/observable/accounts';
-
-import Accounts from './Actions/Accounts';
-import basicMd from './md/basic.md';
-import Overview from './Overview';
-import translate from './translate';
-
-interface Props extends AppProps, ApiProps, I18nProps {
-  allAccounts?: SubjectInfo;
-  allStashesAndControllers?: [string[], string[]];
-  bestNumber?: BlockNumber;
-  recentlyOnline?: DerivedHeartbeats;
-  stakingOverview?: DerivedStakingOverview;
-}
-
-const EMPY_ACCOUNTS: string[] = [];
-const EMPTY_ALL: [string[], string[]] = [EMPY_ACCOUNTS, EMPY_ACCOUNTS];
-
-function App ({
-  allAccounts,
-  allStashesAndControllers: [allStashes, allControllers] = EMPTY_ALL,
-  basePath,
-  className,
-  recentlyOnline,
-  stakingOverview,
-  t
-}: Props): React.ReactElement<Props> {
-  const _renderComponent = (Component: React.ComponentType<ComponentProps>): (() => React.ReactNode) => {
-    // eslint-disable-next-line react/display-name
-    return (): React.ReactNode => {
-      if (!allAccounts) {
-        return null;
-      }
-
-      return (
-        <Component
-          allAccounts={allAccounts}
-          allControllers={allControllers}
-          allStashes={allStashes}
-          recentlyOnline={recentlyOnline}
-          stakingOverview={stakingOverview}
-        />
-      );
-    };
-  };
-
-  const hasAccount = allAccounts && Object.keys(allAccounts).length;
-
-  return (
-    <main className={`staking--App ${className}`}>
-      <HelpOverlay
-        md={basicMd}
-        style={{
-          top: hasAccount ? '5.25rem' : 0
-        }}
-      />
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={[
-            {
-              isRoot: true,
-              name: 'overview',
-              text: t('Staking overview')
-            },
-            {
-              name: 'actions',
-              text: t('Account actions')
-            }
-          ]}
-        />
-      </header>
-      <Switch>
-        <Route path={`${basePath}/actions`} render={_renderComponent(Accounts)} />
-        <Route render={_renderComponent(Overview)} />
-      </Switch>
-    </main>
-  );
-}
-
-export default withMulti(
-  styled(App)`
-    .rx--updated {
-      background: transparent !important;
-    }
-  `,
-  translate,
-  withCalls<Props>(
-    ['derive.imOnline.receivedHeartbeats', { propName: 'recentlyOnline' }],
-    [
-      'derive.staking.controllers',
-      {
-        propName: 'allStashesAndControllers',
-        transform: ([stashes, controllers]: [AccountId[], Option<AccountId>[]]): [string[], string[]] => [
-          stashes.map((accountId): string => accountId.toString()),
-          controllers.filter((optId): boolean => optId.isSome).map((accountId): string => accountId.unwrap().toString())
-        ]
-      }
-    ],
-    ['derive.staking.overview', { propName: 'stakingOverview' }]
-  ),
-  withObservable(accountObservable.subject, { propName: 'allAccounts' })
-);
diff --git a/pioneer/packages/old-apps/app-staking/src/md/basic.md b/pioneer/packages/old-apps/app-staking/src/md/basic.md
deleted file mode 100644
index 246a25969e..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/md/basic.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# Staking
-
-Welcome to the staking module. Here you can see an overview of all the validators on the network and participate in the network as either a validator (running a node that helps secure the network), or a nominator (adding funds to help secure the network).
-
-Validators and nominators earn rewards at the end of an era: the rewards are split between the validators and nominators for that validator, in proportion to the amount bonded by each individual.
-
-# Bonding
-
-Bonding funds is the first step that either a validator or nominator performs. It locks up a portion of funds that is used to secure the network. These funds are placed at risk, i.e. you can be slashed and lose a portion if the validator node misbehaves. Validators and nominators share both rewards and the slashing effects. Choosing a well behaving validator to nominate is crucial.
-
-For bonding (with an intention to either validate or nominate), you need to have 2 accounts -
-
-- **Stash** This is the primary account that holds the funds and has a portion bonded for participation;
-- **Controller** This is used to control the operation of the validator or nominator, switching between validating, nominating and idle; (It only needs enough funds to send transactions when actions are taken)
-
-To bond, you select the stash account, bond from it and designate a controller. Additionally you can select the amount of funds to bond and set your payout preferences.
-
-# Nominating
-
-Nomination (using the controller account as set as part of the bonding) is a process of selecting a number of validators (or potential validators) that you deem trustworthy. Once the validators are selected, the bonded value is assigned to participate in the network security.
-
-At any point you could stop nominating (using the controller) or top up the funds bonded (from the stash).
-
-# Validating
-
-Validators run nodes that author blocks. The primary requirement here is the ability to run a node that is available 24/7 and is well-connected to the network.
-
-In addition to the stash and controller account described above, a validator has to indicate an additional account called `Session key` -
-
-- **Session** The seed of this account should be passed to the node using the `--key` parameter. The session account does not need to have funds as it does not need to send any transaction. The best practice is to create a dedicated account to be used as session account. Although a single account can theoretically be used as both session and controller, it is not recommended to do so. Having a dedicated session account would prevent the theft of funds should the validator node be compromised and the `--key` leaked.
-
-As with the nomination operations, you can stop validation at any time using the controller. (Be it for maintenance, upgrades, or any other reason)
diff --git a/pioneer/packages/old-apps/app-staking/src/translate.ts b/pioneer/packages/old-apps/app-staking/src/translate.ts
deleted file mode 100644
index 2daa0fb9cb..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/translate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { withTranslation } from 'react-i18next';
-
-export default withTranslation(['app-staking']);
diff --git a/pioneer/packages/old-apps/app-staking/src/types.ts b/pioneer/packages/old-apps/app-staking/src/types.ts
deleted file mode 100644
index a98590ab82..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/types.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { DerivedFees, DerivedBalances, DerivedHeartbeats, DerivedStakingOverview } from '@polkadot/api-derive/types';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-import { EraPoints } from '@polkadot/types/interfaces';
-import { u32 } from '@polkadot/types';
-
-export type Nominators = Record<string, string[]>;
-
-export interface DerivedStakingOverviewExt {
-  currentElected: string[];
-  eraPointsEarned: EraPoints;
-  validatorCount: u32;
-}
-
-export interface ComponentProps {
-  allAccounts?: SubjectInfo;
-  allControllers: string[];
-  allStashes: string[];
-  recentlyOnline?: DerivedHeartbeats;
-  stakingOverview?: DerivedStakingOverview;
-}
-
-export interface CalculateBalanceProps {
-  balances_fees?: DerivedFees;
-  balances_all?: DerivedBalances;
-}
-
-export type AccountFilter = 'all' | 'controller' | 'session' | 'stash' | 'unbonded';
-
-export type ValidatorFilter = 'all' | 'hasNominators' | 'noNominators' | 'hasWarnings' | 'noWarnings' | 'iNominated' | 'nextSet';
diff --git a/pioneer/packages/old-apps/app-staking/src/unsafeChains.ts b/pioneer/packages/old-apps/app-staking/src/unsafeChains.ts
deleted file mode 100644
index 05b7c38f39..0000000000
--- a/pioneer/packages/old-apps/app-staking/src/unsafeChains.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-export const UNSAFE_CHAINS = ['Development', 'Kusama CC1', 'Kusama CC2', 'Kusama'];
-
-export default function detectUnsafe (chain: Text | string): boolean {
-  return UNSAFE_CHAINS.includes(chain.toString());
-}
diff --git a/pioneer/packages/old-apps/app-storage/LICENSE b/pioneer/packages/old-apps/app-storage/LICENSE
deleted file mode 100644
index 0d381b2e97..0000000000
--- a/pioneer/packages/old-apps/app-storage/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/pioneer/packages/old-apps/app-storage/README.md b/pioneer/packages/old-apps/app-storage/README.md
deleted file mode 100644
index 3b61e3c40d..0000000000
--- a/pioneer/packages/old-apps/app-storage/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# @polkadot/app-storage
diff --git a/pioneer/packages/old-apps/app-storage/package.json b/pioneer/packages/old-apps/app-storage/package.json
deleted file mode 100644
index 2ec228baaa..0000000000
--- a/pioneer/packages/old-apps/app-storage/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "name": "@polkadot/app-storage",
-  "version": "0.37.0-beta.63",
-  "main": "index.js",
-  "repository": "https://github.com/polkadot-js/apps.git",
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "contributors": [],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/react-components": "^0.37.0-beta.63",
-    "@polkadot/react-params": "^0.37.0-beta.63"
-  }
-}
diff --git a/pioneer/packages/old-apps/app-storage/src/Queries.tsx b/pioneer/packages/old-apps/app-storage/src/Queries.tsx
deleted file mode 100644
index 34fb7d98b8..0000000000
--- a/pioneer/packages/old-apps/app-storage/src/Queries.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-storage authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps } from '@polkadot/react-components/types';
-import { QueryTypes } from './types';
-
-import React from 'react';
-
-import Query from './Query';
-
-interface Props extends BareProps {
-  onRemove: (id: number) => void;
-  value?: QueryTypes[];
-}
-
-export default function Queries ({ onRemove, value }: Props): React.ReactElement<Props> | null {
-  if (!value || !value.length) {
-    return null;
-  }
-
-  return (
-    <section className='storage--Queries'>
-      {value.map((query): React.ReactNode =>
-        <Query
-          key={query.id}
-          onRemove={onRemove}
-          value={query}
-        />
-      )}
-    </section>
-  );
-}
diff --git a/pioneer/packages/old-apps/app-storage/src/Query.tsx b/pioneer/packages/old-apps/app-storage/src/Query.tsx
deleted file mode 100644
index b36ab03f55..0000000000
--- a/pioneer/packages/old-apps/app-storage/src/Query.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-storage authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { RenderFn, DefaultProps, ComponentRenderer } from '@polkadot/react-api/with/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { ConstValue } from '@polkadot/react-components/InputConsts/types';
-import { QueryTypes, StorageEntryPromise, StorageModuleQuery } from './types';
-
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { Button, Labelled } from '@polkadot/react-components';
-import { withCallDiv } from '@polkadot/react-api';
-import valueToText from '@polkadot/react-params/valueToText';
-import { Compact, Data, Option } from '@polkadot/types';
-import { isU8a, u8aToHex, u8aToString } from '@polkadot/util';
-
-import translate from './translate';
-
-interface Props extends I18nProps {
-  onRemove: (id: number) => void;
-  value: QueryTypes;
-}
-
-interface CacheInstance {
-  Component: React.ComponentType<any>;
-  render: RenderFn;
-  refresh: (swallowErrors: boolean, contentShorten: boolean) => React.ComponentType<any>;
-}
-
-const cache: CacheInstance[] = [];
-
-function keyToName (isConst: boolean, _key: Uint8Array | StorageEntryPromise | ConstValue): string {
-  if (isConst) {
-    const key = _key as ConstValue;
-
-    return `const ${key.section}.${key.method}`;
-  }
-
-  const key = _key as Uint8Array | StorageEntryPromise;
-
-  if (isU8a(key)) {
-    const u8a = Compact.stripLengthPrefix(key);
-
-    // If the string starts with `:`, handle it as a pure string
-    return u8a[0] === 0x3a
-      ? u8aToString(u8a)
-      : u8aToHex(u8a);
-  }
-
-  return `${key.creator.section}.${key.creator.method}`;
-}
-
-function typeToString (key: StorageEntryPromise): string {
-  const type = key.creator.meta.type.isDoubleMap
-    ? key.creator.meta.type.asDoubleMap.value.toString()
-    : key.creator.meta.type.toString();
-
-  return key.creator.meta.modifier.isOptional
-    ? `Option<${type}>`
-    : type;
-}
-
-function createComponent (type: string, Component: React.ComponentType<any>, defaultProps: DefaultProps, renderHelper: ComponentRenderer): { Component: React.ComponentType<any>; render: (createComponent: RenderFn) => React.ComponentType<any>; refresh: (swallowErrors: boolean, contentShorten: boolean) => React.ComponentType<any> } {
-  return {
-    Component,
-    // In order to replace the default component during runtime we can provide a RenderFn to create a new 'plugged' component
-    render: (createComponent: RenderFn): React.ComponentType<any> =>
-      renderHelper(createComponent, defaultProps),
-    // In order to modify the parameters which are used to render the default component, we can use this method
-    refresh: (swallowErrors: boolean, contentShorten: boolean): React.ComponentType<any> =>
-      renderHelper(
-        (value: any): React.ReactNode => valueToText(type, value, swallowErrors, contentShorten),
-        defaultProps
-      )
-  };
-}
-
-function getCachedComponent (query: QueryTypes): CacheInstance {
-  const { id, isConst, key, params = [] } = query as StorageModuleQuery;
-
-  if (!cache[id]) {
-    let renderHelper;
-    let type: string;
-
-    if (isConst) {
-      const { meta, method, section } = key as unknown as ConstValue;
-
-      renderHelper = withCallDiv(`consts.${section}.${method}`);
-      type = meta.type.toString();
-    } else {
-      const values: any[] = params.map(({ value }): any => value);
-
-      if (isU8a(key)) {
-        // subscribe to the raw key here
-        renderHelper = withCallDiv('rpc.state.subscribeStorage', {
-          paramName: 'params',
-          paramValid: true,
-          params: [[key]],
-          transform: ([data]: Option<Data>[]): Option<Data> => data,
-          withIndicator: true
-        });
-      } else {
-        // render function to create an element for the query results which is plugged to the api
-        renderHelper = withCallDiv('subscribe', {
-          paramName: 'params',
-          paramValid: true,
-          params: [key, ...values],
-          withIndicator: true
-        });
-      }
-
-      type = key.creator && key.creator.meta
-        ? typeToString(key)
-        : 'Data';
-    }
-
-    const defaultProps = { className: 'ui--output' };
-    const Component = renderHelper(
-      // By default we render a simple div node component with the query results in it
-      (value: any): React.ReactNode => valueToText(type, value, true, true),
-      defaultProps
-    );
-
-    cache[query.id] = createComponent(type, Component, defaultProps, renderHelper);
-  }
-
-  return cache[id];
-}
-
-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);
-  const [spread, setSpread] = useState<Record<number, boolean>>({});
-
-  useEffect((): void => {
-    setComponent(getCachedComponent(value));
-    // setInputs(
-    //   isU8a(value.key)
-    //     ? []
-    //     // FIXME We need to render the actual key params
-    //     // const { key, params } = value;
-    //     // const inputs = key.params.map(({ name, type }, index) => (
-    //     //   <span key={`param_${name}_${index}`}>
-    //     //     {name}={valueToText(type, params[index].value)}
-    //     //   </span>
-    //     // ));
-    //     : []
-    // );
-    setIsSpreadable(
-      (value.key as StorageEntryPromise).creator &&
-      (value.key as StorageEntryPromise).creator.meta &&
-      ['Bytes', 'Data'].includes((value.key as StorageEntryPromise).creator.meta.type.toString())
-    );
-  }, [value]);
-
-  const { id, isConst, key } = value;
-  const type = isConst
-    ? (key as unknown as ConstValue).meta.type.toString()
-    : isU8a(key)
-      ? 'Data'
-      : typeToString(key as StorageEntryPromise);
-
-  if (!Component) {
-    return null;
-  }
-
-  const _spreadHandler = (id: number): () => void => {
-    return (): void => {
-      cache[id].Component = cache[id].refresh(true, !!spread[id]);
-      spread[id] = !spread[id];
-
-      setComponent(cache[id]);
-      setSpread({ ...spread });
-    };
-  };
-  const _onRemove = (): void => {
-    delete cache[value.id];
-
-    onRemove(value.id);
-  };
-
-  return (
-    <div className={`storage--Query storage--actionrow ${className}`}>
-      <div className='storage--actionrow-value'>
-        <Labelled
-          label={
-            <div className='ui--Param-text'>
-              {keyToName(isConst, key)}: {type}
-            </div>
-          }
-        >
-          <Component />
-        </Labelled>
-      </div>
-      <div className='storage--actionrow-buttons'>
-        <div className='container'>
-          {isSpreadable && (
-            <Button
-              icon='ellipsis horizontal'
-              key='spread'
-              onClick={_spreadHandler(id)}
-            />
-          )}
-          <Button
-            icon='close'
-            isNegative
-            key='close'
-            onClick={_onRemove}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default translate(
-  styled(Query)`
-    margin-bottom: 0.25em;
-
-    label {
-      text-transform: none !important;
-    }
-
-    .ui.disabled.dropdown.selection {
-      color: #aaa;
-      opacity: 1;
-    }
-
-    .ui--IdentityIcon {
-      margin: -10px 0;
-      vertical-align: middle;
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/app-storage/src/Selection/Consts.tsx b/pioneer/packages/old-apps/app-storage/src/Selection/Consts.tsx
deleted file mode 100644
index 61480be0b2..0000000000
--- a/pioneer/packages/old-apps/app-storage/src/Selection/Consts.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-storage authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ConstantCodec } from '@polkadot/api-metadata/consts/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { ConstValue } from '@polkadot/react-components/InputConsts/types';
-import { ComponentProps } from '../types';
-
-import React, { useContext, useState } from 'react';
-import { ApiContext } from '@polkadot/react-api';
-import { Button, InputConsts } from '@polkadot/react-components';
-
-import translate from '../translate';
-
-interface Props extends ComponentProps, I18nProps {}
-
-function Consts ({ onAdd, t }: Props): React.ReactElement<Props> {
-  const { api } = useContext(ApiContext);
-  const [defaultValue] = useState<ConstValue>((): ConstValue => {
-    const section = Object.keys(api.consts)[0];
-    const method = Object.keys(api.consts[section])[0];
-
-    return {
-      meta: (api.consts[section][method] as ConstantCodec).meta,
-      method,
-      section
-    };
-  });
-  const [value, setValue] = useState(defaultValue);
-
-  const _onAdd = (): void => onAdd({ isConst: true, key: value });
-
-  const { method, section } = value;
-  const meta = (api.consts[section][method] as ConstantCodec).meta;
-
-  return (
-    <section className='storage--actionrow'>
-      <div className='storage--actionrow-value'>
-        <InputConsts
-          defaultValue={defaultValue}
-          label={t('selected constant query')}
-          onChange={setValue}
-          help={meta && meta.documentation && meta.documentation.join(' ')}
-        />
-      </div>
-      <div className='storage--actionrow-buttons'>
-        <Button
-          icon='plus'
-          isPrimary
-          onClick={_onAdd}
-        />
-      </div>
-    </section>
-  );
-}
-
-export default translate(Consts);
diff --git a/pioneer/packages/old-apps/app-storage/src/Selection/Modules.tsx b/pioneer/packages/old-apps/app-storage/src/Selection/Modules.tsx
deleted file mode 100644
index f1ae9487db..0000000000
--- a/pioneer/packages/old-apps/app-storage/src/Selection/Modules.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-storage authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { TypeDef } from '@polkadot/types/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { RawParams } from '@polkadot/react-params/types';
-import { ComponentProps, StorageEntryPromise } from '../types';
-
-import React, { useContext, useState } from 'react';
-import { getTypeDef } from '@polkadot/types';
-import { Button, InputStorage } from '@polkadot/react-components';
-import Params from '@polkadot/react-params';
-import { ApiContext } from '@polkadot/react-api';
-import { isNull, isUndefined } from '@polkadot/util';
-
-import translate from '../translate';
-
-interface Props extends ComponentProps, I18nProps {}
-
-type ParamsType = { type: TypeDef }[];
-
-function areParamsValid (values: RawParams): boolean {
-  return values.reduce(
-    (isValid: boolean, value): boolean => (
-      isValid &&
-      !isUndefined(value) &&
-      !isUndefined(value.value) &&
-      value.isValid),
-    true
-  );
-}
-
-function Modules ({ onAdd, t }: Props): React.ReactElement<Props> {
-  const { api } = useContext(ApiContext);
-  const [{ defaultValues, isLinked, key, params }, setKey] = useState<{ defaultValues: RawParams | undefined | null; isLinked: boolean; key: StorageEntryPromise; params: ParamsType }>({ defaultValues: undefined, isLinked: false, key: api.query.timestamp.now, params: [] });
-  const [{ isValid, values }, setValues] = useState<{ isValid: boolean; values: RawParams }>({ isValid: true, values: [] });
-
-  const _onAdd = (): void => {
-    isValid && onAdd({
-      isConst: false,
-      key,
-      params: values.filter(({ value }): boolean => !isLinked || !isNull(value))
-    });
-  };
-  const _onChangeValues = (values: RawParams): void => {
-    setValues({
-      isValid: (
-        key.creator.meta.type.isDoubleMap
-          ? values.length === 2
-          : values.length === (key.creator.meta.type.isMap ? 1 : 0)
-      ) && areParamsValid(values),
-      values
-    });
-  };
-  const _onChangeKey = (key: StorageEntryPromise): void => {
-    const isMap = key.creator.meta.type.isMap;
-    const isLinked = isMap && key.creator.meta.type.asMap.linked.isTrue;
-
-    setKey({
-      defaultValues: key.creator.section === 'session' && key.creator.meta.type.isDoubleMap
-        ? [{ isValid: true, value: api.consts.session.dedupKeyPrefix.toHex() }]
-        : null,
-      isLinked,
-      key,
-      params: key.creator.meta.type.isDoubleMap
-        ? [
-          { type: getTypeDef(key.creator.meta.type.asDoubleMap.key1.toString()) },
-          { type: getTypeDef(key.creator.meta.type.asDoubleMap.key2.toString()) }
-        ]
-        : isMap
-          ? [{
-            type: getTypeDef(
-              isLinked
-                ? `Option<${key.creator.meta.type.asMap.key.toString()}>`
-                : key.creator.meta.type.asMap.key.toString()
-            )
-          }]
-          : []
-    });
-
-    _onChangeValues([]);
-  };
-
-  const { creator: { method, section, meta } } = key;
-
-  return (
-    <section className='storage--actionrow'>
-      <div className='storage--actionrow-value'>
-        <InputStorage
-          defaultValue={api.query.timestamp.now}
-          label={t('selected state query')}
-          onChange={_onChangeKey}
-          help={meta && meta.documentation && meta.documentation.join(' ')}
-        />
-        <Params
-          key={`${section}.${method}:params` /* force re-render on change */}
-          onChange={_onChangeValues}
-          onEnter={_onAdd}
-          params={params}
-          values={defaultValues}
-        />
-      </div>
-      <div className='storage--actionrow-buttons'>
-        <Button
-          icon='plus'
-          isDisabled={!isValid}
-          isPrimary
-          onClick={_onAdd}
-        />
-      </div>
-    </section>
-  );
-}
-
-export default translate(Modules);
diff --git a/pioneer/packages/old-apps/app-storage/src/Selection/Raw.tsx b/pioneer/packages/old-apps/app-storage/src/Selection/Raw.tsx
deleted file mode 100644
index 0d97cf1033..0000000000
--- a/pioneer/packages/old-apps/app-storage/src/Selection/Raw.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-storage authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { ComponentProps } from '../types';
-
-import React, { useState } from 'react';
-import { Button, Input } from '@polkadot/react-components';
-
-import translate from '../translate';
-import { u8aToU8a } from '@polkadot/util';
-import { Compact } from '@polkadot/types';
-
-interface Props extends ComponentProps, I18nProps {}
-
-function Raw ({ onAdd, t }: Props): React.ReactElement<Props> {
-  const [{ isValid, key }, setValue] = useState<{ isValid: boolean; key: Uint8Array }>({ isValid: false, key: new Uint8Array([]) });
-
-  const _onAdd = (): void => {
-    isValid && onAdd({ isConst: false, key });
-  };
-  const _onChangeKey = (key: string): void => {
-    const u8a = u8aToU8a(key);
-    const isValid = u8a.length !== 0;
-
-    setValue({
-      isValid,
-      key: Compact.addLengthPrefix(u8a)
-    });
-  };
-
-  return (
-    <section className='storage--actionrow'>
-      <div className='storage--actionrow-value'>
-        <Input
-          autoFocus
-          label={t('hex-encoded storage key')}
-          onChange={_onChangeKey}
-          onEnter={_onAdd}
-        />
-      </div>
-      <div className='storage--actionrow-buttons'>
-        <Button
-          icon='plus'
-          isDisabled={!isValid}
-          isPrimary
-          onClick={_onAdd}
-        />
-      </div>
-    </section>
-  );
-}
-
-export default translate(Raw);
diff --git a/pioneer/packages/old-apps/app-storage/src/Selection/index.tsx b/pioneer/packages/old-apps/app-storage/src/Selection/index.tsx
deleted file mode 100644
index 272a20a318..0000000000
--- a/pioneer/packages/old-apps/app-storage/src/Selection/index.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-storage authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { ComponentProps, QueryTypes, ParitalQueryTypes } from '../types';
-
-import React, { useContext } from 'react';
-import { Route, Switch } from 'react-router';
-import { ApiContext } from '@polkadot/react-api';
-import { Tabs } from '@polkadot/react-components';
-
-import Consts from './Consts';
-import Modules from './Modules';
-import Raw from './Raw';
-import translate from '../translate';
-
-interface Props extends I18nProps {
-  basePath: string;
-  onAdd: (query: QueryTypes) => void;
-}
-
-let id = -1;
-
-function Selection ({ basePath, onAdd, t }: Props): React.ReactElement<Props> {
-  const { isSubstrateV2 } = useContext(ApiContext);
-  const _onAdd = (query: ParitalQueryTypes): void => onAdd({ ...query, id: ++id });
-  const _renderComponent = (Component: React.ComponentType<ComponentProps>): () => React.ReactNode =>
-    // eslint-disable-next-line react/display-name
-    (): React.ReactNode => <Component onAdd={_onAdd} />;
-
-  return (
-    <>
-      <header>
-        <Tabs
-          basePath={basePath}
-          hidden={
-            isSubstrateV2
-              ? []
-              : ['constants']
-          }
-          items={[
-            {
-              isRoot: true,
-              name: 'modules',
-              text: t('Storage')
-            },
-            {
-              name: 'constants',
-              text: t('Constants')
-            },
-            {
-              name: 'raw',
-              text: t('Raw storage')
-            }
-          ]}
-        />
-      </header>
-      <Switch>
-        <Route path={`${basePath}/constants`} render={_renderComponent(Consts)} />
-        <Route path={`${basePath}/raw`} render={_renderComponent(Raw)} />
-        <Route render={_renderComponent(Modules)} />
-      </Switch>
-    </>
-  );
-}
-
-export default translate(Selection);
diff --git a/pioneer/packages/old-apps/app-storage/src/index.css b/pioneer/packages/old-apps/app-storage/src/index.css
deleted file mode 100644
index 8419bbb037..0000000000
--- a/pioneer/packages/old-apps/app-storage/src/index.css
+++ /dev/null
@@ -1,32 +0,0 @@
-/* Copyright 2017-2019 @polkadot/app-storage authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-.storage--actionrow {
-  align-items: center;
-  display: flex;
-
-  .button {
-    margin: 0.25rem;
-  }
-
-  &.head {
-    flex: 1 1 100%;
-    margin: 0 auto;
-    max-width: 620px;
-  }
-}
-
-.storage--actionrow-value {
-  flex: 1;
-  min-width: 0;
-
-  .ui--output {
-    word-break: break-all;
-  }
-}
-
-.storage--actionrow-buttons {
-  flex: 0;
-  padding: 0 0.25rem;
-}
diff --git a/pioneer/packages/old-apps/app-storage/src/index.tsx b/pioneer/packages/old-apps/app-storage/src/index.tsx
deleted file mode 100644
index f17eb6302c..0000000000
--- a/pioneer/packages/old-apps/app-storage/src/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-storage authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
-import { QueryTypes } from './types';
-
-import './index.css';
-
-import React, { useState } from 'react';
-
-import Queries from './Queries';
-import Selection from './Selection';
-import translate from './translate';
-
-interface Props extends AppProps, I18nProps {}
-
-function StorageApp ({ basePath }: Props): React.ReactElement<Props> {
-  const [queue, setQueue] = useState<QueryTypes[]>([]);
-
-  const _onAdd = (query: QueryTypes): void => setQueue([query, ...queue]);
-  const _onRemove = (id: number): void => setQueue(queue.filter((item): boolean => item.id !== id));
-
-  return (
-    <main className='storage--App'>
-      <Selection
-        basePath={basePath}
-        onAdd={_onAdd}
-      />
-      <Queries
-        onRemove={_onRemove}
-        value={queue}
-      />
-    </main>
-  );
-}
-
-export default translate(StorageApp);
diff --git a/pioneer/packages/old-apps/app-storage/src/translate.ts b/pioneer/packages/old-apps/app-storage/src/translate.ts
deleted file mode 100644
index 45be9cb81d..0000000000
--- a/pioneer/packages/old-apps/app-storage/src/translate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-storage authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { withTranslation } from 'react-i18next';
-
-export default withTranslation(['app-storage']);
diff --git a/pioneer/packages/old-apps/app-storage/src/types.ts b/pioneer/packages/old-apps/app-storage/src/types.ts
deleted file mode 100644
index f1b492a2bd..0000000000
--- a/pioneer/packages/old-apps/app-storage/src/types.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-storage authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { StorageEntryBase } from '@polkadot/api/types';
-import { ConstValue } from '@polkadot/react-components/InputConsts/types';
-import { RawParams } from '@polkadot/react-params/types';
-
-export type StorageEntryPromise = StorageEntryBase<'promise', any>;
-
-interface Base {
-  isConst: boolean;
-}
-
-interface IdQuery extends Base {
-  id: number;
-}
-
-export interface PartialModuleQuery extends Base {
-  key: StorageEntryPromise;
-  params: RawParams;
-}
-
-export type StorageModuleQuery = PartialModuleQuery & IdQuery;
-
-export interface PartialRawQuery extends Base {
-  key: Uint8Array;
-}
-
-export type StorageRawQuery = PartialRawQuery & IdQuery;
-
-export interface PartialConstQuery extends Base {
-  key: ConstValue;
-}
-
-export type ConstQuery = PartialConstQuery & IdQuery;
-
-export type QueryTypes = StorageModuleQuery | StorageRawQuery | ConstQuery;
-
-export type ParitalQueryTypes = PartialModuleQuery | PartialRawQuery | PartialConstQuery;
-
-export interface ComponentProps {
-  onAdd: (query: ParitalQueryTypes) => void;
-}
diff --git a/pioneer/packages/old-apps/app-sudo/LICENSE b/pioneer/packages/old-apps/app-sudo/LICENSE
deleted file mode 100644
index 0d381b2e97..0000000000
--- a/pioneer/packages/old-apps/app-sudo/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/pioneer/packages/old-apps/app-sudo/README.md b/pioneer/packages/old-apps/app-sudo/README.md
deleted file mode 100644
index 7ace253d72..0000000000
--- a/pioneer/packages/old-apps/app-sudo/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# @polkadot/app-sudo
diff --git a/pioneer/packages/old-apps/app-sudo/package.json b/pioneer/packages/old-apps/app-sudo/package.json
deleted file mode 100644
index 23d8ba1ea2..0000000000
--- a/pioneer/packages/old-apps/app-sudo/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "name": "@polkadot/app-sudo",
-  "version": "0.37.0-beta.63",
-  "description": "A basic app that shows the ropes on customisation",
-  "main": "index.js",
-  "scripts": {},
-  "author": "Keith Ingram <keith@parity.io>",
-  "maintainers": [
-    "Keith Ingram <keith@parity.io>",
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/react-components": "^0.37.0-beta.63"
-  }
-}
diff --git a/pioneer/packages/old-apps/app-sudo/src/SetKey.tsx b/pioneer/packages/old-apps/app-sudo/src/SetKey.tsx
deleted file mode 100644
index f25b68cf02..0000000000
--- a/pioneer/packages/old-apps/app-sudo/src/SetKey.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-123code authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React, { useEffect, useState } from 'react';
-import { AddressMini, Icon, InputAddress, Labelled, TxButton } from '@polkadot/react-components';
-import { ComponentProps } from './types';
-
-import styled from 'styled-components';
-
-import translate from './translate';
-
-interface Props extends I18nProps, ComponentProps {}
-
-function SetKey ({ allAccounts, className, isMine, sudoKey, t }: Props): React.ReactElement<Props> {
-  const [selected, setSelected] = useState<string | null>(null);
-
-  useEffect((): void => {
-    if (sudoKey && !selected) {
-      setSelected(sudoKey);
-    }
-  }, [selected, sudoKey]);
-
-  const willLose = isMine &&
-    !!Object.keys(allAccounts).length &&
-    !!selected &&
-    selected !== sudoKey &&
-    !Object.keys(allAccounts).find((s): boolean => s === selected);
-
-  return (
-    <section>
-      <section className={`${className} ui--row`}>
-        {isMine
-          ? (
-            <>
-              <InputAddress
-                className='sudoInputAddress'
-                value={selected}
-                label={t('sudo key')}
-                isInput={true}
-                onChange={setSelected}
-                type='all'
-              />
-              <TxButton
-                accountId={sudoKey}
-                isDisabled={!isMine || sudoKey === selected}
-                isPrimary
-                label={t('Reassign')}
-                icon='sign-in'
-                params={[selected]}
-                tx='sudo.setKey'
-              />
-            </>
-          )
-          : (
-            <Labelled
-              className='ui--Dropdown sudoLabelled'
-              label={t('sudo key')}
-              withLabel
-            >
-              <AddressMini value={sudoKey} />
-            </Labelled>
-          )
-        }
-      </section>
-      {willLose && (
-        <article className='warning padded'>
-          <div>
-            <Icon name='warning' />
-            {t('You will no longer have sudo access')}
-          </div>
-        </article>
-      )}
-    </section>
-  );
-}
-
-export default translate(
-  styled(SetKey)`
-    align-items: flex-end;
-    justify-content: center;
-
-    .summary {
-      text-align: center;
-    }
-
-    .sudoInputAddress {
-      margin: -0.25rem 0.5rem -0.25rem 0;
-    }
-
-    .sudoLabelled {
-      align-items: center;
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/app-sudo/src/Sudo.tsx b/pioneer/packages/old-apps/app-sudo/src/Sudo.tsx
deleted file mode 100644
index e919ec30cf..0000000000
--- a/pioneer/packages/old-apps/app-sudo/src/Sudo.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-123code authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Call } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
-import { ApiProps } from '@polkadot/react-api/types';
-import { ComponentProps } from './types';
-
-import React from 'react';
-import { createType } from '@polkadot/types';
-import { Button, Icon, Extrinsic, TxButton, TxComponent } from '@polkadot/react-components';
-import { withApi, withMulti } from '@polkadot/react-api';
-
-import translate from './translate';
-
-interface Props extends I18nProps, ApiProps, ComponentProps {
-  onChange: (accountId?: string) => void;
-}
-
-interface State {
-  method: Call | null;
-  isValid: boolean;
-}
-
-class Propose extends TxComponent<Props, State> {
-  public state: State = {
-    method: null,
-    isValid: false
-  };
-
-  public render (): React.ReactNode {
-    const { apiDefaultTxSudo, isMine, sudoKey, t } = this.props;
-    const { method, isValid } = this.state;
-
-    return isMine
-      ? (
-        <section>
-          <Extrinsic
-            defaultValue={apiDefaultTxSudo}
-            label={t('submit the following change')}
-            onChange={this.onChangeExtrinsic}
-            onEnter={this.sendTx}
-          />
-          <br />
-          <Button.Group>
-            <TxButton
-              accountId={sudoKey}
-              label={t('Submit Sudo')}
-              icon='sign-in'
-              tx='sudo.sudo'
-              isDisabled={!method || !isValid}
-              params={method ? [createType('Proposal', method)] : []}
-              ref={this.button}
-            />
-          </Button.Group>
-        </section>
-      )
-      : (
-        <article className='error padded'>
-          <div>
-            <Icon name='ban' />
-            {t('You do not have access to the current sudo key')}
-          </div>
-        </article>
-      );
-  }
-
-  private nextState (newState: Partial<State>): void {
-    this.setState(
-      (prevState: State): State => {
-        const { method = prevState.method } = newState;
-        const isValid = !!method;
-
-        return {
-          method,
-          isValid
-        };
-      }
-    );
-  }
-
-  private onChangeExtrinsic = (method?: Call): void => {
-    if (!method) {
-      return;
-    }
-
-    this.nextState({ method });
-  }
-}
-
-export default withMulti(
-  Propose,
-  translate,
-  withApi
-);
diff --git a/pioneer/packages/old-apps/app-sudo/src/index.tsx b/pioneer/packages/old-apps/app-sudo/src/index.tsx
deleted file mode 100644
index fe018a11e9..0000000000
--- a/pioneer/packages/old-apps/app-sudo/src/index.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/app-123code authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-import { ComponentProps } from './types';
-
-import React, { useEffect, useState } from 'react';
-import { Route, Switch } from 'react-router';
-import { Icon, Tabs } from '@polkadot/react-components';
-import { withCalls, withMulti, withObservable } from '@polkadot/react-api';
-import accountObservable from '@polkadot/ui-keyring/observable/accounts';
-
-import SetKey from './SetKey';
-import Sudo from './Sudo';
-
-import translate from './translate';
-
-interface Props extends AppProps, I18nProps {
-  allAccounts: SubjectInfo;
-  sudoKey?: string;
-}
-
-function App ({ allAccounts, basePath, sudoKey, t }: Props): React.ReactElement<Props> {
-  const [isMine, setIsMine] = useState(false);
-
-  useEffect((): void => {
-    setIsMine(
-      !!sudoKey && !!allAccounts && Object.keys(allAccounts).some((key): boolean => key === sudoKey)
-    );
-  }, [allAccounts, sudoKey]);
-
-  const _renderComponent = (Component: React.ComponentType<ComponentProps>): () => React.ReactNode => {
-    // eslint-disable-next-line react/display-name
-    return (): React.ReactNode => {
-      return (
-        <Component
-          allAccounts={allAccounts}
-          sudoKey={sudoKey}
-          isMine={isMine}
-        />
-      );
-    };
-  };
-
-  return (
-    <main>
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={[
-            {
-              isRoot: true,
-              name: 'index',
-              text: t('Sudo access')
-            },
-            {
-              name: 'key',
-              text: t('Set sudo key')
-            }
-          ]}
-        />
-      </header>
-      {isMine
-        ? (
-          <Switch>
-            <Route path={`${basePath}/key`} render={_renderComponent(SetKey)} />
-            <Route render={_renderComponent(Sudo)} />
-          </Switch>
-        )
-        : (
-          <article className='error padded'>
-            <div>
-              <Icon name='ban' />
-              {t('You do not have access to the current sudo key')}
-            </div>
-          </article>
-        )
-      }
-    </main>
-  );
-}
-
-export default withMulti(
-  App,
-  translate,
-  withCalls<Props>(
-    ['query.sudo.key', {
-      propName: 'sudoKey',
-      transform: (key): string =>
-        key.toString()
-    }]
-  ),
-  withObservable(accountObservable.subject, { propName: 'allAccounts' })
-);
diff --git a/pioneer/packages/old-apps/app-sudo/src/translate.ts b/pioneer/packages/old-apps/app-sudo/src/translate.ts
deleted file mode 100644
index 897160cbb5..0000000000
--- a/pioneer/packages/old-apps/app-sudo/src/translate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-123code authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { withTranslation } from 'react-i18next';
-
-export default withTranslation(['app-sudo']);
diff --git a/pioneer/packages/old-apps/app-sudo/src/types.ts b/pioneer/packages/old-apps/app-sudo/src/types.ts
deleted file mode 100644
index 78e0f326d6..0000000000
--- a/pioneer/packages/old-apps/app-sudo/src/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-
-export interface ComponentProps {
-  allAccounts: SubjectInfo;
-  isMine: boolean;
-  sudoKey?: string;
-}
diff --git a/pioneer/packages/old-apps/app-toolbox/LICENSE b/pioneer/packages/old-apps/app-toolbox/LICENSE
deleted file mode 100644
index 0d381b2e97..0000000000
--- a/pioneer/packages/old-apps/app-toolbox/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/pioneer/packages/old-apps/app-toolbox/README.md b/pioneer/packages/old-apps/app-toolbox/README.md
deleted file mode 100644
index 204a833808..0000000000
--- a/pioneer/packages/old-apps/app-toolbox/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# @polkadot/app-toolbox
diff --git a/pioneer/packages/old-apps/app-toolbox/package.json b/pioneer/packages/old-apps/app-toolbox/package.json
deleted file mode 100644
index bfca10ceaf..0000000000
--- a/pioneer/packages/old-apps/app-toolbox/package.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "@polkadot/app-toolbox",
-  "version": "0.37.0-beta.63",
-  "main": "index.js",
-  "repository": "https://github.com/polkadot-js/apps.git",
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "contributors": [],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/react-components": "^0.37.0-beta.63"
-  }
-}
diff --git a/pioneer/packages/old-apps/app-toolbox/src/Hash.tsx b/pioneer/packages/old-apps/app-toolbox/src/Hash.tsx
deleted file mode 100644
index d6ce3b259c..0000000000
--- a/pioneer/packages/old-apps/app-toolbox/src/Hash.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-toolbox authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps as Props } from '@polkadot/react-components/types';
-
-import React, { useState } from 'react';
-import { Input, Output, Static } from '@polkadot/react-components';
-import { hexToU8a, isHex, stringToU8a } from '@polkadot/util';
-import { blake2AsHex } from '@polkadot/util-crypto';
-
-import translate from './translate';
-
-interface State {
-  data: string;
-  hash: string;
-  isHexData: boolean;
-}
-
-function Hash ({ t }: Props): React.ReactElement<Props> {
-  const [{ data, hash, isHexData }, setState] = useState<State>({
-    data: '',
-    hash: blake2AsHex(stringToU8a(''), 256),
-    isHexData: false
-  });
-
-  const _onChangeData = (data: string): void => {
-    const isHexData = isHex(data);
-
-    setState({
-      data,
-      hash: blake2AsHex(
-        isHexData
-          ? hexToU8a(data)
-          : stringToU8a(data),
-        256
-      ),
-      isHexData
-    });
-  };
-
-  return (
-    <div className='toolbox--Hash'>
-      <div className='ui--row'>
-        <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')}
-          onChange={_onChangeData}
-          value={data}
-        />
-      </div>
-      <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')}
-          value={
-            isHexData
-              ? t('Yes')
-              : t('No')
-          }
-        />
-      </div>
-      <div className='ui--row'>
-        <Output
-          className='full'
-          help={t('The blake2b 256-bit hash of the actual input data.')}
-          isHidden={hash.length === 0}
-          isMonospace
-          label={t('the resulting hash is')}
-          value={hash}
-          withCopy
-        />
-      </div>
-    </div>
-  );
-}
-
-export default translate(Hash);
diff --git a/pioneer/packages/old-apps/app-toolbox/src/Rpc/Account.tsx b/pioneer/packages/old-apps/app-toolbox/src/Rpc/Account.tsx
deleted file mode 100644
index 140dfc214b..0000000000
--- a/pioneer/packages/old-apps/app-toolbox/src/Rpc/Account.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-toolbox authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-
-import BN from 'bn.js';
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { InputAddress, Labelled } from '@polkadot/react-components';
-import { Nonce } from '@polkadot/react-query';
-
-import translate from './translate';
-
-interface Props extends I18nProps {
-  defaultValue?: string | null;
-  isError?: boolean;
-  onChange: (accountId: string | undefined | null, accountNonce: BN) => void;
-}
-
-function Account ({ className, defaultValue, isError, onChange, t }: Props): React.ReactElement<Props> {
-  const [accountId, setAccountId] = useState<string | null | undefined>(defaultValue);
-  const [accountNonce, setAccountNonce] = useState(new BN(0));
-
-  const _onChangeAccountId = (accountId: string | null): void => {
-    setAccountId(accountId);
-    onChange(accountId, accountNonce);
-  };
-  const _onChangeAccountNonce = (accountNonce: BN): void => {
-    setAccountNonce(accountNonce);
-    onChange(accountId, accountNonce);
-  };
-
-  return (
-    <div className={`ui--row ${className}`}>
-      <div className='large'>
-        <InputAddress
-          defaultValue={defaultValue}
-          isError={isError}
-          label={t('sign data from account')}
-          onChange={_onChangeAccountId}
-          placeholder='0x...'
-          type='account'
-        />
-      </div>
-      {accountId && (
-        <Labelled
-          className='small'
-          label={t('with an index of')}
-        >
-          <Nonce
-            className='ui disabled dropdown selection'
-            callOnResult={_onChangeAccountNonce}
-            params={accountId}
-          />
-        </Labelled>
-      )}
-    </div>
-  );
-}
-
-export default translate(
-  styled(Account)`
-    box-sizing: border-box;
-    padding-left: 2em;
-  `
-);
diff --git a/pioneer/packages/old-apps/app-toolbox/src/Rpc/Results.tsx b/pioneer/packages/old-apps/app-toolbox/src/Rpc/Results.tsx
deleted file mode 100644
index 270da65084..0000000000
--- a/pioneer/packages/old-apps/app-toolbox/src/Rpc/Results.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-toolbox authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps } from '@polkadot/react-components/types';
-import { QueueTx } from '@polkadot/react-components/Status/types';
-
-import React from 'react';
-import { Output } from '@polkadot/react-components';
-import { isUndefined } from '@polkadot/util';
-
-interface Props extends BareProps {
-  queue: QueueTx[];
-}
-
-export default function Results ({ queue = [] }: Props): React.ReactElement<Props> | null {
-  const filtered = queue
-    .filter(({ error, result }): boolean =>
-      !isUndefined(error) || !isUndefined(result)
-    )
-    .reverse();
-
-  if (!filtered.length) {
-    return null;
-  }
-
-  return (
-    <section className='rpc--Results'>
-      {filtered.map(({ error, id, result, rpc: { section, method } }): React.ReactNode => (
-        <Output
-          isError={!!error}
-          key={id}
-          label={`${id}: ${section}.${method}`}
-          value={
-            error
-              ? error.message
-              : <pre>{JSON.stringify(result, null, 2)}</pre>
-          }
-        />
-      ))}
-    </section>
-  );
-}
diff --git a/pioneer/packages/old-apps/app-toolbox/src/Rpc/Selection.tsx b/pioneer/packages/old-apps/app-toolbox/src/Rpc/Selection.tsx
deleted file mode 100644
index d3bb3f42d3..0000000000
--- a/pioneer/packages/old-apps/app-toolbox/src/Rpc/Selection.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { RpcMethod } from '@polkadot/jsonrpc/types';
-import { ParamDef, RawParam } from '@polkadot/react-params/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { QueueTxRpcAdd } from '@polkadot/react-components/Status/types';
-
-import React from 'react';
-import rpc from '@polkadot/jsonrpc';
-import { Button, InputRpc, TxComponent } from '@polkadot/react-components';
-import Params from '@polkadot/react-params';
-import { getTypeDef } from '@polkadot/types';
-import { isNull } from '@polkadot/util';
-
-import translate from './translate';
-
-interface Props extends I18nProps {
-  queueRpc: QueueTxRpcAdd;
-}
-
-interface State {
-  isValid: boolean;
-  accountId?: string | null;
-  rpc: RpcMethod;
-  values: RawParam[];
-}
-
-const defaultMethod = rpc.author.methods.submitExtrinsic;
-
-class Selection extends TxComponent<Props, State> {
-  public state: State = {
-    isValid: false,
-    accountId: null,
-    rpc: defaultMethod,
-    values: []
-  };
-
-  public render (): React.ReactNode {
-    const { t } = this.props;
-    const { isValid, rpc } = this.state;
-    const params = rpc.params.map(({ isOptional, name, type }): ParamDef => ({
-      name,
-      type: getTypeDef(isOptional ? `Option<${type}>` : type)
-    }));
-
-    return (
-      <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')}
-          onChange={this.onChangeMethod}
-        />
-        <Params
-          key={`${rpc.section}.${rpc.method}:params` /* force re-render on change */}
-          onChange={this.onChangeValues}
-          onEnter={this.submit}
-          params={params}
-        />
-        <Button.Group>
-          <Button
-            isDisabled={!isValid}
-            isPrimary
-            onClick={this.onSubmit}
-            label={t('Submit RPC call')}
-            icon='sign-in'
-            ref={this.button}
-          />
-        </Button.Group>
-      </section>
-    );
-  }
-
-  private nextState (newState: Partial<State>): void {
-    this.setState(
-      (prevState: State): State => {
-        const { rpc = prevState.rpc, accountId = prevState.accountId, values = prevState.values } = newState;
-        const reqCount = rpc.params.reduce((count, { isOptional }): number => count + (isOptional ? 0 : 1), 0);
-        const isValid = values.reduce((isValid, value): boolean => {
-          return isValid && value.isValid === true;
-        }, reqCount <= values.length);
-
-        return {
-          isValid,
-          rpc,
-          accountId,
-          values
-        };
-      }
-    );
-  }
-
-  private onChangeMethod = (rpc: RpcMethod): void => {
-    this.nextState({
-      rpc,
-      values: [] as RawParam[]
-    });
-  }
-
-  private onChangeValues = (values: RawParam[]): void => {
-    this.nextState({ values });
-  }
-
-  private onSubmit = (): void => {
-    const { queueRpc } = this.props;
-    const { accountId, rpc, values } = this.state;
-
-    queueRpc({
-      accountId,
-      rpc,
-      values: values
-        .filter(({ value }): boolean => !isNull(value))
-        .map(({ value }): any => value)
-    });
-  }
-}
-
-export default translate(Selection);
diff --git a/pioneer/packages/old-apps/app-toolbox/src/Rpc/index.tsx b/pioneer/packages/old-apps/app-toolbox/src/Rpc/index.tsx
deleted file mode 100644
index 63b2b0fb43..0000000000
--- a/pioneer/packages/old-apps/app-toolbox/src/Rpc/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-toolbox authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { QueueProps } from '@polkadot/react-components/Status/types';
-
-import React from 'react';
-import { QueueConsumer } from '@polkadot/react-components/Status/Context';
-
-import Results from './Results';
-import Selection from './Selection';
-
-export default function RpcApp (): React.ReactElement {
-  return (
-    <QueueConsumer>
-      {({ txqueue, queueRpc }: QueueProps): React.ReactNode => (
-        <>
-          <Selection queueRpc={queueRpc} />
-          <Results queue={txqueue} />
-        </>
-      )}
-    </QueueConsumer>
-  );
-}
diff --git a/pioneer/packages/old-apps/app-toolbox/src/Rpc/translate.ts b/pioneer/packages/old-apps/app-toolbox/src/Rpc/translate.ts
deleted file mode 100644
index 187fb8c7c3..0000000000
--- a/pioneer/packages/old-apps/app-toolbox/src/Rpc/translate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-toolbox authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { withTranslation } from 'react-i18next';
-
-export default withTranslation(['app-toolbox']);
diff --git a/pioneer/packages/old-apps/app-toolbox/src/Sign.tsx b/pioneer/packages/old-apps/app-toolbox/src/Sign.tsx
deleted file mode 100644
index 22d83aa5d0..0000000000
--- a/pioneer/packages/old-apps/app-toolbox/src/Sign.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-toolbox authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { KeyringPair } from '@polkadot/keyring/types';
-
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { withMulti } from '@polkadot/react-api';
-import { Button, Input, InputAddress, Output, Static } from '@polkadot/react-components';
-import keyring from '@polkadot/ui-keyring';
-import { hexToU8a, isHex, stringToU8a, u8aToHex } from '@polkadot/util';
-
-import translate from './translate';
-import Unlock from './Unlock';
-
-interface Props extends I18nProps {
-  className?: string;
-}
-
-interface State {
-  currentPair: KeyringPair | null;
-  data: string;
-  isHexData: boolean;
-  isLocked: boolean;
-  isUnlockVisible: boolean;
-  signature: string;
-}
-
-function Sign ({ className, t }: Props): React.ReactElement<Props> {
-  const [state, setState] = useState<State>({
-    currentPair: null,
-    data: '',
-    isHexData: false,
-    isLocked: false,
-    isUnlockVisible: false,
-    signature: ''
-  });
-
-  useEffect((): void => {
-    const pairs = keyring.getPairs();
-    const currentPair = pairs[0] || null;
-
-    setState({
-      currentPair,
-      data: '',
-      isHexData: false,
-      isLocked: currentPair
-        ? currentPair.isLocked
-        : false,
-      isUnlockVisible: false,
-      signature: ''
-    });
-  }, []);
-
-  const _nextState = ({ currentPair = state.currentPair, data = state.data, isHexData = state.isHexData, isUnlockVisible = state.isUnlockVisible }: Partial<State>): void => {
-    const isLocked = !currentPair || currentPair.isLocked;
-    let signature = '';
-
-    if (!isLocked && currentPair) {
-      signature = u8aToHex(
-        currentPair.sign(
-          isHexData
-            ? hexToU8a(data)
-            : stringToU8a(data)
-        )
-      );
-    }
-
-    setState({
-      currentPair,
-      data,
-      isHexData,
-      isLocked,
-      isUnlockVisible,
-      signature
-    });
-  };
-
-  const _toggleUnlock = (): void =>
-    _nextState({ isUnlockVisible: !state.isUnlockVisible });
-  const _onChangeAccount = (accountId: string | null): void =>
-    _nextState({ currentPair: keyring.getPair(accountId || '') });
-  const _onChangeData = (data: string): void =>
-    _nextState({ data, isHexData: isHex(data) });
-
-  const { currentPair, data, isHexData, isLocked, isUnlockVisible, signature } = state;
-
-  return (
-    <div className={`toolbox--Sign ${className}`}>
-      <div className='ui--row'>
-        <InputAddress
-          className='full'
-          help={t('select the account you wish to sign data with')}
-          isInput={false}
-          label={t('account')}
-          onChange={_onChangeAccount}
-          type='account'
-        />
-      </div>
-      <div className='toolbox--Sign-input'>
-        <div className='ui--row'>
-          <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')}
-            onChange={_onChangeData}
-            value={data}
-          />
-        </div>
-        <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')}
-            value={
-              isHexData
-                ? t('Yes')
-                : t('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).')}
-            isHidden={signature.length === 0}
-            isMonospace
-            label={t('signature of supplied data')}
-            value={signature}
-            withCopy
-          />
-        </div>
-        <div
-          className='unlock-overlay'
-          hidden={!isLocked}
-        >
-          {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/>
-                <Button.Group>
-                  <Button
-                    isPrimary
-                    onClick={_toggleUnlock}
-                    label={t('Unlock account')}
-                    icon='unlock'
-                  />
-                </Button.Group>
-              </div>
-            </div>
-          )}
-        </div>
-        {isUnlockVisible && (
-          <Unlock
-            onClose={_toggleUnlock}
-            pair={currentPair}
-          />
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default withMulti(
-  styled(Sign)`
-    .toolbox--Sign-input {
-      position: relative;
-      width: 100%;
-      height: 100%;
-
-      .unlock-overlay {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top:0;
-        left:0;
-        background-color: #0f0e0e7a;
-      }
-
-      .unlock-overlay-warning {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height:100%;
-      }
-
-      .unlock-overlay-content {
-        color:#fff;
-        text-align:center;
-
-        .ui--Button-Group {
-          text-align: center;
-        }
-      }
-    }
-  `,
-  translate
-);
diff --git a/pioneer/packages/old-apps/app-toolbox/src/Unlock.tsx b/pioneer/packages/old-apps/app-toolbox/src/Unlock.tsx
deleted file mode 100644
index 60b798d41b..0000000000
--- a/pioneer/packages/old-apps/app-toolbox/src/Unlock.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-toolbox authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { KeyringPair } from '@polkadot/keyring/types';
-
-import React from 'react';
-import { AddressRow, Button, Modal, Password, TxComponent } from '@polkadot/react-components';
-
-import translate from './translate';
-
-interface Props extends I18nProps {
-  onClose: () => void;
-  pair: KeyringPair | null;
-}
-
-interface State {
-  address: string;
-  password: string;
-  unlockError: string | null;
-}
-
-class Unlock extends TxComponent<Props, State> {
-  public state: State = {
-    address: '',
-    password: '',
-    unlockError: null
-  };
-
-  public static getDerivedStateFromProps ({ pair }: Props): Pick<State, never> {
-    return {
-      address: (pair && pair.address) || ''
-    };
-  }
-
-  public render (): React.ReactNode {
-    const { pair, t } = this.props;
-
-    if (!pair) {
-      return null;
-    }
-
-    return (
-      <Modal
-        className='toolbox--Unlock'
-        dimmer='inverted'
-        open
-      >
-        <Modal.Header>
-          {t('Unlock account')}
-        </Modal.Header>
-        {this.renderContent()}
-        {this.renderActions()}
-      </Modal>
-    );
-  }
-
-  private renderActions (): React.ReactNode {
-    const { t } = this.props;
-
-    return (
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            isNegative
-            onClick={this.onCancel}
-            label={t('Cancel')}
-            icon='cancel'
-          />
-          <Button.Or />
-          <Button
-            isPrimary
-            onClick={this.onUnlock}
-            label={t('Unlock')}
-            icon='unlock'
-            ref={this.button}
-          />
-        </Button.Group>
-      </Modal.Actions>
-    );
-  }
-
-  private renderContent (): React.ReactNode {
-    const { t } = this.props;
-    const { address, password, unlockError } = this.state;
-
-    return (
-      <Modal.Content>
-        <AddressRow
-          isInline
-          value={address}
-        >
-          <p>{t('You are about to unlock your account to allow for the signing of messages. Once active the signature will be generated based on the content provided.')}</p>
-          <div>
-            <Password
-              autoFocus
-              isError={!!unlockError}
-              help={t('The account\'s password specified at the creation of this account.')}
-              label={t('password')}
-              onChange={this.onChangePassword}
-              onEnter={this.submit}
-              value={password}
-            />
-          </div>
-        </AddressRow>
-      </Modal.Content>
-    );
-  }
-
-  private unlockAccount (password?: string): string | null {
-    const { pair } = this.props;
-
-    if (!pair || !pair.isLocked) {
-      return null;
-    }
-
-    try {
-      pair.decodePkcs8(password);
-    } catch (error) {
-      return error.message;
-    }
-
-    return null;
-  }
-
-  private onChangePassword = (password: string): void => {
-    this.setState({
-      password,
-      unlockError: null
-    });
-  }
-
-  private onCancel = (): void => {
-    const { onClose } = this.props;
-
-    onClose();
-  }
-
-  private onUnlock = (): void => {
-    const { onClose } = this.props;
-    const { password } = this.state;
-    const unlockError = this.unlockAccount(password);
-
-    if (unlockError) {
-      this.setState({ unlockError });
-      return;
-    }
-
-    onClose();
-  }
-}
-
-export default translate(Unlock);
diff --git a/pioneer/packages/old-apps/app-toolbox/src/Verify.tsx b/pioneer/packages/old-apps/app-toolbox/src/Verify.tsx
deleted file mode 100644
index 9d889537e4..0000000000
--- a/pioneer/packages/old-apps/app-toolbox/src/Verify.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-toolbox authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps as Props } from '@polkadot/react-components/types';
-import { KeypairType } from '@polkadot/util-crypto/types';
-
-import React, { useEffect, useState } from 'react';
-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 translate from './translate';
-
-type CryptoTypes = KeypairType | 'unknown';
-
-const AlignedIcon = styled(Icon)`
-  &&&::before {
-    position: relative;
-    left: 0.88rem;
-    top: 1rem;
-    width: 32px;
-    height: 32px;
-    font-size: 32px;
-    background: white !important;
-    border-radius: 50%;
-  }
-
-  &&&.big.icon {
-    font-size: 32px;
-  }
-`;
-
-function Verify ({ t }: Props): React.ReactElement<Props> {
-  const [{ cryptoType, isValid }, setValidity] = useState<{ cryptoType: CryptoTypes; isValid: boolean }>({ cryptoType: 'unknown', isValid: false });
-  const [{ data, isHexData }, setData] = useState<{ data: string; isHexData: boolean }>({ data: '', isHexData: false });
-  const [{ publicKey, isValidPk }, setPublicKey] = useState<{ publicKey: Uint8Array | null; isValidPk: boolean }>({ publicKey: null, isValidPk: false });
-  const [{ signature, isValidSignature }, setSignature] = useState<{ signature: string; isValidSignature: boolean }>({ signature: '', isValidSignature: false });
-  const [cryptoOptions] = useState([{ value: 'unknown', text: t('Crypto not detected') }].concat(uiSettings.availableCryptos as any[]));
-
-  useEffect((): void => {
-    let cryptoType: CryptoTypes = 'unknown';
-    let isValid = isValidPk && isValidSignature;
-
-    // We cannot just use the keyring verify since it may be an address. So here we first check
-    // for ed25519, if not valid, we try against sr25519 - if neither are valid, well, we have
-    // not been able to validate the signature
-    if (isValid && publicKey) {
-      let isValidSr = false;
-      let isValidEd = false;
-
-      try {
-        isValidEd = naclVerify(data, signature, publicKey);
-      } catch (error) {
-        // do nothing, already set to false
-      }
-
-      if (isValidEd) {
-        cryptoType = 'ed25519';
-      } else {
-        try {
-          isValidSr = schnorrkelVerify(data, signature, publicKey);
-        } catch (error) {
-          // do nothing, already set to false
-        }
-
-        if (isValidSr) {
-          cryptoType = 'sr25519';
-        } else {
-          isValid = false;
-        }
-      }
-    }
-
-    setValidity({ cryptoType, isValid });
-  }, [data, isValidPk, isValidSignature, publicKey, signature]);
-
-  const _onChangeAddress = (accountId: string | null): void => {
-    let publicKey: Uint8Array | null = null;
-
-    try {
-      publicKey = keyring.decodeAddress(accountId || '');
-    } catch (err) {
-      console.error(err);
-    }
-
-    setPublicKey({ publicKey, isValidPk: !!publicKey && publicKey.length === 32 });
-  };
-
-  const _onChangeData = (data: string): void =>
-    setData({ data, isHexData: isHex(data) });
-
-  const _onChangeSignature = (signature: string): void =>
-    setSignature({ signature, isValidSignature: isHex(signature) && signature.length === 130 });
-
-  return (
-    <div className='toolbox--Verify'>
-      <div className='ui--row'>
-        <InputAddress
-          className='full'
-          help={t('The account that signed the input')}
-          isError={!isValidPk}
-          isInput
-          label={t('verify using address')}
-          onChange={_onChangeAddress}
-        />
-      </div>
-      <div className='ui--row'>
-        <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')}
-          onChange={_onChangeData}
-          value={data}
-        />
-      </div>
-      <div className='ui--row'>
-        <div className="ui--AlignedIconContainer" style={{ position: 'absolute', zIndex: 1 }}>
-          <AlignedIcon
-            color={isValid ? 'green' : (isValidSignature ? 'red' : undefined)}
-            name={isValid ? 'check circle' : (isValidSignature ? 'exclamation circle' : 'help circle')}
-            size="big"
-          />
-        </div>
-        <Input
-          className='full'
-          isError={!isValidSignature}
-          help={t('The signature as by the account being checked, supplied as a hex-formatted string.')}
-          label={t('the supplied signature')}
-          onChange={_onChangeSignature}
-          value={signature}
-        />
-      </div>
-      <div className='ui--row'>
-        <Dropdown
-          defaultValue={cryptoType}
-          help={t('Cryptography used to create this signature. It is auto-detected on valid signatures.')}
-          isDisabled
-          label={t('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')}
-          value={
-            isHexData
-              ? t('Yes')
-              : t('No')
-          }
-        />
-      </div>
-    </div>
-  );
-}
-
-export default translate(Verify);
diff --git a/pioneer/packages/old-apps/app-toolbox/src/index.tsx b/pioneer/packages/old-apps/app-toolbox/src/index.tsx
deleted file mode 100644
index 956e12f091..0000000000
--- a/pioneer/packages/old-apps/app-toolbox/src/index.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-toolbox authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-
-import React from 'react';
-import { Route, Switch } from 'react-router';
-import Tabs from '@polkadot/react-components/Tabs';
-import accountObservable from '@polkadot/ui-keyring/observable/accounts';
-import { withMulti, withObservable } from '@polkadot/react-api';
-
-import Hash from './Hash';
-import Rpc from './Rpc';
-import Sign from './Sign';
-import Verify from './Verify';
-import translate from './translate';
-
-interface Props extends AppProps, I18nProps {
-  allAccounts?: SubjectInfo;
-}
-
-function ToolboxApp ({ allAccounts, basePath, t }: Props): React.ReactElement<Props> {
-  const hasAccounts = allAccounts && Object.keys(allAccounts).length !== 0;
-  const tabs = [
-    {
-      isRoot: true,
-      name: 'rpc',
-      text: t('RPC calls')
-    },
-    {
-      name: 'hash',
-      text: t('Hash data')
-    },
-    {
-      name: 'sign',
-      text: t('Sign message')
-    },
-    {
-      name: 'verify',
-      text: t('Verify signature')
-    }
-  ];
-  const filteredTabs = hasAccounts
-    ? tabs
-    : tabs.filter(({ name }): boolean => !['sign', 'verify'].includes(name));
-
-  return (
-    <main className='toolbox--App'>
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={filteredTabs}
-        />
-      </header>
-      <Switch>
-        <Route path={`${basePath}/hash`} component={Hash} />
-        <Route path={`${basePath}/sign`} component={Sign} />
-        <Route path={`${basePath}/verify`} component={Verify} />
-        <Route component={Rpc} />
-      </Switch>
-    </main>
-  );
-}
-
-export default withMulti(
-  ToolboxApp,
-  translate,
-  withObservable(accountObservable.subject, { propName: 'allAccounts' })
-);
diff --git a/pioneer/packages/old-apps/app-toolbox/src/translate.ts b/pioneer/packages/old-apps/app-toolbox/src/translate.ts
deleted file mode 100644
index 187fb8c7c3..0000000000
--- a/pioneer/packages/old-apps/app-toolbox/src/translate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-toolbox authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { withTranslation } from 'react-i18next';
-
-export default withTranslation(['app-toolbox']);
diff --git a/pioneer/packages/old-apps/app-transfer/LICENSE b/pioneer/packages/old-apps/app-transfer/LICENSE
deleted file mode 100644
index 0d381b2e97..0000000000
--- a/pioneer/packages/old-apps/app-transfer/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/pioneer/packages/old-apps/app-transfer/README.md b/pioneer/packages/old-apps/app-transfer/README.md
deleted file mode 100644
index 2823a5a361..0000000000
--- a/pioneer/packages/old-apps/app-transfer/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# @polkadot/app-transfer
-
-A basic DOT transfer application, allowing the movement of funds from one account to another.
diff --git a/pioneer/packages/old-apps/app-transfer/package.json b/pioneer/packages/old-apps/app-transfer/package.json
deleted file mode 100644
index 62bb9aa925..0000000000
--- a/pioneer/packages/old-apps/app-transfer/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "name": "@polkadot/app-transfer",
-  "version": "0.37.0-beta.63",
-  "description": "A basic transfer app",
-  "main": "index.js",
-  "scripts": {},
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/react-components": "^0.37.0-beta.63",
-    "@polkadot/react-query": "^0.37.0-beta.63"
-  }
-}
diff --git a/pioneer/packages/old-apps/app-transfer/src/index.tsx b/pioneer/packages/old-apps/app-transfer/src/index.tsx
deleted file mode 100644
index 92fe2da203..0000000000
--- a/pioneer/packages/old-apps/app-transfer/src/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-transfer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import React from 'react';
-
-export default function App (): React.ReactElement {
-  return (
-    <>
-      Deprecated, now operates via modal
-    </>
-  );
-}
diff --git a/pioneer/packages/old-apps/apps-routing/LICENSE b/pioneer/packages/old-apps/apps-routing/LICENSE
deleted file mode 100644
index 0d381b2e97..0000000000
--- a/pioneer/packages/old-apps/apps-routing/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/pioneer/packages/old-apps/apps-routing/README.md b/pioneer/packages/old-apps/apps-routing/README.md
deleted file mode 100644
index c200610646..0000000000
--- a/pioneer/packages/old-apps/apps-routing/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# @polkadot/apps-routing
-
-The routing config for the application
diff --git a/pioneer/packages/old-apps/apps-routing/package.json b/pioneer/packages/old-apps/apps-routing/package.json
deleted file mode 100644
index e4d1885870..0000000000
--- a/pioneer/packages/old-apps/apps-routing/package.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "name": "@polkadot/apps-routing",
-  "version": "0.37.0-beta.63",
-  "main": "index.js",
-  "repository": "https://github.com/polkadot-js/apps.git",
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "contributors": [],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.7.1"
-  }
-}
diff --git a/pioneer/packages/old-apps/apps-routing/src/accounts.ts b/pioneer/packages/old-apps/apps-routing/src/accounts.ts
deleted file mode 100644
index cc6e6923e1..0000000000
--- a/pioneer/packages/old-apps/apps-routing/src/accounts.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps-routing authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Routes } from './types';
-
-import Accounts from '@polkadot/app-accounts';
-
-export default ([
-  {
-    Component: Accounts,
-    display: {
-      needsApi: []
-    },
-    i18n: {
-      defaultValue: 'My Keys'
-    },
-    icon: 'key',
-    name: 'accounts'
-  }
-] as Routes);
diff --git a/pioneer/packages/old-apps/apps-routing/src/addressbook.ts b/pioneer/packages/old-apps/apps-routing/src/addressbook.ts
deleted file mode 100644
index a0e9515b16..0000000000
--- a/pioneer/packages/old-apps/apps-routing/src/addressbook.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps-routing authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Routes } from './types';
-
-import AddressBook from '@polkadot/app-address-book';
-
-export default ([
-  {
-    Component: AddressBook,
-    display: {
-      needsApi: []
-    },
-    i18n: {
-      defaultValue: 'Address Book'
-    },
-    icon: 'address book',
-    name: 'addressbook'
-  }
-] as Routes);
diff --git a/pioneer/packages/old-apps/apps-routing/src/explorer.ts b/pioneer/packages/old-apps/apps-routing/src/explorer.ts
deleted file mode 100644
index 7264369c7b..0000000000
--- a/pioneer/packages/old-apps/apps-routing/src/explorer.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps-routing authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Routes } from './types';
-
-import Explorer from '@polkadot/app-explorer';
-
-export default ([
-  {
-    Component: Explorer,
-    display: {
-      needsApi: []
-    },
-    i18n: {
-      defaultValue: 'Explorer'
-    },
-    icon: 'braille',
-    name: 'explorer'
-  }
-] as Routes);
diff --git a/pioneer/packages/old-apps/apps-routing/src/extrinsics.ts b/pioneer/packages/old-apps/apps-routing/src/extrinsics.ts
deleted file mode 100644
index 99533b48f2..0000000000
--- a/pioneer/packages/old-apps/apps-routing/src/extrinsics.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps-routing authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Routes } from './types';
-
-import Extrinsics from '@polkadot/app-extrinsics';
-
-export default ([
-  {
-    Component: Extrinsics,
-    display: {
-      needsAccounts: true,
-      needsApi: []
-    },
-    i18n: {
-      defaultValue: 'Extrinsics'
-    },
-    icon: 'sync',
-    name: 'extrinsics'
-  }
-] as Routes);
diff --git a/pioneer/packages/old-apps/apps-routing/src/index.ts b/pioneer/packages/old-apps/apps-routing/src/index.ts
deleted file mode 100644
index 60549403ef..0000000000
--- a/pioneer/packages/old-apps/apps-routing/src/index.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps-routing authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Routing, Routes } from './types';
-
-import appSettings from '@polkadot/joy-settings/';
-
-import election from './joy-election';
-import forum from './joy-forum';
-// import help from './joy-help';
-import media from './joy-media';
-import members from './joy-members';
-import proposals from './joy-proposals';
-import roles from './joy-roles';
-import pages from './joy-pages';
-
-// import template from './123code';
-import accounts from './accounts';
-import addressbook from './addressbook';
-// import claims from './claims';
-// import contracts from './contracts';
-// import council from './council';
-// import dashboard from './dashboard';
-// import democracy from './democracy';
-import explorer from './explorer';
-import extrinsics from './extrinsics';
-// import genericAsset from './generic-asset';
-import js from './js';
-// import parachains from './parachains';
-import settings from './settings';
-import staking from './staking';
-import storage from './storage';
-import sudo from './sudo';
-import toolbox from './toolbox';
-import transfer from './transfer';
-// import treasury from './treasury';
-
-let routes: Routes = ([] as Routes);
-
-// Basic routes
-routes = routes.concat(
-  media,
-  roles,
-  proposals,
-  election,
-  forum,
-  members,
-  staking,
-  null,
-  transfer,
-  accounts,
-  addressbook,
-  settings,
-  pages
-);
-
-if (appSettings.isFullMode) {
-  routes = routes.concat(
-    null,
-    explorer,
-    storage,
-    extrinsics,
-    sudo,
-    js,
-    toolbox
-  );
-}
-
-const setup: Routing = {
-  default: 'media',
-  routes
-};
-
-export default setup;
diff --git a/pioneer/packages/old-apps/apps-routing/src/joy-election.ts b/pioneer/packages/old-apps/apps-routing/src/joy-election.ts
deleted file mode 100644
index 2f88963545..0000000000
--- a/pioneer/packages/old-apps/apps-routing/src/joy-election.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Routes } from './types';
-
-import Election from '@polkadot/joy-election/index';
-
-export const councilSidebarName = 'council';
-
-export default [
-  {
-    Component: Election,
-    display: {
-      needsApi: ['query.council.activeCouncil', 'query.councilElection.stage']
-    },
-    i18n: {
-      defaultValue: 'Council'
-    },
-    icon: 'university',
-    name: councilSidebarName
-  }
-] as Routes;
diff --git a/pioneer/packages/old-apps/apps-routing/src/joy-forum.ts b/pioneer/packages/old-apps/apps-routing/src/joy-forum.ts
deleted file mode 100644
index 8dfac4ab1a..0000000000
--- a/pioneer/packages/old-apps/apps-routing/src/joy-forum.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Routes } from './types';
-
-import Forum from '@polkadot/joy-forum/index';
-
-export default ([
-  {
-    Component: Forum,
-    display: {},
-    i18n: {
-      defaultValue: 'Forum'
-    },
-    icon: 'comment alternate outline',
-    name: 'forum'
-  }
-] as Routes);
diff --git a/pioneer/packages/old-apps/apps-routing/src/joy-media.ts b/pioneer/packages/old-apps/apps-routing/src/joy-media.ts
deleted file mode 100644
index 81e8b234bc..0000000000
--- a/pioneer/packages/old-apps/apps-routing/src/joy-media.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Routes } from './types';
-
-import Media from '@polkadot/joy-media/index';
-
-export default ([
-  {
-    Component: Media,
-    display: {
-      needsApi: []
-    },
-    i18n: {
-      defaultValue: 'Media'
-    },
-    icon: 'play circle outline',
-    name: 'media'
-  }
-] as Routes);
diff --git a/pioneer/packages/old-apps/apps-routing/src/joy-members.ts b/pioneer/packages/old-apps/apps-routing/src/joy-members.ts
deleted file mode 100644
index 8e2ba10029..0000000000
--- a/pioneer/packages/old-apps/apps-routing/src/joy-members.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Routes } from './types';
-
-import Members from '@polkadot/joy-members/index';
-
-export default [
-  {
-    Component: Members,
-    display: {
-      needsApi: ['query.members.nextMemberId']
-    },
-    i18n: {
-      defaultValue: 'Membership'
-    },
-    icon: 'users',
-    name: 'members'
-  }
-] as Routes;
diff --git a/pioneer/packages/old-apps/apps-routing/src/joy-proposals.ts b/pioneer/packages/old-apps/apps-routing/src/joy-proposals.ts
deleted file mode 100644
index a2903ab127..0000000000
--- a/pioneer/packages/old-apps/apps-routing/src/joy-proposals.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Routes } from './types';
-
-import Proposals from '@polkadot/joy-proposals/';
-
-export default [
-  {
-    Component: Proposals,
-    display: {
-      needsApi: ['query.proposalsEngine.proposalCount']
-    },
-    i18n: {
-      defaultValue: 'Proposals'
-    },
-    icon: 'tasks',
-    name: 'proposals'
-  }
-] as Routes;
diff --git a/pioneer/packages/old-apps/apps-routing/src/js.ts b/pioneer/packages/old-apps/apps-routing/src/js.ts
deleted file mode 100644
index 41cc2076d5..0000000000
--- a/pioneer/packages/old-apps/apps-routing/src/js.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps-routing authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Routes } from './types';
-
-import Js from '@polkadot/app-js';
-
-export default ([
-  {
-    Component: Js,
-    display: {
-      needsApi: []
-    },
-    i18n: {
-      defaultValue: 'Javascript'
-    },
-    icon: 'code',
-    name: 'js'
-  }
-] as Routes);
diff --git a/pioneer/packages/old-apps/apps-routing/src/settings.ts b/pioneer/packages/old-apps/apps-routing/src/settings.ts
deleted file mode 100644
index f040aeee3d..0000000000
--- a/pioneer/packages/old-apps/apps-routing/src/settings.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps-routing authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Routes } from './types';
-
-import Settings from '@polkadot/app-settings';
-
-export default ([
-  {
-    Component: Settings,
-    display: {},
-    i18n: {
-      defaultValue: 'Settings'
-    },
-    icon: 'settings',
-    name: 'settings'
-  }
-] as Routes);
diff --git a/pioneer/packages/old-apps/apps-routing/src/staking.ts b/pioneer/packages/old-apps/apps-routing/src/staking.ts
deleted file mode 100644
index 6e4d96655d..0000000000
--- a/pioneer/packages/old-apps/apps-routing/src/staking.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps-routing authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Routes } from './types';
-
-import Staking from '@polkadot/app-staking';
-
-export default ([
-  {
-    Component: Staking,
-    display: {
-      needsApi: [
-        [
-          'tx.staking.bond' // current bonding API
-          // 'tx.staking.stake' // previous staking API
-        ]
-      ]
-    },
-    i18n: {
-      defaultValue: 'Validators'
-    },
-    icon: 'certificate',
-    name: 'staking'
-  }
-] as Routes);
diff --git a/pioneer/packages/old-apps/apps-routing/src/storage.ts b/pioneer/packages/old-apps/apps-routing/src/storage.ts
deleted file mode 100644
index 18a5e29a4b..0000000000
--- a/pioneer/packages/old-apps/apps-routing/src/storage.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps-routing authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Routes } from './types';
-
-import Storage from '@polkadot/app-storage';
-
-export default ([
-  {
-    Component: Storage,
-    display: {
-      needsApi: []
-    },
-    i18n: {
-      defaultValue: 'Chain state'
-    },
-    icon: 'database',
-    name: 'chainstate'
-  }
-] as Routes);
diff --git a/pioneer/packages/old-apps/apps-routing/src/sudo.ts b/pioneer/packages/old-apps/apps-routing/src/sudo.ts
deleted file mode 100644
index a1f4c9eec1..0000000000
--- a/pioneer/packages/old-apps/apps-routing/src/sudo.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps-routing authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Routes } from './types';
-
-import Sudo from '@polkadot/app-sudo';
-
-export default ([
-  {
-    Component: Sudo,
-    display: {
-      needsAccounts: true,
-      needsApi: [
-        'tx.sudo.setKey'
-      ],
-      needsSudo: true
-    },
-    i18n: {
-      defaultValue: 'Sudo'
-    },
-    icon: 'unlock',
-    name: 'sudo'
-  }
-] as Routes);
diff --git a/pioneer/packages/old-apps/apps-routing/src/toolbox.ts b/pioneer/packages/old-apps/apps-routing/src/toolbox.ts
deleted file mode 100644
index 6a17877311..0000000000
--- a/pioneer/packages/old-apps/apps-routing/src/toolbox.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps-routing authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Routes } from './types';
-
-import Toolbox from '@polkadot/app-toolbox';
-
-export default ([
-  {
-    Component: Toolbox,
-    display: {
-      needsApi: []
-    },
-    i18n: {
-      defaultValue: 'Toolbox'
-    },
-    icon: 'configure',
-    name: 'toolbox'
-  }
-] as Routes);
diff --git a/pioneer/packages/old-apps/apps-routing/src/transfer.ts b/pioneer/packages/old-apps/apps-routing/src/transfer.ts
deleted file mode 100644
index 152e664baf..0000000000
--- a/pioneer/packages/old-apps/apps-routing/src/transfer.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps-routing authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Routes } from './types';
-
-import Transfer from '@polkadot/app-transfer';
-import TransferModal from '@polkadot/app-accounts/modals/Transfer';
-
-export default ([
-  {
-    Component: Transfer,
-    Modal: TransferModal,
-    display: {
-      isHidden: false,
-      needsAccounts: true,
-      needsApi: [
-        'tx.balances.transfer'
-      ]
-    },
-    i18n: {
-      defaultValue: 'Transfer'
-    },
-    icon: 'send',
-    name: 'transfer'
-  }
-] as Routes);
diff --git a/pioneer/packages/old-apps/apps-routing/src/types.ts b/pioneer/packages/old-apps/apps-routing/src/types.ts
deleted file mode 100644
index a6ba388a7f..0000000000
--- a/pioneer/packages/old-apps/apps-routing/src/types.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps-routing authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { SemanticICONS } from 'semantic-ui-react/dist/commonjs/generic';
-import { AppProps, BareProps } from '@polkadot/react-components/types';
-
-export interface RouteProps extends AppProps, BareProps {
-  location: any;
-}
-
-export interface Route {
-  Component: React.ComponentType<RouteProps>;
-  Modal?: React.ComponentType<any>;
-  display: {
-    isHidden?: boolean;
-    isModal?: boolean;
-    needsAccounts?: boolean;
-    needsApi?: (string | string[])[];
-    needsSudo?: boolean;
-  };
-  i18n: {
-    defaultValue: string;
-  };
-  icon: SemanticICONS;
-  name: string;
-}
-
-export type Routes = (Route | null)[];
-
-export interface Routing {
-  default: string;
-  routes: Routes;
-}
diff --git a/pioneer/packages/old-apps/apps/LICENSE b/pioneer/packages/old-apps/apps/LICENSE
deleted file mode 100644
index 0d381b2e97..0000000000
--- a/pioneer/packages/old-apps/apps/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/pioneer/packages/old-apps/apps/README.md b/pioneer/packages/old-apps/apps/README.md
deleted file mode 100644
index 6b2c62e013..0000000000
--- a/pioneer/packages/old-apps/apps/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# @polkadot/apps
diff --git a/pioneer/packages/old-apps/apps/package.json b/pioneer/packages/old-apps/apps/package.json
deleted file mode 100644
index 788c2f29eb..0000000000
--- a/pioneer/packages/old-apps/apps/package.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "@polkadot/apps",
-  "version": "0.37.0-beta.63",
-  "description": "An Apps portal into the Polkadot network",
-  "main": "index.js",
-  "homepage": ".",
-  "repository": "https://github.com/polkadot-js/apps.git",
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "contributors": [],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/polyfill": "^7.7.0",
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/react-components": "^0.37.0-beta.63",
-    "@polkadot/react-signer": "^0.37.0-beta.63",
-    "@polkadot/ui-assets": "^0.47.0-beta.3",
-    "query-string": "^6.8.3"
-  }
-}
diff --git a/pioneer/packages/old-apps/apps/public/favicon.ico b/pioneer/packages/old-apps/apps/public/favicon.ico
deleted file mode 100644
index ec3c167a5b..0000000000
Binary files a/pioneer/packages/old-apps/apps/public/favicon.ico and /dev/null differ
diff --git a/pioneer/packages/old-apps/apps/public/images/logo-j.svg b/pioneer/packages/old-apps/apps/public/images/logo-j.svg
deleted file mode 100644
index ef7909afac..0000000000
--- a/pioneer/packages/old-apps/apps/public/images/logo-j.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="79" height="198" viewBox="0 0 79 198" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M79 0.00390625H0V27.3108H48.19V139.659C48.19 148.632 42.66 156.434 34.365 159.945L15.01 167.356L23.305 197.004L52.535 185.691C62.41 181.79 70.705 174.378 75.05 165.016C77.815 159.554 79 153.313 79 147.461V0.00390625Z" fill="white"/>
-</svg>
diff --git a/pioneer/packages/old-apps/apps/public/images/logo-joytream.svg b/pioneer/packages/old-apps/apps/public/images/logo-joytream.svg
deleted file mode 100644
index c2ad744569..0000000000
--- a/pioneer/packages/old-apps/apps/public/images/logo-joytream.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 427.7 88.3" viewBox="0 0 427.7 88.3" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="m59.7 16c-14.6 0-26.4 11.8-26.4 26.4s11.8 26.4 26.4 26.4 26.4-11.8 26.4-26.4-11.9-26.4-26.4-26.4zm0 40.7c-7.9 0-14.2-6.4-14.2-14.2s6.4-14.2 14.2-14.2 14.2 6.4 14.2 14.2-6.4 14.2-14.2 14.2z"/><path d="m93.4 86.9 9.5-21.5-20.1-48.5h12.2l13.9 35.3 14.1-35.3h12.1l-29.6 70z"/><path d="m155.7 68.9c-6.8 0-12.3-1.8-16.3-5.2-3.8-3.1-5.9-7.3-6.2-12.3l-.1-2.1h11.3l.2 1.8c.4 3.6 2.3 5.8 6 7.1 1.4.4 2.9.7 4.2.7 1.5 0 2.9-.1 4.2-.3 1.2-.2 2.5-.5 3.6-.9 2.9-1.1 3.2-2.9 3.2-4.3 0-1.3-.4-2.2-1.4-2.8-1.4-.9-3.1-1.7-5.2-2.3-2.3-.6-4.8-1.2-7.4-1.8-2.8-.6-5.5-1.3-8-2.3-2.6-1.1-4.8-2.5-6.5-4.4-1.9-2-2.9-4.8-2.9-8.2 0-4.9 1.8-8.8 5.5-11.6 3.5-2.6 8.5-4 15.1-4 6.3 0 11.3 1.6 15 4.6 3.2 2.7 5 6.2 5.5 10.6l.3 2.2h-11.2l-.2-1.8c-.3-2.4-1.7-5.6-9.9-5.6-8.9 0-8.9 3.5-8.9 4.8 0 1.2.4 2 1.4 2.6 1.4.9 3.1 1.6 5.3 2.2 2.3.6 4.8 1.2 7.5 1.7 2.9.6 5.6 1.4 8 2.4 2.6 1.1 4.8 2.6 6.5 4.5 1.9 2.1 2.8 4.9 2.8 8.3 0 5.3-2 9.4-6.1 12.2-3.8 2.8-8.9 4.2-15.3 4.2z"/><path d="m187.2 68.1v-41h-9.7v-10.2h9.7v-17h11.1v17h10.9v10.2h-10.9v41z"/><path d="m212.9 68.1v-51.2h11.1v6c1.8-2.1 4.2-3.7 7-5 2.3-1.1 5.2-1.7 8.4-1.7h2.5v11.1h-2.9c-4.5 0-8.1 1.8-10.9 5.4s-4.1 7.7-4.1 12.7v22.8h-11.1z"/><path d="m267.3 68.9c-7.7 0-14-2.6-18.9-7.7-4.7-5-7.1-11.2-7.1-18.7s2.3-13.8 6.8-18.7c4.8-5.1 11.1-7.7 18.7-7.7s13.9 2.6 18.7 7.7c4.5 4.9 6.8 11.2 6.8 18.7v4.8h-39.3c.7 2.9 2.1 5.3 4.2 7.3 2.7 2.6 6 3.8 10.1 3.8 5.6 0 9.5-2.2 11.9-6.9l.6-1.1h11.9l-1 2.7c-1.8 4.6-4.6 8.4-8.5 11.3-3.9 3-8.9 4.5-14.9 4.5zm13.1-32.2c-.8-2.7-2.1-4.8-4-6.6-2.6-2.4-5.7-3.5-9.6-3.5s-7 1.2-9.6 3.5c-1.9 1.8-3.2 4-4 6.6z"/><path d="m416.3 68.1v-30.3c0-3.4-.9-6.1-2.8-8.3-1.8-2-4.1-2.9-6.9-2.9-3.1 0-5.6 1-7.6 2.9-2.1 2-3.2 4.8-3.2 8.4v30.3h-11.1v-30.4c0-3.4-.9-6.1-2.8-8.3-1.8-2-4.1-2.9-6.9-2.9-3.1 0-5.6 1-7.6 2.9-2.1 2-3.2 4.8-3.2 8.4v30.3h-11.1v-51.3h11.1v3.6c3.2-2.9 7.4-4.3 12.4-4.3 3.5 0 6.8.9 9.8 2.8 2.1 1.3 3.8 3 5.3 5 2.3-3 5.4-5.2 9.2-6.6 2-.8 4.4-1.2 6.9-1.2 2.6 0 5.1.5 7.4 1.5s4.5 2.5 6.3 4.4c3.9 4.2 5.9 9.4 5.9 15.6v30.6h-11.1z"/><path d="m177.4 17h31.7v9.9h-31.7z"/><path d="m28.5 16.9h-28.3v9.9h17.4v40.8c0 3.3-2 6.2-5 7.3l-7 2.7 3 10.7 10.4-4c3.6-1.4 6.5-4.1 8.1-7.6 1-2 1.4-4.2 1.4-6.4z"/><path d="m345.2 17h-10.9v3.3c-4.1-2.7-8.9-4.1-14.5-4.1-7.6 0-13.9 2.6-18.7 7.7-4.5 4.9-6.8 11.2-6.8 18.7s2.3 13.8 6.8 18.7c4.8 5.1 11.1 7.7 18.7 7.7 5.5 0 10.4-1.4 14.5-4.1v3.1h10.9zm-14.8 36.9c-2.6 3.1-6 4.6-10.6 4.6-4.5 0-8-1.5-10.6-4.6-2.5-3-3.8-6.7-3.8-11.4s1.2-8.4 3.8-11.4c2.6-3.1 6-4.6 10.6-4.6 4.5 0 8 1.5 10.6 4.6 2.5 3 3.8 6.7 3.8 11.4s-1.3 8.4-3.8 11.4z"/></g></svg>
\ No newline at end of file
diff --git a/pioneer/packages/old-apps/apps/public/index.html b/pioneer/packages/old-apps/apps/public/index.html
deleted file mode 100644
index 22ab27efb8..0000000000
--- a/pioneer/packages/old-apps/apps/public/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-    <link rel="manifest" href="manifest.json">
-    <link rel="shortcut icon" href="favicon.ico">
-    <title><%= htmlWebpackPlugin.options.PAGE_TITLE %></title>
-    <% if (htmlWebpackPlugin.options.IS_PROD) { %>
-      <!-- Global site tag (gtag.js) - Google Analytics -->
-      <script async src="https://www.googletagmanager.com/gtag/js?id=UA-133429788-6"></script>
-      <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'UA-133429788-6', { 'anonymize_ip': true });
-      </script>
-    <% } %>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-    <div id="tooltips"></div>
-  </body>
-</html>
-
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/app-123code.json b/pioneer/packages/old-apps/apps/public/locales/en/app-123code.json
deleted file mode 100644
index 0967ef424b..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/app-123code.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/app-accounts.json b/pioneer/packages/old-apps/apps/public/locales/en/app-accounts.json
deleted file mode 100644
index d4644de272..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/app-accounts.json
+++ /dev/null
@@ -1,95 +0,0 @@
-{
-  "account forgotten": "account forgotten",
-  "Forget this account": "Forget this account",
-  "Create a backup file for this account": "Create a backup file for this account",
-  "Change this account's password": "Change this account's password",
-  "send": "send",
-  "Send funds from this account": "Send funds from this account",
-  "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 -": "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 -",
-  "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.": "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.",
-  "Learn more...": "Learn more...",
-  "My accounts": "My accounts",
-  "Vanity address": "Vanity address",
-  "account backed up": "account backed up",
-  "Backup account": "Backup account",
-  "Cancel": "Cancel",
-  "Download": "Download",
-  "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.": "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.",
-  "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.": "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.",
-  "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.": "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.",
-  "password": "password",
-  "password changed": "password changed",
-  "Change account password": "Change account password",
-  "Change": "Change",
-  "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.": "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.",
-  "The existing account password as specified when this account was created or when it was last changed.": "The existing account password as specified when this account was created or when it was last changed.",
-  "your current password": "your current password",
-  "The new account password. Once set, all future account unlocks will be performed with this new password.": "The new account password. Once set, all future account unlocks will be performed with this new password.",
-  "your new password": "your new password",
-  "created account": "created account",
-  "Add an account via seed": "Add an account via seed",
-  "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\".": "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\".",
-  "name": "name",
-  "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.": "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.",
-  "mnemonic seed": "mnemonic seed",
-  "development seed": "development seed",
-  "seed (hex or string)": "seed (hex or string)",
-  "Development": "Development",
-  "Mnemonic": "Mnemonic",
-  "Raw seed": "Raw seed",
-  "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).": "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).",
-  "Advanced creation options": "Advanced creation options",
-  "Determines what cryptography will be used to create this account. Note that to validate on Polkadot, the session account must use \"ed25519\".": "Determines what cryptography will be used to create this account. Note that to validate on Polkadot, the session account must use \"ed25519\".",
-  "keypair crypto type": "keypair crypto type",
-  "You can set a custom derivation path for this account using the following syntax \"/<soft-key>//<hard-key>\". The \"/<soft-key>\" and \"//<hard-key>\" may be repeated and mixed`.": "You can set a custom derivation path for this account using the following syntax \"/<soft-key>//<hard-key>\". The \"/<soft-key>\" and \"//<hard-key>\" may be repeated and mixed`.",
-  "secret derivation path": "secret derivation path",
-  "Save": "Save",
-  "Important notice": "Important notice",
-  "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.": "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.",
-  "Please make sure to save this file in a secure location as it is required, together with your password, to restore your account.": "Please make sure to save this file in a secure location as it is required, together with your password, to restore your account.",
-  "Create and backup account": "Create and backup account",
-  "account restored": "account restored",
-  "Add via backup file": "Add via backup file",
-  "Restore": "Restore",
-  "Select the JSON key file that was downloaded when you created the account. This JSON file contains your private key encrypted with your password.": "Select the JSON key file that was downloaded when you created the account. This JSON file contains your private key encrypted with your password.",
-  "backup file": "backup file",
-  "Type the password chosen at the account creation. It was used to encrypt your account's private key in the backup file.": "Type the password chosen at the account creation. It was used to encrypt your account's private key in the backup file.",
-  "Add account via Qr": "Add account via Qr",
-  "Name given to this account. You can change it at any point in the future.": "Name given to this account. You can change it at any point in the future.",
-  "Create": "Create",
-  "available ": "available ",
-  "Send funds": "Send funds",
-  "The account you will send funds from.": "The account you will send funds from.",
-  "send from account": "send from account",
-  "Select a contact or paste the address you want to send funds to.": "Select a contact or paste the address you want to send funds to.",
-  "send to address": "send to address",
-  "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.": "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.",
-  "amount": "amount",
-  "Make Transfer": "Make Transfer",
-  "Add account": "Add account",
-  "Restore JSON": "Restore JSON",
-  "Add via Qr": "Add via Qr",
-  "Query Ledger": "Query Ledger",
-  "No account yet?": "No account yet?",
-  "Stop generation": "Stop generation",
-  "Start generation": "Start generation",
-  "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.": "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.",
-  "Search for": "Search for",
-  "Should the search be case sensitive, e.g if you select \"no\" your search for \"Some\" may return addresses containing \"somE\" or \"sOme\"...": "Should the search be case sensitive, e.g if you select \"no\" your search for \"Some\" may return addresses containing \"somE\" or \"sOme\"...",
-  "case sensitive": "case sensitive",
-  "Evaluated {{count}} keys in {{elapsed}}s ({{avg}} keys/s)": "Evaluated {{count}} keys in {{elapsed}}s ({{avg}} keys/s)",
-  "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.": "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.",
-  "//hard/soft///password": "//hard/soft///password",
-  "new account": "new account",
-  "transferrable ": "transferrable ",
-  "Derive account from source": "Derive account from source",
-  "Change on-chain nickname": "Change on-chain nickname",
-  "The selected account to perform the derivation on.": "The selected account to perform the derivation on.",
-  "derive root account": "derive root account",
-  "Derive account from pair": "Derive account from pair",
-  "The password to unlock the selected account.": "The password to unlock the selected account.",
-  "derivation path": "derivation path",
-  "//hard/soft": "//hard/soft",
-  "Unlock": "Unlock",
-  "My memo": "My memo"
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/app-address-book.json b/pioneer/packages/old-apps/apps/public/locales/en/app-address-book.json
deleted file mode 100644
index 6ec705cd3a..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/app-address-book.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "address forgotten": "address forgotten",
-  "Forget this address": "Forget this address",
-  "deposit": "deposit",
-  "Send funds to this address": "Send funds to this address",
-  "My contacts": "My contacts",
-  "address edited": "address edited",
-  "address created": "address created",
-  "Add an address": "Add an address",
-  "Paste here the address of the contact you want to add to your address book.": "Paste here the address of the contact you want to add to your address book.",
-  "address": "address",
-  "Type the name of your contact. This name will be used across all the apps. It can be edited later on.": "Type the name of your contact. This name will be used across all the apps. It can be edited later on.",
-  "name": "name",
-  "Cancel": "Cancel",
-  "Save": "Save",
-  "Add contact": "Add contact",
-  "No contacts found.": "No contacts found.",
-  "new address": "new address",
-  "View memo": "View memo"
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/app-claims.json b/pioneer/packages/old-apps/apps/public/locales/en/app-claims.json
deleted file mode 100644
index f51bd03e23..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/app-claims.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "Your Ethereum account": "Your Ethereum account",
-  "has a valid claim for": "has a valid claim for",
-  "does not appear to have a valid claim. Please double check that you have signed the transaction correctly on the correct ETH account.": "does not appear to have a valid claim. Please double check that you have signed the transaction correctly on the correct ETH account.",
-  "Redeem": "Redeem",
-  "1. Select your {{chain}} account": "1. Select your {{chain}} account",
-  "The account you want to claim to.": "The account you want to claim to.",
-  "claim to account": "claim to account",
-  "Continue": "Continue",
-  "2. Sign ETH transaction": "2. Sign ETH transaction",
-  "copied": "copied",
-  "click to copy": "click to copy",
-  "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": "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",
-  "Confirm claim": "Confirm claim"
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/app-contracts.json b/pioneer/packages/old-apps/apps/public/locales/en/app-contracts.json
deleted file mode 100644
index f0067b273f..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/app-contracts.json
+++ /dev/null
@@ -1,64 +0,0 @@
-{
-  "You are using an ABI with an outdated format. Please generate a new one.": "You are using an ABI with an outdated format. Please generate a new one.",
-  "invalid ABI file selected": "invalid ABI file selected",
-  "click to select or drag and drop a JSON ABI file": "click to select or drag and drop a JSON ABI file",
-  "The code hash for the on-chain deployed code.": "The code hash for the on-chain deployed code.",
-  "code hash": "code hash",
-  "Save": "Save",
-  "Add an existing code hash": "Add an existing code hash",
-  "ABI": "ABI",
-  "Forget this code hash": "Forget this code hash",
-  "deploy": "deploy",
-  "Deploy this code hash as a smart contract": "Deploy this code hash as a smart contract",
-  "No code hashes available": "No code hashes available",
-  "Upload WASM": "Upload WASM",
-  "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.": "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.",
-  "compiled contract WASM": "compiled contract WASM",
-  "The code is not recognized as being in valid WASM format": "The code is not recognized as being in valid WASM format",
-  "Upload": "Upload",
-  "Unable to find on-chain WASM code for the supplied codeHash": "Unable to find on-chain WASM code for the supplied codeHash",
-  "The codeHash is not a valid hex hash": "The codeHash is not a valid hex hash",
-  "The address for the deployed contract instance.": "The address for the deployed contract instance.",
-  "contract address": "contract address",
-  "Add an existing contract": "Add an existing contract",
-  "Call a contract": "Call a contract",
-  "Specify the user account to use for this contract call. And fees will be deducted from this account.": "Specify the user account to use for this contract call. And fees will be deducted from this account.",
-  "call from account": "call from account",
-  "A deployed contract that has either been deployed or attached. The address and ABI are used to construct the parameters.": "A deployed contract that has either been deployed or attached. The address and ABI are used to construct the parameters.",
-  "contract to use": "contract to use",
-  "The message to send to this contract. Parameters are adjusted based on the ABI provided.": "The message to send to this contract. Parameters are adjusted based on the ABI provided.",
-  "message to send": "message to send",
-  "The allotted value for this contract, i.e. the amount transferred to the contract as part of this call.": "The allotted value for this contract, i.e. the amount transferred to the contract as part of this call.",
-  "value": "value",
-  "The maximum amount of gas that can be used by this deployment, if the code requires more, the deployment will fail.": "The maximum amount of gas that can be used by this deployment, if the code requires more, the deployment will fail.",
-  "maximum gas allowed": "maximum gas allowed",
-  "Cancel": "Cancel",
-  "Call": "Call",
-  "address forgotten": "address forgotten",
-  "Messages": "Messages",
-  "Forget this contract": "Forget this contract",
-  "execute": "execute",
-  "Call a method on this contract": "Call a method on this contract",
-  "No contracts available": "No contracts available",
-  "Deploy a code hash": "Deploy a code hash",
-  "Unable to find deployed contract code at the specified address": "Unable to find deployed contract code at the specified address",
-  "The value is not in a valid address format": "The value is not in a valid address format",
-  "The contract WASM previously deployed. Internally this is identified by the hash of the code, as either created or attached.": "The contract WASM previously deployed. Internally this is identified by the hash of the code, as either created or attached.",
-  "code for this contract": "code for this contract",
-  "The deployment constructor information for this contract, as provided by the ABI.": "The deployment constructor information for this contract, as provided by the ABI.",
-  "The allotted endowment for this contract, i.e. the amount transferred to the contract upon instantiation.": "The allotted endowment for this contract, i.e. the amount transferred to the contract upon instantiation.",
-  "endowment": "endowment",
-  "Deploy": "Deploy",
-  "Specify the user account to use for this deployment. And fees will be deducted from this account.": "Specify the user account to use for this deployment. And fees will be deducted from this account.",
-  "deployment account": "deployment account",
-  "Confirm ABI removal": "Confirm ABI removal",
-  "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.": "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.",
-  "This operation does not impact the associated on-chain code or any of its contracts.": "This operation does not impact the associated on-chain code or any of its contracts.",
-  "Remove": "Remove",
-  "The maximum amount of gas that can be used by this call. If the code requires more, the call will fail.": "The maximum amount of gas that can be used by this call. If the code requires more, the call will fail.",
-  "Call results": "Call results",
-  "constructor ": "constructor ",
-  "send as RPC call": "send as RPC call",
-  "send as transaction": "send as transaction",
-  "Clear all": "Clear all"
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/app-council.json b/pioneer/packages/old-apps/apps/public/locales/en/app-council.json
deleted file mode 100644
index 1692537d06..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/app-council.json
+++ /dev/null
@@ -1,43 +0,0 @@
-{
-  "Council overview": "Council overview",
-  "Motions": "Motions",
-  "No council motions": "No council motions",
-  "ayes ({{ayes}}/{{threshold}} to approve)": "ayes ({{ayes}}/{{threshold}} to approve)",
-  "Aye": "Aye",
-  "nays ({{nays}})": "nays ({{nays}})",
-  "Nay": "Nay",
-  "Propose a council motion": "Propose a council motion",
-  "threshold": "threshold",
-  "The minimum number of council votes required to approve this motion": "The minimum number of council votes required to approve this motion",
-  "Positive number between 1 and {{memberCount}}": "Positive number between 1 and {{memberCount}}",
-  "proposal": "proposal",
-  "candidate": "candidate",
-  "active until": "active until",
-  "council member": "council member",
-  "No members found": "No members found",
-  "members": "members",
-  "candidates": "candidates",
-  "Submit your council candidacy": "Submit your council candidacy",
-  "Candidate account": "Candidate account",
-  "This account will be nominated to fill the council slot you specify.": "This account will be nominated to fill the council slot you specify.",
-  "Submit candidacy": "Submit candidacy",
-  "seats": "seats",
-  "voting round": "voting round",
-  "term duration": "term duration",
-  "Vote for current candidates": "Vote for current candidates",
-  "Voting account": "Voting account",
-  "This account will be use to approve or disapprove each candidate.": "This account will be use to approve or disapprove each candidate.",
-  "Vote": "Vote",
-  "You have already voted in this round": "You have already voted in this round",
-  "Retract vote": "Retract vote",
-  "No vote": "No vote",
-  "No candidates found": "No candidates found",
-  "value": "value",
-  "member": "member",
-  "term progress": "term progress",
-  "Voters ({{count}})": "Voters ({{count}})",
-  "The amount that is associated with this vote. This value is is locked for the duration of the vote.": "The amount that is associated with this vote. This value is is locked for the duration of the vote.",
-  "vote value": "vote value",
-  "voting balance ": "voting balance ",
-  "runner up": "runner up"
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/app-dashboard.json b/pioneer/packages/old-apps/apps/public/locales/en/app-dashboard.json
deleted file mode 100644
index 0967ef424b..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/app-dashboard.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/app-democracy.json b/pioneer/packages/old-apps/apps/public/locales/en/app-democracy.json
deleted file mode 100644
index 9a4d7c2a17..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/app-democracy.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
-  "Democracy overview": "Democracy overview",
-  "depositors": "depositors",
-  "balance": "balance",
-  "No available proposals": "No available proposals",
-  "proposals": "proposals",
-  "Submit proposal": "Submit proposal",
-  "propose": "propose",
-  "The amount that will be bonded to submit the proposal": "The amount that will be bonded to submit the proposal",
-  "value": "value",
-  "ending at": "ending at",
-  "block #{{blockNumber}}, {{remaining}} blocks remaining": "block #{{blockNumber}}, {{remaining}} blocks remaining",
-  "activate at (if passed)": "activate at (if passed)",
-  "block #{{blockNumber}}": "block #{{blockNumber}}",
-  "vote threshold": "vote threshold",
-  "No available referendums": "No available referendums",
-  "referendum": "referendum",
-  "Second proposal": "Second proposal",
-  "Select the account you wish to second with. This will lock your funds until the proposal is either approved or rejected": "Select the account you wish to second with. This will lock your funds until the proposal is either approved or rejected",
-  "second with account": "second with account",
-  "Cancel": "Cancel",
-  "Second": "Second",
-  "referenda": "referenda",
-  "active": "active",
-  "launch period": "launch period",
-  "Vote on proposal": "Vote on proposal",
-  "Select the account you wish to vote with. You can approve \"aye\" or deny \"nay\" the proposal.": "Select the account you wish to vote with. You can approve \"aye\" or deny \"nay\" the proposal.",
-  "vote with account": "vote with account",
-  "Select your vote preferences for this proposal, either to approve or disapprove": "Select your vote preferences for this proposal, either to approve or disapprove",
-  "record my vote as": "record my vote as",
-  "Aye, I approve": "Aye, I approve",
-  "Nay, I do not approve": "Nay, I do not approve",
-  "Vote": "Vote"
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/app-explorer.json b/pioneer/packages/old-apps/apps/public/locales/en/app-explorer.json
deleted file mode 100644
index ba5e864a33..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/app-explorer.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
-  "events": "events",
-  "index": "index",
-  "Details": "Details",
-  "mortal, valid from #{{startAt}} to #{{endsAt}}": "mortal, valid from #{{startAt}} to #{{endsAt}}",
-  "mortal": "mortal",
-  "immortal": "immortal",
-  "No pending extrinsics are in the queue": "No pending extrinsics are in the queue",
-  "extrinsics": "extrinsics",
-  "logs": "logs",
-  "no events available": "no events available",
-  "blocks": "blocks",
-  "forks": "forks",
-  "Chain info": "Chain info",
-  "Block details": "Block details",
-  "Forks": "Forks",
-  "Node info": "Node info",
-  "recent blocks": "recent blocks",
-  "recent events": "recent events",
-  "pending extrinsics": "pending extrinsics",
-  "connected peers": "connected peers",
-  "role": "role",
-  "peer id": "peer id",
-  "best #": "best #",
-  "best hash": "best hash",
-  "no peers connected": "no peers connected",
-  "refresh in": "refresh in",
-  "total peers": "total peers",
-  "syncing": "syncing",
-  "yes": "yes",
-  "no": "no",
-  "queued tx": "queued tx",
-  "peer best": "peer best",
-  "our best": "our best",
-  "block hash or number to query": "block hash or number to query",
-  "last block": "last block",
-  "target": "target",
-  "total issuance": "total issuance",
-  "finalized": "finalized",
-  "best": "best",
-  "epoch": "epoch",
-  "session": "session",
-  "era": "era"
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/app-extrinsics.json b/pioneer/packages/old-apps/apps/public/locales/en/app-extrinsics.json
deleted file mode 100644
index 6bcd850bbb..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/app-extrinsics.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "Extrinsic submission": "Extrinsic submission",
-  "using the selected account": "using the selected account",
-  "with an account balance": "with an account balance",
-  "with a transaction nonce": "with a transaction nonce",
-  "submit the following extrinsic": "submit the following extrinsic",
-  "Submit Unsigned": "Submit Unsigned",
-  "Submit Transaction": "Submit Transaction"
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/app-generic-asset.json b/pioneer/packages/old-apps/apps/public/locales/en/app-generic-asset.json
deleted file mode 100644
index 48d9c0ce78..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/app-generic-asset.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "Forget this asset": "Forget this asset",
-  "Asset ID": "Asset ID",
-  "Register Asset": "Register Asset",
-  "No assets found.": "No assets found.",
-  "Assets": "Assets",
-  "Transfer": "Transfer",
-  "Register an Asset": "Register an Asset",
-  "Enter the Asset ID of the token you want to manage.": "Enter the Asset ID of the token you want to manage.",
-  "asset id": "asset id",
-  "Type the name of this Asset. This name will be used across all the apps. It can be edited later on.": "Type the name of this Asset. This name will be used across all the apps. It can be edited later on.",
-  "name": "name",
-  "Cancel": "Cancel",
-  "Register": "Register",
-  "available ": "available ",
-  "The account you will send funds from.": "The account you will send funds from.",
-  "send from account": "send from account",
-  "Select a contact or paste the address you want to send funds to.": "Select a contact or paste the address you want to send funds to.",
-  "send to address": "send to address",
-  "Enter the Asset ID of the token you want to transfer.": "Enter the Asset ID of the token you want to transfer.",
-  "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.": "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.",
-  "amount": "amount",
-  "Make Transfer": "Make Transfer",
-  "transferrable ": "transferrable "
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/app-js.json b/pioneer/packages/old-apps/apps/public/locales/en/app-js.json
deleted file mode 100644
index c7acf4deb2..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/app-js.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "Generate link to share code example": "Generate link to share code example",
-  "Copied to clipboard": "Copied to clipboard",
-  "Delete this custom example": "Delete this custom example",
-  "Name your example": "Name your example",
-  "Save snippet to local storage": "Save snippet to local storage",
-  "Select example": "Select example"
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/app-parachains.json b/pioneer/packages/old-apps/apps/public/locales/en/app-parachains.json
deleted file mode 100644
index 0205b02d8b..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/app-parachains.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "Parachains overview": "Parachains overview",
-  "the last heads of this parachain": "the last heads of this parachain",
-  "heads": "heads",
-  "<unknown>": "<unknown>",
-  "the relay dispatch queue size": "the relay dispatch queue size",
-  "relay queue": "relay queue",
-  "no deployed parachains": "no deployed parachains",
-  "parachains": "parachains",
-  "next id": "next id"
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/app-settings.json b/pioneer/packages/old-apps/apps/public/locales/en/app-settings.json
deleted file mode 100644
index 94d018058c..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/app-settings.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "This is not a valid JSON object.": "This is not a valid JSON object.",
-  "Your custom types have been added": "Your custom types have been added",
-  "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.": "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.",
-  "Additional types as a JSON file (or edit below)": "Additional types as a JSON file (or edit below)",
-  "Reset": "Reset",
-  "Save": "Save",
-  "Override the default ss58 prefix for address generation": "Override the default ss58 prefix for address generation",
-  "address prefix": "address prefix",
-  "Override the default identity icon display with a specific theme": "Override the default identity icon display with a specific theme",
-  "default icon theme": "default icon theme",
-  "Adjust the mode from basic (with a limited number of beginner-user-friendly apps) to full (with all basic & advanced apps available)": "Adjust the mode from basic (with a limited number of beginner-user-friendly apps) to full (with all basic & advanced apps available)",
-  "interface operation mode": "interface operation mode",
-  "Manage your connection to Ledger S": "Manage your connection to Ledger S",
-  "manage hardware connections": "manage hardware connections",
-  "default interface language": "default interface language",
-  "Cancel": "Cancel",
-  "Save & Reload": "Save & Reload",
-  "General": "General",
-  "Developer": "Developer",
-  "Select the remote endpoint, either from the dropdown on manual entered via the custom toggle": "Select the remote endpoint, either from the dropdown on manual entered via the custom toggle",
-  "remote node/endpoint to connect to": "remote node/endpoint to connect to",
-  "custom endpoint": "custom endpoint"
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/app-staking.json b/pioneer/packages/old-apps/apps/public/locales/en/app-staking.json
deleted file mode 100644
index 96811497fe..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/app-staking.json
+++ /dev/null
@@ -1,98 +0,0 @@
-{
-  "Cancel": "Cancel",
-  "Bond more": "Bond more",
-  "available ": "available ",
-  "Bond more funds": "Bond more funds",
-  "stash account": "stash account",
-  "Amount to add to the currently bonded funds. This is adjusted using the available funds on the account.": "Amount to add to the currently bonded funds. This is adjusted using the available funds on the account.",
-  "additional bonded funds": "additional bonded funds",
-  "stash": "stash",
-  "session": "session",
-  "nominating": "nominating",
-  "controller": "controller",
-  "Stop Nominating": "Stop Nominating",
-  "Stop Validating": "Stop Validating",
-  "Set Session Key": "Set Session Key",
-  "Validate": "Validate",
-  "Nominate": "Nominate",
-  "Unbond funds": "Unbond funds",
-  "Change controller account": "Change controller account",
-  "Change reward destination": "Change reward destination",
-  "Change validator preferences": "Change validator preferences",
-  "Rotate session keys": "Rotate session keys",
-  "Change session account": "Change session account",
-  "Change nominee(s)": "Change nominee(s)",
-  "Inject session keys (advanced)": "Inject session keys (advanced)",
-  "ed25519, Edwards": "ed25519, Edwards",
-  "sr15519, Schnorrkel": "sr15519, Schnorrkel",
-  "Inject Keys": "Inject Keys",
-  "suri (seed & derivation)": "suri (seed & derivation)",
-  "key type to set": "key type to set",
-  "Aura": "Aura",
-  "Babe": "Babe",
-  "Grandpa": "Grandpa",
-  "I'm Online": "I'm Online",
-  "Parachains": "Parachains",
-  "crypto type to use": "crypto type to use",
-  "generated public key": "generated public key",
-  "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.": "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.",
-  "Submit key": "Submit key",
-  "A controller account should not map to another stash. This selected controller is a stash, controlled by {{bondedId}}": "A controller account should not map to another stash. This selected controller is a stash, controlled by {{bondedId}}",
-  "A controller account should not be set to manages multiple stashes. The selected controller is already controlling {{stashId}}": "A controller account should not be set to manages multiple stashes. The selected controller is already controlling {{stashId}}",
-  "For fund security, your session key should not match your stash key.": "For fund security, your session key should not match your stash key.",
-  "The Threshold must be a positive number": "The Threshold must be a positive number",
-  "The Threshold must lower than 11": "The Threshold must lower than 11",
-  "Nominate Validators": "Nominate Validators",
-  "controller account": "controller account",
-  "Stash accounts that are to be nominated. Block rewards are split between validators and nominators. Only 16 nominees will be taken into account.": "Stash accounts that are to be nominated. Block rewards are split between validators and nominators. Only 16 nominees will be taken into account.",
-  "nominate the following addresses": "nominate the following addresses",
-  "select accounts(s) nominate": "select accounts(s) nominate",
-  "Warning - Changing the controller while validating will modify the associated session account. It is advised to stop validating before changing the controller account.": "Warning - Changing the controller while validating will modify the associated session account. It is advised to stop validating before changing the controller account.",
-  "The controller is the account that will be used to control any nominating or validating actions. Should not match another stash or controller.": "The controller is the account that will be used to control any nominating or validating actions. Should not match another stash or controller.",
-  "Set controller": "Set controller",
-  "Set reward destination": "Set reward destination",
-  "Bonding Preferences": "Bonding Preferences",
-  "The controller is the account that is be used to control any nominating or validating actions. I will sign this transaction.": "The controller is the account that is be used to control any nominating or validating actions. I will sign this transaction.",
-  "The destination account for any payments as either a nominator or validator": "The destination account for any payments as either a nominator or validator",
-  "payment destination": "payment destination",
-  "Changing the key only takes effect at the start of the next session. The input here is generates from the author_rotateKeys command": "Changing the key only takes effect at the start of the next session. The input here is generates from the author_rotateKeys command",
-  "Keys from rotateKeys": "Keys from rotateKeys",
-  "Changing the key only takes effect at the start of the next session. If validating, it must be an ed25519 key.": "Changing the key only takes effect at the start of the next session. If validating, it must be an ed25519 key.",
-  "Session key (ed25519)": "Session key (ed25519)",
-  "Unbond": "Unbond",
-  "The amount of funds to unbond, this is adjusted using the bonded funds on the stash account.": "The amount of funds to unbond, this is adjusted using the bonded funds on the stash account.",
-  "unbond amount": "unbond amount",
-  "Set validator preferences": "Set validator preferences",
-  "The number of time this validator can get slashed before being automatically unstaked (maximum of 10 allowed)": "The number of time this validator can get slashed before being automatically unstaked (maximum of 10 allowed)",
-  "automatic unstake threshold": "automatic unstake threshold",
-  "Amount taken up-front from the reward by the validator before splitting the remainder between themselves and the nominators": "Amount taken up-front from the reward by the validator before splitting the remainder between themselves and the nominators",
-  "reward commission": "reward commission",
-  "New stake": "New stake",
-  "No funds staked yet.": "No funds staked yet.",
-  "The total amount of the stash balance that will be at stake in any forthcoming rounds (should be less than the total amount available)": "The total amount of the stash balance that will be at stake in any forthcoming rounds (should be less than the total amount available)",
-  "value bonded": "value bonded",
-  "Bond": "Bond",
-  "Staking overview": "Staking overview",
-  "Account actions": "Account actions",
-  "Nominators ({{count}})": "Nominators ({{count}})",
-  "Show all validators and intentions": "Show all validators and intentions",
-  "Show only my nominations": "Show only my nominations",
-  "Show only with nominators": "Show only with nominators",
-  "Show only without nominators": "Show only without nominators",
-  "Show only with warnings": "Show only with warnings",
-  "Show only without warnings": "Show only without warnings",
-  "No addresses found": "No addresses found",
-  "validators": "validators",
-  "validator": "validator",
-  "next up": "next up",
-  "intention": "intention",
-  "waiting": "waiting",
-  "last block": "last block",
-  "era points": "era points",
-  "Selected for the next session": "Selected for the next session",
-  "Show only elected for next session": "Show only elected for next session",
-  "Active with {{blocks}} blocks authored{{hasMessage}} heartbeat message": "Active with {{blocks}} blocks authored{{hasMessage}} heartbeat message",
-  "transferrable ": "transferrable ",
-  "The specified value is greater than your free balance. The node will bond the maximum amount available.": "The specified value is greater than your free balance. The node will bond the maximum amount available.",
-  "Change session keys": "Change session keys"
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/app-storage.json b/pioneer/packages/old-apps/apps/public/locales/en/app-storage.json
deleted file mode 100644
index 74e1bdf568..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/app-storage.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "selected constant query": "selected constant query",
-  "Storage": "Storage",
-  "Constants": "Constants",
-  "Raw storage": "Raw storage",
-  "selected state query": "selected state query",
-  "hex-encoded storage key": "hex-encoded storage key"
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/app-sudo.json b/pioneer/packages/old-apps/apps/public/locales/en/app-sudo.json
deleted file mode 100644
index f7c244784a..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/app-sudo.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "Sudo access": "Sudo access",
-  "Set sudo key": "Set sudo key",
-  "You do not have access to the current sudo key": "You do not have access to the current sudo key",
-  "sudo key": "sudo key",
-  "Reassign": "Reassign",
-  "You will no longer have sudo access": "You will no longer have sudo access",
-  "submit the following change": "submit the following change",
-  "Submit Sudo": "Submit Sudo"
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/app-toolbox.json b/pioneer/packages/old-apps/apps/public/locales/en/app-toolbox.json
deleted file mode 100644
index 80e7338530..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/app-toolbox.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
-  "The input data to hash. This can be either specified as a hex value (0x-prefix) or as a string.": "The input data to hash. This can be either specified as a hex value (0x-prefix) or as a string.",
-  "from the following data": "from the following data",
-  "Detection on the input string to determine if it is hex or non-hex.": "Detection on the input string to determine if it is hex or non-hex.",
-  "hex input data": "hex input data",
-  "Yes": "Yes",
-  "No": "No",
-  "The blake2b 256-bit hash of the actual input data.": "The blake2b 256-bit hash of the actual input data.",
-  "the resulting hash is": "the resulting hash is",
-  "RPC calls": "RPC calls",
-  "Hash data": "Hash data",
-  "Sign message": "Sign message",
-  "Verify signature": "Verify signature",
-  "sign data from account": "sign data from account",
-  "with an index of": "with an index of",
-  "The actual JSONRPC module and function to make a call to.": "The actual JSONRPC module and function to make a call to.",
-  "call the selected endpoint": "call the selected endpoint",
-  "Submit RPC call": "Submit RPC call",
-  "select the account you wish to sign data with": "select the account you wish to sign data with",
-  "account": "account",
-  "The input data to sign. This can be either specified as a hex value (0x-prefix) or as a string.": "The input data to sign. This can be either specified as a hex value (0x-prefix) or as a string.",
-  "sign the following data": "sign the following data",
-  "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).": "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).",
-  "signature of supplied data": "signature of supplied data",
-  "You need to unlock this account to be able to sign data.": "You need to unlock this account to be able to sign data.",
-  "Unlock account": "Unlock account",
-  "Cancel": "Cancel",
-  "Unlock": "Unlock",
-  "You are about to unlock your account to allow for the signing of messages. Once active the signature will be generated based on the content provided.": "You are about to unlock your account to allow for the signing of messages. Once active the signature will be generated based on the content provided.",
-  "The account's password specified at the creation of this account.": "The account's password specified at the creation of this account.",
-  "password": "password",
-  "Crypto not detected": "Crypto not detected",
-  "The account that signed the input": "The account that signed the input",
-  "verify using address": "verify using address",
-  "The data that was signed. This is used in combination with the signature for the verification. It can either be hex or a 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.",
-  "using the following data": "using the following data",
-  "The signature as by the account being checked, supplied as a hex-formatted string.": "The signature as by the account being checked, supplied as a hex-formatted string.",
-  "the supplied signature": "the supplied signature",
-  "Cryptography used to create this signature. It is auto-detected on valid signatures.": "Cryptography used to create this signature. It is auto-detected on valid signatures.",
-  "signature crypto type": "signature crypto type"
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/app-transfer.json b/pioneer/packages/old-apps/apps/public/locales/en/app-transfer.json
deleted file mode 100644
index 0967ef424b..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/app-transfer.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/app-treasury.json b/pioneer/packages/old-apps/apps/public/locales/en/app-treasury.json
deleted file mode 100644
index f2ddb40dca..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/app-treasury.json
+++ /dev/null
@@ -1,36 +0,0 @@
-{
-  "Treasury overview": "Treasury overview",
-  "Edit settings": "Edit settings",
-  "Aye, I approve": "Aye, I approve",
-  "Nay, I do not approve": "Nay, I do not approve",
-  "Approve or reject proposal": "Approve or reject proposal",
-  "Respond": "Respond",
-  "Propose a majority council motion to either approve or reject this spend proposal": "Propose a majority council motion to either approve or reject this spend proposal",
-  "proposed council action": "proposed council action",
-  "Approved": "Approved",
-  "No approved proposals": "No approved proposals",
-  "No pending proposals": "No pending proposals",
-  "Proposals": "Proposals",
-  "Submit a spend proposal": "Submit a spend proposal",
-  "beneficiary": "beneficiary",
-  "The account to which the proposed balance will be transferred if approved": "The account to which the proposed balance will be transferred if approved",
-  "The amount that will be allocated from the treasury pot": "The amount that will be allocated from the treasury pot",
-  "value": "value",
-  "proposals": "proposals",
-  "approved": "approved",
-  "pot": "pot",
-  "using my account": "using my account",
-  "The account used to change your settings": "The account used to change your settings",
-  "configuration": "configuration",
-  "Proposal bond": "Proposal bond",
-  "proposal bond": "proposal bond",
-  "Proposal bond minimum": "Proposal bond minimum",
-  "proposal bond minimum": "proposal bond minimum",
-  "Spend period": "Spend period",
-  "spend period": "spend period",
-  "Burn percentage": "Burn percentage",
-  "burn percentage": "burn percentage",
-  "Submit": "Submit",
-  "Pot": "Pot",
-  "pot size": "pot size"
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/apps-routing.json b/pioneer/packages/old-apps/apps/public/locales/en/apps-routing.json
deleted file mode 100644
index 0967ef424b..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/apps-routing.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/apps.json b/pioneer/packages/old-apps/apps/public/locales/en/apps.json
deleted file mode 100644
index 16d99fec13..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/apps.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "Waiting for API to be connected and ready.": "Waiting for API to be connected and ready.",
-  "transfer received": "transfer received",
-  "update on #{{index}}": "update on #{{index}}",
-  "Select Network": "Select Network",
-  "You don't have any accounts. Some features are currently hidden and will only become available once you have accounts.": "You don't have any accounts. Some features are currently hidden and will only become available once you have accounts.",
-  "Create an account now.": "Create an account now.",
-  "Waiting for authorization from the extension. Please open the installed extension and approve or reject access.": "Waiting for authorization from the extension. Please open the installed extension and approve or reject access.",
-  "You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.": "You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.",
-  "With the Firefox browser connecting to insecure WebSockets ({{wsUrl}}) will fail due to the browser not allowing localhost access from a secure site.": "With the Firefox browser connecting to insecure WebSockets ({{wsUrl}}) will fail due to the browser not allowing localhost access from a secure site.",
-  "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.": "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."
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/react-api.json b/pioneer/packages/old-apps/apps/public/locales/en/react-api.json
deleted file mode 100644
index 0967ef424b..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/react-api.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/react-components.json b/pioneer/packages/old-apps/apps/public/locales/en/react-components.json
deleted file mode 100644
index bf4cf02033..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/react-components.json
+++ /dev/null
@@ -1,70 +0,0 @@
-{
-  "bonded": "bonded",
-  "transactions": "transactions",
-  "type": "type",
-  "{{value}}, {{remaining}} blocks left": "{{value}}, {{remaining}} blocks left",
-  "unstake threshold": "unstake threshold",
-  "commission": "commission",
-  "total": "total",
-  "available": "available",
-  "redeemable": "redeemable",
-  "Redeem these funds": "Redeem these funds",
-  "unbonding": "unbonding",
-  "session keys": "session keys",
-  "reward destination": "reward destination",
-  "or": "or",
-  "extrinsic hash": "extrinsic hash",
-  "lifetime": "lifetime",
-  "tip": "tip",
-  "No items": "No items",
-  "only this network": "only this network",
-  "use on any network": "use on any network",
-  "clipboard": "clipboard",
-  "address copied": "address copied",
-  "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.": "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.",
-  "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.": "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.",
-  "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.": "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.",
-  "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.": "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.",
-  "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.": "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.",
-  "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.": "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.",
-  "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.": "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.",
-  "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.": "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.",
-  "Confirm account removal": "Confirm account removal",
-  "Confirm address removal": "Confirm address removal",
-  "Confirm contract removal": "Confirm contract removal",
-  "Confirm code removal": "Confirm code removal",
-  "Cancel": "Cancel",
-  "Forget": "Forget",
-  "click to select or drag and drop the file here": "click to select or drag and drop the file here",
-  "{{name}} ({{size}} bytes)": "{{name}} ({{size}} bytes)",
-  "Positive number": "Positive number",
-  "View this {{type}} on Polkascan.io": "View this {{type}} on Polkascan.io",
-  "Mutates contract state": "Mutates contract state",
-  "Call this message": "Call this message",
-  "Deploy with this constructor": "Deploy with this constructor",
-  "Reported offline {{count}} times, last at {{blockNumber}}": "Reported offline {{count}} times, last at {{blockNumber}}",
-  "Reported online at #{{blockNumber}}": "Reported online at #{{blockNumber}}",
-  "Reported online in the current session": "Reported online in the current session",
-  "Dismiss all notifications": "Dismiss all notifications",
-  "proposed by": "proposed by",
-  "beneficiary": "beneficiary",
-  "value": "value",
-  "bond": "bond",
-  "Select the account to use for this action.": "Select the account to use for this action.",
-  "using my account": "using my account",
-  "Submit": "Submit",
-  "Vote on council proposal": "Vote on council proposal",
-  "Vote on proposal": "Vote on proposal",
-  "Vote with account": "Vote with account",
-  "Select the account you wish to vote with. You can approve \"aye\" or deny \"nay\" the proposal.": "Select the account you wish to vote with. You can approve \"aye\" or deny \"nay\" the proposal.",
-  "Select your vote preferences for this proposal, either to approve or disapprove": "Select your vote preferences for this proposal, either to approve or disapprove",
-  "record my vote as": "record my vote as",
-  "Vote": "Vote",
-  "Aye, I approve": "Aye, I approve",
-  "Nay, I do not approve": "Nay, I do not approve",
-  "reserved": "reserved",
-  "locked": "locked",
-  "Remove ABI": "Remove ABI",
-  "transferrable": "transferrable",
-  "No documentation provided": "No documentation provided"
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/react-params.json b/pioneer/packages/old-apps/apps/public/locales/en/react-params.json
deleted file mode 100644
index 63bf806a66..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/react-params.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "{{count}} key/value pairs encoded for submission": "{{count}} key/value pairs encoded for submission",
-  "include option": "include option",
-  "exclude option": "exclude option",
-  "<empty>": "<empty>",
-  "Add item": "Add item",
-  "Remove item": "Remove item"
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/react-query.json b/pioneer/packages/old-apps/apps/public/locales/en/react-query.json
deleted file mode 100644
index 0967ef424b..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/react-query.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/react-signer.json b/pioneer/packages/old-apps/apps/public/locales/en/react-signer.json
deleted file mode 100644
index 966ee7061f..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/react-signer.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "The selected account does not exist on your keyring": "The selected account does not exist on your keyring",
-  "The selected account does not have the required balance available for this transaction": "The selected account does not have the required balance available for this transaction",
-  "Submitting this transaction will drop the account balance to below the existential amount ({{existentialDeposit}}), which can result in the account being removed from the chain state and its associated funds burned.": "Submitting this transaction will drop the account balance to below the existential amount ({{existentialDeposit}}), which can result in the account being removed from the chain state and its associated funds burned.",
-  "This account does have a reserved/locked balance, not taken into account": "This account does have a reserved/locked balance, not taken into account",
-  "Fees includes the transaction fee and the per-byte fee": "Fees includes the transaction fee and the per-byte fee",
-  "Fees totalling {{fees}} will be applied to the submission": "Fees totalling {{fees}} will be applied to the submission",
-  "{{total}} estimated total amount (fees + value)": "{{total}} estimated total amount (fees + value)",
-  "Estimation does not account for the transaction weight": "Estimation does not account for the transaction weight",
-  "The deposit is below the {{minimum}} minimum required for the proposal to be evaluated": "The deposit is below the {{minimum}} minimum required for the proposal to be evaluated",
-  "The deposit of {{deposit}} will be reserved until the proposal is completed": "The deposit of {{deposit}} will be reserved until the proposal is completed",
-  "The final recipient balance is less or equal to {{existentialDeposit}} (the existential amount) and will not be reflected": "The final recipient balance is less or equal to {{existentialDeposit}} (the existential amount) and will not be reflected",
-  "A fee of {{creationFee}} will be deducted from the sender since the destination account does not exist": "A fee of {{creationFee}} will be deducted from the sender since the destination account does not exist",
-  "Cancel": "Cancel",
-  "Scan Signature Qr": "Scan Signature Qr",
-  "Submit (no signature)": "Submit (no signature)",
-  "Sign via {{hardwareType}}": "Sign via {{hardwareType}}",
-  "Sign via Qr": "Sign via Qr",
-  "Sign and Submit": "Sign and Submit",
-  "Add a tip to this extrinsic, paying the block author for greater priority": "Add a tip to this extrinsic, paying the block author for greater priority",
-  "Tip (optional)": "Tip (optional)",
-  "wrong password": "wrong password",
-  "sending from my account": "sending from my account",
-  "unlock account with password": "unlock account with password",
-  "Include an optional tip for faster processing": "Include an optional tip for faster processing",
-  "Do not include a tip for the block author": "Do not include a tip for the block author"
-}
diff --git a/pioneer/packages/old-apps/apps/public/locales/en/ui.json b/pioneer/packages/old-apps/apps/public/locales/en/ui.json
deleted file mode 100644
index f0dfd47689..0000000000
--- a/pioneer/packages/old-apps/apps/public/locales/en/ui.json
+++ /dev/null
@@ -1,645 +0,0 @@
-{
-  "any text": "",
-  "account forgotten": "",
-  "Forget this account": "",
-  "Create a backup file for this account": "",
-  "Change this account's password": "",
-  "send": "",
-  "Send funds from this account": "",
-  "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 -": "",
-  "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.": "",
-  "Learn more...": "",
-  "My accounts": "",
-  "Vanity address": "",
-  "Backup account": "",
-  "Cancel": "",
-  "Download": "",
-  "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.": "",
-  "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.": "",
-  "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.": "",
-  "password": "",
-  "account backed up": "",
-  "Change account password": "",
-  "Change": "",
-  "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.": "",
-  "The existing account password as specified when this account was created or when it was last changed.": "",
-  "your current password": "",
-  "The new account password. Once set, all future account unlocks will be performed with this new password.": "",
-  "your new password": "",
-  "password changed": "",
-  "created account": "",
-  "Add an account via seed": "",
-  "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\".": "",
-  "name": "",
-  "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.": "",
-  "mnemonic seed": "",
-  "development seed": "",
-  "seed (hex or string)": "",
-  "Development": "",
-  "Mnemonic": "",
-  "Raw seed": "",
-  "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).": "",
-  "Advanced creation options": "",
-  "Determines what cryptography will be used to create this account. Note that to validate on Polkadot, the session account must use \"ed25519\".": "",
-  "keypair crypto type": "",
-  "You can set a custom derivation path for this account using the following syntax \"/<soft-key>//<hard-key>\". The \"/<soft-key>\" and \"//<hard-key>\" may be repeated and mixed`.": "",
-  "secret derivation path": "",
-  "Save": "",
-  "Important notice": "",
-  "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.": "",
-  "Please make sure to save this file in a secure location as it is required, together with your password, to restore your account.": "",
-  "Create and backup account": "",
-  "Add via backup file": "",
-  "Restore": "",
-  "Select the JSON key file that was downloaded when you created the account. This JSON file contains your private key encrypted with your password.": "",
-  "backup file": "",
-  "Type the password chosen at the account creation. It was used to encrypt your account's private key in the backup file.": "",
-  "account restored": "",
-  "Add account via Qr": "",
-  "Name given to this account. You can change it at any point in the future.": "",
-  "Create": "",
-  "available ": "",
-  "Send funds": "",
-  "The account you will send funds from.": "",
-  "send from account": "",
-  "Select a contact or paste the address you want to send funds to.": "",
-  "send to address": "",
-  "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.": "",
-  "amount": "",
-  "Make Transfer": "",
-  "Add account": "",
-  "Restore JSON": "",
-  "Add via Qr": "",
-  "Query Ledger": "",
-  "No account yet?": "",
-  "Stop generation": "",
-  "Start generation": "",
-  "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.": "",
-  "Search for": "",
-  "Should the search be case sensitive, e.g if you select \"no\" your search for \"Some\" may return addresses containing \"somE\" or \"sOme\"...": "",
-  "case sensitive": "",
-  "Evaluated {{count}} keys in {{elapsed}}s ({{avg}} keys/s)": "",
-  "address forgotten": "",
-  "Forget this address": "",
-  "deposit": "",
-  "Send funds to this address": "",
-  "My contacts": "",
-  "address edited": "",
-  "address created": "",
-  "Add an address": "",
-  "Paste here the address of the contact you want to add to your address book.": "",
-  "address": "",
-  "Type the name of your contact. This name will be used across all the apps. It can be edited later on.": "",
-  "Add contact": "",
-  "No contacts found.": "",
-  "Your Ethereum account": "",
-  "has a valid claim for": "",
-  "does not appear to have a valid claim. Please double check that you have signed the transaction correctly on the correct ETH account.": "",
-  "1. Select your {{chain}} account": "",
-  "The account you want to claim to.": "",
-  "claim to account": "",
-  "Continue": "",
-  "2. Sign ETH transaction": "",
-  "copied": "",
-  "click to copy": "",
-  "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": "",
-  "Confirm claim": "",
-  "Redeem": "",
-  "invalid ABI file selected": "",
-  "click to select or drag and drop a JSON ABI file": "",
-  "You are using an ABI with an outdated format. Please generate a new one.": "",
-  "Add an existing code hash": "",
-  "The code hash for the on-chain deployed code.": "",
-  "code hash": "",
-  "ABI": "",
-  "Forget this code hash": "",
-  "deploy": "",
-  "Deploy this code hash as a smart contract": "",
-  "No code hashes available": "",
-  "Upload WASM": "",
-  "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.": "",
-  "compiled contract WASM": "",
-  "The code is not recognized as being in valid WASM format": "",
-  "Upload": "",
-  "Unable to find on-chain WASM code for the supplied codeHash": "",
-  "The codeHash is not a valid hex hash": "",
-  "Add an existing contract": "",
-  "The address for the deployed contract instance.": "",
-  "contract address": "",
-  "Call a contract": "",
-  "Specify the user account to use for this contract call. And fees will be deducted from this account.": "",
-  "call from account": "",
-  "A deployed contract that has either been deployed or attached. The address and ABI are used to construct the parameters.": "",
-  "contract to use": "",
-  "The message to send to this contract. Parameters are adjusted based on the ABI provided.": "",
-  "message to send": "",
-  "The allotted value for this contract, i.e. the amount transferred to the contract as part of this call.": "",
-  "value": "",
-  "The maximum amount of gas that can be used by this deployment, if the code requires more, the deployment will fail.": "",
-  "maximum gas allowed": "",
-  "Call": "",
-  "Messages": "",
-  "Forget this contract": "",
-  "execute": "",
-  "Call a method on this contract": "",
-  "No contracts available": "",
-  "Deploy a code hash": "",
-  "Unable to find deployed contract code at the specified address": "",
-  "The value is not in a valid address format": "",
-  "The contract WASM previously deployed. Internally this is identified by the hash of the code, as either created or attached.": "",
-  "code for this contract": "",
-  "The deployment constructor information for this contract, as provided by the ABI.": "",
-  "The allotted endowment for this contract, i.e. the amount transferred to the contract upon instantiation.": "",
-  "endowment": "",
-  "Deploy": "",
-  "Specify the user account to use for this deployment. And fees will be deducted from this account.": "",
-  "deployment account": "",
-  "Confirm ABI removal": "",
-  "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.": "",
-  "This operation does not impact the associated on-chain code or any of its contracts.": "",
-  "Remove": "",
-  "Council overview": "",
-  "Motions": "",
-  "No council motions": "",
-  "ayes ({{ayes}}/{{threshold}} to approve)": "",
-  "Aye": "",
-  "nays ({{nays}})": "",
-  "Nay": "",
-  "Propose a council motion": "",
-  "threshold": "",
-  "The minimum number of council votes required to approve this motion": "",
-  "Positive number between 1 and {{memberCount}}": "",
-  "proposal": "",
-  "candidate": "",
-  "active until": "",
-  "council member": "",
-  "No members found": "",
-  "members": "",
-  "candidates": "",
-  "Submit your council candidacy": "",
-  "Candidate account": "",
-  "This account will be nominated to fill the council slot you specify.": "",
-  "Submit candidacy": "",
-  "seats": "",
-  "voting round": "",
-  "term duration": "",
-  "Vote for current candidates": "",
-  "Voting account": "",
-  "This account will be use to approve or disapprove each candidate.": "",
-  "Vote": "",
-  "You have already voted in this round": "",
-  "Retract vote": "",
-  "No vote": "",
-  "Democracy overview": "",
-  "depositors": "",
-  "balance": "",
-  "No available proposals": "",
-  "proposals": "",
-  "Submit proposal": "",
-  "propose": "",
-  "The amount that will be bonded to submit the proposal": "",
-  "ending at": "",
-  "block #{{blockNumber}}, {{remaining}} blocks remaining": "",
-  "activate at (if passed)": "",
-  "block #{{blockNumber}}": "",
-  "vote threshold": "",
-  "No available referendums": "",
-  "referendum": "",
-  "Second proposal": "",
-  "Select the account you wish to second with. This will lock your funds until the proposal is either approved or rejected": "",
-  "second with account": "",
-  "Second": "",
-  "referenda": "",
-  "active": "",
-  "launch period": "",
-  "Vote on proposal": "",
-  "Select the account you wish to vote with. You can approve \"aye\" or deny \"nay\" the proposal.": "",
-  "vote with account": "",
-  "Select your vote preferences for this proposal, either to approve or disapprove": "",
-  "record my vote as": "",
-  "Aye, I approve": "",
-  "Nay, I do not approve": "",
-  "events": "",
-  "index": "",
-  "Details": "",
-  "mortal, valid from #{{startAt}} to #{{endsAt}}": "",
-  "mortal": "",
-  "immortal": "",
-  "No pending extrinsics are in the queue": "",
-  "extrinsics": "",
-  "logs": "",
-  "no events available": "",
-  "blocks": "",
-  "forks": "",
-  "Chain info": "",
-  "Block details": "",
-  "Forks": "",
-  "Node info": "",
-  "recent blocks": "",
-  "recent events": "",
-  "pending extrinsics": "",
-  "connected peers": "",
-  "role": "",
-  "peer id": "",
-  "best #": "",
-  "best hash": "",
-  "no peers connected": "",
-  "refresh in": "",
-  "total peers": "",
-  "syncing": "",
-  "yes": "",
-  "no": "",
-  "queued tx": "",
-  "peer best": "",
-  "our best": "",
-  "block hash or number to query": "",
-  "last block": "",
-  "target": "",
-  "total issuance": "",
-  "finalized": "",
-  "best": "",
-  "epoch": "",
-  "session": "",
-  "era": "",
-  "Extrinsic submission": "",
-  "using the selected account": "",
-  "with an account balance": "",
-  "with a transaction nonce": "",
-  "submit the following extrinsic": "",
-  "Submit Unsigned": "",
-  "Submit Transaction": "",
-  "Forget this asset": "",
-  "Asset ID": "",
-  "Register Asset": "",
-  "No assets found.": "",
-  "Assets": "",
-  "Transfer": "",
-  "Register an Asset": "",
-  "Enter the Asset ID of the token you want to manage.": "",
-  "asset id": "",
-  "Type the name of this Asset. This name will be used across all the apps. It can be edited later on.": "",
-  "Register": "",
-  "Enter the Asset ID of the token you want to transfer.": "",
-  "Generate link to share code example": "",
-  "Copied to clipboard": "",
-  "Delete this custom example": "",
-  "Name your example": "",
-  "Save snippet to local storage": "",
-  "Select example": "",
-  "Parachains overview": "",
-  "the last heads of this parachain": "",
-  "heads": "",
-  "<unknown>": "",
-  "the relay dispatch queue size": "",
-  "relay queue": "",
-  "no deployed parachains": "",
-  "parachains": "",
-  "next id": "",
-  "This is not a valid JSON object.": "",
-  "Your custom types have been added": "",
-  "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.": "",
-  "Additional types as a JSON file (or edit below)": "",
-  "Reset": "",
-  "Override the default ss58 prefix for address generation": "",
-  "address prefix": "",
-  "Override the default identity icon display with a specific theme": "",
-  "default icon theme": "",
-  "Adjust the mode from basic (with a limited number of beginner-user-friendly apps) to full (with all basic & advanced apps available)": "",
-  "interface operation mode": "",
-  "Manage your connection to Ledger S": "",
-  "manage hardware connections": "",
-  "default interface language": "",
-  "Save & Reload": "",
-  "General": "",
-  "Developer": "",
-  "Select the remote endpoint, either from the dropdown on manual entered via the custom toggle": "",
-  "remote node/endpoint to connect to": "",
-  "custom endpoint": "",
-  "Bond more": "",
-  "Bond more funds": "",
-  "stash account": "",
-  "Amount to add to the currently bonded funds. This is adjusted using the available funds on the account.": "",
-  "additional bonded funds": "",
-  "stash": "",
-  "nominating": "",
-  "controller": "",
-  "Stop Nominating": "",
-  "Stop Validating": "",
-  "Set Session Key": "",
-  "Validate": "",
-  "Nominate": "",
-  "Unbond funds": "",
-  "Change controller account": "",
-  "Change reward destination": "",
-  "Change validator preferences": "",
-  "Rotate session keys": "",
-  "Change session account": "",
-  "Change nominee(s)": "",
-  "Inject session keys (advanced)": "",
-  "ed25519, Edwards": "",
-  "sr15519, Schnorrkel": "",
-  "Inject Keys": "",
-  "suri (seed & derivation)": "",
-  "key type to set": "",
-  "Aura": "",
-  "Babe": "",
-  "Grandpa": "",
-  "I'm Online": "",
-  "Parachains": "",
-  "crypto type to use": "",
-  "generated public key": "",
-  "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.": "",
-  "Submit key": "",
-  "A controller account should not map to another stash. This selected controller is a stash, controlled by {{bondedId}}": "",
-  "A controller account should not be set to manages multiple stashes. The selected controller is already controlling {{stashId}}": "",
-  "For fund security, your session key should not match your stash key.": "",
-  "The Threshold must be a positive number": "",
-  "The Threshold must lower than 11": "",
-  "Nominate Validators": "",
-  "controller account": "",
-  "Stash accounts that are to be nominated. Block rewards are split between validators and nominators. Only 16 nominees will be taken into account.": "",
-  "nominate the following addresses": "",
-  "select accounts(s) nominate": "",
-  "Warning - Changing the controller while validating will modify the associated session account. It is advised to stop validating before changing the controller account.": "",
-  "The controller is the account that will be used to control any nominating or validating actions. Should not match another stash or controller.": "",
-  "Set controller": "",
-  "Set reward destination": "",
-  "Bonding Preferences": "",
-  "The controller is the account that is be used to control any nominating or validating actions. I will sign this transaction.": "",
-  "The destination account for any payments as either a nominator or validator": "",
-  "payment destination": "",
-  "Changing the key only takes effect at the start of the next session. The input here is generates from the author_rotateKeys command": "",
-  "Keys from rotateKeys": "",
-  "Changing the key only takes effect at the start of the next session. If validating, it must be an ed25519 key.": "",
-  "Session key (ed25519)": "",
-  "Unbond": "",
-  "The amount of funds to unbond, this is adjusted using the bonded funds on the stash account.": "",
-  "unbond amount": "",
-  "Set validator preferences": "",
-  "The number of time this validator can get slashed before being automatically unstaked (maximum of 10 allowed)": "",
-  "automatic unstake threshold": "",
-  "Amount taken up-front from the reward by the validator before splitting the remainder between themselves and the nominators": "",
-  "reward commission": "",
-  "New stake": "",
-  "No funds staked yet.": "",
-  "The total amount of the stash balance that will be at stake in any forthcoming rounds (should be less than the total amount available)": "",
-  "value bonded": "",
-  "Bond": "",
-  "Staking overview": "",
-  "Account actions": "",
-  "Nominators ({{count}})": "",
-  "Show all validators and intentions": "",
-  "Show only my nominations": "",
-  "Show only with nominators": "",
-  "Show only without nominators": "",
-  "Show only with warnings": "",
-  "Show only without warnings": "",
-  "No addresses found": "",
-  "validators": "",
-  "validator": "",
-  "next up": "",
-  "intention": "",
-  "waiting": "",
-  "selected constant query": "",
-  "Storage": "",
-  "Constants": "",
-  "Raw storage": "",
-  "selected state query": "",
-  "hex-encoded storage key": "",
-  "Sudo access": "",
-  "Set sudo key": "",
-  "You do not have access to the current sudo key": "",
-  "sudo key": "",
-  "Reassign": "",
-  "You will no longer have sudo access": "",
-  "submit the following change": "",
-  "Submit Sudo": "",
-  "The input data to hash. This can be either specified as a hex value (0x-prefix) or as a string.": "",
-  "from the following data": "",
-  "Detection on the input string to determine if it is hex or non-hex.": "",
-  "hex input data": "",
-  "Yes": "",
-  "No": "",
-  "The blake2b 256-bit hash of the actual input data.": "",
-  "the resulting hash is": "",
-  "RPC calls": "",
-  "Hash data": "",
-  "Sign message": "",
-  "Verify signature": "",
-  "sign data from account": "",
-  "with an index of": "",
-  "The actual JSONRPC module and function to make a call to.": "",
-  "call the selected endpoint": "",
-  "Submit RPC call": "",
-  "select the account you wish to sign data with": "",
-  "account": "",
-  "The input data to sign. This can be either specified as a hex value (0x-prefix) or as a string.": "",
-  "sign the following data": "",
-  "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).": "",
-  "signature of supplied data": "",
-  "You need to unlock this account to be able to sign data.": "",
-  "Unlock account": "",
-  "Unlock": "",
-  "You are about to unlock your account to allow for the signing of messages. Once active the signature will be generated based on the content provided.": "",
-  "The account's password specified at the creation of this account.": "",
-  "Crypto not detected": "",
-  "The account that signed the input": "",
-  "verify using address": "",
-  "The data that was signed. This is used in combination with the signature for the verification. It can either be hex or a string.": "",
-  "using the following data": "",
-  "The signature as by the account being checked, supplied as a hex-formatted string.": "",
-  "the supplied signature": "",
-  "Cryptography used to create this signature. It is auto-detected on valid signatures.": "",
-  "signature crypto type": "",
-  "Treasury overview": "",
-  "Edit settings": "",
-  "Approve or reject proposal": "",
-  "Respond": "",
-  "Propose a majority council motion to either approve or reject this spend proposal": "",
-  "proposed council action": "",
-  "Approved": "",
-  "No approved proposals": "",
-  "No pending proposals": "",
-  "Proposals": "",
-  "Submit a spend proposal": "",
-  "beneficiary": "",
-  "The account to which the proposed balance will be transferred if approved": "",
-  "The amount that will be allocated from the treasury pot": "",
-  "approved": "",
-  "pot": "",
-  "using my account": "",
-  "The account used to change your settings": "",
-  "configuration": "",
-  "Proposal bond": "",
-  "proposal bond": "",
-  "Proposal bond minimum": "",
-  "proposal bond minimum": "",
-  "Spend period": "",
-  "spend period": "",
-  "Burn percentage": "",
-  "burn percentage": "",
-  "Submit": "",
-  "Pot": "",
-  "pot size": "",
-  "Waiting for API to be connected and ready.": "",
-  "transfer received": "",
-  "update on #{{index}}": "",
-  "Select Network": "",
-  "You don't have any accounts. Some features are currently hidden and will only become available once you have accounts.": "",
-  "Create an account now.": "",
-  "Waiting for authorization from the extension. Please open the installed extension and approve or reject access.": "",
-  "You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.": "",
-  "With the Firefox browser connecting to insecure WebSockets ({{wsUrl}}) will fail due to the browser not allowing localhost access from a secure site.": "",
-  "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.": "",
-  "bonded": "",
-  "transactions": "",
-  "type": "",
-  "{{value}}, {{remaining}} blocks left": "",
-  "unstake threshold": "",
-  "commission": "",
-  "total": "",
-  "available": "",
-  "redeemable": "",
-  "Redeem these funds": "",
-  "unbonding": "",
-  "session keys": "",
-  "reward destination": "",
-  "or": "",
-  "extrinsic hash": "",
-  "lifetime": "",
-  "tip": "",
-  "No items": "",
-  "only this network": "",
-  "use on any network": "",
-  "clipboard": "",
-  "address copied": "",
-  "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.": "",
-  "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.": "",
-  "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.": "",
-  "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.": "",
-  "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.": "",
-  "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.": "",
-  "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.": "",
-  "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.": "",
-  "Confirm account removal": "",
-  "Confirm address removal": "",
-  "Confirm contract removal": "",
-  "Confirm code removal": "",
-  "Forget": "",
-  "click to select or drag and drop the file here": "",
-  "{{name}} ({{size}} bytes)": "",
-  "Positive number": "",
-  "View this {{type}} on Polkascan.io": "",
-  "Mutates contract state": "",
-  "Call this message": "",
-  "Deploy with this constructor": "",
-  "Reported offline {{count}} times, last at {{blockNumber}}": "",
-  "Reported online at #{{blockNumber}}": "",
-  "Reported online in the current session": "",
-  "Dismiss all notifications": "",
-  "proposed by": "",
-  "bond": "",
-  "Select the account to use for this action.": "",
-  "Vote on council proposal": "",
-  "Vote with account": "",
-  "{{count}} key/value pairs encoded for submission": "",
-  "include option": "",
-  "exclude option": "",
-  "<empty>": "",
-  "Add item": "",
-  "Remove item": "",
-  "The selected account does not exist on your keyring": "",
-  "The selected account does not have the required balance available for this transaction": "",
-  "Submitting this transaction will drop the account balance to below the existential amount ({{existentialDeposit}}), which can result in the account being removed from the chain state and its associated funds burned.": "",
-  "This account does have a reserved/locked balance, not taken into account": "",
-  "Fees includes the transaction fee and the per-byte fee": "",
-  "Fees totalling {{fees}} will be applied to the submission": "",
-  "{{total}} estimated total amount (fees + value)": "",
-  "Estimation does not account for the transaction weight": "",
-  "The deposit is below the {{minimum}} minimum required for the proposal to be evaluated": "",
-  "The deposit of {{deposit}} will be reserved until the proposal is completed": "",
-  "The final recipient balance is less or equal to {{existentialDeposit}} (the existential amount) and will not be reflected": "",
-  "A fee of {{creationFee}} will be deducted from the sender since the destination account does not exist": "",
-  "Scan Signature Qr": "",
-  "Submit (no signature)": "",
-  "Sign via {{hardwareType}}": "",
-  "Sign via Qr": "",
-  "Sign and Submit": "",
-  "Add a tip to this extrinsic, paying the block author for greater priority": "",
-  "Tip (optional)": "",
-  "wrong password": "",
-  "sending from my account": "",
-  "unlock account with password": "",
-  "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.": "",
-  "//hard/soft///password": "",
-  "The maximum amount of gas that can be used by this call. If the code requires more, the call will fail.": "",
-  "Call results": "",
-  "constructor ": "",
-  "new account": "",
-  "new address": "",
-  "No candidates found": "",
-  "member": "",
-  "term progress": "",
-  "reserved": "",
-  "locked": "",
-  "Voters ({{count}})": "",
-  "era points": "",
-  "Selected for the next session": "",
-  "Show only elected for next session": "",
-  "send as RPC call": "",
-  "send as transaction": "",
-  "Clear all": "",
-  "Active with {{blocks}} blocks authored{{hasMessage}} heartbeat message": "",
-  "Remove ABI": "",
-  "transferrable ": "",
-  "transferrable": "",
-  "Include an optional tip for faster processing": "",
-  "Do not include a tip for the block author": "",
-  "The specified value is greater than your free balance. The node will bond the maximum amount available.": "",
-  "The amount that is associated with this vote. This value is is locked for the duration of the vote.": "",
-  "vote value": "",
-  "voting balance ": "",
-  "Change session keys": "",
-  "No documentation provided": "",
-  "Derive account from source": "",
-  "Change on-chain nickname": "",
-  "The selected account to perform the derivation on.": "",
-  "derive root account": "",
-  "Derive account from pair": "",
-  "The password to unlock the selected account.": "",
-  "derivation path": "",
-  "//hard/soft": "",
-  "runner up": "",
-  "My memo": "",
-  "View memo": "",
-  "Dashboard": "",
-  "Council members": "",
-  "Applicants": "",
-  "Votes": "",
-  "Reveal a vote": "",
-  "Forum": "",
-  "New category": "",
-  "Forum sudo": "",
-  "Help and News": "",
-  "Explore": "",
-  "All members": "",
-  "Edit my profile": "",
-  "Active": "",
-  "Finalized": "",
-  "Create new": "",
-  "Actors": "",
-  "Available Roles": "",
-  "My Requests": "",
-  "Working groups": "",
-  "Opportunities": "",
-  "My roles and applications": "",
-  "My channels": "",
-  "New channel": "",
-  "My videos": "",
-  "OLD: Explore": "",
-  "OLD: Upload": "",
-  "Staked Providers": "",
-  "Role Details": "",
-  "My Staking Requests": "",
-  "New Proposal": ""
-}
diff --git a/pioneer/packages/old-apps/apps/public/manifest.json b/pioneer/packages/old-apps/apps/public/manifest.json
deleted file mode 100644
index 274491d22b..0000000000
--- a/pioneer/packages/old-apps/apps/public/manifest.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "short_name": "Polkadot Apps",
-  "name": "Apps for interacting with a Polkadot node",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": "index.html",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
diff --git a/pioneer/packages/old-apps/apps/public/next/index.html b/pioneer/packages/old-apps/apps/public/next/index.html
deleted file mode 100644
index ea0a9a3239..0000000000
--- a/pioneer/packages/old-apps/apps/public/next/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!DOCTYPE HTML>
-<html lang="en-US">
-  <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="refresh" content="0; url=https://polkadot.js.org/apps/">
-    <script type="text/javascript">
-        window.location.href = "https://polkadot.js.org/apps/"
-    </script>
-    <title>https://polkadot.js.org/apps/</title>
-  </head>
-  <body>
-    The "next" version is now part of the "master" branch. If you are not redirected automatically, follow this <a href="https://polkadot.js.org/apps/">https://polkadot.js.org/apps/</a> link.
-  </body>
-</html>
diff --git a/pioneer/packages/old-apps/apps/src/Apps.tsx b/pioneer/packages/old-apps/apps/src/Apps.tsx
deleted file mode 100644
index 7df2597bc1..0000000000
--- a/pioneer/packages/old-apps/apps/src/Apps.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps as Props } from '@polkadot/react-components/types';
-
-// this is disabled, Chrome + WASM memory leak makes it slow & laggy. If enabled
-// we also need to export the default as hot(Apps) (last line)
-// import { hot } from 'react-hot-loader/root';
-
-import React, { useState } from 'react';
-import store from 'store';
-import styled from 'styled-components';
-import { withCalls } from '@polkadot/react-api';
-import GlobalStyle from '@polkadot/react-components/styles';
-import Signer from '@polkadot/react-signer';
-
-import ConnectingOverlay from './overlays/Connecting';
-import { SideBarTransition, SIDEBAR_MENU_THRESHOLD } from './constants';
-import Content from './Content';
-import SideBar from './SideBar';
-
-interface SidebarState {
-  isCollapsed: boolean;
-  isMenu: boolean;
-  menuOpen: boolean;
-  transition: SideBarTransition;
-}
-
-function Placeholder (): React.ReactElement {
-  return (
-    <div className='api-warm' />
-  );
-}
-
-const WarmUp = withCalls<{}>(
-  'derive.accounts.indexes',
-  'derive.balances.fees',
-  'derive.staking.overview'
-  // This are very ineffective queries that
-  //   (a) adds load to the RPC node when activated globally
-  //   (b) is used in additional information (next-up)
-  // 'derive.staking.all'
-  // 'derive.staking.controllers'
-  // 'query.staking.nominators'
-)(Placeholder);
-
-function Apps ({ className }: Props): React.ReactElement<Props> {
-  const [sidebar, setSidebar] = useState<SidebarState>({
-    isCollapsed: false,
-    transition: SideBarTransition.COLLAPSED,
-    ...store.get('sidebar', {}),
-    menuOpen: false,
-    isMenu: window.innerWidth < SIDEBAR_MENU_THRESHOLD
-  });
-
-  const { isCollapsed, isMenu, menuOpen } = sidebar;
-
-  const _setSidebar = (update: Partial<SidebarState>): void =>
-    setSidebar(store.set('sidebar', { ...sidebar, ...update }));
-  const _collapse = (): void =>
-    _setSidebar({ isCollapsed: !isCollapsed });
-  const _toggleMenu = (): void =>
-    _setSidebar({ isCollapsed: false, menuOpen: true });
-  const _handleResize = (): void => {
-    const transition = window.innerWidth < SIDEBAR_MENU_THRESHOLD
-      ? SideBarTransition.MINIMISED_AND_EXPANDED
-      : SideBarTransition.EXPANDED_AND_MAXIMISED;
-
-    _setSidebar({
-      isMenu: transition === SideBarTransition.MINIMISED_AND_EXPANDED,
-      menuOpen: false,
-      transition
-    });
-  };
-
-  return (
-    <>
-      <GlobalStyle />
-      <div className={`apps-Wrapper ${isCollapsed ? 'collapsed' : 'expanded'} ${isMenu && 'fixed'} ${menuOpen && 'menu-open'} theme--default ${className}`}>
-        <div
-          className={`apps-Menu-bg ${menuOpen ? 'open' : 'closed'}`}
-          onClick={_handleResize}
-        />
-        <SideBar
-          collapse={_collapse}
-          handleResize={_handleResize}
-          menuOpen={menuOpen}
-          isCollapsed={isCollapsed}
-          toggleMenu={_toggleMenu}
-        />
-        <Signer>
-          <Content />
-        </Signer>
-        <ConnectingOverlay />
-      </div>
-      <WarmUp />
-    </>
-  );
-}
-
-export default styled(Apps)`
-  align-items: stretch;
-  box-sizing: border-box;
-  display: flex;
-  min-height: 100vh;
-`;
diff --git a/pioneer/packages/old-apps/apps/src/Content/NotFound.tsx b/pioneer/packages/old-apps/apps/src/Content/NotFound.tsx
deleted file mode 100644
index 6b6844f2ff..0000000000
--- a/pioneer/packages/old-apps/apps/src/Content/NotFound.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import React from 'react';
-import { Redirect } from 'react-router';
-import routing from '@polkadot/apps-routing';
-
-type Props = {};
-
-const defaultTo = `/${routing.default}`;
-
-export default function NotFound (): React.ReactElement<Props> {
-  return (
-    <Redirect to={defaultTo} />
-  );
-}
diff --git a/pioneer/packages/old-apps/apps/src/Content/Status.tsx b/pioneer/packages/old-apps/apps/src/Content/Status.tsx
deleted file mode 100644
index 7bcd2a0adc..0000000000
--- a/pioneer/packages/old-apps/apps/src/Content/Status.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/apps authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { EventRecord } from '@polkadot/types/interfaces';
-import { KeyringOptions } from '@polkadot/ui-keyring/options/types';
-import { ActionStatus, QueueStatus, QueueTx, QueueAction$Add } from '@polkadot/react-components/Status/types';
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React, { useEffect } from 'react';
-import keyringOption from '@polkadot/ui-keyring/options';
-import { Status as StatusDisplay } from '@polkadot/react-components';
-import { withCalls, withMulti, withObservable } from '@polkadot/react-api';
-import { stringToU8a } from '@polkadot/util';
-import { xxhashAsHex } from '@polkadot/util-crypto';
-
-import translate from '../translate';
-
-interface Props extends I18nProps {
-  optionsAll?: KeyringOptions;
-  queueAction: QueueAction$Add;
-  stqueue: QueueStatus[];
-  system_events?: EventRecord[];
-  txqueue: QueueTx[];
-}
-
-let prevEventHash: string;
-
-function Status ({ optionsAll, queueAction, stqueue, system_events, t, txqueue }: Props): React.ReactElement<Props> {
-  useEffect((): void => {
-    const eventHash = xxhashAsHex(stringToU8a(JSON.stringify(system_events)));
-
-    if (!optionsAll || eventHash === prevEventHash) {
-      return;
-    }
-
-    prevEventHash = eventHash;
-
-    const addresses = optionsAll.account.map((account): string | null => account.value);
-    const statusses = system_events && system_events
-      .map(({ event: { data, method, section } }): ActionStatus | null => {
-        if (section === 'balances' && method === 'Transfer') {
-          const account = data[1].toString();
-
-          if (addresses.includes(account)) {
-            return {
-              account,
-              action: `${section}.${method}`,
-              status: 'event',
-              message: t('transfer received')
-            };
-          }
-        } else if (section === 'democracy') {
-          const index = data[0].toString();
-
-          return {
-            action: `${section}.${method}`,
-            status: 'event',
-            message: t('update on #{{index}}', {
-              replace: {
-                index
-              }
-            })
-          };
-        }
-
-        return null;
-      })
-      .filter((item): boolean => !!item) as ActionStatus[];
-
-    statusses && statusses.length && queueAction(statusses);
-  }, [system_events]);
-
-  return (
-    <StatusDisplay
-      stqueue={stqueue}
-      txqueue={txqueue}
-    />
-  );
-}
-
-export default withMulti(
-  Status,
-  translate,
-  withCalls<Props>('query.system.events'),
-  withObservable(keyringOption.optionsSubject, { propName: 'optionsAll' })
-);
diff --git a/pioneer/packages/old-apps/apps/src/Content/index.tsx b/pioneer/packages/old-apps/apps/src/Content/index.tsx
deleted file mode 100644
index 9a4f8023ea..0000000000
--- a/pioneer/packages/old-apps/apps/src/Content/index.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React, { useContext } from 'react';
-import { withRouter, RouteComponentProps } from 'react-router';
-import styled from 'styled-components';
-import routing from '@polkadot/apps-routing';
-import { ApiContext } from '@polkadot/react-api';
-import { StatusContext } from '@polkadot/react-components';
-
-import Status from './Status';
-import translate from '../translate';
-import NotFound from './NotFound';
-import TopBar from '../TopBar';
-
-interface Props extends I18nProps, RouteComponentProps {}
-
-const Wrapper = styled.div`
-  background: #fafafa;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  height: 100%;
-  min-height: 100vh;
-  overflow-x: hidden;
-  overflow-y: auto;
-  width: 100%;
-  padding: 0 2rem;
-  @media(max-width: 768px) {
-    padding: 0 0.5rem;
-  }
-`;
-
-const unknown = {
-  display: {
-    needsApi: undefined
-  },
-  Component: NotFound,
-  name: ''
-};
-
-function Content ({ className, location, t }: Props): React.ReactElement<Props> {
-  const { isApiConnected, isApiReady } = useContext(ApiContext);
-  const { queueAction, stqueue, txqueue } = useContext(StatusContext);
-  const app = location.pathname.slice(1) || '';
-  const { Component, display: { needsApi }, name } = routing.routes.find((route): boolean =>
-    !!(route && app.startsWith(route.name))
-  ) || unknown;
-
-  return (
-    <div className={className}>
-      {needsApi && (!isApiReady || !isApiConnected)
-        ? <div className='connecting'>{t('Waiting for API to be connected and ready.')}</div>
-        : (
-          <Wrapper>
-            <TopBar />
-            <Component
-              basePath={`/${name}`}
-              location={location}
-              onStatusChange={queueAction}
-            />
-            <Status
-              queueAction={queueAction}
-              stqueue={stqueue}
-              txqueue={txqueue}
-            />
-          </Wrapper>
-        )
-      }
-    </div>
-  );
-}
-
-// React-router needs to be first, otherwise we have blocked updates
-export default translate(
-  withRouter(
-    styled(Content)`
-      background: #fafafa;
-      display: flex;
-      flex-direction: column;
-      flex-grow: 1;
-      height: 100%;
-      min-height: 100vh;
-      overflow-x: hidden;
-      overflow-y: auto;
-      width: 100%;
-      padding: 0;
-
-      @media(max-width: 768px) {
-        padding: 0 0.5rem;
-      }
-
-      .connecting {
-        padding: 1rem 0;
-      }
-    `
-  )
-);
diff --git a/pioneer/packages/old-apps/apps/src/SideBar/Item.tsx b/pioneer/packages/old-apps/apps/src/SideBar/Item.tsx
deleted file mode 100644
index 19c17467b1..0000000000
--- a/pioneer/packages/old-apps/apps/src/SideBar/Item.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ApiProps } from '@polkadot/react-api/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-import { Route } from '@polkadot/apps-routing/types';
-import { AccountId } from '@polkadot/types/interfaces';
-
-import React, { useContext, useEffect, useState } from 'react';
-import { NavLink } from 'react-router-dom';
-import { ApiPromise } from '@polkadot/api';
-import { Icon, Menu, Tooltip } from '@polkadot/react-components';
-import accountObservable from '@polkadot/ui-keyring/observable/accounts';
-import { ApiContext, withCalls, withMulti, withObservable } from '@polkadot/react-api';
-import { isFunction } from '@polkadot/util';
-import { Option } from '@polkadot/types';
-
-import translate from '../translate';
-
-import { queryToProp } from '@polkadot/joy-utils/index';
-import { ElectionStage } from '@joystream/types/council';
-import { councilSidebarName } from '@polkadot/apps-routing/joy-election';
-
-interface Props extends I18nProps {
-  isCollapsed: boolean;
-  onClick: () => void;
-  allAccounts?: SubjectInfo;
-  route: Route;
-  electionStage: Option<ElectionStage>;
-  sudoKey?: AccountId;
-}
-
-type Subtitle = {
-  text: string;
-  classes: string[];
-};
-
-const disabledLog: Map<string, string> = new Map();
-const TOOLTIP_OFFSET = { right: -4 };
-
-function logDisabled (route: string, message: string): void {
-  if (!disabledLog.get(route)) {
-    disabledLog.set(route, message);
-
-    console.warn(`Disabling ${route}: ${message}`);
-  }
-}
-
-function hasEndpoint (api: ApiPromise, endpoint: string): boolean {
-  const [area, section, method] = endpoint.split('.');
-
-  try {
-    return isFunction((api as any)[area][section][method]);
-  } catch (error) {
-    return false;
-  }
-}
-
-function checkVisible (
-  name: string,
-  { api, isApiReady, isApiConnected }: ApiProps,
-  hasAccounts: boolean,
-  hasSudo: boolean,
-  { isHidden, needsAccounts, needsApi, needsSudo }: Route['display']
-): boolean {
-  if (isHidden) {
-    return false;
-  } else if (needsAccounts && !hasAccounts) {
-    return false;
-  } else if (!needsApi) {
-    return true;
-  } else if (!isApiReady || !isApiConnected) {
-    return false;
-  } else if (needsSudo && !hasSudo) {
-    logDisabled(name, 'Sudo key not available');
-    return false;
-  }
-
-  const notFound = needsApi.filter((endpoint: string | string[]): boolean => {
-    const hasApi = Array.isArray(endpoint)
-      ? endpoint.reduce((hasApi, endpoint): boolean => hasApi || hasEndpoint(api, endpoint), false)
-      : hasEndpoint(api, endpoint);
-
-    return !hasApi;
-  });
-
-  if (notFound.length !== 0) {
-    logDisabled(name, `API not available: ${notFound}`);
-  }
-
-  return notFound.length === 0;
-}
-
-function Item ({
-  allAccounts,
-  route: { Modal, display, i18n, icon, name },
-  t,
-  isCollapsed,
-  onClick,
-  sudoKey,
-  electionStage
-}: Props): React.ReactElement<Props> | null {
-  const apiProps = useContext(ApiContext);
-  const [hasAccounts, setHasAccounts] = useState(false);
-  const [hasSudo, setHasSudo] = useState(false);
-  const [isVisible, setIsVisible] = useState(false);
-
-  useEffect((): void => {
-    setHasAccounts(Object.keys(allAccounts || {}).length !== 0);
-  }, [allAccounts]);
-
-  useEffect((): void => {
-    setHasSudo(!!sudoKey && Object.keys(allAccounts || {}).some((address): boolean => sudoKey.eq(address)));
-  }, [allAccounts, sudoKey]);
-
-  useEffect((): void => {
-    setIsVisible(checkVisible(name, apiProps, hasAccounts, hasSudo, display));
-  }, [apiProps, hasAccounts, hasSudo]);
-
-  if (!isVisible) {
-    return null;
-  }
-
-  const _getSubtitle = (name: string): Subtitle | undefined => {
-    if (name === councilSidebarName) {
-      if (electionStage && electionStage.isSome) {
-        const classes: string[] = [];
-        let text = 'No active election';
-        if (electionStage.isSome) {
-          const stageValue = electionStage.value as ElectionStage;
-          const stageName = stageValue.type;
-          text = `${stageName} stage`;
-          classes.push(stageName);
-        }
-        return { text, classes };
-      }
-    }
-    return undefined;
-  };
-
-  const subtitle = _getSubtitle(name);
-
-  const body = (
-    <>
-      <Icon name={icon} />
-      <span className="text SidebarItem">
-        <div>{t(`sidebar.${name}`, i18n)}</div>
-        {subtitle && <div className={`SidebarSubtitle ${subtitle.classes.join(' ')}`}>{subtitle.text}</div>}
-      </span>
-      <Tooltip offset={TOOLTIP_OFFSET} place="right" text={t(`sidebar.${name}`, i18n)} trigger={`nav-${name}`} />
-    </>
-  );
-
-  return (
-    <Menu.Item className="apps--SideBar-Item">
-      {Modal ? (
-        <a
-          className="apps--SideBar-Item-NavLink"
-          data-for={`nav-${name}`}
-          data-tip
-          data-tip-disable={!isCollapsed}
-          onClick={onClick}
-        >
-          {body}
-        </a>
-      ) : (
-        <NavLink
-          activeClassName="apps--SideBar-Item-NavLink-active"
-          className="apps--SideBar-Item-NavLink"
-          data-for={`nav-${name}`}
-          data-tip
-          data-tip-disable={!isCollapsed}
-          onClick={onClick}
-          to={`/${name}`}
-        >
-          {body}
-        </NavLink>
-      )}
-    </Menu.Item>
-  );
-}
-
-export default withMulti(
-  Item,
-  translate,
-  withCalls(queryToProp('query.councilElection.stage', { propName: 'electionStage' })),
-  withCalls<Props>(['query.sudo.key', { propName: 'sudoKey' }]),
-  withObservable(accountObservable.subject, { propName: 'allAccounts' })
-);
diff --git a/pioneer/packages/old-apps/apps/src/SideBar/NodeInfo.tsx b/pioneer/packages/old-apps/apps/src/SideBar/NodeInfo.tsx
deleted file mode 100644
index a837304dfa..0000000000
--- a/pioneer/packages/old-apps/apps/src/SideBar/NodeInfo.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps as Props } from '@polkadot/react-components/types';
-
-import React, { useContext } from 'react';
-import styled from 'styled-components';
-import { ApiContext } from '@polkadot/react-api';
-import { NodeName, NodeVersion } from '@polkadot/react-query';
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const pkgJson = require('../../package.json');
-
-const uiInfo = `apps v${pkgJson.version}`;
-
-function NodeInfo ({ className }: Props): React.ReactElement<Props> {
-  const { api, isApiReady } = useContext(ApiContext);
-
-  return (
-    <div className={className}>
-      {isApiReady && (
-        <div>
-          <NodeName />&nbsp;
-          <NodeVersion label='v' />
-        </div>
-      )}
-      <div>{api.libraryInfo.replace('@polkadot/', '')}</div>
-      <div>{uiInfo}</div>
-    </div>
-  );
-}
-
-export default styled(NodeInfo)`
-  background: transparent;
-  color: white;
-  font-size: 0.75rem;
-  opacity: 0.5;
-  padding: 0 1.5rem 0 1.5rem;
-  text-align: right;
-
-  > div {
-    margin-bottom: -0.125em;
-    > div {
-      display: inline-block;
-    }
-
-    &.spacer {
-      margin-bottom: 0.5rem;
-    }
-  }
-
-  .rx--updated {
-    background: inherit !important;
-  }
-`;
diff --git a/pioneer/packages/old-apps/apps/src/SideBar/SideBar.css b/pioneer/packages/old-apps/apps/src/SideBar/SideBar.css
deleted file mode 100644
index 9d8fea89ee..0000000000
--- a/pioneer/packages/old-apps/apps/src/SideBar/SideBar.css
+++ /dev/null
@@ -1,241 +0,0 @@
-/* Copyright 2017-2019 @polkadot/apps authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-.apps-Wrapper {
-  display: flex;
-  flex-direction: row;
-  transition: width 0.3s linear;
-
-  .apps-Menu-bg {
-    background: rgba(0,0,0,0.6);
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    transition: opacity 0.2s;
-    width: 100%;
-    z-index: 299;
-
-    &.closed {
-      opacity: 0;
-      width: 0;
-    }
-
-    &.open {
-      opacity: 1;
-    }
-  }
-
-  .apps-SideBar-Wrapper {
-    display: flex;
-    position: relative;
-    transition: width 0.3s linear;
-    z-index: 300;
-
-    &.collapsed {
-      width: 4.2rem;
-    }
-
-    &.expanded {
-      width: 12rem;
-    }
-  }
-
-  .apps--SideBar {
-    align-items: center;
-    background: #3f3f3f;
-    display: flex;
-    flex-flow: column;
-    height: auto;
-    position: relative;
-    transition: left 0.3s linear;
-    width: 100%;
-
-    .ui.vertical.menu {
-      display: flex;
-      height: 100vh;
-      margin: 0;
-      top: 0;
-      width: 100%;
-      position: sticky;
-    }
-
-    .apps-SideBar-Scroll {
-      align-items: center;
-      display: flex;
-      flex-direction: column;
-      height: 100vh;
-      overflow-y: auto;
-      width: 100%;
-      scrollbar-width: none;
-
-      &::-webkit-scrollbar {
-        display: none;
-        width: 0px;
-      }
-    }
-
-    .apps--SideBar-Item {
-      align-self: flex-end;
-      flex-grow: 0;
-      padding: 0 !important;
-      width: inherit;
-
-      .text {
-        padding-left: 0.5rem;
-      }
-    }
-
-    .apps--SideBar-logo {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin: 0.5rem 1rem 1.5rem 0;
-      padding-top: 0.75em;
-      width: 10rem;
-
-      img {
-        height: 2.75rem;
-        width: 2.75rem;
-      }
-
-      > div.info {
-        color: white;
-        opacity: 0.75;
-        text-align: right;
-        vertical-align: middle;
-
-        > div.chain {
-          font-size: 0.9rem;
-          line-height: 1rem;
-        }
-
-        > div.runtimeVersion {
-          font-size: 0.75rem;
-          line-height: 1rem;
-        }
-      }
-    }
-
-    .apps--SideBar-collapse {
-      background: #3f3f3f;
-      bottom: 0;
-      left: 0;
-      padding: 0.75rem 0 .75rem 0.65rem;
-      position: sticky;
-      right: 0;
-      text-align: left;
-      width: 100%;
-
-      .ui.circular.button {
-        background: white !important;
-        color: #3f3f3f !important;
-        box-shadow: 0 0 0 1px #eee inset !important;
-        margin: 0;
-        transition: transform 0.15s;
-      }
-    }
-
-    .apps--SideBar-toggle {
-      height: 100%;
-      position: absolute;
-      right: 0px;
-      top: 0px;
-      transition: all 0.2s;
-      width: 6px;
-
-      &:hover {
-        background: rgba(255,255,255,0.15);
-        cursor: pointer;
-      }
-    }
-  }
-
-  &.expanded .apps--SideBar {
-    text-align: left;
-
-    .apps-SideBar-Scroll {
-      padding-left: 0.75rem;
-    }
-  }
-
-  &.collapsed .apps--SideBar {
-    text-align: center;
-
-    .divider {
-      display: none;
-    }
-
-    .apps--SideBar-Item {
-      margin-left: 5px;
-
-      .text {
-        display: none;
-      }
-    }
-
-    .apps--SideBar-logo {
-      margin: 0.875rem auto;
-      padding: 0;
-      width: 3rem;
-
-      img {
-        margin: 0 0.25rem 0 0;
-      }
-
-      > div.info {
-        display: none;
-      }
-    }
-
-    .apps--SideBar-collapse .ui.basic.secondary.button {
-      left: 0.66rem;
-    }
-  }
-
-  &.fixed {
-    .apps-SideBar-Wrapper {
-      position: absolute;
-      width: 0px;
-
-      .apps--SideBar {
-        padding-left: 0;
-      }
-    }
-  }
-
-  &.menu-open {
-    .apps-SideBar-Wrapper {
-      width: 12rem;
-    }
-  }
-}
-
-/* This is horrible ... will disappear once this stuff is actually where it belongs and not in a stylesheet */
-.theme--default {
-  a.apps--SideBar-Item-NavLink {
-    color: #eee;
-    display: block;
-    padding: 0.75em 0.75em;
-    white-space: nowrap;
-
-    &:hover {
-      background: #5f5f5f;
-      border-radius: 0.28571429rem 0 0 0.28571429rem;
-      color: #eee;
-    }
-  }
-
-  a.apps--SideBar-Item-NavLink-active {
-    background: #fafafa;
-    border-radius: 0.28571429rem 0 0 0.28571429rem;
-    color: #3f3f3f;
-
-    &:hover {
-      background: #fafafa;
-      color: #3f3f3f;
-    }
-  }
-}
diff --git a/pioneer/packages/old-apps/apps/src/SideBar/index.tsx b/pioneer/packages/old-apps/apps/src/SideBar/index.tsx
deleted file mode 100644
index 0489785806..0000000000
--- a/pioneer/packages/old-apps/apps/src/SideBar/index.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { SIDEBAR_MENU_THRESHOLD } from '../constants';
-
-import './SideBar.css';
-
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { Responsive, Icon, SemanticICONS } from 'semantic-ui-react';
-import routing from '@polkadot/apps-routing';
-import { Button, ChainImg, Menu, media } from '@polkadot/react-components';
-import { classes } from '@polkadot/react-components/util';
-
-import translate from '../translate';
-import Item from './Item';
-import NetworkModal from '../modals/Network';
-
-interface Props extends I18nProps /* ApiProps, */ {
-  className?: string;
-  collapse: () => void;
-  handleResize: () => void;
-  isCollapsed: boolean;
-  menuOpen: boolean;
-  toggleMenu: () => void;
-}
-
-type OuterLinkProps = {
-  url: string;
-  title: string;
-  icon?: SemanticICONS;
-};
-
-export function OuterLink ({ url, title, icon = 'external alternate' }: OuterLinkProps) {
-  return (
-    <Menu.Item className="apps--SideBar-Item">
-      <a className="apps--SideBar-Item-NavLink" href={url} target="_blank" rel="noopener noreferrer">
-        <Icon name={icon} />
-        <span className="text">{title}</span>
-      </a>
-    </Menu.Item>
-  );
-}
-
-function JoystreamLogo (isCollapsed: boolean) {
-  const logo = isCollapsed ? 'images/logo-j.svg' : 'images/logo-joytream.svg';
-  return <img alt="Joystream" className="apps--SideBar-logo" src={logo} />;
-}
-
-function SideBar ({
-  className,
-  collapse,
-  handleResize,
-  isCollapsed,
-  toggleMenu,
-  menuOpen
-}: Props): React.ReactElement<Props> {
-  const [modals, setModals] = useState<Record<string, boolean>>(
-    routing.routes.reduce(
-      (result: Record<string, boolean>, route): Record<string, boolean> => {
-        if (route && route.Modal) {
-          result[route.name] = false;
-        }
-
-        return result;
-      },
-      { network: false }
-    )
-  );
-
-  const _toggleModal = (name: string): (() => void) => (): void => setModals({ ...modals, [name]: !modals[name] });
-
-  return (
-    <Responsive
-      onUpdate={handleResize}
-      className={classes(className, 'apps-SideBar-Wrapper', isCollapsed ? 'collapsed' : 'expanded')}
-    >
-      <ChainImg className={`toggleImg ${menuOpen ? 'closed' : 'open delayed'}`} onClick={toggleMenu} />
-      {routing.routes.map(
-        (route): React.ReactNode =>
-          route && route.Modal ? (
-            route.Modal && modals[route.name] ? (
-              <route.Modal key={route.name} onClose={_toggleModal(route.name)} />
-            ) : (
-              <div key={route.name} />
-            )
-          ) : null
-      )}
-      {modals.network && <NetworkModal onClose={_toggleModal('network')} />}
-      <div className="apps--SideBar">
-        <Menu secondary vertical>
-          <div className="apps-SideBar-Scroll">
-            {JoystreamLogo(isCollapsed)}
-            {routing.routes.map(
-              (route, index): React.ReactNode =>
-                route ? (
-                  <Item
-                    isCollapsed={isCollapsed}
-                    key={route.name}
-                    route={route}
-                    onClick={route.Modal ? _toggleModal(route.name) : handleResize}
-                  />
-                ) : (
-                  <Menu.Divider hidden key={index} />
-                )
-            )}
-            {/* <Menu.Divider hidden />
-            <OuterLink url='https://joystream.org/testnet' title='Tokenomics' />
-            <OuterLink url='https://blog.joystream.org/constantinople-incentives/' title='Earn Monero' />
-            <Menu.Divider hidden /> */}
-          </div>
-          <Responsive
-            minWidth={SIDEBAR_MENU_THRESHOLD}
-            className={`apps--SideBar-collapse ${isCollapsed ? 'collapsed' : 'expanded'}`}
-          >
-            <Button icon={`angle double ${isCollapsed ? 'right' : 'left'}`} isBasic isCircular onClick={collapse} />
-          </Responsive>
-        </Menu>
-        <Responsive minWidth={SIDEBAR_MENU_THRESHOLD}>
-          <div className="apps--SideBar-toggle" onClick={collapse} />
-        </Responsive>
-      </div>
-    </Responsive>
-  );
-}
-
-export default translate(
-  styled(SideBar)`
-    .toggleImg {
-      cursor: pointer;
-      height: 2.75rem;
-      left: 0.9rem;
-      opacity: 0;
-      position: absolute;
-      top: 0px;
-      transition: opacity 0.2s ease-in, top 0.2s ease-in;
-      width: 2.75rem;
-
-      &.delayed {
-        transition-delay: 0.4s;
-      }
-
-      &.open {
-        opacity: 1;
-        top: 0.9rem;
-      }
-
-      ${media.DESKTOP`
-        opacity: 0 !important;
-        top: -2.9rem !important;
-      `}
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/apps/src/aplayer.d.ts b/pioneer/packages/old-apps/apps/src/aplayer.d.ts
deleted file mode 100644
index 3c0ef94d4f..0000000000
--- a/pioneer/packages/old-apps/apps/src/aplayer.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module 'react-aplayer';
diff --git a/pioneer/packages/old-apps/apps/src/constants.ts b/pioneer/packages/old-apps/apps/src/constants.ts
deleted file mode 100644
index eb8d5dd71b..0000000000
--- a/pioneer/packages/old-apps/apps/src/constants.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ScreenSizes } from '@polkadot/react-components/constants';
-
-export enum SideBarTransition {
-  COLLAPSED = 'COLLAPSED',
-  EXPANDED = 'EXPANDED',
-  EXPANDED_AND_MAXIMISED = 'EXPANDED_AND_MAXIMISED',
-  MINIMISED_AND_EXPANDED = 'MINIMISED_AND_EXPANDED'
-}
-
-export const SIDEBAR_MENU_THRESHOLD = ScreenSizes.DESKTOP;
-export const SIDEBAR_TRANSITION_DURATION = 300;
diff --git a/pioneer/packages/old-apps/apps/src/dplayer.d.ts b/pioneer/packages/old-apps/apps/src/dplayer.d.ts
deleted file mode 100644
index 216068f628..0000000000
--- a/pioneer/packages/old-apps/apps/src/dplayer.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module 'react-dplayer';
diff --git a/pioneer/packages/old-apps/apps/src/index.tsx b/pioneer/packages/old-apps/apps/src/index.tsx
deleted file mode 100644
index fb636cef79..0000000000
--- a/pioneer/packages/old-apps/apps/src/index.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-// import first, get the load done
-import settings from '@polkadot/joy-settings/';
-
-import 'semantic-ui-css/semantic.min.css';
-import '@polkadot/react-components/i18n';
-
-import queryString from 'query-string';
-import React, { Suspense } from 'react';
-import ReactDOM from 'react-dom';
-import { HashRouter } from 'react-router-dom';
-import store from 'store';
-import { ThemeProvider } from 'styled-components';
-import { getTypeRegistry } from '@polkadot/types';
-import { Api } from '@polkadot/react-api';
-import { QueueConsumer } from '@polkadot/react-components/Status/Context';
-import Queue from '@polkadot/react-components/Status/Queue';
-import { BlockAuthors, Events } from '@polkadot/react-query';
-import { MyAccountProvider } from '@polkadot/joy-utils/MyAccountContext';
-import { MyMembershipProvider } from '@polkadot/joy-utils/MyMembershipContext';
-
-import Apps from './Apps';
-
-const rootId = 'root';
-const rootElement = document.getElementById(rootId);
-
-(window as any).Joystream = {
-  setRemoteEndpoint: (apiUrl: string) => {
-    settings.set({
-      apiUrl
-    });
-
-    window.location.reload();
-  },
-  setAdvancedUI: (flag: boolean) => {
-    settings.set({
-      uiMode: flag ? 'full' : 'light'
-    });
-
-    window.location.reload();
-  }
-};
-
-// we split here so that both these forms are allowed
-//  - 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 _wsEndpoint = urlOptions.rpc || process.env.WS_URL || settings.apiUrl;
-
-if (Array.isArray(_wsEndpoint)) {
-  throw new Error('Invalid WS endpoint specified');
-}
-
-// on some combo of browsers/os, this https://polkadot.js.org/apps/?rpc=ws://127.0.0.1:9944#/explorer
-// turns into ws://127.0.0.1:9944#/explorer (split these)
-const wsEndpoint = _wsEndpoint.split('#')[0];
-
-console.log('WS endpoint=', wsEndpoint);
-
-try {
-  require('@joystream/types/').registerJoystreamTypes();
-
-  const types = store.get('types') || {};
-  const names = Object.keys(types);
-
-  if (names.length) {
-    getTypeRegistry().register(types);
-    console.log('Type registration:', names.join(', '));
-  }
-} catch (error) {
-  console.error('Type registration failed', error);
-}
-
-const theme = {
-  theme: settings.uiTheme
-};
-
-if (!rootElement) {
-  throw new Error(`Unable to find element with id '${rootId}'`);
-}
-
-ReactDOM.render(
-  <Suspense fallback="...">
-    <MyAccountProvider>
-      <Queue>
-        <QueueConsumer>
-          {({ queuePayload, queueSetTxStatus }): React.ReactNode => (
-            <Api queuePayload={queuePayload} queueSetTxStatus={queueSetTxStatus} url={wsEndpoint}>
-              <MyMembershipProvider>
-                <BlockAuthors>
-                  <Events>
-                    <HashRouter>
-                      <ThemeProvider theme={theme}>
-                        <Apps />
-                      </ThemeProvider>
-                    </HashRouter>
-                  </Events>
-                </BlockAuthors>
-              </MyMembershipProvider>
-            </Api>
-          )}
-        </QueueConsumer>
-      </Queue>
-    </MyAccountProvider>
-  </Suspense>,
-  rootElement
-);
diff --git a/pioneer/packages/old-apps/apps/src/modals/Network.tsx b/pioneer/packages/old-apps/apps/src/modals/Network.tsx
deleted file mode 100644
index 7f697a8ab7..0000000000
--- a/pioneer/packages/old-apps/apps/src/modals/Network.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import { Modal } from '@polkadot/react-components';
-import General from '@polkadot/app-settings/General';
-
-import translate from '../translate';
-
-interface Props extends I18nProps {
-  onClose: () => void;
-}
-
-function NetworkModal ({ className, onClose, t }: Props): React.ReactElement<Props> {
-  return (
-    <Modal
-      className={className}
-      dimmer='inverted'
-      open
-    >
-      <Modal.Header>{t('Select Network')}</Modal.Header>
-      <Modal.Content>
-        <General
-          isModalContent
-          onClose={onClose}
-        />
-      </Modal.Content>
-    </Modal>
-  );
-}
-
-export default translate(NetworkModal);
diff --git a/pioneer/packages/old-apps/apps/src/overlays/Accounts.tsx b/pioneer/packages/old-apps/apps/src/overlays/Accounts.tsx
deleted file mode 100644
index ac5b90a92b..0000000000
--- a/pioneer/packages/old-apps/apps/src/overlays/Accounts.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { ApiProps } from '@polkadot/react-api/types';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-
-import React, { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
-import styled from 'styled-components';
-import { withApi, withMulti, withObservable } from '@polkadot/react-api';
-import accountObservable from '@polkadot/ui-keyring/observable/accounts';
-
-import translate from '../translate';
-import BaseOverlay from './Base';
-
-interface Props extends I18nProps, ApiProps {
-  allAccounts?: SubjectInfo;
-}
-
-function Accounts ({ allAccounts, isApiReady, className, t }: Props): React.ReactElement<Props> | null {
-  const [hasAccounts, setHasAccounts] = useState(false);
-  const [isHidden, setIsHidden] = useState(false);
-
-  useEffect((): void => {
-    if (!allAccounts) {
-      return;
-    }
-
-    const newHas = Object.keys(allAccounts).length !== 0;
-
-    if (newHas !== hasAccounts) {
-      setHasAccounts(newHas);
-    }
-  }, [allAccounts]);
-
-  const _onClose = (): void => setIsHidden(true);
-
-  if (!isApiReady || hasAccounts || isHidden) {
-    return null;
-  }
-
-  return (
-    <BaseOverlay
-      className={className}
-      icon='users'
-    >
-      <p>{t("You don't have any accounts. Some features are currently hidden and will only become available once you have accounts.")}</p>
-      <p>
-        <Link
-          to='/accounts'
-          onClick={_onClose}
-        >
-          {t('Create an account now.')}
-        </Link>
-      </p>
-    </BaseOverlay>
-  );
-}
-
-export default withMulti(
-  styled(Accounts)`
-    background: #fff6cb;
-    border-color: #e7c000;
-    color: #6b5900;
-  `,
-  translate,
-  withApi,
-  withObservable(accountObservable.subject, { propName: 'allAccounts' })
-);
diff --git a/pioneer/packages/old-apps/apps/src/overlays/Base.tsx b/pioneer/packages/old-apps/apps/src/overlays/Base.tsx
deleted file mode 100644
index 6055c38f2a..0000000000
--- a/pioneer/packages/old-apps/apps/src/overlays/Base.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { Icon } from '@polkadot/react-components';
-
-interface Props {
-  children: React.ReactNode;
-  className?: string;
-  icon: string;
-}
-
-function BaseOverlay ({ children, className, icon }: Props): React.ReactElement<Props> | null {
-  const [isHidden, setIsHidden] = useState(false);
-
-  if (isHidden) {
-    return null;
-  }
-
-  const _onClose = (): void => setIsHidden(true);
-
-  return (
-    <div className={className}>
-      <div className='content'>
-        <Icon
-          className='contentIcon'
-          name={icon as any}
-          size='big'
-        />
-        <div className='contentItem'>
-          {children}
-        </div>
-        <Icon
-          className='closeIcon'
-          name='close'
-          onClick={_onClose}
-        />
-      </div>
-    </div>
-  );
-}
-
-export default styled(BaseOverlay)`
-  border-bottom: 1px solid transparent;
-  left: 0;
-  line-height: 1.5em;
-  padding: 0 2rem;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 500;
-
-  .content {
-    display: flex;
-    margin: 0 auto;
-    max-width: 50rem;
-    padding: 1em 2rem;
-    position: relative;
-
-    .contentIcon {
-      flex: 0;
-    }
-
-    .contentItem {
-      flex: 1;
-      padding: 0 1rem;
-
-      > div+div {
-        margin-top: 0.5rem;
-      }
-    }
-  }
-
-  .closeIcon {
-    cursor: pointer;
-    position: absolute;
-    right: 0.75em;
-    top: 0.75em;
-  }
-`;
diff --git a/pioneer/packages/old-apps/apps/src/overlays/Connecting.tsx b/pioneer/packages/old-apps/apps/src/overlays/Connecting.tsx
deleted file mode 100644
index bf27e04846..0000000000
--- a/pioneer/packages/old-apps/apps/src/overlays/Connecting.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ApiProps } from '@polkadot/react-api/types';
-import { I18nProps as Props } from '@polkadot/react-components/types';
-
-import React, { useContext } from 'react';
-import styled from 'styled-components';
-import { ApiContext } from '@polkadot/react-api';
-import settings from '@polkadot/ui-settings';
-
-import translate from '../translate';
-import BaseOverlay from './Base';
-
-const isFirefox = typeof (window as any).InstallTrigger !== 'undefined';
-const wsUrl = settings.apiUrl;
-const isWs = wsUrl.startsWith('ws://');
-const isWsLocal = wsUrl.includes('127.0.0.1');
-const isHttps = window.location.protocol.startsWith('https:');
-
-function ExtensionOverlay ({ className, isWaitingInjected, t }: ApiProps & Props): React.ReactElement<Props> | null {
-  if (!isWaitingInjected) {
-    return null;
-  }
-
-  return (
-    <BaseOverlay
-      className={className}
-      icon='puzzle'
-    >
-      <div>{t('Waiting for authorization from the extension. Please open the installed extension and approve or reject access.')}</div>
-    </BaseOverlay>
-  );
-}
-
-function ConnectOverlay ({ className, isApiConnected, t }: ApiProps & Props): React.ReactElement<Props> | null {
-  if (isApiConnected) {
-    return null;
-  }
-
-  return (
-    <BaseOverlay
-      className={className}
-      icon='globe'
-    >
-      <div>{t('You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.')}</div>
-      {
-        isFirefox && isWs
-          ? <div>{t('With the Firefox browser connecting to insecure WebSockets ({{wsUrl}}) will fail due to the browser not allowing localhost access from a secure site.', { replace: { wsUrl } })}</div>
-          : undefined
-      }
-      {
-        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>
-          : undefined
-      }
-    </BaseOverlay>
-  );
-}
-
-function Connecting (props: Props): React.ReactElement<Props> | null {
-  const api = useContext(ApiContext);
-
-  return ExtensionOverlay({ ...props, ...api }) || ConnectOverlay({ ...props, ...api });
-}
-
-export default translate(
-  styled(Connecting)`
-    background: #ffe6e6;
-    border-color: #c00;
-    color: #4d0000;
-  `
-);
diff --git a/pioneer/packages/old-apps/apps/src/translate.ts b/pioneer/packages/old-apps/apps/src/translate.ts
deleted file mode 100644
index e5df18bddc..0000000000
--- a/pioneer/packages/old-apps/apps/src/translate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { withTranslation } from 'react-i18next';
-
-export default withTranslation(['apps']);
diff --git a/pioneer/packages/old-apps/apps/src/wp-md.d.ts b/pioneer/packages/old-apps/apps/src/wp-md.d.ts
deleted file mode 100644
index 0ff3d54166..0000000000
--- a/pioneer/packages/old-apps/apps/src/wp-md.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-declare module '*.md' {
-  const content: any;
-  export default content;
-}
diff --git a/pioneer/packages/old-apps/apps/src/wp-svg.d.ts b/pioneer/packages/old-apps/apps/src/wp-svg.d.ts
deleted file mode 100644
index 43f1b4414f..0000000000
--- a/pioneer/packages/old-apps/apps/src/wp-svg.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-declare module '*.svg' {
-  const content: any;
-  export default content;
-}
diff --git a/pioneer/packages/old-apps/apps/webpack.config.js b/pioneer/packages/old-apps/apps/webpack.config.js
deleted file mode 100644
index ca5fabd131..0000000000
--- a/pioneer/packages/old-apps/apps/webpack.config.js
+++ /dev/null
@@ -1,238 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-/* eslint-disable @typescript-eslint/no-var-requires */
-// Copyright 2017-2019 @polkadot/apps authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-const fs = require('fs');
-const path = require('path');
-const webpack = require('webpack');
-
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { WebpackPluginServe } = require('webpack-plugin-serve');
-
-const findPackages = require('../../scripts/findPackages'); // Do we need to add joy- apps in that script?
-
-const DEFAULT_THEME = 'substrate';
-const ENV = process.env.NODE_ENV || 'development';
-
-function createWebpack ({ alias = {}, context, name = 'index' }) {
-  const pkgJson = require(path.join(context, 'package.json'));
-  const isProd = ENV === 'production';
-  const hasPublic = fs.existsSync(path.join(context, 'public'));
-  const plugins = hasPublic
-    ? [new CopyWebpackPlugin([{ from: 'public' }])]
-    : [];
-  // disabled, smooths dev load, was -
-  // isProd ? 'source-map' : 'cheap-eval-source-map',
-  const devtool = false;
-
-  return {
-    context,
-    devtool,
-    entry: [
-      '@babel/polyfill',
-      `./src/${name}.tsx`,
-      isProd
-        ? null
-        : null // 'webpack-plugin-serve/client'
-    ].filter((entry) => entry),
-    mode: ENV,
-    output: {
-      chunkFilename: '[name].[chunkhash:8].js',
-      filename: '[name].[hash:8].js',
-      globalObject: '(typeof self !== \'undefined\' ? self : this)',
-      path: path.join(context, 'build')
-    },
-    resolve: {
-      alias,
-      extensions: ['.js', '.jsx', '.ts', '.tsx']
-    },
-    module: {
-      rules: [
-        {
-          test: /\.css$/,
-          exclude: /(node_modules)/,
-          use: [
-            isProd
-              ? MiniCssExtractPlugin.loader
-              : require.resolve('style-loader'),
-            {
-              loader: require.resolve('css-loader'),
-              options: {
-                importLoaders: 1
-              }
-            },
-            {
-              loader: require.resolve('postcss-loader'),
-              options: {
-                ident: 'postcss',
-                plugins: () => [
-                  require('precss'),
-                  require('autoprefixer'),
-                  require('postcss-simple-vars'),
-                  require('postcss-nested'),
-                  require('postcss-import'),
-                  require('postcss-clean')(),
-                  require('postcss-flexbugs-fixes')
-                ]
-              }
-            }
-          ]
-        },
-        {
-          test: /\.s[ac]ss$/i,
-          use: [
-            // Creates `style` nodes from JS strings
-            'style-loader',
-            // Translates CSS into CommonJS
-            'css-loader',
-            // Compiles Sass to CSS
-            'sass-loader'
-          ]
-        },
-        {
-          test: /\.less$/,
-          loaders: ['style-loader', 'css-loader', 'less-loader']
-        },
-        {
-          test: /\.css$/,
-          include: /node_modules/,
-          use: [
-            isProd
-              ? MiniCssExtractPlugin.loader
-              : require.resolve('style-loader'),
-            require.resolve('css-loader')
-          ]
-        },
-        {
-          test: /\.(js|ts|tsx)$/,
-          exclude: /(node_modules)/,
-          use: [
-            require.resolve('thread-loader'),
-            {
-              loader: require.resolve('babel-loader'),
-              options: require('@polkadot/dev-react/config/babel')
-            }
-          ]
-        },
-        {
-          test: /\.md$/,
-          use: [
-            require.resolve('html-loader'),
-            require.resolve('markdown-loader')
-          ]
-        },
-        {
-          test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-          use: [
-            {
-              loader: require.resolve('url-loader'),
-              options: {
-                limit: 10000,
-                name: 'static/[name].[hash:8].[ext]'
-              }
-            }
-          ]
-        },
-        {
-          test: [/\.eot$/, /\.ttf$/, /\.svg$/, /\.woff$/, /\.woff2$/],
-          use: [
-            {
-              loader: require.resolve('file-loader'),
-              options: {
-                name: 'static/[name].[hash:8].[ext]'
-              }
-            }
-          ]
-        }
-      ]
-    },
-    node: {
-      child_process: 'empty',
-      dgram: 'empty',
-      fs: 'empty',
-      net: 'empty',
-      tls: 'empty'
-    },
-    optimization: {
-      runtimeChunk: 'single',
-      splitChunks: {
-        cacheGroups: {
-          vendorOther: {
-            chunks: 'initial',
-            enforce: true,
-            name: 'vendor',
-            test: /node_modules\/(asn1|bn\.js|buffer|cuint|elliptic|lodash|moment|readable-stream|rxjs)/
-          },
-          vendorReact: {
-            chunks: 'initial',
-            enforce: true,
-            name: 'react',
-            test: /node_modules\/(chart|i18next|react|semantic-ui)/
-          },
-          polkadotJs: {
-            chunks: 'initial',
-            enforce: true,
-            name: 'polkadotjs',
-            test: /node_modules\/(@polkadot\/wasm-(crypto|dalek-ed25519|schnorrkel))/
-          }
-        }
-      }
-    },
-    performance: {
-      hints: false
-    },
-    plugins: plugins.concat([
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-      new webpack.DefinePlugin({
-        'process.env': {
-          NODE_ENV: JSON.stringify(ENV),
-          VERSION: JSON.stringify(pkgJson.version),
-          UI_MODE: JSON.stringify(process.env.UI_MODE || 'light'),
-          UI_THEME: JSON.stringify(process.env.UI_THEME || DEFAULT_THEME),
-          WS_URL: JSON.stringify(process.env.WS_URL)
-        }
-      }),
-      new HtmlWebpackPlugin({
-        inject: true,
-        template: path.join(context, `${hasPublic ? 'public/' : ''}${name}.html`),
-        IS_PROD: isProd,
-        PAGE_TITLE: process.env.UI_THEME === 'substrate'
-          ? 'Joystream Network Portal'
-          : 'Joystream Network Portal'
-      }),
-      new webpack.optimize.SplitChunksPlugin(),
-      new MiniCssExtractPlugin({
-        filename: '[name].[contenthash:8].css'
-      }),
-      isProd
-        ? null
-        : new WebpackPluginServe({
-          hmr: false, // switch off, Chrome WASM memory leak
-          liveReload: false, // explict off, overrides hmr
-          progress: false, // since we have hmr off, disable
-          port: 3000,
-          static: path.join(process.cwd(), '/build')
-        })
-    ]).filter((plugin) => plugin),
-    watch: !isProd
-  };
-}
-
-module.exports = createWebpack({
-  context: __dirname,
-  alias: {
-    ...(
-      findPackages().reduce((alias, { dir, name }) => {
-        alias[name] = path.resolve(__dirname, `../${dir}/src`);
-
-        return alias;
-      }, {})
-    ),
-    // TODO: Me might try to add it to "findPackages", but this will be a little more tricky
-    '@joystream/types': path.resolve(__dirname, '../../../types/src')
-  }
-});
diff --git a/pioneer/packages/old-apps/react-api/LICENSE b/pioneer/packages/old-apps/react-api/LICENSE
deleted file mode 100644
index 0d381b2e97..0000000000
--- a/pioneer/packages/old-apps/react-api/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/pioneer/packages/old-apps/react-api/README.md b/pioneer/packages/old-apps/react-api/README.md
deleted file mode 100644
index fa75c2c694..0000000000
--- a/pioneer/packages/old-apps/react-api/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# @polkadot/react-api
-
-WARNING: This is is not deemed stable yet for external use in React-based apps and still included in the [polkadot-js/apps](https://github.com/polkadot-js/apps) repo. Since these are generic HOC components for React, they will move to the [polkadot-js/ui](https://github.com/polkadot-js/ui) repo once deemed stable and usable by external projects.
-
-For the existing sharable components usable in external React-based projects, take a look at the [polkadot-js/ui documentation](https://polkadot.js.org/ui/)
diff --git a/pioneer/packages/old-apps/react-api/package.json b/pioneer/packages/old-apps/react-api/package.json
deleted file mode 100644
index dadbc26b83..0000000000
--- a/pioneer/packages/old-apps/react-api/package.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-  "name": "@polkadot/react-api",
-  "version": "0.37.0-beta.63",
-  "description": "A collection of RxJs React components the Polkadot JS API",
-  "main": "index.js",
-  "keywords": [
-    "Polkadot",
-    "React",
-    "RxJs"
-  ],
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "contributors": [],
-  "license": "Apache-2.0",
-  "engines": {
-    "node": ">=8.0"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/polkadot-js/ui.git"
-  },
-  "bugs": {
-    "url": "https://github.com/polkadot-js/ui/issues"
-  },
-  "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-reactive#readme",
-  "dependencies": {
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/api": "^0.96.1",
-    "@polkadot/extension-dapp": "^0.14.0-beta.2",
-    "edgeware-node-types": "^1.0.10",
-    "rxjs-compat": "^6.5.3"
-  }
-}
diff --git a/pioneer/packages/old-apps/react-api/src/Api.tsx b/pioneer/packages/old-apps/react-api/src/Api.tsx
deleted file mode 100644
index 3a9045872a..0000000000
--- a/pioneer/packages/old-apps/react-api/src/Api.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ProviderInterface } from '@polkadot/rpc-provider/types';
-import { QueueTxPayloadAdd, QueueTxMessageSetStatus } from '@polkadot/react-components/Status/types';
-import { ApiProps } from './types';
-
-import React from 'react';
-import ApiPromise from '@polkadot/api/promise';
-import { isWeb3Injected, web3Accounts, web3Enable } from '@polkadot/extension-dapp';
-import defaults from '@polkadot/rpc-provider/defaults';
-import { WsProvider } from '@polkadot/rpc-provider';
-import { InputNumber } from '@polkadot/react-components/InputNumber';
-import keyring from '@polkadot/ui-keyring';
-import uiSettings from '@polkadot/ui-settings';
-import ApiSigner from '@polkadot/react-signer/ApiSigner';
-import { u32 as U32 } from '@polkadot/types';
-import { formatBalance, isTestChain } from '@polkadot/util';
-import addressDefaults from '@polkadot/util-crypto/address/defaults';
-
-import typesChain from './overrides/chain';
-import typesSpec from './overrides/spec';
-import ApiContext from './ApiContext';
-
-interface Props {
-  children: React.ReactNode;
-  queuePayload: QueueTxPayloadAdd;
-  queueSetTxStatus: QueueTxMessageSetStatus;
-  url?: string;
-}
-
-interface State extends ApiProps {
-  chain?: string | null;
-}
-
-interface InjectedAccountExt {
-  address: string;
-  meta: {
-    name: string;
-    source: string;
-  };
-}
-
-const DEFAULT_DECIMALS = new U32(12);
-const DEFAULT_SS58 = new U32(addressDefaults.prefix);
-
-const injectedPromise = web3Enable('polkadot-js/apps');
-let api: ApiPromise;
-
-export { api };
-
-export default class Api extends React.PureComponent<Props, State> {
-  public state: State = {} as unknown as State;
-
-  constructor (props: Props) {
-    super(props);
-
-    const { queuePayload, queueSetTxStatus, url } = props;
-    const provider = new WsProvider(url);
-    const signer = new ApiSigner(queuePayload, queueSetTxStatus);
-
-    const setApi = (provider: ProviderInterface): void => {
-      api = this.createApi(provider, signer);
-
-      this.setState({ api }, (): void => {
-        this.subscribeEvents();
-      });
-    };
-    const setApiUrl = (url: string = defaults.WS_URL): void =>
-      setApi(new WsProvider(url));
-
-    api = this.createApi(provider, signer);
-
-    this.state = {
-      api,
-      isApiConnected: false,
-      isApiReady: false,
-      isSubstrateV2: true,
-      isWaitingInjected: isWeb3Injected,
-      setApiUrl
-    } as unknown as State;
-  }
-
-  private createApi (provider: ProviderInterface, signer: ApiSigner): ApiPromise {
-    return new ApiPromise({
-      provider,
-      signer,
-      typesChain,
-      typesSpec
-    });
-  }
-
-  public componentDidMount (): void {
-    this.subscribeEvents();
-
-    injectedPromise
-      .then((): void => this.setState({ isWaitingInjected: false }))
-      .catch((error: Error) => console.error(error));
-  }
-
-  private subscribeEvents (): void {
-    const { api } = this.state;
-
-    api.on('connected', (): void => {
-      this.setState({ isApiConnected: true });
-    });
-
-    api.on('disconnected', (): void => {
-      this.setState({ isApiConnected: false });
-    });
-
-    api.on('ready', async (): Promise<void> => {
-      try {
-        await this.loadOnReady(api);
-      } catch (error) {
-        console.error('Unable to load chain', error);
-      }
-    });
-  }
-
-  private async loadOnReady (api: ApiPromise): Promise<void> {
-    const [properties, _systemChain, _systemName, _systemVersion, injectedAccounts] = await Promise.all([
-      api.rpc.system.properties(),
-      api.rpc.system.chain(),
-      api.rpc.system.name(),
-      api.rpc.system.version(),
-      web3Accounts().then((accounts): InjectedAccountExt[] =>
-        accounts.map(({ address, meta }): InjectedAccountExt => ({
-          address,
-          meta: {
-            ...meta,
-            name: `${meta.name} (${meta.source === 'polkadot-js' ? 'extension' : meta.source})`
-          }
-        }))
-      )
-    ]);
-    const ss58Format = uiSettings.prefix === -1
-      ? properties.ss58Format.unwrapOr(DEFAULT_SS58).toNumber()
-      : uiSettings.prefix;
-    const tokenSymbol = properties.tokenSymbol.unwrapOr('DEV').toString();
-    const tokenDecimals = properties.tokenDecimals.unwrapOr(DEFAULT_DECIMALS).toNumber();
-    const systemChain = _systemChain
-      ? _systemChain.toString()
-      : '<unknown>';
-    const isDevelopment = isTestChain(systemChain);
-
-    console.log('api: found chain', systemChain, JSON.stringify(properties));
-
-    // first setup the UI helpers
-    formatBalance.setDefaults({
-      decimals: tokenDecimals,
-      unit: tokenSymbol
-    });
-    InputNumber.setUnit(tokenSymbol);
-
-    // finally load the keyring
-    keyring.loadAll({
-      addressPrefix: ss58Format,
-      genesisHash: api.genesisHash,
-      isDevelopment,
-      ss58Format,
-      type: 'ed25519'
-    }, injectedAccounts);
-
-    const defaultSection = Object.keys(api.tx)[0];
-    const defaultMethod = Object.keys(api.tx[defaultSection])[0];
-    const apiDefaultTx = api.tx[defaultSection][defaultMethod];
-    const apiDefaultTxSudo =
-      (api.tx.system && api.tx.system.setCode) || // 2.x
-      (api.tx.consensus && api.tx.consensus.setCode) || // 1.x
-      apiDefaultTx; // other
-    const isSubstrateV2 = !!Object.keys(api.consts).length;
-
-    this.setState({
-      apiDefaultTx,
-      apiDefaultTxSudo,
-      isApiReady: true,
-      isDevelopment,
-      isSubstrateV2,
-      systemChain,
-      systemName: _systemName.toString(),
-      systemVersion: _systemVersion.toString()
-    });
-  }
-
-  public render (): React.ReactNode {
-    const { api, apiDefaultTx, apiDefaultTxSudo, isApiConnected, isApiReady, isDevelopment, isSubstrateV2, isWaitingInjected, setApiUrl, systemChain, systemName, systemVersion } = this.state;
-
-    return (
-      <ApiContext.Provider
-        value={{
-          api,
-          apiDefaultTx,
-          apiDefaultTxSudo,
-          isApiConnected,
-          isApiReady: isApiReady && !!systemChain,
-          isDevelopment,
-          isSubstrateV2,
-          isWaitingInjected,
-          setApiUrl,
-          systemChain,
-          systemName,
-          systemVersion
-        }}
-      >
-        {this.props.children}
-      </ApiContext.Provider>
-    );
-  }
-}
diff --git a/pioneer/packages/old-apps/react-api/src/ApiContext.ts b/pioneer/packages/old-apps/react-api/src/ApiContext.ts
deleted file mode 100644
index 8c45ff816b..0000000000
--- a/pioneer/packages/old-apps/react-api/src/ApiContext.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ApiProps } from './types';
-
-import React from 'react';
-
-const ApiContext: React.Context<ApiProps> = React.createContext({} as unknown as ApiProps);
-const ApiConsumer: React.Consumer<ApiProps> = ApiContext.Consumer;
-const ApiProvider: React.Provider<ApiProps> = ApiContext.Provider;
-
-export default ApiContext;
-
-export {
-  ApiConsumer,
-  ApiProvider
-};
diff --git a/pioneer/packages/old-apps/react-api/src/index.ts b/pioneer/packages/old-apps/react-api/src/index.ts
deleted file mode 100644
index 5014423737..0000000000
--- a/pioneer/packages/old-apps/react-api/src/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import Api, { api } from './Api';
-import ApiContext from './ApiContext';
-
-export * from './ledger';
-export * from './with';
-
-export {
-  api,
-  Api,
-  ApiContext
-};
diff --git a/pioneer/packages/old-apps/react-api/src/ledger.ts b/pioneer/packages/old-apps/react-api/src/ledger.ts
deleted file mode 100644
index 8553e3d4e2..0000000000
--- a/pioneer/packages/old-apps/react-api/src/ledger.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Ledger } from '@polkadot/ui-keyring';
-import uiSettings from '@polkadot/ui-settings';
-
-import { api } from './Api';
-
-const ALLOWED_CHAINS = [
-  '0x3fd7b9eb6a00376e5be61f01abb429ffb0b104be05eaff4d458da48fcd425baf', // Kusama CC1
-  '0xe3777fa922cafbff200cadeaea1a76bd7898ad5b89f7848999058b50e715f636' // Kusama CC2
-];
-
-let ledger: Ledger | null = null;
-
-export function isLedgerCapable (): boolean {
-  try {
-    return !!api && ALLOWED_CHAINS.includes(api.genesisHash.toHex());
-  } catch (error) {
-    return false;
-  }
-}
-
-export function isLedger (): boolean {
-  return isLedgerCapable() && uiSettings.ledgerConn !== 'none';
-}
-
-export function clearLedger (): void {
-  ledger = null;
-}
-
-export function getLedger (): Ledger {
-  if (!ledger) {
-    ledger = new Ledger(uiSettings.ledgerConn as 'u2f');
-  }
-
-  return ledger;
-}
diff --git a/pioneer/packages/old-apps/react-api/src/overrides/chain/index.ts b/pioneer/packages/old-apps/react-api/src/overrides/chain/index.ts
deleted file mode 100644
index a31a2d0655..0000000000
--- a/pioneer/packages/old-apps/react-api/src/overrides/chain/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-export default {};
diff --git a/pioneer/packages/old-apps/react-api/src/overrides/spec/edgeware.ts b/pioneer/packages/old-apps/react-api/src/overrides/spec/edgeware.ts
deleted file mode 100644
index 4137ec49a4..0000000000
--- a/pioneer/packages/old-apps/react-api/src/overrides/spec/edgeware.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { IdentityTypes } from 'edgeware-node-types/dist/identity';
-import { SignalingTypes } from 'edgeware-node-types/dist/signaling';
-import { TreasuryRewardTypes } from 'edgeware-node-types/dist/treasuryReward';
-import { VotingTypes } from 'edgeware-node-types/dist/voting';
-
-export default {
-  ...IdentityTypes,
-  ...SignalingTypes,
-  ...TreasuryRewardTypes,
-  ...VotingTypes
-};
diff --git a/pioneer/packages/old-apps/react-api/src/overrides/spec/index.ts b/pioneer/packages/old-apps/react-api/src/overrides/spec/index.ts
deleted file mode 100644
index f0c74b1b58..0000000000
--- a/pioneer/packages/old-apps/react-api/src/overrides/spec/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import edgeware from './edgeware';
-
-export default {
-  edgeware
-};
diff --git a/pioneer/packages/old-apps/react-api/src/transform/echo.ts b/pioneer/packages/old-apps/react-api/src/transform/echo.ts
deleted file mode 100644
index d631f75c16..0000000000
--- a/pioneer/packages/old-apps/react-api/src/transform/echo.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default function echoTransform <T> (x: T, index: number): T {
-  return x;
-}
diff --git a/pioneer/packages/old-apps/react-api/src/types.ts b/pioneer/packages/old-apps/react-api/src/types.ts
deleted file mode 100644
index a307ab3851..0000000000
--- a/pioneer/packages/old-apps/react-api/src/types.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { SubmittableExtrinsicFunction } from '@polkadot/api/promise/types';
-
-import ApiPromise from '@polkadot/api/promise';
-
-// helpers for HOC props
-export type OmitProps<T, K> = Pick<T, Exclude<keyof T, K>>;
-export type SubtractProps<T, K> = OmitProps<T, keyof K>;
-
-export interface BareProps {
-  className?: string;
-  style?: Record<string, any>;
-}
-
-export interface ApiProps {
-  api: ApiPromise;
-  apiDefaultTx: SubmittableExtrinsicFunction;
-  apiDefaultTxSudo: SubmittableExtrinsicFunction;
-  isApiConnected: boolean;
-  isApiReady: boolean;
-  isDevelopment: boolean;
-  isSubstrateV2: boolean;
-  isWaitingInjected: boolean;
-  setApiUrl: (url?: string) => void;
-  systemChain: string;
-  systemName: string;
-  systemVersion: string;
-}
-
-export interface OnChangeCbObs {
-  next: (value?: any) => any;
-}
-
-export type OnChangeCbFn = (value?: any) => any;
-export type OnChangeCb = OnChangeCbObs | OnChangeCbFn;
-
-export interface ChangeProps {
-  callOnResult?: OnChangeCb;
-}
-
-export interface CallState {
-  callResult?: any;
-  callUpdated?: boolean;
-  callUpdatedAt?: number;
-}
-
-export type CallProps = ApiProps & CallState;
-
-export type BaseProps<T> = BareProps & CallProps & ChangeProps & {
-  children?: React.ReactNode;
-  label?: string;
-  render?: (value?: T) => React.ReactNode;
-};
-
-export type Formatter = (value?: any) => string;
diff --git a/pioneer/packages/old-apps/react-api/src/util/index.ts b/pioneer/packages/old-apps/react-api/src/util/index.ts
deleted file mode 100644
index 057ba6f7e8..0000000000
--- a/pioneer/packages/old-apps/react-api/src/util/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import intervalObservable from './intervalObservable';
-import isEqual from './isEqual';
-import triggerChange from './triggerChange';
-
-export {
-  intervalObservable,
-  isEqual,
-  triggerChange
-};
diff --git a/pioneer/packages/old-apps/react-api/src/util/intervalObservable.ts b/pioneer/packages/old-apps/react-api/src/util/intervalObservable.ts
deleted file mode 100644
index ec974809e6..0000000000
--- a/pioneer/packages/old-apps/react-api/src/util/intervalObservable.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { CallState } from '../types';
-
-import { Subscription } from 'rxjs';
-import { interval } from 'rxjs/observable/interval';
-
-const interval$ = interval(500);
-
-export default function intervalObservable<T, Props, State extends CallState> (that: React.Component<Props, State>): Subscription {
-  return interval$.subscribe((): void => {
-    const elapsed = Date.now() - ((that.state.callUpdatedAt as number) || 0);
-    const callUpdated = elapsed <= 1500;
-
-    if (callUpdated !== that.state.callUpdated) {
-      that.setState({
-        callUpdated
-      });
-    }
-  });
-}
diff --git a/pioneer/packages/old-apps/react-api/src/util/isEqual.ts b/pioneer/packages/old-apps/react-api/src/util/isEqual.ts
deleted file mode 100644
index c2512383d5..0000000000
--- a/pioneer/packages/old-apps/react-api/src/util/isEqual.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// 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 {
-  if (!value) {
-    return value;
-  }
-
-  if (value.$$typeof) {
-    return '';
-  }
-
-  if (Array.isArray(value)) {
-    return value.map((item): any =>
-      flatten(null, item)
-    );
-  }
-
-  return value;
-}
-
-export default function isEqual <T> (a?: T, b?: T, debug = false): boolean {
-  const jsonA = JSON.stringify({ test: a }, flatten);
-  const jsonB = JSON.stringify({ test: b }, flatten);
-
-  if (debug) {
-    console.log('jsonA', jsonA, 'jsonB', jsonB);
-  }
-
-  return jsonA === jsonB;
-}
diff --git a/pioneer/packages/old-apps/react-api/src/util/triggerChange.ts b/pioneer/packages/old-apps/react-api/src/util/triggerChange.ts
deleted file mode 100644
index 1e17b6f2e1..0000000000
--- a/pioneer/packages/old-apps/react-api/src/util/triggerChange.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { OnChangeCb } from '../types';
-
-import { isFunction, isObservable } from '@polkadot/util';
-
-export default function triggerChange (value?: any, ...callOnResult: (OnChangeCb | undefined)[]): void {
-  if (!callOnResult || !callOnResult.length) {
-    return;
-  }
-
-  callOnResult.forEach((callOnResult): void => {
-    if (isObservable(callOnResult)) {
-      callOnResult.next(value);
-    } else if (isFunction(callOnResult)) {
-      callOnResult(value);
-    }
-  });
-}
diff --git a/pioneer/packages/old-apps/react-api/src/with/api.tsx b/pioneer/packages/old-apps/react-api/src/with/api.tsx
deleted file mode 100644
index 6d1d5d2974..0000000000
--- a/pioneer/packages/old-apps/react-api/src/with/api.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ApiProps, SubtractProps } from '../types';
-import { DefaultProps } from './types';
-
-import React from 'react';
-import { assert } from '@polkadot/util';
-
-import { ApiConsumer } from '../ApiContext';
-
-export default function withApi <P extends ApiProps> (Inner: React.ComponentType<P>, defaultProps: DefaultProps = {}): React.ComponentType<any> {
-  return class WithApi extends React.PureComponent<SubtractProps<P, ApiProps>> {
-    private component: any = React.createRef();
-
-    public render (): React.ReactNode {
-      return (
-        <ApiConsumer>
-          {(apiProps?: ApiProps): React.ReactNode => {
-            assert(apiProps && apiProps.api, 'Application root must be wrapped inside \'react-api/Api\' to provide API context');
-
-            const isApiReady = apiProps && apiProps.isApiReady;
-            if (!isApiReady) {
-              return null;
-            }
-
-            return (
-              <Inner
-                {...defaultProps}
-                {...(apiProps as any)}
-                {...this.props}
-                ref={this.component}
-              />
-            );
-          }}
-        </ApiConsumer>
-      );
-    }
-  };
-}
diff --git a/pioneer/packages/old-apps/react-api/src/with/call.tsx b/pioneer/packages/old-apps/react-api/src/with/call.tsx
deleted file mode 100644
index bd7ac1a4ba..0000000000
--- a/pioneer/packages/old-apps/react-api/src/with/call.tsx
+++ /dev/null
@@ -1,307 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ApiProps, CallState as State, SubtractProps } from '../types';
-import { Options } from './types';
-
-import React from 'react';
-import { assert, isNull, isUndefined } from '@polkadot/util';
-
-import { isEqual, triggerChange } from '../util';
-import echoTransform from '../transform/echo';
-import withApi from './api';
-
-// FIXME This is not correct, we need some junction of derive, query & consts
-interface Method {
-  (...params: any[]): Promise<any>;
-  at: (hash: Uint8Array | string, ...params: any[]) => Promise<any>;
-  meta: any;
-  multi: (params: any[], cb: (value?: any) => void) => Promise<any>;
-}
-
-type ApiMethodInfo = [Method, any[], string];
-
-const NOOP = (): void => {
-  // ignore
-};
-
-const NO_SKIP = (): boolean => false;
-
-// a mapping of actual error messages that has already been shown
-const errorred: Record<string, boolean> = {};
-
-export default function withCall<P extends ApiProps> (endpoint: string, {
-  at,
-  atProp,
-  callOnResult,
-  fallbacks,
-  isMulti = false,
-  params = [],
-  paramName,
-  paramPick,
-  paramValid = false,
-  propName,
-  skipIf = NO_SKIP,
-  transform = echoTransform,
-  withIndicator = false
-}: Options = {}): (Inner: React.ComponentType<ApiProps>) => React.ComponentType<any> {
-  return (Inner: React.ComponentType<ApiProps>): React.ComponentType<SubtractProps<P, ApiProps>> => {
-    class WithPromise extends React.Component<P, State> {
-      public state: State = {
-        callResult: undefined,
-        callUpdated: false,
-        callUpdatedAt: 0
-      };
-
-      private destroy?: () => void;
-
-      private isActive = false;
-
-      private propName: string;
-
-      private timerId = -1;
-
-      constructor (props: P) {
-        super(props);
-
-        const [, section, method] = endpoint.split('.');
-
-        this.propName = `${section}_${method}`;
-      }
-
-      public componentDidUpdate (prevProps: any): void {
-        const oldParams = this.getParams(prevProps);
-        const newParams = this.getParams(this.props);
-
-        if (this.isActive && !isEqual(newParams, oldParams)) {
-          this
-            .subscribe(newParams)
-            .then(NOOP)
-            .catch(NOOP);
-        }
-      }
-
-      public componentDidMount (): void {
-        this.isActive = true;
-
-        if (withIndicator) {
-          this.timerId = window.setInterval((): void => {
-            const elapsed = Date.now() - (this.state.callUpdatedAt || 0);
-            const callUpdated = elapsed <= 1500;
-
-            if (callUpdated !== this.state.callUpdated) {
-              this.nextState({ callUpdated });
-            }
-          }, 500);
-        }
-
-        // The attachment takes time when a lot is available, set a timeout
-        // to first handle the current queue before subscribing
-        setTimeout((): void => {
-          this
-            .subscribe(this.getParams(this.props))
-            .then(NOOP)
-            .catch(NOOP);
-        }, 0);
-      }
-
-      public componentWillUnmount (): void {
-        this.isActive = false;
-
-        this.unsubscribe()
-          .then(NOOP)
-          .catch(NOOP);
-
-        if (this.timerId !== -1) {
-          clearInterval(this.timerId);
-        }
-      }
-
-      private nextState (state: Partial<State>): void {
-        if (this.isActive) {
-          this.setState(state as State);
-        }
-      }
-
-      private getParams (props: any): [boolean, any[]] {
-        const paramValue = paramPick
-          ? paramPick(props)
-          : paramName
-            ? props[paramName]
-            : undefined;
-
-        if (atProp) {
-          at = props[atProp];
-        }
-
-        // When we are specifying a param and have an invalid, don't use it. For 'params',
-        // we default to the original types, i.e. no validation (query app uses this)
-        if (!paramValid && paramName && (isUndefined(paramValue) || isNull(paramValue))) {
-          return [false, []];
-        }
-
-        const values = isUndefined(paramValue)
-          ? params
-          : params.concat(
-            (Array.isArray(paramValue) && !(paramValue as any).toU8a)
-              ? paramValue
-              : [paramValue]
-          );
-        return [true, values];
-      }
-
-      private constructApiSection = (endpoint: string): [Record<string, Method>, string, string, string] => {
-        const { api } = this.props;
-        const [area, section, method, ...others] = endpoint.split('.');
-
-        assert(area.length && section.length && method.length && others.length === 0, `Invalid API format, expected <area>.<section>.<method>, found ${endpoint}`);
-        assert(['consts', 'rpc', 'query', 'derive'].includes(area), `Unknown api.${area}, expected consts, rpc, query or derive`);
-        assert(!at || area === 'query', 'Only able to do an \'at\' query on the api.query interface');
-
-        const apiSection = (api as any)[area][section];
-
-        return [
-          apiSection,
-          area,
-          section,
-          method
-        ];
-      }
-
-      private getApiMethod (newParams: any[]): ApiMethodInfo {
-        if (endpoint === 'subscribe') {
-          const [fn, ...params] = newParams;
-
-          return [
-            fn,
-            params,
-            'subscribe'
-          ];
-        }
-
-        const endpoints: string[] = [endpoint].concat(fallbacks || []);
-        const expanded = endpoints.map(this.constructApiSection);
-        const [apiSection, area, section, method] = expanded.find(([apiSection]): boolean =>
-          !!apiSection
-        ) || [{}, expanded[0][1], expanded[0][2], expanded[0][3]];
-
-        assert(apiSection && apiSection[method], `Unable to find api.${area}.${section}.${method}`);
-
-        const meta = apiSection[method].meta;
-
-        if (area === 'query' && meta && meta.type.isMap) {
-          const arg = newParams[0];
-
-          assert((!isUndefined(arg) && !isNull(arg)) || meta.type.asMap.linked.isTrue, `${meta.name} expects one argument`);
-        }
-
-        return [
-          apiSection[method],
-          newParams,
-          method.startsWith('subscribe') ? 'subscribe' : area
-        ];
-      }
-
-      private async subscribe ([isValid, newParams]: [boolean, any[]]): Promise<void> {
-        if (!isValid || skipIf(this.props)) {
-          return;
-        }
-
-        const { api } = this.props;
-        let info: ApiMethodInfo | undefined;
-
-        await api.isReady;
-
-        try {
-          assert(at || !atProp, 'Unable to perform query on non-existent at hash');
-
-          info = this.getApiMethod(newParams);
-        } 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]) {
-            console.warn(endpoint, '::', error);
-
-            errorred[error.message] = true;
-          }
-        }
-
-        if (!info) {
-          return;
-        }
-
-        const [apiMethod, params, area] = info;
-        const updateCb = (value?: any): void =>
-          this.triggerUpdate(this.props, value);
-
-        await this.unsubscribe();
-
-        try {
-          if (['derive', 'subscribe'].includes(area) || (area === 'query' && (!at && !atProp))) {
-            this.destroy = isMulti
-              ? await apiMethod.multi(params, updateCb)
-              : await apiMethod(...params, updateCb);
-          } else if (area === 'consts') {
-            updateCb(apiMethod);
-          } else {
-            updateCb(
-              at
-                ? await apiMethod.at(at, ...params)
-                : await apiMethod(...params)
-            );
-          }
-        } catch (error) {
-          // console.warn(endpoint, '::', error);
-        }
-      }
-
-      // eslint-disable-next-line @typescript-eslint/require-await
-      private async unsubscribe (): Promise<void> {
-        if (this.destroy) {
-          this.destroy();
-          this.destroy = undefined;
-        }
-      }
-
-      private triggerUpdate (props: any, value?: any): void {
-        try {
-          const callResult = (props.transform || transform)(value);
-
-          if (!this.isActive || isEqual(callResult, this.state.callResult)) {
-            return;
-          }
-
-          triggerChange(callResult, callOnResult, props.callOnResult);
-
-          this.nextState({
-            callResult,
-            callUpdated: true,
-            callUpdatedAt: Date.now()
-          });
-        } catch (error) {
-          // console.warn(endpoint, '::', error.message);
-        }
-      }
-
-      public render (): React.ReactNode {
-        const { callUpdated, callUpdatedAt, callResult } = this.state;
-        const _props = {
-          ...this.props,
-          callUpdated,
-          callUpdatedAt
-        };
-
-        if (!isUndefined(callResult)) {
-          (_props as any)[propName || this.propName] = callResult;
-        }
-
-        return (
-          <Inner {..._props} />
-        );
-      }
-    }
-
-    return withApi(WithPromise);
-  };
-}
diff --git a/pioneer/packages/old-apps/react-api/src/with/callDiv.tsx b/pioneer/packages/old-apps/react-api/src/with/callDiv.tsx
deleted file mode 100644
index 5dfef8b1b8..0000000000
--- a/pioneer/packages/old-apps/react-api/src/with/callDiv.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { DefaultProps, Options } from './types';
-import { BaseProps } from '../types';
-
-import React from 'react';
-
-import withCall from './call';
-
-interface Props<T> extends BaseProps<T> {
-  callResult?: 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>> {
-      return (
-        <div
-          {...defaultProps}
-          className={[className, callUpdated ? 'rx--updated' : undefined].join(' ')}
-          style={style}
-        >
-          {label}{render(callResult)}{children}
-        </div>
-      );
-    }
-
-    return withCall(endpoint, { ...options, propName: 'callResult' })(Inner);
-  };
-}
diff --git a/pioneer/packages/old-apps/react-api/src/with/calls.ts b/pioneer/packages/old-apps/react-api/src/with/calls.ts
deleted file mode 100644
index f2b33303bf..0000000000
--- a/pioneer/packages/old-apps/react-api/src/with/calls.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ApiProps, SubtractProps } from '../types';
-import { Options } from './types';
-
-import React from 'react';
-import withCall from './call';
-
-type Call = string | [string, Options];
-
-export default function withCalls <P> (...calls: Call[]): (Component: React.ComponentType<P>) => React.ComponentType<SubtractProps<P, ApiProps>> {
-  return (Component: React.ComponentType<P>): React.ComponentType<any> => {
-    // NOTE: Order is reversed so it makes sense in the props, i.e. component
-    // after something can use the value of the preceding version
-    return calls
-      .reverse()
-      .reduce((Component, call): React.ComponentType<any> => {
-        return Array.isArray(call)
-          ? withCall(...call)(Component as any)
-          : withCall(call)(Component as any);
-      }, Component);
-  };
-}
diff --git a/pioneer/packages/old-apps/react-api/src/with/index.ts b/pioneer/packages/old-apps/react-api/src/with/index.ts
deleted file mode 100644
index f06802a183..0000000000
--- a/pioneer/packages/old-apps/react-api/src/with/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-export { default as withApi } from './api';
-export { default as withCall } from './call';
-export { default as withCalls } from './calls';
-export { default as withCallDiv } from './callDiv';
-export { default as withMulti } from './multi';
-export { default as withObservable } from './observable';
diff --git a/pioneer/packages/old-apps/react-api/src/with/multi.ts b/pioneer/packages/old-apps/react-api/src/with/multi.ts
deleted file mode 100644
index fff444f0b8..0000000000
--- a/pioneer/packages/old-apps/react-api/src/with/multi.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import React from 'react';
-
-type HOC = (Component: React.ComponentType<any>) => React.ComponentType<any>;
-
-export default function withMulti<T> (Component: React.ComponentType<T>, ...hocs: HOC[]): React.ComponentType<any> {
-  // NOTE: Order is reversed so it makes sense in the props, i.e. component
-  // after something can use the value of the preceding version
-  return hocs
-    .reverse()
-    .reduce((Component, hoc): React.ComponentType<any> =>
-      hoc(Component), Component
-    );
-}
diff --git a/pioneer/packages/old-apps/react-api/src/with/observable.tsx b/pioneer/packages/old-apps/react-api/src/with/observable.tsx
deleted file mode 100644
index 68c53f5558..0000000000
--- a/pioneer/packages/old-apps/react-api/src/with/observable.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-// TODO: Lots of duplicated code between this and withObservable, surely there is a better way of doing this?
-
-import { CallState } from '../types';
-import { HOC, Options, DefaultProps, RenderFn } from './types';
-
-import React from 'react';
-import { Observable, of } from 'rxjs';
-import { catchError, map } from 'rxjs/operators';
-
-import echoTransform from '../transform/echo';
-import { intervalObservable, isEqual, triggerChange } from '../util';
-
-interface State extends CallState {
-  subscriptions: any[]; // FIXME subscriptions
-}
-
-// FIXME proper types for attributes
-
-export default function withObservable<T, P> (observable: Observable<P>, { callOnResult, propName = 'value', transform = echoTransform }: Options = {}): HOC {
-  return (Inner: React.ComponentType<any>, defaultProps: DefaultProps = {}, render?: RenderFn): React.ComponentType<any> => {
-    return class WithObservable extends React.Component<any, State> {
-      public state: State = {
-        callResult: undefined,
-        callUpdated: false,
-        callUpdatedAt: 0,
-        subscriptions: []
-      };
-
-      public componentDidMount (): void {
-        this.setState({
-          subscriptions: [
-            observable
-              .pipe(
-                map(transform),
-                catchError((): Observable<any> =>
-                  of(undefined)
-                )
-              )
-              .subscribe((value: any): void =>
-                this.triggerUpdate(this.props, value)
-              ),
-            intervalObservable(this)
-          ]
-        });
-      }
-
-      public componentWillUnmount (): void {
-        this.state.subscriptions.forEach((subscription): void =>
-          subscription.unsubscribe()
-        );
-      }
-
-      private triggerUpdate = (props: any, callResult?: T): void => {
-        try {
-          if (isEqual(callResult, this.state.callResult)) {
-            return;
-          }
-
-          triggerChange(callResult, callOnResult, props.callOnResult || defaultProps.callOnResult);
-
-          this.setState({
-            callResult,
-            callUpdated: true,
-            callUpdatedAt: Date.now()
-          });
-        } catch (error) {
-          console.error(this.props, error);
-        }
-      }
-
-      public render (): React.ReactNode {
-        const { children } = this.props;
-        const { callUpdated, callUpdatedAt, callResult } = this.state;
-        const _props = {
-          ...defaultProps,
-          ...this.props,
-          callUpdated,
-          callUpdatedAt,
-          [propName]: callResult
-        };
-
-        return (
-          <Inner {..._props}>
-            {render && render(callResult)}{children}
-          </Inner>
-        );
-      }
-    };
-  };
-}
diff --git a/pioneer/packages/old-apps/react-api/src/with/types.ts b/pioneer/packages/old-apps/react-api/src/with/types.ts
deleted file mode 100644
index 0f04e1de92..0000000000
--- a/pioneer/packages/old-apps/react-api/src/with/types.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { OnChangeCb } from '../types';
-
-import React from 'react';
-
-export type Transform = (value: any, index: number) => any;
-
-export interface DefaultProps {
-  callOnResult?: OnChangeCb;
-  [index: string]: any;
-}
-
-export interface Options {
-  at?: Uint8Array | string;
-  atProp?: string;
-  callOnResult?: OnChangeCb;
-  fallbacks?: string[];
-  isMulti?: boolean;
-  params?: any[];
-  paramName?: string;
-  paramPick?: (props: any) => any;
-  paramValid?: boolean;
-  propName?: string;
-  skipIf?: (props: any) => boolean;
-  transform?: Transform;
-  withIndicator?: boolean;
-}
-
-export type RenderFn = (value?: any) => React.ReactNode;
-
-export type StorageTransform = (input: any, index: number) => any | null;
-
-export type HOC = (Component: React.ComponentType<any>, defaultProps?: DefaultProps, render?: RenderFn) => React.ComponentType<any>;
-
-export interface ApiMethod {
-  name: string;
-  section?: string;
-}
-
-export type ComponentRenderer = (render: RenderFn, defaultProps?: DefaultProps) => React.ComponentType<any>;
-
-export type OmitProps<T, K> = Pick<T, Exclude<keyof T, K>>;
-export type SubtractProps<T, K> = OmitProps<T, keyof K>;
diff --git a/pioneer/packages/old-apps/react-api/test/enzyme.js b/pioneer/packages/old-apps/react-api/test/enzyme.js
deleted file mode 100644
index 884f2a099b..0000000000
--- a/pioneer/packages/old-apps/react-api/test/enzyme.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-const Adapter = require('enzyme-adapter-react-16');
-const Enzyme = require('enzyme');
-
-Enzyme.configure({
-  adapter: new Adapter()
-});
-
-module.exports = Enzyme;
diff --git a/pioneer/packages/old-apps/react-api/test/observable.js b/pioneer/packages/old-apps/react-api/test/observable.js
deleted file mode 100644
index 0aed8dd26a..0000000000
--- a/pioneer/packages/old-apps/react-api/test/observable.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-const createObservable = require('@polkadot/api-rx/observable');
-
-module.exports = function observable (method) {
-  const fn = () => Promise.resolve(12345);
-
-  fn.unsubscribe = () => Promise.resolve(true);
-
-  return createObservable(`section_${method}`, method, {
-    [method]: fn
-  })();
-};
diff --git a/pioneer/packages/old-apps/react-api/webpack.config.js b/pioneer/packages/old-apps/react-api/webpack.config.js
deleted file mode 100644
index 96bbd8abc2..0000000000
--- a/pioneer/packages/old-apps/react-api/webpack.config.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-const ENV = process.env.NODE_ENV || 'development';
-const isProd = ENV === 'production';
-
-module.exports = {
-  context: __dirname,
-  devtool: isProd ? 'source-map' : 'cheap-eval-source-map',
-  entry: './src/demo.tsx',
-  mode: ENV,
-  output: {
-    path: __dirname,
-    filename: './demo.js'
-  },
-  resolve: {
-    alias: {},
-    extensions: ['.js', '.jsx', '.ts', '.tsx']
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|ts|tsx)$/,
-        exclude: /(node_modules)/,
-        use: {
-          loader: 'babel-loader'
-        }
-      }
-    ]
-  },
-  plugins: []
-};
diff --git a/pioneer/packages/old-apps/react-components/LICENSE b/pioneer/packages/old-apps/react-components/LICENSE
deleted file mode 100644
index 0d381b2e97..0000000000
--- a/pioneer/packages/old-apps/react-components/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/pioneer/packages/old-apps/react-components/README.md b/pioneer/packages/old-apps/react-components/README.md
deleted file mode 100644
index 85e493f678..0000000000
--- a/pioneer/packages/old-apps/react-components/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# @polkadot/react-components
-
-WARNING: This is an internal package to [polkadot-js/apps](https://github.com/polkadot-js/apps) so is not inteded (yet) for broad use.
-
-For the existing sharable components usable in external React-based projects, take a look at the [polkadot-js/ui documentation](https://polkadot.js.org/ui/)
diff --git a/pioneer/packages/old-apps/react-components/package.json b/pioneer/packages/old-apps/react-components/package.json
deleted file mode 100644
index d8aaab545f..0000000000
--- a/pioneer/packages/old-apps/react-components/package.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
-  "name": "@polkadot/react-components",
-  "version": "0.37.0-beta.63",
-  "main": "index.js",
-  "repository": "https://github.com/polkadot-js/apps.git",
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "contributors": [],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/keyring": "^1.7.0-beta.5",
-    "@polkadot/react-api": "^0.37.0-beta.63",
-    "@polkadot/react-identicon": "^0.47.0-beta.3",
-    "@polkadot/react-query": "^0.37.0-beta.63",
-    "@polkadot/ui-keyring": "^0.47.0-beta.3",
-    "@polkadot/ui-settings": "^0.47.0-beta.3",
-    "@types/chart.js": "^2.8.10",
-    "@types/i18next": "^13.0.0",
-    "@types/react-copy-to-clipboard": "^4.3.0",
-    "@types/react-router-dom": "^5.1.2",
-    "@types/react-tooltip": "^3.11.0",
-    "@types/styled-components": "^4.1.21",
-    "@types/styled-theming": "^2.2.2",
-    "chart.js": "^2.9.2",
-    "codeflask": "^1.4.0",
-    "i18next": "^19.0.0",
-    "i18next-browser-languagedetector": "^4.0.1",
-    "i18next-xhr-backend": "^3.2.2",
-    "react-chartjs-2": "^2.8.0",
-    "react-copy-to-clipboard": "^5.0.1",
-    "react-dropzone": "^10.1.10",
-    "react-i18next": "^11.0.1",
-    "react-markdown": "^4.2.2",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
-    "react-tooltip": "^3.11.1",
-    "semantic-ui-css": "^2.3.1",
-    "semantic-ui-react": "^0.88.1",
-    "store": "^2.0.12",
-    "styled-theming": "^2.2.0"
-  }
-}
diff --git a/pioneer/packages/old-apps/react-components/src/ActionItem.tsx b/pioneer/packages/old-apps/react-components/src/ActionItem.tsx
deleted file mode 100644
index 5d952fcf1d..0000000000
--- a/pioneer/packages/old-apps/react-components/src/ActionItem.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Proposal } from '@polkadot/types/interfaces';
-
-import BN from 'bn.js';
-import React from 'react';
-import { RouteComponentProps } from 'react-router';
-import { withRouter } from 'react-router-dom';
-import styled from 'styled-components';
-
-import Card from './Card';
-import ProposedAction, { styles as proposedActionStyles } from './ProposedAction';
-import { styles as rowStyles } from './Row';
-
-interface Props extends RouteComponentProps {
-  className?: string;
-  children?: React.ReactNode;
-  accessory?: React.ReactNode;
-  proposal?: Proposal | null;
-  idNumber: BN | number | string;
-  expandNested?: boolean;
-}
-
-export const styles = `
-  ${rowStyles}
-  ${proposedActionStyles}
-`;
-
-function ActionItem ({ className, children, accessory, idNumber, proposal, expandNested }: Props): React.ReactElement<Props> {
-  return (
-    <Card className={className}>
-      <div className='ui--Row'>
-        <div className='ui--Row-base'>
-          <div className='ui--Row-details'>
-            <ProposedAction
-              idNumber={idNumber}
-              proposal={proposal}
-              withLinks={expandNested}
-              expandNested={expandNested}
-            />
-          </div>
-          {accessory}
-        </div>
-        {children}
-      </div>
-    </Card>
-  );
-}
-
-export default withRouter(styled(ActionItem)`${styles}`);
diff --git a/pioneer/packages/old-apps/react-components/src/AddressCard.tsx b/pioneer/packages/old-apps/react-components/src/AddressCard.tsx
deleted file mode 100644
index 86f190c471..0000000000
--- a/pioneer/packages/old-apps/react-components/src/AddressCard.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-// Copyright 2017-2019 @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.
-// import { I18nProps } from '@polkadot/react-components/types';
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore, @typescript-eslint/ban-ts-comment
-// @ts-ignore This line needed for the styled export... don't ask why
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import BN from 'bn.js';
-import React from 'react';
-import styled from 'styled-components';
-
-import AddressRow, { Props as AddressProps } from './AddressRow';
-import Card from './Card';
-import LinkPolkascan from './LinkPolkascan';
-
-import translate from './translate';
-
-interface Props extends AddressProps {
-  withExplorer?: boolean;
-}
-
-function AddressCard (props: Props): React.ReactElement<Props> {
-  const { className, value, withExplorer } = props;
-
-  return (
-    <Card className={className}>
-      <AddressRow
-        {...props}
-        className='ui--AddressCard-AddressRow'
-      />
-      {withExplorer && value && (
-        <div className='ui--AddressCard-explorer'>
-          <LinkPolkascan
-            className='ui--AddressCard-exporer-link'
-            data={value.toString()}
-            type='address'
-          />
-        </div>
-      )}
-    </Card>
-  );
-}
-
-export default translate(styled(AddressCard)`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  .ui--Row-buttons .ui--Button-Group .ui.button {
-    visibility: visible;
-    margin-right: .25rem;
-  }
-
-  .ui--AddressCard-explorer {
-    margin: 0 -0.25rem -0.5rem 0;
-    text-align: right;
-
-    .ui--AddressCard-exporer-link {
-      display: inline-block;
-      margin-top: 0.5rem;
-    }
-  }
-`);
diff --git a/pioneer/packages/old-apps/react-components/src/AddressInfo.tsx b/pioneer/packages/old-apps/react-components/src/AddressInfo.tsx
deleted file mode 100644
index 137e42d266..0000000000
--- a/pioneer/packages/old-apps/react-components/src/AddressInfo.tsx
+++ /dev/null
@@ -1,397 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { DerivedBalances, DerivedStaking } from '@polkadot/api-derive/types';
-import { ValidatorPrefs0to145 } from '@polkadot/types/interfaces';
-import { BareProps, I18nProps } from './types';
-
-import BN from 'bn.js';
-import React from 'react';
-import styled from 'styled-components';
-import { formatBalance, formatNumber, isObject } from '@polkadot/util';
-import { Icon, Tooltip, TxButton } from '@polkadot/react-components';
-import { withCalls, withMulti } from '@polkadot/react-api';
-
-import CryptoType from './CryptoType';
-import Label from './Label';
-import translate from './translate';
-
-// true to display, or (for bonded) provided values [own, ...all extras]
-export interface BalanceActiveType {
-  available?: boolean;
-  bonded?: boolean | BN[];
-  extraInfo?: [React.ReactNode, React.ReactNode][];
-  locked?: boolean;
-  redeemable?: boolean;
-  reserved?: boolean;
-  total?: boolean;
-  unlocking?: boolean;
-}
-
-export interface CryptoActiveType {
-  crypto?: boolean;
-  nonce?: boolean;
-}
-
-export interface ValidatorPrefsType {
-  unstakeThreshold?: boolean;
-  validatorPayment?: boolean;
-}
-
-interface Props extends BareProps, I18nProps {
-  address: string;
-  balancesAll?: DerivedBalances;
-  children?: React.ReactNode;
-  extraInfo?: [string, string][];
-  stakingInfo?: DerivedStaking;
-  withBalance?: boolean | BalanceActiveType;
-  withExtended?: boolean | CryptoActiveType;
-  withHexSessionId: string | null;
-  withRewardDestination?: boolean;
-  withValidatorPrefs?: boolean | ValidatorPrefsType;
-}
-
-const DEFAULT_BALANCES: BalanceActiveType = {
-  available: true,
-  bonded: true,
-  locked: true,
-  redeemable: true,
-  reserved: true,
-  total: true,
-  unlocking: true
-};
-const DEFAULT_EXTENDED = {
-  crypto: true,
-  nonce: true
-};
-const DEFAULT_PREFS = {
-  unstakeThreshold: true,
-  validatorPayment: true
-};
-
-// skip balances retrieval of none of this matches
-function skipBalancesIf ({ withBalance = true, withExtended = false }: Props): boolean {
-  if (withBalance === true || withExtended === true) {
-    return false;
-  } else if (isObject(withBalance)) {
-    // these all pull from the all balances
-    if (withBalance.available || withBalance.locked || withBalance.reserved || withBalance.total) {
-      return false;
-    }
-  } else if (isObject(withExtended)) {
-    if (withExtended.nonce) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-function skipStakingIf ({ stakingInfo, withBalance = true, withRewardDestination = false, withValidatorPrefs = false }: Props): boolean {
-  if (stakingInfo) {
-    return true;
-  } else if (withBalance === true || withValidatorPrefs || withRewardDestination) {
-    return false;
-  } else if (isObject(withBalance)) {
-    if (withBalance.unlocking || withBalance.redeemable) {
-      return false;
-    } else if (withBalance.bonded) {
-      return Array.isArray(withBalance.bonded);
-    }
-  }
-
-  return true;
-}
-
-// calculates the bonded, first being the own, the second being nominated
-function calcBonded (stakingInfo?: DerivedStaking, bonded?: boolean | BN[]): [BN, BN[]] {
-  let other: BN[] = [];
-  let own = new BN(0);
-
-  if (Array.isArray(bonded)) {
-    other = bonded
-      .filter((_, index): boolean => index !== 0)
-      .filter((value): boolean => value.gtn(0));
-
-    own = bonded[0];
-  } else if (stakingInfo && stakingInfo.stakingLedger && stakingInfo.accountId.eq(stakingInfo.stashId)) {
-    own = stakingInfo.stakingLedger.active.unwrap();
-  }
-
-  return [own, other];
-}
-
-function renderExtended ({ balancesAll, t, address, withExtended }: Props): React.ReactNode {
-  const extendedDisplay = withExtended === true
-    ? DEFAULT_EXTENDED
-    : withExtended || undefined;
-
-  if (!extendedDisplay) {
-    return null;
-  }
-
-  return (
-    <div className='column'>
-      {balancesAll && extendedDisplay.nonce && (
-        <>
-          <Label label={t('transactions')} />
-          <div className='result'>{formatNumber(balancesAll.accountNonce)}</div>
-        </>
-      )}
-      {extendedDisplay.crypto && (
-        <>
-          <Label label={t('type')} />
-          <CryptoType
-            accountId={address}
-            className='result'
-          />
-        </>
-      )}
-    </div>
-  );
-}
-
-function renderUnlocking ({ stakingInfo, t }: Props): React.ReactNode {
-  if (!stakingInfo || !stakingInfo.unlocking || !stakingInfo.unlocking.length) {
-    return null;
-  }
-
-  const total = stakingInfo.unlocking.reduce((total, { value }): BN => total.add(value), new BN(0));
-
-  if (total.eqn(0)) {
-    return null;
-  }
-
-  return (
-    <div>
-      {formatBalance(total)}
-      <Icon
-        name='info circle'
-        data-tip
-        data-for='unlocking-trigger'
-      />
-      <Tooltip
-        text={stakingInfo.unlocking.map(({ remainingBlocks, value }, index): React.ReactNode => (
-          <div key={index}>
-            {t('{{value}}, {{remaining}} blocks left', {
-              replace: {
-                remaining: formatNumber(remainingBlocks),
-                value: formatBalance(value)
-              }
-            })}
-          </div>
-        ))}
-        trigger='unlocking-trigger'
-      />
-    </div>
-  );
-}
-
-function renderValidatorPrefs ({ stakingInfo, t, withValidatorPrefs = false }: Props): React.ReactNode {
-  const validatorPrefsDisplay = withValidatorPrefs === true
-    ? DEFAULT_PREFS
-    : withValidatorPrefs;
-
-  if (!validatorPrefsDisplay || !stakingInfo || !stakingInfo.validatorPrefs) {
-    return null;
-  }
-
-  return (
-    <>
-      <div />
-      {validatorPrefsDisplay.unstakeThreshold && (stakingInfo.validatorPrefs as ValidatorPrefs0to145).unstakeThreshold && (
-        <>
-          <Label label={t('unstake threshold')} />
-          <div className='result'>
-            {(stakingInfo.validatorPrefs as ValidatorPrefs0to145).unstakeThreshold.toString()}
-          </div>
-        </>
-      )}
-      {validatorPrefsDisplay.validatorPayment && stakingInfo.validatorPrefs.validatorPayment && (
-        <>
-          <Label label={t('commission')} />
-          <div className='result'>{
-            formatBalance(stakingInfo.validatorPrefs.validatorPayment)
-          }</div>
-        </>
-      )}
-    </>
-  );
-}
-
-function renderBalances (props: Props): React.ReactNode {
-  const { balancesAll, stakingInfo, t, withBalance = true } = props;
-  const balanceDisplay = withBalance === true
-    ? DEFAULT_BALANCES
-    : withBalance || false;
-
-  if (!balanceDisplay) {
-    return null;
-  }
-
-  const [ownBonded, otherBonded] = calcBonded(stakingInfo, balanceDisplay.bonded);
-
-  return (
-    <>
-      {balancesAll && balanceDisplay.total && (
-        <>
-          <Label label={t('total')} />
-          <div className='result'>{formatBalance(balancesAll.votingBalance)}</div>
-        </>
-      )}
-      {balancesAll && balanceDisplay.available && (
-        <>
-          <Label label={t('transferrable')} />
-          <div className='result'>{formatBalance(balancesAll.availableBalance)}</div>
-        </>
-      )}
-      {balancesAll && balanceDisplay.locked && balancesAll.lockedBalance && balancesAll.lockedBalance.gtn(0) && (
-        <>
-          <Label label={t('locked')} />
-          <div className='result'>{formatBalance(balancesAll.lockedBalance)}</div>
-        </>
-      )}
-      {balancesAll && balanceDisplay.reserved && balancesAll.reservedBalance && balancesAll.reservedBalance.gtn(0) && (
-        <>
-          <Label label={t('reserved')} />
-          <div className='result'>{formatBalance(balancesAll.reservedBalance)}</div>
-        </>
-      )}
-      {balanceDisplay.bonded && (ownBonded.gtn(0) || otherBonded.length !== 0) && (
-        <>
-          <Label label={t('bonded')} />
-          <div className='result'>{formatBalance(ownBonded)}{otherBonded.length !== 0 && (
-            ` (+${otherBonded.map((bonded): string => formatBalance(bonded)).join(', ')})`
-          )}</div>
-        </>
-      )}
-      {balanceDisplay.redeemable && stakingInfo && stakingInfo.redeemable && stakingInfo.redeemable.gtn(0) && (
-        <>
-          <Label label={t('redeemable')} />
-          <div className='result'>
-            {formatBalance(stakingInfo.redeemable)}
-            {stakingInfo.controllerId && (
-              <TxButton
-                accountId={stakingInfo.controllerId.toString()}
-                className='icon-button'
-                icon='lock'
-                size='small'
-                isPrimary
-                key='unlock'
-                params={[]}
-                tooltip={t('Redeem these funds')}
-                tx='staking.withdrawUnbonded'
-              />
-            )}
-          </div>
-        </>
-      )}
-      {balanceDisplay.unlocking && stakingInfo && stakingInfo.unlocking && (
-        <>
-          <Label label={t('unbonding')} />
-          <div className='result'>
-            {renderUnlocking(props)}
-          </div>
-        </>
-      )}
-    </>
-  );
-}
-
-function AddressInfo (props: Props): React.ReactElement<Props> {
-  const { className, children, extraInfo, stakingInfo, t, withHexSessionId, withRewardDestination } = props;
-
-  return (
-    <div className={className}>
-      <div className='column'>
-        {renderBalances(props)}
-        {withHexSessionId && (
-          <>
-            <Label label={t('session keys')} />
-            <div className='result'>{withHexSessionId}</div>
-          </>
-        )}
-        {renderValidatorPrefs(props)}
-        {extraInfo && (
-          <>
-            <div />
-            {extraInfo.map(([label, value], index): React.ReactNode => (
-              <React.Fragment key={`label:${index}`}>
-                <Label label={label} />
-                <div className='result'>
-                  {value}
-                </div>
-              </React.Fragment>
-            ))}
-          </>
-        )}
-        {withRewardDestination && stakingInfo && stakingInfo.rewardDestination && (
-          <>
-            <Label label={t('reward destination')} />
-            <div className='result'>{stakingInfo.rewardDestination.toString().toLowerCase()}</div>
-          </>
-        )}
-      </div>
-      {renderExtended(props)}
-      {children && (
-        <div className='column'>
-          {children}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default withMulti(
-  styled(AddressInfo)`
-    align-items: flex-start;
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    white-space: nowrap;
-
-    .column {
-      flex: 1;
-      display: grid;
-      opacity: 1;
-
-      label {
-        grid-column:  1;
-        padding-right: 0.5rem;
-        text-align: right;
-
-        .help.circle.icon {
-          display: none;
-        }
-      }
-
-      .result {
-        grid-column:  2;
-
-        .icon {
-          margin-left: .3em;
-          margin-right: 0;
-          padding-right: 0 !important;
-        }
-
-        button.ui.icon.primary.button.icon-button {
-          background: white !important;
-        }
-      }
-    }
-  `,
-  translate,
-  withCalls<Props>(
-    ['derive.balances.all', {
-      paramName: 'address',
-      propName: 'balancesAll',
-      skipIf: skipBalancesIf
-    }],
-    ['derive.staking.info', {
-      paramName: 'address',
-      propName: 'stakingInfo',
-      skipIf: skipStakingIf
-    }]
-  )
-);
diff --git a/pioneer/packages/old-apps/react-components/src/AddressMini.tsx b/pioneer/packages/old-apps/react-components/src/AddressMini.tsx
deleted file mode 100644
index 3f0575d7af..0000000000
--- a/pioneer/packages/old-apps/react-components/src/AddressMini.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
-import { BareProps } from './types';
-
-import BN from 'bn.js';
-import React from 'react';
-import styled from 'styled-components';
-import { AccountName } from '@polkadot/react-query';
-import { KeyringItemType } from '@polkadot/ui-keyring/types';
-
-import { classes, toShortAddress } from './util';
-import BalanceDisplay from './Balance';
-import BondedDisplay from './Bonded';
-import IdentityIcon from './IdentityIcon';
-import LockedVote from './LockedVote';
-
-interface Props extends BareProps {
-  balance?: BN | BN[];
-  bonded?: BN | BN[];
-  children?: React.ReactNode;
-  iconInfo?: React.ReactNode;
-  isPadded?: boolean;
-  isShort?: boolean;
-  type?: KeyringItemType;
-  value?: AccountId | AccountIndex | Address | string;
-  withAddress?: boolean;
-  withBalance?: boolean;
-  withBonded?: boolean;
-  withLockedVote?: boolean;
-  withName?: boolean;
-}
-
-function AddressMini ({ balance, bonded, children, className, iconInfo, isPadded = true, style, value, withAddress = true, withBalance = false, withBonded = false, withLockedVote = false, withName = true }: Props): React.ReactElement<Props> | null {
-  if (!value) {
-    return null;
-  }
-
-  return (
-    <div
-      className={classes('ui--AddressMini', isPadded ? 'padded' : '', className)}
-      style={style}
-    >
-      <div className='ui--AddressMini-info'>
-        {withAddress && (
-          <div className='ui--AddressMini-address'>
-            {withName
-              ? <AccountName params={value} />
-              : toShortAddress(value)
-            }
-          </div>
-        )}
-        {children}
-      </div>
-      <div className='ui--AddressMini-icon'>
-        <IdentityIcon
-          size={24}
-          value={value}
-        />
-        {iconInfo && (
-          <div className='ui--AddressMini-icon-info'>
-            {iconInfo}
-          </div>
-        )}
-      </div>
-      <div className='ui--AddressMini-balances'>
-        {withBalance && (
-          <BalanceDisplay
-            balance={balance}
-            params={value}
-          />
-        )}
-        {withBonded && (
-          <BondedDisplay
-            bonded={bonded}
-            label=''
-            params={value}
-          />
-        )}
-        {withLockedVote && (
-          <LockedVote params={value} />
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default styled(AddressMini)`
-  display: inline-block;
-  padding: 0 0.25rem 0 1rem;
-  white-space: nowrap;
-
-  &.padded {
-    display: inline-block;
-    padding: 0.25rem 0 0 1rem;
-  }
-
-  &.summary {
-    position: relative;
-    top: -0.2rem;
-  }
-
-  .ui--AddressMini-address {
-    font-family: monospace;
-    max-width: 9rem;
-    min-width: 9em;
-    overflow: hidden;
-    text-align: right;
-    text-overflow: ellipsis;
-  }
-
-  .ui--AddressMini-balances {
-    display: grid;
-
-    .ui--Bonded,
-    .ui--LockedVote {
-      font-size: 0.75rem;
-      margin-right: 2.25rem;
-      margin-top: -0.5rem;
-      text-align: right;
-    }
-  }
-
-  .ui--AddressMini-icon {
-    margin: 0 0 0 0.5rem;
-
-    .ui--AddressMini-icon-info {
-      position: absolute;
-      right: -0.5rem;
-      top: -0.5rem;
-      z-index: 1;
-    }
-
-    .ui--IdentityIcon {
-      margin: 0;
-      vertical-align: middle;
-    }
-  }
-
-  .ui--AddressMini-icon,
-  .ui--AddressMini-info {
-    display: inline-block;
-    position: relative;
-    vertical-align: middle;
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/AddressMiniJoy.tsx b/pioneer/packages/old-apps/react-components/src/AddressMiniJoy.tsx
deleted file mode 100644
index f695892c3a..0000000000
--- a/pioneer/packages/old-apps/react-components/src/AddressMiniJoy.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
-import { BareProps } from './types';
-
-import BN from 'bn.js';
-import React from 'react';
-import styled from 'styled-components';
-import { KeyringItemType } from '@polkadot/ui-keyring/types';
-
-import { classes, getAddressName, toShortAddress } from './util';
-import BalanceDisplay from './Balance';
-import BondedDisplay from './Bonded';
-import IdentityIcon from './IdentityIcon';
-
-interface Props extends BareProps {
-  balance?: BN | BN[];
-  bonded?: BN | BN[];
-  children?: React.ReactNode;
-  iconInfo?: React.ReactNode;
-  isPadded?: boolean;
-  isShort?: boolean;
-  type?: KeyringItemType;
-  value?: AccountId | AccountIndex | Address | string | null;
-  withAddress?: boolean;
-  withBalance?: boolean;
-  withBonded?: boolean;
-}
-
-function renderAddressOrName ({ isShort = false, withAddress = true, type }: Props, address: string): React.ReactNode {
-  if (!withAddress) {
-    return null;
-  }
-
-  const name = getAddressName(address, type);
-
-  return (
-    <div className={`ui--AddressMini-address ${name ? 'withName' : 'withAddr'}`}>{
-      name || (
-        isShort
-          ? toShortAddress(address)
-          : address
-      )
-    }</div>
-  );
-}
-
-function renderBalance ({ balance, value, withBalance = false }: Props): React.ReactNode {
-  if (!withBalance || !value) {
-    return null;
-  }
-
-  return (
-    <BalanceDisplay
-      balance={balance}
-      params={value}
-    />
-  );
-}
-
-function renderBonded ({ bonded, value, withBonded = false }: Props): React.ReactNode {
-  if (!withBonded || !value) {
-    return null;
-  }
-
-  return (
-    <BondedDisplay
-      bonded={bonded}
-      label=''
-      params={value}
-    />
-  );
-}
-
-function AddressMini (props: Props): React.ReactElement<Props> | null {
-  const { children, className, iconInfo, isPadded = true, style, value } = props;
-
-  if (!value) {
-    return null;
-  }
-
-  const address = value.toString();
-
-  return (
-    <div
-      className={classes('ui--AddressMini', isPadded ? 'padded' : '', className)}
-      style={style}
-    >
-      <div className='ui--AddressMini-info'>
-        {renderAddressOrName(props, address)}
-        {children}
-      </div>
-      <div className='ui--AddressMini-icon'>
-        <IdentityIcon
-          size={24}
-          value={address}
-        />
-        {iconInfo && (
-          <div className='ui--AddressMini-icon-info'>
-            {iconInfo}
-          </div>
-        )}
-      </div>
-      <div className='ui--AddressMini-balances'>
-        {renderBalance(props)}
-        {renderBonded(props)}
-      </div>
-    </div>
-  );
-}
-
-export default styled(AddressMini)`
-  display: inline-block;
-  padding: 0 0.25rem 0 1rem;
-  white-space: nowrap;
-
-  &.padded {
-    display: inline-block;
-    padding: 0.25rem 0 0 1rem;
-  }
-
-  &.summary {
-    position: relative;
-    top: -0.2rem;
-  }
-
-  .ui--AddressMini-address {
-    &.withAddr,
-    &.withName {
-      font-family: monospace;
-      max-width: 9rem;
-      min-width: 4em;
-      overflow: hidden;
-      text-align: right;
-      text-overflow: ellipsis;
-    }
-
-    &.withName {
-      text-transform: uppercase;
-    }
-  }
-
-  .ui--AddressMini-balances {
-    display: grid;
-
-    .ui--Bonded {
-      font-size: 0.75rem;
-      margin-right: 2.25rem;
-      margin-top: -0.5rem;
-      text-align: right;
-    }
-  }
-
-  .ui--AddressMini-icon {
-    margin: 0 0 0 0.5rem;
-
-    .ui--AddressMini-icon-info {
-      position: absolute;
-      right: -0.5rem;
-      top: -0.5rem;
-      z-index: 1;
-    }
-
-    .ui--IdentityIcon {
-      margin: 0;
-      vertical-align: middle;
-    }
-  }
-
-  .ui--AddressMini-icon,
-  .ui--AddressMini-info {
-    display: inline-block;
-    position: relative;
-    vertical-align: middle;
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/AddressRow.tsx b/pioneer/packages/old-apps/react-components/src/AddressRow.tsx
deleted file mode 100644
index 6a1ac0bf8d..0000000000
--- a/pioneer/packages/old-apps/react-components/src/AddressRow.tsx
+++ /dev/null
@@ -1,292 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @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.
-
-import { DeriveAccountInfo, DerivedStaking } from '@polkadot/api-derive/types';
-import { ApiProps } from '@polkadot/react-api/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
-
-import BN from 'bn.js';
-import React from 'react';
-import styled from 'styled-components';
-import { withCalls, withMulti } from '@polkadot/react-api';
-import BaseIdentityIcon from '@polkadot/react-identicon';
-import keyring from '@polkadot/ui-keyring';
-
-import AddressInfo, { BalanceActiveType, ValidatorPrefsType } from './AddressInfo';
-import { classes, getAddressName, getAddressTags, toShortAddress } from './util';
-import CopyButton from './CopyButton';
-import IdentityIcon, { getIdentityTheme } from './IdentityIcon';
-import Row, { RowProps, RowState as State, styles } from './Row';
-import translate from './translate';
-
-export interface Props extends I18nProps, RowProps {
-  bonded?: BN | BN[];
-  extraInfo?: [React.ReactNode, React.ReactNode][];
-  isContract?: boolean;
-  isDisabled?: boolean;
-  isValid?: boolean;
-  label?: string;
-  accounts_info?: DeriveAccountInfo;
-  noDefaultNameOpacity?: boolean;
-  stakingInfo?: DerivedStaking;
-  value: AccountId | AccountIndex | Address | string | null;
-  withAddressOrName?: boolean;
-  withBalance?: boolean | BalanceActiveType;
-  withIndex?: boolean;
-  withIndexOrAddress?: boolean;
-  withValidatorPrefs?: boolean | ValidatorPrefsType;
-}
-
-const DEFAULT_ADDR = '5'.padEnd(16, 'x');
-const ICON_SIZE = 48;
-
-class AddressRow extends Row<ApiProps & Props, State> {
-  public state: State;
-
-  constructor (props: ApiProps & Props) {
-    super(props);
-
-    this.state = this.createState();
-  }
-
-  public static getDerivedStateFromProps ({ accounts_info = {}, defaultName, isEditable, noDefaultNameOpacity, type, value }: Props, prevState: State): State | null {
-    const accountId = accounts_info.accountId || value;
-    const address = accountId
-      ? accountId.toString()
-      : DEFAULT_ADDR;
-    const [, isDefault, nameInner] = accounts_info.nickname
-      ? [true, false, accounts_info.nickname.toUpperCase()]
-      : getAddressName(address, type, defaultName || '<unknown>');
-    const name = isDefault && !noDefaultNameOpacity && !isEditable
-      ? <div className='ui--Row-placeholder'>{nameInner}</div>
-      : nameInner;
-    const tags = getAddressTags(address, type);
-    const state: Partial<State> = { tags };
-    let hasChanged = false;
-
-    if (address !== prevState.address) {
-      state.address = address;
-      hasChanged = true;
-    }
-
-    if (!prevState.isEditingName && name !== prevState.name) {
-      state.name = name as string;
-      hasChanged = true;
-    }
-
-    return hasChanged
-      ? state as State
-      : null;
-  }
-
-  public render (): React.ReactNode {
-    const { accounts_info = {}, className, isContract, isDisabled, isInline, label, style } = this.props;
-    const { accountId, accountIndex } = accounts_info;
-    const isValid = this.props.isValid || accountId || accountIndex;
-
-    return (
-      <div
-        className={classes('ui--Row', isDisabled && 'disabled', !isValid && 'invalid', isInline && 'inline', className)}
-        style={style}
-      >
-        <div className='ui--Row-base'>
-          {this.renderIcon()}
-          <div className='ui--Row-details'>
-            {label && <label className='account-label'>{label}</label>}
-            {this.renderAddressAndName()}
-            {this.renderAccountIndex()}
-            {!isContract && this.renderBalances()}
-            {this.renderTags()}
-          </div>
-          {this.renderButtons()}
-        </div>
-        {this.renderChildren()}
-      </div>
-    );
-  }
-
-  private createState (): State {
-    const { accounts_info = {}, defaultName, type, value } = this.props;
-    const accountId = accounts_info.accountId || value;
-    const address = accountId
-      ? accountId.toString()
-      : DEFAULT_ADDR;
-    const [, , name] = getAddressName(address, type, defaultName || '<unknown>');
-    const tags = getAddressTags(address, type);
-
-    return {
-      ...this.state,
-      address,
-      name,
-      tags
-    };
-  }
-
-  protected renderAddressAndName (): React.ReactNode {
-    const { withAddressOrName = false } = this.props;
-
-    if (withAddressOrName) {
-      return this.renderName(true);
-    } else {
-      return (
-        <>
-          {this.renderName()}
-          {this.renderAddress()}
-        </>
-      );
-    }
-  }
-
-  private renderAddress (): React.ReactNode {
-    const { accounts_info = {}, withIndexOrAddress = true } = this.props;
-    const { address } = this.state;
-    const { accountIndex } = accounts_info;
-
-    if (accountIndex && withIndexOrAddress) {
-      return null;
-    }
-
-    return (
-      <div className='ui--Row-accountId'>
-        <CopyButton
-          isAddress
-          value={address}
-        >
-          <span>{toShortAddress(address)}</span>
-        </CopyButton>
-      </div>
-    );
-  }
-
-  private renderAccountIndex (): React.ReactNode {
-    const { accounts_info = {}, withIndex = true, withIndexOrAddress = true } = this.props;
-    const { accountIndex } = accounts_info;
-
-    if (!accountIndex || !(withIndex || withIndexOrAddress)) {
-      return null;
-    }
-
-    return (
-      <div className='ui--Row-accountIndex'>
-        {accountIndex.toString()}
-      </div>
-    );
-  }
-
-  private renderBalances (): React.ReactNode {
-    const { accounts_info = {}, extraInfo, stakingInfo, withBalance, withValidatorPrefs } = this.props;
-    const { accountId } = accounts_info;
-
-    if (!(withBalance || withValidatorPrefs) || !accountId) {
-      return null;
-    }
-
-    return (
-      <div className='ui--Row-balances'>
-        <AddressInfo
-          address={accountId}
-          extraInfo={extraInfo}
-          stakingInfo={stakingInfo}
-          withBalance={withBalance}
-          withValidatorPrefs={withValidatorPrefs}
-        />
-      </div>
-    );
-  }
-
-  private renderIcon (): React.ReactNode {
-    const { accounts_info = {}, iconInfo, systemName, withIcon = true } = this.props;
-    const { address } = this.state;
-    const { accountId } = accounts_info;
-
-    if (!withIcon) {
-      return null;
-    }
-
-    // Since we do queries to storage in the wrapped example, we don't want
-    // to follow that route if we don't have a valid address.
-    const Component = accountId
-      ? IdentityIcon
-      : BaseIdentityIcon;
-    const theme = getIdentityTheme(systemName);
-
-    return (
-      <div className='ui--Row-icon'>
-        <Component
-          size={ICON_SIZE}
-          theme={theme}
-          value={address}
-        />
-        {iconInfo && (
-          <div className='ui--Row-icon-info'>
-            {iconInfo}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  protected saveName = (): void => {
-    const { address, name } = this.state;
-    const trimmedName = name.trim();
-    const meta = {
-      name: trimmedName,
-      whenEdited: Date.now()
-    };
-
-    // Save only if the name was changed or if it's no empty.
-    if (trimmedName && address) {
-      try {
-        const currentKeyring = keyring.getPair(address);
-
-        currentKeyring && keyring.saveAccountMeta(currentKeyring, meta);
-      } catch (error) {
-        keyring.saveAddress(address, meta);
-      }
-    }
-
-    this.setState({ isEditingName: false });
-  }
-
-  protected saveTags = (): void => {
-    const { address, tags } = this.state;
-    const meta = {
-      tags,
-      whenEdited: Date.now()
-    };
-
-    if (address) {
-      try {
-        const currentKeyring = keyring.getPair(address);
-
-        currentKeyring && keyring.saveAccountMeta(currentKeyring, meta);
-      } catch (error) {
-        keyring.saveAddress(address, meta);
-      }
-
-      this.setState({ isEditingTags: false });
-    }
-  }
-}
-
-export {
-  DEFAULT_ADDR,
-  AddressRow
-};
-
-export default withMulti(
-  styled(AddressRow as React.ComponentClass<Props & ApiProps, State>)`
-    ${styles}
-
-    .ui--Row-placeholder {
-      opacity: 0.5;
-    }
-  `,
-  translate,
-  withCalls<Props>(
-    ['derive.accounts.info', { paramName: 'value' }]
-  )
-);
diff --git a/pioneer/packages/old-apps/react-components/src/Available.tsx b/pioneer/packages/old-apps/react-components/src/Available.tsx
deleted file mode 100644
index 9d90746ed5..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Available.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
-import { BareProps } from './types';
-
-import React from 'react';
-import { Available } from '@polkadot/react-query';
-
-import { classes } from './util';
-
-export interface Props extends BareProps {
-  label?: React.ReactNode;
-  params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
-}
-
-export default function AvailableDisplay ({ params, className, label, style }: Props): React.ReactElement<Props> | null {
-  if (!params) {
-    return null;
-  }
-
-  return (
-    <Available
-      className={classes('ui--Available', className)}
-      label={label}
-      params={params}
-      style={style}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Badge.tsx b/pioneer/packages/old-apps/react-components/src/Badge.tsx
deleted file mode 100644
index f86b26f4d5..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Badge.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import React, { useState } from 'react';
-import styled from 'styled-components';
-
-import Tooltip from './Tooltip';
-
-interface Props {
-  className?: string;
-  hover: React.ReactNode;
-  info: React.ReactNode;
-  isTooltip?: boolean;
-  type: 'online' | 'offline' | 'next';
-}
-
-let badgeId = 0;
-
-function Badge ({ className, hover, info, isTooltip, type }: Props): React.ReactElement<Props> | null {
-  const [key] = useState(`${Date.now()}-${badgeId++}`);
-  const [isOpen, setIsOpen] = useState(false);
-
-  const _toggleOpen = (): void => setIsOpen(!isOpen);
-
-  return (
-    <div
-      className={`ui--Badge ${isOpen && 'expand'} ${isTooltip && 'tooltip'} ${type} ${className}`}
-      onClick={
-        isTooltip
-          ? _toggleOpen
-          : undefined
-      }
-      data-for={`badge-status-${key}`}
-      data-tip={true}
-      data-tip-disable={!isTooltip}
-    >
-      <div className='badge'>
-        {info}
-      </div>
-      <div className='detail'>
-        {hover}
-      </div>
-      <Tooltip
-        trigger={`badge-status-${key}`}
-        text={hover}
-      />
-    </div>
-  );
-}
-
-export default styled(Badge)`
-  border-radius: 16px;
-  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
-  color: #eee;
-  cursor: help;
-  display: flex;
-  font-size: 12px;
-  height: 22px;
-  justify-content: center;
-  margin-bottom: 0.25rem;
-  padding: 0 4px;
-  text-align: center;
-  width: 22px;
-
-  &.next {
-    background: steelblue;
-  }
-
-  &.offline {
-    background: red;
-  }
-
-  &.online {
-    background: green;
-  }
-
-  & > * {
-    line-height: 22px;
-    overflow: hidden;
-    transition: all ease 0.25;
-  }
-
-  .badge {
-    font-weight: bold;
-    width: auto;
-  }
-
-  .detail {
-    width: 0;
-  }
-
-  &.expand {
-    width: 300px;
-
-    .badge {
-      width: 0;
-    }
-
-    .detail {
-      width: auto;
-    }
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/Balance.tsx b/pioneer/packages/old-apps/react-components/src/Balance.tsx
deleted file mode 100644
index 58aafa66da..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Balance.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
-import { BareProps } from './types';
-
-import BN from 'bn.js';
-import React from 'react';
-import { formatBalance } from '@polkadot/util';
-import { Balance } from '@polkadot/react-query';
-
-import { classes } from './util';
-
-export interface Props extends BareProps {
-  balance?: BN | BN[];
-  label?: React.ReactNode;
-  params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
-  withLabel?: boolean;
-}
-
-function renderProvided ({ balance, className, label, style }: Props): React.ReactNode {
-  let value = `${formatBalance(Array.isArray(balance) ? balance[0] : balance)}`;
-
-  if (Array.isArray(balance)) {
-    const totals = balance.filter((_, index): boolean => index !== 0);
-    const total = totals.reduce((total, value): BN => total.add(value), new BN(0)).gtn(0)
-      ? `(+${totals.map((balance): string => formatBalance(balance)).join(', ')})`
-      : '';
-
-    value = `${value}  ${total}`;
-  }
-
-  return (
-    <div
-      className={classes('ui--Balance', className)}
-      style={style}
-    >
-      {label}{value}
-    </div>
-  );
-}
-
-export default function BalanceDisplay (props: Props): React.ReactElement<Props> | null {
-  const { balance, className, label, params, style } = props;
-
-  if (!params) {
-    return null;
-  }
-
-  return balance
-    ? (
-      <>
-        {renderProvided(props)}
-      </>
-    )
-    : (
-      <Balance
-        className={classes('ui--Balance', className)}
-        label={label}
-        params={params}
-        style={style}
-      />
-    );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Bonded.tsx b/pioneer/packages/old-apps/react-components/src/Bonded.tsx
deleted file mode 100644
index 0449a87cbb..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Bonded.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
-import { BareProps } from './types';
-
-import BN from 'bn.js';
-import React from 'react';
-import { formatBalance } from '@polkadot/util';
-import { Bonded } from '@polkadot/react-query';
-
-import { classes } from './util';
-
-export interface Props extends BareProps {
-  bonded?: BN | BN[];
-  label?: React.ReactNode;
-  params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
-  withLabel?: boolean;
-}
-
-function renderProvided ({ bonded, className, label, style }: Props): React.ReactNode {
-  let value = `${formatBalance(Array.isArray(bonded) ? bonded[0] : bonded)}`;
-
-  if (Array.isArray(bonded)) {
-    const totals = bonded.filter((_, index): boolean => index !== 0);
-    const total = totals.reduce((total, value): BN => total.add(value), new BN(0)).gtn(0)
-      ? `(+${totals.map((bonded): string => formatBalance(bonded)).join(', ')})`
-      : '';
-
-    value = `${value}  ${total}`;
-  }
-
-  return (
-    <div
-      className={classes('ui--Bonded', className)}
-      style={style}
-    >
-      {label}{value}
-    </div>
-  );
-}
-
-export default function BondedDisplay (props: Props): React.ReactElement<Props> | null {
-  const { bonded, params, className, label, style } = props;
-
-  if (!params) {
-    return null;
-  }
-
-  return bonded
-    ? (
-      <>
-        {renderProvided(props)}
-      </>
-    )
-    : (
-      <Bonded
-        className={classes('ui--Bonded', className)}
-        label={label}
-        params={params}
-        style={style}
-      />
-    );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Bubble.tsx b/pioneer/packages/old-apps/react-components/src/Bubble.tsx
deleted file mode 100644
index 6616d622f2..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Bubble.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-import { SemanticCOLORS, SemanticICONS } from 'semantic-ui-react/dist/commonjs/generic';
-
-import React from 'react';
-import SUILabel from 'semantic-ui-react/dist/commonjs/elements/Label/Label';
-import styled from 'styled-components';
-
-import { classes } from './util';
-import Icon from './Icon';
-
-interface Props extends BareProps {
-  children: React.ReactNode;
-  color?: SemanticCOLORS;
-  icon?: SemanticICONS;
-  label?: React.ReactNode;
-}
-
-function Bubble ({ color, children, className, icon, label }: Props): React.ReactElement<Props> {
-  return (
-    <SUILabel
-      className={classes('theme--default', 'ui--Bubble', className)}
-      color={color}
-    >
-      <div className='ui--Bubble-header'>
-        {icon && <Icon name={icon} size='large' />}
-        {label && <div className='text'>{label}</div>}
-      </div>
-      <div className='ui--Bubble-children'>
-        {children}
-      </div>
-    </SUILabel>
-  );
-}
-
-export default styled(Bubble)`
-  font-weight: normal;
-  margin: 0.25rem;
-  padding: 0;
-
-  * {
-    vertical-align: middle;
-  }
-
-  .ui--Bubble-children,
-  .ui--Bubble-header {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  .ui--Bubble-children {
-    padding: 0 0.75rem 0 0;
-  }
-
-  .ui--Bubble-header {
-    background: rgba(0, 0, 0, 0.05);
-    box-sizing: border-box;
-    border-radius: .28571429rem 0 0 .28571429rem;
-    height: 2.75rem;
-    margin-right: 0.75rem;
-    padding: 0 0.75rem;
-    text-align: center;
-    vertical-align: middle;
-
-    > div {
-      display: inline-block;
-      line-height: 2.75rem !important;
-      vertical-align: middle;
-    }
-
-    > .text {
-      padding: 0 0 0 0.25rem;
-    }
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/Button/Button.css b/pioneer/packages/old-apps/react-components/src/Button/Button.css
deleted file mode 100644
index f3be7feb2e..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Button/Button.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/* Copyright 2017-2019 @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. */
-
-/* not sure where, why... */
-br+.ui--Button-Group {
-  margin-top: 0;
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Button/Button.tsx b/pioneer/packages/old-apps/react-components/src/Button/Button.tsx
deleted file mode 100644
index 499b259d89..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Button/Button.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { ButtonProps } from './types';
-
-import React, { useState } from 'react';
-import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button';
-import { isUndefined } from '@polkadot/util';
-
-import Icon from '../Icon';
-import Tooltip from '../Tooltip';
-
-let idCounter = 0;
-
-export default function Button ({ children, className, floated, icon, isBasic = false, isCircular = false, isDisabled = false, isFluid = false, isLoading = false, isNegative = false, isPositive = false, isPrimary = false, label, labelPosition, onClick, size, style, tabIndex, tooltip }: ButtonProps): React.ReactElement<ButtonProps> {
-  const [triggerId] = useState(`button-${++idCounter}`);
-  const props = {
-    basic: isBasic,
-    circular: isCircular,
-    className,
-    'data-tip': !!tooltip,
-    'data-for': triggerId,
-    disabled: isDisabled,
-    floated,
-    fluid: isFluid,
-    labelPosition,
-    loading: isLoading,
-    negative: isNegative,
-    onClick,
-    positive: isPositive,
-    primary: isPrimary,
-    size,
-    secondary: !isBasic && !(isPositive || isPrimary || isNegative),
-    style,
-    tabIndex
-  };
-
-  return (
-    <>
-      {isUndefined(label) && isUndefined(children)
-        ? <SUIButton {...props} icon={icon} />
-        : (
-          <SUIButton {...props}>
-            {icon && (
-              <><Icon className={icon} />{'  '}</>
-            )}
-            {label}
-            {children}
-          </SUIButton>
-        )
-      }
-      {tooltip && (
-        <Tooltip
-          place='top'
-          text={tooltip}
-          trigger={triggerId}
-        />
-      )}
-    </>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Button/Divider.tsx b/pioneer/packages/old-apps/react-components/src/Button/Divider.tsx
deleted file mode 100644
index 0830ad3b48..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Button/Divider.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { DividerProps } from './types';
-
-import React from 'react';
-
-import { classes } from '../util';
-
-export default function ButtonDivider ({ className, style }: DividerProps): React.ReactElement<DividerProps> {
-  return (
-    <div
-      className={classes('ui button compact mini basic', className)}
-      style={style}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Button/Group.tsx b/pioneer/packages/old-apps/react-components/src/Button/Group.tsx
deleted file mode 100644
index 688725b9bb..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Button/Group.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { GroupProps, GroupType } from './types';
-
-import React from 'react';
-import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button';
-import styled from 'styled-components';
-
-import { classes } from '../util';
-import Divider from './Divider';
-
-function ButtonGroup ({ children, className, isBasic = false, isCentered = false, style }: GroupProps): React.ReactElement<GroupProps> {
-  return (
-    <div
-      className={classes('ui--Button-Group', isCentered ? 'centered' : '', className)}
-      style={style}
-    >
-      <SUIButton.Group basic={isBasic}>
-        {
-          isBasic
-            ? null
-            : <Divider style={{ padding: '0em' }} />
-        }
-        {children}
-      </SUIButton.Group>
-    </div>
-  );
-}
-
-(ButtonGroup as GroupType).Divider = Divider;
-
-export default styled(ButtonGroup)`
-  text-align: right;
-
-  :not(:first-child) {
-    margin-top: 0.75rem;
-  }
-
-  &.centered {
-    margin-bottom: 0.5rem;
-    text-align: center;
-  }
-` as unknown as GroupType;
diff --git a/pioneer/packages/old-apps/react-components/src/Button/Or.tsx b/pioneer/packages/old-apps/react-components/src/Button/Or.tsx
deleted file mode 100644
index 870422e739..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Button/Or.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { I18nProps } from '../types';
-
-import React from 'react';
-import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button';
-import { isUndefined } from '@polkadot/util';
-
-import translate from '../translate';
-
-interface Props extends I18nProps {
-  text?: string;
-}
-
-function ButtonOr ({ className, style, t, text }: Props): React.ReactElement<Props> {
-  return (
-    <SUIButton.Or
-      className={className}
-      style={style}
-      label={
-        isUndefined(text)
-          ? t('or')
-          : text
-      }
-    />
-  );
-}
-
-export default translate(ButtonOr);
diff --git a/pioneer/packages/old-apps/react-components/src/Button/index.tsx b/pioneer/packages/old-apps/react-components/src/Button/index.tsx
deleted file mode 100644
index 11586ee944..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Button/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { ButtonType } from './types';
-
-import './Button.css';
-
-import IButton from './Button';
-import Divider from './Divider';
-import Group from './Group';
-import Or from './Or';
-
-const Button = IButton as unknown as ButtonType;
-
-Button.Divider = Divider;
-Button.Group = Group;
-Button.Or = Or;
-
-export default Button;
diff --git a/pioneer/packages/old-apps/react-components/src/Button/types.ts b/pioneer/packages/old-apps/react-components/src/Button/types.ts
deleted file mode 100644
index c4f626c50c..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Button/types.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from '../types';
-
-export type Button$Sizes = 'mini' | 'tiny' | 'small' | 'medium' | 'large' | 'big' | 'huge' | 'massive';
-
-export interface ButtonProps extends BareProps {
-  children?: React.ReactNode;
-  floated?: 'left' | 'right';
-  icon: string;
-  isBasic?: boolean;
-  isCircular?: boolean;
-  isDisabled?: boolean;
-  isFluid?: boolean;
-  isLoading?: boolean;
-  isNegative?: boolean;
-  isPositive?: boolean;
-  isPrimary?: boolean;
-  label?: React.ReactNode;
-  labelPosition?: 'left' | 'right';
-  onClick?: () => void | Promise<void>;
-  ref?: any;
-  size?: Button$Sizes;
-  tabIndex?: number;
-  tooltip?: React.ReactNode;
-}
-
-export type DividerProps = BareProps;
-
-export interface GroupProps extends BareProps {
-  children?: React.ReactNode;
-  isBasic?: boolean;
-  isCentered?: boolean;
-}
-
-export type GroupType = React.ComponentType<GroupProps> & {
-  Divider: React.ComponentType<DividerProps>;
-};
-
-export type ButtonType = React.ComponentType<ButtonProps> & {
-  Divider: React.ComponentType<DividerProps>;
-  Group: GroupType;
-  Or: React.ComponentType<BareProps>;
-};
diff --git a/pioneer/packages/old-apps/react-components/src/Call.tsx b/pioneer/packages/old-apps/react-components/src/Call.tsx
deleted file mode 100644
index e988caee82..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Call.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Codec, IExtrinsic, IMethod, TypeDef } from '@polkadot/types/types';
-import { BareProps, I18nProps } from './types';
-
-import BN from 'bn.js';
-import React from 'react';
-import styled from 'styled-components';
-import { GenericCall, getTypeDef } from '@polkadot/types';
-import Params from '@polkadot/react-params';
-import { formatBalance } from '@polkadot/util';
-
-import Static from './Static';
-import { classes } from './util';
-import translate from './translate';
-
-export interface Props extends I18nProps, BareProps {
-  children?: React.ReactNode;
-  value: IExtrinsic | IMethod;
-  withHash?: boolean;
-  mortality?: string;
-  tip?: BN;
-}
-
-function Call ({ children, className, style, mortality, tip, value, withHash, t }: Props): React.ReactElement<Props> {
-  const params = GenericCall.filterOrigin(value.meta).map(({ name, type }): { name: string; type: TypeDef } => ({
-    name: name.toString(),
-    type: getTypeDef(type.toString())
-  }));
-  const values = value.args.map((value): { isValid: boolean; value: Codec } => ({
-    isValid: true,
-    value
-  }));
-  const hash = withHash
-    ? (value as IExtrinsic).hash
-    : null;
-
-  return (
-    <div
-      className={classes('ui--Extrinsic', className)}
-      style={style}
-    >
-      {children}
-      {hash && (
-        <Static
-          className='hash'
-          label={t('extrinsic hash')}
-        >
-          {hash.toHex()}
-        </Static>
-      )}
-      {mortality && (
-        <Static
-          className='mortality'
-          label={t('lifetime')}
-        >
-          {mortality}
-        </Static>
-      )}
-      {tip && tip.gtn(0) && (
-        <Static
-          className='tip'
-          label={t('tip')}
-        >
-          {formatBalance(tip)}
-        </Static>
-      )}
-      <Params
-        isDisabled
-        params={params}
-        values={values}
-      />
-    </div>
-  );
-}
-
-export default translate(
-  styled(Call)`
-    .hash .ui--Static {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      word-break: unset;
-      word-wrap: unset;
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/react-components/src/Card.tsx b/pioneer/packages/old-apps/react-components/src/Card.tsx
deleted file mode 100644
index 6251baaecc..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Card.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import React from 'react';
-import styled from 'styled-components';
-
-import { classes } from './util';
-
-interface Props {
-  children: React.ReactNode;
-  className?: string;
-  isError?: boolean;
-  isSuccess?: boolean;
-  withBottomMargin?: boolean;
-}
-
-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')}>
-      {children}
-    </article>
-  );
-}
-
-export default styled(Card)`
-  position: relative;
-  flex: 1 1;
-  min-width: 24%;
-  justify-content: space-around;
-
-  &.error {
-    background: rgba(255, 0, 0, 0.05);
-
-    &, h1, h2, h3, h4, h5, h6, p {
-      color: rgba(156, 0, 0) !important;
-    }
-  }
-
-  &.success {
-    border: 1px solid rgb(168, 255, 136);
-    background: rgba(0, 255, 0, 0.05);
-
-    &, h1, h2, h3, h4, h5, h6, p {
-      color: rgba(34, 125, 0) !important;
-    }
-  }
-
-  &.withBottomMargin {
-    margin-bottom: 1.5rem;
-  }
-
-  i.help.circle.icon,
-  .ui.button.mini,
-  .ui.button.tiny,
-  .addTags {
-    visibility: hidden;
-  }
-
-  &:hover {
-    i.help.circle.icon,
-    .ui.button.mini,
-    .ui.button.tiny,
-    .addTags {
-      visibility: visible;
-    }
-  }
-
-  .ui--AddressSummary-buttons {
-    text-align: right;
-    margin-bottom: 2em;
-
-    button {
-      margin-left: 0.2em;
-    }
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/CardGrid.tsx b/pioneer/packages/old-apps/react-components/src/CardGrid.tsx
deleted file mode 100644
index dbccdb7ec2..0000000000
--- a/pioneer/packages/old-apps/react-components/src/CardGrid.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import React from 'react';
-import styled from 'styled-components';
-
-import Collection, { CollectionProps as Props, CollectionState as State, collectionStyles } from './Collection';
-
-import translate from './translate';
-
-class CardGrid extends Collection<Props, State> {
-  public static getDerivedStateFromProps (props: Props): State {
-    const state = super.getDerivedStateFromProps(props);
-
-    return {
-      ...state,
-      showFullHeader: !state.isEmpty
-    };
-  }
-
-  protected renderEmpty (): React.ReactNode {
-    const { buttons, emptyText, headerText, t } = this.props;
-
-    if (headerText) {
-      return super.renderEmpty();
-    }
-
-    return (
-      <div className='ui--CardGrid-empty'>
-        <h2>{emptyText || t('No items')}</h2>
-        {buttons && (
-          <div className='ui--CardGrid-buttons'>
-            {buttons}
-          </div>
-        )}
-        <div className='ui--CardGrid-spacer' />
-      </div>
-    );
-  }
-
-  public renderCollection (): React.ReactNode {
-    const { children } = this.props;
-
-    return (
-      <div className='ui--CardGrid-grid'>
-        {children}
-        <div className='ui--CardGrid-spacer' />
-        <div className='ui--CardGrid-spacer' />
-        <div className='ui--CardGrid-spacer' />
-      </div>
-    );
-  }
-}
-
-export default translate(
-  styled(CardGrid as React.ComponentClass<Props, State>)`
-    ${collectionStyles}
-
-    .ui--CardGrid-grid {
-      display: flex;
-      flex-wrap: wrap;
-
-      > .ui--CardGrid-spacer {
-        flex: 1 1;
-        margin: 0.25rem;
-        padding: 0 1.5rem;
-      }
-    }
-
-    .ui--CardGrid-lowercase {
-      text-transform: lowercase;
-    }
-
-    .ui--Card,
-    .ui--CardGrid-spacer {
-      flex: 1 1;
-      min-width: 40rem;
-      max-width: 71rem;
-    }
-
-    .ui--CardGrid-empty {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      margin: 6rem 0;
-
-      > h2 {
-        margin-bottom: 2rem;
-      }
-    }
-  `);
diff --git a/pioneer/packages/old-apps/react-components/src/CardSummary.tsx b/pioneer/packages/old-apps/react-components/src/CardSummary.tsx
deleted file mode 100644
index 47d3404f36..0000000000
--- a/pioneer/packages/old-apps/react-components/src/CardSummary.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import BN from 'bn.js';
-import React from 'react';
-import styled from 'styled-components';
-import { UInt } from '@polkadot/types';
-import { formatNumber, isUndefined } from '@polkadot/util';
-
-import Progress, { Colors as ProgressColors } from './Progress';
-import Labelled from './Labelled';
-
-interface ProgressProps {
-  color?: ProgressColors;
-  hideValue?: boolean;
-  isPercent?: boolean;
-  total?: BN | UInt;
-  value?: BN | UInt;
-}
-
-interface Props extends BareProps {
-  children?: React.ReactNode;
-  help?: React.ReactNode;
-  label: React.ReactNode;
-  progress?: ProgressProps;
-}
-
-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)
-    ? (
-      value.gt(total)
-        ? `>${
-          progress.isPercent
-            ? '100'
-            : formatNumber(total)
-        }`
-        : (
-          progress.isPercent
-            ? value.muln(100).div(total).toString()
-            : formatNumber(value)
-        )
-    )
-    : undefined;
-
-  if (progress && isUndefined(left)) {
-    return null;
-  }
-
-  return (
-    <article className={className}>
-      <Labelled
-        help={help}
-        isSmall
-        label={label}
-      >
-        {children}{
-          progress && !progress.hideValue && (
-            !left || isUndefined(progress.total)
-              ? '-'
-              : `${left}${progress.isPercent ? '' : '/'}${
-                progress.isPercent
-                  ? '%'
-                  : formatNumber(progress.total)
-              }`
-          )
-        }
-        {progress && <Progress {...progress} />}
-      </Labelled>
-    </article>
-  );
-}
-
-export default styled(CardSummary)`
-  align-items: center;
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  color: rgba(0, 0, 0, 0.6);
-  display: flex;
-  flex: 0 1 auto;
-  flex-flow: row wrap;
-  justify-content: flex-end;
-  padding: 0rem 1.5rem 0.5rem 1.5rem;
-
-  > div {
-    font-size: 2.1rem;
-    font-weight: 100;
-    position: relative;
-    line-height: 2.1rem;
-    text-align: right;
-
-    > * {
-      margin: 0.6rem 0;
-
-      &:first-child {
-        margin-top: 0;
-      }
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    > label {
-      line-height: 1rem;
-      font-size: 0.95rem;
-      min-height: 1rem;
-    }
-
-    .progress {
-      margin: 0.2rem 0 -0.5rem !important;
-      background: rgba(0,0,0,0.05);
-    }
-  }
-
-  @media(max-width: 767px) {
-    min-height: 4.8rem;
-    padding: 0.25 0.4em;
-
-    > div {
-      font-size: 1.4rem;
-      line-height: 1.4rem;
-    }
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/ChainImg.tsx b/pioneer/packages/old-apps/react-components/src/ChainImg.tsx
deleted file mode 100644
index d5237cec8c..0000000000
--- a/pioneer/packages/old-apps/react-components/src/ChainImg.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-// Copyright 2017-2019 @polkadot/apps authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import React, { useContext } from 'react';
-import styled from 'styled-components';
-import { ApiContext } from '@polkadot/react-api';
-
-// the imports here as a bit all-over, non-aphabetical - since we expect this to grow,
-// rather organise based on type, grouping chains and nodes as opposed to location
-
-// last-resort fallback, just something empty
-import EMPTY from '@polkadot/ui-assets/empty.svg';
-
-// anything fopr a specific chain, most items will probably go in here
-import chainKusama from '@polkadot/ui-assets/chains/kusama-128.gif';
-
-// defaults for the node type, assuming we don't have a specific chain
-import edgeware from '@polkadot/ui-assets/edgeware-circle.svg';
-import polkadot from '@polkadot/ui-assets/polkadot-circle.svg';
-import polkadotJs from '@polkadot/ui-assets/polkadot-js.svg';
-import substrate from '@polkadot/ui-assets/substrate-hexagon.svg';
-
-// overrides based on the actual matched chain name
-const CHAINS: Record<string, any> = {
-  Kusama: chainKusama, // old name, the W3F nodes still has these
-  'Kusama CC1': chainKusama,
-  'Kusama CC2': chainKusama
-};
-
-// overrides based on the actual software node type
-const NODES: Record<string, any> = {
-  'edgeware-node': edgeware,
-  'node-template': substrate,
-  'parity-polkadot': polkadot,
-  'polkadot-js': polkadotJs,
-  'substrate-node': substrate
-};
-
-// overrides as specified
-const LOGOS: Record<string, any> = {
-  empty: EMPTY,
-  edgeware,
-  alexander: polkadot,
-  kusama: chainKusama,
-  polkadot,
-  substrate
-};
-
-interface Props {
-  className?: string;
-  logo?: keyof typeof LOGOS;
-  onClick?: () => any;
-}
-
-function ChainImg ({ className, logo = '', onClick }: Props): React.ReactElement<Props> {
-  const { systemChain, systemName } = useContext(ApiContext);
-  const img = LOGOS[logo] || CHAINS[systemChain] || NODES[systemName] || EMPTY;
-
-  return (
-    <img
-      alt='chain logo'
-      className={className}
-      onClick={onClick}
-      src={img}
-    />
-  );
-}
-
-export default styled(ChainImg)`
-  border-radius: 50%;
-  box-sizing: border-box;
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/ChainLock.tsx b/pioneer/packages/old-apps/react-components/src/ChainLock.tsx
deleted file mode 100644
index fbcdc5ed4b..0000000000
--- a/pioneer/packages/old-apps/react-components/src/ChainLock.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React, { useContext } from 'react';
-import { ApiContext } from '@polkadot/react-api';
-
-import translate from './translate';
-import Toggle from './Toggle';
-
-interface Props extends I18nProps {
-  className?: string;
-  genesisHash: string | null;
-  onChange: (genesisHash: string | null) => void;
-}
-
-function ChainLock ({ genesisHash, onChange, t }: Props): React.ReactElement<Props> | null {
-  const { isDevelopment, api } = useContext(ApiContext);
-
-  if (isDevelopment) {
-    return null;
-  }
-
-  const isTiedToChain = api.genesisHash.eq(genesisHash);
-  const _onChange = (isTiedToChain: boolean): void =>
-    onChange(
-      isTiedToChain
-        ? api.genesisHash.toHex()
-        : null
-    );
-
-  return (
-    <Toggle
-      defaultValue={isTiedToChain}
-      label={
-        isTiedToChain
-          ? t('only this network')
-          : t('use on any network')
-      }
-      onChange={_onChange}
-    />
-  );
-}
-
-export default translate(ChainLock);
diff --git a/pioneer/packages/old-apps/react-components/src/Chart/Base.tsx b/pioneer/packages/old-apps/react-components/src/Chart/Base.tsx
deleted file mode 100644
index 1531eccbcf..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Chart/Base.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from '../types';
-
-import React from 'react';
-import styled from 'styled-components';
-
-import { classes } from '../util';
-
-interface Props extends BareProps {
-  children: React.ReactNode;
-}
-
-const Wrapper = styled.div`
-  position: relative;
-  display: inline-block;
-  padding: 1em 1em 0;
-  height: 15vw;
-  width: 15vw;
-`;
-
-export default function BaseChart ({ children, className, style }: Props): React.ReactElement<Props> {
-  return (
-    <Wrapper
-      className={classes('ui--Chart', className)}
-      style={style}
-    >
-      {children}
-    </Wrapper>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Chart/Doughnut.tsx b/pioneer/packages/old-apps/react-components/src/Chart/Doughnut.tsx
deleted file mode 100644
index f268fee6f0..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Chart/Doughnut.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from '../types';
-
-import BN from 'bn.js';
-import React from 'react';
-import { Doughnut } from 'react-chartjs-2';
-import { bnToBn } from '@polkadot/util';
-
-import Base from './Base';
-
-interface Value {
-  colors: string[];
-  label: string;
-  value: number | BN;
-}
-
-interface Props extends BareProps {
-  size?: number;
-  values: Value[];
-}
-
-interface Options {
-  colorNormal: string[];
-  colorHover: string[];
-  data: number[];
-  labels: string[];
-}
-
-export default function ChartDoughnut ({ className, size = 100, style, values }: Props): React.ReactElement<Props> {
-  const options: Options = {
-    colorNormal: [],
-    colorHover: [],
-    data: [],
-    labels: []
-  };
-
-  // FIXME Classic case of kicking the can down the road, i.e. don't expend energy
-  // when stuff are not used. This was replaced by the HorizBar as the only Chart
-  // in actual use (by Referendum). However the below is not optimal, and gets re-
-  // calculated on each render. If this component is put back in use, look at
-  // getDerivedStateFromProps in HorizBar (the logic is the same for chartData)
-  values.forEach(({ colors: [normalColor = '#00f', hoverColor], label, value }): void => {
-    options.colorNormal.push(normalColor);
-    options.colorHover.push(hoverColor || normalColor);
-    options.data.push(bnToBn(value).toNumber());
-    options.labels.push(label);
-  });
-
-  return (
-    <Base
-      className={className}
-      style={style}
-    >
-      <Doughnut
-        data={{
-          labels: options.labels,
-          datasets: [{
-            data: options.data,
-            backgroundColor: options.colorNormal,
-            hoverBackgroundColor: options.colorHover
-          }]
-        }}
-        height={size}
-        width={size}
-      />
-    </Base>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Chart/HorizBar.tsx b/pioneer/packages/old-apps/react-components/src/Chart/HorizBar.tsx
deleted file mode 100644
index 813c8dc2cb..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Chart/HorizBar.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from '../types';
-
-import BN from 'bn.js';
-import React, { useEffect, useState } from 'react';
-import ChartJs from 'chart.js';
-import { HorizontalBar } from 'react-chartjs-2';
-import { bnToBn } from '@polkadot/util';
-
-interface Value {
-  colors: string[];
-  label: string;
-  value: number | BN;
-}
-
-interface Props extends BareProps {
-  aspectRatio?: number;
-  values: Value[];
-}
-
-interface State {
-  chartData?: ChartJs.ChartData;
-  chartOptions?: ChartJs.ChartOptions;
-  jsonValues?: string;
-}
-
-interface Config {
-  labels: string[];
-  datasets: {
-    data: number[];
-    backgroundColor: string[];
-    hoverBackgroundColor: string[];
-  }[];
-}
-
-const alphaColor = (hexColor: string): string =>
-  ChartJs.helpers.color(hexColor).alpha(0.65).rgbString();
-
-function calculateOptions (aspectRatio: number, values: Value[], jsonValues: string): State {
-  const chartData = values.reduce((data, { colors: [normalColor = '#00f', hoverColor], label, value }): Config => {
-    const dataset = data.datasets[0];
-
-    dataset.backgroundColor.push(alphaColor(normalColor));
-    dataset.hoverBackgroundColor.push(alphaColor(hoverColor || normalColor));
-    dataset.data.push(bnToBn(value).toNumber());
-    data.labels.push(label);
-
-    return data;
-  }, {
-    labels: [] as string[],
-    datasets: [{
-      data: [] as number[],
-      backgroundColor: [] as string[],
-      hoverBackgroundColor: [] as string[]
-    }]
-  });
-
-  return {
-    chartData,
-    chartOptions: {
-      // width/height by default this is "1", i.e. a square box
-      aspectRatio,
-      // no need for the legend, expect the labels contain everything
-      legend: {
-        display: false
-      },
-      scales: {
-        xAxes: [{
-          ticks: {
-            beginAtZero: true,
-            max: 100
-          }
-        }]
-      }
-    },
-    jsonValues
-  };
-}
-
-export default function ChartHorizBar ({ aspectRatio = 4, className, style, values }: Props): React.ReactElement<Props> | null {
-  const [{ chartData, chartOptions, jsonValues }, setState] = useState<State>({});
-
-  useEffect((): void => {
-    const newJsonValues = JSON.stringify(values);
-
-    if (newJsonValues !== jsonValues) {
-      setState(calculateOptions(aspectRatio, values, newJsonValues));
-    }
-  }, [values]);
-
-  if (!chartData) {
-    return null;
-  }
-
-  return (
-    <div
-      className={className}
-      style={style}
-    >
-      <HorizontalBar
-        data={chartData}
-        options={chartOptions}
-      />
-    </div>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Chart/index.ts b/pioneer/packages/old-apps/react-components/src/Chart/index.ts
deleted file mode 100644
index 704e0ff784..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Chart/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import Doughnut from './Doughnut';
-import HorizBar from './HorizBar';
-
-export default {
-  Doughnut,
-  HorizBar
-};
diff --git a/pioneer/packages/old-apps/react-components/src/CodeRow.tsx b/pioneer/packages/old-apps/react-components/src/CodeRow.tsx
deleted file mode 100644
index 62d503b7d5..0000000000
--- a/pioneer/packages/old-apps/react-components/src/CodeRow.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @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.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { CodeStored } from '@polkadot/app-contracts/types';
-
-import React from 'react';
-import styled from 'styled-components';
-import { createType } from '@polkadot/types';
-import { withMulti } from '@polkadot/react-api';
-import { classes, toShortAddress } from '@polkadot/react-components/util';
-import contracts from '@polkadot/app-contracts/store';
-
-import CopyButton from './CopyButton';
-import Icon from './Icon';
-import Messages from './Messages';
-
-import Row, { RowProps, RowState, styles } from './Row';
-import translate from './translate';
-
-interface Props extends I18nProps, RowProps {
-  code: CodeStored;
-  withMessages?: boolean;
-}
-
-interface State extends RowState {
-  codeHash: string;
-}
-
-const DEFAULT_HASH = '0x';
-const DEFAULT_NAME = '<unknown>';
-
-const CodeIcon = styled.div`
-  & {
-    margin-right: 1em;
-    background: #eee;
-    color: #666;
-    width: 4rem;
-    height: 5rem;
-    padding: 0.5rem;
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
-  }
-`;
-
-const DEFAULT_ADDR = '5'.padEnd(16, 'x');
-
-class CodeRow extends Row<Props, State> {
-  public state: State;
-
-  constructor (props: Props) {
-    super(props);
-
-    this.state = this.createState();
-  }
-
-  public static getDerivedStateFromProps ({ code: { json }, accounts_info }: 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 address = accountId
-      ? accountId.toString()
-      : DEFAULT_ADDR;
-
-    const state: Partial<State> = { tags };
-    let hasChanged = false;
-
-    if (codeHash !== prevState.codeHash) {
-      state.codeHash = codeHash;
-      hasChanged = true;
-    }
-
-    if (!prevState.isEditingName && name !== prevState.name) {
-      state.name = name;
-      hasChanged = true;
-    }
-
-    if (address !== prevState.address) {
-      state.address = address;
-      hasChanged = true;
-    }
-
-    return hasChanged
-      ? state as State
-      : null;
-  }
-
-  public render (): React.ReactNode {
-    const { className, isInline, style } = this.props;
-
-    return (
-      <div
-        className={classes('ui--Row', isInline && 'inline', className)}
-        style={style}
-      >
-        <div className='ui--Row-base'>
-          {this.renderIcon()}
-          <div className='ui--Row-details'>
-            {this.renderName()}
-            {this.renderCodeHash()}
-            {this.renderTags()}
-          </div>
-          {this.renderButtons()}
-        </div>
-        {this.renderMessages()}
-        {this.renderChildren()}
-      </div>
-    );
-  }
-
-  private createState (): State {
-    const { code: { json: { codeHash = DEFAULT_HASH, name = DEFAULT_NAME, tags = [] } } } = this.props;
-
-    return {
-      address: DEFAULT_ADDR,
-      codeHash,
-      isEditingName: false,
-      isEditingTags: false,
-      name,
-      tags
-    };
-  }
-
-  protected renderCodeHash (): React.ReactNode {
-    const { codeHash } = this.state;
-
-    return (
-      <>
-        <div className='ui--Row-name'>
-          {name}
-        </div>
-        <div className='ui--Row-accountId'>
-          <CopyButton
-            isAddress
-            value={codeHash}
-          >
-            <span>{toShortAddress(codeHash)}</span>
-          </CopyButton>
-        </div>
-      </>
-    );
-  }
-
-  protected renderButtons (): React.ReactNode {
-    const { buttons } = this.props;
-
-    if (!buttons) {
-      return null;
-    }
-
-    return (
-      <div className='ui--Row-buttons'>
-        {buttons}
-      </div>
-    );
-  }
-
-  protected renderIcon (): React.ReactNode {
-    return (
-      <CodeIcon>
-        <Icon
-          name='code'
-          size='large'
-        />
-      </CodeIcon>
-    );
-  }
-
-  protected renderMessages (): React.ReactNode {
-    const { code: { contractAbi }, withMessages } = this.props;
-
-    if (!withMessages || !contractAbi) {
-      return null;
-    }
-
-    return (
-      <Messages
-        contractAbi={contractAbi}
-        isRemovable
-      />
-    );
-  }
-
-  protected saveName = async (): Promise<void> => {
-    const { codeHash, name } = this.state;
-    const trimmedName = name.trim();
-
-    // Save only if the name was changed or if it's no empty.
-    if (trimmedName && codeHash) {
-      await contracts.saveCode(createType('Hash', codeHash), { name });
-
-      this.setState({ isEditingName: false });
-    }
-  }
-
-  protected saveTags = async (): Promise<void> => {
-    const { codeHash, tags } = this.state;
-
-    if (codeHash) {
-      await contracts.saveCode(createType('Hash', codeHash), { tags });
-
-      this.setState({ isEditingTags: false });
-    }
-  }
-}
-
-export default withMulti(
-  styled(CodeRow as React.ComponentClass<Props>)`
-    ${styles}
-  `,
-  translate
-);
diff --git a/pioneer/packages/old-apps/react-components/src/Collection.tsx b/pioneer/packages/old-apps/react-components/src/Collection.tsx
deleted file mode 100644
index cf1304908e..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Collection.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-
-export interface CollectionProps extends I18nProps {
-  banner?: React.ReactNode;
-  buttons?: React.ReactNode;
-  topButtons?: React.ReactNode;
-  children: React.ReactNode;
-  className?: string;
-  headerText?: React.ReactNode;
-  isEmpty?: boolean;
-  emptyText?: React.ReactNode;
-  showEmptyText?: boolean;
-}
-
-export interface CollectionState {
-  isEmpty: boolean;
-  showFullHeader?: boolean;
-}
-
-export const collectionStyles = `
-  .ui--Collection-header {
-    display: flex;
-    margin-bottom: 0.5rem;
-    min-height: 2.75rem;
-
-    h1 {
-      flex: 1 1;
-      margin: 0;
-      text-transform: lowercase;
-    }
-
-    .ui--Collection-buttons {
-      flex: 1;
-      display: flex;
-      justify-content: space-between;
-    }
-  }
-
-  .ui--Collection-lowercase {
-    text-transform: lowercase;
-  }
-`;
-
-export default class Collection<P extends CollectionProps, S extends CollectionState> extends React.PureComponent<P, S> {
-  constructor (props: P) {
-    super(props);
-
-    this.state = {
-      isEmpty: Collection.isEmpty(props.children)
-    } as S;
-  }
-
-  private static isEmpty (children?: React.ReactNode): boolean {
-    return !children || (Array.isArray(children) && children.length === 0);
-  }
-
-  public static getDerivedStateFromProps ({ isEmpty, children }: CollectionProps): CollectionState {
-    return {
-      isEmpty: isEmpty === undefined ? Collection.isEmpty(children) : isEmpty
-    };
-  }
-
-  public render (): React.ReactNode {
-    const { banner, className } = this.props;
-    const { isEmpty } = this.state;
-
-    return (
-      <div className={className}>
-        {this.renderHeader()}
-        {banner}
-        {isEmpty
-          ? this.renderEmpty()
-          : this.renderCollection()
-        }
-      </div>
-    );
-  }
-
-  protected renderHeader (): React.ReactNode {
-    const { buttons, topButtons, headerText } = this.props;
-    const { showFullHeader } = this.state;
-
-    if (!headerText && !buttons && !topButtons) {
-      return null;
-    }
-
-    return (
-      <div className='ui--Collection-header'>
-        {headerText && <h1>{headerText}</h1>}
-        {(buttons || topButtons) && (
-          <div className='ui--Collection-buttons'>
-            <div>
-              {topButtons}
-            </div>
-            <div>
-              {showFullHeader && buttons}
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  protected renderEmpty (): React.ReactNode {
-    const { emptyText = this.props.t('No items'), showEmptyText = true } = this.props;
-
-    if (!showEmptyText) {
-      return null;
-    }
-
-    return (
-      <article>
-        <div className='ui--Collection-lowercase'>
-          {emptyText}
-        </div>
-      </article>
-    );
-  }
-
-  protected renderCollection (): React.ReactNode {
-    const { children } = this.props;
-    return children;
-  }
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Columar.tsx b/pioneer/packages/old-apps/react-components/src/Columar.tsx
deleted file mode 100644
index 60fe8ded61..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Columar.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import React from 'react';
-import styled from 'styled-components';
-
-interface Props {
-  children: React.ReactNode;
-  className?: string;
-}
-
-function Columar ({ children, className }: Props): React.ReactElement<Props> {
-  return (
-    <div className={`ui--Columnar ${className}`}>
-      {children}
-    </div>
-  );
-}
-
-export default styled(Columar)`
-  display: flex;
-  flex-wrap: wrap;
-
-  .ui--Column {
-    @media (min-width: 1025px) {
-      max-width: 50%;
-      min-width: 50%;
-    }
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/Column.tsx b/pioneer/packages/old-apps/react-components/src/Column.tsx
deleted file mode 100644
index d964b42d19..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Column.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import React from 'react';
-import styled from 'styled-components';
-
-import Collection, { CollectionProps as Props, CollectionState as State, collectionStyles } from './Collection';
-
-import translate from './translate';
-
-class Column extends Collection<Props, State> {
-  public render (): React.ReactNode {
-    const { className } = this.props;
-    const { isEmpty } = this.state;
-
-    return (
-      <div className={`ui--Column ${className}`}>
-        {this.renderHeader()}
-        {isEmpty && this.renderEmpty()}
-        {this.renderCollection()}
-      </div>
-    );
-  }
-
-  public renderCollection (): React.ReactNode {
-    const { children } = this.props;
-
-    return children;
-  }
-
-  // renderEmpty () {
-  //   const { emptyText } = this.props;
-  //   return (
-  //     <article className='container'>
-  //       {emptyText}
-  //     </article>
-  //   );
-  // }
-}
-
-export default translate(
-  styled(Column as React.ComponentClass<Props, State>)`
-    ${collectionStyles}
-
-    box-sizing: border-box;
-    max-width: 100%;
-    flex: 1 1;
-    margin: 0;
-    padding: 0.5rem;
-
-    .container {
-      margin: 0;
-      padding: 0;
-
-      article {
-        border: none;
-        margin: 0;
-      }
-
-      article+article {
-        border-top: 1px solid #f2f2f2;
-      }
-    }
-
-    @media (min-width: 1025px) {
-      max-width: 50%;
-      min-width: 50%;
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/react-components/src/CopyButton.tsx b/pioneer/packages/old-apps/react-components/src/CopyButton.tsx
deleted file mode 100644
index 6474403e57..0000000000
--- a/pioneer/packages/old-apps/react-components/src/CopyButton.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps, I18nProps } from './types';
-
-import React, { useContext } from 'react';
-import CopyToClipboard from 'react-copy-to-clipboard';
-
-import StatusContext from './Status/Context';
-import Button from './Button';
-import translate from './translate';
-import styled from 'styled-components';
-
-interface Props extends BareProps, I18nProps {
-  children?: React.ReactNode;
-  icon?: string;
-  isAddress?: boolean;
-  value?: any;
-}
-
-function CopyButton ({ children, className, icon = 'copy', isAddress = false, t, value }: Props): React.ReactElement<Props> {
-  const { queueAction } = useContext(StatusContext);
-
-  const _onCopy = (): void => {
-    isAddress && queueAction && queueAction({
-      account: value,
-      action: t('clipboard'),
-      status: 'queued',
-      message: t('address copied')
-    });
-  };
-
-  return (
-    <div className={className}>
-      <CopyToClipboard
-        onCopy={_onCopy}
-        text={value}
-      >
-        <div className='copyContainer'>
-          {children}
-          <span className='copySpan'>
-            <Button
-              className='icon-button'
-              icon={icon}
-              size='mini'
-              isPrimary
-            />
-          </span>
-        </div>
-      </CopyToClipboard>
-    </div>
-  );
-}
-
-export default translate(
-  styled(CopyButton)`
-    cursor: copy;
-
-    button.ui.mini.icon.primary.button.icon-button {
-      cursor: copy;
-    }
-
-    .copySpan {
-      white-space: nowrap;
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/react-components/src/CryptoType.tsx b/pioneer/packages/old-apps/react-components/src/CryptoType.tsx
deleted file mode 100644
index 2a5b59ce67..0000000000
--- a/pioneer/packages/old-apps/react-components/src/CryptoType.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
-import { BareProps } from './types';
-
-import React, { useEffect, useState } from 'react';
-import keyring from '@polkadot/ui-keyring';
-
-import { classes } from './util';
-
-interface Props extends BareProps {
-  accountId: AccountId | AccountIndex | Address | string | Uint8Array | null;
-  label?: string;
-}
-
-export default function CryptoType ({ accountId, className, label = '' }: Props): React.ReactElement<Props> {
-  const [type, setType] = useState('unknown');
-
-  useEffect((): void => {
-    try {
-      const current = accountId
-        ? keyring.getPair(accountId.toString())
-        : null;
-
-      if (current) {
-        setType(
-          current.meta.isInjected
-            ? 'injected'
-            : current.meta.isHardware
-              ? current.meta.hardwareType || 'hardware'
-              : current.meta.isExternal
-                ? 'external'
-                : current.type
-        );
-      }
-    } catch (error) {
-      // cannot determine, keep unknown
-    }
-  }, [accountId]);
-
-  return (
-    <div className={classes('ui--CryptoType', className)}>
-      {label}{type}
-    </div>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Dropdown.tsx b/pioneer/packages/old-apps/react-components/src/Dropdown.tsx
deleted file mode 100644
index 73bc455d0f..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Dropdown.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button';
-import SUIDropdown, { DropdownProps } from 'semantic-ui-react/dist/commonjs/modules/Dropdown/Dropdown';
-import { isUndefined } from '@polkadot/util';
-
-import { classes } from './util';
-import Labelled from './Labelled';
-
-interface Props<Option> extends BareProps {
-  allowAdd?: boolean;
-  defaultValue?: any;
-  dropdownClassName?: string;
-  help?: React.ReactNode;
-  isButton?: boolean;
-  isDisabled?: boolean;
-  isError?: boolean;
-  isMultiple?: boolean;
-  label?: React.ReactNode;
-  labelExtra?: React.ReactNode;
-  onAdd?: (value: any) => void;
-  onBlur?: () => void;
-  onChange?: (value: any) => void;
-  onClose?: () => void;
-  onSearch?: (filteredOptions: any[], query: string) => Option[];
-  options: Option[];
-  placeholder?: string;
-  renderLabel?: (item: any) => any;
-  searchInput?: { autoFocus: boolean };
-  transform?: (value: any) => any;
-  value?: any;
-  withEllipsis?: boolean;
-  withLabel?: boolean;
-}
-
-function Dropdown<Option> ({ allowAdd = false, className, defaultValue, dropdownClassName, help, isButton, isDisabled, isError, isMultiple, label, labelExtra, onAdd, onBlur, onChange, onClose, onSearch, options, placeholder, renderLabel, searchInput, style, transform, withEllipsis, withLabel, value }: Props<Option>): React.ReactElement<Props<Option>> {
-  const [stateValue, setStateValue] = useState<any>();
-
-  const _onAdd = (_: React.SyntheticEvent<HTMLElement>, { value }: DropdownProps): void =>
-    onAdd && onAdd(value);
-
-  const _onChange = (_: React.SyntheticEvent<HTMLElement> | null, { value }: DropdownProps): void => {
-    setStateValue(value);
-
-    onChange && onChange(
-      transform
-        ? transform(value)
-        : value
-    );
-  };
-
-  useEffect((): void => {
-    const newValue = isUndefined(value)
-      ? defaultValue
-      : value;
-
-    // only update parent if we have had something changed
-    if (JSON.stringify({ v: newValue }) !== JSON.stringify({ v: stateValue })) {
-      _onChange(null, { value: newValue });
-    }
-  }, [defaultValue, stateValue, value]);
-
-  const dropdown = (
-    <SUIDropdown
-      allowAdditions={allowAdd}
-      className={dropdownClassName}
-      button={isButton}
-      compact={isButton}
-      disabled={isDisabled}
-      error={isError}
-      floating={isButton}
-      multiple={isMultiple}
-      onAddItem={_onAdd}
-      onBlur={onBlur}
-      onChange={_onChange}
-      onClose={onClose}
-      options={options}
-      placeholder={placeholder}
-      renderLabel={renderLabel}
-      search={onSearch || allowAdd}
-      searchInput={searchInput}
-      selection
-      value={stateValue}
-    />
-  );
-
-  return isButton
-    ? (
-      <SUIButton.Group primary>
-        {dropdown}
-      </SUIButton.Group>
-    )
-    : (
-      <Labelled
-        className={classes('ui--Dropdown', className)}
-        help={help}
-        label={label}
-        labelExtra={labelExtra}
-        style={style}
-        withEllipsis={withEllipsis}
-        withLabel={withLabel}
-      >
-        {dropdown}
-      </Labelled>
-    );
-}
-
-export default styled(Dropdown)`
-  .ui--Dropdown-item {
-    position: relative;
-    white-space: nowrap;
-
-    .ui--Dropdown-icon,
-    .ui--Dropdown-name {
-      display: inline-block;
-    }
-
-    .ui--Dropdown-icon {
-      height: 32px;
-      left: 0;
-      position: absolute;
-      top: -9px;
-      width: 32px;
-    }
-
-    .ui--Dropdown-name {
-      margin-left: 3rem;
-    }
-  }
-
-  .ui.selection.dropdown {
-    > .text > .ui--Dropdown-item {
-      .ui--Dropdown-icon {
-        left: -2.6rem;
-        top: -1.15rem;
-        opacity: 1;
-      }
-
-      .ui--Dropdown-name {
-        margin-left: 0;
-      }
-    }
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/Editor.tsx b/pioneer/packages/old-apps/react-components/src/Editor.tsx
deleted file mode 100644
index a3719096cf..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Editor.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from '@polkadot/react-components/types';
-
-import CodeFlask from 'codeflask';
-import React, { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
-import { classes } from '@polkadot/react-components/util';
-
-interface Props extends BareProps {
-  code: string;
-  isValid?: boolean;
-  onEdit: (code: string) => void;
-}
-
-/**
- * @name Editor
- * @summary A code editor based on the codeflask npm module
- * @description It allows to live-edit code examples and JSON files.
- *
- * @example
- * <BR>
- *
- * ```javascript
- * import {Editor} from '@polkadot/react-components';
- *
- * <Editor
- *    className={string} // optional
- *    code={string}
- *    isValid={boolean}, // optional
- *    onEdit={() => callbackFunction}
- *  />
- * ```
- */
-function Editor ({ className, code, isValid, onEdit }: Props): React.ReactElement<Props> {
-  const [editorId] = useState(`flask-${Date.now()}`);
-  const editorRef = useRef<typeof CodeFlask | null>(null);
-
-  useEffect((): void => {
-    const editor = new CodeFlask(`#${editorId}`, {
-      language: 'js',
-      lineNumbers: true
-    });
-
-    editor.updateCode(code);
-    editor.editorRoot.addEventListener('keydown', (): void => {
-      editor.onUpdate(onEdit);
-    });
-
-    editorRef.current = editor;
-  }, []);
-
-  useEffect((): void => {
-    editorRef.current && editorRef.current.updateCode(code);
-  }, [code]);
-
-  return (
-    <div
-      className={classes('ui-Editor', className, isValid === false ? 'invalid' : '')}
-      id={editorId}
-    />
-  );
-}
-
-export default styled(Editor)`
-  .codeflask {
-    border: 1px solid rgba(34,36,38,.15);
-    background: transparent;
-  }
-
-  &.invalid {
-    .codeflask {
-      background-color: #fff6f6;
-      border-color: #e0b4b4;
-    }
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/Event.tsx b/pioneer/packages/old-apps/react-components/src/Event.tsx
deleted file mode 100644
index 288e0ff199..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Event.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Event } from '@polkadot/types/interfaces';
-import { Codec, TypeDef } from '@polkadot/types/types';
-import { BareProps } from './types';
-
-import React from 'react';
-import { getTypeDef } from '@polkadot/types';
-import Params from '@polkadot/react-params';
-
-import { classes } from './util';
-
-export interface Props extends BareProps {
-  children?: React.ReactNode;
-  value: Event;
-}
-
-export default function EventDisplay ({ children, className, style, value }: Props): React.ReactElement<Props> {
-  const params = value.typeDef.map(({ type }): { type: TypeDef } => ({
-    type: getTypeDef(type)
-  }));
-  const values = value.data.map((value): { isValid: boolean; value: Codec } => ({
-    isValid: true,
-    value
-  }));
-
-  return (
-    <div
-      className={classes('ui--Event', className)}
-      style={style}
-    >
-      {children}
-      <Params
-        isDisabled
-        params={params}
-        values={values}
-      />
-    </div>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Expander.tsx b/pioneer/packages/old-apps/react-components/src/Expander.tsx
deleted file mode 100644
index e584ad6052..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Expander.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import React, { useState } from 'react';
-
-export interface Props extends BareProps {
-  children: React.ReactNode;
-  summary: React.ReactNode;
-}
-
-export default function Expanded ({ children, className, summary }: Props): React.ReactElement<Props> {
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  const _toggle = (event: React.SyntheticEvent): void => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    setIsExpanded(!isExpanded);
-  };
-
-  return (
-    <details
-      className={`ui--Expander ${className}`}
-      open={isExpanded}
-    >
-      <summary onClick={_toggle}>{summary}</summary>
-      {isExpanded && children}
-    </details>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Extrinsic.tsx b/pioneer/packages/old-apps/react-components/src/Extrinsic.tsx
deleted file mode 100644
index 85b275f4a9..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Extrinsic.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-extrinsics authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps } from '@polkadot/react-components/types';
-import { RawParam } from '@polkadot/react-params/types';
-import { Call } from '@polkadot/types/interfaces';
-import { CallFunction, TypeDef } from '@polkadot/types/types';
-
-import React, { useEffect, useState } from 'react';
-import { GenericCall, getTypeDef } from '@polkadot/types';
-import { InputExtrinsic } from '@polkadot/react-components';
-import Params from '@polkadot/react-params';
-import { isUndefined } from '@polkadot/util';
-
-import paramComponents from './Params';
-
-interface Props extends BareProps {
-  defaultValue: CallFunction;
-  isDisabled?: boolean;
-  isError?: boolean;
-  isPrivate?: boolean;
-  label?: React.ReactNode;
-  onChange: (method?: Call) => void;
-  onEnter?: () => void;
-  withLabel?: boolean;
-}
-
-function getParams ({ meta }: CallFunction): { name: string; type: TypeDef }[] {
-  return GenericCall.filterOrigin(meta).map((arg): { name: string; type: TypeDef } => ({
-    name: arg.name.toString(),
-    type: getTypeDef(arg.type.toString())
-  }));
-}
-
-export default function ExtrinsicDisplay ({ defaultValue, isDisabled, isError, isPrivate, label, onChange, onEnter, withLabel }: Props): React.ReactElement<Props> {
-  const [extrinsic, setCall] = useState<{ fn: CallFunction; params: { name: string; type: TypeDef }[] }>({ fn: defaultValue, params: getParams(defaultValue) });
-  const [values, setValues] = useState<RawParam[]>([]);
-
-  useEffect((): void => {
-    setValues([]);
-  }, [extrinsic]);
-
-  useEffect((): void => {
-    const isValid = values.reduce((isValid, value): boolean =>
-      isValid &&
-      !isUndefined(value) &&
-      !isUndefined(value.value) &&
-      value.isValid, extrinsic.params.length === values.length
-    );
-
-    let method;
-
-    if (isValid) {
-      try {
-        method = extrinsic.fn(...values.map(({ value }): any => value));
-      } catch (error) {
-        // swallow
-      }
-    }
-
-    onChange(method);
-  }, [extrinsic, values]);
-
-  const _onChangeMethod = (fn: CallFunction): void => setCall({ fn, params: getParams(fn) });
-
-  const { fn: { meta, method, section }, params } = extrinsic;
-
-  return (
-    <div className='extrinsics--Extrinsic'>
-      <InputExtrinsic
-        defaultValue={defaultValue}
-        isDisabled={isDisabled}
-        isError={isError}
-        isPrivate={isPrivate}
-        label={label}
-        onChange={_onChangeMethod}
-        withLabel={withLabel}
-        help={meta && meta.documentation && meta.documentation.join(' ')}
-      />
-      <Params
-        key={`${section}.${method}:params` /* force re-render on change */}
-        onChange={setValues}
-        onEnter={onEnter}
-        overrides={paramComponents}
-        params={params}
-      />
-    </div>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/FilterOverlay.tsx b/pioneer/packages/old-apps/react-components/src/FilterOverlay.tsx
deleted file mode 100644
index cb4e287320..0000000000
--- a/pioneer/packages/old-apps/react-components/src/FilterOverlay.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import React from 'react';
-import styled from 'styled-components';
-import { useMyMembership } from '@polkadot/joy-utils/MyMembershipContext';
-
-import media from './media';
-
-interface Props extends BareProps {
-  children: React.ReactNode;
-}
-
-function FilterOverlay ({ children, className }: Props): React.ReactElement<Props> {
-  const { allAccounts } = useMyMembership();
-  const hasAccount = allAccounts && Object.keys(allAccounts).length;
-  const style = { top: hasAccount ? '5.5rem' : '5px' };
-  return (
-    <div className={className} style={style}>
-      {children}
-    </div>
-  );
-}
-
-export default styled(FilterOverlay)`
-  display: none;
-
-  .ui--Labelled label {
-    display: none;
-  }
-
-  ${media.DESKTOP`
-    display: flex;
-    justify-content: flex-end;
-    position: absolute;
-    right: 5rem;
-
-    > div {
-      max-width: 35rem !important;
-    }
-
-    .ui--Labelled label {
-      display: flex;
-    }
-
-    .ui.selection.dropdown {
-      white-space: nowrap;
-    }
-  `}
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/Forget.tsx b/pioneer/packages/old-apps/react-components/src/Forget.tsx
deleted file mode 100644
index 58b907780a..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Forget.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { CodeStored } from '@polkadot/app-contracts/types';
-
-import React from 'react';
-import { AddressRow, Button, CodeRow, Modal } from '@polkadot/react-components';
-
-import translate from './translate';
-
-interface Props extends I18nProps {
-  address?: string;
-  code?: CodeStored;
-  name?: string;
-  mode?: 'account' | 'address' | 'contract' | 'code';
-  onClose: () => void;
-  onForget: () => void;
-}
-
-function getContent ({ mode = 'account', t }: Props): React.ReactNode {
-  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>
-        </>
-      );
-    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>
-        </>
-      );
-    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>
-        </>
-      );
-    case 'code':
-      return (
-        <>
-          <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>
-        </>
-      );
-  }
-}
-
-function getHeaderText ({ mode = 'account', t }: Props): string {
-  switch (mode) {
-    case 'account':
-      return t('Confirm account removal');
-    case 'address':
-      return t('Confirm address removal');
-    case 'contract':
-      return t('Confirm contract removal');
-    case 'code':
-      return t('Confirm code removal');
-  }
-}
-
-function renderContent (props: Props): React.ReactNode {
-  const { address, code, mode = 'account' } = props;
-
-  switch (mode) {
-    case 'account':
-    case 'address':
-    case 'contract':
-      return (
-        <AddressRow
-          isInline
-          value={address || ''}
-        >
-          {getContent(props)}
-        </AddressRow>
-      );
-    case 'code':
-      return (
-        <CodeRow
-          isInline
-          code={code || ''}
-        >
-          {getContent(props)}
-        </CodeRow>
-      );
-  }
-}
-
-function Forget (props: Props): React.ReactElement<Props> {
-  const { onForget, onClose, t } = props;
-
-  return (
-    <Modal
-      className='app--accounts-Modal'
-      dimmer='inverted'
-      onClose={onClose}
-      open
-    >
-      <Modal.Header>
-        {getHeaderText(props)}
-      </Modal.Header>
-      <Modal.Content>
-        {renderContent(props)}
-      </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            isNegative
-            onClick={onClose}
-            label={t('Cancel')}
-            icon='cancel'
-          />
-          <Button.Or />
-          <Button
-            isPrimary
-            onClick={onForget}
-            label={t('Forget')}
-            icon='trash'
-          />
-        </Button.Group>
-      </Modal.Actions>
-    </Modal>
-  );
-}
-
-export default translate(Forget);
diff --git a/pioneer/packages/old-apps/react-components/src/HelpOverlay.tsx b/pioneer/packages/old-apps/react-components/src/HelpOverlay.tsx
deleted file mode 100644
index f1838e2c06..0000000000
--- a/pioneer/packages/old-apps/react-components/src/HelpOverlay.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import React, { useState } from 'react';
-import ReactMd from 'react-markdown';
-import styled from 'styled-components';
-
-import Icon from './Icon';
-
-interface Props extends BareProps {
-  md: string;
-}
-
-function HelpOverlay ({ className, md, style }: Props): React.ReactElement<Props> {
-  const [isVisible, setIsVisible] = useState(false);
-
-  const _toggleVisible = (): void => setIsVisible(!isVisible);
-
-  return (
-    <div className={className}>
-      <div className="help-button" style={style}>
-        <Icon name="help circle" onClick={_toggleVisible} />
-      </div>
-      <div className={`help-slideout ${isVisible ? 'open' : 'closed'}`}>
-        <div className="help-button">
-          <Icon name="close" onClick={_toggleVisible} />
-        </div>
-        <ReactMd className="help-content" escapeHtml={false} source={md} />
-      </div>
-    </div>
-  );
-}
-
-export default styled(HelpOverlay)`
-  .help-button {
-    color: #2196f3;
-    cursor: pointer;
-    font-size: 2rem;
-    padding: 1.25rem 1.5rem 0 0;
-  }
-
-  > .help-button {
-    position: absolute;
-    right: 0rem;
-  }
-
-  .help-slideout {
-    background: #eee;
-    border-left: 0.25rem solid #ddd;
-    bottom: 0;
-    max-width: 50rem;
-    overflow-y: scroll;
-    position: fixed;
-    right: -50rem;
-    top: 0;
-    transition-duration: 0.5s;
-    transition-property: all;
-    z-index: 10;
-
-    .help-button {
-      text-align: right;
-    }
-
-    .help-content {
-      padding: 1rem 1.5rem 5rem;
-    }
-
-    &.open {
-      right: 0;
-    }
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/Icon.tsx b/pioneer/packages/old-apps/react-components/src/Icon.tsx
deleted file mode 100644
index 7ac71e230d..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Icon.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import Icon from 'semantic-ui-react/dist/commonjs/elements/Icon/Icon';
-
-export default Icon;
diff --git a/pioneer/packages/old-apps/react-components/src/IconLink.tsx b/pioneer/packages/old-apps/react-components/src/IconLink.tsx
deleted file mode 100644
index fea0df5bec..0000000000
--- a/pioneer/packages/old-apps/react-components/src/IconLink.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import React from 'react';
-import styled from 'styled-components';
-
-import Icon from './Icon';
-
-interface Props extends BareProps {
-  icon?: string;
-  label?: React.ReactNode;
-  onClick: () => void;
-}
-
-function IconLink ({ className, icon, label, onClick }: Props): React.ReactElement<Props> {
-  return (
-    <a
-      className={className}
-      onClick={onClick}
-    >
-      {icon && <Icon className={icon} />}
-      {label}
-    </a>
-  );
-}
-
-export default styled(IconLink)`
-  font-size: 0.9rem !important;
-
-  &:hover {
-    text-decoration: underline;
-
-    i {
-      text-decoration: none;
-    }
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/IdentityIcon.tsx b/pioneer/packages/old-apps/react-components/src/IdentityIcon.tsx
deleted file mode 100644
index 616688250a..0000000000
--- a/pioneer/packages/old-apps/react-components/src/IdentityIcon.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { AccountId } from '@polkadot/types/interfaces';
-import { IdentityProps } from '@polkadot/react-identicon/types';
-import { I18nProps } from './types';
-
-import React, { useContext, useEffect, useState } from 'react';
-import { ApiContext, withCalls, withMulti } from '@polkadot/react-api';
-import BaseIdentityIcon from '@polkadot/react-identicon';
-import uiSettings from '@polkadot/ui-settings';
-
-import StatusContext from './Status/Context';
-import translate from './translate';
-
-interface Props extends IdentityProps, I18nProps {
-  validators?: AccountId[];
-}
-
-// overrides based on the actual software node type
-const NODES: Record<string, string> = {
-  'edgeware-node': 'substrate',
-  'joystream-node': 'beachball',
-  'node-template': 'substrate',
-  'parity-polkadot': 'polkadot',
-  'polkadot-js': 'polkadot',
-  'substrate-node': 'substrate'
-};
-
-export function getIdentityTheme (systemName: string): 'empty' {
-  return ((uiSettings.icon === 'default' && NODES[systemName]) || uiSettings.icon) as 'empty';
-}
-
-function IdentityIcon ({ className, onCopy, prefix, size, style, t, theme, validators, value }: Props): React.ReactElement<Props> {
-  const { systemName } = useContext(ApiContext);
-  const { queueAction } = useContext(StatusContext);
-  const [address, setAddress] = useState<string | undefined>();
-  const [isValidator, setIsValidator] = useState(false);
-  const thisTheme = theme || getIdentityTheme(systemName);
-
-  useEffect((): void => {
-    setAddress(value?.toString());
-  }, [value]);
-
-  useEffect((): void => {
-    setIsValidator(
-      validators
-        ? validators.some((validator): boolean => validator.toString() === address)
-        : false
-    );
-  }, [address, validators]);
-
-  const _onCopy = (account: string): void => {
-    onCopy && onCopy(account);
-    queueAction && queueAction({
-      account,
-      action: t('clipboard'),
-      status: 'queued',
-      message: t('address copied')
-    });
-  };
-
-  return (
-    <BaseIdentityIcon
-      className={className}
-      isHighlight={isValidator}
-      onCopy={_onCopy}
-      prefix={prefix}
-      size={size}
-      style={style}
-      theme={thisTheme as 'substrate'}
-      value={address}
-    />
-  );
-}
-
-export default withMulti(
-  IdentityIcon,
-  translate,
-  withCalls<Props>(
-    ['derive.staking.validators', {
-      propName: 'validators',
-      transform: ({ validators }): AccountId[] => validators
-    }]
-  )
-);
diff --git a/pioneer/packages/old-apps/react-components/src/InfoForInput.tsx b/pioneer/packages/old-apps/react-components/src/InfoForInput.tsx
deleted file mode 100644
index 468ca91736..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InfoForInput.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import React from 'react';
-import styled from 'styled-components';
-
-import { classes } from './util';
-import Labelled from './Labelled';
-
-interface Props {
-  children: React.ReactNode;
-  className?: string;
-  type?: 'error' | 'info' | 'warning';
-}
-
-function InfoForInput ({ children, className, type = 'info' }: Props): React.ReactElement<Props> {
-  return (
-    <Labelled>
-      <div className={classes(className, type)}>{children}</div>
-    </Labelled>
-  );
-}
-
-export default styled(InfoForInput)`
-  background: white;
-  border-radius: 0 0 0.25rem 0.25rem;
-  margin: -0.5rem 0 0.25rem;
-  padding: 1.25rem 1.5rem 1rem;
-
-  &.error {
-    background: #db2828;
-    color: #eee;
-  }
-
-  &.warning {
-    background: #ffffe0;
-  }
-
-  > ul {
-    margin: 0;
-    padding: 0;
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/Input.tsx b/pioneer/packages/old-apps/react-components/src/Input.tsx
deleted file mode 100644
index f0bf31d199..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Input.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import React, { useState } from 'react';
-import SUIInput from 'semantic-ui-react/dist/commonjs/elements/Input/Input';
-import { isUndefined } from '@polkadot/util';
-
-import Labelled from './Labelled';
-
-type Input$Type = 'number' | 'password' | 'text';
-
-interface Props extends BareProps {
-  autoFocus?: boolean;
-  children?: React.ReactNode;
-  defaultValue?: any;
-  help?: React.ReactNode;
-  icon?: React.ReactNode;
-  isAction?: boolean;
-  isDisabled?: boolean;
-  isEditable?: boolean;
-  isError?: boolean;
-  isHidden?: boolean;
-  isReadOnly?: boolean;
-  label?: React.ReactNode;
-  labelExtra?: React.ReactNode;
-  max?: any;
-  maxLength?: number;
-  min?: any;
-  name?: string;
-  onEnter?: () => void;
-  onChange?: (value: string) => void;
-  onBlur?: () => void;
-  onKeyDown?: (event: React.KeyboardEvent<Element>) => void;
-  onKeyUp?: (event: React.KeyboardEvent<Element>) => void;
-  onKeyPress?: (event: React.KeyboardEvent<Element>) => void;
-  onPaste?: (event: React.ClipboardEvent<Element>) => void;
-  placeholder?: string;
-  tabIndex?: number;
-  type?: Input$Type;
-  value?: any;
-  withLabel?: boolean;
-  withEllipsis?: boolean;
-}
-
-// Find decimal separator used in current locale
-const getDecimalSeparator = (): string => 1.1
-  .toLocaleString()
-  .replace(/\d/g, '');
-
-// note: KeyboardEvent.keyCode and KeyboardEvent.which are deprecated
-const KEYS = {
-  A: 'a',
-  ALT: 'Alt',
-  ARROW_LEFT: 'ArrowLeft',
-  ARROW_RIGHT: 'ArrowRight',
-  BACKSPACE: 'Backspace',
-  C: 'c',
-  CMD: 'Meta',
-  CTRL: 'Control',
-  ENTER: 'Enter',
-  ESCAPE: 'Escape',
-  TAB: 'Tab',
-  V: 'v',
-  X: 'x',
-  ZERO: '0',
-  DECIMAL: getDecimalSeparator()
-};
-
-const KEYS_PRE: any[] = [KEYS.ALT, KEYS.CMD, KEYS.CTRL];
-
-// reference: degrade key to keyCode for cross-browser compatibility https://www.w3schools.com/jsref/event_key_keycode.asp
-const isCopy = (key: string, isPreKeyDown: boolean): boolean =>
-  isPreKeyDown && key === KEYS.C;
-
-const isCut = (key: string, isPreKeyDown: boolean): boolean =>
-  isPreKeyDown && key === KEYS.X;
-
-const isPaste = (key: string, isPreKeyDown: boolean): boolean =>
-  isPreKeyDown && key === KEYS.V;
-
-const isSelectAll = (key: string, isPreKeyDown: boolean): boolean =>
-  isPreKeyDown && key === KEYS.A;
-
-let counter = 0;
-
-export default function Input ({ autoFocus = false, children, className, defaultValue, help, icon, isEditable = false, isAction = false, isDisabled = false, isError = false, isHidden = false, isReadOnly = false, label, labelExtra, max, maxLength, min, name, onBlur, onChange, onEnter, onKeyDown, onKeyUp, onPaste, placeholder, style, tabIndex, type = 'text', value, withEllipsis, withLabel }: Props): React.ReactElement<Props> {
-  const [stateName] = useState(`in_${counter++}_at_${Date.now()}`);
-
-  const _onBlur = (): void => {
-    onBlur && onBlur();
-  };
-  const _onChange = ({ target }: React.SyntheticEvent<HTMLInputElement>): void => {
-    onChange && onChange((target as HTMLInputElement).value);
-  };
-  const _onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {
-    onKeyDown && onKeyDown(event);
-  };
-  const _onKeyUp = (event: React.KeyboardEvent<HTMLInputElement>): void => {
-    onKeyUp && onKeyUp(event);
-
-    if (onEnter && event.keyCode === 13) {
-      (event.target as any).blur();
-      onEnter();
-    }
-  };
-  const _onPaste = (event: React.ClipboardEvent<HTMLInputElement>): void => {
-    onPaste && onPaste(event);
-  };
-
-  return (
-    <Labelled
-      className={className}
-      help={help}
-      label={label}
-      labelExtra={labelExtra}
-      style={style}
-      withEllipsis={withEllipsis}
-      withLabel={withLabel}
-    >
-      <SUIInput
-        action={isAction}
-        autoFocus={autoFocus}
-        className={
-          isEditable
-            ? 'ui--Input edit icon'
-            : 'ui--Input'
-        }
-        defaultValue={
-          isUndefined(value)
-            ? (defaultValue || '')
-            : undefined
-        }
-        disabled={isDisabled}
-        error={!isDisabled && isError}
-        hidden={isHidden}
-        id={name}
-        iconPosition={
-          isUndefined(icon)
-            ? undefined
-            : 'left'
-        }
-        max={max}
-        maxLength={maxLength}
-        min={min}
-        name={name || stateName}
-        onBlur={_onBlur}
-        onChange={_onChange}
-        onKeyDown={_onKeyDown}
-        onKeyUp={_onKeyUp}
-        placeholder={placeholder}
-        readOnly={isReadOnly}
-        tabIndex={tabIndex}
-        type={type}
-        value={value}
-      >
-        <input
-          autoComplete={
-            type === 'password'
-              ? 'new-password'
-              : 'off'
-          }
-          onPaste={_onPaste}
-        />
-        {isEditable && (
-          <i className='edit icon' />
-        )}
-        {icon}
-        {children}
-      </SUIInput>
-    </Labelled>
-  );
-}
-
-export {
-  isCopy,
-  isCut,
-  isPaste,
-  isSelectAll,
-  KEYS,
-  KEYS_PRE
-};
diff --git a/pioneer/packages/old-apps/react-components/src/InputAddress/KeyPair.tsx b/pioneer/packages/old-apps/react-components/src/InputAddress/KeyPair.tsx
deleted file mode 100644
index 088be09532..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputAddress/KeyPair.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import React from 'react';
-import styled from 'styled-components';
-import { AccountName } from '@polkadot/react-query';
-
-import IdentityIcon from '../IdentityIcon';
-
-interface Props {
-  address: string;
-  className?: string;
-  isUppercase: boolean;
-  name: string;
-  style?: Record<string, string>;
-}
-
-function KeyPair ({ address, className, style }: Props): React.ReactElement<Props> {
-  return (
-    <div
-      className={['ui--KeyPair', className].join(' ')}
-      style={style}
-    >
-      <IdentityIcon
-        className='icon'
-        size={32}
-        value={address}
-      />
-      <div className='name'>
-        <AccountName params={address} />
-      </div>
-      <div className='address'>
-        {address}
-      </div>
-    </div>
-  );
-}
-
-export default styled(KeyPair)`
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  position: relative;
-  white-space: nowrap;
-
-  > .address {
-    display: inline-block;
-    flex: 1;
-    font-family: monospace;
-    margin-left: 1rem;
-    opacity: 0.5;
-    overflow: hidden;
-    text-align: right;
-    text-overflow: ellipsis;
-  }
-
-  > .icon {
-    position: absolute;
-    top: -9px;
-    left: 0;
-  }
-
-  > .name {
-    display: inline-block;
-    flex: 1 0;
-    margin-left: 3rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &.uppercase {
-      text-transform: uppercase;
-    }
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/InputAddress/createHeader.tsx b/pioneer/packages/old-apps/react-components/src/InputAddress/createHeader.tsx
deleted file mode 100644
index 62dae95a83..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputAddress/createHeader.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { KeyringSectionOption } from '@polkadot/ui-keyring/options/types';
-import { Option } from './types';
-
-export default function createHeader (option: KeyringSectionOption): Option {
-  return {
-    ...option,
-    className: 'header disabled',
-    text: option.name
-  };
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputAddress/createItem.tsx b/pioneer/packages/old-apps/react-components/src/InputAddress/createItem.tsx
deleted file mode 100644
index 6d328335b0..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputAddress/createItem.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { KeyringSectionOption } from '@polkadot/ui-keyring/options/types';
-import { Option } from './types';
-
-import React from 'react';
-
-import KeyPair from './KeyPair';
-
-export default function createItem (option: KeyringSectionOption, isUppercase = true): Option {
-  return {
-    ...option,
-    text: (
-      <KeyPair
-        address={option.key || ''}
-        isUppercase={isUppercase}
-        name={name}
-      />
-    )
-  };
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputAddress/index.tsx b/pioneer/packages/old-apps/react-components/src/InputAddress/index.tsx
deleted file mode 100644
index ffc6337e49..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputAddress/index.tsx
+++ /dev/null
@@ -1,347 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { KeyringOptions, KeyringSectionOption, KeyringSectionOptions, KeyringOption$Type } from '@polkadot/ui-keyring/options/types';
-import { BareProps } from '../types';
-import { Option } from './types';
-
-import React from 'react';
-import store from 'store';
-import styled from 'styled-components';
-import { withMulti, withObservable } from '@polkadot/react-api';
-import keyring from '@polkadot/ui-keyring';
-import keyringOption from '@polkadot/ui-keyring/options';
-import createKeyringItem from '@polkadot/ui-keyring/options/item';
-import { isUndefined } from '@polkadot/util';
-
-import { classes, getAddressName } from '../util';
-import addressToAddress from '../util/toAddress';
-import Dropdown from '../Dropdown';
-import createHeader from './createHeader';
-import createItem from './createItem';
-
-import { MyAccountContext } from '@polkadot/joy-utils/MyAccountContext';
-
-interface Props extends BareProps {
-  defaultValue?: Uint8Array | string | null;
-  help?: React.ReactNode;
-  hideAddress?: boolean;
-  isDisabled?: boolean;
-  isError?: boolean;
-  isInput?: boolean;
-  isMultiple?: boolean;
-  label?: React.ReactNode;
-  labelExtra?: React.ReactNode;
-  onChange?: (value: string | null) => void;
-  onChangeMulti?: (value: string[]) => void;
-  options?: KeyringSectionOption[];
-  optionsAll?: Record<string, Option[]>;
-  placeholder?: string;
-  type?: KeyringOption$Type;
-  value?: string | Uint8Array | string[] | null;
-  withEllipsis?: boolean;
-  withLabel?: boolean;
-}
-
-type ExportedType = React.ComponentType<Props> & {
-  createOption: (option: KeyringSectionOption, isUppercase?: boolean) => Option;
-  setLastValue: (type: KeyringOption$Type, value: string) => void;
-};
-
-interface State {
-  value?: string | string[];
-}
-
-const STORAGE_KEY = 'options:InputAddress';
-const DEFAULT_TYPE = 'all';
-const MULTI_DEFAULT: string[] = [];
-
-function transformToAddress (value: string | Uint8Array): string | null {
-  try {
-    return addressToAddress(value) || null;
-  } catch (error) {
-    console.error('Unable to transform address', value);
-  }
-
-  return null;
-}
-
-function transformToAccountId (value: string): string | null {
-  if (!value) {
-    return null;
-  }
-
-  const accountId = transformToAddress(value);
-
-  return !accountId
-    ? null
-    : accountId;
-}
-
-function createOption (address: string): Option {
-  let isRecent: boolean | undefined;
-  const pair = keyring.getAccount(address);
-  let name: string | undefined;
-
-  if (pair) {
-    name = pair.meta.name;
-  } else {
-    const addr = keyring.getAddress(address);
-
-    if (addr) {
-      name = addr.meta.name;
-      isRecent = addr.meta.isRecent;
-    } else {
-      isRecent = true;
-    }
-  }
-
-  return createItem(createKeyringItem(address, name), !isRecent);
-}
-
-function readOptions (): Record<string, any> {
-  return store.get(STORAGE_KEY) || { defaults: {} };
-}
-
-function getLastValue (type: KeyringOption$Type = DEFAULT_TYPE): any {
-  const options = readOptions();
-
-  return options.defaults[type];
-}
-
-function setLastValue (type: KeyringOption$Type = DEFAULT_TYPE, value: string): void {
-  const options = readOptions();
-
-  options.defaults[type] = value;
-  store.set(STORAGE_KEY, options);
-}
-
-class InputAddress extends React.PureComponent<Props, State> {
-  public state: State = {};
-
-  static contextType = MyAccountContext;
-
-  public static getDerivedStateFromProps ({ value }: Props): Pick<State, never> | null {
-    try {
-      return {
-        value: Array.isArray(value)
-          ? value.map(addressToAddress)
-          : (addressToAddress(value) || undefined)
-      };
-    } catch (error) {
-      return null;
-    }
-  }
-
-  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 { value } = this.state;
-    const hasOptions = (options && options.length !== 0) || (optionsAll && Object.keys(optionsAll[type]).length !== 0);
-
-    if (!hasOptions && !isDisabled) {
-      return null;
-    }
-
-    const lastValue = getLastValue(type);
-    const lastOption = this.getLastOptionValue();
-    const actualValue = transformToAddress(
-      isDisabled || (defaultValue && this.hasValue(defaultValue))
-        ? defaultValue
-        : (
-          this.hasValue(lastValue)
-            ? lastValue
-            : (lastOption && lastOption.value)
-        )
-    );
-    const actualOptions: Option[] = options
-      ? options.map((o): Option => createItem(o))
-      : (
-        isDisabled && actualValue
-          ? [createOption(actualValue)]
-          : optionsAll
-            ? optionsAll[type]
-            : []
-      );
-    const _defaultValue = (isMultiple || !isUndefined(value))
-      ? undefined
-      : actualValue;
-
-    return (
-      <Dropdown
-        className={classes('ui--InputAddress', hideAddress && 'hideAddress', className)}
-        defaultValue={_defaultValue}
-        help={help}
-        isDisabled={isDisabled}
-        isError={isError}
-        isMultiple={isMultiple}
-        label={label}
-        labelExtra={labelExtra}
-        onChange={
-          isMultiple
-            ? this.onChangeMulti
-            : this.onChange
-        }
-        onSearch={this.onSearch}
-        options={actualOptions}
-        placeholder={placeholder}
-        renderLabel={
-          isMultiple
-            ? this.renderLabel
-            : undefined
-        }
-        style={style}
-        value={
-          isMultiple && !value
-            ? MULTI_DEFAULT
-            : value
-        }
-        withEllipsis={withEllipsis}
-        withLabel={withLabel}
-      />
-    );
-  }
-
-  private renderLabel = ({ value }: KeyringSectionOption): React.ReactNode => {
-    if (!value) {
-      return undefined;
-    }
-
-    return getAddressName(value);
-  }
-
-  private getLastOptionValue (): KeyringSectionOption | undefined {
-    const { optionsAll, type = DEFAULT_TYPE } = this.props;
-
-    if (!optionsAll) {
-      return;
-    }
-
-    const available = optionsAll[type].filter(({ value }): boolean => !!value);
-
-    return available.length
-      ? available[available.length - 1]
-      : undefined;
-  }
-
-  private hasValue (test?: Uint8Array | string): boolean {
-    const { optionsAll, type = DEFAULT_TYPE } = this.props;
-
-    if (!optionsAll) {
-      return false;
-    }
-
-    return !!optionsAll[type].find(({ value }): boolean => test === value);
-  }
-
-  private onChange = (address: string): void => {
-    const { onChange, type } = this.props;
-
-    setLastValue(type, address);
-
-    if (type === 'account') {
-      const { set } = this.context;
-      set(address);
-    }
-
-    onChange && onChange(transformToAccountId(address));
-  }
-
-  private onChangeMulti = (addresses: string[]): void => {
-    const { onChangeMulti } = this.props;
-
-    if (onChangeMulti) {
-      onChangeMulti(
-        addresses
-          .map(transformToAccountId)
-          .filter((address): string => address as string) as string[]
-      );
-    }
-  }
-
-  private onSearch = (filteredOptions: KeyringSectionOptions, _query: string): KeyringSectionOptions => {
-    const { isInput = true } = this.props;
-    const query = _query.trim();
-    const queryLower = query.toLowerCase();
-    const matches = filteredOptions.filter((item): boolean =>
-      item.value !== null && (
-        (item.name.toLowerCase && item.name.toLowerCase().includes(queryLower)) ||
-        item.value.toLowerCase().includes(queryLower)
-      )
-    );
-
-    const valueMatches = matches.filter((item): boolean =>
-      item.value !== null
-    );
-
-    if (isInput && valueMatches.length === 0) {
-      const accountId = transformToAccountId(query);
-
-      if (accountId) {
-        matches.push(
-          keyring.saveRecent(
-            accountId.toString()
-          ).option
-        );
-      }
-    }
-
-    return matches.filter((item, index): boolean => {
-      const isLast = index === matches.length - 1;
-      const nextItem = matches[index + 1];
-      const hasNext = nextItem && nextItem.value;
-
-      return item.value !== null || (!isLast && !!hasNext);
-    });
-  }
-}
-
-const ExportedComponent = withMulti(
-  styled(InputAddress)`
-    .ui.dropdown .text {
-      width: 100%;
-    }
-
-    .ui.disabled.search {
-      pointer-events: all;
-    }
-
-    .ui.search.selection.dropdown {
-      > .text > .ui--KeyPair {
-        .ui--IdentityIcon {
-          border: 1px solid #888;
-          border-radius: 50%;
-          left: -2.75rem;
-          top: -1.2rem;
-        }
-
-        .name {
-          margin-left: 0;
-        }
-      }
-    }
-
-    &.hideAddress .ui--KeyPair .address {
-      flex: 0;
-      max-width: 0;
-    }
-  `,
-  withObservable(keyringOption.optionsSubject, {
-    propName: 'optionsAll',
-    transform: (optionsAll: KeyringOptions): Record<string, Option[]> =>
-      Object.entries(optionsAll).reduce((result: Record<string, Option[]>, [type, options]): Record<string, Option[]> => {
-        result[type] = options.map((option): Option =>
-          option.value === null
-            ? createHeader(option)
-            : createItem(option)
-        );
-
-        return result;
-      }, {})
-  })
-) as ExportedType;
-
-ExportedComponent.createOption = createItem;
-ExportedComponent.setLastValue = setLastValue;
-
-export default ExportedComponent;
diff --git a/pioneer/packages/old-apps/react-components/src/InputAddress/types.ts b/pioneer/packages/old-apps/react-components/src/InputAddress/types.ts
deleted file mode 100644
index 761dbff4cc..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputAddress/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { KeyringSectionOption } from '@polkadot/ui-keyring/options/types';
-
-import React from 'react';
-
-export interface Option extends KeyringSectionOption {
-  className?: string;
-  text: React.ReactNode;
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputAddressSimple.tsx b/pioneer/packages/old-apps/react-components/src/InputAddressSimple.tsx
deleted file mode 100644
index cf945946e3..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputAddressSimple.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import React, { useState } from 'react';
-import styled from 'styled-components';
-
-import addressToAddress from './util/toAddress';
-import IdentityIcon from './IdentityIcon';
-import Input from './Input';
-
-interface Props extends BareProps {
-  help?: React.ReactNode;
-  label?: React.ReactNode;
-  onChange?: (address: string | null) => void;
-}
-
-function InputAddressSimple ({ className, help, label, onChange }: Props): React.ReactElement<Props> {
-  const [address, setAddress] = useState<string | null>(null);
-
-  const _onChange = (_address: string): void => {
-    const address = addressToAddress(_address) || null;
-
-    setAddress(address);
-
-    onChange && onChange(address);
-  };
-
-  return (
-    <div className={className}>
-      <Input
-        help={help}
-        isError={!address}
-        label={label}
-        onChange={_onChange}
-      />
-      <IdentityIcon
-        className='ui--InputAddressSimpleIcon'
-        size={32}
-        value={address}
-      />
-    </div>
-  );
-}
-
-export default styled(InputAddressSimple)`
-  position: relative;
-
-  .ui--InputAddressSimpleIcon {
-    background: #eee;
-    border: 1px solid #888;
-    border-radius: 50%;
-    left: 0.75rem;
-    position: absolute;
-    top: 1rem;
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/InputBalance.tsx b/pioneer/packages/old-apps/react-components/src/InputBalance.tsx
deleted file mode 100644
index 388ec64672..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputBalance.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps, BitLength } from './types';
-
-import BN from 'bn.js';
-import React from 'react';
-import styled from 'styled-components';
-import { BitLengthOption } from '@polkadot/react-components/constants';
-import { InputNumber } from '@polkadot/react-components';
-
-interface Props extends BareProps {
-  autoFocus?: boolean;
-  defaultValue?: BN | string;
-  help?: React.ReactNode;
-  isDisabled?: boolean;
-  isError?: boolean;
-  label?: React.ReactNode;
-  labelExtra?: React.ReactNode;
-  maxValue?: BN;
-  onChange?: (value?: BN) => void;
-  onEnter?: () => void;
-  placeholder?: string;
-  value?: BN | string;
-  withEllipsis?: boolean;
-  withLabel?: boolean;
-  withMax?: boolean;
-}
-
-const DEFAULT_BITLENGTH = BitLengthOption.CHAIN_SPEC as BitLength;
-
-function InputBalance ({ autoFocus, className, defaultValue, help, isDisabled, isError, label, labelExtra, maxValue, onChange, onEnter, placeholder, style, value, withEllipsis, withLabel, withMax }: Props): React.ReactElement<Props> {
-  return (
-    <InputNumber
-      autoFocus={autoFocus}
-      className={`ui--InputBalance ${className}`}
-      bitLength={DEFAULT_BITLENGTH}
-      defaultValue={defaultValue}
-      help={help}
-      isDisabled={isDisabled}
-      isError={isError}
-      isSi
-      label={label}
-      labelExtra={labelExtra}
-      maxValue={maxValue}
-      onChange={onChange}
-      onEnter={onEnter}
-      placeholder={placeholder}
-      style={style}
-      value={value}
-      withEllipsis={withEllipsis}
-      withLabel={withLabel}
-      withMax={withMax}
-    />
-  );
-}
-
-export default styled(InputBalance)`
-  &&:not(.label-small) .labelExtra {
-    right: 6.5rem;
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/InputBalanceBonded.tsx b/pioneer/packages/old-apps/react-components/src/InputBalanceBonded.tsx
deleted file mode 100644
index 8b183c05a0..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputBalanceBonded.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @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.
-
-import { BareProps, BitLength } from './types';
-import { DerivedFees, DerivedBalances } from '@polkadot/api-derive/types';
-
-import BN from 'bn.js';
-import React from 'react';
-import { ApiProps } from '@polkadot/react-api/types';
-import { BitLengthOption } from '@polkadot/react-components/constants';
-import { calcTxLength } from '@polkadot/react-signer/Checks';
-import { InputNumber } from '@polkadot/react-components';
-import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-import { withCalls, withMulti, withApi } from '@polkadot/react-api';
-import { ZERO_BALANCE, ZERO_FEES } from '@polkadot/react-signer/Checks/constants';
-import { bnMax } from '@polkadot/util';
-
-interface Props extends BareProps, ApiProps {
-  autoFocus?: boolean;
-  balances_fees?: DerivedFees;
-  balances_all?: DerivedBalances;
-  controllerId: string;
-  defaultValue?: BN | string;
-  destination?: number;
-  extrinsicProp: 'staking.bond' | 'staking.bondExtra' | 'staking.unbond';
-  help?: React.ReactNode;
-  isDisabled?: boolean;
-  isError?: boolean;
-  label?: any;
-  onChange?: (value?: BN) => void;
-  onEnter?: () => void;
-  placeholder?: string;
-  stashId: string;
-  value?: BN | string;
-  withEllipsis?: boolean;
-  withLabel?: boolean;
-  withMax?: boolean;
-}
-
-interface State {
-  maxBalance?: BN;
-  extrinsic: SubmittableExtrinsic | null;
-}
-
-const ZERO = new BN(0);
-const DEFAULT_BITLENGTH = BitLengthOption.CHAIN_SPEC as BitLength;
-
-class InputBalanceBonded extends React.PureComponent<Props, State> {
-  public state: State;
-
-  constructor (props: Props) {
-    super(props);
-
-    this.state = {
-      extrinsic: null,
-      maxBalance: ZERO
-    };
-  }
-
-  public render (): React.ReactNode {
-    const { autoFocus, className, defaultValue, help, isDisabled, isError, label, onChange, onEnter, placeholder, style, value, withEllipsis, withLabel, withMax } = this.props;
-    const { maxBalance } = this.state;
-
-    return (
-      <InputNumber
-        autoFocus={autoFocus}
-        className={className}
-        bitLength={DEFAULT_BITLENGTH}
-        defaultValue={defaultValue}
-        help={help}
-        isDisabled={isDisabled}
-        isError={isError}
-        isSi
-        label={label}
-        maxValue={maxBalance}
-        onChange={onChange}
-        onEnter={onEnter}
-        placeholder={placeholder}
-        style={style}
-        value={value}
-        withEllipsis={withEllipsis}
-        withLabel={withLabel}
-        withMax={withMax}
-      />
-    );
-  }
-
-  public componentDidUpdate (prevProps: Props, prevState: State): void {
-    const { balances_all, balances_fees, controllerId, destination } = this.props;
-    const { extrinsic } = this.state;
-    const hasLengthChanged = ((extrinsic && extrinsic.encodedLength) || 0) !== ((prevState.extrinsic && prevState.extrinsic.encodedLength) || 0);
-
-    if ((controllerId && prevProps.controllerId !== controllerId) ||
-      (prevProps.destination !== destination) ||
-      (balances_fees !== prevProps.balances_fees) ||
-      (balances_all !== prevProps.balances_all) ||
-      hasLengthChanged
-    ) {
-      this.setMaxBalance();
-    }
-  }
-
-  private setMaxBalance = (): void => {
-    const { api, balances_fees = ZERO_FEES, balances_all = ZERO_BALANCE, controllerId, destination, extrinsicProp } = this.props;
-    const { transactionBaseFee, transactionByteFee } = balances_fees;
-    const { freeBalance } = balances_all;
-    let prevMax = new BN(0);
-    let maxBalance = new BN(1);
-    let extrinsic;
-
-    while (!prevMax.eq(maxBalance)) {
-      prevMax = maxBalance;
-
-      if (extrinsicProp === 'staking.bond') {
-        extrinsic = controllerId && (destination || destination === 0)
-          ? api.tx.staking.bond(controllerId, prevMax, destination)
-          : null;
-      } else if (extrinsicProp === 'staking.unbond') {
-        extrinsic = api.tx.staking.unbond(prevMax);
-      } else if (extrinsicProp === 'staking.bondExtra') {
-        extrinsic = api.tx.staking.bonExtra(prevMax);
-      }
-
-      const txLength = calcTxLength(extrinsic, balances_all.accountNonce);
-      const fees = transactionBaseFee.add(transactionByteFee.mul(txLength));
-
-      maxBalance = bnMax(freeBalance.sub(fees), ZERO);
-    }
-
-    this.nextState({
-      extrinsic,
-      maxBalance
-    });
-  }
-
-  private nextState (newState: Partial<State>): void {
-    this.setState((prevState: State): State => {
-      const { api, controllerId, destination, value } = this.props;
-      const { maxBalance = prevState.maxBalance } = newState;
-      const extrinsic = (value && controllerId && destination)
-        ? api.tx.staking.bond(controllerId, value, destination)
-        : null;
-
-      return {
-        extrinsic,
-        maxBalance
-      };
-    });
-  }
-}
-
-export default withMulti(
-  InputBalanceBonded,
-  withApi,
-  withCalls<Props>(
-    'derive.balances.fees',
-    ['derive.balances.all', { paramName: 'stashId' }]
-  )
-);
diff --git a/pioneer/packages/old-apps/react-components/src/InputConsts/SelectKey.tsx b/pioneer/packages/old-apps/react-components/src/InputConsts/SelectKey.tsx
deleted file mode 100644
index 76f844a78d..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputConsts/SelectKey.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { DropdownOptions } from '../util/types';
-import { BareProps } from '../types';
-import { ConstValueBase } from './types';
-
-import React from 'react';
-
-import Dropdown from '../Dropdown';
-import { classes } from '../util';
-
-interface Props extends BareProps {
-  isError?: boolean;
-  onChange: (value: ConstValueBase) => void;
-  options: DropdownOptions;
-  value: ConstValueBase;
-}
-
-function transform ({ value }: Props): (method: string) => ConstValueBase {
-  return (method: string): ConstValueBase => {
-    const section = value.section;
-
-    return {
-      method,
-      section
-    };
-  };
-}
-
-export default function SelectKey (props: Props): React.ReactElement<Props> | null {
-  const { className, isError, onChange, options, style, value } = props;
-
-  if (!options.length) {
-    return null;
-  }
-
-  return (
-    <Dropdown
-      className={classes('ui--DropdownLinked-Items', className)}
-      isError={isError}
-      onChange={onChange}
-      options={options}
-      style={style}
-      transform={transform(props)}
-      value={value.method}
-      withLabel={false}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputConsts/SelectSection.tsx b/pioneer/packages/old-apps/react-components/src/InputConsts/SelectSection.tsx
deleted file mode 100644
index b4a3c42675..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputConsts/SelectSection.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { DropdownOptions } from '../util/types';
-import { BareProps } from '../types';
-import { ConstValueBase, StorageEntryPromise } from './types';
-
-import React from 'react';
-
-import Dropdown from '../Dropdown';
-import { classes } from '../util';
-
-interface Props extends BareProps {
-  defaultValue?: StorageEntryPromise;
-  isError?: boolean;
-  onChange: (value: string) => void;
-  options: DropdownOptions;
-  value: ConstValueBase;
-}
-
-export default function SelectSection ({ className, defaultValue, isError, onChange, options, style, value: { section } }: Props): React.ReactElement<Props> {
-  return (
-    <Dropdown
-      className={classes('ui--DropdownLinked-Sections', className)}
-      defaultValue={defaultValue}
-      isError={isError}
-      onChange={onChange}
-      options={options}
-      style={style}
-      value={section}
-      withLabel={false}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputConsts/index.tsx b/pioneer/packages/old-apps/react-components/src/InputConsts/index.tsx
deleted file mode 100644
index 9eabba472d..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputConsts/index.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { ConstantCodec } from '@polkadot/api-metadata/consts/types';
-import { DropdownOptions } from '../util/types';
-import { I18nProps } from '../types';
-import { ConstValue, ConstValueBase } from './types';
-
-import '../InputExtrinsic/InputExtrinsic.css';
-
-import React, { useContext, useState } from 'react';
-import { ApiPromise } from '@polkadot/api';
-import { ApiContext } from '@polkadot/react-api';
-
-import Labelled from '../Labelled';
-import translate from '../translate';
-import SelectKey from './SelectKey';
-import SelectSection from './SelectSection';
-import keyOptions from './options/key';
-import sectionOptions from './options/section';
-
-interface Props extends I18nProps {
-  defaultValue: ConstValueBase;
-  help?: React.ReactNode;
-  isError?: boolean;
-  label: React.ReactNode;
-  onChange?: (value: ConstValue) => void;
-  withLabel?: boolean;
-}
-
-function getValue (api: ApiPromise, { method, section }: ConstValueBase): ConstValue {
-  const firstSec = Object.keys(api.consts)[0];
-  const firstMet = Object.keys(api.consts[firstSec])[0];
-  const value = (api.consts[section] && api.consts[section][method])
-    ? { method, section }
-    : { method: firstMet, section: firstSec };
-
-  return {
-    ...value,
-    meta: (api.consts[value.section][value.method] as ConstantCodec).meta
-  };
-}
-
-function InputConsts ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
-  const { api } = useContext(ApiContext);
-  const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(keyOptions(api, defaultValue.section));
-  const [optionsSection] = useState<DropdownOptions>(sectionOptions(api));
-  const [value, setValue] = useState<ConstValue>(getValue(api, defaultValue));
-
-  const _onKeyChange = (newValue: ConstValueBase): void => {
-    if (value.section === newValue.section && value.method === newValue.method) {
-      return;
-    }
-
-    const { method, section } = newValue;
-    const meta = (api.consts[section][method] as ConstantCodec).meta;
-    const updated = { meta, method, section };
-
-    setValue(updated);
-    onChange && onChange(updated);
-  };
-  const _onSectionChange = (section: string): void => {
-    if (section === value.section) {
-      return;
-    }
-
-    const optionsMethod = keyOptions(api, section);
-
-    setOptionsMethod(optionsMethod);
-    _onKeyChange({ method: optionsMethod[0].value, section });
-  };
-
-  return (
-    <div
-      className={className}
-      style={style}
-    >
-      <Labelled
-        help={help}
-        label={label}
-        withLabel={withLabel}
-      >
-        <div className=' ui--DropdownLinked ui--row'>
-          <SelectSection
-            className='small'
-            onChange={_onSectionChange}
-            options={optionsSection}
-            value={value}
-          />
-          <SelectKey
-            className='large'
-            onChange={_onKeyChange}
-            options={optionsMethod}
-            value={value}
-          />
-        </div>
-      </Labelled>
-    </div>
-  );
-}
-
-export default translate(InputConsts);
diff --git a/pioneer/packages/old-apps/react-components/src/InputConsts/options/key.tsx b/pioneer/packages/old-apps/react-components/src/InputConsts/options/key.tsx
deleted file mode 100644
index 1f9d6302a8..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputConsts/options/key.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { ConstantCodec } from '@polkadot/api-metadata/consts/types';
-import { DropdownOptions, DropdownOption } from '../../util/types';
-
-import React from 'react';
-import ApiPromise from '@polkadot/api/promise';
-
-export default function createOptions (api: ApiPromise, sectionName: string): DropdownOptions {
-  const section = api.consts[sectionName];
-
-  if (!section || Object.keys(section).length === 0) {
-    return [];
-  }
-
-  return Object
-    .keys(section)
-    .sort()
-    .map((value): DropdownOption => {
-      const method = (section[value] as ConstantCodec);
-
-      return {
-        className: 'ui--DropdownLinked-Item',
-        key: `${sectionName}_${value}`,
-        text: [
-          <div
-            className='ui--DropdownLinked-Item-call'
-            key={`${sectionName}_${value}:call`}
-          >
-            {value}: {method.meta.type.toString()}
-          </div>,
-          <div
-            className='ui--DropdownLinked-Item-text'
-            key={`${sectionName}_${value}:text`}
-          >
-            {(method.meta.documentation[0] || method.meta.name).toString()}
-          </div>
-        ],
-        value
-      };
-    });
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputConsts/options/section.ts b/pioneer/packages/old-apps/react-components/src/InputConsts/options/section.ts
deleted file mode 100644
index 981376877c..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputConsts/options/section.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { DropdownOptions } from '../../util/types';
-
-import ApiPromise from '@polkadot/api/promise';
-
-export default function createOptions (api: ApiPromise): DropdownOptions {
-  return Object
-    .keys(api.consts)
-    .sort()
-    .filter((name): number => Object.keys(api.consts[name]).length)
-    .map((name): { text: string; value: string } => ({
-      text: name,
-      value: name
-    }));
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputConsts/types.ts b/pioneer/packages/old-apps/react-components/src/InputConsts/types.ts
deleted file mode 100644
index 96c9cdd9bd..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputConsts/types.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { StorageEntryBase } from '@polkadot/api/types';
-import { ModuleConstantMetadataV7 } from '@polkadot/types/interfaces';
-
-export type StorageEntryPromise = StorageEntryBase<'promise', any>;
-
-export interface ConstValueBase {
-  method: string;
-  section: string;
-}
-
-export interface ConstValue extends ConstValueBase {
-  meta: ModuleConstantMetadataV7;
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputError.tsx b/pioneer/packages/old-apps/react-components/src/InputError.tsx
deleted file mode 100644
index 287aaf9d88..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputError.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import React from 'react';
-import Label from 'semantic-ui-react/dist/commonjs/elements/Label/Label';
-
-import { classes } from './util';
-
-interface Props extends BareProps {
-  label?: React.ReactNode;
-}
-
-const defaultLabel: React.ReactNode = (
-  <div>&nbsp;</div>
-);
-
-export default function InputError ({ className, label = defaultLabel, style }: Props): React.ReactElement<Props> {
-  return (
-    <div
-      className={classes('ui--InputError', className)}
-      style={style}
-    >
-      <Label color='red' pointing='left'>{label}</Label>
-    </div>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputExtrinsic/InputExtrinsic.css b/pioneer/packages/old-apps/react-components/src/InputExtrinsic/InputExtrinsic.css
deleted file mode 100644
index 489f95a18c..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputExtrinsic/InputExtrinsic.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/* Copyright 2017-2019 @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. */
-
-.ui--DropdownLinked-Items {
-  .text {
-    box-sizing: border-box;
-    display: flex !important;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    overflow: hidden;
-    position: relative;
-    width: 100%;
-    white-space: nowrap;
-  }
-
-  > .text {
-    padding-left: 1em;
-  }
-}
-
-.ui--DropdownLinked-Item-text,
-.ui--DropdownLinked-Item-call {
-  display: inline-block;
-}
-
-.ui--DropdownLinked-Item-call {
-  flex: 1 0;
-  margin-right: 1rem;
-  text-align: left;
-  text-overflow: ellipsis;
-}
-
-.ui--DropdownLinked-Item-text {
-  flex: 1;
-  opacity: 0.5;
-  overflow: hidden;
-  text-align: right;
-  text-overflow: ellipsis;
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputExtrinsic/SelectMethod.tsx b/pioneer/packages/old-apps/react-components/src/InputExtrinsic/SelectMethod.tsx
deleted file mode 100644
index ae28ab8980..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputExtrinsic/SelectMethod.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { CallFunction } from '@polkadot/types/types';
-import { BareProps } from '../types';
-import { DropdownOptions } from '../util/types';
-
-import React from 'react';
-import ApiPromise from '@polkadot/api/promise';
-
-import Dropdown from '../Dropdown';
-import { classes } from '../util';
-
-interface Props extends BareProps {
-  api: ApiPromise;
-  isError?: boolean;
-  onChange: (value: CallFunction) => void;
-  options: DropdownOptions;
-  value: CallFunction;
-}
-
-function transform ({ api, value }: Props): (method: string) => CallFunction {
-  return (method: string): CallFunction => {
-    return api.tx[value.section][method];
-  };
-}
-
-export default function SelectMethod (props: Props): React.ReactElement<Props> | null {
-  const { className, isError, onChange, options, style, value } = props;
-  if (!options.length) {
-    return null;
-  }
-
-  return (
-    <Dropdown
-      className={classes('ui--DropdownLinked-Items', className)}
-      isError={isError}
-      onChange={onChange}
-      options={options}
-      style={style}
-      transform={transform(props)}
-      value={value.method}
-      withLabel={false}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputExtrinsic/SelectSection.tsx b/pioneer/packages/old-apps/react-components/src/InputExtrinsic/SelectSection.tsx
deleted file mode 100644
index 90d5931bba..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputExtrinsic/SelectSection.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { CallFunction } from '@polkadot/types/types';
-import { BareProps } from '../types';
-import { DropdownOptions } from '../util/types';
-
-import React from 'react';
-
-import Dropdown from '../Dropdown';
-import { classes } from '../util';
-
-interface Props extends BareProps {
-  defaultValue?: string;
-  isError?: boolean;
-  onChange: (value: string) => void;
-  options: DropdownOptions;
-  value: CallFunction;
-}
-
-export default function SelectSection ({ className, defaultValue, isError, onChange, options, style, value }: Props): React.ReactElement<Props> {
-  return (
-    <Dropdown
-      className={classes('ui--DropdownLinked-Sections', className)}
-      defaultValue={defaultValue}
-      isError={isError}
-      onChange={onChange}
-      options={options}
-      style={style}
-      value={value.section}
-      withLabel={false}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputExtrinsic/index.tsx b/pioneer/packages/old-apps/react-components/src/InputExtrinsic/index.tsx
deleted file mode 100644
index fe17e00cef..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputExtrinsic/index.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { CallFunction } from '@polkadot/types/types';
-import { I18nProps } from '../types';
-import { DropdownOptions } from '../util/types';
-
-import './InputExtrinsic.css';
-
-import React, { useContext, useState } from 'react';
-import { ApiContext } from '@polkadot/react-api';
-
-import Labelled from '../Labelled';
-import translate from '../translate';
-import SelectMethod from './SelectMethod';
-import SelectSection from './SelectSection';
-import methodOptions from './options/method';
-import sectionOptions from './options/section';
-
-interface Props extends I18nProps {
-  defaultValue: CallFunction;
-  help?: React.ReactNode;
-  isDisabled?: boolean;
-  isError?: boolean;
-  isPrivate?: boolean;
-  label: React.ReactNode;
-  onChange: (value: CallFunction) => void;
-  withLabel?: boolean;
-}
-
-function InputExtrinsic ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
-  const { api } = useContext(ApiContext);
-  const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(methodOptions(api, defaultValue.section));
-  const [optionsSection] = useState<DropdownOptions>(sectionOptions(api));
-  const [value, setValue] = useState<CallFunction>((): CallFunction => defaultValue);
-
-  const _onKeyChange = (newValue: CallFunction): void => {
-    if (value.section === newValue.section && value.method === newValue.method) {
-      return;
-    }
-
-    // set this via callback, since the we are setting a function (aletrnatively... we have issues)
-    setValue((): CallFunction => newValue);
-    onChange(newValue);
-  };
-  const _onSectionChange = (section: string): void => {
-    if (section === value.section) {
-      return;
-    }
-
-    const optionsMethod = methodOptions(api, section);
-
-    setOptionsMethod(optionsMethod);
-    _onKeyChange(api.tx[section][optionsMethod[0].value]);
-  };
-
-  return (
-    <div
-      className={className}
-      style={style}
-    >
-      <Labelled
-        help={help}
-        label={label}
-        withLabel={withLabel}
-      >
-        <div className=' ui--DropdownLinked ui--row'>
-          <SelectSection
-            className='small'
-            onChange={_onSectionChange}
-            options={optionsSection}
-            value={value}
-          />
-          <SelectMethod
-            api={api}
-            className='large'
-            onChange={_onKeyChange}
-            options={optionsMethod}
-            value={value}
-          />
-        </div>
-      </Labelled>
-    </div>
-  );
-}
-
-export default translate(InputExtrinsic);
diff --git a/pioneer/packages/old-apps/react-components/src/InputExtrinsic/options/method.tsx b/pioneer/packages/old-apps/react-components/src/InputExtrinsic/options/method.tsx
deleted file mode 100644
index 53b51af8bf..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputExtrinsic/options/method.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { DropdownOption, DropdownOptions } from '../../util/types';
-
-import React from 'react';
-import ApiPromise from '@polkadot/api/promise';
-
-export default function createOptions (api: ApiPromise, sectionName: string): DropdownOptions {
-  const section = api.tx[sectionName];
-
-  if (!section || Object.keys(section).length === 0) {
-    return [];
-  }
-
-  return Object
-    .keys(section)
-    .sort()
-    .map((value): DropdownOption => {
-      const method = section[value];
-      const inputs = method.meta.args
-        .filter((arg): boolean => arg.type.toString() !== 'Origin')
-        .map((arg): string => arg.name.toString())
-        .join(', ');
-
-      return {
-        className: 'ui--DropdownLinked-Item',
-        key: `${sectionName}_${value}`,
-        text: [
-          <div
-            className='ui--DropdownLinked-Item-call'
-            key={`${sectionName}_${value}:call`}
-          >
-            {value}({inputs})
-          </div>,
-          <div
-            className='ui--DropdownLinked-Item-text'
-            key={`${sectionName}_${value}:text`}
-          >
-            {(method.meta.documentation[0] || value).toString()}
-          </div>
-        ],
-        value
-      };
-    });
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputExtrinsic/options/section.ts b/pioneer/packages/old-apps/react-components/src/InputExtrinsic/options/section.ts
deleted file mode 100644
index 5fb637e1bc..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputExtrinsic/options/section.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { DropdownOptions } from '../../util/types';
-
-import ApiPromise from '@polkadot/api/promise';
-
-export default function createOptions (api: ApiPromise): DropdownOptions {
-  return Object
-    .keys(api.tx)
-    .sort()
-    .filter((name): number => Object.keys(api.tx[name]).length)
-    .map((name): { text: string; value: string } => ({
-      text: name,
-      value: name
-    }));
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputFile.tsx b/pioneer/packages/old-apps/react-components/src/InputFile.tsx
deleted file mode 100644
index 98381b4525..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputFile.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { WithTranslation } from 'react-i18next';
-import { BareProps } from './types';
-
-import React, { useState, createRef } from 'react';
-import Dropzone, { DropzoneRef } from 'react-dropzone';
-import styled from 'styled-components';
-import { formatNumber, isHex, u8aToString, hexToU8a } from '@polkadot/util';
-
-import { classes } from './util';
-import Labelled from './Labelled';
-import translate from './translate';
-
-interface Props extends BareProps, WithTranslation {
-  // Reference Example Usage: https://github.com/react-dropzone/react-dropzone/tree/master/examples/Accept
-  // i.e. MIME types: 'application/json, text/plain', or '.json, .txt'
-  accept?: string;
-  clearContent?: boolean;
-  convertHex?: boolean;
-  help?: React.ReactNode;
-  isDisabled?: boolean;
-  isError?: boolean;
-  label: React.ReactNode;
-  onChange?: (contents: Uint8Array, name: string) => void;
-  placeholder?: React.ReactNode | null;
-  withEllipsis?: boolean;
-  withLabel?: boolean;
-}
-
-interface FileState {
-  name: string;
-  size: number;
-}
-
-const BYTE_STR_0 = '0'.charCodeAt(0);
-const BYTE_STR_X = 'x'.charCodeAt(0);
-const NOOP = (): void => { /* do nothing */ };
-
-function convertResult (result: ArrayBuffer, convertHex?: boolean): Uint8Array {
-  const data = new Uint8Array(result);
-
-  // this converts the input (if detected as hex), vai the hex conversion route
-  if (convertHex && data[0] === BYTE_STR_0 && data[1] === BYTE_STR_X) {
-    const hex = u8aToString(data);
-
-    if (isHex(hex)) {
-      return hexToU8a(hex);
-    }
-  }
-
-  return data;
-}
-
-function InputFile ({ accept, className, clearContent, convertHex, help, isDisabled, isError = false, label, onChange, placeholder, t, withEllipsis, withLabel }: Props): React.ReactElement<Props> {
-  const dropRef = createRef<DropzoneRef>();
-  const [file, setFile] = useState<FileState | undefined>();
-
-  const _onDrop = (files: File[]): void => {
-    files.forEach((file): void => {
-      const reader = new FileReader();
-
-      reader.onabort = NOOP;
-      reader.onerror = NOOP;
-
-      reader.onload = ({ target }: ProgressEvent<FileReader>): void => {
-        if (target && target.result) {
-          const name = file.name;
-          const data = convertResult(target.result as ArrayBuffer, convertHex);
-
-          onChange && onChange(data, name);
-          dropRef && setFile({
-            name,
-            size: data.length
-          });
-        }
-      };
-
-      reader.readAsArrayBuffer(file);
-    });
-  };
-
-  const dropZone = (
-    <Dropzone
-      accept={accept}
-      disabled={isDisabled}
-      multiple={false}
-      ref={dropRef}
-      onDrop={_onDrop}
-    >
-      {({ getRootProps, getInputProps }): JSX.Element => (
-        <div {...getRootProps({ className: classes('ui--InputFile', isError ? 'error' : '', className) })} >
-          <input {...getInputProps()} />
-          <em className='label' >
-            {
-              !file || clearContent
-                ? placeholder || t('click to select or drag and drop the file here')
-                : placeholder || t('{{name}} ({{size}} bytes)', {
-                  replace: {
-                    name: file.name,
-                    size: formatNumber(file.size)
-                  }
-                })
-            }
-          </em>
-        </div>
-      )}
-    </Dropzone>
-  );
-
-  return label
-    ? (
-      <Labelled
-        help={help}
-        label={label}
-        withEllipsis={withEllipsis}
-        withLabel={withLabel}
-      >
-        {dropZone}
-      </Labelled>
-    )
-    : dropZone;
-}
-
-export default translate(
-  styled(InputFile)`
-    background: #fff;
-    border: 1px solid rgba(34, 36, 38, 0.15);
-    border-radius: 0.28571429rem;
-    font-size: 1rem;
-    margin: 0.25rem 0;
-    padding: 1rem;
-    width: 100% !important;
-
-    &.error {
-      background: #fff6f6;
-      border-color: #e0b4b4;
-    }
-
-    &:hover {
-      background: #fefefe;
-      cursor: pointer;
-    }
-
-    .label {
-      color: rgba(0, 0, 0, .6);
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/react-components/src/InputNumber.tsx b/pioneer/packages/old-apps/react-components/src/InputNumber.tsx
deleted file mode 100644
index 40883bcaa3..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputNumber.tsx
+++ /dev/null
@@ -1,353 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps, BitLength, I18nProps } from './types';
-
-import BN from 'bn.js';
-import React from 'react';
-import { formatBalance, isUndefined } from '@polkadot/util';
-
-import { classes } from './util';
-import { BitLengthOption } from './constants';
-import Button from './Button';
-import Dropdown from './Dropdown';
-import Input, { KEYS, KEYS_PRE } from './Input';
-import translate from './translate';
-
-const ALLOW_MAX = false;
-
-interface Props extends BareProps, I18nProps {
-  autoFocus?: boolean;
-  bitLength?: BitLength;
-  defaultValue?: BN | string;
-  help?: React.ReactNode;
-  isDisabled?: boolean;
-  isError?: boolean;
-  isSi?: boolean;
-  isDecimal?: boolean;
-  label?: React.ReactNode;
-  labelExtra?: React.ReactNode;
-  maxLength?: number;
-  maxValue?: BN;
-  onChange?: (value?: BN) => void;
-  onEnter?: () => void;
-  placeholder?: string;
-  value?: BN | string;
-  withEllipsis?: boolean;
-  withLabel?: boolean;
-  withMax?: boolean;
-}
-
-interface State {
-  isPreKeyDown: boolean;
-  isValid: boolean;
-  siOptions: { value: string; text: string }[];
-  siUnit: string;
-  value: string;
-  valueBN: BN;
-}
-
-const DEFAULT_BITLENGTH = BitLengthOption.NORMAL_NUMBERS as BitLength;
-const ZERO = new BN(0);
-const TEN = new BN(10);
-
-class InputNumber extends React.PureComponent<Props, State> {
-  constructor (props: Props) {
-    super(props);
-
-    const { defaultValue, isSi, value } = this.props;
-    const valueBN = new BN(value || 0);
-    const si = formatBalance.findSi('-');
-
-    this.state = {
-      value: isSi
-        ? new BN(defaultValue || valueBN).div(new BN(10).pow(new BN(si.power))).toString()
-        : (defaultValue || valueBN).toString(),
-      isPreKeyDown: false,
-      isValid: !isUndefined(value),
-      siOptions: formatBalance.getOptions().map(({ power, text, value }): { text: string; value: string } => ({
-        value,
-        text: power === 0
-          ? InputNumber.units
-          : text
-      })),
-      siUnit: si.value,
-      valueBN
-    };
-  }
-
-  public static units = 'Unit';
-
-  public static setUnit (units: string = InputNumber.units): void {
-    InputNumber.units = units;
-  }
-
-  public static getDerivedStateFromProps ({ isDisabled, isSi, defaultValue = '0' }: Props): Partial<State> | null {
-    if (!isDisabled || !isSi) {
-      return null;
-    }
-
-    return {
-      value: formatBalance(defaultValue, false),
-      siUnit: formatBalance.calcSi(defaultValue.toString(), formatBalance.getDefaults().decimals).value
-    };
-  }
-
-  public render (): React.ReactNode {
-    const { bitLength = DEFAULT_BITLENGTH, className, help, isSi, isDisabled, isError = false, maxLength, maxValue, onEnter, placeholder, style, withMax, t } = this.props;
-    const { isValid, value } = this.state;
-    const maxValueLength = this.maxValue(bitLength).toString().length - 1;
-
-    return (
-      <Input
-        {...this.props}
-        className={classes('ui--InputNumber', className)}
-        help={help}
-        isAction={isSi}
-        isDisabled={isDisabled}
-        isError={!isValid || isError}
-        maxLength={maxLength || maxValueLength}
-        onChange={this.onChange}
-        onEnter={onEnter}
-        onKeyDown={this.onKeyDown}
-        onKeyUp={this.onKeyUp}
-        onPaste={this.onPaste}
-        placeholder={placeholder || t('Positive number')}
-        style={style}
-        type='text'
-        value={value}
-      >
-        {(ALLOW_MAX && withMax && !!maxValue) && this.renderMaxButton()}
-        {isSi && this.renderSiDropdown()}
-      </Input>
-    );
-  }
-
-  private renderSiDropdown (): React.ReactNode {
-    const { siOptions, siUnit } = this.state;
-
-    return (
-      <Dropdown
-        /* isPrimary={false} */
-        dropdownClassName='ui--SiDropdown'
-        isButton
-        defaultValue={siUnit}
-        onChange={this.selectSiUnit}
-        options={siOptions}
-      />
-    );
-  }
-
-  private renderMaxButton (): React.ReactNode {
-    const { valueBN } = this.state;
-    const { maxValue } = this.props;
-
-    if (!maxValue || valueBN.eq(maxValue)) {
-      return;
-    }
-
-    return (
-      <Button
-        className='ui--MaxButton'
-        icon=''
-        onClick={this.setToMaxValue}
-      >
-        Max
-      </Button>
-    );
-  }
-
-  private maxValue (bitLength?: number): BN {
-    return new BN(2).pow(new BN(bitLength || DEFAULT_BITLENGTH)).subn(1);
-  }
-
-  private isValidBitLength (value: BN, bitLength?: number): boolean {
-    return value.bitLength() <= (bitLength || DEFAULT_BITLENGTH);
-  }
-
-  private isValidNumber (input: BN, bitLength: number = DEFAULT_BITLENGTH): boolean {
-    const { maxValue, withMax } = this.props;
-    const maxBN = this.maxValue(bitLength);
-
-    if (
-      input.lt(new BN(0)) ||
-      !input.lt(maxBN) ||
-      !this.isValidBitLength(input, bitLength) ||
-      (withMax && maxValue !== undefined && maxValue.gtn(0) && input.gt(maxValue))
-    ) {
-      return false;
-    }
-
-    return true;
-  }
-
-  private regex = (): RegExp => {
-    const { isDecimal, isSi } = this.props;
-    return new RegExp(
-      (isSi || isDecimal)
-        ? `^(0|[1-9]\\d*)(\\${KEYS.DECIMAL}\\d*)?$`
-        : '^(0|[1-9]\\d*)$'
-    );
-  }
-
-  private onChange = (value: string): void => {
-    const { bitLength, onChange } = this.props;
-    const { siUnit } = this.state;
-
-    try {
-      const valueBN = this.inputValueToBn(value, siUnit);
-      const isValid = this.isValidNumber(valueBN, bitLength);
-
-      this.setState({ isValid, value, valueBN });
-
-      onChange && onChange(
-        isValid
-          ? valueBN
-          : undefined
-      );
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
-  private onKeyDown = (event: React.KeyboardEvent<Element>): void => {
-    const { isPreKeyDown } = this.state;
-
-    if (KEYS_PRE.includes(event.key)) {
-      this.setState({ isPreKeyDown: true });
-      return;
-    }
-
-    if (event.key.length === 1 && !isPreKeyDown) {
-      const { selectionStart: i, selectionEnd: j, value } = event.target as HTMLInputElement;
-      const newValue = `${value.substring(0, i || 0)}${event.key}${value.substring(j || 0)}`;
-
-      if (!this.regex().test(newValue)) {
-        event.preventDefault();
-      }
-    }
-  }
-
-  private onKeyUp = (event: React.KeyboardEvent<Element>): void => {
-    if (KEYS_PRE.includes(event.key)) {
-      this.setState({ isPreKeyDown: false });
-    }
-  }
-
-  private onPaste = (event: React.ClipboardEvent<Element>): void => {
-    const { value: newValue } = event.target as HTMLInputElement;
-
-    if (!this.regex().test(newValue)) {
-      event.preventDefault();
-    }
-  }
-
-  private selectSiUnit = (siUnit: string): void => {
-    this.setState((prevState: State): Pick<State, never> => {
-      const { bitLength, onChange } = this.props;
-      const valueBN = this.inputValueToBn(prevState.value, siUnit);
-      const isValid = this.isValidNumber(valueBN, bitLength);
-
-      onChange && onChange(
-        isValid
-          ? prevState.valueBN
-          : undefined
-      );
-
-      return {
-        isValid,
-        siUnit,
-        valueBN
-      };
-    });
-  }
-
-  private setToMaxValue = (): void => {
-    this.setState((prevState: State): Pick<State, never> => {
-      const { bitLength, maxValue, onChange } = this.props;
-      const { siUnit = prevState.siUnit } = this.state;
-
-      if (!maxValue) {
-        return {};
-      }
-
-      const isValid = this.isValidNumber(maxValue, bitLength);
-
-      onChange && onChange(
-        isValid
-          ? maxValue
-          : undefined
-      );
-
-      return {
-        value: this.bnToInputValue(maxValue, siUnit),
-        valueBN: maxValue,
-        isValid
-      };
-    });
-  }
-
-  private inputValueToBn = (value: string, siUnit?: string): BN => {
-    const [siPower, basePower, siUnitPower] = this.getSiPowers(siUnit);
-
-    // eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
-    const isDecimalValue = value.match(/^(\d+)\.(\d+)$/);
-
-    if (isDecimalValue) {
-      if (siUnitPower - isDecimalValue[2].length < -basePower) {
-        return new BN(-1);
-      }
-
-      const div = new BN(value.replace(/\.\d*$/, ''));
-      const modString = value.replace(/^\d+\./, '');
-      const mod = new BN(modString);
-
-      return div
-        .mul(TEN.pow(siPower))
-        .add(mod.mul(TEN.pow(new BN(basePower + siUnitPower - modString.length))));
-    } else {
-      return new BN(value.replace(/[^\d]/g, ''))
-        .mul(TEN.pow(siPower));
-    }
-  }
-
-  private bnToInputValue = (bn: BN, siUnit?: string): string => {
-    const [siPower] = this.getSiPowers(siUnit);
-
-    const base = TEN.pow(siPower);
-    const div = bn.div(base);
-    const mod = bn.mod(base);
-
-    return `${
-      div.gt(ZERO) ? div.toString() : '0'
-    }${
-      mod.gt(ZERO)
-        ? ((): string => {
-          const padding = Math.max(
-            mod.toString().length,
-            base.toString().length - div.toString().length,
-            bn.toString().length - div.toString().length
-          );
-
-          return `.${mod.toString(10, padding).replace(/0*$/, '')}`;
-        })()
-        : ''
-    }`;
-  }
-
-  private getSiPowers = (siUnit = this.state.siUnit): [BN, number, number] => {
-    const { isSi } = this.props;
-
-    const basePower = isSi ? formatBalance.getDefaults().decimals : 0;
-    const siUnitPower = isSi ? formatBalance.findSi(siUnit).power : 0;
-
-    return [new BN(basePower + siUnitPower), basePower, siUnitPower];
-  }
-}
-
-export {
-  InputNumber
-};
-
-export default translate(InputNumber);
diff --git a/pioneer/packages/old-apps/react-components/src/InputRpc/SelectMethod.tsx b/pioneer/packages/old-apps/react-components/src/InputRpc/SelectMethod.tsx
deleted file mode 100644
index 27b2fb4e66..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputRpc/SelectMethod.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { RpcMethod } from '@polkadot/jsonrpc/types';
-import { DropdownOptions } from '../util/types';
-import { BareProps } from '../types';
-
-import React from 'react';
-
-import map from '@polkadot/jsonrpc';
-
-import Dropdown from '../Dropdown';
-import { classes } from '../util';
-
-interface Props extends BareProps {
-  isError?: boolean;
-  onChange: (value: RpcMethod) => void;
-  options: DropdownOptions;
-  value: RpcMethod;
-}
-
-function transform ({ value }: Props): (method: string) => RpcMethod {
-  return function (method: string): RpcMethod {
-    return map[value.section].methods[method];
-  };
-}
-
-export default function SelectMethod (props: Props): React.ReactElement<Props> | null {
-  const { className, isError, onChange, options, style, value } = props;
-
-  if (!options.length) {
-    return null;
-  }
-
-  return (
-    <Dropdown
-      className={classes('ui--DropdownLinked-Items', className)}
-      isError={isError}
-      onChange={onChange}
-      options={options}
-      style={style}
-      transform={transform(props)}
-      value={value.method}
-      withLabel={false}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputRpc/SelectSection.tsx b/pioneer/packages/old-apps/react-components/src/InputRpc/SelectSection.tsx
deleted file mode 100644
index 68fde3e09a..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputRpc/SelectSection.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { RpcMethod } from '@polkadot/jsonrpc/types';
-import { DropdownOptions } from '../util/types';
-import { BareProps } from '../types';
-
-import React from 'react';
-
-import Dropdown from '../Dropdown';
-import { classes } from '../util';
-
-interface Props extends BareProps {
-  defaultValue?: string;
-  isError?: boolean;
-  onChange: (value: string) => void;
-  options: DropdownOptions;
-  value: RpcMethod;
-}
-
-export default function SelectSection ({ className, defaultValue, isError, onChange, options, style, value }: Props): React.ReactElement<Props> {
-  return (
-    <Dropdown
-      className={classes('ui--DropdownLinked-Sections', className)}
-      defaultValue={defaultValue}
-      isError={isError}
-      onChange={onChange}
-      options={options}
-      style={style}
-      value={value.section}
-      withLabel={false}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputRpc/index.tsx b/pioneer/packages/old-apps/react-components/src/InputRpc/index.tsx
deleted file mode 100644
index bbace3b9a0..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputRpc/index.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-// Copyright 2017-2019 @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.
-
-// TODO: We have a lot shared between this and InputExtrinsic & InputStorage
-
-import { RpcMethod } from '@polkadot/jsonrpc/types';
-import { DropdownOptions } from '../util/types';
-import { I18nProps } from '../types';
-
-import '../InputExtrinsic/InputExtrinsic.css';
-
-import React, { useContext, useState } from 'react';
-import map from '@polkadot/jsonrpc';
-import { ApiContext } from '@polkadot/react-api';
-
-import Labelled from '../Labelled';
-import translate from '../translate';
-import SelectMethod from './SelectMethod';
-import SelectSection from './SelectSection';
-import methodOptions from './options/method';
-import sectionOptions from './options/section';
-
-interface Props extends I18nProps {
-  defaultValue: RpcMethod;
-  help?: React.ReactNode;
-  isError?: boolean;
-  label: React.ReactNode;
-  onChange?: (value: RpcMethod) => void;
-  withLabel?: boolean;
-}
-
-function InputRpc ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
-  const { api } = useContext(ApiContext);
-  const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(methodOptions(api, defaultValue.section));
-  const [optionsSection] = useState<DropdownOptions>(sectionOptions(api));
-  const [value, setValue] = useState<RpcMethod>((): RpcMethod => defaultValue);
-
-  const _onMethodChange = (newValue: RpcMethod): void => {
-    if (value.section === newValue.section && value.method === newValue.method) {
-      return;
-    }
-
-    // set via callback since the method is a function itself
-    setValue((): RpcMethod => newValue);
-    onChange && onChange(newValue);
-  };
-  const _onSectionChange = (section: string): void => {
-    if (section === value.section) {
-      return;
-    }
-
-    const optionsMethod = methodOptions(api, section);
-
-    setOptionsMethod(optionsMethod);
-    _onMethodChange(map[section].methods[optionsMethod[0].value]);
-  };
-
-  return (
-    <div
-      className={className}
-      style={style}
-    >
-      <Labelled
-        help={help}
-        label={label}
-        withLabel={withLabel}
-      >
-        <div className=' ui--DropdownLinked ui--row'>
-          <SelectSection
-            className='small'
-            onChange={_onSectionChange}
-            options={optionsSection}
-            value={value}
-          />
-          <SelectMethod
-            className='large'
-            onChange={_onMethodChange}
-            options={optionsMethod}
-            value={value}
-          />
-        </div>
-      </Labelled>
-    </div>
-  );
-}
-
-export default translate(InputRpc);
diff --git a/pioneer/packages/old-apps/react-components/src/InputRpc/options/method.tsx b/pioneer/packages/old-apps/react-components/src/InputRpc/options/method.tsx
deleted file mode 100644
index 7ef4630c7c..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputRpc/options/method.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { DropdownOption, DropdownOptions } from '../../util/types';
-
-import React from 'react';
-import ApiPromise from '@polkadot/api/promise';
-import map from '@polkadot/jsonrpc';
-
-export default function createOptions (api: ApiPromise, sectionName: string): DropdownOptions {
-  const section = map[sectionName];
-
-  if (!section || Object.keys((api.rpc as any)[sectionName]).length === 0) {
-    return [];
-  }
-
-  return Object
-    .keys((api.rpc as any)[sectionName])
-    .sort()
-    .filter((value): boolean => {
-      const { isDeprecated, isHidden, isSubscription } = section.methods[value];
-
-      return !isDeprecated && !isHidden && !isSubscription;
-    })
-    .map((value): DropdownOption => {
-      const { description, params } = section.methods[value];
-      const inputs = params.map(({ name }): string => name).join(', ');
-
-      return {
-        className: 'ui--DropdownLinked-Item',
-        key: `${sectionName}_${value}`,
-        text: [
-          <div
-            className='ui--DropdownLinked-Item-call'
-            key={`${sectionName}_${value}:call`}
-          >
-            {value}({inputs})
-          </div>,
-          <div
-            className='ui--DropdownLinked-Item-text'
-            key={`${sectionName}_${value}:text`}
-          >
-            {description || value}
-          </div>
-        ],
-        value
-      };
-    });
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputRpc/options/section.ts b/pioneer/packages/old-apps/react-components/src/InputRpc/options/section.ts
deleted file mode 100644
index 417e21ae5c..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputRpc/options/section.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { DropdownOptions } from '../../util/types';
-
-import ApiPromise from '@polkadot/api/promise';
-
-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)
-    .map((name): { text: string; value: string } => ({
-      text: name,
-      value: name
-    }));
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputStorage/SelectKey.tsx b/pioneer/packages/old-apps/react-components/src/InputStorage/SelectKey.tsx
deleted file mode 100644
index 9cebedb87d..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputStorage/SelectKey.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { DropdownOptions } from '../util/types';
-import { BareProps } from '../types';
-import { StorageEntryPromise } from './types';
-
-import React, { useContext } from 'react';
-import { ApiPromise } from '@polkadot/api';
-import { ApiContext } from '@polkadot/react-api';
-
-import Dropdown from '../Dropdown';
-import { classes } from '../util';
-
-interface Props extends BareProps {
-  isError?: boolean;
-  onChange: (value: StorageEntryPromise) => void;
-  options: DropdownOptions;
-  value: StorageEntryPromise;
-}
-
-function transform (api: ApiPromise, { value }: Props): (method: string) => StorageEntryPromise {
-  return function (method: string): StorageEntryPromise {
-    return api.query[value.creator.section]
-      ? api.query[value.creator.section][method]
-      : value;
-  };
-}
-
-export default function SelectKey (props: Props): React.ReactElement<Props> | null {
-  const { api } = useContext(ApiContext);
-  const { className, isError, onChange, options, style, value } = props;
-
-  if (!options.length) {
-    return null;
-  }
-
-  return (
-    <Dropdown
-      className={classes('ui--DropdownLinked-Items', className)}
-      isError={isError}
-      onChange={onChange}
-      options={options}
-      style={style}
-      transform={transform(api, props)}
-      value={value.creator.method}
-      withLabel={false}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputStorage/SelectSection.tsx b/pioneer/packages/old-apps/react-components/src/InputStorage/SelectSection.tsx
deleted file mode 100644
index 6578e0d86e..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputStorage/SelectSection.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { DropdownOptions } from '../util/types';
-import { BareProps } from '../types';
-import { StorageEntryPromise } from './types';
-
-import React from 'react';
-
-import Dropdown from '../Dropdown';
-import { classes } from '../util';
-
-interface Props extends BareProps {
-  defaultValue?: StorageEntryPromise;
-  isError?: boolean;
-  onChange: (value: string) => void;
-  options: DropdownOptions;
-  value: StorageEntryPromise;
-}
-
-export default function SelectSection ({ className, defaultValue, isError, onChange, options, style, value: { creator: { section } } }: Props): React.ReactElement<Props> {
-  return (
-    <Dropdown
-      className={classes('ui--DropdownLinked-Sections', className)}
-      defaultValue={defaultValue}
-      isError={isError}
-      onChange={onChange}
-      options={options}
-      style={style}
-      value={section}
-      withLabel={false}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputStorage/index.tsx b/pioneer/packages/old-apps/react-components/src/InputStorage/index.tsx
deleted file mode 100644
index 04bb2669f2..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputStorage/index.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-// Copyright 2017-2019 @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.
-
-// TODO: We have a lot shared between this and InputExtrinsic
-
-import { DropdownOptions } from '../util/types';
-import { I18nProps } from '../types';
-import { StorageEntryPromise } from './types';
-
-import '../InputExtrinsic/InputExtrinsic.css';
-
-import React, { useContext, useState } from 'react';
-import { ApiContext } from '@polkadot/react-api';
-
-import Labelled from '../Labelled';
-import translate from '../translate';
-import SelectKey from './SelectKey';
-import SelectSection from './SelectSection';
-import keyOptions from './options/key';
-import sectionOptions from './options/section';
-
-interface Props extends I18nProps {
-  defaultValue: StorageEntryPromise;
-  help?: React.ReactNode;
-  isError?: boolean;
-  label: React.ReactNode;
-  onChange?: (value: StorageEntryPromise) => void;
-  withLabel?: boolean;
-}
-
-function InputStorage ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
-  const { api } = useContext(ApiContext);
-  const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(keyOptions(api, defaultValue.creator.section));
-  const [optionsSection] = useState<DropdownOptions>(sectionOptions(api));
-  const [value, setValue] = useState<StorageEntryPromise>((): StorageEntryPromise => defaultValue);
-
-  const _onKeyChange = (newValue: StorageEntryPromise): void => {
-    if (value.creator.section === newValue.creator.section && value.creator.method === newValue.creator.method) {
-      return;
-    }
-
-    // set via callback
-    setValue((): StorageEntryPromise => newValue);
-    onChange && onChange(newValue);
-  };
-  const _onSectionChange = (section: string): void => {
-    if (section === value.creator.section) {
-      return;
-    }
-
-    const optionsMethod = keyOptions(api, section);
-
-    setOptionsMethod(optionsMethod);
-    _onKeyChange(api.query[section][optionsMethod[0].value]);
-  };
-
-  return (
-    <div
-      className={className}
-      style={style}
-    >
-      <Labelled
-        help={help}
-        label={label}
-        withLabel={withLabel}
-      >
-        <div className=' ui--DropdownLinked ui--row'>
-          <SelectSection
-            className='small'
-            onChange={_onSectionChange}
-            options={optionsSection}
-            value={value}
-          />
-          <SelectKey
-            className='large'
-            onChange={_onKeyChange}
-            options={optionsMethod}
-            value={value}
-          />
-        </div>
-      </Labelled>
-    </div>
-  );
-}
-
-export default translate(InputStorage);
diff --git a/pioneer/packages/old-apps/react-components/src/InputStorage/options/key.tsx b/pioneer/packages/old-apps/react-components/src/InputStorage/options/key.tsx
deleted file mode 100644
index 07ad690ca8..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputStorage/options/key.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { StorageEntry } from '@polkadot/types/primitive/StorageKey';
-import { DropdownOptions, DropdownOption } from '../../util/types';
-
-import React from 'react';
-import ApiPromise from '@polkadot/api/promise';
-
-export default function createOptions (api: ApiPromise, sectionName: string): DropdownOptions {
-  const section = api.query[sectionName];
-
-  if (!section || Object.keys(section).length === 0) {
-    return [];
-  }
-
-  return Object
-    .keys(section)
-    .sort()
-    .map((value): DropdownOption => {
-      const method = section[value] as unknown as StorageEntry;
-      const type = method.meta.type;
-      let input = '';
-
-      if (type.isMap) {
-        input = type.asMap.key.toString();
-      } else if (type.isDoubleMap) {
-        input = type.asDoubleMap.key1.toString() + ', ' + type.asDoubleMap.key2.toString();
-      }
-
-      let output = type.toString();
-
-      if (type.isDoubleMap) {
-        output = type.asDoubleMap.value.toString();
-      }
-
-      if (method.meta.modifier.isOptional) {
-        output = `Option<${output}>`;
-      }
-
-      return {
-        className: 'ui--DropdownLinked-Item',
-        key: `${sectionName}_${value}`,
-        text: [
-          <div
-            className='ui--DropdownLinked-Item-call'
-            key={`${sectionName}_${value}:call`}
-          >
-            {value}({input}): {output}
-          </div>,
-          <div
-            className='ui--DropdownLinked-Item-text'
-            key={`${sectionName}_${value}:text`}
-          >
-            {(method.meta.documentation[0] || method.meta.name).toString()}
-          </div>
-        ],
-        value
-      };
-    });
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputStorage/options/section.ts b/pioneer/packages/old-apps/react-components/src/InputStorage/options/section.ts
deleted file mode 100644
index 203a6151b9..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputStorage/options/section.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { DropdownOptions } from '../../util/types';
-
-import ApiPromise from '@polkadot/api/promise';
-
-export default function createOptions (api: ApiPromise): DropdownOptions {
-  return Object
-    .keys(api.query)
-    .sort()
-    .filter((name): number => Object.keys(api.query[name]).length)
-    .map((name): { text: string; value: string } => ({
-      text: name,
-      value: name
-    }));
-}
diff --git a/pioneer/packages/old-apps/react-components/src/InputStorage/types.ts b/pioneer/packages/old-apps/react-components/src/InputStorage/types.ts
deleted file mode 100644
index 73cde25979..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputStorage/types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { StorageEntryBase } from '@polkadot/api/types';
-
-export type StorageEntryPromise = StorageEntryBase<'promise', any>;
diff --git a/pioneer/packages/old-apps/react-components/src/InputTags.tsx b/pioneer/packages/old-apps/react-components/src/InputTags.tsx
deleted file mode 100644
index 061b070ce3..0000000000
--- a/pioneer/packages/old-apps/react-components/src/InputTags.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import React from 'react';
-import store from 'store';
-
-import Dropdown from './Dropdown';
-
-interface Option {
-  key: string;
-  text: string;
-  value: string;
-}
-
-interface Props extends BareProps {
-  allowAdd?: boolean;
-  defaultValue?: string[];
-  help?: React.ReactNode;
-  isDisabled?: boolean;
-  isError?: boolean;
-  label?: React.ReactNode;
-  onBlur?: () => void;
-  onChange?: (value: string[]) => void;
-  onClose?: () => void;
-  openOnFocus?: boolean;
-  placeholder?: string;
-  searchInput?: {autoFocus: boolean};
-  value?: string[];
-  withLabel?: boolean;
-}
-
-function loadTags (): string[] {
-  return store.get('tags') || ['Default'];
-}
-
-function valueToOption (value: string): Option {
-  return { key: value, text: value, value };
-}
-
-const tags = loadTags();
-const options = tags.map(valueToOption);
-
-function saveTags (tags: string[]): void {
-  store.set('tags', tags);
-}
-
-function onAddTag (value: string): void {
-  tags.push(value);
-  options.push(valueToOption(value));
-
-  saveTags(tags);
-}
-
-export default function InputTags ({ className, defaultValue, help, isDisabled, isError, label, onBlur, onChange, onClose, placeholder, searchInput, value, withLabel }: Props): React.ReactElement<Props> {
-  return (
-    <Dropdown
-      allowAdd={!isDisabled}
-      className={className}
-      defaultValue={defaultValue}
-      help={help}
-      isDisabled={isDisabled}
-      isError={isError}
-      isMultiple
-      label={label}
-      onAdd={onAddTag}
-      onBlur={onBlur}
-      onChange={onChange}
-      onClose={onClose}
-      options={options}
-      placeholder={placeholder}
-      searchInput={searchInput}
-      value={value}
-      withLabel={withLabel}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Inset.tsx b/pioneer/packages/old-apps/react-components/src/Inset.tsx
deleted file mode 100644
index 99096a3890..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Inset.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import React, { useState } from 'react';
-import { RouteComponentProps } from 'react-router';
-import { withRouter } from 'react-router-dom';
-import styled from 'styled-components';
-
-import Icon from './Icon';
-import { classes } from './util';
-
-export interface InsetProps extends RouteComponentProps {
-  className?: string;
-  children?: React.ReactNode;
-  isCollapsible?: boolean;
-  isError?: boolean;
-  isSuccess?: boolean;
-  header?: React.ReactNode;
-  href?: string | null;
-  withTopMargin?: boolean;
-  withBottomMargin?: boolean;
-}
-
-function Inset ({ children, className, header, history, href, isCollapsible, isError, isSuccess, withBottomMargin, withTopMargin }: InsetProps): React.ReactElement<InsetProps> | null {
-  const [isCollapsed, setIsCollapsed] = useState(true);
-
-  if (!children) {
-    return null;
-  }
-
-  const _onClick = (): void => {
-    href && history.push(href);
-  };
-  const _toggleCollapsed = (): void => setIsCollapsed(!isCollapsed);
-
-  return (
-    <div
-      className={
-        classes(
-          'ui--Inset',
-          href && 'as-link',
-          isCollapsible && 'collapsible',
-          (isError && !isSuccess) && 'error',
-          (!isError && isSuccess) && 'success',
-          withBottomMargin && 'bottom-margin',
-          withTopMargin && 'top-margin',
-          className
-        )
-      }
-    >
-      {isCollapsible && (
-        <div
-          className='header'
-          onClick={_toggleCollapsed}
-        >
-          <h3>{header}</h3>
-          <Icon
-            className={classes(isCollapsed && 'collapsed')}
-            name='angle up'
-          />
-        </div>
-      )}
-      <div
-        className={classes('children', (isCollapsible && isCollapsed) && 'collapsed')}
-        onClick={_onClick}
-      >
-        {children}
-      </div>
-    </div>
-  );
-}
-
-export default withRouter(
-  styled(Inset)`
-    & {
-      box-shadow: 0 3px 3px rgba(0,0,0,.2);
-      position: relative;
-      background: #fefefe;
-      padding: 1rem;
-      transition: all 0.2s;
-      display: flex;
-      flex-direction: column;
-
-      &.bottom-margin {
-        margin-bottom: 2rem;
-      }
-
-      &.top-margin {
-        margin-top: 2rem;
-      }
-
-      &.error {
-        background: rgba(255, 0, 0, 0.05);
-
-        &, h1, h2, h3, h4, h5, h6, p {
-          color: rgba(156, 0, 0) !important;
-        }
-      }
-
-      &.success {
-        border: 1px solid rgb(168, 255, 136);
-        background: rgba(0, 255, 0, 0.05);
-
-        &, h1, h2, h3, h4, h5, h6, p {
-          color: rgba(34, 125, 0) !important;
-        }
-      }
-
-      .header {
-        cursor: pointer;
-        height: 2rem;
-        width: 100%;
-
-        h3 {
-          line-height: 2rem;
-          margin-bottom: 0;
-        }
-
-        .icon {
-          height: 4rem;
-          width: 4rem;
-          font-size: 2rem;
-          color: rgba(0,0,0,0.35);
-          position: absolute;
-          right: 0;
-          top: 0;
-          line-height: 4rem;
-          transition: all 0.2s;
-          transform-origin: center center;
-
-          &.collapsed {
-            transform: rotate(180deg);
-          }
-        }
-      }
-
-      .children {
-        &.collapsed {
-          display: none;
-        }
-      }
-
-      &.as-link {
-        cursor: pointer;
-
-        &:hover {
-          box-shadow: 0 5px 5px rgba(0,0,0,.2);
-          transform: translateY(-2px);
-        }
-      }
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/react-components/src/Label.tsx b/pioneer/packages/old-apps/react-components/src/Label.tsx
deleted file mode 100644
index 35b677835f..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Label.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import React from 'react';
-
-import LabelHelp from './LabelHelp';
-
-interface Props extends BareProps {
-  help?: React.ReactNode;
-  label?: React.ReactNode;
-  withEllipsis?: boolean;
-}
-
-export default function Label ({ className, help, label, withEllipsis }: Props): React.ReactElement<Props> {
-  return (
-    <label className={className}>
-      {
-        withEllipsis
-          ? <div className='withEllipsis'>{label}</div>
-          : label
-      }{help && <LabelHelp help={help} />}
-    </label>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/LabelHelp.tsx b/pioneer/packages/old-apps/react-components/src/LabelHelp.tsx
deleted file mode 100644
index f51f07d57b..0000000000
--- a/pioneer/packages/old-apps/react-components/src/LabelHelp.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import React, { useState } from 'react';
-import styled from 'styled-components';
-
-import Icon from './Icon';
-import { classes } from './util';
-import Tooltip from './Tooltip';
-
-interface Props extends BareProps {
-  help: React.ReactNode;
-}
-
-function LabelHelp ({ className, help, style }: Props): React.ReactElement<Props> {
-  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
-
-  const _toggleTooltip = (): void => setIsTooltipOpen(!isTooltipOpen);
-
-  return (
-    <div
-      className={classes('ui--LabelHelp', className)}
-      style={style}
-    >
-      <Icon
-        name='help circle'
-        data-tip
-        data-for='controlled-trigger'
-        onMouseOver={_toggleTooltip}
-        onMouseOut={_toggleTooltip}
-      />
-      {isTooltipOpen && (
-        <Tooltip
-          text={help}
-          trigger='controlled-trigger'
-        />
-      )}
-    </div>
-  );
-}
-
-export default styled(LabelHelp)`
-  cursor: help;
-  display: inline-block;
-  line-height: 1rem;
-  margin: 0 0 0 0.25rem;
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/Labelled.tsx b/pioneer/packages/old-apps/react-components/src/Labelled.tsx
deleted file mode 100644
index 19efba442e..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Labelled.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import React from 'react';
-import styled from 'styled-components';
-
-import LabelHelp from './LabelHelp';
-import { classes } from './util';
-
-interface Props extends BareProps {
-  help?: React.ReactNode;
-  isHidden?: boolean;
-  isOuter?: boolean;
-  isSmall?: boolean;
-  label?: React.ReactNode;
-  labelExtra?: React.ReactNode;
-  children: React.ReactNode;
-  withEllipsis?: boolean;
-  withLabel?: boolean;
-}
-
-const defaultLabel: React.ReactNode = (
-  <div>&nbsp;</div>
-);
-
-const Wrapper = styled.div`
-  display: block;
-  position: relative;
-
-  .withEllipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &.label-small {
-    display: block;
-
-    > label {
-      margin: 0;
-      min-width: 0;
-      padding-right: 0;
-    }
-  }
-
-  &:not(.label-small) {
-    padding-left: 2rem;
-
-    &:not(.label-outer) {
-      > label,
-      .labelExtra {
-        position: absolute;
-        text-align: left;
-        top: 0.5rem;
-        z-index: 1;
-      }
-
-      > label {
-        left: 3.55rem;
-        text-align: left;
-      }
-    }
-
-    .labelExtra {
-      color: rgba(78, 78, 78, .85);
-      font-weight: 100;
-      right: 1.75rem;
-      text-align: right;
-    }
-
-    > .ui--Labelled-content {
-      box-sizing: border-box;
-      flex: 1 1;
-      min-width: 0;
-
-      .ui.selection.dropdown {
-        &:not(.floating) {
-          padding-left: 1.45rem;
-          padding-top: 1.75rem;
-        }
-
-        &.floating {
-          > .dropdown.icon {
-            top: 1.25rem;
-          }
-
-          .text {
-            padding: 0.45rem 0
-          }
-        }
-
-        &.search:not(.multiple) > input.search {
-          padding-left: 1.45rem;
-          padding-top: 1.75rem;
-        }
-
-        > .delete.icon,
-        > .dropdown.icon,
-        > .search.icon {
-          top: 1.75rem;
-        }
-      }
-
-      .ui.input > input,
-      .ui--output {
-        padding-left: 1.45rem;
-        padding-top: 1.75rem;
-      }
-
-      .ui--InputFile,
-      .ui--Messages {
-        padding-left: 1.45rem;
-        padding-top: 2rem;
-      }
-
-      .ui--Messages {
-        padding-bottom: 2rem;
-      }
-    }
-  }
-`;
-
-export default function Labelled ({ className, children, help, isHidden, isOuter, isSmall, label = defaultLabel, labelExtra, style, withEllipsis, withLabel = true }: Props): React.ReactElement<Props> | null {
-  if (isHidden) {
-    return null;
-  } else if (!withLabel) {
-    return (
-      <div className={className}>{children}</div>
-    );
-  }
-
-  return (
-    <Wrapper
-      className={classes('ui--Labelled', isSmall && 'label-small', isOuter && 'label-outer', className)}
-      style={style}
-    >
-      <label>
-        {
-          withEllipsis
-            ? <div className='withEllipsis'>{label}</div>
-            : label
-        }{help && <LabelHelp help={help} />}
-      </label>
-      {labelExtra && <div className='labelExtra'>{labelExtra}</div>}
-      <div className='ui--Labelled-content'>
-        {children}
-      </div>
-    </Wrapper>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/LinkPolkascan.tsx b/pioneer/packages/old-apps/react-components/src/LinkPolkascan.tsx
deleted file mode 100644
index 51e645fd37..0000000000
--- a/pioneer/packages/old-apps/react-components/src/LinkPolkascan.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { I18nProps } from './types';
-
-import React, { useContext } from 'react';
-import styled from 'styled-components';
-import { ApiContext } from '@polkadot/react-api';
-
-import translate from './translate';
-
-export type LinkTypes = 'address' | 'block' | 'extrinsic';
-
-interface Props extends I18nProps {
-  className?: string;
-  data: string;
-  type: LinkTypes;
-}
-
-const BASE = 'https://polkascan.io/pre/';
-
-const CHAINS: Record<string, string> = {
-  Alexander: 'alexander',
-  Kusama: 'kusama-cc1', // old name via W3F nodes
-  'Kusama CC1': 'kusama-cc1',
-  'Kusama CC2': 'kusama-cc2'
-};
-
-const TYPES: Record<string, string> = {
-  address: '/module/account/',
-  block: '/system/block/',
-  extrinsic: '/system/extrinsic/'
-};
-
-function LinkPolkascan ({ className, data, t, type }: Props): React.ReactElement<Props> | null {
-  const { systemChain } = useContext(ApiContext);
-  const extChain = CHAINS[systemChain];
-  const extType = TYPES[type];
-
-  if (!extChain || !extType) {
-    return null;
-  }
-
-  return (
-    <div className={className}>
-      <a
-        href={`${BASE}${extChain}${extType}${data}`}
-        rel='noopener noreferrer'
-        target='_blank'
-      >
-        {t('View this {{type}} on Polkascan.io', { replace: { type } })}
-      </a>
-    </div>
-  );
-}
-
-export default translate(
-  styled(LinkPolkascan)`
-    margin-top: 1rem;
-    text-align: right;
-  `
-);
diff --git a/pioneer/packages/old-apps/react-components/src/LockedVote.tsx b/pioneer/packages/old-apps/react-components/src/LockedVote.tsx
deleted file mode 100644
index e9ba593493..0000000000
--- a/pioneer/packages/old-apps/react-components/src/LockedVote.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
-import { BareProps } from './types';
-
-import React from 'react';
-import { LockedVote } from '@polkadot/react-query';
-
-import { classes } from './util';
-
-export interface Props extends BareProps {
-  label?: React.ReactNode;
-  params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
-  withLabel?: boolean;
-}
-
-export default function LockedVoteDisplay (props: Props): React.ReactElement<Props> | null {
-  const { params, className, label, style } = props;
-
-  if (!params) {
-    return null;
-  }
-
-  return (
-    <LockedVote
-      className={classes('ui--LockedVote', className)}
-      label={label}
-      params={params}
-      style={style}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Menu.tsx b/pioneer/packages/old-apps/react-components/src/Menu.tsx
deleted file mode 100644
index 952ef5d1ec..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Menu.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import SUIDivider from 'semantic-ui-react/dist/commonjs/elements/Divider/Divider';
-import SUIMenu from 'semantic-ui-react/dist/commonjs/collections/Menu/Menu';
-
-type MenuDef = typeof SUIMenu & {
-  Divider: typeof SUIDivider;
-};
-
-const Menu: MenuDef = SUIMenu as MenuDef;
-
-Menu.Divider = SUIDivider;
-
-export default Menu;
diff --git a/pioneer/packages/old-apps/react-components/src/MessageSignature.tsx b/pioneer/packages/old-apps/react-components/src/MessageSignature.tsx
deleted file mode 100644
index ecb6c6a1ff..0000000000
--- a/pioneer/packages/old-apps/react-components/src/MessageSignature.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { ContractABIMessage } from '@polkadot/api-contract/types';
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import styled from 'styled-components';
-import { displayType } from '@polkadot/types';
-
-import Icon from './Icon';
-import Tooltip from './Tooltip';
-import translate from './translate';
-
-const MAX_PARAM_LENGTH = 20;
-
-export interface Props extends I18nProps {
-  asConstructor?: boolean;
-  message: ContractABIMessage;
-  params?: any[];
-  withTooltip?: boolean;
-}
-
-const Signature = styled.div`
-  font-family: monospace;
-  font-weight: normal;
-  flex-grow: 1;
-
-  .mutates {
-    color: #ff8600;
-    margin-left: 0.5rem;
-    opacity: 0.6;
-  }
-`;
-
-const Name = styled.span`
-  color: #2f8ddb;
-  font-weight: bold;
-`;
-
-const Type = styled.span`
-  color: #21a2b2;
-`;
-
-const ReturnType = styled.span`
-  color: #ff8600;
-`;
-
-function truncate (param: string): string {
-  return param.length > MAX_PARAM_LENGTH
-    ? `${param.substring(0, MAX_PARAM_LENGTH / 2)}…${param.substring(param.length - MAX_PARAM_LENGTH / 2)}`
-    : param;
-}
-
-function MessageSignature ({ message: { args, mutates, name, returnType }, params = [], asConstructor = false, withTooltip = false, t }: Props): React.ReactElement<Props> {
-  return (
-    <Signature>
-      <Name>
-        {name}
-      </Name>
-      (
-      {args.map(({ name, type }, index): React.ReactNode => {
-        return (
-          <React.Fragment key={`${name}-args-${index}`}>
-            {name}:
-            {' '}
-            <Type>
-              {params && params[index]
-                ? (
-                  <b>
-                    {truncate(params[index].toString())}
-                  </b>
-                )
-                : displayType(type)}
-            </Type>
-            {index < args.length - 1 && ', '}
-          </React.Fragment>
-        );
-      })}
-      )
-      {(!asConstructor && returnType) && (
-        <>
-          :
-          {' '}
-          <ReturnType>
-            {displayType(returnType)}
-          </ReturnType>
-        </>
-      )}
-      {mutates && (
-        <>
-          <Icon
-            data-tip
-            data-for={`mutates-${name}`}
-            name="database"
-            className="mutates"
-          />
-          {withTooltip && (
-            <Tooltip
-              trigger={`mutates-${name}`}
-              text={t('Mutates contract state')}
-            />
-          )}
-        </>
-      )}
-    </Signature>
-  );
-}
-
-export default translate(MessageSignature);
diff --git a/pioneer/packages/old-apps/react-components/src/Messages.tsx b/pioneer/packages/old-apps/react-components/src/Messages.tsx
deleted file mode 100644
index 5de4c3cd61..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Messages.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { ContractABIMessage } from '@polkadot/api-contract/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { Button } from '@polkadot/react-components';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Abi } from '@polkadot/api-contract';
-
-import IconLink from './IconLink';
-import MessageSignature from './MessageSignature';
-import translate from './translate';
-import { classes } from './util';
-
-export interface Props extends I18nProps {
-  address?: string;
-  contractAbi: Abi;
-  isLabelled?: boolean;
-  isRemovable: boolean;
-  onRemove?: () => void;
-  onSelect?: (messageIndex: number) => () => void;
-  onSelectConstructor?: (constructorIndex: number) => void;
-  withConstructors?: boolean;
-}
-
-const NOOP = (): void => { /* do nothing */ };
-
-function onSelect (props: Props, messageIndex: number): () => void {
-  return function (): void {
-    const { address: callAddress, contractAbi: { abi: { contract: { messages } } }, onSelect } = props;
-
-    if (!callAddress || !messages || !messages[messageIndex]) {
-      return;
-    }
-
-    onSelect && onSelect(messageIndex)();
-  };
-}
-
-function onSelectConstructor (props: Props, index: number): () => void {
-  return function (): void {
-    const { contractAbi: { abi: { contract: { constructors } } }, onSelectConstructor } = props;
-
-    if (!constructors || !constructors[index]) {
-      return;
-    }
-
-    onSelectConstructor && onSelectConstructor(index);
-  };
-}
-
-function renderItem (props: Props, message: ContractABIMessage, index: number, asConstructor = false): React.ReactNode {
-  const { docs = [], name } = message;
-
-  return (
-    <div
-      key={name}
-      className={classes('message', !onSelect && 'exempt-hover', asConstructor && 'constructor')}
-    >
-      <div className="info">
-        <MessageSignature
-          asConstructor={asConstructor}
-          message={message}
-          withTooltip
-        />
-        <details className="docs">
-          <summary>
-            {
-              docs && docs.length > 0
-                ? docs
-                  .filter((line) => line !== '')
-                  .map((line, index) => ((
-                    <React.Fragment key={`${name}-docs-${index}`}>
-                      <span>{line}</span>
-                      <br />
-                    </React.Fragment>
-                  )))
-                : (
-                  <i>
-                    {props.t('No documentation provided')}
-                  </i>
-                )
-            }
-          </summary>
-        </details>
-      </div>
-      {!asConstructor && props.onSelect && (
-        <div className="accessory">
-          <Button
-            className="execute"
-            icon="play"
-            onClick={onSelect(props, index)}
-            tooltip={props.t('Call this message')}
-          />
-        </div>
-      )}
-      {asConstructor && props.onSelectConstructor && (
-        <div className="accessory">
-          <Button
-            className="execute"
-            icon="cloud upload"
-            onClick={onSelectConstructor(props, index)}
-            tooltip={props.t('Deploy with this constructor')}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
-
-function renderConstructor (props: Props, index: number): React.ReactNode {
-  const { contractAbi: { abi: { contract: { constructors } } } } = props;
-  if (!constructors[index]) {
-    return null;
-  }
-
-  return renderItem(props, constructors[index], index, true);
-}
-
-function renderMessage (props: Props, index: number): React.ReactNode {
-  const { contractAbi: { abi: { contract: { messages } } } } = props;
-  if (!messages[index]) {
-    return null;
-  }
-
-  return renderItem(props, messages[index], index);
-}
-
-function Messages (props: Props): React.ReactElement<Props> {
-  const { className, contractAbi: { abi: { contract: { constructors, messages } } }, isLabelled, isRemovable, onRemove = NOOP, withConstructors, t } = props;
-  return (
-    <div className={classes(className, 'ui--Messages', isLabelled && 'labelled')}>
-      {withConstructors && constructors.map((_, index): React.ReactNode => renderConstructor(props, index))}
-      {messages.map((_, index): React.ReactNode => renderMessage(props, index))}
-      {isRemovable && (
-        <IconLink
-          label={t('Remove ABI')}
-          icon='remove'
-          className='remove-abi'
-          onClick={onRemove}
-        />
-      )}
-    </div>
-  );
-}
-
-export default translate(styled(Messages)`
-  font-size: 0.9rem;
-  padding: 0;
-  margin: 0;
-
-  .remove-abi {
-    float: right;
-
-    &:hover, &:hover :not(i) {
-      text-decoration: underline;
-    }
-  }
-
-  &.labelled {
-    background: white;
-    box-sizing: border-box;
-    border: 1px solid rgba(34,36,38,.15);
-    border-radius: .28571429rem;
-    padding: 1rem 1rem 0.5rem;
-    width: 100%;
-  }
-
-  & .message {
-    width: calc(100% - 1rem);
-    background: #f8f8f8;
-    display: inline-flex;
-    margin-bottom: 0.5rem;
-    padding: 0.5rem;
-    border-radius: 0.7rem;
-    transition: all 0.2s;
-
-    &.constructor {
-      background: #e8f4ff;
-    }
-
-    &:hover {
-      .accessory .execute {
-        display: block;
-        color: rgba(0, 0, 0, 0.2);
-
-        &:hover {
-          color: #2e86ab;
-        }
-      }
-    }
-
-    .info {
-      flex: 1 1;
-
-      .docs {
-        font-size: 0.8rem;
-        font-weight: normal;
-      }
-    }
-
-    .accessory {
-      width: 3rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .execute {
-        display: none;
-        background: transparent;
-        font-size: 1.5rem;
-        margin: 0;
-        padding: 0;
-      }
-    }
-
-    &.disabled {
-      opacity: 1 !important;
-      background: #eee !important;
-      color: #555 !important;
-    }
-  }
-`);
diff --git a/pioneer/packages/old-apps/react-components/src/Modal.tsx b/pioneer/packages/old-apps/react-components/src/Modal.tsx
deleted file mode 100644
index 324787db22..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Modal.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import React from 'react';
-import SUIModal from 'semantic-ui-react/dist/commonjs/modules/Modal/Modal';
-
-import { classes } from './util';
-
-interface Props extends BareProps {
-  children: React.ReactNode;
-  [index: string]: any;
-}
-
-function Modal (props: Props): React.ReactElement<Props> {
-  return (
-    <SUIModal
-      {...props}
-      className={classes('theme--default', 'ui--Modal', props.className)}
-    />
-  );
-}
-
-Modal.Actions = SUIModal.Actions;
-Modal.Content = SUIModal.Content;
-Modal.Header = SUIModal.Header;
-Modal.Description = SUIModal.Description;
-
-export default Modal;
diff --git a/pioneer/packages/old-apps/react-components/src/Nonce.tsx b/pioneer/packages/old-apps/react-components/src/Nonce.tsx
deleted file mode 100644
index 1f780a69ae..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Nonce.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
-import { BareProps } from './types';
-
-import React from 'react';
-import { Nonce } from '@polkadot/react-query';
-
-import { classes } from './util';
-
-export interface Props extends BareProps {
-  label?: React.ReactNode;
-  params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
-}
-
-export default function NonceDisplay ({ className, label, params, style }: Props): React.ReactElement<Props> | null {
-  if (!params) {
-    return null;
-  }
-
-  return (
-    <Nonce
-      className={classes('ui--Nonce', className)}
-      label={label}
-      params={params.toString()}
-      style={style}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/OnlineStatus.tsx b/pioneer/packages/old-apps/react-components/src/OnlineStatus.tsx
deleted file mode 100644
index d526681923..0000000000
--- a/pioneer/packages/old-apps/react-components/src/OnlineStatus.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-staking authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { DerivedStakingOnlineStatus } from '@polkadot/api-derive/types';
-import { I18nProps } from './types';
-
-import BN from 'bn.js';
-import React, { useEffect, useState } from 'react';
-import { formatNumber } from '@polkadot/util';
-
-import Badge from './Badge';
-import Icon from './Icon';
-
-import translate from './translate';
-
-interface Props extends I18nProps {
-  isTooltip?: boolean;
-  value: DerivedStakingOnlineStatus;
-}
-
-function OnlineStatus ({ className, value, isTooltip = false, t }: Props): React.ReactElement<Props> | null {
-  const [{ hover, info, type }, setType] = useState<{ hover: React.ReactNode; info: React.ReactNode; type: 'online' | 'offline' | null }>({ hover: '', info: '', type: null });
-
-  useEffect((): void => {
-    const { online, offline } = value;
-    let hover: React.ReactNode = '';
-    let info: React.ReactNode = '';
-    let type: 'online' | 'offline' | null = null;
-
-    if (offline) {
-      const count = offline.reduce((total, { count }): BN => total.add(count), new BN(0));
-      const blockNumbers = offline.map(({ blockNumber }): string => `#${formatNumber(blockNumber)}`);
-
-      info = count.toString();
-      hover = t('Reported offline {{count}} times, last at {{blockNumber}}', {
-        replace: {
-          count,
-          blockNumber: blockNumbers[blockNumbers.length - 1]
-        }
-      });
-      type = 'offline';
-    } else if (online && online.isOnline) {
-      const blockNumber = value.online ? value.online.blockNumber : null;
-
-      info = <Icon name='check' />;
-      hover = blockNumber
-        ? t('Reported online at #{{blockNumber}}', {
-          replace: {
-            blockNumber: formatNumber(blockNumber)
-          }
-        })
-        : t('Reported online in the current session');
-      type = 'online';
-    }
-
-    setType({ hover, info, type });
-  }, [value]);
-
-  if (!type) {
-    return null;
-  }
-
-  return (
-    <Badge
-      className={`ui--OnlineStatus ${className}`}
-      hover={hover}
-      info={info}
-      isTooltip={isTooltip}
-      type={type}
-    />
-  );
-}
-
-export default translate(OnlineStatus);
diff --git a/pioneer/packages/old-apps/react-components/src/Output.tsx b/pioneer/packages/old-apps/react-components/src/Output.tsx
deleted file mode 100644
index e9c15e9d19..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Output.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import React from 'react';
-
-import CopyButton from './CopyButton';
-import Labelled from './Labelled';
-import { classes } from './util';
-
-interface Props extends BareProps {
-  children?: React.ReactNode;
-  help?: React.ReactNode;
-  isError?: boolean;
-  isHidden?: boolean;
-  isMonospace?: boolean;
-  label?: React.ReactNode;
-  value?: any;
-  withCopy?: boolean;
-  withLabel?: boolean;
-}
-
-export default function Output ({ className, children, help, isError, isHidden, isMonospace, label, style, 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
-        }
-      </div>
-    </Labelled>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Params/Call.tsx b/pioneer/packages/old-apps/react-components/src/Params/Call.tsx
deleted file mode 100644
index be3511fb5c..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Params/Call.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-extrinsics authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { SubmittableExtrinsicFunction } from '@polkadot/api/types';
-import { Props } from '@polkadot/react-params/types';
-
-import React, { useContext } from 'react';
-import { ApiContext } from '@polkadot/react-api';
-
-import Extrinsic from './Extrinsic';
-
-export default function Call ({ className, isDisabled, isError, label, onChange, onEnter, style, withLabel }: Props): React.ReactElement<Props> {
-  const { api, apiDefaultTx } = useContext(ApiContext);
-
-  const defaultValue = ((): SubmittableExtrinsicFunction<'promise'> => {
-    try {
-      return api.tx.balances.transfer;
-    } catch (error) {
-      return apiDefaultTx;
-    }
-  })();
-
-  return (
-    <Extrinsic
-      className={className}
-      defaultValue={defaultValue}
-      isDisabled={isDisabled}
-      isError={isError}
-      isPrivate={false}
-      label={label}
-      onChange={onChange}
-      onEnter={onEnter}
-      style={style}
-      withLabel={withLabel}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Params/Extrinsic.tsx b/pioneer/packages/old-apps/react-components/src/Params/Extrinsic.tsx
deleted file mode 100644
index 8c10e5f182..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Params/Extrinsic.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-extrinsics authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Call } from '@polkadot/types/interfaces';
-import { CallFunction } from '@polkadot/types/types';
-import { RawParamOnChange, RawParamOnEnter } from '@polkadot/react-params/types';
-import { BareProps } from '../types';
-
-import React from 'react';
-
-import BaseExtrinsic from '../Extrinsic';
-
-interface Props extends BareProps {
-  defaultValue: CallFunction;
-  isDisabled?: boolean;
-  isError?: boolean;
-  isPrivate: boolean;
-  label: React.ReactNode;
-  onChange?: RawParamOnChange;
-  onEnter?: RawParamOnEnter;
-  withLabel?: boolean;
-}
-
-function onChange ({ onChange }: Props): (method?: Call) => void {
-  return (method?: Call): void => {
-    onChange && onChange({
-      isValid: !!method,
-      value: method
-    });
-  };
-}
-
-export default function ExtrinsicDisplay (props: Props): React.ReactElement<Props> {
-  const { className, defaultValue, isDisabled, isError, isPrivate, label, onEnter, style, withLabel } = props;
-
-  return (
-    <BaseExtrinsic
-      className={className}
-      defaultValue={defaultValue}
-      isDisabled={isDisabled}
-      isError={isError}
-      isPrivate={isPrivate}
-      label={label}
-      onChange={onChange(props)}
-      onEnter={onEnter}
-      style={style}
-      withLabel={withLabel}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Params/Proposal.tsx b/pioneer/packages/old-apps/react-components/src/Params/Proposal.tsx
deleted file mode 100644
index 4e098295cc..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Params/Proposal.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-extrinsics authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Props, RawParam } from '@polkadot/react-params/types';
-
-import React, { useContext } from 'react';
-import { createType } from '@polkadot/types';
-import { ApiContext } from '@polkadot/react-api';
-
-import ExtrinsicDisplay from './Extrinsic';
-
-function onChange ({ onChange }: Props): (_: RawParam) => void {
-  return function ({ isValid, value }: RawParam): void {
-    let proposal = null;
-
-    if (isValid && value) {
-      proposal = createType('Proposal', value);
-    }
-
-    onChange && onChange({
-      isValid,
-      value: proposal
-    });
-  };
-}
-
-export default function ProposalDisplay (props: Props): React.ReactElement<Props> {
-  const { apiDefaultTxSudo } = useContext(ApiContext);
-  const { className, isDisabled, isError, label, onEnter, style, withLabel } = props;
-
-  return (
-    <ExtrinsicDisplay
-      className={className}
-      defaultValue={apiDefaultTxSudo}
-      isDisabled={isDisabled}
-      isError={isError}
-      isPrivate
-      label={label}
-      onChange={onChange(props)}
-      onEnter={onEnter}
-      style={style}
-      withLabel={withLabel}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Params/index.ts b/pioneer/packages/old-apps/react-components/src/Params/index.ts
deleted file mode 100644
index a5825b750d..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Params/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-extrinsics authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { ComponentMap } from '@polkadot/react-params/types';
-
-import Call from './Call';
-import Proposal from './Proposal';
-
-const components: ComponentMap = {
-  Call,
-  Proposal
-};
-
-export default components;
diff --git a/pioneer/packages/old-apps/react-components/src/Password.tsx b/pioneer/packages/old-apps/react-components/src/Password.tsx
deleted file mode 100644
index 66ac174923..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Password.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import React, { useState } from 'react';
-import { MAX_PASS_LEN } from '@polkadot/ui-keyring/defaults';
-
-import { classes } from './util';
-import Button from './Button';
-import Input from './Input';
-
-interface Props extends BareProps {
-  autoFocus?: boolean;
-  children?: React.ReactNode;
-  defaultValue?: any;
-  help?: string;
-  isDisabled?: boolean;
-  isError?: boolean;
-  label?: string;
-  name?: string;
-  onChange: (value: string) => void;
-  onEnter?: () => void;
-  tabIndex?: number;
-  value: any;
-  withLabel?: boolean;
-}
-
-export default function Password ({ autoFocus, children, className, defaultValue, help, isDisabled, isError, label, name, onChange, onEnter, style, tabIndex, value, withLabel }: Props): React.ReactElement<Props> {
-  const [isVisible, setIsVisible] = useState(false);
-
-  const _toggleVisible = (): void => setIsVisible(!isVisible);
-
-  return (
-    <Input
-      autoFocus={autoFocus}
-      className={classes('ui--Password', className)}
-      defaultValue={defaultValue}
-      help={help}
-      isAction
-      isDisabled={isDisabled}
-      isError={isError}
-      label={label}
-      maxLength={MAX_PASS_LEN}
-      name={name}
-      onChange={onChange}
-      onEnter={onEnter}
-      style={style}
-      tabIndex={tabIndex}
-      type={
-        isVisible
-          ? 'text'
-          : 'password'
-      }
-      value={value}
-      withLabel={withLabel}
-    >
-      <Button
-        icon={
-          isVisible
-            ? 'hide'
-            : 'unhide'
-        }
-        isPrimary
-        onClick={_toggleVisible}
-      />
-      {children}
-    </Input>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Progress.tsx b/pioneer/packages/old-apps/react-components/src/Progress.tsx
deleted file mode 100644
index b3dfe648d5..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Progress.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import BN from 'bn.js';
-import React from 'react';
-import SUIProgress from 'semantic-ui-react/dist/commonjs/modules/Progress/Progress';
-import { UInt } from '@polkadot/types';
-import { bnToBn, isBn, isUndefined } from '@polkadot/util';
-
-import { classes } from './util';
-
-type BaseColors = 'blue' | 'green' | 'red' | 'orange';
-export type Colors = 'auto' | 'autoReverse' | BaseColors;
-
-interface Props extends BareProps {
-  color?: Colors;
-  percent?: BN | number;
-  total?: UInt | BN | number;
-  value?: UInt | BN | number;
-}
-
-export default function Progress ({ className, color = 'blue', percent, total, style, value }: Props): React.ReactElement<Props> | null {
-  let calculated: number | undefined;
-  const _total = bnToBn(total);
-  const _value = bnToBn(value);
-
-  if (_total.gtn(0)) {
-    calculated = 100.0 * _value.toNumber() / _total.toNumber();
-  } else {
-    calculated = isBn(percent) ? percent.toNumber() : percent;
-  }
-
-  if (isUndefined(calculated) || calculated < 0) {
-    return null;
-  }
-
-  let rainbow: BaseColors;
-
-  if (color === 'auto' || color === 'autoReverse') {
-    if (calculated > 66.6) {
-      rainbow = color === 'auto' ? 'green' : 'red';
-    } else if (calculated > 33.3) {
-      rainbow = 'orange';
-    } else {
-      rainbow = color === 'auto' ? 'red' : 'green';
-    }
-  } else {
-    rainbow = color;
-  }
-
-  return (
-    <SUIProgress
-      className={classes('ui--Progress', className)}
-      color={rainbow}
-      percent={calculated}
-      size='tiny'
-      style={style}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/ProposedAction.tsx b/pioneer/packages/old-apps/react-components/src/ProposedAction.tsx
deleted file mode 100644
index 136a10885e..0000000000
--- a/pioneer/packages/old-apps/react-components/src/ProposedAction.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Proposal } from '@polkadot/types/interfaces';
-
-import BN from 'bn.js';
-import React from 'react';
-import styled from 'styled-components';
-import { GenericCall } from '@polkadot/types';
-import { formatNumber } from '@polkadot/util';
-
-import Call from './Call';
-import Inset, { InsetProps } from './Inset';
-import TreasuryProposal from './TreasuryProposal';
-import { isTreasuryProposalVote } from './util';
-
-interface Props {
-  className?: string;
-  asInset?: boolean;
-  insetProps?: Partial<InsetProps>;
-  proposal?: Proposal | null;
-  idNumber: BN | number | string;
-  isCollapsible?: boolean;
-  withLinks?: boolean;
-  expandNested?: boolean;
-}
-
-export const styles = `
-  .ui--ProposedAction-extrinsic {
-    margin-bottom: 1rem;
-
-    .ui--Params-Content {
-      padding-left: 0;
-    }
-  }
-
-  .ui--ProposedAction-header {
-    margin-bottom: 1rem;
-  }
-`;
-
-function ProposedAction (props: Props): React.ReactElement<Props> {
-  const { asInset, insetProps, isCollapsible, proposal, withLinks, expandNested } = props;
-  const idNumber = typeof props.idNumber === 'string'
-    ? props.idNumber
-    : formatNumber(props.idNumber);
-
-  if (!proposal) {
-    return (
-      <h3>#{idNumber}</h3>
-    );
-  }
-
-  const { meta, method, section } = GenericCall.findFunction(proposal.callIndex);
-
-  const header = `#${idNumber}: ${section}.${method}`;
-  const documentation = (meta && meta.documentation)
-    ? (
-      <summary>{meta.documentation.join(' ')}</summary>
-    )
-    : null;
-  const params = (isTreasuryProposalVote(proposal) && expandNested) ? (
-    <TreasuryProposal
-      className='ui--ProposedAction-extrinsic'
-      asInset={withLinks}
-      insetProps={{
-        withTopMargin: true,
-        withBottomMargin: true,
-        ...(withLinks ? { href: '/treasury' } : {})
-      }}
-      proposalId={proposal.args[0].toString()}
-    />
-  ) : (
-    <Call
-      className='ui--ProposedAction-extrinsic'
-      value={proposal}
-    />
-  );
-
-  if (asInset) {
-    return (
-      <Inset
-        header={header}
-        isCollapsible
-        {...insetProps}
-      >
-        <>
-          {documentation}
-          {params}
-        </>
-      </Inset>
-    );
-  }
-
-  return (
-    <>
-      <h3>{header}</h3>
-      {isCollapsible
-        ? (
-          <details>
-            {documentation}
-            {params}
-          </details>
-        )
-        : (
-          <>
-            <details>
-              {documentation}
-            </details>
-            {params}
-          </>
-        )}
-    </>
-  );
-}
-
-export default styled(ProposedAction)`${styles}`;
diff --git a/pioneer/packages/old-apps/react-components/src/Row.tsx b/pioneer/packages/old-apps/react-components/src/Row.tsx
deleted file mode 100644
index f8f2a87bd4..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Row.tsx
+++ /dev/null
@@ -1,380 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { DeriveAccountInfo } from '@polkadot/api-derive/types';
-import { KeyringItemType } from '@polkadot/ui-keyring/types';
-
-import { Label } from 'semantic-ui-react';
-import React from 'react';
-
-import Button from './Button';
-import { classes, toShortAddress } from './util';
-import CopyButton from './CopyButton';
-import Input from './Input';
-import InputTags from './InputTags';
-
-export const styles = `
-  text-align: left;
-
-  &.disabled {
-    filter: grayscale(100%);
-    opacity: 0.6;
-  }
-
-  &.inline {
-    display: flex;
-
-    .ui--Row-accountId {
-      white-space: nowrap;
-    }
-  }
-
-  &.invalid {
-    .ui--Row-accountId,
-    .ui--Row-icon {
-      filter: grayscale(100);
-      opacity: 0.5;
-    }
-  }
-
-  button.ui.icon.editButton {
-    padding: 0em .3em .3em .3em;
-    color: #2e86ab;
-    background: none;
-    /*trick to let the button in the flow but keep the content centered regardless*/
-    margin-left: -2em;
-    position: relative;
-    right: -2.3em;
-    z-index: 1;
-  }
-
-  .editSpan {
-    white-space: nowrap;
-
-    &:before {
-      content: '';
-    }
-  }
-
-  .ui--Row-accountId,
-  .ui--Row-accountIndex {
-    font-family: monospace;
-    font-size: 1.25em;
-    padding: 0;
-    margin-bottom: 0.25rem;
-  }
-
-  .ui--Row-accountIndex {
-    font-style: italic;
-  }
-
-  .ui--Row-balances {
-    display: flex;
-    .column {
-      display: block;
-
-      label,
-      .result {
-        display: inline-block;
-      }
-    }
-
-    > span {
-      text-align: left;
-    }
-  }
-
-  .ui--Row-base {
-    display: flex;
-  }
-
-  .ui--Row-buttons {
-    position: relative;
-    margin-right: -0.5rem;
-    margin-top: -0.5rem;
-    white-space: nowrap;
-    height: 0rem;
-    overflow: visible;
-
-    button.ui.button:last-child {
-      margin-right: 0;
-    }
-  }
-
-  .ui--Row-children {
-    display: block;
-    padding-left: 1rem;
-    padding-top: 1rem;
-  }
-
-  .ui--Row-details {
-    flex: 1;
-    margin-right: 1rem;
-    padding: 0.25rem 0 0;
-    width: 100%;
-    min-width: 0;
-
-    .account-label{
-      margin: -0.75rem 0 0 0
-    }
-
-    * {
-      vertical-align: middle;
-    }
-  }
-
-  .ui--Row-icon {
-    flex: 0;
-    margin-right: 1em;
-    position: relative;
-
-    .ui--Row-icon-info {
-      left: -0.5rem;
-      position: absolute;
-      top: -0.5rem;
-    }
-  }
-
-  .ui--Row-address-or-name {
-    display: flex;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: normal;
-
-    .withName {
-      white-space: nowrap;
-      text-transform: uppercase;
-      overflow: hidden;
-      text-overflow: inherit;
-    }
-  }
-
-  .ui--Row-name-input {
-    input {
-      height: 1em;
-      text-transform: uppercase;
-      margin-top: -0.3em;
-    }
-
-  }
-
-  .ui--Row-tags {
-    &.editable {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: left;
-
-      .addTags {
-        border: 1px #00000052 solid;
-        border-radius: .5em;
-        border-style: dashed;
-        color: grey;
-        font-size: x-small;
-        padding: .1em 0.3em 0.1em 0.3em;
-        margin-top: .2em;
-      }
-
-      > div.label {
-        margin-top:.3em
-      }
-    }
-  }
-
-  .ui--Row-tags-input {
-    margin-bottom: -1.4em;
-  }
-`;
-
-export interface RowProps {
-  accounts_info?: DeriveAccountInfo;
-  buttons?: React.ReactNode;
-  children?: React.ReactNode;
-  className?: string;
-  defaultName?: string;
-  extraInfo?: React.ReactNode;
-  iconInfo?: React.ReactNode;
-  isEditable?: boolean;
-  isInline?: boolean;
-  type?: KeyringItemType;
-  withIcon?: boolean;
-  withTags?: boolean;
-}
-
-export interface RowState {
-  address: string;
-  isEditingName: boolean;
-  isEditingTags: boolean;
-  name: string;
-  tags: string[];
-}
-
-// const DEFAULT_ADDR = '5'.padEnd(16, 'x');
-// const ICON_SIZE = 48;
-
-export default class Row<P extends RowProps, S extends RowState> extends React.PureComponent<P, S> {
-  public state: S = {
-    isEditingName: false,
-    isEditingTags: false
-  } as unknown as S;
-
-  public static defaultProps = {
-    defaultName: '<unknown>'
-  };
-
-  protected onChangeName = (name: string): void => {
-    this.setState({ name });
-  }
-
-  protected onChangeTags = (tags: string[]): void => {
-    this.setState({ tags });
-  }
-
-  protected renderButtons (): React.ReactNode {
-    const { buttons } = this.props;
-
-    return buttons
-      ? <div className='ui--Row-buttons'>{buttons}</div>
-      : null;
-  }
-
-  protected renderChildren (): React.ReactNode {
-    const { children } = this.props;
-    const hasChildren = !children
-      ? false
-      : Array.isArray(children)
-        ? children.filter((child): boolean => !!child).length !== 0
-        : true;
-
-    if (!hasChildren) {
-      return null;
-    }
-
-    return (
-      <div className='ui--Row-children'>
-        {children}
-      </div>
-    );
-  }
-
-  protected renderEditIcon (): React.ReactNode {
-    return (
-      <span className='editSpan'>
-        <Button
-          className='icon-button'
-          icon='edit'
-          size='mini'
-          isPrimary
-          key='unlock'
-        />
-      </span>
-
-    );
-  }
-
-  protected renderName (withCopy = false): React.ReactNode {
-    const { defaultName, isEditable } = this.props;
-    const { address, isEditingName, name } = this.state;
-    const withName = name !== defaultName;
-
-    // can't be both editable and copyable
-    return isEditingName
-      ? (
-        <Input
-          autoFocus
-          className='ui--Row-name-input'
-          defaultValue={name}
-          onBlur={this.saveName}
-          onChange={this.onChangeName}
-          onEnter={this.saveName}
-          withLabel={false}
-        />
-      )
-      : (
-        <div
-          className={classes('ui--Row-address-or-name', isEditable && 'editable')}
-          onClick={isEditable ? this.toggleNameEditor : undefined}
-        >
-          {withCopy && !isEditable
-            ? (
-              <CopyButton
-                isAddress
-                value={address}
-              >
-                <span className={`${withName ? 'withName' : 'withAddr'}`}>{
-                  withName ? name : toShortAddress(address)
-                }
-                </span>
-              </CopyButton>
-            )
-            : (
-              <>
-                <span className='withName'>
-                  {name}
-                </span>
-                {isEditable && this.renderEditIcon()}
-              </>
-            )
-          }
-        </div>
-      );
-  }
-
-  protected renderTags (): React.ReactNode {
-    const { isEditingTags, tags } = this.state;
-    const { isEditable, withTags = false } = this.props;
-
-    if (!withTags) {
-      return null;
-    }
-
-    return isEditingTags
-      ? (
-        <InputTags
-          className='ui--Row-tags-input'
-          onBlur={this.saveTags}
-          onChange={this.onChangeTags}
-          onClose={this.saveTags}
-          openOnFocus
-          defaultValue = {tags}
-          searchInput={{ autoFocus: true }}
-          value={tags}
-          withLabel={false}
-        />
-      )
-      : (
-        <div
-          className={classes('ui--Row-tags', isEditable && 'editable')}
-          onClick={isEditable ? this.toggleTagsEditor : undefined}
-        >
-          {
-            !tags.length
-              ? (isEditable ? <span className='addTags'>add tags</span> : undefined)
-              : tags.map((tag): React.ReactNode => (
-                <Label key={tag} size='tiny' color='grey'>{tag}</Label>
-              ))
-          }
-          {isEditable && this.renderEditIcon()}
-        </div>
-      );
-  }
-
-  protected saveName!: () => void;
-
-  protected saveTags!: () => void;
-
-  protected toggleNameEditor = (): void => {
-    this.setState(({ isEditingName }): S => ({
-      isEditingName: !isEditingName
-    }) as unknown as S);
-  }
-
-  protected toggleTagsEditor = (): void => {
-    this.setState(({ isEditingTags }): S => ({
-      isEditingTags: !isEditingTags
-    }) as unknown as S);
-  }
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Static.tsx b/pioneer/packages/old-apps/react-components/src/Static.tsx
deleted file mode 100644
index fd0ad490ea..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Static.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import React from 'react';
-
-import Labelled from './Labelled';
-
-interface Props extends BareProps {
-  children?: React.ReactNode;
-  defaultValue?: any;
-  help?: React.ReactNode;
-  isDisabled?: boolean;
-  isError?: boolean;
-  isHidden?: boolean;
-  label?: React.ReactNode;
-  value?: React.ReactNode;
-  withLabel?: boolean;
-}
-
-export default function Static ({ className, children, defaultValue, help, isHidden, label, style, value, withLabel }: Props): React.ReactElement<Props> {
-  return (
-    <Labelled
-      className={className}
-      help={help}
-      isHidden={isHidden}
-      label={label}
-      style={style}
-      withLabel={withLabel}
-    >
-      <div className='ui--Static ui dropdown selection disabled'>
-        {value || defaultValue}
-        {children}
-      </div>
-    </Labelled>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Status/Context.ts b/pioneer/packages/old-apps/react-components/src/Status/Context.ts
deleted file mode 100644
index 314f95a641..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Status/Context.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { QueueProps, QueueStatus, QueueTx } from './types';
-
-import React from 'react';
-
-const defaultState: Partial<QueueProps> = {
-  stqueue: [] as QueueStatus[],
-  txqueue: [] as QueueTx[]
-};
-
-const Context: React.Context<QueueProps> = React.createContext<QueueProps>(defaultState as QueueProps);
-const QueueConsumer: React.Consumer<QueueProps> = Context.Consumer;
-const QueueProvider: React.Provider<QueueProps> = Context.Provider;
-
-export default Context;
-
-export {
-  QueueConsumer,
-  QueueProvider
-};
diff --git a/pioneer/packages/old-apps/react-components/src/Status/Queue.tsx b/pioneer/packages/old-apps/react-components/src/Status/Queue.tsx
deleted file mode 100644
index 8ba7f4c77c..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Status/Queue.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { SignerPayloadJSON } from '@polkadot/types/types';
-import { BareProps } from '../types';
-import { ActionStatus, PartialQueueTxExtrinsic, PartialQueueTxRpc, QueueStatus, QueueTx, QueueTxExtrinsic, QueueTxRpc, QueueTxStatus, SignerCallback } from './types';
-
-import React, { useRef, useState } from 'react';
-import jsonrpc from '@polkadot/jsonrpc';
-import { createType } from '@polkadot/types';
-
-import { QueueProvider } from './Context';
-import { SubmittableResult } from '@polkadot/api';
-import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-import { STATUS_COMPLETE } from './constants';
-
-export interface Props extends BareProps {
-  children: React.ReactNode;
-}
-
-let nextId = 0;
-
-const REMOVE_TIMEOUT = 7500;
-const SUBMIT_RPC = jsonrpc.author.methods.submitAndWatchExtrinsic;
-
-export default function Queue ({ children }: Props): React.ReactElement<Props> {
-  const [_stqueue, _setStQueue] = useState<QueueStatus[]>([]);
-  const [_txqueue, _setTxQueue] = useState<QueueTx[]>([]);
-  const stRef = useRef(_stqueue);
-  const txRef = useRef(_txqueue);
-
-  const setStQueue = (st: QueueStatus[]): void => {
-    stRef.current = st;
-    _setStQueue(st);
-  };
-  const setTxQueue = (tx: QueueTx[]): void => {
-    txRef.current = tx;
-    _setTxQueue(tx);
-  };
-
-  const addToTxQueue = (value: QueueTxExtrinsic | QueueTxRpc | QueueTx): void => {
-    const id = ++nextId;
-    const removeItem = (): void =>
-      setTxQueue([...txRef.current.map((item): QueueTx =>
-        item.id === id
-          ? { ...item, status: 'completed' }
-          : item
-      )]);
-
-    setTxQueue([...txRef.current, {
-      ...value,
-      id,
-      removeItem,
-      rpc: (value as QueueTxRpc).rpc || SUBMIT_RPC,
-      status: 'queued'
-    }]);
-  };
-
-  const queueAction = (status: ActionStatus | ActionStatus[]): void => {
-    const _status = Array.isArray(status) ? status : [status];
-
-    if (_status.length) {
-      setStQueue([...stRef.current, ...(_status.map((item): QueueStatus => {
-        const id = ++nextId;
-        const removeItem = (): void =>
-          setStQueue([...stRef.current.filter((item): boolean => item.id !== id)]);
-
-        setTimeout(removeItem, REMOVE_TIMEOUT);
-
-        return {
-          ...item,
-          id,
-          isCompleted: false,
-          removeItem
-        };
-      }))]);
-    }
-  };
-  const queueExtrinsic = ({ accountId, extrinsic, txFailedCb, txSuccessCb, txStartCb, txUpdateCb, isUnsigned }: PartialQueueTxExtrinsic): void =>
-    addToTxQueue({
-      accountId,
-      extrinsic,
-      isUnsigned,
-      txFailedCb,
-      txSuccessCb,
-      txStartCb,
-      txUpdateCb
-    });
-  const queuePayload = (payload: SignerPayloadJSON, signerCb: SignerCallback): void =>
-    addToTxQueue({
-      accountId: payload.address,
-      // this is not great, but the Extrinsic we don't need a submittable
-      extrinsic: createType('Extrinsic',
-        { method: createType('Call', payload.method) },
-        { version: payload.version }
-      ) as unknown as SubmittableExtrinsic,
-      payload,
-      signerCb
-    });
-  const queueRpc = ({ accountId, rpc, values }: PartialQueueTxRpc): void =>
-    addToTxQueue({
-      accountId,
-      rpc,
-      values
-    });
-  const queueSetTxStatus = (id: number, status: QueueTxStatus, result?: SubmittableResult, error?: Error): void => {
-    setTxQueue([...txRef.current.map((item): QueueTx =>
-      item.id === id
-        ? {
-          ...item,
-          error: error === undefined
-            ? item.error
-            : error,
-          result: result === undefined
-            ? item.result
-            : result,
-          status: item.status === 'completed'
-            ? item.status
-            : status
-        }
-        : item
-    )]);
-
-    queueAction(
-      ((result && result.events) || [])
-        // filter events handled globally, or those we are not interested in, these are
-        // handled by the global overview, so don't add them here
-        .filter((record): boolean => !!record.event && record.event.section !== 'democracy')
-        .map(({ event: { method, section } }): ActionStatus => ({
-          action: `${section}.${method}`,
-          status: section === 'system' && method === 'ExtrinsicFailed'
-            ? 'error'
-            : 'event',
-          message: 'extrinsic event'
-        }))
-    );
-
-    if (STATUS_COMPLETE.includes(status)) {
-      setTimeout((): void => {
-        const item = txRef.current.find((item): boolean => item.id === id);
-
-        item && item.removeItem();
-      }, REMOVE_TIMEOUT);
-    }
-  };
-
-  return (
-    <QueueProvider value={{
-      queueAction,
-      queueExtrinsic,
-      queuePayload,
-      queueRpc,
-      queueSetTxStatus,
-      stqueue: _stqueue,
-      txqueue: _txqueue
-    }}>
-      {children}
-    </QueueProvider>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Status/QueueFunc.tsx b/pioneer/packages/old-apps/react-components/src/Status/QueueFunc.tsx
deleted file mode 100644
index 20f0ee6a71..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Status/QueueFunc.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { SignerPayloadJSON } from '@polkadot/types/types';
-import { BareProps } from '../types';
-import { ActionStatus, PartialQueueTxExtrinsic, PartialQueueTxRpc, QueueStatus, QueueTx, QueueTxExtrinsic, QueueTxRpc, QueueTxStatus, SignerCallback } from './types';
-
-import React, { useRef, useState } from 'react';
-import jsonrpc from '@polkadot/jsonrpc';
-import { createType } from '@polkadot/types';
-
-import { QueueProvider } from './Context';
-import { SubmittableResult } from '@polkadot/api';
-import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-
-export interface Props extends BareProps {
-  children: React.ReactNode;
-}
-
-let nextId = 0;
-
-const REMOVE_TIMEOUT = 7500;
-const SUBMIT_RPC = jsonrpc.author.methods.submitAndWatchExtrinsic;
-const STATUS_COMPLETE: QueueTxStatus[] = [
-  // status from subscription
-  'finalized', 'usurped', 'dropped', 'invalid',
-  // normal completion
-  'cancelled', 'error', 'sent'
-];
-
-export default function Queue ({ children }: Props): React.ReactElement<Props> {
-  const [stqueue, setStQueue] = useState<QueueStatus[]>([]);
-  const [txqueue, setTxQueue] = useState<QueueTx[]>([]);
-
-  const _clearTxStatus = useRef(
-    (id: number): () => void =>
-      (): void => setTxQueue([...txqueue.map((item): QueueTx =>
-        item.id === id
-          ? { ...item, status: 'completed' }
-          : item
-      )])
-  );
-  const _addToTxQueue = useRef(
-    (value: QueueTxExtrinsic | QueueTxRpc | QueueTx): number => {
-      const id = ++nextId;
-
-      setTxQueue([...txqueue, {
-        ...value,
-        id,
-        removeItem: _clearTxStatus.current(id),
-        rpc: (value as QueueTxRpc).rpc || SUBMIT_RPC,
-        status: 'queued'
-      }]);
-
-      return id;
-    }
-  );
-  const queueAction = useRef(
-    (status: ActionStatus | ActionStatus[]): number => {
-      const todos = (Array.isArray(status) ? status : [status]).map((item: ActionStatus) => {
-        const id = ++nextId;
-        const removeItem = (): void =>
-          setStQueue([...stqueue.filter((item): boolean => item.id !== id)]);
-
-        setTimeout(removeItem, REMOVE_TIMEOUT);
-
-        return {
-          ...item,
-          id,
-          isCompleted: false,
-          removeItem
-        };
-      });
-
-      setStQueue([...stqueue, ...todos]);
-
-      return todos[0].id;
-    }
-  );
-  const queueExtrinsic = useRef(
-    ({ accountId, extrinsic, txFailedCb, txSuccessCb, txStartCb, txUpdateCb, isUnsigned }: PartialQueueTxExtrinsic): number =>
-      _addToTxQueue.current({
-        accountId,
-        extrinsic,
-        isUnsigned,
-        txFailedCb,
-        txSuccessCb,
-        txStartCb,
-        txUpdateCb
-      })
-  );
-  const queuePayload = useRef(
-    (payload: SignerPayloadJSON, signerCb: SignerCallback): number =>
-      _addToTxQueue.current({
-        accountId: payload.address,
-        // this is not great, but the Extrinsic we don't need a submittable
-        extrinsic: createType('Extrinsic',
-          { method: createType('Call', payload.method) },
-          { version: payload.version }
-        ) as unknown as SubmittableExtrinsic,
-        payload,
-        signerCb
-      })
-  );
-  const queueRpc = useRef(
-    ({ accountId, rpc, values }: PartialQueueTxRpc): number =>
-      _addToTxQueue.current({
-        accountId,
-        rpc,
-        values
-      })
-  );
-  const queueSetTxStatus = useRef(
-    (id: number, status: QueueTxStatus, result?: SubmittableResult, error?: Error): void => {
-      setTxQueue([...txqueue.map((item): QueueTx =>
-        item.id === id
-          ? {
-            ...item,
-            error: error === undefined
-              ? item.error
-              : error,
-            result: result === undefined
-              ? item.result
-              : result,
-            status: item.status === 'completed'
-              ? item.status
-              : status
-          }
-          : item
-      )]);
-
-      queueAction.current(
-        ((result && result.events) || [])
-          // filter events handled globally, or those we are not interested in, these are
-          // handled by the global overview, so don't add them here
-          .filter((record): boolean => !!record.event && record.event.section !== 'democracy')
-          .map(({ event: { method, section } }): ActionStatus => ({
-            action: `${section}.${method}`,
-            status: section === 'system' && method === 'ExtrinsicFailed'
-              ? 'error'
-              : 'event',
-            message: 'extrinsic event'
-          }))
-      );
-
-      if (STATUS_COMPLETE.includes(status)) {
-        setTimeout(_clearTxStatus.current(id), REMOVE_TIMEOUT);
-      }
-    }
-  );
-
-  return (
-    <QueueProvider value={{
-      queueAction: queueAction.current,
-      queueExtrinsic: queueExtrinsic.current,
-      queuePayload: queuePayload.current,
-      queueRpc: queueRpc.current,
-      queueSetTxStatus: queueSetTxStatus.current,
-      stqueue,
-      txqueue
-    }}>
-      {children}
-    </QueueProvider>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Status/constants.ts b/pioneer/packages/old-apps/react-components/src/Status/constants.ts
deleted file mode 100644
index 374a38587c..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Status/constants.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { QueueTxStatus } from './types';
-
-export const STATUS_COMPLETE: QueueTxStatus[] = [
-  // status from subscription
-  'finalized', 'usurped', 'dropped', 'invalid',
-  // normal completion
-  'cancelled', 'error', 'sent'
-];
diff --git a/pioneer/packages/old-apps/react-components/src/Status/index.tsx b/pioneer/packages/old-apps/react-components/src/Status/index.tsx
deleted file mode 100644
index ff8523072f..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Status/index.tsx
+++ /dev/null
@@ -1,269 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { I18nProps } from '../types';
-import { QueueStatus, QueueTx, QueueTxStatus } from './types';
-
-import React from 'react';
-import styled from 'styled-components';
-import { GenericCall } from '@polkadot/types';
-
-import AddressMini from '../AddressMini';
-import Button from '../Button';
-import Icon from '../Icon';
-import translate from '../translate';
-import { classes } from '../util';
-import StatusContext from './Context';
-import { STATUS_COMPLETE } from './constants';
-
-export { StatusContext };
-
-interface Props extends I18nProps {
-  stqueue?: QueueStatus[];
-  txqueue?: QueueTx[];
-}
-
-function iconName (status: string): any {
-  switch (status) {
-    case 'error':
-      return 'ban';
-
-    case 'event':
-      return 'assistive listening devices';
-
-    case 'received':
-      return 'telegram plane';
-
-    default:
-      return 'check';
-  }
-}
-
-function signerIconName (status: QueueTxStatus): any {
-  switch (status) {
-    case 'cancelled':
-      return 'ban';
-
-    case 'completed':
-    case 'finalized':
-    case 'sent':
-      return 'check';
-
-    case 'dropped':
-    case 'invalid':
-    case 'usurped':
-      return 'arrow down';
-
-    case 'error':
-      return 'warning sign';
-
-    case 'queued':
-      return 'random';
-
-    default:
-      return 'spinner';
-  }
-}
-
-function renderStatus ({ account, action, id, message, removeItem, status }: QueueStatus): React.ReactNode {
-  const addressRendered = account
-    ? <AddressMini value={account} withName={false} />
-    : undefined;
-
-  return (
-    <div
-      className={classes('item', status)}
-      key={id}
-    >
-      <div className='wrapper'>
-        <div className='container'>
-          <Icon
-            name='close'
-            onClick={removeItem}
-          />
-          <div className='short'>
-            <Icon name={iconName(status)} />
-          </div>
-          <div className='desc'>
-            <div className='header'>
-              {action}
-            </div>
-            {addressRendered}
-            <div className='status'>
-              {message}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function renderItem ({ id, extrinsic, error, removeItem, rpc, status }: QueueTx): React.ReactNode {
-  let { method, section } = rpc;
-
-  if (extrinsic) {
-    const found = GenericCall.findFunction(extrinsic.callIndex);
-
-    if (found.section !== 'unknown') {
-      method = found.method;
-      section = found.section;
-    }
-  }
-
-  const icon = signerIconName(status);
-
-  return (
-    <div
-      className={classes('item', status)}
-      key={id}
-    >
-      <div className='wrapper'>
-        <div className='container'>
-          {STATUS_COMPLETE.includes(status) && (
-            <Icon
-              name='close'
-              onClick={removeItem}
-            />
-          )}
-          <div className='short'>
-            <Icon
-              loading={icon === 'spinner'}
-              name={icon}
-            />
-          </div>
-          <div className='desc'>
-            <div className='header'>
-              {section}.{method}
-            </div>
-            <div className='status'>
-              {error ? error.message : status}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function Status ({ className, stqueue = [], txqueue = [], t }: Props): React.ReactElement<Props> | null {
-  const allst: QueueStatus[] = stqueue.filter(({ isCompleted }): boolean => !isCompleted);
-  const alltx: QueueTx[] = txqueue.filter(({ status }): boolean =>
-    !['completed', 'incomplete'].includes(status)
-  );
-  const completedTx = alltx.filter(({ status }): boolean => STATUS_COMPLETE.includes(status));
-
-  if (!allst.length && !alltx.length) {
-    return null;
-  }
-
-  const _onDismiss = (): void => {
-    allst.map((s): void => s.removeItem());
-    completedTx.map((t): void => t.removeItem());
-  };
-
-  return (
-    <div className={`ui--Status ${className}`}>
-      {(allst.length + completedTx.length) > 1 && (
-        <div className='dismiss'>
-          <Button
-            isFluid
-            isNegative
-            onClick={_onDismiss}
-            label={t('Dismiss all notifications')}
-            icon='cancel'
-          />
-        </div>
-      )}
-
-      {alltx.map(renderItem)}
-      {allst.map(renderStatus)}
-    </div>
-  );
-}
-
-export default translate(
-  styled(Status)`
-    display: inline-block;
-    position: fixed;
-    right: 0.25rem;
-    top: 0.25rem;
-    width: 20rem;
-    z-index: 1001;
-
-    .dismiss {
-      margin-bottom: 0.25rem;
-    }
-
-    .item {
-      display: block;
-
-      > .wrapper > .container {
-        align-items: center;
-        background: #00688b;
-        border-radius: $small-corner;
-        color: white;
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 0.25rem;
-        padding: 0 0.5rem;
-        opacity: 0.95;
-        vertical-align: middle;
-        position: relative;
-
-        .desc {
-          flex: 1;
-          overflow: hidden;
-          padding: 0.5rem 1rem;
-
-          .status {
-            font-weight: 700;
-          }
-        }
-
-        .short {
-          font-size: 2.5rem;
-          padding: 0.5rem;
-
-          i.icon {
-            line-height: 1;
-          }
-        }
-
-        .padded {
-          padding: 0.25rem 0 0 0 !important;
-        }
-
-        i.close {
-          position: absolute;
-          top: 0.25rem;
-          right: 0rem;
-          cursor: pointer;
-        }
-      }
-
-      &.cancelled > .wrapper > .container {
-        background: #cd9b1d
-      }
-
-      &.event > .wrapper > .container {
-        background: teal;
-      }
-
-      &.completed > .wrapper > .container,
-      &.finalized > .wrapper > .container,
-      &.sent > .wrapper > .container,
-      &.success > .wrapper > .container {
-        background: green;
-      }
-
-      &.dropped > .wrapper > .container,
-      &.error > .wrapper > .container,
-      &.invalid > .wrapper > .container,
-      &.usurped > .wrapper > .container {
-        background: red;
-      }
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/react-components/src/Status/types.ts b/pioneer/packages/old-apps/react-components/src/Status/types.ts
deleted file mode 100644
index 28b23f9967..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Status/types.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { SubmittableResult } from '@polkadot/api';
-import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-import { SignerResult } from '@polkadot/api/types';
-import { RpcMethod } from '@polkadot/jsonrpc/types';
-import { AccountId, Address } from '@polkadot/types/interfaces';
-import { SignerPayloadJSON } from '@polkadot/types/types';
-
-export type Actions = 'create' | 'edit' | 'restore' | 'forget' | 'backup' | 'changePassword' | 'transfer';
-
-export interface ActionStatus {
-  account?: AccountId | Address | string;
-  action: Actions | string;
-  message?: string;
-  status: 'error' | 'event' | 'queued' | 'received' | 'success';
-}
-
-export interface AccountInfo {
-  accountId?: string | null;
-}
-
-export type QueueTxStatus = 'future' | 'ready' | 'finalized' | 'usurped' | 'dropped' | 'invalid' | 'broadcast' | 'cancelled' | 'completed' | 'error' | 'incomplete' | 'queued' | 'qr' | 'sending' | 'signing' | 'sent' | 'blocked';
-
-export type SignerCallback = (id: number, result: SignerResult | null) => void;
-
-export type TxCallback = (status: SubmittableResult) => void;
-
-export type TxFailedCallback = (status: SubmittableResult | null) => void;
-
-export interface QueueTx extends AccountInfo {
-  error?: Error;
-  extrinsic?: SubmittableExtrinsic;
-  id: number;
-  isUnsigned?: boolean;
-  payload?: SignerPayloadJSON;
-  result?: any;
-  removeItem: () => void;
-  rpc: RpcMethod;
-  signerCb?: SignerCallback;
-  txFailedCb?: TxFailedCallback;
-  txSuccessCb?: TxCallback;
-  txStartCb?: () => void;
-  txUpdateCb?: TxCallback;
-  values?: any[];
-  status: QueueTxStatus;
-}
-
-export interface QueueStatus extends ActionStatus {
-  id: number;
-  isCompleted: boolean;
-  removeItem: () => void;
-}
-
-export interface QueueTxResult {
-  error?: Error;
-  result?: any;
-  status: QueueTxStatus;
-}
-
-export interface QueueTxExtrinsic extends AccountInfo {
-  extrinsic?: SubmittableExtrinsic;
-}
-
-export interface QueueTxRpc extends AccountInfo {
-  rpc: RpcMethod;
-  values: any[];
-}
-
-export interface PartialAccountInfo {
-  accountId?: string | null;
-}
-
-export interface PartialQueueTxExtrinsic extends PartialAccountInfo {
-  extrinsic?: SubmittableExtrinsic;
-  payload?: SignerPayloadJSON;
-  signerCb?: SignerCallback;
-  txFailedCb?: TxFailedCallback;
-  txSuccessCb?: TxCallback;
-  txStartCb?: () => void;
-  txUpdateCb?: TxCallback;
-  isUnsigned?: boolean;
-}
-
-export interface PartialQueueTxRpc extends PartialAccountInfo {
-  rpc: RpcMethod;
-  values: any[];
-}
-
-export type QueueTxRpcAdd = (value: PartialQueueTxRpc) => void;
-
-export type QueueTxExtrinsicAdd = (value: PartialQueueTxExtrinsic) => void;
-
-export type QueueTxPayloadAdd = (payload: SignerPayloadJSON, signerCb: SignerCallback) => void;
-
-export type QueueTxMessageSetStatus = (id: number, status: QueueTxStatus, result?: any, error?: Error) => void;
-
-export type QueueAction$Add = (status: ActionStatus | ActionStatus[]) => void;
-
-export interface QueueProps {
-  stqueue: QueueStatus[];
-  txqueue: QueueTx[];
-  queueAction: QueueAction$Add;
-  queueExtrinsic: QueueTxExtrinsicAdd;
-  queuePayload: QueueTxPayloadAdd;
-  queueRpc: QueueTxRpcAdd;
-  queueSetTxStatus: QueueTxMessageSetStatus;
-}
diff --git a/pioneer/packages/old-apps/react-components/src/SummaryBox.tsx b/pioneer/packages/old-apps/react-components/src/SummaryBox.tsx
deleted file mode 100644
index 8c7062b959..0000000000
--- a/pioneer/packages/old-apps/react-components/src/SummaryBox.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import React from 'react';
-import styled from 'styled-components';
-
-interface Props extends BareProps {
-  children?: React.ReactNode;
-  className?: string;
-}
-
-function SummaryBox ({ children, className }: Props): React.ReactElement<Props> {
-  return (
-    <div className={className}>
-      {children}
-    </div>
-  );
-}
-
-export default styled(SummaryBox)`
-  align-items: stretch;
-  border-radius: 4px;
-  display: flex;
-  flex-wrap: no-wrap;
-  justify-content: space-between;
-  margin-bottom: 1.4rem;
-
-  > section {
-    display: flex;
-    flex: 0 1 auto;
-    text-align: left;
-  }
-
-  details & {
-    display: block;
-    margin: 0.5rem 0.25rem;
-    opacity: 0.75;
-    outline: none;
-    overflow: hidden;
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    + div {
-      margin-top: 0.75rem;
-    }
-  }
-
-  @media(max-width: 767px) {
-    padding: 0;
-
-    .ui--media-small {
-      display: none !important;
-    }
-  }
-
-  @media(min-width: 768px) {
-    margin-bottom: 2.8rem;
-  }
-
-  .ui.label {
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/Tabs.tsx b/pioneer/packages/old-apps/react-components/src/Tabs.tsx
deleted file mode 100644
index af812e63e1..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Tabs.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import React from 'react';
-import { NavLink } from 'react-router-dom';
-import styled from 'styled-components';
-
-import { classes } from './util';
-import Icon from './Icon';
-
-const MyIcon = styled(Icon)`
-  &&& {
-    width: 1rem;
-    margin: 0.7rem 0;
-  }
-`;
-
-export interface TabItem {
-  hasParams?: boolean;
-  isExact?: boolean;
-  isRoot?: boolean;
-  forcedExact?: boolean;
-  name: string;
-  text: React.ReactNode;
-}
-
-interface Props extends BareProps {
-  basePath: string;
-  hidden?: string[];
-  items: TabItem[];
-  isSequence?: boolean;
-}
-
-function renderItem ({ basePath, isSequence, items }: Props): (tabItem: TabItem, index: number) => React.ReactNode {
-  return function Tab ({ hasParams, isRoot, name, text, ...tab }: TabItem, index: number): React.ReactNode {
-    const to = isRoot
-      ? basePath
-      : `${basePath}/${name}`;
-    // only do exact matching when not the fallback (first position tab),
-    // params are problematic for dynamic hidden such as app-accounts
-    const isExact = tab.forcedExact !== undefined ? tab.forcedExact : (
-      tab.isExact || !hasParams || (!isSequence && index === 0)
-    );
-
-    return (
-      <React.Fragment key={to}>
-        <NavLink
-          activeClassName='active'
-          className='item'
-          exact={isExact}
-          strict={isExact}
-          to={to}
-        >
-          {text}
-        </NavLink>
-        {(isSequence && index < items.length - 1) && (
-          <MyIcon name='arrow right' />
-        )}
-      </React.Fragment>
-    );
-  };
-}
-
-export default function Tabs (props: Props): React.ReactElement<Props> {
-  const { className, hidden = [], items, style } = props;
-
-  return (
-    <div
-      className={classes('ui--Menu ui menu tabular', className)}
-      style={style}
-    >
-      {
-        items
-          .filter(({ name }): boolean => !hidden.includes(name))
-          .map(renderItem(props))
-      }
-    </div>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Toggle.tsx b/pioneer/packages/old-apps/react-components/src/Toggle.tsx
deleted file mode 100644
index 7ecd44a404..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Toggle.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import React from 'react';
-import SUICheckbox from 'semantic-ui-react/dist/commonjs/modules/Checkbox';
-import styled from 'styled-components';
-
-interface Props extends BareProps {
-  asSwitch?: boolean;
-  defaultValue?: boolean;
-  isDisabled?: boolean;
-  label: React.ReactNode;
-  onChange?: (isChecked: boolean) => void;
-  value?: boolean;
-}
-
-function Toggle ({ className, asSwitch = true, defaultValue, isDisabled, onChange, value, label }: Props): React.ReactElement<Props> {
-  const _onChange = (_: React.FormEvent<HTMLInputElement>, { checked }: any): void => {
-    onChange && onChange(checked);
-  };
-
-  return (
-    <div className={className}>
-      <label>{label}</label>
-      <SUICheckbox
-        checked={value}
-        disabled={isDisabled}
-        defaultChecked={defaultValue}
-        onChange={_onChange}
-        toggle={asSwitch}
-      />
-    </div>
-  );
-}
-
-export default styled(Toggle)`
-  > label {
-    display: inline-block;
-    margin: 0 0.5rem;
-  }
-
-  > label,
-  > .ui.checkbox {
-    vertical-align: middle;
-  }
-
-  .ui.checkbox + label {
-    color: rgba(78, 78, 78, 0.75);
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/Tooltip.tsx b/pioneer/packages/old-apps/react-components/src/Tooltip.tsx
deleted file mode 100644
index cfb7ba726f..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Tooltip.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from './types';
-
-import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import ReactTooltip from 'react-tooltip';
-
-import { classes } from './util';
-
-const rootElement = document.getElementById('tooltips');
-
-interface Props extends BareProps {
-  dataFor?: string;
-  effect?: 'solid' | 'float';
-  offset?: {
-    bottom?: number;
-    left?: number;
-    right?: number;
-    top?: number;
-  };
-  place?: 'bottom' | 'top' | 'right' | 'left';
-  text: React.ReactNode;
-  trigger: string;
-}
-
-export default function Tooltip ({ className, effect = 'solid', offset, place = 'bottom', text, trigger }: Props): React.ReactElement<Props> | null {
-  const [tooltipContainer] = useState(document.createElement('div'));
-
-  useEffect((): () => void => {
-    if (rootElement !== null) {
-      rootElement.appendChild(tooltipContainer);
-    }
-
-    return (): void => {
-      if (rootElement !== null) {
-        rootElement.removeChild(tooltipContainer);
-      }
-    };
-  }, []);
-
-  return ReactDOM.createPortal(
-    <ReactTooltip
-      id={trigger}
-      delayShow={250}
-      effect={effect}
-      offset={offset}
-      place={place}
-      className={classes('ui--Tooltip', className)}
-    >
-      {text}
-    </ReactTooltip>,
-    tooltipContainer
-  );
-}
diff --git a/pioneer/packages/old-apps/react-components/src/TreasuryProposal.tsx b/pioneer/packages/old-apps/react-components/src/TreasuryProposal.tsx
deleted file mode 100644
index 14da241617..0000000000
--- a/pioneer/packages/old-apps/react-components/src/TreasuryProposal.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { TreasuryProposal as TreasuryProposalType } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React, { useContext, useEffect, useState } from 'react';
-import { InputAddress, Labelled, Static } from '@polkadot/react-components';
-import { ApiContext } from '@polkadot/react-api';
-import { Option } from '@polkadot/types';
-import { formatBalance } from '@polkadot/util';
-
-import Inset, { InsetProps } from './Inset';
-import translate from './translate';
-
-interface Props extends I18nProps {
-  className?: string;
-  asInset?: boolean;
-  insetProps?: Partial<InsetProps>;
-  onClick?: () => void;
-  proposalId?: string;
-  proposal?: TreasuryProposalType | null;
-  withLink?: boolean;
-}
-
-function TreasuryProposal ({ className, asInset, insetProps, onClick, proposal, proposalId, t }: Props): React.ReactElement<Props> | null {
-  const [stateProposal, setProposal] = useState<TreasuryProposalType | null>(null);
-  const { api } = useContext(ApiContext);
-
-  useEffect((): void => {
-    if (!proposal && proposalId) {
-      api.query.treasury
-        .proposals<Option<TreasuryProposalType>>(proposalId)
-        .then((proposal): TreasuryProposalType | null => proposal.unwrapOr(null))
-        .catch((): null => null)
-        .then(setProposal);
-    } else {
-      setProposal(proposal || null);
-    }
-  }, [proposal, proposalId]);
-
-  if (!stateProposal) {
-    return null;
-  }
-
-  const { bond, beneficiary, proposer, value } = stateProposal;
-
-  const inner = (
-    <>
-      <Labelled label={t('proposed by')}>
-        <InputAddress
-          isDisabled
-          defaultValue={proposer}
-          value={proposer}
-          withLabel={false}
-        />
-      </Labelled>
-      <Labelled label={t('beneficiary')}>
-        <InputAddress
-          isDisabled
-          defaultValue={beneficiary}
-          value={beneficiary}
-          withLabel={false}
-        />
-      </Labelled>
-      <Static label={t('value')}>
-        {formatBalance(value)}
-      </Static>
-      <Static label={t('bond')}>
-        {formatBalance(bond)}
-      </Static>
-    </>
-  );
-
-  if (asInset) {
-    return (
-      <Inset
-        className={className}
-        {...insetProps}
-      >
-        {inner}
-      </Inset>
-    );
-  }
-
-  return (
-    <div
-      className={className}
-      onClick={onClick && onClick}
-    >
-      {inner}
-    </div>
-  );
-}
-
-export default translate(TreasuryProposal);
diff --git a/pioneer/packages/old-apps/react-components/src/TxButton.tsx b/pioneer/packages/old-apps/react-components/src/TxButton.tsx
deleted file mode 100644
index a29cfc9159..0000000000
--- a/pioneer/packages/old-apps/react-components/src/TxButton.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-123code authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-import { ApiProps } from '@polkadot/react-api/types';
-import { assert, isFunction, isUndefined } from '@polkadot/util';
-import { Index } from '@polkadot/types/interfaces';
-import { IExtrinsic } from '@polkadot/types/types';
-import { QueueTx, QueueTxExtrinsicAdd, TxCallback, TxFailedCallback } from './Status/types';
-
-import React from 'react';
-import { SubmittableResult } from '@polkadot/api';
-import { withApi } from '@polkadot/react-api';
-
-import Button from './Button';
-import { Button$Sizes } from './Button/types';
-import { QueueConsumer } from './Status/Context';
-
-type ConstructFn = () => any[];
-
-interface InjectedProps {
-  queueExtrinsic: QueueTxExtrinsicAdd;
-  txqueue: QueueTx[];
-}
-
-interface Props extends ApiProps {
-  accountId?: string;
-  accountNonce?: Index;
-  className?: string;
-  extrinsic?: IExtrinsic | SubmittableExtrinsic;
-  icon: string;
-  iconSize?: Button$Sizes;
-  isBasic?: boolean;
-  isDisabled?: boolean;
-  isNegative?: boolean;
-  isPrimary?: boolean;
-  isUnsigned?: boolean;
-  label: React.ReactNode;
-  onClick?: () => any;
-  onFailed?: TxFailedCallback;
-  onStart?: () => void;
-  onSuccess?: TxCallback;
-  onUpdate?: TxCallback;
-  params?: any[] | ConstructFn;
-  tooltip?: string;
-  tx?: string;
-  withSpinner?: boolean;
-}
-
-type InnerProps = Props & InjectedProps;
-
-interface State {
-  extrinsic?: SubmittableExtrinsic;
-  isSending: boolean;
-}
-
-class TxButtonInner extends React.PureComponent<InnerProps> {
-  public state: State = {
-    isSending: false
-  };
-
-  public render (): React.ReactNode {
-    const { accountId, className, icon, iconSize, isBasic, isDisabled, isNegative, isPrimary, isUnsigned, label, tooltip } = this.props;
-    const { isSending } = this.state;
-    const needsAccount = isUnsigned
-      ? false
-      : !accountId;
-
-    return (
-      <Button
-        className={className}
-        tooltip={tooltip}
-        icon={icon}
-        isBasic={isBasic}
-        isDisabled={isSending || isDisabled || needsAccount}
-        isLoading={isSending}
-        isNegative={isNegative}
-        isPrimary={
-          isUndefined(isPrimary)
-            ? (!isNegative && !isBasic)
-            : isPrimary
-        }
-        label={label}
-        onClick={this.send}
-        size={iconSize}
-      />
-    );
-  }
-
-  protected send = (): void => {
-    const { accountId, api, extrinsic: propsExtrinsic, isUnsigned, onClick, onFailed, onStart, onSuccess, onUpdate, params = [], queueExtrinsic, tx = '', withSpinner = true } = this.props;
-    let extrinsic: any;
-
-    if (propsExtrinsic) {
-      extrinsic = propsExtrinsic;
-    } else {
-      const [section, method] = tx.split('.');
-
-      assert(api.tx[section] && api.tx[section][method], `Unable to find api.tx.${section}.${method}`);
-
-      extrinsic = api.tx[section][method](...(
-        isFunction(params)
-          ? params()
-          : params
-      ));
-    }
-
-    assert(extrinsic, 'Expected generated extrinsic passed to TxButton');
-
-    if (withSpinner) {
-      this.setState({ isSending: true });
-    }
-
-    queueExtrinsic({
-      accountId,
-      extrinsic,
-      isUnsigned,
-      txFailedCb: withSpinner ? this.onFailed : onFailed,
-      txStartCb: onStart,
-      txSuccessCb: withSpinner ? this.onSuccess : onSuccess,
-      txUpdateCb: onUpdate
-    });
-
-    onClick && onClick();
-  }
-
-  private onFailed = (result: SubmittableResult | null): void => {
-    const { onFailed } = this.props;
-
-    this.setState({ isSending: false });
-
-    onFailed && onFailed(result);
-  }
-
-  private onSuccess = (result: SubmittableResult): void => {
-    const { onSuccess } = this.props;
-
-    this.setState({ isSending: false });
-
-    onSuccess && onSuccess(result);
-  }
-}
-
-class TxButton extends React.PureComponent<Props, State> {
-  protected button: any = React.createRef();
-
-  public render (): React.ReactNode {
-    return (
-      <QueueConsumer>
-        {({ queueExtrinsic, txqueue }): React.ReactNode => (
-          <TxButtonInner
-            {...this.props}
-            queueExtrinsic={queueExtrinsic}
-            txqueue={txqueue}
-            ref={this.button}
-          />
-        )}
-      </QueueConsumer>
-    );
-  }
-
-  protected send = (): void => {
-    this.button.current.send();
-  }
-}
-
-export default withApi(TxButton);
diff --git a/pioneer/packages/old-apps/react-components/src/TxComponent.tsx b/pioneer/packages/old-apps/react-components/src/TxComponent.tsx
deleted file mode 100644
index 4abf31b6a4..0000000000
--- a/pioneer/packages/old-apps/react-components/src/TxComponent.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-transfer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import React from 'react';
-
-export default class TxComponent<P, S> extends React.PureComponent<P, S> {
-  protected button: any;
-
-  constructor (props: P) {
-    super(props);
-
-    this.button = React.createRef();
-  }
-
-  protected sendTx = (): void => {
-    const { component } = this.button.current;
-
-    if (component) {
-      component.current.send();
-    }
-  }
-
-  protected submit = (): void => {
-    if (this.button && this.button.current && this.button.current.click) {
-      this.button.current.click();
-    }
-  }
-}
diff --git a/pioneer/packages/old-apps/react-components/src/TxModal.tsx b/pioneer/packages/old-apps/react-components/src/TxModal.tsx
deleted file mode 100644
index e6fc1100eb..0000000000
--- a/pioneer/packages/old-apps/react-components/src/TxModal.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-contracts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import { Button, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
-
-export interface TxModalProps extends I18nProps {
-  onSubmit?: () => void;
-  onClose?: () => void;
-  onSuccess?: () => void;
-  onFailed?: () => void;
-}
-
-export interface TxModalState {
-  accountId?: string | null;
-  isBusy: boolean;
-  isOpen: boolean;
-}
-
-export default class TxModal<P extends TxModalProps, S extends TxModalState> extends TxComponent<P, S> {
-  protected defaultState: S = {
-    accountId: null,
-    isOpen: false,
-    isBusy: false
-  } as unknown as S;
-
-  public state: S = this.defaultState;
-
-  public render (): React.ReactNode {
-    const { isOpen } = this.state;
-
-    return (
-      <>
-        {this.renderTrigger && this.renderTrigger()}
-        <Modal
-          className='ui--Modal'
-          dimmer='inverted'
-          onClose={this.hideModal}
-          open={isOpen}
-        >
-          <Modal.Header>
-            {this.headerText()}
-          </Modal.Header>
-          <Modal.Content>
-            {this.renderPreContent()}
-            {this.renderInputAccount()}
-            {this.renderContent()}
-          </Modal.Content>
-          <Modal.Actions>
-            {this.renderButtons()}
-          </Modal.Actions>
-        </Modal>
-      </>
-    );
-  }
-
-  protected headerText = (): React.ReactNode => '';
-
-  protected accountHelp = (): React.ReactNode => this.props.t('Select the account to use for this action.');
-
-  protected accountLabel = (): React.ReactNode => this.props.t('using my account');
-
-  protected submitLabel = (): React.ReactNode => this.props.t('Submit');
-
-  protected cancelLabel = (): React.ReactNode => this.props.t('Cancel');
-
-  protected onChangeAccount = (accountId: string | null): void => {
-    this.setState({ accountId });
-  }
-
-  protected onSubmit = (): void => {
-    const { onSubmit } = this.props;
-
-    this.toggleBusy(true);
-    onSubmit && onSubmit();
-  }
-
-  protected onSuccess = (): void => {
-    const { onClose, onSuccess } = this.props;
-
-    onSuccess && onSuccess();
-    onClose && onClose();
-    this.hideModal();
-  }
-
-  protected onFailed = (): void => {
-    const { onFailed } = this.props;
-
-    this.toggleBusy(false);
-    onFailed && onFailed();
-  }
-
-  protected isDisabled = (): boolean => {
-    const { accountId } = this.state;
-
-    return !accountId;
-  }
-
-  protected toggleBusy = (isBusy: boolean): () => void =>
-    (): void => {
-      this.setState({
-        isBusy
-      });
-    }
-
-  protected isUnsigned: () => boolean = (): boolean => false;
-
-  protected txMethod: () => string = (): string => '';
-
-  protected txParams: () => any[] = (): any[] => [];
-
-  protected renderContent: () => React.ReactNode = (): React.ReactNode => null;
-
-  protected renderPreContent: () => React.ReactNode = (): React.ReactNode => null;
-
-  protected renderTrigger?: () => React.ReactNode = (): React.ReactNode => null;
-
-  protected renderButtons: () => React.ReactNode = (): React.ReactNode => {
-    return (
-      <Button.Group>
-        {this.renderCancelButton()}
-        {this.renderTxButton()}
-      </Button.Group>
-    );
-  }
-
-  protected renderInputAccount (): React.ReactNode {
-    const { accountId, isBusy } = this.state;
-
-    return (
-      <InputAddress
-        defaultValue={accountId}
-        help={this.accountHelp()}
-        isDisabled={isBusy}
-        isInput={false}
-        label={this.accountLabel()}
-        onChange={this.onChangeAccount}
-        type='account'
-        value={accountId}
-      />
-    );
-  }
-
-  protected renderTxButton (): React.ReactNode {
-    const { accountId } = this.state;
-
-    return (
-      <TxButton
-        {...(
-          this.isUnsigned()
-            ? { isUnsigned: true }
-            : { accountId }
-        )}
-        isDisabled={this.isDisabled()}
-        isPrimary
-        label={this.submitLabel()}
-        icon='sign-in'
-        onClick={this.onSubmit}
-        onFailed={this.onFailed}
-        onSuccess={this.onSuccess}
-        params={this.txParams()}
-        ref={this.button}
-        tx={this.txMethod()}
-      />
-    );
-  }
-
-  protected renderCancelButton (): React.ReactNode {
-    const { t } = this.props;
-
-    return (
-      <>
-        <Button
-          isNegative
-          onClick={this.hideModal}
-          label={t('Cancel')}
-          icon='cancel'
-        />
-        <Button.Or />
-      </>
-    );
-  }
-
-  protected reset = (): void => {
-    this.setState(
-      this.defaultState
-    );
-  }
-
-  protected showModal = (): void => {
-    this.setState({
-      isOpen: true
-    });
-  }
-
-  protected hideModal = (): void => {
-    const { onClose } = this.props;
-
-    onClose && onClose();
-
-    this.setState(
-      this.defaultState
-    );
-  }
-}
diff --git a/pioneer/packages/old-apps/react-components/src/Voting.tsx b/pioneer/packages/old-apps/react-components/src/Voting.tsx
deleted file mode 100644
index ad3efe5d52..0000000000
--- a/pioneer/packages/old-apps/react-components/src/Voting.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Proposal } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-
-import BN from 'bn.js';
-import React from 'react';
-import keyring from '@polkadot/ui-keyring';
-import { withMulti, withObservable } from '@polkadot/react-api';
-
-import translate from './translate';
-import Button from './Button';
-import Dropdown from './Dropdown';
-import ProposedAction from './ProposedAction';
-import TxModal, { TxModalProps, TxModalState } from './TxModal';
-import { isTreasuryProposalVote } from './util';
-
-interface Props extends I18nProps, TxModalProps {
-  allAccounts?: SubjectInfo;
-  hash?: string;
-  idNumber: BN | number;
-  isCouncil: boolean;
-  proposal?: Proposal | null;
-  preContent?: React.ReactNode;
-}
-
-interface State extends TxModalState {
-  voteOptions: { text: React.ReactNode; value: boolean }[];
-  voteValue: boolean;
-}
-
-class Voting extends TxModal<Props, State> {
-  public state: State;
-
-  protected headerText = (): string => {
-    const { isCouncil, t } = this.props;
-
-    return isCouncil ? t('Vote on council proposal') : t('Vote on proposal');
-  }
-
-  protected accountLabel = (): string => this.props.t('Vote with account');
-
-  protected accountHelp = (): string => this.props.t('Select the account you wish to vote with. You can approve "aye" or deny "nay" the proposal.');
-
-  protected txMethod = (): string => {
-    const { isCouncil } = this.props;
-
-    return isCouncil ? 'council.vote' : 'democracy.vote';
-  }
-
-  protected txParams = (): any[] => {
-    const { hash, idNumber, isCouncil } = this.props;
-    const { voteValue } = this.state;
-
-    return isCouncil
-      ? [hash, idNumber, voteValue]
-      : [idNumber, voteValue];
-  }
-
-  constructor (props: Props) {
-    super(props);
-
-    const { t } = props;
-
-    this.state = {
-      ...this.defaultState,
-      voteOptions: [
-        { text: t('Aye, I approve'), value: true },
-        { text: t('Nay, I do not approve'), value: false }
-      ],
-      voteValue: true
-    };
-  }
-
-  protected renderPreContent = (): React.ReactNode => {
-    const { idNumber, proposal } = this.props;
-
-    return (
-      <>
-        <ProposedAction
-          expandNested={isTreasuryProposalVote(proposal)}
-          idNumber={idNumber}
-          isCollapsible
-          proposal={proposal}
-        />
-        <br />
-        <br />
-      </>
-    );
-  }
-
-  protected renderContent = (): React.ReactNode => {
-    const { t } = this.props;
-    const { voteOptions, voteValue } = this.state;
-
-    return (
-      <Dropdown
-        help={t('Select your vote preferences for this proposal, either to approve or disapprove')}
-        label={t('record my vote as')}
-        options={voteOptions}
-        onChange={this.onChangeVote}
-        value={voteValue}
-      />
-    );
-  }
-
-  protected renderTrigger = (): React.ReactNode => {
-    const { t } = this.props;
-
-    return (
-      <div className='ui--Row-buttons'>
-        <Button
-          isPrimary
-          label={t('Vote')}
-          icon='check'
-          onClick={this.showModal}
-        />
-      </div>
-    );
-  }
-
-  private onChangeVote = (voteValue: boolean): void => {
-    this.setState({ voteValue });
-  }
-}
-
-export default withMulti(
-  Voting,
-  translate,
-  withObservable(keyring.accounts.subject, { propName: 'allAccounts' })
-);
diff --git a/pioneer/packages/old-apps/react-components/src/codeflask.d.ts b/pioneer/packages/old-apps/react-components/src/codeflask.d.ts
deleted file mode 100644
index 3e967b9125..0000000000
--- a/pioneer/packages/old-apps/react-components/src/codeflask.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// Copyright 2017-2019 @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/pioneer/packages/old-apps/react-components/src/constants.ts b/pioneer/packages/old-apps/react-components/src/constants.ts
deleted file mode 100644
index 6184203aef..0000000000
--- a/pioneer/packages/old-apps/react-components/src/constants.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright 2017-2019 @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.
-
-export enum BitLengthOption {
-  CHAIN_SPEC = 128,
-  NORMAL_NUMBERS = 32
-}
-
-export enum ScreenSizes {
-  DESKTOP = 992,
-  TABLET = 768,
-  PHONE = 576
-}
-
-export const rewardDestinationOptions = [
-  { text: 'Stash account (increase the amount at stake)', value: 0 },
-  { text: 'Stash account (do not increase the amount at stake)', value: 1 },
-  { text: 'Controller account', value: 2 }
-];
diff --git a/pioneer/packages/old-apps/react-components/src/gif.d.ts b/pioneer/packages/old-apps/react-components/src/gif.d.ts
deleted file mode 100644
index 34f9cd03fd..0000000000
--- a/pioneer/packages/old-apps/react-components/src/gif.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-assets 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 '*.gif' {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const content: any;
-  export default content;
-}
diff --git a/pioneer/packages/old-apps/react-components/src/hooks/debounce.tsx b/pioneer/packages/old-apps/react-components/src/hooks/debounce.tsx
deleted file mode 100644
index cb48b4722d..0000000000
--- a/pioneer/packages/old-apps/react-components/src/hooks/debounce.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { useState, useEffect } from 'react';
-
-// Debounces inputs
-export default function useDebounce <T> (value: T, delay = 250): T {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-
-  useEffect((): () => void => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-
-    // each time it renders, it clears
-    return (): void => {
-      clearTimeout(handler);
-    };
-  }, [value]);
-
-  return debouncedValue;
-}
diff --git a/pioneer/packages/old-apps/react-components/src/hooks/index.ts b/pioneer/packages/old-apps/react-components/src/hooks/index.ts
deleted file mode 100644
index 0c61f0e9f1..0000000000
--- a/pioneer/packages/old-apps/react-components/src/hooks/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// Copyright 2017-2019 @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.
-
-export { default as useDebounce } from './debounce';
diff --git a/pioneer/packages/old-apps/react-components/src/i18n.ts b/pioneer/packages/old-apps/react-components/src/i18n.ts
deleted file mode 100644
index d401d02e37..0000000000
--- a/pioneer/packages/old-apps/react-components/src/i18n.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import i18n from 'i18next';
-// import LanguageDetector from 'i18next-browser-languagedetector';
-import Backend from 'i18next-xhr-backend';
-import { initReactI18next } from 'react-i18next';
-
-i18n
-  .use(Backend)
-  // .use(LanguageDetector)
-  .use(initReactI18next)
-  .init({
-    backend: {
-      loadPath: 'locales/{{lng}}/{{ns}}.json'
-    },
-    debug: false,
-    defaultNS: 'ui',
-    fallbackLng: false,
-    interpolation: {
-      escapeValue: false
-    },
-    lng: 'en',
-    ns: [
-      'app-123code',
-      'app-accounts',
-      'app-address-book',
-      'app-claims',
-      'app-contracts',
-      'app-council',
-      'app-dashboard',
-      'app-democracy',
-      'app-explorer',
-      'app-extrinsics',
-      'app-generic-asset',
-      'app-js',
-      'app-parachains',
-      'app-settings',
-      'app-staking',
-      'app-storage',
-      'app-sudo',
-      'app-toolbox',
-      'app-transfer',
-      'app-treasury',
-      'apps',
-      'apps-routing',
-      'react-api',
-      'react-components',
-      'react-params',
-      'react-query',
-      'react-signer'
-    ],
-    keySeparator: false,
-    nsSeparator: false,
-    react: {
-      wait: true
-    }
-  })
-  .catch((error: Error): void =>
-    console.log('i18n: failure', error)
-  );
-
-export default i18n;
diff --git a/pioneer/packages/old-apps/react-components/src/index.tsx b/pioneer/packages/old-apps/react-components/src/index.tsx
deleted file mode 100644
index 4264ca3a5b..0000000000
--- a/pioneer/packages/old-apps/react-components/src/index.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-// Copyright 2017-2019 @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.
-
-export { default as ActionItem } from './ActionItem';
-export { default as AddressCard } from './AddressCard';
-export { default as AddressInfo } from './AddressInfo';
-export { default as AddressMini } from './AddressMini';
-export { default as AddressRow } from './AddressRow';
-export { default as Available } from './Available';
-export { default as Badge } from './Badge';
-export { default as Balance } from './Balance';
-export { default as Bonded } from './Bonded';
-export { default as Bubble } from './Bubble';
-export { default as Button } from './Button';
-export { default as Call } from './Call';
-export { default as Card } from './Card';
-export { default as CardGrid } from './CardGrid';
-export { default as CardSummary } from './CardSummary';
-export { default as ChainImg } from './ChainImg';
-export { default as ChainLock } from './ChainLock';
-export { default as Chart } from './Chart';
-export { default as Columar } from './Columar';
-export { default as Column } from './Column';
-export { default as CodeRow } from './CodeRow';
-export { default as CopyButton } from './CopyButton';
-export { default as CryptoType } from './CryptoType';
-export { default as Dropdown } from './Dropdown';
-export { default as Editor } from './Editor';
-export { default as Event } from './Event';
-export { default as Expander } from './Expander';
-export { default as Extrinsic } from './Extrinsic';
-export { default as FilterOverlay } from './FilterOverlay';
-export { default as Forget } from './Forget';
-export { default as HelpOverlay } from './HelpOverlay';
-export { default as Icon } from './Icon';
-export { default as IconLink } from './IconLink';
-export { default as IdentityIcon } from './IdentityIcon';
-export { default as InfoForInput } from './InfoForInput';
-export { default as Input } from './Input';
-export { default as InputAddress } from './InputAddress';
-export { default as InputAddressSimple } from './InputAddressSimple';
-export { default as InputBalance } from './InputBalance';
-export { default as InputBalanceBonded } from './InputBalanceBonded';
-export { default as InputConsts } from './InputConsts';
-export { default as InputError } from './InputError';
-export { default as InputExtrinsic } from './InputExtrinsic';
-export { default as InputFile } from './InputFile';
-export { default as InputFileAsync } from './InputFileAsync';
-export { default as InputNumber } from './InputNumber';
-export { default as InputRpc } from './InputRpc';
-export { default as InputStorage } from './InputStorage';
-export { default as InputTags } from './InputTags';
-export { default as Inset } from './Inset';
-export { default as Label } from './Label';
-export { default as LabelHelp } from './LabelHelp';
-export { default as Labelled } from './Labelled';
-export { default as LinkPolkascan } from './LinkPolkascan';
-export { default as LockedVote } from './LockedVote';
-export { default as Menu } from './Menu';
-export { default as Messages } from './Messages';
-export { default as MessageSignature } from './MessageSignature';
-export { default as Modal } from './Modal';
-export { default as Nonce } from './Nonce';
-export { default as Output } from './Output';
-export { default as Password } from './Password';
-export { default as Progress } from './Progress';
-export { default as ProposedAction } from './ProposedAction';
-export { default as OnlineStatus } from './OnlineStatus';
-export { default as Row } from './Row';
-export { default as Static } from './Static';
-export { default as Status, StatusContext } from './Status';
-export { default as SummaryBox } from './SummaryBox';
-export { default as Tabs } from './Tabs';
-export { default as Toggle } from './Toggle';
-export { default as Tooltip } from './Tooltip';
-export { default as TreasuryProposal } from './TreasuryProposal';
-export { default as TxButton } from './TxButton';
-export { default as TxComponent } from './TxComponent';
-export { default as TxModal } from './TxModal';
-export { default as Voting } from './Voting';
-
-export { default as media } from './media';
diff --git a/pioneer/packages/old-apps/react-components/src/media.ts b/pioneer/packages/old-apps/react-components/src/media.ts
deleted file mode 100644
index d6692b53eb..0000000000
--- a/pioneer/packages/old-apps/react-components/src/media.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { css } from 'styled-components';
-
-import { ScreenSizes } from './constants';
-
-type MediaCss = {
-  [index in keyof typeof ScreenSizes]: (values: TemplateStringsArray) => any
-};
-
-const media = Object
-  .keys(ScreenSizes)
-  .reduce((acc: MediaCss, label: any): MediaCss => {
-    const size: number = ScreenSizes[label] as any;
-
-    acc[label] = (values: TemplateStringsArray): unknown =>
-      css`
-        @media (min-width: ${size / 16}em) {
-          ${values}
-        }
-      `;
-
-    return acc;
-  }, {} as unknown as MediaCss);
-
-export default media;
diff --git a/pioneer/packages/old-apps/react-components/src/styles/components.ts b/pioneer/packages/old-apps/react-components/src/styles/components.ts
deleted file mode 100644
index f99496b890..0000000000
--- a/pioneer/packages/old-apps/react-components/src/styles/components.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { css } from 'styled-components';
-
-export default css`
-  .ui--output {
-    background: #fefefe;
-    border-radius: 4px;
-    border: 1px dashed #eee;
-    box-sizing: border-box;
-    line-height: 1rem;
-    margin: 0.25rem;
-    padding: .75rem 1rem;
-    position: relative;
-    word-wrap: break-word;
-
-    &.error {
-      background: #fff6f6;
-      border-color: #e0b4b4;
-    }
-
-    &.monospace {
-      font-family: monospace;
-    }
-
-    .ui--output-button {
-      position: absolute;
-      top: 0.25rem;
-      right: 0.25rem;
-    }
-  }
-
-  .ui--Button-Group .button {
-    border-radius: .28571429rem !important;
-  }
-
-  header .ui--Button-Group {
-    text-align: center;
-  }
-
-  .ui.input .ui--Button-Group {
-    margin: 0;
-  }
-
-  button.ui.icon.icon-button {
-    padding-top: 0;
-    padding-right: 0;
-    padding-bottom: 0.3em;
-    padding-left: 0.3em;
-    color: #2e86ab  !important;
-    background: none  !important;
-  }
-
-  .editable {
-    cursor: pointer;
-  }
-
-  .ui--DropdownLinked.ui--row {
-    .small .ui.selection.dropdown {
-      border-right: none;
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
-      min-width: 5rem;
-    }
-
-    .large .ui.selection.dropdown {
-      border-left: none;
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
-    }
-  }
-
-  .ui--Input {
-    &.disabled {
-      overflow: hidden;
-
-      input {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-
-    .ui--SiDropdown {
-      width: 6rem;
-      text-align: center;
-    }
-
-    .ui--MaxButton {
-      position: absolute;
-      right: 6.5rem;
-      top: 20%;
-      height: 60%;
-      text-transform: uppercase;
-      padding: 0 0.5rem !important;
-      border-radius: 0.3rem !important;
-    }
-  }
-
-  .ui--Static {
-    min-width: 2rem; /* adjust width from normal dropdown sizing */
-    overflow: hidden;
-    word-break: break-all;
-  }
-
-  .ui--Tooltip {
-    text-align: center;
-    z-index: 1002;
-    max-width: 300px;
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/styles/form.ts b/pioneer/packages/old-apps/react-components/src/styles/form.ts
deleted file mode 100644
index 998d62cee9..0000000000
--- a/pioneer/packages/old-apps/react-components/src/styles/form.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { css } from 'styled-components';
-
-export default css`
-  .ui--grid,
-  .ui--row {
-    width: 100%;
-  }
-
-  .ui--grid,
-  .ui--row {
-    align-items: stretch;
-    display: flex;
-    flex-wrap: nowrap;
-    flex-direction: row;
-    justify-content: flex-start;
-    text-align: left;
-    min-width: 0;
-  }
-
-  .ui--grid > div,
-  .ui--row > div {
-    box-sizing: border-box;
-    min-width: 0;
-  }
-
-  .ui--grid > div:not(.grow):not(.shrink),
-  .ui--row > div:not(.grow):not(.shrink) {
-    width: 100%;
-  }
-
-  .ui--grid > div:not(.shrink),
-  .ui--grid > div.full,
-  .ui--row > div.full {
-    flex: 0 100%;
-  }
-
-  .ui--grid > div.shrink,
-  .ui--row > div.shrink {
-    flex: 0 1 auto;
-  }
-
-  .ui--grid > div.grow,
-  .ui--row > div.grow {
-    flex: 1 1 auto;
-  }
-
-  .ui--grid > div.large,
-  .ui--row > div.large {
-    flex: 0 75%;
-  }
-
-  .ui--grid > div.medium,
-  .ui--row > div.medium {
-    flex: 0 50%;
-  }
-
-  .ui--grid > div.small,
-  .ui--row > div.small {
-    flex: 0 25%;
-  }
-
-  .ui--grid > div.sixty6,
-  .ui--row > div.sixty6 {
-    flex: 0 66.66%;
-  }
-
-  .ui--grid > div.thirty3,
-  .ui--row > div.thirty3 {
-    flex: 0 33.33%;
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/styles/index.ts b/pioneer/packages/old-apps/react-components/src/styles/index.ts
deleted file mode 100644
index 592b19201e..0000000000
--- a/pioneer/packages/old-apps/react-components/src/styles/index.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { createGlobalStyle } from 'styled-components';
-
-import media from '../media';
-import cssComponents from './components';
-import cssForm from './form';
-import cssMedia from './media';
-import cssRx from './rx';
-import cssSemantic from './semantic';
-import cssTheme from './theme';
-import cssJoystream from './joystream';
-
-export default createGlobalStyle`
-  #root {
-    color: #4e4e4e;
-    font-family: sans-serif;
-    height: 100%;
-  }
-
-  a {
-    cursor: pointer;
-  }
-
-  article {
-    background: white;
-    border: 1px solid #f2f2f2;
-    border-radius: 0.25rem;
-    box-sizing: border-box;
-    margin: 0.25rem;
-    padding: 1.25rem;
-    position: relative;
-    text-align: left;
-
-    &:hover {
-      /* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */
-      /* box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-      border-color: transparent; */
-    }
-
-    &:not(:hover) {
-      .ui.button:not(.disabled) {
-        background: #eee !important;
-        color: #555 !important;
-      }
-
-      .ui.toggle.checkbox input:checked~.box:before,
-      .ui.toggle.checkbox input:checked~label:before {
-        background-color: #eee !important;
-      }
-
-      .ui.button.mini {
-        visibility: hidden;
-      }
-    }
-
-    > ul {
-      margin: 0;
-      padding: 0;
-    }
-
-    &.error,
-    &.warning {
-      margin-left: 2.25rem;
-    }
-
-    &.error {
-      background: #fff6f6;
-      border-color: #e0b4b4;
-      color: #9f3a38;
-    }
-
-    &.padded {
-      padding: 0.75rem 1rem;
-
-      > div {
-        margin: 0.25rem;
-      }
-    }
-
-    &.warning {
-      background: #ffffe0;
-      border-color: #eeeeae;
-    }
-  }
-
-  body {
-    height: 100%;
-    margin: 0;
-  }
-
-  br {
-    line-height: 1.5rem;
-  }
-
-  details {
-    cursor: pointer;
-
-    &[open] > summary {
-      white-space: normal;
-
-      br, br + * {
-        display: block;
-      }
-    }
-
-    > summary {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      outline: none;
-
-      br, br + * {
-        display: none;
-      }
-    }
-  }
-
-  h1, h2, h3, h4, h5 {
-    color: rgba(0, 0, 0, .6);
-    font-family: sans-serif;
-    font-weight: 100;
-  }
-
-  h1 em {
-      font-style: normal;
-      text-transform: none;
-    }
-  }
-
-  h3, h4, h5 {
-    margin-bottom: 0.25rem;
-  }
-
-  header {
-    margin-bottom: 1.4rem;
-    text-align: center;
-
-    ${media.TABLET`
-      margin-bottom: 2rem;
-   `}
-
-    > article {
-      background: transparent;
-    }
-  }
-
-  html {
-    height: 100%;
-  }
-
-  label {
-    box-sizing: border-box;
-    color: rgba(78,78,78,.85);
-    display: block;
-    font-family: sans-serif;
-    font-size: 1rem;
-    font-weight: 100;
-  }
-
-  main {
-    min-height: 100vh;
-
-    > section {
-      margin-bottom: 2em;
-    }
-  }
-
-  /* Add our overrides */
-  ${cssSemantic}
-  ${cssTheme}
-  ${cssForm}
-  ${cssMedia}
-  ${cssRx}
-  ${cssComponents}
-  ${cssJoystream}
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/styles/media.ts b/pioneer/packages/old-apps/react-components/src/styles/media.ts
deleted file mode 100644
index 5082471d31..0000000000
--- a/pioneer/packages/old-apps/react-components/src/styles/media.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { css } from 'styled-components';
-
-export default css`
-  /* block by default, flex as per media queries below */
-  .ui--flex-large,
-  .ui--flex-medium,
-  .ui--flex-small {
-    display: block;
-  }
-
-  /* hide all by default, add as per media queries below */
-  .ui--media-large,
-  .ui--media-medium,
-  .ui--media-small {
-    height: 0;
-    visibility: hidden;
-    width: 0;
-  }
-
-  td.ui--media-large,
-  td.ui--media-medium,
-  td.ui--media-small,
-  th.ui--media-large,
-  th.ui--media-medium,
-  th.ui--media-small {
-    display: none;
-  }
-
-  @media (min-width: 1281px) {
-    .ui--flex-large {
-      display: flex;
-      flex-wrap: wrap;
-    }
-
-    .ui--media-large {
-      height: auto;
-      visibility: visible;
-      width: auto;
-    }
-
-    td.ui--media-large,
-    th.ui--media-large {
-      display: table-cell;
-    }
-  }
-
-  @media (min-width: 1025px) {
-    .ui--flex-medium {
-      display: flex;
-      flex-wrap: wrap;
-    }
-
-    .ui--media-medium {
-      height: auto;
-      visibility: visible;
-      width: auto;
-    }
-
-    td.ui--media-medium,
-    th.ui--media-medium {
-      display: table-cell;
-    }
-  }
-
-  @media (min-width: 768px) {
-    .ui--flex-small {
-      display: flex;
-      flex-wrap: wrap;
-    }
-
-    .ui--media-small {
-      height: auto;
-      visibility: visible;
-      width: auto;
-
-    }
-
-    td.ui--media-small,
-    th.ui--media-small {
-      display: table-cell;
-    }
-  }
-
-  /* tabs */
-  @media (max-width: 991px) {
-    .ui.menu.tabular {
-      padding-left: 5.2rem !important;
-    }
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/styles/rx.ts b/pioneer/packages/old-apps/react-components/src/styles/rx.ts
deleted file mode 100644
index 6bced3114b..0000000000
--- a/pioneer/packages/old-apps/react-components/src/styles/rx.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { css } from 'styled-components';
-
-export default css`
-  .rx--updated {
-    background: #ffffe0 !important;
-    transition: all 0.7s ease-out;
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/styles/semantic.ts b/pioneer/packages/old-apps/react-components/src/styles/semantic.ts
deleted file mode 100644
index 573212aef4..0000000000
--- a/pioneer/packages/old-apps/react-components/src/styles/semantic.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { css } from 'styled-components';
-
-export default css`
-  .ui.hidden.divider {
-    margin: 0.5rem 0;
-  }
-
-  .ui.dropdown {
-    display: block;
-    min-width: 0;
-    width: 100%;
-  }
-
-  .ui.dropdown,
-  .ui.input {
-    margin: 0.25rem 0;
-  }
-
-  .ui.selection.dropdown,
-  .ui.input > input {
-    color: inherit;
-  }
-
-  .ui.dropdown {
-    &.disabled {
-      background: transparent;
-      border-color: #eee;
-      border-style: dashed;
-      opacity: 1;
-
-      .dropdown.icon {
-        opacity: 0;
-      }
-    }
-
-    > .text {
-      min-height: 1em;
-    }
-  }
-
-  .ui.dropdown .menu > .item.header.disabled {
-    margin: 1em 0 0 0;
-    opacity: 1;
-  }
-
-  .ui.dropdown .menu > .item.header.disabled:hover,
-  .ui.dropdown .menu > .item.header.disabled.selected {
-    background: white;
-  }
-
-  .ui.input {
-    width: 100%;
-
-    &.disabled {
-      opacity: 1;
-
-      input {
-        background: transparent;
-        border-color: #eee;
-        border-style: dashed;
-      }
-
-      .ui.primary.buttons .ui.button {
-        background: #eee;
-        border-color: transparent;
-        border-left-color: transparent;
-        color: #4e4e4e;
-
-        .dropdown.icon {
-          opacity: 0;
-        }
-      }
-    }
-
-    > input {
-      width: 0;
-    }
-  }
-
-  .ui.inverted.dimmer {
-    background-color: rgba(255, 255, 255, 0.75);
-    padding: 0 1rem 1rem;
-  }
-
-  .ui.label:not(.ui--Bubble) {
-    background: transparent;
-    font-weight: normal;
-    position: relative;
-    z-index: 1;
-  }
-
-  .ui.modal {
-    background: #fafafa;
-    color: #4e4e4e;
-    font-family: sans-serif;
-
-    > .actions,
-    > .content {
-      background: transparent;
-    }
-
-    > .actions {
-      border-top: none;
-      text-align: right;
-      padding: 1rem !important;
-    }
-
-    > .header:not(.ui) {
-      background: #f5f5f5;
-      font-size: 1.25rem !important;
-      font-weight: normal;
-      line-height: 1.25rem;
-      padding: 1rem 1.5rem;
-
-      > label {
-        margin-top: 0.5rem;
-      }
-    }
-
-    > :first-child:not(.icon) {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-
-    .description {
-      margin: 1.5em 0;
-      font-weight: 700;
-    }
-  }
-
-  .ui.page.modals.transition.visible {
-    display: flex !important;
-  }
-
-  .ui.progress {
-    &.tiny {
-      font-size: .5rem;
-    }
-
-    .bar {
-      min-width: 0 !important;
-    }
-  }
-
-  .ui.secondary.vertical.menu > .item {
-    margin: 0;
-  }
-
-  .ui[class*="left icon"].input.left.icon > input {
-    padding-left: 4rem !important;
-  }
-
-  .ui[class*="left icon"].input.left.icon > i.icon.big {
-    left: -7px;
-    opacity: 1;
-  }
-
-  .ui.button:disabled,
-  .ui.buttons .disabled.button,
-  .ui.disabled.active.button,
-  .ui.disabled.button,
-  .ui.disabled.button:hover {
-    opacity: 0.2 !important;
-  }
-
-  /* modals aligned to top, not center */
-  .ui.dimmer {
-    justify-content: flex-start;
-  }
-
-  .ui.menu.tabular {
-    border-color: #e6e6e6;
-    /* break out of the wrapping main padding */
-    margin: -1em -2em 0;
-    overflow-x: scroll;
-    padding: 2em 2em 0 2em;
-    transition: padding-left 0.2s linear 0.4s;
-
-    &::-webkit-scrollbar {
-      display: none;
-      width: 0px;
-    }
-
-    .item {
-      border-bottom: 2px solid rgba(0, 0, 0, 0);
-      border: none;
-      top: -1px;
-
-      &.active {
-        background: none;;
-        border-bottom: 2px solid #db2828;
-      }
-    }
-  }
-
-  /* remove the default white background, settings app has it as part of Tab */
-  .ui.segment {
-    background: transparent;
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/styles/theme.ts b/pioneer/packages/old-apps/react-components/src/styles/theme.ts
deleted file mode 100644
index 9dc0f74497..0000000000
--- a/pioneer/packages/old-apps/react-components/src/styles/theme.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { css } from 'styled-components';
-
-/* highlighted buttons, orange */
-const colorBtnHighlight = '#f19135';
-
-/* primary buttons, blue */
-const colorBtnPrimary = '#2e86ab';
-
-/* button text color */
-const colorBtnText = '#f9f9f9';
-
-export default css`
-  .theme--default {
-    a {
-      color: ${colorBtnPrimary};
-
-      &:hover,
-      a:visited {
-        color: ${colorBtnPrimary};
-      }
-    }
-
-    .ui.basic.negative.button {
-      box-shadow: 0 0 0 1px ${colorBtnHighlight} inset !important;
-      color: ${colorBtnHighlight} !important;
-    }
-
-    .ui.negative.button,
-    .ui.buttons .negative.button {
-      background-color: ${colorBtnHighlight};
-
-      &.active,
-      &:active,
-      &:focus,
-      &:hover {
-        background-color: ${colorBtnHighlight};
-      }
-    }
-
-    .ui.modal > .header:not(.ui) {
-      border-bottom-color: ${colorBtnHighlight};
-    }
-
-    .ui.menu.tabular .item.active {
-      border-bottom-color: ${colorBtnHighlight};
-    }
-
-    /* this is for dropdown buttons */
-    .ui.buttons .ui.button.selection.visible.dropdown {
-      &:hover {
-        /* reset opacity, this is now open */
-        opacity: 1;
-      }
-
-      > .text:not(.default) {
-        color: ${colorBtnText};
-      }
-    }
-
-    .ui.toggle.checkbox input:checked~.box:before,
-    .ui.toggle.checkbox input:checked~label:before {
-      background-color: ${colorBtnHighlight} !important;
-    }
-  }
-`;
diff --git a/pioneer/packages/old-apps/react-components/src/translate.ts b/pioneer/packages/old-apps/react-components/src/translate.ts
deleted file mode 100644
index 71aca2de88..0000000000
--- a/pioneer/packages/old-apps/react-components/src/translate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { withTranslation } from 'react-i18next';
-
-export default withTranslation(['react-components']);
diff --git a/pioneer/packages/old-apps/react-components/src/types.ts b/pioneer/packages/old-apps/react-components/src/types.ts
deleted file mode 100644
index c08f187fa6..0000000000
--- a/pioneer/packages/old-apps/react-components/src/types.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { WithTranslation } from 'react-i18next';
-import { Abi } from '@polkadot/api-contract';
-import { ActionStatus } from '@polkadot/react-components/Status/types';
-
-export interface BareProps {
-  className?: string;
-  style?: Record<string, string | number>;
-}
-
-export interface AppProps {
-  basePath: string;
-  onStatusChange: (status: ActionStatus) => void;
-}
-
-export type I18nProps = BareProps & WithTranslation;
-
-export type BitLength = 8 | 16 | 32 | 64 | 128 | 256;
-
-export type StringOrNull = string | null;
-
-interface ContractBase {
-  abi: Abi;
-}
-
-export interface Contract extends ContractBase {
-  address: null;
-}
-
-export interface ContractDeployed extends ContractBase {
-  address: string;
-}
-
-export type CallContract = ContractDeployed;
-
-export interface NullContract {
-  abi: null;
-  address: null;
-}
diff --git a/pioneer/packages/old-apps/react-components/src/util/classes.ts b/pioneer/packages/old-apps/react-components/src/util/classes.ts
deleted file mode 100644
index 1c26b44671..0000000000
--- a/pioneer/packages/old-apps/react-components/src/util/classes.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// Copyright 2017-2019 @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.
-
-export default function classes (...classNames: (boolean | null | string | undefined)[]): string {
-  return classNames
-    .filter((className): boolean => !!className)
-    .join(' ');
-}
diff --git a/pioneer/packages/old-apps/react-components/src/util/getAddressMeta.ts b/pioneer/packages/old-apps/react-components/src/util/getAddressMeta.ts
deleted file mode 100644
index f93ffb04cd..0000000000
--- a/pioneer/packages/old-apps/react-components/src/util/getAddressMeta.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { KeyringItemType, KeyringJson$Meta } from '@polkadot/ui-keyring/types';
-
-import keyring from '@polkadot/ui-keyring';
-
-export default function getAddressMeta (address: string, type: KeyringItemType | null = null): KeyringJson$Meta {
-  let meta: KeyringJson$Meta | undefined;
-
-  try {
-    const pair = keyring.getAddress(address, type);
-
-    meta = pair && pair.meta;
-  } catch (error) {
-    // we could pass invalid addresses, so it may throw
-  }
-
-  return meta || {};
-}
diff --git a/pioneer/packages/old-apps/react-components/src/util/getAddressName.ts b/pioneer/packages/old-apps/react-components/src/util/getAddressName.ts
deleted file mode 100644
index 96ba0f9838..0000000000
--- a/pioneer/packages/old-apps/react-components/src/util/getAddressName.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { KeyringItemType } from '@polkadot/ui-keyring/types';
-
-import getAddressMeta from './getAddressMeta';
-import toShortAddress from './toShortAddress';
-
-// isName, isDefault, name
-export default function getAddressName (address: string, type: KeyringItemType | null = null, defaultName?: string): [boolean, boolean, string] {
-  const meta = getAddressMeta(address, type);
-
-  return meta.name
-    ? [false, false, meta.name.toUpperCase()]
-    : defaultName
-      ? [false, true, defaultName.toUpperCase()]
-      : [true, false, toShortAddress(address)];
-}
diff --git a/pioneer/packages/old-apps/react-components/src/util/getAddressTags.ts b/pioneer/packages/old-apps/react-components/src/util/getAddressTags.ts
deleted file mode 100644
index ef5817f407..0000000000
--- a/pioneer/packages/old-apps/react-components/src/util/getAddressTags.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// Copyright 2017-2019 @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.
-
-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 || [];
-}
diff --git a/pioneer/packages/old-apps/react-components/src/util/getContractAbi.ts b/pioneer/packages/old-apps/react-components/src/util/getContractAbi.ts
deleted file mode 100644
index 3590cf6cd3..0000000000
--- a/pioneer/packages/old-apps/react-components/src/util/getContractAbi.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Abi } from '@polkadot/api-contract';
-
-import getAddressMeta from './getAddressMeta';
-
-export default function getContractAbi (address: string | null): Abi | null {
-  if (!address) {
-    return null;
-  }
-
-  let abi: Abi | undefined;
-  const meta = getAddressMeta(address, 'contract');
-
-  try {
-    const data = meta.contract && JSON.parse(meta.contract.abi);
-    abi = new Abi(data);
-  } catch (error) {
-    // invalid address, maybe
-  }
-
-  return abi || null;
-}
diff --git a/pioneer/packages/old-apps/react-components/src/util/index.ts b/pioneer/packages/old-apps/react-components/src/util/index.ts
deleted file mode 100644
index 1940ed8f81..0000000000
--- a/pioneer/packages/old-apps/react-components/src/util/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// Copyright 2017-2019 @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.
-
-export { default as classes } from './classes';
-export { default as getAddressMeta } from './getAddressMeta';
-export { default as getAddressName } from './getAddressName';
-export { default as getAddressTags } from './getAddressTags';
-export { default as getContractAbi } from './getContractAbi';
-export { default as isTreasuryProposalVote } from './isTreasuryProposalVote';
-export { default as toAddress } from './toAddress';
-export { default as toShortAddress } from './toShortAddress';
diff --git a/pioneer/packages/old-apps/react-components/src/util/isTreasuryProposalVote.ts b/pioneer/packages/old-apps/react-components/src/util/isTreasuryProposalVote.ts
deleted file mode 100644
index 5013281647..0000000000
--- a/pioneer/packages/old-apps/react-components/src/util/isTreasuryProposalVote.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Proposal } from '@polkadot/types/interfaces';
-import { GenericCall } from '@polkadot/types';
-
-export default function isTreasuryProposalVote (proposal?: Proposal | null): boolean {
-  if (!proposal) {
-    return false;
-  }
-
-  const { method, section } = GenericCall.findFunction(proposal.callIndex);
-
-  return section === 'treasury' &&
-    ['approveProposal', 'rejectProposal'].includes(method) &&
-    !!proposal.args[0];
-}
diff --git a/pioneer/packages/old-apps/react-components/src/util/toAddress.ts b/pioneer/packages/old-apps/react-components/src/util/toAddress.ts
deleted file mode 100644
index 4de1b43c3a..0000000000
--- a/pioneer/packages/old-apps/react-components/src/util/toAddress.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import keyring from '@polkadot/ui-keyring';
-import { hexToU8a, isHex } from '@polkadot/util';
-
-export default function toAddress (value?: string | Uint8Array | null): string | undefined {
-  if (!value) {
-    return;
-  }
-
-  let address: string | undefined;
-
-  try {
-    address = keyring.encodeAddress(
-      isHex(value)
-        ? hexToU8a(value)
-        : keyring.decodeAddress(value)
-    );
-  } catch (error) {
-    console.error('Unable to encode address', value);
-  }
-
-  return address;
-}
diff --git a/pioneer/packages/old-apps/react-components/src/util/toShortAddress.ts b/pioneer/packages/old-apps/react-components/src/util/toShortAddress.ts
deleted file mode 100644
index a54c2b72ca..0000000000
--- a/pioneer/packages/old-apps/react-components/src/util/toShortAddress.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
-
-export default function toShortAddress (_address?: AccountId | AccountIndex | Address | string | null): string {
-  const address = (_address || '').toString();
-
-  return (address.length > 13)
-    ? `${address.slice(0, 6)}…${address.slice(-6)}`
-    : address;
-}
diff --git a/pioneer/packages/old-apps/react-components/src/util/types.ts b/pioneer/packages/old-apps/react-components/src/util/types.ts
deleted file mode 100644
index b45d2e83d5..0000000000
--- a/pioneer/packages/old-apps/react-components/src/util/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// Copyright 2017-2019 @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.
-
-export interface DropdownOption {
-  className?: string;
-  key?: string;
-  text: React.ReactNode;
-  value: string;
-}
-
-export type DropdownOptions = DropdownOption[];
diff --git a/pioneer/packages/old-apps/react-params/LICENSE b/pioneer/packages/old-apps/react-params/LICENSE
deleted file mode 100644
index 0d381b2e97..0000000000
--- a/pioneer/packages/old-apps/react-params/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/pioneer/packages/old-apps/react-params/README.md b/pioneer/packages/old-apps/react-params/README.md
deleted file mode 100644
index 89400eb684..0000000000
--- a/pioneer/packages/old-apps/react-params/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# @polkadot/react-params
-
-WARNING: This is an internal package to [polkadot-js/apps](https://github.com/polkadot-js/apps) so is not inteded (yet) for broad use.
-
-For the existing sharable components usable in external React-based projects, take a look at the [polkadot-js/ui documentation](https://polkadot.js.org/ui/)
diff --git a/pioneer/packages/old-apps/react-params/package.json b/pioneer/packages/old-apps/react-params/package.json
deleted file mode 100644
index e17c38af68..0000000000
--- a/pioneer/packages/old-apps/react-params/package.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "@polkadot/react-params",
-  "version": "0.37.0-beta.63",
-  "main": "index.js",
-  "repository": "https://github.com/polkadot-js/apps.git",
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "contributors": [],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/react-components": "^0.37.0-beta.63"
-  }
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Account.tsx b/pioneer/packages/old-apps/react-params/src/Param/Account.tsx
deleted file mode 100644
index 35f00581b6..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Account.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Props } from '../types';
-
-import React from 'react';
-import { InputAddress } from '@polkadot/react-components';
-import keyring from '@polkadot/ui-keyring';
-
-import Bare from './Bare';
-
-function onChange ({ onChange }: Props): (_?: string | null) => void {
-  return (value?: string | null): void => {
-    let isValid = false;
-
-    if (value) {
-      try {
-        keyring.decodeAddress(value);
-
-        isValid = true;
-      } catch (err) {
-        console.error(err);
-      }
-    }
-
-    onChange && onChange({
-      isValid,
-      value
-    });
-  };
-}
-
-export default function Account (props: Props): React.ReactElement<Props> {
-  const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = props;
-  const defaultValue = value && value.toString();
-
-  return (
-    <Bare
-      className={className}
-      style={style}
-    >
-      <InputAddress
-        className='full'
-        defaultValue={defaultValue}
-        isDisabled={isDisabled}
-        isError={isError}
-        isInput
-        label={label}
-        onChange={onChange(props)}
-        placeholder='5...'
-        type='allPlus'
-        withEllipsis
-        withLabel={withLabel}
-      />
-    </Bare>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Amount.tsx b/pioneer/packages/old-apps/react-params/src/Param/Amount.tsx
deleted file mode 100644
index 4c522c6431..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Amount.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Props } from '../types';
-
-import BN from 'bn.js';
-import React from 'react';
-// import { ClassOf } from '@polkadot/types';
-import { Input } from '@polkadot/react-components';
-// import { bnToBn, formatNumber } from '@polkadot/util';
-
-import Bare from './Bare';
-
-function onChange ({ onChange }: Props): (_: string) => void {
-  return function (value: string): void {
-    onChange && onChange({
-      isValid: !!value,
-      value: new BN(value || 0)
-    });
-  };
-}
-
-export default function Amount (props: Props): React.ReactElement<Props> {
-  const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = props;
-
-  const defaultValue = value ? value.toString() : '0';
-
-  return (
-    <Bare
-      className={className}
-      style={style}
-    >
-      <Input
-        className='full'
-        defaultValue={defaultValue}
-        isDisabled={isDisabled}
-        isError={isError}
-        label={label}
-        min={0}
-        onChange={onChange(props)}
-        onEnter={onEnter}
-        type={
-          isDisabled
-            ? 'text'
-            : 'number'
-        }
-        withEllipsis
-        withLabel={withLabel}
-      />
-    </Bare>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Balance.tsx b/pioneer/packages/old-apps/react-params/src/Param/Balance.tsx
deleted file mode 100644
index 9af45132a0..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Balance.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Props } from '../types';
-
-import BN from 'bn.js';
-import React from 'react';
-import { InputBalance } from '@polkadot/react-components';
-
-import Bare from './Bare';
-
-export default function Balance ({ className, defaultValue: { value }, isDisabled, isError, label, onChange, onEnter, style, withLabel }: Props): React.ReactElement<Props> {
-  const defaultValue = new BN((value as BN || '0').toString()).toString(10);
-  const _onChange = (value?: BN): void =>
-    onChange && onChange({
-      isValid: !isError && !!value,
-      value
-    });
-
-  return (
-    <Bare
-      className={className}
-      style={style}
-    >
-      <InputBalance
-        className='full'
-        defaultValue={defaultValue}
-        isDisabled={isDisabled}
-        isError={isError}
-        label={label}
-        onChange={_onChange}
-        withEllipsis
-        onEnter={onEnter}
-        withLabel={withLabel}
-      />
-    </Bare>
-  );
-}
-
-export {
-  Balance
-};
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Bare.tsx b/pioneer/packages/old-apps/react-params/src/Param/Bare.tsx
deleted file mode 100644
index 5a4bdb0d36..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Bare.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import styled from 'styled-components';
-import { classes } from '@polkadot/react-components/util';
-
-interface Props extends BareProps {
-  children?: React.ReactNode;
-}
-
-function Bare ({ children, className, style }: Props): React.ReactElement<Props> {
-  return (
-    <div
-      className={classes('ui--row', className)}
-      style={style}
-    >
-      {children}
-    </div>
-  );
-}
-
-export default styled(Bare)`
-  position: relative;
-`;
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Base.tsx b/pioneer/packages/old-apps/react-params/src/Param/Base.tsx
deleted file mode 100644
index 9363e1ae82..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Base.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from '@polkadot/react-components/types';
-import { Size } from '../types';
-
-import React from 'react';
-import { Labelled } from '@polkadot/react-components';
-
-import Bare from './Bare';
-
-interface Props extends BareProps {
-  children?: React.ReactNode;
-  isDisabled?: boolean;
-  isOuter?: boolean;
-  label?: React.ReactNode;
-  size?: Size;
-  withLabel?: boolean;
-}
-
-export default function Base ({ children, className, isOuter, label, size = 'full', style, withLabel }: Props): React.ReactElement<Props> {
-  return (
-    <Bare
-      className={className}
-      style={style}
-    >
-      <Labelled
-        className={size}
-        isOuter
-        label={label}
-        withEllipsis
-        withLabel={withLabel}
-      >
-        {!isOuter && children}
-      </Labelled>
-      {isOuter && children}
-    </Bare>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/BaseBytes.tsx b/pioneer/packages/old-apps/react-params/src/Param/BaseBytes.tsx
deleted file mode 100644
index 01049d3016..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/BaseBytes.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Props as BaseProps, Size } from '../types';
-
-import React, { useEffect, useState } from 'react';
-import { Compact } from '@polkadot/types';
-import { Input } from '@polkadot/react-components';
-import { hexToU8a, isHex, u8aToHex } from '@polkadot/util';
-import { decodeAddress } from '@polkadot/util-crypto';
-
-import Bare from './Bare';
-
-interface Props extends BaseProps {
-  asHex?: boolean;
-  children?: React.ReactNode;
-  length?: number;
-  size?: Size;
-  validate?: (u8a: Uint8Array) => boolean;
-  withLength?: boolean;
-}
-
-const defaultValidate = (): boolean =>
-  true;
-
-function convertInput (value: string): [boolean, Uint8Array] {
-  // try hex conversion
-  try {
-    return [true, hexToU8a(value)];
-  } catch (error) {
-    // we continue...
-  }
-
-  // maybe it is an ss58?
-  try {
-    return [true, decodeAddress(value)];
-  } catch (error) {
-    // we continue
-  }
-
-  return [value === '0x', new Uint8Array([])];
-}
-
-export default function BaseBytes ({ asHex, children, className, defaultValue: { value }, isDisabled, isError, label, length = -1, onChange, onEnter, size = 'full', style, validate = defaultValidate, withLabel, withLength }: Props): React.ReactElement<Props> {
-  const [isValid, setIsValid] = useState(false);
-
-  useEffect((): void => {
-    const [isValid, converted] = convertInput(value);
-
-    setIsValid(
-      isValid && validate(converted) && (
-        length !== -1
-          ? converted.length === length
-          : true
-      )
-    );
-  }, [length, value]);
-
-  const _onChange = (hex: string): void => {
-    let [isValid, value] = convertInput(hex);
-
-    isValid = isValid && validate(value) && (
-      length !== -1
-        ? value.length === length
-        : value.length !== 0
-    );
-
-    if (withLength && isValid) {
-      value = Compact.addLengthPrefix(value);
-    }
-
-    onChange && onChange({
-      isValid,
-      value: asHex
-        ? u8aToHex(value)
-        : value
-    });
-
-    setIsValid(isValid);
-  };
-
-  const defaultValue = value
-    ? (
-      isHex(value)
-        ? value
-        : u8aToHex(value as Uint8Array, isDisabled ? 256 : -1)
-    )
-    : undefined;
-
-  return (
-    <Bare
-      className={className}
-      style={style}
-    >
-      <Input
-        className={size}
-        defaultValue={defaultValue}
-        isAction={!!children}
-        isDisabled={isDisabled}
-        isError={isError || !isValid}
-        label={label}
-        onChange={_onChange}
-        onEnter={onEnter}
-        placeholder='0x...'
-        type='text'
-        withEllipsis
-        withLabel={withLabel}
-      >
-        {children}
-      </Input>
-    </Bare>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Bool.tsx b/pioneer/packages/old-apps/react-params/src/Param/Bool.tsx
deleted file mode 100644
index 476fa8847f..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Bool.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Props } from '../types';
-
-import React from 'react';
-import { Dropdown } from '@polkadot/react-components';
-
-import Bare from './Bare';
-
-const options = [
-  { text: 'No', value: false },
-  { text: 'Yes', value: true }
-];
-
-function onChange ({ onChange }: Props): (_: boolean) => void {
-  return function (value: boolean): void {
-    onChange && onChange({
-      isValid: true,
-      value
-    });
-  };
-}
-
-export default function BoolParam (props: Props): React.ReactElement<Props> {
-  const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = props;
-  const defaultValue = value instanceof Boolean
-    ? value.valueOf()
-    : value as boolean;
-
-  return (
-    <Bare
-      className={className}
-      style={style}
-    >
-      <Dropdown
-        className='full'
-        defaultValue={defaultValue}
-        isDisabled={isDisabled}
-        isError={isError}
-        label={label}
-        options={options}
-        onChange={onChange(props)}
-        withEllipsis
-        withLabel={withLabel}
-      />
-    </Bare>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Bytes.tsx b/pioneer/packages/old-apps/react-params/src/Param/Bytes.tsx
deleted file mode 100644
index 2a9a1712d9..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Bytes.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Props } from '../types';
-
-import React, { useState } from 'react';
-import { Compact } from '@polkadot/types';
-import { Button } from '@polkadot/react-components';
-
-import BaseBytes from './BaseBytes';
-import File from './File';
-
-export default function Bytes ({ className, defaultValue, isDisabled, isError, label, name, onChange, onEnter, style, type, withLabel }: Props): React.ReactElement<Props> {
-  const [isFileDrop, setIsFileDrop] = useState(false);
-
-  const _toggleFile = (): void => setIsFileDrop(true);
-  const _onChangeFile = (value: Uint8Array): void => {
-    onChange && onChange({
-      isValid: value.length !== 0,
-      value: Compact.addLengthPrefix(value)
-    });
-  };
-
-  return !isDisabled && isFileDrop
-    ? (
-      <File
-        className={className}
-        isDisabled={isDisabled}
-        isError={isError}
-        label={label}
-        onChange={_onChangeFile}
-        style={style}
-        withLabel={withLabel}
-      />
-    )
-    : (
-      <BaseBytes
-        className={className}
-        defaultValue={defaultValue}
-        isDisabled={isDisabled}
-        isError={isError}
-        label={label}
-        length={-1}
-        name={name}
-        onChange={onChange}
-        onEnter={onEnter}
-        style={style}
-        type={type}
-        withLabel={withLabel}
-        withLength
-      >
-        {!isDisabled && (
-          <Button
-            icon='file'
-            onClick={_toggleFile}
-          />
-        )}
-      </BaseBytes>
-    );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Code.tsx b/pioneer/packages/old-apps/react-params/src/Param/Code.tsx
deleted file mode 100644
index 8bb0041d7a..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Code.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Props } from '../types';
-
-import React from 'react';
-
-import Bytes from './Bytes';
-import BytesFile from './File';
-
-function renderDisabled ({ className, defaultValue, isError, label, onEnter, style, type, withLabel }: Props): React.ReactNode {
-  return (
-    <Bytes
-      className={className}
-      defaultValue={defaultValue}
-      isError={isError}
-      label={label}
-      onEnter={onEnter}
-      style={style}
-      type={type}
-      withLabel={withLabel}
-    />
-  );
-}
-
-// TODO: Validate that we have actual proper WASM code
-function onChange ({ onChange }: Props): (_: Uint8Array) => void {
-  return function (value: Uint8Array): void {
-    onChange && onChange({
-      isValid: value.length !== 0,
-      value
-    });
-  };
-}
-
-export default function Code (props: Props): React.ReactElement<Props> {
-  const { className, defaultValue, isDisabled, isError, label, style, withLabel } = props;
-
-  if (isDisabled) {
-    return (
-      <>
-        {renderDisabled(props)}
-      </>
-    );
-  }
-
-  return (
-    <BytesFile
-      className={className}
-      defaultValue={defaultValue}
-      isError={isError}
-      label={label}
-      onChange={onChange(props)}
-      style={style}
-      withLabel={withLabel}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Data.tsx b/pioneer/packages/old-apps/react-params/src/Param/Data.tsx
deleted file mode 100644
index 75a54ea618..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Data.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Props } from '../types';
-
-import React from 'react';
-import { Input } from '@polkadot/react-components';
-
-import Bare from './Bare';
-
-function onChange ({ onChange }: Props): (_: string) => void {
-  return function (value: string): void {
-    const isValid = value.length !== 0;
-
-    onChange && onChange({
-      isValid,
-      value
-    });
-  };
-}
-
-export default function Data (props: Props): React.ReactElement<Props> {
-  const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = props;
-  const defaultValue = value
-    ? (value.toHex ? value.toHex() : value)
-    : '';
-
-  return (
-    <Bare
-      className={className}
-      style={style}
-    >
-      <Input
-        className='full'
-        defaultValue={defaultValue}
-        isDisabled={isDisabled}
-        isError={isError}
-        label={label}
-        onChange={onChange(props)}
-        onEnter={onEnter}
-        placeholder='Hex data'
-        type='text'
-        withLabel={withLabel}
-      />
-    </Bare>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Enum.tsx b/pioneer/packages/old-apps/react-params/src/Param/Enum.tsx
deleted file mode 100644
index 5b6bd6b690..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Enum.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { TypeDef } from '@polkadot/types/types';
-import { ParamDef, Props, RawParam } from '../types';
-
-import React, { useEffect, useState } from 'react';
-import { Enum, createType, getTypeDef } from '@polkadot/types';
-import { Dropdown } from '@polkadot/react-components';
-
-import Params from '../';
-import Bare from './Bare';
-import Static from './Static';
-
-interface Option {
-  text?: string;
-  value?: string;
-}
-
-export default function EnumParam (props: Props): React.ReactElement<Props> {
-  const { className, defaultValue, isDisabled, isError, label, onChange, style, 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(type.type as any).toRawType();
-    const typeDef = getTypeDef(rawType);
-    const subTypes = typeDef.sub as TypeDef[];
-
-    setOptions({
-      options: subTypes.map(({ name }): Option => ({
-        text: name,
-        value: name
-      })),
-      subTypes
-    });
-    setCurrent([{ name: subTypes[0].name, type: subTypes[0] }]);
-  }, [type]);
-
-  useEffect((): void => {
-    setInitialValue(
-      defaultValue && defaultValue.value
-        ? defaultValue.value instanceof Enum
-          ? defaultValue.value.type
-          : Object.keys(defaultValue.value)[0]
-        : null
-    );
-  }, [defaultValue]);
-
-  if (isDisabled) {
-    return <Static {...props} />;
-  }
-
-  const _onChange = (value: string): void => {
-    const newType = subTypes.find(({ name }): boolean => name === value) || null;
-
-    setCurrent(
-      newType
-        ? [{ name: newType.name, type: newType }]
-        : null
-    );
-  };
-
-  const _onChangeParam = ([{ isValid, value }]: RawParam[]): void => {
-    current && onChange && onChange({
-      isValid,
-      value: { [current[0].name as string]: value }
-    });
-  };
-
-  return (
-    <Bare
-      className={className}
-      style={style}
-    >
-      <Dropdown
-        className='full'
-        defaultValue={initialValue}
-        isDisabled={isDisabled}
-        isError={isError}
-        label={label}
-        options={options}
-        onChange={_onChange}
-        withEllipsis
-        withLabel={withLabel}
-        value={current ? current[0].name as string : null}
-      />
-      {current && (
-        <Params
-          onChange={_onChangeParam}
-          params={current}
-        />
-      )}
-    </Bare>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/File.tsx b/pioneer/packages/old-apps/react-params/src/Param/File.tsx
deleted file mode 100644
index 3f5e834ec6..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/File.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { BareProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import { InputFile } from '@polkadot/react-components';
-
-import Bare from './Bare';
-
-interface Props extends BareProps {
-  defaultValue?: any;
-  isDisabled?: boolean;
-  isError?: boolean;
-  label?: React.ReactNode;
-  onChange?: (contents: Uint8Array) => void;
-  placeholder?: string;
-  withLabel?: boolean;
-}
-
-export default function File ({ className, isDisabled, isError = false, label, onChange, placeholder, style, withLabel }: Props): React.ReactElement<Props> {
-  return (
-    <Bare
-      className={className}
-      style={style}
-    >
-      <InputFile
-        convertHex
-        isDisabled={isDisabled}
-        isError={isError}
-        label={label}
-        onChange={onChange}
-        placeholder={placeholder}
-        withEllipsis
-        withLabel={withLabel}
-      />
-    </Bare>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Hash256.tsx b/pioneer/packages/old-apps/react-params/src/Param/Hash256.tsx
deleted file mode 100644
index 1b809b0c69..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Hash256.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Props } from '../types';
-
-import React from 'react';
-
-import BaseBytes from './BaseBytes';
-
-export default function Hash256 ({ className, defaultValue, isDisabled, isError, label, name, onChange, onEnter, style, type, withLabel }: Props): React.ReactElement<Props> {
-  return (
-    <BaseBytes
-      className={className}
-      defaultValue={defaultValue}
-      isDisabled={isDisabled}
-      isError={isError}
-      label={label}
-      length={32}
-      name={name}
-      onChange={onChange}
-      onEnter={onEnter}
-      style={style}
-      type={type}
-      withLabel={withLabel}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Hash512.tsx b/pioneer/packages/old-apps/react-params/src/Param/Hash512.tsx
deleted file mode 100644
index da1facd155..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Hash512.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Props } from '../types';
-
-import React from 'react';
-
-import BaseBytes from './BaseBytes';
-
-export default function Hash512 ({ className, defaultValue, isDisabled, isError, label, name, onChange, onEnter, style, type, withLabel }: Props): React.ReactElement<Props> {
-  return (
-    <BaseBytes
-      className={className}
-      defaultValue={defaultValue}
-      isDisabled={isDisabled}
-      isError={isError}
-      label={label}
-      length={64}
-      name={name}
-      onChange={onChange}
-      onEnter={onEnter}
-      style={style}
-      type={type}
-      withLabel={withLabel}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/KeyValue.tsx b/pioneer/packages/old-apps/react-params/src/Param/KeyValue.tsx
deleted file mode 100644
index 6f854d8070..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/KeyValue.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Props } from '../types';
-
-import React, { useEffect, useState } from 'react';
-import { Compact } from '@polkadot/types';
-import { Input } from '@polkadot/react-components';
-import { hexToU8a, u8aConcat } from '@polkadot/util';
-
-import Bare from './Bare';
-
-interface StateParam {
-  isValid: boolean;
-  u8a: Uint8Array;
-}
-
-export function createParam (hex: string, length = -1): StateParam {
-  let u8a;
-
-  try {
-    u8a = hexToU8a(hex);
-  } catch (error) {
-    u8a = new Uint8Array([]);
-  }
-
-  const isValid = length !== -1
-    ? u8a.length === length
-    : u8a.length !== 0;
-
-  return {
-    isValid,
-    u8a: Compact.addLengthPrefix(u8a)
-  };
-}
-
-export default function KeyValue ({ className, isDisabled, label, onChange, onEnter, style, withLabel }: Props): React.ReactElement<Props> {
-  const [key, setKey] = useState<StateParam>({ isValid: false, u8a: new Uint8Array([]) });
-  const [value, setValue] = useState<StateParam>({ isValid: false, u8a: new Uint8Array([]) });
-
-  useEffect((): void => {
-    onChange && onChange({
-      isValid: key.isValid && value.isValid,
-      value: u8aConcat(
-        key.u8a,
-        value.u8a
-      )
-    });
-  }, [key, value]);
-
-  const _onChangeKey = (key: string): void => setKey(createParam(key));
-  const _onChangeValue = (value: string): void => setValue(createParam(value));
-
-  return (
-    <Bare
-      className={className}
-      style={style}
-    >
-      <Input
-        className='medium'
-        isDisabled={isDisabled}
-        isError={!key.isValid}
-        label={label}
-        onChange={_onChangeKey}
-        placeholder='0x...'
-        type='text'
-        withLabel={withLabel}
-      />
-      <Input
-        className='medium'
-        isDisabled={isDisabled}
-        isError={!value.isValid}
-        onChange={_onChangeValue}
-        onEnter={onEnter}
-        placeholder='0x...'
-        type='text'
-        withLabel={withLabel}
-      />
-    </Bare>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/KeyValueArray.tsx b/pioneer/packages/old-apps/react-params/src/Param/KeyValueArray.tsx
deleted file mode 100644
index 1489a0ad6e..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/KeyValueArray.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { KeyValue as Pair } from '@polkadot/types/interfaces';
-import { Props as BaseProps, RawParam } from '../types';
-
-import React, { useState } from 'react';
-import { WithTranslation } from 'react-i18next';
-import { Vec } from '@polkadot/types';
-import { assert, isHex, u8aToHex, u8aToString } from '@polkadot/util';
-
-import translate from '../translate';
-import Base from './Base';
-import Bytes from './Bytes';
-import File from './File';
-import { createParam } from './KeyValue';
-
-interface Props extends BaseProps, WithTranslation {}
-
-interface Parsed {
-  isValid: boolean;
-  value: [Uint8Array, Uint8Array][];
-}
-
-const BYTES_TYPE = {
-  type: 'Bytes',
-  info: 0
-};
-
-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 keys = Object.keys(json);
-  let isValid = keys.length !== 0;
-  const value = keys.map((key): [Uint8Array, Uint8Array] => {
-    const value = json[key];
-
-    assert(isHex(key) && isHex(value), `Non-hex key/value pair found in ${key.toString()} => ${value.toString()}`);
-
-    const encKey = createParam(key);
-    const encValue = createParam(value.toString());
-
-    isValid = isValid && encKey.isValid && encValue.isValid;
-
-    return [encKey.u8a, encValue.u8a];
-  });
-
-  return {
-    isValid,
-    value
-  };
-}
-
-function KeyValueArray ({ className, defaultValue, isDisabled, isError, label, onChange, onEnter, style, t, withLabel }: Props): React.ReactElement<Props> {
-  const [placeholder, setPlaceholder] = useState(t(EMPTY_PLACEHOLDER));
-
-  if (isDisabled) {
-    const pairs = defaultValue.value as Vec<Pair>;
-
-    return (
-      <>
-        <Base
-          className={className}
-          label={label}
-          style={style}
-        >
-          <div />
-        </Base>
-        <div className='ui--Params'>
-          {pairs.map(([key, value]): React.ReactNode => {
-            const keyHex = u8aToHex(key.toU8a(true));
-
-            return (
-              <Bytes
-                defaultValue={{ value } as unknown as RawParam}
-                isDisabled
-                key={keyHex}
-                label={keyHex}
-                name={keyHex}
-                onEnter={onEnter}
-                type={BYTES_TYPE}
-              />
-            );
-          })}
-        </div>
-      </>
-    );
-  }
-
-  const _onChange = (raw: Uint8Array): void => {
-    let encoded: Parsed = { isValid: false, value: [] };
-
-    try {
-      encoded = parseFile(raw);
-
-      setPlaceholder(t('{{count}} key/value pairs encoded for submission', {
-        replace: {
-          count: encoded.value.length
-        }
-      }));
-    } catch (error) {
-      console.error('Error converting json k/v', error);
-
-      setPlaceholder(t(EMPTY_PLACEHOLDER));
-    }
-
-    onChange && onChange(encoded);
-  };
-
-  return (
-    <File
-      className={className}
-      isDisabled={isDisabled}
-      isError={isError}
-      label={label}
-      onChange={_onChange}
-      placeholder={placeholder}
-      style={style}
-      withLabel={withLabel}
-    />
-  );
-}
-
-export default translate(KeyValueArray);
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Moment.tsx b/pioneer/packages/old-apps/react-params/src/Param/Moment.tsx
deleted file mode 100644
index f9e1466b7c..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Moment.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Props, RawParamOnChangeValue } from '../types';
-
-import React from 'react';
-import { Static } from '@polkadot/react-components';
-
-import Amount from './Amount';
-
-function renderDisabled ({ className, defaultValue, isError, label, style, withLabel }: Props): React.ReactNode {
-  return (
-    <Static
-      className={className}
-      defaultValue={
-        (defaultValue && defaultValue.value)
-          ? defaultValue.value.toString()
-          : ''
-      }
-      isError={isError}
-      label={label}
-      style={style}
-      withLabel={withLabel}
-    />
-  );
-}
-
-// TODO: Validate that we have actual proper WASM code
-function onChange ({ onChange }: Props): (_: RawParamOnChangeValue) => void {
-  return function (value: RawParamOnChangeValue): void {
-    onChange && onChange(value);
-  };
-}
-
-export default function Code (props: Props): React.ReactNode {
-  const { className, defaultValue, isDisabled, isError, label, onEnter, style, type, withLabel } = props;
-
-  if (isDisabled) {
-    return (
-      <>
-        {renderDisabled(props)}
-      </>
-    );
-  }
-
-  return (
-    <Amount
-      className={className}
-      defaultValue={defaultValue}
-      isDisabled={isDisabled}
-      isError={isError}
-      label={label}
-      onChange={onChange(props)}
-      onEnter={onEnter}
-      style={style}
-      type={type}
-      withLabel={withLabel}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Null.tsx b/pioneer/packages/old-apps/react-params/src/Param/Null.tsx
deleted file mode 100644
index 78f756caa2..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Null.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Props } from '../types';
-
-import React, { useEffect } from 'react';
-
-export default function Null ({ onChange }: Props): React.ReactElement<Props> | null {
-  useEffect((): void => {
-    onChange && onChange({
-      isValid: true,
-      value: null
-    });
-  }, []);
-
-  return null;
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Option.tsx b/pioneer/packages/old-apps/react-params/src/Param/Option.tsx
deleted file mode 100644
index 0d0e30c859..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Option.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { TypeDef } from '@polkadot/types/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { Props as CProps } from '../types';
-
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { Toggle } from '@polkadot/react-components';
-
-import translate from '../translate';
-import Param from './index';
-import getInitValue from '../initValue';
-
-interface Props extends CProps, I18nProps {}
-
-function Option ({ className, defaultValue, isDisabled, name, onChange, onEnter, t, type: { sub } }: Props): React.ReactElement<Props> {
-  const [isActive, setIsActive] = useState(false);
-
-  useEffect((): void => {
-    !isActive && onChange && onChange({
-      isValid: true,
-      value: null
-    });
-  }, [isActive]);
-
-  function doSetIsActive (active: boolean) {
-    active && onChange && onChange({
-      isValid: true,
-      value: getInitValue(sub as TypeDef)
-    });
-    setIsActive(active);
-  }
-
-  return (
-    <div className={className}>
-      <Param
-        defaultValue={defaultValue}
-        isDisabled={isDisabled || !isActive}
-        isOptional={!isActive}
-        name={name}
-        onChange={onChange}
-        onEnter={onEnter}
-        type={sub as TypeDef}
-      />
-      {!isDisabled && (
-        <Toggle
-          className='ui--Param-Option-toggle'
-          label={
-            isActive
-              ? t('include option')
-              : t('exclude option')
-          }
-          onChange={doSetIsActive}
-          value={isActive}
-        />
-      )}
-    </div>
-  );
-}
-
-export default translate(
-  styled(Option)`
-    position: relative;
-
-    .ui--Param-Option-toggle {
-      position: absolute;
-      right: 3.5rem;
-      top: 0.5rem;
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Proposal.tsx b/pioneer/packages/old-apps/react-params/src/Param/Proposal.tsx
deleted file mode 100644
index 59a18c936e..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Proposal.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Extrinsic } from '@polkadot/types/interfaces';
-import { Props } from '../types';
-
-import React from 'react';
-import { GenericCall } from '@polkadot/types';
-import { Call, Static } from '@polkadot/react-components';
-import { classes } from '@polkadot/react-components/util';
-
-import Bare from './Bare';
-import Unknown from './Unknown';
-
-export default function Proposal (props: Props): React.ReactElement<Props> {
-  const { className, defaultValue: { value }, isDisabled, label, style, withLabel } = props;
-
-  if (!isDisabled) {
-    return (
-      <Unknown {...props} />
-    );
-  }
-
-  const proposal = value as Extrinsic;
-  const { method, section } = GenericCall.findFunction(proposal.callIndex);
-
-  return (
-    <Bare>
-      <Static
-        className={classes(className, 'full')}
-        label={label}
-        style={style}
-        withLabel={withLabel}
-      >
-        {section}.{method}
-      </Static>
-      <Call value={proposal} />
-    </Bare>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Static.tsx b/pioneer/packages/old-apps/react-params/src/Param/Static.tsx
deleted file mode 100644
index 449d6687a3..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Static.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { WithTranslation } from 'react-i18next';
-import { Props as BareProps, RawParam } from '../types';
-
-import React from 'react';
-import { Static } from '@polkadot/react-components';
-
-import translate from '../translate';
-import Bare from './Bare';
-
-interface Props extends BareProps, WithTranslation {
-  asHex?: boolean;
-  defaultValue: RawParam;
-  withLabel?: boolean;
-}
-
-function StaticParam ({ asHex, className, defaultValue, label, style, t }: Props): React.ReactElement<Props> {
-  const value = defaultValue && defaultValue.value && defaultValue.value[asHex ? 'toHex' : 'toString']();
-
-  return (
-    <Bare
-      className={className}
-      style={style}
-    >
-      <Static
-        className='full'
-        label={label}
-        value={value || t('<empty>')}
-      />
-    </Bare>
-  );
-}
-
-export default translate(StaticParam);
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Struct.tsx b/pioneer/packages/old-apps/react-params/src/Param/Struct.tsx
deleted file mode 100644
index 34f5b482c3..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Struct.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { TypeDef } from '@polkadot/types/types';
-import { ParamDef, Props, RawParam } from '../types';
-
-import React, { useEffect, useState } from 'react';
-import { createType, getTypeDef } from '@polkadot/types';
-
-import Params from '../';
-import Base from './Base';
-import Static from './Static';
-
-export default function StructParam (props: Props): React.ReactElement<Props> {
-  const { className, isDisabled, label, onChange, style, type, withLabel } = props;
-  const [params, setParams] = useState<ParamDef[]>([]);
-
-  useEffect((): void => {
-    const rawType = createType(type.type as any).toRawType();
-    const typeDef = getTypeDef(rawType);
-
-    setParams((typeDef.sub as TypeDef[]).map((type): ParamDef => ({ name: type.name, type })));
-  }, [type]);
-
-  if (isDisabled) {
-    return <Static {...props} />;
-  }
-
-  const _onChangeParams = (values: RawParam[]): void => {
-    onChange && onChange({
-      isValid: values.reduce((result, { isValid }): boolean => result && isValid, true as boolean),
-      value: params.reduce((value: Record<string, any>, { name }, index): Record<string, any> => {
-        value[name as string] = values[index].value;
-
-        return value;
-      }, {})
-    });
-  };
-
-  return (
-    <div className='ui--Params-Struct'>
-      <Base
-        className={className}
-        label={label}
-        style={style}
-        withLabel={withLabel}
-      />
-      <Params
-        onChange={_onChangeParams}
-        params={params}
-      />
-    </div>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Text.tsx b/pioneer/packages/old-apps/react-params/src/Param/Text.tsx
deleted file mode 100644
index 5cca4dc293..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Text.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Props } from '../types';
-
-import React from 'react';
-import { Input } from '@polkadot/react-components';
-
-import Bare from './Bare';
-
-function onChange ({ onChange }: Props): (_: string) => void {
-  return function (value: string): void {
-    const isValid = value.length !== 0;
-
-    onChange && onChange({
-      isValid,
-      value
-    });
-  };
-}
-
-export default function Text (props: Props): React.ReactNode {
-  const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = props;
-  const defaultValue = (value || '').toString();
-
-  return (
-    <Bare
-      className={className}
-      style={style}
-    >
-      <Input
-        className='full'
-        defaultValue={defaultValue}
-        isDisabled={isDisabled}
-        isError={isError}
-        label={label}
-        onChange={onChange(props)}
-        onEnter={onEnter}
-        placeholder='<any string>'
-        type='text'
-        withLabel={withLabel}
-      />
-    </Bare>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Tuple.tsx b/pioneer/packages/old-apps/react-params/src/Param/Tuple.tsx
deleted file mode 100644
index 31f072aa7c..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Tuple.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { TypeDef } from '@polkadot/types/types';
-import { ParamDef, Props, RawParam } from '../types';
-
-import React, { useEffect, useState } from 'react';
-import { createType, getTypeDef } from '@polkadot/types';
-
-import Params from '../';
-import Base from './Base';
-import Static from './Static';
-
-export default function Tuple (props: Props): React.ReactElement<Props> {
-  const [params, setParams] = useState<ParamDef[]>([]);
-  const { className, isDisabled, label, onChange, style, type, withLabel } = props;
-
-  useEffect((): void => {
-    const rawType = createType(type.type as any).toRawType();
-    const typeDef = getTypeDef(rawType);
-
-    setParams((typeDef.sub as TypeDef[]).map((type): ParamDef => ({ name: type.name, type })));
-  }, [type]);
-
-  if (isDisabled) {
-    return <Static {...props} />;
-  }
-
-  const _onChangeParams = (values: RawParam[]): void => {
-    onChange && onChange({
-      isValid: values.reduce((result, { isValid }): boolean => result && isValid, true as boolean),
-      value: values.map(({ value }): any => value)
-    });
-  };
-
-  return (
-    <div className='ui--Params-Tuple'>
-      <Base
-        className={className}
-        label={label}
-        style={style}
-        withLabel={withLabel}
-      />
-      <Params
-        onChange={_onChangeParams}
-        params={params}
-      />
-    </div>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Unknown.tsx b/pioneer/packages/old-apps/react-params/src/Param/Unknown.tsx
deleted file mode 100644
index 7adeefb7be..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Unknown.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Props as BareProps, RawParam } from '../types';
-
-import React from 'react';
-
-import BaseBytes from './BaseBytes';
-import Static from './Static';
-
-interface Props extends BareProps {
-  defaultValue: RawParam;
-  withLabel?: boolean;
-}
-
-export default function Unknown (props: Props): React.ReactElement<Props> {
-  const { className, defaultValue, isDisabled, isError, label, name, onChange, onEnter, style, type } = props;
-
-  if (isDisabled) {
-    return <Static {...props} />;
-  }
-
-  return (
-    <BaseBytes
-      asHex
-      className={className}
-      defaultValue={defaultValue}
-      isDisabled={isDisabled}
-      isError={isError}
-      label={label}
-      length={-1}
-      name={name}
-      onChange={onChange}
-      onEnter={onEnter}
-      style={style}
-      type={type}
-      withLength={false}
-    />
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Vector.tsx b/pioneer/packages/old-apps/react-params/src/Param/Vector.tsx
deleted file mode 100644
index 55ba136b89..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Vector.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { WithTranslation } from 'react-i18next';
-import { TypeDef } from '@polkadot/types/types';
-import { ParamDef, Props as BareProps, RawParam } from '../types';
-
-import React, { useEffect, useState } from 'react';
-import { Button } from '@polkadot/react-components';
-import { isUndefined } from '@polkadot/util';
-
-import translate from '../translate';
-import getInitValue from '../initValue';
-import Params from '../';
-import Base from './Base';
-
-interface Props extends BareProps, WithTranslation {}
-
-function generateParam (type: TypeDef, index: number): ParamDef {
-  return {
-    name: `${index}: ${type.type}`,
-    type
-  };
-}
-
-function Vector ({ className, defaultValue, isDisabled = false, label, onChange, style, t, type, withLabel }: Props): React.ReactElement<Props> | null {
-  const [count, setCount] = useState(0);
-  const [params, setParams] = useState<ParamDef[]>([]);
-  const [values, setValues] = useState<RawParam[]>([]);
-
-  // when !isDisable, generating an input & params based on count
-  useEffect((): void => {
-    if (!isDisabled) {
-      const subType = type.sub as TypeDef;
-      const params: ParamDef[] = [];
-
-      for (let index = 0; index < count; index++) {
-        params.push(generateParam(subType, index));
-      }
-
-      setParams(params);
-
-      if (values.length !== count) {
-        while (values.length < count) {
-          const value = getInitValue(type.sub as TypeDef);
-
-          values.push({ isValid: !isUndefined(value), value });
-        }
-
-        setValues(values.slice(0, count));
-      }
-    }
-  }, [count, isDisabled, type, values]);
-
-  // when isDisabled, set the params & values based on the defaultValue input
-  useEffect((): void => {
-    if (isDisabled) {
-      const subType = type.sub as TypeDef;
-      const params: ParamDef[] = [];
-      const values: RawParam[] = [];
-
-      (defaultValue.value || []).forEach((value: RawParam, index: number): void => {
-        values.push(
-          isUndefined(value) || isUndefined(value.isValid)
-            ? { isValid: !isUndefined(value), value }
-            : value
-        );
-        params.push(generateParam(subType, index));
-      });
-
-      setParams(params);
-      setValues(values);
-    }
-  }, [defaultValue, isDisabled, type]);
-
-  // when our values has changed, alert upstream
-  useEffect((): void => {
-    onChange && onChange({
-      isValid: values.reduce((result: boolean, { isValid }): boolean => result && isValid, true),
-      value: values.map(({ value }): any => value)
-    });
-  }, [values]);
-
-  const _rowAdd = (): void => setCount(count + 1);
-  const _rowRemove = (): void => setCount(count - 1);
-
-  return (
-    <Base
-      className={className}
-      isOuter
-      label={label}
-      style={style}
-      withLabel={withLabel}
-    >
-      {!isDisabled && (
-        <div className='ui--Param-Vector-buttons'>
-          <Button
-            isPrimary
-            onClick={_rowAdd}
-            label={t('Add item')}
-            icon='add'
-          />
-          <Button
-            isDisabled={values.length === 0}
-            isNegative
-            onClick={_rowRemove}
-            label={t('Remove item')}
-            icon='minus'
-          />
-        </div>
-      )}
-      <Params
-        isDisabled={isDisabled}
-        onChange={setValues}
-        params={params}
-        values={values}
-      />
-    </Base>
-  );
-}
-
-export default translate(Vector);
diff --git a/pioneer/packages/old-apps/react-params/src/Param/Vote.tsx b/pioneer/packages/old-apps/react-params/src/Param/Vote.tsx
deleted file mode 100644
index 3ddf0701ed..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/Vote.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Props } from '../types';
-
-import BN from 'bn.js';
-import React from 'react';
-import { GenericVote } from '@polkadot/types';
-import { Dropdown } from '@polkadot/react-components';
-
-import Bare from './Bare';
-
-const options = [
-  { text: 'Nay', value: 0 },
-  { text: 'Aye', value: -1 }
-];
-
-function onChange ({ onChange }: Props): (_: number) => void {
-  return function (value: number): void {
-    onChange && onChange({
-      isValid: true,
-      value
-    });
-  };
-}
-
-export default function Vote (props: Props): React.ReactElement<Props> {
-  const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = props;
-  const defaultValue = value instanceof BN
-    ? value.toNumber()
-    : value instanceof GenericVote
-      ? (value.isAye ? -1 : 0)
-      : value as number;
-
-  return (
-    <Bare
-      className={className}
-      style={style}
-    >
-      <Dropdown
-        className='full'
-        defaultValue={defaultValue}
-        isDisabled={isDisabled}
-        isError={isError}
-        label={label}
-        options={options}
-        onChange={onChange(props)}
-        withLabel={withLabel}
-      />
-    </Bare>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/VoteThreshold.tsx b/pioneer/packages/old-apps/react-params/src/Param/VoteThreshold.tsx
deleted file mode 100644
index dee874cc9e..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/VoteThreshold.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Props } from '../types';
-
-import React from 'react';
-import { ClassOf } from '@polkadot/types';
-import { Dropdown } from '@polkadot/react-components';
-import { bnToBn } from '@polkadot/util';
-
-import Bare from './Bare';
-
-type TextMap = Record<number, string>;
-
-const options = [
-  { text: 'Super majority approval', value: 0 },
-  { text: 'Super majority rejection', value: 1 },
-  { text: 'Simple majority', value: 2 }
-];
-
-export const textMap = options.reduce((textMap, { text, value }): TextMap => {
-  textMap[value] = text;
-
-  return textMap;
-}, {} as unknown as TextMap);
-
-function onChange ({ onChange }: Props): (_: number) => void {
-  return function (value: number): void {
-    onChange && onChange({
-      isValid: true,
-      value
-    });
-  };
-}
-
-export default function VoteThresholdParam (props: Props): React.ReactElement<Props> {
-  const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = props;
-  const defaultValue = value instanceof ClassOf('VoteThreshold')
-    ? value.toNumber()
-    : bnToBn(value as number).toNumber();
-
-  return (
-    <Bare
-      className={className}
-      style={style}
-    >
-      <Dropdown
-        className='full'
-        defaultValue={defaultValue}
-        isDisabled={isDisabled}
-        isError={isError}
-        label={label}
-        options={options}
-        onChange={onChange(props)}
-        withLabel={withLabel}
-      />
-    </Bare>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/findComponent.ts b/pioneer/packages/old-apps/react-params/src/Param/findComponent.ts
deleted file mode 100644
index f36b999ac5..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/findComponent.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { TypeDef, TypeDefInfo } from '@polkadot/types/types';
-import { Props, ComponentMap } from '../types';
-
-import BN from 'bn.js';
-import { createType, getTypeDef } from '@polkadot/types';
-
-import Account from './Account';
-import Amount from './Amount';
-import Balance from './Balance';
-import Bool from './Bool';
-import Bytes from './Bytes';
-import Code from './Code';
-import Data from './Data';
-import Enum from './Enum';
-import Hash256 from './Hash256';
-import Hash512 from './Hash512';
-import Moment from './Moment';
-import Proposal from './Proposal';
-import KeyValue from './KeyValue';
-import KeyValueArray from './KeyValueArray';
-import Null from './Null';
-import Option from './Option';
-import Struct from './Struct';
-import Text from './Text';
-import Tuple from './Tuple';
-import Unknown from './Unknown';
-import Vector from './Vector';
-import Vote from './Vote';
-import VoteThreshold from './VoteThreshold';
-
-interface TypeToComponent {
-  c: React.ComponentType<Props>;
-  t: string[];
-}
-
-const components: ComponentMap = ([
-  { c: Account, t: ['AccountId', 'AccountIdOf', 'Address', 'AuthorityId', 'SessionKey', 'ValidatorId'] },
-  { c: Amount, t: ['AccountIndex', 'AssetId', 'BlockNumber', 'Gas', 'Index', 'Nonce', 'ParaId', 'ProposalIndex', 'PropIndex', 'ReferendumIndex', 'i8', 'i16', 'i32', 'i64', 'i128', 'u8', 'u16', 'u32', 'u64', 'u128', 'u256', 'VoteIndex'] },
-  { c: Balance, t: ['Amount', 'AssetOf', 'Balance', 'BalanceOf'] },
-  { c: Bool, t: ['bool'] },
-  { c: Bytes, t: ['Bytes'] },
-  { c: Code, t: ['Code'] },
-  { c: Data, t: ['Data', 'Keys'] },
-  { c: Enum, t: ['Enum'] },
-  { c: Hash256, t: ['CodeHash', 'Hash', 'H256', 'SeedOf'] },
-  { c: Hash512, t: ['H512', 'Signature'] },
-  { c: KeyValue, t: ['KeyValue'] },
-  { c: KeyValueArray, t: ['Vec<KeyValue>'] },
-  { c: Moment, t: ['Moment', 'MomentOf'] },
-  { c: Null, t: ['Null'] },
-  { c: Option, t: ['Option'] },
-  { c: Proposal, t: ['Proposal'] },
-  { c: Text, t: ['String', 'Text'] },
-  { c: Struct, t: ['Struct'] },
-  { c: Tuple, t: ['Tuple'] },
-  { c: Vector, t: ['Vec'] },
-  { c: Vote, t: ['Vote'] },
-  { c: VoteThreshold, t: ['VoteThreshold'] },
-  { c: Unknown, t: ['Unknown'] }
-] as TypeToComponent[]).reduce((components, { c, t }): ComponentMap => {
-  t.forEach((type): void => {
-    components[type] = c;
-  });
-
-  return components;
-}, {} as unknown as ComponentMap);
-
-export default function findComponent (def: TypeDef, overrides: ComponentMap = {}): React.ComponentType<Props> {
-  const findOne = (type: string): React.ComponentType<Props> | null =>
-    overrides[type] || components[type];
-  const type = (({ displayName, info, sub, type }: TypeDef): string => {
-    if (displayName) {
-      return displayName;
-    }
-
-    switch (info) {
-      case TypeDefInfo.Compact:
-        return (sub as TypeDef).type;
-
-      case TypeDefInfo.Option:
-        return 'Option';
-
-      case TypeDefInfo.Enum:
-        return 'Enum';
-
-      case TypeDefInfo.Struct:
-        return 'Struct';
-
-      case TypeDefInfo.Tuple:
-        if (components[type] === Account) {
-          return type;
-        }
-        return 'Tuple';
-
-      case TypeDefInfo.Vec:
-        return ['Vec<KeyValue>'].includes(type)
-          ? 'Vec<KeyValue>'
-          : 'Vec';
-
-      default:
-        return type;
-    }
-  })(def);
-
-  let Component = findOne(type);
-
-  if (!Component) {
-    try {
-      const instance = createType(type as any);
-      const raw = getTypeDef(instance.toRawType());
-
-      Component = findOne(raw.type);
-
-      if (Component) {
-        return Component;
-      } else if (instance instanceof BN) {
-        return Amount;
-      } else if ([TypeDefInfo.Enum, TypeDefInfo.Struct].includes(raw.info)) {
-        return findComponent(raw, overrides);
-      }
-    } catch (error) {
-      // console.error(error.message);
-    }
-
-    console.warn(`Cannot find Component for ${type}, defaulting to Unknown`);
-  }
-
-  return Component || Unknown;
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Param/index.tsx b/pioneer/packages/old-apps/react-params/src/Param/index.tsx
deleted file mode 100644
index 8114e6f7b3..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Param/index.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { BaseProps, Props as CProps, ComponentMap } from '../types';
-
-import React, { useRef } from 'react';
-import { classes } from '@polkadot/react-components/util';
-import { isUndefined } from '@polkadot/util';
-
-import translate from '../translate';
-import findComponent from './findComponent';
-import Static from './Static';
-
-interface Props extends I18nProps, BaseProps {
-  isDisabled?: boolean;
-  isOptional?: boolean;
-  overrides?: ComponentMap;
-}
-
-function Param ({ className, defaultValue, isDisabled, isOptional, name, onChange, onEnter, overrides, style, type }: Props): React.ReactElement<Props> | null {
-  const compRef = useRef<React.ComponentType<CProps> | null>(findComponent(type, overrides));
-
-  if (!compRef.current) {
-    return null;
-  }
-
-  const label = isUndefined(name)
-    ? (type.displayName || type.type)
-    : `${name}: ${type.displayName || type.type}`;
-
-  return isOptional
-    ? (
-      <Static
-        defaultValue={defaultValue}
-        label={label}
-        type={type}
-      />
-    )
-    : (
-      <compRef.current
-        className={classes('ui--Param', className)}
-        defaultValue={defaultValue}
-        key={`${name}:${type}`}
-        isDisabled={isDisabled}
-        label={label}
-        name={name}
-        onChange={onChange}
-        onEnter={onEnter}
-        style={style}
-        type={type}
-      />
-    );
-}
-
-export default translate(Param);
diff --git a/pioneer/packages/old-apps/react-params/src/ParamComp.tsx b/pioneer/packages/old-apps/react-params/src/ParamComp.tsx
deleted file mode 100644
index 297c16ec32..0000000000
--- a/pioneer/packages/old-apps/react-params/src/ParamComp.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { TypeDef } from '@polkadot/types/types';
-import { ComponentMap, RawParam, RawParams, RawParamOnChangeValue } from './types';
-
-import React from 'react';
-
-import Param from './Param';
-
-interface Props {
-  defaultValue: RawParam;
-  index: number;
-  isDisabled?: boolean;
-  name?: string;
-  onChange: (index: number, value: RawParamOnChangeValue) => void;
-  onEnter?: () => void;
-  overrides?: ComponentMap;
-  type: TypeDef;
-  values?: RawParams | null;
-}
-
-export default function ParamComp ({ defaultValue, index, isDisabled, name, onChange, onEnter, overrides, type }: Props): React.ReactElement<Props> {
-  const _onChange = (value: RawParamOnChangeValue): void =>
-    onChange(index, value);
-
-  return (
-    <div className='ui--Param-composite'>
-      <Param
-        defaultValue={defaultValue}
-        isDisabled={isDisabled}
-        key={`input:${index}`}
-        name={name}
-        onChange={_onChange}
-        onEnter={onEnter}
-        overrides={overrides}
-        type={type}
-      />
-    </div>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-params/src/Params.css b/pioneer/packages/old-apps/react-params/src/Params.css
deleted file mode 100644
index 6d7ab242ed..0000000000
--- a/pioneer/packages/old-apps/react-params/src/Params.css
+++ /dev/null
@@ -1,56 +0,0 @@
-/* Copyright 2017-2019 @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. */
-
-.ui--Params {
-  border-left: 0.25rem solid #f2f2f2;
-
-  .ui--Param .ui--Labelled label {
-    text-transform: none !important;
-    font-family: monospace;
-  }
-
-  .ui--row {
-    flex-wrap: wrap;
-  }
-}
-
-.ui--Param-Address {
-  font-family: monospace;
-}
-
-.ui--Params-Content {
-  box-sizing: border-box;
-  padding: 0 0 0 1.75rem;
-}
-
-.ui--Param-text {
-  display: inline-block;
-  font-size: 1rem;
-  line-height: 1.714rem;
-}
-
-.ui--Param-text .icon {
-  margin-right: 0.5rem !important;
-}
-
-.ui--Param-text * {
-  vertical-align: middle;
-}
-
-.ui--Param-text.nowrap {
-  white-space: nowrap;
-}
-
-.ui--Param-text.name {
-  color: rgba(0, 0, 0, .6);
-  font-style: italic;
-}
-
-.ui--Param-text + .ui--Param-text {
-  margin-left: 0.5rem;
-}
-
-.ui--Param-Vector-buttons {
-  text-align: right;
-}
diff --git a/pioneer/packages/old-apps/react-params/src/index.tsx b/pioneer/packages/old-apps/react-params/src/index.tsx
deleted file mode 100644
index d2684c5eea..0000000000
--- a/pioneer/packages/old-apps/react-params/src/index.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { ComponentMap, ParamDef, RawParam, RawParams, RawParamOnChangeValue } from './types';
-
-import './Params.css';
-
-import React from 'react';
-import styled from 'styled-components';
-import { classes } from '@polkadot/react-components/util';
-
-import ParamComp from './ParamComp';
-import translate from './translate';
-import { createValue } from './values';
-
-interface Props extends I18nProps {
-  isDisabled?: boolean;
-  onChange?: (value: RawParams) => void;
-  onEnter?: () => void;
-  overrides?: ComponentMap;
-  params: ParamDef[];
-  values?: RawParams | null;
-}
-
-interface State {
-  params?: ParamDef[] | null;
-  values?: RawParams;
-}
-
-class Params extends React.PureComponent<Props, State> {
-  public state: State = {
-    params: null
-  };
-
-  public static getDerivedStateFromProps ({ isDisabled, params, values }: Props, prevState: State): Pick<State, never> | null {
-    const isSame = JSON.stringify(prevState.params) === JSON.stringify(params);
-
-    if (isDisabled || isSame) {
-      return null;
-    }
-
-    return {
-      params,
-      values: params.reduce(
-        (result: RawParams, param, index): RawParams => [
-          ...result,
-          values && values[index]
-            ? values[index]
-            : createValue(param)
-        ],
-        []
-      )
-    };
-  }
-
-  // Fire the initial onChange (we did update) when the component is loaded
-  public componentDidMount (): void {
-    this.componentDidUpdate(null, {});
-  }
-
-  // This is needed in the case where the item changes, i.e. the values get
-  // initialized and we need to alert the parent that we have new values
-  public componentDidUpdate (_: Props | null, prevState: State): void {
-    const { isDisabled } = this.props;
-    const { values } = this.state;
-
-    if (!isDisabled && JSON.stringify(prevState.values) !== JSON.stringify(values)) {
-      this.triggerUpdate();
-    }
-  }
-
-  public render (): React.ReactNode {
-    const { className, isDisabled, overrides, params, style } = this.props;
-    const { values = this.props.values } = this.state;
-
-    if (!values || !values.length) {
-      return null;
-    }
-
-    return (
-      <div
-        className={classes('ui--Params', className)}
-        style={style}
-      >
-        <div className='ui--Params-Content'>
-          {values && params.map(({ name, type }: ParamDef, index: number): React.ReactNode => (
-            <ParamComp
-              defaultValue={values[index]}
-              index={index}
-              isDisabled={isDisabled}
-              key={`${name}:${type}:${index}`}
-              name={name}
-              onChange={this.onChangeParam}
-              overrides={overrides}
-              type={type}
-            />
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  private onChangeParam = (index: number, newValue: RawParamOnChangeValue): void => {
-    const { isDisabled } = this.props;
-
-    if (isDisabled) {
-      return;
-    }
-
-    const { isValid = false, value } = newValue;
-
-    this.setState(
-      (prevState: State): Pick<State, never> => ({
-        values: (prevState.values || []).map((prev, prevIndex): RawParam =>
-          prevIndex !== index
-            ? prev
-            : { isValid, value }
-        )
-      }),
-      this.triggerUpdate
-    );
-  }
-
-  private triggerUpdate = (): void => {
-    const { onChange, isDisabled } = this.props;
-    const { values } = this.state;
-
-    if (isDisabled || !values) {
-      return;
-    }
-
-    onChange && onChange(values);
-  }
-}
-
-export default translate(
-  styled(Params as React.ComponentClass<Props>)`
-    .ui--Param-composite {
-      position: relative;
-
-      .ui--Param-overlay {
-        position: absolute;
-        top: 0.5rem;
-        right: 3.5rem;
-      }
-    }
-  `
-);
diff --git a/pioneer/packages/old-apps/react-params/src/initValue.ts b/pioneer/packages/old-apps/react-params/src/initValue.ts
deleted file mode 100644
index 8578f2f521..0000000000
--- a/pioneer/packages/old-apps/react-params/src/initValue.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { TypeDef, TypeDefInfo } from '@polkadot/types/types';
-import { RawParamValue } from './types';
-
-import BN from 'bn.js';
-import { Bytes, U8a, createType, getTypeDef } from '@polkadot/types';
-
-export default function getInitValue (def: TypeDef): RawParamValue | RawParamValue[] {
-  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))
-      : [];
-  } else if (def.info === TypeDefInfo.Struct) {
-    return Array.isArray(def.sub)
-      ? def.sub.reduce((result, def): Record<string, RawParamValue | RawParamValue[]> => {
-        result[def.name as string] = getInitValue(def);
-
-        return result;
-      }, {} as unknown as Record<string, RawParamValue | RawParamValue[]>)
-      : {};
-  } else if (def.info === TypeDefInfo.Enum) {
-    return Array.isArray(def.sub)
-      ? { [def.sub[0].name as string]: getInitValue(def.sub[0]) }
-      : {};
-  }
-
-  const type = [TypeDefInfo.Compact, TypeDefInfo.Option].includes(def.info)
-    ? (def.sub as TypeDef).type
-    : def.type;
-
-  switch (type) {
-    case 'AccountIndex':
-    case 'Balance':
-    case 'BalanceOf':
-    case 'BlockNumber':
-    case 'Compact':
-    case 'Gas':
-    case 'Index':
-    case 'Nonce':
-    case 'ParaId':
-    case 'PropIndex':
-    case 'ProposalIndex':
-    case 'ReferendumIndex':
-    case 'i8':
-    case 'i16':
-    case 'i32':
-    case 'i64':
-    case 'i128':
-    case 'u8':
-    case 'u16':
-    case 'u32':
-    case 'u64':
-    case 'u128':
-    case 'VoteIndex':
-      return new BN(0);
-
-    case 'bool':
-      return false;
-
-    case 'String':
-    case 'Text':
-      return '';
-
-    case 'Moment':
-      return new BN(0);
-
-    case 'Vote':
-      return -1;
-
-    case 'VoteThreshold':
-      return 0;
-
-    case 'Bytes':
-      return new Bytes();
-
-    case 'CodeHash':
-    case 'Hash':
-      return createType('Hash');
-
-    case 'H256':
-      return createType('H256');
-
-    case 'H512':
-      return createType('H512');
-
-    case 'Data':
-    case 'Keys':
-      return '';
-
-    case 'AccountId':
-    case 'AccountIdOf':
-    case 'Address':
-    case 'Call':
-    case 'CandidateReceipt':
-    case 'Digest':
-    case 'Header':
-    case 'KeyValue':
-    case 'MisbehaviorReport':
-    case 'Proposal':
-    case 'Signature':
-    case 'SessionKey':
-    case 'StorageKey':
-    case 'ValidatorId':
-      return undefined;
-
-    case 'Extrinsic':
-      return new U8a();
-
-    case 'Null':
-      return null;
-
-    default: {
-      try {
-        const instance = createType(type as any);
-        const raw = getTypeDef(instance.toRawType());
-
-        if (instance instanceof BN) {
-          return new BN(0);
-        } else if ([TypeDefInfo.Enum, TypeDefInfo.Struct].includes(raw.info)) {
-          return getInitValue(raw);
-        }
-      } catch (error) {
-        // console.error(error.message);
-      }
-
-      console.warn(`Unable to determine default type for ${JSON.stringify(def)}`);
-
-      return '0x';
-    }
-  }
-}
diff --git a/pioneer/packages/old-apps/react-params/src/translate.ts b/pioneer/packages/old-apps/react-params/src/translate.ts
deleted file mode 100644
index 623d6a771d..0000000000
--- a/pioneer/packages/old-apps/react-params/src/translate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { withTranslation } from 'react-i18next';
-
-export default withTranslation(['react-params']);
diff --git a/pioneer/packages/old-apps/react-params/src/types.ts b/pioneer/packages/old-apps/react-params/src/types.ts
deleted file mode 100644
index 3113f93256..0000000000
--- a/pioneer/packages/old-apps/react-params/src/types.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { TypeDef } from '@polkadot/types/types';
-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 RawParamValueArray = (RawParamValue | RawParamValue[])[];
-
-export type RawParamValues = RawParamValue | RawParamValueArray;
-
-export interface RawParam {
-  isValid: boolean;
-  value: RawParamValues;
-}
-
-export interface RawParamOnChangeValue {
-  isValid: boolean;
-  value: RawParamValues;
-}
-export type RawParamOnChange = (value: RawParamOnChangeValue) => void;
-export type RawParamOnEnter = () => void;
-
-export type RawParams = RawParam[];
-
-export interface BaseProps extends BareProps {
-  defaultValue: RawParam;
-  name?: string;
-  onChange?: RawParamOnChange;
-  onEnter?: RawParamOnEnter;
-  type: TypeDef;
-}
-
-export interface Props extends BaseProps {
-  isDisabled?: boolean;
-  isError?: boolean;
-  isReadOnly?: boolean;
-  label?: React.ReactNode;
-  withLabel?: boolean;
-}
-
-export type Size = 'full' | 'large' | 'medium' | 'small';
-
-export type ComponentMap = Record<string, React.ComponentType<Props>>;
-
-export interface ParamDef {
-  name?: string;
-  type: TypeDef;
-}
diff --git a/pioneer/packages/old-apps/react-params/src/valueToText.tsx b/pioneer/packages/old-apps/react-params/src/valueToText.tsx
deleted file mode 100644
index d083816630..0000000000
--- a/pioneer/packages/old-apps/react-params/src/valueToText.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { Keys, ValidatorId } from '@polkadot/types/interfaces';
-
-import './Params.css';
-
-import React from 'react';
-import { classes } from '@polkadot/react-components/util';
-import { isNull, isUndefined, u8aToHex } from '@polkadot/util';
-import { Option, U8a } from '@polkadot/types';
-
-interface DivProps {
-  className?: string;
-  key?: any;
-}
-
-function div ({ key, className }: DivProps, ...values: React.ReactNode[]): React.ReactNode {
-  return (
-    <div
-      className={classes('ui--Param-text', className)}
-      key={key}
-    >
-      {values}
-    </div>
-  );
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function valueToText (type: string, value: any, swallowError = true, contentShorten = true): React.ReactNode {
-  if (isNull(value) || isUndefined(value)) {
-    return div({}, '<unknown>');
-  }
-
-  // FIXME dont' even ask, nested ?: ... really?
-  return div(
-    {},
-    ['Bytes', 'Data', 'Option<Keys>', 'Keys'].includes(type)
-      ? u8aToHex(value.toU8a(true), contentShorten ? 512 : -1)
-      : (
-        // 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(
-            (value as ([ValidatorId, Keys])[]).map(([validator, keys]): [string, string] => [
-              validator.toString(), keys.toHex()
-            ])
-          )
-          : (
-            value instanceof U8a
-              ? (
-                value.isEmpty
-                  ? '<empty>'
-                  : value.toString()
-              )
-              : (
-                (value instanceof Option) && value.isNone
-                  ? '<none>'
-                  : value.toString()
-              )
-          )
-      )
-  );
-}
-
-export default valueToText;
diff --git a/pioneer/packages/old-apps/react-params/src/values.ts b/pioneer/packages/old-apps/react-params/src/values.ts
deleted file mode 100644
index c316e2189f..0000000000
--- a/pioneer/packages/old-apps/react-params/src/values.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// Copyright 2017-2019 @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.
-
-import { TypeDef } from '@polkadot/types/types';
-import { RawParam } from './types';
-
-import { isUndefined } from '@polkadot/util';
-
-import getInitValue from './initValue';
-
-export function createValue (param: { type: TypeDef }): RawParam {
-  const value = getInitValue(param.type);
-
-  return {
-    isValid: !isUndefined(value),
-    value
-  };
-}
-
-export default function createValues (params: { type: TypeDef }[]): RawParam[] {
-  return params.map(createValue);
-}
diff --git a/pioneer/packages/old-apps/react-query/LICENSE b/pioneer/packages/old-apps/react-query/LICENSE
deleted file mode 100644
index 0d381b2e97..0000000000
--- a/pioneer/packages/old-apps/react-query/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/pioneer/packages/old-apps/react-query/README.md b/pioneer/packages/old-apps/react-query/README.md
deleted file mode 100644
index ce004d10e7..0000000000
--- a/pioneer/packages/old-apps/react-query/README.md
+++ /dev/null
@@ -1,42 +0,0 @@
-# @polkadot/react-query
-
-WARNING: This is an internal package to [polkadot-js/apps](https://github.com/polkadot-js/apps) so is not inteded (yet) for broad use. Since these are generic components, they will move to the [polkadot-js/ui](https://github.com/polkadot-js/ui) repo once deemed stable and usable.
-
-For the existing sharable components usable in external React-based projects, take a look at the [polkadot-js/ui documentation](https://polkadot.js.org/ui/)
-
-## Overview
-
-A collection of RxJS enabled React components that operate with the [@polkadot/api-rx](https://github.com/polkadot-js/api) library. It automatically manages subscriptions on behalf of the developer, providing a number of unstyled components that can be used to construct UIs.
-
-## Usage
-
-Basic usage entails creating a `ContextProvider` and just using the components. For instance, to display the current node time,
-
-```js
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import { Api, NodeTime } from '@polkadot/react-query';
-
-...
-ReactDOM.render(
-  <Api>
-    <NodeTime />
-  </Api>,
-  document.querySelector('#container')
-);
-...
-```
-
-All components are provided unstyled making no assumptions on the actual use, however they all support (optionally) the `label`, `className` and `style` attributes, that can be used to style to component.
-
-```js
-...
-ReactDOM.render(
-  <Api>
-    <NodeTime className='rx-time' label='current node time:' />
-  </Api>,
-  document.querySelector('#container')
-);
-...
-```
diff --git a/pioneer/packages/old-apps/react-query/index.html b/pioneer/packages/old-apps/react-query/index.html
deleted file mode 100644
index 6451b7a110..0000000000
--- a/pioneer/packages/old-apps/react-query/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<html>
-  <head>
-    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
-    <style>
-      #demo {
-        padding: 0.5em;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="demo"></div>
-    <script src="./demo.js"></script>
-  </body>
-</html>
diff --git a/pioneer/packages/old-apps/react-query/package.json b/pioneer/packages/old-apps/react-query/package.json
deleted file mode 100644
index 2d5bc448e4..0000000000
--- a/pioneer/packages/old-apps/react-query/package.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "name": "@polkadot/react-query",
-  "version": "0.37.0-beta.63",
-  "description": "A collection of RxJs React components the Polkadot JS API",
-  "main": "index.js",
-  "keywords": [
-    "Polkadot",
-    "React",
-    "RxJs"
-  ],
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "contributors": [],
-  "license": "Apache-2.0",
-  "engines": {
-    "node": ">=8.0"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/polkadot-js/ui.git"
-  },
-  "bugs": {
-    "url": "https://github.com/polkadot-js/ui/issues"
-  },
-  "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-reactive#readme",
-  "dependencies": {
-    "@babel/runtime": "^7.7.1"
-  }
-}
diff --git a/pioneer/packages/old-apps/react-query/src/AccountIndex.tsx b/pioneer/packages/old-apps/react-query/src/AccountIndex.tsx
deleted file mode 100644
index b28c0a7391..0000000000
--- a/pioneer/packages/old-apps/react-query/src/AccountIndex.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { DeriveAccountInfo } from '@polkadot/api-derive/types';
-import { BareProps, CallProps } from '@polkadot/react-api/types';
-
-import React from 'react';
-import { withCalls } from '@polkadot/react-api';
-
-interface Props extends BareProps, CallProps {
-  children?: React.ReactNode;
-  info?: DeriveAccountInfo;
-  label?: React.ReactNode;
-  params?: string | null;
-}
-
-export function AccountIndexDisplay ({ children, className, info, label = '', style }: Props): React.ReactElement<Props> {
-  const { accountIndex } = info || {};
-
-  return (
-    <div
-      className={className}
-      style={style}
-    >
-      {label}{
-        accountIndex
-          ? accountIndex.toString()
-          : '-'
-      }{children}
-    </div>
-  );
-}
-
-export default withCalls<Props>(
-  ['derive.accounts.info', { paramName: 'params' }]
-)(AccountIndexDisplay);
diff --git a/pioneer/packages/old-apps/react-query/src/AccountName.tsx b/pioneer/packages/old-apps/react-query/src/AccountName.tsx
deleted file mode 100644
index a4b31d981c..0000000000
--- a/pioneer/packages/old-apps/react-query/src/AccountName.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { DeriveAccountInfo } from '@polkadot/api-derive/types';
-import { BareProps, CallProps } from '@polkadot/react-api/types';
-import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
-
-import React, { useState, useEffect } from 'react';
-import { withCalls } from '@polkadot/react-api';
-import { getAddressName } from '@polkadot/react-components/util';
-
-interface Props extends BareProps, CallProps {
-  children?: React.ReactNode;
-  defaultName?: string;
-  info?: DeriveAccountInfo;
-  label?: React.ReactNode;
-  params?: AccountId | AccountIndex | Address | string | null;
-  withShort?: boolean;
-}
-
-const nameCache: Map<string, string> = new Map();
-
-function defaultOrAddr (defaultName = '', _address?: AccountId | AccountIndex | Address | string | null, _accountIndex?: AccountIndex): string {
-  const accountId = (_address || '').toString();
-  const cached = nameCache.get(accountId);
-
-  if (cached) {
-    return cached;
-  }
-
-  const accountIndex = (_accountIndex || '').toString();
-  const [isAddress,, extracted] = getAddressName(accountId, null, defaultName);
-
-  if (isAddress && accountIndex) {
-    nameCache.set(accountId, accountIndex);
-
-    return accountIndex;
-  }
-
-  return extracted;
-}
-
-export function AccountName ({ children, className, defaultName, info, label = '', params, style }: Props): React.ReactElement<Props> {
-  const [name, setName] = useState(defaultOrAddr(defaultName, params));
-
-  useEffect((): void => {
-    const { accountId, accountIndex, nickname } = info || {};
-
-    if (nickname) {
-      const name = nickname.toUpperCase();
-
-      nameCache.set((params || '').toString(), name);
-      setName(name);
-    } else {
-      setName(defaultOrAddr(defaultName, accountId || params, accountIndex));
-    }
-  }, [info]);
-
-  return (
-    <div
-      className={className}
-      style={style}
-    >
-      {label}{name}{children}
-    </div>
-  );
-}
-
-export default withCalls<Props>(
-  ['derive.accounts.info', { paramName: 'params', propName: 'info' }]
-)(AccountName);
diff --git a/pioneer/packages/old-apps/react-query/src/Available.tsx b/pioneer/packages/old-apps/react-query/src/Available.tsx
deleted file mode 100644
index e414c82c61..0000000000
--- a/pioneer/packages/old-apps/react-query/src/Available.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps, CallProps } from '@polkadot/react-api/types';
-import { DerivedBalances } from '@polkadot/api-derive/types';
-import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
-
-import React from 'react';
-import { formatBalance } from '@polkadot/util';
-import { withCalls } from '@polkadot/react-api';
-
-interface Props extends BareProps, CallProps {
-  balances_all?: DerivedBalances;
-  children?: React.ReactNode;
-  label?: React.ReactNode;
-  params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
-}
-
-function AvailableDisplay ({ balances_all, children, className, label = '' }: Props): React.ReactElement<Props> {
-  return (
-    <div className={className}>
-      {label}{
-        balances_all
-          ? formatBalance(balances_all.availableBalance)
-          : '0'
-      }{children}
-    </div>
-  );
-}
-
-export default withCalls<Props>(
-  ['derive.balances.all', { paramName: 'params' }]
-)(AvailableDisplay);
diff --git a/pioneer/packages/old-apps/react-query/src/Balance.tsx b/pioneer/packages/old-apps/react-query/src/Balance.tsx
deleted file mode 100644
index 9cec68e7f2..0000000000
--- a/pioneer/packages/old-apps/react-query/src/Balance.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps, CallProps } from '@polkadot/react-api/types';
-import { DerivedBalances } from '@polkadot/api-derive/types';
-import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
-
-import React from 'react';
-
-import { withCalls } from '@polkadot/react-api';
-import { formatBalance } from '@polkadot/util';
-
-interface Props extends BareProps, CallProps {
-  children?: React.ReactNode;
-  label?: React.ReactNode;
-  params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
-  balances_all?: DerivedBalances;
-}
-
-export function BalanceDisplay ({ children, className, label = '', balances_all }: Props): React.ReactElement<Props> {
-  return (
-    <div className={className}>
-      {label}{
-        balances_all
-          ? formatBalance(balances_all.freeBalance)
-          : '-'
-      }{children}
-    </div>
-  );
-}
-
-export default withCalls<Props>(
-  ['derive.balances.all', { paramName: 'params' }]
-)(BalanceDisplay);
diff --git a/pioneer/packages/old-apps/react-query/src/BalanceVoting.tsx b/pioneer/packages/old-apps/react-query/src/BalanceVoting.tsx
deleted file mode 100644
index c887af9450..0000000000
--- a/pioneer/packages/old-apps/react-query/src/BalanceVoting.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps, CallProps } from '@polkadot/react-api/types';
-import { DerivedBalances } from '@polkadot/api-derive/types';
-import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
-
-import React from 'react';
-import { formatBalance } from '@polkadot/util';
-import { withCalls } from '@polkadot/react-api';
-
-interface Props extends BareProps, CallProps {
-  balances_all?: DerivedBalances;
-  children?: React.ReactNode;
-  label?: React.ReactNode;
-  params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
-}
-
-function BalanceVoting ({ balances_all, children, className, label = '' }: Props): React.ReactElement<Props> {
-  return (
-    <div className={className}>
-      {label}{
-        balances_all
-          ? formatBalance(balances_all.votingBalance)
-          : '0'
-      }{children}
-    </div>
-  );
-}
-
-export default withCalls<Props>(
-  ['derive.balances.all', { paramName: 'params' }]
-)(BalanceVoting);
diff --git a/pioneer/packages/old-apps/react-query/src/BestFinalized.tsx b/pioneer/packages/old-apps/react-query/src/BestFinalized.tsx
deleted file mode 100644
index 4aeb1341e0..0000000000
--- a/pioneer/packages/old-apps/react-query/src/BestFinalized.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps, CallProps } from '@polkadot/react-api/types';
-import { BlockNumber } from '@polkadot/types/interfaces';
-
-import React from 'react';
-import { withCalls } from '@polkadot/react-api';
-import { formatNumber } from '@polkadot/util';
-
-interface Props extends BareProps, CallProps {
-  children?: React.ReactNode;
-  label?: React.ReactNode;
-  chain_bestNumberFinalized?: BlockNumber;
-}
-
-export function BestFinalized ({ children, className, label = '', style, chain_bestNumberFinalized }: Props): React.ReactElement<Props> {
-  return (
-    <div
-      className={className}
-      style={style}
-    >
-      {label}{
-        chain_bestNumberFinalized
-          ? formatNumber(chain_bestNumberFinalized)
-          : '-'
-      }{children}
-    </div>
-  );
-}
-
-export default withCalls<Props>('derive.chain.bestNumberFinalized')(BestFinalized);
diff --git a/pioneer/packages/old-apps/react-query/src/BestNumber.tsx b/pioneer/packages/old-apps/react-query/src/BestNumber.tsx
deleted file mode 100644
index 073cd704dd..0000000000
--- a/pioneer/packages/old-apps/react-query/src/BestNumber.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps, CallProps } from '@polkadot/react-api/types';
-import { BlockNumber } from '@polkadot/types/interfaces';
-
-import React from 'react';
-import { withCalls } from '@polkadot/react-api';
-import { formatNumber } from '@polkadot/util';
-
-interface Props extends BareProps, CallProps {
-  children?: React.ReactNode;
-  label?: React.ReactNode;
-  chain_bestNumber?: BlockNumber;
-}
-
-export function BestNumber ({ children, className, label = '', style, chain_bestNumber }: Props): React.ReactElement<Props> {
-  return (
-    <div
-      className={className}
-      style={style}
-    >
-      {label}{
-        chain_bestNumber
-          ? formatNumber(chain_bestNumber)
-          : '-'
-      }{children}
-    </div>
-  );
-}
-
-export default withCalls<Props>('derive.chain.bestNumber')(BestNumber);
diff --git a/pioneer/packages/old-apps/react-query/src/BlockAuthors.tsx b/pioneer/packages/old-apps/react-query/src/BlockAuthors.tsx
deleted file mode 100644
index e0c5babfb4..0000000000
--- a/pioneer/packages/old-apps/react-query/src/BlockAuthors.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import React, { useContext, useEffect, useState } from 'react';
-import { HeaderExtended } from '@polkadot/api-derive';
-import { ApiContext } from '@polkadot/react-api';
-import { formatNumber } from '@polkadot/util';
-
-interface Authors {
-  byAuthor: Record<string, string>;
-  lastBlockAuthors?: string[];
-  lastBlockNumber?: string;
-  lastHeader?: HeaderExtended;
-  lastHeaders: HeaderExtended[];
-}
-
-interface Props {
-  children: React.ReactNode;
-}
-
-const MAX_HEADERS = 20;
-
-const byAuthor: Record<string, string> = {};
-const BlockAuthorsContext: React.Context<Authors> = React.createContext<Authors>({ byAuthor, lastHeaders: [] });
-
-function BlockAuthors ({ children }: Props): React.ReactElement<Props> {
-  const { api } = useContext(ApiContext);
-  const [state, setState] = useState<Authors>({ byAuthor, lastHeaders: [] });
-
-  useEffect((): void => {
-    // TODO We should really unsub - but since this should just be used once,
-    // atm I'm rather typing this than doing it the way it is supposed to be
-    api.isReady.then((): void => {
-      let lastHeaders: HeaderExtended[] = [];
-      let lastBlockAuthors: string[] = [];
-      let lastBlockNumber = '';
-
-      api.derive.chain.subscribeNewHeads((lastHeader): void => {
-        if (lastHeader?.number) {
-          const blockNumber = lastHeader.number.unwrap();
-          const thisBlockAuthor = lastHeader.author?.toString();
-          const thisBlockNumber = formatNumber(blockNumber);
-
-          if (thisBlockAuthor) {
-            byAuthor[thisBlockAuthor] = thisBlockNumber;
-
-            if (thisBlockNumber !== lastBlockNumber) {
-              lastBlockNumber = thisBlockNumber;
-              lastBlockAuthors = [thisBlockAuthor];
-            } else {
-              lastBlockAuthors.push(thisBlockAuthor);
-            }
-          }
-
-          lastHeaders = lastHeaders
-            .filter((old, index): boolean => index < MAX_HEADERS && old.number.unwrap().lt(blockNumber))
-            .reduce((next, header): HeaderExtended[] => {
-              next.push(header);
-
-              return next;
-            }, [lastHeader])
-            .sort((a, b): number => b.number.unwrap().cmp(a.number.unwrap()));
-
-          setState({ byAuthor, lastBlockAuthors: lastBlockAuthors.slice(), lastBlockNumber, lastHeader, lastHeaders });
-        }
-      });
-    });
-  }, []);
-
-  return (
-    <BlockAuthorsContext.Provider value={state}>
-      {children}
-    </BlockAuthorsContext.Provider>
-  );
-}
-
-export { BlockAuthorsContext, BlockAuthors };
diff --git a/pioneer/packages/old-apps/react-query/src/Bonded.tsx b/pioneer/packages/old-apps/react-query/src/Bonded.tsx
deleted file mode 100644
index 09d55ef587..0000000000
--- a/pioneer/packages/old-apps/react-query/src/Bonded.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps, CallProps } from '@polkadot/react-api/types';
-import { AccountId, AccountIndex, Address, StakingLedger } from '@polkadot/types/interfaces';
-
-import React from 'react';
-
-import { withCalls } from '@polkadot/react-api';
-import { formatBalance } from '@polkadot/util';
-
-interface Props extends BareProps, CallProps {
-  children?: React.ReactNode;
-  params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
-  label?: React.ReactNode;
-  staking_ledger?: StakingLedger | null;
-}
-
-export function BondedDisplay ({ children, className, label = '', staking_ledger }: Props): React.ReactElement<Props> {
-  return (
-    <div className={className}>
-      {label}{
-        staking_ledger
-          ? formatBalance(staking_ledger.active)
-          : '-'
-      }{children}
-    </div>
-  );
-}
-
-export default withCalls<Props>(
-  ['query.staking.bonded', {
-    paramName: 'params',
-    propName: 'controllerId',
-    transform: (value): AccountId | null =>
-      value.unwrapOr(null)
-  }],
-  ['query.staking.ledger', {
-    paramName: 'controllerId',
-    transform: (value): StakingLedger | null =>
-      value.unwrapOr(null)
-  }]
-)(BondedDisplay);
diff --git a/pioneer/packages/old-apps/react-query/src/Chain.tsx b/pioneer/packages/old-apps/react-query/src/Chain.tsx
deleted file mode 100644
index e36d270295..0000000000
--- a/pioneer/packages/old-apps/react-query/src/Chain.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps } from '@polkadot/react-api/types';
-
-import React, { useContext } from 'react';
-import { ApiContext } from '@polkadot/react-api';
-
-interface Props extends BareProps {
-  children?: React.ReactNode;
-  label?: React.ReactNode;
-}
-
-export default function Chain ({ children, className, label = '', style }: Props): React.ReactElement<Props> {
-  const { systemChain } = useContext(ApiContext);
-
-  return (
-    <div
-      className={className}
-      style={style}
-    >
-      {label}{systemChain}{children}
-    </div>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-query/src/Elapsed.tsx b/pioneer/packages/old-apps/react-query/src/Elapsed.tsx
deleted file mode 100644
index 395782904c..0000000000
--- a/pioneer/packages/old-apps/react-query/src/Elapsed.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps } from '@polkadot/react-api/types';
-
-import BN from 'bn.js';
-import React, { useEffect, useState } from 'react';
-import { bnToBn } from '@polkadot/util';
-
-type Ticker = (now: number) => void;
-
-interface Props extends BareProps {
-  value?: BN | Date | number;
-}
-
-const TICK_TIMEOUT = 100;
-const tickers = new Map<number, Ticker>();
-
-let lastNow = Date.now();
-let lastId = 0;
-
-function tick (): void {
-  lastNow = Date.now();
-
-  for (const ticker of tickers.values()) {
-    ticker(lastNow);
-  }
-
-  setTimeout(tick, TICK_TIMEOUT);
-}
-
-function getDisplayValue (now = 0, value: BN | Date | number = 0): string {
-  const tsValue = (
-    value && (value as Date).getTime
-      ? (value as Date).getTime()
-      : bnToBn(value as number).toNumber()
-  ) || 0;
-  let display = '0.0s';
-
-  if (now && tsValue) {
-    const elapsed = Math.max(Math.abs(now - tsValue), 0) / 1000;
-
-    if (elapsed < 15) {
-      display = `${elapsed.toFixed(1)}s`;
-    } else if (elapsed < 60) {
-      display = `${elapsed | 0}s`;
-    } else if (elapsed < 3600) {
-      display = `${elapsed / 60 | 0}m`;
-    } else {
-      display = `${elapsed / 3600 | 0}h`;
-    }
-  }
-
-  return display;
-}
-
-tick();
-
-export default function Elapsed ({ className, style, value }: Props): React.ReactElement<Props> {
-  const [now, setNow] = useState(lastNow);
-
-  useEffect((): () => void => {
-    const id = lastId++;
-
-    tickers.set(id, setNow);
-
-    return (): void => {
-      tickers.delete(id);
-    };
-  }, []);
-
-  return (
-    <div
-      className={['ui--Elapsed', className].join(' ')}
-      style={style}
-    >
-      {getDisplayValue(now, value)}
-    </div>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-query/src/Events.tsx b/pioneer/packages/old-apps/react-query/src/Events.tsx
deleted file mode 100644
index 98acc042ce..0000000000
--- a/pioneer/packages/old-apps/react-query/src/Events.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Codec } from '@polkadot/types/types';
-
-import React, { useContext, useEffect, useState } from 'react';
-import { ApiContext } from '@polkadot/react-api';
-import { EventRecord } from '@polkadot/types/interfaces';
-import { stringToU8a } from '@polkadot/util';
-import { xxhashAsHex } from '@polkadot/util-crypto';
-
-interface KeyedEvent {
-  key: string;
-  record: EventRecord;
-}
-
-type Events = KeyedEvent[];
-
-interface Props {
-  children: React.ReactNode;
-}
-
-const MAX_EVENTS = 20;
-
-const EventsContext: React.Context<Events> = React.createContext<Events>([]);
-
-function Events ({ children }: Props): React.ReactElement<Props> {
-  const { api } = useContext(ApiContext);
-  const [state, setState] = useState<Events>([]);
-
-  useEffect((): void => {
-    // TODO We should really unsub - but since this should just be used once,
-    // atm I'm rather typing this than doing it the way it is supposed to be
-    api.isReady.then((): void => {
-      const prevEventHash = '';
-      let events: Events = [];
-
-      api.query.system.events((records: EventRecord[] & Codec): void => {
-        const newEvents = records
-          .filter(({ event }): boolean => event.section !== 'system')
-          .map((record, index): KeyedEvent => ({ key: `${Date.now()}-${index}`, record }));
-        const newEventHash = xxhashAsHex(stringToU8a(JSON.stringify(newEvents)));
-
-        if (newEventHash !== prevEventHash) {
-          events = [...newEvents, ...events].slice(0, MAX_EVENTS);
-          setState(events);
-        }
-      });
-    });
-  }, []);
-
-  return (
-    <EventsContext.Provider value={state}>
-      {children}
-    </EventsContext.Provider>
-  );
-}
-
-export { EventsContext, Events };
diff --git a/pioneer/packages/old-apps/react-query/src/LockedVote.tsx b/pioneer/packages/old-apps/react-query/src/LockedVote.tsx
deleted file mode 100644
index b2770d2027..0000000000
--- a/pioneer/packages/old-apps/react-query/src/LockedVote.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps, CallProps } from '@polkadot/react-api/types';
-import { AccountId, AccountIndex, Address, BalanceOf } from '@polkadot/types/interfaces';
-
-import React from 'react';
-
-import { withCalls } from '@polkadot/react-api';
-import { formatBalance } from '@polkadot/util';
-
-interface Props extends BareProps, CallProps {
-  children?: React.ReactNode;
-  label?: React.ReactNode;
-  params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
-  electionsPhragmen_stakeOf?: BalanceOf;
-}
-
-export function LockedVote ({ children, className, electionsPhragmen_stakeOf, label = '' }: Props): React.ReactElement<Props> {
-  return (
-    <div className={className}>
-      {label}{
-        electionsPhragmen_stakeOf
-          ? formatBalance(electionsPhragmen_stakeOf)
-          : '-'
-      }{children}
-    </div>
-  );
-}
-
-export default withCalls<Props>(
-  ['query.electionsPhragmen.stakeOf', { paramName: 'params' }]
-)(LockedVote);
diff --git a/pioneer/packages/old-apps/react-query/src/NodeName.tsx b/pioneer/packages/old-apps/react-query/src/NodeName.tsx
deleted file mode 100644
index d0e622d284..0000000000
--- a/pioneer/packages/old-apps/react-query/src/NodeName.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps } from '@polkadot/react-api/types';
-
-import React, { useContext } from 'react';
-import { ApiContext } from '@polkadot/react-api';
-
-interface Props extends BareProps {
-  children?: React.ReactNode;
-  label?: React.ReactNode;
-}
-
-export default function NodeName ({ children, className, label = '', style }: Props): React.ReactElement<Props> {
-  const { systemName } = useContext(ApiContext);
-
-  return (
-    <div
-      className={className}
-      style={style}
-    >
-      {label}{systemName}{children}
-    </div>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-query/src/NodeVersion.tsx b/pioneer/packages/old-apps/react-query/src/NodeVersion.tsx
deleted file mode 100644
index 298595d8bb..0000000000
--- a/pioneer/packages/old-apps/react-query/src/NodeVersion.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps } from '@polkadot/react-api/types';
-
-import React, { useContext } from 'react';
-import { ApiContext } from '@polkadot/react-api';
-
-interface Props extends BareProps {
-  children?: React.ReactNode;
-  label?: React.ReactNode;
-}
-
-export default function NodeVersion ({ children, className, label = '', style }: Props): React.ReactElement<Props> {
-  const { systemVersion } = useContext(ApiContext);
-
-  return (
-    <div
-      className={className}
-      style={style}
-    >
-      {label}{systemVersion}{children}
-    </div>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-query/src/Nonce.tsx b/pioneer/packages/old-apps/react-query/src/Nonce.tsx
deleted file mode 100644
index 624edae1ca..0000000000
--- a/pioneer/packages/old-apps/react-query/src/Nonce.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { DerivedBalances } from '@polkadot/api-derive/types';
-import { BareProps, CallProps } from '@polkadot/react-api/types';
-
-import BN from 'bn.js';
-import React from 'react';
-import { formatNumber } from '@polkadot/util';
-import { withCalls } from '@polkadot/react-api';
-
-interface Props extends BareProps, CallProps {
-  accountNonce?: BN;
-  callOnResult?: (accountNonce: BN) => void;
-  children?: React.ReactNode;
-  label?: React.ReactNode;
-  params?: string | null;
-}
-
-export function Nonce ({ accountNonce, children, className, label = '' }: Props): React.ReactElement<Props> {
-  return (
-    <div className={className}>
-      {label}{
-        accountNonce
-          ? formatNumber(accountNonce)
-          : '0'
-      }{children}
-    </div>
-  );
-}
-
-export default withCalls<Props>(
-  ['derive.balances.all', {
-    paramName: 'params',
-    propName: 'accountNonce',
-    transform: ({ accountNonce }: DerivedBalances): BN =>
-      accountNonce
-  }]
-)(Nonce);
diff --git a/pioneer/packages/old-apps/react-query/src/TimeNow.tsx b/pioneer/packages/old-apps/react-query/src/TimeNow.tsx
deleted file mode 100644
index fdb0a33f3f..0000000000
--- a/pioneer/packages/old-apps/react-query/src/TimeNow.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Moment } from '@polkadot/types/interfaces';
-import { BareProps, CallProps } from '@polkadot/react-api/types';
-
-import React from 'react';
-import { withCalls } from '@polkadot/react-api';
-
-import Elapsed from './Elapsed';
-
-interface Props extends BareProps, CallProps {
-  children?: React.ReactNode;
-  label?: React.ReactNode;
-  timestamp_now?: Moment;
-}
-
-export function TimeNow ({ children, className, isSubstrateV2, label = '', style, timestamp_now }: Props): React.ReactElement<Props> {
-  const value = isSubstrateV2 || !timestamp_now
-    ? timestamp_now
-    : timestamp_now.muln(1000); // for 1.x, timestamps are in seconds
-
-  return (
-    <div
-      className={className}
-      style={style}
-    >
-      {label}
-      <Elapsed value={value} />
-      {children}
-    </div>
-  );
-}
-
-export default withCalls<Props>('query.timestamp.now')(TimeNow);
diff --git a/pioneer/packages/old-apps/react-query/src/TimePeriod.tsx b/pioneer/packages/old-apps/react-query/src/TimePeriod.tsx
deleted file mode 100644
index e4fae5c064..0000000000
--- a/pioneer/packages/old-apps/react-query/src/TimePeriod.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Moment } from '@polkadot/types/interfaces';
-import { BareProps, CallProps } from '@polkadot/react-api/types';
-
-import React from 'react';
-import { withCalls } from '@polkadot/react-api';
-import { formatNumber } from '@polkadot/util';
-
-interface Props extends BareProps, CallProps {
-  babe_expectedBlockTime?: Moment;
-  children?: React.ReactNode;
-  label?: React.ReactNode;
-  timestamp_minimumPeriod?: Moment;
-}
-
-export function TimePeriod ({ babe_expectedBlockTime, children, className, label = '', style, timestamp_minimumPeriod }: Props): React.ReactElement<Props> {
-  return (
-    <div
-      className={className}
-      style={style}
-    >
-      {label}{
-        babe_expectedBlockTime
-          ? `${formatNumber(babe_expectedBlockTime.toNumber() / 1000)}s`
-          : timestamp_minimumPeriod
-            ? `${formatNumber(timestamp_minimumPeriod.gtn(1000) ? (timestamp_minimumPeriod.toNumber() / 500) : (timestamp_minimumPeriod.toNumber() * 2))}s`
-            : '-'
-      }{children}
-    </div>
-  );
-}
-
-// NOTE we are not combining this into one with a fallback, it becomes slightly tricky.
-// There must be a cleaner way with this logic, but as of now it works on Alex & Kusama
-//  - babe bas the exact value in miliseconds
-//  - non-babe on 2.x has the value in miliseconds (not catered for here)
-//  - anything non-babe, i.e. Aura, needs to be multiplied by 2
-export default withCalls<Props>(
-  // substrate 2.x: consts.babe.expectedBlockTime
-  'consts.babe.expectedBlockTime',
-  // substrate 1.x: 'query.timestamp.blockPeriod'
-  ['consts.timestamp.minimumPeriod', {
-    fallbacks: ['query.timestamp.minimumPeriod']
-  }]
-)(TimePeriod);
diff --git a/pioneer/packages/old-apps/react-query/src/TotalIssuance.tsx b/pioneer/packages/old-apps/react-query/src/TotalIssuance.tsx
deleted file mode 100644
index f812398857..0000000000
--- a/pioneer/packages/old-apps/react-query/src/TotalIssuance.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps, CallProps } from '@polkadot/react-api/types';
-import { Balance } from '@polkadot/types/interfaces';
-
-import React from 'react';
-import { withCalls } from '@polkadot/react-api';
-import { formatBalance } from '@polkadot/util';
-
-interface Props extends BareProps, CallProps {
-  children?: React.ReactNode;
-  label?: React.ReactNode;
-  balances_totalIssuance?: Balance;
-}
-
-export function TotalIssuance ({ children, className, label = '', style, balances_totalIssuance }: Props): React.ReactElement<Props> {
-  const value = balances_totalIssuance
-    ? balances_totalIssuance.toString()
-    : null;
-
-  return (
-    <div
-      className={className}
-      style={style}
-    >
-      {label}{
-        value
-          ? `${formatBalance(value, false)}${formatBalance.calcSi(value).value}`
-          : '-'
-      }{children}
-    </div>
-  );
-}
-
-export default withCalls<Props>('query.balances.totalIssuance')(TotalIssuance);
diff --git a/pioneer/packages/old-apps/react-query/src/index.ts b/pioneer/packages/old-apps/react-query/src/index.ts
deleted file mode 100644
index ff8534c762..0000000000
--- a/pioneer/packages/old-apps/react-query/src/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-export { default as AccountIndex } from './AccountIndex';
-export { default as AccountName } from './AccountName';
-export { default as Available } from './Available';
-export { default as Balance } from './Balance';
-export { default as BalanceVoting } from './BalanceVoting';
-export { BlockAuthors, BlockAuthorsContext } from './BlockAuthors';
-export { default as Bonded } from './Bonded';
-export { default as BestFinalized } from './BestFinalized';
-export { default as BestNumber } from './BestNumber';
-export { default as Chain } from './Chain';
-export { default as Elapsed } from './Elapsed';
-export { Events, EventsContext } from './Events';
-export { default as LockedVote } from './LockedVote';
-export { default as NodeName } from './NodeName';
-export { default as NodeVersion } from './NodeVersion';
-export { default as Nonce } from './Nonce';
-export { default as TimeNow } from './TimeNow';
-export { default as TimePeriod } from './TimePeriod';
-export { default as TotalIssuance } from './TotalIssuance';
diff --git a/pioneer/packages/old-apps/react-query/webpack.config.js b/pioneer/packages/old-apps/react-query/webpack.config.js
deleted file mode 100644
index 96bbd8abc2..0000000000
--- a/pioneer/packages/old-apps/react-query/webpack.config.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-query authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-const ENV = process.env.NODE_ENV || 'development';
-const isProd = ENV === 'production';
-
-module.exports = {
-  context: __dirname,
-  devtool: isProd ? 'source-map' : 'cheap-eval-source-map',
-  entry: './src/demo.tsx',
-  mode: ENV,
-  output: {
-    path: __dirname,
-    filename: './demo.js'
-  },
-  resolve: {
-    alias: {},
-    extensions: ['.js', '.jsx', '.ts', '.tsx']
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|ts|tsx)$/,
-        exclude: /(node_modules)/,
-        use: {
-          loader: 'babel-loader'
-        }
-      }
-    ]
-  },
-  plugins: []
-};
diff --git a/pioneer/packages/old-apps/react-signer/LICENSE b/pioneer/packages/old-apps/react-signer/LICENSE
deleted file mode 100644
index 0d381b2e97..0000000000
--- a/pioneer/packages/old-apps/react-signer/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
diff --git a/pioneer/packages/old-apps/react-signer/README.md b/pioneer/packages/old-apps/react-signer/README.md
deleted file mode 100644
index 7d38b57984..0000000000
--- a/pioneer/packages/old-apps/react-signer/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# @polkadot/react-signer
-
-WARNING: This is an internal package to [polkadot-js/apps](https://github.com/polkadot-js/apps) so is not inteded (yet) for broad use.
-
-For the existing sharable components usable in external React-based projects, take a look at the [polkadot-js/ui documentation](https://polkadot.js.org/ui/)
diff --git a/pioneer/packages/old-apps/react-signer/package.json b/pioneer/packages/old-apps/react-signer/package.json
deleted file mode 100644
index b3ca4fd52d..0000000000
--- a/pioneer/packages/old-apps/react-signer/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "name": "@polkadot/react-signer",
-  "version": "0.37.0-beta.63",
-  "main": "index.js",
-  "repository": "https://github.com/polkadot-js/apps.git",
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "contributors": [],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/react-components": "^0.37.0-beta.63",
-    "@polkadot/react-qr": "^0.47.0-beta.3"
-  }
-}
diff --git a/pioneer/packages/old-apps/react-signer/src/ApiSigner.ts b/pioneer/packages/old-apps/react-signer/src/ApiSigner.ts
deleted file mode 100644
index d7287902cd..0000000000
--- a/pioneer/packages/old-apps/react-signer/src/ApiSigner.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-signer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Signer, SignerResult } from '@polkadot/api/types';
-import { SubmittableResult } from '@polkadot/api';
-import { QueueTxPayloadAdd, QueueTxMessageSetStatus, QueueTxStatus } from '@polkadot/react-components/Status/types';
-import { Hash } from '@polkadot/types/interfaces';
-import { SignerPayloadJSON } from '@polkadot/types/types';
-
-import { ClassOf } from '@polkadot/types';
-
-export default class ApiSigner implements Signer {
-  private _queuePayload: QueueTxPayloadAdd;
-
-  private _queueSetTxStatus: QueueTxMessageSetStatus;
-
-  constructor (queuePayload: QueueTxPayloadAdd, queueSetTxStatus: QueueTxMessageSetStatus) {
-    this._queuePayload = queuePayload;
-    this._queueSetTxStatus = queueSetTxStatus;
-  }
-
-  public async signPayload (payload: SignerPayloadJSON): Promise<SignerResult> {
-    return new Promise((resolve, reject): void => {
-      this._queuePayload(payload, (id: number, result: SignerResult | null): void => {
-        if (result) {
-          resolve(result);
-        } else {
-          reject(new Error('Unable to sign'));
-        }
-      });
-    });
-  }
-
-  public update (id: number, result: Hash | SubmittableResult): void {
-    if (result instanceof ClassOf('Hash')) {
-      this._queueSetTxStatus(id, 'sent', result.toHex());
-    } else {
-      this._queueSetTxStatus(id, result.status.type.toLowerCase() as QueueTxStatus, status);
-    }
-  }
-}
diff --git a/pioneer/packages/old-apps/react-signer/src/Checks/ContractCall.tsx b/pioneer/packages/old-apps/react-signer/src/Checks/ContractCall.tsx
deleted file mode 100644
index 83f8ba9ef3..0000000000
--- a/pioneer/packages/old-apps/react-signer/src/Checks/ContractCall.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-signer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { DerivedContractFees } from '@polkadot/api-derive/types';
-import { ExtraFees as State } from './types';
-
-import BN from 'bn.js';
-import React, { useEffect, useState } from 'react';
-import { Compact, UInt } from '@polkadot/types';
-
-interface Props {
-  endowment: BN | Compact<UInt>;
-  fees: DerivedContractFees;
-  onChange: (fees: State) => void;
-}
-
-export default function ContractCall ({ endowment, fees, onChange }: Props): React.ReactElement<Props> | null {
-  const [state, setState] = useState<State>({
-    extraFees: new BN(0),
-    extraAmount: new BN(0),
-    extraWarn: false
-  });
-
-  useEffect((): void => {
-    const extraFees = new BN(fees.callBaseFee);
-    const extraAmount = endowment instanceof Compact
-      ? endowment.toBn()
-      : new BN(endowment || 0);
-
-    const update = {
-      extraAmount,
-      extraFees,
-      extraWarn: false
-    };
-
-    if (!update.extraAmount.eq(state.extraAmount) || !update.extraFees.eq(state.extraFees)) {
-      onChange(update);
-    }
-
-    setState(update);
-  }, [endowment, fees]);
-
-  return null;
-}
diff --git a/pioneer/packages/old-apps/react-signer/src/Checks/ContractDeploy.tsx b/pioneer/packages/old-apps/react-signer/src/Checks/ContractDeploy.tsx
deleted file mode 100644
index 539c5d7b87..0000000000
--- a/pioneer/packages/old-apps/react-signer/src/Checks/ContractDeploy.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-signer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { DerivedContractFees } from '@polkadot/api-derive/types';
-import { ExtraFees as State } from './types';
-
-import BN from 'bn.js';
-import React, { useEffect, useState } from 'react';
-import { Compact, UInt } from '@polkadot/types';
-
-interface Props {
-  endowment: BN | Compact<UInt>;
-  fees: DerivedContractFees;
-  onChange: (fees: State) => void;
-}
-
-export default function ContractDeploy ({ endowment, fees, onChange }: Props): React.ReactElement<Props> | null {
-  const [state, setState] = useState<State>({
-    extraFees: new BN(0),
-    extraAmount: new BN(0),
-    extraWarn: false
-  });
-
-  useEffect((): void => {
-    const extraFees = new BN(fees.createBaseFee).add(fees.contractFee);
-    const extraAmount = endowment instanceof Compact
-      ? endowment.toBn()
-      : new BN(endowment || 0);
-
-    const update = {
-      extraAmount,
-      extraFees,
-      extraWarn: false
-    };
-
-    if (!update.extraAmount.eq(state.extraAmount) || !update.extraFees.eq(state.extraFees)) {
-      onChange(update);
-    }
-
-    setState(update);
-  }, [endowment, fees]);
-
-  return null;
-}
diff --git a/pioneer/packages/old-apps/react-signer/src/Checks/Proposal.tsx b/pioneer/packages/old-apps/react-signer/src/Checks/Proposal.tsx
deleted file mode 100644
index 5e10d52ec7..0000000000
--- a/pioneer/packages/old-apps/react-signer/src/Checks/Proposal.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/react-signer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { DerivedFees } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { ExtraFees } from './types';
-
-import BN from 'bn.js';
-import React, { useState, useEffect } from 'react';
-import { Compact, UInt } from '@polkadot/types';
-import { withCalls, withMulti } from '@polkadot/react-api';
-import { Icon } from '@polkadot/react-components';
-import { formatBalance } from '@polkadot/util';
-
-import translate from '../translate';
-
-interface Props extends I18nProps {
-  deposit: BN | Compact<UInt>;
-  fees: DerivedFees;
-  democracy_minimumDeposit?: BN;
-  onChange: (fees: ExtraFees) => void;
-}
-
-interface State extends ExtraFees {
-  isBelowMinimum: boolean;
-}
-
-const ZERO = new BN(0);
-
-export function Proposal ({ deposit, democracy_minimumDeposit = ZERO, onChange, t }: Props): React.ReactElement<Props> {
-  const [{ extraAmount, isBelowMinimum }, setState] = useState<State>({
-    extraFees: ZERO,
-    extraAmount: ZERO,
-    extraWarn: false,
-    isBelowMinimum: false
-  });
-
-  useEffect((): void => {
-    const extraAmount = deposit instanceof Compact
-      ? deposit.toBn()
-      : deposit;
-    const isBelowMinimum = extraAmount.lt(democracy_minimumDeposit);
-    const update = {
-      extraAmount,
-      extraFees: ZERO,
-      extraWarn: isBelowMinimum
-    };
-
-    onChange(update);
-
-    setState({
-      ...update,
-      isBelowMinimum
-    });
-  }, [democracy_minimumDeposit]);
-
-  return (
-    <>
-      {isBelowMinimum && (
-        <div>
-          <Icon name='warning sign' />
-          {t('The deposit is below the {{minimum}} minimum required for the proposal to be evaluated', {
-            replace: {
-              minimum: formatBalance(democracy_minimumDeposit)
-            }
-          })}
-        </div>
-      )}
-      {!extraAmount.isZero() && (
-        <div>
-          <Icon name='arrow right' />
-          {t('The deposit of {{deposit}} will be reserved until the proposal is completed', {
-            replace: {
-              deposit: formatBalance(extraAmount)
-            }
-          })}
-        </div>
-      )}
-    </>
-  );
-}
-
-export default withMulti(
-  Proposal,
-  translate,
-  withCalls<Props>(
-    ['consts.democracy.minimumDeposit', { fallbacks: ['query.democracy.minimumDeposit'] }]
-  )
-);
diff --git a/pioneer/packages/old-apps/react-signer/src/Checks/Transfer.tsx b/pioneer/packages/old-apps/react-signer/src/Checks/Transfer.tsx
deleted file mode 100644
index ba63174dee..0000000000
--- a/pioneer/packages/old-apps/react-signer/src/Checks/Transfer.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/react-signer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { DerivedBalances, DerivedFees } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { ExtraFees } from './types';
-
-import BN from 'bn.js';
-import React, { useEffect, useState } from 'react';
-import { Compact, UInt } from '@polkadot/types';
-import { withCalls, withMulti } from '@polkadot/react-api';
-import { Icon } from '@polkadot/react-components';
-import { formatBalance } from '@polkadot/util';
-
-import translate from '../translate';
-import { ZERO_BALANCE } from './constants';
-
-interface Props extends I18nProps {
-  amount: BN | Compact<UInt>;
-  fees: DerivedFees;
-  balances_all?: DerivedBalances;
-  recipientId: string;
-  onChange: (fees: ExtraFees) => void;
-}
-
-interface State extends ExtraFees {
-  isCreation: boolean;
-  isNoEffect: boolean;
-}
-
-export function Transfer ({ amount, balances_all = ZERO_BALANCE, fees, onChange, t }: Props): React.ReactElement<Props> {
-  const [{ isCreation, isNoEffect }, setState] = useState<State>({
-    extraFees: new BN(0),
-    extraAmount: new BN(0),
-    extraWarn: false,
-    isCreation: false,
-    isNoEffect: false
-  });
-
-  useEffect((): void => {
-    let extraFees = new BN(fees.transferFee);
-
-    if (balances_all.votingBalance.isZero()) {
-      extraFees = extraFees.add(fees.creationFee);
-    }
-
-    const extraAmount = amount instanceof Compact ? amount.unwrap() : new BN(amount);
-    const isCreation = balances_all.votingBalance.isZero() && fees.creationFee.gtn(0);
-    const isNoEffect = extraAmount.add(balances_all.votingBalance).lt(fees.existentialDeposit);
-    const extraWarn = isCreation || isNoEffect;
-    const update = {
-      extraAmount,
-      extraFees,
-      extraWarn
-    };
-
-    onChange(update);
-
-    setState({
-      ...update,
-      isCreation,
-      isNoEffect
-    });
-  }, [amount, balances_all, fees]);
-
-  return (
-    <>
-      {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', {
-            replace: {
-              existentialDeposit: formatBalance(fees.existentialDeposit)
-            }
-          })}
-        </div>
-      )}
-      {isCreation && (
-        <div>
-          <Icon name='warning sign' />
-          {t('A fee of {{creationFee}} will be deducted from the sender since the destination account does not exist', {
-            replace: {
-              creationFee: formatBalance(fees.creationFee)
-            }
-          })}
-        </div>
-      )}
-    </>
-  );
-}
-
-export default withMulti(
-  Transfer,
-  translate,
-  withCalls<Props>(
-    ['derive.balances.all', { paramName: 'recipientId' }]
-  )
-);
diff --git a/pioneer/packages/old-apps/react-signer/src/Checks/constants.ts b/pioneer/packages/old-apps/react-signer/src/Checks/constants.ts
deleted file mode 100644
index d607a083c4..0000000000
--- a/pioneer/packages/old-apps/react-signer/src/Checks/constants.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-signer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { DerivedFees, DerivedBalances, DerivedContractFees } from '@polkadot/api-derive/types';
-
-import BN from 'bn.js';
-import { createType } from '@polkadot/types';
-
-const ZERO_BALANCE: DerivedBalances = {
-  accountId: createType('AccountId'),
-  accountNonce: createType('Index'),
-  availableBalance: createType('Balance'),
-  freeBalance: createType('Balance'),
-  lockedBalance: createType('Balance'),
-  lockedBreakdown: [],
-  reservedBalance: createType('Balance'),
-  vestedBalance: createType('Balance'),
-  vestingTotal: createType('Balance'),
-  votingBalance: createType('Balance')
-};
-
-const ZERO_FEES_BALANCES: DerivedFees = {
-  creationFee: createType('Balance'),
-  existentialDeposit: createType('Balance'),
-  transactionBaseFee: createType('Balance'),
-  transactionByteFee: createType('Balance'),
-  transferFee: createType('Balance')
-};
-
-const ZERO_FEES = ZERO_FEES_BALANCES;
-
-const ZERO_FEES_CONTRACT: DerivedContractFees = {
-  callBaseFee: new BN(0),
-  contractFee: new BN(0),
-  createBaseFee: new BN(0),
-  creationFee: new BN(0),
-  rentByteFee: new BN(0),
-  rentDepositOffset: new BN(0),
-  transactionBaseFee: new BN(0),
-  transactionByteFee: new BN(0),
-  transferFee: new BN(0),
-  tombstoneDeposit: new BN(0)
-};
-
-const MAX_SIZE_MB = 10;
-const MAX_SIZE_BYTES = MAX_SIZE_MB * 1024 * 1024;
-
-export {
-  ZERO_BALANCE,
-  ZERO_FEES,
-  ZERO_FEES_BALANCES,
-  ZERO_FEES_CONTRACT,
-  MAX_SIZE_BYTES,
-  MAX_SIZE_MB
-};
diff --git a/pioneer/packages/old-apps/react-signer/src/Checks/index.tsx b/pioneer/packages/old-apps/react-signer/src/Checks/index.tsx
deleted file mode 100644
index 6471769409..0000000000
--- a/pioneer/packages/old-apps/react-signer/src/Checks/index.tsx
+++ /dev/null
@@ -1,253 +0,0 @@
-/* eslint-disable @typescript-eslint/camelcase */
-// Copyright 2017-2019 @polkadot/react-signer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { DerivedFees, DerivedBalances, DerivedContractFees } from '@polkadot/api-derive/types';
-import { IExtrinsic } from '@polkadot/types/types';
-import { ExtraFees } from './types';
-
-import BN from 'bn.js';
-import React, { useContext, useState, useEffect } from 'react';
-import { Compact, UInt } from '@polkadot/types';
-import { ApiContext, withCalls } from '@polkadot/react-api';
-import { Icon } from '@polkadot/react-components';
-import { compactToU8a, formatBalance } from '@polkadot/util';
-
-import translate from '../translate';
-import ContractCall from './ContractCall';
-import ContractDeploy from './ContractDeploy';
-import Proposal from './Proposal';
-import Transfer from './Transfer';
-import { MAX_SIZE_BYTES, MAX_SIZE_MB, ZERO_BALANCE, ZERO_FEES_BALANCES, ZERO_FEES_CONTRACT } from './constants';
-
-interface State {
-  allFees: BN;
-  allTotal: BN;
-  allWarn: boolean;
-  extMethod?: string;
-  extSection?: string;
-  hasAvailable: boolean;
-  isRemovable: boolean;
-  isReserved: boolean;
-  overLimit: boolean;
-}
-
-interface Props extends I18nProps {
-  balances_fees?: DerivedFees;
-  balances_all?: DerivedBalances;
-  contract_fees?: DerivedContractFees;
-  accountId?: string | null;
-  extrinsic?: IExtrinsic | null;
-  isSendable: boolean;
-  onChange?: (hasAvailable: boolean) => void;
-  tip?: BN;
-}
-
-const LENGTH_ADDRESS = 32 + 1; // publicKey + prefix
-const LENGTH_ERA = 2; // assuming mortals
-const LENGTH_SIGNATURE = 64; // assuming ed25519 or sr25519
-const LENGTH_VERSION = 1; // 0x80 & version
-const ZERO = new BN(0);
-
-export const calcTxLength = (extrinsic?: IExtrinsic | null, nonce?: BN, tip?: BN): BN => {
-  return new BN(
-    LENGTH_VERSION +
-    LENGTH_ADDRESS +
-    LENGTH_SIGNATURE +
-    LENGTH_ERA +
-    compactToU8a(nonce || 0).length +
-    compactToU8a(tip || 0).length +
-    (extrinsic ? extrinsic.encodedLength : 0)
-  );
-};
-
-export function FeeDisplay ({ accountId, balances_all = ZERO_BALANCE, balances_fees = ZERO_FEES_BALANCES, className, contract_fees = ZERO_FEES_CONTRACT, extrinsic, isSendable, onChange, t, tip }: Props): React.ReactElement<Props> | null {
-  const { api } = useContext(ApiContext);
-  const [state, setState] = useState<State>({
-    allFees: ZERO,
-    allTotal: ZERO,
-    allWarn: false,
-    hasAvailable: false,
-    isRemovable: false,
-    isReserved: false,
-    overLimit: false
-  });
-  const [extra, setExtra] = useState<ExtraFees>({
-    extraAmount: ZERO,
-    extraFees: ZERO,
-    extraWarn: false
-  });
-
-  useEffect((): void => {
-    if (!accountId || !extrinsic) {
-      return;
-    }
-
-    const fn = api.findCall(extrinsic.callIndex);
-    const extMethod = fn.method;
-    const extSection = fn.section;
-    const txLength = calcTxLength(extrinsic, balances_all.accountNonce, tip);
-
-    const isSameExtrinsic = state.extMethod === extMethod && state.extSection === extSection;
-    const extraAmount = isSameExtrinsic
-      ? extra.extraAmount
-      : ZERO;
-    const extraFees = isSameExtrinsic
-      ? extra.extraFees
-      : ZERO;
-    const extraWarn = isSameExtrinsic
-      ? extra.extraWarn
-      : false;
-    const allFees = extraFees
-      .add(balances_fees.transactionBaseFee)
-      .add(balances_fees.transactionByteFee.mul(txLength));
-
-    const allTotal = extraAmount.add(allFees);
-    const hasAvailable = balances_all.availableBalance.gtn(0);
-    const isRemovable = balances_all.votingBalance.sub(allTotal).lt(balances_fees.existentialDeposit);
-    const isReserved = balances_all.freeBalance.isZero() && balances_all.reservedBalance.gtn(0);
-    const allWarn = extraWarn;
-    const overLimit = txLength.gten(MAX_SIZE_BYTES);
-
-    onChange && onChange(hasAvailable);
-
-    setState({
-      allFees,
-      allTotal,
-      allWarn,
-      extMethod,
-      extSection,
-      hasAvailable,
-      isRemovable,
-      isReserved,
-      overLimit
-    });
-  }, [accountId, balances_all, balances_fees, extra, extrinsic, balances_all.accountNonce, tip]);
-
-  if (!accountId) {
-    return null;
-  }
-
-  const { allFees, allTotal, allWarn, extMethod, extSection, hasAvailable, isRemovable, isReserved, overLimit } = state;
-  const feeClass = !hasAvailable || overLimit || isRemovable
-    ? 'error'
-    : allWarn
-      ? 'warning'
-      : 'normal';
-
-  // display all the errors, warning and information messages (in that order)
-  return (
-    <article
-      className={[className, feeClass, 'padded'].join(' ')}
-      key='txinfo'
-    >
-      {!isSendable && (
-        <div>
-          <Icon name='ban' />
-          {t('The selected account does not exist on your keyring')}
-        </div>
-      )}
-      {!hasAvailable && (
-        <div>
-          <Icon name='ban' />
-          {t('The selected account does not have the required balance available for this transaction')}
-        </div>
-      )}
-      {overLimit && (
-        <div>
-          <Icon name='ban' />
-          {t(`This transaction will be rejected by the node as it is greater than the maximum size of ${MAX_SIZE_MB}MB`)}
-        </div>
-      )}
-      {isRemovable && hasAvailable && balances_fees && (
-        <div>
-          <Icon name='ban' />
-          {t('Submitting this transaction will drop the account balance to below the existential amount ({{existentialDeposit}}), which can result in the account being removed from the chain state and its associated funds burned.',
-            {
-              replace: {
-                existentialDeposit: formatBalance(balances_fees.existentialDeposit)
-              }
-            }
-          )}
-        </div>
-      )}
-      {balances_fees && extrinsic && (
-        <>
-          {(extSection === 'balances' && extMethod === 'transfer') && (
-            <Transfer
-              amount={extrinsic.args[1]}
-              fees={balances_fees}
-              recipientId={extrinsic.args[0]}
-              onChange={setExtra}
-            />
-          )}
-          {(extSection === 'democracy' && extMethod === 'propose') && (
-            <Proposal
-              deposit={extrinsic.args[1]}
-              fees={balances_fees}
-              onChange={setExtra}
-            />
-          )}
-          {(extSection === 'contract') && (
-            <>
-              {(extMethod === 'call') && (
-                <ContractCall
-                  endowment={extrinsic.args[1] as unknown as Compact<UInt>}
-                  fees={contract_fees}
-                  onChange={setExtra}
-                />
-              )}
-              {(extMethod === 'create') && (
-                <ContractDeploy
-                  endowment={extrinsic.args[0] as unknown as Compact<UInt>}
-                  fees={contract_fees}
-                  onChange={setExtra}
-                />
-              )}
-            </>
-          )}
-        </>
-      )}
-      {isReserved && (
-        <div>
-          <Icon name='arrow right' />
-          {t('This account does have a reserved/locked balance, not taken into account')}
-        </div>
-      )}
-      <div>
-        <Icon name='arrow right' />
-        {t('Fees includes the transaction fee and the per-byte fee')}
-      </div>
-      <div>
-        <Icon name='arrow right' />
-        {t('Fees totalling {{fees}} will be applied to the submission', {
-          replace: {
-            fees: formatBalance(allFees)
-          }
-        })}
-      </div>
-      <div>
-        <Icon name='arrow right' />
-        {t('{{total}} estimated total amount (fees + value)', {
-          replace: {
-            total: formatBalance(allTotal)
-          }
-        })}
-      </div>
-      <div>
-        <Icon name='dot circle outline' />
-        {t('Estimation does not account for the transaction weight')}
-      </div>
-    </article>
-  );
-}
-
-export default translate(
-  withCalls<Props>(
-    'derive.balances.fees',
-    ['derive.balances.all', { paramName: 'accountId' }],
-    'derive.contracts.fees'
-  )(FeeDisplay)
-);
diff --git a/pioneer/packages/old-apps/react-signer/src/Checks/types.ts b/pioneer/packages/old-apps/react-signer/src/Checks/types.ts
deleted file mode 100644
index d1442eac3c..0000000000
--- a/pioneer/packages/old-apps/react-signer/src/Checks/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-signer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import BN from 'bn.js';
-
-export interface ExtraFees {
-  extraAmount: BN;
-  extraFees: BN;
-  extraWarn: boolean;
-}
diff --git a/pioneer/packages/old-apps/react-signer/src/LedgerSigner.ts b/pioneer/packages/old-apps/react-signer/src/LedgerSigner.ts
deleted file mode 100644
index 8f4e84f95c..0000000000
--- a/pioneer/packages/old-apps/react-signer/src/LedgerSigner.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-signer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Signer, SignerResult } from '@polkadot/api/types';
-import { SignerPayloadJSON } from '@polkadot/types/types';
-
-import { getLedger } from '@polkadot/react-api';
-import { createType } from '@polkadot/types';
-
-export class LedgerSigner implements Signer {
-  public async signPayload (payload: SignerPayloadJSON): Promise<SignerResult> {
-    const raw = createType('ExtrinsicPayload', payload, { version: payload.version });
-    const { signature } = await getLedger().sign(raw.toU8a(true));
-
-    return { id: 0, signature };
-  }
-}
-
-const ledgerSigner = new LedgerSigner();
-
-export default ledgerSigner;
diff --git a/pioneer/packages/old-apps/react-signer/src/Modal.tsx b/pioneer/packages/old-apps/react-signer/src/Modal.tsx
deleted file mode 100644
index a2b1b25667..0000000000
--- a/pioneer/packages/old-apps/react-signer/src/Modal.tsx
+++ /dev/null
@@ -1,623 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-signer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { SignerOptions, SignerResult } from '@polkadot/api/types';
-import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-import { ApiProps } from '@polkadot/react-api/types';
-import { I18nProps, BareProps } from '@polkadot/react-components/types';
-import { RpcMethod } from '@polkadot/jsonrpc/types';
-import { KeyringPair } from '@polkadot/keyring/types';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-import { QueueTx, QueueTxMessageSetStatus, QueueTxResult, QueueTxStatus } from '@polkadot/react-components/Status/types';
-import { SignerPayloadJSON } from '@polkadot/types/types';
-
-import BN from 'bn.js';
-import React from 'react';
-import { SubmittableResult } from '@polkadot/api';
-import { web3FromSource } from '@polkadot/extension-dapp';
-import { createType } from '@polkadot/types';
-import { Button, InputBalance, Modal, Toggle } from '@polkadot/react-components';
-import { withApi, withMulti, withObservable } from '@polkadot/react-api';
-import keyring from '@polkadot/ui-keyring';
-import { assert, isFunction } from '@polkadot/util';
-import { format } from '@polkadot/util/logger';
-
-import ledgerSigner from './LedgerSigner';
-import PasswordCheck from './PasswordCheck';
-import Transaction from './Transaction';
-import Qr from './Qr';
-import Unlock from './Unlock';
-import translate from './translate';
-
-interface BaseProps extends BareProps {
-  queue: QueueTx[];
-  queueSetTxStatus: QueueTxMessageSetStatus;
-}
-
-interface Props extends I18nProps, ApiProps, BaseProps {
-  allAccounts?: SubjectInfo;
-}
-
-interface State {
-  currentItem?: QueueTx;
-  isQrScanning: boolean;
-  isQrVisible: boolean;
-  isSendable: boolean;
-  isV2?: boolean;
-  password: string;
-  qrAddress: string;
-  qrPayload: Uint8Array;
-  qrResolve?: (result: SignerResult) => void;
-  qrReject?: (error: Error) => void;
-  showTip: boolean;
-  tip?: BN;
-  unlockError?: string | null;
-}
-
-let qrId = 0;
-
-function extractExternal (accountId?: string | null): { isExternal: boolean; isHardware: boolean; hardwareType?: string } {
-  if (!accountId) {
-    return { isExternal: false, isHardware: false };
-  }
-
-  let publicKey;
-
-  try {
-    publicKey = keyring.decodeAddress(accountId);
-  } catch (error) {
-    console.error(error);
-
-    return { isExternal: false, isHardware: false };
-  }
-
-  const pair = keyring.getPair(publicKey);
-
-  return {
-    isExternal: !!pair.meta.isExternal,
-    isHardware: !!pair.meta.isHardware,
-    hardwareType: pair.meta.hardwareType
-  };
-}
-
-// eslint-disable-next-line @typescript-eslint/require-await
-async function makeExtrinsicSignature (payload: SignerPayloadJSON, { id, signerCb }: QueueTx, pair: KeyringPair): Promise<void> {
-  console.log('makeExtrinsicSignature: payload ::', JSON.stringify(payload));
-
-  const result = createType('ExtrinsicPayload', payload, { version: payload.version }).sign(pair);
-
-  if (isFunction(signerCb)) {
-    signerCb(id, { id, ...result });
-  }
-}
-
-class Signer extends React.PureComponent<Props, State> {
-  public state: State = {
-    isSendable: false,
-    isQrScanning: false,
-    isQrVisible: false,
-    password: '',
-    qrAddress: '',
-    qrPayload: new Uint8Array(),
-    showTip: false,
-    unlockError: null
-  };
-
-  public static getDerivedStateFromProps ({ allAccounts, api, queue }: Props, { currentItem, password, unlockError }: State): Partial<State> {
-    let isV2: boolean;
-    try {
-      isV2 = !!api.tx.session.setKeys;
-    } catch (e) {
-      isV2 = false;
-    }
-
-    const nextItem = queue.find(({ status }): boolean => ['queued', 'qr'].includes(status));
-    const isSame =
-      !!nextItem &&
-      !!currentItem &&
-      (
-        (!nextItem.accountId && !currentItem.accountId) ||
-        (
-          (nextItem.accountId && nextItem.accountId.toString()) === (currentItem.accountId && currentItem.accountId.toString())
-        )
-      );
-
-    let isSendable = !!nextItem && !!nextItem.isUnsigned;
-
-    if (!isSendable && nextItem && nextItem.accountId && allAccounts) {
-      try {
-        const pair = keyring.getPair(nextItem.accountId);
-
-        isSendable = !!pair && !!allAccounts[nextItem.accountId];
-      } catch (error) {
-        // swallow
-      }
-    }
-
-    return {
-      currentItem: nextItem,
-      isSendable,
-      isV2,
-      password: isSame ? password : '',
-      unlockError: isSame ? unlockError : null
-    };
-  }
-
-  public async componentDidUpdate (): Promise<void> {
-    const { currentItem } = this.state;
-
-    if (currentItem && currentItem.status === 'queued' && !(currentItem.extrinsic || currentItem.payload)) {
-      return this.sendRpc(currentItem);
-    }
-  }
-
-  public render (): React.ReactNode {
-    const { currentItem } = this.state;
-
-    if (!currentItem) {
-      return null;
-    }
-
-    return (
-      <Modal
-        className='ui--signer-Signer'
-        dimmer='inverted'
-        open
-      >
-        {this.renderContent()}
-        {this.renderButtons()}
-      </Modal>
-    );
-  }
-
-  private renderButtons (): React.ReactNode {
-    const { t } = this.props;
-    const { currentItem, isQrScanning, isQrVisible, isSendable } = this.state;
-
-    if (!currentItem) {
-      return null;
-    }
-
-    const { isExternal, isHardware, hardwareType } = extractExternal(currentItem.accountId);
-
-    return (
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            isNegative
-            onClick={
-              isQrVisible
-                ? this.onCancelQr
-                : this.onCancel
-            }
-            tabIndex={3}
-            label={t('Cancel')}
-            icon='cancel'
-          />
-          {(!isQrVisible || !isQrScanning) && (
-            <>
-              <Button.Or />
-              <Button
-                className='ui--signer-Signer-Submit'
-                isDisabled={!isSendable}
-                isPrimary
-                onClick={
-                  isQrVisible
-                    ? this.activateQrScanning
-                    : this.onSend
-                }
-                tabIndex={2}
-                label={
-                  isQrVisible
-                    ? t('Scan Signature Qr')
-                    : currentItem.isUnsigned
-                      ? t('Submit (no signature)')
-                      : isHardware
-                        ? t('Sign via {{hardwareType}}', { replace: { hardwareType: hardwareType || 'hardware' } })
-                        : isExternal
-                          ? t('Sign via Qr')
-                          : t('Sign and Submit')
-                }
-                icon={
-                  isQrVisible
-                    ? 'qrcode'
-                    : currentItem.isUnsigned
-                      ? 'sign-in'
-                      : isExternal
-                        ? 'qrcode'
-                        : 'sign-in'
-                }
-              />
-            </>
-          )}
-        </Button.Group>
-      </Modal.Actions>
-    );
-  }
-
-  private renderContent (): React.ReactNode {
-    const { currentItem, isQrScanning, isQrVisible, isSendable, qrAddress, qrPayload, tip } = this.state;
-
-    if (!currentItem) {
-      return null;
-    }
-
-    return (
-      <Transaction
-        hideDetails={isQrVisible}
-        isSendable={isSendable}
-        tip={tip}
-        value={currentItem}
-      >
-        {
-          isQrVisible
-            ? (
-              <Qr
-                address={qrAddress}
-                isScanning={isQrScanning}
-                onSignature={this.addQrSignature}
-                payload={qrPayload}
-              />
-            )
-            : (
-              <>
-                {this.renderTip()}
-                {this.renderUnlock()}
-              </>
-            )
-        }
-      </Transaction>
-    );
-  }
-
-  private renderTip (): React.ReactNode {
-    const { t } = this.props;
-    const { currentItem, isSendable, isV2, showTip } = this.state;
-
-    if (!isV2 || !isSendable || !currentItem || currentItem.isUnsigned) {
-      return null;
-    }
-
-    return (
-      <>
-        <Toggle
-          label={
-            showTip
-              ? t('Include an optional tip for faster processing')
-              : t('Do not include a tip for the block author')
-          }
-          onChange={this.onShowTip}
-          value={showTip}
-        />
-        {showTip && (
-          <InputBalance
-            defaultValue={new BN(0)}
-            help={t('Add a tip to this extrinsic, paying the block author for greater priority')}
-            onChange={this.onChangeTip}
-            label={t('Tip (optional)')}
-          />
-        )}
-      </>
-    );
-  }
-
-  private onShowTip = (showTip: boolean): void => {
-    this.setState({ showTip });
-  }
-
-  private renderUnlock (): React.ReactNode {
-    const { currentItem, isSendable, password, unlockError } = this.state;
-
-    const { isExternal } = currentItem
-      ? extractExternal(currentItem.accountId)
-      : { isExternal: false };
-
-    if (!isSendable || !currentItem || currentItem.isUnsigned || isExternal) {
-      return null;
-    }
-
-    return (
-      <>
-        <Unlock
-          autoFocus
-          error={unlockError || undefined}
-          onChange={this.onChangePassword}
-          password={password}
-          value={currentItem.accountId}
-          tabIndex={1}
-        />
-        <PasswordCheck
-          unlockError={unlockError}
-        />
-      </>
-    );
-  }
-
-  private unlockAccount (accountId: string, password?: string): string | null {
-    let publicKey;
-
-    try {
-      publicKey = keyring.decodeAddress(accountId);
-    } catch (error) {
-      console.error(error);
-
-      return 'unable to decode address';
-    }
-
-    const pair = keyring.getPair(publicKey);
-
-    if (!pair.isLocked || pair.meta.isInjected || pair.meta.isExternal) {
-      return null;
-    }
-
-    try {
-      pair.decodePkcs8(password);
-    } catch (error) {
-      console.error(error);
-
-      return error.message;
-    }
-
-    return null;
-  }
-
-  private onChangePassword = (password: string): void => {
-    this.setState({
-      password,
-      unlockError: null
-    });
-  }
-
-  private onChangeTip = (tip?: BN): void => {
-    this.setState({ tip });
-  }
-
-  private onCancelQr = (): void => {
-    this.setState({
-      isQrScanning: false,
-      isQrVisible: false
-    }, (): void => {
-      const { qrReject } = this.state;
-
-      qrReject && qrReject(new Error('cancelled'));
-
-      this.onCancel();
-    });
-  };
-
-  private onCancel = (): void => {
-    const { queueSetTxStatus } = this.props;
-    const { currentItem } = this.state;
-
-    // This should never be executed
-    if (!currentItem) {
-      return;
-    }
-
-    const { id, signerCb, txFailedCb } = currentItem;
-
-    queueSetTxStatus(id, 'cancelled');
-
-    if (isFunction(signerCb)) {
-      signerCb(id, null);
-    }
-
-    if (isFunction(txFailedCb)) {
-      txFailedCb(null);
-    }
-  }
-
-  private onSend = async (): Promise<void> => {
-    const { currentItem, password } = this.state;
-
-    // This should never be executed
-    if (!currentItem) {
-      return;
-    }
-
-    return this.sendExtrinsic(currentItem, password);
-  }
-
-  private signQrPayload = (payload: SignerPayloadJSON): Promise<SignerResult> => {
-    return new Promise((resolve, reject): void => {
-      this.setState({
-        isQrVisible: true,
-        qrAddress: payload.address,
-        qrPayload: createType('ExtrinsicPayload', payload, { version: payload.version }).toU8a(),
-        qrResolve: resolve,
-        qrReject: reject
-      });
-    });
-  }
-
-  private addQrSignature = ({ signature }: { signature: string }): void => {
-    this.setState(({ qrResolve }: State): Pick<State, never> => {
-      qrResolve && qrResolve({
-        id: ++qrId,
-        signature
-      });
-
-      return {
-        isQrScanning: false,
-        isQrVisible: false
-      };
-    });
-  }
-
-  private activateQrScanning = (): void => {
-    this.setState({ isQrScanning: true });
-  }
-
-  private sendRpc = async ({ id, rpc, values = [] }: QueueTx): Promise<void> => {
-    if (!rpc) {
-      return;
-    }
-
-    const { queueSetTxStatus } = this.props;
-
-    queueSetTxStatus(id, 'sending');
-
-    const { error, result, status } = await this.submitRpc(rpc, values);
-
-    queueSetTxStatus(id, status, result, error);
-  }
-
-  private async sendExtrinsic (queueTx: QueueTx, password?: string): Promise<void> {
-    const { isV2, showTip, tip } = this.state;
-
-    const { accountId, extrinsic, payload, isUnsigned } = queueTx;
-
-    if (!isUnsigned) {
-      assert(accountId, 'Expected an accountId with signed transactions');
-
-      const unlockError = this.unlockAccount(accountId, password);
-
-      if (unlockError) {
-        this.setState({ unlockError });
-        return;
-      }
-    }
-
-    if (payload) {
-      return makeExtrinsicSignature(
-        {
-          ...payload,
-          ...((isV2 && showTip && tip && !payload.tip) ? { tip: tip.toString() } : {})
-        },
-        queueTx,
-        keyring.getPair(accountId as string)
-      );
-    }
-
-    const submittable = extrinsic as SubmittableExtrinsic;
-
-    assert(submittable, 'Expected an extrinsic to be supplied to sendExtrinsic');
-
-    return isUnsigned
-      // eslint-disable-next-line @typescript-eslint/unbound-method
-      ? this.makeExtrinsicCall(submittable, queueTx, submittable.send)
-      // eslint-disable-next-line @typescript-eslint/unbound-method
-      : this.makeExtrinsicCall(submittable, queueTx, submittable.signAndSend, keyring.getPair(accountId as string));
-  }
-
-  private async submitRpc ({ method, section }: RpcMethod, values: any[]): Promise<QueueTxResult> {
-    const { api } = this.props;
-
-    try {
-      assert(isFunction((api.rpc as any)[section] && (api.rpc as any)[section][method]), `api.rpc.${section}.${method} does not exist`);
-
-      const result = await (api.rpc as any)[section][method](...values);
-
-      console.log('submitRpc: result ::', format(result));
-
-      return {
-        result,
-        status: 'sent'
-      };
-    } catch (error) {
-      console.error(error);
-
-      return {
-        error,
-        status: 'error'
-      };
-    }
-  }
-
-  private async makeExtrinsicCall (extrinsic: SubmittableExtrinsic, { id, txFailedCb, txSuccessCb, txStartCb, txUpdateCb }: QueueTx, extrinsicCall: (...params: any[]) => any, pair?: KeyringPair): Promise<void> {
-    const { api, queueSetTxStatus } = this.props;
-    const { isV2, showTip, tip } = this.state;
-
-    console.log('makeExtrinsicCall: extrinsic ::', extrinsic.toHex());
-
-    const params = [];
-
-    if (pair) {
-      const { address, meta: { isExternal, isHardware, isInjected, source } } = pair;
-
-      queueSetTxStatus(id, 'signing');
-
-      // set the signer
-      if (isHardware) {
-        api.setSigner(ledgerSigner);
-        params.push(address);
-      } else if (isExternal) {
-        queueSetTxStatus(id, 'qr');
-        api.setSigner({ signPayload: this.signQrPayload });
-        params.push(address);
-      } else if (isInjected) {
-        const injected = await web3FromSource(source);
-
-        assert(injected, `Unable to find a signer for ${address}`);
-
-        api.setSigner(injected.signer);
-        params.push(address);
-      } else {
-        params.push(pair);
-      }
-    }
-
-    if (showTip && isV2 && tip) {
-      params.push({ tip } as Partial<SignerOptions>);
-    }
-
-    if (isFunction(txStartCb)) {
-      txStartCb();
-    }
-
-    try {
-      // eslint-disable-next-line @typescript-eslint/require-await
-      const unsubscribe = await extrinsicCall.apply(extrinsic, [...params, async (result: SubmittableResult): Promise<void> => {
-        if (!result || !result.status) {
-          return;
-        }
-
-        const status = result.status.type.toLowerCase() as QueueTxStatus;
-
-        console.log('makeExtrinsicCall: updated status ::', JSON.stringify(result));
-        queueSetTxStatus(id, status, result);
-
-        if (isFunction(txUpdateCb)) {
-          txUpdateCb(result);
-        }
-
-        if (result.status.isFinalized) {
-          unsubscribe();
-
-          result.events
-            .filter(({ event: { section } }): boolean => section === 'system')
-            .forEach(({ event: { method } }): void => {
-              if (isFunction(txFailedCb) && method === 'ExtrinsicFailed') {
-                txFailedCb(result);
-              } else if (isFunction(txSuccessCb) && method === 'ExtrinsicSuccess') {
-                txSuccessCb(result);
-              }
-            });
-        } else if (result.isError && isFunction(txFailedCb)) {
-          txFailedCb(result);
-        }
-      }]);
-
-      queueSetTxStatus(id, 'sending');
-    } catch (error) {
-      console.error('makeExtrinsicCall: error:', error);
-      queueSetTxStatus(id, 'error', {}, error);
-
-      if (isFunction(txFailedCb)) {
-        txFailedCb(null);
-      }
-    }
-  }
-}
-
-export {
-  Signer
-};
-
-export default withMulti(
-  Signer,
-  translate,
-  withApi,
-  withObservable(keyring.accounts.subject, { propName: 'allAccounts' })
-);
diff --git a/pioneer/packages/old-apps/react-signer/src/PasswordCheck.tsx b/pioneer/packages/old-apps/react-signer/src/PasswordCheck.tsx
deleted file mode 100644
index ac6e8c5822..0000000000
--- a/pioneer/packages/old-apps/react-signer/src/PasswordCheck.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-signer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import styled from 'styled-components';
-
-import translate from './translate';
-
-interface Props extends I18nProps {
-  className?: string;
-  unlockError?: string | null;
-}
-
-function PasswordCheck ({ className, unlockError, t }: Props): React.ReactElement<Props> | null {
-  return unlockError
-    ? <div className={className}>{t('wrong password')}</div>
-    : null;
-}
-
-export default translate(
-  styled(PasswordCheck)`
-    margin-left: 15em;
-    color: #9f3a38;
-  `
-);
diff --git a/pioneer/packages/old-apps/react-signer/src/Qr.tsx b/pioneer/packages/old-apps/react-signer/src/Qr.tsx
deleted file mode 100644
index 12d1e16ac6..0000000000
--- a/pioneer/packages/old-apps/react-signer/src/Qr.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-signer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps, BareProps } from '@polkadot/react-components/types';
-
-import React from 'react';
-import styled from 'styled-components';
-import { QrDisplayPayload, QrScanSignature } from '@polkadot/react-qr';
-
-import translate from './translate';
-
-interface Props extends I18nProps, BareProps {
-  address: string;
-  isScanning: boolean;
-  onSignature: (signature: { signature: string }) => void;
-  payload: Uint8Array;
-}
-
-const CMD_MORTAL = 2;
-
-function Qr ({ address, className, isScanning, onSignature, payload }: Props): React.ReactElement<Props> {
-  return (
-    <div className={className}>
-      {
-        isScanning
-          ? <QrScanSignature onScan={onSignature} />
-          : <QrDisplayPayload
-            address={address}
-            cmd={CMD_MORTAL}
-            payload={payload}
-          />
-      }
-    </div>
-  );
-}
-
-export default translate(
-  styled(Qr)`
-    margin: 0 auto;
-    max-width: 30rem;
-  `
-);
diff --git a/pioneer/packages/old-apps/react-signer/src/Transaction.tsx b/pioneer/packages/old-apps/react-signer/src/Transaction.tsx
deleted file mode 100644
index 5fefe1a42e..0000000000
--- a/pioneer/packages/old-apps/react-signer/src/Transaction.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-signer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { QueueTx } from '@polkadot/react-components/Status/types';
-
-import BN from 'bn.js';
-import React from 'react';
-import { GenericCall } from '@polkadot/types';
-import { Call, InputAddress, Modal } from '@polkadot/react-components';
-
-import Checks from './Checks';
-import translate from './translate';
-
-interface Props extends I18nProps {
-  children?: React.ReactNode;
-  hideDetails?: boolean;
-  isSendable: boolean;
-  tip?: BN;
-  value: QueueTx;
-}
-
-function Transaction ({ children, hideDetails, isSendable, value: { accountId, extrinsic, isUnsigned }, t, tip }: Props): React.ReactElement<Props> | null {
-  if (!extrinsic) {
-    return null;
-  }
-
-  const { meta, method, section } = GenericCall.findFunction(extrinsic.callIndex);
-
-  return (
-    <>
-      <Modal.Header>
-        {section}.{method}
-        <label><details><summary>{
-          meta && meta.documentation
-            ? meta.documentation.join(' ')
-            : ''
-        }</summary></details></label>
-      </Modal.Header>
-      <Modal.Content className='ui--signer-Signer-Content'>
-        {!hideDetails && (
-          <>
-            {!isUnsigned && accountId && (
-              <InputAddress
-                className='full'
-                defaultValue={accountId}
-                isDisabled
-                isInput
-                label={t('sending from my account')}
-                withLabel
-              />
-            )}
-            <Call value={extrinsic} />
-            {!isUnsigned && (
-              <Checks
-                accountId={accountId}
-                extrinsic={extrinsic}
-                isSendable={isSendable}
-                tip={tip}
-              />
-            )}
-          </>
-        )}
-        {children}
-      </Modal.Content>
-    </>
-  );
-}
-
-export default translate(Transaction);
diff --git a/pioneer/packages/old-apps/react-signer/src/Unlock.tsx b/pioneer/packages/old-apps/react-signer/src/Unlock.tsx
deleted file mode 100644
index a1899922b7..0000000000
--- a/pioneer/packages/old-apps/react-signer/src/Unlock.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-signer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/react-components/types';
-import { KeyringPair } from '@polkadot/keyring/types';
-
-import React, { useState } from 'react';
-import { Password } from '@polkadot/react-components';
-import keyring from '@polkadot/ui-keyring';
-
-import translate from './translate';
-
-interface Props extends I18nProps {
-  autoFocus?: boolean;
-  error?: string;
-  onChange: (password: string) => void;
-  onEnter?: () => void;
-  password: string;
-  tabIndex?: number;
-  value?: string | null;
-}
-
-function getPair (address?: string | null): KeyringPair | null {
-  try {
-    return keyring.getPair(address as string);
-  } catch (error) {
-    return null;
-  }
-}
-
-function Unlock ({ autoFocus, error, onChange, onEnter, password, t, tabIndex, value }: Props): React.ReactElement<Props> | null {
-  const [pair] = useState<KeyringPair | null>(getPair(value));
-
-  if (!pair || !(pair.isLocked) || pair.meta.isInjected) {
-    return null;
-  }
-
-  return (
-    <div className='ui--signer-Signer-Unlock'>
-      <Password
-        autoFocus={autoFocus}
-        isError={!!error}
-        label={t('unlock account with password')}
-        onChange={onChange}
-        onEnter={onEnter}
-        tabIndex={tabIndex}
-        value={password}
-      />
-    </div>
-  );
-}
-
-export default translate(Unlock);
diff --git a/pioneer/packages/old-apps/react-signer/src/index.css b/pioneer/packages/old-apps/react-signer/src/index.css
deleted file mode 100644
index ca0c7ca740..0000000000
--- a/pioneer/packages/old-apps/react-signer/src/index.css
+++ /dev/null
@@ -1,29 +0,0 @@
-/* Copyright 2017-2019 @polkadot/react-signer authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-.ui--signer-Signer-Content {
-  .modal-Text {
-    margin-bottom: 1em;
-    padding: 1em;
-  }
-
-  .expanded h3 {
-    margin-bottom: 0.75rem;
-  }
-
-  .code {
-    background: #f5f5f5;
-    font-family: monospace;
-    margin: 0 0.25em;
-    overflow-wrap: break-word;
-    padding: 0.25em 0.5em;
-    word-break: break-all;
-    word-break: break-word;
-    word-wrap: break-word;
-  }
-
-  .hl {
-    font-weight: 700;
-  }
-}
diff --git a/pioneer/packages/old-apps/react-signer/src/index.tsx b/pioneer/packages/old-apps/react-signer/src/index.tsx
deleted file mode 100644
index 6cf56857cb..0000000000
--- a/pioneer/packages/old-apps/react-signer/src/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-signer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { BareProps } from '@polkadot/react-components/types';
-
-import './index.css';
-
-import React, { useContext } from 'react';
-import { StatusContext } from '@polkadot/react-components';
-
-import Modal from './Modal';
-
-interface Props extends BareProps {
-  children: React.ReactNode;
-}
-
-export default function Signer ({ children, className, style }: Props): React.ReactElement<Props> {
-  const { txqueue, queueSetTxStatus } = useContext(StatusContext);
-
-  return (
-    <>
-      {children}
-      <Modal
-        className={className}
-        key='signer-modal'
-        queue={txqueue}
-        queueSetTxStatus={queueSetTxStatus}
-        style={style}
-      />
-    </>
-  );
-}
diff --git a/pioneer/packages/old-apps/react-signer/src/translate.ts b/pioneer/packages/old-apps/react-signer/src/translate.ts
deleted file mode 100644
index 6973bab365..0000000000
--- a/pioneer/packages/old-apps/react-signer/src/translate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-signer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { withTranslation } from 'react-i18next';
-
-export default withTranslation(['react-signer']);
diff --git a/pioneer/packages/old-apps/react-signer/src/types.ts b/pioneer/packages/old-apps/react-signer/src/types.ts
deleted file mode 100644
index 748363cd57..0000000000
--- a/pioneer/packages/old-apps/react-signer/src/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-signer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-export interface Signed {
-  data: Uint8Array;
-  message: Uint8Array;
-  signature: Uint8Array;
-}
diff --git a/pioneer/packages/react-api/src/Api.tsx b/pioneer/packages/react-api/src/Api.tsx
index 590f1b3a0d..78d46d145b 100644
--- a/pioneer/packages/react-api/src/Api.tsx
+++ b/pioneer/packages/react-api/src/Api.tsx
@@ -53,7 +53,7 @@ interface ChainData {
 
 const DEFAULT_DECIMALS = registry.createType('u32', 15);
 const DEFAULT_SS58 = registry.createType('u32', addressDefaults.prefix);
-const injectedPromise = web3Enable('polkadot-js/apps');
+const injectedPromise = web3Enable('pioneer');
 let api: ApiPromise;
 
 export { api };
diff --git a/pioneer/packages/react-api/src/typeRegistry.ts b/pioneer/packages/react-api/src/typeRegistry.ts
index 166778a45a..1d8b9451ca 100644
--- a/pioneer/packages/react-api/src/typeRegistry.ts
+++ b/pioneer/packages/react-api/src/typeRegistry.ts
@@ -1,9 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-api authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { TypeRegistry } from '@polkadot/types';
-
-const registry = new TypeRegistry();
+// Joysteam-specific: reuse the registry exported by @joystream/types
+import { registry } from '@joystream/types';
 
 export default registry;
diff --git a/pioneer/packages/react-components/src/styles/joystream.ts b/pioneer/packages/react-components/src/styles/joystream.ts
index 4e5054789e..cadb672ce8 100644
--- a/pioneer/packages/react-components/src/styles/joystream.ts
+++ b/pioneer/packages/react-components/src/styles/joystream.ts
@@ -31,60 +31,6 @@ export default css`
     }
   }
 
-  .ui--AddressMini {
-    .ui--IdentityIcon {
-      margin-left: 0;
-    }
-    .ui--AddressMini-info {
-      display: block;
-    }
-    .ui--AddressMini-details {
-      display: block;
-      text-align: left;
-    }
-    .ui--AddressSummary-name,
-    .ui--AddressSummary-balance,
-    .ui--AddressSummary-memo {
-      display: inline-block;
-      margin-top: 0;
-      padding-top: 0;
-      font-size: 0.8rem !important;
-      margin-right: 1rem;
-      font-weight: 100;
-      opacity: 0.8;
-      overflow: hidden;
-    }
-  }
-
-  .ui--Bubble.ui.label {
-    background-color: #f2f2f2;
-    margin: 0.25rem 0;
-    margin-right: 0.5rem;
-
-    &.pointing:before {
-      background-color: #e6e6e6;
-    }
-    &.warn {
-      color: #f2711c !important;
-      border: 1px solid;
-    }
-    &.ok {
-      color: #21ba45 !important;
-      border: 1px solid;
-    }
-  }
-
-  .SidebarItem {
-    display: inline-flex;
-    flex-direction: column;
-
-    .SidebarSubtitle {
-      display: block;
-      font-size: 0.85rem;
-      color: grey;
-    }
-  }
-
   .JoySection {
     margin: 2rem 0;
 
@@ -185,19 +131,61 @@ export default css`
     color: #3b83c0;
   }
 
-  /* Overrides */
+  /* Main apps bg */
+  .apps-Main {
+    background: rgba(250,250,250);
+  }
+
+  /* Remove IdentityIcon border (not working well for members list) */
   .ui--IdentityIcon {
     border: none !important;
   }
-  /* Normalize SideBar icons width */
-  .apps--SideBar-Item-NavLink svg {
-    width: 20px !important;
+
+  .apps--SideBar-Item-NavLink {
+    /* Normalize SideBar icons width */
+    svg {
+      width: 20px !important;
+    }
+    /* Display SideBar subtitle below title */
+    .text {
+      display: inline-flex;
+      flex-direction: column;
+    }
   }
+
   /* Fix "collapsed" sidebar on mobile */
   .apps--Wrapper:not(.menu-open) .apps--SideBar-Scroll {
     padding: 0 !important;
   }
+
+  /* Turn off global text-transform on h1 */
   h1 {
     text-transform: none;
   }
+
+  /* AddressMini customization */
+  .ui--AddressMini {
+    display: grid;
+    grid-template-rows: auto auto;
+    grid-template-columns: min-content min-content;
+    .ui--AddressMini-icon {
+      grid-row: 1/3;
+      grid-column: 2/3;
+      align-self: center;
+    }
+    .ui--AddressMini-balances .ui--FormatBalance {
+      font-size: 1rem !important;
+      margin: 0 !important;
+    }
+    .ui--AddressMini-info {
+      min-width: 10em;
+      max-width: 10em;
+    }
+  }
+
+  /* Fix options inside struct UI bug */
+  .ui--Params-Struct + .ui--Param-Option-toggle {
+    bottom: auto;
+    top: 0;
+  }
 `;
diff --git a/pioneer/postcss.config.js b/pioneer/postcss.config.js
deleted file mode 100644
index 440a753513..0000000000
--- a/pioneer/postcss.config.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('@polkadot/dev-react/config/postcss');
diff --git a/pioneer/tsconfig.json b/pioneer/tsconfig.json
index a8ebcad35e..fdf13335e6 100644
--- a/pioneer/tsconfig.json
+++ b/pioneer/tsconfig.json
@@ -2,16 +2,7 @@
   "extends": "@polkadot/dev/config/tsconfig",
   "exclude": [
     "build/**/*",
-    "**/build/**/*",
-    "packages/old-apps/**",
-    "packages/joy-election/**/*",
-    "packages/joy-forum/**/*",
-    "packages/joy-help/**/*",
-    "packages/joy-media/**/*",
-    "packages/joy-proposals/**/*",
-    "packages/joy-roles/**/*",
-    "packages/joy-settings/**/*",
-    "packages/joy-utils-old/**/*"
+    "**/build/**/*"
   ],
   "compilerOptions": {
     "jsx": "react",
@@ -20,29 +11,25 @@
     "resolveJsonModule": true,
     "baseUrl": ".",
     "paths": {
+      "@joystream/types": [ "../types/src/" ],
+      "@joystream/types/*": [ "../types/src/*" ],
       "@polkadot/types/augment": [ "../types/augment-codec/augment-types.ts" ],
-      // "@joystream/types/": [ "../types/src/" ],
-      // "@joystream/types/*": [ "../types/src/*" ],
-      // "@polkadot/joy-election/": [ "packages/joy-election/src/" ],
-      // "@polkadot/joy-election/*": [ "packages/joy-election/src/*" ],
-      // "@polkadot/joy-forum/": [ "packages/joy-forum/src/" ],
-      // "@polkadot/joy-forum/*": [ "packages/joy-forum/src/*" ],
-      // "@polkadot/joy-help/": [ "packages/joy-help/src/" ],
-      // "@polkadot/joy-help/*": [ "packages/joy-help/src/*" ],
-      // "@polkadot/joy-media/": [ "packages/joy-media/src/" ],
-      // "@polkadot/joy-media/*": [ "packages/joy-media/src/*" ],
-      "@polkadot/joy-members/": [ "packages/joy-members/src/" ],
+      "@polkadot/joy-election": [ "packages/joy-election/src/" ],
+      "@polkadot/joy-election/*": [ "packages/joy-election/src/*" ],
+      "@polkadot/joy-members": [ "packages/joy-members/src/" ],
       "@polkadot/joy-members/*": [ "packages/joy-members/src/*" ],
-      "@polkadot/joy-pages/": [ "packages/joy-pages/src/" ],
+      "@polkadot/joy-pages": [ "packages/joy-pages/src/" ],
       "@polkadot/joy-pages/*": [ "packages/joy-pages/src/*" ],
-      // "@polkadot/joy-proposals/": [ "packages/joy-proposals/src/" ],
-      // "@polkadot/joy-proposals/*": [ "packages/joy-proposals/src/*" ],
-      // "@polkadot/joy-roles/": [ "packages/joy-roles/src/" ],
-      // "@polkadot/joy-roles/*": [ "packages/joy-roles/src/*" ],
-      // "@polkadot/joy-settings/": [ "packages/joy-settings/src/" ],
-      // "@polkadot/joy-settings/*": [ "packages/joy-settings/src/*" ],
-      "@polkadot/joy-utils/": [ "packages/joy-utils/src/" ],
+      "@polkadot/joy-proposals": [ "packages/joy-proposals/src/" ],
+      "@polkadot/joy-proposals/*": [ "packages/joy-proposals/src/*" ],
+      "@polkadot/joy-roles": [ "packages/joy-roles/src/" ],
+      "@polkadot/joy-roles/*": [ "packages/joy-roles/src/*" ],
+      "@polkadot/joy-utils": [ "packages/joy-utils/src/" ],
       "@polkadot/joy-utils/*": [ "packages/joy-utils/src/*" ],
+      "@polkadot/joy-media": [ "packages/joy-media/src/" ],
+      "@polkadot/joy-media/*": [ "packages/joy-media/src/*" ],
+      "@polkadot/joy-forum": [ "packages/joy-forum/src/" ],
+      "@polkadot/joy-forum/*": [ "packages/joy-forum/src/*" ],
       "@polkadot/apps/*": ["packages/apps/src/*"],
       "@polkadot/apps": ["packages/apps/src"],
       "@polkadot/apps-config/*": [ "packages/apps-config/src/*" ],
diff --git a/types/.prettierignore b/types/.prettierignore
index cf97865545..0c4be1abbd 100644
--- a/types/.prettierignore
+++ b/types/.prettierignore
@@ -6,3 +6,4 @@ lib/
 build/
 augment/
 augment-codec/
+src/hiring/schemas/role.schema.typings.ts
diff --git a/types/augment-codec/augment-types.ts b/types/augment-codec/augment-types.ts
index 26253c5c36..ac34e4a214 100644
--- a/types/augment-codec/augment-types.ts
+++ b/types/augment-codec/augment-types.ts
@@ -11,9 +11,9 @@ import { Stake as Stake, StakingStatus as StakingStatus, Staked as Staked, Stake
 import { Mint as Mint, NextAdjustment as NextAdjustment, AdjustOnInterval as AdjustOnInterval, AdjustCapacityBy as AdjustCapacityBy } from '../mint'
 import { Recipient as Recipient, RewardRelationship as RewardRelationship } from '../recurring-rewards'
 import { Application as Application, ApplicationStage as ApplicationStage, ActivateOpeningAt as ActivateOpeningAt, ApplicationRationingPolicy as ApplicationRationingPolicy, OpeningStage as OpeningStage, StakingPolicy as StakingPolicy, Opening as Opening, WaitingToBeingOpeningStageVariant as WaitingToBeingOpeningStageVariant, ActiveOpeningStageVariant as ActiveOpeningStageVariant, ActiveOpeningStage as ActiveOpeningStage, AcceptingApplications as AcceptingApplications, ReviewPeriod as ReviewPeriod, Deactivated as Deactivated, OpeningDeactivationCause as OpeningDeactivationCause, InactiveApplicationStage as InactiveApplicationStage, UnstakingApplicationStage as UnstakingApplicationStage, ApplicationDeactivationCause as ApplicationDeactivationCause, StakingAmountLimitMode as StakingAmountLimitMode } from '../hiring'
-import { Class as Class, Entity as Entity, ClassSchema as ClassSchema, Property as Property, PropertyType as PropertyType, PropertyValue as PropertyValue, ClassPropertyValue as ClassPropertyValue } from '../versioned-store'
+import { ClassId as ClassId, EntityId as EntityId, Class as Class, Entity as Entity, ClassSchema as ClassSchema, Property as Property, PropertyType as PropertyType, PropertyValue as PropertyValue, ClassPropertyValue as ClassPropertyValue } from '../versioned-store'
 import { EntityPermissions as EntityPermissions, ReferenceConstraint as ReferenceConstraint, ClassPermissionsType as ClassPermissionsType, Operation as Operation, OperationType as OperationType, CreateEntity as CreateEntity, UpdatePropertyValues as UpdatePropertyValues, AddSchemaSupportToEntity as AddSchemaSupportToEntity, ParametrizedEntity as ParametrizedEntity, ParametrizedClassPropertyValue as ParametrizedClassPropertyValue, ParametrizedPropertyValue as ParametrizedPropertyValue, PropertyOfClass as PropertyOfClass } from '../versioned-store/permissions'
-import { OptionalText as OptionalText, Channel as Channel, ChannelContentType as ChannelContentType, ChannelCurationStatus as ChannelCurationStatus, ChannelPublicationStatus as ChannelPublicationStatus, CurationActor as CurationActor, Curator as Curator, CuratorApplication as CuratorApplication, CuratorOpening as CuratorOpening, Lead as Lead, OpeningPolicyCommitment as OpeningPolicyCommitment, Principal as Principal, WorkingGroupUnstaker as WorkingGroupUnstaker, CuratorApplicationIdToCuratorIdMap as CuratorApplicationIdToCuratorIdMap, CuratorApplicationIdSet as CuratorApplicationIdSet, CuratorRoleStakeProfile as CuratorRoleStakeProfile, CuratorRoleStage as CuratorRoleStage, CuratorExitSummary as CuratorExitSummary, CuratorExitInitiationOrigin as CuratorExitInitiationOrigin, LeadRoleState as LeadRoleState, ExitedLeadRole as ExitedLeadRole, CuratorInduction as CuratorInduction } from '../content-working-group'
+import { ChannelId as ChannelId, CuratorId as CuratorId, CuratorOpeningId as CuratorOpeningId, CuratorApplicationId as CuratorApplicationId, LeadId as LeadId, PrincipalId as PrincipalId, OptionalText as OptionalText, Channel as Channel, ChannelContentType as ChannelContentType, ChannelCurationStatus as ChannelCurationStatus, ChannelPublicationStatus as ChannelPublicationStatus, CurationActor as CurationActor, Curator as Curator, CuratorApplication as CuratorApplication, CuratorOpening as CuratorOpening, Lead as Lead, OpeningPolicyCommitment as OpeningPolicyCommitment, Principal as Principal, WorkingGroupUnstaker as WorkingGroupUnstaker, CuratorApplicationIdToCuratorIdMap as CuratorApplicationIdToCuratorIdMap, CuratorApplicationIdSet as CuratorApplicationIdSet, CuratorRoleStakeProfile as CuratorRoleStakeProfile, CuratorRoleStage as CuratorRoleStage, CuratorExitSummary as CuratorExitSummary, CuratorExitInitiationOrigin as CuratorExitInitiationOrigin, LeadRoleState as LeadRoleState, ExitedLeadRole as ExitedLeadRole, CuratorInduction as CuratorInduction } from '../content-working-group'
 import { RationaleText as RationaleText, Application as ApplicationOf, ApplicationIdSet as ApplicationIdSet, ApplicationIdToWorkerIdMap as ApplicationIdToWorkerIdMap, WorkerId as WorkerId, Worker as WorkerOf, Opening as OpeningOf, StorageProviderId as StorageProviderId, OpeningType as OpeningType, ApplicationId as HiringApplicationId, RewardPolicy as RewardPolicy, WorkingGroupOpeningPolicyCommitment as WorkingGroupOpeningPolicyCommitment, RoleStakeProfile as RoleStakeProfile } from '../working-group'
 import { Url as Url, IPNSIdentity as IPNSIdentity, ServiceProviderRecord as ServiceProviderRecord } from '../discovery'
 import { ContentId as ContentId, LiaisonJudgement as LiaisonJudgement, DataObject as DataObject, DataObjectStorageRelationshipId as DataObjectStorageRelationshipId, DataObjectStorageRelationship as DataObjectStorageRelationship, DataObjectTypeId as DataObjectTypeId, DataObjectType as DataObjectType, DataObjectsMap as DataObjectsMap } from '../media'
@@ -286,12 +286,12 @@ declare module '@polkadot/types/types/registry' {
     "StakingAmountLimitMode": StakingAmountLimitMode;
     "Option<StakingAmountLimitMode>": Option<StakingAmountLimitMode>;
     "Vec<StakingAmountLimitMode>": Vec<StakingAmountLimitMode>;
-    "ClassId": u64;
-    "Option<ClassId>": Option<u64>;
-    "Vec<ClassId>": Vec<u64>;
-    "EntityId": u64;
-    "Option<EntityId>": Option<u64>;
-    "Vec<EntityId>": Vec<u64>;
+    "ClassId": ClassId;
+    "Option<ClassId>": Option<ClassId>;
+    "Vec<ClassId>": Vec<ClassId>;
+    "EntityId": EntityId;
+    "Option<EntityId>": Option<EntityId>;
+    "Vec<EntityId>": Vec<EntityId>;
     "Class": Class;
     "Option<Class>": Option<Class>;
     "Vec<Class>": Vec<Class>;
@@ -349,24 +349,24 @@ declare module '@polkadot/types/types/registry' {
     "PropertyOfClass": PropertyOfClass;
     "Option<PropertyOfClass>": Option<PropertyOfClass>;
     "Vec<PropertyOfClass>": Vec<PropertyOfClass>;
-    "ChannelId": u64;
-    "Option<ChannelId>": Option<u64>;
-    "Vec<ChannelId>": Vec<u64>;
-    "CuratorId": u64;
-    "Option<CuratorId>": Option<u64>;
-    "Vec<CuratorId>": Vec<u64>;
-    "CuratorOpeningId": u64;
-    "Option<CuratorOpeningId>": Option<u64>;
-    "Vec<CuratorOpeningId>": Vec<u64>;
-    "CuratorApplicationId": u64;
-    "Option<CuratorApplicationId>": Option<u64>;
-    "Vec<CuratorApplicationId>": Vec<u64>;
-    "LeadId": u64;
-    "Option<LeadId>": Option<u64>;
-    "Vec<LeadId>": Vec<u64>;
-    "PrincipalId": u64;
-    "Option<PrincipalId>": Option<u64>;
-    "Vec<PrincipalId>": Vec<u64>;
+    "ChannelId": ChannelId;
+    "Option<ChannelId>": Option<ChannelId>;
+    "Vec<ChannelId>": Vec<ChannelId>;
+    "CuratorId": CuratorId;
+    "Option<CuratorId>": Option<CuratorId>;
+    "Vec<CuratorId>": Vec<CuratorId>;
+    "CuratorOpeningId": CuratorOpeningId;
+    "Option<CuratorOpeningId>": Option<CuratorOpeningId>;
+    "Vec<CuratorOpeningId>": Vec<CuratorOpeningId>;
+    "CuratorApplicationId": CuratorApplicationId;
+    "Option<CuratorApplicationId>": Option<CuratorApplicationId>;
+    "Vec<CuratorApplicationId>": Vec<CuratorApplicationId>;
+    "LeadId": LeadId;
+    "Option<LeadId>": Option<LeadId>;
+    "Vec<LeadId>": Vec<LeadId>;
+    "PrincipalId": PrincipalId;
+    "Option<PrincipalId>": Option<PrincipalId>;
+    "Vec<PrincipalId>": Vec<PrincipalId>;
     "OptionalText": OptionalText;
     "Option<OptionalText>": Option<OptionalText>;
     "Vec<OptionalText>": Vec<OptionalText>;
diff --git a/types/augment/all/defs.json b/types/augment/all/defs.json
index cfc58e020e..34c467c77a 100644
--- a/types/augment/all/defs.json
+++ b/types/augment/all/defs.json
@@ -353,15 +353,15 @@
     "ClassId": "u64",
     "EntityId": "u64",
     "Class": {
-        "id": "u64",
+        "id": "ClassId",
         "properties": "Vec<Property>",
         "schemas": "Vec<ClassSchema>",
         "name": "Text",
         "description": "Text"
     },
     "Entity": {
-        "id": "u64",
-        "class_id": "u64",
+        "id": "EntityId",
+        "class_id": "ClassId",
         "in_class_schema_indexes": "Vec<u16>"
     },
     "ClassSchema": {
@@ -393,7 +393,7 @@
             "Int32Vec": "u16",
             "Int64Vec": "u16",
             "TextVec": "(u16,u16)",
-            "InternalVec": "(u16,u64)"
+            "InternalVec": "(u16,ClassId)"
         }
     },
     "PropertyValue": {
@@ -416,7 +416,7 @@
             "Int32Vec": "Vec<i32>",
             "Int64Vec": "Vec<i64>",
             "TextVec": "Vec<Text>",
-            "InternalVec": "Vec<u64>"
+            "InternalVec": "Vec<EntityId>"
         }
     },
     "ClassPropertyValue": {
@@ -456,7 +456,7 @@
         }
     },
     "CreateEntity": {
-        "class_id": "u64"
+        "class_id": "ClassId"
     },
     "UpdatePropertyValues": {
         "entity_id": "ParametrizedEntity",
@@ -485,7 +485,7 @@
         }
     },
     "PropertyOfClass": {
-        "class_id": "u64",
+        "class_id": "ClassId",
         "property_index": "u16"
     },
     "ChannelId": "u64",
@@ -508,7 +508,7 @@
         "publication_status": "ChannelPublicationStatus",
         "curation_status": "ChannelCurationStatus",
         "created": "u32",
-        "principal_id": "u64"
+        "principal_id": "PrincipalId"
     },
     "ChannelContentType": {
         "_enum": [
@@ -532,7 +532,7 @@
     "CurationActor": {
         "_enum": {
             "Lead": "Null",
-            "Curator": "u64"
+            "Curator": "CuratorId"
         }
     },
     "Curator": {
@@ -541,17 +541,17 @@
         "role_stake_profile": "Option<CuratorRoleStakeProfile>",
         "stage": "CuratorRoleStage",
         "induction": "CuratorInduction",
-        "principal_id": "u64"
+        "principal_id": "PrincipalId"
     },
     "CuratorApplication": {
         "role_account": "GenericAccountId",
-        "curator_opening_id": "u64",
+        "curator_opening_id": "CuratorOpeningId",
         "member_id": "MemberId",
         "application_id": "HiringApplicationId"
     },
     "CuratorOpening": {
         "opening_id": "u64",
-        "curator_applications": "Vec<u64>",
+        "curator_applications": "Vec<CuratorApplicationId>",
         "policy_commitment": "OpeningPolicyCommitment"
     },
     "Lead": {
@@ -578,18 +578,18 @@
     "Principal": {
         "_enum": {
             "Lead": "Null",
-            "Curator": "u64",
-            "ChannelOwner": "u64"
+            "Curator": "CuratorId",
+            "ChannelOwner": "ChannelId"
         }
     },
     "WorkingGroupUnstaker": {
         "_enum": {
-            "Lead": "u64",
-            "Curator": "u64"
+            "Lead": "LeadId",
+            "Curator": "CuratorId"
         }
     },
-    "CuratorApplicationIdToCuratorIdMap": "BTreeMap<HiringApplicationId,u64>",
-    "CuratorApplicationIdSet": "Vec<u64>",
+    "CuratorApplicationIdToCuratorIdMap": "BTreeMap<HiringApplicationId,CuratorId>",
+    "CuratorApplicationIdSet": "Vec<CuratorApplicationId>",
     "CuratorRoleStakeProfile": {
         "stake_id": "u64",
         "termination_unstaking_period": "Option<u32>",
@@ -623,8 +623,8 @@
         "initiated_at_block_number": "u32"
     },
     "CuratorInduction": {
-        "lead": "u64",
-        "curator_application_id": "u64",
+        "lead": "LeadId",
+        "curator_application_id": "CuratorApplicationId",
         "at_block": "u32"
     },
     "RationaleText": "Bytes",
@@ -734,7 +734,7 @@
     "ProposalDetails": {
         "_enum": {
             "Text": "Text",
-            "RuntimeUpgrade": "Vec<u8>",
+            "RuntimeUpgrade": "Bytes",
             "SetElectionParameters": "ElectionParameters",
             "Spending": "(Balance,AccountId)",
             "SetLead": "Option<SetLeadParams>",
@@ -755,7 +755,7 @@
     "ProposalDetailsOf": {
         "_enum": {
             "Text": "Text",
-            "RuntimeUpgrade": "Vec<u8>",
+            "RuntimeUpgrade": "Bytes",
             "SetElectionParameters": "ElectionParameters",
             "Spending": "(Balance,AccountId)",
             "SetLead": "Option<SetLeadParams>",
diff --git a/types/augment/all/types.ts b/types/augment/all/types.ts
index 7182bcdfc3..0e402d2cc4 100644
--- a/types/augment/all/types.ts
+++ b/types/augment/all/types.ts
@@ -192,7 +192,7 @@ export interface Channel extends Struct {
   readonly publication_status: ChannelPublicationStatus;
   readonly curation_status: ChannelCurationStatus;
   readonly created: u32;
-  readonly principal_id: u64;
+  readonly principal_id: PrincipalId;
 }
 
 /** @name ChannelContentType */
@@ -225,7 +225,7 @@ export interface ChildPositionInParentCategory extends Struct {
 
 /** @name Class */
 export interface Class extends Struct {
-  readonly id: u64;
+  readonly id: ClassId;
   readonly properties: Vec<Property>;
   readonly schemas: Vec<ClassSchema>;
   readonly name: Text;
@@ -262,7 +262,7 @@ export interface ContentId extends U8aFixed {}
 
 /** @name CreateEntity */
 export interface CreateEntity extends Struct {
-  readonly class_id: u64;
+  readonly class_id: ClassId;
 }
 
 /** @name Credential */
@@ -275,7 +275,7 @@ export interface CredentialSet extends Vec<Credential> {}
 export interface CurationActor extends Enum {
   readonly isLead: boolean;
   readonly isCurator: boolean;
-  readonly asCurator: u64;
+  readonly asCurator: CuratorId;
 }
 
 /** @name Curator */
@@ -285,13 +285,13 @@ export interface Curator extends Struct {
   readonly role_stake_profile: Option<CuratorRoleStakeProfile>;
   readonly stage: CuratorRoleStage;
   readonly induction: CuratorInduction;
-  readonly principal_id: u64;
+  readonly principal_id: PrincipalId;
 }
 
 /** @name CuratorApplication */
 export interface CuratorApplication extends Struct {
   readonly role_account: GenericAccountId;
-  readonly curator_opening_id: u64;
+  readonly curator_opening_id: CuratorOpeningId;
   readonly member_id: MemberId;
   readonly application_id: HiringApplicationId;
 }
@@ -300,10 +300,10 @@ export interface CuratorApplication extends Struct {
 export interface CuratorApplicationId extends u64 {}
 
 /** @name CuratorApplicationIdSet */
-export interface CuratorApplicationIdSet extends Vec<u64> {}
+export interface CuratorApplicationIdSet extends Vec<CuratorApplicationId> {}
 
 /** @name CuratorApplicationIdToCuratorIdMap */
-export interface CuratorApplicationIdToCuratorIdMap extends BTreeMap<HiringApplicationId, u64> {}
+export interface CuratorApplicationIdToCuratorIdMap extends BTreeMap<HiringApplicationId, CuratorId> {}
 
 /** @name CuratorExitInitiationOrigin */
 export interface CuratorExitInitiationOrigin extends Enum {
@@ -323,15 +323,15 @@ export interface CuratorId extends u64 {}
 
 /** @name CuratorInduction */
 export interface CuratorInduction extends Struct {
-  readonly lead: u64;
-  readonly curator_application_id: u64;
+  readonly lead: LeadId;
+  readonly curator_application_id: CuratorApplicationId;
   readonly at_block: u32;
 }
 
 /** @name CuratorOpening */
 export interface CuratorOpening extends Struct {
   readonly opening_id: u64;
-  readonly curator_applications: Vec<u64>;
+  readonly curator_applications: Vec<CuratorApplicationId>;
   readonly policy_commitment: OpeningPolicyCommitment;
 }
 
@@ -441,8 +441,8 @@ export interface ElectionStake extends Struct {
 
 /** @name Entity */
 export interface Entity extends Struct {
-  readonly id: u64;
-  readonly class_id: u64;
+  readonly id: EntityId;
+  readonly class_id: ClassId;
   readonly in_class_schema_indexes: Vec<u16>;
 }
 
@@ -724,9 +724,9 @@ export interface PostTextChange extends Struct {
 export interface Principal extends Enum {
   readonly isLead: boolean;
   readonly isCurator: boolean;
-  readonly asCurator: u64;
+  readonly asCurator: CuratorId;
   readonly isChannelOwner: boolean;
-  readonly asChannelOwner: u64;
+  readonly asChannelOwner: ChannelId;
 }
 
 /** @name PrincipalId */
@@ -742,7 +742,7 @@ export interface Property extends Struct {
 
 /** @name PropertyOfClass */
 export interface PropertyOfClass extends Struct {
-  readonly class_id: u64;
+  readonly class_id: ClassId;
   readonly property_index: u16;
 }
 
@@ -777,7 +777,7 @@ export interface PropertyType extends Enum {
   readonly isTextVec: boolean;
   readonly asTextVec: ITuple<[u16, u16]>;
   readonly isInternalVec: boolean;
-  readonly asInternalVec: ITuple<[u16, u64]>;
+  readonly asInternalVec: ITuple<[u16, ClassId]>;
 }
 
 /** @name PropertyValue */
@@ -818,7 +818,7 @@ export interface PropertyValue extends Enum {
   readonly isTextVec: boolean;
   readonly asTextVec: Vec<Text>;
   readonly isInternalVec: boolean;
-  readonly asInternalVec: Vec<u64>;
+  readonly asInternalVec: Vec<EntityId>;
 }
 
 /** @name ProposalDecisionStatus */
@@ -1234,9 +1234,9 @@ export interface WorkingGroupOpeningPolicyCommitment extends Struct {
 /** @name WorkingGroupUnstaker */
 export interface WorkingGroupUnstaker extends Enum {
   readonly isLead: boolean;
-  readonly asLead: u64;
+  readonly asLead: LeadId;
   readonly isCurator: boolean;
-  readonly asCurator: u64;
+  readonly asCurator: CuratorId;
 }
 
 export type PHANTOM_ALL = 'all';
diff --git a/types/package.json b/types/package.json
index 4836d49dbd..db38d51810 100644
--- a/types/package.json
+++ b/types/package.json
@@ -16,7 +16,8 @@
     "generate:codec-defs": "ts-node ./src/scripts/generateCodecDefs.ts",
     "generate:registry-json": "ts-node ./src/scripts/generateRegistryJson.ts",
     "generate:augment": "yarn generate:registry-json && yarn generate:defs && yarn generate:meta",
-    "generate:all": "yarn generate:augment && yarn generate:codec-defs"
+    "generate:all": "yarn generate:augment && yarn generate:codec-defs",
+    "generate:json-schemas": "json2ts -i ./src/hiring/schemas/role.schema.json -o ./src/hiring/schemas/role.schema.typings.ts"
   },
   "author": "Joystream contributors",
   "maintainers": [],
@@ -34,7 +35,8 @@
     "@polkadot/typegen": "1.26.1",
     "ts-node": "^8.6.2",
     "typescript": "^3.7.2",
-    "madge": "^3.9.2"
+    "madge": "^3.9.2",
+    "json-schema-to-typescript": "^9.1.1"
   },
   "engines": {
     "node": ">=12.18.0",
diff --git a/types/src/content-working-group/index.ts b/types/src/content-working-group/index.ts
index eaddb032b9..ff2278623c 100644
--- a/types/src/content-working-group/index.ts
+++ b/types/src/content-working-group/index.ts
@@ -300,12 +300,12 @@ export class CuratorApplicationIdToCuratorIdMap extends BTreeMap.with(Applicatio
 export class CuratorApplicationIdSet extends Vec.with(CuratorApplicationId) {}
 
 export const contentWorkingGroupTypes = {
-  ChannelId: 'u64',
-  CuratorId: 'u64',
-  CuratorOpeningId: 'u64',
-  CuratorApplicationId: 'u64',
-  LeadId: 'u64',
-  PrincipalId: 'u64',
+  ChannelId,
+  CuratorId,
+  CuratorOpeningId,
+  CuratorApplicationId,
+  LeadId,
+  PrincipalId,
   OptionalText,
   Channel,
   ChannelContentType,
diff --git a/types/src/forum.ts b/types/src/forum.ts
index 9f931108e0..807867dc7a 100644
--- a/types/src/forum.ts
+++ b/types/src/forum.ts
@@ -219,12 +219,12 @@ export class Thread extends JoyStructCustom({
     return this.getField('nr_in_category')
   }
 
-  get moderation(): ModerationAction | undefined {
-    return this.getField('moderation').unwrapOr(undefined)
+  get moderation(): ModerationAction | null {
+    return this.getField('moderation').unwrapOr(null)
   }
 
   get moderated(): boolean {
-    return this.moderation !== undefined
+    return this.moderation !== null
   }
 
   get num_unmoderated_posts(): u32 {
@@ -288,12 +288,12 @@ export class Post extends JoyStructCustom({
     return this.getString('current_text')
   }
 
-  get moderation(): ModerationAction | undefined {
-    return this.getField('moderation').unwrapOr(undefined)
+  get moderation(): ModerationAction | null {
+    return this.getField('moderation').unwrapOr(null)
   }
 
   get moderated(): boolean {
-    return this.moderation !== undefined
+    return this.moderation !== null
   }
 
   get text_change_history(): VecPostTextChange {
@@ -337,12 +337,12 @@ export class Reply extends JoyStructCustom({
     return this.getString('text')
   }
 
-  get moderation(): ModerationAction | undefined {
-    return this.getField('moderation').unwrapOr(undefined)
+  get moderation(): ModerationAction | null {
+    return this.getField('moderation').unwrapOr(null)
   }
 
   get moderated(): boolean {
-    return this.moderation !== undefined
+    return this.moderation !== null
   }
 }
 
diff --git a/types/src/hiring/schemas/role.schema.json b/types/src/hiring/schemas/role.schema.json
index 245fea1998..37cb0b64b1 100644
--- a/types/src/hiring/schemas/role.schema.json
+++ b/types/src/hiring/schemas/role.schema.json
@@ -5,7 +5,7 @@
   "title": "Generic JoyStream role schema",
   "definitions": {
     "title": {
-      "$id": "#/properties/application/title",
+      "$id": "#/definitions/title",
       "type": "string",
       "title": "Field title",
       "default": "",
@@ -69,7 +69,7 @@
             "required": ["title", "questions"],
             "properties": {
               "title": {
-                "$ref": "#/properties/application/title"
+                "$ref": "#/definitions/title"
               },
               "questions": {
                 "$id": "#/properties/application/properties/sections/items/properties/questions",
@@ -82,7 +82,7 @@
                   "required": ["title", "type"],
                   "properties": {
                     "title": {
-                      "$ref": "#/properties/application/title"
+                      "$ref": "#/definitions/title"
                     },
                     "type": {
                       "$id": "#/properties/application/properties/questions/items/type",
diff --git a/types/src/hiring/schemas/role.schema.typings.ts b/types/src/hiring/schemas/role.schema.typings.ts
index e2b2847e79..117f694348 100644
--- a/types/src/hiring/schemas/role.schema.typings.ts
+++ b/types/src/hiring/schemas/role.schema.typings.ts
@@ -5,56 +5,57 @@
  * and run json-schema-to-typescript to regenerate this file.
  */
 
-export type SchemaVersion = number
-export type Headline = string
-export type JobTitle = string
-export type JobDescriptionExpectsHTML = string
-export type QuestionFieldType = string
-export type QuestionsFields = QuestionField[]
-export type QuestionSections = QuestionSection[]
-export type TheRewardSchema = string
-export type HandleOrUsername = string
-export type TheItemsSchema = string
-export type AdditionalRolehiringProcessDetails = TheItemsSchema[]
+export type SchemaVersion = number;
+export type Headline = string;
+export type JobTitle = string;
+export type JobDescriptionExpectsHTML = string;
+export type FieldTitle = string;
+export type QuestionFieldType = string;
+export type QuestionsFields = QuestionField[];
+export type QuestionSections = QuestionSection[];
+export type TheRewardSchema = string;
+export type HandleOrUsername = string;
+export type TheItemsSchema = string;
+export type AdditionalRolehiringProcessDetails = TheItemsSchema[];
 
 export interface GenericJoyStreamRoleSchema {
-  version: SchemaVersion
-  headline: Headline
-  job: JobSpecifics
-  application: ApplicationDetails
-  reward: TheRewardSchema
-  creator: CreatorDetails
-  process?: HiringProcess
-  [k: string]: any
+  version: SchemaVersion;
+  headline: Headline;
+  job: JobSpecifics;
+  application: ApplicationDetails;
+  reward: TheRewardSchema;
+  creator: CreatorDetails;
+  process?: HiringProcess;
+  [k: string]: unknown;
 }
 export interface JobSpecifics {
-  title: JobTitle
-  description: JobDescriptionExpectsHTML
-  [k: string]: any
+  title: JobTitle;
+  description: JobDescriptionExpectsHTML;
+  [k: string]: unknown;
 }
 export interface ApplicationDetails {
-  sections?: QuestionSections
-  [k: string]: any
+  sections?: QuestionSections;
+  [k: string]: unknown;
 }
 export interface QuestionSection {
-  title: any
-  questions: QuestionsFields
-  [k: string]: any
+  title: FieldTitle;
+  questions: QuestionsFields;
+  [k: string]: unknown;
 }
 export interface QuestionField {
-  title: any
-  type: QuestionFieldType
-  [k: string]: any
+  title: FieldTitle;
+  type: QuestionFieldType;
+  [k: string]: unknown;
 }
 export interface CreatorDetails {
-  membership: EntryInMembershipModuke
-  [k: string]: any
+  membership: EntryInMembershipModuke;
+  [k: string]: unknown;
 }
 export interface EntryInMembershipModuke {
-  handle: HandleOrUsername
-  [k: string]: any
+  handle: HandleOrUsername;
+  [k: string]: unknown;
 }
 export interface HiringProcess {
-  details: AdditionalRolehiringProcessDetails
-  [k: string]: any
+  details: AdditionalRolehiringProcessDetails;
+  [k: string]: unknown;
 }
diff --git a/types/src/index.ts b/types/src/index.ts
index f934f24a33..c6436e97a1 100644
--- a/types/src/index.ts
+++ b/types/src/index.ts
@@ -15,6 +15,8 @@ import workingGroup from './working-group'
 import discovery from './discovery'
 import media from './media'
 import proposals from './proposals'
+import { InterfaceTypes } from '@polkadot/types/types/registry'
+import { TypeRegistry } from '@polkadot/types'
 
 export {
   common,
@@ -58,3 +60,14 @@ export const types: RegistryTypes = {
   Address: 'AccountId',
   LookupSource: 'AccountId',
 }
+
+// Allows creating types without api instance (it's not a recommended way though, so should be used just for mocks)
+export const registry = new TypeRegistry()
+registry.register(types)
+
+export function createType<TypeName extends keyof InterfaceTypes>(
+  type: TypeName,
+  value: any
+): InterfaceTypes[TypeName] {
+  return registry.createType(type, value)
+}
diff --git a/types/src/proposals.ts b/types/src/proposals.ts
index c6ff7a9b6f..11ed3ea7a2 100644
--- a/types/src/proposals.ts
+++ b/types/src/proposals.ts
@@ -251,7 +251,7 @@ export class TerminateRoleParameters
 
 export class ProposalDetails extends JoyEnum({
   Text: Text,
-  RuntimeUpgrade: Vec.with(u8),
+  RuntimeUpgrade: Bytes,
   SetElectionParameters: ElectionParameters,
   Spending: SpendingParams,
   SetLead: SetLead,
diff --git a/types/src/versioned-store/index.ts b/types/src/versioned-store/index.ts
index 23d3646003..3ad26d1afd 100644
--- a/types/src/versioned-store/index.ts
+++ b/types/src/versioned-store/index.ts
@@ -156,8 +156,8 @@ export function unifyPropName(propName: string): string {
 }
 
 export const versionedStoreTypes: RegistryTypes = {
-  ClassId: 'u64',
-  EntityId: 'u64',
+  ClassId,
+  EntityId,
   Class,
   Entity,
   ClassSchema,
diff --git a/yarn.lock b/yarn.lock
index e3d6e9ab29..7629cd996b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18,6 +18,15 @@
   version "0.0.0"
   uid ""
 
+"@apidevtools/json-schema-ref-parser@9.0.6":
+  version "9.0.6"
+  resolved "https://registry.yarnpkg.com/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-9.0.6.tgz#5d9000a3ac1fd25404da886da6b266adcd99cf1c"
+  integrity sha512-M3YgsLjI0lZxvrpeGVk9Ap032W6TPQkH6pRAZz81Ac3WUNF79VQooAFnp8umjvVzUmD93NkogxEwbSce7qMsUg==
+  dependencies:
+    "@jsdevtools/ono" "^7.1.3"
+    call-me-maybe "^1.0.1"
+    js-yaml "^3.13.1"
+
 "@babel/cli@^7.10.5":
   version "7.10.5"
   resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.10.5.tgz#57df2987c8cf89d0fc7d4b157ec59d7619f1b77a"
@@ -1374,6 +1383,14 @@
     pirates "^4.0.0"
     source-map-support "^0.5.16"
 
+"@babel/runtime-corejs2@^7.6.3":
+  version "7.11.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.11.2.tgz#700a03945ebad0d31ba6690fc8a6bcc9040faa47"
+  integrity sha512-AC/ciV28adSSpEkBglONBWq4/Lvm6GAZuxIoyVtsnUpZMl0bxLtoChEnYAkP+47KyOCayZanojtflUEUJtR/6Q==
+  dependencies:
+    core-js "^2.6.5"
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0.tgz#adeb78fedfc855aa05bc041640f3f6f98e85424c"
@@ -1381,7 +1398,7 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2", "@babel/runtime@^7.9.6":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2", "@babel/runtime@^7.9.6":
   version "7.11.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
   integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
@@ -1839,6 +1856,18 @@
     jest-util "^26.2.0"
     slash "^3.0.0"
 
+"@jest/console@^26.3.0":
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-26.3.0.tgz#ed04063efb280c88ba87388b6f16427c0a85c856"
+  integrity sha512-/5Pn6sJev0nPUcAdpJHMVIsA8sKizL2ZkcKPE5+dJrCccks7tcM7c9wbgHudBJbxXLoTbqsHkG1Dofoem4F09w==
+  dependencies:
+    "@jest/types" "^26.3.0"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^26.3.0"
+    jest-util "^26.3.0"
+    slash "^3.0.0"
+
 "@jest/core@^26.2.2":
   version "26.2.2"
   resolved "https://registry.yarnpkg.com/@jest/core/-/core-26.2.2.tgz#63de01ffce967618003dd7a0164b05c8041b81a9"
@@ -1873,6 +1902,40 @@
     slash "^3.0.0"
     strip-ansi "^6.0.0"
 
+"@jest/core@^26.4.1":
+  version "26.4.1"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-26.4.1.tgz#04af2e4d985e035e13ef94d61d302a8458f587e9"
+  integrity sha512-EFziH1tJC5N8xb8OjUcQgyWdezJh6+zBX5p+9S7HR1jzBVeG8jCE/Edp7yqxW/cToLG/QKj8qrpox+HV9Qw1rw==
+  dependencies:
+    "@jest/console" "^26.3.0"
+    "@jest/reporters" "^26.4.1"
+    "@jest/test-result" "^26.3.0"
+    "@jest/transform" "^26.3.0"
+    "@jest/types" "^26.3.0"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    jest-changed-files "^26.3.0"
+    jest-config "^26.4.1"
+    jest-haste-map "^26.3.0"
+    jest-message-util "^26.3.0"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.4.0"
+    jest-resolve-dependencies "^26.4.1"
+    jest-runner "^26.4.1"
+    jest-runtime "^26.4.1"
+    jest-snapshot "^26.4.1"
+    jest-util "^26.3.0"
+    jest-validate "^26.4.0"
+    jest-watcher "^26.3.0"
+    micromatch "^4.0.2"
+    p-each-series "^2.1.0"
+    rimraf "^3.0.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
 "@jest/environment@^26.2.0":
   version "26.2.0"
   resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-26.2.0.tgz#f6faee1630fcc2fad208953164bccb31dbe0e45f"
@@ -1883,6 +1946,16 @@
     "@types/node" "*"
     jest-mock "^26.2.0"
 
+"@jest/environment@^26.3.0":
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-26.3.0.tgz#e6953ab711ae3e44754a025f838bde1a7fd236a0"
+  integrity sha512-EW+MFEo0DGHahf83RAaiqQx688qpXgl99wdb8Fy67ybyzHwR1a58LHcO376xQJHfmoXTu89M09dH3J509cx2AA==
+  dependencies:
+    "@jest/fake-timers" "^26.3.0"
+    "@jest/types" "^26.3.0"
+    "@types/node" "*"
+    jest-mock "^26.3.0"
+
 "@jest/fake-timers@^26.2.0":
   version "26.2.0"
   resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-26.2.0.tgz#b485c57dc4c74d61406a339807a9af4bac74b75a"
@@ -1895,6 +1968,18 @@
     jest-mock "^26.2.0"
     jest-util "^26.2.0"
 
+"@jest/fake-timers@^26.3.0":
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-26.3.0.tgz#f515d4667a6770f60ae06ae050f4e001126c666a"
+  integrity sha512-ZL9ytUiRwVP8ujfRepffokBvD2KbxbqMhrXSBhSdAhISCw3gOkuntisiSFv+A6HN0n0fF4cxzICEKZENLmW+1A==
+  dependencies:
+    "@jest/types" "^26.3.0"
+    "@sinonjs/fake-timers" "^6.0.1"
+    "@types/node" "*"
+    jest-message-util "^26.3.0"
+    jest-mock "^26.3.0"
+    jest-util "^26.3.0"
+
 "@jest/globals@^26.2.0":
   version "26.2.0"
   resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-26.2.0.tgz#ad78f1104f250c1a4bf5184a2ba51facc59b23f6"
@@ -1904,6 +1989,15 @@
     "@jest/types" "^26.2.0"
     expect "^26.2.0"
 
+"@jest/globals@^26.4.1":
+  version "26.4.1"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-26.4.1.tgz#4e8f6721f081444eda86a7c3e4ceefcf2baa5de1"
+  integrity sha512-gdsHefnwjck+AwDUwW+6rmctmKEcZEEZ4F3PB5kKnub7r0dUoN1KVSyNRXtB5qpZgRYESnxgDXhpw/XYKIsAeg==
+  dependencies:
+    "@jest/environment" "^26.3.0"
+    "@jest/types" "^26.3.0"
+    expect "^26.4.1"
+
 "@jest/reporters@^26.2.2":
   version "26.2.2"
   resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-26.2.2.tgz#5a8632ab410f4fc57782bc05dcf115e91818e869"
@@ -1936,6 +2030,38 @@
   optionalDependencies:
     node-notifier "^7.0.0"
 
+"@jest/reporters@^26.4.1":
+  version "26.4.1"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-26.4.1.tgz#3b4d6faf28650f3965f8b97bc3d114077fb71795"
+  integrity sha512-aROTkCLU8++yiRGVxLsuDmZsQEKO6LprlrxtAuzvtpbIFl3eIjgIf3EUxDKgomkS25R9ZzwGEdB5weCcBZlrpQ==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^26.3.0"
+    "@jest/test-result" "^26.3.0"
+    "@jest/transform" "^26.3.0"
+    "@jest/types" "^26.3.0"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    graceful-fs "^4.2.4"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^4.0.3"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.0.2"
+    jest-haste-map "^26.3.0"
+    jest-resolve "^26.4.0"
+    jest-util "^26.3.0"
+    jest-worker "^26.3.0"
+    slash "^3.0.0"
+    source-map "^0.6.0"
+    string-length "^4.0.1"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^5.0.1"
+  optionalDependencies:
+    node-notifier "^8.0.0"
+
 "@jest/source-map@^26.1.0":
   version "26.1.0"
   resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-26.1.0.tgz#a6a020d00e7d9478f4b690167c5e8b77e63adb26"
@@ -1945,6 +2071,15 @@
     graceful-fs "^4.2.4"
     source-map "^0.6.0"
 
+"@jest/source-map@^26.3.0":
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-26.3.0.tgz#0e646e519883c14c551f7b5ae4ff5f1bfe4fc3d9"
+  integrity sha512-hWX5IHmMDWe1kyrKl7IhFwqOuAreIwHhbe44+XH2ZRHjrKIh0LO5eLQ/vxHFeAfRwJapmxuqlGAEYLadDq6ZGQ==
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.2.4"
+    source-map "^0.6.0"
+
 "@jest/test-result@^26.2.0":
   version "26.2.0"
   resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-26.2.0.tgz#51c9b165c8851cfcf7a3466019114785e154f76b"
@@ -1955,6 +2090,16 @@
     "@types/istanbul-lib-coverage" "^2.0.0"
     collect-v8-coverage "^1.0.0"
 
+"@jest/test-result@^26.3.0":
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-26.3.0.tgz#46cde01fa10c0aaeb7431bf71e4a20d885bc7fdb"
+  integrity sha512-a8rbLqzW/q7HWheFVMtghXV79Xk+GWwOK1FrtimpI5n1la2SY0qHri3/b0/1F0Ve0/yJmV8pEhxDfVwiUBGtgg==
+  dependencies:
+    "@jest/console" "^26.3.0"
+    "@jest/types" "^26.3.0"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
 "@jest/test-sequencer@^26.2.2":
   version "26.2.2"
   resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-26.2.2.tgz#5e8091f2e6c61fdf242af566cb820a4eadc6c4af"
@@ -1966,6 +2111,17 @@
     jest-runner "^26.2.2"
     jest-runtime "^26.2.2"
 
+"@jest/test-sequencer@^26.4.1":
+  version "26.4.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-26.4.1.tgz#b7cd13fedf4c1c20364bd40c134876b003f742e1"
+  integrity sha512-YR4PNPu1RVHxyv/HSQMjc+pBEWa6wuM7xbEX/u5M5FFg6ZM6m00m7Jf0fjRxGN6hZlY5vECmNhJu/kvJLrxR8w==
+  dependencies:
+    "@jest/test-result" "^26.3.0"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^26.3.0"
+    jest-runner "^26.4.1"
+    jest-runtime "^26.4.1"
+
 "@jest/transform@^26.2.2":
   version "26.2.2"
   resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-26.2.2.tgz#86c005c8d5d749ac54d8df53ea58675fffe7a97e"
@@ -1987,6 +2143,27 @@
     source-map "^0.6.1"
     write-file-atomic "^3.0.0"
 
+"@jest/transform@^26.3.0":
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-26.3.0.tgz#c393e0e01459da8a8bfc6d2a7c2ece1a13e8ba55"
+  integrity sha512-Isj6NB68QorGoFWvcOjlUhpkT56PqNIsXKR7XfvoDlCANn/IANlh8DrKAA2l2JKC3yWSMH5wS0GwuQM20w3b2A==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^26.3.0"
+    babel-plugin-istanbul "^6.0.0"
+    chalk "^4.0.0"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^26.3.0"
+    jest-regex-util "^26.0.0"
+    jest-util "^26.3.0"
+    micromatch "^4.0.2"
+    pirates "^4.0.1"
+    slash "^3.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "^3.0.0"
+
 "@jest/types@^25.5.0":
   version "25.5.0"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.5.0.tgz#4d6a4793f7b9599fc3680877b856a97dbccf2a9d"
@@ -2008,6 +2185,17 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
+"@jest/types@^26.3.0":
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.3.0.tgz#97627bf4bdb72c55346eef98e3b3f7ddc4941f71"
+  integrity sha512-BDPG23U0qDeAvU4f99haztXwdAg3hz4El95LkAM+tHAqqhiVzRpEGHHU8EDxT/AnxOrA65YjLBwDahdJ9pTLJQ==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^15.0.0"
+    chalk "^4.0.0"
+
 "@joystream/types@link:types":
   version "0.13.0"
   dependencies:
@@ -2020,6 +2208,11 @@
     lodash "^4.17.15"
     moment "^2.24.0"
 
+"@jsdevtools/ono@^7.1.3":
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/@jsdevtools/ono/-/ono-7.1.3.tgz#9df03bbd7c696a5c58885c34aa06da41c8543796"
+  integrity sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==
+
 "@ledgerhq/devices@^5.21.0":
   version "5.21.0"
   resolved "https://registry.yarnpkg.com/@ledgerhq/devices/-/devices-5.21.0.tgz#b6dc274536e70513a3ae7df7a9f956ea87adcc49"
@@ -4211,6 +4404,11 @@
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
   integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
 
+"@types/faker@^4.1.8":
+  version "4.1.12"
+  resolved "https://registry.yarnpkg.com/@types/faker/-/faker-4.1.12.tgz#065d37343677df1aa757c622650bd14666c42602"
+  integrity sha512-0MEyzJrLLs1WaOCx9ULK6FzdCSj2EuxdSP9kvuxxdBEGujZYUOZ4vkPXdgu3dhyg/pOdn7VCatelYX7k0YShlA==
+
 "@types/file-saver@^2.0.1":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/file-saver/-/file-saver-2.0.1.tgz#e18eb8b069e442f7b956d313f4fadd3ef887354e"
@@ -4321,10 +4519,17 @@
     "@types/istanbul-lib-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@^26.0.7":
-  version "26.0.9"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.9.tgz#0543b57da5f0cd949c5f423a00c56c492289c989"
-  integrity sha512-k4qFfJ5AUKrWok5KYXp2EPm89b0P/KZpl7Vg4XuOTVVQEhLDBDBU3iBFrjjdgd8fLw96aAtmnwhXHl63bWeBQQ==
+"@types/istanbul-reports@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz#508b13aa344fa4976234e75dddcc34925737d821"
+  integrity sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==
+  dependencies:
+    "@types/istanbul-lib-report" "*"
+
+"@types/jest@26.x", "@types/jest@^26.0.10":
+  version "26.0.10"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.10.tgz#8faf7e9756c033c39014ae76a7329efea00ea607"
+  integrity sha512-i2m0oyh8w/Lum7wWK/YOZJakYF8Mx08UaKA1CtbmFeDquVhAEdA7znacsVSf2hJ1OQ/OfVMGN90pw/AtzF8s/Q==
   dependencies:
     jest-diff "^25.2.1"
     pretty-format "^25.2.1"
@@ -4369,6 +4574,11 @@
   resolved "https://registry.yarnpkg.com/@types/memoizee/-/memoizee-0.4.4.tgz#a8a5e917ef70c79523b8b8d57f529e49616a760c"
   integrity sha512-c9+1g6+6vEqcw5UuM0RbfQV0mssmZcoG9+hNC5ptDCsv4G+XJW1Z4pE13wV5zbc9e0+YrDydALBTiD3nWG1a3g==
 
+"@types/mime-types@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/mime-types/-/mime-types-2.1.0.tgz#9ca52cda363f699c69466c2a6ccdaad913ea7a73"
+  integrity sha1-nKUs2jY/aZxpRmwqbM2q2RPqenM=
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -4389,7 +4599,7 @@
   resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-5.2.7.tgz#315d570ccb56c53452ff8638738df60726d5b6ea"
   integrity sha512-NYrtPht0wGzhwe9+/idPaBB+TqkY9AhTvOLMkThm0IoEfLaiVQZwBwyJ5puCkO3AUCWrmcoePjp2mbFocKy4SQ==
 
-"@types/node@*", "@types/node@>= 8", "@types/node@>=4.5.0":
+"@types/node@*", "@types/node@>= 8":
   version "12.12.14"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.14.tgz#1c1d6e3c75dba466e0326948d56e8bd72a1903d2"
   integrity sha512-u/SJDyXwuihpwjXy7hOOghagLEV1KdAST6syfnOk6QZAMzZuWZqXy5aYYZbh8Jdpd4escVFP0MvftHNDb9pruA==
@@ -4424,11 +4634,6 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
-"@types/prettier@^1.16.1":
-  version "1.19.0"
-  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-1.19.0.tgz#a2502fb7ce9b6626fdbfc2e2a496f472de1bdd05"
-  integrity sha512-gDE8JJEygpay7IjA/u3JiIURvwZW08f0cZSZLAzFoX/ZmeqvS0Sqv+97aKuHpNsalAMMhwPe+iAS6fQbfmbt7A==
-
 "@types/prettier@^2.0.0":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.0.2.tgz#5bb52ee68d0f8efa9cc0099920e56be6cc4e37f3"
@@ -4471,6 +4676,13 @@
     "@types/history" "*"
     "@types/react" "*"
 
+"@types/react-beautiful-dnd@^11.0.3":
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-11.0.5.tgz#2f5bc733dd46da28312c8ee0c126ab7202b90247"
+  integrity sha512-idvycolYX3IxwIln8yahzQj3EBgYq4KimPHSP0a2lNHiz2OZSskGg2dLmq1VxTGvvTtdG+Za8p596D/dalRlrA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-beautiful-dnd@^13.0.0":
   version "13.0.0"
   resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.0.0.tgz#e60d3d965312fcf1516894af92dc3e9249587db4"
@@ -5691,6 +5903,15 @@ anymatch@^3.0.3, anymatch@~3.1.1:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+aplayer@^1.10.0, aplayer@^1.10.1:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/aplayer/-/aplayer-1.10.1.tgz#318289206107452cc39e8f552fa6cc6cb459a90c"
+  integrity sha512-HAfyxgCUTLAqtYlxzzK9Fyqg6y+kZ9CqT1WfeWE8FSzwspT6oBqWOZHANPHF3RGTtC33IsyEgrfthPDzU5r9kQ==
+  dependencies:
+    balloon-css "^0.5.0"
+    promise-polyfill "7.1.0"
+    smoothscroll "0.4.0"
+
 app-builder-bin@3.5.9:
   version "3.5.9"
   resolved "https://registry.yarnpkg.com/app-builder-bin/-/app-builder-bin-3.5.9.tgz#a3ac0c25286bac68357321cb2eaf7128b0bc0a4f"
@@ -6140,21 +6361,29 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.0.tgz#24390e6ad61386b0a747265754d2a17219de862c"
   integrity sha512-Uvq6hVe90D0B2WEnUqtdgY1bATGz3mw33nH9Y+dmA+w5DHvUmBgkr5rM/KCHpCsiFNRUfokW/szpPPgMK2hm4A==
 
-axios@^0.18.0, axios@^0.18.1:
-  version "0.18.1"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.1.tgz#ff3f0de2e7b5d180e757ad98000f1081b87bcea3"
-  integrity sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==
+axios@0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
+  integrity sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=
   dependencies:
-    follow-redirects "1.5.10"
-    is-buffer "^2.0.2"
+    follow-redirects "^1.3.0"
+    is-buffer "^1.1.5"
 
-axios@^0.19.0, axios@^0.19.2:
+axios@0.19.2, axios@^0.19.0, axios@^0.19.2:
   version "0.19.2"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
   integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
   dependencies:
     follow-redirects "1.5.10"
 
+axios@^0.18.0, axios@^0.18.1:
+  version "0.18.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.1.tgz#ff3f0de2e7b5d180e757ad98000f1081b87bcea3"
+  integrity sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==
+  dependencies:
+    follow-redirects "1.5.10"
+    is-buffer "^2.0.2"
+
 babel-code-frame@^6.22.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -6230,6 +6459,20 @@ babel-jest@^26.2.2:
     graceful-fs "^4.2.4"
     slash "^3.0.0"
 
+babel-jest@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.3.0.tgz#10d0ca4b529ca3e7d1417855ef7d7bd6fc0c3463"
+  integrity sha512-sxPnQGEyHAOPF8NcUsD0g7hDCnvLL2XyblRBcgrzTWBB/mAIpWow3n1bEL+VghnnZfreLhFSBsFluRoK2tRK4g==
+  dependencies:
+    "@jest/transform" "^26.3.0"
+    "@jest/types" "^26.3.0"
+    "@types/babel__core" "^7.1.7"
+    babel-plugin-istanbul "^6.0.0"
+    babel-preset-jest "^26.3.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    slash "^3.0.0"
+
 babel-loader@^8.0.4, babel-loader@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
@@ -6474,7 +6717,7 @@ babel-plugin-transform-undefined-to-void@^6.9.4:
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-undefined-to-void/-/babel-plugin-transform-undefined-to-void-6.9.4.tgz#be241ca81404030678b748717322b89d0c8fe280"
   integrity sha1-viQcqBQEAwZ4t0hxcyK4nQyP4oA=
 
-babel-preset-current-node-syntax@^0.1.2:
+babel-preset-current-node-syntax@^0.1.2, babel-preset-current-node-syntax@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-0.1.3.tgz#b4b547acddbf963cba555ba9f9cbbb70bfd044da"
   integrity sha512-uyexu1sVwcdFnyq9o8UQYsXwXflIh8LvrF5+cKrYam93ned1CStffB3+BEcsxGSgagoA3GEyjDqO4a/58hyPYQ==
@@ -6499,6 +6742,14 @@ babel-preset-jest@^26.2.0:
     babel-plugin-jest-hoist "^26.2.0"
     babel-preset-current-node-syntax "^0.1.2"
 
+babel-preset-jest@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-26.3.0.tgz#ed6344506225c065fd8a0b53e191986f74890776"
+  integrity sha512-5WPdf7nyYi2/eRxCbVrE1kKCWxgWY4RsPEbdJWFm7QsesFGqjdkyLeu1zRkwM1cxK6EPIlNd6d2AxLk7J+t4pw==
+  dependencies:
+    babel-plugin-jest-hoist "^26.2.0"
+    babel-preset-current-node-syntax "^0.1.3"
+
 "babel-preset-minify@^0.5.0 || 0.6.0-alpha.5":
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/babel-preset-minify/-/babel-preset-minify-0.5.1.tgz#25f5d0bce36ec818be80338d0e594106e21eaa9f"
@@ -6546,6 +6797,16 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+balloon-css@^0.5.0:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/balloon-css/-/balloon-css-0.5.2.tgz#9e2163565a136c9d4aa20e8400772ce3b738d3ff"
+  integrity sha512-zheJpzwyNrG4t39vusA67v3BYg1HTVXOF8cErPEHzWK88PEOFwgo6Ea9VHOgOWNMgeuOtFVtB73NE2NWl9uDyQ==
+
+balloon-css@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/balloon-css/-/balloon-css-1.2.0.tgz#53d3fb4051264a278a58713bed6865845dbcaf4b"
+  integrity sha512-urXwkHgwp6GsXVF+it01485Z2Cj4pnW02ICnM0TemOlkKmCNnDLmyy+ZZiRXBpwldUXO+aRNr7Hdia4CBvXJ5A==
+
 base-path-converter@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/base-path-converter/-/base-path-converter-1.0.2.tgz#e80b4b4f31c7b1561e632158e00774b6f2f27978"
@@ -6736,17 +6997,7 @@ bluebird@^3.1.1, bluebird@^3.3.5, bluebird@^3.5.1, bluebird@^3.5.3, bluebird@^3.
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
-bn.js@^4.0.0, bn.js@^4.11.8, bn.js@^4.4.0:
-  version "4.11.8"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
-  integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
-
-bn.js@^4.1.0, bn.js@^4.1.1:
-  version "4.11.9"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.9.tgz#26d556829458f9d1e81fc48952493d0ba3507828"
-  integrity sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==
-
-bn.js@^5.1.2:
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.11.8, bn.js@^4.4.0, bn.js@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.1.2.tgz#c9686902d3c9a27729f43ab10f9d79c2004da7b0"
   integrity sha512-40rZaf3bUNKTVYu9sIeeEGOg7g14Yvnj9kH7b50EiwX0Q7A6umbvfI5tvHaOERH0XigqKkfLkFQxzb4e6CIXnA==
@@ -6982,6 +7233,13 @@ browserslist@^4.12.0, browserslist@^4.13.0, browserslist@^4.8.5:
     escalade "^3.0.1"
     node-releases "^1.1.58"
 
+bs-logger@0.x:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
+  integrity sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==
+  dependencies:
+    fast-json-stable-stringify "2.x"
+
 bs58@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a"
@@ -7034,7 +7292,7 @@ buffer-fill@^1.0.0:
   resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
   integrity sha1-+PeLdniYiO858gXNY39o5wISKyw=
 
-buffer-from@^1.0.0:
+buffer-from@1.x, buffer-from@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
   integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
@@ -7781,17 +8039,17 @@ cli-boxes@^2.2.0:
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.0.tgz#538ecae8f9c6ca508e3c3c95b453fe93cb4c168d"
   integrity sha512-gpaBrMAizVEANOpfZp/EEUixTXDyGt7DFzdK5hU+UbWt/J0lB0w20ncZj59Z9a93xHb9u12zF5BS6i9RKbtg4w==
 
-cli-color@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/cli-color/-/cli-color-1.4.0.tgz#7d10738f48526824f8fe7da51857cb0f572fe01f"
-  integrity sha512-xu6RvQqqrWEo6MPR1eixqGPywhYBHRs653F9jfXB2Hx4jdM/3WxiNE1vppRmxtMIfl16SFYTpYlrnqH/HsK/2w==
+cli-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/cli-color/-/cli-color-2.0.0.tgz#11ecfb58a79278cf6035a60c54e338f9d837897c"
+  integrity sha512-a0VZ8LeraW0jTuCkuAGMNufareGHhyZU9z8OGsW0gXd1hZGi1SRuNRXdbGkraBBKnhyUhyebFWnRbp+dIn0f0A==
   dependencies:
     ansi-regex "^2.1.1"
-    d "1"
-    es5-ext "^0.10.46"
+    d "^1.0.1"
+    es5-ext "^0.10.51"
     es6-iterator "^2.0.3"
     memoizee "^0.4.14"
-    timers-ext "^0.1.5"
+    timers-ext "^0.1.7"
 
 cli-cursor@^2.1.0:
   version "2.1.0"
@@ -8174,6 +8432,11 @@ commander@~2.19.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
   integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
 
+commandpost@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/commandpost/-/commandpost-1.4.0.tgz#89218012089dfc9b67a337ba162f15c88e0f1048"
+  integrity sha512-aE2Y4MTFJ870NuB/+2z1cXBhSBBzRydVVjzhFC4gtenEhpnj15yu0qptWGJsO9YGrcPZ3ezX8AWb1VA391MKpQ==
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -9066,6 +9329,11 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
+d3-array@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f"
+  integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==
+
 d@1, d@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
@@ -9612,6 +9880,11 @@ diff-sequences@^26.0.0:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.0.0.tgz#0760059a5c287637b842bd7085311db7060e88a6"
   integrity sha512-JC/eHYEC3aSS0vZGjuoc4vHA0yAQTzhQQldXMeMF+JlxLGJlCO38Gma82NV9gk1jGFz8mDzUMeaKXvjRRdJ2dg==
 
+diff-sequences@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.3.0.tgz#62a59b1b29ab7fd27cef2a33ae52abe73042d0a2"
+  integrity sha512-5j5vdRcw3CNctePNYN0Wy2e/JbWT6cAYnXv5OuqPhDpyCGc0uLu2TK0zOCJWNB9kOIfYMSpIulRaDgIi4HJ6Ig==
+
 diff@3.5.0, diff@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
@@ -9887,6 +10160,26 @@ dotenv@^8.0.0, dotenv@^8.2.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
   integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
 
+dplayer@1.25.0:
+  version "1.25.0"
+  resolved "https://registry.yarnpkg.com/dplayer/-/dplayer-1.25.0.tgz#10afb3416b42125b8926d9b157aae594c84945fb"
+  integrity sha512-TG2IKT4IXH5trE3DKeeOqmGlewheHT5R30ya4jhMrjysc1rrCPMJYnmsBfiTS8h6613YZeriFIDHZHEEi/rs3Q==
+  dependencies:
+    axios "0.18.0"
+    balloon-css "^0.5.0"
+    mini-css-extract-plugin "0.4.0"
+    promise-polyfill "8.0.0"
+    webpack-cli "3.0.4"
+
+dplayer@^1.24.0:
+  version "1.26.0"
+  resolved "https://registry.yarnpkg.com/dplayer/-/dplayer-1.26.0.tgz#d366200b1962bd09e91226066f2aadea6f35c71b"
+  integrity sha512-uOE0w/WdlX7N9d0ppIEcAYrcnUjY52TMX+MBL4lj9Mj+JMljVuaEc5w88HkZp5Q11VqvN/jxnM8ktx2Dr7/MgA==
+  dependencies:
+    axios "0.19.2"
+    balloon-css "^1.0.3"
+    promise-polyfill "8.1.3"
+
 drbg.js@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/drbg.js/-/drbg.js-1.0.1.tgz#3e36b6c42b37043823cdbc332d58f31e2445480b"
@@ -9944,6 +10237,16 @@ editions@^2.2.0:
     errlop "^1.1.2"
     semver "^6.3.0"
 
+editorconfig@^0.15.0:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
+  integrity sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==
+  dependencies:
+    commander "^2.19.0"
+    lru-cache "^4.1.5"
+    semver "^5.6.0"
+    sigmund "^1.0.1"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -10162,19 +10465,19 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz#2937e2b8066cd0fe7ce0990a98f0d71a35189f66"
-  integrity sha512-98p2zE+rL7/g/DzMHMTF4zZlCgeVdJ7yr6xzEpJRYwFYrGi9ANdn5DnJURg6RpBkyk60XYDnWIv51VfIhfNGuA==
+enhanced-resolve@^4.0.0, enhanced-resolve@^4.1.1, enhanced-resolve@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.3.0.tgz#3b806f3bfafc1ec7de69551ef93cca46c1704126"
+  integrity sha512-3e87LvavsdxyoCfGusJnrZ5G8SLPOFeHSNpZI/ATL9a5leXo2k0w6MKnbqhdBad9qTobSfB20Ld7UmgoNbAZkQ==
   dependencies:
     graceful-fs "^4.1.2"
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
-enhanced-resolve@^4.1.1, enhanced-resolve@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.3.0.tgz#3b806f3bfafc1ec7de69551ef93cca46c1704126"
-  integrity sha512-3e87LvavsdxyoCfGusJnrZ5G8SLPOFeHSNpZI/ATL9a5leXo2k0w6MKnbqhdBad9qTobSfB20Ld7UmgoNbAZkQ==
+enhanced-resolve@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz#2937e2b8066cd0fe7ce0990a98f0d71a35189f66"
+  integrity sha512-98p2zE+rL7/g/DzMHMTF4zZlCgeVdJ7yr6xzEpJRYwFYrGi9ANdn5DnJURg6RpBkyk60XYDnWIv51VfIhfNGuA==
   dependencies:
     graceful-fs "^4.1.2"
     memory-fs "^0.5.0"
@@ -10334,7 +10637,7 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-es5-ext@^0.10.35, es5-ext@^0.10.45, es5-ext@^0.10.46, es5-ext@^0.10.50, es5-ext@~0.10.14, es5-ext@~0.10.2, es5-ext@~0.10.46:
+es5-ext@^0.10.35, es5-ext@^0.10.45, es5-ext@^0.10.46, es5-ext@^0.10.50, es5-ext@^0.10.51, es5-ext@~0.10.14, es5-ext@~0.10.2, es5-ext@~0.10.46:
   version "0.10.53"
   resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.53.tgz#93c5a3acfdbef275220ad72644ad02ee18368de1"
   integrity sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==
@@ -11100,6 +11403,18 @@ expect@^26.2.0:
     jest-message-util "^26.2.0"
     jest-regex-util "^26.0.0"
 
+expect@^26.4.1:
+  version "26.4.1"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-26.4.1.tgz#6ed3dc218e6a9ffce16c15edc518f44bad9a6731"
+  integrity sha512-PnsyF/VmPRH/HAWELjrIAgQ5h+4JLTiomA1A2djx+jXrCQzQ/4egZYBOEx9hShoX+mQLS4enYk6Ouxk8b4kcEw==
+  dependencies:
+    "@jest/types" "^26.3.0"
+    ansi-styles "^4.0.0"
+    jest-get-type "^26.3.0"
+    jest-matcher-utils "^26.4.1"
+    jest-message-util "^26.3.0"
+    jest-regex-util "^26.0.0"
+
 express-normalize-query-params-middleware@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/express-normalize-query-params-middleware/-/express-normalize-query-params-middleware-0.5.1.tgz#dbe1e8139aecb234fb6adb5c0059c75db9733d2a"
@@ -11232,6 +11547,11 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
+faker@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/faker/-/faker-4.1.0.tgz#1e45bbbecc6774b3c195fad2835109c6d748cc3f"
+  integrity sha1-HkW7vsxndLPBlfrSg1EJxtdIzD8=
+
 fancy-test@^1.4.3:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/fancy-test/-/fancy-test-1.4.8.tgz#995c3d684f045149b399ee16784a80fbb50298db"
@@ -11296,6 +11616,11 @@ fast-glob@^3.1.1, fast-glob@^3.2.4:
     micromatch "^4.0.2"
     picomatch "^2.2.1"
 
+fast-json-stable-stringify@2.x:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
 fast-json-stable-stringify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
@@ -11730,6 +12055,11 @@ follow-redirects@^1.0.0:
   dependencies:
     debug "^3.0.0"
 
+follow-redirects@^1.3.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
+  integrity sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
@@ -11797,11 +12127,6 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
-format-util@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/format-util/-/format-util-1.0.3.tgz#032dca4a116262a12c43f4c3ec8566416c5b2d95"
-  integrity sha1-Ay3KShFiYqEsQ/TD7IVmQWxbLZU=
-
 format@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
@@ -12400,6 +12725,11 @@ global-dirs@^2.0.1:
   dependencies:
     ini "^1.3.5"
 
+global-modules-path@^2.1.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/global-modules-path/-/global-modules-path-2.3.1.tgz#e541f4c800a1a8514a990477b267ac67525b9931"
+  integrity sha512-y+shkf4InI7mPRHSo2b/k6ix6+NLDtyccYv86whhxrSGX9wjPX1VMITmrDbE1eh7zkzhiWtW2sHklJYoQ62Cxg==
+
 global-modules@2.0.0, global-modules@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
@@ -13552,6 +13882,14 @@ import-lazy@^4.0.0:
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-4.0.0.tgz#e8eb627483a0a43da3c03f3e35548be5cb0cc153"
   integrity sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==
 
+import-local@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-1.0.0.tgz#5e4ffdc03f4fe6c009c6729beb29631c2f8227bc"
+  integrity sha512-vAaZHieK9qjGo58agRBg+bhHX3hoTZU/Oa3GESWLz7t1U62fk63aHuDJJEteXoDeTCcPmUT+z38gkHPZkkmpmQ==
+  dependencies:
+    pkg-dir "^2.0.0"
+    resolve-cwd "^2.0.0"
+
 import-local@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
@@ -13695,7 +14033,7 @@ inquirer@6.5.0:
     strip-ansi "^5.1.0"
     through "^2.3.6"
 
-inquirer@^6.2.0:
+inquirer@^6.0.0, inquirer@^6.2.0:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.2.tgz#ad50942375d036d327ff528c08bd5fab089928ca"
   integrity sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==
@@ -13786,7 +14124,7 @@ interpret@^1.0.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
   integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
 
-interpret@^1.4.0:
+interpret@^1.1.0, interpret@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
   integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
@@ -13808,6 +14146,11 @@ invert-kv@^1.0.0:
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
   integrity sha1-EEqOSqym09jNFXqO+L+rLXo//bY=
 
+invert-kv@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02"
+  integrity sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==
+
 ip-regex@^2.0.0, ip-regex@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
@@ -14785,6 +15128,11 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
+iso-639-1@^2.1.0:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/iso-639-1/-/iso-639-1-2.1.4.tgz#c08b3d43a1c18945b05e26a257991ae6e36693ee"
+  integrity sha512-pwJRHnpz1sCR5saQ+Hm1E2YESw2eLGKP5TzsYKXuQ7SIfvKWMRb9CHhptqunYpCIcRCpq3LgLuhYG5hiLPRbFQ==
+
 iso-random-stream@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/iso-random-stream/-/iso-random-stream-1.1.1.tgz#83824bba77fbb3480dd6b35fbb06de7f9e93e80f"
@@ -15003,6 +15351,15 @@ jest-changed-files@^26.2.0:
     execa "^4.0.0"
     throat "^5.0.0"
 
+jest-changed-files@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-26.3.0.tgz#68fb2a7eb125f50839dab1f5a17db3607fe195b1"
+  integrity sha512-1C4R4nijgPltX6fugKxM4oQ18zimS7LqQ+zTTY8lMCMFPrxqBFb7KJH0Z2fRQJvw2Slbaipsqq7s1mgX5Iot+g==
+  dependencies:
+    "@jest/types" "^26.3.0"
+    execa "^4.0.0"
+    throat "^5.0.0"
+
 jest-cli@^26.2.2:
   version "26.2.2"
   resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-26.2.2.tgz#4c273e5474baafac1eb15fd25aaafb4703f5ffbc"
@@ -15022,6 +15379,25 @@ jest-cli@^26.2.2:
     prompts "^2.0.1"
     yargs "^15.3.1"
 
+jest-cli@^26.4.1:
+  version "26.4.1"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-26.4.1.tgz#877fff1c17661c7bbd8e7df56711ee489091236f"
+  integrity sha512-c6px+IOO0OsZ7X/uSr65wcjZnd7NYNUDWFT5OETyCnJRkkwoTER7gneRDrwgr3Ex5+gCGO7D/IMWxUHB/L624A==
+  dependencies:
+    "@jest/core" "^26.4.1"
+    "@jest/test-result" "^26.3.0"
+    "@jest/types" "^26.3.0"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    import-local "^3.0.2"
+    is-ci "^2.0.0"
+    jest-config "^26.4.1"
+    jest-util "^26.3.0"
+    jest-validate "^26.4.0"
+    prompts "^2.0.1"
+    yargs "^15.3.1"
+
 jest-config@^26.2.2:
   version "26.2.2"
   resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-26.2.2.tgz#f3ebc7e2bc3f49de8ed3f8007152f345bb111917"
@@ -15046,6 +15422,30 @@ jest-config@^26.2.2:
     micromatch "^4.0.2"
     pretty-format "^26.2.0"
 
+jest-config@^26.4.1:
+  version "26.4.1"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-26.4.1.tgz#16b5a8e25c43279025718b1678115e39607f914f"
+  integrity sha512-0kUnVceEax0sYN+wdkNYF7fxjYKbsvmKmjVWwJvsSYA2p94bIL6wSy3oehewev7L9Dp/FDZFhmc9dyOoavdT6A==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/test-sequencer" "^26.4.1"
+    "@jest/types" "^26.3.0"
+    babel-jest "^26.3.0"
+    chalk "^4.0.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.1"
+    graceful-fs "^4.2.4"
+    jest-environment-jsdom "^26.3.0"
+    jest-environment-node "^26.3.0"
+    jest-get-type "^26.3.0"
+    jest-jasmine2 "^26.4.1"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.4.0"
+    jest-util "^26.3.0"
+    jest-validate "^26.4.0"
+    micromatch "^4.0.2"
+    pretty-format "^26.4.0"
+
 jest-diff@^25.2.1:
   version "25.5.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-25.5.0.tgz#1dd26ed64f96667c068cef026b677dfa01afcfa9"
@@ -15066,6 +15466,16 @@ jest-diff@^26.2.0:
     jest-get-type "^26.0.0"
     pretty-format "^26.2.0"
 
+jest-diff@^26.4.0:
+  version "26.4.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.4.0.tgz#d073a0a11952b5bd9f1ff39bb9ad24304a0c55f7"
+  integrity sha512-wwC38HlOW+iTq6j5tkj/ZamHn6/nrdcEOc/fKaVILNtN2NLWGdkfRaHWwfNYr5ehaLvuoG2LfCZIcWByVj0gjg==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^26.3.0"
+    jest-get-type "^26.3.0"
+    pretty-format "^26.4.0"
+
 jest-docblock@^26.0.0:
   version "26.0.0"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-26.0.0.tgz#3e2fa20899fc928cb13bd0ff68bd3711a36889b5"
@@ -15084,6 +15494,17 @@ jest-each@^26.2.0:
     jest-util "^26.2.0"
     pretty-format "^26.2.0"
 
+jest-each@^26.4.0:
+  version "26.4.0"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-26.4.0.tgz#c53605b20e7a0a58d6dcf4d8b2f309e607d35d5a"
+  integrity sha512-+cyBh1ehs6thVT/bsZVG+WwmRn2ix4Q4noS9yLZgM10yGWPW12/TDvwuOV2VZXn1gi09/ZwJKJWql6YW1C9zNw==
+  dependencies:
+    "@jest/types" "^26.3.0"
+    chalk "^4.0.0"
+    jest-get-type "^26.3.0"
+    jest-util "^26.3.0"
+    pretty-format "^26.4.0"
+
 jest-environment-jsdom@^26.2.0:
   version "26.2.0"
   resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-26.2.0.tgz#6443a6f3569297dcaa4371dddf93acaf167302dc"
@@ -15097,6 +15518,19 @@ jest-environment-jsdom@^26.2.0:
     jest-util "^26.2.0"
     jsdom "^16.2.2"
 
+jest-environment-jsdom@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-26.3.0.tgz#3b749ba0f3a78e92ba2c9ce519e16e5dd515220c"
+  integrity sha512-zra8He2btIMJkAzvLaiZ9QwEPGEetbxqmjEBQwhH3CA+Hhhu0jSiEJxnJMbX28TGUvPLxBt/zyaTLrOPF4yMJA==
+  dependencies:
+    "@jest/environment" "^26.3.0"
+    "@jest/fake-timers" "^26.3.0"
+    "@jest/types" "^26.3.0"
+    "@types/node" "*"
+    jest-mock "^26.3.0"
+    jest-util "^26.3.0"
+    jsdom "^16.2.2"
+
 jest-environment-node@^26.2.0:
   version "26.2.0"
   resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-26.2.0.tgz#fee89e06bdd4bed3f75ee2978d73ede9bb57a681"
@@ -15109,6 +15543,18 @@ jest-environment-node@^26.2.0:
     jest-mock "^26.2.0"
     jest-util "^26.2.0"
 
+jest-environment-node@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-26.3.0.tgz#56c6cfb506d1597f94ee8d717072bda7228df849"
+  integrity sha512-c9BvYoo+FGcMj5FunbBgtBnbR5qk3uky8PKyRVpSfe2/8+LrNQMiXX53z6q2kY+j15SkjQCOSL/6LHnCPLVHNw==
+  dependencies:
+    "@jest/environment" "^26.3.0"
+    "@jest/fake-timers" "^26.3.0"
+    "@jest/types" "^26.3.0"
+    "@types/node" "*"
+    jest-mock "^26.3.0"
+    jest-util "^26.3.0"
+
 jest-get-type@^25.2.6:
   version "25.2.6"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.2.6.tgz#0b0a32fab8908b44d508be81681487dbabb8d877"
@@ -15119,6 +15565,11 @@ jest-get-type@^26.0.0:
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.0.0.tgz#381e986a718998dbfafcd5ec05934be538db4039"
   integrity sha512-zRc1OAPnnws1EVfykXOj19zo2EMw5Hi6HLbFCSjpuJiXtOWAYIjNsHVSbpQ8bDX7L5BGYGI8m+HmKdjHYFF0kg==
 
+jest-get-type@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
+  integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
+
 jest-haste-map@^26.2.2:
   version "26.2.2"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.2.2.tgz#6d4267b1903854bfdf6a871419f35a82f03ae71e"
@@ -15140,6 +15591,27 @@ jest-haste-map@^26.2.2:
   optionalDependencies:
     fsevents "^2.1.2"
 
+jest-haste-map@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.3.0.tgz#c51a3b40100d53ab777bfdad382d2e7a00e5c726"
+  integrity sha512-DHWBpTJgJhLLGwE5Z1ZaqLTYqeODQIZpby0zMBsCU9iRFHYyhklYqP4EiG73j5dkbaAdSZhgB938mL51Q5LeZA==
+  dependencies:
+    "@jest/types" "^26.3.0"
+    "@types/graceful-fs" "^4.1.2"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.4"
+    jest-regex-util "^26.0.0"
+    jest-serializer "^26.3.0"
+    jest-util "^26.3.0"
+    jest-worker "^26.3.0"
+    micromatch "^4.0.2"
+    sane "^4.0.3"
+    walker "^1.0.7"
+  optionalDependencies:
+    fsevents "^2.1.2"
+
 jest-jasmine2@^26.2.2:
   version "26.2.2"
   resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-26.2.2.tgz#d82b1721fac2b153a4f8b3f0c95e81e702812de2"
@@ -15164,6 +15636,30 @@ jest-jasmine2@^26.2.2:
     pretty-format "^26.2.0"
     throat "^5.0.0"
 
+jest-jasmine2@^26.4.1:
+  version "26.4.1"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-26.4.1.tgz#85f5997720332bedaa64b65b1e7b01074d8485c1"
+  integrity sha512-GMPqJXyAWpohCg4wfA82lwac65lmgANH4/rOhNNaAN9yjInMAeMExQcWE1xb3fcCgLwibqeAuqVrV83oQl+szg==
+  dependencies:
+    "@babel/traverse" "^7.1.0"
+    "@jest/environment" "^26.3.0"
+    "@jest/source-map" "^26.3.0"
+    "@jest/test-result" "^26.3.0"
+    "@jest/types" "^26.3.0"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    expect "^26.4.1"
+    is-generator-fn "^2.0.0"
+    jest-each "^26.4.0"
+    jest-matcher-utils "^26.4.1"
+    jest-message-util "^26.3.0"
+    jest-runtime "^26.4.1"
+    jest-snapshot "^26.4.1"
+    jest-util "^26.3.0"
+    pretty-format "^26.4.0"
+    throat "^5.0.0"
+
 jest-leak-detector@^26.2.0:
   version "26.2.0"
   resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-26.2.0.tgz#073ee6d8db7a9af043e7ce99d8eea17a4fb0cc50"
@@ -15172,6 +15668,14 @@ jest-leak-detector@^26.2.0:
     jest-get-type "^26.0.0"
     pretty-format "^26.2.0"
 
+jest-leak-detector@^26.4.0:
+  version "26.4.0"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-26.4.0.tgz#1efeeef693af3c9332062876add5ac5f25cb0a70"
+  integrity sha512-7EXKKEKnAWUPyiVtGZzJflbPOtYUdlNoevNVOkAcPpdR8xWiYKPGNGA6sz25S+8YhZq3rmkQJYAh3/P0VnoRwA==
+  dependencies:
+    jest-get-type "^26.3.0"
+    pretty-format "^26.4.0"
+
 jest-matcher-utils@^26.2.0:
   version "26.2.0"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-26.2.0.tgz#b107af98c2b8c557ffd46c1adf06f794aa52d622"
@@ -15182,6 +15686,16 @@ jest-matcher-utils@^26.2.0:
     jest-get-type "^26.0.0"
     pretty-format "^26.2.0"
 
+jest-matcher-utils@^26.4.1:
+  version "26.4.1"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-26.4.1.tgz#f9f2d1d37d301e328eb22e9df09e7343d6cc1b25"
+  integrity sha512-nmHWaOz54R/w6zJju5tuW0bw6+m38Rb1jnDKehKM/bOngDDL0UwtN634cRxpFoUNVRUrX8Wa0Z34xq/f8iuP5A==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^26.4.0"
+    jest-get-type "^26.3.0"
+    pretty-format "^26.4.0"
+
 jest-message-util@^26.2.0:
   version "26.2.0"
   resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-26.2.0.tgz#757fbc1323992297092bb9016a71a2eb12fd22ea"
@@ -15196,6 +15710,20 @@ jest-message-util@^26.2.0:
     slash "^3.0.0"
     stack-utils "^2.0.2"
 
+jest-message-util@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-26.3.0.tgz#3bdb538af27bb417f2d4d16557606fd082d5841a"
+  integrity sha512-xIavRYqr4/otGOiLxLZGj3ieMmjcNE73Ui+LdSW/Y790j5acqCsAdDiLIbzHCZMpN07JOENRWX5DcU+OQ+TjTA==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@jest/types" "^26.3.0"
+    "@types/stack-utils" "^1.0.1"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    micromatch "^4.0.2"
+    slash "^3.0.0"
+    stack-utils "^2.0.2"
+
 jest-mock@^26.2.0:
   version "26.2.0"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-26.2.0.tgz#a1b3303ab38c34aa1dbbc16ab57cdc1a59ed50d1"
@@ -15204,6 +15732,14 @@ jest-mock@^26.2.0:
     "@jest/types" "^26.2.0"
     "@types/node" "*"
 
+jest-mock@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-26.3.0.tgz#ee62207c3c5ebe5f35b760e1267fee19a1cfdeba"
+  integrity sha512-PeaRrg8Dc6mnS35gOo/CbZovoDPKAeB1FICZiuagAgGvbWdNNyjQjkOaGUa/3N3JtpQ/Mh9P4A2D4Fv51NnP8Q==
+  dependencies:
+    "@jest/types" "^26.3.0"
+    "@types/node" "*"
+
 jest-pnp-resolver@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
@@ -15223,6 +15759,15 @@ jest-resolve-dependencies@^26.2.2:
     jest-regex-util "^26.0.0"
     jest-snapshot "^26.2.2"
 
+jest-resolve-dependencies@^26.4.1:
+  version "26.4.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-26.4.1.tgz#8e7cd28a1774cfdd64bb79b77ef8cd07e0f35598"
+  integrity sha512-Gx4JfQ1k/hGb4lqVOOx8TPOkNtyJIQSHcJU68pB+sdyDJi9rbMxD1XXiYyaEq9WXufiZo90k9GTK6z6a5m0SQw==
+  dependencies:
+    "@jest/types" "^26.3.0"
+    jest-regex-util "^26.0.0"
+    jest-snapshot "^26.4.1"
+
 jest-resolve@^26.2.2:
   version "26.2.2"
   resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-26.2.2.tgz#324a20a516148d61bffa0058ed0c77c510ecfd3e"
@@ -15237,6 +15782,20 @@ jest-resolve@^26.2.2:
     resolve "^1.17.0"
     slash "^3.0.0"
 
+jest-resolve@^26.4.0:
+  version "26.4.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-26.4.0.tgz#6dc0af7fb93e65b73fec0368ca2b76f3eb59a6d7"
+  integrity sha512-bn/JoZTEXRSlEx3+SfgZcJAVuTMOksYq9xe9O6s4Ekg84aKBObEaVXKOEilULRqviSLAYJldnoWV9c07kwtiCg==
+  dependencies:
+    "@jest/types" "^26.3.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^26.3.0"
+    read-pkg-up "^7.0.1"
+    resolve "^1.17.0"
+    slash "^3.0.0"
+
 jest-runner@^26.2.2:
   version "26.2.2"
   resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-26.2.2.tgz#6d03d057886e9c782e10b2cf37443f902fe0e39e"
@@ -15263,6 +15822,32 @@ jest-runner@^26.2.2:
     source-map-support "^0.5.6"
     throat "^5.0.0"
 
+jest-runner@^26.4.1:
+  version "26.4.1"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-26.4.1.tgz#5a98c87b558aacf88e761d5ee83e98bfb0a59839"
+  integrity sha512-QcKwn1YNlzFumTtFsocETgIm13KNt2X8sae4wcqsF3JnxGUcYYUGBstCQhtAG4fKD/TKThHkgE/ZgQVKipj7oA==
+  dependencies:
+    "@jest/console" "^26.3.0"
+    "@jest/environment" "^26.3.0"
+    "@jest/test-result" "^26.3.0"
+    "@jest/types" "^26.3.0"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.7.1"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    jest-config "^26.4.1"
+    jest-docblock "^26.0.0"
+    jest-haste-map "^26.3.0"
+    jest-leak-detector "^26.4.0"
+    jest-message-util "^26.3.0"
+    jest-resolve "^26.4.0"
+    jest-runtime "^26.4.1"
+    jest-util "^26.3.0"
+    jest-worker "^26.3.0"
+    source-map-support "^0.5.6"
+    throat "^5.0.0"
+
 jest-runtime@^26.2.2:
   version "26.2.2"
   resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-26.2.2.tgz#2480ff79320680a643031dd21998d7c63d83ab68"
@@ -15295,6 +15880,38 @@ jest-runtime@^26.2.2:
     strip-bom "^4.0.0"
     yargs "^15.3.1"
 
+jest-runtime@^26.4.1:
+  version "26.4.1"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-26.4.1.tgz#9a6ffefc7167b0f244e0907f4820ab38d825cdd2"
+  integrity sha512-zXPQBS4iL/CEZtDfX+rDz+oZ/inQK/EYOeVt3uDWu8kwSdP/Cw4yOZtCTPApeNsGtZy6X5WQ1U+fyagN1B/Qkw==
+  dependencies:
+    "@jest/console" "^26.3.0"
+    "@jest/environment" "^26.3.0"
+    "@jest/fake-timers" "^26.3.0"
+    "@jest/globals" "^26.4.1"
+    "@jest/source-map" "^26.3.0"
+    "@jest/test-result" "^26.3.0"
+    "@jest/transform" "^26.3.0"
+    "@jest/types" "^26.3.0"
+    "@types/yargs" "^15.0.0"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.4"
+    jest-config "^26.4.1"
+    jest-haste-map "^26.3.0"
+    jest-message-util "^26.3.0"
+    jest-mock "^26.3.0"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.4.0"
+    jest-snapshot "^26.4.1"
+    jest-util "^26.3.0"
+    jest-validate "^26.4.0"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+    yargs "^15.3.1"
+
 jest-serializer@^26.2.0:
   version "26.2.0"
   resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-26.2.0.tgz#92dcae5666322410f4bf50211dd749274959ddac"
@@ -15303,6 +15920,14 @@ jest-serializer@^26.2.0:
     "@types/node" "*"
     graceful-fs "^4.2.4"
 
+jest-serializer@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-26.3.0.tgz#1c9d5e1b74d6e5f7e7f9627080fa205d976c33ef"
+  integrity sha512-IDRBQBLPlKa4flg77fqg0n/pH87tcRKwe8zxOVTWISxGpPHYkRZ1dXKyh04JOja7gppc60+soKVZ791mruVdow==
+  dependencies:
+    "@types/node" "*"
+    graceful-fs "^4.2.4"
+
 jest-snapshot@^26.2.2:
   version "26.2.2"
   resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-26.2.2.tgz#9d2eda083a4a1017b157e351868749bd63211799"
@@ -15324,6 +15949,39 @@ jest-snapshot@^26.2.2:
     pretty-format "^26.2.0"
     semver "^7.3.2"
 
+jest-snapshot@^26.4.1:
+  version "26.4.1"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-26.4.1.tgz#41dd85c41dbb76ac874e36c18dcfe722c88d22c4"
+  integrity sha512-5DsxbSSuYA8rZ/ynO+l5J65wSIyzDB2AXjuIvep90YmtslrROqDtba2hBgq1Cj6L6A0j/jv6h8JydEe2WYPM/g==
+  dependencies:
+    "@babel/types" "^7.0.0"
+    "@jest/types" "^26.3.0"
+    "@types/prettier" "^2.0.0"
+    chalk "^4.0.0"
+    expect "^26.4.1"
+    graceful-fs "^4.2.4"
+    jest-diff "^26.4.0"
+    jest-get-type "^26.3.0"
+    jest-haste-map "^26.3.0"
+    jest-matcher-utils "^26.4.1"
+    jest-message-util "^26.3.0"
+    jest-resolve "^26.4.0"
+    natural-compare "^1.4.0"
+    pretty-format "^26.4.0"
+    semver "^7.3.2"
+
+jest-util@26.x, jest-util@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-26.3.0.tgz#a8974b191df30e2bf523ebbfdbaeb8efca535b3e"
+  integrity sha512-4zpn6bwV0+AMFN0IYhH/wnzIQzRaYVrz1A8sYnRnj4UXDXbOVtWmlaZkO9mipFqZ13okIfN87aDoJWB7VH6hcw==
+  dependencies:
+    "@jest/types" "^26.3.0"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    is-ci "^2.0.0"
+    micromatch "^4.0.2"
+
 jest-util@^26.2.0:
   version "26.2.0"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-26.2.0.tgz#0597d2a27c559340957609f106c408c17c1d88ac"
@@ -15348,6 +16006,18 @@ jest-validate@^26.2.0:
     leven "^3.1.0"
     pretty-format "^26.2.0"
 
+jest-validate@^26.4.0:
+  version "26.4.0"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-26.4.0.tgz#3874a7cc9e27328afac88899ee9e2fae5e3a4293"
+  integrity sha512-t56Z/FRMrLP6mpmje7/YgHy0wOzcuc6i3LBXz6kjmsUWYN62OuMdC86Vg9/dX59SvyitSqqegOrx+h7BkNXeaQ==
+  dependencies:
+    "@jest/types" "^26.3.0"
+    camelcase "^6.0.0"
+    chalk "^4.0.0"
+    jest-get-type "^26.3.0"
+    leven "^3.1.0"
+    pretty-format "^26.4.0"
+
 jest-watcher@^26.2.0:
   version "26.2.0"
   resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-26.2.0.tgz#45bdf2fecadd19c0a501f3b071a474dca636825b"
@@ -15361,6 +16031,19 @@ jest-watcher@^26.2.0:
     jest-util "^26.2.0"
     string-length "^4.0.1"
 
+jest-watcher@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-26.3.0.tgz#f8ef3068ddb8af160ef868400318dc4a898eed08"
+  integrity sha512-XnLdKmyCGJ3VoF6G/p5ohbJ04q/vv5aH9ENI+i6BL0uu9WWB6Z7Z2lhQQk0d2AVZcRGp1yW+/TsoToMhBFPRdQ==
+  dependencies:
+    "@jest/test-result" "^26.3.0"
+    "@jest/types" "^26.3.0"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    jest-util "^26.3.0"
+    string-length "^4.0.1"
+
 jest-worker@^25.4.0:
   version "25.5.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-25.5.0.tgz#2611d071b79cea0f43ee57a3d118593ac1547db1"
@@ -15378,6 +16061,15 @@ jest-worker@^26.2.1:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
+jest-worker@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.3.0.tgz#7c8a97e4f4364b4f05ed8bca8ca0c24de091871f"
+  integrity sha512-Vmpn2F6IASefL+DVBhPzI2J9/GJUsqzomdeN+P+dK8/jKxbh8R3BtFnx3FIta7wYlPU62cpJMJQo4kuOowcMnw==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^7.0.0"
+
 jest@^26.2.2:
   version "26.2.2"
   resolved "https://registry.yarnpkg.com/jest/-/jest-26.2.2.tgz#a022303887b145147204c5f66e6a5c832333c7e7"
@@ -15387,6 +16079,15 @@ jest@^26.2.2:
     import-local "^3.0.2"
     jest-cli "^26.2.2"
 
+jest@^26.4.1:
+  version "26.4.1"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-26.4.1.tgz#4c187999c9af761eba862d720f66f43e80b8d12f"
+  integrity sha512-q+az+ZXFOTxTlD6BRIMcZC+a33O9lsryV4Wo9gU4D/AI+Y6KKgVRCmyzpc4H2gWv0rn45lACukmMS2uSB7e1LA==
+  dependencies:
+    "@jest/core" "^26.4.1"
+    import-local "^3.0.2"
+    jest-cli "^26.4.1"
+
 jquery@x.*:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
@@ -15420,7 +16121,7 @@ js-yaml@^3.10.0, js-yaml@^3.14.0:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-js-yaml@^3.11.0, js-yaml@^3.12.1, js-yaml@^3.13.1:
+js-yaml@^3.11.0, js-yaml@^3.13.1:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
   integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
@@ -15485,30 +16186,29 @@ json-parse-better-errors@^1.0.0, json-parse-better-errors@^1.0.1, json-parse-bet
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
 
-json-schema-ref-parser@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/json-schema-ref-parser/-/json-schema-ref-parser-6.1.0.tgz#30af34aeab5bee0431da805dac0eb21b574bf63d"
-  integrity sha512-pXe9H1m6IgIpXmE5JSb8epilNTGsmTb2iPohAXpOdhqGFbQjNeHHsZxU+C8w6T81GZxSPFLeUoqDJmzxx5IGuw==
+json-schema-ref-parser@^9.0.1:
+  version "9.0.6"
+  resolved "https://registry.yarnpkg.com/json-schema-ref-parser/-/json-schema-ref-parser-9.0.6.tgz#fc89a5e6b853f2abe8c0af30d3874196526adb60"
+  integrity sha512-z0JGv7rRD3CnJbZY/qCpscyArdtLJhr/wRBmFUdoZ8xMjsFyNdILSprG2degqRLjBjyhZHAEBpGOxniO9rKTxA==
   dependencies:
-    call-me-maybe "^1.0.1"
-    js-yaml "^3.12.1"
-    ono "^4.0.11"
+    "@apidevtools/json-schema-ref-parser" "9.0.6"
 
-json-schema-to-typescript@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/json-schema-to-typescript/-/json-schema-to-typescript-7.1.0.tgz#c98a8647718551a40f324448f53508d73c087911"
-  integrity sha512-7tQyQzR+0NyI2iPjkqLLe4ncaxov1oIAFRM+BI8DDs7wxVIXsd0GWoZJIPsNQePIDr7N/LCkYtkEEDvY7dhGzA==
+json-schema-to-typescript@^9.1.1:
+  version "9.1.1"
+  resolved "https://registry.yarnpkg.com/json-schema-to-typescript/-/json-schema-to-typescript-9.1.1.tgz#572c1eb8b7ca82d6534c023c4651f3fe925171c0"
+  integrity sha512-VrdxmwQROjPBRlHxXwGUa2xzhOMPiNZIVsxZrZjMYtbI7suRFMiEktqaD/gqhfSya7Djy+x8dnJT+H0/0sZO0Q==
   dependencies:
-    "@types/json-schema" "^7.0.3"
-    "@types/node" ">=4.5.0"
-    "@types/prettier" "^1.16.1"
-    cli-color "^1.4.0"
-    json-schema-ref-parser "^6.1.0"
+    "@types/json-schema" "^7.0.4"
+    cli-color "^2.0.0"
+    glob "^7.1.6"
+    is-glob "^4.0.1"
+    json-schema-ref-parser "^9.0.1"
     json-stringify-safe "^5.0.1"
-    lodash "^4.17.11"
-    minimist "^1.2.0"
+    lodash "^4.17.15"
+    minimist "^1.2.5"
+    mkdirp "^1.0.4"
     mz "^2.7.0"
-    prettier "^1.18.2"
+    prettier "^2.0.5"
     stdin "0.0.1"
 
 json-schema-traverse@^0.4.1:
@@ -15543,6 +16243,13 @@ json3@^3.3.2:
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81"
   integrity sha512-c7/8mbUsKigAbLkD5B010BK4D9LZm7A1pNItkEwiUZRpIN66exu/e7YQWysGun+TRKaJp8MhemM+VkfWv42aCA==
 
+json5@2.x, json5@^2.1.0, json5@^2.1.1, json5@^2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
+  integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
+  dependencies:
+    minimist "^1.2.5"
+
 json5@^0.5.0, json5@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
@@ -15555,13 +16262,6 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.0, json5@^2.1.1, json5@^2.1.2:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
-  integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
-  dependencies:
-    minimist "^1.2.5"
-
 jsonfile@^2.1.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
@@ -15884,6 +16584,13 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
+lcid@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-2.0.0.tgz#6ef5d2df60e52f82eb228a4c373e8d1f397253cf"
+  integrity sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==
+  dependencies:
+    invert-kv "^2.0.0"
+
 lcov-parse@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lcov-parse/-/lcov-parse-1.0.0.tgz#eb0d46b54111ebc561acb4c408ef9363bdc8f7e0"
@@ -16262,7 +16969,7 @@ lodash.kebabcase@^4.0.1, lodash.kebabcase@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
   integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY=
 
-lodash.memoize@^4.1.2:
+lodash.memoize@4.x, lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
@@ -16449,7 +17156,7 @@ lowlight@~1.11.0:
     fault "^1.0.2"
     highlight.js "~9.13.0"
 
-lru-cache@^4.0.1, lru-cache@^4.1.2:
+lru-cache@^4.0.1, lru-cache@^4.1.2, lru-cache@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
   integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
@@ -16565,7 +17272,7 @@ make-dir@^3.0.2:
   dependencies:
     semver "^6.0.0"
 
-make-error@^1.1.1:
+make-error@1.x, make-error@^1.1.1:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
@@ -16594,6 +17301,13 @@ makeerror@1.0.x:
   dependencies:
     tmpl "1.0.x"
 
+map-age-cleaner@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz#7d583a7306434c055fe474b0f45078e6e1b4b92a"
+  integrity sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==
+  dependencies:
+    p-defer "^1.0.0"
+
 map-cache@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
@@ -16781,6 +17495,15 @@ mem@^1.1.0:
   dependencies:
     mimic-fn "^1.0.0"
 
+mem@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-4.3.0.tgz#461af497bc4ae09608cdb2e60eefb69bff744178"
+  integrity sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==
+  dependencies:
+    map-age-cleaner "^0.1.1"
+    mimic-fn "^2.0.0"
+    p-is-promise "^2.0.0"
+
 memoize-one@^5.0.0, memoize-one@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
@@ -17007,7 +17730,7 @@ mime-types@^2.1.12, mime-types@~2.1.19, mime-types@~2.1.24:
   dependencies:
     mime-db "1.42.0"
 
-mime-types@^2.1.18, mime-types@^2.1.26, mime-types@~2.1.17:
+mime-types@^2.1.18, mime-types@^2.1.22, mime-types@^2.1.26, mime-types@~2.1.17:
   version "2.1.27"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.27.tgz#47949f98e279ea53119f5722e0f34e529bec009f"
   integrity sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==
@@ -17029,7 +17752,7 @@ mimic-fn@^1.0.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
   integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
 
-mimic-fn@^2.1.0:
+mimic-fn@^2.0.0, mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
@@ -17064,6 +17787,14 @@ mini-create-react-context@^0.4.0:
     "@babel/runtime" "^7.5.5"
     tiny-warning "^1.0.3"
 
+mini-css-extract-plugin@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.0.tgz#ff3bf08bee96e618e177c16ca6131bfecef707f9"
+  integrity sha512-2Zik6PhUZ/MbiboG6SDS9UTPL4XXy4qnyGjSdCIWRrr8xb6PwLtHE+AYOjkXJWdF0OG8vo/yrJ8CgS5WbMpzIg==
+  dependencies:
+    loader-utils "^1.1.0"
+    webpack-sources "^1.1.0"
+
 mini-css-extract-plugin@0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.6.0.tgz#a3f13372d6fcde912f3ee4cd039665704801e3b9"
@@ -17243,7 +17974,7 @@ mkdirp-promise@^5.0.1:
   dependencies:
     mkdirp "*"
 
-mkdirp@*, mkdirp@^1.0.3, mkdirp@^1.0.4, mkdirp@~1.0.4:
+mkdirp@*, mkdirp@1.x, mkdirp@^1.0.3, mkdirp@^1.0.4, mkdirp@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
@@ -17847,6 +18578,18 @@ node-notifier@^7.0.0:
     uuid "^8.2.0"
     which "^2.0.2"
 
+node-notifier@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-8.0.0.tgz#a7eee2d51da6d0f7ff5094bc7108c911240c1620"
+  integrity sha512-46z7DUmcjoYdaWyXouuFNNfUo6eFa94t23c53c+lG/9Cvauk4a98rAUp9672X5dxGdQmLpPzTxzu8f/OeEPaFA==
+  dependencies:
+    growly "^1.3.0"
+    is-wsl "^2.2.0"
+    semver "^7.3.2"
+    shellwords "^0.1.1"
+    uuid "^8.3.0"
+    which "^2.0.2"
+
 node-pre-gyp@^0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz#39ba4bb1439da030295f899e3b520b7785766149"
@@ -18359,13 +19102,6 @@ only@~0.0.2:
   resolved "https://registry.yarnpkg.com/only/-/only-0.0.2.tgz#2afde84d03e50b9a8edc444e30610a70295edfb4"
   integrity sha1-Kv3oTQPlC5qO3EROMGEKcCle37Q=
 
-ono@^4.0.11:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/ono/-/ono-4.0.11.tgz#c7f4209b3e396e8a44ef43b9cedc7f5d791d221d"
-  integrity sha512-jQ31cORBFE6td25deYeD80wxKBMj+zBmHTrVxnc6CKhx8gho6ipmWM5zj/oeoqioZ99yqBls9Z/9Nss7J26G2g==
-  dependencies:
-    format-util "^1.0.3"
-
 open@^6.3.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/open/-/open-6.4.0.tgz#5c13e96d0dc894686164f18965ecfe889ecfc8a9"
@@ -18578,6 +19314,15 @@ os-locale@^2.0.0:
     lcid "^1.0.0"
     mem "^1.1.0"
 
+os-locale@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
+  integrity sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==
+  dependencies:
+    execa "^1.0.0"
+    lcid "^2.0.0"
+    mem "^4.0.0"
+
 os-name@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/os-name/-/os-name-3.1.0.tgz#dec19d966296e1cd62d701a5a66ee1ddeae70801"
@@ -18616,6 +19361,11 @@ p-cancelable@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-1.1.0.tgz#d078d15a3af409220c886f1d9a0ca2e441ab26cc"
   integrity sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==
 
+p-defer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
+  integrity sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=
+
 p-defer@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-3.0.0.tgz#d1dceb4ee9b2b604b1d94ffec83760175d4e6f83"
@@ -18636,6 +19386,11 @@ p-finally@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-2.0.1.tgz#bd6fcaa9c559a096b680806f4d657b3f0f240561"
   integrity sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==
 
+p-is-promise@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-2.1.0.tgz#918cebaea248a62cf7ffab8e3bca8c5f882fc42e"
+  integrity sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==
+
 p-limit@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
@@ -19815,6 +20570,16 @@ pretty-format@^26.2.0:
     ansi-styles "^4.0.0"
     react-is "^16.12.0"
 
+pretty-format@^26.4.0:
+  version "26.4.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.4.0.tgz#c08073f531429e9e5024049446f42ecc9f933a3b"
+  integrity sha512-mEEwwpCseqrUtuMbrJG4b824877pM5xald3AkilJ47Po2YLr97/siejYQHqj2oDQBeJNbu+Q0qUuekJ8F0NAPg==
+  dependencies:
+    "@jest/types" "^26.3.0"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^16.12.0"
+
 pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
@@ -19884,6 +20649,21 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
+promise-polyfill@7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-7.1.0.tgz#4d749485b44577c14137591c6f36e5d7e2dd3378"
+  integrity sha512-P6NJ2wU/8fac44ENORsuqT8TiolKGB2u0fEClPtXezn7w5cmLIjM/7mhPlTebke2EPr6tmqZbXvnX0TxwykGrg==
+
+promise-polyfill@8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.0.0.tgz#b47c7fc74052cc5b2132b703cca144f1a5eb56ef"
+  integrity sha512-QGmPnw2hDEaRS6freHynJ7nfS1nDg0/P0c/CGglA43utoJjYQMiY9ojEpK0HaJ4wbUztdmwqQRlEfGWdsEQ5uQ==
+
+promise-polyfill@8.1.3:
+  version "8.1.3"
+  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.1.3.tgz#8c99b3cf53f3a91c68226ffde7bde81d7f904116"
+  integrity sha512-MG5r82wBzh7pSKDRa9y+vllNHz3e3d4CNj1PQE4BQYxLme0gKYYBm9YENq+UkEikyZ0XbiGWxYlVw3Rl9O/U8g==
+
 promise-retry@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/promise-retry/-/promise-retry-1.1.1.tgz#6739e968e3051da20ce6497fb2b50f6911df3d6d"
@@ -20374,6 +21154,28 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-aplayer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-aplayer/-/react-aplayer-1.0.0.tgz#ff8bae803c01d479126b072980783242294fae94"
+  integrity sha512-jGoNhjT8cEieakK5fwXVn2J849RAa4JAx+subEtrAr/34DWpEF8KZohedceyAzsJygSmBWVjX3plNoOMBbPlhA==
+  dependencies:
+    aplayer "^1.10.0"
+    prop-types "^15.6.1"
+    react "^16.2.0"
+
+react-beautiful-dnd@^12.0.0:
+  version "12.2.0"
+  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-12.2.0.tgz#e5f6222f9e7934c6ed4ee09024547f9e353ae423"
+  integrity sha512-s5UrOXNDgeEC+sx65IgbeFlqKKgK3c0UfbrJLWufP34WBheyu5kJ741DtJbsSgPKyNLkqfswpMYr0P8lRj42cA==
+  dependencies:
+    "@babel/runtime-corejs2" "^7.6.3"
+    css-box-model "^1.2.0"
+    memoize-one "^5.1.1"
+    raf-schd "^4.0.2"
+    react-redux "^7.1.1"
+    redux "^4.0.4"
+    use-memo-one "^1.1.1"
+
 react-beautiful-dnd@^13.0.0:
   version "13.0.0"
   resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.0.0.tgz#f70cc8ff82b84bc718f8af157c9f95757a6c3b40"
@@ -20414,6 +21216,16 @@ react-color@^2.17.0:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
+react-compound-slider@^2.4.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/react-compound-slider/-/react-compound-slider-2.5.0.tgz#99771a3397f4ab00aa2a37f8410da87e6ca2449b"
+  integrity sha512-T84FtSI0bkQPmH5GaaHbL+2McOyIR6M5sqS80dqw/bHc5r2UKLYY64BWTbsL+XO0jlx7REuJJnZUBqo4eSRl7g==
+  dependencies:
+    "@babel/runtime" "^7.7.7"
+    d3-array "^1.2.4"
+    prop-types "^15.7.2"
+    warning "^3.0.0"
+
 react-copy-to-clipboard@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz#d82a437e081e68dfca3761fbd57dbf2abdda1316"
@@ -20477,6 +21289,15 @@ react-dom@^16.13.1, react-dom@^16.8.3:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
+react-dplayer@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/react-dplayer/-/react-dplayer-0.2.3.tgz#45d46ef256df4e69f642a900e8f607c98cb1b8cf"
+  integrity sha512-CcZCeolaGqxfiKF+Fnb8sUYt2gauxXpivZkr3X0Um9l5c/qMsZ2K0fQEV5nGBdTWMQEz2dh01c9vHk5pN3klGg==
+  dependencies:
+    classnames "^2.2.6"
+    dplayer "^1.24.0"
+    prop-types "^15.6.2"
+
 react-draggable@^4.0.3:
   version "4.4.3"
   resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.3.tgz#0727f2cae5813e36b0e4962bf11b2f9ef2b406f3"
@@ -20486,9 +21307,9 @@ react-draggable@^4.0.3:
     prop-types "^15.6.0"
 
 react-dropzone@^11.0.2:
-  version "11.0.2"
-  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.0.2.tgz#1a4084f520c2eafbeb24026760b3ee8f3759cfd3"
-  integrity sha512-/Wde9Il1aJ1FtWllg3N2taIeJh4aftx6UGUG8R1TmLnZit2RnDcEjcKwEEbKwgLXTTh8QQpiZWQJq45jTy1jCA==
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.0.3.tgz#59c396a1482454fa78466f8565336f40ce7f7c84"
+  integrity sha512-+MoMOoKZfkZ9i1+qEFl2ZU29AB/c9K2bFxyACqGynguJunmqO+k2PJ2AcuiH51xVNl9R7q/x5QdBaIWb6RtoSw==
   dependencies:
     attr-accept "^2.0.0"
     file-selector "^0.1.12"
@@ -20592,6 +21413,18 @@ react-markdown@^4.0.6, react-markdown@^4.3.1:
     unist-util-visit "^1.3.0"
     xtend "^4.0.1"
 
+react-moment@^0.9.6:
+  version "0.9.7"
+  resolved "https://registry.yarnpkg.com/react-moment/-/react-moment-0.9.7.tgz#ca570466595b1aa4f7619e62da18b3bb2de8b6f3"
+  integrity sha512-ifzUrUGF6KRsUN2pRG5k56kO0mJBr8kRkWb0wNvtFIsBIxOuPxhUpL1YlXwpbQCbHq23hUu6A0VEk64HsFxk9g==
+
+react-number-format@^4.3.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-4.4.1.tgz#d5614dd25edfc21ed48b97356213440081437a94"
+  integrity sha512-ZGFMXZ0U7DcmQ3bSZY3FULOA1mfqreT9NIMYZNoa/ouiSgiTQiYA95Uj2KN8ge6BRr+ghA5vraozqWqsHZQw3Q==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-popper-tooltip@^2.8.3:
   version "2.11.1"
   resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-2.11.1.tgz#3c4bdfd8bc10d1c2b9a162e859bab8958f5b2644"
@@ -20686,6 +21519,11 @@ react-select@^3.0.8:
     react-input-autosize "^2.2.2"
     react-transition-group "^4.3.0"
 
+react-semantic-ui-range@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/react-semantic-ui-range/-/react-semantic-ui-range-0.7.0.tgz#54054eaddfe6e45b21863ef02f62022338db66fb"
+  integrity sha512-1Y0GakHM+9gvEpPDbzRFvwHsmPtTRH0lLEAx2Ho2rhH9q7S+goTjgHlEUXlvXS/WbBtwVDqfpzXSj+JO8p0nmQ==
+
 react-sizeme@^2.6.7:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.6.12.tgz#ed207be5476f4a85bf364e92042520499455453e"
@@ -20742,7 +21580,7 @@ react@^16.12.0:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
-react@^16.13.1, react@^16.8.3:
+react@^16.13.1, react@^16.2.0, react@^16.8.3:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
   integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
@@ -22029,16 +22867,16 @@ semver@7.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
+semver@7.x, semver@^7.2.1, semver@^7.3.2:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
+  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
+
 semver@^6.0.0, semver@^6.1.0, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.2.1, semver@^7.3.2:
-  version "7.3.2"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
-  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
-
 semver@~5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
@@ -22259,6 +23097,11 @@ side-channel@^1.0.2:
     es-abstract "^1.17.0-next.1"
     object-inspect "^1.7.0"
 
+sigmund@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
+  integrity sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -22399,6 +23242,11 @@ smoothscroll-polyfill@^0.4.3:
   resolved "https://registry.yarnpkg.com/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz#3a259131dc6930e6ca80003e1cb03b603b69abf8"
   integrity sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==
 
+smoothscroll@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/smoothscroll/-/smoothscroll-0.4.0.tgz#40e507b46461408ba1b787d0081e1e883c4124a5"
+  integrity sha512-sggQ3U2Un38b3+q/j1P4Y4fCboCtoUIaBYoge+Lb6Xg1H8RTIif/hugVr+ErMtIDpvBbhQfTjtiTeYAfbw1ZGQ==
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -23911,7 +24759,7 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
-timers-ext@^0.1.5:
+timers-ext@^0.1.5, timers-ext@^0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/timers-ext/-/timers-ext-0.1.7.tgz#6f57ad8578e07a3fb9f91d9387d65647555e25c6"
   integrity sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ==
@@ -24213,6 +25061,23 @@ ts-dedent@^1.1.0:
   resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-1.1.1.tgz#68fad040d7dbd53a90f545b450702340e17d18f3"
   integrity sha512-UGTRZu1evMw4uTPyYF66/KFd22XiU+jMaIuHrkIHQ2GivAXVlLV0v/vHrpOuTRf9BmpNHi/SO7Vd0rLu0y57jg==
 
+ts-jest@^26.2.0:
+  version "26.2.0"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-26.2.0.tgz#7ec22faceb05ee1467fdb5265d1b33c27441f163"
+  integrity sha512-9+y2qwzXdAImgLSYLXAb/Rhq9+K4rbt0417b8ai987V60g2uoNWBBmMkYgutI7D8Zhu+IbCSHbBtrHxB9d7xyA==
+  dependencies:
+    "@types/jest" "26.x"
+    bs-logger "0.x"
+    buffer-from "1.x"
+    fast-json-stable-stringify "2.x"
+    jest-util "26.x"
+    json5 "2.x"
+    lodash.memoize "4.x"
+    make-error "1.x"
+    mkdirp "1.x"
+    semver "7.x"
+    yargs-parser "18.x"
+
 ts-log@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/ts-log/-/ts-log-2.1.4.tgz#063c5ad1cbab5d49d258d18015963489fb6fb59a"
@@ -24245,7 +25110,16 @@ ts-pnp@^1.1.2:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
-tsconfig-paths@^3.9.0:
+tsconfig-paths-webpack-plugin@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-3.3.0.tgz#a7461723c20623ca9148621a5ce36532682ad2ff"
+  integrity sha512-MpQeZpwPY4gYASCUjY4yt2Zj8yv86O8f++3Ai4o0yI0fUC6G1syvnL9VuY71PBgimRYDQU47f12BEmJq9wRaSw==
+  dependencies:
+    chalk "^2.3.0"
+    enhanced-resolve "^4.0.0"
+    tsconfig-paths "^3.4.0"
+
+tsconfig-paths@^3.4.0, tsconfig-paths@^3.9.0:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz#098547a6c4448807e8fcb8eae081064ee9a3c90b"
   integrity sha512-dRcuzokWhajtZWkQsDVKbWyY+jgcLC5sqJhg2PSgf4ZkH2aHPvaOY8YWGhmjb68b5qqTfasSsDO9k7RUiEmZAw==
@@ -24419,6 +25293,14 @@ typedoc@^0.17.8:
     shelljs "^0.8.4"
     typedoc-default-themes "^0.10.2"
 
+typescript-formatter@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/typescript-formatter/-/typescript-formatter-7.2.2.tgz#a147181839b7bb09c2377b072f20f6336547c00a"
+  integrity sha512-V7vfI9XArVhriOTYHPzMU2WUnm5IMdu9X/CPxs8mIMGxmTBFpDABlbkBka64PZJ9/xgQeRpK8KzzAG4MPzxBDQ==
+  dependencies:
+    commandpost "^1.0.0"
+    editorconfig "^0.15.0"
+
 typescript@^3.0.3, typescript@^3.7.2, typescript@^3.7.5, typescript@^3.8.3, typescript@^3.9.5, typescript@^3.9.6, typescript@^3.9.7:
   version "3.9.7"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
@@ -24982,21 +25864,21 @@ uuid@^7.0.3:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
   integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
 
-uuid@^8.2.0:
+uuid@^8.2.0, uuid@^8.3.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.0.tgz#ab738085ca22dc9a8c92725e459b1d507df5d6ea"
   integrity sha512-fX6Z5o4m6XsXBdli9g7DtWgAx+osMsRRZFKma1mIUsLCz6vRvv+pz5VNbyu9UEDzpMWulZfvpgb/cmDXVulYFQ==
 
+v8-compile-cache@^2.0.0, v8-compile-cache@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz#54bc3cdd43317bca91e35dcaf305b1a7237de745"
+  integrity sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==
+
 v8-compile-cache@^2.0.3:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
   integrity sha512-usZBT3PW+LOjM25wbqIlZwPeJV+3OSz3M1k1Ws8snlW39dZyYL9lOGC5FgPVHfk0jKmjiDV8Z0mIbVQPiwFs7g==
 
-v8-compile-cache@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz#54bc3cdd43317bca91e35dcaf305b1a7237de745"
-  integrity sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==
-
 v8-to-istanbul@^4.1.3:
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-4.1.4.tgz#b97936f21c0e2d9996d4985e5c5156e9d4e49cd6"
@@ -25006,6 +25888,15 @@ v8-to-istanbul@^4.1.3:
     convert-source-map "^1.6.0"
     source-map "^0.7.3"
 
+v8-to-istanbul@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-5.0.1.tgz#0608f5b49a481458625edb058488607f25498ba5"
+  integrity sha512-mbDNjuDajqYe3TXFk5qxcQy8L1msXNE37WTlLoqqpBfRsimbNcrlhQlDPntmECEcUvdC+AQ8CyMMf6EUx1r74Q==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
+    source-map "^0.7.3"
+
 validate-npm-package-license@^3.0.1, validate-npm-package-license@^3.0.3:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
@@ -25308,6 +26199,13 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=
+  dependencies:
+    loose-envify "^1.0.0"
+
 warning@^4.0.2, warning@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
@@ -25378,6 +26276,23 @@ webpack-chain@^6.0.0:
     deepmerge "^1.5.2"
     javascript-stringify "^2.0.1"
 
+webpack-cli@3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.0.4.tgz#55d6ad2cdd608de8c0f757dde5bc4bf5bd2dec68"
+  integrity sha512-r5R0hMck4GxUS6a3TXClwi1KhQfnHZRtIfXqsSytQZG4kawKMhTtd5//uNZGoGks/h61Zv5jMnR6jwx15Qf8dA==
+  dependencies:
+    chalk "^2.4.1"
+    cross-spawn "^6.0.5"
+    enhanced-resolve "^4.0.0"
+    global-modules-path "^2.1.0"
+    import-local "^1.0.0"
+    inquirer "^6.0.0"
+    interpret "^1.1.0"
+    loader-utils "^1.1.0"
+    supports-color "^5.4.0"
+    v8-compile-cache "^2.0.0"
+    yargs "^11.1.0"
+
 webpack-cli@^3.3.12:
   version "3.3.12"
   resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.3.12.tgz#94e9ada081453cd0aa609c99e500012fd3ad2d4a"
@@ -25960,6 +26875,14 @@ yapool@^1.0.0:
   resolved "https://registry.yarnpkg.com/yapool/-/yapool-1.0.0.tgz#f693f29a315b50d9a9da2646a7a6645c96985b6a"
   integrity sha1-9pPymjFbUNmp2iZGp6ZkXJaYW2o=
 
+yargs-parser@18.x, yargs-parser@^18.1.2, yargs-parser@^18.1.3:
+  version "18.1.3"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
+  integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
 yargs-parser@^10.0.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8"
@@ -25991,14 +26914,6 @@ yargs-parser@^15.0.0:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^18.1.2, yargs-parser@^18.1.3:
-  version "18.1.3"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
-  integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
 yargs-parser@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-8.1.0.tgz#f1376a33b6629a5d063782944da732631e966950"
@@ -26006,6 +26921,13 @@ yargs-parser@^8.1.0:
   dependencies:
     camelcase "^4.1.0"
 
+yargs-parser@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-9.0.2.tgz#9ccf6a43460fe4ed40a9bb68f48d43b8a68cc077"
+  integrity sha1-nM9qQ0YP5O1Aqbto9I1DuKaMwHc=
+  dependencies:
+    camelcase "^4.1.0"
+
 yargs@^10.0.3:
   version "10.1.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-10.1.2.tgz#454d074c2b16a51a43e2fb7807e4f9de69ccb5c5"
@@ -26024,6 +26946,24 @@ yargs@^10.0.3:
     y18n "^3.2.1"
     yargs-parser "^8.1.0"
 
+yargs@^11.1.0:
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.1.1.tgz#5052efe3446a4df5ed669c995886cc0f13702766"
+  integrity sha512-PRU7gJrJaXv3q3yQZ/+/X6KBswZiaQ+zOmdprZcouPYtQgvNU35i+68M4b1ZHLZtYFT5QObFLV+ZkmJYcwKdiw==
+  dependencies:
+    cliui "^4.0.0"
+    decamelize "^1.1.1"
+    find-up "^2.1.0"
+    get-caller-file "^1.0.1"
+    os-locale "^3.1.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^9.0.2"
+
 yargs@^13.2.2, yargs@^13.3.2:
   version "13.3.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"