From f60dc9805e6cc2870bc72e697466a04d2f8c9a7e Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Mon, 1 Aug 2022 13:41:03 +0200
Subject: [PATCH 1/2] add action to copy parameters

---
 .../src/lib/components/contractGUI.tsx        | 32 +++++++++++++++++--
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
index c5f6f394ce..fb16d4a49f 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
+++ b/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()
@@ -251,9 +266,20 @@ export function ContractGUI (props: ContractGUIProps) {
             })}
           </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>
+           <button type="button" onClick={handleExpandMultiClick} title={buttonOptions.title} data-id={buttonOptions.dataId} className={`btn udapp_instanceButton ${buttonOptions.classList}`}>{ buttonOptions.content }</button>
           </div>
+          <CopyToClipboard tip='Copy call data to clipboard' icon='fa-clipboard' direction={'bottom'} getContent={getEncodedCall} >
+              <button className="btn remixui_copyButton">
+                <i className="remixui_copyIcon far fa-copy" aria-hidden="true"></i>
+                <span>Calldata</span>
+              </button>
+            </CopyToClipboard>
+            <CopyToClipboard tip='Copy encoded input parameters to clipboard' icon='fa-clipboard' direction={'bottom'} getContent={getEncodedParams} >
+              <button className="btn remixui_copyButton">
+                <i className="remixui_copyIcon far fa-copy" aria-hidden="true"></i>
+              <span>Parameters</span>
+              </button>
+            </CopyToClipboard>
         </div>
       </div>
       { props.deployOption && (props.deployOption || []).length > 0 ?

From dcfacb3041d8eeeb79605f1b345451196f187ec7 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Tue, 2 Aug 2022 22:04:40 +0200
Subject: [PATCH 2/2] UI inprovements

---
 .../src/lib/components/contractGUI.tsx        | 24 ++++++++++++-------
 .../src/lib/components/multiDeployInput.tsx   |  8 +++----
 libs/remix-ui/run-tab/src/lib/css/run-tab.css |  2 +-
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
index fb16d4a49f..20965b644f 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
@@ -265,21 +265,29 @@ export function ContractGUI (props: ContractGUIProps) {
                 </div>)
             })}
           </div>
-          <div className="udapp_group udapp_multiArg">
-           <button type="button" onClick={handleExpandMultiClick} title={buttonOptions.title} data-id={buttonOptions.dataId} className={`btn udapp_instanceButton ${buttonOptions.classList}`}>{ buttonOptions.content }</button>
-          </div>
-          <CopyToClipboard tip='Copy call data to clipboard' icon='fa-clipboard' direction={'bottom'} getContent={getEncodedCall} >
+          <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 className="remixui_copyIcon far fa-copy" aria-hidden="true"></i>
-                <span>Calldata</span>
+                <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 className="remixui_copyIcon far fa-copy" aria-hidden="true"></i>
-              <span>Parameters</span>
+                <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>
       { props.deployOption && (props.deployOption || []).length > 0 ?
diff --git a/libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx b/libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx
index cec20b223c..6f3d355852 100644
--- a/libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx
+++ b/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 ( 
+
+  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>
diff --git a/libs/remix-ui/run-tab/src/lib/css/run-tab.css b/libs/remix-ui/run-tab/src/lib/css/run-tab.css
index 2921381007..1c9cd7fe5b 100644
--- a/libs/remix-ui/run-tab/src/lib/css/run-tab.css
+++ b/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;