Fix bugs

src/app/tabs/run-tab.js

@@ -355,7 +355,8 @@ function contractDropdown (events, appAPI, appEvents, opts, self) {
                 return
               }
             }
-            self._view.noInstancesText.style.display = 'none'
+            var noInstancesText = self._view.noInstancesText
+            if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
             var address = isVM ? txResult.result.createdAddress : txResult.result.contractAddress
             instanceContainer.appendChild(opts.udappUI.renderInstance(selectedContract.contract.object, address, selectContractNames.value))
           } else {
@@ -375,7 +376,8 @@ function contractDropdown (events, appAPI, appEvents, opts, self) {
 
   // ACCESS DEPLOYED INSTANCE
   function loadFromAddress (appAPI) {
-    self._view.noInstancesText.style.display = 'none'
+    var noInstancesText = self._view.noInstancesText
+    if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
     var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`)
     var address = atAddressButtonInput.value
     if (!ethJSUtil.isValidAddress(address)) {

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

@@ -20,6 +20,17 @@ var css = csjs`
     margin-bottom: 2%;
     padding: 10px 15px 15px 15px;
   }
+  .recorderCount {
+    border: 1px solid ${styles.rightPanel.runTab.icon_HoverColor};
+    border-radius: 50%;
+    margin-right: 30px;
+    min-width: 13px;
+    height: 13px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 10px;
+  }
   .crow {
     margin-top: .5em;
     display: flex;

src/universal-dapp-styles.js

@@ -21,6 +21,9 @@ var css = csjs`
     overflow: visible;
     margin-bottom: 10px;
   }
+  .noInstancesText {
+    
+  }
   .titleLine {
     display: flex;
     align-items: baseline;

src/universal-dapp-ui.js

@@ -14,7 +14,6 @@ var MultiParamManager = require('./multiParamManager')
 function UniversalDAppUI (udapp, opts = {}) {
   var self = this
   this.udapp = udapp
-
   self.el = yo`<div class=${css.udapp}></div>`
 }
 
@@ -23,6 +22,10 @@ UniversalDAppUI.prototype.reset = function () {
 }
 
 UniversalDAppUI.prototype.renderInstance = function (contract, address, contractName) {
+  var noInstances = document.querySelector('[class^="noInstancesText"]')
+  if (noInstances) {
+    noInstances.parentNode.removeChild(noInstances)
+  }
   var abi = this.udapp.getABI(contract)
   return this.renderInstanceFromABI(abi, address, contractName)
 }
@@ -33,7 +36,6 @@ UniversalDAppUI.prototype.renderInstance = function (contract, address, contract
 // this returns a DOM element
 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} ${css.hidesub}" id="instance${address}"></div>`
   var context = self.udapp.context()
@@ -51,10 +53,15 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
   }
 
   function remove () {
+    instance.remove()
     var instanceContainer = document.querySelector('[class^="instanceContainer"]')
-    var noInstancesText = yo`<div class="${css.noInstancesText}">Currently you have no contract instances.</div>`
+    if (instanceContainer.children.length === 1) {
+      var noInstancesText = yo`
+        <div class="${css.noInstancesText}">
+          Currently you have no contract instances to interact with.
+        </div>`
       instanceContainer.appendChild(noInstancesText)
-    instance.remove()
+    }
   }
 
   function toggleClass () {