Solidity Compiler in UI (#3279)

* Added new Deploy Contract page // Use Brace in React #2276

* Adding Web Wrokers WIP

* Compiling Solidity code // Getting mandatory params #2276

* Working editor and deployment #2276

* WIP : displaying source code

* Added Solidity hightling, editor component in UI

* Re-adding the standard Deploy Modal #2276

* Using MobX in Contract Edition // Save to Localstorage #2276

* User select Solidity version #2276

* Loading Solidity versions and closing worker properly #2276

* Adds export to solidity editor #2276

* Adding Import to Contract Editor #2276

* Persistent Worker => Don't load twice Solidity Code #2276

* UI Fixes

* Editor tweaks

* Added Details with ABI in Contract view

* Adds Save capabilities to contract editor // WIP on Load #3279

* Working Load and Save contracts... #3231

* Adding loader of Snippets // Export with name #3279

* Added snippets / Importing from files and from URL

* Fix wrong ID in saved Contract

* Fix lint

* Fixed Formal errors as warning #3279

* Fixing lint issues

* Use NPM Module for valid URL (fixes linting issue too)

* Don't clobber tests.

js/src/redux/providers/compilerActions.js

@@ -0,0 +1,37 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import CompilerWorker from 'worker-loader!./compilerWorker.js';
+
+export function setWorker (worker) {
+  return {
+    type: 'setWorker',
+    worker
+  };
+}
+
+export function setupWorker () {
+  return (dispatch, getState) => {
+    const state = getState();
+
+    if (state.compiler.worker) {
+      return;
+    }
+
+    const worker = new CompilerWorker();
+    dispatch(setWorker(worker));
+  };
+}

js/src/redux/providers/compilerReducer.js

@@ -0,0 +1,29 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { handleActions } from 'redux-actions';
+
+const initialState = {
+  worker: null
+};
+
+export default handleActions({
+  setWorker (state, action) {
+    const { worker } = action;
+
+    return Object.assign({}, state, { worker });
+  }
+}, initialState);

js/src/redux/providers/compilerWorker.js

@@ -0,0 +1,177 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import solc from 'solc/browser-wrapper';
+import { isWebUri } from 'valid-url';
+
+self.solcVersions = {};
+self.files = {};
+self.lastCompile = {
+  sourcecode: '',
+  result: '',
+  version: ''
+};
+
+// eslint-disable-next-line no-undef
+onmessage = (event) => {
+  const message = JSON.parse(event.data);
+
+  switch (message.action) {
+    case 'compile':
+      compile(message.data);
+      break;
+    case 'load':
+      load(message.data);
+      break;
+    case 'setFiles':
+      setFiles(message.data);
+      break;
+    case 'close':
+      close();
+      break;
+  }
+};
+
+function setFiles (files) {
+  const prevFiles = self.files;
+  const nextFiles = files.reduce((obj, file) => {
+    obj[file.name] = file.sourcecode;
+    return obj;
+  }, {});
+
+  self.files = {
+    ...prevFiles,
+    ...nextFiles
+  };
+}
+
+function findImports (path) {
+  if (self.files[path]) {
+    if (self.files[path].error) {
+      return { error: self.files[path].error };
+    }
+
+    return { contents: self.files[path] };
+  }
+
+  if (isWebUri(path)) {
+    console.log('[worker] fetching', path);
+
+    fetch(path)
+      .then((r) => r.text())
+      .then((c) => {
+        console.log('[worker]', 'got content at ' + path);
+        self.files[path] = c;
+
+        postMessage(JSON.stringify({
+          event: 'try-again'
+        }));
+      })
+      .catch((e) => {
+        console.error('[worker]', 'fetching', path, e);
+        self.files[path] = { error: e };
+      });
+
+    return { error: '__parity_tryAgain' };
+  }
+
+  console.log(`[worker] path ${path} not found...`);
+  return { error: 'File not found' };
+}
+
+function compile (data) {
+  const { sourcecode, build } = data;
+  const { longVersion } = build;
+
+  if (self.lastCompile.sourcecode === sourcecode && self.lastCompile.longVersion === longVersion) {
+    return postMessage(JSON.stringify({
+      event: 'compiled',
+      data: self.lastCompile.result
+    }));
+  }
+
+  fetchSolc(build)
+    .then((compiler) => {
+      const input = {
+        '': sourcecode
+      };
+
+      const compiled = compiler.compile({ sources: input }, 0, findImports);
+
+      self.lastCompile = {
+        version: longVersion, result: compiled,
+        sourcecode
+      };
+
+      postMessage(JSON.stringify({
+        event: 'compiled',
+        data: compiled
+      }));
+    });
+}
+
+function load (build) {
+  postMessage(JSON.stringify({
+    event: 'loading',
+    data: true
+  }));
+
+  fetchSolc(build)
+    .then(() => {
+      postMessage(JSON.stringify({
+        event: 'loading',
+        data: false
+      }));
+    })
+    .catch(() => {
+      postMessage(JSON.stringify({
+        event: 'loading',
+        data: false
+      }));
+    });
+}
+
+function fetchSolc (build) {
+  const { path, longVersion } = build;
+
+  if (self.solcVersions[path]) {
+    return Promise.resolve(self.solcVersions[path]);
+  }
+
+  const URL = `https://raw.githubusercontent.com/ethereum/solc-bin/gh-pages/bin/${path}`;
+  console.log(`[worker] fetching solc-bin ${longVersion} at ${URL}`);
+
+  return fetch(URL)
+    .then((r) => r.text())
+    .then((code) => {
+      const solcCode = code.replace(/^var Module;/, 'var Module=self.__solcModule;');
+      self.__solcModule = {};
+
+      console.log(`[worker] evaluating ${longVersion}`);
+
+      // eslint-disable-next-line no-eval
+      eval(solcCode);
+
+      console.log(`[worker] done evaluating ${longVersion}`);
+
+      const compiler = solc(self.__solcModule);
+      self.solcVersions[path] = compiler;
+      return compiler;
+    })
+    .catch((e) => {
+      console.error('fetching solc', e);
+    });
+}

js/src/redux/providers/index.js

@@ -26,3 +26,4 @@ export personalReducer from './personalReducer';
 export signerReducer from './signerReducer';
 export statusReducer from './statusReducer';
 export blockchainReducer from './blockchainReducer';
+export compilerReducer from './compilerReducer';

js/src/redux/reducers.js

@@ -17,7 +17,7 @@
 import { combineReducers } from 'redux';
 import { routerReducer } from 'react-router-redux';
 
-import { apiReducer, balancesReducer, blockchainReducer, imagesReducer, personalReducer, signerReducer, statusReducer as nodeStatusReducer } from './providers';
+import { apiReducer, balancesReducer, blockchainReducer, compilerReducer, imagesReducer, personalReducer, signerReducer, statusReducer as nodeStatusReducer } from './providers';
 
 import { errorReducer } from '../ui/Errors';
 import { settingsReducer } from '../views/Settings';
@@ -33,6 +33,7 @@ export default function () {
 
     balances: balancesReducer,
     blockchain: blockchainReducer,
+    compiler: compilerReducer,
     images: imagesReducer,
     nodeStatus: nodeStatusReducer,
     personal: personalReducer,