Merge branch 'master' into linetexts

libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx

@@ -5,6 +5,7 @@ import { ContractGUIProps } from '../types'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 
 const txFormat = remixLib.execution.txFormat
+const txHelper = remixLib.execution.txHelper
 export function ContractGUI (props: ContractGUIProps) {
   const [title, setTitle] = useState<string>('')
   const [basicInput, setBasicInput] = useState<string>('')
@@ -74,7 +75,7 @@ export function ContractGUI (props: ContractGUIProps) {
     }
   }, [props.lookupOnly, props.funcABI, title])
 
-  const getContentOnCTC = () => {
+  const getEncodedCall = () => {
     const multiString = getMultiValsString(multiFields.current)
     // copy-to-clipboard icon is only visible for method requiring input params
     if (!multiString) {
@@ -95,6 +96,20 @@ export function ContractGUI (props: ContractGUIProps) {
     }
   }
 
+  const getEncodedParams = () => {
+    try {
+      const multiString = getMultiValsString(multiFields.current)
+      // copy-to-clipboard icon is only visible for method requiring input params
+      if (!multiString) {
+        return 'cannot encode empty arguments'
+      }
+      const multiJSON = JSON.parse('[' + multiString + ']')
+      return txHelper.encodeParams(props.funcABI, multiJSON)
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
   const switchMethodViewOn = () => {
     setToggleContainer(true)
     makeMultiVal()
@@ -250,9 +265,28 @@ export function ContractGUI (props: ContractGUIProps) {
                 </div>)
             })}
           </div>
-          <div className="udapp_group udapp_multiArg">
-            <CopyToClipboard tip='Encode values of input fields & copy to clipboard' icon='fa-clipboard' direction={'bottom'} getContent={getContentOnCTC} />
-            <button onClick={handleExpandMultiClick} title={buttonOptions.title} data-id={buttonOptions.dataId} className={`udapp_instanceButton ${buttonOptions.classList}`}>{ buttonOptions.content }</button>
+          <div className="d-flex udapp_group udapp_multiArg">
+            <CopyToClipboard tip='Copy calldata to clipboard' icon='fa-clipboard' direction={'bottom'} getContent={getEncodedCall} >
+              <button className="btn remixui_copyButton">
+                <i id="copyCalldata" className="m-0 remixui_copyIcon far fa-copy" aria-hidden="true"></i>
+                <label htmlFor="copyCalldata">Calldata</label>
+              </button>
+            </CopyToClipboard>
+            <CopyToClipboard tip='Copy encoded input parameters to clipboard' icon='fa-clipboard' direction={'bottom'} getContent={getEncodedParams} >
+              <button className="btn remixui_copyButton">
+                <i id="copyParameters" className="m-0 remixui_copyIcon far fa-copy" aria-hidden="true"></i>
+                <label htmlFor="copyParameters">Parameters</label>
+              </button>
+            </CopyToClipboard>
+            <button
+              type="button"
+              onClick={handleExpandMultiClick}
+              title={buttonOptions.title}
+              data-id={buttonOptions.dataId}
+              className={`btn udapp_instanceButton ${buttonOptions.classList}`}
+            >
+              { buttonOptions.content }
+            </button>
           </div>
         </div>
       </div>

libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx

@@ -2,13 +2,13 @@ import React, { useRef, useState } from 'react'
 import { MultiDeployInputProps } from '../types'
 import { DeployButton } from './deployButton'
 
-export function MultiDeployInput (props: MultiDeployInputProps) {
+export function MultiDeployInput(props: MultiDeployInputProps) {
   const multiFields = useRef<Array<HTMLInputElement | null>>([])
 
   return (
     <div className="udapp_contractActionsContainerMulti" style={{ display: 'flex' }}>
       <div className="udapp_contractActionsContainerMultiInner text-dark">
-        <div className="udapp_multiHeader">
+        <div className="pt-2 udapp_multiHeader">
           <div className="udapp_multiTitle run-instance-multi-title">Deploy</div>
         </div>
         <div>

libs/remix-ui/run-tab/src/lib/css/run-tab.css

@@ -357,7 +357,7 @@
   border-bottom-left-radius: 0;
 }
 .udapp_contractProperty button {
-  min-width: 100px;
+  min-width: 80px;
   width: 100px;
   margin:0;
   word-break: inherit;