Update dev dependencies and make Webpack less verbose (#3997)

* Update dev dependencies // Less verbose Webpack

* Fix linting fro JSX

js/package.json

@@ -26,9 +26,9 @@
   ],
   "scripts": {
     "build": "npm run build:lib && npm run build:dll && npm run build:app",
-    "build:app": "webpack --config webpack/app --progress",
+    "build:app": "webpack --config webpack/app",
-    "build:lib": "webpack --config webpack/libraries --progress",
+    "build:lib": "webpack --config webpack/libraries",
-    "build:dll": "webpack --config webpack/vendor --progress",
+    "build:dll": "webpack --config webpack/vendor",
     "ci:build": "npm run ci:build:lib && npm run ci:build:dll && npm run ci:build:app",
     "ci:build:app": "NODE_ENV=production webpack --config webpack/app",
     "ci:build:lib": "NODE_ENV=production webpack --config webpack/libraries",
@@ -51,19 +51,19 @@
   },
   "devDependencies": {
     "babel-cli": "6.18.0",
-    "babel-core": "6.20.0",
+    "babel-core": "6.21.0",
     "babel-eslint": "7.1.1",
     "babel-loader": "6.2.10",
-    "babel-plugin-lodash": "3.2.10",
+    "babel-plugin-lodash": "3.2.11",
     "babel-plugin-react-intl": "2.2.0",
-    "babel-plugin-transform-class-properties": "6.18.0",
+    "babel-plugin-transform-class-properties": "6.19.0",
     "babel-plugin-transform-decorators-legacy": "1.3.4",
     "babel-plugin-transform-object-rest-spread": "6.20.2",
     "babel-plugin-transform-react-remove-prop-types": "0.2.11",
     "babel-plugin-transform-runtime": "6.15.0",
     "babel-plugin-webpack-alias": "2.1.2",
     "babel-polyfill": "6.20.0",
-    "babel-preset-env": "1.0.2",
+    "babel-preset-env": "1.1.4",
     "babel-preset-es2015": "6.18.0",
     "babel-preset-es2016": "6.16.0",
     "babel-preset-es2017": "6.16.0",
@@ -80,57 +80,58 @@
     "coveralls": "2.11.15",
     "css-loader": "0.26.1",
     "ejs-loader": "0.3.0",
-    "enzyme": "2.6.0",
+    "enzyme": "2.7.0",
     "eslint": "3.11.1",
     "eslint-config-semistandard": "7.0.0",
     "eslint-config-standard": "6.2.1",
     "eslint-config-standard-react": "4.2.0",
     "eslint-plugin-promise": "3.4.0",
-    "eslint-plugin-react": "6.7.1",
+    "eslint-plugin-react": "6.8.0",
     "eslint-plugin-standard": "2.0.1",
     "express": "4.14.0",
     "extract-loader": "0.1.0",
     "extract-text-webpack-plugin": "2.0.0-beta.4",
     "file-loader": "0.9.0",
-    "happypack": "3.0.0",
+    "happypack": "3.0.2",
     "html-loader": "0.4.4",
     "html-webpack-plugin": "2.24.1",
-    "http-proxy-middleware": "0.17.2",
+    "http-proxy-middleware": "0.17.3",
     "husky": "0.11.9",
     "ignore-styles": "5.0.1",
-    "image-webpack-loader": "3.0.0",
+    "image-webpack-loader": "3.1.0",
     "istanbul": "1.0.0-alpha.2",
-    "jsdom": "9.8.3",
+    "jsdom": "9.9.1",
     "json-loader": "0.5.4",
     "mocha": "3.2.0",
     "mock-local-storage": "1.0.2",
-    "mock-socket": "6.0.3",
+    "mock-socket": "6.0.4",
     "nock": "9.0.2",
     "postcss-import": "9.0.0",
-    "postcss-loader": "1.2.0",
+    "postcss-loader": "1.2.1",
     "postcss-nested": "1.0.0",
     "postcss-simple-vars": "3.0.0",
     "progress": "1.1.8",
+    "progress-bar-webpack-plugin": "1.9.1",
     "raw-loader": "0.5.1",
     "react-addons-perf": "15.4.1",
     "react-addons-test-utils": "15.4.1",
     "react-hot-loader": "3.0.0-beta.6",
     "react-intl-aggregate-webpack-plugin": "0.0.1",
     "rucksack-css": "0.9.1",
-    "script-ext-html-webpack-plugin": "1.3.4",
+    "script-ext-html-webpack-plugin": "1.3.5",
     "serviceworker-webpack-plugin": "0.1.7",
     "sinon": "1.17.6",
     "sinon-as-promised": "4.0.2",
     "sinon-chai": "2.8.0",
     "style-loader": "0.13.1",
-    "stylelint": "7.6.0",
+    "stylelint": "7.7.0",
-    "stylelint-config-standard": "15.0.0",
+    "stylelint-config-standard": "15.0.1",
     "url-loader": "0.5.7",
     "webpack": "2.2.0-rc.2",
-    "webpack-dev-middleware": "1.8.4",
+    "webpack-dev-middleware": "1.9.0",
     "webpack-error-notification": "0.1.6",
-    "webpack-hot-middleware": "2.13.2",
+    "webpack-hot-middleware": "2.14.0",
-    "websocket": "1.0.23"
+    "websocket": "1.0.24"
   },
   "dependencies": {
     "bignumber.js": "3.0.1",

js/src/modals/AddContract/types.js

@@ -21,56 +21,64 @@ import { eip20, wallet } from '~/contracts/abi';
 
 const ABI_TYPES = [
   {
-    description:
+    description: (
       <FormattedMessage
         id='addContract.abiType.token.description'
         defaultMessage='A standard {erc20} token'
         values={ {
-          erc20:
+          erc20: (
             <a href='https://github.com/ethereum/EIPs/issues/20' target='_blank'>
               <FormattedMessage
                 id='addContract.abiType.token.erc20'
                 defaultMessage='ERC 20' />
             </a>
-        } } />,
+          )
-    label:
+        } } />
+    ),
+    label: (
       <FormattedMessage
         id='addContract.abiType.token.label'
-        defaultMessage='Token' />,
+        defaultMessage='Token' />
+    ),
     readOnly: true,
     type: 'token',
     value: JSON.stringify(eip20)
   },
   {
-    description:
+    description: (
       <FormattedMessage
         id='addContract.abiType.multisigWallet.description'
         defaultMessage='Ethereum Multisig contract {link}'
         values={ {
-          link:
+          link: (
             <a href='https://github.com/ethereum/dapp-bin/blob/master/wallet/wallet.sol' target='_blank'>
               <FormattedMessage
                 id='addContract.abiType.multisigWallet.link'
                 defaultMessage='see contract code' />
             </a>
-        } } />,
+          )
-    label:
+        } } />
+    ),
+    label: (
       <FormattedMessage
         id='addContract.abiType.multisigWallet.label'
-        defaultMessage='Multisig Wallet' />,
+        defaultMessage='Multisig Wallet' />
+    ),
     readOnly: true,
     type: 'multisig',
     value: JSON.stringify(wallet)
   },
   {
-    description:
+    description: (
       <FormattedMessage
         id='addContract.abiType.custom.description'
-        defaultMessage='Contract created from custom ABI' />,
+        defaultMessage='Contract created from custom ABI' />
-    label:
+    ),
+    label: (
       <FormattedMessage
         id='addContract.abiType.custom.label'
-        defaultMessage='Custom Contract' />,
+        defaultMessage='Custom Contract' />
+    ),
     type: 'custom',
     value: ''
   }

