Merge pull request #1 from gnosis/webpack4

Webpack 4

.babelrc

@@ -0,0 +1,16 @@
+{
+  "presets": [
+    "@babel/react",
+    [
+      "@babel/env",
+      {
+        "forceAllTransforms": true
+      }
+    ],
+    "@babel/stage-0"
+  ],
+  "plugins": [
+    "transform-es3-member-expression-literals",
+    "transform-es3-property-literals"
+  ]
+}

.gitignore

@@ -3,3 +3,4 @@ build/
 build_webpack/
 build/contracts/
 truffle-config.js
+gnosis-safe-contracts/

config/webpack.config.dev.js

@@ -1,38 +1,44 @@
-var autoprefixer = require('autoprefixer');
+const autoprefixer = require('autoprefixer');
-var cssvars = require('postcss-simple-vars');
+const cssvars = require('postcss-simple-vars');
-var webpack = require('webpack');
+const webpack = require('webpack');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlWebPackPlugin = require("html-webpack-plugin");
-var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
-var getClientEnvironment = require('./env');
-var paths = require('./paths');
 
+const paths = require('./paths');
+const getClientEnvironment = require('./env');
 
+const publicPath = '/';
 
-// Webpack uses `publicPath` to determine where the app is being served from.
+// `publicUrl` we will provide it to our app
-// In development, we always serve from the root. This makes config easier.
-var publicPath = '/';
-// `publicUrl` is just like `publicPath`, but we will provide it to our app
 // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 var publicUrl = '';
 // Get environment variables to inject into our app.
 var env = getClientEnvironment(publicUrl);
 
-var cssvariables = require(paths.appSrc + '/theme/variables');
+const cssvariables = require(paths.appSrc + '/theme/variables');
+
+const postcssPlugins = [
+  autoprefixer({
+    browsers: [
+      '>1%',
+      'last 4 versions',
+      'Firefox ESR',
+      'not ie < 9', // React doesn't support IE8 anyway
+    ]
+  }),
+  cssvars({
+    variables: function () {
+        return Object.assign({}, cssvariables);
+    },
+    silent: false
+  }),
+];
 
