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)

.babelrc

@@ -1,3 +0,0 @@
-{
-  "extends": "@polkadot/dev-react/config/babel"
-}

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.

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: '@polkadot/dev-react/config/babel'
+};

lerna.json

@@ -10,5 +10,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.5.2"
+  "version": "0.6.0"
 }

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"
   }
 }

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"
   }
 }

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';

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';

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';

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';

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"
   }
 }

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 & {

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 & {

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';

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"
   }
 }

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'>

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';

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"
   }
 }

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';

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';

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 & {

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';

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';

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';
 

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';

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';
 

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>

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';

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"
   }
 }

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';

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';

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';

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';

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"
   }
 }

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)

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';

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';

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';

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';

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"
   },

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';
 

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';

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"
   }
 }

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>

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"

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%;

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>
   );

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';

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';
 

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';
 

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 & {};
 

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';

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';
 

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 ([
   {

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 ([
   {

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 ([
   {

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 ([
   {

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 ([
   {

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 ([
   {

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 ([
   {

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;
+  }, {})
+});

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"
   }
 }

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';

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"
   }
 }

postcss.config.js

@@ -0,0 +1 @@
+module.exports = require('@polkadot/dev-react/config/postcss');