From 05c67024f357182d148ba0abe617225997e3880f Mon Sep 17 00:00:00 2001 From: serapath Date: Sat, 19 May 2018 23:16:18 -0400 Subject: [PATCH] CompileTab: minor refactorings --- src/app/tabs/compile-tab.js | 134 ++++++++++++++---------------------- 1 file changed, 53 insertions(+), 81 deletions(-) diff --git a/src/app/tabs/compile-tab.js b/src/app/tabs/compile-tab.js index 47bafa0f0e..b303c669f1 100644 --- a/src/app/tabs/compile-tab.js +++ b/src/app/tabs/compile-tab.js @@ -11,13 +11,15 @@ var publishOnSwarm = require('../contract/publishOnSwarm') var styles = styleGuide.chooser() -class CompileTab { +module.exports = class CompileTab { constructor (api = {}, events = {}, opts = {}) { const self = this self._opts = opts self._api = api self._events = events - self._view = {} + self._view = { + el: null + } self.data = { autoCompile: self._opts.config.get('autoCompile') || false, compileTimeout: null, @@ -119,23 +121,19 @@ class CompileTab { var warnCompilationSlow = yo`` var compileIcon = yo`` var compileContainer = yo` -
-
-
${compileIcon} Start to compile
-
- - Auto compile -
- ${warnCompilationSlow} +
+
+
${compileIcon} Start to compile
+
+ + Auto compile
+ ${warnCompilationSlow}
- ` - +
` compileContainer.querySelector('#compile').addEventListener('click', () => { self._api.runCompiler() }) - - // ----------------- autoCompile ----------------- var autoCompileInput = compileContainer.querySelector('#autoCompile') var autoCompile = false if (opts.config.exists('autoCompile')) { @@ -145,18 +143,11 @@ class CompileTab { if (autoCompile) { autoCompileInput.setAttribute('checked', autoCompile) } - autoCompileInput.addEventListener('change', function () { opts.config.set('autoCompile', autoCompileInput.checked) }) - var errorContainer = yo`
` - - /* ------------------------------------------------ - section CONTRACT DROPDOWN, DETAILS AND PUBLISH - ------------------------------------------------ */ var contractsDetails = {} - var contractEl = yo`
@@ -164,12 +155,13 @@ class CompileTab {
{ details() }}>Details
{ publish() }}>Publish on Swarm
-
- ` - - // HELPERS - - // GET NAMES OF ALL THE CONTRACTS +
` + var el = yo` +
+ ${compileContainer} + ${contractEl} + ${errorContainer} +
` function getContractNames (success, data) { var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`) contractNames.innerHTML = '' @@ -177,10 +169,7 @@ class CompileTab { contractNames.removeAttribute('disabled') opts.compiler.visitContracts((contract) => { contractsDetails[contract.name] = parseContracts(contract.name, contract.object, opts.compiler.getSource(contract.file)) - var contractName = yo` - ` + var contractName = yo`` contractNames.appendChild(contractName) }) self._api.resetDapp(contractsDetails) @@ -189,10 +178,8 @@ class CompileTab { self._api.resetDapp({}) } } - function details () { var select = contractEl.querySelector('select') - if (select.children.length > 0 && select.selectedIndex >= 0) { var contractName = select.children[select.selectedIndex].innerHTML var contractProperties = contractsDetails[contractName] @@ -204,15 +191,29 @@ class CompileTab { var questionMark = yo`` log.appendChild(yo`
-
${propertyName} ${copyDetails} ${questionMark}
- ${insertValue(contractProperties, propertyName)} -
- `) +
${propertyName} ${copyDetails} ${questionMark}
+ ${insertValue(contractProperties, propertyName)} + `) }) modalDialog(contractName, log, {label: ''}, {label: 'Close'}) } } - + function detailsHelpSection () { + return { + 'Assembly': 'Assembly opcodes describing the contract including corresponding solidity source code', + 'Opcodes': 'Assembly opcodes describing the contract', + 'Runtime Bytecode': 'Bytecode storing the state and being executed during normal contract call', + 'bytecode': 'Bytecode being executed during contract creation', + 'functionHashes': 'List of declared function and their corresponding hash', + 'gasEstimates': 'Gas estimation for each function call', + 'metadata': 'Contains all informations related to the compilation', + 'metadataHash': 'Hash representing all metadata information', + 'abi': 'ABI: describing all the functions (input/output params, scope, ...)', + 'name': 'Name of the compiled contract', + 'swarmLocation': 'Swarm url where all metadata information can be found (contract needs to be published first)', + 'web3Deploy': 'Copy/paste this code to any JavaScript/Web3 console to deploy this contract' + } + } function insertValue (details, propertyName) { var value = yo`
`
       var node
@@ -254,7 +255,6 @@ class CompileTab {
       if (node) value.appendChild(node)
       return value
     }
-
     function publish () {
       var selectContractNames = document.querySelector(`.${css.contractNames.classNames[0]}`)
       if (selectContractNames.children.length > 0 && selectContractNames.selectedIndex >= 0) {
@@ -279,38 +279,10 @@ class CompileTab {
         }
       }
     }
-
-    var el = yo`
-      

-        ${compileContainer}
-        ${contractEl}
-        ${errorContainer}
-      

-    `
-
     return { render () { return el } }
   }
 }
 
-function detailsHelpSection () {
-  return {
-    'Assembly': 'Assembly opcodes describing the contract including corresponding solidity source code',
-    'Opcodes': 'Assembly opcodes describing the contract',
-    'Runtime Bytecode': 'Bytecode storing the state and being executed during normal contract call',
-    'bytecode': 'Bytecode being executed during contract creation',
-    'functionHashes': 'List of declared function and their corresponding hash',
-    'gasEstimates': 'Gas estimation for each function call',
-    'metadata': 'Contains all informations related to the compilation',
-    'metadataHash': 'Hash representing all metadata information',
-    'abi': 'ABI: describing all the functions (input/output params, scope, ...)',
-    'name': 'Name of the compiled contract',
-    'swarmLocation': 'Swarm url where all metadata information can be found (contract needs to be published first)',
-    'web3Deploy': 'Copy/paste this code to any JavaScript/Web3 console to deploy this contract'
-  }
-}
-
-module.exports = CompileTab
-
 const css = csjs`
   .compileTabView {
     padding: 2%;
@@ -430,21 +402,21 @@ const css = csjs`
     animation: bounce 2s infinite;
   }
   @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
   }
   @-webkit-keyframes bounce {
-  0% {
-    margin-bottom: 0;
-    color: ${styles.colors.transparent};
-  }
-  70% {
-    margin-bottom: 0;
-    color: ${styles.rightPanel.text_Secondary};
-  }
-  100% {
-    margin-bottom: 0;
-    color: ${styles.colors.transparent};
+    0% {
+      margin-bottom: 0;
+      color: ${styles.colors.transparent};
+    }
+    70% {
+      margin-bottom: 0;
+      color: ${styles.rightPanel.text_Secondary};
+    }
+    100% {
+      margin-bottom: 0;
+      color: ${styles.colors.transparent};
+    }
   }
-}
 `