Use @babel 7 (#52)

* Use @babel 7 * Use @babel 7 * Use custom webpack config * Minify input css * Remove @flow header form webpack.config * Webpack config re-usable * Split with vendor/main bundles * Use hash for main entry, specify chunkHash * Import base postcss config * Hashing uses blake2 * Align number formats * Use contenthash fro extracted css * Format number directly * Split runtime (better caching)
2018-05-17 14:51:41 +02:00 · 2018-05-17 14:51:41 +02:00 · 6753dc0ad2
commit 6753dc0ad2
parent 7c3a2e9d37
67 changed files with 2894 additions and 3241 deletions
--- a/.babelrc
+++ b/.babelrc
@ -1,3 +0,0 @@
-{
-  "extends": "@polkadot/dev-react/config/babel"
-}
--- a/README.md
+++ b/README.md
@ -19,12 +19,14 @@ The repo is split into a number of packages, each representing an application. T

 - [apps](packages/apps/) This is the main entry point. It handles the selection sidebar and routing to the specific application being displayed.
 - [app-accounts](packages/app-accounts/) A basic account management app.
+- [app-addresses](packages/app-addresses/) A basic address management app.
 - [app-explorer](packages/app-explorer/) A simple block explorer. It only shows the most recent blocks, updating as they become available.
 - [app-extrinsics](packages/app-extrinsics/) Submission of extrinsics to a node.
 - [app-storage](packages/app-storage/) A simple node storage query application. Multiple queries can be queued and updates as new values become available.
+- [app-toolbox](packages/app-toolbox/) Utilities to manage data.
 - [app-vanitygen](packages/app-vanitygen/) A toy that allows you to generate vanity addresses. 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)

 In addition the following libraries are also included in the repo. These are to be moved to the [@polkadot/ui](https://github.com/polkadot-js/ui/) repository once it reaches a base level of stability and usability. (At this point with the framework being tested on the apps above, it makes development easier having it close)

- [ui-react-app](packages/ui-keyring/) A browser-specific wrapper around the base [@polkadot/util-keyring](https://github.com/polkadot-js/util/) libary.
+- [ui-keyring](packages/ui-keyring/) A browser-specific wrapper around the base [@polkadot/util-keyring](https://github.com/polkadot-js/util/) libary.
 - [ui-react-app](packages/ui-react-app/) A reactive (using RxJS) application framework with a number of useful shared components.
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,3 @@
+module.exports = {
+  extends: '@polkadot/dev-react/config/babel'
+};
--- a/lerna.json
+++ b/lerna.json
@ -10,5 +10,5 @@
  "packages": [
    "packages/*"
  ],
-  "version": "0.5.2"
+  "version": "0.6.0"
 }
--- a/package.json
+++ b/package.json
@ -6,31 +6,16 @@
    "packages/*"
  ],
  "scripts": {
-    "build": "polkadot-dev-build-babel && yarn run build:apps",
-    "build:apps": "cd packages/apps && react-scripts build",
+    "build": "polkadot-dev-build-babel",
    "check": "eslint packages && flow check",
    "clean": "polkadot-dev-clean-build",
    "deploy:ghpages": "gh-pages -d packages/apps/build",
    "vanitygen": "polkadot-dev-build-babel && node packages/app-vanitygen/build/generator/cli.js",
-    "start": "cd packages/apps && react-scripts start",
+    "start": "cd packages/apps && webpack-serve --config webpack.config.js --port 3000",
    "test": "echo 'no tests executed'"
  },
  "devDependencies": {
-    "@polkadot/dev-react": "^0.18.3",
-    "gh-pages": "^1.1.0",
-    "react-scripts": "2.0.0-next.66cc7a90"
-  },
-  "browserslist": {
-    "development": [
-      "last 2 chrome versions",
-      "last 2 firefox versions",
-      "last 2 edge versions"
-    ],
-    "production": [
-      ">1%",
-      "last 4 versions",
-      "Firefox ESR",
-      "not ie < 11"
-    ]
+    "@polkadot/dev-react": "^0.19.9",
+    "gh-pages": "^1.1.0"
  }
 }
--- a/packages/app-accounts/package.json
+++ b/packages/app-accounts/package.json
@ -1,6 +1,6 @@
 {
  "name": "@polkadot/app-accounts",
-  "version": "0.5.2",
+  "version": "0.6.0",
  "main": "index.js",
  "repository": "https://github.com/polkadot-js/apps.git",
  "author": "Jaco Greeff <jacogr@gmail.com>",
@ -10,7 +10,8 @@
    "check": "stylelint 'src/**/*.css' && eslint src && flow check",
    "test": "jest --coverage"
  },
-  "devDependencies": {
-    "@polkadot/ui-app": "^0.5.2"
+  "dependencies": {
+    "@babel/runtime": "^7.0.0-beta.47",
+    "@polkadot/ui-app": "^0.6.0"
  }
 }
--- a/packages/app-accounts/src/Address.js
+++ b/packages/app-accounts/src/Address.js
@ -7,8 +7,8 @@ import type { BareProps } from '@polkadot/ui-app/types';

 import React from 'react';

-import CopyButton from '@polkadot/ui-app/src/CopyButton';
-import classes from '@polkadot/ui-app/src/util/classes';
+import CopyButton from '@polkadot/ui-app/CopyButton';
+import classes from '@polkadot/ui-app/util/classes';
 import IdentityIcon from '@polkadot/ui-react/IdentityIcon';
 import Balance from '@polkadot/ui-react-rx/Balance';
 import Nonce from '@polkadot/ui-react-rx/Nonce';
--- a/packages/app-accounts/src/Creator.js
+++ b/packages/app-accounts/src/Creator.js
@ -7,11 +7,11 @@ import type { I18nProps } from '@polkadot/ui-app/types';

 import React from 'react';

-import Button from '@polkadot/ui-app/src/Button';
-import Input from '@polkadot/ui-app/src/Input';
-import Password from '@polkadot/ui-app/src/Password';
-import classes from '@polkadot/ui-app/src/util/classes';
-import keyring from '@polkadot/ui-keyring/src';
+import Button from '@polkadot/ui-app/Button';
+import Input from '@polkadot/ui-app/Input';
+import Password from '@polkadot/ui-app/Password';
+import classes from '@polkadot/ui-app/util/classes';
+import keyring from '@polkadot/ui-keyring';
 import isHex from '@polkadot/util/is/hex';
 import hexToU8a from '@polkadot/util/hex/toU8a';
 import u8aFromString from '@polkadot/util/u8a/fromString';
