Fix Secure API hangs (#3927)

* Use proxy for WS in dev

* Update SecureAPI

* Update webpack config

* Fix dev contract

* Update webpack

* Linting fixes

* Refactor Secure API logic : Promise based, no wastes of req

* Fix tests

* Add try 'intitial' token

js/webpack/app.js

@@ -23,6 +23,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');
+const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
 
 const Shared = require('./shared');
 const DAPPS = require('../src/dapps');
@@ -35,10 +36,13 @@ const isProd = ENV === 'production';
 
 module.exports = {
   cache: !isProd,
-  devtool: isProd ? '#eval' : '#eval-source-map',
+  devtool: isProd ? '#hidden-source-map' : '#source-map',
 
   context: path.join(__dirname, '../src'),
   entry: Object.assign({}, Shared.dappsEntry, {
+    modals: './modals/index.js',
+    views: './views/index.js',
+    ui: './ui/index.js',
     index: './index.js'
   }),
   output: {
@@ -162,13 +166,43 @@ module.exports = {
         filename: 'index.html',
         template: './index.ejs',
         favicon: FAVICON,
-        chunks: [ isProd ? null : 'commons', 'index' ]
+        chunks: [
+          isProd ? null : 'commons',
+          'common.modals', 'common.views', 'common.ui',
+          'modals', 'views', 'ui',
+          'index'
+        ]
+      }),
+
+      new ScriptExtHtmlWebpackPlugin({
+        sync: [ 'commons', 'vendor.js' ],
+        defaultAttribute: 'defer'
       }),
 
       new ServiceWorkerWebpackPlugin({
         entry: path.join(__dirname, '../src/serviceWorker.js')
       }),
 
+      new webpack.optimize.CommonsChunkPlugin({
+        filename: 'commons.modals.[hash:10].js',
+        name: 'common.modals',
+        minChunks: 2,
+        chunks: [ 'index', 'modals' ]
+      }),
+
+      new webpack.optimize.CommonsChunkPlugin({
+        filename: 'commons.views.[hash:10].js',
+        name: 'common.views',
+        minChunks: 2,
+        chunks: [ 'index', 'views' ]
+      }),
+
+      new webpack.optimize.CommonsChunkPlugin({
+        filename: 'commons.ui.[hash:10].js',
+        name: 'common.ui',
+        minChunks: 2
+      }),
+
       DappsHTMLInjection
     );
 
@@ -185,7 +219,7 @@ module.exports = {
         new webpack.optimize.CommonsChunkPlugin({
           filename: 'commons.[hash:10].js',
           name: 'commons',
-          minChunks: Infinity
+          minChunks: 2
         })
       );
     }

js/webpack/dev.server.js

@@ -22,6 +22,7 @@ const webpackHotMiddleware = require('webpack-hot-middleware');
 const http = require('http');
 const express = require('express');
 const ProgressBar = require('progress');
+const proxy = require('http-proxy-middleware');
 
 const webpackConfig = require('./app');
 const Shared = require('./shared');
@@ -33,6 +34,8 @@ let progressBar = { update: () => {} };
  * and HMR to the plugins
  */
 (function updateWebpackConfig () {
+  webpackConfig.performance = { hints: false };
+
   Object.keys(webpackConfig.entry).forEach((key) => {
     const entry = webpackConfig.entry[key];
 
@@ -81,13 +84,18 @@ app.use(webpackDevMiddleware(compiler, {
   }
 }));
 
-app.use(express.static(webpackConfig.output.path));
+var wsProxy = proxy('ws://127.0.0.1:8180', { changeOrigin: true });
 
 // Add the dev proxies in the express App
 Shared.addProxies(app);
 
+app.use(express.static(webpackConfig.output.path));
+app.use(wsProxy);
+
 const server = http.createServer(app);
 server.listen(process.env.PORT || 3000, function () {
   console.log('Listening on port', server.address().port);
   progressBar = new ProgressBar('[:bar] :percent :etas', { total: 50 });
 });
+
+server.on('upgrade', wsProxy.upgrade);

js/webpack/vendor.js

@@ -31,9 +31,11 @@ let modules = [
   'ethereumjs-tx',
   'lodash',
   'material-ui',
+  'material-ui-chip-input',
   'mobx',
   'mobx-react',
   'moment',
+  'phoneformat.js',
   'react',
   'react-dom',
   'react-redux',