encode data on click

libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx

@@ -12,10 +12,11 @@ interface ICopyToClipboard {
   direction?: Placement,
   className?: string,
   title?: string,
-  children?: JSX.Element
+  children?: JSX.Element,
+  onmousedown?: any
 }
 export const CopyToClipboard = (props: ICopyToClipboard) => {
-  let { content, tip = 'Copy', icon = 'fa-copy', direction = 'right', children, ...otherProps } = props
+  let { content, tip = 'Copy', icon = 'fa-copy', direction = 'right', children, onmousedown, ...otherProps } = props
   const [message, setMessage] = useState(tip)
   const handleClick = (e) => {
     if (content && content !== '') { // module `copy` keeps last copied thing in the memory, so don't show tooltip if nothing is copied, because nothing was added to memory
@@ -41,7 +42,7 @@ export const CopyToClipboard = (props: ICopyToClipboard) => {
 
   return (
     // eslint-disable-next-line jsx-a11y/anchor-is-valid
-    <a href='#' onClick={handleClick} onMouseLeave={reset}>
+    <a href='#' onClick={handleClick} onMouseLeave={reset} onMouseDown={onmousedown}>
       <OverlayTrigger placement={direction} overlay={
         <Tooltip id="overlay-tooltip">
           { message }

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

@@ -18,25 +18,6 @@ export function ContractGUI (props: ContractGUIProps) {
   const [clipboardContent, setClipboardContent] = useState<string>('')
   const multiFields = useRef<Array<HTMLInputElement | null>>([])
 
-  useEffect(() => {
-    const multiString = getMultiValsString()
-    const multiJSON = JSON.parse('[' + multiString + ']')
-    let encodeObj
-
-    if (props.evmBC) {
-      encodeObj = txFormat.encodeData(props.funcABI, multiJSON, props.evmBC)
-    } else {
-      encodeObj = txFormat.encodeData(props.funcABI, multiJSON, null)
-    }
-    if (encodeObj.error) {
-      console.error(encodeObj.error)
-      // throw new Error(encodeObj.error)
-      setClipboardContent(encodeObj.error)
-    } else {
-      setClipboardContent(encodeObj.data)
-    }
-  }, [])
-
   useEffect(() => {
     if (props.title) {
       setTitle(props.title)
@@ -75,6 +56,24 @@ export function ContractGUI (props: ContractGUIProps) {
     }
   }, [props.lookupOnly, props.funcABI, title])
 
+  const onCTCMouseDown = () => {
+    const multiString = getMultiValsString()
+    const multiJSON = JSON.parse('[' + multiString + ']')
+    let encodeObj
+
+    if (props.evmBC) {
+      encodeObj = txFormat.encodeData(props.funcABI, multiJSON, props.evmBC)
+    } else {
+      encodeObj = txFormat.encodeData(props.funcABI, multiJSON, null)
+    }
+    if (encodeObj.error) {
+      console.error(encodeObj.error)
+      setClipboardContent(encodeObj.error)
+    } else {
+      setClipboardContent(encodeObj.data)
+    }
+  }
+
   const switchMethodViewOn = () => {
     setToggleContainer(true)
     makeMultiVal()
@@ -187,7 +186,7 @@ export function ContractGUI (props: ContractGUIProps) {
             })}
           </div>
           <div className="udapp_group udapp_multiArg">
-            <CopyToClipboard content={clipboardContent} tip='Encode values of input fields & copy to clipboard' icon='fa-clipboard' direction={'left'} />
+            <CopyToClipboard content={clipboardContent} tip='Encode values of input fields & copy to clipboard' icon='fa-clipboard' direction={'left'} onmousedown= {onCTCMouseDown} />
             <button onClick={handleExpandMultiClick} title={buttonOptions.title} data-id={buttonOptions.dataId} className={`udapp_instanceButton ${buttonOptions.classList}`}>{ buttonOptions.content }</button>
           </div>
         </div>