From e660eaea728d7ed0b25fdb18cce84d50b6674996 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Fri, 19 Oct 2018 11:16:25 -0400
Subject: [PATCH] add tooltip on copy when there is no onCopy prop

---
 embark-ui/src/components/ContractOverview.js |  1 -
 embark-ui/src/components/CopyButton.js       | 50 ++++++++++++++++----
 embark-ui/src/components/Logs.js             | 14 ++----
 3 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/embark-ui/src/components/ContractOverview.js b/embark-ui/src/components/ContractOverview.js
index 2649ca79..69904113 100644
--- a/embark-ui/src/components/ContractOverview.js
+++ b/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';
 
diff --git a/embark-ui/src/components/CopyButton.js b/embark-ui/src/components/CopyButton.js
index 5e0fd8bd..eeeac888 100644
--- a/embark-ui/src/components/CopyButton.js
+++ b/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}) => (
-  <CopyToClipboard text={text}
-                   onCopy={onCopy}
-                   title={title}>
-    <Badge className={classNames('copy-to-clipboard', 'p-' + (size ? size : 3))}
-           color="primary"><i className="fa fa-copy"/></Badge>
-  </CopyToClipboard>
-);
+class CopyButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.id = uuid();
+    this.state = {
+      showCopied: false
+    };
+  }
+
+  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([
diff --git a/embark-ui/src/components/Logs.js b/embark-ui/src/components/Logs.js
index 51bc71bb..6b0e7701 100644
--- a/embark-ui/src/components/Logs.js
+++ b/embark-ui/src/components/Logs.js
@@ -4,15 +4,11 @@ import autoscroll from 'autoscroll-react';
 
 import "./Logs.css";
 
-class Logs extends React.Component {
-  render() {
-    return (
-      <div className="logs" {...this.props}>
-        {this.props.children}
-      </div>
-    );
-  }
-}
+const Logs = (props) =>  (
+  <div className="logs" {...props}>
+    {props.children}
+  </div>
+);
 
 Logs.propTypes = {
   children: PropTypes.object