add tooltip on copy when there is no onCopy prop

embark-ui/src/components/ContractOverview.js

@@ -2,7 +2,6 @@ import PropTypes from "prop-types";
 import React from 'react';
 import ReactJson from "react-json-view";
 import {Row, Col, Table} from "reactstrap";
-import GasStationContainer from "../containers/GasStationContainer";
 import {formatContractForDisplay} from '../utils/presentation';
 import CopyButton from './CopyButton';
 

embark-ui/src/components/CopyButton.js

@@ -1,19 +1,51 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Badge} from "reactstrap";
+import {Badge, Tooltip} from "reactstrap";
 import classNames from 'classnames';
 import {CopyToClipboard} from 'react-copy-to-clipboard';
+import uuid from 'uuid/v1';
 
 import './CopyButton.css';
 
-const CopyButton = ({text, onCopy, title, size}) => (
+class CopyButton extends React.Component {
-  <CopyToClipboard text={text}
+  constructor(props) {
-                   onCopy={onCopy}
+    super(props);
-                   title={title}>
+    this.id = uuid();
-    <Badge className={classNames('copy-to-clipboard', 'p-' + (size ? size : 3))}
+    this.state = {
-           color="primary"><i className="fa fa-copy"/></Badge>
+      showCopied: false
-  </CopyToClipboard>
+    };
-);
+  }
+
+  onCopy() {
+    if (this.props.onCopy) {
+      return this.props.onCopy();
+    }
+    this.setState({
+      showCopied: true
+    });
+    // Hide the tooltip after a few seconds
+    clearTimeout(this.showTimeout);
+    this.showTimeout = setTimeout(() => {
+      this.setState({showCopied: false});
+    }, 1500);
+  }
+
+  render() {
+    const {text, title, size} = this.props;
+    return (<CopyToClipboard text={text}
+                             onCopy={() => this.onCopy()}
+                             title={title}>
+      <Badge className={classNames('copy-to-clipboard', 'p-' + (size ? size : 3))}
+             color="primary" id={'copy-button-' + this.id}>
+        <i className="fa fa-copy"/>
+        {this.state.showCopied &&
+        <Tooltip isOpen={true} target={'copy-button-' + this.id}>
+          Copied to clipboard
+        </Tooltip>}
+      </Badge>
+    </CopyToClipboard>);
+  }
+}
 
 CopyButton.propTypes = {
   text: PropTypes.oneOfType([

embark-ui/src/components/Logs.js

@@ -4,15 +4,11 @@ import autoscroll from 'autoscroll-react';
 
 import "./Logs.css";
 
-class Logs extends React.Component {
+const Logs = (props) =>  (
-  render() {
+  <div className="logs" {...props}>
-    return (
+    {props.children}
-      <div className="logs" {...this.props}>
+  </div>
-        {this.props.children}
+);
-      </div>
-    );
-  }
-}
 
 Logs.propTypes = {
   children: PropTypes.object