Merge pull request #705 from ethereum/payableTransact

Remove legend, add info about type (call/payable/not payable, restyle…

assets/css/universal-dapp.css

@@ -216,8 +216,8 @@
 }
 
 #runTabView .contractProperty.payable .call {
-	background-color: hsla(0, 82%, 82%, .5);  /* lightRed in style-guide.js */
-	border-color: hsla(0, 82%, 82%, .5);  /* lightRed in style-guide.js */
+	background-color: hsla(0, 82%, 82%, 1);  /* red in style-guide.js */
+	border-color: hsla(0, 82%, 82%, 1);  /* red in style-guide.js */
 	width: 25%;
 }
 

src/app.js

@@ -12,7 +12,7 @@ var OffsetToLineColumnConverter = require('./lib/offsetToLineColumnConverter')
 
 var QueryParams = require('./lib/query-params')
 var GistHandler = require('./lib/gist-handler')
-var helpers = require('./lib/helper')
+var helper = require('./lib/helper')
 var Storage = require('./storage')
 var Browserfiles = require('./app/files/browser-files')
 var chromeCloudStorageSync = require('./app/files/chromeCloudStorageSync')
@@ -219,7 +219,7 @@ function run () {
   // Add files received from remote instance (i.e. another browser-solidity)
   function loadFiles (filesSet) {
     for (var f in filesSet) {
-      filesProviders['browser'].set(helpers.createNonClashingName(f, filesProviders['browser']), filesSet[f].content)
+      filesProviders['browser'].set(helper.createNonClashingName(f, filesProviders['browser']), filesSet[f].content)
     }
     fileManager.switchFile()
   }

src/app/panels/file-panel.js

@@ -10,7 +10,7 @@ var modalDialog = require('../ui/modaldialog')
 var modalDialogCustom = require('../ui/modal-dialog-custom')
 var QueryParams = require('../../lib/query-params')
 var queryParams = new QueryParams()
-var helpers = require('../../lib/helper')
+var helper = require('../../lib/helper')
 
 var remix = require('ethereum-remix')
 var styleGuide = remix.ui.styleGuide
@@ -246,7 +246,7 @@ function filepanel (appAPI, filesProvider) {
   }
 
   function createNewFile () {
-    var newName = filesProvider['browser'].type + '/' + helpers.createNonClashingName('Untitled.sol', filesProvider['browser'])
+    var newName = filesProvider['browser'].type + '/' + helper.createNonClashingName('Untitled.sol', filesProvider['browser'])
     if (!filesProvider['browser'].set(newName, '')) {
       modalDialogCustom.alert('Failed to create file ' + newName)
     } else {

src/app/tabs/run-tab.js

@@ -69,6 +69,15 @@ var css = csjs`
     margin-top: 2%;
     border: none;
   }
+  .pendingTxsContainer  {
+    ${styles.displayBox}
+    display: flex;
+    flex-direction: column;
+    background-color: ${styles.colors.transparent};
+    margin-top: 2%;
+    border: none;
+    padding-bottom: 0;
+  }
   .container {
     ${styles.displayBox}
     margin-top: 2%;
@@ -76,6 +85,11 @@ var css = csjs`
   .contractNames {
     ${styles.dropdown}
   }
+  .subcontainer {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+  }
   .buttons {
     display: flex;
     cursor: pointer;
@@ -115,11 +129,11 @@ var css = csjs`
     color: ${styles.colors.lightGrey};
     font-style: italic;
   }
-  .legend {
-    float: right;
-    display: flex;
-    word-break: normal;
-    margin-left: auto;
+  .pendingTxsText {
+    ${styles.displayBox}
+    text-align: center;
+    color: ${styles.colors.lightGrey};
+    font-style: italic;
   }
   .item {
     margin-right: 1em;
@@ -138,13 +152,21 @@ var css = csjs`
     color: ${styles.colors.lightBlue};
     margin-right: .3em;
   }
+  .pendingContainer {
+    display: flex;
+    align-items: baseline;
+  }
   .pending {
-    background-color: ${styles.colors.lightRed};
-    width: 75px;
     height: 25px;
     text-align: center;
     padding-left: 10px;
     border-radius: 3px;
+    margin-left: 5px;
+  }
+  .icon {
+    font-size: 12px;
+    color: ${styles.colors.orange};
+    margin-left: 10%;
   }
 `
 console.log(styles.displayBox.toString())
@@ -155,16 +177,26 @@ module.exports = runTab
 var instanceContainer = yo`<div class="${css.instanceContainer}"></div>`
 var noInstancesText = yo`<div class="${css.noInstancesText}">No Contract Instances.</div>`
 
+var pendingTxsText = yo`<div class="${css.pendingTxsText}"></div>`
+var pendingTxsContainer = yo`<div class="${css.pendingTxsContainer}">${pendingTxsText}</div>`
+
 function runTab (container, appAPI, appEvents, opts) {
   var el = yo`
   <div class="${css.runTabView}" id="runTabView">
     ${settings(appAPI, appEvents)}
     ${contractDropdown(appAPI, appEvents, instanceContainer)}
+    ${pendingTxsContainer}
     ${instanceContainer}
   </div>
   `
   container.appendChild(el)
 
+  // PENDING transactions
+  function updatePendingTxs (container, appAPI) {
+    var pendingCount = Object.keys(appAPI.udapp().pendingTransactions()).length
+    pendingTxsText.innerText = pendingCount + ' pending transactions'
+  }
+
   // DROPDOWN
   var selectExEnv = el.querySelector('#selectExEnvOptions')
   selectExEnv.addEventListener('change', function (event) {
@@ -211,10 +243,6 @@ function updateAccountBalances (container, appAPI) {
   })
 }
 
-function updatePendingTxs (container, appAPI) {
-  container.querySelector('#pendingtxs').innerText = Object.keys(appAPI.udapp().pendingTransactions()).length + ' pending'
-}
-
 /* ------------------------------------------------
     section CONTRACT DROPDOWN and BUTTONS
 ------------------------------------------------ */
@@ -231,7 +259,9 @@ function contractDropdown (appAPI, appEvents, instanceContainer) {
   var selectContractNames = yo`<select class="${css.contractNames}" disabled></select>`
   var el = yo`
     <div class="${css.container}">
-      ${selectContractNames} ${legend()}
+      <div class="${css.subcontainer}">
+        ${selectContractNames}
+      </div>
       <div class="${css.buttons}">
         <div class="${css.button}">
           <div class="${css.atAddress}" onclick=${function () { loadFromAddress(appAPI) }}>At Address</div>
@@ -397,19 +427,3 @@ function settings (appAPI, appEvents) {
 
   return el
 }
-
-/* ------------------------------------------------
-              section  LEGEND
------------------------------------------------- */
-function legend () {
-  var el =
-  yo`
-    <div class="${css.legend}">
-      <div class="${css.item}"><i class="fa fa-circle ${css.call}" aria-hidden="true"></i>Call</div>
-      <div class="${css.item}"><i class="fa fa-circle ${css.transact}" aria-hidden="true"></i>Transact</div>
-      <div class="${css.item}"><i class="fa fa-circle ${css.payable}" aria-hidden="true"></i>Transact(Payable)</div>
-      <div class="${css.item} ${css.pending}" id="pendingtxs"></div>
-    </div>
-  `
-  return el
-}

src/universal-dapp.js

@@ -334,6 +334,7 @@ UniversalDApp.prototype.getCallButton = function (args) {
 
   if (lookupOnly) {
     $contractProperty.addClass('constant')
+    button.attr('title', (title + ' - call'))
     call()
   }
 
@@ -343,6 +344,11 @@ UniversalDApp.prototype.getCallButton = function (args) {
 
   if (args.funABI.payable === true) {
     $contractProperty.addClass('payable')
+    button.attr('title', (title + ' - transact (payable)'))
+  }
+
+  if (!lookupOnly && args.funABI.payable === false) {
+    button.attr('title', (title + ' - transact (not payable)'))
   }
 
   return $contractProperty

test-browser/tests/compiling.js

@@ -30,8 +30,8 @@ function runTests (browser) {
   contractHelper.testContracts(browser, sources.sources['browser/Untitled.sol'], ['browser/Untitled.sol:TestContract'], function () {
     browser.click('.runView')
     .click('#runTabView div[class^="create"]')
-    .waitForElementPresent('.instance button[title="f"]')
-    .click('.instance button[title="f"]')
+    .waitForElementPresent('.instance button[title="f - transact (not payable)"]')
+    .click('.instance button[title="f - transact (not payable)"]')
     .end()
     /*
     TODO: this will be logged in the dom console