Merge master_refactoring branch (#210)

.babelrc

@@ -1,3 +1,3 @@
 {
-    "presets": ["env"]
+    "presets": ["react-app"]
  }

.gitignore

@@ -2,4 +2,3 @@ node_modules
 build
 dist
 *.log
-yarn.lock

Makefile

@@ -1,4 +1,4 @@
-# Copyright 2018 Superblocks AB
+ # Copyright 2018 Superblocks AB
 #
 # This file is part of Superblocks Lab.
 #
@@ -14,10 +14,8 @@
 # You should have received a copy of the GNU General Public License
 # along with Superblocks Lab.  If not, see <http://www.gnu.org/licenses/>.
 
-PREACT = ./node_modules/preact-cli/lib/index.js
-
 ifndef PORT
-PORT=8181
+PORT=3000
 endif
 
 ifndef ORIGIN_DEV
@@ -29,34 +27,20 @@ ORIGIN_DIST=https://studio.superblocks.com
 endif
 
 watch: build_external_dev
-	PORT=$(PORT) $(PREACT) watch
+	yarn start
 build: build_external_dist
-	$(PREACT) build --no-prerender --service-worker=false --production --clean
+	yarn build
 build_external_dev:
 	mkdir -p ./src/components/superprovider/dist
 	sed 's#ORIGIN#"$(ORIGIN_DEV)"#g' ./src/components/superprovider/web3provider.js | ./node_modules/babel-cli/bin/babel.js --presets env >./src/components/superprovider/dist/web3provider.js
 build_external_dist:
 	mkdir -p ./src/components/superprovider/dist
 	sed 's#ORIGIN#"$(ORIGIN_DIST)"#g' ./src/components/superprovider/web3provider.js | ./node_modules/babel-cli/bin/babel.js --presets env >./src/components/superprovider/dist/web3provider.js
-dist: build
-	rm -rf dist
-	mkdir dist
-	cp -r ./build/static ./dist
-	cp ./build/*.js ./dist
-	cp ./build/*.css ./dist
-	cp ./build/index.html ./dist
-	cp ./build/favicon.ico ./dist
-	cp ./build/manifest.json ./dist
-	cp -r ./build/vs ./dist
-	cp -r ./build/solc ./dist
-	cp -r ./build/evm ./dist
-	rm ./dist/sw.js
-	@echo "Done."
+dist: clean build
 	@echo "You did bump the version (./bump_version.sh) prio, right?"
 clean:
 	rm -rf build
-	rm -rf dist
 npm:
-	yarn install
+	yarn
 
 .PHONY: npm watch build dist clean build_external

config/env.js

@@ -0,0 +1,93 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./paths')];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  throw new Error(
+    'The NODE_ENV environment variable is required but was not specified.'
+  );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+var dotenvFiles = [
+  `${paths.dotenv}.${NODE_ENV}.local`,
+  `${paths.dotenv}.${NODE_ENV}`,
+  // Don't include `.env.local` for `test` environment
+  // since normally you expect tests to produce the same
+  // results for everyone
+  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+  paths.dotenv,
+].filter(Boolean);
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.  Variable expansion is supported in .env files.
+// https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
+dotenvFiles.forEach(dotenvFile => {
+  if (fs.existsSync(dotenvFile)) {
+    require('dotenv-expand')(
+      require('dotenv').config({
+        path: dotenvFile,
+      })
+    );
+  }
+});
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebook/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
+// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+  .split(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
+
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in Webpack configuration.
+const REACT_APP = /^REACT_APP_/i;
+
+function getClientEnvironment(publicUrl) {
+  const raw = Object.keys(process.env)
+    .filter(key => REACT_APP.test(key))
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        // Useful for resolving the correct path to static assets in `public`.
+        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+        // This should only be used as an escape hatch. Normally you would put
+        // images into the `src` and `import` them in code to get their paths.
+        PUBLIC_URL: publicUrl,
+      }
+    );
+  // Stringify all values so we can feed into Webpack DefinePlugin
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
+      return env;
+    }, {}),
+  };
+
+  return { raw, stringified };
+}
+
+module.exports = getClientEnvironment;