Fix issues in Contract Development view (#5555)

* Better errors in contract dev

* Use RAW Git instead of Github Raw URLs (better CORS support)

* Network first for Solc list

* Don't use importScript n Worker // update rawgit to use CDN

js/src/serviceWorker.js

@@ -16,13 +16,11 @@
 
 import toolbox from 'sw-toolbox';
 
-toolbox.precache(self.serviceWorkerOption.assets);
-
 /**
  * Cache the SOLC files : if not available, make a network request
  */
-toolbox.router.any(/raw.githubusercontent.com\/ethereum\/solc-bin(.+)list\.json$/, toolbox.cacheFirst);
+toolbox.router.any(/rawgit.com\/ethereum\/solc-bin(.+)list\.json$/, toolbox.networkFirst);
-toolbox.router.any(/raw.githubusercontent.com\/ethereum\/solc-bin(.+)soljson(.+)\.js$/, toolbox.cacheFirst);
+toolbox.router.any(/rawgit.com\/ethereum\/solc-bin(.+)soljson(.+)\.js$/, toolbox.cacheFirst);
 
 self.addEventListener('install', (event) => {
   event.waitUntil(self.skipWaiting());

js/src/util/solidity.js

@@ -52,21 +52,9 @@ export default class SolidityUtils {
 
   static getCompiler (build) {
     const { longVersion, path } = build;
-    const URL = `https://raw.githubusercontent.com/ethereum/solc-bin/gh-pages/bin/${path}`;
+    const URL = `https://cdn.rawgit.com/ethereum/solc-bin/gh-pages/bin/${path}`;
     const isWorker = typeof window !== 'object';
 
-    if (isWorker) {
-      return new Promise((resolve, reject) => {
-        self.importScripts(URL);
-
-        setTimeout(() => {
-          const compiler = solc(self.Module);
-
-          return resolve(compiler);
-        }, 50);
-      });
-    }
-
     return fetch(URL)
       .then((r) => r.text())
       .then((code) => {

js/src/views/WriteContract/writeContract.js

@@ -271,24 +271,6 @@ class WriteContract extends Component {
   renderParameters () {
     const { compiling, contract, selectedBuild, loading, workerError } = this.store;
 
-    if (workerError) {
-      return (
-        <div className={ styles.panel }>
-          <div className={ styles.centeredMessage }>
-            <p>
-              <FormattedMessage
-                id='writeContract.error.params'
-                defaultMessage='An error occurred with the following description'
-              />
-            </p>
-            <div className={ styles.error }>
-              { workerError.toString() }
-            </div>
-          </div>
-        </div>
-      );
-    }
-
     if (selectedBuild < 0) {
       return (
         <div className={ `${styles.panel} ${styles.centeredMessage}` }>
@@ -306,10 +288,28 @@ class WriteContract extends Component {
       );
     }
 
-    if (loading) {
+    let content;
+
+    if (workerError) {
+      content = (
+        <div className={ styles.panel }>
+          <div className={ styles.centeredMessage }>
+            <p>
+              <FormattedMessage
+                id='writeContract.error.params'
+                defaultMessage='An error occurred with the following description'
+              />
+            </p>
+            <div className={ styles.error }>
+              { workerError.toString() }
+            </div>
+          </div>
+        </div>
+      );
+    } else if (loading) {
       const { longVersion } = this.store.builds[selectedBuild];
 
-      return (
+      content = (
         <div className={ styles.panel }>
           <div className={ styles.centeredMessage }>
             <CircularProgress
@@ -328,6 +328,8 @@ class WriteContract extends Component {
           </div>
         </div>
       );
+    } else {
+      content = this.renderCompilation();
     }
 
     return (
@@ -392,7 +394,7 @@ class WriteContract extends Component {
           </div>
         </div>
         { this.renderSolidityVersions() }
-        { this.renderCompilation() }
+        { content }
       </div>
     );
   }

js/src/views/WriteContract/writeContractStore.js

@@ -23,7 +23,7 @@ import store from 'store';
 import { sha3 } from '~/api/util/sha3';
 import SolidityUtils from '~/util/solidity';
 
-const SOLIDITY_LIST_URL = 'https://raw.githubusercontent.com/ethereum/solc-bin/gh-pages/bin/list.json';
+const SOLIDITY_LIST_URL = 'https://rawgit.com/ethereum/solc-bin/gh-pages/bin/list.json';
 const WRITE_CONTRACT_STORE_KEY = '_parity::writeContractStore';
 
 const SNIPPETS = {
@@ -197,6 +197,7 @@ export default class WriteContractStore {
         })
         .catch((error) => {
           this.setWorkerError(error);
+          throw error;
         });
     }
 
@@ -318,6 +319,7 @@ export default class WriteContractStore {
     transaction(() => {
       this.compiled = false;
       this.compiling = true;
+      this.setWorkerError(null);
     });
 
     const build = this.builds[this.selectedBuild];
@@ -365,6 +367,9 @@ export default class WriteContractStore {
           annotations, contracts, errors
         } = data.result;
 
+        if (!contract && errors && errors.length > 0) {
+          this.setWorkerError(errors[0]);
+        } else {
           this.contract = contract;
           this.contractIndex = contractIndex;
 
@@ -372,6 +377,7 @@ export default class WriteContractStore {
           this.contracts = contracts;
           this.errors = errors;
         }
+      }
 
       this.compiled = true;
       this.compiling = false;

js/src/webWorker.js

@@ -22,7 +22,10 @@ registerPromiseWorker((msg) => {
   return handleMessage(msg);
 });
 
-self.solc = {};
+self.compiler = {
+  version: null,
+  compiler: null
+};
 self.files = {};
 
 function handleMessage (message) {
@@ -57,7 +60,16 @@ function compile (data) {
 
   return getCompiler(build)
     .then((compiler) => {
+      console.warn('compiling');
       return SolidityUtils.compile(data, compiler);
+    })
+    .then((result) => {
+      console.warn('result in worker', result);
+      return result;
+    })
+    .catch((error) => {
+      console.error('error in worker', error);
+      throw error;
     });
 }
 
@@ -79,14 +91,18 @@ function setFiles (files) {
 function getCompiler (build) {
   const { longVersion } = build;
 
-  if (!self.solc[longVersion]) {
+  if (self.compiler.version !== longVersion) {
-    self.solc[longVersion] = SolidityUtils
+    self.compiler.version = longVersion;
+    self.compiler.compiler = SolidityUtils
       .getCompiler(build)
       .then((compiler) => {
-        self.solc[longVersion] = compiler;
+        if (self.compiler.version === longVersion) {
+          self.compiler.compiler = compiler;
+        }
+
         return compiler;
       });
   }
 
-  return Promise.resolve(self.solc[longVersion]);
+  return Promise.resolve(self.compiler.compiler);
 }