convert universal dapp ui to a class and update syntax

src/app/ui/universal-dapp-ui.js

 /* global */
 'use strict'
 
-var $ = require('jquery')
-var yo = require('yo-yo')
-var ethJSUtil = require('ethereumjs-util')
-var BN = ethJSUtil.BN
-var helper = require('../../lib/helper')
-var copyToClipboard = require('./copy-to-clipboard')
-var css = require('../../universal-dapp-styles')
-var MultiParamManager = require('./multiParamManager')
-var remixLib = require('remix-lib')
-var txFormat = remixLib.execution.txFormat
-var txHelper = remixLib.execution.txHelper
-
-var confirmDialog = require('./confirmDialog')
-var modalCustom = require('./modal-dialog-custom')
-var modalDialog = require('./modaldialog')
-var TreeView = require('./TreeView')
-
-function UniversalDAppUI (blockchain, logCallback) {
-  this.blockchain = blockchain
-  this.logCallback = logCallback
-  this.compilerData = {contractsDetails: {}}
-}
+const $ = require('jquery')
+const yo = require('yo-yo')
+const ethJSUtil = require('ethereumjs-util')
+const BN = ethJSUtil.BN
+const helper = require('../../lib/helper')
+const copyToClipboard = require('./copy-to-clipboard')
+const css = require('../../universal-dapp-styles')
+const MultiParamManager = require('./multiParamManager')
+const remixLib = require('remix-lib')
+const txFormat = remixLib.execution.txFormat
+const txHelper = remixLib.execution.txHelper
+
+const confirmDialog = require('./confirmDialog')
+const modalCustom = require('./modal-dialog-custom')
+const modalDialog = require('./modaldialog')
+const TreeView = require('./TreeView')
 
 function decodeResponseToTreeView (response, fnabi) {
-  var treeView = new TreeView({
+  const treeView = new TreeView({
     extractData: (item, parent, key) => {
-      var ret = {}
+      let ret = {}
       if (BN.isBN(item)) {
         ret.self = item.toString(10)
         ret.children = []
@@ -40,27 +34,42 @@ function decodeResponseToTreeView (response, fnabi) {
   return treeView.render(txFormat.decodeResponse(response, fnabi))
 }
 
-UniversalDAppUI.prototype.renderInstance = function (contract, address, contractName) {
-  var noInstances = document.querySelector('[class^="noInstancesText"]')
+class UniversalDAppUI {
+
+  constructor (blockchain, logCallback) {
+    this.blockchain = blockchain
+    this.logCallback = logCallback
+    this.compilerData = { contractsDetails: {} }
+  }
+
+  renderInstance (contract, address, contractName) {
+    const noInstances = document.querySelector('[class^="noInstancesText"]')
     if (noInstances) {
       noInstances.parentNode.removeChild(noInstances)
     }
     const abi = txHelper.sortAbiFunction(contract.abi)
     return this.renderInstanceFromABI(abi, address, contractName)
-}
+  }
 
-// TODO this function was named before "appendChild".
-// this will render an instance: contract name, contract address, and all the public functions
-// basically this has to be called for the "atAddress" (line 393) and when a contract creation succeed
-// this returns a DOM element
-UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address, contractName) {
+  // TODO this function was named before "appendChild".
+  // this will render an instance: contract name, contract address, and all the public functions
+  // basically this has to be called for the "atAddress" (line 393) and when a contract creation succeed
+  // this returns a DOM element
+  renderInstanceFromABI (contractABI, address, contractName) {
     address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
     address = ethJSUtil.toChecksumAddress(address)
-  var instance = yo`<div class="instance ${css.instance} ${css.hidesub}" id="instance${address}"></div>`
+    const instance = yo`<div class="instance ${css.instance} ${css.hidesub}" id="instance${address}"></div>`
     const context = this.blockchain.context()
 
-  var shortAddress = helper.shortenAddress(address)
-  var title = yo`
+    function toggleClass (e) {
+      $(instance).toggleClass(`${css.hidesub}`)
+      // e.currentTarget.querySelector('i')
+      e.currentTarget.querySelector('i').classList.toggle(`fa-angle-right`)
+      e.currentTarget.querySelector('i').classList.toggle(`fa-angle-down`)
+    }
+
+    const shortAddress = helper.shortenAddress(address)
+    const title = yo`
     <div class="${css.title} alert alert-secondary p-2">
       <button class="btn ${css.titleExpander}" onclick="${(e) => { toggleClass(e) }}">
         <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -78,33 +87,21 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
     </div>
   `
 
-  var close = yo`
+    const close = yo`
     <button
       class="${css.udappClose} p-1 btn btn-secondary"
-      onclick=${remove}
+      onclick=${() => { instance.remove() }}
       title="Remove from the list"
     >
       <i class="${css.closeIcon} fas fa-times" aria-hidden="true"></i>
     </button>`
     title.querySelector('.btn-group').appendChild(close)
 
-  var contractActionsWrapper = yo`
+    const contractActionsWrapper = yo`
     <div class="${css.cActionsWrapper}">
     </div>
   `
 
-  function remove () {
-    instance.remove()
-    // @TODO perhaps add a callack here to warn the caller that the instance has been removed
-  }
-
-  function toggleClass (e) {
-    $(instance).toggleClass(`${css.hidesub}`)
-    // e.currentTarget.querySelector('i')
-    e.currentTarget.querySelector('i').classList.toggle(`fa-angle-right`)
-    e.currentTarget.querySelector('i').classList.toggle(`fa-angle-down`)
-  }
-
     instance.appendChild(title)
     instance.appendChild(contractActionsWrapper)
 
@@ -134,9 +131,9 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
     })
 
     return instance
-}
+  }
 
-UniversalDAppUI.prototype.getConfirmationCb = function (modalDialog, confirmDialog) {
+  getConfirmationCb (modalDialog, confirmDialog) {
     const confirmationCb = (network, tx, gasEstimation, continueTxExecution, cancelCb) => {
       if (network.name !== 'Main') {
         return continueTxExecution(null)
@@ -153,7 +150,7 @@ UniversalDAppUI.prototype.getConfirmationCb = function (modalDialog, confirmDial
             if (!content.gasPriceStatus) {
               cancelCb('Given gas price is not correct')
             } else {
-            var gasPrice = this.blockchain.toWei(content.querySelector('#gasprice').value, 'gwei')
+              const gasPrice = this.blockchain.toWei(content.querySelector('#gasprice').value, 'gwei')
               continueTxExecution(gasPrice)
             }
           }
@@ -167,19 +164,18 @@ UniversalDAppUI.prototype.getConfirmationCb = function (modalDialog, confirmDial
     }
 
     return confirmationCb
-}
+  }
 
-// TODO this is used by renderInstance when a new instance is displayed.
-// this returns a DOM element.
-UniversalDAppUI.prototype.getCallButton = function (args) {
-  let self = this
+  // TODO this is used by renderInstance when a new instance is displayed.
+  // this returns a DOM element.
+  getCallButton (args) {
     // args.funABI, args.address [fun only]
     // args.contractName [constr only]
     const lookupOnly = args.funABI.stateMutability === 'view' || args.funABI.stateMutability === 'pure' || args.funABI.constant
 
-  var outputOverride = yo`<div class=${css.value}></div>` // show return value
+    const outputOverride = yo`<div class=${css.value}></div>` // show return value
 
-  function clickButton (valArr, inputsValues) {
+    const clickButton = (valArr, inputsValues) => {
       let logMsg
       if (!lookupOnly) {
         logMsg = `call to ${args.contractName}.${(args.funABI.name) ? args.funABI.name : '(fallback)'}`
@@ -187,7 +183,7 @@ UniversalDAppUI.prototype.getCallButton = function (args) {
         logMsg = `transact to ${args.contractName}.${(args.funABI.name) ? args.funABI.name : '(fallback)'}`
       }
 
-    const confirmationCb = self.getConfirmationCb(modalDialog, confirmDialog)
+      const confirmationCb = this.getConfirmationCb(modalDialog, confirmDialog)
       const continueCb = (error, continueTxExecution, cancelCb) => {
         if (error) {
           const msg = typeof error !== 'string' ? error.message : error
@@ -222,7 +218,7 @@ UniversalDAppUI.prototype.getCallButton = function (args) {
       }
 
       const callType = args.funABI.type !== 'fallback' ? inputsValues : ''
-    self.blockchain.runOrCallContractMethod(args.contractName, args.contractAbi, args.funABI, inputsValues, args.address, callType, lookupOnly, logMsg, self.logCallback, outputCb, confirmationCb, continueCb, promptCb)
+      this.blockchain.runOrCallContractMethod(args.contractName, args.contractAbi, args.funABI, inputsValues, args.address, callType, lookupOnly, logMsg, this.logCallback, outputCb, confirmationCb, continueCb, promptCb)
     }
 
     let inputs = ''
@@ -238,6 +234,8 @@ UniversalDAppUI.prototype.getCallButton = function (args) {
     contractActionsContainer.appendChild(outputOverride)
 
     return contractActionsContainer
+  }
+
 }
 
 module.exports = UniversalDAppUI