--- a/packages/app-accounts/src/Editor.js
+++ b/packages/app-accounts/src/Editor.js
@ -8,11 +8,11 @@ import type { I18nProps } from '@polkadot/ui-app/types';

 import React from 'react';

-import Button from '@polkadot/ui-app/src/Button';
-import Input from '@polkadot/ui-app/src/Input';
-import InputAddress from '@polkadot/ui-app/src/InputAddress';
-import classes from '@polkadot/ui-app/src/util/classes';
-import keyring from '@polkadot/ui-keyring/src';
+import Button from '@polkadot/ui-app/Button';
+import Input from '@polkadot/ui-app/Input';
+import InputAddress from '@polkadot/ui-app/InputAddress';
+import classes from '@polkadot/ui-app/util/classes';
+import keyring from '@polkadot/ui-keyring';

 import Address from './Address';
 import translate from './translate';
--- a/packages/app-accounts/src/index.js
+++ b/packages/app-accounts/src/index.js
@ -9,8 +9,8 @@ import './index.css';

 import React from 'react';

-import Button from '@polkadot/ui-app/src/Button';
-import classes from '@polkadot/ui-app/src/util/classes';
+import Button from '@polkadot/ui-app/Button';
+import classes from '@polkadot/ui-app/util/classes';

 import Creator from './Creator';
 import Editor from './Editor';
--- a/packages/app-addresses/package.json
+++ b/packages/app-addresses/package.json
@ -1,6 +1,6 @@
 {
  "name": "@polkadot/app-addresses",
-  "version": "0.5.2",
+  "version": "0.6.0",
  "main": "index.js",
  "repository": "https://github.com/polkadot-js/apps.git",
  "author": "Jaco Greeff <jacogr@gmail.com>",
@ -10,8 +10,9 @@
    "check": "stylelint 'src/**/*.css' && eslint src && flow check",
    "test": "jest --coverage"
  },
-  "devDependencies": {
-    "@polkadot/app-accounts": "^0.5.2",
-    "@polkadot/ui-app": "^0.5.2"
+  "dependencies": {
+    "@babel/runtime": "^7.0.0-beta.47",
+    "@polkadot/app-accounts": "^0.6.0",
+    "@polkadot/ui-app": "^0.6.0"
  }
 }
--- a/packages/app-addresses/src/Creator.js
+++ b/packages/app-addresses/src/Creator.js
@ -7,14 +7,14 @@ import type { I18nProps } from '@polkadot/ui-app/types';

 import React from 'react';

-import Button from '@polkadot/ui-app/src/Button';
-import Input from '@polkadot/ui-app/src/Input';
-import classes from '@polkadot/ui-app/src/util/classes';
-import keyring from '@polkadot/ui-keyring/src';
+import Button from '@polkadot/ui-app/Button';
+import Input from '@polkadot/ui-app/Input';
+import classes from '@polkadot/ui-app/util/classes';
+import keyring from '@polkadot/ui-keyring';
 import addressDecode from '@polkadot/util-keyring/address/decode';
 import addressEncode from '@polkadot/util-keyring/address/encode';