js/src/modals/CreateAccount/errors.js

@@ -18,28 +18,33 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 export default {
-  noFile:
+  noFile: (
     <FormattedMessage
       id='createAccount.error.noFile'
-      defaultMessage='select a valid wallet file to import' />,
+      defaultMessage='select a valid wallet file to import' />
+  ),
 
-  noKey:
+  noKey: (
     <FormattedMessage
       id='createAccount.error.noKey'
-      defaultMessage='you need to provide the raw private key' />,
+      defaultMessage='you need to provide the raw private key' />
+  ),
 
-  noMatchPassword:
+  noMatchPassword: (
     <FormattedMessage
       id='createAccount.error.noMatchPassword'
-      defaultMessage='the supplied passwords does not match' />,
+      defaultMessage='the supplied passwords does not match' />
+  ),
 
-  noName:
+  noName: (
     <FormattedMessage
       id='createAccount.error.noName'
-      defaultMessage='you need to specify a valid name for the account' />,
+      defaultMessage='you need to specify a valid name for the account' />
+  ),
 
-  invalidKey:
+  invalidKey: (
     <FormattedMessage
       id='createAccount.error.invalidKey'
       defaultMessage='the raw key needs to be hex, 64 characters in length and contain the prefix "0x"' />
+  )
 };

js/src/modals/DeployContract/deployContract.js

@@ -34,29 +34,33 @@ import { ERROR_CODES } from '~/api/transport/error';
 
 const STEPS = {
   CONTRACT_DETAILS: {
-    title:
+    title: (
       <FormattedMessage
         id='deployContract.title.details'
         defaultMessage='contract details' />
+    )
   },
   CONTRACT_PARAMETERS: {
-    title:
+    title: (
       <FormattedMessage
         id='deployContract.title.parameters'
         defaultMessage='contract parameters' />
+    )
   },
   DEPLOYMENT: {
     waiting: true,
-    title:
+    title: (
       <FormattedMessage
         id='deployContract.title.deployment'
         defaultMessage='deployment' />
+    )
   },
   COMPLETED: {
-    title:
+    title: (
       <FormattedMessage
         id='deployContract.title.completed'
         defaultMessage='completed' />
+    )
   }
 };
 
