Merge branch 'master' into awaitasyncmodals

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

@@ -6,20 +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
+  children?: JSX.Element,
+  getContent?: () => {}
 }
 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, 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')
       }
@@ -28,11 +33,16 @@ 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
   }
 
   const reset = () => {

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

@@ -15,28 +15,8 @@ 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(() => {
-    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 +55,28 @@ export function ContractGUI (props: ContractGUIProps) {
     }
   }, [props.lookupOnly, props.funcABI, title])
 
+  const getContentOnCTC = () => {
+    const multiString = getMultiValsString()
+    // copy-to-clipboard icon is only visible for method requiring input params
+    if (!multiString) {
+      return 'cannot encode empty arguments'
+    }
+    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)
+      return encodeObj.error
+    } else {
+      return encodeObj.data
+    }
+  }
+
   const switchMethodViewOn = () => {
     setToggleContainer(true)
     makeMultiVal()
@@ -187,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'} />
+            <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>