-import Address from '@polkadot/app-accounts/src/Address';
+import Address from '@polkadot/app-accounts/Address';
 import translate from './translate';

 type Props = I18nProps & {
--- a/packages/app-addresses/src/Editor.js
+++ b/packages/app-addresses/src/Editor.js
@ -8,13 +8,13 @@ import type { I18nProps } from '@polkadot/ui-app/types';

 import React from 'react';

-import Button from '@polkadot/ui-app/src/Button';
-import Input from '@polkadot/ui-app/src/Input';
-import InputAddress from '@polkadot/ui-app/src/InputAddress';
-import classes from '@polkadot/ui-app/src/util/classes';
-import keyring from '@polkadot/ui-keyring/src';
+import Button from '@polkadot/ui-app/Button';
+import Input from '@polkadot/ui-app/Input';
+import InputAddress from '@polkadot/ui-app/InputAddress';
+import classes from '@polkadot/ui-app/util/classes';
+import keyring from '@polkadot/ui-keyring';

-import Address from '@polkadot/app-accounts/src/Address';
+import Address from '@polkadot/app-accounts/Address';
 import translate from './translate';

 type Props = I18nProps & {
--- a/packages/app-addresses/src/index.js
+++ b/packages/app-addresses/src/index.js
@ -9,8 +9,8 @@ import './index.css';

 import React from 'react';

-import Button from '@polkadot/ui-app/src/Button';
-import classes from '@polkadot/ui-app/src/util/classes';
+import Button from '@polkadot/ui-app/Button';
+import classes from '@polkadot/ui-app/util/classes';

 import Creator from './Creator';
 import Editor from './Editor';
--- a/packages/app-explorer/package.json
+++ b/packages/app-explorer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@polkadot/app-explorer",
-  "version": "0.5.2",
+  "version": "0.6.0",
  "main": "index.js",
  "repository": "https://github.com/polkadot-js/apps.git",
  "author": "Jaco Greeff <jacogr@gmail.com>",
@ -10,11 +10,12 @@
    "check": "stylelint 'src/**/*.css' && eslint src && flow check",
    "test": "jest --coverage"
  },
-  "devDependencies": {
-    "@polkadot/primitives": "^0.13.10",
-    "@polkadot/primitives-codec": "^0.13.10",
-    "@polkadot/primitives-json": "^0.13.10",
-    "@polkadot/ui-app": "^0.5.2",
-    "@polkadot/util-crypto": "^0.19.7"
+  "dependencies": {
+    "@babel/runtime": "^7.0.0-beta.47",
+    "@polkadot/primitives": "^0.14.3",
+    "@polkadot/primitives-codec": "^0.14.3",
+    "@polkadot/primitives-json": "^0.14.3",
+    "@polkadot/ui-app": "^0.6.0",
+    "@polkadot/util-crypto": "^0.20.5"
  }
 }
--- a/packages/app-explorer/src/BlockHeader/index.js
+++ b/packages/app-explorer/src/BlockHeader/index.js
@ -11,17 +11,17 @@ import './BlockHeader.css';
 import React from 'react';

 import headerHash from '@polkadot/primitives-codec/header/hash';
-import classes from '@polkadot/ui-app/src/util/classes';
+import classes from '@polkadot/ui-app/util/classes';
+import numberFormat from '@polkadot/ui-react-rx/util/numberFormat';
 import u8aToHex from '@polkadot/util/u8a/toHex';

 import translate from '../translate';

 type Props = I18nProps & {
-  label?: string,
  value?: Header
 };

-function BlockHeader ({ className, label = '#', value, style }: Props): React$Node {
+function BlockHeader ({ className, value, style }: Props): React$Node {
  if (!value) {
    return null;
  }
@ -35,7 +35,7 @@ function BlockHeader ({ className, label = '#', value, style }: Props): React$No
      style={style}
    >
      <div className='number'>
-        <div>{label}{number.toString()}</div>
+        <div>{numberFormat(number)}</div>
      </div>
      <div className='details'>
        <div className='hash'>
--- a/packages/app-explorer/src/index.js
+++ b/packages/app-explorer/src/index.js
@ -9,7 +9,7 @@ import './index.css';

 import React from 'react';

-import classes from '@polkadot/ui-app/src/util/classes';
+import classes from '@polkadot/ui-app/util/classes';
 import BestNumber from '@polkadot/ui-react-rx/BestNumber';

 import BestHash from './BestHash';
--- a/packages/app-extrinsics/package.json
+++ b/packages/app-extrinsics/package.json
@ -1,6 +1,6 @@
 {
  "name": "@polkadot/app-extrinsics",
-  "version": "0.5.2",
+  "version": "0.6.0",
  "main": "index.js",
  "repository": "https://github.com/polkadot-js/apps.git",
  "author": "Jaco Greeff <jacogr@gmail.com>",
@ -10,10 +10,11 @@
    "check": "stylelint 'src/**/*.css' && eslint src && flow check",
    "test": "jest --coverage"
  },
-  "devDependencies": {
-    "@polkadot/extrinsics": "^0.13.10",
-    "@polkadot/extrinsics-codec": "^0.13.10",
-    "@polkadot/ui-app": "^0.5.2",
+  "dependencies": {
+    "@babel/runtime": "^7.0.0-beta.47",
+    "@polkadot/extrinsics": "^0.14.3",
+    "@polkadot/extrinsics-codec": "^0.14.3",
+    "@polkadot/ui-app": "^0.6.0",
    "react-dropzone": "^4.2.9"
  }
 }
--- a/packages/app-extrinsics/src/Account.js
+++ b/packages/app-extrinsics/src/Account.js
@ -8,9 +8,9 @@ import type { I18nProps } from '@polkadot/ui-app/types';

 import React from 'react';

-import InputAddress from '@polkadot/ui-app/src/InputAddress';
-import Labelled from '@polkadot/ui-app/src/Labelled';
-import classes from '@polkadot/ui-app/src/util/classes';
+import InputAddress from '@polkadot/ui-app/InputAddress';
+import Labelled from '@polkadot/ui-app/Labelled';
+import classes from '@polkadot/ui-app/util/classes';
 import Balance from '@polkadot/ui-react-rx/Balance';

 import translate from './translate';
--- a/packages/app-extrinsics/src/Extrinsic.js
+++ b/packages/app-extrinsics/src/Extrinsic.js
@ -11,9 +11,9 @@ import type { EncodedMessage } from './types';
 import React from 'react';

 import encode from '@polkadot/extrinsics-codec/encode/extrinsic';
-import InputExtrinsic from '@polkadot/ui-app/src/InputExtrinsic';
-import Params from '@polkadot/ui-app/src/Params';
-import classes from '@polkadot/ui-app/src/util/classes';
+import InputExtrinsic from '@polkadot/ui-app/InputExtrinsic';
+import Params from '@polkadot/ui-app/Params';
+import classes from '@polkadot/ui-app/util/classes';
 import isUndefined from '@polkadot/util/is/undefined';

 import paramComponents from './Params';
--- a/packages/app-extrinsics/src/Nonce.js
+++ b/packages/app-extrinsics/src/Nonce.js
@ -8,8 +8,8 @@ import type { BareProps } from '@polkadot/ui-app/types';

 import React from 'react';

-import Labelled from '@polkadot/ui-app/src/Labelled';
-import classes from '@polkadot/ui-app/src/util/classes';
+import Labelled from '@polkadot/ui-app/Labelled';
+import classes from '@polkadot/ui-app/util/classes';
 import RxNonce from '@polkadot/ui-react-rx/Nonce';

 type Props = BareProps & {
--- a/packages/app-extrinsics/src/Selection.js
+++ b/packages/app-extrinsics/src/Selection.js
@ -10,8 +10,8 @@ import type { EncodedMessage, QueueTx } from './types';
 import React from 'react';

 import extrinsics from '@polkadot/extrinsics-substrate';
-import Button from '@polkadot/ui-app/src/Button';
-import classes from '@polkadot/ui-app/src/util/classes';
+import Button from '@polkadot/ui-app/Button';
+import classes from '@polkadot/ui-app/util/classes';

 import Account from './Account';
 import Extrinsic from './Extrinsic';
--- a/packages/app-extrinsics/src/Signer/Decoded.js
+++ b/packages/app-extrinsics/src/Signer/Decoded.js
@ -10,7 +10,7 @@ import BN from 'bn.js';
 import React from 'react';
 import { Trans } from 'react-i18next';

-import classes from '@polkadot/ui-app/src/util/classes';
+import classes from '@polkadot/ui-app/util/classes';
 import IdentityIcon from '@polkadot/ui-react/IdentityIcon';
 import u8aToHexShort from '@polkadot/util/u8a/toHexShort';
 import addressEncode from '@polkadot/util-keyring/address/encode';
--- a/packages/app-extrinsics/src/Signer/Unlock.js
+++ b/packages/app-extrinsics/src/Signer/Unlock.js
@ -8,9 +8,9 @@ import type { KeyringPair } from '@polkadot/util-keyring/types';

 import React from 'react';

-import Password from '@polkadot/ui-app/src/Password';
-import classes from '@polkadot/ui-app/src/util/classes';
-import keyring from '@polkadot/ui-keyring/src';
+import Password from '@polkadot/ui-app/Password';
+import classes from '@polkadot/ui-app/util/classes';
+import keyring from '@polkadot/ui-keyring';

 import translate from '../translate';

--- a/packages/app-extrinsics/src/Signer/index.js
+++ b/packages/app-extrinsics/src/Signer/index.js
@ -11,10 +11,10 @@ import './Signer.css';

 import React from 'react';

-import Button from '@polkadot/ui-app/src/Button';
-import Modal from '@polkadot/ui-app/src/Modal';
-import classes from '@polkadot/ui-app/src/util/classes';
-import keyring from '@polkadot/ui-keyring/src';
+import Button from '@polkadot/ui-app/Button';
+import Modal from '@polkadot/ui-app/Modal';
+import classes from '@polkadot/ui-app/util/classes';
+import keyring from '@polkadot/ui-keyring';
 import withApi from '@polkadot/ui-react-rx/with/api';

 import translate from '../translate';
--- a/packages/app-extrinsics/src/Signer/submit.js
+++ b/packages/app-extrinsics/src/Signer/submit.js
@ -7,7 +7,7 @@ import type { RxApiInterface } from '@polkadot/api-rx/types';
 import type { QueueTx } from '../types';

 import encodeCall from '@polkadot/extrinsics-codec/encode/call';
-import keyring from '@polkadot/ui-keyring/src';
+import keyring from '@polkadot/ui-keyring';
 import u8aConcat from '@polkadot/util/u8a/concat';
 import u8aToHex from '@polkadot/util/u8a/toHex';

--- a/packages/app-extrinsics/src/Status.js
+++ b/packages/app-extrinsics/src/Status.js
@ -8,7 +8,7 @@ import type { QueueTx } from './types';

 import React from 'react';

-import classes from '@polkadot/ui-app/src/util/classes';
+import classes from '@polkadot/ui-app/util/classes';

 type Props = BareProps & {
  queue: Array<QueueTx>
--- a/packages/app-extrinsics/src/index.js
+++ b/packages/app-extrinsics/src/index.js
@ -10,7 +10,7 @@ import './index.css';

 import React from 'react';

-import classes from '@polkadot/ui-app/src/util/classes';
+import classes from '@polkadot/ui-app/util/classes';

 import Selection from './Selection';
 import Signer from './Signer';
--- a/packages/app-storage/package.json
+++ b/packages/app-storage/package.json
@ -1,6 +1,6 @@
 {
  "name": "@polkadot/app-storage",
-  "version": "0.5.2",
+  "version": "0.6.0",
  "main": "index.js",
  "repository": "https://github.com/polkadot-js/apps.git",
  "author": "Jaco Greeff <jacogr@gmail.com>",
@ -10,7 +10,8 @@
    "check": "stylelint 'src/**/*.css' && eslint src && flow check",
    "test": "jest --coverage"
  },
-  "devDependencies": {
-    "@polkadot/ui-app": "^0.5.2"
+  "dependencies": {
+    "@babel/runtime": "^7.0.0-beta.47",
+    "@polkadot/ui-app": "^0.6.0"
  }
 }
--- a/packages/app-storage/src/Queries.js
+++ b/packages/app-storage/src/Queries.js
@ -8,7 +8,7 @@ import type { StorageQuery } from './types';

 import React from 'react';

-import classes from '@polkadot/ui-app/src/util/classes';
+import classes from '@polkadot/ui-app/util/classes';

 import translate from './translate';
 import Query from './Query';
--- a/packages/app-storage/src/Query.js
+++ b/packages/app-storage/src/Query.js
@ -8,11 +8,11 @@ import type { StorageQuery } from './types';

 import React from 'react';

-import Button from '@polkadot/ui-app/src/Button';
-import Labelled from '@polkadot/ui-app/src/Labelled';
-import typeToText from '@polkadot/ui-app/src/Params/typeToText';
-import valueToText from '@polkadot/ui-app/src/Params/valueToText';
-import classes from '@polkadot/ui-app/src/util/classes';
+import Button from '@polkadot/ui-app/Button';
+import Labelled from '@polkadot/ui-app/Labelled';
+import typeToText from '@polkadot/ui-app/Params/typeToText';
+import valueToText from '@polkadot/ui-app/Params/valueToText';
+import classes from '@polkadot/ui-app/util/classes';
 import withStorageDiv from '@polkadot/ui-react-rx/with/storageDiv';

 import translate from './translate';
--- a/packages/app-storage/src/Selection.js
+++ b/packages/app-storage/src/Selection.js
@ -11,11 +11,11 @@ import type { StorageQuery } from './types';
 import React from 'react';

 import storage from '@polkadot/storage-substrate/keys';
-import Button from '@polkadot/ui-app/src/Button';
-import InputStorage from '@polkadot/ui-app/src/InputStorage';
-import Labelled from '@polkadot/ui-app/src/Labelled';
-import Params from '@polkadot/ui-app/src/Params';
-import classes from '@polkadot/ui-app/src/util/classes';
+import Button from '@polkadot/ui-app/Button';
+import InputStorage from '@polkadot/ui-app/InputStorage';
+import Labelled from '@polkadot/ui-app/Labelled';
+import Params from '@polkadot/ui-app/Params';
+import classes from '@polkadot/ui-app/util/classes';
 import isUndefined from '@polkadot/util/is/undefined';

 import translate from './translate';
--- a/packages/app-storage/src/index.js
+++ b/packages/app-storage/src/index.js
@ -10,7 +10,7 @@ import './index.css';

 import React from 'react';

-import classes from '@polkadot/ui-app/src/util/classes';
+import classes from '@polkadot/ui-app/util/classes';

 import Queries from './Queries';
 import Selection from './Selection';
--- a/packages/app-toolbox/package.json
+++ b/packages/app-toolbox/package.json
@ -1,6 +1,6 @@
 {
  "name": "@polkadot/app-toolbox",
-  "version": "0.5.2",
+  "version": "0.6.0",
  "main": "index.js",
  "repository": "https://github.com/polkadot-js/apps.git",
  "author": "Jaco Greeff <jacogr@gmail.com>",
@ -10,8 +10,9 @@
    "check": "stylelint 'src/**/*.css' && eslint src && flow check",
    "test": "jest --coverage"
  },
-  "devDependencies": {
-    "@polkadot/ui-app": "^0.5.2",
-    "@polkadot/ui-keyring": "^0.5.2"
+  "dependencies": {
+    "@babel/runtime": "^7.0.0-beta.47",
+    "@polkadot/ui-app": "^0.6.0",
+    "@polkadot/ui-keyring": "^0.6.0"
  }
 }
--- a/packages/app-toolbox/src/Hash.js
+++ b/packages/app-toolbox/src/Hash.js
@ -7,14 +7,14 @@ import type { I18nProps as Props } from '@polkadot/ui-app/types';

 import React from 'react';

-import Input from '@polkadot/ui-app/src/Input';
-import Output from '@polkadot/ui-app/src/Output';
-import Static from '@polkadot/ui-app/src/Static';
-import classes from '@polkadot/ui-app/src/util/classes';
+import Input from '@polkadot/ui-app/Input';
+import Output from '@polkadot/ui-app/Output';
+import Static from '@polkadot/ui-app/Static';
+import classes from '@polkadot/ui-app/util/classes';
 import hexToU8a from '@polkadot/util/hex/toU8a';
 import isHex from '@polkadot/util/is/hex';
 import u8aFromString from '@polkadot/util/u8a/fromString';
-import xxhashAsHex256 from '@polkadot/util-crypto/xxhash/asHex256';
+import blake2AsHex256 from '@polkadot/util-crypto/blake2/asHex256';

 import translate from './translate';

@ -27,7 +27,7 @@ type State = {
 class Hash extends React.PureComponent<Props, State> {
  state: State = {
    data: '',
-    hash: xxhashAsHex256(u8aFromString('')),
+    hash: blake2AsHex256(u8aFromString('')),
    isHexData: false
  };

@ -82,7 +82,7 @@ class Hash extends React.PureComponent<Props, State> {

  onChangeData = (data: string): void => {
    const isHexData = isHex(data);
-    const hash = xxhashAsHex256(
+    const hash = blake2AsHex256(
      isHexData
        ? hexToU8a(data)
        : u8aFromString(data)
--- a/packages/app-toolbox/src/Sign.js
+++ b/packages/app-toolbox/src/Sign.js
@ -8,13 +8,13 @@ import type { KeyringPair } from '@polkadot/util-keyring/types';

 import React from 'react';

-import Button from '@polkadot/ui-app/src/Button';
-import Input from '@polkadot/ui-app/src/Input';
-import InputAddress from '@polkadot/ui-app/src/InputAddress';
-import Output from '@polkadot/ui-app/src/Output';
-import Static from '@polkadot/ui-app/src/Static';
-import classes from '@polkadot/ui-app/src/util/classes';
-import keyring from '@polkadot/ui-keyring/src';
+import Button from '@polkadot/ui-app/Button';
+import Input from '@polkadot/ui-app/Input';
+import InputAddress from '@polkadot/ui-app/InputAddress';
+import Output from '@polkadot/ui-app/Output';
+import Static from '@polkadot/ui-app/Static';
+import classes from '@polkadot/ui-app/util/classes';
+import keyring from '@polkadot/ui-keyring';
 import hexToU8a from '@polkadot/util/hex/toU8a';
 import isHex from '@polkadot/util/is/hex';
 import u8aFromString from '@polkadot/util/u8a/fromString';
--- a/packages/app-toolbox/src/Unlock.js
+++ b/packages/app-toolbox/src/Unlock.js
@ -9,10 +9,10 @@ import type { KeyringPair } from '@polkadot/util-keyring/types';
 import React from 'react';
 import { Trans } from 'react-i18next';

-import Button from '@polkadot/ui-app/src/Button';
-import Modal from '@polkadot/ui-app/src/Modal';
-import Password from '@polkadot/ui-app/src/Password';
-import classes from '@polkadot/ui-app/src/util/classes';
+import Button from '@polkadot/ui-app/Button';
+import Modal from '@polkadot/ui-app/Modal';
+import Password from '@polkadot/ui-app/Password';
+import classes from '@polkadot/ui-app/util/classes';
 import IdentityIcon from '@polkadot/ui-react/IdentityIcon';

 import translate from './translate';
--- a/packages/app-toolbox/src/Verify.js
+++ b/packages/app-toolbox/src/Verify.js
@ -7,12 +7,12 @@ import type { I18nProps as Props } from '@polkadot/ui-app/types';

 import React from 'react';

-import Icon from '@polkadot/ui-app/src/Icon';
-import Input from '@polkadot/ui-app/src/Input';
-import InputAddress from '@polkadot/ui-app/src/InputAddress';
-import Static from '@polkadot/ui-app/src/Static';
-import classes from '@polkadot/ui-app/src/util/classes';
-import keyring from '@polkadot/ui-keyring/src';
+import Icon from '@polkadot/ui-app/Icon';
+import Input from '@polkadot/ui-app/Input';
+import InputAddress from '@polkadot/ui-app/InputAddress';
+import Static from '@polkadot/ui-app/Static';
+import classes from '@polkadot/ui-app/util/classes';
+import keyring from '@polkadot/ui-keyring';
 import hexToU8a from '@polkadot/util/hex/toU8a';
 import isHex from '@polkadot/util/is/hex';
 import u8aFromString from '@polkadot/util/u8a/fromString';
--- a/packages/app-toolbox/src/index.js
+++ b/packages/app-toolbox/src/index.js
@ -9,8 +9,8 @@ import './index.css';

 import React from 'react';

-import Button from '@polkadot/ui-app/src/Button';
-import classes from '@polkadot/ui-app/src/util/classes';
+import Button from '@polkadot/ui-app/Button';
+import classes from '@polkadot/ui-app/util/classes';

 import Hash from './Hash';
 import Sign from './Sign';
--- a/packages/app-vanitygen/package.json
+++ b/packages/app-vanitygen/package.json
@ -1,6 +1,6 @@
 {
  "name": "@polkadot/app-vanitygen",
-  "version": "0.5.2",
+  "version": "0.6.0",
  "main": "index.js",
  "repository": "https://github.com/polkadot-js/apps.git",
  "author": "Jaco Greeff <jacogr@gmail.com>",
@ -10,8 +10,9 @@
    "check": "stylelint 'src/**/*.css' && eslint src && flow check",
    "test": "jest --coverage"
  },
-  "devDependencies": {
-    "@polkadot/ui-app": "^0.5.2",
+  "dependencies": {
+    "@babel/runtime": "^7.0.0-beta.47",
+    "@polkadot/ui-app": "^0.6.0",
    "chalk": "^2.4.1",
    "yargs": "10.1.2"
  },
--- a/packages/app-vanitygen/src/Match.js
+++ b/packages/app-vanitygen/src/Match.js
@ -7,9 +7,9 @@ import type { BareProps } from '@polkadot/ui-app/types';

 import React from 'react';

-import CopyButton from '@polkadot/ui-app/src/CopyButton';
-import Button from '@polkadot/ui-app/src/Button';
-import classes from '@polkadot/ui-app/src/util/classes';
+import CopyButton from '@polkadot/ui-app/CopyButton';
+import Button from '@polkadot/ui-app/Button';
+import classes from '@polkadot/ui-app/util/classes';
 import IdentityIcon from '@polkadot/ui-react/IdentityIcon';
 import u8aToHex from '@polkadot/util/u8a/toHex';

--- a/packages/app-vanitygen/src/index.js
+++ b/packages/app-vanitygen/src/index.js
@ -10,11 +10,11 @@ import './index.css';

 import React from 'react';

-import Button from '@polkadot/ui-app/src/Button';
-import Dropdown from '@polkadot/ui-app/src/Dropdown';
-import Input from '@polkadot/ui-app/src/Input';
-import Static from '@polkadot/ui-app/src/Static';
-import classes from '@polkadot/ui-app/src/util/classes';
+import Button from '@polkadot/ui-app/Button';
+import Dropdown from '@polkadot/ui-app/Dropdown';
+import Input from '@polkadot/ui-app/Input';
+import Static from '@polkadot/ui-app/Static';
+import classes from '@polkadot/ui-app/util/classes';

 import Match from './Match';
 import generator from './generator';
--- a/packages/apps/package.json
+++ b/packages/apps/package.json
@ -1,6 +1,6 @@
 {
  "name": "@polkadot/apps",
-  "version": "0.5.2",
+  "version": "0.6.0",
  "description": "An Apps portal into the Polkadot network",
  "main": "index.js",
  "homepage": ".",
@ -13,14 +13,34 @@
    "start": "react-scripts start",
    "test": "react-scripts test --env=jsdom --coverage"
  },
+  "dependencies": {
+    "@babel/runtime": "^7.0.0-beta.47",
+    "@polkadot/app-accounts": "^0.6.0",
+    "@polkadot/app-addresses": "^0.6.0",
+    "@polkadot/app-explorer": "^0.6.0",
+    "@polkadot/app-extrinsics": "^0.6.0",
+    "@polkadot/app-storage": "^0.6.0",
+    "@polkadot/app-toolbox": "^0.6.0",
+    "@polkadot/app-vanitygen": "^0.6.0",
+    "@polkadot/ui-app": "^0.6.0"
+  },
  "devDependencies": {
-    "@polkadot/app-accounts": "^0.5.2",
-    "@polkadot/app-addresses": "^0.5.2",
-    "@polkadot/app-explorer": "^0.5.2",
-    "@polkadot/app-extrinsics": "^0.5.2",
-    "@polkadot/app-storage": "^0.5.2",
-    "@polkadot/app-toolbox": "^0.5.2",
-    "@polkadot/app-vanitygen": "^0.5.2",
-    "@polkadot/ui-app": "^0.5.2"
+    "@polkadot/dev-react": "^0.19.9",
+    "babel-loader": "^8.0.0-beta.2",
+    "copy-webpack-plugin": "^4.5.1",
+    "css-loader": "^0.28.9",
+    "empty": "^0.10.1",
+    "file-loader": "^1.1.11",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.4.0",
+    "postcss": "^6.0.22",
+    "postcss-clean": "^1.1.0",
+    "postcss-flexbugs-fixes": "^3.3.1",
+    "postcss-loader": "^2.1.5",
+    "postcss-sass": "^0.3.0",
+    "source-map-explorer": "^1.5.0",
+    "style-loader": "^0.19.1",
+    "thread-loader": "^1.1.2",
+    "url-loader": "^1.0.1"
  }
 }
--- a/packages/apps/public/index.html
+++ b/packages/apps/public/index.html
@ -4,8 +4,8 @@
    <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="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="manifest" href="manifest.json">
+    <link rel="shortcut icon" href="favicon.ico">
    <title>Polkadot Apps Portal</title>
  </head>
  <body>
--- a/packages/apps/public/locales/en/portal.json
+++ b/packages/apps/public/locales/en/portal.json
--- a/packages/apps/public/manifest.json
+++ b/packages/apps/public/manifest.json
@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Polkadot Apps",
+  "name": "Apps for interacting with a Polkadot node",
  "icons": [
    {
      "src": "favicon.ico",
@ -8,7 +8,7 @@
      "type": "image/x-icon"
    }
  ],
-  "start_url": "./index.html",
+  "start_url": "index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
--- a/packages/apps/src/App/App.css
+++ b/packages/apps/src/App/App.css
@ -8,7 +8,8 @@
  height: 100%;
 }

-.apps--App-column {
+.apps--App .apps--Content,
+.apps--App .apps--SideBar, {
  display: flex;
  flex-direction: column;
  height: 100%;
--- a/packages/apps/src/App/index.js
+++ b/packages/apps/src/App/index.js
@ -9,7 +9,7 @@ import './App.css';

 import React from 'react';

-import classes from '@polkadot/ui-app/src/util/classes';
+import classes from '@polkadot/ui-app/util/classes';

 import Connecting from '../Connecting';
 import Content from '../Content';
@ -24,8 +24,8 @@ function App ({ className, style }: Props): React$Node {
      className={classes('apps--App', className)}
      style={style}
    >
-      <SideBar className='apps--App-column' />
-      <Content className='apps--App-column' />
+      <SideBar />
+      <Content />
      <Connecting />
    </div>
  );
--- a/packages/apps/src/Connecting/index.js
+++ b/packages/apps/src/Connecting/index.js
@ -9,7 +9,7 @@ import './Connecting.css';

 import React from 'react';

-import classes from '@polkadot/ui-app/src/util/classes';
+import classes from '@polkadot/ui-app/util/classes';
 import withApiCall from '@polkadot/ui-react-rx/with/apiCall';

 import translate from '../translate';
--- a/packages/apps/src/Content/index.js
+++ b/packages/apps/src/Content/index.js
@ -11,7 +11,7 @@ import './Content.css';
 import React from 'react';
 import { withRouter } from 'react-router';

-import classes from '@polkadot/ui-app/src/util/classes';
+import classes from '@polkadot/ui-app/util/classes';

 import routing from '../routing';

--- a/packages/apps/src/NotFound/index.js
+++ b/packages/apps/src/NotFound/index.js
@ -9,7 +9,7 @@ import './NotFound.css';

 import React from 'react';

-import classes from '@polkadot/ui-app/src/util/classes';
+import classes from '@polkadot/ui-app/util/classes';

 import translate from '../translate';

--- a/packages/apps/src/SideBar/Item.js
+++ b/packages/apps/src/SideBar/Item.js
@ -11,8 +11,8 @@ import './Item.css';
 import React from 'react';
 import { NavLink } from 'react-router-dom';

-import Icon from '@polkadot/ui-app/src/Icon';
-import Menu from '@polkadot/ui-app/src/Menu';
+import Icon from '@polkadot/ui-app/Icon';
+import Menu from '@polkadot/ui-app/Menu';

 type Props = I18nProps & Route & {};

--- a/packages/apps/src/SideBar/index.js
+++ b/packages/apps/src/SideBar/index.js
@ -9,9 +9,9 @@ import './SideBar.css';

 import React from 'react';

-import Icon from '@polkadot/ui-app/src/Icon';
-import Menu from '@polkadot/ui-app/src/Menu';
-import classes from '@polkadot/ui-app/src/util/classes';
+import Icon from '@polkadot/ui-app/Icon';
+import Menu from '@polkadot/ui-app/Menu';
+import classes from '@polkadot/ui-app/util/classes';

 import routing from '../routing';
 import translate from '../translate';
--- a/packages/apps/src/index.js
+++ b/packages/apps/src/index.js
@ -3,7 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow

-import createApp from '@polkadot/ui-app/src';
+import createApp from '@polkadot/ui-app';

 import App from './App';

--- a/packages/apps/src/routing/accounts.js
+++ b/packages/apps/src/routing/accounts.js
@ -5,7 +5,7 @@

 import type { Routes } from '../types';

-import Accounts from '@polkadot/app-accounts/src';
+import Accounts from '@polkadot/app-accounts';

 export default ([
  {
--- a/packages/apps/src/routing/addresses.js
+++ b/packages/apps/src/routing/addresses.js
@ -5,7 +5,7 @@

 import type { Routes } from '../types';

-import Addresses from '@polkadot/app-addresses/src';
+import Addresses from '@polkadot/app-addresses';

 export default ([
  {
--- a/packages/apps/src/routing/explorer.js
+++ b/packages/apps/src/routing/explorer.js
@ -5,7 +5,7 @@

 import type { Routes } from '../types';

-import Explorer from '@polkadot/app-explorer/src';
+import Explorer from '@polkadot/app-explorer';

 export default ([
  {
--- a/packages/apps/src/routing/extrinsics.js
+++ b/packages/apps/src/routing/extrinsics.js
@ -5,7 +5,7 @@

 import type { Routes } from '../types';

-import Extrinsics from '@polkadot/app-extrinsics/src';
+import Extrinsics from '@polkadot/app-extrinsics';

 export default ([
  {
--- a/packages/apps/src/routing/storage.js
+++ b/packages/apps/src/routing/storage.js
@ -5,7 +5,7 @@

 import type { Routes } from '../types';

-import Storage from '@polkadot/app-storage/src';
+import Storage from '@polkadot/app-storage';

 export default ([
  {
--- a/packages/apps/src/routing/toolbox.js
+++ b/packages/apps/src/routing/toolbox.js
@ -5,7 +5,7 @@

 import type { Routes } from '../types';

-import Toolbox from '@polkadot/app-toolbox/src';
+import Toolbox from '@polkadot/app-toolbox';

 export default ([
  {
--- a/packages/apps/src/routing/vanitygen.js
+++ b/packages/apps/src/routing/vanitygen.js
@ -5,7 +5,7 @@

 import type { Routes } from '../types';

-import Vanity from '@polkadot/app-vanitygen/src';
+import Vanity from '@polkadot/app-vanitygen';

 export default ([
  {
--- a/packages/apps/webpack.config.js
+++ b/packages/apps/webpack.config.js
@ -0,0 +1,159 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC 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 packages = ['app-accounts', 'app-addresses', 'app-explorer', 'app-extrinsics', 'app-storage', 'app-toolbox', 'app-vanitygen', 'ui-app', 'ui-keyring'];
+
+function createWebpack ({ alias = {}, context, name = 'index' }) {
+  const pkgJson = require(path.join(context, 'package.json'));
+  const ENV = process.env.NODE_ENV || 'development';
+  const isProd = ENV === 'production';
+  const hasPublic = fs.existsSync(path.join(context, 'public'));
+  const plugins = hasPublic
+    ? [new CopyWebpackPlugin([{ from: 'public' }])]
+    : [];
+
+  return {
+    context,
+    devtool: isProd ? 'source-map' : false,
+    entry: `./src/${name}.js`,
+    mode: isProd ? 'production' : 'development',
+    output: {
+      path: path.join(context, 'build'),
+      filename: `[name].[hash:8].js`,
+      chunkFilename: `[name].[chunkhash:8].js`
+    },
+    resolve: {
+      alias
+    },
+    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('postcss-clean')(),
+                  require('postcss-flexbugs-fixes')
+                ]
+              }
+            }
+          ]
+        },
+        {
+          test: /\.css$/,
+          include: /node_modules/,
+          use: [
+            isProd
+              ? MiniCssExtractPlugin.loader
+              : require.resolve('style-loader'),
+            require.resolve('css-loader')
+          ]
+        },
+        {
+          test: /\.js$/,
+          exclude: /(node_modules)/,
+          use: [
+            require.resolve('thread-loader'),
+            {
+              loader: require.resolve('babel-loader'),
+              options: require('@polkadot/dev-react/config/babel')
+            }
+          ]
+        },
+        {
+          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: {
+      dgram: 'empty',
+      fs: 'empty',
+      net: 'empty',
+      tls: 'empty',
+      child_process: 'empty'
+    },
+    optimization: {
+      runtimeChunk: 'single',
+      splitChunks: {
+        cacheGroups: {
+          vendor: {
+            chunks: 'initial',
+            enforce: true,
+            name: 'vendor',
+            test: /node_modules\/(bn\.js|i18next|lodash|react|semantic-ui)/
+          }
+        }
+      }
+    },
+    performance: {
+      hints: false
+    },
+    plugins: plugins.concat([
+      new webpack.DefinePlugin({
+        'process.env': {
+          NODE_ENV: JSON.stringify(ENV),
+          VERSION: JSON.stringify(pkgJson.version)
+        }
+      }),
+      new HtmlWebpackPlugin({
+        inject: true,
+        template: path.join(context, `${hasPublic ? 'public/' : ''}${name}.html`)
+      }),
+      new webpack.optimize.SplitChunksPlugin(),
+      new MiniCssExtractPlugin({
+        filename: `[name].[contenthash:8].css`
+      })
+    ])
+  };
+}
+
+module.exports = createWebpack({
+  context: __dirname,
+  alias: packages.reduce((alias, pkg) => {
+    alias[`@polkadot/${pkg}`] = path.resolve(__dirname, `../${pkg}/src`);
+
+    return alias;
+  }, {})
+});
--- a/packages/ui-app/package.json
+++ b/packages/ui-app/package.json
@ -1,6 +1,6 @@
 {
  "name": "@polkadot/ui-app",
-  "version": "0.5.2",
+  "version": "0.6.0",
  "main": "index.js",
  "repository": "https://github.com/polkadot-js/apps.git",
  "author": "Jaco Greeff <jacogr@gmail.com>",
@ -11,14 +11,15 @@
    "test": "jest --coverage"
  },
  "dependencies": {
-    "@polkadot/extrinsics-substrate": "^0.13.10",
-    "@polkadot/params": "^0.13.10",
-    "@polkadot/primitives": "^0.13.10",
-    "@polkadot/storage-substrate": "^0.13.10",
-    "@polkadot/ui-keyring": "^0.5.2",
-    "@polkadot/ui-react": "^0.11.10",
-    "@polkadot/ui-react-rx": "^0.11.10",
-    "@polkadot/util": "^0.19.7",
+    "@babel/runtime": "^7.0.0-beta.47",
+    "@polkadot/extrinsics-substrate": "^0.14.3",
+    "@polkadot/params": "^0.14.3",
+    "@polkadot/primitives": "^0.14.3",
+    "@polkadot/storage-substrate": "^0.14.3",
+    "@polkadot/ui-keyring": "^0.6.0",
+    "@polkadot/ui-react": "^0.12.3",
+    "@polkadot/ui-react-rx": "^0.12.3",
+    "@polkadot/util": "^0.20.5",
    "i18next": "^11.1.1",
    "i18next-browser-languagedetector": "^2.2.0",
    "i18next-xhr-backend": "^1.5.1",
@ -28,7 +29,7 @@
    "react-i18next": "^7.5.1",
    "react-router-dom": "^4.2.2",
    "semantic-ui-css": "^2.3.1",
-    "semantic-ui-react": "^0.79.1",
+    "semantic-ui-react": "^0.80.0",
    "store": "^2.0.12"
  }
 }
--- a/packages/ui-app/src/InputAddress/index.js
+++ b/packages/ui-app/src/InputAddress/index.js
@ -10,8 +10,8 @@ import './InputAddress.css';

 import React from 'react';

-import keyring from '@polkadot/ui-keyring/src';
-import createOptionHeader from '@polkadot/ui-keyring/src/options/header';
+import keyring from '@polkadot/ui-keyring';
+import createOptionHeader from '@polkadot/ui-keyring/options/header';
 import addressDecode from '@polkadot/util-keyring/address/decode';

 import Dropdown from '../Dropdown';
--- a/packages/ui-keyring/package.json
+++ b/packages/ui-keyring/package.json
@ -1,6 +1,6 @@
 {
  "name": "@polkadot/ui-keyring",
-  "version": "0.5.2",
+  "version": "0.6.0",
  "main": "index.js",
  "repository": "https://github.com/polkadot-js/apps.git",
  "author": "Jaco Greeff <jacogr@gmail.com>",
@ -11,13 +11,14 @@
    "test": "jest --coverage"
  },
  "dependencies": {
-    "@polkadot/util": "^0.19.7",
-    "@polkadot/util-keyring": "^0.19.7",
+    "@babel/runtime": "^7.0.0-beta.47",
+    "@polkadot/ui-react": "^0.12.3",
+    "@polkadot/util": "^0.20.5",
+    "@polkadot/util-keyring": "^0.20.5",
    "store": "^2.0.12"
  },
  "peerDependencies": {
-    "@polkadot/ui-react": "^0.11.10",
    "react": "^16.3.1",
-    "semantic-ui-react": "^0.79.1"
+    "semantic-ui-react": "^0.80.0"
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1 @@
+module.exports = require('@polkadot/dev-react/config/postcss');
--- a/yarn.lock
+++ b/yarn.lock
				`@ -0,0 +1 @@`
				`module.exports = require('@polkadot/dev-react/config/postcss');`