convert universal dapp ui to a class and update syntax

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

@@ -1,33 +1,27 @@
 /* global */
 'use strict'
 
-var $ = require('jquery')
+const $ = require('jquery')
-var yo = require('yo-yo')
+const yo = require('yo-yo')
-var ethJSUtil = require('ethereumjs-util')
+const ethJSUtil = require('ethereumjs-util')
-var BN = ethJSUtil.BN
+const BN = ethJSUtil.BN
-var helper = require('../../lib/helper')
+const helper = require('../../lib/helper')
-var copyToClipboard = require('./copy-to-clipboard')
+const copyToClipboard = require('./copy-to-clipboard')
-var css = require('../../universal-dapp-styles')
+const css = require('../../universal-dapp-styles')
-var MultiParamManager = require('./multiParamManager')
+const MultiParamManager = require('./multiParamManager')
-var remixLib = require('remix-lib')
+const remixLib = require('remix-lib')
-var txFormat = remixLib.execution.txFormat
+const txFormat = remixLib.execution.txFormat
-var txHelper = remixLib.execution.txHelper
+const txHelper = remixLib.execution.txHelper
-
+
-var confirmDialog = require('./confirmDialog')
+const confirmDialog = require('./confirmDialog')
-var modalCustom = require('./modal-dialog-custom')
+const modalCustom = require('./modal-dialog-custom')
-var modalDialog = require('./modaldialog')
+const modalDialog = require('./modaldialog')
-var TreeView = require('./TreeView')
+const TreeView = require('./TreeView')
-
-function UniversalDAppUI (blockchain, logCallback) {
-  this.blockchain = blockchain
-  this.logCallback = logCallback
-  this.compilerData = {contractsDetails: {}}
-}
 
 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,8 +34,16 @@ function decodeResponseToTreeView (response, fnabi) {
   return treeView.render(txFormat.decodeResponse(response, fnabi))
 }
 
-UniversalDAppUI.prototype.renderInstance = function (contract, address, contractName) {
+class UniversalDAppUI {
-  var noInstances = document.querySelector('[class^="noInstancesText"]')
+
+  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)
     }
@@ -53,14 +55,21 @@ UniversalDAppUI.prototype.renderInstance = function (contract, address, contract
   // 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) {
+  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)
+    function toggleClass (e) {
-  var title = yo`
+      $(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)
 
@@ -136,7 +133,7 @@ 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)
             }
           }
@@ -171,15 +168,14 @@ UniversalDAppUI.prototype.getConfirmationCb = function (modalDialog, confirmDial
 
   // TODO this is used by renderInstance when a new instance is displayed.
   // this returns a DOM element.
-UniversalDAppUI.prototype.getCallButton = function (args) {
+  getCallButton (args) {
-  let self = this
     // 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 = ''
@@ -240,4 +236,6 @@ UniversalDAppUI.prototype.getCallButton = function (args) {
     return contractActionsContainer
   }
 
+}
+
 module.exports = UniversalDAppUI