Add card.js, move pending to terminal and restructure recorder

src/app.js

@@ -523,7 +523,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
       editor: self._components.editor,
       config: self._api.config,
       txListener: txlistener,
-      contextview: self._components.contextView
+      contextview: self._components.contextView,
+      udapp: () => { return udapp }
     }
   })
   this._components.editorpanel.event.register('resize', direction => self._adjustLayout(direction))

src/app/panels/editor-panel.js

@@ -28,6 +28,7 @@ class EditorPanel {
       terminal: new Terminal({
         api: {
           cmdInterpreter: self._api.cmdInterpreter,
+          udapp: self._api.udapp,
           getPosition (event) {
             var limitUp = 36
             var limitDown = 20

src/app/panels/styles/terminal-styles.js

@@ -27,20 +27,20 @@ var css = csjs`
     display           : flex;
     align-items       : center;
     width             : 100%;
-    padding           : 5px;
   }
   .clear           {
-    margin-left       : 10px;
+    margin-right      : 20px;
-    margin-right      : 10px;
     width             : 10px;
     cursor            : pointer;
     color             : ${styles.terminal.icon_Color_TogglePanel};
+    display           : flex;
   }
   .clear:hover              {
     color             : ${styles.terminal.icon_HoverColor_Menu};
   }
   .toggleTerminal              {
-    margin-right      : 10px;
+    margin-right      : 20px;
+    margin-left       : 20px;
     font-size         : 14px;
     font-weight       : bold;
     cursor            : pointer;
@@ -56,6 +56,7 @@ var css = csjs`
     height            : 100%;
     overflow-y        : auto;
     font-family       : monospace;
+    margin            : 0px;
   }
   .terminal_bg     {
     display           : flex;
@@ -137,9 +138,21 @@ var css = csjs`
     align-items                 : center;
     justify-content             : center;
   }
-  .listen {
+  .listen {}
-    min-width         : 120px;
+  .verticalLine {
-    display           : flex;
+    border-left       : 1px solid ${styles.colors.veryLightGrey};
+    height            : 65%;
+    margin-right      : 30px;   }
+  .pendingTx {
+    border            : 1px solid ${styles.terminal.icon_HoverColor_Menu};
+    border-radius: 50%;
+    margin-right: 30px;
+    min-width: 13px;
+    height: 13px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 10px;
   }
   .dragbarHorizontal  {
     position          : absolute;

src/app/panels/terminal.js

@@ -105,23 +105,40 @@ class Terminal {
         ${self._view.input}
       </div>
     `
-    self._view.icon = yo`<i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize} class="${css.toggleTerminal} fa fa-angle-double-down"></i>`
+    self._view.icon = yo`
-    self._view.dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
+      <i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize}
+      class="${css.toggleTerminal} fa fa-angle-double-down"></i>`
+    self._view.dragbar = yo`
+      <div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
     self._view.dropdown = self._components.dropdown.render()
+    self._view.pendingTxCount = yo`<div class=${css.pendingTx}>${self._view.pendingTxCount}</div>`
     self._view.bar = yo`
       <div class=${css.bar}>
         ${self._view.dragbar}
         <div class=${css.menu}>
           ${self._view.icon}
           <div class=${css.clear} onclick=${clear}>
-          <i class="fa fa-ban" aria-hidden="true" onmouseenter=${hover} onmouseleave=${hover}></i>
+            <i class="fa fa-ban" aria-hidden="true" title="Clear console"
+            onmouseenter=${hover} onmouseleave=${hover}></i>
+          </div>
+          ${self._view.pendingTxCount}
+          <div class=${css.verticalLine}></div>
+          <div class=${css.listen}>
+            <input onchange=${listenOnNetwork} type="checkbox"
+            title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you">
           </div>
           ${self._view.dropdown}
-          <div class=${css.search}><i class="fa fa-search ${css.searchIcon}" aria-hidden="true"></i><input type="text" class=${css.filter} onkeydown=${filter}  placeholder="Search transactions"></div>
+          <div class=${css.search}>
-          <div class=${css.listen}><input onchange=${listenOnNetwork} type="checkbox"><label title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created from the GUI">Listen on network</label></div>
+            <i class="fa fa-search ${css.searchIcon}" aria-hidden="true"></i>
+            <input type="text" class=${css.filter} onkeydown=${filter}  placeholder="Search transactions">
+          </div>
         </div>
       </div>
     `
+    setInterval(() => {
+      updatePendingTxs(self._api, self._view.pendingTxCount)
+    }, 5000)
+
     function listenOnNetwork (ev) {
       self.event.trigger('listenOnNetWork', [ev.currentTarget.checked])
     }
@@ -563,5 +580,10 @@ function domTerminalFeatures (self, scopedCommands) {
 }
 
 function blockify (el) { return yo`<div class=${css.block}>${el}</div>` }
+// PENDING TX
+function updatePendingTxs (api, el) {
+  var count = Object.keys(api.udapp().pendingTransactions()).length
+  el.innerText = count
+}
 
 module.exports = Terminal

src/app/tabs/run-tab.js

@@ -1,76 +1,116 @@
 'use strict'
 var $ = require('jquery')
 var yo = require('yo-yo')
-var helper = require('../../lib/helper.js')
 var remixLib = require('remix-lib')
+var ethJSUtil = require('ethereumjs-util')
+var csjs = require('csjs-inject')
 var txExecution = remixLib.execution.txExecution
 var txFormat = remixLib.execution.txFormat
 var txHelper = remixLib.execution.txHelper
+var EventManager = remixLib.EventManager
+var helper = require('../../lib/helper.js')
 var executionContext = require('../../execution-context')
 var modalDialogCustom = require('../ui/modal-dialog-custom')
 var copyToClipboard = require('../ui/copy-to-clipboard')
+var Card = require('../ui/card')
 var Recorder = require('../../recorder')
-var EventManager = remixLib.EventManager
 var addTooltip = require('../ui/tooltip')
-var ethJSUtil = require('ethereumjs-util')
-var MultiParamManager = require('../../multiParamManager')
-
-var csjs = require('csjs-inject')
 var css = require('./styles/run-tab-styles')
-
+var MultiParamManager = require('../../multiParamManager')
-var instanceContainer = yo`<div class="${css.instanceContainer}"></div>`
-
-var instanceContainerTitle = yo`
-  <div class=${css.instanceContainerTitle}>UDapps of deployed contracts</div>`
-var noInstancesText = yo`
-  <div class="${css.noInstancesText}">Currently you have no contract instances.</div>`
-
-var pendingTxsText = yo`<span>0 pending transactions</span>`
 
 function runTab (appAPI = {}, appEvents = {}, opts = {}) {
-  var container = yo`<div class="${css.runTabView}" id="runTabView" ></div>`
+  /* -------------------------
+            VARIABLES
+  --------------------------- */
+  var self = this
   var event = new EventManager()
-  var clearInstanceElement = yo`
+  self._view = {}
-    <i class="${css.clearinstance} ${css.icon} fa fa-trash"
+  self.data = {
-      onclick=${() => { event.trigger('clearInstance', []) }}
+    count: 0,
-      title="Clear Instances List" aria-hidden="true">
+    text: `All transactions (deployed contracts and function executions)
+    in this environment can be saved and replayed in
+    another environment. i.e. Transactions created in
+    Javascript VM can be replayed in the Ropsten network.`
+  }
+
+  self._view.recorderCount = yo`<span>0</span>`
+  self._view.instanceContainer = yo`<div class="${css.instanceContainer}"></div>`
+  self._view.clearInstanceElement = yo`
+    <i class="${css.clearinstance} ${css.icon} fa fa-trash" onclick=${() => clearInstanceList(self)}
+    title="Clear instances list and reset recorder" aria-hidden="true">
   </i>`
+  self._view.instanceContainerTitle = yo`
+    <div class=${css.instanceContainerTitle}
+      title="Autogenerated generic user interfaces for interaction with deployed contracts">
+      UI for Deployed Contracts
+      ${self._view.clearInstanceElement}
+    </div>`
+  self._view.noInstancesText = yo`
+    <div class="${css.noInstancesText}">
+      Currently you have no contract instances to interact with.
+    </div>`
 
-  clearInstanceElement.addEventListener('click', () => {
+  var container = yo`<div class="${css.runTabView}" id="runTabView" ></div>`
-    event.trigger('clearInstance', [])
+  var recorderInterface = makeRecorder(event, appAPI, appEvents, opts, self)
-  })
+
-  var recorderInterface = makeRecorder(event, appAPI, appEvents, opts)
+  self._view.collapsedView = yo`
-  var pendingTxsContainer = yo`
+    <div class=${css.recorderCollapsedView}>
-  <div class="${css.pendingTxsContainer}">
+      <div class=${css.recorderCount}>${self._view.recorderCount}</div>
-    <div class="${css.pendingTxsText}">
+    </div>`
-      ${pendingTxsText}
+
-      <span class="${css.transactionActions}">
+  self._view.expandedView = yo`
+    <div class=${css.recorderExpandedView}>
+      <div class=${css.recorderDescription}>
+        ${self.data.text}
+      </div>
+      <div class="${css.transactionActions}">
         ${recorderInterface.recordButton}
         ${recorderInterface.runButton}
-        ${clearInstanceElement}
+        </div>
-      </span>
       </div>
     </div>`
 
+  self.recorderOpts = {
+    title: 'Events recorded:',
+    collapsedView: self._view.collapsedView
+  }
+
+  var recorderCard = new Card({}, {}, self.recorderOpts)
+  recorderCard.event.register('expandCollapseCard', (arrow, body, status) => {
+    body.innerHTML = ''
+    status.innerHTML = ''
+    if (arrow === 'up') {
+      status.appendChild(self._view.collapsedView)
+      body.appendChild(self._view.expandedView)
+    } else if (arrow === 'down') {
+      status.appendChild(self._view.collapsedView)
+    }
+  })
+    /* -------------------------
+         MAIN HTML ELEMENT
+    --------------------------- */
   var el = yo`
   <div>
     ${settings(container, appAPI, appEvents, opts)}
-    ${contractDropdown(event, appAPI, appEvents, opts, instanceContainer)}
+    ${contractDropdown(event, appAPI, appEvents, opts, self)}
-    ${pendingTxsContainer}
+    ${recorderCard.render()}
-    ${instanceContainer}
+    ${self._view.instanceContainer}
   </div>
   `
   container.appendChild(el)
 
-  // PENDING transactions
+  /* -------------------------
-  function updatePendingTxs (container, appAPI) {
+        HELPER FUNCTIONS
-    var pendingCount = Object.keys(opts.udapp.pendingTransactions()).length
+  --------------------------- */
-    pendingTxsText.innerText = pendingCount + ' pending transactions'
-  }
 
   // DROPDOWN
   var selectExEnv = el.querySelector('#selectExEnvOptions')
 
+  function clearInstanceList (self) {
+    event.trigger('clearInstance', [])
+    self._view.recorderCount.innerText = 0
+  }
+
   function setFinalContext () {
     // set the final context. Cause it is possible that this is not the one we've originaly selected
     selectExEnv.value = executionContext.getProvider()
@@ -95,20 +135,23 @@ function runTab (appAPI = {}, appEvents = {}, opts = {}) {
       modalDialogCustom.alert(alertMsg)
     }, setFinalContext)
   })
+
   selectExEnv.value = executionContext.getProvider()
   executionContext.event.register('contextChanged', (context, silent) => {
     setFinalContext()
   })
+
   fillAccountsList(appAPI, opts, el)
   setInterval(() => {
     updateAccountBalances(container, appAPI)
-    updatePendingTxs(container, appAPI)
   }, 10000)
 
   event.register('clearInstance', () => {
+    var instanceContainer = self._view.instanceContainer
+    var instanceContainerTitle = self._view.instanceContainerTitle
     instanceContainer.innerHTML = '' // clear the instances list
     instanceContainer.appendChild(instanceContainerTitle)
-    instanceContainer.appendChild(noInstancesText)
+    instanceContainer.appendChild(self._view.noInstancesText)
   })
   return { render () { return container } }
 }
@@ -143,7 +186,7 @@ function updateAccountBalances (container, appAPI) {
 /* ------------------------------------------------
            RECORDER
 ------------------------------------------------ */
-function makeRecorder (events, appAPI, appEvents, opts) {
+function makeRecorder (events, appAPI, appEvents, opts, self) {
   var recorder = new Recorder(opts.compiler, {
     events: {
       udapp: appEvents.udapp,
@@ -152,23 +195,26 @@ function makeRecorder (events, appAPI, appEvents, opts) {
     },
     api: appAPI
   })
+  recorder.event.register('newTxRecorded', (count) => {
+    self.data.count = count
+    self._view.recorderCount.innerText = count
+  })
   var css2 = csjs`
-    .container,
+    .container {}
-    .runTxs,
+    .runTxs {}
-    .recorder {
+    .recorder {}
-    }
   `
 
+  var runButton = yo`<i class="fa fa-play runtransaction ${css2.runTxs} ${css.icon}"  title="Run Transactions" aria-hidden="true"></i>`
   var recordButton = yo`
     <i class="fa fa-floppy-o savetransaction ${css2.recorder} ${css.icon}"
       onclick=${triggerRecordButton} title="Save Transactions" aria-hidden="true">
     </i>`
-  var runButton = yo`<i class="fa fa-play runtransaction ${css2.runTxs} ${css.icon}"  title="Run Transactions" aria-hidden="true"></i>`
 
   function triggerRecordButton () {
     var txJSON = JSON.stringify(recorder.getAll(), null, 2)
     var path = appAPI.currentPath()
-    modalDialogCustom.prompt(null, 'save ran transactions to file (e.g. `scenario.json`). The file is going to be saved under ' + path, 'scenario.json', input => {
+    modalDialogCustom.prompt(null, 'Transactions will be saved in a file under ' + path, 'scenario.json', input => {
       var fileProvider = appAPI.fileProviderOf(path)
       if (fileProvider) {
         var newFile = path + input
@@ -183,6 +229,7 @@ function makeRecorder (events, appAPI, appEvents, opts) {
       }
     })
   }
+
   runButton.onclick = () => {
     var currentFile = appAPI.config.get('currentFile')
     appAPI.fileProviderOf(currentFile).get(currentFile, (error, json) => {
@@ -201,9 +248,10 @@ function makeRecorder (events, appAPI, appEvents, opts) {
             return modalDialogCustom.alert('Invalid Scenario File, please try again')
           }
           if (txArray.length) {
+            var noInstancesText = self._view.noInstancesText
             if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
-            recorder.run(txArray, accounts, options, abis, linkReferences, opts.udapp, (abi, address, contractName) => {
+            recorder.run(txArray, accounts, options, abis, linkReferences, (abi, address, contractName) => {
-              instanceContainer.appendChild(opts.udappUI.renderInstanceFromABI(abi, address, contractName))
+              self._view.instanceContainer.appendChild(opts.udappUI.renderInstanceFromABI(abi, address, contractName))
             })
           }
         } else {
@@ -212,15 +260,18 @@ function makeRecorder (events, appAPI, appEvents, opts) {
       }
     })
   }
+
   return { recordButton, runButton }
 }
 /* ------------------------------------------------
     CONTRACT (deploy or access deployed)
 ------------------------------------------------ */
 
-function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
+function contractDropdown (events, appAPI, appEvents, opts, self) {
+  var instanceContainer = self._view.instanceContainer
+  var instanceContainerTitle = self._view.instanceContainerTitle
   instanceContainer.appendChild(instanceContainerTitle)
-  instanceContainer.appendChild(noInstancesText)
+  instanceContainer.appendChild(self._view.noInstancesText)
   var compFails = yo`<i title="Contract compilation failed. Please check the compile tab for more information." class="fa fa-times-circle ${css.errorIcon}" ></i>`
   appEvents.compiler.register('compilationFinished', function (success, data, source) {
     getContractNames(success, data)
@@ -234,7 +285,6 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
   })
 
   var atAddressButtonInput = yo`<input class="${css.input} ataddressinput" placeholder="Load contract from Address" title="atAddress" />`
-
   var selectContractNames = yo`<select class="${css.contractNames}" disabled></select>`
 
   function getSelectedContract () {
@@ -248,6 +298,7 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
     return null
   }
   appAPI.getSelectedContract = getSelectedContract
+
   var createPanel = yo`<div class="${css.button}"></div>`
 
   var el = yo`
@@ -281,7 +332,7 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
 
   selectContractNames.addEventListener('change', setInputParamsPlaceHolder)
 
-  // ADD BUTTONS AT ADDRESS AND CREATE
+  // DEPLOY INSTANCE
   function createInstance (args) {
     var selectedContract = getSelectedContract()
 
@@ -304,7 +355,7 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
                 return
               }
             }
-            if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
+            self._view.noInstancesText.style.display = 'none'
             var address = isVM ? txResult.result.createdAddress : txResult.result.contractAddress
             instanceContainer.appendChild(opts.udappUI.renderInstance(selectedContract.contract.object, address, selectContractNames.value))
           } else {
@@ -322,8 +373,9 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
     })
   }
 
+  // ACCESS DEPLOYED INSTANCE
   function loadFromAddress (appAPI) {
-    if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
+    self._view.noInstancesText.style.display = 'none'
     var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`)
     var address = atAddressButtonInput.value
     if (!ethJSUtil.isValidAddress(address)) {
@@ -365,12 +417,11 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
 
   return el
 }
-
 /* ------------------------------------------------
     section SETTINGS: Environment, Account, Gas, Value
 ------------------------------------------------ */
 function settings (container, appAPI, appEvents, opts) {
-  // SETTINGS HTML
+  // VARIABLES
   var net = yo`<span class=${css.network}></span>`
   const updateNetwork = () => {
     executionContext.detectNetwork((err, { id, name } = {}) => {
@@ -382,18 +433,6 @@ function settings (container, appAPI, appEvents, opts) {
       }
     })
   }
-  setInterval(updateNetwork, 5000)
-  function newAccount () {
-    opts.udapp.newAccount('', (error, address) => {
-      if (!error) {
-        container.querySelector('#txorigin').appendChild(yo`<option value=${address}>${address}</option>`)
-        addTooltip(`account ${address} created`)
-      } else {
-        addTooltip('Cannot create an account: ' + error)
-      }
-    })
-  }
-
   var environmentEl = yo`
     <div class="${css.crow}">
       <div id="selectExEnv" class="${css.col1_1}">
@@ -446,6 +485,7 @@ function settings (container, appAPI, appEvents, opts) {
       </select>
     </div>
   `
+  // DOM ELEMENT
   var el = yo`
     <div class="${css.settings}">
       ${environmentEl}
@@ -453,15 +493,26 @@ function settings (container, appAPI, appEvents, opts) {
       ${gasPriceEl}
       ${valueEl}
     </div>
-`
+  `
-
+  // HELPER FUNCTIONS AND EVENTS
-  // EVENTS
   appEvents.udapp.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
     if (error) return
     if (!lookupOnly) el.querySelector('#value').value = '0'
     updateAccountBalances(container, appAPI)
   })
 
+  setInterval(updateNetwork, 5000)
+  function newAccount () {
+    appAPI.newAccount('', (error, address) => {
+      if (!error) {
+        container.querySelector('#txorigin').appendChild(yo`<option value=${address}>${address}</option>`)
+        addTooltip(`account ${address} created`)
+      } else {
+        addTooltip('Cannot create an account: ' + error)
+      }
+    })
+  }
+
   return el
 }
 

src/app/tabs/styles/run-tab-styles.js

@@ -9,8 +9,11 @@ var css = csjs`
     flex-direction: column;
   }
   .instanceContainerTitle {
-    font-size: 20px;
     font-weight: bold;
+    margin-bottom: 5%;
+    font-size: 12px;
+    display: flex;
+    justify-content: space-between;
   }
   .settings {
     ${styles.rightPanel.runTab.box_RunTab}
@@ -58,11 +61,13 @@ var css = csjs`
     width: 250px;
   }
   .instanceContainer {
+    ${styles.rightPanel.runTab.box_Instance}
     display: flex;
     flex-direction: column;
-    margin-top: 2%;
+    margin-bottom: 2%;
     border: none;
     text-align: center;
+    padding: 10px 0px 15px 15px;
   }
   .pendingTxsContainer  {
     ${styles.rightPanel.runTab.box_Instance}
@@ -74,7 +79,15 @@ var css = csjs`
   }
   .container {
     ${styles.rightPanel.runTab.box_RunTab}
-    margin-top: 2%;
+    margin-bottom: 2%;
+  }
+  .recorderCollapsedView,
+  .recorderExpandedView {
+    display: flex;
+    flex-direction: column;
+  }
+  .recorderDescription {
+    margin: 0 15px 15px 0;
    }
   .contractNames {
     ${styles.rightPanel.runTab.dropdown_RunTab}
@@ -109,6 +122,7 @@ var css = csjs`
   .noInstancesText {
     ${styles.rightPanel.runTab.box_Instance}
     font-style: italic;
+    text-align: left;
   }
   .pendingTxsText {
     ${styles.rightPanel.runTab.borderBox_Instance}
@@ -180,14 +194,14 @@ var css = csjs`
   .networkItem {
     margin-right: 5px;
   }
-  .clearinstance {}
+  .clearinstance {
+    margin-right: 15px;
+  }
   .transactionActions {
     display: flex;
-    width: 70px;
+    justify-content: space-evenly;
-    justify-content: space-between;
+    ${styles.rightPanel.runTab.box_Info_RunTab};
-    border: 1px solid ${styles.rightPanel.runTab.additionalText_Color};
+    width: 145px;
-    padding: 5px;
-    border-radius: 3px;
 }
 `
 

src/app/ui/card.js

@@ -0,0 +1,93 @@
+var yo = require('yo-yo')
+var csjs = require('csjs-inject')
+var styleGuide = require('./styles-guide/theme-chooser')
+var styles = styleGuide.chooser()
+var remixLib = require('remix-lib')
+var EventManager = remixLib.EventManager
+
+module.exports = class Card {
+  constructor (api, events, opts) {
+    const self = this
+    self._api = api
+    self._events = events
+    self._opts = opts
+    self._view = {}
+    self.event = new EventManager()
+  }
+  render () {
+    const self = this
+    if (self._view.el) return self._view.el
+
+    self._view.cardBody = yo`<div class=${css.cardBody}></div>`
+    self._view.arrow = yo`<i class="${css.arrow} fa fa-angle-up"
+    onclick=${(ev) => trigger(ev.target)}></i>`
+
+    self._view.expandCollapseButton = yo`
+    <div class=${css.expandCollapseButton}>${self._view.arrow}</div>`
+
+    self._view.statusBar = yo`<div class=${css.statusBar}>${self._opts.collapsedView}</div>`
+
+    self._view.cardHeader = yo`
+    <div class=${css.cardHeader}>
+      <div class=${css.cardTitles}>
+        <div class=${css.cardTitle}>${self._opts.title}</div>
+        ${self._view.statusBar}
+      </div>
+      <div class=${css.expandCollapseButton}>${self._view.expandCollapseButton}</div>
+    </div>`
+
+    function trigger (el) {
+      var body = self._view.cardBody
+      var status = self._view.statusBar
+      el.classList.toggle('fa-angle-down')
+      var arrow = el.classList.toggle('fa-angle-up') ? 'down' : 'up'
+      self.event.trigger('expandCollapseCard', [arrow, body, status])
+    }
+
+    // HTML
+    self._view.el = yo`
+      <div class=${css.cardContainer}>
+        ${self._view.cardHeader}
+        ${self._view.cardBody}
+      </div>`
+
+    return self._view.el
+  }
+
+}
+
+const css = csjs`
+  .cardContainer {
+    ${styles.remix.solidBox};
+    margin-bottom       : 2%;
+  }
+  .cardHeader {
+    display             : flex;
+    justify-content     : space-between;
+  }
+  .statusBar {}
+  .cardBody {}
+  .cardTitles {
+    display             : flex;
+    flex-direction      : row;
+    align-items         : center;
+  }
+  .cardTitle {
+    font-size           : 13px;
+    font-weight         : bold;
+    color               : ${styles.appProperties.mainText_Color};
+    margin-right        : 5px;
+  }
+  .expandCollapseButton {}
+  .arrow {
+    margin-right        : 15px;
+    color               : ${styles.appProperties.icon_Color};
+    font-weight         : bold;
+    cursor              : pointer;
+    font-size           : 14px;
+  }
+  .arrow:hover {
+    color               : ${styles.appProperties.icon_HoverColor};
+  }
+
+`

src/app/ui/styles-guide/style-guide.js

@@ -390,7 +390,12 @@ function styleGuide () {
       tooltip_CopyToClipboard_Color: appProperties.tooltip_Color,
 
       icon_Color_CopyToClipboard: appProperties.icon_Color,
-      icon_HoverColor_CopyToClipboard: appProperties.icon_HoverColor
+      icon_HoverColor_CopyToClipboard: appProperties.icon_HoverColor,
+
+      solidBox: appProperties.uiElements.solidBorderBox({
+        BackgroundColor: appProperties.solidBox_BackgroundColor,
+        Color: appProperties.solidBox_TextColor
+      })
     },
 
     /* ------------------------------------------------------
@@ -569,6 +574,12 @@ function styleGuide () {
           Color: appProperties.solidBox_TextColor
         }),
 
+        box_Info_RunTab: appProperties.uiElements.dottedBorderBox({
+          BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
+          BorderColor: appProperties.solidBorderBox_BorderColor,
+          Color: appProperties.solidBorderBox_TextColor
+        }),
+
         dropdown_RunTab: appProperties.uiElements.dropdown({
           BackgroundColor: appProperties.dropdown_BackgroundColor,
           BorderColor: appProperties.dropdown_BorderColor,

src/app/ui/styles/dropdown-styles.js

@@ -10,6 +10,7 @@ var css = csjs`
     display           : flex;
     flex-direction    : column;
     margin-right      : 10px;
+    width             : auto;
   }
   .selectbox          {
     display           : flex;

src/recorder.js

@@ -131,6 +131,7 @@ class Recorder {
   append (timestamp, record) {
     var self = this
     self.data.journal.push({ timestamp, record })
+    self.event.trigger('newTxRecorded', [self.data.journal.length])
   }
 
   /**

src/universal-dapp-styles.js

@@ -10,7 +10,7 @@ var css = csjs`
   .title {
     ${styles.rightPanel.runTab.titlebox_RunTab}
     display: flex;
-    justify-content: end;
+    justify-content: space-between;
     align-items: center;
     font-size: 11px;
     height: 30px;
@@ -35,11 +35,9 @@ var css = csjs`
     color: ${styles.rightPanel.runTab.icon_AltColor_Instance_CopyToClipboard};
   }
   .instance {
-    ${styles.rightPanel.runTab.box_Instance};
+    min-width: 310px;
-    margin-bottom: 10px;
+    display: flex;
-    padding: 10px 15px 15px 15px;
+    flex-direction: column;
-    position: relative;
-    overflow: visible;
   }
   .instance .title:before {
     content: "\\25BE";
@@ -81,6 +79,7 @@ var css = csjs`
   .closeIcon {
     font-size: 12px;
     cursor: pointer;
+    margin-left: 5px;
   }
   .udappClose {
     display: flex;

src/universal-dapp-ui.js

@@ -34,9 +34,8 @@ UniversalDAppUI.prototype.renderInstance = function (contract, address, contract
 UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address, contractName) {
   var self = this
 
-
   address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
-  var instance = yo`<div class="instance ${css.instance}" id="instance${address}"></div>`
+  var instance = yo`<div class="instance ${css.instance} ${css.hidesub}" id="instance${address}"></div>`
   var context = self.udapp.context()
 
   var shortAddress = helper.shortenAddress(address)
@@ -48,7 +47,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
 
   if (self.udapp.removable_instances) {
     var close = yo`<div class="${css.udappClose}" onclick=${remove}><i class="${css.closeIcon} fa fa-close" aria-hidden="true"></i></div>`
-    instance.appendChild(close)
+    title.appendChild(close)
   }
 
   function remove () {