Copy abi and bytecode.

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

@@ -1,10 +1,21 @@
 import React, { useState } from 'react'
 import copy from 'copy-to-clipboard'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { Placement } from 'react-bootstrap/esm/Overlay'
 
 import './copy-to-clipboard.css'
 
-export const CopyToClipboard = ({ content, tip = 'Copy', icon = 'fa-copy', direction = 'right', ...otherProps }) => {
+interface ICopyToClipboard {
+  content: any,
+  tip?: string,
+  icon?: string,
+  direction?: Placement,
+  className?: string,
+  title?: string,
+  children?: JSX.Element
+}
+export const CopyToClipboard = (props: ICopyToClipboard) => {
+  let { content, tip = 'Copy', icon = 'fa-copy', direction = 'right', children, ...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
@@ -35,9 +46,11 @@ export const CopyToClipboard = ({ content, tip = 'Copy', icon = 'fa-copy', direc
           { message }
         </Tooltip>
       }>
-        <i className={`far ${icon} ml-1 p-2`} aria-hidden="true"
-          {...otherProps}
-        ></i>
+        {
+          children || (<i className={`far ${icon} ml-1 p-2`} aria-hidden="true"
+            {...otherProps}
+          ></i>)
+        }
       </OverlayTrigger>
     </a>
   )

libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx

@@ -42,23 +42,23 @@ export const ContractSelection = (props: ContractSelectionProps) => {
   }
 
   const copyABI = () => {
-    copyContractProperty('abi')
+    return copyContractProperty('abi')
   }
 
   const copyContractProperty = (property) => {
     let content = getContractProperty(property)
-    // if (!content) {
-    //   addTooltip('No content available for ' + property)
-    //   return
-    // }
-
-    // try {
-    //   if (typeof content !== 'string') {
-    //     content = JSON.stringify(content, null, '\t')
-    //   }
-    // } catch (e) {}
-
-    // copy(content)
+    if (!content) {
+      // addTooltip('No content available for ' + property)
+      return
+    }
+
+    try {
+      if (typeof content !== 'string') {
+        content = JSON.stringify(content, null, '\t')
+      }
+    } catch (e) {}
+
+    return content
     // addTooltip('Copied value to clipboard')
   }
   
@@ -180,7 +180,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
   }
 
   const copyBytecode = () => {
-    copyContractProperty('bytecode')
+    return copyContractProperty('bytecode')
   }
 
   return (
@@ -211,14 +211,18 @@ export const ContractSelection = (props: ContractSelectionProps) => {
             <div className="remixui_contractHelperButtons">
               <div className="input-group">
                 <div className="btn-group" role="group" aria-label="Copy to Clipboard">
-                  <button className="btn copyButton" title="Copy ABI to clipboard" onClick={() => { copyABI() }}>
-                    <i className="remixui_copyIcon far fa-copy" aria-hidden="true"></i>
-                    <span>ABI</span>
-                  </button>
-                  <button className="btn remixui_copyButton" title="Copy Bytecode to clipboard" onClick={() => { copyBytecode() }}>
-                    <i className="remixui_copyIcon far fa-copy" aria-hidden="true"></i>
-                    <span>Bytecode</span>
-                  </button>
+                  <CopyToClipboard title="Copy ABI to clipboard" content={copyABI()} direction='top'>
+                    <button className="btn remixui_copyButton" title="Copy ABI to clipboard">
+                      <i className="remixui_copyIcon far fa-copy" aria-hidden="true"></i>
+                      <span>ABI</span>
+                    </button>
+                  </CopyToClipboard>
+                  <CopyToClipboard title="Copy ABI to clipboard" content={copyBytecode()} direction='top'>
+                    <button className="btn remixui_copyButton" title="Copy Bytecode to clipboard">
+                      <i className="remixui_copyIcon far fa-copy" aria-hidden="true"></i>
+                      <span>Bytecode</span>
+                    </button>
+                  </CopyToClipboard>
                 </div>
               </div>
             </div>