-// This is the development configuration.
-// It is focused on developer experience and fast rebuilds.
-// The production configuration is different and lives in a separate file.
 module.exports = {
-  // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
+  devtool: 'eval-source-map',
-  // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
+  mode: 'development',
-  devtool: 'cheap-module-source-map',
-  // These are the "entry points" to our application.
-  // This means they will be the "root" imports that are included in JS bundle.
-  // The first two entry points enable "hot" CSS and auto-refreshes for JS.
   entry: [
+    "babel-polyfill",
     // Include an alternative client for WebpackDevServer. A client's job is to
     // connect to WebpackDevServer by a socket and get notified about changes.
     // When you save a file, the client will either apply hot updates (in case
@@ -52,6 +58,13 @@ module.exports = {
     // initialization, it doesn't blow up the WebpackDevServer client, and
     // changing JS code would still trigger a refresh.
   ],
+  resolve: { 
+    // These are the reasonable defaults supported by the Node ecosystem.
+    // We also include JSX as a common component filename extension to support
+    // some tools, although we do not recommend using it, see:
+    // https://github.com/facebookincubator/create-react-app/issues/290
+    extensions: ['.js', '.json', '.jsx'],
+  },
   output: {
     // Next line is not used in dev but WebpackDevServer crashes without it:
     path: paths.appBuild,
@@ -64,187 +77,53 @@ module.exports = {
     // This is the URL that app is served from. We use "/" in development.
     publicPath: publicPath
   },  
-  resolve: {
-    // This allows you to set a fallback for where Webpack should look for modules.
-    // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
-    // We use `fallback` instead of `root` because we want `node_modules` to "win"
-    // if there any conflicts. This matches Node resolution mechanism.
-    // https://github.com/facebookincubator/create-react-app/issues/253
-    fallback: paths.nodePaths,
-    // These are the reasonable defaults supported by the Node ecosystem.
-    // We also include JSX as a common component filename extension to support
-    // some tools, although we do not recommend using it, see:
-    // https://github.com/facebookincubator/create-react-app/issues/290
-    extensions: ['.js', '.json', '.jsx', ''],
-    alias: {
-      // Support React Native Web
-      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-      'react-native': 'react-native-web'
-    }
-  },
-
   module: {
-    // First, run the linter.
+    rules: [
-    // It's important to do this before Babel processes the JS.
-    preLoaders: [
       {
         test: /\.(js|jsx)$/,
-        loader: 'eslint',
+        exclude: /node_modules/,
-        include: paths.appSrc,
+        use: {
-      }
+          loader: "babel-loader"
-    ],
-    loaders: [
-      // Default loader: load all assets that are not handled
-      // by other loaders with the url loader.
-      // Note: This list needs to be updated with every change of extensions
-      // the other loaders match.
-      // E.g., when adding a loader for a new supported file extension,
-      // we need to add the supported extension to this loader too.
-      // Add one new line in `exclude` for each loader.
-      //
-      // "file" loader makes sure those assets get served by WebpackDevServer.
-      // When you `import` an asset, you get its (virtual) filename.
-      // In production, they would get copied to the `build` folder.
-      // "url" loader works like "file" loader except that it embeds assets
-      // smaller than specified limit in bytes as data URLs to avoid requests.
-      // A missing `test` is equivalent to a match.
-      {
-        exclude: [
-          /\.html$/,
-          /\.(js|jsx)$/,
-          /\.css$/,
-          /\.scss$/,
-          /\.json$/,
-          /\.woff$/,
-          /\.woff2$/,
-          /\.(ttf|svg|eot)$/
-        ],
-        loader: 'url',
-        query: {
-          limit: 10000,
-          name: 'static/media/[name].[hash:8].[ext]'
-        }
-      },
-      // Process JS with Babel.
-      {
-        test: /\.(js|jsx)$/,
-        include: paths.appSrc,
-        loader: 'babel',
-        query: {
-
-          // This is a feature of `babel-loader` for webpack (not Babel itself).
-          // It enables caching results in ./node_modules/.cache/babel-loader/
-          // directory for faster rebuilds.
-          cacheDirectory: true
         }
       },
       {
         test: /\.(scss|css)$/,
-        loader: 'style!css?importLoaders=1&modules=true&minimize=false&localIdentName=[name]__[local]___[hash:base64:5]!postcss?sourceMap'
+        use: [
-      },
+          'style-loader',
-      // "postcss" loader applies autoprefixer to our CSS.
+          { loader: 'css-loader',
-      // "css" loader resolves paths in CSS and adds assets as dependencies.
+            options: {
-      // "style" loader turns CSS into JS modules that inject <style> tags.
+              importLoaders: 1,
-      // In production, we use a plugin to extract that CSS to a file, but
+              modules: true,
-      // in development "style" loader enables hot editing of CSS.
+              minimize: false,
-      /*{
+              localIdentName: '[name]__[local]___[hash:base64:5]',
-        test: /\.css$/,
+            }
-        loader: 'style!css?importLoaders=1!postcss'
+          },
-      },*/
+          {
-      // JSON is not enabled by default in Webpack but both Node and Browserify
+            loader: 'postcss-loader',
-      // allow it implicitly so we also enable it.
+            options: {
+              sourceMap: true,
+              plugins: postcssPlugins,
+            },
+          },
+        ],
+    },
       {
-        test: /\.json$/,
+        test: /\.html$/,
-        loader: 'json'
+        use: [
-      },
+          {
-      // "file" loader for svg
+            loader: "html-loader",
-      {
+            options: { minimize: false }
-        test: /\.svg$/,
+          }
-        loader: 'file',
+        ]
-        query: {
+      }
-          name: 'static/media/[name].[hash:8].[ext]'
-        }
-      },
-      // "file" loader for fonts
-      {
-        test: /\.woff$/,
-        loader: 'file',
-        query: {
-          name: 'fonts/[name].[hash].[ext]'
-        }
-      },
-      {
-        test: /\.woff2$/,
-        loader: 'file',
-        query: {
-          name: 'fonts/[name].[hash].[ext]'
-        }
-      },
-      {
-        test: /\.(ttf|eot)$/,
-        loader: 'file',
-        query: {
-          name: 'fonts/[name].[hash].[ext]'
-        }
-      },
-      // Truffle solidity loader to watch for changes in Solitiy files and hot
-      // reload contracts with webpack.
-      //
-      // CURRENTLY REMOVED DUE TO INCOMPATIBILITY WITH TRUFFLE 3
-      // Compile and migrate contracts manually.
-      //
-      /*{
-        test: /\.sol$/,
-        loader: 'truffle-solidity?network_id=123'
-      }*/
     ]
   },
-
-  // We use PostCSS for autoprefixing only.
-  postcss: function() {
-    return [
-      autoprefixer({
-        browsers: [
-          '>1%',
-          'last 4 versions',
-          'Firefox ESR',
-          'not ie < 9', // React doesn't support IE8 anyway
-        ]
-      }),
-      cssvars({
-        variables: function () {
-            return Object.assign({}, cssvariables);
-        },
-        silent: false
-      }),
-    ];
-  },
   plugins: [
-    // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
+    new HtmlWebPackPlugin({
-    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    // In development, this will be an empty string.
-    new InterpolateHtmlPlugin({
-      PUBLIC_URL: publicUrl
-    }),
-    // Generates an `index.html` file with the <script> injected.
-    new HtmlWebpackPlugin({
-      inject: true,
       template: paths.appHtml,
     }),
-    // Makes some environment variables available to the JS code, for example:
-    // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
     new webpack.DefinePlugin(env),
-    // This is necessary to emit hot updates (currently CSS only):
     new webpack.HotModuleReplacementPlugin(),
-    // Watcher doesn't work well if you mistype casing in a path so we use
-    // a plugin that prints an error when you attempt to do this.
-    // See https://github.com/facebookincubator/create-react-app/issues/240
-    new CaseSensitivePathsPlugin(),
-    // If you require a missing module and then `npm install` it, you still have
-    // to restart the development server for Webpack to discover it. This plugin
-    // makes the discovery automatic so you don't have to restart.
-    // See https://github.com/facebookincubator/create-react-app/issues/186
-    new WatchMissingNodeModulesPlugin(paths.appNodeModules)
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.

config/webpack.config.prod.js

@@ -1,16 +1,36 @@
-var autoprefixer = require('autoprefixer');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-var cssvars = require('postcss-simple-vars');
+const autoprefixer = require('autoprefixer');
-var webpack = require('webpack');
+const cssvars = require('postcss-simple-vars');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
+
-var ManifestPlugin = require('webpack-manifest-plugin');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
-var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
-var url = require('url');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const ManifestPlugin = require('webpack-manifest-plugin');
+const url = require('url');
+
 var paths = require('./paths');
 var getClientEnvironment = require('./env');
 
 var cssvariables = require(paths.appSrc + '/theme/variables');
 
+const postcssPlugins = [
+  autoprefixer({
+    browsers: [
+      '>1%',
+      'last 4 versions',
+      'Firefox ESR',
+      'not ie < 9', // React doesn't support IE8 anyway
+    ]
+  }),
+  cssvars({
+    variables: function () {
+        return Object.assign({}, cssvariables);
+    },
+    silent: true
+  }),
+];
+
 function ensureSlash(path, needsSlash) {
   var hasSlash = path.endsWith('/');
   if (hasSlash && !needsSlash) {
@@ -49,12 +69,22 @@ if (env['process.env'].NODE_ENV !== '"production"') {
 // It compiles slowly and is focused on producing a fast and minimal bundle.
 // The development configuration is different and lives in a separate file.
 module.exports = {
+  mode: 'production',
   // Don't attempt to continue if there are any errors.
   bail: true,
-  // We generate sourcemaps in production. This is slow but gives good results.
+  optimization: {
-  // You can exclude the *.map files from the build during deployment.
+    splitChunks: {
-  devtool: 'source-map',
+      cacheGroups: {
-  // In production, we only want to load the polyfills and the app code.
+        vendor: {
+          test: /node_modules/,
+          name: "vendor",
+          chunks: "all",
+          enforce: true,
+          minSize: 1
+        }
+      }
+    }
+  },
   entry: [
     require.resolve('./polyfills'),
     paths.appIndexJs
@@ -71,153 +101,48 @@ module.exports = {
     publicPath: publicPath
   },
   resolve: {
-    // This allows you to set a fallback for where Webpack should look for modules.
-    // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
-    // We use `fallback` instead of `root` because we want `node_modules` to "win"
-    // if there any conflicts. This matches Node resolution mechanism.
-    // https://github.com/facebookincubator/create-react-app/issues/253
-    fallback: paths.nodePaths,
     // These are the reasonable defaults supported by the Node ecosystem.
     // We also include JSX as a common component filename extension to support
     // some tools, although we do not recommend using it, see:
     // https://github.com/facebookincubator/create-react-app/issues/290
-    extensions: ['.js', '.json', '.jsx', ''],
+    extensions: ['.js', '.json', '.jsx'],
-    alias: {
-      // Support React Native Web
-      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-      'react-native': 'react-native-web'
-    }
   },
 
   module: {
-    // First, run the linter.
+    rules: [
-    // It's important to do this before Babel processes the JS.
-    preLoaders: [
-      {
-        test: /\.(js|jsx)$/,
-        loader: 'eslint',
-        include: paths.appSrc
-      }
-    ],
-    loaders: [
-      // Default loader: load all assets that are not handled
-      // by other loaders with the url loader.
-      // Note: This list needs to be updated with every change of extensions
-      // the other loaders match.
-      // E.g., when adding a loader for a new supported file extension,
-      // we need to add the supported extension to this loader too.
-      // Add one new line in `exclude` for each loader.
-      //
-      // "file" loader makes sure those assets end up in the `build` folder.
-      // When you `import` an asset, you get its filename.
-      // "url" loader works just like "file" loader but it also embeds
-      // assets smaller than specified size as data URLs to avoid requests.
-      {
-        exclude: [
-          /\.html$/,
-          /\.(js|jsx)$/,
-          /\.css$/,
-          /\.scss$/,
-          /\.json$/,
-          /\.woff$/,
-          /\.woff2$/,
-          /\.(ttf|svg|eot)$/
-        ],
-        loader: 'url',
-        query: {
-          limit: 10000,
-          name: 'static/media/[name].[hash:8].[ext]'
-        }
-      },
-      // Process JS with Babel.
       {
         test: /\.(js|jsx)$/,
         include: paths.appSrc,
-        loader: 'babel',
+        use: {
+          loader: "babel-loader"
+        }
       },
-      // The notation here is somewhat confusing.
-      // "postcss" loader applies autoprefixer to our CSS.
-      // "css" loader resolves paths in CSS and adds assets as dependencies.
-      // "style" loader normally turns CSS into JS modules injecting <style>,
-      // but unlike in development configuration, we do something different.
-      // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
-      // (second argument), then grabs the result CSS and puts it into a
-      // separate file in our build process. This way we actually ship
-      // a single CSS file in production instead of JS code injecting <style>
-      // tags. If you use code splitting, however, any async bundles will still
-      // use the "style" loader inside the async code so CSS from them won't be
-      // in the main CSS file.
       {
         test: /\.(scss|css)$/,
-        loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1&modules=true&minimize=false!postcss?sourceMap')
+        use: ExtractTextPlugin.extract({
-        // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
+          fallback: 'style-loader',
+          use: [
+            { 
+              loader: 'css-loader',
+              options: {
+                importLoaders: 1,
+                modules: true,
+                minimize: true
+              }
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                sourceMap: true,
+                plugins: postcssPlugins,
+              }
+            },
+          ],
+        })
       },
-      // JSON is not enabled by default in Webpack but both Node and Browserify
-      // allow it implicitly so we also enable it.
-      {
-        test: /\.json$/,
-        loader: 'json'
-      },
-      // "file" loader for svg
-      {
-        test: /\.svg$/,
-        loader: 'file',
-        query: {
-          name: 'static/media/[name].[hash:8].[ext]'
-        }
-      },
-      // "file" loader for fonts
-      {
-        test: /\.woff$/,
-        loader: 'file',
-        query: {
-          name: 'fonts/[name].[hash].[ext]'
-        }
-      },
-      {
-        test: /\.woff2$/,
-        loader: 'file',
-        query: {
-          name: 'fonts/[name].[hash].[ext]'
-        }
-      },
-      {
-        test: /\.(ttf|eot)$/,
-        loader: 'file',
-        query: {
-          name: 'fonts/[name].[hash].[ext]'
-        }
-      }
     ]
   },
-
-  // We use PostCSS for autoprefixing only.
-  postcss: function() {
-    return [
-      autoprefixer({
-        browsers: [
-          '>1%',
-          'last 4 versions',
-          'Firefox ESR',
-          'not ie < 9', // React doesn't support IE8 anyway
-        ]
-      }),
-      cssvars({
-        variables: function () {
-            return Object.assign({}, cssvariables);
-        },
-        silent: true
-      }),
-    ];
-  },
   plugins: [
-    // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
-    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    // In production, it will be an empty string unless you specify "homepage"
-    // in `package.json`, in which case it will be the pathname of that URL.
-    new InterpolateHtmlPlugin({
-      PUBLIC_URL: publicUrl
-    }),
     // Generates an `index.html` file with the <script> injected.
     new HtmlWebpackPlugin({
       inject: true,
@@ -240,24 +165,6 @@ module.exports = {
     // It is absolutely essential that NODE_ENV was set to production here.
     // Otherwise React will be compiled in the very slow development mode.
     new webpack.DefinePlugin(env),
-    // This helps ensure the builds are consistent if source hasn't changed:
-    new webpack.optimize.OccurrenceOrderPlugin(),
-    // Try to dedupe duplicated modules, if any:
-    new webpack.optimize.DedupePlugin(),
-    // Minify the code.
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        screw_ie8: true, // React doesn't support IE8
-        warnings: false
-      },
-      mangle: {
-        screw_ie8: true
-      },
-      output: {
-        comments: false,
-        screw_ie8: true
-      }
-    }),
     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
     new ExtractTextPlugin('static/css/[name].[contenthash:8].css'),
     // Generate a manifest file which contains a mapping of all asset filenames
@@ -265,7 +172,8 @@ module.exports = {
     // having to parse `index.html`.
     new ManifestPlugin({
       fileName: 'asset-manifest.json'
-    })
+    }),
+    // new BundleAnalyzerPlugin()
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.

config/webpack.config.test.js

@@ -0,0 +1 @@
+import '@babel/polyfill';

contracts/Migrations.sol

@@ -1,23 +0,0 @@
-pragma solidity ^0.4.2;
-
-contract Migrations {
-  address public owner;
-  uint public last_completed_migration;
-
-  modifier restricted() {
-    if (msg.sender == owner) _;
-  }
-
-  function Migrations() public {
-    owner = msg.sender;
-  }
-
-  function setCompleted(uint completed) public restricted {
-    last_completed_migration = completed;
-  }
-
-  function upgrade(address new_address) public restricted {
-    Migrations upgraded = Migrations(new_address);
-    upgraded.setCompleted(last_completed_migration);
-  }
-}

contracts/SimpleStorage.sol

@@ -1,13 +0,0 @@
-pragma solidity ^0.4.18;
-
-contract SimpleStorage {
-  uint storedData;
-
-  function set(uint x) public {
-    storedData = x;
-  }
-
-  function get() public view returns (uint) {
-    return storedData;
-  }
-}

package.json

@@ -1,73 +1,75 @@
 {
-  "name": "react-box",
+  "name": "gnosis-team-safe",
-  "version": "0.1.0",
+  "version": "1.0.0",
-  "private": true,
+  "description": "Allowing crypto users manage funds in a safer way",
-  "devDependencies": {
+  "directories": {
-    "autoprefixer": "6.5.1",
+    "test": "test"
-    "babel-core": "6.17.0",
-    "babel-eslint": "7.1.1",
-    "babel-jest": "17.0.2",
-    "babel-loader": "6.2.7",
-    "babel-preset-react-app": "^2.0.1",
-    "case-sensitive-paths-webpack-plugin": "1.1.4",
-    "chalk": "1.1.3",
-    "connect-history-api-fallback": "1.3.0",
-    "cross-spawn": "4.0.2",
-    "css-loader": "0.26.0",
-    "detect-port": "1.0.1",
-    "dotenv": "2.0.0",
-    "eslint": "3.8.1",
-    "eslint-config-react-app": "^0.5.0",
-    "eslint-loader": "1.6.0",
-    "eslint-plugin-flowtype": "2.21.0",
-    "eslint-plugin-import": "2.0.1",
-    "eslint-plugin-jsx-a11y": "2.2.3",
-    "eslint-plugin-react": "6.4.1",
-    "extract-text-webpack-plugin": "1.0.1",
-    "file-loader": "0.9.0",
-    "filesize": "3.3.0",
-    "fs-extra": "0.30.0",
-    "gzip-size": "3.0.0",
-    "html-webpack-plugin": "2.24.0",
-    "http-proxy-middleware": "0.17.2",
-    "jest": "18.1.0",
-    "json-loader": "0.5.4",
-    "object-assign": "4.1.0",
-    "path-exists": "2.1.0",
-    "postcss-loader": "1.0.0",
-    "postcss-simple-vars": "^4.0.0",
-    "promise": "7.1.1",
-    "react-dev-utils": "^0.4.2",
-    "recursive-readdir": "2.1.0",
-    "strip-ansi": "3.0.1",
-    "style-loader": "0.13.1",
-    "truffle-contract": "^1.1.8",
-    "truffle-solidity-loader": "0.0.8",
-    "url-loader": "0.5.7",
-    "webpack": "1.14.0",
-    "webpack-dev-server": "1.16.2",
-    "webpack-manifest-plugin": "1.1.0",
-    "whatwg-fetch": "1.0.0"
-  },
-  "dependencies": {
-    "dotenv": "^2.0.0",
-    "final-form": "^4.2.1",
-    "material-ui": "^1.0.0-beta.35",
-    "material-ui-icons": "^1.0.0-beta.35",
-    "react": "^15.4.2",
-    "react-dom": "^15.4.2",
-    "react-final-form": "^3.1.2"
   },
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gnosis/gnosis-team-safe"
+  },
+  "author": "Gnosis Team",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/gnosis/gnosis-team-safe/issues"
+  },
+  "homepage": "https://github.com/gnosis/gnosis-team-safe#readme",
+  "devDependencies": {
+    "@babel/cli": "^7.0.0-beta.40",
+    "@babel/core": "^7.0.0-beta.40",
+    "@babel/polyfill": "^7.0.0-beta.40",
+    "@babel/preset-env": "^7.0.0-beta.40",
+    "@babel/preset-react": "^7.0.0-beta.40",
+    "@babel/preset-stage-0": "^7.0.0-beta.40",
+    "autoprefixer": "^8.1.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-loader": "^8.0.0-beta.0",
+    "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
+    "babel-plugin-transform-es3-property-literals": "^6.22.0",
+    "css-loader": "^0.28.10",
+    "detect-port": "^1.2.2",
+    "dotenv": "^5.0.1",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file-loader": "^1.1.11",
+    "fs-extra": "^5.0.0",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^3.0.4",
+    "jest": "^22.4.2",
+    "json-loader": "^0.5.7",
+    "postcss-loader": "^2.1.1",
+    "postcss-simple-vars": "^4.1.0",
+    "react": "^16.2.0",
+    "react-dev-utils": "^5.0.0",
+    "react-dom": "^16.2.0",
+    "style-loader": "^0.20.2",
+    "truffle-contract": "^1.1.8",
+    "truffle-solidity-loader": "0.0.8",
+    "uglifyjs-webpack-plugin": "^1.2.2",
+    "web3": "0.18.4",
+    "webpack": "^4.0.0",
+    "webpack-bundle-analyzer": "^2.11.1",
+    "webpack-cli": "^2.0.8",
+    "webpack-dev-server": "^3.1.0",
+    "webpack-manifest-plugin": "^2.0.0-rc.2"
+  },
+  "dependencies": {
+    "final-form": "^4.2.1",
+    "material-ui": "^1.0.0-beta.35",
+    "material-ui-icons": "^1.0.0-beta.35",
+    "react-final-form": "^3.1.2"
+  },
   "jest": {
     "collectCoverageFrom": [
       "src/**/*.{js,jsx}"
     ],
     "setupFiles": [
+      "<rootDir>/config/webpack.config.test.js",
       "<rootDir>/config/polyfills.js"
     ],
     "testMatch": [
@@ -78,7 +80,7 @@
     "testURL": "http://localhost",
     "transform": {
       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
-      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+      "^.+\\.(css|scss)$": "<rootDir>/config/jest/cssTransform.js",
       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
     },
     "transformIgnorePatterns": [
@@ -94,13 +96,5 @@
       "web.jsx",
       "jsx"
     ]
-  },
-  "babel": {
-    "presets": [
-      "react-app"
-    ]
-  },
-  "eslintConfig": {
-    "extends": "react-app"
   }
 }

public/index.html

@@ -3,18 +3,9 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="shortcut icon" href="favicon.ico">
     <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700" rel="stylesheet">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tag above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>Multisig Safe</title>
   </head>
   <body>

scripts/build.js

@@ -32,7 +32,7 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 function removeFileNameHash(fileName) {
   return fileName
     .replace(paths.appBuild, '')
-    .replace(/\/?(.*)(\.\w+)(\.js|\.css)/, (match, p1, p2, p3) => p1 + p3);
+    .replace(/\/?(.*)(\.\w+)(\.js|\.css|\.jsx|\.scss)/, (match, p1, p2, p3) => p1 + p3);
 }
 
 // Input: 1024, 2048
@@ -56,7 +56,7 @@ function getDifferenceLabel(currentSize, previousSize) {
 // This lets us display how much they changed later.
 recursive(paths.appBuild, (err, fileNames) => {
   var previousSizeMap = (fileNames || [])
-    .filter(fileName => /\.(js|css)$/.test(fileName))
+    .filter(fileName => /\.(js|jsx|css|scss)$/.test(fileName))
     .reduce((memo, fileName) => {
       var contents = fs.readFileSync(fileName);
       var key = removeFileNameHash(fileName);
@@ -78,7 +78,7 @@ recursive(paths.appBuild, (err, fileNames) => {
 // Print a detailed summary of build files.
 function printFileSizes(stats, previousSizeMap) {
   var assets = stats.toJson().assets
-    .filter(asset => /\.(js|css)$/.test(asset.name))
+    .filter(asset => /\.(js|jsx|css|scss)$/.test(asset.name))
     .map(asset => {
       var fileContents = fs.readFileSync(paths.appBuild + '/' + asset.name);
       var size = gzipSize(fileContents);

scripts/start.js

@@ -17,7 +17,6 @@ var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 var getProcessForPort = require('react-dev-utils/getProcessForPort');
 var openBrowser = require('react-dev-utils/openBrowser');
-var prompt = require('react-dev-utils/prompt');
 var pathExists = require('path-exists');
 var config = require('../config/webpack.config.dev');
 var paths = require('../config/paths');
@@ -299,16 +298,7 @@ detect(DEFAULT_PORT).then(port => {
   if (isInteractive) {
     clearConsole();
     var existingProcess = getProcessForPort(DEFAULT_PORT);
-    var question =
+    run(port);
-      chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.' +
-        ((existingProcess) ? ' Probably:\n  ' + existingProcess : '')) +
-        '\n\nWould you like to run the app on another port instead?';
-
-    prompt(question, true).then(shouldChangePort => {
-      if (shouldChangePort) {
-        run(port);
-      }
-    });
   } else {
     console.log(chalk.red('Something is already running on port ' + DEFAULT_PORT + '.'));
   }

scripts/test.js

@@ -15,17 +15,4 @@ if (!process.env.CI && argv.indexOf('--coverage') < 0) {
   argv.push('--watch');
 }
 
-// A temporary hack to clear terminal correctly.
-// You can remove this after updating to Jest 18 when it's out.
-// https://github.com/facebook/jest/pull/2230
-var realWrite = process.stdout.write;
-var CLEAR = process.platform === 'win32' ? '\x1Bc' : '\x1B[2J\x1B[3J\x1B[H';
-process.stdout.write = function(chunk, encoding, callback) {
-  if (chunk === '\x1B[2J\x1B[H') {
-    chunk = CLEAR;
-  }
-  return realWrite.call(this, chunk, encoding, callback);
-};
-
-
 jest.run(argv);

src/components/forms/TextField/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {default as MuiTextField } from 'material-ui/TextField'
+import { default as MuiTextField } from 'material-ui/TextField'
 
 const TextField = ({
   input: { name, onChange, value, ...restInput },