Merge pull request #1326 from ethereum/multi_param_cp

Adding copy to clipboard in the expanded view

src/app/tabs/run-tab.js

@@ -329,9 +329,10 @@ function contractDropdown (events, appAPI, appEvents, opts, self) {
     createPanel.innerHTML = ''
     if (opts.compiler.getContract && selectContractNames.selectedIndex >= 0 && selectContractNames.children.length > 0) {
       var ctrabi = txHelper.getConstructorInterface(getSelectedContract().contract.object.abi)
+      var ctrEVMbc = getSelectedContract().contract.object.evm.bytecode.object
       var createConstructorInstance = new MultiParamManager(0, ctrabi, (valArray, inputsValues) => {
         createInstance(inputsValues)
-      }, txHelper.inputParametersDeclarationToString(ctrabi.inputs), 'Deploy')
+      }, txHelper.inputParametersDeclarationToString(ctrabi.inputs), 'Deploy', ctrEVMbc)
       createPanel.appendChild(createConstructorInstance.render())
       return
     } else {

src/app/ui/copy-to-clipboard.js

@@ -14,14 +14,20 @@ var css = csjs`
   }
 `
 
-module.exports = function copyToClipboard (getContent) {
-  var copyIcon = yo`<i title="Copy value to clipboard" class="${css.copyIcon} fa fa-clipboard" aria-hidden="true"></i>`
+module.exports = function copyToClipboard (getContent, tip = 'Copy value to clipboard', icon = 'fa-clipboard') {
+  var copyIcon = yo`<i title="${tip}" class="${css.copyIcon} fa ${icon}" aria-hidden="true"></i>`
   copyIcon.style.color = styles.remix.icon_Color_CopyToClipboard
   copyIcon.onmouseenter = function (event) { copyIcon.style.color = styles.remix.icon_HoverColor_CopyToClipboard }
   copyIcon.onmouseleave = function (event) { copyIcon.style.color = styles.remix.icon_Color_CopyToClipboard }
   copyIcon.onclick = (event) => {
     event.stopPropagation()
-    var copiableContent = getContent()
+    var copiableContent
+    try {
+      copiableContent = getContent()
+    } catch (e) {
+      addTooltip(e.message)
+      return
+    }
     if (copiableContent) {   // module `copy` keeps last copied thing in the memory, so don't show tooltip if nothing is copied, because nothing was added to memory
       try {
         if (typeof copiableContent !== 'string') {
@@ -29,7 +35,7 @@ module.exports = function copyToClipboard (getContent) {
         }
       } catch (e) {}
       copy(copiableContent)
-      addTooltip('Successfully copied!')
+      addTooltip(tip)
     }
   }
   return copyIcon

src/multiParamManager.js

@@ -2,6 +2,9 @@
 
 var yo = require('yo-yo')
 var css = require('./universal-dapp-styles')
+var copyToClipboard = require('./app/ui/copy-to-clipboard')
+var remixLib = require('remix-lib')
+var txFormat = remixLib.execution.txFormat
 
 class MultiParamManager {
 
@@ -12,14 +15,16 @@ class MultiParamManager {
     * @param {Function} clickMultiCallBack
     * @param {string} inputs
     * @param {string} title
+    * @param {string} evmBC
     *
     */
-  constructor (lookupOnly, funABI, clickCallBack, inputs, title) {
+  constructor (lookupOnly, funABI, clickCallBack, inputs, title, evmBC) {
     this.lookupOnly = lookupOnly
     this.funABI = funABI
     this.clickCallBack = clickCallBack
     this.inputs = inputs
     this.title = title
+    this.evmBC = evmBC
     this.basicInputField
     this.multiFields
   }
@@ -147,6 +152,22 @@ class MultiParamManager {
         ${this.multiFields}
         <div class="${css.group} ${css.multiArg}" >
           ${button}
+          ${copyToClipboard(
+            () => {
+              var multiString = this.getMultiValsString()
+              var multiJSON = JSON.parse('[' + multiString + ']')
+              var encodeObj
+              if (this.evmBC) {
+                encodeObj = txFormat.encodeData(this.funABI, multiJSON, this.evmBC)
+              } else {
+                encodeObj = txFormat.encodeData(this.funABI, multiJSON)
+              }
+              if (encodeObj.error) {
+                throw new Error(encodeObj.error)
+              } else {
+                return encodeObj.data
+              }
+            }, 'Encode values of input fields & copy to clipboard', 'fa-briefcase')}
         </div>
       </div>
     </div>`

src/universal-dapp-styles.js

@@ -237,6 +237,11 @@ var css = csjs`
     border-bottom-right-radius: 0;
     border-right: 0;
   }
+  .contractActionsContainerMultiInner .multiArg i {
+    padding-right: 26px;
+    padding-top: 5px;
+    float: right;
+  }
 `
 
 module.exports = css