From 65b42fb05a894e2b56f67fd6495c5136c64401ed Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Mon, 1 Aug 2022 13:41:03 +0200
Subject: [PATCH] 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 ?