getContent for CTC

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

@@ -6,21 +6,25 @@ import { Placement } from 'react-bootstrap/esm/Overlay'
 import './copy-to-clipboard.css'
 
 interface ICopyToClipboard {
-  content: any,
+  content?: any,
   tip?: string,
   icon?: string,
   direction?: Placement,
   className?: string,
   title?: string,
   children?: JSX.Element,
-  onmousedown?: any
+  getContent?: () => {}
 }
 export const CopyToClipboard = (props: ICopyToClipboard) => {
-  let { content, tip = 'Copy', icon = 'fa-copy', direction = 'right', children, onmousedown, ...otherProps } = props
+  let { content, tip = 'Copy', icon = 'fa-copy', direction = 'right', children, getContent, ...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
+  const copyData = () => {
     try {
+      if (content === '') {
+        setMessage('Cannot copy empty content!')
+        return
+      }
       if (typeof content !== 'string') {
         content = JSON.stringify(content, null, '\t')
       }
@@ -29,8 +33,14 @@ export const CopyToClipboard = (props: ICopyToClipboard) => {
     } catch (e) {
       console.error(e)
     }
+  }
+
+  const handleClick = (e) => {
+    if (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
+      copyData()
     } else {
-      setMessage('Cannot copy empty content!')
+      content = getContent && getContent()
+      copyData()
     }
     e.preventDefault()
     return false
@@ -42,7 +52,7 @@ export const CopyToClipboard = (props: ICopyToClipboard) => {
 
   return (
     // eslint-disable-next-line jsx-a11y/anchor-is-valid
-    <a href='#' onClick={handleClick} onMouseLeave={reset} onMouseDown={onmousedown}>
+    <a href='#' onClick={handleClick} onMouseLeave={reset}>
       <OverlayTrigger placement={direction} overlay={
         <Tooltip id="overlay-tooltip">
           { message }

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

@@ -15,7 +15,6 @@ export function ContractGUI (props: ContractGUIProps) {
     classList: string,
     dataId: string
   }>({ title: '', content: '', classList: '', dataId: '' })
-  const [clipboardContent, setClipboardContent] = useState<string>('')
   const multiFields = useRef<Array<HTMLInputElement | null>>([])
 
   useEffect(() => {
@@ -56,12 +55,11 @@ export function ContractGUI (props: ContractGUIProps) {
     }
   }, [props.lookupOnly, props.funcABI, title])
 
-  const onCTCMouseDown = () => {
+  const getContentOnCTC = () => {
     const multiString = getMultiValsString()
     // copy-to-clipboard icon is only visible for method requiring input params
     if (!multiString) {
-      setClipboardContent('cannot encode empty arguments')
+      return 'cannot encode empty arguments'
-      return
     }
     const multiJSON = JSON.parse('[' + multiString + ']')
     let encodeObj
@@ -73,9 +71,9 @@ export function ContractGUI (props: ContractGUIProps) {
     }
     if (encodeObj.error) {
       console.error(encodeObj.error)
-      setClipboardContent(encodeObj.error)
+      return encodeObj.error
     } else {
-      setClipboardContent(encodeObj.data)
+      return encodeObj.data
     }
   }
 
@@ -191,7 +189,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'} onmousedown= {onCTCMouseDown} />
+            <CopyToClipboard tip='Encode values of input fields & copy to clipboard' icon='fa-clipboard' direction={'left'} getContent={getContentOnCTC} />
             <button onClick={handleExpandMultiClick} title={buttonOptions.title} data-id={buttonOptions.dataId} className={`udapp_instanceButton ${buttonOptions.classList}`}>{ buttonOptions.content }</button>
           </div>
         </div>