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}) => ( - - - -); +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 ( this.onCopy()} + title={title}> + + + {this.state.showCopied && + + Copied to clipboard + } + + ); + } +} 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 ( -
- {this.props.children} -
- ); - } -} +const Logs = (props) => ( +
+ {props.children} +
+); Logs.propTypes = { children: PropTypes.object