@@ -495,48 +499,53 @@ class DeployContract extends Component {
       case 'estimateGas':
       case 'postTransaction':
         this.setState({
-          deployState:
+          deployState: (
             <FormattedMessage
               id='deployContract.state.preparing'
               defaultMessage='Preparing transaction for network transmission' />
+          )
         });
         return;
 
       case 'checkRequest':
         this.setState({
-          deployState:
+          deployState: (
             <FormattedMessage
               id='deployContract.state.waitSigner'
               defaultMessage='Waiting for confirmation of the transaction in the Parity Secure Signer' />
+          )
         });
         return;
 
       case 'getTransactionReceipt':
         this.setState({
           txhash: data.txhash,
-          deployState:
+          deployState: (
             <FormattedMessage
               id='deployContract.state.waitReceipt'
               defaultMessage='Waiting for the contract deployment transaction receipt' />
+          )
         });
         return;
 
       case 'hasReceipt':
       case 'getCode':
         this.setState({
-          deployState:
+          deployState: (
             <FormattedMessage
               id='deployContract.state.validatingCode'
               defaultMessage='Validating the deployed contract code' />
+          )
         });
         return;
 
       case 'completed':
         this.setState({
-          deployState:
+          deployState: (
             <FormattedMessage
               id='deployContract.state.completed'
               defaultMessage='The contract deployment has been completed' />
+          )
         });
         return;
 

js/src/modals/ExecuteContract/executeContract.js

@@ -39,26 +39,31 @@ const STEP_BUSY_OR_ADVANCED = 1;
 const STEP_BUSY = 2;
 
 const TITLES = {
-  transfer:
+  transfer: (
     <FormattedMessage
       id='executeContract.steps.transfer'
-      defaultMessage='function details' />,
+      defaultMessage='function details' />
-  sending:
+  ),
+  sending: (
     <FormattedMessage
       id='executeContract.steps.sending'
-      defaultMessage='sending' />,
+      defaultMessage='sending' />
-  complete:
+  ),
+  complete: (
     <FormattedMessage
       id='executeContract.steps.complete'
-      defaultMessage='complete' />,
+      defaultMessage='complete' />
-  advanced:
+  ),
+  advanced: (
     <FormattedMessage
       id='executeContract.steps.advanced'
-      defaultMessage='advanced options' />,
+      defaultMessage='advanced options' />
-  rejected:
+  ),
+  rejected: (
     <FormattedMessage
       id='executeContract.steps.rejected'
       defaultMessage='rejected' />
+  )
 };
 const STAGES_BASIC = [TITLES.transfer, TITLES.sending, TITLES.complete];
 const STAGES_ADVANCED = [TITLES.transfer, TITLES.advanced, TITLES.sending, TITLES.complete];
@@ -398,10 +403,11 @@ class ExecuteContract extends Component {
       .postTransaction(options, values)
       .then((requestId) => {
         this.setState({
-          busyState:
+          busyState: (
             <FormattedMessage
               id='executeContract.busy.waitAuth'
               defaultMessage='Waiting for authorization in the Parity Signer' />
+          )
         });
 
         return api
@@ -420,10 +426,11 @@ class ExecuteContract extends Component {
           sending: false,
           step: finalstep,
           txhash,
-          busyState:
+          busyState: (
             <FormattedMessage
               id='executeContract.busy.posted'
               defaultMessage='Your transaction has been posted to the network' />
+          )
         });
       })
       .catch((error) => {

js/webpack/libraries.js

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-// Run with `webpack --config webpack.libraries.js --progress`
+// Run with `webpack --config webpack.libraries.js`
 
 const path = require('path');
 

js/webpack/shared.js

@@ -24,6 +24,7 @@ const postcssNested = require('postcss-nested');
 const postcssVars = require('postcss-simple-vars');
 const rucksack = require('rucksack-css');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 
 const ENV = process.env.NODE_ENV || 'development';
 const isProd = ENV === 'production';
@@ -79,6 +80,10 @@ function getPlugins (_isProd = isProd) {
   ];
 
   const plugins = [
+    new ProgressBarPlugin({
+      format: '[:msg] [:bar] ' + ':percent' + ' (:elapsed seconds)'
+    }),
+
     // NB: HappyPack is not yet working with Webpack 2... (as of Nov. 26)
 
     // new HappyPack({